{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "autocomplete", "title": "Autocomplete", "description": "Suggestions cascade in under the field and one highlight glides between them as you type.", "dependencies": [ "@ui-sdk/core@0.1.0-beta.2", "@ui-sdk/react@0.1.0-beta.2" ], "registryDependencies": [ "@keyframery/motion" ], "files": [ { "path": "registry/components/keyframery/primitives/autocomplete.tsx", "content": "\"use client\"\n\n/* Animated drop-in for `@ui-sdk/react/autocomplete`: same parts, same props. Swap the import and keep your code.\n This file adds motion only. Colours, radii, shadows and spacing stay yours.\n\n - Content: Unfold from the field (scale 0.86, 6px blur, 8px toward the field, spring in, quick out).\n - Items: Cascade in one after another as the suggestions open.\n - List: Glide, one highlight that springs from row to row (CSS anchor positioning).\n - Clear button: pops in. Trigger and clear: Press. */\n\nimport {\n AutocompleteClear as AutocompleteClearPart,\n AutocompleteContent as AutocompleteContentPart,\n AutocompleteItem as AutocompleteItemPart,\n AutocompleteList as AutocompleteListPart,\n AutocompleteTrigger as AutocompleteTriggerPart,\n} from \"@ui-sdk/react/autocomplete\"\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport * from \"@ui-sdk/react/autocomplete\"\n\nconst press =\n \"transition-[scale,color,background-color,opacity] duration-[calc(200ms*var(--kf-speed,1))] ease-pop active:scale-[0.9] motion-reduce:transition-none!\"\n\nfunction AutocompleteContent({ className, ...props }: React.ComponentProps) {\n return (\n \n )\n}\n\n/* The list carries the highlight: a `::before` that follows whichever suggestion is highlighted.\n Its neutral surface follows the text colour; give `before:bg-…` in className to change it. */\nfunction AutocompleteList({ className, ...props }: React.ComponentProps) {\n return (\n \n )\n}\n\n/* Suggestions cascade while the content has its starting style, and anchor the highlight.\n Only opacity, translate and filter carry the delay, so hovering is never slowed. */\nfunction AutocompleteItem({ className, ...props }: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction AutocompleteTrigger({ className, ...props }: React.ComponentProps) {\n return (\n \n )\n}\n\n/* Only in the page while there is text, so it pops in from its starting style. */\nfunction AutocompleteClear({ className, ...props }: React.ComponentProps) {\n return (\n \n )\n}\n\nexport { AutocompleteClear, AutocompleteContent, AutocompleteItem, AutocompleteList, AutocompleteTrigger }\n", "type": "registry:component", "target": "components/keyframery/primitives/autocomplete.tsx" }, { "path": "registry/components/keyframery/autocomplete.tsx", "content": "\"use client\"\n\n/* Styled autocomplete: the animated primitive plus the Keyframery look. */\n\nimport {\n Autocomplete as AutocompleteRoot,\n AutocompleteArrow as AutocompleteArrowPart,\n AutocompleteClear as AutocompleteClearPart,\n AutocompleteContent as AutocompleteContentPart,\n AutocompleteEmpty as AutocompleteEmptyPart,\n AutocompleteGroup as AutocompleteGroupPart,\n AutocompleteGroupLabel as AutocompleteGroupLabelPart,\n AutocompleteInput as AutocompleteInputPart,\n AutocompleteItem as AutocompleteItemPart,\n AutocompleteItemIcon as AutocompleteItemIconPart,\n AutocompleteItemText as AutocompleteItemTextPart,\n AutocompleteLabel as AutocompleteLabelPart,\n AutocompleteList as AutocompleteListPart,\n AutocompleteSeparator as AutocompleteSeparatorPart,\n AutocompleteStatus as AutocompleteStatusPart,\n AutocompleteTrigger as AutocompleteTriggerPart,\n createAutocompleteController,\n type ListData,\n} from \"@/components/keyframery/primitives/autocomplete\"\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction ChevronIcon() {\n return (\n \n \n \n )\n}\n\nfunction XIcon() {\n return (\n \n \n \n )\n}\n\n/* Renders no element of its own. */\nfunction Autocomplete(props: React.ComponentProps) {\n return \n}\n\nfunction AutocompleteLabel({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\n/* The row that holds the input, with the clear button and the trigger laid over its right\n edge. A leading svg sits over its left edge. */\nfunction AutocompleteControl({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n svg]:pointer-events-none [&>svg]:absolute [&>svg]:top-2.5 [&>svg]:left-3 [&>svg]:size-4 [&>svg]:text-muted-foreground\",\n \"[&>svg]:transition-colors [&>svg]:duration-[calc(150ms*var(--kf-speed,1))] has-[input:focus-visible]:[&>svg]:text-foreground motion-reduce:[&>svg]:transition-none\",\n className,\n )}\n {...props}\n />\n )\n}\n\nfunction AutocompleteInput({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n svg]/control:pl-9\",\n \"group-has-[[data-slot=autocomplete-trigger]]/control:pr-9 group-has-[[data-slot=autocomplete-clear]]/control:pr-9\",\n \"group-has-[[data-slot=autocomplete-trigger]]/control:group-has-[[data-slot=autocomplete-clear]]/control:pr-16\",\n className,\n )}\n {...props}\n />\n )\n}\n\nconst controlButton =\n \"absolute top-1 grid size-7 cursor-pointer place-items-center rounded-[7px] text-muted-foreground outline-none hover:bg-foreground/[0.06] hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring data-disabled:pointer-events-none data-disabled:opacity-40 [&_svg]:size-4\"\n\nfunction AutocompleteTrigger({\n className,\n children,\n ...props\n}: React.ComponentProps) {\n return (\n \n {children ?? }\n \n )\n}\n\n/* Only in the page while there is text, so it enters from its starting style. */\nfunction AutocompleteClear({\n className,\n children,\n ...props\n}: React.ComponentProps) {\n return (\n \n {children ?? }\n \n )\n}\n\nfunction AutocompleteContent({\n className,\n children,\n sideOffset = 6,\n ...props\n}: React.ComponentProps) {\n return (\n \n {children ?? }\n \n )\n}\n\nfunction AutocompleteArrow({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction AutocompleteList({\n className,\n children,\n ...props\n}: React.ComponentProps) {\n return (\n \n {children ?? ((state) => } />)}\n \n )\n}\n\nfunction AutocompleteItem({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\n/* The matched part of the suggestion reads stronger; the rest steps back slightly. */\nfunction AutocompleteItemText({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction AutocompleteItemIcon({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction AutocompleteGroup({\n className,\n ...props\n}: React.ComponentProps) {\n return \n}\n\nfunction AutocompleteGroupLabel({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction AutocompleteSeparator({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction AutocompleteEmpty({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction AutocompleteStatus({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\n/* Renders suggestions passed as data with the styled parts above. */\nfunction AutocompleteItems({ items }: { items?: ListData }) {\n return (items ?? []).map((entry, index) => {\n if (typeof entry === \"string\") {\n return (\n \n \n \n )\n }\n if (\"type\" in entry && entry.type === \"separator\") {\n return \n }\n if (\"type\" in entry && entry.type === \"group\") {\n return (\n \n {entry.label && {entry.label}}\n \n \n )\n }\n const { value, label, disabled, keywords } = entry\n return (\n \n \n \n )\n })\n}\n\nexport {\n Autocomplete,\n AutocompleteArrow,\n AutocompleteClear,\n AutocompleteContent,\n AutocompleteControl,\n AutocompleteEmpty,\n AutocompleteGroup,\n AutocompleteGroupLabel,\n AutocompleteInput,\n AutocompleteItem,\n AutocompleteItemIcon,\n AutocompleteItems,\n AutocompleteItemText,\n AutocompleteLabel,\n AutocompleteList,\n AutocompleteSeparator,\n AutocompleteStatus,\n AutocompleteTrigger,\n createAutocompleteController,\n}\n", "type": "registry:component", "target": "components/keyframery/autocomplete.tsx" } ], "type": "registry:component" }