@dimaan/ui 0.0.30 → 0.0.32

package/dist/index.cjs

@@ -905,7 +905,7 @@ var badgeDotSizeClass = {
   md: "size-2"
 };
 var badgeBaseClass = "inline-flex shrink-0 items-center rounded-full border font-medium leading-none whitespace-nowrap select-none transition-colors";
-var Badge = react.forwardRef(function Badge2({ variant = "default", size = "md", tone = "solid", dot = false, className, children, ...props }, ref) {
+var Badge = react.forwardRef(function Badge2({ variant = "default", size = "md", tone = "soft", dot = false, className, children, ...props }, ref) {
   const variantClass = tone === "soft" ? badgeSoftVariantClass[variant] : badgeVariantClass[variant];
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "span",
@@ -1066,16 +1066,16 @@ var Checkbox = react.forwardRef(function Checkbox2({
 
 // src/components/date-picker/datePickerVariants.ts
 var datePickerTriggerVariantClass = {
-  default: "border border-input bg-background hover:border-ring",
+  default: "border border-input bg-background shadow-xs hover:border-ring",
   filled: "border border-transparent bg-muted hover:bg-muted/80",
   ghost: "border border-transparent bg-transparent hover:bg-accent"
 };
 var datePickerTriggerSizeClass = {
-  sm: "h-8 rounded-md ps-2.5 pe-8 text-sm gap-1.5",
-  md: "h-9 rounded-md ps-3 pe-9 text-sm gap-2",
-  lg: "h-11 rounded-md ps-4 pe-10 text-base gap-2"
+  sm: "h-8 rounded-lg ps-2.5 pe-8 text-sm gap-1.5",
+  md: "h-10 rounded-lg ps-3 pe-9 text-sm gap-2",
+  lg: "h-11 rounded-lg ps-4 pe-10 text-base gap-2"
 };
-var datePickerTriggerBaseClass = "group/datepicker relative inline-flex w-full items-center text-foreground outline-none transition-[background-color,border-color,box-shadow] focus-visible:ring-[3px] focus-visible:ring-primary-glow aria-[invalid=true]:border-destructive aria-[invalid=true]:focus-visible:ring-destructive/40 disabled:pointer-events-none disabled:opacity-50 cursor-pointer";
+var datePickerTriggerBaseClass = "group/datepicker relative inline-flex w-full items-center text-foreground outline-none transition-[background-color,border-color,box-shadow] focus-visible:border-primary focus-visible:ring-[3px] focus-visible:ring-primary-glow aria-[invalid=true]:border-destructive aria-[invalid=true]:focus-visible:border-destructive aria-[invalid=true]:focus-visible:ring-destructive/40 disabled:pointer-events-none disabled:opacity-50 cursor-pointer";
 var datePickerPlaceholderClass = "truncate text-muted-foreground";
 var datePickerValueClass = "truncate text-foreground";
 var datePickerContentClass = "z-50 overflow-hidden rounded-md border border-border bg-popover p-3 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95";
@@ -2130,16 +2130,16 @@ function FormPageSkeleton({ rowCount }) {
 
 // src/components/input/inputVariants.ts
 var inputVariantClass = {
-  default: "border border-input bg-background hover:border-ring",
+  default: "border border-input bg-background shadow-xs hover:border-ring",
   filled: "border border-transparent bg-muted hover:bg-muted/80",
   ghost: "border border-transparent bg-transparent hover:bg-accent"
 };
 var inputSizeClass = {
-  sm: "h-8 rounded-md px-2.5 text-sm gap-1.5",
-  md: "h-9 rounded-md px-3 text-sm gap-2",
-  lg: "h-11 rounded-md px-4 text-base gap-2.5"
+  sm: "h-8 rounded-lg px-2.5 text-sm gap-1.5",
+  md: "h-10 rounded-lg px-3 text-sm gap-2",
+  lg: "h-11 rounded-lg px-4 text-base gap-2.5"
 };
-var inputBaseClass = "group/input relative inline-flex w-full items-center text-foreground outline-none transition-[background-color,border-color,box-shadow] focus-within:ring-[3px] focus-within:ring-primary-glow aria-[invalid=true]:border-destructive aria-[invalid=true]:focus-within:ring-destructive/40 has-[input:disabled]:pointer-events-none has-[input:disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0";
+var inputBaseClass = "group/input relative inline-flex w-full items-center text-foreground outline-none transition-[background-color,border-color,box-shadow] focus-within:border-primary focus-within:ring-[3px] focus-within:ring-primary-glow aria-[invalid=true]:border-destructive aria-[invalid=true]:focus-within:border-destructive aria-[invalid=true]:focus-within:ring-destructive/40 has-[input:disabled]:pointer-events-none has-[input:disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0";
 var Input = react.forwardRef(function Input2({
   variant = "default",
   inputSize = "md",
@@ -2321,9 +2321,9 @@ function Pagination({
             children: isRtl ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { "aria-hidden": "true", className: "size-3.5" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { "aria-hidden": "true", className: "size-3.5" })
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "px-1 text-foreground", children: [
-          pageIndex + 1,
-          " / ",
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex min-w-7 items-center justify-center rounded-lg bg-gradient-table px-2.5 py-0.5 text-xs font-semibold text-white", children: pageIndex + 1 }),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "px-0.5 text-muted-foreground", children: [
+          "/ ",
           pageCount
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -2348,7 +2348,7 @@ function Toolbar({ count, onClear, renderLabel, clearLabel, children }) {
     {
       role: "toolbar",
       "aria-label": "Bulk actions",
-      className: "flex flex-wrap items-center gap-3 rounded-md border border-border bg-muted/40 px-3 py-2 text-sm",
+      className: "flex flex-wrap items-center gap-3 rounded-xl border border-border bg-muted/50 px-3.5 py-2.5 text-sm shadow-[var(--shadow-xs)]",
       children: [
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-foreground", children: renderLabel ? renderLabel(count) : `${count} selected` }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ms-auto flex flex-wrap items-center gap-2", children: [
@@ -2364,18 +2364,18 @@ function Toolbar({ count, onClear, renderLabel, clearLabel, children }) {
 var tableSizeClass = {
   sm: {
     row: "",
-    cell: "px-3 py-1.5 text-xs tabular-nums",
-    head: "whitespace-nowrap px-3 py-2 text-xs font-medium"
+    cell: "px-3 py-2 text-xs tabular-nums",
+    head: "whitespace-nowrap px-3 py-3 text-[11px] font-semibold uppercase tracking-wider"
   },
   md: {
     row: "",
-    cell: "px-4 py-2.5 text-sm tabular-nums",
-    head: "whitespace-nowrap px-4 py-2.5 text-xs font-medium uppercase tracking-wide"
+    cell: "px-4 py-3.5 text-sm tabular-nums",
+    head: "whitespace-nowrap px-4 py-4 text-xs font-semibold uppercase tracking-wider"
   },
   lg: {
     row: "",
-    cell: "px-5 py-3.5 text-sm tabular-nums",
-    head: "whitespace-nowrap px-5 py-3 text-sm font-medium"
+    cell: "px-6 py-4 text-sm tabular-nums",
+    head: "whitespace-nowrap px-6 py-5 text-[13px] font-semibold uppercase tracking-wider"
   }
 };
 var tableBaseClass = "w-full caption-bottom border-collapse";
@@ -2432,6 +2432,7 @@ function Table(props) {
     maxHeight,
     striped = false,
     onRowClick,
+    getRowAccent,
     tableRef,
     pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS,
     showPagination,
@@ -2503,166 +2504,196 @@ function Table(props) {
         children: bulkActions(selectedRowsInData)
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        className: cn(
-          "overflow-x-auto rounded-xl border border-border bg-card shadow-[var(--shadow-card)]",
-          maxHeight !== void 0 && "overflow-y-auto"
-        ),
-        style: maxHeight !== void 0 ? { maxHeight } : void 0,
-        children: /* @__PURE__ */ jsxRuntime.jsxs(
-          "table",
-          {
-            ref: tableRef,
-            "aria-label": ariaLabel,
-            "aria-labelledby": ariaLabelledBy,
-            "aria-rowcount": totalRowCount,
-            className: cn(tableBaseClass, "text-sm text-foreground", tableClassName),
-            children: [
-              caption ? /* @__PURE__ */ jsxRuntime.jsx("caption", { className: "sr-only", children: caption }) : null,
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "thead",
+        "data-testid": "table-card",
+        className: "overflow-hidden rounded-xl border border-border bg-card shadow-[var(--shadow-card)]",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: cn("overflow-x-auto", maxHeight !== void 0 && "overflow-y-auto"),
+              style: maxHeight !== void 0 ? { maxHeight } : void 0,
+              children: /* @__PURE__ */ jsxRuntime.jsxs(
+                "table",
                 {
-                  className: cn(
-                    // Clean opaque header (so a sticky header fully hides the rows
-                    // scrolling underneath it) with a hairline bottom rule drawn via an
-                    // inset shadow — it stays attached to the sticky header instead of
-                    // collapsing into the first row's border.
-                    "bg-card text-muted-foreground shadow-[inset_0_-1px_0_var(--color-border)]",
-                    maxHeight !== void 0 && "sticky top-0 z-10"
-                  ),
-                  children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
-                    enableRowSelection ? /* @__PURE__ */ jsxRuntime.jsx("th", { scope: "col", className: cn("w-10", sizeClasses.head), children: /* @__PURE__ */ jsxRuntime.jsx(
-                      Checkbox,
+                  ref: tableRef,
+                  "aria-label": ariaLabel,
+                  "aria-labelledby": ariaLabelledBy,
+                  "aria-rowcount": totalRowCount,
+                  className: cn(tableBaseClass, "text-sm text-foreground", tableClassName),
+                  children: [
+                    caption ? /* @__PURE__ */ jsxRuntime.jsx("caption", { className: "sr-only", children: caption }) : null,
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "thead",
                       {
-                        "aria-label": "Select all rows on this page",
-                        checked: allOnPageSelected,
-                        indeterminate: someOnPageSelected,
-                        disabled: selectableRowIds.length === 0,
-                        onCheckedChange: toggleHeader
-                      }
-                    ) }) : null,
-                    columns.map((column) => {
-                      const isSorted = effectiveSort.columnId === column.id;
-                      const ariaSort = isSorted ? effectiveSort.direction === "asc" ? "ascending" : "descending" : "none";
-                      return /* @__PURE__ */ jsxRuntime.jsx(
-                        "th",
-                        {
-                          scope: "col",
-                          "aria-sort": column.sortable ? ariaSort : void 0,
-                          className: cn(
-                            sizeClasses.head,
-                            alignClass[column.align ?? "start"],
-                            column.className
-                          ),
-                          children: column.sortable ? /* @__PURE__ */ jsxRuntime.jsxs(
-                            "button",
+                        className: cn(
+                          // Faint opaque teal header tint (--color-panel-header, shared with the
+                          // list-page filter panel) + a 2px teal bottom rule. The rule is an inset
+                          // shadow so it stays attached to a sticky header instead of collapsing
+                          // into the first row's border; the tint is opaque (mixed into
+                          // --color-card) so a sticky header fully hides the rows underneath.
+                          "bg-panel-header text-muted-foreground shadow-[inset_0_-2px_0_var(--color-primary)]",
+                          maxHeight !== void 0 && "sticky top-0 z-10"
+                        ),
+                        children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
+                          enableRowSelection ? /* @__PURE__ */ jsxRuntime.jsx("th", { scope: "col", className: cn("w-10", sizeClasses.head), children: /* @__PURE__ */ jsxRuntime.jsx(
+                            Checkbox,
                             {
-                              type: "button",
-                              onClick: () => handleSortClick(column.id),
-                              className: "inline-flex items-center gap-1.5 font-inherit uppercase tracking-inherit text-inherit hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background",
-                              "aria-label": sortAriaLabel(column, effectiveSort),
-                              children: [
-                                /* @__PURE__ */ jsxRuntime.jsx("span", { children: renderHeader(column.header) }),
-                                /* @__PURE__ */ jsxRuntime.jsx(
-                                  SortIndicator,
+                              "aria-label": "Select all rows on this page",
+                              checked: allOnPageSelected,
+                              indeterminate: someOnPageSelected,
+                              disabled: selectableRowIds.length === 0,
+                              onCheckedChange: toggleHeader
+                            }
+                          ) }) : null,
+                          columns.map((column) => {
+                            const isSorted = effectiveSort.columnId === column.id;
+                            const ariaSort = isSorted ? effectiveSort.direction === "asc" ? "ascending" : "descending" : "none";
+                            return /* @__PURE__ */ jsxRuntime.jsx(
+                              "th",
+                              {
+                                scope: "col",
+                                "aria-sort": column.sortable ? ariaSort : void 0,
+                                className: cn(
+                                  sizeClasses.head,
+                                  alignClass[column.align ?? "start"],
+                                  column.className,
+                                  isSorted && "text-primary"
+                                ),
+                                children: column.sortable ? /* @__PURE__ */ jsxRuntime.jsxs(
+                                  "button",
                                   {
-                                    active: isSorted,
-                                    direction: isSorted ? effectiveSort.direction : null
+                                    type: "button",
+                                    onClick: () => handleSortClick(column.id),
+                                    className: "inline-flex items-center gap-1.5 font-inherit uppercase tracking-inherit text-inherit hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background",
+                                    "aria-label": sortAriaLabel(column, effectiveSort),
+                                    children: [
+                                      /* @__PURE__ */ jsxRuntime.jsx("span", { children: renderHeader(column.header) }),
+                                      /* @__PURE__ */ jsxRuntime.jsx(
+                                        SortIndicator,
+                                        {
+                                          active: isSorted,
+                                          direction: isSorted ? effectiveSort.direction : null
+                                        }
+                                      )
+                                    ]
                                   }
-                                )
-                              ]
-                            }
-                          ) : renderHeader(column.header)
-                        },
-                        column.id
-                      );
-                    })
-                  ] })
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: loading ? /* @__PURE__ */ jsxRuntime.jsx(
-                SkeletonRows,
-                {
-                  rowCount: skeletonCount,
-                  columnCount: totalColumnCount,
-                  cellClassName: sizeClasses.cell
-                }
-              ) : data.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx(
-                "td",
-                {
-                  colSpan: totalColumnCount,
-                  className: cn(sizeClasses.cell, "py-10 text-center text-muted-foreground"),
-                  children: emptyState ?? "No data"
-                }
-              ) }) : data.map((row, rowIndex) => {
-                const id = getRowId(row, rowIndex);
-                const isSelected = selected.has(id);
-                const rowSelectable = isRowSelectable ? isRowSelectable(row) : true;
-                return /* @__PURE__ */ jsxRuntime.jsxs(
-                  "tr",
-                  {
-                    "data-selected": isSelected ? "true" : void 0,
-                    "aria-selected": enableRowSelection ? isSelected : void 0,
-                    className: cn(
-                      "border-t border-border/60 first:border-t-0 transition-colors",
-                      "hover:bg-primary/5",
-                      striped && rowIndex % 2 === 1 && "bg-muted/20",
-                      isSelected && selectedRowClass,
-                      onRowClick && "cursor-pointer"
+                                ) : renderHeader(column.header)
+                              },
+                              column.id
+                            );
+                          })
+                        ] })
+                      }
                     ),
-                    onClick: onRowClick ? () => onRowClick(row, rowIndex) : void 0,
-                    children: [
-                      enableRowSelection ? /* @__PURE__ */ jsxRuntime.jsx("td", { className: cn(sizeClasses.cell, "w-10"), children: /* @__PURE__ */ jsxRuntime.jsx(
-                        Checkbox,
-                        {
-                          "aria-label": `Select row ${rowIndex + 1}`,
-                          checked: isSelected,
-                          disabled: !rowSelectable,
-                          onCheckedChange: (next) => toggleRow(id, next),
-                          onClick: stopRowClickPropagation
-                        }
-                      ) }) : null,
-                      columns.map((column) => /* @__PURE__ */ jsxRuntime.jsx(
-                        "td",
+                    /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: loading ? /* @__PURE__ */ jsxRuntime.jsx(
+                      SkeletonRows,
+                      {
+                        rowCount: skeletonCount,
+                        columnCount: totalColumnCount,
+                        cellClassName: sizeClasses.cell
+                      }
+                    ) : data.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx(
+                      "td",
+                      {
+                        colSpan: totalColumnCount,
+                        className: cn(sizeClasses.cell, "py-10 text-center text-muted-foreground"),
+                        children: emptyState ?? "No data"
+                      }
+                    ) }) : data.map((row, rowIndex) => {
+                      const id = getRowId(row, rowIndex);
+                      const isSelected = selected.has(id);
+                      const rowSelectable = isRowSelectable ? isRowSelectable(row) : true;
+                      const accent = getRowAccent?.(row, rowIndex);
+                      return /* @__PURE__ */ jsxRuntime.jsxs(
+                        "tr",
                         {
+                          "data-selected": isSelected ? "true" : void 0,
+                          "aria-selected": enableRowSelection ? isSelected : void 0,
                           className: cn(
-                            sizeClasses.cell,
-                            alignClass[column.align ?? "start"],
-                            column.className
+                            "border-b border-border/60 last:border-b-0 transition-colors",
+                            "hover:bg-muted/60",
+                            striped && rowIndex % 2 === 1 && "bg-muted/20",
+                            isSelected && selectedRowClass,
+                            onRowClick && "cursor-pointer"
                           ),
-                          children: renderCell(column, row, rowIndex)
+                          onClick: onRowClick ? () => onRowClick(row, rowIndex) : void 0,
+                          children: [
+                            enableRowSelection ? /* @__PURE__ */ jsxRuntime.jsxs("td", { className: cn(sizeClasses.cell, "relative w-10"), children: [
+                              accent ? /* @__PURE__ */ jsxRuntime.jsx(RowAccent, { color: accent }) : null,
+                              /* @__PURE__ */ jsxRuntime.jsx(
+                                Checkbox,
+                                {
+                                  "aria-label": `Select row ${rowIndex + 1}`,
+                                  checked: isSelected,
+                                  disabled: !rowSelectable,
+                                  onCheckedChange: (next) => toggleRow(id, next),
+                                  onClick: stopRowClickPropagation
+                                }
+                              )
+                            ] }) : null,
+                            columns.map((column, colIndex) => {
+                              const isFirst = colIndex === 0 && !enableRowSelection;
+                              return /* @__PURE__ */ jsxRuntime.jsxs(
+                                "td",
+                                {
+                                  className: cn(
+                                    sizeClasses.cell,
+                                    alignClass[column.align ?? "start"],
+                                    column.className,
+                                    isFirst && "relative"
+                                  ),
+                                  children: [
+                                    isFirst && accent ? /* @__PURE__ */ jsxRuntime.jsx(RowAccent, { color: accent }) : null,
+                                    renderCell(column, row, rowIndex)
+                                  ]
+                                },
+                                column.id
+                              );
+                            })
+                          ]
                         },
-                        column.id
-                      ))
-                    ]
-                  },
-                  id
-                );
-              }) })
-            ]
-          }
-        )
-      }
-    ),
-    paginationVisible ? /* @__PURE__ */ jsxRuntime.jsx(
-      Pagination,
-      {
-        pageIndex,
-        pageSize,
-        pageCount,
-        totalRowCount,
-        pageSizeOptions,
-        onChange: handlePaginationChange,
-        labels
+                        id
+                      );
+                    }) })
+                  ]
+                }
+              )
+            }
+          ),
+          paginationVisible ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-t border-border px-4 py-3", children: /* @__PURE__ */ jsxRuntime.jsx(
+            Pagination,
+            {
+              pageIndex,
+              pageSize,
+              pageCount,
+              totalRowCount,
+              pageSizeOptions,
+              onChange: handlePaginationChange,
+              labels
+            }
+          ) }) : null
+        ]
       }
-    ) : null
+    )
   ] });
 }
 function renderHeader(header) {
   return typeof header === "function" ? header() : header;
 }
+function RowAccent({ color }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      "aria-hidden": "true",
+      "data-testid": "row-accent",
+      className: "pointer-events-none absolute inset-y-1 start-0 w-[3px] rounded-full",
+      style: { background: color }
+    }
+  );
+}
 function renderCell(column, row, rowIndex) {
   if (column.render) return column.render(row, rowIndex);
   if (column.accessor !== void 0) {
@@ -2687,26 +2718,34 @@ function stopRowClickPropagation(event) {
 function SkeletonRows({ rowCount, columnCount, cellClassName }) {
   const rowKeys = Array.from({ length: Math.max(0, rowCount) }, (_, i) => `skeleton-row-${i}`);
   const colKeys = Array.from({ length: Math.max(1, columnCount) }, (_, i) => `skeleton-col-${i}`);
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: rowKeys.map((rowKey) => /* @__PURE__ */ jsxRuntime.jsx("tr", { className: "border-t border-border", "data-testid": "table-skeleton-row", children: colKeys.map((colKey) => /* @__PURE__ */ jsxRuntime.jsx("td", { className: cellClassName, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block h-3 w-full animate-pulse rounded bg-muted" }) }, `${rowKey}-${colKey}`)) }, rowKey)) });
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: rowKeys.map((rowKey) => /* @__PURE__ */ jsxRuntime.jsx(
+    "tr",
+    {
+      className: "border-b border-border/60 last:border-b-0",
+      "data-testid": "table-skeleton-row",
+      children: colKeys.map((colKey) => /* @__PURE__ */ jsxRuntime.jsx("td", { className: cellClassName, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block h-3 w-full animate-pulse rounded bg-muted" }) }, `${rowKey}-${colKey}`))
+    },
+    rowKey
+  )) });
 }
 function SortIndicator({ active, direction }) {
-  const className = cn("size-3.5 shrink-0", active ? "text-foreground" : "text-muted-foreground");
+  const className = cn("size-3.5 shrink-0", active ? "text-primary" : "text-muted-foreground");
   if (!active) return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsUpDown, { "aria-hidden": "true", className });
   return direction === "asc" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUp, { "aria-hidden": "true", className }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { "aria-hidden": "true", className });
 }
 
 // src/components/select/selectVariants.ts
 var selectVariantClass = {
-  default: "border border-input bg-background hover:border-ring",
+  default: "border border-input bg-background shadow-xs hover:border-ring",
   filled: "border border-transparent bg-muted hover:bg-muted/80",
   ghost: "border border-transparent bg-transparent hover:bg-accent"
 };
 var selectSizeClass = {
-  sm: "h-8 rounded-md ps-2.5 pe-8 text-sm",
-  md: "h-9 rounded-md ps-3 pe-9 text-sm",
-  lg: "h-11 rounded-md ps-4 pe-10 text-base"
+  sm: "h-8 rounded-lg ps-2.5 pe-8 text-sm",
+  md: "h-10 rounded-lg ps-3 pe-9 text-sm",
+  lg: "h-11 rounded-lg ps-4 pe-10 text-base"
 };
-var selectBaseClass = "group/select relative inline-flex w-full items-center text-foreground outline-none transition-[background-color,border-color,box-shadow] focus:ring-[3px] focus:ring-primary-glow aria-[invalid=true]:border-destructive aria-[invalid=true]:focus:ring-destructive/40 disabled:pointer-events-none disabled:opacity-50 cursor-pointer data-[placeholder]:text-muted-foreground";
+var selectBaseClass = "group/select relative inline-flex w-full items-center text-foreground outline-none transition-[background-color,border-color,box-shadow] focus:border-primary focus:ring-[3px] focus:ring-primary-glow aria-[invalid=true]:border-destructive aria-[invalid=true]:focus:border-destructive aria-[invalid=true]:focus:ring-destructive/40 disabled:pointer-events-none disabled:opacity-50 cursor-pointer data-[placeholder]:text-muted-foreground";
 var selectContentClass = "z-50 max-h-(--radix-select-content-available-height) min-w-(--radix-select-trigger-width) overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95";
 var selectViewportClass = "p-1";
 var selectItemClass = "relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50";
@@ -2717,9 +2756,9 @@ var selectStatusClass = "flex items-center justify-center gap-2 px-2 py-6 text-c
 
 // src/components/multi-select/multiSelectVariants.ts
 var multiSelectTriggerSizeClass = {
-  sm: "min-h-8 rounded-md ps-2.5 pe-8 py-1 text-sm",
-  md: "min-h-9 rounded-md ps-3 pe-9 py-1 text-sm",
-  lg: "min-h-11 rounded-md ps-4 pe-10 py-1.5 text-base"
+  sm: "min-h-8 rounded-lg ps-2.5 pe-8 py-1 text-sm",
+  md: "min-h-10 rounded-lg ps-3 pe-9 py-1 text-sm",
+  lg: "min-h-11 rounded-lg ps-4 pe-10 py-1.5 text-base"
 };
 var multiSelectValueRowClass = "flex min-w-0 flex-1 flex-wrap items-center gap-1";
 var multiSelectChipClass = "max-w-full gap-1 pe-1";
@@ -3192,7 +3231,7 @@ function ListPageFilterBar({
     },
     filter.key
   )) });
-  const header = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 border-b border-border bg-primary/5 px-4 py-3", children: [
+  const header = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 border-b-2 border-primary bg-panel-header px-4 py-3", children: [
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-semibold text-foreground", children: labels.title ?? "Filters" }),
     activeCount > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center rounded-full bg-primary/10 px-2 py-0.5 text-xs font-semibold text-primary", children: [
       activeCount,
@@ -3204,7 +3243,7 @@ function ListPageFilterBar({
       labels.reset
     ] }) : null
   ] });
-  const cardClass = "overflow-hidden rounded-xl border border-border bg-card";
+  const cardClass = "overflow-hidden rounded-xl border border-border bg-card shadow-[var(--shadow-card)]";
   if (manual) {
     return /* @__PURE__ */ jsxRuntime.jsxs("form", { "data-slot": "list-page-filter-bar", className: cardClass, onSubmit: apply, children: [
       header,
@@ -3688,14 +3727,14 @@ var Switch = react.forwardRef(function Switch2({
 
 // src/components/textarea/textareaVariants.ts
 var textareaVariantClass = {
-  default: "border border-input bg-background hover:border-ring",
+  default: "border border-input bg-background shadow-xs hover:border-ring",
   filled: "border border-transparent bg-muted hover:bg-muted/80",
   ghost: "border border-transparent bg-transparent hover:bg-accent"
 };
 var textareaSizeClass = {
-  sm: "rounded-md px-2.5 py-1.5 text-sm",
-  md: "rounded-md px-3 py-2 text-sm",
-  lg: "rounded-md px-4 py-2.5 text-base"
+  sm: "rounded-lg px-2.5 py-1.5 text-sm",
+  md: "rounded-lg px-3 py-2 text-sm",
+  lg: "rounded-lg px-4 py-2.5 text-base"
 };
 var textareaResizeClass = {
   none: "resize-none",
@@ -3703,7 +3742,7 @@ var textareaResizeClass = {
   horizontal: "resize-x",
   both: "resize"
 };
-var textareaBaseClass = "group/textarea relative flex w-full text-foreground outline-none transition-[background-color,border-color,box-shadow] focus-within:ring-[3px] focus-within:ring-primary-glow aria-[invalid=true]:border-destructive aria-[invalid=true]:focus-within:ring-destructive/40 has-[textarea:disabled]:pointer-events-none has-[textarea:disabled]:opacity-50";
+var textareaBaseClass = "group/textarea relative flex w-full text-foreground outline-none transition-[background-color,border-color,box-shadow] focus-within:border-primary focus-within:ring-[3px] focus-within:ring-primary-glow aria-[invalid=true]:border-destructive aria-[invalid=true]:focus-within:border-destructive aria-[invalid=true]:focus-within:ring-destructive/40 has-[textarea:disabled]:pointer-events-none has-[textarea:disabled]:opacity-50";
 var Textarea = react.forwardRef(function Textarea2({
   variant = "default",
   textareaSize = "md",