@sth87/shadcn-design-system 0.1.8 → 0.2.0

package/dist/esm/components/Table/data-table-view-options.js

@@ -1,60 +1,30 @@
-import { jsxs as x, Fragment as G, jsx as r } from "react/jsx-runtime";
+import { jsxs as x, Fragment as G, jsx as n } from "react/jsx-runtime";
 import { useSensors as K, useSensor as O, DndContext as $, closestCenter as H, KeyboardSensor as q, PointerSensor as J } from "../../node_modules/.pnpm/@dnd-kit_core@6.3.1_react-dom@19.1.1_react@19.1.1__react@19.1.1/node_modules/@dnd-kit/core/dist/core.esm.js";
 import { arrayMove as Q, SortableContext as U, verticalListSortingStrategy as W, sortableKeyboardCoordinates as X, useSortable as Y } from "../../node_modules/.pnpm/@dnd-kit_sortable@10.0.0_@dnd-kit_core@6.3.1_react-dom@19.1.1_react@19.1.1__react@19.1.1__react@19.1.1/node_modules/@dnd-kit/sortable/dist/sortable.esm.js";
 import { CSS as Z } from "../../node_modules/.pnpm/@dnd-kit_utilities@3.2.2_react@19.1.1/node_modules/@dnd-kit/utilities/dist/utilities.esm.js";
-import { Check as _, Settings2 as ee, GripVertical as te } from "lucide-react";
-import * as h from "react";
-import se from "../Command/Command.js";
-import { Popover as re } from "../Popover/index.js";
-import "@radix-ui/react-slot";
-import "../../packages/ui/src/components/button.js";
-import "../../packages/ui/src/components/button-group.js";
-import "../../packages/ui/src/components/input.js";
-import "../../packages/ui/src/components/textarea.js";
-import "@radix-ui/react-label";
-import { cn as N } from "../../packages/ui/src/lib/utils.js";
-import "../../packages/ui/src/components/select.js";
-import "../../packages/ui/src/components/combobox.js";
-import "@radix-ui/react-tooltip";
-import "react-day-picker";
-import "../../packages/ui/src/components/popover.js";
-import "@radix-ui/react-separator";
-import "../../packages/ui/src/components/switch.js";
-import "vaul";
-import "@radix-ui/react-scroll-area";
-import "../../packages/ui/src/components/tree-view.js";
-import "@radix-ui/react-alert-dialog";
-import "@radix-ui/react-avatar";
-import "../../packages/ui/src/components/badge.js";
-import "../../packages/ui/src/components/checkbox.js";
-import "@radix-ui/react-collapsible";
-import "cmdk";
-import "@radix-ui/react-dialog";
-import "@radix-ui/react-dropdown-menu";
-import "../../packages/ui/src/components/input-otp.js";
-import "../../packages/ui/src/components/radio-group.js";
-import "../../packages/ui/src/components/sidebar.js";
-import "@radix-ui/react-slider";
-import "../../packages/ui/src/components/tabs.js";
-import "../../packages/ui/src/components/toggle.js";
-import D from "../Checkbox/Checkbox.js";
+import { Check as _, Settings2 as ee, GripVertical as se } from "lucide-react";
+import * as p from "react";
 import P from "../Button/Button.js";
-function qe({
-  table: s,
-  variant: o = "command",
-  labels: n,
-  triggerIcon: c = /* @__PURE__ */ r(ee, { className: "ds:text-muted-foreground" }),
+import D from "../Checkbox/Checkbox.js";
+import te from "../Command/Command.js";
+import { Popover as ne } from "../Popover/index.js";
+import { cn as N } from "../../packages/ui/src/lib/utils.js";
+function he({
+  table: t,
+  variant: i = "command",
+  labels: o,
+  triggerIcon: m = /* @__PURE__ */ n(ee, { className: "ds:text-muted-foreground" }),
   trigger: d,
-  content: f,
+  content: u,
   contentClassName: g,
-  ...u
+  ...h
 }) {
-  const l = s.getState().columnOrder, a = s.getState().columnPinning, i = h.useMemo(
-    () => w(s, l, a).filter(
+  const l = t.getState().columnOrder, a = t.getState().columnPinning, r = p.useMemo(
+    () => w(t, l, a).filter(
       (e) => typeof e.accessorFn < "u" && e.getCanHide()
     ),
-    [s, l, a]
-  ), C = h.useCallback(
+    [t, l, a]
+  ), C = p.useCallback(
     (e) => e.columnDef.meta?.label ?? (typeof e.columnDef.header == "string" ? e.columnDef.header : e.id),
     []
   ), y = K(
@@ -62,42 +32,42 @@ function qe({
     O(q, {
       coordinateGetter: X
     })
-  ), t = h.useMemo(
-    () => i.map((e) => e.id),
-    [i]
-  ), T = i.every((e) => e.getIsVisible()), z = i.some((e) => e.getIsVisible()), A = h.useCallback(
+  ), s = p.useMemo(
+    () => r.map((e) => e.id),
+    [r]
+  ), T = r.every((e) => e.getIsVisible()), z = r.some((e) => e.getIsVisible()), A = p.useCallback(
     (e) => {
-      i.forEach((p) => p.toggleVisibility(e));
+      r.forEach((f) => f.toggleVisibility(e));
     },
-    [i]
-  ), L = h.useCallback(
+    [r]
+  ), L = p.useCallback(
     (e) => {
-      const { active: p, over: S } = e;
-      if (!S || p.id === S.id) return;
-      const V = t.indexOf(String(p.id)), k = t.indexOf(String(S.id));
+      const { active: f, over: S } = e;
+      if (!S || f.id === S.id) return;
+      const V = s.indexOf(String(f.id)), k = s.indexOf(String(S.id));
       if (V === -1 || k === -1) return;
-      const B = Q(t, V, k), I = new Set(t), R = [...B], E = w(s).map(
-        (m) => I.has(m.id) ? R.shift() ?? m.id : m.id
-      ), v = s.getState().columnPinning, F = {
+      const B = Q(s, V, k), I = new Set(s), R = [...B], E = w(t).map(
+        (c) => I.has(c.id) ? R.shift() ?? c.id : c.id
+      ), v = t.getState().columnPinning, F = {
         ...v,
-        left: v?.left?.filter((m) => !I.has(m)),
+        left: v?.left?.filter((c) => !I.has(c)),
         right: v?.right?.filter(
-          (m) => !I.has(m)
+          (c) => !I.has(c)
         )
       };
-      s.setColumnOrder(E), s.setColumnPinning(F);
+      t.setColumnOrder(E), t.setColumnPinning(F);
     },
-    [t, s]
+    [s, t]
   ), M = [
     {
       type: "group",
       heading: "",
-      items: i.map((e) => ({
+      items: r.map((e) => ({
         type: "item",
         onClick: () => e.toggleVisibility(!e.getIsVisible()),
         children: /* @__PURE__ */ x(G, { children: [
-          /* @__PURE__ */ r("span", { className: "ds:truncate", children: C(e) }),
-          /* @__PURE__ */ r(
+          /* @__PURE__ */ n("span", { className: "ds:truncate", children: C(e) }),
+          /* @__PURE__ */ n(
             _,
             {
               className: N(
@@ -110,13 +80,13 @@ function qe({
       }))
     }
   ], b = {
-    trigger: n?.trigger ?? "View",
-    searchPlaceholder: n?.searchPlaceholder ?? "Search columns...",
-    selectAll: n?.selectAll ?? "Chọn tất cả",
-    reset: n?.reset ?? "Đặt lại"
+    trigger: o?.trigger ?? "View",
+    searchPlaceholder: o?.searchPlaceholder ?? "Search columns...",
+    selectAll: o?.selectAll ?? "Chọn tất cả",
+    reset: o?.reset ?? "Đặt lại"
   }, j = /* @__PURE__ */ x("div", { className: "ds:flex ds:w-full ds:flex-col", children: [
     /* @__PURE__ */ x("div", { className: "ds:flex ds:items-center ds:gap-3 ds:px-3 ds:py-3", children: [
-      /* @__PURE__ */ r(
+      /* @__PURE__ */ n(
         D,
         {
           "aria-label": "Toggle all columns",
@@ -124,27 +94,27 @@ function qe({
           onCheckedChange: (e) => A(e === !0)
         }
       ),
-      /* @__PURE__ */ r("span", { className: "ds:text-sm ds:font-medium ds:text-foreground", children: b.selectAll })
+      /* @__PURE__ */ n("span", { className: "ds:text-sm ds:font-medium ds:text-foreground", children: b.selectAll })
     ] }),
-    /* @__PURE__ */ r("div", { className: "ds:mx-3 ds:h-px ds:bg-border" }),
-    /* @__PURE__ */ r(
+    /* @__PURE__ */ n("div", { className: "ds:mx-3 ds:h-px ds:bg-border" }),
+    /* @__PURE__ */ n(
       $,
       {
         sensors: y,
         collisionDetection: H,
         onDragEnd: L,
-        children: /* @__PURE__ */ r(
+        children: /* @__PURE__ */ n(
           U,
           {
-            items: t,
+            items: s,
             strategy: W,
-            children: /* @__PURE__ */ r("div", { className: "ds:flex ds:max-h-80 ds:flex-col ds:overflow-y-auto ds:py-2", children: i.map((e) => /* @__PURE__ */ r(
-              ie,
+            children: /* @__PURE__ */ n("div", { className: "ds:flex ds:max-h-80 ds:flex-col ds:overflow-y-auto ds:py-2", children: r.map((e) => /* @__PURE__ */ n(
+              re,
               {
                 id: e.id,
                 label: C(e),
                 checked: e.getIsVisible(),
-                onCheckedChange: (p) => e.toggleVisibility(p === !0)
+                onCheckedChange: (f) => e.toggleVisibility(f === !0)
               },
               e.id
             )) })
@@ -152,8 +122,8 @@ function qe({
         )
       }
     ),
-    /* @__PURE__ */ r("div", { className: "ds:mx-3 ds:h-px ds:bg-border" }),
-    /* @__PURE__ */ r(
+    /* @__PURE__ */ n("div", { className: "ds:mx-3 ds:h-px ds:bg-border" }),
+    /* @__PURE__ */ n(
       P,
       {
         type: "button",
@@ -161,14 +131,14 @@ function qe({
         size: "sm",
         className: "ds:mx-3 ds:my-2 ds:text-primary hover:ds:text-primary",
         onClick: () => {
-          s.resetColumnVisibility(), s.resetColumnOrder(), s.resetColumnPinning();
+          t.resetColumnVisibility(), t.resetColumnOrder(), t.resetColumnPinning();
         },
         children: b.reset
       }
     )
   ] });
-  return /* @__PURE__ */ r(
-    re,
+  return /* @__PURE__ */ n(
+    ne,
     {
       trigger: d ?? /* @__PURE__ */ x(
         P,
@@ -179,42 +149,42 @@ function qe({
           size: "sm",
           className: "ds:ml-auto ds:h-8 ds:font-normal ds:lg:flex",
           children: [
-            c,
+            m,
             b.trigger
           ]
         }
       ),
-      content: f ?? (o === "draggable" ? j : /* @__PURE__ */ r(se, { items: M, search: b.searchPlaceholder })),
+      content: u ?? (i === "draggable" ? j : /* @__PURE__ */ n(te, { items: M, search: b.searchPlaceholder })),
       contentClassName: N(
         "ds:p-0",
-        o === "draggable" ? "ds:w-72" : "ds:w-44",
+        i === "draggable" ? "ds:w-72" : "ds:w-44",
         g
       ),
-      ...u
+      ...h
     }
   );
 }
-function w(s, o = s.getState().columnOrder, n = s.getState().columnPinning) {
-  const c = s.getAllLeafColumns(), d = new Map(c.map((t) => [t.id, t])), f = c.map((t) => t.id), g = o ?? [], u = [
-    ...g.filter((t) => d.has(t)),
-    ...f.filter((t) => !g.includes(t))
-  ], l = n ?? {}, a = (l.left ?? []).filter((t) => d.has(t)), i = (l.right ?? []).filter((t) => d.has(t)), C = /* @__PURE__ */ new Set([...a, ...i]), y = u.filter((t) => !C.has(t));
-  return [...a, ...y, ...i].map((t) => d.get(t)).filter((t) => !!t);
+function w(t, i = t.getState().columnOrder, o = t.getState().columnPinning) {
+  const m = t.getAllLeafColumns(), d = new Map(m.map((s) => [s.id, s])), u = m.map((s) => s.id), g = i ?? [], h = [
+    ...g.filter((s) => d.has(s)),
+    ...u.filter((s) => !g.includes(s))
+  ], l = o ?? {}, a = (l.left ?? []).filter((s) => d.has(s)), r = (l.right ?? []).filter((s) => d.has(s)), C = /* @__PURE__ */ new Set([...a, ...r]), y = h.filter((s) => !C.has(s));
+  return [...a, ...y, ...r].map((s) => d.get(s)).filter((s) => !!s);
 }
-function ie({
-  id: s,
-  label: o,
-  checked: n,
-  onCheckedChange: c
+function re({
+  id: t,
+  label: i,
+  checked: o,
+  onCheckedChange: m
 }) {
   const {
     attributes: d,
-    listeners: f,
+    listeners: u,
     setNodeRef: g,
-    transform: u,
+    transform: h,
     transition: l,
     isDragging: a
-  } = Y({ id: s });
+  } = Y({ id: t });
   return /* @__PURE__ */ x(
     "div",
     {
@@ -224,35 +194,34 @@ function ie({
         a && "ds:bg-accent"
       ),
       style: {
-        transform: Z.Transform.toString(u),
+        transform: Z.Transform.toString(h),
         transition: l
       },
       children: [
-        /* @__PURE__ */ r(
+        /* @__PURE__ */ n(
           "button",
           {
             type: "button",
             className: "ds:flex ds:size-5 ds:shrink-0 ds:cursor-grab ds:items-center ds:justify-center ds:text-muted-foreground active:ds:cursor-grabbing",
-            "aria-label": `Reorder ${o}`,
+            "aria-label": `Reorder ${i}`,
             ...d,
-            ...f,
-            children: /* @__PURE__ */ r(te, { className: "ds:size-4" })
+            ...u,
+            children: /* @__PURE__ */ n(se, { className: "ds:size-4" })
           }
         ),
-        /* @__PURE__ */ r(
+        /* @__PURE__ */ n(
           D,
           {
-            "aria-label": `Toggle ${o}`,
-            checked: n,
-            onCheckedChange: c
+            "aria-label": `Toggle ${i}`,
+            checked: o,
+            onCheckedChange: m
           }
         ),
-        /* @__PURE__ */ r("span", { className: "ds:min-w-0 ds:flex-1 ds:truncate ds:font-medium", children: o })
+        /* @__PURE__ */ n("span", { className: "ds:min-w-0 ds:flex-1 ds:truncate ds:font-medium", children: i })
       ]
     }
   );
 }
 export {
-  qe as DataTableViewOptions
+  he as DataTableViewOptions
 };
-//# sourceMappingURL=data-table-view-options.js.map

package/dist/esm/components/Table/data-table.js

@@ -1,133 +1,100 @@
-import { jsxs as i, jsx as o } from "react/jsx-runtime";
-import { flexRender as p } from "@tanstack/react-table";
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import { flexRender as a } from "@tanstack/react-table";
 import { DataTablePagination as x } from "./data-table-pagination.js";
-import "@radix-ui/react-slot";
-import "../../packages/ui/src/components/button.js";
-import "../../packages/ui/src/components/button-group.js";
-import "../../packages/ui/src/components/input.js";
-import "../../packages/ui/src/components/textarea.js";
-import "@radix-ui/react-label";
-import { cn as a } from "../../packages/ui/src/lib/utils.js";
-import "../../packages/ui/src/components/select.js";
-import "../../packages/ui/src/components/combobox.js";
-import "@radix-ui/react-tooltip";
-import "react";
-import "lucide-react";
-import "react-day-picker";
-import "../../packages/ui/src/components/popover.js";
-import "@radix-ui/react-separator";
-import "../../packages/ui/src/components/switch.js";
-import "vaul";
-import "@radix-ui/react-scroll-area";
-import "../../packages/ui/src/components/tree-view.js";
-import "@radix-ui/react-alert-dialog";
-import "@radix-ui/react-avatar";
-import "../../packages/ui/src/components/badge.js";
-import "../../packages/ui/src/components/checkbox.js";
-import "@radix-ui/react-collapsible";
-import "cmdk";
-import "@radix-ui/react-dialog";
-import "@radix-ui/react-dropdown-menu";
-import "../../packages/ui/src/components/input-otp.js";
-import "../../packages/ui/src/components/radio-group.js";
-import "../../packages/ui/src/components/sidebar.js";
-import "@radix-ui/react-slider";
-import "../../packages/ui/src/components/tabs.js";
-import "../../packages/ui/src/components/toggle.js";
-import { Table as b, TableHeader as w, TableRow as t, TableHead as T, TableBody as C, TableCell as d } from "../../packages/ui/src/components/table.js";
-import { getCommonPinningStyles as u } from "../../utils/data-table.js";
+import { cn as u } from "../../packages/ui/src/lib/utils.js";
+import { Table as b, TableHeader as w, TableRow as n, TableHead as T, TableBody as C, TableCell as t } from "../../packages/ui/src/components/table.js";
+import { getCommonPinningStyles as f } from "../../utils/data-table.js";
 import { DataTableColumnHeader as y } from "./data-table-column-header.js";
-function po({
-  table: r,
-  actionBar: n,
-  children: f,
-  className: g,
-  pagination: m = !0,
+function k({
+  table: o,
+  actionBar: c,
+  children: g,
+  className: p,
+  pagination: s = !0,
   sticky: D,
   bordered: S,
-  loading: s,
-  footer: c,
+  loading: m,
+  footer: i,
   ...h
 }) {
-  return /* @__PURE__ */ i(
+  return /* @__PURE__ */ r(
     "div",
     {
-      className: a(
+      className: u(
         "ds:flex ds:w-full ds:flex-col ds:gap-2.5 ds:relative",
-        g
+        p
       ),
       ...h,
       children: [
-        f,
-        s && /* @__PURE__ */ o("div", { className: "ds:absolute ds:inset-0 ds:bg-background/50 ds:flex ds:items-center ds:justify-center ds:z-20", children: "Loading..." }),
-        /* @__PURE__ */ o(
+        g,
+        m && /* @__PURE__ */ e("div", { className: "ds:absolute ds:inset-0 ds:bg-background/50 ds:flex ds:items-center ds:justify-center ds:z-20", children: "Loading..." }),
+        /* @__PURE__ */ e(
           "div",
           {
-            className: a(
+            className: u(
               "ds:overflow-auto ds:rounded-md ds:border ds:border-border",
-              s && "ds:blur-sm"
+              m && "ds:blur-sm"
             ),
-            children: /* @__PURE__ */ i(b, { children: [
-              /* @__PURE__ */ o(w, { children: r.getHeaderGroups().map((l) => /* @__PURE__ */ o(t, { children: l.headers.map((e) => /* @__PURE__ */ o(
+            children: /* @__PURE__ */ r(b, { children: [
+              /* @__PURE__ */ e(w, { children: o.getHeaderGroups().map((d) => /* @__PURE__ */ e(n, { children: d.headers.map((l) => /* @__PURE__ */ e(
                 T,
                 {
-                  colSpan: e.colSpan,
+                  colSpan: l.colSpan,
                   style: {
-                    ...u({ column: e.column })
+                    ...f({ column: l.column })
                   },
-                  children: e.isPlaceholder ? null : e.column.columnDef.header ? typeof e.column.columnDef.header == "function" ? p(
-                    e.column.columnDef.header,
-                    e.getContext()
-                  ) : /* @__PURE__ */ o(y, { column: e.column }) : null
+                  children: l.isPlaceholder ? null : l.column.columnDef.header ? typeof l.column.columnDef.header == "function" ? a(
+                    l.column.columnDef.header,
+                    l.getContext()
+                  ) : /* @__PURE__ */ e(y, { column: l.column }) : null
                 },
-                e.id
-              )) }, l.id)) }),
-              /* @__PURE__ */ o(C, { children: r.getRowModel().rows?.length ? r.getRowModel().rows.map((l) => /* @__PURE__ */ o(
-                t,
+                l.id
+              )) }, d.id)) }),
+              /* @__PURE__ */ e(C, { children: o.getRowModel().rows?.length ? o.getRowModel().rows.map((d) => /* @__PURE__ */ e(
+                n,
                 {
-                  "data-state": l.getIsSelected() && "selected",
-                  children: l.getVisibleCells().map((e) => /* @__PURE__ */ o(
-                    d,
+                  "data-state": d.getIsSelected() && "selected",
+                  children: d.getVisibleCells().map((l) => /* @__PURE__ */ e(
+                    t,
                     {
                       style: {
-                        ...u({ column: e.column })
+                        ...f({ column: l.column })
                       },
-                      children: p(
-                        e.column.columnDef.cell,
-                        e.getContext()
+                      children: a(
+                        l.column.columnDef.cell,
+                        l.getContext()
                       )
                     },
-                    e.id
+                    l.id
                   ))
                 },
-                l.id
-              )) : /* @__PURE__ */ o(t, { children: /* @__PURE__ */ o(
-                d,
+                d.id
+              )) : /* @__PURE__ */ e(n, { children: /* @__PURE__ */ e(
+                t,
                 {
-                  colSpan: r.getAllColumns().length,
+                  colSpan: o.getAllColumns().length,
                   className: "ds:h-24 ds:text-center",
                   children: "No results."
                 }
               ) }) }),
-              c && /* @__PURE__ */ o("tfoot", { children: /* @__PURE__ */ o(t, { children: /* @__PURE__ */ o(d, { colSpan: r.getAllColumns().length, children: c(r.getRowModel().rows.map((l) => l.original)) }) }) })
+              i && /* @__PURE__ */ e("tfoot", { children: /* @__PURE__ */ e(n, { children: /* @__PURE__ */ e(t, { colSpan: o.getAllColumns().length, children: i(o.getRowModel().rows.map((d) => d.original)) }) }) })
             ] })
           }
         ),
-        /* @__PURE__ */ i("div", { className: "ds:flex ds:flex-col ds:gap-2.5", children: [
-          m && /* @__PURE__ */ o(
+        /* @__PURE__ */ r("div", { className: "ds:flex ds:flex-col ds:gap-2.5", children: [
+          s && /* @__PURE__ */ e(
             x,
             {
-              table: r,
-              ...m === !0 ? {} : m
+              table: o,
+              ...s === !0 ? {} : s
             }
           ),
-          n && r.getFilteredSelectedRowModel().rows.length > 0 && n
+          c && o.getFilteredSelectedRowModel().rows.length > 0 && c
         ] })
       ]
     }
   );
 }
 export {
-  po as DataTable
+  k as DataTable
 };
-//# sourceMappingURL=data-table.js.map

package/dist/esm/components/Table/index.js

@@ -0,0 +1,20 @@
+import { DataTable as o } from "./data-table.js";
+import { DataTableColumnHeader as t } from "./data-table-column-header.js";
+import { DataTablePagination as m } from "./data-table-pagination.js";
+import { DataTableToolbar as b } from "./data-table-toolbar.js";
+import { DataTableViewOptions as x } from "./data-table-view-options.js";
+import { selectColumn as T } from "./select-column.js";
+import { DataTableDateFilter as n } from "./TableFilter/data-table-date-filter.js";
+import { DataTableFilterPopover as d } from "./TableFilter/data-table-filter-popover.js";
+import { DataTableSliderFilter as u } from "./TableFilter/data-table-slider-filter.js";
+export {
+  o as DataTable,
+  t as DataTableColumnHeader,
+  n as DataTableDateFilter,
+  d as DataTableFilterPopover,
+  m as DataTablePagination,
+  u as DataTableSliderFilter,
+  b as DataTableToolbar,
+  x as DataTableViewOptions,
+  T as selectColumn
+};

package/dist/esm/components/Table/select-column.js

@@ -30,4 +30,3 @@ const i = n;
 export {
   i as selectColumn
 };
-//# sourceMappingURL=select-column.js.map

package/dist/esm/components/Tabs/Tabs.js

@@ -550,4 +550,3 @@ Me.displayName = "Tabs";
 export {
   Me as default
 };
-//# sourceMappingURL=Tabs.js.map