@vkzstudio/muza-ui 1.0.43 → 1.0.45

package/dist/components/ExpandableTable/ExpandableTable.d.ts

@@ -1,14 +1,25 @@
 import { ReactNode } from 'react';
-/**
- * Named breakpoint at and above which a column becomes visible.
- * Mirrors the breakpoints exported from `@/hooks/use-is-breakpoint`.
- */
-export type ResponsiveBreakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
+import { ResponsiveBreakpoint } from '../../hooks/use-is-breakpoint';
+export type { ResponsiveBreakpoint };
 /**
  * Column definition for the ExpandableTable.
+ *
  * @typeParam T - The type of data objects in each row
+ *
+ * @example
+ * const columns: IColumn<Order>[] = [
+ *   { dataKey: 'date', title: 'Date', responsive: 'sm' },
+ *   {
+ *     dataKey: 'status',
+ *     title: 'Status',
+ *     responsive: 'md',
+ *     render: (value) => <Tag variant="success">{value}</Tag>,
+ *   },
+ * ]
  */
-export interface IColumn<T> {
+export interface IColumn<T extends {
+    id: string | number;
+}> {
     /** Key of the data object to display in this column. */
     dataKey: keyof T;
     /** Header content rendered in the table head. */
@@ -28,50 +39,110 @@ export interface IColumn<T> {
      * - Named breakpoint (`'xs'..'3xl'`): visible at and above that breakpoint, rendered with static Tailwind classes.
      * - Boolean: caller supplies the visibility directly (e.g. from `useMediaQuery('(min-width: 52rem)')`).
      *   `true` shows the column, `false` hides it. Use this for arbitrary thresholds.
+     *
      * @default 'xs'
+     * @see ResponsiveBreakpoint
      */
     responsive?: ResponsiveBreakpoint | boolean;
     /**
      * When `responsive` hides this column, also render it in the automatic expandable area
      * below the row. Set to `false` to just hide the column — useful when the expandable
      * area already contains a richer version of the same data.
+     *
      * @default true
      */
     moveToExpandable?: boolean;
 }
 /**
  * Cell definition within an expandable row section.
+ *
  * @typeParam T - The type of data objects in each row
+ *
+ * @example
+ * const cell: IExpandableTableRowCell<Order> = {
+ *   dataKey: 'customerName',
+ *   title: 'Customer',
+ *   render: (value) => <a href="#profile">{value}</a>,
+ * }
  */
-export interface IExpandableTableRowCell<T> {
+export interface IExpandableTableRowCell<T extends {
+    id: string | number;
+}> {
     /** Key of the data object to display in this cell. */
     dataKey: keyof T;
     /** Additional CSS class applied to the cell. */
     className?: string;
     /** Label rendered next to the cell value. */
     title: ReactNode;
-    /** Custom render function for the cell value. When omitted, the raw value is rendered as text. */
+    /**
+     * Custom render function for the cell value.
+     * When omitted, the raw value is rendered as text.
+     *
+     * @example
+     * render: (value, row) => <Typography weight="medium">{value}</Typography>
+     */
     render?: (value: T[keyof T], rowData: T) => ReactNode;
 }
 /**
  * Section definition for the expandable row content.
  * Groups related cells under an optional heading.
+ *
  * @typeParam T - The type of data objects in each row
+ *
+ * @example
+ * const section: IExpandableTableRowSection<Order> = {
+ *   title: 'Customer Information',
+ *   cells: [
+ *     { dataKey: 'customerName', title: 'Name' },
+ *     { dataKey: 'customerAddress', title: 'Address' },
+ *   ],
+ * }
  */
-export interface IExpandableTableRowSection<T> {
+export interface IExpandableTableRowSection<T extends {
+    id: string | number;
+}> {
     /** Optional heading rendered above the section cells. */
     title?: ReactNode;
-    /** Array of cell definitions displayed within this section. @see IExpandableTableRowCell */
+    /**
+     * Array of cell definitions displayed within this section.
+     *
+     * @see IExpandableTableRowCell
+     */
     cells: IExpandableTableRowCell<T>[];
 }
 /**
  * Props for the ExpandableTable component.
- * @typeParam T - The type of data objects in each row
+ *
+ * @typeParam T - The type of data objects in each row. Must include an
+ *   `id: string | number` field — used both as the React key and as the
+ *   internal expansion-state key. Keying by index corrupts focus, animation,
+ *   and expansion state whenever rows reorder, filter, or paginate.
+ *
+ * @example
+ * <ExpandableTable<Order>
+ *   data={orders}
+ *   columns={columns}
+ *   expandableRowSections={[
+ *     { title: 'Details', cells: [{ dataKey: 'invoiceNumber', title: 'Invoice' }] },
+ *   ]}
+ * />
  */
-export interface ExpandableTableProps<T> {
+export interface ExpandableTableProps<T extends {
+    id: string | number;
+}> {
     /** Array of data objects where each item represents one table row. */
     data: T[];
-    /** Array of column definitions describing headers and cell rendering. @see IColumn */
+    /**
+     * Array of column definitions describing headers and cell rendering.
+     *
+     * @example
+     * const columns: IColumn<Order>[] = [
+     *   { dataKey: 'date', title: 'Date', responsive: 'sm' },
+     *   { dataKey: 'title', title: 'Order' },
+     * ]
+     *
+     * @see IColumn
+     */
     columns: IColumn<T>[];
     /**
      * Sections shown when a row is expanded. Can be a static array applied to every row
@@ -80,21 +151,32 @@ export interface ExpandableTableProps<T> {
      *
      * @example
      * // Static sections
-     * expandableRowSections={[{ title: 'Details', cells: [{ dataKey: 'name', title: 'Name' }] }]}
+     * expandableRowSections={[
+     *   { title: 'Details', cells: [{ dataKey: 'name', title: 'Name' }] },
+     * ]}
      *
      * // Dynamic sections based on row data
-     * expandableRowSections={(row) => row.status === 'active' ? activeSections : inactiveSections}
+     * expandableRowSections={(row) =>
+     *   row.status === 'active' ? activeSections : inactiveSections
+     * }
      *
      * @see IExpandableTableRowSection
      */
     expandableRowSections?: IExpandableTableRowSection<T>[] | ((row: T) => IExpandableTableRowSection<T>[]);
     /**
-     * Custom CSS classes for internal elements.
+     * Custom CSS classes for internal elements of the expanded row area.
+     * Use to override the default grid layouts when labels are long or when
+     * independent column sizing is needed.
      *
      * @example
-     * ```tsx
+     * // Override the outer grid used inside the expanded row
      * classNames={{ expandedContentGrid: 'md:grid-cols-[200px_1fr]' }}
-     * ```
+     *
+     * // Replace the subgrid inside each section with independent columns
+     * classNames={{
+     *   sectionTitle: 'md:grid-cols-[minmax(200px,auto)_1fr]',
+     *   cellsWrap: 'md:grid-cols-[minmax(200px,auto)_1fr]',
+     * }}
      */
     classNames?: Partial<{
         /** Custom class for the expanded content grid container (overrides default `md:grid-cols-[auto_1fr]`). */
@@ -105,5 +187,7 @@ export interface ExpandableTableProps<T> {
         cellsWrap: string;
     }>;
 }
-export declare const ExpandableTable: <T>({ data, columns, expandableRowSections, classNames, }: ExpandableTableProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const ExpandableTable: <T extends {
+    id: string | number;
+}>({ data, columns, expandableRowSections, classNames, }: ExpandableTableProps<T>) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ExpandableTable.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ExpandableTable.d.ts","sourceRoot":"","sources":["../../../src/components/ExpandableTable/ExpandableTable.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,SAAS,EAMf,MAAM,OAAO,CAAA;AAuBd;;;GAGG;AACH,MAAM,MAAM,oBAAoB,GAC5B,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,KAAK,GACL,KAAK,CAAA;AAET;;;GAGG;AACH,MAAM,WAAW,OAAO,CAAC,CAAC;IACxB,wDAAwD;IACxD,OAAO,EAAE,MAAM,CAAC,CAAA;IAChB,iDAAiD;IACjD,KAAK,EAAE,SAAS,CAAA;IAChB,sEAAsE;IACtE,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,OAAO,EAAE,CAAC,KAAK,SAAS,CAAA;IACrD;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,oBAAoB,GAAG,OAAO,CAAA;IAC3C;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAA;CAC3B;AAED;;;GAGG;AACH,MAAM,WAAW,uBAAuB,CAAC,CAAC;IACxC,sDAAsD;IACtD,OAAO,EAAE,MAAM,CAAC,CAAA;IAChB,gDAAgD;IAChD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,6CAA6C;IAC7C,KAAK,EAAE,SAAS,CAAA;IAChB,kGAAkG;IAClG,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,OAAO,EAAE,CAAC,KAAK,SAAS,CAAA;CACtD;AAED;;;;GAIG;AACH,MAAM,WAAW,0BAA0B,CAAC,CAAC;IAC3C,yDAAyD;IACzD,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,4FAA4F;IAC5F,KAAK,EAAE,uBAAuB,CAAC,CAAC,CAAC,EAAE,CAAA;CACpC;AAED;;;GAGG;AACH,MAAM,WAAW,oBAAoB,CAAC,CAAC;IACrC,sEAAsE;IACtE,IAAI,EAAE,CAAC,EAAE,CAAA;IACT,sFAAsF;IACtF,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,CAAA;IACrB;;;;;;;;;;;;;OAaG;IACH,qBAAqB,CAAC,EAClB,0BAA0B,CAAC,CAAC,CAAC,EAAE,GAC/B,CAAC,CAAC,GAAG,EAAE,CAAC,KAAK,0BAA0B,CAAC,CAAC,CAAC,EAAE,CAAC,CAAA;IACjD;;;;;;;OAOG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;QACnB,0GAA0G;QAC1G,mBAAmB,EAAE,MAAM,CAAA;QAC3B,yFAAyF;QACzF,YAAY,EAAE,MAAM,CAAA;QACpB,0GAA0G;QAC1G,SAAS,EAAE,MAAM,CAAA;KAClB,CAAC,CAAA;CACH;AA4CD,eAAO,MAAM,eAAe,GAAI,CAAC,EAAG,uDAKjC,oBAAoB,CAAC,CAAC,CAAC,4CAiZzB,CAAA"}
+{"version":3,"file":"ExpandableTable.d.ts","sourceRoot":"","sources":["../../../src/components/ExpandableTable/ExpandableTable.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,SAAS,EAMf,MAAM,OAAO,CAAA;AAEd,OAAO,EACL,KAAK,oBAAoB,EAE1B,MAAM,2BAA2B,CAAA;AAclC,YAAY,EAAE,oBAAoB,EAAE,CAAA;AAEpC;;;;;;;;;;;;;;;GAeG;AACH,MAAM,WAAW,OAAO,CAAC,CAAC,SAAS;IAAE,EAAE,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE;IACxD,wDAAwD;IACxD,OAAO,EAAE,MAAM,CAAC,CAAA;IAChB,iDAAiD;IACjD,KAAK,EAAE,SAAS,CAAA;IAChB,sEAAsE;IACtE,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,OAAO,EAAE,CAAC,KAAK,SAAS,CAAA;IACrD;;;;;;;;OAQG;IACH,UAAU,CAAC,EAAE,oBAAoB,GAAG,OAAO,CAAA;IAC3C;;;;;;OAMG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAA;CAC3B;AAED;;;;;;;;;;;GAWG;AACH,MAAM,WAAW,uBAAuB,CAAC,CAAC,SAAS;IAAE,EAAE,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE;IACxE,sDAAsD;IACtD,OAAO,EAAE,MAAM,CAAC,CAAA;IAChB,gDAAgD;IAChD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,6CAA6C;IAC7C,KAAK,EAAE,SAAS,CAAA;IAChB;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,OAAO,EAAE,CAAC,KAAK,SAAS,CAAA;CACtD;AAED;;;;;;;;;;;;;;GAcG;AACH,MAAM,WAAW,0BAA0B,CAAC,CAAC,SAAS;IAAE,EAAE,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE;IAC3E,yDAAyD;IACzD,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB;;;;OAIG;IACH,KAAK,EAAE,uBAAuB,CAAC,CAAC,CAAC,EAAE,CAAA;CACpC;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,WAAW,oBAAoB,CAAC,CAAC,SAAS;IAAE,EAAE,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE;IACrE,sEAAsE;IACtE,IAAI,EAAE,CAAC,EAAE,CAAA;IACT;;;;;;;;;;OAUG;IACH,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,CAAA;IACrB;;;;;;;;;;;;;;;;;OAiBG;IACH,qBAAqB,CAAC,EAClB,0BAA0B,CAAC,CAAC,CAAC,EAAE,GAC/B,CAAC,CAAC,GAAG,EAAE,CAAC,KAAK,0BAA0B,CAAC,CAAC,CAAC,EAAE,CAAC,CAAA;IACjD;;;;;;;;;;;;;;OAcG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;QACnB,0GAA0G;QAC1G,mBAAmB,EAAE,MAAM,CAAA;QAC3B,yFAAyF;QACzF,YAAY,EAAE,MAAM,CAAA;QACpB,0GAA0G;QAC1G,SAAS,EAAE,MAAM,CAAA;KAClB,CAAC,CAAA;CACH;AA4CD,eAAO,MAAM,eAAe,GAAI,CAAC,SAAS;IAAE,EAAE,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,EAAE,uDAKhE,oBAAoB,CAAC,CAAC,CAAC,4CAgYzB,CAAA"}

package/dist/components/ExpandableTable/ExpandableTable.js

@@ -1,13 +1,13 @@
-import { jsxs as m, jsx as s, Fragment as J } from "react/jsx-runtime";
-import { useState as B, useRef as Q, useEffect as U, useCallback as Y, useMemo as E, Fragment as Z } from "react";
-import { cva as D } from "class-variance-authority";
-import { useIsMinSm as S, useIsMinMd as R, useIsMinLg as I, useIsMinXl as w, useIsMin2xl as ee, useIsMin3xl as re } from "../../hooks/use-is-breakpoint.js";
-import { Table as se, TableHeader as te, TableRow as H, TableHead as ie, TableRowGroup as ne, TableCell as P } from "./Table.js";
-import { cn as o } from "../../utils/cn.js";
+import { jsxs as m, jsx as t, Fragment as G } from "react/jsx-runtime";
+import { useState as F, useRef as _, useEffect as O, useCallback as W, useMemo as K, Fragment as q } from "react";
+import { cva as J } from "class-variance-authority";
+import { useBreakpoints as Q } from "../../hooks/use-is-breakpoint.js";
+import { Table as U, TableHeader as X, TableRow as B, TableHead as Y, TableRowGroup as Z, TableCell as M } from "./Table.js";
+import { cn as l } from "../../utils/cn.js";
 import { Typography as g } from "../Typography/Typography.js";
-import { AltArrowDownOutline as de } from "@solar-icons/react-perf";
-import { Flex as A } from "../Flex/Flex.js";
-const G = D("", {
+import { AltArrowDownOutline as w } from "@solar-icons/react-perf";
+import { Flex as $ } from "../Flex/Flex.js";
+const j = J("", {
   variants: {
     responsive: {
       xs: "",
@@ -28,26 +28,26 @@ const G = D("", {
       "3xl": "3xl:hidden"
     }
   }
-}), X = (n) => typeof n == "string" && (n === "xs" || n === "sm" || n === "md" || n === "lg" || n === "xl" || n === "2xl" || n === "3xl"), C = (n, a) => n === void 0 || n === "xs" ? !0 : typeof n == "boolean" ? n : a[n], ge = ({
-  data: n,
-  columns: a,
-  expandableRowSections: t,
+}), z = (s) => typeof s == "string" && (s === "xs" || s === "sm" || s === "md" || s === "lg" || s === "xl" || s === "2xl" || s === "3xl"), E = (s, o) => s === void 0 || s === "xs" ? !0 : typeof s == "boolean" ? s : o[s], se = ({
+  data: s,
+  columns: o,
+  expandableRowSections: n,
   classNames: p
 }) => {
-  const [v, _] = B(/* @__PURE__ */ new Set()), [O, y] = B(/* @__PURE__ */ new Set()), f = Q(
+  const [v, H] = F(/* @__PURE__ */ new Set()), [L, u] = F(/* @__PURE__ */ new Set()), f = _(
     /* @__PURE__ */ new Map()
   );
-  U(() => {
+  O(() => {
     const e = f.current;
     return () => {
       e.forEach((i) => clearTimeout(i)), e.clear();
     };
   }, []);
-  const M = Y((e) => {
-    _((i) => {
-      const l = new Set(i);
-      if (l.has(e)) {
-        l.delete(e), y((c) => {
+  const C = W((e) => {
+    H((i) => {
+      const a = new Set(i);
+      if (a.has(e)) {
+        a.delete(e), u((c) => {
           const r = new Set(c);
           return r.add(e), r;
         });
@@ -55,53 +55,42 @@ const G = D("", {
         d && clearTimeout(d), f.current.set(
           e,
           setTimeout(() => {
-            y((c) => {
+            u((c) => {
               const r = new Set(c);
               return r.delete(e), r;
             }), f.current.delete(e);
           }, 150)
         );
       } else {
-        l.add(e);
+        a.add(e);
         const d = f.current.get(e);
-        d && (clearTimeout(d), f.current.delete(e), y((c) => {
+        d && (clearTimeout(d), f.current.delete(e), u((c) => {
           const r = new Set(c);
           return r.delete(e), r;
         }));
       }
-      return l;
+      return a;
     });
-  }, []), N = S(), V = R(), F = I(), K = w(), L = ee(), $ = re(), u = E(
-    () => ({
-      xs: !0,
-      sm: N,
-      md: V,
-      lg: F,
-      xl: K,
-      "2xl": L,
-      "3xl": $
-    }),
-    [N, V, F, K, L, $]
-  ), j = E(
-    () => a.some(
-      (e) => e.responsive !== void 0 && e.responsive !== "xs" && e.moveToExpandable !== !1 && !C(e.responsive, u)
+  }, []), x = Q(), N = K(
+    () => o.some(
+      (e) => e.responsive !== void 0 && e.responsive !== "xs" && e.moveToExpandable !== !1 && !E(e.responsive, x)
     ),
-    [a, u]
-  ), { firstVisibleIndex: W, lastVisibleIndex: q } = E(() => {
+    [o, x]
+  ), { firstVisibleIndex: P, lastVisibleIndex: A } = K(() => {
     let e = -1, i = -1;
-    return a.forEach((l, d) => {
-      C(l.responsive, u) && (e === -1 && (e = d), i = d);
+    return o.forEach((a, d) => {
+      E(a.responsive, x) && (e === -1 && (e = d), i = d);
     }), { firstVisibleIndex: e, lastVisibleIndex: i };
-  }, [a, u]), x = !t && j, z = !!t || x;
-  return /* @__PURE__ */ m(se, { children: [
-    /* @__PURE__ */ s(te, { children: /* @__PURE__ */ s(H, { className: "[&>th]:border-0 [&>th]:bg-transparent", children: a.map((e, i) => {
-      const l = X(e.responsive) ? e.responsive : void 0, d = e.responsive === !1;
-      return /* @__PURE__ */ s(
-        ie,
+  }, [o, x]), y = !n && N, V = !!n || y;
+  return /* @__PURE__ */ m(U, { children: [
+    /* @__PURE__ */ t(X, { children: /* @__PURE__ */ t(B, { className: "[&>th]:border-0 [&>th]:bg-transparent", children: o.map((e, i) => {
+      const a = z(e.responsive) ? e.responsive : void 0, d = e.responsive === !1;
+      return /* @__PURE__ */ t(
+        Y,
         {
-          className: o(
+          className: l(
             e.className,
-            G({ responsive: l }),
+            j({ responsive: a }),
             d && "hidden"
           ),
           children: e.title
@@ -109,45 +98,45 @@ const G = D("", {
         i
       );
     }) }) }),
-    n.map((e, i) => {
+    s.map((e) => {
       var c;
-      const l = v.has(i) || x, d = O.has(i);
+      const i = e.id, a = v.has(i) || y, d = L.has(i);
       return /* @__PURE__ */ m(
-        ne,
+        Z,
         {
-          className: o({
-            "group hover:[&_td]:border-stroke-brand-hover": t
+          className: l({
+            "group hover:[&_td]:border-stroke-brand-hover": n
           }),
           children: [
             /* @__PURE__ */ m(
-              H,
+              B,
               {
-                expandablePosition: t && (v.has(i) || d) || x ? "top" : "none",
-                className: o("focus-visible-default", {
-                  "cursor-pointer": t
+                expandablePosition: n && (v.has(i) || d) || y ? "top" : "none",
+                className: l("focus-visible-default", {
+                  "cursor-pointer": n
                 }),
-                onClick: t ? () => M(i) : void 0,
-                onKeyDown: t ? (r) => {
-                  (r.key === "Enter" || r.key === " ") && (r.preventDefault(), M(i));
+                onClick: n ? () => C(i) : void 0,
+                onKeyDown: n ? (r) => {
+                  (r.key === "Enter" || r.key === " ") && (r.preventDefault(), C(i));
                 } : void 0,
-                tabIndex: t ? 0 : void 0,
-                role: t ? "button" : void 0,
-                "aria-expanded": t ? v.has(i) : void 0,
+                tabIndex: n ? 0 : void 0,
+                role: n ? "button" : void 0,
+                "aria-expanded": n ? v.has(i) : void 0,
                 children: [
-                  a.map((r, h) => {
-                    const T = X(r.responsive) ? r.responsive : void 0, b = r.responsive === !1;
-                    return /* @__PURE__ */ s(
-                      P,
+                  o.map((r, h) => {
+                    const T = z(r.responsive) ? r.responsive : void 0, b = r.responsive === !1;
+                    return /* @__PURE__ */ t(
+                      M,
                       {
-                        isFirst: h === W,
-                        isLast: h === q && !t,
-                        expandablePosition: (l || d) && z ? "top" : "none",
-                        className: o(
+                        isFirst: h === P,
+                        isLast: h === A && !n,
+                        expandablePosition: (a || d) && V ? "top" : "none",
+                        className: l(
                           r.className,
-                          G({ responsive: T }),
+                          j({ responsive: T }),
                           b && "hidden"
                         ),
-                        children: r.render ? r.render(e[r.dataKey], e) : /* @__PURE__ */ s(
+                        children: r.render ? r.render(e[r.dataKey], e) : /* @__PURE__ */ t(
                           g,
                           {
                             variant: "body",
@@ -161,17 +150,17 @@ const G = D("", {
                       h
                     );
                   }),
-                  t && /* @__PURE__ */ s(
-                    P,
+                  n && /* @__PURE__ */ t(
+                    M,
                     {
                       className: "w-[68px]",
                       isFirst: !1,
                       isLast: !0,
                       expandablePosition: v.has(i) || d ? "top" : "none",
-                      children: /* @__PURE__ */ s(
-                        de,
+                      children: /* @__PURE__ */ t(
+                        w,
                         {
-                          className: o(
+                          className: l(
                             "text-text-brand-def transition-transform duration-300",
                             {
                               "rotate-180": v.has(i)
@@ -184,51 +173,51 @@ const G = D("", {
                 ]
               }
             ),
-            z && /* @__PURE__ */ s("tr", { "aria-hidden": !l, children: /* @__PURE__ */ s(
+            V && /* @__PURE__ */ t("tr", { "aria-hidden": !a, children: /* @__PURE__ */ t(
               "td",
               {
-                colSpan: a.length + (t ? 1 : 0),
+                colSpan: o.length + (n ? 1 : 0),
                 className: "border-0 p-0",
-                children: /* @__PURE__ */ s(
+                children: /* @__PURE__ */ t(
                   "div",
                   {
-                    className: o(
+                    className: l(
                       "grid transition-[grid-template-rows] duration-300 ease-in-out",
-                      l ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
+                      a ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
                     ),
-                    children: /* @__PURE__ */ s("div", { className: "min-h-0 overflow-hidden", children: /* @__PURE__ */ m(
+                    children: /* @__PURE__ */ t("div", { className: "min-h-0 overflow-hidden", children: /* @__PURE__ */ m(
                       "div",
                       {
-                        className: o(
+                        className: l(
                           "rounded-b-xl border-x-1 border-b-1 border-stroke-base-secondary bg-surface-base-secondary transition-colors group-hover:border-stroke-brand-hover"
                         ),
                         children: [
-                          /* @__PURE__ */ s("div", { className: "mx-comp-table-p border-t-1 border-stroke-base-secondary" }),
+                          /* @__PURE__ */ t("div", { className: "mx-comp-table-p border-t-1 border-stroke-base-secondary" }),
                           /* @__PURE__ */ m(
                             "div",
                             {
-                              className: o(
+                              className: l(
                                 "grid grid-cols-1 gap-2xl px-comp-table-p py-2xl md:grid-cols-[auto_1fr]",
                                 p == null ? void 0 : p.expandedContentGrid
                               ),
                               children: [
-                                j && /* @__PURE__ */ m(J, { children: [
-                                  /* @__PURE__ */ s(
-                                    A,
+                                N && /* @__PURE__ */ m(G, { children: [
+                                  /* @__PURE__ */ t(
+                                    $,
                                     {
                                       gap: "md",
                                       direction: "column",
                                       className: "col-span-full",
-                                      children: a.filter(
-                                        (r) => r.moveToExpandable !== !1 && r.responsive !== void 0 && r.responsive !== "xs" && !C(r.responsive, u)
+                                      children: o.filter(
+                                        (r) => r.moveToExpandable !== !1 && r.responsive !== void 0 && r.responsive !== "xs" && !E(r.responsive, x)
                                       ).map((r, h) => /* @__PURE__ */ m(
-                                        A,
+                                        $,
                                         {
                                           align: "center",
                                           justify: "between",
                                           direction: "row",
                                           children: [
-                                            /* @__PURE__ */ s(
+                                            /* @__PURE__ */ t(
                                               g,
                                               {
                                                 variant: "body",
@@ -239,7 +228,7 @@ const G = D("", {
                                             r.render ? r.render(
                                               e[r.dataKey],
                                               e
-                                            ) : /* @__PURE__ */ s(
+                                            ) : /* @__PURE__ */ t(
                                               g,
                                               {
                                                 variant: "body",
@@ -255,21 +244,21 @@ const G = D("", {
                                       ))
                                     }
                                   ),
-                                  t && /* @__PURE__ */ s("hr", { className: "col-span-full text-stroke-base-secondary md:col-span-2" })
+                                  n && /* @__PURE__ */ t("hr", { className: "col-span-full text-stroke-base-secondary md:col-span-2" })
                                 ] }),
-                                (c = typeof t == "function" ? t(e) : t) == null ? void 0 : c.map((r, h) => {
-                                  if (!t) return null;
-                                  const T = typeof t == "function" ? t(e).length : t.length;
-                                  return /* @__PURE__ */ m(Z, { children: [
+                                (c = typeof n == "function" ? n(e) : n) == null ? void 0 : c.map((r, h) => {
+                                  if (!n) return null;
+                                  const T = typeof n == "function" ? n(e).length : n.length;
+                                  return /* @__PURE__ */ m(q, { children: [
                                     /* @__PURE__ */ m(
                                       "div",
                                       {
-                                        className: o(
+                                        className: l(
                                           "col-span-full grid grid-cols-1 gap-y-xl md:col-span-2 md:grid-cols-subgrid",
                                           p == null ? void 0 : p.sectionTitle
                                         ),
                                         children: [
-                                          r.title && /* @__PURE__ */ s(
+                                          r.title && /* @__PURE__ */ t(
                                             g,
                                             {
                                               variant: "body",
@@ -281,16 +270,16 @@ const G = D("", {
                                               children: r.title
                                             }
                                           ),
-                                          /* @__PURE__ */ s(
+                                          /* @__PURE__ */ t(
                                             "div",
                                             {
-                                              className: o(
+                                              className: l(
                                                 "col-span-full grid grid-cols-1 gap-x-3xl md:col-span-2 md:grid-cols-subgrid md:gap-y-md",
                                                 p == null ? void 0 : p.cellsWrap
                                               ),
                                               children: r.cells.flatMap(
                                                 (b, k) => [
-                                                  /* @__PURE__ */ s(
+                                                  /* @__PURE__ */ t(
                                                     g,
                                                     {
                                                       component: "span",
@@ -300,7 +289,7 @@ const G = D("", {
                                                     },
                                                     `${k}-label`
                                                   ),
-                                                  b.render ? /* @__PURE__ */ s(
+                                                  b.render ? /* @__PURE__ */ t(
                                                     "div",
                                                     {
                                                       className: "mb-md block last-of-type:mb-0 md:mb-0",
@@ -310,7 +299,7 @@ const G = D("", {
                                                       )
                                                     },
                                                     `${k}-value`
-                                                  ) : /* @__PURE__ */ s(
+                                                  ) : /* @__PURE__ */ t(
                                                     g,
                                                     {
                                                       variant: "body",
@@ -328,7 +317,7 @@ const G = D("", {
                                         ]
                                       }
                                     ),
-                                    h < T - 1 && /* @__PURE__ */ s("hr", { className: "col-span-full text-stroke-base-secondary md:col-span-2" })
+                                    h < T - 1 && /* @__PURE__ */ t("hr", { className: "col-span-full text-stroke-base-secondary md:col-span-2" })
                                   ] }, h);
                                 })
                               ]
@@ -349,5 +338,5 @@ const G = D("", {
   ] });
 };
 export {
-  ge as ExpandableTable
+  se as ExpandableTable
 };

package/dist/components/ExpandableTable/ExpandableTable.stories.d.ts

@@ -1,7 +1,9 @@
 import { StoryObj } from '@storybook/react-vite';
 declare const meta: {
     title: string;
-    component: <T>({ data, columns, expandableRowSections, classNames, }: import('./ExpandableTable').ExpandableTableProps<T>) => import("react/jsx-runtime").JSX.Element;
+    component: <T extends {
+        id: string | number;
+    }>({ data, columns, expandableRowSections, classNames, }: import('./ExpandableTable').ExpandableTableProps<T>) => import("react/jsx-runtime").JSX.Element;
     parameters: {
         layout: string;
         docs: {
@@ -25,6 +27,9 @@ declare const meta: {
         expandableRowSections: {
             control: "object";
         };
+        classNames: {
+            control: "object";
+        };
     };
 };
 export default meta;

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

@@ -1 +1 @@
-{"version":3,"file":"ExpandableTable.stories.d.ts","sourceRoot":"","sources":["../../../src/components/ExpandableTable/ExpandableTable.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAO3D,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+B8B,CAAA;AAExC,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AA+MlC,eAAO,MAAM,MAAM,EAAE,KAsBpB,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KAkB/B,CAAA;AAED,eAAO,MAAM,mBAAmB,EAAE,KAwJjC,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAuBvB,CAAA;AAED,eAAO,MAAM,4BAA4B,EAAE,KAyH1C,CAAA;AAED,eAAO,MAAM,kBAAkB,EAAE,KA0DhC,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAoExB,CAAA;AAED,eAAO,MAAM,mBAAmB,EAAE,KA6EjC,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KA2E/B,CAAA"}
+{"version":3,"file":"ExpandableTable.stories.d.ts","sourceRoot":"","sources":["../../../src/components/ExpandableTable/ExpandableTable.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAO3D,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkC8B,CAAA;AAExC,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAmNlC,eAAO,MAAM,MAAM,EAAE,KAsBpB,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KAkB/B,CAAA;AAED,eAAO,MAAM,mBAAmB,EAAE,KAwJjC,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAuBvB,CAAA;AAED,eAAO,MAAM,4BAA4B,EAAE,KAyH1C,CAAA;AAED,eAAO,MAAM,kBAAkB,EAAE,KA0DhC,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAoExB,CAAA;AAED,eAAO,MAAM,mBAAmB,EAAE,KA6EjC,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KA2E/B,CAAA"}

package/dist/components/ExpandableTable/index.d.ts

@@ -1,2 +1,2 @@
-export { ExpandableTable, type ExpandableTableProps, type IColumn, type IExpandableTableRowCell, type IExpandableTableRowSection, } from './ExpandableTable';
+export { ExpandableTable, type ExpandableTableProps, type IColumn, type IExpandableTableRowCell, type IExpandableTableRowSection, type ResponsiveBreakpoint, } from './ExpandableTable';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/ExpandableTable/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ExpandableTable/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,eAAe,EACf,KAAK,oBAAoB,EACzB,KAAK,OAAO,EACZ,KAAK,uBAAuB,EAC5B,KAAK,0BAA0B,GAChC,MAAM,mBAAmB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ExpandableTable/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,eAAe,EACf,KAAK,oBAAoB,EACzB,KAAK,OAAO,EACZ,KAAK,uBAAuB,EAC5B,KAAK,0BAA0B,EAC/B,KAAK,oBAAoB,GAC1B,MAAM,mBAAmB,CAAA"}