{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "select", "title": "Select", "description": "Dropdown for one choice from a list, with a placeholder, groups, a check on the chosen row and full keyboard support.", "dependencies": [ "radix-ui", "lucide-react", "motion" ], "registryDependencies": [ "utils", "https://miseui.junsu4621.workers.dev/r/motion.json" ], "files": [ { "path": "registry/miseui/ui/select.tsx", "content": "import type * as React from \"react\"\nimport { Select as SelectPrimitive } from \"radix-ui\"\nimport { Check, ChevronDown, ChevronUp } from \"lucide-react\"\nimport { cn } from \"@/registry/miseui/lib/utils\"\nimport {\n SELECT_MATERIALIZE_CLASS,\n SELECT_SPRING_CONTENT_CLASS,\n SELECT_SPRING_ITEM_CLASS,\n SelectHighlight,\n SelectSpringScope,\n useSelectItemHighlight,\n type SelectEffect,\n} from \"@/registry/miseui/ui/select-effects\"\n\nconst PLAIN_MOTION_CLASS = [\n \"duration-(--duration-fast) ease-(--ease-mise)\",\n \"data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95\",\n \"data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95\",\n \"data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2\",\n \"data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n]\n\nfunction Select({ ...props }: React.ComponentProps) {\n return \n}\n\nfunction SelectGroup({ ...props }: React.ComponentProps) {\n return \n}\n\nfunction SelectValue({ ...props }: React.ComponentProps) {\n return \n}\n\ntype SelectTriggerProps = React.ComponentProps & {\n size?: \"sm\" | \"default\"\n}\n\nfunction SelectTrigger({ className, size = \"default\", children, ...props }: SelectTriggerProps) {\n return (\n \n {children}\n \n \n \n \n )\n}\n\nfunction SelectScrollUpButton({ className, ...props }: React.ComponentProps) {\n return (\n \n \n \n )\n}\n\nfunction SelectScrollDownButton({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n )\n}\n\ntype SelectContentProps = React.ComponentProps & {\n /** `materialize` grows the list out of the trigger; `spring` slides one highlight between the rows. */\n effect?: SelectEffect\n}\n\nfunction SelectContent({ className, children, position = \"popper\", effect, ...props }: SelectContentProps) {\n return (\n \n \n \n \n \n {children}\n \n \n \n \n \n )\n}\n\nfunction SelectLabel({ className, ...props }: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction SelectItem({\n className,\n children,\n onFocus,\n onBlur,\n ...props\n}: React.ComponentProps) {\n const highlight = useSelectItemHighlight({ onFocus, onBlur })\n return (\n \n {highlight.highlighted ? : null}\n \n \n \n \n \n {children}\n \n )\n}\n\nfunction SelectSeparator({ className, ...props }: React.ComponentProps) {\n return (\n \n )\n}\n\nexport {\n Select,\n SelectTrigger,\n SelectValue,\n SelectContent,\n SelectItem,\n SelectGroup,\n SelectLabel,\n SelectSeparator,\n type SelectTriggerProps,\n type SelectContentProps,\n type SelectEffect,\n}\n", "type": "registry:ui" }, { "path": "registry/miseui/ui/select-effects.tsx", "content": "import type * as React from \"react\"\nimport { createContext, useContext, useId, useMemo, useState } from \"react\"\nimport { LayoutGroup, motion, useReducedMotion } from \"motion/react\"\nimport { SPRING_DEFAULT } from \"@/registry/miseui/lib/motion\"\n\ntype SelectEffect = \"materialize\" | \"spring\"\n\n/** The enter and exit values stay unqualified so the media overrides below win on source order. */\nconst SELECT_MATERIALIZE_CLASS = [\n \"duration-(--duration-base) ease-(--ease-mise-out) will-change-[transform,opacity,filter]\",\n \"data-[state=open]:animate-in data-[state=closed]:animate-out\",\n \"fade-in-0 zoom-in-90 blur-in-sm fade-out-0 zoom-out-90 blur-out-sm\",\n \"motion-reduce:zoom-in-100 motion-reduce:zoom-out-100 motion-reduce:blur-in-0 motion-reduce:blur-out-0\",\n \"[@media(prefers-reduced-transparency:reduce)]:blur-in-0 [@media(prefers-reduced-transparency:reduce)]:blur-out-0\",\n]\n\n/** One stacking context for the list keeps a flying highlight behind every label, not just its own. */\nconst SELECT_SPRING_CONTENT_CLASS = \"isolate\"\nconst SELECT_SPRING_ITEM_CLASS = \"focus:bg-transparent focus:text-foreground\"\n\nconst SelectSpringContext = createContext<{ reduceMotion: boolean } | null>(null)\n\nfunction SelectSpringScope({ enabled, children }: { enabled: boolean; children: React.ReactNode }) {\n // layoutId is global to the page; without a per-instance group two open lists would share one highlight.\n const groupId = useId()\n const reduceMotion = useReducedMotion() ?? false\n const value = useMemo(() => ({ reduceMotion }), [reduceMotion])\n if (!enabled) return children\n return (\n \n {children}\n \n )\n}\n\ninterface FocusHandlers {\n onFocus?: React.FocusEventHandler\n onBlur?: React.FocusEventHandler\n}\n\n/** Radix highlights an item by focusing it, for the keyboard and the pointer alike, so focus is the one signal needed. */\nfunction useSelectItemHighlight({ onFocus, onBlur }: FocusHandlers) {\n const scope = useContext(SelectSpringContext)\n const [focused, setFocused] = useState(false)\n if (!scope) return { spring: false, highlighted: false, reduceMotion: false, onFocus, onBlur }\n return {\n spring: true,\n highlighted: focused,\n reduceMotion: scope.reduceMotion,\n onFocus: (event: React.FocusEvent) => {\n onFocus?.(event)\n setFocused(true)\n },\n onBlur: (event: React.FocusEvent) => {\n onBlur?.(event)\n setFocused(false)\n },\n }\n}\n\nfunction SelectHighlight({ reduceMotion }: { reduceMotion: boolean }) {\n return (\n \n )\n}\n\nexport {\n SELECT_MATERIALIZE_CLASS,\n SELECT_SPRING_CONTENT_CLASS,\n SELECT_SPRING_ITEM_CLASS,\n SelectHighlight,\n SelectSpringScope,\n useSelectItemHighlight,\n type SelectEffect,\n}\n", "type": "registry:ui" } ], "categories": [ "forms" ], "type": "registry:ui" }