@fanvue/ui 1.17.2 → 1.18.0

package/dist/index.d.ts

@@ -1,7 +1,10 @@
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import { ClassValue } from 'clsx';
 import { default as default_2 } from 'react';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { JSX } from 'react/jsx-runtime';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import * as React_2 from 'react';
 import * as SelectPrimitive from '@radix-ui/react-select';
@@ -12,6 +15,61 @@ import * as TabsPrimitive from '@radix-ui/react-tabs';
 import * as ToastPrimitive from '@radix-ui/react-toast';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 
+/**
+ * Root container for an accordion interface. Manages the expand/collapse state
+ * and coordinates {@link AccordionItem}, {@link AccordionTrigger}, and {@link AccordionContent}.
+ *
+ * Built on Radix UI `Accordion`.
+ *
+ * @example
+ * ```tsx
+ * <Accordion type="single" collapsible>
+ *   <AccordionItem value="item-1">
+ *     <AccordionTrigger>Section 1</AccordionTrigger>
+ *     <AccordionContent>Content 1</AccordionContent>
+ *   </AccordionItem>
+ *   <AccordionItem value="item-2">
+ *     <AccordionTrigger>Section 2</AccordionTrigger>
+ *     <AccordionContent>Content 2</AccordionContent>
+ *   </AccordionItem>
+ * </Accordion>
+ * ```
+ */
+export declare const Accordion: React_2.ForwardRefExoticComponent<AccordionProps & React_2.RefAttributes<HTMLDivElement>>;
+
+/** Renders the collapsible content panel for an {@link AccordionItem}. Animates open and closed. */
+export declare const AccordionContent: React_2.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionContentProps & React_2.RefAttributes<HTMLDivElement>, "ref"> & {
+    /** Remove the default inner padding (`px-3 pb-3`). Useful when you need custom content layout. */
+    noPadding?: boolean;
+} & React_2.RefAttributes<HTMLDivElement>>;
+
+/** Props for the {@link AccordionContent} panel component. */
+export declare type AccordionContentProps = React_2.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content> & {
+    /** Remove the default inner padding (`px-3 pb-3`). Useful when you need custom content layout. */
+    noPadding?: boolean;
+};
+
+/** A single collapsible section within an {@link Accordion}. Contains an {@link AccordionTrigger} and {@link AccordionContent}. */
+export declare const AccordionItem: React_2.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionItemProps & React_2.RefAttributes<HTMLDivElement>, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
+
+/** Props for the {@link AccordionItem} component. */
+export declare type AccordionItemProps = React_2.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>;
+
+/** Props for the {@link Accordion} root component. Extends Radix `Accordion.Root` props. */
+export declare type AccordionProps = React_2.ComponentPropsWithoutRef<typeof AccordionPrimitive.Root>;
+
+/** An interactive button that toggles the visibility of its associated {@link AccordionContent} panel. */
+export declare const AccordionTrigger: React_2.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionTriggerProps & React_2.RefAttributes<HTMLButtonElement>, "ref"> & {
+    /** Custom icon element. Defaults to `ChevronDownIcon`. Pass `null` to suppress the icon entirely. */
+    icon?: React_2.ReactNode | null;
+} & React_2.RefAttributes<HTMLButtonElement>>;
+
+/** Props for the {@link AccordionTrigger} button component. */
+export declare type AccordionTriggerProps = React_2.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger> & {
+    /** Custom icon element. Defaults to `ChevronDownIcon`. Pass `null` to suppress the icon entirely. */
+    icon?: React_2.ReactNode | null;
+};
+
 export declare const AddIcon: React_2.ForwardRefExoticComponent<React_2.SVGAttributes<SVGSVGElement> & {
     className?: string;
 } & React_2.RefAttributes<SVGSVGElement>>;
@@ -150,6 +208,75 @@ export declare interface AudioValidationError {
     message: string;
 }
 
+export declare const Autocomplete: React_2.ForwardRefExoticComponent<AutocompleteProps & React_2.RefAttributes<HTMLInputElement>>;
+
+declare interface AutocompleteBaseProps {
+    label?: string;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    helperText?: string;
+    /** @default "48" */
+    size?: AutocompleteSize;
+    /** @default false */
+    error?: boolean;
+    errorMessage?: string;
+    placeholder?: string;
+    leftIcon?: React_2.ReactNode;
+    /** @default false */
+    fullWidth?: boolean;
+    /** @default false */
+    disabled?: boolean;
+    /** @default false */
+    clearable?: boolean;
+    clearAriaLabel?: string;
+    id?: string;
+    className?: string;
+    options: AutocompleteOption[];
+    inputValue?: string;
+    onInputChange?: (value: string) => void;
+    filterFn?: (option: AutocompleteOption, query: string) => boolean;
+    /** @default false */
+    creatable?: boolean;
+    creatableLabel?: (inputValue: string) => string;
+    onCreate?: (inputValue: string) => void;
+    /** @default false */
+    loading?: boolean;
+    loadingText?: string;
+    emptyText?: string;
+    renderOption?: (option: AutocompleteOption, state: {
+        selected: boolean;
+        active: boolean;
+    }) => React_2.ReactNode;
+    renderTag?: (option: AutocompleteOption, onRemove: () => void) => React_2.ReactNode;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}
+
+declare interface AutocompleteMultiProps extends AutocompleteBaseProps {
+    multiple: true;
+    value?: string[];
+    defaultValue?: string[];
+    onChange?: (values: string[]) => void;
+}
+
+export declare interface AutocompleteOption {
+    value: string;
+    label?: string;
+    disabled?: boolean;
+}
+
+export declare type AutocompleteProps = AutocompleteSingleProps | AutocompleteMultiProps;
+
+declare interface AutocompleteSingleProps extends AutocompleteBaseProps {
+    multiple?: false;
+    value?: string | null;
+    defaultValue?: string | null;
+    onChange?: (value: string | null) => void;
+}
+
+export declare type AutocompleteSize = "48" | "40" | "32";
+
 /**
  * Displays a user avatar with optional online indicator, platinum border, and
  * NSFW blur. Pass `src` and `fallback` for the simple API, or compose your own
@@ -254,6 +381,36 @@ export declare const BoltIcon: React_2.ForwardRefExoticComponent<React_2.SVGAttr
     className?: string;
 } & React_2.RefAttributes<SVGSVGElement>>;
 
+export declare const BottomNavigation: React_2.ForwardRefExoticComponent<BottomNavigationProps & React_2.RefAttributes<HTMLElement>>;
+
+export declare const BottomNavigationAction: React_2.ForwardRefExoticComponent<BottomNavigationActionProps & React_2.RefAttributes<HTMLButtonElement>>;
+
+export declare interface BottomNavigationActionProps extends Omit<React_2.ButtonHTMLAttributes<HTMLButtonElement>, "value"> {
+    /** Unique value that identifies this action. */
+    value: string;
+    /** Icon element displayed above the label. */
+    icon: React_2.ReactElement;
+    /** Text label displayed below the icon. */
+    label?: string;
+    /** Optional badge element (e.g. {@link Count}) rendered at the top-end corner of the icon. */
+    badge?: React_2.ReactNode;
+    /** Merge props onto a child element instead of rendering a `<button>`. @default false */
+    asChild?: boolean;
+}
+
+export declare interface BottomNavigationProps extends React_2.HTMLAttributes<HTMLElement> {
+    /** The currently selected action value. */
+    value?: string;
+    /** Called when the selected action changes. */
+    onValueChange?: (value: string) => void;
+    /** When `true`, labels are only shown on the active action. @default false */
+    showLabelsOnlyWhenActive?: boolean;
+    /** When `true`, all labels are hidden. @default false */
+    hideLabels?: boolean;
+    /** When `true`, the navigation bar is hidden on viewports wider than `md` (768 px). @default false */
+    hideOnDesktop?: boolean;
+}
+
 /**
  * Root navigation wrapper for the breadcrumb trail.
  *
@@ -617,6 +774,147 @@ export declare const CrownIcon: React_2.ForwardRefExoticComponent<React_2.SVGAtt
     className?: string;
 } & React_2.RefAttributes<SVGSVGElement>>;
 
+/** Root component that manages open/close state for a dialog. */
+export declare const Dialog: React_2.FC<DialogPrimitive.DialogProps>;
+
+/**
+ * Scrollable content area (slot) between the header and footer.
+ * Grows to fill available space and scrolls when content overflows.
+ */
+export declare const DialogBody: React_2.ForwardRefExoticComponent<DialogBodyProps & React_2.RefAttributes<HTMLDivElement>>;
+
+export declare interface DialogBodyProps extends React_2.HTMLAttributes<HTMLDivElement> {
+}
+
+/** Convenience alias for Radix `Dialog.Close`. Closes the dialog when clicked. */
+export declare const DialogClose: React_2.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React_2.RefAttributes<HTMLButtonElement>>;
+
+/** Props for the {@link DialogClose} component. */
+export declare type DialogCloseProps = React_2.ComponentPropsWithoutRef<typeof DialogPrimitive.Close>;
+
+/**
+ * The dialog panel rendered inside a portal. Includes the overlay by default.
+ *
+ * On mobile viewports (<640px), the dialog slides up from the bottom as a sheet
+ * with top-only border radius. On larger viewports it renders centered with
+ * full border radius.
+ *
+ * @example
+ * ```tsx
+ * <Dialog>
+ *   <DialogTrigger asChild>
+ *     <Button>Open</Button>
+ *   </DialogTrigger>
+ *   <DialogContent>
+ *     <DialogHeader>
+ *       <DialogTitle>Title</DialogTitle>
+ *     </DialogHeader>
+ *     <DialogBody>Content here</DialogBody>
+ *     <DialogFooter>
+ *       <DialogClose asChild>
+ *         <Button variant="secondary">Cancel</Button>
+ *       </DialogClose>
+ *       <Button>Accept</Button>
+ *     </DialogFooter>
+ *   </DialogContent>
+ * </Dialog>
+ * ```
+ */
+export declare const DialogContent: React_2.ForwardRefExoticComponent<DialogContentProps & React_2.RefAttributes<HTMLDivElement>>;
+
+export declare interface DialogContentProps extends React_2.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
+    /**
+     * Width preset for the dialog.
+     * - `"sm"` — 400px max-width (confirmations, simple forms)
+     * - `"md"` — 440px max-width (default, standard dialogs)
+     * - `"lg"` — 600px max-width (complex content, tables)
+     *
+     * @default "md"
+     */
+    size?: "sm" | "md" | "lg";
+    /** When true, renders overlay automatically. @default true */
+    overlay?: boolean;
+}
+
+/** Accessible description for the dialog. Rendered as secondary text. */
+export declare const DialogDescription: React_2.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React_2.RefAttributes<HTMLParagraphElement>, "ref"> & React_2.RefAttributes<HTMLParagraphElement>>;
+
+/** Props for the {@link DialogDescription} component. */
+export declare type DialogDescriptionProps = React_2.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>;
+
+/**
+ * Footer bar for the dialog. Typically contains action buttons.
+ * Children are laid out in a horizontal row with equal flex-basis.
+ */
+export declare const DialogFooter: React_2.ForwardRefExoticComponent<DialogFooterProps & React_2.RefAttributes<HTMLDivElement>>;
+
+export declare interface DialogFooterProps extends React_2.HTMLAttributes<HTMLDivElement> {
+}
+
+/**
+ * Header bar for the dialog. Renders the title with an optional back arrow
+ * and close button.
+ *
+ * @example
+ * ```tsx
+ * <DialogHeader>
+ *   <DialogTitle>Settings</DialogTitle>
+ * </DialogHeader>
+ *
+ * <DialogHeader showBack onBack={() => setStep(0)}>
+ *   <DialogTitle>Step 2</DialogTitle>
+ * </DialogHeader>
+ * ```
+ */
+export declare const DialogHeader: React_2.ForwardRefExoticComponent<DialogHeaderProps & React_2.RefAttributes<HTMLDivElement>>;
+
+export declare interface DialogHeaderProps extends React_2.HTMLAttributes<HTMLDivElement> {
+    /** Show the close (X) button in the header. @default true */
+    showClose?: boolean;
+    /** Show a back arrow button on the left side. Defaults to `true` when `onBack` is provided. */
+    showBack?: boolean;
+    /** Called when the back button is clicked. */
+    onBack?: () => void;
+    /** Accessible label for the back button. @default "Go back" */
+    backLabel?: string;
+    /** Accessible label for the close button. @default "Close" */
+    closeLabel?: string;
+}
+
+/**
+ * Semi-transparent backdrop rendered behind the dialog content.
+ * Rendered inside a portal automatically by {@link DialogContent}.
+ */
+export declare const DialogOverlay: React_2.ForwardRefExoticComponent<DialogOverlayProps & React_2.RefAttributes<HTMLDivElement>>;
+
+export declare interface DialogOverlayProps extends React_2.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay> {
+}
+
+/** Props for the {@link Dialog} root component. */
+export declare interface DialogProps extends React_2.ComponentPropsWithoutRef<typeof DialogPrimitive.Root> {
+    /** Controlled open state. When provided, you must also supply `onOpenChange`. */
+    open?: boolean;
+    /** Called when the open state changes. Required when `open` is controlled. */
+    onOpenChange?: (open: boolean) => void;
+    /** The open state of the dialog when it is initially rendered (uncontrolled). */
+    defaultOpen?: boolean;
+}
+
+/**
+ * Accessible title for the dialog. Must be rendered inside {@link DialogHeader}
+ * or directly within {@link DialogContent}.
+ */
+export declare const DialogTitle: React_2.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React_2.RefAttributes<HTMLHeadingElement>, "ref"> & React_2.RefAttributes<HTMLHeadingElement>>;
+
+/** Props for the {@link DialogTitle} component. */
+export declare type DialogTitleProps = React_2.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>;
+
+/** The element that opens the dialog when clicked. */
+export declare const DialogTrigger: React_2.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React_2.RefAttributes<HTMLButtonElement>>;
+
+/** Props for the {@link DialogTrigger} component. */
+export declare type DialogTriggerProps = React_2.ComponentPropsWithoutRef<typeof DialogPrimitive.Trigger>;
+
 export declare const DiamondIcon: React_2.ForwardRefExoticComponent<React_2.SVGAttributes<SVGSVGElement> & {
     className?: string;
 } & React_2.RefAttributes<SVGSVGElement>>;
@@ -654,6 +952,161 @@ export declare const DownloadIcon: React_2.ForwardRefExoticComponent<React_2.SVG
     className?: string;
 } & React_2.RefAttributes<SVGSVGElement>>;
 
+/**
+ * Root component that manages open/close state for a drawer.
+ * Wraps Radix Dialog.Root.
+ *
+ * @example
+ * ```tsx
+ * <Drawer>
+ *   <DrawerTrigger>Open</DrawerTrigger>
+ *   <DrawerContent position="right">
+ *     <DrawerHeader>
+ *       <DrawerTitle>Settings</DrawerTitle>
+ *       <DrawerDescription>Adjust your preferences.</DrawerDescription>
+ *     </DrawerHeader>
+ *     <p>Content goes here.</p>
+ *     <DrawerFooter>
+ *       <DrawerClose>Done</DrawerClose>
+ *     </DrawerFooter>
+ *   </DrawerContent>
+ * </Drawer>
+ * ```
+ */
+export declare function Drawer({ overlay, modal, children, ...props }: DrawerProps): JSX.Element;
+
+export declare namespace Drawer {
+    var displayName: string;
+}
+
+/** Closes the drawer when clicked. Can be placed anywhere inside the drawer. */
+export declare const DrawerClose: React_2.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React_2.RefAttributes<HTMLButtonElement>>;
+
+/** Props for the {@link DrawerClose} component. */
+export declare type DrawerCloseProps = React_2.ComponentPropsWithoutRef<typeof DialogPrimitive.Close>;
+
+/**
+ * The panel that slides in from the chosen edge. Renders inside a portal with
+ * an overlay backdrop by default.
+ *
+ * Includes focus-trap, `aria-describedby`, and Escape-to-close from Radix Dialog.
+ */
+export declare const DrawerContent: React_2.ForwardRefExoticComponent<DrawerContentProps & React_2.RefAttributes<HTMLDivElement>>;
+
+/** Props for the {@link DrawerContent} component. */
+export declare interface DrawerContentProps extends React_2.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
+    /**
+     * The edge from which the drawer slides in.
+     *
+     * Named `position` (rather than `side`) to avoid confusion with the CSS
+     * `side` concept used by Radix Popover/Tooltip and to better convey the
+     * spatial relationship of the drawer to the viewport.
+     *
+     * @default "right"
+     */
+    position?: DrawerPosition;
+    /**
+     * Controls the maximum extent of the drawer panel.
+     * For left/right drawers this sets `max-width`; for top/bottom it sets `max-height`.
+     * @default "sm"
+     */
+    size?: DrawerSize;
+    /**
+     * Whether to render the default {@link DrawerOverlay} behind the content.
+     * Set to `false` to provide your own overlay or omit it entirely.
+     *
+     * Prefer setting `overlay` on the {@link Drawer} root instead so that
+     * `modal` is also adjusted automatically.
+     *
+     * @default true
+     */
+    overlay?: boolean;
+    /** Props forwarded to the default {@link DrawerOverlay} when `overlay` is `true`. */
+    overlayProps?: DrawerOverlayProps;
+}
+
+/** An accessible description for the drawer, providing supplementary context. */
+export declare const DrawerDescription: React_2.ForwardRefExoticComponent<DrawerDescriptionProps & React_2.RefAttributes<HTMLParagraphElement>>;
+
+/** Props for the {@link DrawerDescription} component. */
+export declare interface DrawerDescriptionProps extends React_2.ComponentPropsWithoutRef<typeof DialogPrimitive.Description> {
+}
+
+/** A semantic footer area for the drawer, typically containing action buttons. */
+export declare const DrawerFooter: React_2.ForwardRefExoticComponent<DrawerFooterProps & React_2.RefAttributes<HTMLDivElement>>;
+
+/** Props for the {@link DrawerFooter} component. */
+export declare interface DrawerFooterProps extends React_2.HTMLAttributes<HTMLDivElement> {
+}
+
+/**
+ * A semantic header area for the drawer, typically containing a title and description.
+ * Renders a built-in close button by default.
+ */
+export declare const DrawerHeader: React_2.ForwardRefExoticComponent<DrawerHeaderProps & React_2.RefAttributes<HTMLDivElement>>;
+
+/** Props for the {@link DrawerHeader} component. */
+export declare interface DrawerHeaderProps extends React_2.HTMLAttributes<HTMLDivElement> {
+    /** Whether to show a built-in close (X) button. @default true */
+    showClose?: boolean;
+    /** Accessible label for the close button. @default "Close drawer" */
+    closeLabel?: string;
+}
+
+/**
+ * A translucent backdrop rendered behind the drawer content.
+ * Clicking the overlay closes the drawer by default.
+ */
+export declare const DrawerOverlay: React_2.ForwardRefExoticComponent<DrawerOverlayProps & React_2.RefAttributes<HTMLDivElement>>;
+
+/** Props for the {@link DrawerOverlay} component. */
+export declare interface DrawerOverlayProps extends React_2.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay> {
+}
+
+/** The side from which the drawer slides in. */
+export declare type DrawerPosition = "left" | "right" | "top" | "bottom";
+
+/**
+ * Props for the {@link Drawer} root component.
+ *
+ * Inherits `open`, `onOpenChange`, and `defaultOpen` from Radix Dialog.Root.
+ *
+ * The Radix `modal` prop (default `true`) can also be passed to create a
+ * non-modal drawer — useful for persistent side navigation that does not
+ * block interaction with the rest of the page.
+ *
+ * **`overlay` behaviour:** When `overlay` is `false`, the component
+ * automatically sets `modal={false}` on the underlying Radix Dialog.Root.
+ * A modal dialog without a visible overlay is confusing because focus is
+ * still trapped and scroll is blocked even though the page appears
+ * interactive. Passing `modal={true}` explicitly will override this.
+ */
+export declare interface DrawerProps extends React_2.ComponentPropsWithoutRef<typeof DialogPrimitive.Root> {
+    /**
+     * Whether the default {@link DrawerOverlay} is rendered.
+     * When `false`, `modal` is automatically set to `false` as well
+     * (unless explicitly overridden) so focus-trap and scroll-lock are disabled.
+     * @default true
+     */
+    overlay?: boolean;
+}
+
+/** Size presets for the drawer panel. Maps to max-width (left/right) or max-height (top/bottom). */
+export declare type DrawerSize = "sm" | "md" | "lg" | "full";
+
+/** An accessible title for the drawer. Required for screen readers. */
+export declare const DrawerTitle: React_2.ForwardRefExoticComponent<DrawerTitleProps & React_2.RefAttributes<HTMLHeadingElement>>;
+
+/** Props for the {@link DrawerTitle} component. */
+export declare interface DrawerTitleProps extends React_2.ComponentPropsWithoutRef<typeof DialogPrimitive.Title> {
+}
+
+/** The element that opens the drawer when clicked. */
+export declare const DrawerTrigger: React_2.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React_2.RefAttributes<HTMLButtonElement>>;
+
+/** Props for the {@link DrawerTrigger} component. */
+export declare type DrawerTriggerProps = React_2.ComponentPropsWithoutRef<typeof DialogPrimitive.Trigger>;
+
 export declare const EditIcon: React_2.ForwardRefExoticComponent<React_2.SVGAttributes<SVGSVGElement> & {
     className?: string;
 } & React_2.RefAttributes<SVGSVGElement>>;
@@ -896,6 +1349,61 @@ export declare const MinusIcon: React_2.ForwardRefExoticComponent<React_2.SVGAtt
     className?: string;
 } & React_2.RefAttributes<SVGSVGElement>>;
 
+/**
+ * A compact, mobile-friendly stepper that shows progress through a sequence of
+ * steps. Supports three indicator variants: dots, a progress bar, or text.
+ *
+ * @example
+ * ```tsx
+ * <MobileStepper
+ *   steps={6}
+ *   activeStep={2}
+ *   variant="dots"
+ *   backButton={<Button size="sm" onClick={handleBack}>Back</Button>}
+ *   nextButton={<Button size="sm" onClick={handleNext}>Next</Button>}
+ * />
+ * ```
+ */
+export declare const MobileStepper: React_2.ForwardRefExoticComponent<MobileStepperProps & React_2.RefAttributes<HTMLElement>>;
+
+/** Positioning mode — `"static"` flows normally, `"bottom"` fixes to the viewport bottom. */
+export declare type MobileStepperPosition = "static" | "bottom";
+
+export declare interface MobileStepperProps extends React_2.HTMLAttributes<HTMLElement> {
+    /** Total number of steps. */
+    steps: number;
+    /** Zero-indexed active step, clamped to `0` – `steps - 1`. */
+    activeStep: number;
+    /** Step indicator style. @default "dots" */
+    variant?: MobileStepperVariant;
+    /** Content rendered on the left (typically a "Back" button). */
+    backButton?: React_2.ReactNode;
+    /** Content rendered on the right (typically a "Next" button). */
+    nextButton?: React_2.ReactNode;
+    /** Positioning mode. @default "static" */
+    position?: MobileStepperPosition;
+    /** Accessible label for the stepper region. @default "Progress" */
+    ariaLabel?: string;
+    /** Accessible label for the step progress indicator (dots/progress bar). @default "Step progress" */
+    stepProgressLabel?: string;
+    /**
+     * Formatter for the `aria-valuetext` on dots and progress variants.
+     * Receives `(activeStep, totalSteps)` where `activeStep` is 1-indexed.
+     * @default (active, total) => \`Step ${active} of ${total}\`
+     */
+    formatStepLabel?: (activeStep: number, totalSteps: number) => string;
+    /**
+     * Custom formatter for the text variant.
+     * Receives `(activeStep, steps)` where `activeStep` is 1-indexed for display.
+     * Only used when `variant` is `"text"`.
+     * @default (active, total) => \`${active} / ${total}\`
+     */
+    formatText?: (activeStep: number, totalSteps: number) => string;
+}
+
+/** Display variant for the step indicator. */
+export declare type MobileStepperVariant = "dots" | "progress" | "text";
+
 export declare const MoonIcon: React_2.ForwardRefExoticComponent<React_2.SVGAttributes<SVGSVGElement> & {
     className?: string;
 } & React_2.RefAttributes<SVGSVGElement>>;
@@ -1052,6 +1560,8 @@ export declare interface ProgressBarProps extends Omit<React_2.HTMLAttributes<HT
     leftIcon?: React_2.ReactNode;
     /** Accessible label for the `progressbar` role. @default "Progress" */
     ariaLabel?: string;
+    /** Human-readable text alternative for the current value (e.g. "Step 3 of 5"). */
+    ariaValueText?: string;
 }
 
 /** Track height — `"default"` (12px) or `"small"` (6px). */

package/dist/index.mjs

@@ -1,16 +1,25 @@
 "use client";
+import { Accordion } from "./components/Accordion/Accordion.mjs";
+import { AccordionContent } from "./components/Accordion/AccordionContent.mjs";
+import { AccordionItem } from "./components/Accordion/AccordionItem.mjs";
+import { AccordionTrigger } from "./components/Accordion/AccordionTrigger.mjs";
 import { Alert } from "./components/Alert/Alert.mjs";
 import { AudioUpload } from "./components/AudioUpload/AudioUpload.mjs";
 import { useAudioRecorder } from "./components/AudioUpload/useAudioRecorder.mjs";
+import { Autocomplete } from "./components/Autocomplete/Autocomplete.mjs";
 import { Avatar, AvatarFallback, AvatarImage, AvatarRoot } from "./components/Avatar/Avatar.mjs";
 import { Badge } from "./components/Badge/Badge.mjs";
+import { BottomNavigation } from "./components/BottomNavigation/BottomNavigation.mjs";
+import { BottomNavigationAction } from "./components/BottomNavigation/BottomNavigationAction.mjs";
 import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "./components/Breadcrumb/Breadcrumb.mjs";
 import { Button } from "./components/Button/Button.mjs";
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "./components/Card/Card.mjs";
 import { Checkbox } from "./components/Checkbox/Checkbox.mjs";
 import { Chip } from "./components/Chip/Chip.mjs";
 import { Count } from "./components/Count/Count.mjs";
+import { Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogTitle, DialogTrigger } from "./components/Dialog/Dialog.mjs";
 import { Divider } from "./components/Divider/Divider.mjs";
+import { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerTitle, DrawerTrigger } from "./components/Drawer/Drawer.mjs";
 import { IconButton } from "./components/IconButton/IconButton.mjs";
 import { AddIcon } from "./components/Icons/AddIcon.mjs";
 import { AIIcon } from "./components/Icons/AIIcon.mjs";
@@ -132,6 +141,7 @@ import { WifiOnIcon } from "./components/Icons/WifiOnIcon.mjs";
 import { WrenchIcon } from "./components/Icons/WrenchIcon.mjs";
 import { Loader } from "./components/Loader/Loader.mjs";
 import { Logo } from "./components/Logo/Logo.mjs";
+import { MobileStepper } from "./components/MobileStepper/MobileStepper.mjs";
 import { Pagination } from "./components/Pagination/Pagination.mjs";
 import { PasswordField } from "./components/PasswordField/PasswordField.mjs";
 import { Pill } from "./components/Pill/Pill.mjs";
@@ -157,6 +167,10 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./comp
 import { cn } from "./utils/cn.mjs";
 export {
   AIIcon,
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
   AddIcon,
   Alert,
   AlertIcon,
@@ -166,6 +180,7 @@ export {
   ArrowUpIcon,
   ArrowUpRightIcon,
   AudioUpload,
+  Autocomplete,
   Avatar,
   AvatarFallback,
   AvatarImage,
@@ -175,6 +190,8 @@ export {
   BellIcon,
   BellOffIcon,
   BoltIcon,
+  BottomNavigation,
+  BottomNavigationAction,
   Breadcrumb,
   BreadcrumbItem,
   BreadcrumbLink,
@@ -211,12 +228,31 @@ export {
   Count,
   CrossIcon,
   CrownIcon,
+  Dialog,
+  DialogBody,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogTitle,
+  DialogTrigger,
   DiamondIcon,
   DiscountIcon,
   Divider,
   DonateIcon,
   DoubleTickIcon,
   DownloadIcon,
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerOverlay,
+  DrawerTitle,
+  DrawerTrigger,
   EditIcon,
   EmojiIcon,
   ErrorCircleIcon,
@@ -255,6 +291,7 @@ export {
   MessageIcon,
   MicrophoneIcon,
   MinusIcon,
+  MobileStepper,
   MoonIcon,
   MoreIcon,
   MoreVerticalIcon,

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}