{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "select-46",
  "title": "Multiselect",
  "description": "Picked options become removable chips in the field.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "https://ui.ndekocode.dev/r/combobox.json",
    "https://ui.ndekocode.dev/r/field.json",
    "https://ui.ndekocode.dev/r/theme.json",
    "https://ui.ndekocode.dev/r/use-prefers-reduced-motion.json"
  ],
  "files": [
    {
      "path": "registry/ndeko/components/select/select-46.tsx",
      "content": "'use client';\n\nimport {\n  AnimatePresence,\n  motion,\n  type Transition,\n  type Variants,\n} from 'motion/react';\n\nimport { usePrefersReducedMotion } from '@/registry/ndeko/hooks/use-prefers-reduced-motion';\nimport {\n  Combobox,\n  ComboboxChip,\n  ComboboxChipRemove,\n  ComboboxChips,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxInputGroup,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxValue,\n} from '@/registry/ndeko/ui/combobox';\nimport { Field, FieldLabel } from '@/registry/ndeko/ui/field';\n\ntype Framework = {\n  value: string;\n  label: string;\n  disabled: boolean;\n};\n\nconst FRAMEWORKS: Framework[] = [\n  { value: 'nextjs', label: 'Next.js', disabled: false },\n  { value: 'sveltekit', label: 'SvelteKit', disabled: false },\n  { value: 'nuxt', label: 'Nuxt', disabled: true },\n  { value: 'remix', label: 'Remix', disabled: false },\n  { value: 'astro', label: 'Astro', disabled: false },\n  { value: 'angular', label: 'Angular', disabled: false },\n  { value: 'vue', label: 'Vue.js', disabled: false },\n  { value: 'react', label: 'React', disabled: false },\n  { value: 'ember', label: 'Ember.js', disabled: false },\n  { value: 'gatsby', label: 'Gatsby', disabled: false },\n  { value: 'eleventy', label: 'Eleventy', disabled: true },\n  { value: 'solid', label: 'SolidJS', disabled: false },\n  { value: 'preact', label: 'Preact', disabled: false },\n  { value: 'qwik', label: 'Qwik', disabled: false },\n  { value: 'alpine', label: 'Alpine.js', disabled: false },\n  { value: 'lit', label: 'Lit', disabled: false },\n];\n\nconst INITIAL_FRAMEWORKS = FRAMEWORKS.slice(0, 2);\n\nconst CHIP_TRANSITION: Transition = { duration: 0.2, ease: [0.2, 0, 0, 1] };\nconst CHIP_EXIT_TRANSITION: Transition = {\n  duration: 0.15,\n  ease: [0.2, 0, 0, 1],\n};\n\nconst CHIP_VARIANTS: Variants = {\n  hidden: { opacity: 0, scale: 0.9 },\n  shown: { opacity: 1, scale: 1 },\n  gone: { opacity: 0, scale: 0.9, transition: CHIP_EXIT_TRANSITION },\n};\n\nconst FADE_VARIANTS: Variants = {\n  hidden: { opacity: 0 },\n  shown: { opacity: 1 },\n  gone: { opacity: 0, transition: CHIP_EXIT_TRANSITION },\n};\n\nfunction chipVariantsOf(shouldReduceMotion: boolean | null) {\n  if (shouldReduceMotion) {\n    return FADE_VARIANTS;\n  }\n  return CHIP_VARIANTS;\n}\n\nfunction placeholderOf(selected: Framework[]) {\n  if (selected.length > 0) {\n    return '';\n  }\n  return 'Select frameworks';\n}\n\nexport default function Select46() {\n  const shouldReduceMotion = usePrefersReducedMotion();\n  const chipVariants = chipVariantsOf(shouldReduceMotion);\n  const isLayoutAnimated = !shouldReduceMotion;\n\n  return (\n    <Field className='w-full max-w-xs'>\n      <FieldLabel>Frameworks</FieldLabel>\n      <Combobox items={FRAMEWORKS} multiple defaultValue={INITIAL_FRAMEWORKS}>\n        <ComboboxInputGroup>\n          <ComboboxChips className='relative'>\n            <ComboboxValue>\n              {(selected: Framework[]) => (\n                <>\n                  <AnimatePresence mode='popLayout' initial={false}>\n                    {selected.map((framework) => (\n                      <ComboboxChip\n                        key={framework.value}\n                        aria-label={framework.label}\n                        render={\n                          <motion.div\n                            layout={isLayoutAnimated}\n                            variants={chipVariants}\n                            initial='hidden'\n                            animate='shown'\n                            exit='gone'\n                            transition={CHIP_TRANSITION}\n                          />\n                        }\n                      >\n                        {framework.label}\n                        <ComboboxChipRemove\n                          aria-label={`Remove ${framework.label}`}\n                        />\n                      </ComboboxChip>\n                    ))}\n                  </AnimatePresence>\n                  <ComboboxInput placeholder={placeholderOf(selected)} />\n                </>\n              )}\n            </ComboboxValue>\n          </ComboboxChips>\n        </ComboboxInputGroup>\n        <ComboboxContent>\n          <ComboboxEmpty>No framework matches your search.</ComboboxEmpty>\n          <ComboboxList className='empty:hidden'>\n            {(framework: Framework) => (\n              <ComboboxItem\n                key={framework.value}\n                value={framework}\n                disabled={framework.disabled}\n              >\n                {framework.label}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Field>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "categories": [
    "components",
    "select"
  ],
  "type": "registry:component"
}