@vkzstudio/muza-ui 1.0.44 → 1.0.46

package/dist/components/DropdownMenu/DropdownMenu.js

@@ -1,60 +1,61 @@
-import { jsx as e, jsxs as p } from "react/jsx-runtime";
-import * as l from "react";
-import * as d from "@radix-ui/react-dropdown-menu";
-import { cva as k } from "class-variance-authority";
-import { Button as y } from "../Button/Button.js";
-import { cn as i } from "../../utils/cn.js";
-import { Typography as b } from "../Typography/Typography.js";
+import { jsx as e, jsxs as b, Fragment as y } from "react/jsx-runtime";
+import * as m from "react";
+import * as a from "@radix-ui/react-dropdown-menu";
+import { cva as N } from "class-variance-authority";
+import { Button as I } from "../Button/Button.js";
+import { cn as s } from "../../utils/cn.js";
 import { UnreadOutline as x } from "@solar-icons/react-perf";
-const h = l.createContext(null), N = () => l.useContext(h), T = ({ ...o }) => /* @__PURE__ */ e(d.Root, { "data-slot": "dropdown-menu", ...o }), P = ({ ...o }) => /* @__PURE__ */ e(d.Portal, { "data-slot": "dropdown-menu-portal", ...o }), G = ({ ...o }) => /* @__PURE__ */ e(
-  d.Trigger,
+import { Flex as D } from "../Flex/Flex.js";
+import { Typography as f } from "../Typography/Typography.js";
+const g = m.createContext(null), M = () => m.useContext(g), B = ({ ...o }) => /* @__PURE__ */ e(a.Root, { "data-slot": "dropdown-menu", ...o }), F = ({ ...o }) => /* @__PURE__ */ e(a.Portal, { "data-slot": "dropdown-menu-portal", ...o }), H = ({ ...o }) => /* @__PURE__ */ e(
+  a.Trigger,
   {
     "data-slot": "dropdown-menu-trigger",
     ...o
   }
-), j = ({
+), O = ({
   className: o,
   sideOffset: t = 4,
-  align: r = "start",
-  ...n
+  align: n = "start",
+  ...r
 }) => {
-  const [s, c] = l.useState(!1), a = l.useRef(null);
-  return l.useEffect(() => {
-    const m = () => {
-      if (a.current) {
-        const { scrollHeight: g, clientHeight: v } = a.current;
-        c(g > v);
+  const [c, i] = m.useState(!1), d = m.useRef(null);
+  return m.useEffect(() => {
+    const l = () => {
+      if (d.current) {
+        const { scrollHeight: v, clientHeight: k } = d.current;
+        i(v > k);
       }
-    }, u = setTimeout(m, 10), w = new ResizeObserver(m);
-    return a.current && w.observe(a.current), () => {
-      clearTimeout(u), w.disconnect();
+    }, u = setTimeout(l, 10), p = new ResizeObserver(l);
+    return d.current && p.observe(d.current), () => {
+      clearTimeout(u), p.disconnect();
     };
-  }, [n.children]), /* @__PURE__ */ e(d.Portal, { children: /* @__PURE__ */ e(
-    d.Content,
+  }, [r.children]), /* @__PURE__ */ e(a.Portal, { children: /* @__PURE__ */ e(
+    a.Content,
     {
       "data-slot": "dropdown-menu-content",
       sideOffset: t,
-      align: r,
-      className: i(
+      align: n,
+      className: s(
         "z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
         "flex flex-col rounded-xl bg-comp-select-fill-def dropdown-shadow-default",
         o
       ),
-      ...n,
+      ...r,
       children: /* @__PURE__ */ e(
         "div",
         {
-          ref: a,
-          className: i(
+          ref: d,
+          className: s(
             "scrollbar-thin scrollbar-track-transparent scrollbar-thumb-stroke-base-secondary hover:scrollbar-thumb-stroke-base-primary scrollbar-thumb-rounded-full my-sm max-h-full overflow-y-auto px-sm py-0 [&::-webkit-scrollbar]:w-1 [&::-webkit-scrollbar]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:border-2 [&::-webkit-scrollbar-thumb]:border-transparent [&::-webkit-scrollbar-thumb]:bg-stroke-base-secondary hover:[&::-webkit-scrollbar-thumb]:bg-stroke-base-primary [&::-webkit-scrollbar-track]:bg-transparent",
-            s && "w-[calc(100%_-_var(--spacing-sm))]"
+            c && "w-[calc(100%_-_var(--spacing-sm))]"
           ),
-          children: n.children
+          children: r.children
         }
       )
     }
   ) });
-}, f = k(
+}, w = N(
   [
     "text-comp-dropdown-menu-text-primary flex cursor-pointer items-center gap-sm rounded-md pt-md pr-lg pb-md pl-lg outline-0 transition-colors",
     "hover:bg-comp-dropdown-menu-fill-base-hover hover:text-comp-dropdown-menu-text-base-hover",
@@ -79,205 +80,206 @@ const h = l.createContext(null), N = () => l.useContext(h), T = ({ ...o }) => /*
       variant: "base"
     }
   }
-), B = ({
+), h = ({
+  children: o,
+  description: t
+}) => typeof o == "function" ? /* @__PURE__ */ e(y, { children: o }) : t ? /* @__PURE__ */ b(D, { flex: 1, direction: "column", className: "min-w-0", children: [
+  /* @__PURE__ */ e(
+    f,
+    {
+      component: "span",
+      size: "sm",
+      variant: "body",
+      weight: "medium",
+      fixY: !0,
+      children: o
+    }
+  ),
+  /* @__PURE__ */ e(f, { component: "span", size: "sm", variant: "body", weight: "regular", children: t })
+] }) : /* @__PURE__ */ e(
+  f,
+  {
+    component: "span",
+    size: "sm",
+    weight: "medium",
+    className: "flex-1",
+    fixY: !0,
+    children: o
+  }
+), Y = ({
   className: o,
   variant: t,
-  children: r,
-  icon: n,
-  disabled: s,
-  isActive: c,
-  ...a
-}) => /* @__PURE__ */ p(
-  d.Item,
+  children: n,
+  icon: r,
+  disabled: c,
+  isActive: i,
+  description: d,
+  ...l
+}) => /* @__PURE__ */ b(
+  a.Item,
   {
     "data-slot": "dropdown-menu-item",
-    disabled: s,
-    className: i(
+    disabled: c,
+    className: s(
       "group",
-      f({
+      w({
         variant: t,
-        disabled: s,
-        checked: c
+        disabled: c,
+        checked: i
       }),
       o
     ),
-    ...a,
+    ...l,
     children: [
-      n && /* @__PURE__ */ e(
+      r && /* @__PURE__ */ e(
         "span",
         {
-          className: i("block [&>svg]:block [&>svg]:size-icon-small", {
+          className: s("block [&>svg]:block [&>svg]:size-icon-small", {
             "text-comp-dropdown-menu-text-error": t === "destructive",
             "group-focus-visible:-icon-brand-focused text-icon-dark-secondary-def group-hover:text-icon-brand-def": t !== "destructive",
-            "text-comp-dropdown-menu-icon-base-active": c
+            "text-comp-dropdown-menu-icon-base-active": i
           }),
-          children: n
-        }
-      ),
-      typeof r != "function" ? /* @__PURE__ */ e(
-        b,
-        {
-          component: "span",
-          size: "sm",
-          weight: "medium",
-          className: "flex-1",
-          fixY: !0,
           children: r
         }
-      ) : r
+      ),
+      /* @__PURE__ */ e(h, { description: d, children: n })
     ]
   }
-), H = ({
+), _ = ({
   children: o,
   buttonProps: t,
-  className: r,
-  ...n
+  className: n,
+  ...r
 }) => /* @__PURE__ */ e("div", { className: "my-md px-lg", children: /* @__PURE__ */ e(
-  d.Item,
+  a.Item,
   {
     "data-slot": "dropdown-menu-item",
     asChild: !0,
-    ...n,
+    ...r,
     children: /* @__PURE__ */ e(
-      y,
+      I,
       {
         fullWidth: !0,
         ...t,
-        className: i(
+        className: s(
           "outline-0 hover:ring-transparent",
-          r,
+          n,
           t.className
         ),
         children: o
       }
     )
   }
-) }), O = ({
+) }), E = ({
   className: o,
   children: t,
-  checked: r,
-  variant: n,
-  icon: s,
-  ...c
-}) => /* @__PURE__ */ p(
-  d.CheckboxItem,
+  checked: n,
+  variant: r,
+  icon: c,
+  description: i,
+  ...d
+}) => /* @__PURE__ */ b(
+  a.CheckboxItem,
   {
     "data-slot": "dropdown-menu-checkbox-item",
-    className: i(
-      f({
-        variant: n,
-        checked: !!r
+    className: s(
+      w({
+        variant: r,
+        checked: !!n
       }),
       o
     ),
-    checked: r,
-    onSelect: (a) => {
-      a.preventDefault();
+    checked: n,
+    onSelect: (l) => {
+      l.preventDefault();
     },
-    ...c,
+    ...d,
     children: [
-      s && /* @__PURE__ */ e(
+      c && /* @__PURE__ */ e(
         "span",
         {
-          className: i({
-            "text-comp-dropdown-menu-text-error": n === "destructive",
-            "group-focus-visible:-icon-brand-focused text-icon-dark-secondary-def group-hover:text-icon-brand-def": n !== "destructive"
+          className: s({
+            "text-comp-dropdown-menu-text-error": r === "destructive",
+            "group-focus-visible:-icon-brand-focused text-icon-dark-secondary-def group-hover:text-icon-brand-def": r !== "destructive"
           }),
-          children: s
+          children: c
         }
       ),
-      typeof t != "function" ? /* @__PURE__ */ e(
-        b,
-        {
-          component: "span",
-          size: "sm",
-          weight: "medium",
-          className: "flex-1 fix-y-text",
-          children: t
-        }
-      ) : t,
-      /* @__PURE__ */ e("span", { className: "text-comp-dropdown-menu-icon-brand-def", children: /* @__PURE__ */ e(d.ItemIndicator, { children: /* @__PURE__ */ e(x, { className: "size-icon-small" }) }) })
+      /* @__PURE__ */ e(h, { description: i, children: t }),
+      /* @__PURE__ */ e("span", { className: "text-comp-dropdown-menu-icon-brand-def", children: /* @__PURE__ */ e(a.ItemIndicator, { children: /* @__PURE__ */ e(x, { className: "size-icon-small" }) }) })
     ]
   }
-), Y = ({
+), L = ({
   value: o,
   onValueChange: t,
-  ...r
-}) => /* @__PURE__ */ e(h.Provider, { value: { value: o, onValueChange: t }, children: /* @__PURE__ */ e(
-  d.RadioGroup,
+  ...n
+}) => /* @__PURE__ */ e(g.Provider, { value: { value: o, onValueChange: t }, children: /* @__PURE__ */ e(
+  a.RadioGroup,
   {
     "data-slot": "dropdown-menu-radio-group",
     value: o,
     onValueChange: t,
-    ...r
+    ...n
   }
-) }), I = l.forwardRef(({ className: o, children: t, variant: r, icon: n, value: s, ...c }, a) => {
-  const m = N(), u = (m == null ? void 0 : m.value) === s;
-  return /* @__PURE__ */ p(
-    d.RadioItem,
-    {
-      ref: a,
-      "data-slot": "dropdown-menu-radio-item",
-      className: i(
-        f({
-          variant: r,
-          checked: u
-        }),
-        o,
-        c.disabled && "cursor-not-allowed text-comp-dropdown-menu-text-base-disabled hover:bg-transparent hover:text-comp-dropdown-menu-text-base-disabled"
-      ),
-      value: s,
-      ...c,
-      children: [
-        n && /* @__PURE__ */ e(
-          "span",
-          {
-            className: i({
-              "text-comp-dropdown-menu-text-error": r === "destructive",
-              "group-focus-visible:-icon-brand-focused text-icon-dark-secondary-def group-hover:text-icon-brand-def": r !== "destructive",
-              "text-comp-dropdown-menu-text-base-disabled": c.disabled
-            }),
-            children: n
-          }
+) }), R = m.forwardRef(
+  ({ className: o, children: t, variant: n, icon: r, description: c, value: i, ...d }, l) => {
+    const u = M(), p = (u == null ? void 0 : u.value) === i;
+    return /* @__PURE__ */ b(
+      a.RadioItem,
+      {
+        ref: l,
+        "data-slot": "dropdown-menu-radio-item",
+        className: s(
+          w({
+            variant: n,
+            checked: p
+          }),
+          o,
+          d.disabled && "cursor-not-allowed text-comp-dropdown-menu-text-base-disabled hover:bg-transparent hover:text-comp-dropdown-menu-text-base-disabled"
         ),
-        typeof t != "function" ? /* @__PURE__ */ e(
-          b,
-          {
-            component: "span",
-            size: "sm",
-            weight: "medium",
-            className: "flex-1",
-            fixY: !0,
-            children: t
-          }
-        ) : t,
-        /* @__PURE__ */ e("span", { className: "text-comp-dropdown-menu-icon-brand-def", children: /* @__PURE__ */ e(d.ItemIndicator, { children: /* @__PURE__ */ e(x, { className: "size-icon-small" }) }) })
-      ]
-    }
-  );
-});
-I.displayName = "DropdownMenuRadioItem";
-const _ = ({
+        value: i,
+        ...d,
+        children: [
+          r && /* @__PURE__ */ e(
+            "span",
+            {
+              className: s({
+                "text-comp-dropdown-menu-text-error": n === "destructive",
+                "group-focus-visible:-icon-brand-focused text-icon-dark-secondary-def group-hover:text-icon-brand-def": n !== "destructive",
+                "text-comp-dropdown-menu-text-base-disabled": d.disabled
+              }),
+              children: r
+            }
+          ),
+          /* @__PURE__ */ e(h, { description: c, children: t }),
+          /* @__PURE__ */ e("span", { className: "text-comp-dropdown-menu-icon-brand-def", children: /* @__PURE__ */ e(a.ItemIndicator, { children: /* @__PURE__ */ e(x, { className: "size-icon-small" }) }) })
+        ]
+      }
+    );
+  }
+);
+R.displayName = "DropdownMenuRadioItem";
+const U = ({
   className: o,
   ...t
 }) => /* @__PURE__ */ e(
-  d.Separator,
+  a.Separator,
   {
     "data-slot": "dropdown-menu-separator",
-    className: i("my-sm h-0 border-b border-stroke-base-primary", o),
+    className: s("my-sm h-0 border-b border-stroke-base-primary", o),
     ...t
   }
 );
 export {
-  T as DropdownMenu,
-  H as DropdownMenuButtonItem,
-  O as DropdownMenuCheckboxItem,
-  j as DropdownMenuContent,
-  B as DropdownMenuItem,
-  P as DropdownMenuPortal,
-  Y as DropdownMenuRadioGroup,
-  I as DropdownMenuRadioItem,
-  _ as DropdownMenuSeparator,
-  G as DropdownMenuTrigger,
-  f as dropdownMenuItemVariants
+  B as DropdownMenu,
+  _ as DropdownMenuButtonItem,
+  E as DropdownMenuCheckboxItem,
+  O as DropdownMenuContent,
+  Y as DropdownMenuItem,
+  F as DropdownMenuPortal,
+  L as DropdownMenuRadioGroup,
+  R as DropdownMenuRadioItem,
+  U as DropdownMenuSeparator,
+  H as DropdownMenuTrigger,
+  w as dropdownMenuItemVariants
 };

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

@@ -5,8 +5,8 @@ declare const meta: {
     subcomponents: {
         DropdownMenuTrigger: ({ ...props }: import('./DropdownMenu').DropdownMenuTriggerProps) => import("react/jsx-runtime").JSX.Element;
         DropdownMenuContent: ({ className, sideOffset, align, ...props }: import('./DropdownMenu').DropdownMenuContentProps) => import("react/jsx-runtime").JSX.Element;
-        DropdownMenuItem: ({ className, variant, children, icon, disabled, isActive, ...props }: import('./DropdownMenu').DropdownMenuItemProps) => import("react/jsx-runtime").JSX.Element;
-        DropdownMenuCheckboxItem: ({ className, children, checked, variant, icon, ...props }: import('./DropdownMenu').DropdownMenuCheckboxItemProps) => import("react/jsx-runtime").JSX.Element;
+        DropdownMenuItem: ({ className, variant, children, icon, disabled, isActive, description, ...props }: import('./DropdownMenu').DropdownMenuItemProps) => import("react/jsx-runtime").JSX.Element;
+        DropdownMenuCheckboxItem: ({ className, children, checked, variant, icon, description, ...props }: import('./DropdownMenu').DropdownMenuCheckboxItemProps) => import("react/jsx-runtime").JSX.Element;
         DropdownMenuRadioGroup: ({ value, onValueChange, ...props }: import('./DropdownMenu').DropdownMenuRadioGroupProps) => import("react/jsx-runtime").JSX.Element;
         DropdownMenuRadioItem: import('react').ForwardRefExoticComponent<Omit<import('./DropdownMenu').DropdownMenuRadioItemProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
         DropdownMenuSeparator: ({ className, ...props }: import('./DropdownMenu').DropdownMenuSeparatorProps) => import("react/jsx-runtime").JSX.Element;
@@ -29,34 +29,19 @@ declare const meta: {
     argTypes: {
         open: {
             control: "boolean";
-            table: {
-                category: string;
-            };
         };
         defaultOpen: {
             control: "boolean";
-            table: {
-                category: string;
-            };
         };
         onOpenChange: {
             control: false;
-            table: {
-                category: string;
-            };
         };
         modal: {
             control: "boolean";
-            table: {
-                category: string;
-            };
         };
         dir: {
             control: "select";
             options: string[];
-            table: {
-                category: string;
-            };
         };
     };
 };
@@ -71,5 +56,6 @@ export declare const WithButton: Story;
 export declare const ItemVariants: Story;
 export declare const WithCheckboxItems: Story;
 export declare const WithCheckboxItemsWithCustomContent: Story;
+export declare const WithDescriptions: Story;
 export declare const WithRadioGroup: Story;
 //# sourceMappingURL=DropdownMenu.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenu.stories.d.ts","sourceRoot":"","sources":["../../../src/components/DropdownMenu/DropdownMenu.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AA4B3D,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0E2B,CAAA;AAErC,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,OAAO,EAAE,KAyBrB,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KA+BvB,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAuB3B,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KAuB9B,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAwB5B,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAgCxB,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAiC1B,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KA2C/B,CAAA;AAED,eAAO,MAAM,kCAAkC,EAAE,KA+EhD,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KA4B5B,CAAA"}
+{"version":3,"file":"DropdownMenu.stories.d.ts","sourceRoot":"","sources":["../../../src/components/DropdownMenu/DropdownMenu.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AA4B3D,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2D2B,CAAA;AAErC,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,OAAO,EAAE,KAyBrB,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KA+BvB,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAuB3B,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KAuB9B,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAwB5B,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAgCxB,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAiC1B,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KA2C/B,CAAA;AAED,eAAO,MAAM,kCAAkC,EAAE,KA+EhD,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KA2D9B,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KA4B5B,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"EdgeButton.stories.d.ts","sourceRoot":"","sources":["../../../src/components/EdgeButton/EdgeButton.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAI3D,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAIzC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,UAAU,CAkGjC,CAAA;AAED,eAAe,IAAI,CAAA;AAEnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,UAAU,CAAC,CAAA;AAExC,eAAO,MAAM,OAAO,EAAE,KAYrB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KActB,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KAqD/B,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAmD3B,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAexB,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAe3B,CAAA;AAaD,eAAO,MAAM,gBAAgB,EAAE,KA+H9B,CAAA"}
+{"version":3,"file":"EdgeButton.stories.d.ts","sourceRoot":"","sources":["../../../src/components/EdgeButton/EdgeButton.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAI3D,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAIzC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,UAAU,CAkGjC,CAAA;AAED,eAAe,IAAI,CAAA;AAEnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,UAAU,CAAC,CAAA;AAExC,eAAO,MAAM,OAAO,EAAE,KAYrB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KActB,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KAqD/B,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAmD3B,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAexB,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAe3B,CAAA;AAcD,eAAO,MAAM,gBAAgB,EAAE,KA+H9B,CAAA"}

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

@@ -1,9 +1,6 @@
 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.
  *
@@ -20,7 +17,9 @@ export type ResponsiveBreakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3
  *   },
  * ]
  */
-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. */
@@ -66,7 +65,9 @@ export interface IColumn<T> {
  *   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. */
@@ -97,7 +98,9 @@ export interface IExpandableTableRowCell<T> {
  *   ],
  * }
  */
-export interface IExpandableTableRowSection<T> {
+export interface IExpandableTableRowSection<T extends {
+    id: string | number;
+}> {
     /** Optional heading rendered above the section cells. */
     title?: ReactNode;
     /**
@@ -110,9 +113,23 @@ export interface IExpandableTableRowSection<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[];
     /**
@@ -170,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;;;;;;;;;;;;;;;GAeG;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;;;;;;;;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;IACxC,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;IAC3C,yDAAyD;IACzD,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB;;;;OAIG;IACH,KAAK,EAAE,uBAAuB,CAAC,CAAC,CAAC,EAAE,CAAA;CACpC;AAED;;;;GAIG;AACH,MAAM,WAAW,oBAAoB,CAAC,CAAC;IACrC,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,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"}