bruv-ui 0.2.0

package/dist/index.d.ts

@@ -0,0 +1,2881 @@
+import { ClassValue } from 'clsx';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
+import react__default, { ReactNode, ComponentType, ComponentProps, ComponentPropsWithoutRef, forwardRef, ReactElement, MouseEvent, CSSProperties } from 'react';
+import { Button as Button$1 } from '@base-ui/react/button';
+import { Switch } from '@base-ui/react/switch';
+import { Checkbox as Checkbox$1 } from '@base-ui/react/checkbox';
+import { Separator as Separator$1 } from '@base-ui/react/separator';
+export { F as Form, a as FormErrorProps, b as FormFieldProps, c as FormHintProps, d as FormInputProps, e as FormInputSize, f as FormLabelProps, g as FormRootProps, h as FormTextareaProps } from './form-dK_DJRTw.js';
+import { Menu } from '@base-ui/react/menu';
+import * as _base_ui_react from '@base-ui/react';
+import { Dialog as Dialog$1 } from '@base-ui/react/dialog';
+import { ColumnDef, RowSelectionState, Row, TableOptions, Table as Table$1 } from '@tanstack/react-table';
+export { Column, ColumnDef, ColumnFiltersState, Row, RowSelectionState, SortingState, TableOptions } from '@tanstack/react-table';
+import { Progress as Progress$1 } from '@base-ui/react/progress';
+import { Slider as Slider$1 } from '@base-ui/react/slider';
+import { NumberField } from '@base-ui/react/number-field';
+import { ScrollArea as ScrollArea$1 } from '@base-ui/react/scroll-area';
+import { ContextMenu as ContextMenu$1 } from '@base-ui/react/context-menu';
+import { OTPFieldPreview } from '@base-ui/react/otp-field';
+import { Toolbar as Toolbar$1 } from '@base-ui/react/toolbar';
+import { Tooltip as Tooltip$1 } from '@base-ui/react/tooltip';
+import { Popover as Popover$1 } from '@base-ui/react/popover';
+import { AlertDialog as AlertDialog$1 } from '@base-ui/react/alert-dialog';
+import { Accordion as Accordion$1 } from '@base-ui/react/accordion';
+import { Tabs as Tabs$1 } from '@base-ui/react/tabs';
+import { Drawer as Drawer$1 } from '@base-ui/react/drawer';
+import { Command as Command$1 } from 'cmdk';
+import { Toggle as Toggle$1 } from '@base-ui/react/toggle';
+import { ToggleGroup } from '@base-ui/react/toggle-group';
+import { RadioGroup as RadioGroup$1 } from '@base-ui/react/radio-group';
+import { Radio } from '@base-ui/react/radio';
+import '@base-ui/react/field';
+
+declare function cn(...inputs: ClassValue[]): string;
+
+type LinkComponent$1 = ComponentType<{
+    to?: string;
+    href?: string;
+    className?: string;
+    children?: ReactNode;
+}>;
+interface BreadcrumbOption {
+    readonly value: string;
+    readonly label: string;
+    readonly icon?: ReactNode;
+    readonly [key: string]: unknown;
+}
+interface BreadcrumbItem {
+    /** Display label for this segment */
+    readonly label: string;
+    /** Optional icon rendered before the label */
+    readonly icon?: ReactNode;
+    /** Link URL — makes the label a clickable link */
+    readonly href?: string;
+    /** Enable a dropdown selector (ChevronUpDown trigger) */
+    readonly selector?: boolean;
+    /** Options for the selector dropdown */
+    readonly options?: BreadcrumbOption[];
+    /** Callback when a selector option is chosen */
+    readonly onSelect?: (value: string) => void;
+    /** Currently selected value for the selector */
+    readonly value?: string;
+}
+interface BreadcrumbProps {
+    /** Breadcrumb segments */
+    readonly items: BreadcrumbItem[];
+    /** Custom link component (e.g. TanStack Router's Link, Next.js Link). Defaults to <a>. */
+    readonly linkComponent?: LinkComponent$1;
+    readonly className?: string;
+}
+/**
+ * Breadcrumb navigation with support for links, selectors, and icons.
+ *
+ * Each segment can be:
+ * - **Static text** — plain label (last segment, current page)
+ * - **Link** — clickable label that navigates to a parent page
+ * - **Selector** — label + chevron dropdown to switch between siblings
+ *   (e.g. switch repos). The label can also be a link independently.
+ *
+ * Usage:
+ * ```tsx
+ * <Breadcrumb
+ *   items={[
+ *     { label: "Repositories", href: "/repositories" },
+ *     { label: "landing", href: "/repos/landing", selector: true, options: repos, value: "landing" },
+ *     { label: "Settings" },
+ *   ]}
+ * />
+ * ```
+ */
+declare function Breadcrumb({ items, linkComponent: LinkEl, className, }: BreadcrumbProps): react_jsx_runtime.JSX.Element;
+
+declare const variantConfig$2: {
+    readonly primary: {
+        readonly active: true;
+        readonly bg: "bg-bruv-inverse";
+        readonly bgClassName: "shadow-xs inset-shadow-bruv-primary group-hover/btn:bg-bruv-inverse/90";
+        readonly text: "text-bruv-inverse";
+    };
+    readonly outline: {
+        readonly active: true;
+        readonly bg: "bg-bruv-base-2";
+        readonly bgClassName: "border border-bruv-neutral shadow-xs group-hover/btn:bg-bruv-subtle group-active/btn:bg-bruv-subtle";
+        readonly text: "text-bruv-primary";
+    };
+    readonly secondary: {
+        readonly active: true;
+        readonly bg: "bg-bruv-subtle";
+        readonly bgClassName: "group-hover/btn:bg-bruv-subtle/70";
+        readonly text: "text-bruv-primary";
+    };
+    readonly transparent: {
+        readonly active: false;
+        readonly bg: "";
+        readonly bgClassName: "group-hover/btn:bg-bruv-subtle group-active/btn:bg-bruv-subtle";
+        readonly text: "text-bruv-secondary";
+    };
+    readonly danger: {
+        readonly active: true;
+        readonly bg: "bg-bruv-danger";
+        readonly bgClassName: "border border-bruv-danger shadow-xs group-hover/btn:bg-bruv-danger-strong group-active/btn:bg-bruv-danger-strong";
+        readonly text: "text-bruv-danger-on";
+    };
+    readonly "danger-light": {
+        readonly active: true;
+        readonly bg: "bg-bruv-danger-subtle";
+        readonly bgClassName: "group-hover/btn:bg-bruv-danger/30 group-active/btn:bg-bruv-danger/50";
+        readonly text: "text-bruv-danger";
+    };
+};
+declare const sizeStyles$c: {
+    readonly xs: {
+        readonly height: "h-6";
+        readonly padding: "px-1.5";
+        readonly textPadding: "px-1";
+        readonly icon: "w-6";
+    };
+    readonly sm: {
+        readonly height: "h-7";
+        readonly padding: "px-1.5";
+        readonly textPadding: "px-1";
+        readonly icon: "w-7";
+    };
+    readonly md: {
+        readonly height: "h-8";
+        readonly padding: "px-2";
+        readonly textPadding: "px-1";
+        readonly icon: "w-8";
+    };
+};
+type ButtonVariant = keyof typeof variantConfig$2;
+type ButtonSize = keyof typeof sizeStyles$c;
+interface ButtonProps extends ComponentProps<typeof Button$1> {
+    /** Visual style variant */
+    variant?: ButtonVariant;
+    /** Size of the button */
+    size?: ButtonSize;
+    /** Icon element rendered before the label */
+    iconLeft?: ReactNode;
+    /** Icon element rendered after the label */
+    iconRight?: ReactNode;
+    /** Free-form content rendered after the label, before iconRight */
+    trailing?: ReactNode;
+    /** Show a loading spinner overlay */
+    loading?: boolean;
+}
+/**
+ * Button component built on Base UI with Tailwind CSS styling.
+ *
+ * All variants use an animated hover layer for consistent press/hover
+ * feedback. The layer handles bg, border, and shadow - the outer button
+ * is just a layout shell.
+ */
+declare const Button: react.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & react.RefAttributes<HTMLElement>>;
+
+interface HoverGroupProps {
+    children: ReactNode;
+    /** Background class for the sliding pill */
+    background?: string;
+    /** Border radius class for the sliding pill */
+    borderRadius?: string;
+    className?: string;
+}
+declare function HoverGroup({ children, background, borderRadius, className, }: HoverGroupProps): react_jsx_runtime.JSX.Element;
+interface HoverProps extends Omit<ComponentProps<"div">, "children"> {
+    children: ReactNode;
+    /** Force the hover background visible (e.g. active/selected state) */
+    active?: boolean;
+    /** Background class applied to the hover layer */
+    background?: string;
+    /** Additional classes on the animated background layer (border, shadow, hover color shifts, etc.) */
+    backgroundClassName?: string;
+    /** Border radius class */
+    borderRadius?: string;
+    /** Enable focus ring */
+    focus?: boolean;
+    /** Enable active/press shrink effect */
+    interactive?: boolean;
+    /** When true, hover bg appears instantly (no opacity/inset transition).
+     *  Only the press effect (inset shrink) animates. Useful for menus. */
+    instantHover?: boolean;
+    /** Disable all hover/focus effects */
+    disabled?: boolean;
+    /** Stretch to full width */
+    fullWidth?: boolean;
+}
+/**
+ * Animated hover/focus wrapper.
+ *
+ * **Standalone**: renders an absolutely-positioned background layer behind its
+ * children that transitions in on hover/focus. On press, the background shrinks
+ * by 1px on all sides.
+ *
+ * **Inside Hover.Group**: registers for the shared sliding hover pill.
+ * When `active`, renders its own static background with the press inset
+ * effect (same as standalone active state). The group pill handles hover.
+ */
+declare function Hover({ children, active, background, backgroundClassName, borderRadius, focus, interactive, instantHover, disabled, fullWidth, className, ...rest }: HoverProps): react_jsx_runtime.JSX.Element;
+
+declare const sizeStyles$b: {
+    readonly sm: {
+        readonly track: "w-9 h-5";
+        readonly thumb: "h-4 w-4 group-active/toggle:w-5";
+    };
+    readonly md: {
+        readonly track: "w-11 h-6";
+        readonly thumb: "h-5 w-5 group-active/toggle:w-6";
+    };
+};
+type ToggleSize = keyof typeof sizeStyles$b;
+interface ToggleProps extends ComponentPropsWithoutRef<typeof Switch.Root> {
+    /** Size of the toggle. */
+    size?: ToggleSize;
+}
+/**
+ * Toggle switch component built on Base UI Switch with Tailwind CSS styling.
+ */
+declare const Toggle: react.ForwardRefExoticComponent<ToggleProps & react.RefAttributes<HTMLButtonElement>>;
+
+declare const sizeStyles$a: {
+    readonly sm: {
+        readonly root: "size-4 rounded-[4px]";
+        readonly icon: "size-3";
+        readonly label: "text-bruv-sm";
+    };
+    readonly md: {
+        readonly root: "size-[18px] rounded-[5px]";
+        readonly icon: "size-3.5";
+        readonly label: "text-bruv-base";
+    };
+};
+type CheckboxSize = keyof typeof sizeStyles$a;
+interface CheckboxProps extends ComponentPropsWithoutRef<typeof Checkbox$1.Root> {
+    /** Size of the checkbox. */
+    size?: CheckboxSize;
+    /** Optional label rendered beside the checkbox. */
+    label?: ReactNode;
+}
+/**
+ * Checkbox component built on Base UI Checkbox with Tailwind CSS styling.
+ *
+ * Supports controlled/uncontrolled usage, indeterminate state, disabled
+ * state, and an optional label. The label is clickable and toggles the
+ * checkbox. An expanded hit area (32px) makes the checkbox easier to click.
+ *
+ * Checked state uses accent color. Indeterminate state uses neutral gray
+ * to visually distinguish it from a deliberate selection.
+ */
+declare const Checkbox: react.ForwardRefExoticComponent<CheckboxProps & react.RefAttributes<HTMLButtonElement>>;
+
+declare const sizeStyles$9: {
+    readonly sm: "size-6";
+    readonly md: "size-7";
+};
+type ColorPickerSize = keyof typeof sizeStyles$9;
+interface ColorPickerOption {
+    readonly value: string;
+    readonly label: string;
+    readonly color: string;
+}
+interface ColorPickerProps {
+    readonly options: readonly ColorPickerOption[];
+    readonly label?: string;
+    readonly value?: string;
+    readonly defaultValue?: string;
+    readonly onValueChange?: (value: string) => void;
+    readonly size?: ColorPickerSize;
+    readonly className?: string;
+    readonly disabled?: boolean;
+    readonly "aria-label"?: string;
+}
+declare const ColorPicker: react.ForwardRefExoticComponent<ColorPickerProps & react.RefAttributes<HTMLDivElement>>;
+
+declare const variantStyles$1: {
+    readonly default: "bg-bruv-base-1 rounded-bruv-lg shadow-xs ring-1 ring-bruv-neutral";
+    readonly nested: "bg-bruv-base-2 rounded-bruv-sm shadow-sm ring-1 ring-bruv-neutral/50";
+};
+type CardVariant = keyof typeof variantStyles$1;
+interface CardProps {
+    /** Visual style variant */
+    variant?: CardVariant;
+    className?: string;
+    children: ReactNode;
+}
+interface CardContentProps {
+    className?: string;
+    children: ReactNode;
+}
+interface CardHeaderProps {
+    className?: string;
+    children: ReactNode;
+}
+interface CardBodyProps {
+    className?: string;
+    children: ReactNode;
+}
+interface CardSectionProps {
+    className?: string;
+    children: ReactNode;
+}
+/**
+ * Inner wrapper that provides consistent padding inside a Card.
+ * Put Card.Header, Card.Body, nested Cards, etc. inside this.
+ */
+declare const CardContent: react.ForwardRefExoticComponent<CardContentProps & react.RefAttributes<HTMLDivElement>>;
+declare const CardHeader: react.ForwardRefExoticComponent<CardHeaderProps & react.RefAttributes<HTMLDivElement>>;
+declare const CardBody: react.ForwardRefExoticComponent<CardBodyProps & react.RefAttributes<HTMLDivElement>>;
+declare const CardSection: react.ForwardRefExoticComponent<CardSectionProps & react.RefAttributes<HTMLDivElement>>;
+/**
+ * Card compound component.
+ *
+ * Use Card.Content as the first child to get consistent inner padding,
+ * then place Card.Header, Card.Body, Card.Section, or nested Cards inside it.
+ */
+declare const Card$1: ReturnType<typeof forwardRef<HTMLDivElement, CardProps>> & {
+    Content: typeof CardContent;
+    Header: typeof CardHeader;
+    Body: typeof CardBody;
+    Section: typeof CardSection;
+};
+
+declare const sizeStyles$8: {
+    readonly sm: "h-7 px-1.5";
+    readonly md: "h-8 px-1.5";
+};
+type NavLinkSize = keyof typeof sizeStyles$8;
+interface NavLinksProps {
+    className?: string;
+    children: ReactNode;
+}
+interface NavLinkProps {
+    /** Whether this link is the currently active/selected item */
+    active?: boolean;
+    /** Optional icon rendered before the label */
+    icon?: ReactNode;
+    /** When provided, renders an <a> tag instead of <button> */
+    href?: string;
+    /** Click handler */
+    onClick?: () => void;
+    /** Size of the nav link */
+    size?: NavLinkSize;
+    className?: string;
+    children: ReactNode;
+}
+/**
+ * Container for a horizontal group of navigation links.
+ *
+ * Wraps children in a HoverGroup so the sliding indicator
+ * is shared across all NavLink items.
+ */
+declare function NavLinks({ className, children }: NavLinksProps): react_jsx_runtime.JSX.Element;
+/**
+ * Individual navigation link item.
+ *
+ * Inside a NavLinks (HoverGroup), automatically gets the shared sliding
+ * indicator on hover and a press shrink effect on click.
+ * Renders a `<button>` by default - when `href` is provided,
+ * renders an `<a>` tag instead.
+ */
+declare function NavLink({ active, icon, href, onClick, size, className, children, }: NavLinkProps): react_jsx_runtime.JSX.Element;
+
+type AvatarVariant = "circle" | "square";
+type AvatarSize = "xs" | "sm" | "md" | "lg" | "xl";
+type AvatarColor = "neutral" | "accent" | "danger" | "warn" | "success";
+type AvatarGenerativePattern = "grid" | "symmetric" | "dense" | "quad" | "quad-dense" | "diagonal" | "sierpinski";
+interface AvatarProps {
+    /** Image URL */
+    src?: string;
+    /** Fallback initials (1-2 characters) */
+    initials?: string;
+    /**
+     * Seed string for generative pixel-grid fallback.
+     * Used when no `src` or `initials` are provided.
+     * Each seed produces a unique deterministic pattern and color.
+     */
+    seed?: string;
+    /**
+     * Pattern variant for the generative fallback.
+     * Only used when rendering from `seed`.
+     */
+    generativePattern?: AvatarGenerativePattern;
+    /** Alt text for the image */
+    alt?: string;
+    /** Shape variant */
+    variant?: AvatarVariant;
+    /** Size */
+    size?: AvatarSize;
+    /** Color preset — automatically sets matching background and text color */
+    color?: AvatarColor;
+    className?: string;
+}
+/**
+ * Avatar component with image, initials, or generative pixel-grid fallback.
+ *
+ * Fallback priority: `src` > `initials` > `seed` (generative) > empty
+ *
+ * - `circle` variant for users (fully rounded)
+ * - `square` variant for organizations/workspaces (rounded corners)
+ */
+declare const Avatar: react.ForwardRefExoticComponent<AvatarProps & react.RefAttributes<HTMLElement>>;
+
+type LinkComponent = ComponentType<{
+    to?: string;
+    href?: string;
+    className?: string;
+    children?: ReactNode;
+}>;
+interface AppHeaderProps {
+    children: ReactNode;
+    className?: string;
+}
+interface AppHeaderBreadcrumbProps {
+    items: BreadcrumbItem[];
+    /** Optional leading logo/mark rendered before the first breadcrumb segment. */
+    logo?: ReactNode;
+    /** Optional href the logo links to. Defaults to "/". */
+    logoHref?: string;
+    /** Custom link component (e.g. TanStack Router's Link, Next.js Link, etc.). Defaults to <a>. */
+    linkComponent?: LinkComponent;
+    className?: string;
+}
+interface AppHeaderActionsProps {
+    children: ReactNode;
+    className?: string;
+}
+/**
+ * AppHeader breadcrumb — optionally renders a leading logo link followed by
+ * breadcrumb segments. Delegates to the standalone Breadcrumb component for
+ * segment rendering.
+ */
+declare function AppHeaderBreadcrumb({ items, logo, logoHref, linkComponent: LinkEl, className, }: AppHeaderBreadcrumbProps): react_jsx_runtime.JSX.Element;
+declare const AppHeaderActions: react.ForwardRefExoticComponent<AppHeaderActionsProps & react.RefAttributes<HTMLDivElement>>;
+declare const AppHeader: ReturnType<typeof forwardRef<HTMLElement, AppHeaderProps>> & {
+    Breadcrumb: typeof AppHeaderBreadcrumb;
+    Actions: typeof AppHeaderActions;
+    Avatar: typeof Avatar;
+};
+
+interface SettingsCardProps {
+    /** Title displayed in the card header */
+    title?: string;
+    /** Description displayed below the title */
+    description?: string;
+    /**
+     * When true, renders a Toggle in the header. Toggling it on disables (mutes)
+     * the card's rows - useful for "Use Organization Settings" patterns.
+     */
+    toggle?: boolean;
+    /** Controlled toggle state */
+    toggled?: boolean;
+    /** Callback when toggle state changes */
+    onToggleChange?: (toggled: boolean) => void;
+    /** Initial toggle state for uncontrolled usage */
+    defaultToggled?: boolean;
+    /** Settings rows or other content */
+    children: ReactNode;
+    className?: string;
+}
+/**
+ * A specialized card for settings pages. Uses the Card component internally
+ * with an optional header and a nested card for the settings rows.
+ *
+ * Pass `toggle` to show a toggle in the header. When toggled on, the child
+ * rows are visually disabled (muted + non-interactive).
+ */
+declare const SettingsCard: react.ForwardRefExoticComponent<SettingsCardProps & react.RefAttributes<HTMLDivElement>>;
+interface SettingsRowRootProps extends ComponentProps<"div"> {
+    children: ReactNode;
+}
+interface SettingsRowHeaderProps {
+    className?: string;
+    children: ReactNode;
+}
+interface SettingsRowLabelProps {
+    className?: string;
+    children: ReactNode;
+}
+interface SettingsRowDescriptionProps {
+    className?: string;
+    children: ReactNode;
+}
+interface SettingsRowControlProps {
+    className?: string;
+    children: ReactNode;
+}
+interface SettingsRowActionProps {
+    className?: string;
+    children: ReactNode;
+}
+interface SettingsRowContentProps {
+    className?: string;
+    children: ReactNode;
+}
+/**
+ * Composable settings row for use inside `SettingsCard`.
+ *
+ * ```tsx
+ * <SettingsRow.Root>
+ *   <SettingsRow.Header>
+ *     <div>
+ *       <SettingsRow.Label>Language</SettingsRow.Label>
+ *       <SettingsRow.Description>
+ *         Set the language for reviews.
+ *       </SettingsRow.Description>
+ *     </div>
+ *     <SettingsRow.Control>
+ *       <Select />
+ *     </SettingsRow.Control>
+ *   </SettingsRow.Header>
+ * </SettingsRow.Root>
+ *
+ * // With content below
+ * <SettingsRow.Root>
+ *   <SettingsRow.Header>
+ *     <div>
+ *       <SettingsRow.Label>Instructions</SettingsRow.Label>
+ *       <SettingsRow.Description>
+ *         Custom review instructions.
+ *       </SettingsRow.Description>
+ *     </div>
+ *     <SettingsRow.Action>
+ *       <Button>Add</Button>
+ *     </SettingsRow.Action>
+ *   </SettingsRow.Header>
+ *   <SettingsRow.Content>
+ *     <Textarea />
+ *   </SettingsRow.Content>
+ * </SettingsRow.Root>
+ * ```
+ */
+declare const SettingsRow: {
+    Root: react.ForwardRefExoticComponent<Omit<SettingsRowRootProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+    Header: react.ForwardRefExoticComponent<SettingsRowHeaderProps & react.RefAttributes<HTMLDivElement>>;
+    Label: react.ForwardRefExoticComponent<SettingsRowLabelProps & react.RefAttributes<HTMLDivElement>>;
+    Description: react.ForwardRefExoticComponent<SettingsRowDescriptionProps & react.RefAttributes<HTMLDivElement>>;
+    Control: react.ForwardRefExoticComponent<SettingsRowControlProps & react.RefAttributes<HTMLDivElement>>;
+    Action: react.ForwardRefExoticComponent<SettingsRowActionProps & react.RefAttributes<HTMLDivElement>>;
+    Content: react.ForwardRefExoticComponent<SettingsRowContentProps & react.RefAttributes<HTMLDivElement>>;
+};
+
+interface PageLayoutHeaderProps extends ComponentProps<"div"> {
+}
+interface PageLayoutBodyProps extends ComponentProps<"div"> {
+}
+interface PageLayoutProps {
+    /** Sidebar content */
+    readonly sidebar?: ReactNode;
+    readonly className?: string;
+    readonly children: ReactNode;
+}
+/**
+ * Full-page layout shell with a sidebar and content area.
+ *
+ * Structure: sidebar (fixed width) + content panel (flex-1).
+ * The content panel renders as a rounded card on bg-bruv-base-0.
+ */
+declare const PageLayout: react.ForwardRefExoticComponent<PageLayoutProps & react.RefAttributes<HTMLDivElement>> & {
+    Header: react.ForwardRefExoticComponent<Omit<PageLayoutHeaderProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+    Body: react.ForwardRefExoticComponent<Omit<PageLayoutBodyProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+};
+
+type SidebarLinkComponent = ComponentType<{
+    readonly to?: string;
+    readonly href?: string;
+    readonly className?: string;
+    readonly children?: ReactNode;
+}>;
+interface SidebarContextValue {
+    readonly collapsed: boolean;
+    readonly toggle: () => void;
+    readonly linkComponent?: SidebarLinkComponent;
+    readonly mobile: boolean;
+    readonly mobileOpen: boolean;
+    readonly setMobileOpen: (open: boolean) => void;
+}
+declare function useSidebar(): SidebarContextValue;
+
+interface SidebarProviderProps {
+    /** Start in collapsed state (uncontrolled) */
+    readonly defaultCollapsed?: boolean;
+    /** Controlled collapsed state */
+    readonly collapsed?: boolean;
+    /** Callback when collapsed state changes (controlled mode) */
+    readonly onCollapsedChange?: (collapsed: boolean) => void;
+    /** Custom link component for client-side navigation */
+    readonly linkComponent?: SidebarLinkComponent;
+    readonly children: ReactNode;
+}
+/**
+ * Context-only provider for sidebar state — no visual output.
+ *
+ * Wrap your entire page layout with this when you need `useSidebar()`
+ * outside the visual `<Sidebar>` container (e.g. in the page header
+ * or in portaled components).
+ *
+ * When `<Sidebar>` is rendered inside a `<Sidebar.Provider>`, it
+ * skips creating its own context and uses the provider's state.
+ *
+ * ```tsx
+ * <Sidebar.Provider collapsed={collapsed} onCollapsedChange={setCollapsed}>
+ *   <PageLayout sidebar={<Sidebar>...</Sidebar>}>
+ *     <MyHeader />
+ *   </PageLayout>
+ * </Sidebar.Provider>
+ * ```
+ */
+declare function SidebarProvider({ defaultCollapsed, collapsed: controlledCollapsed, onCollapsedChange, linkComponent, children, }: SidebarProviderProps): react_jsx_runtime.JSX.Element;
+interface SidebarRootProps {
+    /** Start in collapsed state (uncontrolled). Ignored when inside a Sidebar.Provider. */
+    readonly defaultCollapsed?: boolean;
+    /** Controlled collapsed state. Ignored when inside a Sidebar.Provider. */
+    readonly collapsed?: boolean;
+    /** Callback when collapsed state changes. Ignored when inside a Sidebar.Provider. */
+    readonly onCollapsedChange?: (collapsed: boolean) => void;
+    /** Custom link component for client-side navigation. Ignored when inside a Sidebar.Provider. */
+    readonly linkComponent?: SidebarLinkComponent;
+    readonly className?: string;
+    readonly children: ReactNode;
+}
+/**
+ * Responsive sidebar with collapsible state and directional layer transitions.
+ *
+ * When rendered inside a `<Sidebar.Provider>`, uses the provider's context
+ * and only renders the visual shell. Otherwise, creates its own context.
+ *
+ * **Desktop** (`md:` and up): renders inline with collapse/expand animation.
+ * **Mobile** (below `md:`): shows collapsed icons inline. Tapping an icon
+ * or the collapse button opens the full sidebar in a left-side Drawer.
+ */
+declare function SidebarRoot({ defaultCollapsed, collapsed: controlledCollapsed, onCollapsedChange, linkComponent, className, children, }: SidebarRootProps): react_jsx_runtime.JSX.Element;
+interface SidebarSectionProps {
+    readonly className?: string;
+    readonly children: ReactNode;
+}
+declare function SidebarSection({ className, children }: SidebarSectionProps): react_jsx_runtime.JSX.Element;
+interface SidebarLabelProps extends ComponentProps<"div"> {
+}
+interface SidebarHeaderProps {
+    readonly className?: string;
+    readonly children: ReactNode;
+}
+/**
+ * Header row that smoothly hides its children when the sidebar collapses.
+ *
+ * Matches the Vue DSidebar header pattern:
+ * - `AnimatePresence mode="popLayout"` keeps CollapseButton stable in layout
+ * - Children slide out with `x: -320, scale: 0.5` spring animation
+ * - Row uses `justify-center` so CollapseButton centers when collapsed
+ * - Padding `px-2` only applied when expanded
+ *
+ * Usage:
+ * ```tsx
+ * <Sidebar.Header>
+ *   <YourLogo />
+ *   <span>Your App</span>
+ * </Sidebar.Header>
+ * ```
+ * The `CollapseButton` is rendered automatically at the end of the row.
+ */
+declare function SidebarHeader({ className, children }: SidebarHeaderProps): react_jsx_runtime.JSX.Element;
+interface SidebarLinkProps extends Omit<ComponentProps<"div">, "children"> {
+    /** Display name */
+    readonly name: string;
+    /** Link URL — renders via `linkComponent` (or native `<a>` if none provided) */
+    readonly href?: string;
+    /** Render as "div" when nested inside an interactive container (e.g. DropdownMenu.Trigger) to avoid nested `<button>` */
+    readonly as?: "div";
+    /** Whether this link is currently active */
+    readonly active?: boolean;
+    /** Icon component rendered before the name */
+    readonly icon?: ReactNode;
+    /** Show a trailing chevron indicating navigation to a nested layer */
+    readonly nested?: boolean;
+    /** Show an external link arrow and open in new tab */
+    readonly external?: boolean;
+    /** Show a pulsing activity indicator dot */
+    readonly showIndicator?: boolean;
+    /** Arbitrary trailing content rendered after the name (e.g. badges, lock icons) */
+    readonly trailing?: ReactNode;
+    /** Disable the link — reduces opacity and prevents clicks */
+    readonly disabled?: boolean;
+    /** Show a skeleton placeholder instead of the link content */
+    readonly loading?: boolean;
+    /** Click handler */
+    readonly onClick?: () => void;
+}
+declare function SidebarLink({ name, href, as, active, icon, nested, external, showIndicator, trailing, disabled, loading, onClick, className, ...rest }: SidebarLinkProps): react_jsx_runtime.JSX.Element;
+interface SidebarBackLinkProps {
+    /** Display name */
+    readonly name: string;
+    /** Click handler */
+    readonly onClick?: () => void;
+    readonly className?: string;
+}
+declare function SidebarBackLink({ name, onClick, className }: SidebarBackLinkProps): react_jsx_runtime.JSX.Element;
+interface SidebarCollapseButtonProps {
+    readonly className?: string;
+}
+declare function SidebarCollapseButton({ className }: SidebarCollapseButtonProps): react_jsx_runtime.JSX.Element;
+interface SidebarLayersProps {
+    /** Unique key for the current layer — changes trigger the animation */
+    readonly activeKey: string;
+    /** Direction of the transition: forward drills in, back goes up */
+    readonly direction?: "forward" | "back";
+    readonly className?: string;
+    readonly children: ReactNode;
+}
+/**
+ * Wraps sidebar content in directional slide animations.
+ *
+ * When `activeKey` changes, the old content slides out and new content
+ * slides in. `direction="forward"` slides left (drilling in),
+ * `direction="back"` slides right (going up).
+ *
+ * Usage:
+ * ```tsx
+ * <Sidebar.Layers activeKey={currentSection} direction={navDirection}>
+ *   {currentSection === "main" ? <MainNav /> : <SettingsNav />}
+ * </Sidebar.Layers>
+ * ```
+ */
+declare function SidebarLayers({ activeKey, direction, className, children, }: SidebarLayersProps): react_jsx_runtime.JSX.Element;
+interface SidebarGroupProps {
+    /** Group label */
+    readonly name: string;
+    /** Icon rendered before the label */
+    readonly icon?: ReactNode;
+    /** Whether a child link is currently active — makes the label bold */
+    readonly active?: boolean;
+    /** Start collapsed */
+    readonly defaultCollapsed?: boolean;
+    /** Called when the group header is clicked (in addition to toggling collapse) */
+    readonly onClick?: () => void;
+    /** Nested links rendered when expanded */
+    readonly children: ReactNode;
+    readonly className?: string;
+}
+declare function SidebarGroup({ name, icon, active, defaultCollapsed, onClick, children, className, }: SidebarGroupProps): react_jsx_runtime.JSX.Element;
+declare const Sidebar: typeof SidebarRoot & {
+    Provider: typeof SidebarProvider;
+    Section: typeof SidebarSection;
+    Header: typeof SidebarHeader;
+    Label: react.ForwardRefExoticComponent<Omit<SidebarLabelProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+    Link: typeof SidebarLink;
+    BackLink: typeof SidebarBackLink;
+    CollapseButton: typeof SidebarCollapseButton;
+    Layers: typeof SidebarLayers;
+    Group: typeof SidebarGroup;
+};
+
+type PixelSpinnerVariant = 
+/** One dim cell rotates around a bright ring; center bright */
+"hole"
+/** Trail of 5 fading cells chases around the ring; center dim */
+ | "trail"
+/** Diagonal wave sweeps from top-left to bottom-right */
+ | "wave"
+/** Rings expand outward: center to middle to corners, repeating */
+ | "radiate"
+/** All cells pulse together */
+ | "pulse"
+/** All cells flicker independently (TV static) */
+ | "static";
+type PixelSpinnerSize = "xs" | "sm" | "md" | "lg";
+interface PixelSpinnerProps {
+    /** Animation variant */
+    variant?: PixelSpinnerVariant;
+    /**
+     * Size preset or raw px value.
+     * Presets: `xs` = 10px, `sm` = 14px, `md` = 20px, `lg` = 32px.
+     * Default is `xs`.
+     */
+    size?: PixelSpinnerSize | number;
+    /** Gap between pixels as a fraction of pixel size (0-1). Default 0.25. */
+    gap?: number;
+    /** Cycle duration in seconds. Default 1.2. */
+    duration?: number;
+    className?: string;
+}
+/**
+ * A 3x3 pixel-grid spinner with configurable animation variants.
+ *
+ * All 9 cells render; the `variant` controls how they animate:
+ *
+ * - `hole`     One dim cell rotates around a bright ring (center bright)
+ * - `trail`    A fading 5-cell trail chases around the ring
+ * - `wave`     Anti-diagonal wave sweeps top-left to bottom-right
+ * - `radiate`  Rings expand outward: center to edges to corners
+ * - `pulse`    All cells breathe together with a subtle ripple
+ * - `static`   Cells flicker independently (TV static)
+ */
+declare function PixelSpinner({ variant, size, gap, duration, className, }: PixelSpinnerProps): react_jsx_runtime.JSX.Element;
+
+interface SpinnerProps {
+    /** Text label shown next to the spinner. */
+    label?: string;
+    /** Show the animated dots after the label. */
+    showDots?: boolean;
+    /** Show the pixel spinner glyph. */
+    showSpinner?: boolean;
+    /** Size variant. */
+    size?: "sm" | "md";
+    /** Animation variant for the pixel spinner. Defaults to `wave`. */
+    variant?: PixelSpinnerVariant;
+    className?: string;
+}
+/**
+ * Text loading indicator with a 3x3 pixel spinner and animated dots.
+ *
+ * Uses `PixelSpinner` for the animated glyph and a CSS animation to cycle
+ * an animated dots suffix on the label text.
+ */
+declare const Spinner: react.ForwardRefExoticComponent<SpinnerProps & react.RefAttributes<HTMLSpanElement>>;
+
+interface ComboboxItem {
+    readonly value: string;
+    readonly label: string;
+    readonly icon?: ReactNode;
+    readonly [key: string]: unknown;
+}
+interface ComboboxProps {
+    /** Controlled value */
+    readonly value?: string;
+    /** Uncontrolled default value */
+    readonly defaultValue?: string;
+    /** Called when a value is selected */
+    readonly onValueChange?: (value: string) => void;
+    /** Item data for filtering and rendering */
+    readonly items: ComboboxItem[];
+    readonly children: ReactNode;
+    readonly className?: string;
+}
+/**
+ * Searchable combobox with filtering.
+ *
+ * Wraps Base UI Combobox.Root with shared Menu visual primitives.
+ * For non-searchable dropdowns, use Select instead.
+ *
+ * Supports both controlled (`value` + `onValueChange`)
+ * and uncontrolled (`defaultValue`) usage.
+ */
+declare function Combobox({ value, defaultValue, onValueChange, items, children, className, }: ComboboxProps): ReactElement;
+interface ComboboxTriggerProps {
+    children: ReactNode;
+    className?: string;
+}
+/**
+ * Fully composable trigger. Renders whatever children you give it as the
+ * element that opens the combobox popup.
+ *
+ * Use ComboboxButton for button-based triggers so BaseCombobox.Trigger does
+ * not wrap a Button in another native button.
+ */
+declare const ComboboxTrigger: react.ForwardRefExoticComponent<ComboboxTriggerProps & react.RefAttributes<HTMLButtonElement>>;
+interface ComboboxButtonProps {
+    /** Placeholder text shown when no value is selected */
+    placeholder?: string;
+    /** Size of the button */
+    size?: ButtonSize;
+    className?: string;
+}
+/**
+ * Pre-styled trigger for form contexts.
+ * Renders as a Button with the selected value + chevron icon.
+ * For fully custom triggers, use ComboboxTrigger instead.
+ */
+declare const ComboboxButton: react.ForwardRefExoticComponent<ComboboxButtonProps & react.RefAttributes<HTMLButtonElement>>;
+interface ComboboxContentProps {
+    /** Alignment relative to trigger */
+    align?: "start" | "center" | "end";
+    /** Placeholder text for the search input */
+    searchPlaceholder?: string;
+    /** Empty state message */
+    emptyMessage?: string;
+    /** Minimum width of the popup */
+    minWidth?: string;
+    /**
+     * Render function for each item. Receives a ComboboxItem and should return
+     * a ComboboxOption element. When not provided, renders a default option
+     * with optional icon + label + checkmark.
+     */
+    children?: (item: ComboboxItem) => ReactNode;
+    className?: string;
+}
+/**
+ * Popup with search input and a scrollable list of filtered options.
+ * Uses Base UI's render function pattern for automatic filtering.
+ */
+declare function ComboboxContent({ align, searchPlaceholder, emptyMessage, minWidth, children, className, }: ComboboxContentProps): ReactElement;
+interface ComboboxOptionProps {
+    /** Value for this option */
+    readonly value: string;
+    /** Icon element rendered before the label */
+    readonly icon?: ReactNode;
+    readonly children: ReactNode;
+    readonly className?: string;
+}
+/**
+ * Individual option in the combobox popup.
+ * Automatically includes a checkmark indicator when selected.
+ */
+declare const ComboboxOption: react.ForwardRefExoticComponent<ComboboxOptionProps & react.RefAttributes<HTMLDivElement>>;
+interface ComboboxGroupProps {
+    readonly className?: string;
+    readonly children: ReactNode;
+}
+/**
+ * Groups related combobox items with an optional label.
+ * Wraps Base UI's Combobox.Group.
+ */
+declare const ComboboxGroup: react.ForwardRefExoticComponent<ComboboxGroupProps & react.RefAttributes<HTMLDivElement>>;
+interface ComboboxGroupLabelProps {
+    readonly className?: string;
+    readonly children: ReactNode;
+}
+/**
+ * Accessible label automatically associated with its parent group.
+ * Renders via Menu.GroupLabel for consistent styling.
+ */
+declare const ComboboxGroupLabel: react.ForwardRefExoticComponent<ComboboxGroupLabelProps & react.RefAttributes<HTMLDivElement>>;
+interface ComboboxSeparatorProps {
+    readonly className?: string;
+}
+/**
+ * Visual separator between combobox groups.
+ * Renders via Menu.Separator for consistent styling.
+ */
+declare const ComboboxSeparator: react.ForwardRefExoticComponent<ComboboxSeparatorProps & react.RefAttributes<HTMLDivElement>>;
+
+interface SelectItem {
+    value: string;
+    label: string;
+    icon?: ReactNode;
+    [key: string]: unknown;
+}
+interface SelectProps {
+    /** Controlled value */
+    value?: string;
+    /** Uncontrolled default value */
+    defaultValue?: string;
+    /** Called when a value is selected */
+    onValueChange?: (value: string) => void;
+    /** Item data for rendering and value display */
+    items: SelectItem[];
+    /** Whether the select is disabled */
+    disabled?: boolean;
+    children: ReactNode;
+    className?: string;
+}
+/**
+ * Select component for choosing from a list of predefined options.
+ *
+ * For searchable/filterable lists, use Combobox instead.
+ *
+ * Wraps Base UI Select.Root with shared Menu visual primitives.
+ */
+declare function Select({ value, defaultValue, onValueChange, items, disabled, children, className, }: SelectProps): ReactElement;
+interface SelectTriggerProps {
+    children: ReactNode;
+    className?: string;
+}
+/**
+ * Fully composable trigger. Renders whatever children you give it as the
+ * element that opens the select popup.
+ */
+declare const SelectTrigger: react.ForwardRefExoticComponent<SelectTriggerProps & react.RefAttributes<HTMLButtonElement>>;
+interface SelectButtonProps {
+    /** Placeholder text shown when no value is selected */
+    placeholder?: string;
+    /** Size of the button */
+    size?: ButtonSize;
+    className?: string;
+}
+/**
+ * Pre-styled trigger for form contexts.
+ * Renders as a Button with the selected value + chevron icon.
+ */
+declare const SelectButton: react.ForwardRefExoticComponent<SelectButtonProps & react.RefAttributes<HTMLButtonElement>>;
+interface SelectContentProps {
+    /** Alignment relative to trigger */
+    align?: "start" | "center" | "end";
+    /** Side relative to the trigger */
+    side?: "top" | "bottom" | "left" | "right";
+    /** Offset from the trigger in px */
+    sideOffset?: number;
+    /** Minimum width */
+    minWidth?: string;
+    /** SelectOption elements */
+    children?: ReactNode;
+    className?: string;
+}
+/**
+ * Popup with a scrollable list of options.
+ * Uses Base UI Select primitives with shared Menu visuals.
+ */
+declare function SelectContent({ align, side, sideOffset, minWidth, children, className, }: SelectContentProps): ReactElement;
+interface SelectOptionProps {
+    /** Value for this option */
+    value: string;
+    /** Icon element rendered before the label */
+    icon?: ReactNode;
+    children: ReactNode;
+    className?: string;
+}
+/**
+ * Individual option in the select popup.
+ * Automatically includes a checkmark indicator when selected.
+ */
+declare const SelectOption: react.ForwardRefExoticComponent<SelectOptionProps & react.RefAttributes<HTMLDivElement>>;
+interface SelectSeparatorProps {
+    className?: string;
+}
+declare const SelectSeparator: react.ForwardRefExoticComponent<SelectSeparatorProps & react.RefAttributes<HTMLDivElement>>;
+interface SelectGroupProps {
+    className?: string;
+    children: ReactNode;
+}
+declare const SelectGroup: react.ForwardRefExoticComponent<SelectGroupProps & react.RefAttributes<HTMLDivElement>>;
+interface SelectGroupLabelProps {
+    className?: string;
+    children: ReactNode;
+}
+declare const SelectGroupLabel: react.ForwardRefExoticComponent<SelectGroupLabelProps & react.RefAttributes<HTMLDivElement>>;
+
+interface SeparatorProps extends ComponentProps<typeof Separator$1> {
+    orientation?: "horizontal" | "vertical";
+}
+declare const Separator: react.ForwardRefExoticComponent<Omit<SeparatorProps, "ref"> & react.RefAttributes<HTMLHRElement>>;
+
+declare const filledVariantStyles: {
+    readonly neutral: "bg-bruv-subtle text-bruv-secondary";
+    readonly accent: "bg-bruv-accent-subtle text-bruv-accent";
+    readonly danger: "bg-bruv-danger-subtle text-bruv-danger";
+    readonly warn: "bg-bruv-warn-subtle text-bruv-warn";
+    readonly success: "bg-bruv-success-subtle text-bruv-success";
+};
+declare const sizeStyles$7: {
+    readonly sm: "px-1.5 py-0.5 text-bruv-sm";
+    readonly md: "px-2 py-0.5 text-bruv-base";
+};
+type BadgeVariant = keyof typeof filledVariantStyles;
+type BadgeSize = keyof typeof sizeStyles$7;
+type BadgeDotPosition = "leading" | "trailing";
+interface BadgeProps extends ComponentPropsWithoutRef<"span"> {
+    /** Semantic intent (color). */
+    variant?: BadgeVariant;
+    /** Size of the badge. */
+    size?: BadgeSize;
+    /**
+     * Render with a border instead of a filled (subtle) background.
+     * Border color is bound to the variant's text color so contrast
+     * passes WCAG in both light and dark mode.
+     */
+    border?: boolean;
+    /** Show a status dot whose color follows `variant`. */
+    dot?: boolean;
+    /** Where the dot sits relative to the label. Default `"leading"`. */
+    dotPosition?: BadgeDotPosition;
+    /**
+     * Render a trailing dismiss (×) button and call this on click.
+     * Receives the event so callers can `stopPropagation()` when the
+     * badge sits inside an interactive parent.
+     */
+    onDismiss?: (event: MouseEvent<HTMLButtonElement>) => void;
+    /** Accessible label for the dismiss button. */
+    dismissLabel?: string;
+}
+declare const Badge: react.ForwardRefExoticComponent<BadgeProps & react.RefAttributes<HTMLSpanElement>>;
+
+/**
+ * Returns `true` on macOS / iOS, `false` on Windows / Linux.
+ * SSR-safe (defaults to Mac).
+ */
+declare function useIsMac(): boolean;
+interface KbdProps extends ComponentPropsWithoutRef<"kbd"> {
+    /**
+     * A `+`-separated shortcut string using abstract key names.
+     *
+     * Tokens are mapped per-platform and rendered together
+     * inside a single key cap, separated by spaces:
+     * `"mod+shift+k"` → `⌘ ⇧ K` (Mac) / `Ctrl Shift K` (Win)
+     *
+     * - `mod` → ⌘ (Mac) / Ctrl (Win)
+     * - `alt` → ⌥ (Mac) / Alt (Win)
+     * - `shift` → ⇧ (Mac) / Shift (Win)
+     * - `ctrl` → ⌃ (Mac) / Ctrl (Win)
+     * - `enter`, `escape`, `backspace`, `delete`, `tab`, `space`
+     * - `up`, `down`, `left`, `right`
+     * - Any other token is uppercased as-is.
+     *
+     * @example "mod+k" → ⌘ K (Mac) or Ctrl K (Win)
+     * @example "mod+shift+s" → ⌘ ⇧ S (Mac) or Ctrl Shift S (Win)
+     */
+    keys?: string;
+}
+/**
+ * Renders keyboard keys or shortcuts in a single styled `<kbd>` element.
+ *
+ * When `keys` is provided, parses the `+`-separated string and renders
+ * all tokens inside one key cap with platform-aware symbols.
+ * All tokens are joined with spaces inside one key cap.
+ *
+ * When `children` is provided (without `keys`), renders a single `<kbd>`
+ * with the raw content — useful for one-off custom key caps.
+ */
+declare const Kbd: react.ForwardRefExoticComponent<KbdProps & react.RefAttributes<HTMLElement>>;
+
+interface SkeletonProps {
+    /** Use rounded-full instead of rounded-bruv-md (for avatar placeholders) */
+    circular?: boolean;
+    className?: string;
+}
+/**
+ * Skeleton loading placeholder with a sweeping pixel wave.
+ *
+ * Uses the `sweepOnly` mode of FlickeringGrid: pixels light up purely
+ * based on the sweep wave position, with a per-pixel noise offset
+ * creating a fuzzy, fringing edge on the wave front. No random flicker,
+ * so the effect reads as a single directional motion rather than noise.
+ */
+declare const Skeleton: react.ForwardRefExoticComponent<SkeletonProps & react.RefAttributes<HTMLDivElement>>;
+
+declare const variantStyles: {
+    readonly neutral: "bg-bruv-tertiary";
+    readonly accent: "bg-bruv-accent";
+    readonly success: "bg-bruv-success";
+    readonly warn: "bg-bruv-warn";
+    readonly danger: "bg-bruv-danger";
+};
+declare const sizeStyles$6: {
+    readonly sm: "size-1.5";
+    readonly md: "size-2";
+    readonly lg: "size-2.5";
+};
+type StatusDotVariant = keyof typeof variantStyles;
+type StatusDotSize = keyof typeof sizeStyles$6;
+interface StatusDotProps {
+    /** Color variant */
+    variant?: StatusDotVariant;
+    /** Dot size */
+    size?: StatusDotSize;
+    /** Accessible label (required for meaningful status indicators) */
+    label?: string;
+    className?: string;
+}
+/**
+ * Small circular status indicator dot.
+ *
+ * Use alongside text labels, avatars, or table cells
+ * to convey online/offline, severity, or activity state.
+ */
+declare const StatusDot: react.ForwardRefExoticComponent<StatusDotProps & react.RefAttributes<HTMLSpanElement>>;
+
+interface FlickeringGridProps {
+    /** Size of each square pixel in px */
+    squareSize?: number;
+    /** Gap between squares in px */
+    gridGap?: number;
+    /** Probability per second that a pixel changes opacity (0-1) */
+    flickerChance?: number;
+    /** Pixel color — CSS color string. Use `currentColor` to inherit from text */
+    color?: string;
+    /** Max opacity for any pixel (0-1) */
+    maxOpacity?: number;
+    /**
+     * Enable a sweeping wave of brightness across the grid.
+     * When enabled, pixels near the wave front appear brighter.
+     */
+    sweep?: boolean;
+    /** Sweep direction */
+    sweepDirection?: "left" | "right";
+    /** Duration of one sweep cycle in seconds */
+    sweepDuration?: number;
+    /** Width of the sweep band as a fraction of total width (0-1) */
+    sweepWidth?: number;
+    /**
+     * When true, disables random flicker and drives pixel opacity purely
+     * from the sweep wave. Each pixel gets a fixed noise offset so the
+     * wave front has a fuzzy, fringing edge instead of a clean line.
+     */
+    sweepOnly?: boolean;
+    /**
+     * Magnitude of the per-pixel noise offset (0-1) when `sweepOnly` is true.
+     * Higher values produce fuzzier, more chaotic edges.
+     */
+    sweepNoise?: number;
+    className?: string;
+}
+declare function FlickeringGrid({ squareSize, gridGap, flickerChance, color, maxOpacity, sweep, sweepDirection, sweepDuration, sweepWidth, sweepOnly, sweepNoise, className, }: FlickeringGridProps): react_jsx_runtime.JSX.Element;
+
+interface DropdownMenuRootProps {
+    /** Controlled open state */
+    open?: boolean;
+    /** Uncontrolled default open state */
+    defaultOpen?: boolean;
+    /** Called when open state changes */
+    onOpenChange?: (open: boolean) => void;
+    /** Whether the menu is modal (locks scroll + traps focus). Default true. */
+    modal?: boolean;
+    children: ReactNode;
+}
+declare function DropdownMenuRoot({ open, defaultOpen, onOpenChange, modal, children, }: DropdownMenuRootProps): react_jsx_runtime.JSX.Element;
+interface DropdownMenuTriggerProps extends ComponentProps<typeof Menu.Trigger> {
+}
+interface DropdownMenuContentProps {
+    /** Side relative to the trigger */
+    side?: "top" | "bottom" | "left" | "right";
+    /** Alignment relative to the trigger */
+    align?: "start" | "center" | "end";
+    /** Offset from the trigger in px */
+    sideOffset?: number;
+    /** Minimum width */
+    minWidth?: string;
+    className?: string;
+    children: ReactNode;
+}
+declare function DropdownMenuContent({ side, align, sideOffset, minWidth, className, children, }: DropdownMenuContentProps): react_jsx_runtime.JSX.Element;
+interface DropdownMenuItemProps {
+    /** Danger styling (red text) */
+    variant?: "default" | "danger";
+    /** Icon element rendered before the label */
+    icon?: ReactNode;
+    /** Called when the item is clicked */
+    onClick?: () => void;
+    /** Close menu on click. Default true. */
+    closeOnClick?: boolean;
+    /** Whether the item is disabled */
+    disabled?: boolean;
+    className?: string;
+    children?: ReactNode;
+}
+interface DropdownMenuSeparatorProps {
+    className?: string;
+}
+interface DropdownMenuLabelProps {
+    className?: string;
+    children: ReactNode;
+}
+interface DropdownMenuGroupProps {
+    className?: string;
+    children: ReactNode;
+}
+declare const DropdownMenu: {
+    Root: typeof DropdownMenuRoot;
+    Trigger: react.ForwardRefExoticComponent<Omit<DropdownMenuTriggerProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
+    Content: typeof DropdownMenuContent;
+    Item: react.ForwardRefExoticComponent<DropdownMenuItemProps & react.RefAttributes<HTMLDivElement>>;
+    Separator: react.ForwardRefExoticComponent<DropdownMenuSeparatorProps & react.RefAttributes<HTMLDivElement>>;
+    Label: react.ForwardRefExoticComponent<DropdownMenuLabelProps & react.RefAttributes<HTMLDivElement>>;
+    Group: react.ForwardRefExoticComponent<DropdownMenuGroupProps & react.RefAttributes<HTMLDivElement>>;
+};
+
+interface DialogRootProps extends ComponentProps<typeof Dialog$1.Root> {
+}
+declare function DialogRoot({ ...props }: DialogRootProps): react_jsx_runtime.JSX.Element;
+interface DialogTriggerProps extends ComponentProps<typeof Dialog$1.Trigger> {
+}
+interface DialogBackdropProps extends ComponentProps<typeof Dialog$1.Backdrop> {
+}
+declare const sizeStyles$5: {
+    readonly md: "max-w-[450px]";
+    readonly lg: "max-w-[550px]";
+};
+type DialogSize = keyof typeof sizeStyles$5;
+interface DialogContentProps extends ComponentProps<typeof Dialog$1.Popup> {
+    size?: DialogSize;
+}
+declare function DialogContent({ size, className, children, ...props }: DialogContentProps): react_jsx_runtime.JSX.Element;
+interface DialogPanelProps {
+    className?: string;
+    children: ReactNode;
+}
+interface DialogTitleProps extends ComponentProps<typeof Dialog$1.Title> {
+}
+interface DialogBodyProps {
+    className?: string;
+    children: ReactNode;
+}
+interface DialogFooterProps {
+    className?: string;
+    children: ReactNode;
+}
+interface DialogCloseProps extends ComponentProps<typeof Dialog$1.Close> {
+}
+declare const Dialog: {
+    Root: typeof DialogRoot;
+    Trigger: react.ForwardRefExoticComponent<Omit<DialogTriggerProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
+    Content: typeof DialogContent;
+    Panel: react.ForwardRefExoticComponent<DialogPanelProps & react.RefAttributes<HTMLDivElement>>;
+    Title: react.ForwardRefExoticComponent<Omit<DialogTitleProps, "ref"> & react.RefAttributes<HTMLHeadingElement>>;
+    /** @deprecated Use a plain `<p>` inside Dialog.Body instead. */
+    Description: react.ForwardRefExoticComponent<Omit<_base_ui_react.AlertDialogDescriptionProps, "ref"> & react.RefAttributes<HTMLParagraphElement>>;
+    Body: react.ForwardRefExoticComponent<DialogBodyProps & react.RefAttributes<HTMLDivElement>>;
+    Footer: react.ForwardRefExoticComponent<DialogFooterProps & react.RefAttributes<HTMLDivElement>>;
+    Close: react.ForwardRefExoticComponent<Omit<DialogCloseProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
+};
+
+interface DataTableProps<TData> {
+    /** Column definitions - see @tanstack/react-table ColumnDef */
+    columns: ColumnDef<TData, unknown>[];
+    /** Data array */
+    data: TData[];
+    /** Enable column sorting. Default false. */
+    sortable?: boolean;
+    /** Enable pagination. Default false. */
+    paginated?: boolean;
+    /** Rows per page when paginated. Default 10. */
+    pageSize?: number;
+    /** Available page size options. Default [10, 25, 50]. */
+    pageSizeOptions?: number[];
+    /** Enable row selection with checkboxes. Default false. */
+    selectable?: boolean;
+    /** Controlled row selection state */
+    rowSelection?: RowSelectionState;
+    /** Called when row selection changes */
+    onRowSelectionChange?: (selection: RowSelectionState) => void;
+    /** Called when a row is clicked */
+    onRowClick?: (row: Row<TData>) => void;
+    /** Show skeleton loading state. Default false. */
+    loading?: boolean;
+    /** Number of skeleton rows to show when loading. Default 5. */
+    loadingRows?: number;
+    /** Message shown when data is empty. Default "No results." */
+    emptyMessage?: string | ReactNode;
+    /** Enable expandable rows via TanStack `getSubRows` */
+    expandable?: boolean;
+    /** Resolve child rows for expandable tables */
+    getSubRows?: (row: TData) => TData[] | undefined;
+    /** Pin the first data column while scrolling horizontally */
+    stickyFirstColumn?: boolean;
+    /** Pin the last data column while scrolling horizontally */
+    stickyLastColumn?: boolean;
+    /** Virtualize row rendering for large datasets */
+    virtualized?: boolean;
+    /** Estimated row height when virtualized. Default 44 */
+    estimateRowHeight?: number;
+    /** Additional class on the outer wrapper */
+    className?: string;
+    /** Additional TanStack Table options for advanced use cases */
+    tableOptions?: Partial<TableOptions<TData>>;
+}
+type DataTableActionCellProps = ComponentProps<"div">;
+/**
+ * Wrapper for interactive content inside a DataTable cell.
+ *
+ * Stops click and keyboard events from propagating to the parent row so that
+ * buttons, dropdown menus, and other interactive elements do not trigger
+ * `onRowClick`.
+ *
+ * ```tsx
+ * {
+ *   id: "actions",
+ *   header: "",
+ *   cell: ({ row }) => (
+ *     <DataTableActionCell>
+ *       <Button size="sm" onClick={() => handleEdit(row.original)}>
+ *         Edit
+ *       </Button>
+ *     </DataTableActionCell>
+ *   ),
+ * }
+ * ```
+ */
+declare const DataTableActionCell: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+/**
+ * Data table powered by TanStack Table.
+ *
+ * Renders using the existing `Table` primitives (Table.Header, Table.Body,
+ * Table.Row, Table.Cell) for visual consistency. TanStack Table provides the
+ * headless logic for sorting, filtering, pagination, and row selection.
+ *
+ * Filtering is handled externally -- use `<DataTableToolbar />` with
+ * `<DataTableSearch />`, `<Select />`, or `<Combobox />` above the table.
+ * Pass filter state via `tableOptions` or pre-filtered `data`.
+ *
+ * For simple static tables, use `Table` directly. Use `DataTable` when you
+ * need interactive features.
+ */
+declare function DataTable<TData>({ columns, data, sortable, paginated, pageSize, pageSizeOptions, selectable, rowSelection: controlledRowSelection, onRowSelectionChange, onRowClick, loading, loadingRows, emptyMessage, expandable, getSubRows, stickyFirstColumn, stickyLastColumn, virtualized, estimateRowHeight, className, tableOptions, }: DataTableProps<TData>): react_jsx_runtime.JSX.Element;
+
+interface DataTableToolbarProps {
+    /** Toolbar contents -- typically DataTableSearch, Select, Combobox, Button, etc. */
+    children: ReactNode;
+    /** Additional class on the outer wrapper */
+    className?: string;
+}
+/**
+ * Layout container for controls above a DataTable.
+ *
+ * Renders a horizontal flex row that wraps on small screens. Compose with
+ * any combination of `DataTableSearch`, `Select`, `Combobox`, `Button`,
+ * or custom elements.
+ *
+ * ```tsx
+ * <DataTableToolbar>
+ *   <DataTableSearch value={search} onChange={setSearch} />
+ *   <Select value={status} onValueChange={setStatus} items={statusOptions}>
+ *     <SelectButton placeholder="Status" />
+ *     <SelectContent>
+ *       <SelectOption value="all">All</SelectOption>
+ *       <SelectOption value="active">Active</SelectOption>
+ *     </SelectContent>
+ *   </Select>
+ * </DataTableToolbar>
+ * ```
+ */
+declare const DataTableToolbar: react.ForwardRefExoticComponent<DataTableToolbarProps & react.RefAttributes<HTMLDivElement>>;
+
+interface DataTableSearchProps {
+    /** Current search value */
+    value: string;
+    /** Called when the search value changes */
+    onChange: (value: string) => void;
+    /** Placeholder text. Default "Search..." */
+    placeholder?: string;
+    /** Additional class on the outer wrapper */
+    className?: string;
+}
+/**
+ * A standalone search input for DataTable.
+ *
+ * Controlled component -- wire `value` and `onChange` to your own state.
+ * For server-side search, use `onChange` to trigger an API call (with
+ * debounce if needed). For client-side, pass the value to TanStack Table's
+ * `globalFilter` or a column-specific filter.
+ *
+ * ```tsx
+ * const [search, setSearch] = useState("")
+ *
+ * <DataTableSearch value={search} onChange={setSearch} placeholder="Search repositories..." />
+ * <DataTable
+ *   columns={columns}
+ *   data={data}
+ *   tableOptions={{
+ *     state: { globalFilter: search },
+ *     onGlobalFilterChange: setSearch,
+ *   }}
+ * />
+ * ```
+ */
+declare const DataTableSearch: react.ForwardRefExoticComponent<DataTableSearchProps & react.RefAttributes<HTMLDivElement>>;
+
+interface DataTableColumnsButtonProps<TData> {
+    table: Table$1<TData>;
+    label?: string;
+}
+declare function DataTableColumnsButton<TData>({ table, label, }: DataTableColumnsButtonProps<TData>): react_jsx_runtime.JSX.Element | null;
+
+interface DataTableBulkBarProps<TData> {
+    table: Table$1<TData>;
+    /** Controlled selection — defaults to table row selection state */
+    rowSelection?: RowSelectionState;
+    show?: boolean;
+    message?: ReactNode;
+    actions?: ReactNode;
+    onClear?: () => void;
+    position?: "bottom" | "top";
+}
+declare function DataTableBulkBar<TData>({ table, rowSelection, show, message, actions, onClear, position, }: DataTableBulkBarProps<TData>): react_jsx_runtime.JSX.Element;
+
+interface FilterOption {
+    /** Stable identifier. */
+    readonly value: string;
+    /** Display label rendered in the dropdown and on the trigger when active. */
+    readonly label: string;
+    /** Optional icon rendered before the label. */
+    readonly icon?: ReactNode;
+}
+
+interface FilterMultiSelectProps {
+    /** Label shown on the trigger pill. */
+    title: string;
+    /** Override the leading icon on the trigger. */
+    icon?: ReactNode;
+    /** Available filter options. */
+    options: readonly FilterOption[];
+    /** Controlled selected values. */
+    value?: readonly string[];
+    /** Uncontrolled initial selected values. */
+    defaultValue?: readonly string[];
+    /** Called when the selection changes. */
+    onValueChange?: (values: string[]) => void;
+    /** Show the search input. Defaults to `true`. */
+    searchable?: boolean;
+    /** Placeholder for the search input. Defaults to the `title`. */
+    searchPlaceholder?: string;
+    /** Optional per-option counts rendered as a trailing badge in the dropdown. */
+    facets?: Map<string, number>;
+    /**
+     * Async option loader. When provided, options are fetched as the user
+     * types instead of filtering the static `options` array client-side.
+     * The static `options` prop is still shown when the search is empty
+     * (e.g. "recently used") and seeds the label cache for already-selected
+     * values.
+     */
+    loadOptions?: (query: string) => Promise<readonly FilterOption[]>;
+    /** Debounce delay for `loadOptions` in ms. Defaults to 200. */
+    loadDebounceMs?: number;
+    /** Label shown while `loadOptions` is in flight. Defaults to "Searching...". */
+    loadingLabel?: string;
+    /** Label shown when `loadOptions` rejects. Defaults to "Failed to load options.". */
+    errorLabel?: string;
+    disabled?: boolean;
+    className?: string;
+}
+/**
+ * Searchable multi-select filter. Renders a dashed pill until at least one
+ * option is selected, then a solid pill with chips showing the selection.
+ * "Clear filters" row appears when anything is selected.
+ *
+ * When `loadOptions` is provided, options are fetched async per query and
+ * a label cache keeps trigger badges intact even when selected values
+ * aren't in the currently-displayed list.
+ */
+declare function FilterMultiSelect({ title, icon, options, value: controlledValue, defaultValue, onValueChange, searchable, searchPlaceholder, facets, loadOptions, loadDebounceMs, loadingLabel, errorLabel, disabled, className, }: FilterMultiSelectProps): react_jsx_runtime.JSX.Element;
+
+interface FilterSingleSelectProps {
+    /** Label shown on the trigger pill. */
+    title: string;
+    /** Override the leading icon on the trigger. */
+    icon?: ReactNode;
+    /** Available filter options. */
+    options: readonly FilterOption[];
+    /** Controlled selected value. */
+    value?: string;
+    /** Uncontrolled initial selected value. */
+    defaultValue?: string;
+    /** Called when the selection changes. Receives `undefined` when cleared. */
+    onValueChange?: (value: string | undefined) => void;
+    /** Show the search input. Defaults to `true`. */
+    searchable?: boolean;
+    /** Placeholder for the search input. Defaults to the `title`. */
+    searchPlaceholder?: string;
+    disabled?: boolean;
+    className?: string;
+}
+/**
+ * Searchable single-select filter. Picking an option closes the popover and
+ * updates the trigger to show the selected label. "Clear" row appears when a
+ * value is set.
+ */
+declare function FilterSingleSelect({ title, icon, options, value: controlledValue, defaultValue, onValueChange, searchable, searchPlaceholder, disabled, className, }: FilterSingleSelectProps): react_jsx_runtime.JSX.Element;
+
+interface FilterToggleProps {
+    /** Label shown on the trigger pill. */
+    title: string;
+    /** Override the leading icon on the trigger. */
+    icon?: ReactNode;
+    /** Controlled pressed state. */
+    pressed?: boolean;
+    /** Uncontrolled initial pressed state. */
+    defaultPressed?: boolean;
+    /** Called when the pressed state flips. */
+    onPressedChange?: (pressed: boolean) => void;
+    disabled?: boolean;
+    className?: string;
+}
+/**
+ * Boolean filter pill — no popover. Clicking the trigger flips the pressed
+ * state; the trigger styling switches between dashed-empty and solid-active.
+ * Useful for "Show archived", "Only mine", etc.
+ */
+declare function FilterToggle({ title, icon, pressed: controlledPressed, defaultPressed, onPressedChange, disabled, className, }: FilterToggleProps): react_jsx_runtime.JSX.Element;
+
+interface FilterDateRangePreset {
+    /** Label rendered on the preset button. */
+    readonly label: string;
+    /**
+     * Resolved at click time so relative presets like "Last 7 days" stay
+     * accurate as the day rolls over.
+     */
+    readonly value: () => FilterDateRangeValue;
+}
+/**
+ * The five date-range presets most apps need. Pass to
+ * `<Filter.DateRange presets={...} />`.
+ */
+declare const dateRangePresets: readonly FilterDateRangePreset[];
+
+interface FilterDateRangeValue {
+    /** ISO date string (yyyy-mm-dd). */
+    from?: string;
+    /** ISO date string (yyyy-mm-dd). */
+    to?: string;
+}
+interface FilterDateRangeProps {
+    /** Label shown on the trigger pill. */
+    title: string;
+    /** Override the leading icon on the trigger. Defaults to a calendar icon. */
+    icon?: ReactNode;
+    /** Controlled value. */
+    value?: FilterDateRangeValue;
+    /** Uncontrolled initial value. */
+    defaultValue?: FilterDateRangeValue;
+    /** Called when the range changes. */
+    onValueChange?: (value: FilterDateRangeValue) => void;
+    /**
+     * Quick-pick presets rendered above the from/to inputs. Clicking a
+     * preset resolves its `value()` at click time, commits the result, and
+     * closes the popover. See `dateRangePresets` for a sensible default.
+     */
+    presets?: readonly FilterDateRangePreset[];
+    disabled?: boolean;
+    className?: string;
+}
+/**
+ * Date range filter with an inline Calendar in the popover.
+ */
+declare function FilterDateRange({ title, icon, value: controlledValue, defaultValue, onValueChange, presets, disabled, className, }: FilterDateRangeProps): react_jsx_runtime.JSX.Element;
+
+interface FilterNumericRangeValue {
+    min?: number;
+    max?: number;
+}
+interface FilterNumericRangeProps {
+    /** Label shown on the trigger pill. */
+    title: string;
+    /** Override the leading icon on the trigger. */
+    icon?: ReactNode;
+    /** Controlled value. */
+    value?: FilterNumericRangeValue;
+    /** Uncontrolled initial value. */
+    defaultValue?: FilterNumericRangeValue;
+    /** Called when the range changes. */
+    onValueChange?: (value: FilterNumericRangeValue) => void;
+    /** Lower bound for the input controls (doesn't appear in the badge). */
+    min?: number;
+    /** Upper bound for the input controls (doesn't appear in the badge). */
+    max?: number;
+    /** Step for the input controls. */
+    step?: number;
+    /** Prefix shown next to each value in the trigger badge (e.g. "$", "★"). */
+    unit?: string;
+    /** Custom badge formatter. Falls back to `Intl.NumberFormat` + unit. */
+    format?: (n: number) => string;
+    disabled?: boolean;
+    className?: string;
+}
+/**
+ * Numeric range filter. Paired `<input type="number">` controls in the
+ * popover; trigger shows the formatted range when active.
+ */
+declare function FilterNumericRange({ title, icon, value: controlledValue, defaultValue, onValueChange, min, max, step, unit, format, disabled, className, }: FilterNumericRangeProps): react_jsx_runtime.JSX.Element;
+
+interface FilterTextProps {
+    /** Label shown on the trigger pill. */
+    title: string;
+    /** Override the leading icon on the trigger. */
+    icon?: ReactNode;
+    /** Controlled value. */
+    value?: string;
+    /** Uncontrolled initial value. */
+    defaultValue?: string;
+    /** Called on every keystroke. */
+    onValueChange?: (value: string) => void;
+    /** Placeholder for the popover input. Defaults to `title`. */
+    placeholder?: string;
+    disabled?: boolean;
+    className?: string;
+}
+/**
+ * Single-text-input filter. The popover hosts an auto-focused input with an
+ * inline clear button. Commits on every keystroke; consumers can wrap
+ * `onValueChange` if they need to debounce server-side filtering.
+ */
+declare function FilterText({ title, icon, value: controlledValue, defaultValue, onValueChange, placeholder, disabled, className, }: FilterTextProps): react_jsx_runtime.JSX.Element;
+
+interface FilterDateProps {
+    title: string;
+    icon?: ReactNode;
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string | undefined) => void;
+    disabled?: boolean;
+    className?: string;
+}
+declare function FilterDate({ title, icon, value: controlledValue, defaultValue, onValueChange, disabled, className, }: FilterDateProps): react_jsx_runtime.JSX.Element;
+
+interface FilterSliderValue {
+    min: number;
+    max: number;
+}
+interface FilterSliderProps {
+    title: string;
+    icon?: ReactNode;
+    min?: number;
+    max?: number;
+    step?: number;
+    value?: FilterSliderValue;
+    defaultValue?: FilterSliderValue;
+    onValueChange?: (value: FilterSliderValue) => void;
+    disabled?: boolean;
+    className?: string;
+}
+declare function FilterSlider({ title, icon, min, max, step, value: controlledValue, defaultValue, onValueChange, disabled, className, }: FilterSliderProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Filter pills for lists and tables. Drop the appropriate sub-variant
+ * onto your toolbar:
+ *
+ * - `Filter.MultiSelect` — searchable checkbox list (with optional async loader)
+ * - `Filter.SingleSelect` — searchable radio list (picking closes)
+ * - `Filter.Toggle` — boolean on/off pill, no popover
+ * - `Filter.Date` — single date with Calendar
+ * - `Filter.DateRange` — date range with Calendar, optional presets
+ * - `Filter.NumericRange` — paired numeric inputs with optional unit prefix
+ * - `Filter.Slider` — numeric range slider
+ * - `Filter.Text` — single text input
+ */
+declare const Filter: {
+    MultiSelect: typeof FilterMultiSelect;
+    SingleSelect: typeof FilterSingleSelect;
+    Toggle: typeof FilterToggle;
+    Date: typeof FilterDate;
+    DateRange: typeof FilterDateRange;
+    NumericRange: typeof FilterNumericRange;
+    Slider: typeof FilterSlider;
+    Text: typeof FilterText;
+};
+
+declare function parseLocalDate(iso: string | undefined): Date | null;
+declare function formatIsoDate(date: Date): string;
+
+type CalendarMode = "single" | "range";
+interface CalendarRangeValue {
+    from?: Date;
+    to?: Date;
+}
+interface CalendarProps extends Omit<ComponentProps<"div">, "onChange" | "defaultValue"> {
+    mode?: CalendarMode;
+    value?: Date | null;
+    defaultValue?: Date | null;
+    onValueChange?: (value: Date | null) => void;
+    rangeValue?: CalendarRangeValue;
+    defaultRangeValue?: CalendarRangeValue;
+    onRangeValueChange?: (value: CalendarRangeValue) => void;
+    month?: Date;
+    defaultMonth?: Date;
+    onMonthChange?: (month: Date) => void;
+    minDate?: Date;
+    maxDate?: Date;
+    disabled?: (date: Date) => boolean;
+}
+declare function Calendar({ mode, value: controlledValue, defaultValue, onValueChange, rangeValue: controlledRange, defaultRangeValue, onRangeValueChange, month: controlledMonth, defaultMonth, onMonthChange, minDate, maxDate, disabled, className, ...props }: CalendarProps): react_jsx_runtime.JSX.Element;
+
+interface DatePickerProps {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string | undefined) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    size?: "sm" | "md";
+    className?: string;
+    minDate?: Date;
+    maxDate?: Date;
+}
+declare function DatePicker({ value: controlledValue, defaultValue, onValueChange, placeholder, disabled, size, className, minDate, maxDate, }: DatePickerProps): react_jsx_runtime.JSX.Element;
+
+interface DateRangePickerValue {
+    from?: string;
+    to?: string;
+}
+interface DateRangePickerProps {
+    value?: DateRangePickerValue;
+    defaultValue?: DateRangePickerValue;
+    onValueChange?: (value: DateRangePickerValue) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    size?: "sm" | "md";
+    className?: string;
+    minDate?: Date;
+    maxDate?: Date;
+}
+declare function DateRangePicker({ value: controlledValue, defaultValue, onValueChange, placeholder, disabled, size, className, minDate, maxDate, }: DateRangePickerProps): react_jsx_runtime.JSX.Element;
+
+interface TimePickerProps {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string | undefined) => void;
+    disabled?: boolean;
+    size?: "sm" | "md";
+    className?: string;
+}
+declare const TimePicker: react.ForwardRefExoticComponent<TimePickerProps & react.RefAttributes<HTMLDivElement>>;
+
+interface ProgressProps extends ComponentProps<typeof Progress$1.Root> {
+    /** Show value label below the bar */
+    showValue?: boolean;
+}
+interface ProgressCircularProps extends ComponentProps<"div"> {
+    value: number | null;
+    max?: number;
+    size?: number;
+    strokeWidth?: number;
+}
+declare const ProgressCircular: react.ForwardRefExoticComponent<Omit<ProgressCircularProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+declare const Progress: react.ForwardRefExoticComponent<Omit<ProgressProps, "ref"> & react.RefAttributes<HTMLDivElement>> & {
+    Circular: react.ForwardRefExoticComponent<Omit<ProgressCircularProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+};
+
+interface SliderProps extends ComponentProps<typeof Slider$1.Root> {
+    showValue?: boolean;
+}
+declare const Slider: react.ForwardRefExoticComponent<Omit<SliderProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+
+declare const sizeStyles$4: {
+    readonly sm: {
+        readonly input: "h-7 text-bruv-sm px-2.5";
+        readonly button: "w-7";
+    };
+    readonly md: {
+        readonly input: "h-8 text-bruv-base px-3";
+        readonly button: "w-8";
+    };
+};
+type NumberInputSize = keyof typeof sizeStyles$4;
+interface NumberInputProps extends ComponentProps<typeof NumberField.Root> {
+    size?: NumberInputSize;
+}
+declare const NumberInput: react.ForwardRefExoticComponent<Omit<NumberInputProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+
+interface EmptyStateProps extends Omit<ComponentProps<"div">, "title"> {
+    title?: ReactNode;
+    description?: ReactNode;
+    icon?: ReactNode;
+    action?: ReactNode;
+}
+declare const EmptyState: react.ForwardRefExoticComponent<Omit<EmptyStateProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+
+interface ScrollAreaProps extends ComponentProps<typeof ScrollArea$1.Root> {
+    children: ReactNode;
+    orientation?: "vertical" | "horizontal" | "both";
+}
+declare const ScrollArea: react.ForwardRefExoticComponent<Omit<ScrollAreaProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+
+interface StepperStep {
+    id: string;
+    label: ReactNode;
+    description?: ReactNode;
+}
+interface StepperProps extends ComponentProps<"nav"> {
+    steps: readonly StepperStep[];
+    currentStep: string;
+    orientation?: "horizontal" | "vertical";
+}
+declare const Stepper: react.ForwardRefExoticComponent<Omit<StepperProps, "ref"> & react.RefAttributes<HTMLElement>>;
+
+interface TreeViewItem {
+    id: string;
+    label: ReactNode;
+    children?: readonly TreeViewItem[];
+    disabled?: boolean;
+}
+interface TreeViewProps {
+    items: readonly TreeViewItem[];
+    selectedId?: string;
+    defaultSelectedId?: string;
+    onSelectedIdChange?: (id: string) => void;
+    defaultExpandedIds?: readonly string[];
+    expandedIds?: readonly string[];
+    onExpandedIdsChange?: (ids: string[]) => void;
+    className?: string;
+}
+declare function TreeView({ items, selectedId: controlledSelected, defaultSelectedId, onSelectedIdChange, defaultExpandedIds, expandedIds: controlledExpanded, onExpandedIdsChange, className, }: TreeViewProps): react_jsx_runtime.JSX.Element;
+
+interface ContextMenuRootProps extends ComponentProps<typeof ContextMenu$1.Root> {
+}
+declare function ContextMenuRoot(props: ContextMenuRootProps): react_jsx_runtime.JSX.Element;
+interface ContextMenuTriggerProps extends ComponentProps<typeof ContextMenu$1.Trigger> {
+}
+interface ContextMenuContentProps {
+    side?: "top" | "bottom" | "left" | "right";
+    align?: "start" | "center" | "end";
+    sideOffset?: number;
+    minWidth?: string;
+    className?: string;
+    children: ReactNode;
+}
+declare function ContextMenuContent({ side, align, sideOffset, minWidth, className, children, }: ContextMenuContentProps): react_jsx_runtime.JSX.Element;
+interface ContextMenuItemProps extends ComponentProps<typeof ContextMenu$1.Item> {
+}
+interface ContextMenuSeparatorProps extends ComponentProps<typeof ContextMenu$1.Separator> {
+}
+declare function ContextMenuSeparator(props: ContextMenuSeparatorProps): react_jsx_runtime.JSX.Element;
+interface ContextMenuLabelProps extends ComponentProps<typeof ContextMenu$1.GroupLabel> {
+}
+declare function ContextMenuLabel({ className, ...props }: ContextMenuLabelProps): react_jsx_runtime.JSX.Element;
+declare const ContextMenu: {
+    Root: typeof ContextMenuRoot;
+    Trigger: react.ForwardRefExoticComponent<Omit<ContextMenuTriggerProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+    Content: typeof ContextMenuContent;
+    Item: react.ForwardRefExoticComponent<Omit<ContextMenuItemProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+    Separator: typeof ContextMenuSeparator;
+    Label: typeof ContextMenuLabel;
+};
+
+interface TagsInputProps extends Omit<ComponentProps<"div">, "onChange"> {
+    value?: string[];
+    defaultValue?: string[];
+    onValueChange?: (value: string[]) => void;
+    placeholder?: string;
+    disabled?: boolean;
+}
+declare const TagsInput: react.ForwardRefExoticComponent<Omit<TagsInputProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+
+interface OTPProps extends Omit<ComponentProps<typeof OTPFieldPreview.Root>, "length"> {
+    length?: number;
+}
+declare const OTP: react.ForwardRefExoticComponent<Omit<OTPProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+
+interface ToolbarProps extends ComponentProps<typeof Toolbar$1.Root> {
+    children: ReactNode;
+}
+interface ToolbarButtonProps extends ComponentProps<typeof Toolbar$1.Button> {
+}
+declare const ToolbarButton: react.ForwardRefExoticComponent<Omit<ToolbarButtonProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
+interface ToolbarSeparatorProps extends ComponentProps<typeof Toolbar$1.Separator> {
+}
+declare const ToolbarSeparator: react.ForwardRefExoticComponent<Omit<ToolbarSeparatorProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+declare const Toolbar: react.ForwardRefExoticComponent<Omit<ToolbarProps, "ref"> & react.RefAttributes<HTMLDivElement>> & {
+    Button: react.ForwardRefExoticComponent<Omit<ToolbarButtonProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
+    Separator: react.ForwardRefExoticComponent<Omit<ToolbarSeparatorProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+};
+
+interface ResizablePanelProps extends ComponentProps<"div"> {
+    defaultSize?: number;
+    minSize?: number;
+    maxSize?: number;
+    children: ReactNode;
+}
+declare function ResizablePanel({ defaultSize, minSize, maxSize, className, children, ...props }: ResizablePanelProps): react_jsx_runtime.JSX.Element;
+interface ResizableHandleProps extends ComponentProps<"div"> {
+    onResize?: (delta: number) => void;
+}
+declare function ResizableHandle({ className, onResize, ...props }: ResizableHandleProps): react_jsx_runtime.JSX.Element;
+interface ResizableProps extends ComponentProps<"div"> {
+    children: ReactNode;
+    direction?: "horizontal" | "vertical";
+}
+declare function Resizable({ children, direction, className, ...props }: ResizableProps): react_jsx_runtime.JSX.Element;
+declare namespace Resizable {
+    var Panel: typeof ResizablePanel;
+    var Handle: typeof ResizableHandle;
+}
+
+interface TruncatedCellProps {
+    /** Content to render and use as tooltip text when truncated */
+    readonly children: ReactNode;
+    /** Override tooltip content (defaults to children if string) */
+    readonly tooltip?: ReactNode;
+    readonly className?: string;
+}
+/**
+ * Renders inline text with `truncate` (ellipsis).
+ * When the text overflows, a Tooltip shows the full content on hover.
+ * When it fits, no tooltip is rendered.
+ */
+declare const TruncatedCell: react.ForwardRefExoticComponent<TruncatedCellProps & react.RefAttributes<HTMLSpanElement>>;
+
+interface TableProps {
+    readonly className?: string;
+    readonly children: ReactNode;
+}
+/**
+ * Lightweight list-table container.
+ *
+ * Wraps a semantic `<table>` in a rounded, bordered container.
+ * Designed for simple list-style data displays - not a full data-table.
+ */
+declare const Table: ReturnType<typeof forwardRef<HTMLDivElement, TableProps>> & {
+    Header: typeof TableHeader;
+    Body: typeof TableBody;
+    Row: typeof TableRow;
+    HeaderCell: typeof TableHeaderCell;
+    Cell: typeof TableCell;
+    TruncatedCell: typeof TruncatedCell;
+    Skeleton: typeof TableSkeleton;
+};
+interface TableHeaderProps {
+    readonly className?: string;
+    readonly children: ReactNode;
+}
+declare const TableHeader: react.ForwardRefExoticComponent<TableHeaderProps & react.RefAttributes<HTMLTableSectionElement>>;
+interface TableBodyProps {
+    readonly className?: string;
+    readonly children: ReactNode;
+}
+declare const TableBody: react.ForwardRefExoticComponent<TableBodyProps & react.RefAttributes<HTMLTableSectionElement>>;
+interface TableRowProps extends Omit<ComponentProps<"tr">, "children"> {
+    className?: string;
+    children: ReactNode;
+}
+declare const TableRow: react.ForwardRefExoticComponent<Omit<TableRowProps, "ref"> & react.RefAttributes<HTMLTableRowElement>>;
+interface TableHeaderCellProps {
+    /** Fixed width in pixels or CSS value */
+    width?: number | string;
+    /** Column span */
+    colSpan?: number;
+    /** Truncate content with ellipsis and show tooltip on overflow */
+    truncate?: boolean;
+    className?: string;
+    children?: ReactNode;
+}
+declare const TableHeaderCell: react.ForwardRefExoticComponent<TableHeaderCellProps & react.RefAttributes<HTMLTableCellElement>>;
+interface TableCellProps {
+    /** Fixed width in pixels or CSS value */
+    width?: number | string;
+    /** Column span */
+    colSpan?: number;
+    /** Truncate content with ellipsis and show tooltip on overflow */
+    truncate?: boolean;
+    className?: string;
+    style?: CSSProperties;
+    children?: ReactNode;
+}
+declare const TableCell: react.ForwardRefExoticComponent<TableCellProps & react.RefAttributes<HTMLTableCellElement>>;
+interface TableSkeletonProps {
+    /** Number of columns to render */
+    readonly columns: number;
+    /** Number of skeleton rows. Default 5. */
+    readonly rows?: number;
+    readonly className?: string;
+}
+/**
+ * Skeleton loading rows for the Table.
+ * Renders inside a `<tbody>` with the specified number of rows and columns.
+ *
+ * ```tsx
+ * <Table>
+ *   <Table.Header>...</Table.Header>
+ *   {loading ? <Table.Skeleton columns={3} /> : <Table.Body>...</Table.Body>}
+ * </Table>
+ * ```
+ */
+declare function TableSkeleton({ columns, rows, className }: TableSkeletonProps): react_jsx_runtime.JSX.Element;
+
+declare const sizeStyles$3: {
+    readonly sm: {
+        readonly button: "size-7";
+        readonly icon: "size-4";
+        readonly strip: "h-9";
+    };
+    readonly md: {
+        readonly button: "size-8";
+        readonly icon: "size-4";
+        readonly strip: "h-10";
+    };
+};
+type PaginationSize = keyof typeof sizeStyles$3;
+interface PaginationProps {
+    /** Current page (1-indexed) */
+    page: number;
+    /** Total number of pages */
+    pageCount: number;
+    /** Called when the page changes */
+    onPageChange?: (page: number) => void;
+    /** Total item count - shows "1–10 of XMarkIcon" when provided */
+    totalItems?: number;
+    /** Rows per page - shows selector when provided with onRowsPerPageChange */
+    rowsPerPage?: number;
+    /** Called when rows per page changes */
+    onRowsPerPageChange?: (rows: number) => void;
+    /** Available row count options. Default [10, 25, 50] */
+    rowOptions?: number[];
+    /** Number of sibling pages to show around active page. Default 1 */
+    siblingCount?: number;
+    /** Size of the pagination controls */
+    size?: PaginationSize;
+    className?: string;
+}
+/**
+ * Pagination toolbar with clickable page numbers, optional rows-per-page
+ * selector, and optional result count.
+ *
+ * Renders as a cohesive strip - pass `rowsPerPage` + `onRowsPerPageChange`
+ * to show the rows-per-page selector, and `totalItems` to show the result count.
+ */
+declare const Pagination: react.ForwardRefExoticComponent<PaginationProps & react.RefAttributes<HTMLElement>>;
+
+declare const sizeStyles$2: {
+    readonly sm: "h-7 px-2.5";
+    readonly md: "h-8 px-3";
+};
+type SegmentedControlSize = keyof typeof sizeStyles$2;
+interface SegmentedControlOption<T extends string = string> {
+    value: T;
+    label?: string;
+    icon?: ReactNode;
+}
+interface SegmentedControlProps<T extends string = string> {
+    /** Options to display as segments */
+    options: SegmentedControlOption<T>[];
+    /** Controlled value */
+    value?: T;
+    /** Uncontrolled default value */
+    defaultValue?: T;
+    /** Called when the selected segment changes */
+    onValueChange?: (value: T) => void;
+    /**
+     * Layout mode:
+     * - `fill` - segments divide space equally (default)
+     * - `fit` - segments hug their content
+     */
+    layout?: "fill" | "fit";
+    /** Size of the segmented control items */
+    size?: SegmentedControlSize;
+    className?: string;
+}
+/**
+ * Segmented control with a sliding indicator that animates between options.
+ *
+ * Two layout modes:
+ * - `fill` (default) - equal-width segments via CSS grid, indicator positioned with translateX
+ * - `fit` - segments size to content, indicator position/width measured from DOM
+ */
+declare const SegmentedControl: <T extends string = string>(props: SegmentedControlProps<T> & react__default.RefAttributes<HTMLDivElement>) => react__default.ReactElement | null;
+
+type ThemeMode = "light" | "dark" | "system";
+interface UserMenuUser {
+    /** Display name */
+    name: string;
+    /** Organization or team name */
+    org?: string;
+    /** Avatar image URL */
+    avatarUrl?: string;
+    /** Fallback initials when no image (e.g. "AM") */
+    initials?: string;
+}
+interface UserMenuItem {
+    label: string;
+    icon?: ReactNode;
+    onClick?: () => void;
+}
+interface UserMenuProps {
+    /** User information displayed in the header */
+    user: UserMenuUser;
+    /** Current theme mode */
+    theme?: ThemeMode;
+    /** Called when the theme is changed */
+    onThemeChange?: (theme: ThemeMode) => void;
+    /** Menu items rendered between the theme toggle and log out */
+    items?: UserMenuItem[];
+    /** Called when "Log out" is clicked */
+    onLogout?: () => void;
+    /** Custom trigger content. Defaults to a bare Avatar. */
+    children?: ReactNode;
+    /** Which side the dropdown opens on */
+    side?: "top" | "bottom" | "left" | "right";
+    /** Alignment of the dropdown relative to the trigger */
+    align?: "start" | "center" | "end";
+    className?: string;
+}
+/**
+ * User menu dropdown - shows user info, theme toggle, navigation items,
+ * and a log out action.
+ *
+ * Theme state is passed as props so the component stays decoupled from
+ * any specific theme hook.
+ */
+declare function UserMenu({ user, theme, onThemeChange, items, onLogout, children, side, align, className, }: UserMenuProps): react_jsx_runtime.JSX.Element;
+
+interface TooltipProviderProps extends ComponentProps<typeof Tooltip$1.Provider> {
+}
+declare function TooltipProvider(props: TooltipProviderProps): react_jsx_runtime.JSX.Element;
+interface TooltipRootProps extends ComponentProps<typeof Tooltip$1.Root> {
+}
+declare function TooltipRoot(props: TooltipRootProps): react_jsx_runtime.JSX.Element;
+interface TooltipTriggerProps extends ComponentProps<typeof Tooltip$1.Trigger> {
+}
+interface TooltipContentProps extends ComponentProps<typeof Tooltip$1.Popup> {
+    /** Side relative to the trigger */
+    side?: "top" | "bottom" | "left" | "right";
+    /** Alignment relative to the trigger */
+    align?: "start" | "center" | "end";
+    /** Offset from the trigger in px */
+    sideOffset?: number;
+    /** Content to display */
+    children: ReactNode;
+}
+declare function TooltipContent({ side, align, sideOffset, className, children, ...props }: TooltipContentProps): react_jsx_runtime.JSX.Element;
+interface TooltipViewportProps extends ComponentProps<typeof Tooltip$1.Viewport> {
+}
+declare const createTooltipHandle: typeof Tooltip$1.createHandle;
+declare const Tooltip: {
+    Provider: typeof TooltipProvider;
+    Root: typeof TooltipRoot;
+    Trigger: react.ForwardRefExoticComponent<Omit<TooltipTriggerProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
+    Content: typeof TooltipContent;
+    Viewport: react.ForwardRefExoticComponent<Omit<TooltipViewportProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+    createHandle: typeof Tooltip$1.createHandle;
+};
+
+interface PopoverRootProps extends ComponentProps<typeof Popover$1.Root> {
+}
+declare function PopoverRoot(props: PopoverRootProps): react_jsx_runtime.JSX.Element;
+interface PopoverTriggerProps extends ComponentProps<typeof Popover$1.Trigger> {
+}
+interface PopoverContentProps extends ComponentProps<typeof Popover$1.Popup> {
+    /** Side relative to the trigger */
+    side?: "top" | "bottom" | "left" | "right";
+    /** Alignment relative to the trigger */
+    align?: "start" | "center" | "end";
+    /** Offset from the trigger in px */
+    sideOffset?: number;
+    children: ReactNode;
+}
+declare function PopoverContent({ side, align, sideOffset, className, children, ...props }: PopoverContentProps): react_jsx_runtime.JSX.Element;
+interface PopoverArrowProps extends ComponentProps<typeof Popover$1.Arrow> {
+}
+interface PopoverCloseProps extends ComponentProps<typeof Popover$1.Close> {
+}
+interface PopoverTitleProps {
+    className?: string;
+    children: ReactNode;
+}
+interface PopoverDescriptionProps extends ComponentProps<typeof Popover$1.Description> {
+}
+declare const Popover: {
+    Root: typeof PopoverRoot;
+    Trigger: react.ForwardRefExoticComponent<Omit<PopoverTriggerProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
+    Content: typeof PopoverContent;
+    Arrow: react.ForwardRefExoticComponent<Omit<PopoverArrowProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+    Close: react.ForwardRefExoticComponent<Omit<PopoverCloseProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
+    Title: react.ForwardRefExoticComponent<PopoverTitleProps & react.RefAttributes<HTMLParagraphElement>>;
+    Description: react.ForwardRefExoticComponent<Omit<PopoverDescriptionProps, "ref"> & react.RefAttributes<HTMLParagraphElement>>;
+};
+
+declare const variantConfig$1: {
+    readonly accent: {
+        readonly container: "bg-bruv-accent-subtle";
+        readonly icon: "text-bruv-accent";
+        readonly text: "text-bruv-accent [&_a]:underline [&_a]:underline-offset-2 [&_a]:hover:opacity-80";
+        readonly pattern: "text-bruv-accent";
+        readonly defaultIcon: react.ForwardRefExoticComponent<Omit<react.SVGProps<SVGSVGElement>, "ref"> & {
+            title?: string;
+            titleId?: string;
+        } & react.RefAttributes<SVGSVGElement>>;
+    };
+    readonly success: {
+        readonly container: "bg-bruv-success-subtle";
+        readonly icon: "text-bruv-success";
+        readonly text: "text-bruv-success [&_a]:underline [&_a]:underline-offset-2 [&_a]:hover:opacity-80";
+        readonly pattern: "text-bruv-success";
+        readonly defaultIcon: react.ForwardRefExoticComponent<Omit<react.SVGProps<SVGSVGElement>, "ref"> & {
+            title?: string;
+            titleId?: string;
+        } & react.RefAttributes<SVGSVGElement>>;
+    };
+    readonly warn: {
+        readonly container: "bg-bruv-warn-subtle";
+        readonly icon: "text-bruv-warn";
+        readonly text: "text-bruv-warn [&_a]:underline [&_a]:underline-offset-2 [&_a]:hover:opacity-80";
+        readonly pattern: "text-bruv-warn";
+        readonly defaultIcon: react.ForwardRefExoticComponent<Omit<react.SVGProps<SVGSVGElement>, "ref"> & {
+            title?: string;
+            titleId?: string;
+        } & react.RefAttributes<SVGSVGElement>>;
+    };
+    readonly danger: {
+        readonly container: "bg-bruv-danger-subtle";
+        readonly icon: "text-bruv-danger";
+        readonly text: "text-bruv-danger [&_a]:underline [&_a]:underline-offset-2 [&_a]:hover:opacity-80";
+        readonly pattern: "text-bruv-danger";
+        readonly defaultIcon: react.ForwardRefExoticComponent<Omit<react.SVGProps<SVGSVGElement>, "ref"> & {
+            title?: string;
+            titleId?: string;
+        } & react.RefAttributes<SVGSVGElement>>;
+    };
+};
+type AlertVariant = keyof typeof variantConfig$1;
+type AlertLayout = "inline" | "banner";
+interface AlertProps {
+    /** Visual style variant */
+    variant?: AlertVariant;
+    /**
+     * Layout mode:
+     * - `inline` (default) — horizontal bar with icon left, text center, action right
+     * - `banner` — full-width centered layout for page-level announcements
+     */
+    layout?: AlertLayout;
+    /** Override the default icon */
+    icon?: ReactNode;
+    /** Action element rendered beside the text (e.g. a Button) */
+    action?: ReactNode;
+    /** Called when the dismiss button is clicked. When provided, a close button appears. */
+    onDismiss?: () => void;
+    className?: string;
+    children: ReactNode;
+}
+/**
+ * Alert component for important messages.
+ *
+ * Two layouts:
+ * - `inline` — horizontal bar with icon, text, and optional action. Features
+ *   a flickering pixel grid on the right side.
+ * - `banner` — full-width centered layout for page-level announcements.
+ *   Content is centered with the icon above the text.
+ */
+declare const Alert: react.ForwardRefExoticComponent<AlertProps & react.RefAttributes<HTMLDivElement>>;
+
+interface AlertDialogRootProps extends ComponentProps<typeof AlertDialog$1.Root> {
+}
+declare function AlertDialogRoot(props: AlertDialogRootProps): react_jsx_runtime.JSX.Element;
+interface AlertDialogTriggerProps extends ComponentProps<typeof AlertDialog$1.Trigger> {
+}
+interface AlertDialogBackdropProps extends ComponentProps<typeof AlertDialog$1.Backdrop> {
+}
+interface AlertDialogContentProps extends ComponentProps<typeof AlertDialog$1.Popup> {
+}
+declare function AlertDialogContent({ className, children, ...props }: AlertDialogContentProps): react_jsx_runtime.JSX.Element;
+interface AlertDialogPanelProps {
+    className?: string;
+    children: ReactNode;
+}
+interface AlertDialogTitleProps extends ComponentProps<typeof AlertDialog$1.Title> {
+}
+interface AlertDialogDescriptionProps extends ComponentProps<typeof AlertDialog$1.Description> {
+}
+interface AlertDialogActionsProps {
+    className?: string;
+    children: ReactNode;
+}
+interface AlertDialogCloseProps extends ComponentProps<typeof AlertDialog$1.Close> {
+}
+declare const AlertDialog: {
+    Root: typeof AlertDialogRoot;
+    Trigger: react.ForwardRefExoticComponent<Omit<AlertDialogTriggerProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
+    Content: typeof AlertDialogContent;
+    Panel: react.ForwardRefExoticComponent<AlertDialogPanelProps & react.RefAttributes<HTMLDivElement>>;
+    Title: react.ForwardRefExoticComponent<Omit<AlertDialogTitleProps, "ref"> & react.RefAttributes<HTMLHeadingElement>>;
+    Description: react.ForwardRefExoticComponent<Omit<AlertDialogDescriptionProps, "ref"> & react.RefAttributes<HTMLParagraphElement>>;
+    Actions: react.ForwardRefExoticComponent<AlertDialogActionsProps & react.RefAttributes<HTMLDivElement>>;
+    Close: react.ForwardRefExoticComponent<Omit<AlertDialogCloseProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
+};
+
+interface AccordionRootProps extends ComponentProps<typeof Accordion$1.Root> {
+}
+interface AccordionItemProps extends ComponentProps<typeof Accordion$1.Item> {
+}
+interface AccordionTriggerProps extends ComponentProps<typeof Accordion$1.Trigger> {
+    /** Icon element rendered before the label */
+    icon?: ReactNode;
+}
+interface AccordionContentProps extends ComponentProps<typeof Accordion$1.Panel> {
+}
+declare const Accordion: {
+    Root: react.ForwardRefExoticComponent<Omit<AccordionRootProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+    Item: react.ForwardRefExoticComponent<Omit<AccordionItemProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+    Trigger: react.ForwardRefExoticComponent<Omit<AccordionTriggerProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
+    Content: react.ForwardRefExoticComponent<Omit<AccordionContentProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+};
+
+interface TabsRootProps extends ComponentProps<typeof Tabs$1.Root> {
+}
+interface TabsListProps extends ComponentProps<typeof Tabs$1.List> {
+    /**
+     * Layout mode:
+     * - `fit` — tabs hug their content (default)
+     * - `fill` — tabs divide space equally via CSS grid
+     */
+    layout?: "fill" | "fit";
+}
+declare const tabSizeStyles: {
+    readonly sm: "h-7 px-2.5";
+    readonly md: "h-8 px-3";
+};
+type TabsTabSize = keyof typeof tabSizeStyles;
+interface TabsTabProps extends ComponentProps<typeof Tabs$1.Tab> {
+    /** Size of the tab */
+    size?: TabsTabSize;
+}
+interface TabsPanelProps extends ComponentProps<typeof Tabs$1.Panel> {
+}
+declare const Tabs: {
+    Root: react.ForwardRefExoticComponent<Omit<TabsRootProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+    List: react.ForwardRefExoticComponent<Omit<TabsListProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+    Tab: react.ForwardRefExoticComponent<Omit<TabsTabProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
+    Panel: react.ForwardRefExoticComponent<Omit<TabsPanelProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+};
+
+type DrawerSide = "right" | "left" | "bottom" | "top";
+interface DrawerRootProps extends Omit<ComponentProps<typeof Drawer$1.Root>, "swipeDirection"> {
+    /** Which edge the drawer slides in from. Default: "right". */
+    side?: DrawerSide;
+    /**
+     * When true (default), automatically switches to "bottom" on small viewports.
+     * The CSS handles this via media queries on the Popup element.
+     */
+    responsive?: boolean;
+    children: ReactNode;
+}
+declare function DrawerRoot({ side, responsive: _responsive, children, ...props }: DrawerRootProps): react_jsx_runtime.JSX.Element;
+interface DrawerTriggerProps extends ComponentProps<typeof Drawer$1.Trigger> {
+}
+interface DrawerBackdropProps extends ComponentProps<typeof Drawer$1.Backdrop> {
+}
+interface DrawerContentProps extends ComponentProps<typeof Drawer$1.Popup> {
+    /** Which edge. Must match the Root side. Default: "right". */
+    side?: DrawerSide;
+    /** When true, switches to bottom on mobile. Default: true. */
+    responsive?: boolean;
+}
+declare function DrawerContent({ side, responsive, className, children, ...props }: DrawerContentProps): react_jsx_runtime.JSX.Element;
+interface DrawerHeaderProps {
+    className?: string;
+    children: ReactNode;
+}
+interface DrawerTitleProps extends ComponentProps<typeof Drawer$1.Title> {
+}
+interface DrawerDescriptionProps extends ComponentProps<typeof Drawer$1.Description> {
+}
+interface DrawerBodyProps {
+    className?: string;
+    children: ReactNode;
+}
+interface DrawerFooterProps {
+    className?: string;
+    children: ReactNode;
+}
+interface DrawerCloseProps extends ComponentProps<typeof Drawer$1.Close> {
+    /** Show default XMarkIcon icon. Default: true when no children. */
+    asIcon?: boolean;
+}
+declare const Drawer: {
+    Root: typeof DrawerRoot;
+    Trigger: react.ForwardRefExoticComponent<Omit<DrawerTriggerProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
+    Content: typeof DrawerContent;
+    Header: react.ForwardRefExoticComponent<DrawerHeaderProps & react.RefAttributes<HTMLDivElement>>;
+    Title: react.ForwardRefExoticComponent<Omit<DrawerTitleProps, "ref"> & react.RefAttributes<HTMLHeadingElement>>;
+    Description: react.ForwardRefExoticComponent<Omit<DrawerDescriptionProps, "ref"> & react.RefAttributes<HTMLParagraphElement>>;
+    Body: react.ForwardRefExoticComponent<DrawerBodyProps & react.RefAttributes<HTMLDivElement>>;
+    Footer: react.ForwardRefExoticComponent<DrawerFooterProps & react.RefAttributes<HTMLDivElement>>;
+    Close: react.ForwardRefExoticComponent<Omit<DrawerCloseProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
+};
+
+interface CommandRootProps extends ComponentProps<typeof Command$1> {
+}
+interface CommandInputProps extends ComponentProps<typeof Command$1.Input> {
+}
+interface CommandListProps extends ComponentProps<typeof Command$1.List> {
+}
+interface CommandEmptyProps extends ComponentProps<typeof Command$1.Empty> {
+}
+interface CommandGroupProps extends ComponentProps<typeof Command$1.Group> {
+}
+interface CommandItemProps extends ComponentProps<typeof Command$1.Item> {
+    /** Icon element rendered before the label */
+    icon?: ReactNode;
+    /** Keyboard shortcut hint rendered on the right */
+    shortcut?: string;
+}
+interface CommandSeparatorProps extends ComponentProps<typeof Command$1.Separator> {
+}
+interface CommandDialogProps {
+    /** Controlled open state */
+    open?: boolean;
+    /** Called when open state changes */
+    onOpenChange?: (open: boolean) => void;
+    /** Content for the command palette */
+    children: ReactNode;
+    className?: string;
+}
+declare function CommandDialog({ open, onOpenChange, children, className, }: CommandDialogProps): react_jsx_runtime.JSX.Element;
+declare const Command: {
+    Root: react.ForwardRefExoticComponent<Omit<CommandRootProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+    Input: react.ForwardRefExoticComponent<Omit<CommandInputProps, "ref"> & react.RefAttributes<HTMLInputElement>>;
+    List: react.ForwardRefExoticComponent<Omit<CommandListProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+    Empty: react.ForwardRefExoticComponent<Omit<CommandEmptyProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+    Group: react.ForwardRefExoticComponent<Omit<CommandGroupProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+    Item: react.ForwardRefExoticComponent<Omit<CommandItemProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+    Separator: react.ForwardRefExoticComponent<Omit<CommandSeparatorProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+    Dialog: typeof CommandDialog;
+};
+
+declare const sizeStyles$1: {
+    readonly xs: {
+        readonly height: "h-6";
+        readonly padding: "px-1.5";
+        readonly textPadding: "px-1";
+        readonly icon: "w-6";
+    };
+    readonly sm: {
+        readonly height: "h-7";
+        readonly padding: "px-1.5";
+        readonly textPadding: "px-1";
+        readonly icon: "w-7";
+    };
+    readonly md: {
+        readonly height: "h-8";
+        readonly padding: "px-2";
+        readonly textPadding: "px-1";
+        readonly icon: "w-8";
+    };
+};
+type ToggleButtonSize = keyof typeof sizeStyles$1;
+interface ToggleButtonProps extends ComponentProps<typeof Toggle$1> {
+    /** Size of the toggle button */
+    size?: ToggleButtonSize;
+    /** Icon element rendered before the label */
+    iconLeft?: ReactNode;
+    /** Icon element rendered after the label */
+    iconRight?: ReactNode;
+}
+/**
+ * A two-state button that can be pressed or unpressed.
+ *
+ * Built on Base UI Toggle. Visually matches the Button component but
+ * toggles between pressed/unpressed states. Uses `data-[pressed]` for
+ * the active visual.
+ *
+ * Use standalone for single toggles (like a bold button in a toolbar).
+ * Use inside a `ToggleButtonGroup` for mutually exclusive or multi-select
+ * button groups.
+ */
+declare const ToggleButton: react.ForwardRefExoticComponent<Omit<ToggleButtonProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
+
+interface ButtonGroupProps extends ComponentPropsWithoutRef<"div"> {
+    /** Orientation of the group */
+    orientation?: "horizontal" | "vertical";
+}
+/**
+ * Groups buttons together visually by merging their borders.
+ *
+ * Use for static button groups (e.g. a split button with a dropdown trigger).
+ * For toggle button groups with selection state, use `ToggleButtonGroup`.
+ *
+ * Children should be `Button` or `ToggleButton` components. The group
+ * removes inner border radii and collapses adjacent borders so the buttons
+ * read as a single connected surface.
+ */
+declare const ButtonGroup: react.ForwardRefExoticComponent<ButtonGroupProps & react.RefAttributes<HTMLDivElement>>;
+interface ToggleButtonGroupProps<Value extends string = string> extends Omit<ComponentPropsWithoutRef<typeof ToggleGroup>, "value" | "defaultValue" | "onValueChange"> {
+    /** Controlled pressed values */
+    value?: readonly Value[];
+    /** Uncontrolled default pressed values */
+    defaultValue?: readonly Value[];
+    /** Called when the pressed states change */
+    onValueChange?: (value: Value[]) => void;
+    /** When false, only one toggle can be pressed at a time */
+    multiple?: boolean;
+    /** Orientation of the group */
+    orientation?: "horizontal" | "vertical";
+}
+/**
+ * Groups toggle buttons with shared selection state.
+ *
+ * Built on Base UI ToggleGroup. When `multiple` is false (default),
+ * pressing one button unpresses the others. When true, any combination
+ * of buttons can be pressed.
+ *
+ * Children should be `ToggleButton` components with `value` props.
+ */
+declare const ToggleButtonGroup: react.ForwardRefExoticComponent<ToggleButtonGroupProps<string> & react.RefAttributes<HTMLDivElement>>;
+
+interface RadioGroupRootProps extends ComponentProps<typeof RadioGroup$1> {
+    /** Layout direction. Default "vertical". */
+    orientation?: "horizontal" | "vertical";
+}
+declare const sizeStyles: {
+    readonly sm: {
+        readonly radio: "size-4";
+        readonly indicator: "size-1.5";
+        readonly label: "text-bruv-sm";
+    };
+    readonly md: {
+        readonly radio: "size-[18px]";
+        readonly indicator: "size-2";
+        readonly label: "text-bruv-base";
+    };
+};
+type RadioGroupItemSize = keyof typeof sizeStyles;
+interface RadioGroupItemProps extends ComponentProps<typeof Radio.Root> {
+    /** Size of the radio indicator */
+    size?: RadioGroupItemSize;
+    /** Label text rendered beside the radio */
+    label?: string;
+}
+interface RadioGroupCardProps {
+    /** Unique value identifying this card */
+    readonly value: string;
+    /** Card title */
+    readonly title: string;
+    /** Optional description below the title */
+    readonly description?: string;
+    /** Optional icon rendered to the left of the text */
+    readonly icon?: ReactNode;
+    /** Disable this card */
+    readonly disabled?: boolean;
+    readonly className?: string;
+}
+declare function Card({ value, title, description, icon, disabled, className, }: RadioGroupCardProps): react_jsx_runtime.JSX.Element;
+declare const RadioGroup: {
+    Root: react.ForwardRefExoticComponent<Omit<RadioGroupRootProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+    Item: react.ForwardRefExoticComponent<Omit<RadioGroupItemProps, "ref"> & react.RefAttributes<HTMLSpanElement>>;
+    Card: typeof Card;
+};
+
+interface SaveBarProps {
+    /** Whether the bar is visible (typically bound to a dirty flag). */
+    show: boolean;
+    /** Message shown inside the pill. Defaults to "You have unsaved changes". */
+    message?: ReactNode;
+    /** Label for the discard button. Defaults to "Reset". */
+    discardLabel?: string;
+    /** Label for the save button. Defaults to "Save changes". */
+    saveLabel?: string;
+    /** Called when the user clicks discard. */
+    onDiscard: () => void;
+    /** Called when the user clicks save. */
+    onSave: () => void;
+    /** Show a loading spinner on the save button. */
+    saving?: boolean;
+    /** Disable the save button (e.g. validation failure). */
+    saveDisabled?: boolean;
+    /** Trigger a shake animation to draw attention (e.g. when navigation is blocked). */
+    shake?: boolean;
+    className?: string;
+}
+/**
+ * Floating pill pinned to the bottom of the viewport.
+ * Slides up when a form has unsaved changes.
+ */
+declare const SaveBar: react.ForwardRefExoticComponent<SaveBarProps & react.RefAttributes<HTMLDivElement>>;
+
+type ActionBarPosition = "bottom" | "top";
+interface ActionBarProps {
+    /** Whether the bar is visible. Triggers the slide animation. */
+    show: boolean;
+    /** Selection count. Renders as `"{count} selected"` when no `message` is provided. */
+    count?: number;
+    /** Overrides the count-derived message. */
+    message?: ReactNode;
+    /** Anchor edge of the viewport. Defaults to `"bottom"`. */
+    position?: ActionBarPosition;
+    /** When set, renders an X clear button on the left and calls this on click. */
+    onClear?: () => void;
+    /** Accessible label for the clear button. */
+    clearLabel?: string;
+    /** Action buttons rendered on the right. */
+    actions?: ReactNode;
+    className?: string;
+}
+/**
+ * Floating pill anchored to the bottom (or top) of the viewport. Designed
+ * to surface bulk actions when items in a list or table are selected.
+ *
+ * The consumer controls visibility via `show`; the bar slides and fades
+ * in/out using the same motion recipe as `SaveBar`.
+ */
+declare const ActionBar: react.ForwardRefExoticComponent<ActionBarProps & react.RefAttributes<HTMLDivElement>>;
+
+declare const variantConfig: {
+    readonly primary: "bg-bruv-accent text-bruv-accent-on hover:bg-bruv-accent-strong active:bg-bruv-accent-strong";
+    readonly secondary: "bg-bruv-base-2 text-bruv-primary ring-1 ring-bruv-neutral hover:bg-bruv-subtle active:bg-bruv-subtle";
+    readonly danger: "bg-bruv-danger text-bruv-danger-on hover:bg-bruv-danger-strong active:bg-bruv-danger-strong";
+};
+declare const sizeConfig: {
+    readonly md: {
+        readonly circular: "size-12";
+        readonly extended: "h-12 gap-2.5 px-5";
+        readonly icon: "[&>svg]:size-5";
+    };
+    readonly lg: {
+        readonly circular: "size-14";
+        readonly extended: "h-14 gap-3 px-6";
+        readonly icon: "[&>svg]:size-6";
+    };
+};
+declare const positionConfig: {
+    readonly "bottom-right": "bottom-6 right-6";
+    readonly "bottom-left": "bottom-6 left-6";
+    readonly "top-right": "top-6 right-6";
+    readonly "top-left": "top-6 left-6";
+};
+type FabVariant = keyof typeof variantConfig;
+type FabSize = keyof typeof sizeConfig;
+type FabPosition = keyof typeof positionConfig;
+type FabAnchor = "viewport" | "container";
+interface FabProps extends Omit<ComponentProps<typeof Button$1>, "children" | "aria-label"> {
+    /**
+     * Accessible name. Required so icon-only FABs always expose a label
+     * to assistive tech; extended FABs should typically mirror their
+     * `children` text.
+     */
+    "aria-label": string;
+    /** Icon element rendered inside the FAB. Required. */
+    icon: ReactNode;
+    /** Visual style variant. */
+    variant?: FabVariant;
+    /** Size variant. */
+    size?: FabSize;
+    /** Corner of the anchoring box to pin to. */
+    position?: FabPosition;
+    /**
+     * What the FAB is positioned relative to:
+     * - `"viewport"` (default) — `position: fixed`, pinned to the browser
+     *   window. The natural choice for a production app.
+     * - `"container"` — `position: absolute`, pinned to the nearest
+     *   positioned ancestor. Useful inside cards, drawers, or previews
+     *   where you don't want the FAB to escape its panel.
+     */
+    anchor?: FabAnchor;
+    /** Render as an extended pill with the icon and a label. */
+    extended?: boolean;
+    /** Label rendered beside the icon when `extended`. */
+    children?: ReactNode;
+    /** Whether the FAB is visible. Triggers the scale-in animation. */
+    show?: boolean;
+}
+/**
+ * Floating action button anchored to a viewport corner. Use for a single
+ * primary action on a screen — e.g. "Compose", "Create", "Add".
+ *
+ * Set `extended` to widen the button into a pill with both icon and label.
+ */
+declare const Fab: react.ForwardRefExoticComponent<Omit<FabProps, "ref"> & react.RefAttributes<HTMLElement>>;
+
+type SettingsPageMaxWidth = "narrow" | "wide";
+interface SettingsPageProps {
+    /** Page title displayed at the top. */
+    title?: ReactNode;
+    /**
+     * Maximum content width.
+     * - `"narrow"` (default): 800px — for settings forms
+     * - `"wide"`: 1100px — for tables, permissions, dashboards
+     */
+    maxWidth?: SettingsPageMaxWidth;
+    /** Optional leading content rendered above the title (e.g. a back button). */
+    leading?: ReactNode;
+    /** Main page content (cards, forms, tables, etc.). */
+    children: ReactNode;
+    className?: string;
+}
+/**
+ * Content shell for settings pages.
+ *
+ * Centers content with a max-width constraint, provides consistent
+ * vertical spacing, and renders an optional page title. Designed
+ * to sit inside a `PageLayout` content area.
+ *
+ * ```tsx
+ * <SettingsPage title="General">
+ *   <SettingsCard title="Basic settings">
+ *     ...
+ *   </SettingsCard>
+ * </SettingsPage>
+ * ```
+ */
+declare const SettingsPage: react.ForwardRefExoticComponent<SettingsPageProps & react.RefAttributes<HTMLDivElement>>;
+
+type ToastVariant = "default" | "success" | "danger" | "warn" | "accent";
+type ToastPosition = "top-left" | "top-right" | "top-center" | "bottom-left" | "bottom-right" | "bottom-center";
+interface ToastData {
+    readonly id: string | number;
+    readonly title?: ReactNode;
+    readonly description?: ReactNode;
+    readonly variant?: ToastVariant;
+    readonly action?: ReactNode;
+    readonly duration?: number;
+    readonly dismissible?: boolean;
+    readonly position?: ToastPosition;
+    readonly onDismiss?: () => void;
+    readonly onAutoClose?: () => void;
+    /** @internal */
+    readonly delete?: boolean;
+    /** @internal Promise state tracking */
+    readonly promiseState?: "loading" | "success" | "error";
+}
+interface ExternalToastOptions extends Partial<Omit<ToastData, "id" | "title" | "variant" | "promiseState">> {
+    id?: string | number;
+}
+interface PromiseData<T = unknown> {
+    readonly loading: ReactNode;
+    readonly success: ReactNode | ((data: T) => ReactNode);
+    readonly error: ReactNode | ((error: unknown) => ReactNode);
+    readonly description?: ReactNode | ((data: T) => ReactNode);
+    readonly finally?: () => void;
+}
+declare function toastFn(message: ReactNode, options?: ExternalToastOptions): string | number;
+/**
+ * Imperative toast API. Call from anywhere — no hooks required.
+ *
+ * ```ts
+ * toast("Hello")
+ * toast.success("Saved!")
+ * toast.error("Failed", { description: "Check your connection" })
+ * toast.promise(asyncFn, { loading: "...", success: "...", error: "..." })
+ * toast.dismiss(id)
+ * ```
+ */
+declare const toast: typeof toastFn & {
+    success(message: ReactNode, options?: ExternalToastOptions): string | number;
+    error(message: ReactNode, options?: ExternalToastOptions): string | number;
+    warning(message: ReactNode, options?: ExternalToastOptions): string | number;
+    info(message: ReactNode, options?: ExternalToastOptions): string | number;
+    loading(message: ReactNode, options?: ExternalToastOptions): string | number;
+    promise<T>(promise: Promise<T> | (() => Promise<T>), data: PromiseData<T>, options?: ExternalToastOptions): string | number;
+    dismiss(id?: string | number): void;
+};
+interface ToasterProps {
+    /** Position of the toast stack. Default: `"bottom-right"` */
+    position?: ToastPosition;
+    /** Default duration in ms. Default: `4000` */
+    duration?: number;
+    /** Show close button on each toast. Default: `true` */
+    closeButton?: boolean;
+    /** Maximum number of visible toasts. Default: `3` */
+    visibleToasts?: number;
+    /** Gap between expanded toasts in px. Default: `14` */
+    gap?: number;
+    /** Distance from viewport edge in px. Default: `24` */
+    offset?: number;
+    /** Width of each toast in px. Default: `356` */
+    width?: number;
+    /** Additional className for the toaster container */
+    className?: string;
+}
+declare const Toaster: react.ForwardRefExoticComponent<ToasterProps & react.RefAttributes<HTMLElement>>;
+declare const Toast: {
+    Provider: react.ForwardRefExoticComponent<ToasterProps & react.RefAttributes<HTMLElement>>;
+};
+
+/**
+ * Return type for `useDirtyState`.
+ *
+ * Provides a draft/saved state pair with helpers for detecting changes,
+ * updating individual fields, discarding edits, and persisting them.
+ */
+interface DirtyState<T extends object> {
+    /** The current in-flight draft (may differ from saved). */
+    readonly draft: T;
+    /** The last-saved snapshot. */
+    readonly saved: T;
+    /** `true` when draft differs from saved. */
+    readonly dirty: boolean;
+    /** Replace the entire draft. */
+    readonly setDraft: React.Dispatch<React.SetStateAction<T>>;
+    /** Update a single field on the draft. */
+    readonly update: <K extends keyof T>(key: K, value: T[K]) => void;
+    /** Reset draft back to the saved snapshot. */
+    readonly discard: () => void;
+    /** Promote the current draft to saved (optimistic save). */
+    readonly save: () => void;
+}
+/**
+ * Manages a draft / saved state pair with built-in dirty detection.
+ *
+ * Replaces the repeated pattern across settings pages of:
+ * ```ts
+ * const [saved, setSaved] = useState(initial)
+ * const [draft, setDraft] = useState(initial)
+ * const dirty = JSON.stringify(draft) !== JSON.stringify(saved)
+ * const update = (key, value) => setDraft(prev => ({ ...prev, [key]: value }))
+ * ```
+ *
+ * @param initial – The starting state for both draft and saved.
+ */
+declare function useDirtyState<T extends object>(initial: T): DirtyState<T>;
+
+export { Accordion, type AccordionContentProps, type AccordionItemProps, type AccordionRootProps, type AccordionTriggerProps, ActionBar, type ActionBarPosition, type ActionBarProps, Alert, AlertDialog, type AlertDialogActionsProps, type AlertDialogBackdropProps, type AlertDialogCloseProps, type AlertDialogContentProps, type AlertDialogDescriptionProps, type AlertDialogPanelProps, type AlertDialogRootProps, type AlertDialogTitleProps, type AlertDialogTriggerProps, type AlertLayout, type AlertProps, type AlertVariant, AppHeader, type AppHeaderActionsProps, type AppHeaderBreadcrumbProps, type AppHeaderProps, Avatar, type AvatarProps, type AvatarSize, type AvatarVariant, Badge, type BadgeProps, type BadgeSize, type BadgeVariant, Breadcrumb, type BreadcrumbItem, type BreadcrumbOption, type BreadcrumbProps, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, type ButtonSize, type ButtonVariant, Calendar, type CalendarMode, type CalendarProps, type CalendarRangeValue, Card$1 as Card, type CardBodyProps, type CardContentProps, type CardHeaderProps, type CardProps, type CardSectionProps, Checkbox, type CheckboxProps, ColorPicker, type ColorPickerOption, type ColorPickerProps, type ColorPickerSize, Combobox, ComboboxButton, type ComboboxButtonProps, ComboboxContent, type ComboboxContentProps, ComboboxGroup, ComboboxGroupLabel, type ComboboxGroupLabelProps, type ComboboxGroupProps, type ComboboxItem, ComboboxOption, type ComboboxOptionProps, type ComboboxProps, ComboboxSeparator, type ComboboxSeparatorProps, ComboboxTrigger, type ComboboxTriggerProps, Command, type CommandDialogProps, type CommandEmptyProps, type CommandGroupProps, type CommandInputProps, type CommandItemProps, type CommandListProps, type CommandRootProps, type CommandSeparatorProps, ContextMenu, type ContextMenuContentProps, type ContextMenuItemProps, type ContextMenuLabelProps, type ContextMenuRootProps, type ContextMenuSeparatorProps, type ContextMenuTriggerProps, DataTable, DataTableActionCell, type DataTableActionCellProps, DataTableBulkBar, type DataTableBulkBarProps, DataTableColumnsButton, type DataTableColumnsButtonProps, type DataTableProps, DataTableSearch, type DataTableSearchProps, DataTableToolbar, type DataTableToolbarProps, DatePicker, type DatePickerProps, DateRangePicker, type DateRangePickerProps, type DateRangePickerValue, Dialog, type DialogBackdropProps, type DialogBodyProps, type DialogCloseProps, type DialogContentProps, type DialogFooterProps, type DialogPanelProps, type DialogRootProps, type DialogSize, type DialogTitleProps, type DialogTriggerProps, type DirtyState, Drawer, type DrawerBackdropProps, type DrawerBodyProps, type DrawerCloseProps, type DrawerContentProps, type DrawerDescriptionProps, type DrawerFooterProps, type DrawerHeaderProps, type DrawerRootProps, type DrawerTitleProps, type DrawerTriggerProps, DropdownMenu, type DropdownMenuContentProps, type DropdownMenuGroupProps, type DropdownMenuItemProps, type DropdownMenuLabelProps, type DropdownMenuRootProps, type DropdownMenuSeparatorProps, type DropdownMenuTriggerProps, EmptyState, type EmptyStateProps, type ExternalToastOptions, Fab, type FabAnchor, type FabPosition, type FabProps, type FabSize, type FabVariant, Filter, type FilterDateProps, type FilterDateRangePreset, type FilterDateRangeProps, type FilterDateRangeValue, type FilterMultiSelectProps, type FilterNumericRangeProps, type FilterNumericRangeValue, type FilterOption, type FilterSingleSelectProps, type FilterSliderProps, type FilterSliderValue, type FilterTextProps, type FilterToggleProps, FlickeringGrid, type FlickeringGridProps, Hover, HoverGroup, type HoverGroupProps, type HoverProps, Kbd, type KbdProps, NavLink, type NavLinkProps, type NavLinkSize, NavLinks, type NavLinksProps, NumberInput, type NumberInputProps, type NumberInputSize, OTP, type OTPProps, PageLayout, type PageLayoutBodyProps, type PageLayoutHeaderProps, type PageLayoutProps, Pagination, type PaginationProps, type PaginationSize, PixelSpinner, type PixelSpinnerProps, type PixelSpinnerVariant, Popover, type PopoverArrowProps, type PopoverCloseProps, type PopoverContentProps, type PopoverDescriptionProps, type PopoverRootProps, type PopoverTitleProps, type PopoverTriggerProps, Progress, ProgressCircular, type ProgressCircularProps, type ProgressProps, type PromiseData, RadioGroup, type RadioGroupItemProps, type RadioGroupItemSize, type RadioGroupRootProps, Resizable, ResizableHandle, type ResizableHandleProps, ResizablePanel, type ResizablePanelProps, type ResizableProps, SaveBar, type SaveBarProps, ScrollArea, type ScrollAreaProps, SegmentedControl, type SegmentedControlOption, type SegmentedControlProps, type SegmentedControlSize, Select, SelectButton, type SelectButtonProps, SelectContent, type SelectContentProps, SelectGroup, SelectGroupLabel, type SelectGroupLabelProps, type SelectGroupProps, type SelectItem, SelectOption, type SelectOptionProps, type SelectProps, SelectSeparator, type SelectSeparatorProps, SelectTrigger, type SelectTriggerProps, Separator, type SeparatorProps, SettingsCard, type SettingsCardProps, SettingsPage, type SettingsPageMaxWidth, type SettingsPageProps, SettingsRow, type SettingsRowActionProps, type SettingsRowContentProps, type SettingsRowControlProps, type SettingsRowDescriptionProps, type SettingsRowHeaderProps, type SettingsRowLabelProps, type SettingsRowRootProps, Sidebar, type SidebarBackLinkProps, type SidebarCollapseButtonProps, type SidebarGroupProps, type SidebarHeaderProps, type SidebarLabelProps, type SidebarLayersProps, type SidebarLinkComponent, type SidebarLinkProps, type SidebarProviderProps, type SidebarRootProps, type SidebarSectionProps, Skeleton, type SkeletonProps, Slider, type SliderProps, Spinner, type SpinnerProps, StatusDot, type StatusDotProps, type StatusDotSize, type StatusDotVariant, Stepper, type StepperProps, type StepperStep, Table, type TableBodyProps, type TableCellProps, type TableHeaderCellProps, type TableHeaderProps, type TableProps, type TableRowProps, Tabs, type TabsListProps, type TabsPanelProps, type TabsRootProps, type TabsTabProps, type TabsTabSize, TagsInput, type TagsInputProps, type ThemeMode, TimePicker, type TimePickerProps, Toast, type ToastData, type ToastPosition, type ToastVariant, Toaster, type ToasterProps, Toggle, ToggleButton, ToggleButtonGroup, type ToggleButtonGroupProps, type ToggleButtonProps, type ToggleButtonSize, type ToggleProps, Toolbar, ToolbarButton, type ToolbarButtonProps, type ToolbarProps, ToolbarSeparator, type ToolbarSeparatorProps, Tooltip, type TooltipContentProps, type TooltipProviderProps, type TooltipRootProps, type TooltipTriggerProps, type TooltipViewportProps, TreeView, type TreeViewItem, type TreeViewProps, UserMenu, type UserMenuItem, type UserMenuProps, type UserMenuUser, cn, createTooltipHandle, dateRangePresets, formatIsoDate, parseLocalDate, toast, useDirtyState, useIsMac, useSidebar };