@reitwagen/design-components 0.4.0 → 0.6.1

package/dist/components/Radio/Radio.stories.js

@@ -8,10 +8,11 @@ const meta = {
     component: Radio_1.Radio,
     tags: ["autodocs"],
     parameters: {
+        layout: "centered",
         docs: {
             description: {
                 component: `
-그룹 내 단일 선택만 가능한 요소로, 상호 배타적 옵션을 나타냅니다. 라벨과 함께 사용하거나 단독으로 사용할 수 있습니다.
+그룹 내 단일 선택만 가능한 요소로, 상호 배타적 옵션을 나타냅니다. 라벨과 함께 사용하거나 단독으로 사용할 수 있습니다. 둘 이상의 Radio를 활용할 때는, \`<RadioGroup>\` 컴포넌트를 활용하는 것을 권장합니다.
 `,
             },
         },
@@ -28,6 +29,7 @@ const meta = {
 exports.default = meta;
 exports.Controlled = {
     parameters: {
+        layout: "centered",
         docs: {
             description: {
                 story: `
@@ -60,6 +62,7 @@ function Controlled() {
 };
 exports.ControlledWithLabel = {
     parameters: {
+        layout: "centered",
         docs: {
             source: {
                 code: `
@@ -88,12 +91,13 @@ function ControlledWithLabel() {
 };
 exports.UnControlled = {
     parameters: {
+        layout: "centered",
         docs: {
             description: {
                 story: `
 ### 상태를 내부에서 관리하는 방식
 
-Radio상태를 내부에서 자동으로 관리하려면 <code>defaultChecked</code> 속성을 사용하세요. 이 속성은 Checkbox이 처음 화면에 표시될 때 선택 상태를 정해주고, 그 후에는 컴포넌트가 스스로 상태를 관리해요. 상태 변화를 추적하지 않아도 될 때 유용해요.
+Radio의 상태를 내부에서 자동으로 관리하려면 <code>defaultChecked</code> 속성을 사용하세요. 이 속성은 Checkbox이 처음 화면에 표시될 때 선택 상태를 정해주고, 그 후에는 컴포넌트가 스스로 상태를 관리해요. 상태 변화를 추적하지 않아도 될 때 유용해요.
 `,
             },
         },

package/dist/components/Radio/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Radio/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Radio/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC"}

package/dist/components/RadioGroup/RadioGroup.d.ts

@@ -0,0 +1,55 @@
+import { ComponentPropsWithoutRef } from "react";
+interface RadioGroupContextValue {
+    name: string;
+    disabled?: boolean;
+    value?: string;
+    setValue: (value: string) => void;
+}
+export declare const useRadioGroup: () => RadioGroupContextValue | null;
+export interface RadioGroupProps extends ComponentPropsWithoutRef<"div"> {
+    /**
+     * `Radio` 컴포넌트 목록
+     */
+    children: React.ReactNode;
+    /**
+     * 선택된 value (Controlled)
+     */
+    value?: string;
+    /**
+     * 초기 선택 값 (Uncontrolled)
+     */
+    defaultValue?: string;
+    /**
+     * 선택 값이 변경될 때 호출되는 이벤트 핸들러
+     */
+    onValueChange?: (value: string) => void;
+    /**
+     * 그룹 전체 비활성화 여부
+     */
+    disabled?: boolean;
+}
+/**
+ * `RadioGroup`: 하나의 값을 선택할 수 있는 라디오 옵션 그룹입니다.
+ * 내부의 `Radio` 컴포넌트는 자동으로 그룹 상태를 공유하며, 그룹 단위로 value 제어 및 disabled 상태를 관리할 수 있습니다.
+ *
+ * @see [RDS Storybook: RadioGroup](https://main--691ac7d6da1eb0c0acb5f3e2.chromatic.com/?path=/docs/components-radiogroup--docs)
+ * @example
+ * ```tsx
+ * // Controlled
+ * const [value, setValue] = useState("a");
+ *
+ * <RadioGroup value={value} onValueChange={setValue}>
+ *   <Radio value="a">Option A</Radio>
+ *   <Radio value="b">Option B</Radio>
+ * </RadioGroup>
+ *
+ * // Uncontrolled
+ * <RadioGroup defaultValue="b">
+ *   <Radio value="a">Option A</Radio>
+ *   <Radio value="b">Option B</Radio>
+ * </RadioGroup>
+ * ```
+ */
+export declare function RadioGroup({ children, value: controlledValue, defaultValue, onValueChange, disabled, className, ...props }: RadioGroupProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=RadioGroup.d.ts.map

package/dist/components/RadioGroup/RadioGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup.d.ts","sourceRoot":"","sources":["../../../src/components/RadioGroup/RadioGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,wBAAwB,EAKzB,MAAM,OAAO,CAAC;AAGf,UAAU,sBAAsB;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAID,eAAO,MAAM,aAAa,qCAA+B,CAAC;AAE1D,MAAM,WAAW,eAAgB,SAAQ,wBAAwB,CAAC,KAAK,CAAC;IACtE;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAExC;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,KAAK,EAAE,eAAe,EACtB,YAAY,EACZ,aAAa,EACb,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,eAAe,2CAwBjB"}

package/dist/components/RadioGroup/RadioGroup.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useRadioGroup = void 0;
+exports.RadioGroup = RadioGroup;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const style_1 = require("../../utils/style");
+const RadioGroupContext = (0, react_1.createContext)(null);
+const useRadioGroup = () => (0, react_1.use)(RadioGroupContext);
+exports.useRadioGroup = useRadioGroup;
+/**
+ * `RadioGroup`: 하나의 값을 선택할 수 있는 라디오 옵션 그룹입니다.
+ * 내부의 `Radio` 컴포넌트는 자동으로 그룹 상태를 공유하며, 그룹 단위로 value 제어 및 disabled 상태를 관리할 수 있습니다.
+ *
+ * @see [RDS Storybook: RadioGroup](https://main--691ac7d6da1eb0c0acb5f3e2.chromatic.com/?path=/docs/components-radiogroup--docs)
+ * @example
+ * ```tsx
+ * // Controlled
+ * const [value, setValue] = useState("a");
+ *
+ * <RadioGroup value={value} onValueChange={setValue}>
+ *   <Radio value="a">Option A</Radio>
+ *   <Radio value="b">Option B</Radio>
+ * </RadioGroup>
+ *
+ * // Uncontrolled
+ * <RadioGroup defaultValue="b">
+ *   <Radio value="a">Option A</Radio>
+ *   <Radio value="b">Option B</Radio>
+ * </RadioGroup>
+ * ```
+ */
+function RadioGroup({ children, value: controlledValue, defaultValue, onValueChange, disabled, className, ...props }) {
+    const [uncontrolledValue, setUncontrolledValue] = (0, react_1.useState)(defaultValue);
+    const name = (0, react_1.useId)();
+    const isControlled = controlledValue !== undefined;
+    const currentValue = isControlled ? controlledValue : uncontrolledValue;
+    const setValue = (newValue) => {
+        if (!isControlled) {
+            setUncontrolledValue(newValue);
+        }
+        onValueChange?.(newValue);
+    };
+    return ((0, jsx_runtime_1.jsx)(RadioGroupContext, { value: { name, value: currentValue, disabled, setValue }, children: (0, jsx_runtime_1.jsx)("div", { className: (0, style_1.cn)("ui:flex ui:flex-col", className), ...props, children: children }) }));
+}

package/dist/components/RadioGroup/RadioGroup.stories.d.ts

@@ -0,0 +1,40 @@
+import type { StoryObj } from "@storybook/react";
+import { RadioGroup } from "./RadioGroup";
+declare const meta: {
+    title: string;
+    component: typeof RadioGroup;
+    tags: string[];
+    parameters: {
+        layout: string;
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    argTypes: {
+        value: {
+            control: "text";
+        };
+        defaultValue: {
+            control: "text";
+        };
+        disabled: {
+            control: "boolean";
+        };
+        className: {
+            control: "text";
+            description: string;
+        };
+        children: {
+            table: {
+                disable: true;
+            };
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Controlled: Story;
+export declare const Uncontrolled: Story;
+//# sourceMappingURL=RadioGroup.stories.d.ts.map

package/dist/components/RadioGroup/RadioGroup.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup.stories.d.ts","sourceRoot":"","sources":["../../../src/components/RadioGroup/RadioGroup.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,UAAU,EAAmB,MAAM,cAAc,CAAC;AAG3D,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiCyB,CAAC;AAEpC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAcnC,eAAO,MAAM,UAAU,EAAE,KAmCxB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KA0B1B,CAAC"}

package/dist/components/RadioGroup/RadioGroup.stories.js

@@ -0,0 +1,103 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Uncontrolled = exports.Controlled = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const RadioGroup_1 = require("./RadioGroup");
+const Radio_1 = require("../Radio/Radio");
+const meta = {
+    title: "Components/RadioGroup",
+    component: RadioGroup_1.RadioGroup,
+    tags: ["autodocs"],
+    parameters: {
+        layout: "centered",
+        docs: {
+            description: {
+                component: `
+여러 개의 Radio를 묶어 단일 선택을 강제하는 컴포넌트입니다.  
+\`value\`를 넘기면 제어 모드로, \`defaultValue\`만 넘기면 비제어 모드로 동작합니다.
+        `,
+            },
+        },
+    },
+    argTypes: {
+        value: {
+            control: "text",
+        },
+        defaultValue: {
+            control: "text",
+        },
+        disabled: { control: "boolean" },
+        className: {
+            control: "text",
+            description: "ui:gap-3",
+        },
+        children: {
+            table: {
+                disable: true,
+            },
+        },
+    },
+};
+exports.default = meta;
+function ControlledRadioGroup(props) {
+    const [value, setValue] = (0, react_1.useState)("b");
+    return ((0, jsx_runtime_1.jsxs)(RadioGroup_1.RadioGroup, { ...props, value: value, onValueChange: setValue, children: [(0, jsx_runtime_1.jsx)(Radio_1.Radio, { value: "a", children: "A" }), (0, jsx_runtime_1.jsx)(Radio_1.Radio, { value: "b", children: "B" }), (0, jsx_runtime_1.jsx)(Radio_1.Radio, { value: "c", children: "C" })] }));
+}
+exports.Controlled = {
+    parameters: {
+        layout: "centered",
+        docs: {
+            description: {
+                story: `
+### 상태를 외부에서 관리하는 방식
+  
+RadioGroup의 상태를 외부에서 관리하려면 \`value\`와 \`onValueChange\` 속성을 함께 사용하세요.
+          `,
+            },
+            source: {
+                code: `
+  function Controlled() {
+    const [value, setValue] = useState("b");
+  
+    return (
+      <RadioGroup value={value} onValueChange={setValue} className="gap-3">
+        <Radio value="a">A</Radio>
+        <Radio value="b">B</Radio>
+        <Radio value="c">C</Radio>
+      </RadioGroup>
+    );
+  }
+          `.trim(),
+            },
+        },
+    },
+    render: (props) => (0, jsx_runtime_1.jsx)(ControlledRadioGroup, { ...props }),
+    args: {
+        value: "b",
+        children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}),
+        disabled: false,
+        className: "ui:gap-3",
+    },
+};
+exports.Uncontrolled = {
+    parameters: {
+        layout: "centered",
+        docs: {
+            description: {
+                story: `
+### 상태를 내부에서 관리하는 방식
+  
+RadioGroup의 상태를 내부에서 자동으로 관리하려면 \`defaultValue\` 속성을 사용하세요.
+          `,
+            },
+        },
+    },
+    render: (props) => ((0, jsx_runtime_1.jsxs)(RadioGroup_1.RadioGroup, { ...props, defaultValue: "b", children: [(0, jsx_runtime_1.jsx)(Radio_1.Radio, { value: "a", children: "A" }), (0, jsx_runtime_1.jsx)(Radio_1.Radio, { value: "b", children: "B" }), (0, jsx_runtime_1.jsx)(Radio_1.Radio, { value: "c", children: "C" })] })),
+    args: {
+        defaultValue: "b",
+        children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}),
+        disabled: false,
+        className: "ui:gap-3",
+    },
+};

package/dist/components/RadioGroup/index.d.ts

@@ -0,0 +1,2 @@
+export { RadioGroup } from "./RadioGroup";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/RadioGroup/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/RadioGroup/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC"}

package/dist/components/RadioGroup/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RadioGroup = void 0;
+var RadioGroup_1 = require("./RadioGroup");
+Object.defineProperty(exports, "RadioGroup", { enumerable: true, get: function () { return RadioGroup_1.RadioGroup; } });

package/dist/components/TextInput/TextInput.d.ts

@@ -0,0 +1,36 @@
+import { ComponentPropsWithRef } from "react";
+import { VariantProps } from "class-variance-authority";
+import { inputVariants } from "./TextInput.styles";
+export type TextInputProps = ComponentPropsWithRef<"input"> & VariantProps<typeof inputVariants> & {
+    /**
+     * 클리어 버튼이 표시되는 조건
+     * - 'never': 표시 안 함 (기본값)
+     * - 'while-editing': 입력값이 있을 때만 표시
+     * - 'always': 항상 표시
+     */
+    clearButtonMode?: "always" | "while-editing" | "never";
+};
+/**
+ * `TextInput`: 텍스트 입력을 위한 기본 컴포넌트입니다. FormControl과 함께 사용하면 label, validation 등의 기능을 자동으로 제공받습니다.
+ * @see [RDS Storybook: TextInput](https://main--691ac7d6da1eb0c0acb5f3e2.chromatic.com/?path=/docs/components-textinput--docs)
+ * @see [RDS Storybook: FormControl](https://main--691ac7d6da1eb0c0acb5f3e2.chromatic.com/?path=/docs/components-formcontrol--docs)
+ * @example
+ * ```tsx
+ * // 독립적으로 사용
+ * <TextInput
+ *   placeholder="이메일을 입력하세요"
+ *   onChange={(e) => setEmail(e.target.value)}
+ * />
+ *
+ * // FormControl과 함께 사용
+ * <FormControl required>
+ *   <FormControl.Label>이메일</FormControl.Label>
+ *   <TextInput type="email" />
+ * </FormControl>
+ * ```
+ */
+export declare function TextInput({ variant, disabled, className, clearButtonMode, value: controlledValue, onChange, ...props }: TextInputProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace TextInput {
+    var displayName: string;
+}
+//# sourceMappingURL=TextInput.d.ts.map

package/dist/components/TextInput/TextInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../../src/components/TextInput/TextInput.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAe,qBAAqB,EAAY,MAAM,OAAO,CAAC;AACrE,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAGnD,MAAM,MAAM,cAAc,GAAG,qBAAqB,CAAC,OAAO,CAAC,GACzD,YAAY,CAAC,OAAO,aAAa,CAAC,GAAG;IACnC;;;;;OAKG;IACH,eAAe,CAAC,EAAE,QAAQ,GAAG,eAAe,GAAG,OAAO,CAAC;CACxD,CAAC;AAEJ;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,SAAS,CAAC,EACxB,OAAO,EACP,QAAQ,EACR,SAAS,EACT,eAAyB,EACzB,KAAK,EAAE,eAAe,EACtB,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,cAAc,2CAqDhB;yBA7De,SAAS"}

package/dist/components/TextInput/TextInput.js

@@ -0,0 +1,53 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextInput = TextInput;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const style_1 = require("../../utils/style");
+const TextInput_styles_1 = require("./TextInput.styles");
+const Icons_1 = require("../Icons");
+/**
+ * `TextInput`: 텍스트 입력을 위한 기본 컴포넌트입니다. FormControl과 함께 사용하면 label, validation 등의 기능을 자동으로 제공받습니다.
+ * @see [RDS Storybook: TextInput](https://main--691ac7d6da1eb0c0acb5f3e2.chromatic.com/?path=/docs/components-textinput--docs)
+ * @see [RDS Storybook: FormControl](https://main--691ac7d6da1eb0c0acb5f3e2.chromatic.com/?path=/docs/components-formcontrol--docs)
+ * @example
+ * ```tsx
+ * // 독립적으로 사용
+ * <TextInput
+ *   placeholder="이메일을 입력하세요"
+ *   onChange={(e) => setEmail(e.target.value)}
+ * />
+ *
+ * // FormControl과 함께 사용
+ * <FormControl required>
+ *   <FormControl.Label>이메일</FormControl.Label>
+ *   <TextInput type="email" />
+ * </FormControl>
+ * ```
+ */
+function TextInput({ variant, disabled, className, clearButtonMode = "never", value: controlledValue, onChange, ...props }) {
+    const [internalValue, setInternalValue] = (0, react_1.useState)("");
+    const isControlled = controlledValue !== undefined;
+    const value = isControlled ? controlledValue : internalValue;
+    const isShowClearButton = clearButtonMode === "always" ||
+        (clearButtonMode === "while-editing" && String(value).length > 0);
+    const handleChange = (e) => {
+        if (!isControlled) {
+            setInternalValue(e.target.value);
+        }
+        onChange?.(e);
+    };
+    const handleClear = () => {
+        const syntheticEvent = {
+            target: { value: "" },
+            currentTarget: { value: "" },
+        };
+        if (!isControlled) {
+            setInternalValue("");
+        }
+        onChange?.(syntheticEvent);
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "ui:relative ui:flex-1 ui:flex ui:items-center", children: [(0, jsx_runtime_1.jsx)("input", { disabled: disabled, value: value, onChange: handleChange, className: (0, style_1.cn)((0, TextInput_styles_1.inputVariants)({ variant, disabled, className }), isShowClearButton && "ui:pr-[52px]"), ...props }), isShowClearButton && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: handleClear, disabled: disabled, className: "ui:absolute ui:right-4 ui:top-1/2 ui:-translate-y-1/2 ui:cursor-pointer disabled:ui:cursor-not-allowed disabled:ui:opacity-50", "aria-label": "Clear input", children: (0, jsx_runtime_1.jsx)(Icons_1.IconCloseCircle, { className: "ui:text-gray-400" }) }))] }));
+}
+TextInput.displayName = "TextInput";

package/dist/components/TextInput/TextInput.stories.d.ts

@@ -0,0 +1,41 @@
+import type { StoryObj } from "@storybook/react";
+import { TextInput } from "./TextInput";
+declare const meta: {
+    title: string;
+    component: typeof TextInput;
+    tags: string[];
+    parameters: {
+        layout: string;
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    argTypes: {
+        variant: {
+            control: {
+                type: "radio";
+            };
+            options: string[];
+        };
+        disabled: {
+            control: {
+                type: "boolean";
+            };
+            options: string[];
+        };
+        clearButtonMode: {
+            control: {
+                type: "radio";
+            };
+            options: string[];
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Error: Story;
+export declare const DefaultWithClearButton: Story;
+//# sourceMappingURL=TextInput.stories.d.ts.map

package/dist/components/TextInput/TextInput.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextInput.stories.d.ts","sourceRoot":"","sources":["../../../src/components/TextInput/TextInput.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgCwB,CAAC;AAEnC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KA2BrB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KA2BnB,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,KA+BpC,CAAC"}

package/dist/components/TextInput/TextInput.stories.js

@@ -0,0 +1,112 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DefaultWithClearButton = exports.Error = exports.Default = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const TextInput_1 = require("./TextInput");
+const meta = {
+    title: "Components/TextInput",
+    component: TextInput_1.TextInput,
+    tags: ["autodocs"],
+    parameters: {
+        layout: "centered",
+        docs: {
+            description: {
+                component: `
+TextInput은 한 줄의 텍스트 값을 설정하는데 사용됩니다.
+
+## <b>TextInput guide</b>
+
+입력 필드는 텍스트의 길이를 고려하여 적절한 크기로 제공하며, 플레이스홀더를 레이블이나 도움말의 대체 수단으로 사용하지 않도록 합니다.
+`,
+            },
+        },
+    },
+    argTypes: {
+        variant: {
+            control: { type: "radio" },
+            options: ["default"],
+        },
+        disabled: {
+            control: { type: "boolean" },
+            options: ["true", "false"],
+        },
+        clearButtonMode: {
+            control: { type: "radio" },
+            options: ["never", "always", "while-editing"],
+        },
+    },
+};
+exports.default = meta;
+exports.Default = {
+    parameters: {
+        layout: "centered",
+        docs: {
+            description: {
+                story: `
+
+`,
+            },
+        },
+    },
+    render: (props) => ((0, jsx_runtime_1.jsxs)("div", { className: "ui:flex ui:gap-2", children: [(0, jsx_runtime_1.jsx)(TextInput_1.TextInput, { ...props }), props.children] })),
+    args: {
+        placeholder: "placeholder",
+        variant: "default",
+    },
+    argTypes: {
+        disabled: {
+            control: { type: "boolean" },
+            options: ["true", "false"],
+        },
+    },
+};
+exports.Error = {
+    parameters: {
+        layout: "centered",
+        docs: {
+            description: {
+                story: `
+
+`,
+            },
+        },
+    },
+    render: (props) => ((0, jsx_runtime_1.jsxs)("div", { className: "ui:flex ui:gap-2", children: [(0, jsx_runtime_1.jsx)(TextInput_1.TextInput, { ...props, variant: "error" }), props.children] })),
+    args: {
+        placeholder: "placeholder",
+        variant: "error",
+    },
+    argTypes: {
+        disabled: {
+            control: { type: "boolean" },
+            options: ["true", "false"],
+        },
+    },
+};
+exports.DefaultWithClearButton = {
+    parameters: {
+        layout: "centered",
+        docs: {
+            description: {
+                story: `
+
+`,
+            },
+        },
+    },
+    render: (props) => ((0, jsx_runtime_1.jsxs)("div", { className: "ui:flex ui:gap-2", children: [(0, jsx_runtime_1.jsx)(TextInput_1.TextInput, { clearButtonMode: "while-editing", ...props }), props.children] })),
+    args: {
+        clearButtonMode: "while-editing",
+        placeholder: "placeholder",
+    },
+    argTypes: {
+        disabled: {
+            control: { type: "boolean" },
+            options: ["true", "false"],
+        },
+        clearButtonMode: {
+            control: { type: "radio" },
+            options: ["never", "always", "while-editing"],
+        },
+    },
+};

package/dist/components/TextInput/TextInput.styles.d.ts

@@ -0,0 +1,5 @@
+export declare const inputVariants: (props?: ({
+    variant?: "default" | "error" | null | undefined;
+    disabled?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+//# sourceMappingURL=TextInput.styles.d.ts.map

package/dist/components/TextInput/TextInput.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextInput.styles.d.ts","sourceRoot":"","sources":["../../../src/components/TextInput/TextInput.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,aAAa;;;8EAmBzB,CAAC"}

package/dist/components/TextInput/TextInput.styles.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.inputVariants = void 0;
+const class_variance_authority_1 = require("class-variance-authority");
+exports.inputVariants = (0, class_variance_authority_1.cva)("ui:h-[50px] ui:bg-white ui:px-4 ui:rounded-2xl ui:w-full ui:border ui:text-body4 ui:transition-colors ui:outline-none", {
+    variants: {
+        variant: {
+            default: "ui:border-gray-100 ui:text-gray-800 ui:placeholder:text-body4 ui:placeholder:text-gray-500 ui:focus:bg-gray-50 ui:focus:border-gray-200",
+            error: "ui:border-red-200 ui:bg-red-50",
+        },
+        disabled: {
+            true: "ui:cursor-not-allowed ui:bg-gray-50 ui:border-gray-100 ui:text-gray-500 ui:placeholder:text-300",
+            false: "",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+        disabled: false,
+    },
+});

package/dist/components/TextInput/index.d.ts

@@ -0,0 +1,2 @@
+export { TextInput } from "./TextInput";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/TextInput/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/TextInput/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC"}

package/dist/components/TextInput/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextInput = void 0;
+var TextInput_1 = require("./TextInput");
+Object.defineProperty(exports, "TextInput", { enumerable: true, get: function () { return TextInput_1.TextInput; } });

package/dist/components/Toggle/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Toggle/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Toggle/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC"}