@sckyzo/cosmos-react 0.0.1

package/dist/index.d.ts

@@ -0,0 +1,3292 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
+import { HTMLAttributes, ReactNode, ElementType, ComponentType, ReactElement, LiHTMLAttributes, AnchorHTMLAttributes, ButtonHTMLAttributes, ImgHTMLAttributes, ComponentPropsWithoutRef, InputHTMLAttributes, SelectHTMLAttributes, TextareaHTMLAttributes, ChangeEvent } from 'react';
+import { LucideIcon } from 'lucide-react';
+import useEmblaCarousel from 'embla-carousel-react';
+import * as RadixAccordion from '@radix-ui/react-accordion';
+import { ToasterProps } from 'sonner';
+export { toast } from 'sonner';
+import { Command } from 'cmdk';
+import { DayPickerProps } from 'react-day-picker';
+
+/**
+ * Deterministic placeholder avatar for stories and docs.
+ *
+ * Returns a `data:image/svg+xml;…` URL — fully local, no network fetch — that
+ * renders the seed's initials over a Cosmos-accent background colour picked
+ * deterministically from a stable hash of the seed.
+ *
+ * Use inside `*.stories.tsx` whenever a face is needed but a real user photo
+ * is not desirable: avoids reliance on `i.pravatar.cc` / `images.unsplash.com`,
+ * works offline, and produces no licensing concerns. Real apps should plug
+ * their own avatar service for production data.
+ *
+ * @example
+ * ```tsx
+ * import { placeholderAvatar } from '@sckyzo/cosmos-react';
+ *
+ * <img src={placeholderAvatar('Aiden Park', 64)} alt="" className="size-8 rounded-full" />
+ * ```
+ */
+type PlaceholderAvatarOptions = {
+    /** Override the auto-picked accent background (any CSS colour). */
+    bg?: string;
+    /** Override the foreground (initials) colour. */
+    fg?: string;
+};
+/**
+ * Build a deterministic placeholder avatar data URL.
+ *
+ * @param seed   The string used both to derive the initials and to pick the
+ *               accent background. Same seed → same avatar.
+ * @param size   Square pixel size (default `64`).
+ * @param opts   Optional colour overrides.
+ */
+declare const placeholderAvatar: (seed: string, size?: number, opts?: PlaceholderAvatarOptions) => string;
+type PlaceholderCoverOptions = {
+    /** Override the two gradient stops. */
+    from?: string;
+    to?: string;
+};
+/**
+ * Build a deterministic placeholder landscape cover data URL.
+ *
+ * Renders a brand-coherent SVG with a seed-derived gradient and two soft
+ * decorative circles. Suitable for blog hero images, article tiles, and any
+ * other "cover" slot where a real photo is not available.
+ *
+ * @example
+ * ```tsx
+ * <img src={placeholderCover('Cosmos release notes', 1600, 700)} alt="" />
+ * ```
+ */
+declare const placeholderCover: (seed: string, width?: number, height?: number, opts?: PlaceholderCoverOptions) => string;
+
+/**
+ * Storybook docs parameters preset for components that render via portals
+ * (Modal, Drawer, Popover, NotificationsPanel, UserMenu, DatePicker,
+ * CommandPalette, …).
+ *
+ * Background: Storybook's autodocs renders stories *inline* by default. This
+ * means a story whose visible content lives in `document.body` (via React
+ * portal) or floats with `position: fixed/absolute` doesn't push the autodocs
+ * preview block to the right size — the panel either clips or vanishes.
+ *
+ * The official Storybook v10 fix is to render the story inside an iframe and
+ * reserve a fixed iframe height. This helper bundles that pattern so consumers
+ * don't repeat the boilerplate at every meta:
+ *
+ * @example
+ * ```ts
+ * const meta = {
+ *   title: 'Overlays/Command Palette',
+ *   component: CommandPalette,
+ *   parameters: portalDocsParams.lg(),
+ *   tags: ['autodocs'],
+ * } satisfies Meta<typeof CommandPalette>;
+ * ```
+ *
+ * Variants are sized to common portal footprints. Pass a custom number when
+ * the preset doesn't fit:
+ *
+ * @example
+ * ```ts
+ * parameters: portalDocsParams(720)
+ * ```
+ */
+declare const buildParams: (height: number) => {
+    layout: "fullscreen";
+    docs: {
+        story: {
+            inline: boolean;
+            iframeHeight: string;
+        };
+    };
+};
+type PortalDocsParams = ((height?: number) => ReturnType<typeof buildParams>) & {
+    /** ~320 px — Tooltip, compact Popover. */
+    sm: () => ReturnType<typeof buildParams>;
+    /** ~480 px — Dropdown, small Modal, Date picker. */
+    md: () => ReturnType<typeof buildParams>;
+    /** ~640 px — Drawer, CommandPalette, large Modal. */
+    lg: () => ReturnType<typeof buildParams>;
+    /** ~800 px — Full-screen Modal, page templates. */
+    full: () => ReturnType<typeof buildParams>;
+};
+declare const portalDocsParams: PortalDocsParams;
+
+type DividerAlign = 'left' | 'center' | 'right';
+type DividerProps = HTMLAttributes<HTMLDivElement> & {
+    /**
+     * Render an inset label/icon centered (or aligned) on top of the line.
+     * Mutually exclusive with `bordered` row helpers (use `Divider.Row` for those).
+     */
+    inset?: ReactNode;
+    /** Position of the inset element along the line. Default `center`. */
+    align?: DividerAlign;
+    /**
+     * When `true`, the inset slot uses larger text (`text-base font-semibold
+     * text-gray-900`) instead of the default `text-sm text-gray-500`.
+     * Maps to TUI "With title" / "With title on left".
+     */
+    emphasis?: boolean;
+    /**
+     * Background color of the inset slot — must match the surrounding surface
+     * so the line appears to pass behind. Default `bg-white dark:bg-gray-900`.
+     */
+    insetBg?: string;
+};
+type DividerIconProps = Omit<DividerProps, 'inset' | 'emphasis'> & {
+    icon: ElementType;
+    /** Icon CSS class for sizing/color. Default `size-5 text-gray-400`. */
+    iconClassName?: string;
+};
+type DividerRowProps = HTMLAttributes<HTMLDivElement> & {
+    /** Left-aligned title. Use `null` to render only actions. */
+    title?: ReactNode;
+    /** Right-aligned trailing content — button, button group, toolbar, etc. */
+    actions?: ReactNode;
+    /**
+     * Use a larger font size for the title (TUI "With title and button").
+     * Default `true`. Set `false` to use plain text.
+     */
+    emphasis?: boolean;
+};
+declare const Divider: (({ inset, align, emphasis, insetBg, className, ...rest }: DividerProps) => react_jsx_runtime.JSX.Element) & {
+    Icon: ({ icon: IconCmp, iconClassName, align, insetBg, className, ...rest }: DividerIconProps) => react_jsx_runtime.JSX.Element;
+    Row: ({ title, actions, emphasis, className, ...rest }: DividerRowProps) => react_jsx_runtime.JSX.Element;
+};
+
+type MediaObjectAlign = 'start' | 'center' | 'bottom' | 'stretch';
+type MediaObjectPosition = 'left' | 'right';
+type MediaObjectProps = HTMLAttributes<HTMLDivElement> & {
+    align?: MediaObjectAlign;
+    mediaPosition?: MediaObjectPosition;
+    /** Gap between the media and the body. Default `gap-x-4` (16px). */
+    gapClassName?: string;
+};
+type MediaObjectImageProps = HTMLAttributes<HTMLDivElement>;
+type MediaObjectBodyProps = HTMLAttributes<HTMLDivElement>;
+declare const MediaObject: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+    align?: MediaObjectAlign;
+    mediaPosition?: MediaObjectPosition;
+    /** Gap between the media and the body. Default `gap-x-4` (16px). */
+    gapClassName?: string;
+} & react.RefAttributes<HTMLDivElement>> & {
+    Image: react.ForwardRefExoticComponent<MediaObjectImageProps & react.RefAttributes<HTMLDivElement>>;
+    Body: react.ForwardRefExoticComponent<MediaObjectBodyProps & react.RefAttributes<HTMLDivElement>>;
+    Title: ({ className, children, ...rest }: HTMLAttributes<HTMLHeadingElement> & {
+        children?: ReactNode;
+    }) => react_jsx_runtime.JSX.Element;
+    Description: ({ className, children, ...rest }: HTMLAttributes<HTMLParagraphElement> & {
+        children?: ReactNode;
+    }) => react_jsx_runtime.JSX.Element;
+};
+
+type TopbarProps = {
+    /** Current page title (≠ site name — that lives in `Sidebar.Brand`). */
+    pageTitle?: ReactNode;
+    /**
+     * Whether the sidebar is currently collapsed. Pass alongside `onToggleSidebar`
+     * to render a built-in hamburger button. Pass `null` to hide the button
+     * entirely (e.g. for pages without a sidebar).
+     */
+    sidebarCollapsed?: boolean | null;
+    /** Callback fired when the built-in hamburger is clicked. */
+    onToggleSidebar?: () => void;
+    /** Extra slot rendered between the hamburger and the page title. */
+    leftActions?: ReactNode;
+    /** Center area — typically search, breadcrumb, or empty. */
+    center?: ReactNode;
+    /** Right-aligned actions — theme switcher, notifications, avatar… */
+    rightActions?: ReactNode;
+    /** Optional className override. */
+    className?: string;
+};
+/**
+ * Topbar — application header bar.
+ *
+ * Layout: [hamburger] [leftActions] [pageTitle] [center] [rightActions]
+ *
+ * The site brand belongs in `<Sidebar.Brand />` — the topbar carries only
+ * the sidebar collapse button, the current page title, and contextual
+ * actions. Matches the rackscope/TailAdmin pattern.
+ *
+ * Height: 72px. Background: `var(--color-bg-panel)` with a 500ms
+ * background-color transition (eases the dark/light toggle).
+ */
+declare const Topbar: ({ pageTitle, sidebarCollapsed, onToggleSidebar, leftActions, center, rightActions, className, }: TopbarProps) => react_jsx_runtime.JSX.Element;
+
+type SidebarProps = {
+    /** Whether the sidebar is in collapsed (icons-only) state. */
+    collapsed?: boolean;
+    /** Width when expanded (px). Default: 264 */
+    width?: number;
+    /** Width when collapsed (px). Default: 72 */
+    collapsedWidth?: number;
+    /** Sidebar content — typically Sidebar.Brand / .Item / .SubMenu / .Group / .Section. */
+    children: ReactNode;
+    /** Footer content (sticks to bottom — e.g. user profile + collapse btn). */
+    footer?: ReactNode;
+    /** Optional className override. */
+    className?: string;
+};
+/**
+ * Sidebar — left-side navigation panel.
+ *
+ * Compound component: brand + items + groups + sub-menus + footer slot.
+ * Smooth width transition when `collapsed` toggles. The `collapsed` state
+ * is automatically threaded to every subcomponent via React context, so
+ * children don't need to receive it as a prop.
+ */
+declare const SidebarRoot: ({ collapsed, width, collapsedWidth, children, footer, className, }: SidebarProps) => react_jsx_runtime.JSX.Element;
+type SidebarBrandProps = {
+    /** Logo node — typically a small icon, lucide component, or img. */
+    logo?: ReactNode;
+    /** Product / app name. */
+    title: string;
+    /** Optional smaller subtitle below the title. */
+    subtitle?: string;
+    /** href to navigate when the brand is clicked. */
+    href?: string;
+    /** click handler (alternative to href). */
+    onClick?: () => void;
+    /** Override the inherited collapsed state (defaults to `useContext`). */
+    collapsed?: boolean;
+};
+declare const SidebarBrand: ({ logo, title, subtitle, href, onClick, collapsed: collapsedProp, }: SidebarBrandProps) => react_jsx_runtime.JSX.Element;
+type SidebarItemProps = {
+    /** Icon component (lucide-react or any React component accepting className). */
+    icon: ComponentType<{
+        className?: string;
+    }>;
+    /** Item label. */
+    label: string;
+    /** Whether the item is active (highlighted). */
+    active?: boolean;
+    /** Link target — renders an <a> if set, otherwise a <button>. */
+    href?: string;
+    /** Click handler (if not using href). */
+    onClick?: () => void;
+    /** Optional badge (count, "new"…) shown right of label. Hidden when collapsed. */
+    badge?: ReactNode;
+    /** Override the inherited collapsed state. */
+    collapsed?: boolean;
+    /** Indentation depth (for nested items inside groups). Default: 0. */
+    depth?: number;
+};
+declare const SidebarItem: ({ icon: Icon, label, active, href, onClick, badge, collapsed: collapsedProp, depth, }: SidebarItemProps) => react_jsx_runtime.JSX.Element;
+type SidebarSubMenuProps = {
+    icon: ComponentType<{
+        className?: string;
+    }>;
+    label: string;
+    /** Initial open state. */
+    defaultOpen?: boolean;
+    /** Override the inherited collapsed state. */
+    collapsed?: boolean;
+    /** Whether any child item is active. */
+    active?: boolean;
+    /** Optional badge shown right of label (hidden when collapsed). */
+    badge?: ReactNode;
+    /** Nested items — typically `Sidebar.Item` with `depth={1}`. */
+    children: ReactNode;
+};
+declare const SidebarSubMenu: ({ icon: Icon, label, defaultOpen, collapsed: collapsedProp, active, badge, children, }: SidebarSubMenuProps) => react_jsx_runtime.JSX.Element;
+type SidebarGroupProps = {
+    label: string;
+    defaultOpen?: boolean;
+    collapsed?: boolean;
+    children: ReactNode;
+};
+declare const SidebarGroup: ({ label, defaultOpen, collapsed: collapsedProp, children, }: SidebarGroupProps) => react_jsx_runtime.JSX.Element;
+type SidebarSectionProps = {
+    label?: string;
+    collapsed?: boolean;
+    children: ReactNode;
+};
+declare const SidebarSection: ({ label, collapsed: collapsedProp, children }: SidebarSectionProps) => react_jsx_runtime.JSX.Element;
+type SidebarComponent = typeof SidebarRoot & {
+    Brand: typeof SidebarBrand;
+    Item: typeof SidebarItem;
+    Group: typeof SidebarGroup;
+    Section: typeof SidebarSection;
+    SubMenu: typeof SidebarSubMenu;
+};
+declare const Sidebar: SidebarComponent;
+
+type ShellProps = {
+    /** Top header bar — typically `<Topbar />`. */
+    topbar?: ReactElement<TopbarProps>;
+    /** Left sidebar — typically `<Sidebar />`. */
+    sidebar?: ReactElement<SidebarProps>;
+    /** Main content area. */
+    children: ReactNode;
+    /**
+     * Optional right-aligned secondary panel — mirrors the TUI Plus "Multi-
+     * column" application shell pattern (sidebar + main + secondary). Renders
+     * after `children` inside a flex row below the topbar.
+     */
+    secondary?: ReactNode;
+    /** Width class for the secondary panel. Default `w-80` (320px). */
+    secondaryWidthClassName?: string;
+    /** Initial collapsed state of the sidebar. Default: `false`. */
+    defaultSidebarCollapsed?: boolean;
+    /**
+     * If you control the collapsed state externally (e.g. from a router or a
+     * playlist context), pass it here. When set, Shell becomes a controlled
+     * component and `defaultSidebarCollapsed` is ignored.
+     */
+    sidebarCollapsed?: boolean;
+    /** Fired whenever the collapsed state toggles. */
+    onSidebarToggle?: (collapsed: boolean) => void;
+    /** Optional className override on the root element. */
+    className?: string;
+};
+/**
+ * Shell — application root layout.
+ *
+ * Owns the sidebar collapsed state and threads it down to both the
+ * `Topbar` (built-in hamburger button) and the `Sidebar` (width animation
+ * + brand). Pass `sidebarCollapsed` to make this controlled, otherwise
+ * Shell manages it internally.
+ *
+ * Composition is automatic: clone the topbar/sidebar elements you pass in
+ * and inject `sidebarCollapsed` + `onToggleSidebar` / `collapsed` props.
+ * You only need to write
+ *
+ *     <Shell topbar={<Topbar pageTitle="…" />} sidebar={<Sidebar>…</Sidebar>}>
+ *       …
+ *     </Shell>
+ */
+declare const Shell: ({ topbar, sidebar, children, secondary, secondaryWidthClassName, defaultSidebarCollapsed, sidebarCollapsed: controlledCollapsed, onSidebarToggle, className, }: ShellProps) => react_jsx_runtime.JSX.Element;
+
+type PageBreadcrumbItem = {
+    label: string;
+    href?: string;
+    onClick?: () => void;
+};
+type PageBreadcrumbProps = {
+    /** Ordered list of breadcrumb items. First gets a Home icon, last is current page (no link). */
+    items: PageBreadcrumbItem[];
+    className?: string;
+};
+/**
+ * PageBreadcrumb — slim breadcrumb shown below a page title.
+ *
+ * The first item is decorated with a Home icon. The last item is the current
+ * page (rendered as plain text, not a link). Items in between are clickable
+ * (either via `href` or `onClick`).
+ */
+declare const PageBreadcrumb: ({ items, className }: PageBreadcrumbProps) => react_jsx_runtime.JSX.Element;
+
+type PageHeaderProps = {
+    /** Main page title (h2) */
+    title: string;
+    /** Optional description shown below title (only when no breadcrumb) */
+    description?: string;
+    /** Breadcrumb shown below title (replaces description if provided) */
+    breadcrumb?: ReactNode;
+    /**
+     * Optional meta row shown below the title — typically a `flex gap-x-6` of
+     * `<PageHeader.MetaItem icon=...>` children, mirroring the TUI "With meta
+     * and actions" pattern. Renders alongside (below) `breadcrumb` and
+     * `description`.
+     */
+    meta?: ReactNode;
+    /** Right-aligned actions (buttons, icon buttons, etc.) */
+    actions?: ReactNode;
+    className?: string;
+};
+type PageHeaderMetaItemProps = {
+    /** Lucide icon (or any component accepting `className`). */
+    icon?: React.ComponentType<{
+        className?: string;
+        'aria-hidden'?: boolean;
+    }>;
+    children: ReactNode;
+};
+declare const PageHeader: (({ title, description, breadcrumb, meta, actions, className }: PageHeaderProps) => react_jsx_runtime.JSX.Element) & {
+    MetaItem: ({ icon: Icon, children }: PageHeaderMetaItemProps) => react_jsx_runtime.JSX.Element;
+};
+
+type SectionCardIconTone = 'brand' | 'blue' | 'violet' | 'green' | 'amber' | 'red' | 'gray';
+type SectionCardProps = {
+    /** Section title (h3) */
+    title: string;
+    /** Optional description shown below title */
+    desc?: string;
+    /** Optional icon component (lucide-react or any React component accepting className) */
+    icon?: ComponentType<{
+        className?: string;
+    }>;
+    /** Preset color theme for the icon (sets text + bg in one shot). */
+    iconTone?: SectionCardIconTone;
+    /** Tailwind text-* class for the icon. Overridden by `iconTone` when both are set. */
+    iconColor?: string;
+    /** Tailwind bg-* class for the icon container. Overridden by `iconTone` when both are set. */
+    iconBg?: string;
+    /** Card content */
+    children?: ReactNode;
+    className?: string;
+};
+/**
+ * SectionCard — white card with title, optional icon and description, and children.
+ *
+ * The de-facto building block for grouped content in a page. Use multiple
+ * SectionCards stacked vertically (with `space-y-6`) or in a grid.
+ */
+declare const SectionCard: ({ title, desc, icon: Icon, iconTone, iconColor, iconBg, children, className, }: SectionCardProps) => react_jsx_runtime.JSX.Element;
+
+type PageCardProps = {
+    children: ReactNode;
+    className?: string;
+};
+/**
+ * PageCard — full-page outer card.
+ *
+ * Replaces multiple SectionCards stacked: a single rounded-2xl bordered card
+ * that wraps ALL page content. Use for settings, profiles, forms — anything
+ * that's hard to read full-width.
+ *
+ * Combine with `<ContentNarrow>` inside for a centered constrained column.
+ */
+declare const PageCard: ({ children, className }: PageCardProps) => react_jsx_runtime.JSX.Element;
+
+type ContentNarrowProps = {
+    children: ReactNode;
+    /** Max width in px. Default: 680 */
+    maxWidth?: number;
+    className?: string;
+};
+/**
+ * ContentNarrow — centered constrained-width wrapper.
+ *
+ * Use inside PageCard or anywhere you want a readable column of content
+ * (settings forms, prose, profile pages…). Default width is 680px.
+ */
+declare const ContentNarrow: ({ children, maxWidth, className }: ContentNarrowProps) => react_jsx_runtime.JSX.Element;
+
+type ColBoxProps = {
+    /** Label shown centered (typically a percentage like "50%") */
+    label: string;
+    /** Min height in px. Default: 80 */
+    height?: number;
+    className?: string;
+};
+/**
+ * ColBox — styled placeholder box for layout demos.
+ *
+ * Useful when prototyping page layouts to visualize column proportions
+ * (e.g. "20% / 60% / 20%"). Same visual treatment as SectionCard but
+ * with a centered monospace label.
+ */
+declare const ColBox: ({ label, height, className }: ColBoxProps) => react_jsx_runtime.JSX.Element;
+
+type LoadingStateProps = {
+    /** Message shown below the spinner. Default: 'Loading…' */
+    message?: string;
+    className?: string;
+};
+/**
+ * LoadingState — spinning loader with a message.
+ *
+ * Use inside a SectionCard or any container while data is being fetched.
+ * Fills available height with vertical centering.
+ */
+declare const LoadingState: ({ message, className }: LoadingStateProps) => react_jsx_runtime.JSX.Element;
+
+type EmptyStateProps = {
+    /** Title (typically "No data" or domain-specific) */
+    title?: string;
+    /** Optional description below title */
+    description?: string;
+    /** Optional call-to-action (button, link) */
+    action?: ReactNode;
+    className?: string;
+};
+/**
+ * EmptyState — friendly empty-list placeholder.
+ *
+ * Use when an API call returns no results. Always show a description
+ * if there's an action the user can take to populate the list.
+ */
+declare const EmptyState: ({ title, description, action, className, }: EmptyStateProps) => react_jsx_runtime.JSX.Element;
+
+type ErrorStateProps = {
+    /** Error message. Default: 'Something went wrong.' */
+    message?: string;
+    /** Optional retry callback. If set, a "Try again" link appears. */
+    onRetry?: () => void;
+    className?: string;
+};
+/**
+ * ErrorState — error placeholder with optional retry action.
+ *
+ * Use when an API call fails or rendering fails inside a section.
+ * Pair with `<EmptyState>` when the error is "no data found" rather
+ * than a real failure.
+ */
+declare const ErrorState: ({ message, onRetry, className, }: ErrorStateProps) => react_jsx_runtime.JSX.Element;
+
+type SkProps = {
+    /** Tailwind height class — default `h-4`. */
+    h?: string;
+    /** Tailwind width class — default `w-full`. */
+    w?: string;
+    /** Tailwind border-radius class — default `rounded`. */
+    round?: string;
+    className?: string;
+};
+/**
+ * Sk — primitive skeleton block (animated pulsing rectangle). Compose with
+ * the Skeleton presets (SkeletonText / SkeletonTable / SkeletonList) or
+ * use directly for custom placeholders.
+ */
+declare const Sk: ({ h, w, round, className }: SkProps) => react_jsx_runtime.JSX.Element;
+type SkeletonTextProps = {
+    lines?: number;
+    className?: string;
+};
+declare const SkeletonText: ({ lines, className }: SkeletonTextProps) => react_jsx_runtime.JSX.Element;
+type SkeletonTableProps = {
+    rows?: number;
+    cols?: number;
+    className?: string;
+};
+declare const SkeletonTable: ({ rows, cols, className }: SkeletonTableProps) => react_jsx_runtime.JSX.Element;
+type SkeletonListProps = {
+    rows?: number;
+    showAction?: boolean;
+    className?: string;
+};
+declare const SkeletonList: ({ rows, showAction, className }: SkeletonListProps) => react_jsx_runtime.JSX.Element;
+
+/** Health status — used by StatusBadge, HealthDot, HealthBadge, and lists. */
+type HealthStatus = 'OK' | 'WARN' | 'CRIT' | 'UNKNOWN' | 'INFO';
+/** Tailwind class string per status — pill background + text color. */
+declare const STATUS_PILL: Record<HealthStatus, string>;
+/** Raw color hex per status — used for HealthDot pulse animation. */
+declare const STATUS_COLOR: Record<HealthStatus, string>;
+
+type StatusBadgeProps = {
+    status: HealthStatus;
+    size?: 'sm' | 'md' | 'lg';
+    label?: string;
+    className?: string;
+};
+/**
+ * StatusBadge — rounded-full status pill (OK / WARN / CRIT / UNKNOWN).
+ *
+ * Three sizes: sm (inline in tables), md (default), lg (prominent display).
+ */
+declare const StatusBadge: ({ status, size, label, className }: StatusBadgeProps) => react_jsx_runtime.JSX.Element;
+
+type HealthDotProps = {
+    status: HealthStatus;
+    /** Show a pulsing animation around the dot */
+    pulse?: boolean;
+    className?: string;
+};
+/**
+ * HealthDot — small colored circle indicator (10px).
+ *
+ * Use for compact status displays (next to a label, in a row, in a chart legend).
+ * Set `pulse` to draw attention (recommended for CRIT).
+ */
+declare const HealthDot: ({ status, pulse, className }: HealthDotProps) => react_jsx_runtime.JSX.Element;
+
+type HealthBadgeProps = {
+    status: HealthStatus;
+    /** Custom label override (default: the status text) */
+    label?: string;
+    className?: string;
+};
+/**
+ * HealthBadge — prominent status badge with icon + label (rounded-lg).
+ *
+ * Larger and more visible than StatusBadge — use for hero status displays
+ * (e.g. "System Health" page, dashboard summary cards).
+ */
+declare const HealthBadge: ({ status, label, className }: HealthBadgeProps) => react_jsx_runtime.JSX.Element;
+
+type StackedListProps = Omit<HTMLAttributes<HTMLUListElement>, 'children'> & {
+    children: ReactNode;
+};
+type StackedListItemProps = LiHTMLAttributes<HTMLLIElement> & {
+    /** Leading slot — typically an `<img>` (size-12, rounded-full) or `<Avatar>`. */
+    avatar?: ReactNode;
+    /** Primary text. */
+    title: ReactNode;
+    /** Secondary text below the title (truncated by default). */
+    subtitle?: ReactNode;
+    /** Right-aligned meta column, hidden on mobile (mirrors TUI `hidden sm:flex`). */
+    meta?: ReactNode;
+    /** Trailing slot rendered after `meta` (icon, actions menu, badge…). */
+    trailing?: ReactNode;
+    /**
+     * If set, the entire row becomes a navigable link via a full-row overlay
+     * (TUI pattern: `<a><span class="absolute inset-x-0 -top-px bottom-0"></span></a>`).
+     * The overlay sits above the title text — other inner anchors stay on top via z-index.
+     */
+    href?: string;
+    /** When `href` is set, also append a chevron-right icon to indicate navigation. */
+    chevron?: boolean;
+};
+declare const StackedList: react.ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLUListElement>, "children"> & {
+    children: ReactNode;
+} & react.RefAttributes<HTMLUListElement>> & {
+    Item: react.ForwardRefExoticComponent<LiHTMLAttributes<HTMLLIElement> & {
+        /** Leading slot — typically an `<img>` (size-12, rounded-full) or `<Avatar>`. */
+        avatar?: ReactNode;
+        /** Primary text. */
+        title: ReactNode;
+        /** Secondary text below the title (truncated by default). */
+        subtitle?: ReactNode;
+        /** Right-aligned meta column, hidden on mobile (mirrors TUI `hidden sm:flex`). */
+        meta?: ReactNode;
+        /** Trailing slot rendered after `meta` (icon, actions menu, badge…). */
+        trailing?: ReactNode;
+        /**
+         * If set, the entire row becomes a navigable link via a full-row overlay
+         * (TUI pattern: `<a><span class="absolute inset-x-0 -top-px bottom-0"></span></a>`).
+         * The overlay sits above the title text — other inner anchors stay on top via z-index.
+         */
+        href?: string;
+        /** When `href` is set, also append a chevron-right icon to indicate navigation. */
+        chevron?: boolean;
+    } & react.RefAttributes<HTMLLIElement>>;
+};
+
+type ContentStackedListProps = Omit<HTMLAttributes<HTMLUListElement>, 'children'> & {
+    children: ReactNode;
+};
+type ContentStackedListItemProps = LiHTMLAttributes<HTMLLIElement> & {
+    /** Primary text (heading-like). Becomes a link if `href` is set. */
+    title: ReactNode;
+    /** Make the title a link. */
+    href?: string;
+    /** Optional inline badge rendered next to the title (pattern 5). */
+    badge?: ReactNode;
+    /** Inline meta items separated by a dot. Pass an array of ReactNodes. */
+    meta?: ReactNode[];
+    /** Right-aligned slot — typically an AvatarGroup (pattern 3) or a button + actions menu (pattern 5). */
+    trailing?: ReactNode;
+};
+declare const ContentStackedList: react.ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLUListElement>, "children"> & {
+    children: ReactNode;
+} & react.RefAttributes<HTMLUListElement>> & {
+    Item: react.ForwardRefExoticComponent<LiHTMLAttributes<HTMLLIElement> & {
+        /** Primary text (heading-like). Becomes a link if `href` is set. */
+        title: ReactNode;
+        /** Make the title a link. */
+        href?: string;
+        /** Optional inline badge rendered next to the title (pattern 5). */
+        badge?: ReactNode;
+        /** Inline meta items separated by a dot. Pass an array of ReactNodes. */
+        meta?: ReactNode[];
+        /** Right-aligned slot — typically an AvatarGroup (pattern 3) or a button + actions menu (pattern 5). */
+        trailing?: ReactNode;
+    } & react.RefAttributes<HTMLLIElement>>;
+};
+
+type StackedListInCardProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    /** Children must be `<StackedList.Item>` elements. */
+    children: ReactNode;
+};
+declare const StackedListInCard: react.ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+    /** Children must be `<StackedList.Item>` elements. */
+    children: ReactNode;
+} & react.RefAttributes<HTMLDivElement>>;
+
+type NarrowStackedListProps = Omit<HTMLAttributes<HTMLUListElement>, 'children'> & {
+    children: ReactNode;
+};
+type NarrowStackedListHeaderProps = Omit<LiHTMLAttributes<HTMLLIElement>, 'children'> & {
+    /** Render with `position: sticky` so the header stays pinned while scrolling. */
+    sticky?: boolean;
+    children: ReactNode;
+};
+type NarrowStackedListItemProps = LiHTMLAttributes<HTMLLIElement> & {
+    /** Leading slot — typically `<img class="size-12 rounded-full" />`. */
+    avatar?: ReactNode;
+    /** Primary text. */
+    title: ReactNode;
+    /** Secondary text below the title (truncated by default). */
+    subtitle?: ReactNode;
+    /** Optional right-of-title timestamp (Pattern 13). When set, an extra layout row is used. */
+    timestamp?: ReactNode;
+    /** Optional second body line (Pattern 13). Auto line-clamped to 2. */
+    description?: ReactNode;
+    /** Optional right-aligned trailing slot — action button, link (Pattern 12). */
+    trailing?: ReactNode;
+};
+declare const NarrowStackedList: react.ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLUListElement>, "children"> & {
+    children: ReactNode;
+} & react.RefAttributes<HTMLUListElement>> & {
+    Header: react.ForwardRefExoticComponent<Omit<LiHTMLAttributes<HTMLLIElement>, "children"> & {
+        /** Render with `position: sticky` so the header stays pinned while scrolling. */
+        sticky?: boolean;
+        children: ReactNode;
+    } & react.RefAttributes<HTMLLIElement>>;
+    Item: react.ForwardRefExoticComponent<LiHTMLAttributes<HTMLLIElement> & {
+        /** Leading slot — typically `<img class="size-12 rounded-full" />`. */
+        avatar?: ReactNode;
+        /** Primary text. */
+        title: ReactNode;
+        /** Secondary text below the title (truncated by default). */
+        subtitle?: ReactNode;
+        /** Optional right-of-title timestamp (Pattern 13). When set, an extra layout row is used. */
+        timestamp?: ReactNode;
+        /** Optional second body line (Pattern 13). Auto line-clamped to 2. */
+        description?: ReactNode;
+        /** Optional right-aligned trailing slot — action button, link (Pattern 12). */
+        trailing?: ReactNode;
+    } & react.RefAttributes<HTMLLIElement>>;
+};
+
+type SimpleRowProps = {
+    /** Label on the left (typically a property name) */
+    label: string;
+    /** Value on the right (typically the property value) */
+    value: ReactNode;
+    /** Render value in monospace font (for IDs, hashes, paths…) */
+    mono?: boolean;
+    className?: string;
+};
+/**
+ * SimpleRow — flat key/value row for metadata or properties.
+ *
+ * Use inside a SectionCard with `divide-y` for visually separated rows:
+ *
+ *   <SectionCard title="Metadata">
+ *     <div className="divide-y divide-[var(--color-border)]">
+ *       <SimpleRow label="ID" value="rack-01-a" mono />
+ *       <SimpleRow label="Status" value={<StatusBadge status="OK" />} />
+ *     </div>
+ *   </SectionCard>
+ */
+declare const SimpleRow: ({ label, value, mono, className }: SimpleRowProps) => react_jsx_runtime.JSX.Element;
+
+type ClickableRowProps = {
+    /** Optional leading icon (lucide-react or any icon component) */
+    icon?: ComponentType<{
+        className?: string;
+    }>;
+    /** Main row title */
+    title: string;
+    /** Optional subtitle below the title */
+    subtitle?: string;
+    /** Click handler — renders a button */
+    onClick?: () => void;
+    /** Or provide an href to render an <a> instead */
+    href?: string;
+    className?: string;
+};
+/**
+ * ClickableRow — full-width navigable row with icon + title + subtitle + chevron.
+ *
+ * Use for navigable lists: racks, servers, exporters, articles…
+ * Pair with `<StatusRow>` when you need a status badge on the right.
+ */
+declare const ClickableRow: ({ icon: Icon, title, subtitle, onClick, href, className, }: ClickableRowProps) => react_jsx_runtime.JSX.Element;
+
+type StatusRowProps = {
+    icon?: ComponentType<{
+        className?: string;
+    }>;
+    title: string;
+    subtitle?: string;
+    status: HealthStatus;
+    onClick?: () => void;
+    href?: string;
+    className?: string;
+};
+/**
+ * StatusRow — same as ClickableRow but ends with a status badge instead of a chevron.
+ */
+declare const StatusRow: ({ icon: Icon, title, subtitle, status, onClick, href, className, }: StatusRowProps) => react_jsx_runtime.JSX.Element;
+
+type ActivityFeedIntent = 'neutral' | 'info' | 'success' | 'warning' | 'danger';
+type ActivityFeedItemProps = LiHTMLAttributes<HTMLLIElement> & {
+    /** Lucide icon rendered inside the circle indicator. */
+    icon: ComponentType<{
+        className?: string;
+        'aria-hidden'?: boolean;
+    }>;
+    /** Color of the circle indicator. Default `neutral`. */
+    intent?: ActivityFeedIntent;
+    /** Right-aligned timestamp (text or `<time>`). */
+    timestamp?: ReactNode;
+    /** Main content (paragraph). */
+    children: ReactNode;
+    /** Internal — set by parent via cloneElement. */
+    /** @internal */ __isLast?: boolean;
+};
+type ActivityFeedProps = Omit<HTMLAttributes<HTMLUListElement>, 'children'> & {
+    children: ReactNode;
+};
+declare const ActivityFeed: react.ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLUListElement>, "children"> & {
+    children: ReactNode;
+} & react.RefAttributes<HTMLUListElement>> & {
+    Item: react.ForwardRefExoticComponent<LiHTMLAttributes<HTMLLIElement> & {
+        /** Lucide icon rendered inside the circle indicator. */
+        icon: ComponentType<{
+            className?: string;
+            "aria-hidden"?: boolean;
+        }>;
+        /** Color of the circle indicator. Default `neutral`. */
+        intent?: ActivityFeedIntent;
+        /** Right-aligned timestamp (text or `<time>`). */
+        timestamp?: ReactNode;
+        /** Main content (paragraph). */
+        children: ReactNode;
+        /** Internal — set by parent via cloneElement. */
+        /** @internal */ __isLast?: boolean;
+    } & react.RefAttributes<HTMLLIElement>>;
+};
+
+type GridListCols = 1 | 2 | 3 | 4;
+type GridListProps = Omit<HTMLAttributes<HTMLUListElement>, 'children'> & {
+    /** Number of columns at the widest viewport. Responsive defaults below. */
+    cols?: GridListCols;
+    /** Gap class (Tailwind). Default `gap-6` (24px). */
+    gapClassName?: string;
+    children: ReactNode;
+};
+type GridListCardProps = HTMLAttributes<HTMLLIElement>;
+type GridListFooterProps = HTMLAttributes<HTMLDivElement>;
+type GridListFooterActionProps = AnchorHTMLAttributes<HTMLAnchorElement> & {
+    /** Index in the footer row — only used to apply `-ml-px` on cells after the first. */
+    index?: number;
+};
+declare const GridList: react.ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLUListElement>, "children"> & {
+    /** Number of columns at the widest viewport. Responsive defaults below. */
+    cols?: GridListCols;
+    /** Gap class (Tailwind). Default `gap-6` (24px). */
+    gapClassName?: string;
+    children: ReactNode;
+} & react.RefAttributes<HTMLUListElement>> & {
+    Card: react.ForwardRefExoticComponent<GridListCardProps & react.RefAttributes<HTMLLIElement>>;
+    Footer: react.ForwardRefExoticComponent<GridListFooterProps & react.RefAttributes<HTMLDivElement>>;
+    FooterAction: react.ForwardRefExoticComponent<AnchorHTMLAttributes<HTMLAnchorElement> & {
+        /** Index in the footer row — only used to apply `-ml-px` on cells after the first. */
+        index?: number;
+    } & react.RefAttributes<HTMLAnchorElement>>;
+};
+
+type BreadcrumbItem = {
+    label: string;
+    /** Optional icon (lucide-react component) */
+    icon?: ComponentType<{
+        className?: string;
+    }>;
+    /** Link target — last item is rendered as plain text (no link) regardless */
+    href?: string;
+    /** Or click handler */
+    onClick?: () => void;
+};
+type BreadcrumbSeparator = 'chevron' | 'slash' | 'dot' | ReactNode;
+type BreadcrumbProps = {
+    items: BreadcrumbItem[];
+    /** Visual separator between items. Default `'chevron'`. Pass any ReactNode for full custom. */
+    separator?: BreadcrumbSeparator;
+    className?: string;
+};
+/**
+ * Breadcrumb — navigable path: Site → Room → Aisle → Rack → Device.
+ *
+ * Each item except the last is clickable. Last item renders as plain text
+ * (the current page). Use icons for the most important items in the path.
+ *
+ * Differs from PageBreadcrumb (templates/) which is the slim variant for
+ * page headers with the Home icon. This Breadcrumb is bigger and supports
+ * an icon per item.
+ */
+declare const Breadcrumb: ({ items, separator, className }: BreadcrumbProps) => react_jsx_runtime.JSX.Element;
+
+type NavbarTheme = 'light' | 'dark';
+type NavbarProps = HTMLAttributes<HTMLElement> & {
+    theme?: NavbarTheme;
+    /** Constrain inner content to a max width container. Default `7xl`. */
+    maxWidth?: 'none' | '7xl';
+    /** Override the inner row height. Default `h-16` (64px). */
+    heightClassName?: string;
+    children: ReactNode;
+};
+type NavbarItemProps = AnchorHTMLAttributes<HTMLAnchorElement> & {
+    active?: boolean;
+    /** Resolve theme from the parent `<Navbar>` data attribute. Defaults to `light`. */
+    theme?: NavbarTheme;
+};
+type NavbarMobileMenuButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+    theme?: NavbarTheme;
+};
+declare const Navbar: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
+    theme?: NavbarTheme;
+    /** Constrain inner content to a max width container. Default `7xl`. */
+    maxWidth?: "none" | "7xl";
+    /** Override the inner row height. Default `h-16` (64px). */
+    heightClassName?: string;
+    children: ReactNode;
+} & react.RefAttributes<HTMLElement>> & {
+    Brand: ({ className, children, ...rest }: HTMLAttributes<HTMLDivElement>) => react_jsx_runtime.JSX.Element;
+    Items: ({ className, children, ...rest }: HTMLAttributes<HTMLDivElement>) => react_jsx_runtime.JSX.Element;
+    Item: ({ active, theme, className, children, ...rest }: NavbarItemProps) => react_jsx_runtime.JSX.Element;
+    Actions: ({ className, children, ...rest }: HTMLAttributes<HTMLDivElement>) => react_jsx_runtime.JSX.Element;
+    MobileMenuButton: ({ theme, className, children, ...rest }: NavbarMobileMenuButtonProps) => react_jsx_runtime.JSX.Element;
+};
+
+type PaginationVariant = 'text' | 'compact';
+type PaginationSize = 'sm' | 'md';
+type PaginationProps = {
+    /** 1-indexed current page. */
+    page: number;
+    totalPages: number;
+    onPageChange: (page: number) => void;
+    /** Render "Showing X to Y of Z". Requires `pageSize` + `total`. */
+    showInfo?: boolean;
+    pageSize?: number;
+    total?: number;
+    /** `text` (default) shows numbered buttons. `compact` shows chevrons + "Page X of Y". */
+    variant?: PaginationVariant;
+    size?: PaginationSize;
+    className?: string;
+};
+declare const Pagination: ({ page, totalPages, onPageChange, showInfo, pageSize, total, variant, size, className, }: PaginationProps) => react_jsx_runtime.JSX.Element;
+
+type StepperOrientation = 'horizontal' | 'vertical';
+type StepperSize = 'sm' | 'md';
+type StepStatus = 'done' | 'active' | 'pending';
+/**
+ * Visual variant. `indicators` (default, existing): numbered circles with a
+ * horizontal connector. `bars` (TUI "Simple"): coloured top bar above each
+ * column with a label/description below — no circle indicator. `panels`
+ * (TUI "Panels"): row of bordered panels separated by `>` chevrons, each
+ * panel hosting a circle indicator + label.
+ *
+ * `bars` and `panels` are horizontal-only. Default falls back to existing
+ * `indicators` rendering for full backward compat.
+ */
+type StepperVariant = 'indicators' | 'bars' | 'panels';
+type StepperStepProps = {
+    /** Step label (the headline). */
+    children: ReactNode;
+    /** Optional secondary text shown under the label. */
+    description?: string;
+    /** Optional icon shown inside the step indicator. Overridden by a Check when status is `done`. */
+    icon?: ComponentType<{
+        className?: string;
+    }>;
+    /** Disable user interaction for this step (only meaningful when the parent is `clickable`). */
+    disabled?: boolean;
+    /** @internal */
+    __index?: number;
+    /** @internal */
+    __status?: StepStatus;
+    /** @internal */
+    __orientation?: StepperOrientation;
+    /** @internal */
+    __size?: StepperSize;
+    /** @internal */
+    __variant?: StepperVariant;
+    /** @internal */
+    __clickable?: boolean;
+    /** @internal */
+    __onClick?: (index: number) => void;
+    /** @internal */
+    __isLast?: boolean;
+};
+type StepperProps = {
+    /** Current step (0-indexed). Steps before are `done`, equal is `active`, after are `pending`. */
+    current: number;
+    orientation?: StepperOrientation;
+    size?: StepperSize;
+    variant?: StepperVariant;
+    /** Make steps clickable for back-navigation. */
+    clickable?: boolean;
+    onStepClick?: (index: number) => void;
+    className?: string;
+    children: ReactNode;
+};
+declare const StepperRoot: ({ current, orientation, size, variant, clickable, onStepClick, className, children, }: StepperProps) => react_jsx_runtime.JSX.Element;
+declare const Stepper: (({ current, orientation, size, variant, clickable, onStepClick, className, children, }: StepperProps) => react_jsx_runtime.JSX.Element) & {
+    Step: ({ children, description, icon: Icon, disabled, __index, __status, __orientation, __size, __variant, __clickable, __onClick, __isLast, }: StepperStepProps) => react_jsx_runtime.JSX.Element;
+};
+
+type VerticalNavigationItemProps = AnchorHTMLAttributes<HTMLAnchorElement> & {
+    /** Leading icon (lucide-react component). */
+    icon?: ComponentType<{
+        className?: string;
+        'aria-hidden'?: boolean;
+    }>;
+    /** Trailing badge content (count, "new", etc.). */
+    badge?: ReactNode;
+    active?: boolean;
+};
+type VerticalNavigationSectionProps = HTMLAttributes<HTMLLIElement> & {
+    /** Section label, rendered as a small uppercase header. */
+    label: ReactNode;
+};
+type VerticalNavigationProps = HTMLAttributes<HTMLElement> & {
+    /** Tighter padding (TUI "On gray" pattern), useful inside a gray-bg surface. */
+    variant?: 'default' | 'on-gray';
+    children: ReactNode;
+};
+declare const VerticalNavigation: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
+    /** Tighter padding (TUI "On gray" pattern), useful inside a gray-bg surface. */
+    variant?: "default" | "on-gray";
+    children: ReactNode;
+} & react.RefAttributes<HTMLElement>> & {
+    Item: react.ForwardRefExoticComponent<AnchorHTMLAttributes<HTMLAnchorElement> & {
+        /** Leading icon (lucide-react component). */
+        icon?: ComponentType<{
+            className?: string;
+            "aria-hidden"?: boolean;
+        }>;
+        /** Trailing badge content (count, "new", etc.). */
+        badge?: ReactNode;
+        active?: boolean;
+    } & react.RefAttributes<HTMLAnchorElement>>;
+    Section: ({ label, children, className, ...rest }: VerticalNavigationSectionProps) => react_jsx_runtime.JSX.Element;
+};
+
+type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger' | 'soft';
+type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+/**
+ * Corner radius shape. Default `rounded` (TUI default `rounded-md`).
+ * Use `pill` for fully-rounded (TUI "Rounded primary/secondary"),
+ * `circle` for icon-only square buttons (TUI "Circular").
+ */
+type ButtonShape = 'rounded' | 'pill' | 'circle';
+type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    shape?: ButtonShape;
+    icon?: ElementType;
+    iconPosition?: 'left' | 'right';
+    loading?: boolean;
+    children?: ReactNode;
+};
+declare const Button: ({ variant, size, shape, icon: Icon, iconPosition, loading, disabled, className, children, type, ...rest }: ButtonProps) => react_jsx_runtime.JSX.Element;
+
+type CardProps = {
+    children: ReactNode;
+    className?: string;
+    padding?: 'none' | 'sm' | 'md' | 'lg';
+    /** Adds hover-lift + cursor-pointer affordance. Pair with `as="a"` or wrap in your router's Link. */
+    interactive?: boolean;
+    /**
+     * When `true`, the card is flush with the viewport edges on mobile
+     * (no rounded corners, no horizontal margins) and switches to rounded
+     * + bordered at the `sm` breakpoint and above. Mirrors the TUI Plus
+     * "Card, edge-to-edge on mobile" pattern.
+     */
+    edgeToEdgeMobile?: boolean;
+};
+type CardImageProps = ImgHTMLAttributes<HTMLImageElement> & {
+    /** Aspect ratio class (Tailwind). Default `aspect-video`. */
+    aspectRatio?: string;
+    /** Wrapper className (the `<img>` is inside). */
+    wrapperClassName?: string;
+};
+declare const Card: (({ children, className, padding, interactive, edgeToEdgeMobile, }: CardProps) => react_jsx_runtime.JSX.Element) & {
+    Header: ({ children, className }: {
+        children: ReactNode;
+        className?: string;
+    }) => react_jsx_runtime.JSX.Element;
+    Body: ({ children, className }: {
+        children: ReactNode;
+        className?: string;
+    }) => react_jsx_runtime.JSX.Element;
+    Footer: ({ children, className }: {
+        children: ReactNode;
+        className?: string;
+    }) => react_jsx_runtime.JSX.Element;
+    Image: ({ aspectRatio, wrapperClassName, className, alt, ...rest }: CardImageProps) => react_jsx_runtime.JSX.Element;
+};
+
+type BadgeVariant = 'neutral' | 'brand' | 'success' | 'warning' | 'danger' | 'info';
+type BadgeSize = 'sm' | 'md';
+type BadgeAppearance = 'light' | 'solid';
+type BadgeProps = {
+    children: ReactNode;
+    variant?: BadgeVariant;
+    size?: BadgeSize;
+    /** Visual style. `light` (default) = soft tinted bg + colored text. `solid` = filled bg + white text. */
+    appearance?: BadgeAppearance;
+    /** Optional Lucide icon. */
+    icon?: ElementType;
+    iconPosition?: 'left' | 'right';
+    className?: string;
+};
+declare const Badge: ({ children, variant, size, appearance, icon: Icon, iconPosition, className, }: BadgeProps) => react_jsx_runtime.JSX.Element;
+
+type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
+type AvatarProps = {
+    src?: string;
+    alt?: string;
+    /** Used to compute initials if `src` not provided or fails to load. */
+    name?: string;
+    size?: AvatarSize;
+    className?: string;
+};
+declare const Avatar: ({ src, alt, name, size, className }: AvatarProps) => react_jsx_runtime.JSX.Element;
+
+type TooltipPosition = 'top' | 'bottom' | 'left' | 'right';
+type TooltipVariant = 'dark' | 'white' | 'brand';
+type TooltipProps = {
+    content: ReactNode;
+    children: ReactNode;
+    position?: TooltipPosition;
+    variant?: TooltipVariant;
+    /** Tailwind max-width class — default `max-w-xs` (320px) */
+    maxWidth?: string;
+};
+declare const Tooltip: ({ content, children, position, variant, maxWidth, }: TooltipProps) => react_jsx_runtime.JSX.Element;
+declare const TooltipHelp: ({ text, position, variant, }: {
+    text: string;
+    position?: TooltipPosition;
+    variant?: TooltipVariant;
+}) => react_jsx_runtime.JSX.Element;
+
+type DropdownOption = {
+    value: string;
+    label: string;
+    icon?: ElementType;
+    disabled?: boolean;
+};
+type DropdownDivider = {
+    divider: true;
+};
+type DropdownItem = DropdownOption | DropdownDivider;
+type DropdownProps = {
+    label?: string;
+    icon?: ElementType;
+    options: DropdownItem[];
+    value?: string;
+    onChange?: (value: string) => void;
+    placeholder?: string;
+    align?: 'left' | 'right';
+    disabled?: boolean;
+    className?: string;
+};
+declare const Dropdown: ({ label, icon: TriggerIcon, options, value, onChange, placeholder, align, disabled, className, }: DropdownProps) => react_jsx_runtime.JSX.Element;
+
+type ModalSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
+type ModalProps = {
+    open: boolean;
+    onClose: () => void;
+    size?: ModalSize;
+    className?: string;
+    children: ReactNode;
+};
+type ModalHeaderProps = {
+    title?: ReactNode;
+    description?: ReactNode;
+    onClose?: () => void;
+    className?: string;
+    children?: ReactNode;
+};
+type ModalAlertIntent = 'info' | 'warning' | 'danger' | 'success';
+type ModalAlertLayout = 'centered' | 'horizontal';
+type ModalAlertProps = {
+    open: boolean;
+    onClose: () => void;
+    intent?: ModalAlertIntent;
+    title: string;
+    message?: ReactNode;
+    /** Primary action label. Default `OK`. */
+    confirmLabel?: string;
+    /** Cancel action label. When omitted, no cancel button is rendered. */
+    cancelLabel?: string;
+    /** Called when the primary action is clicked. Defaults to `onClose`. */
+    onConfirm?: () => void;
+    /** Called when Cancel is clicked. Defaults to `onClose`. */
+    onCancel?: () => void;
+    /** When true, the primary button shows a spinner and both buttons are disabled. */
+    loading?: boolean;
+    /**
+     * Visual layout. `centered` (default): icon + title + buttons stacked
+     * vertically and centered (TUI "Centered with single action").
+     * `horizontal`: icon to the left of the title/message, with buttons in
+     * a separate gray footer right-aligned (TUI "Simple with gray footer").
+     */
+    layout?: ModalAlertLayout;
+    /**
+     * In `centered` layout, render the primary action as a single
+     * full-width button (TUI "Centered with single action" pattern).
+     * Has no effect in `horizontal` layout.
+     */
+    fullWidthAction?: boolean;
+};
+declare const Modal: (({ open, onClose, size, className, children }: ModalProps) => react.ReactPortal | null) & {
+    Header: ({ title, description, onClose, className, children }: ModalHeaderProps) => react_jsx_runtime.JSX.Element;
+    Body: ({ children, className }: {
+        children: ReactNode;
+        className?: string;
+    }) => react_jsx_runtime.JSX.Element;
+    Footer: ({ children, className }: {
+        children: ReactNode;
+        className?: string;
+    }) => react_jsx_runtime.JSX.Element;
+    Alert: ({ open, onClose, intent, title, message, confirmLabel, cancelLabel, onConfirm, onCancel, loading, layout, fullWidthAction, }: ModalAlertProps) => react_jsx_runtime.JSX.Element;
+};
+
+type DrawerSide = 'left' | 'right';
+type DrawerSize = 'sm' | 'md' | 'lg';
+type DrawerProps = {
+    open: boolean;
+    onClose: () => void;
+    side?: DrawerSide;
+    size?: DrawerSize;
+    /**
+     * Render a translucent overlay behind the panel that closes on click.
+     * Default `true`. Set `false` for the TUI "Empty" slide-over pattern
+     * where the page stays interactive behind the panel.
+     */
+    withBackdrop?: boolean;
+    /**
+     * Render the close button on the backdrop (outside the panel), opposite
+     * the chosen `side`. Mirrors the TUI "With close button on outside"
+     * pattern. When `true`, no close button is rendered inside `Drawer.Header`
+     * — handle the X via this overlay button instead.
+     * Has no effect when `withBackdrop` is `false`.
+     */
+    closeOutside?: boolean;
+    className?: string;
+    children: ReactNode;
+};
+type DrawerHeaderProps = {
+    title: ReactNode;
+    icon?: ElementType;
+    description?: ReactNode;
+    onClose?: () => void;
+    className?: string;
+    children?: ReactNode;
+};
+declare const Drawer: (({ open, onClose, side, size, withBackdrop, closeOutside, className, children, }: DrawerProps) => react.ReactPortal) & {
+    Header: ({ title, icon: Icon, description, onClose, className, children, }: DrawerHeaderProps) => react_jsx_runtime.JSX.Element;
+    Body: ({ children, className }: {
+        children: ReactNode;
+        className?: string;
+    }) => react_jsx_runtime.JSX.Element;
+    Footer: ({ children, className }: {
+        children: ReactNode;
+        className?: string;
+    }) => react_jsx_runtime.JSX.Element;
+};
+
+type TabsOrientation = 'horizontal' | 'vertical';
+type TabsProps = {
+    value: string;
+    onChange: (value: string) => void;
+    /** Layout direction. `horizontal` (default) puts the tab list on top; `vertical` puts it on the left. */
+    orientation?: TabsOrientation;
+    children: ReactNode;
+    className?: string;
+};
+type TabProps = {
+    value: string;
+    children: ReactNode;
+    icon?: ElementType;
+    badge?: ReactNode;
+    disabled?: boolean;
+    className?: string;
+};
+declare const Tabs: (({ value, onChange, orientation, children, className }: TabsProps) => react_jsx_runtime.JSX.Element) & {
+    List: ({ children, className }: {
+        children: ReactNode;
+        className?: string;
+    }) => react_jsx_runtime.JSX.Element;
+    Trigger: ({ value, children, icon: Icon, badge, disabled, className }: TabProps) => react_jsx_runtime.JSX.Element;
+    Panel: ({ value, children, className, }: {
+        value: string;
+        children: ReactNode;
+        className?: string;
+    }) => react_jsx_runtime.JSX.Element | null;
+};
+
+type CodeBlockProps = {
+    code: string;
+    language?: string;
+    /** Show the copy button (top-right, hover-revealed). Default `true`. */
+    showCopy?: boolean;
+    className?: string;
+};
+declare const CodeBlock: ({ code, language, showCopy, className }: CodeBlockProps) => react_jsx_runtime.JSX.Element;
+
+type PageActionVariant = 'outline' | 'primary' | 'brand-outline' | 'danger-outline';
+type PageActionButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+    icon?: ElementType;
+    variant?: PageActionVariant;
+    children?: ReactNode;
+};
+declare const PageActionButton: ({ icon: Icon, variant, className, children, type, ...rest }: PageActionButtonProps) => react_jsx_runtime.JSX.Element;
+type PageActionIconButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> & {
+    icon: ElementType;
+    variant?: PageActionVariant;
+};
+declare const PageActionIconButton: ({ icon: Icon, variant, className, type, ...rest }: PageActionIconButtonProps) => react_jsx_runtime.JSX.Element;
+
+type RefreshOption = {
+    label: string;
+    ms: number;
+};
+declare const REFRESH_OPTIONS: RefreshOption[];
+/**
+ * Hook that manages auto-refresh state for a page key, persisted to localStorage.
+ * Pass a stable `pageKey` (e.g. "room", "rack", "alerts").
+ */
+declare const useAutoRefresh: (pageKey: string, onRefresh: () => void | Promise<void>) => {
+    autoRefreshMs: number;
+    onIntervalChange: (ms: number) => void;
+};
+type RefreshButtonProps = {
+    refreshing?: boolean;
+    autoRefreshMs: number;
+    onRefresh: () => void | Promise<void>;
+    onIntervalChange: (ms: number) => void;
+    options?: RefreshOption[];
+    className?: string;
+};
+declare const RefreshButton: ({ refreshing, autoRefreshMs, onRefresh, onIntervalChange, options, className, }: RefreshButtonProps) => react_jsx_runtime.JSX.Element;
+
+type RowActionButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+    children?: ReactNode;
+    hideChevron?: boolean;
+};
+/**
+ * RowActionButton — compact action button for the right edge of table rows
+ * or list items. Defaults to a chevron-right indicator suggesting navigation.
+ */
+declare const RowActionButton: ({ children, hideChevron, className, type, ...rest }: RowActionButtonProps) => react_jsx_runtime.JSX.Element;
+
+type SpinnerSize = 'sm' | 'md' | 'lg' | 'xl';
+type SpinnerProps = {
+    size?: SpinnerSize;
+    className?: string;
+};
+declare const Spinner: ({ size, className }: SpinnerProps) => react_jsx_runtime.JSX.Element;
+
+type SectionLabelProps = {
+    children: ReactNode;
+    className?: string;
+};
+/**
+ * SectionLabel — small upper-cased label used as a quiet section divider
+ * inside drawers, settings panels, and form groups.
+ */
+declare const SectionLabel: ({ children, className }: SectionLabelProps) => react_jsx_runtime.JSX.Element;
+
+type IconBoxSize = 'sm' | 'md' | 'lg';
+type IconBoxProps = {
+    icon: ElementType;
+    size?: IconBoxSize;
+    /** Tailwind background classes — default neutral gray. */
+    bg?: string;
+    /** Tailwind text color classes — default neutral gray. */
+    color?: string;
+    className?: string;
+};
+/**
+ * IconBox — icon wrapped in a rounded square with configurable color theme.
+ * Useful for resource avatars in lists and cards.
+ */
+declare const IconBox: ({ icon: Icon, size, bg, color, className, }: IconBoxProps) => react_jsx_runtime.JSX.Element;
+
+type AlertVariant = 'success' | 'error' | 'warning' | 'info';
+type AlertBannerProps = {
+    variant?: AlertVariant;
+    children: ReactNode;
+    className?: string;
+};
+declare const AlertBanner: ({ variant, children, className }: AlertBannerProps) => react_jsx_runtime.JSX.Element;
+
+type SelectInputOption = {
+    label: string;
+    value: string;
+};
+type SelectInputProps = {
+    value: string;
+    onChange: (value: string) => void;
+    options: SelectInputOption[];
+    placeholder?: string;
+    disabled?: boolean;
+    className?: string;
+};
+/**
+ * SelectInput — styled native select wrapper. Different from `Select` (which
+ * adds label/description/error chrome) and from `Dropdown` (which is a
+ * non-native menu). Use this when you want a pure value-changing native select
+ * with the Cosmos look.
+ */
+declare const SelectInput: ({ value, onChange, options, placeholder, disabled, className, }: SelectInputProps) => react_jsx_runtime.JSX.Element;
+
+type BackdropProps = {
+    onClick?: () => void;
+    zIndex?: number;
+    blur?: boolean;
+    className?: string;
+};
+/**
+ * Backdrop — primitive overlay layer (fixed inset-0 with semi-opaque black).
+ * Reusable building block for Modal, Drawer, Lightbox, command palette, etc.
+ */
+declare const Backdrop: ({ onClick, zIndex, blur, className }: BackdropProps) => react_jsx_runtime.JSX.Element;
+
+type SaveState = 'idle' | 'dirty' | 'saving' | 'saved' | 'error';
+type StatefulSaveButtonProps = {
+    state: SaveState;
+    onClick: () => void;
+    /** Override label for `idle` / `dirty` states. */
+    label?: string;
+    /** Override label for `saved` state. */
+    savedLabel?: string;
+    className?: string;
+};
+/**
+ * StatefulSaveButton — save button with 5 visual states cycling
+ * idle → dirty → saving → saved → idle (or error on failure).
+ */
+declare const StatefulSaveButton: ({ state, onClick, label, savedLabel, className, }: StatefulSaveButtonProps) => react_jsx_runtime.JSX.Element;
+
+type UnsavedIndicatorProps = {
+    visible: boolean;
+    label?: string;
+    className?: string;
+};
+/**
+ * UnsavedIndicator — small amber label shown when a form has unsaved changes.
+ * Pair with StatefulSaveButton in a header or toolbar.
+ */
+declare const UnsavedIndicator: ({ visible, label, className, }: UnsavedIndicatorProps) => react_jsx_runtime.JSX.Element | null;
+
+type ConfirmationModalProps = {
+    open: boolean;
+    title?: string;
+    message?: string;
+    onStay: () => void;
+    onDiscard?: () => void;
+    onSave?: () => void;
+    saving?: boolean;
+    stayLabel?: string;
+    discardLabel?: string;
+    saveLabel?: string;
+    /** Hide the Save button — for simple confirm/cancel flows. */
+    hideSave?: boolean;
+};
+/**
+ * ConfirmationModal — focused dialog for unsaved-changes guards or
+ * destructive-action confirmation. Three actions: Stay (cancel) /
+ * Discard (negative) / Save (primary). Set `hideSave` for binary confirm.
+ *
+ * Renders via `createPortal` into `document.body` so the dialog escapes
+ * any clipping container (cards, sidebars, overflow:hidden ancestors).
+ * Clicking the backdrop or pressing `Escape` calls `onStay`.
+ */
+declare const ConfirmationModal: ({ open, title, message, onStay, onDiscard, onSave, saving, stayLabel, discardLabel, saveLabel, hideSave, }: ConfirmationModalProps) => react.ReactPortal | null;
+
+type NotificationSeverity = 'crit' | 'warn' | 'info' | 'success';
+type NotificationsPanelProps = {
+    /** Controlled open state. If omitted, the panel manages its own state. */
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Which side of the trigger the panel anchors to. Default `right`. */
+    align?: 'left' | 'right';
+    children: ReactNode;
+};
+type NotificationsPanelTriggerProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'children'> & {
+    /** Number to show in the badge. 0 hides the badge. Values > 9999 render as "9999+". */
+    count?: number;
+    /** When true, shows the BellOff icon and dims the badge ping animation. */
+    muted?: boolean;
+    /** When true, shows the ping animation around the badge. Default: count > 0 && !muted. */
+    ping?: boolean;
+};
+type NotificationsPanelContentProps = {
+    /** Tailwind width class. Default `w-96` (384px). */
+    width?: string;
+    className?: string;
+    children: ReactNode;
+};
+type NotificationsPanelHeaderProps = {
+    title: string;
+    /** Right-side slot — pills, action buttons, etc. */
+    children?: ReactNode;
+    className?: string;
+};
+type NotificationsPanelCountersProps = {
+    crit?: number;
+    warn?: number;
+    info?: number;
+};
+type NotificationsPanelHeaderActionProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+    icon: ComponentType<{
+        className?: string;
+    }>;
+    active?: boolean;
+};
+type NotificationsPanelListProps = {
+    /** Optional max height. Default `max-h-96`. */
+    maxHeight?: string;
+    className?: string;
+    children: ReactNode;
+};
+type NotificationsPanelItemProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+    severity: NotificationSeverity;
+    title: string;
+    subtitle?: string;
+    /** Small mono caption shown below the subtitle (e.g. check id, error code). */
+    caption?: string;
+    /** Right-side badge label. If omitted, derived from severity (CRIT/WARN/INFO/OK). */
+    badgeLabel?: string;
+    /** When true, the panel auto-closes after the item is clicked. Default true. */
+    closeOnClick?: boolean;
+};
+type NotificationsPanelEmptyProps = {
+    title?: string;
+    subtitle?: string;
+    icon?: ComponentType<{
+        className?: string;
+    }>;
+};
+type NotificationsPanelFooterProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+    children: ReactNode;
+    /** When true, the panel auto-closes after the footer is clicked. Default true. */
+    closeOnClick?: boolean;
+};
+declare const NotificationsPanel: (({ open: openProp, defaultOpen, onOpenChange, align, children, }: NotificationsPanelProps) => react_jsx_runtime.JSX.Element) & {
+    Trigger: react.ForwardRefExoticComponent<Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children" | "onClick"> & {
+        /** Number to show in the badge. 0 hides the badge. Values > 9999 render as "9999+". */
+        count?: number;
+        /** When true, shows the BellOff icon and dims the badge ping animation. */
+        muted?: boolean;
+        /** When true, shows the ping animation around the badge. Default: count > 0 && !muted. */
+        ping?: boolean;
+    } & react.RefAttributes<HTMLButtonElement>>;
+    Content: ({ width, className, children, }: NotificationsPanelContentProps) => react.ReactPortal | null;
+    Header: ({ title, children, className, }: NotificationsPanelHeaderProps) => react_jsx_runtime.JSX.Element;
+    Counters: ({ crit, warn, info }: NotificationsPanelCountersProps) => react_jsx_runtime.JSX.Element;
+    HeaderAction: react.ForwardRefExoticComponent<ButtonHTMLAttributes<HTMLButtonElement> & {
+        icon: ComponentType<{
+            className?: string;
+        }>;
+        active?: boolean;
+    } & react.RefAttributes<HTMLButtonElement>>;
+    List: ({ maxHeight, className, children, }: NotificationsPanelListProps) => react_jsx_runtime.JSX.Element;
+    Item: react.ForwardRefExoticComponent<ButtonHTMLAttributes<HTMLButtonElement> & {
+        severity: NotificationSeverity;
+        title: string;
+        subtitle?: string;
+        /** Small mono caption shown below the subtitle (e.g. check id, error code). */
+        caption?: string;
+        /** Right-side badge label. If omitted, derived from severity (CRIT/WARN/INFO/OK). */
+        badgeLabel?: string;
+        /** When true, the panel auto-closes after the item is clicked. Default true. */
+        closeOnClick?: boolean;
+    } & react.RefAttributes<HTMLButtonElement>>;
+    Empty: ({ title, subtitle, icon: Icon, }: NotificationsPanelEmptyProps) => react_jsx_runtime.JSX.Element;
+    Footer: ({ children, closeOnClick, onClick, className, ...rest }: NotificationsPanelFooterProps) => react_jsx_runtime.JSX.Element;
+};
+
+type NotificationIntent = 'success' | 'info' | 'error';
+type NotificationCardSimpleProps = {
+    /** Primary text (TUI: text-sm font-medium text-gray-900). */
+    title: ReactNode;
+    /** Secondary text under the title. */
+    description?: ReactNode;
+    /** Visual intent for the leading icon. Default `success`. */
+    intent?: NotificationIntent;
+    /** Override the icon entirely (replaces the intent-derived one). */
+    icon?: LucideIcon;
+    /** When provided, renders an X button that calls this on click. */
+    onDismiss?: () => void;
+    className?: string;
+};
+type NotificationCardCondensedProps = {
+    /** Primary text shown on the left. */
+    title: ReactNode;
+    /** Inline action label (e.g., "Undo") — rendered as a link-styled button. */
+    actionLabel?: ReactNode;
+    /** Called when the action is clicked. Required when `actionLabel` is set. */
+    onAction?: () => void;
+    /** When provided, renders a trailing X button. */
+    onDismiss?: () => void;
+    className?: string;
+};
+declare const NotificationCard: (({ title, description, intent, icon, onDismiss, className, }: NotificationCardSimpleProps) => react_jsx_runtime.JSX.Element) & {
+    Simple: ({ title, description, intent, icon, onDismiss, className, }: NotificationCardSimpleProps) => react_jsx_runtime.JSX.Element;
+    Condensed: ({ title, actionLabel, onAction, onDismiss, className, }: NotificationCardCondensedProps) => react_jsx_runtime.JSX.Element;
+};
+
+type UserMenuProps = {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Side of the trigger the menu anchors to. Default `right`. */
+    align?: 'left' | 'right';
+    children: ReactNode;
+};
+type UserMenuTriggerProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'children'> & {
+    /** Display name shown next to the avatar. Also used for initials fallback. */
+    name: string;
+    /** Avatar image URL. Falls back to initials of `name`. */
+    avatarSrc?: string;
+    /** Hide the textual name (icon-only trigger). Useful on small viewports. */
+    hideName?: boolean;
+};
+type UserMenuContentProps = {
+    /** Tailwind width class. Default `w-56` (224px). */
+    width?: string;
+    className?: string;
+    children: ReactNode;
+};
+type UserMenuHeaderProps = {
+    name: string;
+    email?: string;
+    avatarSrc?: string;
+    className?: string;
+};
+type UserMenuItemVariant = 'default' | 'danger';
+type UserMenuItemProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+    icon?: ComponentType<{
+        className?: string;
+    }>;
+    variant?: UserMenuItemVariant;
+    /** Auto-close the menu after click. Default true. */
+    closeOnClick?: boolean;
+};
+declare const UserMenu: (({ open: openProp, defaultOpen, onOpenChange, align, children, }: UserMenuProps) => react_jsx_runtime.JSX.Element) & {
+    Trigger: react.ForwardRefExoticComponent<Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children" | "onClick"> & {
+        /** Display name shown next to the avatar. Also used for initials fallback. */
+        name: string;
+        /** Avatar image URL. Falls back to initials of `name`. */
+        avatarSrc?: string;
+        /** Hide the textual name (icon-only trigger). Useful on small viewports. */
+        hideName?: boolean;
+    } & react.RefAttributes<HTMLButtonElement>>;
+    Content: ({ width, className, children }: UserMenuContentProps) => react.ReactPortal | null;
+    Header: ({ name, email, avatarSrc, className }: UserMenuHeaderProps) => react_jsx_runtime.JSX.Element;
+    Items: ({ children }: {
+        children: ReactNode;
+    }) => react_jsx_runtime.JSX.Element;
+    Item: react.ForwardRefExoticComponent<ButtonHTMLAttributes<HTMLButtonElement> & {
+        icon?: ComponentType<{
+            className?: string;
+        }>;
+        variant?: UserMenuItemVariant;
+        /** Auto-close the menu after click. Default true. */
+        closeOnClick?: boolean;
+    } & react.RefAttributes<HTMLButtonElement>>;
+    Separator: () => react_jsx_runtime.JSX.Element;
+};
+
+type ThemeToggleSize = 'sm' | 'md';
+type ThemeToggleProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'> & {
+    /** Current theme state. `true` = dark mode active (Sun shown to switch back to light). */
+    isDark: boolean;
+    /** Called when the user toggles the theme. */
+    onToggle: () => void;
+    /** Visual size. `md` (default) = 40px, `sm` = 32px. */
+    size?: ThemeToggleSize;
+    /** Override the button title (also used as aria-label). */
+    lightLabel?: string;
+    darkLabel?: string;
+};
+declare const ThemeToggle: react.ForwardRefExoticComponent<Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onClick"> & {
+    /** Current theme state. `true` = dark mode active (Sun shown to switch back to light). */
+    isDark: boolean;
+    /** Called when the user toggles the theme. */
+    onToggle: () => void;
+    /** Visual size. `md` (default) = 40px, `sm` = 32px. */
+    size?: ThemeToggleSize;
+    /** Override the button title (also used as aria-label). */
+    lightLabel?: string;
+    darkLabel?: string;
+} & react.RefAttributes<HTMLButtonElement>>;
+
+type ThemeToggleTriSize = 'sm' | 'md';
+type ThemeMode = 'light' | 'dark' | 'oled';
+type ThemeToggleTriProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'onChange'> & {
+    /** Current theme. */
+    theme: ThemeMode;
+    /** Called with the next theme in the cycle (light → dark → oled → light). */
+    onChange: (next: ThemeMode) => void;
+    /** Visual size. `md` (default) = 40px, `sm` = 32px. */
+    size?: ThemeToggleTriSize;
+    /** Label used when the next click will switch to light mode. */
+    lightLabel?: string;
+    /** Label used when the next click will switch to dark mode. */
+    darkLabel?: string;
+    /** Label used when the next click will switch to OLED mode. */
+    oledLabel?: string;
+};
+declare const ThemeToggleTri: react.ForwardRefExoticComponent<Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onChange" | "onClick"> & {
+    /** Current theme. */
+    theme: ThemeMode;
+    /** Called with the next theme in the cycle (light → dark → oled → light). */
+    onChange: (next: ThemeMode) => void;
+    /** Visual size. `md` (default) = 40px, `sm` = 32px. */
+    size?: ThemeToggleTriSize;
+    /** Label used when the next click will switch to light mode. */
+    lightLabel?: string;
+    /** Label used when the next click will switch to dark mode. */
+    darkLabel?: string;
+    /** Label used when the next click will switch to OLED mode. */
+    oledLabel?: string;
+} & react.RefAttributes<HTMLButtonElement>>;
+
+type ButtonGroupOrientation = 'horizontal' | 'vertical';
+type ButtonGroupProps = {
+    /** Stacking direction. Default `horizontal`. */
+    orientation?: ButtonGroupOrientation;
+    /** Render as attached (shared border, rounded only on outer edges). Default `true`. */
+    attached?: boolean;
+    /** Gap between buttons when `attached={false}`. Tailwind size token. Default `gap-2`. */
+    gap?: string;
+    className?: string;
+    children: ReactNode;
+};
+/**
+ * ButtonGroup — wraps `<Button>` (or any button-like) children to render
+ * them as a connected segment row/column. The wrapper applies CSS
+ * selectors so the inner buttons keep their own variant/size/icon props.
+ *
+ * Patterns: period selectors (Day/Week/Month), toolbars, paginators,
+ * grouped actions (Save/Delete).
+ */
+declare const ButtonGroup: ({ orientation, attached, gap, className, children, }: ButtonGroupProps) => react_jsx_runtime.JSX.Element;
+
+type CarouselOptions = Parameters<typeof useEmblaCarousel>[0];
+type CarouselProps = {
+    /** Embla options forwarded to the hook (loop, align, slidesToScroll, …). */
+    options?: CarouselOptions;
+    /** Auto-advance. Pass `true` for default 4 s, or a number (ms). */
+    autoplay?: boolean | number;
+    /** Pause autoplay on user interaction. Default `true`. */
+    stopOnInteraction?: boolean;
+    className?: string;
+    children: ReactNode;
+};
+declare const CarouselRoot: ({ options, autoplay, stopOnInteraction, className, children, }: CarouselProps) => react_jsx_runtime.JSX.Element;
+type CarouselViewportProps = {
+    children: ReactNode;
+    className?: string;
+};
+type CarouselSlideProps = {
+    /** Slide width as a Tailwind class. Default `basis-full` (one per view). */
+    basis?: string;
+    className?: string;
+    children: ReactNode;
+};
+type CarouselControlsProps = {
+    /** Place buttons. `inside` overlays them on the viewport edges; `outside` puts them above the indicators. Default `inside`. */
+    position?: 'inside' | 'outside';
+    className?: string;
+    prevLabel?: string;
+    nextLabel?: string;
+};
+type CarouselIndicatorsProps = {
+    className?: string;
+};
+declare const Carousel: (({ options, autoplay, stopOnInteraction, className, children, }: CarouselProps) => react_jsx_runtime.JSX.Element) & {
+    Viewport: ({ children, className }: CarouselViewportProps) => react_jsx_runtime.JSX.Element;
+    Slide: ({ basis, className, children }: CarouselSlideProps) => react_jsx_runtime.JSX.Element;
+    Controls: ({ position, className, prevLabel, nextLabel, }: CarouselControlsProps) => react_jsx_runtime.JSX.Element;
+    Indicators: ({ className }: CarouselIndicatorsProps) => react_jsx_runtime.JSX.Element;
+};
+
+type PopoverPosition = 'top' | 'bottom' | 'left' | 'right';
+type PopoverProps = {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    children: ReactNode;
+};
+type PopoverTriggerProps = ButtonHTMLAttributes<HTMLButtonElement>;
+type PopoverContentProps = {
+    position?: PopoverPosition;
+    /** Distance from the trigger edge in px. Default 8. */
+    offset?: number;
+    /** Show a small arrow pointing to the trigger. Default false. */
+    arrow?: boolean;
+    /** Tailwind width class. Default `w-64`. */
+    width?: string;
+    className?: string;
+    children: ReactNode;
+};
+declare const Popover: (({ open: openProp, defaultOpen, onOpenChange, children, }: PopoverProps) => react_jsx_runtime.JSX.Element) & {
+    Trigger: react.ForwardRefExoticComponent<PopoverTriggerProps & react.RefAttributes<HTMLButtonElement>>;
+    Content: ({ position, offset, arrow, width, className, children, }: PopoverContentProps) => react.ReactPortal | null;
+};
+
+type ProgressBarSize = 'xs' | 'sm' | 'md' | 'lg';
+type ProgressBarIntent = 'brand' | 'success' | 'warning' | 'danger';
+type ProgressBarLabel = 'none' | 'inside' | 'outside';
+type ProgressBarProps = {
+    value?: number;
+    max?: number;
+    size?: ProgressBarSize;
+    intent?: ProgressBarIntent;
+    /** Where to render the % label. `inside` requires `lg` size. Default `none`. */
+    label?: ProgressBarLabel;
+    /** Replace the auto-computed % with custom content. */
+    labelContent?: ReactNode;
+    /** Animated diagonal stripes pattern over the filled bar. */
+    striped?: boolean;
+    /** Loop a small bar across the container when total progress is unknown. */
+    indeterminate?: boolean;
+    className?: string;
+};
+declare const ProgressBar: ({ value, max, size, intent, label, labelContent, striped, indeterminate, className, }: ProgressBarProps) => react_jsx_runtime.JSX.Element;
+
+type RibbonPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+type RibbonIntent = 'brand' | 'success' | 'warning' | 'danger' | 'neutral';
+type RibbonShape = 'flat' | 'angled';
+type RibbonProps = {
+    /** Corner of the parent to anchor to. Parent must be `position: relative` (and `overflow-hidden` for `angled`). */
+    position?: RibbonPosition;
+    intent?: RibbonIntent;
+    /** `flat` = rectangle hugging the corner. `angled` = 45° diagonal banner across the corner. */
+    shape?: RibbonShape;
+    children: ReactNode;
+    className?: string;
+};
+declare const Ribbon: ({ position, intent, shape, children, className, }: RibbonProps) => react_jsx_runtime.JSX.Element;
+
+type LinkVariant = 'colored' | 'underline' | 'opacity' | 'opacity-hover' | 'subtle';
+type LinkProps = AnchorHTMLAttributes<HTMLAnchorElement> & {
+    variant?: LinkVariant;
+    /** When true, opens in a new tab with safe rel attrs and renders an external icon. */
+    external?: boolean;
+    /** Hide the auto-added external icon when `external` is true. */
+    hideExternalIcon?: boolean;
+    children?: ReactNode;
+};
+declare const Link: react.ForwardRefExoticComponent<AnchorHTMLAttributes<HTMLAnchorElement> & {
+    variant?: LinkVariant;
+    /** When true, opens in a new tab with safe rel attrs and renders an external icon. */
+    external?: boolean;
+    /** Hide the auto-added external icon when `external` is true. */
+    hideExternalIcon?: boolean;
+    children?: ReactNode;
+} & react.RefAttributes<HTMLAnchorElement>>;
+
+type ListVariant = 'unordered' | 'ordered' | 'plain';
+type ListMarker = 'disc' | 'check' | 'arrow' | 'dot' | 'none';
+type ListSpacing = 'tight' | 'normal' | 'loose';
+type ListOrientation = 'vertical' | 'horizontal';
+type ListProps = {
+    variant?: ListVariant;
+    /** Marker style (only applies when `variant="unordered"`). Default `disc`. */
+    marker?: ListMarker;
+    spacing?: ListSpacing;
+    orientation?: ListOrientation;
+    className?: string;
+    children: ReactNode;
+};
+type ListItemProps = {
+    /** Override the parent marker for this single item. */
+    icon?: ComponentType<{
+        className?: string;
+    }>;
+    /** Override the icon color (Tailwind class). Default depends on the marker. */
+    iconColor?: string;
+    className?: string;
+    children: ReactNode;
+};
+declare const List: (({ variant, marker, spacing, orientation, className, children, }: ListProps) => react_jsx_runtime.JSX.Element) & {
+    Item: ({ icon, iconColor, className, children }: ListItemProps) => react_jsx_runtime.JSX.Element;
+};
+
+type AccordionProps = ComponentPropsWithoutRef<typeof RadixAccordion.Root> & {
+    /** Visual variant. `bordered` (default) wraps each item in a border; `seamless` strips borders for a tighter look. */
+    appearance?: 'bordered' | 'seamless';
+};
+type AccordionItemProps = ComponentPropsWithoutRef<typeof RadixAccordion.Item>;
+type AccordionTriggerProps = ComponentPropsWithoutRef<typeof RadixAccordion.Trigger> & {
+    children: ReactNode;
+    /** Hide the chevron indicator. Default `false`. */
+    hideChevron?: boolean;
+};
+type AccordionContentProps = ComponentPropsWithoutRef<typeof RadixAccordion.Content>;
+declare const Accordion: react.ForwardRefExoticComponent<AccordionProps & react.RefAttributes<HTMLDivElement>> & {
+    Item: react.ForwardRefExoticComponent<Omit<RadixAccordion.AccordionItemProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+    Trigger: react.ForwardRefExoticComponent<Omit<RadixAccordion.AccordionTriggerProps & react.RefAttributes<HTMLButtonElement>, "ref"> & {
+        children: ReactNode;
+        /** Hide the chevron indicator. Default `false`. */
+        hideChevron?: boolean;
+    } & react.RefAttributes<HTMLButtonElement>>;
+    Content: react.ForwardRefExoticComponent<Omit<RadixAccordion.AccordionContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+};
+
+type ImageGridGap = 'sm' | 'md' | 'lg';
+type ImageGridColumns = 1 | 2 | 3 | 4 | {
+    sm?: 1 | 2 | 3 | 4;
+    md?: 1 | 2 | 3 | 4;
+    lg?: 1 | 2 | 3 | 4;
+};
+type ImageGridProps = {
+    /** Number of columns (static) or per-breakpoint object. Default 3. */
+    columns?: ImageGridColumns;
+    gap?: ImageGridGap;
+    /** Tailwind aspect-* class applied to each cell. Default `aspect-square`. */
+    aspectRatio?: string;
+    /** Round each cell. Default `true`. */
+    rounded?: boolean;
+    className?: string;
+    children: ReactNode;
+};
+declare const ImageGrid: ({ columns, gap, aspectRatio, rounded, className, children, }: ImageGridProps) => react_jsx_runtime.JSX.Element;
+
+type VideoEmbedAspect = '16:9' | '4:3' | '1:1' | '21:9' | (string & {});
+type VideoEmbedProps = {
+    src: string;
+    /** Required for a11y — title of the embedded video. */
+    title: string;
+    /** Aspect ratio. Either a preset (`16:9`, `4:3`, `1:1`, `21:9`) or any Tailwind aspect-* class. */
+    aspectRatio?: VideoEmbedAspect;
+    /** Render with rounded corners. Default `true`. */
+    rounded?: boolean;
+    /** Embed type. `iframe` (default — YouTube, Vimeo, …) or `video` (native HTML5 file). */
+    type?: 'iframe' | 'video';
+    /** Pass-through to the underlying element (iframe `allow`, video `muted`/`autoPlay`/`loop`/`controls`/`poster`). */
+    allow?: string;
+    muted?: boolean;
+    autoPlay?: boolean;
+    loop?: boolean;
+    controls?: boolean;
+    poster?: string;
+    className?: string;
+};
+declare const VideoEmbed: ({ src, title, aspectRatio, rounded, type, allow, muted, autoPlay, loop, controls, poster, className, }: VideoEmbedProps) => react_jsx_runtime.JSX.Element;
+
+/**
+ * Cosmos toast — thin wrapper around sonner.
+ *
+ * Mount the `<Toaster />` once at the app root. Trigger toasts from anywhere
+ * with `toast(...)`, `toast.success(...)`, `toast.error(...)`, `toast.promise(...)`.
+ *
+ * Cosmos defaults: bottom-right, system theme, rich-colors on, close button on.
+ * Override per-instance by passing props.
+ */
+type CosmosToasterProps = ToasterProps;
+declare const Toaster: (props: CosmosToasterProps) => react_jsx_runtime.JSX.Element;
+
+type AnnouncementBarIntent = 'info' | 'success' | 'warning' | 'danger' | 'brand';
+type AnnouncementBarProps = {
+    intent?: AnnouncementBarIntent;
+    /** Override the default icon for the intent. Pass `null` to hide. */
+    icon?: ElementType | null;
+    message: ReactNode;
+    /** Right-side slot — a Link, Button, etc. */
+    action?: ReactNode;
+    /** Render a close button. */
+    dismissible?: boolean;
+    /** Called when the user clicks close. */
+    onDismiss?: () => void;
+    /** Stick to the top of the viewport. */
+    sticky?: boolean;
+    className?: string;
+};
+declare const AnnouncementBar: ({ intent, icon, message, action, dismissible, onDismiss, sticky, className, }: AnnouncementBarProps) => react_jsx_runtime.JSX.Element | null;
+
+type CookieBannerPosition = 'bottom' | 'top' | 'floating';
+type CookieBannerProps = {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    position?: CookieBannerPosition;
+    title?: string;
+    message: ReactNode;
+    /** Render the Settings button. Hidden if no handler. */
+    onSettings?: () => void;
+    settingsLabel?: string;
+    /** Render the Deny All button. Hidden if no handler. */
+    onDeny?: () => void;
+    denyLabel?: string;
+    /** Required Accept handler — primary action. */
+    onAccept: () => void;
+    acceptLabel?: string;
+    /** Show the Cookie icon next to the title. Default `true`. */
+    showIcon?: boolean;
+    className?: string;
+};
+declare const CookieBanner: ({ open: openProp, defaultOpen, onOpenChange, position, title, message, onSettings, settingsLabel, onDeny, denyLabel, onAccept, acceptLabel, showIcon, className, }: CookieBannerProps) => react_jsx_runtime.JSX.Element | null;
+
+type CommandPaletteProps = ComponentPropsWithoutRef<typeof Command.Dialog> & {
+    /**
+     * Optional global hotkey that toggles the palette open/closed when the
+     * matching keyboard combination is pressed. Common values: `'mod+k'`
+     * (Cmd on macOS, Ctrl elsewhere), `'mod+shift+p'`, `'/'`. Pass `null`
+     * to skip registering a hotkey.
+     */
+    hotkey?: 'mod+k' | 'mod+/' | '/' | string | null;
+};
+type CommandPaletteInputProps = ComponentPropsWithoutRef<typeof Command.Input>;
+type CommandPaletteListProps = ComponentPropsWithoutRef<typeof Command.List>;
+type CommandPaletteGroupProps = ComponentPropsWithoutRef<typeof Command.Group>;
+type CommandPaletteItemProps = Omit<ComponentPropsWithoutRef<typeof Command.Item>, 'children'> & {
+    icon?: ElementType;
+    /** Right-aligned keyboard shortcut hint (e.g. "⌘D"). */
+    shortcut?: ReactNode;
+    children: ReactNode;
+};
+type CommandPaletteFooterProps = {
+    className?: string;
+    children: ReactNode;
+};
+declare const CommandPalette: (({ hotkey, open, onOpenChange, className, overlayClassName, contentClassName, children, label, ...rest }: CommandPaletteProps) => react_jsx_runtime.JSX.Element) & {
+    Input: react.ForwardRefExoticComponent<Omit<Omit<Pick<Pick<react.DetailedHTMLProps<react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof react.InputHTMLAttributes<HTMLInputElement>> & {
+        ref?: React.Ref<HTMLInputElement>;
+    } & {
+        asChild?: boolean;
+    }, "key" | "asChild" | keyof react.InputHTMLAttributes<HTMLInputElement>>, "onChange" | "value" | "type"> & {
+        value?: string;
+        onValueChange?: (search: string) => void;
+    } & react.RefAttributes<HTMLInputElement>, "ref"> & react.RefAttributes<HTMLInputElement>>;
+    List: react.ForwardRefExoticComponent<Omit<{
+        children?: React.ReactNode;
+    } & Pick<Pick<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof react.HTMLAttributes<HTMLDivElement> | "key"> & {
+        ref?: React.Ref<HTMLDivElement>;
+    } & {
+        asChild?: boolean;
+    }, keyof react.HTMLAttributes<HTMLDivElement> | "key" | "asChild"> & {
+        label?: string;
+    } & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+    Group: react.ForwardRefExoticComponent<Omit<{
+        children?: React.ReactNode;
+    } & Omit<Pick<Pick<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof react.HTMLAttributes<HTMLDivElement> | "key"> & {
+        ref?: React.Ref<HTMLDivElement>;
+    } & {
+        asChild?: boolean;
+    }, keyof react.HTMLAttributes<HTMLDivElement> | "key" | "asChild">, "heading" | "value"> & {
+        heading?: React.ReactNode;
+        value?: string;
+        forceMount?: boolean;
+    } & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+    Item: react.ForwardRefExoticComponent<Omit<Omit<{
+        children?: React.ReactNode;
+    } & Omit<Pick<Pick<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof react.HTMLAttributes<HTMLDivElement> | "key"> & {
+        ref?: React.Ref<HTMLDivElement>;
+    } & {
+        asChild?: boolean;
+    }, keyof react.HTMLAttributes<HTMLDivElement> | "key" | "asChild">, "onSelect" | "disabled" | "value"> & {
+        disabled?: boolean;
+        onSelect?: (value: string) => void;
+        value?: string;
+        keywords?: string[];
+        forceMount?: boolean;
+    } & react.RefAttributes<HTMLDivElement>, "ref">, "children"> & {
+        icon?: ElementType;
+        /** Right-aligned keyboard shortcut hint (e.g. "⌘D"). */
+        shortcut?: ReactNode;
+        children: ReactNode;
+    } & react.RefAttributes<HTMLDivElement>>;
+    Separator: react.ForwardRefExoticComponent<Omit<Pick<Pick<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof react.HTMLAttributes<HTMLDivElement> | "key"> & {
+        ref?: React.Ref<HTMLDivElement>;
+    } & {
+        asChild?: boolean;
+    }, keyof react.HTMLAttributes<HTMLDivElement> | "key" | "asChild"> & {
+        alwaysRender?: boolean;
+    } & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+    Empty: react.ForwardRefExoticComponent<Omit<{
+        children?: React.ReactNode;
+    } & Pick<Pick<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof react.HTMLAttributes<HTMLDivElement> | "key"> & {
+        ref?: React.Ref<HTMLDivElement>;
+    } & {
+        asChild?: boolean;
+    }, keyof react.HTMLAttributes<HTMLDivElement> | "key" | "asChild"> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+    Loading: react.ForwardRefExoticComponent<Omit<{
+        children?: React.ReactNode;
+    } & Pick<Pick<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof react.HTMLAttributes<HTMLDivElement> | "key"> & {
+        ref?: React.Ref<HTMLDivElement>;
+    } & {
+        asChild?: boolean;
+    }, keyof react.HTMLAttributes<HTMLDivElement> | "key" | "asChild"> & {
+        progress?: number;
+        label?: string;
+    } & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+    Footer: ({ className, children }: CommandPaletteFooterProps) => react_jsx_runtime.JSX.Element;
+};
+
+type ClipboardVariant = 'icon' | 'button';
+type ClipboardSize = 'sm' | 'md';
+type ClipboardProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onCopy'> & {
+    /** Text written to the clipboard on click. */
+    value: string;
+    /** `icon` (default) → square icon-only button. `button` → icon + label. */
+    variant?: ClipboardVariant;
+    size?: ClipboardSize;
+    /** Override the label (only shown when `variant="button"`). */
+    copyLabel?: string;
+    copiedLabel?: string;
+    /** Milliseconds the "copied" state stays visible. Default 1500. */
+    duration?: number;
+    /** Fires after the value is copied. */
+    onCopy?: (value: string) => void;
+    /**
+     * Style for floating on top of a code block (translucent bg, hover-revealed
+     * via parent's `group` class). Pair with a `group` parent and absolute
+     * positioning. Default `false`.
+     */
+    floating?: boolean;
+};
+declare const Clipboard: react.ForwardRefExoticComponent<Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onCopy"> & {
+    /** Text written to the clipboard on click. */
+    value: string;
+    /** `icon` (default) → square icon-only button. `button` → icon + label. */
+    variant?: ClipboardVariant;
+    size?: ClipboardSize;
+    /** Override the label (only shown when `variant="button"`). */
+    copyLabel?: string;
+    copiedLabel?: string;
+    /** Milliseconds the "copied" state stays visible. Default 1500. */
+    duration?: number;
+    /** Fires after the value is copied. */
+    onCopy?: (value: string) => void;
+    /**
+     * Style for floating on top of a code block (translucent bg, hover-revealed
+     * via parent's `group` class). Pair with a `group` parent and absolute
+     * positioning. Default `false`.
+     */
+    floating?: boolean;
+} & react.RefAttributes<HTMLButtonElement>>;
+
+type BackToTopFabPosition = 'bottom-right' | 'bottom-left';
+type BackToTopFabIntent = 'brand' | 'neutral';
+type BackToTopFabProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'> & {
+    /** Pixels of vertical scroll before the FAB fades in. Default `300`. */
+    threshold?: number;
+    /** Anchor corner. Default `bottom-right`. */
+    position?: BackToTopFabPosition;
+    /** Use smooth scrolling. Default `true`. */
+    smoothScroll?: boolean;
+    /** Override the icon. Default `ArrowUp`. */
+    icon?: ComponentType<{
+        className?: string;
+    }>;
+    /** Visual intent. Default `brand` (filled brand-500). `neutral` is gray. */
+    intent?: BackToTopFabIntent;
+    /** Override the click handler — defaults to `window.scrollTo({ top: 0 })`. */
+    onActivate?: () => void;
+    /** Distance from the viewport edges in px. Default `24`. */
+    offset?: number;
+    ariaLabel?: string;
+};
+declare const BackToTopFab: ({ threshold, position, smoothScroll, icon: Icon, intent, onActivate, offset, ariaLabel, className, style, ...rest }: BackToTopFabProps) => react_jsx_runtime.JSX.Element;
+
+type HelpOverlayProps = {
+    /** Controlled open state. Omit to use the internal hotkey-driven state. */
+    open?: boolean;
+    /** Called when the overlay opens or closes (controlled or uncontrolled). */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Global hotkey that toggles the overlay. Defaults to `'?'`. Pass `null`
+     * to skip registering a hotkey (controlled-only usage).
+     */
+    hotkey?: string | null;
+    /** Header title. Defaults to `'Keyboard shortcuts'`. */
+    title?: ReactNode;
+    /** Optional descriptive subtitle below the title. */
+    description?: ReactNode;
+    /** Footer hint text. Defaults to `Press Esc to close`. */
+    footer?: ReactNode;
+    className?: string;
+    children: ReactNode;
+};
+type HelpOverlaySectionProps = {
+    title: ReactNode;
+    className?: string;
+    children: ReactNode;
+};
+type HelpOverlayShortcutProps = {
+    /**
+     * Either a single combo (`'mod+k'`) or a sequence of combos to press in
+     * order (`['g', 'h']`). For chord display, separate parts with `+`
+     * inside each string.
+     */
+    keys: string | string[];
+    description: ReactNode;
+    className?: string;
+};
+declare const HelpOverlay: (({ open: controlledOpen, onOpenChange, hotkey, title, description, footer, className, children, }: HelpOverlayProps) => react_jsx_runtime.JSX.Element | null) & {
+    Section: ({ title, className, children }: HelpOverlaySectionProps) => react_jsx_runtime.JSX.Element;
+    Shortcut: ({ keys, description, className }: HelpOverlayShortcutProps) => react_jsx_runtime.JSX.Element;
+};
+
+type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> & {
+    label?: string;
+    description?: string;
+    error?: string;
+    /** Optional left icon (lucide-react). Ignored when `prefix` is set. */
+    icon?: ElementType;
+    /** Optional right slot — e.g. unit suffix, validation pill. Ignored when `suffix` is set. */
+    rightSlot?: ReactNode;
+    /** Slot rendered next to the label text (e.g. a TooltipHelp). */
+    labelTrailing?: ReactNode;
+    /** Attached prefix addon (e.g. `https://`, `€`, `@`). Renders as a bordered group. */
+    prefix?: ReactNode;
+    /** Attached suffix addon (e.g. `.com`, `kg`). Renders as a bordered group. */
+    suffix?: ReactNode;
+};
+declare const Input: react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "size"> & {
+    label?: string;
+    description?: string;
+    error?: string;
+    /** Optional left icon (lucide-react). Ignored when `prefix` is set. */
+    icon?: ElementType;
+    /** Optional right slot — e.g. unit suffix, validation pill. Ignored when `suffix` is set. */
+    rightSlot?: ReactNode;
+    /** Slot rendered next to the label text (e.g. a TooltipHelp). */
+    labelTrailing?: ReactNode;
+    /** Attached prefix addon (e.g. `https://`, `€`, `@`). Renders as a bordered group. */
+    prefix?: ReactNode;
+    /** Attached suffix addon (e.g. `.com`, `kg`). Renders as a bordered group. */
+    suffix?: ReactNode;
+} & react.RefAttributes<HTMLInputElement>>;
+
+type SearchInputProps = {
+    value: string;
+    onChange: (v: string) => void;
+    placeholder?: string;
+    className?: string;
+};
+declare const SearchInput: ({ value, onChange, placeholder, className, }: SearchInputProps) => react_jsx_runtime.JSX.Element;
+
+type SelectOption = {
+    value: string;
+    label: string;
+    disabled?: boolean;
+};
+type SelectProps = Omit<SelectHTMLAttributes<HTMLSelectElement>, 'children'> & {
+    options: SelectOption[];
+    label?: string;
+    description?: string;
+    error?: string;
+};
+declare const Select: react.ForwardRefExoticComponent<Omit<SelectHTMLAttributes<HTMLSelectElement>, "children"> & {
+    options: SelectOption[];
+    label?: string;
+    description?: string;
+    error?: string;
+} & react.RefAttributes<HTMLSelectElement>>;
+
+type ToggleProps = {
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+    disabled?: boolean;
+    label?: string;
+    description?: string;
+};
+declare const Toggle: ({ checked, onChange, disabled, label, description, }: ToggleProps) => react_jsx_runtime.JSX.Element;
+
+type FilterOption<T extends string = string> = {
+    label: string;
+    value: T;
+};
+type FilterPillsProps<T extends string = string> = {
+    options: FilterOption<T>[];
+    value: T;
+    onChange: (v: T) => void;
+    icon?: ElementType;
+    /**
+     * Stretch the pill group to fill its parent (`flex w-full`). Default
+     * `false` — the group sizes to its content (pill labels + optional icon).
+     */
+    fullWidth?: boolean;
+    className?: string;
+};
+declare const FilterPills: <T extends string = string>({ options, value, onChange, icon: Icon, fullWidth, className, }: FilterPillsProps<T>) => react_jsx_runtime.JSX.Element;
+
+type SegmentOption<T extends string> = {
+    label: string;
+    value: T;
+    icon?: ElementType;
+};
+type SegmentedControlProps<T extends string> = {
+    options: SegmentOption<T>[];
+    value: T;
+    onChange: (v: T) => void;
+    className?: string;
+};
+declare const SegmentedControl: <T extends string>({ options, value, onChange, className, }: SegmentedControlProps<T>) => react_jsx_runtime.JSX.Element;
+
+type StepperInputProps = {
+    value: number;
+    onChange: (v: number) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    unit?: string;
+    /** Tailwind width class for the inner input — default `w-20`. */
+    width?: string;
+    /**
+     * Stretch the whole control to fill its parent (`flex w-full`). Default
+     * `false` — the control sizes to its content (input width + unit + arrows).
+     */
+    fullWidth?: boolean;
+    disabled?: boolean;
+    className?: string;
+};
+/**
+ * StepperInput — number field with stacked ↑ / ↓ arrows embedded inside the
+ * right edge. Compact alternative to NumberInput for settings panels.
+ */
+declare const StepperInput: ({ value, onChange, min, max, step, unit, width, fullWidth, disabled, className, }: StepperInputProps) => react_jsx_runtime.JSX.Element;
+
+type NumberInputProps = {
+    value: number;
+    onChange: (v: number) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    unit?: string;
+    /** Tailwind width class for the inner input — default `w-20`. */
+    width?: string;
+    /**
+     * Stretch the whole control to fill its parent (`flex w-full`). Default
+     * `false` — the control sizes to its content (buttons + input width + unit).
+     * Use `fullWidth` for form grids where the column should be filled.
+     */
+    fullWidth?: boolean;
+    disabled?: boolean;
+    className?: string;
+};
+/**
+ * NumberInput — number field with `−` / `+` buttons on the outside edges.
+ * Replaces native `<input type="number">` spinners for cross-browser
+ * consistency.
+ */
+declare const NumberInput: ({ value, onChange, min, max, step, unit, width, fullWidth, disabled, className, }: NumberInputProps) => react_jsx_runtime.JSX.Element;
+
+type ZoomBarProps = {
+    zoom: number;
+    onZoomOut: () => void;
+    onZoomIn: () => void;
+    onFit?: () => void;
+    onReset?: () => void;
+    /**
+     * Stretch the zoom group to fill its parent (`flex w-full`). Default
+     * `false` — the group sizes to its content. Zoom bars are usually
+     * floated over a canvas, so the compact default is the right one.
+     */
+    fullWidth?: boolean;
+    className?: string;
+};
+/**
+ * ZoomBar — inline zoom control group: [−] [xx%] [+] [fit] [reset].
+ * Use for canvas, map, and visualization views.
+ */
+declare const ZoomBar: ({ zoom, onZoomOut, onZoomIn, onFit, onReset, fullWidth, className, }: ZoomBarProps) => react_jsx_runtime.JSX.Element;
+
+type FormRowProps = {
+    label: string;
+    description?: string;
+    /** Renders a `(?)` help icon next to the label. */
+    tooltip?: string;
+    children: ReactNode;
+    className?: string;
+};
+/**
+ * FormRow — horizontal setting row : label (+ optional description and help)
+ * on the left, control on the right. Pair multiple FormRows inside a
+ * `divide-y` container to build settings panels.
+ */
+declare const FormRow: ({ label, description, tooltip, children, className }: FormRowProps) => react_jsx_runtime.JSX.Element;
+
+type AvatarUploaderSize = 'md' | 'lg';
+type AvatarUploaderProps = {
+    /** Current avatar URL (data URL or http). null/undefined → initials fallback. */
+    src?: string | null;
+    /** Used for the initials fallback when `src` is empty. */
+    name?: string;
+    /** Visual size. `md` = 80px (default), `lg` = 96px. */
+    size?: AvatarUploaderSize;
+    /** Called with the picked file once type/size validation has passed. */
+    onUpload: (file: File) => void | Promise<void>;
+    /** Called when the user clicks Remove. Hidden when omitted. */
+    onRemove?: () => void | Promise<void>;
+    /** Override the loading spinner externally (controlled). */
+    loading?: boolean;
+    /** External error message. Overrides any internal validation error. */
+    error?: string;
+    /** Helper text below the actions. */
+    helperText?: string;
+    /** Max file size in megabytes. Default 5. */
+    maxSizeMB?: number;
+    /** File picker accept attribute. Default `image/*`. */
+    accept?: string;
+    disabled?: boolean;
+    /** Override the upload button label. Default toggles "Upload photo" / "Change photo". */
+    uploadLabel?: string;
+    removeLabel?: string;
+    className?: string;
+};
+declare const AvatarUploader: ({ src, name, size, onUpload, onRemove, loading: loadingProp, error: errorProp, helperText, maxSizeMB, accept, disabled, uploadLabel, removeLabel, className, }: AvatarUploaderProps) => react_jsx_runtime.JSX.Element;
+
+type PasswordInputProps = Omit<InputProps, 'type' | 'icon' | 'rightSlot' | 'labelTrailing'> & {
+    /** Tooltip text shown next to the label (uses TooltipHelp). */
+    helpText?: string;
+    /** Override the visibility-toggle button labels (defaults: "Show/Hide password"). */
+    showLabel?: string;
+    hideLabel?: string;
+};
+declare const PasswordInput: react.ForwardRefExoticComponent<Omit<InputProps, "icon" | "type" | "rightSlot" | "labelTrailing"> & {
+    /** Tooltip text shown next to the label (uses TooltipHelp). */
+    helpText?: string;
+    /** Override the visibility-toggle button labels (defaults: "Show/Hide password"). */
+    showLabel?: string;
+    hideLabel?: string;
+} & react.RefAttributes<HTMLInputElement>>;
+
+type PasswordRule = {
+    label: string;
+    ok: boolean;
+};
+type PasswordPolicyCheckerProps = {
+    rules: PasswordRule[];
+    /** Title shown above the rules list. Pass `null` to hide it. */
+    title?: string | null;
+    className?: string;
+};
+declare const PasswordPolicyChecker: ({ rules, title, className, }: PasswordPolicyCheckerProps) => react_jsx_runtime.JSX.Element;
+/**
+ * Sensible default password policy. Override per-app if stricter/looser
+ * rules are needed (i18n, custom min length, blocklists, …).
+ */
+declare const defaultPasswordRules: (pwd: string) => PasswordRule[];
+
+type TextareaResize = 'none' | 'vertical' | 'horizontal' | 'both';
+type TextareaProps = TextareaHTMLAttributes<HTMLTextAreaElement> & {
+    label?: string;
+    description?: string;
+    error?: string;
+    /** Slot rendered next to the label text (e.g. a TooltipHelp). */
+    labelTrailing?: ReactNode;
+    /** Resize behaviour. Default `vertical`. */
+    resize?: TextareaResize;
+    /** Show a `<used> / <max>` counter below the field. Default: auto when `maxLength` is set. */
+    showCount?: boolean;
+};
+declare const Textarea: react.ForwardRefExoticComponent<TextareaHTMLAttributes<HTMLTextAreaElement> & {
+    label?: string;
+    description?: string;
+    error?: string;
+    /** Slot rendered next to the label text (e.g. a TooltipHelp). */
+    labelTrailing?: ReactNode;
+    /** Resize behaviour. Default `vertical`. */
+    resize?: TextareaResize;
+    /** Show a `<used> / <max>` counter below the field. Default: auto when `maxLength` is set. */
+    showCount?: boolean;
+} & react.RefAttributes<HTMLTextAreaElement>>;
+
+type CheckboxSize = 'sm' | 'md';
+type CheckboxProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type' | 'onChange' | 'children'> & {
+    label?: ReactNode;
+    description?: string;
+    /** Called with the next checked state. */
+    onChange?: (checked: boolean, e: ChangeEvent<HTMLInputElement>) => void;
+    /** When true, renders the indeterminate (minus) icon. Overrides `checked` visually. */
+    indeterminate?: boolean;
+    size?: CheckboxSize;
+};
+declare const Checkbox: react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "children" | "onChange" | "type" | "size"> & {
+    label?: ReactNode;
+    description?: string;
+    /** Called with the next checked state. */
+    onChange?: (checked: boolean, e: ChangeEvent<HTMLInputElement>) => void;
+    /** When true, renders the indeterminate (minus) icon. Overrides `checked` visually. */
+    indeterminate?: boolean;
+    size?: CheckboxSize;
+} & react.RefAttributes<HTMLInputElement>>;
+type CheckboxGroupOption = {
+    value: string;
+    label: string;
+    description?: string;
+    disabled?: boolean;
+};
+type CheckboxGroupProps = {
+    legend?: string;
+    description?: string;
+    value?: string[];
+    defaultValue?: string[];
+    onChange?: (value: string[]) => void;
+    options: CheckboxGroupOption[];
+    orientation?: 'vertical' | 'horizontal';
+    error?: string;
+    /** Shared `name` attribute for all checkboxes. */
+    name?: string;
+    size?: CheckboxSize;
+    className?: string;
+};
+declare const CheckboxGroup: ({ legend, description, value, defaultValue, onChange, options, orientation, error, name, size, className, }: CheckboxGroupProps) => react_jsx_runtime.JSX.Element;
+
+type RadioSize = 'sm' | 'md';
+type RadioProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type' | 'onChange' | 'children'> & {
+    label?: ReactNode;
+    description?: string;
+    /** Called with the next checked state (true when this radio becomes selected). */
+    onChange?: (checked: boolean, e: ChangeEvent<HTMLInputElement>) => void;
+    size?: RadioSize;
+};
+declare const Radio: react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "children" | "onChange" | "type" | "size"> & {
+    label?: ReactNode;
+    description?: string;
+    /** Called with the next checked state (true when this radio becomes selected). */
+    onChange?: (checked: boolean, e: ChangeEvent<HTMLInputElement>) => void;
+    size?: RadioSize;
+} & react.RefAttributes<HTMLInputElement>>;
+type RadioGroupOption = {
+    value: string;
+    label: string;
+    description?: string;
+    disabled?: boolean;
+};
+type RadioGroupProps = {
+    legend?: string;
+    description?: string;
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    options: RadioGroupOption[];
+    orientation?: 'vertical' | 'horizontal';
+    error?: string;
+    /** Shared `name` for the radios (auto-generated via useId if omitted). */
+    name?: string;
+    size?: RadioSize;
+    className?: string;
+};
+declare const RadioGroup: ({ legend, description, value, defaultValue, onChange, options, orientation, error, name, size, className, }: RadioGroupProps) => react_jsx_runtime.JSX.Element;
+
+type FileInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'onChange' | 'value'> & {
+    label?: string;
+    description?: string;
+    error?: string;
+    /** Called with the array of selected files. */
+    onChange?: (files: File[]) => void;
+    /** Browse button label. Default "Browse". */
+    buttonLabel?: string;
+    /** Placeholder when no file is selected. Default "No file chosen". */
+    placeholder?: string;
+    /** Show file size next to the name. Default true. */
+    showSize?: boolean;
+};
+declare const FileInput: react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "onChange" | "value" | "type"> & {
+    label?: string;
+    description?: string;
+    error?: string;
+    /** Called with the array of selected files. */
+    onChange?: (files: File[]) => void;
+    /** Browse button label. Default "Browse". */
+    buttonLabel?: string;
+    /** Placeholder when no file is selected. Default "No file chosen". */
+    placeholder?: string;
+    /** Show file size next to the name. Default true. */
+    showSize?: boolean;
+} & react.RefAttributes<HTMLInputElement>>;
+
+type DropzoneProps = {
+    label?: string;
+    description?: string;
+    error?: string;
+    multiple?: boolean;
+    accept?: string;
+    disabled?: boolean;
+    /** Called with the new list of accepted files. */
+    onChange?: (files: File[]) => void;
+    /** Controlled file list. */
+    value?: File[];
+    /** Cap on file count when `multiple` is true. */
+    maxFiles?: number;
+    /** Max bytes per file. */
+    maxSize?: number;
+    /** Custom content shown inside the drop area (overrides defaults). */
+    children?: ReactNode;
+    /** Hide the file list rendered below the drop area. Default `false`. */
+    hideFileList?: boolean;
+    className?: string;
+};
+declare const Dropzone: ({ label, description, error: errorProp, multiple, accept, disabled, onChange, value, maxFiles, maxSize, children, hideFileList, className, }: DropzoneProps) => react_jsx_runtime.JSX.Element;
+
+type FormFooterAlign = 'right' | 'between';
+type FormFooterProps = {
+    /** Cancel button handler. Hidden when omitted. */
+    onCancel?: () => void;
+    cancelLabel?: string;
+    /** Submit button. Defaults to `<button type="submit">`. Override via `submitProps.type`. */
+    submitLabel?: string;
+    /** When true, the submit button shows a spinner and is disabled. */
+    submitting?: boolean;
+    /** Disable the submit button (e.g. form invalid / not dirty). */
+    submitDisabled?: boolean;
+    /** Visual variant for the submit button. Default `primary`. */
+    submitVariant?: ButtonVariant;
+    /** Form name attribute (used by submit when the button is outside the form). */
+    formId?: string;
+    /** Where to render the buttons. Default `right`. */
+    align?: FormFooterAlign;
+    /** Render a top border separator. Default `true`. */
+    bordered?: boolean;
+    /** Optional content shown opposite the buttons (helper text, last-saved indicator…). */
+    extra?: ReactNode;
+    /** Replace the entire button row (still keeps padding + border). */
+    children?: ReactNode;
+    className?: string;
+};
+declare const FormFooter: ({ onCancel, cancelLabel, submitLabel, submitting, submitDisabled, submitVariant, formId, align, bordered, extra, children, className, }: FormFooterProps) => react_jsx_runtime.JSX.Element;
+
+type CalendarProps = DayPickerProps & {
+    className?: string;
+};
+/**
+ * Thin Cosmos wrapper around react-day-picker's `<DayPicker>`. All DayPicker
+ * props are accepted (see https://daypicker.dev). Cosmos applies its own
+ * Tailwind class names on top of the defaults so the calendar matches the
+ * rest of the design system.
+ */
+declare const Calendar: ({ classNames, components, className, ...rest }: CalendarProps) => react_jsx_runtime.JSX.Element;
+
+type DateRange = {
+    from: Date | undefined;
+    to: Date | undefined;
+};
+type DatePickerMode = 'single' | 'range';
+type SingleProps = {
+    mode?: 'single';
+    value?: Date;
+    defaultValue?: Date;
+    onChange?: (date: Date | undefined) => void;
+    /** Placeholder for the (single) trigger. */
+    placeholder?: string;
+};
+type RangeProps = {
+    mode: 'range';
+    value?: DateRange;
+    defaultValue?: DateRange;
+    onChange?: (range: DateRange) => void;
+    /** Placeholder for the FROM trigger. */
+    fromPlaceholder?: string;
+    /** Placeholder for the TO trigger. */
+    toPlaceholder?: string;
+};
+type CommonProps = {
+    label?: string;
+    description?: string;
+    error?: string;
+    disabled?: boolean;
+    /** Earliest selectable date (inclusive). */
+    fromDate?: Date;
+    /** Latest selectable date (inclusive). */
+    toDate?: Date;
+    /** Year range for the year dropdown. Default: current year ±10. */
+    fromYear?: number;
+    toYear?: number;
+    /** Caption style. `dropdown` (default) shows month + year as `<select>`s. */
+    captionLayout?: 'dropdown' | 'dropdown-months' | 'dropdown-years' | 'label';
+    /** Single mode only — show a "Today" shortcut button below the calendar. Default `true`. */
+    showTodayButton?: boolean;
+    /** Custom formatter for displayed dates. Default `DD MMM YYYY`. */
+    format?: (date: Date) => string;
+    /** Single mode only — fully replace the default footer (Today button) with custom JSX. */
+    calendarFooter?: ReactNode;
+    /** Stretch the trigger(s) to fill the parent. */
+    fullWidth?: boolean;
+    className?: string;
+};
+type DatePickerProps = (SingleProps | RangeProps) & CommonProps;
+declare const DatePicker: (props: DatePickerProps) => react_jsx_runtime.JSX.Element;
+
+type TimePickerProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'value' | 'onChange'> & {
+    label?: string;
+    description?: string;
+    error?: string;
+    /** HH:MM (24h) string. */
+    value?: string;
+    defaultValue?: string;
+    onChange?: (time: string, e: ChangeEvent<HTMLInputElement>) => void;
+    /** Minute granularity. 1 = any minute, 60 = hours only. Default 1. */
+    step?: number;
+    /** Earliest time (HH:MM). */
+    min?: string;
+    /** Latest time (HH:MM). */
+    max?: string;
+    /**
+     * Stretch the input to fill its parent (`w-full`). Default `false` —
+     * the input sizes itself with a sensible `min-w-[140px]`. Use `fullWidth`
+     * in form grids that should fill the column.
+     */
+    fullWidth?: boolean;
+};
+declare const TimePicker: react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "onChange" | "value" | "type"> & {
+    label?: string;
+    description?: string;
+    error?: string;
+    /** HH:MM (24h) string. */
+    value?: string;
+    defaultValue?: string;
+    onChange?: (time: string, e: ChangeEvent<HTMLInputElement>) => void;
+    /** Minute granularity. 1 = any minute, 60 = hours only. Default 1. */
+    step?: number;
+    /** Earliest time (HH:MM). */
+    min?: string;
+    /** Latest time (HH:MM). */
+    max?: string;
+    /**
+     * Stretch the input to fill its parent (`w-full`). Default `false` —
+     * the input sizes itself with a sensible `min-w-[140px]`. Use `fullWidth`
+     * in form grids that should fill the column.
+     */
+    fullWidth?: boolean;
+} & react.RefAttributes<HTMLInputElement>>;
+
+type OtpInputProps = {
+    /** Number of cells. Default 6. */
+    length?: number;
+    /** Current value. Length should be ≤ `length`. */
+    value: string;
+    onChange: (value: string) => void;
+    /** Fired when the user reaches `length` characters. */
+    onComplete?: (value: string) => void;
+    disabled?: boolean;
+    error?: boolean;
+    /** Allow letters in addition to digits. Default `false` (digits only). */
+    alphanumeric?: boolean;
+    /** Render each filled cell as a `•` instead of the actual character. */
+    mask?: boolean;
+    autoFocus?: boolean;
+    /** Hidden input `name` for native form submission. */
+    name?: string;
+    className?: string;
+    ariaLabel?: string;
+};
+declare const OtpInput: ({ length, value, onChange, onComplete, disabled, error, alphanumeric, mask, autoFocus, name, className, ariaLabel, }: OtpInputProps) => react_jsx_runtime.JSX.Element;
+
+type ActionPanelLayout = 'stacked' | 'inline';
+type ActionPanelProps = HTMLAttributes<HTMLDivElement> & {
+    /** Section title (rendered as `<h3>`). */
+    title: ReactNode;
+    /** Body text shown under the title. */
+    description?: ReactNode;
+    /** Trailing action — button, link, toggle, etc. */
+    action?: ReactNode;
+    /**
+     * Layout. `stacked` (default): action sits below the description.
+     * `inline`: action floats top-right (TUI "With button at top right").
+     */
+    layout?: ActionPanelLayout;
+    /**
+     * Use a tinted gray surface instead of a white card (TUI "Simple well").
+     */
+    well?: boolean;
+};
+declare const ActionPanel: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+    /** Section title (rendered as `<h3>`). */
+    title: ReactNode;
+    /** Body text shown under the title. */
+    description?: ReactNode;
+    /** Trailing action — button, link, toggle, etc. */
+    action?: ReactNode;
+    /**
+     * Layout. `stacked` (default): action sits below the description.
+     * `inline`: action floats top-right (TUI "With button at top right").
+     */
+    layout?: ActionPanelLayout;
+    /**
+     * Use a tinted gray surface instead of a white card (TUI "Simple well").
+     */
+    well?: boolean;
+} & react.RefAttributes<HTMLDivElement>>;
+
+type ComboboxOption = {
+    value: string;
+    label: string;
+    /** Optional secondary text shown to the right (mirrors TUI "With secondary text"). */
+    secondary?: ReactNode;
+    /** Optional status dot/icon shown to the left (TUI "With status indicator"). */
+    leading?: ReactNode;
+    disabled?: boolean;
+};
+type ComboboxProps = {
+    label?: ReactNode;
+    /** Selected option value (controlled). */
+    value?: string;
+    /** Called when the user picks an option. */
+    onChange?: (value: string) => void;
+    options: ComboboxOption[];
+    placeholder?: string;
+    /** Show this when no option matches the typed query. */
+    emptyMessage?: string;
+    /** Disable the input + dropdown. */
+    disabled?: boolean;
+    /** Helper text under the input. */
+    helperText?: string;
+    /** Error message — replaces helperText when set. */
+    error?: string;
+    className?: string;
+};
+declare const Combobox: ({ label, value, onChange, options, placeholder, emptyMessage, disabled, helperText, error, className, }: ComboboxProps) => react_jsx_runtime.JSX.Element;
+
+type DescriptionListItemProps = HTMLAttributes<HTMLDivElement> & {
+    /** Label (`<dt>`). */
+    label: ReactNode;
+    /** Value (`<dd>`). */
+    children: ReactNode;
+};
+type DescriptionListProps = HTMLAttributes<HTMLDListElement> & {
+    /** Optional header title (rendered above the list). */
+    title?: ReactNode;
+    /** Optional header description (rendered below the title). */
+    description?: ReactNode;
+    /**
+     * When `true`, wraps the list in a card surface with border + rounded +
+     * shadow (TUI "Left-aligned in card" pattern).
+     */
+    inCard?: boolean;
+    /**
+     * When `true`, items get an alternating gray background (TUI "Left-aligned
+     * striped" pattern). Implementation uses `even:bg-gray-50`.
+     */
+    striped?: boolean;
+    children: ReactNode;
+};
+declare const DescriptionList: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDListElement> & {
+    /** Optional header title (rendered above the list). */
+    title?: ReactNode;
+    /** Optional header description (rendered below the title). */
+    description?: ReactNode;
+    /**
+     * When `true`, wraps the list in a card surface with border + rounded +
+     * shadow (TUI "Left-aligned in card" pattern).
+     */
+    inCard?: boolean;
+    /**
+     * When `true`, items get an alternating gray background (TUI "Left-aligned
+     * striped" pattern). Implementation uses `even:bg-gray-50`.
+     */
+    striped?: boolean;
+    children: ReactNode;
+} & react.RefAttributes<HTMLDListElement>> & {
+    Item: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+        /** Label (`<dt>`). */
+        label: ReactNode;
+        /** Value (`<dd>`). */
+        children: ReactNode;
+    } & react.RefAttributes<HTMLDivElement>>;
+};
+
+type KpiCardProps = {
+    label: string;
+    value: ReactNode;
+    /** Smaller text under the value — e.g. "across 3 sites". */
+    sub?: ReactNode;
+    className?: string;
+};
+/**
+ * KpiCard — single key metric card : label + large value + optional sub-text.
+ * Use in dashboards as the top-row at-a-glance panel.
+ */
+declare const KpiCard: ({ label, value, sub, className }: KpiCardProps) => react_jsx_runtime.JSX.Element;
+
+type TimelineItem = {
+    id: string;
+    /** Label or rendered title for the entry. */
+    title: ReactNode;
+    /** Optional secondary line under the title. */
+    description?: ReactNode;
+    /** Time label — e.g. "5m ago", "2026-05-07 14:32". */
+    time?: ReactNode;
+    /** Lucide icon — used by `dot` and `stepper` variants. */
+    icon?: ElementType;
+    /** Initials/name for `avatar` variant. */
+    avatarName?: string;
+    /** Optional image URL for `avatar` variant. */
+    avatarSrc?: string;
+    /**
+     * Visual tone for `stepper` variant (icon circle background).
+     * Defaults to `brand`.
+     */
+    tone?: TimelineTone;
+};
+type TimelineTone = 'brand' | 'success' | 'warning' | 'danger' | 'neutral';
+type TimelineVariant = 
+/** Small coloured dot — concise activity stream. */
+'dot'
+/** Avatar (initials or image) — useful when authorship matters. */
+ | 'avatar'
+/**
+ * Flowbite-style stepper timeline — large icon circle (40px) with the
+ * Lucide icon at 20px, tinted background per `tone`. Best for hero
+ * activity feeds or onboarding-style step-by-step views.
+ */
+ | 'stepper'
+/** Each entry rendered as a stand-alone card (no connector line). */
+ | 'card';
+type TimelineProps = {
+    items: TimelineItem[];
+    variant?: TimelineVariant;
+    className?: string;
+};
+declare const Timeline: ({ items, variant, className }: TimelineProps) => react_jsx_runtime.JSX.Element;
+
+type MiniCalendarProps = {
+    today?: Date;
+    selected: Date;
+    onSelect: (date: Date) => void;
+    /** Set of ISO date strings (YYYY-MM-DD) marking days with events. */
+    eventDays?: Set<string>;
+    className?: string;
+};
+/**
+ * MiniCalendar — compact ISO-week month picker with optional event dots.
+ * Click the month title to jump back to today's month.
+ */
+declare const MiniCalendar: ({ today, selected, onSelect, eventDays, className, }: MiniCalendarProps) => react_jsx_runtime.JSX.Element;
+
+type SortDirection = 'asc' | 'desc';
+type ColumnDef<T> = {
+    /** Stable key — used for sort/filter identity. */
+    key: string;
+    label: ReactNode;
+    /** Optional fixed width (CSS value, e.g. `'20%'` or `'180px'`). */
+    width?: string;
+    /** Tailwind text alignment override. */
+    align?: 'left' | 'right' | 'center';
+    /** Renders the cell for a row. */
+    render: (row: T) => ReactNode;
+    /** Returns the raw sortable value for the row. */
+    sortValue?: (row: T) => string | number | null;
+    /** Returns the raw filterable string for the row. */
+    filterValue?: (row: T) => string;
+    /** Returns the searchable string for the row. Falls back to `filterValue` if absent. */
+    searchValue?: (row: T) => string;
+    sortable?: boolean;
+    filterable?: boolean;
+};
+
+type DataTableProps<T> = {
+    rows: T[];
+    columns: ColumnDef<T>[];
+    rowKey: (row: T) => string | number;
+    /** Optional right-edge action column (typically a `RowActionButton`). */
+    renderRowAction?: (row: T) => React.ReactNode;
+    pageSize?: number;
+    loading?: boolean;
+    error?: string | null;
+    onRetry?: () => void;
+    emptyTitle?: string;
+    emptyDescription?: string;
+    /** Show a checkbox column and enable row selection. */
+    selectable?: boolean;
+    /** Controlled selection set (row keys). */
+    selection?: Set<string | number>;
+    defaultSelection?: Set<string | number>;
+    onSelectionChange?: (selection: Set<string | number>) => void;
+    /** Toolbar rendered above the table when `selection.size > 0`. Receives the selected rows. */
+    bulkActions?: (selectedRows: T[]) => ReactNode;
+    /** Controlled search value. When provided, the search input is shown. */
+    searchValue?: string;
+    defaultSearchValue?: string;
+    onSearchChange?: (value: string) => void;
+    searchPlaceholder?: string;
+    className?: string;
+};
+/**
+ * DataTable — opinionated data table with sticky header, per-column sort and
+ * filter, active filter chips bar, pagination, integrated loading / error /
+ * empty states, optional row selection with bulk actions, and an optional
+ * global search bar.
+ */
+declare const DataTable: <T>({ rows, columns, rowKey, renderRowAction, pageSize, loading, error, onRetry, emptyTitle, emptyDescription, selectable, selection: selectionProp, defaultSelection, onSelectionChange, bulkActions, searchValue: searchValueProp, defaultSearchValue, onSearchChange, searchPlaceholder, className, }: DataTableProps<T>) => react_jsx_runtime.JSX.Element;
+
+type ColumnHeaderProps = {
+    label: ReactNode;
+    align?: 'left' | 'right' | 'center';
+    sortable?: boolean;
+    filterable?: boolean;
+    /** Current sort direction for this column, or null if not active. */
+    sortDir?: SortDirection | null;
+    onSortToggle?: () => void;
+    /** Filter popover state — values, selected set, callbacks. */
+    filterValues?: string[];
+    filterSelected?: Set<string>;
+    onFilterToggle?: (v: string) => void;
+    onFilterClear?: () => void;
+    className?: string;
+};
+declare const ColumnHeader: ({ label, align, sortable, filterable, sortDir, onSortToggle, filterValues, filterSelected, onFilterToggle, onFilterClear, className, }: ColumnHeaderProps) => react_jsx_runtime.JSX.Element;
+
+type ColumnFilterDropdownProps = {
+    values: string[];
+    selected: Set<string>;
+    searchable?: boolean;
+    onToggle: (value: string) => void;
+    onClear: () => void;
+    className?: string;
+};
+/**
+ * ColumnFilterDropdown — popover with multi-select checkboxes for filtering
+ * a column. Optional search input filters the visible options.
+ */
+declare const ColumnFilterDropdown: ({ values, selected, searchable, onToggle, onClear, className, }: ColumnFilterDropdownProps) => react_jsx_runtime.JSX.Element;
+
+type ActiveFilter = {
+    key: string;
+    label: string;
+    /** Comma-joined preview of selected values. */
+    value: string;
+};
+type ActiveFiltersBarProps = {
+    filters: ActiveFilter[];
+    onClearOne: (key: string) => void;
+    onClearAll: () => void;
+    className?: string;
+};
+/**
+ * ActiveFiltersBar — chips row showing current column filters with per-chip
+ * dismiss + a "Clear all" action. Renders nothing when there are no filters.
+ */
+declare const ActiveFiltersBar: ({ filters, onClearOne, onClearAll, className, }: ActiveFiltersBarProps) => react_jsx_runtime.JSX.Element | null;
+
+type ErrorPageProps = {
+    /** Big numeric code displayed prominently — e.g. `404`, `500`, `503`. */
+    code: ReactNode;
+    title: ReactNode;
+    description?: ReactNode;
+    /** Optional illustration (image, SVG, or animated component) shown above the code. */
+    illustration?: ReactNode;
+    /** Action buttons (typically two: primary + secondary). */
+    actions?: ReactNode;
+    className?: string;
+};
+/**
+ * ErrorPage — generic full-page error layout reusable for 4xx / 5xx /
+ * maintenance screens. Provide your own `illustration`, `actions`, and
+ * `code`/`title` per scenario.
+ *
+ * Example (404):
+ *   <ErrorPage
+ *     code={404}
+ *     title="Page not found"
+ *     description="Sorry, the page you're looking for doesn't exist."
+ *     actions={
+ *       <>
+ *         <Button as="a" href="/">Go home</Button>
+ *         <Button variant="secondary" onClick={() => history.back()}>Back</Button>
+ *       </>
+ *     }
+ *   />
+ */
+declare const ErrorPage: ({ code, title, description, illustration, actions, className, }: ErrorPageProps) => react_jsx_runtime.JSX.Element;
+
+type StickyScrollNavSection = {
+    id: string;
+    label: string;
+};
+type StickyScrollNavProps = {
+    sections: StickyScrollNavSection[];
+    /** Custom scroll behavior — defaults to `scrollIntoView({ behavior: 'smooth', block: 'start' })`. */
+    onNavigate?: (id: string) => void;
+    /** CSS top offset (px) — pass the height of any fixed header above. */
+    topOffset?: number;
+    className?: string;
+};
+/**
+ * StickyScrollNav — sticky horizontal nav row that scrolls to in-page
+ * sections by id. Useful for long template gallery pages and docs.
+ */
+declare const StickyScrollNav: ({ sections, onNavigate, topOffset, className, }: StickyScrollNavProps) => react_jsx_runtime.JSX.Element;
+
+type ColorSwatchProps = {
+    /** Color hex (e.g. `#465fff`). */
+    hex: string;
+    /** Visible label below the swatch. */
+    label: string;
+    /** Whether this swatch is currently selected. */
+    active?: boolean;
+    onClick?: () => void;
+    className?: string;
+};
+/**
+ * ColorSwatch — single colour pick button. A filled rectangle with the
+ * colour, an optional checkmark when active, and a small caption below.
+ */
+declare const ColorSwatch: ({ hex, label, active, onClick, className, }: ColorSwatchProps) => react_jsx_runtime.JSX.Element;
+
+type AccentColor = {
+    /** Stable identifier (used as React key + value). */
+    id: string;
+    /** Visible label. */
+    label: string;
+    /** Color hex. */
+    hex: string;
+};
+type AccentPickerProps = {
+    /** Available accent colours. */
+    colors: AccentColor[];
+    /** Currently selected colour id. */
+    value: string;
+    onChange: (id: string) => void;
+    /** Number of columns on small screens (default 5). */
+    cols?: number;
+    /** Number of columns from `sm:` breakpoint (default 10). */
+    smCols?: number;
+    className?: string;
+};
+/**
+ * AccentPicker — grid of `<ColorSwatch>` buttons. Use to let the user
+ * pick the primary brand colour. Inspired by rackscope's appearance settings.
+ */
+declare const AccentPicker: ({ colors, value, onChange, cols, smCols, className, }: AccentPickerProps) => react_jsx_runtime.JSX.Element;
+
+type PalettePreview = {
+    /** Page background. */
+    bg: string;
+    /** Card / panel background (sits above `bg`). */
+    surface: string;
+    /** Borders and faint dividers. */
+    border: string;
+};
+type PaletteMeta = {
+    /** Stable identifier. */
+    id: string;
+    /** Display name (e.g. "Pure Light"). */
+    label: string;
+    /** Short description (e.g. "white surfaces"). */
+    desc?: string;
+    /** Three colours used to render a mini mockup. */
+    preview: PalettePreview;
+};
+type PaletteCardProps = {
+    meta: PaletteMeta;
+    active?: boolean;
+    onClick?: () => void;
+    className?: string;
+};
+/**
+ * PaletteCard — preview card showing a tiny mockup (sidebar strip + card)
+ * of a palette plus its label. Use inside `<PalettePicker>` to let the
+ * user pick a light/dark theme palette.
+ */
+declare const PaletteCard: ({ meta, active, onClick, className }: PaletteCardProps) => react_jsx_runtime.JSX.Element;
+
+type PalettePickerProps = {
+    palettes: PaletteMeta[];
+    value: string;
+    onChange: (id: string) => void;
+    /** Number of columns. Default 4. */
+    cols?: number;
+    className?: string;
+};
+/**
+ * PalettePicker — responsive grid of `<PaletteCard>` previews. Use one for
+ * the light theme set and another for the dark theme set.
+ */
+declare const PalettePicker: ({ palettes, value, onChange, cols, className, }: PalettePickerProps) => react_jsx_runtime.JSX.Element;
+
+type OptionCardProps = {
+    /** Stable identifier (used as React key + value). */
+    id: string;
+    /** Visible label. */
+    label: string;
+    /** Optional small description below the label. */
+    desc?: string;
+    /** Visual content rendered above the text — typically an icon, mockup, or preview. */
+    preview?: ReactNode;
+    active?: boolean;
+    onClick?: () => void;
+    className?: string;
+};
+/**
+ * OptionCard — generic selectable card with a preview slot, label, and
+ * optional description. Use to build pickers for icon styles, view modes,
+ * layout variants, etc.
+ */
+declare const OptionCard: ({ label, desc, preview, active, onClick, className, }: OptionCardProps) => react_jsx_runtime.JSX.Element;
+
+type OptionItem = Pick<OptionCardProps, 'id' | 'label' | 'desc' | 'preview'>;
+type OptionPickerProps = {
+    options: OptionItem[];
+    value: string;
+    onChange: (id: string) => void;
+    /** Number of grid columns. Default 5. */
+    cols?: number;
+    className?: string;
+};
+/**
+ * OptionPicker — responsive grid of `<OptionCard>` previews. Use for
+ * generic single-select pickers (icon styles, view modes, density, etc.).
+ */
+declare const OptionPicker: ({ options, value, onChange, cols, className, }: OptionPickerProps) => react_jsx_runtime.JSX.Element;
+
+type BlockquoteVariant = 'plain' | 'solid' | 'icon' | 'testimonial';
+type BlockquoteSize = 'sm' | 'md' | 'lg';
+type BlockquoteAlign = 'left' | 'center' | 'right';
+type BlockquoteProps = {
+    children: ReactNode;
+    /**
+     * Visual treatment:
+     * - `plain` (default): bare italic quote
+     * - `solid`: muted background + brand-coloured left border
+     * - `icon`: large quote glyph above the text
+     * - `testimonial`: solid background + author block in the footer
+     */
+    variant?: BlockquoteVariant;
+    size?: BlockquoteSize;
+    align?: BlockquoteAlign;
+    /** Author / source — required when `variant="testimonial"`. */
+    author?: ReactNode;
+    /** Author's role / company. Rendered below `author`. */
+    role?: ReactNode;
+    /** Optional avatar URL. Replaced by initials of `author` if it fails. */
+    authorAvatar?: string;
+    className?: string;
+};
+declare const Blockquote: ({ children, variant, size, align, author, role, authorAvatar, className, }: BlockquoteProps) => react_jsx_runtime.JSX.Element;
+
+type KbdSize = 'sm' | 'md';
+type KbdProps = {
+    children: ReactNode;
+    size?: KbdSize;
+    className?: string;
+};
+/**
+ * `Kbd` — represents a keyboard key. Use single instances for one-key shortcuts
+ * (`⌘`, `K`) or compose multiple `<Kbd>` together with a `+` between them for
+ * combos.
+ *
+ *     <Kbd>⌘</Kbd> <Kbd>K</Kbd>
+ *
+ * The component intentionally stays passive — no state, no overlay — so it can
+ * sit inside tooltips, help screens, paragraphs and badges without coupling.
+ */
+declare const Kbd: ({ children, size, className }: KbdProps) => react_jsx_runtime.JSX.Element;
+
+type FigureAlign = 'left' | 'center' | 'right';
+type FigureSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+type FigureRadius = 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+type FigureProps = Omit<ImgHTMLAttributes<HTMLImageElement>, 'children'> & {
+    src: string;
+    alt: string;
+    caption?: ReactNode;
+    align?: FigureAlign;
+    /** Constrain image width. `full` (default) → fills parent. */
+    size?: FigureSize;
+    /** Image corner radius. */
+    radius?: FigureRadius;
+    /** Drop shadow under the image. */
+    shadow?: boolean;
+    /** Wrapper className (the `<figure>`). */
+    wrapperClassName?: string;
+};
+/**
+ * `Figure` — image + optional caption pair. Wraps the native `<figure>` /
+ * `<figcaption>` pattern so consumers get semantic HTML for free plus the
+ * common visual knobs (alignment, size, rounding, shadow) without re-doing
+ * the Tailwind tetris each time.
+ */
+declare const Figure: ({ src, alt, caption, align, size, radius, shadow, className, wrapperClassName, ...rest }: FigureProps) => react_jsx_runtime.JSX.Element;
+
+export { type AccentColor, AccentPicker, type AccentPickerProps, Accordion, type AccordionContentProps, type AccordionItemProps, type AccordionProps, type AccordionTriggerProps, ActionPanel, type ActionPanelLayout, type ActionPanelProps, type ActiveFilter, ActiveFiltersBar, type ActiveFiltersBarProps, ActivityFeed, type ActivityFeedIntent, type ActivityFeedItemProps, type ActivityFeedProps, AlertBanner, type AlertBannerProps, type AlertVariant, AnnouncementBar, type AnnouncementBarIntent, type AnnouncementBarProps, Avatar, type AvatarProps, type AvatarSize, AvatarUploader, type AvatarUploaderProps, type AvatarUploaderSize, BackToTopFab, type BackToTopFabIntent, type BackToTopFabPosition, type BackToTopFabProps, Backdrop, type BackdropProps, Badge, type BadgeAppearance, type BadgeProps, type BadgeSize, type BadgeVariant, Blockquote, type BlockquoteAlign, type BlockquoteProps, type BlockquoteSize, type BlockquoteVariant, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, type BreadcrumbSeparator, Button, ButtonGroup, type ButtonGroupOrientation, type ButtonGroupProps, type ButtonProps, type ButtonShape, type ButtonSize, type ButtonVariant, Calendar, type CalendarProps, Card, type CardImageProps, type CardProps, Carousel, type CarouselControlsProps, type CarouselIndicatorsProps, type CarouselOptions, type CarouselProps, CarouselRoot, type CarouselSlideProps, type CarouselViewportProps, Checkbox, CheckboxGroup, type CheckboxGroupOption, type CheckboxGroupProps, type CheckboxProps, type CheckboxSize, ClickableRow, type ClickableRowProps, Clipboard, type ClipboardProps, type ClipboardSize, type ClipboardVariant, CodeBlock, type CodeBlockProps, ColBox, type ColBoxProps, ColorSwatch, type ColorSwatchProps, type ColumnDef, ColumnFilterDropdown, type ColumnFilterDropdownProps, ColumnHeader, type ColumnHeaderProps, Combobox, type ComboboxOption, type ComboboxProps, CommandPalette, type CommandPaletteFooterProps, type CommandPaletteGroupProps, type CommandPaletteInputProps, type CommandPaletteItemProps, type CommandPaletteListProps, type CommandPaletteProps, ConfirmationModal, type ConfirmationModalProps, ContentNarrow, type ContentNarrowProps, ContentStackedList, type ContentStackedListItemProps, type ContentStackedListProps, CookieBanner, type CookieBannerPosition, type CookieBannerProps, type CosmosToasterProps, DataTable, type DataTableProps, DatePicker, type DatePickerMode, type DatePickerProps, type DateRange, DescriptionList, type DescriptionListItemProps, type DescriptionListProps, Divider, type DividerAlign, type DividerIconProps, type DividerProps, type DividerRowProps, Drawer, type DrawerHeaderProps, type DrawerProps, type DrawerSide, type DrawerSize, Dropdown, type DropdownDivider, type DropdownItem, type DropdownOption, type DropdownProps, Dropzone, type DropzoneProps, EmptyState, type EmptyStateProps, ErrorPage, type ErrorPageProps, ErrorState, type ErrorStateProps, Figure, type FigureAlign, type FigureProps, type FigureRadius, type FigureSize, FileInput, type FileInputProps, type FilterOption, FilterPills, type FilterPillsProps, FormFooter, type FormFooterAlign, type FormFooterProps, FormRow, type FormRowProps, GridList, type GridListCardProps, type GridListCols, type GridListFooterActionProps, type GridListFooterProps, type GridListProps, HealthBadge, type HealthBadgeProps, HealthDot, type HealthDotProps, type HealthStatus, HelpOverlay, type HelpOverlayProps, type HelpOverlaySectionProps, type HelpOverlayShortcutProps, IconBox, type IconBoxProps, type IconBoxSize, ImageGrid, type ImageGridColumns, type ImageGridGap, type ImageGridProps, Input, type InputProps, Kbd, type KbdProps, type KbdSize, KpiCard, type KpiCardProps, Link, type LinkProps, type LinkVariant, List, type ListItemProps, type ListMarker, type ListOrientation, type ListProps, type ListSpacing, type ListVariant, LoadingState, type LoadingStateProps, MediaObject, type MediaObjectAlign, type MediaObjectBodyProps, type MediaObjectImageProps, type MediaObjectPosition, type MediaObjectProps, MiniCalendar, type MiniCalendarProps, Modal, type ModalAlertIntent, type ModalAlertLayout, type ModalAlertProps, type ModalHeaderProps, type ModalProps, type ModalSize, NarrowStackedList, type NarrowStackedListHeaderProps, type NarrowStackedListItemProps, type NarrowStackedListProps, Navbar, type NavbarItemProps, type NavbarMobileMenuButtonProps, type NavbarProps, type NavbarTheme, NotificationCard, type NotificationCardCondensedProps, type NotificationCardSimpleProps, type NotificationIntent, type NotificationSeverity, NotificationsPanel, type NotificationsPanelContentProps, type NotificationsPanelCountersProps, type NotificationsPanelEmptyProps, type NotificationsPanelFooterProps, type NotificationsPanelHeaderActionProps, type NotificationsPanelHeaderProps, type NotificationsPanelItemProps, type NotificationsPanelListProps, type NotificationsPanelProps, type NotificationsPanelTriggerProps, NumberInput, type NumberInputProps, OptionCard, type OptionCardProps, type OptionItem, OptionPicker, type OptionPickerProps, OtpInput, type OtpInputProps, PageActionButton, type PageActionButtonProps, PageActionIconButton, type PageActionIconButtonProps, type PageActionVariant, PageBreadcrumb, type PageBreadcrumbItem, type PageBreadcrumbProps, PageCard, type PageCardProps, PageHeader, type PageHeaderMetaItemProps, type PageHeaderProps, Pagination, type PaginationProps, type PaginationSize, type PaginationVariant, PaletteCard, type PaletteCardProps, type PaletteMeta, PalettePicker, type PalettePickerProps, type PalettePreview, PasswordInput, type PasswordInputProps, PasswordPolicyChecker, type PasswordPolicyCheckerProps, type PasswordRule, type PlaceholderAvatarOptions, type PlaceholderCoverOptions, Popover, type PopoverContentProps, type PopoverPosition, type PopoverProps, type PopoverTriggerProps, ProgressBar, type ProgressBarIntent, type ProgressBarLabel, type ProgressBarProps, type ProgressBarSize, REFRESH_OPTIONS, Radio, RadioGroup, type RadioGroupOption, type RadioGroupProps, type RadioProps, type RadioSize, RefreshButton, type RefreshButtonProps, type RefreshOption, Ribbon, type RibbonIntent, type RibbonPosition, type RibbonProps, type RibbonShape, RowActionButton, type RowActionButtonProps, STATUS_COLOR, STATUS_PILL, type SaveState, SearchInput, type SearchInputProps, SectionCard, type SectionCardProps, SectionLabel, type SectionLabelProps, type SegmentOption, SegmentedControl, type SegmentedControlProps, Select, SelectInput, type SelectInputOption, type SelectInputProps, type SelectOption, type SelectProps, Shell, type ShellProps, Sidebar, type SidebarGroupProps, type SidebarItemProps, type SidebarProps, type SidebarSectionProps, SimpleRow, type SimpleRowProps, Sk, type SkProps, SkeletonList, type SkeletonListProps, SkeletonTable, type SkeletonTableProps, SkeletonText, type SkeletonTextProps, type SortDirection, Spinner, type SpinnerProps, type SpinnerSize, StackedList, StackedListInCard, type StackedListInCardProps, type StackedListItemProps, type StackedListProps, StatefulSaveButton, type StatefulSaveButtonProps, StatusBadge, type StatusBadgeProps, StatusRow, type StatusRowProps, type StepStatus, Stepper, StepperInput, type StepperInputProps, type StepperOrientation, type StepperProps, StepperRoot, type StepperSize, type StepperStepProps, type StepperVariant, StickyScrollNav, type StickyScrollNavProps, type StickyScrollNavSection, type TabProps, Tabs, type TabsOrientation, type TabsProps, Textarea, type TextareaProps, type TextareaResize, type ThemeMode, ThemeToggle, type ThemeToggleProps, type ThemeToggleSize, ThemeToggleTri, type ThemeToggleTriProps, type ThemeToggleTriSize, TimePicker, type TimePickerProps, Timeline, type TimelineItem, type TimelineProps, type TimelineTone, type TimelineVariant, Toaster, Toggle, type ToggleProps, Tooltip, TooltipHelp, type TooltipPosition, type TooltipProps, type TooltipVariant, Topbar, type TopbarProps, UnsavedIndicator, type UnsavedIndicatorProps, UserMenu, type UserMenuContentProps, type UserMenuHeaderProps, type UserMenuItemProps, type UserMenuItemVariant, type UserMenuProps, type UserMenuTriggerProps, VerticalNavigation, type VerticalNavigationItemProps, type VerticalNavigationProps, type VerticalNavigationSectionProps, VideoEmbed, type VideoEmbedAspect, type VideoEmbedProps, ZoomBar, type ZoomBarProps, defaultPasswordRules, placeholderAvatar, placeholderCover, portalDocsParams, useAutoRefresh };