@codapet/design-system 0.8.6 → 0.8.8

package/AGENTS.md

@@ -103,8 +103,11 @@ These are the foot-guns. Knowing them prevents most "why does my Button look wro
 ### Accordion
 
 - Adds a `variant` prop on `<Accordion>`: `default` (shadcn-equivalent, bottom-stripe items) or `outlined` (each item is its own bordered card with taller trigger and roomier padding). Reach for `variant="outlined"` on FAQ sections, settings panels, or any "stacked cards" pattern.
-- Variant propagates to children via context — set it once on the root, not on every `AccordionItem`/`Trigger`/`Content`.
-- Plus/Minus (or any custom) icons are opt-in via `collapsedIcon`/`expandedIcon` on `AccordionTrigger`. The default remains a rotating `ChevronDown`.
+- Variant propagates to children via context — set it once on the root, not on every `AccordionItem`/`AccordionTrigger`/`AccordionContent`.
+- `outlined` cards warm their border to `primary-stroke-default` on pointer hover, and their `AccordionContent` fades while it grows (250ms, soft ease). The `default` variant keeps the shadcn height-only motion. Both respect `prefers-reduced-motion`.
+- `staggerReveal` on `<Accordion>` fades-and-rises every item in on mount, 80ms apart. Items only stagger if you pass `revealIndex={i}` to each `AccordionItem` — without it they all arrive together.
+- Icons on `AccordionTrigger`: the default is a rotating `ChevronDown`; `icon="plus-minus"` switches to a two-bar + that morphs into a −; `iconClassName` resizes or recolours either built-in icon. `collapsedIcon`/`expandedIcon` still take any React node and win over `icon`. In the `outlined` variant a collapsed/expanded pair cross-rotates instead of hard-swapping.
+- For a plain question/answer list, don't assemble these by hand — use `FaqAccordion` (see the components table).
 
 ### Dialog vs SmartDialog
 
@@ -152,6 +155,7 @@ These don't exist in shadcn — reach for them instead of building your own:
 | `AutoResizeTextarea` | Textarea that grows with content; `maxHeight` enables scroll. Handles RHF `setValue`/`reset` correctly. |
 | `ProgressBar` | Step-based bar; pass `currentStep` + `totalSteps`, or `value` (0–100) directly. |
 | `SmartDialog*` | Responsive Dialog↔Drawer (see above). |
+| `FaqAccordion` | Data-driven FAQ list: pass `faqs` (`{ question, answer }[]`) and get the outlined Accordion with one item open at a time, a +/− morph icon, fade-while-growing answers and optional `staggerReveal`. `defaultOpenQuestion` opens a question on mount and re-opens whenever it changes. `questionClassName` / `answerClassName` / `itemClassName` restyle each slot. A string `answer` renders as a paragraph; pass a node for rich text. Prefer it over hand-assembling `Accordion*` for any question/answer array. |
 | `Typography`: `DisplayHeading`, `HeadingXL` … `HeadingXXS` (+ `*Medium` variants), `Body` | Use these instead of raw `<h1>`/`<p>` to inherit the right tokens (`font-serif italic` for display, `text-vibrant-text-heading` for headings, `text-vibrant-text-body` for body). Sizes are responsive (md: breakpoint baked in). |
 | `ThemeToggle` | Drop-in light/dark toggle. |
 
@@ -344,7 +348,8 @@ rather than reimplementing the classes: `buttonVariants`, `badgeVariants`,
 `progressBarVariants`, `tabsTriggerVariants`, `toggleVariants`,
 `bodyTextVariants`, `displayTextVariants`, `navigationMenuTriggerStyle`.
 
-**Exported types** — import with `import type`: `InputProps`, `TextareaProps`,
+**Exported types** — import with `import type`: `AccordionProps`, `AccordionItemProps`,
+`AccordionTriggerProps`, `FaqAccordionProps`, `FaqItem`, `InputProps`, `TextareaProps`,
 `SearchInputProps`, `SearchSuggestion`, `AlertBannerProps`,
 `BadgeActionableProps`, `BadgeInformativeProps`, `BadgeNumberProps`,
 `OptionCardProps`, `ProgressBarProps`, `TabsTriggerProps`, `TooltipContentProps`,
@@ -369,6 +374,8 @@ There are no other public exports, and no subpath imports: only
 - **Wrong default Button look** → you forgot `variant="primary"`/`size="md"` are not the same as shadcn's defaults; passing nothing gives you `primary` + `lg`.
 - **Toast looks generic** → you imported `toast` from `'sonner'` instead of from `@codapet/design-system`.
 - **Modal doesn't bottom-sheet on mobile** → you used `Dialog` instead of `SmartDialog`.
+- **`AsyncAutocomplete` keeps stale results while refetching** → `loading` only replaces the list when there is nothing else to show. Once results are visible, a further keystroke leaves them in place and marks the listbox `aria-busy` plus `data-busy`, so the panel does not flash back to the spinner on every character. Style the refresh with `classNames={{ listbox: 'data-[busy=true]:opacity-60' }}` if you want visible feedback.
+- **`AsyncAutocomplete` warns about a missing accessible name** → a combobox must be named, and a `placeholder` does not name one (ARIA practices are explicit about this). Pass `label` for a visible label — it renders a real `<label htmlFor>`, unlike `SearchInput`/`MultiSelectFreeText`, whose `label` prop is a styled `<div>` and is *not* programmatically associated — or pass `inputProps={{ 'aria-label': '…' }}` when the design has no visible label. `mandatory` sets `aria-required` and hides the asterisk from assistive tech.
 - **`AsyncAutocomplete` fires a request per keystroke** → it deliberately does not debounce. Debounce in your fetch layer (`usePlacesService({ debounce: 300 })`, your own hook) so cancellation and out-of-order responses stay with the code that owns them.
 - **`AsyncAutocomplete` shows results that don't match what you typed** → it renders `options` verbatim by design, because the server already filtered. If your list is static, use `SearchableSelect`/`DropdownSelect`, which filter client-side.
 - **Styling `AsyncAutocomplete`** → it does **not** follow the flat `*ClassName` convention that `DateInput`/`TimeInput` use, because it has twenty-odd stylable slots. `className` is the root wrapper; everything else lives in one `classNames` object: `field`, `input`, `leftIcon`, `clearButton`, `content`, `listbox`, `option`, `optionHighlighted`, `optionDisabled`, `optionIcon`, `optionLabel`, `optionDescription`, `loading`, `loadingSpinner`, `empty`, plus `sheetOverlay`, `sheetContent`, `sheetHeader`, `sheetCloseButton`, `sheetInput`, `sheetList`. All merge through `cn`, so `{ content: 'max-h-[420px]' }` replaces the built-in max-height rather than stacking with it. A single row can also carry its own `className` via the option object, and rows expose `data-highlighted` / `data-disabled` for parent-level selectors. Use `renderOption` to change row *structure*, `classNames` to change its *look*.

package/dist/index.d.mts

@@ -45,14 +45,34 @@ import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
 import { ClassValue } from 'clsx';
 
 type AccordionVariant = 'default' | 'outlined';
-declare function Accordion({ variant, className, ...props }: React$1.ComponentProps<typeof AccordionPrimitive.Root> & {
+type AccordionProps = React$1.ComponentProps<typeof AccordionPrimitive.Root> & {
     variant?: AccordionVariant;
-}): react_jsx_runtime.JSX.Element;
-declare function AccordionItem({ className, ...props }: React$1.ComponentProps<typeof AccordionPrimitive.Item>): react_jsx_runtime.JSX.Element;
-declare function AccordionTrigger({ className, children, expandedIcon, collapsedIcon, ...props }: React$1.ComponentProps<typeof AccordionPrimitive.Trigger> & {
+    /**
+     * Fade-and-rise every item in on mount. Give each `AccordionItem` a
+     * `revealIndex` so they land 80ms apart; without it they arrive together.
+     * Skipped entirely under `prefers-reduced-motion`.
+     */
+    staggerReveal?: boolean;
+};
+declare function Accordion({ variant, staggerReveal, className, ...props }: AccordionProps): react_jsx_runtime.JSX.Element;
+type AccordionItemProps = React$1.ComponentProps<typeof AccordionPrimitive.Item> & {
+    /** Position in the list; sets this item's delay when the root has `staggerReveal`. */
+    revealIndex?: number;
+};
+declare function AccordionItem({ className, style, revealIndex, ...props }: AccordionItemProps): react_jsx_runtime.JSX.Element;
+type AccordionTriggerIcon = 'chevron' | 'plus-minus';
+type AccordionTriggerProps = React$1.ComponentProps<typeof AccordionPrimitive.Trigger> & {
     expandedIcon?: React$1.ReactNode;
     collapsedIcon?: React$1.ReactNode;
-}): react_jsx_runtime.JSX.Element;
+    /**
+     * Built-in indicator, used when no custom icons are given. `chevron`
+     * rotates; `plus-minus` morphs a + into a − as the item opens.
+     */
+    icon?: AccordionTriggerIcon;
+    /** Merged onto the built-in indicator to resize or recolour it. */
+    iconClassName?: string;
+};
+declare function AccordionTrigger({ className, children, expandedIcon, collapsedIcon, icon, iconClassName, ...props }: AccordionTriggerProps): react_jsx_runtime.JSX.Element;
 declare function AccordionContent({ className, children, ...props }: React$1.ComponentProps<typeof AccordionPrimitive.Content>): react_jsx_runtime.JSX.Element;
 
 declare const alertVariants: (props?: ({
@@ -140,6 +160,8 @@ type AsyncAutocompleteInputProps = Omit<React$1.ComponentPropsWithoutRef<'input'
 interface AsyncAutocompleteClassNames {
     /** Wrapper around the input — also the popover's anchor. */
     field?: string;
+    /** The visible label element. */
+    label?: string;
     /** The text input itself. */
     input?: string;
     /** Left icon wrapper inside the input. */
@@ -202,7 +224,14 @@ interface AsyncAutocompleteProps<TData = unknown> {
      * `formatted_address`) or clear the field. Drive `value` yourself.
      */
     onSelect: (option: AsyncAutocompleteOption<TData>) => void;
-    /** In-flight request. Replaces the rows with a spinner. */
+    /**
+     * A request is in flight.
+     *
+     * The spinner row only replaces the list when there is nothing else to show.
+     * If results are already on screen they stay put and the listbox is marked
+     * `aria-busy` / `data-busy` instead — so typing another character does not
+     * flash the panel back to "Searching…".
+     */
     loading?: boolean;
     /** Controlled input text. */
     value?: string;
@@ -217,6 +246,17 @@ interface AsyncAutocompleteProps<TData = unknown> {
      */
     onClear?: () => void;
     placeholder?: string;
+    /**
+     * Visible label, rendered above the field and wired to it with `htmlFor`.
+     *
+     * A combobox **must** have an accessible name — the ARIA practices are
+     * explicit that a placeholder is not one. Provide either this, or an
+     * `aria-label`/`aria-labelledby` through `inputProps`. In development the
+     * component warns when neither is present.
+     */
+    label?: string;
+    /** Appends a red asterisk to `label`. */
+    mandatory?: boolean;
     /** Decorative leading icon — `<MapPin />`, `<Stethoscope />`, … */
     leftIcon?: React$1.ReactNode;
     /** Fixed height: `sm` 40px · `md` 48px (default) · `lg` 56px. */
@@ -241,6 +281,10 @@ interface AsyncAutocompleteProps<TData = unknown> {
      * for stacked two-line rows, avatars, or bold match highlighting — the
      * wrapper, `role="option"`, ids, highlight background and click/keyboard
      * wiring stay with the component.
+     *
+     * Keep the content non-interactive: it renders inside `role="option"`, and a
+     * nested button or link there is both invalid and unreachable by keyboard,
+     * since the row is driven by `aria-activedescendant` rather than focus.
      */
     renderOption?: (option: AsyncAutocompleteOption<TData>, state: AsyncAutocompleteOptionState) => React$1.ReactNode;
     /** Default leading icon for rows without their own `option.icon`. */
@@ -280,7 +324,7 @@ interface AsyncAutocompleteProps<TData = unknown> {
     /** Per-slot class overrides. See `AsyncAutocompleteClassNames`. */
     classNames?: AsyncAutocompleteClassNames;
 }
-declare function AsyncAutocomplete<TData = unknown>({ options, onSearch, onSelect, loading, value: valueProp, defaultValue, onValueChange, onClear, placeholder, leftIcon, size, error, disabled, inputRef, inputProps, mobileVariant, renderOption, optionIcon, emptyMessage, emptyState, loadingMessage, clearIcon, clearLabel, sheetTitle, sheetCloseIcon, sheetCloseLabel, open: openProp, defaultOpen, onOpenChange, idPrefix, className, classNames }: AsyncAutocompleteProps<TData>): react_jsx_runtime.JSX.Element;
+declare function AsyncAutocomplete<TData = unknown>({ options, onSearch, onSelect, loading, value: valueProp, defaultValue, onValueChange, onClear, placeholder, label, mandatory, leftIcon, size, error, disabled, inputRef, inputProps, mobileVariant, renderOption, optionIcon, emptyMessage, emptyState, loadingMessage, clearIcon, clearLabel, sheetTitle, sheetCloseIcon, sheetCloseLabel, open: openProp, defaultOpen, onOpenChange, idPrefix, className, classNames }: AsyncAutocompleteProps<TData>): react_jsx_runtime.JSX.Element;
 
 interface TextareaProps extends Omit<React$1.ComponentProps<'textarea'>, 'size'> {
     error?: boolean;
@@ -647,6 +691,33 @@ interface DropdownSelectOptionProps extends React$1.ComponentProps<'div'> {
 }
 declare function DropdownSelectOption({ className, value: optionValue, label, disabled: optionDisabled, children, ...props }: DropdownSelectOptionProps): react_jsx_runtime.JSX.Element;
 
+interface FaqItem {
+    question: string;
+    /** A plain string renders as one paragraph; pass a node for rich text. */
+    answer: React$1.ReactNode;
+}
+interface FaqAccordionProps {
+    faqs: FaqItem[];
+    className?: string;
+    /** Fade-and-rise the questions in on mount, 80ms apart. */
+    staggerReveal?: boolean;
+    /** Question text to open on mount, and again whenever this value changes. */
+    defaultOpenQuestion?: string;
+    /** Merged onto every question label. */
+    questionClassName?: string;
+    /** Merged onto every answer body. */
+    answerClassName?: string;
+    /** Merged onto every item card. */
+    itemClassName?: string;
+}
+/**
+ * Data-driven FAQ list on the outlined Accordion: one question open at a
+ * time, a + that morphs into a −, and a fade-while-growing answer. Reach for
+ * this over hand-assembling `Accordion*` whenever the content is a plain
+ * question/answer array.
+ */
+declare function FaqAccordion({ faqs, className, staggerReveal, defaultOpenQuestion, questionClassName, answerClassName, itemClassName }: FaqAccordionProps): react_jsx_runtime.JSX.Element;
+
 declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues = TFieldValues>(props: react_hook_form.FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React$1.JSX.Element;
 declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ ...props }: ControllerProps<TFieldValues, TName>) => react_jsx_runtime.JSX.Element;
 declare const useFormField: () => {
@@ -1154,4 +1225,4 @@ declare function cn(...inputs: ClassValue[]): string;
 
 declare function useIsMobile(): boolean;
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertBanner, type AlertBannerProps, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AspectRatio, AsyncAutocomplete, type AsyncAutocompleteClassNames, type AsyncAutocompleteInputProps, type AsyncAutocompleteOption, type AsyncAutocompleteOptionState, type AsyncAutocompleteProps, AutoResizeTextarea, Avatar, AvatarFallback, AvatarImage, Badge, BadgeActionable, type BadgeActionableProps, BadgeInformative, BadgeInformativeGroup, BadgeInformativeItem, type BadgeInformativeProps, BadgeNumber, type BadgeNumberProps, Body, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Calendar, CalendarDayButton, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, type DateFormat, DateInput, type DateInputProps, DateRangeInput, type DateRangeInputProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DisplayHeading, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, DropdownSelect, DropdownSelectContent, type DropdownSelectContentProps, DropdownSelectLabel, type DropdownSelectLabelProps, DropdownSelectOption, type DropdownSelectOptionProps, type DropdownSelectProps, DropdownSelectTrigger, type DropdownSelectTriggerProps, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, HeadingL, HeadingLMedium, HeadingM, HeadingMMedium, HeadingS, HeadingSMedium, HeadingXL, HeadingXLMedium, HeadingXS, HeadingXSMedium, HeadingXXS, HeadingXXSMedium, HoverCard, HoverCardContent, HoverCardTrigger, Input, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, type InputProps, Label, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, MultiSelectFreeText, type MultiSelectFreeTextOption, type MultiSelectFreeTextProps, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, OptionCard, type OptionCardProps, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, ProgressBar, type ProgressBarProps, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, RichTooltipContent, type RichTooltipContentProps, type RichTooltipVariant, ScrollArea, ScrollBar, SearchInput, type SearchInputProps, type SearchSuggestion, SearchableSelect, SearchableSelectContent, SearchableSelectEmpty, SearchableSelectGroup, SearchableSelectItem, type SearchableSelectOption, type SearchableSelectProps, SearchableSelectTrigger, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slider, SmartDialog, SmartDialogClose, SmartDialogContent, SmartDialogDescription, SmartDialogFooter, SmartDialogHeader, SmartDialogTitle, SmartDialogTrigger, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, type TabsTriggerProps, Textarea, type TextareaProps, ThemeProvider, ThemeToggle, type TimeFormat, TimeInput, type TimeInputProps, type TimeValue, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, type TooltipContentProps, TooltipProvider, TooltipTrigger, alertBannerVariants, badgeActionableVariants, badgeInformativeVariants, badgeNumberVariants, badgeVariants, bodyTextVariants, buttonVariants, cn, displayTextVariants, inputVariants, labelTextVariants, navigationMenuTriggerStyle, optionCardVariants, progressBarVariants, tabsTriggerVariants, toggleVariants, useFormField, useIsMobile, useSidebar };
+export { Accordion, AccordionContent, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, Alert, AlertBanner, type AlertBannerProps, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AspectRatio, AsyncAutocomplete, type AsyncAutocompleteClassNames, type AsyncAutocompleteInputProps, type AsyncAutocompleteOption, type AsyncAutocompleteOptionState, type AsyncAutocompleteProps, AutoResizeTextarea, Avatar, AvatarFallback, AvatarImage, Badge, BadgeActionable, type BadgeActionableProps, BadgeInformative, BadgeInformativeGroup, BadgeInformativeItem, type BadgeInformativeProps, BadgeNumber, type BadgeNumberProps, Body, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Calendar, CalendarDayButton, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, type DateFormat, DateInput, type DateInputProps, DateRangeInput, type DateRangeInputProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DisplayHeading, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, DropdownSelect, DropdownSelectContent, type DropdownSelectContentProps, DropdownSelectLabel, type DropdownSelectLabelProps, DropdownSelectOption, type DropdownSelectOptionProps, type DropdownSelectProps, DropdownSelectTrigger, type DropdownSelectTriggerProps, FaqAccordion, type FaqAccordionProps, type FaqItem, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, HeadingL, HeadingLMedium, HeadingM, HeadingMMedium, HeadingS, HeadingSMedium, HeadingXL, HeadingXLMedium, HeadingXS, HeadingXSMedium, HeadingXXS, HeadingXXSMedium, HoverCard, HoverCardContent, HoverCardTrigger, Input, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, type InputProps, Label, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, MultiSelectFreeText, type MultiSelectFreeTextOption, type MultiSelectFreeTextProps, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, OptionCard, type OptionCardProps, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, ProgressBar, type ProgressBarProps, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, RichTooltipContent, type RichTooltipContentProps, type RichTooltipVariant, ScrollArea, ScrollBar, SearchInput, type SearchInputProps, type SearchSuggestion, SearchableSelect, SearchableSelectContent, SearchableSelectEmpty, SearchableSelectGroup, SearchableSelectItem, type SearchableSelectOption, type SearchableSelectProps, SearchableSelectTrigger, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slider, SmartDialog, SmartDialogClose, SmartDialogContent, SmartDialogDescription, SmartDialogFooter, SmartDialogHeader, SmartDialogTitle, SmartDialogTrigger, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, type TabsTriggerProps, Textarea, type TextareaProps, ThemeProvider, ThemeToggle, type TimeFormat, TimeInput, type TimeInputProps, type TimeValue, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, type TooltipContentProps, TooltipProvider, TooltipTrigger, alertBannerVariants, badgeActionableVariants, badgeInformativeVariants, badgeNumberVariants, badgeVariants, bodyTextVariants, buttonVariants, cn, displayTextVariants, inputVariants, labelTextVariants, navigationMenuTriggerStyle, optionCardVariants, progressBarVariants, tabsTriggerVariants, toggleVariants, useFormField, useIsMobile, useSidebar };