@dimaan/ui 0.0.31 → 0.0.32

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.cjs CHANGED
@@ -1066,16 +1066,16 @@ var Checkbox = react.forwardRef(function Checkbox2({
1066
1066
 
1067
1067
  // src/components/date-picker/datePickerVariants.ts
1068
1068
  var datePickerTriggerVariantClass = {
1069
- default: "border border-input bg-background hover:border-ring",
1069
+ default: "border border-input bg-background shadow-xs hover:border-ring",
1070
1070
  filled: "border border-transparent bg-muted hover:bg-muted/80",
1071
1071
  ghost: "border border-transparent bg-transparent hover:bg-accent"
1072
1072
  };
1073
1073
  var datePickerTriggerSizeClass = {
1074
- sm: "h-8 rounded-md ps-2.5 pe-8 text-sm gap-1.5",
1075
- md: "h-9 rounded-md ps-3 pe-9 text-sm gap-2",
1076
- lg: "h-11 rounded-md ps-4 pe-10 text-base gap-2"
1074
+ sm: "h-8 rounded-lg ps-2.5 pe-8 text-sm gap-1.5",
1075
+ md: "h-10 rounded-lg ps-3 pe-9 text-sm gap-2",
1076
+ lg: "h-11 rounded-lg ps-4 pe-10 text-base gap-2"
1077
1077
  };
1078
- 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";
1078
+ 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";
1079
1079
  var datePickerPlaceholderClass = "truncate text-muted-foreground";
1080
1080
  var datePickerValueClass = "truncate text-foreground";
1081
1081
  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 }) {
2130
2130
 
2131
2131
  // src/components/input/inputVariants.ts
2132
2132
  var inputVariantClass = {
2133
- default: "border border-input bg-background hover:border-ring",
2133
+ default: "border border-input bg-background shadow-xs hover:border-ring",
2134
2134
  filled: "border border-transparent bg-muted hover:bg-muted/80",
2135
2135
  ghost: "border border-transparent bg-transparent hover:bg-accent"
2136
2136
  };
2137
2137
  var inputSizeClass = {
2138
- sm: "h-8 rounded-md px-2.5 text-sm gap-1.5",
2139
- md: "h-9 rounded-md px-3 text-sm gap-2",
2140
- lg: "h-11 rounded-md px-4 text-base gap-2.5"
2138
+ sm: "h-8 rounded-lg px-2.5 text-sm gap-1.5",
2139
+ md: "h-10 rounded-lg px-3 text-sm gap-2",
2140
+ lg: "h-11 rounded-lg px-4 text-base gap-2.5"
2141
2141
  };
2142
- 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";
2142
+ 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";
2143
2143
  var Input = react.forwardRef(function Input2({
2144
2144
  variant = "default",
2145
2145
  inputSize = "md",
@@ -2504,182 +2504,180 @@ function Table(props) {
2504
2504
  children: bulkActions(selectedRowsInData)
2505
2505
  }
2506
2506
  ),
2507
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative overflow-hidden rounded-xl border border-border bg-card shadow-[var(--shadow-card)]", children: [
2508
- /* @__PURE__ */ jsxRuntime.jsx(
2509
- "span",
2510
- {
2511
- "aria-hidden": "true",
2512
- "data-testid": "table-accent",
2513
- className: "pointer-events-none absolute inset-x-0 top-0 z-20 h-[3px] bg-gradient-table"
2514
- }
2515
- ),
2516
- /* @__PURE__ */ jsxRuntime.jsx(
2517
- "div",
2518
- {
2519
- className: cn("overflow-x-auto", maxHeight !== void 0 && "overflow-y-auto"),
2520
- style: maxHeight !== void 0 ? { maxHeight } : void 0,
2521
- children: /* @__PURE__ */ jsxRuntime.jsxs(
2522
- "table",
2507
+ /* @__PURE__ */ jsxRuntime.jsxs(
2508
+ "div",
2509
+ {
2510
+ "data-testid": "table-card",
2511
+ className: "overflow-hidden rounded-xl border border-border bg-card shadow-[var(--shadow-card)]",
2512
+ children: [
2513
+ /* @__PURE__ */ jsxRuntime.jsx(
2514
+ "div",
2523
2515
  {
2524
- ref: tableRef,
2525
- "aria-label": ariaLabel,
2526
- "aria-labelledby": ariaLabelledBy,
2527
- "aria-rowcount": totalRowCount,
2528
- className: cn(tableBaseClass, "text-sm text-foreground", tableClassName),
2529
- children: [
2530
- caption ? /* @__PURE__ */ jsxRuntime.jsx("caption", { className: "sr-only", children: caption }) : null,
2531
- /* @__PURE__ */ jsxRuntime.jsx(
2532
- "thead",
2533
- {
2534
- className: cn(
2535
- // Clean opaque header (so a sticky header fully hides the rows
2536
- // scrolling underneath it) with a hairline bottom rule drawn via an
2537
- // inset shadow — it stays attached to the sticky header instead of
2538
- // collapsing into the first row's border.
2539
- // Opaque header background so a sticky header fully hides the rows
2540
- // scrolling underneath it (a translucent tint would let them bleed through).
2541
- "bg-muted text-muted-foreground shadow-[inset_0_-1px_0_var(--color-border)]",
2542
- maxHeight !== void 0 && "sticky top-0 z-10"
2543
- ),
2544
- children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
2545
- enableRowSelection ? /* @__PURE__ */ jsxRuntime.jsx("th", { scope: "col", className: cn("w-10", sizeClasses.head), children: /* @__PURE__ */ jsxRuntime.jsx(
2546
- Checkbox,
2547
- {
2548
- "aria-label": "Select all rows on this page",
2549
- checked: allOnPageSelected,
2550
- indeterminate: someOnPageSelected,
2551
- disabled: selectableRowIds.length === 0,
2552
- onCheckedChange: toggleHeader
2553
- }
2554
- ) }) : null,
2555
- columns.map((column) => {
2556
- const isSorted = effectiveSort.columnId === column.id;
2557
- const ariaSort = isSorted ? effectiveSort.direction === "asc" ? "ascending" : "descending" : "none";
2558
- return /* @__PURE__ */ jsxRuntime.jsx(
2559
- "th",
2560
- {
2561
- scope: "col",
2562
- "aria-sort": column.sortable ? ariaSort : void 0,
2563
- className: cn(
2564
- sizeClasses.head,
2565
- alignClass[column.align ?? "start"],
2566
- column.className,
2567
- isSorted && "text-primary"
2568
- ),
2569
- children: column.sortable ? /* @__PURE__ */ jsxRuntime.jsxs(
2570
- "button",
2571
- {
2572
- type: "button",
2573
- onClick: () => handleSortClick(column.id),
2574
- 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",
2575
- "aria-label": sortAriaLabel(column, effectiveSort),
2576
- children: [
2577
- /* @__PURE__ */ jsxRuntime.jsx("span", { children: renderHeader(column.header) }),
2578
- /* @__PURE__ */ jsxRuntime.jsx(
2579
- SortIndicator,
2580
- {
2581
- active: isSorted,
2582
- direction: isSorted ? effectiveSort.direction : null
2583
- }
2584
- )
2585
- ]
2586
- }
2587
- ) : renderHeader(column.header)
2588
- },
2589
- column.id
2590
- );
2591
- })
2592
- ] })
2593
- }
2594
- ),
2595
- /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: loading ? /* @__PURE__ */ jsxRuntime.jsx(
2596
- SkeletonRows,
2597
- {
2598
- rowCount: skeletonCount,
2599
- columnCount: totalColumnCount,
2600
- cellClassName: sizeClasses.cell
2601
- }
2602
- ) : data.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx(
2603
- "td",
2604
- {
2605
- colSpan: totalColumnCount,
2606
- className: cn(sizeClasses.cell, "py-10 text-center text-muted-foreground"),
2607
- children: emptyState ?? "No data"
2608
- }
2609
- ) }) : data.map((row, rowIndex) => {
2610
- const id = getRowId(row, rowIndex);
2611
- const isSelected = selected.has(id);
2612
- const rowSelectable = isRowSelectable ? isRowSelectable(row) : true;
2613
- const accent = getRowAccent?.(row, rowIndex);
2614
- return /* @__PURE__ */ jsxRuntime.jsxs(
2615
- "tr",
2616
- {
2617
- "data-selected": isSelected ? "true" : void 0,
2618
- "aria-selected": enableRowSelection ? isSelected : void 0,
2619
- className: cn(
2620
- "border-b border-border/60 last:border-b-0 transition-colors",
2621
- "hover:bg-muted/60",
2622
- striped && rowIndex % 2 === 1 && "bg-muted/20",
2623
- isSelected && selectedRowClass,
2624
- onRowClick && "cursor-pointer"
2625
- ),
2626
- onClick: onRowClick ? () => onRowClick(row, rowIndex) : void 0,
2627
- children: [
2628
- enableRowSelection ? /* @__PURE__ */ jsxRuntime.jsxs("td", { className: cn(sizeClasses.cell, "relative w-10"), children: [
2629
- accent ? /* @__PURE__ */ jsxRuntime.jsx(RowAccent, { color: accent }) : null,
2630
- /* @__PURE__ */ jsxRuntime.jsx(
2516
+ className: cn("overflow-x-auto", maxHeight !== void 0 && "overflow-y-auto"),
2517
+ style: maxHeight !== void 0 ? { maxHeight } : void 0,
2518
+ children: /* @__PURE__ */ jsxRuntime.jsxs(
2519
+ "table",
2520
+ {
2521
+ ref: tableRef,
2522
+ "aria-label": ariaLabel,
2523
+ "aria-labelledby": ariaLabelledBy,
2524
+ "aria-rowcount": totalRowCount,
2525
+ className: cn(tableBaseClass, "text-sm text-foreground", tableClassName),
2526
+ children: [
2527
+ caption ? /* @__PURE__ */ jsxRuntime.jsx("caption", { className: "sr-only", children: caption }) : null,
2528
+ /* @__PURE__ */ jsxRuntime.jsx(
2529
+ "thead",
2530
+ {
2531
+ className: cn(
2532
+ // Faint opaque teal header tint (--color-panel-header, shared with the
2533
+ // list-page filter panel) + a 2px teal bottom rule. The rule is an inset
2534
+ // shadow so it stays attached to a sticky header instead of collapsing
2535
+ // into the first row's border; the tint is opaque (mixed into
2536
+ // --color-card) so a sticky header fully hides the rows underneath.
2537
+ "bg-panel-header text-muted-foreground shadow-[inset_0_-2px_0_var(--color-primary)]",
2538
+ maxHeight !== void 0 && "sticky top-0 z-10"
2539
+ ),
2540
+ children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
2541
+ enableRowSelection ? /* @__PURE__ */ jsxRuntime.jsx("th", { scope: "col", className: cn("w-10", sizeClasses.head), children: /* @__PURE__ */ jsxRuntime.jsx(
2631
2542
  Checkbox,
2632
2543
  {
2633
- "aria-label": `Select row ${rowIndex + 1}`,
2634
- checked: isSelected,
2635
- disabled: !rowSelectable,
2636
- onCheckedChange: (next) => toggleRow(id, next),
2637
- onClick: stopRowClickPropagation
2544
+ "aria-label": "Select all rows on this page",
2545
+ checked: allOnPageSelected,
2546
+ indeterminate: someOnPageSelected,
2547
+ disabled: selectableRowIds.length === 0,
2548
+ onCheckedChange: toggleHeader
2638
2549
  }
2639
- )
2640
- ] }) : null,
2641
- columns.map((column, colIndex) => {
2642
- const isFirst = colIndex === 0 && !enableRowSelection;
2643
- return /* @__PURE__ */ jsxRuntime.jsxs(
2644
- "td",
2645
- {
2646
- className: cn(
2647
- sizeClasses.cell,
2648
- alignClass[column.align ?? "start"],
2649
- column.className,
2650
- isFirst && "relative"
2651
- ),
2652
- children: [
2653
- isFirst && accent ? /* @__PURE__ */ jsxRuntime.jsx(RowAccent, { color: accent }) : null,
2654
- renderCell(column, row, rowIndex)
2655
- ]
2656
- },
2657
- column.id
2658
- );
2659
- })
2660
- ]
2661
- },
2662
- id
2663
- );
2664
- }) })
2665
- ]
2550
+ ) }) : null,
2551
+ columns.map((column) => {
2552
+ const isSorted = effectiveSort.columnId === column.id;
2553
+ const ariaSort = isSorted ? effectiveSort.direction === "asc" ? "ascending" : "descending" : "none";
2554
+ return /* @__PURE__ */ jsxRuntime.jsx(
2555
+ "th",
2556
+ {
2557
+ scope: "col",
2558
+ "aria-sort": column.sortable ? ariaSort : void 0,
2559
+ className: cn(
2560
+ sizeClasses.head,
2561
+ alignClass[column.align ?? "start"],
2562
+ column.className,
2563
+ isSorted && "text-primary"
2564
+ ),
2565
+ children: column.sortable ? /* @__PURE__ */ jsxRuntime.jsxs(
2566
+ "button",
2567
+ {
2568
+ type: "button",
2569
+ onClick: () => handleSortClick(column.id),
2570
+ 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",
2571
+ "aria-label": sortAriaLabel(column, effectiveSort),
2572
+ children: [
2573
+ /* @__PURE__ */ jsxRuntime.jsx("span", { children: renderHeader(column.header) }),
2574
+ /* @__PURE__ */ jsxRuntime.jsx(
2575
+ SortIndicator,
2576
+ {
2577
+ active: isSorted,
2578
+ direction: isSorted ? effectiveSort.direction : null
2579
+ }
2580
+ )
2581
+ ]
2582
+ }
2583
+ ) : renderHeader(column.header)
2584
+ },
2585
+ column.id
2586
+ );
2587
+ })
2588
+ ] })
2589
+ }
2590
+ ),
2591
+ /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: loading ? /* @__PURE__ */ jsxRuntime.jsx(
2592
+ SkeletonRows,
2593
+ {
2594
+ rowCount: skeletonCount,
2595
+ columnCount: totalColumnCount,
2596
+ cellClassName: sizeClasses.cell
2597
+ }
2598
+ ) : data.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx(
2599
+ "td",
2600
+ {
2601
+ colSpan: totalColumnCount,
2602
+ className: cn(sizeClasses.cell, "py-10 text-center text-muted-foreground"),
2603
+ children: emptyState ?? "No data"
2604
+ }
2605
+ ) }) : data.map((row, rowIndex) => {
2606
+ const id = getRowId(row, rowIndex);
2607
+ const isSelected = selected.has(id);
2608
+ const rowSelectable = isRowSelectable ? isRowSelectable(row) : true;
2609
+ const accent = getRowAccent?.(row, rowIndex);
2610
+ return /* @__PURE__ */ jsxRuntime.jsxs(
2611
+ "tr",
2612
+ {
2613
+ "data-selected": isSelected ? "true" : void 0,
2614
+ "aria-selected": enableRowSelection ? isSelected : void 0,
2615
+ className: cn(
2616
+ "border-b border-border/60 last:border-b-0 transition-colors",
2617
+ "hover:bg-muted/60",
2618
+ striped && rowIndex % 2 === 1 && "bg-muted/20",
2619
+ isSelected && selectedRowClass,
2620
+ onRowClick && "cursor-pointer"
2621
+ ),
2622
+ onClick: onRowClick ? () => onRowClick(row, rowIndex) : void 0,
2623
+ children: [
2624
+ enableRowSelection ? /* @__PURE__ */ jsxRuntime.jsxs("td", { className: cn(sizeClasses.cell, "relative w-10"), children: [
2625
+ accent ? /* @__PURE__ */ jsxRuntime.jsx(RowAccent, { color: accent }) : null,
2626
+ /* @__PURE__ */ jsxRuntime.jsx(
2627
+ Checkbox,
2628
+ {
2629
+ "aria-label": `Select row ${rowIndex + 1}`,
2630
+ checked: isSelected,
2631
+ disabled: !rowSelectable,
2632
+ onCheckedChange: (next) => toggleRow(id, next),
2633
+ onClick: stopRowClickPropagation
2634
+ }
2635
+ )
2636
+ ] }) : null,
2637
+ columns.map((column, colIndex) => {
2638
+ const isFirst = colIndex === 0 && !enableRowSelection;
2639
+ return /* @__PURE__ */ jsxRuntime.jsxs(
2640
+ "td",
2641
+ {
2642
+ className: cn(
2643
+ sizeClasses.cell,
2644
+ alignClass[column.align ?? "start"],
2645
+ column.className,
2646
+ isFirst && "relative"
2647
+ ),
2648
+ children: [
2649
+ isFirst && accent ? /* @__PURE__ */ jsxRuntime.jsx(RowAccent, { color: accent }) : null,
2650
+ renderCell(column, row, rowIndex)
2651
+ ]
2652
+ },
2653
+ column.id
2654
+ );
2655
+ })
2656
+ ]
2657
+ },
2658
+ id
2659
+ );
2660
+ }) })
2661
+ ]
2662
+ }
2663
+ )
2666
2664
  }
2667
- )
2668
- }
2669
- ),
2670
- paginationVisible ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-t border-border px-4 py-3", children: /* @__PURE__ */ jsxRuntime.jsx(
2671
- Pagination,
2672
- {
2673
- pageIndex,
2674
- pageSize,
2675
- pageCount,
2676
- totalRowCount,
2677
- pageSizeOptions,
2678
- onChange: handlePaginationChange,
2679
- labels
2680
- }
2681
- ) }) : null
2682
- ] })
2665
+ ),
2666
+ paginationVisible ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-t border-border px-4 py-3", children: /* @__PURE__ */ jsxRuntime.jsx(
2667
+ Pagination,
2668
+ {
2669
+ pageIndex,
2670
+ pageSize,
2671
+ pageCount,
2672
+ totalRowCount,
2673
+ pageSizeOptions,
2674
+ onChange: handlePaginationChange,
2675
+ labels
2676
+ }
2677
+ ) }) : null
2678
+ ]
2679
+ }
2680
+ )
2683
2681
  ] });
2684
2682
  }
2685
2683
  function renderHeader(header) {
@@ -2738,16 +2736,16 @@ function SortIndicator({ active, direction }) {
2738
2736
 
2739
2737
  // src/components/select/selectVariants.ts
2740
2738
  var selectVariantClass = {
2741
- default: "border border-input bg-background hover:border-ring",
2739
+ default: "border border-input bg-background shadow-xs hover:border-ring",
2742
2740
  filled: "border border-transparent bg-muted hover:bg-muted/80",
2743
2741
  ghost: "border border-transparent bg-transparent hover:bg-accent"
2744
2742
  };
2745
2743
  var selectSizeClass = {
2746
- sm: "h-8 rounded-md ps-2.5 pe-8 text-sm",
2747
- md: "h-9 rounded-md ps-3 pe-9 text-sm",
2748
- lg: "h-11 rounded-md ps-4 pe-10 text-base"
2744
+ sm: "h-8 rounded-lg ps-2.5 pe-8 text-sm",
2745
+ md: "h-10 rounded-lg ps-3 pe-9 text-sm",
2746
+ lg: "h-11 rounded-lg ps-4 pe-10 text-base"
2749
2747
  };
2750
- 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";
2748
+ 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";
2751
2749
  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";
2752
2750
  var selectViewportClass = "p-1";
2753
2751
  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";
@@ -2758,9 +2756,9 @@ var selectStatusClass = "flex items-center justify-center gap-2 px-2 py-6 text-c
2758
2756
 
2759
2757
  // src/components/multi-select/multiSelectVariants.ts
2760
2758
  var multiSelectTriggerSizeClass = {
2761
- sm: "min-h-8 rounded-md ps-2.5 pe-8 py-1 text-sm",
2762
- md: "min-h-9 rounded-md ps-3 pe-9 py-1 text-sm",
2763
- lg: "min-h-11 rounded-md ps-4 pe-10 py-1.5 text-base"
2759
+ sm: "min-h-8 rounded-lg ps-2.5 pe-8 py-1 text-sm",
2760
+ md: "min-h-10 rounded-lg ps-3 pe-9 py-1 text-sm",
2761
+ lg: "min-h-11 rounded-lg ps-4 pe-10 py-1.5 text-base"
2764
2762
  };
2765
2763
  var multiSelectValueRowClass = "flex min-w-0 flex-1 flex-wrap items-center gap-1";
2766
2764
  var multiSelectChipClass = "max-w-full gap-1 pe-1";
@@ -3233,7 +3231,7 @@ function ListPageFilterBar({
3233
3231
  },
3234
3232
  filter.key
3235
3233
  )) });
3236
- const header = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 border-b border-border bg-primary/5 px-4 py-3", children: [
3234
+ 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: [
3237
3235
  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-semibold text-foreground", children: labels.title ?? "Filters" }),
3238
3236
  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: [
3239
3237
  activeCount,
@@ -3245,7 +3243,7 @@ function ListPageFilterBar({
3245
3243
  labels.reset
3246
3244
  ] }) : null
3247
3245
  ] });
3248
- const cardClass = "overflow-hidden rounded-xl border border-border bg-card";
3246
+ const cardClass = "overflow-hidden rounded-xl border border-border bg-card shadow-[var(--shadow-card)]";
3249
3247
  if (manual) {
3250
3248
  return /* @__PURE__ */ jsxRuntime.jsxs("form", { "data-slot": "list-page-filter-bar", className: cardClass, onSubmit: apply, children: [
3251
3249
  header,
@@ -3729,14 +3727,14 @@ var Switch = react.forwardRef(function Switch2({
3729
3727
 
3730
3728
  // src/components/textarea/textareaVariants.ts
3731
3729
  var textareaVariantClass = {
3732
- default: "border border-input bg-background hover:border-ring",
3730
+ default: "border border-input bg-background shadow-xs hover:border-ring",
3733
3731
  filled: "border border-transparent bg-muted hover:bg-muted/80",
3734
3732
  ghost: "border border-transparent bg-transparent hover:bg-accent"
3735
3733
  };
3736
3734
  var textareaSizeClass = {
3737
- sm: "rounded-md px-2.5 py-1.5 text-sm",
3738
- md: "rounded-md px-3 py-2 text-sm",
3739
- lg: "rounded-md px-4 py-2.5 text-base"
3735
+ sm: "rounded-lg px-2.5 py-1.5 text-sm",
3736
+ md: "rounded-lg px-3 py-2 text-sm",
3737
+ lg: "rounded-lg px-4 py-2.5 text-base"
3740
3738
  };
3741
3739
  var textareaResizeClass = {
3742
3740
  none: "resize-none",
@@ -3744,7 +3742,7 @@ var textareaResizeClass = {
3744
3742
  horizontal: "resize-x",
3745
3743
  both: "resize"
3746
3744
  };
3747
- 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";
3745
+ 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";
3748
3746
  var Textarea = react.forwardRef(function Textarea2({
3749
3747
  variant = "default",
3750
3748
  textareaSize = "md",