@cloudflare/kumo 2.2.0 → 2.2.1

package/dist/chunks/{menubar-gk322oew1y1lr851.js.map → menubar-jalggrag4utvdpey.js.map}

@@ -1 +1 @@
-{"version":3,"file":"menubar-gk322oew1y1lr851.js","sources":["../../src/components/menubar/use-menu-navigation.ts","../../src/components/menubar/menubar.tsx"],"sourcesContent":["import React, { useEffect, useRef } from \"react\";\n\ntype UseMenuNavigationProps = {\n  menuRef: React.RefObject<HTMLElement | null>;\n  direction?: \"horizontal\" | \"vertical\"; // Default: horizontal\n};\n\nexport const useMenuNavigation = ({\n  menuRef,\n  direction = \"horizontal\",\n}: UseMenuNavigationProps) => {\n  const activeElementRef = useRef<HTMLElement | null>(null);\n\n  useEffect(() => {\n    if (!menuRef.current) return;\n\n    const focusableElements = Array.from(\n      menuRef.current.querySelectorAll(\n        'a, button, input, textarea, select, details, [tabindex]:not([tabindex=\"-1\"])',\n      ),\n    ) as HTMLElement[];\n\n    if (focusableElements.length === 0) return;\n\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (!activeElementRef.current) return;\n\n      const currentIndex = focusableElements.indexOf(activeElementRef.current);\n      let nextIndex = currentIndex;\n\n      const isHorizontal = direction === \"horizontal\";\n      const forwardKey = isHorizontal ? \"ArrowRight\" : \"ArrowDown\";\n      const backwardKey = isHorizontal ? \"ArrowLeft\" : \"ArrowUp\";\n\n      if (e.key === forwardKey) {\n        e.preventDefault();\n        nextIndex = (currentIndex + 1) % focusableElements.length;\n      } else if (e.key === backwardKey) {\n        e.preventDefault();\n        nextIndex =\n          (currentIndex - 1 + focusableElements.length) %\n          focusableElements.length;\n      } else {\n        return;\n      }\n\n      const nextElement = focusableElements[nextIndex];\n      activeElementRef.current = nextElement;\n      nextElement.focus();\n    };\n\n    const addKeyListener = () =>\n      document.addEventListener(\"keydown\", handleKeyDown);\n    const removeKeyListener = () =>\n      document.removeEventListener(\"keydown\", handleKeyDown);\n\n    const handleFocusIn = () => {\n      activeElementRef.current = document.activeElement as HTMLElement;\n      addKeyListener();\n    };\n\n    const handleFocusOut = () => {\n      activeElementRef.current = null;\n      removeKeyListener();\n    };\n\n    menuRef.current.addEventListener(\"focusin\", handleFocusIn);\n    menuRef.current.addEventListener(\"focusout\", handleFocusOut);\n\n    return () => {\n      menuRef.current?.removeEventListener(\"focusin\", handleFocusIn);\n      menuRef.current?.removeEventListener(\"focusout\", handleFocusOut);\n      removeKeyListener();\n    };\n  }, [menuRef, direction]);\n};\n","import { Tooltip } from \"../tooltip\";\nimport { cn } from \"../../utils/cn\";\nimport { IconContext } from \"@phosphor-icons/react\";\nimport React, { useRef } from \"react\";\nimport { useMenuNavigation } from \"./use-menu-navigation\";\n\n/** MenuBar variant definitions (currently empty, reserved for future additions). */\nexport const KUMO_MENUBAR_VARIANTS = {\n  // MenuBar currently has no variant options but structure is ready for future additions\n} as const;\n\nexport const KUMO_MENUBAR_DEFAULT_VARIANTS = {} as const;\n\n// Derived types from KUMO_MENUBAR_VARIANTS\nexport interface KumoMenuBarVariantsProps {}\n\nexport function menuBarVariants(_props: KumoMenuBarVariantsProps = {}) {\n  return cn(\n    // Base styles\n    \"flex rounded-lg border border-kumo-recessed bg-kumo-recessed pl-px shadow-xs transition-colors\",\n  );\n}\n\n/** Props for an individual menu option within a MenuBar. */\ntype MenuOptionProps = {\n  /** Icon element (typically from `@phosphor-icons/react`) rendered at 18px */\n  icon: React.ReactNode;\n  /** Unique identifier for the option (used when `optionIds` is true) */\n  id?: number | string;\n  /** Currently active value from the parent MenuBar */\n  isActive?: number | boolean | string | undefined;\n  /** Callback when this option is clicked */\n  onClick: () => void;\n  /** Tooltip text shown on hover */\n  tooltip: string;\n};\n\nconst MenuOption = ({\n  icon,\n  id,\n  isActive,\n  onClick,\n  tooltip,\n}: MenuOptionProps) => {\n  const button = (\n    <button\n      aria-label={tooltip}\n      className={cn(\n        \"relative -ml-px flex h-full w-11 cursor-pointer items-center justify-center rounded-md border-none bg-kumo-recessed first:rounded-l-lg last:rounded-r-lg transition-colors focus:z-3 focus:outline-none focus:ring-kumo-focus/50 focus-visible:z-3 focus-visible:ring-2 focus-visible:ring-kumo-brand\",\n        {\n          \"z-2 bg-kumo-base shadow-xs transition-colors\": isActive === id,\n        },\n      )}\n      onClick={onClick}\n    >\n      <IconContext.Provider value={{ size: 18 }} {...({} as any)}>\n        {icon}\n      </IconContext.Provider>\n    </button>\n  );\n\n  return <Tooltip content={tooltip} render={button} />;\n};\n\n/**\n * MenuBar component props.\n *\n * Horizontal icon-button toolbar with keyboard navigation and tooltip labels.\n *\n * @example\n * ```tsx\n * <MenuBar\n *   isActive={activeIndex}\n *   options={[\n *     { icon: <ListIcon />, tooltip: \"List view\", onClick: () => setView(\"list\") },\n *     { icon: <GridFourIcon />, tooltip: \"Grid view\", onClick: () => setView(\"grid\") },\n *   ]}\n * />\n * ```\n */\ntype MenuBarProps = {\n  /** Additional CSS classes merged via `cn()`. */\n  className?: string;\n  /** The currently active option value — matched against option index or `id`. */\n  isActive: number | boolean | string | undefined;\n  /** Array of menu option configurations. */\n  options: MenuOptionProps[];\n  /** When true, each option's `id` field is used for matching instead of its array index. */\n  optionIds?: boolean;\n};\n\n/**\n * MenuBar — horizontal icon-button toolbar with keyboard arrow-key navigation.\n *\n * Each option renders as a `<button>` with a Tooltip. The active option is\n * visually highlighted with an elevated background.\n *\n * @example\n * ```tsx\n * <MenuBar\n *   isActive={0}\n *   options={[\n *     { icon: <ListIcon />, tooltip: \"List\", onClick: () => {} },\n *     { icon: <GridFourIcon />, tooltip: \"Grid\", onClick: () => {} },\n *   ]}\n * />\n * ```\n */\nexport const MenuBar = ({\n  className,\n  isActive,\n  options,\n  optionIds = false, // if option needs an extra unique ID\n}: MenuBarProps) => {\n  const menuRef = useRef<HTMLElement | null>(null);\n\n  useMenuNavigation({ menuRef, direction: \"horizontal\" });\n\n  return (\n    <nav\n      className={cn(\n        \"isolate flex rounded-lg ring ring-kumo-line bg-kumo-recessed pl-px shadow-xs transition-colors\",\n        className,\n      )}\n      ref={menuRef}\n    >\n      {options.map((option, index) => (\n        <MenuOption\n          key={index}\n          {...option}\n          isActive={isActive}\n          id={optionIds ? option.id : index}\n        />\n      ))}\n    </nav>\n  );\n};\n"],"names":["useMenuNavigation","menuRef","direction","activeElementRef","useRef","useEffect","focusableElements","handleKeyDown","e","currentIndex","nextIndex","isHorizontal","forwardKey","backwardKey","nextElement","addKeyListener","removeKeyListener","handleFocusIn","handleFocusOut","MenuOption","icon","id","isActive","onClick","tooltip","button","jsx","cn","IconContext","Tooltip","MenuBar","className","options","optionIds","option","index"],"mappings":"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"}
+{"version":3,"file":"menubar-jalggrag4utvdpey.js","sources":["../../src/components/menubar/use-menu-navigation.ts","../../src/components/menubar/menubar.tsx"],"sourcesContent":["import React, { useEffect, useRef } from \"react\";\n\ntype UseMenuNavigationProps = {\n  menuRef: React.RefObject<HTMLElement | null>;\n  direction?: \"horizontal\" | \"vertical\"; // Default: horizontal\n};\n\nexport const useMenuNavigation = ({\n  menuRef,\n  direction = \"horizontal\",\n}: UseMenuNavigationProps) => {\n  const activeElementRef = useRef<HTMLElement | null>(null);\n\n  useEffect(() => {\n    if (!menuRef.current) return;\n\n    const focusableElements = Array.from(\n      menuRef.current.querySelectorAll(\n        'a, button, input, textarea, select, details, [tabindex]:not([tabindex=\"-1\"])',\n      ),\n    ) as HTMLElement[];\n\n    if (focusableElements.length === 0) return;\n\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (!activeElementRef.current) return;\n\n      const currentIndex = focusableElements.indexOf(activeElementRef.current);\n      let nextIndex = currentIndex;\n\n      const isHorizontal = direction === \"horizontal\";\n      const forwardKey = isHorizontal ? \"ArrowRight\" : \"ArrowDown\";\n      const backwardKey = isHorizontal ? \"ArrowLeft\" : \"ArrowUp\";\n\n      if (e.key === forwardKey) {\n        e.preventDefault();\n        nextIndex = (currentIndex + 1) % focusableElements.length;\n      } else if (e.key === backwardKey) {\n        e.preventDefault();\n        nextIndex =\n          (currentIndex - 1 + focusableElements.length) %\n          focusableElements.length;\n      } else {\n        return;\n      }\n\n      const nextElement = focusableElements[nextIndex];\n      activeElementRef.current = nextElement;\n      nextElement.focus();\n    };\n\n    const addKeyListener = () =>\n      document.addEventListener(\"keydown\", handleKeyDown);\n    const removeKeyListener = () =>\n      document.removeEventListener(\"keydown\", handleKeyDown);\n\n    const handleFocusIn = () => {\n      activeElementRef.current = document.activeElement as HTMLElement;\n      addKeyListener();\n    };\n\n    const handleFocusOut = () => {\n      activeElementRef.current = null;\n      removeKeyListener();\n    };\n\n    menuRef.current.addEventListener(\"focusin\", handleFocusIn);\n    menuRef.current.addEventListener(\"focusout\", handleFocusOut);\n\n    return () => {\n      menuRef.current?.removeEventListener(\"focusin\", handleFocusIn);\n      menuRef.current?.removeEventListener(\"focusout\", handleFocusOut);\n      removeKeyListener();\n    };\n  }, [menuRef, direction]);\n};\n","import { Tooltip } from \"../tooltip\";\nimport { cn } from \"../../utils/cn\";\nimport { IconContext } from \"@phosphor-icons/react\";\nimport React, { useRef } from \"react\";\nimport { useMenuNavigation } from \"./use-menu-navigation\";\n\n/** MenuBar variant definitions (currently empty, reserved for future additions). */\nexport const KUMO_MENUBAR_VARIANTS = {\n  // MenuBar currently has no variant options but structure is ready for future additions\n} as const;\n\nexport const KUMO_MENUBAR_DEFAULT_VARIANTS = {} as const;\n\n// Derived types from KUMO_MENUBAR_VARIANTS\nexport interface KumoMenuBarVariantsProps {}\n\nexport function menuBarVariants(_props: KumoMenuBarVariantsProps = {}) {\n  return cn(\n    // Base styles\n    \"flex rounded-lg border border-kumo-recessed bg-kumo-recessed pl-px shadow-xs transition-colors\",\n  );\n}\n\n/** Props for an individual menu option within a MenuBar. */\ntype MenuOptionProps = {\n  /** Icon element (typically from `@phosphor-icons/react`) rendered at 18px */\n  icon: React.ReactNode;\n  /** Unique identifier for the option (used when `optionIds` is true) */\n  id?: number | string;\n  /** Currently active value from the parent MenuBar */\n  isActive?: number | boolean | string | undefined;\n  /** Callback when this option is clicked */\n  onClick: () => void;\n  /** Tooltip text shown on hover */\n  tooltip: string;\n};\n\nconst MenuOption = ({\n  icon,\n  id,\n  isActive,\n  onClick,\n  tooltip,\n}: MenuOptionProps) => {\n  const button = (\n    <button\n      aria-label={tooltip}\n      className={cn(\n        \"relative -ml-px flex h-full w-11 cursor-pointer items-center justify-center rounded-md border-none bg-kumo-recessed first:rounded-l-lg last:rounded-r-lg transition-colors focus:z-3 focus:outline-none focus:ring-kumo-focus/50 focus-visible:z-3 focus-visible:ring-2 focus-visible:ring-kumo-brand\",\n        {\n          \"z-2 bg-kumo-base shadow-xs transition-colors\": isActive === id,\n        },\n      )}\n      onClick={onClick}\n    >\n      <IconContext.Provider value={{ size: 18 }} {...({} as any)}>\n        {icon}\n      </IconContext.Provider>\n    </button>\n  );\n\n  return <Tooltip content={tooltip} render={button} />;\n};\n\n/**\n * MenuBar component props.\n *\n * Horizontal icon-button toolbar with keyboard navigation and tooltip labels.\n *\n * @example\n * ```tsx\n * <MenuBar\n *   isActive={activeIndex}\n *   options={[\n *     { icon: <ListIcon />, tooltip: \"List view\", onClick: () => setView(\"list\") },\n *     { icon: <GridFourIcon />, tooltip: \"Grid view\", onClick: () => setView(\"grid\") },\n *   ]}\n * />\n * ```\n */\ntype MenuBarProps = {\n  /** Additional CSS classes merged via `cn()`. */\n  className?: string;\n  /** The currently active option value — matched against option index or `id`. */\n  isActive: number | boolean | string | undefined;\n  /** Array of menu option configurations. */\n  options: MenuOptionProps[];\n  /** When true, each option's `id` field is used for matching instead of its array index. */\n  optionIds?: boolean;\n};\n\n/**\n * MenuBar — horizontal icon-button toolbar with keyboard arrow-key navigation.\n *\n * Each option renders as a `<button>` with a Tooltip. The active option is\n * visually highlighted with an elevated background.\n *\n * @example\n * ```tsx\n * <MenuBar\n *   isActive={0}\n *   options={[\n *     { icon: <ListIcon />, tooltip: \"List\", onClick: () => {} },\n *     { icon: <GridFourIcon />, tooltip: \"Grid\", onClick: () => {} },\n *   ]}\n * />\n * ```\n */\nexport const MenuBar = ({\n  className,\n  isActive,\n  options,\n  optionIds = false, // if option needs an extra unique ID\n}: MenuBarProps) => {\n  const menuRef = useRef<HTMLElement | null>(null);\n\n  useMenuNavigation({ menuRef, direction: \"horizontal\" });\n\n  return (\n    <nav\n      className={cn(\n        \"isolate flex rounded-lg ring ring-kumo-line bg-kumo-recessed pl-px shadow-xs transition-colors\",\n        className,\n      )}\n      ref={menuRef}\n    >\n      {options.map((option, index) => (\n        <MenuOption\n          key={index}\n          {...option}\n          isActive={isActive}\n          id={optionIds ? option.id : index}\n        />\n      ))}\n    </nav>\n  );\n};\n"],"names":["useMenuNavigation","menuRef","direction","activeElementRef","useRef","useEffect","focusableElements","handleKeyDown","e","currentIndex","nextIndex","isHorizontal","forwardKey","backwardKey","nextElement","addKeyListener","removeKeyListener","handleFocusIn","handleFocusOut","MenuOption","icon","id","isActive","onClick","tooltip","button","jsx","cn","IconContext","Tooltip","MenuBar","className","options","optionIds","option","index"],"mappings":";;;;;;AAOO,MAAMA,IAAoB,CAAC;AAAA,EAChC,SAAAC;AAAA,EACA,WAAAC,IAAY;AACd,MAA8B;AAC5B,QAAMC,IAAmBC,EAA2B,IAAI;AAExD,EAAAC,EAAU,MAAM;AACd,QAAI,CAACJ,EAAQ,QAAS;AAEtB,UAAMK,IAAoB,MAAM;AAAA,MAC9BL,EAAQ,QAAQ;AAAA,QACd;AAAA,MAAA;AAAA,IACF;AAGF,QAAIK,EAAkB,WAAW,EAAG;AAEpC,UAAMC,IAAgB,CAACC,MAAqB;AAC1C,UAAI,CAACL,EAAiB,QAAS;AAE/B,YAAMM,IAAeH,EAAkB,QAAQH,EAAiB,OAAO;AACvE,UAAIO,IAAYD;AAEhB,YAAME,IAAeT,MAAc,cAC7BU,IAAaD,IAAe,eAAe,aAC3CE,IAAcF,IAAe,cAAc;AAEjD,UAAIH,EAAE,QAAQI;AACZ,QAAAJ,EAAE,eAAA,GACFE,KAAaD,IAAe,KAAKH,EAAkB;AAAA,eAC1CE,EAAE,QAAQK;AACnB,QAAAL,EAAE,eAAA,GACFE,KACGD,IAAe,IAAIH,EAAkB,UACtCA,EAAkB;AAAA;AAEpB;AAGF,YAAMQ,IAAcR,EAAkBI,CAAS;AAC/C,MAAAP,EAAiB,UAAUW,GAC3BA,EAAY,MAAA;AAAA,IACd,GAEMC,IAAiB,MACrB,SAAS,iBAAiB,WAAWR,CAAa,GAC9CS,IAAoB,MACxB,SAAS,oBAAoB,WAAWT,CAAa,GAEjDU,IAAgB,MAAM;AAC1B,MAAAd,EAAiB,UAAU,SAAS,eACpCY,EAAA;AAAA,IACF,GAEMG,IAAiB,MAAM;AAC3B,MAAAf,EAAiB,UAAU,MAC3Ba,EAAA;AAAA,IACF;AAEA,WAAAf,EAAQ,QAAQ,iBAAiB,WAAWgB,CAAa,GACzDhB,EAAQ,QAAQ,iBAAiB,YAAYiB,CAAc,GAEpD,MAAM;AACX,MAAAjB,EAAQ,SAAS,oBAAoB,WAAWgB,CAAa,GAC7DhB,EAAQ,SAAS,oBAAoB,YAAYiB,CAAc,GAC/DF,EAAA;AAAA,IACF;AAAA,EACF,GAAG,CAACf,GAASC,CAAS,CAAC;AACzB,GCtCMiB,IAAa,CAAC;AAAA,EAClB,MAAAC;AAAA,EACA,IAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,SAAAC;AACF,MAAuB;AACrB,QAAMC,IACJ,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,cAAYF;AAAA,MACZ,WAAWG;AAAA,QACT;AAAA,QACA;AAAA,UACE,gDAAgDL,MAAaD;AAAA,QAAA;AAAA,MAC/D;AAAA,MAEF,SAAAE;AAAA,MAEA,UAAA,gBAAAG,EAACE,EAAY,UAAZ,EAAqB,OAAO,EAAE,MAAM,GAAA,GAClC,UAAAR,EAAA,CACH;AAAA,IAAA;AAAA,EAAA;AAIJ,SAAO,gBAAAM,EAACG,GAAA,EAAQ,SAASL,GAAS,QAAQC,GAAQ;AACpD,GA8CaK,IAAU,CAAC;AAAA,EACtB,WAAAC;AAAA,EACA,UAAAT;AAAA,EACA,SAAAU;AAAA,EACA,WAAAC,IAAY;AAAA;AACd,MAAoB;AAClB,QAAMhC,IAAUG,EAA2B,IAAI;AAE/C,SAAAJ,EAAkB,EAAE,SAAAC,GAAS,WAAW,aAAA,CAAc,GAGpD,gBAAAyB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACAI;AAAA,MAAA;AAAA,MAEF,KAAK9B;AAAA,MAEJ,UAAA+B,EAAQ,IAAI,CAACE,GAAQC,MACpB,gBAAAT;AAAA,QAACP;AAAA,QAAA;AAAA,UAEE,GAAGe;AAAA,UACJ,UAAAZ;AAAA,UACA,IAAIW,IAAYC,EAAO,KAAKC;AAAA,QAAA;AAAA,QAHvBA;AAAA,MAAA,CAKR;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/chunks/{pagination-kswioh2znglyq7as.js → pagination-ceetno8sc1rd0wr2.js}

@@ -1,10 +1,10 @@
 "use client";
 import { jsx as a, jsxs as p, Fragment as E } from "react/jsx-runtime";
 import { useState as T, useMemo as N, useEffect as B, createContext as D, useContext as R } from "react";
-import { I as m } from "./input-group-mu8yklweljytpt04.js";
+import { I as m } from "./input-group-gy08vju7eoogil8k.js";
 import { CaretDoubleLeftIcon as F, CaretLeftIcon as V, CaretRightIcon as U, CaretDoubleRightIcon as j } from "@phosphor-icons/react";
 import { c as d } from "./cn-ct4n7r74mh8y0f48.js";
-import { S as P } from "./select-hz8wwd2msvp1u0jp.js";
+import { S as P } from "./select-g1xvti1k1hj7xe5t.js";
 const G = [25, 50, 100, 250], y = (n, l, o) => Math.min(Math.max(n, l), o), K = {
   navigation: "Pagination",
   firstPage: "First page",
@@ -263,4 +263,4 @@ const W = Object.assign(L, {
 export {
   W as P
 };
-//# sourceMappingURL=pagination-kswioh2znglyq7as.js.map
+//# sourceMappingURL=pagination-ceetno8sc1rd0wr2.js.map

package/dist/chunks/{pagination-kswioh2znglyq7as.js.map → pagination-ceetno8sc1rd0wr2.js.map}

@@ -1 +1 @@
-{"version":3,"file":"pagination-kswioh2znglyq7as.js","sources":["../../src/components/pagination/pagination.tsx"],"sourcesContent":["import {\n  createContext,\n  useContext,\n  useEffect,\n  useMemo,\n  useState,\n  type KeyboardEvent,\n  type ReactNode,\n} from \"react\";\nimport { InputGroup } from \"../input-group\";\nimport {\n  CaretDoubleLeftIcon,\n  CaretDoubleRightIcon,\n  CaretLeftIcon,\n  CaretRightIcon,\n} from \"@phosphor-icons/react\";\nimport { cn } from \"../../utils/cn\";\nimport { resolveVariant } from \"../../utils/resolve-variant\";\nimport { Select } from \"../select\";\n\nconst DEFAULT_PAGE_SIZE_OPTIONS = [25, 50, 100, 250] as const;\n\nconst clamp = (value: number, min: number, max: number) =>\n  Math.min(Math.max(value, min), max);\n\n// ============================================================================\n// i18n Labels\n// ============================================================================\n\n/**\n * Labels for internationalization of Pagination component.\n * All labels have English defaults and can be overridden for other locales.\n *\n * Note: To customize the \"Showing X-Y of Z\" text, use the `children` render prop\n * on `Pagination.Info` instead. To customize the \"Per page:\" label, use the\n * `label` prop on `Pagination.PageSize`.\n */\nexport interface PaginationLabels {\n  /** Aria label for the navigation landmark. @default \"Pagination\" */\n  navigation?: string;\n  /** Aria label for the first page button. @default \"First page\" */\n  firstPage?: string;\n  /** Aria label for the previous page button. @default \"Previous page\" */\n  previousPage?: string;\n  /** Aria label for the next page button. @default \"Next page\" */\n  nextPage?: string;\n  /** Aria label for the last page button. @default \"Last page\" */\n  lastPage?: string;\n  /** Aria label for the page number input/select. @default \"Page number\" */\n  pageNumber?: string;\n  /** Aria label for the page size select. @default \"Page size\" */\n  pageSize?: string;\n}\n\nconst DEFAULT_LABELS: Required<PaginationLabels> = {\n  navigation: \"Pagination\",\n  firstPage: \"First page\",\n  previousPage: \"Previous page\",\n  nextPage: \"Next page\",\n  lastPage: \"Last page\",\n  pageNumber: \"Page number\",\n  pageSize: \"Page size\",\n};\n\n/** Pagination controls variant definitions. */\nexport const KUMO_PAGINATION_VARIANTS = {\n  controls: {\n    full: {\n      classes: \"\",\n      description:\n        \"Full pagination controls with first, previous, page input, next, and last buttons\",\n    },\n    simple: {\n      classes: \"\",\n      description:\n        \"Simple pagination controls with only previous and next buttons\",\n    },\n  },\n} as const;\n\nexport type KumoPaginationControls =\n  keyof typeof KUMO_PAGINATION_VARIANTS.controls;\n\nexport const KUMO_PAGINATION_DEFAULT_VARIANTS = {\n  controls: \"full\",\n} as const;\n\nexport interface KumoPaginationVariantsProps {\n  controls?: KumoPaginationControls;\n}\n\nexport function paginationVariants({\n  controls = KUMO_PAGINATION_DEFAULT_VARIANTS.controls,\n}: KumoPaginationVariantsProps = {}) {\n  return cn(\n    \"flex items-center justify-between gap-2\",\n    resolveVariant(KUMO_PAGINATION_VARIANTS.controls, controls, KUMO_PAGINATION_DEFAULT_VARIANTS.controls).classes,\n  );\n}\n\n// ============================================================================\n// Pagination Context\n// ============================================================================\n\ninterface PaginationContextValue {\n  page: number;\n  perPage?: number;\n  totalCount?: number;\n  maxPage: number;\n  pageShowingRange: string;\n  setPage: (page: number) => void;\n  editingPage: number;\n  setEditingPage: (page: number) => void;\n  labels: Required<PaginationLabels>;\n}\n\nconst PaginationContext = createContext<PaginationContextValue | null>(null);\n\nfunction usePaginationContext() {\n  const context = useContext(PaginationContext);\n  if (!context) {\n    throw new Error(\n      \"Pagination compound components must be used within a Pagination component\",\n    );\n  }\n  return context;\n}\n\n// ============================================================================\n// Pagination.Info\n// ============================================================================\n\nexport interface PaginationInfoProps {\n  /** Custom render function for the info text */\n  children?: (props: {\n    page: number;\n    perPage?: number;\n    totalCount?: number;\n    pageShowingRange: string;\n  }) => ReactNode;\n  /** Additional CSS classes */\n  className?: string;\n}\n\nfunction PaginationInfo({ children, className }: PaginationInfoProps) {\n  const { page, perPage, totalCount, pageShowingRange } =\n    usePaginationContext();\n\n  const content = children ? (\n    children({ page, perPage, totalCount, pageShowingRange })\n  ) : totalCount && totalCount > 0 ? (\n    <>\n      Showing <span className=\"tabular-nums\">{pageShowingRange}</span> of{\" \"}\n      <span className=\"tabular-nums\">{totalCount}</span>\n    </>\n  ) : null;\n\n  return (\n    <div\n      data-slot=\"pagination-info\"\n      className={cn(\"text-sm text-kumo-subtle\", className)}\n    >\n      {content}\n    </div>\n  );\n}\n\nPaginationInfo.displayName = \"Pagination.Info\";\n\n// ============================================================================\n// Pagination.PageSize\n// ============================================================================\n\nexport interface PaginationPageSizeProps {\n  /** Current page size value */\n  value: number;\n  /** Callback when page size changes */\n  onChange: (size: number) => void;\n  /** Available page size options */\n  options?: number[];\n  /**\n   * Label text shown before the selector.\n   * @default \"Per page:\"\n   */\n  label?: ReactNode;\n  /** Additional CSS classes */\n  className?: string;\n}\n\nfunction PaginationPageSize({\n  value,\n  onChange,\n  options = DEFAULT_PAGE_SIZE_OPTIONS as unknown as number[],\n  label = \"Per page:\",\n  className,\n}: PaginationPageSizeProps) {\n  const { labels } = usePaginationContext();\n\n  return (\n    <div\n      data-slot=\"pagination-page-size\"\n      className={cn(\"flex items-center gap-2\", className)}\n    >\n      {label && <span className=\"text-sm text-kumo-subtle\">{label}</span>}\n      <Select\n        aria-label={labels.pageSize}\n        value={value}\n        onValueChange={(v) => onChange(v as number)}\n      >\n        {options.map((size) => (\n          <Select.Option key={size} value={size}>\n            {size}\n          </Select.Option>\n        ))}\n      </Select>\n    </div>\n  );\n}\n\nPaginationPageSize.displayName = \"Pagination.PageSize\";\n\n// ============================================================================\n// Pagination.Controls\n// ============================================================================\n\nexport interface PaginationControlsProps extends KumoPaginationVariantsProps {\n  /**\n   * How the page number selector is rendered in \"full\" controls mode.\n   * - `\"input\"` (default): A text input where users type a page number.\n   * - `\"dropdown\"`: A dropdown select with all page numbers as options.\n   *\n   * **Note:** `\"dropdown\"` renders an option for every page, so it is best\n   * suited for small page counts. For large datasets (hundreds of pages or\n   * more) prefer `\"input\"` to avoid rendering performance overhead.\n   */\n  pageSelector?: \"input\" | \"dropdown\";\n  /** Additional CSS classes */\n  className?: string;\n}\n\nfunction PaginationControls({\n  controls = KUMO_PAGINATION_DEFAULT_VARIANTS.controls,\n  pageSelector = \"input\",\n  className,\n}: PaginationControlsProps) {\n  const { page, maxPage, setPage, editingPage, setEditingPage, labels } =\n    usePaginationContext();\n\n  return (\n    <div\n      data-slot=\"pagination-controls\"\n      className={cn(\"grow flex flex-col items-end\", className)}\n    >\n      <nav aria-label={labels.navigation}>\n        <InputGroup>\n          {controls === \"full\" && (\n            <InputGroup.Button\n              variant=\"secondary\"\n              aria-label={labels.firstPage}\n              disabled={page <= 1}\n              onClick={() => {\n                setPage(1);\n                setEditingPage(1);\n              }}\n            >\n              <CaretDoubleLeftIcon size={16} />\n            </InputGroup.Button>\n          )}\n          <InputGroup.Button\n            variant=\"secondary\"\n            aria-label={labels.previousPage}\n            disabled={page <= 1}\n            onClick={() => {\n              const previousPage = Math.max(page - 1, 1);\n              setPage(previousPage);\n              setEditingPage(previousPage);\n            }}\n          >\n            <CaretLeftIcon size={16} />\n          </InputGroup.Button>\n          {controls === \"full\" &&\n            (pageSelector === \"dropdown\" ? (\n              <Select\n                aria-label={labels.pageNumber}\n                className=\"rounded-none ring-kumo-hairline\"\n                value={page}\n                onValueChange={(value) => {\n                  const num = value as number;\n                  setPage(num);\n                  setEditingPage(num);\n                }}\n              >\n                {Array.from({ length: maxPage }, (_, i) => i + 1).map((p) => (\n                  <Select.Option key={p} value={p}>\n                    {p}\n                  </Select.Option>\n                ))}\n              </Select>\n            ) : (\n              <InputGroup.Input\n                style={{ width: 50 }}\n                className=\"text-center\"\n                aria-label={labels.pageNumber}\n                value={editingPage}\n                onValueChange={(value: string) => {\n                  setEditingPage(Number(value));\n                }}\n                onBlur={() => {\n                  const clamped = clamp(editingPage, 1, maxPage);\n                  setPage(clamped);\n                  setEditingPage(clamped);\n                }}\n                onKeyDown={(e: KeyboardEvent) => {\n                  if (e.key === \"Enter\") {\n                    const clamped = clamp(editingPage, 1, maxPage);\n                    setPage(clamped);\n                    setEditingPage(clamped);\n                  }\n                }}\n                // Prevent password managers from auto-filling\n                autoComplete=\"off\"\n                data-1p-ignore\n                data-lpignore=\"true\"\n                data-form-type=\"other\"\n              />\n            ))}\n          <InputGroup.Button\n            variant=\"secondary\"\n            aria-label={labels.nextPage}\n            disabled={page === maxPage}\n            onClick={() => {\n              const nextPage = Math.min(page + 1, maxPage);\n              setPage(nextPage);\n              setEditingPage(nextPage);\n            }}\n          >\n            <CaretRightIcon size={16} />\n          </InputGroup.Button>\n          {controls === \"full\" && (\n            <InputGroup.Button\n              variant=\"secondary\"\n              aria-label={labels.lastPage}\n              disabled={page === maxPage}\n              onClick={() => {\n                setPage(maxPage);\n                setEditingPage(maxPage);\n              }}\n            >\n              <CaretDoubleRightIcon size={16} />\n            </InputGroup.Button>\n          )}\n        </InputGroup>\n      </nav>\n    </div>\n  );\n}\n\nPaginationControls.displayName = \"Pagination.Controls\";\n\n// ============================================================================\n// Pagination.Separator\n// ============================================================================\n\nexport interface PaginationSeparatorProps {\n  /** Additional CSS classes */\n  className?: string;\n}\n\nfunction PaginationSeparator({ className }: PaginationSeparatorProps) {\n  return (\n    <div\n      data-slot=\"pagination-separator\"\n      className={cn(\"mx-2 h-6 border-l border-kumo-hairline\", className)}\n    />\n  );\n}\n\nPaginationSeparator.displayName = \"Pagination.Separator\";\n\n// ============================================================================\n// Pagination Root\n// ============================================================================\n\n/** Base props shared by both compound and legacy Pagination APIs */\ninterface PaginationBaseProps {\n  /** Callback fired when the current page changes. */\n  setPage: (page: number) => void;\n  /**\n   * Current page number (1-indexed).\n   * @default 1\n   */\n  page?: number;\n  /** Number of items displayed per page. */\n  perPage?: number;\n  /** Total number of items across all pages. */\n  totalCount?: number;\n  /** Additional CSS classes for the container */\n  className?: string;\n  /**\n   * Labels for internationalization of aria-labels. All labels have English defaults.\n   *\n   * For visible text like \"Showing X of Y\", use render props on sub-components:\n   * - `Pagination.Info` children for the info text\n   * - `Pagination.PageSize` label prop for the \"Per page:\" text\n   *\n   * @example\n   * ```tsx\n   * <Pagination\n   *   labels={{\n   *     firstPage: \"Première page\",\n   *     previousPage: \"Page précédente\",\n   *     nextPage: \"Page suivante\",\n   *     lastPage: \"Dernière page\",\n   *     pageNumber: \"Numéro de page\",\n   *     pageSize: \"Taille de page\",\n   *   }}\n   *   // ...\n   * />\n   * ```\n   */\n  labels?: PaginationLabels;\n}\n\n/**\n * Props for the compound component API (recommended).\n *\n * @example\n * ```tsx\n * <Pagination page={page} setPage={setPage} perPage={perPage} totalCount={500}>\n *   <Pagination.Info />\n *   <Pagination.PageSize value={perPage} onChange={setPerPage} />\n *   <Pagination.Controls />\n * </Pagination>\n * ```\n */\nexport interface PaginationCompoundProps extends PaginationBaseProps {\n  /**\n   * Compound component children for custom layouts.\n   * Use Pagination.Info, Pagination.PageSize, Pagination.Controls, and Pagination.Separator.\n   */\n  children: ReactNode;\n  controls?: never;\n  text?: never;\n}\n\n/**\n * Props for the legacy API (deprecated, use compound components instead).\n *\n * @deprecated Use the compound component API with children instead:\n * ```tsx\n * <Pagination page={page} setPage={setPage} perPage={perPage} totalCount={500}>\n *   <Pagination.Info />\n *   <Pagination.Controls />\n * </Pagination>\n * ```\n *\n * @example\n * ```tsx\n * // Legacy usage (deprecated)\n * <Pagination page={page} setPage={setPage} perPage={10} totalCount={100} />\n * ```\n */\nexport interface PaginationLegacyProps\n  extends PaginationBaseProps, KumoPaginationVariantsProps {\n  children?: never;\n  /** @deprecated Use Pagination.Info with children prop instead */\n  text?: (props: {\n    page?: number;\n    perPage?: number;\n    totalCount?: number;\n    pageShowingRange: string;\n  }) => ReactNode;\n}\n\n/**\n * Pagination component props.\n *\n * Prefer the compound component API for new code:\n * @example\n * ```tsx\n * <Pagination page={page} setPage={setPage} perPage={perPage} totalCount={500}>\n *   <Pagination.Info />\n *   <Pagination.PageSize value={perPage} onChange={setPerPage} />\n *   <Pagination.Controls />\n * </Pagination>\n * ```\n */\nexport type PaginationProps = PaginationCompoundProps | PaginationLegacyProps;\n\n/**\n * Page navigation controls with page count display.\n *\n * Supports both compound component and legacy patterns. Prefer compound components for new code:\n *\n * @example\n * // Compound component (recommended)\n * ```tsx\n * <Pagination page={page} setPage={setPage} perPage={perPage} totalCount={500}>\n *   <Pagination.Info />\n *   <Pagination.Separator />\n *   <Pagination.PageSize value={perPage} onChange={setPerPage} />\n *   <Pagination.Controls />\n * </Pagination>\n * ```\n *\n * @example\n * // Legacy (deprecated)\n * ```tsx\n * <Pagination page={page} setPage={setPage} perPage={10} totalCount={100} />\n * ```\n */\nfunction PaginationRoot(props: PaginationProps) {\n  const {\n    page = 1,\n    perPage,\n    totalCount,\n    setPage,\n    children,\n    className,\n    labels: labelsProp,\n  } = props;\n\n  // Extract legacy props (only present when children is not provided)\n  const text = \"text\" in props ? props.text : undefined;\n  const controls =\n    \"controls\" in props\n      ? (props.controls ?? KUMO_PAGINATION_DEFAULT_VARIANTS.controls)\n      : KUMO_PAGINATION_DEFAULT_VARIANTS.controls;\n  const [editingPage, setEditingPage] = useState<number>(1);\n\n  // Merge provided labels with defaults\n  const labels = useMemo<Required<PaginationLabels>>(\n    () => ({ ...DEFAULT_LABELS, ...labelsProp }),\n    [labelsProp],\n  );\n\n  useEffect(() => {\n    setEditingPage(page);\n  }, [page]);\n\n  const pageShowingRange = useMemo(() => {\n    let lower = page * (perPage ?? 1) - (perPage ?? 0) + 1;\n    let upper = Math.min(page * (perPage ?? 0), totalCount ?? 0);\n\n    if (Number.isNaN(lower)) lower = 0;\n    if (Number.isNaN(upper)) upper = 0;\n\n    return `${lower}-${upper}`;\n  }, [page, perPage, totalCount]);\n\n  const maxPage = useMemo(() => {\n    return Math.ceil((totalCount ?? 1) / (perPage ?? 1));\n  }, [totalCount, perPage]);\n\n  const contextValue: PaginationContextValue = {\n    page,\n    perPage,\n    totalCount,\n    maxPage,\n    pageShowingRange,\n    setPage,\n    editingPage,\n    setEditingPage,\n    labels,\n  };\n\n  // Compound component mode: render children within context\n  if (children) {\n    return (\n      <PaginationContext.Provider value={contextValue}>\n        <div\n          data-slot=\"pagination\"\n          className={cn(\"flex items-center gap-2 w-full\", className)}\n        >\n          {children}\n        </div>\n      </PaginationContext.Provider>\n    );\n  }\n\n  // Legacy mode: render default layout for backwards compatibility\n  const getPaginationText = () => {\n    if (text) {\n      return text({ page, perPage, totalCount, pageShowingRange });\n    } else if (totalCount && totalCount > 0) {\n      return (\n        <>\n          Showing <span className=\"tabular-nums\">{pageShowingRange}</span> of{\" \"}\n          <span className=\"tabular-nums\">{totalCount}</span>\n        </>\n      );\n    }\n    return null;\n  };\n\n  return (\n    <PaginationContext.Provider value={contextValue}>\n      <div\n        data-slot=\"pagination\"\n        className={cn(\"flex items-center gap-2 w-full\", className)}\n      >\n        <div\n          aria-live=\"polite\"\n          aria-atomic=\"true\"\n          data-slot=\"pagination-info\"\n          className=\"grow text-sm text-kumo-subtle\"\n        >\n          {getPaginationText()}\n        </div>\n        <PaginationControls controls={controls} />\n      </div>\n    </PaginationContext.Provider>\n  );\n}\n\nPaginationRoot.displayName = \"Pagination\";\n\n// ============================================================================\n// Compound Component Export\n// ============================================================================\n\nexport const Pagination = Object.assign(PaginationRoot, {\n  Info: PaginationInfo,\n  PageSize: PaginationPageSize,\n  Controls: PaginationControls,\n  Separator: PaginationSeparator,\n});\n\nexport {\n  PaginationInfo,\n  PaginationPageSize,\n  PaginationControls,\n  PaginationSeparator,\n};\n"],"names":["DEFAULT_PAGE_SIZE_OPTIONS","clamp","value","min","max","DEFAULT_LABELS","KUMO_PAGINATION_DEFAULT_VARIANTS","PaginationContext","createContext","usePaginationContext","context","useContext","PaginationInfo","children","className","page","perPage","totalCount","pageShowingRange","content","jsxs","Fragment","jsx","cn","PaginationPageSize","onChange","options","label","labels","Select","v","size","PaginationControls","controls","pageSelector","maxPage","setPage","editingPage","setEditingPage","InputGroup","CaretDoubleLeftIcon","previousPage","CaretLeftIcon","num","_","i","p","clamped","e","nextPage","CaretRightIcon","CaretDoubleRightIcon","PaginationSeparator","PaginationRoot","props","labelsProp","text","useState","useMemo","useEffect","lower","upper","contextValue","getPaginationText","Pagination"],"mappings":"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"}
+{"version":3,"file":"pagination-ceetno8sc1rd0wr2.js","sources":["../../src/components/pagination/pagination.tsx"],"sourcesContent":["import {\n  createContext,\n  useContext,\n  useEffect,\n  useMemo,\n  useState,\n  type KeyboardEvent,\n  type ReactNode,\n} from \"react\";\nimport { InputGroup } from \"../input-group\";\nimport {\n  CaretDoubleLeftIcon,\n  CaretDoubleRightIcon,\n  CaretLeftIcon,\n  CaretRightIcon,\n} from \"@phosphor-icons/react\";\nimport { cn } from \"../../utils/cn\";\nimport { resolveVariant } from \"../../utils/resolve-variant\";\nimport { Select } from \"../select\";\n\nconst DEFAULT_PAGE_SIZE_OPTIONS = [25, 50, 100, 250] as const;\n\nconst clamp = (value: number, min: number, max: number) =>\n  Math.min(Math.max(value, min), max);\n\n// ============================================================================\n// i18n Labels\n// ============================================================================\n\n/**\n * Labels for internationalization of Pagination component.\n * All labels have English defaults and can be overridden for other locales.\n *\n * Note: To customize the \"Showing X-Y of Z\" text, use the `children` render prop\n * on `Pagination.Info` instead. To customize the \"Per page:\" label, use the\n * `label` prop on `Pagination.PageSize`.\n */\nexport interface PaginationLabels {\n  /** Aria label for the navigation landmark. @default \"Pagination\" */\n  navigation?: string;\n  /** Aria label for the first page button. @default \"First page\" */\n  firstPage?: string;\n  /** Aria label for the previous page button. @default \"Previous page\" */\n  previousPage?: string;\n  /** Aria label for the next page button. @default \"Next page\" */\n  nextPage?: string;\n  /** Aria label for the last page button. @default \"Last page\" */\n  lastPage?: string;\n  /** Aria label for the page number input/select. @default \"Page number\" */\n  pageNumber?: string;\n  /** Aria label for the page size select. @default \"Page size\" */\n  pageSize?: string;\n}\n\nconst DEFAULT_LABELS: Required<PaginationLabels> = {\n  navigation: \"Pagination\",\n  firstPage: \"First page\",\n  previousPage: \"Previous page\",\n  nextPage: \"Next page\",\n  lastPage: \"Last page\",\n  pageNumber: \"Page number\",\n  pageSize: \"Page size\",\n};\n\n/** Pagination controls variant definitions. */\nexport const KUMO_PAGINATION_VARIANTS = {\n  controls: {\n    full: {\n      classes: \"\",\n      description:\n        \"Full pagination controls with first, previous, page input, next, and last buttons\",\n    },\n    simple: {\n      classes: \"\",\n      description:\n        \"Simple pagination controls with only previous and next buttons\",\n    },\n  },\n} as const;\n\nexport type KumoPaginationControls =\n  keyof typeof KUMO_PAGINATION_VARIANTS.controls;\n\nexport const KUMO_PAGINATION_DEFAULT_VARIANTS = {\n  controls: \"full\",\n} as const;\n\nexport interface KumoPaginationVariantsProps {\n  controls?: KumoPaginationControls;\n}\n\nexport function paginationVariants({\n  controls = KUMO_PAGINATION_DEFAULT_VARIANTS.controls,\n}: KumoPaginationVariantsProps = {}) {\n  return cn(\n    \"flex items-center justify-between gap-2\",\n    resolveVariant(KUMO_PAGINATION_VARIANTS.controls, controls, KUMO_PAGINATION_DEFAULT_VARIANTS.controls).classes,\n  );\n}\n\n// ============================================================================\n// Pagination Context\n// ============================================================================\n\ninterface PaginationContextValue {\n  page: number;\n  perPage?: number;\n  totalCount?: number;\n  maxPage: number;\n  pageShowingRange: string;\n  setPage: (page: number) => void;\n  editingPage: number;\n  setEditingPage: (page: number) => void;\n  labels: Required<PaginationLabels>;\n}\n\nconst PaginationContext = createContext<PaginationContextValue | null>(null);\n\nfunction usePaginationContext() {\n  const context = useContext(PaginationContext);\n  if (!context) {\n    throw new Error(\n      \"Pagination compound components must be used within a Pagination component\",\n    );\n  }\n  return context;\n}\n\n// ============================================================================\n// Pagination.Info\n// ============================================================================\n\nexport interface PaginationInfoProps {\n  /** Custom render function for the info text */\n  children?: (props: {\n    page: number;\n    perPage?: number;\n    totalCount?: number;\n    pageShowingRange: string;\n  }) => ReactNode;\n  /** Additional CSS classes */\n  className?: string;\n}\n\nfunction PaginationInfo({ children, className }: PaginationInfoProps) {\n  const { page, perPage, totalCount, pageShowingRange } =\n    usePaginationContext();\n\n  const content = children ? (\n    children({ page, perPage, totalCount, pageShowingRange })\n  ) : totalCount && totalCount > 0 ? (\n    <>\n      Showing <span className=\"tabular-nums\">{pageShowingRange}</span> of{\" \"}\n      <span className=\"tabular-nums\">{totalCount}</span>\n    </>\n  ) : null;\n\n  return (\n    <div\n      data-slot=\"pagination-info\"\n      className={cn(\"text-sm text-kumo-subtle\", className)}\n    >\n      {content}\n    </div>\n  );\n}\n\nPaginationInfo.displayName = \"Pagination.Info\";\n\n// ============================================================================\n// Pagination.PageSize\n// ============================================================================\n\nexport interface PaginationPageSizeProps {\n  /** Current page size value */\n  value: number;\n  /** Callback when page size changes */\n  onChange: (size: number) => void;\n  /** Available page size options */\n  options?: number[];\n  /**\n   * Label text shown before the selector.\n   * @default \"Per page:\"\n   */\n  label?: ReactNode;\n  /** Additional CSS classes */\n  className?: string;\n}\n\nfunction PaginationPageSize({\n  value,\n  onChange,\n  options = DEFAULT_PAGE_SIZE_OPTIONS as unknown as number[],\n  label = \"Per page:\",\n  className,\n}: PaginationPageSizeProps) {\n  const { labels } = usePaginationContext();\n\n  return (\n    <div\n      data-slot=\"pagination-page-size\"\n      className={cn(\"flex items-center gap-2\", className)}\n    >\n      {label && <span className=\"text-sm text-kumo-subtle\">{label}</span>}\n      <Select\n        aria-label={labels.pageSize}\n        value={value}\n        onValueChange={(v) => onChange(v as number)}\n      >\n        {options.map((size) => (\n          <Select.Option key={size} value={size}>\n            {size}\n          </Select.Option>\n        ))}\n      </Select>\n    </div>\n  );\n}\n\nPaginationPageSize.displayName = \"Pagination.PageSize\";\n\n// ============================================================================\n// Pagination.Controls\n// ============================================================================\n\nexport interface PaginationControlsProps extends KumoPaginationVariantsProps {\n  /**\n   * How the page number selector is rendered in \"full\" controls mode.\n   * - `\"input\"` (default): A text input where users type a page number.\n   * - `\"dropdown\"`: A dropdown select with all page numbers as options.\n   *\n   * **Note:** `\"dropdown\"` renders an option for every page, so it is best\n   * suited for small page counts. For large datasets (hundreds of pages or\n   * more) prefer `\"input\"` to avoid rendering performance overhead.\n   */\n  pageSelector?: \"input\" | \"dropdown\";\n  /** Additional CSS classes */\n  className?: string;\n}\n\nfunction PaginationControls({\n  controls = KUMO_PAGINATION_DEFAULT_VARIANTS.controls,\n  pageSelector = \"input\",\n  className,\n}: PaginationControlsProps) {\n  const { page, maxPage, setPage, editingPage, setEditingPage, labels } =\n    usePaginationContext();\n\n  return (\n    <div\n      data-slot=\"pagination-controls\"\n      className={cn(\"grow flex flex-col items-end\", className)}\n    >\n      <nav aria-label={labels.navigation}>\n        <InputGroup>\n          {controls === \"full\" && (\n            <InputGroup.Button\n              variant=\"secondary\"\n              aria-label={labels.firstPage}\n              disabled={page <= 1}\n              onClick={() => {\n                setPage(1);\n                setEditingPage(1);\n              }}\n            >\n              <CaretDoubleLeftIcon size={16} />\n            </InputGroup.Button>\n          )}\n          <InputGroup.Button\n            variant=\"secondary\"\n            aria-label={labels.previousPage}\n            disabled={page <= 1}\n            onClick={() => {\n              const previousPage = Math.max(page - 1, 1);\n              setPage(previousPage);\n              setEditingPage(previousPage);\n            }}\n          >\n            <CaretLeftIcon size={16} />\n          </InputGroup.Button>\n          {controls === \"full\" &&\n            (pageSelector === \"dropdown\" ? (\n              <Select\n                aria-label={labels.pageNumber}\n                className=\"rounded-none ring-kumo-hairline\"\n                value={page}\n                onValueChange={(value) => {\n                  const num = value as number;\n                  setPage(num);\n                  setEditingPage(num);\n                }}\n              >\n                {Array.from({ length: maxPage }, (_, i) => i + 1).map((p) => (\n                  <Select.Option key={p} value={p}>\n                    {p}\n                  </Select.Option>\n                ))}\n              </Select>\n            ) : (\n              <InputGroup.Input\n                style={{ width: 50 }}\n                className=\"text-center\"\n                aria-label={labels.pageNumber}\n                value={editingPage}\n                onValueChange={(value: string) => {\n                  setEditingPage(Number(value));\n                }}\n                onBlur={() => {\n                  const clamped = clamp(editingPage, 1, maxPage);\n                  setPage(clamped);\n                  setEditingPage(clamped);\n                }}\n                onKeyDown={(e: KeyboardEvent) => {\n                  if (e.key === \"Enter\") {\n                    const clamped = clamp(editingPage, 1, maxPage);\n                    setPage(clamped);\n                    setEditingPage(clamped);\n                  }\n                }}\n                // Prevent password managers from auto-filling\n                autoComplete=\"off\"\n                data-1p-ignore\n                data-lpignore=\"true\"\n                data-form-type=\"other\"\n              />\n            ))}\n          <InputGroup.Button\n            variant=\"secondary\"\n            aria-label={labels.nextPage}\n            disabled={page === maxPage}\n            onClick={() => {\n              const nextPage = Math.min(page + 1, maxPage);\n              setPage(nextPage);\n              setEditingPage(nextPage);\n            }}\n          >\n            <CaretRightIcon size={16} />\n          </InputGroup.Button>\n          {controls === \"full\" && (\n            <InputGroup.Button\n              variant=\"secondary\"\n              aria-label={labels.lastPage}\n              disabled={page === maxPage}\n              onClick={() => {\n                setPage(maxPage);\n                setEditingPage(maxPage);\n              }}\n            >\n              <CaretDoubleRightIcon size={16} />\n            </InputGroup.Button>\n          )}\n        </InputGroup>\n      </nav>\n    </div>\n  );\n}\n\nPaginationControls.displayName = \"Pagination.Controls\";\n\n// ============================================================================\n// Pagination.Separator\n// ============================================================================\n\nexport interface PaginationSeparatorProps {\n  /** Additional CSS classes */\n  className?: string;\n}\n\nfunction PaginationSeparator({ className }: PaginationSeparatorProps) {\n  return (\n    <div\n      data-slot=\"pagination-separator\"\n      className={cn(\"mx-2 h-6 border-l border-kumo-hairline\", className)}\n    />\n  );\n}\n\nPaginationSeparator.displayName = \"Pagination.Separator\";\n\n// ============================================================================\n// Pagination Root\n// ============================================================================\n\n/** Base props shared by both compound and legacy Pagination APIs */\ninterface PaginationBaseProps {\n  /** Callback fired when the current page changes. */\n  setPage: (page: number) => void;\n  /**\n   * Current page number (1-indexed).\n   * @default 1\n   */\n  page?: number;\n  /** Number of items displayed per page. */\n  perPage?: number;\n  /** Total number of items across all pages. */\n  totalCount?: number;\n  /** Additional CSS classes for the container */\n  className?: string;\n  /**\n   * Labels for internationalization of aria-labels. All labels have English defaults.\n   *\n   * For visible text like \"Showing X of Y\", use render props on sub-components:\n   * - `Pagination.Info` children for the info text\n   * - `Pagination.PageSize` label prop for the \"Per page:\" text\n   *\n   * @example\n   * ```tsx\n   * <Pagination\n   *   labels={{\n   *     firstPage: \"Première page\",\n   *     previousPage: \"Page précédente\",\n   *     nextPage: \"Page suivante\",\n   *     lastPage: \"Dernière page\",\n   *     pageNumber: \"Numéro de page\",\n   *     pageSize: \"Taille de page\",\n   *   }}\n   *   // ...\n   * />\n   * ```\n   */\n  labels?: PaginationLabels;\n}\n\n/**\n * Props for the compound component API (recommended).\n *\n * @example\n * ```tsx\n * <Pagination page={page} setPage={setPage} perPage={perPage} totalCount={500}>\n *   <Pagination.Info />\n *   <Pagination.PageSize value={perPage} onChange={setPerPage} />\n *   <Pagination.Controls />\n * </Pagination>\n * ```\n */\nexport interface PaginationCompoundProps extends PaginationBaseProps {\n  /**\n   * Compound component children for custom layouts.\n   * Use Pagination.Info, Pagination.PageSize, Pagination.Controls, and Pagination.Separator.\n   */\n  children: ReactNode;\n  controls?: never;\n  text?: never;\n}\n\n/**\n * Props for the legacy API (deprecated, use compound components instead).\n *\n * @deprecated Use the compound component API with children instead:\n * ```tsx\n * <Pagination page={page} setPage={setPage} perPage={perPage} totalCount={500}>\n *   <Pagination.Info />\n *   <Pagination.Controls />\n * </Pagination>\n * ```\n *\n * @example\n * ```tsx\n * // Legacy usage (deprecated)\n * <Pagination page={page} setPage={setPage} perPage={10} totalCount={100} />\n * ```\n */\nexport interface PaginationLegacyProps\n  extends PaginationBaseProps, KumoPaginationVariantsProps {\n  children?: never;\n  /** @deprecated Use Pagination.Info with children prop instead */\n  text?: (props: {\n    page?: number;\n    perPage?: number;\n    totalCount?: number;\n    pageShowingRange: string;\n  }) => ReactNode;\n}\n\n/**\n * Pagination component props.\n *\n * Prefer the compound component API for new code:\n * @example\n * ```tsx\n * <Pagination page={page} setPage={setPage} perPage={perPage} totalCount={500}>\n *   <Pagination.Info />\n *   <Pagination.PageSize value={perPage} onChange={setPerPage} />\n *   <Pagination.Controls />\n * </Pagination>\n * ```\n */\nexport type PaginationProps = PaginationCompoundProps | PaginationLegacyProps;\n\n/**\n * Page navigation controls with page count display.\n *\n * Supports both compound component and legacy patterns. Prefer compound components for new code:\n *\n * @example\n * // Compound component (recommended)\n * ```tsx\n * <Pagination page={page} setPage={setPage} perPage={perPage} totalCount={500}>\n *   <Pagination.Info />\n *   <Pagination.Separator />\n *   <Pagination.PageSize value={perPage} onChange={setPerPage} />\n *   <Pagination.Controls />\n * </Pagination>\n * ```\n *\n * @example\n * // Legacy (deprecated)\n * ```tsx\n * <Pagination page={page} setPage={setPage} perPage={10} totalCount={100} />\n * ```\n */\nfunction PaginationRoot(props: PaginationProps) {\n  const {\n    page = 1,\n    perPage,\n    totalCount,\n    setPage,\n    children,\n    className,\n    labels: labelsProp,\n  } = props;\n\n  // Extract legacy props (only present when children is not provided)\n  const text = \"text\" in props ? props.text : undefined;\n  const controls =\n    \"controls\" in props\n      ? (props.controls ?? KUMO_PAGINATION_DEFAULT_VARIANTS.controls)\n      : KUMO_PAGINATION_DEFAULT_VARIANTS.controls;\n  const [editingPage, setEditingPage] = useState<number>(1);\n\n  // Merge provided labels with defaults\n  const labels = useMemo<Required<PaginationLabels>>(\n    () => ({ ...DEFAULT_LABELS, ...labelsProp }),\n    [labelsProp],\n  );\n\n  useEffect(() => {\n    setEditingPage(page);\n  }, [page]);\n\n  const pageShowingRange = useMemo(() => {\n    let lower = page * (perPage ?? 1) - (perPage ?? 0) + 1;\n    let upper = Math.min(page * (perPage ?? 0), totalCount ?? 0);\n\n    if (Number.isNaN(lower)) lower = 0;\n    if (Number.isNaN(upper)) upper = 0;\n\n    return `${lower}-${upper}`;\n  }, [page, perPage, totalCount]);\n\n  const maxPage = useMemo(() => {\n    return Math.ceil((totalCount ?? 1) / (perPage ?? 1));\n  }, [totalCount, perPage]);\n\n  const contextValue: PaginationContextValue = {\n    page,\n    perPage,\n    totalCount,\n    maxPage,\n    pageShowingRange,\n    setPage,\n    editingPage,\n    setEditingPage,\n    labels,\n  };\n\n  // Compound component mode: render children within context\n  if (children) {\n    return (\n      <PaginationContext.Provider value={contextValue}>\n        <div\n          data-slot=\"pagination\"\n          className={cn(\"flex items-center gap-2 w-full\", className)}\n        >\n          {children}\n        </div>\n      </PaginationContext.Provider>\n    );\n  }\n\n  // Legacy mode: render default layout for backwards compatibility\n  const getPaginationText = () => {\n    if (text) {\n      return text({ page, perPage, totalCount, pageShowingRange });\n    } else if (totalCount && totalCount > 0) {\n      return (\n        <>\n          Showing <span className=\"tabular-nums\">{pageShowingRange}</span> of{\" \"}\n          <span className=\"tabular-nums\">{totalCount}</span>\n        </>\n      );\n    }\n    return null;\n  };\n\n  return (\n    <PaginationContext.Provider value={contextValue}>\n      <div\n        data-slot=\"pagination\"\n        className={cn(\"flex items-center gap-2 w-full\", className)}\n      >\n        <div\n          aria-live=\"polite\"\n          aria-atomic=\"true\"\n          data-slot=\"pagination-info\"\n          className=\"grow text-sm text-kumo-subtle\"\n        >\n          {getPaginationText()}\n        </div>\n        <PaginationControls controls={controls} />\n      </div>\n    </PaginationContext.Provider>\n  );\n}\n\nPaginationRoot.displayName = \"Pagination\";\n\n// ============================================================================\n// Compound Component Export\n// ============================================================================\n\nexport const Pagination = Object.assign(PaginationRoot, {\n  Info: PaginationInfo,\n  PageSize: PaginationPageSize,\n  Controls: PaginationControls,\n  Separator: PaginationSeparator,\n});\n\nexport {\n  PaginationInfo,\n  PaginationPageSize,\n  PaginationControls,\n  PaginationSeparator,\n};\n"],"names":["DEFAULT_PAGE_SIZE_OPTIONS","clamp","value","min","max","DEFAULT_LABELS","KUMO_PAGINATION_DEFAULT_VARIANTS","PaginationContext","createContext","usePaginationContext","context","useContext","PaginationInfo","children","className","page","perPage","totalCount","pageShowingRange","content","jsxs","Fragment","jsx","cn","PaginationPageSize","onChange","options","label","labels","Select","v","size","PaginationControls","controls","pageSelector","maxPage","setPage","editingPage","setEditingPage","InputGroup","CaretDoubleLeftIcon","previousPage","CaretLeftIcon","num","_","i","p","clamped","e","nextPage","CaretRightIcon","CaretDoubleRightIcon","PaginationSeparator","PaginationRoot","props","labelsProp","text","useState","useMemo","useEffect","lower","upper","contextValue","getPaginationText","Pagination"],"mappings":";;;;;;;AAoBA,MAAMA,IAA4B,CAAC,IAAI,IAAI,KAAK,GAAG,GAE7CC,IAAQ,CAACC,GAAeC,GAAaC,MACzC,KAAK,IAAI,KAAK,IAAIF,GAAOC,CAAG,GAAGC,CAAG,GA+B9BC,IAA6C;AAAA,EACjD,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,cAAc;AAAA,EACd,UAAU;AAAA,EACV,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,UAAU;AACZ,GAqBaC,IAAmC;AAAA,EAC9C,UAAU;AACZ,GA+BMC,IAAoBC,EAA6C,IAAI;AAE3E,SAASC,IAAuB;AAC9B,QAAMC,IAAUC,EAAWJ,CAAiB;AAC5C,MAAI,CAACG;AACH,UAAM,IAAI;AAAA,MACR;AAAA,IAAA;AAGJ,SAAOA;AACT;AAkBA,SAASE,EAAe,EAAE,UAAAC,GAAU,WAAAC,KAAkC;AACpE,QAAM,EAAE,MAAAC,GAAM,SAAAC,GAAS,YAAAC,GAAY,kBAAAC,EAAA,IACjCT,EAAA,GAEIU,IAAUN,IACdA,EAAS,EAAE,MAAAE,GAAM,SAAAC,GAAS,YAAAC,GAAY,kBAAAC,EAAA,CAAkB,IACtDD,KAAcA,IAAa,IAC7B,gBAAAG,EAAAC,GAAA,EAAE,UAAA;AAAA,IAAA;AAAA,IACQ,gBAAAC,EAAC,QAAA,EAAK,WAAU,gBAAgB,UAAAJ,GAAiB;AAAA,IAAO;AAAA,IAAI;AAAA,IACpE,gBAAAI,EAAC,QAAA,EAAK,WAAU,gBAAgB,UAAAL,EAAA,CAAW;AAAA,EAAA,EAAA,CAC7C,IACE;AAEJ,SACE,gBAAAK;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAWC,EAAG,4BAA4BT,CAAS;AAAA,MAElD,UAAAK;AAAA,IAAA;AAAA,EAAA;AAGP;AAEAP,EAAe,cAAc;AAsB7B,SAASY,EAAmB;AAAA,EAC1B,OAAAtB;AAAA,EACA,UAAAuB;AAAA,EACA,SAAAC,IAAU1B;AAAA,EACV,OAAA2B,IAAQ;AAAA,EACR,WAAAb;AACF,GAA4B;AAC1B,QAAM,EAAE,QAAAc,EAAA,IAAWnB,EAAA;AAEnB,SACE,gBAAAW;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAWG,EAAG,2BAA2BT,CAAS;AAAA,MAEjD,UAAA;AAAA,QAAAa,KAAS,gBAAAL,EAAC,QAAA,EAAK,WAAU,4BAA4B,UAAAK,GAAM;AAAA,QAC5D,gBAAAL;AAAA,UAACO;AAAA,UAAA;AAAA,YACC,cAAYD,EAAO;AAAA,YACnB,OAAA1B;AAAA,YACA,eAAe,CAAC4B,MAAML,EAASK,CAAW;AAAA,YAEzC,UAAAJ,EAAQ,IAAI,CAACK,MACZ,gBAAAT,EAACO,EAAO,QAAP,EAAyB,OAAOE,GAC9B,UAAAA,EAAA,GADiBA,CAEpB,CACD;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAAA;AAGN;AAEAP,EAAmB,cAAc;AAqBjC,SAASQ,EAAmB;AAAA,EAC1B,UAAAC,IAAW3B,EAAiC;AAAA,EAC5C,cAAA4B,IAAe;AAAA,EACf,WAAApB;AACF,GAA4B;AAC1B,QAAM,EAAE,MAAAC,GAAM,SAAAoB,GAAS,SAAAC,GAAS,aAAAC,GAAa,gBAAAC,GAAgB,QAAAV,EAAA,IAC3DnB,EAAA;AAEF,SACE,gBAAAa;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAWC,EAAG,gCAAgCT,CAAS;AAAA,MAEvD,4BAAC,OAAA,EAAI,cAAYc,EAAO,YACtB,4BAACW,GAAA,EACE,UAAA;AAAA,QAAAN,MAAa,UACZ,gBAAAX;AAAA,UAACiB,EAAW;AAAA,UAAX;AAAA,YACC,SAAQ;AAAA,YACR,cAAYX,EAAO;AAAA,YACnB,UAAUb,KAAQ;AAAA,YAClB,SAAS,MAAM;AACb,cAAAqB,EAAQ,CAAC,GACTE,EAAe,CAAC;AAAA,YAClB;AAAA,YAEA,UAAA,gBAAAhB,EAACkB,GAAA,EAAoB,MAAM,GAAA,CAAI;AAAA,UAAA;AAAA,QAAA;AAAA,QAGnC,gBAAAlB;AAAA,UAACiB,EAAW;AAAA,UAAX;AAAA,YACC,SAAQ;AAAA,YACR,cAAYX,EAAO;AAAA,YACnB,UAAUb,KAAQ;AAAA,YAClB,SAAS,MAAM;AACb,oBAAM0B,IAAe,KAAK,IAAI1B,IAAO,GAAG,CAAC;AACzC,cAAAqB,EAAQK,CAAY,GACpBH,EAAeG,CAAY;AAAA,YAC7B;AAAA,YAEA,UAAA,gBAAAnB,EAACoB,GAAA,EAAc,MAAM,GAAA,CAAI;AAAA,UAAA;AAAA,QAAA;AAAA,QAE1BT,MAAa,WACXC,MAAiB,aAChB,gBAAAZ;AAAA,UAACO;AAAA,UAAA;AAAA,YACC,cAAYD,EAAO;AAAA,YACnB,WAAU;AAAA,YACV,OAAOb;AAAA,YACP,eAAe,CAACb,MAAU;AACxB,oBAAMyC,IAAMzC;AACZ,cAAAkC,EAAQO,CAAG,GACXL,EAAeK,CAAG;AAAA,YACpB;AAAA,YAEC,UAAA,MAAM,KAAK,EAAE,QAAQR,KAAW,CAACS,GAAGC,MAAMA,IAAI,CAAC,EAAE,IAAI,CAACC,MACrD,gBAAAxB,EAACO,EAAO,QAAP,EAAsB,OAAOiB,GAC3B,UAAAA,EAAA,GADiBA,CAEpB,CACD;AAAA,UAAA;AAAA,QAAA,IAGH,gBAAAxB;AAAA,UAACiB,EAAW;AAAA,UAAX;AAAA,YACC,OAAO,EAAE,OAAO,GAAA;AAAA,YAChB,WAAU;AAAA,YACV,cAAYX,EAAO;AAAA,YACnB,OAAOS;AAAA,YACP,eAAe,CAACnC,MAAkB;AAChC,cAAAoC,EAAe,OAAOpC,CAAK,CAAC;AAAA,YAC9B;AAAA,YACA,QAAQ,MAAM;AACZ,oBAAM6C,IAAU9C,EAAMoC,GAAa,GAAGF,CAAO;AAC7C,cAAAC,EAAQW,CAAO,GACfT,EAAeS,CAAO;AAAA,YACxB;AAAA,YACA,WAAW,CAACC,MAAqB;AAC/B,kBAAIA,EAAE,QAAQ,SAAS;AACrB,sBAAMD,IAAU9C,EAAMoC,GAAa,GAAGF,CAAO;AAC7C,gBAAAC,EAAQW,CAAO,GACfT,EAAeS,CAAO;AAAA,cACxB;AAAA,YACF;AAAA,YAEA,cAAa;AAAA,YACb,kBAAc;AAAA,YACd,iBAAc;AAAA,YACd,kBAAe;AAAA,UAAA;AAAA,QAAA;AAAA,QAGrB,gBAAAzB;AAAA,UAACiB,EAAW;AAAA,UAAX;AAAA,YACC,SAAQ;AAAA,YACR,cAAYX,EAAO;AAAA,YACnB,UAAUb,MAASoB;AAAA,YACnB,SAAS,MAAM;AACb,oBAAMc,IAAW,KAAK,IAAIlC,IAAO,GAAGoB,CAAO;AAC3C,cAAAC,EAAQa,CAAQ,GAChBX,EAAeW,CAAQ;AAAA,YACzB;AAAA,YAEA,UAAA,gBAAA3B,EAAC4B,GAAA,EAAe,MAAM,GAAA,CAAI;AAAA,UAAA;AAAA,QAAA;AAAA,QAE3BjB,MAAa,UACZ,gBAAAX;AAAA,UAACiB,EAAW;AAAA,UAAX;AAAA,YACC,SAAQ;AAAA,YACR,cAAYX,EAAO;AAAA,YACnB,UAAUb,MAASoB;AAAA,YACnB,SAAS,MAAM;AACb,cAAAC,EAAQD,CAAO,GACfG,EAAeH,CAAO;AAAA,YACxB;AAAA,YAEA,UAAA,gBAAAb,EAAC6B,GAAA,EAAqB,MAAM,GAAA,CAAI;AAAA,UAAA;AAAA,QAAA;AAAA,MAClC,EAAA,CAEJ,EAAA,CACF;AAAA,IAAA;AAAA,EAAA;AAGN;AAEAnB,EAAmB,cAAc;AAWjC,SAASoB,EAAoB,EAAE,WAAAtC,KAAuC;AACpE,SACE,gBAAAQ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAWC,EAAG,0CAA0CT,CAAS;AAAA,IAAA;AAAA,EAAA;AAGvE;AAEAsC,EAAoB,cAAc;AAsIlC,SAASC,EAAeC,GAAwB;AAC9C,QAAM;AAAA,IACJ,MAAAvC,IAAO;AAAA,IACP,SAAAC;AAAA,IACA,YAAAC;AAAA,IACA,SAAAmB;AAAA,IACA,UAAAvB;AAAA,IACA,WAAAC;AAAA,IACA,QAAQyC;AAAA,EAAA,IACND,GAGEE,IAAO,UAAUF,IAAQA,EAAM,OAAO,QACtCrB,IACJ,cAAcqB,IACTA,EAAM,YAAYhD,EAAiC,WACpDA,EAAiC,UACjC,CAAC+B,GAAaC,CAAc,IAAImB,EAAiB,CAAC,GAGlD7B,IAAS8B;AAAA,IACb,OAAO,EAAE,GAAGrD,GAAgB,GAAGkD;IAC/B,CAACA,CAAU;AAAA,EAAA;AAGb,EAAAI,EAAU,MAAM;AACd,IAAArB,EAAevB,CAAI;AAAA,EACrB,GAAG,CAACA,CAAI,CAAC;AAET,QAAMG,IAAmBwC,EAAQ,MAAM;AACrC,QAAIE,IAAQ7C,KAAQC,KAAW,MAAMA,KAAW,KAAK,GACjD6C,IAAQ,KAAK,IAAI9C,KAAQC,KAAW,IAAIC,KAAc,CAAC;AAE3D,WAAI,OAAO,MAAM2C,CAAK,MAAGA,IAAQ,IAC7B,OAAO,MAAMC,CAAK,MAAGA,IAAQ,IAE1B,GAAGD,CAAK,IAAIC,CAAK;AAAA,EAC1B,GAAG,CAAC9C,GAAMC,GAASC,CAAU,CAAC,GAExBkB,IAAUuB,EAAQ,MACf,KAAK,MAAMzC,KAAc,MAAMD,KAAW,EAAE,GAClD,CAACC,GAAYD,CAAO,CAAC,GAElB8C,IAAuC;AAAA,IAC3C,MAAA/C;AAAA,IACA,SAAAC;AAAA,IACA,YAAAC;AAAA,IACA,SAAAkB;AAAA,IACA,kBAAAjB;AAAA,IACA,SAAAkB;AAAA,IACA,aAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,QAAAV;AAAA,EAAA;AAIF,MAAIf;AACF,WACE,gBAAAS,EAACf,EAAkB,UAAlB,EAA2B,OAAOuD,GACjC,UAAA,gBAAAxC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,aAAU;AAAA,QACV,WAAWC,EAAG,kCAAkCT,CAAS;AAAA,QAExD,UAAAD;AAAA,MAAA;AAAA,IAAA,GAEL;AAKJ,QAAMkD,IAAoB,MACpBP,IACKA,EAAK,EAAE,MAAAzC,GAAM,SAAAC,GAAS,YAAAC,GAAY,kBAAAC,GAAkB,IAClDD,KAAcA,IAAa,IAElC,gBAAAG,EAAAC,GAAA,EAAE,UAAA;AAAA,IAAA;AAAA,IACQ,gBAAAC,EAAC,QAAA,EAAK,WAAU,gBAAgB,UAAAJ,GAAiB;AAAA,IAAO;AAAA,IAAI;AAAA,IACpE,gBAAAI,EAAC,QAAA,EAAK,WAAU,gBAAgB,UAAAL,EAAA,CAAW;AAAA,EAAA,GAC7C,IAGG;AAGT,SACE,gBAAAK,EAACf,EAAkB,UAAlB,EAA2B,OAAOuD,GACjC,UAAA,gBAAA1C;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAWG,EAAG,kCAAkCT,CAAS;AAAA,MAEzD,UAAA;AAAA,QAAA,gBAAAQ;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,aAAU;AAAA,YACV,eAAY;AAAA,YACZ,aAAU;AAAA,YACV,WAAU;AAAA,YAET,UAAAyC,EAAA;AAAA,UAAkB;AAAA,QAAA;AAAA,QAErB,gBAAAzC,EAACU,KAAmB,UAAAC,EAAA,CAAoB;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAE5C;AAEJ;AAEAoB,EAAe,cAAc;AAMtB,MAAMW,IAAa,OAAO,OAAOX,GAAgB;AAAA,EACtD,MAAMzC;AAAA,EACN,UAAUY;AAAA,EACV,UAAUQ;AAAA,EACV,WAAWoB;AACb,CAAC;"}

package/dist/chunks/{select-hz8wwd2msvp1u0jp.js → select-g1xvti1k1hj7xe5t.js}

@@ -3,11 +3,11 @@ import { jsxs as m, jsx as a } from "react/jsx-runtime";
 import { CaretUpDownIcon as B, CheckIcon as W } from "@phosphor-icons/react";
 import { useId as H, forwardRef as p } from "react";
 import { c as n } from "./cn-ct4n7r74mh8y0f48.js";
-import { b as J } from "./button-gflkhovvkmt0ftzz.js";
-import { K as Q } from "./input-cyils8jxj8e0udr7.js";
+import { b as J } from "./button-oevxukl0zmwoq4tb.js";
+import { K as Q } from "./input-i3os21puacqw4r75.js";
 import { S as X } from "./skeleton-line-epxenksfesr2fkcv.js";
-import { L as Y } from "./label-kaz4uxdt1yf3i5x5.js";
-import { F as Z } from "./field-yhlyu6fy0qi1ewtl.js";
+import { L as Y } from "./label-i0bj94d43irz0k1x.js";
+import { F as Z } from "./field-l1oapopp6kjnephi.js";
 import { u as q } from "./portal-provider-hwmkdmkpvct0cb76.js";
 import { a$ as ee, b0 as te, b1 as ae, b2 as se, b3 as oe, b4 as ne, b5 as le, b6 as ie, b7 as re, b8 as ce, b9 as de, ba as ue, bb as me, bc as be, S as fe } from "./vendor-base-ui-nbyiqqi138hcoz52.js";
 Q.size;
@@ -223,4 +223,4 @@ d.Option.displayName = "Select.Option";
 export {
   d as S
 };
-//# sourceMappingURL=select-hz8wwd2msvp1u0jp.js.map
+//# sourceMappingURL=select-g1xvti1k1hj7xe5t.js.map

package/dist/chunks/{select-hz8wwd2msvp1u0jp.js.map → select-g1xvti1k1hj7xe5t.js.map}

@@ -1 +1 @@
-{"version":3,"file":"select-hz8wwd2msvp1u0jp.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 { forwardRef, useId } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { buttonVariants } from \"../button\";\nimport { KUMO_INPUT_VARIANTS, type KumoInputSize } from \"../input/input\";\nimport { SkeletonLine } from \"../loader\";\nimport { Label } from \"../label\";\nimport { Field, type FieldErrorMatch } from \"../field/field\";\nimport {\n  usePortalContainer,\n  type PortalContainer,\n} from \"../../utils/portal-provider\";\n\n/** Select variant definitions. */\nexport const KUMO_SELECT_VARIANTS = {\n  size: KUMO_INPUT_VARIANTS.size,\n} as const;\n\nexport const KUMO_SELECT_DEFAULT_VARIANTS = {\n  size: \"base\",\n} 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: \"bg-kumo-elevated\",\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: \"bg-kumo-elevated\",\n    ring: \"border-kumo-line\",\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 type KumoSelectSize = keyof typeof KUMO_SELECT_VARIANTS.size;\n\nexport interface KumoSelectVariantsProps {\n  /**\n   * Size of the select trigger. Matches Input component sizes.\n   * - `\"xs\"` — Extra small for compact UIs (h-5 / 20px)\n   * - `\"sm\"` — Small for secondary fields (h-6.5 / 26px)\n   * - `\"base\"` — Default size (h-9 / 36px)\n   * - `\"lg\"` — Large for prominent fields (h-10 / 40px)\n   * @default \"base\"\n   */\n  size?: KumoSelectSize;\n}\n\nexport function selectVariants({\n  size = KUMO_SELECT_DEFAULT_VARIANTS.size,\n}: KumoSelectVariantsProps = {}) {\n  return cn(\n    buttonVariants({ size }),\n    \"justify-between font-normal\",\n    \"focus:opacity-100 focus:ring-kumo-focus/50 focus-visible:ring-inset *:in-focus:opacity-100\",\n  );\n}\n\nconst triggerIconStyles: Record<\n  KumoInputSize,\n  { iconSize: number; className: string }\n> = {\n  xs: { iconSize: 12, className: \"text-kumo-subtle\" },\n  sm: { iconSize: 14, className: \"text-kumo-subtle\" },\n  base: { iconSize: 16, className: \"text-kumo-subtle\" },\n  lg: { iconSize: 18, className: \"text-kumo-subtle\" },\n};\n\n/**\n * Shape for items that carry extra metadata (disabled state, tooltip).\n * Plain `ReactNode` values are still supported for backward compatibility.\n */\nexport interface SelectItemDescriptor {\n  /** Display label for the option. */\n  label: ReactNode;\n  /** When `true`, the option cannot be selected. */\n  disabled?: boolean;\n}\n\n/** Value type accepted by the `items` object-map prop. */\nexport type SelectItemValue = ReactNode | SelectItemDescriptor;\n\nfunction isItemDescriptor(\n  value: SelectItemValue,\n): value is SelectItemDescriptor {\n  if (value === null || value === undefined) return false;\n  if (typeof value !== \"object\" || Array.isArray(value)) return false;\n  // React elements have $$typeof — exclude them\n  if (\"$$typeof\" in (value as object)) return false;\n  // Promises are not descriptors\n  if (value instanceof Promise) return false;\n  // Must have a defined label (not just the key existing)\n  const candidate = value as unknown as Record<string, unknown>;\n  return \"label\" in candidate && candidate.label !== undefined;\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, SelectItemValue>\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, entry]) => ({\n    value: key as T,\n    label: isItemDescriptor(entry) ? entry.label : entry,\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, SelectItemValue>\n    | ReadonlyArray<{ label: ReactNode; value: T }>,\n): ReactNode {\n  const normalizedItems = normalizeItems(items);\n\n  // Build a lookup for disabled metadata from object-map items.\n  // Object-map keys are always strings (Record<string, ...>), so the lookup\n  // uses string keys. The array form ({ label, value }[]) does not support\n  // descriptors — consumers should use the children API for that case.\n  const disabledLookup = new Map<string, { disabled?: boolean }>();\n  if (!Array.isArray(items)) {\n    for (const [key, entry] of Object.entries(items)) {\n      if (isItemDescriptor(entry)) {\n        disabledLookup.set(key, { disabled: entry.disabled });\n      }\n    }\n  }\n\n  // Filter out null values and render options\n  return normalizedItems\n    .filter((item) => item.value !== null)\n    .map((item, index) => {\n      const key =\n        typeof item.value === \"string\" ? item.value : `option-${index}`;\n      // When items is an object-map, value is always a string key from\n      // Object.entries. When items is an array, disabledLookup is empty.\n      const meta =\n        typeof item.value === \"string\"\n          ? disabledLookup.get(item.value)\n          : undefined;\n\n      return (\n        <Option key={key} value={item.value} disabled={meta?.disabled}>\n          {item.label}\n        </Option>\n      );\n    });\n}\n\ntype SelectPropsGeneric<T, Multiple extends boolean | undefined = false> = Omit<\n  SelectBase.Root.Props<T, Multiple>,\n  \"items\"\n> &\n  KumoSelectVariantsProps & {\n    multiple?: Multiple;\n    /**\n     * A function that returns a `ReactNode` to format the selected value.\n     * Only called when a value is selected — use `placeholder` for the empty state.\n     * @example\n     * ```tsx\n     * <Select\n     *   placeholder=\"Select a user...\"\n     *   renderValue={(user) => user.name}\n     * />\n     * ```\n     */\n    renderValue?: (value: Multiple extends true ? T[] : T) => ReactNode;\n    className?: string;\n    /**\n     * Data structure of items rendered in the popup.\n     * Accepts a plain object map (`{ key: \"Label\" }`) or an array of `{ label, value }`.\n     *\n     * Object-map values can be a `ReactNode` (backward-compatible) **or** a\n     * `SelectItemDescriptor` for extra metadata:\n     *\n     * ```tsx\n     * items={{\n     *   apple: \"Apple\",\n     *   banana: { label: \"Banana\", disabled: true, disabledReason: \"Out of season\" },\n     * }}\n     * ```\n     */\n    items?:\n      | Record<string, SelectItemValue>\n      | ReadonlyArray<{ label: ReactNode; value: T }>;\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     * Container element for the portal. Use this to render the select inside\n     * a Shadow DOM or custom container. Overrides `KumoPortalProvider` context.\n     * @default document.body (or KumoPortalProvider container if set)\n     */\n    container?: PortalContainer;\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  /** Size of the select trigger. Matches Input component sizes. */\n  size?: KumoSelectSize;\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 * Select.Option component props.\n */\nexport interface SelectOptionProps {\n  /** The option content. */\n  children: ReactNode;\n  /** The value associated with this option. */\n  value: unknown;\n  /** When `true`, the option cannot be selected. */\n  disabled?: boolean;\n  /** Additional CSS classes merged via `cn()`. */\n  className?: string;\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  size = KUMO_SELECT_DEFAULT_VARIANTS.size,\n  labelTooltip,\n  description,\n  error,\n  required,\n  container: containerProp,\n  ...props\n}: SelectPropsGeneric<T, Multiple> & { required?: boolean }) {\n  const labelId = useId();\n  const contextContainer = usePortalContainer();\n  const container = containerProp ?? contextContainer ?? undefined;\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 no explicit children provided\n  const renderedChildren = children\n    ? children\n    : props.items\n      ? renderOptionsFromItems(props.items)\n      : null;\n\n  // Wrap renderValue to handle null values properly:\n  // - When value is null, show placeholder (Base UI ignores placeholder when children fn provided)\n  // - When value is non-null, call user's renderValue\n  const valueChildrenFn = renderValue\n    ? (value: unknown) => {\n        if (value == null) {\n          // If no placeholder provided, return null to show nothing (same as no renderValue)\n          if (placeholder == null) {\n            return null;\n          }\n          return <span className=\"text-kumo-placeholder\">{placeholder}</span>;\n        }\n        // Cast through `any` as a deliberate type boundary: Base UI passes `unknown`,\n        // but our renderValue expects the generic T (or T[] for multiple)\n        return renderValue(value as any);\n      }\n    : undefined;\n\n  // Exclude Kumo-extended `items` from Base UI spread — we pass `normalizedItems` instead\n  const { items: _items, ...baseProps } = props;\n\n  // Use Base UI's Select.Label for accessible naming — avoids the\n  // hover/focus coupling that a native <label> (from Field) would cause.\n  const showOptional = required === false;\n  const selectLabelNode = label ? (\n    <SelectBase.Label className=\"m-0 select-none text-base font-medium text-kumo-default\">\n      <Label\n        showOptional={showOptional}\n        tooltip={hideLabel ? undefined : labelTooltip}\n        asContent\n      >\n        {label}\n      </Label>\n    </SelectBase.Label>\n  ) : null;\n\n  const selectControl = (\n    <SelectBase.Root\n      {...baseProps}\n      items={normalizedItems}\n      disabled={loading || props.disabled}\n    >\n      {selectLabelNode}\n      <SelectBase.Trigger\n        className={cn(\n          selectVariants({ size }),\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 data-[placeholder]:text-kumo-placeholder\"\n          >\n            {valueChildrenFn}\n          </SelectBase.Value>\n        )}\n        <SelectBase.Icon\n          className={cn(\n            \"flex shrink-0 items-center\",\n            triggerIconStyles[size].className,\n          )}\n        >\n          <CaretUpDownIcon\n            size={triggerIconStyles[size].iconSize}\n            className=\"fill-current\"\n          />\n        </SelectBase.Icon>\n      </SelectBase.Trigger>\n      <SelectBase.Portal container={container}>\n        <SelectBase.Positioner>\n          <SelectBase.Popup\n            className={cn(\n              \"flex flex-col\",\n              \"max-h-[var(--available-height)] bg-kumo-base text-kumo-default\",\n              \"rounded-lg shadow-lg ring ring-kumo-line\",\n              \"min-w-[calc(var(--anchor-width)+3px)] py-1.5\",\n            )}\n          >\n            <SelectBase.List\n              className={cn(\n                \"min-h-0 flex-1 overflow-y-auto overscroll-none scroll-pt-2 scroll-pb-2\",\n              )}\n            >\n              {renderedChildren}\n            </SelectBase.List>\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        hideLabel\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  /** When `true`, the option cannot be selected. */\n  disabled?: boolean;\n  /** Additional CSS classes merged via `cn()`. */\n  className?: string;\n};\n\nfunction Option<T>({ children, value, disabled, className }: OptionProps<T>) {\n  return (\n    <SelectBase.Item\n      value={value}\n      disabled={disabled}\n      className={cn(\n        \"group mx-1.5 flex cursor-pointer items-center justify-between gap-2 rounded px-2 py-1.5 text-base outline-none\",\n        \"focus-visible:z-50 focus-visible:ring-2 focus-visible:ring-kumo-brand focus-visible:ring-inset\",\n        \"data-highlighted:bg-kumo-tint\",\n        \"data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50\",\n        className,\n      )}\n    >\n      <SelectBase.ItemText>{children}</SelectBase.ItemText>\n      <SelectBase.ItemIndicator>\n        <CheckIcon />\n      </SelectBase.ItemIndicator>\n    </SelectBase.Item>\n  );\n}\n\n// --- Select.Group ---\n\ntype GroupProps = {\n  children: ReactNode;\n  /** Additional CSS classes merged via `cn()`. */\n  className?: string;\n};\n\n/**\n * Groups related options together with an accessible `role=\"group\"`.\n * Use with `Select.GroupLabel` to provide a visible heading for the group.\n *\n * @example\n * ```tsx\n * <Select.Group>\n *   <Select.GroupLabel>Fruits</Select.GroupLabel>\n *   <Select.Option value=\"apple\">Apple</Select.Option>\n * </Select.Group>\n * ```\n */\nconst Group = forwardRef<HTMLDivElement, GroupProps>(\n  ({ children, className }, ref) => (\n    <SelectBase.Group ref={ref} className={cn(className)}>\n      {children}\n    </SelectBase.Group>\n  ),\n);\nGroup.displayName = \"Select.Group\";\n\n// --- Select.GroupLabel ---\n\ntype GroupLabelProps = {\n  children: ReactNode;\n  /** Additional CSS classes merged via `cn()`. */\n  className?: string;\n};\n\n/**\n * A visible heading for a `Select.Group`.\n * Automatically associated with its parent group for accessibility.\n *\n * @example\n * ```tsx\n * <Select.Group>\n *   <Select.GroupLabel>Available</Select.GroupLabel>\n *   <Select.Option value=\"a\">Option A</Select.Option>\n * </Select.Group>\n * ```\n */\nconst GroupLabel = forwardRef<HTMLDivElement, GroupLabelProps>(\n  ({ children, className }, ref) => (\n    <SelectBase.GroupLabel\n      ref={ref}\n      className={cn(\n        \"px-3.5 py-1.5 text-sm font-semibold text-kumo-subtle\",\n        className,\n      )}\n    >\n      {children}\n    </SelectBase.GroupLabel>\n  ),\n);\nGroupLabel.displayName = \"Select.GroupLabel\";\n\n// --- Select.Separator ---\n\ntype SeparatorProps = {\n  /** Additional CSS classes merged via `cn()`. */\n  className?: string;\n};\n\n/**\n * A visual divider between option groups.\n *\n * @example\n * ```tsx\n * <Select.Option value=\"a\">Option A</Select.Option>\n * <Select.Separator />\n * <Select.Option value=\"b\">Option B</Select.Option>\n * ```\n */\nconst Separator = forwardRef<HTMLDivElement, SeparatorProps>(\n  ({ className }, ref) => (\n    <SelectBase.Separator\n      ref={ref}\n      className={cn(\"-mx-1 my-1 h-px bg-kumo-hairline\", className)}\n    />\n  ),\n);\nSeparator.displayName = \"Select.Separator\";\n\n// --- Assign sub-components ---\n\nSelect.Option = Option;\nSelect.Group = Group;\nSelect.GroupLabel = GroupLabel;\nSelect.Separator = Separator;\n\n(Select.Option as { displayName?: string }).displayName = \"Select.Option\";\n"],"names":["KUMO_INPUT_VARIANTS","KUMO_SELECT_DEFAULT_VARIANTS","selectVariants","size","cn","buttonVariants","triggerIconStyles","isItemDescriptor","value","candidate","normalizeItems","items","key","entry","renderOptionsFromItems","normalizedItems","disabledLookup","item","index","meta","jsx","Option","Select","children","className","renderValue","label","hideLabel","placeholder","loading","labelTooltip","description","error","required","containerProp","props","labelId","useId","contextContainer","usePortalContainer","container","propLookup","ariaLabel","ariaLabelledby","fallbackLabel","useFieldWrapper","triggerLabelledBy","triggerAriaLabel","renderedChildren","valueChildrenFn","_items","baseProps","selectLabelNode","SelectBase.Label","Label","selectControl","jsxs","SelectBase.Root","SelectBase.Trigger","SkeletonLine","SelectBase.Value","SelectBase.Icon","CaretUpDownIcon","SelectBase.Portal","SelectBase.Positioner","SelectBase.Popup","SelectBase.List","Field","normalizedError","disabled","SelectBase.Item","SelectBase.ItemText","SelectBase.ItemIndicator","CheckIcon","Group","forwardRef","ref","SelectBase.Group","GroupLabel","SelectBase.GroupLabel","Separator","SelectBase.Separator"],"mappings":"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"}
+{"version":3,"file":"select-g1xvti1k1hj7xe5t.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 { forwardRef, useId } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { buttonVariants } from \"../button\";\nimport { KUMO_INPUT_VARIANTS, type KumoInputSize } from \"../input/input\";\nimport { SkeletonLine } from \"../loader\";\nimport { Label } from \"../label\";\nimport { Field, type FieldErrorMatch } from \"../field/field\";\nimport {\n  usePortalContainer,\n  type PortalContainer,\n} from \"../../utils/portal-provider\";\n\n/** Select variant definitions. */\nexport const KUMO_SELECT_VARIANTS = {\n  size: KUMO_INPUT_VARIANTS.size,\n} as const;\n\nexport const KUMO_SELECT_DEFAULT_VARIANTS = {\n  size: \"base\",\n} 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: \"bg-kumo-elevated\",\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: \"bg-kumo-elevated\",\n    ring: \"border-kumo-line\",\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 type KumoSelectSize = keyof typeof KUMO_SELECT_VARIANTS.size;\n\nexport interface KumoSelectVariantsProps {\n  /**\n   * Size of the select trigger. Matches Input component sizes.\n   * - `\"xs\"` — Extra small for compact UIs (h-5 / 20px)\n   * - `\"sm\"` — Small for secondary fields (h-6.5 / 26px)\n   * - `\"base\"` — Default size (h-9 / 36px)\n   * - `\"lg\"` — Large for prominent fields (h-10 / 40px)\n   * @default \"base\"\n   */\n  size?: KumoSelectSize;\n}\n\nexport function selectVariants({\n  size = KUMO_SELECT_DEFAULT_VARIANTS.size,\n}: KumoSelectVariantsProps = {}) {\n  return cn(\n    buttonVariants({ size }),\n    \"justify-between font-normal\",\n    \"focus:opacity-100 focus:ring-kumo-focus/50 focus-visible:ring-inset *:in-focus:opacity-100\",\n  );\n}\n\nconst triggerIconStyles: Record<\n  KumoInputSize,\n  { iconSize: number; className: string }\n> = {\n  xs: { iconSize: 12, className: \"text-kumo-subtle\" },\n  sm: { iconSize: 14, className: \"text-kumo-subtle\" },\n  base: { iconSize: 16, className: \"text-kumo-subtle\" },\n  lg: { iconSize: 18, className: \"text-kumo-subtle\" },\n};\n\n/**\n * Shape for items that carry extra metadata (disabled state, tooltip).\n * Plain `ReactNode` values are still supported for backward compatibility.\n */\nexport interface SelectItemDescriptor {\n  /** Display label for the option. */\n  label: ReactNode;\n  /** When `true`, the option cannot be selected. */\n  disabled?: boolean;\n}\n\n/** Value type accepted by the `items` object-map prop. */\nexport type SelectItemValue = ReactNode | SelectItemDescriptor;\n\nfunction isItemDescriptor(\n  value: SelectItemValue,\n): value is SelectItemDescriptor {\n  if (value === null || value === undefined) return false;\n  if (typeof value !== \"object\" || Array.isArray(value)) return false;\n  // React elements have $$typeof — exclude them\n  if (\"$$typeof\" in (value as object)) return false;\n  // Promises are not descriptors\n  if (value instanceof Promise) return false;\n  // Must have a defined label (not just the key existing)\n  const candidate = value as unknown as Record<string, unknown>;\n  return \"label\" in candidate && candidate.label !== undefined;\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, SelectItemValue>\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, entry]) => ({\n    value: key as T,\n    label: isItemDescriptor(entry) ? entry.label : entry,\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, SelectItemValue>\n    | ReadonlyArray<{ label: ReactNode; value: T }>,\n): ReactNode {\n  const normalizedItems = normalizeItems(items);\n\n  // Build a lookup for disabled metadata from object-map items.\n  // Object-map keys are always strings (Record<string, ...>), so the lookup\n  // uses string keys. The array form ({ label, value }[]) does not support\n  // descriptors — consumers should use the children API for that case.\n  const disabledLookup = new Map<string, { disabled?: boolean }>();\n  if (!Array.isArray(items)) {\n    for (const [key, entry] of Object.entries(items)) {\n      if (isItemDescriptor(entry)) {\n        disabledLookup.set(key, { disabled: entry.disabled });\n      }\n    }\n  }\n\n  // Filter out null values and render options\n  return normalizedItems\n    .filter((item) => item.value !== null)\n    .map((item, index) => {\n      const key =\n        typeof item.value === \"string\" ? item.value : `option-${index}`;\n      // When items is an object-map, value is always a string key from\n      // Object.entries. When items is an array, disabledLookup is empty.\n      const meta =\n        typeof item.value === \"string\"\n          ? disabledLookup.get(item.value)\n          : undefined;\n\n      return (\n        <Option key={key} value={item.value} disabled={meta?.disabled}>\n          {item.label}\n        </Option>\n      );\n    });\n}\n\ntype SelectPropsGeneric<T, Multiple extends boolean | undefined = false> = Omit<\n  SelectBase.Root.Props<T, Multiple>,\n  \"items\"\n> &\n  KumoSelectVariantsProps & {\n    multiple?: Multiple;\n    /**\n     * A function that returns a `ReactNode` to format the selected value.\n     * Only called when a value is selected — use `placeholder` for the empty state.\n     * @example\n     * ```tsx\n     * <Select\n     *   placeholder=\"Select a user...\"\n     *   renderValue={(user) => user.name}\n     * />\n     * ```\n     */\n    renderValue?: (value: Multiple extends true ? T[] : T) => ReactNode;\n    className?: string;\n    /**\n     * Data structure of items rendered in the popup.\n     * Accepts a plain object map (`{ key: \"Label\" }`) or an array of `{ label, value }`.\n     *\n     * Object-map values can be a `ReactNode` (backward-compatible) **or** a\n     * `SelectItemDescriptor` for extra metadata:\n     *\n     * ```tsx\n     * items={{\n     *   apple: \"Apple\",\n     *   banana: { label: \"Banana\", disabled: true, disabledReason: \"Out of season\" },\n     * }}\n     * ```\n     */\n    items?:\n      | Record<string, SelectItemValue>\n      | ReadonlyArray<{ label: ReactNode; value: T }>;\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     * Container element for the portal. Use this to render the select inside\n     * a Shadow DOM or custom container. Overrides `KumoPortalProvider` context.\n     * @default document.body (or KumoPortalProvider container if set)\n     */\n    container?: PortalContainer;\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  /** Size of the select trigger. Matches Input component sizes. */\n  size?: KumoSelectSize;\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 * Select.Option component props.\n */\nexport interface SelectOptionProps {\n  /** The option content. */\n  children: ReactNode;\n  /** The value associated with this option. */\n  value: unknown;\n  /** When `true`, the option cannot be selected. */\n  disabled?: boolean;\n  /** Additional CSS classes merged via `cn()`. */\n  className?: string;\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  size = KUMO_SELECT_DEFAULT_VARIANTS.size,\n  labelTooltip,\n  description,\n  error,\n  required,\n  container: containerProp,\n  ...props\n}: SelectPropsGeneric<T, Multiple> & { required?: boolean }) {\n  const labelId = useId();\n  const contextContainer = usePortalContainer();\n  const container = containerProp ?? contextContainer ?? undefined;\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 no explicit children provided\n  const renderedChildren = children\n    ? children\n    : props.items\n      ? renderOptionsFromItems(props.items)\n      : null;\n\n  // Wrap renderValue to handle null values properly:\n  // - When value is null, show placeholder (Base UI ignores placeholder when children fn provided)\n  // - When value is non-null, call user's renderValue\n  const valueChildrenFn = renderValue\n    ? (value: unknown) => {\n        if (value == null) {\n          // If no placeholder provided, return null to show nothing (same as no renderValue)\n          if (placeholder == null) {\n            return null;\n          }\n          return <span className=\"text-kumo-placeholder\">{placeholder}</span>;\n        }\n        // Cast through `any` as a deliberate type boundary: Base UI passes `unknown`,\n        // but our renderValue expects the generic T (or T[] for multiple)\n        return renderValue(value as any);\n      }\n    : undefined;\n\n  // Exclude Kumo-extended `items` from Base UI spread — we pass `normalizedItems` instead\n  const { items: _items, ...baseProps } = props;\n\n  // Use Base UI's Select.Label for accessible naming — avoids the\n  // hover/focus coupling that a native <label> (from Field) would cause.\n  const showOptional = required === false;\n  const selectLabelNode = label ? (\n    <SelectBase.Label className=\"m-0 select-none text-base font-medium text-kumo-default\">\n      <Label\n        showOptional={showOptional}\n        tooltip={hideLabel ? undefined : labelTooltip}\n        asContent\n      >\n        {label}\n      </Label>\n    </SelectBase.Label>\n  ) : null;\n\n  const selectControl = (\n    <SelectBase.Root\n      {...baseProps}\n      items={normalizedItems}\n      disabled={loading || props.disabled}\n    >\n      {selectLabelNode}\n      <SelectBase.Trigger\n        className={cn(\n          selectVariants({ size }),\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 data-[placeholder]:text-kumo-placeholder\"\n          >\n            {valueChildrenFn}\n          </SelectBase.Value>\n        )}\n        <SelectBase.Icon\n          className={cn(\n            \"flex shrink-0 items-center\",\n            triggerIconStyles[size].className,\n          )}\n        >\n          <CaretUpDownIcon\n            size={triggerIconStyles[size].iconSize}\n            className=\"fill-current\"\n          />\n        </SelectBase.Icon>\n      </SelectBase.Trigger>\n      <SelectBase.Portal container={container}>\n        <SelectBase.Positioner>\n          <SelectBase.Popup\n            className={cn(\n              \"flex flex-col\",\n              \"max-h-[var(--available-height)] bg-kumo-base text-kumo-default\",\n              \"rounded-lg shadow-lg ring ring-kumo-line\",\n              \"min-w-[calc(var(--anchor-width)+3px)] py-1.5\",\n            )}\n          >\n            <SelectBase.List\n              className={cn(\n                \"min-h-0 flex-1 overflow-y-auto overscroll-none scroll-pt-2 scroll-pb-2\",\n              )}\n            >\n              {renderedChildren}\n            </SelectBase.List>\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        hideLabel\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  /** When `true`, the option cannot be selected. */\n  disabled?: boolean;\n  /** Additional CSS classes merged via `cn()`. */\n  className?: string;\n};\n\nfunction Option<T>({ children, value, disabled, className }: OptionProps<T>) {\n  return (\n    <SelectBase.Item\n      value={value}\n      disabled={disabled}\n      className={cn(\n        \"group mx-1.5 flex cursor-pointer items-center justify-between gap-2 rounded px-2 py-1.5 text-base outline-none\",\n        \"focus-visible:z-50 focus-visible:ring-2 focus-visible:ring-kumo-brand focus-visible:ring-inset\",\n        \"data-highlighted:bg-kumo-tint\",\n        \"data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50\",\n        className,\n      )}\n    >\n      <SelectBase.ItemText>{children}</SelectBase.ItemText>\n      <SelectBase.ItemIndicator>\n        <CheckIcon />\n      </SelectBase.ItemIndicator>\n    </SelectBase.Item>\n  );\n}\n\n// --- Select.Group ---\n\ntype GroupProps = {\n  children: ReactNode;\n  /** Additional CSS classes merged via `cn()`. */\n  className?: string;\n};\n\n/**\n * Groups related options together with an accessible `role=\"group\"`.\n * Use with `Select.GroupLabel` to provide a visible heading for the group.\n *\n * @example\n * ```tsx\n * <Select.Group>\n *   <Select.GroupLabel>Fruits</Select.GroupLabel>\n *   <Select.Option value=\"apple\">Apple</Select.Option>\n * </Select.Group>\n * ```\n */\nconst Group = forwardRef<HTMLDivElement, GroupProps>(\n  ({ children, className }, ref) => (\n    <SelectBase.Group ref={ref} className={cn(className)}>\n      {children}\n    </SelectBase.Group>\n  ),\n);\nGroup.displayName = \"Select.Group\";\n\n// --- Select.GroupLabel ---\n\ntype GroupLabelProps = {\n  children: ReactNode;\n  /** Additional CSS classes merged via `cn()`. */\n  className?: string;\n};\n\n/**\n * A visible heading for a `Select.Group`.\n * Automatically associated with its parent group for accessibility.\n *\n * @example\n * ```tsx\n * <Select.Group>\n *   <Select.GroupLabel>Available</Select.GroupLabel>\n *   <Select.Option value=\"a\">Option A</Select.Option>\n * </Select.Group>\n * ```\n */\nconst GroupLabel = forwardRef<HTMLDivElement, GroupLabelProps>(\n  ({ children, className }, ref) => (\n    <SelectBase.GroupLabel\n      ref={ref}\n      className={cn(\n        \"px-3.5 py-1.5 text-sm font-semibold text-kumo-subtle\",\n        className,\n      )}\n    >\n      {children}\n    </SelectBase.GroupLabel>\n  ),\n);\nGroupLabel.displayName = \"Select.GroupLabel\";\n\n// --- Select.Separator ---\n\ntype SeparatorProps = {\n  /** Additional CSS classes merged via `cn()`. */\n  className?: string;\n};\n\n/**\n * A visual divider between option groups.\n *\n * @example\n * ```tsx\n * <Select.Option value=\"a\">Option A</Select.Option>\n * <Select.Separator />\n * <Select.Option value=\"b\">Option B</Select.Option>\n * ```\n */\nconst Separator = forwardRef<HTMLDivElement, SeparatorProps>(\n  ({ className }, ref) => (\n    <SelectBase.Separator\n      ref={ref}\n      className={cn(\"-mx-1 my-1 h-px bg-kumo-hairline\", className)}\n    />\n  ),\n);\nSeparator.displayName = \"Select.Separator\";\n\n// --- Assign sub-components ---\n\nSelect.Option = Option;\nSelect.Group = Group;\nSelect.GroupLabel = GroupLabel;\nSelect.Separator = Separator;\n\n(Select.Option as { displayName?: string }).displayName = \"Select.Option\";\n"],"names":["KUMO_INPUT_VARIANTS","KUMO_SELECT_DEFAULT_VARIANTS","selectVariants","size","cn","buttonVariants","triggerIconStyles","isItemDescriptor","value","candidate","normalizeItems","items","key","entry","renderOptionsFromItems","normalizedItems","disabledLookup","item","index","meta","jsx","Option","Select","children","className","renderValue","label","hideLabel","placeholder","loading","labelTooltip","description","error","required","containerProp","props","labelId","useId","contextContainer","usePortalContainer","container","propLookup","ariaLabel","ariaLabelledby","fallbackLabel","useFieldWrapper","triggerLabelledBy","triggerAriaLabel","renderedChildren","valueChildrenFn","_items","baseProps","selectLabelNode","SelectBase.Label","Label","selectControl","jsxs","SelectBase.Root","SelectBase.Trigger","SkeletonLine","SelectBase.Value","SelectBase.Icon","CaretUpDownIcon","SelectBase.Portal","SelectBase.Positioner","SelectBase.Popup","SelectBase.List","Field","normalizedError","disabled","SelectBase.Item","SelectBase.ItemText","SelectBase.ItemIndicator","CheckIcon","Group","forwardRef","ref","SelectBase.Group","GroupLabel","SelectBase.GroupLabel","Separator","SelectBase.Separator"],"mappings":"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"}

package/dist/chunks/{sensitive-input-mdtjukbb3wimz1iy.js → sensitive-input-hokm527ollnz9dqc.js}

@@ -3,8 +3,8 @@ import { jsxs as y, Fragment as ce, jsx as a } from "react/jsx-runtime";
 import { EyeSlash as ue, Eye as pe } from "@phosphor-icons/react";
 import { forwardRef as de, useState as C, useRef as N, useId as T, useCallback as c, useEffect as fe } from "react";
 import { c as p } from "./cn-ct4n7r74mh8y0f48.js";
-import { K as me, i as he } from "./input-cyils8jxj8e0udr7.js";
-import { F as ge } from "./field-yhlyu6fy0qi1ewtl.js";
+import { K as me, i as he } from "./input-i3os21puacqw4r75.js";
+import { F as ge } from "./field-l1oapopp6kjnephi.js";
 import { I as ve } from "./vendor-base-ui-nbyiqqi138hcoz52.js";
 const Te = me, M = {
   size: "base",
@@ -261,4 +261,4 @@ export {
   be as S,
   M as a
 };
-//# sourceMappingURL=sensitive-input-mdtjukbb3wimz1iy.js.map
+//# sourceMappingURL=sensitive-input-hokm527ollnz9dqc.js.map

package/dist/chunks/{sensitive-input-mdtjukbb3wimz1iy.js.map → sensitive-input-hokm527ollnz9dqc.js.map}

@@ -1 +1 @@
-{"version":3,"file":"sensitive-input-mdtjukbb3wimz1iy.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        // When typing into an empty field, switch to revealed mode\n        // so the input shows as type=\"text\" instead of type=\"password\"\n        if (mode === \"empty\" && newValue.length > 0) {\n          setMode(\"revealed\");\n        }\n        onChange?.(e);\n        onValueChange?.(newValue);\n      },\n      [isControlled, onChange, onValueChange, mode],\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      // Show browser-native focus outline on container when child input is focused\n      \"focus-within:outline focus-within:outline-2 focus-within:outline-kumo-focus\",\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 outline-none 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:ring-kumo-focus/50 focus-visible:ring-2 focus-visible:ring-kumo-brand focus-visible:rounded-sm\",\n            // Defensive styles to prevent global CSS pollution (e.g., button { background: gray })\n            \"bg-transparent border-none shadow-none p-0 m-0 h-auto min-h-0 inline-flex items-center justify-center\",\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:outline-none focus:ring-kumo-focus/50 focus-visible:ring-2 focus-visible:ring-kumo-brand\",\n              // Defensive styles to prevent global CSS pollution\n              \"border-none shadow-none m-0 h-auto min-h-0\",\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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"}
+{"version":3,"file":"sensitive-input-hokm527ollnz9dqc.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        // When typing into an empty field, switch to revealed mode\n        // so the input shows as type=\"text\" instead of type=\"password\"\n        if (mode === \"empty\" && newValue.length > 0) {\n          setMode(\"revealed\");\n        }\n        onChange?.(e);\n        onValueChange?.(newValue);\n      },\n      [isControlled, onChange, onValueChange, mode],\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      // Show browser-native focus outline on container when child input is focused\n      \"focus-within:outline focus-within:outline-2 focus-within:outline-kumo-focus\",\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 outline-none 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:ring-kumo-focus/50 focus-visible:ring-2 focus-visible:ring-kumo-brand focus-visible:rounded-sm\",\n            // Defensive styles to prevent global CSS pollution (e.g., button { background: gray })\n            \"bg-transparent border-none shadow-none p-0 m-0 h-auto min-h-0 inline-flex items-center justify-center\",\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:outline-none focus:ring-kumo-focus/50 focus-visible:ring-2 focus-visible:ring-kumo-brand\",\n              // Defensive styles to prevent global CSS pollution\n              \"border-none shadow-none m-0 h-auto min-h-0\",\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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"}

package/dist/chunks/{sidebar-dlh79t5uliezwniq.js → sidebar-oan40ylmqkyui21w.js}

@@ -4,7 +4,7 @@ import ye, { forwardRef as u, useState as y, useCallback as D, useMemo as W, cre
 import { CaretRightIcon as F, MagnifyingGlassIcon as Ce, SidebarSimpleIcon as Me } from "@phosphor-icons/react";
 import { c as r } from "./cn-ct4n7r74mh8y0f48.js";
 import { u as X } from "./link-provider-mn2voeohon7cj9o4.js";
-import { a as Ie, T as Re } from "./tooltip-caka3fmn1ogdc7q8.js";
+import { a as Ie, T as Re } from "./tooltip-icvb67awe1zolz61.js";
 import { aO as U, aQ as V, aq as Te, av as ze, aw as _e, ax as Be, aP as De } from "./vendor-base-ui-nbyiqqi138hcoz52.js";
 const $e = {
   variant: {
@@ -872,4 +872,4 @@ export {
   xe as y,
   T as z
 };
-//# sourceMappingURL=sidebar-dlh79t5uliezwniq.js.map
+//# sourceMappingURL=sidebar-oan40ylmqkyui21w.js.map