@multicomma/arkcn 0.1.2 → 0.1.3

package/registry/items/cascader.json

@@ -23,6 +23,802 @@
     "createTreeCollection",
     "useCascader"
   ],
+  "parts": [
+    {
+      "name": "Cascader",
+      "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": true,
+          "description": "Content rendered inside the part.",
+          "from": "arkcn"
+        },
+        {
+          "name": "collection",
+          "type": "TreeCollection<T>",
+          "required": true,
+          "description": "The collection of items to render.",
+          "from": "arkcn"
+        },
+        {
+          "name": "changeOnSelect",
+          "type": "boolean",
+          "required": false,
+          "default": "false",
+          "description": "Let a branch be the answer: clicking it picks it and keeps the popup open.",
+          "from": "arkcn"
+        },
+        {
+          "name": "defaultOpen",
+          "type": "boolean",
+          "required": false,
+          "default": "false",
+          "description": "The initial open state when uncontrolled.",
+          "from": "arkcn"
+        },
+        {
+          "name": "defaultValue",
+          "type": "string[]",
+          "required": false,
+          "default": "[]",
+          "description": "The initial value when uncontrolled.",
+          "from": "arkcn"
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "required": false,
+          "default": "false",
+          "description": "Disables the part and everything inside it.",
+          "from": "arkcn"
+        },
+        {
+          "name": "expandTrigger",
+          "type": "\"click\" | \"hover\"",
+          "required": false,
+          "default": "\"click\"",
+          "description": "Open the next column on hover instead of click.",
+          "from": "arkcn"
+        },
+        {
+          "name": "invalid",
+          "type": "boolean",
+          "required": false,
+          "default": "false",
+          "description": "Marks the part invalid for styling and assistive technology.",
+          "from": "arkcn"
+        },
+        {
+          "name": "onOpenChange",
+          "type": "((details: { open: boolean; }) => void)",
+          "required": false,
+          "description": "Called when the open state changes.",
+          "from": "arkcn"
+        },
+        {
+          "name": "onValueChange",
+          "type": "((details: CascaderValueChangeDetails<T>) => void)",
+          "required": false,
+          "description": "Called with the new value whenever it changes.",
+          "from": "arkcn"
+        },
+        {
+          "name": "open",
+          "type": "boolean",
+          "required": false,
+          "description": "The controlled open state.",
+          "from": "arkcn"
+        },
+        {
+          "name": "readOnly",
+          "type": "boolean",
+          "required": false,
+          "default": "false",
+          "description": "Shows the value but prevents changes.",
+          "from": "arkcn"
+        },
+        {
+          "name": "value",
+          "type": "string[]",
+          "required": false,
+          "description": "The controlled value.",
+          "from": "arkcn"
+        },
+        {
+          "name": "autoFocus",
+          "type": "boolean",
+          "required": false,
+          "default": "true",
+          "description": "Whether to automatically set focus on the first focusable\ncontent within the popover when opened.",
+          "from": "@zag-js/popover"
+        },
+        {
+          "name": "closeOnEscape",
+          "type": "boolean",
+          "required": false,
+          "default": "true",
+          "description": "Whether to close the popover when the escape key is pressed.",
+          "from": "@zag-js/popover"
+        },
+        {
+          "name": "closeOnInteractOutside",
+          "type": "boolean",
+          "required": false,
+          "default": "true",
+          "description": "Whether to close the popover when the user clicks outside of the popover.",
+          "from": "@zag-js/popover"
+        },
+        {
+          "name": "defaultTriggerValue",
+          "type": "string | null",
+          "required": false,
+          "description": "The initial trigger value when rendered.\nUse when you don't need to control the trigger value.",
+          "from": "@zag-js/popover"
+        },
+        {
+          "name": "finalFocusEl",
+          "type": "(() => MaybeElement)",
+          "required": false,
+          "description": "Element to receive focus when the popover is closed.",
+          "from": "@zag-js/popover"
+        },
+        {
+          "name": "hideMode",
+          "type": "HideMode",
+          "required": false,
+          "default": "'display-none'",
+          "description": "How to hide content when mounted but not present.\n- `'display-none'`: HTML `hidden` attribute. Effects stay alive.\n- `'activity'`: React 19 `<Activity mode=\"hidden\">`. Effects pause. Requires React 19+.",
+          "from": "@ark-ui/react"
+        },
+        {
+          "name": "id",
+          "type": "string",
+          "required": false,
+          "description": "The unique identifier of the machine.",
+          "from": "@zag-js/types"
+        },
+        {
+          "name": "ids",
+          "type": "ElementIds",
+          "required": false,
+          "description": "The ids of the elements in the popover. Useful for composition.",
+          "from": "@zag-js/popover"
+        },
+        {
+          "name": "immediate",
+          "type": "boolean",
+          "required": false,
+          "description": "Whether to synchronize the present change immediately or defer it to the next frame",
+          "from": "@zag-js/presence"
+        },
+        {
+          "name": "initialFocusEl",
+          "type": "(() => HTMLElement | null)",
+          "required": false,
+          "description": "The element to focus on when the popover is opened.",
+          "from": "@zag-js/popover"
+        },
+        {
+          "name": "lazyMount",
+          "type": "boolean",
+          "required": false,
+          "default": "true",
+          "description": "Whether to enable lazy mounting",
+          "from": "@ark-ui/react"
+        },
+        {
+          "name": "modal",
+          "type": "boolean",
+          "required": false,
+          "default": "false",
+          "description": "Whether the popover should be modal. When set to `true`:\n- interaction with outside elements will be disabled\n- only popover content will be visible to screen readers\n- scrolling is blocked\n- focus is trapped within the popover",
+          "from": "@zag-js/popover"
+        },
+        {
+          "name": "onEnterComplete",
+          "type": "VoidFunction",
+          "required": false,
+          "description": "Function called when the animation ends in the open state",
+          "from": "@zag-js/presence"
+        },
+        {
+          "name": "onEscapeKeyDown",
+          "type": "((event: KeyboardEvent) => void)",
+          "required": false,
+          "description": "Function called when the escape key is pressed",
+          "from": "@zag-js/dismissable"
+        },
+        {
+          "name": "onExitComplete",
+          "type": "VoidFunction",
+          "required": false,
+          "description": "Function called when the animation ends in the closed state",
+          "from": "@zag-js/presence"
+        },
+        {
+          "name": "onFocusOutside",
+          "type": "((event: FocusOutsideEvent) => void)",
+          "required": false,
+          "description": "Function called when the focus is moved outside the component",
+          "from": "@zag-js/interact-outside"
+        },
+        {
+          "name": "onInteractOutside",
+          "type": "((event: InteractOutsideEvent) => void)",
+          "required": false,
+          "description": "Function called when an interaction happens outside the component",
+          "from": "@zag-js/interact-outside"
+        },
+        {
+          "name": "onPointerDownOutside",
+          "type": "((event: PointerDownOutsideEvent) => void)",
+          "required": false,
+          "description": "Function called when the pointer is pressed down outside the component",
+          "from": "@zag-js/interact-outside"
+        },
+        {
+          "name": "onRequestDismiss",
+          "type": "((event: LayerDismissEvent) => void)",
+          "required": false,
+          "description": "Function called when this layer is closed due to a parent layer being closed",
+          "from": "@zag-js/dismissable"
+        },
+        {
+          "name": "onTriggerValueChange",
+          "type": "((details: TriggerValueChangeDetails) => void)",
+          "required": false,
+          "description": "Function called when the trigger value changes.",
+          "from": "@zag-js/popover"
+        },
+        {
+          "name": "persistentElements",
+          "type": "(() => Element | null)[]",
+          "required": false,
+          "description": "Returns the persistent elements that:\n- should not have pointer-events disabled\n- should not trigger the dismiss event",
+          "from": "@zag-js/dismissable"
+        },
+        {
+          "name": "portalled",
+          "type": "boolean",
+          "required": false,
+          "default": "true",
+          "description": "Whether the popover is portalled. This will proxy the tabbing behavior regardless of the DOM position\nof the popover content.",
+          "from": "@zag-js/popover"
+        },
+        {
+          "name": "positioning",
+          "type": "PositioningOptions",
+          "required": false,
+          "description": "The user provided options used to position the popover content",
+          "from": "@zag-js/popover"
+        },
+        {
+          "name": "present",
+          "type": "boolean",
+          "required": false,
+          "description": "Whether the node is present (controlled by the user)",
+          "from": "@zag-js/presence"
+        },
+        {
+          "name": "restoreFocus",
+          "type": "boolean",
+          "required": false,
+          "default": "true",
+          "description": "Whether to restore focus to the element that had focus before the popover was opened.",
+          "from": "@zag-js/popover"
+        },
+        {
+          "name": "skipAnimationOnMount",
+          "type": "boolean",
+          "required": false,
+          "default": "false",
+          "description": "Whether to allow the initial presence animation.",
+          "from": "@ark-ui/react"
+        },
+        {
+          "name": "translations",
+          "type": "IntlTranslations",
+          "required": false,
+          "description": "Specifies the localized strings that identifies the accessibility elements and their states",
+          "from": "@zag-js/popover"
+        },
+        {
+          "name": "triggerValue",
+          "type": "string | null",
+          "required": false,
+          "description": "The controlled trigger value",
+          "from": "@zag-js/popover"
+        },
+        {
+          "name": "unmountOnExit",
+          "type": "boolean",
+          "required": false,
+          "default": "true",
+          "description": "Whether to unmount on exit.",
+          "from": "@ark-ui/react"
+        }
+      ]
+    },
+    {
+      "name": "CascaderClearTrigger",
+      "props": [
+        {
+          "name": "asChild",
+          "type": "boolean",
+          "required": false,
+          "description": "Render the child element instead of the default one, merging props and behaviour onto it.",
+          "from": "arkcn"
+        },
+        {
+          "name": "size",
+          "type": "\"default\" | \"xs\" | \"sm\" | \"lg\" | \"icon\" | \"icon-xs\" | \"icon-sm\" | \"icon-lg\" | null",
+          "required": false,
+          "description": "Size variant; sets a `data-size` attribute.",
+          "from": "arkcn"
+        },
+        {
+          "name": "variant",
+          "type": "\"link\" | \"default\" | \"outline\" | \"secondary\" | \"ghost\" | \"destructive\" | null",
+          "required": false,
+          "description": "Visual variant, styled with `cva`; sets a `data-variant` attribute.",
+          "from": "arkcn"
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "CascaderColumn",
+      "props": [
+        {
+          "name": "depth",
+          "type": "number",
+          "required": true,
+          "description": "Column depth, starting at 0 for the first column; sets `data-depth`.",
+          "from": "arkcn"
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "CascaderColumns",
+      "props": [
+        {
+          "name": "children",
+          "type": "((node: T) => ReactNode)",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "arkcn"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "CascaderContent",
+      "props": [
+        {
+          "name": "asChild",
+          "type": "boolean",
+          "required": false,
+          "description": "Use the provided child element as the default rendered element, combining their props and behavior.",
+          "from": "@ark-ui/react"
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "CascaderEmpty",
+      "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "CascaderHiddenInput",
+      "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "CascaderIndicator",
+      "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "CascaderItem",
+      "props": [
+        {
+          "name": "node",
+          "type": "T",
+          "required": true,
+          "description": "The tree node this part renders.",
+          "from": "arkcn"
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "arkcn"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "CascaderItemIndicator",
+      "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "CascaderItemText",
+      "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "CascaderSearch",
+      "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "CascaderSearchResult",
+      "props": [
+        {
+          "name": "path",
+          "type": "T[]",
+          "required": true,
+          "description": "Nodes from the first level down to the matched node.",
+          "from": "arkcn"
+        },
+        {
+          "name": "separator",
+          "type": "ReactNode",
+          "required": false,
+          "default": "\" / \"",
+          "description": "Rendered between path segments.",
+          "from": "arkcn"
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "CascaderSearchResults",
+      "props": [
+        {
+          "name": "children",
+          "type": "((path: T[]) => ReactNode)",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "arkcn"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "CascaderTrigger",
+      "props": [
+        {
+          "name": "size",
+          "type": "\"default\" | \"sm\"",
+          "required": false,
+          "default": "\"default\"",
+          "description": "Size variant; sets a `data-size` attribute.",
+          "from": "arkcn"
+        },
+        {
+          "name": "variant",
+          "type": "\"default\" | \"unstyled\"",
+          "required": false,
+          "default": "\"default\"",
+          "description": "Visual variant, styled with `cva`; sets a `data-variant` attribute.",
+          "from": "arkcn"
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "CascaderValue",
+      "props": [
+        {
+          "name": "children",
+          "type": "((path: T[]) => ReactNode)",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "arkcn"
+        },
+        {
+          "name": "placeholder",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Text shown while there is no value.",
+          "from": "arkcn"
+        },
+        {
+          "name": "separator",
+          "type": "ReactNode",
+          "required": false,
+          "default": "\" / \"",
+          "description": "Rendered between path segments.",
+          "from": "arkcn"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    }
+  ],
   "dependencies": {
     "@ark-ui/react": "^5.39.1",
     "lucide-react": "^1.41.0"
@@ -37,7 +833,7 @@
   "files": [
     {
       "path": "components/ui/cascader.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Popover as PopoverPrimitive, createTreeCollection, type TreeCollection, type TreeNode } from \"@ark-ui/react\"\nimport { CheckIcon, ChevronDownIcon, ChevronRightIcon, SearchIcon, XIcon } from \"lucide-react\"\nimport { useControllable } from \"@/lib/controllable\"\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { InputGroup, InputGroupAddon, InputGroupInput } from \"@/components/ui/input-group\"\nimport { PopoverContent, PopoverTrigger } from \"@/components/ui/popover\"\n\n/* -------------------------------- helpers -------------------------------- */\n\n/** Ancestors (root excluded) followed by the node itself. */\nfunction pathNodes<T extends TreeNode>(collection: TreeCollection<T>, value: string): T[] {\n  const node = collection.findNode(value)\n  if (!node) return []\n  const parents = collection.getParentNodes(value).filter((n) => !collection.isRootNode(n))\n  return [...parents, node]\n}\n\nfunction pathValues<T extends TreeNode>(collection: TreeCollection<T>, value: string): string[] {\n  return pathNodes(collection, value).map((n) => collection.getNodeValue(n))\n}\n\nconst itemId = (base: string, value: string) => `${base}-${value.replace(/[^a-zA-Z0-9_-]/g, \"_\")}`\n\n/* -------------------------------- context -------------------------------- */\n\ntype CascaderValueChangeDetails<T extends TreeNode = TreeNode> = {\n  /** `[]` or the selected node's value. */\n  value: string[]\n  /** Nodes from the first level down to the selected node. */\n  path: T[]\n}\n\ntype CascaderContextValue<T extends TreeNode = TreeNode> = {\n  collection: TreeCollection<T>\n  value: string[]\n  setValue: (value: string[]) => void\n  /** Branch values open from the first column down; column `i + 1` lists the children of `expandedPath[i]`. */\n  expandedPath: string[]\n  setExpandedPath: (path: string[]) => void\n  highlighted: string | null\n  setHighlighted: (value: string | null) => void\n  open: boolean\n  setOpen: (open: boolean) => void\n  query: string\n  setQuery: (query: string) => void\n  changeOnSelect: boolean\n  expandTrigger: \"click\" | \"hover\"\n  disabled: boolean\n  readOnly: boolean\n  invalid: boolean\n  /** Activate a node: pick a leaf (and close), or open a branch (and pick it when `changeOnSelect`). */\n  activate: (node: T) => void\n  /** Expand a branch and highlight it, without picking. */\n  expand: (node: T) => void\n  clear: () => void\n  /** Nodes on the path to the current value. */\n  valuePath: T[]\n  /** Flat search matches: each entry is a path of nodes. */\n  matches: T[][]\n  columns: T[][]\n  ids: { content: string; item: (value: string) => string }\n  contentRef: React.RefObject<HTMLDivElement | null>\n  moveHighlight: (key: string) => boolean\n}\n\nconst CascaderContext = React.createContext<CascaderContextValue | null>(null)\n\nfunction useCascader<T extends TreeNode = TreeNode>() {\n  const ctx = React.useContext(CascaderContext)\n  if (!ctx) throw new Error(\"Cascader parts must be used inside <Cascader>\")\n  return ctx as unknown as CascaderContextValue<T>\n}\n\n/* ---------------------------------- root --------------------------------- */\n\ntype CascaderProps<T extends TreeNode> = Omit<\n  React.ComponentProps<typeof PopoverPrimitive.Root>,\n  \"open\" | \"defaultOpen\" | \"onOpenChange\" | \"children\"\n> & {\n  collection: TreeCollection<T>\n  value?: string[]\n  defaultValue?: string[]\n  onValueChange?: (details: CascaderValueChangeDetails<T>) => void\n  /** Let a branch be the answer: clicking it picks it and keeps the popup open. */\n  changeOnSelect?: boolean\n  /** Open the next column on hover instead of click. */\n  expandTrigger?: \"click\" | \"hover\"\n  open?: boolean\n  defaultOpen?: boolean\n  onOpenChange?: (details: { open: boolean }) => void\n  disabled?: boolean\n  readOnly?: boolean\n  invalid?: boolean\n  children: React.ReactNode\n}\n\nfunction Cascader<T extends TreeNode>({\n  collection,\n  value: valueProp,\n  defaultValue = [],\n  onValueChange,\n  changeOnSelect = false,\n  expandTrigger = \"click\",\n  open: openProp,\n  defaultOpen = false,\n  onOpenChange,\n  disabled = false,\n  readOnly = false,\n  invalid = false,\n  positioning,\n  lazyMount = true,\n  unmountOnExit = true,\n  ids: idsProp,\n  children,\n  ...props\n}: CascaderProps<T>) {\n  const [value, setValueState] = useControllable<string[]>(valueProp, defaultValue, (next) =>\n    onValueChange?.({ value: next, path: next[0] != null ? pathNodes(collection, next[0]) : [] })\n  )\n  const [open, setOpenState] = useControllable<boolean>(openProp, defaultOpen, (next) => onOpenChange?.({ open: next }))\n  const [expandedPath, setExpandedPath] = React.useState<string[]>([])\n  const [highlighted, setHighlighted] = React.useState<string | null>(null)\n  const [query, setQueryState] = React.useState(\"\")\n  const contentRef = React.useRef<HTMLDivElement | null>(null)\n  const base = React.useId()\n  const ids = React.useMemo(\n    () => ({ content: idsProp?.content ?? `${base}-content`, item: (v: string) => itemId(`${base}-item`, v) }),\n    [base, idsProp?.content]\n  )\n\n  const setValue = React.useCallback(\n    (next: string[]) => {\n      if (!readOnly) setValueState(next)\n    },\n    [readOnly, setValueState]\n  )\n\n  const setOpen = React.useCallback(\n    (next: boolean) => {\n      if (disabled) return\n      if (next) {\n        // Start from the current value: its ancestors open, itself highlighted.\n        const current = value[0]\n        const path = current != null ? pathValues(collection, current) : []\n        setExpandedPath(path.slice(0, -1))\n        setHighlighted(current ?? null)\n      } else {\n        setQueryState(\"\")\n      }\n      setOpenState(next)\n    },\n    [disabled, value, collection, setOpenState]\n  )\n\n  const columns = React.useMemo(() => {\n    const cols: T[][] = [collection.getNodeChildren(collection.rootNode)]\n    for (const v of expandedPath) {\n      const node = collection.findNode(v)\n      if (!node) break\n      cols.push(collection.getNodeChildren(node))\n    }\n    return cols\n  }, [collection, expandedPath])\n\n  const matches = React.useMemo(() => {\n    const tokens = query.trim().toLowerCase().split(/\\s+/).filter(Boolean)\n    if (tokens.length === 0) return []\n    const out: T[][] = []\n    collection.visit({\n      onEnter: (node) => {\n        if (collection.isRootNode(node)) return\n        if (collection.isBranchNode(node) && !changeOnSelect) return\n        if (collection.getNodeDisabled(node)) return\n        const path = pathNodes(collection, collection.getNodeValue(node))\n        const text = path\n          .map((n) => collection.stringifyNode(n))\n          .join(\" \")\n          .toLowerCase()\n        if (tokens.every((t) => text.includes(t))) out.push(path)\n      },\n    })\n    return out.slice(0, 50)\n  }, [collection, query, changeOnSelect])\n\n  const setQuery = React.useCallback((next: string) => {\n    setQueryState(next)\n    setHighlighted(null)\n  }, [])\n\n  const expand = React.useCallback(\n    (node: T) => {\n      const v = collection.getNodeValue(node)\n      setHighlighted(v)\n      if (collection.isBranchNode(node)) setExpandedPath(pathValues(collection, v))\n      else setExpandedPath(pathValues(collection, v).slice(0, -1))\n    },\n    [collection]\n  )\n\n  const activate = React.useCallback(\n    (node: T) => {\n      if (collection.getNodeDisabled(node)) return\n      const v = collection.getNodeValue(node)\n      if (collection.isBranchNode(node)) {\n        expand(node)\n        if (changeOnSelect) setValue([v])\n        return\n      }\n      setValue([v])\n      setOpen(false)\n    },\n    [collection, changeOnSelect, expand, setValue, setOpen]\n  )\n\n  const clear = React.useCallback(() => setValue([]), [setValue])\n\n  /** Keyboard navigation over the columns (or the search matches). Returns true when handled. */\n  const moveHighlight = React.useCallback(\n    (key: string) => {\n      if (matches.length > 0) {\n        const values = matches.map((path) => collection.getNodeValue(path[path.length - 1]))\n        const index = highlighted ? values.indexOf(highlighted) : -1\n        if (key === \"ArrowDown\") setHighlighted(values[Math.min(values.length - 1, index + 1)])\n        else if (key === \"ArrowUp\") setHighlighted(values[Math.max(0, index - 1)])\n        else if (key === \"Home\") setHighlighted(values[0])\n        else if (key === \"End\") setHighlighted(values[values.length - 1])\n        else if (key === \"Enter\" && highlighted) {\n          const node = collection.findNode(highlighted)\n          if (node) activate(node)\n        } else return false\n        return true\n      }\n      const enabled = (list: T[]) => list.filter((n) => !collection.getNodeDisabled(n))\n      const node = highlighted ? collection.findNode(highlighted) : undefined\n      if (!node) {\n        const col = enabled(columns[columns.length - 1] ?? [])\n        if (col.length && [\"ArrowDown\", \"ArrowUp\", \"ArrowRight\", \"ArrowLeft\", \"Home\", \"End\"].includes(key)) {\n          setHighlighted(collection.getNodeValue(key === \"ArrowUp\" || key === \"End\" ? col[col.length - 1] : col[0]))\n          return true\n        }\n        return false\n      }\n      const indexPath = collection.getIndexPath(highlighted!) ?? []\n      const siblings = enabled(collection.getSiblingNodes(indexPath))\n      const index = siblings.indexOf(node)\n      const isBranch = collection.isBranchNode(node)\n      switch (key) {\n        case \"ArrowDown\":\n          if (siblings[index + 1]) setHighlighted(collection.getNodeValue(siblings[index + 1]))\n          return true\n        case \"ArrowUp\":\n          if (siblings[index - 1]) setHighlighted(collection.getNodeValue(siblings[index - 1]))\n          return true\n        case \"Home\":\n          setHighlighted(collection.getNodeValue(siblings[0]))\n          return true\n        case \"End\":\n          setHighlighted(collection.getNodeValue(siblings[siblings.length - 1]))\n          return true\n        case \"ArrowRight\": {\n          if (!isBranch) return true\n          const first = enabled(collection.getNodeChildren(node))[0]\n          setExpandedPath(pathValues(collection, highlighted!))\n          if (first) setHighlighted(collection.getNodeValue(first))\n          return true\n        }\n        case \"ArrowLeft\": {\n          const parent = collection.getParentNode(highlighted!)\n          if (!parent || collection.isRootNode(parent)) return true\n          const pv = collection.getNodeValue(parent)\n          setHighlighted(pv)\n          setExpandedPath(pathValues(collection, pv).slice(0, -1))\n          return true\n        }\n        case \"Enter\":\n        case \" \":\n          activate(node)\n          return true\n        default:\n          return false\n      }\n    },\n    [collection, columns, matches, highlighted, activate]\n  )\n\n  const valuePath = React.useMemo(() => (value[0] != null ? pathNodes(collection, value[0]) : []), [collection, value])\n\n  const ctx: CascaderContextValue<T> = {\n    collection,\n    value,\n    setValue,\n    expandedPath,\n    setExpandedPath,\n    highlighted,\n    setHighlighted,\n    open,\n    setOpen,\n    query,\n    setQuery,\n    changeOnSelect,\n    expandTrigger,\n    disabled,\n    readOnly,\n    invalid,\n    activate,\n    expand,\n    clear,\n    valuePath,\n    matches,\n    columns,\n    ids,\n    contentRef,\n    moveHighlight,\n  }\n\n  return (\n    <CascaderContext.Provider value={ctx as unknown as CascaderContextValue}>\n      <PopoverPrimitive.Root\n        open={open}\n        onOpenChange={({ open: next }) => setOpen(next)}\n        positioning={{ placement: \"bottom-start\", gutter: 4, ...positioning }}\n        lazyMount={lazyMount}\n        unmountOnExit={unmountOnExit}\n        ids={{ ...idsProp, content: ids.content }}\n        {...props}\n      >\n        {children}\n      </PopoverPrimitive.Root>\n    </CascaderContext.Provider>\n  )\n}\n\n/* -------------------------------- trigger -------------------------------- */\n\nfunction CascaderTrigger({\n  className,\n  size = \"default\",\n  variant = \"default\",\n  children,\n  onKeyDown,\n  ...props\n}: React.ComponentProps<\"div\"> & { size?: \"sm\" | \"default\"; variant?: \"default\" | \"unstyled\" }) {\n  const ctx = useCascader()\n  return (\n    <PopoverTrigger asChild>\n      <div\n        data-slot=\"cascader-trigger\"\n        role=\"combobox\"\n        aria-haspopup=\"tree\"\n        aria-expanded={ctx.open}\n        aria-controls={ctx.open ? ctx.ids.content : undefined}\n        aria-disabled={ctx.disabled || undefined}\n        aria-invalid={ctx.invalid || undefined}\n        aria-readonly={ctx.readOnly || undefined}\n        tabIndex={ctx.disabled ? -1 : 0}\n        data-size={size}\n        data-variant={variant}\n        data-state={ctx.open ? \"open\" : \"closed\"}\n        data-disabled={ctx.disabled ? \"\" : undefined}\n        data-invalid={ctx.invalid ? \"\" : undefined}\n        data-placeholder-shown={ctx.value.length === 0 ? \"\" : undefined}\n        className={cn(\n          \"flex cursor-default items-center justify-between gap-1.5 text-sm whitespace-nowrap outline-none select-none data-placeholder-shown:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n          variant === \"default\" &&\n            \"w-full rounded-lg border border-input bg-transparent py-2 pr-2 pl-2.5 transition-colors focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 data-invalid:border-destructive data-invalid:ring-3 data-invalid:ring-destructive/20 data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] dark:bg-input/30 dark:hover:bg-input/50 dark:data-invalid:border-destructive/50 dark:data-invalid:ring-destructive/40\",\n          className\n        )}\n        onKeyDown={(event) => {\n          onKeyDown?.(event)\n          if (event.defaultPrevented || ctx.disabled) return\n          if (event.key === \"Enter\" || event.key === \" \" || event.key === \"ArrowDown\") {\n            event.preventDefault()\n            ctx.setOpen(true)\n          } else if ((event.key === \"Backspace\" || event.key === \"Delete\") && ctx.value.length) {\n            ctx.clear()\n          }\n        }}\n        {...props}\n      >\n        {children}\n      </div>\n    </PopoverTrigger>\n  )\n}\n\nfunction CascaderIndicator({ className, children, ...props }: React.ComponentProps<\"span\">) {\n  const ctx = useCascader()\n  return (\n    <span\n      data-slot=\"cascader-indicator\"\n      data-state={ctx.open ? \"open\" : \"closed\"}\n      className={cn(\"ml-auto flex shrink-0 items-center text-muted-foreground\", className)}\n      {...props}\n    >\n      {children ?? <ChevronDownIcon className=\"size-4\" />}\n    </span>\n  )\n}\n\n/** The selected path as text (\"Country / State / City\"), or the placeholder. */\nfunction CascaderValue<T extends TreeNode>({\n  placeholder,\n  separator = \" / \",\n  children,\n  className,\n  ...props\n}: Omit<React.ComponentProps<\"span\">, \"children\"> & {\n  placeholder?: React.ReactNode\n  separator?: React.ReactNode\n  children?: (path: T[]) => React.ReactNode\n}) {\n  const ctx = useCascader<T>()\n  const empty = ctx.valuePath.length === 0\n  return (\n    <span\n      data-slot=\"cascader-value\"\n      data-placeholder-shown={empty ? \"\" : undefined}\n      className={cn(\"flex min-w-0 flex-1 items-center gap-1 truncate text-left\", className)}\n      {...props}\n    >\n      {empty\n        ? placeholder\n        : children\n          ? children(ctx.valuePath)\n          : ctx.valuePath.map((node, index) => (\n              <React.Fragment key={ctx.collection.getNodeValue(node)}>\n                {index > 0 && (\n                  <span data-slot=\"cascader-value-separator\" className=\"text-muted-foreground\">\n                    {separator}\n                  </span>\n                )}\n                <span className={cn(index < ctx.valuePath.length - 1 && \"text-muted-foreground\")}>\n                  {ctx.collection.stringifyNode(node)}\n                </span>\n              </React.Fragment>\n            ))}\n    </span>\n  )\n}\n\nfunction CascaderClearTrigger({ className, children, ...props }: React.ComponentProps<typeof Button>) {\n  const ctx = useCascader()\n  if (ctx.value.length === 0 || ctx.readOnly) return null\n  return (\n    <Button\n      type=\"button\"\n      variant=\"ghost\"\n      size=\"icon-xs\"\n      data-slot=\"cascader-clear-trigger\"\n      aria-label=\"Clear selection\"\n      disabled={ctx.disabled}\n      className={cn(\"-mr-1 text-muted-foreground hover:text-foreground\", className)}\n      onClick={(event) => {\n        event.stopPropagation()\n        ctx.clear()\n      }}\n      onKeyDown={(event) => event.stopPropagation()}\n      {...props}\n    >\n      {children ?? <XIcon />}\n    </Button>\n  )\n}\n\nfunction CascaderHiddenInput({\n  name,\n  ...props\n}: Omit<React.ComponentProps<\"input\">, \"type\" | \"value\"> & { name: string }) {\n  const ctx = useCascader()\n  return <input type=\"hidden\" name={name} value={ctx.value[0] ?? \"\"} data-slot=\"cascader-hidden-input\" {...props} />\n}\n\n/* -------------------------------- content -------------------------------- */\n\nfunction CascaderContent({ className, onKeyDown, ...props }: React.ComponentProps<typeof PopoverContent>) {\n  const ctx = useCascader()\n  // Keep the highlighted item in view.\n  React.useEffect(() => {\n    if (!ctx.highlighted) return\n    const el = ctx.contentRef.current?.querySelector<HTMLElement>(`#${CSS.escape(ctx.ids.item(ctx.highlighted))}`)\n    el?.scrollIntoView({ block: \"nearest\", inline: \"nearest\" })\n  }, [ctx.highlighted, ctx.ids, ctx.contentRef, ctx.columns.length])\n  return (\n    <PopoverContent\n      ref={ctx.contentRef}\n      data-slot=\"cascader-content\"\n      className={cn(\"w-auto min-w-(--reference-width) gap-1 p-1\", className)}\n      onKeyDown={(event) => {\n        onKeyDown?.(event)\n        if (event.defaultPrevented) return\n        if (event.target instanceof HTMLInputElement) {\n          // The search keeps left/right for its caret only while it has text.\n          const vertical = [\"ArrowDown\", \"ArrowUp\", \"Enter\"].includes(event.key)\n          const horizontal = [\"ArrowLeft\", \"ArrowRight\"].includes(event.key) && event.target.value === \"\"\n          if (!vertical && !horizontal) return\n        }\n        if (ctx.moveHighlight(event.key)) event.preventDefault()\n      }}\n      {...props}\n    />\n  )\n}\n\nfunction CascaderSearch({\n  className,\n  placeholder = \"Search…\",\n  ...props\n}: Omit<React.ComponentProps<typeof InputGroupInput>, \"value\" | \"onChange\">) {\n  const ctx = useCascader()\n  return (\n    <InputGroup data-slot=\"cascader-search\" className={cn(\"h-8 shrink-0\", className)}>\n      <InputGroupAddon>\n        <SearchIcon />\n      </InputGroupAddon>\n      <InputGroupInput\n        role=\"searchbox\"\n        placeholder={placeholder}\n        value={ctx.query}\n        onChange={(event) => ctx.setQuery(event.target.value)}\n        aria-activedescendant={ctx.highlighted ? ctx.ids.item(ctx.highlighted) : undefined}\n        {...props}\n      />\n    </InputGroup>\n  )\n}\n\n/** The column view. Hidden while a search query has matches to show. */\nfunction CascaderColumns<T extends TreeNode>({\n  className,\n  children,\n  ...props\n}: Omit<React.ComponentProps<\"div\">, \"children\"> & { children?: (node: T) => React.ReactNode }) {\n  const ctx = useCascader<T>()\n  if (ctx.query.trim()) return null\n  return (\n    <div\n      data-slot=\"cascader-columns\"\n      role=\"tree\"\n      tabIndex={0}\n      aria-activedescendant={ctx.highlighted ? ctx.ids.item(ctx.highlighted) : undefined}\n      className={cn(\"flex max-h-72 overflow-x-auto outline-none\", className)}\n      {...props}\n    >\n      {ctx.columns.map((nodes, depth) => (\n        <CascaderColumn key={depth} depth={depth}>\n          {nodes.map((node) =>\n            children ? (\n              <React.Fragment key={ctx.collection.getNodeValue(node)}>{children(node)}</React.Fragment>\n            ) : (\n              <CascaderItem key={ctx.collection.getNodeValue(node)} node={node} />\n            )\n          )}\n        </CascaderColumn>\n      ))}\n    </div>\n  )\n}\n\nfunction CascaderColumn({ className, depth, ...props }: React.ComponentProps<\"div\"> & { depth: number }) {\n  return (\n    <div\n      data-slot=\"cascader-column\"\n      role=\"group\"\n      data-depth={depth}\n      className={cn(\n        \"flex min-w-40 shrink-0 flex-col gap-px overflow-y-auto not-first:border-l not-first:pl-1 not-last:pr-1\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CascaderItem<T extends TreeNode>({\n  node,\n  className,\n  children,\n  ...props\n}: Omit<React.ComponentProps<\"div\">, \"children\"> & { node: T; children?: React.ReactNode }) {\n  const ctx = useCascader<T>()\n  const value = ctx.collection.getNodeValue(node)\n  const isBranch = ctx.collection.isBranchNode(node)\n  const disabled = ctx.collection.getNodeDisabled(node)\n  const expanded = ctx.expandedPath.includes(value)\n  const selected = ctx.value[0] === value || ctx.valuePath.some((n) => ctx.collection.getNodeValue(n) === value)\n  return (\n    <div\n      id={ctx.ids.item(value)}\n      data-slot=\"cascader-item\"\n      role=\"treeitem\"\n      aria-level={ctx.collection.getDepth(value)}\n      aria-expanded={isBranch ? expanded : undefined}\n      aria-selected={selected}\n      aria-disabled={disabled || undefined}\n      data-value={value}\n      data-branch={isBranch ? \"\" : undefined}\n      data-expanded={expanded ? \"\" : undefined}\n      data-selected={selected ? \"\" : undefined}\n      data-highlighted={ctx.highlighted === value ? \"\" : undefined}\n      data-disabled={disabled ? \"\" : undefined}\n      className={cn(\n        \"relative flex h-7 cursor-default items-center gap-1.5 rounded-md px-2 text-sm outline-none select-none data-expanded:bg-muted data-highlighted:bg-muted data-selected:font-medium data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      onMouseEnter={() => {\n        if (disabled) return\n        if (ctx.expandTrigger === \"hover\") ctx.expand(node)\n        else ctx.setHighlighted(value)\n      }}\n      onClick={() => ctx.activate(node)}\n      {...props}\n    >\n      {children ?? (\n        <>\n          <CascaderItemText>{ctx.collection.stringifyNode(node)}</CascaderItemText>\n          <CascaderItemIndicator />\n        </>\n      )}\n    </div>\n  )\n}\n\nfunction CascaderItemText({ className, ...props }: React.ComponentProps<\"span\">) {\n  return <span data-slot=\"cascader-item-text\" className={cn(\"flex-1 truncate\", className)} {...props} />\n}\n\n/** Chevron on branches, check on the selected leaf. Reads the nearest item's state from the DOM attributes. */\nfunction CascaderItemIndicator({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"cascader-item-indicator\"\n      className={cn(\n        \"ml-auto text-muted-foreground not-in-data-selected:**:data-check:hidden in-data-branch:**:data-check:hidden not-in-data-branch:**:data-chevron:hidden\",\n        className\n      )}\n      {...props}\n    >\n      <ChevronRightIcon data-chevron=\"\" />\n      <CheckIcon data-check=\"\" />\n    </span>\n  )\n}\n\n/** Flat list of matching paths while searching. */\nfunction CascaderSearchResults<T extends TreeNode>({\n  className,\n  children,\n  ...props\n}: Omit<React.ComponentProps<\"div\">, \"children\"> & { children?: (path: T[]) => React.ReactNode }) {\n  const ctx = useCascader<T>()\n  if (!ctx.query.trim()) return null\n  return (\n    <div\n      data-slot=\"cascader-search-results\"\n      role=\"listbox\"\n      className={cn(\"flex max-h-72 flex-col gap-px overflow-y-auto\", className)}\n      {...props}\n    >\n      {ctx.matches.map((path) => {\n        const last = path[path.length - 1]\n        const value = ctx.collection.getNodeValue(last)\n        return children ? (\n          <React.Fragment key={value}>{children(path)}</React.Fragment>\n        ) : (\n          <CascaderSearchResult key={value} path={path} />\n        )\n      })}\n    </div>\n  )\n}\n\nfunction CascaderSearchResult<T extends TreeNode>({\n  path,\n  separator = \" / \",\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & { path: T[]; separator?: React.ReactNode }) {\n  const ctx = useCascader<T>()\n  const last = path[path.length - 1]\n  const value = ctx.collection.getNodeValue(last)\n  return (\n    <div\n      id={ctx.ids.item(value)}\n      data-slot=\"cascader-search-result\"\n      role=\"option\"\n      aria-selected={ctx.value[0] === value}\n      data-value={value}\n      data-selected={ctx.value[0] === value ? \"\" : undefined}\n      data-highlighted={ctx.highlighted === value ? \"\" : undefined}\n      className={cn(\n        \"flex h-7 cursor-default items-center gap-1 rounded-md px-2 text-sm outline-none select-none data-highlighted:bg-muted data-selected:font-medium\",\n        className\n      )}\n      onMouseEnter={() => ctx.setHighlighted(value)}\n      onClick={() => ctx.activate(last)}\n      {...props}\n    >\n      {children ??\n        path.map((node, index) => (\n          <React.Fragment key={ctx.collection.getNodeValue(node)}>\n            {index > 0 && <span className=\"text-muted-foreground\">{separator}</span>}\n            <span className={cn(\"truncate\", index < path.length - 1 && \"text-muted-foreground\")}>\n              {ctx.collection.stringifyNode(node)}\n            </span>\n          </React.Fragment>\n        ))}\n    </div>\n  )\n}\n\nfunction CascaderEmpty({ className, children, ...props }: React.ComponentProps<\"div\">) {\n  const ctx = useCascader()\n  const searching = ctx.query.trim().length > 0\n  if (searching ? ctx.matches.length > 0 : ctx.columns[0].length > 0) return null\n  return (\n    <div\n      data-slot=\"cascader-empty\"\n      className={cn(\"px-2 py-4 text-center text-sm text-muted-foreground\", className)}\n      {...props}\n    >\n      {children ?? \"No results\"}\n    </div>\n  )\n}\n\nexport {\n  Cascader,\n  CascaderClearTrigger,\n  CascaderColumn,\n  CascaderColumns,\n  CascaderContent,\n  CascaderEmpty,\n  CascaderHiddenInput,\n  CascaderIndicator,\n  CascaderItem,\n  CascaderItemIndicator,\n  CascaderItemText,\n  CascaderSearch,\n  CascaderSearchResult,\n  CascaderSearchResults,\n  CascaderTrigger,\n  CascaderValue,\n  createTreeCollection,\n  useCascader,\n  type CascaderProps,\n  type CascaderValueChangeDetails,\n  type TreeCollection,\n  type TreeNode,\n}\n"
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Popover as PopoverPrimitive, createTreeCollection, type TreeCollection, type TreeNode } from \"@ark-ui/react\"\nimport { CheckIcon, ChevronDownIcon, ChevronRightIcon, SearchIcon, XIcon } from \"lucide-react\"\nimport { useControllable } from \"@/lib/controllable\"\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { InputGroup, InputGroupAddon, InputGroupInput } from \"@/components/ui/input-group\"\nimport { PopoverContent, PopoverTrigger } from \"@/components/ui/popover\"\n\n/* -------------------------------- helpers -------------------------------- */\n\n/** Ancestors (root excluded) followed by the node itself. */\nfunction pathNodes<T extends TreeNode>(collection: TreeCollection<T>, value: string): T[] {\n  const node = collection.findNode(value)\n  if (!node) return []\n  const parents = collection.getParentNodes(value).filter((n) => !collection.isRootNode(n))\n  return [...parents, node]\n}\n\nfunction pathValues<T extends TreeNode>(collection: TreeCollection<T>, value: string): string[] {\n  return pathNodes(collection, value).map((n) => collection.getNodeValue(n))\n}\n\nconst itemId = (base: string, value: string) => `${base}-${value.replace(/[^a-zA-Z0-9_-]/g, \"_\")}`\n\n/* -------------------------------- context -------------------------------- */\n\ntype CascaderValueChangeDetails<T extends TreeNode = TreeNode> = {\n  /** `[]` or the selected node's value. */\n  value: string[]\n  /** Nodes from the first level down to the selected node. */\n  path: T[]\n}\n\ntype CascaderContextValue<T extends TreeNode = TreeNode> = {\n  collection: TreeCollection<T>\n  value: string[]\n  setValue: (value: string[]) => void\n  /** Branch values open from the first column down; column `i + 1` lists the children of `expandedPath[i]`. */\n  expandedPath: string[]\n  setExpandedPath: (path: string[]) => void\n  highlighted: string | null\n  setHighlighted: (value: string | null) => void\n  open: boolean\n  setOpen: (open: boolean) => void\n  query: string\n  setQuery: (query: string) => void\n  changeOnSelect: boolean\n  expandTrigger: \"click\" | \"hover\"\n  disabled: boolean\n  readOnly: boolean\n  invalid: boolean\n  /** Activate a node: pick a leaf (and close), or open a branch (and pick it when `changeOnSelect`). */\n  activate: (node: T) => void\n  /** Expand a branch and highlight it, without picking. */\n  expand: (node: T) => void\n  clear: () => void\n  /** Nodes on the path to the current value. */\n  valuePath: T[]\n  /** Flat search matches: each entry is a path of nodes. */\n  matches: T[][]\n  columns: T[][]\n  ids: { content: string; item: (value: string) => string }\n  contentRef: React.RefObject<HTMLDivElement | null>\n  moveHighlight: (key: string) => boolean\n}\n\nconst CascaderContext = React.createContext<CascaderContextValue | null>(null)\n\nfunction useCascader<T extends TreeNode = TreeNode>() {\n  const ctx = React.useContext(CascaderContext)\n  if (!ctx) throw new Error(\"Cascader parts must be used inside <Cascader>\")\n  return ctx as unknown as CascaderContextValue<T>\n}\n\n/* ---------------------------------- root --------------------------------- */\n\ntype CascaderProps<T extends TreeNode> = Omit<\n  React.ComponentProps<typeof PopoverPrimitive.Root>,\n  \"open\" | \"defaultOpen\" | \"onOpenChange\" | \"children\"\n> & {\n  collection: TreeCollection<T>\n  value?: string[]\n  defaultValue?: string[]\n  onValueChange?: (details: CascaderValueChangeDetails<T>) => void\n  /** Let a branch be the answer: clicking it picks it and keeps the popup open. */\n  changeOnSelect?: boolean\n  /** Open the next column on hover instead of click. */\n  expandTrigger?: \"click\" | \"hover\"\n  open?: boolean\n  defaultOpen?: boolean\n  onOpenChange?: (details: { open: boolean }) => void\n  disabled?: boolean\n  readOnly?: boolean\n  invalid?: boolean\n  children: React.ReactNode\n}\n\nfunction Cascader<T extends TreeNode>({\n  collection,\n  value: valueProp,\n  defaultValue = [],\n  onValueChange,\n  changeOnSelect = false,\n  expandTrigger = \"click\",\n  open: openProp,\n  defaultOpen = false,\n  onOpenChange,\n  disabled = false,\n  readOnly = false,\n  invalid = false,\n  positioning,\n  lazyMount = true,\n  unmountOnExit = true,\n  ids: idsProp,\n  children,\n  ...props\n}: CascaderProps<T>) {\n  const [value, setValueState] = useControllable<string[]>(valueProp, defaultValue, (next) =>\n    onValueChange?.({ value: next, path: next[0] != null ? pathNodes(collection, next[0]) : [] })\n  )\n  const [open, setOpenState] = useControllable<boolean>(openProp, defaultOpen, (next) => onOpenChange?.({ open: next }))\n  const [expandedPath, setExpandedPath] = React.useState<string[]>([])\n  const [highlighted, setHighlighted] = React.useState<string | null>(null)\n  const [query, setQueryState] = React.useState(\"\")\n  const contentRef = React.useRef<HTMLDivElement | null>(null)\n  const base = React.useId()\n  const ids = React.useMemo(\n    () => ({ content: idsProp?.content ?? `${base}-content`, item: (v: string) => itemId(`${base}-item`, v) }),\n    [base, idsProp?.content]\n  )\n\n  const setValue = React.useCallback(\n    (next: string[]) => {\n      if (!readOnly) setValueState(next)\n    },\n    [readOnly, setValueState]\n  )\n\n  const setOpen = React.useCallback(\n    (next: boolean) => {\n      if (disabled) return\n      if (next) {\n        // Start from the current value: its ancestors open, itself highlighted.\n        const current = value[0]\n        const path = current != null ? pathValues(collection, current) : []\n        setExpandedPath(path.slice(0, -1))\n        setHighlighted(current ?? null)\n      } else {\n        setQueryState(\"\")\n      }\n      setOpenState(next)\n    },\n    [disabled, value, collection, setOpenState]\n  )\n\n  const columns = React.useMemo(() => {\n    const cols: T[][] = [collection.getNodeChildren(collection.rootNode)]\n    for (const v of expandedPath) {\n      const node = collection.findNode(v)\n      if (!node) break\n      cols.push(collection.getNodeChildren(node))\n    }\n    return cols\n  }, [collection, expandedPath])\n\n  const matches = React.useMemo(() => {\n    const tokens = query.trim().toLowerCase().split(/\\s+/).filter(Boolean)\n    if (tokens.length === 0) return []\n    const out: T[][] = []\n    collection.visit({\n      onEnter: (node) => {\n        if (collection.isRootNode(node)) return\n        if (collection.isBranchNode(node) && !changeOnSelect) return\n        if (collection.getNodeDisabled(node)) return\n        const path = pathNodes(collection, collection.getNodeValue(node))\n        const text = path\n          .map((n) => collection.stringifyNode(n))\n          .join(\" \")\n          .toLowerCase()\n        if (tokens.every((t) => text.includes(t))) out.push(path)\n      },\n    })\n    return out.slice(0, 50)\n  }, [collection, query, changeOnSelect])\n\n  const setQuery = React.useCallback((next: string) => {\n    setQueryState(next)\n    setHighlighted(null)\n  }, [])\n\n  const expand = React.useCallback(\n    (node: T) => {\n      const v = collection.getNodeValue(node)\n      setHighlighted(v)\n      if (collection.isBranchNode(node)) setExpandedPath(pathValues(collection, v))\n      else setExpandedPath(pathValues(collection, v).slice(0, -1))\n    },\n    [collection]\n  )\n\n  const activate = React.useCallback(\n    (node: T) => {\n      if (collection.getNodeDisabled(node)) return\n      const v = collection.getNodeValue(node)\n      if (collection.isBranchNode(node)) {\n        expand(node)\n        if (changeOnSelect) setValue([v])\n        return\n      }\n      setValue([v])\n      setOpen(false)\n    },\n    [collection, changeOnSelect, expand, setValue, setOpen]\n  )\n\n  const clear = React.useCallback(() => setValue([]), [setValue])\n\n  /** Keyboard navigation over the columns (or the search matches). Returns true when handled. */\n  const moveHighlight = React.useCallback(\n    (key: string) => {\n      if (matches.length > 0) {\n        const values = matches.map((path) => collection.getNodeValue(path[path.length - 1]))\n        const index = highlighted ? values.indexOf(highlighted) : -1\n        if (key === \"ArrowDown\") setHighlighted(values[Math.min(values.length - 1, index + 1)])\n        else if (key === \"ArrowUp\") setHighlighted(values[Math.max(0, index - 1)])\n        else if (key === \"Home\") setHighlighted(values[0])\n        else if (key === \"End\") setHighlighted(values[values.length - 1])\n        else if (key === \"Enter\" && highlighted) {\n          const node = collection.findNode(highlighted)\n          if (node) activate(node)\n        } else return false\n        return true\n      }\n      const enabled = (list: T[]) => list.filter((n) => !collection.getNodeDisabled(n))\n      const node = highlighted ? collection.findNode(highlighted) : undefined\n      if (!node) {\n        const col = enabled(columns[columns.length - 1] ?? [])\n        if (col.length && [\"ArrowDown\", \"ArrowUp\", \"ArrowRight\", \"ArrowLeft\", \"Home\", \"End\"].includes(key)) {\n          setHighlighted(collection.getNodeValue(key === \"ArrowUp\" || key === \"End\" ? col[col.length - 1] : col[0]))\n          return true\n        }\n        return false\n      }\n      const indexPath = collection.getIndexPath(highlighted!) ?? []\n      const siblings = enabled(collection.getSiblingNodes(indexPath))\n      const index = siblings.indexOf(node)\n      const isBranch = collection.isBranchNode(node)\n      switch (key) {\n        case \"ArrowDown\":\n          if (siblings[index + 1]) setHighlighted(collection.getNodeValue(siblings[index + 1]))\n          return true\n        case \"ArrowUp\":\n          if (siblings[index - 1]) setHighlighted(collection.getNodeValue(siblings[index - 1]))\n          return true\n        case \"Home\":\n          setHighlighted(collection.getNodeValue(siblings[0]))\n          return true\n        case \"End\":\n          setHighlighted(collection.getNodeValue(siblings[siblings.length - 1]))\n          return true\n        case \"ArrowRight\": {\n          if (!isBranch) return true\n          const first = enabled(collection.getNodeChildren(node))[0]\n          setExpandedPath(pathValues(collection, highlighted!))\n          if (first) setHighlighted(collection.getNodeValue(first))\n          return true\n        }\n        case \"ArrowLeft\": {\n          const parent = collection.getParentNode(highlighted!)\n          if (!parent || collection.isRootNode(parent)) return true\n          const pv = collection.getNodeValue(parent)\n          setHighlighted(pv)\n          setExpandedPath(pathValues(collection, pv).slice(0, -1))\n          return true\n        }\n        case \"Enter\":\n        case \" \":\n          activate(node)\n          return true\n        default:\n          return false\n      }\n    },\n    [collection, columns, matches, highlighted, activate]\n  )\n\n  const valuePath = React.useMemo(() => (value[0] != null ? pathNodes(collection, value[0]) : []), [collection, value])\n\n  const ctx: CascaderContextValue<T> = {\n    collection,\n    value,\n    setValue,\n    expandedPath,\n    setExpandedPath,\n    highlighted,\n    setHighlighted,\n    open,\n    setOpen,\n    query,\n    setQuery,\n    changeOnSelect,\n    expandTrigger,\n    disabled,\n    readOnly,\n    invalid,\n    activate,\n    expand,\n    clear,\n    valuePath,\n    matches,\n    columns,\n    ids,\n    contentRef,\n    moveHighlight,\n  }\n\n  return (\n    <CascaderContext.Provider value={ctx as unknown as CascaderContextValue}>\n      <PopoverPrimitive.Root\n        open={open}\n        onOpenChange={({ open: next }) => setOpen(next)}\n        positioning={{ placement: \"bottom-start\", gutter: 4, ...positioning }}\n        lazyMount={lazyMount}\n        unmountOnExit={unmountOnExit}\n        ids={{ ...idsProp, content: ids.content }}\n        {...props}\n      >\n        {children}\n      </PopoverPrimitive.Root>\n    </CascaderContext.Provider>\n  )\n}\n\n/* -------------------------------- trigger -------------------------------- */\n\nfunction CascaderTrigger({\n  className,\n  size = \"default\",\n  variant = \"default\",\n  children,\n  onKeyDown,\n  ...props\n}: React.ComponentProps<\"div\"> & { size?: \"sm\" | \"default\"; variant?: \"default\" | \"unstyled\" }) {\n  const ctx = useCascader()\n  return (\n    <PopoverTrigger asChild>\n      <div\n        data-slot=\"cascader-trigger\"\n        role=\"combobox\"\n        aria-haspopup=\"tree\"\n        aria-expanded={ctx.open}\n        aria-controls={ctx.open ? ctx.ids.content : undefined}\n        aria-disabled={ctx.disabled || undefined}\n        aria-invalid={ctx.invalid || undefined}\n        aria-readonly={ctx.readOnly || undefined}\n        tabIndex={ctx.disabled ? -1 : 0}\n        data-size={size}\n        data-variant={variant}\n        data-state={ctx.open ? \"open\" : \"closed\"}\n        data-disabled={ctx.disabled ? \"\" : undefined}\n        data-invalid={ctx.invalid ? \"\" : undefined}\n        data-placeholder-shown={ctx.value.length === 0 ? \"\" : undefined}\n        className={cn(\n          \"flex cursor-default items-center justify-between gap-1.5 text-sm whitespace-nowrap outline-none select-none data-placeholder-shown:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n          variant === \"default\" &&\n            \"w-full rounded-lg border border-input bg-transparent py-2 pr-2 pl-2.5 transition-colors focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 data-invalid:border-destructive data-invalid:ring-3 data-invalid:ring-destructive/20 data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] dark:bg-input/30 dark:hover:bg-input/50 dark:data-invalid:border-destructive/50 dark:data-invalid:ring-destructive/40\",\n          className\n        )}\n        onKeyDown={(event) => {\n          onKeyDown?.(event)\n          if (event.defaultPrevented || ctx.disabled) return\n          if (event.key === \"Enter\" || event.key === \" \" || event.key === \"ArrowDown\") {\n            event.preventDefault()\n            ctx.setOpen(true)\n          } else if ((event.key === \"Backspace\" || event.key === \"Delete\") && ctx.value.length) {\n            ctx.clear()\n          }\n        }}\n        {...props}\n      >\n        {children}\n      </div>\n    </PopoverTrigger>\n  )\n}\n\nfunction CascaderIndicator({ className, children, ...props }: React.ComponentProps<\"span\">) {\n  const ctx = useCascader()\n  return (\n    <span\n      data-slot=\"cascader-indicator\"\n      data-state={ctx.open ? \"open\" : \"closed\"}\n      className={cn(\"ml-auto flex shrink-0 items-center text-muted-foreground\", className)}\n      {...props}\n    >\n      {children ?? <ChevronDownIcon className=\"size-4\" />}\n    </span>\n  )\n}\n\n/** The selected path as text (\"Country / State / City\"), or the placeholder. */\nfunction CascaderValue<T extends TreeNode>({\n  placeholder,\n  separator = \" / \",\n  children,\n  className,\n  ...props\n}: Omit<React.ComponentProps<\"span\">, \"children\"> & {\n  placeholder?: React.ReactNode\n  /** Rendered between path segments. */\n  separator?: React.ReactNode\n  children?: (path: T[]) => React.ReactNode\n}) {\n  const ctx = useCascader<T>()\n  const empty = ctx.valuePath.length === 0\n  return (\n    <span\n      data-slot=\"cascader-value\"\n      data-placeholder-shown={empty ? \"\" : undefined}\n      className={cn(\"flex min-w-0 flex-1 items-center gap-1 truncate text-left\", className)}\n      {...props}\n    >\n      {empty\n        ? placeholder\n        : children\n          ? children(ctx.valuePath)\n          : ctx.valuePath.map((node, index) => (\n              <React.Fragment key={ctx.collection.getNodeValue(node)}>\n                {index > 0 && (\n                  <span data-slot=\"cascader-value-separator\" className=\"text-muted-foreground\">\n                    {separator}\n                  </span>\n                )}\n                <span className={cn(index < ctx.valuePath.length - 1 && \"text-muted-foreground\")}>\n                  {ctx.collection.stringifyNode(node)}\n                </span>\n              </React.Fragment>\n            ))}\n    </span>\n  )\n}\n\nfunction CascaderClearTrigger({ className, children, ...props }: React.ComponentProps<typeof Button>) {\n  const ctx = useCascader()\n  if (ctx.value.length === 0 || ctx.readOnly) return null\n  return (\n    <Button\n      type=\"button\"\n      variant=\"ghost\"\n      size=\"icon-xs\"\n      data-slot=\"cascader-clear-trigger\"\n      aria-label=\"Clear selection\"\n      disabled={ctx.disabled}\n      className={cn(\"-mr-1 text-muted-foreground hover:text-foreground\", className)}\n      onClick={(event) => {\n        event.stopPropagation()\n        ctx.clear()\n      }}\n      onKeyDown={(event) => event.stopPropagation()}\n      {...props}\n    >\n      {children ?? <XIcon />}\n    </Button>\n  )\n}\n\nfunction CascaderHiddenInput({\n  name,\n  ...props\n}: Omit<React.ComponentProps<\"input\">, \"type\" | \"value\"> & { name: string }) {\n  const ctx = useCascader()\n  return <input type=\"hidden\" name={name} value={ctx.value[0] ?? \"\"} data-slot=\"cascader-hidden-input\" {...props} />\n}\n\n/* -------------------------------- content -------------------------------- */\n\nfunction CascaderContent({ className, onKeyDown, ...props }: React.ComponentProps<typeof PopoverContent>) {\n  const ctx = useCascader()\n  // Keep the highlighted item in view.\n  React.useEffect(() => {\n    if (!ctx.highlighted) return\n    const el = ctx.contentRef.current?.querySelector<HTMLElement>(`#${CSS.escape(ctx.ids.item(ctx.highlighted))}`)\n    el?.scrollIntoView({ block: \"nearest\", inline: \"nearest\" })\n  }, [ctx.highlighted, ctx.ids, ctx.contentRef, ctx.columns.length])\n  return (\n    <PopoverContent\n      ref={ctx.contentRef}\n      data-slot=\"cascader-content\"\n      className={cn(\"w-auto min-w-(--reference-width) gap-1 p-1\", className)}\n      onKeyDown={(event) => {\n        onKeyDown?.(event)\n        if (event.defaultPrevented) return\n        if (event.target instanceof HTMLInputElement) {\n          // The search keeps left/right for its caret only while it has text.\n          const vertical = [\"ArrowDown\", \"ArrowUp\", \"Enter\"].includes(event.key)\n          const horizontal = [\"ArrowLeft\", \"ArrowRight\"].includes(event.key) && event.target.value === \"\"\n          if (!vertical && !horizontal) return\n        }\n        if (ctx.moveHighlight(event.key)) event.preventDefault()\n      }}\n      {...props}\n    />\n  )\n}\n\nfunction CascaderSearch({\n  className,\n  placeholder = \"Search…\",\n  ...props\n}: Omit<React.ComponentProps<typeof InputGroupInput>, \"value\" | \"onChange\">) {\n  const ctx = useCascader()\n  return (\n    <InputGroup data-slot=\"cascader-search\" className={cn(\"h-8 shrink-0\", className)}>\n      <InputGroupAddon>\n        <SearchIcon />\n      </InputGroupAddon>\n      <InputGroupInput\n        role=\"searchbox\"\n        placeholder={placeholder}\n        value={ctx.query}\n        onChange={(event) => ctx.setQuery(event.target.value)}\n        aria-activedescendant={ctx.highlighted ? ctx.ids.item(ctx.highlighted) : undefined}\n        {...props}\n      />\n    </InputGroup>\n  )\n}\n\n/** The column view. Hidden while a search query has matches to show. */\nfunction CascaderColumns<T extends TreeNode>({\n  className,\n  children,\n  ...props\n}: Omit<React.ComponentProps<\"div\">, \"children\"> & { children?: (node: T) => React.ReactNode }) {\n  const ctx = useCascader<T>()\n  if (ctx.query.trim()) return null\n  return (\n    <div\n      data-slot=\"cascader-columns\"\n      role=\"tree\"\n      tabIndex={0}\n      aria-activedescendant={ctx.highlighted ? ctx.ids.item(ctx.highlighted) : undefined}\n      className={cn(\"flex max-h-72 overflow-x-auto outline-none\", className)}\n      {...props}\n    >\n      {ctx.columns.map((nodes, depth) => (\n        <CascaderColumn key={depth} depth={depth}>\n          {nodes.map((node) =>\n            children ? (\n              <React.Fragment key={ctx.collection.getNodeValue(node)}>{children(node)}</React.Fragment>\n            ) : (\n              <CascaderItem key={ctx.collection.getNodeValue(node)} node={node} />\n            )\n          )}\n        </CascaderColumn>\n      ))}\n    </div>\n  )\n}\n\nfunction CascaderColumn({ className, depth, ...props }: React.ComponentProps<\"div\"> & { depth: number }) {\n  return (\n    <div\n      data-slot=\"cascader-column\"\n      role=\"group\"\n      data-depth={depth}\n      className={cn(\n        \"flex min-w-40 shrink-0 flex-col gap-px overflow-y-auto not-first:border-l not-first:pl-1 not-last:pr-1\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CascaderItem<T extends TreeNode>({\n  node,\n  className,\n  children,\n  ...props\n}: Omit<React.ComponentProps<\"div\">, \"children\"> & { node: T; children?: React.ReactNode }) {\n  const ctx = useCascader<T>()\n  const value = ctx.collection.getNodeValue(node)\n  const isBranch = ctx.collection.isBranchNode(node)\n  const disabled = ctx.collection.getNodeDisabled(node)\n  const expanded = ctx.expandedPath.includes(value)\n  const selected = ctx.value[0] === value || ctx.valuePath.some((n) => ctx.collection.getNodeValue(n) === value)\n  return (\n    <div\n      id={ctx.ids.item(value)}\n      data-slot=\"cascader-item\"\n      role=\"treeitem\"\n      aria-level={ctx.collection.getDepth(value)}\n      aria-expanded={isBranch ? expanded : undefined}\n      aria-selected={selected}\n      aria-disabled={disabled || undefined}\n      data-value={value}\n      data-branch={isBranch ? \"\" : undefined}\n      data-expanded={expanded ? \"\" : undefined}\n      data-selected={selected ? \"\" : undefined}\n      data-highlighted={ctx.highlighted === value ? \"\" : undefined}\n      data-disabled={disabled ? \"\" : undefined}\n      className={cn(\n        \"relative flex h-7 cursor-default items-center gap-1.5 rounded-md px-2 text-sm outline-none select-none data-expanded:bg-muted data-highlighted:bg-muted data-selected:font-medium data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      onMouseEnter={() => {\n        if (disabled) return\n        if (ctx.expandTrigger === \"hover\") ctx.expand(node)\n        else ctx.setHighlighted(value)\n      }}\n      onClick={() => ctx.activate(node)}\n      {...props}\n    >\n      {children ?? (\n        <>\n          <CascaderItemText>{ctx.collection.stringifyNode(node)}</CascaderItemText>\n          <CascaderItemIndicator />\n        </>\n      )}\n    </div>\n  )\n}\n\nfunction CascaderItemText({ className, ...props }: React.ComponentProps<\"span\">) {\n  return <span data-slot=\"cascader-item-text\" className={cn(\"flex-1 truncate\", className)} {...props} />\n}\n\n/** Chevron on branches, check on the selected leaf. Reads the nearest item's state from the DOM attributes. */\nfunction CascaderItemIndicator({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"cascader-item-indicator\"\n      className={cn(\n        \"ml-auto text-muted-foreground not-in-data-selected:**:data-check:hidden in-data-branch:**:data-check:hidden not-in-data-branch:**:data-chevron:hidden\",\n        className\n      )}\n      {...props}\n    >\n      <ChevronRightIcon data-chevron=\"\" />\n      <CheckIcon data-check=\"\" />\n    </span>\n  )\n}\n\n/** Flat list of matching paths while searching. */\nfunction CascaderSearchResults<T extends TreeNode>({\n  className,\n  children,\n  ...props\n}: Omit<React.ComponentProps<\"div\">, \"children\"> & { children?: (path: T[]) => React.ReactNode }) {\n  const ctx = useCascader<T>()\n  if (!ctx.query.trim()) return null\n  return (\n    <div\n      data-slot=\"cascader-search-results\"\n      role=\"listbox\"\n      className={cn(\"flex max-h-72 flex-col gap-px overflow-y-auto\", className)}\n      {...props}\n    >\n      {ctx.matches.map((path) => {\n        const last = path[path.length - 1]\n        const value = ctx.collection.getNodeValue(last)\n        return children ? (\n          <React.Fragment key={value}>{children(path)}</React.Fragment>\n        ) : (\n          <CascaderSearchResult key={value} path={path} />\n        )\n      })}\n    </div>\n  )\n}\n\nfunction CascaderSearchResult<T extends TreeNode>({\n  path,\n  separator = \" / \",\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & { path: T[]; separator?: React.ReactNode }) {\n  const ctx = useCascader<T>()\n  const last = path[path.length - 1]\n  const value = ctx.collection.getNodeValue(last)\n  return (\n    <div\n      id={ctx.ids.item(value)}\n      data-slot=\"cascader-search-result\"\n      role=\"option\"\n      aria-selected={ctx.value[0] === value}\n      data-value={value}\n      data-selected={ctx.value[0] === value ? \"\" : undefined}\n      data-highlighted={ctx.highlighted === value ? \"\" : undefined}\n      className={cn(\n        \"flex h-7 cursor-default items-center gap-1 rounded-md px-2 text-sm outline-none select-none data-highlighted:bg-muted data-selected:font-medium\",\n        className\n      )}\n      onMouseEnter={() => ctx.setHighlighted(value)}\n      onClick={() => ctx.activate(last)}\n      {...props}\n    >\n      {children ??\n        path.map((node, index) => (\n          <React.Fragment key={ctx.collection.getNodeValue(node)}>\n            {index > 0 && <span className=\"text-muted-foreground\">{separator}</span>}\n            <span className={cn(\"truncate\", index < path.length - 1 && \"text-muted-foreground\")}>\n              {ctx.collection.stringifyNode(node)}\n            </span>\n          </React.Fragment>\n        ))}\n    </div>\n  )\n}\n\nfunction CascaderEmpty({ className, children, ...props }: React.ComponentProps<\"div\">) {\n  const ctx = useCascader()\n  const searching = ctx.query.trim().length > 0\n  if (searching ? ctx.matches.length > 0 : ctx.columns[0].length > 0) return null\n  return (\n    <div\n      data-slot=\"cascader-empty\"\n      className={cn(\"px-2 py-4 text-center text-sm text-muted-foreground\", className)}\n      {...props}\n    >\n      {children ?? \"No results\"}\n    </div>\n  )\n}\n\nexport {\n  Cascader,\n  CascaderClearTrigger,\n  CascaderColumn,\n  CascaderColumns,\n  CascaderContent,\n  CascaderEmpty,\n  CascaderHiddenInput,\n  CascaderIndicator,\n  CascaderItem,\n  CascaderItemIndicator,\n  CascaderItemText,\n  CascaderSearch,\n  CascaderSearchResult,\n  CascaderSearchResults,\n  CascaderTrigger,\n  CascaderValue,\n  createTreeCollection,\n  useCascader,\n  type CascaderProps,\n  type CascaderValueChangeDetails,\n  type TreeCollection,\n  type TreeNode,\n}\n"
     }
   ],
   "docs": "## Tree select and cascader\nBoth live on Ark's `TreeCollection` (`createTreeCollection`, re-exported) and a Popover, and own\nonly the open state, the search query, and the value (`value`/`defaultValue`/`onValueChange`,\nalways a `string[]`); the trigger is a focusable `div[role=combobox]` via `PopoverTrigger asChild`\nso chips and clear buttons inside it stay real buttons. Both use `src/lib/controllable.ts`\n`useControllable(controlled, default, onChange)` (the shared controllable-state hook; prefer it\nover local copies).\n`src/components/ui/tree-select.tsx`: `TreeSelect { collection, multiple, selectableBranches,\ncloseOnSelect, expandedValue…, open…, disabled, readOnly, invalid }` > `TreeSelectTrigger`\n(`size`, `variant=\"unstyled\"`; Enter/Space/ArrowDown open, Backspace removes the last chip) >\n`TreeSelectValue` (labels joined, render-prop child gets the nodes) or `TreeSelectChips` >\n`TreeSelectChip node=` (remove button), `TreeSelectClearTrigger`, `TreeSelectIndicator`;\n`TreeSelectContent` (same width as the trigger) > `TreeSelectSearch` (filters the collection with\nancestors kept and auto-expands matches; ArrowDown moves into the tree), `TreeSelectTree`\n(renders the toolkit `TreeView` parts recursively through `TreeSelectNode`; render-prop child\ncustomises the row label), `TreeSelectEmpty`; `TreeSelectHiddenInput name=`. Multiple mode is\nArk checkbox semantics: `value` holds leaf values only, a branch toggles all its leaves, and\n`collapseValues(collection, value)` (used by the value/chips) shows a fully selected branch as one\nchip. Single mode ignores branch picks unless `selectableBranches`. `useTreeSelect()` exposes it all.\n`src/components/ui/cascader.tsx`: `Cascader { collection, changeOnSelect, expandTrigger:\nclick|hover, open…, disabled, readOnly, invalid }` > `CascaderTrigger` > `CascaderValue`\n(the path as \"A / B / C\", `separator`, render-prop child gets the path nodes), `CascaderClearTrigger`,\n`CascaderIndicator`; `CascaderContent` (owns the keyboard: ↑/↓ within a column, → opens a branch,\n← back to the parent, Home/End, Enter/Space activates) > `CascaderSearch` (matches every level,\nflat results replace the columns), `CascaderColumns` (`role=\"tree\"`, `aria-activedescendant`;\ncolumn `i + 1` lists the children of `expandedPath[i]`; render-prop child customises items) >\n`CascaderColumn depth=` > `CascaderItem node=` (`data-branch/expanded/selected/highlighted/disabled`)\n> `CascaderItemText` + `CascaderItemIndicator` (chevron on branches, check on the selected leaf),\n`CascaderSearchResults` > `CascaderSearchResult path=`, `CascaderEmpty`, `CascaderHiddenInput`.\nPicking a leaf closes; a branch opens the next column and, with `changeOnSelect`, is itself the\nvalue. Opening starts from the current value's path. `useCascader()` exposes it all.\n`src/demo/pickers/` is the reference (`/access`, \"Roles & access\"): folder picker with branches selectable and\nicons, people/teams multi-select with chips, hover-expanding location cascader with search, and a\nchange-on-select category cascader."