@cloudflare/kumo 2.0.1 → 2.0.3

package/dist/chunks/{autocomplete-48aq0d244bs2e8zv.js → autocomplete-ln55iimq2n2s5uex.js}

@@ -1,19 +1,20 @@
 "use client";
 import { jsx as t, jsxs as A } from "react/jsx-runtime";
 import { CheckIcon as g } from "@phosphor-icons/react";
-import { K as c, i as y } from "./input-ncfowphv81yq7fyy.js";
+import { K as u, i as y } from "./input-2y9vg81trmamkb6k.js";
 import { c as s } from "./cn-ct4n7r74mh8y0f48.js";
-import { F as C } from "./field-c0wf94plit2gci59.js";
-import { a6 as I, ab as T, bu as k, a8 as v, S as G, a9 as L, aa as O, bt as P, am as _, an as w, ao as z, ac as E } from "./vendor-base-ui-ie71jahf0czyf58j.js";
-const D = {
-  size: c.size
-}, u = {
+import { r as C } from "./resolve-variant-gw6eh7fa4st8ej7m.js";
+import { F as I } from "./field-dgf36p7cmz1crlnu.js";
+import { a6 as v, ab as T, bu as k, a8 as z, S as G, a9 as L, aa as O, bt as P, am as _, an as w, ao as E, ac as S } from "./vendor-base-ui-ie71jahf0czyf58j.js";
+const q = {
+  size: u.size
+}, l = {
   size: "base"
 };
-function $({
-  size: o = u.size
+function B({
+  size: o = l.size
 } = {}) {
-  return s(c.size[o].classes);
+  return s(C(u.size, o, l.size).classes);
 }
 function p({
   label: o,
@@ -24,26 +25,26 @@ function p({
   children: n,
   ...i
 }) {
-  const l = /* @__PURE__ */ t(k, { ...i, children: n });
+  const c = /* @__PURE__ */ t(k, { ...i, children: n });
   return o ? /* @__PURE__ */ t(
-    C,
+    I,
     {
       label: o,
       required: e,
       labelTooltip: r,
       description: m,
       error: a ? typeof a == "string" ? { message: a, match: !0 } : a : void 0,
-      children: l
+      children: c
     }
-  ) : l;
+  ) : c;
 }
 function d({
   className: o,
-  size: e = u.size,
+  size: e = l.size,
   placeholder: r
 }) {
   return /* @__PURE__ */ t(
-    E,
+    S,
     {
       className: s(
         y({ size: e, focusIndicator: !0 }),
@@ -71,7 +72,7 @@ function b({
       alignOffset: a,
       side: n,
       children: /* @__PURE__ */ t(
-        z,
+        E,
         {
           className: (i) => s(
             "flex flex-col",
@@ -87,12 +88,12 @@ function b({
     }
   ) });
 }
-function S({
+function U({
   className: o,
   ...e
 }) {
   return /* @__PURE__ */ t(
-    v,
+    z,
     {
       ...e,
       className: s(
@@ -152,7 +153,7 @@ f.displayName = "Autocomplete.Item";
 x.displayName = "Autocomplete.GroupLabel";
 N.displayName = "Autocomplete.Group";
 h.displayName = "Autocomplete.Separator";
-const q = Object.assign(p, {
+const H = Object.assign(p, {
   // Styled compound sub-components
   InputGroup: d,
   Content: b,
@@ -160,15 +161,15 @@ const q = Object.assign(p, {
   GroupLabel: x,
   Group: N,
   Separator: h,
-  List: S,
+  List: U,
   // Pass-through Base UI sub-components
   Empty: T,
-  Collection: I
+  Collection: v
 });
 export {
-  q as A,
-  D as K,
-  $ as a,
-  u as b
+  H as A,
+  q as K,
+  B as a,
+  l as b
 };
-//# sourceMappingURL=autocomplete-48aq0d244bs2e8zv.js.map
+//# sourceMappingURL=autocomplete-ln55iimq2n2s5uex.js.map

package/dist/chunks/autocomplete-ln55iimq2n2s5uex.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"autocomplete-ln55iimq2n2s5uex.js","sources":["../../src/components/autocomplete/autocomplete.tsx"],"sourcesContent":["import { Autocomplete as AutocompleteBase } from \"@base-ui/react/autocomplete\";\nimport { CheckIcon } from \"@phosphor-icons/react\";\nimport { type ReactNode } from \"react\";\nimport { inputVariants, KUMO_INPUT_VARIANTS } from \"../input/input\";\nimport { cn } from \"../../utils/cn\";\nimport { resolveVariant } from \"../../utils/resolve-variant\";\nimport { Field, type FieldErrorMatch } from \"../field/field\";\n\n/** Autocomplete variant definitions. */\nexport const KUMO_AUTOCOMPLETE_VARIANTS = {\n  size: KUMO_INPUT_VARIANTS.size,\n} as const;\n\nexport const KUMO_AUTOCOMPLETE_DEFAULT_VARIANTS = {\n  size: \"base\",\n} as const;\n\n// Derived types from KUMO_AUTOCOMPLETE_VARIANTS\nexport type KumoAutocompleteSize = keyof typeof KUMO_AUTOCOMPLETE_VARIANTS.size;\n\nexport interface KumoAutocompleteVariantsProps {\n  /**\n   * Size of the autocomplete input. Matches Input component sizes.\n   * - `\"xs\"` — Extra small for compact UIs (h-5 / 20px)\n   * - `\"sm\"` — Small for secondary fields (h-6.5 / 26px)\n   * - `\"base\"` — Default size (h-9 / 36px)\n   * - `\"lg\"` — Large for prominent fields (h-10 / 40px)\n   * @default \"base\"\n   */\n  size?: KumoAutocompleteSize;\n}\n\nexport function autocompleteVariants({\n  size = KUMO_AUTOCOMPLETE_DEFAULT_VARIANTS.size,\n}: KumoAutocompleteVariantsProps = {}) {\n  return cn(resolveVariant(KUMO_INPUT_VARIANTS.size, size, KUMO_AUTOCOMPLETE_DEFAULT_VARIANTS.size).classes);\n}\n\n/**\n * Autocomplete component props.\n *\n * Autocomplete provides a free-form text input with optional suggestions in a\n * filterable dropdown. Unlike Combobox, the input value is not constrained to\n * the suggestion list items.\n *\n * @example\n * ```tsx\n * <Autocomplete label=\"Country\" items={countries}>\n *   <Autocomplete.InputGroup />\n *   <Autocomplete.Content>\n *     <Autocomplete.List>\n *       {(item) => <Autocomplete.Item value={item}>{item}</Autocomplete.Item>}\n *     </Autocomplete.List>\n *   </Autocomplete.Content>\n * </Autocomplete>\n * ```\n */\nexport interface AutocompleteProps {\n  /** Array of items to display in the dropdown */\n  items: unknown[];\n  /** The controlled input value */\n  value?: string | number | string[];\n  /** The uncontrolled default input value */\n  defaultValue?: string | number | string[];\n  /** Callback when the input value changes */\n  onValueChange?: AutocompleteBase.Root.Props<unknown>[\"onValueChange\"];\n  /** Whether the popup is open (controlled) */\n  open?: boolean;\n  /** Callback when the popup opens or closes */\n  onOpenChange?: AutocompleteBase.Root.Props<unknown>[\"onOpenChange\"];\n  /** Autocomplete content (input group, popup content) */\n  children: ReactNode;\n  /** Additional CSS classes */\n  className?: string;\n  /** Label content (enables Field wrapper) */\n  label?: ReactNode;\n  /** Whether the field is required */\n  required?: boolean;\n  /** Tooltip content to display next to the label */\n  labelTooltip?: ReactNode;\n  /** Helper text displayed below the field */\n  description?: ReactNode;\n  /** Error message or validation error object */\n  error?: string | { message: ReactNode; match: FieldErrorMatch };\n}\n\nfunction Root<ItemValue>({\n  label,\n  required,\n  labelTooltip,\n  description,\n  error,\n  children,\n  ...props\n}: AutocompleteBase.Root.Props<ItemValue> & {\n  label?: ReactNode;\n  required?: boolean;\n  labelTooltip?: ReactNode;\n  description?: ReactNode;\n  error?: string | { message: ReactNode; match: FieldErrorMatch };\n}) {\n  const rootProps = props as Omit<\n    AutocompleteBase.Root.Props<ItemValue>,\n    \"items\"\n  > & {\n    items?: readonly ItemValue[];\n  };\n  const control = (\n    <AutocompleteBase.Root {...rootProps}>{children}</AutocompleteBase.Root>\n  );\n\n  if (label) {\n    return (\n      <Field\n        label={label}\n        required={required}\n        labelTooltip={labelTooltip}\n        description={description}\n        error={\n          error\n            ? typeof error === \"string\"\n              ? { message: error, match: true }\n              : error\n            : undefined\n        }\n      >\n        {control}\n      </Field>\n    );\n  }\n\n  return control;\n}\n\nfunction InputGroup({\n  className,\n  size = KUMO_AUTOCOMPLETE_DEFAULT_VARIANTS.size,\n  placeholder,\n}: {\n  className?: string;\n  size?: KumoAutocompleteSize;\n  placeholder?: string;\n}) {\n  return (\n    <AutocompleteBase.Input\n      className={cn(\n        inputVariants({ size, focusIndicator: true }),\n        \"w-full\",\n        className,\n      )}\n      placeholder={placeholder}\n    />\n  );\n}\n\nfunction Content({\n  children,\n  className,\n  align = \"start\",\n  sideOffset = 4,\n  alignOffset,\n  side,\n}: {\n  children?: ReactNode;\n  className?: string;\n  align?: AutocompleteBase.Positioner.Props[\"align\"];\n  alignOffset?: AutocompleteBase.Positioner.Props[\"alignOffset\"];\n  side?: AutocompleteBase.Positioner.Props[\"side\"];\n  sideOffset?: AutocompleteBase.Positioner.Props[\"sideOffset\"];\n}) {\n  return (\n    <AutocompleteBase.Portal>\n      <AutocompleteBase.Positioner\n        className=\"outline-none\"\n        align={align}\n        sideOffset={sideOffset}\n        alignOffset={alignOffset}\n        side={side}\n      >\n        <AutocompleteBase.Popup\n          className={(state: AutocompleteBase.Popup.State) =>\n            cn(\n              \"flex flex-col\",\n              \"max-h-[min(var(--available-height),24rem)] max-w-(--available-width) min-w-(--anchor-width) py-1.5\",\n              \"bg-kumo-control text-kumo-default\",\n              \"rounded-lg shadow-lg ring ring-kumo-line\",\n              state.empty && \"hidden\",\n              className,\n            )\n          }\n        >\n          {children}\n        </AutocompleteBase.Popup>\n      </AutocompleteBase.Positioner>\n    </AutocompleteBase.Portal>\n  );\n}\n\nfunction List({\n  className,\n  ...props\n}: AutocompleteBase.List.Props & { className?: string }) {\n  return (\n    <AutocompleteBase.List\n      {...props}\n      className={cn(\n        \"min-h-0 flex-1 overflow-y-auto overscroll-contain scroll-pt-2 scroll-pb-2\",\n        className,\n      )}\n    />\n  );\n}\n\nfunction Item({ children, ...props }: AutocompleteBase.Item.Props) {\n  return (\n    <AutocompleteBase.Item\n      {...props}\n      className=\"group mx-1.5 grid cursor-pointer grid-cols-[1fr_16px] gap-2 rounded px-2 py-1.5 text-base data-highlighted:bg-kumo-overlay data-selected:font-medium\"\n    >\n      <div className=\"col-start-1\">{children}</div>\n      <span className=\"col-start-2 hidden items-center group-data-selected:flex\">\n        <CheckIcon size={14} />\n      </span>\n    </AutocompleteBase.Item>\n  );\n}\n\nfunction GroupLabel(props: AutocompleteBase.GroupLabel.Props) {\n  return (\n    <AutocompleteBase.GroupLabel\n      {...props}\n      className={cn(\n        \"mx-1.5 px-2 py-1.5 text-sm text-kumo-strong\",\n        props.className,\n      )}\n    />\n  );\n}\n\nfunction Group(props: AutocompleteBase.Group.Props) {\n  return (\n    <AutocompleteBase.Group\n      {...props}\n      className=\"border-t border-kumo-line mt-2 pt-2 first:border-t-0 first:mt-0 first:pt-0\"\n    />\n  );\n}\n\nfunction Separator(props: AutocompleteBase.Separator.Props) {\n  return (\n    <AutocompleteBase.Separator\n      {...props}\n      className={cn(\"mx-0 my-1 h-px bg-kumo-line\", props.className)}\n    />\n  );\n}\n\nRoot.displayName = \"Autocomplete.Root\";\nInputGroup.displayName = \"Autocomplete.InputGroup\";\nContent.displayName = \"Autocomplete.Content\";\nItem.displayName = \"Autocomplete.Item\";\nGroupLabel.displayName = \"Autocomplete.GroupLabel\";\nGroup.displayName = \"Autocomplete.Group\";\nSeparator.displayName = \"Autocomplete.Separator\";\n\n/**\n * Autocomplete — free-form text input with an optional filtered suggestion list.\n *\n * Unlike Combobox, the input value is not restricted to items in the list.\n * Use Combobox when the selected value must come from the list.\n *\n * Compound component: `Autocomplete` (Root), `.InputGroup`, `.Content`, `.Item`,\n * `.GroupLabel`, `.Group`, `.Separator`, `.List`, `.Collection`.\n *\n * `InputGroup` renders the text input with Input component styling.\n * Pass a `size` prop to `InputGroup` to match the Input component sizes.\n *\n * @example\n * ```tsx\n * <Autocomplete items={fruits} label=\"Fruit\">\n *   <Autocomplete.InputGroup size=\"base\" />\n *   <Autocomplete.Content>\n *     <Autocomplete.List>\n *       {(item) => <Autocomplete.Item value={item}>{item}</Autocomplete.Item>}\n *     </Autocomplete.List>\n *   </Autocomplete.Content>\n * </Autocomplete>\n * ```\n *\n * @see https://base-ui.com/react/components/autocomplete\n */\nexport const Autocomplete = Object.assign(Root, {\n  // Styled compound sub-components\n  InputGroup,\n  Content,\n  Item,\n  GroupLabel,\n  Group,\n  Separator,\n  List,\n\n  // Pass-through Base UI sub-components\n  Empty: AutocompleteBase.Empty,\n  Collection: AutocompleteBase.Collection,\n});\n"],"names":["KUMO_AUTOCOMPLETE_VARIANTS","KUMO_INPUT_VARIANTS","KUMO_AUTOCOMPLETE_DEFAULT_VARIANTS","autocompleteVariants","size","cn","resolveVariant","Root","label","required","labelTooltip","description","error","children","props","control","jsx","AutocompleteBase.Root","Field","InputGroup","className","placeholder","AutocompleteBase.Input","inputVariants","Content","align","sideOffset","alignOffset","side","AutocompleteBase.Portal","AutocompleteBase.Positioner","AutocompleteBase.Popup","state","List","AutocompleteBase.List","Item","jsxs","AutocompleteBase.Item","CheckIcon","GroupLabel","AutocompleteBase.GroupLabel","Group","AutocompleteBase.Group","Separator","AutocompleteBase.Separator","Autocomplete","AutocompleteBase.Empty","AutocompleteBase.Collection"],"mappings":"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"}

package/dist/chunks/{badge-dan90i0rzy4pwa1j.js → badge-kqox9toi0sygfbno.js}

@@ -1,7 +1,8 @@
 "use client";
-import { jsx as i } from "react/jsx-runtime";
-import { c as r } from "./cn-ct4n7r74mh8y0f48.js";
-const o = "inline-flex w-fit flex-none shrink-0 items-center justify-self-start rounded-full px-2 py-0.5 text-xs font-medium whitespace-nowrap", s = {
+import { jsx as n } from "react/jsx-runtime";
+import { c as a } from "./cn-ct4n7r74mh8y0f48.js";
+import { r as i } from "./resolve-variant-gw6eh7fa4st8ej7m.js";
+const o = "inline-flex w-fit flex-none shrink-0 items-center justify-self-start rounded-full px-2 py-0.5 text-xs font-medium whitespace-nowrap", d = {
   variant: {
     /** Semantic token badges */
     primary: {
@@ -74,29 +75,28 @@ const o = "inline-flex w-fit flex-none shrink-0 items-center justify-self-start
       description: "Blue badge"
     }
   }
-}, a = {
+}, t = {
   variant: "primary"
 };
-function d({
-  variant: e = a.variant
+function b({
+  variant: e = t.variant
 } = {}) {
-  const t = s.variant[e];
-  return r(
+  return a(
     // Base styles (exported as KUMO_BADGE_BASE_STYLES for Figma plugin)
     o,
     // Apply variant styles from KUMO_BADGE_VARIANTS (fallback to primary if variant not found)
-    t?.classes ?? s.variant[a.variant].classes
+    i(d.variant, e, t.variant).classes
   );
 }
-function g({
-  variant: e = a.variant,
-  className: t,
-  children: n
+function l({
+  variant: e = t.variant,
+  className: s,
+  children: r
 }) {
-  return /* @__PURE__ */ i("span", { className: r(d({ variant: e }), t), children: n });
+  return /* @__PURE__ */ n("span", { className: a(b({ variant: e }), s), children: r });
 }
 export {
-  g as B,
+  l as B,
   o as K
 };
-//# sourceMappingURL=badge-dan90i0rzy4pwa1j.js.map
+//# sourceMappingURL=badge-kqox9toi0sygfbno.js.map

package/dist/chunks/badge-kqox9toi0sygfbno.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge-kqox9toi0sygfbno.js","sources":["../../src/components/badge/badge.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { resolveVariant } from \"../../utils/resolve-variant\";\n\n/** Base styles applied to all badge variants. */\nexport const KUMO_BADGE_BASE_STYLES =\n  \"inline-flex w-fit flex-none shrink-0 items-center justify-self-start rounded-full px-2 py-0.5 text-xs font-medium whitespace-nowrap\";\n\n/** Badge variant definitions mapping variant names to their Tailwind classes and descriptions. */\nexport const KUMO_BADGE_VARIANTS = {\n  variant: {\n    /** Semantic token badges */\n    primary: {\n      classes: \"bg-kumo-badge-inverted text-kumo-badge-inverted\",\n      description: \"Primary badge\",\n    },\n    secondary: {\n      classes: \"bg-kumo-fill text-kumo-badge-neutral-subtle\",\n      description: \"Secondary badge\",\n    },\n    error: {\n      classes: \"bg-kumo-danger-tint/60 text-kumo-danger\",\n      description: \"Error badge\",\n    },\n    warning: {\n      classes: \"bg-kumo-warning-tint/70 text-kumo-warning\",\n      description: \"Warning badge\",\n    },\n    success: {\n      classes: \"bg-kumo-success-tint/70 text-kumo-success\",\n      description: \"Success badge\",\n    },\n    destructive: {\n      classes: \"bg-kumo-badge-red text-white\",\n      description: \"Deprecated. Use red instead.\",\n    },\n    info: {\n      classes: \"bg-kumo-info-tint/70 text-kumo-info\",\n      description: \"Info badge\",\n    },\n    beta: {\n      classes:\n        \"border border-dashed border-kumo-brand bg-transparent text-kumo-link\",\n      description: \"Indicates beta or experimental features\",\n    },\n    outline: {\n      classes: \"border border-kumo-fill bg-transparent text-kumo-default\",\n      description: \"Bordered badge with transparent background\",\n    },\n\n    /** Other color token variants */\n\n    red: {\n      classes: \"bg-kumo-badge-red text-white\",\n      description: \"Red badge\",\n    },\n    green: {\n      classes: \"bg-kumo-badge-green text-white\",\n      description: \"Green badge\",\n    },\n    neutral: {\n      classes: \"bg-kumo-badge-neutral text-white\",\n      description: \"Neutral badge\",\n    },\n    orange: {\n      classes: \"bg-kumo-badge-orange text-black\",\n      description: \"Orange badge\",\n    },\n    purple: {\n      classes: \"bg-kumo-badge-purple text-white\",\n      description: \"Purple badge\",\n    },\n    teal: {\n      classes: \"bg-kumo-badge-teal text-white\",\n      description: \"Teal badge\",\n    },\n    \"teal-subtle\": {\n      classes: \"bg-kumo-badge-teal-subtle text-kumo-badge-teal-subtle\",\n      description: \"Subtle teal badge\",\n    },\n    blue: {\n      classes: \"bg-kumo-badge-blue text-white\",\n      description: \"Blue badge\",\n    },\n  },\n} as const;\n\nexport const KUMO_BADGE_DEFAULT_VARIANTS = {\n  variant: \"primary\",\n} as const;\n\n// Derived types from KUMO_BADGE_VARIANTS\nexport type KumoBadgeVariant = keyof typeof KUMO_BADGE_VARIANTS.variant;\n\nexport interface KumoBadgeVariantsProps {\n  variant?: KumoBadgeVariant;\n}\n\nexport function badgeVariants({\n  variant = KUMO_BADGE_DEFAULT_VARIANTS.variant,\n}: KumoBadgeVariantsProps = {}) {\n  return cn(\n    // Base styles (exported as KUMO_BADGE_BASE_STYLES for Figma plugin)\n    KUMO_BADGE_BASE_STYLES,\n    // Apply variant styles from KUMO_BADGE_VARIANTS (fallback to primary if variant not found)\n    resolveVariant(KUMO_BADGE_VARIANTS.variant, variant, KUMO_BADGE_DEFAULT_VARIANTS.variant).classes,\n  );\n}\n\n// Legacy type alias for backwards compatibility\nexport type BadgeVariant = KumoBadgeVariant;\n\n/**\n * Badge component props.\n *\n * @example\n * ```tsx\n * <Badge variant=\"green\">Active</Badge>\n * <Badge variant=\"red\">Error</Badge>\n * <Badge variant=\"neutral\">Inactive</Badge>\n * ```\n */\nexport interface BadgeProps {\n  /**\n   * Color variant of the badge.\n   * Recommended semantic variants:\n   * - `\"primary\"` — Primary badge\n   * - `\"secondary\"` — Secondary badge\n   * - `\"error\"` — Error badge\n   * - `\"warning\"` — Warning badge\n   * - `\"success\"` — Success badge\n   * - `\"info\"` — Info badge\n   *\n   * Additional token variants:\n   * - `\"red\"`, `\"orange\"`, `\"green\"`, `\"teal\"`, `\"blue\"`, `\"purple\"`, `\"neutral\"`\n   * - `\"teal-subtle\"`, `\"neutral-subtle\"`\n   * - `\"inverted\"`\n   * - `\"outline\"` — Bordered badge with transparent background\n   * - `\"beta\"` — Dashed-border badge for beta/experimental features\n   * @default \"secondary\"\n   */\n  variant?: KumoBadgeVariant;\n  /** Additional CSS classes merged via `cn()`. */\n  className?: string;\n  /** Content rendered inside the badge. */\n  children: ReactNode;\n}\n\n/**\n * Small status label for categorizing or highlighting content.\n *\n * @example\n * ```tsx\n * <Badge variant=\"green\">Active</Badge>\n * ```\n */\nexport function Badge({\n  variant = KUMO_BADGE_DEFAULT_VARIANTS.variant,\n  className,\n  children,\n}: BadgeProps) {\n  return (\n    <span className={cn(badgeVariants({ variant }), className)}>\n      {children}\n    </span>\n  );\n}\n"],"names":["KUMO_BADGE_BASE_STYLES","KUMO_BADGE_VARIANTS","KUMO_BADGE_DEFAULT_VARIANTS","badgeVariants","variant","cn","resolveVariant","Badge","className","children","jsx"],"mappings":";;;;AAKO,MAAMA,IACX,uIAGWC,IAAsB;AAAA,EACjC,SAAS;AAAA;AAAA,IAEP,SAAS;AAAA,MACP,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,WAAW;AAAA,MACT,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,OAAO;AAAA,MACL,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,SAAS;AAAA,MACP,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,SAAS;AAAA,MACP,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,aAAa;AAAA,MACX,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,MAAM;AAAA,MACJ,SACE;AAAA,MACF,aAAa;AAAA,IAAA;AAAA,IAEf,SAAS;AAAA,MACP,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA;AAAA,IAKf,KAAK;AAAA,MACH,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,OAAO;AAAA,MACL,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,SAAS;AAAA,MACP,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,QAAQ;AAAA,MACN,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,QAAQ;AAAA,MACN,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,eAAe;AAAA,MACb,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,EACf;AAEJ,GAEaC,IAA8B;AAAA,EACzC,SAAS;AACX;AASO,SAASC,EAAc;AAAA,EAC5B,SAAAC,IAAUF,EAA4B;AACxC,IAA4B,IAAI;AAC9B,SAAOG;AAAA;AAAA,IAELL;AAAA;AAAA,IAEAM,EAAeL,EAAoB,SAASG,GAASF,EAA4B,OAAO,EAAE;AAAA,EAAA;AAE9F;AAiDO,SAASK,EAAM;AAAA,EACpB,SAAAH,IAAUF,EAA4B;AAAA,EACtC,WAAAM;AAAA,EACA,UAAAC;AACF,GAAe;AACb,SACE,gBAAAC,EAAC,QAAA,EAAK,WAAWL,EAAGF,EAAc,EAAE,SAAAC,GAAS,GAAGI,CAAS,GACtD,UAAAC,EAAA,CACH;AAEJ;"}

package/dist/chunks/{banner-eiwcnk7ts21s3bnb.js → banner-eux4y8xaogjg64af.js}

@@ -1,8 +1,9 @@
 "use client";
-import { jsxs as i, jsx as s } from "react/jsx-runtime";
-import { forwardRef as p, isValidElement as g } from "react";
+import { jsxs as i, jsx as n } from "react/jsx-runtime";
+import { forwardRef as h, isValidElement as g } from "react";
 import { c as r } from "./cn-ct4n7r74mh8y0f48.js";
-const E = "flex w-full items-start gap-3 rounded-lg border px-4 py-3 text-base", x = {
+import { r as k } from "./resolve-variant-gw6eh7fa4st8ej7m.js";
+const E = "flex w-full items-start gap-3 rounded-lg border px-4 py-3 text-base", N = {
   variant: {
     default: {
       classes: "bg-kumo-info-tint/30 border-kumo-info/50 text-kumo-info selection:bg-kumo-info",
@@ -20,60 +21,60 @@ const E = "flex w-full items-start gap-3 rounded-lg border px-4 py-3 text-base",
       description: "Error banner for critical issues"
     }
   }
-}, k = {
+}, t = {
   variant: "default"
 };
-function f({
-  variant: e = k.variant
+function x({
+  variant: e = t.variant
 } = {}) {
   return r(
     // Base styles (exported as KUMO_BANNER_BASE_STYLES for Figma plugin)
     E,
     // Apply variant styles from KUMO_BANNER_VARIANTS
-    x.variant[e].classes
+    k(N.variant, e, t.variant).classes
   );
 }
 var R = /* @__PURE__ */ ((e) => (e[e.DEFAULT = 0] = "DEFAULT", e[e.ALERT = 1] = "ALERT", e[e.ERROR = 2] = "ERROR", e))(R || {});
-const v = p(function({
+const A = h(function({
   icon: a,
-  title: t,
-  description: n,
-  action: c,
-  children: N,
-  text: b,
-  variant: o = k.variant,
-  className: m
-}, d) {
-  const u = x.variant[o];
-  if (t || n)
-    return /* @__PURE__ */ i("div", { ref: d, className: r(f({ variant: o }), m), children: [
-      a && /* @__PURE__ */ s(
+  title: o,
+  description: s,
+  action: m,
+  children: b,
+  text: p,
+  variant: l = t.variant,
+  className: d
+}, u) {
+  const f = k(N.variant, l, t.variant);
+  if (o || s)
+    return /* @__PURE__ */ i("div", { ref: u, className: r(x({ variant: l }), d), children: [
+      a && /* @__PURE__ */ n(
         "span",
         {
           className: r(
             "shrink-0 flex items-center h-[1.375em]",
-            u.iconClasses
+            f.iconClasses
           ),
           children: a
         }
       ),
       /* @__PURE__ */ i("div", { className: "flex min-w-0 flex-1 items-center justify-between gap-3", children: [
         /* @__PURE__ */ i("div", { className: "flex flex-col gap-0.5", children: [
-          t && /* @__PURE__ */ s("p", { className: "font-medium leading-snug", children: t }),
-          n && /* @__PURE__ */ s("div", { className: "text-sm leading-snug", children: g(n) ? n : /* @__PURE__ */ s("p", { children: n }) })
+          o && /* @__PURE__ */ n("p", { className: "font-medium leading-snug", children: o }),
+          s && /* @__PURE__ */ n("div", { className: "text-sm leading-snug", children: g(s) ? s : /* @__PURE__ */ n("p", { children: s }) })
         ] }),
-        c && /* @__PURE__ */ s("div", { className: "flex shrink-0 items-center gap-2", children: c })
+        m && /* @__PURE__ */ n("div", { className: "flex shrink-0 items-center gap-2", children: m })
       ] })
     ] });
-  const l = N ?? b, h = g(l) ? l : /* @__PURE__ */ s("p", { children: l });
-  return /* @__PURE__ */ i("div", { ref: d, className: r(f({ variant: o }), m), children: [
-    a && /* @__PURE__ */ s("span", { className: r("shrink-0", u.iconClasses), children: a }),
-    h
+  const c = b ?? p, v = g(c) ? c : /* @__PURE__ */ n("p", { children: c });
+  return /* @__PURE__ */ i("div", { ref: u, className: r(x({ variant: l }), d), children: [
+    a && /* @__PURE__ */ n("span", { className: r("shrink-0", f.iconClasses), children: a }),
+    v
   ] });
 });
-v.displayName = "Banner";
+A.displayName = "Banner";
 export {
-  v as B,
+  A as B,
   R as a
 };
-//# sourceMappingURL=banner-eiwcnk7ts21s3bnb.js.map
+//# sourceMappingURL=banner-eux4y8xaogjg64af.js.map

package/dist/chunks/banner-eux4y8xaogjg64af.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"banner-eux4y8xaogjg64af.js","sources":["../../src/components/banner/banner.tsx"],"sourcesContent":["import { type ReactNode, isValidElement, forwardRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { resolveVariant } from \"../../utils/resolve-variant\";\n\n/** Base styles applied to all banner variants. */\nexport const KUMO_BANNER_BASE_STYLES =\n  \"flex w-full items-start gap-3 rounded-lg border px-4 py-3 text-base\";\n\n/** Banner variant definitions mapping variant names to their Tailwind classes and descriptions. */\nexport const KUMO_BANNER_VARIANTS = {\n  variant: {\n    default: {\n      classes:\n        \"bg-kumo-info-tint/30 border-kumo-info/50 text-kumo-info selection:bg-kumo-info\",\n      iconClasses: \"text-kumo-info\",\n      description: \"Informational banner for general messages\",\n    },\n    alert: {\n      classes:\n        \"bg-kumo-warning-tint/15 border-kumo-warning/50 text-kumo-warning selection:bg-kumo-warning\",\n      iconClasses: \"text-kumo-warning\",\n      description: \"Warning banner for cautionary messages\",\n    },\n    error: {\n      classes:\n        \"bg-kumo-danger-tint/15 border-kumo-danger/50 text-kumo-danger selection:bg-kumo-danger\",\n      iconClasses: \"text-kumo-danger\",\n      description: \"Error banner for critical issues\",\n    },\n  },\n} as const;\n\nexport const KUMO_BANNER_DEFAULT_VARIANTS = {\n  variant: \"default\",\n} as const;\n\n// Derived types from KUMO_BANNER_VARIANTS\nexport type KumoBannerVariant = keyof typeof KUMO_BANNER_VARIANTS.variant;\n\nexport interface KumoBannerVariantsProps {\n  /**\n   * Visual style of the banner.\n   * - `\"default\"` — Informational banner for general messages\n   * - `\"alert\"` — Warning banner for cautionary messages\n   * - `\"error\"` — Error banner for critical issues\n   * @default \"default\"\n   */\n  variant?: KumoBannerVariant;\n}\n\nexport function bannerVariants({\n  variant = KUMO_BANNER_DEFAULT_VARIANTS.variant,\n}: KumoBannerVariantsProps = {}) {\n  return cn(\n    // Base styles (exported as KUMO_BANNER_BASE_STYLES for Figma plugin)\n    KUMO_BANNER_BASE_STYLES,\n    // Apply variant styles from KUMO_BANNER_VARIANTS\n    resolveVariant(KUMO_BANNER_VARIANTS.variant, variant, KUMO_BANNER_DEFAULT_VARIANTS.variant).classes,\n  );\n}\n\n// Legacy enum for backwards compatibility\nexport enum BannerVariant {\n  DEFAULT,\n  ALERT,\n  ERROR,\n}\n\n/**\n * Banner component props.\n *\n * @example\n * ```tsx\n * <Banner title=\"Update available\" description=\"A new version is ready to install.\" />\n * <Banner variant=\"alert\" title=\"Session expiring\" description=\"Your session will expire soon.\" />\n * <Banner variant=\"error\" title=\"Save failed\" description=\"We couldn't save your changes.\" />\n * ```\n */\nexport interface BannerProps {\n  /** Icon element rendered before the banner content (e.g. from `@phosphor-icons/react`). */\n  icon?: ReactNode;\n  /** Primary heading text for the banner. Use for i18n string injection. */\n  title?: string;\n  /** Secondary description text displayed below the title. Use for i18n string injection. */\n  description?: ReactNode;\n  /** Action slot rendered at the trailing end of the banner (e.g. a CTA button or link). Only used in structured mode (with `title` or `description`). */\n  action?: ReactNode;\n  /** @deprecated Use `title` and `description` instead. Will be removed in a future major version. */\n  text?: string;\n  /** @deprecated Use `title` and `description` instead for better i18n support. */\n  children?: ReactNode;\n  /**\n   * Visual style of the banner.\n   * - `\"default\"` — Informational blue banner for general messages\n   * - `\"alert\"` — Warning yellow banner for cautionary messages\n   * - `\"error\"` — Error red banner for critical issues\n   * @default \"default\"\n   */\n  variant?: KumoBannerVariant;\n  /** Additional CSS classes merged via `cn()`. */\n  className?: string;\n}\n\n/**\n * Full-width message bar for informational, warning, or error notices.\n * Supports structured title/description for i18n, or simple children for basic usage.\n *\n * @example\n * ```tsx\n * // Structured (recommended for i18n)\n * <Banner\n *   variant=\"alert\"\n *   icon={<WarningCircle />}\n *   title=\"Review required\"\n *   description=\"Please review your billing information.\"\n * />\n *\n * // Simple (backwards compatible)\n * <Banner variant=\"alert\" icon={<WarningCircle />}>\n *   Review your billing information.\n * </Banner>\n * ```\n */\nexport const Banner = forwardRef<HTMLDivElement, BannerProps>(function Banner(\n  {\n    icon,\n    title,\n    description,\n    action,\n    children,\n    text,\n    variant = KUMO_BANNER_DEFAULT_VARIANTS.variant,\n    className,\n  },\n  ref,\n) {\n  const variantConfig = resolveVariant(KUMO_BANNER_VARIANTS.variant, variant, KUMO_BANNER_DEFAULT_VARIANTS.variant);\n\n  // Structured mode: title and/or description provided\n  if (title || description) {\n    return (\n      <div ref={ref} className={cn(bannerVariants({ variant }), className)}>\n        {icon && (\n          <span\n            className={cn(\n              \"shrink-0 flex items-center h-[1.375em]\",\n              variantConfig.iconClasses,\n            )}\n          >\n            {icon}\n          </span>\n        )}\n        <div className=\"flex min-w-0 flex-1 items-center justify-between gap-3\">\n          <div className=\"flex flex-col gap-0.5\">\n            {title && <p className=\"font-medium leading-snug\">{title}</p>}\n            {description && (\n              <div className=\"text-sm leading-snug\">\n                {isValidElement(description) ? (\n                  description\n                ) : (\n                  <p>{description}</p>\n                )}\n              </div>\n            )}\n          </div>\n          {action && (\n            <div className=\"flex shrink-0 items-center gap-2\">{action}</div>\n          )}\n        </div>\n      </div>\n    );\n  }\n\n  // Legacy mode: children or text prop\n  const value = children ?? text;\n  const content = isValidElement(value) ? value : <p>{value}</p>;\n\n  return (\n    <div ref={ref} className={cn(bannerVariants({ variant }), className)}>\n      {icon && (\n        <span className={cn(\"shrink-0\", variantConfig.iconClasses)}>\n          {icon}\n        </span>\n      )}\n      {content}\n    </div>\n  );\n});\n\nBanner.displayName = \"Banner\";\n"],"names":["KUMO_BANNER_BASE_STYLES","KUMO_BANNER_VARIANTS","KUMO_BANNER_DEFAULT_VARIANTS","bannerVariants","variant","cn","resolveVariant","BannerVariant","Banner","forwardRef","icon","title","description","action","children","text","className","ref","variantConfig","jsxs","jsx","isValidElement","value","content"],"mappings":";;;;;AAKO,MAAMA,IACX,uEAGWC,IAAuB;AAAA,EAClC,SAAS;AAAA,IACP,SAAS;AAAA,MACP,SACE;AAAA,MACF,aAAa;AAAA,MACb,aAAa;AAAA,IAAA;AAAA,IAEf,OAAO;AAAA,MACL,SACE;AAAA,MACF,aAAa;AAAA,MACb,aAAa;AAAA,IAAA;AAAA,IAEf,OAAO;AAAA,MACL,SACE;AAAA,MACF,aAAa;AAAA,MACb,aAAa;AAAA,IAAA;AAAA,EACf;AAEJ,GAEaC,IAA+B;AAAA,EAC1C,SAAS;AACX;AAgBO,SAASC,EAAe;AAAA,EAC7B,SAAAC,IAAUF,EAA6B;AACzC,IAA6B,IAAI;AAC/B,SAAOG;AAAA;AAAA,IAELL;AAAA;AAAA,IAEAM,EAAeL,EAAqB,SAASG,GAASF,EAA6B,OAAO,EAAE;AAAA,EAAA;AAEhG;AAGO,IAAKK,sBAAAA,OACVA,EAAAA,EAAA,UAAA,CAAA,IAAA,WACAA,EAAAA,EAAA,QAAA,CAAA,IAAA,SACAA,EAAAA,EAAA,QAAA,CAAA,IAAA,SAHUA,IAAAA,KAAA,CAAA,CAAA;AA6DL,MAAMC,IAASC,EAAwC,SAC5D;AAAA,EACE,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAAC;AAAA,EACA,SAAAX,IAAUF,EAA6B;AAAA,EACvC,WAAAc;AACF,GACAC,GACA;AACA,QAAMC,IAAgBZ,EAAeL,EAAqB,SAASG,GAASF,EAA6B,OAAO;AAGhH,MAAIS,KAASC;AACX,WACE,gBAAAO,EAAC,OAAA,EAAI,KAAAF,GAAU,WAAWZ,EAAGF,EAAe,EAAE,SAAAC,EAAA,CAAS,GAAGY,CAAS,GAChE,UAAA;AAAA,MAAAN,KACC,gBAAAU;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAWf;AAAA,YACT;AAAA,YACAa,EAAc;AAAA,UAAA;AAAA,UAGf,UAAAR;AAAA,QAAA;AAAA,MAAA;AAAA,MAGL,gBAAAS,EAAC,OAAA,EAAI,WAAU,0DACb,UAAA;AAAA,QAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,yBACZ,UAAA;AAAA,UAAAR,KAAS,gBAAAS,EAAC,KAAA,EAAE,WAAU,4BAA4B,UAAAT,GAAM;AAAA,UACxDC,KACC,gBAAAQ,EAAC,OAAA,EAAI,WAAU,wBACZ,UAAAC,EAAeT,CAAW,IACzBA,IAEA,gBAAAQ,EAAC,KAAA,EAAG,UAAAR,EAAA,CAAY,EAAA,CAEpB;AAAA,QAAA,GAEJ;AAAA,QACCC,KACC,gBAAAO,EAAC,OAAA,EAAI,WAAU,oCAAoC,UAAAP,EAAA,CAAO;AAAA,MAAA,EAAA,CAE9D;AAAA,IAAA,GACF;AAKJ,QAAMS,IAAQR,KAAYC,GACpBQ,IAAUF,EAAeC,CAAK,IAAIA,IAAQ,gBAAAF,EAAC,OAAG,UAAAE,GAAM;AAE1D,SACE,gBAAAH,EAAC,OAAA,EAAI,KAAAF,GAAU,WAAWZ,EAAGF,EAAe,EAAE,SAAAC,EAAA,CAAS,GAAGY,CAAS,GAChE,UAAA;AAAA,IAAAN,KACC,gBAAAU,EAAC,UAAK,WAAWf,EAAG,YAAYa,EAAc,WAAW,GACtD,UAAAR,EAAA,CACH;AAAA,IAEDa;AAAA,EAAA,GACH;AAEJ,CAAC;AAEDf,EAAO,cAAc;"}

package/dist/chunks/{breadcrumbs-cxcwf2l1ki3ffg5d.js → breadcrumbs-do6uyvm4msqus0sz.js}

@@ -1,12 +1,13 @@
 "use client";
 import { jsxs as l, jsx as r } from "react/jsx-runtime";
-import { Children as h, cloneElement as d, isValidElement as k, useState as x, useEffect as C } from "react";
-import { CheckIcon as g, CopyIcon as w } from "@phosphor-icons/react";
-import { B as N } from "./button-6by9ntsa3nj553mq.js";
-import { S as y } from "./skeleton-line-epxenksfesr2fkcv.js";
-import { u as v } from "./link-provider-mn2voeohon7cj9o4.js";
-import { c as b } from "./cn-ct4n7r74mh8y0f48.js";
-const I = {
+import { Children as k, cloneElement as d, isValidElement as x, useState as C, useEffect as g } from "react";
+import { CheckIcon as w, CopyIcon as N } from "@phosphor-icons/react";
+import { B as y } from "./button-dh366jtvswxj0fw3.js";
+import { S as v } from "./skeleton-line-epxenksfesr2fkcv.js";
+import { u as I } from "./link-provider-mn2voeohon7cj9o4.js";
+import { c as f } from "./cn-ct4n7r74mh8y0f48.js";
+import { r as B } from "./resolve-variant-gw6eh7fa4st8ej7m.js";
+const L = {
   size: {
     sm: {
       classes: "text-sm h-10 gap-0.5",
@@ -17,15 +18,15 @@ const I = {
       description: "Default breadcrumbs size"
     }
   }
-}, B = {
+}, b = {
   size: "base"
 };
-function L({
-  size: t = B.size
+function A({
+  size: t = b.size
 } = {}) {
-  return b(
+  return f(
     "group mr-4 flex min-w-0 grow items-center overflow-hidden whitespace-nowrap",
-    I.size[t].classes
+    B(L.size, t, b.size).classes
   );
 }
 const u = ({
@@ -33,7 +34,7 @@ const u = ({
   icon: e,
   children: n
 }) => {
-  const s = v();
+  const s = I();
   return /* @__PURE__ */ l(
     s,
     {
@@ -53,7 +54,7 @@ function p({
 }) {
   return n ? /* @__PURE__ */ l("div", { className: "flex w-[125px] min-w-0 items-center gap-1", children: [
     e && /* @__PURE__ */ r("span", { className: "flex shrink-0 items-center", children: e }),
-    /* @__PURE__ */ r(y, {})
+    /* @__PURE__ */ r(v, {})
   ] }) : /* @__PURE__ */ l(
     "div",
     {
@@ -85,17 +86,17 @@ function c() {
     }
   );
 }
-function A() {
+function S() {
   return /* @__PURE__ */ r("span", { className: "flex shrink-0 items-center text-kumo-subtle", "aria-hidden": !0, children: "..." });
 }
-function S({ text: t }) {
-  const [e, n] = x(!1);
-  return C(() => {
+function E({ text: t }) {
+  const [e, n] = C(!1);
+  return g(() => {
     if (!e) return;
     const a = setTimeout(() => n(!1), 2e3);
     return () => clearTimeout(a);
   }, [e]), /* @__PURE__ */ r(
-    N,
+    y,
     {
       variant: "ghost",
       shape: "square",
@@ -111,7 +112,7 @@ function S({ text: t }) {
       },
       title: "Click to copy",
       "aria-label": "Copy",
-      children: e ? /* @__PURE__ */ r(g, { weight: "bold", className: "text-kumo-success" }) : /* @__PURE__ */ r(w, { weight: "regular" })
+      children: e ? /* @__PURE__ */ r(w, { weight: "bold", className: "text-kumo-success" }) : /* @__PURE__ */ r(N, { weight: "regular" })
     }
   );
 }
@@ -120,11 +121,11 @@ function m({
   size: e = "base",
   className: n
 }) {
-  const s = h.toArray(t), a = E(s);
+  const s = k.toArray(t), a = z(s);
   return /* @__PURE__ */ l(
     "nav",
     {
-      className: b(L({ size: e }), n),
+      className: f(A({ size: e }), n),
       "aria-label": "breadcrumb",
       children: [
         /* @__PURE__ */ r("div", { className: "contents sm:hidden", children: a }),
@@ -134,33 +135,33 @@ function m({
   );
 }
 function o(t, e) {
-  return k(t) && t.type === e;
+  return x(t) && t.type === e;
 }
-function E(t) {
+function z(t) {
   const e = t.filter(
     (i) => o(i, u) || o(i, p)
   );
   if (e.length <= 2)
     return t;
   const [n, s] = e.slice(-2), a = [
-    /* @__PURE__ */ r(A, {}, "kumo-breadcrumb-mobile-ellipsis"),
+    /* @__PURE__ */ r(S, {}, "kumo-breadcrumb-mobile-ellipsis"),
     /* @__PURE__ */ r(c, {}, "kumo-breadcrumb-mobile-separator-leading"),
     d(n, { key: "kumo-breadcrumb-mobile-parent" }),
     /* @__PURE__ */ r(c, {}, "kumo-breadcrumb-mobile-separator-trailing"),
     d(s, { key: "kumo-breadcrumb-mobile-current" })
-  ], f = t.filter(
+  ], h = t.filter(
     (i) => !o(i, u) && !o(i, p) && !o(i, c)
   );
-  return [...a, ...f];
+  return [...a, ...h];
 }
 m.Link = u;
 m.Current = p;
 m.Separator = c;
-m.Clipboard = S;
+m.Clipboard = E;
 export {
   m as B,
-  I as K,
-  B as a,
-  L as b
+  L as K,
+  b as a,
+  A as b
 };
-//# sourceMappingURL=breadcrumbs-cxcwf2l1ki3ffg5d.js.map
+//# sourceMappingURL=breadcrumbs-do6uyvm4msqus0sz.js.map

package/dist/chunks/breadcrumbs-do6uyvm4msqus0sz.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumbs-do6uyvm4msqus0sz.js","sources":["../../src/components/breadcrumbs/breadcrumbs.tsx"],"sourcesContent":["import {\n  Children,\n  cloneElement,\n  isValidElement,\n  useEffect,\n  useState,\n  type PropsWithChildren,\n  type ReactElement,\n  type ReactNode,\n} from \"react\";\nimport { CheckIcon, CopyIcon } from \"@phosphor-icons/react\";\nimport { Button } from \"../../components/button\";\nimport { SkeletonLine } from \"../../components/loader/skeleton-line\";\nimport { useLinkComponent } from \"../../utils/link-provider\";\nimport { cn } from \"../../utils/cn\";\nimport { resolveVariant } from \"../../utils/resolve-variant\";\n\n/** Breadcrumbs size variant definitions. */\nexport const KUMO_BREADCRUMBS_VARIANTS = {\n  size: {\n    sm: {\n      classes: \"text-sm h-10 gap-0.5\",\n      description: \"Compact breadcrumbs for dense UIs\",\n    },\n    base: {\n      classes: \"text-base h-12 gap-1\",\n      description: \"Default breadcrumbs size\",\n    },\n  },\n} as const;\n\nexport const KUMO_BREADCRUMBS_DEFAULT_VARIANTS = {\n  size: \"base\",\n} as const;\n\nexport type KumoBreadcrumbsSize = keyof typeof KUMO_BREADCRUMBS_VARIANTS.size;\n\nexport interface KumoBreadcrumbsVariantsProps {\n  /**\n   * Size of the breadcrumbs.\n   * - `\"sm\"` — Compact breadcrumbs for dense UIs\n   * - `\"base\"` — Default breadcrumbs size\n   * @default \"base\"\n   */\n  size?: KumoBreadcrumbsSize;\n}\n\nexport function breadcrumbsVariants({\n  size = KUMO_BREADCRUMBS_DEFAULT_VARIANTS.size,\n}: KumoBreadcrumbsVariantsProps = {}) {\n  return cn(\n    \"group mr-4 flex min-w-0 grow items-center overflow-hidden whitespace-nowrap\",\n    resolveVariant(KUMO_BREADCRUMBS_VARIANTS.size, size, KUMO_BREADCRUMBS_DEFAULT_VARIANTS.size).classes,\n  );\n}\n\nexport interface BreadcrumbsItemProps {\n  href: string;\n  icon?: React.ReactNode;\n}\n\nconst Link = ({\n  href,\n  icon,\n  children,\n}: PropsWithChildren<BreadcrumbsItemProps>) => {\n  const LinkComponent = useLinkComponent();\n\n  return (\n    <LinkComponent\n      to={href}\n      className=\"flex min-w-0 max-w-full items-center gap-1 text-kumo-subtle no-underline\"\n    >\n      {!!icon && <span className=\"flex shrink-0 items-center\">{icon}</span>}\n      <span className=\"truncate\">{children}</span>\n    </LinkComponent>\n  );\n};\n\ninterface BreadcrumbsCurrentProps {\n  loading?: boolean;\n  icon?: React.ReactNode;\n}\n\nfunction Current({\n  children,\n  icon,\n  loading,\n}: PropsWithChildren<BreadcrumbsCurrentProps>) {\n  if (loading) {\n    return (\n      <div className=\"flex w-[125px] min-w-0 items-center gap-1\">\n        {icon && <span className=\"flex shrink-0 items-center\">{icon}</span>}\n        <SkeletonLine />\n      </div>\n    );\n  }\n\n  return (\n    <div\n      className=\"flex min-w-0 max-w-full items-center gap-1 font-medium\"\n      aria-current=\"page\"\n    >\n      {icon && <span className=\"flex shrink-0 items-center\">{icon}</span>}\n      <span className=\"truncate\">{children}</span>\n    </div>\n  );\n}\n\nfunction Separator() {\n  return (\n    <span\n      className=\"flex shrink-0 items-center text-kumo-inactive\"\n      aria-hidden=\"true\"\n    >\n      <svg width=\"24\" height=\"24\" fill=\"none\" viewBox=\"0 0 24 24\">\n        <path\n          stroke=\"currentColor\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth=\"1.5\"\n          d=\"M10.75 8.75L14.25 12L10.75 15.25\"\n        />\n      </svg>\n    </span>\n  );\n}\n\nfunction MobileEllipsis() {\n  return (\n    <span className=\"flex shrink-0 items-center text-kumo-subtle\" aria-hidden>\n      ...\n    </span>\n  );\n}\n\nfunction Clipboard({ text }: { text: string }) {\n  const [isCopied, setIsCopied] = useState(false);\n\n  useEffect(() => {\n    if (!isCopied) return;\n\n    const timeoutId = setTimeout(() => setIsCopied(false), 2000);\n    return () => clearTimeout(timeoutId);\n  }, [isCopied]);\n\n  const handleCopyDeeplink = async () => {\n    if (!text) return;\n\n    try {\n      await navigator.clipboard.writeText(text);\n      setIsCopied(true);\n    } catch (err) {\n      console.error(\"Failed to copy deeplink:\", err);\n    }\n  };\n\n  return (\n    <Button\n      variant=\"ghost\"\n      shape=\"square\"\n      size=\"sm\"\n      className=\"opacity-0 transition-[opacity] group-hover:opacity-100\"\n      onClick={handleCopyDeeplink}\n      title=\"Click to copy\"\n      aria-label=\"Copy\"\n    >\n      {isCopied ? (\n        <CheckIcon weight=\"bold\" className=\"text-kumo-success\" />\n      ) : (\n        <CopyIcon weight=\"regular\" />\n      )}\n    </Button>\n  );\n}\n\n/**\n * Breadcrumbs component props.\n *\n * @example\n * ```tsx\n * <Breadcrumbs>\n *   <Breadcrumbs.Link href=\"/\">Home</Breadcrumbs.Link>\n *   <Breadcrumbs.Separator />\n *   <Breadcrumbs.Link href=\"/docs\">Docs</Breadcrumbs.Link>\n *   <Breadcrumbs.Separator />\n *   <Breadcrumbs.Current>Current Page</Breadcrumbs.Current>\n * </Breadcrumbs>\n * ```\n */\nexport interface BreadcrumbsProps\n  extends PropsWithChildren,\n    KumoBreadcrumbsVariantsProps {\n  /** Additional CSS classes merged via `cn()`. */\n  className?: string;\n}\n\n/**\n * Navigation breadcrumb trail showing the current page's location in a hierarchy.\n * Compound component with `Breadcrumbs.Link`, `Breadcrumbs.Current`, `Breadcrumbs.Separator`, and `Breadcrumbs.Clipboard`.\n *\n * @example\n * ```tsx\n * <Breadcrumbs>\n *   <Breadcrumbs.Link href=\"/\">Home</Breadcrumbs.Link>\n *   <Breadcrumbs.Separator />\n *   <Breadcrumbs.Current>Dashboard</Breadcrumbs.Current>\n * </Breadcrumbs>\n * ```\n */\nexport function Breadcrumb({\n  children,\n  size = \"base\",\n  className,\n}: BreadcrumbsProps) {\n  const childArray = Children.toArray(children);\n  const mobileChildren = getMobileBreadcrumbChildren(childArray);\n\n  return (\n    <nav\n      className={cn(breadcrumbsVariants({ size }), className)}\n      aria-label=\"breadcrumb\"\n    >\n      <div className=\"contents sm:hidden\">{mobileChildren}</div>\n      <div className=\"hidden sm:contents\">{childArray}</div>\n    </nav>\n  );\n}\n\nfunction isComponentElement(\n  child: ReactNode,\n  component: unknown,\n): child is ReactElement {\n  return isValidElement(child) && child.type === component;\n}\n\nfunction getMobileBreadcrumbChildren(children: ReactNode[]): ReactNode[] {\n  const breadcrumbItems = children.filter(\n    (child) =>\n      isComponentElement(child, Link) || isComponentElement(child, Current),\n  ) as ReactElement[];\n\n  if (breadcrumbItems.length <= 2) {\n    return children;\n  }\n\n  const [parentItem, currentItem] = breadcrumbItems.slice(-2);\n  const trailingItems: ReactNode[] = [\n    <MobileEllipsis key=\"kumo-breadcrumb-mobile-ellipsis\" />,\n    <Separator key=\"kumo-breadcrumb-mobile-separator-leading\" />,\n    cloneElement(parentItem, { key: \"kumo-breadcrumb-mobile-parent\" }),\n    <Separator key=\"kumo-breadcrumb-mobile-separator-trailing\" />,\n    cloneElement(currentItem, { key: \"kumo-breadcrumb-mobile-current\" }),\n  ];\n\n  const extras = children.filter(\n    (child) =>\n      !isComponentElement(child, Link) &&\n      !isComponentElement(child, Current) &&\n      !isComponentElement(child, Separator),\n  );\n\n  return [...trailingItems, ...extras];\n}\n\nBreadcrumb.Link = Link;\nBreadcrumb.Current = Current;\nBreadcrumb.Separator = Separator;\nBreadcrumb.Clipboard = Clipboard;\n"],"names":["KUMO_BREADCRUMBS_VARIANTS","KUMO_BREADCRUMBS_DEFAULT_VARIANTS","breadcrumbsVariants","size","cn","resolveVariant","Link","href","icon","children","LinkComponent","useLinkComponent","jsxs","jsx","Current","loading","SkeletonLine","Separator","MobileEllipsis","Clipboard","text","isCopied","setIsCopied","useState","useEffect","timeoutId","Button","err","CheckIcon","CopyIcon","Breadcrumb","className","childArray","Children","mobileChildren","getMobileBreadcrumbChildren","isComponentElement","child","component","isValidElement","breadcrumbItems","parentItem","currentItem","trailingItems","cloneElement","extras"],"mappings":"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"}