"use client"; import { Combobox as ComboboxPrimitive } from "@base-ui/react/combobox"; import { ChevronsUpDownIcon, XIcon } from "lucide-react"; import * as React from "react"; import { cn } from "@/registry/default/lib/utils"; import { Input } from "@/registry/default/ui/input"; import { ScrollArea } from "@/registry/default/ui/scroll-area"; export const ComboboxContext: React.Context<{ chipsRef: React.RefObject | null; multiple: boolean; }> = React.createContext<{ chipsRef: React.RefObject | null; multiple: boolean; }>({ chipsRef: null, multiple: false, }); export function Combobox( props: ComboboxPrimitive.Root.Props, ): React.ReactElement { const chipsRef = React.useRef(null); return ( ); } export function ComboboxChipsInput({ className, size, ...props }: Omit & { size?: "sm" | "default" | "lg" | number; ref?: React.Ref; }): React.ReactElement { const sizeValue = (size ?? "default") as "sm" | "default" | "lg" | number; return ( ); } export function ComboboxInput({ className, showTrigger = true, showClear = false, startAddon, size, triggerProps, clearProps, ...props }: Omit & { showTrigger?: boolean; showClear?: boolean; startAddon?: React.ReactNode; size?: "sm" | "default" | "lg" | number; ref?: React.Ref; triggerProps?: ComboboxPrimitive.Trigger.Props; clearProps?: ComboboxPrimitive.Clear.Props; }): React.ReactElement { const sizeValue = (size ?? "default") as "sm" | "default" | "lg" | number; return ( {startAddon && ( )} } {...props} /> {showTrigger && ( )} {showClear && ( )} ); } export function ComboboxTrigger({ className, children, ...props }: ComboboxPrimitive.Trigger.Props): React.ReactElement { return ( {children} ); } export function ComboboxPopup({ className, children, side = "bottom", sideOffset = 4, alignOffset, align = "start", anchor: anchorProp, portalProps, ...props }: ComboboxPrimitive.Popup.Props & { align?: ComboboxPrimitive.Positioner.Props["align"]; sideOffset?: ComboboxPrimitive.Positioner.Props["sideOffset"]; alignOffset?: ComboboxPrimitive.Positioner.Props["alignOffset"]; side?: ComboboxPrimitive.Positioner.Props["side"]; anchor?: ComboboxPrimitive.Positioner.Props["anchor"]; portalProps?: ComboboxPrimitive.Portal.Props; }): React.ReactElement { const { chipsRef } = React.useContext(ComboboxContext); const anchor = anchorProp ?? chipsRef; return ( {children} ); } export function ComboboxItem({ className, children, ...props }: ComboboxPrimitive.Item.Props): React.ReactElement { return (

{children}

); } export function ComboboxSeparator({ className, ...props }: ComboboxPrimitive.Separator.Props): React.ReactElement { return ( ); } export function ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group.Props): React.ReactElement { return ( ); } export function ComboboxGroupLabel({ className, ...props }: ComboboxPrimitive.GroupLabel.Props): React.ReactElement { return ( ); } export function ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props): React.ReactElement { return ( ); } export function ComboboxRow({ className, ...props }: ComboboxPrimitive.Row.Props): React.ReactElement { return ( ); } export function ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props): React.ReactElement { return ; } export function ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props): React.ReactElement { return ( ); } export function ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props): React.ReactElement { return ( ); } export function ComboboxStatus({ className, ...props }: ComboboxPrimitive.Status.Props): React.ReactElement { return ( ); } export function ComboboxCollection( props: ComboboxPrimitive.Collection.Props, ): React.ReactElement { return ( ); } export function ComboboxChips({ className, children, startAddon, ...props }: ComboboxPrimitive.Chips.Props & { startAddon?: React.ReactNode; }): React.ReactElement { const { chipsRef } = React.useContext(ComboboxContext); return ( | null} {...props} > {startAddon && ( )} {children} ); } export function ComboboxChip({ children, removeProps, ...props }: ComboboxPrimitive.Chip.Props & { removeProps?: ComboboxPrimitive.ChipRemove.Props; }): React.ReactElement { return ( {children} ); } export function ComboboxChipRemove( props: ComboboxPrimitive.ChipRemove.Props, ): React.ReactElement { return ( ); } export const useComboboxFilter: typeof ComboboxPrimitive.useFilter = ComboboxPrimitive.useFilter; export { ComboboxPrimitive };

Combobox

Instalação

Dependências

Registry dependencies