@shipfox/react-ui 0.7.0 → 0.8.0

package/.turbo/turbo-build.log

@@ -1,12 +1,12 @@
  WARN  Issue while reading "/runnertmp/_work/tooling/tooling/.npmrc". Failed to replace env in config: ${NPM_ACCESS_TOKEN}
 
-> @shipfox/react-ui@0.7.0 build /runnertmp/_work/tooling/tooling/libs/react/ui
+> @shipfox/react-ui@0.8.0 build /runnertmp/_work/tooling/tooling/libs/react/ui
 > swc && pnpm run build:css
 
-Successfully compiled: 116 files with swc (406.75ms)
+Successfully compiled: 119 files with swc (289.23ms)
  WARN  Issue while reading "/runnertmp/_work/tooling/tooling/.npmrc". Failed to replace env in config: ${NPM_ACCESS_TOKEN}
 
-> @shipfox/react-ui@0.7.0 build:css /runnertmp/_work/tooling/tooling/libs/react/ui
+> @shipfox/react-ui@0.8.0 build:css /runnertmp/_work/tooling/tooling/libs/react/ui
 > vite build --config vite.css.config.ts && rm -f dist/css-entry.js dist/css-entry.js.map
 
 vite v7.2.2 building client environment for production...
@@ -14,6 +14,6 @@ transforming...
 ✓ 2 modules transformed.
 rendering chunks...
 computing gzip size...
-dist/styles.css    84.62 kB │ gzip: 13.44 kB
+dist/styles.css    85.04 kB │ gzip: 13.51 kB
 dist/css-entry.js   0.00 kB │ gzip:  0.02 kB
-✓ built in 745ms
+✓ built in 478ms

package/.turbo/turbo-check.log

@@ -1,6 +1,6 @@
  WARN  Issue while reading "/runnertmp/_work/tooling/tooling/.npmrc". Failed to replace env in config: ${NPM_ACCESS_TOKEN}
 
-> @shipfox/react-ui@0.7.0 check /runnertmp/_work/tooling/tooling/libs/react/ui
+> @shipfox/react-ui@0.8.0 check /runnertmp/_work/tooling/tooling/libs/react/ui
 > biome-check --fix
 
-Checked 135 files in 240ms. No fixes applied.
+Checked 138 files in 244ms. No fixes applied.

package/.turbo/turbo-type.log

@@ -1,5 +1,5 @@
  WARN  Issue while reading "/runnertmp/_work/tooling/tooling/.npmrc". Failed to replace env in config: ${NPM_ACCESS_TOKEN}
 
-> @shipfox/react-ui@0.7.0 type /runnertmp/_work/tooling/tooling/libs/react/ui
+> @shipfox/react-ui@0.8.0 type /runnertmp/_work/tooling/tooling/libs/react/ui
 > tsc-emit
 

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @shipfox/react-ui
 
+## 0.8.0
+
+### Minor Changes
+
+- f3dd22c: Add Form components
+- 5e4a493: Update Spinner icon and Button loading state
+
 ## 0.7.0
 
 ### Minor Changes

package/dist/components/button/button.d.ts

@@ -5,9 +5,10 @@ export declare const buttonVariants: (props?: ({
     variant?: "transparent" | "success" | "primary" | "secondary" | "danger" | "transparentMuted" | null | undefined;
     size?: "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-export declare function Button({ className, variant, size, asChild, children, iconLeft, iconRight, ...props }: ComponentProps<'button'> & VariantProps<typeof buttonVariants> & {
+export declare function Button({ className, variant, size, asChild, children, iconLeft, iconRight, isLoading, disabled, ...props }: ComponentProps<'button'> & VariantProps<typeof buttonVariants> & {
     asChild?: boolean;
     iconLeft?: IconName;
     iconRight?: IconName;
+    isLoading?: boolean;
 }): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=button.d.ts.map

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":"AACA,OAAO,EAAM,KAAK,YAAY,EAAC,MAAM,0BAA0B,CAAC;AAChE,OAAO,EAAO,KAAK,QAAQ,EAAC,MAAM,iBAAiB,CAAC;AACpD,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,OAAO,CAAC;AAG1C,eAAO,MAAM,cAAc;;;8EAgC1B,CAAC;AAEF,wBAAgB,MAAM,CAAC,EACrB,SAAS,EACT,OAAO,EACP,IAAI,EACJ,OAAe,EACf,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,QAAQ,CAAC,GACzB,YAAY,CAAC,OAAO,cAAc,CAAC,GAAG;IACpC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,SAAS,CAAC,EAAE,QAAQ,CAAC;CACtB,2CAUF"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/button/button.tsx"],"names":[],"mappings":"AACA,OAAO,EAAM,KAAK,YAAY,EAAC,MAAM,0BAA0B,CAAC;AAChE,OAAO,EAAO,KAAK,QAAQ,EAAC,MAAM,iBAAiB,CAAC;AACpD,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,OAAO,CAAC;AAG1C,eAAO,MAAM,cAAc;;;8EAgC1B,CAAC;AAWF,wBAAgB,MAAM,CAAC,EACrB,SAAS,EACT,OAAO,EACP,IAAI,EACJ,OAAe,EACf,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,SAAiB,EACjB,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,QAAQ,CAAC,GACzB,YAAY,CAAC,OAAO,cAAc,CAAC,GAAG;IACpC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,SAAS,CAAC,EAAE,QAAQ,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,2CAuBF"}

package/dist/components/button/button.js

@@ -27,8 +27,17 @@ export const buttonVariants = cva('rounded-6 inline-flex items-center justify-ce
         size: 'md'
     }
 });
-export function Button({ className, variant, size, asChild = false, children, iconLeft, iconRight, ...props }) {
+const spinnerSizeMap = {
+    '2xs': 'size-10',
+    xs: 'size-10',
+    sm: 'size-12',
+    md: 'size-14',
+    lg: 'size-16',
+    xl: 'size-18'
+};
+export function Button({ className, variant, size, asChild = false, children, iconLeft, iconRight, isLoading = false, disabled, ...props }) {
     const Comp = asChild ? Slot : 'button';
+    const spinnerSize = spinnerSizeMap[size ?? 'md'];
     return /*#__PURE__*/ _jsxs(Comp, {
         "data-slot": "button",
         className: cn(buttonVariants({
@@ -36,9 +45,15 @@ export function Button({ className, variant, size, asChild = false, children, ic
             size,
             className
         })),
+        disabled: disabled || isLoading,
+        "aria-busy": isLoading,
+        "aria-live": isLoading ? 'polite' : undefined,
         ...props,
         children: [
-            iconLeft && /*#__PURE__*/ _jsx(Icon, {
+            isLoading ? /*#__PURE__*/ _jsx(Icon, {
+                name: "spinner",
+                className: spinnerSize
+            }) : iconLeft && /*#__PURE__*/ _jsx(Icon, {
                 name: iconLeft
             }),
             children,

package/dist/components/button/button.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/button/button.tsx"],"sourcesContent":["import {Slot} from '@radix-ui/react-slot';\nimport {cva, type VariantProps} from 'class-variance-authority';\nimport {Icon, type IconName} from 'components/icon';\nimport type {ComponentProps} from 'react';\nimport {cn} from 'utils/cn';\n\nexport const buttonVariants = cva(\n  'rounded-6 inline-flex items-center justify-center whitespace-nowrap transition-colors disabled:pointer-events-none shrink-0 outline-none',\n  {\n    variants: {\n      variant: {\n        primary:\n          'bg-background-button-inverted-default text-foreground-contrast-primary shadow-button-inverted hover:bg-background-button-inverted-hover active:bg-background-button-inverted-pressed focus-visible:shadow-button-inverted-focus disabled:bg-background-neutral-disabled disabled:text-foreground-neutral-disabled disabled:shadow-none',\n        secondary:\n          'bg-background-button-neutral-default text-foreground-neutral-base shadow-button-neutral hover:bg-background-button-neutral-hover active:bg-background-button-neutral-pressed disabled:bg-background-neutral-disabled focus-visible:shadow-button-neutral-focus disabled:text-foreground-neutral-disabled disabled:shadow-none',\n        danger:\n          'bg-background-button-danger-default text-foreground-neutral-on-color shadow-button-danger hover:bg-background-button-danger-hover active:bg-background-button-danger-pressed focus-visible:shadow-button-danger-focus disabled:bg-background-neutral-disabled disabled:text-foreground-neutral-disabled disabled:shadow-none',\n        success:\n          'bg-background-button-success-default text-foreground-neutral-on-color shadow-button-success hover:bg-background-button-success-hover active:bg-background-button-success-pressed focus-visible:shadow-button-success-focus disabled:bg-background-neutral-disabled disabled:text-foreground-neutral-disabled disabled:shadow-none',\n        transparent:\n          'bg-background-button-transparent-default text-foreground-neutral-base hover:bg-background-button-transparent-hover active:bg-background-button-transparent-pressed focus-visible:shadow-button-neutral-focus disabled:text-foreground-neutral-disabled',\n        transparentMuted:\n          'bg-background-button-transparent-default text-foreground-neutral-muted hover:bg-background-button-transparent-hover active:bg-background-button-transparent-pressed focus-visible:shadow-button-neutral-focus disabled:text-foreground-neutral-disabled',\n      },\n      size: {\n        '2xs': 'h-20 px-6 text-xs gap-4',\n        xs: 'h-24 px-6 text-xs gap-4',\n        sm: 'h-28 px-8 text-sm gap-6',\n        md: 'h-32 px-10 text-md gap-8',\n        lg: 'h-36 px-12 text-lg gap-8',\n        xl: 'h-40 px-12 text-xl gap-10',\n      },\n    },\n    defaultVariants: {\n      variant: 'primary',\n      size: 'md',\n    },\n  },\n);\n\nexport function Button({\n  className,\n  variant,\n  size,\n  asChild = false,\n  children,\n  iconLeft,\n  iconRight,\n  ...props\n}: ComponentProps<'button'> &\n  VariantProps<typeof buttonVariants> & {\n    asChild?: boolean;\n    iconLeft?: IconName;\n    iconRight?: IconName;\n  }) {\n  const Comp = asChild ? Slot : 'button';\n\n  return (\n    <Comp data-slot=\"button\" className={cn(buttonVariants({variant, size, className}))} {...props}>\n      {iconLeft && <Icon name={iconLeft} />}\n      {children}\n      {iconRight && <Icon name={iconRight} />}\n    </Comp>\n  );\n}\n"],"names":["Slot","cva","Icon","cn","buttonVariants","variants","variant","primary","secondary","danger","success","transparent","transparentMuted","size","xs","sm","md","lg","xl","defaultVariants","Button","className","asChild","children","iconLeft","iconRight","props","Comp","data-slot","name"],"mappings":";AAAA,SAAQA,IAAI,QAAO,uBAAuB;AAC1C,SAAQC,GAAG,QAA0B,2BAA2B;AAChE,SAAQC,IAAI,QAAsB,kBAAkB;AAEpD,SAAQC,EAAE,QAAO,WAAW;AAE5B,OAAO,MAAMC,iBAAiBH,IAC5B,4IACA;IACEI,UAAU;QACRC,SAAS;YACPC,SACE;YACFC,WACE;YACFC,QACE;YACFC,SACE;YACFC,aACE;YACFC,kBACE;QACJ;QACAC,MAAM;YACJ,OAAO;YACPC,IAAI;YACJC,IAAI;YACJC,IAAI;YACJC,IAAI;YACJC,IAAI;QACN;IACF;IACAC,iBAAiB;QACfb,SAAS;QACTO,MAAM;IACR;AACF,GACA;AAEF,OAAO,SAASO,OAAO,EACrBC,SAAS,EACTf,OAAO,EACPO,IAAI,EACJS,UAAU,KAAK,EACfC,QAAQ,EACRC,QAAQ,EACRC,SAAS,EACT,GAAGC,OAMF;IACD,MAAMC,OAAOL,UAAUtB,OAAO;IAE9B,qBACE,MAAC2B;QAAKC,aAAU;QAASP,WAAWlB,GAAGC,eAAe;YAACE;YAASO;YAAMQ;QAAS;QAAM,GAAGK,KAAK;;YAC1FF,0BAAY,KAACtB;gBAAK2B,MAAML;;YACxBD;YACAE,2BAAa,KAACvB;gBAAK2B,MAAMJ;;;;AAGhC"}
+{"version":3,"sources":["../../../src/components/button/button.tsx"],"sourcesContent":["import {Slot} from '@radix-ui/react-slot';\nimport {cva, type VariantProps} from 'class-variance-authority';\nimport {Icon, type IconName} from 'components/icon';\nimport type {ComponentProps} from 'react';\nimport {cn} from 'utils/cn';\n\nexport const buttonVariants = cva(\n  'rounded-6 inline-flex items-center justify-center whitespace-nowrap transition-colors disabled:pointer-events-none shrink-0 outline-none',\n  {\n    variants: {\n      variant: {\n        primary:\n          'bg-background-button-inverted-default text-foreground-contrast-primary shadow-button-inverted hover:bg-background-button-inverted-hover active:bg-background-button-inverted-pressed focus-visible:shadow-button-inverted-focus disabled:bg-background-neutral-disabled disabled:text-foreground-neutral-disabled disabled:shadow-none',\n        secondary:\n          'bg-background-button-neutral-default text-foreground-neutral-base shadow-button-neutral hover:bg-background-button-neutral-hover active:bg-background-button-neutral-pressed disabled:bg-background-neutral-disabled focus-visible:shadow-button-neutral-focus disabled:text-foreground-neutral-disabled disabled:shadow-none',\n        danger:\n          'bg-background-button-danger-default text-foreground-neutral-on-color shadow-button-danger hover:bg-background-button-danger-hover active:bg-background-button-danger-pressed focus-visible:shadow-button-danger-focus disabled:bg-background-neutral-disabled disabled:text-foreground-neutral-disabled disabled:shadow-none',\n        success:\n          'bg-background-button-success-default text-foreground-neutral-on-color shadow-button-success hover:bg-background-button-success-hover active:bg-background-button-success-pressed focus-visible:shadow-button-success-focus disabled:bg-background-neutral-disabled disabled:text-foreground-neutral-disabled disabled:shadow-none',\n        transparent:\n          'bg-background-button-transparent-default text-foreground-neutral-base hover:bg-background-button-transparent-hover active:bg-background-button-transparent-pressed focus-visible:shadow-button-neutral-focus disabled:text-foreground-neutral-disabled',\n        transparentMuted:\n          'bg-background-button-transparent-default text-foreground-neutral-muted hover:bg-background-button-transparent-hover active:bg-background-button-transparent-pressed focus-visible:shadow-button-neutral-focus disabled:text-foreground-neutral-disabled',\n      },\n      size: {\n        '2xs': 'h-20 px-6 text-xs gap-4',\n        xs: 'h-24 px-6 text-xs gap-4',\n        sm: 'h-28 px-8 text-sm gap-6',\n        md: 'h-32 px-10 text-md gap-8',\n        lg: 'h-36 px-12 text-lg gap-8',\n        xl: 'h-40 px-12 text-xl gap-10',\n      },\n    },\n    defaultVariants: {\n      variant: 'primary',\n      size: 'md',\n    },\n  },\n);\n\nconst spinnerSizeMap: Record<NonNullable<VariantProps<typeof buttonVariants>['size']>, string> = {\n  '2xs': 'size-10',\n  xs: 'size-10',\n  sm: 'size-12',\n  md: 'size-14',\n  lg: 'size-16',\n  xl: 'size-18',\n};\n\nexport function Button({\n  className,\n  variant,\n  size,\n  asChild = false,\n  children,\n  iconLeft,\n  iconRight,\n  isLoading = false,\n  disabled,\n  ...props\n}: ComponentProps<'button'> &\n  VariantProps<typeof buttonVariants> & {\n    asChild?: boolean;\n    iconLeft?: IconName;\n    iconRight?: IconName;\n    isLoading?: boolean;\n  }) {\n  const Comp = asChild ? Slot : 'button';\n  const spinnerSize =\n    spinnerSizeMap[(size ?? 'md') as NonNullable<VariantProps<typeof buttonVariants>['size']>];\n\n  return (\n    <Comp\n      data-slot=\"button\"\n      className={cn(buttonVariants({variant, size, className}))}\n      disabled={disabled || isLoading}\n      aria-busy={isLoading}\n      aria-live={isLoading ? 'polite' : undefined}\n      {...props}\n    >\n      {isLoading ? (\n        <Icon name=\"spinner\" className={spinnerSize} />\n      ) : (\n        iconLeft && <Icon name={iconLeft} />\n      )}\n      {children}\n      {iconRight && <Icon name={iconRight} />}\n    </Comp>\n  );\n}\n"],"names":["Slot","cva","Icon","cn","buttonVariants","variants","variant","primary","secondary","danger","success","transparent","transparentMuted","size","xs","sm","md","lg","xl","defaultVariants","spinnerSizeMap","Button","className","asChild","children","iconLeft","iconRight","isLoading","disabled","props","Comp","spinnerSize","data-slot","aria-busy","aria-live","undefined","name"],"mappings":";AAAA,SAAQA,IAAI,QAAO,uBAAuB;AAC1C,SAAQC,GAAG,QAA0B,2BAA2B;AAChE,SAAQC,IAAI,QAAsB,kBAAkB;AAEpD,SAAQC,EAAE,QAAO,WAAW;AAE5B,OAAO,MAAMC,iBAAiBH,IAC5B,4IACA;IACEI,UAAU;QACRC,SAAS;YACPC,SACE;YACFC,WACE;YACFC,QACE;YACFC,SACE;YACFC,aACE;YACFC,kBACE;QACJ;QACAC,MAAM;YACJ,OAAO;YACPC,IAAI;YACJC,IAAI;YACJC,IAAI;YACJC,IAAI;YACJC,IAAI;QACN;IACF;IACAC,iBAAiB;QACfb,SAAS;QACTO,MAAM;IACR;AACF,GACA;AAEF,MAAMO,iBAA2F;IAC/F,OAAO;IACPN,IAAI;IACJC,IAAI;IACJC,IAAI;IACJC,IAAI;IACJC,IAAI;AACN;AAEA,OAAO,SAASG,OAAO,EACrBC,SAAS,EACThB,OAAO,EACPO,IAAI,EACJU,UAAU,KAAK,EACfC,QAAQ,EACRC,QAAQ,EACRC,SAAS,EACTC,YAAY,KAAK,EACjBC,QAAQ,EACR,GAAGC,OAOF;IACD,MAAMC,OAAOP,UAAUvB,OAAO;IAC9B,MAAM+B,cACJX,cAAc,CAAEP,QAAQ,KAAkE;IAE5F,qBACE,MAACiB;QACCE,aAAU;QACVV,WAAWnB,GAAGC,eAAe;YAACE;YAASO;YAAMS;QAAS;QACtDM,UAAUA,YAAYD;QACtBM,aAAWN;QACXO,aAAWP,YAAY,WAAWQ;QACjC,GAAGN,KAAK;;YAERF,0BACC,KAACzB;gBAAKkC,MAAK;gBAAUd,WAAWS;iBAEhCN,0BAAY,KAACvB;gBAAKkC,MAAMX;;YAEzBD;YACAE,2BAAa,KAACxB;gBAAKkC,MAAMV;;;;AAGhC"}

package/dist/components/button/button.stories.js

@@ -34,6 +34,9 @@ const meta = {
         },
         asChild: {
             control: 'boolean'
+        },
+        isLoading: {
+            control: 'boolean'
         }
     },
     args: {
@@ -158,5 +161,27 @@ export const Icons = {
             ]
         })
 };
+export const Loading = {
+    render: (args)=>/*#__PURE__*/ _jsxs("div", {
+            className: "flex flex-col gap-16",
+            children: [
+                /*#__PURE__*/ _jsx("div", {
+                    children: /*#__PURE__*/ _jsx(Button, {
+                        ...args,
+                        isLoading: true,
+                        children: "Loading..."
+                    })
+                }),
+                /*#__PURE__*/ _jsx("div", {
+                    children: /*#__PURE__*/ _jsx(Button, {
+                        ...args,
+                        isLoading: true,
+                        iconLeft: "google",
+                        children: "Loading with left icon"
+                    })
+                })
+            ]
+        })
+};
 
 //# sourceMappingURL=button.stories.js.map

package/dist/components/button/button.stories.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/button/button.stories.tsx"],"sourcesContent":["import type {Meta, StoryObj} from '@storybook/react';\nimport {Code} from 'components/typography';\nimport {Button} from './button';\n\nconst variantOptions = [\n  'primary',\n  'secondary',\n  'danger',\n  'success',\n  'transparent',\n  'transparentMuted',\n] as const;\nconst sizeOptions = ['2xs', 'xs', 'sm', 'md', 'lg', 'xl'] as const;\n\nconst meta = {\n  title: 'Components/Button',\n  component: Button,\n  tags: ['autodocs'],\n  argTypes: {\n    variant: {\n      control: 'select',\n      options: variantOptions,\n    },\n    size: {\n      control: 'select',\n      options: sizeOptions,\n    },\n    asChild: {control: 'boolean'},\n  },\n  args: {\n    children: 'Click me',\n    variant: 'primary',\n    size: 'md',\n  },\n} satisfies Meta<typeof Button>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nexport const Default: Story = {};\n\nexport const Variants: Story = {\n  render: (args) => (\n    <div className=\"flex flex-col gap-32\">\n      {sizeOptions.map((size) => (\n        <table key={size} className=\"w-fit border-separate border-spacing-x-32 border-spacing-y-16\">\n          <thead>\n            <tr>\n              <th>{size}</th>\n              <th>Default</th>\n              <th>Hover</th>\n              <th>Focus</th>\n              <th>Disabled</th>\n            </tr>\n          </thead>\n          <tbody>\n            {variantOptions.map((variant) => (\n              <tr key={variant}>\n                <td>\n                  <Code variant=\"label\" className=\"text-foreground-neutral-subtle\">\n                    {variant}\n                  </Code>\n                </td>\n                <td>\n                  <Button {...args} variant={variant} size={size}>\n                    Click me\n                  </Button>\n                </td>\n                <td>\n                  <Button {...args} variant={variant} className=\"hover\" size={size}>\n                    Click me\n                  </Button>\n                </td>\n                <td>\n                  <Button {...args} variant={variant} className=\"focus\" size={size}>\n                    Click me\n                  </Button>\n                </td>\n                <td>\n                  <Button {...args} variant={variant} disabled size={size}>\n                    Click me\n                  </Button>\n                </td>\n              </tr>\n            ))}\n          </tbody>\n        </table>\n      ))}\n    </div>\n  ),\n};\n\nVariants.parameters = {\n  pseudo: {\n    hover: '.hover',\n    focusVisible: '.focus',\n  },\n};\n\nexport const Icons: Story = {\n  render: (args) => (\n    <div className=\"flex flex-col gap-16\">\n      <div>\n        <Button {...args} iconLeft=\"google\">\n          Click me\n        </Button>\n      </div>\n      <div>\n        <Button {...args} iconRight=\"microsoft\">\n          Click me\n        </Button>\n      </div>\n      <div>\n        <Button {...args} iconLeft=\"google\" iconRight=\"microsoft\">\n          Click me\n        </Button>\n      </div>\n    </div>\n  ),\n};\n"],"names":["Code","Button","variantOptions","sizeOptions","meta","title","component","tags","argTypes","variant","control","options","size","asChild","args","children","Default","Variants","render","div","className","map","table","thead","tr","th","tbody","td","disabled","parameters","pseudo","hover","focusVisible","Icons","iconLeft","iconRight"],"mappings":";AACA,SAAQA,IAAI,QAAO,wBAAwB;AAC3C,SAAQC,MAAM,QAAO,WAAW;AAEhC,MAAMC,iBAAiB;IACrB;IACA;IACA;IACA;IACA;IACA;CACD;AACD,MAAMC,cAAc;IAAC;IAAO;IAAM;IAAM;IAAM;IAAM;CAAK;AAEzD,MAAMC,OAAO;IACXC,OAAO;IACPC,WAAWL;IACXM,MAAM;QAAC;KAAW;IAClBC,UAAU;QACRC,SAAS;YACPC,SAAS;YACTC,SAAST;QACX;QACAU,MAAM;YACJF,SAAS;YACTC,SAASR;QACX;QACAU,SAAS;YAACH,SAAS;QAAS;IAC9B;IACAI,MAAM;QACJC,UAAU;QACVN,SAAS;QACTG,MAAM;IACR;AACF;AAEA,eAAeR,KAAK;AAGpB,OAAO,MAAMY,UAAiB,CAAC,EAAE;AAEjC,OAAO,MAAMC,WAAkB;IAC7BC,QAAQ,CAACJ,qBACP,KAACK;YAAIC,WAAU;sBACZjB,YAAYkB,GAAG,CAAC,CAACT,qBAChB,MAACU;oBAAiBF,WAAU;;sCAC1B,KAACG;sCACC,cAAA,MAACC;;kDACC,KAACC;kDAAIb;;kDACL,KAACa;kDAAG;;kDACJ,KAACA;kDAAG;;kDACJ,KAACA;kDAAG;;kDACJ,KAACA;kDAAG;;;;;sCAGR,KAACC;sCACExB,eAAemB,GAAG,CAAC,CAACZ,wBACnB,MAACe;;sDACC,KAACG;sDACC,cAAA,KAAC3B;gDAAKS,SAAQ;gDAAQW,WAAU;0DAC7BX;;;sDAGL,KAACkB;sDACC,cAAA,KAAC1B;gDAAQ,GAAGa,IAAI;gDAAEL,SAASA;gDAASG,MAAMA;0DAAM;;;sDAIlD,KAACe;sDACC,cAAA,KAAC1B;gDAAQ,GAAGa,IAAI;gDAAEL,SAASA;gDAASW,WAAU;gDAAQR,MAAMA;0DAAM;;;sDAIpE,KAACe;sDACC,cAAA,KAAC1B;gDAAQ,GAAGa,IAAI;gDAAEL,SAASA;gDAASW,WAAU;gDAAQR,MAAMA;0DAAM;;;sDAIpE,KAACe;sDACC,cAAA,KAAC1B;gDAAQ,GAAGa,IAAI;gDAAEL,SAASA;gDAASmB,QAAQ;gDAAChB,MAAMA;0DAAM;;;;mCAtBpDH;;;mBAZHG;;AA6CpB,EAAE;AAEFK,SAASY,UAAU,GAAG;IACpBC,QAAQ;QACNC,OAAO;QACPC,cAAc;IAChB;AACF;AAEA,OAAO,MAAMC,QAAe;IAC1Bf,QAAQ,CAACJ,qBACP,MAACK;YAAIC,WAAU;;8BACb,KAACD;8BACC,cAAA,KAAClB;wBAAQ,GAAGa,IAAI;wBAAEoB,UAAS;kCAAS;;;8BAItC,KAACf;8BACC,cAAA,KAAClB;wBAAQ,GAAGa,IAAI;wBAAEqB,WAAU;kCAAY;;;8BAI1C,KAAChB;8BACC,cAAA,KAAClB;wBAAQ,GAAGa,IAAI;wBAAEoB,UAAS;wBAASC,WAAU;kCAAY;;;;;AAMlE,EAAE"}
+{"version":3,"sources":["../../../src/components/button/button.stories.tsx"],"sourcesContent":["import type {Meta, StoryObj} from '@storybook/react';\nimport {Code} from 'components/typography';\nimport {Button} from './button';\n\nconst variantOptions = [\n  'primary',\n  'secondary',\n  'danger',\n  'success',\n  'transparent',\n  'transparentMuted',\n] as const;\nconst sizeOptions = ['2xs', 'xs', 'sm', 'md', 'lg', 'xl'] as const;\n\nconst meta = {\n  title: 'Components/Button',\n  component: Button,\n  tags: ['autodocs'],\n  argTypes: {\n    variant: {\n      control: 'select',\n      options: variantOptions,\n    },\n    size: {\n      control: 'select',\n      options: sizeOptions,\n    },\n    asChild: {control: 'boolean'},\n    isLoading: {control: 'boolean'},\n  },\n  args: {\n    children: 'Click me',\n    variant: 'primary',\n    size: 'md',\n  },\n} satisfies Meta<typeof Button>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nexport const Default: Story = {};\n\nexport const Variants: Story = {\n  render: (args) => (\n    <div className=\"flex flex-col gap-32\">\n      {sizeOptions.map((size) => (\n        <table key={size} className=\"w-fit border-separate border-spacing-x-32 border-spacing-y-16\">\n          <thead>\n            <tr>\n              <th>{size}</th>\n              <th>Default</th>\n              <th>Hover</th>\n              <th>Focus</th>\n              <th>Disabled</th>\n            </tr>\n          </thead>\n          <tbody>\n            {variantOptions.map((variant) => (\n              <tr key={variant}>\n                <td>\n                  <Code variant=\"label\" className=\"text-foreground-neutral-subtle\">\n                    {variant}\n                  </Code>\n                </td>\n                <td>\n                  <Button {...args} variant={variant} size={size}>\n                    Click me\n                  </Button>\n                </td>\n                <td>\n                  <Button {...args} variant={variant} className=\"hover\" size={size}>\n                    Click me\n                  </Button>\n                </td>\n                <td>\n                  <Button {...args} variant={variant} className=\"focus\" size={size}>\n                    Click me\n                  </Button>\n                </td>\n                <td>\n                  <Button {...args} variant={variant} disabled size={size}>\n                    Click me\n                  </Button>\n                </td>\n              </tr>\n            ))}\n          </tbody>\n        </table>\n      ))}\n    </div>\n  ),\n};\n\nVariants.parameters = {\n  pseudo: {\n    hover: '.hover',\n    focusVisible: '.focus',\n  },\n};\n\nexport const Icons: Story = {\n  render: (args) => (\n    <div className=\"flex flex-col gap-16\">\n      <div>\n        <Button {...args} iconLeft=\"google\">\n          Click me\n        </Button>\n      </div>\n      <div>\n        <Button {...args} iconRight=\"microsoft\">\n          Click me\n        </Button>\n      </div>\n      <div>\n        <Button {...args} iconLeft=\"google\" iconRight=\"microsoft\">\n          Click me\n        </Button>\n      </div>\n    </div>\n  ),\n};\n\nexport const Loading: Story = {\n  render: (args) => (\n    <div className=\"flex flex-col gap-16\">\n      <div>\n        <Button {...args} isLoading>\n          Loading...\n        </Button>\n      </div>\n      <div>\n        <Button {...args} isLoading iconLeft=\"google\">\n          Loading with left icon\n        </Button>\n      </div>\n    </div>\n  ),\n};\n"],"names":["Code","Button","variantOptions","sizeOptions","meta","title","component","tags","argTypes","variant","control","options","size","asChild","isLoading","args","children","Default","Variants","render","div","className","map","table","thead","tr","th","tbody","td","disabled","parameters","pseudo","hover","focusVisible","Icons","iconLeft","iconRight","Loading"],"mappings":";AACA,SAAQA,IAAI,QAAO,wBAAwB;AAC3C,SAAQC,MAAM,QAAO,WAAW;AAEhC,MAAMC,iBAAiB;IACrB;IACA;IACA;IACA;IACA;IACA;CACD;AACD,MAAMC,cAAc;IAAC;IAAO;IAAM;IAAM;IAAM;IAAM;CAAK;AAEzD,MAAMC,OAAO;IACXC,OAAO;IACPC,WAAWL;IACXM,MAAM;QAAC;KAAW;IAClBC,UAAU;QACRC,SAAS;YACPC,SAAS;YACTC,SAAST;QACX;QACAU,MAAM;YACJF,SAAS;YACTC,SAASR;QACX;QACAU,SAAS;YAACH,SAAS;QAAS;QAC5BI,WAAW;YAACJ,SAAS;QAAS;IAChC;IACAK,MAAM;QACJC,UAAU;QACVP,SAAS;QACTG,MAAM;IACR;AACF;AAEA,eAAeR,KAAK;AAGpB,OAAO,MAAMa,UAAiB,CAAC,EAAE;AAEjC,OAAO,MAAMC,WAAkB;IAC7BC,QAAQ,CAACJ,qBACP,KAACK;YAAIC,WAAU;sBACZlB,YAAYmB,GAAG,CAAC,CAACV,qBAChB,MAACW;oBAAiBF,WAAU;;sCAC1B,KAACG;sCACC,cAAA,MAACC;;kDACC,KAACC;kDAAId;;kDACL,KAACc;kDAAG;;kDACJ,KAACA;kDAAG;;kDACJ,KAACA;kDAAG;;kDACJ,KAACA;kDAAG;;;;;sCAGR,KAACC;sCACEzB,eAAeoB,GAAG,CAAC,CAACb,wBACnB,MAACgB;;sDACC,KAACG;sDACC,cAAA,KAAC5B;gDAAKS,SAAQ;gDAAQY,WAAU;0DAC7BZ;;;sDAGL,KAACmB;sDACC,cAAA,KAAC3B;gDAAQ,GAAGc,IAAI;gDAAEN,SAASA;gDAASG,MAAMA;0DAAM;;;sDAIlD,KAACgB;sDACC,cAAA,KAAC3B;gDAAQ,GAAGc,IAAI;gDAAEN,SAASA;gDAASY,WAAU;gDAAQT,MAAMA;0DAAM;;;sDAIpE,KAACgB;sDACC,cAAA,KAAC3B;gDAAQ,GAAGc,IAAI;gDAAEN,SAASA;gDAASY,WAAU;gDAAQT,MAAMA;0DAAM;;;sDAIpE,KAACgB;sDACC,cAAA,KAAC3B;gDAAQ,GAAGc,IAAI;gDAAEN,SAASA;gDAASoB,QAAQ;gDAACjB,MAAMA;0DAAM;;;;mCAtBpDH;;;mBAZHG;;AA6CpB,EAAE;AAEFM,SAASY,UAAU,GAAG;IACpBC,QAAQ;QACNC,OAAO;QACPC,cAAc;IAChB;AACF;AAEA,OAAO,MAAMC,QAAe;IAC1Bf,QAAQ,CAACJ,qBACP,MAACK;YAAIC,WAAU;;8BACb,KAACD;8BACC,cAAA,KAACnB;wBAAQ,GAAGc,IAAI;wBAAEoB,UAAS;kCAAS;;;8BAItC,KAACf;8BACC,cAAA,KAACnB;wBAAQ,GAAGc,IAAI;wBAAEqB,WAAU;kCAAY;;;8BAI1C,KAAChB;8BACC,cAAA,KAACnB;wBAAQ,GAAGc,IAAI;wBAAEoB,UAAS;wBAASC,WAAU;kCAAY;;;;;AAMlE,EAAE;AAEF,OAAO,MAAMC,UAAiB;IAC5BlB,QAAQ,CAACJ,qBACP,MAACK;YAAIC,WAAU;;8BACb,KAACD;8BACC,cAAA,KAACnB;wBAAQ,GAAGc,IAAI;wBAAED,SAAS;kCAAC;;;8BAI9B,KAACM;8BACC,cAAA,KAACnB;wBAAQ,GAAGc,IAAI;wBAAED,SAAS;wBAACqB,UAAS;kCAAS;;;;;AAMtD,EAAE"}

package/dist/components/button/icon-button.d.ts

@@ -7,8 +7,9 @@ export declare const iconButtonVariants: (props?: ({
     radius?: "full" | "rounded" | null | undefined;
     muted?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-export declare function IconButton({ className, variant, size, radius, muted, asChild, children, icon, ...props }: ComponentProps<'button'> & VariantProps<typeof iconButtonVariants> & {
+export declare function IconButton({ className, variant, size, radius, muted, asChild, children, icon, isLoading, disabled, ...props }: ComponentProps<'button'> & VariantProps<typeof iconButtonVariants> & {
     asChild?: boolean;
     icon?: IconName;
+    isLoading?: boolean;
 }): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=icon-button.d.ts.map

package/dist/components/button/icon-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"icon-button.d.ts","sourceRoot":"","sources":["../../../src/components/button/icon-button.tsx"],"names":[],"mappings":"AACA,OAAO,EAAM,KAAK,YAAY,EAAC,MAAM,0BAA0B,CAAC;AAChE,OAAO,EAAO,KAAK,QAAQ,EAAC,MAAM,iBAAiB,CAAC;AACpD,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,OAAO,CAAC;AAG1C,eAAO,MAAM,kBAAkB;;;;;8EAkC9B,CAAC;AAEF,wBAAgB,UAAU,CAAC,EACzB,SAAS,EACT,OAAO,EACP,IAAI,EACJ,MAAM,EACN,KAAK,EACL,OAAe,EACf,QAAQ,EACR,IAAI,EACJ,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,QAAQ,CAAC,GACzB,YAAY,CAAC,OAAO,kBAAkB,CAAC,GAAG;IACxC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,QAAQ,CAAC;CACjB,2CAYF"}
+{"version":3,"file":"icon-button.d.ts","sourceRoot":"","sources":["../../../src/components/button/icon-button.tsx"],"names":[],"mappings":"AACA,OAAO,EAAM,KAAK,YAAY,EAAC,MAAM,0BAA0B,CAAC;AAChE,OAAO,EAAO,KAAK,QAAQ,EAAC,MAAM,iBAAiB,CAAC;AACpD,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,OAAO,CAAC;AAG1C,eAAO,MAAM,kBAAkB;;;;;8EAkC9B,CAAC;AAcF,wBAAgB,UAAU,CAAC,EACzB,SAAS,EACT,OAAO,EACP,IAAI,EACJ,MAAM,EACN,KAAK,EACL,OAAe,EACf,QAAQ,EACR,IAAI,EACJ,SAAiB,EACjB,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,QAAQ,CAAC,GACzB,YAAY,CAAC,OAAO,kBAAkB,CAAC,GAAG;IACxC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,2CAsBF"}

package/dist/components/button/icon-button.js

@@ -33,8 +33,17 @@ export const iconButtonVariants = cva('inline-flex items-center justify-center w
         muted: false
     }
 });
-export function IconButton({ className, variant, size, radius, muted, asChild = false, children, icon, ...props }) {
+const spinnerSizeMap = {
+    '2xs': 'size-8',
+    xs: 'size-10',
+    sm: 'size-12',
+    md: 'size-14',
+    lg: 'size-16',
+    xl: 'size-18'
+};
+export function IconButton({ className, variant, size, radius, muted, asChild = false, children, icon, isLoading = false, disabled, ...props }) {
     const Comp = asChild ? Slot : 'button';
+    const spinnerSize = spinnerSizeMap[size ?? 'md'];
     return /*#__PURE__*/ _jsx(Comp, {
         "data-slot": "icon-button",
         className: cn(iconButtonVariants({
@@ -43,8 +52,14 @@ export function IconButton({ className, variant, size, radius, muted, asChild =
             radius,
             muted
         }), className),
+        disabled: disabled || isLoading,
+        "aria-busy": isLoading,
+        "aria-live": isLoading ? 'polite' : undefined,
         ...props,
-        children: icon ? /*#__PURE__*/ _jsx(Icon, {
+        children: isLoading ? /*#__PURE__*/ _jsx(Icon, {
+            name: "spinner",
+            className: spinnerSize
+        }) : icon ? /*#__PURE__*/ _jsx(Icon, {
             name: icon
         }) : children
     });

package/dist/components/button/icon-button.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/button/icon-button.tsx"],"sourcesContent":["import {Slot} from '@radix-ui/react-slot';\nimport {cva, type VariantProps} from 'class-variance-authority';\nimport {Icon, type IconName} from 'components/icon';\nimport type {ComponentProps} from 'react';\nimport {cn} from 'utils/cn';\n\nexport const iconButtonVariants = cva(\n  'inline-flex items-center justify-center whitespace-nowrap transition-colors disabled:pointer-events-none shrink-0 outline-none',\n  {\n    variants: {\n      variant: {\n        primary:\n          'bg-background-button-inverted-default text-tag-neutral-icon shadow-button-inverted hover:bg-background-button-inverted-hover active:bg-background-button-inverted-pressed focus-visible:shadow-button-inverted-focus disabled:bg-background-neutral-disabled disabled:text-foreground-neutral-disabled disabled:shadow-none',\n        transparent:\n          'bg-background-button-transparent-default text-tag-neutral-icon hover:bg-background-button-transparent-hover active:bg-background-button-transparent-pressed focus-visible:shadow-button-neutral-focus disabled:text-foreground-neutral-disabled',\n      },\n      size: {\n        '2xs': 'w-20 h-20 text-xs',\n        xs: 'w-24 h-24 text-xs',\n        sm: 'w-28 h-28 text-sm',\n        md: 'w-32 h-32 text-md',\n        lg: 'w-36 h-36 text-lg',\n        xl: 'w-40 h-40 text-xl',\n      },\n      radius: {\n        rounded: 'rounded-6',\n        full: 'rounded-full',\n      },\n      muted: {\n        true: 'opacity-60',\n        false: '',\n      },\n    },\n    defaultVariants: {\n      variant: 'primary',\n      size: 'md',\n      radius: 'rounded',\n      muted: false,\n    },\n  },\n);\n\nexport function IconButton({\n  className,\n  variant,\n  size,\n  radius,\n  muted,\n  asChild = false,\n  children,\n  icon,\n  ...props\n}: ComponentProps<'button'> &\n  VariantProps<typeof iconButtonVariants> & {\n    asChild?: boolean;\n    icon?: IconName;\n  }) {\n  const Comp = asChild ? Slot : 'button';\n\n  return (\n    <Comp\n      data-slot=\"icon-button\"\n      className={cn(iconButtonVariants({variant, size, radius, muted}), className)}\n      {...props}\n    >\n      {icon ? <Icon name={icon} /> : children}\n    </Comp>\n  );\n}\n"],"names":["Slot","cva","Icon","cn","iconButtonVariants","variants","variant","primary","transparent","size","xs","sm","md","lg","xl","radius","rounded","full","muted","true","false","defaultVariants","IconButton","className","asChild","children","icon","props","Comp","data-slot","name"],"mappings":";AAAA,SAAQA,IAAI,QAAO,uBAAuB;AAC1C,SAAQC,GAAG,QAA0B,2BAA2B;AAChE,SAAQC,IAAI,QAAsB,kBAAkB;AAEpD,SAAQC,EAAE,QAAO,WAAW;AAE5B,OAAO,MAAMC,qBAAqBH,IAChC,kIACA;IACEI,UAAU;QACRC,SAAS;YACPC,SACE;YACFC,aACE;QACJ;QACAC,MAAM;YACJ,OAAO;YACPC,IAAI;YACJC,IAAI;YACJC,IAAI;YACJC,IAAI;YACJC,IAAI;QACN;QACAC,QAAQ;YACNC,SAAS;YACTC,MAAM;QACR;QACAC,OAAO;YACLC,MAAM;YACNC,OAAO;QACT;IACF;IACAC,iBAAiB;QACff,SAAS;QACTG,MAAM;QACNM,QAAQ;QACRG,OAAO;IACT;AACF,GACA;AAEF,OAAO,SAASI,WAAW,EACzBC,SAAS,EACTjB,OAAO,EACPG,IAAI,EACJM,MAAM,EACNG,KAAK,EACLM,UAAU,KAAK,EACfC,QAAQ,EACRC,IAAI,EACJ,GAAGC,OAKF;IACD,MAAMC,OAAOJ,UAAUxB,OAAO;IAE9B,qBACE,KAAC4B;QACCC,aAAU;QACVN,WAAWpB,GAAGC,mBAAmB;YAACE;YAASG;YAAMM;YAAQG;QAAK,IAAIK;QACjE,GAAGI,KAAK;kBAERD,qBAAO,KAACxB;YAAK4B,MAAMJ;aAAWD;;AAGrC"}
+{"version":3,"sources":["../../../src/components/button/icon-button.tsx"],"sourcesContent":["import {Slot} from '@radix-ui/react-slot';\nimport {cva, type VariantProps} from 'class-variance-authority';\nimport {Icon, type IconName} from 'components/icon';\nimport type {ComponentProps} from 'react';\nimport {cn} from 'utils/cn';\n\nexport const iconButtonVariants = cva(\n  'inline-flex items-center justify-center whitespace-nowrap transition-colors disabled:pointer-events-none shrink-0 outline-none',\n  {\n    variants: {\n      variant: {\n        primary:\n          'bg-background-button-inverted-default text-tag-neutral-icon shadow-button-inverted hover:bg-background-button-inverted-hover active:bg-background-button-inverted-pressed focus-visible:shadow-button-inverted-focus disabled:bg-background-neutral-disabled disabled:text-foreground-neutral-disabled disabled:shadow-none',\n        transparent:\n          'bg-background-button-transparent-default text-tag-neutral-icon hover:bg-background-button-transparent-hover active:bg-background-button-transparent-pressed focus-visible:shadow-button-neutral-focus disabled:text-foreground-neutral-disabled',\n      },\n      size: {\n        '2xs': 'w-20 h-20 text-xs',\n        xs: 'w-24 h-24 text-xs',\n        sm: 'w-28 h-28 text-sm',\n        md: 'w-32 h-32 text-md',\n        lg: 'w-36 h-36 text-lg',\n        xl: 'w-40 h-40 text-xl',\n      },\n      radius: {\n        rounded: 'rounded-6',\n        full: 'rounded-full',\n      },\n      muted: {\n        true: 'opacity-60',\n        false: '',\n      },\n    },\n    defaultVariants: {\n      variant: 'primary',\n      size: 'md',\n      radius: 'rounded',\n      muted: false,\n    },\n  },\n);\n\nconst spinnerSizeMap: Record<\n  NonNullable<VariantProps<typeof iconButtonVariants>['size']>,\n  string\n> = {\n  '2xs': 'size-8',\n  xs: 'size-10',\n  sm: 'size-12',\n  md: 'size-14',\n  lg: 'size-16',\n  xl: 'size-18',\n};\n\nexport function IconButton({\n  className,\n  variant,\n  size,\n  radius,\n  muted,\n  asChild = false,\n  children,\n  icon,\n  isLoading = false,\n  disabled,\n  ...props\n}: ComponentProps<'button'> &\n  VariantProps<typeof iconButtonVariants> & {\n    asChild?: boolean;\n    icon?: IconName;\n    isLoading?: boolean;\n  }) {\n  const Comp = asChild ? Slot : 'button';\n  const spinnerSize = spinnerSizeMap[size ?? 'md'];\n\n  return (\n    <Comp\n      data-slot=\"icon-button\"\n      className={cn(iconButtonVariants({variant, size, radius, muted}), className)}\n      disabled={disabled || isLoading}\n      aria-busy={isLoading}\n      aria-live={isLoading ? 'polite' : undefined}\n      {...props}\n    >\n      {isLoading ? (\n        <Icon name=\"spinner\" className={spinnerSize} />\n      ) : icon ? (\n        <Icon name={icon} />\n      ) : (\n        children\n      )}\n    </Comp>\n  );\n}\n"],"names":["Slot","cva","Icon","cn","iconButtonVariants","variants","variant","primary","transparent","size","xs","sm","md","lg","xl","radius","rounded","full","muted","true","false","defaultVariants","spinnerSizeMap","IconButton","className","asChild","children","icon","isLoading","disabled","props","Comp","spinnerSize","data-slot","aria-busy","aria-live","undefined","name"],"mappings":";AAAA,SAAQA,IAAI,QAAO,uBAAuB;AAC1C,SAAQC,GAAG,QAA0B,2BAA2B;AAChE,SAAQC,IAAI,QAAsB,kBAAkB;AAEpD,SAAQC,EAAE,QAAO,WAAW;AAE5B,OAAO,MAAMC,qBAAqBH,IAChC,kIACA;IACEI,UAAU;QACRC,SAAS;YACPC,SACE;YACFC,aACE;QACJ;QACAC,MAAM;YACJ,OAAO;YACPC,IAAI;YACJC,IAAI;YACJC,IAAI;YACJC,IAAI;YACJC,IAAI;QACN;QACAC,QAAQ;YACNC,SAAS;YACTC,MAAM;QACR;QACAC,OAAO;YACLC,MAAM;YACNC,OAAO;QACT;IACF;IACAC,iBAAiB;QACff,SAAS;QACTG,MAAM;QACNM,QAAQ;QACRG,OAAO;IACT;AACF,GACA;AAEF,MAAMI,iBAGF;IACF,OAAO;IACPZ,IAAI;IACJC,IAAI;IACJC,IAAI;IACJC,IAAI;IACJC,IAAI;AACN;AAEA,OAAO,SAASS,WAAW,EACzBC,SAAS,EACTlB,OAAO,EACPG,IAAI,EACJM,MAAM,EACNG,KAAK,EACLO,UAAU,KAAK,EACfC,QAAQ,EACRC,IAAI,EACJC,YAAY,KAAK,EACjBC,QAAQ,EACR,GAAGC,OAMF;IACD,MAAMC,OAAON,UAAUzB,OAAO;IAC9B,MAAMgC,cAAcV,cAAc,CAACb,QAAQ,KAAK;IAEhD,qBACE,KAACsB;QACCE,aAAU;QACVT,WAAWrB,GAAGC,mBAAmB;YAACE;YAASG;YAAMM;YAAQG;QAAK,IAAIM;QAClEK,UAAUA,YAAYD;QACtBM,aAAWN;QACXO,aAAWP,YAAY,WAAWQ;QACjC,GAAGN,KAAK;kBAERF,0BACC,KAAC1B;YAAKmC,MAAK;YAAUb,WAAWQ;aAC9BL,qBACF,KAACzB;YAAKmC,MAAMV;aAEZD;;AAIR"}

package/dist/components/button/icon-button.stories.js

@@ -250,5 +250,95 @@ export const Sizes = {
             ]
         })
 };
+export const Loading = {
+    render: ({ children: _children, ...args })=>/*#__PURE__*/ _jsxs("div", {
+            className: "flex flex-col gap-32",
+            children: [
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "flex flex-col gap-16",
+                    children: [
+                        /*#__PURE__*/ _jsx(Code, {
+                            variant: "label",
+                            children: "Loading by Size:"
+                        }),
+                        /*#__PURE__*/ _jsx("div", {
+                            className: "flex gap-16 items-center",
+                            children: sizeOptions.map((size)=>/*#__PURE__*/ _jsxs("div", {
+                                    className: "flex flex-col gap-8 items-center",
+                                    children: [
+                                        /*#__PURE__*/ _jsx(Code, {
+                                            variant: "label",
+                                            className: "text-foreground-neutral-subtle text-xs",
+                                            children: size
+                                        }),
+                                        /*#__PURE__*/ _jsx(IconButton, {
+                                            ...args,
+                                            icon: "addLine",
+                                            "aria-label": "Loading",
+                                            size: size,
+                                            isLoading: true
+                                        })
+                                    ]
+                                }, size))
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "flex flex-col gap-16",
+                    children: [
+                        /*#__PURE__*/ _jsx(Code, {
+                            variant: "label",
+                            children: "Loading by Variant:"
+                        }),
+                        /*#__PURE__*/ _jsx("div", {
+                            className: "flex gap-16 items-center",
+                            children: variantOptions.map((variant)=>/*#__PURE__*/ _jsxs("div", {
+                                    className: "flex flex-col gap-8 items-center",
+                                    children: [
+                                        /*#__PURE__*/ _jsx(Code, {
+                                            variant: "label",
+                                            className: "text-foreground-neutral-subtle text-xs",
+                                            children: variant
+                                        }),
+                                        /*#__PURE__*/ _jsx(IconButton, {
+                                            ...args,
+                                            icon: "addLine",
+                                            "aria-label": "Loading",
+                                            variant: variant,
+                                            isLoading: true
+                                        })
+                                    ]
+                                }, variant))
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "flex flex-col gap-16",
+                    children: [
+                        /*#__PURE__*/ _jsx(Code, {
+                            variant: "label",
+                            children: "Normal vs Loading:"
+                        }),
+                        /*#__PURE__*/ _jsxs("div", {
+                            className: "flex gap-16 items-center",
+                            children: [
+                                /*#__PURE__*/ _jsx(IconButton, {
+                                    ...args,
+                                    icon: "addLine",
+                                    "aria-label": "Add"
+                                }),
+                                /*#__PURE__*/ _jsx(IconButton, {
+                                    ...args,
+                                    icon: "addLine",
+                                    "aria-label": "Loading",
+                                    isLoading: true
+                                })
+                            ]
+                        })
+                    ]
+                })
+            ]
+        })
+};
 
 //# sourceMappingURL=icon-button.stories.js.map

package/dist/components/button/icon-button.stories.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/button/icon-button.stories.tsx"],"sourcesContent":["import type {Meta, StoryObj} from '@storybook/react';\nimport {Code} from 'components/typography';\nimport {IconButton} from './icon-button';\n\nconst variantOptions = ['primary', 'transparent'] as const;\nconst sizeOptions = ['2xs', 'xs', 'sm', 'md', 'lg', 'xl'] as const;\nconst radiusOptions = ['rounded', 'full'] as const;\n\nconst meta = {\n  title: 'Components/Button/IconButton',\n  component: IconButton,\n  tags: ['autodocs'],\n  argTypes: {\n    variant: {\n      control: 'select',\n      options: variantOptions,\n    },\n    size: {\n      control: 'select',\n      options: sizeOptions,\n    },\n    radius: {\n      control: 'select',\n      options: radiusOptions,\n    },\n    muted: {control: 'boolean'},\n    asChild: {control: 'boolean'},\n  },\n  args: {\n    icon: 'addLine',\n    variant: 'primary',\n    size: 'md',\n    radius: 'rounded',\n    muted: false,\n  },\n} satisfies Meta<typeof IconButton>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nexport const Default: Story = {};\n\nexport const Variants: Story = {\n  render: (args) => (\n    <div className=\"flex flex-col gap-32\">\n      {sizeOptions.map((size) => (\n        <div key={size} className=\"flex flex-col gap-16\">\n          <Code variant=\"label\" className=\"text-foreground-neutral-subtle\">\n            Size: {size}\n          </Code>\n          {radiusOptions.map((radius) => (\n            <table\n              key={radius}\n              className=\"w-fit border-separate border-spacing-x-32 border-spacing-y-16\"\n            >\n              <thead>\n                <tr>\n                  <th>{radius}</th>\n                  <th>Default</th>\n                  <th>Hover</th>\n                  <th>Focus</th>\n                  <th>Disabled</th>\n                </tr>\n              </thead>\n              <tbody>\n                {variantOptions.map((variant) => (\n                  <tr key={variant}>\n                    <td>\n                      <Code variant=\"label\" className=\"text-foreground-neutral-subtle\">\n                        {variant}\n                      </Code>\n                    </td>\n                    <td>\n                      <IconButton\n                        {...args}\n                        icon=\"addLine\"\n                        aria-label=\"Add\"\n                        variant={variant}\n                        size={size}\n                        radius={radius}\n                      />\n                    </td>\n                    <td>\n                      <IconButton\n                        {...args}\n                        icon=\"addLine\"\n                        aria-label=\"Add\"\n                        variant={variant}\n                        className=\"hover\"\n                        size={size}\n                        radius={radius}\n                      />\n                    </td>\n                    <td>\n                      <IconButton\n                        {...args}\n                        icon=\"addLine\"\n                        aria-label=\"Add\"\n                        variant={variant}\n                        className=\"focus\"\n                        size={size}\n                        radius={radius}\n                      />\n                    </td>\n                    <td>\n                      <IconButton\n                        {...args}\n                        icon=\"addLine\"\n                        aria-label=\"Add\"\n                        variant={variant}\n                        disabled\n                        size={size}\n                        radius={radius}\n                      />\n                    </td>\n                  </tr>\n                ))}\n              </tbody>\n            </table>\n          ))}\n        </div>\n      ))}\n    </div>\n  ),\n};\n\nVariants.parameters = {\n  pseudo: {\n    hover: '.hover',\n    focusVisible: '.focus',\n  },\n};\n\nexport const Muted: Story = {\n  render: (args) => (\n    <div className=\"flex flex-col gap-16\">\n      <div className=\"flex gap-16 items-center\">\n        <Code variant=\"label\">Normal:</Code>\n        <IconButton {...args} icon=\"addLine\" aria-label=\"Add\" />\n        <IconButton {...args} icon=\"addLine\" aria-label=\"Add\" variant=\"transparent\" />\n      </div>\n      <div className=\"flex gap-16 items-center\">\n        <Code variant=\"label\">Muted:</Code>\n        <IconButton {...args} icon=\"addLine\" aria-label=\"Add\" muted />\n        <IconButton {...args} icon=\"addLine\" aria-label=\"Add\" variant=\"transparent\" muted />\n      </div>\n    </div>\n  ),\n};\n\nexport const Sizes: Story = {\n  render: ({children: _children, ...args}) => (\n    <div className=\"flex flex-col gap-16\">\n      <div className=\"flex gap-16 items-center\">\n        <Code variant=\"label\">Rounded:</Code>\n        {sizeOptions.map((size) => (\n          <IconButton\n            {...args}\n            key={size}\n            icon=\"addLine\"\n            aria-label=\"Add\"\n            size={size}\n            radius=\"rounded\"\n          />\n        ))}\n      </div>\n      <div className=\"flex gap-16 items-center\">\n        <Code variant=\"label\">Full:</Code>\n        {sizeOptions.map((size) => (\n          <IconButton\n            {...args}\n            key={size}\n            icon=\"addLine\"\n            aria-label=\"Add\"\n            size={size}\n            radius=\"full\"\n          />\n        ))}\n      </div>\n    </div>\n  ),\n};\n"],"names":["Code","IconButton","variantOptions","sizeOptions","radiusOptions","meta","title","component","tags","argTypes","variant","control","options","size","radius","muted","asChild","args","icon","Default","Variants","render","div","className","map","table","thead","tr","th","tbody","td","aria-label","disabled","parameters","pseudo","hover","focusVisible","Muted","Sizes","children","_children","key"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/button/icon-button.stories.tsx"],"sourcesContent":["import type {Meta, StoryObj} from '@storybook/react';\nimport {Code} from 'components/typography';\nimport {IconButton} from './icon-button';\n\nconst variantOptions = ['primary', 'transparent'] as const;\nconst sizeOptions = ['2xs', 'xs', 'sm', 'md', 'lg', 'xl'] as const;\nconst radiusOptions = ['rounded', 'full'] as const;\n\nconst meta = {\n  title: 'Components/Button/IconButton',\n  component: IconButton,\n  tags: ['autodocs'],\n  argTypes: {\n    variant: {\n      control: 'select',\n      options: variantOptions,\n    },\n    size: {\n      control: 'select',\n      options: sizeOptions,\n    },\n    radius: {\n      control: 'select',\n      options: radiusOptions,\n    },\n    muted: {control: 'boolean'},\n    asChild: {control: 'boolean'},\n  },\n  args: {\n    icon: 'addLine',\n    variant: 'primary',\n    size: 'md',\n    radius: 'rounded',\n    muted: false,\n  },\n} satisfies Meta<typeof IconButton>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nexport const Default: Story = {};\n\nexport const Variants: Story = {\n  render: (args) => (\n    <div className=\"flex flex-col gap-32\">\n      {sizeOptions.map((size) => (\n        <div key={size} className=\"flex flex-col gap-16\">\n          <Code variant=\"label\" className=\"text-foreground-neutral-subtle\">\n            Size: {size}\n          </Code>\n          {radiusOptions.map((radius) => (\n            <table\n              key={radius}\n              className=\"w-fit border-separate border-spacing-x-32 border-spacing-y-16\"\n            >\n              <thead>\n                <tr>\n                  <th>{radius}</th>\n                  <th>Default</th>\n                  <th>Hover</th>\n                  <th>Focus</th>\n                  <th>Disabled</th>\n                </tr>\n              </thead>\n              <tbody>\n                {variantOptions.map((variant) => (\n                  <tr key={variant}>\n                    <td>\n                      <Code variant=\"label\" className=\"text-foreground-neutral-subtle\">\n                        {variant}\n                      </Code>\n                    </td>\n                    <td>\n                      <IconButton\n                        {...args}\n                        icon=\"addLine\"\n                        aria-label=\"Add\"\n                        variant={variant}\n                        size={size}\n                        radius={radius}\n                      />\n                    </td>\n                    <td>\n                      <IconButton\n                        {...args}\n                        icon=\"addLine\"\n                        aria-label=\"Add\"\n                        variant={variant}\n                        className=\"hover\"\n                        size={size}\n                        radius={radius}\n                      />\n                    </td>\n                    <td>\n                      <IconButton\n                        {...args}\n                        icon=\"addLine\"\n                        aria-label=\"Add\"\n                        variant={variant}\n                        className=\"focus\"\n                        size={size}\n                        radius={radius}\n                      />\n                    </td>\n                    <td>\n                      <IconButton\n                        {...args}\n                        icon=\"addLine\"\n                        aria-label=\"Add\"\n                        variant={variant}\n                        disabled\n                        size={size}\n                        radius={radius}\n                      />\n                    </td>\n                  </tr>\n                ))}\n              </tbody>\n            </table>\n          ))}\n        </div>\n      ))}\n    </div>\n  ),\n};\n\nVariants.parameters = {\n  pseudo: {\n    hover: '.hover',\n    focusVisible: '.focus',\n  },\n};\n\nexport const Muted: Story = {\n  render: (args) => (\n    <div className=\"flex flex-col gap-16\">\n      <div className=\"flex gap-16 items-center\">\n        <Code variant=\"label\">Normal:</Code>\n        <IconButton {...args} icon=\"addLine\" aria-label=\"Add\" />\n        <IconButton {...args} icon=\"addLine\" aria-label=\"Add\" variant=\"transparent\" />\n      </div>\n      <div className=\"flex gap-16 items-center\">\n        <Code variant=\"label\">Muted:</Code>\n        <IconButton {...args} icon=\"addLine\" aria-label=\"Add\" muted />\n        <IconButton {...args} icon=\"addLine\" aria-label=\"Add\" variant=\"transparent\" muted />\n      </div>\n    </div>\n  ),\n};\n\nexport const Sizes: Story = {\n  render: ({children: _children, ...args}) => (\n    <div className=\"flex flex-col gap-16\">\n      <div className=\"flex gap-16 items-center\">\n        <Code variant=\"label\">Rounded:</Code>\n        {sizeOptions.map((size) => (\n          <IconButton\n            {...args}\n            key={size}\n            icon=\"addLine\"\n            aria-label=\"Add\"\n            size={size}\n            radius=\"rounded\"\n          />\n        ))}\n      </div>\n      <div className=\"flex gap-16 items-center\">\n        <Code variant=\"label\">Full:</Code>\n        {sizeOptions.map((size) => (\n          <IconButton\n            {...args}\n            key={size}\n            icon=\"addLine\"\n            aria-label=\"Add\"\n            size={size}\n            radius=\"full\"\n          />\n        ))}\n      </div>\n    </div>\n  ),\n};\n\nexport const Loading: Story = {\n  render: ({children: _children, ...args}) => (\n    <div className=\"flex flex-col gap-32\">\n      <div className=\"flex flex-col gap-16\">\n        <Code variant=\"label\">Loading by Size:</Code>\n        <div className=\"flex gap-16 items-center\">\n          {sizeOptions.map((size) => (\n            <div key={size} className=\"flex flex-col gap-8 items-center\">\n              <Code variant=\"label\" className=\"text-foreground-neutral-subtle text-xs\">\n                {size}\n              </Code>\n              <IconButton {...args} icon=\"addLine\" aria-label=\"Loading\" size={size} isLoading />\n            </div>\n          ))}\n        </div>\n      </div>\n      <div className=\"flex flex-col gap-16\">\n        <Code variant=\"label\">Loading by Variant:</Code>\n        <div className=\"flex gap-16 items-center\">\n          {variantOptions.map((variant) => (\n            <div key={variant} className=\"flex flex-col gap-8 items-center\">\n              <Code variant=\"label\" className=\"text-foreground-neutral-subtle text-xs\">\n                {variant}\n              </Code>\n              <IconButton\n                {...args}\n                icon=\"addLine\"\n                aria-label=\"Loading\"\n                variant={variant}\n                isLoading\n              />\n            </div>\n          ))}\n        </div>\n      </div>\n      <div className=\"flex flex-col gap-16\">\n        <Code variant=\"label\">Normal vs Loading:</Code>\n        <div className=\"flex gap-16 items-center\">\n          <IconButton {...args} icon=\"addLine\" aria-label=\"Add\" />\n          <IconButton {...args} icon=\"addLine\" aria-label=\"Loading\" isLoading />\n        </div>\n      </div>\n    </div>\n  ),\n};\n"],"names":["Code","IconButton","variantOptions","sizeOptions","radiusOptions","meta","title","component","tags","argTypes","variant","control","options","size","radius","muted","asChild","args","icon","Default","Variants","render","div","className","map","table","thead","tr","th","tbody","td","aria-label","disabled","parameters","pseudo","hover","focusVisible","Muted","Sizes","children","_children","key","Loading","isLoading"],"mappings":"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"}

package/dist/components/form/form.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import type { ControllerProps, FieldPath, FieldValues } from 'react-hook-form';
+declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues = TFieldValues>(props: import("react-hook-form").FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React.JSX.Element;
+declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ ...props }: ControllerProps<TFieldValues, TName>) => import("react/jsx-runtime").JSX.Element;
+declare const FormItem: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const FormLabel: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-label").LabelProps & React.RefAttributes<HTMLLabelElement> & import("class-variance-authority").VariantProps<(props?: import("class-variance-authority/types").ClassProp | undefined) => string>, "ref"> & React.RefAttributes<HTMLLabelElement>>;
+declare const FormControl: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-slot").SlotProps & React.RefAttributes<HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>;
+declare const FormDescription: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+declare const FormMessage: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+export { Form, FormField, FormItem, FormLabel, FormControl, FormDescription, FormMessage };
+//# sourceMappingURL=form.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"form.d.ts","sourceRoot":"","sources":["../../../src/components/form/form.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAC,eAAe,EAAE,SAAS,EAAE,WAAW,EAAC,MAAM,iBAAiB,CAAC;AAI7E,QAAA,MAAM,IAAI,4MAAe,CAAC;AAiB1B,QAAA,MAAM,SAAS,GACb,YAAY,SAAS,WAAW,GAAG,WAAW,EAC9C,KAAK,SAAS,SAAS,CAAC,YAAY,CAAC,GAAG,SAAS,CAAC,YAAY,CAAC,EAC/D,cAEC,eAAe,CAAC,YAAY,EAAE,KAAK,CAAC,4CAMtC,CAAC;AA4BF,QAAA,MAAM,QAAQ,mKAUb,CAAC;AAGF,QAAA,MAAM,SAAS,gTAad,CAAC;AAGF,QAAA,MAAM,WAAW,8JAchB,CAAC;AAGF,QAAA,MAAM,eAAe,qLAiBpB,CAAC;AAGF,QAAA,MAAM,WAAW,qLAoBhB,CAAC;AAGF,OAAO,EAAC,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,WAAW,EAAE,eAAe,EAAE,WAAW,EAAC,CAAC"}

package/dist/components/form/form.js

@@ -0,0 +1,106 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Slot } from '@radix-ui/react-slot';
+import { Label } from '../../components/label/index.js';
+import * as React from 'react';
+import { Controller, FormProvider, useFormContext } from 'react-hook-form';
+import { cn } from '../../utils/cn.js';
+const Form = FormProvider;
+const FormFieldContext = /*#__PURE__*/ React.createContext(null);
+const FormItemContext = /*#__PURE__*/ React.createContext(null);
+const FormField = ({ ...props })=>{
+    return /*#__PURE__*/ _jsx(FormFieldContext.Provider, {
+        value: {
+            name: props.name
+        },
+        children: /*#__PURE__*/ _jsx(Controller, {
+            ...props
+        })
+    });
+};
+const useFormField = ()=>{
+    const fieldContext = React.useContext(FormFieldContext);
+    const itemContext = React.useContext(FormItemContext);
+    const { getFieldState, formState } = useFormContext();
+    if (!fieldContext) {
+        throw new Error('useFormField should be used within <FormField>');
+    }
+    if (!itemContext) {
+        throw new Error('useFormField should be used within <FormItem>');
+    }
+    const fieldState = getFieldState(fieldContext.name, formState);
+    const { id } = itemContext;
+    return {
+        id,
+        name: fieldContext.name,
+        formItemId: `${id}-form-item`,
+        formDescriptionId: `${id}-form-item-description`,
+        formMessageId: `${id}-form-item-message`,
+        ...fieldState
+    };
+};
+const FormItem = /*#__PURE__*/ React.forwardRef(({ className, ...props }, ref)=>{
+    const id = React.useId();
+    return /*#__PURE__*/ _jsx(FormItemContext.Provider, {
+        value: {
+            id
+        },
+        children: /*#__PURE__*/ _jsx("div", {
+            ref: ref,
+            className: className,
+            ...props
+        })
+    });
+});
+FormItem.displayName = 'FormItem';
+const FormLabel = /*#__PURE__*/ React.forwardRef(({ className, ...props }, ref)=>{
+    const { error, formItemId } = useFormField();
+    return /*#__PURE__*/ _jsx(Label, {
+        ref: ref,
+        className: cn(error && 'text-foreground-error', className),
+        htmlFor: formItemId,
+        ...props
+    });
+});
+FormLabel.displayName = 'FormLabel';
+const FormControl = /*#__PURE__*/ React.forwardRef(({ ...props }, ref)=>{
+    const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
+    return /*#__PURE__*/ _jsx(Slot, {
+        ref: ref,
+        id: formItemId,
+        "aria-describedby": error ? formMessageId : formDescriptionId,
+        "aria-invalid": !!error,
+        ...props
+    });
+});
+FormControl.displayName = 'FormControl';
+const FormDescription = /*#__PURE__*/ React.forwardRef(({ className, ...props }, ref)=>{
+    const { error, formDescriptionId } = useFormField();
+    if (error) {
+        return null;
+    }
+    return /*#__PURE__*/ _jsx("p", {
+        ref: ref,
+        id: formDescriptionId,
+        className: cn('text-sm text-foreground-neutral-muted', className),
+        ...props
+    });
+});
+FormDescription.displayName = 'FormDescription';
+const FormMessage = /*#__PURE__*/ React.forwardRef(({ className, children, ...props }, ref)=>{
+    const { error, formMessageId } = useFormField();
+    const body = error ? String(error?.message ?? '') : children;
+    if (!body) {
+        return null;
+    }
+    return /*#__PURE__*/ _jsx("p", {
+        ref: ref,
+        id: formMessageId,
+        className: cn('text-sm font-medium text-foreground-highlight-error', className),
+        ...props,
+        children: body
+    });
+});
+FormMessage.displayName = 'FormMessage';
+export { Form, FormField, FormItem, FormLabel, FormControl, FormDescription, FormMessage };
+
+//# sourceMappingURL=form.js.map

package/dist/components/form/form.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/form/form.tsx"],"sourcesContent":["import {Slot} from '@radix-ui/react-slot';\nimport {Label} from 'components/label';\nimport type {ComponentProps} from 'react';\nimport * as React from 'react';\nimport type {ControllerProps, FieldPath, FieldValues} from 'react-hook-form';\nimport {Controller, FormProvider, useFormContext} from 'react-hook-form';\nimport {cn} from 'utils/cn';\n\nconst Form = FormProvider;\n\ntype FormFieldContextValue<\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n> = {\n  name: TName;\n};\n\ntype FormItemContextValue = {\n  id: string;\n};\n\nconst FormFieldContext = React.createContext<FormFieldContextValue | null>(null);\n\nconst FormItemContext = React.createContext<FormItemContextValue | null>(null);\n\nconst FormField = <\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n>({\n  ...props\n}: ControllerProps<TFieldValues, TName>) => {\n  return (\n    <FormFieldContext.Provider value={{name: props.name}}>\n      <Controller {...props} />\n    </FormFieldContext.Provider>\n  );\n};\n\nconst useFormField = () => {\n  const fieldContext = React.useContext(FormFieldContext);\n  const itemContext = React.useContext(FormItemContext);\n  const {getFieldState, formState} = useFormContext();\n\n  if (!fieldContext) {\n    throw new Error('useFormField should be used within <FormField>');\n  }\n\n  if (!itemContext) {\n    throw new Error('useFormField should be used within <FormItem>');\n  }\n\n  const fieldState = getFieldState(fieldContext.name, formState);\n  const {id} = itemContext;\n\n  return {\n    id,\n    name: fieldContext.name,\n    formItemId: `${id}-form-item`,\n    formDescriptionId: `${id}-form-item-description`,\n    formMessageId: `${id}-form-item-message`,\n    ...fieldState,\n  };\n};\n\nconst FormItem = React.forwardRef<HTMLDivElement, ComponentProps<'div'>>(\n  ({className, ...props}, ref) => {\n    const id = React.useId();\n\n    return (\n      <FormItemContext.Provider value={{id}}>\n        <div ref={ref} className={className} {...props} />\n      </FormItemContext.Provider>\n    );\n  },\n);\nFormItem.displayName = 'FormItem';\n\nconst FormLabel = React.forwardRef<React.ElementRef<typeof Label>, ComponentProps<typeof Label>>(\n  ({className, ...props}, ref) => {\n    const {error, formItemId} = useFormField();\n\n    return (\n      <Label\n        ref={ref}\n        className={cn(error && 'text-foreground-error', className)}\n        htmlFor={formItemId}\n        {...props}\n      />\n    );\n  },\n);\nFormLabel.displayName = 'FormLabel';\n\nconst FormControl = React.forwardRef<React.ElementRef<typeof Slot>, ComponentProps<typeof Slot>>(\n  ({...props}, ref) => {\n    const {error, formItemId, formDescriptionId, formMessageId} = useFormField();\n\n    return (\n      <Slot\n        ref={ref}\n        id={formItemId}\n        aria-describedby={error ? formMessageId : formDescriptionId}\n        aria-invalid={!!error}\n        {...props}\n      />\n    );\n  },\n);\nFormControl.displayName = 'FormControl';\n\nconst FormDescription = React.forwardRef<HTMLParagraphElement, ComponentProps<'p'>>(\n  ({className, ...props}, ref) => {\n    const {error, formDescriptionId} = useFormField();\n\n    if (error) {\n      return null;\n    }\n\n    return (\n      <p\n        ref={ref}\n        id={formDescriptionId}\n        className={cn('text-sm text-foreground-neutral-muted', className)}\n        {...props}\n      />\n    );\n  },\n);\nFormDescription.displayName = 'FormDescription';\n\nconst FormMessage = React.forwardRef<HTMLParagraphElement, ComponentProps<'p'>>(\n  ({className, children, ...props}, ref) => {\n    const {error, formMessageId} = useFormField();\n    const body = error ? String(error?.message ?? '') : children;\n\n    if (!body) {\n      return null;\n    }\n\n    return (\n      <p\n        ref={ref}\n        id={formMessageId}\n        className={cn('text-sm font-medium text-foreground-highlight-error', className)}\n        {...props}\n      >\n        {body}\n      </p>\n    );\n  },\n);\nFormMessage.displayName = 'FormMessage';\n\nexport {Form, FormField, FormItem, FormLabel, FormControl, FormDescription, FormMessage};\n"],"names":["Slot","Label","React","Controller","FormProvider","useFormContext","cn","Form","FormFieldContext","createContext","FormItemContext","FormField","props","Provider","value","name","useFormField","fieldContext","useContext","itemContext","getFieldState","formState","Error","fieldState","id","formItemId","formDescriptionId","formMessageId","FormItem","forwardRef","className","ref","useId","div","displayName","FormLabel","error","htmlFor","FormControl","aria-describedby","aria-invalid","FormDescription","p","FormMessage","children","body","String","message"],"mappings":"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"}