build

dist/components/constants/color.css

@@ -0,0 +1,25 @@
+:host {
+	--ui-semantic-background-default: #f2f2f2;
+	--ui-semantic-surface-error: #ffedeb;
+	--ui-semantic-surface-regular-1: #fff;
+	--ui-semantic-surface-disabled: #0000000d;
+	--ui-semantic-surface-button-primary-default: #000000d6;
+	--ui-semantic-text-regular: #000000d6;
+	--ui-semantic-text-semi-weak: #000000ad;
+	--ui-semantic-text-placeholder: #0000008a;
+	--ui-semantic-text-disabled: #00000059;
+	--ui-semantic-text-error: #c92812;
+	--ui-semantic-text-inverse: #fff;
+	--ui-semantic-border-semi-strong: #b6b6b6;
+	--ui-semantic-border-semi-strong-hover: #0000008f;
+	--ui-semantic-border-error: #db351f;
+	--border-disabled: #e5e5e5;
+}
+
+
+
+	/*
+   * https://www.figma.com/design/YCNyynKZCTO8JbYdkyQSCU/UB%E3%82%A2%E3%82%AB%E3%82%A6%E3%83%B3%E3%83%88%E3%83%AD%E3%82%B0%E3%82%A4%E3%83%B3?node-id=269-1152&t=KR1IcnXF9Tkyyzju-0
+   */
+
+

dist/components/constants/radius.css

@@ -0,0 +1,5 @@
+:host {
+	--border-radius-50: 12px;
+	--radius-small: 4px;
+	--radius-medium: 6px;
+}

dist/components/constants/space.css

@@ -0,0 +1,10 @@
+:host {
+    --spacing-10: 4px;
+    --spacing-20: 8px;
+    --spacing-30: 12px;
+    --spacing-40: 16px;
+    --spacing-50: 24px;
+    --spacing-60: 32px;
+    --spacing-70: 40px;
+    --spacing-90: 64px;
+}

dist/components/foundation.css

@@ -1,3 +1,7 @@
+@import url('./constants/color.css');
+@import url('./constants/radius.css');
+@import url('./constants/space.css');
+
 :host {
   --font-weight-normal: 400;
   --font-weight-bold: 700;

dist/components/styles.d.ts

@@ -0,0 +1,2 @@
+export declare function makeStyleSheet(...styles: string[]): CSSStyleSheet;
+//# sourceMappingURL=styles.d.ts.map

dist/components/styles.js

@@ -0,0 +1,7 @@
+import resetStyle from "@acab/reset.css?inline";
+import foundationStyle from "@/components/foundation.css?inline";
+export function makeStyleSheet(...styles) {
+    const cssStyleSheet = new CSSStyleSheet();
+    cssStyleSheet.replaceSync(`${styles.join(" ")} ${resetStyle} ${foundationStyle}`);
+    return cssStyleSheet;
+}

dist/components/text-field/error-icon/index.d.ts

@@ -0,0 +1,10 @@
+export declare class SpTextFieldErrorIcon extends HTMLElement {
+    constructor();
+    connectedCallback(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "sp-text-field-error-icon": SpTextFieldErrorIcon;
+    }
+}
+//# sourceMappingURL=index.d.ts.map

dist/components/text-field/error-icon/index.js

@@ -0,0 +1,35 @@
+import { makeStyleSheet } from "@/components/styles";
+import styles from "@/components/text-field/error-message/styles.css?inline";
+export class SpTextFieldErrorIcon extends HTMLElement {
+    constructor() {
+        super();
+        this.attachShadow({ mode: "open" });
+    }
+    connectedCallback() {
+        if (!this.shadowRoot)
+            return;
+        this.shadowRoot.adoptedStyleSheets = [
+            ...this.shadowRoot.adoptedStyleSheets,
+            makeStyleSheet(styles),
+        ];
+        this.shadowRoot.innerHTML = `<svg
+        width="21"
+        height="21"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M18.3663 6.60625L14.3938 2.63375C14.105 2.345 13.72 2.1875 13.3087 2.1875H7.69125C7.28 2.1875 6.895 2.345 6.60625 2.63375L2.63375 6.60625C2.345 6.895 2.1875 7.28875 2.1875 7.69125V13.3087C2.1875 13.7112 2.35375 14.105 2.63375 14.3938L6.60625 18.3662C6.895 18.655 7.28 18.8125 7.69125 18.8125H13.3087C13.72 18.8125 14.105 18.655 14.3938 18.3662L18.3663 14.3938C18.655 14.105 18.8125 13.7112 18.8125 13.3087V7.69125C18.8125 7.28875 18.6463 6.895 18.3663 6.60625Z"
+          fill="#DB351F"
+        />
+        <path
+          d="M11.4273 10.4912L14.2448 7.67372C14.4985 7.41997 14.4985 6.99997 14.2448 6.74622C13.991 6.49247 13.571 6.49247 13.3173 6.74622L10.4998 9.56372L7.68226 6.74622C7.42851 6.49247 7.00852 6.49247 6.75477 6.74622C6.50102 6.99997 6.50102 7.41997 6.75477 7.67372L9.57226 10.4912L6.75477 13.3087C6.50102 13.5625 6.50102 13.9825 6.75477 14.2362C6.88602 14.3675 7.05226 14.4287 7.21851 14.4287C7.38476 14.4287 7.55101 14.3675 7.68226 14.2362L10.4998 11.4187L13.3173 14.2362C13.4485 14.3675 13.6148 14.4287 13.781 14.4287C13.9473 14.4287 14.1135 14.3675 14.2448 14.2362C14.4985 13.9825 14.4985 13.5625 14.2448 13.3087L11.4273 10.4912Z"
+          fill="white"
+        />
+      </svg>`;
+    }
+}
+const tagName = "sp-text-field-error-icon";
+if (!customElements.get(tagName)) {
+    customElements.define(tagName, SpTextFieldErrorIcon);
+}

dist/components/text-field/error-icon/styles.css

@@ -0,0 +1,3 @@
+:host {
+    height: 21px;
+}

dist/components/text-field/error-message/index.d.ts

@@ -0,0 +1,15 @@
+export declare class SpTextFieldErrorMessage extends HTMLElement {
+    #private;
+    static observedAttributes: string[];
+    get textContent(): string | null;
+    set textContent(value: string | null);
+    constructor();
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, _: string, newValue: string): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "sp-text-field-error-message": SpTextFieldErrorMessage;
+    }
+}
+//# sourceMappingURL=index.d.ts.map

dist/components/text-field/error-message/index.js

@@ -0,0 +1,71 @@
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var _SpTextFieldErrorMessage_instances, _SpTextFieldErrorMessage_span, _SpTextFieldErrorMessage_div, _SpTextFieldErrorMessage_textContent, _SpTextFieldErrorMessage_updateClass;
+import { makeStyleSheet } from "@/components/styles";
+import { SpTextFieldErrorIcon } from "@/components/text-field/error-icon";
+import styles from "@/components/text-field/error-message/styles.css?inline";
+export class SpTextFieldErrorMessage extends HTMLElement {
+    get textContent() {
+        return __classPrivateFieldGet(this, _SpTextFieldErrorMessage_textContent, "f");
+    }
+    set textContent(value) {
+        __classPrivateFieldSet(this, _SpTextFieldErrorMessage_textContent, value, "f");
+        if (__classPrivateFieldGet(this, _SpTextFieldErrorMessage_span, "f")) {
+            __classPrivateFieldGet(this, _SpTextFieldErrorMessage_span, "f").textContent = value;
+        }
+        __classPrivateFieldGet(this, _SpTextFieldErrorMessage_instances, "m", _SpTextFieldErrorMessage_updateClass).call(this);
+    }
+    constructor() {
+        super();
+        _SpTextFieldErrorMessage_instances.add(this);
+        _SpTextFieldErrorMessage_span.set(this, void 0);
+        _SpTextFieldErrorMessage_div.set(this, void 0);
+        _SpTextFieldErrorMessage_textContent.set(this, null);
+        this.attachShadow({ mode: "open" });
+    }
+    connectedCallback() {
+        if (!this.shadowRoot)
+            return;
+        this.shadowRoot.adoptedStyleSheets = [
+            ...this.shadowRoot.adoptedStyleSheets,
+            makeStyleSheet(styles),
+        ];
+        __classPrivateFieldSet(this, _SpTextFieldErrorMessage_div, document.createElement("div"), "f");
+        __classPrivateFieldGet(this, _SpTextFieldErrorMessage_div, "f").setAttribute("class", "icon");
+        __classPrivateFieldGet(this, _SpTextFieldErrorMessage_div, "f").appendChild(new SpTextFieldErrorIcon());
+        this.shadowRoot.appendChild(__classPrivateFieldGet(this, _SpTextFieldErrorMessage_div, "f"));
+        __classPrivateFieldSet(this, _SpTextFieldErrorMessage_span, document.createElement("span"), "f");
+        __classPrivateFieldGet(this, _SpTextFieldErrorMessage_span, "f").className = "message";
+        this.shadowRoot.appendChild(__classPrivateFieldGet(this, _SpTextFieldErrorMessage_span, "f"));
+        this.textContent = __classPrivateFieldGet(this, _SpTextFieldErrorMessage_textContent, "f");
+    }
+    attributeChangedCallback(name, _, newValue) {
+        if (name === "message") {
+            this.textContent = newValue;
+        }
+    }
+}
+_SpTextFieldErrorMessage_span = new WeakMap(), _SpTextFieldErrorMessage_div = new WeakMap(), _SpTextFieldErrorMessage_textContent = new WeakMap(), _SpTextFieldErrorMessage_instances = new WeakSet(), _SpTextFieldErrorMessage_updateClass = function _SpTextFieldErrorMessage_updateClass() {
+    if (__classPrivateFieldGet(this, _SpTextFieldErrorMessage_textContent, "f")) {
+        __classPrivateFieldGet(this, _SpTextFieldErrorMessage_div, "f")?.classList.remove("none");
+        __classPrivateFieldGet(this, _SpTextFieldErrorMessage_span, "f")?.classList.remove("none");
+    }
+    else {
+        __classPrivateFieldGet(this, _SpTextFieldErrorMessage_div, "f")?.classList.add("none");
+        __classPrivateFieldGet(this, _SpTextFieldErrorMessage_span, "f")?.classList.add("none");
+    }
+};
+SpTextFieldErrorMessage.observedAttributes = ["textContent"];
+const tagName = "sp-text-field-error-message";
+if (!customElements.get(tagName)) {
+    customElements.define(tagName, SpTextFieldErrorMessage);
+}

dist/components/text-field/error-message/styles.css

@@ -0,0 +1,21 @@
+:host {
+    display: flex;
+    gap: 2px;
+
+    >.icon {
+        display: flex;
+        align-items: center;
+    }
+
+    >.message {
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 21px;
+        color: var(--ui-semantic-text-error);
+    }
+
+    .none {
+        display: none;
+    }
+
+}

dist/components/text-field/label/index.d.ts

@@ -0,0 +1,18 @@
+export declare class SpTextFieldLabel extends HTMLElement {
+    #private;
+    static styles: CSSStyleSheet;
+    static observedAttributes: string[];
+    get htmlFor(): string;
+    set htmlFor(value: string);
+    get textContent(): string | null;
+    set textContent(text: string | null);
+    constructor();
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, _: string, newValue: string | null): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "sp-text-field-label": SpTextFieldLabel;
+    }
+}
+//# sourceMappingURL=index.d.ts.map

dist/components/text-field/label/index.js

@@ -0,0 +1,78 @@
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var _SpTextFieldLabel_instances, _SpTextFieldLabel_for, _SpTextFieldLabel_textContent, _SpTextFieldLabel_labelElm, _SpTextFieldLabel_updateClass;
+import { makeStyleSheet } from "@/components/styles";
+import styles from "./styles.css?inline";
+export class SpTextFieldLabel extends HTMLElement {
+    get htmlFor() {
+        return __classPrivateFieldGet(this, _SpTextFieldLabel_for, "f");
+    }
+    set htmlFor(value) {
+        __classPrivateFieldSet(this, _SpTextFieldLabel_for, value, "f");
+        if (__classPrivateFieldGet(this, _SpTextFieldLabel_labelElm, "f")) {
+            __classPrivateFieldGet(this, _SpTextFieldLabel_labelElm, "f").htmlFor = this.htmlFor;
+        }
+    }
+    get textContent() {
+        return __classPrivateFieldGet(this, _SpTextFieldLabel_textContent, "f");
+    }
+    set textContent(text) {
+        __classPrivateFieldSet(this, _SpTextFieldLabel_textContent, text, "f");
+        if (__classPrivateFieldGet(this, _SpTextFieldLabel_labelElm, "f")) {
+            __classPrivateFieldGet(this, _SpTextFieldLabel_labelElm, "f").textContent = __classPrivateFieldGet(this, _SpTextFieldLabel_textContent, "f");
+        }
+        __classPrivateFieldGet(this, _SpTextFieldLabel_instances, "m", _SpTextFieldLabel_updateClass).call(this);
+    }
+    constructor() {
+        super();
+        _SpTextFieldLabel_instances.add(this);
+        _SpTextFieldLabel_for.set(this, "");
+        _SpTextFieldLabel_textContent.set(this, null);
+        _SpTextFieldLabel_labelElm.set(this, void 0);
+        this.attachShadow({ mode: "open" });
+    }
+    connectedCallback() {
+        if (!this.shadowRoot)
+            return;
+        this.shadowRoot.adoptedStyleSheets = [
+            ...this.shadowRoot.adoptedStyleSheets,
+            makeStyleSheet(styles),
+        ];
+        __classPrivateFieldSet(this, _SpTextFieldLabel_labelElm, document.createElement("label"), "f");
+        __classPrivateFieldGet(this, _SpTextFieldLabel_labelElm, "f").classList.add("label");
+        this.shadowRoot.appendChild(__classPrivateFieldGet(this, _SpTextFieldLabel_labelElm, "f"));
+        this.htmlFor = __classPrivateFieldGet(this, _SpTextFieldLabel_for, "f");
+        this.textContent = __classPrivateFieldGet(this, _SpTextFieldLabel_textContent, "f");
+    }
+    attributeChangedCallback(name, _, newValue) {
+        if (name === "htmlFor") {
+            this.htmlFor = newValue ? newValue : "";
+        }
+        else if (name === "text") {
+            this.textContent = newValue;
+        }
+    }
+}
+_SpTextFieldLabel_for = new WeakMap(), _SpTextFieldLabel_textContent = new WeakMap(), _SpTextFieldLabel_labelElm = new WeakMap(), _SpTextFieldLabel_instances = new WeakSet(), _SpTextFieldLabel_updateClass = function _SpTextFieldLabel_updateClass() {
+    if (this.textContent) {
+        __classPrivateFieldGet(this, _SpTextFieldLabel_labelElm, "f")?.classList.remove("none");
+    }
+    else {
+        __classPrivateFieldGet(this, _SpTextFieldLabel_labelElm, "f")?.classList.add("none");
+    }
+};
+SpTextFieldLabel.styles = makeStyleSheet(styles);
+SpTextFieldLabel.observedAttributes = ["htmlFor", "text"];
+const tagName = "sp-text-field-label";
+if (!customElements.get(tagName)) {
+    customElements.define(tagName, SpTextFieldLabel);
+}

dist/components/text-field/label/styles.css

@@ -0,0 +1,11 @@
+:host {
+    .label {
+        font-weight: 700;
+        font-size: 14px;
+        line-height: 21px;
+
+        &.none {
+            display: none;
+        }
+    }
+}

dist/components/text-field/x-large/index.d.ts

@@ -0,0 +1,28 @@
+import "@/components/text-field/error-message";
+import "@/components/text-field/x-large/input";
+import "@/components/text-field/label";
+export declare class SpTextFieldXLarge extends HTMLElement {
+    #private;
+    static observedAttributes: string[];
+    static formAssociated: boolean;
+    get label(): string;
+    set label(text: string);
+    get error(): string;
+    set error(text: string);
+    get disabled(): boolean;
+    set disabled(newValue: boolean);
+    set placeholder(newValue: string | undefined | null);
+    get name(): string;
+    set name(value: string);
+    get value(): string;
+    set value(value: string);
+    constructor();
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, _: string, newValue: string | null): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "sp-text-field-x-large": SpTextFieldXLarge;
+    }
+}
+//# sourceMappingURL=index.d.ts.map