@grandbazar/ui-baza 1.5.3 → 1.6.0

package/dist/index.d.ts

@@ -10,17 +10,20 @@ import { SetStateAction } from 'react';
  * Badge displays a label or indicator with customizable color and size.
  * Supports multiple color schemes and display modes for different contexts.
  *
- * @param size - Size of the badge (lg, md)
- * @param color - Color scheme (accent, violet, pink, red, orange, green, neutral)
- * @param mode - Display mode (primary, secondary)
+ * @param size - Size of the badge (lg, md, sm)
+ * @param color - Color scheme (accent, violet, pink, red, orange, green, neutral); ignored in glass mode
+ * @param mode - Display mode (primary, secondary, glass); glass is a translucent white badge for colored backgrounds
+ * @param shape - Corner shape (default, pill); pill rounds the corners fully without changing paddings
  */
-export declare function Badge({ children, className, size, color, mode, ...props }: TBadgeProps): JSX.Element;
+export declare function Badge({ children, className, size, color, mode, shape, ...props }: TBadgeProps): JSX.Element;
 
 declare const BADGE_COLORS: readonly ["accent", "violet", "pink", "red", "orange", "green", "neutral"];
 
-declare const BADGE_MODES: readonly ["primary", "secondary"];
+declare const BADGE_MODES: readonly ["primary", "secondary", "glass"];
 
-declare const BADGE_SIZES: readonly ["lg", "md"];
+declare const BADGE_SHAPES: readonly ["default", "pill"];
+
+declare const BADGE_SIZES: readonly ["lg", "md", "sm"];
 
 declare const BADGE_TABS_ITEM_MODES: readonly ["primary", "secondary"];
 
@@ -74,25 +77,31 @@ export declare namespace Breadcrumbs {
  * Button renders a clickable button element with various styles.
  * Supports the asChild pattern for polymorphic rendering via Slot.
  *
- * @param color - Color variant of the button (accent, neutral)
- * @param size - Size of the button (lg, md, sm)
+ * @param color - Color variant of the button (accent, neutral, white); white is an inverted variant for colored backgrounds
+ * @param size - Size of the button (lg, md, sm, md-sm); md-sm is 40px high
  * @param mode - Visual mode of the button (primary, secondary, tertiary, line)
+ * @param shape - Corner shape (default, pill, circle, square); circle and square render a square icon button as wide as the size is high
+ * @param elevated - Whether to cast a floating shadow, e.g. for a button over an image
  * @param asChild - When true, merges props onto the child element instead of rendering a button
  * @param children - Content to display inside the button
  */
-export declare function Button({ children, className, color, size, mode, asChild, ...props }: TButtonPropsWithAsChild): JSX.Element;
+export declare function Button({ children, className, color, size, mode, shape, elevated, asChild, ...props }: TButtonPropsWithAsChild): JSX.Element;
 
 export declare namespace Button {
     var Function: typeof ButtonFunction;
 }
 
-declare const BUTTON_COLORS: readonly ["accent", "neutral"];
+declare const BUTTON_COLORS: readonly ["accent", "neutral", "white"];
+
+declare const BUTTON_FUNCTION_COLORS: readonly ["accent", "neutral"];
 
 declare const BUTTON_FUNCTION_SIZES: readonly ["lg", "md"];
 
 declare const BUTTON_MODES: readonly ["primary", "secondary", "line", "tertiary"];
 
-declare const BUTTON_SIZES: readonly ["lg", "md", "sm"];
+declare const BUTTON_SHAPES: readonly ["default", "pill", "circle", "square"];
+
+declare const BUTTON_SIZES: readonly ["lg", "md", "sm", "md-sm"];
 
 declare function ButtonFunction({ children, className, color, size, asChild, ...props }: TButtonFunctionProps): JSX.Element;
 
@@ -111,13 +120,22 @@ export declare function Checkbox({ className, label, indeterminate, ...props }:
 /**
  * Chip renders a compact, selectable tag element.
  * Supports selected and disabled states for interactive filtering and selection.
+ * Supports the asChild pattern for polymorphic rendering via Slot, e.g. to render the chip as a link.
  *
  * @param isSelected - Whether the chip is in selected state
  * @param disabled - Whether the chip is disabled
+ * @param icon - Leading icon; inherits the text color, accent while the chip is not selected
+ * @param shape - Corner shape (default, pill)
+ * @param mode - Visual mode (default, glass); glass is a translucent white chip for colored backgrounds
+ * @param asChild - When true, merges props onto the child element instead of rendering a div
  * @param className - Additional CSS classes
  * @param children - Content to display inside the chip
  */
-export declare function Chip({ isSelected, children, className, disabled, ...props }: TChipProps): JSX.Element;
+export declare function Chip({ isSelected, children, className, disabled, icon, shape, mode, asChild, ...props }: TChipProps): JSX.Element;
+
+declare const CHIP_MODES: readonly ["default", "glass"];
+
+declare const CHIP_SHAPES: readonly ["default", "pill"];
 
 export declare function Counter({ className, size, color, ...props }: TCounterProps): JSX.Element;
 
@@ -476,13 +494,16 @@ declare function PaginationItem({ className, children, size, isCurrent, ...props
 
 declare function PaginationRoot({ totalPages, currentPage, size, maxVisiblePages, showArrows, className, onPageChange, renderItem: PaginationItem, renderIconChevron: IconChevron, renderEllipsis: Ellipsis, ...props }: TPaginationRootProps): JSX.Element;
 
-declare const PROGRESS_BAR_SIZES: readonly ["sm", "md"];
+declare const PROGRESS_BAR_COLORS: readonly ["accent", "green"];
+
+declare const PROGRESS_BAR_SIZES: readonly ["sm", "md", "xs"];
 
 /**
  * ProgressBar is a compound component for displaying progress indicators.
  * Provides flexible building blocks for linear and step-based progress visualization.
  *
- * @param size - Size variant of the progress bar (sm, md)
+ * @param size - Size variant of the progress bar (sm, md, xs)
+ * @param color - Fill color (accent, green); the track stays the same
  * @param percent - Progress percentage (0-100)
  * @param showFillOnZero - Whether to render the fill segment at 0%
  * @param className - Additional CSS classes
@@ -498,9 +519,9 @@ export declare namespace ProgressBar {
     var Steps: typeof ProgressBarSteps;
 }
 
-declare function ProgressBarLinear({ className, size, percent, showFillOnZero, ...props }: TProgressBarLinearProps): JSX.Element;
+declare function ProgressBarLinear({ className, size, color, percent, showFillOnZero, ...props }: TProgressBarLinearProps): JSX.Element;
 
-declare function ProgressBarSteps({ className, size, currentStep, totalSteps, ...props }: TProgressBarStepsProps): JSX.Element;
+declare function ProgressBarSteps({ className, size, color, currentStep, totalSteps, ...props }: TProgressBarStepsProps): JSX.Element;
 
 /**
  * RadioButton renders a radio input with label and visual indicator.
@@ -622,9 +643,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 +686,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 +696,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;
 
@@ -721,6 +756,7 @@ declare type TBadgeProps = React.HTMLAttributes<HTMLDivElement> & {
     size?: TArrayElement<typeof BADGE_SIZES>;
     color?: TArrayElement<typeof BADGE_COLORS>;
     mode?: TArrayElement<typeof BADGE_MODES>;
+    shape?: TArrayElement<typeof BADGE_SHAPES>;
 };
 
 declare type TBadgeTabsItemProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
@@ -749,11 +785,13 @@ declare type TButtonCommonProps = {
     color?: TArrayElement<typeof BUTTON_COLORS>;
     size?: TArrayElement<typeof BUTTON_SIZES>;
     mode?: TArrayElement<typeof BUTTON_MODES>;
+    shape?: TArrayElement<typeof BUTTON_SHAPES>;
+    elevated?: boolean;
     className?: string;
 };
 
 declare type TButtonFunctionProps = TAsChildProps<React.ButtonHTMLAttributes<HTMLButtonElement>> & {
-    color?: TArrayElement<typeof BUTTON_COLORS>;
+    color?: TArrayElement<typeof BUTTON_FUNCTION_COLORS>;
     size?: TArrayElement<typeof BUTTON_FUNCTION_SIZES>;
     className?: string;
     disabled?: boolean;
@@ -778,9 +816,13 @@ declare type TCheckboxProps = React.InputHTMLAttributes<HTMLInputElement> & {
     ref?: React.RefObject<HTMLInputElement | null>;
 };
 
-declare type TChipProps = React.HTMLAttributes<HTMLDivElement> & {
+declare type TChipProps = TAsChildProps<React.HTMLAttributes<HTMLDivElement>> & {
     isSelected?: boolean;
     disabled?: boolean;
+    icon?: React.ReactNode;
+    shape?: TArrayElement<typeof CHIP_SHAPES>;
+    mode?: TArrayElement<typeof CHIP_MODES>;
+    className?: string;
 };
 
 declare type TCounterProps = React.HTMLAttributes<HTMLDivElement> & {
@@ -943,12 +985,14 @@ declare type TPortalPlacement = {
 
 declare type TProgressBarLinearProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {
     size?: TArrayElement<typeof PROGRESS_BAR_SIZES>;
+    color?: TArrayElement<typeof PROGRESS_BAR_COLORS>;
     percent: number;
     showFillOnZero?: boolean;
 };
 
 declare type TProgressBarStepsProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {
     size?: TArrayElement<typeof PROGRESS_BAR_SIZES>;
+    color?: TArrayElement<typeof PROGRESS_BAR_COLORS>;
     currentStep: number;
     totalSteps: number;
 };
@@ -1034,33 +1078,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;
 };