@sth87/shadcn-design-system 0.1.9 → 0.2.1

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

@@ -1,91 +1,61 @@
-import { jsxs as e, jsx as r } from "react/jsx-runtime";
-import { X as g, XCircle as h, PlusCircle as b } from "lucide-react";
-import * as m from "react";
+import { jsxs as r, jsx as t } from "react/jsx-runtime";
+import { X as p, XCircle as h, PlusCircle as b } from "lucide-react";
+import * as n from "react";
 import { DataTableFilterPopover as F } from "./TableFilter/data-table-filter-popover.js";
 import { DataTableViewOptions as v } from "./data-table-view-options.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 d from "../Button/Button.js";
 import { cn as x } 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 p from "../Button/Button.js";
-function ot({
-  table: t,
-  children: i,
-  className: a,
-  showColumnFilters: s = !1,
-  showColumnVisibilityToggle: l = !1,
-  columnVisibilityOptions: n,
-  ...d
+function V({
+  table: e,
+  children: s,
+  className: i,
+  showColumnFilters: l = !1,
+  showColumnVisibilityToggle: o = !1,
+  columnVisibilityOptions: m,
+  ...c
 }) {
-  const c = t.getState().columnFilters.length > 0, f = m.useMemo(
-    () => t.getAllColumns().filter((o) => o.getCanFilter()),
-    [t]
-  ), u = m.useCallback(() => {
-    t.resetColumnFilters();
-  }, [t]);
-  return /* @__PURE__ */ e(
+  const f = e.getState().columnFilters.length > 0, u = n.useMemo(
+    () => e.getAllColumns().filter((a) => a.getCanFilter()),
+    [e]
+  ), g = n.useCallback(() => {
+    e.resetColumnFilters();
+  }, [e]);
+  return /* @__PURE__ */ r(
     "div",
     {
       role: "toolbar",
       "aria-orientation": "horizontal",
       className: x(
         "ds:flex ds:w-full ds:items-start ds:justify-between ds:gap-2 ds:p-1",
-        a
+        i
       ),
-      ...d,
+      ...c,
       children: [
-        s ? /* @__PURE__ */ e("div", { className: "ds:flex ds:flex-1 ds:flex-wrap ds:items-center ds:justify-start ds:gap-2", children: [
-          f.map((o) => /* @__PURE__ */ r(T, { column: o }, o.id)),
-          c && /* @__PURE__ */ e(
-            p,
+        l ? /* @__PURE__ */ r("div", { className: "ds:flex ds:flex-1 ds:flex-wrap ds:items-center ds:justify-start ds:gap-2", children: [
+          u.map((a) => /* @__PURE__ */ t(T, { column: a }, a.id)),
+          f && /* @__PURE__ */ r(
+            d,
             {
               "aria-label": "Reset filters",
               variant: "outline",
               size: "sm",
               className: "ds:border-dashed",
-              onClick: u,
+              onClick: g,
               children: [
-                /* @__PURE__ */ r(g, {}),
+                /* @__PURE__ */ t(p, {}),
                 "Reset"
               ]
             }
           )
-        ] }) : /* @__PURE__ */ r("div", {}),
-        /* @__PURE__ */ e("div", { className: "ds:flex ds:items-center ds:gap-2", children: [
-          i,
-          l && /* @__PURE__ */ r(
+        ] }) : /* @__PURE__ */ t("div", {}),
+        /* @__PURE__ */ r("div", { className: "ds:flex ds:items-center ds:gap-2", children: [
+          s,
+          o && /* @__PURE__ */ t(
             v,
             {
-              table: t,
+              table: e,
               align: "end",
-              ...n
+              ...m
             }
           )
         ] })
@@ -94,23 +64,22 @@ function ot({
   );
 }
 function T({
-  column: t
+  column: e
 }) {
-  const i = t.columnDef.meta;
-  if (!i?.variant) return null;
-  const s = t.getFilterValue() != null ? /* @__PURE__ */ r(h, {}) : /* @__PURE__ */ r(b, {});
-  return /* @__PURE__ */ r(
+  const s = e.columnDef.meta;
+  if (!s?.variant) return null;
+  const l = e.getFilterValue() != null ? /* @__PURE__ */ t(h, {}) : /* @__PURE__ */ t(b, {});
+  return /* @__PURE__ */ t(
     F,
     {
-      column: t,
-      trigger: /* @__PURE__ */ e(p, { variant: "outline", size: "sm", className: "ds:border-dashed", children: [
-        s,
-        i.label ?? t.id
+      column: e,
+      trigger: /* @__PURE__ */ r(d, { variant: "outline", size: "sm", className: "ds:border-dashed", children: [
+        l,
+        s.label ?? e.id
       ] })
     }
   );
 }
 export {
-  ot as DataTableToolbar
+  V as DataTableToolbar
 };
-//# sourceMappingURL=data-table-toolbar.js.map

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