@versaur/react 0.0.1 → 1.0.1

package/dist/blocks.d.ts

@@ -0,0 +1,1347 @@
+import { AppLayout as AppLayout_2 } from '@versaur/core/blocks';
+import { AttributeList as AttributeList_2 } from '@versaur/core/blocks';
+import { AvatarGroup as AvatarGroup_2 } from '@versaur/core/blocks';
+import { AvatarGroupAlign } from '@versaur/core/blocks';
+import { AvatarGroupDirection } from '@versaur/core/blocks';
+import { AvatarGroupSize } from '@versaur/core/blocks';
+import { AvatarGroupWrap } from '@versaur/core/blocks';
+import { BadgeGroup as BadgeGroup_2 } from '@versaur/core/blocks';
+import { BadgeGroupAlign } from '@versaur/core/blocks';
+import { BadgeGroupDirection } from '@versaur/core/blocks';
+import { BadgeGroupGap } from '@versaur/core/blocks';
+import { BadgeGroupWrap } from '@versaur/core/blocks';
+import { ButtonGroup as ButtonGroup_2 } from '@versaur/core/blocks';
+import { ButtonGroupAlign } from '@versaur/core/blocks';
+import { ButtonGroupDirection } from '@versaur/core/blocks';
+import { ButtonGroupGap } from '@versaur/core/blocks';
+import { ButtonGroupWrap } from '@versaur/core/blocks';
+import { ButtonHTMLAttributes } from 'react';
+import { CardAlign } from '@versaur/core/blocks';
+import { CardBorder } from '@versaur/core/blocks';
+import { CardGap } from '@versaur/core/blocks';
+import { CardJustify } from '@versaur/core/blocks';
+import { CardSize } from '@versaur/core/blocks';
+import { ComponentPropsWithoutRef } from 'react';
+import { ComponentType } from 'react';
+import { default as default_2 } from 'react';
+import { DialogHTMLAttributes } from 'react';
+import { Drawer as Drawer_2 } from '@versaur/core/blocks';
+import { ElementType } from 'react';
+import { ForwardRefExoticComponent } from 'react';
+import { HTMLAttributes } from 'react';
+import { Menu as Menu_2 } from '@versaur/core/blocks';
+import { Modal as Modal_2 } from '@versaur/core/blocks';
+import { MouseEvent as MouseEvent_2 } from 'react';
+import { ReactNode } from 'react';
+import { RefAttributes } from 'react';
+import { SVGProps } from 'react';
+import { TableCellVariant } from '@versaur/core/blocks';
+import { TdHTMLAttributes } from 'react';
+import { ThHTMLAttributes } from 'react';
+
+export declare const AppLayout: AppLayoutType;
+
+declare interface AppLayoutBodyProps {
+    className?: string;
+    children?: ReactNode;
+}
+
+declare interface AppLayoutMainProps extends AppLayoutRegionProps {
+    /**
+     * Controls content width constraint and alignment.
+     * - 'full-width': Content uses the entire main area width
+     * - 'centred': Content is constrained to max-width and centered
+     * @default 'full-width'
+     */
+    placement?: AppLayout_2.Placement;
+}
+
+export declare interface AppLayoutRegionProps {
+    className?: string;
+    children?: ReactNode;
+}
+
+export declare interface AppLayoutRootProps {
+    variant?: AppLayout_2.Variant;
+    hideHeader?: boolean;
+    hideBottom?: boolean;
+    className?: string;
+    children?: ReactNode;
+}
+
+declare interface AppLayoutType extends ForwardRefExoticComponent<AppLayoutRootProps & RefAttributes<HTMLDivElement>> {
+    Body: ForwardRefExoticComponent<AppLayoutBodyProps & RefAttributes<HTMLDivElement>>;
+    Bottom: ForwardRefExoticComponent<AppLayoutRegionProps & RefAttributes<HTMLElement>>;
+    Header: ForwardRefExoticComponent<AppLayoutRegionProps & RefAttributes<HTMLElement>>;
+    Main: ForwardRefExoticComponent<AppLayoutMainProps & RefAttributes<HTMLElement>>;
+    SideLeft: ForwardRefExoticComponent<AppLayoutRegionProps & RefAttributes<HTMLElement>>;
+    SideRight: ForwardRefExoticComponent<AppLayoutRegionProps & RefAttributes<HTMLElement>>;
+}
+
+declare interface AsProp<C extends ElementType = ElementType> {
+    as?: C;
+}
+
+export declare namespace AttributeList {
+    export type Columns = AttributeList_2.Columns;
+    export type ColumnSpan = AttributeList_2.ColumnSpan;
+    export type ContentLineClamp = AttributeList_2.ContentLineClamp;
+    export type Props = AttributeListProps;
+    export type ItemProps = AttributeListItemProps;
+}
+
+export declare const AttributeList: AttributeListComponent;
+
+declare interface AttributeListComponent extends default_2.ForwardRefExoticComponent<AttributeListProps & default_2.RefAttributes<HTMLDListElement>> {
+    Item: typeof AttributeListItem;
+}
+
+/**
+ * AttributeList.Item component for displaying a key-value pair
+ *
+ * @example
+ * ```tsx
+ * <AttributeList.Item columnSpan="2" title="Email">
+ *   john.doe@example.com
+ * </AttributeList.Item>
+ * ```
+ */
+declare const AttributeListItem: ForwardRefExoticComponent<AttributeListItemProps & RefAttributes<HTMLDivElement>>;
+
+export declare interface AttributeListItemProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * The title/label for this attribute
+     */
+    title: string;
+    /**
+     * Number of columns to span in the grid (1-6, auto-clamped to columns count)
+     * @default '1'
+     */
+    columnSpan?: AttributeList_2.ColumnSpan;
+    /**
+     * Number of lines to display before truncating with ellipsis (1-5)
+     * @default '2'
+     */
+    contentLineClamp?: AttributeList_2.ContentLineClamp;
+    /**
+     * The value content (can be text, links, badges, etc.)
+     */
+    children?: ReactNode;
+}
+
+export declare interface AttributeListProps extends HTMLAttributes<HTMLDListElement> {
+    /**
+     * Number of columns for the grid layout
+     * @default '3'
+     */
+    columns?: AttributeList_2.Columns;
+    /**
+     * AttributeList.Item components
+     */
+    children?: ReactNode;
+}
+
+export declare const AvatarGroup: ForwardRefExoticComponent<AvatarGroupProps & RefAttributes<HTMLDivElement>>;
+
+export { AvatarGroupAlign }
+
+export { AvatarGroupDirection }
+
+export declare interface AvatarGroupProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Direction of the avatar stack
+     * @default 'horizontal'
+     */
+    direction?: AvatarGroup_2.Direction;
+    /**
+     * Size controls the overlap amount between avatars
+     * @default 'md'
+     */
+    size?: AvatarGroup_2.Size;
+    /**
+     * Alignment of items
+     * @default 'center'
+     */
+    align?: AvatarGroup_2.Align;
+    /**
+     * Flex wrap behavior
+     * @default 'nowrap'
+     */
+    wrap?: AvatarGroup_2.Wrap;
+    /**
+     * Accessible label for the group
+     * @default 'Avatar group'
+     */
+    "aria-label"?: string;
+}
+
+export { AvatarGroupSize }
+
+export { AvatarGroupWrap }
+
+/**
+ * BadgeGroup component for grouping multiple badges with customizable spacing and layout
+ *
+ * @example
+ * ```tsx
+ * <BadgeGroup gap="md" direction="horizontal" align="center">
+ *   <Badge variant="primary">New</Badge>
+ *   <Badge variant="success">Active</Badge>
+ *   <Badge variant="danger">Critical</Badge>
+ * </BadgeGroup>
+ * ```
+ */
+export declare const BadgeGroup: ForwardRefExoticComponent<BadgeGroupProps & RefAttributes<HTMLDivElement>>;
+
+export { BadgeGroupAlign }
+
+export { BadgeGroupDirection }
+
+export { BadgeGroupGap }
+
+export declare interface BadgeGroupProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Gap between items
+     * @default 'md'
+     */
+    gap?: BadgeGroup_2.Gap;
+    /**
+     * Direction of flex layout
+     * @default 'horizontal'
+     */
+    direction?: BadgeGroup_2.Direction;
+    /**
+     * Alignment of items
+     * @default 'center'
+     */
+    align?: BadgeGroup_2.Align;
+    /**
+     * Flex wrap behavior
+     * @default 'nowrap'
+     */
+    wrap?: BadgeGroup_2.Wrap;
+    /**
+     * Accessible label for the group
+     * @default 'Badge group'
+     */
+    "aria-label"?: string;
+    /**
+     * Badge children components
+     */
+    children?: React.ReactNode;
+}
+
+export { BadgeGroupWrap }
+
+/**
+ * Compound BottomBar component with sub-components
+ */
+export declare const BottomBar: BottomBarComponent;
+
+/**
+ * BottomBar Component - Compound component with item sub-component
+ */
+declare interface BottomBarComponent extends React.ForwardRefExoticComponent<BottomBarRootProps_2 & React.RefAttributes<HTMLElement>> {
+    Item: typeof BottomBarItem;
+}
+
+/**
+ * BottomBar.Item - Polymorphic navigation item (button or link)
+ */
+declare const BottomBarItem: ForwardRefExoticComponent<BottomBarItemProps_2 & RefAttributes<HTMLElement>>;
+
+/**
+ * BottomBar.Item Props
+ */
+export declare interface BottomBarItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    as?: "button" | "a" | React.ComponentType<any>;
+    href?: string;
+    active?: boolean;
+    disabled?: boolean;
+    icon: ReactNode;
+    children?: ReactNode;
+}
+
+/**
+ * BottomBar.Item Props
+ */
+declare interface BottomBarItemProps_2 extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    as?: "button" | "a" | React.ComponentType<any>;
+    href?: string;
+    active?: boolean;
+    disabled?: boolean;
+    icon: ReactNode;
+    children?: ReactNode;
+}
+
+/**
+ * BottomBar.Root Props
+ */
+export declare interface BottomBarRootProps extends React.HTMLAttributes<HTMLElement> {
+    children?: ReactNode;
+}
+
+/**
+ * BottomBar.Root Props
+ */
+declare interface BottomBarRootProps_2 extends React.HTMLAttributes<HTMLElement> {
+    children?: ReactNode;
+}
+
+export declare const BottomSheet: ForwardRefExoticComponent<BottomSheetRootProps & RefAttributes<HTMLDialogElement>> & {
+    Body: ForwardRefExoticComponent<OverlayBodyProps & RefAttributes<HTMLDivElement>>;
+    CloseButton: ForwardRefExoticComponent<BottomSheetCloseButtonProps & RefAttributes<HTMLButtonElement>>;
+    Footer: ForwardRefExoticComponent<OverlayFooterProps & RefAttributes<HTMLDivElement>>;
+    Header: ForwardRefExoticComponent<OverlayHeaderProps & RefAttributes<HTMLDivElement>>;
+    Title: ForwardRefExoticComponent<OverlayTitleProps & RefAttributes<HTMLHeadingElement>>;
+};
+
+export declare interface BottomSheetCloseButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    children?: ReactNode;
+}
+
+export declare interface BottomSheetRootProps extends Omit<DialogHTMLAttributes<HTMLDialogElement>, "onClose"> {
+    /**
+     * Whether the bottom sheet is open - controlled state
+     */
+    open: boolean;
+    /**
+     * Callback when bottom sheet closes
+     */
+    onOpenChange?: (open: boolean) => void;
+    children?: ReactNode;
+}
+
+/**
+ * ButtonGroup component for grouping multiple buttons with customizable spacing and layout
+ *
+ * @example
+ * ```tsx
+ * <ButtonGroup gap="md" direction="horizontal" align="center">
+ *   <Button variant="primary">Save</Button>
+ *   <Button variant="secondary">Cancel</Button>
+ * </ButtonGroup>
+ * ```
+ */
+export declare const ButtonGroup: ForwardRefExoticComponent<ButtonGroupProps & RefAttributes<HTMLDivElement>>;
+
+export { ButtonGroupAlign }
+
+export { ButtonGroupDirection }
+
+export { ButtonGroupGap }
+
+export declare interface ButtonGroupProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Gap between items
+     * @default 'md'
+     */
+    gap?: ButtonGroup_2.Gap;
+    /**
+     * Direction of flex layout
+     * @default 'horizontal'
+     */
+    direction?: ButtonGroup_2.Direction;
+    /**
+     * Alignment of items
+     * @default 'center'
+     */
+    align?: ButtonGroup_2.Align;
+    /**
+     * Flex wrap behavior
+     * @default 'nowrap'
+     */
+    wrap?: ButtonGroup_2.Wrap;
+    /**
+     * Stretch group to full width and children proportionally
+     * @default false
+     */
+    fluid?: boolean;
+    /**
+     * Accessible label for the group
+     * @default 'Button group'
+     */
+    "aria-label"?: string;
+    /**
+     * Button children components
+     */
+    children?: React.ReactNode;
+}
+
+export { ButtonGroupWrap }
+
+export declare const Card: CardComponent;
+
+export { CardAlign }
+
+/**
+ * Card Body - Flexible column layout container for main content
+ * Supports alignment and spacing controls
+ */
+declare const CardBody: ForwardRefExoticComponent<CardBodyProps & RefAttributes<HTMLDivElement>>;
+
+export declare interface CardBodyProps extends HTMLAttributes<HTMLDivElement> {
+    /** Horizontal alignment of items */
+    align?: CardAlign;
+    /** Internal spacing between items */
+    gap?: CardGap;
+    children?: ReactNode;
+}
+
+export declare interface CardButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Card size variant */
+    size?: CardSize;
+    /** Border style variant */
+    border?: CardBorder;
+    /** Children to render inside card */
+    children?: ReactNode;
+}
+
+/**
+ * Card Component - Compound component with layout regions
+ */
+declare interface CardComponent extends React.ForwardRefExoticComponent<CardRootProps & React.RefAttributes<HTMLDivElement | HTMLButtonElement>> {
+    Header: typeof CardHeader;
+    Body: typeof CardBody;
+    Footer: typeof CardFooter;
+}
+
+/**
+ * Card Footer - Flexible layout container for bottom section
+ * Supports alignment and spacing controls
+ */
+declare const CardFooter: ForwardRefExoticComponent<CardFooterProps & RefAttributes<HTMLDivElement>>;
+
+export declare interface CardFooterProps extends HTMLAttributes<HTMLDivElement> {
+    /** Flex justify-content alignment */
+    justify?: CardJustify;
+    /** Internal spacing between items */
+    gap?: CardGap;
+    children?: ReactNode;
+}
+
+export { CardGap }
+
+/**
+ * Card Header - Flexible layout container for top section
+ * Supports alignment and spacing controls
+ */
+declare const CardHeader: ForwardRefExoticComponent<CardHeaderProps & RefAttributes<HTMLDivElement>>;
+
+export declare interface CardHeaderProps extends HTMLAttributes<HTMLDivElement> {
+    /** Flex justify-content alignment */
+    justify?: CardJustify;
+    /** Internal spacing between items */
+    gap?: CardGap;
+    children?: ReactNode;
+}
+
+export { CardJustify }
+
+export declare interface CardRootProps extends Omit<HTMLAttributes<HTMLDivElement>, "as"> {
+    /** Rendering element: 'div' (default) or 'button' */
+    as?: "div" | "button";
+    /** Card size variant */
+    size?: CardSize;
+    /** Border style variant */
+    border?: CardBorder;
+    /** Children to render inside card */
+    children?: ReactNode;
+}
+
+export { CardSize }
+
+export declare const Dialog: default_2.ForwardRefExoticComponent<DialogRootProps & default_2.RefAttributes<HTMLDialogElement>>;
+
+/**
+ * Props for the Dialog root component
+ */
+export declare interface DialogRootProps extends React.DialogHTMLAttributes<HTMLDialogElement> {
+    /** Controlled open state */
+    isOpen: boolean;
+    /** Called when dialog should close (e.g., ESC key) */
+    onOpenChange?: (isOpen: boolean) => void;
+    /** Dialog content */
+    children: React.ReactNode;
+}
+
+export declare const Drawer: ForwardRefExoticComponent<DrawerRootProps & RefAttributes<HTMLDialogElement>> & {
+    Body: ForwardRefExoticComponent<OverlayBodyProps & RefAttributes<HTMLDivElement>>;
+    CloseButton: ForwardRefExoticComponent<DrawerCloseButtonProps & RefAttributes<HTMLButtonElement>>;
+    Footer: ForwardRefExoticComponent<OverlayFooterProps & RefAttributes<HTMLDivElement>>;
+    Header: ForwardRefExoticComponent<DrawerHeaderProps & RefAttributes<HTMLDivElement>>;
+    Title: ForwardRefExoticComponent<OverlayTitleProps & RefAttributes<HTMLHeadingElement>>;
+};
+
+export declare interface DrawerCloseButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    children?: ReactNode;
+}
+
+declare interface DrawerHeaderProps extends Omit<OverlayHeaderProps, "children"> {
+    /**
+     * Header action row (title, close button, etc.)
+     * If not provided, children will be rendered as the action row.
+     * When provided, children become supplementary content in flex-column layout.
+     */
+    action?: ReactNode;
+    /**
+     * Supplementary header content (badges, status info, etc.)
+     * Displayed in flex-column layout below the action row.
+     * If action prop is not provided, this becomes the action row instead.
+     */
+    children?: ReactNode;
+    /**
+     * Optional Tabs component rendered below the header content.
+     * When provided, the Tabs component's bottom border replaces the header's own border-bottom.
+     */
+    tabs?: ReactNode;
+}
+
+export declare interface DrawerRootProps extends Omit<DialogHTMLAttributes<HTMLDialogElement>, "onClose"> {
+    /**
+     * Whether the drawer is open (controlled state)
+     */
+    open: boolean;
+    /**
+     * Callback when drawer closes (ESC key, backdrop click, or close button)
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Placement of the drawer
+     * @default 'right'
+     */
+    placement?: Drawer_2.Placement;
+    children?: ReactNode;
+}
+
+/**
+ * Helper function to get attributes for tabpanel elements
+ *
+ * @param value - The tab value identifier
+ * @returns Object with id, role, and aria-labelledby attributes
+ *
+ * @example
+ * ```tsx
+ * <div {...Tabs.getPanelAttribute("tab1")}>
+ *   Panel content for tab 1
+ * </div>
+ * ```
+ */
+declare function getPanelAttribute(value: string): TabsPanelAttributes;
+
+export declare namespace Menu {
+    export type Placement = MenuPlacement;
+    export type DataAttrs = Menu_2.DataAttrs;
+    export type Props = MenuProps;
+    export type ItemProps = MenuItemProps;
+}
+
+export declare const Menu: typeof Menu_3 & {
+    Item: typeof MenuItem;
+};
+
+/**
+ * Attach static methods to component
+ */
+declare const Menu_3: typeof MenuRoot & MenuStatic;
+
+/**
+ * Trigger props options for external trigger elements
+ */
+declare interface MenuGetTriggerPropsOptions {
+    /**
+     * Unique identifier matching the Menu's id
+     */
+    id: string;
+}
+
+/**
+ * Menu.Item - Individual menu item
+ *
+ * @description
+ * A clickable menu item that can be selected and may trigger menu closure
+ * depending on the parent Menu's `closeOnClick` setting.
+ *
+ * When clicked:
+ * 1. If Menu has `onChange` and item has `value`, onChange is called
+ * 2. Item's `onClick` handler is called
+ * 3. If Menu has `closeOnClick: true`, the menu will close after steps 1-2
+ *
+ * @example
+ * ```tsx
+ * // Menu stays open on click (default)
+ * const [selected, setSelected] = useState<string>();
+ * <Menu id="menu-1" value={selected} onChange={setSelected}>
+ *   <Menu.Item value="edit">Edit</Menu.Item>
+ *   <Menu.Item value="delete" onClick={() => console.log('deleting')}>Delete</Menu.Item>
+ * </Menu>
+ *
+ * // Menu closes on click
+ * <Menu id="menu-2" value={selected} onChange={setSelected} closeOnClick>
+ *   <Menu.Item value="option1">Option 1</Menu.Item>
+ *   <Menu.Item value="option2">Option 2</Menu.Item>
+ * </Menu>
+ * ```
+ */
+declare const MenuItem: ForwardRefExoticComponent<MenuItemProps & RefAttributes<HTMLButtonElement>>;
+
+/**
+ * Menu Item Props
+ *
+ * @description
+ * Represents an individual menu item that can be clicked to select a value.
+ * Items support active state (when their value matches Menu's controlled value),
+ * disabled state, and optional icons on both sides.
+ *
+ * When clicked:
+ * - If Menu has `onChange`, the item's value is passed to it
+ * - The item's `onClick` handler is also called
+ * - If Menu has `closeOnClick: true`, the menu popover will close
+ *
+ * @example
+ * ```tsx
+ * <Menu id="menu-1" value={selected} onChange={setSelected} closeOnClick>
+ *   <Menu.Item value="edit" leftIcon={<EditIcon />}>Edit</Menu.Item>
+ *   <Menu.Item value="delete" leftIcon={<TrashIcon />}>Delete</Menu.Item>
+ * </Menu>
+ * ```
+ */
+export declare interface MenuItemProps extends Omit<HTMLAttributes<HTMLButtonElement>, "onChange"> {
+    /**
+     * Unique identifier for this menu item
+     * Used to determine active state when Menu has value/onChange
+     */
+    value?: string | number;
+    /**
+     * Item label/content
+     */
+    children: ReactNode;
+    /**
+     * Optional left icon/content
+     */
+    leftIcon?: ReactNode;
+    /**
+     * Optional right icon/content
+     */
+    rightIcon?: ReactNode;
+    /**
+     * Whether this item is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Click handler for the item
+     * Fired in addition to Menu's onChange if using controlled mode.
+     * If Menu has closeOnClick: true, this fires before the menu closes.
+     */
+    onClick?: (e: MouseEvent_2<HTMLButtonElement>) => void;
+}
+
+export declare type MenuPlacement = "top" | "bottom" | "left" | "right";
+
+/**
+ * Menu Root Props
+ */
+export declare interface MenuProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
+    /**
+     * Unique identifier for the menu (used with Menu.close())
+     */
+    id: string;
+    /**
+     * Menu content (Menu.Item components)
+     */
+    children: ReactNode;
+    /**
+     * Placement relative to trigger button
+     * @default "bottom"
+     */
+    placement?: MenuPlacement;
+    /**
+     * Maximum height of the menu list in pixels
+     * @default 400
+     */
+    maxHeight?: number;
+    /**
+     * Minimum width of the menu list in pixels
+     * @default 160
+     */
+    minWidth?: number;
+    /**
+     * Maximum width of the menu list in pixels
+     * @default 320
+     */
+    maxWidth?: number;
+    /**
+     * Gap between trigger and menu in pixels
+     * @default 8
+     */
+    gap?: number;
+    /**
+     * Controlled value - which menu item is currently selected
+     */
+    value?: string | number;
+    /**
+     * Callback when a menu item is selected
+     */
+    onChange?: (value: string | number) => void;
+    /**
+     * Whether to close the menu when an item is clicked
+     * @default false
+     */
+    closeOnClick?: boolean;
+}
+
+/**
+ * Menu - Dropdown menu component built on Tooltip's Popover API
+ *
+ * Supports both uncontrolled and controlled modes for selection.
+ * By default, the menu stays open when items are clicked.
+ * Set `closeOnClick` to automatically dismiss the menu on item selection.
+ *
+ * Internally uses Tooltip for positioning and popover management.
+ *
+ * @example
+ * ```tsx
+ * // Uncontrolled - menu stays open on click
+ * <button {...Menu.getTriggerProps({ id: "menu-1" })}>More</button>
+ * <Menu id="menu-1">
+ *   <Menu.Item value="edit" onClick={() => console.log('editing')}>Edit</Menu.Item>
+ *   <Menu.Item value="delete">Delete</Menu.Item>
+ * </Menu>
+ *
+ * // Controlled with auto-close
+ * const [selected, setSelected] = useState<string | number>();
+ * <button {...Menu.getTriggerProps({ id: "menu-1" })}>Actions</button>
+ * <Menu id="menu-1" value={selected} onChange={setSelected} closeOnClick>
+ *   <Menu.Item value="save">Save</Menu.Item>
+ *   <Menu.Item value="export">Export</Menu.Item>
+ *   <Menu.Item value="delete">Delete</Menu.Item>
+ * </Menu>
+ *
+ * // Programmatic close (Menu.close delegates to Tooltip.close)
+ * <button onClick={() => Menu.close({ id: "menu-1" })}>Close Menu</button>
+ * ```
+ */
+declare const MenuRoot: ForwardRefExoticComponent<MenuProps & RefAttributes<HTMLDivElement>>;
+
+/**
+ * Menu static methods and properties
+ */
+declare interface MenuStatic {
+    /**
+     * Menu.Item component
+     */
+    Item: ForwardRefExoticComponent<MenuItemProps & RefAttributes<HTMLButtonElement>>;
+    /**
+     * Get the required attributes for a trigger element
+     */
+    getTriggerProps(options: MenuGetTriggerPropsOptions): Record<string, unknown>;
+    /**
+     * Close a menu popover by id
+     * Convenience method that delegates to Tooltip.close()
+     *
+     * @example
+     * ```tsx
+     * Menu.close({ id: "my-menu" })
+     * ```
+     */
+    close(options: {
+        id: string;
+    }): void;
+}
+
+export declare const Modal: ForwardRefExoticComponent<ModalRootProps & RefAttributes<HTMLDialogElement>> & {
+    Body: ForwardRefExoticComponent<OverlayBodyProps & RefAttributes<HTMLDivElement>>;
+    CloseButton: ForwardRefExoticComponent<ModalCloseButtonProps & RefAttributes<HTMLButtonElement>>;
+    Footer: ForwardRefExoticComponent<ModalFooterProps & RefAttributes<HTMLDivElement>>;
+    Header: ForwardRefExoticComponent<ModalHeaderProps & RefAttributes<HTMLDivElement>>;
+    Title: ForwardRefExoticComponent<OverlayTitleProps & RefAttributes<HTMLHeadingElement>>;
+};
+
+export declare interface ModalCloseButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    children?: ReactNode;
+}
+
+declare interface ModalFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Footer content alignment
+     * @default 'end'
+     */
+    align?: "start" | "center" | "end";
+    children?: ReactNode;
+}
+
+declare interface ModalHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Optional action element (e.g., close button) to display in header
+     */
+    action?: ReactNode;
+    children?: ReactNode;
+}
+
+export declare interface ModalRootProps extends Omit<DialogHTMLAttributes<HTMLDialogElement>, "onClose"> {
+    /**
+     * Whether the modal is open - controlled state
+     */
+    open: boolean;
+    /**
+     * Callback when modal closes
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Width preset
+     * @default undefined — uses base 600px width
+     */
+    size?: Modal_2.Size;
+    /**
+     * Vertical position within the viewport
+     * @default 'center'
+     */
+    position?: Modal_2.Position;
+    children?: ReactNode;
+}
+
+/**
+ * Namespace merging: Nav.Item syntax
+ */
+export declare const Nav: ForwardRefExoticComponent<NavProps & RefAttributes<HTMLElement>> & {
+    Item: ForwardRefExoticComponent<Omit<NavItemProps, "ref"> & RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
+};
+
+/**
+ * NavItem - Polymorphic navigation item
+ *
+ * Renders as button by default, but supports any element type (a, Link, custom).
+ * Supports left and right icons for flexible composition.
+ *
+ * Can be used in two modes:
+ * - Uncontrolled: Pass `active` prop and handle clicks with `onClick`
+ * - Controlled: Use within Nav with `value` and let Nav manage active state
+ *
+ * @example
+ * ```tsx
+ * // Uncontrolled
+ * <Nav>
+ *   <Nav.Item active onClick={handleHome}>Home</Nav.Item>
+ *   <Nav.Item>Docs</Nav.Item>
+ * </Nav>
+ *
+ * // Controlled (recommended)
+ * const [active, setActive] = useState('home');
+ * <Nav value={active} onChange={setActive}>
+ *   <Nav.Item value="home">Home</Nav.Item>
+ *   <Nav.Item value="docs">Docs</Nav.Item>
+ * </Nav>
+ *
+ * // With icons
+ * <Nav.Item leftIcon={HomeIcon} value="home">Home</Nav.Item>
+ * <Nav.Item rightIcon={ChevronIcon} value="more">More</Nav.Item>
+ * ```
+ */
+export declare const NavItem: ForwardRefExoticComponent<Omit<NavItemProps, "ref"> & RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
+
+/**
+ * NavItem base props
+ */
+declare interface NavItemBaseProps {
+    /**
+     * Whether this nav item represents current page (uncontrolled)
+     * Sets aria-current="page" for anchor/Link elements
+     * Ignored if Nav has value/onChange (controlled mode)
+     */
+    active?: boolean;
+    /**
+     * Unique identifier for this item in controlled mode
+     * When Nav has onChange, this value is passed to onChange when clicked
+     */
+    value?: string | number;
+    /**
+     * Icon to render on the left side of the text
+     */
+    leftIcon?: ComponentType<SVGProps<SVGSVGElement>>;
+    /**
+     * Icon to render on the right side of the text
+     */
+    rightIcon?: ComponentType<SVGProps<SVGSVGElement>>;
+    /**
+     * Loading state - disables interaction and shows visual loading indicator
+     */
+    loading?: boolean;
+    /**
+     * Disabled state - prevents all interactions
+     */
+    disabled?: boolean;
+    children?: ReactNode;
+}
+
+/**
+ * Polymorphic NavItem type
+ * Defaults to "button" but supports "a", Next.js Link, React Router Link, or any custom component
+ */
+export declare type NavItemProps<C extends ElementType = ElementType> = PolymorphicProps<C, NavItemBaseProps>;
+
+/**
+ * Nav props
+ */
+export declare interface NavProps extends Omit<HTMLAttributes<HTMLElement>, "onChange"> {
+    /**
+     * Layout direction for the navigation container
+     * @default "horizontal"
+     */
+    direction?: "horizontal" | "vertical";
+    /**
+     * Gap between nav items
+     * Uses Versaur spacing scale: xs, sm, md, lg
+     */
+    gap?: "xs" | "sm" | "md" | "lg";
+    /**
+     * Controlled value - which nav item is currently active
+     * @default undefined
+     */
+    value?: string | number;
+    /**
+     * Callback when a nav item is selected
+     */
+    onChange?: (value: string | number) => void;
+    children?: ReactNode;
+}
+
+/**
+ * NoResults component - displays an empty state with icon, title, subtitle, and optional action
+ *
+ * Perfect for search results, filtered lists, or any empty data scenarios.
+ * Uses semantic HTML with proper accessibility attributes.
+ *
+ * @example
+ * ```tsx
+ * import { NoResults } from '@versaur/react';
+ * import { SearchIcon } from '@versaur/icons';
+ *
+ * <NoResults
+ *   icon={SearchIcon}
+ *   title="No results found"
+ *   subtitle="We couldn't find any items matching your search criteria."
+ *   action={<Button variant="primary">Clear Search</Button>}
+ * />
+ * ```
+ */
+export declare const NoResults: ForwardRefExoticComponent<NoResultsProps & RefAttributes<HTMLElement>>;
+
+/**
+ * NoResults component props
+ * @property icon - Icon component to display (e.g., SearchIcon from @versaur/icons)
+ * @property title - Main heading text for the empty state
+ * @property subtitle - Optional secondary descriptive text
+ * @property action - Optional action element (typically a Button)
+ */
+export declare interface NoResultsProps extends HTMLAttributes<HTMLElement> {
+    /**
+     * Icon component to render
+     * @required
+     */
+    icon: ComponentType<SVGProps<SVGSVGElement>>;
+    /**
+     * Main heading text for the empty state
+     * @required
+     */
+    title: string;
+    /**
+     * Secondary descriptive text
+     * @optional
+     */
+    subtitle?: string | ReactNode;
+    /**
+     * Action element to render below content
+     * Typically a Button component
+     * @optional
+     */
+    action?: ReactNode;
+}
+
+declare interface OverlayBodyProps extends HTMLAttributes<HTMLDivElement> {
+    children?: ReactNode;
+}
+
+declare interface OverlayFooterProps extends HTMLAttributes<HTMLDivElement> {
+    children?: ReactNode;
+}
+
+declare interface OverlayHeaderProps extends HTMLAttributes<HTMLDivElement> {
+    children?: ReactNode;
+}
+
+declare interface OverlayTitleProps extends HTMLAttributes<HTMLHeadingElement> {
+    children?: ReactNode;
+    /**
+     * The HTML element to render as
+     * @default 'h2'
+     */
+    as?: ElementType;
+}
+
+declare type PolymorphicProps<C extends ElementType = ElementType, Props = {}> = Props & AsProp<C> & Omit<React.ComponentPropsWithoutRef<C>, keyof Props | "as">;
+
+/**
+ * Compound Sidebar component with sub-components
+ */
+export declare const Sidebar: SidebarType;
+
+export declare interface SidebarBodyProps {
+    className?: string;
+    children?: ReactNode;
+}
+
+export declare interface SidebarDividerProps extends HTMLAttributes<HTMLDivElement> {
+}
+
+export declare interface SidebarFooterProps {
+    className?: string;
+    children?: ReactNode;
+}
+
+export declare interface SidebarGroupProps {
+    label?: ReactNode;
+    icon: ReactNode;
+    defaultExpanded?: boolean;
+    isExpanded?: boolean;
+    onExpandedChange?: (expanded: boolean) => void;
+    className?: string;
+    children?: ReactNode;
+}
+
+export declare interface SidebarHeaderProps {
+    className?: string;
+    children?: ReactNode;
+}
+
+declare interface SidebarItemListProps {
+    className?: string;
+    children?: ReactNode;
+}
+
+export declare type SidebarItemProps<T extends ElementType = "button"> = {
+    as?: T;
+    active?: boolean;
+    disabled?: boolean;
+    icon?: ReactNode;
+    action?: ReactNode;
+    className?: string;
+    children?: ReactNode;
+} & Omit<ComponentPropsWithoutRef<T>, "children">;
+
+export declare interface SidebarRootProps {
+    className?: string;
+    children?: ReactNode;
+}
+
+declare interface SidebarType extends ForwardRefExoticComponent<SidebarRootProps & RefAttributes<HTMLElement>> {
+    Header: ForwardRefExoticComponent<SidebarHeaderProps & RefAttributes<HTMLDivElement>>;
+    Body: ForwardRefExoticComponent<SidebarBodyProps & RefAttributes<HTMLDivElement>>;
+    Footer: ForwardRefExoticComponent<SidebarFooterProps & RefAttributes<HTMLDivElement>>;
+    Group: ForwardRefExoticComponent<SidebarGroupProps & RefAttributes<HTMLDivElement>>;
+    Item: <T extends ElementType = "button">(props: SidebarItemProps<T> & RefAttributes<HTMLElement>) => JSX.Element;
+    ItemList: ForwardRefExoticComponent<SidebarItemListProps & RefAttributes<HTMLDivElement>>;
+    Divider: ForwardRefExoticComponent<SidebarDividerProps & RefAttributes<HTMLDivElement>>;
+}
+
+export declare const Table: React.ForwardRefExoticComponent<TableWrapperProps & React.RefAttributes<HTMLDivElement>> & {
+    Header: typeof TableHeader;
+    Body: typeof TableBody;
+    Footer: typeof TableFooter;
+    Row: typeof TableRow;
+    HeaderCell: typeof TableHeaderCell;
+    BodyCell: typeof TableBodyCell;
+    Checkbox: typeof TableCheckbox;
+    DoubleLine: typeof TableDoubleLine;
+    Action: typeof TableAction;
+};
+
+/**
+ * TableAction - Built-in button for action column using ButtonIcon
+ */
+declare const TableAction: ForwardRefExoticComponent<TableActionProps & RefAttributes<HTMLButtonElement>>;
+
+/**
+ * Built-in action button for action column
+ */
+export declare interface TableActionProps {
+    /**
+     * Callback when button is clicked
+     */
+    onClick?: () => void;
+    /**
+     * Disable the button
+     */
+    disabled?: boolean;
+}
+
+/**
+ * TableBody - tbody wrapper
+ */
+declare const TableBody: ForwardRefExoticComponent<TableBodyProps & RefAttributes<HTMLTableSectionElement>>;
+
+/**
+ * TableBodyCell - td wrapper (renamed from TableCell)
+ */
+declare const TableBodyCell: ForwardRefExoticComponent<TdHTMLAttributes<HTMLTableCellElement> & {
+variant?: TableCellVariant;
+} & RefAttributes<HTMLTableCellElement>>;
+
+/**
+ * Table body cell (renamed from TableCellProps)
+ * Default vertical centering for content
+ */
+export declare type TableBodyCellProps = TdHTMLAttributes<HTMLTableCellElement> & {
+    variant?: TableCellVariant;
+};
+
+export declare type TableBodyProps = HTMLAttributes<HTMLTableSectionElement>;
+
+/**
+ * TableCheckbox - Built-in checkbox for row-level selection
+ */
+declare const TableCheckbox: ForwardRefExoticComponent<TableCheckboxProps & RefAttributes<HTMLInputElement>>;
+
+/**
+ * Built-in checkbox for row selection
+ */
+export declare interface TableCheckboxProps {
+    /**
+     * Unique row identifier
+     */
+    rowId: string | number;
+    /**
+     * Whether checkbox is checked
+     */
+    checked?: boolean;
+    /**
+     * Indeterminate state (e.g., for parent checkbox)
+     */
+    indeterminate?: boolean;
+    /**
+     * Callback when checkbox state changes
+     */
+    onChange: (checked: boolean) => void;
+}
+
+/**
+ * TableDoubleLine - Built-in cell with title and subtitle
+ */
+declare const TableDoubleLine: ForwardRefExoticComponent<TableDoubleLineProps & RefAttributes<HTMLDivElement>>;
+
+/**
+ * Built-in double-line cell (title + subtitle)
+ */
+export declare interface TableDoubleLineProps extends Omit<HTMLAttributes<HTMLDivElement>, "title" | "subtitle"> {
+    /**
+     * Main title (bold, primary color)
+     */
+    title: ReactNode;
+    /**
+     * Subtitle (gray, smaller)
+     */
+    subtitle: ReactNode;
+    /**
+     * Cell size preset
+     * @default "md"
+     */
+    size?: "sm" | "md" | "lg";
+}
+
+/**
+ * TableFooter - tfoot wrapper
+ */
+declare const TableFooter: ForwardRefExoticComponent<TableFooterProps & RefAttributes<HTMLTableSectionElement>>;
+
+export declare type TableFooterProps = HTMLAttributes<HTMLTableSectionElement>;
+
+/**
+ * TableHeader - thead wrapper
+ */
+declare const TableHeader: ForwardRefExoticComponent<TableHeaderProps & RefAttributes<HTMLTableSectionElement>>;
+
+/**
+ * TableHeaderCell - th wrapper with sortable support (renamed from TableHead)
+ */
+declare const TableHeaderCell: ForwardRefExoticComponent<ThHTMLAttributes<HTMLTableCellElement> & {
+sortable?: boolean;
+sortDirection?: "asc" | "desc" | null;
+onSort?: (direction: "asc" | "desc" | null) => void;
+} & RefAttributes<HTMLTableCellElement>>;
+
+/**
+ * Table header cell (renamed from TableHeadProps)
+ * Supports sortable headers with controlled sort direction
+ */
+export declare type TableHeaderCellProps = ThHTMLAttributes<HTMLTableCellElement> & {
+    /**
+     * Enable sortable header with visual indicator
+     */
+    sortable?: boolean;
+    /**
+     * Current sort direction ('asc' | 'desc' | null for no sort, chevron always visible when sortable)
+     */
+    sortDirection?: "asc" | "desc" | null;
+    /**
+     * Callback when user clicks sortable header
+     */
+    onSort?: (direction: "asc" | "desc" | null) => void;
+};
+
+export declare type TableHeaderProps = HTMLAttributes<HTMLTableSectionElement>;
+
+/**
+ * TableRow - tr wrapper with click-to-select support
+ */
+declare const TableRow: ForwardRefExoticComponent<TableRowProps & RefAttributes<HTMLTableRowElement>>;
+
+export declare type TableRowProps = HTMLAttributes<HTMLTableRowElement>;
+
+/**
+ * Table wrapper props with CSS Grid column definition
+ */
+export declare type TableWrapperProps = HTMLAttributes<HTMLDivElement> & {
+    /**
+     * CSS Grid template columns string (e.g., "2fr 1fr 1fr min-content")
+     */
+    columns: string;
+    /**
+     * Set of selected row IDs for row-level selection state (controlled)
+     */
+    selectedRows?: Set<string | number>;
+};
+
+export declare const Tabs: TabsComponent;
+
+declare interface TabsComponent extends React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<HTMLDivElement>> {
+    Item: typeof TabsItem;
+    getPanelAttribute: typeof getPanelAttribute;
+}
+
+/**
+ * Tabs.Item Component
+ *
+ * A tab item button that manages its own active/disabled state
+ * based on context
+ *
+ * @example
+ * ```tsx
+ * <Tabs.Item value="tab1">Tab 1</Tabs.Item>
+ * ```
+ */
+declare const TabsItem: ForwardRefExoticComponent<TabsItemProps & RefAttributes<HTMLButtonElement>>;
+
+export declare interface TabsItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "value"> {
+    /**
+     * The unique identifier for this item
+     */
+    value: string;
+    /**
+     * Whether the item is disabled
+     */
+    disabled?: boolean;
+    /**
+     * The content of the item
+     */
+    children: ReactNode;
+}
+
+/**
+ * Attributes object for tabpanel elements
+ * Used with Tabs.getPanelAttribute() helper
+ */
+export declare interface TabsPanelAttributes {
+    id: string;
+    role: "tabpanel";
+    "aria-labelledby": string;
+}
+
+export declare interface TabsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
+    /**
+     * The currently active tab value
+     */
+    value: string;
+    /**
+     * Callback fired when a tab is selected
+     */
+    onChange: (value: string) => void;
+    /**
+     * The content of the tabs component
+     */
+    children: ReactNode;
+}
+
+/**
+ * Compound component assembly
+ * Attaches sub-components to TopBar for namespace-based API
+ */
+export declare const TopBar: React.ForwardRefExoticComponent<TopBarProps & React.RefAttributes<HTMLElement>> & TopBarComponent;
+
+declare type TopBarCentredComponent = ForwardRefExoticComponent<TopBarCentredProps & RefAttributes<HTMLDivElement>>;
+
+/**
+ * TopBar.Centred - Center grid area (search, title, etc)
+ */
+export declare interface TopBarCentredProps extends HTMLAttributes<HTMLDivElement> {
+    children?: ReactNode;
+}
+
+/**
+ * Compound component interface for type safety
+ */
+export declare interface TopBarComponent {
+    Leading: TopBarLeadingComponent;
+    Centred: TopBarCentredComponent;
+    Trailing: TopBarTrailingComponent;
+    Item: <T extends ElementType = "button">(props: TopBarItemProps<T> & RefAttributes<HTMLElement>) => JSX.Element;
+    ListItem: ForwardRefExoticComponent<TopBarItemListProps & RefAttributes<HTMLDivElement>>;
+}
+
+/**
+ * TopBar.ListItem - Horizontal flex container for navigation items
+ */
+export declare interface TopBarItemListProps extends HTMLAttributes<HTMLDivElement> {
+    children?: ReactNode;
+}
+
+/**
+ * TopBar.Item - Polymorphic navigation item (button or link)
+ */
+export declare type TopBarItemProps<T extends ElementType = "button"> = {
+    as?: T;
+    active?: boolean;
+    disabled?: boolean;
+    icon?: ReactNode;
+    className?: string;
+    children?: ReactNode;
+} & Omit<ComponentPropsWithoutRef<T>, "children">;
+
+/**
+ * Component types for compound interface
+ */
+declare type TopBarLeadingComponent = ForwardRefExoticComponent<TopBarLeadingProps & RefAttributes<HTMLDivElement>>;
+
+/**
+ * TopBar.Leading - Left grid area (logo, brand, navigation)
+ */
+export declare interface TopBarLeadingProps extends HTMLAttributes<HTMLDivElement> {
+    children?: ReactNode;
+}
+
+/**
+ * TopBar root component props
+ * Pure layout component - no variant styling
+ */
+export declare interface TopBarProps extends HTMLAttributes<HTMLElement> {
+    children?: ReactNode;
+}
+
+declare type TopBarTrailingComponent = ForwardRefExoticComponent<TopBarTrailingProps & RefAttributes<HTMLDivElement>>;
+
+/**
+ * TopBar.Trailing - Right grid area (actions, user menu, etc)
+ */
+export declare interface TopBarTrailingProps extends HTMLAttributes<HTMLDivElement> {
+    children?: ReactNode;
+}
+
+export { }