@shipfox/react-ui 0.8.0 → 0.9.0

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

@@ -3,7 +3,7 @@ import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
 import { Icon } from '../../components/icon/index.js';
 import { cn } from '../../utils/cn.js';
-export const iconButtonVariants = cva('inline-flex items-center justify-center whitespace-nowrap transition-colors disabled:pointer-events-none shrink-0 outline-none', {
+export const iconButtonVariants = cva('inline-flex items-center justify-center whitespace-nowrap transition-colors cursor-pointer disabled:pointer-events-none shrink-0 outline-none', {
     variants: {
         variant: {
             primary: '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',
@@ -55,6 +55,9 @@ export function IconButton({ className, variant, size, radius, muted, asChild =
         disabled: disabled || isLoading,
         "aria-busy": isLoading,
         "aria-live": isLoading ? 'polite' : undefined,
+        ...asChild ? {
+            'aria-disabled': disabled || isLoading
+        } : {},
         ...props,
         children: isLoading ? /*#__PURE__*/ _jsx(Icon, {
             name: "spinner",

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\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"}
+{"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 cursor-pointer 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      {...(asChild ? {'aria-disabled': disabled || isLoading} : {})}\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,iJACA;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,GAAIX,UAAU;YAAC,iBAAiBI,YAAYD;QAAS,IAAI,CAAC,CAAC;QAC3D,GAAGE,KAAK;kBAERF,0BACC,KAAC1B;YAAKmC,MAAK;YAAUb,WAAWQ;aAC9BL,qBACF,KAACzB;YAAKmC,MAAMV;aAEZD;;AAIR"}

package/dist/components/checkbox/checkbox-links.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox-links.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox-links.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,KAAK,SAAS,EAAQ,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAW,KAAK,aAAa,EAAC,MAAM,YAAY,CAAC;AAExD,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,aAAa,EAAE,IAAI,CAAC,GAAG;IAC3D,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,YAAY,EAAE,CAAC;IACtB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,wBAAgB,aAAa,CAAC,EAC5B,EAAE,EACF,KAAK,EACL,KAAK,EACL,SAAS,EACT,SAAS,EACT,cAAc,EACd,aAAa,EACb,GAAG,aAAa,EACjB,EAAE,kBAAkB,2CA2DpB"}
+{"version":3,"file":"checkbox-links.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox-links.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAC,KAAK,SAAS,EAAQ,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAW,KAAK,aAAa,EAAC,MAAM,YAAY,CAAC;AAExD,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,aAAa,EAAE,IAAI,CAAC,GAAG;IAC3D,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,YAAY,EAAE,CAAC;IACtB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,wBAAgB,aAAa,CAAC,EAC5B,EAAE,EACF,KAAK,EACL,KAAK,EACL,SAAS,EACT,SAAS,EACT,cAAc,EACd,aAAa,EACb,GAAG,aAAa,EACjB,EAAE,kBAAkB,2CA4DpB"}

package/dist/components/checkbox/checkbox-links.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { buttonLinkVariants } from '../../components/button/button-link.js';
 import { Label } from '../../components/label/index.js';
 import { useId } from 'react';
 import { cn } from '../../utils/cn.js';
@@ -36,13 +37,18 @@ export function CheckboxLinks({ id, label, links, separator, className, labelCla
                                 children: [
                                     link.href ? /*#__PURE__*/ _jsx("a", {
                                         href: link.href,
+                                        target: "_blank",
+                                        rel: "noopener noreferrer",
                                         onClick: link.onClick,
-                                        className: cn('text-sm leading-20 font-medium text-foreground-highlight-interactive', 'hover:text-foreground-highlight-interactive-hover', linkClassName),
+                                        className: cn('text-sm leading-20 font-medium text-foreground-highlight-interactive', 'hover:text-foreground-highlight-interactive-hover transition-colors', linkClassName),
                                         children: link.label
                                     }) : /*#__PURE__*/ _jsx("button", {
                                         type: "button",
                                         onClick: link.onClick,
-                                        className: cn('text-sm leading-20 font-medium text-foreground-highlight-interactive', 'hover:text-foreground-highlight-interactive-hover', linkClassName),
+                                        className: cn(buttonLinkVariants({
+                                            variant: 'interactive',
+                                            size: 'sm'
+                                        }), linkClassName),
                                         children: link.label
                                     }),
                                     index < links.length - 1 && (separator ?? defaultSeparator)

package/dist/components/checkbox/checkbox-links.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/checkbox/checkbox-links.tsx"],"sourcesContent":["import {Label} from 'components/label';\nimport {type ReactNode, useId} from 'react';\nimport {cn} from 'utils/cn';\nimport {Checkbox, type CheckboxProps} from './checkbox';\n\nexport type CheckboxLink = {\n  label: string;\n  href?: string;\n  onClick?: () => void;\n};\n\nexport type CheckboxLinksProps = Omit<CheckboxProps, 'id'> & {\n  id?: string;\n  label: string;\n  links: CheckboxLink[];\n  separator?: ReactNode;\n  className?: string;\n  labelClassName?: string;\n  linkClassName?: string;\n};\n\nexport function CheckboxLinks({\n  id,\n  label,\n  links,\n  separator,\n  className,\n  labelClassName,\n  linkClassName,\n  ...checkboxProps\n}: CheckboxLinksProps) {\n  const generateId = useId();\n  const checkboxId = id || generateId;\n  const isDisabled = checkboxProps.disabled ?? false;\n  const defaultSeparator = (\n    <span className=\"size-3 rounded-full bg-foreground-neutral-muted\" aria-hidden=\"true\" />\n  );\n\n  return (\n    <div className={cn('flex gap-10 items-start', className)}>\n      <span className=\"p-2\">\n        <Checkbox id={checkboxId} {...checkboxProps} />\n      </span>\n      <div className=\"flex flex-col gap-4 items-start flex-1\">\n        <Label\n          htmlFor={checkboxId}\n          className={cn(\n            'text-sm leading-20 font-medium text-foreground-neutral-base',\n            isDisabled && 'cursor-not-allowed opacity-50',\n            labelClassName,\n          )}\n        >\n          {label}\n        </Label>\n        <div className=\"flex gap-6 items-center\">\n          {links.map((link, index) => (\n            <div key={link.label} className=\"flex gap-6 items-center\">\n              {link.href ? (\n                <a\n                  href={link.href}\n                  onClick={link.onClick}\n                  className={cn(\n                    'text-sm leading-20 font-medium text-foreground-highlight-interactive',\n                    'hover:text-foreground-highlight-interactive-hover',\n                    linkClassName,\n                  )}\n                >\n                  {link.label}\n                </a>\n              ) : (\n                <button\n                  type=\"button\"\n                  onClick={link.onClick}\n                  className={cn(\n                    'text-sm leading-20 font-medium text-foreground-highlight-interactive',\n                    'hover:text-foreground-highlight-interactive-hover',\n                    linkClassName,\n                  )}\n                >\n                  {link.label}\n                </button>\n              )}\n              {index < links.length - 1 && (separator ?? defaultSeparator)}\n            </div>\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"names":["Label","useId","cn","Checkbox","CheckboxLinks","id","label","links","separator","className","labelClassName","linkClassName","checkboxProps","generateId","checkboxId","isDisabled","disabled","defaultSeparator","span","aria-hidden","div","htmlFor","map","link","index","href","a","onClick","button","type","length"],"mappings":";AAAA,SAAQA,KAAK,QAAO,mBAAmB;AACvC,SAAwBC,KAAK,QAAO,QAAQ;AAC5C,SAAQC,EAAE,QAAO,WAAW;AAC5B,SAAQC,QAAQ,QAA2B,aAAa;AAkBxD,OAAO,SAASC,cAAc,EAC5BC,EAAE,EACFC,KAAK,EACLC,KAAK,EACLC,SAAS,EACTC,SAAS,EACTC,cAAc,EACdC,aAAa,EACb,GAAGC,eACgB;IACnB,MAAMC,aAAaZ;IACnB,MAAMa,aAAaT,MAAMQ;IACzB,MAAME,aAAaH,cAAcI,QAAQ,IAAI;IAC7C,MAAMC,iCACJ,KAACC;QAAKT,WAAU;QAAkDU,eAAY;;IAGhF,qBACE,MAACC;QAAIX,WAAWP,GAAG,2BAA2BO;;0BAC5C,KAACS;gBAAKT,WAAU;0BACd,cAAA,KAACN;oBAASE,IAAIS;oBAAa,GAAGF,aAAa;;;0BAE7C,MAACQ;gBAAIX,WAAU;;kCACb,KAACT;wBACCqB,SAASP;wBACTL,WAAWP,GACT,+DACAa,cAAc,iCACdL;kCAGDJ;;kCAEH,KAACc;wBAAIX,WAAU;kCACZF,MAAMe,GAAG,CAAC,CAACC,MAAMC,sBAChB,MAACJ;gCAAqBX,WAAU;;oCAC7Bc,KAAKE,IAAI,iBACR,KAACC;wCACCD,MAAMF,KAAKE,IAAI;wCACfE,SAASJ,KAAKI,OAAO;wCACrBlB,WAAWP,GACT,wEACA,qDACAS;kDAGDY,KAAKjB,KAAK;uDAGb,KAACsB;wCACCC,MAAK;wCACLF,SAASJ,KAAKI,OAAO;wCACrBlB,WAAWP,GACT,wEACA,qDACAS;kDAGDY,KAAKjB,KAAK;;oCAGdkB,QAAQjB,MAAMuB,MAAM,GAAG,KAAMtB,CAAAA,aAAaS,gBAAe;;+BA1BlDM,KAAKjB,KAAK;;;;;;AAiChC"}
+{"version":3,"sources":["../../../src/components/checkbox/checkbox-links.tsx"],"sourcesContent":["import {buttonLinkVariants} from 'components/button/button-link';\nimport {Label} from 'components/label';\nimport {type ReactNode, useId} from 'react';\nimport {cn} from 'utils/cn';\nimport {Checkbox, type CheckboxProps} from './checkbox';\n\nexport type CheckboxLink = {\n  label: string;\n  href?: string;\n  onClick?: () => void;\n};\n\nexport type CheckboxLinksProps = Omit<CheckboxProps, 'id'> & {\n  id?: string;\n  label: string;\n  links: CheckboxLink[];\n  separator?: ReactNode;\n  className?: string;\n  labelClassName?: string;\n  linkClassName?: string;\n};\n\nexport function CheckboxLinks({\n  id,\n  label,\n  links,\n  separator,\n  className,\n  labelClassName,\n  linkClassName,\n  ...checkboxProps\n}: CheckboxLinksProps) {\n  const generateId = useId();\n  const checkboxId = id || generateId;\n  const isDisabled = checkboxProps.disabled ?? false;\n  const defaultSeparator = (\n    <span className=\"size-3 rounded-full bg-foreground-neutral-muted\" aria-hidden=\"true\" />\n  );\n\n  return (\n    <div className={cn('flex gap-10 items-start', className)}>\n      <span className=\"p-2\">\n        <Checkbox id={checkboxId} {...checkboxProps} />\n      </span>\n      <div className=\"flex flex-col gap-4 items-start flex-1\">\n        <Label\n          htmlFor={checkboxId}\n          className={cn(\n            'text-sm leading-20 font-medium text-foreground-neutral-base',\n            isDisabled && 'cursor-not-allowed opacity-50',\n            labelClassName,\n          )}\n        >\n          {label}\n        </Label>\n        <div className=\"flex gap-6 items-center\">\n          {links.map((link, index) => (\n            <div key={link.label} className=\"flex gap-6 items-center\">\n              {link.href ? (\n                <a\n                  href={link.href}\n                  target=\"_blank\"\n                  rel=\"noopener noreferrer\"\n                  onClick={link.onClick}\n                  className={cn(\n                    'text-sm leading-20 font-medium text-foreground-highlight-interactive',\n                    'hover:text-foreground-highlight-interactive-hover transition-colors',\n                    linkClassName,\n                  )}\n                >\n                  {link.label}\n                </a>\n              ) : (\n                <button\n                  type=\"button\"\n                  onClick={link.onClick}\n                  className={cn(\n                    buttonLinkVariants({variant: 'interactive', size: 'sm'}),\n                    linkClassName,\n                  )}\n                >\n                  {link.label}\n                </button>\n              )}\n              {index < links.length - 1 && (separator ?? defaultSeparator)}\n            </div>\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"names":["buttonLinkVariants","Label","useId","cn","Checkbox","CheckboxLinks","id","label","links","separator","className","labelClassName","linkClassName","checkboxProps","generateId","checkboxId","isDisabled","disabled","defaultSeparator","span","aria-hidden","div","htmlFor","map","link","index","href","a","target","rel","onClick","button","type","variant","size","length"],"mappings":";AAAA,SAAQA,kBAAkB,QAAO,gCAAgC;AACjE,SAAQC,KAAK,QAAO,mBAAmB;AACvC,SAAwBC,KAAK,QAAO,QAAQ;AAC5C,SAAQC,EAAE,QAAO,WAAW;AAC5B,SAAQC,QAAQ,QAA2B,aAAa;AAkBxD,OAAO,SAASC,cAAc,EAC5BC,EAAE,EACFC,KAAK,EACLC,KAAK,EACLC,SAAS,EACTC,SAAS,EACTC,cAAc,EACdC,aAAa,EACb,GAAGC,eACgB;IACnB,MAAMC,aAAaZ;IACnB,MAAMa,aAAaT,MAAMQ;IACzB,MAAME,aAAaH,cAAcI,QAAQ,IAAI;IAC7C,MAAMC,iCACJ,KAACC;QAAKT,WAAU;QAAkDU,eAAY;;IAGhF,qBACE,MAACC;QAAIX,WAAWP,GAAG,2BAA2BO;;0BAC5C,KAACS;gBAAKT,WAAU;0BACd,cAAA,KAACN;oBAASE,IAAIS;oBAAa,GAAGF,aAAa;;;0BAE7C,MAACQ;gBAAIX,WAAU;;kCACb,KAACT;wBACCqB,SAASP;wBACTL,WAAWP,GACT,+DACAa,cAAc,iCACdL;kCAGDJ;;kCAEH,KAACc;wBAAIX,WAAU;kCACZF,MAAMe,GAAG,CAAC,CAACC,MAAMC,sBAChB,MAACJ;gCAAqBX,WAAU;;oCAC7Bc,KAAKE,IAAI,iBACR,KAACC;wCACCD,MAAMF,KAAKE,IAAI;wCACfE,QAAO;wCACPC,KAAI;wCACJC,SAASN,KAAKM,OAAO;wCACrBpB,WAAWP,GACT,wEACA,uEACAS;kDAGDY,KAAKjB,KAAK;uDAGb,KAACwB;wCACCC,MAAK;wCACLF,SAASN,KAAKM,OAAO;wCACrBpB,WAAWP,GACTH,mBAAmB;4CAACiC,SAAS;4CAAeC,MAAM;wCAAI,IACtDtB;kDAGDY,KAAKjB,KAAK;;oCAGdkB,QAAQjB,MAAM2B,MAAM,GAAG,KAAM1B,CAAAA,aAAaS,gBAAe;;+BA3BlDM,KAAKjB,KAAK;;;;;;AAkChC"}

package/dist/components/checkbox/checkbox.stories.js

@@ -534,11 +534,11 @@ export const CheckboxLinksStory = {
                             links: [
                                 {
                                     label: 'Terms of use',
-                                    href: '#'
+                                    href: 'https://www.shipfox.io/legal/terms-of-service'
                                 },
                                 {
                                     label: 'Privacy Policy',
-                                    href: '#'
+                                    onClick: ()=>window.open('https://www.shipfox.io/legal/privacy-policy', '_blank', 'noopener,noreferrer')
                                 }
                             ]
                         }),
@@ -548,11 +548,11 @@ export const CheckboxLinksStory = {
                             links: [
                                 {
                                     label: 'Terms of use',
-                                    href: '#'
+                                    href: 'https://www.shipfox.io/legal/terms-of-service'
                                 },
                                 {
                                     label: 'Privacy Policy',
-                                    href: '#'
+                                    onClick: ()=>window.open('https://www.shipfox.io/legal/privacy-policy', '_blank', 'noopener,noreferrer')
                                 }
                             ],
                             checked: true

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/checkbox/checkbox.stories.tsx"],"sourcesContent":["import type {Meta, StoryObj} from '@storybook/react';\nimport {Code, Header} from 'components/typography';\nimport {Checkbox, CheckboxLabel, CheckboxLinks} from '.';\n\nconst meta = {\n  title: 'Components/Checkbox',\n  component: Checkbox,\n  tags: ['autodocs'],\n  argTypes: {\n    size: {\n      control: 'select',\n      options: ['sm', 'md', 'lg'],\n    },\n    disabled: {control: 'boolean'},\n    checked: {control: 'boolean'},\n  },\n  args: {\n    size: 'md',\n    disabled: false,\n  },\n} satisfies Meta<typeof Checkbox>;\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nexport const Default: Story = {\n  render: (args) => (\n    <div className=\"flex flex-col gap-32\">\n      <div className=\"flex flex-col gap-16\">\n        <Header variant=\"h4\">Controlled Checkbox</Header>\n        <Code variant=\"label\" className=\"text-foreground-neutral-subtle\">\n          Use the controls below to change the checkbox state\n        </Code>\n        <Checkbox {...args} />\n      </div>\n\n      <div className=\"flex flex-col gap-32\">\n        <Header variant=\"h4\">All States</Header>\n        {(['sm', 'md', 'lg'] as const).map((size) => (\n          <div key={size} className=\"flex flex-wrap gap-16\">\n            <Header variant=\"h4\">Size: {size}</Header>\n            <div className=\"flex flex-col gap-8\">\n              <Code variant=\"label\" className=\"text-foreground-neutral-subtle\">\n                Unchecked\n              </Code>\n              <Checkbox size={size} />\n            </div>\n            <div className=\"flex flex-col gap-8\">\n              <Code variant=\"label\" className=\"text-foreground-neutral-subtle\">\n                Checked\n              </Code>\n              <Checkbox size={size} checked />\n            </div>\n            <div className=\"flex flex-col gap-8\">\n              <Code variant=\"label\" className=\"text-foreground-neutral-subtle\">\n                Indeterminate\n              </Code>\n              <Checkbox size={size} checked=\"indeterminate\" />\n            </div>\n            <div className=\"flex flex-col gap-8\">\n              <Code variant=\"label\" className=\"text-foreground-neutral-subtle\">\n                Disabled (Unchecked)\n              </Code>\n              <Checkbox size={size} disabled />\n            </div>\n            <div className=\"flex flex-col gap-8\">\n              <Code variant=\"label\" className=\"text-foreground-neutral-subtle\">\n                Disabled (Checked)\n              </Code>\n              <Checkbox size={size} checked disabled />\n            </div>\n            <div className=\"flex flex-col gap-8\">\n              <Code variant=\"label\" className=\"text-foreground-neutral-subtle\">\n                Focus\n              </Code>\n              <Checkbox size={size} className=\"focus\" />\n            </div>\n          </div>\n        ))}\n      </div>\n    </div>\n  ),\n  parameters: {\n    pseudo: {\n      focusVisible: '.focus',\n    },\n  },\n};\n\nexport const CheckboxLabelStory: StoryObj = {\n  render: () => (\n    <div className=\"flex flex-col gap-32 pb-64 pt-32 px-32 bg-background-neutral-base\">\n      <Code variant=\"label\" className=\"text-foreground-neutral-subtle\">\n        CHECKBOX LABEL - WITHOUT BORDER\n      </Code>\n      <div className=\"flex flex-col gap-16\">\n        <div className=\"flex flex-col gap-8\">\n          <Code variant=\"label\" className=\"text-foreground-neutral-subtle text-xs\">\n            Default - Unchecked\n          </Code>\n          <CheckboxLabel\n            label=\"Label\"\n            optional\n            showInfoIcon\n            description=\"The quick brown fox jumps over a lazy dog.\"\n          />\n        </div>\n        <div className=\"flex flex-col gap-8\">\n          <Code variant=\"label\" className=\"text-foreground-neutral-subtle text-xs\">\n            Hover - Unchecked\n          </Code>\n          <CheckboxLabel\n            label=\"Label\"\n            optional\n            showInfoIcon\n            description=\"The quick brown fox jumps over a lazy dog.\"\n            className=\"hover\"\n          />\n        </div>\n        <div className=\"flex flex-col gap-8\">\n          <Code variant=\"label\" className=\"text-foreground-neutral-subtle text-xs\">\n            Default - Checked\n          </Code>\n          <CheckboxLabel\n            label=\"Label\"\n            optional\n            showInfoIcon\n            description=\"The quick brown fox jumps over a lazy dog.\"\n            checked\n          />\n        </div>\n        <div className=\"flex flex-col gap-8\">\n          <Code variant=\"label\" className=\"text-foreground-neutral-subtle text-xs\">\n            Hover - Checked\n          </Code>\n          <CheckboxLabel\n            label=\"Label\"\n            optional\n            showInfoIcon\n            description=\"The quick brown fox jumps over a lazy dog.\"\n            checked\n            className=\"hover\"\n          />\n        </div>\n        <div className=\"flex flex-col gap-8\">\n          <Code variant=\"label\" className=\"text-foreground-neutral-subtle text-xs\">\n            Default - Indeterminate\n          </Code>\n          <CheckboxLabel\n            label=\"Label\"\n            optional\n            showInfoIcon\n            description=\"The quick brown fox jumps over a lazy dog.\"\n            checked=\"indeterminate\"\n          />\n        </div>\n        <div className=\"flex flex-col gap-8\">\n          <Code variant=\"label\" className=\"text-foreground-neutral-subtle text-xs\">\n            Disabled - Checked\n          </Code>\n          <CheckboxLabel\n            label=\"Label\"\n            checked\n            optional\n            showInfoIcon\n            description=\"The quick brown fox jumps over a lazy dog.\"\n            disabled\n          />\n        </div>\n        <div className=\"flex flex-col gap-8\">\n          <Code variant=\"label\" className=\"text-foreground-neutral-subtle text-xs\">\n            Disabled - Unchecked\n          </Code>\n          <CheckboxLabel\n            label=\"Label\"\n            optional\n            showInfoIcon\n            description=\"The quick brown fox jumps over a lazy dog.\"\n            disabled\n          />\n        </div>\n      </div>\n\n      <Code variant=\"label\" className=\"text-foreground-neutral-subtle mt-32\">\n        CHECKBOX LABEL - WITH BORDER\n      </Code>\n      <div className=\"flex flex-col gap-16\">\n        <div className=\"flex flex-col gap-8\">\n          <Code variant=\"label\" className=\"text-foreground-neutral-subtle text-xs\">\n            Default - Unchecked\n          </Code>\n          <CheckboxLabel\n            id=\"checkbox-border-default-unchecked\"\n            label=\"Label\"\n            optional\n            showInfoIcon\n            description=\"The quick brown fox jumps over a lazy dog.\"\n            border\n          />\n        </div>\n        <div className=\"flex flex-col gap-8\">\n          <Code variant=\"label\" className=\"text-foreground-neutral-subtle text-xs\">\n            Hover - Unchecked\n          </Code>\n          <CheckboxLabel\n            id=\"checkbox-border-hover-unchecked\"\n            label=\"Label\"\n            optional\n            showInfoIcon\n            description=\"The quick brown fox jumps over a lazy dog.\"\n            border\n            className=\"hover\"\n          />\n        </div>\n        <div className=\"flex flex-col gap-8\">\n          <Code variant=\"label\" className=\"text-foreground-neutral-subtle text-xs\">\n            Focus - Unchecked\n          </Code>\n          <CheckboxLabel\n            id=\"checkbox-border-focus-unchecked\"\n            label=\"Label\"\n            optional\n            showInfoIcon\n            description=\"The quick brown fox jumps over a lazy dog.\"\n            border\n            className=\"focus\"\n          />\n        </div>\n        <div className=\"flex flex-col gap-8\">\n          <Code variant=\"label\" className=\"text-foreground-neutral-subtle text-xs\">\n            Default - Checked\n          </Code>\n          <CheckboxLabel\n            id=\"checkbox-border-default-checked\"\n            label=\"Label\"\n            optional\n            showInfoIcon\n            description=\"The quick brown fox jumps over a lazy dog.\"\n            checked\n            border\n          />\n        </div>\n        <div className=\"flex flex-col gap-8\">\n          <Code variant=\"label\" className=\"text-foreground-neutral-subtle text-xs\">\n            Hover - Checked\n          </Code>\n          <CheckboxLabel\n            id=\"checkbox-border-hover-checked\"\n            label=\"Label\"\n            optional\n            showInfoIcon\n            description=\"The quick brown fox jumps over a lazy dog.\"\n            checked\n            border\n            className=\"hover\"\n          />\n        </div>\n        <div className=\"flex flex-col gap-8\">\n          <Code variant=\"label\" className=\"text-foreground-neutral-subtle text-xs\">\n            Focus - Checked\n          </Code>\n          <CheckboxLabel\n            id=\"checkbox-border-focus-checked\"\n            label=\"Label\"\n            optional\n            showInfoIcon\n            description=\"The quick brown fox jumps over a lazy dog.\"\n            checked\n            border\n            className=\"focus\"\n          />\n        </div>\n        <div className=\"flex flex-col gap-8\">\n          <Code variant=\"label\" className=\"text-foreground-neutral-subtle text-xs\">\n            Default - Indeterminate\n          </Code>\n          <CheckboxLabel\n            id=\"checkbox-border-default-indeterminate\"\n            label=\"Label\"\n            optional\n            showInfoIcon\n            description=\"The quick brown fox jumps over a lazy dog.\"\n            checked=\"indeterminate\"\n            border\n          />\n        </div>\n        <div className=\"flex flex-col gap-8\">\n          <Code variant=\"label\" className=\"text-foreground-neutral-subtle text-xs\">\n            Disabled - Unchecked\n          </Code>\n          <CheckboxLabel\n            id=\"checkbox-border-disabled-unchecked\"\n            label=\"Label\"\n            optional\n            showInfoIcon\n            description=\"The quick brown fox jumps over a lazy dog.\"\n            disabled\n            border\n          />\n        </div>\n        <div className=\"flex flex-col gap-8\">\n          <Code variant=\"label\" className=\"text-foreground-neutral-subtle text-xs\">\n            Disabled - Checked\n          </Code>\n          <CheckboxLabel\n            id=\"checkbox-border-disabled-checked\"\n            label=\"Label\"\n            optional\n            showInfoIcon\n            description=\"The quick brown fox jumps over a lazy dog.\"\n            checked\n            disabled\n            border\n          />\n        </div>\n        <div className=\"flex flex-col gap-8\">\n          <Code variant=\"label\" className=\"text-foreground-neutral-subtle text-xs\">\n            Disabled - Indeterminate\n          </Code>\n          <CheckboxLabel\n            id=\"checkbox-border-disabled-indeterminate\"\n            label=\"Label\"\n            optional\n            showInfoIcon\n            description=\"The quick brown fox jumps over a lazy dog.\"\n            checked=\"indeterminate\"\n            disabled\n            border\n          />\n        </div>\n      </div>\n    </div>\n  ),\n};\n\nCheckboxLabelStory.parameters = {\n  pseudo: {\n    hover: '.hover',\n    focusVisible: '.focus',\n  },\n};\n\nexport const CheckboxLinksStory: StoryObj = {\n  args: {\n    disabled: true,\n  },\n\n  render: () => (\n    <div className=\"flex flex-col gap-32 pb-64 pt-32 px-32 bg-background-neutral-base\">\n      <Code variant=\"label\" className=\"text-foreground-neutral-subtle\">\n        CHECKBOX LINKS\n      </Code>\n      <div className=\"flex flex-col gap-16\">\n        <CheckboxLinks\n          id=\"checkbox-links-default\"\n          label=\"Accept policies\"\n          links={[\n            {label: 'Terms of use', href: '#'},\n            {label: 'Privacy Policy', href: '#'},\n          ]}\n        />\n        <CheckboxLinks\n          id=\"checkbox-links-checked\"\n          label=\"Accept policies\"\n          links={[\n            {label: 'Terms of use', href: '#'},\n            {label: 'Privacy Policy', href: '#'},\n          ]}\n          checked\n        />\n      </div>\n    </div>\n  ),\n};\n"],"names":["Code","Header","Checkbox","CheckboxLabel","CheckboxLinks","meta","title","component","tags","argTypes","size","control","options","disabled","checked","args","Default","render","div","className","variant","map","parameters","pseudo","focusVisible","CheckboxLabelStory","label","optional","showInfoIcon","description","id","border","hover","CheckboxLinksStory","links","href"],"mappings":";AACA,SAAQA,IAAI,EAAEC,MAAM,QAAO,wBAAwB;AACnD,SAAQC,QAAQ,EAAEC,aAAa,EAAEC,aAAa,QAAO,IAAI;AAEzD,MAAMC,OAAO;IACXC,OAAO;IACPC,WAAWL;IACXM,MAAM;QAAC;KAAW;IAClBC,UAAU;QACRC,MAAM;YACJC,SAAS;YACTC,SAAS;gBAAC;gBAAM;gBAAM;aAAK;QAC7B;QACAC,UAAU;YAACF,SAAS;QAAS;QAC7BG,SAAS;YAACH,SAAS;QAAS;IAC9B;IACAI,MAAM;QACJL,MAAM;QACNG,UAAU;IACZ;AACF;AAEA,eAAeR,KAAK;AAIpB,OAAO,MAAMW,UAAiB;IAC5BC,QAAQ,CAACF,qBACP,MAACG;YAAIC,WAAU;;8BACb,MAACD;oBAAIC,WAAU;;sCACb,KAAClB;4BAAOmB,SAAQ;sCAAK;;sCACrB,KAACpB;4BAAKoB,SAAQ;4BAAQD,WAAU;sCAAiC;;sCAGjE,KAACjB;4BAAU,GAAGa,IAAI;;;;8BAGpB,MAACG;oBAAIC,WAAU;;sCACb,KAAClB;4BAAOmB,SAAQ;sCAAK;;wBACnB;4BAAC;4BAAM;4BAAM;yBAAK,CAAWC,GAAG,CAAC,CAACX,qBAClC,MAACQ;gCAAeC,WAAU;;kDACxB,MAAClB;wCAAOmB,SAAQ;;4CAAK;4CAAOV;;;kDAC5B,MAACQ;wCAAIC,WAAU;;0DACb,KAACnB;gDAAKoB,SAAQ;gDAAQD,WAAU;0DAAiC;;0DAGjE,KAACjB;gDAASQ,MAAMA;;;;kDAElB,MAACQ;wCAAIC,WAAU;;0DACb,KAACnB;gDAAKoB,SAAQ;gDAAQD,WAAU;0DAAiC;;0DAGjE,KAACjB;gDAASQ,MAAMA;gDAAMI,OAAO;;;;kDAE/B,MAACI;wCAAIC,WAAU;;0DACb,KAACnB;gDAAKoB,SAAQ;gDAAQD,WAAU;0DAAiC;;0DAGjE,KAACjB;gDAASQ,MAAMA;gDAAMI,SAAQ;;;;kDAEhC,MAACI;wCAAIC,WAAU;;0DACb,KAACnB;gDAAKoB,SAAQ;gDAAQD,WAAU;0DAAiC;;0DAGjE,KAACjB;gDAASQ,MAAMA;gDAAMG,QAAQ;;;;kDAEhC,MAACK;wCAAIC,WAAU;;0DACb,KAACnB;gDAAKoB,SAAQ;gDAAQD,WAAU;0DAAiC;;0DAGjE,KAACjB;gDAASQ,MAAMA;gDAAMI,OAAO;gDAACD,QAAQ;;;;kDAExC,MAACK;wCAAIC,WAAU;;0DACb,KAACnB;gDAAKoB,SAAQ;gDAAQD,WAAU;0DAAiC;;0DAGjE,KAACjB;gDAASQ,MAAMA;gDAAMS,WAAU;;;;;+BApC1BT;;;;;IA2ClBY,YAAY;QACVC,QAAQ;YACNC,cAAc;QAChB;IACF;AACF,EAAE;AAEF,OAAO,MAAMC,qBAA+B;IAC1CR,QAAQ,kBACN,MAACC;YAAIC,WAAU;;8BACb,KAACnB;oBAAKoB,SAAQ;oBAAQD,WAAU;8BAAiC;;8BAGjE,MAACD;oBAAIC,WAAU;;sCACb,MAACD;4BAAIC,WAAU;;8CACb,KAACnB;oCAAKoB,SAAQ;oCAAQD,WAAU;8CAAyC;;8CAGzE,KAAChB;oCACCuB,OAAM;oCACNC,QAAQ;oCACRC,YAAY;oCACZC,aAAY;;;;sCAGhB,MAACX;4BAAIC,WAAU;;8CACb,KAACnB;oCAAKoB,SAAQ;oCAAQD,WAAU;8CAAyC;;8CAGzE,KAAChB;oCACCuB,OAAM;oCACNC,QAAQ;oCACRC,YAAY;oCACZC,aAAY;oCACZV,WAAU;;;;sCAGd,MAACD;4BAAIC,WAAU;;8CACb,KAACnB;oCAAKoB,SAAQ;oCAAQD,WAAU;8CAAyC;;8CAGzE,KAAChB;oCACCuB,OAAM;oCACNC,QAAQ;oCACRC,YAAY;oCACZC,aAAY;oCACZf,OAAO;;;;sCAGX,MAACI;4BAAIC,WAAU;;8CACb,KAACnB;oCAAKoB,SAAQ;oCAAQD,WAAU;8CAAyC;;8CAGzE,KAAChB;oCACCuB,OAAM;oCACNC,QAAQ;oCACRC,YAAY;oCACZC,aAAY;oCACZf,OAAO;oCACPK,WAAU;;;;sCAGd,MAACD;4BAAIC,WAAU;;8CACb,KAACnB;oCAAKoB,SAAQ;oCAAQD,WAAU;8CAAyC;;8CAGzE,KAAChB;oCACCuB,OAAM;oCACNC,QAAQ;oCACRC,YAAY;oCACZC,aAAY;oCACZf,SAAQ;;;;sCAGZ,MAACI;4BAAIC,WAAU;;8CACb,KAACnB;oCAAKoB,SAAQ;oCAAQD,WAAU;8CAAyC;;8CAGzE,KAAChB;oCACCuB,OAAM;oCACNZ,OAAO;oCACPa,QAAQ;oCACRC,YAAY;oCACZC,aAAY;oCACZhB,QAAQ;;;;sCAGZ,MAACK;4BAAIC,WAAU;;8CACb,KAACnB;oCAAKoB,SAAQ;oCAAQD,WAAU;8CAAyC;;8CAGzE,KAAChB;oCACCuB,OAAM;oCACNC,QAAQ;oCACRC,YAAY;oCACZC,aAAY;oCACZhB,QAAQ;;;;;;8BAKd,KAACb;oBAAKoB,SAAQ;oBAAQD,WAAU;8BAAuC;;8BAGvE,MAACD;oBAAIC,WAAU;;sCACb,MAACD;4BAAIC,WAAU;;8CACb,KAACnB;oCAAKoB,SAAQ;oCAAQD,WAAU;8CAAyC;;8CAGzE,KAAChB;oCACC2B,IAAG;oCACHJ,OAAM;oCACNC,QAAQ;oCACRC,YAAY;oCACZC,aAAY;oCACZE,MAAM;;;;sCAGV,MAACb;4BAAIC,WAAU;;8CACb,KAACnB;oCAAKoB,SAAQ;oCAAQD,WAAU;8CAAyC;;8CAGzE,KAAChB;oCACC2B,IAAG;oCACHJ,OAAM;oCACNC,QAAQ;oCACRC,YAAY;oCACZC,aAAY;oCACZE,MAAM;oCACNZ,WAAU;;;;sCAGd,MAACD;4BAAIC,WAAU;;8CACb,KAACnB;oCAAKoB,SAAQ;oCAAQD,WAAU;8CAAyC;;8CAGzE,KAAChB;oCACC2B,IAAG;oCACHJ,OAAM;oCACNC,QAAQ;oCACRC,YAAY;oCACZC,aAAY;oCACZE,MAAM;oCACNZ,WAAU;;;;sCAGd,MAACD;4BAAIC,WAAU;;8CACb,KAACnB;oCAAKoB,SAAQ;oCAAQD,WAAU;8CAAyC;;8CAGzE,KAAChB;oCACC2B,IAAG;oCACHJ,OAAM;oCACNC,QAAQ;oCACRC,YAAY;oCACZC,aAAY;oCACZf,OAAO;oCACPiB,MAAM;;;;sCAGV,MAACb;4BAAIC,WAAU;;8CACb,KAACnB;oCAAKoB,SAAQ;oCAAQD,WAAU;8CAAyC;;8CAGzE,KAAChB;oCACC2B,IAAG;oCACHJ,OAAM;oCACNC,QAAQ;oCACRC,YAAY;oCACZC,aAAY;oCACZf,OAAO;oCACPiB,MAAM;oCACNZ,WAAU;;;;sCAGd,MAACD;4BAAIC,WAAU;;8CACb,KAACnB;oCAAKoB,SAAQ;oCAAQD,WAAU;8CAAyC;;8CAGzE,KAAChB;oCACC2B,IAAG;oCACHJ,OAAM;oCACNC,QAAQ;oCACRC,YAAY;oCACZC,aAAY;oCACZf,OAAO;oCACPiB,MAAM;oCACNZ,WAAU;;;;sCAGd,MAACD;4BAAIC,WAAU;;8CACb,KAACnB;oCAAKoB,SAAQ;oCAAQD,WAAU;8CAAyC;;8CAGzE,KAAChB;oCACC2B,IAAG;oCACHJ,OAAM;oCACNC,QAAQ;oCACRC,YAAY;oCACZC,aAAY;oCACZf,SAAQ;oCACRiB,MAAM;;;;sCAGV,MAACb;4BAAIC,WAAU;;8CACb,KAACnB;oCAAKoB,SAAQ;oCAAQD,WAAU;8CAAyC;;8CAGzE,KAAChB;oCACC2B,IAAG;oCACHJ,OAAM;oCACNC,QAAQ;oCACRC,YAAY;oCACZC,aAAY;oCACZhB,QAAQ;oCACRkB,MAAM;;;;sCAGV,MAACb;4BAAIC,WAAU;;8CACb,KAACnB;oCAAKoB,SAAQ;oCAAQD,WAAU;8CAAyC;;8CAGzE,KAAChB;oCACC2B,IAAG;oCACHJ,OAAM;oCACNC,QAAQ;oCACRC,YAAY;oCACZC,aAAY;oCACZf,OAAO;oCACPD,QAAQ;oCACRkB,MAAM;;;;sCAGV,MAACb;4BAAIC,WAAU;;8CACb,KAACnB;oCAAKoB,SAAQ;oCAAQD,WAAU;8CAAyC;;8CAGzE,KAAChB;oCACC2B,IAAG;oCACHJ,OAAM;oCACNC,QAAQ;oCACRC,YAAY;oCACZC,aAAY;oCACZf,SAAQ;oCACRD,QAAQ;oCACRkB,MAAM;;;;;;;;AAMlB,EAAE;AAEFN,mBAAmBH,UAAU,GAAG;IAC9BC,QAAQ;QACNS,OAAO;QACPR,cAAc;IAChB;AACF;AAEA,OAAO,MAAMS,qBAA+B;IAC1ClB,MAAM;QACJF,UAAU;IACZ;IAEAI,QAAQ,kBACN,MAACC;YAAIC,WAAU;;8BACb,KAACnB;oBAAKoB,SAAQ;oBAAQD,WAAU;8BAAiC;;8BAGjE,MAACD;oBAAIC,WAAU;;sCACb,KAACf;4BACC0B,IAAG;4BACHJ,OAAM;4BACNQ,OAAO;gCACL;oCAACR,OAAO;oCAAgBS,MAAM;gCAAG;gCACjC;oCAACT,OAAO;oCAAkBS,MAAM;gCAAG;6BACpC;;sCAEH,KAAC/B;4BACC0B,IAAG;4BACHJ,OAAM;4BACNQ,OAAO;gCACL;oCAACR,OAAO;oCAAgBS,MAAM;gCAAG;gCACjC;oCAACT,OAAO;oCAAkBS,MAAM;gCAAG;6BACpC;4BACDrB,OAAO;;;;;;AAKjB,EAAE"}
+{"version":3,"sources":["../../../src/components/checkbox/checkbox.stories.tsx"],"sourcesContent":["import type {Meta, StoryObj} from '@storybook/react';\nimport {Code, Header} from 'components/typography';\nimport {Checkbox, CheckboxLabel, CheckboxLinks} from '.';\n\nconst meta = {\n  title: 'Components/Checkbox',\n  component: Checkbox,\n  tags: ['autodocs'],\n  argTypes: {\n    size: {\n      control: 'select',\n      options: ['sm', 'md', 'lg'],\n    },\n    disabled: {control: 'boolean'},\n    checked: {control: 'boolean'},\n  },\n  args: {\n    size: 'md',\n    disabled: false,\n  },\n} satisfies Meta<typeof Checkbox>;\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nexport const Default: Story = {\n  render: (args) => (\n    <div className=\"flex flex-col gap-32\">\n      <div className=\"flex flex-col gap-16\">\n        <Header variant=\"h4\">Controlled Checkbox</Header>\n        <Code variant=\"label\" className=\"text-foreground-neutral-subtle\">\n          Use the controls below to change the checkbox state\n        </Code>\n        <Checkbox {...args} />\n      </div>\n\n      <div className=\"flex flex-col gap-32\">\n        <Header variant=\"h4\">All States</Header>\n        {(['sm', 'md', 'lg'] as const).map((size) => (\n          <div key={size} className=\"flex flex-wrap gap-16\">\n            <Header variant=\"h4\">Size: {size}</Header>\n            <div className=\"flex flex-col gap-8\">\n              <Code variant=\"label\" className=\"text-foreground-neutral-subtle\">\n                Unchecked\n              </Code>\n              <Checkbox size={size} />\n            </div>\n            <div className=\"flex flex-col gap-8\">\n              <Code variant=\"label\" className=\"text-foreground-neutral-subtle\">\n                Checked\n              </Code>\n              <Checkbox size={size} checked />\n            </div>\n            <div className=\"flex flex-col gap-8\">\n              <Code variant=\"label\" className=\"text-foreground-neutral-subtle\">\n                Indeterminate\n              </Code>\n              <Checkbox size={size} checked=\"indeterminate\" />\n            </div>\n            <div className=\"flex flex-col gap-8\">\n              <Code variant=\"label\" className=\"text-foreground-neutral-subtle\">\n                Disabled (Unchecked)\n              </Code>\n              <Checkbox size={size} disabled />\n            </div>\n            <div className=\"flex flex-col gap-8\">\n              <Code variant=\"label\" className=\"text-foreground-neutral-subtle\">\n                Disabled (Checked)\n              </Code>\n              <Checkbox size={size} checked disabled />\n            </div>\n            <div className=\"flex flex-col gap-8\">\n              <Code variant=\"label\" className=\"text-foreground-neutral-subtle\">\n                Focus\n              </Code>\n              <Checkbox size={size} className=\"focus\" />\n            </div>\n          </div>\n        ))}\n      </div>\n    </div>\n  ),\n  parameters: {\n    pseudo: {\n      focusVisible: '.focus',\n    },\n  },\n};\n\nexport const CheckboxLabelStory: StoryObj = {\n  render: () => (\n    <div className=\"flex flex-col gap-32 pb-64 pt-32 px-32 bg-background-neutral-base\">\n      <Code variant=\"label\" className=\"text-foreground-neutral-subtle\">\n        CHECKBOX LABEL - WITHOUT BORDER\n      </Code>\n      <div className=\"flex flex-col gap-16\">\n        <div className=\"flex flex-col gap-8\">\n          <Code variant=\"label\" className=\"text-foreground-neutral-subtle text-xs\">\n            Default - Unchecked\n          </Code>\n          <CheckboxLabel\n            label=\"Label\"\n            optional\n            showInfoIcon\n            description=\"The quick brown fox jumps over a lazy dog.\"\n          />\n        </div>\n        <div className=\"flex flex-col gap-8\">\n          <Code variant=\"label\" className=\"text-foreground-neutral-subtle text-xs\">\n            Hover - Unchecked\n          </Code>\n          <CheckboxLabel\n            label=\"Label\"\n            optional\n            showInfoIcon\n            description=\"The quick brown fox jumps over a lazy dog.\"\n            className=\"hover\"\n          />\n        </div>\n        <div className=\"flex flex-col gap-8\">\n          <Code variant=\"label\" className=\"text-foreground-neutral-subtle text-xs\">\n            Default - Checked\n          </Code>\n          <CheckboxLabel\n            label=\"Label\"\n            optional\n            showInfoIcon\n            description=\"The quick brown fox jumps over a lazy dog.\"\n            checked\n          />\n        </div>\n        <div className=\"flex flex-col gap-8\">\n          <Code variant=\"label\" className=\"text-foreground-neutral-subtle text-xs\">\n            Hover - Checked\n          </Code>\n          <CheckboxLabel\n            label=\"Label\"\n            optional\n            showInfoIcon\n            description=\"The quick brown fox jumps over a lazy dog.\"\n            checked\n            className=\"hover\"\n          />\n        </div>\n        <div className=\"flex flex-col gap-8\">\n          <Code variant=\"label\" className=\"text-foreground-neutral-subtle text-xs\">\n            Default - Indeterminate\n          </Code>\n          <CheckboxLabel\n            label=\"Label\"\n            optional\n            showInfoIcon\n            description=\"The quick brown fox jumps over a lazy dog.\"\n            checked=\"indeterminate\"\n          />\n        </div>\n        <div className=\"flex flex-col gap-8\">\n          <Code variant=\"label\" className=\"text-foreground-neutral-subtle text-xs\">\n            Disabled - Checked\n          </Code>\n          <CheckboxLabel\n            label=\"Label\"\n            checked\n            optional\n            showInfoIcon\n            description=\"The quick brown fox jumps over a lazy dog.\"\n            disabled\n          />\n        </div>\n        <div className=\"flex flex-col gap-8\">\n          <Code variant=\"label\" className=\"text-foreground-neutral-subtle text-xs\">\n            Disabled - Unchecked\n          </Code>\n          <CheckboxLabel\n            label=\"Label\"\n            optional\n            showInfoIcon\n            description=\"The quick brown fox jumps over a lazy dog.\"\n            disabled\n          />\n        </div>\n      </div>\n\n      <Code variant=\"label\" className=\"text-foreground-neutral-subtle mt-32\">\n        CHECKBOX LABEL - WITH BORDER\n      </Code>\n      <div className=\"flex flex-col gap-16\">\n        <div className=\"flex flex-col gap-8\">\n          <Code variant=\"label\" className=\"text-foreground-neutral-subtle text-xs\">\n            Default - Unchecked\n          </Code>\n          <CheckboxLabel\n            id=\"checkbox-border-default-unchecked\"\n            label=\"Label\"\n            optional\n            showInfoIcon\n            description=\"The quick brown fox jumps over a lazy dog.\"\n            border\n          />\n        </div>\n        <div className=\"flex flex-col gap-8\">\n          <Code variant=\"label\" className=\"text-foreground-neutral-subtle text-xs\">\n            Hover - Unchecked\n          </Code>\n          <CheckboxLabel\n            id=\"checkbox-border-hover-unchecked\"\n            label=\"Label\"\n            optional\n            showInfoIcon\n            description=\"The quick brown fox jumps over a lazy dog.\"\n            border\n            className=\"hover\"\n          />\n        </div>\n        <div className=\"flex flex-col gap-8\">\n          <Code variant=\"label\" className=\"text-foreground-neutral-subtle text-xs\">\n            Focus - Unchecked\n          </Code>\n          <CheckboxLabel\n            id=\"checkbox-border-focus-unchecked\"\n            label=\"Label\"\n            optional\n            showInfoIcon\n            description=\"The quick brown fox jumps over a lazy dog.\"\n            border\n            className=\"focus\"\n          />\n        </div>\n        <div className=\"flex flex-col gap-8\">\n          <Code variant=\"label\" className=\"text-foreground-neutral-subtle text-xs\">\n            Default - Checked\n          </Code>\n          <CheckboxLabel\n            id=\"checkbox-border-default-checked\"\n            label=\"Label\"\n            optional\n            showInfoIcon\n            description=\"The quick brown fox jumps over a lazy dog.\"\n            checked\n            border\n          />\n        </div>\n        <div className=\"flex flex-col gap-8\">\n          <Code variant=\"label\" className=\"text-foreground-neutral-subtle text-xs\">\n            Hover - Checked\n          </Code>\n          <CheckboxLabel\n            id=\"checkbox-border-hover-checked\"\n            label=\"Label\"\n            optional\n            showInfoIcon\n            description=\"The quick brown fox jumps over a lazy dog.\"\n            checked\n            border\n            className=\"hover\"\n          />\n        </div>\n        <div className=\"flex flex-col gap-8\">\n          <Code variant=\"label\" className=\"text-foreground-neutral-subtle text-xs\">\n            Focus - Checked\n          </Code>\n          <CheckboxLabel\n            id=\"checkbox-border-focus-checked\"\n            label=\"Label\"\n            optional\n            showInfoIcon\n            description=\"The quick brown fox jumps over a lazy dog.\"\n            checked\n            border\n            className=\"focus\"\n          />\n        </div>\n        <div className=\"flex flex-col gap-8\">\n          <Code variant=\"label\" className=\"text-foreground-neutral-subtle text-xs\">\n            Default - Indeterminate\n          </Code>\n          <CheckboxLabel\n            id=\"checkbox-border-default-indeterminate\"\n            label=\"Label\"\n            optional\n            showInfoIcon\n            description=\"The quick brown fox jumps over a lazy dog.\"\n            checked=\"indeterminate\"\n            border\n          />\n        </div>\n        <div className=\"flex flex-col gap-8\">\n          <Code variant=\"label\" className=\"text-foreground-neutral-subtle text-xs\">\n            Disabled - Unchecked\n          </Code>\n          <CheckboxLabel\n            id=\"checkbox-border-disabled-unchecked\"\n            label=\"Label\"\n            optional\n            showInfoIcon\n            description=\"The quick brown fox jumps over a lazy dog.\"\n            disabled\n            border\n          />\n        </div>\n        <div className=\"flex flex-col gap-8\">\n          <Code variant=\"label\" className=\"text-foreground-neutral-subtle text-xs\">\n            Disabled - Checked\n          </Code>\n          <CheckboxLabel\n            id=\"checkbox-border-disabled-checked\"\n            label=\"Label\"\n            optional\n            showInfoIcon\n            description=\"The quick brown fox jumps over a lazy dog.\"\n            checked\n            disabled\n            border\n          />\n        </div>\n        <div className=\"flex flex-col gap-8\">\n          <Code variant=\"label\" className=\"text-foreground-neutral-subtle text-xs\">\n            Disabled - Indeterminate\n          </Code>\n          <CheckboxLabel\n            id=\"checkbox-border-disabled-indeterminate\"\n            label=\"Label\"\n            optional\n            showInfoIcon\n            description=\"The quick brown fox jumps over a lazy dog.\"\n            checked=\"indeterminate\"\n            disabled\n            border\n          />\n        </div>\n      </div>\n    </div>\n  ),\n};\n\nCheckboxLabelStory.parameters = {\n  pseudo: {\n    hover: '.hover',\n    focusVisible: '.focus',\n  },\n};\n\nexport const CheckboxLinksStory: StoryObj = {\n  args: {\n    disabled: true,\n  },\n\n  render: () => (\n    <div className=\"flex flex-col gap-32 pb-64 pt-32 px-32 bg-background-neutral-base\">\n      <Code variant=\"label\" className=\"text-foreground-neutral-subtle\">\n        CHECKBOX LINKS\n      </Code>\n      <div className=\"flex flex-col gap-16\">\n        <CheckboxLinks\n          id=\"checkbox-links-default\"\n          label=\"Accept policies\"\n          links={[\n            {label: 'Terms of use', href: 'https://www.shipfox.io/legal/terms-of-service'},\n            {\n              label: 'Privacy Policy',\n              onClick: () =>\n                window.open(\n                  'https://www.shipfox.io/legal/privacy-policy',\n                  '_blank',\n                  'noopener,noreferrer',\n                ),\n            },\n          ]}\n        />\n        <CheckboxLinks\n          id=\"checkbox-links-checked\"\n          label=\"Accept policies\"\n          links={[\n            {label: 'Terms of use', href: 'https://www.shipfox.io/legal/terms-of-service'},\n            {\n              label: 'Privacy Policy',\n              onClick: () =>\n                window.open(\n                  'https://www.shipfox.io/legal/privacy-policy',\n                  '_blank',\n                  'noopener,noreferrer',\n                ),\n            },\n          ]}\n          checked\n        />\n      </div>\n    </div>\n  ),\n};\n"],"names":["Code","Header","Checkbox","CheckboxLabel","CheckboxLinks","meta","title","component","tags","argTypes","size","control","options","disabled","checked","args","Default","render","div","className","variant","map","parameters","pseudo","focusVisible","CheckboxLabelStory","label","optional","showInfoIcon","description","id","border","hover","CheckboxLinksStory","links","href","onClick","window","open"],"mappings":"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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shipfox/react-ui",
   "license": "MIT",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "private": false,
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/components/alert/alert.stories.tsx

@@ -1,5 +1,12 @@
+import {zodResolver} from '@hookform/resolvers/zod';
 import type {Meta, StoryObj} from '@storybook/react';
+import {Button} from 'components/button';
+import {Form, FormControl, FormField, FormItem, FormLabel, FormMessage} from 'components/form';
+import {Input} from 'components/input';
 import {Header} from 'components/typography';
+import {useState} from 'react';
+import {useForm} from 'react-hook-form';
+import {z} from 'zod';
 import {
   Alert,
   AlertAction,
@@ -43,12 +50,106 @@ export const Default: Story = {
             <AlertAction>View</AlertAction>
           </AlertActions>
         </AlertContent>
-        <AlertClose variant={args.variant} />
+        <AlertClose />
       </Alert>
     );
   },
 };
 
+const validationFormSchema = z.object({
+  email: z.string().email('Please enter a valid email address'),
+  password: z.string().min(8, 'Password must be at least 8 characters'),
+});
+
+type ValidationFormValues = z.infer<typeof validationFormSchema>;
+
+function ErrorValidationToasterExample() {
+  const [showError, setShowError] = useState(false);
+  const form = useForm<ValidationFormValues>({
+    resolver: zodResolver(validationFormSchema),
+    defaultValues: {
+      email: '',
+      password: '',
+    },
+  });
+
+  function onSubmit(data: ValidationFormValues) {
+    // biome-ignore lint/suspicious/noConsole: <we need to log the data for the story>
+    console.log('Form submitted:', data);
+    setShowError(false);
+  }
+
+  function onError() {
+    setShowError(true);
+  }
+
+  const errors = form.formState.errors;
+  const errorCount = Object.keys(errors).length;
+  const errorMessage =
+    errorCount > 0
+      ? `Please fix ${errorCount} error${errorCount > 1 ? 's' : ''} before submitting.`
+      : '';
+
+  return (
+    <div className="flex flex-col gap-16 w-full max-w-md">
+      {errorCount > 0 && (
+        <Alert variant="error" open={showError} autoClose={5000} onOpenChange={setShowError}>
+          <AlertContent>
+            <AlertTitle>Validation Error</AlertTitle>
+            <AlertDescription>{errorMessage}</AlertDescription>
+            <AlertActions>
+              <AlertAction
+                onClick={() => {
+                  form.clearErrors();
+                  setShowError(false);
+                }}
+              >
+                Dismiss
+              </AlertAction>
+            </AlertActions>
+          </AlertContent>
+          <AlertClose />
+        </Alert>
+      )}
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit, onError)} className="space-y-8">
+          <FormField
+            control={form.control}
+            name="email"
+            render={({field}) => (
+              <FormItem>
+                <FormLabel>Email</FormLabel>
+                <FormControl>
+                  <Input type="email" placeholder="email@example.com" {...field} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="password"
+            render={({field}) => (
+              <FormItem>
+                <FormLabel>Password</FormLabel>
+                <FormControl>
+                  <Input type="password" placeholder="Enter password" {...field} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <Button type="submit">Submit</Button>
+        </form>
+      </Form>
+    </div>
+  );
+}
+
+export const WithFormValidation: Story = {
+  render: () => <ErrorValidationToasterExample />,
+};
+
 export const DesignMock: Story = {
   render: () => {
     return (
@@ -67,7 +168,7 @@ export const DesignMock: Story = {
                   <AlertAction>View</AlertAction>
                 </AlertActions>
               </AlertContent>
-              <AlertClose variant={variant} />
+              <AlertClose />
             </Alert>
           ))}
         </div>

package/src/components/alert/alert.tsx

@@ -1,6 +1,16 @@
 import {cva, type VariantProps} from 'class-variance-authority';
 import {Icon} from 'components/icon';
-import type {ComponentProps} from 'react';
+import {AnimatePresence, motion, type Transition} from 'framer-motion';
+import {
+  type ComponentProps,
+  createContext,
+  type MouseEvent,
+  useCallback,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
 import {cn} from 'utils/cn';
 
 const alertVariants = cva(
@@ -51,21 +61,137 @@ const closeIconVariants = cva('w-16 h-16', {
   },
 });
 
-type AlertProps = ComponentProps<'div'> & VariantProps<typeof alertVariants>;
+const alertDefaultTransition: Transition = {
+  duration: 0.2,
+  ease: 'easeInOut',
+};
+
+type AlertContextValue = {
+  isOpen: boolean;
+  onClose: () => void;
+  variant: VariantProps<typeof alertVariants>['variant'];
+};
+
+const AlertContext = createContext<AlertContextValue | null>(null);
+
+function useAlertContext() {
+  const context = useContext(AlertContext);
+  if (!context) {
+    throw new Error('Alert components must be used within an Alert component');
+  }
+  return context;
+}
+
+type AlertProps = ComponentProps<'div'> &
+  VariantProps<typeof alertVariants> & {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    animated?: boolean;
+    transition?: Transition;
+    autoClose?: number;
+  };
+
+function Alert({
+  className,
+  variant = 'default',
+  children,
+  open: controlledOpen,
+  defaultOpen = true,
+  onOpenChange,
+  animated = true,
+  transition = alertDefaultTransition,
+  autoClose,
+  ...props
+}: AlertProps) {
+  const [internalOpen, setInternalOpen] = useState(defaultOpen);
+  const isOpen = controlledOpen !== undefined ? controlledOpen : internalOpen;
+
+  const handleClose = useCallback(() => {
+    if (controlledOpen === undefined) {
+      setInternalOpen(false);
+    }
+    onOpenChange?.(false);
+  }, [controlledOpen, onOpenChange]);
+
+  const handleCloseRef = useRef(handleClose);
+  useEffect(() => {
+    handleCloseRef.current = handleClose;
+  }, [handleClose]);
+
+  useEffect(() => {
+    if (autoClose && isOpen && autoClose > 0) {
+      const timeoutId = setTimeout(() => {
+        handleCloseRef.current();
+      }, autoClose);
+
+      return () => {
+        clearTimeout(timeoutId);
+      };
+    }
+  }, [autoClose, isOpen]);
+
+  const contextValue: AlertContextValue = {
+    isOpen,
+    onClose: handleClose,
+    variant,
+  };
+
+  if (!animated) {
+    if (!isOpen) {
+      return null;
+    }
+
+    return (
+      <AlertContext.Provider value={contextValue}>
+        <div className="w-full flex items-start gap-4">
+          <div
+            data-slot="alert-line"
+            className={cn(alertLineVariants({variant}))}
+            aria-hidden="true"
+          />
+          <div
+            data-slot="alert"
+            role="alert"
+            className={cn(alertVariants({variant}), className)}
+            {...props}
+          >
+            {children}
+          </div>
+        </div>
+      </AlertContext.Provider>
+    );
+  }
 
-function Alert({className, variant, children, ...props}: AlertProps) {
   return (
-    <div className="w-full flex items-start gap-4">
-      <div data-slot="alert-line" className={cn(alertLineVariants({variant}))} aria-hidden="true" />
-      <div
-        data-slot="alert"
-        role="alert"
-        className={cn(alertVariants({variant}), className)}
-        {...props}
-      >
-        {children}
-      </div>
-    </div>
+    <AnimatePresence>
+      {isOpen && (
+        <motion.div
+          key="alert"
+          className="w-full flex items-start gap-4"
+          initial={{opacity: 0}}
+          animate={{opacity: 1}}
+          exit={{opacity: 0}}
+          transition={transition}
+        >
+          <AlertContext.Provider value={contextValue}>
+            <div
+              data-slot="alert-line"
+              className={cn(alertLineVariants({variant}))}
+              aria-hidden="true"
+            />
+            <div
+              data-slot="alert"
+              role="alert"
+              className={cn(alertVariants({variant}), className)}
+              {...props}
+            >
+              {children}
+            </div>
+          </AlertContext.Provider>
+        </motion.div>
+      )}
+    </AnimatePresence>
   );
 }
 
@@ -122,9 +248,18 @@ function AlertAction({className, ...props}: ComponentProps<'button'>) {
 
 function AlertClose({
   className,
-  variant = 'default',
+  variant: variantProp,
+  onClick,
   ...props
 }: ComponentProps<'button'> & VariantProps<typeof closeIconVariants>) {
+  const {onClose, variant: contextVariant} = useAlertContext();
+  const variant = variantProp ?? contextVariant ?? 'default';
+
+  const handleClick = (e: MouseEvent<HTMLButtonElement>) => {
+    onClose();
+    onClick?.(e);
+  };
+
   return (
     <button
       data-slot="alert-close"
@@ -134,6 +269,7 @@ function AlertClose({
         className,
       )}
       aria-label="Close"
+      onClick={handleClick}
       {...props}
     >
       <Icon name="close" className={cn(closeIconVariants({variant}))} />
@@ -141,4 +277,15 @@ function AlertClose({
   );
 }
 
-export {Alert, AlertContent, AlertTitle, AlertDescription, AlertActions, AlertAction, AlertClose};
+export {
+  Alert,
+  AlertContent,
+  AlertTitle,
+  AlertDescription,
+  AlertActions,
+  AlertAction,
+  AlertClose,
+  alertDefaultTransition,
+};
+
+export type {AlertProps};

package/src/components/button/button-link.tsx

@@ -5,7 +5,7 @@ import type {ComponentProps} from 'react';
 import {cn} from 'utils/cn';
 
 export const buttonLinkVariants = cva(
-  'inline-flex items-center justify-center gap-4 whitespace-nowrap transition-colors disabled:pointer-events-none outline-none font-medium',
+  'inline-flex items-center justify-center gap-4 whitespace-nowrap transition-colors cursor-pointer disabled:pointer-events-none outline-none font-medium',
   {
     variants: {
       variant: {

package/src/components/button/button.tsx

@@ -5,7 +5,7 @@ import type {ComponentProps} from 'react';
 import {cn} from 'utils/cn';
 
 export const buttonVariants = cva(
-  'rounded-6 inline-flex items-center justify-center whitespace-nowrap transition-colors disabled:pointer-events-none shrink-0 outline-none',
+  'rounded-6 inline-flex items-center justify-center whitespace-nowrap transition-colors cursor-pointer disabled:pointer-events-none shrink-0 outline-none',
   {
     variants: {
       variant: {
@@ -76,6 +76,7 @@ export function Button({
       disabled={disabled || isLoading}
       aria-busy={isLoading}
       aria-live={isLoading ? 'polite' : undefined}
+      {...(asChild ? {'aria-disabled': disabled || isLoading} : {})}
       {...props}
     >
       {isLoading ? (

package/src/components/button/icon-button.tsx

@@ -5,7 +5,7 @@ import type {ComponentProps} from 'react';
 import {cn} from 'utils/cn';
 
 export const iconButtonVariants = cva(
-  'inline-flex items-center justify-center whitespace-nowrap transition-colors disabled:pointer-events-none shrink-0 outline-none',
+  'inline-flex items-center justify-center whitespace-nowrap transition-colors cursor-pointer disabled:pointer-events-none shrink-0 outline-none',
   {
     variants: {
       variant: {
@@ -80,6 +80,7 @@ export function IconButton({
       disabled={disabled || isLoading}
       aria-busy={isLoading}
       aria-live={isLoading ? 'polite' : undefined}
+      {...(asChild ? {'aria-disabled': disabled || isLoading} : {})}
       {...props}
     >
       {isLoading ? (