mada-design-system 0.7.2 → 0.8.0

package/index.es8.js

@@ -1,52 +1,56 @@
 import { jsx as c, jsxs as r, Fragment as $ } from "react/jsx-runtime";
-import { useReactTable as h, flexRender as P } from "./index.es105.js";
-import { Checkbox as A } from "./index.es26.js";
-import { Skeleton as B } from "./index.es70.js";
-import { Table as ee, TableHeader as le, TableRow as R, TableHead as ae, TableBody as oe, TableCell as F } from "./index.es73.js";
-import _, { useState as E, useEffect as Q } from "react";
-import { useMediaQuery as ce } from "./index.es106.js";
-import { cn as i } from "./index.es89.js";
+import { useReactTable as h, flexRender as I } from "./index.es105.js";
+import { Checkbox as j } from "./index.es26.js";
+import { Skeleton as A } from "./index.es70.js";
+import { Table as ll, TableHeader as el, TableRow as P, TableHead as ol, TableBody as al, TableCell as B } from "./index.es73.js";
+import F, { useState as L, useEffect as _ } from "react";
+import { useMediaQuery as cl } from "./index.es106.js";
+import { cn as g } from "./index.es89.js";
 import "./index.es2.js";
-import { PaginationDescription as ne, LinesPerPage as te, Pagination as se } from "./index.es13.js";
-import { Button as ie } from "./index.es23.js";
-import { ShouldRender as V } from "./index.es15.js";
-import de from "./index.es107.js";
-import ge from "./index.es108.js";
-import { getCoreRowModel as re, getPaginationRowModel as ue } from "./index.es109.js";
-function Te({
+import { PaginationDescription as nl, LinesPerPage as tl, Pagination as sl } from "./index.es13.js";
+import { Button as il } from "./index.es23.js";
+import { ShouldRender as R } from "./index.es15.js";
+import gl from "./index.es107.js";
+import dl from "./index.es108.js";
+import rl from "./index.es109.js";
+import { getCoreRowModel as ul, getPaginationRowModel as ml } from "./index.es110.js";
+function zl({
   columns: N,
-  data: S,
-  loading: g,
-  NoDataComponent: q,
-  itemsPerPage: w,
-  hasPagination: G = !0,
+  data: b,
+  loading: d,
+  NoDataComponent: E,
+  itemsPerPage: C,
+  hasPagination: Q = !0,
   onClickRow: u,
-  isFirstRowSelected: I = !1,
-  enableRowSelection: b,
+  isFirstRowSelected: y = !1,
+  enableRowSelection: m,
   enableMultiRowSelection: x,
-  rowSelection: J,
-  onRowSelectionChange: K,
-  onSortingChange: C,
-  theme: a,
-  ...e
+  rowSelection: U,
+  onRowSelectionChange: V,
+  onSortingChange: w,
+  theme: o,
+  variant: q,
+  alternating: G,
+  contained: J,
+  ...l
 }) {
-  var M, T, v, z, k;
-  const O = _.useMemo(() => g ? Array(w || 10).fill({}) : S, [g, w, S]), [m, U] = E(w || 10), [y, W] = E([]), X = _.useMemo(() => {
-    let l = g ? N.map((s) => ({
-      ...s,
-      cell: () => /* @__PURE__ */ c(B, { className: "h-8 w-full" })
+  var T, v, z, k, H;
+  const K = F.useMemo(() => d ? Array(C || 10).fill({}) : b, [d, C, b]), [f, O] = L(C || 10), [D, W] = L([]), X = F.useMemo(() => {
+    let e = d ? N.map((t) => ({
+      ...t,
+      cell: () => /* @__PURE__ */ c(A, { className: "h-8 w-full" })
     })) : N;
-    return b && !g && (l = [{
+    return m && !d && (e = [{
       id: "select",
-      header: x ? ({ table: o }) => {
-        var t;
+      header: x ? ({ table: a }) => {
+        var s;
         return /* @__PURE__ */ c(
-          A,
+          j,
           {
-            checked: o.getIsAllPageRowsSelected(),
-            onCheckedChange: (d) => o.toggleAllPageRowsSelected(!!d),
+            checked: a.getIsAllPageRowsSelected(),
+            onCheckedChange: (i) => a.toggleAllPageRowsSelected(!!i),
             "aria-label": "Select all",
-            className: i((t = a == null ? void 0 : a.headerSelect) == null ? void 0 : t.className),
+            className: g((s = o == null ? void 0 : o.headerSelect) == null ? void 0 : s.className),
             size: "sm",
             colors: "primary"
           }
@@ -55,15 +59,15 @@ function Te({
         // to preserve the place of the checkbox when multi selection is not enabled
         () => /* @__PURE__ */ c("div", { role: "checkbox", className: "w-[48px]", "aria-hidden": "true" })
       ),
-      cell: ({ row: o }) => {
-        var t;
+      cell: ({ row: a }) => {
+        var s;
         return /* @__PURE__ */ c(
-          A,
+          j,
           {
-            checked: o.getIsSelected(),
-            onCheckedChange: (d) => o.toggleSelected(!!d),
+            checked: a.getIsSelected(),
+            onCheckedChange: (i) => a.toggleSelected(!!i),
             "aria-label": "Select row",
-            className: i((t = a == null ? void 0 : a.bodySelect) == null ? void 0 : t.className),
+            className: g((s = o == null ? void 0 : o.bodySelect) == null ? void 0 : s.className),
             size: "sm",
             colors: "primary"
           }
@@ -71,136 +75,150 @@ function Te({
       },
       enableSorting: !1,
       enableHiding: !1
-    }, ...l]), l;
-  }, [g, N, b, x]), n = h({
-    data: O,
+    }, ...e]), e;
+  }, [d, N, m, x]), n = h({
+    data: K,
     columns: X,
-    getCoreRowModel: re(),
-    getPaginationRowModel: ue(),
-    onRowSelectionChange: K,
-    onSortingChange: (l) => {
-      const s = typeof l == "function" ? l(y) : l;
-      W(s), C == null || C(s);
+    getCoreRowModel: ul(),
+    getPaginationRowModel: ml(),
+    onRowSelectionChange: V,
+    onSortingChange: (e) => {
+      const t = typeof e == "function" ? e(D) : e;
+      W(t), w == null || w(t);
     },
     state: {
-      rowSelection: J || {},
-      sorting: y
+      rowSelection: U || {},
+      sorting: D
     },
-    enableRowSelection: b,
+    enableRowSelection: m,
     enableMultiRowSelection: x,
-    getRowId: (l) => l.id
+    getRowId: (e) => e.id
     // Provide a way to identify rows
-  }), Y = ce("(min-width: 801px)"), D = n.getState().pagination.pageIndex + 1, Z = (l) => {
-    u && (b ? x ? l.toggleSelected(!l.getIsSelected()) : (n.resetRowSelection(), l.toggleSelected(!0)) : (n.resetRowSelection(), l.toggleSelected(!l.getIsSelected())), u(l));
+  }), Y = cl("(min-width: 801px)"), M = n.getState().pagination.pageIndex + 1, Z = (e) => {
+    u && (m ? x ? e.toggleSelected(!e.getIsSelected()) : (n.resetRowSelection(), e.toggleSelected(!0)) : (n.resetRowSelection(), e.toggleSelected(!e.getIsSelected())), u(e));
   };
-  return Q(() => {
-    const l = n.getRowModel().rows;
-    if (!I || !l.length || !S.length)
+  return _(() => {
+    const e = n.getRowModel().rows;
+    if (!y || !e.length || !b.length)
       return;
-    const s = l[0];
-    n.resetRowSelection(), s.toggleSelected(!0), u && u(s);
-  }, [I, n, S]), Q(() => {
-    n.setPageSize(m);
-  }, [n, m]), Y ? /* @__PURE__ */ r($, { children: [
-    /* @__PURE__ */ c("div", { className: "overflow-hidden rounded-t-3", children: /* @__PURE__ */ r(ee, { className: i("w-full table-fixed", (M = a == null ? void 0 : a.table) == null ? void 0 : M.className), children: [
-      /* @__PURE__ */ c(le, { className: i((T = a == null ? void 0 : a.tableHeader) == null ? void 0 : T.className), children: n.getHeaderGroups().map((l) => {
-        var s;
-        return /* @__PURE__ */ c(R, { className: i("hover:bg-transparent", (s = a == null ? void 0 : a.tableRow) == null ? void 0 : s.className), children: l.headers.map((o) => {
-          var t, d, f, p;
-          return /* @__PURE__ */ c(
-            ae,
-            {
-              colSpan: ((t = o.column.columnDef.meta) == null ? void 0 : t.headerColSpan) ?? 1,
-              className: i((d = a == null ? void 0 : a.tableHead) == null ? void 0 : d.className),
-              children: o.isPlaceholder ? null : (p = (f = o == null ? void 0 : o.column) == null ? void 0 : f.columnDef) != null && p.enableSorting ? /* @__PURE__ */ r("div", { className: "flex w-full items-center justify-center gap-space-02", children: [
-                P(o.column.columnDef.header, o.getContext()),
-                /* @__PURE__ */ r(
-                  ie,
-                  {
-                    variant: o.column.getIsSorted() ? "default" : "ghost",
-                    colors: "neutral",
-                    size: "icon-xs",
-                    rounded: "default",
-                    className: "!size-[20px] !p-space-00",
-                    onClick: () => o.column.toggleSorting(),
-                    children: [
-                      /* @__PURE__ */ c(V, { shouldRender: !!o.column.getIsSorted(), children: /* @__PURE__ */ c(
-                        de,
-                        {
-                          className: i("transition duration-200", {
-                            "rotate-180": o.column.getIsSorted() === "asc"
-                          })
-                        }
-                      ) }),
-                      /* @__PURE__ */ c(V, { shouldRender: !o.column.getIsSorted(), children: /* @__PURE__ */ c(ge, {}) })
-                    ]
-                  }
-                )
-              ] }) : P(o.column.columnDef.header, o.getContext())
-            },
-            o.id
-          );
-        }) }, l.id);
-      }) }),
-      /* @__PURE__ */ c(oe, { className: i((v = a == null ? void 0 : a.tableBody) == null ? void 0 : v.className), children: (z = n.getRowModel().rows) != null && z.length ? n.getRowModel().rows.map((l, s) => {
-        var o;
-        return /* @__PURE__ */ c(
-          R,
-          {
-            "data-state": l.getIsSelected() && "selected",
-            onClick: () => Z(l),
-            className: i(u && "cursor-pointer", (o = a == null ? void 0 : a.tableRow) == null ? void 0 : o.className),
-            children: l.getVisibleCells().map((t) => {
-              var f, p, H, j, L;
-              const d = P(t.column.columnDef.cell, t.getContext());
+    const t = e[0];
+    n.resetRowSelection(), t.toggleSelected(!0), u && u(t);
+  }, [y, n, b]), _(() => {
+    n.setPageSize(f);
+  }, [n, f]), Y ? /* @__PURE__ */ r($, { children: [
+    /* @__PURE__ */ c("div", { className: "overflow-hidden ", children: /* @__PURE__ */ r(
+      ll,
+      {
+        className: g("w-full table-fixed", (T = o == null ? void 0 : o.table) == null ? void 0 : T.className),
+        variant: q,
+        alternating: G,
+        contained: J,
+        children: [
+          /* @__PURE__ */ c(el, { className: g((v = o == null ? void 0 : o.tableHeader) == null ? void 0 : v.className), children: n.getHeaderGroups().map((e) => {
+            var t;
+            return /* @__PURE__ */ c(P, { className: g("hover:bg-transparent", (t = o == null ? void 0 : o.tableRow) == null ? void 0 : t.className), children: e.headers.map((a) => {
+              var s, i, p, S;
               return /* @__PURE__ */ c(
-                F,
+                ol,
                 {
-                  colSpan: ((f = t.column.columnDef.meta) == null ? void 0 : f.cellColSpan) ?? 1,
-                  className: (p = a == null ? void 0 : a.tableCell) == null ? void 0 : p.className,
-                  "data-title": (H = t.column.columnDef.header) == null ? void 0 : H.toString(),
-                  isLast: ((L = (j = n == null ? void 0 : n.getRowModel()) == null ? void 0 : j.rows) == null ? void 0 : L.length) - 1 === s,
-                  children: d
+                  colSpan: ((s = a.column.columnDef.meta) == null ? void 0 : s.headerColSpan) ?? 1,
+                  className: g((i = o == null ? void 0 : o.tableHead) == null ? void 0 : i.className),
+                  children: a.isPlaceholder ? null : (S = (p = a == null ? void 0 : a.column) == null ? void 0 : p.columnDef) != null && S.enableSorting ? /* @__PURE__ */ r("div", { className: "flex w-full items-center justify-center gap-space-02", children: [
+                    I(a.column.columnDef.header, a.getContext()),
+                    /* @__PURE__ */ r(
+                      il,
+                      {
+                        variant: a.column.getIsSorted() ? "default" : "ghost",
+                        colors: "neutral",
+                        size: "icon-xs",
+                        rounded: "default",
+                        className: "!size-[20px] !p-space-00",
+                        onClick: () => a.column.toggleSorting(),
+                        children: [
+                          /* @__PURE__ */ c(
+                            R,
+                            {
+                              shouldRender: !!a.column.getIsSorted() && a.column.getIsSorted() === "desc",
+                              children: /* @__PURE__ */ c(gl, {})
+                            }
+                          ),
+                          /* @__PURE__ */ c(
+                            R,
+                            {
+                              shouldRender: !!a.column.getIsSorted() && a.column.getIsSorted() === "asc",
+                              children: /* @__PURE__ */ c(dl, {})
+                            }
+                          ),
+                          /* @__PURE__ */ c(R, { shouldRender: !a.column.getIsSorted(), children: /* @__PURE__ */ c(rl, {}) })
+                        ]
+                      }
+                    )
+                  ] }) : I(a.column.columnDef.header, a.getContext())
                 },
-                t.id
+                a.id
               );
-            })
-          },
-          l.id
-        );
-      }) : /* @__PURE__ */ c(R, { className: (k = a == null ? void 0 : a.tableRow) == null ? void 0 : k.className, children: /* @__PURE__ */ c(F, { colSpan: N.length, className: "h-24 text-center", children: q }) }) })
-    ] }) }),
-    !!n.getFilteredRowModel().rows.length && G && /* @__PURE__ */ r("div", { className: "flex items-center justify-end  px-space-04 py-space-02", children: [
-      g ? /* @__PURE__ */ c(B, { className: "me-auto h-[20px] w-space-12" }) : /* @__PURE__ */ c(
-        ne,
+            }) }, e.id);
+          }) }),
+          /* @__PURE__ */ c(al, { className: g((z = o == null ? void 0 : o.tableBody) == null ? void 0 : z.className), children: (k = n.getRowModel().rows) != null && k.length ? n.getRowModel().rows.map((e) => {
+            var t;
+            return /* @__PURE__ */ c(
+              P,
+              {
+                "data-state": e.getIsSelected() && "selected",
+                onClick: () => Z(e),
+                className: g(u && "cursor-pointer", (t = o == null ? void 0 : o.tableRow) == null ? void 0 : t.className),
+                children: e.getVisibleCells().map((a) => {
+                  var i, p, S;
+                  const s = I(a.column.columnDef.cell, a.getContext());
+                  return /* @__PURE__ */ c(
+                    B,
+                    {
+                      colSpan: ((i = a.column.columnDef.meta) == null ? void 0 : i.cellColSpan) ?? 1,
+                      className: (p = o == null ? void 0 : o.tableCell) == null ? void 0 : p.className,
+                      "data-title": (S = a.column.columnDef.header) == null ? void 0 : S.toString(),
+                      children: s
+                    },
+                    a.id
+                  );
+                })
+              },
+              e.id
+            );
+          }) : /* @__PURE__ */ c(P, { className: (H = o == null ? void 0 : o.tableRow) == null ? void 0 : H.className, children: /* @__PURE__ */ c(B, { colSpan: N.length + (m ? 1 : 0), className: "h-24 text-center", children: E }) }) })
+        ]
+      }
+    ) }),
+    !!n.getFilteredRowModel().rows.length && Q && /* @__PURE__ */ r("div", { className: "flex items-center justify-end  p-space-03", children: [
+      d ? /* @__PURE__ */ c(A, { className: "me-auto h-[20px] w-space-12" }) : /* @__PURE__ */ c(
+        nl,
         {
-          currentPage: (e == null ? void 0 : e.pageNumber) ?? D,
-          limit: m,
-          totalCount: (e == null ? void 0 : e.totalItems) ?? n.getFilteredRowModel().rows.length
+          currentPage: (l == null ? void 0 : l.pageNumber) ?? M,
+          limit: f,
+          totalCount: (l == null ? void 0 : l.totalItems) ?? n.getFilteredRowModel().rows.length
         }
       ),
       /* @__PURE__ */ r("div", { className: "flex items-center gap-x-space-03", children: [
         /* @__PURE__ */ c(
-          te,
+          tl,
           {
-            value: m,
-            onChange: (l) => {
-              e != null && e.onPageChange && (e == null || e.onPageChange(1)), U(+l), e != null && e.setLimit && (e == null || e.setLimit(+l));
+            value: f,
+            onChange: (e) => {
+              l != null && l.onPageChange && (l == null || l.onPageChange(1)), O(+e), l != null && l.setLimit && (l == null || l.setLimit(+e));
             }
           }
         ),
         /* @__PURE__ */ c(
-          se,
+          sl,
           {
             withoutText: !0,
             className: "justify-center",
-            totalItems: e != null && e.totalItems ? e == null ? void 0 : e.totalItems : n.getFilteredRowModel().rows.length ?? 0,
-            selectedPage: (e == null ? void 0 : e.pageNumber) ?? D,
-            itemsPerPage: Number(m),
-            onPageChange: (l) => {
-              if (e != null && e.onPageChange)
-                return e == null ? void 0 : e.onPageChange(l);
-              n.setPageIndex(l - 1);
+            totalItems: l != null && l.totalItems ? l == null ? void 0 : l.totalItems : n.getFilteredRowModel().rows.length ?? 0,
+            selectedPage: (l == null ? void 0 : l.pageNumber) ?? M,
+            itemsPerPage: Number(f),
+            onPageChange: (e) => {
+              if (l != null && l.onPageChange)
+                return l == null ? void 0 : l.onPageChange(e);
+              n.setPageIndex(e - 1);
             }
           }
         )
@@ -209,6 +227,6 @@ function Te({
   ] }) : null;
 }
 export {
-  Te as DataTable,
-  Te as default
+  zl as DataTable,
+  zl as default
 };

package/index.es82.js

@@ -1,5 +1,5 @@
 import { jsxs as R, jsx as t } from "react/jsx-runtime";
-import { useVirtualizer as w } from "./index.es117.js";
+import { useVirtualizer as w } from "./index.es118.js";
 import S, { useRef as N } from "react";
 import "./index.es2.js";
 import { Skeleton as z } from "./index.es70.js";

package/index.es85.js

@@ -1,4 +1,4 @@
-import { produce as u } from "./index.es183.js";
+import { produce as u } from "./index.es190.js";
 const d = (a) => (e, t) => {
   a.setQueryData(e, (r) => typeof t != "function" ? t : u(r, (o) => {
     t(o);

package/index.es86.js

@@ -1,7 +1,7 @@
 var h = Object.defineProperty;
 var d = (n, e, t) => e in n ? h(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t;
 var i = (n, e, t) => (d(n, typeof e != "symbol" ? e + "" : e, t), t);
-import { UserManager as g, Log as r } from "./index.es180.js";
+import { UserManager as g, Log as r } from "./index.es185.js";
 import { createIdentityConfig as l, createMetadataConfig as c } from "./index.es99.js";
 import "./index.es2.js";
 import u from "./index.es91.js";

package/index.es89.js

@@ -1,10 +1,10 @@
-import { clsx as s } from "./index.es132.js";
-import a from "./index.es124.js";
-import u from "./index.es181.js";
+import { clsx as s } from "./index.es133.js";
+import a from "./index.es125.js";
+import u from "./index.es186.js";
 import { strings as c } from "./index.es101.js";
-import { DateFormat as i } from "./index.es158.js";
+import { DateFormat as i } from "./index.es164.js";
 import l from "./index.es93.js";
-import { extendTailwindMerge as m } from "./index.es182.js";
+import { extendTailwindMerge as m } from "./index.es187.js";
 import { useToast as d } from "./index.es81.js";
 const g = m({
   classGroups: {

package/index.es9.js

@@ -1,5 +1,5 @@
 import { jsx as s, jsxs as o } from "react/jsx-runtime";
-import { cva as x } from "./index.es110.js";
+import { cva as x } from "./index.es111.js";
 import { forwardRef as n } from "react";
 import { cn as i } from "./index.es89.js";
 const b = x("grid border-b border-border-secondary", {

package/index.es90.js

@@ -1,4 +1,4 @@
-import { create as s } from "./index.es172.js";
+import { create as s } from "./index.es177.js";
 import f from "./index.es92.js";
 const m = ({ state: e }) => {
   var o, i, n, t, l, r;

package/index.es91.js

@@ -1,4 +1,4 @@
-import { create as r } from "./index.es172.js";
+import { create as r } from "./index.es177.js";
 import m from "./index.es92.js";
 const i = r()(
   m(

package/index.es92.js

@@ -1,5 +1,5 @@
-import { devtools as t } from "./index.es184.js";
-import { immer as s } from "./index.es185.js";
+import { devtools as t } from "./index.es188.js";
+import { immer as s } from "./index.es189.js";
 const l = {
   name: "Store",
   enabled: !0,

package/index.es93.js

@@ -1,4 +1,4 @@
-import { create as n } from "./index.es172.js";
+import { create as n } from "./index.es177.js";
 import t from "./index.es92.js";
 const l = n()(
   t(

package/index.es96.js

@@ -1,6 +1,6 @@
 import { jsx as O } from "react/jsx-runtime";
 import { useState as y, useReducer as C, useMemo as I, useRef as b, useEffect as v, useCallback as A } from "react";
-import { UserManager as M } from "./index.es180.js";
+import { UserManager as M } from "./index.es185.js";
 import { AuthContext as L } from "./index.es95.js";
 import { initialAuthState as x } from "./index.es97.js";
 import { reducer as D } from "./index.es94.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mada-design-system",
-  "version": "0.7.2",
+  "version": "0.8.0",
   "sideEffects": false,
   "private": false,
   "main": "index.es.js",
@@ -58,6 +58,7 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "cmdk": "^0.2.0",
+    "date-fns": "^4.1.0",
     "embla-carousel-react": "^8.5.2",
     "google-material-icons": "^2.1.4",
     "immer": "^10.1.1",
@@ -79,9 +80,9 @@
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^3",
-    "@faker-js/faker": "^9.9.0",
     "@commitlint/cli": "^19.8.1",
     "@commitlint/config-conventional": "^19.8.1",
+    "@faker-js/faker": "^9.9.0",
     "@originjs/vite-plugin-commonjs": "^1.0.3",
     "@rollup/plugin-inject": "^5.0.5",
     "@storybook/addon-a11y": "^8.5.3",