@cloudflare/kumo 2.3.1 → 2.4.1

package/dist/chunks/{collapsible-cnsxmp7dko87pgx0.js → collapsible-nzqcf9zwnjkxqzr6.js}

@@ -1,19 +1,21 @@
 "use client";
 import { jsx as o, jsxs as g } from "react/jsx-runtime";
-import { CaretDownIcon as u } from "@phosphor-icons/react";
+import { CaretDownIcon as f } from "@phosphor-icons/react";
 import { forwardRef as r } from "react";
-import { c as t } from "./cn-ct4n7r74mh8y0f48.js";
-import { aP as C, aQ as i, aR as n } from "./vendor-base-ui-mzjqwv5teijixz8h.js";
-function s({ className: e, ...l }) {
+import { c as s } from "./cn-ct4n7r74mh8y0f48.js";
+import { aQ as C, aR as i, aS as n } from "./vendor-base-ui-knphx7dts1vm1x37.js";
+function t({ className: e, ...l }) {
   return /* @__PURE__ */ o(C, { className: e, ...l });
 }
-s.displayName = "Collapsible.Root";
+t.displayName = "Collapsible.Root";
 const p = r(
   ({ className: e, ...l }, a) => /* @__PURE__ */ o(
     n,
     {
       ref: a,
-      className: t("cursor-pointer", e),
+      "data-kumo-component": "Collapsible",
+      "data-kumo-part": "trigger",
+      className: s("cursor-pointer", e),
       ...l
     }
   )
@@ -34,7 +36,9 @@ const c = r(({ children: e, className: l }, a) => /* @__PURE__ */ g(
   n,
   {
     ref: a,
-    className: t(
+    "data-kumo-component": "Collapsible",
+    "data-kumo-part": "default-trigger",
+    className: s(
       // Defensive resets to prevent global button styles from polluting the trigger
       "bg-transparent border-none shadow-none p-0 m-0",
       // Base styles for the trigger
@@ -44,29 +48,29 @@ const c = r(({ children: e, className: l }, a) => /* @__PURE__ */ g(
     children: [
       e,
       " ",
-      /* @__PURE__ */ o(u, { className: "h-4 w-4 transition-transform [[data-panel-open]_&]:rotate-180" })
+      /* @__PURE__ */ o(f, { className: "h-4 w-4 transition-transform [[data-panel-open]_&]:rotate-180" })
     ]
   }
 ));
 c.displayName = "Collapsible.DefaultTrigger";
-const b = r(({ children: e, className: l, ...a }, f) => /* @__PURE__ */ o(
+const u = r(({ children: e, className: l, ...a }, b) => /* @__PURE__ */ o(
   i,
   {
-    ref: f,
-    className: t("my-2 space-y-4 border-l-2 border-kumo-fill pl-4", l),
+    ref: b,
+    className: s("my-2 space-y-4 border-l-2 border-kumo-fill pl-4", l),
     ...a,
     children: e
   }
 ));
-b.displayName = "Collapsible.DefaultPanel";
-const T = Object.assign(s, {
-  Root: s,
+u.displayName = "Collapsible.DefaultPanel";
+const P = Object.assign(t, {
+  Root: t,
   Trigger: p,
   Panel: m,
   DefaultTrigger: c,
-  DefaultPanel: b
+  DefaultPanel: u
 });
 export {
-  T as C
+  P as C
 };
-//# sourceMappingURL=collapsible-cnsxmp7dko87pgx0.js.map
+//# sourceMappingURL=collapsible-nzqcf9zwnjkxqzr6.js.map

package/dist/chunks/collapsible-nzqcf9zwnjkxqzr6.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"collapsible-nzqcf9zwnjkxqzr6.js","sources":["../../src/components/collapsible/collapsible.tsx"],"sourcesContent":["import { Collapsible as CollapsibleBase } from \"@base-ui/react/collapsible\";\nimport { CaretDownIcon } from \"@phosphor-icons/react\";\nimport {\n  forwardRef,\n  type ComponentPropsWithoutRef,\n  type ReactNode,\n} from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n// =============================================================================\n// Variants\n// =============================================================================\n\nexport const KUMO_COLLAPSIBLE_VARIANTS = {} as const;\n\nexport const KUMO_COLLAPSIBLE_DEFAULT_VARIANTS = {} as const;\n\nexport interface KumoCollapsibleVariantsProps {}\n\nexport function collapsibleVariants(_props: KumoCollapsibleVariantsProps = {}) {\n  return cn();\n}\n\n// =============================================================================\n// Collapsible Root\n// =============================================================================\n\ntype BaseRootProps = ComponentPropsWithoutRef<typeof CollapsibleBase.Root>;\n\nexport interface CollapsibleRootProps extends BaseRootProps {\n  /** Additional CSS classes */\n  className?: string;\n}\n\n/**\n * Root component that manages collapsible state.\n *\n * @example\n * ```tsx\n * <Collapsible.Root open={open} onOpenChange={setOpen}>\n *   <Collapsible.Trigger>Toggle</Collapsible.Trigger>\n *   <Collapsible.Panel>Content</Collapsible.Panel>\n * </Collapsible.Root>\n * ```\n */\nfunction CollapsibleRoot({ className, ...props }: CollapsibleRootProps) {\n  return <CollapsibleBase.Root className={className} {...props} />;\n}\n\nCollapsibleRoot.displayName = \"Collapsible.Root\";\n\n// =============================================================================\n// Collapsible Trigger\n// =============================================================================\n\ntype BaseTriggerProps = ComponentPropsWithoutRef<\n  typeof CollapsibleBase.Trigger\n>;\n\nexport interface CollapsibleTriggerProps extends BaseTriggerProps {\n  /** Additional CSS classes */\n  className?: string;\n}\n\n/**\n * Button that toggles the collapsible panel visibility.\n * Use the `render` prop to customize the trigger element.\n *\n * @example\n * ```tsx\n * // Default button\n * <Collapsible.Trigger>Show more</Collapsible.Trigger>\n *\n * // Custom trigger element\n * <Collapsible.Trigger render={<Button variant=\"ghost\" />}>\n *   Toggle details\n * </Collapsible.Trigger>\n * ```\n */\nconst CollapsibleTrigger = forwardRef<HTMLButtonElement, CollapsibleTriggerProps>(\n  ({ className, ...props }, ref) => {\n    return (\n      <CollapsibleBase.Trigger\n        ref={ref}\n        data-kumo-component=\"Collapsible\"\n        data-kumo-part=\"trigger\"\n        className={cn(\"cursor-pointer\", className)}\n        {...props}\n      />\n    );\n  },\n);\n\nCollapsibleTrigger.displayName = \"Collapsible.Trigger\";\n\n// =============================================================================\n// Collapsible Panel\n// =============================================================================\n\ntype BasePanelProps = ComponentPropsWithoutRef<typeof CollapsibleBase.Panel>;\n\nexport interface CollapsiblePanelProps extends BasePanelProps {\n  /** Additional CSS classes */\n  className?: string;\n}\n\n/**\n * Container for collapsible content. Renders when the collapsible is open.\n *\n * @example\n * ```tsx\n * <Collapsible.Panel className=\"mt-2 space-y-4\">\n *   <Text>Revealed content here</Text>\n * </Collapsible.Panel>\n * ```\n */\nconst CollapsiblePanel = forwardRef<HTMLDivElement, CollapsiblePanelProps>(\n  ({ className, ...props }, ref) => {\n    return (\n      <CollapsibleBase.Panel\n        ref={ref}\n        className={className}\n        {...props}\n      />\n    );\n  },\n);\n\nCollapsiblePanel.displayName = \"Collapsible.Panel\";\n\n// =============================================================================\n// Default Trigger (Migration Affordance)\n// =============================================================================\n\nexport interface CollapsibleDefaultTriggerProps {\n  /** Label text displayed in the trigger */\n  children: ReactNode;\n  /** Additional CSS classes */\n  className?: string;\n}\n\n/**\n * Pre-styled trigger with text label and animated caret icon.\n * Provides the same visual style as the previous Collapsible API.\n *\n * Use this for quick migration or when you want the default Kumo style.\n *\n * @example\n * ```tsx\n * <Collapsible.Root>\n *   <Collapsible.DefaultTrigger>Show details</Collapsible.DefaultTrigger>\n *   <Collapsible.Panel>Content</Collapsible.Panel>\n * </Collapsible.Root>\n * ```\n */\nconst CollapsibleDefaultTrigger = forwardRef<\n  HTMLButtonElement,\n  CollapsibleDefaultTriggerProps\n>(({ children, className }, ref) => {\n  return (\n    <CollapsibleBase.Trigger\n      ref={ref}\n      data-kumo-component=\"Collapsible\"\n      data-kumo-part=\"default-trigger\"\n      className={cn(\n        // Defensive resets to prevent global button styles from polluting the trigger\n        \"bg-transparent border-none shadow-none p-0 m-0\",\n        // Base styles for the trigger\n        \"flex cursor-pointer items-center gap-1 text-sm text-kumo-link select-none\",\n        className,\n      )}\n    >\n      {children}{\" \"}\n      <CaretDownIcon className=\"h-4 w-4 transition-transform [[data-panel-open]_&]:rotate-180\" />\n    </CollapsibleBase.Trigger>\n  );\n});\n\nCollapsibleDefaultTrigger.displayName = \"Collapsible.DefaultTrigger\";\n\n// =============================================================================\n// Default Panel (Migration Affordance)\n// =============================================================================\n\nexport interface CollapsibleDefaultPanelProps extends BasePanelProps {\n  /** Panel content */\n  children: ReactNode;\n  /** Additional CSS classes */\n  className?: string;\n}\n\n/**\n * Pre-styled panel with left border accent and standard spacing.\n * Provides the same visual style as the previous Collapsible API.\n *\n * @example\n * ```tsx\n * <Collapsible.Root>\n *   <Collapsible.DefaultTrigger>Show details</Collapsible.DefaultTrigger>\n *   <Collapsible.DefaultPanel>\n *     <Text>Content with default styling</Text>\n *   </Collapsible.DefaultPanel>\n * </Collapsible.Root>\n * ```\n */\nconst CollapsibleDefaultPanel = forwardRef<\n  HTMLDivElement,\n  CollapsibleDefaultPanelProps\n>(({ children, className, ...props }, ref) => {\n  return (\n    <CollapsibleBase.Panel\n      ref={ref}\n      className={cn(\"my-2 space-y-4 border-l-2 border-kumo-fill pl-4\", className)}\n      {...props}\n    >\n      {children}\n    </CollapsibleBase.Panel>\n  );\n});\n\nCollapsibleDefaultPanel.displayName = \"Collapsible.DefaultPanel\";\n\n// =============================================================================\n// Compound Component Export\n// =============================================================================\n\n/**\n * Collapsible — a composable disclosure component for showing/hiding content.\n *\n * Built on Base UI's Collapsible with full composition support.\n *\n * ## Basic Usage\n *\n * ```tsx\n * const [open, setOpen] = useState(false);\n *\n * <Collapsible.Root open={open} onOpenChange={setOpen}>\n *   <Collapsible.Trigger render={<Button variant=\"ghost\" />}>\n *     Show details\n *   </Collapsible.Trigger>\n *   <Collapsible.Panel className=\"mt-2\">\n *     <Text>Hidden content revealed when expanded.</Text>\n *   </Collapsible.Panel>\n * </Collapsible.Root>\n * ```\n *\n * ## With Default Styling\n *\n * Use `DefaultTrigger` and `DefaultPanel` for the classic Kumo style:\n *\n * ```tsx\n * <Collapsible.Root>\n *   <Collapsible.DefaultTrigger>Show details</Collapsible.DefaultTrigger>\n *   <Collapsible.DefaultPanel>\n *     <Text>Content with border-left accent</Text>\n *   </Collapsible.DefaultPanel>\n * </Collapsible.Root>\n * ```\n *\n * ## Controlled Accordion Pattern\n *\n * ```tsx\n * const [activeIndex, setActiveIndex] = useState<number | null>(null);\n *\n * {items.map((item, i) => (\n *   <Collapsible.Root\n *     key={i}\n *     open={activeIndex === i}\n *     onOpenChange={(open) => setActiveIndex(open ? i : null)}\n *   >\n *     <Collapsible.DefaultTrigger>{item.title}</Collapsible.DefaultTrigger>\n *     <Collapsible.DefaultPanel>{item.content}</Collapsible.DefaultPanel>\n *   </Collapsible.Root>\n * ))}\n * ```\n */\nexport const Collapsible = Object.assign(CollapsibleRoot, {\n  Root: CollapsibleRoot,\n  Trigger: CollapsibleTrigger,\n  Panel: CollapsiblePanel,\n  DefaultTrigger: CollapsibleDefaultTrigger,\n  DefaultPanel: CollapsibleDefaultPanel,\n});\n\n// =============================================================================\n// Type Exports\n// =============================================================================\n\nexport type CollapsibleProps = CollapsibleRootProps;\n"],"names":["CollapsibleRoot","className","props","CollapsibleBase.Root","CollapsibleTrigger","forwardRef","ref","jsx","CollapsibleBase.Trigger","cn","CollapsiblePanel","CollapsibleBase.Panel","CollapsibleDefaultTrigger","children","jsxs","CaretDownIcon","CollapsibleDefaultPanel","Collapsible"],"mappings":";;;;;;AA6CA,SAASA,EAAgB,EAAE,WAAAC,GAAW,GAAGC,KAA+B;AACtE,2BAAQC,GAAA,EAAqB,WAAAF,GAAuB,GAAGC,EAAA,CAAO;AAChE;AAEAF,EAAgB,cAAc;AA8B9B,MAAMI,IAAqBC;AAAA,EACzB,CAAC,EAAE,WAAAJ,GAAW,GAAGC,EAAA,GAASI,MAEtB,gBAAAC;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,KAAAF;AAAA,MACA,uBAAoB;AAAA,MACpB,kBAAe;AAAA,MACf,WAAWG,EAAG,kBAAkBR,CAAS;AAAA,MACxC,GAAGC;AAAA,IAAA;AAAA,EAAA;AAIZ;AAEAE,EAAmB,cAAc;AAuBjC,MAAMM,IAAmBL;AAAA,EACvB,CAAC,EAAE,WAAAJ,GAAW,GAAGC,EAAA,GAASI,MAEtB,gBAAAC;AAAA,IAACI;AAAAA,IAAA;AAAA,MACC,KAAAL;AAAA,MACA,WAAAL;AAAA,MACC,GAAGC;AAAA,IAAA;AAAA,EAAA;AAIZ;AAEAQ,EAAiB,cAAc;AA2B/B,MAAME,IAA4BP,EAGhC,CAAC,EAAE,UAAAQ,GAAU,WAAAZ,EAAA,GAAaK,MAExB,gBAAAQ;AAAA,EAACN;AAAAA,EAAA;AAAA,IACC,KAAAF;AAAA,IACA,uBAAoB;AAAA,IACpB,kBAAe;AAAA,IACf,WAAWG;AAAA;AAAA,MAET;AAAA;AAAA,MAEA;AAAA,MACAR;AAAA,IAAA;AAAA,IAGD,UAAA;AAAA,MAAAY;AAAA,MAAU;AAAA,MACX,gBAAAN,EAACQ,GAAA,EAAc,WAAU,gEAAA,CAAgE;AAAA,IAAA;AAAA,EAAA;AAAA,CAG9F;AAEDH,EAA0B,cAAc;AA2BxC,MAAMI,IAA0BX,EAG9B,CAAC,EAAE,UAAAQ,GAAU,WAAAZ,GAAW,GAAGC,EAAA,GAASI,MAElC,gBAAAC;AAAA,EAACI;AAAAA,EAAA;AAAA,IACC,KAAAL;AAAA,IACA,WAAWG,EAAG,mDAAmDR,CAAS;AAAA,IACzE,GAAGC;AAAA,IAEH,UAAAW;AAAA,EAAA;AAAA,CAGN;AAEDG,EAAwB,cAAc;AAwD/B,MAAMC,IAAc,OAAO,OAAOjB,GAAiB;AAAA,EACxD,MAAMA;AAAA,EACN,SAASI;AAAA,EACT,OAAOM;AAAA,EACP,gBAAgBE;AAAA,EAChB,cAAcI;AAChB,CAAC;"}

package/dist/chunks/{combobox-kjmt3aoy4sia7g0o.js → combobox-msvukodjsqzlvpqc.js}

@@ -1,18 +1,18 @@
 "use client";
 import { jsx as e, jsxs as m } from "react/jsx-runtime";
 import { CheckIcon as T, XIcon as C, CaretDownIcon as N } from "@phosphor-icons/react";
-import { createContext as E, useContext as h, Fragment as V } from "react";
-import { i as p, K as P } from "./input-mv7giprcc6hfkpq3.js";
-import { c as i } from "./cn-ct4n7r74mh8y0f48.js";
-import { F as j } from "./field-n16udu32tpyq5udz.js";
-import { u as G } from "./portal-provider-hwmkdmkpvct0cb76.js";
-import { a6 as g, a7 as x, a8 as f, a9 as L, aa as M, ab as F, ac as _, ad as A, ae as K, af as b, ag as O, ah as U, ai as W, aj as B, ak as D, al as H, am as X, an as q, ao as J } from "./vendor-base-ui-mzjqwv5teijixz8h.js";
+import { createContext as E, useContext as g, Fragment as V } from "react";
+import { i as p, K as P } from "./input-en8hhb14mmt3tfwn.js";
+import { c as r } from "./cn-ct4n7r74mh8y0f48.js";
+import { F as j } from "./field-c8o7h3rlam4c9pcx.js";
+import { u as F } from "./portal-provider-hwmkdmkpvct0cb76.js";
+import { a6 as G, a7 as h, a8 as x, a9 as f, aa as L, ab as M, ac as _, ad as A, ae as K, af as O, ag as b, ah as U, ai as W, aj as B, ak as D, al as H, am as X, an as q, ao as J, ap as Q } from "./vendor-base-ui-knphx7dts1vm1x37.js";
 P.size;
 const u = E({ size: "base", hasError: !1 });
 function y({
-  label: a,
-  required: o,
-  labelTooltip: r,
+  label: o,
+  required: a,
+  labelTooltip: i,
   description: s,
   error: t,
   children: n,
@@ -20,40 +20,40 @@ function y({
   ...l
 }) {
   const c = /* @__PURE__ */ e(u.Provider, { value: { size: d, hasError: !!t }, children: /* @__PURE__ */ e(M, { ...l, children: n }) });
-  return a ? /* @__PURE__ */ e(
+  return o ? /* @__PURE__ */ e(
     j,
     {
-      label: a,
-      required: o,
-      labelTooltip: r,
+      label: o,
+      required: a,
+      labelTooltip: i,
       description: s,
       error: t ? typeof t == "string" ? { message: t, match: !0 } : t : void 0,
       children: c
     }
   ) : c;
 }
-function v({
-  children: a,
-  className: o,
-  align: r = "start",
+function k({
+  children: o,
+  className: a,
+  align: i = "start",
   sideOffset: s = 4,
   alignOffset: t,
   side: n,
   container: d
 }) {
-  const l = G();
-  return /* @__PURE__ */ e(X, { container: d ?? l ?? void 0, children: /* @__PURE__ */ e(
-    q,
+  const l = F();
+  return /* @__PURE__ */ e(q, { container: d ?? l ?? void 0, children: /* @__PURE__ */ e(
+    J,
     {
       className: "",
-      align: r,
+      align: i,
       sideOffset: s,
       alignOffset: t,
       side: n,
       children: /* @__PURE__ */ e(
-        J,
+        Q,
         {
-          className: i(
+          className: r(
             "flex flex-col",
             // flexbox layout for sticky input + scrollable list
             "max-h-[min(var(--available-height),24rem)] max-w-(--available-width) min-w-(--anchor-width) py-1.5",
@@ -61,42 +61,44 @@ function v({
             // background
             "rounded-lg shadow-lg ring ring-kumo-line",
             // border part
-            o
+            a
           ),
-          children: a
+          children: o
         }
       )
     }
   ) });
 }
-const Q = {
+const Y = {
   xs: { padding: "pr-5", iconSize: 12, iconRight: "right-1" },
   sm: { padding: "pr-6", iconSize: 14, iconRight: "right-1.5" },
   base: { padding: "pr-8", iconSize: 16, iconRight: "right-2" },
   lg: { padding: "pr-10", iconSize: 18, iconRight: "right-3" }
 };
-function z({
-  className: a,
-  ...o
+function v({
+  className: o,
+  ...a
 }) {
-  const { size: r, hasError: s } = h(u), t = Q[r];
+  const { size: i, hasError: s } = g(u), t = Y[i];
   return /* @__PURE__ */ m(
     f,
     {
-      className: i(
-        p({ size: r, variant: s ? "error" : "default" }),
+      "data-kumo-component": "Combobox",
+      "data-kumo-part": "trigger",
+      className: r(
+        p({ size: i, variant: s ? "error" : "default" }),
         "relative flex items-center",
         "data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed",
         "data-[placeholder]:text-kumo-placeholder",
         t.padding,
-        a
+        o
       ),
       children: [
-        /* @__PURE__ */ e(x, { ...o }),
+        /* @__PURE__ */ e(x, { ...a }),
         /* @__PURE__ */ e(
-          g,
+          h,
           {
-            className: i(
+            className: r(
               "absolute top-1/2 -translate-y-1/2 flex items-center text-kumo-subtle",
               t.iconRight
             ),
@@ -107,7 +109,7 @@ function z({
     }
   );
 }
-const Y = {
+const Z = {
   xs: {
     padding: "pr-7",
     iconSize: 12,
@@ -133,26 +135,26 @@ const Y = {
     caretRight: "right-3"
   }
 };
-function R({
-  clearLabel: a = "Clear selection",
-  showOptionsLabel: o = "Show options",
-  ...r
+function z({
+  clearLabel: o = "Clear selection",
+  showOptionsLabel: a = "Show options",
+  ...i
 }) {
-  const { size: s, hasError: t } = h(u), n = Y[s];
+  const { size: s, hasError: t } = g(u), n = Z[s];
   return /* @__PURE__ */ m(
     "div",
     {
-      className: i(
+      className: r(
         "relative inline-block w-full max-w-xs",
         "has-[:disabled]:opacity-50 has-[:disabled]:cursor-not-allowed",
-        r.className
+        i.className
       ),
       children: [
         /* @__PURE__ */ e(
           b,
           {
-            ...r,
-            className: i(
+            ...i,
+            className: r(
               p({ size: s, variant: t ? "error" : "default" }),
               "w-full",
               n.padding,
@@ -161,10 +163,12 @@ function R({
           }
         ),
         /* @__PURE__ */ e(
-          H,
+          X,
           {
-            "aria-label": a,
-            className: i(
+            "data-kumo-component": "Combobox",
+            "data-kumo-part": "clear",
+            "aria-label": o,
+            className: r(
               "absolute top-1/2 flex -translate-y-1/2 cursor-pointer bg-transparent p-0",
               "data-[disabled]:pointer-events-none data-[disabled]:opacity-0",
               n.clearRight
@@ -175,115 +179,119 @@ function R({
         /* @__PURE__ */ e(
           f,
           {
-            "aria-label": o,
-            className: i(
+            "data-kumo-component": "Combobox",
+            "data-kumo-part": "trigger",
+            "aria-label": a,
+            className: r(
               "absolute top-1/2 -translate-y-1/2 flex items-center justify-center cursor-pointer text-kumo-subtle",
               "m-0 bg-transparent p-0",
               // Reset Stratus global button styles
               n.caretRight
             ),
-            children: /* @__PURE__ */ e(g, { children: /* @__PURE__ */ e(N, { size: n.iconSize, className: "fill-current" }) })
+            children: /* @__PURE__ */ e(h, { className: "flex items-center", children: /* @__PURE__ */ e(N, { size: n.iconSize, className: "fill-current" }) })
           }
         )
       ]
     }
   );
 }
-function w({
-  children: a,
-  className: o,
-  ...r
+function R({
+  children: o,
+  className: a,
+  ...i
 }) {
   return /* @__PURE__ */ m(
-    O,
+    U,
     {
-      ...r,
-      className: i(
+      "data-kumo-component": "Combobox",
+      "data-kumo-part": "item",
+      ...i,
+      className: r(
         "group mx-1.5 grid grid-cols-[1fr_16px] gap-2 rounded px-2 py-1.5 text-base",
         "cursor-pointer data-highlighted:bg-kumo-tint",
         // Disabled rows: muted text, no pointer, suppress highlight bg even
         // when keyboard nav lands on them. Base UI sets `data-disabled` on
         // the element when the `disabled` prop is true.
         "data-[disabled]:cursor-not-allowed data-[disabled]:text-kumo-subtle data-[disabled]:opacity-60 data-[disabled]:data-highlighted:bg-transparent",
-        o
+        a
       ),
       children: [
-        /* @__PURE__ */ e("div", { className: "col-start-1", children: a }),
-        /* @__PURE__ */ e(U, { className: "col-start-2 flex items-center", children: /* @__PURE__ */ e(T, {}) })
+        /* @__PURE__ */ e("div", { className: "col-start-1", children: o }),
+        /* @__PURE__ */ e(W, { className: "col-start-2 flex items-center", children: /* @__PURE__ */ e(T, {}) })
       ]
     }
   );
 }
-function Z(a) {
+function $(o) {
   return /* @__PURE__ */ e(
-    K,
+    O,
     {
-      ...a,
-      className: i(
+      ...o,
+      className: r(
         "mx-1.5 shrink-0 px-4 py-2 text-[0.925rem] leading-4 text-kumo-subtle empty:m-0 empty:p-0"
       ),
-      children: a.children ?? "No labels found."
+      children: o.children ?? "No labels found."
     }
   );
 }
-function $(a) {
+function ee(o) {
   return /* @__PURE__ */ e(
     b,
     {
-      ...a,
-      className: i(
+      ...o,
+      className: r(
         p(),
         "mx-1.5 w-[calc(100%-0.75rem)] shrink-0 first:mb-2",
-        a.className
+        o.className
       )
     }
   );
 }
-function ee({
-  className: a,
-  ...o
+function oe({
+  className: o,
+  ...a
 }) {
   return /* @__PURE__ */ e(
-    F,
+    _,
     {
-      ...o,
-      className: i(
+      ...a,
+      className: r(
         "min-h-0 flex-1 overflow-y-auto overscroll-contain scroll-pt-2 scroll-pb-2",
-        a
+        o
       )
     }
   );
 }
-function ae(a) {
+function ae(o) {
   return /* @__PURE__ */ e(
-    A,
+    K,
     {
-      ...a,
-      className: i(
+      ...o,
+      className: r(
         "mx-1.5 px-2 py-1.5 text-sm text-kumo-subtle",
-        a.className
+        o.className
       )
     }
   );
 }
-function oe(a) {
+function te(o) {
   return /* @__PURE__ */ e(
-    _,
+    A,
     {
-      ...a,
+      ...o,
       className: "border-t border-kumo-hairline mt-2 pt-2 first:border-t-0 first:mt-0 first:pt-0"
     }
   );
 }
-function I({
-  removeLabel: a = "Remove",
-  ...o
+function w({
+  removeLabel: o = "Remove",
+  ...a
 }) {
   return /* @__PURE__ */ m(
-    W,
+    B,
     {
-      ...o,
-      className: i(
+      ...a,
+      className: r(
         "flex items-center gap-2.5",
         // Layout
         "h-6 pl-2 pr-[3px]",
@@ -296,12 +304,14 @@ function I({
         // Typography
       ),
       children: [
-        o.children,
+        a.children,
         /* @__PURE__ */ e(
-          B,
+          D,
           {
-            "aria-label": a,
-            className: i(
+            "data-kumo-component": "Combobox",
+            "data-kumo-part": "chip-remove",
+            "aria-label": o,
+            className: r(
               "cursor-pointer rounded-md p-1 hover:bg-kumo-fill-hover",
               "bg-transparent flex"
             ),
@@ -312,47 +322,47 @@ function I({
     }
   );
 }
-const te = {
+const re = {
   xs: "min-h-5",
   sm: "min-h-6.5",
   base: "min-h-9",
   lg: "min-h-10"
 };
-function k({
-  placeholder: a,
-  renderItem: o,
-  className: r,
+function I({
+  placeholder: o,
+  renderItem: a,
+  className: i,
   inputSide: s = "right",
   value: t
 }) {
-  const { size: n, hasError: d } = h(u), l = t;
+  const { size: n, hasError: d } = g(u), l = t;
   return /* @__PURE__ */ m(
-    D,
+    H,
     {
-      className: i(
+      className: r(
         p({ size: n, variant: d ? "error" : "default" }),
         "flex flex-col",
         "gap-1 py-1 px-1.5",
-        te[n],
+        re[n],
         "h-auto",
         "data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed",
-        r
+        i
       ),
       children: [
         s === "top" && /* @__PURE__ */ e(
           b,
           {
-            placeholder: a,
+            placeholder: o,
             className: "w-full px-2 py-1 border-0 bg-inherit"
           }
         ),
         /* @__PURE__ */ m("div", { className: "flex items-center flex-wrap gap-1.5 flex-1", children: [
-          l !== void 0 && l.length > 0 && l.map((c) => o(c)),
-          /* @__PURE__ */ e(x, { children: (c) => l !== void 0 ? null : /* @__PURE__ */ e(V, { children: c.map((S) => o(S)) }) }),
+          l !== void 0 && l.length > 0 && l.map((c) => a(c)),
+          /* @__PURE__ */ e(x, { children: (c) => l !== void 0 ? null : /* @__PURE__ */ e(V, { children: c.map((S) => a(S)) }) }),
           s === "right" && /* @__PURE__ */ e(
             b,
             {
-              placeholder: a,
+              placeholder: o,
               className: "min-w-[100px] flex-1 px-2 py-1 border-0 bg-inherit"
             }
           )
@@ -362,35 +372,37 @@ function k({
   );
 }
 y.displayName = "Combobox.Root";
-v.displayName = "Combobox.Content";
-z.displayName = "Combobox.TriggerValue";
-R.displayName = "Combobox.TriggerInput";
-w.displayName = "Combobox.Item";
-I.displayName = "Combobox.Chip";
-k.displayName = "Combobox.TriggerMultipleWithInput";
-const be = Object.assign(y, {
+k.displayName = "Combobox.Content";
+v.displayName = "Combobox.TriggerValue";
+z.displayName = "Combobox.TriggerInput";
+R.displayName = "Combobox.Item";
+w.displayName = "Combobox.Chip";
+I.displayName = "Combobox.TriggerMultipleWithInput";
+const pe = Object.assign(y, {
   // Helper components
-  Content: v,
-  TriggerValue: z,
-  TriggerInput: R,
-  TriggerMultipleWithInput: k,
+  Content: k,
+  TriggerValue: v,
+  TriggerInput: z,
+  TriggerMultipleWithInput: I,
   // Slightly modified BaseUI
-  Chip: I,
-  Item: w,
+  Chip: w,
+  Item: R,
   // Styled BaseUI
-  Input: $,
-  Empty: Z,
+  Input: ee,
+  Empty: $,
   GroupLabel: ae,
-  Group: oe,
+  Group: te,
   // Styled BaseUI
-  List: ee,
+  List: oe,
   // BaseUI
   Collection: L,
   Trigger: f,
   Value: x,
-  Icon: g
+  Icon: h,
+  // Filtering
+  useFilter: G
 });
 export {
-  be as C
+  pe as C
 };
-//# sourceMappingURL=combobox-kjmt3aoy4sia7g0o.js.map
+//# sourceMappingURL=combobox-msvukodjsqzlvpqc.js.map