@astherix/ui 0.40.0 → 0.41.0

package/README.md

@@ -13,13 +13,18 @@ packages/ui/
   src/components/button/ Button
   src/components/card/   Card, ChoiceCard
   src/components/editor/ Editor (entry: @astherix/ui/editor)
-  src/components/input/  Field, Input, Textarea
+  src/components/input/  Field, Input, Textarea, OtpInput
   src/components/menu/   DropdownMenu, SplitButton
   src/components/modal/  Modal
+  src/components/drawer/ Drawer
   src/components/pill/   Pill, PillGroup, PillOption
   src/components/choice/ Checkbox, CheckboxGroup, RadioGroup, Radio, Switch
   src/components/select/ Select
   src/components/sidebar/ SidebarProvider, Sidebar, SidebarNav, SidebarTrigger …
+  src/components/navigation/ NavigationMenu
+  src/components/breadcrumbs/ Breadcrumbs
+  src/components/tooltip/ Tooltip
+  src/components/placeholder/ Placeholder
   src/components/table/  DataTable
   src/components/tabs/   Tabs
   src/components/timeline/ Timeline, Roadmap
@@ -381,6 +386,24 @@ controls can read it with `useField()`.
 `maxRows`, `showCount` (with `maxLength` shows "12 / 280"), `resize` (`vertical` `none`),
 `frameClassName`.
 
+## One-time code (OtpInput)
+
+```tsx
+<Field label="Authentication code" error={errors.code}>
+  <OtpInput value={code} onValueChange={setCode} onComplete={verify} />
+</Field>
+
+<OtpInput name="code" autoFocus />                       {/* posts with the form; a form reset clears it */}
+<OtpInput length={8} allow="alphanumeric" groupSize={4} />
+<OtpInput length={4} mask size="lg" />                  {/* a PIN */}
+```
+
+One real input behind the boxes, so SMS autofill (`autocomplete="one-time-code"`), pasting,
+password managers and form posts all work, and screen readers meet a single field. Props:
+`length` (6), `value` / `defaultValue` / `onValueChange`, `onComplete`, `allow` (`digits`
+`alphanumeric` or a RegExp per character), `groupSize`, `mask`, `size` (`sm` `md` `lg`), `invalid`,
+`frameClassName` + input props (`name`, `autoFocus`, `disabled`…). Reads a surrounding Field.
+
 ## Pagination
 
 ```tsx
@@ -625,6 +648,24 @@ Props: `icon`, `label` (required; spoken and tooltip), `variant` (`plain` `soft`
 `shape` (`circle` `square`), `pressed` / `defaultPressed` / `onPressedChange`, `pressedIcon`,
 `burst`, `badge` (number or dot), `loading`, `href`, `tooltip`, `disabled`.
 
+## Tooltip
+
+```tsx
+<Tooltip content="Archive">
+  <Button variant="ghost" iconOnly icon="bi bi-archive" aria-label="Archive" />
+</Tooltip>
+<Tooltip side="bottom" content="Save draft ⌘S">…</Tooltip>
+<Tooltip content={client.name} disabled={!isTruncated}>…</Tooltip>
+```
+
+Shows on hover (after `delay`, 400ms) and keyboard focus, never on touch; hides on Escape, blur and
+pointer leave (the tooltip itself is hoverable). Moving between tooltips shows the next at once.
+Shown with the Popover API, so it sits above modals and drawers and escapes `overflow: hidden` —
+no provider or z-index needed. Props: `content`, `side` (`top` `right` `bottom` `left`; flips),
+`align` (`start` `center` `end`), `delay`, `disabled`, `as` (`description` — read after the
+element's name, default; `label` — the tooltip is the name), `className`. The child must take a ref
+and focus/pointer handlers; disabled buttons get no events, so wrap them in a focusable span.
+
 ## Modal
 
 ```tsx
@@ -668,6 +709,30 @@ to the opener on close, Tab stays inside, the page behind is inert and doesn't s
 Theme tokens: `--radius-modal`, `--ui-shadow-modal`, `--ui-backdrop`, `--ui-backdrop-dark`,
 `--ui-backdrop-blur`, `--ui-backdrop-blur-radius`, `--ui-backdrop-solid`.
 
+## Drawer
+
+```tsx
+const menu = useDrawer();                 // { isOpen, open, close, toggle, drawerProps }
+
+<Drawer {...menu.drawerProps}>
+  <DrawerTrigger asChild><Button iconOnly icon="bi bi-list" aria-label="Open menu" /></DrawerTrigger>
+  <DrawerContent side="left" size="sm">
+    <DrawerHeader>
+      <DrawerTitle>Northwind Billing</DrawerTitle>
+      <DrawerDescription>…</DrawerDescription>
+    </DrawerHeader>
+    <DrawerBody>…</DrawerBody>
+    <DrawerFooter><DrawerClose asChild><Button>Done</Button></DrawerClose></DrawerFooter>
+  </DrawerContent>
+</Drawer>
+```
+
+A Modal that slides in from an edge — the same native `<dialog>`, focus handling, scroll lock,
+Escape and backdrop clicks. `DrawerContent`: `side` (`left` `right` `top` `bottom`; default
+`right`), `size` (`sm` `md` `lg` — width for left/right, height for top/bottom), `dismissible`,
+`backdrop`, `showCloseButton`, `closeLabel`. `DrawerFooter` sits at the bottom. Reduced motion fades
+instead of sliding.
+
 ## Table (DataTable)
 
 ```tsx
@@ -727,6 +792,45 @@ narrow: off-canvas drawer. Chosen by the layout's own width.
 `Sidebar`: `width`, `railWidth`. `SidebarNav`: `items`, `activeHref`, `matchNested`. `SidebarGroup`:
 `label`, `action`. `useSidebar()` → `{ mode, collapsed, drawerOpen, toggle, setCollapsed, setDrawerOpen, side }`.
 
+## Navigation menu
+
+```tsx
+<NavigationMenu linkComponent={Link} activeHref={url} items={[
+  { label: "Dashboard", href: "/dashboard", icon: <LayoutGrid /> },
+  { label: "Reports", children: [
+    { label: "Sales", href: "/reports/sales", description: "Revenue by month and client" },
+    { label: "Aging", href: "/reports/aging", description: "Who owes what, and for how long" },
+  ] },
+  { label: "Docs", href: "https://example.com/docs", external: true },
+]} />
+
+// Phones: the same items in a Drawer
+<NavigationMenu orientation="vertical" items={items} activeHref={url} linkComponent={Link} onNavigate={menu.close} />
+```
+
+Items: `{ label, href?, icon?, description?, badge?, children?, external?, id? }` — `children` open
+a panel of links (one level). Props: `items`, `activeHref`, `matchNested` (default true; the most
+specific match wins), `orientation` (`horizontal` `vertical`), `indicator` (`pill` `underline` — give
+the menu `className="h-full"` in the header so the line sits on its edge), `linkComponent`,
+`onNavigate`, `aria-label` (default "Main"). Disclosure pattern: links stay in the Tab order;
+Enter/Space/↓ open a panel, ← → Home End move between top-level items, Escape closes; hover opens
+panels for mouse users.
+
+## Breadcrumbs
+
+```tsx
+<Breadcrumbs linkComponent={Link} items={[
+  { label: "Clients", href: "/clients" },
+  { label: "Northwind Traders", href: "/clients/7" },
+  { label: "Invoices" },                      // the current page: no href
+]} />
+```
+
+The last item is marked `aria-current="page"`. Past `maxItems` (default 4; 0 never folds) the middle
+folds into "…", which opens in place. Long labels truncate with the full text as a tooltip. Props:
+`items` (`label`, `href`, `icon`), `maxItems`, `separator` (`chevron` `slash` or an element),
+`size` (`sm` `md`), `linkComponent`, `aria-label` (default "Breadcrumb").
+
 ## Tabs
 
 ```tsx
@@ -817,6 +921,19 @@ nothing overflows on a phone), `rowSpan`. `Container`: `size` (`sm` `md` `lg` `x
 follow the theme's density. Breakpoints follow the window, like Tailwind's own — for a layout that
 reacts to the space it's actually in, use `minChildWidth` or `wrap`.
 
+## Placeholder
+
+```tsx
+<Placeholder ratio="16/9" />
+<Placeholder className="h-80" label="Revenue chart" />
+<Placeholder pattern="dots" border="solid" className="text-primary" />
+```
+
+A patterned box that holds a layout slot before its content exists (wireframes, empty dashboard
+widgets). For content that is loading, use Skeleton. Props: `pattern` (`stripes` `dots` `grid`
+`none`), `label`, `ratio`, `border` (`dashed` `solid` `none`). Drawn with CSS gradients in the text
+color, so it follows the theme; decorative (hidden from screen readers) unless it has a label.
+
 ## Hero
 
 The top of a landing page, in separate pieces so it can be quiet or loud.

package/dist/index.d.ts

@@ -147,6 +147,13 @@ interface ModalContentProps extends React.HTMLAttributes<HTMLDivElement>, Varian
     /** Accessible label for the × button. */
     closeLabel?: string;
 }
+/** Props shared by ModalContent and DrawerContent. */
+interface DialogSurfaceProps extends React.HTMLAttributes<HTMLDivElement> {
+    dismissible?: boolean;
+    backdrop?: ModalBackdrop;
+    showCloseButton?: boolean;
+    closeLabel?: string;
+}
 declare const ModalContent: React.ForwardRefExoticComponent<ModalContentProps & React.RefAttributes<HTMLDivElement>>;
 declare const ModalHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 declare const ModalTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLHeadingElement>>;
@@ -2467,4 +2474,154 @@ interface HeroMediaProps extends React.HTMLAttributes<HTMLDivElement> {
 /** The screenshot beside the words. */
 declare function HeroMedia({ frame, url, float, tilt, className, children, ...rest }: HeroMediaProps): React.JSX.Element;
 
-export { Accordion, AccordionItem, type AccordionItemProps, type AccordionProps, type AccordionStatus, AccordionToggleAll, ActivityIndicator, type ActivityIndicatorProps, type ActivitySize, type ActivityStep, ActivitySteps, type ActivityStepsProps, type ActivityTone, Alert, type AlertProps, type AlertTone, type AlertVariant, AreaChart, AspectRatio, type AspectRatioProps, Autocomplete, type AutocompleteItem, type AutocompleteProps, Avatar, AvatarGroup, type AvatarGroupProps, AvatarLabel, type AvatarLabelProps, type AvatarProps, type AvatarSize, type AvatarStatus, AvatarUpload, type AvatarUploadProps, BarChart, type BarChartProps, BarList, type BarListItem, type BarListProps, Blockquote, type BlockquoteProps, Button, type ButtonProps, CalendarHeatmap, type CalendarHeatmapProps, Card, CardBody, CardContent, CardDescription, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, CardLink, CardMedia, type CardMediaProps, type CardProps, CardTitle, Carousel, type CarouselHandle, type CarouselProps, CarouselSlide, type CarouselSlideProps, Center, type CenterProps, type ChartSeries, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, ChoiceCard, ChoiceCardGroup, type ChoiceCardGroupProps, type ChoiceCardProps, Code, Container, type ContainerProps, DashboardGrid, type DashboardGridProps, DataTable, type DataTableColumn, type DataTableProps, type DataTableQuery, type DataTableStatusState, type Datum, Divider, type DividerProps, DonutChart, type DonutChartProps, type DonutSlice, DropdownMenu, DropdownMenuCheckboxItem, type DropdownMenuCheckboxItemProps, DropdownMenuContent, type DropdownMenuContentProps, DropdownMenuGroup, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuLabel, type DropdownMenuProps, DropdownMenuRadioGroup, type DropdownMenuRadioGroupProps, DropdownMenuRadioItem, type DropdownMenuRadioItemProps, DropdownMenuSeparator, DropdownMenuTrigger, type DropdownMenuTriggerProps, Field, type FieldContextValue, type FieldProps, FileDropzone, type FileDropzoneProps, FileInput, type FileInputProps, FileList$1 as FileList, type FileListProps, FileUploadButton, type FileUploadButtonProps, Gauge, type GaugeProps, Grid, GridItem, type GridItemProps, type GridProps, Heading, type HeadingProps, type HeadingSize, Hero, HeroActions, type HeroBackground, HeroEyebrow, type HeroEyebrowProps, HeroLogos, type HeroLogosProps, HeroMedia, type HeroMediaProps, type HeroProps, type HeroStat, HeroStats, type HeroStatsProps, HeroSubtitle, HeroTitle, type HeroTitleProps, IconButton, type IconButtonProps, type IconButtonTone, type IconInput, Input, type InputProps, Kbd, type KbdProps, KpiCard, type KpiCardProps, Lead, LineChart, type LineChartProps, Link, type LinkProps, List, ListItem, type ListProps, LiveIndicator, type LiveIndicatorProps, LoadMore, type LoadMoreProps, LoadingOverlay, type LoadingOverlayProps, Mark, Modal, type ModalBackdrop, ModalBody, ModalClose, ModalContent, type ModalContentProps, ModalDescription, ModalFooter, ModalHeader, type ModalProps, ModalTitle, ModalTrigger, Pagination, type PaginationProps, type PerView, Pill, type PillAppearance, PillGroup, type PillGroupProps, PillOption, type PillOptionProps, type PillProps, type PillTone, ProgressBar, type ProgressBarProps, ProgressRing, type ProgressRingProps, Prose, type ProseProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, type Responsive, Roadmap, type RoadmapItem, type RoadmapProps, Select, type SelectOption, type SelectProps, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, type SidebarGroupProps, SidebarHeader, SidebarInset, SidebarNav, type SidebarNavItem, type SidebarNavProps, type SidebarProps, SidebarProvider, type SidebarProviderProps, SidebarTrigger, type SidebarTriggerProps, SignaturePad, type SignaturePadHandle, type SignaturePadProps, Skeleton, SkeletonAvatar, type SkeletonAvatarProps, SkeletonButton, type SkeletonButtonProps, SkeletonCard, type SkeletonCardProps, SkeletonChart, type SkeletonChartProps, SkeletonImage, type SkeletonImageProps, SkeletonList, type SkeletonListProps, type SkeletonProps, SkeletonSwap, type SkeletonSwapProps, SkeletonTable, type SkeletonTableProps, SkeletonText, type SkeletonTextProps, Slider, type SliderMark, type SliderProps, type SortState, Spacer, Sparkline, type SparklineProps, SplitButton, type SplitButtonProps, SpotlightText, type SpotlightTextProps, Stack, type StackAlign, type StackDirection, type StackJustify, type StackProps, Stat, StatGroup, type StatGroupProps, type StatProps, type StepStatus, Switch, type SwitchColor, type SwitchProps, type SwitchVariant, Tab, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, Tabs, type TabsProps, Text, type TextProps, type TextTone, Textarea, type TextareaProps, type ThemeConfig, ThemeProvider, type ThemeProviderProps, Timeline, TimelineCollapse, type TimelineCollapseProps, TimelineGroup, type TimelineGroupProps, TimelineItem, type TimelineItemProps, type TimelineProps, type TimelineStatus, type TimelineTone, type ToastData, type ToastOptions, type ToastType, Toaster, type ToasterPosition, type ToasterProps, type UploadFn, type UploadItem, type UploadStatus, type UseDelayedLoadingOptions, type UseFileUploadsOptions, WidgetCard, type WidgetCardProps, type XhrUploadOptions, buttonVariants, cardVariants, cn, describeAccept, fileMatchesAccept, formatBytes, formatCompact, formatTimelineDay, formatTimelineTime, getInitials, getPageItems, headingSizes, modalPanelVariants, niceTicks, pillVariants, renderIcon, textSizes, toast, useAccordion, useDelayedLoading, useField, useFileUploads, useModal, useSidebar, useTweenedNumbers, xhrUpload };
+type DrawerProps = ModalProps;
+declare const Drawer: typeof Modal;
+declare const DrawerTrigger: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    asChild?: boolean;
+} & React.RefAttributes<HTMLButtonElement>>;
+declare const DrawerClose: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    asChild?: boolean;
+} & React.RefAttributes<HTMLButtonElement>>;
+declare const DrawerTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLHeadingElement>>;
+declare const DrawerDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+/** Open and close a drawer from code: `const nav = useDrawer(); <Drawer {...nav.drawerProps}>`. */
+declare function useDrawer(initialOpen?: boolean): {
+    drawerProps: {
+        open: boolean;
+        onOpenChange: React.Dispatch<React.SetStateAction<boolean>>;
+    };
+    isOpen: boolean;
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
+};
+type DrawerSide = "left" | "right" | "top" | "bottom";
+interface DrawerContentProps extends DialogSurfaceProps {
+    /** The edge it slides in from. Default "right"; "left" suits navigation, "bottom" suits phones. */
+    side?: DrawerSide;
+    /**
+     * How far it reaches into the screen: the width for left/right, the height for
+     * top/bottom. It never covers the whole screen, so the backdrop stays tappable.
+     */
+    size?: "sm" | "md" | "lg";
+}
+declare const DrawerContent: React.ForwardRefExoticComponent<DrawerContentProps & React.RefAttributes<HTMLDivElement>>;
+declare const DrawerHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const DrawerBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const DrawerFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+
+type TooltipSide = "top" | "bottom" | "left" | "right";
+interface TooltipProps {
+    /** The hint. Keep it short — a few words, or a name and a shortcut. */
+    content: React.ReactNode;
+    /** The element it describes. It must accept a ref and focus/pointer handlers (a button, a link…). */
+    children: React.ReactElement;
+    /** Preferred side; it flips when there's no room. Default "top". */
+    side?: TooltipSide;
+    /** Line it up with the element's start, center (default) or end. */
+    align?: "start" | "center" | "end";
+    /** Milliseconds of hovering before it shows. Default 400. Keyboard focus shows it at once. */
+    delay?: number;
+    /** Don't show it (e.g. when the full text is already visible). */
+    disabled?: boolean;
+    /**
+     * How screen readers use the text.
+     * - "description" (default): read after the element's own name, e.g. "Archive, Ctrl+E".
+     * - "label": the tooltip *is* the name — for an icon-only control with no aria-label.
+     */
+    as?: "description" | "label";
+    className?: string;
+}
+declare function Tooltip({ content, children, side, align, delay, disabled, as, className, }: TooltipProps): React.JSX.Element;
+
+interface OtpInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "value" | "defaultValue" | "onChange" | "pattern" | "maxLength" | "type"> {
+    /** Number of characters. Default 6. */
+    length?: number;
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    /** Called once every box is filled, e.g. to submit straight away. */
+    onComplete?: (value: string) => void;
+    /** Which characters are allowed: "digits" (default), "alphanumeric", or your own RegExp for one character. */
+    allow?: "digits" | "alphanumeric" | RegExp;
+    /** Draw a divider after every n boxes, e.g. 3 → "123–456". */
+    groupSize?: number;
+    /** Show dots instead of the characters (for PINs). */
+    mask?: boolean;
+    size?: ControlSize;
+    invalid?: boolean;
+    /** Class for the row of boxes. `className` goes on the hidden <input>. */
+    frameClassName?: string;
+}
+declare const OtpInput: React.ForwardRefExoticComponent<OtpInputProps & React.RefAttributes<HTMLInputElement>>;
+
+interface BreadcrumbItem {
+    label: string;
+    /** Where it goes. Leave it out on the last item (the current page). */
+    href?: string;
+    icon?: IconInput;
+}
+interface BreadcrumbsProps extends Omit<React.HTMLAttributes<HTMLElement>, "children"> {
+    items: BreadcrumbItem[];
+    /** Fold the middle into "…" when there are more items than this. Default 4; 0 never folds. */
+    maxItems?: number;
+    /** What goes between items: "chevron" (default), "slash", or your own element. */
+    separator?: "chevron" | "slash" | React.ReactNode;
+    /** The link component — e.g. Next.js `Link` or Inertia's `Link`. Default <a>. */
+    linkComponent?: React.ElementType;
+    size?: "sm" | "md";
+}
+declare function Breadcrumbs({ items, maxItems, separator, linkComponent: LinkC, size, className, "aria-label": ariaLabel, ...props }: BreadcrumbsProps): React.JSX.Element;
+
+interface NavigationMenuItem {
+    label: string;
+    /** Where it goes. Items with children don't need one (they open their panel). */
+    href?: string;
+    icon?: IconInput;
+    /** A line under the label — shown in panels. */
+    description?: React.ReactNode;
+    /** Something after the label, e.g. <Pill size="sm">New</Pill>. */
+    badge?: React.ReactNode;
+    /** A panel of links. One level deep. */
+    children?: NavigationMenuItem[];
+    /** Open in a new tab. */
+    external?: boolean;
+    /** Stable key if labels repeat. */
+    id?: string;
+}
+interface NavigationMenuProps {
+    items: NavigationMenuItem[];
+    /** The current page's path. Its item (or the item whose panel holds it) is highlighted. */
+    activeHref?: string;
+    /** Also treat an item as active when the path starts with its href (e.g. /invoices/1047). Default true. */
+    matchNested?: boolean;
+    /** "horizontal" (default) for a header; "vertical" for a drawer or a side column. */
+    orientation?: "horizontal" | "vertical";
+    /**
+     * How the current page shows in a horizontal menu: "pill" (a soft background, default)
+     * or "underline" (a line along the bottom — give the menu the header's height with
+     * className="h-full" so the line sits on the header's edge).
+     */
+    indicator?: "pill" | "underline";
+    /** The link component — e.g. Next.js `Link` or Inertia's `Link`. Default <a>. */
+    linkComponent?: React.ElementType;
+    /** Called after a link is followed — e.g. close the Drawer the menu sits in. */
+    onNavigate?: (href: string) => void;
+    "aria-label"?: string;
+    className?: string;
+}
+declare function NavigationMenu({ items, activeHref, matchNested, orientation, indicator, linkComponent, onNavigate, "aria-label": ariaLabel, className, }: NavigationMenuProps): React.JSX.Element;
+
+interface PlaceholderProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** "stripes" (diagonal lines, default), "dots", "grid" or "none" (just the dashed outline). */
+    pattern?: "stripes" | "dots" | "grid" | "none";
+    /** A short note in the middle, e.g. what will go here. */
+    label?: React.ReactNode;
+    /** Keep a shape, e.g. "16/9" or 1. Leave it out to fill the height you give it. */
+    ratio?: number | string;
+    /** Outline: "dashed" (default), "solid" or "none". */
+    border?: "dashed" | "solid" | "none";
+}
+declare const Placeholder: React.ForwardRefExoticComponent<PlaceholderProps & React.RefAttributes<HTMLDivElement>>;
+
+export { Accordion, AccordionItem, type AccordionItemProps, type AccordionProps, type AccordionStatus, AccordionToggleAll, ActivityIndicator, type ActivityIndicatorProps, type ActivitySize, type ActivityStep, ActivitySteps, type ActivityStepsProps, type ActivityTone, Alert, type AlertProps, type AlertTone, type AlertVariant, AreaChart, AspectRatio, type AspectRatioProps, Autocomplete, type AutocompleteItem, type AutocompleteProps, Avatar, AvatarGroup, type AvatarGroupProps, AvatarLabel, type AvatarLabelProps, type AvatarProps, type AvatarSize, type AvatarStatus, AvatarUpload, type AvatarUploadProps, BarChart, type BarChartProps, BarList, type BarListItem, type BarListProps, Blockquote, type BlockquoteProps, type BreadcrumbItem, Breadcrumbs, type BreadcrumbsProps, Button, type ButtonProps, CalendarHeatmap, type CalendarHeatmapProps, Card, CardBody, CardContent, CardDescription, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, CardLink, CardMedia, type CardMediaProps, type CardProps, CardTitle, Carousel, type CarouselHandle, type CarouselProps, CarouselSlide, type CarouselSlideProps, Center, type CenterProps, type ChartSeries, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, ChoiceCard, ChoiceCardGroup, type ChoiceCardGroupProps, type ChoiceCardProps, Code, Container, type ContainerProps, DashboardGrid, type DashboardGridProps, DataTable, type DataTableColumn, type DataTableProps, type DataTableQuery, type DataTableStatusState, type Datum, Divider, type DividerProps, DonutChart, type DonutChartProps, type DonutSlice, Drawer, DrawerBody, DrawerClose, DrawerContent, type DrawerContentProps, DrawerDescription, DrawerFooter, DrawerHeader, type DrawerProps, type DrawerSide, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, type DropdownMenuCheckboxItemProps, DropdownMenuContent, type DropdownMenuContentProps, DropdownMenuGroup, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuLabel, type DropdownMenuProps, DropdownMenuRadioGroup, type DropdownMenuRadioGroupProps, DropdownMenuRadioItem, type DropdownMenuRadioItemProps, DropdownMenuSeparator, DropdownMenuTrigger, type DropdownMenuTriggerProps, Field, type FieldContextValue, type FieldProps, FileDropzone, type FileDropzoneProps, FileInput, type FileInputProps, FileList$1 as FileList, type FileListProps, FileUploadButton, type FileUploadButtonProps, Gauge, type GaugeProps, Grid, GridItem, type GridItemProps, type GridProps, Heading, type HeadingProps, type HeadingSize, Hero, HeroActions, type HeroBackground, HeroEyebrow, type HeroEyebrowProps, HeroLogos, type HeroLogosProps, HeroMedia, type HeroMediaProps, type HeroProps, type HeroStat, HeroStats, type HeroStatsProps, HeroSubtitle, HeroTitle, type HeroTitleProps, IconButton, type IconButtonProps, type IconButtonTone, type IconInput, Input, type InputProps, Kbd, type KbdProps, KpiCard, type KpiCardProps, Lead, LineChart, type LineChartProps, Link, type LinkProps, List, ListItem, type ListProps, LiveIndicator, type LiveIndicatorProps, LoadMore, type LoadMoreProps, LoadingOverlay, type LoadingOverlayProps, Mark, Modal, type ModalBackdrop, ModalBody, ModalClose, ModalContent, type ModalContentProps, ModalDescription, ModalFooter, ModalHeader, type ModalProps, ModalTitle, ModalTrigger, NavigationMenu, type NavigationMenuItem, type NavigationMenuProps, OtpInput, type OtpInputProps, Pagination, type PaginationProps, type PerView, Pill, type PillAppearance, PillGroup, type PillGroupProps, PillOption, type PillOptionProps, type PillProps, type PillTone, Placeholder, type PlaceholderProps, ProgressBar, type ProgressBarProps, ProgressRing, type ProgressRingProps, Prose, type ProseProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, type Responsive, Roadmap, type RoadmapItem, type RoadmapProps, Select, type SelectOption, type SelectProps, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, type SidebarGroupProps, SidebarHeader, SidebarInset, SidebarNav, type SidebarNavItem, type SidebarNavProps, type SidebarProps, SidebarProvider, type SidebarProviderProps, SidebarTrigger, type SidebarTriggerProps, SignaturePad, type SignaturePadHandle, type SignaturePadProps, Skeleton, SkeletonAvatar, type SkeletonAvatarProps, SkeletonButton, type SkeletonButtonProps, SkeletonCard, type SkeletonCardProps, SkeletonChart, type SkeletonChartProps, SkeletonImage, type SkeletonImageProps, SkeletonList, type SkeletonListProps, type SkeletonProps, SkeletonSwap, type SkeletonSwapProps, SkeletonTable, type SkeletonTableProps, SkeletonText, type SkeletonTextProps, Slider, type SliderMark, type SliderProps, type SortState, Spacer, Sparkline, type SparklineProps, SplitButton, type SplitButtonProps, SpotlightText, type SpotlightTextProps, Stack, type StackAlign, type StackDirection, type StackJustify, type StackProps, Stat, StatGroup, type StatGroupProps, type StatProps, type StepStatus, Switch, type SwitchColor, type SwitchProps, type SwitchVariant, Tab, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, Tabs, type TabsProps, Text, type TextProps, type TextTone, Textarea, type TextareaProps, type ThemeConfig, ThemeProvider, type ThemeProviderProps, Timeline, TimelineCollapse, type TimelineCollapseProps, TimelineGroup, type TimelineGroupProps, TimelineItem, type TimelineItemProps, type TimelineProps, type TimelineStatus, type TimelineTone, type ToastData, type ToastOptions, type ToastType, Toaster, type ToasterPosition, type ToasterProps, Tooltip, type TooltipProps, type TooltipSide, type UploadFn, type UploadItem, type UploadStatus, type UseDelayedLoadingOptions, type UseFileUploadsOptions, WidgetCard, type WidgetCardProps, type XhrUploadOptions, buttonVariants, cardVariants, cn, describeAccept, fileMatchesAccept, formatBytes, formatCompact, formatTimelineDay, formatTimelineTime, getInitials, getPageItems, headingSizes, modalPanelVariants, niceTicks, pillVariants, renderIcon, textSizes, toast, useAccordion, useDelayedLoading, useDrawer, useField, useFileUploads, useModal, useSidebar, useTweenedNumbers, xhrUpload };