{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "extends": "none",
  "name": "multiple-select",
  "title": "multiple-select",
  "description": "multiple-select",
  "dependencies": [
    "react-aria-components"
  ],
  "registryDependencies": [
    "https://intentui.com/r/primitive",
    "https://intentui.com/r/button",
    "https://intentui.com/r/field",
    "https://intentui.com/r/list-box",
    "https://intentui.com/r/popover",
    "https://intentui.com/r/search-field",
    "https://intentui.com/r/tag-group"
  ],
  "files": [
    {
      "path": "src/components/ui/multiple-select.tsx",
      "content": "'use client'\n\nimport { Children, isValidElement, useMemo, useRef } from 'react'\nimport { Autocomplete, useFilter } from 'react-aria-components/Autocomplete'\nimport { ListBox } from 'react-aria-components/ListBox'\nimport { Select, type SelectProps, SelectValue } from 'react-aria-components/Select'\nimport { cx } from '@/lib/primitive'\nimport { Button } from './button'\nimport { fieldStyles } from './field'\nimport { ListBoxItem } from './list-box'\nimport { PopoverContent } from './popover'\nimport { SearchField, SearchInput } from './search-field'\nimport { Tag, TagGroup, TagList } from './tag-group'\n\ninterface OptionBase {\n  id: string | number\n  name: string\n}\n\ninterface MultipleSelectProps<T extends OptionBase> extends Omit<\n  SelectProps<T, 'multiple'>,\n  'selectionMode' | 'children'\n> {\n  placeholder?: string\n  className?: string\n  children?: React.ReactNode\n  name?: string\n  searchPlaceholder?: string\n  searchValue?: string\n  onSearchChange?: (value: string) => void\n}\n\ninterface MultipleSelectContentProps<T extends OptionBase> {\n  items: Iterable<T>\n  children: (item: T) => React.ReactNode\n}\n\nfunction MultipleSelectContent<T extends OptionBase>(_props: MultipleSelectContentProps<T>) {\n  return null\n}\n;(MultipleSelectContent as any).displayName = 'MultipleSelectContent'\n\nfunction MultipleSelect<T extends OptionBase>({\n  placeholder = 'No selected items',\n  className,\n  children,\n  name,\n  searchPlaceholder,\n  searchValue,\n  onSearchChange,\n  ...props\n}: MultipleSelectProps<T>) {\n  const triggerRef = useRef<HTMLDivElement | null>(null)\n  const { contains } = useFilter({ sensitivity: 'base' })\n\n  const { before, after, list } = useMemo(() => {\n    const arr = Children.toArray(children)\n    const idx = arr.findIndex(\n      (c) => isValidElement(c) && (c.type as any)?.displayName === 'MultipleSelectContent'\n    )\n    if (idx === -1) {\n      return { before: arr, after: [], list: null as null | MultipleSelectContentProps<T> }\n    }\n    const el = arr[idx] as React.ReactElement<MultipleSelectContentProps<T>>\n    return { before: arr.slice(0, idx), after: arr.slice(idx + 1), list: el.props }\n  }, [children])\n\n  return (\n    <Select\n      name={name}\n      data-slot=\"control\"\n      className={cx(fieldStyles(), className)}\n      selectionMode=\"multiple\"\n      {...props}\n    >\n      {before}\n      {list && (\n        <>\n          <div\n            data-slot=\"control\"\n            ref={triggerRef}\n            className=\"flex w-full items-center gap-2 rounded-lg border bg-(--control-bg,transparent) p-1\"\n          >\n            <SelectValue<T> className=\"flex-1\">\n              {({ selectedItems, state }) => (\n                <TagGroup\n                  aria-label=\"Selected items\"\n                  onRemove={(keys) => {\n                    if (Array.isArray(state.value)) {\n                      state.setValue(state.value.filter((k) => !keys.has(k)))\n                    }\n                  }}\n                >\n                  <TagList\n                    items={selectedItems.filter((i) => i != null)}\n                    renderEmptyState={() => (\n                      <i className=\"ps-2 text-muted-fg text-sm\">{placeholder}</i>\n                    )}\n                  >\n                    {(item) => <Tag className=\"rounded-md\">{item.name}</Tag>}\n                  </TagList>\n                </TagGroup>\n              )}\n            </SelectValue>\n            <Button\n              intent=\"secondary\"\n              size=\"sq-xs\"\n              className=\"self-end rounded-[calc(var(--radius-lg)-(--spacing(1)))]\"\n            >\n              <svg\n                data-slot=\"icon\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 24 24\"\n                fill=\"currentColor\"\n              >\n                <path\n                  fillRule=\"evenodd\"\n                  d=\"M12 3.75a.75.75 0 0 1 .75.75v6.75h6.75a.75.75 0 0 1 0 1.5h-6.75v6.75a.75.75 0 0 1-1.5 0v-6.75H4.5a.75.75 0 0 1 0-1.5h6.75V4.5a.75.75 0 0 1 .75-.75Z\"\n                  clipRule=\"evenodd\"\n                />\n              </svg>\n            </Button>\n          </div>\n          <PopoverContent\n            triggerRef={triggerRef}\n            placement=\"bottom\"\n            className=\"flex w-full min-w-(--trigger-width) flex-col overflow-hidden *:data-[slot=popover-inner]:flex *:data-[slot=popover-inner]:flex-col *:data-[slot=popover-inner]:overflow-hidden\"\n          >\n            <Autocomplete filter={contains}>\n              <SearchField\n                autoFocus\n                className=\"rounded-none py-0.5 outline-hidden\"\n                value={searchValue}\n                onChange={onSearchChange}\n              >\n                <SearchInput\n                  className=\"border-none outline-hidden focus:ring-0\"\n                  placeholder={searchPlaceholder}\n                />\n              </SearchField>\n              <ListBox\n                className=\"grid min-h-0 w-full flex-1 grid-cols-[auto_1fr] gap-y-1 overflow-y-auto border-t p-1 outline-hidden *:[[role='group']+[role=group]]:mt-4 *:[[role='group']+[role=separator]]:mt-1\"\n                items={list.items}\n              >\n                {list.children}\n              </ListBox>\n            </Autocomplete>\n          </PopoverContent>\n        </>\n      )}\n      {after}\n    </Select>\n  )\n}\n\nconst MultipleSelectItem = ListBoxItem\n\nexport { MultipleSelect, MultipleSelectContent, MultipleSelectItem }\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}