@grandbazar/ui-baza 1.5.2 → 1.5.4

package/dist/index.d.ts

@@ -622,9 +622,21 @@ export declare function Switch({ className, label, indeterminate, ...props }: TS
  * Table renders; it does not manage. Sorting, selection and incremental loading are owned
  * by the consumer — the component only reflects the state it is given.
  *
- * @param className - Additional CSS classes applied to the table element
- * @param mode - Surface of the scroll container: `default` draws a self-contained card,
- * `bare` draws nothing and expects the consumer's own surface around the table
+ * In the `stacked` layout the same markup renders as a list of cards instead of a table, so a
+ * narrow screen shows every value without scrolling sideways. Deciding when that happens is the
+ * consumer's job: the library never measures the screen and ships no media or container query.
+ *
+ * Props that describe columns do nothing in `stacked` and are not forwarded to the DOM there:
+ * `align` and `colSpan`. `Table.Header` and `Table.HeaderCell` render nothing, and `Table.Body`
+ * becomes mandatory. `mode`, `isCurrent` and `Table.Row`'s `mode` keep working.
+ *
+ * @param className - Additional CSS classes; applied to the table in `table` and to the list
+ * wrapper in `stacked`, so a selector written against `td` or `tr` is silently dead in `stacked`
+ * @param mode - Surface of the container: `default` draws a self-contained card, `bare` draws
+ * nothing and expects the consumer's own surface around the table. In `stacked` the surface moves
+ * to the cards — one box per row instead of one box around the list
+ * @param layout - Shape of the rendered tree: `table` renders a real table, `stacked` renders a
+ * list of cards for a narrow screen (default: `table`)
  *
  * @example
  * <Table>
@@ -653,6 +665,8 @@ export declare namespace Table {
 
 declare const TABLE_CELL_ALIGNS: readonly ["left", "center", "right"];
 
+declare const TABLE_LAYOUTS: readonly ["table", "stacked"];
+
 declare const TABLE_MODES: readonly ["default", "bare"];
 
 declare const TABLE_ROW_MODES: readonly ["default", "group"];
@@ -661,13 +675,13 @@ declare function TableBody({ className, children, ...props }: TTableBodyProps):
 
 declare function TableCaption({ className, children, ...props }: TTableCaptionProps): JSX.Element;
 
-declare function TableCell({ className, children, align, ...props }: TTableCellProps): JSX.Element;
+declare function TableCell({ className, children, align, colSpan, columnLabel, ...props }: TTableCellProps): JSX.Element;
 
-declare function TableHeader({ className, children, ...props }: TTableHeaderProps): JSX.Element;
+declare function TableHeader({ className, children, ...props }: TTableHeaderProps): JSX.Element | null;
 
-declare function TableHeaderCell({ className, children, align, scope, ...props }: TTableHeaderCellProps): JSX.Element;
+declare function TableHeaderCell({ className, children, align, scope, ...props }: TTableHeaderCellProps): JSX.Element | null;
 
-declare function TableRoot({ className, children, mode, ...props }: TTableRootProps): JSX.Element;
+declare function TableRoot({ className, children, mode, layout, ...props }: TTableRootProps): JSX.Element;
 
 declare function TableRow({ className, children, mode, isCurrent, ...props }: TTableRowProps): JSX.Element;
 
@@ -1034,33 +1048,37 @@ declare type TSwitchProps = React.InputHTMLAttributes<HTMLInputElement> & {
     ref?: React.RefObject<HTMLInputElement | null>;
 };
 
-declare type TTableBodyProps = React.HTMLAttributes<HTMLTableSectionElement>;
+declare type TTableBodyProps = React.HTMLAttributes<HTMLElement>;
 
-declare type TTableCaptionProps = React.HTMLAttributes<HTMLTableCaptionElement>;
+declare type TTableCaptionProps = React.HTMLAttributes<HTMLElement>;
 
 declare type TTableCellAlign = TArrayElement<typeof TABLE_CELL_ALIGNS>;
 
-declare type TTableCellProps = Omit<React.TdHTMLAttributes<HTMLTableCellElement>, 'align'> & {
+declare type TTableCellProps = Omit<React.TdHTMLAttributes<HTMLElement>, 'align'> & {
     align?: TTableCellAlign;
+    columnLabel?: React.ReactNode;
 };
 
 declare type TTableHeaderCellProps = Omit<React.ThHTMLAttributes<HTMLTableCellElement>, 'align'> & {
     align?: TTableCellAlign;
 };
 
-declare type TTableHeaderProps = React.HTMLAttributes<HTMLTableSectionElement>;
+declare type TTableHeaderProps = React.HTMLAttributes<HTMLElement>;
+
+declare type TTableLayout = TArrayElement<typeof TABLE_LAYOUTS>;
 
 declare type TTableMode = TArrayElement<typeof TABLE_MODES>;
 
 declare type TTableProps = React.ComponentProps<typeof TableRoot>;
 
-declare type TTableRootProps = React.TableHTMLAttributes<HTMLTableElement> & {
+declare type TTableRootProps = React.TableHTMLAttributes<HTMLElement> & {
     mode?: TTableMode;
+    layout?: TTableLayout;
 };
 
 declare type TTableRowMode = TArrayElement<typeof TABLE_ROW_MODES>;
 
-declare type TTableRowProps = React.HTMLAttributes<HTMLTableRowElement> & {
+declare type TTableRowProps = React.HTMLAttributes<HTMLElement> & {
     mode?: TTableRowMode;
     isCurrent?: boolean;
 };