{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "select-47",
  "title": "Multiselect with clear",
  "description": "Chips in the field and one button that removes them all.",
  "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-47.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  ComboboxClear,\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};\n\nconst FRAMEWORKS: Framework[] = [\n  { value: 'nextjs', label: 'Next.js' },\n  { value: 'sveltekit', label: 'SvelteKit' },\n  { value: 'nuxt', label: 'Nuxt' },\n  { value: 'remix', label: 'Remix' },\n  { value: 'astro', label: 'Astro' },\n  { value: 'angular', label: 'Angular' },\n  { value: 'vue', label: 'Vue.js' },\n  { value: 'react', label: 'React' },\n  { value: 'ember', label: 'Ember.js' },\n  { value: 'gatsby', label: 'Gatsby' },\n  { value: 'eleventy', label: 'Eleventy' },\n  { value: 'solid', label: 'SolidJS' },\n  { value: 'preact', label: 'Preact' },\n  { value: 'qwik', label: 'Qwik' },\n  { value: 'alpine', label: 'Alpine.js' },\n  { value: 'lit', label: 'Lit' },\n];\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\nexport default function Select47() {\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>\n        <ComboboxInputGroup>\n          <ComboboxChips className='relative flex-1'>\n            <ComboboxValue>\n              {(selected: Framework[]) => (\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              )}\n            </ComboboxValue>\n            <ComboboxInput placeholder='Select frameworks' />\n          </ComboboxChips>\n          <ComboboxClear label='Clear all frameworks' className='self-start' />\n        </ComboboxInputGroup>\n        <ComboboxContent>\n          <ComboboxEmpty>No framework matches your search.</ComboboxEmpty>\n          <ComboboxList className='empty:hidden'>\n            {(framework: Framework) => (\n              <ComboboxItem key={framework.value} value={framework}>\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"
}