@vkzstudio/muza-ui 1.0.44 → 1.0.45

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

@@ -1 +1 @@
-{"version":3,"file":"LanguageSwitcher.d.ts","sourceRoot":"","sources":["../../../src/components/LanguageSwitcher/LanguageSwitcher.tsx"],"names":[],"mappings":"AAYA;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,kEAAkE;IAClE,IAAI,EAAE,MAAM,CAAA;IACZ,4DAA4D;IAC5D,KAAK,EAAE,MAAM,CAAA;IACb,+DAA+D;IAC/D,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACvB;AAED;;GAEG;AACH,MAAM,WAAW,qBAAqB;IACpC;;;OAGG;IACH,SAAS,EAAE,cAAc,EAAE,CAAA;IAC3B,wFAAwF;IACxF,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC,0FAA0F;IAC1F,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,0FAA0F;IAC1F,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,QAAA,MAAM,gBAAgB,GAAI,oDAKvB,qBAAqB,4CA2DvB,CAAA;AAED,OAAO,EAAE,gBAAgB,EAAE,CAAA"}
+{"version":3,"file":"LanguageSwitcher.d.ts","sourceRoot":"","sources":["../../../src/components/LanguageSwitcher/LanguageSwitcher.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,WAAW,CAAA;AAWpD;;;;;;;;;;;GAWG;AACH,MAAM,WAAW,cAAc;IAC7B,kEAAkE;IAClE,IAAI,EAAE,MAAM,CAAA;IACZ,4DAA4D;IAC5D,KAAK,EAAE,MAAM,CAAA;IACb,+DAA+D;IAC/D,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACvB;AAED;;GAEG;AACH,MAAM,WAAW,qBAAqB;IACpC;;;OAGG;IACH,SAAS,EAAE,cAAc,EAAE,CAAA;IAC3B,wFAAwF;IACxF,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC,0FAA0F;IAC1F,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,0FAA0F;IAC1F,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB;;;;OAIG;IACH,WAAW,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,MAAM,CAAC,CAAA;IACvC,wEAAwE;IACxE,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,QAAA,MAAM,gBAAgB,GAAI,yFAQvB,qBAAqB,4CAuEvB,CAAA;AAED,OAAO,EAAE,gBAAgB,EAAE,CAAA"}

package/dist/components/LanguageSwitcher/LanguageSwitcher.js

@@ -1,64 +1,83 @@
-import { jsxs as o, jsx as r } from "react/jsx-runtime";
-import { useState as d, useEffect as u } from "react";
-import { DropdownMenu as f, DropdownMenuTrigger as h, DropdownMenuContent as w, DropdownMenuRadioGroup as v, DropdownMenuRadioItem as x } from "../DropdownMenu/DropdownMenu.js";
-import { Typography as g } from "../Typography/Typography.js";
-import { AltArrowDownOutline as D } from "@solar-icons/react-perf";
-import { cn as M } from "../../utils/cn.js";
-const j = ({
+import { jsxs as r, jsx as t } from "react/jsx-runtime";
+import { useState as h, useEffect as v } from "react";
+import { DropdownMenu as w, DropdownMenuTrigger as x, DropdownMenuContent as b, DropdownMenuRadioGroup as D, DropdownMenuRadioItem as y } from "../DropdownMenu/DropdownMenu.js";
+import { Button as z } from "../Button/Button.js";
+import { Typography as M } from "../Typography/Typography.js";
+import { AltArrowDownOutline as N } from "@solar-icons/react-perf";
+import { cn as A } from "../../utils/cn.js";
+const G = ({
   languages: i,
-  onValueChange: n,
-  defaultValue: l,
-  value: s
+  onValueChange: s,
+  defaultValue: u,
+  value: n,
+  isIconButton: f,
+  buttonProps: g,
+  disabled: a
 }) => {
-  var a;
-  const [m, c] = d(
-    l || ((a = i[0]) == null ? void 0 : a.value) || ""
+  var p;
+  const [c, m] = h(
+    u || ((p = i[0]) == null ? void 0 : p.value) || ""
   );
-  return u(() => {
-    s && c(s);
-  }, [s]), /* @__PURE__ */ o(f, { children: [
-    /* @__PURE__ */ r(h, { asChild: !0, children: /* @__PURE__ */ o("button", { className: "group flex cursor-pointer items-center gap-sm focus-visible:focus-default", children: [
-      /* @__PURE__ */ r(
-        g,
-        {
-          component: "span",
-          size: "sm",
-          weight: "medium",
-          variant: "body",
-          fixY: !0,
-          children: (() => {
-            const e = i.find(({ value: t }) => t === m);
-            return e ? /* @__PURE__ */ o("span", { className: "flex items-center gap-sm [&>svg]:size-icon-small", children: [
-              (e == null ? void 0 : e.icon) && e.icon,
-              e.name
-            ] }) : null;
-          })()
-        }
-      ),
-      /* @__PURE__ */ r(
-        D,
-        {
-          className: M(
-            "size-[12px] transition-transform duration-300 group-data-[state=open]:rotate-180"
+  v(() => {
+    n && m(n);
+  }, [n]);
+  const e = i.find(({ value: o }) => o === c);
+  return /* @__PURE__ */ r(w, { children: [
+    /* @__PURE__ */ t(x, { asChild: !0, children: f ? /* @__PURE__ */ t(
+      z,
+      {
+        variant: "tertiary",
+        size: "sm",
+        disabled: a,
+        ...g,
+        icon: e == null ? void 0 : e.icon
+      }
+    ) : /* @__PURE__ */ r(
+      "button",
+      {
+        disabled: a,
+        className: "group flex cursor-pointer items-center gap-sm hover:text-comp-language-switcher-hover focus-visible:text-comp-language-switcher-focused focus-visible:focus-default disabled:pointer-events-none disabled:text-comp-language-switcher-disabled",
+        children: [
+          /* @__PURE__ */ t(
+            M,
+            {
+              component: "span",
+              size: "sm",
+              weight: "medium",
+              variant: "body",
+              fixY: !0,
+              children: e ? /* @__PURE__ */ r("span", { className: "flex items-center gap-sm [&>svg]:size-icon-small group-disabled:[&>svg]:opacity-50", children: [
+                e.icon && e.icon,
+                e.name
+              ] }) : null
+            }
+          ),
+          /* @__PURE__ */ t(
+            N,
+            {
+              className: A(
+                "size-[12px] transition-transform duration-300 group-hover:text-comp-language-switcher-hover group-data-[state=open]:rotate-180"
+              )
+            }
           )
-        }
-      )
-    ] }) }),
-    /* @__PURE__ */ r(w, { className: "w-50", side: "bottom", align: "end", children: /* @__PURE__ */ r(
-      v,
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ t(b, { className: "w-50", side: "bottom", align: "end", children: /* @__PURE__ */ t(
+      D,
       {
-        value: m,
-        onValueChange: (e) => {
-          c(e), n == null || n(e);
+        value: c,
+        onValueChange: (o) => {
+          m(o), s == null || s(o);
         },
-        children: i.map(({ name: e, value: t, icon: p }) => /* @__PURE__ */ r(x, { value: t, children: /* @__PURE__ */ o("span", { className: "flex items-center gap-sm [&>svg]:size-icon-small", children: [
-          p && p,
-          e
-        ] }) }, t))
+        children: i.map(({ name: o, value: l, icon: d }) => /* @__PURE__ */ t(y, { value: l, children: /* @__PURE__ */ r("span", { className: "flex items-center gap-sm [&>svg]:size-icon-small", children: [
+          d && d,
+          o
+        ] }) }, l))
       }
     ) })
   ] });
 };
 export {
-  j as LanguageSwitcher
+  G as LanguageSwitcher
 };

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

@@ -4,5 +4,7 @@ declare const meta: Meta<typeof LanguageSwitcher>;
 export default meta;
 type Story = StoryObj<typeof LanguageSwitcher>;
 export declare const Default: Story;
+export declare const IconButton: Story;
+export declare const Disabled: Story;
 export declare const Controlled: Story;
 //# sourceMappingURL=LanguageSwitcher.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"LanguageSwitcher.stories.d.ts","sourceRoot":"","sources":["../../../src/components/LanguageSwitcher/LanguageSwitcher.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAG3D,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAErD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,gBAAgB,CAqCvC,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,gBAAgB,CAAC,CAAA;AAE9C,eAAO,MAAM,OAAO,EAAE,KAgBrB,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KA8BxB,CAAA"}
+{"version":3,"file":"LanguageSwitcher.stories.d.ts","sourceRoot":"","sources":["../../../src/components/LanguageSwitcher/LanguageSwitcher.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAG3D,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAErD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,gBAAgB,CAwCvC,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,gBAAgB,CAAC,CAAA;AAE9C,eAAO,MAAM,OAAO,EAAE,KAgBrB,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAiBxB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAgBtB,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KA8BxB,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"MultiSelect.d.ts","sourceRoot":"","sources":["../../../src/components/MultiSelect/MultiSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,KAAK,SAAS,EAMf,MAAM,OAAO,CAAA;AAgBd;;;;;;;;;;GAUG;AACH,MAAM,WAAW,kBAAkB;IACjC,2FAA2F;IAC3F,KAAK,EAAE,MAAM,CAAA;IACb,qFAAqF;IACrF,KAAK,EAAE,SAAS,CAAA;IAChB,6EAA6E;IAC7E,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,+DAA+D;IAC/D,IAAI,CAAC,EAAE,SAAS,CAAA;CACjB;AAED;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC,qDAAqD;IACrD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,2FAA2F;IAC3F,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,8EAA8E;IAC9E,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,kHAAkH;IAClH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,+EAA+E;IAC/E,uBAAuB,CAAC,EAAE,OAAO,CAAA;IACjC,4FAA4F;IAC5F,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,2FAA2F;IAC3F,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,kGAAkG;IAClG,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,wGAAwG;IACxG,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,2DAA2D;IAC3D,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,MAAM,GAAG,IAAI,CAAA;IAClC;;;;;;;;;;OAUG;IACH,OAAO,EAAE,kBAAkB,EAAE,CAAA;IAC7B,wEAAwE;IACxE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,yGAAyG;IACzG,sBAAsB,CAAC,EAAE,MAAM,CAAA;IAC/B;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,EAAE,CAAA;IAChB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;IACpC,kHAAkH;IAClH,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB,uGAAuG;IACvG,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,wHAAwH;IACxH,gBAAgB,CAAC,EAAE,MAAM,CAAA;CAC1B;AAED,eAAO,MAAM,WAAW,6FAkOvB,CAAA"}
+{"version":3,"file":"MultiSelect.d.ts","sourceRoot":"","sources":["../../../src/components/MultiSelect/MultiSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,KAAK,SAAS,EAMf,MAAM,OAAO,CAAA;AAgBd;;;;;;;;;;GAUG;AACH,MAAM,WAAW,kBAAkB;IACjC,2FAA2F;IAC3F,KAAK,EAAE,MAAM,CAAA;IACb,qFAAqF;IACrF,KAAK,EAAE,SAAS,CAAA;IAChB,6EAA6E;IAC7E,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,+DAA+D;IAC/D,IAAI,CAAC,EAAE,SAAS,CAAA;CACjB;AAED;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC,qDAAqD;IACrD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,2FAA2F;IAC3F,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,8EAA8E;IAC9E,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,kHAAkH;IAClH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,+EAA+E;IAC/E,uBAAuB,CAAC,EAAE,OAAO,CAAA;IACjC,4FAA4F;IAC5F,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,2FAA2F;IAC3F,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,kGAAkG;IAClG,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,wGAAwG;IACxG,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,2DAA2D;IAC3D,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,MAAM,GAAG,IAAI,CAAA;IAClC;;;;;;;;;;OAUG;IACH,OAAO,EAAE,kBAAkB,EAAE,CAAA;IAC7B,wEAAwE;IACxE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,yGAAyG;IACzG,sBAAsB,CAAC,EAAE,MAAM,CAAA;IAC/B;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,EAAE,CAAA;IAChB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;IACpC,kHAAkH;IAClH,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB,uGAAuG;IACvG,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,wHAAwH;IACxH,gBAAgB,CAAC,EAAE,MAAM,CAAA;CAC1B;AAED,eAAO,MAAM,WAAW,6FAqOvB,CAAA"}

package/dist/components/MultiSelect/MultiSelect.js

@@ -15,12 +15,12 @@ const ne = L(
       label: x,
       hint: b,
       error: w,
-      options: i,
+      options: a,
       onChange: s,
       value: r,
-      disabled: c,
+      disabled: o,
       prefix: d,
-      maxNumberOfVisibleTags: o = 2,
+      maxNumberOfVisibleTags: c = 2,
       size: O,
       placeholder: S,
       emptyMessage: W,
@@ -29,9 +29,9 @@ const ne = L(
       labelExtra: A,
       infoTooltip: C,
       collisionPadding: F
-    } = D, y = S ?? g.select.placeholder, q = W ?? g.select.noOptions, N = U(), E = x ? `${N}-label` : void 0, P = b ? `${N}-hint` : void 0, M = k(() => new Map(i.map((e) => [e.value, e.label])), [i]), V = k(() => {
+    } = D, y = S ?? g.select.placeholder, q = W ?? g.select.noOptions, N = U(), E = x ? `${N}-label` : void 0, P = b ? `${N}-hint` : void 0, M = k(() => new Map(a.map((e) => [e.value, e.label])), [a]), V = k(() => {
       const e = r && r.map((n) => M.get(n));
-      return e != null && e.length ? e.length <= o ? /* @__PURE__ */ t(
+      return e != null && e.length ? e.length <= c ? /* @__PURE__ */ t(
         z,
         {
           gap: "xs",
@@ -39,7 +39,7 @@ const ne = L(
           align: "start",
           flex: 1,
           className: "min-w-0",
-          children: e.map((n, a) => /* @__PURE__ */ t(f, { variant: "info", className: "min-w-[50px] shrink-1", children: n }, a))
+          children: e.map((n, i) => /* @__PURE__ */ t(f, { variant: "info", className: "min-w-[50px] shrink-1", children: n }, i))
         }
       ) : /* @__PURE__ */ t(
         z,
@@ -50,17 +50,17 @@ const ne = L(
           flex: 1,
           className: "min-w-0",
           children: [
-            ...e.slice(0, o).map((n, a) => /* @__PURE__ */ t(
+            ...e.slice(0, c).map((n, i) => /* @__PURE__ */ t(
               f,
               {
                 variant: "info",
                 className: "min-w-[50px] shrink-1 overflow-hidden",
                 children: /* @__PURE__ */ t("span", { className: "truncate", children: n })
               },
-              a
+              i
             )),
             /* @__PURE__ */ p(f, { variant: "info", children: [
-              e.length - o,
+              e.length - c,
               "+"
             ] }, "more")
           ]
@@ -75,7 +75,7 @@ const ne = L(
           children: y
         }
       );
-    }, [r, y, o, M]), [R, $] = u.useState(!1), [T, _] = u.useState(0), m = u.useRef(!1), B = G(null), l = (typeof h == "function" ? null : h) ?? B;
+    }, [r, y, c, M]), [R, $] = u.useState(!1), [T, _] = u.useState(0), m = u.useRef(!1), B = G(null), l = (typeof h == "function" ? null : h) ?? B;
     return H(() => {
       const e = () => {
         l.current && _(l.current.offsetWidth);
@@ -104,14 +104,14 @@ const ne = L(
               $(e);
             },
             children: [
-              /* @__PURE__ */ t(Y, { disabled: c, asChild: !0, children: /* @__PURE__ */ t(
+              /* @__PURE__ */ t(Y, { disabled: o, asChild: !0, children: /* @__PURE__ */ t(
                 "button",
                 {
                   ref: l,
                   type: "button",
                   role: "input",
                   tabIndex: 0,
-                  disabled: c,
+                  disabled: o,
                   "aria-required": v,
                   className: J({
                     size: O,
@@ -123,7 +123,7 @@ const ne = L(
                     d && /* @__PURE__ */ t(
                       "span",
                       {
-                        className: c ? "text-comp-select-icon-disabled" : "text-comp-select-icon-brand-def",
+                        className: o ? "text-comp-select-icon-disabled" : "text-comp-select-icon-brand-def",
                         children: d
                       }
                     ),
@@ -133,7 +133,8 @@ const ne = L(
                       {
                         className: re(
                           "shrink-0 transition-transform duration-200",
-                          R ? "rotate-0" : "rotate-180"
+                          R ? "rotate-0" : "rotate-180",
+                          o ? "text-comp-select-icon-disabled" : "text-comp-select-icon-brand-def"
                         )
                       }
                     )
@@ -151,7 +152,7 @@ const ne = L(
                     m.current || e.preventDefault(), m.current = !1;
                   },
                   collisionPadding: F,
-                  children: i.length === 0 ? /* @__PURE__ */ t("div", { className: "px-lg py-md", role: "presentation", children: /* @__PURE__ */ t(
+                  children: a.length === 0 ? /* @__PURE__ */ t("div", { className: "px-lg py-md", role: "presentation", children: /* @__PURE__ */ t(
                     I,
                     {
                       component: "span",
@@ -160,7 +161,7 @@ const ne = L(
                       className: "text-comp-select-text-secondary",
                       children: q
                     }
-                  ) }) : i.map((e) => /* @__PURE__ */ t(
+                  ) }) : a.map((e) => /* @__PURE__ */ t(
                     ee,
                     {
                       checked: r == null ? void 0 : r.includes(e.value),
@@ -168,7 +169,7 @@ const ne = L(
                       icon: e.icon,
                       onCheckedChange: (n) => {
                         n ? s == null || s([...r || [], e.value]) : s == null || s(
-                          (r || []).filter((a) => a !== e.value)
+                          (r || []).filter((i) => i !== e.value)
                         ), m.current = !0;
                       },
                       children: e.label

package/dist/components/ResponsiveLayoutTable/ResponsiveLayoutTable.d.ts

@@ -0,0 +1,266 @@
+import { ResponsiveBreakpoint } from '../../hooks/use-is-breakpoint';
+import * as React from 'react';
+/**
+ * Column definition for a single layout of the ResponsiveLayoutTable.
+ *
+ * Each column either renders a raw value from the row via `dataKey` (wrapped in
+ * a Typography component) or a fully custom cell via `render`. Use `skeleton` to
+ * describe the loading placeholder shape.
+ *
+ * @typeParam T - The type of data objects in each row
+ *
+ * @example
+ * ```tsx
+ * const columns: ResponsiveLayoutTableColumn<Transaction>[] = [
+ *   { title: 'Customer', dataKey: 'customer', className: 'w-[240px]' },
+ *   {
+ *     title: 'Amount',
+ *     render: (row) => <AmountCell row={row} />,
+ *     skeleton: <Skeleton className="h-4 w-20" />,
+ *   },
+ * ]
+ * ```
+ */
+export interface ResponsiveLayoutTableColumn<T extends {
+    id: string | number;
+}> {
+    /** Header label. Accepts ReactNode for multi-line headers (e.g. tablet stacked text). */
+    title?: React.ReactNode;
+    /**
+     * Property key from the data object. Used as default cell content when `render`
+     * is omitted — the raw value is rendered inside a Typography component. Ignored
+     * when `render` is provided.
+     */
+    dataKey?: keyof T;
+    /** Additional CSS class applied to both the header and body cells. */
+    className?: string;
+    /**
+     * Truncates default cell text to the specified number of lines. Only applies
+     * when `render` is omitted. `true` or `1` clamps to one line, `2` clamps to two.
+     * @default false
+     */
+    lineClamp?: boolean | 1 | 2;
+    /**
+     * Custom render function for cell content. Receives the full row data so that
+     * compressed layouts can combine data from multiple fields in a single cell.
+     * When omitted, the raw `dataKey` value is displayed inside a Typography component.
+     *
+     * @param rowData - The data object for the current row
+     * @param rowIndex - The zero-based index of the row in `data`
+     * @param disabled - Whether the table is in the disabled state (forwarded from
+     *   `ResponsiveLayoutTableProps.disabled` so cells can mute their own styling)
+     */
+    render?: (rowData: T, rowIndex: number, disabled?: boolean) => React.ReactNode;
+    /**
+     * Skeleton placeholder rendered in this cell when the row is in a loading state
+     * (see `ResponsiveLayoutTableProps.isRowLoading`). Compose `<Skeleton />` primitives
+     * to match the shape of the real cell. Omit to fall back to a generic full-width bar.
+     */
+    skeleton?: React.ReactNode;
+}
+/**
+ * Per-layout className overrides for the header and body rows.
+ *
+ * @example
+ * ```tsx
+ * classNames: { row: 'border-dashed', header: 'bg-surface-base-tertiary' }
+ * ```
+ */
+export interface ResponsiveLayoutTableLayoutClassNames {
+    /** Additional CSS class applied to each body row. */
+    row?: string;
+    /** Additional CSS class applied to the header row. */
+    header?: string;
+}
+/**
+ * A single layout configuration for the ResponsiveLayoutTable. Each layout
+ * describes a distinct set of columns that becomes active when its `responsive`
+ * predicate matches. Layouts are evaluated in order and the first match wins;
+ * the last entry should omit `responsive` so it matches as a fallback.
+ *
+ * @typeParam T - The type of data objects in each row
+ *
+ * @example
+ * ```tsx
+ * const layouts: ResponsiveLayoutTableLayout<Transaction>[] = [
+ *   { responsive: 'lg', columns: desktopColumns },
+ *   { responsive: 'md', columns: tabletColumns },
+ *   { showHeader: false, columns: phoneColumns },
+ * ]
+ * ```
+ */
+export interface ResponsiveLayoutTableLayout<T extends {
+    id: string | number;
+}> {
+    /**
+     * Controls when this layout is active.
+     * - Named breakpoint (`'xs'..'3xl'`): active at and above that breakpoint, resolved internally via hooks.
+     * - Boolean: caller supplies the result directly (e.g. from `useMediaQuery('(min-width: 52rem)')`).
+     *   `true` activates this layout, `false` skips it. Use this for arbitrary thresholds.
+     * - Omitted: treated as fallback (always matches).
+     *
+     * @see {@link ResponsiveBreakpoint}
+     */
+    responsive?: ResponsiveBreakpoint | boolean;
+    /** Column definitions for this layout. */
+    columns: ResponsiveLayoutTableColumn<T>[];
+    /**
+     * Whether to show the header row.
+     * @default true
+     */
+    showHeader?: boolean;
+    /** Per-layout className overrides for the header and body rows. */
+    classNames?: ResponsiveLayoutTableLayoutClassNames;
+}
+/**
+ * Top-level className overrides for the ResponsiveLayoutTable.
+ *
+ * @example
+ * ```tsx
+ * classNames={{
+ *   root: 'rounded-xl',
+ *   rowBackgroundInset:
+ *     'before:-left-comp-webcheckout-table-cells-p-hor before:-right-comp-webcheckout-table-cells-p-hor',
+ * }}
+ * ```
+ */
+export interface ResponsiveLayoutTableClassNames {
+    /** Outer wrapper `<div>`. */
+    root?: string;
+    /**
+     * Classes applied to each row's `::before` pseudo-element when
+     * `overflowingRowBackground` is `true`. Default is zero bleed
+     * (the background sits flush inside the row). Consumer passes any
+     * Tailwind classes with the `before:` prefix and can use `first:` /
+     * `last:` variants to extend the tint past the first / last row so it
+     * reaches the surrounding card's top / bottom padding.
+     *
+     * @example
+     * ```tsx
+     * classNames={{
+     *   rowBackgroundInset:
+     *     'before:-left-comp-webcheckout-table-cells-p-hor ' +
+     *     'before:-right-comp-webcheckout-table-cells-p-hor ' +
+     *     'first:before:-top-sm last:before:-bottom-sm',
+     * }}
+     * ```
+     */
+    rowBackgroundInset?: string;
+}
+/**
+ * Props for the ResponsiveLayoutTable component.
+ * @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 / selection / animation state when
+ *   rows reorder, filter, or paginate.
+ */
+export interface ResponsiveLayoutTableProps<T extends {
+    id: string | number;
+}> extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'className'> {
+    /** Array of data objects where each item represents one table row. */
+    data: T[];
+    /**
+     * Array of layout configurations ordered from largest to smallest breakpoint.
+     * The first layout whose `responsive` matches wins. The last layout should
+     * omit `responsive` (fallback for smallest viewports).
+     *
+     * Uses the same pattern as ExpandableTable's column `responsive` prop:
+     * - Named breakpoint (`'xs'..'3xl'`): resolved internally via hooks.
+     * - Boolean: consumer controls it with their own `useMediaQuery()`.
+     *
+     * @example
+     * ```tsx
+     * layouts={[
+     *   { responsive: 'lg', columns: desktopColumns },
+     *   { responsive: 'md', columns: tabletColumns },
+     *   { showHeader: false, columns: phoneColumns },
+     * ]}
+     * ```
+     */
+    layouts: ResponsiveLayoutTableLayout<T>[];
+    /**
+     * Fires when a row is clicked. When provided and not `disabled`, rows become
+     * interactive: pointer cursor, keyboard-activatable, and a hover border.
+     */
+    onRowClick?: (rowData: T, rowIndex: number) => void;
+    /** Prevents interaction and applies muted text colors. @default false */
+    disabled?: boolean;
+    /**
+     * Predicate that marks a row as "new", applying the
+     * `bg-comp-responsive-layout-table-bg-success` tint. On interactive rows,
+     * hover and focus-visible backgrounds visually override the new-state tint.
+     */
+    isRowNew?: (rowData: T, rowIndex: number) => boolean;
+    /**
+     * Predicate that marks a row as loading. Each cell renders its column
+     * `skeleton` (or a default bar) instead of the normal content, and the row
+     * becomes non-interactive regardless of `onRowClick`. The `isRowNew` tint is
+     * also suppressed for loading rows.
+     *
+     * Use for initial load (an array of empty objects with the predicate always
+     * returning true) and for pagination (append placeholder rows after real
+     * data and detect them in the predicate).
+     */
+    isRowLoading?: (rowData: T, rowIndex: number) => boolean;
+    /**
+     * When `true`, row backgrounds (new/hover/focus) render via a `::before`
+     * pseudo-element sized to the row (zero bleed by default). The outer
+     * wrapper switches to `overflow: visible` in this mode — horizontal
+     * scrolling is disabled, so only use when your active layout fits the
+     * viewport (typically the phone layout).
+     *
+     * Pair with `classNames.rowBackgroundInset` to extend the tint past any
+     * edge — typically to bleed through the surrounding card's horizontal
+     * padding, and (via `first:` / `last:`) its top and bottom padding.
+     * @default false
+     */
+    overflowingRowBackground?: boolean;
+    /** className overrides for sub-elements. */
+    classNames?: ResponsiveLayoutTableClassNames;
+    /**
+     * Controls how column widths are calculated, mirroring the CSS
+     * `table-layout` property.
+     *
+     * - `'auto'` (default): Columns size based on their content. This is more
+     *   flexible. In case of overflow the content is scrollable.
+     * - `'fixed'`: Columns use fixed widths (from column definitions or equal
+     *   distribution). This is more predictable and performs better for large
+     *   datasets, but content may truncate.
+     *
+     * @default 'auto'
+     */
+    tableLayout?: 'auto' | 'fixed';
+}
+/**
+ * A responsive table that switches between completely different column layouts
+ * at configurable breakpoints. Each layout defines its own set of columns with
+ * independent headers and render functions, enabling compressed tablet views
+ * (stacked cells) and phone card layouts (single full-width column) — not just
+ * hidden columns.
+ *
+ * Supports named Tailwind breakpoints and arbitrary boolean values for custom
+ * thresholds. Rows become interactive when `onRowClick` is provided (pointer
+ * cursor, keyboard-activatable, hover border). Loading rows are driven by the
+ * `isRowLoading` predicate and render per-column `skeleton` placeholders.
+ *
+ * @typeParam T - The type of data objects in each row. Must include an
+ *   `id: string | number` field so rows receive a stable React key.
+ *
+ * @example
+ * ```tsx
+ * <ResponsiveLayoutTable
+ *   data={transactions}
+ *   layouts={[
+ *     { responsive: 'lg', columns: desktopColumns },
+ *     { responsive: 'md', columns: tabletColumns },
+ *     { showHeader: false, columns: phoneColumns },
+ *   ]}
+ *   onRowClick={(row) => navigate(`/transactions/${row.id}`)}
+ * />
+ * ```
+ */
+declare const ResponsiveLayoutTable: <T extends {
+    id: string | number;
+}>({ data, layouts, onRowClick, disabled, isRowNew, isRowLoading, overflowingRowBackground, classNames, tableLayout, ...props }: ResponsiveLayoutTableProps<T>) => import("react/jsx-runtime").JSX.Element;
+export { ResponsiveLayoutTable };
+//# sourceMappingURL=ResponsiveLayoutTable.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ResponsiveLayoutTable.d.ts","sourceRoot":"","sources":["../../../src/components/ResponsiveLayoutTable/ResponsiveLayoutTable.tsx"],"names":[],"mappings":"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"}

package/dist/components/ResponsiveLayoutTable/ResponsiveLayoutTable.examples.d.ts

@@ -0,0 +1,39 @@
+import { ResponsiveLayoutTableColumn, ResponsiveLayoutTableLayout } from './ResponsiveLayoutTable';
+export interface Transaction {
+    id: string;
+    date: string;
+    time: string;
+    customer: string;
+    transactionCode: string;
+    status: 'warning' | 'success' | 'info' | 'error';
+    statusLabel: string;
+    amount: number;
+    originalAmount?: number;
+    isNew?: boolean;
+}
+export declare const formatKc: (value: number) => string;
+export declare const transactions: Transaction[];
+interface CellProps {
+    row: Transaction;
+    disabled?: boolean;
+}
+export declare const DateTimeCell: ({ row, disabled }: CellProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DateTimeCellSkeleton: () => import("react/jsx-runtime").JSX.Element;
+export declare const CustomerCell: ({ row, disabled }: CellProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CustomerCellSkeleton: () => import("react/jsx-runtime").JSX.Element;
+export declare const TransactionCodeCell: ({ row, disabled }: CellProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TransactionCodeCellSkeleton: () => import("react/jsx-runtime").JSX.Element;
+export declare const StatusCell: ({ row, disabled }: CellProps) => import("react/jsx-runtime").JSX.Element;
+export declare const StatusCellSkeleton: () => import("react/jsx-runtime").JSX.Element;
+export declare const AmountCell: ({ row, disabled, hideOriginalAmount, }: CellProps & {
+    hideOriginalAmount?: boolean;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const AmountCellSkeleton: () => import("react/jsx-runtime").JSX.Element;
+export declare const ActionArrowCell: ({ row, disabled }: CellProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ActionArrowCellSkeleton: () => import("react/jsx-runtime").JSX.Element;
+export declare const desktopColumns: ResponsiveLayoutTableColumn<Transaction>[];
+export declare const tabletColumns: ResponsiveLayoutTableColumn<Transaction>[];
+export declare const phoneColumns: ResponsiveLayoutTableColumn<Transaction>[];
+export declare const layouts: ResponsiveLayoutTableLayout<Transaction>[];
+export {};
+//# sourceMappingURL=ResponsiveLayoutTable.examples.d.ts.map

package/dist/components/ResponsiveLayoutTable/ResponsiveLayoutTable.examples.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResponsiveLayoutTable.examples.d.ts","sourceRoot":"","sources":["../../../src/components/ResponsiveLayoutTable/ResponsiveLayoutTable.examples.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EACV,2BAA2B,EAC3B,2BAA2B,EAC5B,MAAM,yBAAyB,CAAA;AAIhC,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,MAAM,CAAA;IAChB,eAAe,EAAE,MAAM,CAAA;IACvB,MAAM,EAAE,SAAS,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,CAAA;IAChD,WAAW,EAAE,MAAM,CAAA;IACnB,MAAM,EAAE,MAAM,CAAA;IACd,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB;AAID,eAAO,MAAM,QAAQ,GAAI,OAAO,MAAM,WAC+B,CAAA;AAIrE,eAAO,MAAM,YAAY,EAAE,WAAW,EAkCrC,CAAA;AAID,UAAU,SAAS;IACjB,GAAG,EAAE,WAAW,CAAA;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,eAAO,MAAM,YAAY,GAAI,mBAAmB,SAAS,4CAyBxD,CAAA;AAED,eAAO,MAAM,oBAAoB,+CAKhC,CAAA;AAED,eAAO,MAAM,YAAY,GAAI,mBAAmB,SAAS,4CAaxD,CAAA;AAED,eAAO,MAAM,oBAAoB,+CAEhC,CAAA;AAED,eAAO,MAAM,mBAAmB,GAAI,mBAAmB,SAAS,4CAwC/D,CAAA;AAED,eAAO,MAAM,2BAA2B,+CAKvC,CAAA;AAED,eAAO,MAAM,UAAU,GAAI,mBAAmB,SAAS,4CAItD,CAAA;AAED,eAAO,MAAM,kBAAkB,+CAE9B,CAAA;AAED,eAAO,MAAM,UAAU,GAAI,wCAIxB,SAAS,GAAG;IAAE,kBAAkB,CAAC,EAAE,OAAO,CAAA;CAAE,4CAgC9C,CAAA;AAED,eAAO,MAAM,kBAAkB,+CAE9B,CAAA;AAED,eAAO,MAAM,eAAe,GAAI,mBAAmB,SAAS,4CAmC3D,CAAA;AAED,eAAO,MAAM,uBAAuB,+CAKnC,CAAA;AAID,eAAO,MAAM,cAAc,EAAE,2BAA2B,CAAC,WAAW,CAAC,EAsDpE,CAAA;AAID,eAAO,MAAM,aAAa,EAAE,2BAA2B,CAAC,WAAW,CAAC,EAqEnE,CAAA;AAID,eAAO,MAAM,YAAY,EAAE,2BAA2B,CAAC,WAAW,CAAC,EA2BlE,CAAA;AAID,eAAO,MAAM,OAAO,EAAE,2BAA2B,CAAC,WAAW,CAAC,EAI7D,CAAA"}