@cloudflare/kumo 1.0.0 → 1.2.0

package/dist/{dialog-B1TaN0oR.js.map → dialog-BxXPA2vI.js.map}

@@ -1 +1 @@
-{"version":3,"file":"dialog-B1TaN0oR.js","sources":["../src/components/dialog/dialog.tsx"],"sourcesContent":["import type { CSSProperties, FC, ReactNode } from \"react\";\nimport { Dialog as DialogBase } from \"@base-ui/react/dialog\";\nimport { Surface } from \"../surface\";\nimport { cn } from \"../../utils/cn\";\n\nexport const KUMO_DIALOG_VARIANTS = {\n  size: {\n    base: {\n      classes: \"min-w-96\",\n      description: \"Default dialog width\",\n    },\n    sm: {\n      classes: \"min-w-72\",\n      description: \"Small dialog for simple confirmations\",\n    },\n    lg: {\n      classes: \"min-w-[32rem]\",\n      description: \"Large dialog for complex content\",\n    },\n    xl: {\n      classes: \"min-w-[48rem]\",\n      description: \"Extra large dialog for detailed views\",\n    },\n  },\n} as const;\n\nexport const KUMO_DIALOG_DEFAULT_VARIANTS = {\n  size: \"base\",\n} as const;\n\nexport const KUMO_DIALOG_STYLING = {\n  dimensions: {\n    sm: {\n      width: 350,\n      titleSize: 20,\n      descSize: 16,\n      padding: 16,\n      gap: 8,\n      buttonSize: \"sm\",\n    },\n    base: {\n      width: 384,\n      titleSize: 20,\n      descSize: 16,\n      padding: 24,\n      gap: 16,\n      buttonSize: \"base\",\n    },\n    lg: {\n      width: 512,\n      titleSize: 20,\n      descSize: 16,\n      padding: 24,\n      gap: 16,\n      buttonSize: \"base\",\n    },\n    xl: {\n      width: 768,\n      titleSize: 20,\n      descSize: 16,\n      padding: 24,\n      gap: 16,\n      buttonSize: \"base\",\n    },\n  },\n  baseTokens: {\n    background: \"color-surface\",\n    text: \"text-color-surface\",\n    borderRadius: 12,\n    shadow: \"shadow-m\",\n  },\n  backdrop: {\n    background: \"color-surface-secondary\",\n    opacity: 0.8,\n  },\n  header: {\n    title: { fontWeight: 600, color: \"text-color-surface\" },\n    closeIcon: { name: \"ph-x\", size: 20, color: \"text-color-muted\" },\n  },\n  description: {\n    fontWeight: 400,\n    color: \"text-color-muted\",\n  },\n  buttons: {\n    primary: { background: \"color-primary\", text: \"white\" },\n    secondary: { ring: \"color-border\", text: \"text-color-surface\" },\n  },\n} as const;\n\n// Derived types from KUMO_DIALOG_VARIANTS\nexport type KumoDialogSize = keyof typeof KUMO_DIALOG_VARIANTS.size;\n\nexport interface KumoDialogVariantsProps {\n  size?: KumoDialogSize;\n}\n\nexport function dialogVariants({\n  size = KUMO_DIALOG_DEFAULT_VARIANTS.size,\n}: KumoDialogVariantsProps = {}) {\n  return cn(\n    // Base styles\n    \"shadow-m z-modal fixed top-1/2 left-1/2 max-w-[calc(100vw-3rem)] -translate-x-1/2 -translate-y-1/2 overflow-hidden rounded-xl bg-kumo-base text-kumo-default duration-150 data-ending-style:scale-90 data-ending-style:opacity-0 data-starting-style:scale-90 data-starting-style:opacity-0\",\n    // Apply size from KUMO_DIALOG_VARIANTS\n    KUMO_DIALOG_VARIANTS.size[size].classes,\n  );\n}\n\nexport type DialogProps = KumoDialogVariantsProps & {\n  className?: string;\n  children: ReactNode;\n  style?: CSSProperties;\n};\n\nfunction DialogContent({\n  className,\n  children,\n  style,\n  size = KUMO_DIALOG_DEFAULT_VARIANTS.size,\n}: DialogProps) {\n  return (\n    <DialogBase.Portal>\n      <DialogBase.Backdrop className=\"z-modal fixed inset-0 bg-kumo-overlay opacity-80 transition-all duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0\" />\n      <Surface\n        as={DialogBase.Popup}\n        className={cn(dialogVariants({ size }), className)}\n        style={\n          {\n            transitionProperty: \"scale, opacity\",\n            transitionTimingFunction:\n              \"var(--default-transition-timing-function)\",\n            \"--tw-shadow\":\n              \"0 20px 25px -5px rgb(0 0 0 / 0.03), 0 8px 10px -6px rgb(0 0 0 / 0.03)\",\n            ...style,\n          } as CSSProperties\n        }\n      >\n        {children}\n      </Surface>\n    </DialogBase.Portal>\n  );\n}\n\ntype DialogComponent = FC<DialogProps> & {\n  Root: typeof DialogBase.Root;\n  Trigger: typeof DialogBase.Trigger;\n  Title: typeof DialogBase.Title;\n  Description: typeof DialogBase.Description;\n  Close: typeof DialogBase.Close;\n};\n\nconst Dialog = Object.assign(DialogContent, {\n  Root: DialogBase.Root,\n  Trigger: DialogBase.Trigger,\n  Title: DialogBase.Title,\n  Description: DialogBase.Description,\n  Close: DialogBase.Close,\n}) as DialogComponent;\n\nconst DialogRoot = Dialog.Root;\nconst DialogTrigger = Dialog.Trigger;\nconst DialogTitle = Dialog.Title;\nconst DialogDescription = Dialog.Description;\nconst DialogClose = Dialog.Close;\n\nexport {\n  Dialog,\n  DialogRoot,\n  DialogTrigger,\n  DialogTitle,\n  DialogDescription,\n  DialogClose,\n};\n"],"names":["KUMO_DIALOG_VARIANTS","KUMO_DIALOG_DEFAULT_VARIANTS","dialogVariants","size","cn","DialogContent","className","children","style","jsxs","DialogBase.Portal","jsx","DialogBase.Backdrop","Surface","DialogBase.Popup","Dialog","DialogBase.Root","DialogBase.Trigger","DialogBase.Title","DialogBase.Description","DialogBase.Close","DialogRoot","DialogTrigger","DialogTitle","DialogDescription","DialogClose"],"mappings":";;;;;AAKO,MAAMA,IAAuB;AAAA,EAClC,MAAM;AAAA,IACJ,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,IAAI;AAAA,MACF,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,IAAI;AAAA,MACF,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,IAAI;AAAA,MACF,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,EACf;AAEJ,GAEaC,IAA+B;AAAA,EAC1C,MAAM;AACR;AAoEO,SAASC,EAAe;AAAA,EAC7B,MAAAC,IAAOF,EAA6B;AACtC,IAA6B,IAAI;AAC/B,SAAOG;AAAA;AAAA,IAEL;AAAA;AAAA,IAEAJ,EAAqB,KAAKG,CAAI,EAAE;AAAA,EAAA;AAEpC;AAQA,SAASE,EAAc;AAAA,EACrB,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAL,IAAOF,EAA6B;AACtC,GAAgB;AACd,SACE,gBAAAQ,EAACC,GAAA,EACC,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAA,EAAoB,WAAU,yIAAA,CAAyI;AAAA,IACxK,gBAAAD;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,IAAIC;AAAAA,QACJ,WAAWV,EAAGF,EAAe,EAAE,MAAAC,EAAA,CAAM,GAAGG,CAAS;AAAA,QACjD,OACE;AAAA,UACE,oBAAoB;AAAA,UACpB,0BACE;AAAA,UACF,eACE;AAAA,UACF,GAAGE;AAAA,QAAA;AAAA,QAIN,UAAAD;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GACF;AAEJ;AAUA,MAAMQ,IAAS,OAAO,OAAOV,GAAe;AAAA,EAC1C,MAAMW;AAAAA,EACN,SAASC;AAAAA,EACT,OAAOC;AAAAA,EACP,aAAaC;AAAAA,EACb,OAAOC;AACT,CAAC,GAEKC,IAAaN,EAAO,MACpBO,IAAgBP,EAAO,SACvBQ,IAAcR,EAAO,OACrBS,IAAoBT,EAAO,aAC3BU,IAAcV,EAAO;"}
+{"version":3,"file":"dialog-BxXPA2vI.js","sources":["../src/components/dialog/dialog.tsx"],"sourcesContent":["import type { CSSProperties, FC, ReactNode } from \"react\";\nimport { Dialog as DialogBase } from \"@base-ui/react/dialog\";\nimport { Surface } from \"../surface\";\nimport { cn } from \"../../utils/cn\";\n\nexport const KUMO_DIALOG_VARIANTS = {\n  size: {\n    base: {\n      classes: \"min-w-96\",\n      description: \"Default dialog width\",\n    },\n    sm: {\n      classes: \"min-w-72\",\n      description: \"Small dialog for simple confirmations\",\n    },\n    lg: {\n      classes: \"min-w-[32rem]\",\n      description: \"Large dialog for complex content\",\n    },\n    xl: {\n      classes: \"min-w-[48rem]\",\n      description: \"Extra large dialog for detailed views\",\n    },\n  },\n} as const;\n\nexport const KUMO_DIALOG_DEFAULT_VARIANTS = {\n  size: \"base\",\n} as const;\n\nexport const KUMO_DIALOG_STYLING = {\n  dimensions: {\n    sm: {\n      width: 350,\n      titleSize: 20,\n      descSize: 16,\n      padding: 16,\n      gap: 8,\n      buttonSize: \"sm\",\n    },\n    base: {\n      width: 384,\n      titleSize: 20,\n      descSize: 16,\n      padding: 24,\n      gap: 16,\n      buttonSize: \"base\",\n    },\n    lg: {\n      width: 512,\n      titleSize: 20,\n      descSize: 16,\n      padding: 24,\n      gap: 16,\n      buttonSize: \"base\",\n    },\n    xl: {\n      width: 768,\n      titleSize: 20,\n      descSize: 16,\n      padding: 24,\n      gap: 16,\n      buttonSize: \"base\",\n    },\n  },\n  baseTokens: {\n    background: \"color-surface\",\n    text: \"text-color-surface\",\n    borderRadius: 12,\n    shadow: \"shadow-m\",\n  },\n  backdrop: {\n    background: \"color-surface-secondary\",\n    opacity: 0.8,\n  },\n  header: {\n    title: { fontWeight: 600, color: \"text-color-surface\" },\n    closeIcon: { name: \"ph-x\", size: 20, color: \"text-color-muted\" },\n  },\n  description: {\n    fontWeight: 400,\n    color: \"text-color-muted\",\n  },\n  buttons: {\n    primary: { background: \"color-primary\", text: \"white\" },\n    secondary: { ring: \"color-border\", text: \"text-color-surface\" },\n  },\n} as const;\n\n// Derived types from KUMO_DIALOG_VARIANTS\nexport type KumoDialogSize = keyof typeof KUMO_DIALOG_VARIANTS.size;\n\nexport interface KumoDialogVariantsProps {\n  size?: KumoDialogSize;\n}\n\nexport function dialogVariants({\n  size = KUMO_DIALOG_DEFAULT_VARIANTS.size,\n}: KumoDialogVariantsProps = {}) {\n  return cn(\n    // Base styles\n    \"shadow-m z-modal fixed top-1/2 left-1/2 max-w-[calc(100vw-3rem)] -translate-x-1/2 -translate-y-1/2 overflow-hidden rounded-xl bg-kumo-base text-kumo-default duration-150 data-ending-style:scale-90 data-ending-style:opacity-0 data-starting-style:scale-90 data-starting-style:opacity-0\",\n    // Apply size from KUMO_DIALOG_VARIANTS\n    KUMO_DIALOG_VARIANTS.size[size].classes,\n  );\n}\n\nexport type DialogProps = KumoDialogVariantsProps & {\n  className?: string;\n  children: ReactNode;\n  style?: CSSProperties;\n};\n\nfunction DialogContent({\n  className,\n  children,\n  style,\n  size = KUMO_DIALOG_DEFAULT_VARIANTS.size,\n}: DialogProps) {\n  return (\n    <DialogBase.Portal>\n      <DialogBase.Backdrop className=\"z-modal fixed inset-0 bg-kumo-overlay opacity-80 transition-all duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0\" />\n      <Surface\n        as={DialogBase.Popup}\n        className={cn(dialogVariants({ size }), className)}\n        style={\n          {\n            transitionProperty: \"scale, opacity\",\n            transitionTimingFunction:\n              \"var(--default-transition-timing-function)\",\n            \"--tw-shadow\":\n              \"0 20px 25px -5px rgb(0 0 0 / 0.03), 0 8px 10px -6px rgb(0 0 0 / 0.03)\",\n            ...style,\n          } as CSSProperties\n        }\n      >\n        {children}\n      </Surface>\n    </DialogBase.Portal>\n  );\n}\n\ntype DialogComponent = FC<DialogProps> & {\n  Root: typeof DialogBase.Root;\n  Trigger: typeof DialogBase.Trigger;\n  Title: typeof DialogBase.Title;\n  Description: typeof DialogBase.Description;\n  Close: typeof DialogBase.Close;\n};\n\nconst Dialog = Object.assign(DialogContent, {\n  Root: DialogBase.Root,\n  Trigger: DialogBase.Trigger,\n  Title: DialogBase.Title,\n  Description: DialogBase.Description,\n  Close: DialogBase.Close,\n}) as DialogComponent;\n\nconst DialogRoot = Dialog.Root;\nconst DialogTrigger = Dialog.Trigger;\nconst DialogTitle = Dialog.Title;\nconst DialogDescription = Dialog.Description;\nconst DialogClose = Dialog.Close;\n\nexport {\n  Dialog,\n  DialogRoot,\n  DialogTrigger,\n  DialogTitle,\n  DialogDescription,\n  DialogClose,\n};\n"],"names":["KUMO_DIALOG_VARIANTS","KUMO_DIALOG_DEFAULT_VARIANTS","dialogVariants","size","cn","DialogContent","className","children","style","jsxs","DialogBase.Portal","jsx","DialogBase.Backdrop","Surface","DialogBase.Popup","Dialog","DialogBase.Root","DialogBase.Trigger","DialogBase.Title","DialogBase.Description","DialogBase.Close","DialogRoot","DialogTrigger","DialogTitle","DialogDescription","DialogClose"],"mappings":";;;;;AAKO,MAAMA,IAAuB;AAAA,EAClC,MAAM;AAAA,IACJ,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,IAAI;AAAA,MACF,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,IAAI;AAAA,MACF,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,IAAI;AAAA,MACF,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,EACf;AAEJ,GAEaC,IAA+B;AAAA,EAC1C,MAAM;AACR;AAoEO,SAASC,EAAe;AAAA,EAC7B,MAAAC,IAAOF,EAA6B;AACtC,IAA6B,IAAI;AAC/B,SAAOG;AAAA;AAAA,IAEL;AAAA;AAAA,IAEAJ,EAAqB,KAAKG,CAAI,EAAE;AAAA,EAAA;AAEpC;AAQA,SAASE,EAAc;AAAA,EACrB,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAL,IAAOF,EAA6B;AACtC,GAAgB;AACd,SACE,gBAAAQ,EAACC,GAAA,EACC,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAA,EAAoB,WAAU,yIAAA,CAAyI;AAAA,IACxK,gBAAAD;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,IAAIC;AAAAA,QACJ,WAAWV,EAAGF,EAAe,EAAE,MAAAC,EAAA,CAAM,GAAGG,CAAS;AAAA,QACjD,OACE;AAAA,UACE,oBAAoB;AAAA,UACpB,0BACE;AAAA,UACF,eACE;AAAA,UACF,GAAGE;AAAA,QAAA;AAAA,QAIN,UAAAD;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GACF;AAEJ;AAUA,MAAMQ,IAAS,OAAO,OAAOV,GAAe;AAAA,EAC1C,MAAMW;AAAAA,EACN,SAASC;AAAAA,EACT,OAAOC;AAAAA,EACP,aAAaC;AAAAA,EACb,OAAOC;AACT,CAAC,GAEKC,IAAaN,EAAO,MACpBO,IAAgBP,EAAO,SACvBQ,IAAcR,EAAO,OACrBS,IAAoBT,EAAO,aAC3BU,IAAcV,EAAO;"}

package/dist/{dropdown-D0rhYKeG.js → dropdown-BAyk1knz.js}

@@ -3,9 +3,9 @@ import { jsx as n, jsxs as u, Fragment as V } from "react/jsx-runtime";
 import * as i from "react";
 import { c as s } from "./cn-Bhsu1vx2.js";
 import { u as z } from "./link-provider-DPBGo-0n.js";
-import { C as U } from "./checkbox-BexIU_lZ.js";
+import { C as U } from "./checkbox-C1LPq8eL.js";
 import { CheckIcon as b, CaretRightIcon as W } from "@phosphor-icons/react";
-import { ah as F, ai as K, aj as q, ak as B, al as x, S as w, am as N, an as H, ao as J, ap as M, aq as R, ar as Q, as as X, at as k, au as Y } from "./vendor-base-ui-DWIDNgE1.js";
+import { ah as F, ai as K, aj as q, ak as B, al as x, S as w, am as N, an as H, ao as J, ap as M, aq as k, ar as Q, as as X, at as R, au as Y } from "./vendor-base-ui-kX0wjdav.js";
 const Z = {
   variant: {
     default: {
@@ -26,7 +26,7 @@ function ee({
   return s(Z.variant[e].classes);
 }
 const y = i.forwardRef(({ className: e, inset: t, children: a, icon: o, ...r }, d) => /* @__PURE__ */ u(
-  k,
+  R,
   {
     ref: d,
     className: s(
@@ -50,7 +50,7 @@ const y = i.forwardRef(({ className: e, inset: t, children: a, icon: o, ...r },
     ]
   }
 ));
-y.displayName = k.displayName;
+y.displayName = R.displayName;
 const h = i.forwardRef(({ className: e, sideOffset: t = 8, children: a, ...o }, r) => /* @__PURE__ */ n(x, { children: /* @__PURE__ */ n(
   Q,
   {
@@ -130,7 +130,7 @@ const h = i.forwardRef(({ className: e, sideOffset: t = 8, children: a, ...o },
       );
     }, [l, a, o, r, m, f]), E = l || d;
     return /* @__PURE__ */ n(
-      R,
+      k,
       {
         ref: j,
         className: s(
@@ -146,7 +146,7 @@ const h = i.forwardRef(({ className: e, sideOffset: t = 8, children: a, ...o },
     );
   }
 );
-I.displayName = R.displayName;
+I.displayName = k.displayName;
 const S = i.forwardRef(({ className: e, children: t, checked: a, ...o }, r) => /* @__PURE__ */ u(
   M,
   {
@@ -260,4 +260,4 @@ const ie = Object.assign(F, {
 export {
   ie as D
 };
-//# sourceMappingURL=dropdown-D0rhYKeG.js.map
+//# sourceMappingURL=dropdown-BAyk1knz.js.map

package/dist/{dropdown-D0rhYKeG.js.map → dropdown-BAyk1knz.js.map}

@@ -1 +1 @@
-{"version":3,"file":"dropdown-D0rhYKeG.js","sources":["../src/components/dropdown/dropdown.tsx"],"sourcesContent":["import { Menu as DropdownMenuPrimitive } from \"@base-ui/react/menu\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { useLinkComponent } from \"../../utils/link-provider\";\nimport { Checkbox } from \"../checkbox\";\nimport {\n  CaretRightIcon as CaretRight,\n  CheckIcon as Check,\n  type Icon,\n} from \"@phosphor-icons/react\";\n\nexport const KUMO_DROPDOWN_VARIANTS = {\n  variant: {\n    default: {\n      classes: \"\",\n      description: \"Default dropdown item appearance\",\n    },\n    danger: {\n      classes:\n        \"text-kumo-danger data-highlighted:bg-kumo-danger/5 data-highlighted:text-kumo-danger\",\n      description: \"Destructive action item\",\n    },\n  },\n} as const;\n\nexport const KUMO_DROPDOWN_DEFAULT_VARIANTS = {\n  variant: \"default\",\n} as const;\n\n// Derived types from KUMO_DROPDOWN_VARIANTS\nexport type KumoDropdownVariant = keyof typeof KUMO_DROPDOWN_VARIANTS.variant;\n\nexport interface KumoDropdownVariantsProps {\n  variant?: KumoDropdownVariant;\n}\n\nexport function dropdownVariants({\n  variant = KUMO_DROPDOWN_DEFAULT_VARIANTS.variant,\n}: KumoDropdownVariantsProps = {}) {\n  return cn(KUMO_DROPDOWN_VARIANTS.variant[variant].classes);\n}\n\nconst DropdownMenuSubTrigger = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.SubmenuTrigger>,\n  React.ComponentPropsWithoutRef<\n    typeof DropdownMenuPrimitive.SubmenuTrigger\n  > & {\n    inset?: boolean;\n    icon?: Icon;\n  }\n>(({ className, inset, children, icon: IconComponent, ...props }, ref) => (\n  <DropdownMenuPrimitive.SubmenuTrigger\n    ref={ref}\n    className={cn(\n      \"flex cursor-default items-center rounded-sm text-base outline-hidden select-none\", // base styles\n      \"px-2 py-1.5\", // spacing\n      \"focus:bg-kumo-tint\", // focus state\n      \"data-[state=open]:bg-kumo-tint\", // open state\n      inset && \"pl-8\", // conditional inset\n      className,\n    )}\n    {...props}\n  >\n    {IconComponent && <IconComponent className=\"mr-2 h-4 w-4\" />}\n    {children}\n    <CaretRight className=\"ml-auto h-4 w-4\" />\n  </DropdownMenuPrimitive.SubmenuTrigger>\n));\n\nDropdownMenuSubTrigger.displayName =\n  DropdownMenuPrimitive.SubmenuTrigger.displayName;\n\nconst DropdownMenuContent = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.Positioner>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Positioner>\n>(({ className, sideOffset = 8, children, ...props }, ref) => (\n  <DropdownMenuPrimitive.Portal>\n    <DropdownMenuPrimitive.Positioner\n      ref={ref}\n      sideOffset={sideOffset}\n      {...props}\n    >\n      <DropdownMenuPrimitive.Popup\n        className={cn(\n          \"z-50 overflow-hidden bg-kumo-control text-kumo-default\", // background\n          \"rounded-lg shadow-lg ring ring-kumo-line\", // border part\n          \"min-w-36 p-1.5\", // spacing\n          \"data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95\", // open animation\n          \"data-[side=bottom]:slide-in-from-top-2\", // bottom side animation\n          \"data-[side=left]:slide-in-from-right-2\", // left side animation\n          \"data-[side=right]:slide-in-from-left-2\", // right side animation\n          \"data-[side=top]:slide-in-from-bottom-2\", // top side animation\n          \"data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95\", // close animation\n          className,\n        )}\n      >\n        {children}\n      </DropdownMenuPrimitive.Popup>\n    </DropdownMenuPrimitive.Positioner>\n  </DropdownMenuPrimitive.Portal>\n));\n\nconst renderIconNode = (IconComponent?: Icon | React.ReactNode) => {\n  if (!IconComponent) return null;\n  if (React.isValidElement(IconComponent)) return IconComponent;\n  const Comp = IconComponent as React.ComponentType<Record<string, unknown>>;\n  return <Comp className=\"mr-2 h-4 w-4\" />;\n};\n\nconst DropdownMenuItem = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {\n    inset?: boolean;\n    icon?: Icon | React.ReactNode;\n    selected?: boolean;\n    href?: string;\n    variant?: \"default\" | \"danger\";\n  }\n>(\n  (\n    {\n      className,\n      inset,\n      icon: IconComponent,\n      children,\n      selected,\n      render,\n      href,\n      variant = \"default\",\n      ...props\n    },\n    ref,\n  ) => {\n    const LinkComponent = useLinkComponent();\n    const content = React.useMemo(() => {\n      const innerContent = (\n        <>\n          {IconComponent && renderIconNode(IconComponent)}\n          {children}\n          {selected && (\n            <span className=\"inline-flex\">\n              <Check />\n            </span>\n          )}\n        </>\n      );\n\n      if (!href) return innerContent;\n\n      const isExternal = href.startsWith(\"https://\");\n      const styles = cn(\n        \"flex items-center\",\n        variant === \"danger\" &&\n          \"text-kumo-danger data-highlighted:bg-kumo-danger/5 data-highlighted:text-kumo-danger\",\n      );\n      if (isExternal) {\n        return (\n          <a\n            className={cn(styles, \"w-full text-inherit! no-underline!\")}\n            href={href}\n            target=\"_blank\"\n            rel=\"noreferrer\"\n            /**\n             * For some reason we need this here to prevent the outer link\n             * from being clicked (thereby going to the worker details\n             * instead of visiting the link)\n             */\n            onClick={(e) => e.stopPropagation()}\n          >\n            {innerContent}\n          </a>\n        );\n      }\n      return (\n        <LinkComponent\n          className={cn(styles, \"w-full text-inherit! no-underline!\")}\n          href={href}\n          to={href}\n          /**\n           * For some reason we need this here to prevent the outer link\n           * from being clicked (thereby going to the worker details\n           * instead of visiting the link)\n           */\n          onClick={(e) => e.stopPropagation()}\n        >\n          {innerContent}\n        </LinkComponent>\n      );\n    }, [href, IconComponent, children, selected, variant, LinkComponent]);\n\n    // When href is provided, content already contains children via innerContent\n    // When render prop is provided, caller controls children rendering\n    // Only pass children directly when neither href nor render is used\n    const useRenderProp = href || render;\n\n    return (\n      <DropdownMenuPrimitive.Item\n        ref={ref}\n        className={cn(\n          \"relative flex cursor-default items-center rounded-md px-2 py-1.5 text-base outline-hidden select-none focus:text-kumo-default data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-kumo-overlay\",\n          inset && \"pl-8\",\n          dropdownVariants({ variant }),\n          className,\n        )}\n        render={href ? content : render}\n        {...props}\n      >\n        {useRenderProp ? undefined : children}\n      </DropdownMenuPrimitive.Item>\n    );\n  },\n);\n\nDropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;\n\nconst DropdownMenuCheckboxItem = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>\n>(({ className, children, checked, ...props }, ref) => (\n  <DropdownMenuPrimitive.CheckboxItem\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-default items-center rounded-sm py-1.5 pr-2 pl-8 text-base outline-hidden transition-colors select-none focus:bg-kumo-tint focus:text-kumo-default data-disabled:pointer-events-none data-disabled:opacity-50\",\n      className,\n    )}\n    checked={checked}\n    {...props}\n  >\n    <span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center text-inherit\">\n      <Checkbox checked={checked} />\n    </span>\n    {children}\n  </DropdownMenuPrimitive.CheckboxItem>\n));\nDropdownMenuCheckboxItem.displayName =\n  DropdownMenuPrimitive.CheckboxItem.displayName;\n\nconst DropdownMenuLabel = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.GroupLabel>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.GroupLabel> & {\n    inset?: boolean;\n  }\n>(({ className, inset, ...props }, ref) => (\n  <DropdownMenuPrimitive.GroupLabel\n    ref={ref}\n    className={cn(\n      \"px-2 py-1.5 text-base font-semibold\",\n      inset && \"pl-8\",\n      className,\n    )}\n    {...props}\n  />\n));\nDropdownMenuLabel.displayName = DropdownMenuPrimitive.GroupLabel.displayName;\n\nconst DropdownMenuSeparator = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <DropdownMenuPrimitive.Separator\n    ref={ref}\n    className={cn(\"-mx-1 my-1 h-px bg-kumo-line\", className)}\n    {...props}\n  />\n));\nDropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;\n\nconst DropdownMenuShortcut = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLSpanElement>) => {\n  return (\n    <span\n      className={cn(\"ml-auto text-xs tracking-widest opacity-60\", className)}\n      {...props}\n    />\n  );\n};\nDropdownMenuShortcut.displayName = \"DropdownMenuShortcut\";\n\nconst DropdownMenuRadioItem = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem> & {\n    inset?: boolean;\n    icon?: Icon | React.ReactNode;\n  }\n>(({ className, children, inset, icon: IconComponent, ...props }, ref) => (\n  <DropdownMenuPrimitive.RadioItem\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-default items-center rounded-md px-2 py-1.5 text-base outline-hidden select-none\",\n      \"data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-kumo-tint\",\n      inset && \"pl-8\",\n      className,\n    )}\n    {...props}\n  >\n    {IconComponent && renderIconNode(IconComponent)}\n    {children}\n  </DropdownMenuPrimitive.RadioItem>\n));\nDropdownMenuRadioItem.displayName = \"DropdownMenuRadioItem\";\n\nconst DropdownMenuRadioItemIndicator = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.RadioItemIndicator>,\n  React.ComponentPropsWithoutRef<\n    typeof DropdownMenuPrimitive.RadioItemIndicator\n  >\n>(({ className, children, ...props }, ref) => (\n  <DropdownMenuPrimitive.RadioItemIndicator\n    ref={ref}\n    className={cn(\"ml-auto\", className)}\n    {...props}\n  >\n    {children ?? <Check className=\"h-4 w-4\" />}\n  </DropdownMenuPrimitive.RadioItemIndicator>\n));\nDropdownMenuRadioItemIndicator.displayName = \"DropdownMenuRadioItemIndicator\";\n\n/**\n * Custom Trigger that converts a single child element to the `render` prop\n * to avoid nested button issues with base-ui's Menu.Trigger.\n */\nconst DropdownMenuTrigger = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Trigger>\n>(({ children, render, ...props }, ref) => {\n  // If render prop is provided, use it directly\n  // Otherwise, convert single child element to render prop\n  const childElement = React.isValidElement(children) ? children : null;\n  const effectiveRender = render ?? childElement;\n\n  return (\n    <DropdownMenuPrimitive.Trigger\n      ref={ref}\n      {...props}\n      {...(effectiveRender && {\n        render: effectiveRender as React.ReactElement<Record<string, unknown>>,\n      })}\n    >\n      {/* Only pass children if not using as render prop */}\n      {childElement ? undefined : children}\n    </DropdownMenuPrimitive.Trigger>\n  );\n});\nDropdownMenuTrigger.displayName = \"DropdownMenuTrigger\";\n\nexport const DropdownMenu = Object.assign(DropdownMenuPrimitive.Root, {\n  Trigger: DropdownMenuTrigger,\n  Portal: DropdownMenuPrimitive.Portal,\n  Sub: DropdownMenuPrimitive.SubmenuRoot,\n  SubTrigger: DropdownMenuSubTrigger,\n  SubContent: DropdownMenuContent,\n  Content: DropdownMenuContent,\n  Item: DropdownMenuItem,\n  CheckboxItem: DropdownMenuCheckboxItem,\n  RadioGroup: DropdownMenuPrimitive.RadioGroup,\n  RadioItem: DropdownMenuRadioItem,\n  RadioItemIndicator: DropdownMenuRadioItemIndicator,\n  Label: DropdownMenuLabel,\n  Separator: DropdownMenuSeparator,\n  Shortcut: DropdownMenuShortcut,\n  Group: DropdownMenuPrimitive.Group,\n});\n"],"names":["KUMO_DROPDOWN_VARIANTS","KUMO_DROPDOWN_DEFAULT_VARIANTS","dropdownVariants","variant","cn","DropdownMenuSubTrigger","React","className","inset","children","IconComponent","props","ref","jsxs","DropdownMenuPrimitive.SubmenuTrigger","jsx","CaretRight","DropdownMenuContent","sideOffset","DropdownMenuPrimitive.Portal","DropdownMenuPrimitive.Positioner","DropdownMenuPrimitive.Popup","renderIconNode","DropdownMenuItem","selected","render","href","LinkComponent","useLinkComponent","content","innerContent","Fragment","Check","isExternal","styles","e","useRenderProp","DropdownMenuPrimitive.Item","DropdownMenuCheckboxItem","checked","DropdownMenuPrimitive.CheckboxItem","Checkbox","DropdownMenuLabel","DropdownMenuPrimitive.GroupLabel","DropdownMenuSeparator","DropdownMenuPrimitive.Separator","DropdownMenuShortcut","DropdownMenuRadioItem","DropdownMenuPrimitive.RadioItem","DropdownMenuRadioItemIndicator","DropdownMenuPrimitive.RadioItemIndicator","DropdownMenuTrigger","childElement","effectiveRender","DropdownMenuPrimitive.Trigger","DropdownMenu","DropdownMenuPrimitive.Root","DropdownMenuPrimitive.SubmenuRoot","DropdownMenuPrimitive.RadioGroup","DropdownMenuPrimitive.Group"],"mappings":"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"}
+{"version":3,"file":"dropdown-BAyk1knz.js","sources":["../src/components/dropdown/dropdown.tsx"],"sourcesContent":["import { Menu as DropdownMenuPrimitive } from \"@base-ui/react/menu\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { useLinkComponent } from \"../../utils/link-provider\";\nimport { Checkbox } from \"../checkbox\";\nimport {\n  CaretRightIcon as CaretRight,\n  CheckIcon as Check,\n  type Icon,\n} from \"@phosphor-icons/react\";\n\nexport const KUMO_DROPDOWN_VARIANTS = {\n  variant: {\n    default: {\n      classes: \"\",\n      description: \"Default dropdown item appearance\",\n    },\n    danger: {\n      classes:\n        \"text-kumo-danger data-highlighted:bg-kumo-danger/5 data-highlighted:text-kumo-danger\",\n      description: \"Destructive action item\",\n    },\n  },\n} as const;\n\nexport const KUMO_DROPDOWN_DEFAULT_VARIANTS = {\n  variant: \"default\",\n} as const;\n\n// Derived types from KUMO_DROPDOWN_VARIANTS\nexport type KumoDropdownVariant = keyof typeof KUMO_DROPDOWN_VARIANTS.variant;\n\nexport interface KumoDropdownVariantsProps {\n  variant?: KumoDropdownVariant;\n}\n\nexport function dropdownVariants({\n  variant = KUMO_DROPDOWN_DEFAULT_VARIANTS.variant,\n}: KumoDropdownVariantsProps = {}) {\n  return cn(KUMO_DROPDOWN_VARIANTS.variant[variant].classes);\n}\n\nconst DropdownMenuSubTrigger = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.SubmenuTrigger>,\n  React.ComponentPropsWithoutRef<\n    typeof DropdownMenuPrimitive.SubmenuTrigger\n  > & {\n    inset?: boolean;\n    icon?: Icon;\n  }\n>(({ className, inset, children, icon: IconComponent, ...props }, ref) => (\n  <DropdownMenuPrimitive.SubmenuTrigger\n    ref={ref}\n    className={cn(\n      \"flex cursor-default items-center rounded-sm text-base outline-hidden select-none\", // base styles\n      \"px-2 py-1.5\", // spacing\n      \"focus:bg-kumo-tint\", // focus state\n      \"data-[state=open]:bg-kumo-tint\", // open state\n      inset && \"pl-8\", // conditional inset\n      className,\n    )}\n    {...props}\n  >\n    {IconComponent && <IconComponent className=\"mr-2 h-4 w-4\" />}\n    {children}\n    <CaretRight className=\"ml-auto h-4 w-4\" />\n  </DropdownMenuPrimitive.SubmenuTrigger>\n));\n\nDropdownMenuSubTrigger.displayName =\n  DropdownMenuPrimitive.SubmenuTrigger.displayName;\n\nconst DropdownMenuContent = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.Positioner>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Positioner>\n>(({ className, sideOffset = 8, children, ...props }, ref) => (\n  <DropdownMenuPrimitive.Portal>\n    <DropdownMenuPrimitive.Positioner\n      ref={ref}\n      sideOffset={sideOffset}\n      {...props}\n    >\n      <DropdownMenuPrimitive.Popup\n        className={cn(\n          \"z-50 overflow-hidden bg-kumo-control text-kumo-default\", // background\n          \"rounded-lg shadow-lg ring ring-kumo-line\", // border part\n          \"min-w-36 p-1.5\", // spacing\n          \"data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95\", // open animation\n          \"data-[side=bottom]:slide-in-from-top-2\", // bottom side animation\n          \"data-[side=left]:slide-in-from-right-2\", // left side animation\n          \"data-[side=right]:slide-in-from-left-2\", // right side animation\n          \"data-[side=top]:slide-in-from-bottom-2\", // top side animation\n          \"data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95\", // close animation\n          className,\n        )}\n      >\n        {children}\n      </DropdownMenuPrimitive.Popup>\n    </DropdownMenuPrimitive.Positioner>\n  </DropdownMenuPrimitive.Portal>\n));\n\nconst renderIconNode = (IconComponent?: Icon | React.ReactNode) => {\n  if (!IconComponent) return null;\n  if (React.isValidElement(IconComponent)) return IconComponent;\n  const Comp = IconComponent as React.ComponentType<Record<string, unknown>>;\n  return <Comp className=\"mr-2 h-4 w-4\" />;\n};\n\nconst DropdownMenuItem = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {\n    inset?: boolean;\n    icon?: Icon | React.ReactNode;\n    selected?: boolean;\n    href?: string;\n    variant?: \"default\" | \"danger\";\n  }\n>(\n  (\n    {\n      className,\n      inset,\n      icon: IconComponent,\n      children,\n      selected,\n      render,\n      href,\n      variant = \"default\",\n      ...props\n    },\n    ref,\n  ) => {\n    const LinkComponent = useLinkComponent();\n    const content = React.useMemo(() => {\n      const innerContent = (\n        <>\n          {IconComponent && renderIconNode(IconComponent)}\n          {children}\n          {selected && (\n            <span className=\"inline-flex\">\n              <Check />\n            </span>\n          )}\n        </>\n      );\n\n      if (!href) return innerContent;\n\n      const isExternal = href.startsWith(\"https://\");\n      const styles = cn(\n        \"flex items-center\",\n        variant === \"danger\" &&\n          \"text-kumo-danger data-highlighted:bg-kumo-danger/5 data-highlighted:text-kumo-danger\",\n      );\n      if (isExternal) {\n        return (\n          <a\n            className={cn(styles, \"w-full text-inherit! no-underline!\")}\n            href={href}\n            target=\"_blank\"\n            rel=\"noreferrer\"\n            /**\n             * For some reason we need this here to prevent the outer link\n             * from being clicked (thereby going to the worker details\n             * instead of visiting the link)\n             */\n            onClick={(e) => e.stopPropagation()}\n          >\n            {innerContent}\n          </a>\n        );\n      }\n      return (\n        <LinkComponent\n          className={cn(styles, \"w-full text-inherit! no-underline!\")}\n          href={href}\n          to={href}\n          /**\n           * For some reason we need this here to prevent the outer link\n           * from being clicked (thereby going to the worker details\n           * instead of visiting the link)\n           */\n          onClick={(e) => e.stopPropagation()}\n        >\n          {innerContent}\n        </LinkComponent>\n      );\n    }, [href, IconComponent, children, selected, variant, LinkComponent]);\n\n    // When href is provided, content already contains children via innerContent\n    // When render prop is provided, caller controls children rendering\n    // Only pass children directly when neither href nor render is used\n    const useRenderProp = href || render;\n\n    return (\n      <DropdownMenuPrimitive.Item\n        ref={ref}\n        className={cn(\n          \"relative flex cursor-default items-center rounded-md px-2 py-1.5 text-base outline-hidden select-none focus:text-kumo-default data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-kumo-overlay\",\n          inset && \"pl-8\",\n          dropdownVariants({ variant }),\n          className,\n        )}\n        render={href ? content : render}\n        {...props}\n      >\n        {useRenderProp ? undefined : children}\n      </DropdownMenuPrimitive.Item>\n    );\n  },\n);\n\nDropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;\n\nconst DropdownMenuCheckboxItem = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>\n>(({ className, children, checked, ...props }, ref) => (\n  <DropdownMenuPrimitive.CheckboxItem\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-default items-center rounded-sm py-1.5 pr-2 pl-8 text-base outline-hidden transition-colors select-none focus:bg-kumo-tint focus:text-kumo-default data-disabled:pointer-events-none data-disabled:opacity-50\",\n      className,\n    )}\n    checked={checked}\n    {...props}\n  >\n    <span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center text-inherit\">\n      <Checkbox checked={checked} />\n    </span>\n    {children}\n  </DropdownMenuPrimitive.CheckboxItem>\n));\nDropdownMenuCheckboxItem.displayName =\n  DropdownMenuPrimitive.CheckboxItem.displayName;\n\nconst DropdownMenuLabel = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.GroupLabel>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.GroupLabel> & {\n    inset?: boolean;\n  }\n>(({ className, inset, ...props }, ref) => (\n  <DropdownMenuPrimitive.GroupLabel\n    ref={ref}\n    className={cn(\n      \"px-2 py-1.5 text-base font-semibold\",\n      inset && \"pl-8\",\n      className,\n    )}\n    {...props}\n  />\n));\nDropdownMenuLabel.displayName = DropdownMenuPrimitive.GroupLabel.displayName;\n\nconst DropdownMenuSeparator = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <DropdownMenuPrimitive.Separator\n    ref={ref}\n    className={cn(\"-mx-1 my-1 h-px bg-kumo-line\", className)}\n    {...props}\n  />\n));\nDropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;\n\nconst DropdownMenuShortcut = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLSpanElement>) => {\n  return (\n    <span\n      className={cn(\"ml-auto text-xs tracking-widest opacity-60\", className)}\n      {...props}\n    />\n  );\n};\nDropdownMenuShortcut.displayName = \"DropdownMenuShortcut\";\n\nconst DropdownMenuRadioItem = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem> & {\n    inset?: boolean;\n    icon?: Icon | React.ReactNode;\n  }\n>(({ className, children, inset, icon: IconComponent, ...props }, ref) => (\n  <DropdownMenuPrimitive.RadioItem\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-default items-center rounded-md px-2 py-1.5 text-base outline-hidden select-none\",\n      \"data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-kumo-tint\",\n      inset && \"pl-8\",\n      className,\n    )}\n    {...props}\n  >\n    {IconComponent && renderIconNode(IconComponent)}\n    {children}\n  </DropdownMenuPrimitive.RadioItem>\n));\nDropdownMenuRadioItem.displayName = \"DropdownMenuRadioItem\";\n\nconst DropdownMenuRadioItemIndicator = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.RadioItemIndicator>,\n  React.ComponentPropsWithoutRef<\n    typeof DropdownMenuPrimitive.RadioItemIndicator\n  >\n>(({ className, children, ...props }, ref) => (\n  <DropdownMenuPrimitive.RadioItemIndicator\n    ref={ref}\n    className={cn(\"ml-auto\", className)}\n    {...props}\n  >\n    {children ?? <Check className=\"h-4 w-4\" />}\n  </DropdownMenuPrimitive.RadioItemIndicator>\n));\nDropdownMenuRadioItemIndicator.displayName = \"DropdownMenuRadioItemIndicator\";\n\n/**\n * Custom Trigger that converts a single child element to the `render` prop\n * to avoid nested button issues with base-ui's Menu.Trigger.\n */\nconst DropdownMenuTrigger = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Trigger>\n>(({ children, render, ...props }, ref) => {\n  // If render prop is provided, use it directly\n  // Otherwise, convert single child element to render prop\n  const childElement = React.isValidElement(children) ? children : null;\n  const effectiveRender = render ?? childElement;\n\n  return (\n    <DropdownMenuPrimitive.Trigger\n      ref={ref}\n      {...props}\n      {...(effectiveRender && {\n        render: effectiveRender as React.ReactElement<Record<string, unknown>>,\n      })}\n    >\n      {/* Only pass children if not using as render prop */}\n      {childElement ? undefined : children}\n    </DropdownMenuPrimitive.Trigger>\n  );\n});\nDropdownMenuTrigger.displayName = \"DropdownMenuTrigger\";\n\nexport const DropdownMenu = Object.assign(DropdownMenuPrimitive.Root, {\n  Trigger: DropdownMenuTrigger,\n  Portal: DropdownMenuPrimitive.Portal,\n  Sub: DropdownMenuPrimitive.SubmenuRoot,\n  SubTrigger: DropdownMenuSubTrigger,\n  SubContent: DropdownMenuContent,\n  Content: DropdownMenuContent,\n  Item: DropdownMenuItem,\n  CheckboxItem: DropdownMenuCheckboxItem,\n  RadioGroup: DropdownMenuPrimitive.RadioGroup,\n  RadioItem: DropdownMenuRadioItem,\n  RadioItemIndicator: DropdownMenuRadioItemIndicator,\n  Label: DropdownMenuLabel,\n  Separator: DropdownMenuSeparator,\n  Shortcut: DropdownMenuShortcut,\n  Group: DropdownMenuPrimitive.Group,\n});\n"],"names":["KUMO_DROPDOWN_VARIANTS","KUMO_DROPDOWN_DEFAULT_VARIANTS","dropdownVariants","variant","cn","DropdownMenuSubTrigger","React","className","inset","children","IconComponent","props","ref","jsxs","DropdownMenuPrimitive.SubmenuTrigger","jsx","CaretRight","DropdownMenuContent","sideOffset","DropdownMenuPrimitive.Portal","DropdownMenuPrimitive.Positioner","DropdownMenuPrimitive.Popup","renderIconNode","DropdownMenuItem","selected","render","href","LinkComponent","useLinkComponent","content","innerContent","Fragment","Check","isExternal","styles","e","useRenderProp","DropdownMenuPrimitive.Item","DropdownMenuCheckboxItem","checked","DropdownMenuPrimitive.CheckboxItem","Checkbox","DropdownMenuLabel","DropdownMenuPrimitive.GroupLabel","DropdownMenuSeparator","DropdownMenuPrimitive.Separator","DropdownMenuShortcut","DropdownMenuRadioItem","DropdownMenuPrimitive.RadioItem","DropdownMenuRadioItemIndicator","DropdownMenuPrimitive.RadioItemIndicator","DropdownMenuTrigger","childElement","effectiveRender","DropdownMenuPrimitive.Trigger","DropdownMenu","DropdownMenuPrimitive.Root","DropdownMenuPrimitive.SubmenuRoot","DropdownMenuPrimitive.RadioGroup","DropdownMenuPrimitive.Group"],"mappings":"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"}

package/dist/{empty-DzCqjea-.js → empty-D03cbzRS.js}

@@ -2,7 +2,7 @@
 import { jsxs as l, jsx as e } from "react/jsx-runtime";
 import { CheckIcon as u, CopyIcon as d } from "@phosphor-icons/react";
 import { useState as x } from "react";
-import { B as f } from "./button-E2-hZMZE.js";
+import { B as f } from "./button-Bh96oxRL.js";
 import { c as a } from "./cn-Bhsu1vx2.js";
 const h = {
   size: {
@@ -90,4 +90,4 @@ export {
   b as a,
   g as e
 };
-//# sourceMappingURL=empty-DzCqjea-.js.map
+//# sourceMappingURL=empty-D03cbzRS.js.map

package/dist/{empty-DzCqjea-.js.map → empty-D03cbzRS.js.map}

@@ -1 +1 @@
-{"version":3,"file":"empty-DzCqjea-.js","sources":["../src/components/empty/empty.tsx"],"sourcesContent":["import { CheckIcon, CopyIcon } from \"@phosphor-icons/react\";\nimport { useState } from \"react\";\nimport { Button } from \"../../components/button\";\nimport { cn } from \"../../utils/cn\";\n\nexport const KUMO_EMPTY_VARIANTS = {\n  size: {\n    sm: {\n      classes: \"px-6 py-8 gap-4\",\n      description: \"Compact empty state for smaller containers\",\n    },\n    base: {\n      classes: \"px-10 py-16 gap-6\",\n      description: \"Default empty state size\",\n    },\n    lg: {\n      classes: \"px-12 py-20 gap-8\",\n      description: \"Large empty state for prominent placement\",\n    },\n  },\n} as const;\n\nexport const KUMO_EMPTY_DEFAULT_VARIANTS = {\n  size: \"base\",\n} as const;\n\nexport type KumoEmptySize = keyof typeof KUMO_EMPTY_VARIANTS.size;\n\nexport interface KumoEmptyVariantsProps {\n  size?: KumoEmptySize;\n}\n\nexport function emptyVariants({\n  size = KUMO_EMPTY_DEFAULT_VARIANTS.size,\n}: KumoEmptyVariantsProps = {}) {\n  return cn(\n    \"flex w-full flex-col items-center rounded-xl border border-kumo-fill bg-kumo-control text-kumo-default\",\n    KUMO_EMPTY_VARIANTS.size[size].classes,\n  );\n}\n\nexport interface EmptyProps extends KumoEmptyVariantsProps {\n  icon?: React.ReactNode;\n  title: string;\n  description?: string;\n  commandLine?: string;\n  contents?: React.ReactNode;\n  className?: string;\n}\n\nexport function Empty({\n  icon,\n  title,\n  description,\n  commandLine,\n  contents,\n  size = \"base\",\n  className,\n}: EmptyProps) {\n  const [emptyStateCopied, setEmptyStateCopied] = useState<boolean>(false);\n\n  return (\n    <div className={cn(emptyVariants({ size }), className)}>\n      {icon}\n      <h2 className=\"text-2xl font-semibold\">{title}</h2>\n\n      {description && (\n        <p className=\"max-w-140 text-center text-kumo-strong\">{description}</p>\n      )}\n\n      {commandLine && (\n        <div\n          className={cn(\n            \"group/cmd relative inline-flex h-10 max-w-8/10 transform-gpu items-center gap-2 rounded-lg font-mono shadow-sm\",\n            \"bg-kumo-overlay pr-2 pl-3\",\n            \"transition-all duration-300 hover:border-kumo-interact/80 hover:shadow-md\",\n            \"border border-kumo-fill/60\",\n          )}\n        >\n          <span className=\"text-xs text-kumo-inactive select-none\">$</span>\n          <span className=\"no-scrollbar overflow-scroll text-[14px] whitespace-nowrap text-kumo-brand\">\n            {commandLine}\n          </span>\n          <Button\n            className=\"group\"\n            size=\"sm\"\n            variant=\"ghost\"\n            shape=\"square\"\n            aria-label=\"Copy command\"\n            onClick={async () => {\n              setEmptyStateCopied(true);\n              setTimeout(() => {\n                setEmptyStateCopied(false);\n              }, 1000);\n              await navigator.clipboard.writeText(commandLine);\n            }}\n          >\n            {emptyStateCopied ? (\n              <CheckIcon size={16} className=\"animate-bounce-in text-kumo-success\" />\n            ) : (\n              <CopyIcon\n                size={16}\n                className=\"text-kumo-inactive group-hover:text-kumo-brand\"\n              />\n            )}\n          </Button>\n        </div>\n      )}\n\n      {contents}\n    </div>\n  );\n}\n"],"names":["KUMO_EMPTY_VARIANTS","KUMO_EMPTY_DEFAULT_VARIANTS","emptyVariants","size","cn","Empty","icon","title","description","commandLine","contents","className","emptyStateCopied","setEmptyStateCopied","useState","jsxs","jsx","Button","CheckIcon","CopyIcon"],"mappings":";;;;;;AAKO,MAAMA,IAAsB;AAAA,EACjC,MAAM;AAAA,IACJ,IAAI;AAAA,MACF,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,IAAI;AAAA,MACF,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,EACf;AAEJ,GAEaC,IAA8B;AAAA,EACzC,MAAM;AACR;AAQO,SAASC,EAAc;AAAA,EAC5B,MAAAC,IAAOF,EAA4B;AACrC,IAA4B,IAAI;AAC9B,SAAOG;AAAA,IACL;AAAA,IACAJ,EAAoB,KAAKG,CAAI,EAAE;AAAA,EAAA;AAEnC;AAWO,SAASE,EAAM;AAAA,EACpB,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,aAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAAP,IAAO;AAAA,EACP,WAAAQ;AACF,GAAe;AACb,QAAM,CAACC,GAAkBC,CAAmB,IAAIC,EAAkB,EAAK;AAEvE,SACE,gBAAAC,EAAC,OAAA,EAAI,WAAWX,EAAGF,EAAc,EAAE,MAAAC,EAAA,CAAM,GAAGQ,CAAS,GAClD,UAAA;AAAA,IAAAL;AAAA,IACD,gBAAAU,EAAC,MAAA,EAAG,WAAU,0BAA0B,UAAAT,GAAM;AAAA,IAE7CC,KACC,gBAAAQ,EAAC,KAAA,EAAE,WAAU,0CAA0C,UAAAR,GAAY;AAAA,IAGpEC,KACC,gBAAAM;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWX;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,QAGF,UAAA;AAAA,UAAA,gBAAAY,EAAC,QAAA,EAAK,WAAU,0CAAyC,UAAA,KAAC;AAAA,UAC1D,gBAAAA,EAAC,QAAA,EAAK,WAAU,8EACb,UAAAP,GACH;AAAA,UACA,gBAAAO;AAAA,YAACC;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,MAAK;AAAA,cACL,SAAQ;AAAA,cACR,OAAM;AAAA,cACN,cAAW;AAAA,cACX,SAAS,YAAY;AACnB,gBAAAJ,EAAoB,EAAI,GACxB,WAAW,MAAM;AACf,kBAAAA,EAAoB,EAAK;AAAA,gBAC3B,GAAG,GAAI,GACP,MAAM,UAAU,UAAU,UAAUJ,CAAW;AAAA,cACjD;AAAA,cAEC,cACC,gBAAAO,EAACE,GAAA,EAAU,MAAM,IAAI,WAAU,uCAAsC,IAErE,gBAAAF;AAAA,gBAACG;AAAA,gBAAA;AAAA,kBACC,MAAM;AAAA,kBACN,WAAU;AAAA,gBAAA;AAAA,cAAA;AAAA,YACZ;AAAA,UAAA;AAAA,QAEJ;AAAA,MAAA;AAAA,IAAA;AAAA,IAIHT;AAAA,EAAA,GACH;AAEJ;"}
+{"version":3,"file":"empty-D03cbzRS.js","sources":["../src/components/empty/empty.tsx"],"sourcesContent":["import { CheckIcon, CopyIcon } from \"@phosphor-icons/react\";\nimport { useState } from \"react\";\nimport { Button } from \"../../components/button\";\nimport { cn } from \"../../utils/cn\";\n\nexport const KUMO_EMPTY_VARIANTS = {\n  size: {\n    sm: {\n      classes: \"px-6 py-8 gap-4\",\n      description: \"Compact empty state for smaller containers\",\n    },\n    base: {\n      classes: \"px-10 py-16 gap-6\",\n      description: \"Default empty state size\",\n    },\n    lg: {\n      classes: \"px-12 py-20 gap-8\",\n      description: \"Large empty state for prominent placement\",\n    },\n  },\n} as const;\n\nexport const KUMO_EMPTY_DEFAULT_VARIANTS = {\n  size: \"base\",\n} as const;\n\nexport type KumoEmptySize = keyof typeof KUMO_EMPTY_VARIANTS.size;\n\nexport interface KumoEmptyVariantsProps {\n  size?: KumoEmptySize;\n}\n\nexport function emptyVariants({\n  size = KUMO_EMPTY_DEFAULT_VARIANTS.size,\n}: KumoEmptyVariantsProps = {}) {\n  return cn(\n    \"flex w-full flex-col items-center rounded-xl border border-kumo-fill bg-kumo-control text-kumo-default\",\n    KUMO_EMPTY_VARIANTS.size[size].classes,\n  );\n}\n\nexport interface EmptyProps extends KumoEmptyVariantsProps {\n  icon?: React.ReactNode;\n  title: string;\n  description?: string;\n  commandLine?: string;\n  contents?: React.ReactNode;\n  className?: string;\n}\n\nexport function Empty({\n  icon,\n  title,\n  description,\n  commandLine,\n  contents,\n  size = \"base\",\n  className,\n}: EmptyProps) {\n  const [emptyStateCopied, setEmptyStateCopied] = useState<boolean>(false);\n\n  return (\n    <div className={cn(emptyVariants({ size }), className)}>\n      {icon}\n      <h2 className=\"text-2xl font-semibold\">{title}</h2>\n\n      {description && (\n        <p className=\"max-w-140 text-center text-kumo-strong\">{description}</p>\n      )}\n\n      {commandLine && (\n        <div\n          className={cn(\n            \"group/cmd relative inline-flex h-10 max-w-8/10 transform-gpu items-center gap-2 rounded-lg font-mono shadow-sm\",\n            \"bg-kumo-overlay pr-2 pl-3\",\n            \"transition-all duration-300 hover:border-kumo-interact/80 hover:shadow-md\",\n            \"border border-kumo-fill/60\",\n          )}\n        >\n          <span className=\"text-xs text-kumo-inactive select-none\">$</span>\n          <span className=\"no-scrollbar overflow-scroll text-[14px] whitespace-nowrap text-kumo-brand\">\n            {commandLine}\n          </span>\n          <Button\n            className=\"group\"\n            size=\"sm\"\n            variant=\"ghost\"\n            shape=\"square\"\n            aria-label=\"Copy command\"\n            onClick={async () => {\n              setEmptyStateCopied(true);\n              setTimeout(() => {\n                setEmptyStateCopied(false);\n              }, 1000);\n              await navigator.clipboard.writeText(commandLine);\n            }}\n          >\n            {emptyStateCopied ? (\n              <CheckIcon size={16} className=\"animate-bounce-in text-kumo-success\" />\n            ) : (\n              <CopyIcon\n                size={16}\n                className=\"text-kumo-inactive group-hover:text-kumo-brand\"\n              />\n            )}\n          </Button>\n        </div>\n      )}\n\n      {contents}\n    </div>\n  );\n}\n"],"names":["KUMO_EMPTY_VARIANTS","KUMO_EMPTY_DEFAULT_VARIANTS","emptyVariants","size","cn","Empty","icon","title","description","commandLine","contents","className","emptyStateCopied","setEmptyStateCopied","useState","jsxs","jsx","Button","CheckIcon","CopyIcon"],"mappings":";;;;;;AAKO,MAAMA,IAAsB;AAAA,EACjC,MAAM;AAAA,IACJ,IAAI;AAAA,MACF,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,IAAI;AAAA,MACF,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,EACf;AAEJ,GAEaC,IAA8B;AAAA,EACzC,MAAM;AACR;AAQO,SAASC,EAAc;AAAA,EAC5B,MAAAC,IAAOF,EAA4B;AACrC,IAA4B,IAAI;AAC9B,SAAOG;AAAA,IACL;AAAA,IACAJ,EAAoB,KAAKG,CAAI,EAAE;AAAA,EAAA;AAEnC;AAWO,SAASE,EAAM;AAAA,EACpB,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,aAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAAP,IAAO;AAAA,EACP,WAAAQ;AACF,GAAe;AACb,QAAM,CAACC,GAAkBC,CAAmB,IAAIC,EAAkB,EAAK;AAEvE,SACE,gBAAAC,EAAC,OAAA,EAAI,WAAWX,EAAGF,EAAc,EAAE,MAAAC,EAAA,CAAM,GAAGQ,CAAS,GAClD,UAAA;AAAA,IAAAL;AAAA,IACD,gBAAAU,EAAC,MAAA,EAAG,WAAU,0BAA0B,UAAAT,GAAM;AAAA,IAE7CC,KACC,gBAAAQ,EAAC,KAAA,EAAE,WAAU,0CAA0C,UAAAR,GAAY;AAAA,IAGpEC,KACC,gBAAAM;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWX;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,QAGF,UAAA;AAAA,UAAA,gBAAAY,EAAC,QAAA,EAAK,WAAU,0CAAyC,UAAA,KAAC;AAAA,UAC1D,gBAAAA,EAAC,QAAA,EAAK,WAAU,8EACb,UAAAP,GACH;AAAA,UACA,gBAAAO;AAAA,YAACC;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,MAAK;AAAA,cACL,SAAQ;AAAA,cACR,OAAM;AAAA,cACN,cAAW;AAAA,cACX,SAAS,YAAY;AACnB,gBAAAJ,EAAoB,EAAI,GACxB,WAAW,MAAM;AACf,kBAAAA,EAAoB,EAAK;AAAA,gBAC3B,GAAG,GAAI,GACP,MAAM,UAAU,UAAU,UAAUJ,CAAW;AAAA,cACjD;AAAA,cAEC,cACC,gBAAAO,EAACE,GAAA,EAAU,MAAM,IAAI,WAAU,uCAAsC,IAErE,gBAAAF;AAAA,gBAACG;AAAA,gBAAA;AAAA,kBACC,MAAM;AAAA,kBACN,WAAU;AAAA,gBAAA;AAAA,cAAA;AAAA,YACZ;AAAA,UAAA;AAAA,QAEJ;AAAA,MAAA;AAAA,IAAA;AAAA,IAIHT;AAAA,EAAA,GACH;AAEJ;"}

package/dist/{field-V3J0Ql_V.js → field-B7ORz5ej.js}

@@ -1,8 +1,8 @@
 "use client";
 import { jsxs as h, jsx as e } from "react/jsx-runtime";
 import { c as a } from "./cn-Bhsu1vx2.js";
-import { L as m } from "./label-87HQArUG.js";
-import { K as f, L as p, av as u, aw as x } from "./vendor-base-ui-DWIDNgE1.js";
+import { L as m } from "./label-B4FY8MX_.js";
+import { K as f, L as p, av as u, aw as x } from "./vendor-base-ui-kX0wjdav.js";
 const g = {
   // Field currently has no variant options but structure is ready for future additions
 }, L = {};
@@ -68,4 +68,4 @@ export {
   L as a,
   d as f
 };
-//# sourceMappingURL=field-V3J0Ql_V.js.map
+//# sourceMappingURL=field-B7ORz5ej.js.map

package/dist/{field-V3J0Ql_V.js.map → field-B7ORz5ej.js.map}

@@ -1 +1 @@
-{"version":3,"file":"field-V3J0Ql_V.js","sources":["../src/components/field/field.tsx"],"sourcesContent":["import { Field as FieldBase } from \"@base-ui/react/field\";\nimport type { ReactNode } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Label } from \"../label\";\n\nexport const KUMO_FIELD_VARIANTS = {\n  // Field currently has no variant options but structure is ready for future additions\n} as const;\n\nexport const KUMO_FIELD_DEFAULT_VARIANTS = {} as const;\n\n// Derived types from KUMO_FIELD_VARIANTS\nexport interface KumoFieldVariantsProps {\n  /**\n   * When true, places the control (checkbox/switch) before the label visually.\n   * When false (default), places the label before the control.\n   * Used to support different layout patterns (e.g., iOS-style toggles on the right).\n   */\n  controlFirst?: boolean;\n}\n\nexport function fieldVariants({\n  controlFirst = false,\n}: KumoFieldVariantsProps = {}) {\n  return cn(\n    // Base styles - vertical layout (default)\n    \"grid gap-2\",\n\n    // Horizontal layout for checkbox and switch\n    // Default: Grid auto-reverses in RTL (desired)\n    \"has-[input[type=checkbox]]:grid-cols-[auto_1fr] has-[input[type=checkbox]]:items-center\",\n    \"has-[[role=switch]]:grid-cols-[auto_1fr] has-[[role=switch]]:items-center\",\n\n    // Control first: use flexbox with row-reverse to flip visual order without affecting text direction\n    // flex-row-reverse in LTR: Control→Label, in RTL: Label→Control (opposite of grid default)\n    controlFirst && [\n      \"has-[input[type=checkbox]]:flex has-[input[type=checkbox]]:flex-row-reverse has-[input[type=checkbox]]:flex-wrap has-[input[type=checkbox]]:items-center\",\n      \"has-[[role=switch]]:flex has-[[role=switch]]:flex-row-reverse has-[[role=switch]]:flex-wrap has-[[role=switch]]:items-center\",\n      \"[&>label]:flex-1\",\n    ],\n  );\n}\n\n/**\n * Match type for field validation errors.\n * Can be a boolean or a key from the browser's ValidityState interface.\n * Source: BaseErrorProps[\"match\"] (ComponentPropsWithoutRef<typeof FieldBase.Error>)\n */\nexport type FieldErrorMatch =\n  | boolean\n  | \"badInput\"\n  | \"customError\"\n  | \"patternMismatch\"\n  | \"rangeOverflow\"\n  | \"rangeUnderflow\"\n  | \"stepMismatch\"\n  | \"tooLong\"\n  | \"tooShort\"\n  | \"typeMismatch\"\n  | \"valid\"\n  | \"valueMissing\";\n\nexport interface FieldProps extends KumoFieldVariantsProps {\n  children: ReactNode;\n  /** The label content - can be a string or any React node */\n  label: ReactNode;\n  /**\n   * When explicitly false, shows gray \"(optional)\" text after the label.\n   * When true or undefined, no indicator is shown.\n   */\n  required?: boolean;\n  /** Tooltip content to display next to the label via an info icon */\n  labelTooltip?: ReactNode;\n  error?: {\n    message: ReactNode;\n    match: FieldErrorMatch;\n  };\n  description?: ReactNode;\n  controlFirst?: boolean;\n}\n\nexport function Field({\n  children,\n  label,\n  required,\n  labelTooltip,\n  error,\n  description,\n  controlFirst = false,\n}: FieldProps) {\n  // Show \"(optional)\" when required is explicitly false\n  const showOptional = required === false;\n\n  return (\n    <FieldBase.Root className={fieldVariants({ controlFirst })}>\n      <FieldBase.Label className=\"text-base font-medium text-kumo-default\">\n        <Label showOptional={showOptional} tooltip={labelTooltip} asContent>\n          {label}\n        </Label>\n      </FieldBase.Label>\n      {children}\n      {error ? (\n        <FieldBase.Error\n          className={cn(\n            \"text-sm text-kumo-danger\",\n            // Span full width in horizontal layout\n            \"col-span-full\",\n          )}\n          match={error.match}\n        >\n          {error.message}\n        </FieldBase.Error>\n      ) : (\n        description && (\n          <FieldBase.Description\n            className={cn(\n              \"text-sm leading-snug text-kumo-subtle\",\n              // Span full width in horizontal layout\n              \"col-span-full\",\n            )}\n          >\n            {description}\n          </FieldBase.Description>\n        )\n      )}\n    </FieldBase.Root>\n  );\n}\n"],"names":["KUMO_FIELD_VARIANTS","KUMO_FIELD_DEFAULT_VARIANTS","fieldVariants","controlFirst","cn","Field","children","label","required","labelTooltip","error","description","showOptional","jsxs","FieldBase.Root","jsx","FieldBase.Label","Label","FieldBase.Error","FieldBase.Description"],"mappings":";;;;;AAKO,MAAMA,IAAsB;AAAA;AAEnC,GAEaC,IAA8B,CAAA;AAYpC,SAASC,EAAc;AAAA,EAC5B,cAAAC,IAAe;AACjB,IAA4B,IAAI;AAC9B,SAAOC;AAAA;AAAA,IAEL;AAAA;AAAA;AAAA,IAIA;AAAA,IACA;AAAA;AAAA;AAAA,IAIAD,KAAgB;AAAA,MACd;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,EACF;AAEJ;AAwCO,SAASE,EAAM;AAAA,EACpB,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,cAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAR,IAAe;AACjB,GAAe;AAEb,QAAMS,IAAeJ,MAAa;AAElC,SACE,gBAAAK,EAACC,GAAA,EAAe,WAAWZ,EAAc,EAAE,cAAAC,EAAA,CAAc,GACvD,UAAA;AAAA,IAAA,gBAAAY,EAACC,GAAA,EAAgB,WAAU,2CACzB,UAAA,gBAAAD,EAACE,GAAA,EAAM,cAAAL,GAA4B,SAASH,GAAc,WAAS,IAChE,aACH,GACF;AAAA,IACCH;AAAA,IACAI,IACC,gBAAAK;AAAA,MAACG;AAAAA,MAAA;AAAA,QACC,WAAWd;AAAA,UACT;AAAA;AAAA,UAEA;AAAA,QAAA;AAAA,QAEF,OAAOM,EAAM;AAAA,QAEZ,UAAAA,EAAM;AAAA,MAAA;AAAA,IAAA,IAGTC,KACE,gBAAAI;AAAA,MAACI;AAAAA,MAAA;AAAA,QACC,WAAWf;AAAA,UACT;AAAA;AAAA,UAEA;AAAA,QAAA;AAAA,QAGD,UAAAO;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GAGN;AAEJ;"}
+{"version":3,"file":"field-B7ORz5ej.js","sources":["../src/components/field/field.tsx"],"sourcesContent":["import { Field as FieldBase } from \"@base-ui/react/field\";\nimport type { ReactNode } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Label } from \"../label\";\n\nexport const KUMO_FIELD_VARIANTS = {\n  // Field currently has no variant options but structure is ready for future additions\n} as const;\n\nexport const KUMO_FIELD_DEFAULT_VARIANTS = {} as const;\n\n// Derived types from KUMO_FIELD_VARIANTS\nexport interface KumoFieldVariantsProps {\n  /**\n   * When true, places the control (checkbox/switch) before the label visually.\n   * When false (default), places the label before the control.\n   * Used to support different layout patterns (e.g., iOS-style toggles on the right).\n   */\n  controlFirst?: boolean;\n}\n\nexport function fieldVariants({\n  controlFirst = false,\n}: KumoFieldVariantsProps = {}) {\n  return cn(\n    // Base styles - vertical layout (default)\n    \"grid gap-2\",\n\n    // Horizontal layout for checkbox and switch\n    // Default: Grid auto-reverses in RTL (desired)\n    \"has-[input[type=checkbox]]:grid-cols-[auto_1fr] has-[input[type=checkbox]]:items-center\",\n    \"has-[[role=switch]]:grid-cols-[auto_1fr] has-[[role=switch]]:items-center\",\n\n    // Control first: use flexbox with row-reverse to flip visual order without affecting text direction\n    // flex-row-reverse in LTR: Control→Label, in RTL: Label→Control (opposite of grid default)\n    controlFirst && [\n      \"has-[input[type=checkbox]]:flex has-[input[type=checkbox]]:flex-row-reverse has-[input[type=checkbox]]:flex-wrap has-[input[type=checkbox]]:items-center\",\n      \"has-[[role=switch]]:flex has-[[role=switch]]:flex-row-reverse has-[[role=switch]]:flex-wrap has-[[role=switch]]:items-center\",\n      \"[&>label]:flex-1\",\n    ],\n  );\n}\n\n/**\n * Match type for field validation errors.\n * Can be a boolean or a key from the browser's ValidityState interface.\n * Source: BaseErrorProps[\"match\"] (ComponentPropsWithoutRef<typeof FieldBase.Error>)\n */\nexport type FieldErrorMatch =\n  | boolean\n  | \"badInput\"\n  | \"customError\"\n  | \"patternMismatch\"\n  | \"rangeOverflow\"\n  | \"rangeUnderflow\"\n  | \"stepMismatch\"\n  | \"tooLong\"\n  | \"tooShort\"\n  | \"typeMismatch\"\n  | \"valid\"\n  | \"valueMissing\";\n\nexport interface FieldProps extends KumoFieldVariantsProps {\n  children: ReactNode;\n  /** The label content - can be a string or any React node */\n  label: ReactNode;\n  /**\n   * When explicitly false, shows gray \"(optional)\" text after the label.\n   * When true or undefined, no indicator is shown.\n   */\n  required?: boolean;\n  /** Tooltip content to display next to the label via an info icon */\n  labelTooltip?: ReactNode;\n  error?: {\n    message: ReactNode;\n    match: FieldErrorMatch;\n  };\n  description?: ReactNode;\n  controlFirst?: boolean;\n}\n\nexport function Field({\n  children,\n  label,\n  required,\n  labelTooltip,\n  error,\n  description,\n  controlFirst = false,\n}: FieldProps) {\n  // Show \"(optional)\" when required is explicitly false\n  const showOptional = required === false;\n\n  return (\n    <FieldBase.Root className={fieldVariants({ controlFirst })}>\n      <FieldBase.Label className=\"text-base font-medium text-kumo-default\">\n        <Label showOptional={showOptional} tooltip={labelTooltip} asContent>\n          {label}\n        </Label>\n      </FieldBase.Label>\n      {children}\n      {error ? (\n        <FieldBase.Error\n          className={cn(\n            \"text-sm text-kumo-danger\",\n            // Span full width in horizontal layout\n            \"col-span-full\",\n          )}\n          match={error.match}\n        >\n          {error.message}\n        </FieldBase.Error>\n      ) : (\n        description && (\n          <FieldBase.Description\n            className={cn(\n              \"text-sm leading-snug text-kumo-subtle\",\n              // Span full width in horizontal layout\n              \"col-span-full\",\n            )}\n          >\n            {description}\n          </FieldBase.Description>\n        )\n      )}\n    </FieldBase.Root>\n  );\n}\n"],"names":["KUMO_FIELD_VARIANTS","KUMO_FIELD_DEFAULT_VARIANTS","fieldVariants","controlFirst","cn","Field","children","label","required","labelTooltip","error","description","showOptional","jsxs","FieldBase.Root","jsx","FieldBase.Label","Label","FieldBase.Error","FieldBase.Description"],"mappings":";;;;;AAKO,MAAMA,IAAsB;AAAA;AAEnC,GAEaC,IAA8B,CAAA;AAYpC,SAASC,EAAc;AAAA,EAC5B,cAAAC,IAAe;AACjB,IAA4B,IAAI;AAC9B,SAAOC;AAAA;AAAA,IAEL;AAAA;AAAA;AAAA,IAIA;AAAA,IACA;AAAA;AAAA;AAAA,IAIAD,KAAgB;AAAA,MACd;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,EACF;AAEJ;AAwCO,SAASE,EAAM;AAAA,EACpB,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,cAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAR,IAAe;AACjB,GAAe;AAEb,QAAMS,IAAeJ,MAAa;AAElC,SACE,gBAAAK,EAACC,GAAA,EAAe,WAAWZ,EAAc,EAAE,cAAAC,EAAA,CAAc,GACvD,UAAA;AAAA,IAAA,gBAAAY,EAACC,GAAA,EAAgB,WAAU,2CACzB,UAAA,gBAAAD,EAACE,GAAA,EAAM,cAAAL,GAA4B,SAASH,GAAc,WAAS,IAChE,aACH,GACF;AAAA,IACCH;AAAA,IACAI,IACC,gBAAAK;AAAA,MAACG;AAAAA,MAAA;AAAA,QACC,WAAWd;AAAA,UACT;AAAA;AAAA,UAEA;AAAA,QAAA;AAAA,QAEF,OAAOM,EAAM;AAAA,QAEZ,UAAAA,EAAM;AAAA,MAAA;AAAA,IAAA,IAGTC,KACE,gBAAAI;AAAA,MAACI;AAAAA,MAAA;AAAA,QACC,WAAWf;AAAA,UACT;AAAA;AAAA,UAEA;AAAA,QAAA;AAAA,QAGD,UAAAO;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GAGN;AAEJ;"}

package/dist/index.js

@@ -1,125 +1,126 @@
 "use client";
 import { B as r } from "./badge-Dc99vsfo.js";
 import { B as e, a as t } from "./banner-4fkH6Sbt.js";
-import { B as i, L as m, R as A, b as n } from "./button-E2-hZMZE.js";
+import { B as i, L as m, R as A, b as n } from "./button-Bh96oxRL.js";
 import { D as f } from "./date-range-picker-CbKEQ9pi.js";
-import { C as _ } from "./checkbox-BexIU_lZ.js";
-import { C as L } from "./clipboard-text-BFHWMjmr.js";
+import { C as _ } from "./checkbox-C1LPq8eL.js";
+import { C as L } from "./clipboard-text-CJSI9X2m.js";
 import { C as R, a as S } from "./code-T2wPDiM0.js";
-import { C as D } from "./combobox-Dld0kS0U.js";
-import { D as M, e as U, d as N, a as E, c as O, b as d } from "./dialog-B1TaN0oR.js";
-import { D as C } from "./dropdown-D0rhYKeG.js";
-import { C as P } from "./collapsible-OBNkTO48.js";
-import { F as B, a as c, K as F, f as k } from "./field-V3J0Ql_V.js";
-import { b as v, K as h, L as y, a as w, l as j } from "./label-87HQArUG.js";
-import { I as z, i as H } from "./input-Dqvc2AB_.js";
-import { I as Q } from "./input-area-B9qajxvZ.js";
-import { I as X } from "./input-group-Bl6tgD5-.js";
+import { C as D } from "./combobox-CWxn5aHA.js";
+import { D as M, e as U, d as N, a as u, c as E, b as O } from "./dialog-BxXPA2vI.js";
+import { D as C } from "./dropdown-BAyk1knz.js";
+import { C as g } from "./collapsible-OBNkTO48.js";
+import { F as B, a as c, K as F, f as k } from "./field-B7ORz5ej.js";
+import { b as v, K as h, L as y, a as w, l as j } from "./label-B4FY8MX_.js";
+import { I as z, i as H } from "./input-D6YgDfDG.js";
+import { I as Q } from "./input-area-DN_Ncliw.js";
+import { I as X } from "./input-group-BXzBwH4p.js";
 import { L as Z } from "./layer-card-C8j5Hkkj.js";
 import { L as aa } from "./loader-DHGMYlC6.js";
 import { S as ra } from "./skeleton-line-CtpS1u1J.js";
-import { M as ea, u as ta } from "./menubar-DLwLRFB1.js";
-import { M as ia } from "./meter-DKUuvXxS.js";
-import { P as Aa } from "./pagination-C4HQqodz.js";
-import { S as Ta } from "./select-B5Vb3zou.js";
+import { M as ea, u as ta } from "./menubar-CzimiryS.js";
+import { M as ia } from "./meter-BrJnHJ3Q.js";
+import { P as Aa } from "./pagination-D0x9KQSk.js";
+import { S as Ta } from "./select-D4rKQAax.js";
 import { S as xa } from "./surface-BIC6CXiz.js";
-import { S as Ia } from "./switch-D4duMhJ0.js";
-import { T as la } from "./tabs-lQup-IbT.js";
-import { T as Sa } from "./table-KuvHGpL8.js";
+import { S as Ia } from "./switch-z7FE1nQE.js";
+import { T as la } from "./tabs-DAEeuQLd.js";
+import { T as Sa } from "./table-Sd2Etb1N.js";
 import { T as Da } from "./text-BEhqwMfe.js";
-import { T as Ma } from "./toast-8YyyQuqZ.js";
-import { T as Na, a as Ea } from "./tooltip-DJWsDTWJ.js";
-import { a as da, K as ua, P as Ca } from "./popover-DhdIqrP7.js";
-import { a as Pa, K as ga, S as Ba } from "./sensitive-input-D5HCV04N.js";
-import { b as Fa, K as ka, R as Ga, a as va } from "./radio-BVAG7hNp.js";
-import { C as ya, a as wa, K as ja } from "./command-palette-BgQ680BG.js";
-import { a as za, K as Ha, L as Ja, l as Qa } from "./link-6TIZ4JIw.js";
-import { B as Xa } from "./breadcrumbs-B5SY2CWj.js";
-import { E as Za } from "./empty-DzCqjea-.js";
-import { G as ao, a as oo, c as ro, K as so, b as eo, g as to } from "./grid-DKajRHh8.js";
-import { c as io, s as mo } from "./cn-Bhsu1vx2.js";
-import { L as no, u as To } from "./link-provider-DPBGo-0n.js";
-import { i as xo } from "./vendor-base-ui-DWIDNgE1.js";
+import { T as Ma, u as Ua } from "./toast-B8ebpHaU.js";
+import { T as ua, a as Ea } from "./tooltip-C4DRhJi1.js";
+import { a as da, K as Ca, P as ba } from "./popover-BfGLC2s6.js";
+import { a as Pa, K as Ba, S as ca } from "./sensitive-input-DYvAmxkN.js";
+import { b as ka, K as Ga, R as va, a as ha } from "./radio-CYejLANA.js";
+import { C as wa, a as ja, K as qa } from "./command-palette-BxmGYxBv.js";
+import { a as Ha, K as Ja, L as Qa, l as Wa } from "./link-CcuZKqob.js";
+import { B as Ya } from "./breadcrumbs-DyKi7BcP.js";
+import { E as $a } from "./empty-D03cbzRS.js";
+import { G as oo, a as ro, c as so, K as eo, b as to, g as po } from "./grid-DKajRHh8.js";
+import { c as mo, s as Ao } from "./cn-Bhsu1vx2.js";
+import { L as To, u as fo } from "./link-provider-DPBGo-0n.js";
+import { i as _o } from "./vendor-base-ui-kX0wjdav.js";
 export {
   r as Badge,
   e as Banner,
   t as BannerVariant,
-  Xa as Breadcrumbs,
+  Ya as Breadcrumbs,
   i as Button,
   _ as Checkbox,
   L as ClipboardText,
   R as Code,
   S as CodeBlock,
-  P as Collapsible,
+  g as Collapsible,
   D as Combobox,
-  ya as CommandPalette,
+  wa as CommandPalette,
   f as DateRangePicker,
   M as Dialog,
   U as DialogClose,
   N as DialogDescription,
-  E as DialogRoot,
-  O as DialogTitle,
-  d as DialogTrigger,
+  u as DialogRoot,
+  E as DialogTitle,
+  O as DialogTrigger,
   C as DropdownMenu,
-  Za as Empty,
+  $a as Empty,
   B as Field,
-  ao as Grid,
-  oo as GridItem,
+  oo as Grid,
+  ro as GridItem,
   z as Input,
   Q as InputArea,
   X as InputGroup,
-  wa as KUMO_COMMAND_PALETTE_DEFAULT_VARIANTS,
-  ja as KUMO_COMMAND_PALETTE_VARIANTS,
+  ja as KUMO_COMMAND_PALETTE_DEFAULT_VARIANTS,
+  qa as KUMO_COMMAND_PALETTE_VARIANTS,
   c as KUMO_FIELD_DEFAULT_VARIANTS,
   F as KUMO_FIELD_VARIANTS,
-  ro as KUMO_GRID_DEFAULT_VARIANTS,
-  so as KUMO_GRID_VARIANTS,
+  so as KUMO_GRID_DEFAULT_VARIANTS,
+  eo as KUMO_GRID_VARIANTS,
   v as KUMO_LABEL_DEFAULT_VARIANTS,
   h as KUMO_LABEL_VARIANTS,
-  za as KUMO_LINK_DEFAULT_VARIANTS,
-  Ha as KUMO_LINK_VARIANTS,
+  Ha as KUMO_LINK_DEFAULT_VARIANTS,
+  Ja as KUMO_LINK_VARIANTS,
   da as KUMO_POPOVER_DEFAULT_VARIANTS,
-  ua as KUMO_POPOVER_VARIANTS,
-  Fa as KUMO_RADIO_DEFAULT_VARIANTS,
-  ka as KUMO_RADIO_VARIANTS,
+  Ca as KUMO_POPOVER_VARIANTS,
+  ka as KUMO_RADIO_DEFAULT_VARIANTS,
+  Ga as KUMO_RADIO_VARIANTS,
   Pa as KUMO_SENSITIVE_INPUT_DEFAULT_VARIANTS,
-  ga as KUMO_SENSITIVE_INPUT_VARIANTS,
+  Ba as KUMO_SENSITIVE_INPUT_VARIANTS,
   y as Label,
   Z as LayerCard,
-  Ja as Link,
+  Qa as Link,
   m as LinkButton,
-  no as LinkProvider,
+  To as LinkProvider,
   aa as Loader,
   ea as MenuBar,
   ia as Meter,
   Aa as Pagination,
-  Ca as Popover,
-  Ga as Radio,
-  va as RadioGroup,
+  ba as Popover,
+  va as Radio,
+  ha as RadioGroup,
   A as RefreshButton,
   Ta as Select,
-  Ba as SensitiveInput,
+  ca as SensitiveInput,
   ra as SkeletonLine,
   xa as Surface,
   Ia as Switch,
   Sa as Table,
   la as Tabs,
   Da as Text,
-  xo as Toast,
+  _o as Toast,
   Ma as Toasty,
-  Na as Tooltip,
+  ua as Tooltip,
   Ea as TooltipProvider,
   n as buttonVariants,
-  io as cn,
+  mo as cn,
   k as fieldVariants,
-  eo as gridItemVariants,
-  to as gridVariants,
+  to as gridItemVariants,
+  po as gridVariants,
   H as inputVariants,
   w as labelContentVariants,
   j as labelVariants,
-  Qa as linkVariants,
-  mo as safeRandomId,
-  To as useLinkComponent,
+  Wa as linkVariants,
+  Ao as safeRandomId,
+  Ua as useKumoToastManager,
+  fo as useLinkComponent,
   ta as useMenuNavigation
 };
 //# sourceMappingURL=index.js.map

package/dist/{input-Dqvc2AB_.js → input-D6YgDfDG.js}

@@ -2,8 +2,8 @@
 import { jsx as l } from "react/jsx-runtime";
 import { c as p } from "./cn-Bhsu1vx2.js";
 import { forwardRef as I } from "react";
-import { F as k } from "./field-V3J0Ql_V.js";
-import { I as v } from "./vendor-base-ui-DWIDNgE1.js";
+import { F as k } from "./field-B7ORz5ej.js";
+import { I as v } from "./vendor-base-ui-kX0wjdav.js";
 const u = {
   size: {
     xs: {
@@ -106,4 +106,4 @@ export {
   u as K,
   N as i
 };
-//# sourceMappingURL=input-Dqvc2AB_.js.map
+//# sourceMappingURL=input-D6YgDfDG.js.map

package/dist/{input-Dqvc2AB_.js.map → input-D6YgDfDG.js.map}

@@ -1 +1 @@
-{"version":3,"file":"input-Dqvc2AB_.js","sources":["../src/components/input/input.tsx"],"sourcesContent":["import { cn } from \"../../utils/cn\";\nimport {\n  forwardRef,\n  type ComponentPropsWithoutRef,\n  type ReactNode,\n} from \"react\";\nimport { Input as BaseInput } from \"@base-ui/react/input\";\nimport { Field, type FieldErrorMatch } from \"../field/field\";\n\nexport const KUMO_INPUT_VARIANTS = {\n  size: {\n    xs: {\n      classes: \"h-5 gap-1 rounded-sm px-1.5 text-xs\",\n      description: \"Extra small input for compact UIs\",\n    },\n    sm: {\n      classes: \"h-6.5 gap-1 rounded-md px-2 text-xs\",\n      description: \"Small input for secondary fields\",\n    },\n    base: {\n      classes: \"h-9 gap-1.5 rounded-lg px-3 text-base\",\n      description: \"Default input size\",\n    },\n    lg: {\n      classes: \"h-10 gap-2 rounded-lg px-4 text-base\",\n      description: \"Large input for prominent fields\",\n    },\n  },\n  variant: {\n    default: {\n      classes: \"focus:ring-kumo-ring\",\n      description: \"Default input appearance\",\n    },\n    error: {\n      classes: \"!ring-kumo-danger focus:ring-kumo-danger\",\n      description: \"Error state for validation failures\",\n    },\n  },\n} as const;\n\nexport const KUMO_INPUT_DEFAULT_VARIANTS = {\n  size: \"base\",\n  variant: \"default\",\n} as const;\n\nexport const KUMO_INPUT_STYLING = {\n  dimensions: {\n    xs: { height: 20, paddingX: 6, fontSize: 12, borderRadius: 2, width: 160 },\n    sm: { height: 26, paddingX: 8, fontSize: 12, borderRadius: 6, width: 200 },\n    base: {\n      height: 36,\n      paddingX: 12,\n      fontSize: 16,\n      borderRadius: 8,\n      width: 280,\n    },\n    lg: { height: 40, paddingX: 16, fontSize: 16, borderRadius: 8, width: 320 },\n  },\n  baseTokens: {\n    background: \"color-secondary\",\n    text: \"text-color-surface\",\n    placeholder: \"text-color-muted\",\n    ring: \"color-border\",\n  },\n  stateTokens: {\n    focus: { ring: \"color-active\" },\n    error: { ring: \"color-error\" },\n    disabled: { opacity: 0.5, text: \"text-color-muted\" },\n  },\n} as const;\n\n// Derived types from KUMO_INPUT_VARIANTS\nexport type KumoInputSize = keyof typeof KUMO_INPUT_VARIANTS.size;\nexport type KumoInputVariant = keyof typeof KUMO_INPUT_VARIANTS.variant;\n\nexport interface KumoInputVariantsProps {\n  size?: KumoInputSize;\n  variant?: KumoInputVariant;\n  parentFocusIndicator?: boolean;\n  focusIndicator?: boolean;\n}\n\n// Omit native `size` attribute (number) to avoid conflict with our custom `size` variant\ntype BaseInputProps = Omit<ComponentPropsWithoutRef<typeof BaseInput>, \"size\">;\n\nexport function inputVariants({\n  variant = KUMO_INPUT_DEFAULT_VARIANTS.variant,\n  size = KUMO_INPUT_DEFAULT_VARIANTS.size,\n  parentFocusIndicator = false,\n  focusIndicator = false,\n}: KumoInputVariantsProps = {}) {\n  return cn(\n    // Base styles\n    \"border-0 bg-kumo-control text-kumo-default ring ring-kumo-line\",\n    // Disabled state and placeholder styles\n    \"outline-none placeholder:text-kumo-subtle disabled:text-kumo-subtle\",\n    // Apply size styles from KUMO_INPUT_VARIANTS\n    KUMO_INPUT_VARIANTS.size[size].classes,\n    // Apply variant styles from KUMO_INPUT_VARIANTS\n    KUMO_INPUT_VARIANTS.variant[variant].classes,\n    // Focus state handling\n    parentFocusIndicator && \"[&:has(:focus-within)]:ring-kumo-ring\",\n    focusIndicator && \"focus:ring-kumo-ring\",\n  );\n}\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => {\n  const {\n    className,\n    size = \"base\",\n    variant = \"default\",\n    label,\n    labelTooltip,\n    description,\n    error,\n    ...inputProps\n  } = props;\n\n  // Extract required from inputProps to pass to Field for label decoration\n  const { required } = inputProps;\n\n  // A11y enforcement: warn in dev if no accessible name provided\n  if (process.env.NODE_ENV !== \"production\") {\n    const hasLabel = Boolean(label);\n    const hasPlaceholderAndAriaLabel = Boolean(\n      inputProps.placeholder && inputProps[\"aria-label\"],\n    );\n    const hasAriaLabelledBy = Boolean(inputProps[\"aria-labelledby\"]);\n\n    if (!hasLabel && !hasPlaceholderAndAriaLabel && !hasAriaLabelledBy) {\n      console.warn(\n        \"[Kumo Input]: Input must have an accessible name. Provide either:\\n\" +\n          \"  - label prop: <Input label='Email' />\\n\" +\n          \"  - placeholder + aria-label: <Input placeholder='Email' aria-label='Email address' />\\n\" +\n          \"  - aria-labelledby for custom label association\",\n      );\n    }\n  }\n\n  const input = (\n    <BaseInput\n      ref={ref}\n      className={cn(\n        inputVariants({ size, variant, focusIndicator: true }),\n        className,\n      )}\n      {...inputProps}\n    />\n  );\n\n  // Render with Field wrapper if label is provided\n  if (label) {\n    return (\n      <Field\n        label={label}\n        required={required}\n        labelTooltip={labelTooltip}\n        description={description}\n        error={\n          error\n            ? typeof error === \"string\"\n              ? { message: error, match: true }\n              : error\n            : undefined\n        }\n      >\n        {input}\n      </Field>\n    );\n  }\n\n  // Render bare input without Field wrapper\n  return input;\n});\n\nInput.displayName = \"Input\";\n\n/**\n * Input component props with accessibility guidance.\n *\n * **Accessible Name Required:** Input should have one of:\n * 1. `label` prop (recommended) - enables Field wrapper with label/description/error\n * 2. `placeholder` + `aria-label` - for bare inputs with visual placeholder\n * 3. `aria-labelledby` - for custom label association\n *\n * Missing accessible names will trigger console warnings in development.\n *\n * @example\n * // Recommended: Built-in Field wrapper\n * <Input label=\"Email\" placeholder=\"you@example.com\" />\n *\n * @example\n * // Bare input with placeholder and aria-label\n * <Input placeholder=\"Search...\" aria-label=\"Search products\" />\n *\n * @example\n * // Custom label association\n * <label id=\"email-label\">Email</label>\n * <Input aria-labelledby=\"email-label\" />\n *\n * @example\n * // With description and error\n * <Input\n *   label=\"Password\"\n *   description=\"Must be at least 8 characters\"\n *   error=\"Password is too short\"\n *   variant=\"error\"\n * />\n */\nexport type InputProps = Pick<KumoInputVariantsProps, \"size\" | \"variant\"> &\n  BaseInputProps & {\n    /** Label content for the input (enables Field wrapper) - can be a string or any React node */\n    label?: ReactNode;\n    /** Tooltip content to display next to the label via an info icon */\n    labelTooltip?: ReactNode;\n    /** Helper text displayed below the input */\n    description?: ReactNode;\n    /** Error message or validation error object */\n    error?: string | { message: ReactNode; match: FieldErrorMatch };\n  };\n"],"names":["KUMO_INPUT_VARIANTS","KUMO_INPUT_DEFAULT_VARIANTS","inputVariants","variant","size","parentFocusIndicator","focusIndicator","cn","Input","forwardRef","props","ref","className","label","labelTooltip","description","error","inputProps","required","hasLabel","hasPlaceholderAndAriaLabel","hasAriaLabelledBy","input","jsx","BaseInput","Field"],"mappings":";;;;;;AASO,MAAMA,IAAsB;AAAA,EACjC,MAAM;AAAA,IACJ,IAAI;AAAA,MACF,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,IAAI;AAAA,MACF,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,IAAI;AAAA,MACF,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,EACf;AAAA,EAEF,SAAS;AAAA,IACP,SAAS;AAAA,MACP,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,OAAO;AAAA,MACL,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,EACf;AAEJ,GAEaC,IAA8B;AAAA,EACzC,MAAM;AAAA,EACN,SAAS;AACX;AA0CO,SAASC,EAAc;AAAA,EAC5B,SAAAC,IAAUF,EAA4B;AAAA,EACtC,MAAAG,IAAOH,EAA4B;AAAA,EACnC,sBAAAI,IAAuB;AAAA,EACvB,gBAAAC,IAAiB;AACnB,IAA4B,IAAI;AAC9B,SAAOC;AAAA;AAAA,IAEL;AAAA;AAAA,IAEA;AAAA;AAAA,IAEAP,EAAoB,KAAKI,CAAI,EAAE;AAAA;AAAA,IAE/BJ,EAAoB,QAAQG,CAAO,EAAE;AAAA;AAAA,IAErCE,KAAwB;AAAA,IACxBC,KAAkB;AAAA,EAAA;AAEtB;AAEO,MAAME,IAAQC,EAAyC,CAACC,GAAOC,MAAQ;AAC5E,QAAM;AAAA,IACJ,WAAAC;AAAA,IACA,MAAAR,IAAO;AAAA,IACP,SAAAD,IAAU;AAAA,IACV,OAAAU;AAAA,IACA,cAAAC;AAAA,IACA,aAAAC;AAAA,IACA,OAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDP,GAGE,EAAE,UAAAQ,MAAaD;AAGrB,MAAI,QAAQ,IAAI,aAAa,cAAc;AACzC,UAAME,IAAW,EAAQN,GACnBO,IAA6B,GACjCH,EAAW,eAAeA,EAAW,YAAY,IAE7CI,IAAoB,EAAQJ,EAAW,iBAAiB;AAE9D,IAAI,CAACE,KAAY,CAACC,KAA8B,CAACC,KAC/C,QAAQ;AAAA,MACN;AAAA;AAAA;AAAA;AAAA,IAAA;AAAA,EAMN;AAEA,QAAMC,IACJ,gBAAAC;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,KAAAb;AAAA,MACA,WAAWJ;AAAA,QACTL,EAAc,EAAE,MAAAE,GAAM,SAAAD,GAAS,gBAAgB,IAAM;AAAA,QACrDS;AAAA,MAAA;AAAA,MAED,GAAGK;AAAA,IAAA;AAAA,EAAA;AAKR,SAAIJ,IAEA,gBAAAU;AAAA,IAACE;AAAA,IAAA;AAAA,MACC,OAAAZ;AAAA,MACA,UAAAK;AAAA,MACA,cAAAJ;AAAA,MACA,aAAAC;AAAA,MACA,OACEC,IACI,OAAOA,KAAU,WACf,EAAE,SAASA,GAAO,OAAO,GAAA,IACzBA,IACF;AAAA,MAGL,UAAAM;AAAA,IAAA;AAAA,EAAA,IAMAA;AACT,CAAC;AAEDd,EAAM,cAAc;"}
+{"version":3,"file":"input-D6YgDfDG.js","sources":["../src/components/input/input.tsx"],"sourcesContent":["import { cn } from \"../../utils/cn\";\nimport {\n  forwardRef,\n  type ComponentPropsWithoutRef,\n  type ReactNode,\n} from \"react\";\nimport { Input as BaseInput } from \"@base-ui/react/input\";\nimport { Field, type FieldErrorMatch } from \"../field/field\";\n\nexport const KUMO_INPUT_VARIANTS = {\n  size: {\n    xs: {\n      classes: \"h-5 gap-1 rounded-sm px-1.5 text-xs\",\n      description: \"Extra small input for compact UIs\",\n    },\n    sm: {\n      classes: \"h-6.5 gap-1 rounded-md px-2 text-xs\",\n      description: \"Small input for secondary fields\",\n    },\n    base: {\n      classes: \"h-9 gap-1.5 rounded-lg px-3 text-base\",\n      description: \"Default input size\",\n    },\n    lg: {\n      classes: \"h-10 gap-2 rounded-lg px-4 text-base\",\n      description: \"Large input for prominent fields\",\n    },\n  },\n  variant: {\n    default: {\n      classes: \"focus:ring-kumo-ring\",\n      description: \"Default input appearance\",\n    },\n    error: {\n      classes: \"!ring-kumo-danger focus:ring-kumo-danger\",\n      description: \"Error state for validation failures\",\n    },\n  },\n} as const;\n\nexport const KUMO_INPUT_DEFAULT_VARIANTS = {\n  size: \"base\",\n  variant: \"default\",\n} as const;\n\nexport const KUMO_INPUT_STYLING = {\n  dimensions: {\n    xs: { height: 20, paddingX: 6, fontSize: 12, borderRadius: 2, width: 160 },\n    sm: { height: 26, paddingX: 8, fontSize: 12, borderRadius: 6, width: 200 },\n    base: {\n      height: 36,\n      paddingX: 12,\n      fontSize: 16,\n      borderRadius: 8,\n      width: 280,\n    },\n    lg: { height: 40, paddingX: 16, fontSize: 16, borderRadius: 8, width: 320 },\n  },\n  baseTokens: {\n    background: \"color-secondary\",\n    text: \"text-color-surface\",\n    placeholder: \"text-color-muted\",\n    ring: \"color-border\",\n  },\n  stateTokens: {\n    focus: { ring: \"color-active\" },\n    error: { ring: \"color-error\" },\n    disabled: { opacity: 0.5, text: \"text-color-muted\" },\n  },\n} as const;\n\n// Derived types from KUMO_INPUT_VARIANTS\nexport type KumoInputSize = keyof typeof KUMO_INPUT_VARIANTS.size;\nexport type KumoInputVariant = keyof typeof KUMO_INPUT_VARIANTS.variant;\n\nexport interface KumoInputVariantsProps {\n  size?: KumoInputSize;\n  variant?: KumoInputVariant;\n  parentFocusIndicator?: boolean;\n  focusIndicator?: boolean;\n}\n\n// Omit native `size` attribute (number) to avoid conflict with our custom `size` variant\ntype BaseInputProps = Omit<ComponentPropsWithoutRef<typeof BaseInput>, \"size\">;\n\nexport function inputVariants({\n  variant = KUMO_INPUT_DEFAULT_VARIANTS.variant,\n  size = KUMO_INPUT_DEFAULT_VARIANTS.size,\n  parentFocusIndicator = false,\n  focusIndicator = false,\n}: KumoInputVariantsProps = {}) {\n  return cn(\n    // Base styles\n    \"border-0 bg-kumo-control text-kumo-default ring ring-kumo-line\",\n    // Disabled state and placeholder styles\n    \"outline-none placeholder:text-kumo-subtle disabled:text-kumo-subtle\",\n    // Apply size styles from KUMO_INPUT_VARIANTS\n    KUMO_INPUT_VARIANTS.size[size].classes,\n    // Apply variant styles from KUMO_INPUT_VARIANTS\n    KUMO_INPUT_VARIANTS.variant[variant].classes,\n    // Focus state handling\n    parentFocusIndicator && \"[&:has(:focus-within)]:ring-kumo-ring\",\n    focusIndicator && \"focus:ring-kumo-ring\",\n  );\n}\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => {\n  const {\n    className,\n    size = \"base\",\n    variant = \"default\",\n    label,\n    labelTooltip,\n    description,\n    error,\n    ...inputProps\n  } = props;\n\n  // Extract required from inputProps to pass to Field for label decoration\n  const { required } = inputProps;\n\n  // A11y enforcement: warn in dev if no accessible name provided\n  if (process.env.NODE_ENV !== \"production\") {\n    const hasLabel = Boolean(label);\n    const hasPlaceholderAndAriaLabel = Boolean(\n      inputProps.placeholder && inputProps[\"aria-label\"],\n    );\n    const hasAriaLabelledBy = Boolean(inputProps[\"aria-labelledby\"]);\n\n    if (!hasLabel && !hasPlaceholderAndAriaLabel && !hasAriaLabelledBy) {\n      console.warn(\n        \"[Kumo Input]: Input must have an accessible name. Provide either:\\n\" +\n          \"  - label prop: <Input label='Email' />\\n\" +\n          \"  - placeholder + aria-label: <Input placeholder='Email' aria-label='Email address' />\\n\" +\n          \"  - aria-labelledby for custom label association\",\n      );\n    }\n  }\n\n  const input = (\n    <BaseInput\n      ref={ref}\n      className={cn(\n        inputVariants({ size, variant, focusIndicator: true }),\n        className,\n      )}\n      {...inputProps}\n    />\n  );\n\n  // Render with Field wrapper if label is provided\n  if (label) {\n    return (\n      <Field\n        label={label}\n        required={required}\n        labelTooltip={labelTooltip}\n        description={description}\n        error={\n          error\n            ? typeof error === \"string\"\n              ? { message: error, match: true }\n              : error\n            : undefined\n        }\n      >\n        {input}\n      </Field>\n    );\n  }\n\n  // Render bare input without Field wrapper\n  return input;\n});\n\nInput.displayName = \"Input\";\n\n/**\n * Input component props with accessibility guidance.\n *\n * **Accessible Name Required:** Input should have one of:\n * 1. `label` prop (recommended) - enables Field wrapper with label/description/error\n * 2. `placeholder` + `aria-label` - for bare inputs with visual placeholder\n * 3. `aria-labelledby` - for custom label association\n *\n * Missing accessible names will trigger console warnings in development.\n *\n * @example\n * // Recommended: Built-in Field wrapper\n * <Input label=\"Email\" placeholder=\"you@example.com\" />\n *\n * @example\n * // Bare input with placeholder and aria-label\n * <Input placeholder=\"Search...\" aria-label=\"Search products\" />\n *\n * @example\n * // Custom label association\n * <label id=\"email-label\">Email</label>\n * <Input aria-labelledby=\"email-label\" />\n *\n * @example\n * // With description and error\n * <Input\n *   label=\"Password\"\n *   description=\"Must be at least 8 characters\"\n *   error=\"Password is too short\"\n *   variant=\"error\"\n * />\n */\nexport type InputProps = Pick<KumoInputVariantsProps, \"size\" | \"variant\"> &\n  BaseInputProps & {\n    /** Label content for the input (enables Field wrapper) - can be a string or any React node */\n    label?: ReactNode;\n    /** Tooltip content to display next to the label via an info icon */\n    labelTooltip?: ReactNode;\n    /** Helper text displayed below the input */\n    description?: ReactNode;\n    /** Error message or validation error object */\n    error?: string | { message: ReactNode; match: FieldErrorMatch };\n  };\n"],"names":["KUMO_INPUT_VARIANTS","KUMO_INPUT_DEFAULT_VARIANTS","inputVariants","variant","size","parentFocusIndicator","focusIndicator","cn","Input","forwardRef","props","ref","className","label","labelTooltip","description","error","inputProps","required","hasLabel","hasPlaceholderAndAriaLabel","hasAriaLabelledBy","input","jsx","BaseInput","Field"],"mappings":";;;;;;AASO,MAAMA,IAAsB;AAAA,EACjC,MAAM;AAAA,IACJ,IAAI;AAAA,MACF,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,IAAI;AAAA,MACF,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,IAAI;AAAA,MACF,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,EACf;AAAA,EAEF,SAAS;AAAA,IACP,SAAS;AAAA,MACP,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,OAAO;AAAA,MACL,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,EACf;AAEJ,GAEaC,IAA8B;AAAA,EACzC,MAAM;AAAA,EACN,SAAS;AACX;AA0CO,SAASC,EAAc;AAAA,EAC5B,SAAAC,IAAUF,EAA4B;AAAA,EACtC,MAAAG,IAAOH,EAA4B;AAAA,EACnC,sBAAAI,IAAuB;AAAA,EACvB,gBAAAC,IAAiB;AACnB,IAA4B,IAAI;AAC9B,SAAOC;AAAA;AAAA,IAEL;AAAA;AAAA,IAEA;AAAA;AAAA,IAEAP,EAAoB,KAAKI,CAAI,EAAE;AAAA;AAAA,IAE/BJ,EAAoB,QAAQG,CAAO,EAAE;AAAA;AAAA,IAErCE,KAAwB;AAAA,IACxBC,KAAkB;AAAA,EAAA;AAEtB;AAEO,MAAME,IAAQC,EAAyC,CAACC,GAAOC,MAAQ;AAC5E,QAAM;AAAA,IACJ,WAAAC;AAAA,IACA,MAAAR,IAAO;AAAA,IACP,SAAAD,IAAU;AAAA,IACV,OAAAU;AAAA,IACA,cAAAC;AAAA,IACA,aAAAC;AAAA,IACA,OAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDP,GAGE,EAAE,UAAAQ,MAAaD;AAGrB,MAAI,QAAQ,IAAI,aAAa,cAAc;AACzC,UAAME,IAAW,EAAQN,GACnBO,IAA6B,GACjCH,EAAW,eAAeA,EAAW,YAAY,IAE7CI,IAAoB,EAAQJ,EAAW,iBAAiB;AAE9D,IAAI,CAACE,KAAY,CAACC,KAA8B,CAACC,KAC/C,QAAQ;AAAA,MACN;AAAA;AAAA;AAAA;AAAA,IAAA;AAAA,EAMN;AAEA,QAAMC,IACJ,gBAAAC;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,KAAAb;AAAA,MACA,WAAWJ;AAAA,QACTL,EAAc,EAAE,MAAAE,GAAM,SAAAD,GAAS,gBAAgB,IAAM;AAAA,QACrDS;AAAA,MAAA;AAAA,MAED,GAAGK;AAAA,IAAA;AAAA,EAAA;AAKR,SAAIJ,IAEA,gBAAAU;AAAA,IAACE;AAAA,IAAA;AAAA,MACC,OAAAZ;AAAA,MACA,UAAAK;AAAA,MACA,cAAAJ;AAAA,MACA,aAAAC;AAAA,MACA,OACEC,IACI,OAAOA,KAAU,WACf,EAAE,SAASA,GAAO,OAAO,GAAA,IACzBA,IACF;AAAA,MAGL,UAAAM;AAAA,IAAA;AAAA,EAAA,IAMAA;AACT,CAAC;AAEDd,EAAM,cAAc;"}

package/dist/{input-area-B9qajxvZ.js → input-area-DN_Ncliw.js}

@@ -1,16 +1,16 @@
 "use client";
 import { jsx as i } from "react/jsx-runtime";
-import { i as C } from "./input-Dqvc2AB_.js";
+import { i as C } from "./input-D6YgDfDG.js";
 import { c as b } from "./cn-Bhsu1vx2.js";
 import * as x from "react";
 import { useCallback as I } from "react";
-import { F as y } from "./field-V3J0Ql_V.js";
+import { F as y } from "./field-B7ORz5ej.js";
 const N = x.forwardRef(
-  (c, l) => {
+  (l, m) => {
     const {
-      className: m,
+      className: p,
       onValueChange: r,
-      size: p = "base",
+      size: c = "base",
       variant: u = "default",
       onChange: e,
       label: t,
@@ -18,7 +18,7 @@ const N = x.forwardRef(
       description: d,
       error: a,
       ...o
-    } = c, { required: h } = o, g = I(
+    } = l, { required: h } = o, g = I(
       (n) => {
         e?.(n), r?.(n.target.value);
       },
@@ -26,12 +26,12 @@ const N = x.forwardRef(
     ), s = /* @__PURE__ */ i(
       "textarea",
       {
-        ref: l,
+        ref: m,
         className: b(
-          C({ size: p, variant: u, focusIndicator: !0 }),
+          C({ size: c, variant: u, focusIndicator: !0 }),
           "h-auto py-2",
           // Input variant always come with size, but it does not apply for textarea
-          m
+          p
         ),
         onChange: g,
         ...o
@@ -54,4 +54,4 @@ N.displayName = "InputArea";
 export {
   N as I
 };
-//# sourceMappingURL=input-area-B9qajxvZ.js.map
+//# sourceMappingURL=input-area-DN_Ncliw.js.map