@vkzstudio/muza-ui 1.0.36 → 1.0.38

package/dist/components/ReorderableTable/ReorderableTable.js

@@ -1,61 +1,62 @@
-import { jsx as e, jsxs as m } from "react/jsx-runtime";
-import { forwardRef as E } from "react";
-import { motion as n } from "../../node_modules/framer-motion/dist/es/render/components/motion/proxy.js";
-import { ReorderableGroup as D, ReorderableItem as R, ReorderableHandle as j } from "../Reorderable/Reorderable.js";
-import { Reorder as P } from "../Icons/CustomIcons.js";
+import { jsx as e, jsxs as h } from "react/jsx-runtime";
+import { forwardRef as S } from "react";
+import { motion as l } from "../../node_modules/framer-motion/dist/es/render/components/motion/proxy.js";
+import { ReorderableGroup as k, ReorderableItem as w, ReorderableHandle as z } from "../Reorderable/Reorderable.js";
+import { Reorder as G } from "../Icons/CustomIcons.js";
 import { cn as d } from "../../utils/cn.js";
-import { typographyVariants as S, Typography as z } from "../Typography/Typography.js";
-const p = 72, u = 20, G = 24, W = 4, K = ({
-  data: y,
-  onReorder: N,
-  onSync: g,
-  syncDelay: x,
-  onSyncPendingChange: L,
-  onDragStart: _,
-  onDragEnd: v,
-  columns: o,
-  showHeader: I = !1,
-  disabled: b = !1,
-  isRowDisabled: l,
-  className: T,
-  isMovable: s = !0,
-  animateItems: w = !1,
-  layout: A,
+import { typographyVariants as W, Typography as K } from "../Typography/Typography.js";
+const f = 72, N = 20, R = 24, U = 4, F = ({
+  data: g,
+  onReorder: x,
+  onSync: L,
+  syncDelay: v,
+  onSyncPendingChange: _,
+  onDragStart: I,
+  onDragEnd: T,
+  columns: c,
+  showHeader: A = !1,
+  disabled: u = !1,
+  isRowDisabled: m,
+  className: H,
+  isMovable: i = !0,
+  animateItems: O = !1,
+  layout: E,
+  onRowClick: n,
   ...C
-}, H) => /* @__PURE__ */ e("div", { className: "w-full", children: /* @__PURE__ */ m(
+}, j) => /* @__PURE__ */ e("div", { className: "w-full", children: /* @__PURE__ */ h(
   "table",
   {
-    ref: H,
+    ref: j,
     className: d(
       "-my-sm w-full border-separate border-spacing-y-sm",
-      T
+      H
     ),
     ...C,
     children: [
-      I && /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ m("tr", { children: [
-        o.map((i, r) => /* @__PURE__ */ e(
+      A && /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ h("tr", { children: [
+        c.map((o, a) => /* @__PURE__ */ e(
           "th",
           {
             className: d(
-              S({
+              W({
                 size: "sm",
                 uppercase: !0,
                 variant: "body",
                 weight: "medium"
               }),
               "px-comp-table-p text-left text-text-dark-secondary",
-              i.className
+              o.className
             ),
-            children: i.title
+            children: o.title
           },
-          r
+          a
         )),
         /* @__PURE__ */ e(
-          n.th,
+          l.th,
           {
             initial: !1,
             animate: {
-              width: s ? p : u
+              width: i ? f : N
             },
             transition: { duration: 0.3, ease: "easeInOut" },
             className: "overflow-hidden"
@@ -63,57 +64,65 @@ const p = 72, u = 20, G = 24, W = 4, K = ({
         )
       ] }) }),
       /* @__PURE__ */ e(
-        D,
+        k,
         {
-          values: y,
-          onReorder: N,
-          onSync: g,
-          syncDelay: x,
-          onSyncPendingChange: L,
-          onDragStart: _,
-          onDragEnd: v,
-          disabled: b,
-          animatePresence: w,
+          values: g,
+          onReorder: x,
+          onSync: L,
+          syncDelay: v,
+          onSyncPendingChange: _,
+          onDragStart: I,
+          onDragEnd: T,
+          disabled: u,
+          animatePresence: O,
           as: "tbody",
           className: "contents",
-          children: (i) => i.map((r, h) => {
-            const O = (l == null ? void 0 : l(r, h)) ?? !1, t = b || O;
-            return /* @__PURE__ */ m(
-              R,
+          children: (o) => o.map((a, p) => {
+            const D = (m == null ? void 0 : m(a, p)) ?? !1, t = u || D, b = !!n && !t;
+            return /* @__PURE__ */ h(
+              w,
               {
-                value: r,
+                value: a,
                 as: "tr",
-                layout: A,
+                layout: E,
                 disabled: t,
                 dragListenerDisabled: !0,
                 whileDrag: t ? void 0 : { boxShadow: "0 8px 32px 0 rgba(59, 18, 107, 0.2)" },
-                className: "group rounded-2xl",
+                onClick: b ? (r) => {
+                  if (!b) return;
+                  const s = r.target;
+                  s != null && s.closest("[data-reorder-handle]") || n == null || n(a, p);
+                } : void 0,
+                className: d(
+                  "group rounded-2xl",
+                  b && "cursor-pointer"
+                ),
                 children: [
-                  o.map((a, c) => {
-                    const k = c === 0, f = c === o.length - 1;
+                  c.map((r, s) => {
+                    const P = s === 0, y = s === c.length - 1;
                     return /* @__PURE__ */ e(
-                      n.td,
+                      l.td,
                       {
                         initial: !1,
-                        animate: f ? {
-                          paddingRight: s ? G : W
+                        animate: y ? {
+                          paddingRight: i ? R : U
                         } : void 0,
                         transition: { duration: 0.3, ease: "easeInOut" },
                         className: d(
                           "h-comp-table-h-def border-y border-stroke-base-secondary bg-surface-base-secondary align-middle",
-                          f ? "pl-comp-table-p" : "px-comp-table-p",
+                          y ? "pl-comp-table-p" : "px-comp-table-p",
                           {
-                            "rounded-l-xl border-l": k,
+                            "rounded-l-xl border-l": P,
                             "group-focus-within:border-icon-brand-focus group-hover:border-icon-brand-hover": !t
                           },
-                          a.className
+                          r.className
                         ),
-                        children: a.render ? a.render(
-                          r[a.dataKey],
-                          r,
-                          h
+                        children: r.render ? r.render(
+                          a[r.dataKey],
+                          a,
+                          p
                         ) : /* @__PURE__ */ e(
-                          z,
+                          K,
                           {
                             variant: "body",
                             size: "base",
@@ -122,50 +131,52 @@ const p = 72, u = 20, G = 24, W = 4, K = ({
                             className: d(
                               t && "text-text-dark-disabled",
                               {
-                                "line-clamp-1": a.lineClamp === !0 || a.lineClamp === 1,
-                                "line-clamp-2": a.lineClamp === 2
+                                "line-clamp-1": r.lineClamp === !0 || r.lineClamp === 1,
+                                "line-clamp-2": r.lineClamp === 2
                               }
                             ),
-                            children: r[a.dataKey]
+                            children: a[r.dataKey]
                           }
                         )
                       },
-                      c
+                      s
                     );
                   }),
                   /* @__PURE__ */ e(
-                    n.td,
+                    l.td,
                     {
+                      "data-reorder-handle": !0,
                       initial: !1,
                       animate: {
-                        width: s ? p : u
+                        width: i ? f : N
                       },
                       transition: { duration: 0.3, ease: "easeInOut" },
                       className: d(
                         "h-comp-table-h-def min-w-[20px] rounded-r-xl border-y border-r border-stroke-base-secondary bg-surface-base-secondary align-middle",
                         {
-                          "group-focus-within:border-icon-brand-focus group-hover:border-icon-brand-hover": !t
+                          "group-focus-within:border-icon-brand-focus group-hover:border-icon-brand-hover": !t,
+                          "cursor-default": !!n
                         }
                       ),
                       children: /* @__PURE__ */ e(
-                        n.div,
+                        l.div,
                         {
                           initial: !1,
                           animate: {
-                            opacity: s ? 1 : 0,
-                            width: s ? p : 0
+                            opacity: i ? 1 : 0,
+                            width: i ? f : 0
                           },
                           transition: { duration: 0.3, ease: "easeInOut" },
                           className: "flex h-full items-center justify-center overflow-hidden border-l border-stroke-base-secondary",
                           children: /* @__PURE__ */ e(
-                            j,
+                            z,
                             {
-                              disabled: !s || t,
+                              disabled: !i || t,
                               className: d(
                                 "flex h-comp-button-h-sm w-comp-button-w-sm items-center justify-center focus-visible-default",
                                 t ? "text-text-dark-disabled" : "text-text-brand-def"
                               ),
-                              children: /* @__PURE__ */ e(P, { className: "size-icon-default" })
+                              children: /* @__PURE__ */ e(G, { className: "size-icon-default" })
                             }
                           )
                         }
@@ -174,15 +185,15 @@ const p = 72, u = 20, G = 24, W = 4, K = ({
                   )
                 ]
               },
-              r.id
+              a.id
             );
           })
         }
       )
     ]
   }
-) }), U = E(K);
-U.displayName = "ReorderableTable";
+) }), V = S(F);
+V.displayName = "ReorderableTable";
 export {
-  U as ReorderableTable
+  V as ReorderableTable
 };

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

@@ -12,6 +12,7 @@ declare const meta: Meta<typeof ReorderableTable>;
 export default meta;
 type Story = StoryObj<typeof ReorderableTable<IBenefit>>;
 export declare const Default: Story;
+export declare const WithRowClick: Story;
 export declare const WithoutHeader: Story;
 export declare const WithDisabledRow: Story;
 export declare const AnimatedRows: Story;

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

@@ -1 +1 @@
-{"version":3,"file":"ReorderableTable.stories.d.ts","sourceRoot":"","sources":["../../../src/components/ReorderableTable/ReorderableTable.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAM3D,OAAO,EACL,gBAAgB,EAEjB,MAAM,oBAAoB,CAAA;AAE3B,UAAU,QAAQ;IAChB,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,MAAM,CAAA;IACb,UAAU,EAAE,MAAM,CAAA;IAClB,IAAI,EAAE,MAAM,CAAA;IACZ,MAAM,EAAE,QAAQ,GAAG,UAAU,CAAA;CAC9B;AAyCD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,gBAAgB,CAiEvC,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,gBAAgB,CAAC,QAAQ,CAAC,CAAC,CAAA;AAExD,eAAO,MAAM,OAAO,EAAE,KAkHrB,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAsG3B,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,KA2G7B,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KA0H1B,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAkG3B,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KA4FtB,CAAA"}
+{"version":3,"file":"ReorderableTable.stories.d.ts","sourceRoot":"","sources":["../../../src/components/ReorderableTable/ReorderableTable.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAc3D,OAAO,EACL,gBAAgB,EAEjB,MAAM,oBAAoB,CAAA;AAE3B,UAAU,QAAQ;IAChB,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,MAAM,CAAA;IACb,UAAU,EAAE,MAAM,CAAA;IAClB,IAAI,EAAE,MAAM,CAAA;IACZ,MAAM,EAAE,QAAQ,GAAG,UAAU,CAAA;CAC9B;AAyCD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,gBAAgB,CAoEvC,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,gBAAgB,CAAC,QAAQ,CAAC,CAAC,CAAA;AAExD,eAAO,MAAM,OAAO,EAAE,KAkHrB,CAAA;AAMD,eAAO,MAAM,YAAY,EAAE,KAuL1B,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAsG3B,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,KA2G7B,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KA0H1B,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAkG3B,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KA4FtB,CAAA"}

package/dist/hooks/index.d.ts

@@ -0,0 +1,7 @@
+export * from './use-is-breakpoint';
+export * from './use-is-desktop';
+export * from './use-is-mobile';
+export * from './use-is-tablet';
+export * from './use-isomorphic-layout-effect';
+export * from './use-media-query';
+//# sourceMappingURL=index.d.ts.map

package/dist/hooks/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAA;AACnC,cAAc,kBAAkB,CAAA;AAChC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,gCAAgC,CAAA;AAC9C,cAAc,mBAAmB,CAAA"}

package/dist/hooks/use-is-breakpoint.js

@@ -1,7 +1,16 @@
-import { useMediaQuery as n } from "./use-media-query.js";
-const t = 40, e = 48, r = 64, i = () => n(`(min-width: ${t}rem)`), m = () => n(`(min-width: ${e}rem)`), o = () => n(`(min-width: ${r}rem)`);
+import { useMediaQuery as t } from "./use-media-query.js";
+const s = 40, n = 48, e = 64, r = 80, m = 96, i = 118, o = () => t(`(min-width: ${s}rem)`), c = () => t(`(max-width: ${s}rem)`), I = () => t(`(min-width: ${n}rem)`), x = () => t(`(max-width: ${n}rem)`), M = () => t(`(min-width: ${e}rem)`), d = () => t(`(max-width: ${e}rem)`), a = () => t(`(min-width: ${r}rem)`), h = () => t(`(max-width: ${r}rem)`), w = () => t(`(min-width: ${m}rem)`), $ = () => t(`(max-width: ${m}rem)`), X = () => t(`(min-width: ${i}rem)`), l = () => t(`(max-width: ${i}rem)`);
 export {
-  o as useIsMinLg,
-  m as useIsMinMd,
-  i as useIsMinSm
+  $ as useIsMax2xl,
+  l as useIsMax3xl,
+  d as useIsMaxLg,
+  x as useIsMaxMd,
+  c as useIsMaxSm,
+  h as useIsMaxXl,
+  w as useIsMin2xl,
+  X as useIsMin3xl,
+  M as useIsMinLg,
+  I as useIsMinMd,
+  o as useIsMinSm,
+  a as useIsMinXl
 };

package/dist/index.d.ts

@@ -1,3 +1,4 @@
 export * from './components';
+export * from './hooks';
 export * from './utils';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,eAAe,CAAA;AAEtB,cAAc,cAAc,CAAA;AAC5B,cAAc,SAAS,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,eAAe,CAAA;AAEtB,cAAc,cAAc,CAAA;AAC5B,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA"}