@multicomma/arkcn 0.1.2 → 0.1.3

package/registry/items/transfer-list.json

@@ -20,6 +20,614 @@
     "TransferListSelectAll",
     "useTransferList"
   ],
+  "parts": [
+    {
+      "name": "TransferList",
+      "props": [
+        {
+          "name": "items",
+          "type": "T[]",
+          "required": true,
+          "description": "Every item, in catalog order.",
+          "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": "filter",
+          "type": "((item: T, query: string) => boolean)",
+          "required": false,
+          "description": "Case-insensitive label match by default.",
+          "from": "arkcn"
+        },
+        {
+          "name": "itemDisabled",
+          "type": "((item: T) => boolean)",
+          "required": false,
+          "default": "(item) => !!(item as TransferListItemBase).disabled",
+          "description": "Returns true for items that can never move.",
+          "from": "arkcn"
+        },
+        {
+          "name": "itemToString",
+          "type": "((item: T) => string)",
+          "required": false,
+          "default": "(item) => (item as TransferListItemBase).label",
+          "description": "Label for an item.",
+          "from": "arkcn"
+        },
+        {
+          "name": "itemToValue",
+          "type": "((item: T) => string)",
+          "required": false,
+          "default": "(item) => (item as TransferListItemBase).value",
+          "description": "Unique value for an item.",
+          "from": "arkcn"
+        },
+        {
+          "name": "onValueChange",
+          "type": "((details: TransferListValueChangeDetails<T>) => void)",
+          "required": false,
+          "description": "Called with the new value whenever it changes.",
+          "from": "arkcn"
+        },
+        {
+          "name": "titles",
+          "type": "Partial<Record<TransferListSide, string>>",
+          "required": false,
+          "description": "Labels for the live region: \"Moved 3 items to {target}\".",
+          "from": "arkcn"
+        },
+        {
+          "name": "value",
+          "type": "string[]",
+          "required": false,
+          "description": "Values on the target side. Kept in catalog order.",
+          "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": "TransferListControls",
+      "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": "TransferListEmpty",
+      "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": "TransferListItem",
+      "props": [
+        {
+          "name": "item",
+          "type": "T",
+          "required": true,
+          "description": "The item 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": "TransferListItemIndicator",
+      "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": "TransferListItemText",
+      "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": "TransferListItems",
+      "props": [
+        {
+          "name": "children",
+          "type": "((item: 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": "TransferListMoveAllTrigger",
+      "props": [
+        {
+          "name": "direction",
+          "type": "TransferListDirection",
+          "required": true,
+          "description": "`right` moves source to target; `left` moves target to source.",
+          "from": "arkcn"
+        },
+        {
+          "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": "TransferListMoveTrigger",
+      "props": [
+        {
+          "name": "direction",
+          "type": "TransferListDirection",
+          "required": true,
+          "description": "`right` moves source to target; `left` moves target to source.",
+          "from": "arkcn"
+        },
+        {
+          "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": "TransferListPanel",
+      "props": [
+        {
+          "name": "side",
+          "type": "TransferListSide",
+          "required": true,
+          "description": "Which side of the anchor or container the part sits on.",
+          "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": "TransferListPanelCount",
+      "props": [
+        {
+          "name": "children",
+          "type": "((selected: number, total: number) => 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": "TransferListPanelHeader",
+      "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": "TransferListPanelTitle",
+      "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": "TransferListSearch",
+      "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": "TransferListSelectAll",
+      "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": "defaultChecked",
+          "type": "CheckedState",
+          "required": false,
+          "description": "The initial checked state of the checkbox when rendered.\nUse when you don't need to control the checked state of the checkbox.",
+          "from": "@zag-js/checkbox"
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "required": false,
+          "description": "Whether the checkbox is disabled",
+          "from": "@zag-js/checkbox"
+        },
+        {
+          "name": "form",
+          "type": "string",
+          "required": false,
+          "description": "The id of the form that the checkbox belongs to.",
+          "from": "@zag-js/checkbox"
+        },
+        {
+          "name": "ids",
+          "type": "ElementIds",
+          "required": false,
+          "description": "The ids of the elements in the checkbox. Useful for composition.",
+          "from": "@zag-js/checkbox"
+        },
+        {
+          "name": "invalid",
+          "type": "boolean",
+          "required": false,
+          "description": "Whether the checkbox is invalid",
+          "from": "@zag-js/checkbox"
+        },
+        {
+          "name": "name",
+          "type": "string",
+          "required": false,
+          "description": "The name of the input field in a checkbox.\nUseful for form submission.",
+          "from": "@zag-js/checkbox"
+        },
+        {
+          "name": "readOnly",
+          "type": "boolean",
+          "required": false,
+          "description": "Whether the checkbox is read-only",
+          "from": "@zag-js/checkbox"
+        },
+        {
+          "name": "required",
+          "type": "boolean",
+          "required": false,
+          "description": "Whether the checkbox is required",
+          "from": "@zag-js/checkbox"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        },
+        {
+          "name": "value",
+          "type": "string",
+          "required": false,
+          "default": "\"on\"",
+          "description": "The value of checkbox input. Useful for form submission.",
+          "from": "@zag-js/checkbox"
+        }
+      ]
+    }
+  ],
   "dependencies": {
     "@ark-ui/react": "^5.39.1",
     "lucide-react": "^1.41.0"
@@ -35,7 +643,7 @@
   "files": [
     {
       "path": "components/ui/transfer-list.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ark } from \"@ark-ui/react\"\nimport {\n  CheckIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n  ChevronsLeftIcon,\n  ChevronsRightIcon,\n  SearchIcon,\n} from \"lucide-react\"\nimport { useControllable } from \"@/lib/controllable\"\nimport { cn } from \"@/lib/utils\"\nimport { LiveRegion, useLiveRegion } from \"@/components/ui/live-region\"\nimport { Button } from \"@/components/ui/button\"\nimport { Checkbox } from \"@/components/ui/checkbox\"\nimport { InputGroup, InputGroupAddon, InputGroupInput } from \"@/components/ui/input-group\"\n\n/* -------------------------------- context -------------------------------- */\n\ntype TransferListSide = \"source\" | \"target\"\ntype TransferListDirection = \"right\" | \"left\"\n\ntype TransferListItemBase = { value: string; label: string; disabled?: boolean }\n\ntype TransferListValueChangeDetails<T> = {\n  /** Values now on the target side, in catalog order. */\n  value: string[]\n  items: T[]\n  /** What just moved and where. */\n  moved: T[]\n  direction: TransferListDirection\n}\n\ntype TransferListContextValue<T = TransferListItemBase> = {\n  items: T[]\n  itemToValue: (item: T) => string\n  itemToString: (item: T) => string\n  itemDisabled: (item: T) => boolean\n  value: string[]\n  /** Items on each side, in catalog order. */\n  sides: Record<TransferListSide, T[]>\n  /** Visible (searched) items on each side. */\n  visible: Record<TransferListSide, T[]>\n  query: Record<TransferListSide, string>\n  setQuery: (side: TransferListSide, query: string) => void\n  selected: Record<TransferListSide, string[]>\n  toggle: (side: TransferListSide, value: string, force?: boolean) => void\n  selectRange: (side: TransferListSide, from: string, to: string) => void\n  selectAll: (side: TransferListSide, checked: boolean) => void\n  /** Move the selected (or given) values across. */\n  move: (direction: TransferListDirection, values?: string[]) => void\n  moveAll: (direction: TransferListDirection) => void\n  disabled: boolean\n  announcement: string\n  focused: Record<TransferListSide, string | null>\n  setFocused: (side: TransferListSide, value: string | null) => void\n}\n\nconst TransferListContext = React.createContext<TransferListContextValue | null>(null)\nconst TransferListSideContext = React.createContext<TransferListSide | null>(null)\n\nfunction useTransferList<T = TransferListItemBase>() {\n  const ctx = React.useContext(TransferListContext)\n  if (!ctx) throw new Error(\"TransferList parts must be used inside <TransferList>\")\n  return ctx as unknown as TransferListContextValue<T>\n}\n\nfunction useTransferListSide() {\n  const side = React.useContext(TransferListSideContext)\n  if (!side) throw new Error(\"This part must be used inside <TransferListPanel>\")\n  return side\n}\n\nconst sideOf = (direction: TransferListDirection): TransferListSide => (direction === \"right\" ? \"source\" : \"target\")\n\n/* ---------------------------------- root --------------------------------- */\n\ntype TransferListProps<T> = Omit<React.ComponentProps<\"div\">, \"defaultValue\" | \"onChange\"> & {\n  items: T[]\n  itemToValue?: (item: T) => string\n  itemToString?: (item: T) => string\n  itemDisabled?: (item: T) => boolean\n  /** Values on the target side. Kept in catalog order. */\n  value?: string[]\n  defaultValue?: string[]\n  onValueChange?: (details: TransferListValueChangeDetails<T>) => void\n  /** Case-insensitive label match by default. */\n  filter?: (item: T, query: string) => boolean\n  disabled?: boolean\n  /** Labels for the live region: \"Moved 3 items to {target}\". */\n  titles?: Partial<Record<TransferListSide, string>>\n}\n\nfunction TransferList<T = TransferListItemBase>({\n  items,\n  itemToValue = (item) => (item as TransferListItemBase).value,\n  itemToString = (item) => (item as TransferListItemBase).label,\n  itemDisabled = (item) => !!(item as TransferListItemBase).disabled,\n  value: valueProp,\n  defaultValue = [],\n  onValueChange,\n  filter,\n  disabled = false,\n  titles,\n  className,\n  children,\n  ...props\n}: TransferListProps<T>) {\n  const order = React.useMemo(() => new Map(items.map((item, i) => [itemToValue(item), i])), [items, itemToValue])\n  const sortValues = React.useCallback(\n    (values: string[]) =>\n      Array.from(new Set(values))\n        .filter((v) => order.has(v))\n        .sort((a, b) => order.get(a)! - order.get(b)!),\n    [order]\n  )\n  const [value, setValueState] = useControllable<string[]>(valueProp, defaultValue)\n  const [query, setQueryState] = React.useState<Record<TransferListSide, string>>({ source: \"\", target: \"\" })\n  const [selected, setSelected] = React.useState<Record<TransferListSide, string[]>>({ source: [], target: [] })\n  const [focused, setFocusedState] = React.useState<Record<TransferListSide, string | null>>({\n    source: null,\n    target: null,\n  })\n  const { message: announcement, announce: setAnnouncement } = useLiveRegion()\n\n  const sides = React.useMemo(() => {\n    const target = new Set(value)\n    return {\n      source: items.filter((item) => !target.has(itemToValue(item))),\n      target: items.filter((item) => target.has(itemToValue(item))),\n    }\n  }, [items, value, itemToValue])\n\n  const matches = React.useCallback(\n    (item: T, q: string) =>\n      filter ? filter(item, q) : itemToString(item).toLowerCase().includes(q.trim().toLowerCase()),\n    [filter, itemToString]\n  )\n  const visible = React.useMemo(\n    () => ({\n      source: query.source.trim() ? sides.source.filter((i) => matches(i, query.source)) : sides.source,\n      target: query.target.trim() ? sides.target.filter((i) => matches(i, query.target)) : sides.target,\n    }),\n    [sides, query, matches]\n  )\n\n  const setQuery = React.useCallback((side: TransferListSide, q: string) => {\n    setQueryState((prev) => ({ ...prev, [side]: q }))\n  }, [])\n  const setFocused = React.useCallback((side: TransferListSide, v: string | null) => {\n    setFocusedState((prev) => (prev[side] === v ? prev : { ...prev, [side]: v }))\n  }, [])\n\n  const toggle = React.useCallback((side: TransferListSide, v: string, force?: boolean) => {\n    setSelected((prev) => {\n      const has = prev[side].includes(v)\n      const next = force ?? !has\n      if (next === has) return prev\n      return { ...prev, [side]: next ? [...prev[side], v] : prev[side].filter((x) => x !== v) }\n    })\n  }, [])\n\n  const selectRange = React.useCallback(\n    (side: TransferListSide, from: string, to: string) => {\n      const list = visible[side].filter((i) => !itemDisabled(i)).map(itemToValue)\n      const a = list.indexOf(from)\n      const b = list.indexOf(to)\n      if (a < 0 || b < 0) return\n      const range = list.slice(Math.min(a, b), Math.max(a, b) + 1)\n      setSelected((prev) => ({ ...prev, [side]: Array.from(new Set([...prev[side], ...range])) }))\n    },\n    [visible, itemDisabled, itemToValue]\n  )\n\n  const selectAll = React.useCallback(\n    (side: TransferListSide, checked: boolean) => {\n      const list = visible[side].filter((i) => !itemDisabled(i)).map(itemToValue)\n      setSelected((prev) => ({\n        ...prev,\n        [side]: checked ? Array.from(new Set([...prev[side], ...list])) : prev[side].filter((v) => !list.includes(v)),\n      }))\n    },\n    [visible, itemDisabled, itemToValue]\n  )\n\n  const move = React.useCallback(\n    (direction: TransferListDirection, values?: string[]) => {\n      if (disabled) return\n      const from = sideOf(direction)\n      const allowed = new Set(sides[from].filter((i) => !itemDisabled(i)).map(itemToValue))\n      const moving = (values ?? selected[from]).filter((v) => allowed.has(v))\n      if (moving.length === 0) return\n      const next = sortValues(direction === \"right\" ? [...value, ...moving] : value.filter((v) => !moving.includes(v)))\n      setValueState(next)\n      setSelected((prev) => ({ ...prev, [from]: prev[from].filter((v) => !moving.includes(v)) }))\n      const movedItems = items.filter((item) => moving.includes(itemToValue(item)))\n      const to = direction === \"right\" ? \"target\" : \"source\"\n      const title = titles?.[to] ?? (to === \"target\" ? \"the selected list\" : \"the available list\")\n      setAnnouncement(\n        movedItems.length === 1\n          ? `Moved ${itemToString(movedItems[0])} to ${title}.`\n          : `Moved ${movedItems.length} items to ${title}.`\n      )\n      onValueChange?.({\n        value: next,\n        items: items.filter((i) => next.includes(itemToValue(i))),\n        moved: movedItems,\n        direction,\n      })\n    },\n    [\n      disabled,\n      sides,\n      selected,\n      value,\n      items,\n      itemToValue,\n      itemToString,\n      itemDisabled,\n      sortValues,\n      setValueState,\n      onValueChange,\n      titles,\n      setAnnouncement,\n    ]\n  )\n\n  const moveAll = React.useCallback(\n    (direction: TransferListDirection) => {\n      const from = sideOf(direction)\n      move(direction, visible[from].map(itemToValue))\n    },\n    [move, visible, itemToValue]\n  )\n\n  const ctx: TransferListContextValue<T> = {\n    items,\n    itemToValue,\n    itemToString,\n    itemDisabled,\n    value,\n    sides,\n    visible,\n    query,\n    setQuery,\n    selected,\n    toggle,\n    selectRange,\n    selectAll,\n    move,\n    moveAll,\n    disabled,\n    announcement,\n    focused,\n    setFocused,\n  }\n\n  return (\n    <TransferListContext.Provider value={ctx as unknown as TransferListContextValue}>\n      <div\n        data-slot=\"transfer-list\"\n        data-disabled={disabled ? \"\" : undefined}\n        className={cn(\"grid grid-cols-1 gap-2 sm:grid-cols-[1fr_auto_1fr] sm:items-stretch\", className)}\n        {...props}\n      >\n        {children}\n        <LiveRegion data-slot=\"transfer-list-live-region\" message={announcement} />\n      </div>\n    </TransferListContext.Provider>\n  )\n}\n\n/* ---------------------------------- panel -------------------------------- */\n\nfunction TransferListPanel({ side, className, ...props }: React.ComponentProps<\"div\"> & { side: TransferListSide }) {\n  const ctx = useTransferList()\n  return (\n    <TransferListSideContext.Provider value={side}>\n      <div\n        data-slot=\"transfer-list-panel\"\n        data-side={side}\n        data-disabled={ctx.disabled ? \"\" : undefined}\n        className={cn(\n          \"flex min-h-64 min-w-0 flex-col overflow-hidden rounded-lg border border-input bg-background text-sm dark:bg-input/30 data-disabled:opacity-50\",\n          className\n        )}\n        {...props}\n      />\n    </TransferListSideContext.Provider>\n  )\n}\n\nfunction TransferListPanelHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"transfer-list-panel-header\"\n      className={cn(\"flex h-9 shrink-0 items-center gap-2 border-b px-2.5\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction TransferListPanelTitle({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span data-slot=\"transfer-list-panel-title\" className={cn(\"flex-1 truncate font-medium\", className)} {...props} />\n  )\n}\n\n/** \"selected / total\" for the side; `children` overrides with `(selected, total) => ReactNode`. */\nfunction TransferListPanelCount({\n  className,\n  children,\n  ...props\n}: Omit<React.ComponentProps<\"span\">, \"children\"> & {\n  children?: (selected: number, total: number) => React.ReactNode\n}) {\n  const ctx = useTransferList()\n  const side = useTransferListSide()\n  const total = ctx.sides[side].length\n  const count = ctx.selected[side].length\n  return (\n    <span\n      data-slot=\"transfer-list-panel-count\"\n      className={cn(\"text-xs text-muted-foreground tabular-nums\", className)}\n      {...props}\n    >\n      {children ? children(count, total) : count > 0 ? `${count} / ${total}` : total}\n    </span>\n  )\n}\n\n/** Header checkbox that selects every visible enabled item on this side. */\nfunction TransferListSelectAll({\n  className,\n  ...props\n}: Omit<React.ComponentProps<typeof Checkbox>, \"checked\" | \"onCheckedChange\">) {\n  const ctx = useTransferList()\n  const side = useTransferListSide()\n  const enabled = ctx.visible[side].filter((i) => !ctx.itemDisabled(i)).map(ctx.itemToValue)\n  const count = enabled.filter((v) => ctx.selected[side].includes(v)).length\n  const checked = enabled.length > 0 && count === enabled.length ? true : count > 0 ? \"indeterminate\" : false\n  return (\n    <Checkbox\n      data-slot=\"transfer-list-select-all\"\n      aria-label={`Select all ${side === \"source\" ? \"available\" : \"selected\"} items`}\n      checked={checked}\n      disabled={ctx.disabled || enabled.length === 0}\n      onCheckedChange={({ checked: next }) => ctx.selectAll(side, next === true)}\n      className={className}\n      {...props}\n    />\n  )\n}\n\nfunction TransferListSearch({\n  className,\n  placeholder = \"Search…\",\n  ...props\n}: Omit<React.ComponentProps<typeof InputGroupInput>, \"value\" | \"onChange\">) {\n  const ctx = useTransferList()\n  const side = useTransferListSide()\n  return (\n    <InputGroup\n      data-slot=\"transfer-list-search\"\n      className={cn(\"h-8 shrink-0 rounded-none border-0 border-b shadow-none has-focus-visible:ring-0\", className)}\n    >\n      <InputGroupAddon>\n        <SearchIcon />\n      </InputGroupAddon>\n      <InputGroupInput\n        role=\"searchbox\"\n        placeholder={placeholder}\n        value={ctx.query[side]}\n        disabled={ctx.disabled}\n        onChange={(event) => ctx.setQuery(side, event.target.value)}\n        {...props}\n      />\n    </InputGroup>\n  )\n}\n\n/* ---------------------------------- items -------------------------------- */\n\nconst TransferListRenderContext = React.createContext<((item: unknown) => React.ReactNode) | undefined>(undefined)\n\n/**\n * The listbox for one side. Roving focus; ↑/↓ move, Space toggles, Shift+↑/↓ extends,\n * ⌘/Ctrl+A selects all, Enter (or double-click) moves the focused item across.\n */\nfunction TransferListItems<T = TransferListItemBase>({\n  className,\n  children,\n  onKeyDown,\n  ...props\n}: Omit<React.ComponentProps<\"div\">, \"children\"> & { children?: (item: T) => React.ReactNode }) {\n  const ctx = useTransferList<T>()\n  const side = useTransferListSide()\n  const ref = React.useRef<HTMLDivElement>(null)\n  const list = ctx.visible[side]\n  const values = list.map(ctx.itemToValue)\n  const focused = ctx.focused[side]\n  const active = focused && values.includes(focused) ? focused : (values[0] ?? null)\n\n  const focusValue = (v: string) => {\n    ctx.setFocused(side, v)\n    ref.current?.querySelector<HTMLElement>(`[data-slot=transfer-list-item][data-value=\"${CSS.escape(v)}\"]`)?.focus()\n  }\n\n  return (\n    <TransferListRenderContext.Provider value={children as ((item: unknown) => React.ReactNode) | undefined}>\n      <div\n        ref={ref}\n        data-slot=\"transfer-list-items\"\n        role=\"listbox\"\n        aria-multiselectable\n        aria-label={side === \"source\" ? \"Available\" : \"Selected\"}\n        data-active-value={active ?? undefined}\n        className={cn(\"flex min-h-0 flex-1 flex-col gap-px overflow-y-auto p-1 outline-none\", className)}\n        onKeyDown={(event) => {\n          onKeyDown?.(event)\n          if (event.defaultPrevented || ctx.disabled) return\n          const enabledValues = list.filter((i) => !ctx.itemDisabled(i)).map(ctx.itemToValue)\n          const index = active ? values.indexOf(active) : -1\n          const step = (delta: number) => {\n            const next = values[Math.max(0, Math.min(values.length - 1, index + delta))]\n            if (!next) return\n            if (event.shiftKey && active && enabledValues.includes(active)) ctx.selectRange(side, active, next)\n            focusValue(next)\n          }\n          switch (event.key) {\n            case \"ArrowDown\":\n              event.preventDefault()\n              step(1)\n              break\n            case \"ArrowUp\":\n              event.preventDefault()\n              step(-1)\n              break\n            case \"Home\":\n              event.preventDefault()\n              if (values[0]) focusValue(values[0])\n              break\n            case \"End\":\n              event.preventDefault()\n              if (values.length) focusValue(values[values.length - 1])\n              break\n            case \" \":\n              event.preventDefault()\n              if (active && enabledValues.includes(active)) ctx.toggle(side, active)\n              break\n            case \"Enter\":\n              event.preventDefault()\n              if (active && enabledValues.includes(active)) {\n                const next = values[index + 1] ?? values[index - 1] ?? null\n                ctx.move(side === \"source\" ? \"right\" : \"left\", [active])\n                ctx.setFocused(side, next)\n                if (next) queueMicrotask(() => focusValue(next))\n              }\n              break\n            case \"a\":\n            case \"A\":\n              if (event.metaKey || event.ctrlKey) {\n                event.preventDefault()\n                ctx.selectAll(side, true)\n              }\n              break\n          }\n        }}\n        {...props}\n      >\n        {list.map((item) => {\n          const v = ctx.itemToValue(item)\n          return <TransferListItem key={v} item={item} tabIndex={v === active ? 0 : -1} />\n        })}\n      </div>\n    </TransferListRenderContext.Provider>\n  )\n}\n\nfunction TransferListItem<T = TransferListItemBase>({\n  item,\n  className,\n  children,\n  ...props\n}: Omit<React.ComponentProps<\"div\">, \"children\"> & { item: T; children?: React.ReactNode }) {\n  const ctx = useTransferList<T>()\n  const side = useTransferListSide()\n  const render = React.useContext(TransferListRenderContext)\n  const value = ctx.itemToValue(item)\n  const disabled = ctx.disabled || ctx.itemDisabled(item)\n  const selected = ctx.selected[side].includes(value)\n  return (\n    <div\n      data-slot=\"transfer-list-item\"\n      role=\"option\"\n      aria-selected={selected}\n      aria-disabled={disabled || undefined}\n      data-value={value}\n      data-selected={selected ? \"\" : undefined}\n      data-disabled={disabled ? \"\" : undefined}\n      className={cn(\n        \"flex h-7 cursor-default items-center gap-2 rounded-md px-2 outline-none select-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:ring-inset data-selected:bg-muted 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      onFocus={() => ctx.setFocused(side, value)}\n      onClick={(event) => {\n        if (disabled) return\n        const anchor = ctx.focused[side]\n        if (event.shiftKey && anchor && anchor !== value) ctx.selectRange(side, anchor, value)\n        else ctx.toggle(side, value)\n        ctx.setFocused(side, value)\n      }}\n      onDoubleClick={() => {\n        if (!disabled) ctx.move(side === \"source\" ? \"right\" : \"left\", [value])\n      }}\n      {...props}\n    >\n      {children ?? (\n        <>\n          <TransferListItemIndicator />\n          <TransferListItemText>{render ? render(item) : ctx.itemToString(item)}</TransferListItemText>\n        </>\n      )}\n    </div>\n  )\n}\n\n/** Checkbox-styled indicator that follows the item's `data-selected`. */\nfunction TransferListItemIndicator({ className, children, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      aria-hidden\n      data-slot=\"transfer-list-item-indicator\"\n      className={cn(\n        \"flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input text-primary-foreground in-data-selected:border-primary in-data-selected:bg-primary not-in-data-selected:**:data-check:hidden dark:bg-input/30 dark:in-data-selected:bg-primary [&_svg]:size-3\",\n        className\n      )}\n      {...props}\n    >\n      {children ?? <CheckIcon data-check=\"\" />}\n    </span>\n  )\n}\n\nfunction TransferListItemText({ className, ...props }: React.ComponentProps<\"span\">) {\n  return <span data-slot=\"transfer-list-item-text\" className={cn(\"flex-1 truncate\", className)} {...props} />\n}\n\nfunction TransferListEmpty({ className, children, ...props }: React.ComponentProps<\"div\">) {\n  const ctx = useTransferList()\n  const side = useTransferListSide()\n  if (ctx.visible[side].length > 0) return null\n  const searching = ctx.query[side].trim().length > 0\n  return (\n    <div\n      data-slot=\"transfer-list-empty\"\n      className={cn(\n        \"flex flex-1 items-center justify-center px-4 py-6 text-center text-sm text-muted-foreground\",\n        className\n      )}\n      {...props}\n    >\n      {children ?? (searching ? \"No matches\" : \"Nothing here\")}\n    </div>\n  )\n}\n\n/* -------------------------------- controls ------------------------------- */\n\nfunction TransferListControls({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"transfer-list-controls\"\n      className={cn(\"flex items-center justify-center gap-1 sm:flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nconst directionIcon = {\n  right: <ChevronRightIcon />,\n  left: <ChevronLeftIcon />,\n}\nconst directionAllIcon = {\n  right: <ChevronsRightIcon />,\n  left: <ChevronsLeftIcon />,\n}\n\n/** Moves the selected items in `direction` (\"right\" = source → target). Polymorphic via `asChild`. */\nfunction TransferListMoveTrigger({\n  direction,\n  asChild,\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof Button> & { direction: TransferListDirection; asChild?: boolean }) {\n  const ctx = useTransferList()\n  const from = sideOf(direction)\n  const count = ctx.selected[from].filter((v) => ctx.sides[from].some((i) => ctx.itemToValue(i) === v)).length\n  const disabled = ctx.disabled || count === 0\n  if (asChild) {\n    return (\n      <ark.button\n        asChild\n        data-slot=\"transfer-list-move-trigger\"\n        data-direction={direction}\n        disabled={disabled}\n        onClick={() => ctx.move(direction)}\n        {...(props as React.ComponentProps<typeof ark.button>)}\n      >\n        {children}\n      </ark.button>\n    )\n  }\n  return (\n    <Button\n      type=\"button\"\n      variant=\"outline\"\n      size=\"icon-sm\"\n      data-slot=\"transfer-list-move-trigger\"\n      data-direction={direction}\n      aria-label={direction === \"right\" ? `Move ${count} selected right` : `Move ${count} selected left`}\n      disabled={disabled}\n      onClick={() => ctx.move(direction)}\n      className={cn(\"rotate-90 sm:rotate-0\", className)}\n      {...props}\n    >\n      {children ?? directionIcon[direction]}\n    </Button>\n  )\n}\n\n/** Moves every visible item in `direction`. Polymorphic via `asChild`. */\nfunction TransferListMoveAllTrigger({\n  direction,\n  asChild,\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof Button> & { direction: TransferListDirection; asChild?: boolean }) {\n  const ctx = useTransferList()\n  const from = sideOf(direction)\n  const disabled = ctx.disabled || ctx.visible[from].every((i) => ctx.itemDisabled(i))\n  if (asChild) {\n    return (\n      <ark.button\n        asChild\n        data-slot=\"transfer-list-move-all-trigger\"\n        data-direction={direction}\n        disabled={disabled}\n        onClick={() => ctx.moveAll(direction)}\n        {...(props as React.ComponentProps<typeof ark.button>)}\n      >\n        {children}\n      </ark.button>\n    )\n  }\n  return (\n    <Button\n      type=\"button\"\n      variant=\"outline\"\n      size=\"icon-sm\"\n      data-slot=\"transfer-list-move-all-trigger\"\n      data-direction={direction}\n      aria-label={direction === \"right\" ? \"Move all right\" : \"Move all left\"}\n      disabled={disabled}\n      onClick={() => ctx.moveAll(direction)}\n      className={cn(\"rotate-90 sm:rotate-0\", className)}\n      {...props}\n    >\n      {children ?? directionAllIcon[direction]}\n    </Button>\n  )\n}\n\nexport {\n  TransferList,\n  TransferListControls,\n  TransferListEmpty,\n  TransferListItem,\n  TransferListItemIndicator,\n  TransferListItemText,\n  TransferListItems,\n  TransferListMoveAllTrigger,\n  TransferListMoveTrigger,\n  TransferListPanel,\n  TransferListPanelCount,\n  TransferListPanelHeader,\n  TransferListPanelTitle,\n  TransferListSearch,\n  TransferListSelectAll,\n  useTransferList,\n  type TransferListDirection,\n  type TransferListItemBase,\n  type TransferListProps,\n  type TransferListSide,\n  type TransferListValueChangeDetails,\n}\n"
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ark } from \"@ark-ui/react\"\nimport {\n  CheckIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n  ChevronsLeftIcon,\n  ChevronsRightIcon,\n  SearchIcon,\n} from \"lucide-react\"\nimport { useControllable } from \"@/lib/controllable\"\nimport { cn } from \"@/lib/utils\"\nimport { LiveRegion, useLiveRegion } from \"@/components/ui/live-region\"\nimport { Button } from \"@/components/ui/button\"\nimport { Checkbox } from \"@/components/ui/checkbox\"\nimport { InputGroup, InputGroupAddon, InputGroupInput } from \"@/components/ui/input-group\"\n\n/* -------------------------------- context -------------------------------- */\n\ntype TransferListSide = \"source\" | \"target\"\ntype TransferListDirection = \"right\" | \"left\"\n\ntype TransferListItemBase = { value: string; label: string; disabled?: boolean }\n\ntype TransferListValueChangeDetails<T> = {\n  /** Values now on the target side, in catalog order. */\n  value: string[]\n  /** Every item, in catalog order. */\n  items: T[]\n  /** What just moved and where. */\n  moved: T[]\n  /** `right` moves source to target; `left` moves target to source. */\n  direction: TransferListDirection\n}\n\ntype TransferListContextValue<T = TransferListItemBase> = {\n  /** Every item, in catalog order. */\n  items: T[]\n  /** Unique value for an item. */\n  itemToValue: (item: T) => string\n  /** Label for an item. */\n  itemToString: (item: T) => string\n  /** Returns true for items that can never move. */\n  itemDisabled: (item: T) => boolean\n  value: string[]\n  /** Items on each side, in catalog order. */\n  sides: Record<TransferListSide, T[]>\n  /** Visible (searched) items on each side. */\n  visible: Record<TransferListSide, T[]>\n  query: Record<TransferListSide, string>\n  setQuery: (side: TransferListSide, query: string) => void\n  selected: Record<TransferListSide, string[]>\n  toggle: (side: TransferListSide, value: string, force?: boolean) => void\n  selectRange: (side: TransferListSide, from: string, to: string) => void\n  selectAll: (side: TransferListSide, checked: boolean) => void\n  /** Move the selected (or given) values across. */\n  move: (direction: TransferListDirection, values?: string[]) => void\n  moveAll: (direction: TransferListDirection) => void\n  disabled: boolean\n  announcement: string\n  focused: Record<TransferListSide, string | null>\n  setFocused: (side: TransferListSide, value: string | null) => void\n}\n\nconst TransferListContext = React.createContext<TransferListContextValue | null>(null)\nconst TransferListSideContext = React.createContext<TransferListSide | null>(null)\n\nfunction useTransferList<T = TransferListItemBase>() {\n  const ctx = React.useContext(TransferListContext)\n  if (!ctx) throw new Error(\"TransferList parts must be used inside <TransferList>\")\n  return ctx as unknown as TransferListContextValue<T>\n}\n\nfunction useTransferListSide() {\n  const side = React.useContext(TransferListSideContext)\n  if (!side) throw new Error(\"This part must be used inside <TransferListPanel>\")\n  return side\n}\n\nconst sideOf = (direction: TransferListDirection): TransferListSide => (direction === \"right\" ? \"source\" : \"target\")\n\n/* ---------------------------------- root --------------------------------- */\n\ntype TransferListProps<T> = Omit<React.ComponentProps<\"div\">, \"defaultValue\" | \"onChange\"> & {\n  /** Every item, in catalog order. */\n  items: T[]\n  /** Unique value for an item. */\n  itemToValue?: (item: T) => string\n  /** Label for an item. */\n  itemToString?: (item: T) => string\n  /** Returns true for items that can never move. */\n  itemDisabled?: (item: T) => boolean\n  /** Values on the target side. Kept in catalog order. */\n  value?: string[]\n  defaultValue?: string[]\n  onValueChange?: (details: TransferListValueChangeDetails<T>) => void\n  /** Case-insensitive label match by default. */\n  filter?: (item: T, query: string) => boolean\n  disabled?: boolean\n  /** Labels for the live region: \"Moved 3 items to {target}\". */\n  titles?: Partial<Record<TransferListSide, string>>\n}\n\nfunction TransferList<T = TransferListItemBase>({\n  items,\n  itemToValue = (item) => (item as TransferListItemBase).value,\n  itemToString = (item) => (item as TransferListItemBase).label,\n  itemDisabled = (item) => !!(item as TransferListItemBase).disabled,\n  value: valueProp,\n  defaultValue = [],\n  onValueChange,\n  filter,\n  disabled = false,\n  titles,\n  className,\n  children,\n  ...props\n}: TransferListProps<T>) {\n  const order = React.useMemo(() => new Map(items.map((item, i) => [itemToValue(item), i])), [items, itemToValue])\n  const sortValues = React.useCallback(\n    (values: string[]) =>\n      Array.from(new Set(values))\n        .filter((v) => order.has(v))\n        .sort((a, b) => order.get(a)! - order.get(b)!),\n    [order]\n  )\n  const [value, setValueState] = useControllable<string[]>(valueProp, defaultValue)\n  const [query, setQueryState] = React.useState<Record<TransferListSide, string>>({ source: \"\", target: \"\" })\n  const [selected, setSelected] = React.useState<Record<TransferListSide, string[]>>({ source: [], target: [] })\n  const [focused, setFocusedState] = React.useState<Record<TransferListSide, string | null>>({\n    source: null,\n    target: null,\n  })\n  const { message: announcement, announce: setAnnouncement } = useLiveRegion()\n\n  const sides = React.useMemo(() => {\n    const target = new Set(value)\n    return {\n      source: items.filter((item) => !target.has(itemToValue(item))),\n      target: items.filter((item) => target.has(itemToValue(item))),\n    }\n  }, [items, value, itemToValue])\n\n  const matches = React.useCallback(\n    (item: T, q: string) =>\n      filter ? filter(item, q) : itemToString(item).toLowerCase().includes(q.trim().toLowerCase()),\n    [filter, itemToString]\n  )\n  const visible = React.useMemo(\n    () => ({\n      source: query.source.trim() ? sides.source.filter((i) => matches(i, query.source)) : sides.source,\n      target: query.target.trim() ? sides.target.filter((i) => matches(i, query.target)) : sides.target,\n    }),\n    [sides, query, matches]\n  )\n\n  const setQuery = React.useCallback((side: TransferListSide, q: string) => {\n    setQueryState((prev) => ({ ...prev, [side]: q }))\n  }, [])\n  const setFocused = React.useCallback((side: TransferListSide, v: string | null) => {\n    setFocusedState((prev) => (prev[side] === v ? prev : { ...prev, [side]: v }))\n  }, [])\n\n  const toggle = React.useCallback((side: TransferListSide, v: string, force?: boolean) => {\n    setSelected((prev) => {\n      const has = prev[side].includes(v)\n      const next = force ?? !has\n      if (next === has) return prev\n      return { ...prev, [side]: next ? [...prev[side], v] : prev[side].filter((x) => x !== v) }\n    })\n  }, [])\n\n  const selectRange = React.useCallback(\n    (side: TransferListSide, from: string, to: string) => {\n      const list = visible[side].filter((i) => !itemDisabled(i)).map(itemToValue)\n      const a = list.indexOf(from)\n      const b = list.indexOf(to)\n      if (a < 0 || b < 0) return\n      const range = list.slice(Math.min(a, b), Math.max(a, b) + 1)\n      setSelected((prev) => ({ ...prev, [side]: Array.from(new Set([...prev[side], ...range])) }))\n    },\n    [visible, itemDisabled, itemToValue]\n  )\n\n  const selectAll = React.useCallback(\n    (side: TransferListSide, checked: boolean) => {\n      const list = visible[side].filter((i) => !itemDisabled(i)).map(itemToValue)\n      setSelected((prev) => ({\n        ...prev,\n        [side]: checked ? Array.from(new Set([...prev[side], ...list])) : prev[side].filter((v) => !list.includes(v)),\n      }))\n    },\n    [visible, itemDisabled, itemToValue]\n  )\n\n  const move = React.useCallback(\n    (direction: TransferListDirection, values?: string[]) => {\n      if (disabled) return\n      const from = sideOf(direction)\n      const allowed = new Set(sides[from].filter((i) => !itemDisabled(i)).map(itemToValue))\n      const moving = (values ?? selected[from]).filter((v) => allowed.has(v))\n      if (moving.length === 0) return\n      const next = sortValues(direction === \"right\" ? [...value, ...moving] : value.filter((v) => !moving.includes(v)))\n      setValueState(next)\n      setSelected((prev) => ({ ...prev, [from]: prev[from].filter((v) => !moving.includes(v)) }))\n      const movedItems = items.filter((item) => moving.includes(itemToValue(item)))\n      const to = direction === \"right\" ? \"target\" : \"source\"\n      const title = titles?.[to] ?? (to === \"target\" ? \"the selected list\" : \"the available list\")\n      setAnnouncement(\n        movedItems.length === 1\n          ? `Moved ${itemToString(movedItems[0])} to ${title}.`\n          : `Moved ${movedItems.length} items to ${title}.`\n      )\n      onValueChange?.({\n        value: next,\n        /** Every item, in catalog order. */\n        items: items.filter((i) => next.includes(itemToValue(i))),\n        moved: movedItems,\n        direction,\n      })\n    },\n    [\n      disabled,\n      sides,\n      selected,\n      value,\n      items,\n      itemToValue,\n      itemToString,\n      itemDisabled,\n      sortValues,\n      setValueState,\n      onValueChange,\n      titles,\n      setAnnouncement,\n    ]\n  )\n\n  const moveAll = React.useCallback(\n    (direction: TransferListDirection) => {\n      const from = sideOf(direction)\n      move(direction, visible[from].map(itemToValue))\n    },\n    [move, visible, itemToValue]\n  )\n\n  const ctx: TransferListContextValue<T> = {\n    items,\n    itemToValue,\n    itemToString,\n    itemDisabled,\n    value,\n    sides,\n    visible,\n    query,\n    setQuery,\n    selected,\n    toggle,\n    selectRange,\n    selectAll,\n    move,\n    moveAll,\n    disabled,\n    announcement,\n    focused,\n    setFocused,\n  }\n\n  return (\n    <TransferListContext.Provider value={ctx as unknown as TransferListContextValue}>\n      <div\n        data-slot=\"transfer-list\"\n        data-disabled={disabled ? \"\" : undefined}\n        className={cn(\"grid grid-cols-1 gap-2 sm:grid-cols-[1fr_auto_1fr] sm:items-stretch\", className)}\n        {...props}\n      >\n        {children}\n        <LiveRegion data-slot=\"transfer-list-live-region\" message={announcement} />\n      </div>\n    </TransferListContext.Provider>\n  )\n}\n\n/* ---------------------------------- panel -------------------------------- */\n\nfunction TransferListPanel({ side, className, ...props }: React.ComponentProps<\"div\"> & { side: TransferListSide }) {\n  const ctx = useTransferList()\n  return (\n    <TransferListSideContext.Provider value={side}>\n      <div\n        data-slot=\"transfer-list-panel\"\n        data-side={side}\n        data-disabled={ctx.disabled ? \"\" : undefined}\n        className={cn(\n          \"flex min-h-64 min-w-0 flex-col overflow-hidden rounded-lg border border-input bg-background text-sm dark:bg-input/30 data-disabled:opacity-50\",\n          className\n        )}\n        {...props}\n      />\n    </TransferListSideContext.Provider>\n  )\n}\n\nfunction TransferListPanelHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"transfer-list-panel-header\"\n      className={cn(\"flex h-9 shrink-0 items-center gap-2 border-b px-2.5\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction TransferListPanelTitle({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span data-slot=\"transfer-list-panel-title\" className={cn(\"flex-1 truncate font-medium\", className)} {...props} />\n  )\n}\n\n/** \"selected / total\" for the side; `children` overrides with `(selected, total) => ReactNode`. */\nfunction TransferListPanelCount({\n  className,\n  children,\n  ...props\n}: Omit<React.ComponentProps<\"span\">, \"children\"> & {\n  children?: (selected: number, total: number) => React.ReactNode\n}) {\n  const ctx = useTransferList()\n  const side = useTransferListSide()\n  const total = ctx.sides[side].length\n  const count = ctx.selected[side].length\n  return (\n    <span\n      data-slot=\"transfer-list-panel-count\"\n      className={cn(\"text-xs text-muted-foreground tabular-nums\", className)}\n      {...props}\n    >\n      {children ? children(count, total) : count > 0 ? `${count} / ${total}` : total}\n    </span>\n  )\n}\n\n/** Header checkbox that selects every visible enabled item on this side. */\nfunction TransferListSelectAll({\n  className,\n  ...props\n}: Omit<React.ComponentProps<typeof Checkbox>, \"checked\" | \"onCheckedChange\">) {\n  const ctx = useTransferList()\n  const side = useTransferListSide()\n  const enabled = ctx.visible[side].filter((i) => !ctx.itemDisabled(i)).map(ctx.itemToValue)\n  const count = enabled.filter((v) => ctx.selected[side].includes(v)).length\n  const checked = enabled.length > 0 && count === enabled.length ? true : count > 0 ? \"indeterminate\" : false\n  return (\n    <Checkbox\n      data-slot=\"transfer-list-select-all\"\n      aria-label={`Select all ${side === \"source\" ? \"available\" : \"selected\"} items`}\n      checked={checked}\n      disabled={ctx.disabled || enabled.length === 0}\n      onCheckedChange={({ checked: next }) => ctx.selectAll(side, next === true)}\n      className={className}\n      {...props}\n    />\n  )\n}\n\nfunction TransferListSearch({\n  className,\n  placeholder = \"Search…\",\n  ...props\n}: Omit<React.ComponentProps<typeof InputGroupInput>, \"value\" | \"onChange\">) {\n  const ctx = useTransferList()\n  const side = useTransferListSide()\n  return (\n    <InputGroup\n      data-slot=\"transfer-list-search\"\n      className={cn(\"h-8 shrink-0 rounded-none border-0 border-b shadow-none has-focus-visible:ring-0\", className)}\n    >\n      <InputGroupAddon>\n        <SearchIcon />\n      </InputGroupAddon>\n      <InputGroupInput\n        role=\"searchbox\"\n        placeholder={placeholder}\n        value={ctx.query[side]}\n        disabled={ctx.disabled}\n        onChange={(event) => ctx.setQuery(side, event.target.value)}\n        {...props}\n      />\n    </InputGroup>\n  )\n}\n\n/* ---------------------------------- items -------------------------------- */\n\nconst TransferListRenderContext = React.createContext<((item: unknown) => React.ReactNode) | undefined>(undefined)\n\n/**\n * The listbox for one side. Roving focus; ↑/↓ move, Space toggles, Shift+↑/↓ extends,\n * ⌘/Ctrl+A selects all, Enter (or double-click) moves the focused item across.\n */\nfunction TransferListItems<T = TransferListItemBase>({\n  className,\n  children,\n  onKeyDown,\n  ...props\n}: Omit<React.ComponentProps<\"div\">, \"children\"> & { children?: (item: T) => React.ReactNode }) {\n  const ctx = useTransferList<T>()\n  const side = useTransferListSide()\n  const ref = React.useRef<HTMLDivElement>(null)\n  const list = ctx.visible[side]\n  const values = list.map(ctx.itemToValue)\n  const focused = ctx.focused[side]\n  const active = focused && values.includes(focused) ? focused : (values[0] ?? null)\n\n  const focusValue = (v: string) => {\n    ctx.setFocused(side, v)\n    ref.current?.querySelector<HTMLElement>(`[data-slot=transfer-list-item][data-value=\"${CSS.escape(v)}\"]`)?.focus()\n  }\n\n  return (\n    <TransferListRenderContext.Provider value={children as ((item: unknown) => React.ReactNode) | undefined}>\n      <div\n        ref={ref}\n        data-slot=\"transfer-list-items\"\n        role=\"listbox\"\n        aria-multiselectable\n        aria-label={side === \"source\" ? \"Available\" : \"Selected\"}\n        data-active-value={active ?? undefined}\n        className={cn(\"flex min-h-0 flex-1 flex-col gap-px overflow-y-auto p-1 outline-none\", className)}\n        onKeyDown={(event) => {\n          onKeyDown?.(event)\n          if (event.defaultPrevented || ctx.disabled) return\n          const enabledValues = list.filter((i) => !ctx.itemDisabled(i)).map(ctx.itemToValue)\n          const index = active ? values.indexOf(active) : -1\n          const step = (delta: number) => {\n            const next = values[Math.max(0, Math.min(values.length - 1, index + delta))]\n            if (!next) return\n            if (event.shiftKey && active && enabledValues.includes(active)) ctx.selectRange(side, active, next)\n            focusValue(next)\n          }\n          switch (event.key) {\n            case \"ArrowDown\":\n              event.preventDefault()\n              step(1)\n              break\n            case \"ArrowUp\":\n              event.preventDefault()\n              step(-1)\n              break\n            case \"Home\":\n              event.preventDefault()\n              if (values[0]) focusValue(values[0])\n              break\n            case \"End\":\n              event.preventDefault()\n              if (values.length) focusValue(values[values.length - 1])\n              break\n            case \" \":\n              event.preventDefault()\n              if (active && enabledValues.includes(active)) ctx.toggle(side, active)\n              break\n            case \"Enter\":\n              event.preventDefault()\n              if (active && enabledValues.includes(active)) {\n                const next = values[index + 1] ?? values[index - 1] ?? null\n                ctx.move(side === \"source\" ? \"right\" : \"left\", [active])\n                ctx.setFocused(side, next)\n                if (next) queueMicrotask(() => focusValue(next))\n              }\n              break\n            case \"a\":\n            case \"A\":\n              if (event.metaKey || event.ctrlKey) {\n                event.preventDefault()\n                ctx.selectAll(side, true)\n              }\n              break\n          }\n        }}\n        {...props}\n      >\n        {list.map((item) => {\n          const v = ctx.itemToValue(item)\n          return <TransferListItem key={v} item={item} tabIndex={v === active ? 0 : -1} />\n        })}\n      </div>\n    </TransferListRenderContext.Provider>\n  )\n}\n\nfunction TransferListItem<T = TransferListItemBase>({\n  item,\n  className,\n  children,\n  ...props\n}: Omit<React.ComponentProps<\"div\">, \"children\"> & { item: T; children?: React.ReactNode }) {\n  const ctx = useTransferList<T>()\n  const side = useTransferListSide()\n  const render = React.useContext(TransferListRenderContext)\n  const value = ctx.itemToValue(item)\n  const disabled = ctx.disabled || ctx.itemDisabled(item)\n  const selected = ctx.selected[side].includes(value)\n  return (\n    <div\n      data-slot=\"transfer-list-item\"\n      role=\"option\"\n      aria-selected={selected}\n      aria-disabled={disabled || undefined}\n      data-value={value}\n      data-selected={selected ? \"\" : undefined}\n      data-disabled={disabled ? \"\" : undefined}\n      className={cn(\n        \"flex h-7 cursor-default items-center gap-2 rounded-md px-2 outline-none select-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:ring-inset data-selected:bg-muted 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      onFocus={() => ctx.setFocused(side, value)}\n      onClick={(event) => {\n        if (disabled) return\n        const anchor = ctx.focused[side]\n        if (event.shiftKey && anchor && anchor !== value) ctx.selectRange(side, anchor, value)\n        else ctx.toggle(side, value)\n        ctx.setFocused(side, value)\n      }}\n      onDoubleClick={() => {\n        if (!disabled) ctx.move(side === \"source\" ? \"right\" : \"left\", [value])\n      }}\n      {...props}\n    >\n      {children ?? (\n        <>\n          <TransferListItemIndicator />\n          <TransferListItemText>{render ? render(item) : ctx.itemToString(item)}</TransferListItemText>\n        </>\n      )}\n    </div>\n  )\n}\n\n/** Checkbox-styled indicator that follows the item's `data-selected`. */\nfunction TransferListItemIndicator({ className, children, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      aria-hidden\n      data-slot=\"transfer-list-item-indicator\"\n      className={cn(\n        \"flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input text-primary-foreground in-data-selected:border-primary in-data-selected:bg-primary not-in-data-selected:**:data-check:hidden dark:bg-input/30 dark:in-data-selected:bg-primary [&_svg]:size-3\",\n        className\n      )}\n      {...props}\n    >\n      {children ?? <CheckIcon data-check=\"\" />}\n    </span>\n  )\n}\n\nfunction TransferListItemText({ className, ...props }: React.ComponentProps<\"span\">) {\n  return <span data-slot=\"transfer-list-item-text\" className={cn(\"flex-1 truncate\", className)} {...props} />\n}\n\nfunction TransferListEmpty({ className, children, ...props }: React.ComponentProps<\"div\">) {\n  const ctx = useTransferList()\n  const side = useTransferListSide()\n  if (ctx.visible[side].length > 0) return null\n  const searching = ctx.query[side].trim().length > 0\n  return (\n    <div\n      data-slot=\"transfer-list-empty\"\n      className={cn(\n        \"flex flex-1 items-center justify-center px-4 py-6 text-center text-sm text-muted-foreground\",\n        className\n      )}\n      {...props}\n    >\n      {children ?? (searching ? \"No matches\" : \"Nothing here\")}\n    </div>\n  )\n}\n\n/* -------------------------------- controls ------------------------------- */\n\nfunction TransferListControls({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"transfer-list-controls\"\n      className={cn(\"flex items-center justify-center gap-1 sm:flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nconst directionIcon = {\n  right: <ChevronRightIcon />,\n  left: <ChevronLeftIcon />,\n}\nconst directionAllIcon = {\n  right: <ChevronsRightIcon />,\n  left: <ChevronsLeftIcon />,\n}\n\n/** Moves the selected items in `direction` (\"right\" = source → target). Polymorphic via `asChild`. */\nfunction TransferListMoveTrigger({\n  direction,\n  asChild,\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof Button> & { direction: TransferListDirection; asChild?: boolean }) {\n  const ctx = useTransferList()\n  const from = sideOf(direction)\n  const count = ctx.selected[from].filter((v) => ctx.sides[from].some((i) => ctx.itemToValue(i) === v)).length\n  const disabled = ctx.disabled || count === 0\n  if (asChild) {\n    return (\n      <ark.button\n        asChild\n        data-slot=\"transfer-list-move-trigger\"\n        data-direction={direction}\n        disabled={disabled}\n        onClick={() => ctx.move(direction)}\n        {...(props as React.ComponentProps<typeof ark.button>)}\n      >\n        {children}\n      </ark.button>\n    )\n  }\n  return (\n    <Button\n      type=\"button\"\n      variant=\"outline\"\n      size=\"icon-sm\"\n      data-slot=\"transfer-list-move-trigger\"\n      data-direction={direction}\n      aria-label={direction === \"right\" ? `Move ${count} selected right` : `Move ${count} selected left`}\n      disabled={disabled}\n      onClick={() => ctx.move(direction)}\n      className={cn(\"rotate-90 sm:rotate-0\", className)}\n      {...props}\n    >\n      {children ?? directionIcon[direction]}\n    </Button>\n  )\n}\n\n/** Moves every visible item in `direction`. Polymorphic via `asChild`. */\nfunction TransferListMoveAllTrigger({\n  direction,\n  asChild,\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof Button> & { direction: TransferListDirection; asChild?: boolean }) {\n  const ctx = useTransferList()\n  const from = sideOf(direction)\n  const disabled = ctx.disabled || ctx.visible[from].every((i) => ctx.itemDisabled(i))\n  if (asChild) {\n    return (\n      <ark.button\n        asChild\n        data-slot=\"transfer-list-move-all-trigger\"\n        data-direction={direction}\n        disabled={disabled}\n        onClick={() => ctx.moveAll(direction)}\n        {...(props as React.ComponentProps<typeof ark.button>)}\n      >\n        {children}\n      </ark.button>\n    )\n  }\n  return (\n    <Button\n      type=\"button\"\n      variant=\"outline\"\n      size=\"icon-sm\"\n      data-slot=\"transfer-list-move-all-trigger\"\n      data-direction={direction}\n      aria-label={direction === \"right\" ? \"Move all right\" : \"Move all left\"}\n      disabled={disabled}\n      onClick={() => ctx.moveAll(direction)}\n      className={cn(\"rotate-90 sm:rotate-0\", className)}\n      {...props}\n    >\n      {children ?? directionAllIcon[direction]}\n    </Button>\n  )\n}\n\nexport {\n  TransferList,\n  TransferListControls,\n  TransferListEmpty,\n  TransferListItem,\n  TransferListItemIndicator,\n  TransferListItemText,\n  TransferListItems,\n  TransferListMoveAllTrigger,\n  TransferListMoveTrigger,\n  TransferListPanel,\n  TransferListPanelCount,\n  TransferListPanelHeader,\n  TransferListPanelTitle,\n  TransferListSearch,\n  TransferListSelectAll,\n  useTransferList,\n  type TransferListDirection,\n  type TransferListItemBase,\n  type TransferListProps,\n  type TransferListSide,\n  type TransferListValueChangeDetails,\n}\n"
     }
   ],
   "docs": "## Transfer list\n`src/components/ui/transfer-list.tsx` moves items between two lists. `TransferList { items,\nitemToValue, itemToString, itemDisabled, value/defaultValue/onValueChange({ value, items, moved,\ndirection }), filter, disabled, titles }` owns the per-side search, selection (ticks), and focus;\n`value` is the target side and is always kept in catalog order (moving never reorders). Parts:\n`TransferListPanel side=\"source\"|\"target\"` > `TransferListPanelHeader` > `TransferListSelectAll`\n(toolkit Checkbox over the visible enabled rows, indeterminate) + `TransferListPanelTitle` +\n`TransferListPanelCount` (\"selected / total\"), `TransferListSearch` (per side; select-all and\nmove-all respect it), `TransferListItems` (`role=\"listbox\"`, roving focus; ↑/↓, Shift+↑/↓ and\nShift+click extend, Space ticks, Enter or double-click moves the focused item across, ⌘/Ctrl+A\nticks all visible; render-prop child customises the label) > `TransferListItem item=`\n(`data-selected/disabled`) > `TransferListItemIndicator` (checkbox-styled span) +\n`TransferListItemText`, `TransferListEmpty`; `TransferListControls` > `TransferListMoveTrigger\ndirection=\"right\"|\"left\"` (selected items; disabled when nothing is ticked) and\n`TransferListMoveAllTrigger` (all visible), both polymorphic via `asChild`; a live region announces\nmoves. Disabled items never move. `/access` has the reference (permissions with group badges)."