@wealthx/shadcn 1.1.0 → 1.2.0

package/dist/components/ui/combobox.mjs

@@ -10,8 +10,8 @@ import {
   ComboboxSeparator,
   ComboboxTrigger,
   ComboboxValue
-} from "../../chunk-YBXCIF5Q.mjs";
-import "../../chunk-V7CNWJT3.mjs";
+} from "../../chunk-ERGGHC2V.mjs";
+import "../../chunk-VLQZANBF.mjs";
 import "../../chunk-FWCSY2DS.mjs";
 export {
   Combobox,

package/dist/components/ui/data-table.js

@@ -1,5 +1,4 @@
 "use strict";
-"use client";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
@@ -75,8 +74,40 @@ var import_lucide_react5 = require("lucide-react");
 // src/lib/utils.ts
 var import_clsx = require("clsx");
 var import_tailwind_merge = require("tailwind-merge");
+var twMerge = (0, import_tailwind_merge.extendTailwindMerge)({
+  extend: {
+    classGroups: {
+      "font-size": [
+        {
+          text: [
+            "display-large",
+            "display-medium",
+            "display-small",
+            "h1",
+            "h2",
+            "h3",
+            "h4",
+            "h5",
+            "h6",
+            "body-large",
+            "body-medium",
+            "body-small",
+            "label-large",
+            "label-medium",
+            "label-small",
+            "button",
+            "button-xs",
+            "caption",
+            "overline",
+            "code"
+          ]
+        }
+      ]
+    }
+  }
+});
 function cn(...inputs) {
-  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+  return twMerge((0, import_clsx.clsx)(inputs));
 }
 
 // src/components/ui/table.tsx
@@ -91,7 +122,7 @@ function Table(_a) {
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         "table",
         __spreadValues({
-          className: cn("w-full caption-bottom text-sm", className),
+          className: cn("w-full caption-bottom text-body-small", className),
           "data-slot": "table"
         }, props)
       )
@@ -137,7 +168,7 @@ function TableHead(_a) {
     "th",
     __spreadValues({
       className: cn(
-        "h-10 px-4 text-left align-middle font-medium whitespace-nowrap text-muted-foreground",
+        "h-10 px-4 text-left align-middle text-label-medium whitespace-nowrap text-muted-foreground",
         "[&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
         className
       ),
@@ -168,7 +199,7 @@ function Input(_a) {
     "input",
     __spreadValues({
       className: cn(
-        "h-9 w-full min-w-0 border border-input bg-transparent px-3 py-1 text-base font-sans shadow-xs transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30",
+        "h-9 w-full min-w-0 border border-input bg-transparent px-3 py-1 text-body-medium font-sans shadow-xs transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-label-medium file:text-foreground placeholder:font-normal placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 dark:bg-input/30",
         "focus-visible:border-primary focus-visible:ring-[3px] focus-visible:ring-primary/20",
         "aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40",
         className
@@ -234,7 +265,7 @@ Slot.displayName = "Slot";
 // src/components/ui/button.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var buttonVariants = (0, import_class_variance_authority.cva)(
-  "inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 font-sans text-sm font-medium whitespace-nowrap transition-all active:scale-[0.98] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  "inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 font-sans text-button whitespace-nowrap transition-all active:scale-[0.98] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
   {
     variants: {
       variant: {
@@ -249,7 +280,7 @@ var buttonVariants = (0, import_class_variance_authority.cva)(
       },
       size: {
         default: "h-9 px-4 py-2 has-[>svg]:px-3",
-        xs: "h-6 gap-1 px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
+        xs: "h-6 gap-1 px-2 text-button-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
         sm: "h-8 gap-1.5 px-3 has-[>svg]:px-2.5",
         lg: "h-10 px-6 has-[>svg]:px-4",
         icon: "size-9",
@@ -316,7 +347,7 @@ function Checkbox(_a) {
     import_checkbox.Checkbox.Root,
     __spreadProps(__spreadValues({
       className: cn(
-        "peer group inline-flex size-4 shrink-0 rounded-[4px] border border-input shadow-xs transition-all outline-none",
+        "peer group inline-flex size-4 shrink-0 border border-input shadow-xs transition-all outline-none",
         "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
         "disabled:cursor-not-allowed disabled:opacity-50",
         "aria-invalid:border-destructive aria-invalid:ring-destructive/20",
@@ -382,7 +413,7 @@ function SelectTrigger(_a) {
     import_select.Select.Trigger,
     __spreadProps(__spreadValues({
       className: cn(
-        "flex w-fit items-center justify-between gap-2 border border-input bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-primary focus-visible:ring-[3px] focus-visible:ring-primary/20 data-popup-open:border-primary data-popup-open:ring-[3px] data-popup-open:ring-primary/20 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
+        "flex w-fit items-center justify-between gap-2 border border-input bg-transparent px-3 py-2 text-body-medium whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-primary focus-visible:ring-[3px] focus-visible:ring-primary/20 data-popup-open:border-primary data-popup-open:ring-[3px] data-popup-open:ring-primary/20 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-placeholder:font-normal data-placeholder:text-muted-foreground data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
         className
       ),
       "data-size": size,
@@ -406,23 +437,32 @@ function SelectContent(_a) {
     "style"
   ]);
   const themeVars = useThemeVars();
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_select.Select.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_select.Select.Positioner, { align: "start", alignItemWithTrigger: false, sideOffset: 4, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
-    import_select.Select.Popup,
-    __spreadProps(__spreadValues({
-      className: cn(
-        "relative z-50 max-h-[var(--available-height)] min-w-[8rem] overflow-x-hidden overflow-y-auto border bg-popover p-1 text-popover-foreground shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-ending-style:animate-out data-ending-style:fade-out-0 data-ending-style:zoom-out-95 data-ending-style:fill-mode-forwards data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95",
-        className
-      ),
-      "data-slot": "select-content",
-      style: __spreadValues(__spreadValues({}, themeVars), style)
-    }, props), {
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SelectScrollUpButton, {}),
-        children,
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SelectScrollDownButton, {})
-      ]
-    })
-  ) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_select.Select.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    import_select.Select.Positioner,
+    {
+      className: "z-[200]",
+      align: "start",
+      alignItemWithTrigger: false,
+      sideOffset: 4,
+      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+        import_select.Select.Popup,
+        __spreadProps(__spreadValues({
+          className: cn(
+            "relative max-h-[var(--available-height)] min-w-[var(--anchor-width,8rem)] overflow-x-hidden overflow-y-auto border bg-popover p-1 text-popover-foreground shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-ending-style:animate-out data-ending-style:fade-out-0 data-ending-style:zoom-out-95 data-ending-style:fill-mode-forwards data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95",
+            className
+          ),
+          "data-slot": "select-content",
+          style: __spreadValues(__spreadValues({}, themeVars), style)
+        }, props), {
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SelectScrollUpButton, {}),
+            children,
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SelectScrollDownButton, {})
+          ]
+        })
+      )
+    }
+  ) });
 }
 function SelectItem(_a) {
   var _b = _a, {
@@ -436,7 +476,7 @@ function SelectItem(_a) {
     import_select.Select.Item,
     __spreadProps(__spreadValues({
       className: cn(
-        "relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-highlighted:bg-primary/5 data-highlighted:text-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        "relative flex w-full cursor-default items-center gap-2 py-1.5 pr-8 pl-2 text-body-small outline-hidden select-none data-highlighted:bg-primary/5 data-highlighted:text-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
         className
       ),
       "data-slot": "select-item"
@@ -504,12 +544,7 @@ function DropdownMenu(_a) {
 }
 function DropdownMenuTrigger(_a) {
   var props = __objRest(_a, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-    import_menu.Menu.Trigger,
-    __spreadValues({
-      "data-slot": "dropdown-menu-trigger"
-    }, props)
-  );
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_menu.Menu.Trigger, __spreadValues({ "data-slot": "dropdown-menu-trigger" }, props));
 }
 function DropdownMenuContent(_a) {
   var _b = _a, {
@@ -553,7 +588,7 @@ function DropdownMenuCheckboxItem(_a) {
     __spreadProps(__spreadValues({
       checked,
       className: cn(
-        "relative flex cursor-default items-center gap-2 rounded-none py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 data-checked:bg-primary/10 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative flex cursor-default items-center gap-2 rounded-none py-1.5 pr-2 pl-8 text-body-small outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 data-checked:bg-primary/10 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       ),
       "data-slot": "dropdown-menu-checkbox-item"
@@ -576,10 +611,7 @@ function DropdownMenuLabel(_a) {
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     import_menu.Menu.GroupLabel,
     __spreadValues({
-      className: cn(
-        "px-2 py-1.5 text-sm font-medium data-inset:pl-8",
-        className
-      ),
+      className: cn("px-2 py-1.5 text-label-medium data-inset:pl-8", className),
       "data-inset": inset,
       "data-slot": "dropdown-menu-label"
     }, props)
@@ -635,7 +667,10 @@ function DataTableColumnHeader({
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
     Button,
     {
-      className: cn("-ml-3 h-8 font-medium text-muted-foreground hover:text-foreground", className),
+      className: cn(
+        "-ml-3 h-8 text-muted-foreground hover:text-foreground",
+        className
+      ),
       onClick: () => {
         column.toggleSorting(sorted === "asc");
       },
@@ -683,48 +718,62 @@ function DataTableToolbar({
   enableColumnVisibility
 }) {
   var _a;
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center justify-between gap-2 py-4", "data-slot": "data-table-toolbar", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex flex-1 items-center gap-2", children: searchKey ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-      Input,
-      {
-        className: "max-w-xs",
-        onChange: (e) => {
-          var _a2;
-          return (_a2 = table.getColumn(searchKey)) == null ? void 0 : _a2.setFilterValue(e.target.value);
-        },
-        placeholder: searchPlaceholder != null ? searchPlaceholder : `Filter ${searchKey}...`,
-        value: (_a = table.getColumn(searchKey)) == null ? void 0 : _a.getFilterValue()
-      }
-    ) : null }),
-    enableColumnVisibility ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(DropdownMenu, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
-        DropdownMenuTrigger,
-        {
-          render: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Button, { className: "ml-auto h-8 gap-1.5", size: "sm", variant: "outline" }),
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react5.SlidersHorizontal, { className: "size-3.5" }),
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "hidden sm:inline", children: "Columns" })
-          ]
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DropdownMenuContent, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(DropdownMenuGroup, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DropdownMenuLabel, { children: "Toggle columns" }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DropdownMenuSeparator, {}),
-        table.getAllColumns().filter((col) => col.getCanHide()).map((col) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-          DropdownMenuCheckboxItem,
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+    "div",
+    {
+      className: "flex items-center justify-between gap-2 py-4",
+      "data-slot": "data-table-toolbar",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex flex-1 items-center gap-2", children: searchKey ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          Input,
           {
-            checked: col.getIsVisible(),
-            className: "capitalize",
-            onCheckedChange: (value) => {
-              col.toggleVisibility(Boolean(value));
+            className: "max-w-xs",
+            onChange: (e) => {
+              var _a2;
+              return (_a2 = table.getColumn(searchKey)) == null ? void 0 : _a2.setFilterValue(e.target.value);
             },
-            children: col.id
-          },
-          col.id
-        ))
-      ] }) })
-    ] }) : null
-  ] });
+            placeholder: searchPlaceholder != null ? searchPlaceholder : `Filter ${searchKey}...`,
+            value: (_a = table.getColumn(searchKey)) == null ? void 0 : _a.getFilterValue()
+          }
+        ) : null }),
+        enableColumnVisibility ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(DropdownMenu, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+            DropdownMenuTrigger,
+            {
+              render: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                Button,
+                {
+                  className: "ml-auto h-8 gap-1.5",
+                  size: "sm",
+                  variant: "outline"
+                }
+              ),
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react5.SlidersHorizontal, { className: "size-3.5" }),
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "hidden sm:inline", children: "Columns" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DropdownMenuContent, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(DropdownMenuGroup, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DropdownMenuLabel, { children: "Toggle columns" }),
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DropdownMenuSeparator, {}),
+            table.getAllColumns().filter((col) => col.getCanHide()).map((col) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+              DropdownMenuCheckboxItem,
+              {
+                checked: col.getIsVisible(),
+                className: "capitalize",
+                onCheckedChange: (value) => {
+                  col.toggleVisibility(Boolean(value));
+                },
+                children: col.id
+              },
+              col.id
+            ))
+          ] }) })
+        ] }) : null
+      ]
+    }
+  );
 }
 function DataTablePagination({
   table,
@@ -736,7 +785,7 @@ function DataTablePagination({
       className: "flex items-center justify-between gap-4 py-4",
       "data-slot": "data-table-pagination",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "text-sm text-muted-foreground", children: table.getFilteredSelectedRowModel().rows.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "text-body-small text-muted-foreground", children: table.getFilteredSelectedRowModel().rows.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
           table.getFilteredSelectedRowModel().rows.length,
           " of",
           " ",
@@ -745,7 +794,7 @@ function DataTablePagination({
         ] }) }),
         /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center gap-6", children: [
           /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "text-sm text-muted-foreground whitespace-nowrap", children: "Rows per page" }),
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "text-body-small text-muted-foreground whitespace-nowrap", children: "Rows per page" }),
             /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
               Select,
               {
@@ -754,16 +803,22 @@ function DataTablePagination({
                 },
                 value: `${table.getState().pagination.pageSize}`,
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SelectTrigger, { className: "w-[70px]", size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SelectValue, { placeholder: `${table.getState().pagination.pageSize}` }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SelectTrigger, { className: "w-[70px]", size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                    SelectValue,
+                    {
+                      placeholder: `${table.getState().pagination.pageSize}`
+                    }
+                  ) }),
                   /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SelectContent, { children: pageSizeOptions.map((pageSize) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SelectItem, { value: `${pageSize}`, children: pageSize }, pageSize)) })
                 ]
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("p", { className: "text-sm text-muted-foreground whitespace-nowrap", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("p", { className: "text-body-small text-muted-foreground whitespace-nowrap", children: [
             "Page ",
             table.getState().pagination.pageIndex + 1,
-            " of ",
+            " of",
+            " ",
             table.getPageCount()
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center gap-1", children: [
@@ -829,7 +884,13 @@ function DataTableSkeleton({
   columnCount,
   rowCount = 5
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, { children: Array.from({ length: rowCount }).map((_, rowIdx) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TableRow, { children: Array.from({ length: columnCount }).map((_inner, colIdx) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TableCell, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Skeleton, { className: "h-4 w-3/4" }) }, `skeleton-cell-${String(rowIdx)}-${String(colIdx)}`)) }, `skeleton-row-${String(rowIdx)}`)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, { children: Array.from({ length: rowCount }).map((_, rowIdx) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TableRow, { children: Array.from({ length: columnCount }).map((_inner, colIdx) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    TableCell,
+    {
+      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Skeleton, { className: "h-4 w-3/4" })
+    },
+    `skeleton-cell-${String(rowIdx)}-${String(colIdx)}`
+  )) }, `skeleton-row-${String(rowIdx)}`)) });
 }
 function DataTable({
   columns: userColumns,
@@ -847,7 +908,9 @@ function DataTable({
   emptyText = "No results."
 }) {
   const [sorting, setSorting] = React3.useState([]);
-  const [columnFilters, setColumnFilters] = React3.useState([]);
+  const [columnFilters, setColumnFilters] = React3.useState(
+    []
+  );
   const [columnVisibility, setColumnVisibility] = React3.useState({});
   const [rowSelection, setRowSelection] = React3.useState({});
   const resolvedColumns = React3.useMemo(() => {
@@ -879,7 +942,13 @@ function DataTable({
   });
   function renderTableBody() {
     if (loading) {
-      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DataTableSkeleton, { columnCount: resolvedColumns.length, rowCount: skeletonRows });
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        DataTableSkeleton,
+        {
+          columnCount: resolvedColumns.length,
+          rowCount: skeletonRows
+        }
+      );
     }
     if (table.getRowModel().rows.length) {
       return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, { children: table.getRowModel().rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
@@ -911,7 +980,10 @@ function DataTable({
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "border border-border", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Table, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TableRow, { children: headerGroup.headers.map((header) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TableHead, { children: header.isPlaceholder ? null : (0, import_react_table.flexRender)(header.column.columnDef.header, header.getContext()) }, header.id)) }, headerGroup.id)) }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TableRow, { children: headerGroup.headers.map((header) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TableHead, { children: header.isPlaceholder ? null : (0, import_react_table.flexRender)(
+        header.column.columnDef.header,
+        header.getContext()
+      ) }, header.id)) }, headerGroup.id)) }),
       /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TableBody, { children: renderTableBody() })
     ] }) }),
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DataTablePagination, { pageSizeOptions, table })

package/dist/components/ui/data-table.mjs

@@ -1,4 +1,3 @@
-"use client";
 import {
   DataTable,
   DataTableColumnHeader,
@@ -6,18 +5,18 @@ import {
   DataTableSkeleton,
   DataTableToolbar,
   getSelectionColumn
-} from "../../chunk-CJ46PDXE.mjs";
-import "../../chunk-BGP2N52Z.mjs";
-import "../../chunk-VZ2NR7L3.mjs";
-import "../../chunk-DS2AMHN2.mjs";
-import "../../chunk-MJIEMGRD.mjs";
-import "../../chunk-HS7TFG7V.mjs";
-import "../../chunk-JF4PHPD5.mjs";
-import "../../chunk-4AJ5HWHD.mjs";
+} from "../../chunk-ZRO5JO3H.mjs";
+import "../../chunk-66MI7Q4B.mjs";
+import "../../chunk-EFRENWEJ.mjs";
+import "../../chunk-D6ID6M4V.mjs";
+import "../../chunk-7PYJD5JI.mjs";
+import "../../chunk-RGVKLTLH.mjs";
+import "../../chunk-GYMYRIZP.mjs";
+import "../../chunk-2I5S2AMY.mjs";
 import "../../chunk-DBHJ5KC3.mjs";
-import "../../chunk-OXQQNQZI.mjs";
+import "../../chunk-FEZKMUCF.mjs";
 import "../../chunk-QOJ2DQD6.mjs";
-import "../../chunk-V7CNWJT3.mjs";
+import "../../chunk-VLQZANBF.mjs";
 import "../../chunk-FWCSY2DS.mjs";
 export {
   DataTable,

package/dist/components/ui/date-picker.js

@@ -1,5 +1,4 @@
 "use strict";
-"use client";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
@@ -70,8 +69,40 @@ var import_lucide_react3 = require("lucide-react");
 // src/lib/utils.ts
 var import_clsx = require("clsx");
 var import_tailwind_merge = require("tailwind-merge");
+var twMerge = (0, import_tailwind_merge.extendTailwindMerge)({
+  extend: {
+    classGroups: {
+      "font-size": [
+        {
+          text: [
+            "display-large",
+            "display-medium",
+            "display-small",
+            "h1",
+            "h2",
+            "h3",
+            "h4",
+            "h5",
+            "h6",
+            "body-large",
+            "body-medium",
+            "body-small",
+            "label-large",
+            "label-medium",
+            "label-small",
+            "button",
+            "button-xs",
+            "caption",
+            "overline",
+            "code"
+          ]
+        }
+      ]
+    }
+  }
+});
 function cn(...inputs) {
-  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+  return twMerge((0, import_clsx.clsx)(inputs));
 }
 
 // src/components/ui/button.tsx
@@ -129,7 +160,7 @@ Slot.displayName = "Slot";
 // src/components/ui/button.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var buttonVariants = (0, import_class_variance_authority.cva)(
-  "inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 font-sans text-sm font-medium whitespace-nowrap transition-all active:scale-[0.98] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  "inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 font-sans text-button whitespace-nowrap transition-all active:scale-[0.98] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
   {
     variants: {
       variant: {
@@ -144,7 +175,7 @@ var buttonVariants = (0, import_class_variance_authority.cva)(
       },
       size: {
         default: "h-9 px-4 py-2 has-[>svg]:px-3",
-        xs: "h-6 gap-1 px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
+        xs: "h-6 gap-1 px-2 text-button-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
         sm: "h-8 gap-1.5 px-3 has-[>svg]:px-2.5",
         lg: "h-10 px-6 has-[>svg]:px-4",
         icon: "size-9",
@@ -234,12 +265,7 @@ function CalendarChevron(_a) {
     return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react2.ChevronLeftIcon, __spreadValues({ className: cn("size-4", className) }, props));
   }
   if (orientation === "right") {
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-      import_lucide_react2.ChevronRightIcon,
-      __spreadValues({
-        className: cn("size-4", className)
-      }, props)
-    );
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react2.ChevronRightIcon, __spreadValues({ className: cn("size-4", className) }, props));
   }
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react2.ChevronDownIcon, __spreadValues({ className: cn("size-4", className) }, props));
 }
@@ -306,7 +332,7 @@ function Calendar(_a) {
           defaultClassNames.month_caption
         ),
         dropdowns: cn(
-          "flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium",
+          "flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-label-small",
           defaultClassNames.dropdowns
         ),
         dropdown_root: cn(
@@ -318,14 +344,14 @@ function Calendar(_a) {
           defaultClassNames.dropdown
         ),
         caption_label: cn(
-          "font-medium select-none",
-          captionLayout === "label" ? "text-sm" : "flex h-8 items-center gap-1 pr-1 pl-2 text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground",
+          "select-none",
+          captionLayout === "label" ? "text-label-small" : "flex h-8 items-center gap-1 pr-1 pl-2 text-label-small [&>svg]:size-3.5 [&>svg]:text-muted-foreground",
           defaultClassNames.caption_label
         ),
         table: "w-full border-collapse",
         weekdays: cn("flex", defaultClassNames.weekdays),
         weekday: cn(
-          "flex-1 text-[0.8rem] font-normal text-muted-foreground select-none",
+          "flex-1 text-caption font-normal text-muted-foreground select-none",
           defaultClassNames.weekday
         ),
         week: cn("mt-2 flex w-full", defaultClassNames.week),
@@ -334,7 +360,7 @@ function Calendar(_a) {
           defaultClassNames.week_number_header
         ),
         week_number: cn(
-          "text-[0.8rem] text-muted-foreground select-none",
+          "text-caption text-muted-foreground select-none",
           defaultClassNames.week_number
         ),
         day: cn(
@@ -344,10 +370,7 @@ function Calendar(_a) {
         range_start: cn("bg-accent", defaultClassNames.range_start),
         range_middle: cn("rounded-none", defaultClassNames.range_middle),
         range_end: cn("bg-accent", defaultClassNames.range_end),
-        today: cn(
-          "bg-accent text-accent-foreground",
-          defaultClassNames.today
-        ),
+        today: cn("bg-accent text-accent-foreground", defaultClassNames.today),
         outside: cn(
           "text-muted-foreground aria-selected:text-muted-foreground",
           defaultClassNames.outside
@@ -392,7 +415,7 @@ function CalendarDayButton(_a) {
     Button,
     __spreadValues({
       className: cn(
-        "flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal rounded-none group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-accent-foreground [&>span]:text-xs [&>span]:opacity-70",
+        "flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 font-normal rounded-none group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-accent-foreground [&>span]:text-caption [&>span]:opacity-70",
         defaultClassNames.day,
         className
       ),
@@ -445,6 +468,7 @@ function PopoverContent(_a) {
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_popover.Popover.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     import_popover.Popover.Positioner,
     {
+      className: "z-[200]",
       align,
       sideOffset,
       children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(

package/dist/components/ui/date-picker.mjs

@@ -1,14 +1,13 @@
-"use client";
 import {
   DatePicker
-} from "../../chunk-FHNT55I5.mjs";
-import "../../chunk-MQ72DIBH.mjs";
-import "../../chunk-3NQGYJEZ.mjs";
-import "../../chunk-4AJ5HWHD.mjs";
+} from "../../chunk-KUDCQ4FI.mjs";
+import "../../chunk-3GF7OVTP.mjs";
+import "../../chunk-P6AM5V7O.mjs";
+import "../../chunk-2I5S2AMY.mjs";
 import "../../chunk-DBHJ5KC3.mjs";
-import "../../chunk-OXQQNQZI.mjs";
+import "../../chunk-FEZKMUCF.mjs";
 import "../../chunk-QOJ2DQD6.mjs";
-import "../../chunk-V7CNWJT3.mjs";
+import "../../chunk-VLQZANBF.mjs";
 import "../../chunk-FWCSY2DS.mjs";
 export {
   DatePicker