@reitwagen/design-components 0.4.0 → 0.6.0

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

@@ -5,6 +5,7 @@ declare const meta: {
     component: typeof Button;
     tags: string[];
     parameters: {
+        layout: string;
         docs: {
             description: {
                 component: string;

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

@@ -1 +1 @@
-{"version":3,"file":"Button.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiDqB,CAAC;AAEhC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,QAAQ,EAAE,KA6BtB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAgCpB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KA+BnB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAcnB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAoBtB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAoBlB,CAAC"}
+{"version":3,"file":"Button.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkDqB,CAAC;AAEhC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,QAAQ,EAAE,KA8BtB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAiCpB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAgCnB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAcnB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAoBtB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAoBlB,CAAC"}

package/dist/components/Button/Button.stories.js

@@ -8,6 +8,7 @@ const meta = {
     component: Button_1.Button,
     tags: ["autodocs"],
     parameters: {
+        layout: "centered",
         docs: {
             description: {
                 component: `
@@ -56,6 +57,7 @@ const meta = {
 exports.default = meta;
 exports.Variants = {
     parameters: {
+        layout: "centered",
         docs: {
             description: {
                 story: `
@@ -74,6 +76,7 @@ exports.Variants = {
 };
 exports.Colors = {
     parameters: {
+        layout: "centered",
         docs: {
             description: {
                 story: `
@@ -92,6 +95,7 @@ exports.Colors = {
 };
 exports.Sizes = {
     parameters: {
+        layout: "centered",
         docs: {
             description: {
                 story: `

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

@@ -5,6 +5,7 @@ declare const meta: {
     component: typeof Checkbox;
     tags: string[];
     parameters: {
+        layout: string;
         docs: {
             description: {
                 component: string;

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,QAAQ,EAAiB,MAAM,YAAY,CAAC;AAGrD,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;CAuBuB,CAAC;AAElC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAgBnC,eAAO,MAAM,UAAU,EAAE,KA8CxB,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KA0CjC,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KA2B1B,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,KAqBnC,CAAC"}
+{"version":3,"file":"Checkbox.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,QAAQ,EAAiB,MAAM,YAAY,CAAC;AAGrD,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;CAwBuB,CAAC;AAElC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAgBnC,eAAO,MAAM,UAAU,EAAE,KA+CxB,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KA2CjC,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KA4B1B,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,KAqBnC,CAAC"}

package/dist/components/Checkbox/Checkbox.stories.js

@@ -10,6 +10,7 @@ const meta = {
     component: Checkbox_1.Checkbox,
     tags: ["autodocs"],
     parameters: {
+        layout: "centered",
         docs: {
             description: {
                 component: `
@@ -36,6 +37,7 @@ function CheckboxWithControlled(props) {
 }
 exports.Controlled = {
     parameters: {
+        layout: "centered",
         docs: {
             description: {
                 story: `
@@ -83,6 +85,7 @@ function Controlled() {
 };
 exports.ControlledWithLabel = {
     parameters: {
+        layout: "centered",
         docs: {
             source: {
                 code: `
@@ -126,6 +129,7 @@ function Controlled() {
 };
 exports.UnControlled = {
     parameters: {
+        layout: "centered",
         docs: {
             description: {
                 story: `

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

@@ -5,6 +5,7 @@ declare const meta: {
     component: typeof Chip;
     tags: string[];
     parameters: {
+        layout: string;
         docs: {
             description: {
                 component: string;

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

@@ -1 +1 @@
-{"version":3,"file":"Chip.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Chip/Chip.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAE9B,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuCmB,CAAC;AAE9B,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,QAAQ,EAAE,KAqCtB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAmBlB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAkBlB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAmBlB,CAAC"}
+{"version":3,"file":"Chip.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Chip/Chip.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAE9B,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwCmB,CAAC;AAE9B,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,QAAQ,EAAE,KAsCtB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAmBlB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAkBlB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAmBlB,CAAC"}

package/dist/components/Chip/Chip.stories.js

@@ -8,6 +8,7 @@ const meta = {
     component: Chip_1.Chip,
     tags: ["autodocs"],
     parameters: {
+        layout: "centered",
         docs: {
             description: {
                 component: `
@@ -46,6 +47,7 @@ const meta = {
 exports.default = meta;
 exports.Variants = {
     parameters: {
+        layout: "centered",
         docs: {
             description: {
                 story: `

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

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

package/dist/components/FormControl/FormControl.d.ts

@@ -0,0 +1,55 @@
+import { ComponentPropsWithRef } from "react";
+import { VariantProps } from "class-variance-authority";
+import { ChildrenProps } from "../../types/props";
+import { FormControlLabel } from "./FormControlLabel";
+import { FormControlValidation } from "./FormControlValidation";
+type FormControlContextValue = {
+    id: string;
+    disabled?: boolean;
+    required?: boolean;
+    error?: boolean;
+    labelId: string;
+    validationId?: string;
+};
+export declare const useFormControl: () => FormControlContextValue;
+declare const formControlVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export type FormControlBaseProps = ComponentPropsWithRef<"div"> & ChildrenProps & VariantProps<typeof formControlVariants> & {
+    /**
+     * 입력 필드의 고유 ID
+     */
+    id?: string;
+    /**
+     * 필수 입력 여부
+     */
+    required?: boolean;
+    /**
+     * 비활성화 여부
+     */
+    disabled?: boolean;
+    /**
+     * 에러 상태 여부
+     */
+    error?: boolean;
+};
+/**
+ * `FormControl`: Input 컴포넌트에 Label, Validation 등을 제공하는 래퍼 컴포넌트입니다.
+ * @see [RDS Storybook: FormControl](https://main--691ac7d6da1eb0c0acb5f3e2.chromatic.com/?path=/docs/components-formcontrol--docs)
+ * @example
+ * ```tsx
+ * <FormControl required error>
+ *   <FormControl.Label>이메일</FormControl.Label>
+ *   <Input type="email" placeholder="example@baree.net" />
+ *   <FormControl.Validation>올바른 이메일 형식이 아닙니다</FormControl.Validation>
+ * </FormControl>
+ * ```
+ */
+declare function FormControlBase({ id: idProp, required, disabled, error, className, children, ...props }: FormControlBaseProps): import("react/jsx-runtime").JSX.Element;
+declare namespace FormControlBase {
+    var displayName: string;
+}
+export declare const FormControl: typeof FormControlBase & {
+    Label: typeof FormControlLabel;
+    Validation: typeof FormControlValidation;
+};
+export {};
+//# sourceMappingURL=FormControl.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FormControl.d.ts","sourceRoot":"","sources":["../../../src/components/FormControl/FormControl.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,qBAAqB,EAQtB,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,YAAY,EAAO,MAAM,0BAA0B,CAAC;AAE7D,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAGlD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAEhE,KAAK,uBAAuB,GAAG;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAIF,eAAO,MAAM,cAAc,+BAS1B,CAAC;AAEF,QAAA,MAAM,mBAAmB,oFAAwC,CAAC;AAElE,MAAM,MAAM,oBAAoB,GAAG,qBAAqB,CAAC,KAAK,CAAC,GAC7D,aAAa,GACb,YAAY,CAAC,OAAO,mBAAmB,CAAC,GAAG;IACzC;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAEJ;;;;;;;;;;;GAWG;AACH,iBAAS,eAAe,CAAC,EACvB,EAAE,EAAE,MAAM,EACV,QAAgB,EAChB,QAAgB,EAChB,KAAa,EACb,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,oBAAoB,2CAyDtB;kBAjEQ,eAAe;;;AAqExB,eAAO,MAAM,WAAW;;;CAGtB,CAAC"}

package/dist/components/FormControl/FormControl.js

@@ -0,0 +1,79 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormControl = exports.useFormControl = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const class_variance_authority_1 = require("class-variance-authority");
+const style_1 = require("../../utils/style");
+const Input_1 = require("../Input");
+const FormControlLabel_1 = require("./FormControlLabel");
+const FormControlValidation_1 = require("./FormControlValidation");
+const FormControlContext = (0, react_1.createContext)(null);
+const useFormControl = () => {
+    const context = (0, react_1.use)(FormControlContext);
+    if (!context) {
+        throw new Error("FormControl compound components must be used within FormControl");
+    }
+    return context;
+};
+exports.useFormControl = useFormControl;
+const formControlVariants = (0, class_variance_authority_1.cva)("ui:flex ui:flex-col ui:gap-1.5");
+/**
+ * `FormControl`: Input 컴포넌트에 Label, Validation 등을 제공하는 래퍼 컴포넌트입니다.
+ * @see [RDS Storybook: FormControl](https://main--691ac7d6da1eb0c0acb5f3e2.chromatic.com/?path=/docs/components-formcontrol--docs)
+ * @example
+ * ```tsx
+ * <FormControl required error>
+ *   <FormControl.Label>이메일</FormControl.Label>
+ *   <Input type="email" placeholder="example@baree.net" />
+ *   <FormControl.Validation>올바른 이메일 형식이 아닙니다</FormControl.Validation>
+ * </FormControl>
+ * ```
+ */
+function FormControlBase({ id: idProp, required = false, disabled = false, error = false, className, children, ...props }) {
+    const uniqId = (0, react_1.useId)();
+    const id = idProp || uniqId;
+    const labelId = `${id}-label`;
+    const validationId = `${id}-validation`;
+    let labelSlot = null;
+    let inputSlot = null;
+    let validationSlot = null;
+    const childArray = Array.isArray(children) ? children : [children];
+    childArray.forEach((child) => {
+        if (!(0, react_1.isValidElement)(child)) {
+            return;
+        }
+        switch (child.type) {
+            case FormControlLabel_1.FormControlLabel:
+                labelSlot = child;
+                break;
+            case Input_1.Input: {
+                const inputChild = child;
+                inputSlot = (0, react_1.cloneElement)(inputChild, {
+                    id,
+                    disabled: disabled || inputChild.props.disabled,
+                    required: required || inputChild.props.required,
+                    variant: error ? "error" : inputChild.props.variant,
+                });
+                break;
+            }
+            case FormControlValidation_1.FormControlValidation:
+                validationSlot = child;
+                break;
+        }
+    });
+    return ((0, jsx_runtime_1.jsx)(FormControlContext, { value: {
+            id,
+            disabled,
+            required,
+            error,
+            labelId,
+            validationId,
+        }, children: (0, jsx_runtime_1.jsxs)("div", { className: (0, style_1.cn)(formControlVariants({ className })), ...props, children: [labelSlot, (0, jsx_runtime_1.jsxs)("div", { className: "ui:flex ui:flex-col ui:gap-1", children: [inputSlot, validationSlot] })] }) }));
+}
+FormControlBase.displayName = "FormControlBase";
+exports.FormControl = Object.assign(FormControlBase, {
+    Label: FormControlLabel_1.FormControlLabel,
+    Validation: FormControlValidation_1.FormControlValidation,
+});

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

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { FormControlBaseProps } from "./FormControl";
+declare const meta: Meta<FormControlBaseProps>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Required: Story;
+export declare const Disabled: Story;
+export declare const WithError: Story;
+/**
+ * 필수 입력이면서 에러 상태인 필드입니다.
+ */
+export declare const RequiredWithError: Story;
+/**
+ * 시각적으로 숨겨진 라벨입니다. 접근성은 유지됩니다.
+ */
+export declare const VisuallyHiddenLabel: Story;
+export declare const MultipleInputTypes: Story;
+//# sourceMappingURL=FormControl.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FormControl.stories.d.ts","sourceRoot":"","sources":["../../../src/components/FormControl/FormControl.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAe,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAGlE,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,oBAAoB,CAwCC,CAAC;AAEvC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KASrB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAStB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAStB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAYvB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,iBAAiB,EAAE,KAY/B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,mBAAmB,EAAE,KASjC,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAwBhC,CAAC"}

package/dist/components/FormControl/FormControl.stories.js

@@ -0,0 +1,75 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MultipleInputTypes = exports.VisuallyHiddenLabel = exports.RequiredWithError = exports.WithError = exports.Disabled = exports.Required = exports.Default = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const FormControl_1 = require("./FormControl");
+const Input_1 = require("../Input");
+const meta = {
+    title: "Components/FormControl",
+    component: FormControl_1.FormControl,
+    parameters: {
+        layout: "centered",
+        docs: {
+            description: {
+                component: `
+Input 컴포넌트에 Label, Validation 등을 제공하는 래퍼 컴포넌트입니다.
+        `,
+            },
+        },
+    },
+    tags: ["autodocs"],
+    argTypes: {
+        required: {
+            control: "boolean",
+            options: ["true", "false"],
+            description: "필수 입력 여부",
+        },
+        disabled: {
+            control: "boolean",
+            options: ["true", "false"],
+            description: "비활성화 여부",
+        },
+        error: {
+            control: "boolean",
+            options: ["true", "false"],
+            description: "에러 상태 여부",
+        },
+        id: {
+            control: "text",
+            description: "입력 필드의 고유 ID",
+        },
+        children: {
+            table: {
+                disable: true,
+            },
+        },
+    },
+};
+exports.default = meta;
+exports.Default = {
+    render: (props) => ((0, jsx_runtime_1.jsx)("div", { className: "ui:w-80", children: (0, jsx_runtime_1.jsxs)(FormControl_1.FormControl, { ...props, children: [(0, jsx_runtime_1.jsx)(FormControl_1.FormControl.Label, { children: "\uC774\uBA54\uC77C" }), (0, jsx_runtime_1.jsx)(Input_1.Input, { type: "email", placeholder: "example@baree.net" })] }) })),
+};
+exports.Required = {
+    render: (props) => ((0, jsx_runtime_1.jsx)("div", { className: "ui:w-80", children: (0, jsx_runtime_1.jsxs)(FormControl_1.FormControl, { required: true, ...props, children: [(0, jsx_runtime_1.jsx)(FormControl_1.FormControl.Label, { children: "\uC774\uBA54\uC77C" }), (0, jsx_runtime_1.jsx)(Input_1.Input, { type: "email", placeholder: "example@baree.net" })] }) })),
+};
+exports.Disabled = {
+    render: (props) => ((0, jsx_runtime_1.jsx)("div", { className: "ui:w-80", children: (0, jsx_runtime_1.jsxs)(FormControl_1.FormControl, { disabled: true, ...props, children: [(0, jsx_runtime_1.jsx)(FormControl_1.FormControl.Label, { children: "\uC774\uBA54\uC77C" }), (0, jsx_runtime_1.jsx)(Input_1.Input, { type: "email", placeholder: "example@baree.net" })] }) })),
+};
+exports.WithError = {
+    render: (props) => ((0, jsx_runtime_1.jsx)("div", { className: "ui:w-80", children: (0, jsx_runtime_1.jsxs)(FormControl_1.FormControl, { error: true, ...props, children: [(0, jsx_runtime_1.jsx)(FormControl_1.FormControl.Label, { children: "\uC774\uBA54\uC77C" }), (0, jsx_runtime_1.jsx)(Input_1.Input, { type: "email", placeholder: "example@baree.net" }), (0, jsx_runtime_1.jsx)(FormControl_1.FormControl.Validation, { children: "\uC62C\uBC14\uB978 \uC774\uBA54\uC77C \uD615\uC2DD\uC774 \uC544\uB2D9\uB2C8\uB2E4" })] }) })),
+};
+/**
+ * 필수 입력이면서 에러 상태인 필드입니다.
+ */
+exports.RequiredWithError = {
+    render: (props) => ((0, jsx_runtime_1.jsx)("div", { className: "ui:w-80", children: (0, jsx_runtime_1.jsxs)(FormControl_1.FormControl, { required: true, error: true, ...props, children: [(0, jsx_runtime_1.jsx)(FormControl_1.FormControl.Label, { children: "\uBE44\uBC00\uBC88\uD638" }), (0, jsx_runtime_1.jsx)(Input_1.Input, { type: "password", placeholder: "8\uC790 \uC774\uC0C1 \uC785\uB825" }), (0, jsx_runtime_1.jsx)(FormControl_1.FormControl.Validation, { children: "\uBE44\uBC00\uBC88\uD638\uB294 \uCD5C\uC18C 8\uC790 \uC774\uC0C1\uC774\uC5B4\uC57C \uD569\uB2C8\uB2E4" })] }) })),
+};
+/**
+ * 시각적으로 숨겨진 라벨입니다. 접근성은 유지됩니다.
+ */
+exports.VisuallyHiddenLabel = {
+    render: (props) => ((0, jsx_runtime_1.jsx)("div", { className: "ui:w-80", children: (0, jsx_runtime_1.jsxs)(FormControl_1.FormControl, { ...props, children: [(0, jsx_runtime_1.jsx)(FormControl_1.FormControl.Label, { visuallyHidden: true, children: "\uAC80\uC0C9" }), (0, jsx_runtime_1.jsx)(Input_1.Input, { type: "search", placeholder: "\uAC80\uC0C9\uC5B4\uB97C \uC785\uB825\uD558\uC138\uC694" })] }) })),
+};
+exports.MultipleInputTypes = {
+    render: (props) => ((0, jsx_runtime_1.jsxs)("div", { className: "ui:space-y-6 ui:w-80", children: [(0, jsx_runtime_1.jsxs)(FormControl_1.FormControl, { required: true, ...props, children: [(0, jsx_runtime_1.jsx)(FormControl_1.FormControl.Label, { children: "\uC774\uBA54\uC77C" }), (0, jsx_runtime_1.jsx)(Input_1.Input, { type: "email", placeholder: "example@baree.net" })] }), (0, jsx_runtime_1.jsxs)(FormControl_1.FormControl, { required: true, ...props, children: [(0, jsx_runtime_1.jsx)(FormControl_1.FormControl.Label, { children: "\uBE44\uBC00\uBC88\uD638" }), (0, jsx_runtime_1.jsx)(Input_1.Input, { type: "password", placeholder: "8\uC790 \uC774\uC0C1 \uC785\uB825" })] }), (0, jsx_runtime_1.jsxs)(FormControl_1.FormControl, { ...props, children: [(0, jsx_runtime_1.jsx)(FormControl_1.FormControl.Label, { children: "\uC804\uD654\uBC88\uD638" }), (0, jsx_runtime_1.jsx)(Input_1.Input, { type: "tel", placeholder: "010-1234-5678" })] }), (0, jsx_runtime_1.jsxs)(FormControl_1.FormControl, { ...props, children: [(0, jsx_runtime_1.jsx)(FormControl_1.FormControl.Label, { children: "\uB0A0\uC9DC" }), (0, jsx_runtime_1.jsx)(Input_1.Input, { type: "date" })] })] })),
+};

package/dist/components/FormControl/FormControlLabel.d.ts

@@ -0,0 +1,20 @@
+import { ComponentPropsWithRef } from "react";
+import { ChildrenProps } from "../../types/props";
+import { VariantProps } from "class-variance-authority";
+declare const labelVariants: (props?: ({
+    required?: boolean | null | undefined;
+    error?: boolean | null | undefined;
+    disabled?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type FormControlLabelProps = ComponentPropsWithRef<"label"> & ChildrenProps & VariantProps<typeof labelVariants> & {
+    /**
+     * 시각적으로 숨김 처리 (접근성 유지)
+     */
+    visuallyHidden?: boolean;
+};
+export declare function FormControlLabel({ visuallyHidden, className, children, ...props }: FormControlLabelProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace FormControlLabel {
+    var displayName: string;
+}
+export {};
+//# sourceMappingURL=FormControlLabel.d.ts.map

package/dist/components/FormControl/FormControlLabel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormControlLabel.d.ts","sourceRoot":"","sources":["../../../src/components/FormControl/FormControlLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,OAAO,CAAC;AAC9C,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAO,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAI7D,QAAA,MAAM,aAAa;;;;8EAmBjB,CAAC;AAEH,KAAK,qBAAqB,GAAG,qBAAqB,CAAC,OAAO,CAAC,GACzD,aAAa,GACb,YAAY,CAAC,OAAO,aAAa,CAAC,GAAG;IACnC;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAC;AAEJ,wBAAgB,gBAAgB,CAAC,EAC/B,cAAc,EACd,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,qBAAqB,2CAgBvB;yBArBe,gBAAgB"}

package/dist/components/FormControl/FormControlLabel.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormControlLabel = FormControlLabel;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const class_variance_authority_1 = require("class-variance-authority");
+const FormControl_1 = require("./FormControl");
+const style_1 = require("../../utils/style");
+const labelVariants = (0, class_variance_authority_1.cva)("ui:text-body6", {
+    variants: {
+        required: {
+            true: "after:ui:content-['*'] after:ui:ml-0.5 after:ui:text-red-500",
+        },
+        error: {
+            true: "ui:text-red-500",
+            false: "",
+        },
+        disabled: {
+            true: "ui:text-gray-300",
+            false: "",
+        },
+    },
+    defaultVariants: {
+        required: false,
+        disabled: false,
+        error: false,
+    },
+});
+function FormControlLabel({ visuallyHidden, className, children, ...props }) {
+    const { id, required, disabled, labelId, error } = (0, FormControl_1.useFormControl)();
+    return ((0, jsx_runtime_1.jsx)("label", { id: labelId, htmlFor: id, className: (0, style_1.cn)(labelVariants({ required, disabled, error, className }), visuallyHidden && "ui:sr-only"), ...props, children: children }));
+}
+FormControlLabel.displayName = "FormControl.Label";

package/dist/components/FormControl/FormControlValidation.d.ts

@@ -0,0 +1,13 @@
+import { ComponentPropsWithRef } from "react";
+import { ChildrenProps } from "../../types/props";
+import { VariantProps } from "class-variance-authority";
+declare const validationVariants: (props?: ({
+    variant?: "error" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type FormControlValidationProps = ComponentPropsWithRef<"div"> & ChildrenProps & VariantProps<typeof validationVariants>;
+export declare function FormControlValidation({ variant, className, children, ...props }: FormControlValidationProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace FormControlValidation {
+    var displayName: string;
+}
+export {};
+//# sourceMappingURL=FormControlValidation.d.ts.map

package/dist/components/FormControl/FormControlValidation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormControlValidation.d.ts","sourceRoot":"","sources":["../../../src/components/FormControl/FormControlValidation.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,OAAO,CAAC;AAC9C,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAO,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAI7D,QAAA,MAAM,kBAAkB;;8EAYvB,CAAC;AACF,KAAK,0BAA0B,GAAG,qBAAqB,CAAC,KAAK,CAAC,GAC5D,aAAa,GACb,YAAY,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAE1C,wBAAgB,qBAAqB,CAAC,EACpC,OAAO,EACP,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,0BAA0B,2CAa5B;yBAlBe,qBAAqB"}

package/dist/components/FormControl/FormControlValidation.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormControlValidation = FormControlValidation;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const class_variance_authority_1 = require("class-variance-authority");
+const FormControl_1 = require("./FormControl");
+const style_1 = require("../../utils/style");
+const validationVariants = (0, class_variance_authority_1.cva)("ui:text-caption1 ui:flex ui:items-center ui:gap-1", {
+    variants: {
+        variant: {
+            error: "ui:text-red-500",
+        },
+    },
+    defaultVariants: {
+        variant: "error",
+    },
+});
+function FormControlValidation({ variant, className, children, ...props }) {
+    const { validationId } = (0, FormControl_1.useFormControl)();
+    return ((0, jsx_runtime_1.jsx)("div", { id: validationId, role: "alert", className: (0, style_1.cn)(validationVariants({ variant, className })), ...props, children: children }));
+}
+FormControlValidation.displayName = "FormControl.Validation";

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

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

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

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

package/dist/components/FormControl/index.js

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

package/dist/components/Icons/IconPlaceLine.js

@@ -12,6 +12,6 @@ const jsx_runtime_1 = require("react/jsx-runtime");
  * ```
  */
 function IconPlaceLine({ className, width = 24, height = 24, ...props }) {
-    return ((0, jsx_runtime_1.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: width, height: height, fill: "none", viewBox: "0 0 24 24", className: className, ...props, children: [(0, jsx_runtime_1.jsx)("path", { fill: "currentColor", fillRule: "evenodd", d: "M12.194 7.144a3.78 3.78 0 0 1 3.586 3.776l-.005.194A3.78 3.78 0 0 1 12 14.7l-.194-.005a3.78 3.78 0 0 1-3.581-3.581l-.005-.194A3.78 3.78 0 0 1 12 7.14zM12 8.64a2.28 2.28 0 1 0 0 4.562 2.28 2.28 0 0 0 0-4.562", clipRule: "evenodd" }), (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", fillRule: "evenodd", d: "M12 1.65a9 9 0 0 1 9 9c0 6.768-8.524 11.697-9 11.7-.474-.002-9.001-4.931-9.001-11.7 0-4.971 4.03-9 9.001-9m0 1.5a7.5 7.5 0 0 0-7.501 7.5c0 2.76 1.763 5.315 3.856 7.3a21 21 0 0 0 2.863 2.27c.304.2.57.358.781.477.21-.12.477-.276.782-.477a21 21 0 0 0 2.863-2.27c2.093-1.985 3.856-4.54 3.856-7.3a7.5 7.5 0 0 0-7.5-7.5", clipRule: "evenodd" })] }));
+    return ((0, jsx_runtime_1.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: width, height: height, fill: "none", viewBox: "0 0 24 24", className: className, ...props, children: [(0, jsx_runtime_1.jsx)("path", { fill: "currentColor", fillRule: "evenodd", d: "M12.194 7.144a3.78 3.78 0 0 1 3.586 3.776l-.005.194A3.78 3.78 0 0 1 12 14.7l-.194-.005a3.78 3.78 0 0 1-3.581-3.581l-.005-.194A3.78 3.78 0 0 1 12 7.14zM12 8.64a2.28 2.28 0 1 0 0 4.562 2.28 2.28 0 0 0 0-4.562", clipRule: "evenodd" }), (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", fillRule: "evenodd", d: "M12 1.649a9 9 0 0 1 9 9c0 6.769-8.524 11.698-9 11.701-.474-.002-9.001-4.932-9.001-11.701 0-4.97 4.03-9 9.001-9m0 1.5a7.5 7.5 0 0 0-7.501 7.5c0 2.761 1.763 5.316 3.856 7.302a21 21 0 0 0 2.863 2.27c.304.2.57.357.781.476.21-.12.477-.277.782-.477a21 21 0 0 0 2.863-2.27c2.093-1.985 3.856-4.54 3.856-7.301a7.5 7.5 0 0 0-7.5-7.5", clipRule: "evenodd" })] }));
 }
 exports.default = IconPlaceLine;

package/dist/components/Input/Input.d.ts

@@ -0,0 +1,28 @@
+import { ComponentPropsWithRef } from "react";
+import { VariantProps } from "class-variance-authority";
+import { inputVariants } from "./Input.styles";
+export type InputProps = ComponentPropsWithRef<"input"> & VariantProps<typeof inputVariants>;
+/**
+ * `Input`: 텍스트 입력을 위한 기본 컴포넌트입니다. FormControl과 함께 사용하면 label, validation 등의 기능을 자동으로 제공받습니다.
+ * @see [RDS Storybook: Input](https://main--691ac7d6da1eb0c0acb5f3e2.chromatic.com/?path=/docs/components-input--docs)
+ * @see [RDS Storybook: FormControl](https://main--691ac7d6da1eb0c0acb5f3e2.chromatic.com/?path=/docs/components-formcontrol--docs)
+ * @example
+ * ```tsx
+ * // 독립적으로 사용
+ * <Input
+ *   placeholder="이메일을 입력하세요"
+ *   onChange={(e) => setEmail(e.target.value)}
+ * />
+ *
+ * // FormControl과 함께 사용
+ * <FormControl required>
+ *   <FormControl.Label>이메일</FormControl.Label>
+ *   <Input type="email" />
+ * </FormControl>
+ * ```
+ */
+export declare function Input({ variant, disabled, className, ...props }: InputProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Input {
+    var displayName: string;
+}
+//# sourceMappingURL=Input.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/components/Input/Input.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,qBAAqB,EAAE,MAAM,OAAO,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAE/C,MAAM,MAAM,UAAU,GAAG,qBAAqB,CAAC,OAAO,CAAC,GACrD,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC;AAErC;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,KAAK,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,2CAQ3E;yBARe,KAAK"}

package/dist/components/Input/Input.js

@@ -0,0 +1,30 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Input = Input;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const style_1 = require("../../utils/style");
+const Input_styles_1 = require("./Input.styles");
+/**
+ * `Input`: 텍스트 입력을 위한 기본 컴포넌트입니다. FormControl과 함께 사용하면 label, validation 등의 기능을 자동으로 제공받습니다.
+ * @see [RDS Storybook: Input](https://main--691ac7d6da1eb0c0acb5f3e2.chromatic.com/?path=/docs/components-input--docs)
+ * @see [RDS Storybook: FormControl](https://main--691ac7d6da1eb0c0acb5f3e2.chromatic.com/?path=/docs/components-formcontrol--docs)
+ * @example
+ * ```tsx
+ * // 독립적으로 사용
+ * <Input
+ *   placeholder="이메일을 입력하세요"
+ *   onChange={(e) => setEmail(e.target.value)}
+ * />
+ *
+ * // FormControl과 함께 사용
+ * <FormControl required>
+ *   <FormControl.Label>이메일</FormControl.Label>
+ *   <Input type="email" />
+ * </FormControl>
+ * ```
+ */
+function Input({ variant, disabled, className, ...props }) {
+    return ((0, jsx_runtime_1.jsx)("input", { disabled: disabled, className: (0, style_1.cn)((0, Input_styles_1.inputVariants)({ variant, disabled, className })), ...props }));
+}
+Input.displayName = "Input";

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Input.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Input/Input.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAEhC,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;CA4BoB,CAAC;AAE/B,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"}