@cloudflare/kumo 1.14.1 → 1.16.0

package/dist/chunks/{popover-dd7hi5ajeoq9od1i.js.map → popover-jurf834u2uywluux.js.map}

@@ -1 +1 @@
-{"version":3,"file":"popover-dd7hi5ajeoq9od1i.js","sources":["../../src/components/popover/popover.tsx"],"sourcesContent":["import { Popover as PopoverBase } from \"@base-ui/react/popover\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Popover side variant definitions mapping positions to their Tailwind classes. */\nexport const KUMO_POPOVER_VARIANTS = {\n  side: {\n    top: {\n      classes: \"\",\n      description: \"Popover appears above the trigger\",\n    },\n    bottom: {\n      classes: \"\",\n      description: \"Popover appears below the trigger\",\n    },\n    left: {\n      classes: \"\",\n      description: \"Popover appears to the left of the trigger\",\n    },\n    right: {\n      classes: \"\",\n      description: \"Popover appears to the right of the trigger\",\n    },\n  },\n} as const;\n\nexport const KUMO_POPOVER_DEFAULT_VARIANTS = {\n  side: \"bottom\",\n} as const;\n\n// Derived types from KUMO_POPOVER_VARIANTS\nexport type KumoPopoverSide = keyof typeof KUMO_POPOVER_VARIANTS.side;\n\nexport interface KumoPopoverVariantsProps {\n  /**\n   * Which side of the trigger the popover appears on.\n   * - `\"top\"` — Above the trigger\n   * - `\"bottom\"` — Below the trigger\n   * - `\"left\"` — Left of the trigger\n   * - `\"right\"` — Right of the trigger\n   * @default \"bottom\"\n   */\n  side?: KumoPopoverSide;\n}\n\n// ============================================================================\n// Popover Root\n// ============================================================================\n\ntype BasePopoverRootProps = ComponentPropsWithoutRef<typeof PopoverBase.Root>;\n\nexport type PopoverRootProps = BasePopoverRootProps;\n\nfunction PopoverRoot({ children, ...props }: PopoverRootProps) {\n  return <PopoverBase.Root {...props}>{children}</PopoverBase.Root>;\n}\n\nPopoverRoot.displayName = \"Popover\";\n\n// ============================================================================\n// Popover Trigger\n// ============================================================================\n\ntype BasePopoverTriggerProps = ComponentPropsWithoutRef<\n  typeof PopoverBase.Trigger\n>;\n\nexport type PopoverTriggerProps = BasePopoverTriggerProps & {\n  /** When true, the trigger element will be the child element */\n  asChild?: boolean;\n};\n\nfunction PopoverTrigger({\n  children,\n  className,\n  asChild,\n  ...props\n}: PopoverTriggerProps) {\n  return (\n    <PopoverBase.Trigger\n      className={className}\n      render={\n        asChild ? (children as BasePopoverTriggerProps[\"render\"]) : undefined\n      }\n      {...props}\n    >\n      {asChild ? undefined : children}\n    </PopoverBase.Trigger>\n  );\n}\n\nPopoverTrigger.displayName = \"Popover.Trigger\";\n\n// ============================================================================\n// Popover Content\n// ============================================================================\n\n/** Alignment options for popover positioning */\ntype PopoverAlign = \"start\" | \"center\" | \"end\";\n\n/**\n * Popover content panel props.\n *\n * @example\n * ```tsx\n * <Popover.Content side=\"top\" align=\"start\" sideOffset={12}>\n *   <p>Popover body</p>\n * </Popover.Content>\n * ```\n */\nexport type PopoverContentProps = KumoPopoverVariantsProps & {\n  /**\n   * How to align the popover relative to the trigger.\n   * @default \"center\"\n   */\n  align?: PopoverAlign;\n  /**\n   * Distance between the trigger and the popover in pixels.\n   * @default 8\n   */\n  sideOffset?: number;\n  /**\n   * Additional offset along the alignment axis in pixels.\n   * @default 0\n   */\n  alignOffset?: number;\n  /**\n   * Determines which CSS `position` property to use.\n   * Use \"fixed\" when the popover needs to escape stacking contexts (e.g., inside sticky headers).\n   * @default \"absolute\"\n   */\n  positionMethod?: \"absolute\" | \"fixed\";\n  /** Additional CSS classes merged via `cn()`. */\n  className?: string;\n  /** Content to render inside the popover. */\n  children?: ReactNode;\n};\n\nfunction PopoverContent({\n  children,\n  side = KUMO_POPOVER_DEFAULT_VARIANTS.side,\n  align = \"center\",\n  sideOffset = 8,\n  alignOffset = 0,\n  positionMethod = \"absolute\",\n  className,\n}: PopoverContentProps) {\n  return (\n    <PopoverBase.Portal>\n      <PopoverBase.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n        positionMethod={positionMethod}\n      >\n        <PopoverBase.Popup\n          className={cn(\n            \"flex origin-(--transform-origin) flex-col rounded-lg bg-kumo-base px-4 py-3 text-sm text-kumo-default\",\n            \"shadow-lg shadow-kumo-tip-shadow outline outline-kumo-fill\",\n            \"transition-[transform,scale,opacity] duration-150\",\n            \"data-starting-style:scale-90 data-starting-style:opacity-0\",\n            \"data-ending-style:scale-90 data-ending-style:opacity-0\",\n            \"data-instant:duration-0\",\n            \"kumo-popover-popup\",\n            className,\n          )}\n        >\n          <PopoverBase.Arrow\n            className={cn(\n              \"flex\",\n              \"data-[side=bottom]:-top-2\",\n              \"data-[side=left]:right-[-13px] data-[side=left]:rotate-90\",\n              \"data-[side=right]:left-[-13px] data-[side=right]:-rotate-90\",\n              \"data-[side=top]:-bottom-2 data-[side=top]:rotate-180\",\n            )}\n          >\n            <ArrowSvg />\n          </PopoverBase.Arrow>\n          {children}\n        </PopoverBase.Popup>\n      </PopoverBase.Positioner>\n    </PopoverBase.Portal>\n  );\n}\n\nPopoverContent.displayName = \"Popover.Content\";\n\n// ============================================================================\n// Popover Title\n// ============================================================================\n\ntype BasePopoverTitleProps = ComponentPropsWithoutRef<typeof PopoverBase.Title>;\n\nexport type PopoverTitleProps = BasePopoverTitleProps;\n\nfunction PopoverTitle({ className, ...props }: PopoverTitleProps) {\n  return (\n    <PopoverBase.Title\n      className={cn(\"m-0 text-base leading-6 font-medium\", className)}\n      {...props}\n    />\n  );\n}\n\nPopoverTitle.displayName = \"Popover.Title\";\n\n// ============================================================================\n// Popover Description\n// ============================================================================\n\ntype BasePopoverDescriptionProps = ComponentPropsWithoutRef<\n  typeof PopoverBase.Description\n>;\n\nexport type PopoverDescriptionProps = BasePopoverDescriptionProps;\n\nfunction PopoverDescription({ className, ...props }: PopoverDescriptionProps) {\n  return (\n    <PopoverBase.Description\n      className={cn(\"m-0 text-base leading-6 text-kumo-subtle\", className)}\n      {...props}\n    />\n  );\n}\n\nPopoverDescription.displayName = \"Popover.Description\";\n\n// ============================================================================\n// Popover Close\n// ============================================================================\n\ntype BasePopoverCloseProps = ComponentPropsWithoutRef<typeof PopoverBase.Close>;\n\nexport type PopoverCloseProps = BasePopoverCloseProps & {\n  /** When true, the close element will be the child element */\n  asChild?: boolean;\n};\n\nfunction PopoverClose({\n  children,\n  className,\n  asChild,\n  ...props\n}: PopoverCloseProps) {\n  return (\n    <PopoverBase.Close\n      className={className}\n      render={\n        asChild ? (children as BasePopoverCloseProps[\"render\"]) : undefined\n      }\n      {...props}\n    >\n      {asChild ? undefined : children}\n    </PopoverBase.Close>\n  );\n}\n\nPopoverClose.displayName = \"Popover.Close\";\n\n// ============================================================================\n// Arrow SVG\n// ============================================================================\n\n/**\n * Arrow SVG with three paths for proper border rendering in both light and dark modes.\n * This approach matches Base UI's popover/tooltip implementation.\n *\n * The three paths are:\n * 1. ArrowFill - The main arrow body, matches popover background\n * 2. ArrowOuterStroke - Border visible in light mode only (transparent in dark)\n * 3. ArrowInnerStroke - Border visible in dark mode only (transparent in light)\n *\n * This is necessary because the outer and inner stroke paths have different geometries,\n * and using both ensures the arrow border aligns perfectly with the popover's outline\n * in both color modes.\n *\n * @see https://base-ui.com/react/components/popover\n */\nfunction ArrowSvg(props: React.ComponentProps<\"svg\">) {\n  return (\n    <svg width=\"20\" height=\"10\" viewBox=\"0 0 20 10\" fill=\"none\" {...props}>\n      <path\n        d=\"M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z\"\n        className=\"fill-kumo-base\"\n      />\n      <path\n        d=\"M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z\"\n        className=\"fill-kumo-tip-shadow\"\n      />\n      <path\n        d=\"M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z\"\n        className=\"fill-kumo-tip-stroke\"\n      />\n    </svg>\n  );\n}\n\n// ============================================================================\n// Compound Component Export\n// ============================================================================\n\n/**\n * Popover component for displaying accessible popup content anchored to a trigger.\n *\n * @example\n * ```tsx\n * <Popover>\n *   <Popover.Trigger asChild>\n *     <Button>Open</Button>\n *   </Popover.Trigger>\n *   <Popover.Content>\n *     <Popover.Title>Notifications</Popover.Title>\n *     <Popover.Description>You are all caught up!</Popover.Description>\n *   </Popover.Content>\n * </Popover>\n * ```\n *\n * @see https://base-ui.com/react/components/popover\n */\nexport const Popover = Object.assign(PopoverRoot, {\n  Trigger: PopoverTrigger,\n  Content: PopoverContent,\n  Title: PopoverTitle,\n  Description: PopoverDescription,\n  Close: PopoverClose,\n});\n\n// Export sub-components for direct access and type inference\nexport {\n  PopoverRoot,\n  PopoverTrigger,\n  PopoverContent,\n  PopoverTitle,\n  PopoverDescription,\n  PopoverClose,\n};\n"],"names":["KUMO_POPOVER_VARIANTS","KUMO_POPOVER_DEFAULT_VARIANTS","PopoverRoot","children","props","PopoverBase.Root","PopoverTrigger","className","asChild","jsx","PopoverBase.Trigger","PopoverContent","side","align","sideOffset","alignOffset","positionMethod","PopoverBase.Portal","PopoverBase.Positioner","jsxs","PopoverBase.Popup","cn","PopoverBase.Arrow","ArrowSvg","PopoverTitle","PopoverBase.Title","PopoverDescription","PopoverBase.Description","PopoverClose","PopoverBase.Close","Popover"],"mappings":"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"}
+{"version":3,"file":"popover-jurf834u2uywluux.js","sources":["../../src/components/popover/popover.tsx"],"sourcesContent":["import { Popover as PopoverBase } from \"@base-ui/react/popover\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Popover side variant definitions mapping positions to their Tailwind classes. */\nexport const KUMO_POPOVER_VARIANTS = {\n  side: {\n    top: {\n      classes: \"\",\n      description: \"Popover appears above the trigger\",\n    },\n    bottom: {\n      classes: \"\",\n      description: \"Popover appears below the trigger\",\n    },\n    left: {\n      classes: \"\",\n      description: \"Popover appears to the left of the trigger\",\n    },\n    right: {\n      classes: \"\",\n      description: \"Popover appears to the right of the trigger\",\n    },\n  },\n} as const;\n\nexport const KUMO_POPOVER_DEFAULT_VARIANTS = {\n  side: \"bottom\",\n} as const;\n\n// Derived types from KUMO_POPOVER_VARIANTS\nexport type KumoPopoverSide = keyof typeof KUMO_POPOVER_VARIANTS.side;\n\nexport interface KumoPopoverVariantsProps {\n  /**\n   * Which side of the trigger the popover appears on.\n   * - `\"top\"` — Above the trigger\n   * - `\"bottom\"` — Below the trigger\n   * - `\"left\"` — Left of the trigger\n   * - `\"right\"` — Right of the trigger\n   * @default \"bottom\"\n   */\n  side?: KumoPopoverSide;\n}\n\n// ============================================================================\n// Popover Root\n// ============================================================================\n\ntype BasePopoverRootProps = ComponentPropsWithoutRef<typeof PopoverBase.Root>;\n\nexport type PopoverRootProps = BasePopoverRootProps;\n\nfunction PopoverRoot({ children, ...props }: PopoverRootProps) {\n  return <PopoverBase.Root {...props}>{children}</PopoverBase.Root>;\n}\n\nPopoverRoot.displayName = \"Popover\";\n\n// ============================================================================\n// Popover Trigger\n// ============================================================================\n\ntype BasePopoverTriggerProps = ComponentPropsWithoutRef<\n  typeof PopoverBase.Trigger\n>;\n\nexport type PopoverTriggerProps = BasePopoverTriggerProps & {\n  /** When true, the trigger element will be the child element */\n  asChild?: boolean;\n};\n\nfunction PopoverTrigger({\n  children,\n  className,\n  asChild,\n  ...props\n}: PopoverTriggerProps) {\n  return (\n    <PopoverBase.Trigger\n      className={className}\n      render={\n        asChild ? (children as BasePopoverTriggerProps[\"render\"]) : undefined\n      }\n      {...props}\n    >\n      {asChild ? undefined : children}\n    </PopoverBase.Trigger>\n  );\n}\n\nPopoverTrigger.displayName = \"Popover.Trigger\";\n\n// ============================================================================\n// Popover Content\n// ============================================================================\n\n/** Alignment options for popover positioning */\ntype PopoverAlign = \"start\" | \"center\" | \"end\";\n\n/**\n * Popover content panel props.\n *\n * @example\n * ```tsx\n * <Popover.Content side=\"top\" align=\"start\" sideOffset={12}>\n *   <p>Popover body</p>\n * </Popover.Content>\n * ```\n */\nexport type PopoverContentProps = KumoPopoverVariantsProps & {\n  /**\n   * How to align the popover relative to the trigger.\n   * @default \"center\"\n   */\n  align?: PopoverAlign;\n  /**\n   * Distance between the trigger and the popover in pixels.\n   * @default 8\n   */\n  sideOffset?: number;\n  /**\n   * Additional offset along the alignment axis in pixels.\n   * @default 0\n   */\n  alignOffset?: number;\n  /**\n   * Determines which CSS `position` property to use.\n   * Use \"fixed\" when the popover needs to escape stacking contexts (e.g., inside sticky headers).\n   * @default \"absolute\"\n   */\n  positionMethod?: \"absolute\" | \"fixed\";\n  /** Additional CSS classes merged via `cn()`. */\n  className?: string;\n  /** Content to render inside the popover. */\n  children?: ReactNode;\n};\n\nfunction PopoverContent({\n  children,\n  side = KUMO_POPOVER_DEFAULT_VARIANTS.side,\n  align = \"center\",\n  sideOffset = 8,\n  alignOffset = 0,\n  positionMethod = \"absolute\",\n  className,\n}: PopoverContentProps) {\n  return (\n    <PopoverBase.Portal>\n      <PopoverBase.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n        positionMethod={positionMethod}\n      >\n        <PopoverBase.Popup\n          className={cn(\n            \"flex origin-(--transform-origin) flex-col rounded-lg bg-kumo-base px-4 py-3 text-sm text-kumo-default\",\n            \"shadow-lg shadow-kumo-tip-shadow outline outline-kumo-fill\",\n            \"transition-[transform,scale,opacity] duration-150\",\n            \"data-starting-style:scale-90 data-starting-style:opacity-0\",\n            \"data-ending-style:scale-90 data-ending-style:opacity-0\",\n            \"data-instant:duration-0\",\n            \"kumo-popover-popup\",\n            className,\n          )}\n        >\n          <PopoverBase.Arrow\n            className={cn(\n              \"flex\",\n              \"data-[side=bottom]:-top-2\",\n              \"data-[side=left]:right-[-13px] data-[side=left]:rotate-90\",\n              \"data-[side=right]:left-[-13px] data-[side=right]:-rotate-90\",\n              \"data-[side=top]:-bottom-2 data-[side=top]:rotate-180\",\n            )}\n          >\n            <ArrowSvg />\n          </PopoverBase.Arrow>\n          {children}\n        </PopoverBase.Popup>\n      </PopoverBase.Positioner>\n    </PopoverBase.Portal>\n  );\n}\n\nPopoverContent.displayName = \"Popover.Content\";\n\n// ============================================================================\n// Popover Title\n// ============================================================================\n\ntype BasePopoverTitleProps = ComponentPropsWithoutRef<typeof PopoverBase.Title>;\n\nexport type PopoverTitleProps = BasePopoverTitleProps;\n\nfunction PopoverTitle({ className, ...props }: PopoverTitleProps) {\n  return (\n    <PopoverBase.Title\n      className={cn(\"m-0 text-base leading-6 font-medium\", className)}\n      {...props}\n    />\n  );\n}\n\nPopoverTitle.displayName = \"Popover.Title\";\n\n// ============================================================================\n// Popover Description\n// ============================================================================\n\ntype BasePopoverDescriptionProps = ComponentPropsWithoutRef<\n  typeof PopoverBase.Description\n>;\n\nexport type PopoverDescriptionProps = BasePopoverDescriptionProps;\n\nfunction PopoverDescription({ className, ...props }: PopoverDescriptionProps) {\n  return (\n    <PopoverBase.Description\n      className={cn(\"m-0 text-base leading-6 text-kumo-subtle\", className)}\n      {...props}\n    />\n  );\n}\n\nPopoverDescription.displayName = \"Popover.Description\";\n\n// ============================================================================\n// Popover Close\n// ============================================================================\n\ntype BasePopoverCloseProps = ComponentPropsWithoutRef<typeof PopoverBase.Close>;\n\nexport type PopoverCloseProps = BasePopoverCloseProps & {\n  /** When true, the close element will be the child element */\n  asChild?: boolean;\n};\n\nfunction PopoverClose({\n  children,\n  className,\n  asChild,\n  ...props\n}: PopoverCloseProps) {\n  return (\n    <PopoverBase.Close\n      className={className}\n      render={\n        asChild ? (children as BasePopoverCloseProps[\"render\"]) : undefined\n      }\n      {...props}\n    >\n      {asChild ? undefined : children}\n    </PopoverBase.Close>\n  );\n}\n\nPopoverClose.displayName = \"Popover.Close\";\n\n// ============================================================================\n// Arrow SVG\n// ============================================================================\n\n/**\n * Arrow SVG with three paths for proper border rendering in both light and dark modes.\n * This approach matches Base UI's popover/tooltip implementation.\n *\n * The three paths are:\n * 1. ArrowFill - The main arrow body, matches popover background\n * 2. ArrowOuterStroke - Border visible in light mode only (transparent in dark)\n * 3. ArrowInnerStroke - Border visible in dark mode only (transparent in light)\n *\n * This is necessary because the outer and inner stroke paths have different geometries,\n * and using both ensures the arrow border aligns perfectly with the popover's outline\n * in both color modes.\n *\n * @see https://base-ui.com/react/components/popover\n */\nfunction ArrowSvg(props: React.ComponentProps<\"svg\">) {\n  return (\n    <svg width=\"20\" height=\"10\" viewBox=\"0 0 20 10\" fill=\"none\" {...props}>\n      <path\n        d=\"M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z\"\n        className=\"fill-kumo-base\"\n      />\n      <path\n        d=\"M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z\"\n        className=\"fill-kumo-tip-shadow\"\n      />\n      <path\n        d=\"M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z\"\n        className=\"fill-kumo-tip-stroke\"\n      />\n    </svg>\n  );\n}\n\n// ============================================================================\n// Compound Component Export\n// ============================================================================\n\n/**\n * Popover component for displaying accessible popup content anchored to a trigger.\n *\n * @example\n * ```tsx\n * <Popover>\n *   <Popover.Trigger asChild>\n *     <Button>Open</Button>\n *   </Popover.Trigger>\n *   <Popover.Content>\n *     <Popover.Title>Notifications</Popover.Title>\n *     <Popover.Description>You are all caught up!</Popover.Description>\n *   </Popover.Content>\n * </Popover>\n * ```\n *\n * @see https://base-ui.com/react/components/popover\n */\nexport const Popover = Object.assign(PopoverRoot, {\n  Trigger: PopoverTrigger,\n  Content: PopoverContent,\n  Title: PopoverTitle,\n  Description: PopoverDescription,\n  Close: PopoverClose,\n});\n\n// Export sub-components for direct access and type inference\nexport {\n  PopoverRoot,\n  PopoverTrigger,\n  PopoverContent,\n  PopoverTitle,\n  PopoverDescription,\n  PopoverClose,\n};\n"],"names":["KUMO_POPOVER_VARIANTS","KUMO_POPOVER_DEFAULT_VARIANTS","PopoverRoot","children","props","PopoverBase.Root","PopoverTrigger","className","asChild","jsx","PopoverBase.Trigger","PopoverContent","side","align","sideOffset","alignOffset","positionMethod","PopoverBase.Portal","PopoverBase.Positioner","jsxs","PopoverBase.Popup","cn","PopoverBase.Arrow","ArrowSvg","PopoverTitle","PopoverBase.Title","PopoverDescription","PopoverBase.Description","PopoverClose","PopoverBase.Close","Popover"],"mappings":"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"}

package/dist/chunks/{radio-ff1csb328f12smd4.js → radio-l9dzm6sohcvvrsdc.js}

@@ -2,8 +2,8 @@
 import { jsx as e, jsxs as m } from "react/jsx-runtime";
 import { forwardRef as y, createContext as j, useContext as A } from "react";
 import { c as o } from "./cn-ct4n7r74mh8y0f48.js";
-import { R as I, P as C, Q as G, bi as k, bj as h } from "./vendor-base-ui-cpvkrhz4zgw9nw2b.js";
-const b = {
+import { R as I, P as C, Q as G, bi as h, bj as b } from "./vendor-base-ui-ccr5l0ynrievzzv3.js";
+const x = {
   variant: {
     default: {
       classes: "ring-kumo-line",
@@ -24,23 +24,23 @@ const b = {
       description: "Choice card appearance with border, padding, and highlighted selection state"
     }
   }
-}, x = {
+}, v = {
   variant: "default",
   appearance: "default"
 };
-function O({
-  variant: t = x.variant,
-  appearance: r = x.appearance
+function M({
+  variant: t = v.variant,
+  appearance: r = v.appearance
 } = {}) {
   return o(
-    b.variant[t].classes,
-    b.appearance[r].classes
+    x.variant[t].classes,
+    x.appearance[r].classes
   );
 }
-const v = j({
+const N = j({
   controlPosition: "start",
   appearance: "default"
-}), N = y(
+}), R = y(
   ({
     className: t,
     disabled: r,
@@ -50,7 +50,7 @@ const v = j({
     description: i,
     value: c
   }, l) => {
-    const { controlPosition: f, appearance: d } = A(v), u = (s ?? d) === "card", p = u ? "end" : f;
+    const { controlPosition: f, appearance: d } = A(N), u = (s ?? d) === "card", g = u ? "end" : f;
     return u ? /* @__PURE__ */ m(
       "label",
       {
@@ -69,7 +69,7 @@ const v = j({
             i && /* @__PURE__ */ e("span", { className: "text-sm text-kumo-subtle", children: i })
           ] }),
           /* @__PURE__ */ e(
-            k,
+            h,
             {
               ref: l,
               value: c,
@@ -82,7 +82,7 @@ const v = j({
                 "data-[checked]:bg-kumo-contrast"
               ),
               children: /* @__PURE__ */ e(
-                h,
+                b,
                 {
                   keepMounted: !0,
                   className: "flex items-center justify-center",
@@ -100,13 +100,13 @@ const v = j({
           "m-0 group relative inline-flex items-center gap-2",
           // "start" (default): radio before label
           // "end": label before radio using flex-row-reverse
-          p === "end" && "flex-row-reverse justify-end",
+          g === "end" && "flex-row-reverse justify-end",
           r ? "cursor-not-allowed opacity-50" : "cursor-pointer",
           t
         ),
         children: [
           /* @__PURE__ */ e(
-            k,
+            h,
             {
               ref: l,
               value: c,
@@ -119,7 +119,7 @@ const v = j({
                 "data-[checked]:bg-kumo-contrast"
               ),
               children: /* @__PURE__ */ e(
-                h,
+                b,
                 {
                   keepMounted: !0,
                   className: "flex items-center justify-center",
@@ -134,8 +134,8 @@ const v = j({
     );
   }
 );
-N.displayName = "Radio.Item";
-function R({
+R.displayName = "Radio.Item";
+function p({
   legend: t,
   children: r,
   orientation: a = "vertical",
@@ -146,11 +146,11 @@ function R({
   value: l,
   onValueChange: f,
   disabled: d,
-  controlPosition: g = "start",
+  controlPosition: k = "start",
   name: u,
-  className: p
+  className: g
 }) {
-  return /* @__PURE__ */ e(v.Provider, { value: { controlPosition: g, appearance: s }, children: /* @__PURE__ */ e(
+  return /* @__PURE__ */ e(N.Provider, { value: { controlPosition: k, appearance: s }, children: /* @__PURE__ */ e(
     I,
     {
       defaultValue: c,
@@ -164,7 +164,7 @@ function R({
           disabled: d,
           className: o(
             "flex flex-col gap-4 rounded-lg border border-kumo-line p-4",
-            p
+            g
           ),
           children: [
             /* @__PURE__ */ e(G, { className: "text-lg font-medium text-kumo-default", children: t }),
@@ -185,16 +185,16 @@ function R({
     }
   ) });
 }
-R.displayName = "Radio.Group";
-const V = {
-  Item: N,
-  Group: R
-};
+p.displayName = "Radio.Group";
+const V = Object.assign(p, {
+  Item: R,
+  Group: p
+});
 export {
-  b as K,
+  x as K,
   V as R,
-  R as a,
-  x as b,
-  O as r
+  p as a,
+  v as b,
+  M as r
 };
-//# sourceMappingURL=radio-ff1csb328f12smd4.js.map
+//# sourceMappingURL=radio-l9dzm6sohcvvrsdc.js.map

package/dist/chunks/{radio-ff1csb328f12smd4.js.map → radio-l9dzm6sohcvvrsdc.js.map}

@@ -1 +1 @@
-{"version":3,"file":"radio-ff1csb328f12smd4.js","sources":["../../src/components/radio/radio.tsx"],"sourcesContent":["import { forwardRef, createContext, useContext, type ReactNode } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Fieldset } from \"@base-ui/react/fieldset\";\nimport { RadioGroup as BaseRadioGroup } from \"@base-ui/react/radio-group\";\nimport { Radio as BaseRadio } from \"@base-ui/react/radio\";\n\n/** Radio variant definitions mapping variant names to their Tailwind classes. */\nexport const KUMO_RADIO_VARIANTS = {\n  variant: {\n    default: {\n      classes: \"ring-kumo-line\",\n      description: \"Default radio appearance\",\n    },\n    error: {\n      classes: \"ring-kumo-danger\",\n      description: \"Error state for validation failures\",\n    },\n  },\n  appearance: {\n    default: {\n      classes: \"\",\n      description: \"Standard inline radio item\",\n    },\n    card: {\n      classes:\n        \"rounded-lg border border-kumo-ring bg-kumo-base p-3 transition-colors hover:bg-kumo-tint has-[[data-checked]]:border-kumo-interact has-[[data-checked]]:bg-kumo-tint\",\n      description:\n        \"Choice card appearance with border, padding, and highlighted selection state\",\n    },\n  },\n} as const;\n\nexport const KUMO_RADIO_DEFAULT_VARIANTS = {\n  variant: \"default\",\n  appearance: \"default\",\n} as const;\n\n// Derived types from KUMO_RADIO_VARIANTS\nexport type KumoRadioVariant = keyof typeof KUMO_RADIO_VARIANTS.variant;\nexport type KumoRadioAppearance = keyof typeof KUMO_RADIO_VARIANTS.appearance;\n\nexport interface KumoRadioVariantsProps {\n  /**\n   * Visual variant.\n   * - `\"default\"` — Standard radio appearance\n   * - `\"error\"` — Error state for validation failures\n   * @default \"default\"\n   */\n  variant?: KumoRadioVariant;\n  /**\n   * Visual appearance.\n   * - `\"default\"` — Standard inline radio item\n   * - `\"card\"` — Choice card with border, padding, and highlighted selection state\n   * @default \"default\"\n   */\n  appearance?: KumoRadioAppearance;\n}\n\nexport function radioVariants({\n  variant = KUMO_RADIO_DEFAULT_VARIANTS.variant,\n  appearance = KUMO_RADIO_DEFAULT_VARIANTS.appearance,\n}: KumoRadioVariantsProps = {}) {\n  return cn(\n    KUMO_RADIO_VARIANTS.variant[variant].classes,\n    KUMO_RADIO_VARIANTS.appearance[appearance].classes,\n  );\n}\n\n// Legacy type alias for backwards compatibility\nexport type RadioVariant = KumoRadioVariant;\n\n/** Position of the radio control relative to its label */\nexport type RadioControlPosition = \"start\" | \"end\";\n\n// Context for passing controlPosition and appearance from Group to Items\nconst RadioGroupContext = createContext<{\n  controlPosition: RadioControlPosition;\n  appearance: KumoRadioAppearance;\n}>({\n  controlPosition: \"start\",\n  appearance: \"default\",\n});\n\n/**\n * Radio group component props (with built-in Fieldset and RadioGroup)\n *\n * @example\n * // Basic usage\n * ```tsx\n * <Radio.Group legend=\"Notification preference\" defaultValue=\"email\">\n *   <Radio.Item label=\"Email\" value=\"email\" />\n *   <Radio.Item label=\"SMS\" value=\"sms\" />\n *   <Radio.Item label=\"Push\" value=\"push\" />\n * </Radio.Group>\n * ```\n *\n * @example\n * // Horizontal layout\n * ```tsx\n * <Radio.Group legend=\"Size\" orientation=\"horizontal\" defaultValue=\"md\">\n *   <Radio.Item label=\"Small\" value=\"sm\" />\n *   <Radio.Item label=\"Medium\" value=\"md\" />\n *   <Radio.Item label=\"Large\" value=\"lg\" />\n * </Radio.Group>\n * ```\n *\n * @example\n * // With error and description\n * ```tsx\n * <Radio.Group\n *   legend=\"Payment method\"\n *   error=\"Please select a payment method\"\n *   description=\"Choose how you'd like to pay\"\n * >\n *   <Radio.Item label=\"Credit Card\" value=\"card\" />\n *   <Radio.Item label=\"PayPal\" value=\"paypal\" />\n * </Radio.Group>\n * ```\n *\n * @example\n * // Controlled\n * ```tsx\n * const [value, setValue] = useState(\"email\");\n * <Radio.Group legend=\"Contact\" value={value} onValueChange={setValue}>\n *   <Radio.Item label=\"Email\" value=\"email\" />\n *   <Radio.Item label=\"Phone\" value=\"phone\" />\n * </Radio.Group>\n * ```\n *\n * @example\n * // Label before radio (controlPosition=\"end\")\n * ```tsx\n * <Radio.Group legend=\"Options\" controlPosition=\"end\" defaultValue=\"a\">\n *   <Radio.Item label=\"Option A\" value=\"a\" />\n *   <Radio.Item label=\"Option B\" value=\"b\" />\n * </Radio.Group>\n * ```\n */\nexport interface RadioGroupProps {\n  /** Legend text for the group (required for accessibility) */\n  legend: string;\n  /** Child Radio.Item components */\n  children: ReactNode;\n  /** Layout direction of the radio items */\n  orientation?: \"vertical\" | \"horizontal\";\n  /**\n   * Visual appearance applied to all Radio.Item children.\n   * - `\"default\"` — Standard inline radio items\n   * - `\"card\"` — Choice card with border, padding, and highlighted selection state\n   *\n   * Individual items can override this with their own `appearance` prop.\n   * @default \"default\"\n   */\n  appearance?: KumoRadioAppearance;\n  /** Error message for the group */\n  error?: string;\n  /** Helper text for the group */\n  description?: ReactNode;\n  /** Value of the radio that should be initially selected (uncontrolled) */\n  defaultValue?: string;\n  /** Value of the radio that should be selected (controlled) */\n  value?: string;\n  /** Event handler called when radio value changes */\n  onValueChange?: (value: string) => void;\n  /** Whether all radios in the group are disabled */\n  disabled?: boolean;\n  /** Position of radio control relative to label: \"start\" (default) puts radio before label, \"end\" puts label before radio. Note: In card appearance, the control is always positioned at the end. */\n  controlPosition?: RadioControlPosition;\n  /** Form submission name for the radio group */\n  name?: string;\n  /** Additional CSS classes */\n  className?: string;\n}\n\n/**\n * Individual radio item within a group\n *\n * @example\n * ```tsx\n * <Radio.Item label=\"Option A\" value=\"a\" />\n * ```\n *\n * @example\n * // Disabled item\n * ```tsx\n * <Radio.Item label=\"Unavailable\" value=\"unavailable\" disabled />\n * ```\n */\nexport type RadioItemProps = {\n  /** Visual variant: \"default\" or \"error\" for validation failures */\n  variant?: RadioVariant;\n  /**\n   * Visual appearance of the radio item.\n   * - `\"default\"` — Standard inline radio item\n   * - `\"card\"` — Choice card with border, padding, and highlighted selection state\n   *\n   * When set on an individual item, overrides the group-level `appearance`.\n   * @default \"default\"\n   */\n  appearance?: KumoRadioAppearance;\n  /** Label text displayed next to radio (required) */\n  label: string;\n  /** Description text displayed below the label (only visible in card appearance) */\n  description?: ReactNode;\n  /** Value of the radio (required) */\n  value: string;\n  /** Additional CSS classes for the label wrapper */\n  className?: string;\n  /** Whether the radio is disabled */\n  disabled?: boolean;\n};\n\n// Radio.Item for use within Radio.Group\nconst RadioItem = forwardRef<HTMLButtonElement, RadioItemProps>(\n  (\n    {\n      className,\n      disabled,\n      variant = \"default\",\n      appearance: appearanceProp,\n      label,\n      description,\n      value,\n    },\n    ref,\n  ) => {\n    const { controlPosition, appearance: groupAppearance } =\n      useContext(RadioGroupContext);\n    const appearance = appearanceProp ?? groupAppearance;\n    const isCard = appearance === \"card\";\n\n    // In card mode, default to \"end\" (radio on the right); otherwise follow group setting\n    const effectiveControlPosition = isCard ? \"end\" : controlPosition;\n\n    if (isCard) {\n      return (\n        <label\n          className={cn(\n            \"m-0 group relative flex items-start gap-3 rounded-lg border border-kumo-ring bg-kumo-base p-3 transition-colors has-[[data-checked]]:border-kumo-interact has-[[data-checked]]:bg-kumo-tint\",\n            variant === \"error\" &&\n              \"border-kumo-danger has-[[data-checked]]:border-kumo-danger has-[[data-checked]]:bg-kumo-base\",\n            disabled\n              ? \"cursor-not-allowed opacity-50\"\n              : cn(\n                  \"has-[[data-disabled]]:cursor-not-allowed has-[[data-disabled]]:opacity-50 cursor-pointer\",\n                  variant !== \"error\" &&\n                    \"hover:not-has-[[data-disabled]]:bg-kumo-tint\",\n                ),\n            className,\n          )}\n        >\n          <div className=\"flex min-w-0 flex-1 flex-col gap-0.5\">\n            <span className=\"text-base font-medium text-kumo-default\">\n              {label}\n            </span>\n            {description && (\n              <span className=\"text-sm text-kumo-subtle\">{description}</span>\n            )}\n          </div>\n          <BaseRadio.Root\n            ref={ref}\n            value={value}\n            disabled={disabled}\n            className={cn(\n              \"relative mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full border-0 bg-kumo-base ring\",\n              variant === \"error\" ? \"ring-kumo-danger\" : \"ring-kumo-line\",\n              !disabled &&\n                variant !== \"error\" &&\n                \"group-hover:ring-kumo-ring focus-visible:ring-kumo-ring focus-visible:outline-offset-3\",\n              !disabled &&\n                variant === \"error\" &&\n                \"focus-visible:ring-kumo-danger focus-visible:outline-offset-3\",\n              \"data-[checked]:bg-kumo-contrast\",\n            )}\n          >\n            <BaseRadio.Indicator\n              keepMounted\n              className=\"flex items-center justify-center\"\n            >\n              <span className=\"h-2 w-2 rounded-full bg-kumo-base\" />\n            </BaseRadio.Indicator>\n          </BaseRadio.Root>\n        </label>\n      );\n    }\n\n    return (\n      <label\n        className={cn(\n          \"m-0 group relative inline-flex items-center gap-2\",\n          // \"start\" (default): radio before label\n          // \"end\": label before radio using flex-row-reverse\n          effectiveControlPosition === \"end\" && \"flex-row-reverse justify-end\",\n          disabled ? \"cursor-not-allowed opacity-50\" : \"cursor-pointer\",\n          className,\n        )}\n      >\n        <BaseRadio.Root\n          ref={ref}\n          value={value}\n          disabled={disabled}\n          className={cn(\n            \"relative flex h-4 w-4 items-center justify-center rounded-full border-0 bg-kumo-base ring after:absolute after:-inset-x-3 after:-inset-y-2\",\n            variant === \"error\" ? \"ring-kumo-danger\" : \"ring-kumo-line\",\n            !disabled &&\n              variant !== \"error\" &&\n              \"group-hover:ring-kumo-ring focus-visible:ring-kumo-ring focus-visible:outline-offset-3\",\n            !disabled &&\n              variant === \"error\" &&\n              \"focus-visible:ring-kumo-danger focus-visible:outline-offset-3\",\n            \"data-[checked]:bg-kumo-contrast\",\n          )}\n        >\n          <BaseRadio.Indicator\n            keepMounted\n            className=\"flex items-center justify-center\"\n          >\n            <span className=\"h-2 w-2 rounded-full bg-kumo-base\" />\n          </BaseRadio.Indicator>\n        </BaseRadio.Root>\n        <span className=\"text-base font-medium text-kumo-default\">{label}</span>\n      </label>\n    );\n  },\n);\n\nRadioItem.displayName = \"Radio.Item\";\n\n// Radio.Group with built-in Fieldset and RadioGroup\nfunction RadioGroup({\n  legend,\n  children,\n  orientation = \"vertical\",\n  appearance = \"default\",\n  error,\n  description,\n  defaultValue,\n  value,\n  onValueChange,\n  disabled,\n  controlPosition = \"start\",\n  name,\n  className,\n}: RadioGroupProps) {\n  return (\n    <RadioGroupContext.Provider value={{ controlPosition, appearance }}>\n      <BaseRadioGroup\n        defaultValue={defaultValue}\n        value={value}\n        onValueChange={(newValue) => onValueChange?.(newValue)}\n        disabled={disabled}\n        name={name}\n      >\n        <Fieldset.Root\n          disabled={disabled}\n          className={cn(\n            \"flex flex-col gap-4 rounded-lg border border-kumo-line p-4\",\n            className,\n          )}\n        >\n          <Fieldset.Legend className=\"text-lg font-medium text-kumo-default\">\n            {legend}\n          </Fieldset.Legend>\n          <div\n            className={cn(\n              orientation === \"vertical\"\n                ? cn(\"flex flex-col\", appearance === \"card\" ? \"gap-3\" : \"gap-2\")\n                : appearance === \"card\"\n                  ? \"grid grid-cols-2 gap-3\"\n                  : \"flex flex-row flex-wrap gap-2\",\n            )}\n          >\n            {children}\n          </div>\n          {error && <p className=\"text-sm text-kumo-danger\">{error}</p>}\n          {description && (\n            <p className=\"text-sm text-kumo-subtle\">{description}</p>\n          )}\n        </Fieldset.Root>\n      </BaseRadioGroup>\n    </RadioGroupContext.Provider>\n  );\n}\n\nRadioGroup.displayName = \"Radio.Group\";\n\n// Export RadioGroup directly for external usage\nexport { RadioGroup };\n\n/**\n * Radio — radio button group for single-select choices.\n *\n * Compound component: `Radio.Group` (with built-in Fieldset) and `Radio.Item`.\n * Built on `@base-ui/react/radio-group` + `@base-ui/react/radio`.\n *\n * @example\n * ```tsx\n * <Radio.Group legend=\"Notification preference\" defaultValue=\"email\">\n *   <Radio.Item label=\"Email\" value=\"email\" />\n *   <Radio.Item label=\"SMS\" value=\"sms\" />\n *   <Radio.Item label=\"Push\" value=\"push\" />\n * </Radio.Group>\n * ```\n */\nexport const Radio = {\n  Item: RadioItem,\n  Group: RadioGroup,\n};\n"],"names":["KUMO_RADIO_VARIANTS","KUMO_RADIO_DEFAULT_VARIANTS","radioVariants","variant","appearance","cn","RadioGroupContext","createContext","RadioItem","forwardRef","className","disabled","appearanceProp","label","description","value","ref","controlPosition","groupAppearance","useContext","isCard","effectiveControlPosition","jsxs","jsx","BaseRadio.Root","BaseRadio.Indicator","RadioGroup","legend","children","orientation","error","defaultValue","onValueChange","name","BaseRadioGroup","newValue","Fieldset.Root","Fieldset.Legend","Radio"],"mappings":"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"}
+{"version":3,"file":"radio-l9dzm6sohcvvrsdc.js","sources":["../../src/components/radio/radio.tsx"],"sourcesContent":["import { forwardRef, createContext, useContext, type ReactNode } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Fieldset } from \"@base-ui/react/fieldset\";\nimport { RadioGroup as BaseRadioGroup } from \"@base-ui/react/radio-group\";\nimport { Radio as BaseRadio } from \"@base-ui/react/radio\";\n\n/** Radio variant definitions mapping variant names to their Tailwind classes. */\nexport const KUMO_RADIO_VARIANTS = {\n  variant: {\n    default: {\n      classes: \"ring-kumo-line\",\n      description: \"Default radio appearance\",\n    },\n    error: {\n      classes: \"ring-kumo-danger\",\n      description: \"Error state for validation failures\",\n    },\n  },\n  appearance: {\n    default: {\n      classes: \"\",\n      description: \"Standard inline radio item\",\n    },\n    card: {\n      classes:\n        \"rounded-lg border border-kumo-ring bg-kumo-base p-3 transition-colors hover:bg-kumo-tint has-[[data-checked]]:border-kumo-interact has-[[data-checked]]:bg-kumo-tint\",\n      description:\n        \"Choice card appearance with border, padding, and highlighted selection state\",\n    },\n  },\n} as const;\n\nexport const KUMO_RADIO_DEFAULT_VARIANTS = {\n  variant: \"default\",\n  appearance: \"default\",\n} as const;\n\n// Derived types from KUMO_RADIO_VARIANTS\nexport type KumoRadioVariant = keyof typeof KUMO_RADIO_VARIANTS.variant;\nexport type KumoRadioAppearance = keyof typeof KUMO_RADIO_VARIANTS.appearance;\n\nexport interface KumoRadioVariantsProps {\n  /**\n   * Visual variant.\n   * - `\"default\"` — Standard radio appearance\n   * - `\"error\"` — Error state for validation failures\n   * @default \"default\"\n   */\n  variant?: KumoRadioVariant;\n  /**\n   * Visual appearance.\n   * - `\"default\"` — Standard inline radio item\n   * - `\"card\"` — Choice card with border, padding, and highlighted selection state\n   * @default \"default\"\n   */\n  appearance?: KumoRadioAppearance;\n}\n\nexport function radioVariants({\n  variant = KUMO_RADIO_DEFAULT_VARIANTS.variant,\n  appearance = KUMO_RADIO_DEFAULT_VARIANTS.appearance,\n}: KumoRadioVariantsProps = {}) {\n  return cn(\n    KUMO_RADIO_VARIANTS.variant[variant].classes,\n    KUMO_RADIO_VARIANTS.appearance[appearance].classes,\n  );\n}\n\n// Legacy type alias for backwards compatibility\nexport type RadioVariant = KumoRadioVariant;\n\n/** Position of the radio control relative to its label */\nexport type RadioControlPosition = \"start\" | \"end\";\n\n// Context for passing controlPosition and appearance from Group to Items\nconst RadioGroupContext = createContext<{\n  controlPosition: RadioControlPosition;\n  appearance: KumoRadioAppearance;\n}>({\n  controlPosition: \"start\",\n  appearance: \"default\",\n});\n\n/**\n * Radio group component props (with built-in Fieldset and RadioGroup)\n *\n * @example\n * // Basic usage\n * ```tsx\n * <Radio.Group legend=\"Notification preference\" defaultValue=\"email\">\n *   <Radio.Item label=\"Email\" value=\"email\" />\n *   <Radio.Item label=\"SMS\" value=\"sms\" />\n *   <Radio.Item label=\"Push\" value=\"push\" />\n * </Radio.Group>\n * ```\n *\n * @example\n * // Horizontal layout\n * ```tsx\n * <Radio.Group legend=\"Size\" orientation=\"horizontal\" defaultValue=\"md\">\n *   <Radio.Item label=\"Small\" value=\"sm\" />\n *   <Radio.Item label=\"Medium\" value=\"md\" />\n *   <Radio.Item label=\"Large\" value=\"lg\" />\n * </Radio.Group>\n * ```\n *\n * @example\n * // With error and description\n * ```tsx\n * <Radio.Group\n *   legend=\"Payment method\"\n *   error=\"Please select a payment method\"\n *   description=\"Choose how you'd like to pay\"\n * >\n *   <Radio.Item label=\"Credit Card\" value=\"card\" />\n *   <Radio.Item label=\"PayPal\" value=\"paypal\" />\n * </Radio.Group>\n * ```\n *\n * @example\n * // Controlled\n * ```tsx\n * const [value, setValue] = useState(\"email\");\n * <Radio.Group legend=\"Contact\" value={value} onValueChange={setValue}>\n *   <Radio.Item label=\"Email\" value=\"email\" />\n *   <Radio.Item label=\"Phone\" value=\"phone\" />\n * </Radio.Group>\n * ```\n *\n * @example\n * // Label before radio (controlPosition=\"end\")\n * ```tsx\n * <Radio.Group legend=\"Options\" controlPosition=\"end\" defaultValue=\"a\">\n *   <Radio.Item label=\"Option A\" value=\"a\" />\n *   <Radio.Item label=\"Option B\" value=\"b\" />\n * </Radio.Group>\n * ```\n */\nexport interface RadioGroupProps {\n  /** Legend text for the group (required for accessibility) */\n  legend: string;\n  /** Child Radio.Item components */\n  children: ReactNode;\n  /** Layout direction of the radio items */\n  orientation?: \"vertical\" | \"horizontal\";\n  /**\n   * Visual appearance applied to all Radio.Item children.\n   * - `\"default\"` — Standard inline radio items\n   * - `\"card\"` — Choice card with border, padding, and highlighted selection state\n   *\n   * Individual items can override this with their own `appearance` prop.\n   * @default \"default\"\n   */\n  appearance?: KumoRadioAppearance;\n  /** Error message for the group */\n  error?: string;\n  /** Helper text for the group */\n  description?: ReactNode;\n  /** Value of the radio that should be initially selected (uncontrolled) */\n  defaultValue?: string;\n  /** Value of the radio that should be selected (controlled) */\n  value?: string;\n  /** Event handler called when radio value changes */\n  onValueChange?: (value: string) => void;\n  /** Whether all radios in the group are disabled */\n  disabled?: boolean;\n  /** Position of radio control relative to label: \"start\" (default) puts radio before label, \"end\" puts label before radio. Note: In card appearance, the control is always positioned at the end. */\n  controlPosition?: RadioControlPosition;\n  /** Form submission name for the radio group */\n  name?: string;\n  /** Additional CSS classes */\n  className?: string;\n}\n\n/**\n * Individual radio item within a group\n *\n * @example\n * ```tsx\n * <Radio.Item label=\"Option A\" value=\"a\" />\n * ```\n *\n * @example\n * // Disabled item\n * ```tsx\n * <Radio.Item label=\"Unavailable\" value=\"unavailable\" disabled />\n * ```\n */\nexport type RadioItemProps = {\n  /** Visual variant: \"default\" or \"error\" for validation failures */\n  variant?: RadioVariant;\n  /**\n   * Visual appearance of the radio item.\n   * - `\"default\"` — Standard inline radio item\n   * - `\"card\"` — Choice card with border, padding, and highlighted selection state\n   *\n   * When set on an individual item, overrides the group-level `appearance`.\n   * @default \"default\"\n   */\n  appearance?: KumoRadioAppearance;\n  /** Label text displayed next to radio (required) */\n  label: string;\n  /** Description text displayed below the label (only visible in card appearance) */\n  description?: ReactNode;\n  /** Value of the radio (required) */\n  value: string;\n  /** Additional CSS classes for the label wrapper */\n  className?: string;\n  /** Whether the radio is disabled */\n  disabled?: boolean;\n};\n\n// Radio.Item for use within Radio.Group\nconst RadioItem = forwardRef<HTMLButtonElement, RadioItemProps>(\n  (\n    {\n      className,\n      disabled,\n      variant = \"default\",\n      appearance: appearanceProp,\n      label,\n      description,\n      value,\n    },\n    ref,\n  ) => {\n    const { controlPosition, appearance: groupAppearance } =\n      useContext(RadioGroupContext);\n    const appearance = appearanceProp ?? groupAppearance;\n    const isCard = appearance === \"card\";\n\n    // In card mode, default to \"end\" (radio on the right); otherwise follow group setting\n    const effectiveControlPosition = isCard ? \"end\" : controlPosition;\n\n    if (isCard) {\n      return (\n        <label\n          className={cn(\n            \"m-0 group relative flex items-start gap-3 rounded-lg border border-kumo-ring bg-kumo-base p-3 transition-colors has-[[data-checked]]:border-kumo-interact has-[[data-checked]]:bg-kumo-tint\",\n            variant === \"error\" &&\n              \"border-kumo-danger has-[[data-checked]]:border-kumo-danger has-[[data-checked]]:bg-kumo-base\",\n            disabled\n              ? \"cursor-not-allowed opacity-50\"\n              : cn(\n                  \"has-[[data-disabled]]:cursor-not-allowed has-[[data-disabled]]:opacity-50 cursor-pointer\",\n                  variant !== \"error\" &&\n                    \"hover:not-has-[[data-disabled]]:bg-kumo-tint\",\n                ),\n            className,\n          )}\n        >\n          <div className=\"flex min-w-0 flex-1 flex-col gap-0.5\">\n            <span className=\"text-base font-medium text-kumo-default\">\n              {label}\n            </span>\n            {description && (\n              <span className=\"text-sm text-kumo-subtle\">{description}</span>\n            )}\n          </div>\n          <BaseRadio.Root\n            ref={ref}\n            value={value}\n            disabled={disabled}\n            className={cn(\n              \"relative mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full border-0 bg-kumo-base ring\",\n              variant === \"error\" ? \"ring-kumo-danger\" : \"ring-kumo-line\",\n              !disabled &&\n                variant !== \"error\" &&\n                \"group-hover:ring-kumo-ring focus-visible:ring-kumo-ring focus-visible:outline-offset-3\",\n              !disabled &&\n                variant === \"error\" &&\n                \"focus-visible:ring-kumo-danger focus-visible:outline-offset-3\",\n              \"data-[checked]:bg-kumo-contrast\",\n            )}\n          >\n            <BaseRadio.Indicator\n              keepMounted\n              className=\"flex items-center justify-center\"\n            >\n              <span className=\"h-2 w-2 rounded-full bg-kumo-base\" />\n            </BaseRadio.Indicator>\n          </BaseRadio.Root>\n        </label>\n      );\n    }\n\n    return (\n      <label\n        className={cn(\n          \"m-0 group relative inline-flex items-center gap-2\",\n          // \"start\" (default): radio before label\n          // \"end\": label before radio using flex-row-reverse\n          effectiveControlPosition === \"end\" && \"flex-row-reverse justify-end\",\n          disabled ? \"cursor-not-allowed opacity-50\" : \"cursor-pointer\",\n          className,\n        )}\n      >\n        <BaseRadio.Root\n          ref={ref}\n          value={value}\n          disabled={disabled}\n          className={cn(\n            \"relative flex h-4 w-4 items-center justify-center rounded-full border-0 bg-kumo-base ring after:absolute after:-inset-x-3 after:-inset-y-2\",\n            variant === \"error\" ? \"ring-kumo-danger\" : \"ring-kumo-line\",\n            !disabled &&\n              variant !== \"error\" &&\n              \"group-hover:ring-kumo-ring focus-visible:ring-kumo-ring focus-visible:outline-offset-3\",\n            !disabled &&\n              variant === \"error\" &&\n              \"focus-visible:ring-kumo-danger focus-visible:outline-offset-3\",\n            \"data-[checked]:bg-kumo-contrast\",\n          )}\n        >\n          <BaseRadio.Indicator\n            keepMounted\n            className=\"flex items-center justify-center\"\n          >\n            <span className=\"h-2 w-2 rounded-full bg-kumo-base\" />\n          </BaseRadio.Indicator>\n        </BaseRadio.Root>\n        <span className=\"text-base font-medium text-kumo-default\">{label}</span>\n      </label>\n    );\n  },\n);\n\nRadioItem.displayName = \"Radio.Item\";\n\n// Radio.Group with built-in Fieldset and RadioGroup\nfunction RadioGroup({\n  legend,\n  children,\n  orientation = \"vertical\",\n  appearance = \"default\",\n  error,\n  description,\n  defaultValue,\n  value,\n  onValueChange,\n  disabled,\n  controlPosition = \"start\",\n  name,\n  className,\n}: RadioGroupProps) {\n  return (\n    <RadioGroupContext.Provider value={{ controlPosition, appearance }}>\n      <BaseRadioGroup\n        defaultValue={defaultValue}\n        value={value}\n        onValueChange={(newValue) => onValueChange?.(newValue)}\n        disabled={disabled}\n        name={name}\n      >\n        <Fieldset.Root\n          disabled={disabled}\n          className={cn(\n            \"flex flex-col gap-4 rounded-lg border border-kumo-line p-4\",\n            className,\n          )}\n        >\n          <Fieldset.Legend className=\"text-lg font-medium text-kumo-default\">\n            {legend}\n          </Fieldset.Legend>\n          <div\n            className={cn(\n              orientation === \"vertical\"\n                ? cn(\"flex flex-col\", appearance === \"card\" ? \"gap-3\" : \"gap-2\")\n                : appearance === \"card\"\n                  ? \"grid grid-cols-2 gap-3\"\n                  : \"flex flex-row flex-wrap gap-2\",\n            )}\n          >\n            {children}\n          </div>\n          {error && <p className=\"text-sm text-kumo-danger\">{error}</p>}\n          {description && (\n            <p className=\"text-sm text-kumo-subtle\">{description}</p>\n          )}\n        </Fieldset.Root>\n      </BaseRadioGroup>\n    </RadioGroupContext.Provider>\n  );\n}\n\nRadioGroup.displayName = \"Radio.Group\";\n\n// Export RadioGroup directly for external usage\nexport { RadioGroup };\n\n/**\n * Radio — radio button group for single-select choices.\n *\n * Compound component: `Radio.Group` (with built-in Fieldset) and `Radio.Item`.\n * Built on `@base-ui/react/radio-group` + `@base-ui/react/radio`.\n *\n * @example\n * ```tsx\n * <Radio.Group legend=\"Notification preference\" defaultValue=\"email\">\n *   <Radio.Item label=\"Email\" value=\"email\" />\n *   <Radio.Item label=\"SMS\" value=\"sms\" />\n *   <Radio.Item label=\"Push\" value=\"push\" />\n * </Radio.Group>\n * ```\n */\nexport const Radio = Object.assign(RadioGroup, {\n  Item: RadioItem,\n  Group: RadioGroup,\n});\n"],"names":["KUMO_RADIO_VARIANTS","KUMO_RADIO_DEFAULT_VARIANTS","radioVariants","variant","appearance","cn","RadioGroupContext","createContext","RadioItem","forwardRef","className","disabled","appearanceProp","label","description","value","ref","controlPosition","groupAppearance","useContext","isCard","effectiveControlPosition","jsxs","jsx","BaseRadio.Root","BaseRadio.Indicator","RadioGroup","legend","children","orientation","error","defaultValue","onValueChange","name","BaseRadioGroup","newValue","Fieldset.Root","Fieldset.Legend","Radio"],"mappings":"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"}

package/dist/chunks/{select-go7a0z3evkh9cfxq.js → select-hnt87e3cfos48qql.js}

@@ -3,10 +3,10 @@ import { jsxs as r, jsx as e } from "react/jsx-runtime";
 import { CaretUpDownIcon as z, CheckIcon as C } from "@phosphor-icons/react";
 import { useId as O } from "react";
 import { c as v } from "./cn-ct4n7r74mh8y0f48.js";
-import { b as V } from "./button-d82sexqgnd834eaa.js";
+import { b as V } from "./button-j0hi0afn33w9lxgi.js";
 import { S as A } from "./skeleton-line-1j5exu6vv07mmhfb.js";
-import { F as E } from "./field-lc4gr226y5aqlctf.js";
-import { aV as P, aW as D, aX as T, aY as W, aZ as _, a_ as $, a$ as B, b0 as K, b1 as M, b2 as R } from "./vendor-base-ui-cpvkrhz4zgw9nw2b.js";
+import { F as E } from "./field-csje72m7j9403fj5.js";
+import { aV as P, aW as D, aX as T, aY as W, aZ as _, a_ as $, a$ as B, b0 as K, b1 as M, b2 as R } from "./vendor-base-ui-ccr5l0ynrievzzv3.js";
 function y(t) {
   return Array.isArray(t) ? t : Object.entries(t).map(([s, a]) => ({
     value: s,
@@ -127,4 +127,4 @@ X.Option = S;
 export {
   X as S
 };
-//# sourceMappingURL=select-go7a0z3evkh9cfxq.js.map
+//# sourceMappingURL=select-hnt87e3cfos48qql.js.map

package/dist/chunks/{select-go7a0z3evkh9cfxq.js.map → select-hnt87e3cfos48qql.js.map}

@@ -1 +1 @@
-{"version":3,"file":"select-go7a0z3evkh9cfxq.js","sources":["../../src/components/select/select.tsx"],"sourcesContent":["import { Select as SelectBase } from \"@base-ui/react/select\";\nimport { CaretUpDownIcon, CheckIcon } from \"@phosphor-icons/react\";\nimport { useId } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { buttonVariants } from \"../button\";\nimport { SkeletonLine } from \"../loader\";\nimport { Field, type FieldErrorMatch } from \"../field/field\";\n\n/** Select variant definitions (currently empty, reserved for future additions). */\nexport const KUMO_SELECT_VARIANTS = {\n  // Select currently has no variant options but structure is ready for future additions\n} as const;\n\nexport const KUMO_SELECT_DEFAULT_VARIANTS = {} as const;\n\n/**\n * Select component styling metadata for Figma plugin code generation\n * Extracted from select.tsx implementation (source of truth)\n */\nexport const KUMO_SELECT_STYLING = {\n  trigger: {\n    height: 36, // h-9\n    paddingX: 12, // px-3\n    borderRadius: 8, // rounded-lg\n    background: \"color-secondary\",\n    text: \"text-color-surface\",\n    ring: \"color-border\",\n    fontSize: 16, // text-base\n    fontWeight: 400, // font-normal\n  },\n  stateTokens: {\n    focus: { ring: \"color-active\" },\n    disabled: { opacity: 0.5 },\n  },\n  icons: {\n    caret: { name: \"ph-caret-up-down\", size: 20 },\n    check: { name: \"ph-check\", size: 20 },\n  },\n  popup: {\n    background: \"color-secondary\",\n    ring: \"color-border\",\n    borderRadius: 8, // rounded-lg\n    padding: 6, // p-1.5\n  },\n  option: {\n    paddingX: 8, // px-2\n    paddingY: 6, // py-1.5\n    borderRadius: 4, // rounded\n    fontSize: 16, // text-base\n    highlightBackground: \"color-surface-secondary\",\n  },\n} as const;\n\n// Derived types from KUMO_SELECT_VARIANTS\nexport interface KumoSelectVariantsProps {}\n\nexport function selectVariants(_props: KumoSelectVariantsProps = {}) {\n  return cn(\n    buttonVariants(),\n    \"justify-between font-normal\",\n    \"focus:opacity-100 focus-visible:ring-1 focus-visible:ring-kumo-ring *:in-focus:opacity-100\",\n  );\n}\n\n/**\n * Normalizes items to array format for Base UI.\n * Object maps are converted to array format so Base UI can properly\n * handle value matching and placeholder display.\n */\nfunction normalizeItems<T>(\n  items:\n    | Record<string, ReactNode>\n    | ReadonlyArray<{ label: ReactNode; value: T }>,\n): ReadonlyArray<{ label: ReactNode; value: T }> {\n  if (Array.isArray(items)) {\n    return items;\n  }\n  // Convert object map to array format\n  return Object.entries(items).map(([key, label]) => ({\n    value: key as T,\n    label,\n  }));\n}\n\n/**\n * Auto-generates Select.Option elements from items prop.\n * Only used when children are not explicitly provided.\n * Filters out null values (typically used for placeholders).\n */\nfunction renderOptionsFromItems<T>(\n  items:\n    | Record<string, ReactNode>\n    | ReadonlyArray<{ label: ReactNode; value: T }>,\n): ReactNode {\n  const normalizedItems = normalizeItems(items);\n\n  // Filter out null values and render options\n  return normalizedItems\n    .filter((item) => item.value !== null)\n    .map((item, index) => (\n      <Option\n        key={typeof item.value === \"string\" ? item.value : `option-${index}`}\n        value={item.value}\n      >\n        {item.label}\n      </Option>\n    ));\n}\n\ntype SelectPropsGeneric<\n  T,\n  Multiple extends boolean | undefined = false,\n> = SelectBase.Root.Props<T, Multiple> &\n  KumoSelectVariantsProps & {\n    multiple?: Multiple;\n    renderValue?: (value: Multiple extends true ? T[] : T) => ReactNode;\n    className?: string;\n    /**\n     * Label content for the select.\n     * When provided, enables the Field wrapper with a visible label.\n     * For accessibility without a visible label, use `aria-label` instead.\n     */\n    label?: ReactNode;\n    /**\n     * @deprecated Use `aria-label` for hidden labels instead of `label` + `hideLabel={true}`.\n     * When `label` is provided without `hideLabel`, the label is now visible by default (matching Input behavior).\n     * This prop will be removed in a future version.\n     */\n    hideLabel?: boolean;\n    placeholder?: string;\n    loading?: boolean;\n    /** Tooltip content to display next to the label via an info icon */\n    labelTooltip?: ReactNode;\n    /** Helper text displayed below the select */\n    description?: ReactNode;\n    /** Error message or validation error object */\n    error?: string | { message: ReactNode; match: FieldErrorMatch };\n  };\n\n/**\n * Select component props.\n *\n * **Accessible Name Required:** Select should have one of:\n * 1. `label` prop (recommended) - enables Field wrapper with visible label\n * 2. `aria-label` - for selects without visible label (accessibility-only)\n * 3. `aria-labelledby` - for custom label association\n *\n * @example\n * ```tsx\n * // With visible label (recommended)\n * <Select label=\"Country\" onValueChange={setValue}>\n *   <Select.Option value=\"us\">United States</Select.Option>\n *   <Select.Option value=\"uk\">United Kingdom</Select.Option>\n * </Select>\n *\n * // Without visible label (use aria-label for accessibility)\n * <Select aria-label=\"Select a country\" onValueChange={setValue}>\n *   <Select.Option value=\"us\">United States</Select.Option>\n * </Select>\n * ```\n */\nexport interface SelectProps {\n  /** Additional CSS classes merged via `cn()`. */\n  className?: string;\n  /**\n   * Label content for the select.\n   * When provided, enables the Field wrapper with a visible label above the select.\n   * For accessibility without a visible label, use `aria-label` instead.\n   */\n  label?: ReactNode;\n  /**\n   * @deprecated Use `aria-label` for hidden labels instead of `label` + `hideLabel={true}`.\n   * When `label` is provided without `hideLabel`, the label is now visible by default (matching Input behavior).\n   * This prop will be removed in a future version.\n   */\n  hideLabel?: boolean;\n  /** Placeholder text shown when no value is selected. */\n  placeholder?: string;\n  /** When `true`, shows a skeleton loader in place of the selected value. */\n  loading?: boolean;\n  /** Whether the select is disabled. */\n  disabled?: boolean;\n  /** Whether the select is required. When `false`, shows \"(optional)\" text. */\n  required?: boolean;\n  /** Tooltip content displayed next to the label via an info icon. */\n  labelTooltip?: ReactNode;\n  /** Currently selected value (controlled mode). */\n  value?: unknown;\n  /** Initial value for uncontrolled mode. */\n  defaultValue?: unknown;\n  /** Callback fired when the selected value changes. */\n  onValueChange?: (value: unknown) => void;\n  /** Enable multi-select mode. */\n  multiple?: boolean;\n  /** `Select.Option` elements to render in the dropdown. */\n  children?: ReactNode;\n  /** Helper text displayed below the select. */\n  description?: ReactNode;\n  /** Error message string or validation error object with `match` key. */\n  error?: string | { message: ReactNode; match: FieldErrorMatch };\n}\n\n/**\n * Dropdown for selecting a value from a list of options.\n * Wraps Base UI Select with Kumo styling and optional Field integration.\n *\n * @example\n * ```tsx\n * <Select label=\"Fruit\" onValueChange={setFruit}>\n *   <Select.Option value=\"apple\">Apple</Select.Option>\n *   <Select.Option value=\"banana\">Banana</Select.Option>\n * </Select>\n * ```\n */\nexport function Select<T, Multiple extends boolean | undefined = false>({\n  children,\n  className,\n  renderValue,\n  label,\n  hideLabel,\n  placeholder,\n  loading,\n  labelTooltip,\n  description,\n  error,\n  required,\n  ...props\n}: SelectPropsGeneric<T, Multiple> & { required?: boolean }) {\n  const labelId = useId();\n  const propLookup = props as Record<string, unknown>;\n  const ariaLabel = propLookup[\"aria-label\"] as string | undefined;\n  const ariaLabelledby = propLookup[\"aria-labelledby\"] as string | undefined;\n  // For aria-label, use string label or placeholder (ReactNode labels can't be used for aria-label)\n  const fallbackLabel = typeof label === \"string\" ? label : placeholder;\n\n  // Deprecation warning for hideLabel\n  if (process.env.NODE_ENV !== \"production\" && hideLabel !== undefined) {\n    console.warn(\n      \"[Kumo Select]: `hideLabel` is deprecated. For hidden labels, use `aria-label` instead of `label` + `hideLabel={true}`.\\n\" +\n        \"  Migration:\\n\" +\n        '  - For visible labels: <Select label=\"Country\" /> (hideLabel no longer needed)\\n' +\n        '  - For hidden labels: <Select aria-label=\"Select a country\" /> (remove label and hideLabel)',\n    );\n  }\n\n  // New behavior: label presence determines Field wrapper visibility (like Input)\n  // hideLabel is only respected for backward compatibility when explicitly set to true\n  const useFieldWrapper = label && hideLabel !== true;\n  const triggerLabelledBy = useFieldWrapper\n    ? undefined\n    : (ariaLabelledby ?? (label ? labelId : undefined));\n  const triggerAriaLabel =\n    ariaLabel ?? (!triggerLabelledBy ? fallbackLabel : undefined);\n\n  // Normalize items to array format for Base UI compatibility\n  // This fixes placeholder not showing with object map items\n  const normalizedItems = props.items ? normalizeItems(props.items) : undefined;\n\n  // Auto-render children from items if children not provided\n  const renderedChildren =\n    children ?? (props.items ? renderOptionsFromItems(props.items) : null);\n\n  const selectControl = (\n    <SelectBase.Root\n      {...props}\n      items={normalizedItems}\n      disabled={loading || props.disabled}\n    >\n      <SelectBase.Trigger\n        className={cn(\n          buttonVariants(),\n          \"justify-between font-normal\",\n          \"focus:opacity-100 focus-visible:ring-1 focus-visible:ring-kumo-ring *:in-focus:opacity-100\",\n          props.disabled && \"cursor-not-allowed opacity-50\",\n          className,\n        )}\n        aria-label={triggerAriaLabel}\n        aria-labelledby={triggerLabelledBy}\n      >\n        {loading ? (\n          <SkeletonLine className=\"w-32\" />\n        ) : (\n          <SelectBase.Value\n            placeholder={placeholder}\n            className=\"min-w-0 truncate\"\n          >\n            {renderValue}\n          </SelectBase.Value>\n        )}\n        <SelectBase.Icon className=\"flex shrink-0 items-center\">\n          <CaretUpDownIcon />\n        </SelectBase.Icon>\n      </SelectBase.Trigger>\n      <SelectBase.Portal>\n        <SelectBase.Positioner>\n          <SelectBase.Popup\n            className={cn(\n              \"overflow-hidden bg-kumo-base text-kumo-default\", // background\n              \"rounded-lg shadow-lg ring ring-kumo-ring\", // border part\n              // 3px adjustment to account for padding + border differences\n              \"min-w-[calc(var(--anchor-width)+3px)] p-1.5\", // spacing\n            )}\n          >\n            {renderedChildren}\n          </SelectBase.Popup>\n        </SelectBase.Positioner>\n      </SelectBase.Portal>\n    </SelectBase.Root>\n  );\n\n  // Use Field wrapper when label is provided and not hidden\n  if (useFieldWrapper) {\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        {selectControl}\n      </Field>\n    );\n  }\n\n  // Render with standalone label when label is hidden (sr-only)\n  // Still show description/error for accessibility and UX\n  const normalizedError = error\n    ? typeof error === \"string\"\n      ? { message: error, match: true as const }\n      : error\n    : undefined;\n\n  return (\n    <div className=\"grid gap-2\">\n      {label && (\n        <span id={labelId} className=\"sr-only\">\n          {label}\n        </span>\n      )}\n      {selectControl}\n      {normalizedError ? (\n        <span className=\"text-sm text-kumo-danger\">\n          {normalizedError.message}\n        </span>\n      ) : (\n        description && (\n          <span className=\"text-sm leading-snug text-kumo-subtle\">\n            {description}\n          </span>\n        )\n      )}\n    </div>\n  );\n}\n\ntype OptionProps<T> = {\n  children: ReactNode;\n  value: T;\n};\n\nfunction Option<T>({ children, value }: OptionProps<T>) {\n  return (\n    <SelectBase.Item\n      value={value}\n      className=\"group flex cursor-pointer items-center justify-between gap-2 rounded px-2 py-1.5 text-base data-highlighted:bg-kumo-tint\"\n    >\n      <SelectBase.ItemText>{children}</SelectBase.ItemText>\n      <SelectBase.ItemIndicator>\n        <CheckIcon />\n      </SelectBase.ItemIndicator>\n    </SelectBase.Item>\n  );\n}\n\nSelect.Option = Option;\n"],"names":["normalizeItems","items","key","label","renderOptionsFromItems","item","index","jsx","Option","Select","children","className","renderValue","hideLabel","placeholder","loading","labelTooltip","description","error","required","props","labelId","useId","propLookup","ariaLabel","ariaLabelledby","fallbackLabel","useFieldWrapper","triggerLabelledBy","triggerAriaLabel","normalizedItems","renderedChildren","selectControl","jsxs","SelectBase.Root","SelectBase.Trigger","cn","buttonVariants","SkeletonLine","SelectBase.Value","SelectBase.Icon","CaretUpDownIcon","SelectBase.Portal","SelectBase.Positioner","SelectBase.Popup","Field","normalizedError","value","SelectBase.Item","SelectBase.ItemText","SelectBase.ItemIndicator","CheckIcon"],"mappings":"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"}
+{"version":3,"file":"select-hnt87e3cfos48qql.js","sources":["../../src/components/select/select.tsx"],"sourcesContent":["import { Select as SelectBase } from \"@base-ui/react/select\";\nimport { CaretUpDownIcon, CheckIcon } from \"@phosphor-icons/react\";\nimport { useId } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { buttonVariants } from \"../button\";\nimport { SkeletonLine } from \"../loader\";\nimport { Field, type FieldErrorMatch } from \"../field/field\";\n\n/** Select variant definitions (currently empty, reserved for future additions). */\nexport const KUMO_SELECT_VARIANTS = {\n  // Select currently has no variant options but structure is ready for future additions\n} as const;\n\nexport const KUMO_SELECT_DEFAULT_VARIANTS = {} as const;\n\n/**\n * Select component styling metadata for Figma plugin code generation\n * Extracted from select.tsx implementation (source of truth)\n */\nexport const KUMO_SELECT_STYLING = {\n  trigger: {\n    height: 36, // h-9\n    paddingX: 12, // px-3\n    borderRadius: 8, // rounded-lg\n    background: \"color-secondary\",\n    text: \"text-color-surface\",\n    ring: \"color-border\",\n    fontSize: 16, // text-base\n    fontWeight: 400, // font-normal\n  },\n  stateTokens: {\n    focus: { ring: \"color-active\" },\n    disabled: { opacity: 0.5 },\n  },\n  icons: {\n    caret: { name: \"ph-caret-up-down\", size: 20 },\n    check: { name: \"ph-check\", size: 20 },\n  },\n  popup: {\n    background: \"color-secondary\",\n    ring: \"color-border\",\n    borderRadius: 8, // rounded-lg\n    padding: 6, // p-1.5\n  },\n  option: {\n    paddingX: 8, // px-2\n    paddingY: 6, // py-1.5\n    borderRadius: 4, // rounded\n    fontSize: 16, // text-base\n    highlightBackground: \"color-surface-secondary\",\n  },\n} as const;\n\n// Derived types from KUMO_SELECT_VARIANTS\nexport interface KumoSelectVariantsProps {}\n\nexport function selectVariants(_props: KumoSelectVariantsProps = {}) {\n  return cn(\n    buttonVariants(),\n    \"justify-between font-normal\",\n    \"focus:opacity-100 focus-visible:ring-1 focus-visible:ring-kumo-ring *:in-focus:opacity-100\",\n  );\n}\n\n/**\n * Normalizes items to array format for Base UI.\n * Object maps are converted to array format so Base UI can properly\n * handle value matching and placeholder display.\n */\nfunction normalizeItems<T>(\n  items:\n    | Record<string, ReactNode>\n    | ReadonlyArray<{ label: ReactNode; value: T }>,\n): ReadonlyArray<{ label: ReactNode; value: T }> {\n  if (Array.isArray(items)) {\n    return items;\n  }\n  // Convert object map to array format\n  return Object.entries(items).map(([key, label]) => ({\n    value: key as T,\n    label,\n  }));\n}\n\n/**\n * Auto-generates Select.Option elements from items prop.\n * Only used when children are not explicitly provided.\n * Filters out null values (typically used for placeholders).\n */\nfunction renderOptionsFromItems<T>(\n  items:\n    | Record<string, ReactNode>\n    | ReadonlyArray<{ label: ReactNode; value: T }>,\n): ReactNode {\n  const normalizedItems = normalizeItems(items);\n\n  // Filter out null values and render options\n  return normalizedItems\n    .filter((item) => item.value !== null)\n    .map((item, index) => (\n      <Option\n        key={typeof item.value === \"string\" ? item.value : `option-${index}`}\n        value={item.value}\n      >\n        {item.label}\n      </Option>\n    ));\n}\n\ntype SelectPropsGeneric<\n  T,\n  Multiple extends boolean | undefined = false,\n> = SelectBase.Root.Props<T, Multiple> &\n  KumoSelectVariantsProps & {\n    multiple?: Multiple;\n    renderValue?: (value: Multiple extends true ? T[] : T) => ReactNode;\n    className?: string;\n    /**\n     * Label content for the select.\n     * When provided, enables the Field wrapper with a visible label.\n     * For accessibility without a visible label, use `aria-label` instead.\n     */\n    label?: ReactNode;\n    /**\n     * @deprecated Use `aria-label` for hidden labels instead of `label` + `hideLabel={true}`.\n     * When `label` is provided without `hideLabel`, the label is now visible by default (matching Input behavior).\n     * This prop will be removed in a future version.\n     */\n    hideLabel?: boolean;\n    placeholder?: string;\n    loading?: boolean;\n    /** Tooltip content to display next to the label via an info icon */\n    labelTooltip?: ReactNode;\n    /** Helper text displayed below the select */\n    description?: ReactNode;\n    /** Error message or validation error object */\n    error?: string | { message: ReactNode; match: FieldErrorMatch };\n  };\n\n/**\n * Select component props.\n *\n * **Accessible Name Required:** Select should have one of:\n * 1. `label` prop (recommended) - enables Field wrapper with visible label\n * 2. `aria-label` - for selects without visible label (accessibility-only)\n * 3. `aria-labelledby` - for custom label association\n *\n * @example\n * ```tsx\n * // With visible label (recommended)\n * <Select label=\"Country\" onValueChange={setValue}>\n *   <Select.Option value=\"us\">United States</Select.Option>\n *   <Select.Option value=\"uk\">United Kingdom</Select.Option>\n * </Select>\n *\n * // Without visible label (use aria-label for accessibility)\n * <Select aria-label=\"Select a country\" onValueChange={setValue}>\n *   <Select.Option value=\"us\">United States</Select.Option>\n * </Select>\n * ```\n */\nexport interface SelectProps {\n  /** Additional CSS classes merged via `cn()`. */\n  className?: string;\n  /**\n   * Label content for the select.\n   * When provided, enables the Field wrapper with a visible label above the select.\n   * For accessibility without a visible label, use `aria-label` instead.\n   */\n  label?: ReactNode;\n  /**\n   * @deprecated Use `aria-label` for hidden labels instead of `label` + `hideLabel={true}`.\n   * When `label` is provided without `hideLabel`, the label is now visible by default (matching Input behavior).\n   * This prop will be removed in a future version.\n   */\n  hideLabel?: boolean;\n  /** Placeholder text shown when no value is selected. */\n  placeholder?: string;\n  /** When `true`, shows a skeleton loader in place of the selected value. */\n  loading?: boolean;\n  /** Whether the select is disabled. */\n  disabled?: boolean;\n  /** Whether the select is required. When `false`, shows \"(optional)\" text. */\n  required?: boolean;\n  /** Tooltip content displayed next to the label via an info icon. */\n  labelTooltip?: ReactNode;\n  /** Currently selected value (controlled mode). */\n  value?: unknown;\n  /** Initial value for uncontrolled mode. */\n  defaultValue?: unknown;\n  /** Callback fired when the selected value changes. */\n  onValueChange?: (value: unknown) => void;\n  /** Enable multi-select mode. */\n  multiple?: boolean;\n  /** `Select.Option` elements to render in the dropdown. */\n  children?: ReactNode;\n  /** Helper text displayed below the select. */\n  description?: ReactNode;\n  /** Error message string or validation error object with `match` key. */\n  error?: string | { message: ReactNode; match: FieldErrorMatch };\n}\n\n/**\n * Dropdown for selecting a value from a list of options.\n * Wraps Base UI Select with Kumo styling and optional Field integration.\n *\n * @example\n * ```tsx\n * <Select label=\"Fruit\" onValueChange={setFruit}>\n *   <Select.Option value=\"apple\">Apple</Select.Option>\n *   <Select.Option value=\"banana\">Banana</Select.Option>\n * </Select>\n * ```\n */\nexport function Select<T, Multiple extends boolean | undefined = false>({\n  children,\n  className,\n  renderValue,\n  label,\n  hideLabel,\n  placeholder,\n  loading,\n  labelTooltip,\n  description,\n  error,\n  required,\n  ...props\n}: SelectPropsGeneric<T, Multiple> & { required?: boolean }) {\n  const labelId = useId();\n  const propLookup = props as Record<string, unknown>;\n  const ariaLabel = propLookup[\"aria-label\"] as string | undefined;\n  const ariaLabelledby = propLookup[\"aria-labelledby\"] as string | undefined;\n  // For aria-label, use string label or placeholder (ReactNode labels can't be used for aria-label)\n  const fallbackLabel = typeof label === \"string\" ? label : placeholder;\n\n  // Deprecation warning for hideLabel\n  if (process.env.NODE_ENV !== \"production\" && hideLabel !== undefined) {\n    console.warn(\n      \"[Kumo Select]: `hideLabel` is deprecated. For hidden labels, use `aria-label` instead of `label` + `hideLabel={true}`.\\n\" +\n        \"  Migration:\\n\" +\n        '  - For visible labels: <Select label=\"Country\" /> (hideLabel no longer needed)\\n' +\n        '  - For hidden labels: <Select aria-label=\"Select a country\" /> (remove label and hideLabel)',\n    );\n  }\n\n  // New behavior: label presence determines Field wrapper visibility (like Input)\n  // hideLabel is only respected for backward compatibility when explicitly set to true\n  const useFieldWrapper = label && hideLabel !== true;\n  const triggerLabelledBy = useFieldWrapper\n    ? undefined\n    : (ariaLabelledby ?? (label ? labelId : undefined));\n  const triggerAriaLabel =\n    ariaLabel ?? (!triggerLabelledBy ? fallbackLabel : undefined);\n\n  // Normalize items to array format for Base UI compatibility\n  // This fixes placeholder not showing with object map items\n  const normalizedItems = props.items ? normalizeItems(props.items) : undefined;\n\n  // Auto-render children from items if children not provided\n  const renderedChildren =\n    children ?? (props.items ? renderOptionsFromItems(props.items) : null);\n\n  const selectControl = (\n    <SelectBase.Root\n      {...props}\n      items={normalizedItems}\n      disabled={loading || props.disabled}\n    >\n      <SelectBase.Trigger\n        className={cn(\n          buttonVariants(),\n          \"justify-between font-normal\",\n          \"focus:opacity-100 focus-visible:ring-1 focus-visible:ring-kumo-ring *:in-focus:opacity-100\",\n          props.disabled && \"cursor-not-allowed opacity-50\",\n          className,\n        )}\n        aria-label={triggerAriaLabel}\n        aria-labelledby={triggerLabelledBy}\n      >\n        {loading ? (\n          <SkeletonLine className=\"w-32\" />\n        ) : (\n          <SelectBase.Value\n            placeholder={placeholder}\n            className=\"min-w-0 truncate\"\n          >\n            {renderValue}\n          </SelectBase.Value>\n        )}\n        <SelectBase.Icon className=\"flex shrink-0 items-center\">\n          <CaretUpDownIcon />\n        </SelectBase.Icon>\n      </SelectBase.Trigger>\n      <SelectBase.Portal>\n        <SelectBase.Positioner>\n          <SelectBase.Popup\n            className={cn(\n              \"overflow-hidden bg-kumo-base text-kumo-default\", // background\n              \"rounded-lg shadow-lg ring ring-kumo-ring\", // border part\n              // 3px adjustment to account for padding + border differences\n              \"min-w-[calc(var(--anchor-width)+3px)] p-1.5\", // spacing\n            )}\n          >\n            {renderedChildren}\n          </SelectBase.Popup>\n        </SelectBase.Positioner>\n      </SelectBase.Portal>\n    </SelectBase.Root>\n  );\n\n  // Use Field wrapper when label is provided and not hidden\n  if (useFieldWrapper) {\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        {selectControl}\n      </Field>\n    );\n  }\n\n  // Render with standalone label when label is hidden (sr-only)\n  // Still show description/error for accessibility and UX\n  const normalizedError = error\n    ? typeof error === \"string\"\n      ? { message: error, match: true as const }\n      : error\n    : undefined;\n\n  return (\n    <div className=\"grid gap-2\">\n      {label && (\n        <span id={labelId} className=\"sr-only\">\n          {label}\n        </span>\n      )}\n      {selectControl}\n      {normalizedError ? (\n        <span className=\"text-sm text-kumo-danger\">\n          {normalizedError.message}\n        </span>\n      ) : (\n        description && (\n          <span className=\"text-sm leading-snug text-kumo-subtle\">\n            {description}\n          </span>\n        )\n      )}\n    </div>\n  );\n}\n\ntype OptionProps<T> = {\n  children: ReactNode;\n  value: T;\n};\n\nfunction Option<T>({ children, value }: OptionProps<T>) {\n  return (\n    <SelectBase.Item\n      value={value}\n      className=\"group flex cursor-pointer items-center justify-between gap-2 rounded px-2 py-1.5 text-base data-highlighted:bg-kumo-tint\"\n    >\n      <SelectBase.ItemText>{children}</SelectBase.ItemText>\n      <SelectBase.ItemIndicator>\n        <CheckIcon />\n      </SelectBase.ItemIndicator>\n    </SelectBase.Item>\n  );\n}\n\nSelect.Option = Option;\n"],"names":["normalizeItems","items","key","label","renderOptionsFromItems","item","index","jsx","Option","Select","children","className","renderValue","hideLabel","placeholder","loading","labelTooltip","description","error","required","props","labelId","useId","propLookup","ariaLabel","ariaLabelledby","fallbackLabel","useFieldWrapper","triggerLabelledBy","triggerAriaLabel","normalizedItems","renderedChildren","selectControl","jsxs","SelectBase.Root","SelectBase.Trigger","cn","buttonVariants","SkeletonLine","SelectBase.Value","SelectBase.Icon","CaretUpDownIcon","SelectBase.Portal","SelectBase.Positioner","SelectBase.Popup","Field","normalizedError","value","SelectBase.Item","SelectBase.ItemText","SelectBase.ItemIndicator","CheckIcon"],"mappings":"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"}

package/dist/chunks/{sensitive-input-gtzk3vit4i35n95g.js → sensitive-input-lvtccf3iqc06lj7b.js}

@@ -3,9 +3,9 @@ import { jsxs as b, Fragment as ce, jsx as r } from "react/jsx-runtime";
 import { EyeSlash as ue, Eye as pe } from "@phosphor-icons/react";
 import { forwardRef as de, useState as w, useRef as N, useId as T, useCallback as l, useEffect as fe } from "react";
 import { c as p } from "./cn-ct4n7r74mh8y0f48.js";
-import { K as me, i as ve } from "./input-nvne68upfj8b2bk6.js";
-import { F as ge } from "./field-lc4gr226y5aqlctf.js";
-import { I as he } from "./vendor-base-ui-cpvkrhz4zgw9nw2b.js";
+import { K as me, i as ve } from "./input-c8jmidy7gdqfiky1.js";
+import { F as ge } from "./field-csje72m7j9403fj5.js";
+import { I as he } from "./vendor-base-ui-ccr5l0ynrievzzv3.js";
 const Te = me, M = {
   size: "base",
   variant: "default"
@@ -255,4 +255,4 @@ export {
   ye as S,
   M as a
 };
-//# sourceMappingURL=sensitive-input-gtzk3vit4i35n95g.js.map
+//# sourceMappingURL=sensitive-input-lvtccf3iqc06lj7b.js.map

package/dist/chunks/{sensitive-input-gtzk3vit4i35n95g.js.map → sensitive-input-lvtccf3iqc06lj7b.js.map}

@@ -1 +1 @@
-{"version":3,"file":"sensitive-input-gtzk3vit4i35n95g.js","sources":["../../src/components/sensitive-input/sensitive-input.tsx"],"sourcesContent":["import { Eye, EyeSlash } from \"@phosphor-icons/react\";\nimport {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n  type ComponentPropsWithoutRef,\n  type ReactNode,\n} from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Input as BaseInput } from \"@base-ui/react/input\";\nimport {\n  inputVariants,\n  KUMO_INPUT_VARIANTS,\n  type KumoInputSize,\n  type KumoInputVariant,\n} from \"../input/input\";\nimport { Field, type FieldErrorMatch } from \"../field/field\";\n\nexport const KUMO_SENSITIVE_INPUT_VARIANTS = KUMO_INPUT_VARIANTS;\n\nexport const KUMO_SENSITIVE_INPUT_DEFAULT_VARIANTS = {\n  size: \"base\",\n  variant: \"default\",\n} as const;\n\ntype Mode = \"masked\" | \"revealed\" | \"empty\";\n\n/**\n * SensitiveInput component props.\n *\n * @example\n * ```tsx\n * <SensitiveInput label=\"API Key\" defaultValue=\"sk_live_abc123xyz789\" />\n * <SensitiveInput label=\"Secret\" value={secret} onValueChange={setSecret} />\n * ```\n */\nexport interface SensitiveInputProps\n  extends Omit<\n    ComponentPropsWithoutRef<\"input\">,\n    \"size\" | \"type\" | \"value\" | \"defaultValue\"\n  > {\n  /** Controlled value */\n  value?: string;\n  /** Uncontrolled default value */\n  defaultValue?: string;\n  /** Simplified change handler receiving just the value */\n  onValueChange?: (value: string) => void;\n  /** Callback fired after value is copied to clipboard */\n  onCopy?: () => void;\n  /**\n   * Size of the input.\n   * - `\"xs\"` — Extra small for compact UIs\n   * - `\"sm\"` — Small for secondary fields\n   * - `\"base\"` — Default input size\n   * - `\"lg\"` — Large for prominent fields\n   * @default \"base\"\n   */\n  size?: KumoInputSize;\n  /**\n   * Style variant of the input.\n   * - `\"default\"` — Default input appearance\n   * - `\"error\"` — Error state for validation failures\n   * @default \"default\"\n   */\n  variant?: KumoInputVariant;\n  /** Label content for the input (enables Field wrapper and sets masked state label) - 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\n/**\n * Password/secret input that masks its value by default and reveals on click.\n * Includes a built-in copy-to-clipboard button on hover.\n *\n * @example\n * ```tsx\n * <SensitiveInput label=\"API Key\" defaultValue=\"sk_live_abc123xyz789\" />\n * ```\n */\nexport const SensitiveInput = forwardRef<HTMLInputElement, SensitiveInputProps>(\n  (\n    {\n      value: controlledValue,\n      defaultValue = \"\",\n      onChange,\n      onValueChange,\n      onCopy,\n      size = KUMO_SENSITIVE_INPUT_DEFAULT_VARIANTS.size,\n      variant = KUMO_SENSITIVE_INPUT_DEFAULT_VARIANTS.variant,\n      disabled = false,\n      readOnly = false,\n      id,\n      autoComplete = \"off\",\n      className,\n      label,\n      labelTooltip,\n      description,\n      error,\n      required,\n      ...inputProps\n    },\n    ref,\n  ) => {\n    // For aria-label, only use string labels (ReactNode labels can't be used for aria-label)\n    const ariaLabelFallback =\n      typeof label === \"string\" ? label : \"Sensitive value\";\n    const isControlled = controlledValue !== undefined;\n    const [internalValue, setInternalValue] = useState(defaultValue);\n    const value = isControlled ? controlledValue : internalValue;\n    const hasValue = value.length > 0;\n\n    const [mode, setMode] = useState<Mode>(() =>\n      hasValue ? \"masked\" : \"empty\",\n    );\n\n    const [copied, setCopied] = useState(false);\n\n    const inputRef = useRef<HTMLInputElement | null>(null);\n    const containerRef = useRef<HTMLDivElement>(null);\n    const liveRegionId = useId();\n    const generatedId = useId();\n    const inputId = id ?? generatedId;\n    const maskedInstructionId = useId();\n\n    const mergedRef = useCallback(\n      (node: HTMLInputElement | null) => {\n        inputRef.current = node;\n        if (typeof ref === \"function\") {\n          ref(node);\n        } else if (ref) {\n          ref.current = node;\n        }\n      },\n      [ref],\n    );\n\n    // Reset copied state after 2 seconds\n    useEffect(() => {\n      if (copied) {\n        const timeoutId = setTimeout(() => setCopied(false), 2000);\n        return () => clearTimeout(timeoutId);\n      }\n    }, [copied]);\n\n    const copyToClipboard = useCallback(\n      async (e: React.MouseEvent<HTMLButtonElement>) => {\n        e.stopPropagation();\n        try {\n          if (\n            typeof navigator !== \"undefined\" &&\n            navigator.clipboard &&\n            typeof navigator.clipboard.writeText === \"function\"\n          ) {\n            await navigator.clipboard.writeText(value);\n            setCopied(true);\n            onCopy?.();\n            return;\n          }\n        } catch {\n          // Fall through to manual fallback\n        }\n\n        if (typeof document !== \"undefined\") {\n          const textarea = document.createElement(\"textarea\");\n          textarea.value = value;\n          textarea.setAttribute(\"readonly\", \"\");\n          textarea.style.position = \"absolute\";\n          textarea.style.left = \"-9999px\";\n          document.body.appendChild(textarea);\n          const selection = document.getSelection();\n          const previousRange = selection?.rangeCount\n            ? selection.getRangeAt(0)\n            : null;\n          textarea.select();\n          try {\n            document.execCommand(\"copy\");\n            setCopied(true);\n            onCopy?.();\n          } catch (error) {\n            console.warn(\"Clipboard copy failed\", error);\n          } finally {\n            document.body.removeChild(textarea);\n            if (previousRange) {\n              selection?.removeAllRanges();\n              selection?.addRange(previousRange);\n            }\n          }\n        }\n      },\n      [value, onCopy],\n    );\n\n    // Sync mode when value changes externally\n    const prevHasValueRef = useRef(hasValue);\n    if (prevHasValueRef.current !== hasValue) {\n      prevHasValueRef.current = hasValue;\n      if (!hasValue && mode === \"masked\") {\n        setMode(\"empty\");\n      }\n    }\n\n    const handleContainerClick = useCallback(\n      (e: React.MouseEvent) => {\n        if (disabled) return;\n        // Ignore clicks that originated from outside (e.g., label click focusing input)\n        // Label clicks trigger a click on the input, but the click coordinates are outside the container\n        if (containerRef.current) {\n          const rect = containerRef.current.getBoundingClientRect();\n          const isClickInsideContainer =\n            e.clientX >= rect.left &&\n            e.clientX <= rect.right &&\n            e.clientY >= rect.top &&\n            e.clientY <= rect.bottom;\n          if (!isClickInsideContainer) return;\n        }\n        if (mode === \"masked\" && hasValue) {\n          setMode(\"revealed\");\n          if (!readOnly) {\n            setTimeout(() => inputRef.current?.focus(), 0);\n          }\n        }\n      },\n      [mode, hasValue, disabled, readOnly],\n    );\n\n    const handleToggleVisibility = useCallback(\n      (e: React.MouseEvent<HTMLButtonElement>) => {\n        e.stopPropagation();\n        if (mode === \"revealed\") {\n          setMode(\"masked\");\n        } else if (mode === \"empty\" && hasValue) {\n          setMode(\"revealed\");\n        }\n      },\n      [mode, hasValue],\n    );\n\n    const handleChange = useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        const newValue = e.target.value;\n        if (!isControlled) {\n          setInternalValue(newValue);\n        }\n        onChange?.(e);\n        onValueChange?.(newValue);\n      },\n      [isControlled, onChange, onValueChange],\n    );\n\n    const handleBlur = useCallback(\n      (e: React.FocusEvent<HTMLInputElement>) => {\n        // Don't mask if focus is moving to a button inside the container (copy/eye buttons)\n        if (\n          containerRef.current &&\n          e.relatedTarget instanceof Node &&\n          containerRef.current.contains(e.relatedTarget)\n        ) {\n          return;\n        }\n        if (hasValue) {\n          setMode(\"masked\");\n        }\n      },\n      [hasValue],\n    );\n\n    const handleContainerKeyDown = useCallback(\n      (e: React.KeyboardEvent<HTMLDivElement>) => {\n        if (disabled) return;\n        if (mode === \"masked\" && hasValue) {\n          if (e.key === \"Enter\" || e.key === \" \") {\n            e.preventDefault();\n            setMode(\"revealed\");\n            if (!readOnly) {\n              setTimeout(() => inputRef.current?.focus(), 0);\n            }\n          }\n        }\n      },\n      [mode, hasValue, disabled, readOnly],\n    );\n\n    const handleInputKeyDown = useCallback(\n      (e: React.KeyboardEvent<HTMLInputElement>) => {\n        if (mode === \"revealed\" && e.key === \"Escape\") {\n          setMode(\"masked\");\n          // Move focus to container to avoid focus trap (input becomes tabIndex={-1})\n          setTimeout(() => containerRef.current?.focus(), 0);\n        }\n      },\n      [mode],\n    );\n\n    const isMaskedWithValue = mode === \"masked\" && hasValue;\n    const showEyeButton =\n      !disabled && (mode === \"revealed\" || (mode === \"empty\" && hasValue));\n\n    // Icon sizes matching input sizes\n    const iconSize = size === \"xs\" || size === \"sm\" ? \"size-3\" : \"size-4\";\n\n    const containerClassName = cn(\n      inputVariants({ size, variant, parentFocusIndicator: true }),\n      \"group/container relative flex w-full items-center\",\n      isMaskedWithValue && !disabled && \"cursor-pointer\",\n      disabled && \"cursor-not-allowed\",\n      className,\n    );\n\n    const containerContent = (\n      <>\n        {/* Input - defines the width, always rendered */}\n        <BaseInput\n          ref={mergedRef}\n          id={inputId}\n          type={mode === \"revealed\" ? \"text\" : \"password\"}\n          value={value}\n          onChange={handleChange}\n          onBlur={handleBlur}\n          onKeyDown={handleInputKeyDown}\n          disabled={disabled}\n          readOnly={readOnly || isMaskedWithValue}\n          autoComplete={autoComplete}\n          tabIndex={isMaskedWithValue ? -1 : 0}\n          className={cn(\n            \"w-full border-0 bg-transparent p-0 text-kumo-default ring-0 kumo-input-placeholder disabled:cursor-not-allowed disabled:text-kumo-subtle\",\n            size === \"xs\" && \"pr-5\",\n            size === \"sm\" && \"pr-6\",\n            size === \"base\" && \"pr-8\",\n            size === \"lg\" && \"pr-10\",\n            isMaskedWithValue && \"pointer-events-none text-transparent\",\n          )}\n          aria-hidden={isMaskedWithValue}\n          {...inputProps}\n        />\n\n        {/* Mask overlay - absolutely positioned, doesn't affect layout */}\n        <span\n          className={cn(\n            \"pointer-events-none absolute inset-y-0 left-0 flex items-center overflow-hidden select-none\",\n            // Match input pr padding (space for icon)\n            size === \"xs\" && \"right-5\",\n            size === \"sm\" && \"right-6\",\n            size === \"base\" && \"right-8\",\n            size === \"lg\" && \"right-10\",\n            // Match the padding from inputVariants\n            size === \"xs\" && \"px-1.5\",\n            size === \"sm\" && \"px-2\",\n            size === \"base\" && \"px-3\",\n            size === \"lg\" && \"px-4\",\n            // Hidden when not masked\n            !isMaskedWithValue && \"invisible\",\n            // When masked: enable pointer events\n            isMaskedWithValue && \"pointer-events-auto\",\n            // Text color - use text-kumo-default to contrast with bg-kumo-control input background\n            \"text-kumo-default\",\n            // Hover state - pure CSS, no React state (group for children)\n            \"group/mask\",\n          )}\n          aria-hidden=\"true\"\n        >\n          {/* Both texts rendered, stacked. Visibility toggled on hover to prevent layout shift */}\n          <span className=\"relative\">\n            <span\n              className={cn(\n                isMaskedWithValue &&\n                  !disabled &&\n                  \"group-focus-within/container:invisible group-hover/mask:invisible\",\n              )}\n            >\n              ••••••••\n            </span>\n            {isMaskedWithValue && !disabled && (\n              <span className=\"invisible absolute left-0 top-0 whitespace-nowrap text-kumo-subtle group-focus-within/container:visible group-hover/mask:visible\">\n                Click to reveal\n              </span>\n            )}\n          </span>\n        </span>\n\n        {/* Eye button - absolutely positioned to the right */}\n        <button\n          type=\"button\"\n          onClick={handleToggleVisibility}\n          onKeyDown={(e) => e.stopPropagation()}\n          aria-label={mode === \"revealed\" ? \"Hide value\" : \"Reveal value\"}\n          tabIndex={showEyeButton ? 0 : -1}\n          className={cn(\n            \"absolute top-1/2 right-0 -translate-y-1/2 cursor-pointer text-kumo-subtle hover:text-kumo-default focus:text-kumo-default focus-visible:ring-1 focus-visible:ring-kumo-ring focus-visible:rounded-sm\",\n            // Match right padding from inputVariants\n            size === \"xs\" && \"right-1.5\",\n            size === \"sm\" && \"right-2\",\n            size === \"base\" && \"right-3\",\n            size === \"lg\" && \"right-4\",\n            iconSize,\n            !showEyeButton && \"pointer-events-none opacity-0\",\n          )}\n        >\n          {mode === \"revealed\" ? (\n            <EyeSlash className=\"size-full\" />\n          ) : (\n            <Eye className=\"size-full\" />\n          )}\n        </button>\n\n        {/* Copy tab - appears on hover/focus at top right (hidden when disabled) */}\n        {hasValue && !disabled && (\n          <button\n            type=\"button\"\n            onClick={copyToClipboard}\n            onKeyDown={(e) => e.stopPropagation()}\n            aria-label={copied ? \"Copied\" : \"Copy to clipboard\"}\n            className={cn(\n              \"absolute -top-px right-2 -translate-y-full cursor-pointer rounded-t-md bg-kumo-brand px-2 py-0.5 text-xs text-white opacity-0 transition-opacity group-focus-within/container:opacity-100 group-hover/container:opacity-100 hover:brightness-120 focus-visible:outline focus-visible:outline-offset-1 focus-visible:outline-kumo-ring\",\n            )}\n          >\n            {copied ? \"Copied\" : \"Copy\"}\n          </button>\n        )}\n      </>\n    );\n\n    const input = (\n      <div>\n        {isMaskedWithValue ? (\n          <div\n            ref={containerRef}\n            // Cannot use <button> here because containerContent contains interactive button elements (Copy, Reveal).\n            // Using role=\"button\" with proper keyboard handling instead.\n            // oxlint-disable-next-line prefer-tag-over-role\n            role=\"button\"\n            tabIndex={disabled ? -1 : 0}\n            className={containerClassName}\n            onClick={handleContainerClick}\n            onKeyDown={handleContainerKeyDown}\n            aria-label={`${ariaLabelFallback}, masked.`}\n            aria-describedby={`${maskedInstructionId} ${liveRegionId}`}\n            aria-disabled={disabled}\n          >\n            {containerContent}\n          </div>\n        ) : (\n          <div ref={containerRef} className={containerClassName}>\n            {containerContent}\n          </div>\n        )}\n        {isMaskedWithValue && (\n          <span id={maskedInstructionId} className=\"sr-only\">\n            Click or press Enter to reveal.\n          </span>\n        )}\n        <span id={liveRegionId} className=\"sr-only\" aria-live=\"polite\">\n          {mode === \"masked\" && hasValue && \"Value hidden\"}\n          {copied && \"Copied to clipboard\"}\n        </span>\n      </div>\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);\n\nSensitiveInput.displayName = \"SensitiveInput\";\n"],"names":["KUMO_SENSITIVE_INPUT_VARIANTS","KUMO_INPUT_VARIANTS","KUMO_SENSITIVE_INPUT_DEFAULT_VARIANTS","SensitiveInput","forwardRef","controlledValue","defaultValue","onChange","onValueChange","onCopy","size","variant","disabled","readOnly","id","autoComplete","className","label","labelTooltip","description","error","required","inputProps","ref","ariaLabelFallback","isControlled","internalValue","setInternalValue","useState","value","hasValue","mode","setMode","copied","setCopied","inputRef","useRef","containerRef","liveRegionId","useId","generatedId","inputId","maskedInstructionId","mergedRef","useCallback","node","useEffect","timeoutId","copyToClipboard","textarea","selection","previousRange","prevHasValueRef","handleContainerClick","rect","handleToggleVisibility","handleChange","newValue","handleBlur","handleContainerKeyDown","handleInputKeyDown","isMaskedWithValue","showEyeButton","iconSize","containerClassName","cn","inputVariants","containerContent","jsxs","Fragment","jsx","BaseInput","EyeSlash","Eye","input","Field"],"mappings":";;;;;;;;AAqBO,MAAMA,KAAgCC,IAEhCC,IAAwC;AAAA,EACnD,MAAM;AAAA,EACN,SAAS;AACX,GA6DaC,KAAiBC;AAAA,EAC5B,CACE;AAAA,IACE,OAAOC;AAAA,IACP,cAAAC,IAAe;AAAA,IACf,UAAAC;AAAA,IACA,eAAAC;AAAA,IACA,QAAAC;AAAA,IACA,MAAAC,IAAOR,EAAsC;AAAA,IAC7C,SAAAS,IAAUT,EAAsC;AAAA,IAChD,UAAAU,IAAW;AAAA,IACX,UAAAC,IAAW;AAAA,IACX,IAAAC;AAAA,IACA,cAAAC,IAAe;AAAA,IACf,WAAAC;AAAA,IACA,OAAAC;AAAA,IACA,cAAAC;AAAA,IACA,aAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,MACG;AAEH,UAAMC,IACJ,OAAOP,KAAU,WAAWA,IAAQ,mBAChCQ,IAAepB,MAAoB,QACnC,CAACqB,GAAeC,CAAgB,IAAIC,EAAStB,CAAY,GACzDuB,IAAQJ,IAAepB,IAAkBqB,GACzCI,IAAWD,EAAM,SAAS,GAE1B,CAACE,GAAMC,CAAO,IAAIJ;AAAA,MAAe,MACrCE,IAAW,WAAW;AAAA,IAAA,GAGlB,CAACG,GAAQC,CAAS,IAAIN,EAAS,EAAK,GAEpCO,IAAWC,EAAgC,IAAI,GAC/CC,IAAeD,EAAuB,IAAI,GAC1CE,IAAeC,EAAA,GACfC,IAAcD,EAAA,GACdE,IAAU3B,KAAM0B,GAChBE,IAAsBH,EAAA,GAEtBI,IAAYC;AAAA,MAChB,CAACC,MAAkC;AACjC,QAAAV,EAAS,UAAUU,GACf,OAAOtB,KAAQ,aACjBA,EAAIsB,CAAI,IACCtB,MACTA,EAAI,UAAUsB;AAAA,MAElB;AAAA,MACA,CAACtB,CAAG;AAAA,IAAA;AAIN,IAAAuB,GAAU,MAAM;AACd,UAAIb,GAAQ;AACV,cAAMc,IAAY,WAAW,MAAMb,EAAU,EAAK,GAAG,GAAI;AACzD,eAAO,MAAM,aAAaa,CAAS;AAAA,MACrC;AAAA,IACF,GAAG,CAACd,CAAM,CAAC;AAEX,UAAMe,KAAkBJ;AAAA,MACtB,OAAO,MAA2C;AAChD,UAAE,gBAAA;AACF,YAAI;AACF,cACE,OAAO,YAAc,OACrB,UAAU,aACV,OAAO,UAAU,UAAU,aAAc,YACzC;AACA,kBAAM,UAAU,UAAU,UAAUf,CAAK,GACzCK,EAAU,EAAI,GACdzB,IAAA;AACA;AAAA,UACF;AAAA,QACF,QAAQ;AAAA,QAER;AAEA,YAAI,OAAO,WAAa,KAAa;AACnC,gBAAMwC,IAAW,SAAS,cAAc,UAAU;AAClD,UAAAA,EAAS,QAAQpB,GACjBoB,EAAS,aAAa,YAAY,EAAE,GACpCA,EAAS,MAAM,WAAW,YAC1BA,EAAS,MAAM,OAAO,WACtB,SAAS,KAAK,YAAYA,CAAQ;AAClC,gBAAMC,IAAY,SAAS,aAAA,GACrBC,IAAgBD,GAAW,aAC7BA,EAAU,WAAW,CAAC,IACtB;AACJ,UAAAD,EAAS,OAAA;AACT,cAAI;AACF,qBAAS,YAAY,MAAM,GAC3Bf,EAAU,EAAI,GACdzB,IAAA;AAAA,UACF,SAASW,IAAO;AACd,oBAAQ,KAAK,yBAAyBA,EAAK;AAAA,UAC7C,UAAA;AACE,qBAAS,KAAK,YAAY6B,CAAQ,GAC9BE,MACFD,GAAW,gBAAA,GACXA,GAAW,SAASC,CAAa;AAAA,UAErC;AAAA,QACF;AAAA,MACF;AAAA,MACA,CAACtB,GAAOpB,CAAM;AAAA,IAAA,GAIV2C,IAAkBhB,EAAON,CAAQ;AACvC,IAAIsB,EAAgB,YAAYtB,MAC9BsB,EAAgB,UAAUtB,GACtB,CAACA,KAAYC,MAAS,YACxBC,EAAQ,OAAO;AAInB,UAAMqB,KAAuBT;AAAA,MAC3B,CAAC,MAAwB;AACvB,YAAI,CAAAhC,GAGJ;AAAA,cAAIyB,EAAa,SAAS;AACxB,kBAAMiB,IAAOjB,EAAa,QAAQ,sBAAA;AAMlC,gBAAI,EAJF,EAAE,WAAWiB,EAAK,QAClB,EAAE,WAAWA,EAAK,SAClB,EAAE,WAAWA,EAAK,OAClB,EAAE,WAAWA,EAAK,QACS;AAAA,UAC/B;AACA,UAAIvB,MAAS,YAAYD,MACvBE,EAAQ,UAAU,GACbnB,KACH,WAAW,MAAMsB,EAAS,SAAS,MAAA,GAAS,CAAC;AAAA;AAAA,MAGnD;AAAA,MACA,CAACJ,GAAMD,GAAUlB,GAAUC,CAAQ;AAAA,IAAA,GAG/B0C,KAAyBX;AAAA,MAC7B,CAAC,MAA2C;AAC1C,UAAE,gBAAA,GACEb,MAAS,aACXC,EAAQ,QAAQ,IACPD,MAAS,WAAWD,KAC7BE,EAAQ,UAAU;AAAA,MAEtB;AAAA,MACA,CAACD,GAAMD,CAAQ;AAAA,IAAA,GAGX0B,KAAeZ;AAAA,MACnB,CAAC,MAA2C;AAC1C,cAAMa,IAAW,EAAE,OAAO;AAC1B,QAAKhC,KACHE,EAAiB8B,CAAQ,GAE3BlD,IAAW,CAAC,GACZC,IAAgBiD,CAAQ;AAAA,MAC1B;AAAA,MACA,CAAChC,GAAclB,GAAUC,CAAa;AAAA,IAAA,GAGlCkD,KAAad;AAAA,MACjB,CAAC,MAA0C;AAEzC,QACEP,EAAa,WACb,EAAE,yBAAyB,QAC3BA,EAAa,QAAQ,SAAS,EAAE,aAAa,KAI3CP,KACFE,EAAQ,QAAQ;AAAA,MAEpB;AAAA,MACA,CAACF,CAAQ;AAAA,IAAA,GAGL6B,KAAyBf;AAAA,MAC7B,CAAC,MAA2C;AAC1C,QAAIhC,KACAmB,MAAS,YAAYD,MACnB,EAAE,QAAQ,WAAW,EAAE,QAAQ,SACjC,EAAE,eAAA,GACFE,EAAQ,UAAU,GACbnB,KACH,WAAW,MAAMsB,EAAS,SAAS,MAAA,GAAS,CAAC;AAAA,MAIrD;AAAA,MACA,CAACJ,GAAMD,GAAUlB,GAAUC,CAAQ;AAAA,IAAA,GAG/B+C,KAAqBhB;AAAA,MACzB,CAAC,MAA6C;AAC5C,QAAIb,MAAS,cAAc,EAAE,QAAQ,aACnCC,EAAQ,QAAQ,GAEhB,WAAW,MAAMK,EAAa,SAAS,MAAA,GAAS,CAAC;AAAA,MAErD;AAAA,MACA,CAACN,CAAI;AAAA,IAAA,GAGD8B,IAAoB9B,MAAS,YAAYD,GACzCgC,IACJ,CAAClD,MAAamB,MAAS,cAAeA,MAAS,WAAWD,IAGtDiC,KAAWrD,MAAS,QAAQA,MAAS,OAAO,WAAW,UAEvDsD,IAAqBC;AAAA,MACzBC,GAAc,EAAE,MAAAxD,GAAM,SAAAC,GAAS,sBAAsB,IAAM;AAAA,MAC3D;AAAA,MACAkD,KAAqB,CAACjD,KAAY;AAAA,MAClCA,KAAY;AAAA,MACZI;AAAA,IAAA,GAGImD,IACJ,gBAAAC,EAAAC,IAAA,EAEE,UAAA;AAAA,MAAA,gBAAAC;AAAA,QAACC;AAAAA,QAAA;AAAA,UACC,KAAK5B;AAAA,UACL,IAAIF;AAAA,UACJ,MAAMV,MAAS,aAAa,SAAS;AAAA,UACrC,OAAAF;AAAA,UACA,UAAU2B;AAAA,UACV,QAAQE;AAAA,UACR,WAAWE;AAAA,UACX,UAAAhD;AAAA,UACA,UAAUC,KAAYgD;AAAA,UACtB,cAAA9C;AAAA,UACA,UAAU8C,IAAoB,KAAK;AAAA,UACnC,WAAWI;AAAA,YACT;AAAA,YACAvD,MAAS,QAAQ;AAAA,YACjBA,MAAS,QAAQ;AAAA,YACjBA,MAAS,UAAU;AAAA,YACnBA,MAAS,QAAQ;AAAA,YACjBmD,KAAqB;AAAA,UAAA;AAAA,UAEvB,eAAaA;AAAA,UACZ,GAAGvC;AAAA,QAAA;AAAA,MAAA;AAAA,MAIN,gBAAAgD;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAWL;AAAA,YACT;AAAA;AAAA,YAEAvD,MAAS,QAAQ;AAAA,YACjBA,MAAS,QAAQ;AAAA,YACjBA,MAAS,UAAU;AAAA,YACnBA,MAAS,QAAQ;AAAA;AAAA,YAEjBA,MAAS,QAAQ;AAAA,YACjBA,MAAS,QAAQ;AAAA,YACjBA,MAAS,UAAU;AAAA,YACnBA,MAAS,QAAQ;AAAA;AAAA,YAEjB,CAACmD,KAAqB;AAAA;AAAA,YAEtBA,KAAqB;AAAA;AAAA,YAErB;AAAA;AAAA,YAEA;AAAA,UAAA;AAAA,UAEF,eAAY;AAAA,UAGZ,UAAA,gBAAAO,EAAC,QAAA,EAAK,WAAU,YACd,UAAA;AAAA,YAAA,gBAAAE;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAWL;AAAA,kBACTJ,KACE,CAACjD,KACD;AAAA,gBAAA;AAAA,gBAEL,UAAA;AAAA,cAAA;AAAA,YAAA;AAAA,YAGAiD,KAAqB,CAACjD,uBACpB,QAAA,EAAK,WAAU,oIAAmI,UAAA,kBAAA,CAEnJ;AAAA,UAAA,EAAA,CAEJ;AAAA,QAAA;AAAA,MAAA;AAAA,MAIF,gBAAA0D;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,SAASf;AAAA,UACT,WAAW,CAAC,MAAM,EAAE,gBAAA;AAAA,UACpB,cAAYxB,MAAS,aAAa,eAAe;AAAA,UACjD,UAAU+B,IAAgB,IAAI;AAAA,UAC9B,WAAWG;AAAA,YACT;AAAA;AAAA,YAEAvD,MAAS,QAAQ;AAAA,YACjBA,MAAS,QAAQ;AAAA,YACjBA,MAAS,UAAU;AAAA,YACnBA,MAAS,QAAQ;AAAA,YACjBqD;AAAA,YACA,CAACD,KAAiB;AAAA,UAAA;AAAA,UAGnB,UAAA/B,MAAS,aACR,gBAAAuC,EAACE,IAAA,EAAS,WAAU,aAAY,IAEhC,gBAAAF,EAACG,IAAA,EAAI,WAAU,YAAA,CAAY;AAAA,QAAA;AAAA,MAAA;AAAA,MAK9B3C,KAAY,CAAClB,KACZ,gBAAA0D;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAStB;AAAA,UACT,WAAW,CAAC,MAAM,EAAE,gBAAA;AAAA,UACpB,cAAYf,IAAS,WAAW;AAAA,UAChC,WAAWgC;AAAA,YACT;AAAA,UAAA;AAAA,UAGD,cAAS,WAAW;AAAA,QAAA;AAAA,MAAA;AAAA,IACvB,GAEJ,GAGIS,sBACH,OAAA,EACE,UAAA;AAAA,MAAAb,IACC,gBAAAS;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,KAAKjC;AAAA,UAIL,MAAK;AAAA,UACL,UAAUzB,IAAW,KAAK;AAAA,UAC1B,WAAWoD;AAAA,UACX,SAASX;AAAA,UACT,WAAWM;AAAA,UACX,cAAY,GAAGnC,CAAiB;AAAA,UAChC,oBAAkB,GAAGkB,CAAmB,IAAIJ,CAAY;AAAA,UACxD,iBAAe1B;AAAA,UAEd,UAAAuD;AAAA,QAAA;AAAA,MAAA,IAGH,gBAAAG,EAAC,OAAA,EAAI,KAAKjC,GAAc,WAAW2B,GAChC,UAAAG,GACH;AAAA,MAEDN,KACC,gBAAAS,EAAC,QAAA,EAAK,IAAI5B,GAAqB,WAAU,WAAU,UAAA,mCAEnD;AAAA,wBAED,QAAA,EAAK,IAAIJ,GAAc,WAAU,WAAU,aAAU,UACnD,UAAA;AAAA,QAAAP,MAAS,YAAYD,KAAY;AAAA,QACjCG,KAAU;AAAA,MAAA,EAAA,CACb;AAAA,IAAA,GACF;AAIF,WAAIhB,IAEA,gBAAAqD;AAAA,MAACK;AAAA,MAAA;AAAA,QACC,OAAA1D;AAAA,QACA,UAAAI;AAAA,QACA,cAAAH;AAAA,QACA,aAAAC;AAAA,QACA,OACEC,IACI,OAAOA,KAAU,WACf,EAAE,SAASA,GAAO,OAAO,GAAA,IACzBA,IACF;AAAA,QAGL,UAAAsD;AAAA,MAAA;AAAA,IAAA,IAMAA;AAAA,EACT;AACF;AAEAvE,GAAe,cAAc;"}
+{"version":3,"file":"sensitive-input-lvtccf3iqc06lj7b.js","sources":["../../src/components/sensitive-input/sensitive-input.tsx"],"sourcesContent":["import { Eye, EyeSlash } from \"@phosphor-icons/react\";\nimport {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n  type ComponentPropsWithoutRef,\n  type ReactNode,\n} from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Input as BaseInput } from \"@base-ui/react/input\";\nimport {\n  inputVariants,\n  KUMO_INPUT_VARIANTS,\n  type KumoInputSize,\n  type KumoInputVariant,\n} from \"../input/input\";\nimport { Field, type FieldErrorMatch } from \"../field/field\";\n\nexport const KUMO_SENSITIVE_INPUT_VARIANTS = KUMO_INPUT_VARIANTS;\n\nexport const KUMO_SENSITIVE_INPUT_DEFAULT_VARIANTS = {\n  size: \"base\",\n  variant: \"default\",\n} as const;\n\ntype Mode = \"masked\" | \"revealed\" | \"empty\";\n\n/**\n * SensitiveInput component props.\n *\n * @example\n * ```tsx\n * <SensitiveInput label=\"API Key\" defaultValue=\"sk_live_abc123xyz789\" />\n * <SensitiveInput label=\"Secret\" value={secret} onValueChange={setSecret} />\n * ```\n */\nexport interface SensitiveInputProps\n  extends Omit<\n    ComponentPropsWithoutRef<\"input\">,\n    \"size\" | \"type\" | \"value\" | \"defaultValue\"\n  > {\n  /** Controlled value */\n  value?: string;\n  /** Uncontrolled default value */\n  defaultValue?: string;\n  /** Simplified change handler receiving just the value */\n  onValueChange?: (value: string) => void;\n  /** Callback fired after value is copied to clipboard */\n  onCopy?: () => void;\n  /**\n   * Size of the input.\n   * - `\"xs\"` — Extra small for compact UIs\n   * - `\"sm\"` — Small for secondary fields\n   * - `\"base\"` — Default input size\n   * - `\"lg\"` — Large for prominent fields\n   * @default \"base\"\n   */\n  size?: KumoInputSize;\n  /**\n   * Style variant of the input.\n   * - `\"default\"` — Default input appearance\n   * - `\"error\"` — Error state for validation failures\n   * @default \"default\"\n   */\n  variant?: KumoInputVariant;\n  /** Label content for the input (enables Field wrapper and sets masked state label) - 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\n/**\n * Password/secret input that masks its value by default and reveals on click.\n * Includes a built-in copy-to-clipboard button on hover.\n *\n * @example\n * ```tsx\n * <SensitiveInput label=\"API Key\" defaultValue=\"sk_live_abc123xyz789\" />\n * ```\n */\nexport const SensitiveInput = forwardRef<HTMLInputElement, SensitiveInputProps>(\n  (\n    {\n      value: controlledValue,\n      defaultValue = \"\",\n      onChange,\n      onValueChange,\n      onCopy,\n      size = KUMO_SENSITIVE_INPUT_DEFAULT_VARIANTS.size,\n      variant = KUMO_SENSITIVE_INPUT_DEFAULT_VARIANTS.variant,\n      disabled = false,\n      readOnly = false,\n      id,\n      autoComplete = \"off\",\n      className,\n      label,\n      labelTooltip,\n      description,\n      error,\n      required,\n      ...inputProps\n    },\n    ref,\n  ) => {\n    // For aria-label, only use string labels (ReactNode labels can't be used for aria-label)\n    const ariaLabelFallback =\n      typeof label === \"string\" ? label : \"Sensitive value\";\n    const isControlled = controlledValue !== undefined;\n    const [internalValue, setInternalValue] = useState(defaultValue);\n    const value = isControlled ? controlledValue : internalValue;\n    const hasValue = value.length > 0;\n\n    const [mode, setMode] = useState<Mode>(() =>\n      hasValue ? \"masked\" : \"empty\",\n    );\n\n    const [copied, setCopied] = useState(false);\n\n    const inputRef = useRef<HTMLInputElement | null>(null);\n    const containerRef = useRef<HTMLDivElement>(null);\n    const liveRegionId = useId();\n    const generatedId = useId();\n    const inputId = id ?? generatedId;\n    const maskedInstructionId = useId();\n\n    const mergedRef = useCallback(\n      (node: HTMLInputElement | null) => {\n        inputRef.current = node;\n        if (typeof ref === \"function\") {\n          ref(node);\n        } else if (ref) {\n          ref.current = node;\n        }\n      },\n      [ref],\n    );\n\n    // Reset copied state after 2 seconds\n    useEffect(() => {\n      if (copied) {\n        const timeoutId = setTimeout(() => setCopied(false), 2000);\n        return () => clearTimeout(timeoutId);\n      }\n    }, [copied]);\n\n    const copyToClipboard = useCallback(\n      async (e: React.MouseEvent<HTMLButtonElement>) => {\n        e.stopPropagation();\n        try {\n          if (\n            typeof navigator !== \"undefined\" &&\n            navigator.clipboard &&\n            typeof navigator.clipboard.writeText === \"function\"\n          ) {\n            await navigator.clipboard.writeText(value);\n            setCopied(true);\n            onCopy?.();\n            return;\n          }\n        } catch {\n          // Fall through to manual fallback\n        }\n\n        if (typeof document !== \"undefined\") {\n          const textarea = document.createElement(\"textarea\");\n          textarea.value = value;\n          textarea.setAttribute(\"readonly\", \"\");\n          textarea.style.position = \"absolute\";\n          textarea.style.left = \"-9999px\";\n          document.body.appendChild(textarea);\n          const selection = document.getSelection();\n          const previousRange = selection?.rangeCount\n            ? selection.getRangeAt(0)\n            : null;\n          textarea.select();\n          try {\n            document.execCommand(\"copy\");\n            setCopied(true);\n            onCopy?.();\n          } catch (error) {\n            console.warn(\"Clipboard copy failed\", error);\n          } finally {\n            document.body.removeChild(textarea);\n            if (previousRange) {\n              selection?.removeAllRanges();\n              selection?.addRange(previousRange);\n            }\n          }\n        }\n      },\n      [value, onCopy],\n    );\n\n    // Sync mode when value changes externally\n    const prevHasValueRef = useRef(hasValue);\n    if (prevHasValueRef.current !== hasValue) {\n      prevHasValueRef.current = hasValue;\n      if (!hasValue && mode === \"masked\") {\n        setMode(\"empty\");\n      }\n    }\n\n    const handleContainerClick = useCallback(\n      (e: React.MouseEvent) => {\n        if (disabled) return;\n        // Ignore clicks that originated from outside (e.g., label click focusing input)\n        // Label clicks trigger a click on the input, but the click coordinates are outside the container\n        if (containerRef.current) {\n          const rect = containerRef.current.getBoundingClientRect();\n          const isClickInsideContainer =\n            e.clientX >= rect.left &&\n            e.clientX <= rect.right &&\n            e.clientY >= rect.top &&\n            e.clientY <= rect.bottom;\n          if (!isClickInsideContainer) return;\n        }\n        if (mode === \"masked\" && hasValue) {\n          setMode(\"revealed\");\n          if (!readOnly) {\n            setTimeout(() => inputRef.current?.focus(), 0);\n          }\n        }\n      },\n      [mode, hasValue, disabled, readOnly],\n    );\n\n    const handleToggleVisibility = useCallback(\n      (e: React.MouseEvent<HTMLButtonElement>) => {\n        e.stopPropagation();\n        if (mode === \"revealed\") {\n          setMode(\"masked\");\n        } else if (mode === \"empty\" && hasValue) {\n          setMode(\"revealed\");\n        }\n      },\n      [mode, hasValue],\n    );\n\n    const handleChange = useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        const newValue = e.target.value;\n        if (!isControlled) {\n          setInternalValue(newValue);\n        }\n        onChange?.(e);\n        onValueChange?.(newValue);\n      },\n      [isControlled, onChange, onValueChange],\n    );\n\n    const handleBlur = useCallback(\n      (e: React.FocusEvent<HTMLInputElement>) => {\n        // Don't mask if focus is moving to a button inside the container (copy/eye buttons)\n        if (\n          containerRef.current &&\n          e.relatedTarget instanceof Node &&\n          containerRef.current.contains(e.relatedTarget)\n        ) {\n          return;\n        }\n        if (hasValue) {\n          setMode(\"masked\");\n        }\n      },\n      [hasValue],\n    );\n\n    const handleContainerKeyDown = useCallback(\n      (e: React.KeyboardEvent<HTMLDivElement>) => {\n        if (disabled) return;\n        if (mode === \"masked\" && hasValue) {\n          if (e.key === \"Enter\" || e.key === \" \") {\n            e.preventDefault();\n            setMode(\"revealed\");\n            if (!readOnly) {\n              setTimeout(() => inputRef.current?.focus(), 0);\n            }\n          }\n        }\n      },\n      [mode, hasValue, disabled, readOnly],\n    );\n\n    const handleInputKeyDown = useCallback(\n      (e: React.KeyboardEvent<HTMLInputElement>) => {\n        if (mode === \"revealed\" && e.key === \"Escape\") {\n          setMode(\"masked\");\n          // Move focus to container to avoid focus trap (input becomes tabIndex={-1})\n          setTimeout(() => containerRef.current?.focus(), 0);\n        }\n      },\n      [mode],\n    );\n\n    const isMaskedWithValue = mode === \"masked\" && hasValue;\n    const showEyeButton =\n      !disabled && (mode === \"revealed\" || (mode === \"empty\" && hasValue));\n\n    // Icon sizes matching input sizes\n    const iconSize = size === \"xs\" || size === \"sm\" ? \"size-3\" : \"size-4\";\n\n    const containerClassName = cn(\n      inputVariants({ size, variant, parentFocusIndicator: true }),\n      \"group/container relative flex w-full items-center\",\n      isMaskedWithValue && !disabled && \"cursor-pointer\",\n      disabled && \"cursor-not-allowed\",\n      className,\n    );\n\n    const containerContent = (\n      <>\n        {/* Input - defines the width, always rendered */}\n        <BaseInput\n          ref={mergedRef}\n          id={inputId}\n          type={mode === \"revealed\" ? \"text\" : \"password\"}\n          value={value}\n          onChange={handleChange}\n          onBlur={handleBlur}\n          onKeyDown={handleInputKeyDown}\n          disabled={disabled}\n          readOnly={readOnly || isMaskedWithValue}\n          autoComplete={autoComplete}\n          tabIndex={isMaskedWithValue ? -1 : 0}\n          className={cn(\n            \"w-full border-0 bg-transparent p-0 text-kumo-default ring-0 kumo-input-placeholder disabled:cursor-not-allowed disabled:text-kumo-subtle\",\n            size === \"xs\" && \"pr-5\",\n            size === \"sm\" && \"pr-6\",\n            size === \"base\" && \"pr-8\",\n            size === \"lg\" && \"pr-10\",\n            isMaskedWithValue && \"pointer-events-none text-transparent\",\n          )}\n          aria-hidden={isMaskedWithValue}\n          {...inputProps}\n        />\n\n        {/* Mask overlay - absolutely positioned, doesn't affect layout */}\n        <span\n          className={cn(\n            \"pointer-events-none absolute inset-y-0 left-0 flex items-center overflow-hidden select-none\",\n            // Match input pr padding (space for icon)\n            size === \"xs\" && \"right-5\",\n            size === \"sm\" && \"right-6\",\n            size === \"base\" && \"right-8\",\n            size === \"lg\" && \"right-10\",\n            // Match the padding from inputVariants\n            size === \"xs\" && \"px-1.5\",\n            size === \"sm\" && \"px-2\",\n            size === \"base\" && \"px-3\",\n            size === \"lg\" && \"px-4\",\n            // Hidden when not masked\n            !isMaskedWithValue && \"invisible\",\n            // When masked: enable pointer events\n            isMaskedWithValue && \"pointer-events-auto\",\n            // Text color - use text-kumo-default to contrast with bg-kumo-control input background\n            \"text-kumo-default\",\n            // Hover state - pure CSS, no React state (group for children)\n            \"group/mask\",\n          )}\n          aria-hidden=\"true\"\n        >\n          {/* Both texts rendered, stacked. Visibility toggled on hover to prevent layout shift */}\n          <span className=\"relative\">\n            <span\n              className={cn(\n                isMaskedWithValue &&\n                  !disabled &&\n                  \"group-focus-within/container:invisible group-hover/mask:invisible\",\n              )}\n            >\n              ••••••••\n            </span>\n            {isMaskedWithValue && !disabled && (\n              <span className=\"invisible absolute left-0 top-0 whitespace-nowrap text-kumo-subtle group-focus-within/container:visible group-hover/mask:visible\">\n                Click to reveal\n              </span>\n            )}\n          </span>\n        </span>\n\n        {/* Eye button - absolutely positioned to the right */}\n        <button\n          type=\"button\"\n          onClick={handleToggleVisibility}\n          onKeyDown={(e) => e.stopPropagation()}\n          aria-label={mode === \"revealed\" ? \"Hide value\" : \"Reveal value\"}\n          tabIndex={showEyeButton ? 0 : -1}\n          className={cn(\n            \"absolute top-1/2 right-0 -translate-y-1/2 cursor-pointer text-kumo-subtle hover:text-kumo-default focus:text-kumo-default focus-visible:ring-1 focus-visible:ring-kumo-ring focus-visible:rounded-sm\",\n            // Match right padding from inputVariants\n            size === \"xs\" && \"right-1.5\",\n            size === \"sm\" && \"right-2\",\n            size === \"base\" && \"right-3\",\n            size === \"lg\" && \"right-4\",\n            iconSize,\n            !showEyeButton && \"pointer-events-none opacity-0\",\n          )}\n        >\n          {mode === \"revealed\" ? (\n            <EyeSlash className=\"size-full\" />\n          ) : (\n            <Eye className=\"size-full\" />\n          )}\n        </button>\n\n        {/* Copy tab - appears on hover/focus at top right (hidden when disabled) */}\n        {hasValue && !disabled && (\n          <button\n            type=\"button\"\n            onClick={copyToClipboard}\n            onKeyDown={(e) => e.stopPropagation()}\n            aria-label={copied ? \"Copied\" : \"Copy to clipboard\"}\n            className={cn(\n              \"absolute -top-px right-2 -translate-y-full cursor-pointer rounded-t-md bg-kumo-brand px-2 py-0.5 text-xs text-white opacity-0 transition-opacity group-focus-within/container:opacity-100 group-hover/container:opacity-100 hover:brightness-120 focus-visible:outline focus-visible:outline-offset-1 focus-visible:outline-kumo-ring\",\n            )}\n          >\n            {copied ? \"Copied\" : \"Copy\"}\n          </button>\n        )}\n      </>\n    );\n\n    const input = (\n      <div>\n        {isMaskedWithValue ? (\n          <div\n            ref={containerRef}\n            // Cannot use <button> here because containerContent contains interactive button elements (Copy, Reveal).\n            // Using role=\"button\" with proper keyboard handling instead.\n            // oxlint-disable-next-line prefer-tag-over-role\n            role=\"button\"\n            tabIndex={disabled ? -1 : 0}\n            className={containerClassName}\n            onClick={handleContainerClick}\n            onKeyDown={handleContainerKeyDown}\n            aria-label={`${ariaLabelFallback}, masked.`}\n            aria-describedby={`${maskedInstructionId} ${liveRegionId}`}\n            aria-disabled={disabled}\n          >\n            {containerContent}\n          </div>\n        ) : (\n          <div ref={containerRef} className={containerClassName}>\n            {containerContent}\n          </div>\n        )}\n        {isMaskedWithValue && (\n          <span id={maskedInstructionId} className=\"sr-only\">\n            Click or press Enter to reveal.\n          </span>\n        )}\n        <span id={liveRegionId} className=\"sr-only\" aria-live=\"polite\">\n          {mode === \"masked\" && hasValue && \"Value hidden\"}\n          {copied && \"Copied to clipboard\"}\n        </span>\n      </div>\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);\n\nSensitiveInput.displayName = \"SensitiveInput\";\n"],"names":["KUMO_SENSITIVE_INPUT_VARIANTS","KUMO_INPUT_VARIANTS","KUMO_SENSITIVE_INPUT_DEFAULT_VARIANTS","SensitiveInput","forwardRef","controlledValue","defaultValue","onChange","onValueChange","onCopy","size","variant","disabled","readOnly","id","autoComplete","className","label","labelTooltip","description","error","required","inputProps","ref","ariaLabelFallback","isControlled","internalValue","setInternalValue","useState","value","hasValue","mode","setMode","copied","setCopied","inputRef","useRef","containerRef","liveRegionId","useId","generatedId","inputId","maskedInstructionId","mergedRef","useCallback","node","useEffect","timeoutId","copyToClipboard","textarea","selection","previousRange","prevHasValueRef","handleContainerClick","rect","handleToggleVisibility","handleChange","newValue","handleBlur","handleContainerKeyDown","handleInputKeyDown","isMaskedWithValue","showEyeButton","iconSize","containerClassName","cn","inputVariants","containerContent","jsxs","Fragment","jsx","BaseInput","EyeSlash","Eye","input","Field"],"mappings":"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"}