/** * @fileoverview Combobox primitive — searchable dropdown built on Radix Popover + cmdk. * Thin compositional wrapper: `Combobox` is `Popover.Root`, `ComboboxContent` mounts a * `cmdk` Command palette inside a `Popover.Content`. Consumers compose the trigger * (typically a Button) and items themselves; this gives a shadcn-style Combobox * without a separate runtime dependency on a higher-level combobox primitive. * * For multi-select-with-chips, compose `Combobox` with the `Badge` component and * a controlled value list — the chip pattern is intentionally not built in. * * @module packages/ui/components/ui/combobox * @layer core * * @component * @example * import { * Combobox, ComboboxTrigger, ComboboxContent, * ComboboxInput, ComboboxList, ComboboxItem, * } from "@saasflare/ui" * * * * * * * * * React * Vue * * * */ import * as React from "react"; import * as PopoverPrimitive from "@radix-ui/react-popover"; import { Command as CommandPrimitive } from "cmdk"; import { type SaasflareComponentProps } from "../../providers"; /** * Searchable dropdown root. Alias of Radix Popover.Root that owns the open * state; compose with {@link ComboboxTrigger} and {@link ComboboxContent} * for a shadcn-style combobox. * * @component * @layer core */ declare const Combobox: React.FC; /** * Element that toggles the combobox open. Alias of Radix Popover.Trigger — * use `asChild` to render a custom trigger such as a Button. * * @component * @layer core */ declare const ComboboxTrigger: React.ForwardRefExoticComponent>; /** Props for {@link ComboboxContent}. */ interface ComboboxContentProps extends Omit, keyof SaasflareComponentProps>, SaasflareComponentProps { } /** * Popover surface that mounts the `cmdk` command palette. This is the themeable * chrome of the combobox — honors `surface`/`radius`/`animated` overrides and * emits the matching data axes on its root for the design system to style. */ declare function ComboboxContent({ className, align, sideOffset, surface, radius, animated, iconWeight, children, ...props }: ComboboxContentProps): import("react/jsx-runtime").JSX.Element; /** Props for {@link ComboboxInput}. */ interface ComboboxInputProps extends Omit, "iconWeight">, Pick { } /** Search field for the combobox, with a leading magnifier whose Phosphor weight follows `iconWeight`. */ declare function ComboboxInput({ className, iconWeight, ...props }: ComboboxInputProps): import("react/jsx-runtime").JSX.Element; /** Scrollable list region that holds {@link ComboboxItem}s, groups, and the empty state. */ declare function ComboboxList({ className, ...props }: React.ComponentProps): import("react/jsx-runtime").JSX.Element; /** Selectable option row. Pass `selected` to render a trailing check indicator. */ declare function ComboboxItem({ className, children, selected, iconWeight, ...props }: Omit, "iconWeight"> & { /** Show a leading check indicator. Lets consumers render selection state without a separate Indicator slot. */ selected?: boolean; /** Icon weight override for the selection check indicator. Omit to inherit from provider. */ iconWeight?: SaasflareComponentProps["iconWeight"]; }): import("react/jsx-runtime").JSX.Element; /** Labeled section of items. Render a `[cmdk-group-heading]` child for the group title. */ declare function ComboboxGroup({ className, ...props }: React.ComponentProps): import("react/jsx-runtime").JSX.Element; /** Fallback shown when the current query matches no items. */ declare function ComboboxEmpty({ className, ...props }: React.ComponentProps): import("react/jsx-runtime").JSX.Element; /** Thin divider between groups or items inside the list. */ declare function ComboboxSeparator({ className, ...props }: React.ComponentProps): import("react/jsx-runtime").JSX.Element; export { Combobox, ComboboxTrigger, ComboboxContent, ComboboxInput, ComboboxList, ComboboxItem, ComboboxGroup, ComboboxEmpty, ComboboxSeparator, type ComboboxContentProps, type ComboboxInputProps, };