omverse-ui 0.1.0

package/dist/index.d.cts

@@ -0,0 +1,2956 @@
+import { ClassValue } from 'clsx';
+import * as react from 'react';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import * as lucide_react from 'lucide-react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+/**
+ * Merges Tailwind classes intelligently — later classes override earlier ones
+ * even when they target the same property (e.g. `px-2` vs `px-4`).
+ *
+ * Configured with design-system font-size and text-color groups so the custom
+ * typography scale (text-label-lg, text-body-md, …) and semantic color tokens
+ * (text-on-primary, text-on-surface, …) are never treated as conflicting.
+ */
+declare function cn(...inputs: ClassValue[]): string;
+
+/**
+ * Size scale for icons. Tied to the design system's spacing scale so
+ * icons always sit cleanly with text of the same scale.
+ */
+declare const iconVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | "xl" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+/**
+ * The design system's icon registry. Keys are design-system names (kebab-case);
+ * values are the current icon source. When custom Figma icons are ready, swap
+ * the right-hand side here — every component using <Icon /> updates automatically.
+ */
+declare const iconMap: {
+    readonly 'chevron-down': react.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+    readonly 'chevron-up': react.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+    readonly 'chevron-left': react.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+    readonly 'chevron-right': react.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+    readonly check: react.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+    readonly close: react.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+    readonly search: react.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+    readonly 'arrow-right': react.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+    readonly 'arrow-left': react.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+    readonly plus: react.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+    readonly minus: react.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+    readonly 'alert-circle': react.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+    readonly info: react.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+    readonly 'check-circle': react.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+    readonly edit: react.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+    readonly settings: react.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+    readonly bookmark: react.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+    readonly heart: react.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+    readonly star: react.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+    readonly bell: react.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+    readonly trash: react.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+    readonly download: react.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+    readonly upload: react.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+    readonly share: react.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+    readonly dots: react.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+    readonly 'dots-vertical': react.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+    readonly refresh: react.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+    readonly eye: react.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+    readonly 'eye-off': react.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+    readonly mail: react.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+    readonly lock: react.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+    readonly play: react.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+    readonly 'file-text': react.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+    readonly 'credit-card': react.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+    readonly users: react.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+    readonly rocket: react.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+    readonly 'message-square': react.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+    readonly 'chevron-down-filled': react.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+};
+type IconName = keyof typeof iconMap;
+interface IconProps extends VariantProps<typeof iconVariants> {
+    /** Design system name of the icon to render. */
+    name: IconName;
+    className?: string;
+    /**
+     * Provide a label to make the icon meaningful to screen readers.
+     * Omit for purely decorative icons (icon next to text).
+     */
+    'aria-label'?: string;
+    /**
+     * Renders the icon as a solid/filled shape instead of the default stroke outline.
+     * Sets fill="currentColor" and strokeWidth=0 on the underlying SVG.
+     * Use for toggle-on states — bookmarks, likes, stars, bells, etc.
+     */
+    filled?: boolean;
+}
+/**
+ * Icon — the only component allowed to know about the underlying icon source.
+ *
+ * Every other component imports from here, not from `lucide-react` directly.
+ * This indirection is what makes swapping to custom Figma icons a one-file change.
+ */
+declare const Icon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
+
+/**
+ * Button visual variants.
+ *
+ * Design intent (M3-inspired, extended):
+ * - `filled`      — highest emphasis; single primary CTA per screen
+ * - `tonal`       — medium-high emphasis; secondary primary actions
+ * - `outlined`    — medium emphasis; alternative or cancel actions
+ * - `text`        — lowest named emphasis; tertiary / inline use
+ * - `elevated`    — filled surface lifted above tonal backgrounds
+ * - `ghost`       — near-invisible; toolbars, icon-adjacent, dense UIs
+ * - `destructive` — irreversible actions (delete, revoke, leave)
+ */
+declare const buttonVariants: (props?: ({
+    variant?: "text" | "filled" | "tonal" | "outlined" | "elevated" | "ghost" | "destructive" | null | undefined;
+    size?: "sm" | "md" | "lg" | "xl" | "xs" | null | undefined;
+    shape?: "rounded" | "pill" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type ButtonVariantProps = VariantProps<typeof buttonVariants>;
+
+interface ButtonProps extends ComponentPropsWithoutRef<'button'>, ButtonVariantProps {
+    /**
+     * Renders the first child element with button props merged onto it.
+     * Use to wrap a router `<Link>` while keeping button styling and a11y.
+     * Do NOT combine with `leadingIcon` / `trailingIcon` — Radix Slot cannot
+     * merge props onto a React.Fragment; place icons inside the child instead.
+     */
+    asChild?: boolean;
+    /**
+     * Shows a loading spinner and disables interaction. Preserves layout to
+     * prevent content reflow. Sets `aria-busy` for assistive technology.
+     */
+    loading?: boolean;
+    /**
+     * Replaces the button label while `loading` is true.
+     * Pass an empty string to show only the spinner with no label.
+     */
+    loadingText?: string;
+    /**
+     * Swaps the leading icon to a checkmark to confirm a completed action.
+     * If no leading icon was present, a checkmark is prepended to the label.
+     * The trailing icon is hidden while success is active to reduce noise.
+     * Parent controls the duration — set back to false to restore original state.
+     * For icon-only buttons, also set `aria-label` on the button for a11y.
+     */
+    success?: boolean;
+    /**
+     * Applies a blue→purple gradient background. Only takes effect on `filled`
+     * and `destructive` variants; silently ignored on all others.
+     * Hover/active states use opacity instead of background-color shifts because
+     * a CSS gradient (background-image) is not affected by background-color changes.
+     */
+    gradient?: boolean;
+    /**
+     * Icon rendered before the label. Accepts any design-system icon name.
+     * Always decorative — the label text is the accessible name.
+     */
+    leadingIcon?: IconName;
+    /**
+     * Icon rendered after the label. Accepts any design-system icon name.
+     * Always decorative — the label text is the accessible name.
+     */
+    trailingIcon?: IconName;
+    /**
+     * Stretches the button to its container's full width.
+     * When both `leadingIcon` and `trailingIcon` are present the icons are
+     * pushed to the edges with the label centred between them (`justify-between`).
+     */
+    fullWidth?: boolean;
+}
+/**
+ * Button — the primary interactive control of the design system.
+ *
+ * Seven variants covering the full emphasis spectrum, five sizes, two
+ * shapes, optional gradient treatment, leading/trailing icon slots,
+ * full-width edge-spread layout, loading and success state management,
+ * and the `asChild` composition pattern for wrapping router links.
+ *
+ * Design rationale: variant choice drives perceived importance in the UI
+ * hierarchy. Use `filled` for the single primary action per screen,
+ * `ghost` for low-attention actions in toolbars, and `destructive` only
+ * for irreversible paths — never as a general-purpose danger colour.
+ *
+ * @see {@link https://m3.material.io/components/buttons/overview}
+ */
+declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
+
+/**
+ * IconButton variants — CVA configuration.
+ *
+ * Design intent:
+ * - filled      → highest emphasis, primary action
+ * - tonal       → medium-high, secondary action
+ * - outlined    → medium emphasis
+ * - standard    → low emphasis, toolbars, inline actions
+ * - ghost       → subtle, barely visible until hover
+ * - destructive → delete / danger actions
+ *
+ * All variants use semantic tokens only — never raw hex or palette steps.
+ * State layers follow M3 spec: hover=8%, focus=12%, pressed=12%.
+ */
+declare const iconButtonVariants: (props?: ({
+    variant?: "filled" | "tonal" | "outlined" | "ghost" | "destructive" | "standard" | null | undefined;
+    size?: "sm" | "md" | "lg" | "xl" | "xs" | null | undefined;
+    shape?: "circle" | "square" | null | undefined;
+    fab?: boolean | null | undefined;
+    gradient?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type IconButtonVariantProps = VariantProps<typeof iconButtonVariants>;
+
+interface IconButtonProps extends Omit<ComponentPropsWithoutRef<'button'>, 'children'>, IconButtonVariantProps {
+    /**
+     * The icon to display. Uses the design system's Icon component.
+     * Never import lucide-react directly in consuming components.
+     */
+    icon: IconName;
+    /**
+     * Accessible label — required. Describes the action to screen readers.
+     * When badge is a number, include the count in the label:
+     * aria-label="5 notifications"
+     */
+    'aria-label': string;
+    /**
+     * Toggle mode — button has pressed/unpressed state.
+     * Use for bookmarks, likes, stars, and other binary actions.
+     */
+    toggle?: boolean;
+    /**
+     * Controlled pressed state for toggle mode.
+     * If omitted, the component manages its own state (uncontrolled).
+     */
+    pressed?: boolean;
+    /**
+     * Callback fired when pressed state changes in toggle mode.
+     */
+    onPressedChange?: (pressed: boolean) => void;
+    /**
+     * Icon to show when toggle is pressed.
+     * If omitted, the same icon is used for both states.
+     *
+     * @example
+     * <IconButton icon="bookmark" pressedIcon="bookmark" toggle />
+     */
+    pressedIcon?: IconName;
+    /**
+     * Badge displayed on the icon button.
+     * - `true`    → red dot only
+     * - `number`  → shows the number (capped at 99+)
+     *
+     * @example
+     * <IconButton icon="bell" badge={5} aria-label="5 notifications" />
+     */
+    badge?: boolean | number;
+    /**
+     * Shows a tooltip with the aria-label text on hover and focus.
+     * Defaults to true — set to false to disable.
+     */
+    tooltip?: boolean;
+    /**
+     * Shows a loading spinner instead of the icon.
+     * Disables interaction and announces aria-busy.
+     */
+    loading?: boolean;
+    /**
+     * Applies a brand gradient background.
+     * Only meaningful on filled and destructive variants.
+     */
+    gradient?: boolean;
+    /**
+     * FAB (floating action button) mode.
+     * Adds elevation shadow. Pair with size="xl" and shape="square".
+     */
+    fab?: boolean;
+}
+/**
+ * IconButton — an icon-only interactive control.
+ *
+ * Features beyond M3:
+ * - toggle mode with pressed/unpressed state and aria-pressed
+ * - badge (dot or number, capped at 99+)
+ * - built-in tooltip (no extra library)
+ * - loading state with spinner
+ * - gradient variant
+ * - FAB mode with elevation
+ * - 44×44px minimum touch target on ALL sizes via pseudo element
+ * - aria-label is TypeScript-required (no silent a11y failures)
+ *
+ * @example
+ * // Basic
+ * <IconButton icon="search" aria-label="Search" />
+ *
+ * // Toggle
+ * <IconButton icon="bookmark" toggle pressed={saved} onPressedChange={setSaved} aria-label="Save" />
+ *
+ * // Badge
+ * <IconButton icon="bell" badge={5} aria-label="5 notifications" />
+ *
+ * // FAB
+ * <IconButton icon="plus" variant="filled" size="xl" shape="square" fab aria-label="Add new" />
+ *
+ * // Gradient
+ * <IconButton icon="plus" variant="filled" gradient aria-label="Add" />
+ */
+declare const IconButton: react.ForwardRefExoticComponent<IconButtonProps & react.RefAttributes<HTMLButtonElement>>;
+
+interface InputProps extends Omit<ComponentPropsWithoutRef<'input'>, 'size' | 'prefix'> {
+    /**
+     * Visual variant of the input.
+     * - `outlined`  → bordered input (default)
+     * - `filled`    → tonal background, bottom border only
+     * - `floating`  → label animates up on focus/fill
+     */
+    variant?: 'outlined' | 'filled' | 'floating';
+    /**
+     * Size of the input.
+     * - `sm` → 36px height
+     * - `md` → 44px height (default)
+     * - `lg` → 52px height
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /** Label displayed above (or floating inside) the input. */
+    label?: string;
+    /** Marks field as required — adds * indicator and aria-required. */
+    required?: boolean;
+    /** Adds "(optional)" tag next to the label. */
+    optional?: boolean;
+    /** Helper text shown below the input in default state. */
+    helperText?: string;
+    /** Error state — red border + error icon. */
+    error?: boolean;
+    /** Error message shown below the input when error=true. Replaces helperText. */
+    errorText?: string;
+    /** Success state — green border + success icon. */
+    success?: boolean;
+    /** Success message shown below the input when success=true. Replaces helperText. */
+    successText?: string;
+    /** Loading state — spinner in trailing slot (async validation). */
+    loading?: boolean;
+    /** Icon displayed before the input. */
+    leadingIcon?: IconName;
+    /** Icon displayed after the input. */
+    trailingIcon?: IconName;
+    /**
+     * Shows a clear (×) button when the input has a value.
+     * Fires onChange with empty value when clicked.
+     */
+    clearable?: boolean;
+    /**
+     * Auto-adds a password visibility toggle button.
+     * Only meaningful when type="password".
+     */
+    passwordToggle?: boolean;
+    /** Text displayed before the input (e.g. "https://", "$"). */
+    prefix?: ReactNode;
+    /** Text displayed after the input (e.g. "USD", ".com"). */
+    suffix?: ReactNode;
+    /**
+     * Maximum character count.
+     * When combined with showCount, displays a counter below.
+     */
+    maxLength?: number;
+    /** Shows character count below the input. Requires maxLength. */
+    showCount?: boolean;
+    /**
+     * Renders a multiline textarea instead of a single-line input.
+     */
+    textarea?: boolean;
+    /** Number of initial rows for textarea. Default: 3 */
+    rows?: number;
+    /**
+     * Shows a copy button in the trailing slot.
+     * Best combined with readOnly.
+     */
+    copyable?: boolean;
+    /** Additional className for the outer wrapper. */
+    wrapperClassName?: string;
+}
+/**
+ * Input / TextField — the primary text input control.
+ *
+ * Features beyond M3:
+ * - 3 variants: outlined, filled, floating label
+ * - 3 sizes: sm, md, lg
+ * - error, success, disabled, readonly, loading states
+ * - leadingIcon, trailingIcon, clearable, passwordToggle
+ * - prefix / suffix text slots
+ * - character count with maxLength
+ * - textarea mode with auto-resize
+ * - copyable mode with "Copied!" feedback
+ * - full accessibility: aria-describedby, aria-invalid, aria-required,
+ *   aria-readonly, aria-busy, aria-live announcements
+ *
+ * @example
+ * // Basic
+ * <Input label="Email" placeholder="you@example.com" />
+ *
+ * // Error state
+ * <Input label="Email" error errorText="Invalid email" leadingIcon="mail" />
+ *
+ * // Password
+ * <Input label="Password" type="password" passwordToggle />
+ *
+ * // With prefix/suffix
+ * <Input label="Website" prefix="https://" suffix=".com" />
+ *
+ * // Character count
+ * <Input label="Bio" maxLength={150} showCount />
+ *
+ * // Copyable API key
+ * <Input label="API Key" value="sk-xxxx" readOnly copyable />
+ *
+ * // Textarea
+ * <Input label="Message" textarea rows={4} maxLength={500} showCount />
+ */
+declare const Input: react.ForwardRefExoticComponent<InputProps & react.RefAttributes<HTMLInputElement>>;
+
+/**
+ * Badge variants — CVA configuration.
+ *
+ * Design intent:
+ * - filled   → solid background, highest visibility
+ * - tonal    → soft background, medium visibility
+ * - outlined → bordered, minimal fill
+ * - ghost    → no border, no fill, text only
+ */
+declare const badgeVariants: (props?: ({
+    variant?: "filled" | "tonal" | "outlined" | "ghost" | null | undefined;
+    color?: "info" | "success" | "default" | "error" | "secondary" | "warning" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type BadgeVariantProps = VariantProps<typeof badgeVariants>;
+
+interface BadgeProps extends ComponentPropsWithoutRef<'span'>, BadgeVariantProps {
+    /**
+     * Visual style of the badge.
+     * - `filled`   → solid background (default)
+     * - `tonal`    → soft container background
+     * - `outlined` → border only, no fill
+     * - `ghost`    → text only, no border or fill
+     */
+    variant?: 'filled' | 'tonal' | 'outlined' | 'ghost';
+    /**
+     * Color of the badge.
+     * Maps to your design system semantic tokens.
+     */
+    color?: 'default' | 'secondary' | 'success' | 'warning' | 'error' | 'info';
+    /**
+     * Size of the badge.
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Shows a dot indicator instead of text.
+     * When true, children and count are ignored.
+     */
+    dot?: boolean;
+    /**
+     * Displays a number. Automatically capped at 99+.
+     * Ignored when dot=true.
+     */
+    count?: number;
+    /**
+     * Adds an animated pulse ring around the dot.
+     * Only works when dot=true. Useful for live/active indicators.
+     */
+    pulse?: boolean;
+}
+/**
+ * Badge — a small label for status, counts, and categories.
+ *
+ * Features beyond M3:
+ * - 4 variants × 6 colors = 24 combinations
+ * - dot mode for minimal indicators
+ * - pulse animation for live/active status
+ * - count mode with 99+ cap
+ *
+ * @example
+ * // Label
+ * <Badge color="success">Active</Badge>
+ *
+ * // Count
+ * <Badge color="error" count={5} />
+ *
+ * // Live indicator
+ * <Badge color="success" dot pulse />
+ *
+ * // Tonal status
+ * <Badge variant="tonal" color="warning">Pending</Badge>
+ */
+declare const Badge: react.ForwardRefExoticComponent<BadgeProps & react.RefAttributes<HTMLSpanElement>>;
+
+/**
+ * Avatar variants — CVA configuration.
+ *
+ * Design intent:
+ * - shape: circle (default) or square (rounded)
+ * - size: xs to 2xl
+ * - variant: image, initials, icon, fallback
+ */
+declare const avatarVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | "xl" | "xs" | "2xl" | null | undefined;
+    shape?: "circle" | "square" | null | undefined;
+    color?: "info" | "success" | "default" | "error" | "secondary" | "warning" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type AvatarVariantProps = VariantProps<typeof avatarVariants>;
+
+interface AvatarProps extends Omit<ComponentPropsWithoutRef<'span'>, 'color'>, AvatarVariantProps {
+    /**
+     * Image URL. When provided, renders an img element.
+     * Automatically falls back to initials or icon on error.
+     */
+    src?: string;
+    /**
+     * Alt text for the image. Required when src is provided.
+     */
+    alt?: string;
+    /**
+     * Full name or display name.
+     * Used to generate initials when no image is available.
+     * Also used as aria-label when no alt is provided.
+     *
+     * @example "John Doe" → "JD"
+     */
+    name?: string;
+    /**
+     * Online status indicator shown as a colored dot.
+     * - `online`  → green
+     * - `offline` → gray
+     * - `busy`    → red
+     * - `away`    → amber
+     */
+    status?: 'online' | 'offline' | 'busy' | 'away';
+    /**
+     * Shape of the avatar.
+     * - `circle` → fully rounded (default)
+     * - `square` → rounded corners, size-appropriate radius
+     */
+    shape?: 'circle' | 'square';
+    /**
+     * Background color for initials/icon fallback.
+     */
+    color?: 'default' | 'secondary' | 'success' | 'warning' | 'error' | 'info';
+    /**
+     * Size of the avatar.
+     */
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+    /**
+     * Clickable — adds hover/focus styles and role="button".
+     */
+    clickable?: boolean;
+}
+/**
+ * Avatar — displays a user's profile image, initials, or icon fallback.
+ *
+ * Features beyond M3:
+ * - 6 sizes: xs to 2xl
+ * - circle and square shapes
+ * - online status indicator (online, offline, busy, away)
+ * - smart initials generation from name
+ * - image error fallback to initials → icon
+ * - 6 background colors for initials
+ * - clickable mode with focus ring
+ * - AvatarGroup for stacked avatars
+ *
+ * @example
+ * // Image
+ * <Avatar src="/photo.jpg" alt="John Doe" name="John Doe" />
+ *
+ * // Initials
+ * <Avatar name="John Doe" color="secondary" />
+ *
+ * // With status
+ * <Avatar name="Jane Smith" status="online" />
+ *
+ * // Clickable
+ * <Avatar name="John Doe" clickable onClick={openProfile} />
+ */
+declare const Avatar: react.ForwardRefExoticComponent<AvatarProps & react.RefAttributes<HTMLSpanElement>>;
+interface AvatarGroupProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Maximum number of avatars to show before collapsing to a count.
+     */
+    max?: number;
+    /**
+     * Size passed to all child Avatar components.
+     */
+    size?: AvatarProps['size'];
+}
+/**
+ * AvatarGroup — stacks multiple avatars with overlap and a count overflow.
+ *
+ * @example
+ * <AvatarGroup max={4}>
+ *   <Avatar name="John Doe" />
+ *   <Avatar name="Jane Smith" />
+ *   <Avatar name="Bob Lee" />
+ *   <Avatar name="Alice Wang" />
+ *   <Avatar name="Tom Jones" />
+ * </AvatarGroup>
+ */
+declare const AvatarGroup: react.ForwardRefExoticComponent<AvatarGroupProps & react.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Chip variants — CVA configuration.
+ *
+ * Design intent:
+ * - outlined  → default, bordered, low fill
+ * - filled    → solid tonal background
+ * - tonal     → soft container color
+ * - elevated  → white with shadow
+ *
+ * Selected state changes color based on variant + color combination.
+ * All tokens are semantic — never raw hex or palette steps.
+ */
+declare const chipVariants: (props?: ({
+    variant?: "filled" | "tonal" | "outlined" | "elevated" | null | undefined;
+    color?: "info" | "success" | "default" | "error" | "secondary" | "warning" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+    selected?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type ChipVariantProps = VariantProps<typeof chipVariants>;
+
+interface ChipProps extends Omit<ComponentPropsWithoutRef<'button'>, 'color'>, ChipVariantProps {
+    /**
+     * Visual variant of the chip.
+     */
+    variant?: 'outlined' | 'filled' | 'tonal' | 'elevated';
+    /**
+     * Color applied when chip is selected.
+     */
+    color?: 'default' | 'secondary' | 'success' | 'warning' | 'error' | 'info';
+    /** Size of the chip. */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Controlled selected state.
+     * If omitted, chip manages its own state (uncontrolled).
+     */
+    selected?: boolean;
+    /**
+     * Callback fired when selected state changes.
+     */
+    onSelectedChange?: (selected: boolean) => void;
+    /**
+     * Icon displayed before the label.
+     * Hidden when loading=true (replaced by spinner).
+     */
+    leadingIcon?: IconName;
+    /**
+     * Shows a checkmark when selected instead of leadingIcon.
+     * Default: true for filter chips.
+     */
+    showCheckOnSelect?: boolean;
+    /**
+     * Shows a colored dot before the label.
+     * Useful for status indication.
+     */
+    colorDot?: string;
+    /**
+     * Avatar image URL shown before the label.
+     * Useful for people chips.
+     */
+    avatarSrc?: string;
+    /** Alt text for the avatar image. */
+    avatarAlt?: string;
+    /**
+     * Badge count shown after the label.
+     */
+    badgeCount?: number;
+    /**
+     * Shows a remove (×) button after the label.
+     * Fires onRemove when clicked.
+     */
+    removable?: boolean;
+    /**
+     * Callback fired when the remove button is clicked.
+     */
+    onRemove?: () => void;
+    /**
+     * Shows a loading spinner — disables interaction.
+     * Useful for async filter actions.
+     */
+    loading?: boolean;
+}
+/**
+ * Chip — a compact interactive element for filters, tags, and selections.
+ *
+ * Features beyond M3:
+ * - 4 variants × 6 colors
+ * - controlled + uncontrolled toggle state
+ * - checkmark on select (filter chip behavior)
+ * - avatar, colorDot, badgeCount slots
+ * - removable with onRemove callback
+ * - loading state with spinner
+ *
+ * @example
+ * // Filter chip (uncontrolled)
+ * <Chip showCheckOnSelect>Design</Chip>
+ *
+ * // Input chip (removable)
+ * <Chip removable onRemove={() => remove(id)}>john@example.com</Chip>
+ *
+ * // With badge
+ * <Chip badgeCount={12} leadingIcon="star">Starred</Chip>
+ *
+ * // Color
+ * <Chip color="success" selected>Active</Chip>
+ *
+ * // Loading
+ * <Chip loading>Applying...</Chip>
+ */
+declare const Chip: react.ForwardRefExoticComponent<ChipProps & react.RefAttributes<HTMLButtonElement>>;
+interface ChipGroupProps extends Omit<ComponentPropsWithoutRef<'div'>, 'onChange'> {
+    /**
+     * Selection mode.
+     * - `single` → only one chip selected at a time (like radio)
+     * - `multi`  → multiple chips can be selected (like checkbox)
+     */
+    mode?: 'single' | 'multi';
+    /**
+     * Controlled selected values.
+     */
+    value?: string[];
+    /**
+     * Callback fired when selection changes.
+     */
+    onChange?: (value: string[]) => void;
+    /**
+     * Maximum number of chips to show before collapsing.
+     * Shows "+ X more" button when exceeded.
+     */
+    max?: number;
+    /** Size passed to all child Chip components. */
+    size?: ChipProps['size'];
+    /** Variant passed to all child Chip components. */
+    variant?: ChipProps['variant'];
+    /** Children must be Chip components with a value prop. */
+    children: ReactNode;
+}
+/**
+ * ChipGroup — manages selection state for a group of chips.
+ *
+ * Features beyond M3:
+ * - single and multi select modes
+ * - controlled and uncontrolled
+ * - overflow collapse with "+ X more" button
+ *
+ * @example
+ * // Single select
+ * <ChipGroup mode="single" value={[filter]} onChange={v => setFilter(v[0])}>
+ *   <Chip value="all">All</Chip>
+ *   <Chip value="design">Design</Chip>
+ * </ChipGroup>
+ *
+ * // Multi select
+ * <ChipGroup mode="multi" value={tags} onChange={setTags}>
+ *   <Chip value="react">React</Chip>
+ *   <Chip value="ts">TypeScript</Chip>
+ * </ChipGroup>
+ */
+declare const ChipGroup: react.ForwardRefExoticComponent<ChipGroupProps & react.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Checkbox variants — CVA configuration.
+ */
+declare const checkboxVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+    shape?: "circle" | "square" | null | undefined;
+    color?: "info" | "success" | "default" | "error" | "secondary" | "warning" | null | undefined;
+    checked?: boolean | null | undefined;
+    indeterminate?: boolean | null | undefined;
+    isError?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type CheckboxVariantProps = VariantProps<typeof checkboxVariants>;
+
+interface CheckboxProps extends Omit<ComponentPropsWithoutRef<'input'>, 'size' | 'color' | 'type'>, Pick<CheckboxVariantProps, 'size' | 'shape' | 'color'> {
+    /**
+     * Label text shown next to the checkbox.
+     */
+    label?: ReactNode;
+    /**
+     * Helper text shown below the label.
+     */
+    helperText?: string;
+    /**
+     * Marks the checkbox as required — adds * to label.
+     */
+    required?: boolean;
+    /**
+     * Error state — red border.
+     */
+    error?: boolean;
+    /**
+     * Error message shown below the label when error=true.
+     */
+    errorText?: string;
+    /**
+     * Indeterminate state — shows a dash instead of checkmark.
+     * Used for "select all" parent checkboxes.
+     */
+    indeterminate?: boolean;
+    /**
+     * Card style — wraps the checkbox in a bordered card.
+     * Useful for plan selection, feature toggles, etc.
+     */
+    card?: boolean;
+    /**
+     * Description shown inside the card below the label.
+     * Only used when card=true.
+     */
+    description?: string;
+    /**
+     * Size of the checkbox.
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Shape of the checkbox.
+     * - `square` → rounded corners (default)
+     * - `circle` → fully rounded
+     */
+    shape?: 'square' | 'circle';
+    /**
+     * Color of the checkbox when checked.
+     */
+    color?: 'default' | 'secondary' | 'success' | 'warning' | 'error' | 'info';
+}
+/**
+ * Checkbox — a binary input control.
+ *
+ * Features beyond M3:
+ * - 6 colors
+ * - 3 sizes
+ * - square and circle shapes
+ * - indeterminate state (auto-managed by CheckboxGroup)
+ * - card style with description
+ * - helper text, error text, required indicator
+ * - controlled + uncontrolled
+ *
+ * @example
+ * // Basic
+ * <Checkbox label="Accept terms" required />
+ *
+ * // With helper
+ * <Checkbox label="Email notifications" helperText="We'll send you updates" />
+ *
+ * // Error
+ * <Checkbox label="Accept terms" error errorText="You must accept the terms" />
+ *
+ * // Card style
+ * <Checkbox label="Pro plan" description="$12/month" card />
+ *
+ * // Color
+ * <Checkbox label="Success" color="success" defaultChecked />
+ */
+declare const Checkbox: react.ForwardRefExoticComponent<CheckboxProps & react.RefAttributes<HTMLInputElement>>;
+interface CheckboxGroupProps extends Omit<ComponentPropsWithoutRef<'fieldset'>, 'onChange'> {
+    /**
+     * Legend / group label shown above the checkboxes.
+     */
+    legend?: string;
+    /**
+     * Controlled selected values.
+     */
+    value?: string[];
+    /**
+     * Callback fired when selection changes.
+     */
+    onChange?: (value: string[]) => void;
+    /**
+     * Shows a "select all" parent checkbox with auto indeterminate state.
+     */
+    selectAll?: boolean;
+    /**
+     * Label for the select all checkbox.
+     */
+    selectAllLabel?: string;
+    /**
+     * Color applied to all child checkboxes.
+     */
+    color?: CheckboxProps['color'];
+    /**
+     * Size applied to all child checkboxes.
+     */
+    size?: CheckboxProps['size'];
+    /** Children must be Checkbox components with a value prop. */
+    children: ReactNode;
+}
+/**
+ * CheckboxGroup — manages a group of checkboxes with optional select-all.
+ *
+ * Features beyond M3:
+ * - auto-managed indeterminate state on select-all parent
+ * - controlled + uncontrolled
+ * - accessible fieldset + legend
+ *
+ * @example
+ * <CheckboxGroup
+ *   legend="Permissions"
+ *   selectAll
+ *   selectAllLabel="All permissions"
+ *   value={selected}
+ *   onChange={setSelected}
+ * >
+ *   <Checkbox value="read" label="Read" />
+ *   <Checkbox value="write" label="Write" />
+ *   <Checkbox value="delete" label="Delete" />
+ * </CheckboxGroup>
+ */
+declare const CheckboxGroup: react.ForwardRefExoticComponent<CheckboxGroupProps & react.RefAttributes<HTMLFieldSetElement>>;
+
+/**
+ * Radio variants — CVA configuration.
+ *
+ * Design intent:
+ * - Always circular (radio buttons are always round by convention)
+ * - 6 colors matching design system semantic tokens
+ * - 3 sizes
+ * - 3 display styles: default, card, button, segmented
+ */
+declare const radioVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+    color?: "info" | "success" | "default" | "error" | "secondary" | "warning" | null | undefined;
+    selected?: boolean | null | undefined;
+    isError?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type RadioVariantProps = VariantProps<typeof radioVariants>;
+
+interface RadioProps extends Omit<ComponentPropsWithoutRef<'input'>, 'size' | 'color' | 'type'>, Pick<RadioVariantProps, 'size' | 'color'> {
+    /** Label shown next to the radio. */
+    label?: ReactNode;
+    /** Helper text shown below the label. */
+    helperText?: string;
+    /** Error state — red border. */
+    error?: boolean;
+    /** Error message shown below the label. */
+    errorText?: string;
+    /**
+     * Card style — wraps in a bordered card.
+     * Useful for plan/option selection.
+     */
+    card?: boolean;
+    /**
+     * Description shown inside the card below the label.
+     * Only used when card=true.
+     */
+    description?: string;
+    /**
+     * Badge shown in the top-right of the card.
+     * Only used when card=true.
+     */
+    badge?: string;
+    /** Whether this radio is selected. */
+    checked?: boolean;
+    /** Size of the radio button. */
+    size?: 'sm' | 'md' | 'lg';
+    /** Color when selected. */
+    color?: 'default' | 'secondary' | 'success' | 'warning' | 'error' | 'info';
+}
+/**
+ * Radio — a single radio button option.
+ *
+ * Always used inside RadioGroup. Supports default, card,
+ * button, and segmented display styles via RadioGroup's `display` prop.
+ *
+ * Features beyond M3:
+ * - 6 colors
+ * - 3 sizes
+ * - card style with badge
+ * - helper text + error text
+ * - button and segmented styles via RadioGroup
+ *
+ * @example
+ * <RadioGroup value={plan} onChange={setPlan}>
+ *   <Radio value="pro" label="Pro" description="$12/month" card badge="Popular" />
+ *   <Radio value="team" label="Team" description="$49/month" card />
+ * </RadioGroup>
+ */
+declare const Radio: react.ForwardRefExoticComponent<RadioProps & react.RefAttributes<HTMLInputElement>>;
+interface RadioGroupProps extends Omit<ComponentPropsWithoutRef<'fieldset'>, 'onChange'> {
+    /** Legend shown above the group. */
+    legend?: string;
+    /** Controlled selected value. */
+    value?: string;
+    /** Callback fired when selection changes. */
+    onChange?: (value: string) => void;
+    /**
+     * Display style of the radio group.
+     * - `default`   → standard radio circles with labels
+     * - `card`      → bordered cards (overrides Radio card prop)
+     * - `button`    → pill-shaped buttons
+     * - `segmented` → segmented control (tab-like)
+     */
+    display?: 'default' | 'card' | 'button' | 'segmented';
+    /**
+     * Layout direction.
+     * - `vertical`   → stacked (default)
+     * - `horizontal` → side by side
+     */
+    direction?: 'vertical' | 'horizontal';
+    /** Error state for the entire group. */
+    error?: boolean;
+    /** Error message shown below the group. */
+    errorText?: string;
+    /** Color applied to all child radios. */
+    color?: RadioProps['color'];
+    /** Size applied to all child radios. */
+    size?: RadioProps['size'];
+    /** Children must be Radio components with a value prop. */
+    children: ReactNode;
+}
+/**
+ * RadioGroup — manages a group of radio buttons.
+ *
+ * Features beyond M3:
+ * - 4 display styles: default, card, button, segmented
+ * - vertical and horizontal layouts
+ * - controlled state management
+ * - accessible fieldset + legend + radiogroup role
+ *
+ * @example
+ * // Default
+ * <RadioGroup value={gender} onChange={setGender} direction="horizontal">
+ *   <Radio value="male" label="Male" />
+ *   <Radio value="female" label="Female" />
+ *   <Radio value="other" label="Other" />
+ * </RadioGroup>
+ *
+ * // Button style
+ * <RadioGroup value={billing} onChange={setBilling} display="button">
+ *   <Radio value="monthly" label="Monthly" />
+ *   <Radio value="yearly" label="Yearly" />
+ * </RadioGroup>
+ *
+ * // Segmented
+ * <RadioGroup value={view} onChange={setView} display="segmented">
+ *   <Radio value="day" label="Day" />
+ *   <Radio value="week" label="Week" />
+ *   <Radio value="month" label="Month" />
+ * </RadioGroup>
+ */
+declare const RadioGroup: react.ForwardRefExoticComponent<RadioGroupProps & react.RefAttributes<HTMLFieldSetElement>>;
+
+/**
+ * Switch variants — CVA configuration.
+ *
+ * Design intent:
+ * - Track changes color when on
+ * - Thumb slides from left to right
+ * - 6 colors, 3 sizes
+ * - Optional icon inside thumb
+ */
+declare const switchTrackVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+    checked?: boolean | null | undefined;
+    color?: "info" | "success" | "default" | "error" | "secondary" | "warning" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type SwitchTrackVariantProps = VariantProps<typeof switchTrackVariants>;
+
+interface SwitchProps extends Omit<ComponentPropsWithoutRef<'input'>, 'size' | 'color' | 'type'>, Pick<SwitchTrackVariantProps, 'size' | 'color'> {
+    /**
+     * Label shown next to the switch.
+     */
+    label?: ReactNode;
+    /**
+     * Helper text shown below the label.
+     */
+    helperText?: string;
+    /**
+     * Position of the label relative to the switch.
+     * - `right` → label after switch (default)
+     * - `left`  → label before switch, switch pinned right
+     */
+    labelPosition?: 'left' | 'right';
+    /**
+     * Icon shown inside the thumb when switch is ON.
+     * Disappears when switch is off.
+     */
+    checkedIcon?: IconName;
+    /**
+     * Icon shown inside the thumb when switch is OFF.
+     */
+    uncheckedIcon?: IconName;
+    /**
+     * Card style — wraps switch in a bordered card.
+     * Label becomes the card title, helperText becomes description.
+     */
+    card?: boolean;
+    /**
+     * Whether the switch is on.
+     * If omitted, component manages its own state (uncontrolled).
+     */
+    checked?: boolean;
+    /** Default checked state for uncontrolled usage. */
+    defaultChecked?: boolean;
+    /** Size of the switch. */
+    size?: 'sm' | 'md' | 'lg';
+    /** Color of the track when on. */
+    color?: 'default' | 'secondary' | 'success' | 'warning' | 'error' | 'info';
+}
+/**
+ * Switch — an on/off toggle control.
+ *
+ * Use Switch (not Checkbox) when the action takes effect immediately
+ * without requiring form submission.
+ *
+ * Features beyond M3:
+ * - 6 colors
+ * - 3 sizes
+ * - icon inside thumb (on and off states)
+ * - label left or right position
+ * - card style with title + description
+ * - controlled + uncontrolled
+ *
+ * @example
+ * // Basic
+ * <Switch label="Dark mode" />
+ *
+ * // With icon
+ * <Switch label="Wi-Fi" checkedIcon="wifi" color="success" />
+ *
+ * // Label left
+ * <Switch label="Notifications" labelPosition="left" />
+ *
+ * // Card style
+ * <Switch label="Email notifications" helperText="Get updates via email" card />
+ *
+ * // Controlled
+ * <Switch checked={enabled} onChange={e => setEnabled(e.target.checked)} />
+ */
+declare const Switch: react.ForwardRefExoticComponent<SwitchProps & react.RefAttributes<HTMLInputElement>>;
+
+interface SelectOption {
+    /** Unique value for this option. */
+    value: string;
+    /** Display label. */
+    label: string;
+    /** Optional description shown below label. */
+    description?: string;
+    /** Avatar image URL. */
+    avatarSrc?: string;
+    /** Avatar alt text. */
+    avatarAlt?: string;
+    /** Leading icon. */
+    icon?: string;
+    /** Whether this option is disabled. */
+    disabled?: boolean;
+}
+interface SelectOptionGroup {
+    /** Group label shown above options. */
+    label: string;
+    /** Options in this group. */
+    options: SelectOption[];
+}
+interface SelectProps extends Omit<ComponentPropsWithoutRef<'div'>, 'onChange'> {
+    /** Label shown above the select. */
+    label?: string;
+    /** Placeholder shown when no value selected. */
+    placeholder?: string;
+    /** Helper text shown below the select. */
+    helperText?: string;
+    /** Marks field as required. */
+    required?: boolean;
+    /** Error state. */
+    error?: boolean;
+    /** Error message shown below. */
+    errorText?: string;
+    /** Flat list of options. Use optionGroups for grouped options. */
+    options?: SelectOption[];
+    /** Grouped options. Takes priority over options. */
+    optionGroups?: SelectOptionGroup[];
+    /** Controlled value (single select). */
+    value?: string;
+    /** Controlled values (multi select). */
+    values?: string[];
+    /** Callback for single select. */
+    onChange?: (value: string) => void;
+    /** Callback for multi select. */
+    onChangeMulti?: (values: string[]) => void;
+    /** Enables multi-select mode. */
+    multi?: boolean;
+    /** Shows a search input inside the dropdown. */
+    searchable?: boolean;
+    /** Placeholder for the search input. */
+    searchPlaceholder?: string;
+    /** Shows a clear button when a value is selected. */
+    clearable?: boolean;
+    /** Disables the select. */
+    disabled?: boolean;
+    /** Size of the select trigger. */
+    size?: 'sm' | 'md' | 'lg';
+    /** Maximum number of items to show in multi mode before showing count. */
+    maxDisplay?: number;
+}
+/**
+ * Select — a fully custom dropdown selector.
+ *
+ * Features beyond M3:
+ * - searchable options with highlight
+ * - option groups with labels
+ * - multi-select with chip display
+ * - avatar options with description
+ * - clearable
+ * - disabled options
+ * - full keyboard navigation (arrows, enter, escape, home, end)
+ * - 3 sizes
+ * - WCAG AA accessible
+ *
+ * @example
+ * // Single
+ * <Select label="Department" options={options} value={dept} onChange={setDept} />
+ *
+ * // Multi
+ * <Select label="Tags" options={options} multi values={tags} onChangeMulti={setTags} />
+ *
+ * // Searchable
+ * <Select label="Country" options={countries} searchable />
+ *
+ * // Grouped
+ * <Select label="Location" optionGroups={groups} />
+ */
+declare const Select: react.ForwardRefExoticComponent<SelectProps & react.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Tooltip variants — CVA configuration.
+ *
+ * Design intent:
+ * - dark    → default, high contrast, works on any background
+ * - light   → for dark backgrounds
+ * - primary → brand colored, for promotional hints
+ */
+declare const tooltipVariants: (props?: ({
+    variant?: "dark" | "light" | "primary" | null | undefined;
+    position?: "bottom" | "left" | "right" | "top" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type TooltipVariantProps = VariantProps<typeof tooltipVariants>;
+
+interface TooltipProps extends Omit<ComponentPropsWithoutRef<'div'>, 'content'>, TooltipVariantProps {
+    /**
+     * The element that triggers the tooltip.
+     * Wrap any element — button, icon, disabled button, etc.
+     */
+    children: ReactNode;
+    /**
+     * Tooltip content — string for simple text, ReactNode for rich tooltips.
+     */
+    content: ReactNode;
+    /**
+     * Position of the tooltip relative to the trigger.
+     * @default 'top'
+     */
+    position?: 'top' | 'bottom' | 'left' | 'right';
+    /**
+     * Visual variant.
+     * - `dark`    → dark background, light text (default)
+     * - `light`   → white background, dark text, border
+     * - `primary` → brand color background
+     */
+    variant?: 'dark' | 'light' | 'primary';
+    /**
+     * Keyboard shortcut shown inside the tooltip.
+     * Renders in a monospace badge.
+     *
+     * @example
+     * <Tooltip content="Save" shortcut="⌘S">...</Tooltip>
+     */
+    shortcut?: string;
+    /**
+     * Delay in ms before the tooltip appears.
+     * @default 0
+     */
+    delay?: number;
+    /**
+     * Whether the tooltip is disabled (never shows).
+     */
+    disabled?: boolean;
+    /**
+     * Max width for rich tooltips with long content.
+     * @default 'none' (whitespace-nowrap)
+     */
+    maxWidth?: number;
+    /**
+     * Title for rich tooltips — shown in bold above content.
+     */
+    title?: string;
+    /**
+     * Action link text for rich tooltips.
+     */
+    actionLabel?: string;
+    /**
+     * Callback when the action link is clicked.
+     */
+    onAction?: () => void;
+}
+/**
+ * Tooltip — contextual information shown on hover and focus.
+ *
+ * Features beyond M3:
+ * - 3 variants: dark, light, primary
+ * - 4 positions: top, bottom, left, right
+ * - keyboard shortcut display
+ * - rich tooltip with title + description + action
+ * - configurable show delay
+ * - works on disabled elements (wraps in span)
+ * - shows on hover AND focus (keyboard accessible)
+ *
+ * @example
+ * // Simple
+ * <Tooltip content="Delete item">
+ *   <IconButton icon="trash" aria-label="Delete" />
+ * </Tooltip>
+ *
+ * // With shortcut
+ * <Tooltip content="Save document" shortcut="⌘S">
+ *   <Button>Save</Button>
+ * </Tooltip>
+ *
+ * // Rich
+ * <Tooltip
+ *   title="Design tokens"
+ *   content="Tokens are the atomic values that define your system."
+ *   actionLabel="Learn more"
+ *   onAction={() => navigate('/docs')}
+ *   maxWidth={200}
+ * >
+ *   <Icon name="info" />
+ * </Tooltip>
+ *
+ * // On disabled element
+ * <Tooltip content="You need permission to do this">
+ *   <Button disabled>Delete</Button>
+ * </Tooltip>
+ */
+declare const Tooltip: react.ForwardRefExoticComponent<TooltipProps & react.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Spinner variants — CVA configuration.
+ *
+ * 9 variants:
+ * circular, ring, dots, bars, dual, pulse, ripple, gradient, skeleton
+ *
+ * 6 sizes: xs, sm, md, lg, xl, 2xl
+ * 6 colors: default, secondary, success, warning, error, white
+ */
+declare const spinnerVariants: (props?: ({
+    variant?: "dots" | "gradient" | "pulse" | "circular" | "ring" | "bars" | "dual" | "ripple" | "skeleton" | null | undefined;
+    size?: "sm" | "md" | "lg" | "xl" | "xs" | "2xl" | null | undefined;
+    color?: "success" | "default" | "error" | "secondary" | "warning" | "white" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type SpinnerVariantProps = VariantProps<typeof spinnerVariants>;
+
+interface SpinnerProps extends ComponentPropsWithoutRef<'div'>, SpinnerVariantProps {
+    /**
+     * Visual style of the spinner.
+     * - `circular` → single border spin (default)
+     * - `ring`     → track + colored top border
+     * - `dots`     → three pulsing dots
+     * - `bars`     → four bouncing bars
+     * - `dual`     → two rings spinning opposite directions
+     * - `pulse`    → breathing dot
+     * - `ripple`   → expanding rings (radar effect)
+     * - `gradient` → conic gradient spin
+     * - `skeleton` → shimmer placeholder (pass width/height via className)
+     */
+    variant?: 'circular' | 'ring' | 'dots' | 'bars' | 'dual' | 'pulse' | 'ripple' | 'gradient' | 'skeleton';
+    /**
+     * Size of the spinner.
+     */
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+    /**
+     * Color of the spinner.
+     */
+    color?: 'default' | 'secondary' | 'success' | 'warning' | 'error' | 'white';
+    /**
+     * Label shown next to or below the spinner.
+     */
+    label?: string;
+    /**
+     * Position of the label relative to the spinner.
+     * @default 'bottom'
+     */
+    labelPosition?: 'top' | 'bottom' | 'left' | 'right';
+    /**
+     * Covers a parent element with a semi-transparent overlay.
+     * Parent must have position: relative.
+     */
+    overlay?: boolean;
+}
+/**
+ * Spinner — loading indicator with 9 variants.
+ *
+ * Features beyond M3:
+ * - 9 variants: circular, ring, dots, bars, dual, pulse, ripple, gradient, skeleton
+ * - 6 sizes: xs to 2xl
+ * - 6 colors
+ * - label with position control
+ * - overlay mode for covering content
+ * - skeleton variant for content placeholders
+ * - respects prefers-reduced-motion
+ *
+ * @example
+ * // Basic
+ * <Spinner />
+ * <Spinner variant="dots" color="secondary" />
+ *
+ * // With label
+ * <Spinner label="Loading..." labelPosition="right" />
+ *
+ * // Overlay
+ * <div style={{ position: 'relative' }}>
+ *   <YourContent />
+ *   <Spinner overlay label="Please wait..." />
+ * </div>
+ *
+ * // Skeleton
+ * <Spinner variant="skeleton" className="h-4 w-32" />
+ */
+declare const Spinner: react.ForwardRefExoticComponent<SpinnerProps & react.RefAttributes<HTMLDivElement>>;
+interface SkeletonProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Shape of the skeleton.
+     * - `text`   → rounded rectangle (default)
+     * - `circle` → circle shape
+     * - `card`   → taller rectangle for cards
+     */
+    shape?: 'text' | 'circle' | 'card';
+}
+/**
+ * Skeleton — shimmer placeholder shown while content loads.
+ *
+ * @example
+ * // Text line
+ * <Skeleton className="h-4 w-48" />
+ *
+ * // Avatar
+ * <Skeleton shape="circle" className="size-10" />
+ *
+ * // Card
+ * <Skeleton shape="card" className="h-32 w-full" />
+ */
+declare const Skeleton: react.ForwardRefExoticComponent<SkeletonProps & react.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Card variants — CVA configuration.
+ *
+ * Base variants: elevated, filled, outlined, ghost, gradient, glass
+ * All interactive states handled via compound variants.
+ */
+declare const cardVariants: (props?: ({
+    variant?: "filled" | "outlined" | "elevated" | "ghost" | "gradient" | "glass" | null | undefined;
+    radius?: "sm" | "md" | "lg" | "none" | "full" | null | undefined;
+    interactive?: boolean | null | undefined;
+    selected?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type CardVariantProps = VariantProps<typeof cardVariants>;
+
+interface CardProps extends ComponentPropsWithoutRef<'div'>, CardVariantProps {
+    /**
+     * Visual style of the card.
+     * - `elevated`  → shadow, lifts on hover (default)
+     * - `filled`    → tonal surface background
+     * - `outlined`  → border, highlights on hover
+     * - `ghost`     → dashed border, minimal
+     * - `gradient`  → brand gradient background
+     * - `glass`     → frosted glass, use on colored backgrounds
+     */
+    variant?: 'elevated' | 'filled' | 'outlined' | 'ghost' | 'gradient' | 'glass';
+    /** Border radius of the card. */
+    radius?: 'none' | 'sm' | 'md' | 'lg' | 'full';
+    /** Adds hover/focus/active interactive states. */
+    interactive?: boolean;
+    /** Shows a selected ring or border. */
+    selected?: boolean;
+    /**
+     * Renders the card as a button element for better semantics
+     * when the entire card is clickable.
+     */
+    asButton?: boolean;
+}
+/**
+ * Card — a surface container for grouping related content.
+ *
+ * Features beyond M3:
+ * - 6 variants: elevated, filled, outlined, ghost, gradient, glass
+ * - interactive mode with hover/focus/active states
+ * - selected state
+ * - asButton for fully clickable cards
+ * - radius control
+ * - composable with CardHeader, CardBody, CardFooter, CardMedia
+ *
+ * @example
+ * // Basic
+ * <Card>
+ *   <CardBody>
+ *     <p>Content here</p>
+ *   </CardBody>
+ * </Card>
+ *
+ * // Interactive outlined
+ * <Card variant="outlined" interactive onClick={handleClick}>
+ *   <CardBody>Click me</CardBody>
+ * </Card>
+ *
+ * // Gradient
+ * <Card variant="gradient">
+ *   <CardBody>
+ *     <h3>Featured</h3>
+ *   </CardBody>
+ * </Card>
+ *
+ * // Glass (use on colored background)
+ * <div className="bg-gradient-to-br from-primary to-secondary p-8">
+ *   <Card variant="glass">
+ *     <CardBody>Glass card</CardBody>
+ *   </Card>
+ * </div>
+ */
+declare const Card: react.ForwardRefExoticComponent<CardProps & react.RefAttributes<HTMLDivElement>>;
+interface CardMediaProps extends ComponentPropsWithoutRef<'div'> {
+    /** Image source URL. */
+    src?: string;
+    /** Image alt text. */
+    alt?: string;
+    /** Height of the media area. Default: 160px */
+    height?: number;
+    /** Gradient overlay on the image. */
+    overlay?: boolean;
+    /** Content shown over the overlay. */
+    overlayContent?: ReactNode;
+}
+/**
+ * CardMedia — image area at the top of a card.
+ * Shows an image or a placeholder if no src provided.
+ */
+declare const CardMedia: react.ForwardRefExoticComponent<CardMediaProps & react.RefAttributes<HTMLDivElement>>;
+interface CardHeaderProps extends Omit<ComponentPropsWithoutRef<'div'>, 'title'> {
+    /** Main title. */
+    title?: ReactNode;
+    /** Subtitle shown below title. */
+    subtitle?: ReactNode;
+    /** Element shown on the right side (badge, menu, icon). */
+    action?: ReactNode;
+    /** Avatar or icon shown on the left. */
+    avatar?: ReactNode;
+}
+/**
+ * CardHeader — title area with optional subtitle, action, and avatar.
+ */
+declare const CardHeader: react.ForwardRefExoticComponent<CardHeaderProps & react.RefAttributes<HTMLDivElement>>;
+interface CardBodyProps extends ComponentPropsWithoutRef<'div'> {
+    /** Remove default padding. */
+    noPadding?: boolean;
+}
+/**
+ * CardBody — main content area of the card.
+ */
+declare const CardBody: react.ForwardRefExoticComponent<CardBodyProps & react.RefAttributes<HTMLDivElement>>;
+interface CardFooterProps extends ComponentPropsWithoutRef<'div'> {
+    /** Adds a top border separator. */
+    divider?: boolean;
+}
+/**
+ * CardFooter — bottom area for actions and metadata.
+ */
+declare const CardFooter: react.ForwardRefExoticComponent<CardFooterProps & react.RefAttributes<HTMLDivElement>>;
+
+declare const dialogPanelVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | "xs" | "fullscreen" | null | undefined;
+    position?: "bottom" | "left" | "right" | "center" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type DialogPanelVariantProps = VariantProps<typeof dialogPanelVariants>;
+
+interface DialogProps extends DialogPanelVariantProps {
+    /** Whether the dialog is open. */
+    open: boolean;
+    /** Called when dialog should close (ESC, backdrop click, close button). */
+    onClose: () => void;
+    /**
+     * Dialog type — affects icon and color scheme.
+     * - `default`     → neutral (default)
+     * - `destructive` → red, for dangerous actions
+     * - `success`     → green, for confirmations
+     * - `warning`     → amber, for caution
+     * - `info`        → blue, for information
+     */
+    type?: 'default' | 'destructive' | 'success' | 'warning' | 'info';
+    /**
+     * Position of the dialog.
+     * - `center`  → centered modal (default)
+     * - `bottom`  → bottom drawer/sheet
+     * - `left`    → left side panel
+     * - `right`   → right side panel
+     */
+    position?: 'center' | 'bottom' | 'left' | 'right';
+    /** Dialog size (only applies to center position). */
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'fullscreen';
+    /** Title shown in the dialog header. */
+    title?: string;
+    /** Subtitle shown below the title. */
+    subtitle?: string;
+    /** Emoji or icon shown above the title. */
+    icon?: string;
+    /** Hero image shown at the top of the dialog (above header). */
+    imageSrc?: string;
+    /** Alt text for the hero image. */
+    imageAlt?: string;
+    /** Height of the hero image. Default: 160px */
+    imageHeight?: number;
+    /** Shows a close button in the top-right corner. */
+    showCloseButton?: boolean;
+    /** Close when clicking the backdrop. Default: true */
+    closeOnBackdrop?: boolean;
+    /** Close on Escape key. Default: true */
+    closeOnEscape?: boolean;
+    /** Footer content — usually action buttons. */
+    footer?: ReactNode;
+    /** Shows a divider between body and footer. */
+    footerDivider?: boolean;
+    /** Additional className for the panel. */
+    panelClassName?: string;
+    /** Children = dialog body content. */
+    children?: ReactNode;
+}
+/**
+ * Dialog — a modal overlay that demands user attention.
+ *
+ * Features beyond M3:
+ * - 5 types: default, destructive, success, warning, info
+ * - 4 positions: center, bottom drawer, left/right side panel
+ * - 5 sizes: xs, sm, md, lg, fullscreen
+ * - hero image header
+ * - focus trap + escape + backdrop close
+ * - scroll lock on open
+ * - portal rendering (outside DOM tree)
+ * - composable with DialogHeader, DialogBody, DialogFooter
+ *
+ * @example
+ * // Basic
+ * <Dialog open={open} onClose={() => setOpen(false)} title="Hello">
+ *   <DialogBody>Content here</DialogBody>
+ * </Dialog>
+ *
+ * // Destructive
+ * <Dialog
+ *   open={open} onClose={() => setOpen(false)}
+ *   type="destructive"
+ *   title="Delete account?"
+ *   icon="🗑️"
+ *   footer={
+ *     <>
+ *       <Button variant="text" onClick={() => setOpen(false)}>Cancel</Button>
+ *       <Button variant="destructive" onClick={handleDelete}>Delete</Button>
+ *     </>
+ *   }
+ * >
+ *   <DialogBody>This cannot be undone.</DialogBody>
+ * </Dialog>
+ *
+ * // Bottom drawer
+ * <Dialog open={open} onClose={() => setOpen(false)} position="bottom" title="Share">
+ *   <DialogBody>...</DialogBody>
+ * </Dialog>
+ */
+declare const Dialog: react.ForwardRefExoticComponent<DialogProps & react.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Toast variants — CVA configuration.
+ *
+ * Types: default, success, error, warning, info, loading, gradient, glass
+ * Positions: 6 positions
+ */
+declare const toastVariants: (props?: ({
+    type?: "info" | "loading" | "success" | "gradient" | "default" | "error" | "warning" | "glass" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type ToastVariantProps = VariantProps<typeof toastVariants>;
+type ToastType = 'default' | 'success' | 'error' | 'warning' | 'info' | 'loading' | 'gradient' | 'glass';
+type ToastPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+
+interface ToasterProps {
+    /**
+     * Position of the toast stack.
+     * @default 'bottom-right'
+     */
+    position?: ToastPosition;
+    /**
+     * Maximum number of toasts visible at once.
+     * @default 5
+     */
+    maxToasts?: number;
+    /**
+     * Whether to expand all toasts or collapse into a stack.
+     * @default false (collapsed)
+     */
+    expand?: boolean;
+    /**
+     * Gap between toasts in pixels.
+     * @default 8
+     */
+    gap?: number;
+}
+/**
+ * Toaster — renders the toast stack. Place once at the root of your app.
+ *
+ * @example
+ * // In App.tsx or main layout
+ * <Toaster position="bottom-right" />
+ *
+ * // Then anywhere in your app
+ * import { toast } from './components/Toast';
+ * toast.success('Saved!')
+ */
+declare function Toaster({ position, maxToasts, expand, gap, }: ToasterProps): react.ReactPortal | null;
+
+interface ToastAction {
+    label: string;
+    onClick: () => void;
+    variant?: 'primary' | 'ghost';
+}
+interface ToastData {
+    id: string;
+    type: ToastType;
+    title: string;
+    description?: string;
+    duration?: number;
+    progress?: number;
+    showProgress?: boolean;
+    actions?: ToastAction[];
+    avatarSrc?: string;
+    avatarName?: string;
+    imageSrc?: string;
+    icon?: ReactNode;
+    dismissible?: boolean;
+    onDismiss?: () => void;
+    createdAt: number;
+}
+interface ToastOptions extends Omit<ToastData, 'id' | 'createdAt' | 'type'> {
+    id?: string;
+    type?: ToastType;
+}
+/**
+ * toast — the main API for showing toasts.
+ *
+ * @example
+ * toast('Hello world')
+ * toast.success('Saved!')
+ * toast.error('Failed!', { description: 'Check your connection' })
+ * toast.promise(fetch('/api'), { loading: 'Loading...', success: 'Done!', error: 'Failed' })
+ * toast.update(id, { progress: 75 })
+ * toast.dismiss(id)
+ * toast.dismissAll()
+ */
+declare const toast: ((title: string, options?: Partial<ToastOptions>) => string) & {
+    success: (title: string, options?: Partial<ToastOptions>) => string;
+    error: (title: string, options?: Partial<ToastOptions>) => string;
+    warning: (title: string, options?: Partial<ToastOptions>) => string;
+    info: (title: string, options?: Partial<ToastOptions>) => string;
+    loading: (title: string, options?: Partial<ToastOptions>) => string;
+    gradient: (title: string, options?: Partial<ToastOptions>) => string;
+    /**
+     * Rich toast with avatar and multiple actions.
+     */
+    rich: (options: ToastOptions) => string;
+    /**
+     * Progress toast — update progress with toast.update(id, { progress: 75 }).
+     */
+    progress: (title: string, options?: Partial<ToastOptions>) => string;
+    /**
+     * Promise toast — shows loading, then success or error.
+     *
+     * @example
+     * toast.promise(saveData(), {
+     *   loading: 'Saving...',
+     *   success: 'Saved successfully!',
+     *   error: 'Failed to save'
+     * })
+     */
+    promise: <T>(promise: Promise<T>, messages: {
+        loading: string;
+        success: string | ((data: T) => string);
+        error: string | ((err: unknown) => string);
+    }, options?: Partial<ToastOptions>) => Promise<T>;
+    /**
+     * Update an existing toast by id.
+     */
+    update: (id: string, options: Partial<ToastOptions>) => void;
+    /**
+     * Dismiss a toast by id.
+     */
+    dismiss: (id: string) => void;
+    /**
+     * Dismiss all toasts.
+     */
+    dismissAll: () => void;
+};
+
+/**
+ * Tabs variants — CVA configuration.
+ *
+ * Variants: underline, pill, filled, bordered, card, floating, line, bubble, gradient
+ * Orientations: horizontal, vertical
+ */
+declare const tabsListVariants: (props?: ({
+    variant?: "filled" | "pill" | "line" | "gradient" | "floating" | "card" | "underline" | "bordered" | "bubble" | null | undefined;
+    orientation?: "horizontal" | "vertical" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const tabTriggerVariants: (props?: ({
+    variant?: "filled" | "pill" | "line" | "gradient" | "floating" | "card" | "underline" | "bordered" | "bubble" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type TabsListVariantProps = VariantProps<typeof tabsListVariants>;
+type TabTriggerVariantProps = VariantProps<typeof tabTriggerVariants>;
+
+interface TabsProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Default active tab value (uncontrolled).
+     */
+    defaultValue?: string;
+    /**
+     * Controlled active tab value.
+     */
+    value?: string;
+    /**
+     * Callback when active tab changes.
+     */
+    onValueChange?: (value: string) => void;
+    /**
+     * Visual variant.
+     * - `underline`  → M3 primary style, bottom border indicator
+     * - `pill`       → segmented control, filled active tab
+     * - `filled`     → tonal background on active
+     * - `bordered`   → button group style
+     * - `card`       → each tab is a card with icon
+     * - `floating`   → elevated pill with shadow
+     * - `line`       → left border indicator (sidebar style)
+     * - `bubble`     → pill outline that fills on active
+     * - `gradient`   → brand gradient on active tab
+     */
+    variant?: TabsListVariantProps['variant'];
+    /**
+     * Tab orientation.
+     * - `horizontal` → tabs in a row (default)
+     * - `vertical`   → tabs in a column (sidebar style)
+     */
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * Size of the tab labels.
+     */
+    size?: TabTriggerVariantProps['size'];
+}
+/**
+ * Tabs — a navigation component for switching between views.
+ *
+ * Features beyond M3:
+ * - 9 variants: underline, pill, filled, bordered, card, floating, line, bubble, gradient
+ * - horizontal and vertical orientations
+ * - badge counts on tabs
+ * - icons in tabs
+ * - subtitle below tab label
+ * - scrollable overflow
+ * - step/wizard tab style
+ * - full keyboard navigation (arrows, home, end)
+ * - controlled + uncontrolled
+ *
+ * @example
+ * <Tabs defaultValue="overview">
+ *   <TabsList>
+ *     <TabsTrigger value="overview">Overview</TabsTrigger>
+ *     <TabsTrigger value="analytics">Analytics</TabsTrigger>
+ *   </TabsList>
+ *   <TabsContent value="overview">Overview content</TabsContent>
+ *   <TabsContent value="analytics">Analytics content</TabsContent>
+ * </Tabs>
+ */
+declare const Tabs: react.ForwardRefExoticComponent<TabsProps & react.RefAttributes<HTMLDivElement>>;
+interface StepTabItem {
+    value: string;
+    label: string;
+    done?: boolean;
+    disabled?: boolean;
+}
+interface StepTabsProps extends Omit<ComponentPropsWithoutRef<'div'>, 'onChange'> {
+    /** Step items. */
+    steps: StepTabItem[];
+    /** Currently active step value. */
+    value: string;
+    /** Callback when step is clicked. */
+    onChange?: (value: string) => void;
+}
+/**
+ * StepTabs — wizard/onboarding progress tabs.
+ *
+ * @example
+ * <StepTabs
+ *   steps={[
+ *     { value: 'account', label: 'Account', done: true },
+ *     { value: 'profile', label: 'Profile' },
+ *     { value: 'plan', label: 'Plan', disabled: true },
+ *   ]}
+ *   value="profile"
+ *   onChange={setStep}
+ * />
+ */
+declare const StepTabs: react.ForwardRefExoticComponent<StepTabsProps & react.RefAttributes<HTMLDivElement>>;
+
+type AccordionVariant = 'default' | 'bordered' | 'filled' | 'card' | 'flush' | 'separated' | 'gradient' | 'plus' | 'numbered' | 'image';
+
+interface AccordionProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Visual variant.
+     * - `default`   → underline divider between items
+     * - `bordered`  → full border around the group
+     * - `filled`    → tonal background on items
+     * - `card`      → each item is a card
+     * - `flush`     → no borders, hover highlight
+     * - `separated` → separated cards with focus ring
+     * - `gradient`  → brand gradient header when open
+     * - `plus`      → FAQ style with +/- icon
+     * - `numbered`  → step numbers (onboarding)
+     * - `image`     → image/icon side panel
+     */
+    variant?: AccordionVariant;
+    /**
+     * Selection mode.
+     * - `single`   → only one item open at a time (default)
+     * - `multiple` → many items can be open simultaneously
+     */
+    mode?: 'single' | 'multiple';
+    /**
+     * Default open item(s). Use value prop of AccordionItem.
+     */
+    defaultValue?: string | string[];
+    /**
+     * Controlled open items.
+     */
+    value?: string | string[];
+    /**
+     * Callback when open items change.
+     */
+    onValueChange?: (value: string | string[]) => void;
+    /**
+     * Icon style for the expand indicator.
+     * - `chevron` → rotating chevron (default)
+     * - `plus`    → +/- toggle
+     * - `arrow`   → right arrow
+     * - `none`    → no icon
+     */
+    iconStyle?: 'chevron' | 'plus' | 'arrow' | 'none';
+}
+/**
+ * Accordion — collapsible content sections.
+ *
+ * Features beyond M3:
+ * - 10 variants: default, bordered, filled, card, flush, separated, gradient, plus, numbered, image
+ * - single and multiple open modes
+ * - 4 icon styles: chevron, plus, arrow, none
+ * - badge and subtitle on triggers
+ * - icon/image in trigger
+ * - nested accordions
+ * - smooth height animation
+ * - full keyboard navigation
+ *
+ * @example
+ * <Accordion defaultValue="item-1">
+ *   <AccordionItem value="item-1" title="What is this?">
+ *     Content here
+ *   </AccordionItem>
+ *   <AccordionItem value="item-2" title="How does it work?">
+ *     More content
+ *   </AccordionItem>
+ * </Accordion>
+ */
+declare const Accordion: react.ForwardRefExoticComponent<AccordionProps & react.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Progress variants — CVA configuration.
+ *
+ * Variants: default, gradient, glow, striped, thin, segmented
+ * Colors: default, secondary, success, warning, error, info
+ * Sizes: xs, sm, md, lg, xl
+ */
+declare const progressTrackVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | "xl" | "xs" | null | undefined;
+    variant?: "gradient" | "default" | "indeterminate" | "thin" | "bubble" | "glow" | "striped" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type ProgressTrackVariantProps = VariantProps<typeof progressTrackVariants>;
+type ProgressColor = 'default' | 'secondary' | 'success' | 'warning' | 'error' | 'info';
+type ProgressVariant = 'default' | 'gradient' | 'glow' | 'striped' | 'thin' | 'indeterminate' | 'bubble';
+
+interface ProgressProps extends ComponentPropsWithoutRef<'div'>, ProgressTrackVariantProps {
+    /**
+     * Progress value 0-100.
+     * Omit for indeterminate progress.
+     */
+    value?: number;
+    /**
+     * Visual variant.
+     * - `default`       → solid fill
+     * - `gradient`      → brand gradient fill
+     * - `glow`          → neon glow effect
+     * - `striped`       → animated diagonal stripes
+     * - `thin`          → 2px ultra-minimal line
+     * - `indeterminate` → unknown progress, bouncing animation
+     * - `bubble`        → floating value tooltip on fill
+     */
+    variant?: ProgressVariant;
+    /**
+     * Color of the progress fill.
+     */
+    color?: ProgressColor;
+    /**
+     * Size (height) of the progress bar.
+     */
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    /**
+     * Label shown above the progress bar.
+     */
+    label?: string;
+    /**
+     * Value display format.
+     * - `percent` → "65%"
+     * - `fraction` → "6.5/10"
+     * - `custom` → use valueLabel prop
+     * - `none` → hide value
+     */
+    showValue?: 'percent' | 'fraction' | 'none';
+    /**
+     * Custom value label (used when showValue="fraction" or custom).
+     */
+    valueLabel?: string;
+    /**
+     * Helper text shown below the bar.
+     */
+    helperText?: string;
+    /**
+     * Maximum value (default: 100).
+     */
+    max?: number;
+}
+/**
+ * Progress — a linear progress indicator.
+ *
+ * Features beyond M3:
+ * - 7 variants: default, gradient, glow, striped, thin, indeterminate, bubble
+ * - 6 colors
+ * - 5 sizes
+ * - label, value display, helper text
+ * - bubble tooltip that tracks fill position
+ * - full ARIA support
+ *
+ * @example
+ * // Basic
+ * <Progress value={65} />
+ *
+ * // Gradient with label
+ * <Progress value={75} variant="gradient" label="Profile completion" showValue="percent" />
+ *
+ * // Indeterminate
+ * <Progress variant="indeterminate" label="Loading..." />
+ *
+ * // Glow
+ * <Progress value={85} variant="glow" color="success" />
+ */
+declare const Progress: react.ForwardRefExoticComponent<ProgressProps & react.RefAttributes<HTMLDivElement>>;
+interface SegmentedProgressProps extends ComponentPropsWithoutRef<'div'> {
+    /** Total number of segments. */
+    total: number;
+    /** Number of filled segments. */
+    value: number;
+    /** Color of filled segments. */
+    color?: ProgressColor;
+    /** Size of each segment. */
+    size?: 'sm' | 'md' | 'lg';
+    /** Label shown above. */
+    label?: string;
+    /** Custom color per segment index. */
+    segmentColors?: Partial<Record<number, ProgressColor>>;
+}
+/**
+ * SegmentedProgress — discrete steps shown as individual pills.
+ *
+ * @example
+ * <SegmentedProgress total={5} value={3} label="Step 3 of 5" />
+ */
+declare const SegmentedProgress: react.ForwardRefExoticComponent<SegmentedProgressProps & react.RefAttributes<HTMLDivElement>>;
+interface CircularProgressProps extends ComponentPropsWithoutRef<'div'> {
+    /** Progress value 0-100. */
+    value?: number;
+    /** Size in pixels. */
+    size?: number;
+    /** Stroke width. */
+    strokeWidth?: number;
+    /** Color of the progress arc. */
+    color?: ProgressColor;
+    /** Whether to show value in center. */
+    showValue?: boolean;
+    /** Custom label inside circle. */
+    centerLabel?: string;
+    /** Use gradient stroke. */
+    gradient?: boolean;
+}
+/**
+ * CircularProgress — a circular progress indicator.
+ *
+ * @example
+ * <CircularProgress value={75} showValue />
+ * <CircularProgress value={85} color="success" size={80} />
+ */
+declare const CircularProgress: react.ForwardRefExoticComponent<CircularProgressProps & react.RefAttributes<HTMLDivElement>>;
+interface MultiProgressSegment {
+    value: number;
+    color: ProgressColor;
+    label?: string;
+}
+interface MultiProgressProps extends ComponentPropsWithoutRef<'div'> {
+    /** Array of segments. Values should sum to 100. */
+    segments: MultiProgressSegment[];
+    /** Size of the bar. */
+    size?: 'sm' | 'md' | 'lg';
+    /** Show legend below. */
+    showLegend?: boolean;
+    /** Label shown above. */
+    label?: string;
+}
+/**
+ * MultiProgress — a stacked multi-color progress bar.
+ *
+ * @example
+ * <MultiProgress
+ *   segments={[
+ *     { value: 45, color: 'default', label: 'Design' },
+ *     { value: 30, color: 'secondary', label: 'Dev' },
+ *     { value: 25, color: 'success', label: 'QA' },
+ *   ]}
+ *   showLegend
+ * />
+ */
+declare const MultiProgress: react.ForwardRefExoticComponent<MultiProgressProps & react.RefAttributes<HTMLDivElement>>;
+
+type MenuTheme = 'light' | 'dark';
+
+interface DropdownMenuProps {
+    /**
+     * The trigger element. Usually a Button or IconButton.
+     */
+    trigger: ReactNode;
+    /**
+     * Menu content — use MenuItem, MenuSeparator, MenuGroup etc.
+     */
+    children: ReactNode;
+    /**
+     * Visual theme.
+     */
+    theme?: MenuTheme;
+    /**
+     * Horizontal alignment of the menu relative to the trigger.
+     */
+    align?: 'start' | 'end' | 'center';
+    /**
+     * Which side of the trigger to open on.
+     */
+    side?: 'bottom' | 'top';
+    /**
+     * Whether the menu is open (controlled).
+     */
+    open?: boolean;
+    /**
+     * Callback when open state changes.
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Min width of the menu.
+     */
+    minWidth?: number;
+    className?: string;
+}
+/**
+ * DropdownMenu — a floating panel of actions triggered by a button.
+ *
+ * Features beyond M3:
+ * - light and dark themes
+ * - search filter inside menu
+ * - checkbox and radio items
+ * - submenu support
+ * - header with user info
+ * - emoji reactions
+ * - color picker
+ * - avatar team picker
+ * - keyboard navigation (arrows, enter, escape, tab)
+ * - portal rendering
+ * - close on outside click and escape
+ *
+ * @example
+ * <DropdownMenu trigger={<Button>Options</Button>}>
+ *   <MenuItem icon="edit" shortcut="⌘E">Edit</MenuItem>
+ *   <MenuItem icon="copy">Duplicate</MenuItem>
+ *   <MenuSeparator />
+ *   <MenuItem icon="trash" intent="danger">Delete</MenuItem>
+ * </DropdownMenu>
+ */
+declare function DropdownMenu({ trigger, children, theme, align, side, open: controlledOpen, onOpenChange, minWidth, className, }: DropdownMenuProps): react_jsx_runtime.JSX.Element;
+interface MenuItemProps extends ComponentPropsWithoutRef<'button'> {
+    /** Leading icon. */
+    icon?: IconName;
+    /** Keyboard shortcut label. */
+    shortcut?: string;
+    /** Danger/destructive style. */
+    intent?: 'default' | 'danger' | 'active';
+    /** Badge count. */
+    badge?: number | string;
+    /** Description below the label. */
+    description?: string;
+    /** Whether to close menu on click. Default: true */
+    closeOnClick?: boolean;
+    /** Arrow indicating submenu. */
+    hasSubmenu?: boolean;
+}
+/**
+ * MenuItem — a single action in the dropdown menu.
+ */
+declare const MenuItem: react.ForwardRefExoticComponent<MenuItemProps & react.RefAttributes<HTMLButtonElement>>;
+interface MenuCheckboxItemProps extends Omit<MenuItemProps, 'intent'> {
+    checked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+}
+/**
+ * MenuCheckboxItem — a toggleable checkbox item.
+ */
+declare const MenuCheckboxItem: react.ForwardRefExoticComponent<MenuCheckboxItemProps & react.RefAttributes<HTMLButtonElement>>;
+interface MenuRadioItemProps extends Omit<MenuItemProps, 'intent'> {
+    checked?: boolean;
+    onSelect?: () => void;
+}
+/**
+ * MenuRadioItem — a radio selection item.
+ */
+declare const MenuRadioItem: react.ForwardRefExoticComponent<MenuRadioItemProps & react.RefAttributes<HTMLButtonElement>>;
+declare function MenuSeparator({ className }: {
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function MenuGroup({ label, className, children }: {
+    label?: string;
+    className?: string;
+    children?: ReactNode;
+}): react_jsx_runtime.JSX.Element;
+interface MenuHeaderProps {
+    name: string;
+    email?: string;
+    avatarSrc?: string;
+    className?: string;
+}
+/**
+ * MenuHeader — user info shown at the top of profile menus.
+ */
+declare function MenuHeader({ name, email, avatarSrc, className }: MenuHeaderProps): react_jsx_runtime.JSX.Element;
+interface MenuSearchProps {
+    value: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+    className?: string;
+}
+/**
+ * MenuSearch — a search input inside the menu.
+ */
+declare function MenuSearch({ value, onChange, placeholder, className }: MenuSearchProps): react_jsx_runtime.JSX.Element;
+interface MenuAvatarItemProps extends Omit<MenuItemProps, 'icon'> {
+    name: string;
+    avatarSrc?: string;
+    role?: string;
+    selected?: boolean;
+}
+/**
+ * MenuAvatarItem — a team member item with avatar.
+ */
+declare const MenuAvatarItem: react.ForwardRefExoticComponent<MenuAvatarItemProps & react.RefAttributes<HTMLButtonElement>>;
+interface MenuColorPickerProps {
+    colors?: string[];
+    value?: string;
+    onChange?: (color: string) => void;
+    className?: string;
+}
+/**
+ * MenuColorPicker — a color dot grid inside a menu.
+ */
+declare function MenuColorPicker({ colors, value, onChange, className }: MenuColorPickerProps): react_jsx_runtime.JSX.Element;
+interface MenuEmojiReactionsProps {
+    emojis?: string[];
+    onReact?: (emoji: string) => void;
+    className?: string;
+}
+/**
+ * MenuEmojiReactions — a row of emoji reaction buttons.
+ */
+declare function MenuEmojiReactions({ emojis, onReact, className }: MenuEmojiReactionsProps): react_jsx_runtime.JSX.Element;
+interface ContextMenuProps {
+    children: ReactNode;
+    menu: ReactNode;
+    theme?: MenuTheme;
+}
+/**
+ * ContextMenu — shows a menu on right-click.
+ *
+ * @example
+ * <ContextMenu menu={<><MenuItem>Copy</MenuItem><MenuItem>Paste</MenuItem></>}>
+ *   <div>Right click me</div>
+ * </ContextMenu>
+ */
+declare function ContextMenu({ children, menu, theme }: ContextMenuProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Popover variants — CVA configuration.
+ */
+declare const popoverVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | "auto" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type PopoverVariantProps = VariantProps<typeof popoverVariants>;
+type PopoverSide = 'top' | 'bottom' | 'left' | 'right';
+type PopoverAlign = 'start' | 'center' | 'end';
+
+interface PopoverProps extends PopoverVariantProps {
+    /** Trigger element. */
+    trigger: ReactNode;
+    /** Popover content. */
+    children: ReactNode;
+    /** Which side to open on. */
+    side?: PopoverSide;
+    /** Alignment along the side. */
+    align?: PopoverAlign;
+    /** Show arrow indicator. */
+    showArrow?: boolean;
+    /** Controlled open state. */
+    open?: boolean;
+    /** Callback when open changes. */
+    onOpenChange?: (open: boolean) => void;
+    /** Close on outside click. Default: true */
+    closeOnOutside?: boolean;
+    /** Close on escape. Default: true */
+    closeOnEscape?: boolean;
+    /** Additional className for the panel. */
+    className?: string;
+    /** Offset from trigger in px. */
+    offset?: number;
+}
+/**
+ * Popover — a floating interactive panel anchored to a trigger.
+ *
+ * Unlike Tooltip (read-only) and Dropdown (list of actions),
+ * Popover contains rich interactive content like forms, filters,
+ * previews, and settings panels.
+ *
+ * Features:
+ * - 4 sides: top, bottom, left, right
+ * - 3 alignments: start, center, end
+ * - optional arrow indicator
+ * - close on outside click + escape
+ * - portal rendering
+ * - controlled + uncontrolled
+ *
+ * @example
+ * <Popover trigger={<Button>Open</Button>}>
+ *   <p>Popover content here</p>
+ * </Popover>
+ */
+declare function Popover({ trigger, children, side, align, showArrow, open: controlledOpen, onOpenChange, closeOnOutside, closeOnEscape, size, offset, className, }: PopoverProps): react_jsx_runtime.JSX.Element;
+interface PopoverHeaderProps extends ComponentPropsWithoutRef<'div'> {
+    title: string;
+    description?: string;
+    onClose?: () => void;
+}
+declare function PopoverHeader({ title, description, onClose, className, ...props }: PopoverHeaderProps): react_jsx_runtime.JSX.Element;
+declare function PopoverFooter({ className, children, ...props }: ComponentPropsWithoutRef<'div'>): react_jsx_runtime.JSX.Element;
+
+type CalendarVariant = 'default' | 'dark' | 'gradient' | 'minimal';
+interface CalendarProps {
+    value?: Date | null;
+    rangeValue?: [Date | null, Date | null];
+    onChange?: (date: Date) => void;
+    onRangeChange?: (range: [Date | null, Date | null]) => void;
+    mode?: 'single' | 'range';
+    minDate?: Date;
+    maxDate?: Date;
+    disabledDates?: Date[];
+    disableWeekends?: boolean;
+    showTime?: boolean;
+    /** Controlled hour value (lifted from parent). */
+    timeHour?: string;
+    /** Controlled minute value (lifted from parent). */
+    timeMin?: string;
+    /** Controlled AM/PM value (lifted from parent). */
+    timeAmPm?: 'AM' | 'PM';
+    /** Called when user changes time values. */
+    onTimeChange?: (time: {
+        hour: string;
+        min: string;
+        ampm: 'AM' | 'PM';
+    }) => void;
+    variant?: CalendarVariant;
+    presets?: boolean;
+    /** For dual month — which month offset to show */
+    monthOffset?: number;
+    /** For dual month — shared nav handler */
+    onPrevMonth?: () => void;
+    onNextMonth?: () => void;
+    showPrev?: boolean;
+    showNext?: boolean;
+    className?: string;
+}
+declare function Calendar({ value, rangeValue, onChange, onRangeChange, mode, minDate, maxDate, disabledDates, disableWeekends, showTime, timeHour: timeHourProp, timeMin: timeMinProp, timeAmPm: timeAmPmProp, onTimeChange, variant, presets, monthOffset, onPrevMonth, onNextMonth, showPrev, showNext, className, }: CalendarProps): react_jsx_runtime.JSX.Element;
+interface DatePickerProps extends Omit<ComponentPropsWithoutRef<'div'>, 'onChange'> {
+    value?: Date | null;
+    onChange?: (date: Date | null) => void;
+    placeholder?: string;
+    format?: string;
+    showTime?: boolean;
+    minDate?: Date;
+    maxDate?: Date;
+    disableWeekends?: boolean;
+    disabled?: boolean;
+    clearable?: boolean;
+    label?: string;
+    error?: boolean;
+    errorText?: string;
+    helperText?: string;
+    size?: 'sm' | 'md' | 'lg';
+    variant?: CalendarVariant;
+    presets?: boolean;
+}
+declare const DatePicker: react.ForwardRefExoticComponent<DatePickerProps & react.RefAttributes<HTMLDivElement>>;
+interface DateRangePickerProps extends Omit<ComponentPropsWithoutRef<'div'>, 'onChange'> {
+    value?: [Date | null, Date | null];
+    onChange?: (range: [Date | null, Date | null]) => void;
+    placeholder?: [string, string];
+    label?: string;
+    disabled?: boolean;
+    minDate?: Date;
+    maxDate?: Date;
+    disableWeekends?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    helperText?: string;
+    variant?: CalendarVariant;
+    presets?: boolean;
+    dualMonth?: boolean;
+}
+declare const DateRangePicker: react.ForwardRefExoticComponent<DateRangePickerProps & react.RefAttributes<HTMLDivElement>>;
+
+type SliderColor = 'default' | 'secondary' | 'success' | 'warning' | 'error';
+type SliderSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type SliderThumbStyle = 'default' | 'pill' | 'square' | 'bubble';
+type SliderTrackStyle = 'default' | 'glow' | 'gradient' | 'spectrum';
+
+interface SliderProps extends Omit<ComponentPropsWithoutRef<'div'>, 'onChange'> {
+    /** Current value (single). */
+    value?: number;
+    /** Default value for uncontrolled. */
+    defaultValue?: number;
+    /** Callback when value changes. */
+    onChange?: (value: number) => void;
+    /** Minimum value. */
+    min?: number;
+    /** Maximum value. */
+    max?: number;
+    /** Step increment. */
+    step?: number;
+    /** Color of the track fill and thumb. */
+    color?: SliderColor;
+    /** Size (track height + thumb size). */
+    size?: SliderSize;
+    /** Thumb visual style. */
+    thumbStyle?: SliderThumbStyle;
+    /** Track visual style. */
+    trackStyle?: SliderTrackStyle;
+    /** Show tooltip above thumb on hover/drag. */
+    showTooltip?: boolean;
+    /** Show step marks on track. */
+    showMarks?: boolean;
+    /** Labels shown below the track. */
+    marks?: Array<{
+        value: number;
+        label?: string;
+    }>;
+    /** Show min/max labels. */
+    showLabels?: boolean;
+    /** Show numeric input synced to slider. */
+    showInput?: boolean;
+    /** Disabled state. */
+    disabled?: boolean;
+    /** Orientation. */
+    orientation?: 'horizontal' | 'vertical';
+    /** Label shown above. */
+    label?: string;
+    /** Format the displayed value. */
+    formatValue?: (value: number) => string;
+    /** Spectrum colors for spectrum track style. */
+    spectrumColors?: string[];
+}
+/**
+ * Slider — a draggable range input.
+ *
+ * Features:
+ * - 4 thumb styles: default, pill, square, bubble
+ * - 4 track styles: default, glow, gradient, spectrum
+ * - 6 colors
+ * - 5 sizes
+ * - tooltip on hover/drag
+ * - step marks
+ * - custom labels
+ * - number input sync
+ * - vertical orientation
+ * - keyboard navigation
+ * - touch support
+ *
+ * @example
+ * <Slider value={volume} onChange={setVolume} label="Volume" />
+ * <Slider thumbStyle="pill" color="secondary" showTooltip />
+ * <Slider trackStyle="glow" color="success" showMarks step={10} />
+ * <Slider trackStyle="spectrum" />
+ */
+declare const Slider: react.ForwardRefExoticComponent<SliderProps & react.RefAttributes<HTMLDivElement>>;
+interface RangeSliderProps extends Omit<SliderProps, 'value' | 'defaultValue' | 'onChange'> {
+    /** [min, max] selected range. */
+    value?: [number, number];
+    /** Default range. */
+    defaultValue?: [number, number];
+    /** Callback when range changes. */
+    onChange?: (value: [number, number]) => void;
+}
+/**
+ * RangeSlider — two thumbs for selecting a min/max range.
+ *
+ * @example
+ * <RangeSlider
+ *   value={[25, 75]}
+ *   onChange={setRange}
+ *   label="Price range"
+ *   formatValue={v => `$${v}`}
+ * />
+ */
+declare const RangeSlider: react.ForwardRefExoticComponent<RangeSliderProps & react.RefAttributes<HTMLDivElement>>;
+
+type BreadcrumbVariant = 'default' | 'pill' | 'outlined' | 'dark' | 'floating' | 'gradient' | 'underline' | 'arrow' | 'glass' | 'highlight' | 'numbered';
+type BreadcrumbSeparator = 'chevron' | 'slash' | 'dot' | 'arrow';
+
+interface BreadcrumbItem {
+    /** Display label. */
+    label: string;
+    /** URL or href. */
+    href?: string;
+    /** Leading icon. */
+    icon?: IconName;
+    /** Whether this is the current/active page. */
+    active?: boolean;
+    /** Click handler. */
+    onClick?: () => void;
+    /** Step number (for numbered variant). */
+    step?: number;
+    /** Step status (for numbered variant). */
+    stepStatus?: 'done' | 'current' | 'pending';
+}
+interface BreadcrumbProps extends ComponentPropsWithoutRef<'nav'> {
+    /** Array of breadcrumb items. */
+    items: BreadcrumbItem[];
+    /**
+     * Visual variant.
+     * - `default`   → plain text with separator
+     * - `pill`      → each item is a pill badge
+     * - `outlined`  → segmented outlined container
+     * - `dark`      → dark background
+     * - `floating`  → elevated white pill container
+     * - `gradient`  → gradient text on active item
+     * - `underline` → underline on active item
+     * - `arrow`     → chevron-shaped arrow badges
+     * - `glass`     → frosted glass (use on colored backgrounds)
+     * - `highlight` → active item wrapped in pill
+     * - `numbered`  → step numbers with done/current/pending
+     */
+    variant?: BreadcrumbVariant;
+    /**
+     * Separator style.
+     * - `chevron` → › (default)
+     * - `slash`   → /
+     * - `dot`     → •
+     * - `arrow`   → hidden (arrow variant uses clip-path)
+     */
+    separator?: BreadcrumbSeparator;
+    /**
+     * Custom separator element.
+     */
+    customSeparator?: ReactNode;
+    /**
+     * Maximum items to show before collapsing.
+     * Items in the middle are collapsed into ···
+     * 0 = show all (default)
+     */
+    maxItems?: number;
+    /**
+     * Show home icon on first item.
+     */
+    showHomeIcon?: boolean;
+}
+/**
+ * Breadcrumb — hierarchical navigation trail.
+ *
+ * Features beyond M3:
+ * - 11 variants: default, pill, outlined, dark, floating, gradient,
+ *                underline, arrow, glass, highlight, numbered
+ * - 4 separator styles: chevron, slash, dot, arrow
+ * - icons on items
+ * - collapsible middle items with ellipsis
+ * - home icon on first item
+ * - step status for numbered variant
+ * - full ARIA accessibility
+ *
+ * @example
+ * <Breadcrumb
+ *   items={[
+ *     { label: 'Home', href: '/' },
+ *     { label: 'Settings', href: '/settings' },
+ *     { label: 'Profile', active: true },
+ *   ]}
+ * />
+ *
+ * // Glass on dark background
+ * <div className="bg-gradient-to-r from-primary to-secondary p-6">
+ *   <Breadcrumb items={items} variant="glass" />
+ * </div>
+ */
+declare const Breadcrumb: react.ForwardRefExoticComponent<BreadcrumbProps & react.RefAttributes<HTMLElement>>;
+
+type PaginationVariant = 'default' | 'outlined' | 'pill' | 'simple' | 'compact' | 'underline' | 'floating' | 'dark' | 'glass-card' | 'vercel' | 'notion' | 'linear' | 'github' | 'stripe' | 'dots' | 'table' | 'segmented';
+
+interface PaginationProps extends ComponentPropsWithoutRef<'nav'> {
+    /** Current page (1-indexed). */
+    page: number;
+    /** Total number of pages. */
+    totalPages: number;
+    /** Callback when page changes. */
+    onPageChange: (page: number) => void;
+    /**
+     * Visual variant.
+     */
+    variant?: PaginationVariant;
+    /**
+     * Number of sibling pages shown around current.
+     * @default 1
+     */
+    siblings?: number;
+    /** Show first/last page buttons. */
+    showFirstLast?: boolean;
+    /** Show prev/next buttons. */
+    showPrevNext?: boolean;
+    /** Show page jump input. */
+    showJump?: boolean;
+    /**
+     * For table variant — rows per page options.
+     */
+    rowsPerPage?: number;
+    rowsPerPageOptions?: number[];
+    onRowsPerPageChange?: (rows: number) => void;
+    totalItems?: number;
+    /** Loading state — shows skeleton. */
+    loading?: boolean;
+    /** Size. */
+    size?: 'sm' | 'md' | 'lg';
+}
+/**
+ * Pagination — page navigation component.
+ *
+ * Features beyond M3:
+ * - 17 variants: default, outlined, pill, simple, compact, underline,
+ *                floating, dark, glass-card, vercel, notion, linear,
+ *                github, stripe, dots, table, segmented
+ * - ellipsis for large page counts
+ * - first/last page buttons
+ * - page jump input
+ * - table variant with rows per page
+ * - loading skeleton state
+ * - keyboard accessible
+ *
+ * @example
+ * <Pagination page={3} totalPages={10} onPageChange={setPage} />
+ * <Pagination page={3} totalPages={10} onPageChange={setPage} variant="vercel" />
+ * <Pagination page={3} totalPages={10} onPageChange={setPage} variant="dots" />
+ */
+declare const Pagination: react.ForwardRefExoticComponent<PaginationProps & react.RefAttributes<HTMLElement>>;
+
+interface NavItem {
+    id: string;
+    label: string;
+    icon?: IconName;
+    badge?: number | string;
+    href?: string;
+    onClick?: () => void;
+    disabled?: boolean;
+    children?: NavItem[];
+}
+interface NavSection {
+    label?: string;
+    items: NavItem[];
+}
+type NavbarVariant = 'default' | 'saas' | 'vercel' | 'notion' | 'linear' | 'stripe' | 'glass' | 'dark' | 'floating' | 'centered' | 'frosted' | 'pill' | 'gradient' | 'outlined' | 'two-row' | 'command';
+interface NavbarProps extends ComponentPropsWithoutRef<'nav'> {
+    /**
+     * Visual variant.
+     */
+    variant?: NavbarVariant;
+    /**
+     * Nav items shown in the center/main area.
+     */
+    items?: NavItem[];
+    /**
+     * Active item id.
+     */
+    activeId?: string;
+    /**
+     * Callback when nav item is clicked.
+     */
+    onItemClick?: (item: NavItem) => void;
+    /**
+     * Logo/brand element.
+     */
+    logo?: ReactNode;
+    /**
+     * Brand name text (if no logo element).
+     */
+    brandName?: string;
+    /**
+     * Right side actions (buttons, avatar, search, etc).
+     */
+    actions?: ReactNode;
+    /**
+     * Sub-tabs for two-row variant.
+     */
+    subItems?: NavItem[];
+    /**
+     * Active sub-item id.
+     */
+    activeSubId?: string;
+    /**
+     * Title for two-row/notion variant.
+     */
+    title?: string;
+    /**
+     * Show search trigger with ⌘K for command variant.
+     */
+    showSearch?: boolean;
+    /**
+     * Callback for search click.
+     */
+    onSearchClick?: () => void;
+    /**
+     * For sidebar type navbars.
+     */
+    sections?: NavSection[];
+    /**
+     * Sidebar collapsed state.
+     */
+    collapsed?: boolean;
+    /**
+     * Workspace name for linear variant.
+     */
+    workspaceName?: string;
+    /**
+     * Workspace icon/initials.
+     */
+    workspaceIcon?: string;
+    /**
+     * User info for profile area.
+     */
+    user?: {
+        name: string;
+        email?: string;
+        avatarSrc?: string;
+    };
+}
+/**
+ * Navbar — a flexible navigation component for web apps.
+ *
+ * 16 variants covering every real-world web use case:
+ * default, saas, vercel, notion, linear, stripe, glass, dark,
+ * floating, centered, frosted, pill, gradient, outlined, two-row, command
+ *
+ * Also includes Sidebar and IconSidebar for dashboard layouts.
+ */
+declare const Navbar: react.ForwardRefExoticComponent<NavbarProps & react.RefAttributes<HTMLElement>>;
+interface SidebarProps {
+    sections?: NavSection[];
+    activeId?: string;
+    onItemClick?: (item: NavItem) => void;
+    collapsed?: boolean;
+    brandName?: string;
+    logo?: ReactNode;
+    user?: {
+        name: string;
+        email?: string;
+        avatarSrc?: string;
+    };
+    className?: string;
+}
+/**
+ * Sidebar — a vertical navigation panel for dashboards.
+ */
+declare function Sidebar({ sections, activeId, onItemClick, collapsed, brandName, logo, user, className, }: SidebarProps): react_jsx_runtime.JSX.Element;
+
+type StepStatus = 'done' | 'active' | 'pending' | 'error';
+interface StepItem {
+    id: string;
+    label: string;
+    description?: string;
+    sublabel?: string;
+    icon?: IconName;
+    status?: StepStatus;
+    optional?: boolean;
+    content?: ReactNode;
+}
+type StepperVariant = 'default' | 'pill' | 'dot' | 'badge' | 'timeline' | 'gradient' | 'checklist' | 'card' | 'progress' | 'icon';
+interface StepperProps extends ComponentPropsWithoutRef<'div'> {
+    /** Array of steps. */
+    steps: StepItem[];
+    /** Index of the active step (0-based). */
+    activeStep: number;
+    /** Callback when a step is clicked. */
+    onStepClick?: (index: number, step: StepItem) => void;
+    /** Visual variant. */
+    variant?: StepperVariant;
+    /** Orientation. */
+    orientation?: 'horizontal' | 'vertical';
+    /** Allow clicking on completed steps to go back. */
+    clickable?: boolean;
+    /** Color scheme. */
+    color?: 'default' | 'success' | 'secondary';
+    /** Show step content below (for horizontal) or beside (for vertical). */
+    showContent?: boolean;
+}
+/**
+ * Stepper — a multi-step progress indicator.
+ *
+ * Features beyond M3:
+ * - 10 variants: default, pill, dot, badge, timeline, gradient,
+ *                checklist, card, progress, icon
+ * - horizontal and vertical orientations
+ * - clickable steps (navigate back)
+ * - error state per step
+ * - optional step labels
+ * - description/sublabel on steps
+ * - content panel
+ *
+ * @example
+ * <Stepper steps={steps} activeStep={2} />
+ * <Stepper steps={steps} activeStep={1} variant="timeline" orientation="vertical" />
+ * <Stepper steps={steps} activeStep={2} variant="gradient" />
+ */
+declare const Stepper: react.ForwardRefExoticComponent<StepperProps & react.RefAttributes<HTMLDivElement>>;
+
+type DividerStyle = 'solid' | 'dashed' | 'dotted' | 'thick' | 'gradient' | 'gradient-fade' | 'double';
+type DividerColor = 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'error';
+type DividerOrientation = 'horizontal' | 'vertical';
+type DividerLabelAlign = 'left' | 'center' | 'right';
+
+interface DividerProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Line style.
+     * - `solid`         → plain line (default)
+     * - `dashed`        → dashed line
+     * - `dotted`        → dotted line
+     * - `thick`         → 2px thick line
+     * - `gradient`      → colored gradient line
+     * - `gradient-fade` → fades to transparent at edges
+     * - `double`        → two parallel lines
+     */
+    lineStyle?: DividerStyle;
+    /**
+     * Color of the line.
+     */
+    color?: DividerColor;
+    /**
+     * Orientation.
+     * - `horizontal` → horizontal line (default)
+     * - `vertical`   → vertical line for inline use
+     */
+    orientation?: DividerOrientation;
+    /**
+     * Label shown in the middle (or left/right) of the divider.
+     */
+    label?: ReactNode;
+    /**
+     * Label alignment.
+     * @default 'center'
+     */
+    labelAlign?: DividerLabelAlign;
+    /**
+     * Icon shown centered in the divider.
+     */
+    icon?: IconName;
+    /**
+     * Inset from left (for list separators).
+     * E.g. inset={48} adds 48px left margin.
+     */
+    inset?: number;
+    /**
+     * Show as a section title divider — label above the line.
+     */
+    sectionTitle?: boolean;
+    /**
+     * Show as a chat date badge style.
+     */
+    chatDate?: boolean;
+    /**
+     * Bold section break style.
+     */
+    boldBreak?: boolean;
+    /**
+     * Decorative spacing dots style (vertical).
+     */
+    spacingDots?: boolean;
+    /**
+     * Number of decorative dots for spacingDots variant.
+     * @default 1
+     */
+    dots?: number;
+}
+/**
+ * Divider — a line that separates content sections.
+ *
+ * Features beyond M3:
+ * - 7 line styles: solid, dashed, dotted, thick, gradient, gradient-fade, double
+ * - 6 colors: default, primary, secondary, success, warning, error
+ * - horizontal and vertical orientations
+ * - label with left/center/right alignment
+ * - icon centered in divider
+ * - inset for list separators
+ * - section title (label above line)
+ * - chat date badge style
+ * - bold section break
+ * - decorative spacing dots
+ *
+ * @example
+ * // Basic
+ * <Divider />
+ *
+ * // With label
+ * <Divider label="OR" />
+ * <Divider label="Today" chatDate />
+ *
+ * // Styled
+ * <Divider lineStyle="dashed" />
+ * <Divider lineStyle="gradient" color="primary" />
+ *
+ * // Vertical
+ * <div className="flex h-8 items-center gap-3">
+ *   <span>Home</span>
+ *   <Divider orientation="vertical" />
+ *   <span>About</span>
+ * </div>
+ *
+ * // Inset (list separator)
+ * <Divider inset={48} />
+ *
+ * // Section title
+ * <Divider label="Personal information" sectionTitle />
+ *
+ * // Bold break
+ * <Divider label="Chapter 1" boldBreak />
+ */
+declare const Divider: react.ForwardRefExoticComponent<DividerProps & react.RefAttributes<HTMLDivElement>>;
+
+export { Accordion, type AccordionProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Badge, type BadgeProps, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, type ButtonProps, Calendar, type CalendarProps, Card, CardBody, CardFooter, CardHeader, CardMedia, type CardProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, Chip, ChipGroup, type ChipGroupProps, type ChipProps, CircularProgress, ContextMenu, DatePicker, type DatePickerProps, DateRangePicker, type DateRangePickerProps, Dialog, type DialogProps, Divider, type DividerProps, DropdownMenu, type DropdownMenuProps, Icon, IconButton, type IconButtonProps, type IconName, Input, type InputProps, MenuAvatarItem, MenuCheckboxItem, MenuColorPicker, MenuEmojiReactions, MenuGroup, MenuHeader, MenuItem, type MenuItemProps, MenuRadioItem, MenuSearch, MenuSeparator, MultiProgress, type NavItem, type NavSection, Navbar, type NavbarProps, type NavbarVariant, Pagination, type PaginationProps, Popover, PopoverFooter, PopoverHeader, type PopoverProps, Progress, type ProgressProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, RangeSlider, type RangeSliderProps, SegmentedProgress, Select, type SelectProps, Sidebar, type SidebarProps, Skeleton, Slider, type SliderProps, Spinner, type SpinnerProps, type StepItem, type StepStatus, StepTabs, Stepper, type StepperProps, type StepperVariant, Switch, type SwitchProps, Tabs, type TabsProps, type ToastAction, type ToastData, type ToastOptions, type ToastPosition, type ToastType, type ToastVariantProps, Toaster, type ToasterProps, Tooltip, type TooltipProps, cn, toast, toastVariants };