@matthiaskrijgsman/mat-ui 0.0.21 → 0.0.23

package/dist/index.d.ts

@@ -35,6 +35,8 @@ export { BadgeColor } from "./components/BadgeColors.tsx";
 export { TabButtons } from "./components/TabButtons.tsx";
 export { AutoScroll } from "./components/AutoScroll.tsx";
 export { Spinner } from "./spinner/Spinner.tsx";
+export { Table } from "./table/Table.tsx";
+export { TableColumnHead } from "./table/TableColumnHead.tsx";
 export { DropdownButton } from "./components/dropdown-menu/DropdownButton.tsx";
 export { DropdownButtonGroup } from "./components/dropdown-menu/DropdownButtonGroup.tsx";
 export { DropdownPanel } from "./components/dropdown-menu/DropdownPanel.tsx";

package/dist/index.js

@@ -11577,54 +11577,8 @@ const iy = {
       children: /* @__PURE__ */ p.jsx("div", { ref: l, children: r })
     }
   );
-}, fu = et(void 0), fy = () => ({
-  dismiss: me(fu) || (() => {
-  })
-}), my = "inline-flex flex-row items-center gap-3 h-10 px-3 font-semibold ring-0 dropdown-item rounded-lg cursor-pointer transition-all duration-150 select-none focus:outline-none focus:ring-0 border border-transparent bg-transparent", je = E.forwardRef((e, t) => {
-  const {
-    className: n,
-    children: i,
-    Icon: r,
-    onClick: o,
-    dismissOnClick: s = !0,
-    ...a
-  } = e, { dismiss: l } = fy(), u = (c) => {
-    o && o(c), s && l();
-  };
-  return /* @__PURE__ */ p.jsxs(
-    "button",
-    {
-      ref: t,
-      className: M(
-        my,
-        n
-      ),
-      onClick: u,
-      ...a,
-      children: [
-        r && /* @__PURE__ */ p.jsx(r, { className: "h-5 w-5" }),
-        i
-      ]
-    }
-  );
-}), Na = (e) => {
-  const { label: t, children: n, className: i } = e;
-  return /* @__PURE__ */ p.jsxs("div", { className: M("flex flex-col dropdown-button-group", i), children: [
-    t && /* @__PURE__ */ p.jsx("div", { className: "mb-2 text-sm dropdown-group-label font-semibold px-3", children: t }),
-    n
-  ] });
-}, mu = (e) => {
-  const { trigger: t, children: n, placement: i = "bottom-end", minWidth: r = 200, className: o } = e, [s, a] = fe(!1), { Popover: l, anchorRef: u } = xn({
-    placement: i,
-    onOutsideClick: () => a(!1),
-    minWidth: r
-  });
-  return /* @__PURE__ */ p.jsxs(p.Fragment, { children: [
-    /* @__PURE__ */ p.jsx("div", { ref: u, className: o, onClick: () => a(!s), children: t }),
-    /* @__PURE__ */ p.jsx(l, { open: s, children: /* @__PURE__ */ p.jsx(yn, { padding: "sm", children: /* @__PURE__ */ p.jsx(fu.Provider, { value: () => a(!1), children: n }) }) })
-  ] });
 };
-function hy(e) {
+function fy(e) {
   const {
     onDelta: t,
     onDragStart: n,
@@ -11692,7 +11646,7 @@ function hy(e) {
     }
   };
 }
-const gy = (e) => {
+const my = (e) => {
   const {
     column: t,
     width: n,
@@ -11700,7 +11654,7 @@ const gy = (e) => {
     onResize: r,
     sortDirection: o,
     onSortClick: s
-  } = e, a = !!t.sortable, { bind: l } = hy({
+  } = e, a = !!t.sortable, { bind: l } = fy({
     onDelta: (u) => r(u)
   });
   return /* @__PURE__ */ p.jsxs(
@@ -11728,7 +11682,7 @@ const gy = (e) => {
           "div",
           {
             ...l,
-            className: "cursor-ew-resize group py-2 table-resize-handle w-[8px]",
+            className: "cursor-ew-resize group py-4 table-resize-handle w-[8px]",
             children: /* @__PURE__ */ p.jsx(
               "div",
               {
@@ -11740,12 +11694,12 @@ const gy = (e) => {
       ]
     }
   );
-}, wt = 200, vy = 60, xy = (e) => {
+}, wt = 200, hy = 60, gy = (e) => {
   const t = {};
   for (const n of e)
     t[n.id] = n.defaultWidth ?? wt;
   return t;
-}, yy = (e) => {
+}, vy = (e) => {
   const {
     columns: t,
     rows: n,
@@ -11756,7 +11710,7 @@ const gy = (e) => {
     className: a,
     rowHeight: l = 44,
     headerHeight: u = 44
-  } = e, [c, d] = fe(() => xy(t));
+  } = e, [c, d] = fe(() => gy(t));
   be(() => {
     d((h) => {
       const T = {};
@@ -11802,12 +11756,12 @@ const gy = (e) => {
             className: "flex flex-row table-header font-medium",
             style: { width: v, minWidth: "100%" },
             children: t.map((h) => /* @__PURE__ */ p.jsx(
-              gy,
+              my,
               {
                 column: h,
                 width: c[h.id] ?? h.defaultWidth ?? wt,
                 height: u,
-                onResize: (T) => f(h.id, T, h.minWidth ?? vy),
+                onResize: (T) => f(h.id, T, h.minWidth ?? hy),
                 sortDirection: o?.columnId === h.id ? o.direction : null,
                 onSortClick: () => m(h.id)
               },
@@ -11855,6 +11809,52 @@ const gy = (e) => {
       }
     )
   ] });
+}, fu = et(void 0), xy = () => ({
+  dismiss: me(fu) || (() => {
+  })
+}), yy = "inline-flex flex-row items-center gap-3 h-10 px-3 font-semibold ring-0 dropdown-item rounded-lg cursor-pointer transition-all duration-150 select-none focus:outline-none focus:ring-0 border border-transparent bg-transparent", je = E.forwardRef((e, t) => {
+  const {
+    className: n,
+    children: i,
+    Icon: r,
+    onClick: o,
+    dismissOnClick: s = !0,
+    ...a
+  } = e, { dismiss: l } = xy(), u = (c) => {
+    o && o(c), s && l();
+  };
+  return /* @__PURE__ */ p.jsxs(
+    "button",
+    {
+      ref: t,
+      className: M(
+        yy,
+        n
+      ),
+      onClick: u,
+      ...a,
+      children: [
+        r && /* @__PURE__ */ p.jsx(r, { className: "h-5 w-5" }),
+        i
+      ]
+    }
+  );
+}), Na = (e) => {
+  const { label: t, children: n, className: i } = e;
+  return /* @__PURE__ */ p.jsxs("div", { className: M("flex flex-col dropdown-button-group", i), children: [
+    t && /* @__PURE__ */ p.jsx("div", { className: "mb-2 text-sm dropdown-group-label font-semibold px-3", children: t }),
+    n
+  ] });
+}, mu = (e) => {
+  const { trigger: t, children: n, placement: i = "bottom-end", minWidth: r = 200, className: o } = e, [s, a] = fe(!1), { Popover: l, anchorRef: u } = xn({
+    placement: i,
+    onOutsideClick: () => a(!1),
+    minWidth: r
+  });
+  return /* @__PURE__ */ p.jsxs(p.Fragment, { children: [
+    /* @__PURE__ */ p.jsx("div", { ref: u, className: o, onClick: () => a(!s), children: t }),
+    /* @__PURE__ */ p.jsx(l, { open: s, children: /* @__PURE__ */ p.jsx(yn, { padding: "sm", children: /* @__PURE__ */ p.jsx(fu.Provider, { value: () => a(!1), children: n }) }) })
+  ] });
 }, by = () => /* @__PURE__ */ p.jsx("div", {}), wy = [
   { id: 1, email: "sarah.jennings@example.com", firstname: "Sarah", lastname: "Jennings", status: "active" },
   { id: 2, email: "liam.patel@outlook.com", firstname: "Liam", lastname: "Patel", status: "inactive" },
@@ -11940,7 +11940,7 @@ const gy = (e) => {
   ], value: null, onChange: () => {
   } }),
   /* @__PURE__ */ p.jsx(
-    yy,
+    vy,
     {
       className: "h-[300px] w-[300px]",
       columns: Ty,
@@ -12003,6 +12003,8 @@ export {
   Wy as SidebarModal,
   an as Spinner,
   py as TabButtons,
+  vy as Table,
+  my as TableColumnHead,
   qy as Test,
   By as Tooltip,
   kv as UploadFileTile,