@vkzstudio/muza-ui 1.0.43 → 1.0.45

package/dist/components/Accordion/Accordion.d.ts

@@ -62,20 +62,56 @@ export interface AccordionMultipleProps extends RadixAccordionMultipleProps {
  * <Accordion type="single" variant="default" collapsible>
  */
 export type AccordionProps = AccordionSingleProps | AccordionMultipleProps;
-/** Props for AccordionItem. Requires a unique `value` string to identify the section. */
+/**
+ * Props for the AccordionItem component.
+ * Represents a single expandable section within an Accordion.
+ */
 export interface AccordionItemProps extends React.ComponentProps<typeof AccordionPrimitive.Item> {
-    /** Unique string identifying this item within the accordion. */
+    /** Unique string identifying this item within the accordion. Must be unique across sibling items. */
     value: string;
     /** Prevents interaction with this specific item. @default false */
     disabled?: boolean;
-    /** When true, clicking the content area also toggles the item. Set to false for items with interactive content (forms, inputs). @default true */
+    /**
+     * When true, clicking anywhere on the item (not just the header) toggles the open state.
+     * Set to false for items whose content contains interactive elements (forms, inputs, switches)
+     * so inner clicks don't collapse the section.
+     *
+     * @default true
+     * @example
+     * <AccordionItem value="settings" clickableContent={false}>
+     *   <AccordionHeader>Settings</AccordionHeader>
+     *   <AccordionContent>
+     *     <Input />
+     *     <Switch />
+     *   </AccordionContent>
+     * </AccordionItem>
+     */
     clickableContent?: boolean;
-    /** When true, the item is always expanded, non-interactive, and the chevron is hidden. The header renders as a plain element instead of a button for proper accessibility. @default false */
+    /**
+     * When true, the item is always expanded, non-interactive, and the chevron is hidden.
+     * The header renders as a plain element instead of a button so it stays accessible
+     * when no toggle action is available.
+     *
+     * @default false
+     * @example
+     * <AccordionItem value="always-visible" static>
+     *   <AccordionHeader>Always visible</AccordionHeader>
+     *   <AccordionContent>This content is always shown.</AccordionContent>
+     * </AccordionItem>
+     */
     static?: boolean;
 }
-/** Props for AccordionHeader. Clickable area that toggles content visibility. */
+/**
+ * Props for the AccordionHeader component.
+ * Renders the clickable header area that toggles content visibility.
+ * Wraps and behaves as Radix's `Accordion.Header` + `Accordion.Trigger`.
+ */
 export type AccordionHeaderProps = React.ComponentProps<typeof AccordionPrimitive.Header>;
-/** Props for AccordionContent. Collapsible content area with slide animation. */
+/**
+ * Props for the AccordionContent component.
+ * Collapsible content area with built-in slide-up/slide-down animation.
+ * Wraps Radix's `Accordion.Content`.
+ */
 export type AccordionContentProps = React.ComponentProps<typeof AccordionPrimitive.Content>;
 declare const accordionItemVariants: (props?: ({
     variant?: "default" | "branded" | "settings" | null | undefined;

package/dist/components/Accordion/Accordion.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../../src/components/Accordion/Accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,kBAAkB,MAAM,2BAA2B,CAAA;AAC/D,OAAO,EACL,KAAK,sBAAsB,IAAI,2BAA2B,EAC1D,KAAK,oBAAoB,IAAI,yBAAyB,EACvD,MAAM,2BAA2B,CAAA;AAKlC;;;;;GAKG;AACH,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,CAAA;AAEjE,mEAAmE;AACnE,MAAM,WAAW,oBAAqB,SAAQ,yBAAyB;IACrE,yDAAyD;IACzD,IAAI,EAAE,QAAQ,CAAA;IACd;;;;OAIG;IACH,OAAO,CAAC,EAAE,gBAAgB,CAAA;IAC1B,iFAAiF;IACjF,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,qEAAqE;IACrE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,oDAAoD;IACpD,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,2EAA2E;IAC3E,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,gFAAgF;AAChF,MAAM,WAAW,sBAAuB,SAAQ,2BAA2B;IACzE,sEAAsE;IACtE,IAAI,EAAE,UAAU,CAAA;IAChB;;;;OAIG;IACH,OAAO,CAAC,EAAE,gBAAgB,CAAA;IAC1B,8EAA8E;IAC9E,KAAK,CAAC,EAAE,MAAM,EAAE,CAAA;IAChB,qDAAqD;IACrD,YAAY,CAAC,EAAE,MAAM,EAAE,CAAA;IACvB,0EAA0E;IAC1E,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;IACzC,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,cAAc,GAAG,oBAAoB,GAAG,sBAAsB,CAAA;AAE1E,yFAAyF;AACzF,MAAM,WAAW,kBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,IAAI,CAAC;IAC5D,gEAAgE;IAChE,KAAK,EAAE,MAAM,CAAA;IACb,mEAAmE;IACnE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,iJAAiJ;IACjJ,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,6LAA6L;IAC7L,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB;AAED,iFAAiF;AACjF,MAAM,MAAM,oBAAoB,GAAG,KAAK,CAAC,cAAc,CACrD,OAAO,kBAAkB,CAAC,MAAM,CACjC,CAAA;AAED,iFAAiF;AACjF,MAAM,MAAM,qBAAqB,GAAG,KAAK,CAAC,cAAc,CACtD,OAAO,kBAAkB,CAAC,OAAO,CAClC,CAAA;AAMD,QAAA,MAAM,qBAAqB;;8EAYzB,CAAA;AAEF,QAAA,MAAM,wBAAwB;;8EAe7B,CAAA;AAED,QAAA,MAAM,6BAA6B;;8EASjC,CAAA;AA8BF,QAAA,MAAM,SAAS,GAAI,+CAIhB,cAAc,4CAahB,CAAA;AAED,QAAA,MAAM,aAAa,GAAI,wFAQpB,kBAAkB,4CAiDpB,CAAA;AAED,QAAA,MAAM,eAAe,GAAI,mCAItB,oBAAoB,4CA+BtB,CAAA;AAED,QAAA,MAAM,gBAAgB,GAAI,mCAIvB,qBAAqB,4CA6BvB,CAAA;AAED,OAAO,EACL,SAAS,EACT,gBAAgB,EAChB,eAAe,EACf,aAAa,EACb,qBAAqB,EACrB,wBAAwB,EACxB,6BAA6B,GAC9B,CAAA"}
+{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../../src/components/Accordion/Accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,kBAAkB,MAAM,2BAA2B,CAAA;AAC/D,OAAO,EACL,KAAK,sBAAsB,IAAI,2BAA2B,EAC1D,KAAK,oBAAoB,IAAI,yBAAyB,EACvD,MAAM,2BAA2B,CAAA;AAKlC;;;;;GAKG;AACH,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,CAAA;AAEjE,mEAAmE;AACnE,MAAM,WAAW,oBAAqB,SAAQ,yBAAyB;IACrE,yDAAyD;IACzD,IAAI,EAAE,QAAQ,CAAA;IACd;;;;OAIG;IACH,OAAO,CAAC,EAAE,gBAAgB,CAAA;IAC1B,iFAAiF;IACjF,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,qEAAqE;IACrE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,oDAAoD;IACpD,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,2EAA2E;IAC3E,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,gFAAgF;AAChF,MAAM,WAAW,sBAAuB,SAAQ,2BAA2B;IACzE,sEAAsE;IACtE,IAAI,EAAE,UAAU,CAAA;IAChB;;;;OAIG;IACH,OAAO,CAAC,EAAE,gBAAgB,CAAA;IAC1B,8EAA8E;IAC9E,KAAK,CAAC,EAAE,MAAM,EAAE,CAAA;IAChB,qDAAqD;IACrD,YAAY,CAAC,EAAE,MAAM,EAAE,CAAA;IACvB,0EAA0E;IAC1E,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;IACzC,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,cAAc,GAAG,oBAAoB,GAAG,sBAAsB,CAAA;AAE1E;;;GAGG;AACH,MAAM,WAAW,kBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,IAAI,CAAC;IAC5D,qGAAqG;IACrG,KAAK,EAAE,MAAM,CAAA;IACb,mEAAmE;IACnE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;;;;;;;;;;;;OAcG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B;;;;;;;;;;;OAWG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB;AAED;;;;GAIG;AACH,MAAM,MAAM,oBAAoB,GAAG,KAAK,CAAC,cAAc,CACrD,OAAO,kBAAkB,CAAC,MAAM,CACjC,CAAA;AAED;;;;GAIG;AACH,MAAM,MAAM,qBAAqB,GAAG,KAAK,CAAC,cAAc,CACtD,OAAO,kBAAkB,CAAC,OAAO,CAClC,CAAA;AAMD,QAAA,MAAM,qBAAqB;;8EAYzB,CAAA;AAEF,QAAA,MAAM,wBAAwB;;8EAe7B,CAAA;AAED,QAAA,MAAM,6BAA6B;;8EASjC,CAAA;AA8BF,QAAA,MAAM,SAAS,GAAI,+CAIhB,cAAc,4CAahB,CAAA;AAED,QAAA,MAAM,aAAa,GAAI,wFAQpB,kBAAkB,4CAiDpB,CAAA;AAED,QAAA,MAAM,eAAe,GAAI,mCAItB,oBAAoB,4CA+BtB,CAAA;AAED,QAAA,MAAM,gBAAgB,GAAI,mCAIvB,qBAAqB,4CA6BvB,CAAA;AAED,OAAO,EACL,SAAS,EACT,gBAAgB,EAChB,eAAe,EACf,aAAa,EACb,qBAAqB,EACrB,wBAAwB,EACxB,6BAA6B,GAC9B,CAAA"}

package/dist/components/Button/Button.d.ts

@@ -3,48 +3,102 @@ import { buttonVariants } from './buttonVariants';
 import * as React from 'react';
 /**
  * Props for the Button component.
- * Extends standard button HTML attributes. The `iconOnly` and `size` CVA variants
- * are excluded from VariantProps and re-declared with custom types.
+ *
+ * Extends standard button HTML attributes. CVA's inferred `iconOnly` and `size`
+ * variants are omitted from `VariantProps` and re-declared below with explicit
+ * union types so consumers see the allowed values in `.d.ts` output.
  */
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, Omit<VariantProps<typeof buttonVariants>, 'iconOnly' | 'size'> {
     /**
-     * Visual style variant: primary (brand), secondary (outlined), tertiary (subtle),
-     * invert (dark backgrounds), dashed (bordered), link/linkInvert (text only).
+     * Visual style variant.
+     *
+     * - `primary` — brand-colored solid button for the main call-to-action.
+     * - `secondary` — outlined button for secondary actions.
+     * - `tertiary` — subtle button for low-emphasis actions.
+     * - `invert` — inverted colors for dark backgrounds.
+     * - `dashed` — dashed-border button, typically for add/create actions.
+     * - `link` / `linkInvert` — text-only link-styled button.
+     *
      * @default 'primary'
      */
     variant?: 'primary' | 'secondary' | 'tertiary' | 'invert' | 'dashed' | 'link' | 'linkInvert';
     /**
      * Controls height and padding. The `icon` size renders a compact icon-only
      * button with ghost styling (no background, border, or border radius).
+     *
      * @default 'md'
      */
     size?: 'xs' | 'sm' | 'md' | 'lg' | 'icon';
-    /** Stretches button to fill its container width. @default false */
+    /** Stretches the button to fill its container width. @default false */
     fullWidth?: boolean;
     /**
-     * When true, merges Button props/styles onto the single child element via
-     * Radix `Slot` (e.g. `<Button asChild><Link href="/">Home</Link></Button>`
-     * renders an `<a>` with all button styling and click target). Icons and the
-     * `loading` spinner are injected as siblings of the child's original content.
-     * Note: `disabled` has no effect on non-`<button>` children — use
-     * `aria-disabled` on the child instead.
+     * Renders the single child as the root element via Radix `Slot`, merging
+     * Button's props, styles, ref, and event handlers onto it. Use for
+     * polymorphic rendering — e.g. a router `Link`, a plain `<a>`, a `<label>`,
+     * or a `<button type="submit">` — while keeping full Button styling.
+     *
+     * Icons and the `loading` spinner are injected as siblings of the child's
+     * original content.
+     *
+     * Note: the `disabled` attribute is inert on non-`<button>` children
+     * (e.g. `<a>`). Use `aria-disabled` on the child instead.
+     *
      * @default false
+     * @example
+     * <Button asChild variant="primary">
+     *   <Link href="/dashboard">Go to dashboard</Link>
+     * </Button>
+     *
+     * @example
+     * <Button asChild variant="primary">
+     *   <button type="submit">Submit form</button>
+     * </Button>
      */
     asChild?: boolean;
-    /** React node displayed as an icon. Position controlled by `iconPosition`. */
+    /**
+     * Icon node rendered alongside the label. Position is controlled by
+     * `iconPosition`. Omit `children` to render an icon-only button (provide
+     * `aria-label` for accessibility).
+     *
+     * @example
+     * <Button icon={<DownloadIcon />}>Download</Button>
+     *
+     * @example
+     * <Button icon={<PlusIcon />} aria-label="Add" />
+     */
     icon?: React.ReactNode;
-    /** Places icon before (`start`) or after (`end`) the button text. Ignored when `secondIcon` is provided. @default 'start' */
+    /**
+     * Places `icon` before (`'start'`) or after (`'end'`) the button text.
+     * Ignored when `secondIcon` is provided.
+     *
+     * @default 'start'
+     */
     iconPosition?: 'start' | 'end';
-    /** Optional trailing icon. When set, `icon` is always rendered at the start and `secondIcon` at the end, ignoring `iconPosition`. */
+    /**
+     * Optional trailing icon. When set, `icon` is always rendered at the start
+     * and `secondIcon` at the end, overriding `iconPosition`.
+     *
+     * @example
+     * <Button icon={<PlusIcon />} secondIcon={<ArrowRightIcon />}>Add and continue</Button>
+     */
     secondIcon?: React.ReactNode;
-    /** Removes background, showing only text and icon with hover effects. @default false */
+    /**
+     * Removes background and border, showing only text and icon with hover
+     * effects. The `icon` size always renders as ghost regardless of this prop.
+     *
+     * @default false
+     */
     ghost?: boolean;
     /** Applies destructive/error styling for delete or dangerous actions. @default false */
     danger?: boolean;
     /**
-     * Shows a spinner overlay and disables interaction.
-     * Text becomes invisible but maintains button width.
+     * Shows a spinner overlay and disables interaction. The label fades out but
+     * the button keeps its width, preventing layout shift during async actions.
+     *
      * @default false
+     * @example
+     * const [saving, setSaving] = useState(false)
+     * <Button loading={saving} onClick={handleSave}>Save</Button>
      */
     loading?: boolean;
 }

package/dist/components/Button/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAI5D,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AAEjD;;;;GAIG;AACH,MAAM,WAAW,WACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EACnD,IAAI,CAAC,YAAY,CAAC,OAAO,cAAc,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;IAChE;;;;OAIG;IACH,OAAO,CAAC,EACJ,SAAS,GACT,WAAW,GACX,UAAU,GACV,QAAQ,GACR,QAAQ,GACR,MAAM,GACN,YAAY,CAAA;IAChB;;;;OAIG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAA;IACzC,mEAAmE;IACnE,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,8EAA8E;IAC9E,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,6HAA6H;IAC7H,YAAY,CAAC,EAAE,OAAO,GAAG,KAAK,CAAA;IAC9B,qIAAqI;IACrI,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC5B,wFAAwF;IACxF,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,wFAAwF;IACxF,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAED,QAAA,MAAM,MAAM,uFAqFX,CAAA;AAGD,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAA"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAI5D,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AAEjD;;;;;;GAMG;AACH,MAAM,WAAW,WACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EACnD,IAAI,CAAC,YAAY,CAAC,OAAO,cAAc,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;IAChE;;;;;;;;;;;OAWG;IACH,OAAO,CAAC,EACJ,SAAS,GACT,WAAW,GACX,UAAU,GACV,QAAQ,GACR,QAAQ,GACR,MAAM,GACN,YAAY,CAAA;IAChB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAA;IACzC,uEAAuE;IACvE,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;;;;;;;;;;;;;;;;;;;;OAsBG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;;;;;;;;;OAUG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,OAAO,GAAG,KAAK,CAAA;IAC9B;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC5B;;;;;OAKG;IACH,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,wFAAwF;IACxF,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAED,QAAA,MAAM,MAAM,uFAqFX,CAAA;AAGD,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAA"}

package/dist/components/DataTable/DataTable.d.ts

@@ -1,11 +1,19 @@
 import { ReactNode } from 'react';
 import { VariantProps } from 'class-variance-authority';
+/**
+ * CVA variants for the DataTable body cells. Controls background color
+ * (`variant`) and rounded-corner/border treatment based on the cell's
+ * position in the row (`position`).
+ */
 declare const dataTableCellVariants: (props?: ({
     variant?: "default" | "white" | null | undefined;
-    position?: "first" | "last" | "middle" | null | undefined;
+    position?: "middle" | "first" | "last" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 /**
- * Column definition for the DataTable component.
+ * Column definition for the DataTable component. Describes how a single column
+ * pulls its value from each row object, how its header renders, and optionally
+ * how each cell renders.
+ *
  * @typeParam T - The type of data objects in each row
  *
  * @example
@@ -15,21 +23,27 @@ declare const dataTableCellVariants: (props?: ({
  *   { dataKey: 'name', title: '', render: (value, row, i) => <Button onClick={() => edit(i)} /> },
  * ]
  */
-export interface DataTableColumn<T> {
-    /** Property key from the data object to display in this column. */
+export interface DataTableColumn<T extends {
+    id: string | number;
+}> {
+    /** Property key on each row object whose value is displayed in this column. */
     dataKey: keyof T;
-    /** Header label for the column. */
+    /** Header label for the column. Pass an empty string to render a blank header (e.g. an actions column). */
     title: ReactNode;
-    /** Additional CSS class applied to both the header and body cells. */
+    /** Extra CSS class applied to both the header cell (`<th>`) and body cells (`<td>`) of this column. */
     className?: string;
     /**
-     * Truncates cell text to the specified number of lines.
-     * `true` or `1` clamps to one line, `2` clamps to two lines.
+     * Truncates default cell text to the specified number of lines. Has no
+     * effect when a custom `render` is provided.
+     * - `true` or `1` clamps to one line
+     * - `2` clamps to two lines
      */
     lineClamp?: boolean | 1 | 2;
     /**
      * Custom render function for cell content. When omitted, the raw value
-     * is displayed inside a Typography component.
+     * at `dataKey` is displayed inside a Typography component. The function
+     * receives the raw value, the full row object, the row index, and the
+     * table's `disabled` state so custom cells can mirror the disabled styling.
      *
      * @example
      * render: (value, rowData, rowIndex, disabled) => (
@@ -40,29 +54,61 @@ export interface DataTableColumn<T> {
 }
 /**
  * Props for the DataTable component.
- * Extends standard table attributes except `children` (content is driven by `data` and `columns`).
- * @typeParam T - The type of data objects in each row
+ * Extends standard table attributes except `children` (content is driven by
+ * `data` and `columns` rather than JSX children).
+ *
+ * @typeParam T - The type of data objects in each row. Must include an
+ *   `id: string | number` field so each row has a stable React key —
+ *   keying by index corrupts focus / uncontrolled inputs / animation state
+ *   whenever rows reorder, filter, or paginate.
  */
-export interface DataTableProps<T> extends Omit<React.HTMLAttributes<HTMLTableElement>, 'children'>, Omit<VariantProps<typeof dataTableCellVariants>, 'variant' | 'position'> {
-    /** Array of data objects to display as table rows. */
+export interface DataTableProps<T extends {
+    id: string | number;
+}> extends Omit<React.HTMLAttributes<HTMLTableElement>, 'children'>, Omit<VariantProps<typeof dataTableCellVariants>, 'variant' | 'position'> {
+    /** Array of data objects to display. Each item renders as one table row. */
     data: T[];
-    /** Column definitions describing headers and cell rendering. @see DataTableColumn */
+    /**
+     * Column definitions describing headers, cell rendering, and per-column styling.
+     * @see DataTableColumn
+     */
     columns: DataTableColumn<T>[];
     /** Controls visibility of the table header row. @default true */
     showHeader?: boolean;
-    /** Additional CSS class applied to the table element. */
+    /** Extra CSS class applied to the `<table>` element. */
     className?: string;
-    /** Visual style variant for row background. @default 'default' */
+    /**
+     * Visual style variant for row background.
+     * - `'default'` uses the primary surface color
+     * - `'white'` uses the secondary surface color (for nested/alt backgrounds)
+     *
+     * @default 'default'
+     */
     variant?: 'default' | 'white';
-    /** Prevents interaction and applies muted text colors. @default false */
+    /**
+     * Prevents row-click interaction and applies muted text colors. The value
+     * is also forwarded to every column's `render` callback so custom cells
+     * can reflect the disabled state.
+     *
+     * @default false
+     */
     disabled?: boolean;
     /**
      * Fires when a row is clicked (pointer only — rows are not keyboard-activatable).
-     * When provided and not `disabled`, rows get a pointer cursor and a
-     * hover/focus-within border on cells.
+     * When provided and the table is not `disabled`, rows get a pointer cursor
+     * and a hover/focus-within border on cells. Inner interactive elements
+     * should call `event.stopPropagation()` to prevent the row handler from firing.
+     *
+     * @example
+     * <DataTable
+     *   data={users}
+     *   columns={columns}
+     *   onRowClick={(rowData, rowIndex) => openDetail(rowData.id)}
+     * />
      */
     onRowClick?: (rowData: T, rowIndex: number) => void;
 }
-declare const DataTable: <T>({ data, columns, showHeader, className, variant, disabled, onRowClick, ...props }: DataTableProps<T>) => import("react/jsx-runtime").JSX.Element;
+declare const DataTable: <T extends {
+    id: string | number;
+}>({ data, columns, showHeader, className, variant, disabled, onRowClick, ...props }: DataTableProps<T>) => import("react/jsx-runtime").JSX.Element;
 export { DataTable, dataTableCellVariants };
 //# sourceMappingURL=DataTable.d.ts.map

package/dist/components/DataTable/DataTable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataTable.d.ts","sourceRoot":"","sources":["../../../src/components/DataTable/DataTable.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,EAAE,KAAK,YAAY,EAAO,MAAM,0BAA0B,CAAA;AAIjE,QAAA,MAAM,qBAAqB;;;8EAmB1B,CAAA;AAED;;;;;;;;;;GAUG;AACH,MAAM,WAAW,eAAe,CAAC,CAAC;IAChC,mEAAmE;IACnE,OAAO,EAAE,MAAM,CAAC,CAAA;IAChB,mCAAmC;IACnC,KAAK,EAAE,SAAS,CAAA;IAChB,sEAAsE;IACtE,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,GAAG,CAAC,GAAG,CAAC,CAAA;IAC3B;;;;;;;;OAQG;IACH,MAAM,CAAC,EAAE,CACP,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,EACjB,OAAO,EAAE,CAAC,EACV,QAAQ,EAAE,MAAM,EAChB,QAAQ,CAAC,EAAE,OAAO,KACf,SAAS,CAAA;CACf;AAED;;;;GAIG;AACH,MAAM,WAAW,cAAc,CAAC,CAAC,CAC/B,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,EAAE,UAAU,CAAC,EAC9D,IAAI,CAAC,YAAY,CAAC,OAAO,qBAAqB,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;IAC1E,sDAAsD;IACtD,IAAI,EAAE,CAAC,EAAE,CAAA;IACT,qFAAqF;IACrF,OAAO,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAA;IAC7B,iEAAiE;IACjE,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,yDAAyD;IACzD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,kEAAkE;IAClE,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,CAAA;IAC7B,yEAAyE;IACzE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;;OAIG;IACH,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAA;CACpD;AAED,QAAA,MAAM,SAAS,GAAI,CAAC,EAAG,mFASpB,cAAc,CAAC,CAAC,CAAC,4CAwGnB,CAAA;AAED,OAAO,EAAE,SAAS,EAAE,qBAAqB,EAAE,CAAA"}
+{"version":3,"file":"DataTable.d.ts","sourceRoot":"","sources":["../../../src/components/DataTable/DataTable.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,EAAE,KAAK,YAAY,EAAO,MAAM,0BAA0B,CAAA;AAIjE;;;;GAIG;AACH,QAAA,MAAM,qBAAqB;;;8EAmB1B,CAAA;AAED;;;;;;;;;;;;;GAaG;AACH,MAAM,WAAW,eAAe,CAAC,CAAC,SAAS;IAAE,EAAE,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE;IAChE,+EAA+E;IAC/E,OAAO,EAAE,MAAM,CAAC,CAAA;IAChB,2GAA2G;IAC3G,KAAK,EAAE,SAAS,CAAA;IAChB,uGAAuG;IACvG,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,GAAG,CAAC,GAAG,CAAC,CAAA;IAC3B;;;;;;;;;;OAUG;IACH,MAAM,CAAC,EAAE,CACP,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,EACjB,OAAO,EAAE,CAAC,EACV,QAAQ,EAAE,MAAM,EAChB,QAAQ,CAAC,EAAE,OAAO,KACf,SAAS,CAAA;CACf;AAED;;;;;;;;;GASG;AACH,MAAM,WAAW,cAAc,CAAC,CAAC,SAAS;IAAE,EAAE,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,CAC/D,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,EAAE,UAAU,CAAC,EAC9D,IAAI,CAAC,YAAY,CAAC,OAAO,qBAAqB,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;IAC1E,4EAA4E;IAC5E,IAAI,EAAE,CAAC,EAAE,CAAA;IACT;;;OAGG;IACH,OAAO,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAA;IAC7B,iEAAiE;IACjE,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,wDAAwD;IACxD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,CAAA;IAC7B;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;;;;;;;;;;OAYG;IACH,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAA;CACpD;AAED,QAAA,MAAM,SAAS,GAAI,CAAC,SAAS;IAAE,EAAE,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,EAAE,mFASnD,cAAc,CAAC,CAAC,CAAC,4CAwGnB,CAAA;AAED,OAAO,EAAE,SAAS,EAAE,qBAAqB,EAAE,CAAA"}

package/dist/components/DataTable/DataTable.js

@@ -1,9 +1,9 @@
-import { jsx as r, jsxs as h } from "react/jsx-runtime";
+import { jsx as t, jsxs as h } from "react/jsx-runtime";
 import "react";
 import { cva as u } from "class-variance-authority";
-import { cn as i } from "../../utils/cn.js";
-import { typographyVariants as y, Typography as g } from "../Typography/Typography.js";
-const v = u(
+import { cn as a } from "../../utils/cn.js";
+import { typographyVariants as y, Typography as x } from "../Typography/Typography.js";
+const g = u(
   "h-comp-table-h-def border-y border-stroke-base-secondary px-2xl transition-colors",
   {
     variants: {
@@ -24,28 +24,28 @@ const v = u(
   }
 ), K = ({
   data: p,
-  columns: l,
+  columns: n,
   showHeader: m = !0,
   className: c,
   variant: f = "default",
-  disabled: s = !1,
-  onRowClick: d,
+  disabled: i = !1,
+  onRowClick: s,
   ...b
 }) => {
-  const n = !!d && !s;
-  return /* @__PURE__ */ r("div", { className: "w-full overflow-x-auto overflow-y-hidden", children: /* @__PURE__ */ h(
+  const l = !!s && !i;
+  return /* @__PURE__ */ t("div", { className: "w-full overflow-x-auto overflow-y-hidden", children: /* @__PURE__ */ h(
     "table",
     {
-      className: i(
+      className: a(
         "-my-md w-full border-separate border-spacing-y-md",
         c
       ),
       ...b,
       children: [
-        m && /* @__PURE__ */ r("thead", { children: /* @__PURE__ */ r("tr", { children: l.map((t, a) => /* @__PURE__ */ r(
+        m && /* @__PURE__ */ t("thead", { children: /* @__PURE__ */ t("tr", { children: n.map((e, d) => /* @__PURE__ */ t(
           "th",
           {
-            className: i(
+            className: a(
               y({
                 size: "sm",
                 uppercase: !0,
@@ -54,56 +54,56 @@ const v = u(
               }),
               "px-comp-table-p text-left text-text-dark-secondary",
               {
-                "text-text-dark-disabled": s
+                "text-text-dark-disabled": i
               },
-              t.className
+              e.className
             ),
-            children: t.title
+            children: e.title
           },
-          a
+          d
         )) }) }),
-        /* @__PURE__ */ r("tbody", { children: p.map((t, a) => /* @__PURE__ */ r(
+        /* @__PURE__ */ t("tbody", { children: p.map((e, d) => /* @__PURE__ */ t(
           "tr",
           {
-            className: i("group", n && "cursor-pointer"),
-            onClick: n ? () => d == null ? void 0 : d(t, a) : void 0,
-            children: l.map((e, o) => /* @__PURE__ */ r(
+            className: a("group", l && "cursor-pointer"),
+            onClick: l ? () => s == null ? void 0 : s(e, d) : void 0,
+            children: n.map((r, o) => /* @__PURE__ */ t(
               "td",
               {
-                className: i(
-                  v({
+                className: a(
+                  g({
                     variant: f,
-                    position: o === 0 ? "first" : o === l.length - 1 ? "last" : "middle"
+                    position: o === 0 ? "first" : o === n.length - 1 ? "last" : "middle"
                   }),
-                  n && "group-focus-within:border-icon-brand-focus group-hover:border-icon-brand-hover",
-                  e.className
+                  l && "group-focus-within:border-icon-brand-focus group-hover:border-icon-brand-hover",
+                  r.className
                 ),
-                children: e.render ? e.render(
-                  t[e.dataKey],
-                  t,
-                  a,
-                  s
-                ) : /* @__PURE__ */ r(
-                  g,
+                children: r.render ? r.render(
+                  e[r.dataKey],
+                  e,
+                  d,
+                  i
+                ) : /* @__PURE__ */ t(
+                  x,
                   {
                     variant: "body",
                     size: "base",
                     weight: "medium",
                     component: "span",
                     fixY: !0,
-                    className: i({
-                      "line-clamp-1": e.lineClamp === !0 || e.lineClamp === 1,
-                      "line-clamp-2": e.lineClamp === 2,
-                      "text-text-dark-disabled": s
+                    className: a({
+                      "line-clamp-1": r.lineClamp === !0 || r.lineClamp === 1,
+                      "line-clamp-2": r.lineClamp === 2,
+                      "text-text-dark-disabled": i
                     }),
-                    children: t[e.dataKey]
+                    children: e[r.dataKey]
                   }
                 )
               },
               o
             ))
           },
-          a
+          e.id
         )) })
       ]
     }
@@ -111,5 +111,5 @@ const v = u(
 };
 export {
   K as DataTable,
-  v as dataTableCellVariants
+  g as dataTableCellVariants
 };

package/dist/components/DataTable/DataTable.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataTable.stories.d.ts","sourceRoot":"","sources":["../../../src/components/DataTable/DataTable.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAQ3D,QAAA,MAAM,IAAI,EAAE,IAkDX,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAA;AA0FrB,eAAO,MAAM,OAAO,EAAE,KAUrB,CAAA;AAaD,eAAO,MAAM,WAAW,EAAE,KAazB,CAAA;AA0CD,eAAO,MAAM,iBAAiB,EAAE,KAa/B,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAgB1B,CAAA;AASD,eAAO,MAAM,kBAAkB,EAAE,KAoIhC,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAqJ1B,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAgB1B,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KActB,CAAA;AAED,eAAO,MAAM,oBAAoB,EAAE,KAclC,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAqEzB,CAAA"}
+{"version":3,"file":"DataTable.stories.d.ts","sourceRoot":"","sources":["../../../src/components/DataTable/DataTable.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAQ3D,QAAA,MAAM,IAAI,EAAE,IAkDX,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAA;AA8FrB,eAAO,MAAM,OAAO,EAAE,KAUrB,CAAA;AAaD,eAAO,MAAM,WAAW,EAAE,KAazB,CAAA;AA0CD,eAAO,MAAM,iBAAiB,EAAE,KAa/B,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAgB1B,CAAA;AAUD,eAAO,MAAM,kBAAkB,EAAE,KAwIhC,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAwJ1B,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAgB1B,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KActB,CAAA;AAED,eAAO,MAAM,oBAAoB,EAAE,KAclC,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAqEzB,CAAA"}