@reitwagen/design-components 0.3.1 → 0.6.0

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

@@ -1,11 +1,12 @@
-import { ButtonHTMLAttributes, ReactNode } from "react";
+import { ElementType, ReactNode } from "react";
 import { type VariantProps } from "class-variance-authority";
-import { ChildrenProps } from "../../types/props";
+import { ChildrenProps, PolymorphicComponentWithRef } from "../../types/props";
 import { buttonVariants } from "./Button.styles";
-interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "disabled" | "color">, ChildrenProps, VariantProps<typeof buttonVariants> {
+type ButtonOwnProps = VariantProps<typeof buttonVariants> & ChildrenProps & {
     leftContent?: ReactNode;
     rightContent?: ReactNode;
-}
+};
+type ButtonProps<C extends ElementType> = PolymorphicComponentWithRef<C, ButtonOwnProps>;
 /**
  * `Button`: 버튼의 스타일을 변경하려면 variant, color, size 속성을 사용하세요. Button이 부모 요소의 전체 너비를 차지하게 하려면 full 속성을 지정하세요.
  * @see [RDS Storybook: Button](https://main--691ac7d6da1eb0c0acb5f3e2.chromatic.com/?path=/docs/components-button--docs)
@@ -15,7 +16,7 @@ interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "dis
  * <Button variant="outlined" size="large" full>Button Text</Button>
  * ```
  */
-export declare function Button({ className, variant, color, size, disabled, children, leftContent, rightContent, full, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function Button<C extends ElementType = "button">({ className, as, variant, color, size, disabled, children, leftContent, rightContent, full, ...props }: ButtonProps<C>): import("react/jsx-runtime").JSX.Element;
 export declare namespace Button {
     var displayName: string;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACxD,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAE7D,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEjD,UAAU,WACR,SAAQ,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC,EACzE,aAAa,EACb,YAAY,CAAC,OAAO,cAAc,CAAC;IACrC,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,YAAY,CAAC,EAAE,SAAS,CAAC;CAC1B;AAED;;;;;;;;GAQG;AAEH,wBAAgB,MAAM,CAAC,EACrB,SAAS,EACT,OAAO,EACP,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,YAAY,EACZ,IAAI,EACJ,GAAG,KAAK,EACT,EAAE,WAAW,2CAqBb;yBAhCe,MAAM"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC/C,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAE7D,OAAO,EAAE,aAAa,EAAE,2BAA2B,EAAE,MAAM,mBAAmB,CAAC;AAC/E,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEjD,KAAK,cAAc,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,GACvD,aAAa,GAAG;IACd,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,YAAY,CAAC,EAAE,SAAS,CAAC;CAC1B,CAAC;AAEJ,KAAK,WAAW,CAAC,CAAC,SAAS,WAAW,IAAI,2BAA2B,CACnE,CAAC,EACD,cAAc,CACf,CAAC;AAEF;;;;;;;;GAQG;AAEH,wBAAgB,MAAM,CAAC,CAAC,SAAS,WAAW,GAAG,QAAQ,EAAE,EACvD,SAAS,EACT,EAAE,EACF,OAAO,EACP,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,YAAY,EACZ,IAAI,EACJ,GAAG,KAAK,EACT,EAAE,WAAW,CAAC,CAAC,CAAC,2CAuBhB;yBAnCe,MAAM"}

package/dist/components/Button/Button.js

@@ -14,8 +14,9 @@ const Button_styles_1 = require("./Button.styles");
  * <Button variant="outlined" size="large" full>Button Text</Button>
  * ```
  */
-function Button({ className, variant, color, size, disabled, children, leftContent, rightContent, full, ...props }) {
-    return ((0, jsx_runtime_1.jsxs)("button", { className: (0, style_1.cn)((0, Button_styles_1.buttonVariants)({
+function Button({ className, as, variant, color, size, disabled, children, leftContent, rightContent, full, ...props }) {
+    const Component = as || "button";
+    return ((0, jsx_runtime_1.jsxs)(Component, { className: (0, style_1.cn)((0, Button_styles_1.buttonVariants)({
             variant,
             color,
             size,

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.d.ts

@@ -1,13 +1,13 @@
-import { ButtonHTMLAttributes } from "react";
+import { ComponentPropsWithRef } from "react";
 import { VariantProps } from "class-variance-authority";
 import { ChildrenProps } from "../../types/props";
 import { checkboxVariants } from "./Checkbox.styles";
-export interface CheckboxProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "disabled" | "color">, ChildrenProps, VariantProps<typeof checkboxVariants> {
+export type CheckboxProps = ComponentPropsWithRef<"button"> & ChildrenProps & VariantProps<typeof checkboxVariants> & {
     /**
      * 체크박스의 체크 상태가 변경될 때 호출되는 이벤트 핸들러
      */
     onCheckedChange?: (checked: boolean) => void;
-}
+};
 /**
  * `Checkbox`: 다중 선택이 가능한 요소로, 선택/비선택 상태를 나타냅니다. 라벨과 함께 사용하거나 단독으로 사용할 수 있습니다.
  * @see [RDS Storybook: Checkbox](https://main--691ac7d6da1eb0c0acb5f3e2.chromatic.com/?path=/docs/components-checkbox--docs)
@@ -34,8 +34,6 @@ export interface CheckboxProps extends Omit<ButtonHTMLAttributes<HTMLButtonEleme
  *   Action Text
  * </Checkbox>
  * ```
- *
- *
  */
 export declare function Checkbox({ id: idProp, checked: controlledChecked, defaultChecked, disabled, className, onCheckedChange, children, ...props }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace Checkbox {

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAmB,MAAM,OAAO,CAAC;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGxD,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,gBAAgB,EAAqB,MAAM,mBAAmB,CAAC;AAExE,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC,EACzE,aAAa,EACb,YAAY,CAAC,OAAO,gBAAgB,CAAC;IACvC;;OAEG;IACH,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CAC9C;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AAEH,wBAAgB,QAAQ,CAAC,EACvB,EAAE,EAAE,MAAM,EACV,OAAO,EAAE,iBAAiB,EAC1B,cAAc,EACd,QAAQ,EACR,SAAS,EACT,eAAe,EACf,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,aAAa,2CAgEf;yBAzEe,QAAQ"}
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,qBAAqB,EAAmB,MAAM,OAAO,CAAC;AAC/D,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGxD,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,gBAAgB,EAAqB,MAAM,mBAAmB,CAAC;AAExE,MAAM,MAAM,aAAa,GAAG,qBAAqB,CAAC,QAAQ,CAAC,GACzD,aAAa,GACb,YAAY,CAAC,OAAO,gBAAgB,CAAC,GAAG;IACtC;;OAEG;IACH,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CAC9C,CAAC;AAEJ;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEH,wBAAgB,QAAQ,CAAC,EACvB,EAAE,EAAE,MAAM,EACV,OAAO,EAAE,iBAAiB,EAC1B,cAAc,EACd,QAAQ,EACR,SAAS,EACT,eAAe,EACf,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,aAAa,2CAgEf;yBAzEe,QAAQ"}

package/dist/components/Checkbox/Checkbox.js

@@ -1,3 +1,4 @@
+"use client";
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Checkbox = Checkbox;
@@ -32,8 +33,6 @@ const Checkbox_styles_1 = require("./Checkbox.styles");
  *   Action Text
  * </Checkbox>
  * ```
- *
- *
  */
 function Checkbox({ id: idProp, checked: controlledChecked, defaultChecked, disabled, className, onCheckedChange, children, ...props }) {
     const [uncontrolledChecked, setUncontrolledChecked] = (0, react_1.useState)(defaultChecked);

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: `
@@ -60,7 +62,7 @@ function Controlled() {
             },
         },
     },
-    render: (props) => (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { ...props }),
+    render: (props) => (0, jsx_runtime_1.jsx)(CheckboxWithControlled, { ...props }),
     args: {
         checked: true,
         disabled: false,
@@ -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.d.ts

@@ -1,12 +1,12 @@
 import { ElementType, ReactNode } from "react";
 import { VariantProps } from "class-variance-authority";
-import { ChildrenProps, PolymorphicComponentProps } from "../../types/props";
+import { ChildrenProps, PolymorphicComponentWithRef } from "../../types/props";
 import { chipVariants } from "./Chip.styles";
 type ChipOwnProps = VariantProps<typeof chipVariants> & ChildrenProps & {
     leftContent?: ReactNode;
     rightContent?: ReactNode;
 };
-type ChipProps<C extends ElementType> = PolymorphicComponentProps<C, ChipOwnProps>;
+type ChipProps<C extends ElementType> = PolymorphicComponentWithRef<C, ChipOwnProps>;
 /**
  * `Chip`: 정보 요약과 화면의 복잡성을 줄이는 데 사용되며, 카테고리를 분류해 특정 정보를 시각적으로 표현합니다.
  * @see [RDS Storybook: Chip](https://main--691ac7d6da1eb0c0acb5f3e2.chromatic.com/?path=/docs/components-chip--docs)

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

@@ -1 +1 @@
-{"version":3,"file":"Chip.d.ts","sourceRoot":"","sources":["../../../src/components/Chip/Chip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAE7E,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAE7C,KAAK,YAAY,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,GACnD,aAAa,GAAG;IACd,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,YAAY,CAAC,EAAE,SAAS,CAAC;CAC1B,CAAC;AAEJ,KAAK,SAAS,CAAC,CAAC,SAAS,WAAW,IAAI,yBAAyB,CAC/D,CAAC,EACD,YAAY,CACb,CAAC;AAEF;;;;;;;;;GASG;AAEH,wBAAgB,IAAI,CAAC,CAAC,SAAS,WAAW,GAAG,QAAQ,EAAE,EACrD,SAAS,EACT,EAAE,EACF,QAAQ,EACR,OAAO,EACP,IAAI,EACJ,QAAQ,EACR,UAAU,EACV,QAAQ,EACR,WAAW,EACX,YAAY,EACZ,GAAG,KAAK,EACT,EAAE,SAAS,CAAC,CAAC,CAAC,2CAuBd;yBAnCe,IAAI"}
+{"version":3,"file":"Chip.d.ts","sourceRoot":"","sources":["../../../src/components/Chip/Chip.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,2BAA2B,EAAE,MAAM,mBAAmB,CAAC;AAE/E,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAE7C,KAAK,YAAY,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,GACnD,aAAa,GAAG;IACd,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,YAAY,CAAC,EAAE,SAAS,CAAC;CAC1B,CAAC;AAEJ,KAAK,SAAS,CAAC,CAAC,SAAS,WAAW,IAAI,2BAA2B,CACjE,CAAC,EACD,YAAY,CACb,CAAC;AAEF;;;;;;;;;GASG;AAEH,wBAAgB,IAAI,CAAC,CAAC,SAAS,WAAW,GAAG,QAAQ,EAAE,EACrD,SAAS,EACT,EAAE,EACF,QAAQ,EACR,OAAO,EACP,IAAI,EACJ,QAAQ,EACR,UAAU,EACV,QAAQ,EACR,WAAW,EACX,YAAY,EACZ,GAAG,KAAK,EACT,EAAE,SAAS,CAAC,CAAC,CAAC,2CAuBd;yBAnCe,IAAI"}

package/dist/components/Chip/Chip.js

@@ -1,3 +1,4 @@
+"use client";
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Chip = Chip;

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/IconAlarmOff.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IconAlarmOff.d.ts","sourceRoot":"","sources":["../../../src/components/Icons/IconAlarmOff.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEtC,UAAU,KAAM,SAAQ,QAAQ,CAAC,aAAa,CAAC;IAC7C,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;;GAQG;AACH,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,KAAU,EAAE,MAAW,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,2CA0B5E;AAED,eAAe,YAAY,CAAC"}
+{"version":3,"file":"IconAlarmOff.d.ts","sourceRoot":"","sources":["../../../src/components/Icons/IconAlarmOff.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEtC,UAAU,KAAM,SAAQ,QAAQ,CAAC,aAAa,CAAC;IAC7C,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;;GAQG;AACH,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,KAAU,EAAE,MAAW,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,2CA0B5E;AAED,eAAe,YAAY,CAAC"}