@sth87/shadcn-design-system 0.1.8 → 0.2.0

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

@@ -1,113 +1,81 @@
-import { jsx as e, jsxs as d } from "react/jsx-runtime";
-import { ChevronDown as a, ChevronUp as p, ChevronsUpDown as c, Filter as m, X as f, EyeOff as h } from "lucide-react";
-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 { jsx as s, jsxs as a } from "react/jsx-runtime";
+import { ChevronDown as o, ChevronUp as n, ChevronsUpDown as p, Filter as f, X as h, EyeOff as v } from "lucide-react";
 import { cn as r } 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 "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 v from "../DropdownMenu/DropdownMenu.js";
+import m from "../DropdownMenu/DropdownMenu.js";
 import { DataTableFilterPopover as u } from "./TableFilter/data-table-filter-popover.js";
 import b from "../Button/Button.js";
-function rt({
-  column: t,
-  label: n,
-  className: i
+function _({
+  column: e,
+  label: g,
+  className: d
 }) {
-  const o = n || (typeof t.columnDef.header == "string" ? t.columnDef.header : null);
-  if (!(t.getCanSort() || t.getCanHide() || t.getCanFilter()))
-    return /* @__PURE__ */ e("div", { className: r(i), children: o });
-  const g = /* @__PURE__ */ d("button", { className: "ds:-ml-1.5 ds:flex ds:h-8 ds:items-center ds:gap-1.5 ds:rounded-md ds:px-2 ds:py-1.5 ds:hover:bg-accent ds:focus:outline-none ds:focus:ring-1 ds:focus:ring-ring ds:data-[state=open]:bg-accent ds:[&_svg]:size-4 ds:[&_svg]:shrink-0 ds:[&_svg]:text-muted-foreground", children: [
-    o,
-    t.getCanSort() && (t.getIsSorted() === "desc" ? /* @__PURE__ */ e(a, {}) : t.getIsSorted() === "asc" ? /* @__PURE__ */ e(p, {}) : /* @__PURE__ */ e(c, {}))
-  ] }), l = t.getCanFilter() && t.columnDef.meta?.variant ? /* @__PURE__ */ e(
+  const i = g || (typeof e.columnDef.header == "string" ? e.columnDef.header : null);
+  if (!(e.getCanSort() || e.getCanHide() || e.getCanFilter()))
+    return /* @__PURE__ */ s("div", { className: r(d), children: i });
+  const l = /* @__PURE__ */ a("button", { className: "ds:-ml-1.5 ds:flex ds:h-8 ds:items-center ds:gap-1.5 ds:rounded-md ds:px-2 ds:py-1.5 ds:hover:bg-accent ds:focus:outline-none ds:focus:ring-1 ds:focus:ring-ring ds:data-[state=open]:bg-accent ds:[&_svg]:size-4 ds:[&_svg]:shrink-0 ds:[&_svg]:text-muted-foreground", children: [
+    i,
+    e.getCanSort() && (e.getIsSorted() === "desc" ? /* @__PURE__ */ s(o, {}) : e.getIsSorted() === "asc" ? /* @__PURE__ */ s(n, {}) : /* @__PURE__ */ s(p, {}))
+  ] }), c = e.getCanFilter() && e.columnDef.meta?.variant ? /* @__PURE__ */ s(
     u,
     {
-      column: t,
-      trigger: /* @__PURE__ */ e(
+      column: e,
+      trigger: /* @__PURE__ */ s(
         b,
         {
           variant: "ghost",
           className: r(
             "ds:hover:bg-accent ds:rounded ds:p-1",
-            t.getFilterValue() ? "ds:text-primary" : ""
+            e.getFilterValue() ? "ds:text-primary" : ""
           ),
-          children: /* @__PURE__ */ e(m, { className: "ds:size-4" })
+          children: /* @__PURE__ */ s(f, { className: "ds:size-4" })
         }
       )
     }
-  ) : null, s = [];
-  return t.getCanSort() && (s.push({
+  ) : null, t = [];
+  return e.getCanSort() && (t.push({
     key: "asc",
     type: "checkbox",
     label: "Asc",
-    icon: /* @__PURE__ */ e(p, {}),
-    checked: t.getIsSorted() === "asc",
-    onClick: () => t.toggleSorting(!1),
+    icon: /* @__PURE__ */ s(n, {}),
+    checked: e.getIsSorted() === "asc",
+    onClick: () => e.toggleSorting(!1),
     className: "ds:relative ds:pr-8 ds:pl-2 ds:[&>span:first-child]:right-2 ds:[&>span:first-child]:left-auto ds:[&_svg]:text-muted-foreground"
-  }), s.push({
+  }), t.push({
     key: "desc",
     type: "checkbox",
     label: "Desc",
-    icon: /* @__PURE__ */ e(a, {}),
-    checked: t.getIsSorted() === "desc",
-    onClick: () => t.toggleSorting(!0),
+    icon: /* @__PURE__ */ s(o, {}),
+    checked: e.getIsSorted() === "desc",
+    onClick: () => e.toggleSorting(!0),
     className: "ds:relative ds:pr-8 ds:pl-2 ds:[&>span:first-child]:right-2 ds:[&>span:first-child]:left-auto ds:[&_svg]:text-muted-foreground"
-  }), t.getIsSorted() && s.push({
+  }), e.getIsSorted() && t.push({
     key: "reset",
     type: "item",
     label: "Reset",
-    icon: /* @__PURE__ */ e(f, {}),
-    onClick: () => t.clearSorting(),
+    icon: /* @__PURE__ */ s(h, {}),
+    onClick: () => e.clearSorting(),
     className: "ds:pl-2 ds:[&_svg]:text-muted-foreground"
-  })), t.getCanHide() && s.push({
+  })), e.getCanHide() && t.push({
     key: "hide",
     type: "checkbox",
     label: "Hide",
-    icon: /* @__PURE__ */ e(h, {}),
-    checked: !t.getIsVisible(),
-    onClick: () => t.toggleVisibility(!1),
+    icon: /* @__PURE__ */ s(v, {}),
+    checked: !e.getIsVisible(),
+    onClick: () => e.toggleVisibility(!1),
     className: "ds:relative ds:pr-8 ds:pl-2 ds:[&>span:first-child]:right-2 ds:[&>span:first-child]:left-auto ds:[&_svg]:text-muted-foreground"
-  }), /* @__PURE__ */ d("div", { className: r("ds:flex ds:items-center ds:gap-1.5", i), children: [
-    /* @__PURE__ */ e(
-      v,
+  }), /* @__PURE__ */ a("div", { className: r("ds:flex ds:items-center ds:gap-1.5", d), children: [
+    /* @__PURE__ */ s(
+      m,
       {
-        trigger: g,
-        items: s,
+        trigger: l,
+        items: t,
         align: "start",
         contentClassName: "ds:w-28"
       }
     ),
-    l
+    c
   ] });
 }
 export {
-  rt as DataTableColumnHeader
+  _ as DataTableColumnHeader
 };
-//# sourceMappingURL=data-table-column-header.js.map

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

@@ -1,79 +1,47 @@
-import { jsxs as o, jsx as r, Fragment as l } from "react/jsx-runtime";
-import { Pagination as g } from "../Pagination/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 f } 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 c from "../Select/Select.js";
-function Z({
+import { jsxs as t, jsx as a, Fragment as m } from "react/jsx-runtime";
+import f from "../Select/Select.js";
+import { Pagination as p } from "../Pagination/index.js";
+import { cn as c } from "../../packages/ui/src/lib/utils.js";
+function v({
   table: e,
-  pageSizeOptions: i = [5, 10, 20, 30, 40, 50, 100],
-  className: s,
-  showPageInfo: m = !1,
-  showPageSizeOptions: p = !1,
-  showRowSelectionCount: a = !1,
-  showPagination: d = !0,
-  ...n
+  pageSizeOptions: d = [5, 10, 20, 30, 40, 50, 100],
+  className: o,
+  showPageInfo: r = !1,
+  showPageSizeOptions: n = !1,
+  showRowSelectionCount: i = !1,
+  showPagination: l = !0,
+  ...g
 }) {
-  return /* @__PURE__ */ o(
+  return /* @__PURE__ */ t(
     "div",
     {
-      className: f(
+      className: c(
         "ds:flex ds:w-full ds:flex-col-reverse ds:items-center ds:justify-between ds:gap-4 ds:overflow-auto ds:p-1 ds:sm:flex-row ds:sm:gap-8",
-        s
+        o
       ),
-      ...n,
+      ...g,
       children: [
-        /* @__PURE__ */ r("div", { className: "ds:flex-1 ds:whitespace-nowrap ds:text-muted-foreground ds:text-sm", children: a && /* @__PURE__ */ o(l, { children: [
+        /* @__PURE__ */ a("div", { className: "ds:flex-1 ds:whitespace-nowrap ds:text-muted-foreground ds:text-sm", children: i && /* @__PURE__ */ t(m, { children: [
           e.getFilteredSelectedRowModel().rows.length,
           " of",
           " ",
           e.getFilteredRowModel().rows.length,
           " row(s) selected."
         ] }) }),
-        /* @__PURE__ */ o("div", { className: "ds:flex ds:flex-col-reverse ds:items-center ds:gap-2 ds:sm:flex-row ds:sm:gap-2 ds:lg:gap-4", children: [
-          m && /* @__PURE__ */ o("div", { className: "ds:flex ds:items-center ds:justify-center ds:font-medium ds:text-sm", children: [
+        /* @__PURE__ */ t("div", { className: "ds:flex ds:flex-col-reverse ds:items-center ds:gap-2 ds:sm:flex-row ds:sm:gap-2 ds:lg:gap-4", children: [
+          r && /* @__PURE__ */ t("div", { className: "ds:flex ds:items-center ds:justify-center ds:font-medium ds:text-sm", children: [
             "Page ",
             e.getState().pagination.pageIndex + 1,
             " of",
             " ",
             e.getPageCount()
           ] }),
-          d && /* @__PURE__ */ r(
-            g,
+          l && /* @__PURE__ */ a(
+            p,
             {
               total: e.getPageCount(),
               currentPage: e.getState().pagination.pageIndex + 1,
-              onPageChange: (t) => e.setPageIndex(t - 1),
+              onPageChange: (s) => e.setPageIndex(s - 1),
               maxPages: 3,
               previousText: !1,
               nextText: !1,
@@ -81,16 +49,16 @@ function Z({
               showPreviousNext: !0
             }
           ),
-          p && /* @__PURE__ */ r(
-            c,
+          n && /* @__PURE__ */ a(
+            f,
             {
               value: `${e.getState().pagination.pageSize}`,
-              onValueChange: (t) => {
-                e.setPageSize(Number(t));
+              onValueChange: (s) => {
+                e.setPageSize(Number(s));
               },
-              options: i.map((t) => ({
-                value: `${t}`,
-                label: `${t} / page`
+              options: d.map((s) => ({
+                value: `${s}`,
+                label: `${s} / page`
               }))
             }
           )
@@ -100,6 +68,5 @@ function Z({
   );
 }
 export {
-  Z as DataTablePagination
+  v as DataTablePagination
 };
-//# sourceMappingURL=data-table-pagination.js.map

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