@dimaan/ui 0.0.31 → 0.0.32

package/dist/index.d.cts

@@ -535,7 +535,7 @@ declare const datePickerTriggerVariantClass: Record<DatePickerVariant, string>;
  * Logical properties keep RTL working free.
  */
 declare const datePickerTriggerSizeClass: Record<DatePickerSize, string>;
-declare const 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";
+declare const 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";
 /** Empty-state trigger text (placeholder color). */
 declare const datePickerPlaceholderClass = "truncate text-muted-foreground";
 /** Filled-state trigger text. */
@@ -1374,7 +1374,7 @@ type InputVariant = 'default' | 'filled' | 'ghost';
 type InputSize = 'sm' | 'md' | 'lg';
 declare const inputVariantClass: Record<InputVariant, string>;
 declare const inputSizeClass: Record<InputSize, string>;
-declare const 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";
+declare const 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";
 
 interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'prefix'> {
     variant?: InputVariant;
@@ -1602,7 +1602,7 @@ declare const selectVariantClass: Record<SelectVariant, string>;
  * properties keep RTL working free.
  */
 declare const selectSizeClass: Record<SelectSize, string>;
-declare const 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";
+declare const 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";
 
 interface SelectOption {
     value: string;
@@ -2431,7 +2431,7 @@ type TextareaResize = 'none' | 'vertical' | 'horizontal' | 'both';
 declare const textareaVariantClass: Record<TextareaVariant, string>;
 declare const textareaSizeClass: Record<TextareaSize, string>;
 declare const textareaResizeClass: Record<TextareaResize, string>;
-declare const 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";
+declare const 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";
 
 interface TextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'> {
     variant?: TextareaVariant;

package/dist/index.d.ts

@@ -535,7 +535,7 @@ declare const datePickerTriggerVariantClass: Record<DatePickerVariant, string>;
  * Logical properties keep RTL working free.
  */
 declare const datePickerTriggerSizeClass: Record<DatePickerSize, string>;
-declare const 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";
+declare const 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";
 /** Empty-state trigger text (placeholder color). */
 declare const datePickerPlaceholderClass = "truncate text-muted-foreground";
 /** Filled-state trigger text. */
@@ -1374,7 +1374,7 @@ type InputVariant = 'default' | 'filled' | 'ghost';
 type InputSize = 'sm' | 'md' | 'lg';
 declare const inputVariantClass: Record<InputVariant, string>;
 declare const inputSizeClass: Record<InputSize, string>;
-declare const 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";
+declare const 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";
 
 interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'prefix'> {
     variant?: InputVariant;
@@ -1602,7 +1602,7 @@ declare const selectVariantClass: Record<SelectVariant, string>;
  * properties keep RTL working free.
  */
 declare const selectSizeClass: Record<SelectSize, string>;
-declare const 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";
+declare const 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";
 
 interface SelectOption {
     value: string;
@@ -2431,7 +2431,7 @@ type TextareaResize = 'none' | 'vertical' | 'horizontal' | 'both';
 declare const textareaVariantClass: Record<TextareaVariant, string>;
 declare const textareaSizeClass: Record<TextareaSize, string>;
 declare const textareaResizeClass: Record<TextareaResize, string>;
-declare const 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";
+declare const 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";
 
 interface TextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'> {
     variant?: TextareaVariant;

package/dist/index.js

@@ -1038,16 +1038,16 @@ var Checkbox = 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";
@@ -2102,16 +2102,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 = forwardRef(function Input2({
   variant = "default",
   inputSize = "md",
@@ -2476,182 +2476,180 @@ function Table(props) {
         children: bulkActions(selectedRowsInData)
       }
     ),
-    /* @__PURE__ */ jsxs("div", { className: "relative overflow-hidden rounded-xl border border-border bg-card shadow-[var(--shadow-card)]", children: [
-      /* @__PURE__ */ jsx(
-        "span",
-        {
-          "aria-hidden": "true",
-          "data-testid": "table-accent",
-          className: "pointer-events-none absolute inset-x-0 top-0 z-20 h-[3px] bg-gradient-table"
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: cn("overflow-x-auto", maxHeight !== void 0 && "overflow-y-auto"),
-          style: maxHeight !== void 0 ? { maxHeight } : void 0,
-          children: /* @__PURE__ */ jsxs(
-            "table",
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-testid": "table-card",
+        className: "overflow-hidden rounded-xl border border-border bg-card shadow-[var(--shadow-card)]",
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
             {
-              ref: tableRef,
-              "aria-label": ariaLabel,
-              "aria-labelledby": ariaLabelledBy,
-              "aria-rowcount": totalRowCount,
-              className: cn(tableBaseClass, "text-sm text-foreground", tableClassName),
-              children: [
-                caption ? /* @__PURE__ */ jsx("caption", { className: "sr-only", children: caption }) : null,
-                /* @__PURE__ */ jsx(
-                  "thead",
-                  {
-                    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.
-                      // Opaque header background so a sticky header fully hides the rows
-                      // scrolling underneath it (a translucent tint would let them bleed through).
-                      "bg-muted text-muted-foreground shadow-[inset_0_-1px_0_var(--color-border)]",
-                      maxHeight !== void 0 && "sticky top-0 z-10"
-                    ),
-                    children: /* @__PURE__ */ jsxs("tr", { children: [
-                      enableRowSelection ? /* @__PURE__ */ jsx("th", { scope: "col", className: cn("w-10", sizeClasses.head), children: /* @__PURE__ */ jsx(
-                        Checkbox,
-                        {
-                          "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__ */ 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__ */ jsxs(
-                              "button",
-                              {
-                                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__ */ jsx("span", { children: renderHeader(column.header) }),
-                                  /* @__PURE__ */ jsx(
-                                    SortIndicator,
-                                    {
-                                      active: isSorted,
-                                      direction: isSorted ? effectiveSort.direction : null
-                                    }
-                                  )
-                                ]
-                              }
-                            ) : renderHeader(column.header)
-                          },
-                          column.id
-                        );
-                      })
-                    ] })
-                  }
-                ),
-                /* @__PURE__ */ jsx("tbody", { children: loading ? /* @__PURE__ */ jsx(
-                  SkeletonRows,
-                  {
-                    rowCount: skeletonCount,
-                    columnCount: totalColumnCount,
-                    cellClassName: sizeClasses.cell
-                  }
-                ) : data.length === 0 ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ 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__ */ jsxs(
-                    "tr",
-                    {
-                      "data-selected": isSelected ? "true" : void 0,
-                      "aria-selected": enableRowSelection ? isSelected : void 0,
-                      className: cn(
-                        "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"
-                      ),
-                      onClick: onRowClick ? () => onRowClick(row, rowIndex) : void 0,
-                      children: [
-                        enableRowSelection ? /* @__PURE__ */ jsxs("td", { className: cn(sizeClasses.cell, "relative w-10"), children: [
-                          accent ? /* @__PURE__ */ jsx(RowAccent, { color: accent }) : null,
-                          /* @__PURE__ */ jsx(
+              className: cn("overflow-x-auto", maxHeight !== void 0 && "overflow-y-auto"),
+              style: maxHeight !== void 0 ? { maxHeight } : void 0,
+              children: /* @__PURE__ */ jsxs(
+                "table",
+                {
+                  ref: tableRef,
+                  "aria-label": ariaLabel,
+                  "aria-labelledby": ariaLabelledBy,
+                  "aria-rowcount": totalRowCount,
+                  className: cn(tableBaseClass, "text-sm text-foreground", tableClassName),
+                  children: [
+                    caption ? /* @__PURE__ */ jsx("caption", { className: "sr-only", children: caption }) : null,
+                    /* @__PURE__ */ jsx(
+                      "thead",
+                      {
+                        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__ */ jsxs("tr", { children: [
+                          enableRowSelection ? /* @__PURE__ */ jsx("th", { scope: "col", className: cn("w-10", sizeClasses.head), children: /* @__PURE__ */ jsx(
                             Checkbox,
                             {
-                              "aria-label": `Select row ${rowIndex + 1}`,
-                              checked: isSelected,
-                              disabled: !rowSelectable,
-                              onCheckedChange: (next) => toggleRow(id, next),
-                              onClick: stopRowClickPropagation
+                              "aria-label": "Select all rows on this page",
+                              checked: allOnPageSelected,
+                              indeterminate: someOnPageSelected,
+                              disabled: selectableRowIds.length === 0,
+                              onCheckedChange: toggleHeader
                             }
-                          )
-                        ] }) : null,
-                        columns.map((column, colIndex) => {
-                          const isFirst = colIndex === 0 && !enableRowSelection;
-                          return /* @__PURE__ */ jsxs(
-                            "td",
-                            {
-                              className: cn(
-                                sizeClasses.cell,
-                                alignClass[column.align ?? "start"],
-                                column.className,
-                                isFirst && "relative"
-                              ),
-                              children: [
-                                isFirst && accent ? /* @__PURE__ */ jsx(RowAccent, { color: accent }) : null,
-                                renderCell(column, row, rowIndex)
-                              ]
-                            },
-                            column.id
-                          );
-                        })
-                      ]
-                    },
-                    id
-                  );
-                }) })
-              ]
+                          ) }) : null,
+                          columns.map((column) => {
+                            const isSorted = effectiveSort.columnId === column.id;
+                            const ariaSort = isSorted ? effectiveSort.direction === "asc" ? "ascending" : "descending" : "none";
+                            return /* @__PURE__ */ 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__ */ jsxs(
+                                  "button",
+                                  {
+                                    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__ */ jsx("span", { children: renderHeader(column.header) }),
+                                      /* @__PURE__ */ jsx(
+                                        SortIndicator,
+                                        {
+                                          active: isSorted,
+                                          direction: isSorted ? effectiveSort.direction : null
+                                        }
+                                      )
+                                    ]
+                                  }
+                                ) : renderHeader(column.header)
+                              },
+                              column.id
+                            );
+                          })
+                        ] })
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("tbody", { children: loading ? /* @__PURE__ */ jsx(
+                      SkeletonRows,
+                      {
+                        rowCount: skeletonCount,
+                        columnCount: totalColumnCount,
+                        cellClassName: sizeClasses.cell
+                      }
+                    ) : data.length === 0 ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ 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__ */ jsxs(
+                        "tr",
+                        {
+                          "data-selected": isSelected ? "true" : void 0,
+                          "aria-selected": enableRowSelection ? isSelected : void 0,
+                          className: cn(
+                            "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"
+                          ),
+                          onClick: onRowClick ? () => onRowClick(row, rowIndex) : void 0,
+                          children: [
+                            enableRowSelection ? /* @__PURE__ */ jsxs("td", { className: cn(sizeClasses.cell, "relative w-10"), children: [
+                              accent ? /* @__PURE__ */ jsx(RowAccent, { color: accent }) : null,
+                              /* @__PURE__ */ 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__ */ jsxs(
+                                "td",
+                                {
+                                  className: cn(
+                                    sizeClasses.cell,
+                                    alignClass[column.align ?? "start"],
+                                    column.className,
+                                    isFirst && "relative"
+                                  ),
+                                  children: [
+                                    isFirst && accent ? /* @__PURE__ */ jsx(RowAccent, { color: accent }) : null,
+                                    renderCell(column, row, rowIndex)
+                                  ]
+                                },
+                                column.id
+                              );
+                            })
+                          ]
+                        },
+                        id
+                      );
+                    }) })
+                  ]
+                }
+              )
             }
-          )
-        }
-      ),
-      paginationVisible ? /* @__PURE__ */ jsx("div", { className: "border-t border-border px-4 py-3", children: /* @__PURE__ */ jsx(
-        Pagination,
-        {
-          pageIndex,
-          pageSize,
-          pageCount,
-          totalRowCount,
-          pageSizeOptions,
-          onChange: handlePaginationChange,
-          labels
-        }
-      ) }) : null
-    ] })
+          ),
+          paginationVisible ? /* @__PURE__ */ jsx("div", { className: "border-t border-border px-4 py-3", children: /* @__PURE__ */ jsx(
+            Pagination,
+            {
+              pageIndex,
+              pageSize,
+              pageCount,
+              totalRowCount,
+              pageSizeOptions,
+              onChange: handlePaginationChange,
+              labels
+            }
+          ) }) : null
+        ]
+      }
+    )
   ] });
 }
 function renderHeader(header) {
@@ -2710,16 +2708,16 @@ function SortIndicator({ active, direction }) {
 
 // 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";
@@ -2730,9 +2728,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";
@@ -3205,7 +3203,7 @@ function ListPageFilterBar({
     },
     filter.key
   )) });
-  const header = /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 border-b border-border bg-primary/5 px-4 py-3", children: [
+  const header = /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 border-b-2 border-primary bg-panel-header px-4 py-3", children: [
     /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-foreground", children: labels.title ?? "Filters" }),
     activeCount > 0 ? /* @__PURE__ */ 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,
@@ -3217,7 +3215,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__ */ jsxs("form", { "data-slot": "list-page-filter-bar", className: cardClass, onSubmit: apply, children: [
       header,
@@ -3701,14 +3699,14 @@ var Switch = 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",
@@ -3716,7 +3714,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 = forwardRef(function Textarea2({
   variant = "default",
   textareaSize = "md",