@versaur/react 1.0.9 → 1.0.11

package/dist/blocks.d.ts

@@ -1,4 +1,3 @@
-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';
@@ -27,8 +26,10 @@ 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 { FormHTMLAttributes } from 'react';
 import { ForwardRefExoticComponent } from 'react';
 import { HTMLAttributes } from 'react';
+import { Icon } from '@versaur/core/primitive';
 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';
@@ -36,8 +37,6 @@ 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 Accordion: AccordionComponent;
 
@@ -74,38 +73,27 @@ export declare interface AccordionSummaryProps extends HTMLAttributes<HTMLElemen
 export declare const AppLayout: AppLayoutType;
 
 declare interface AppLayoutBodyProps {
+    /** Constrains Main content to max-width and centers it */
+    centered?: boolean;
     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>>;
+    Footer: ForwardRefExoticComponent<AppLayoutRegionProps & RefAttributes<HTMLElement>>;
     Header: ForwardRefExoticComponent<AppLayoutRegionProps & RefAttributes<HTMLElement>>;
-    Main: ForwardRefExoticComponent<AppLayoutMainProps & RefAttributes<HTMLElement>>;
+    Main: ForwardRefExoticComponent<AppLayoutRegionProps & RefAttributes<HTMLElement>>;
     SideLeft: ForwardRefExoticComponent<AppLayoutRegionProps & RefAttributes<HTMLElement>>;
     SideRight: ForwardRefExoticComponent<AppLayoutRegionProps & RefAttributes<HTMLElement>>;
 }
@@ -115,9 +103,7 @@ declare interface AsProp<C extends ElementType = ElementType> {
 }
 
 export declare namespace AttributeList {
-    export type Columns = AttributeList_2.Columns;
-    export type ColumnSpan = AttributeList_2.ColumnSpan;
-    export type ContentLineClamp = AttributeList_2.ContentLineClamp;
+    export type Layout = AttributeList_2.Layout;
     export type Props = AttributeListProps;
     export type ItemProps = AttributeListItemProps;
 }
@@ -133,7 +119,7 @@ declare interface AttributeListComponent extends default_2.ForwardRefExoticCompo
  *
  * @example
  * ```tsx
- * <AttributeList.Item columnSpan="2" title="Email">
+ * <AttributeList.Item area="span 2" title="Email">
  *   john.doe@example.com
  * </AttributeList.Item>
  * ```
@@ -146,15 +132,9 @@ export declare interface AttributeListItemProps extends HTMLAttributes<HTMLDivEl
      */
     title: string;
     /**
-     * Number of columns to span in the grid (1-6, auto-clamped to columns count)
-     * @default '1'
+     * CSS grid-column: e.g. "span 3", "1 / 4"
      */
-    columnSpan?: AttributeList_2.ColumnSpan;
-    /**
-     * Number of lines to display before truncating with ellipsis (1-5)
-     * @default '2'
-     */
-    contentLineClamp?: AttributeList_2.ContentLineClamp;
+    area?: string;
     /**
      * The value content (can be text, links, badges, etc.)
      */
@@ -163,10 +143,20 @@ export declare interface AttributeListItemProps extends HTMLAttributes<HTMLDivEl
 
 export declare interface AttributeListProps extends HTMLAttributes<HTMLDListElement> {
     /**
-     * Number of columns for the grid layout
-     * @default '3'
+     * Layout mode: stacked (default) or tabular
+     * @default 'stacked'
      */
-    columns?: AttributeList_2.Columns;
+    layout?: AttributeList_2.Layout;
+    /**
+     * CSS grid-template-columns: e.g. "1fr 1fr 1fr", "200px 1fr"
+     * @default 'repeat(3, 1fr)'
+     */
+    columns?: string;
+    /**
+     * Gap between items: number (in px) or CSS string value
+     * @default spacing-3 (12px)
+     */
+    gap?: number | string;
     /**
      * AttributeList.Item components
      */
@@ -546,6 +536,74 @@ export declare interface DrawerRootProps extends Omit<DialogHTMLAttributes<HTMLD
     children?: ReactNode;
 }
 
+export declare namespace Features {
+    export type Props = FeaturesProps;
+    export type ItemProps = FeaturesItemProps;
+    export type Direction = FeaturesDirection;
+}
+
+export declare const Features: FeaturesComponent;
+
+declare interface FeaturesComponent extends default_2.ForwardRefExoticComponent<FeaturesProps & default_2.RefAttributes<HTMLUListElement>> {
+    Item: typeof FeaturesItem;
+}
+
+export declare type FeaturesDirection = "row" | "column";
+
+declare const FeaturesItem: ForwardRefExoticComponent<FeaturesItemProps & RefAttributes<HTMLLIElement>>;
+
+export declare interface FeaturesItemProps extends HTMLAttributes<HTMLLIElement> {
+    /** Icon node rendered on the left side of the item content */
+    icon?: ReactNode;
+    children?: ReactNode;
+    /**
+     * Native accessible label for the item.
+     * When provided, also renders a Tooltip on hover showing this text.
+     */
+    "aria-label"?: string;
+}
+
+export declare interface FeaturesProps extends HTMLAttributes<HTMLUListElement> {
+    /** Flex direction of the feature list. Default: "column" */
+    direction?: FeaturesDirection;
+    children?: ReactNode;
+}
+
+export declare const FormGroup: FormGroupComponent;
+
+/**
+ * FormGroup Compound Component
+ */
+declare interface FormGroupComponent extends React.ForwardRefExoticComponent<FormGroupProps & React.RefAttributes<HTMLFormElement>> {
+    Field: typeof FormGroupField;
+    Separator: typeof FormGroupSeparator;
+}
+
+/**
+ * FormGroup.Field - A grid item container for form controls
+ */
+declare const FormGroupField: ForwardRefExoticComponent<FormGroupFieldProps & RefAttributes<HTMLDivElement>>;
+
+export declare interface FormGroupFieldProps extends HTMLAttributes<HTMLDivElement> {
+    /** CSS grid-column value, e.g. "span 2", "1 / 4" */
+    area?: string;
+    children?: ReactNode;
+}
+
+export declare interface FormGroupProps extends FormHTMLAttributes<HTMLFormElement> {
+    /** CSS grid-template-columns value, e.g. "repeat(3, 1fr)". Default: "1fr" */
+    columns?: string;
+    children?: ReactNode;
+}
+
+/**
+ * FormGroup.Separator - A full-width horizontal separator
+ */
+declare const FormGroupSeparator: ForwardRefExoticComponent<FormGroupSeparatorProps & RefAttributes<HTMLHRElement>>;
+
+export declare interface FormGroupSeparatorProps extends HTMLAttributes<HTMLHRElement> {
+}
+
 /**
  * Helper function to get attributes for tabpanel elements
  *
@@ -561,6 +619,12 @@ export declare interface DrawerRootProps extends Omit<DialogHTMLAttributes<HTMLD
  */
 declare function getPanelAttribute(value: string): TabsPanelAttributes;
 
+declare type IconProps = Omit<SVGProps<SVGSVGElement>, "ref"> & {
+    as: ComponentType<SVGProps<SVGSVGElement>>;
+    intent?: Icon.Intent | "inherit";
+    size?: Icon.Size | "inherit";
+};
+
 export declare namespace Menu {
     export type Placement = MenuPlacement;
     export type DataAttrs = Menu_2.DataAttrs;
@@ -1076,65 +1140,73 @@ declare interface SidebarType extends ForwardRefExoticComponent<SidebarRootProps
 }
 
 export declare const Table: React.ForwardRefExoticComponent<TableWrapperProps & React.RefAttributes<HTMLDivElement>> & {
+    Toolbar: typeof TableToolbar;
     Header: typeof TableHeader;
     Body: typeof TableBody;
     Footer: typeof TableFooter;
     Row: typeof TableRow;
-    HeaderCell: typeof TableHeaderCell;
-    BodyCell: typeof TableBodyCell;
+    Col: typeof TableCol;
     Checkbox: typeof TableCheckbox;
     DoubleLine: typeof TableDoubleLine;
     Action: typeof TableAction;
+    ActionItem: typeof TableActionItem;
 };
 
 /**
- * TableAction - Built-in button for action column using ButtonIcon
+ * TableAction - Action trigger using Menu dropdown with action items
  */
-declare const TableAction: ForwardRefExoticComponent<TableActionProps & RefAttributes<HTMLButtonElement>>;
+declare const TableAction: ForwardRefExoticComponent<TableActionProps & RefAttributes<HTMLDivElement>>;
 
 /**
- * Built-in action button for action column
+ * TableActionItem - Menu-based action item (uses Menu.Item internally)
  */
-export declare interface TableActionProps {
+declare const TableActionItem: ForwardRefExoticComponent<MenuItemProps & RefAttributes<HTMLButtonElement>>;
+
+/**
+ * Table.ActionItem - clickable menu item within Table.Action dropdown
+ */
+export declare interface TableActionItemProps extends HTMLAttributes<HTMLButtonElement> {
     /**
-     * Callback when button is clicked
+     * Callback when item is clicked
      */
-    onClick?: () => void;
+    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
     /**
-     * Disable the button
+     * Disable the item
      */
     disabled?: boolean;
 }
 
 /**
- * TableBody - tbody wrapper
+ * Table.Action - action trigger with Tooltip dropdown
  */
-declare const TableBody: ForwardRefExoticComponent<TableBodyProps & RefAttributes<HTMLTableSectionElement>>;
+export declare interface TableActionProps {
+    /**
+     * Icon element to render in the trigger button
+     */
+    icon: IconProps["as"];
+    /**
+     * Tooltip content: Table.ActionItem elements
+     */
+    children: ReactNode;
+}
 
 /**
- * TableBodyCell - td wrapper (renamed from TableCell)
+ * TableBody - container for data rows
  */
-declare const TableBodyCell: ForwardRefExoticComponent<TdHTMLAttributes<HTMLTableCellElement> & {
-variant?: TableCellVariant;
-} & RefAttributes<HTMLTableCellElement>>;
+declare const TableBody: ForwardRefExoticComponent<TableBodyProps & RefAttributes<HTMLDivElement>>;
 
 /**
- * Table body cell (renamed from TableCellProps)
- * Default vertical centering for content
+ * Table.Body - container for data rows
  */
-export declare type TableBodyCellProps = TdHTMLAttributes<HTMLTableCellElement> & {
-    variant?: TableCellVariant;
-};
-
-export declare type TableBodyProps = HTMLAttributes<HTMLTableSectionElement>;
+export declare type TableBodyProps = HTMLAttributes<HTMLDivElement>;
 
 /**
- * TableCheckbox - Built-in checkbox for row-level selection
+ * TableCheckbox - Built-in checkbox for row selection
  */
 declare const TableCheckbox: ForwardRefExoticComponent<TableCheckboxProps & RefAttributes<HTMLInputElement>>;
 
 /**
- * Built-in checkbox for row selection
+ * Table.Checkbox - built-in checkbox for row selection
  */
 export declare interface TableCheckboxProps {
     /**
@@ -1142,7 +1214,7 @@ export declare interface TableCheckboxProps {
      */
     rowId: string | number;
     /**
-     * Whether checkbox is checked
+     * Whether checkbox is checked (optional - managed by Table context)
      */
     checked?: boolean;
     /**
@@ -1150,20 +1222,53 @@ export declare interface TableCheckboxProps {
      */
     indeterminate?: boolean;
     /**
-     * Callback when checkbox state changes
+     * Callback when checkbox state changes (optional - managed by Table context)
      */
-    onChange: (checked: boolean) => void;
+    onChange?: (checked: boolean) => void;
 }
 
 /**
- * TableDoubleLine - Built-in cell with title and subtitle
+ * TableCol - polymorphic cell with grid area support
+ */
+declare const TableCol: ForwardRefExoticComponent<HTMLAttributes<any> & {
+as?: "th" | "td" | "div";
+area?: string;
+variant?: TableCellVariant;
+} & RefAttributes<any>>;
+
+/**
+ * Table.Col - polymorphic cell with grid area support
+ */
+export declare type TableColProps = HTMLAttributes<any> & {
+    /**
+     * HTML element type: 'th' for headers, 'td' for data cells, 'div' for generic
+     * @default 'div'
+     */
+    as?: "th" | "td" | "div";
+    /**
+     * CSS grid area (e.g., "span 2", "1 / 3")
+     */
+    area?: string;
+    /**
+     * Cell variant for styling
+     */
+    variant?: TableCellVariant;
+};
+
+/**
+ * TableDoubleLine - Built-in cell with title and subtitle using typography tokens
  */
-declare const TableDoubleLine: ForwardRefExoticComponent<TableDoubleLineProps & RefAttributes<HTMLDivElement>>;
+declare const TableDoubleLine: ForwardRefExoticComponent<TableDoubleLineProps & RefAttributes<any>>;
 
 /**
- * Built-in double-line cell (title + subtitle)
+ * Table.DoubleLine - built-in cell with title and subtitle
  */
-export declare interface TableDoubleLineProps extends Omit<HTMLAttributes<HTMLDivElement>, "title" | "subtitle"> {
+export declare interface TableDoubleLineProps extends Omit<HTMLAttributes<any>, "title"> {
+    /**
+     * HTML element type: 'th' for headers, 'td' for data cells, 'div' for generic
+     * @default 'div'
+     */
+    as?: "th" | "td" | "div";
     /**
      * Main title (bold, primary color)
      */
@@ -1180,66 +1285,71 @@ export declare interface TableDoubleLineProps extends Omit<HTMLAttributes<HTMLDi
 }
 
 /**
- * TableFooter - tfoot wrapper
+ * TableFooter - container for footer row(s)
  */
-declare const TableFooter: ForwardRefExoticComponent<TableFooterProps & RefAttributes<HTMLTableSectionElement>>;
+declare const TableFooter: ForwardRefExoticComponent<TableFooterProps & RefAttributes<HTMLDivElement>>;
 
-export declare type TableFooterProps = HTMLAttributes<HTMLTableSectionElement>;
+/**
+ * Table.Footer - container for footer row(s)
+ */
+export declare type TableFooterProps = HTMLAttributes<HTMLDivElement>;
 
 /**
- * TableHeader - thead wrapper
+ * TableHeader - container for header columns
  */
-declare const TableHeader: ForwardRefExoticComponent<TableHeaderProps & RefAttributes<HTMLTableSectionElement>>;
+declare const TableHeader: ForwardRefExoticComponent<TableHeaderProps & RefAttributes<HTMLDivElement>>;
 
 /**
- * TableHeaderCell - th wrapper with sortable support (renamed from TableHead)
+ * Table.Header - container for header columns
  */
-declare const TableHeaderCell: ForwardRefExoticComponent<ThHTMLAttributes<HTMLTableCellElement> & {
-sortable?: boolean;
-sortDirection?: "asc" | "desc" | null;
-onSort?: (direction: "asc" | "desc" | null) => void;
-} & RefAttributes<HTMLTableCellElement>>;
+export declare type TableHeaderProps = HTMLAttributes<HTMLDivElement>;
 
 /**
- * Table header cell (renamed from TableHeadProps)
- * Supports sortable headers with controlled sort direction
+ * TableRow - wrapper for cells
  */
-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;
-};
+declare const TableRow: ForwardRefExoticComponent<TableRowProps & RefAttributes<HTMLDivElement>>;
+
+/**
+ * Table.Row - wrapper for cells
+ */
+export declare type TableRowProps = HTMLAttributes<HTMLDivElement>;
 
-export declare type TableHeaderProps = HTMLAttributes<HTMLTableSectionElement>;
+/**
+ * Selection state data passed to toolbar render function
+ */
+declare interface TableSelectionData {
+    selected: Set<string | number>;
+    allSelected: boolean;
+    someSelected: boolean;
+}
 
 /**
- * TableRow - tr wrapper with click-to-select support
+ * TableToolbar - renders toolbar content with optional render function receiving selected row IDs
  */
-declare const TableRow: ForwardRefExoticComponent<TableRowProps & RefAttributes<HTMLTableRowElement>>;
+declare const TableToolbar: ForwardRefExoticComponent<TableToolbarProps & RefAttributes<HTMLDivElement>>;
 
-export declare type TableRowProps = HTMLAttributes<HTMLTableRowElement>;
+/**
+ * Table.Toolbar - generic slot for action controls with optional render function
+ */
+export declare interface TableToolbarProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    /**
+     * Render function receives selected row IDs Set, or regular children
+     */
+    children?: ReactNode | ((selectedIds: Set<string | number>) => ReactNode);
+}
 
 /**
- * Table wrapper props with CSS Grid column definition
+ * Table root wrapper with CSS Grid column definition
  */
 export declare type TableWrapperProps = HTMLAttributes<HTMLDivElement> & {
     /**
-     * CSS Grid template columns string (e.g., "2fr 1fr 1fr min-content")
+     * CSS Grid template columns string (e.g., "repeat(3, 1fr)", "2fr 1fr 1fr")
      */
-    columns: string;
+    columns?: string;
     /**
-     * Set of selected row IDs for row-level selection state (controlled)
+     * Callback fired when row selection changes
      */
-    selectedRows?: Set<string | number>;
+    onSelectionChange?: (data: TableSelectionData) => void;
 };
 
 export declare const Tabs: TabsComponent;