@cloudflare/kumo 1.16.0 → 1.17.0

package/dist/chunks/menubar-abojnm0uwjuni8ok.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menubar-abojnm0uwjuni8ok.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  return (\n    <Tooltip content={tooltip} asChild>\n      <button\n        className={cn(\n          \"focus:inset-ring-focus 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-1 focus:outline-none focus-visible:z-1 focus-visible:inset-ring-[0.5]\",\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    </Tooltip>\n  );\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 border border-kumo-fill 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","jsx","Tooltip","cn","IconContext","MenuBar","className","options","optionIds","option","index"],"mappings":"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"}

package/dist/chunks/{meter-cqkrg5axjenbsuue.js → meter-i84dte2f82qmvn7y.js}

@@ -1,7 +1,7 @@
 "use client";
 import { jsxs as r, jsx as e, Fragment as d } from "react/jsx-runtime";
 import { c as t } from "./cn-ct4n7r74mh8y0f48.js";
-import { aQ as c, aR as f, aS as x, aT as b, aU as h } from "./vendor-base-ui-ccr5l0ynrievzzv3.js";
+import { aQ as c, aR as f, aS as x, aT as b, aU as h } from "./vendor-base-ui-n30qblevnpk9cc5c.js";
 function N({
   value: l,
   customValue: a,
@@ -48,4 +48,4 @@ function N({
 export {
   N as M
 };
-//# sourceMappingURL=meter-cqkrg5axjenbsuue.js.map
+//# sourceMappingURL=meter-i84dte2f82qmvn7y.js.map

package/dist/chunks/{meter-cqkrg5axjenbsuue.js.map → meter-i84dte2f82qmvn7y.js.map}

@@ -1 +1 @@
-{"version":3,"file":"meter-cqkrg5axjenbsuue.js","sources":["../../src/components/meter/meter.tsx"],"sourcesContent":["import { Meter as BaseMeter } from \"@base-ui/react/meter\";\nimport { type ComponentPropsWithoutRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Meter variant definitions (currently empty, reserved for future additions). */\nexport const KUMO_METER_VARIANTS = {\n  // Meter currently has no variant options but structure is ready for future additions\n} as const;\n\nexport const KUMO_METER_DEFAULT_VARIANTS = {} as const;\n\n// Derived types from KUMO_METER_VARIANTS\nexport interface KumoMeterVariantsProps {}\n\nexport function meterVariants(_props: KumoMeterVariantsProps = {}) {\n  return cn(\n    // Base styles\n    \"flex w-full flex-col gap-2\",\n  );\n}\n\ntype RootProps = ComponentPropsWithoutRef<typeof BaseMeter.Root>;\n\n/**\n * Meter component props.\n *\n * @example\n * ```tsx\n * <Meter label=\"Storage used\" value={65} />\n * <Meter label=\"API requests\" value={75} customValue=\"750 / 1,000\" />\n * ```\n */\nexport interface MeterProps extends RootProps, KumoMeterVariantsProps {\n  /** Custom formatted value text (e.g. \"750 / 1,000\") displayed instead of percentage. */\n  customValue?: string;\n  /** Label text displayed above the meter track. */\n  label: string;\n  /**\n   * Whether to display the percentage value next to the label.\n   * @default true\n   */\n  showValue?: boolean;\n  /** Additional CSS classes for the track (background bar). */\n  trackClassName?: string;\n  /** Additional CSS classes for the indicator (filled bar). */\n  indicatorClassName?: string;\n}\n\n/**\n * Progress bar showing a measured value within a known range (e.g. quota usage).\n *\n * @example\n * ```tsx\n * <Meter label=\"Storage\" value={65} />\n * ```\n */\nexport function Meter({\n  value,\n  customValue,\n  label,\n  showValue = true,\n  className,\n  trackClassName,\n  indicatorClassName,\n  ...props\n}: MeterProps) {\n  return (\n    <BaseMeter.Root\n      value={value}\n      {...props}\n      className={cn(\"flex w-full flex-col gap-2\", className)}\n    >\n      <div className=\"flex items-center justify-between gap-4\">\n        <BaseMeter.Label className=\"text-xs text-kumo-strong\">\n          {label}\n        </BaseMeter.Label>\n        {customValue ? (\n          <span className=\"text-sm font-medium text-kumo-default tabular-nums\">\n            {customValue}\n          </span>\n        ) : (\n          <>\n            {showValue && (\n              <BaseMeter.Value className=\"text-sm font-medium text-kumo-default tabular-nums\" />\n            )}\n          </>\n        )}\n      </div>\n      <BaseMeter.Track\n        className={cn(\n          \"relative h-2 w-full overflow-hidden rounded-full bg-kumo-fill\",\n          trackClassName,\n        )}\n      >\n        <BaseMeter.Indicator\n          className={cn(\n            \"absolute inset-y-0 left-0 rounded-full bg-linear-to-r from-kumo-brand via-kumo-brand to-kumo-brand transition-[width] duration-300 ease-out\",\n            indicatorClassName,\n          )}\n        />\n      </BaseMeter.Track>\n    </BaseMeter.Root>\n  );\n}\n"],"names":["Meter","value","customValue","label","showValue","className","trackClassName","indicatorClassName","props","jsxs","BaseMeter.Root","cn","jsx","BaseMeter.Label","Fragment","BaseMeter.Value","BaseMeter.Track","BaseMeter.Indicator"],"mappings":";;;;AAwDO,SAASA,EAAM;AAAA,EACpB,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,WAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,GAAGC;AACL,GAAe;AACb,SACE,gBAAAC;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,OAAAT;AAAA,MACC,GAAGO;AAAA,MACJ,WAAWG,EAAG,8BAA8BN,CAAS;AAAA,MAErD,UAAA;AAAA,QAAA,gBAAAI,EAAC,OAAA,EAAI,WAAU,2CACb,UAAA;AAAA,UAAA,gBAAAG,EAACC,GAAA,EAAgB,WAAU,4BACxB,UAAAV,GACH;AAAA,UACCD,IACC,gBAAAU,EAAC,QAAA,EAAK,WAAU,sDACb,UAAAV,EAAA,CACH,IAEA,gBAAAU,EAAAE,GAAA,EACG,UAAAV,uBACEW,GAAA,EAAgB,WAAU,sDAAqD,EAAA,CAEpF;AAAA,QAAA,GAEJ;AAAA,QACA,gBAAAH;AAAA,UAACI;AAAAA,UAAA;AAAA,YACC,WAAWL;AAAA,cACT;AAAA,cACAL;AAAA,YAAA;AAAA,YAGF,UAAA,gBAAAM;AAAA,cAACK;AAAAA,cAAA;AAAA,gBACC,WAAWN;AAAA,kBACT;AAAA,kBACAJ;AAAA,gBAAA;AAAA,cACF;AAAA,YAAA;AAAA,UACF;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"meter-i84dte2f82qmvn7y.js","sources":["../../src/components/meter/meter.tsx"],"sourcesContent":["import { Meter as BaseMeter } from \"@base-ui/react/meter\";\nimport { type ComponentPropsWithoutRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Meter variant definitions (currently empty, reserved for future additions). */\nexport const KUMO_METER_VARIANTS = {\n  // Meter currently has no variant options but structure is ready for future additions\n} as const;\n\nexport const KUMO_METER_DEFAULT_VARIANTS = {} as const;\n\n// Derived types from KUMO_METER_VARIANTS\nexport interface KumoMeterVariantsProps {}\n\nexport function meterVariants(_props: KumoMeterVariantsProps = {}) {\n  return cn(\n    // Base styles\n    \"flex w-full flex-col gap-2\",\n  );\n}\n\ntype RootProps = ComponentPropsWithoutRef<typeof BaseMeter.Root>;\n\n/**\n * Meter component props.\n *\n * @example\n * ```tsx\n * <Meter label=\"Storage used\" value={65} />\n * <Meter label=\"API requests\" value={75} customValue=\"750 / 1,000\" />\n * ```\n */\nexport interface MeterProps extends RootProps, KumoMeterVariantsProps {\n  /** Custom formatted value text (e.g. \"750 / 1,000\") displayed instead of percentage. */\n  customValue?: string;\n  /** Label text displayed above the meter track. */\n  label: string;\n  /**\n   * Whether to display the percentage value next to the label.\n   * @default true\n   */\n  showValue?: boolean;\n  /** Additional CSS classes for the track (background bar). */\n  trackClassName?: string;\n  /** Additional CSS classes for the indicator (filled bar). */\n  indicatorClassName?: string;\n}\n\n/**\n * Progress bar showing a measured value within a known range (e.g. quota usage).\n *\n * @example\n * ```tsx\n * <Meter label=\"Storage\" value={65} />\n * ```\n */\nexport function Meter({\n  value,\n  customValue,\n  label,\n  showValue = true,\n  className,\n  trackClassName,\n  indicatorClassName,\n  ...props\n}: MeterProps) {\n  return (\n    <BaseMeter.Root\n      value={value}\n      {...props}\n      className={cn(\"flex w-full flex-col gap-2\", className)}\n    >\n      <div className=\"flex items-center justify-between gap-4\">\n        <BaseMeter.Label className=\"text-xs text-kumo-strong\">\n          {label}\n        </BaseMeter.Label>\n        {customValue ? (\n          <span className=\"text-sm font-medium text-kumo-default tabular-nums\">\n            {customValue}\n          </span>\n        ) : (\n          <>\n            {showValue && (\n              <BaseMeter.Value className=\"text-sm font-medium text-kumo-default tabular-nums\" />\n            )}\n          </>\n        )}\n      </div>\n      <BaseMeter.Track\n        className={cn(\n          \"relative h-2 w-full overflow-hidden rounded-full bg-kumo-fill\",\n          trackClassName,\n        )}\n      >\n        <BaseMeter.Indicator\n          className={cn(\n            \"absolute inset-y-0 left-0 rounded-full bg-linear-to-r from-kumo-brand via-kumo-brand to-kumo-brand transition-[width] duration-300 ease-out\",\n            indicatorClassName,\n          )}\n        />\n      </BaseMeter.Track>\n    </BaseMeter.Root>\n  );\n}\n"],"names":["Meter","value","customValue","label","showValue","className","trackClassName","indicatorClassName","props","jsxs","BaseMeter.Root","cn","jsx","BaseMeter.Label","Fragment","BaseMeter.Value","BaseMeter.Track","BaseMeter.Indicator"],"mappings":";;;;AAwDO,SAASA,EAAM;AAAA,EACpB,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,WAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,GAAGC;AACL,GAAe;AACb,SACE,gBAAAC;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,OAAAT;AAAA,MACC,GAAGO;AAAA,MACJ,WAAWG,EAAG,8BAA8BN,CAAS;AAAA,MAErD,UAAA;AAAA,QAAA,gBAAAI,EAAC,OAAA,EAAI,WAAU,2CACb,UAAA;AAAA,UAAA,gBAAAG,EAACC,GAAA,EAAgB,WAAU,4BACxB,UAAAV,GACH;AAAA,UACCD,IACC,gBAAAU,EAAC,QAAA,EAAK,WAAU,sDACb,UAAAV,EAAA,CACH,IAEA,gBAAAU,EAAAE,GAAA,EACG,UAAAV,uBACEW,GAAA,EAAgB,WAAU,sDAAqD,EAAA,CAEpF;AAAA,QAAA,GAEJ;AAAA,QACA,gBAAAH;AAAA,UAACI;AAAAA,UAAA;AAAA,YACC,WAAWL;AAAA,cACT;AAAA,cACAL;AAAA,YAAA;AAAA,YAGF,UAAA,gBAAAM;AAAA,cAACK;AAAAA,cAAA;AAAA,gBACC,WAAWN;AAAA,kBACT;AAAA,kBACAJ;AAAA,gBAAA;AAAA,cACF;AAAA,YAAA;AAAA,UACF;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/chunks/{pagination-e3dp8bd80s35f7sd.js → pagination-pbd7qqik97ac0l7m.js}

@@ -1,10 +1,10 @@
 "use client";
 import { jsx as a, jsxs as g, Fragment as C } from "react/jsx-runtime";
 import { useState as O, useEffect as R, useMemo as b, createContext as T, useContext as _ } from "react";
-import { I as c } from "./input-group-cjsy8kh4vf9312xl.js";
+import { I as c } from "./input-group-hbebbyh8fo6aqydn.js";
 import { CaretDoubleLeftIcon as B, CaretLeftIcon as L, CaretRightIcon as D, CaretDoubleRightIcon as F } from "@phosphor-icons/react";
 import { c as u } from "./cn-ct4n7r74mh8y0f48.js";
-import { S as v } from "./select-hnt87e3cfos48qql.js";
+import { S as v } from "./select-paedwa3nlhpq82ua.js";
 const V = [25, 50, 100, 250], f = {
   controls: "full"
 }, h = T(null);
@@ -221,4 +221,4 @@ const q = Object.assign(M, {
 export {
   q as P
 };
-//# sourceMappingURL=pagination-e3dp8bd80s35f7sd.js.map
+//# sourceMappingURL=pagination-pbd7qqik97ac0l7m.js.map

package/dist/chunks/{pagination-e3dp8bd80s35f7sd.js.map → pagination-pbd7qqik97ac0l7m.js.map}

@@ -1 +1 @@
-{"version":3,"file":"pagination-e3dp8bd80s35f7sd.js","sources":["../../src/components/pagination/pagination.tsx"],"sourcesContent":["import {\n  createContext,\n  useContext,\n  useEffect,\n  useMemo,\n  useState,\n  type ReactNode,\n} from \"react\";\nimport { InputGroup } from \"../input\";\nimport {\n  CaretDoubleLeftIcon,\n  CaretDoubleRightIcon,\n  CaretLeftIcon,\n  CaretRightIcon,\n} from \"@phosphor-icons/react\";\nimport { cn } from \"../../utils/cn\";\nimport { Select } from \"../select\";\n\nconst DEFAULT_PAGE_SIZE_OPTIONS = [25, 50, 100, 250] as const;\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    KUMO_PAGINATION_VARIANTS.controls[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}\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-strong\", 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  /** Label text shown before the selector */\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  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-strong\">{label}</span>}\n      <Select\n        aria-label=\"Page size\"\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  /** Additional CSS classes */\n  className?: string;\n}\n\nfunction PaginationControls({\n  controls = KUMO_PAGINATION_DEFAULT_VARIANTS.controls,\n  className,\n}: PaginationControlsProps) {\n  const { page, maxPage, setPage, editingPage, setEditingPage } =\n    usePaginationContext();\n\n  return (\n    <div\n      data-slot=\"pagination-controls\"\n      className={cn(\"grow flex flex-col items-end\", className)}\n    >\n      <div>\n        <InputGroup focusMode=\"individual\">\n          {controls === \"full\" && (\n            <InputGroup.Button\n              variant=\"secondary\"\n              aria-label=\"First page\"\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=\"Previous page\"\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            <InputGroup.Input\n              style={{ width: 50 }}\n              className=\"text-center\"\n              aria-label=\"Page number\"\n              value={editingPage}\n              onValueChange={(value: string) => {\n                setEditingPage(Number(value));\n              }}\n              onBlur={() => {\n                let number = Math.max(editingPage, 1);\n                number = Math.min(number, maxPage);\n                setPage(number);\n                setEditingPage(number);\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=\"Next page\"\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=\"Last page\"\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      </div>\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-line\", 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\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,\n    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 { page = 1, perPage, totalCount, setPage, children, className } = 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  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  };\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          data-slot=\"pagination-info\"\n          className=\"grow text-sm text-kumo-strong\"\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","KUMO_PAGINATION_DEFAULT_VARIANTS","PaginationContext","createContext","usePaginationContext","context","useContext","PaginationInfo","children","className","page","perPage","totalCount","pageShowingRange","content","jsxs","Fragment","jsx","cn","PaginationPageSize","value","onChange","options","label","Select","v","size","PaginationControls","controls","maxPage","setPage","editingPage","setEditingPage","InputGroup","CaretDoubleLeftIcon","previousPage","CaretLeftIcon","number","nextPage","CaretRightIcon","CaretDoubleRightIcon","PaginationSeparator","PaginationRoot","props","text","useState","useEffect","useMemo","lower","upper","contextValue","getPaginationText","Pagination"],"mappings":"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"}
+{"version":3,"file":"pagination-pbd7qqik97ac0l7m.js","sources":["../../src/components/pagination/pagination.tsx"],"sourcesContent":["import {\n  createContext,\n  useContext,\n  useEffect,\n  useMemo,\n  useState,\n  type ReactNode,\n} from \"react\";\nimport { InputGroup } from \"../input\";\nimport {\n  CaretDoubleLeftIcon,\n  CaretDoubleRightIcon,\n  CaretLeftIcon,\n  CaretRightIcon,\n} from \"@phosphor-icons/react\";\nimport { cn } from \"../../utils/cn\";\nimport { Select } from \"../select\";\n\nconst DEFAULT_PAGE_SIZE_OPTIONS = [25, 50, 100, 250] as const;\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    KUMO_PAGINATION_VARIANTS.controls[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}\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-strong\", 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  /** Label text shown before the selector */\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  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-strong\">{label}</span>}\n      <Select\n        aria-label=\"Page size\"\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  /** Additional CSS classes */\n  className?: string;\n}\n\nfunction PaginationControls({\n  controls = KUMO_PAGINATION_DEFAULT_VARIANTS.controls,\n  className,\n}: PaginationControlsProps) {\n  const { page, maxPage, setPage, editingPage, setEditingPage } =\n    usePaginationContext();\n\n  return (\n    <div\n      data-slot=\"pagination-controls\"\n      className={cn(\"grow flex flex-col items-end\", className)}\n    >\n      <div>\n        <InputGroup focusMode=\"individual\">\n          {controls === \"full\" && (\n            <InputGroup.Button\n              variant=\"secondary\"\n              aria-label=\"First page\"\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=\"Previous page\"\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            <InputGroup.Input\n              style={{ width: 50 }}\n              className=\"text-center\"\n              aria-label=\"Page number\"\n              value={editingPage}\n              onValueChange={(value: string) => {\n                setEditingPage(Number(value));\n              }}\n              onBlur={() => {\n                let number = Math.max(editingPage, 1);\n                number = Math.min(number, maxPage);\n                setPage(number);\n                setEditingPage(number);\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=\"Next page\"\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=\"Last page\"\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      </div>\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-line\", 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\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,\n    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 { page = 1, perPage, totalCount, setPage, children, className } = 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  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  };\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          data-slot=\"pagination-info\"\n          className=\"grow text-sm text-kumo-strong\"\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","KUMO_PAGINATION_DEFAULT_VARIANTS","PaginationContext","createContext","usePaginationContext","context","useContext","PaginationInfo","children","className","page","perPage","totalCount","pageShowingRange","content","jsxs","Fragment","jsx","cn","PaginationPageSize","value","onChange","options","label","Select","v","size","PaginationControls","controls","maxPage","setPage","editingPage","setEditingPage","InputGroup","CaretDoubleLeftIcon","previousPage","CaretLeftIcon","number","nextPage","CaretRightIcon","CaretDoubleRightIcon","PaginationSeparator","PaginationRoot","props","text","useState","useEffect","useMemo","lower","upper","contextValue","getPaginationText","Pagination"],"mappings":"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"}

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

@@ -1,8 +1,9 @@
 "use client";
 import { jsx as o, jsxs as i } from "react/jsx-runtime";
 import { c as s } from "./cn-ct4n7r74mh8y0f48.js";
-import { b9 as P, ba as f, bb as b, bc as h, bd as C, be as x, bf as N, bg as y, bh as L } from "./vendor-base-ui-ccr5l0ynrievzzv3.js";
-const H = {
+import { u as b } from "./portal-provider-hwmkdmkpvct0cb76.js";
+import { bb as h, bc as C, bd as x, be as N, bf as y, bg as L, bh as T, bi as k, bj as w } from "./vendor-base-ui-n30qblevnpk9cc5c.js";
+const _ = {
   side: {
     top: {
       classes: "",
@@ -21,21 +22,21 @@ const H = {
       description: "Popover appears to the right of the trigger"
     }
   }
-}, T = {
+}, V = {
   side: "bottom"
 };
-function p({ children: e, ...t }) {
-  return /* @__PURE__ */ o(P, { ...t, children: e });
+function n({ children: e, ...t }) {
+  return /* @__PURE__ */ o(h, { ...t, children: e });
 }
-p.displayName = "Popover";
-function n({
+n.displayName = "Popover";
+function p({
   children: e,
   className: t,
   asChild: a,
   ...r
 }) {
   return /* @__PURE__ */ o(
-    f,
+    C,
     {
       className: t,
       render: a ? e : void 0,
@@ -44,18 +45,20 @@ function n({
     }
   );
 }
-n.displayName = "Popover.Trigger";
+p.displayName = "Popover.Trigger";
 function l({
   children: e,
-  side: t = T.side,
+  side: t = V.side,
   align: a = "center",
   sideOffset: r = 8,
   alignOffset: g = 0,
   positionMethod: u = "absolute",
-  className: v
+  className: v,
+  container: P
 }) {
-  return /* @__PURE__ */ o(b, { children: /* @__PURE__ */ o(
-    h,
+  const f = b();
+  return /* @__PURE__ */ o(x, { container: P ?? f ?? void 0, children: /* @__PURE__ */ o(
+    N,
     {
       align: a,
       alignOffset: g,
@@ -63,7 +66,7 @@ function l({
       sideOffset: r,
       positionMethod: u,
       children: /* @__PURE__ */ i(
-        C,
+        y,
         {
           className: s(
             "flex origin-(--transform-origin) flex-col rounded-lg bg-kumo-base px-4 py-3 text-sm text-kumo-default",
@@ -77,7 +80,7 @@ function l({
           ),
           children: [
             /* @__PURE__ */ o(
-              x,
+              L,
               {
                 className: s(
                   "flex",
@@ -86,7 +89,7 @@ function l({
                   "data-[side=right]:left-[-13px] data-[side=right]:-rotate-90",
                   "data-[side=top]:-bottom-2 data-[side=top]:rotate-180"
                 ),
-                children: /* @__PURE__ */ o(k, {})
+                children: /* @__PURE__ */ o(A, {})
               }
             ),
             e
@@ -99,7 +102,7 @@ function l({
 l.displayName = "Popover.Content";
 function d({ className: e, ...t }) {
   return /* @__PURE__ */ o(
-    N,
+    T,
     {
       className: s("m-0 text-base leading-6 font-medium", e),
       ...t
@@ -109,7 +112,7 @@ function d({ className: e, ...t }) {
 d.displayName = "Popover.Title";
 function c({ className: e, ...t }) {
   return /* @__PURE__ */ o(
-    y,
+    k,
     {
       className: s("m-0 text-base leading-6 text-kumo-subtle", e),
       ...t
@@ -124,7 +127,7 @@ function m({
   ...r
 }) {
   return /* @__PURE__ */ o(
-    L,
+    w,
     {
       className: t,
       render: a ? e : void 0,
@@ -134,7 +137,7 @@ function m({
   );
 }
 m.displayName = "Popover.Close";
-function k(e) {
+function A(e) {
   return /* @__PURE__ */ i("svg", { width: "20", height: "10", viewBox: "0 0 20 10", fill: "none", ...e, children: [
     /* @__PURE__ */ o(
       "path",
@@ -159,22 +162,22 @@ function k(e) {
     )
   ] });
 }
-const O = Object.assign(p, {
-  Trigger: n,
+const $ = Object.assign(n, {
+  Trigger: p,
   Content: l,
   Title: d,
   Description: c,
   Close: m
 });
 export {
-  H as K,
-  O as P,
-  p as a,
-  n as b,
+  _ as K,
+  $ as P,
+  n as a,
+  p as b,
   l as c,
   d,
   c as e,
   m as f,
-  T as g
+  V as g
 };
-//# sourceMappingURL=popover-jurf834u2uywluux.js.map
+//# sourceMappingURL=popover-i951xjcgezeqr4iv.js.map

package/dist/chunks/popover-i951xjcgezeqr4iv.js.map

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

package/dist/chunks/portal-provider-hwmkdmkpvct0cb76.js

@@ -0,0 +1,18 @@
+"use client";
+import { jsx as e } from "react/jsx-runtime";
+import { createContext as n, useContext as u } from "react";
+const t = n(null);
+function l({
+  container: o,
+  children: r
+}) {
+  return /* @__PURE__ */ e(t.Provider, { value: o, children: r });
+}
+function s() {
+  return u(t);
+}
+export {
+  l as K,
+  s as u
+};
+//# sourceMappingURL=portal-provider-hwmkdmkpvct0cb76.js.map

package/dist/chunks/portal-provider-hwmkdmkpvct0cb76.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"portal-provider-hwmkdmkpvct0cb76.js","sources":["../../src/utils/portal-provider.tsx"],"sourcesContent":["import {\n  createContext,\n  useContext,\n  type ReactNode,\n  type RefObject,\n} from \"react\";\n\n/**\n * Portal container type - matches Base UI's FloatingPortal container prop.\n * Supports HTMLElement, ShadowRoot, or a ref to either.\n */\nexport type PortalContainer =\n  | HTMLElement\n  | ShadowRoot\n  | null\n  | RefObject<HTMLElement | ShadowRoot | null>;\n\nconst PortalContainerContext = createContext<PortalContainer>(null);\n\n/**\n * KumoPortalProvider — sets the default portal container for all Kumo overlay components.\n *\n * Use this to render Kumo overlays (Dialog, Tooltip, DropdownMenu, Select, Combobox,\n * Popover, CommandPalette, Toast) inside a Shadow DOM or custom container.\n *\n * When not provided, overlays portal to `document.body` (default browser behavior).\n * Individual components can override this via their own `container` prop.\n *\n * @example Shadow DOM usage\n * ```tsx\n * function WebComponent() {\n *   const shadowRef = useRef<ShadowRoot>(null);\n *\n *   useEffect(() => {\n *     shadowRef.current = hostElement.attachShadow({ mode: 'open' });\n *   }, []);\n *\n *   return (\n *     <KumoPortalProvider container={shadowRef.current}>\n *       <App />\n *     </KumoPortalProvider>\n *   );\n * }\n * ```\n *\n * @example Custom container\n * ```tsx\n * const containerRef = useRef<HTMLDivElement>(null);\n *\n * <div ref={containerRef}>\n *   <KumoPortalProvider container={containerRef}>\n *     <Dialog.Root>...</Dialog.Root>\n *   </KumoPortalProvider>\n * </div>\n * ```\n */\nexport function KumoPortalProvider({\n  container,\n  children,\n}: {\n  /** The container element or ShadowRoot to portal overlays into. */\n  container: PortalContainer;\n  children: ReactNode;\n}) {\n  return (\n    <PortalContainerContext.Provider value={container}>\n      {children}\n    </PortalContainerContext.Provider>\n  );\n}\n\n/**\n * Hook to get the portal container from context.\n * Returns null if no provider is present (defaults to document.body).\n *\n * @internal Used by overlay components to resolve their portal container.\n */\nexport function usePortalContainer(): PortalContainer {\n  return useContext(PortalContainerContext);\n}\n"],"names":["PortalContainerContext","createContext","KumoPortalProvider","container","children","usePortalContainer","useContext"],"mappings":";;;AAiBA,MAAMA,IAAyBC,EAA+B,IAAI;AAuC3D,SAASC,EAAmB;AAAA,EACjC,WAAAC;AAAA,EACA,UAAAC;AACF,GAIG;AACD,2BACGJ,EAAuB,UAAvB,EAAgC,OAAOG,GACrC,UAAAC,GACH;AAEJ;AAQO,SAASC,IAAsC;AACpD,SAAOC,EAAWN,CAAsB;AAC1C;"}

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

@@ -2,7 +2,7 @@
 import { jsx as e, jsxs as m } from "react/jsx-runtime";
 import { forwardRef as y, createContext as j, useContext as A } from "react";
 import { c as o } from "./cn-ct4n7r74mh8y0f48.js";
-import { R as I, P as C, Q as G, bi as h, bj as b } from "./vendor-base-ui-ccr5l0ynrievzzv3.js";
+import { R as I, P as C, Q as G, bk as h, bl as b } from "./vendor-base-ui-n30qblevnpk9cc5c.js";
 const x = {
   variant: {
     default: {
@@ -50,7 +50,7 @@ const N = j({
     description: i,
     value: c
   }, l) => {
-    const { controlPosition: f, appearance: d } = A(N), u = (s ?? d) === "card", g = u ? "end" : f;
+    const { controlPosition: f, appearance: d } = A(N), u = (s ?? d) === "card", p = u ? "end" : f;
     return u ? /* @__PURE__ */ m(
       "label",
       {
@@ -100,7 +100,7 @@ const N = j({
           "m-0 group relative inline-flex items-center gap-2",
           // "start" (default): radio before label
           // "end": label before radio using flex-row-reverse
-          g === "end" && "flex-row-reverse justify-end",
+          p === "end" && "flex-row-reverse justify-end",
           r ? "cursor-not-allowed opacity-50" : "cursor-pointer",
           t
         ),
@@ -128,14 +128,14 @@ const N = j({
               )
             }
           ),
-          /* @__PURE__ */ e("span", { className: "text-base font-medium text-kumo-default", children: n })
+          /* @__PURE__ */ e("span", { className: "text-base text-kumo-default", children: n })
         ]
       }
     );
   }
 );
 R.displayName = "Radio.Item";
-function p({
+function g({
   legend: t,
   children: r,
   orientation: a = "vertical",
@@ -148,7 +148,7 @@ function p({
   disabled: d,
   controlPosition: k = "start",
   name: u,
-  className: g
+  className: p
 }) {
   return /* @__PURE__ */ e(N.Provider, { value: { controlPosition: k, appearance: s }, children: /* @__PURE__ */ e(
     I,
@@ -162,12 +162,9 @@ function p({
         C,
         {
           disabled: d,
-          className: o(
-            "flex flex-col gap-4 rounded-lg border border-kumo-line p-4",
-            g
-          ),
+          className: o("flex flex-col gap-4", p),
           children: [
-            /* @__PURE__ */ e(G, { className: "text-lg font-medium text-kumo-default", children: t }),
+            /* @__PURE__ */ e(G, { className: "text-base font-medium text-kumo-default", children: t }),
             /* @__PURE__ */ e(
               "div",
               {
@@ -185,16 +182,16 @@ function p({
     }
   ) });
 }
-p.displayName = "Radio.Group";
-const V = Object.assign(p, {
+g.displayName = "Radio.Group";
+const V = Object.assign(g, {
   Item: R,
-  Group: p
+  Group: g
 });
 export {
   x as K,
   V as R,
-  p as a,
+  g as a,
   v as b,
   M as r
 };
-//# sourceMappingURL=radio-l9dzm6sohcvvrsdc.js.map
+//# sourceMappingURL=radio-l2vkcue40d84fmo1.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"radio-l9dzm6sohcvvrsdc.js","sources":["../../src/components/radio/radio.tsx"],"sourcesContent":["import { forwardRef, createContext, useContext, type ReactNode } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Fieldset } from \"@base-ui/react/fieldset\";\nimport { RadioGroup as BaseRadioGroup } from \"@base-ui/react/radio-group\";\nimport { Radio as BaseRadio } from \"@base-ui/react/radio\";\n\n/** Radio variant definitions mapping variant names to their Tailwind classes. */\nexport const KUMO_RADIO_VARIANTS = {\n  variant: {\n    default: {\n      classes: \"ring-kumo-line\",\n      description: \"Default radio appearance\",\n    },\n    error: {\n      classes: \"ring-kumo-danger\",\n      description: \"Error state for validation failures\",\n    },\n  },\n  appearance: {\n    default: {\n      classes: \"\",\n      description: \"Standard inline radio item\",\n    },\n    card: {\n      classes:\n        \"rounded-lg border border-kumo-ring bg-kumo-base p-3 transition-colors hover:bg-kumo-tint has-[[data-checked]]:border-kumo-interact has-[[data-checked]]:bg-kumo-tint\",\n      description:\n        \"Choice card appearance with border, padding, and highlighted selection state\",\n    },\n  },\n} as const;\n\nexport const KUMO_RADIO_DEFAULT_VARIANTS = {\n  variant: \"default\",\n  appearance: \"default\",\n} as const;\n\n// Derived types from KUMO_RADIO_VARIANTS\nexport type KumoRadioVariant = keyof typeof KUMO_RADIO_VARIANTS.variant;\nexport type KumoRadioAppearance = keyof typeof KUMO_RADIO_VARIANTS.appearance;\n\nexport interface KumoRadioVariantsProps {\n  /**\n   * Visual variant.\n   * - `\"default\"` — Standard radio appearance\n   * - `\"error\"` — Error state for validation failures\n   * @default \"default\"\n   */\n  variant?: KumoRadioVariant;\n  /**\n   * Visual appearance.\n   * - `\"default\"` — Standard inline radio item\n   * - `\"card\"` — Choice card with border, padding, and highlighted selection state\n   * @default \"default\"\n   */\n  appearance?: KumoRadioAppearance;\n}\n\nexport function radioVariants({\n  variant = KUMO_RADIO_DEFAULT_VARIANTS.variant,\n  appearance = KUMO_RADIO_DEFAULT_VARIANTS.appearance,\n}: KumoRadioVariantsProps = {}) {\n  return cn(\n    KUMO_RADIO_VARIANTS.variant[variant].classes,\n    KUMO_RADIO_VARIANTS.appearance[appearance].classes,\n  );\n}\n\n// Legacy type alias for backwards compatibility\nexport type RadioVariant = KumoRadioVariant;\n\n/** Position of the radio control relative to its label */\nexport type RadioControlPosition = \"start\" | \"end\";\n\n// Context for passing controlPosition and appearance from Group to Items\nconst RadioGroupContext = createContext<{\n  controlPosition: RadioControlPosition;\n  appearance: KumoRadioAppearance;\n}>({\n  controlPosition: \"start\",\n  appearance: \"default\",\n});\n\n/**\n * Radio group component props (with built-in Fieldset and RadioGroup)\n *\n * @example\n * // Basic usage\n * ```tsx\n * <Radio.Group legend=\"Notification preference\" defaultValue=\"email\">\n *   <Radio.Item label=\"Email\" value=\"email\" />\n *   <Radio.Item label=\"SMS\" value=\"sms\" />\n *   <Radio.Item label=\"Push\" value=\"push\" />\n * </Radio.Group>\n * ```\n *\n * @example\n * // Horizontal layout\n * ```tsx\n * <Radio.Group legend=\"Size\" orientation=\"horizontal\" defaultValue=\"md\">\n *   <Radio.Item label=\"Small\" value=\"sm\" />\n *   <Radio.Item label=\"Medium\" value=\"md\" />\n *   <Radio.Item label=\"Large\" value=\"lg\" />\n * </Radio.Group>\n * ```\n *\n * @example\n * // With error and description\n * ```tsx\n * <Radio.Group\n *   legend=\"Payment method\"\n *   error=\"Please select a payment method\"\n *   description=\"Choose how you'd like to pay\"\n * >\n *   <Radio.Item label=\"Credit Card\" value=\"card\" />\n *   <Radio.Item label=\"PayPal\" value=\"paypal\" />\n * </Radio.Group>\n * ```\n *\n * @example\n * // Controlled\n * ```tsx\n * const [value, setValue] = useState(\"email\");\n * <Radio.Group legend=\"Contact\" value={value} onValueChange={setValue}>\n *   <Radio.Item label=\"Email\" value=\"email\" />\n *   <Radio.Item label=\"Phone\" value=\"phone\" />\n * </Radio.Group>\n * ```\n *\n * @example\n * // Label before radio (controlPosition=\"end\")\n * ```tsx\n * <Radio.Group legend=\"Options\" controlPosition=\"end\" defaultValue=\"a\">\n *   <Radio.Item label=\"Option A\" value=\"a\" />\n *   <Radio.Item label=\"Option B\" value=\"b\" />\n * </Radio.Group>\n * ```\n */\nexport interface RadioGroupProps {\n  /** Legend text for the group (required for accessibility) */\n  legend: string;\n  /** Child Radio.Item components */\n  children: ReactNode;\n  /** Layout direction of the radio items */\n  orientation?: \"vertical\" | \"horizontal\";\n  /**\n   * Visual appearance applied to all Radio.Item children.\n   * - `\"default\"` — Standard inline radio items\n   * - `\"card\"` — Choice card with border, padding, and highlighted selection state\n   *\n   * Individual items can override this with their own `appearance` prop.\n   * @default \"default\"\n   */\n  appearance?: KumoRadioAppearance;\n  /** Error message for the group */\n  error?: string;\n  /** Helper text for the group */\n  description?: ReactNode;\n  /** Value of the radio that should be initially selected (uncontrolled) */\n  defaultValue?: string;\n  /** Value of the radio that should be selected (controlled) */\n  value?: string;\n  /** Event handler called when radio value changes */\n  onValueChange?: (value: string) => void;\n  /** Whether all radios in the group are disabled */\n  disabled?: boolean;\n  /** Position of radio control relative to label: \"start\" (default) puts radio before label, \"end\" puts label before radio. Note: In card appearance, the control is always positioned at the end. */\n  controlPosition?: RadioControlPosition;\n  /** Form submission name for the radio group */\n  name?: string;\n  /** Additional CSS classes */\n  className?: string;\n}\n\n/**\n * Individual radio item within a group\n *\n * @example\n * ```tsx\n * <Radio.Item label=\"Option A\" value=\"a\" />\n * ```\n *\n * @example\n * // Disabled item\n * ```tsx\n * <Radio.Item label=\"Unavailable\" value=\"unavailable\" disabled />\n * ```\n */\nexport type RadioItemProps = {\n  /** Visual variant: \"default\" or \"error\" for validation failures */\n  variant?: RadioVariant;\n  /**\n   * Visual appearance of the radio item.\n   * - `\"default\"` — Standard inline radio item\n   * - `\"card\"` — Choice card with border, padding, and highlighted selection state\n   *\n   * When set on an individual item, overrides the group-level `appearance`.\n   * @default \"default\"\n   */\n  appearance?: KumoRadioAppearance;\n  /** Label text displayed next to radio (required) */\n  label: string;\n  /** Description text displayed below the label (only visible in card appearance) */\n  description?: ReactNode;\n  /** Value of the radio (required) */\n  value: string;\n  /** Additional CSS classes for the label wrapper */\n  className?: string;\n  /** Whether the radio is disabled */\n  disabled?: boolean;\n};\n\n// Radio.Item for use within Radio.Group\nconst RadioItem = forwardRef<HTMLButtonElement, RadioItemProps>(\n  (\n    {\n      className,\n      disabled,\n      variant = \"default\",\n      appearance: appearanceProp,\n      label,\n      description,\n      value,\n    },\n    ref,\n  ) => {\n    const { controlPosition, appearance: groupAppearance } =\n      useContext(RadioGroupContext);\n    const appearance = appearanceProp ?? groupAppearance;\n    const isCard = appearance === \"card\";\n\n    // In card mode, default to \"end\" (radio on the right); otherwise follow group setting\n    const effectiveControlPosition = isCard ? \"end\" : controlPosition;\n\n    if (isCard) {\n      return (\n        <label\n          className={cn(\n            \"m-0 group relative flex items-start gap-3 rounded-lg border border-kumo-ring bg-kumo-base p-3 transition-colors has-[[data-checked]]:border-kumo-interact has-[[data-checked]]:bg-kumo-tint\",\n            variant === \"error\" &&\n              \"border-kumo-danger has-[[data-checked]]:border-kumo-danger has-[[data-checked]]:bg-kumo-base\",\n            disabled\n              ? \"cursor-not-allowed opacity-50\"\n              : cn(\n                  \"has-[[data-disabled]]:cursor-not-allowed has-[[data-disabled]]:opacity-50 cursor-pointer\",\n                  variant !== \"error\" &&\n                    \"hover:not-has-[[data-disabled]]:bg-kumo-tint\",\n                ),\n            className,\n          )}\n        >\n          <div className=\"flex min-w-0 flex-1 flex-col gap-0.5\">\n            <span className=\"text-base font-medium text-kumo-default\">\n              {label}\n            </span>\n            {description && (\n              <span className=\"text-sm text-kumo-subtle\">{description}</span>\n            )}\n          </div>\n          <BaseRadio.Root\n            ref={ref}\n            value={value}\n            disabled={disabled}\n            className={cn(\n              \"relative mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full border-0 bg-kumo-base ring\",\n              variant === \"error\" ? \"ring-kumo-danger\" : \"ring-kumo-line\",\n              !disabled &&\n                variant !== \"error\" &&\n                \"group-hover:ring-kumo-ring focus-visible:ring-kumo-ring focus-visible:outline-offset-3\",\n              !disabled &&\n                variant === \"error\" &&\n                \"focus-visible:ring-kumo-danger focus-visible:outline-offset-3\",\n              \"data-[checked]:bg-kumo-contrast\",\n            )}\n          >\n            <BaseRadio.Indicator\n              keepMounted\n              className=\"flex items-center justify-center\"\n            >\n              <span className=\"h-2 w-2 rounded-full bg-kumo-base\" />\n            </BaseRadio.Indicator>\n          </BaseRadio.Root>\n        </label>\n      );\n    }\n\n    return (\n      <label\n        className={cn(\n          \"m-0 group relative inline-flex items-center gap-2\",\n          // \"start\" (default): radio before label\n          // \"end\": label before radio using flex-row-reverse\n          effectiveControlPosition === \"end\" && \"flex-row-reverse justify-end\",\n          disabled ? \"cursor-not-allowed opacity-50\" : \"cursor-pointer\",\n          className,\n        )}\n      >\n        <BaseRadio.Root\n          ref={ref}\n          value={value}\n          disabled={disabled}\n          className={cn(\n            \"relative flex h-4 w-4 items-center justify-center rounded-full border-0 bg-kumo-base ring after:absolute after:-inset-x-3 after:-inset-y-2\",\n            variant === \"error\" ? \"ring-kumo-danger\" : \"ring-kumo-line\",\n            !disabled &&\n              variant !== \"error\" &&\n              \"group-hover:ring-kumo-ring focus-visible:ring-kumo-ring focus-visible:outline-offset-3\",\n            !disabled &&\n              variant === \"error\" &&\n              \"focus-visible:ring-kumo-danger focus-visible:outline-offset-3\",\n            \"data-[checked]:bg-kumo-contrast\",\n          )}\n        >\n          <BaseRadio.Indicator\n            keepMounted\n            className=\"flex items-center justify-center\"\n          >\n            <span className=\"h-2 w-2 rounded-full bg-kumo-base\" />\n          </BaseRadio.Indicator>\n        </BaseRadio.Root>\n        <span className=\"text-base font-medium text-kumo-default\">{label}</span>\n      </label>\n    );\n  },\n);\n\nRadioItem.displayName = \"Radio.Item\";\n\n// Radio.Group with built-in Fieldset and RadioGroup\nfunction RadioGroup({\n  legend,\n  children,\n  orientation = \"vertical\",\n  appearance = \"default\",\n  error,\n  description,\n  defaultValue,\n  value,\n  onValueChange,\n  disabled,\n  controlPosition = \"start\",\n  name,\n  className,\n}: RadioGroupProps) {\n  return (\n    <RadioGroupContext.Provider value={{ controlPosition, appearance }}>\n      <BaseRadioGroup\n        defaultValue={defaultValue}\n        value={value}\n        onValueChange={(newValue) => onValueChange?.(newValue)}\n        disabled={disabled}\n        name={name}\n      >\n        <Fieldset.Root\n          disabled={disabled}\n          className={cn(\n            \"flex flex-col gap-4 rounded-lg border border-kumo-line p-4\",\n            className,\n          )}\n        >\n          <Fieldset.Legend className=\"text-lg font-medium text-kumo-default\">\n            {legend}\n          </Fieldset.Legend>\n          <div\n            className={cn(\n              orientation === \"vertical\"\n                ? cn(\"flex flex-col\", appearance === \"card\" ? \"gap-3\" : \"gap-2\")\n                : appearance === \"card\"\n                  ? \"grid grid-cols-2 gap-3\"\n                  : \"flex flex-row flex-wrap gap-2\",\n            )}\n          >\n            {children}\n          </div>\n          {error && <p className=\"text-sm text-kumo-danger\">{error}</p>}\n          {description && (\n            <p className=\"text-sm text-kumo-subtle\">{description}</p>\n          )}\n        </Fieldset.Root>\n      </BaseRadioGroup>\n    </RadioGroupContext.Provider>\n  );\n}\n\nRadioGroup.displayName = \"Radio.Group\";\n\n// Export RadioGroup directly for external usage\nexport { RadioGroup };\n\n/**\n * Radio — radio button group for single-select choices.\n *\n * Compound component: `Radio.Group` (with built-in Fieldset) and `Radio.Item`.\n * Built on `@base-ui/react/radio-group` + `@base-ui/react/radio`.\n *\n * @example\n * ```tsx\n * <Radio.Group legend=\"Notification preference\" defaultValue=\"email\">\n *   <Radio.Item label=\"Email\" value=\"email\" />\n *   <Radio.Item label=\"SMS\" value=\"sms\" />\n *   <Radio.Item label=\"Push\" value=\"push\" />\n * </Radio.Group>\n * ```\n */\nexport const Radio = Object.assign(RadioGroup, {\n  Item: RadioItem,\n  Group: RadioGroup,\n});\n"],"names":["KUMO_RADIO_VARIANTS","KUMO_RADIO_DEFAULT_VARIANTS","radioVariants","variant","appearance","cn","RadioGroupContext","createContext","RadioItem","forwardRef","className","disabled","appearanceProp","label","description","value","ref","controlPosition","groupAppearance","useContext","isCard","effectiveControlPosition","jsxs","jsx","BaseRadio.Root","BaseRadio.Indicator","RadioGroup","legend","children","orientation","error","defaultValue","onValueChange","name","BaseRadioGroup","newValue","Fieldset.Root","Fieldset.Legend","Radio"],"mappings":";;;;;AAOO,MAAMA,IAAsB;AAAA,EACjC,SAAS;AAAA,IACP,SAAS;AAAA,MACP,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,OAAO;AAAA,MACL,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,EACf;AAAA,EAEF,YAAY;AAAA,IACV,SAAS;AAAA,MACP,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,MAAM;AAAA,MACJ,SACE;AAAA,MACF,aACE;AAAA,IAAA;AAAA,EACJ;AAEJ,GAEaC,IAA8B;AAAA,EACzC,SAAS;AAAA,EACT,YAAY;AACd;AAuBO,SAASC,EAAc;AAAA,EAC5B,SAAAC,IAAUF,EAA4B;AAAA,EACtC,YAAAG,IAAaH,EAA4B;AAC3C,IAA4B,IAAI;AAC9B,SAAOI;AAAA,IACLL,EAAoB,QAAQG,CAAO,EAAE;AAAA,IACrCH,EAAoB,WAAWI,CAAU,EAAE;AAAA,EAAA;AAE/C;AASA,MAAME,IAAoBC,EAGvB;AAAA,EACD,iBAAiB;AAAA,EACjB,YAAY;AACd,CAAC,GAoIKC,IAAYC;AAAA,EAChB,CACE;AAAA,IACE,WAAAC;AAAA,IACA,UAAAC;AAAA,IACA,SAAAR,IAAU;AAAA,IACV,YAAYS;AAAA,IACZ,OAAAC;AAAA,IACA,aAAAC;AAAA,IACA,OAAAC;AAAA,EAAA,GAEFC,MACG;AACH,UAAM,EAAE,iBAAAC,GAAiB,YAAYC,EAAA,IACnCC,EAAWb,CAAiB,GAExBc,KADaR,KAAkBM,OACP,QAGxBG,IAA2BD,IAAS,QAAQH;AAElD,WAAIG,IAEA,gBAAAE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWjB;AAAA,UACT;AAAA,UACAF,MAAY,WACV;AAAA,UACFQ,IACI,kCACAN;AAAA,YACE;AAAA,YACAF,MAAY,WACV;AAAA,UAAA;AAAA,UAERO;AAAA,QAAA;AAAA,QAGF,UAAA;AAAA,UAAA,gBAAAY,EAAC,OAAA,EAAI,WAAU,wCACb,UAAA;AAAA,YAAA,gBAAAC,EAAC,QAAA,EAAK,WAAU,2CACb,UAAAV,GACH;AAAA,YACCC,KACC,gBAAAS,EAAC,QAAA,EAAK,WAAU,4BAA4B,UAAAT,EAAA,CAAY;AAAA,UAAA,GAE5D;AAAA,UACA,gBAAAS;AAAA,YAACC;AAAAA,YAAA;AAAA,cACC,KAAAR;AAAA,cACA,OAAAD;AAAA,cACA,UAAAJ;AAAA,cACA,WAAWN;AAAA,gBACT;AAAA,gBACAF,MAAY,UAAU,qBAAqB;AAAA,gBAC3C,CAACQ,KACCR,MAAY,WACZ;AAAA,gBACF,CAACQ,KACCR,MAAY,WACZ;AAAA,gBACF;AAAA,cAAA;AAAA,cAGF,UAAA,gBAAAoB;AAAA,gBAACE;AAAAA,gBAAA;AAAA,kBACC,aAAW;AAAA,kBACX,WAAU;AAAA,kBAEV,UAAA,gBAAAF,EAAC,QAAA,EAAK,WAAU,oCAAA,CAAoC;AAAA,gBAAA;AAAA,cAAA;AAAA,YACtD;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IAAA,IAMJ,gBAAAD;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWjB;AAAA,UACT;AAAA;AAAA;AAAA,UAGAgB,MAA6B,SAAS;AAAA,UACtCV,IAAW,kCAAkC;AAAA,UAC7CD;AAAA,QAAA;AAAA,QAGF,UAAA;AAAA,UAAA,gBAAAa;AAAA,YAACC;AAAAA,YAAA;AAAA,cACC,KAAAR;AAAA,cACA,OAAAD;AAAA,cACA,UAAAJ;AAAA,cACA,WAAWN;AAAA,gBACT;AAAA,gBACAF,MAAY,UAAU,qBAAqB;AAAA,gBAC3C,CAACQ,KACCR,MAAY,WACZ;AAAA,gBACF,CAACQ,KACCR,MAAY,WACZ;AAAA,gBACF;AAAA,cAAA;AAAA,cAGF,UAAA,gBAAAoB;AAAA,gBAACE;AAAAA,gBAAA;AAAA,kBACC,aAAW;AAAA,kBACX,WAAU;AAAA,kBAEV,UAAA,gBAAAF,EAAC,QAAA,EAAK,WAAU,oCAAA,CAAoC;AAAA,gBAAA;AAAA,cAAA;AAAA,YACtD;AAAA,UAAA;AAAA,UAEF,gBAAAA,EAAC,QAAA,EAAK,WAAU,2CAA2C,UAAAV,EAAA,CAAM;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGvE;AACF;AAEAL,EAAU,cAAc;AAGxB,SAASkB,EAAW;AAAA,EAClB,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,YAAAzB,IAAa;AAAA,EACb,OAAA0B;AAAA,EACA,aAAAhB;AAAA,EACA,cAAAiB;AAAA,EACA,OAAAhB;AAAA,EACA,eAAAiB;AAAA,EACA,UAAArB;AAAA,EACA,iBAAAM,IAAkB;AAAA,EAClB,MAAAgB;AAAA,EACA,WAAAvB;AACF,GAAoB;AAClB,SACE,gBAAAa,EAACjB,EAAkB,UAAlB,EAA2B,OAAO,EAAE,iBAAAW,GAAiB,YAAAb,KACpD,UAAA,gBAAAmB;AAAA,IAACW;AAAAA,IAAA;AAAA,MACC,cAAAH;AAAA,MACA,OAAAhB;AAAA,MACA,eAAe,CAACoB,MAAaH,IAAgBG,CAAQ;AAAA,MACrD,UAAAxB;AAAA,MACA,MAAAsB;AAAA,MAEA,UAAA,gBAAAX;AAAA,QAACc;AAAAA,QAAA;AAAA,UACC,UAAAzB;AAAA,UACA,WAAWN;AAAA,YACT;AAAA,YACAK;AAAA,UAAA;AAAA,UAGF,UAAA;AAAA,YAAA,gBAAAa,EAACc,GAAA,EAAgB,WAAU,yCACxB,UAAAV,GACH;AAAA,YACA,gBAAAJ;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAWlB;AAAA,kBACTwB,MAAgB,aACZxB,EAAG,iBAAiBD,MAAe,SAAS,UAAU,OAAO,IAC7DA,MAAe,SACb,2BACA;AAAA,gBAAA;AAAA,gBAGP,UAAAwB;AAAA,cAAA;AAAA,YAAA;AAAA,YAEFE,KAAS,gBAAAP,EAAC,KAAA,EAAE,WAAU,4BAA4B,UAAAO,GAAM;AAAA,YACxDhB,KACC,gBAAAS,EAAC,KAAA,EAAE,WAAU,4BAA4B,UAAAT,EAAA,CAAY;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAEzD;AAAA,EAAA,GAEJ;AAEJ;AAEAY,EAAW,cAAc;AAoBlB,MAAMY,IAAQ,OAAO,OAAOZ,GAAY;AAAA,EAC7C,MAAMlB;AAAA,EACN,OAAOkB;AACT,CAAC;"}
+{"version":3,"file":"radio-l2vkcue40d84fmo1.js","sources":["../../src/components/radio/radio.tsx"],"sourcesContent":["import { forwardRef, createContext, useContext, type ReactNode } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Fieldset } from \"@base-ui/react/fieldset\";\nimport { RadioGroup as BaseRadioGroup } from \"@base-ui/react/radio-group\";\nimport { Radio as BaseRadio } from \"@base-ui/react/radio\";\n\n/** Radio variant definitions mapping variant names to their Tailwind classes. */\nexport const KUMO_RADIO_VARIANTS = {\n  variant: {\n    default: {\n      classes: \"ring-kumo-line\",\n      description: \"Default radio appearance\",\n    },\n    error: {\n      classes: \"ring-kumo-danger\",\n      description: \"Error state for validation failures\",\n    },\n  },\n  appearance: {\n    default: {\n      classes: \"\",\n      description: \"Standard inline radio item\",\n    },\n    card: {\n      classes:\n        \"rounded-lg border border-kumo-ring bg-kumo-base p-3 transition-colors hover:bg-kumo-tint has-[[data-checked]]:border-kumo-interact has-[[data-checked]]:bg-kumo-tint\",\n      description:\n        \"Choice card appearance with border, padding, and highlighted selection state\",\n    },\n  },\n} as const;\n\nexport const KUMO_RADIO_DEFAULT_VARIANTS = {\n  variant: \"default\",\n  appearance: \"default\",\n} as const;\n\n// Derived types from KUMO_RADIO_VARIANTS\nexport type KumoRadioVariant = keyof typeof KUMO_RADIO_VARIANTS.variant;\nexport type KumoRadioAppearance = keyof typeof KUMO_RADIO_VARIANTS.appearance;\n\nexport interface KumoRadioVariantsProps {\n  /**\n   * Visual variant.\n   * - `\"default\"` — Standard radio appearance\n   * - `\"error\"` — Error state for validation failures\n   * @default \"default\"\n   */\n  variant?: KumoRadioVariant;\n  /**\n   * Visual appearance.\n   * - `\"default\"` — Standard inline radio item\n   * - `\"card\"` — Choice card with border, padding, and highlighted selection state\n   * @default \"default\"\n   */\n  appearance?: KumoRadioAppearance;\n}\n\nexport function radioVariants({\n  variant = KUMO_RADIO_DEFAULT_VARIANTS.variant,\n  appearance = KUMO_RADIO_DEFAULT_VARIANTS.appearance,\n}: KumoRadioVariantsProps = {}) {\n  return cn(\n    KUMO_RADIO_VARIANTS.variant[variant].classes,\n    KUMO_RADIO_VARIANTS.appearance[appearance].classes,\n  );\n}\n\n// Legacy type alias for backwards compatibility\nexport type RadioVariant = KumoRadioVariant;\n\n/** Position of the radio control relative to its label */\nexport type RadioControlPosition = \"start\" | \"end\";\n\n// Context for passing controlPosition and appearance from Group to Items\nconst RadioGroupContext = createContext<{\n  controlPosition: RadioControlPosition;\n  appearance: KumoRadioAppearance;\n}>({\n  controlPosition: \"start\",\n  appearance: \"default\",\n});\n\n/**\n * Radio group component props (with built-in Fieldset and RadioGroup)\n *\n * @example\n * // Basic usage\n * ```tsx\n * <Radio.Group legend=\"Notification preference\" defaultValue=\"email\">\n *   <Radio.Item label=\"Email\" value=\"email\" />\n *   <Radio.Item label=\"SMS\" value=\"sms\" />\n *   <Radio.Item label=\"Push\" value=\"push\" />\n * </Radio.Group>\n * ```\n *\n * @example\n * // Horizontal layout\n * ```tsx\n * <Radio.Group legend=\"Size\" orientation=\"horizontal\" defaultValue=\"md\">\n *   <Radio.Item label=\"Small\" value=\"sm\" />\n *   <Radio.Item label=\"Medium\" value=\"md\" />\n *   <Radio.Item label=\"Large\" value=\"lg\" />\n * </Radio.Group>\n * ```\n *\n * @example\n * // With error and description\n * ```tsx\n * <Radio.Group\n *   legend=\"Payment method\"\n *   error=\"Please select a payment method\"\n *   description=\"Choose how you'd like to pay\"\n * >\n *   <Radio.Item label=\"Credit Card\" value=\"card\" />\n *   <Radio.Item label=\"PayPal\" value=\"paypal\" />\n * </Radio.Group>\n * ```\n *\n * @example\n * // Controlled\n * ```tsx\n * const [value, setValue] = useState(\"email\");\n * <Radio.Group legend=\"Contact\" value={value} onValueChange={setValue}>\n *   <Radio.Item label=\"Email\" value=\"email\" />\n *   <Radio.Item label=\"Phone\" value=\"phone\" />\n * </Radio.Group>\n * ```\n *\n * @example\n * // Label before radio (controlPosition=\"end\")\n * ```tsx\n * <Radio.Group legend=\"Options\" controlPosition=\"end\" defaultValue=\"a\">\n *   <Radio.Item label=\"Option A\" value=\"a\" />\n *   <Radio.Item label=\"Option B\" value=\"b\" />\n * </Radio.Group>\n * ```\n */\nexport interface RadioGroupProps {\n  /** Legend text for the group (required for accessibility) */\n  legend: string;\n  /** Child Radio.Item components */\n  children: ReactNode;\n  /** Layout direction of the radio items */\n  orientation?: \"vertical\" | \"horizontal\";\n  /**\n   * Visual appearance applied to all Radio.Item children.\n   * - `\"default\"` — Standard inline radio items\n   * - `\"card\"` — Choice card with border, padding, and highlighted selection state\n   *\n   * Individual items can override this with their own `appearance` prop.\n   * @default \"default\"\n   */\n  appearance?: KumoRadioAppearance;\n  /** Error message for the group */\n  error?: string;\n  /** Helper text for the group */\n  description?: ReactNode;\n  /** Value of the radio that should be initially selected (uncontrolled) */\n  defaultValue?: string;\n  /** Value of the radio that should be selected (controlled) */\n  value?: string;\n  /** Event handler called when radio value changes */\n  onValueChange?: (value: string) => void;\n  /** Whether all radios in the group are disabled */\n  disabled?: boolean;\n  /** Position of radio control relative to label: \"start\" (default) puts radio before label, \"end\" puts label before radio. Note: In card appearance, the control is always positioned at the end. */\n  controlPosition?: RadioControlPosition;\n  /** Form submission name for the radio group */\n  name?: string;\n  /** Additional CSS classes */\n  className?: string;\n}\n\n/**\n * Individual radio item within a group\n *\n * @example\n * ```tsx\n * <Radio.Item label=\"Option A\" value=\"a\" />\n * ```\n *\n * @example\n * // Disabled item\n * ```tsx\n * <Radio.Item label=\"Unavailable\" value=\"unavailable\" disabled />\n * ```\n */\nexport type RadioItemProps = {\n  /** Visual variant: \"default\" or \"error\" for validation failures */\n  variant?: RadioVariant;\n  /**\n   * Visual appearance of the radio item.\n   * - `\"default\"` — Standard inline radio item\n   * - `\"card\"` — Choice card with border, padding, and highlighted selection state\n   *\n   * When set on an individual item, overrides the group-level `appearance`.\n   * @default \"default\"\n   */\n  appearance?: KumoRadioAppearance;\n  /** Label text displayed next to radio (required) */\n  label: string;\n  /** Description text displayed below the label (only visible in card appearance) */\n  description?: ReactNode;\n  /** Value of the radio (required) */\n  value: string;\n  /** Additional CSS classes for the label wrapper */\n  className?: string;\n  /** Whether the radio is disabled */\n  disabled?: boolean;\n};\n\n// Radio.Item for use within Radio.Group\nconst RadioItem = forwardRef<HTMLButtonElement, RadioItemProps>(\n  (\n    {\n      className,\n      disabled,\n      variant = \"default\",\n      appearance: appearanceProp,\n      label,\n      description,\n      value,\n    },\n    ref,\n  ) => {\n    const { controlPosition, appearance: groupAppearance } =\n      useContext(RadioGroupContext);\n    const appearance = appearanceProp ?? groupAppearance;\n    const isCard = appearance === \"card\";\n\n    // In card mode, default to \"end\" (radio on the right); otherwise follow group setting\n    const effectiveControlPosition = isCard ? \"end\" : controlPosition;\n\n    if (isCard) {\n      return (\n        <label\n          className={cn(\n            \"m-0 group relative flex items-start gap-3 rounded-lg border border-kumo-ring bg-kumo-base p-3 transition-colors has-[[data-checked]]:border-kumo-interact has-[[data-checked]]:bg-kumo-tint\",\n            variant === \"error\" &&\n              \"border-kumo-danger has-[[data-checked]]:border-kumo-danger has-[[data-checked]]:bg-kumo-base\",\n            disabled\n              ? \"cursor-not-allowed opacity-50\"\n              : cn(\n                  \"has-[[data-disabled]]:cursor-not-allowed has-[[data-disabled]]:opacity-50 cursor-pointer\",\n                  variant !== \"error\" &&\n                    \"hover:not-has-[[data-disabled]]:bg-kumo-tint\",\n                ),\n            className,\n          )}\n        >\n          <div className=\"flex min-w-0 flex-1 flex-col gap-0.5\">\n            <span className=\"text-base font-medium text-kumo-default\">\n              {label}\n            </span>\n            {description && (\n              <span className=\"text-sm text-kumo-subtle\">{description}</span>\n            )}\n          </div>\n          <BaseRadio.Root\n            ref={ref}\n            value={value}\n            disabled={disabled}\n            className={cn(\n              \"relative mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full border-0 bg-kumo-base ring\",\n              variant === \"error\" ? \"ring-kumo-danger\" : \"ring-kumo-line\",\n              !disabled &&\n                variant !== \"error\" &&\n                \"group-hover:ring-kumo-ring focus-visible:ring-kumo-ring focus-visible:outline-offset-3\",\n              !disabled &&\n                variant === \"error\" &&\n                \"focus-visible:ring-kumo-danger focus-visible:outline-offset-3\",\n              \"data-[checked]:bg-kumo-contrast\",\n            )}\n          >\n            <BaseRadio.Indicator\n              keepMounted\n              className=\"flex items-center justify-center\"\n            >\n              <span className=\"h-2 w-2 rounded-full bg-kumo-base\" />\n            </BaseRadio.Indicator>\n          </BaseRadio.Root>\n        </label>\n      );\n    }\n\n    return (\n      <label\n        className={cn(\n          \"m-0 group relative inline-flex items-center gap-2\",\n          // \"start\" (default): radio before label\n          // \"end\": label before radio using flex-row-reverse\n          effectiveControlPosition === \"end\" && \"flex-row-reverse justify-end\",\n          disabled ? \"cursor-not-allowed opacity-50\" : \"cursor-pointer\",\n          className,\n        )}\n      >\n        <BaseRadio.Root\n          ref={ref}\n          value={value}\n          disabled={disabled}\n          className={cn(\n            \"relative flex h-4 w-4 items-center justify-center rounded-full border-0 bg-kumo-base ring after:absolute after:-inset-x-3 after:-inset-y-2\",\n            variant === \"error\" ? \"ring-kumo-danger\" : \"ring-kumo-line\",\n            !disabled &&\n              variant !== \"error\" &&\n              \"group-hover:ring-kumo-ring focus-visible:ring-kumo-ring focus-visible:outline-offset-3\",\n            !disabled &&\n              variant === \"error\" &&\n              \"focus-visible:ring-kumo-danger focus-visible:outline-offset-3\",\n            \"data-[checked]:bg-kumo-contrast\",\n          )}\n        >\n          <BaseRadio.Indicator\n            keepMounted\n            className=\"flex items-center justify-center\"\n          >\n            <span className=\"h-2 w-2 rounded-full bg-kumo-base\" />\n          </BaseRadio.Indicator>\n        </BaseRadio.Root>\n        <span className=\"text-base text-kumo-default\">{label}</span>\n      </label>\n    );\n  },\n);\n\nRadioItem.displayName = \"Radio.Item\";\n\n// Radio.Group with built-in Fieldset and RadioGroup\nfunction RadioGroup({\n  legend,\n  children,\n  orientation = \"vertical\",\n  appearance = \"default\",\n  error,\n  description,\n  defaultValue,\n  value,\n  onValueChange,\n  disabled,\n  controlPosition = \"start\",\n  name,\n  className,\n}: RadioGroupProps) {\n  return (\n    <RadioGroupContext.Provider value={{ controlPosition, appearance }}>\n      <BaseRadioGroup\n        defaultValue={defaultValue}\n        value={value}\n        onValueChange={(newValue) => onValueChange?.(newValue)}\n        disabled={disabled}\n        name={name}\n      >\n        <Fieldset.Root\n          disabled={disabled}\n          className={cn(\"flex flex-col gap-4\", className)}\n        >\n          <Fieldset.Legend className=\"text-base font-medium text-kumo-default\">\n            {legend}\n          </Fieldset.Legend>\n          <div\n            className={cn(\n              orientation === \"vertical\"\n                ? cn(\"flex flex-col\", appearance === \"card\" ? \"gap-3\" : \"gap-2\")\n                : appearance === \"card\"\n                  ? \"grid grid-cols-2 gap-3\"\n                  : \"flex flex-row flex-wrap gap-2\",\n            )}\n          >\n            {children}\n          </div>\n          {error && <p className=\"text-sm text-kumo-danger\">{error}</p>}\n          {description && (\n            <p className=\"text-sm text-kumo-subtle\">{description}</p>\n          )}\n        </Fieldset.Root>\n      </BaseRadioGroup>\n    </RadioGroupContext.Provider>\n  );\n}\n\nRadioGroup.displayName = \"Radio.Group\";\n\n// Export RadioGroup directly for external usage\nexport { RadioGroup };\n\n/**\n * Radio — radio button group for single-select choices.\n *\n * Compound component: `Radio.Group` (with built-in Fieldset) and `Radio.Item`.\n * Built on `@base-ui/react/radio-group` + `@base-ui/react/radio`.\n *\n * @example\n * ```tsx\n * <Radio.Group legend=\"Notification preference\" defaultValue=\"email\">\n *   <Radio.Item label=\"Email\" value=\"email\" />\n *   <Radio.Item label=\"SMS\" value=\"sms\" />\n *   <Radio.Item label=\"Push\" value=\"push\" />\n * </Radio.Group>\n * ```\n */\nexport const Radio = Object.assign(RadioGroup, {\n  Item: RadioItem,\n  Group: RadioGroup,\n});\n"],"names":["KUMO_RADIO_VARIANTS","KUMO_RADIO_DEFAULT_VARIANTS","radioVariants","variant","appearance","cn","RadioGroupContext","createContext","RadioItem","forwardRef","className","disabled","appearanceProp","label","description","value","ref","controlPosition","groupAppearance","useContext","isCard","effectiveControlPosition","jsxs","jsx","BaseRadio.Root","BaseRadio.Indicator","RadioGroup","legend","children","orientation","error","defaultValue","onValueChange","name","BaseRadioGroup","newValue","Fieldset.Root","Fieldset.Legend","Radio"],"mappings":"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"}