@ngrok/mantle 0.72.0 → 0.73.1

package/dist/multi-select.js.map

@@ -1 +1 @@
-{"version":3,"file":"multi-select.js","names":[],"sources":["../src/components/multi-select/multi-select.tsx"],"sourcesContent":["\"use client\";\n\nimport * as Primitive from \"@ariakit/react\";\nimport { CheckIcon } from \"@phosphor-icons/react/Check\";\nimport { LockIcon } from \"@phosphor-icons/react/Lock\";\nimport { XIcon } from \"@phosphor-icons/react/X\";\nimport type {\n\tComponentProps,\n\tComponentPropsWithoutRef,\n\tComponentRef,\n\tKeyboardEvent,\n\tReactNode,\n\tRefObject,\n} from \"react\";\nimport {\n\tcreateContext,\n\tforwardRef,\n\tuseCallback,\n\tuseContext,\n\tuseEffect,\n\tuseMemo,\n\tuseRef,\n} from \"react\";\nimport type { WithAsChild } from \"../../types/as-child.js\";\nimport { getPrefersReducedMotion } from \"../../hooks/use-prefers-reduced-motion.js\";\nimport { composeRefs } from \"../../utils/compose-refs/compose-refs.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Icon } from \"../icon/icon.js\";\nimport type { WithValidation } from \"../input/types.js\";\nimport { Separator } from \"../separator/separator.js\";\nimport { Slot } from \"../slot/index.js\";\n\n/** Type guard to safely narrow Ariakit store state to `string[]` without `as` assertions. */\nconst isStringArray = (value: unknown): value is string[] =>\n\tArray.isArray(value) && value.every((item) => typeof item === \"string\");\n\n/** Stable empty array used as a fallback for `selectedValues` to avoid creating new arrays on every render. */\nconst EMPTY_ARRAY: string[] = [];\n\nconst TriggerRefContext = createContext<RefObject<HTMLDivElement | null>>({ current: null });\n\n/**\n * Shared ref for locked values. Written by `TagValues` during render so that `Item` can read\n * it synchronously and prevent deselection of locked values from the popover.\n * Using a ref (instead of state) avoids re-renders and keeps the write safe in render.\n */\nconst LockedValuesContext = createContext<{ current: string[] }>({ current: [] });\n\n/**\n * Bridges keyboard-nav state between `TagValues` and `Input`, which are siblings in the tree\n * and cannot communicate via a context that either one provides — it must come from a shared\n * ancestor (`Root`). Both refs are written by one side and read by the other:\n *   - `onInputKeyDownRef`: written by `TagValues`, called by `Input` on keydown\n *   - `inputRef`: written by `Input` (registers its DOM node), read by `TagValues` (to focus it)\n */\ntype TagBridgeContextValue = {\n\tonInputKeyDownRef: { current: ((event: KeyboardEvent<HTMLInputElement>) => void) | undefined };\n\tinputRef: { current: HTMLInputElement | null };\n};\n\nconst TagBridgeContext = createContext<TagBridgeContextValue>({\n\tonInputKeyDownRef: { current: undefined },\n\tinputRef: { current: null },\n});\n\ntype MultiSelectProps = Primitive.ComboboxProviderProps<string[]>;\n\n/**\n * Root component for a multi-select combobox. Provides state management for\n * selecting multiple values with typeahead filtering.\n *\n * Use MultiSelect when the user can choose multiple values from a list, with selected\n * items rendered as removable tags/chips. For single selection, use Combobox (with search)\n * or Select (without).\n *\n * @see https://mantle.ngrok.com/components/multi-select#multiselectroot\n *\n * @example\n * ```tsx\n * <MultiSelect.Root>\n *   <MultiSelect.Trigger>\n *     <MultiSelect.TagValues />\n *     <MultiSelect.Input placeholder=\"Select items...\" />\n *   </MultiSelect.Trigger>\n *   <MultiSelect.Content>\n *     <MultiSelect.Item value=\"apple\">Apple</MultiSelect.Item>\n *     <MultiSelect.Item value=\"banana\">Banana</MultiSelect.Item>\n *   </MultiSelect.Content>\n * </MultiSelect.Root>\n * ```\n */\nconst Root = ({ children, defaultSelectedValue = [], ...props }: MultiSelectProps) => {\n\tconst triggerRef = useRef<HTMLDivElement | null>(null);\n\tconst onInputKeyDownRef = useRef<((event: KeyboardEvent<HTMLInputElement>) => void) | undefined>(\n\t\tundefined,\n\t);\n\tconst inputRef = useRef<HTMLInputElement | null>(null);\n\tconst lockedValuesRef = useRef<string[]>([]);\n\tconst tagBridge = useMemo(() => ({ onInputKeyDownRef, inputRef }), []);\n\n\treturn (\n\t\t<TriggerRefContext.Provider value={triggerRef}>\n\t\t\t<TagBridgeContext.Provider value={tagBridge}>\n\t\t\t\t<LockedValuesContext.Provider value={lockedValuesRef}>\n\t\t\t\t\t<Primitive.ComboboxProvider<string[]>\n\t\t\t\t\t\tdefaultSelectedValue={defaultSelectedValue}\n\t\t\t\t\t\t{...props}\n\t\t\t\t\t>\n\t\t\t\t\t\t{children}\n\t\t\t\t\t</Primitive.ComboboxProvider>\n\t\t\t\t</LockedValuesContext.Provider>\n\t\t\t</TagBridgeContext.Provider>\n\t\t</TriggerRefContext.Provider>\n\t);\n};\nRoot.displayName = \"MultiSelect\";\n\ntype MultiSelectTriggerProps = ComponentPropsWithoutRef<\"div\"> & WithValidation;\n\n/**\n * The trigger container for the multi-select. Wraps the input and selected\n * value tags in a styled container that looks like a form input.\n *\n * @see https://mantle.ngrok.com/components/multi-select#multiselecttrigger\n *\n * @example\n * ```tsx\n * <MultiSelect.Root>\n *   <MultiSelect.Trigger>\n *     <MultiSelect.TagValues />\n *     <MultiSelect.Input placeholder=\"Select items...\" />\n *   </MultiSelect.Trigger>\n *   <MultiSelect.Content>\n *     <MultiSelect.Item value=\"apple\">Apple</MultiSelect.Item>\n *   </MultiSelect.Content>\n * </MultiSelect.Root>\n * ```\n */\nconst Trigger = forwardRef<HTMLDivElement, MultiSelectTriggerProps>(\n\t(\n\t\t{\n\t\t\t\"aria-invalid\": _ariaInvalid,\n\t\t\tclassName,\n\t\t\tchildren,\n\t\t\tonKeyDown,\n\t\t\tonMouseDown,\n\t\t\tvalidation: _validation,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst triggerRef = useContext(TriggerRefContext);\n\t\tconst { inputRef } = useContext(TagBridgeContext);\n\t\tconst store = Primitive.useComboboxContext();\n\t\tconst isInvalid = _ariaInvalid != null && _ariaInvalid !== \"false\";\n\t\tconst validation = isInvalid\n\t\t\t? \"error\"\n\t\t\t: typeof _validation === \"function\"\n\t\t\t\t? _validation()\n\t\t\t\t: _validation;\n\n\t\treturn (\n\t\t\t<div\n\t\t\t\trole=\"group\"\n\t\t\t\tdata-slot=\"multi-select-trigger\"\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"cursor-text select-none font-sans text-sm\",\n\t\t\t\t\t\"border-form bg-form text-strong flex min-h-9 w-full flex-wrap items-center gap-1 rounded-md border px-3 py-1 has-[[data-slot=multi-select-tag]]:px-1\",\n\t\t\t\t\t\"has-focus:outline-hidden has-focus-within:ring-4 has-aria-expanded:ring-4\",\n\t\t\t\t\t\"has-focus-within:border-accent-600 has-focus-within:ring-focus-accent has-aria-expanded:border-accent-600 has-aria-expanded:ring-focus-accent\",\n\t\t\t\t\t\"data-validation-success:border-success-600 data-validation-success:has-focus-within:border-success-600 data-validation-success:has-focus-within:ring-focus-success data-validation-success:has-aria-expanded:border-success-600 data-validation-success:has-aria-expanded:ring-focus-success\",\n\t\t\t\t\t\"data-validation-warning:border-warning-600 data-validation-warning:has-focus-within:border-warning-600 data-validation-warning:has-focus-within:ring-focus-warning data-validation-warning:has-aria-expanded:border-warning-600 data-validation-warning:has-aria-expanded:ring-focus-warning\",\n\t\t\t\t\t\"data-validation-error:border-danger-600 data-validation-error:has-focus-within:border-danger-600 data-validation-error:has-focus-within:ring-focus-danger data-validation-error:has-aria-expanded:border-danger-600 data-validation-error:has-aria-expanded:ring-focus-danger\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tdata-validation={validation || undefined}\n\t\t\t\tonKeyDown={(event) => {\n\t\t\t\t\tif (event.key === \"Escape\" && store?.getState().open) {\n\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\tstore.hide();\n\t\t\t\t\t}\n\t\t\t\t\tonKeyDown?.(event);\n\t\t\t\t}}\n\t\t\t\tonMouseDown={(event) => {\n\t\t\t\t\t// When clicking on non-interactive areas (padding, flex gaps between tags), prevent the\n\t\t\t\t\t// default mousedown behavior (which would cause text selection) and explicitly focus the\n\t\t\t\t\t// input. Clicks on buttons, the input itself, or tag spans are handled by those elements.\n\t\t\t\t\tif (\n\t\t\t\t\t\tevent.target instanceof HTMLElement &&\n\t\t\t\t\t\t!event.target.closest(\"button, input, [role='option']\")\n\t\t\t\t\t) {\n\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\tinputRef.current?.focus();\n\t\t\t\t\t}\n\t\t\t\t\tonMouseDown?.(event);\n\t\t\t\t}}\n\t\t\t\tref={composeRefs(triggerRef, ref)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</div>\n\t\t);\n\t},\n);\nTrigger.displayName = \"MultiSelectTrigger\";\n\ntype TagProps = Omit<ComponentProps<\"span\">, \"children\"> & {\n\t/**\n\t * The value to display in the tag label.\n\t */\n\tvalue: string;\n\t/**\n\t * Called when the remove button is clicked.\n\t */\n\tonRemove?: () => void;\n\t/**\n\t * When true, the tag cannot be removed. The remove button is disabled and\n\t * Delete/Backspace key presses are ignored while the tag is focused.\n\t */\n\tlocked?: boolean;\n};\n\n/**\n * The default tag rendered inside `MultiSelect.TagValues` for each selected value.\n * Displays the value label with a remove button and full keyboard navigation support.\n *\n * Use this when building a custom `TagValues`-like component and you want the\n * default tag chrome with consistent styling.\n *\n * @see https://mantle.ngrok.com/components/multi-select#multiselecttag\n *\n * @example\n * ```tsx\n * <MultiSelect.Root>\n *   <MultiSelect.Trigger>\n *     <MultiSelect.TagValues>\n *       {(props) => <MultiSelect.Tag key={props.value} {...props} />}\n *     </MultiSelect.TagValues>\n *     <MultiSelect.Input placeholder=\"Select items...\" />\n *   </MultiSelect.Trigger>\n *   <MultiSelect.Content>\n *     <MultiSelect.Item value=\"apple\">Apple</MultiSelect.Item>\n *   </MultiSelect.Content>\n * </MultiSelect.Root>\n * ```\n */\nconst Tag = forwardRef<HTMLSpanElement, TagProps>(\n\t({ className, value, onRemove, locked = false, onKeyDown, ...props }, ref) => {\n\t\tconst internalRef = useRef<HTMLSpanElement | null>(null);\n\n\t\treturn (\n\t\t\t<span\n\t\t\t\tref={composeRefs(internalRef, ref)}\n\t\t\t\trole=\"option\"\n\t\t\t\taria-selected\n\t\t\t\ttabIndex={-1}\n\t\t\t\tdata-slot=\"multi-select-tag\"\n\t\t\t\tdata-locked={locked || undefined}\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"cursor-default bg-neutral-500/10 border border-neutral-500/20 rounded-xs text-strong inline-flex items-center gap-1 pl-2 pr-0.5 py-0.5 text-sm font-normal\",\n\t\t\t\t\t\"focus-visible:outline-hidden focus-visible:border-accent-600/50 focus-visible:ring-3 focus-visible:ring-focus-accent\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tonKeyDown={(event) => {\n\t\t\t\t\tif (locked && (event.key === \"Backspace\" || event.key === \"Delete\")) {\n\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\tshakeElement(event.currentTarget);\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\tonKeyDown?.(event);\n\t\t\t\t}}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{value}\n\t\t\t\t<button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\taria-label={`Remove ${value}`}\n\t\t\t\t\ttabIndex={-1}\n\t\t\t\t\taria-disabled={locked || undefined}\n\t\t\t\t\tclassName={cx(\n\t\t\t\t\t\t\"cursor-pointer text-strong/40 hover:bg-neutral-500/15 hover:text-strong rounded-xs p-0.5\",\n\t\t\t\t\t\t\"aria-disabled:cursor-default aria-disabled:hover:bg-transparent aria-disabled:hover:text-strong/40\",\n\t\t\t\t\t)}\n\t\t\t\t\tonClick={(event) => {\n\t\t\t\t\t\t// Prevent the click from bubbling to the trigger, which would reopen or refocus the combobox\n\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\t\tif (locked) {\n\t\t\t\t\t\t\t// Shake the tag to signal that removal is blocked\n\t\t\t\t\t\t\tconst tagElement = internalRef.current;\n\t\t\t\t\t\t\tif (tagElement) {\n\t\t\t\t\t\t\t\tshakeElement(tagElement);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t}\n\t\t\t\t\t\tonRemove?.();\n\t\t\t\t\t}}\n\t\t\t\t\tonMouseDown={(event) => {\n\t\t\t\t\t\t// Prevent the input from losing focus on click, which would close the popover before the remove fires\n\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<Icon svg={locked ? <LockIcon /> : <XIcon weight=\"bold\" />} className=\"size-4\" />\n\t\t\t\t</button>\n\t\t\t</span>\n\t\t);\n\t},\n);\nTag.displayName = \"MultiSelectTag\";\n\n/**\n * Props passed to the children render function of `MultiSelect.TagValues`.\n * Spread these onto `MultiSelect.Tag` (or your own tag component) to\n * get the value, remove handler, locked state, and ref-based keyboard-nav\n * registration all wired up automatically.\n *\n * Pre-wired handlers included:\n * - `onKeyDown` — arrow-key nav between tags, Backspace/Delete to remove\n * - `onClick` — focuses the tag and ensures the popover opens/stays open\n */\ntype TagRenderProps = TagProps & {\n\t/** Ref callback — forward this to the tag element to enable keyboard navigation between tags. */\n\tref: (node: HTMLSpanElement | null) => void;\n};\n\ntype MultiSelectTagValuesProps = {\n\t/**\n\t * Values that cannot be removed. Locked tags have their remove button disabled,\n\t * respond to Backspace/Delete key presses with a shake animation, and shake when\n\t * Backspace is pressed on an empty input.\n\t *\n\t * The `locked` state is also forwarded to the render function via `props.locked`\n\t * so custom tag components receive it automatically.\n\t */\n\tlockedValues?: string[];\n\t/**\n\t * Optional render function for each tag. Receives `{ value, onRemove, locked, ref }` —\n\t * spread these onto `MultiSelect.Tag` (or your own element) for full keyboard-nav support.\n\t * When omitted, the default `MultiSelect.Tag` is rendered for each selected value.\n\t *\n\t * @example\n\t * ```tsx\n\t * <MultiSelect.TagValues lockedValues={[\"global\"]}>\n\t *   {(props) => (\n\t *     <MultiSelect.Tag key={props.value} {...props} />\n\t *   )}\n\t * </MultiSelect.TagValues>\n\t * ```\n\t */\n\tchildren?: (props: TagRenderProps) => ReactNode;\n};\n\n/**\n * Renders the selected values as removable tags. Place this inside\n * `MultiSelect.Trigger`, followed by `MultiSelect.Input`.\n *\n * @see https://mantle.ngrok.com/components/multi-select#multiselecttagvalues\n *\n * @example\n * ```tsx\n * <MultiSelect.Root>\n *   <MultiSelect.Trigger>\n *     <MultiSelect.TagValues />\n *     <MultiSelect.Input placeholder=\"Select items...\" />\n *   </MultiSelect.Trigger>\n *   <MultiSelect.Content>\n *     <MultiSelect.Item value=\"apple\">Apple</MultiSelect.Item>\n *   </MultiSelect.Content>\n * </MultiSelect.Root>\n * ```\n */\nconst TagValues = ({ children, lockedValues = [] }: MultiSelectTagValuesProps) => {\n\tconst store = Primitive.useComboboxContext();\n\tconst rawSelectedValue = Primitive.useStoreState(store, \"selectedValue\");\n\tconst selectedValues = isStringArray(rawSelectedValue) ? rawSelectedValue : undefined;\n\tconst selectedArray = selectedValues ?? EMPTY_ARRAY;\n\t// Keep refs in sync so requestAnimationFrame callbacks always read fresh state\n\t// instead of closing over stale values from the render they were scheduled in.\n\tconst selectedArrayRef = useRef<string[]>(selectedArray);\n\tselectedArrayRef.current = selectedArray;\n\t// Use the shared LockedValuesContext ref so Item can also read locked values\n\t// without a separate prop. Writing a ref during render is safe here because\n\t// refs are mutable and don't trigger re-renders.\n\tconst lockedValuesRef = useContext(LockedValuesContext);\n\tlockedValuesRef.current = lockedValues;\n\tconst lockedValuesSet = useMemo(() => new Set(lockedValues), [lockedValues]);\n\tconst tagRefs = useRef<Map<string, HTMLSpanElement>>(new Map());\n\tconst { onInputKeyDownRef, inputRef } = useContext(TagBridgeContext);\n\t// Track pending rAF IDs so we can cancel them on unmount and avoid calling\n\t// focus() on detached DOM nodes if the component unmounts mid-frame.\n\tconst pendingRafsRef = useRef<Set<number>>(new Set());\n\tuseEffect(\n\t\t() => () => {\n\t\t\tpendingRafsRef.current.forEach(cancelAnimationFrame);\n\t\t},\n\t\t[],\n\t);\n\tconst raf = (callback: () => void): void => {\n\t\tlet id: number;\n\t\tid = requestAnimationFrame(() => {\n\t\t\t// Remove the id once the rAF has fired so the set doesn't grow unbounded.\n\t\t\tpendingRafsRef.current.delete(id);\n\t\t\tcallback();\n\t\t});\n\t\tpendingRafsRef.current.add(id);\n\t};\n\n\tconst removeValue = (value: string) => {\n\t\tif (store) {\n\t\t\tconst selected = store.getState().selectedValue;\n\t\t\tif (!isStringArray(selected)) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tstore.setSelectedValue(selected.filter((v) => v !== value));\n\t\t}\n\t};\n\n\tconst focusTag = (index: number) => {\n\t\tconst value = selectedArrayRef.current[index];\n\t\tif (value == null) {\n\t\t\treturn;\n\t\t}\n\t\tconst tagElement = tagRefs.current.get(value);\n\t\tif (tagElement) {\n\t\t\ttagElement.focus();\n\t\t\t// Keep the popover open while a tag is focused. Ariakit closes the\n\t\t\t// popover when the combobox input loses focus, so we reopen it here.\n\t\t\tstore?.show();\n\t\t}\n\t};\n\n\tconst focusInput = () => {\n\t\tinputRef.current?.focus();\n\t};\n\n\tconst handleTagKeyDown = (event: KeyboardEvent<HTMLSpanElement>, index: number) => {\n\t\tconst value = selectedArray[index];\n\t\tswitch (event.key) {\n\t\t\tcase \"ArrowLeft\": {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tif (index > 0) {\n\t\t\t\t\tfocusTag(index - 1);\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase \"ArrowRight\": {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tif (index < selectedArray.length - 1) {\n\t\t\t\t\tfocusTag(index + 1);\n\t\t\t\t} else {\n\t\t\t\t\tfocusInput();\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase \"Backspace\":\n\t\t\tcase \"Delete\": {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tif (value != null) {\n\t\t\t\t\t// Respect locked values: shake instead of removing when locked.\n\t\t\t\t\tif (lockedValuesSet.has(value)) {\n\t\t\t\t\t\tconst tagElement = tagRefs.current.get(value);\n\t\t\t\t\t\tif (tagElement) {\n\t\t\t\t\t\t\tshakeElement(tagElement);\n\t\t\t\t\t\t}\n\t\t\t\t\t\tbreak;\n\t\t\t\t\t}\n\t\t\t\t\tremoveValue(value);\n\t\t\t\t\t// After removal, the array shifts. Focus the next logical tag or the input.\n\t\t\t\t\tif (event.key === \"Backspace\") {\n\t\t\t\t\t\tif (index > 0) {\n\t\t\t\t\t\t\t// Focus the previous tag (will have same index - 1 after removal)\n\t\t\t\t\t\t\t// We need to wait for the next render, so use requestAnimationFrame\n\t\t\t\t\t\t\tconst prevIndex = index - 1;\n\t\t\t\t\t\t\traf(() => focusTag(prevIndex));\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\traf(() => {\n\t\t\t\t\t\t\t\tif (selectedArrayRef.current.length > 0) {\n\t\t\t\t\t\t\t\t\tfocusTag(0);\n\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\tfocusInput();\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t});\n\t\t\t\t\t\t}\n\t\t\t\t\t} else {\n\t\t\t\t\t\t// Delete: move focus right\n\t\t\t\t\t\traf(() => {\n\t\t\t\t\t\t\t// index stays the same since the item at `index` was removed and the next one slides in\n\t\t\t\t\t\t\tif (index < selectedArrayRef.current.length) {\n\t\t\t\t\t\t\t\tfocusTag(index);\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tfocusInput();\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t});\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase \"ArrowUp\":\n\t\t\tcase \"ArrowDown\": {\n\t\t\t\t// Don't scroll the page. Instead, focus the input and forward the key\n\t\t\t\t// to Ariakit so it navigates the popover list.\n\t\t\t\tevent.preventDefault();\n\t\t\t\tfocusInput();\n\t\t\t\tinputRef.current?.dispatchEvent(\n\t\t\t\t\tnew KeyboardEvent(\"keydown\", {\n\t\t\t\t\t\tkey: event.key,\n\t\t\t\t\t\tbubbles: true,\n\t\t\t\t\t\tcancelable: true,\n\t\t\t\t\t\tshiftKey: event.shiftKey,\n\t\t\t\t\t\tctrlKey: event.ctrlKey,\n\t\t\t\t\t\tmetaKey: event.metaKey,\n\t\t\t\t\t\taltKey: event.altKey,\n\t\t\t\t\t}),\n\t\t\t\t);\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tdefault: {\n\t\t\t\t// If a printable character is typed while a tag is focused, jump to input\n\t\t\t\tif (event.key.length === 1 && !event.ctrlKey && !event.metaKey) {\n\t\t\t\t\tfocusInput();\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\t};\n\n\tconst handleInputKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n\t\tif (\n\t\t\tevent.key === \"ArrowLeft\" &&\n\t\t\tevent.currentTarget.selectionStart === 0 &&\n\t\t\tevent.currentTarget.selectionEnd === 0 &&\n\t\t\tselectedArray.length > 0\n\t\t) {\n\t\t\tevent.preventDefault();\n\t\t\tfocusTag(selectedArray.length - 1);\n\t\t\treturn;\n\t\t}\n\t\tif (event.key === \"Backspace\" && event.currentTarget.value === \"\" && selectedArray.length > 0) {\n\t\t\tconst lastValue = selectedArray[selectedArray.length - 1];\n\t\t\tif (lastValue != null) {\n\t\t\t\tif (lockedValuesRef.current.includes(lastValue)) {\n\t\t\t\t\t// The last tag is locked — shake it to signal that removal is blocked.\n\t\t\t\t\tconst tagElement = tagRefs.current.get(lastValue);\n\t\t\t\t\tif (tagElement) {\n\t\t\t\t\t\tshakeElement(tagElement);\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\tremoveValue(lastValue);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t};\n\n\t// Write the latest handler into the bridge ref so Input can call it via onKeyDown.\n\t// Assigned directly during render (safe — refs are mutable and don't trigger re-renders).\n\tonInputKeyDownRef.current = handleInputKeyDown;\n\n\treturn (\n\t\t<>\n\t\t\t{selectedArray.map((value, index) => {\n\t\t\t\tconst tagOptionProps: TagRenderProps = {\n\t\t\t\t\tvalue,\n\t\t\t\t\tlocked: lockedValuesSet.has(value),\n\t\t\t\t\tonRemove: () => {\n\t\t\t\t\t\t// Respect locked values: shake instead of removing when locked.\n\t\t\t\t\t\t// This guards custom tag renderers that call onRemove directly.\n\t\t\t\t\t\tif (lockedValuesSet.has(value)) {\n\t\t\t\t\t\t\tconst tagElement = tagRefs.current.get(value);\n\t\t\t\t\t\t\tif (tagElement) {\n\t\t\t\t\t\t\t\tshakeElement(tagElement);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t}\n\t\t\t\t\t\tremoveValue(value);\n\t\t\t\t\t},\n\t\t\t\t\tref: (node: HTMLSpanElement | null) => {\n\t\t\t\t\t\tif (node) {\n\t\t\t\t\t\t\ttagRefs.current.set(value, node);\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\ttagRefs.current.delete(value);\n\t\t\t\t\t\t}\n\t\t\t\t\t},\n\t\t\t\t\tonKeyDown: (event: KeyboardEvent<HTMLSpanElement>) => handleTagKeyDown(event, index),\n\t\t\t\t\t// Ensure the popover opens/stays open when a tag is clicked,\n\t\t\t\t\t// including when the component was fully blurred before the click.\n\t\t\t\t\tonClick: () => focusTag(index),\n\t\t\t\t};\n\n\t\t\t\tif (children) {\n\t\t\t\t\treturn children(tagOptionProps);\n\t\t\t\t}\n\n\t\t\t\treturn <Tag key={value} {...tagOptionProps} />;\n\t\t\t})}\n\t\t</>\n\t);\n};\nTagValues.displayName = \"MultiSelectTagValues\";\n\ntype MultiSelectInputProps = Omit<Primitive.ComboboxProps, \"render\"> & {\n\t/**\n\t * Called with the raw string value whenever the input text changes.\n\t * Use this to drive external filtering (e.g. with matchSorter) without\n\t * having to unwrap the DOM event. A convenience alternative to `onChange`.\n\t */\n\tonValueChange?: (value: string) => void;\n};\n\n/**\n * The combobox input for filtering items. Place this inside `MultiSelect.Trigger`,\n * after `MultiSelect.TagValues`.\n *\n * @see https://mantle.ngrok.com/components/multi-select#multiselectinput\n *\n * @example\n * ```tsx\n * <MultiSelect.Root>\n *   <MultiSelect.Trigger>\n *     <MultiSelect.TagValues />\n *     <MultiSelect.Input placeholder=\"Select items...\" />\n *   </MultiSelect.Trigger>\n *   <MultiSelect.Content>\n *     <MultiSelect.Item value=\"apple\">Apple</MultiSelect.Item>\n *   </MultiSelect.Content>\n * </MultiSelect.Root>\n * ```\n */\nconst Input = forwardRef<ComponentRef<\"input\">, MultiSelectInputProps>(\n\t(\n\t\t{ className, onBlur, onChange, onFocus, onKeyDown, onValueChange, placeholder, ...props },\n\t\tref,\n\t) => {\n\t\tconst store = Primitive.useComboboxContext();\n\t\tconst { onInputKeyDownRef, inputRef } = useContext(TagBridgeContext);\n\t\tconst rawSelectedValue = Primitive.useStoreState(store, \"selectedValue\");\n\t\tconst selectedValues = isStringArray(rawSelectedValue) ? rawSelectedValue : undefined;\n\t\tconst hasSelectedValues = (selectedValues?.length ?? 0) > 0;\n\n\t\treturn (\n\t\t\t<Primitive.Combobox\n\t\t\t\tautoSelect\n\t\t\t\tdata-slot=\"multi-select-input\"\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"pointer-coarse:text-base min-w-20 flex-1 select-text border-0 bg-transparent text-sm outline-hidden\",\n\t\t\t\t\t\"placeholder:select-none placeholder:text-placeholder\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tonChange={(event) => {\n\t\t\t\t\tonValueChange?.(event.target.value);\n\t\t\t\t\tonChange?.(event);\n\t\t\t\t}}\n\t\t\t\tonKeyDown={(event) => {\n\t\t\t\t\tonInputKeyDownRef.current?.(event);\n\t\t\t\t\tonKeyDown?.(event);\n\t\t\t\t}}\n\t\t\t\tonBlur={(event) => {\n\t\t\t\t\t// When focus moves from the input to a tag, Ariakit would normally\n\t\t\t\t\t// close the popover because the combobox input lost focus. Keep it\n\t\t\t\t\t// open so the user can see the list while navigating tags.\n\t\t\t\t\tif (\n\t\t\t\t\t\tevent.relatedTarget instanceof HTMLElement &&\n\t\t\t\t\t\tevent.relatedTarget.closest('[data-slot=\"multi-select-tag\"]')\n\t\t\t\t\t) {\n\t\t\t\t\t\tstore?.show();\n\t\t\t\t\t}\n\t\t\t\t\tonBlur?.(event);\n\t\t\t\t}}\n\t\t\t\tonFocus={(event) => {\n\t\t\t\t\t// Ariakit doesn't always open the popover on focus when the input is\n\t\t\t\t\t// already mounted (e.g. returning focus from a tag). Force it open.\n\t\t\t\t\tstore?.show();\n\t\t\t\t\tonFocus?.(event);\n\t\t\t\t}}\n\t\t\t\tplaceholder={hasSelectedValues ? undefined : placeholder}\n\t\t\t\t// Register the input's DOM node in the bridge so TagValues can focus it for keyboard nav.\n\t\t\t\tref={composeRefs(inputRef, ref)}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nInput.displayName = \"MultiSelectInput\";\n\ntype MultiSelectContentProps = Omit<Primitive.ComboboxPopoverProps, \"render\"> & WithAsChild;\n\n/**\n * Renders a popover that contains multi-select content, such as items, groups,\n * and separators. Opens below the trigger.\n *\n * @see https://mantle.ngrok.com/components/multi-select#multiselectcontent\n *\n * @example\n * ```tsx\n * <MultiSelect.Root>\n *   <MultiSelect.Trigger>\n *     <MultiSelect.TagValues />\n *     <MultiSelect.Input placeholder=\"Select items...\" />\n *   </MultiSelect.Trigger>\n *   <MultiSelect.Content>\n *     <MultiSelect.Item value=\"apple\">Apple</MultiSelect.Item>\n *     <MultiSelect.Item value=\"banana\">Banana</MultiSelect.Item>\n *   </MultiSelect.Content>\n * </MultiSelect.Root>\n * ```\n */\nconst Content = forwardRef<ComponentRef<\"div\">, MultiSelectContentProps>(\n\t(\n\t\t{\n\t\t\tasChild = false,\n\t\t\tbackdrop = false,\n\t\t\tchildren,\n\t\t\tclassName,\n\t\t\tmodal = true,\n\t\t\tportalElement,\n\t\t\tsameWidth = true,\n\t\t\tunmountOnHide = true,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst triggerRef = useContext(TriggerRefContext);\n\n\t\tconst getAnchorRect = useCallback(() => {\n\t\t\treturn triggerRef.current?.getBoundingClientRect() ?? null;\n\t\t}, [triggerRef]);\n\n\t\tconst getPortalElement = useCallback(\n\t\t\t(element: HTMLElement) => {\n\t\t\t\tif (typeof portalElement === \"function\") {\n\t\t\t\t\treturn portalElement(element);\n\t\t\t\t}\n\n\t\t\t\treturn (\n\t\t\t\t\tportalElement ??\n\t\t\t\t\ttriggerRef.current?.closest<HTMLElement>(\"[data-mantle-modal-content]\") ??\n\t\t\t\t\telement.ownerDocument.body\n\t\t\t\t);\n\t\t\t},\n\t\t\t[portalElement, triggerRef],\n\t\t);\n\n\t\tconst hideOnInteractOutside = useCallback(\n\t\t\t(event: Event) => {\n\t\t\t\t// Keep the popover open when interacting with any part of the trigger\n\t\t\t\t// (tags, buttons, input, padding). Ariakit would otherwise close on any\n\t\t\t\t// mousedown outside the popover — including tag clicks.\n\t\t\t\tif (event.target instanceof Node && triggerRef.current?.contains(event.target)) {\n\t\t\t\t\treturn false;\n\t\t\t\t}\n\t\t\t\treturn true;\n\t\t\t},\n\t\t\t[triggerRef],\n\t\t);\n\n\t\treturn (\n\t\t\t<Primitive.ComboboxPopover\n\t\t\t\tdata-slot=\"multi-select-content\"\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"border-popover bg-popover relative z-50 max-h-96 min-w-32 scrollbar overflow-y-scroll overflow-x-hidden overscroll-y-none rounded-md border shadow-md pt-1 pb-1 has-data-content-footer:pb-0 font-sans flex flex-col gap-px focus:outline-hidden\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tbackdrop={backdrop}\n\t\t\t\tgetAnchorRect={getAnchorRect}\n\t\t\t\tgutter={4}\n\t\t\t\thideOnInteractOutside={hideOnInteractOutside}\n\t\t\t\tmodal={modal}\n\t\t\t\tportalElement={getPortalElement}\n\t\t\t\tref={ref}\n\t\t\t\trender={\n\t\t\t\t\tasChild ? ({ ref, ...childProps }) => <Slot ref={ref} {...childProps} /> : undefined\n\t\t\t\t}\n\t\t\t\tsameWidth={sameWidth}\n\t\t\t\tunmountOnHide={unmountOnHide}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</Primitive.ComboboxPopover>\n\t\t);\n\t},\n);\nContent.displayName = \"MultiSelectContent\";\n\ntype MultiSelectItemProps = Omit<Primitive.ComboboxItemProps, \"render\"> & WithAsChild;\n\n/**\n * Renders a selectable item inside a `MultiSelect.Content` component.\n * Items display a checkbox indicator when selected.\n *\n * @see https://mantle.ngrok.com/components/multi-select#multiselectitem\n *\n * @example\n * ```tsx\n * <MultiSelect.Root>\n *   <MultiSelect.Trigger>\n *     <MultiSelect.TagValues />\n *     <MultiSelect.Input placeholder=\"Select items...\" />\n *   </MultiSelect.Trigger>\n *   <MultiSelect.Content>\n *     <MultiSelect.Item value=\"apple\">Apple</MultiSelect.Item>\n *     <MultiSelect.Item value=\"banana\">Banana</MultiSelect.Item>\n *   </MultiSelect.Content>\n * </MultiSelect.Root>\n * ```\n */\nconst Item = forwardRef<ComponentRef<\"div\">, MultiSelectItemProps>(\n\t(\n\t\t{ asChild = false, children, className, focusOnHover = true, value, onClick, ...props },\n\t\tref,\n\t) => {\n\t\tconst lockedValuesRef = useContext(LockedValuesContext);\n\t\tconst isLocked = value != null && lockedValuesRef.current.includes(value);\n\n\t\treturn (\n\t\t\t<Primitive.ComboboxItem\n\t\t\t\tdata-slot=\"multi-select-item\"\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"relative mx-1 cursor-pointer rounded-md pl-2 pr-8 py-1.5 text-strong text-sm font-normal flex min-w-0 items-center gap-2\",\n\t\t\t\t\t\"[[role=option]+&]:mt-px\",\n\t\t\t\t\t\"data-active-item:bg-active-menu-item\",\n\t\t\t\t\t\"aria-disabled:opacity-50\",\n\t\t\t\t\t\"aria-selected:bg-selected-menu-item aria-selected:data-active-item:bg-active-selected-menu-item\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tfocusOnHover={focusOnHover}\n\t\t\t\tonClick={(event) => {\n\t\t\t\t\t// Prevent Ariakit from toggling off a locked value.\n\t\t\t\t\t// Ariakit checks event.defaultPrevented before executing its selection logic.\n\t\t\t\t\tif (isLocked) {\n\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\tonClick?.(event);\n\t\t\t\t}}\n\t\t\t\tref={ref}\n\t\t\t\trender={\n\t\t\t\t\tasChild ? ({ ref, ...childProps }) => <Slot ref={ref} {...childProps} /> : undefined\n\t\t\t\t}\n\t\t\t\tresetValueOnSelect\n\t\t\t\tvalue={value}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t\t<Primitive.ComboboxItemCheck className=\"absolute right-2 flex h-3.5 w-3.5 items-center justify-center\">\n\t\t\t\t\t<Icon svg={<CheckIcon weight=\"bold\" />} className=\"size-4 text-accent-600\" />\n\t\t\t\t</Primitive.ComboboxItemCheck>\n\t\t\t</Primitive.ComboboxItem>\n\t\t);\n\t},\n);\nItem.displayName = \"MultiSelectItem\";\n\ntype MultiSelectGroupProps = Omit<Primitive.ComboboxGroupProps, \"render\"> & WithAsChild;\n\n/**\n * Renders a group for MultiSelect.Item elements.\n *\n * @see https://mantle.ngrok.com/components/multi-select#multiselectgroup\n *\n * @example\n * ```tsx\n * <MultiSelect.Root>\n *   <MultiSelect.Trigger>\n *     <MultiSelect.TagValues />\n *     <MultiSelect.Input placeholder=\"Select items...\" />\n *   </MultiSelect.Trigger>\n *   <MultiSelect.Content>\n *     <MultiSelect.Group>\n *       <MultiSelect.GroupLabel>Fruits</MultiSelect.GroupLabel>\n *       <MultiSelect.Item value=\"apple\">Apple</MultiSelect.Item>\n *       <MultiSelect.Item value=\"banana\">Banana</MultiSelect.Item>\n *     </MultiSelect.Group>\n *   </MultiSelect.Content>\n * </MultiSelect.Root>\n * ```\n */\nconst Group = forwardRef<ComponentRef<\"div\">, MultiSelectGroupProps>(\n\t({ asChild = false, children, ...props }, ref) => {\n\t\treturn (\n\t\t\t<Primitive.ComboboxGroup\n\t\t\t\tdata-slot=\"multi-select-group\"\n\t\t\t\tclassName=\"mx-1\"\n\t\t\t\tref={ref}\n\t\t\t\trender={\n\t\t\t\t\tasChild ? ({ ref, ...childProps }) => <Slot ref={ref} {...childProps} /> : undefined\n\t\t\t\t}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</Primitive.ComboboxGroup>\n\t\t);\n\t},\n);\nGroup.displayName = \"MultiSelectGroup\";\n\ntype MultiSelectGroupLabelProps = Omit<Primitive.ComboboxGroupLabelProps, \"render\"> & WithAsChild;\n\n/**\n * Renders a label in a multi-select group.\n *\n * @see https://mantle.ngrok.com/components/multi-select#multiselectgrouplabel\n *\n * @example\n * ```tsx\n * <MultiSelect.Root>\n *   <MultiSelect.Trigger>\n *     <MultiSelect.TagValues />\n *     <MultiSelect.Input placeholder=\"Select items...\" />\n *   </MultiSelect.Trigger>\n *   <MultiSelect.Content>\n *     <MultiSelect.Group>\n *       <MultiSelect.GroupLabel>Fruits</MultiSelect.GroupLabel>\n *       <MultiSelect.Item value=\"apple\">Apple</MultiSelect.Item>\n *     </MultiSelect.Group>\n *   </MultiSelect.Content>\n * </MultiSelect.Root>\n * ```\n */\nconst GroupLabel = forwardRef<ComponentRef<\"div\">, MultiSelectGroupLabelProps>(\n\t({ asChild = false, children, className, ...props }, ref) => {\n\t\treturn (\n\t\t\t<Primitive.ComboboxGroupLabel\n\t\t\t\tdata-slot=\"multi-select-group-label\"\n\t\t\t\tclassName={cx(\"text-muted px-2 py-1 text-xs font-medium\", className)}\n\t\t\t\tref={ref}\n\t\t\t\trender={\n\t\t\t\t\tasChild ? ({ ref, ...childProps }) => <Slot ref={ref} {...childProps} /> : undefined\n\t\t\t\t}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</Primitive.ComboboxGroupLabel>\n\t\t);\n\t},\n);\nGroupLabel.displayName = \"MultiSelectGroupLabel\";\n\ntype MultiSelectGroupDescriptionProps = ComponentPropsWithoutRef<\"p\">;\n\n/**\n * Renders a description below a `MultiSelect.GroupLabel` inside a `MultiSelect.Group`.\n * Provides context about the group's purpose or constraints.\n *\n * @see https://mantle.ngrok.com/components/multi-select#multiselectgroupdescription\n *\n * @example\n * ```tsx\n * <MultiSelect.Root>\n *   <MultiSelect.Trigger>\n *     <MultiSelect.TagValues />\n *     <MultiSelect.Input placeholder=\"Select regions...\" />\n *   </MultiSelect.Trigger>\n *   <MultiSelect.Content>\n *     <MultiSelect.Group>\n *       <MultiSelect.GroupLabel>Regional Aliases</MultiSelect.GroupLabel>\n *       <MultiSelect.GroupDescription>\n *         Include all points of presence that are geographically within the region.\n *       </MultiSelect.GroupDescription>\n *       <MultiSelect.Item value=\"global\">global</MultiSelect.Item>\n *     </MultiSelect.Group>\n *   </MultiSelect.Content>\n * </MultiSelect.Root>\n * ```\n */\nconst GroupDescription = forwardRef<HTMLParagraphElement, MultiSelectGroupDescriptionProps>(\n\t({ className, children, ...props }, ref) => {\n\t\treturn (\n\t\t\t<p\n\t\t\t\tdata-slot=\"multi-select-group-description\"\n\t\t\t\tclassName={cx(\"text-muted px-2 pb-1 text-xs\", className)}\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</p>\n\t\t);\n\t},\n);\nGroupDescription.displayName = \"MultiSelectGroupDescription\";\n\n/**\n * Renders a separator between MultiSelect.Items or MultiSelect.Groups.\n *\n * @see https://mantle.ngrok.com/components/multi-select#multiselectseparator\n *\n * @example\n * ```tsx\n * <MultiSelect.Root>\n *   <MultiSelect.Trigger>\n *     <MultiSelect.TagValues />\n *     <MultiSelect.Input placeholder=\"Select items...\" />\n *   </MultiSelect.Trigger>\n *   <MultiSelect.Content>\n *     <MultiSelect.Group>\n *       <MultiSelect.Item value=\"apple\">Apple</MultiSelect.Item>\n *     </MultiSelect.Group>\n *     <MultiSelect.Separator />\n *     <MultiSelect.Group>\n *       <MultiSelect.Item value=\"carrot\">Carrot</MultiSelect.Item>\n *     </MultiSelect.Group>\n *   </MultiSelect.Content>\n * </MultiSelect.Root>\n * ```\n */\nconst MultiSelectSeparatorComponent = forwardRef<\n\tComponentRef<\"div\">,\n\tComponentPropsWithoutRef<typeof Separator>\n>(({ className, ...props }, ref) => (\n\t<Separator\n\t\tdata-slot=\"multi-select-separator\"\n\t\tref={ref}\n\t\tclassName={cx(\"my-1 w-auto\", className)}\n\t\t{...props}\n\t/>\n));\nMultiSelectSeparatorComponent.displayName = \"MultiSelectSeparator\";\n\ntype MultiSelectEmptyProps = ComponentPropsWithoutRef<\"div\">;\n\n/**\n * Renders a message when no items match the current filter.\n *\n * @see https://mantle.ngrok.com/components/multi-select#multiselectempty\n *\n * @example\n * ```tsx\n * <MultiSelect.Root>\n *   <MultiSelect.Trigger>\n *     <MultiSelect.TagValues />\n *     <MultiSelect.Input placeholder=\"Select items...\" />\n *   </MultiSelect.Trigger>\n *   <MultiSelect.Content>\n *     {matches.length === 0 && (\n *       <MultiSelect.Empty>No results found</MultiSelect.Empty>\n *     )}\n *   </MultiSelect.Content>\n * </MultiSelect.Root>\n * ```\n */\nconst Empty = forwardRef<HTMLDivElement, MultiSelectEmptyProps>(\n\t({ className, children, ...props }, ref) => {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tdata-slot=\"multi-select-empty\"\n\t\t\t\tclassName={cx(\"mx-1 text-muted px-2 py-6 text-center text-sm\", className)}\n\t\t\t\tref={ref}\n\t\t\t\trole=\"presentation\"\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</div>\n\t\t);\n\t},\n);\nEmpty.displayName = \"MultiSelectEmpty\";\n\ntype MultiSelectContentFooterProps = ComponentPropsWithoutRef<\"div\">;\n\n/**\n * Renders a sticky footer pinned to the bottom inside `MultiSelect.Content`,\n * with a separator border at the top.\n *\n * @see https://mantle.ngrok.com/components/multi-select#multiselectcontentfooter\n *\n * @example\n * ```tsx\n * <MultiSelect.Root>\n *   <MultiSelect.Trigger>\n *     <MultiSelect.TagValues />\n *     <MultiSelect.Input placeholder=\"Select items...\" />\n *   </MultiSelect.Trigger>\n *   <MultiSelect.Content>\n *     <MultiSelect.Item value=\"apple\">Apple</MultiSelect.Item>\n *     <MultiSelect.ContentFooter>\n *       <p>Upgrade to unlock more options.</p>\n *       <Button>Upgrade</Button>\n *     </MultiSelect.ContentFooter>\n *   </MultiSelect.Content>\n * </MultiSelect.Root>\n * ```\n */\nconst ContentFooter = forwardRef<HTMLDivElement, MultiSelectContentFooterProps>(\n\t({ className, children, ...props }, ref) => {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tref={ref}\n\t\t\t\tdata-slot=\"multi-select-content-footer\"\n\t\t\t\tdata-content-footer\n\t\t\t\tclassName={cx(\"bg-popover sticky bottom-0 border-t border-popover\", className)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</div>\n\t\t);\n\t},\n);\nContentFooter.displayName = \"MultiSelectContentFooter\";\n\n/**\n * A multi-select combobox that allows users to select multiple values with\n * typeahead filtering. Selected values are displayed as removable tags.\n *\n * Built on top of Ariakit's Combobox primitives with full keyboard support\n * and WAI-ARIA compliance.\n *\n * Use MultiSelect when the user can choose multiple values from a list, with selected\n * items rendered as removable tags/chips. For single selection, use Combobox (with search)\n * or Select (without).\n *\n * @see https://mantle.ngrok.com/components/multi-select\n * @see https://www.w3.org/WAI/ARIA/apg/patterns/combobox/\n * @see https://ariakit.org/components/combobox\n *\n * @example\n * Composition:\n * ```\n * MultiSelect.Root\n * ├── MultiSelect.Trigger\n * │   ├── MultiSelect.TagValues\n * │   └── MultiSelect.Input\n * └── MultiSelect.Content\n *     ├── MultiSelect.Group\n *     │   ├── MultiSelect.GroupLabel\n *     │   ├── MultiSelect.GroupDescription\n *     │   └── MultiSelect.Item\n *     ├── MultiSelect.Separator\n *     ├── MultiSelect.Empty\n *     └── MultiSelect.ContentFooter\n * ```\n *\n * @example\n * ```tsx\n * <MultiSelect.Root>\n *   <MultiSelect.Trigger>\n *     <MultiSelect.TagValues />\n *     <MultiSelect.Input placeholder=\"Select items...\" />\n *   </MultiSelect.Trigger>\n *   <MultiSelect.Content>\n *     <MultiSelect.Item value=\"apple\">Apple</MultiSelect.Item>\n *     <MultiSelect.Item value=\"banana\">Banana</MultiSelect.Item>\n *     <MultiSelect.Item value=\"cherry\">Cherry</MultiSelect.Item>\n *   </MultiSelect.Content>\n * </MultiSelect.Root>\n * ```\n */\nconst MultiSelect = {\n\t/**\n\t * Root component for a multi-select combobox. Provides state management for\n\t * selecting multiple values with typeahead filtering.\n\t *\n\t * Use MultiSelect when the user can choose multiple values from a list, with selected\n\t * items rendered as removable tags/chips. For single selection, use Combobox (with search)\n\t * or Select (without).\n\t *\n\t * @see https://mantle.ngrok.com/components/multi-select#multiselectroot\n\t *\n\t * @example\n\t * ```tsx\n\t * <MultiSelect.Root>\n\t *   <MultiSelect.Trigger>\n\t *     <MultiSelect.TagValues />\n\t *     <MultiSelect.Input placeholder=\"Select items...\" />\n\t *   </MultiSelect.Trigger>\n\t *   <MultiSelect.Content>\n\t *     <MultiSelect.Item value=\"apple\">Apple</MultiSelect.Item>\n\t *   </MultiSelect.Content>\n\t * </MultiSelect.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * The trigger container for the multi-select. Wraps the tags and input\n\t * in a styled container.\n\t *\n\t * @see https://mantle.ngrok.com/components/multi-select#multiselecttrigger\n\t *\n\t * @example\n\t * ```tsx\n\t * <MultiSelect.Root>\n\t *   <MultiSelect.Trigger>\n\t *     <MultiSelect.TagValues />\n\t *     <MultiSelect.Input placeholder=\"Select items...\" />\n\t *   </MultiSelect.Trigger>\n\t *   <MultiSelect.Content>\n\t *     <MultiSelect.Item value=\"apple\">Apple</MultiSelect.Item>\n\t *   </MultiSelect.Content>\n\t * </MultiSelect.Root>\n\t * ```\n\t */\n\tTrigger,\n\t/**\n\t * Renders the selected values as removable tags. Place this inside\n\t * `MultiSelect.Trigger`, followed by `MultiSelect.Input`.\n\t *\n\t * Use `lockedValues` to prevent specific tags from being removed. Locked tags\n\t * have their remove button disabled and shake when Backspace is pressed.\n\t *\n\t * @see https://mantle.ngrok.com/components/multi-select#multiselecttagvalues\n\t *\n\t * @example\n\t * ```tsx\n\t * <MultiSelect.Root>\n\t *   <MultiSelect.Trigger>\n\t *     <MultiSelect.TagValues lockedValues={[\"global\"]} />\n\t *     <MultiSelect.Input placeholder=\"Select items...\" />\n\t *   </MultiSelect.Trigger>\n\t *   <MultiSelect.Content>\n\t *     <MultiSelect.Item value=\"apple\">Apple</MultiSelect.Item>\n\t *   </MultiSelect.Content>\n\t * </MultiSelect.Root>\n\t * ```\n\t *\n\t * @example\n\t * Custom tags via children render function — `locked` is forwarded via props.\n\t * ```tsx\n\t * <MultiSelect.Root>\n\t *   <MultiSelect.Trigger>\n\t *     <MultiSelect.TagValues lockedValues={[\"global\"]}>\n\t *       {(props) => <MultiSelect.Tag key={props.value} {...props} />}\n\t *     </MultiSelect.TagValues>\n\t *     <MultiSelect.Input placeholder=\"Select items...\" />\n\t *   </MultiSelect.Trigger>\n\t *   <MultiSelect.Content>\n\t *     <MultiSelect.Item value=\"apple\">Apple</MultiSelect.Item>\n\t *   </MultiSelect.Content>\n\t * </MultiSelect.Root>\n\t * ```\n\t */\n\tTagValues,\n\t/**\n\t * The combobox input for filtering items. Place this inside\n\t * `MultiSelect.Trigger`, after `MultiSelect.TagValues`.\n\t *\n\t * @see https://mantle.ngrok.com/components/multi-select#multiselectinput\n\t *\n\t * @example\n\t * ```tsx\n\t * <MultiSelect.Root>\n\t *   <MultiSelect.Trigger>\n\t *     <MultiSelect.TagValues />\n\t *     <MultiSelect.Input placeholder=\"Select items...\" />\n\t *   </MultiSelect.Trigger>\n\t *   <MultiSelect.Content>\n\t *     <MultiSelect.Item value=\"apple\">Apple</MultiSelect.Item>\n\t *   </MultiSelect.Content>\n\t * </MultiSelect.Root>\n\t * ```\n\t */\n\tInput,\n\t/**\n\t * The default tag rendered inside `MultiSelect.TagValues` for each selected value.\n\t * Displays the value label with a remove button and keyboard navigation support.\n\t *\n\t * @see https://mantle.ngrok.com/components/multi-select#multiselecttag\n\t *\n\t * @example\n\t * ```tsx\n\t * <MultiSelect.Root>\n\t *   <MultiSelect.Trigger>\n\t *     <MultiSelect.TagValues>\n\t *       {(props) => <MultiSelect.Tag key={props.value} {...props} />}\n\t *     </MultiSelect.TagValues>\n\t *     <MultiSelect.Input placeholder=\"Select items...\" />\n\t *   </MultiSelect.Trigger>\n\t *   <MultiSelect.Content>\n\t *     <MultiSelect.Item value=\"apple\">Apple</MultiSelect.Item>\n\t *   </MultiSelect.Content>\n\t * </MultiSelect.Root>\n\t * ```\n\t */\n\tTag,\n\t/**\n\t * Renders a popover that contains multi-select content.\n\t *\n\t * @see https://mantle.ngrok.com/components/multi-select#multiselectcontent\n\t *\n\t * @example\n\t * ```tsx\n\t * <MultiSelect.Root>\n\t *   <MultiSelect.Trigger>\n\t *     <MultiSelect.TagValues />\n\t *     <MultiSelect.Input placeholder=\"Select items...\" />\n\t *   </MultiSelect.Trigger>\n\t *   <MultiSelect.Content>\n\t *     <MultiSelect.Item value=\"apple\">Apple</MultiSelect.Item>\n\t *     <MultiSelect.Item value=\"banana\">Banana</MultiSelect.Item>\n\t *   </MultiSelect.Content>\n\t * </MultiSelect.Root>\n\t * ```\n\t */\n\tContent,\n\t/**\n\t * Renders a sticky footer pinned to the bottom inside `MultiSelect.Content`,\n\t * with a separator border at the top.\n\t *\n\t * @see https://mantle.ngrok.com/components/multi-select#multiselectcontentfooter\n\t *\n\t * @example\n\t * ```tsx\n\t * <MultiSelect.Root>\n\t *   <MultiSelect.Trigger>\n\t *     <MultiSelect.TagValues />\n\t *     <MultiSelect.Input placeholder=\"Select items...\" />\n\t *   </MultiSelect.Trigger>\n\t *   <MultiSelect.Content>\n\t *     <MultiSelect.Item value=\"apple\">Apple</MultiSelect.Item>\n\t *     <MultiSelect.ContentFooter>\n\t *       <p>Upgrade to unlock more options.</p>\n\t *     </MultiSelect.ContentFooter>\n\t *   </MultiSelect.Content>\n\t * </MultiSelect.Root>\n\t * ```\n\t */\n\tContentFooter,\n\t/**\n\t * Renders a selectable item with a checkbox indicator inside a `MultiSelect.Content`.\n\t *\n\t * @see https://mantle.ngrok.com/components/multi-select#multiselectitem\n\t *\n\t * @example\n\t * ```tsx\n\t * <MultiSelect.Root>\n\t *   <MultiSelect.Trigger>\n\t *     <MultiSelect.TagValues />\n\t *     <MultiSelect.Input placeholder=\"Select items...\" />\n\t *   </MultiSelect.Trigger>\n\t *   <MultiSelect.Content>\n\t *     <MultiSelect.Item value=\"apple\">Apple</MultiSelect.Item>\n\t *     <MultiSelect.Item value=\"banana\">Banana</MultiSelect.Item>\n\t *   </MultiSelect.Content>\n\t * </MultiSelect.Root>\n\t * ```\n\t */\n\tItem,\n\t/**\n\t * Renders a group for MultiSelect.Item elements.\n\t *\n\t * @see https://mantle.ngrok.com/components/multi-select#multiselectgroup\n\t *\n\t * @example\n\t * ```tsx\n\t * <MultiSelect.Root>\n\t *   <MultiSelect.Trigger>\n\t *     <MultiSelect.TagValues />\n\t *     <MultiSelect.Input placeholder=\"Select items...\" />\n\t *   </MultiSelect.Trigger>\n\t *   <MultiSelect.Content>\n\t *     <MultiSelect.Group>\n\t *       <MultiSelect.GroupLabel>Fruits</MultiSelect.GroupLabel>\n\t *       <MultiSelect.Item value=\"apple\">Apple</MultiSelect.Item>\n\t *     </MultiSelect.Group>\n\t *   </MultiSelect.Content>\n\t * </MultiSelect.Root>\n\t * ```\n\t */\n\tGroup,\n\t/**\n\t * Renders a label in a multi-select group.\n\t *\n\t * @see https://mantle.ngrok.com/components/multi-select#multiselectgrouplabel\n\t *\n\t * @example\n\t * ```tsx\n\t * <MultiSelect.Root>\n\t *   <MultiSelect.Trigger>\n\t *     <MultiSelect.TagValues />\n\t *     <MultiSelect.Input placeholder=\"Select items...\" />\n\t *   </MultiSelect.Trigger>\n\t *   <MultiSelect.Content>\n\t *     <MultiSelect.Group>\n\t *       <MultiSelect.GroupLabel>Fruits</MultiSelect.GroupLabel>\n\t *       <MultiSelect.Item value=\"apple\">Apple</MultiSelect.Item>\n\t *     </MultiSelect.Group>\n\t *   </MultiSelect.Content>\n\t * </MultiSelect.Root>\n\t * ```\n\t */\n\tGroupLabel,\n\t/**\n\t * Renders a description below a `MultiSelect.GroupLabel` inside a `MultiSelect.Group`.\n\t *\n\t * @see https://mantle.ngrok.com/components/multi-select#multiselectgroupdescription\n\t *\n\t * @example\n\t * ```tsx\n\t * <MultiSelect.Root>\n\t *   <MultiSelect.Trigger>\n\t *     <MultiSelect.TagValues />\n\t *     <MultiSelect.Input placeholder=\"Select regions...\" />\n\t *   </MultiSelect.Trigger>\n\t *   <MultiSelect.Content>\n\t *     <MultiSelect.Group>\n\t *       <MultiSelect.GroupLabel>Regional Aliases</MultiSelect.GroupLabel>\n\t *       <MultiSelect.GroupDescription>\n\t *         Include all points of presence within the region.\n\t *       </MultiSelect.GroupDescription>\n\t *       <MultiSelect.Item value=\"global\">global</MultiSelect.Item>\n\t *     </MultiSelect.Group>\n\t *   </MultiSelect.Content>\n\t * </MultiSelect.Root>\n\t * ```\n\t */\n\tGroupDescription,\n\t/**\n\t * Renders a separator between items or groups.\n\t *\n\t * @see https://mantle.ngrok.com/components/multi-select#multiselectseparator\n\t *\n\t * @example\n\t * ```tsx\n\t * <MultiSelect.Root>\n\t *   <MultiSelect.Trigger>\n\t *     <MultiSelect.TagValues />\n\t *     <MultiSelect.Input placeholder=\"Select items...\" />\n\t *   </MultiSelect.Trigger>\n\t *   <MultiSelect.Content>\n\t *     <MultiSelect.Group>\n\t *       <MultiSelect.Item value=\"apple\">Apple</MultiSelect.Item>\n\t *     </MultiSelect.Group>\n\t *     <MultiSelect.Separator />\n\t *     <MultiSelect.Group>\n\t *       <MultiSelect.Item value=\"carrot\">Carrot</MultiSelect.Item>\n\t *     </MultiSelect.Group>\n\t *   </MultiSelect.Content>\n\t * </MultiSelect.Root>\n\t * ```\n\t */\n\tSeparator: MultiSelectSeparatorComponent,\n\t/**\n\t * Renders a message when no items match the current filter.\n\t *\n\t * @see https://mantle.ngrok.com/components/multi-select#multiselectempty\n\t *\n\t * @example\n\t * ```tsx\n\t * <MultiSelect.Root>\n\t *   <MultiSelect.Trigger>\n\t *     <MultiSelect.TagValues />\n\t *     <MultiSelect.Input placeholder=\"Select items...\" />\n\t *   </MultiSelect.Trigger>\n\t *   <MultiSelect.Content>\n\t *     {matches.length === 0 && (\n\t *       <MultiSelect.Empty>No results found</MultiSelect.Empty>\n\t *     )}\n\t *   </MultiSelect.Content>\n\t * </MultiSelect.Root>\n\t * ```\n\t */\n\tEmpty,\n} as const;\n\nexport {\n\t//,\n\tMultiSelect,\n};\n\n/**\n * Shakes an element left-right to signal that an action was blocked\n * (e.g. pressing Backspace/Delete on a locked tag). No-ops when the user\n * has enabled reduced motion in their OS/browser accessibility settings.\n */\nfunction shakeElement(element: HTMLElement): void {\n\t// Skip the animation when the user has opted into reduced motion.\n\t// Called from event handlers only, so reading the media query imperatively\n\t// is safe and gives the freshest value without any hook plumbing.\n\tif (getPrefersReducedMotion()) {\n\t\treturn;\n\t}\n\n\telement.animate(\n\t\t[\n\t\t\t{ transform: \"translateX(0)\" },\n\t\t\t{ transform: \"translateX(-4px)\" },\n\t\t\t{ transform: \"translateX(4px)\" },\n\t\t\t{ transform: \"translateX(-4px)\" },\n\t\t\t{ transform: \"translateX(4px)\" },\n\t\t\t{ transform: \"translateX(0)\" },\n\t\t],\n\t\t{ duration: 300, easing: \"ease-in-out\" },\n\t);\n}\n"],"mappings":"ooBAiCA,MAAM,EAAiB,GACtB,MAAM,QAAQ,EAAM,EAAI,EAAM,MAAO,GAAS,OAAO,GAAS,SAAS,CAGlE,EAAwB,EAAE,CAE1B,EAAoB,EAAgD,CAAE,QAAS,KAAM,CAAC,CAOtF,EAAsB,EAAqC,CAAE,QAAS,EAAE,CAAE,CAAC,CAc3E,EAAmB,EAAqC,CAC7D,kBAAmB,CAAE,QAAS,IAAA,GAAW,CACzC,SAAU,CAAE,QAAS,KAAM,CAC3B,CAAC,CA4BI,GAAQ,CAAE,WAAU,uBAAuB,EAAE,CAAE,GAAG,KAA8B,CACrF,IAAM,EAAa,EAA8B,KAAK,CAChD,EAAoB,EACzB,IAAA,GACA,CACK,EAAW,EAAgC,KAAK,CAChD,EAAkB,EAAiB,EAAE,CAAC,CACtC,EAAY,OAAe,CAAE,oBAAmB,WAAU,EAAG,EAAE,CAAC,CAEtE,OACC,EAAC,EAAkB,SAAnB,CAA4B,MAAO,WAClC,EAAC,EAAiB,SAAlB,CAA2B,MAAO,WACjC,EAAC,EAAoB,SAArB,CAA8B,MAAO,WACpC,EAAC,EAAU,iBAAX,CACuB,uBACtB,GAAI,EAEH,WAC2B,CAAA,CACC,CAAA,CACJ,CAAA,CACA,CAAA,EAG/B,EAAK,YAAc,cAuBnB,MAAM,EAAU,GAEd,CACC,eAAgB,EAChB,YACA,WACA,YACA,cACA,WAAY,EACZ,GAAG,GAEJ,IACI,CACJ,IAAM,EAAa,EAAW,EAAkB,CAC1C,CAAE,YAAa,EAAW,EAAiB,CAC3C,EAAQ,EAAU,oBAAoB,CAEtC,EADY,GAAgB,MAAQ,IAAiB,QAExD,QACA,OAAO,GAAgB,WACtB,GAAa,CACb,EAEJ,OACC,EAAC,MAAD,CACC,KAAK,QACL,YAAU,uBACV,UAAW,EACV,4CACA,uJACA,4EACA,gJACA,+RACA,+RACA,gRACA,EACA,CACD,kBAAiB,GAAc,IAAA,GAC/B,UAAY,GAAU,CACjB,EAAM,MAAQ,UAAY,GAAO,UAAU,CAAC,OAC/C,EAAM,gBAAgB,CACtB,EAAM,MAAM,EAEb,IAAY,EAAM,EAEnB,YAAc,GAAU,CAKtB,EAAM,kBAAkB,aACxB,CAAC,EAAM,OAAO,QAAQ,iCAAiC,GAEvD,EAAM,gBAAgB,CACtB,EAAS,SAAS,OAAO,EAE1B,IAAc,EAAM,EAErB,IAAK,EAAY,EAAY,EAAI,CACjC,GAAI,EAEH,WACI,CAAA,EAGR,CACD,EAAQ,YAAc,qBA0CtB,MAAM,EAAM,GACV,CAAE,YAAW,QAAO,WAAU,SAAS,GAAO,YAAW,GAAG,GAAS,IAAQ,CAC7E,IAAM,EAAc,EAA+B,KAAK,CAExD,OACC,EAAC,OAAD,CACC,IAAK,EAAY,EAAa,EAAI,CAClC,KAAK,SACL,gBAAA,GACA,SAAU,GACV,YAAU,mBACV,cAAa,GAAU,IAAA,GACvB,UAAW,EACV,6JACA,uHACA,EACA,CACD,UAAY,GAAU,CACrB,GAAI,IAAW,EAAM,MAAQ,aAAe,EAAM,MAAQ,UAAW,CACpE,EAAM,gBAAgB,CACtB,EAAa,EAAM,cAAc,CACjC,OAED,IAAY,EAAM,EAEnB,GAAI,WApBL,CAsBE,EACD,EAAC,SAAD,CACC,KAAK,SACL,aAAY,UAAU,IACtB,SAAU,GACV,gBAAe,GAAU,IAAA,GACzB,UAAW,EACV,2FACA,qGACA,CACD,QAAU,GAAU,CAGnB,GADA,EAAM,iBAAiB,CACnB,EAAQ,CAEX,IAAM,EAAa,EAAY,QAC3B,GACH,EAAa,EAAW,CAEzB,OAED,KAAY,EAEb,YAAc,GAAU,CAEvB,EAAM,gBAAgB,WAGvB,EAAC,EAAD,CAAM,IAAK,EAAS,EAAC,EAAD,EAAY,CAAA,CAAG,EAAC,EAAD,CAAO,OAAO,OAAS,CAAA,CAAE,UAAU,SAAW,CAAA,CACzE,CAAA,CACH,IAGT,CACD,EAAI,YAAc,iBA+DlB,MAAM,GAAa,CAAE,WAAU,eAAe,EAAE,IAAkC,CACjF,IAAM,EAAQ,EAAU,oBAAoB,CACtC,EAAmB,EAAU,cAAc,EAAO,gBAAgB,CAElE,GADiB,EAAc,EAAiB,CAAG,EAAmB,IAAA,KACpC,EAGlC,EAAmB,EAAiB,EAAc,CACxD,EAAiB,QAAU,EAI3B,IAAM,EAAkB,EAAW,EAAoB,CACvD,EAAgB,QAAU,EAC1B,IAAM,EAAkB,MAAc,IAAI,IAAI,EAAa,CAAE,CAAC,EAAa,CAAC,CACtE,EAAU,EAAqC,IAAI,IAAM,CACzD,CAAE,oBAAmB,YAAa,EAAW,EAAiB,CAG9D,EAAiB,EAAoB,IAAI,IAAM,CACrD,UACa,CACX,EAAe,QAAQ,QAAQ,qBAAqB,EAErD,EAAE,CACF,CACD,IAAM,EAAO,GAA+B,CAC3C,IAAI,EACJ,EAAK,0BAA4B,CAEhC,EAAe,QAAQ,OAAO,EAAG,CACjC,GAAU,EACT,CACF,EAAe,QAAQ,IAAI,EAAG,EAGzB,EAAe,GAAkB,CACtC,GAAI,EAAO,CACV,IAAM,EAAW,EAAM,UAAU,CAAC,cAClC,GAAI,CAAC,EAAc,EAAS,CAC3B,OAED,EAAM,iBAAiB,EAAS,OAAQ,GAAM,IAAM,EAAM,CAAC,GAIvD,EAAY,GAAkB,CACnC,IAAM,EAAQ,EAAiB,QAAQ,GACvC,GAAI,GAAS,KACZ,OAED,IAAM,EAAa,EAAQ,QAAQ,IAAI,EAAM,CACzC,IACH,EAAW,OAAO,CAGlB,GAAO,MAAM,GAIT,MAAmB,CACxB,EAAS,SAAS,OAAO,EAGpB,GAAoB,EAAuC,IAAkB,CAClF,IAAM,EAAQ,EAAc,GAC5B,OAAQ,EAAM,IAAd,CACC,IAAK,YACJ,EAAM,gBAAgB,CAClB,EAAQ,GACX,EAAS,EAAQ,EAAE,CAEpB,MAED,IAAK,aACJ,EAAM,gBAAgB,CAClB,EAAQ,EAAc,OAAS,EAClC,EAAS,EAAQ,EAAE,CAEnB,GAAY,CAEb,MAED,IAAK,YACL,IAAK,SAEJ,GADA,EAAM,gBAAgB,CAClB,GAAS,KAAM,CAElB,GAAI,EAAgB,IAAI,EAAM,CAAE,CAC/B,IAAM,EAAa,EAAQ,QAAQ,IAAI,EAAM,CACzC,GACH,EAAa,EAAW,CAEzB,MAID,GAFA,EAAY,EAAM,CAEd,EAAM,MAAQ,YACjB,GAAI,EAAQ,EAAG,CAGd,IAAM,EAAY,EAAQ,EAC1B,MAAU,EAAS,EAAU,CAAC,MAE9B,MAAU,CACL,EAAiB,QAAQ,OAAS,EACrC,EAAS,EAAE,CAEX,GAAY,EAEZ,MAIH,MAAU,CAEL,EAAQ,EAAiB,QAAQ,OACpC,EAAS,EAAM,CAEf,GAAY,EAEZ,CAGJ,MAED,IAAK,UACL,IAAK,YAGJ,EAAM,gBAAgB,CACtB,GAAY,CACZ,EAAS,SAAS,cACjB,IAAI,cAAc,UAAW,CAC5B,IAAK,EAAM,IACX,QAAS,GACT,WAAY,GACZ,SAAU,EAAM,SAChB,QAAS,EAAM,QACf,QAAS,EAAM,QACf,OAAQ,EAAM,OACd,CAAC,CACF,CACD,MAED,QAEK,EAAM,IAAI,SAAW,GAAK,CAAC,EAAM,SAAW,CAAC,EAAM,SACtD,GAAY,CAEb,QAoCH,MAFA,GAAkB,QA7BU,GAA2C,CACtE,GACC,EAAM,MAAQ,aACd,EAAM,cAAc,iBAAmB,GACvC,EAAM,cAAc,eAAiB,GACrC,EAAc,OAAS,EACtB,CACD,EAAM,gBAAgB,CACtB,EAAS,EAAc,OAAS,EAAE,CAClC,OAED,GAAI,EAAM,MAAQ,aAAe,EAAM,cAAc,QAAU,IAAM,EAAc,OAAS,EAAG,CAC9F,IAAM,EAAY,EAAc,EAAc,OAAS,GACvD,GAAI,GAAa,KAChB,GAAI,EAAgB,QAAQ,SAAS,EAAU,CAAE,CAEhD,IAAM,EAAa,EAAQ,QAAQ,IAAI,EAAU,CAC7C,GACH,EAAa,EAAW,MAGzB,EAAY,EAAU,GAWzB,EAAA,EAAA,CAAA,SACE,EAAc,KAAK,EAAO,IAAU,CACpC,IAAM,EAAiC,CACtC,QACA,OAAQ,EAAgB,IAAI,EAAM,CAClC,aAAgB,CAGf,GAAI,EAAgB,IAAI,EAAM,CAAE,CAC/B,IAAM,EAAa,EAAQ,QAAQ,IAAI,EAAM,CACzC,GACH,EAAa,EAAW,CAEzB,OAED,EAAY,EAAM,EAEnB,IAAM,GAAiC,CAClC,EACH,EAAQ,QAAQ,IAAI,EAAO,EAAK,CAEhC,EAAQ,QAAQ,OAAO,EAAM,EAG/B,UAAY,GAA0C,EAAiB,EAAO,EAAM,CAGpF,YAAe,EAAS,EAAM,CAC9B,CAMD,OAJI,EACI,EAAS,EAAe,CAGzB,EAAC,EAAD,CAAiB,GAAI,EAAkB,CAA7B,EAA6B,EAC7C,CACA,CAAA,EAGL,EAAU,YAAc,uBA8BxB,MAAM,EAAQ,GAEZ,CAAE,YAAW,SAAQ,WAAU,UAAS,YAAW,gBAAe,cAAa,GAAG,GAClF,IACI,CACJ,IAAM,EAAQ,EAAU,oBAAoB,CACtC,CAAE,oBAAmB,YAAa,EAAW,EAAiB,CAC9D,EAAmB,EAAU,cAAc,EAAO,gBAAgB,CAElE,IADiB,EAAc,EAAiB,CAAG,EAAmB,IAAA,KACjC,QAAU,GAAK,EAE1D,OACC,EAAC,EAAU,SAAX,CACC,WAAA,GACA,YAAU,qBACV,UAAW,EACV,sGACA,uDACA,EACA,CACD,SAAW,GAAU,CACpB,IAAgB,EAAM,OAAO,MAAM,CACnC,IAAW,EAAM,EAElB,UAAY,GAAU,CACrB,EAAkB,UAAU,EAAM,CAClC,IAAY,EAAM,EAEnB,OAAS,GAAU,CAKjB,EAAM,yBAAyB,aAC/B,EAAM,cAAc,QAAQ,iCAAiC,EAE7D,GAAO,MAAM,CAEd,IAAS,EAAM,EAEhB,QAAU,GAAU,CAGnB,GAAO,MAAM,CACb,IAAU,EAAM,EAEjB,YAAa,EAAoB,IAAA,GAAY,EAE7C,IAAK,EAAY,EAAU,EAAI,CAC/B,GAAI,EACH,CAAA,EAGJ,CACD,EAAM,YAAc,mBAwBpB,MAAM,EAAU,GAEd,CACC,UAAU,GACV,WAAW,GACX,WACA,YACA,QAAQ,GACR,gBACA,YAAY,GACZ,gBAAgB,GAChB,GAAG,GAEJ,IACI,CACJ,IAAM,EAAa,EAAW,EAAkB,CAE1C,EAAgB,MACd,EAAW,SAAS,uBAAuB,EAAI,KACpD,CAAC,EAAW,CAAC,CAEV,EAAmB,EACvB,GACI,OAAO,GAAkB,WACrB,EAAc,EAAQ,CAI7B,GACA,EAAW,SAAS,QAAqB,8BAA8B,EACvE,EAAQ,cAAc,KAGxB,CAAC,EAAe,EAAW,CAC3B,CAEK,EAAwB,EAC5B,GAIA,EAAI,EAAM,kBAAkB,MAAQ,EAAW,SAAS,SAAS,EAAM,OAAO,EAK/E,CAAC,EAAW,CACZ,CAED,OACC,EAAC,EAAU,gBAAX,CACC,YAAU,uBACV,UAAW,EACV,mPACA,EACA,CACS,WACK,gBACf,OAAQ,EACe,wBAChB,QACP,cAAe,EACV,MACL,OACC,GAAW,CAAE,MAAK,GAAG,KAAiB,EAAC,EAAD,CAAW,MAAK,GAAI,EAAc,CAAA,CAAG,IAAA,GAEjE,YACI,gBACf,GAAI,EAEH,WAC0B,CAAA,EAG9B,CACD,EAAQ,YAAc,qBAwBtB,MAAM,EAAO,GAEX,CAAE,UAAU,GAAO,WAAU,YAAW,eAAe,GAAM,QAAO,UAAS,GAAG,GAChF,IACI,CACJ,IAAM,EAAkB,EAAW,EAAoB,CACjD,EAAW,GAAS,MAAQ,EAAgB,QAAQ,SAAS,EAAM,CAEzE,OACC,EAAC,EAAU,aAAX,CACC,YAAU,oBACV,UAAW,EACV,2HACA,0BACA,uCACA,2BACA,kGACA,EACA,CACa,eACd,QAAU,GAAU,CAGnB,GAAI,EAAU,CACb,EAAM,gBAAgB,CACtB,OAED,IAAU,EAAM,EAEZ,MACL,OACC,GAAW,CAAE,MAAK,GAAG,KAAiB,EAAC,EAAD,CAAW,MAAK,GAAI,EAAc,CAAA,CAAG,IAAA,GAE5E,mBAAA,GACO,QACP,GAAI,WA1BL,CA4BE,EACD,EAAC,EAAU,kBAAX,CAA6B,UAAU,yEACtC,EAAC,EAAD,CAAM,IAAK,EAAC,EAAD,CAAW,OAAO,OAAS,CAAA,CAAE,UAAU,yBAA2B,CAAA,CAChD,CAAA,CACN,IAG3B,CACD,EAAK,YAAc,kBA0BnB,MAAM,EAAQ,GACZ,CAAE,UAAU,GAAO,WAAU,GAAG,GAAS,IAExC,EAAC,EAAU,cAAX,CACC,YAAU,qBACV,UAAU,OACL,MACL,OACC,GAAW,CAAE,MAAK,GAAG,KAAiB,EAAC,EAAD,CAAW,MAAK,GAAI,EAAc,CAAA,CAAG,IAAA,GAE5E,GAAI,EAEH,WACwB,CAAA,CAG5B,CACD,EAAM,YAAc,mBAyBpB,MAAM,EAAa,GACjB,CAAE,UAAU,GAAO,WAAU,YAAW,GAAG,GAAS,IAEnD,EAAC,EAAU,mBAAX,CACC,YAAU,2BACV,UAAW,EAAG,2CAA4C,EAAU,CAC/D,MACL,OACC,GAAW,CAAE,MAAK,GAAG,KAAiB,EAAC,EAAD,CAAW,MAAK,GAAI,EAAc,CAAA,CAAG,IAAA,GAE5E,GAAI,EAEH,WAC6B,CAAA,CAGjC,CACD,EAAW,YAAc,wBA6BzB,MAAM,EAAmB,GACvB,CAAE,YAAW,WAAU,GAAG,GAAS,IAElC,EAAC,IAAD,CACC,YAAU,iCACV,UAAW,EAAG,+BAAgC,EAAU,CACnD,MACL,GAAI,EAEH,WACE,CAAA,CAGN,CACD,EAAiB,YAAc,8BA0B/B,MAAM,EAAgC,GAGnC,CAAE,YAAW,GAAG,GAAS,IAC3B,EAAC,EAAD,CACC,YAAU,yBACL,MACL,UAAW,EAAG,cAAe,EAAU,CACvC,GAAI,EACH,CAAA,CACD,CACF,EAA8B,YAAc,uBAwB5C,MAAM,EAAQ,GACZ,CAAE,YAAW,WAAU,GAAG,GAAS,IAElC,EAAC,MAAD,CACC,YAAU,qBACV,UAAW,EAAG,gDAAiD,EAAU,CACpE,MACL,KAAK,eACL,GAAI,EAEH,WACI,CAAA,CAGR,CACD,EAAM,YAAc,mBA2BpB,MAAM,EAAgB,GACpB,CAAE,YAAW,WAAU,GAAG,GAAS,IAElC,EAAC,MAAD,CACM,MACL,YAAU,8BACV,sBAAA,GACA,UAAW,EAAG,qDAAsD,EAAU,CAC9E,GAAI,EAEH,WACI,CAAA,CAGR,CACD,EAAc,YAAc,2BAiD5B,MAAM,EAAc,CAwBnB,OAoBA,UAuCA,YAoBA,QAsBA,MAoBA,UAuBA,gBAoBA,OAsBA,QAsBA,aAyBA,mBAyBA,UAAW,EAqBX,QACA,CAYD,SAAS,EAAa,EAA4B,CAI7C,GAAyB,EAI7B,EAAQ,QACP,CACC,CAAE,UAAW,gBAAiB,CAC9B,CAAE,UAAW,mBAAoB,CACjC,CAAE,UAAW,kBAAmB,CAChC,CAAE,UAAW,mBAAoB,CACjC,CAAE,UAAW,kBAAmB,CAChC,CAAE,UAAW,gBAAiB,CAC9B,CACD,CAAE,SAAU,IAAK,OAAQ,cAAe,CACxC"}
+{"version":3,"file":"multi-select.js","names":[],"sources":["../src/components/multi-select/multi-select.tsx"],"sourcesContent":["\"use client\";\n\nimport * as Primitive from \"@ariakit/react\";\nimport { CheckIcon } from \"@phosphor-icons/react/Check\";\nimport { LockIcon } from \"@phosphor-icons/react/Lock\";\nimport { XIcon } from \"@phosphor-icons/react/X\";\nimport type {\n\tComponentProps,\n\tComponentPropsWithoutRef,\n\tComponentRef,\n\tKeyboardEvent,\n\tReactNode,\n\tRefObject,\n} from \"react\";\nimport {\n\tcreateContext,\n\tforwardRef,\n\tuseCallback,\n\tuseContext,\n\tuseEffect,\n\tuseMemo,\n\tuseRef,\n} from \"react\";\nimport type { WithAsChild } from \"../../types/as-child.js\";\nimport { getPrefersReducedMotion } from \"../../hooks/use-prefers-reduced-motion.js\";\nimport { composeRefs } from \"../../utils/compose-refs/compose-refs.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { parseValidation, useFieldValidation } from \"../field/validation.js\";\nimport type { WithValidation } from \"../field/validation.js\";\nimport { Icon } from \"../icon/icon.js\";\nimport { Separator } from \"../separator/separator.js\";\nimport { Slot } from \"../slot/index.js\";\n\n/** Type guard to safely narrow Ariakit store state to `string[]` without `as` assertions. */\nconst isStringArray = (value: unknown): value is string[] =>\n\tArray.isArray(value) && value.every((item) => typeof item === \"string\");\n\n/** Stable empty array used as a fallback for `selectedValues` to avoid creating new arrays on every render. */\nconst EMPTY_ARRAY: string[] = [];\n\nconst TriggerRefContext = createContext<RefObject<HTMLDivElement | null>>({ current: null });\n\n/**\n * Shared ref for locked values. Written by `TagValues` during render so that `Item` can read\n * it synchronously and prevent deselection of locked values from the popover.\n * Using a ref (instead of state) avoids re-renders and keeps the write safe in render.\n */\nconst LockedValuesContext = createContext<{ current: string[] }>({ current: [] });\n\n/**\n * Bridges keyboard-nav state between `TagValues` and `Input`, which are siblings in the tree\n * and cannot communicate via a context that either one provides — it must come from a shared\n * ancestor (`Root`). Both refs are written by one side and read by the other:\n *   - `onInputKeyDownRef`: written by `TagValues`, called by `Input` on keydown\n *   - `inputRef`: written by `Input` (registers its DOM node), read by `TagValues` (to focus it)\n */\ntype TagBridgeContextValue = {\n\tonInputKeyDownRef: { current: ((event: KeyboardEvent<HTMLInputElement>) => void) | undefined };\n\tinputRef: { current: HTMLInputElement | null };\n};\n\nconst TagBridgeContext = createContext<TagBridgeContextValue>({\n\tonInputKeyDownRef: { current: undefined },\n\tinputRef: { current: null },\n});\n\ntype MultiSelectProps = Primitive.ComboboxProviderProps<string[]>;\n\n/**\n * Root component for a multi-select combobox. Provides state management for\n * selecting multiple values with typeahead filtering.\n *\n * Use MultiSelect when the user can choose multiple values from a list, with selected\n * items rendered as removable tags/chips. For single selection, use Combobox (with search)\n * or Select (without).\n *\n * @see https://mantle.ngrok.com/components/multi-select#multiselectroot\n *\n * @example\n * ```tsx\n * <MultiSelect.Root>\n *   <MultiSelect.Trigger>\n *     <MultiSelect.TagValues />\n *     <MultiSelect.Input placeholder=\"Select items...\" />\n *   </MultiSelect.Trigger>\n *   <MultiSelect.Content>\n *     <MultiSelect.Item value=\"apple\">Apple</MultiSelect.Item>\n *     <MultiSelect.Item value=\"banana\">Banana</MultiSelect.Item>\n *   </MultiSelect.Content>\n * </MultiSelect.Root>\n * ```\n */\nconst Root = ({ children, defaultSelectedValue = [], ...props }: MultiSelectProps) => {\n\tconst triggerRef = useRef<HTMLDivElement | null>(null);\n\tconst onInputKeyDownRef = useRef<((event: KeyboardEvent<HTMLInputElement>) => void) | undefined>(\n\t\tundefined,\n\t);\n\tconst inputRef = useRef<HTMLInputElement | null>(null);\n\tconst lockedValuesRef = useRef<string[]>([]);\n\tconst tagBridge = useMemo(() => ({ onInputKeyDownRef, inputRef }), []);\n\n\treturn (\n\t\t<TriggerRefContext.Provider value={triggerRef}>\n\t\t\t<TagBridgeContext.Provider value={tagBridge}>\n\t\t\t\t<LockedValuesContext.Provider value={lockedValuesRef}>\n\t\t\t\t\t<Primitive.ComboboxProvider<string[]>\n\t\t\t\t\t\tdefaultSelectedValue={defaultSelectedValue}\n\t\t\t\t\t\t{...props}\n\t\t\t\t\t>\n\t\t\t\t\t\t{children}\n\t\t\t\t\t</Primitive.ComboboxProvider>\n\t\t\t\t</LockedValuesContext.Provider>\n\t\t\t</TagBridgeContext.Provider>\n\t\t</TriggerRefContext.Provider>\n\t);\n};\nRoot.displayName = \"MultiSelect\";\n\ntype MultiSelectTriggerProps = ComponentPropsWithoutRef<\"div\"> & WithValidation;\n\n/**\n * The trigger container for the multi-select. Wraps the input and selected\n * value tags in a styled container that looks like a form input.\n *\n * @see https://mantle.ngrok.com/components/multi-select#multiselecttrigger\n *\n * @example\n * ```tsx\n * <MultiSelect.Root>\n *   <MultiSelect.Trigger>\n *     <MultiSelect.TagValues />\n *     <MultiSelect.Input placeholder=\"Select items...\" />\n *   </MultiSelect.Trigger>\n *   <MultiSelect.Content>\n *     <MultiSelect.Item value=\"apple\">Apple</MultiSelect.Item>\n *   </MultiSelect.Content>\n * </MultiSelect.Root>\n * ```\n */\nconst Trigger = forwardRef<HTMLDivElement, MultiSelectTriggerProps>(\n\t(\n\t\t{\n\t\t\t\"aria-invalid\": _ariaInvalid,\n\t\t\tclassName,\n\t\t\tchildren,\n\t\t\tonKeyDown,\n\t\t\tonMouseDown,\n\t\t\tvalidation: _validation,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst triggerRef = useContext(TriggerRefContext);\n\t\tconst { inputRef } = useContext(TagBridgeContext);\n\t\tconst store = Primitive.useComboboxContext();\n\t\tconst fieldValidation = useFieldValidation();\n\t\tconst { validation } = parseValidation({\n\t\t\t\"aria-invalid\": _ariaInvalid,\n\t\t\tvalidation: _validation ?? fieldValidation,\n\t\t});\n\n\t\treturn (\n\t\t\t<div\n\t\t\t\trole=\"group\"\n\t\t\t\tdata-slot=\"multi-select-trigger\"\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"cursor-text select-none font-sans text-sm\",\n\t\t\t\t\t\"border-form bg-form text-strong flex min-h-9 w-full flex-wrap items-center gap-1 rounded-md border px-3 py-1 has-[[data-slot=multi-select-tag]]:px-1\",\n\t\t\t\t\t\"has-focus:outline-hidden has-focus-within:ring-4 has-aria-expanded:ring-4\",\n\t\t\t\t\t\"has-focus-within:border-accent-600 has-focus-within:ring-focus-accent has-aria-expanded:border-accent-600 has-aria-expanded:ring-focus-accent\",\n\t\t\t\t\t\"data-validation-success:border-success-600 data-validation-success:has-focus-within:border-success-600 data-validation-success:has-focus-within:ring-focus-success data-validation-success:has-aria-expanded:border-success-600 data-validation-success:has-aria-expanded:ring-focus-success\",\n\t\t\t\t\t\"data-validation-warning:border-warning-600 data-validation-warning:has-focus-within:border-warning-600 data-validation-warning:has-focus-within:ring-focus-warning data-validation-warning:has-aria-expanded:border-warning-600 data-validation-warning:has-aria-expanded:ring-focus-warning\",\n\t\t\t\t\t\"data-validation-error:border-danger-600 data-validation-error:has-focus-within:border-danger-600 data-validation-error:has-focus-within:ring-focus-danger data-validation-error:has-aria-expanded:border-danger-600 data-validation-error:has-aria-expanded:ring-focus-danger\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tdata-validation={validation || undefined}\n\t\t\t\tonKeyDown={(event) => {\n\t\t\t\t\tif (event.key === \"Escape\" && store?.getState().open) {\n\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\tstore.hide();\n\t\t\t\t\t}\n\t\t\t\t\tonKeyDown?.(event);\n\t\t\t\t}}\n\t\t\t\tonMouseDown={(event) => {\n\t\t\t\t\t// When clicking on non-interactive areas (padding, flex gaps between tags), prevent the\n\t\t\t\t\t// default mousedown behavior (which would cause text selection) and explicitly focus the\n\t\t\t\t\t// input. Clicks on buttons, the input itself, or tag spans are handled by those elements.\n\t\t\t\t\tif (\n\t\t\t\t\t\tevent.target instanceof HTMLElement &&\n\t\t\t\t\t\t!event.target.closest(\"button, input, [role='option']\")\n\t\t\t\t\t) {\n\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\tinputRef.current?.focus();\n\t\t\t\t\t}\n\t\t\t\t\tonMouseDown?.(event);\n\t\t\t\t}}\n\t\t\t\tref={composeRefs(triggerRef, ref)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</div>\n\t\t);\n\t},\n);\nTrigger.displayName = \"MultiSelectTrigger\";\n\ntype TagProps = Omit<ComponentProps<\"span\">, \"children\"> & {\n\t/**\n\t * The value to display in the tag label.\n\t */\n\tvalue: string;\n\t/**\n\t * Called when the remove button is clicked.\n\t */\n\tonRemove?: () => void;\n\t/**\n\t * When true, the tag cannot be removed. The remove button is disabled and\n\t * Delete/Backspace key presses are ignored while the tag is focused.\n\t */\n\tlocked?: boolean;\n};\n\n/**\n * The default tag rendered inside `MultiSelect.TagValues` for each selected value.\n * Displays the value label with a remove button and full keyboard navigation support.\n *\n * Use this when building a custom `TagValues`-like component and you want the\n * default tag chrome with consistent styling.\n *\n * @see https://mantle.ngrok.com/components/multi-select#multiselecttag\n *\n * @example\n * ```tsx\n * <MultiSelect.Root>\n *   <MultiSelect.Trigger>\n *     <MultiSelect.TagValues>\n *       {(props) => <MultiSelect.Tag key={props.value} {...props} />}\n *     </MultiSelect.TagValues>\n *     <MultiSelect.Input placeholder=\"Select items...\" />\n *   </MultiSelect.Trigger>\n *   <MultiSelect.Content>\n *     <MultiSelect.Item value=\"apple\">Apple</MultiSelect.Item>\n *   </MultiSelect.Content>\n * </MultiSelect.Root>\n * ```\n */\nconst Tag = forwardRef<HTMLSpanElement, TagProps>(\n\t({ className, value, onRemove, locked = false, onKeyDown, ...props }, ref) => {\n\t\tconst internalRef = useRef<HTMLSpanElement | null>(null);\n\n\t\treturn (\n\t\t\t<span\n\t\t\t\tref={composeRefs(internalRef, ref)}\n\t\t\t\trole=\"option\"\n\t\t\t\taria-selected\n\t\t\t\ttabIndex={-1}\n\t\t\t\tdata-slot=\"multi-select-tag\"\n\t\t\t\tdata-locked={locked || undefined}\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"cursor-default bg-neutral-500/10 border border-neutral-500/20 rounded-xs text-strong inline-flex items-center gap-1 pl-2 pr-0.5 py-0.5 text-sm font-normal\",\n\t\t\t\t\t\"focus-visible:outline-hidden focus-visible:border-accent-600/50 focus-visible:ring-3 focus-visible:ring-focus-accent\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tonKeyDown={(event) => {\n\t\t\t\t\tif (locked && (event.key === \"Backspace\" || event.key === \"Delete\")) {\n\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\tshakeElement(event.currentTarget);\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\tonKeyDown?.(event);\n\t\t\t\t}}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{value}\n\t\t\t\t<button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\taria-label={`Remove ${value}`}\n\t\t\t\t\ttabIndex={-1}\n\t\t\t\t\taria-disabled={locked || undefined}\n\t\t\t\t\tclassName={cx(\n\t\t\t\t\t\t\"cursor-pointer text-strong/40 hover:bg-neutral-500/15 hover:text-strong rounded-xs p-0.5\",\n\t\t\t\t\t\t\"aria-disabled:cursor-default aria-disabled:hover:bg-transparent aria-disabled:hover:text-strong/40\",\n\t\t\t\t\t)}\n\t\t\t\t\tonClick={(event) => {\n\t\t\t\t\t\t// Prevent the click from bubbling to the trigger, which would reopen or refocus the combobox\n\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\t\tif (locked) {\n\t\t\t\t\t\t\t// Shake the tag to signal that removal is blocked\n\t\t\t\t\t\t\tconst tagElement = internalRef.current;\n\t\t\t\t\t\t\tif (tagElement) {\n\t\t\t\t\t\t\t\tshakeElement(tagElement);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t}\n\t\t\t\t\t\tonRemove?.();\n\t\t\t\t\t}}\n\t\t\t\t\tonMouseDown={(event) => {\n\t\t\t\t\t\t// Prevent the input from losing focus on click, which would close the popover before the remove fires\n\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<Icon svg={locked ? <LockIcon /> : <XIcon weight=\"bold\" />} className=\"size-4\" />\n\t\t\t\t</button>\n\t\t\t</span>\n\t\t);\n\t},\n);\nTag.displayName = \"MultiSelectTag\";\n\n/**\n * Props passed to the children render function of `MultiSelect.TagValues`.\n * Spread these onto `MultiSelect.Tag` (or your own tag component) to\n * get the value, remove handler, locked state, and ref-based keyboard-nav\n * registration all wired up automatically.\n *\n * Pre-wired handlers included:\n * - `onKeyDown` — arrow-key nav between tags, Backspace/Delete to remove\n * - `onClick` — focuses the tag and ensures the popover opens/stays open\n */\ntype TagRenderProps = TagProps & {\n\t/** Ref callback — forward this to the tag element to enable keyboard navigation between tags. */\n\tref: (node: HTMLSpanElement | null) => void;\n};\n\ntype MultiSelectTagValuesProps = {\n\t/**\n\t * Values that cannot be removed. Locked tags have their remove button disabled,\n\t * respond to Backspace/Delete key presses with a shake animation, and shake when\n\t * Backspace is pressed on an empty input.\n\t *\n\t * The `locked` state is also forwarded to the render function via `props.locked`\n\t * so custom tag components receive it automatically.\n\t */\n\tlockedValues?: string[];\n\t/**\n\t * Optional render function for each tag. Receives `{ value, onRemove, locked, ref }` —\n\t * spread these onto `MultiSelect.Tag` (or your own element) for full keyboard-nav support.\n\t * When omitted, the default `MultiSelect.Tag` is rendered for each selected value.\n\t *\n\t * @example\n\t * ```tsx\n\t * <MultiSelect.TagValues lockedValues={[\"global\"]}>\n\t *   {(props) => (\n\t *     <MultiSelect.Tag key={props.value} {...props} />\n\t *   )}\n\t * </MultiSelect.TagValues>\n\t * ```\n\t */\n\tchildren?: (props: TagRenderProps) => ReactNode;\n};\n\n/**\n * Renders the selected values as removable tags. Place this inside\n * `MultiSelect.Trigger`, followed by `MultiSelect.Input`.\n *\n * @see https://mantle.ngrok.com/components/multi-select#multiselecttagvalues\n *\n * @example\n * ```tsx\n * <MultiSelect.Root>\n *   <MultiSelect.Trigger>\n *     <MultiSelect.TagValues />\n *     <MultiSelect.Input placeholder=\"Select items...\" />\n *   </MultiSelect.Trigger>\n *   <MultiSelect.Content>\n *     <MultiSelect.Item value=\"apple\">Apple</MultiSelect.Item>\n *   </MultiSelect.Content>\n * </MultiSelect.Root>\n * ```\n */\nconst TagValues = ({ children, lockedValues = [] }: MultiSelectTagValuesProps) => {\n\tconst store = Primitive.useComboboxContext();\n\tconst rawSelectedValue = Primitive.useStoreState(store, \"selectedValue\");\n\tconst selectedValues = isStringArray(rawSelectedValue) ? rawSelectedValue : undefined;\n\tconst selectedArray = selectedValues ?? EMPTY_ARRAY;\n\t// Keep refs in sync so requestAnimationFrame callbacks always read fresh state\n\t// instead of closing over stale values from the render they were scheduled in.\n\tconst selectedArrayRef = useRef<string[]>(selectedArray);\n\tselectedArrayRef.current = selectedArray;\n\t// Use the shared LockedValuesContext ref so Item can also read locked values\n\t// without a separate prop. Writing a ref during render is safe here because\n\t// refs are mutable and don't trigger re-renders.\n\tconst lockedValuesRef = useContext(LockedValuesContext);\n\tlockedValuesRef.current = lockedValues;\n\tconst lockedValuesSet = useMemo(() => new Set(lockedValues), [lockedValues]);\n\tconst tagRefs = useRef<Map<string, HTMLSpanElement>>(new Map());\n\tconst { onInputKeyDownRef, inputRef } = useContext(TagBridgeContext);\n\t// Track pending rAF IDs so we can cancel them on unmount and avoid calling\n\t// focus() on detached DOM nodes if the component unmounts mid-frame.\n\tconst pendingRafsRef = useRef<Set<number>>(new Set());\n\tuseEffect(\n\t\t() => () => {\n\t\t\tpendingRafsRef.current.forEach(cancelAnimationFrame);\n\t\t},\n\t\t[],\n\t);\n\tconst raf = (callback: () => void): void => {\n\t\tlet id: number;\n\t\tid = requestAnimationFrame(() => {\n\t\t\t// Remove the id once the rAF has fired so the set doesn't grow unbounded.\n\t\t\tpendingRafsRef.current.delete(id);\n\t\t\tcallback();\n\t\t});\n\t\tpendingRafsRef.current.add(id);\n\t};\n\n\tconst removeValue = (value: string) => {\n\t\tif (store) {\n\t\t\tconst selected = store.getState().selectedValue;\n\t\t\tif (!isStringArray(selected)) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tstore.setSelectedValue(selected.filter((v) => v !== value));\n\t\t}\n\t};\n\n\tconst focusTag = (index: number) => {\n\t\tconst value = selectedArrayRef.current[index];\n\t\tif (value == null) {\n\t\t\treturn;\n\t\t}\n\t\tconst tagElement = tagRefs.current.get(value);\n\t\tif (tagElement) {\n\t\t\ttagElement.focus();\n\t\t\t// Keep the popover open while a tag is focused. Ariakit closes the\n\t\t\t// popover when the combobox input loses focus, so we reopen it here.\n\t\t\tstore?.show();\n\t\t}\n\t};\n\n\tconst focusInput = () => {\n\t\tinputRef.current?.focus();\n\t};\n\n\tconst handleTagKeyDown = (event: KeyboardEvent<HTMLSpanElement>, index: number) => {\n\t\tconst value = selectedArray[index];\n\t\tswitch (event.key) {\n\t\t\tcase \"ArrowLeft\": {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tif (index > 0) {\n\t\t\t\t\tfocusTag(index - 1);\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase \"ArrowRight\": {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tif (index < selectedArray.length - 1) {\n\t\t\t\t\tfocusTag(index + 1);\n\t\t\t\t} else {\n\t\t\t\t\tfocusInput();\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase \"Backspace\":\n\t\t\tcase \"Delete\": {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tif (value != null) {\n\t\t\t\t\t// Respect locked values: shake instead of removing when locked.\n\t\t\t\t\tif (lockedValuesSet.has(value)) {\n\t\t\t\t\t\tconst tagElement = tagRefs.current.get(value);\n\t\t\t\t\t\tif (tagElement) {\n\t\t\t\t\t\t\tshakeElement(tagElement);\n\t\t\t\t\t\t}\n\t\t\t\t\t\tbreak;\n\t\t\t\t\t}\n\t\t\t\t\tremoveValue(value);\n\t\t\t\t\t// After removal, the array shifts. Focus the next logical tag or the input.\n\t\t\t\t\tif (event.key === \"Backspace\") {\n\t\t\t\t\t\tif (index > 0) {\n\t\t\t\t\t\t\t// Focus the previous tag (will have same index - 1 after removal)\n\t\t\t\t\t\t\t// We need to wait for the next render, so use requestAnimationFrame\n\t\t\t\t\t\t\tconst prevIndex = index - 1;\n\t\t\t\t\t\t\traf(() => focusTag(prevIndex));\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\traf(() => {\n\t\t\t\t\t\t\t\tif (selectedArrayRef.current.length > 0) {\n\t\t\t\t\t\t\t\t\tfocusTag(0);\n\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\tfocusInput();\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t});\n\t\t\t\t\t\t}\n\t\t\t\t\t} else {\n\t\t\t\t\t\t// Delete: move focus right\n\t\t\t\t\t\traf(() => {\n\t\t\t\t\t\t\t// index stays the same since the item at `index` was removed and the next one slides in\n\t\t\t\t\t\t\tif (index < selectedArrayRef.current.length) {\n\t\t\t\t\t\t\t\tfocusTag(index);\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tfocusInput();\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t});\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase \"ArrowUp\":\n\t\t\tcase \"ArrowDown\": {\n\t\t\t\t// Don't scroll the page. Instead, focus the input and forward the key\n\t\t\t\t// to Ariakit so it navigates the popover list.\n\t\t\t\tevent.preventDefault();\n\t\t\t\tfocusInput();\n\t\t\t\tinputRef.current?.dispatchEvent(\n\t\t\t\t\tnew KeyboardEvent(\"keydown\", {\n\t\t\t\t\t\tkey: event.key,\n\t\t\t\t\t\tbubbles: true,\n\t\t\t\t\t\tcancelable: true,\n\t\t\t\t\t\tshiftKey: event.shiftKey,\n\t\t\t\t\t\tctrlKey: event.ctrlKey,\n\t\t\t\t\t\tmetaKey: event.metaKey,\n\t\t\t\t\t\taltKey: event.altKey,\n\t\t\t\t\t}),\n\t\t\t\t);\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tdefault: {\n\t\t\t\t// If a printable character is typed while a tag is focused, jump to input\n\t\t\t\tif (event.key.length === 1 && !event.ctrlKey && !event.metaKey) {\n\t\t\t\t\tfocusInput();\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\t};\n\n\tconst handleInputKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n\t\tif (\n\t\t\tevent.key === \"ArrowLeft\" &&\n\t\t\tevent.currentTarget.selectionStart === 0 &&\n\t\t\tevent.currentTarget.selectionEnd === 0 &&\n\t\t\tselectedArray.length > 0\n\t\t) {\n\t\t\tevent.preventDefault();\n\t\t\tfocusTag(selectedArray.length - 1);\n\t\t\treturn;\n\t\t}\n\t\tif (event.key === \"Backspace\" && event.currentTarget.value === \"\" && selectedArray.length > 0) {\n\t\t\tconst lastValue = selectedArray[selectedArray.length - 1];\n\t\t\tif (lastValue != null) {\n\t\t\t\tif (lockedValuesRef.current.includes(lastValue)) {\n\t\t\t\t\t// The last tag is locked — shake it to signal that removal is blocked.\n\t\t\t\t\tconst tagElement = tagRefs.current.get(lastValue);\n\t\t\t\t\tif (tagElement) {\n\t\t\t\t\t\tshakeElement(tagElement);\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\tremoveValue(lastValue);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t};\n\n\t// Write the latest handler into the bridge ref so Input can call it via onKeyDown.\n\t// Assigned directly during render (safe — refs are mutable and don't trigger re-renders).\n\tonInputKeyDownRef.current = handleInputKeyDown;\n\n\treturn (\n\t\t<>\n\t\t\t{selectedArray.map((value, index) => {\n\t\t\t\tconst tagOptionProps: TagRenderProps = {\n\t\t\t\t\tvalue,\n\t\t\t\t\tlocked: lockedValuesSet.has(value),\n\t\t\t\t\tonRemove: () => {\n\t\t\t\t\t\t// Respect locked values: shake instead of removing when locked.\n\t\t\t\t\t\t// This guards custom tag renderers that call onRemove directly.\n\t\t\t\t\t\tif (lockedValuesSet.has(value)) {\n\t\t\t\t\t\t\tconst tagElement = tagRefs.current.get(value);\n\t\t\t\t\t\t\tif (tagElement) {\n\t\t\t\t\t\t\t\tshakeElement(tagElement);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t}\n\t\t\t\t\t\tremoveValue(value);\n\t\t\t\t\t},\n\t\t\t\t\tref: (node: HTMLSpanElement | null) => {\n\t\t\t\t\t\tif (node) {\n\t\t\t\t\t\t\ttagRefs.current.set(value, node);\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\ttagRefs.current.delete(value);\n\t\t\t\t\t\t}\n\t\t\t\t\t},\n\t\t\t\t\tonKeyDown: (event: KeyboardEvent<HTMLSpanElement>) => handleTagKeyDown(event, index),\n\t\t\t\t\t// Ensure the popover opens/stays open when a tag is clicked,\n\t\t\t\t\t// including when the component was fully blurred before the click.\n\t\t\t\t\tonClick: () => focusTag(index),\n\t\t\t\t};\n\n\t\t\t\tif (children) {\n\t\t\t\t\treturn children(tagOptionProps);\n\t\t\t\t}\n\n\t\t\t\treturn <Tag key={value} {...tagOptionProps} />;\n\t\t\t})}\n\t\t</>\n\t);\n};\nTagValues.displayName = \"MultiSelectTagValues\";\n\ntype MultiSelectInputProps = Omit<Primitive.ComboboxProps, \"render\"> & {\n\t/**\n\t * Called with the raw string value whenever the input text changes.\n\t * Use this to drive external filtering (e.g. with matchSorter) without\n\t * having to unwrap the DOM event. A convenience alternative to `onChange`.\n\t */\n\tonValueChange?: (value: string) => void;\n};\n\n/**\n * The combobox input for filtering items. Place this inside `MultiSelect.Trigger`,\n * after `MultiSelect.TagValues`.\n *\n * @see https://mantle.ngrok.com/components/multi-select#multiselectinput\n *\n * @example\n * ```tsx\n * <MultiSelect.Root>\n *   <MultiSelect.Trigger>\n *     <MultiSelect.TagValues />\n *     <MultiSelect.Input placeholder=\"Select items...\" />\n *   </MultiSelect.Trigger>\n *   <MultiSelect.Content>\n *     <MultiSelect.Item value=\"apple\">Apple</MultiSelect.Item>\n *   </MultiSelect.Content>\n * </MultiSelect.Root>\n * ```\n */\nconst Input = forwardRef<ComponentRef<\"input\">, MultiSelectInputProps>(\n\t(\n\t\t{ className, onBlur, onChange, onFocus, onKeyDown, onValueChange, placeholder, ...props },\n\t\tref,\n\t) => {\n\t\tconst store = Primitive.useComboboxContext();\n\t\tconst { onInputKeyDownRef, inputRef } = useContext(TagBridgeContext);\n\t\tconst rawSelectedValue = Primitive.useStoreState(store, \"selectedValue\");\n\t\tconst selectedValues = isStringArray(rawSelectedValue) ? rawSelectedValue : undefined;\n\t\tconst hasSelectedValues = (selectedValues?.length ?? 0) > 0;\n\n\t\treturn (\n\t\t\t<Primitive.Combobox\n\t\t\t\tautoSelect\n\t\t\t\tdata-slot=\"multi-select-input\"\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"pointer-coarse:text-base min-w-20 flex-1 select-text border-0 bg-transparent text-sm outline-hidden\",\n\t\t\t\t\t\"placeholder:select-none placeholder:text-placeholder\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tonChange={(event) => {\n\t\t\t\t\tonValueChange?.(event.target.value);\n\t\t\t\t\tonChange?.(event);\n\t\t\t\t}}\n\t\t\t\tonKeyDown={(event) => {\n\t\t\t\t\tonInputKeyDownRef.current?.(event);\n\t\t\t\t\tonKeyDown?.(event);\n\t\t\t\t}}\n\t\t\t\tonBlur={(event) => {\n\t\t\t\t\t// When focus moves from the input to a tag, Ariakit would normally\n\t\t\t\t\t// close the popover because the combobox input lost focus. Keep it\n\t\t\t\t\t// open so the user can see the list while navigating tags.\n\t\t\t\t\tif (\n\t\t\t\t\t\tevent.relatedTarget instanceof HTMLElement &&\n\t\t\t\t\t\tevent.relatedTarget.closest('[data-slot=\"multi-select-tag\"]')\n\t\t\t\t\t) {\n\t\t\t\t\t\tstore?.show();\n\t\t\t\t\t}\n\t\t\t\t\tonBlur?.(event);\n\t\t\t\t}}\n\t\t\t\tonFocus={(event) => {\n\t\t\t\t\t// Ariakit doesn't always open the popover on focus when the input is\n\t\t\t\t\t// already mounted (e.g. returning focus from a tag). Force it open.\n\t\t\t\t\tstore?.show();\n\t\t\t\t\tonFocus?.(event);\n\t\t\t\t}}\n\t\t\t\tplaceholder={hasSelectedValues ? undefined : placeholder}\n\t\t\t\t// Register the input's DOM node in the bridge so TagValues can focus it for keyboard nav.\n\t\t\t\tref={composeRefs(inputRef, ref)}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nInput.displayName = \"MultiSelectInput\";\n\ntype MultiSelectContentProps = Omit<Primitive.ComboboxPopoverProps, \"render\"> & WithAsChild;\n\n/**\n * Renders a popover that contains multi-select content, such as items, groups,\n * and separators. Opens below the trigger.\n *\n * @see https://mantle.ngrok.com/components/multi-select#multiselectcontent\n *\n * @example\n * ```tsx\n * <MultiSelect.Root>\n *   <MultiSelect.Trigger>\n *     <MultiSelect.TagValues />\n *     <MultiSelect.Input placeholder=\"Select items...\" />\n *   </MultiSelect.Trigger>\n *   <MultiSelect.Content>\n *     <MultiSelect.Item value=\"apple\">Apple</MultiSelect.Item>\n *     <MultiSelect.Item value=\"banana\">Banana</MultiSelect.Item>\n *   </MultiSelect.Content>\n * </MultiSelect.Root>\n * ```\n */\nconst Content = forwardRef<ComponentRef<\"div\">, MultiSelectContentProps>(\n\t(\n\t\t{\n\t\t\tasChild = false,\n\t\t\tbackdrop = false,\n\t\t\tchildren,\n\t\t\tclassName,\n\t\t\tmodal = true,\n\t\t\tportalElement,\n\t\t\tsameWidth = true,\n\t\t\tunmountOnHide = true,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst triggerRef = useContext(TriggerRefContext);\n\n\t\tconst getAnchorRect = useCallback(() => {\n\t\t\treturn triggerRef.current?.getBoundingClientRect() ?? null;\n\t\t}, [triggerRef]);\n\n\t\tconst getPortalElement = useCallback(\n\t\t\t(element: HTMLElement) => {\n\t\t\t\tif (typeof portalElement === \"function\") {\n\t\t\t\t\treturn portalElement(element);\n\t\t\t\t}\n\n\t\t\t\treturn (\n\t\t\t\t\tportalElement ??\n\t\t\t\t\ttriggerRef.current?.closest<HTMLElement>(\"[data-mantle-modal-content]\") ??\n\t\t\t\t\telement.ownerDocument.body\n\t\t\t\t);\n\t\t\t},\n\t\t\t[portalElement, triggerRef],\n\t\t);\n\n\t\tconst hideOnInteractOutside = useCallback(\n\t\t\t(event: Event) => {\n\t\t\t\t// Keep the popover open when interacting with any part of the trigger\n\t\t\t\t// (tags, buttons, input, padding). Ariakit would otherwise close on any\n\t\t\t\t// mousedown outside the popover — including tag clicks.\n\t\t\t\tif (event.target instanceof Node && triggerRef.current?.contains(event.target)) {\n\t\t\t\t\treturn false;\n\t\t\t\t}\n\t\t\t\treturn true;\n\t\t\t},\n\t\t\t[triggerRef],\n\t\t);\n\n\t\treturn (\n\t\t\t<Primitive.ComboboxPopover\n\t\t\t\tdata-slot=\"multi-select-content\"\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"border-popover bg-popover relative z-50 max-h-96 min-w-32 scrollbar overflow-y-scroll overflow-x-hidden overscroll-y-none rounded-md border shadow-md pt-1 pb-1 has-data-content-footer:pb-0 font-sans flex flex-col gap-px focus:outline-hidden\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tbackdrop={backdrop}\n\t\t\t\tgetAnchorRect={getAnchorRect}\n\t\t\t\tgutter={4}\n\t\t\t\thideOnInteractOutside={hideOnInteractOutside}\n\t\t\t\tmodal={modal}\n\t\t\t\tportalElement={getPortalElement}\n\t\t\t\tref={ref}\n\t\t\t\trender={\n\t\t\t\t\tasChild ? ({ ref, ...childProps }) => <Slot ref={ref} {...childProps} /> : undefined\n\t\t\t\t}\n\t\t\t\tsameWidth={sameWidth}\n\t\t\t\tunmountOnHide={unmountOnHide}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</Primitive.ComboboxPopover>\n\t\t);\n\t},\n);\nContent.displayName = \"MultiSelectContent\";\n\ntype MultiSelectItemProps = Omit<Primitive.ComboboxItemProps, \"render\"> & WithAsChild;\n\n/**\n * Renders a selectable item inside a `MultiSelect.Content` component.\n * Items display a checkbox indicator when selected.\n *\n * @see https://mantle.ngrok.com/components/multi-select#multiselectitem\n *\n * @example\n * ```tsx\n * <MultiSelect.Root>\n *   <MultiSelect.Trigger>\n *     <MultiSelect.TagValues />\n *     <MultiSelect.Input placeholder=\"Select items...\" />\n *   </MultiSelect.Trigger>\n *   <MultiSelect.Content>\n *     <MultiSelect.Item value=\"apple\">Apple</MultiSelect.Item>\n *     <MultiSelect.Item value=\"banana\">Banana</MultiSelect.Item>\n *   </MultiSelect.Content>\n * </MultiSelect.Root>\n * ```\n */\nconst Item = forwardRef<ComponentRef<\"div\">, MultiSelectItemProps>(\n\t(\n\t\t{ asChild = false, children, className, focusOnHover = true, value, onClick, ...props },\n\t\tref,\n\t) => {\n\t\tconst lockedValuesRef = useContext(LockedValuesContext);\n\t\tconst isLocked = value != null && lockedValuesRef.current.includes(value);\n\n\t\treturn (\n\t\t\t<Primitive.ComboboxItem\n\t\t\t\tdata-slot=\"multi-select-item\"\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"relative mx-1 cursor-pointer rounded-md pl-2 pr-8 py-1.5 text-strong text-sm font-normal flex min-w-0 items-center gap-2\",\n\t\t\t\t\t\"[[role=option]+&]:mt-px\",\n\t\t\t\t\t\"data-active-item:bg-active-menu-item\",\n\t\t\t\t\t\"aria-disabled:opacity-50\",\n\t\t\t\t\t\"aria-selected:bg-selected-menu-item aria-selected:data-active-item:bg-active-selected-menu-item\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tfocusOnHover={focusOnHover}\n\t\t\t\tonClick={(event) => {\n\t\t\t\t\t// Prevent Ariakit from toggling off a locked value.\n\t\t\t\t\t// Ariakit checks event.defaultPrevented before executing its selection logic.\n\t\t\t\t\tif (isLocked) {\n\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\tonClick?.(event);\n\t\t\t\t}}\n\t\t\t\tref={ref}\n\t\t\t\trender={\n\t\t\t\t\tasChild ? ({ ref, ...childProps }) => <Slot ref={ref} {...childProps} /> : undefined\n\t\t\t\t}\n\t\t\t\tresetValueOnSelect\n\t\t\t\tvalue={value}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t\t<Primitive.ComboboxItemCheck className=\"absolute right-2 flex h-3.5 w-3.5 items-center justify-center\">\n\t\t\t\t\t<Icon svg={<CheckIcon weight=\"bold\" />} className=\"size-4 text-accent-600\" />\n\t\t\t\t</Primitive.ComboboxItemCheck>\n\t\t\t</Primitive.ComboboxItem>\n\t\t);\n\t},\n);\nItem.displayName = \"MultiSelectItem\";\n\ntype MultiSelectGroupProps = Omit<Primitive.ComboboxGroupProps, \"render\"> & WithAsChild;\n\n/**\n * Renders a group for MultiSelect.Item elements.\n *\n * @see https://mantle.ngrok.com/components/multi-select#multiselectgroup\n *\n * @example\n * ```tsx\n * <MultiSelect.Root>\n *   <MultiSelect.Trigger>\n *     <MultiSelect.TagValues />\n *     <MultiSelect.Input placeholder=\"Select items...\" />\n *   </MultiSelect.Trigger>\n *   <MultiSelect.Content>\n *     <MultiSelect.Group>\n *       <MultiSelect.GroupLabel>Fruits</MultiSelect.GroupLabel>\n *       <MultiSelect.Item value=\"apple\">Apple</MultiSelect.Item>\n *       <MultiSelect.Item value=\"banana\">Banana</MultiSelect.Item>\n *     </MultiSelect.Group>\n *   </MultiSelect.Content>\n * </MultiSelect.Root>\n * ```\n */\nconst Group = forwardRef<ComponentRef<\"div\">, MultiSelectGroupProps>(\n\t({ asChild = false, children, ...props }, ref) => {\n\t\treturn (\n\t\t\t<Primitive.ComboboxGroup\n\t\t\t\tdata-slot=\"multi-select-group\"\n\t\t\t\tclassName=\"mx-1\"\n\t\t\t\tref={ref}\n\t\t\t\trender={\n\t\t\t\t\tasChild ? ({ ref, ...childProps }) => <Slot ref={ref} {...childProps} /> : undefined\n\t\t\t\t}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</Primitive.ComboboxGroup>\n\t\t);\n\t},\n);\nGroup.displayName = \"MultiSelectGroup\";\n\ntype MultiSelectGroupLabelProps = Omit<Primitive.ComboboxGroupLabelProps, \"render\"> & WithAsChild;\n\n/**\n * Renders a label in a multi-select group.\n *\n * @see https://mantle.ngrok.com/components/multi-select#multiselectgrouplabel\n *\n * @example\n * ```tsx\n * <MultiSelect.Root>\n *   <MultiSelect.Trigger>\n *     <MultiSelect.TagValues />\n *     <MultiSelect.Input placeholder=\"Select items...\" />\n *   </MultiSelect.Trigger>\n *   <MultiSelect.Content>\n *     <MultiSelect.Group>\n *       <MultiSelect.GroupLabel>Fruits</MultiSelect.GroupLabel>\n *       <MultiSelect.Item value=\"apple\">Apple</MultiSelect.Item>\n *     </MultiSelect.Group>\n *   </MultiSelect.Content>\n * </MultiSelect.Root>\n * ```\n */\nconst GroupLabel = forwardRef<ComponentRef<\"div\">, MultiSelectGroupLabelProps>(\n\t({ asChild = false, children, className, ...props }, ref) => {\n\t\treturn (\n\t\t\t<Primitive.ComboboxGroupLabel\n\t\t\t\tdata-slot=\"multi-select-group-label\"\n\t\t\t\tclassName={cx(\"text-muted px-2 py-1 text-xs font-medium\", className)}\n\t\t\t\tref={ref}\n\t\t\t\trender={\n\t\t\t\t\tasChild ? ({ ref, ...childProps }) => <Slot ref={ref} {...childProps} /> : undefined\n\t\t\t\t}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</Primitive.ComboboxGroupLabel>\n\t\t);\n\t},\n);\nGroupLabel.displayName = \"MultiSelectGroupLabel\";\n\ntype MultiSelectGroupDescriptionProps = ComponentPropsWithoutRef<\"p\">;\n\n/**\n * Renders a description below a `MultiSelect.GroupLabel` inside a `MultiSelect.Group`.\n * Provides context about the group's purpose or constraints.\n *\n * @see https://mantle.ngrok.com/components/multi-select#multiselectgroupdescription\n *\n * @example\n * ```tsx\n * <MultiSelect.Root>\n *   <MultiSelect.Trigger>\n *     <MultiSelect.TagValues />\n *     <MultiSelect.Input placeholder=\"Select regions...\" />\n *   </MultiSelect.Trigger>\n *   <MultiSelect.Content>\n *     <MultiSelect.Group>\n *       <MultiSelect.GroupLabel>Regional Aliases</MultiSelect.GroupLabel>\n *       <MultiSelect.GroupDescription>\n *         Include all points of presence that are geographically within the region.\n *       </MultiSelect.GroupDescription>\n *       <MultiSelect.Item value=\"global\">global</MultiSelect.Item>\n *     </MultiSelect.Group>\n *   </MultiSelect.Content>\n * </MultiSelect.Root>\n * ```\n */\nconst GroupDescription = forwardRef<HTMLParagraphElement, MultiSelectGroupDescriptionProps>(\n\t({ className, children, ...props }, ref) => {\n\t\treturn (\n\t\t\t<p\n\t\t\t\tdata-slot=\"multi-select-group-description\"\n\t\t\t\tclassName={cx(\"text-muted px-2 pb-1 text-xs\", className)}\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</p>\n\t\t);\n\t},\n);\nGroupDescription.displayName = \"MultiSelectGroupDescription\";\n\n/**\n * Renders a separator between MultiSelect.Items or MultiSelect.Groups.\n *\n * @see https://mantle.ngrok.com/components/multi-select#multiselectseparator\n *\n * @example\n * ```tsx\n * <MultiSelect.Root>\n *   <MultiSelect.Trigger>\n *     <MultiSelect.TagValues />\n *     <MultiSelect.Input placeholder=\"Select items...\" />\n *   </MultiSelect.Trigger>\n *   <MultiSelect.Content>\n *     <MultiSelect.Group>\n *       <MultiSelect.Item value=\"apple\">Apple</MultiSelect.Item>\n *     </MultiSelect.Group>\n *     <MultiSelect.Separator />\n *     <MultiSelect.Group>\n *       <MultiSelect.Item value=\"carrot\">Carrot</MultiSelect.Item>\n *     </MultiSelect.Group>\n *   </MultiSelect.Content>\n * </MultiSelect.Root>\n * ```\n */\nconst MultiSelectSeparatorComponent = forwardRef<\n\tComponentRef<\"div\">,\n\tComponentPropsWithoutRef<typeof Separator>\n>(({ className, ...props }, ref) => (\n\t<Separator\n\t\tdata-slot=\"multi-select-separator\"\n\t\tref={ref}\n\t\tclassName={cx(\"my-1 w-auto\", className)}\n\t\t{...props}\n\t/>\n));\nMultiSelectSeparatorComponent.displayName = \"MultiSelectSeparator\";\n\ntype MultiSelectEmptyProps = ComponentPropsWithoutRef<\"div\">;\n\n/**\n * Renders a message when no items match the current filter.\n *\n * @see https://mantle.ngrok.com/components/multi-select#multiselectempty\n *\n * @example\n * ```tsx\n * <MultiSelect.Root>\n *   <MultiSelect.Trigger>\n *     <MultiSelect.TagValues />\n *     <MultiSelect.Input placeholder=\"Select items...\" />\n *   </MultiSelect.Trigger>\n *   <MultiSelect.Content>\n *     {matches.length === 0 && (\n *       <MultiSelect.Empty>No results found</MultiSelect.Empty>\n *     )}\n *   </MultiSelect.Content>\n * </MultiSelect.Root>\n * ```\n */\nconst Empty = forwardRef<HTMLDivElement, MultiSelectEmptyProps>(\n\t({ className, children, ...props }, ref) => {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tdata-slot=\"multi-select-empty\"\n\t\t\t\tclassName={cx(\"mx-1 text-muted px-2 py-6 text-center text-sm\", className)}\n\t\t\t\tref={ref}\n\t\t\t\trole=\"presentation\"\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</div>\n\t\t);\n\t},\n);\nEmpty.displayName = \"MultiSelectEmpty\";\n\ntype MultiSelectContentFooterProps = ComponentPropsWithoutRef<\"div\">;\n\n/**\n * Renders a sticky footer pinned to the bottom inside `MultiSelect.Content`,\n * with a separator border at the top.\n *\n * @see https://mantle.ngrok.com/components/multi-select#multiselectcontentfooter\n *\n * @example\n * ```tsx\n * <MultiSelect.Root>\n *   <MultiSelect.Trigger>\n *     <MultiSelect.TagValues />\n *     <MultiSelect.Input placeholder=\"Select items...\" />\n *   </MultiSelect.Trigger>\n *   <MultiSelect.Content>\n *     <MultiSelect.Item value=\"apple\">Apple</MultiSelect.Item>\n *     <MultiSelect.ContentFooter>\n *       <p>Upgrade to unlock more options.</p>\n *       <Button>Upgrade</Button>\n *     </MultiSelect.ContentFooter>\n *   </MultiSelect.Content>\n * </MultiSelect.Root>\n * ```\n */\nconst ContentFooter = forwardRef<HTMLDivElement, MultiSelectContentFooterProps>(\n\t({ className, children, ...props }, ref) => {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tref={ref}\n\t\t\t\tdata-slot=\"multi-select-content-footer\"\n\t\t\t\tdata-content-footer\n\t\t\t\tclassName={cx(\"bg-popover sticky bottom-0 border-t border-popover\", className)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</div>\n\t\t);\n\t},\n);\nContentFooter.displayName = \"MultiSelectContentFooter\";\n\n/**\n * A multi-select combobox that allows users to select multiple values with\n * typeahead filtering. Selected values are displayed as removable tags.\n *\n * Built on top of Ariakit's Combobox primitives with full keyboard support\n * and WAI-ARIA compliance.\n *\n * Use MultiSelect when the user can choose multiple values from a list, with selected\n * items rendered as removable tags/chips. For single selection, use Combobox (with search)\n * or Select (without).\n *\n * @see https://mantle.ngrok.com/components/multi-select\n * @see https://www.w3.org/WAI/ARIA/apg/patterns/combobox/\n * @see https://ariakit.org/components/combobox\n *\n * @example\n * Composition:\n * ```\n * MultiSelect.Root\n * ├── MultiSelect.Trigger\n * │   ├── MultiSelect.TagValues\n * │   └── MultiSelect.Input\n * └── MultiSelect.Content\n *     ├── MultiSelect.Group\n *     │   ├── MultiSelect.GroupLabel\n *     │   ├── MultiSelect.GroupDescription\n *     │   └── MultiSelect.Item\n *     ├── MultiSelect.Separator\n *     ├── MultiSelect.Empty\n *     └── MultiSelect.ContentFooter\n * ```\n *\n * @example\n * ```tsx\n * <MultiSelect.Root>\n *   <MultiSelect.Trigger>\n *     <MultiSelect.TagValues />\n *     <MultiSelect.Input placeholder=\"Select items...\" />\n *   </MultiSelect.Trigger>\n *   <MultiSelect.Content>\n *     <MultiSelect.Item value=\"apple\">Apple</MultiSelect.Item>\n *     <MultiSelect.Item value=\"banana\">Banana</MultiSelect.Item>\n *     <MultiSelect.Item value=\"cherry\">Cherry</MultiSelect.Item>\n *   </MultiSelect.Content>\n * </MultiSelect.Root>\n * ```\n */\nconst MultiSelect = {\n\t/**\n\t * Root component for a multi-select combobox. Provides state management for\n\t * selecting multiple values with typeahead filtering.\n\t *\n\t * Use MultiSelect when the user can choose multiple values from a list, with selected\n\t * items rendered as removable tags/chips. For single selection, use Combobox (with search)\n\t * or Select (without).\n\t *\n\t * @see https://mantle.ngrok.com/components/multi-select#multiselectroot\n\t *\n\t * @example\n\t * ```tsx\n\t * <MultiSelect.Root>\n\t *   <MultiSelect.Trigger>\n\t *     <MultiSelect.TagValues />\n\t *     <MultiSelect.Input placeholder=\"Select items...\" />\n\t *   </MultiSelect.Trigger>\n\t *   <MultiSelect.Content>\n\t *     <MultiSelect.Item value=\"apple\">Apple</MultiSelect.Item>\n\t *   </MultiSelect.Content>\n\t * </MultiSelect.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * The trigger container for the multi-select. Wraps the tags and input\n\t * in a styled container.\n\t *\n\t * @see https://mantle.ngrok.com/components/multi-select#multiselecttrigger\n\t *\n\t * @example\n\t * ```tsx\n\t * <MultiSelect.Root>\n\t *   <MultiSelect.Trigger>\n\t *     <MultiSelect.TagValues />\n\t *     <MultiSelect.Input placeholder=\"Select items...\" />\n\t *   </MultiSelect.Trigger>\n\t *   <MultiSelect.Content>\n\t *     <MultiSelect.Item value=\"apple\">Apple</MultiSelect.Item>\n\t *   </MultiSelect.Content>\n\t * </MultiSelect.Root>\n\t * ```\n\t */\n\tTrigger,\n\t/**\n\t * Renders the selected values as removable tags. Place this inside\n\t * `MultiSelect.Trigger`, followed by `MultiSelect.Input`.\n\t *\n\t * Use `lockedValues` to prevent specific tags from being removed. Locked tags\n\t * have their remove button disabled and shake when Backspace is pressed.\n\t *\n\t * @see https://mantle.ngrok.com/components/multi-select#multiselecttagvalues\n\t *\n\t * @example\n\t * ```tsx\n\t * <MultiSelect.Root>\n\t *   <MultiSelect.Trigger>\n\t *     <MultiSelect.TagValues lockedValues={[\"global\"]} />\n\t *     <MultiSelect.Input placeholder=\"Select items...\" />\n\t *   </MultiSelect.Trigger>\n\t *   <MultiSelect.Content>\n\t *     <MultiSelect.Item value=\"apple\">Apple</MultiSelect.Item>\n\t *   </MultiSelect.Content>\n\t * </MultiSelect.Root>\n\t * ```\n\t *\n\t * @example\n\t * Custom tags via children render function — `locked` is forwarded via props.\n\t * ```tsx\n\t * <MultiSelect.Root>\n\t *   <MultiSelect.Trigger>\n\t *     <MultiSelect.TagValues lockedValues={[\"global\"]}>\n\t *       {(props) => <MultiSelect.Tag key={props.value} {...props} />}\n\t *     </MultiSelect.TagValues>\n\t *     <MultiSelect.Input placeholder=\"Select items...\" />\n\t *   </MultiSelect.Trigger>\n\t *   <MultiSelect.Content>\n\t *     <MultiSelect.Item value=\"apple\">Apple</MultiSelect.Item>\n\t *   </MultiSelect.Content>\n\t * </MultiSelect.Root>\n\t * ```\n\t */\n\tTagValues,\n\t/**\n\t * The combobox input for filtering items. Place this inside\n\t * `MultiSelect.Trigger`, after `MultiSelect.TagValues`.\n\t *\n\t * @see https://mantle.ngrok.com/components/multi-select#multiselectinput\n\t *\n\t * @example\n\t * ```tsx\n\t * <MultiSelect.Root>\n\t *   <MultiSelect.Trigger>\n\t *     <MultiSelect.TagValues />\n\t *     <MultiSelect.Input placeholder=\"Select items...\" />\n\t *   </MultiSelect.Trigger>\n\t *   <MultiSelect.Content>\n\t *     <MultiSelect.Item value=\"apple\">Apple</MultiSelect.Item>\n\t *   </MultiSelect.Content>\n\t * </MultiSelect.Root>\n\t * ```\n\t */\n\tInput,\n\t/**\n\t * The default tag rendered inside `MultiSelect.TagValues` for each selected value.\n\t * Displays the value label with a remove button and keyboard navigation support.\n\t *\n\t * @see https://mantle.ngrok.com/components/multi-select#multiselecttag\n\t *\n\t * @example\n\t * ```tsx\n\t * <MultiSelect.Root>\n\t *   <MultiSelect.Trigger>\n\t *     <MultiSelect.TagValues>\n\t *       {(props) => <MultiSelect.Tag key={props.value} {...props} />}\n\t *     </MultiSelect.TagValues>\n\t *     <MultiSelect.Input placeholder=\"Select items...\" />\n\t *   </MultiSelect.Trigger>\n\t *   <MultiSelect.Content>\n\t *     <MultiSelect.Item value=\"apple\">Apple</MultiSelect.Item>\n\t *   </MultiSelect.Content>\n\t * </MultiSelect.Root>\n\t * ```\n\t */\n\tTag,\n\t/**\n\t * Renders a popover that contains multi-select content.\n\t *\n\t * @see https://mantle.ngrok.com/components/multi-select#multiselectcontent\n\t *\n\t * @example\n\t * ```tsx\n\t * <MultiSelect.Root>\n\t *   <MultiSelect.Trigger>\n\t *     <MultiSelect.TagValues />\n\t *     <MultiSelect.Input placeholder=\"Select items...\" />\n\t *   </MultiSelect.Trigger>\n\t *   <MultiSelect.Content>\n\t *     <MultiSelect.Item value=\"apple\">Apple</MultiSelect.Item>\n\t *     <MultiSelect.Item value=\"banana\">Banana</MultiSelect.Item>\n\t *   </MultiSelect.Content>\n\t * </MultiSelect.Root>\n\t * ```\n\t */\n\tContent,\n\t/**\n\t * Renders a sticky footer pinned to the bottom inside `MultiSelect.Content`,\n\t * with a separator border at the top.\n\t *\n\t * @see https://mantle.ngrok.com/components/multi-select#multiselectcontentfooter\n\t *\n\t * @example\n\t * ```tsx\n\t * <MultiSelect.Root>\n\t *   <MultiSelect.Trigger>\n\t *     <MultiSelect.TagValues />\n\t *     <MultiSelect.Input placeholder=\"Select items...\" />\n\t *   </MultiSelect.Trigger>\n\t *   <MultiSelect.Content>\n\t *     <MultiSelect.Item value=\"apple\">Apple</MultiSelect.Item>\n\t *     <MultiSelect.ContentFooter>\n\t *       <p>Upgrade to unlock more options.</p>\n\t *     </MultiSelect.ContentFooter>\n\t *   </MultiSelect.Content>\n\t * </MultiSelect.Root>\n\t * ```\n\t */\n\tContentFooter,\n\t/**\n\t * Renders a selectable item with a checkbox indicator inside a `MultiSelect.Content`.\n\t *\n\t * @see https://mantle.ngrok.com/components/multi-select#multiselectitem\n\t *\n\t * @example\n\t * ```tsx\n\t * <MultiSelect.Root>\n\t *   <MultiSelect.Trigger>\n\t *     <MultiSelect.TagValues />\n\t *     <MultiSelect.Input placeholder=\"Select items...\" />\n\t *   </MultiSelect.Trigger>\n\t *   <MultiSelect.Content>\n\t *     <MultiSelect.Item value=\"apple\">Apple</MultiSelect.Item>\n\t *     <MultiSelect.Item value=\"banana\">Banana</MultiSelect.Item>\n\t *   </MultiSelect.Content>\n\t * </MultiSelect.Root>\n\t * ```\n\t */\n\tItem,\n\t/**\n\t * Renders a group for MultiSelect.Item elements.\n\t *\n\t * @see https://mantle.ngrok.com/components/multi-select#multiselectgroup\n\t *\n\t * @example\n\t * ```tsx\n\t * <MultiSelect.Root>\n\t *   <MultiSelect.Trigger>\n\t *     <MultiSelect.TagValues />\n\t *     <MultiSelect.Input placeholder=\"Select items...\" />\n\t *   </MultiSelect.Trigger>\n\t *   <MultiSelect.Content>\n\t *     <MultiSelect.Group>\n\t *       <MultiSelect.GroupLabel>Fruits</MultiSelect.GroupLabel>\n\t *       <MultiSelect.Item value=\"apple\">Apple</MultiSelect.Item>\n\t *     </MultiSelect.Group>\n\t *   </MultiSelect.Content>\n\t * </MultiSelect.Root>\n\t * ```\n\t */\n\tGroup,\n\t/**\n\t * Renders a label in a multi-select group.\n\t *\n\t * @see https://mantle.ngrok.com/components/multi-select#multiselectgrouplabel\n\t *\n\t * @example\n\t * ```tsx\n\t * <MultiSelect.Root>\n\t *   <MultiSelect.Trigger>\n\t *     <MultiSelect.TagValues />\n\t *     <MultiSelect.Input placeholder=\"Select items...\" />\n\t *   </MultiSelect.Trigger>\n\t *   <MultiSelect.Content>\n\t *     <MultiSelect.Group>\n\t *       <MultiSelect.GroupLabel>Fruits</MultiSelect.GroupLabel>\n\t *       <MultiSelect.Item value=\"apple\">Apple</MultiSelect.Item>\n\t *     </MultiSelect.Group>\n\t *   </MultiSelect.Content>\n\t * </MultiSelect.Root>\n\t * ```\n\t */\n\tGroupLabel,\n\t/**\n\t * Renders a description below a `MultiSelect.GroupLabel` inside a `MultiSelect.Group`.\n\t *\n\t * @see https://mantle.ngrok.com/components/multi-select#multiselectgroupdescription\n\t *\n\t * @example\n\t * ```tsx\n\t * <MultiSelect.Root>\n\t *   <MultiSelect.Trigger>\n\t *     <MultiSelect.TagValues />\n\t *     <MultiSelect.Input placeholder=\"Select regions...\" />\n\t *   </MultiSelect.Trigger>\n\t *   <MultiSelect.Content>\n\t *     <MultiSelect.Group>\n\t *       <MultiSelect.GroupLabel>Regional Aliases</MultiSelect.GroupLabel>\n\t *       <MultiSelect.GroupDescription>\n\t *         Include all points of presence within the region.\n\t *       </MultiSelect.GroupDescription>\n\t *       <MultiSelect.Item value=\"global\">global</MultiSelect.Item>\n\t *     </MultiSelect.Group>\n\t *   </MultiSelect.Content>\n\t * </MultiSelect.Root>\n\t * ```\n\t */\n\tGroupDescription,\n\t/**\n\t * Renders a separator between items or groups.\n\t *\n\t * @see https://mantle.ngrok.com/components/multi-select#multiselectseparator\n\t *\n\t * @example\n\t * ```tsx\n\t * <MultiSelect.Root>\n\t *   <MultiSelect.Trigger>\n\t *     <MultiSelect.TagValues />\n\t *     <MultiSelect.Input placeholder=\"Select items...\" />\n\t *   </MultiSelect.Trigger>\n\t *   <MultiSelect.Content>\n\t *     <MultiSelect.Group>\n\t *       <MultiSelect.Item value=\"apple\">Apple</MultiSelect.Item>\n\t *     </MultiSelect.Group>\n\t *     <MultiSelect.Separator />\n\t *     <MultiSelect.Group>\n\t *       <MultiSelect.Item value=\"carrot\">Carrot</MultiSelect.Item>\n\t *     </MultiSelect.Group>\n\t *   </MultiSelect.Content>\n\t * </MultiSelect.Root>\n\t * ```\n\t */\n\tSeparator: MultiSelectSeparatorComponent,\n\t/**\n\t * Renders a message when no items match the current filter.\n\t *\n\t * @see https://mantle.ngrok.com/components/multi-select#multiselectempty\n\t *\n\t * @example\n\t * ```tsx\n\t * <MultiSelect.Root>\n\t *   <MultiSelect.Trigger>\n\t *     <MultiSelect.TagValues />\n\t *     <MultiSelect.Input placeholder=\"Select items...\" />\n\t *   </MultiSelect.Trigger>\n\t *   <MultiSelect.Content>\n\t *     {matches.length === 0 && (\n\t *       <MultiSelect.Empty>No results found</MultiSelect.Empty>\n\t *     )}\n\t *   </MultiSelect.Content>\n\t * </MultiSelect.Root>\n\t * ```\n\t */\n\tEmpty,\n} as const;\n\nexport {\n\t//,\n\tMultiSelect,\n};\n\n/**\n * Shakes an element left-right to signal that an action was blocked\n * (e.g. pressing Backspace/Delete on a locked tag). No-ops when the user\n * has enabled reduced motion in their OS/browser accessibility settings.\n */\nfunction shakeElement(element: HTMLElement): void {\n\t// Skip the animation when the user has opted into reduced motion.\n\t// Called from event handlers only, so reading the media query imperatively\n\t// is safe and gives the freshest value without any hook plumbing.\n\tif (getPrefersReducedMotion()) {\n\t\treturn;\n\t}\n\n\telement.animate(\n\t\t[\n\t\t\t{ transform: \"translateX(0)\" },\n\t\t\t{ transform: \"translateX(-4px)\" },\n\t\t\t{ transform: \"translateX(4px)\" },\n\t\t\t{ transform: \"translateX(-4px)\" },\n\t\t\t{ transform: \"translateX(4px)\" },\n\t\t\t{ transform: \"translateX(0)\" },\n\t\t],\n\t\t{ duration: 300, easing: \"ease-in-out\" },\n\t);\n}\n"],"mappings":"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"}

package/dist/otp-input.d.ts

@@ -1,5 +1,5 @@
-import { t as WithAsChild } from "./as-child-DQHfEmYB.js";
-import { o as WithValidation } from "./types-DG0WQLTL.js";
+import { t as WithAsChild } from "./as-child-C2PttRwz.js";
+import { o as WithValidation } from "./validation-DF1z7YDr.js";
 import * as _$react from "react";
 import { ComponentProps, ReactNode } from "react";
 import { OTPInput, REGEXP_ONLY_CHARS, REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS } from "input-otp";

package/dist/otp-input.js

@@ -1,2 +1,2 @@
-import{t as e}from"./cx-D1HYnpvA.js";import{t}from"./types-884RJJqm.js";import{t as n}from"./slot-D_ZUrdEW.js";import{forwardRef as r,useContext as i}from"react";import{jsx as a,jsxs as o}from"react/jsx-runtime";import{MinusIcon as s}from"@phosphor-icons/react/Minus";import{OTPInput as c,OTPInputContext as l,REGEXP_ONLY_CHARS as u,REGEXP_ONLY_DIGITS as d,REGEXP_ONLY_DIGITS_AND_CHARS as f}from"input-otp";const p={error:`danger`,success:`success`,warning:`warning`},m=e=>`var(--color-${e}-600)`,h=e=>`var(--ring-color-focus-${e})`,g=({totalActive:e,total:t})=>e===0?`idle`:e===1?`caret`:e===t?`all`:`range`,_=({children:e,validation:n})=>{let r=i(l),o=r.slots.length,s=g({totalActive:r.slots.reduce((e,t)=>e+ +!!t.isActive,0),total:o}),c=n?p[n]:void 0,u=c?t({"--otp-validation-border":m(c),"--otp-validation-ring":h(c)}):void 0;return a(`div`,{className:`group/otp contents`,"data-otp-state":s,"data-validation":n||void 0,style:u,children:e})},v=r(({"aria-invalid":t,children:n,className:r,containerClassName:i,validation:o,...s},l)=>{let u=t!=null&&t!==`false`?`error`:(typeof o==`function`?o():o)||void 0;return a(c,{ref:l,"aria-invalid":t??(u===`error`||void 0),"data-slot":`otp-input`,containerClassName:e(`flex items-center gap-2 has-disabled:opacity-50`,i),className:e(`disabled:cursor-not-allowed`,r),...s,children:a(_,{validation:u,children:n})})});v.displayName=`OtpInput`;const y=r(({asChild:t,children:r,className:i,...o},s)=>a(t?n:`div`,{ref:s,"data-slot":`otp-input-group`,className:e(`relative flex items-center rounded-md`,`has-[[data-active]~[data-active]]:ring-focus-accent has-[[data-active]~[data-active]]:ring-4`,`group-data-validation/otp:has-[[data-active]~[data-active]]:ring-(--otp-validation-ring)`,i),...o,children:r}));y.displayName=`OtpInputGroup`;const b=r(({className:t,index:n,...r},s)=>{let c=i(l).slots[n],u=c?.char??null,d=c?.hasFakeCaret??!1;return o(`div`,{ref:s,"data-slot":`otp-input-slot`,"data-active":c?.isActive??!1?``:void 0,className:e(`border-form bg-form text-strong relative flex h-10 w-10 items-center justify-center border-y border-r text-sm shadow-sm outline-hidden transition-all duration-150 ease-out`,`first:rounded-l-md first:border-l last:rounded-r-md`,`[&:has(+[data-active])]:group-data-[otp-state=caret]/otp:border-r-transparent`,`data-active:group-data-[otp-state=caret]/otp:border-accent-600`,`data-active:group-data-[otp-state=caret]/otp:border-l`,`data-active:group-data-[otp-state=caret]/otp:ring-focus-accent`,`data-active:group-data-[otp-state=caret]/otp:z-20`,`data-active:group-data-[otp-state=caret]/otp:ring-4`,`group-data-[otp-state=all]/otp:border-accent-600`,`group-data-validation/otp:border-y-(--otp-validation-border)`,`group-data-validation/otp:first:border-l-(--otp-validation-border)`,`group-data-validation/otp:last:border-r-(--otp-validation-border)`,`group-data-validation/otp:data-active:group-data-[otp-state=caret]/otp:border-(--otp-validation-border)`,`group-data-validation/otp:data-active:group-data-[otp-state=caret]/otp:ring-(--otp-validation-ring)`,`group-data-validation/otp:group-data-[otp-state=all]/otp:border-(--otp-validation-border)`,t),...r,children:[u,d&&a(`div`,{className:`pointer-events-none absolute inset-0 flex items-center justify-center`,children:a(`div`,{className:`bg-strong h-4 w-px animate-pulse`})})]})});b.displayName=`OtpInputSlot`;const x=r(({asChild:t,children:r,className:i,semantic:o=!1,...c},l)=>{let u=t?n:`div`,d=o?{role:`separator`}:{"aria-hidden":!0,role:`none`};return a(u,{ref:l,"data-slot":`otp-input-separator`,className:e(`text-muted flex items-center`,i),...d,...c,children:r??a(s,{weight:`bold`})})});x.displayName=`OtpInputSeparator`;const S={Root:v,Group:y,Slot:b,Separator:x};export{S as OtpInput,u as REGEXP_ONLY_CHARS,d as REGEXP_ONLY_DIGITS,f as REGEXP_ONLY_DIGITS_AND_CHARS};
+import{t as e}from"./cx-D1HYnpvA.js";import{t}from"./types-884RJJqm.js";import{t as n}from"./slot-D_ZUrdEW.js";import{a as r,r as i}from"./validation-BYME8rWN.js";import{forwardRef as a,useContext as o}from"react";import{jsx as s,jsxs as c}from"react/jsx-runtime";import{MinusIcon as l}from"@phosphor-icons/react/Minus";import{OTPInput as u,OTPInputContext as d,REGEXP_ONLY_CHARS as f,REGEXP_ONLY_DIGITS as p,REGEXP_ONLY_DIGITS_AND_CHARS as m}from"input-otp";const h={error:`danger`,success:`success`,warning:`warning`},g=e=>`var(--color-${e}-600)`,_=e=>`var(--ring-color-focus-${e})`,v=({totalActive:e,total:t})=>e===0?`idle`:e===1?`caret`:e===t?`all`:`range`,y=({children:e,validation:n})=>{let r=o(d),i=r.slots.length,a=v({totalActive:r.slots.reduce((e,t)=>e+ +!!t.isActive,0),total:i}),c=n?h[n]:void 0,l=c?t({"--otp-validation-border":g(c),"--otp-validation-ring":_(c)}):void 0;return s(`div`,{className:`group/otp contents`,"data-otp-state":a,"data-validation":n||void 0,style:l,children:e})},b=a(({"aria-invalid":t,children:n,className:a,containerClassName:o,validation:c,...l},d)=>{let f=r(),{ariaInvalid:p,validation:m}=i({"aria-invalid":t,defaultAriaInvalid:!1,validation:c??f});return s(u,{ref:d,"aria-invalid":p,"data-slot":`otp-input`,containerClassName:e(`flex items-center gap-2 has-disabled:opacity-50`,o),className:e(`disabled:cursor-not-allowed`,a),...l,children:s(y,{validation:m,children:n})})});b.displayName=`OtpInput`;const x=a(({asChild:t,children:r,className:i,...a},o)=>s(t?n:`div`,{ref:o,"data-slot":`otp-input-group`,className:e(`relative flex items-center rounded-md`,`has-[[data-active]~[data-active]]:ring-focus-accent has-[[data-active]~[data-active]]:ring-4`,`group-data-validation/otp:has-[[data-active]~[data-active]]:ring-(--otp-validation-ring)`,i),...a,children:r}));x.displayName=`OtpInputGroup`;const S=a(({className:t,index:n,...r},i)=>{let a=o(d).slots[n],l=a?.char??null,u=a?.hasFakeCaret??!1;return c(`div`,{ref:i,"data-slot":`otp-input-slot`,"data-active":a?.isActive??!1?``:void 0,className:e(`border-form bg-form text-strong relative flex h-10 w-10 items-center justify-center border-y border-r text-sm shadow-sm outline-hidden transition-all duration-150 ease-out`,`first:rounded-l-md first:border-l last:rounded-r-md`,`[&:has(+[data-active])]:group-data-[otp-state=caret]/otp:border-r-transparent`,`data-active:group-data-[otp-state=caret]/otp:border-accent-600`,`data-active:group-data-[otp-state=caret]/otp:border-l`,`data-active:group-data-[otp-state=caret]/otp:ring-focus-accent`,`data-active:group-data-[otp-state=caret]/otp:z-20`,`data-active:group-data-[otp-state=caret]/otp:ring-4`,`group-data-[otp-state=all]/otp:border-accent-600`,`group-data-validation/otp:border-y-(--otp-validation-border)`,`group-data-validation/otp:first:border-l-(--otp-validation-border)`,`group-data-validation/otp:last:border-r-(--otp-validation-border)`,`group-data-validation/otp:data-active:group-data-[otp-state=caret]/otp:border-(--otp-validation-border)`,`group-data-validation/otp:data-active:group-data-[otp-state=caret]/otp:ring-(--otp-validation-ring)`,`group-data-validation/otp:group-data-[otp-state=all]/otp:border-(--otp-validation-border)`,t),...r,children:[l,u&&s(`div`,{className:`pointer-events-none absolute inset-0 flex items-center justify-center`,children:s(`div`,{className:`bg-strong h-4 w-px animate-pulse`})})]})});S.displayName=`OtpInputSlot`;const C=a(({asChild:t,children:r,className:i,semantic:a=!1,...o},c)=>{let u=t?n:`div`,d=a?{role:`separator`}:{"aria-hidden":!0,role:`none`};return s(u,{ref:c,"data-slot":`otp-input-separator`,className:e(`text-muted flex items-center`,i),...d,...o,children:r??s(l,{weight:`bold`})})});C.displayName=`OtpInputSeparator`;const w={Root:b,Group:x,Slot:S,Separator:C};export{w as OtpInput,f as REGEXP_ONLY_CHARS,p as REGEXP_ONLY_DIGITS,m as REGEXP_ONLY_DIGITS_AND_CHARS};
 //# sourceMappingURL=otp-input.js.map

package/dist/otp-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"otp-input.js","names":["AsChildSlot"],"sources":["../src/components/otp-input/otp-input.tsx"],"sourcesContent":["\"use client\";\n\nimport { MinusIcon } from \"@phosphor-icons/react/Minus\";\nimport { OTPInput, OTPInputContext } from \"input-otp\";\nimport type { ComponentProps, ComponentRef, ReactNode } from \"react\";\nimport { forwardRef, useContext } from \"react\";\nimport type { WithAsChild } from \"../../types/as-child.js\";\nimport { $cssProperties } from \"../../types/index.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Slot as AsChildSlot } from \"../slot/index.js\";\nimport type { Validation, WithValidation } from \"../input/types.js\";\n\ntype OtpState = \"idle\" | \"caret\" | \"range\" | \"all\";\n\n/**\n * The color token name (`danger` / `success` / `warning`) that backs each\n * validation value. The `Validation` vocabulary (`\"error\"` / `\"success\"` /\n * `\"warning\"`) doesn't exactly match the color-token vocabulary — the\n * `error` validation maps to the `danger` color hue.\n */\ntype ValidationHue = \"danger\" | \"success\" | \"warning\";\n\nconst validationHues = {\n\terror: \"danger\",\n\tsuccess: \"success\",\n\twarning: \"warning\",\n} as const satisfies Record<Exclude<Validation, false>, ValidationHue>;\n\nconst validationBorderColor = <T extends ValidationHue = ValidationHue>(hue: T) =>\n\t`var(--color-${hue}-600)`;\n\nconst validationRingColor = <T extends ValidationHue = ValidationHue>(hue: T) =>\n\t`var(--ring-color-focus-${hue})`;\n\n/**\n * Map the count of active slots to a discrete `data-otp-state` value used by\n * descendant CSS selectors. Split out from the rendering component so the\n * decision tree reads as a flat `if`/`else` chain rather than a nested\n * ternary.\n */\nconst computeOtpState = ({\n\ttotalActive,\n\ttotal,\n}: {\n\ttotalActive: number;\n\ttotal: number;\n}): OtpState => {\n\tif (totalActive === 0) {\n\t\treturn \"idle\";\n\t}\n\tif (totalActive === 1) {\n\t\treturn \"caret\";\n\t}\n\tif (totalActive === total) {\n\t\treturn \"all\";\n\t}\n\treturn \"range\";\n};\n\n/**\n * Bridge component that lives inside `<OTPInput>` (so it can read\n * `OTPInputContext`) and exposes the current selection state as a DOM data\n * attribute. Descendant `OtpInput.Group` / `OtpInput.Slot` parts read this\n * via Tailwind's `group-data-*` selector, so all conditional styling lives\n * in CSS — no React context.\n *\n * `data-otp-state` is one of:\n * - `\"idle\"` — no slot active (input not focused)\n * - `\"caret\"` — exactly one slot active (typing caret)\n * - `\"range\"` — multiple but not all slots active (partial selection)\n * - `\"all\"` — every slot active (cmd+a / select-all)\n */\nconst MantleOtpBridge = ({\n\tchildren,\n\tvalidation,\n}: {\n\tchildren: ReactNode;\n\tvalidation?: Validation;\n}) => {\n\tconst inputOtpContext = useContext(OTPInputContext);\n\tconst total = inputOtpContext.slots.length;\n\tconst totalActive = inputOtpContext.slots.reduce(\n\t\t(count, slot) => count + (slot.isActive ? 1 : 0),\n\t\t0,\n\t);\n\tconst otpState = computeOtpState({ totalActive, total });\n\n\t// Map the validation hue to two CSS custom properties — descendant\n\t// slot/group classes reference these vars instead of having one\n\t// branch per validation value. When no validation is set, the vars\n\t// are left undefined and the validation utilities (gated on\n\t// `group-data-validation`) don't apply.\n\tconst hue = validation ? validationHues[validation] : undefined;\n\tconst validationStyle = hue\n\t\t? $cssProperties({\n\t\t\t\t\"--otp-validation-border\": validationBorderColor(hue),\n\t\t\t\t\"--otp-validation-ring\": validationRingColor(hue),\n\t\t\t})\n\t\t: undefined;\n\n\t// `display: contents` keeps this element in the DOM tree (so `group/`\n\t// ancestor selectors resolve) without producing a layout box.\n\treturn (\n\t\t<div\n\t\t\tclassName=\"group/otp contents\"\n\t\t\tdata-otp-state={otpState}\n\t\t\tdata-validation={validation || undefined}\n\t\t\tstyle={validationStyle}\n\t\t>\n\t\t\t{children}\n\t\t</div>\n\t);\n};\n\n// Drop the `render` / `children?: never` branch of input-otp's discriminated\n// union — `OtpInput.Root` always wraps its children in `MantleOtpBridge`,\n// so consumers compose with `OtpInput.Group` / `OtpInput.Slot` children\n// rather than a render prop.\ntype OtpInputRootProps = Omit<ComponentProps<typeof OTPInput>, \"render\" | \"children\"> &\n\tWithValidation & {\n\t\tchildren?: ReactNode;\n\t};\n\n/**\n * The root of the OTP input. Renders an accessible single hidden input that\n * captures keystrokes, paste events, and autofill, and exposes per-slot state\n * (active, char, fake caret) to descendant `OtpInput.Slot` parts via context.\n *\n * Wraps the `input-otp` library by Guilherme Rodz.\n *\n * Pass `validation=\"error\"` (or `\"success\"` / `\"warning\"`) to recolor each\n * group's outer borders and the active focus ring with the matching validation hue.\n * `validation=\"error\"` also sets `aria-invalid` on the underlying input so\n * assistive tech announces the failure state.\n *\n * @see https://mantle.ngrok.com/components/otp-input\n *\n * @example\n * ```tsx\n * <OtpInput.Root maxLength={6}>\n *   <OtpInput.Group>\n *     <OtpInput.Slot index={0} />\n *     <OtpInput.Slot index={1} />\n *     <OtpInput.Slot index={2} />\n *   </OtpInput.Group>\n *   <OtpInput.Separator />\n *   <OtpInput.Group>\n *     <OtpInput.Slot index={3} />\n *     <OtpInput.Slot index={4} />\n *     <OtpInput.Slot index={5} />\n *   </OtpInput.Group>\n * </OtpInput.Root>\n * ```\n */\n// `OtpInput.Root` does not support `asChild`: the underlying `OTPInput`\n// owns its hidden `<input>` and its render contract — swapping the element\n// would break input-otp's internal focus and selection management.\nconst Root = forwardRef<ComponentRef<typeof OTPInput>, OtpInputRootProps>(\n\t(\n\t\t{\n\t\t\t\"aria-invalid\": ariaInvalid,\n\t\t\tchildren,\n\t\t\tclassName,\n\t\t\tcontainerClassName,\n\t\t\tvalidation: _validation,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst isInvalid = ariaInvalid != null && ariaInvalid !== \"false\";\n\t\tconst validation = isInvalid\n\t\t\t? \"error\"\n\t\t\t: (typeof _validation === \"function\" ? _validation() : _validation) || undefined;\n\t\tconst resolvedAriaInvalid = ariaInvalid ?? (validation === \"error\" || undefined);\n\n\t\treturn (\n\t\t\t<OTPInput\n\t\t\t\tref={ref}\n\t\t\t\taria-invalid={resolvedAriaInvalid}\n\t\t\t\tdata-slot=\"otp-input\"\n\t\t\t\tcontainerClassName={cx(\n\t\t\t\t\t\"flex items-center gap-2 has-disabled:opacity-50\",\n\t\t\t\t\tcontainerClassName,\n\t\t\t\t)}\n\t\t\t\tclassName={cx(\"disabled:cursor-not-allowed\", className)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<MantleOtpBridge validation={validation}>{children}</MantleOtpBridge>\n\t\t\t</OTPInput>\n\t\t);\n\t},\n);\nRoot.displayName = \"OtpInput\";\n\ntype OtpInputGroupProps = ComponentProps<\"div\"> & WithAsChild;\n\n/**\n * Groups one or more `OtpInput.Slot` parts into a visually-connected segment.\n * Slots inside a group share rounded corners on the outer edges and join with\n * shared borders between adjacent slots.\n *\n * @see https://mantle.ngrok.com/components/otp-input\n *\n * @example\n * ```tsx\n * <OtpInput.Root maxLength={6}>\n *   <OtpInput.Group>\n *     <OtpInput.Slot index={0} />\n *     <OtpInput.Slot index={1} />\n *     <OtpInput.Slot index={2} />\n *   </OtpInput.Group>\n *   <OtpInput.Separator />\n *   <OtpInput.Group>\n *     <OtpInput.Slot index={3} />\n *     <OtpInput.Slot index={4} />\n *     <OtpInput.Slot index={5} />\n *   </OtpInput.Group>\n * </OtpInput.Root>\n * ```\n */\nconst Group = forwardRef<HTMLDivElement, OtpInputGroupProps>(\n\t({ asChild, children, className, ...props }, ref) => {\n\t\tconst Comp = asChild ? AsChildSlot : \"div\";\n\n\t\treturn (\n\t\t\t<Comp\n\t\t\t\tref={ref}\n\t\t\t\tdata-slot=\"otp-input-group\"\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"relative flex items-center rounded-md\",\n\t\t\t\t\t// A \"range\" selection within this group means two or more\n\t\t\t\t\t// slots are simultaneously active. CSS `:has()` with the\n\t\t\t\t\t// general sibling combinator catches that without us\n\t\t\t\t\t// having to count: if any active slot is preceded by\n\t\t\t\t\t// another active slot at the same nesting level, the\n\t\t\t\t\t// group has at least 2 actives → draw the ring.\n\t\t\t\t\t\"has-[[data-active]~[data-active]]:ring-focus-accent has-[[data-active]~[data-active]]:ring-4\",\n\t\t\t\t\t// Validation override for the group-level range/all ring.\n\t\t\t\t\t// `--otp-validation-ring` is set on the bridge based on\n\t\t\t\t\t// the validation value, so a single class covers\n\t\t\t\t\t// error/success/warning instead of one per hue.\n\t\t\t\t\t\"group-data-validation/otp:has-[[data-active]~[data-active]]:ring-(--otp-validation-ring)\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</Comp>\n\t\t);\n\t},\n);\nGroup.displayName = \"OtpInputGroup\";\n\ntype OtpInputSlotProps = ComponentProps<\"div\"> & {\n\t/**\n\t * The zero-based index of the character slot to render. Must be a valid\n\t * index within the parent `OtpInput.Root`'s `maxLength`.\n\t */\n\tindex: number;\n};\n\n/**\n * Renders a single character slot for the OTP input. Reads its display state\n * (the typed character, active/focused state, and fake caret position) from\n * the nearest `OtpInput.Root` via context — so this part must always be\n * rendered inside an `OtpInput.Root`.\n *\n * @see https://mantle.ngrok.com/components/otp-input\n *\n * @example\n * ```tsx\n * <OtpInput.Root maxLength={6}>\n *   <OtpInput.Group>\n *     <OtpInput.Slot index={0} />\n *     <OtpInput.Slot index={1} />\n *     <OtpInput.Slot index={2} />\n *   </OtpInput.Group>\n *   <OtpInput.Separator />\n *   <OtpInput.Group>\n *     <OtpInput.Slot index={3} />\n *     <OtpInput.Slot index={4} />\n *     <OtpInput.Slot index={5} />\n *   </OtpInput.Group>\n * </OtpInput.Root>\n * ```\n */\n// `OtpInput.Slot` does not support `asChild`: the slot reads context-driven\n// state (char, fake caret, active) from `OTPInputContext` and renders that\n// state into a fixed visual structure. Letting consumers swap the element\n// would lose the caret overlay and the active-ring focus styling.\nconst OtpInputSlotImpl = forwardRef<HTMLDivElement, OtpInputSlotProps>(\n\t({ className, index, ...props }, ref) => {\n\t\tconst context = useContext(OTPInputContext);\n\t\tconst slot = context.slots[index];\n\t\tconst char = slot?.char ?? null;\n\t\tconst hasFakeCaret = slot?.hasFakeCaret ?? false;\n\t\tconst isActive = slot?.isActive ?? false;\n\n\t\treturn (\n\t\t\t<div\n\t\t\t\tref={ref}\n\t\t\t\tdata-slot=\"otp-input-slot\"\n\t\t\t\tdata-active={isActive ? \"\" : undefined}\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"border-form bg-form text-strong relative flex h-10 w-10 items-center justify-center border-y border-r text-sm shadow-sm outline-hidden transition-all duration-150 ease-out\",\n\t\t\t\t\t\"first:rounded-l-md first:border-l last:rounded-r-md\",\n\t\t\t\t\t// When this slot is immediately followed by the caret\n\t\t\t\t\t// slot, hide our `border-r` so the active slot's\n\t\t\t\t\t// `border-l` is the only line at the boundary — without\n\t\t\t\t\t// this, the two adjacent 1px borders read as a doubled\n\t\t\t\t\t// edge. We use an arbitrary `&:has(+ ...)` variant\n\t\t\t\t\t// because Tailwind's `has-[...]` shorthand doesn't\n\t\t\t\t\t// parse the nested bracketed attribute selector here.\n\t\t\t\t\t\"[&:has(+[data-active])]:group-data-[otp-state=caret]/otp:border-r-transparent\",\n\t\t\t\t\t// Per-slot ring renders only in `caret` state (single\n\t\t\t\t\t// active slot). When more than one slot is active, the\n\t\t\t\t\t// surrounding `OtpInput.Group` draws a single ring\n\t\t\t\t\t// around the whole group — see Group's `:has()` rule.\n\t\t\t\t\t// We also recolor the slot's own borders to accent and\n\t\t\t\t\t// fill in `border-l` (groups normally only render\n\t\t\t\t\t// `border-l` on `:first-child`), so the slot reads as\n\t\t\t\t\t// one cohesive highlighted box rather than a ring with\n\t\t\t\t\t// a gray box inside.\n\t\t\t\t\t\"data-active:group-data-[otp-state=caret]/otp:border-accent-600\",\n\t\t\t\t\t\"data-active:group-data-[otp-state=caret]/otp:border-l\",\n\t\t\t\t\t\"data-active:group-data-[otp-state=caret]/otp:ring-focus-accent\",\n\t\t\t\t\t\"data-active:group-data-[otp-state=caret]/otp:z-20\",\n\t\t\t\t\t\"data-active:group-data-[otp-state=caret]/otp:ring-4\",\n\t\t\t\t\t// Select-all: tint *every* border on the slot accent.\n\t\t\t\t\t// Tinting only the outside edges leaves the internal\n\t\t\t\t\t// vertical divider (gray `border-r`) meeting the\n\t\t\t\t\t// accent top/bottom borders at the corner, producing a\n\t\t\t\t\t// visible 1px miter spike. Coloring all borders the\n\t\t\t\t\t// same accent-600 hue makes the corner blend\n\t\t\t\t\t// seamlessly while still keeping the slot grid\n\t\t\t\t\t// readable at full opacity.\n\t\t\t\t\t\"group-data-[otp-state=all]/otp:border-accent-600\",\n\t\t\t\t\t// Validation overrides. Only the *outer* edges of the\n\t\t\t\t\t// group are tinted (top + bottom on every slot, left on\n\t\t\t\t\t// the first slot, right on the last slot) so adjacent\n\t\t\t\t\t// slots still join with a neutral divider — matching how\n\t\t\t\t\t// `Input` tints the container border, not the internal\n\t\t\t\t\t// elements. The all-state and caret-active overrides\n\t\t\t\t\t// still recolor every border so a fully-active slot or\n\t\t\t\t\t// select-all reads as a solid tinted box. The bridge\n\t\t\t\t\t// sets `--otp-validation-{border,ring}` per validation\n\t\t\t\t\t// value, so a single set of classes covers\n\t\t\t\t\t// error/success/warning.\n\t\t\t\t\t\"group-data-validation/otp:border-y-(--otp-validation-border)\",\n\t\t\t\t\t\"group-data-validation/otp:first:border-l-(--otp-validation-border)\",\n\t\t\t\t\t\"group-data-validation/otp:last:border-r-(--otp-validation-border)\",\n\t\t\t\t\t\"group-data-validation/otp:data-active:group-data-[otp-state=caret]/otp:border-(--otp-validation-border)\",\n\t\t\t\t\t\"group-data-validation/otp:data-active:group-data-[otp-state=caret]/otp:ring-(--otp-validation-ring)\",\n\t\t\t\t\t\"group-data-validation/otp:group-data-[otp-state=all]/otp:border-(--otp-validation-border)\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{char}\n\t\t\t\t{hasFakeCaret && (\n\t\t\t\t\t<div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n\t\t\t\t\t\t<div className=\"bg-strong h-4 w-px animate-pulse\" />\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t);\n\t},\n);\nOtpInputSlotImpl.displayName = \"OtpInputSlot\";\n\ntype OtpInputSeparatorProps = ComponentProps<\"div\"> &\n\tWithAsChild & {\n\t\t/**\n\t\t * If `true`, the separator will be rendered with `role=\"separator\"` so\n\t\t * assistive tech announces it as a divider between OTP groups.\n\t\t * If `false`, the separator is purely decorative and is removed from\n\t\t * the accessibility tree — preferred inside an OTP control where the\n\t\t * minus icon is just visual chrome between slot groups.\n\t\t *\n\t\t * @default false\n\t\t */\n\t\tsemantic?: boolean;\n\t};\n\n/**\n * A visual separator between two `OtpInput.Group` segments. Renders a minus\n * icon by default; pass `children` to override the visual.\n *\n * @see https://mantle.ngrok.com/components/otp-input\n *\n * @example\n * ```tsx\n * <OtpInput.Root maxLength={6}>\n *   <OtpInput.Group>\n *     <OtpInput.Slot index={0} />\n *     <OtpInput.Slot index={1} />\n *     <OtpInput.Slot index={2} />\n *   </OtpInput.Group>\n *   <OtpInput.Separator />\n *   <OtpInput.Group>\n *     <OtpInput.Slot index={3} />\n *     <OtpInput.Slot index={4} />\n *     <OtpInput.Slot index={5} />\n *   </OtpInput.Group>\n * </OtpInput.Root>\n * ```\n */\nconst Separator = forwardRef<HTMLDivElement, OtpInputSeparatorProps>(\n\t({ asChild, children, className, semantic = false, ...props }, ref) => {\n\t\tconst Comp = asChild ? AsChildSlot : \"div\";\n\t\tconst semanticProps = semantic ? { role: \"separator\" } : { \"aria-hidden\": true, role: \"none\" };\n\n\t\treturn (\n\t\t\t<Comp\n\t\t\t\tref={ref}\n\t\t\t\tdata-slot=\"otp-input-separator\"\n\t\t\t\tclassName={cx(\"text-muted flex items-center\", className)}\n\t\t\t\t{...semanticProps}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children ?? <MinusIcon weight=\"bold\" />}\n\t\t\t</Comp>\n\t\t);\n\t},\n);\nSeparator.displayName = \"OtpInputSeparator\";\n\n/**\n * Compound component for capturing one-time passcodes (OTP). Combines a\n * single hidden input (handling paste, autofill, and IME) with a row of\n * styled character slots.\n *\n * @see https://mantle.ngrok.com/components/otp-input\n *\n * @example\n * Composition:\n * ```\n * OtpInput.Root\n * ├── OtpInput.Group\n * │   └── OtpInput.Slot\n * ├── OtpInput.Separator\n * └── OtpInput.Group\n *     └── OtpInput.Slot\n * ```\n *\n * @example\n * ```tsx\n * <OtpInput.Root maxLength={6}>\n *   <OtpInput.Group>\n *     <OtpInput.Slot index={0} />\n *     <OtpInput.Slot index={1} />\n *     <OtpInput.Slot index={2} />\n *   </OtpInput.Group>\n *   <OtpInput.Separator />\n *   <OtpInput.Group>\n *     <OtpInput.Slot index={3} />\n *     <OtpInput.Slot index={4} />\n *     <OtpInput.Slot index={5} />\n *   </OtpInput.Group>\n * </OtpInput.Root>\n * ```\n */\nconst OtpInput = {\n\t/**\n\t * The root of the OTP input. Wraps the hidden input that captures\n\t * keystrokes, paste, and autofill, and provides per-slot state to\n\t * descendant `OtpInput.Slot` parts.\n\t *\n\t * @see https://mantle.ngrok.com/components/otp-input\n\t *\n\t * @example\n\t * ```tsx\n\t * <OtpInput.Root maxLength={6}>\n\t *   <OtpInput.Group>\n\t *     <OtpInput.Slot index={0} />\n\t *     <OtpInput.Slot index={1} />\n\t *     <OtpInput.Slot index={2} />\n\t *   </OtpInput.Group>\n\t *   <OtpInput.Separator />\n\t *   <OtpInput.Group>\n\t *     <OtpInput.Slot index={3} />\n\t *     <OtpInput.Slot index={4} />\n\t *     <OtpInput.Slot index={5} />\n\t *   </OtpInput.Group>\n\t * </OtpInput.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * Groups one or more `OtpInput.Slot` parts into a visually-connected\n\t * segment with shared rounded corners and joined borders.\n\t *\n\t * @see https://mantle.ngrok.com/components/otp-input\n\t *\n\t * @example\n\t * ```tsx\n\t * <OtpInput.Root maxLength={6}>\n\t *   <OtpInput.Group>\n\t *     <OtpInput.Slot index={0} />\n\t *     <OtpInput.Slot index={1} />\n\t *     <OtpInput.Slot index={2} />\n\t *   </OtpInput.Group>\n\t *   <OtpInput.Separator />\n\t *   <OtpInput.Group>\n\t *     <OtpInput.Slot index={3} />\n\t *     <OtpInput.Slot index={4} />\n\t *     <OtpInput.Slot index={5} />\n\t *   </OtpInput.Group>\n\t * </OtpInput.Root>\n\t * ```\n\t */\n\tGroup,\n\t/**\n\t * A single character slot. Must be rendered inside an `OtpInput.Root`.\n\t * Reads its character, active state, and fake caret position from the\n\t * root via context.\n\t *\n\t * @see https://mantle.ngrok.com/components/otp-input\n\t *\n\t * @example\n\t * ```tsx\n\t * <OtpInput.Root maxLength={6}>\n\t *   <OtpInput.Group>\n\t *     <OtpInput.Slot index={0} />\n\t *     <OtpInput.Slot index={1} />\n\t *     <OtpInput.Slot index={2} />\n\t *   </OtpInput.Group>\n\t *   <OtpInput.Separator />\n\t *   <OtpInput.Group>\n\t *     <OtpInput.Slot index={3} />\n\t *     <OtpInput.Slot index={4} />\n\t *     <OtpInput.Slot index={5} />\n\t *   </OtpInput.Group>\n\t * </OtpInput.Root>\n\t * ```\n\t */\n\tSlot: OtpInputSlotImpl,\n\t/**\n\t * A visual separator between two `OtpInput.Group` segments. Renders a\n\t * minus icon by default; pass `children` to override.\n\t *\n\t * @see https://mantle.ngrok.com/components/otp-input\n\t *\n\t * @example\n\t * ```tsx\n\t * <OtpInput.Root maxLength={6}>\n\t *   <OtpInput.Group>\n\t *     <OtpInput.Slot index={0} />\n\t *     <OtpInput.Slot index={1} />\n\t *     <OtpInput.Slot index={2} />\n\t *   </OtpInput.Group>\n\t *   <OtpInput.Separator />\n\t *   <OtpInput.Group>\n\t *     <OtpInput.Slot index={3} />\n\t *     <OtpInput.Slot index={4} />\n\t *     <OtpInput.Slot index={5} />\n\t *   </OtpInput.Group>\n\t * </OtpInput.Root>\n\t * ```\n\t */\n\tSeparator,\n} as const;\n\nexport {\n\t//,\n\tOtpInput,\n};\n\nexport {\n\t//,\n\tREGEXP_ONLY_CHARS,\n\tREGEXP_ONLY_DIGITS,\n\tREGEXP_ONLY_DIGITS_AND_CHARS,\n} from \"input-otp\";\n"],"mappings":"uZAsBA,MAAM,EAAiB,CACtB,MAAO,SACP,QAAS,UACT,QAAS,UACT,CAEK,EAAkE,GACvE,eAAe,EAAI,OAEd,EAAgE,GACrE,0BAA0B,EAAI,GAQzB,GAAmB,CACxB,cACA,WAKI,IAAgB,EACZ,OAEJ,IAAgB,EACZ,QAEJ,IAAgB,EACZ,MAED,QAgBF,GAAmB,CACxB,WACA,gBAIK,CACL,IAAM,EAAkB,EAAW,EAAgB,CAC7C,EAAQ,EAAgB,MAAM,OAK9B,EAAW,EAAgB,CAAE,YAJf,EAAgB,MAAM,QACxC,EAAO,IAAS,GAAS,KAAK,SAC/B,EAE6C,CAAE,QAAO,CAAC,CAOlD,EAAM,EAAa,EAAe,GAAc,IAAA,GAChD,EAAkB,EACrB,EAAe,CACf,0BAA2B,EAAsB,EAAI,CACrD,wBAAyB,EAAoB,EAAI,CACjD,CAAC,CACD,IAAA,GAIH,OACC,EAAC,MAAD,CACC,UAAU,qBACV,iBAAgB,EAChB,kBAAiB,GAAc,IAAA,GAC/B,MAAO,EAEN,WACI,CAAA,EA+CF,EAAO,GAEX,CACC,eAAgB,EAChB,WACA,YACA,qBACA,WAAY,EACZ,GAAG,GAEJ,IACI,CAEJ,IAAM,EADY,GAAe,MAAQ,IAAgB,QAEtD,SACC,OAAO,GAAgB,WAAa,GAAa,CAAG,IAAgB,IAAA,GAGxE,OACC,EAAC,EAAD,CACM,MACL,eAL0B,IAAgB,IAAe,SAAW,IAAA,IAMpE,YAAU,YACV,mBAAoB,EACnB,kDACA,EACA,CACD,UAAW,EAAG,8BAA+B,EAAU,CACvD,GAAI,WAEJ,EAAC,EAAD,CAA6B,aAAa,WAA2B,CAAA,CAC3D,CAAA,EAGb,CACD,EAAK,YAAc,WA4BnB,MAAM,EAAQ,GACZ,CAAE,UAAS,WAAU,YAAW,GAAG,GAAS,IAI3C,EAHY,EAAUA,EAAc,MAGpC,CACM,MACL,YAAU,kBACV,UAAW,EACV,wCAOA,+FAKA,2FACA,EACA,CACD,GAAI,EAEH,WACK,CAAA,CAGT,CACD,EAAM,YAAc,gBAuCpB,MAAM,EAAmB,GACvB,CAAE,YAAW,QAAO,GAAG,GAAS,IAAQ,CAExC,IAAM,EADU,EAAW,EACP,CAAC,MAAM,GACrB,EAAO,GAAM,MAAQ,KACrB,EAAe,GAAM,cAAgB,GAG3C,OACC,EAAC,MAAD,CACM,MACL,YAAU,iBACV,cANe,GAAM,UAAY,GAMT,GAAK,IAAA,GAC7B,UAAW,EACV,8KACA,sDAQA,gFAUA,iEACA,wDACA,iEACA,oDACA,sDASA,mDAYA,+DACA,qEACA,oEACA,0GACA,sGACA,4FACA,EACA,CACD,GAAI,WAzDL,CA2DE,EACA,GACA,EAAC,MAAD,CAAK,UAAU,iFACd,EAAC,MAAD,CAAK,UAAU,mCAAqC,CAAA,CAC/C,CAAA,CAEF,IAGR,CACD,EAAiB,YAAc,eAuC/B,MAAM,EAAY,GAChB,CAAE,UAAS,WAAU,YAAW,WAAW,GAAO,GAAG,GAAS,IAAQ,CACtE,IAAM,EAAO,EAAUA,EAAc,MAC/B,EAAgB,EAAW,CAAE,KAAM,YAAa,CAAG,CAAE,cAAe,GAAM,KAAM,OAAQ,CAE9F,OACC,EAAC,EAAD,CACM,MACL,YAAU,sBACV,UAAW,EAAG,+BAAgC,EAAU,CACxD,GAAI,EACJ,GAAI,WAEH,GAAY,EAAC,EAAD,CAAW,OAAO,OAAS,CAAA,CAClC,CAAA,EAGT,CACD,EAAU,YAAc,oBAqCxB,MAAM,EAAW,CAyBhB,OAwBA,QAyBA,KAAM,EAwBN,YACA"}
+{"version":3,"file":"otp-input.js","names":["AsChildSlot"],"sources":["../src/components/otp-input/otp-input.tsx"],"sourcesContent":["\"use client\";\n\nimport { MinusIcon } from \"@phosphor-icons/react/Minus\";\nimport { OTPInput, OTPInputContext } from \"input-otp\";\nimport type { ComponentProps, ComponentRef, ReactNode } from \"react\";\nimport { forwardRef, useContext } from \"react\";\nimport type { WithAsChild } from \"../../types/as-child.js\";\nimport { $cssProperties } from \"../../types/index.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { parseValidation, useFieldValidation } from \"../field/validation.js\";\nimport type { Validation, WithValidation } from \"../field/validation.js\";\nimport { Slot as AsChildSlot } from \"../slot/index.js\";\n\ntype OtpState = \"idle\" | \"caret\" | \"range\" | \"all\";\n\n/**\n * The color token name (`danger` / `success` / `warning`) that backs each\n * validation value. The `Validation` vocabulary (`\"error\"` / `\"success\"` /\n * `\"warning\"`) doesn't exactly match the color-token vocabulary — the\n * `error` validation maps to the `danger` color hue.\n */\ntype ValidationHue = \"danger\" | \"success\" | \"warning\";\n\nconst validationHues = {\n\terror: \"danger\",\n\tsuccess: \"success\",\n\twarning: \"warning\",\n} as const satisfies Record<Exclude<Validation, false>, ValidationHue>;\n\nconst validationBorderColor = <T extends ValidationHue = ValidationHue>(hue: T) =>\n\t`var(--color-${hue}-600)`;\n\nconst validationRingColor = <T extends ValidationHue = ValidationHue>(hue: T) =>\n\t`var(--ring-color-focus-${hue})`;\n\n/**\n * Map the count of active slots to a discrete `data-otp-state` value used by\n * descendant CSS selectors. Split out from the rendering component so the\n * decision tree reads as a flat `if`/`else` chain rather than a nested\n * ternary.\n */\nconst computeOtpState = ({\n\ttotalActive,\n\ttotal,\n}: {\n\ttotalActive: number;\n\ttotal: number;\n}): OtpState => {\n\tif (totalActive === 0) {\n\t\treturn \"idle\";\n\t}\n\tif (totalActive === 1) {\n\t\treturn \"caret\";\n\t}\n\tif (totalActive === total) {\n\t\treturn \"all\";\n\t}\n\treturn \"range\";\n};\n\n/**\n * Bridge component that lives inside `<OTPInput>` (so it can read\n * `OTPInputContext`) and exposes the current selection state as a DOM data\n * attribute. Descendant `OtpInput.Group` / `OtpInput.Slot` parts read this\n * via Tailwind's `group-data-*` selector, so all conditional styling lives\n * in CSS — no React context.\n *\n * `data-otp-state` is one of:\n * - `\"idle\"` — no slot active (input not focused)\n * - `\"caret\"` — exactly one slot active (typing caret)\n * - `\"range\"` — multiple but not all slots active (partial selection)\n * - `\"all\"` — every slot active (cmd+a / select-all)\n */\nconst MantleOtpBridge = ({\n\tchildren,\n\tvalidation,\n}: {\n\tchildren: ReactNode;\n\tvalidation?: Validation;\n}) => {\n\tconst inputOtpContext = useContext(OTPInputContext);\n\tconst total = inputOtpContext.slots.length;\n\tconst totalActive = inputOtpContext.slots.reduce(\n\t\t(count, slot) => count + (slot.isActive ? 1 : 0),\n\t\t0,\n\t);\n\tconst otpState = computeOtpState({ totalActive, total });\n\n\t// Map the validation hue to two CSS custom properties — descendant\n\t// slot/group classes reference these vars instead of having one\n\t// branch per validation value. When no validation is set, the vars\n\t// are left undefined and the validation utilities (gated on\n\t// `group-data-validation`) don't apply.\n\tconst hue = validation ? validationHues[validation] : undefined;\n\tconst validationStyle = hue\n\t\t? $cssProperties({\n\t\t\t\t\"--otp-validation-border\": validationBorderColor(hue),\n\t\t\t\t\"--otp-validation-ring\": validationRingColor(hue),\n\t\t\t})\n\t\t: undefined;\n\n\t// `display: contents` keeps this element in the DOM tree (so `group/`\n\t// ancestor selectors resolve) without producing a layout box.\n\treturn (\n\t\t<div\n\t\t\tclassName=\"group/otp contents\"\n\t\t\tdata-otp-state={otpState}\n\t\t\tdata-validation={validation || undefined}\n\t\t\tstyle={validationStyle}\n\t\t>\n\t\t\t{children}\n\t\t</div>\n\t);\n};\n\n// Drop the `render` / `children?: never` branch of input-otp's discriminated\n// union — `OtpInput.Root` always wraps its children in `MantleOtpBridge`,\n// so consumers compose with `OtpInput.Group` / `OtpInput.Slot` children\n// rather than a render prop.\ntype OtpInputRootProps = Omit<ComponentProps<typeof OTPInput>, \"render\" | \"children\"> &\n\tWithValidation & {\n\t\tchildren?: ReactNode;\n\t};\n\n/**\n * The root of the OTP input. Renders an accessible single hidden input that\n * captures keystrokes, paste events, and autofill, and exposes per-slot state\n * (active, char, fake caret) to descendant `OtpInput.Slot` parts via context.\n *\n * Wraps the `input-otp` library by Guilherme Rodz.\n *\n * Pass `validation=\"error\"` (or `\"success\"` / `\"warning\"`) to recolor each\n * group's outer borders and the active focus ring with the matching validation hue.\n * `validation=\"error\"` also sets `aria-invalid` on the underlying input so\n * assistive tech announces the failure state.\n *\n * @see https://mantle.ngrok.com/components/otp-input\n *\n * @example\n * ```tsx\n * <OtpInput.Root maxLength={6}>\n *   <OtpInput.Group>\n *     <OtpInput.Slot index={0} />\n *     <OtpInput.Slot index={1} />\n *     <OtpInput.Slot index={2} />\n *   </OtpInput.Group>\n *   <OtpInput.Separator />\n *   <OtpInput.Group>\n *     <OtpInput.Slot index={3} />\n *     <OtpInput.Slot index={4} />\n *     <OtpInput.Slot index={5} />\n *   </OtpInput.Group>\n * </OtpInput.Root>\n * ```\n */\n// `OtpInput.Root` does not support `asChild`: the underlying `OTPInput`\n// owns its hidden `<input>` and its render contract — swapping the element\n// would break input-otp's internal focus and selection management.\nconst Root = forwardRef<ComponentRef<typeof OTPInput>, OtpInputRootProps>(\n\t(\n\t\t{\n\t\t\t\"aria-invalid\": ariaInvalid,\n\t\t\tchildren,\n\t\t\tclassName,\n\t\t\tcontainerClassName,\n\t\t\tvalidation: _validation,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst fieldValidation = useFieldValidation();\n\t\tconst { ariaInvalid: resolvedAriaInvalid, validation } = parseValidation({\n\t\t\t\"aria-invalid\": ariaInvalid,\n\t\t\tdefaultAriaInvalid: false,\n\t\t\tvalidation: _validation ?? fieldValidation,\n\t\t});\n\n\t\treturn (\n\t\t\t<OTPInput\n\t\t\t\tref={ref}\n\t\t\t\taria-invalid={resolvedAriaInvalid}\n\t\t\t\tdata-slot=\"otp-input\"\n\t\t\t\tcontainerClassName={cx(\n\t\t\t\t\t\"flex items-center gap-2 has-disabled:opacity-50\",\n\t\t\t\t\tcontainerClassName,\n\t\t\t\t)}\n\t\t\t\tclassName={cx(\"disabled:cursor-not-allowed\", className)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<MantleOtpBridge validation={validation}>{children}</MantleOtpBridge>\n\t\t\t</OTPInput>\n\t\t);\n\t},\n);\nRoot.displayName = \"OtpInput\";\n\ntype OtpInputGroupProps = ComponentProps<\"div\"> & WithAsChild;\n\n/**\n * Groups one or more `OtpInput.Slot` parts into a visually-connected segment.\n * Slots inside a group share rounded corners on the outer edges and join with\n * shared borders between adjacent slots.\n *\n * @see https://mantle.ngrok.com/components/otp-input\n *\n * @example\n * ```tsx\n * <OtpInput.Root maxLength={6}>\n *   <OtpInput.Group>\n *     <OtpInput.Slot index={0} />\n *     <OtpInput.Slot index={1} />\n *     <OtpInput.Slot index={2} />\n *   </OtpInput.Group>\n *   <OtpInput.Separator />\n *   <OtpInput.Group>\n *     <OtpInput.Slot index={3} />\n *     <OtpInput.Slot index={4} />\n *     <OtpInput.Slot index={5} />\n *   </OtpInput.Group>\n * </OtpInput.Root>\n * ```\n */\nconst Group = forwardRef<HTMLDivElement, OtpInputGroupProps>(\n\t({ asChild, children, className, ...props }, ref) => {\n\t\tconst Comp = asChild ? AsChildSlot : \"div\";\n\n\t\treturn (\n\t\t\t<Comp\n\t\t\t\tref={ref}\n\t\t\t\tdata-slot=\"otp-input-group\"\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"relative flex items-center rounded-md\",\n\t\t\t\t\t// A \"range\" selection within this group means two or more\n\t\t\t\t\t// slots are simultaneously active. CSS `:has()` with the\n\t\t\t\t\t// general sibling combinator catches that without us\n\t\t\t\t\t// having to count: if any active slot is preceded by\n\t\t\t\t\t// another active slot at the same nesting level, the\n\t\t\t\t\t// group has at least 2 actives → draw the ring.\n\t\t\t\t\t\"has-[[data-active]~[data-active]]:ring-focus-accent has-[[data-active]~[data-active]]:ring-4\",\n\t\t\t\t\t// Validation override for the group-level range/all ring.\n\t\t\t\t\t// `--otp-validation-ring` is set on the bridge based on\n\t\t\t\t\t// the validation value, so a single class covers\n\t\t\t\t\t// error/success/warning instead of one per hue.\n\t\t\t\t\t\"group-data-validation/otp:has-[[data-active]~[data-active]]:ring-(--otp-validation-ring)\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</Comp>\n\t\t);\n\t},\n);\nGroup.displayName = \"OtpInputGroup\";\n\ntype OtpInputSlotProps = ComponentProps<\"div\"> & {\n\t/**\n\t * The zero-based index of the character slot to render. Must be a valid\n\t * index within the parent `OtpInput.Root`'s `maxLength`.\n\t */\n\tindex: number;\n};\n\n/**\n * Renders a single character slot for the OTP input. Reads its display state\n * (the typed character, active/focused state, and fake caret position) from\n * the nearest `OtpInput.Root` via context — so this part must always be\n * rendered inside an `OtpInput.Root`.\n *\n * @see https://mantle.ngrok.com/components/otp-input\n *\n * @example\n * ```tsx\n * <OtpInput.Root maxLength={6}>\n *   <OtpInput.Group>\n *     <OtpInput.Slot index={0} />\n *     <OtpInput.Slot index={1} />\n *     <OtpInput.Slot index={2} />\n *   </OtpInput.Group>\n *   <OtpInput.Separator />\n *   <OtpInput.Group>\n *     <OtpInput.Slot index={3} />\n *     <OtpInput.Slot index={4} />\n *     <OtpInput.Slot index={5} />\n *   </OtpInput.Group>\n * </OtpInput.Root>\n * ```\n */\n// `OtpInput.Slot` does not support `asChild`: the slot reads context-driven\n// state (char, fake caret, active) from `OTPInputContext` and renders that\n// state into a fixed visual structure. Letting consumers swap the element\n// would lose the caret overlay and the active-ring focus styling.\nconst OtpInputSlotImpl = forwardRef<HTMLDivElement, OtpInputSlotProps>(\n\t({ className, index, ...props }, ref) => {\n\t\tconst context = useContext(OTPInputContext);\n\t\tconst slot = context.slots[index];\n\t\tconst char = slot?.char ?? null;\n\t\tconst hasFakeCaret = slot?.hasFakeCaret ?? false;\n\t\tconst isActive = slot?.isActive ?? false;\n\n\t\treturn (\n\t\t\t<div\n\t\t\t\tref={ref}\n\t\t\t\tdata-slot=\"otp-input-slot\"\n\t\t\t\tdata-active={isActive ? \"\" : undefined}\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"border-form bg-form text-strong relative flex h-10 w-10 items-center justify-center border-y border-r text-sm shadow-sm outline-hidden transition-all duration-150 ease-out\",\n\t\t\t\t\t\"first:rounded-l-md first:border-l last:rounded-r-md\",\n\t\t\t\t\t// When this slot is immediately followed by the caret\n\t\t\t\t\t// slot, hide our `border-r` so the active slot's\n\t\t\t\t\t// `border-l` is the only line at the boundary — without\n\t\t\t\t\t// this, the two adjacent 1px borders read as a doubled\n\t\t\t\t\t// edge. We use an arbitrary `&:has(+ ...)` variant\n\t\t\t\t\t// because Tailwind's `has-[...]` shorthand doesn't\n\t\t\t\t\t// parse the nested bracketed attribute selector here.\n\t\t\t\t\t\"[&:has(+[data-active])]:group-data-[otp-state=caret]/otp:border-r-transparent\",\n\t\t\t\t\t// Per-slot ring renders only in `caret` state (single\n\t\t\t\t\t// active slot). When more than one slot is active, the\n\t\t\t\t\t// surrounding `OtpInput.Group` draws a single ring\n\t\t\t\t\t// around the whole group — see Group's `:has()` rule.\n\t\t\t\t\t// We also recolor the slot's own borders to accent and\n\t\t\t\t\t// fill in `border-l` (groups normally only render\n\t\t\t\t\t// `border-l` on `:first-child`), so the slot reads as\n\t\t\t\t\t// one cohesive highlighted box rather than a ring with\n\t\t\t\t\t// a gray box inside.\n\t\t\t\t\t\"data-active:group-data-[otp-state=caret]/otp:border-accent-600\",\n\t\t\t\t\t\"data-active:group-data-[otp-state=caret]/otp:border-l\",\n\t\t\t\t\t\"data-active:group-data-[otp-state=caret]/otp:ring-focus-accent\",\n\t\t\t\t\t\"data-active:group-data-[otp-state=caret]/otp:z-20\",\n\t\t\t\t\t\"data-active:group-data-[otp-state=caret]/otp:ring-4\",\n\t\t\t\t\t// Select-all: tint *every* border on the slot accent.\n\t\t\t\t\t// Tinting only the outside edges leaves the internal\n\t\t\t\t\t// vertical divider (gray `border-r`) meeting the\n\t\t\t\t\t// accent top/bottom borders at the corner, producing a\n\t\t\t\t\t// visible 1px miter spike. Coloring all borders the\n\t\t\t\t\t// same accent-600 hue makes the corner blend\n\t\t\t\t\t// seamlessly while still keeping the slot grid\n\t\t\t\t\t// readable at full opacity.\n\t\t\t\t\t\"group-data-[otp-state=all]/otp:border-accent-600\",\n\t\t\t\t\t// Validation overrides. Only the *outer* edges of the\n\t\t\t\t\t// group are tinted (top + bottom on every slot, left on\n\t\t\t\t\t// the first slot, right on the last slot) so adjacent\n\t\t\t\t\t// slots still join with a neutral divider — matching how\n\t\t\t\t\t// `Input` tints the container border, not the internal\n\t\t\t\t\t// elements. The all-state and caret-active overrides\n\t\t\t\t\t// still recolor every border so a fully-active slot or\n\t\t\t\t\t// select-all reads as a solid tinted box. The bridge\n\t\t\t\t\t// sets `--otp-validation-{border,ring}` per validation\n\t\t\t\t\t// value, so a single set of classes covers\n\t\t\t\t\t// error/success/warning.\n\t\t\t\t\t\"group-data-validation/otp:border-y-(--otp-validation-border)\",\n\t\t\t\t\t\"group-data-validation/otp:first:border-l-(--otp-validation-border)\",\n\t\t\t\t\t\"group-data-validation/otp:last:border-r-(--otp-validation-border)\",\n\t\t\t\t\t\"group-data-validation/otp:data-active:group-data-[otp-state=caret]/otp:border-(--otp-validation-border)\",\n\t\t\t\t\t\"group-data-validation/otp:data-active:group-data-[otp-state=caret]/otp:ring-(--otp-validation-ring)\",\n\t\t\t\t\t\"group-data-validation/otp:group-data-[otp-state=all]/otp:border-(--otp-validation-border)\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{char}\n\t\t\t\t{hasFakeCaret && (\n\t\t\t\t\t<div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n\t\t\t\t\t\t<div className=\"bg-strong h-4 w-px animate-pulse\" />\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t);\n\t},\n);\nOtpInputSlotImpl.displayName = \"OtpInputSlot\";\n\ntype OtpInputSeparatorProps = ComponentProps<\"div\"> &\n\tWithAsChild & {\n\t\t/**\n\t\t * If `true`, the separator will be rendered with `role=\"separator\"` so\n\t\t * assistive tech announces it as a divider between OTP groups.\n\t\t * If `false`, the separator is purely decorative and is removed from\n\t\t * the accessibility tree — preferred inside an OTP control where the\n\t\t * minus icon is just visual chrome between slot groups.\n\t\t *\n\t\t * @default false\n\t\t */\n\t\tsemantic?: boolean;\n\t};\n\n/**\n * A visual separator between two `OtpInput.Group` segments. Renders a minus\n * icon by default; pass `children` to override the visual.\n *\n * @see https://mantle.ngrok.com/components/otp-input\n *\n * @example\n * ```tsx\n * <OtpInput.Root maxLength={6}>\n *   <OtpInput.Group>\n *     <OtpInput.Slot index={0} />\n *     <OtpInput.Slot index={1} />\n *     <OtpInput.Slot index={2} />\n *   </OtpInput.Group>\n *   <OtpInput.Separator />\n *   <OtpInput.Group>\n *     <OtpInput.Slot index={3} />\n *     <OtpInput.Slot index={4} />\n *     <OtpInput.Slot index={5} />\n *   </OtpInput.Group>\n * </OtpInput.Root>\n * ```\n */\nconst Separator = forwardRef<HTMLDivElement, OtpInputSeparatorProps>(\n\t({ asChild, children, className, semantic = false, ...props }, ref) => {\n\t\tconst Comp = asChild ? AsChildSlot : \"div\";\n\t\tconst semanticProps = semantic ? { role: \"separator\" } : { \"aria-hidden\": true, role: \"none\" };\n\n\t\treturn (\n\t\t\t<Comp\n\t\t\t\tref={ref}\n\t\t\t\tdata-slot=\"otp-input-separator\"\n\t\t\t\tclassName={cx(\"text-muted flex items-center\", className)}\n\t\t\t\t{...semanticProps}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children ?? <MinusIcon weight=\"bold\" />}\n\t\t\t</Comp>\n\t\t);\n\t},\n);\nSeparator.displayName = \"OtpInputSeparator\";\n\n/**\n * Compound component for capturing one-time passcodes (OTP). Combines a\n * single hidden input (handling paste, autofill, and IME) with a row of\n * styled character slots.\n *\n * @see https://mantle.ngrok.com/components/otp-input\n *\n * @example\n * Composition:\n * ```\n * OtpInput.Root\n * ├── OtpInput.Group\n * │   └── OtpInput.Slot\n * ├── OtpInput.Separator\n * └── OtpInput.Group\n *     └── OtpInput.Slot\n * ```\n *\n * @example\n * ```tsx\n * <OtpInput.Root maxLength={6}>\n *   <OtpInput.Group>\n *     <OtpInput.Slot index={0} />\n *     <OtpInput.Slot index={1} />\n *     <OtpInput.Slot index={2} />\n *   </OtpInput.Group>\n *   <OtpInput.Separator />\n *   <OtpInput.Group>\n *     <OtpInput.Slot index={3} />\n *     <OtpInput.Slot index={4} />\n *     <OtpInput.Slot index={5} />\n *   </OtpInput.Group>\n * </OtpInput.Root>\n * ```\n */\nconst OtpInput = {\n\t/**\n\t * The root of the OTP input. Wraps the hidden input that captures\n\t * keystrokes, paste, and autofill, and provides per-slot state to\n\t * descendant `OtpInput.Slot` parts.\n\t *\n\t * @see https://mantle.ngrok.com/components/otp-input\n\t *\n\t * @example\n\t * ```tsx\n\t * <OtpInput.Root maxLength={6}>\n\t *   <OtpInput.Group>\n\t *     <OtpInput.Slot index={0} />\n\t *     <OtpInput.Slot index={1} />\n\t *     <OtpInput.Slot index={2} />\n\t *   </OtpInput.Group>\n\t *   <OtpInput.Separator />\n\t *   <OtpInput.Group>\n\t *     <OtpInput.Slot index={3} />\n\t *     <OtpInput.Slot index={4} />\n\t *     <OtpInput.Slot index={5} />\n\t *   </OtpInput.Group>\n\t * </OtpInput.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * Groups one or more `OtpInput.Slot` parts into a visually-connected\n\t * segment with shared rounded corners and joined borders.\n\t *\n\t * @see https://mantle.ngrok.com/components/otp-input\n\t *\n\t * @example\n\t * ```tsx\n\t * <OtpInput.Root maxLength={6}>\n\t *   <OtpInput.Group>\n\t *     <OtpInput.Slot index={0} />\n\t *     <OtpInput.Slot index={1} />\n\t *     <OtpInput.Slot index={2} />\n\t *   </OtpInput.Group>\n\t *   <OtpInput.Separator />\n\t *   <OtpInput.Group>\n\t *     <OtpInput.Slot index={3} />\n\t *     <OtpInput.Slot index={4} />\n\t *     <OtpInput.Slot index={5} />\n\t *   </OtpInput.Group>\n\t * </OtpInput.Root>\n\t * ```\n\t */\n\tGroup,\n\t/**\n\t * A single character slot. Must be rendered inside an `OtpInput.Root`.\n\t * Reads its character, active state, and fake caret position from the\n\t * root via context.\n\t *\n\t * @see https://mantle.ngrok.com/components/otp-input\n\t *\n\t * @example\n\t * ```tsx\n\t * <OtpInput.Root maxLength={6}>\n\t *   <OtpInput.Group>\n\t *     <OtpInput.Slot index={0} />\n\t *     <OtpInput.Slot index={1} />\n\t *     <OtpInput.Slot index={2} />\n\t *   </OtpInput.Group>\n\t *   <OtpInput.Separator />\n\t *   <OtpInput.Group>\n\t *     <OtpInput.Slot index={3} />\n\t *     <OtpInput.Slot index={4} />\n\t *     <OtpInput.Slot index={5} />\n\t *   </OtpInput.Group>\n\t * </OtpInput.Root>\n\t * ```\n\t */\n\tSlot: OtpInputSlotImpl,\n\t/**\n\t * A visual separator between two `OtpInput.Group` segments. Renders a\n\t * minus icon by default; pass `children` to override.\n\t *\n\t * @see https://mantle.ngrok.com/components/otp-input\n\t *\n\t * @example\n\t * ```tsx\n\t * <OtpInput.Root maxLength={6}>\n\t *   <OtpInput.Group>\n\t *     <OtpInput.Slot index={0} />\n\t *     <OtpInput.Slot index={1} />\n\t *     <OtpInput.Slot index={2} />\n\t *   </OtpInput.Group>\n\t *   <OtpInput.Separator />\n\t *   <OtpInput.Group>\n\t *     <OtpInput.Slot index={3} />\n\t *     <OtpInput.Slot index={4} />\n\t *     <OtpInput.Slot index={5} />\n\t *   </OtpInput.Group>\n\t * </OtpInput.Root>\n\t * ```\n\t */\n\tSeparator,\n} as const;\n\nexport {\n\t//,\n\tOtpInput,\n};\n\nexport {\n\t//,\n\tREGEXP_ONLY_CHARS,\n\tREGEXP_ONLY_DIGITS,\n\tREGEXP_ONLY_DIGITS_AND_CHARS,\n} from \"input-otp\";\n"],"mappings":"2cAuBA,MAAM,EAAiB,CACtB,MAAO,SACP,QAAS,UACT,QAAS,UACT,CAEK,EAAkE,GACvE,eAAe,EAAI,OAEd,EAAgE,GACrE,0BAA0B,EAAI,GAQzB,GAAmB,CACxB,cACA,WAKI,IAAgB,EACZ,OAEJ,IAAgB,EACZ,QAEJ,IAAgB,EACZ,MAED,QAgBF,GAAmB,CACxB,WACA,gBAIK,CACL,IAAM,EAAkB,EAAW,EAAgB,CAC7C,EAAQ,EAAgB,MAAM,OAK9B,EAAW,EAAgB,CAAE,YAJf,EAAgB,MAAM,QACxC,EAAO,IAAS,GAAS,KAAK,SAC/B,EAE6C,CAAE,QAAO,CAAC,CAOlD,EAAM,EAAa,EAAe,GAAc,IAAA,GAChD,EAAkB,EACrB,EAAe,CACf,0BAA2B,EAAsB,EAAI,CACrD,wBAAyB,EAAoB,EAAI,CACjD,CAAC,CACD,IAAA,GAIH,OACC,EAAC,MAAD,CACC,UAAU,qBACV,iBAAgB,EAChB,kBAAiB,GAAc,IAAA,GAC/B,MAAO,EAEN,WACI,CAAA,EA+CF,EAAO,GAEX,CACC,eAAgB,EAChB,WACA,YACA,qBACA,WAAY,EACZ,GAAG,GAEJ,IACI,CACJ,IAAM,EAAkB,GAAoB,CACtC,CAAE,YAAa,EAAqB,cAAe,EAAgB,CACxE,eAAgB,EAChB,mBAAoB,GACpB,WAAY,GAAe,EAC3B,CAAC,CAEF,OACC,EAAC,EAAD,CACM,MACL,eAAc,EACd,YAAU,YACV,mBAAoB,EACnB,kDACA,EACA,CACD,UAAW,EAAG,8BAA+B,EAAU,CACvD,GAAI,WAEJ,EAAC,EAAD,CAA6B,aAAa,WAA2B,CAAA,CAC3D,CAAA,EAGb,CACD,EAAK,YAAc,WA4BnB,MAAM,EAAQ,GACZ,CAAE,UAAS,WAAU,YAAW,GAAG,GAAS,IAI3C,EAHY,EAAUA,EAAc,MAGpC,CACM,MACL,YAAU,kBACV,UAAW,EACV,wCAOA,+FAKA,2FACA,EACA,CACD,GAAI,EAEH,WACK,CAAA,CAGT,CACD,EAAM,YAAc,gBAuCpB,MAAM,EAAmB,GACvB,CAAE,YAAW,QAAO,GAAG,GAAS,IAAQ,CAExC,IAAM,EADU,EAAW,EACP,CAAC,MAAM,GACrB,EAAO,GAAM,MAAQ,KACrB,EAAe,GAAM,cAAgB,GAG3C,OACC,EAAC,MAAD,CACM,MACL,YAAU,iBACV,cANe,GAAM,UAAY,GAMT,GAAK,IAAA,GAC7B,UAAW,EACV,8KACA,sDAQA,gFAUA,iEACA,wDACA,iEACA,oDACA,sDASA,mDAYA,+DACA,qEACA,oEACA,0GACA,sGACA,4FACA,EACA,CACD,GAAI,WAzDL,CA2DE,EACA,GACA,EAAC,MAAD,CAAK,UAAU,iFACd,EAAC,MAAD,CAAK,UAAU,mCAAqC,CAAA,CAC/C,CAAA,CAEF,IAGR,CACD,EAAiB,YAAc,eAuC/B,MAAM,EAAY,GAChB,CAAE,UAAS,WAAU,YAAW,WAAW,GAAO,GAAG,GAAS,IAAQ,CACtE,IAAM,EAAO,EAAUA,EAAc,MAC/B,EAAgB,EAAW,CAAE,KAAM,YAAa,CAAG,CAAE,cAAe,GAAM,KAAM,OAAQ,CAE9F,OACC,EAAC,EAAD,CACM,MACL,YAAU,sBACV,UAAW,EAAG,+BAAgC,EAAU,CACxD,GAAI,EACJ,GAAI,WAEH,GAAY,EAAC,EAAD,CAAW,OAAO,OAAS,CAAA,CAClC,CAAA,EAGT,CACD,EAAU,YAAc,oBAqCxB,MAAM,EAAW,CAyBhB,OAwBA,QAyBA,KAAM,EAwBN,YACA"}

package/dist/pagination.d.ts

@@ -1,6 +1,6 @@
-import { t as WithAsChild } from "./as-child-DQHfEmYB.js";
-import { t as ButtonGroup } from "./index-DOJUH34Z.js";
-import { t as Select } from "./select-DZutJxyr.js";
+import { t as WithAsChild } from "./as-child-C2PttRwz.js";
+import { t as ButtonGroup } from "./index-DIBURJqf.js";
+import { t as Select } from "./select-8ymlL8kC.js";
 import * as _$react from "react";
 import { ComponentProps } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";

package/dist/pagination.js

@@ -1,2 +1,2 @@
-import{t as e}from"./cx-D1HYnpvA.js";import{t}from"./slot-D_ZUrdEW.js";import{t as n}from"./icon-button-ZKN0sRIJ.js";import{t as r}from"./button-POMJ-20y.js";import{n as i}from"./separator-DSOIrnhj.js";import{t as a}from"./select-DOgdZO0Q.js";import{createContext as o,forwardRef as s,useContext as c,useEffect as l,useState as u}from"react";import d from"tiny-invariant";import{jsx as f,jsxs as p}from"react/jsx-runtime";import{CaretLeftIcon as m}from"@phosphor-icons/react/CaretLeft";import{CaretRightIcon as h}from"@phosphor-icons/react/CaretRight";const g=o(void 0),_=s(({className:t,children:n,defaultPageSize:r,...i},a)=>{let[o,s]=u(r);return f(g.Provider,{value:{defaultPageSize:r,pageSize:o,setPageSize:s},children:f(`div`,{"data-slot":`cursor-pagination`,className:e(`inline-flex items-center justify-between gap-2`,t),ref:a,...i,children:n})})});_.displayName=`CursorPagination`;const v=s(({hasNextPage:e,hasPreviousPage:t,onNextPage:a,onPreviousPage:o,...s},c)=>p(r,{"data-slot":`cursor-pagination-buttons`,appearance:`panel`,ref:c,...s,children:[f(n,{"data-slot":`cursor-pagination-previous`,appearance:`ghost`,disabled:!t,icon:f(m,{}),label:`Previous page`,onClick:o,size:`sm`,type:`button`}),f(i,{"data-slot":`cursor-pagination-separator`,orientation:`vertical`,className:`min-h-5`}),f(n,{"data-slot":`cursor-pagination-next`,appearance:`ghost`,disabled:!e,icon:f(h,{}),label:`Next page`,onClick:a,size:`sm`,type:`button`})]}));v.displayName=`CursorButtons`;const y=[5,10,20,50,100],b=s(({className:t,pageSizes:n=y,onChangePageSize:r,...i},o)=>{let s=c(g);return d(s,`CursorPageSizeSelect must be used as a child of a CursorPagination component`),d(n.includes(s.defaultPageSize),`CursorPagination.defaultPageSize must be included in CursorPageSizeSelect.pageSizes`),d(n.includes(s.pageSize),`CursorPagination.pageSize must be included in CursorPageSizeSelect.pageSizes`),p(a.Root,{defaultValue:`${s.pageSize}`,onValueChange:e=>{let t=Number.parseInt(e,10);Number.isNaN(t)&&(t=s.defaultPageSize),s.setPageSize(t),r?.(t)},children:[f(a.Trigger,{ref:o,"data-slot":`cursor-pagination-page-size-select`,className:e(`w-auto min-w-36`,t),value:s.pageSize,...i,children:f(a.Value,{})}),f(a.Content,{width:`trigger`,children:n.map(e=>p(a.Item,{value:`${e}`,children:[e,` per page`]},e))})]})});b.displayName=`CursorPageSizeSelect`;function x({asChild:n=!1,className:r,...i}){let a=c(g);return d(a,`CursorPageSizeValue must be used as a child of a CursorPagination component`),p(n?t:`span`,{"data-slot":`cursor-pagination-page-size-value`,className:e(`text-muted text-sm font-normal`,r),...i,children:[a.pageSize,` per page`]})}x.displayName=`CursorPageSizeValue`;const S={Root:_,Buttons:v,PageSizeSelect:b,PageSizeValue:x};function C({listSize:e,pageSize:t}){let[n,r]=u(1),[i,a]=u(t);l(()=>{a(t),r(1)},[t]),l(()=>{r(1)},[e]);let o=Math.ceil(e/i),s=(n-1)*i,c=n>1,d=n<o;function f(e){r(Math.max(1,Math.min(e,o)))}function p(){d&&r(e=>Math.min(e+1,o))}function m(){c&&r(e=>Math.max(e-1,1))}function h(e){a(e),r(1)}function g(){r(o)}function _(){r(1)}return{currentPage:n,goToFirstPage:_,goToLastPage:g,goToPage:f,hasNextPage:d,hasPreviousPage:c,nextPage:p,offset:s,pageSize:i,previousPage:m,setPageSize:h,totalPages:o}}function w(e,t){return e.slice(t.offset,t.offset+t.pageSize)}export{S as CursorPagination,w as getOffsetPaginatedSlice,C as useOffsetPagination};
+import{t as e}from"./cx-D1HYnpvA.js";import{t}from"./slot-D_ZUrdEW.js";import{t as n}from"./icon-button-ZKN0sRIJ.js";import{t as r}from"./button-POMJ-20y.js";import{n as i}from"./separator-awchG4LI.js";import{t as a}from"./select-BBB_e15a.js";import{createContext as o,forwardRef as s,useContext as c,useEffect as l,useState as u}from"react";import d from"tiny-invariant";import{jsx as f,jsxs as p}from"react/jsx-runtime";import{CaretLeftIcon as m}from"@phosphor-icons/react/CaretLeft";import{CaretRightIcon as h}from"@phosphor-icons/react/CaretRight";const g=o(void 0),_=s(({className:t,children:n,defaultPageSize:r,...i},a)=>{let[o,s]=u(r);return f(g.Provider,{value:{defaultPageSize:r,pageSize:o,setPageSize:s},children:f(`div`,{"data-slot":`cursor-pagination`,className:e(`inline-flex items-center justify-between gap-2`,t),ref:a,...i,children:n})})});_.displayName=`CursorPagination`;const v=s(({hasNextPage:e,hasPreviousPage:t,onNextPage:a,onPreviousPage:o,...s},c)=>p(r,{"data-slot":`cursor-pagination-buttons`,appearance:`panel`,ref:c,...s,children:[f(n,{"data-slot":`cursor-pagination-previous`,appearance:`ghost`,disabled:!t,icon:f(m,{}),label:`Previous page`,onClick:o,size:`sm`,type:`button`}),f(i,{"data-slot":`cursor-pagination-separator`,orientation:`vertical`,className:`min-h-5`}),f(n,{"data-slot":`cursor-pagination-next`,appearance:`ghost`,disabled:!e,icon:f(h,{}),label:`Next page`,onClick:a,size:`sm`,type:`button`})]}));v.displayName=`CursorButtons`;const y=[5,10,20,50,100],b=s(({className:t,pageSizes:n=y,onChangePageSize:r,...i},o)=>{let s=c(g);return d(s,`CursorPageSizeSelect must be used as a child of a CursorPagination component`),d(n.includes(s.defaultPageSize),`CursorPagination.defaultPageSize must be included in CursorPageSizeSelect.pageSizes`),d(n.includes(s.pageSize),`CursorPagination.pageSize must be included in CursorPageSizeSelect.pageSizes`),p(a.Root,{defaultValue:`${s.pageSize}`,onValueChange:e=>{let t=Number.parseInt(e,10);Number.isNaN(t)&&(t=s.defaultPageSize),s.setPageSize(t),r?.(t)},children:[f(a.Trigger,{ref:o,"data-slot":`cursor-pagination-page-size-select`,className:e(`w-auto min-w-36`,t),value:s.pageSize,...i,children:f(a.Value,{})}),f(a.Content,{width:`trigger`,children:n.map(e=>p(a.Item,{value:`${e}`,children:[e,` per page`]},e))})]})});b.displayName=`CursorPageSizeSelect`;function x({asChild:n=!1,className:r,...i}){let a=c(g);return d(a,`CursorPageSizeValue must be used as a child of a CursorPagination component`),p(n?t:`span`,{"data-slot":`cursor-pagination-page-size-value`,className:e(`text-muted text-sm font-normal`,r),...i,children:[a.pageSize,` per page`]})}x.displayName=`CursorPageSizeValue`;const S={Root:_,Buttons:v,PageSizeSelect:b,PageSizeValue:x};function C({listSize:e,pageSize:t}){let[n,r]=u(1),[i,a]=u(t);l(()=>{a(t),r(1)},[t]),l(()=>{r(1)},[e]);let o=Math.ceil(e/i),s=(n-1)*i,c=n>1,d=n<o;function f(e){r(Math.max(1,Math.min(e,o)))}function p(){d&&r(e=>Math.min(e+1,o))}function m(){c&&r(e=>Math.max(e-1,1))}function h(e){a(e),r(1)}function g(){r(o)}function _(){r(1)}return{currentPage:n,goToFirstPage:_,goToLastPage:g,goToPage:f,hasNextPage:d,hasPreviousPage:c,nextPage:p,offset:s,pageSize:i,previousPage:m,setPageSize:h,totalPages:o}}function w(e,t){return e.slice(t.offset,t.offset+t.pageSize)}export{S as CursorPagination,w as getOffsetPaginatedSlice,C as useOffsetPagination};
 //# sourceMappingURL=pagination.js.map

package/dist/popover-CoZxokw_.js

@@ -0,0 +1,2 @@
+import{t as e}from"./cx-D1HYnpvA.js";import{forwardRef as t}from"react";import{jsx as n}from"react/jsx-runtime";import*as r from"@radix-ui/react-popover";const i=r.Root;i.displayName=`Popover`;const a=r.Trigger;a.displayName=`PopoverTrigger`;const o=r.Anchor;o.displayName=`PopoverAnchor`;const s=r.Close;s.displayName=`PopoverClose`;const c=t(({align:t=`center`,className:i,onClick:a,preferredWidth:o=`max-w-72`,sideOffset:s=4,...c},l)=>n(r.Portal,{children:n(r.Content,{align:t,"data-slot":`popover-content`,className:e(`text-popover-foreground border-popover bg-popover data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2 data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95 z-50 rounded-md border p-4 shadow-md outline-hidden`,o,i),onClick:e=>{e.stopPropagation(),a?.(e)},ref:l,sideOffset:s,...c})}));c.displayName=`PopoverContent`;const l={Root:i,Anchor:o,Close:s,Content:c,Trigger:a};export{l as t};
+//# sourceMappingURL=popover-CoZxokw_.js.map

package/dist/popover-CoZxokw_.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover-CoZxokw_.js","names":[],"sources":["../src/components/popover/popover.tsx"],"sourcesContent":["import * as PopoverPrimitive from \"@radix-ui/react-popover\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ComponentRef } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\n\n/**\n * A floating overlay that displays rich content in a portal, triggered by a button.\n * This is the root, stateful component that manages the open/closed state of the popover.\n *\n * @see https://mantle.ngrok.com/components/popover#popoverroot\n *\n * @example\n * ```tsx\n * <Popover.Root>\n *   <Popover.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Popover\n *     </Button>\n *   </Popover.Trigger>\n *   <Popover.Content>\n *     <p>This is the popover content.</p>\n *   </Popover.Content>\n * </Popover.Root>\n * ```\n */\nconst Root = PopoverPrimitive.Root;\nRoot.displayName = \"Popover\";\n\n/**\n * The trigger button that opens the popover.\n *\n * @see https://mantle.ngrok.com/components/popover#popovertrigger\n *\n * @example\n * ```tsx\n * <Popover.Root>\n *   <Popover.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Popover\n *     </Button>\n *   </Popover.Trigger>\n *   <Popover.Content>\n *     <p>This is the popover content.</p>\n *   </Popover.Content>\n * </Popover.Root>\n * ```\n */\nconst Trigger = PopoverPrimitive.Trigger;\nTrigger.displayName = \"PopoverTrigger\";\n\n/**\n * An optional element to position the PopoverContent against. If this part is not used, the content will position alongside the PopoverTrigger.\n *\n * @see https://mantle.ngrok.com/components/popover#popoveranchor\n *\n * @example\n * ```tsx\n * <Popover.Root>\n *   <Popover.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Popover\n *     </Button>\n *   </Popover.Trigger>\n *   <Popover.Anchor asChild>\n *     <div>Anchor element</div>\n *   </Popover.Anchor>\n *   <Popover.Content>\n *     <p>This is the popover content.</p>\n *   </Popover.Content>\n * </Popover.Root>\n * ```\n */\nconst Anchor = PopoverPrimitive.Anchor;\nAnchor.displayName = \"PopoverAnchor\";\n\n/**\n * A button that closes an open popover.\n *\n * @see https://mantle.ngrok.com/components/popover#popoverclose\n *\n * @example\n * ```tsx\n * <Popover.Root>\n *   <Popover.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Popover\n *     </Button>\n *   </Popover.Trigger>\n *   <Popover.Content>\n *     <p>This is the popover content.</p>\n *     <Popover.Close asChild>\n *       <Button type=\"button\">Close</Button>\n *     </Popover.Close>\n *   </Popover.Content>\n * </Popover.Root>\n * ```\n */\nconst Close = PopoverPrimitive.Close;\nClose.displayName = \"PopoverClose\";\n\ntype PopoverContentProps = ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> & {\n\t/**\n\t * The preferred width of the `PopoverContent` as a tailwind `max-w-` class.\n\t *\n\t * By default, a `Popover`'s content width is responsive with a default\n\t * preferred width: the maximum width of the `PopoverContent`\n\t *\n\t * @default `max-w-72`\n\t */\n\tpreferredWidth?: `max-w-${string}`;\n};\n\n/**\n * The content to render inside the popover.\n *\n * @see https://mantle.ngrok.com/components/popover#popovercontent\n *\n * @example\n * ```tsx\n * <Popover.Root>\n *   <Popover.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Popover\n *     </Button>\n *   </Popover.Trigger>\n *   <Popover.Content>\n *     <p>This is the popover content.</p>\n *   </Popover.Content>\n * </Popover.Root>\n * ```\n */\nconst Content = forwardRef<ComponentRef<\"div\">, PopoverContentProps>(\n\t(\n\t\t{\n\t\t\t//,\n\t\t\talign = \"center\",\n\t\t\tclassName,\n\t\t\tonClick,\n\t\t\tpreferredWidth = \"max-w-72\",\n\t\t\tsideOffset = 4,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => (\n\t\t<PopoverPrimitive.Portal>\n\t\t\t<PopoverPrimitive.Content\n\t\t\t\talign={align}\n\t\t\t\tdata-slot=\"popover-content\"\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"text-popover-foreground border-popover bg-popover data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2 data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95 z-50 rounded-md border p-4 shadow-md outline-hidden\",\n\t\t\t\t\tpreferredWidth,\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tonClick={(event) => {\n\t\t\t\t\t/**\n\t\t\t\t\t * Prevent the click event from propagating up to parent/containing elements\n\t\t\t\t\t * of the PopoverContent\n\t\t\t\t\t */\n\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\tonClick?.(event);\n\t\t\t\t}}\n\t\t\t\tref={ref}\n\t\t\t\tsideOffset={sideOffset}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t</PopoverPrimitive.Portal>\n\t),\n);\nContent.displayName = \"PopoverContent\";\n\n/**\n * A floating overlay that displays rich content in a portal, triggered by a button.\n *\n * Use `Popover` for INTERACTIVE overlay content — small forms, settings\n * menus, color pickers, action lists. The user opens it deliberately\n * (click/tap or focus + space). For short, non-interactive label hints\n * triggered by hover, use `Tooltip` instead. For non-essential preview\n * content shown on hover, use `HoverCard`.\n *\n * `Popover` is a non-modal dialog by default: focus moves into the content\n * when it opens, `Escape` closes and returns focus to the trigger, clicking\n * outside dismisses, and the page (body and any scroll containers) continues\n * to scroll normally. Pass `modal` on `Popover.Root` to trap focus inside\n * the content, block interaction with the rest of the page, and lock body\n * scroll while the popover is open.\n *\n * @see https://mantle.ngrok.com/components/popover\n * @see https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/\n *\n * @example\n * Composition:\n * ```\n * Popover.Root\n * ├── Popover.Trigger\n * ├── Popover.Anchor\n * └── Popover.Content\n *     └── Popover.Close\n * ```\n *\n * @example\n * ```tsx\n * <Popover.Root>\n *   <Popover.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Popover\n *     </Button>\n *   </Popover.Trigger>\n *   <Popover.Content>\n *     <p>This is the popover content.</p>\n *   </Popover.Content>\n * </Popover.Root>\n * ```\n */\nconst Popover = {\n\t/**\n\t * The root, stateful component that manages the open/closed state of the popover.\n\t *\n\t * @see https://mantle.ngrok.com/components/popover#popoverroot\n\t *\n\t * @example\n\t * ```tsx\n\t * <Popover.Root>\n\t *   <Popover.Trigger asChild>\n\t *     <Button>Open popover</Button>\n\t *   </Popover.Trigger>\n\t *   <Popover.Content>\n\t *     <p>This is the popover content.</p>\n\t *   </Popover.Content>\n\t * </Popover.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * An optional element to position the PopoverContent against. If not used, content positions alongside the trigger.\n\t *\n\t * @see https://mantle.ngrok.com/components/popover#popoveranchor\n\t *\n\t * @example\n\t * ```tsx\n\t * <Popover.Root>\n\t *   <Popover.Anchor asChild>\n\t *     <div>Position relative to this element</div>\n\t *   </Popover.Anchor>\n\t *   <Popover.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">Open Popover</Button>\n\t *   </Popover.Trigger>\n\t *   <Popover.Content>\n\t *     <p>This popover is positioned relative to the anchor.</p>\n\t *     <Popover.Close asChild>\n\t *       <Button type=\"button\">Close</Button>\n\t *     </Popover.Close>\n\t *   </Popover.Content>\n\t * </Popover.Root>\n\t * ```\n\t */\n\tAnchor,\n\t/**\n\t * A button that closes an open popover. Can be placed anywhere within the popover content.\n\t *\n\t * @see https://mantle.ngrok.com/components/popover#popoverclose\n\t *\n\t * @example\n\t * ```tsx\n\t * <Popover.Root>\n\t *   <Popover.Trigger asChild>\n\t *     <Button type=\"button\">Settings</Button>\n\t *   </Popover.Trigger>\n\t *   <Popover.Content>\n\t *     <div className=\"flex items-center justify-between\">\n\t *       <Text>Settings Panel</Text>\n\t *       <Popover.Close asChild>\n\t *         <Button type=\"button\" appearance=\"ghost\" size=\"sm\">✕</Button>\n\t *       </Popover.Close>\n\t *     </div>\n\t *     <Text>Configure your preferences here.</Text>\n\t *   </Popover.Content>\n\t * </Popover.Root>\n\t * ```\n\t */\n\tClose,\n\t/**\n\t * The content to render inside the popover. Appears in a portal with rich styling and animations.\n\t *\n\t * @see https://mantle.ngrok.com/components/popover#popovercontent\n\t *\n\t * @example\n\t * ```tsx\n\t * <Popover.Root>\n\t *   <Popover.Trigger asChild>\n\t *     <Button type=\"button\">Show Info</Button>\n\t *   </Popover.Trigger>\n\t *   <Popover.Content side=\"top\" align=\"center\">\n\t *     <div className=\"space-y-2\">\n\t *       <Text weight=\"strong\">Additional Information</Text>\n\t *       <Text>This is the content inside the popover.</Text>\n\t *       <Button type=\"button\" size=\"sm\">Action</Button>\n\t *     </div>\n\t *   </Popover.Content>\n\t * </Popover.Root>\n\t * ```\n\t */\n\tContent,\n\t/**\n\t * The trigger button that opens the popover when clicked or focused.\n\t *\n\t * @see https://mantle.ngrok.com/components/popover#popovertrigger\n\t *\n\t * @example\n\t * ```tsx\n\t * <Popover.Root>\n\t *   <Popover.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">\n\t *       Options\n\t *     </Button>\n\t *   </Popover.Trigger>\n\t *   <Popover.Content>\n\t *     <div className=\"space-y-2\">\n\t *       <Button type=\"button\" variant=\"ghost\">Edit</Button>\n\t *       <Button type=\"button\" variant=\"ghost\">Delete</Button>\n\t *     </div>\n\t *   </Popover.Content>\n\t * </Popover.Root>\n\t * ```\n\t */\n\tTrigger,\n} as const;\n\nexport {\n\t//,\n\tPopover,\n};\n"],"mappings":"0JAyBA,MAAM,EAAO,EAAiB,KAC9B,EAAK,YAAc,UAqBnB,MAAM,EAAU,EAAiB,QACjC,EAAQ,YAAc,iBAwBtB,MAAM,EAAS,EAAiB,OAChC,EAAO,YAAc,gBAwBrB,MAAM,EAAQ,EAAiB,MAC/B,EAAM,YAAc,eAiCpB,MAAM,EAAU,GAEd,CAEC,QAAQ,SACR,YACA,UACA,iBAAiB,WACjB,aAAa,EACb,GAAG,GAEJ,IAEA,EAAC,EAAiB,OAAlB,CAAA,SACC,EAAC,EAAiB,QAAlB,CACQ,QACP,YAAU,kBACV,UAAW,EACV,qaACA,EACA,EACA,CACD,QAAU,GAAU,CAKnB,EAAM,iBAAiB,CACvB,IAAU,EAAM,EAEZ,MACO,aACZ,GAAI,EACH,CAAA,CACuB,CAAA,CAE3B,CACD,EAAQ,YAAc,iBA6CtB,MAAM,EAAU,CAkBf,OAwBA,SAwBA,QAsBA,UAuBA,UACA"}

package/dist/popover.js

@@ -1,2 +1 @@
-import{t as e}from"./cx-D1HYnpvA.js";import{forwardRef as t}from"react";import{jsx as n}from"react/jsx-runtime";import*as r from"@radix-ui/react-popover";const i=r.Root;i.displayName=`Popover`;const a=r.Trigger;a.displayName=`PopoverTrigger`;const o=r.Anchor;o.displayName=`PopoverAnchor`;const s=r.Close;s.displayName=`PopoverClose`;const c=t(({align:t=`center`,className:i,onClick:a,preferredWidth:o=`max-w-72`,sideOffset:s=4,...c},l)=>n(r.Portal,{children:n(r.Content,{align:t,"data-slot":`popover-content`,className:e(`text-popover-foreground border-popover bg-popover data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2 data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95 z-50 rounded-md border p-4 shadow-md outline-hidden`,o,i),onClick:e=>{e.stopPropagation(),a?.(e)},ref:l,sideOffset:s,...c})}));c.displayName=`PopoverContent`;const l={Root:i,Anchor:o,Close:s,Content:c,Trigger:a};export{l as Popover};
-//# sourceMappingURL=popover.js.map
+import{t as e}from"./popover-CoZxokw_.js";export{e as Popover};

package/dist/{primitive-tyw4V7Vf.d.ts → primitive-Ed9cel2r.d.ts}

@@ -13,4 +13,4 @@ declare namespace Root {
 declare function isDialogOverlayTarget(target: EventTarget | null): boolean;
 //#endregion
 export { isDialogOverlayTarget as n, Root as t };
-//# sourceMappingURL=primitive-tyw4V7Vf.d.ts.map
+//# sourceMappingURL=primitive-Ed9cel2r.d.ts.map

package/dist/radio-group.d.ts

@@ -1,4 +1,4 @@
-import { t as WithAsChild } from "./as-child-DQHfEmYB.js";
+import { t as WithAsChild } from "./as-child-C2PttRwz.js";
 import * as _$react from "react";
 import { HTMLAttributes, ReactNode } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";