@dev-dga/react 0.4.0 → 0.6.0

package/dist/index.d.cts

@@ -2,15 +2,17 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { ReactNode } from 'react';
 import { VariantProps } from 'class-variance-authority';
-import { Checkbox as Checkbox$1, RadioGroup as RadioGroup$1, Switch as Switch$1, Select as Select$1 } from 'radix-ui';
+import { Checkbox as Checkbox$1, RadioGroup as RadioGroup$1, Switch as Switch$1, Select as Select$1, Avatar as Avatar$1, Tooltip as Tooltip$1, Dialog, Tabs as Tabs$1, Accordion as Accordion$1, Progress as Progress$1, DropdownMenu as DropdownMenu$1, Slider as Slider$1, Toggle as Toggle$1, ToggleGroup as ToggleGroup$1 } from 'radix-ui';
+import { Command } from 'cmdk';
 import { DgaTheme } from '@dev-dga/tokens';
 export { DgaTheme, PaletteName, ThemeColor } from '@dev-dga/tokens';
 import { ClassValue } from 'clsx';
 
 declare const buttonVariants: (props?: ({
-    variant?: "primary" | "secondary" | "outline" | "ghost" | "destructive" | null | undefined;
+    variant?: "primary" | "secondary" | "outline" | "ghost" | "destructive" | "destructive-outline" | "destructive-subtle" | "destructive-ghost" | null | undefined;
     size?: "sm" | "md" | "lg" | "icon" | "icon-sm" | null | undefined;
     fullWidth?: boolean | null | undefined;
+    inverted?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface ButtonProps extends React.ComponentProps<'button'>, VariantProps<typeof buttonVariants> {
     loading?: boolean;
@@ -35,7 +37,7 @@ interface ButtonProps extends React.ComponentProps<'button'>, VariantProps<typeo
      */
     asChild?: boolean;
 }
-declare function Button({ variant, size, fullWidth, loading, disabled, startIcon, endIcon, iconFlip, asChild, className, children, type, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
+declare function Button({ variant, size, fullWidth, inverted, loading, disabled, startIcon, endIcon, iconFlip, asChild, className, children, type, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
 
 declare const inputVariants: (props?: ({
     size?: "sm" | "md" | "lg" | null | undefined;
@@ -170,6 +172,959 @@ interface SelectItemProps extends React.ComponentProps<typeof Select$1.Item> {
 declare function Select({ id: externalId, label, helperText, errorMessage, error, size, required, placeholder, className, children, ...rootProps }: SelectProps): react_jsx_runtime.JSX.Element;
 declare function SelectItem({ className, children, ...props }: SelectItemProps): react_jsx_runtime.JSX.Element;
 
+declare const cardVariants: (props?: ({
+    variant?: "outline" | "ghost" | "default" | "elevated" | "filled" | "gradient" | null | undefined;
+    padding?: "sm" | "md" | "lg" | null | undefined;
+    orientation?: "horizontal" | "vertical" | null | undefined;
+    interactive?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface CardProps extends React.ComponentProps<'div'>, VariantProps<typeof cardVariants> {
+    /** Render as the single child element instead of a `<div>` (see Button). */
+    asChild?: boolean;
+}
+type CardSectionProps = React.ComponentProps<'div'> & {
+    asChild?: boolean;
+};
+interface CardTitleProps extends React.ComponentProps<'h3'> {
+    /** Override the heading element (e.g. render an `<h2>` or `<a>`). */
+    asChild?: boolean;
+}
+type CardDescriptionProps = React.ComponentProps<'p'> & {
+    asChild?: boolean;
+};
+interface CardImageProps extends React.ComponentProps<'img'> {
+    /**
+     * Aspect ratio of the image in vertical orientation (e.g. `'16/9'`, `'4/3'`,
+     * `'1/1'`). Default `'16/9'`. Ignored in horizontal orientation — the image
+     * fills the card's full height there.
+     */
+    aspectRatio?: string;
+}
+declare function Card({ variant, padding, orientation, interactive, asChild, className, ...props }: CardProps): react_jsx_runtime.JSX.Element;
+declare function CardImage({ aspectRatio, className, style, ...props }: CardImageProps): react_jsx_runtime.JSX.Element;
+declare function CardHeader({ asChild, className, ...props }: CardSectionProps): react_jsx_runtime.JSX.Element;
+declare function CardTitle({ asChild, className, ...props }: CardTitleProps): react_jsx_runtime.JSX.Element;
+declare function CardDescription({ asChild, className, ...props }: CardDescriptionProps): react_jsx_runtime.JSX.Element;
+declare function CardContent({ asChild, className, ...props }: CardSectionProps): react_jsx_runtime.JSX.Element;
+declare function CardFooter({ asChild, className, ...props }: CardSectionProps): react_jsx_runtime.JSX.Element;
+
+declare const badgeVariants: (props?: ({
+    variant?: "primary" | "secondary" | "outline" | "destructive" | "destructive-subtle" | "default" | "success" | "warning" | "info" | "primary-subtle" | "secondary-subtle" | "success-subtle" | "warning-subtle" | "info-subtle" | null | undefined;
+    size?: "sm" | "md" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface BadgeProps extends React.ComponentProps<'span'>, VariantProps<typeof badgeVariants> {
+    /** Render as the single child element instead of a `<span>` (see Button). */
+    asChild?: boolean;
+    /**
+     * Render a leading status dot. The dot inherits its color from `currentColor`
+     * so it tracks the badge's tone (subtle variants get a dark dot, solid get a
+     * white dot). Pair with `*-subtle` variants for the classic status pill.
+     * Coexists with `startIcon` — the dot lands first.
+     */
+    dot?: boolean;
+    /** Icon rendered before the badge text. Sized to the badge font (0.875em). */
+    startIcon?: ReactNode;
+    /** Icon rendered after the badge text. Sized to the badge font (0.875em). */
+    endIcon?: ReactNode;
+    /**
+     * Render a trailing close button — turns the badge into the DGA "tag/chip"
+     * pattern. Uncontrolled by default: the badge hides itself when the close
+     * button is clicked. Pass `open` to control visibility yourself.
+     *
+     * Not combinable with `asChild` — the consumer's slotted element (usually an
+     * `<a>`) would end up with an interactive `<button>` inside it, which is
+     * invalid HTML. In that combo the close button is suppressed and a dev
+     * warning is logged.
+     */
+    dismissible?: boolean;
+    /** Controlled visibility. When provided, `onDismiss` becomes the only signal. */
+    open?: boolean;
+    /** Fires when the close button is clicked, in both controlled and uncontrolled mode. */
+    onDismiss?: () => void;
+    /** Accessible label on the close button. Defaults to `"Dismiss"`. Override for i18n. */
+    closeLabel?: string;
+}
+declare function Badge({ variant, size, asChild, dot, startIcon, endIcon, dismissible, open, onDismiss, closeLabel, className, children, ...props }: BadgeProps): react_jsx_runtime.JSX.Element | null;
+
+declare const dividerVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | null | undefined;
+    variant?: "dashed" | "solid" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface DividerProps extends Omit<React.ComponentProps<'div'>, 'role'>, VariantProps<typeof dividerVariants> {
+    /**
+     * Optional label rendered inside a horizontal divider. Ignored when
+     * `orientation="vertical"`. When set, the divider renders as a three-part
+     * flex (line — label — line) instead of a single bar.
+     */
+    children?: React.ReactNode;
+    /**
+     * Where to place the label along the divider. Defaults to `center`. Ignored
+     * when no label is provided. `start` and `end` are logical (LTR/RTL aware).
+     */
+    labelPosition?: 'start' | 'center' | 'end';
+    /**
+     * If `true`, the divider is treated as purely decorative and removed from
+     * the accessibility tree (`role="none"`). Defaults to `false`.
+     */
+    decorative?: boolean;
+}
+declare function Divider({ orientation, variant, labelPosition, decorative, className, children, ...props }: DividerProps): react_jsx_runtime.JSX.Element;
+
+declare const avatarVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | "xs" | "xl" | null | undefined;
+    shape?: "square" | "circle" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const fallbackVariants: (props?: ({
+    colorScheme?: "primary" | "secondary" | "destructive" | "default" | "success" | "warning" | "info" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type AvatarStatus = 'online' | 'offline' | 'busy' | 'away';
+interface AvatarProps extends React.ComponentProps<typeof Avatar$1.Root>, VariantProps<typeof avatarVariants> {
+    /**
+     * Presence indicator rendered in the bottom-{end} corner. The color tracks
+     * the status (online → success, busy → destructive, away → warning,
+     * offline → muted). Position flips in RTL automatically via logical props.
+     */
+    status?: AvatarStatus;
+    /**
+     * Accessible label for the status indicator. Defaults to the status value
+     * (e.g. "online"). Pass a localized string for non-English UIs.
+     */
+    statusLabel?: string;
+}
+type AvatarImageProps = React.ComponentProps<typeof Avatar$1.Image>;
+interface AvatarFallbackProps extends React.ComponentProps<typeof Avatar$1.Fallback>, VariantProps<typeof fallbackVariants> {
+}
+interface AvatarGroupProps extends React.ComponentProps<'div'> {
+    /**
+     * Cap the number of visible Avatars. Excess children are collapsed into a
+     * trailing "+N" chip. When unset, every child is rendered.
+     */
+    max?: number;
+    /** Size cascaded to each child Avatar that doesn't already set its own size. */
+    size?: VariantProps<typeof avatarVariants>['size'];
+    /** Shape cascaded to each child Avatar that doesn't already set its own shape. */
+    shape?: VariantProps<typeof avatarVariants>['shape'];
+}
+declare function Avatar({ size, shape, status, statusLabel, className, children, ...props }: AvatarProps): react_jsx_runtime.JSX.Element;
+declare function AvatarImage({ className, ...props }: AvatarImageProps): react_jsx_runtime.JSX.Element;
+declare function AvatarFallback({ colorScheme, className, ...props }: AvatarFallbackProps): react_jsx_runtime.JSX.Element;
+declare function AvatarGroup({ max, size, shape, className, children, ...props }: AvatarGroupProps): react_jsx_runtime.JSX.Element;
+
+declare const tooltipContentVariants: (props?: ({
+    size?: "sm" | "md" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type TooltipProps = React.ComponentProps<typeof Tooltip$1.Root>;
+type TooltipTriggerProps = React.ComponentProps<typeof Tooltip$1.Trigger>;
+interface TooltipContentProps extends Omit<React.ComponentProps<typeof Tooltip$1.Content>, 'asChild'>, VariantProps<typeof tooltipContentVariants> {
+    /** Show a small arrow pointing at the trigger. Defaults to true. */
+    arrow?: boolean;
+}
+declare function Tooltip(props: TooltipProps): react_jsx_runtime.JSX.Element;
+declare function TooltipTrigger({ className, ...props }: TooltipTriggerProps): react_jsx_runtime.JSX.Element;
+declare function TooltipContent({ size, arrow, sideOffset, className, children, ...props }: TooltipContentProps): react_jsx_runtime.JSX.Element;
+
+declare const alertVariants: (props?: ({
+    variant?: "destructive" | "success" | "warning" | "info" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface AlertProps extends Omit<React.ComponentProps<'div'>, 'role'>, VariantProps<typeof alertVariants> {
+    /** Render as the single child element instead of a `<div>`. */
+    asChild?: boolean;
+    /**
+     * Custom leading icon. Pass `false` to hide the icon entirely. Defaults to
+     * a variant-appropriate icon (Info / Check / AlertTriangle / AlertCircle).
+     */
+    icon?: ReactNode | false;
+    /**
+     * Show a trailing close button. The alert manages its own visibility — pass
+     * `onDismiss` to be notified, or set `open` to control visibility yourself.
+     */
+    dismissible?: boolean;
+    /** Controlled visibility. Pair with `onDismiss` to react. */
+    open?: boolean;
+    /** Fires when the user clicks the close button. */
+    onDismiss?: () => void;
+    /**
+     * Wire the alert into the a11y tree as a live region. `polite` announces on
+     * the next graceful opportunity (use for success/info banners). `assertive`
+     * interrupts the user (reserve for destructive/error states that block the
+     * task). Omit for static / decorative banners.
+     */
+    live?: 'polite' | 'assertive';
+    /** Localized label for the close button. Defaults to `"Dismiss"`. */
+    closeLabel?: string;
+}
+type AlertSectionProps = React.ComponentProps<'div'> & {
+    asChild?: boolean;
+};
+interface AlertTitleProps extends React.ComponentProps<'h5'> {
+    /** Override the heading element (e.g. render an `<h3>`). */
+    asChild?: boolean;
+}
+type AlertDescriptionProps = React.ComponentProps<'p'> & {
+    asChild?: boolean;
+};
+declare function Alert({ variant, asChild, icon, dismissible, open: controlledOpen, onDismiss, live, closeLabel, className, children, ...props }: AlertProps): react_jsx_runtime.JSX.Element | null;
+declare function AlertTitle({ asChild, className, ...props }: AlertTitleProps): react_jsx_runtime.JSX.Element;
+declare function AlertDescription({ asChild, className, ...props }: AlertDescriptionProps): react_jsx_runtime.JSX.Element;
+
+declare const modalContentVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | "xl" | "full" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type ModalProps = React.ComponentProps<typeof Dialog.Root>;
+type ModalTriggerProps = React.ComponentProps<typeof Dialog.Trigger>;
+type ModalCloseProps = React.ComponentProps<typeof Dialog.Close>;
+interface ModalContentProps extends React.ComponentProps<typeof Dialog.Content>, VariantProps<typeof modalContentVariants> {
+    /**
+     * Render a corner X close button. Defaults to `true`. Set `false` for
+     * action-forcing dialogs (e.g. "Are you sure?") where the user must pick
+     * one of the explicit footer buttons.
+     */
+    showCloseButton?: boolean;
+    /** Localized label for the close button. Defaults to `"Close"`. */
+    closeLabel?: string;
+}
+type ModalSectionProps = React.ComponentProps<'div'> & {
+    asChild?: boolean;
+};
+interface ModalTitleProps extends React.ComponentProps<typeof Dialog.Title> {
+    /** Override the heading element (e.g. render an `<h3>` instead of the default `<h2>`). */
+    asChild?: boolean;
+}
+interface ModalDescriptionProps extends React.ComponentProps<typeof Dialog.Description> {
+    /** Override the element (e.g. render a `<div>` for richer markup). */
+    asChild?: boolean;
+}
+declare function Modal(props: ModalProps): react_jsx_runtime.JSX.Element;
+declare function ModalTrigger({ className, ...props }: ModalTriggerProps): react_jsx_runtime.JSX.Element;
+declare function ModalContent({ size, showCloseButton, closeLabel, className, children, ...props }: ModalContentProps): react_jsx_runtime.JSX.Element;
+declare function ModalHeader({ asChild, className, ...props }: ModalSectionProps): react_jsx_runtime.JSX.Element;
+declare function ModalTitle({ asChild, className, ...props }: ModalTitleProps): react_jsx_runtime.JSX.Element;
+declare function ModalDescription({ asChild, className, ...props }: ModalDescriptionProps): react_jsx_runtime.JSX.Element;
+declare function ModalFooter({ asChild, className, ...props }: ModalSectionProps): react_jsx_runtime.JSX.Element;
+declare function ModalClose({ className, ...props }: ModalCloseProps): react_jsx_runtime.JSX.Element;
+
+type ToastVariant = 'default' | 'info' | 'success' | 'warning' | 'destructive';
+interface ToastAction {
+    /** Visible label on the action button. */
+    label: ReactNode;
+    /** Required by Radix Toast for screen-reader announcement when the action
+     *  isn't a simple string label. Falls back to `label` when it's a string. */
+    altText?: string;
+    /** Fired when the action button is pressed. Toast auto-dismisses after. */
+    onClick: () => void;
+}
+interface ToastData {
+    /** Auto-generated unless caller provides one (useful for de-dup / updates). */
+    id: string;
+    title?: ReactNode;
+    description?: ReactNode;
+    variant: ToastVariant;
+    /** ms; `0` (or `Infinity`) means no auto-dismiss. Defaults handled by Toaster. */
+    duration?: number;
+    action?: ToastAction;
+    /** Controlled by Radix Toast (true while visible; false plays exit anim). */
+    open: boolean;
+    /** Fires when the toast leaves the DOM (after exit anim). */
+    onDismiss?: () => void;
+}
+interface ToastOptions {
+    id?: string;
+    title?: ReactNode;
+    description?: ReactNode;
+    duration?: number;
+    action?: ToastAction;
+    onDismiss?: () => void;
+}
+type Listener = () => void;
+/** Public store shape. `<Toaster store={…} />` accepts this, and
+ *  `createToast(store)` returns a scoped `toast()` bound to it. */
+interface ToastStore {
+    subscribe(listener: Listener): () => void;
+    getSnapshot(): ToastData[];
+    add(variant: ToastVariant, message: ReactNode, options?: ToastOptions): string;
+    dismiss(id?: string): void;
+    remove(id: string): void;
+    /** Test-only / story-only: hard reset. */
+    __reset(): void;
+}
+declare function createToastStore(): ToastStore;
+declare const toastStore: ToastStore;
+interface ToastFn {
+    (message: ReactNode, options?: ToastOptions): string;
+    default: (message: ReactNode, options?: ToastOptions) => string;
+    info: (message: ReactNode, options?: ToastOptions) => string;
+    success: (message: ReactNode, options?: ToastOptions) => string;
+    warning: (message: ReactNode, options?: ToastOptions) => string;
+    error: (message: ReactNode, options?: ToastOptions) => string;
+    /** Alias for `error` — matches the variant name used everywhere else in the library. */
+    destructive: (message: ReactNode, options?: ToastOptions) => string;
+    /** Dismiss a specific toast by id, or all when called with no args. */
+    dismiss: (id?: string) => void;
+}
+/** Bind an imperative `toast()` callable to a specific store. */
+declare function createToast(store: ToastStore): ToastFn;
+/** Default singleton `toast()` — bound to the module-level `toastStore`. */
+declare const toast: ToastFn;
+
+declare const toastVariants: (props?: ({
+    variant?: "destructive" | "default" | "success" | "warning" | "info" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const toastViewportVariants: (props?: ({
+    position?: "top-start" | "top-center" | "top-end" | "bottom-start" | "bottom-center" | "bottom-end" | null | undefined;
+    containerized?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type ToastPosition = NonNullable<VariantProps<typeof toastViewportVariants>['position']>;
+interface ToasterProps {
+    /** Where toasts stack. Logical: start/end flip in RTL. Default `bottom-end`. */
+    position?: ToastPosition;
+    /**
+     * Pin the viewport to a positioned ancestor (via `position: absolute`)
+     * instead of the browser viewport (`position: fixed`). Set this for
+     * Storybook stories, embedded widgets, and any layout where the Toaster
+     * should stay within a parent box. Caller is responsible for placing the
+     * Toaster inside an element with `position: relative` (or other positioned
+     * containing block).
+     */
+    containerized?: boolean;
+    /** ms; default 4000. Set 0 (or Infinity) to disable auto-dismiss globally. */
+    duration?: number;
+    /** Show a close (X) button on each toast. Defaults to true. */
+    closeButton?: boolean;
+    /** Localized label for the close button. Default `"Dismiss"`. */
+    closeLabel?: string;
+    /** Hide the default leading icon per variant. */
+    hideIcon?: boolean;
+    /** Extra class on the Radix Viewport. */
+    className?: string;
+    /** Override swipe direction. Defaults based on `position`. */
+    swipeDirection?: 'up' | 'down' | 'left' | 'right';
+    /**
+     * The toast store this Toaster subscribes to. Defaults to the module-level
+     * singleton so the bare `toast()` API works without setup. Pass an isolated
+     * store (created via `createToastStore()` + `createToast(store)`) when you
+     * need multiple independent Toasters on the same page — common in
+     * Storybook, docs sites, and embedded widgets.
+     */
+    store?: ToastStore;
+}
+declare function Toaster({ position, containerized, duration, closeButton, closeLabel, hideIcon, className, swipeDirection, store, }: ToasterProps): react_jsx_runtime.JSX.Element;
+
+declare const tabsVariants: (props?: ({
+    variant?: "line" | "pill" | null | undefined;
+    size?: "sm" | "md" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const tabsListVariants: (props?: ({
+    fullWidth?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface TabsProps extends React.ComponentProps<typeof Tabs$1.Root>, VariantProps<typeof tabsVariants> {
+}
+interface TabsListProps extends React.ComponentProps<typeof Tabs$1.List>, VariantProps<typeof tabsListVariants> {
+}
+type TabsTriggerProps = React.ComponentProps<typeof Tabs$1.Trigger>;
+type TabsContentProps = React.ComponentProps<typeof Tabs$1.Content>;
+declare function Tabs({ variant, size, className, ...props }: TabsProps): react_jsx_runtime.JSX.Element;
+declare function TabsList({ fullWidth, className, ...props }: TabsListProps): react_jsx_runtime.JSX.Element;
+declare function TabsTrigger({ className, ...props }: TabsTriggerProps): react_jsx_runtime.JSX.Element;
+declare function TabsContent({ className, ...props }: TabsContentProps): react_jsx_runtime.JSX.Element;
+
+declare const breadcrumbVariants: (props?: ({
+    size?: "sm" | "md" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface BreadcrumbProps extends React.ComponentProps<'nav'>, VariantProps<typeof breadcrumbVariants> {
+}
+type BreadcrumbListProps = React.ComponentProps<'ol'>;
+type BreadcrumbItemProps = React.ComponentProps<'li'>;
+interface BreadcrumbLinkProps extends React.ComponentProps<'a'> {
+    /** Render as the consumer element (e.g., a router Link) via Radix Slot. */
+    asChild?: boolean;
+}
+interface BreadcrumbPageProps extends React.ComponentProps<'span'> {
+    /** Render as the consumer element (e.g., a heading) via Radix Slot. */
+    asChild?: boolean;
+}
+interface BreadcrumbSeparatorProps extends React.ComponentProps<'li'> {
+    /**
+     * Override the default ChevronRight icon with custom content (e.g., `/`, `·`,
+     * or your own SVG). The wrapper itself stays `aria-hidden` since separators
+     * are decorative — the visited-state structure is conveyed via the `<ol>`
+     * + `aria-current` semantics, not the separator glyph.
+     */
+    children?: React.ReactNode;
+}
+type BreadcrumbEllipsisProps = React.ComponentProps<'span'>;
+declare function Breadcrumb({ size, className, ...props }: BreadcrumbProps): react_jsx_runtime.JSX.Element;
+declare function BreadcrumbList({ className, ...props }: BreadcrumbListProps): react_jsx_runtime.JSX.Element;
+declare function BreadcrumbItem({ className, ...props }: BreadcrumbItemProps): react_jsx_runtime.JSX.Element;
+declare function BreadcrumbLink({ asChild, className, ...props }: BreadcrumbLinkProps): react_jsx_runtime.JSX.Element;
+declare function BreadcrumbPage({ asChild, className, ...props }: BreadcrumbPageProps): react_jsx_runtime.JSX.Element;
+declare function BreadcrumbSeparator({ children, className, ...props }: BreadcrumbSeparatorProps): react_jsx_runtime.JSX.Element;
+declare function BreadcrumbEllipsis({ className, ...props }: BreadcrumbEllipsisProps): react_jsx_runtime.JSX.Element;
+
+declare const paginationVariants: (props?: ({
+    size?: "sm" | "md" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const paginationLinkVariants: (props?: ({
+    isActive?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface PaginationProps extends React.ComponentProps<'nav'>, VariantProps<typeof paginationVariants> {
+}
+type PaginationContentProps = React.ComponentProps<'ul'>;
+type PaginationItemProps = React.ComponentProps<'li'>;
+interface PaginationLinkProps extends Omit<React.ComponentProps<'a'>, 'aria-current'>, VariantProps<typeof paginationLinkVariants> {
+    /** Render as the consumer element (e.g., router Link) via Radix Slot. */
+    asChild?: boolean;
+}
+type PaginationPreviousProps = Omit<PaginationLinkProps, 'isActive'> & {
+    /**
+     * Visible + accessible label for the previous-page link. Defaults to
+     * `"Previous"`. Pass a translated string for non-English UIs — the value is
+     * also used for `aria-label`, so a localized string is required for a11y.
+     * Ignored when `asChild` + consumer-provided `children` are used.
+     */
+    label?: string;
+};
+type PaginationNextProps = Omit<PaginationLinkProps, 'isActive'> & {
+    /**
+     * Visible + accessible label for the next-page link. Defaults to `"Next"`.
+     * Pass a translated string for non-English UIs — the value is also used
+     * for `aria-label`, so a localized string is required for a11y. Ignored
+     * when `asChild` + consumer-provided `children` are used.
+     */
+    label?: string;
+};
+type PaginationEllipsisProps = React.ComponentProps<'span'>;
+declare function Pagination({ size, className, ...props }: PaginationProps): react_jsx_runtime.JSX.Element;
+declare function PaginationContent({ className, ...props }: PaginationContentProps): react_jsx_runtime.JSX.Element;
+declare function PaginationItem({ className, ...props }: PaginationItemProps): react_jsx_runtime.JSX.Element;
+declare function PaginationLink({ asChild, isActive, className, ...props }: PaginationLinkProps): react_jsx_runtime.JSX.Element;
+declare function PaginationPrevious({ label, className, children, asChild, ...props }: PaginationPreviousProps): react_jsx_runtime.JSX.Element;
+declare function PaginationNext({ label, className, children, asChild, ...props }: PaginationNextProps): react_jsx_runtime.JSX.Element;
+declare function PaginationEllipsis({ className, ...props }: PaginationEllipsisProps): react_jsx_runtime.JSX.Element;
+
+declare const accordionVariants: (props?: ({
+    size?: "sm" | "md" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type AccordionRootProps = React.ComponentProps<typeof Accordion$1.Root>;
+type AccordionProps = AccordionRootProps & VariantProps<typeof accordionVariants>;
+type AccordionItemProps = React.ComponentProps<typeof Accordion$1.Item>;
+type AccordionTriggerProps = React.ComponentProps<typeof Accordion$1.Trigger>;
+type AccordionContentProps = React.ComponentProps<typeof Accordion$1.Content>;
+declare function Accordion({ size, className, ...props }: AccordionProps): react_jsx_runtime.JSX.Element;
+declare function AccordionItem({ className, ...props }: AccordionItemProps): react_jsx_runtime.JSX.Element;
+declare function AccordionTrigger({ className, children, ...props }: AccordionTriggerProps): react_jsx_runtime.JSX.Element;
+declare function AccordionContent({ className, children, ...props }: AccordionContentProps): react_jsx_runtime.JSX.Element;
+
+declare const stepsVariants: (props?: ({
+    size?: "sm" | "md" | null | undefined;
+    orientation?: "horizontal" | "vertical" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type StepState = 'completed' | 'current' | 'upcoming';
+declare const stepVariants: (props?: ({
+    state?: "current" | "completed" | "upcoming" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface StepsProps extends React.ComponentProps<'ol'>, VariantProps<typeof stepsVariants> {
+}
+interface StepProps extends Omit<React.ComponentProps<'li'>, 'aria-current'>, VariantProps<typeof stepVariants> {
+}
+interface StepIndicatorProps extends React.ComponentProps<'span'> {
+    /**
+     * The 1-based step number to render when the step is `current` or
+     * `upcoming`. Ignored when the step is `completed` — the indicator shows
+     * a check icon instead.
+     */
+    step?: number | string;
+}
+type StepTitleProps = React.ComponentProps<'span'>;
+type StepDescriptionProps = React.ComponentProps<'span'>;
+declare function Steps({ size, orientation, className, ...props }: StepsProps): react_jsx_runtime.JSX.Element;
+declare function Step({ state, className, ...props }: StepProps): react_jsx_runtime.JSX.Element;
+declare function StepIndicator({ step, className, ...props }: StepIndicatorProps): react_jsx_runtime.JSX.Element;
+declare function StepTitle({ className, ...props }: StepTitleProps): react_jsx_runtime.JSX.Element;
+declare function StepDescription({ className, ...props }: StepDescriptionProps): react_jsx_runtime.JSX.Element;
+
+declare const spinnerVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type SpinnerProps = Omit<React.SVGProps<SVGSVGElement>, 'children'> & VariantProps<typeof spinnerVariants> & {
+    /**
+     * Accessible label announced by screen readers. Defaults to "Loading".
+     * Pass `aria-hidden="true"` (e.g. inside a Button that already has its
+     * own label) to suppress.
+     */
+    'aria-label'?: string;
+};
+declare function Spinner({ size, className, 'aria-label': ariaLabel, ...props }: SpinnerProps): react_jsx_runtime.JSX.Element;
+
+declare const skeletonVariants: (props?: ({
+    shape?: "text" | "circle" | "rectangle" | null | undefined;
+    animation?: "none" | "pulse" | "wave" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface SkeletonProps extends React.ComponentProps<'div'>, VariantProps<typeof skeletonVariants> {
+    /**
+     * Inline width override (any valid CSS length, e.g. `"60%"`, `200`, `"4rem"`).
+     * Defaults: `text` → `100%`, `circle`/`rectangle` → `40px` (CSS-controlled).
+     */
+    width?: number | string;
+    /**
+     * Inline height override. Defaults: `text` → `1em` so it tracks the surrounding
+     * line height; `rectangle` → `40px`; `circle` → matches `width` to stay round.
+     */
+    height?: number | string;
+}
+declare function Skeleton({ shape, animation, width, height, className, style, ...props }: SkeletonProps): react_jsx_runtime.JSX.Element;
+
+declare const progressVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+    color?: "primary" | "destructive" | "success" | "warning" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const circularProgressVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+    color?: "primary" | "destructive" | "success" | "warning" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type ProgressOwnProps = VariantProps<typeof progressVariants> & {
+    /**
+     * Current progress. `null` (or omitted) renders the indeterminate animation.
+     * Otherwise clamp yourself to `[0, max]` — Radix Progress assumes the value
+     * is in range.
+     */
+    value?: number | null;
+    /** Maximum value. Defaults to 100. */
+    max?: number;
+    /**
+     * Accessible label for the progressbar. Required for assistive tech —
+     * Radix logs a warning if neither `aria-label` nor `aria-labelledby` is set.
+     */
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+};
+type ProgressProps = ProgressOwnProps & Omit<React.ComponentProps<typeof Progress$1.Root>, keyof ProgressOwnProps>;
+declare function Progress({ value, max, size, color, className, ...props }: ProgressProps): react_jsx_runtime.JSX.Element;
+type CircularProgressOwnProps = VariantProps<typeof circularProgressVariants> & {
+    value?: number | null;
+    max?: number;
+    /** Stroke width in px. Defaults to 4 (sm) / 5 (md) / 6 (lg). */
+    thickness?: number;
+    /** Render the percentage label inside the ring. */
+    showLabel?: boolean;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+};
+type CircularProgressProps = CircularProgressOwnProps & Omit<React.ComponentProps<'div'>, keyof CircularProgressOwnProps>;
+declare function CircularProgress({ value, max, size, color, thickness, showLabel, className, ...props }: CircularProgressProps): react_jsx_runtime.JSX.Element;
+
+declare const dropdownMenuVariants: (props?: ({
+    size?: "sm" | "md" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type DropdownMenuProps = React.ComponentProps<typeof DropdownMenu$1.Root>;
+declare function DropdownMenu(props: DropdownMenuProps): react_jsx_runtime.JSX.Element;
+type DropdownMenuTriggerProps = React.ComponentProps<typeof DropdownMenu$1.Trigger>;
+declare function DropdownMenuTrigger(props: DropdownMenuTriggerProps): react_jsx_runtime.JSX.Element;
+type DropdownMenuContentProps = React.ComponentProps<typeof DropdownMenu$1.Content> & VariantProps<typeof dropdownMenuVariants>;
+declare function DropdownMenuContent({ size, className, sideOffset, ...props }: DropdownMenuContentProps): react_jsx_runtime.JSX.Element;
+type DropdownMenuItemProps = React.ComponentProps<typeof DropdownMenu$1.Item> & {
+    /** Style as a destructive action (red text, red hover). */
+    destructive?: boolean;
+    /** Icon rendered before the label. Sized to 1em. */
+    startIcon?: ReactNode;
+    /** Trailing text shown muted, e.g. a keyboard shortcut hint ("⌘K"). */
+    shortcut?: ReactNode;
+};
+declare function DropdownMenuItem({ className, destructive, startIcon, shortcut, children, ...props }: DropdownMenuItemProps): react_jsx_runtime.JSX.Element;
+type DropdownMenuCheckboxItemProps = React.ComponentProps<typeof DropdownMenu$1.CheckboxItem>;
+declare function DropdownMenuCheckboxItem({ className, children, onSelect, ...props }: DropdownMenuCheckboxItemProps): react_jsx_runtime.JSX.Element;
+type DropdownMenuRadioGroupProps = React.ComponentProps<typeof DropdownMenu$1.RadioGroup>;
+declare function DropdownMenuRadioGroup(props: DropdownMenuRadioGroupProps): react_jsx_runtime.JSX.Element;
+type DropdownMenuRadioItemProps = React.ComponentProps<typeof DropdownMenu$1.RadioItem>;
+declare function DropdownMenuRadioItem({ className, children, onSelect, ...props }: DropdownMenuRadioItemProps): react_jsx_runtime.JSX.Element;
+type DropdownMenuLabelProps = React.ComponentProps<typeof DropdownMenu$1.Label>;
+declare function DropdownMenuLabel({ className, ...props }: DropdownMenuLabelProps): react_jsx_runtime.JSX.Element;
+type DropdownMenuSeparatorProps = React.ComponentProps<typeof DropdownMenu$1.Separator>;
+declare function DropdownMenuSeparator({ className, ...props }: DropdownMenuSeparatorProps): react_jsx_runtime.JSX.Element;
+type DropdownMenuGroupProps = React.ComponentProps<typeof DropdownMenu$1.Group>;
+declare function DropdownMenuGroup(props: DropdownMenuGroupProps): react_jsx_runtime.JSX.Element;
+type DropdownMenuSubProps = React.ComponentProps<typeof DropdownMenu$1.Sub>;
+declare function DropdownMenuSub(props: DropdownMenuSubProps): react_jsx_runtime.JSX.Element;
+type DropdownMenuSubTriggerProps = React.ComponentProps<typeof DropdownMenu$1.SubTrigger> & {
+    startIcon?: ReactNode;
+};
+declare function DropdownMenuSubTrigger({ className, startIcon, children, ...props }: DropdownMenuSubTriggerProps): react_jsx_runtime.JSX.Element;
+type DropdownMenuSubContentProps = React.ComponentProps<typeof DropdownMenu$1.SubContent> & VariantProps<typeof dropdownMenuVariants>;
+declare function DropdownMenuSubContent({ size, className, ...props }: DropdownMenuSubContentProps): react_jsx_runtime.JSX.Element;
+
+declare const drawerVariants: (props?: ({
+    side?: "end" | "start" | "bottom" | "top" | null | undefined;
+    size?: "sm" | "md" | "lg" | "full" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type DrawerProps = React.ComponentProps<typeof Dialog.Root>;
+type DrawerTriggerProps = React.ComponentProps<typeof Dialog.Trigger>;
+type DrawerCloseProps = React.ComponentProps<typeof Dialog.Close>;
+interface DrawerContentProps extends React.ComponentProps<typeof Dialog.Content>, VariantProps<typeof drawerVariants> {
+    /** Show the corner X close button. Defaults to `true`. */
+    showCloseButton?: boolean;
+    /** Localized aria-label for the close button. Defaults to `"Close"`. */
+    closeLabel?: string;
+}
+type DrawerSectionProps = React.ComponentProps<'div'> & {
+    asChild?: boolean;
+};
+interface DrawerTitleProps extends React.ComponentProps<typeof Dialog.Title> {
+    asChild?: boolean;
+}
+interface DrawerDescriptionProps extends React.ComponentProps<typeof Dialog.Description> {
+    asChild?: boolean;
+}
+declare function Drawer(props: DrawerProps): react_jsx_runtime.JSX.Element;
+declare function DrawerTrigger({ className, ...props }: DrawerTriggerProps): react_jsx_runtime.JSX.Element;
+declare function DrawerContent({ side, size, showCloseButton, closeLabel, className, children, ...props }: DrawerContentProps): react_jsx_runtime.JSX.Element;
+declare function DrawerHeader({ asChild, className, ...props }: DrawerSectionProps): react_jsx_runtime.JSX.Element;
+declare function DrawerTitle({ asChild, className, ...props }: DrawerTitleProps): react_jsx_runtime.JSX.Element;
+declare function DrawerDescription({ asChild, className, ...props }: DrawerDescriptionProps): react_jsx_runtime.JSX.Element;
+declare function DrawerBody({ asChild, className, ...props }: DrawerSectionProps): react_jsx_runtime.JSX.Element;
+declare function DrawerFooter({ asChild, className, ...props }: DrawerSectionProps): react_jsx_runtime.JSX.Element;
+declare function DrawerClose({ className, ...props }: DrawerCloseProps): react_jsx_runtime.JSX.Element;
+
+declare const comboboxTriggerVariants: (props?: ({
+    size?: "sm" | "md" | null | undefined;
+    error?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const comboboxVariants: (props?: ({
+    size?: "sm" | "md" | null | undefined;
+    error?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface ComboboxProps extends VariantProps<typeof comboboxTriggerVariants> {
+    /** Currently selected option value (controlled). */
+    value?: string;
+    /** Initial value when uncontrolled. */
+    defaultValue?: string;
+    /** Fires whenever the selection changes (controlled or uncontrolled). */
+    onValueChange?: (value: string) => void;
+    /** Controlled popover open state. */
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Visible label above the trigger. */
+    label?: ReactNode;
+    /** Hint shown below the trigger when there's no error. */
+    helperText?: ReactNode;
+    /** Message shown below the trigger when `error` is true. */
+    errorMessage?: ReactNode;
+    /** Marks the field invalid — sets `aria-invalid` and the error border. */
+    error?: boolean;
+    /** Marks the field required — adds the asterisk + `aria-required`. */
+    required?: boolean;
+    /** Disables the trigger entirely. */
+    disabled?: boolean;
+    /** Placeholder shown in the trigger when no value is selected. */
+    placeholder?: ReactNode;
+    /** Placeholder for the search input inside the panel. Defaults to `"Search…"`. */
+    searchPlaceholder?: string;
+    /** Shown when no item matches the search query. Defaults to `"No results."`. */
+    emptyMessage?: ReactNode;
+    /**
+     * Override the trigger label resolver — useful when items are loaded async
+     * after the value is set, or when the trigger should show a richer label
+     * than the item's rendered children. Receives the current value, returns
+     * the node to display. Falls back to the registered item's label.
+     */
+    getLabel?: (value: string) => ReactNode;
+    /** Caller-supplied id for the trigger; falls back to a generated one. */
+    id?: string;
+    /** Forwarded to the trigger (the focusable button). */
+    className?: string;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    /** `<ComboboxItem>` (+ optional Group / Separator) children. */
+    children: ReactNode;
+}
+interface ComboboxItemProps extends Omit<React.ComponentProps<typeof Command.Item>, 'value' | 'onSelect'> {
+    /** Stable value for filtering + selection. */
+    value: string;
+    /** Extra search terms cmdk should match against the input. */
+    keywords?: string[];
+    /** Disable this item from selection. */
+    disabled?: boolean;
+    /** Optional select handler — fires alongside the root's `onValueChange`. */
+    onSelect?: (value: string) => void;
+}
+interface ComboboxGroupProps extends React.ComponentProps<typeof Command.Group> {
+    /** Group heading rendered above its items. */
+    heading?: ReactNode;
+}
+type ComboboxSeparatorProps = React.ComponentProps<typeof Command.Separator>;
+declare function Combobox({ value: controlledValue, defaultValue, onValueChange, open: controlledOpen, defaultOpen, onOpenChange, label, helperText, errorMessage, error, required, disabled, size, placeholder, searchPlaceholder, emptyMessage, getLabel, id: externalId, className, children, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, }: ComboboxProps): react_jsx_runtime.JSX.Element;
+declare function ComboboxItem({ value, keywords, disabled, onSelect, className, children, ...props }: ComboboxItemProps): react_jsx_runtime.JSX.Element;
+declare function ComboboxGroup({ className, heading, ...props }: ComboboxGroupProps): react_jsx_runtime.JSX.Element;
+declare function ComboboxSeparator({ className, ...props }: ComboboxSeparatorProps): react_jsx_runtime.JSX.Element;
+
+declare const datePickerTriggerVariants: (props?: ({
+    size?: "sm" | "md" | null | undefined;
+    error?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const datePickerVariants: (props?: ({
+    size?: "sm" | "md" | null | undefined;
+    error?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type CalendarSystem = 'gregorian' | 'hijri';
+interface CalendarLabels {
+    gregorian: string;
+    hijri: string;
+}
+interface DatePickerProps extends VariantProps<typeof datePickerTriggerVariants> {
+    /** Currently selected date (controlled). Local Y/M/D. */
+    value?: Date | null;
+    /** Initial value when uncontrolled. */
+    defaultValue?: Date | null;
+    /** Fires whenever the user picks a day. `null` when cleared. */
+    onChange?: (value: Date | null) => void;
+    /** Earliest pickable date (inclusive). */
+    minValue?: Date;
+    /** Latest pickable date (inclusive). */
+    maxValue?: Date;
+    /** Visible label above the trigger. */
+    label?: ReactNode;
+    /** Hint shown below the trigger. Hidden while an error message is showing. */
+    helperText?: ReactNode;
+    /** Message shown below the trigger when `error` is true. */
+    errorMessage?: ReactNode;
+    /** Marks the field invalid — sets `aria-invalid` and error styling. */
+    error?: boolean;
+    /** Marks the field required — adds the asterisk + `aria-required`. */
+    required?: boolean;
+    /** Disables the trigger entirely. */
+    disabled?: boolean;
+    /** Caller-supplied id for the field. */
+    id?: string;
+    /** Forwarded to the Group (the trigger row), matching Input/Select. */
+    className?: string;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    /**
+     * Calendar system (controlled). Omit to let the user toggle freely with
+     * the in-popover switch.
+     */
+    calendar?: CalendarSystem;
+    /** Initial calendar system when uncontrolled. Defaults to `'gregorian'`. */
+    defaultCalendar?: CalendarSystem;
+    /** Fires whenever the calendar system toggles. */
+    onCalendarChange?: (calendar: CalendarSystem) => void;
+    /**
+     * Show the Gregorian↔Hijri toggle inside the popover. Defaults to `true`,
+     * but is forced off when `calendar` is controlled — a toggle that ignores
+     * its click is a worse footgun than no toggle.
+     */
+    showCalendarToggle?: boolean;
+    /** Override the toggle labels. Defaults are locale-aware (English / Arabic). */
+    calendarLabels?: CalendarLabels;
+    /**
+     * When `true`, each day cell also shows the *other* calendar's day number
+     * as small secondary text (e.g., Hijri active → Gregorian day shown small
+     * underneath). Helps users cross-reference dates between calendar systems
+     * without round-tripping the toggle. Defaults to `false`.
+     */
+    showSecondaryCalendar?: boolean;
+}
+declare function DatePicker({ value: controlledValue, defaultValue, onChange, minValue, maxValue, label, helperText, errorMessage, error, required, disabled, size, id, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, calendar: controlledCalendar, defaultCalendar, onCalendarChange, showCalendarToggle, calendarLabels, showSecondaryCalendar, }: DatePickerProps): react_jsx_runtime.JSX.Element;
+
+type FileStatus = 'pending' | 'uploading' | 'success' | 'error';
+/** Reason codes attached to a rejected file. */
+type RejectionCode = 'file-too-large' | 'file-invalid-type' | 'too-many-files';
+/**
+ * A controlled file entry. The consumer owns this array and is responsible for
+ * performing the actual upload, updating `status`/`progress`, and assigning a
+ * stable `id` (used as the React key and the `onRemove` target).
+ */
+interface UploadFile {
+    /** Stable, consumer-assigned id. Used as the React key and remove target. */
+    id: string;
+    /** The native File. */
+    file: File;
+    /** Defaults to `'pending'`. Drives the per-row affordance. */
+    status?: FileStatus;
+    /** 0–100. Rendered as a {@link Progress} bar while `status === 'uploading'`. */
+    progress?: number;
+    /** Shown inline (red) while `status === 'error'`. */
+    error?: string;
+}
+interface FileRejection {
+    file: File;
+    errors: RejectionCode[];
+}
+interface FileUploadProps {
+    /** Controlled list of files to render. The consumer is the source of truth. */
+    files: UploadFile[];
+    /** Called with the files that passed validation. The consumer wraps each in
+     *  an {@link UploadFile} (assigning an `id`) and starts the upload. */
+    onFilesAdded: (accepted: File[]) => void;
+    /** Called with files that failed validation. Never enter `files`. */
+    onFilesRejected?: (rejections: FileRejection[]) => void;
+    /** Per-row remove handler. Omit to hide the remove button. */
+    onRemove?: (id: string) => void;
+    /** Native `accept` string (e.g. `'image/*,.pdf'`). Also drives validation. */
+    accept?: string;
+    /** Maximum size per file, in bytes. */
+    maxSize?: number;
+    /** Maximum total files (existing + incoming). When `multiple` is false this
+     *  is forced to 1. */
+    maxFiles?: number;
+    /** Allow selecting/dropping more than one file. Defaults to true. */
+    multiple?: boolean;
+    /** Disables the drop zone and the picker. */
+    disabled?: boolean;
+    /** Marks the field required: renders the asterisk and sets the input's
+     *  `required` attribute. */
+    required?: boolean;
+    /** Visible field label, auto-associated to the input. */
+    label?: ReactNode;
+    /** Hint shown below the field. Hidden while an error message is showing. */
+    helperText?: ReactNode;
+    /** Message shown below the field when `error` is true. */
+    errorMessage?: ReactNode;
+    /** Marks the field invalid: sets `aria-invalid` and error styling. */
+    error?: boolean;
+    /** Drop-zone instructional copy. Defaults to a bilingual-friendly EN string. */
+    hint?: ReactNode;
+    /** Accessible label for the per-row remove button. Defaults to `'Remove'`. */
+    removeLabel?: string;
+    id?: string;
+    className?: string;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+}
+declare function FileUpload({ files, onFilesAdded, onFilesRejected, onRemove, accept, maxSize, maxFiles, multiple, disabled, required, label, helperText, errorMessage, error, hint, removeLabel, id: externalId, className, ...props }: FileUploadProps): react_jsx_runtime.JSX.Element;
+
+declare const sliderVariants: (props?: ({
+    size?: "sm" | "md" | null | undefined;
+    error?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type SliderValue = number | number[];
+interface SliderProps extends Omit<React.ComponentProps<typeof Slider$1.Root>, 'value' | 'defaultValue' | 'onValueChange' | 'onValueCommit' | 'asChild'>, VariantProps<typeof sliderVariants> {
+    /** Controlled value. `number` → single thumb, `number[]` → one thumb each. */
+    value?: SliderValue;
+    /** Uncontrolled initial value. Defaults to a single thumb at `min`. */
+    defaultValue?: SliderValue;
+    /** Fires continuously while dragging. Shape mirrors `value`/`defaultValue`. */
+    onValueChange?: (value: SliderValue) => void;
+    /** Fires once on release (pointer up / keyboard commit). */
+    onValueCommit?: (value: SliderValue) => void;
+    /** Visible field label, associated to the thumb(s) via `aria-labelledby`. */
+    label?: ReactNode;
+    /** Hint shown below the field. Hidden while an error message is showing. */
+    helperText?: ReactNode;
+    /** Message shown below the field when `error` is true. */
+    errorMessage?: ReactNode;
+    /** Marks the field invalid: sets `aria-invalid` and error styling. */
+    error?: boolean;
+    /** Render the current value(s) as text beside the label. */
+    showValue?: boolean;
+    /** Formats each value for `showValue` and the thumb's `aria-valuetext`
+     *  (e.g. percentages or currency). */
+    formatValue?: (value: number) => string;
+    /** Accessible names for the two range thumbs. Ignored for single thumbs.
+     *  Defaults to `['Minimum', 'Maximum']`. */
+    thumbLabels?: [string, string];
+}
+declare function Slider({ id: externalId, value, defaultValue, onValueChange, onValueCommit, min, max, size, label, helperText, errorMessage, error, showValue, formatValue, thumbLabels, className, ...props }: SliderProps): react_jsx_runtime.JSX.Element;
+
+declare const numberInputVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+    error?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface NumberInputProps extends Omit<React.ComponentProps<'input'>, 'value' | 'defaultValue' | 'onChange' | 'size' | 'type' | 'min' | 'max' | 'step'>, VariantProps<typeof numberInputVariants> {
+    /** Controlled value. `null` represents an empty field. */
+    value?: number | null;
+    /** Uncontrolled initial value. */
+    defaultValue?: number | null;
+    /** Fires with the parsed value, or `null` when the field is cleared. */
+    onValueChange?: (value: number | null) => void;
+    /** Lower bound. Clamped on blur and at the stepper buttons. */
+    min?: number;
+    /** Upper bound. Clamped on blur and at the stepper buttons. */
+    max?: number;
+    /** Stepper / ArrowUp-Down increment. Defaults to 1. */
+    step?: number;
+    /** Hide the − / + buttons (keyboard + typing only). */
+    hideControls?: boolean;
+    /** Accessible label for the decrement button. Defaults to `'Decrease'`. */
+    decrementLabel?: string;
+    /** Accessible label for the increment button. Defaults to `'Increase'`. */
+    incrementLabel?: string;
+    /** Visible field label, auto-associated to the input via `htmlFor`/`id`. */
+    label?: ReactNode;
+    /** Hint shown below the field. Hidden while an error message is showing. */
+    helperText?: ReactNode;
+    /** Message shown below the field when `error` is true. */
+    errorMessage?: ReactNode;
+    /** Marks the field invalid: sets `aria-invalid` and error styling. */
+    error?: boolean;
+}
+declare function NumberInput({ id: externalId, value, defaultValue, onValueChange, min, max, step, size, hideControls, decrementLabel, incrementLabel, label, helperText, errorMessage, error, required, disabled, className, onBlur, onKeyDown, ...props }: NumberInputProps): react_jsx_runtime.JSX.Element;
+
+declare const ratingVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface RatingProps extends VariantProps<typeof ratingVariants> {
+    /** Controlled value (0…max). `.5` increments are allowed when `allowHalf`. */
+    value?: number;
+    /** Uncontrolled initial value. Defaults to 0. */
+    defaultValue?: number;
+    /** Fires with the chosen rating. */
+    onValueChange?: (value: number) => void;
+    /** Number of stars. Defaults to 5. */
+    max?: number;
+    /** Allow half-star (`.5`) precision. */
+    allowHalf?: boolean;
+    /** Display only — no interaction, exposed as `role="img"`. */
+    readOnly?: boolean;
+    /** Non-interactive and dimmed. */
+    disabled?: boolean;
+    /** Visible field label. */
+    label?: ReactNode;
+    /** Hint shown below the field. Hidden while an error message is showing. */
+    helperText?: ReactNode;
+    /** Message shown below the field when `error` is true. */
+    errorMessage?: ReactNode;
+    /** Marks the field invalid: sets `aria-invalid` and error styling. */
+    error?: boolean;
+    /** Builds the accessible value text / read-only label. Defaults to
+     *  `"{value} out of {max} stars"`. Override for localization. */
+    formatValueText?: (value: number, max: number) => string;
+    id?: string;
+    className?: string;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+}
+declare function Rating({ id: externalId, value, defaultValue, onValueChange, max, allowHalf, readOnly, disabled, size, label, helperText, errorMessage, error, formatValueText, className, ...props }: RatingProps): react_jsx_runtime.JSX.Element;
+
+declare const toggleVariants: (props?: ({
+    variant?: "outline" | "default" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const toggleGroupVariants: (props?: ({
+    variant?: "outline" | "default" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type ToggleProps = React.ComponentProps<typeof Toggle$1.Root> & VariantProps<typeof toggleVariants>;
+type ToggleGroupRootProps = React.ComponentProps<typeof ToggleGroup$1.Root>;
+type ToggleGroupProps = ToggleGroupRootProps & VariantProps<typeof toggleGroupVariants>;
+type ToggleGroupItemProps = React.ComponentProps<typeof ToggleGroup$1.Item>;
+declare function Toggle({ variant, size, className, ...props }: ToggleProps): react_jsx_runtime.JSX.Element;
+declare function ToggleGroup({ variant, size, className, ...props }: ToggleGroupProps): react_jsx_runtime.JSX.Element;
+declare function ToggleGroupItem({ className, ...props }: ToggleGroupItemProps): react_jsx_runtime.JSX.Element;
+
+declare const descriptionListVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | null | undefined;
+    divided?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface DescriptionListProps extends React.ComponentProps<'dl'>, VariantProps<typeof descriptionListVariants> {
+}
+type DescriptionItemProps = React.ComponentProps<'div'>;
+type DescriptionTermProps = React.ComponentProps<'dt'>;
+type DescriptionDetailsProps = React.ComponentProps<'dd'>;
+declare function DescriptionList({ orientation, divided, className, ...props }: DescriptionListProps): react_jsx_runtime.JSX.Element;
+declare function DescriptionItem({ className, ...props }: DescriptionItemProps): react_jsx_runtime.JSX.Element;
+declare function DescriptionTerm({ className, ...props }: DescriptionTermProps): react_jsx_runtime.JSX.Element;
+declare function DescriptionDetails({ className, ...props }: DescriptionDetailsProps): react_jsx_runtime.JSX.Element;
+
 type DgaRootElement = 'div' | 'main' | 'nav' | 'section' | 'article' | 'aside' | 'header' | 'footer';
 interface DgaProviderProps {
     dir?: 'ltr' | 'rtl';
@@ -195,18 +1150,40 @@ interface DgaContextValue {
     locale: string;
     mode: 'light' | 'dark';
     /**
-     * The DgaProvider root element. Portal-rendering components (Select, and
-     * future Tooltip / Modal / Toast / Popover / DropdownMenu) MUST pass this
-     * as their Radix `Portal container={…}` so that `data-theme`, custom
-     * theme vars, and `.ddga-theme-*` classes set on the root inherit into
-     * the portaled content. Without it, portals mount under <body> and
-     * silently miss dark mode + custom themes.
+     * The DgaProvider's rendered root element. Exposed for non-portaled
+     * descendants that need to read theme attributes (e.g., layout decorators).
+     *
+     * **For overlay portals, prefer `portalEl`** — `rootEl` lives inside the
+     * consumer's normal DOM tree and inherits any `overflow: hidden` /
+     * `transform` ancestors. Inside Storybook's autodocs preview block (or any
+     * scoped wrapper a consumer might wrap us in), portaling into `rootEl`
+     * makes the overlay get clipped by the wrapper and breaks `position: fixed`
+     * positioning (a `transform` ancestor establishes a new containing block).
      *
-     * Exposed as state (not a ref) so consumers re-render once the element
-     * mounts , a useRef wouldn't fire that update and the portal would
-     * race to <body> on the first commit.
+     * State (not ref) so subscribers re-render when the element mounts; a
+     * useRef update wouldn't fire a render and `defaultOpen` portals would
+     * race to the wrong target on first commit.
      */
     rootEl: HTMLElement | null;
+    /**
+     * Body-mounted portal container that mirrors this provider's theme
+     * attributes (`data-theme`, `dir`) and CSS custom properties. Overlay
+     * components (Modal / Drawer / DropdownMenu / Combobox / Select / Tooltip
+     * / DatePicker) should portal into this so:
+     *
+     *  1. They escape any clipping (`overflow: hidden`) or transform ancestor
+     *     the consumer wraps the provider in.
+     *  2. `position: fixed` semantics survive (no `transform` ancestor breaks
+     *     the viewport containing block).
+     *  3. Theme inheritance still works — the container carries `data-theme`,
+     *     `dir`, and the same CSS variables as the provider's root, so
+     *     `var(--ddga-color-*)` lookups inside the portal resolve correctly.
+     *
+     * `null` until the DOM mount effect runs (e.g., during SSR or the very
+     * first commit on the client). Components should fall back to `rootEl`
+     * (and finally `document.body`) when this is null.
+     */
+    portalEl: HTMLElement | null;
 }
 declare function useDga(): DgaContextValue;
 
@@ -259,4 +1236,4 @@ declare function FieldMessage({ id, variant, children }: FieldMessageProps): rea
 
 declare function cn(...inputs: ClassValue[]): string;
 
-export { Button, type ButtonProps, Checkbox, type CheckboxProps, DgaProvider, type DgaProviderProps, type FieldA11y, FieldMessage, type FieldMessageProps, Input, type InputProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, Select, SelectItem, type SelectItemProps, type SelectProps, Switch, type SwitchProps, Textarea, type TextareaProps, type UseFieldA11yOptions, buttonVariants, checkboxVariants, cn, inputVariants, radioGroupVariants, radioVariants, selectTriggerVariants, switchVariants, textareaVariants, useDga, useDir, useFieldA11y };
+export { Accordion, AccordionContent, type AccordionContentProps, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, Alert, AlertDescription, type AlertDescriptionProps, type AlertProps, type AlertSectionProps, AlertTitle, type AlertTitleProps, Avatar, AvatarFallback, type AvatarFallbackProps, AvatarGroup, type AvatarGroupProps, AvatarImage, type AvatarImageProps, type AvatarProps, type AvatarStatus, Badge, type BadgeProps, Breadcrumb, BreadcrumbEllipsis, type BreadcrumbEllipsisProps, BreadcrumbItem, type BreadcrumbItemProps, BreadcrumbLink, type BreadcrumbLinkProps, BreadcrumbList, type BreadcrumbListProps, BreadcrumbPage, type BreadcrumbPageProps, type BreadcrumbProps, BreadcrumbSeparator, type BreadcrumbSeparatorProps, Button, type ButtonProps, Card, CardContent, CardDescription, type CardDescriptionProps, CardFooter, CardHeader, CardImage, type CardImageProps, type CardProps, type CardSectionProps, CardTitle, type CardTitleProps, Checkbox, type CheckboxProps, CircularProgress, type CircularProgressProps, Combobox, ComboboxGroup, type ComboboxGroupProps, ComboboxItem, type ComboboxItemProps, type ComboboxProps, ComboboxSeparator, type ComboboxSeparatorProps, DatePicker, type DatePickerProps, DescriptionDetails, type DescriptionDetailsProps, DescriptionItem, type DescriptionItemProps, DescriptionList, type DescriptionListProps, DescriptionTerm, type DescriptionTermProps, DgaProvider, type DgaProviderProps, Divider, type DividerProps, Drawer, DrawerBody, DrawerClose, type DrawerCloseProps, DrawerContent, type DrawerContentProps, DrawerDescription, type DrawerDescriptionProps, DrawerFooter, DrawerHeader, type DrawerProps, type DrawerSectionProps, DrawerTitle, type DrawerTitleProps, DrawerTrigger, type DrawerTriggerProps, DropdownMenu, DropdownMenuCheckboxItem, type DropdownMenuCheckboxItemProps, DropdownMenuContent, type DropdownMenuContentProps, DropdownMenuGroup, type DropdownMenuGroupProps, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuLabel, type DropdownMenuLabelProps, type DropdownMenuProps, DropdownMenuRadioGroup, type DropdownMenuRadioGroupProps, DropdownMenuRadioItem, type DropdownMenuRadioItemProps, DropdownMenuSeparator, type DropdownMenuSeparatorProps, DropdownMenuSub, DropdownMenuSubContent, type DropdownMenuSubContentProps, type DropdownMenuSubProps, DropdownMenuSubTrigger, type DropdownMenuSubTriggerProps, DropdownMenuTrigger, type DropdownMenuTriggerProps, type FieldA11y, FieldMessage, type FieldMessageProps, type FileRejection, type FileStatus, FileUpload, type FileUploadProps, Input, type InputProps, Modal, ModalClose, type ModalCloseProps, ModalContent, type ModalContentProps, ModalDescription, type ModalDescriptionProps, ModalFooter, ModalHeader, type ModalProps, type ModalSectionProps, ModalTitle, type ModalTitleProps, ModalTrigger, type ModalTriggerProps, NumberInput, type NumberInputProps, Pagination, PaginationContent, type PaginationContentProps, PaginationEllipsis, type PaginationEllipsisProps, PaginationItem, type PaginationItemProps, PaginationLink, type PaginationLinkProps, PaginationNext, type PaginationNextProps, PaginationPrevious, type PaginationPreviousProps, type PaginationProps, Progress, type ProgressProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, Rating, type RatingProps, type RejectionCode, Select, SelectItem, type SelectItemProps, type SelectProps, Skeleton, type SkeletonProps, Slider, type SliderProps, type SliderValue, Spinner, type SpinnerProps, Step, StepDescription, type StepDescriptionProps, StepIndicator, type StepIndicatorProps, type StepProps, type StepState, StepTitle, type StepTitleProps, Steps, type StepsProps, Switch, type SwitchProps, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTrigger, type TabsTriggerProps, Textarea, type TextareaProps, type ToastAction, type ToastData, type ToastOptions, type ToastPosition, type ToastStore, type ToastVariant, Toaster, type ToasterProps, Toggle, ToggleGroup, ToggleGroupItem, type ToggleGroupItemProps, type ToggleGroupProps, type ToggleProps, Tooltip, TooltipContent, type TooltipContentProps, type TooltipProps, TooltipTrigger, type TooltipTriggerProps, type UploadFile, type UseFieldA11yOptions, accordionVariants, alertVariants, avatarVariants, badgeVariants, breadcrumbVariants, buttonVariants, cardVariants, checkboxVariants, circularProgressVariants, cn, comboboxTriggerVariants, comboboxVariants, createToast, createToastStore, datePickerVariants, descriptionListVariants, dividerVariants, drawerVariants, dropdownMenuVariants, inputVariants, modalContentVariants, numberInputVariants, paginationLinkVariants, paginationVariants, progressVariants, radioGroupVariants, radioVariants, ratingVariants, selectTriggerVariants, skeletonVariants, sliderVariants, spinnerVariants, stepVariants, stepsVariants, switchVariants, tabsListVariants, tabsVariants, textareaVariants, toast, toastStore, toastVariants, toastViewportVariants, toggleGroupVariants, toggleVariants, tooltipContentVariants, useDga, useDir, useFieldA11y };