@otfdashkit/ui 0.1.7 → 0.1.9

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.
Files changed (12) hide show
  1. package/dist/index.js +13 -13
  2. package/dist/index.mjs +13 -13
  3. package/package.json +1 -1
  4. package/src/components/DataTable/DataTable.tsx +1 -1
  5. package/src/data/DataGrid.tsx +1 -1
  6. package/src/primitives/Calendar/Calendar.tsx +7 -7
  7. package/src/primitives/HoverCard/HoverCard.tsx +1 -1
  8. package/src/primitives/Menubar/Menubar.tsx +2 -2
  9. package/src/primitives/calendar.tsx +7 -7
  10. package/src/primitives/chart.tsx +1 -1
  11. package/src/primitives/hover-card.tsx +1 -1
  12. package/src/primitives/menubar.tsx +2 -2
package/dist/index.js CHANGED
@@ -488,20 +488,20 @@ function Calendar({
488
488
  ),
489
489
  button_previous: cn(
490
490
  buttonVariants({ variant: buttonVariant }),
491
- "h-[--cell-size] w-[--cell-size] select-none p-0 aria-disabled:opacity-50",
491
+ "h-[var(--cell-size)] w-[var(--cell-size)] select-none p-0 aria-disabled:opacity-50",
492
492
  defaultClassNames.button_previous
493
493
  ),
494
494
  button_next: cn(
495
495
  buttonVariants({ variant: buttonVariant }),
496
- "h-[--cell-size] w-[--cell-size] select-none p-0 aria-disabled:opacity-50",
496
+ "h-[var(--cell-size)] w-[var(--cell-size)] select-none p-0 aria-disabled:opacity-50",
497
497
  defaultClassNames.button_next
498
498
  ),
499
499
  month_caption: cn(
500
- "flex h-[--cell-size] w-full items-center justify-center px-[--cell-size]",
500
+ "flex h-[var(--cell-size)] w-full items-center justify-center px-[var(--cell-size)]",
501
501
  defaultClassNames.month_caption
502
502
  ),
503
503
  dropdowns: cn(
504
- "flex h-[--cell-size] w-full items-center justify-center gap-1.5 text-sm font-medium",
504
+ "flex h-[var(--cell-size)] w-full items-center justify-center gap-1.5 text-sm font-medium",
505
505
  defaultClassNames.dropdowns
506
506
  ),
507
507
  dropdown_root: cn(
@@ -525,7 +525,7 @@ function Calendar({
525
525
  ),
526
526
  week: cn("mt-2 flex w-full", defaultClassNames.week),
527
527
  week_number_header: cn(
528
- "w-[--cell-size] select-none",
528
+ "w-[var(--cell-size)] select-none",
529
529
  defaultClassNames.week_number_header
530
530
  ),
531
531
  week_number: cn(
@@ -586,7 +586,7 @@ function Calendar({
586
586
  },
587
587
  DayButton: CalendarDayButton,
588
588
  WeekNumber: ({ children, ...props2 }) => {
589
- return /* @__PURE__ */ jsxRuntime.jsx("td", { ...props2, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex size-[--cell-size] items-center justify-center text-center", children }) });
589
+ return /* @__PURE__ */ jsxRuntime.jsx("td", { ...props2, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex size-[var(--cell-size)] items-center justify-center text-center", children }) });
590
590
  },
591
591
  ...components
592
592
  },
@@ -617,7 +617,7 @@ function CalendarDayButton({
617
617
  "data-range-end": modifiers.range_end,
618
618
  "data-range-middle": modifiers.range_middle,
619
619
  className: cn(
620
- "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 flex aspect-square h-auto w-full min-w-[--cell-size] flex-col gap-1 font-normal leading-none data-[range-end=true]:rounded-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] [&>span]:text-xs [&>span]:opacity-70",
620
+ "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 flex aspect-square h-auto w-full min-w-[var(--cell-size)] flex-col gap-1 font-normal leading-none data-[range-end=true]:rounded-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] [&>span]:text-xs [&>span]:opacity-70",
621
621
  defaultClassNames.day,
622
622
  className
623
623
  ),
@@ -1120,7 +1120,7 @@ var ChartTooltipContent = React137__namespace.forwardRef(
1120
1120
  "div",
1121
1121
  {
1122
1122
  className: cn(
1123
- "shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]",
1123
+ "shrink-0 rounded-[2px] border-[var(--color-border)] bg-[var(--color-bg)]",
1124
1124
  {
1125
1125
  "h-2.5 w-2.5": indicator === "dot",
1126
1126
  "w-1": indicator === "line",
@@ -1866,7 +1866,7 @@ var HoverCardContent = React137__namespace.forwardRef(({ className, align = "cen
1866
1866
  align,
1867
1867
  sideOffset,
1868
1868
  className: cn(
1869
- "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-hover-card-content-transform-origin]",
1869
+ "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[var(--radix-hover-card-content-transform-origin)]",
1870
1870
  className
1871
1871
  ),
1872
1872
  ...props
@@ -2146,7 +2146,7 @@ var MenubarSubContent = React137__namespace.forwardRef(({ className, ...props },
2146
2146
  {
2147
2147
  ref,
2148
2148
  className: cn(
2149
- "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-menubar-content-transform-origin]",
2149
+ "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[var(--radix-menubar-content-transform-origin)]",
2150
2150
  className
2151
2151
  ),
2152
2152
  ...props
@@ -2162,7 +2162,7 @@ var MenubarContent = React137__namespace.forwardRef(
2162
2162
  alignOffset,
2163
2163
  sideOffset,
2164
2164
  className: cn(
2165
- "z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-menubar-content-transform-origin]",
2165
+ "z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[var(--radix-menubar-content-transform-origin)]",
2166
2166
  className
2167
2167
  ),
2168
2168
  ...props
@@ -3503,7 +3503,7 @@ function DataTableColumnHeader({ column, title }) {
3503
3503
  className: "flex items-center gap-1 hover:text-[hsl(var(--foreground))]",
3504
3504
  children: [
3505
3505
  title,
3506
- sorted === "asc" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUp, { className: "h-3 w-3" }) : sorted === "desc" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowDown, { className: "h-3 w-3" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUpDown, { className: "h-3 w-3 opacity-50" })
3506
+ sorted === "asc" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUp, { className: "h-3 w-3" }) : sorted === "desc" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowDown, { className: "h-3 w-3" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUpDown, { className: "h-3 w-3" })
3507
3507
  ]
3508
3508
  }
3509
3509
  );
@@ -10845,7 +10845,7 @@ function Checkbox2({
10845
10845
  function SortIcon({ dir }) {
10846
10846
  if (dir === "asc") return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUp, { className: "h-3.5 w-3.5 shrink-0" });
10847
10847
  if (dir === "desc") return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowDown, { className: "h-3.5 w-3.5 shrink-0" });
10848
- return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUpDown, { className: "h-3.5 w-3.5 shrink-0 opacity-30" });
10848
+ return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUpDown, { className: "h-3.5 w-3.5 shrink-0" });
10849
10849
  }
10850
10850
  function ColumnVisibilityDropdown({
10851
10851
  columns,
package/dist/index.mjs CHANGED
@@ -435,20 +435,20 @@ function Calendar({
435
435
  ),
436
436
  button_previous: cn(
437
437
  buttonVariants({ variant: buttonVariant }),
438
- "h-[--cell-size] w-[--cell-size] select-none p-0 aria-disabled:opacity-50",
438
+ "h-[var(--cell-size)] w-[var(--cell-size)] select-none p-0 aria-disabled:opacity-50",
439
439
  defaultClassNames.button_previous
440
440
  ),
441
441
  button_next: cn(
442
442
  buttonVariants({ variant: buttonVariant }),
443
- "h-[--cell-size] w-[--cell-size] select-none p-0 aria-disabled:opacity-50",
443
+ "h-[var(--cell-size)] w-[var(--cell-size)] select-none p-0 aria-disabled:opacity-50",
444
444
  defaultClassNames.button_next
445
445
  ),
446
446
  month_caption: cn(
447
- "flex h-[--cell-size] w-full items-center justify-center px-[--cell-size]",
447
+ "flex h-[var(--cell-size)] w-full items-center justify-center px-[var(--cell-size)]",
448
448
  defaultClassNames.month_caption
449
449
  ),
450
450
  dropdowns: cn(
451
- "flex h-[--cell-size] w-full items-center justify-center gap-1.5 text-sm font-medium",
451
+ "flex h-[var(--cell-size)] w-full items-center justify-center gap-1.5 text-sm font-medium",
452
452
  defaultClassNames.dropdowns
453
453
  ),
454
454
  dropdown_root: cn(
@@ -472,7 +472,7 @@ function Calendar({
472
472
  ),
473
473
  week: cn("mt-2 flex w-full", defaultClassNames.week),
474
474
  week_number_header: cn(
475
- "w-[--cell-size] select-none",
475
+ "w-[var(--cell-size)] select-none",
476
476
  defaultClassNames.week_number_header
477
477
  ),
478
478
  week_number: cn(
@@ -533,7 +533,7 @@ function Calendar({
533
533
  },
534
534
  DayButton: CalendarDayButton,
535
535
  WeekNumber: ({ children, ...props2 }) => {
536
- return /* @__PURE__ */ jsx("td", { ...props2, children: /* @__PURE__ */ jsx("div", { className: "flex size-[--cell-size] items-center justify-center text-center", children }) });
536
+ return /* @__PURE__ */ jsx("td", { ...props2, children: /* @__PURE__ */ jsx("div", { className: "flex size-[var(--cell-size)] items-center justify-center text-center", children }) });
537
537
  },
538
538
  ...components
539
539
  },
@@ -564,7 +564,7 @@ function CalendarDayButton({
564
564
  "data-range-end": modifiers.range_end,
565
565
  "data-range-middle": modifiers.range_middle,
566
566
  className: cn(
567
- "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 flex aspect-square h-auto w-full min-w-[--cell-size] flex-col gap-1 font-normal leading-none data-[range-end=true]:rounded-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] [&>span]:text-xs [&>span]:opacity-70",
567
+ "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 flex aspect-square h-auto w-full min-w-[var(--cell-size)] flex-col gap-1 font-normal leading-none data-[range-end=true]:rounded-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] [&>span]:text-xs [&>span]:opacity-70",
568
568
  defaultClassNames.day,
569
569
  className
570
570
  ),
@@ -1067,7 +1067,7 @@ var ChartTooltipContent = React137.forwardRef(
1067
1067
  "div",
1068
1068
  {
1069
1069
  className: cn(
1070
- "shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]",
1070
+ "shrink-0 rounded-[2px] border-[var(--color-border)] bg-[var(--color-bg)]",
1071
1071
  {
1072
1072
  "h-2.5 w-2.5": indicator === "dot",
1073
1073
  "w-1": indicator === "line",
@@ -1813,7 +1813,7 @@ var HoverCardContent = React137.forwardRef(({ className, align = "center", sideO
1813
1813
  align,
1814
1814
  sideOffset,
1815
1815
  className: cn(
1816
- "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-hover-card-content-transform-origin]",
1816
+ "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[var(--radix-hover-card-content-transform-origin)]",
1817
1817
  className
1818
1818
  ),
1819
1819
  ...props
@@ -2093,7 +2093,7 @@ var MenubarSubContent = React137.forwardRef(({ className, ...props }, ref) => /*
2093
2093
  {
2094
2094
  ref,
2095
2095
  className: cn(
2096
- "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-menubar-content-transform-origin]",
2096
+ "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[var(--radix-menubar-content-transform-origin)]",
2097
2097
  className
2098
2098
  ),
2099
2099
  ...props
@@ -2109,7 +2109,7 @@ var MenubarContent = React137.forwardRef(
2109
2109
  alignOffset,
2110
2110
  sideOffset,
2111
2111
  className: cn(
2112
- "z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-menubar-content-transform-origin]",
2112
+ "z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[var(--radix-menubar-content-transform-origin)]",
2113
2113
  className
2114
2114
  ),
2115
2115
  ...props
@@ -3450,7 +3450,7 @@ function DataTableColumnHeader({ column, title }) {
3450
3450
  className: "flex items-center gap-1 hover:text-[hsl(var(--foreground))]",
3451
3451
  children: [
3452
3452
  title,
3453
- sorted === "asc" ? /* @__PURE__ */ jsx(ArrowUp, { className: "h-3 w-3" }) : sorted === "desc" ? /* @__PURE__ */ jsx(ArrowDown, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(ArrowUpDown, { className: "h-3 w-3 opacity-50" })
3453
+ sorted === "asc" ? /* @__PURE__ */ jsx(ArrowUp, { className: "h-3 w-3" }) : sorted === "desc" ? /* @__PURE__ */ jsx(ArrowDown, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(ArrowUpDown, { className: "h-3 w-3" })
3454
3454
  ]
3455
3455
  }
3456
3456
  );
@@ -10792,7 +10792,7 @@ function Checkbox2({
10792
10792
  function SortIcon({ dir }) {
10793
10793
  if (dir === "asc") return /* @__PURE__ */ jsx(ArrowUp, { className: "h-3.5 w-3.5 shrink-0" });
10794
10794
  if (dir === "desc") return /* @__PURE__ */ jsx(ArrowDown, { className: "h-3.5 w-3.5 shrink-0" });
10795
- return /* @__PURE__ */ jsx(ArrowUpDown, { className: "h-3.5 w-3.5 shrink-0 opacity-30" });
10795
+ return /* @__PURE__ */ jsx(ArrowUpDown, { className: "h-3.5 w-3.5 shrink-0" });
10796
10796
  }
10797
10797
  function ColumnVisibilityDropdown({
10798
10798
  columns,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@otfdashkit/ui",
3
- "version": "0.1.7",
3
+ "version": "0.1.9",
4
4
  "description": "OTF UI: 150+ React components for web apps (primitives, blocks, layouts and charts), themed by @otfdashkit/tokens. Works with Tailwind CSS v3 and v4. Shares component names and tokens with @otfdashkit/ui-native.",
5
5
  "keywords": [
6
6
  "otfdashkit",
package/src/components/DataTable/DataTable.tsx CHANGED
@@ -34,7 +34,7 @@ export function DataTableColumnHeader({ column, title }: { column: any; title: s
34
34
  className="flex items-center gap-1 hover:text-[hsl(var(--foreground))]"
35
35
  >
36
36
  {title}
37
- {sorted === 'asc' ? <ArrowUp className="h-3 w-3" /> : sorted === 'desc' ? <ArrowDown className="h-3 w-3" /> : <ArrowUpDown className="h-3 w-3 opacity-50" />}
37
+ {sorted === 'asc' ? <ArrowUp className="h-3 w-3" /> : sorted === 'desc' ? <ArrowDown className="h-3 w-3" /> : <ArrowUpDown className="h-3 w-3" />}
38
38
  </button>
39
39
  )
40
40
  }
package/src/data/DataGrid.tsx CHANGED
@@ -91,7 +91,7 @@ export interface DataGridProps<T extends object> {
91
91
  function SortIcon({ dir }: { dir: 'asc' | 'desc' | false }) {
92
92
  if (dir === 'asc') return <ArrowUp className="h-3.5 w-3.5 shrink-0" />
93
93
  if (dir === 'desc') return <ArrowDown className="h-3.5 w-3.5 shrink-0" />
94
- return <ArrowUpDown className="h-3.5 w-3.5 shrink-0 opacity-30" />
94
+ return <ArrowUpDown className="h-3.5 w-3.5 shrink-0" />
95
95
  }
96
96
 
97
97
  // ── Column visibility dropdown ───────────────────────────────────
package/src/primitives/Calendar/Calendar.tsx CHANGED
@@ -54,20 +54,20 @@ function Calendar({
54
54
  ),
55
55
  button_previous: cn(
56
56
  buttonVariants({ variant: buttonVariant }),
57
- "h-[--cell-size] w-[--cell-size] select-none p-0 aria-disabled:opacity-50",
57
+ "h-[var(--cell-size)] w-[var(--cell-size)] select-none p-0 aria-disabled:opacity-50",
58
58
  defaultClassNames.button_previous
59
59
  ),
60
60
  button_next: cn(
61
61
  buttonVariants({ variant: buttonVariant }),
62
- "h-[--cell-size] w-[--cell-size] select-none p-0 aria-disabled:opacity-50",
62
+ "h-[var(--cell-size)] w-[var(--cell-size)] select-none p-0 aria-disabled:opacity-50",
63
63
  defaultClassNames.button_next
64
64
  ),
65
65
  month_caption: cn(
66
- "flex h-[--cell-size] w-full items-center justify-center px-[--cell-size]",
66
+ "flex h-[var(--cell-size)] w-full items-center justify-center px-[var(--cell-size)]",
67
67
  defaultClassNames.month_caption
68
68
  ),
69
69
  dropdowns: cn(
70
- "flex h-[--cell-size] w-full items-center justify-center gap-1.5 text-sm font-medium",
70
+ "flex h-[var(--cell-size)] w-full items-center justify-center gap-1.5 text-sm font-medium",
71
71
  defaultClassNames.dropdowns
72
72
  ),
73
73
  dropdown_root: cn(
@@ -93,7 +93,7 @@ function Calendar({
93
93
  ),
94
94
  week: cn("mt-2 flex w-full", defaultClassNames.week),
95
95
  week_number_header: cn(
96
- "w-[--cell-size] select-none",
96
+ "w-[var(--cell-size)] select-none",
97
97
  defaultClassNames.week_number_header
98
98
  ),
99
99
  week_number: cn(
@@ -160,7 +160,7 @@ function Calendar({
160
160
  WeekNumber: ({ children, ...props }) => {
161
161
  return (
162
162
  <td {...props}>
163
- <div className="flex size-[--cell-size] items-center justify-center text-center">
163
+ <div className="flex size-[var(--cell-size)] items-center justify-center text-center">
164
164
  {children}
165
165
  </div>
166
166
  </td>
@@ -202,7 +202,7 @@ function CalendarDayButton({
202
202
  data-range-end={modifiers.range_end}
203
203
  data-range-middle={modifiers.range_middle}
204
204
  className={cn(
205
- "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 flex aspect-square h-auto w-full min-w-[--cell-size] flex-col gap-1 font-normal leading-none data-[range-end=true]:rounded-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] [&>span]:text-xs [&>span]:opacity-70",
205
+ "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 flex aspect-square h-auto w-full min-w-[var(--cell-size)] flex-col gap-1 font-normal leading-none data-[range-end=true]:rounded-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] [&>span]:text-xs [&>span]:opacity-70",
206
206
  defaultClassNames.day,
207
207
  className
208
208
  )}
package/src/primitives/HoverCard/HoverCard.tsx CHANGED
@@ -20,7 +20,7 @@ const HoverCardContent = React.forwardRef<
20
20
  sideOffset={sideOffset}
21
21
  data-slot="hover-card"
22
22
  className={cn(
23
- "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-hover-card-content-transform-origin]",
23
+ "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[var(--radix-hover-card-content-transform-origin)]",
24
24
  className
25
25
  )}
26
26
  {...props}
package/src/primitives/Menubar/Menubar.tsx CHANGED
@@ -93,7 +93,7 @@ const MenubarSubContent = React.forwardRef<
93
93
  <MenubarPrimitive.SubContent
94
94
  ref={ref}
95
95
  className={cn(
96
- "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-menubar-content-transform-origin]",
96
+ "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[var(--radix-menubar-content-transform-origin)]",
97
97
  className
98
98
  )}
99
99
  {...props}
@@ -116,7 +116,7 @@ const MenubarContent = React.forwardRef<
116
116
  alignOffset={alignOffset}
117
117
  sideOffset={sideOffset}
118
118
  className={cn(
119
- "z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-menubar-content-transform-origin]",
119
+ "z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[var(--radix-menubar-content-transform-origin)]",
120
120
  className
121
121
  )}
122
122
  {...props}
package/src/primitives/calendar.tsx CHANGED
@@ -54,20 +54,20 @@ function Calendar({
54
54
  ),
55
55
  button_previous: cn(
56
56
  buttonVariants({ variant: buttonVariant }),
57
- "h-[--cell-size] w-[--cell-size] select-none p-0 aria-disabled:opacity-50",
57
+ "h-[var(--cell-size)] w-[var(--cell-size)] select-none p-0 aria-disabled:opacity-50",
58
58
  defaultClassNames.button_previous
59
59
  ),
60
60
  button_next: cn(
61
61
  buttonVariants({ variant: buttonVariant }),
62
- "h-[--cell-size] w-[--cell-size] select-none p-0 aria-disabled:opacity-50",
62
+ "h-[var(--cell-size)] w-[var(--cell-size)] select-none p-0 aria-disabled:opacity-50",
63
63
  defaultClassNames.button_next
64
64
  ),
65
65
  month_caption: cn(
66
- "flex h-[--cell-size] w-full items-center justify-center px-[--cell-size]",
66
+ "flex h-[var(--cell-size)] w-full items-center justify-center px-[var(--cell-size)]",
67
67
  defaultClassNames.month_caption
68
68
  ),
69
69
  dropdowns: cn(
70
- "flex h-[--cell-size] w-full items-center justify-center gap-1.5 text-sm font-medium",
70
+ "flex h-[var(--cell-size)] w-full items-center justify-center gap-1.5 text-sm font-medium",
71
71
  defaultClassNames.dropdowns
72
72
  ),
73
73
  dropdown_root: cn(
@@ -93,7 +93,7 @@ function Calendar({
93
93
  ),
94
94
  week: cn("mt-2 flex w-full", defaultClassNames.week),
95
95
  week_number_header: cn(
96
- "w-[--cell-size] select-none",
96
+ "w-[var(--cell-size)] select-none",
97
97
  defaultClassNames.week_number_header
98
98
  ),
99
99
  week_number: cn(
@@ -160,7 +160,7 @@ function Calendar({
160
160
  WeekNumber: ({ children, ...props }) => {
161
161
  return (
162
162
  <td {...props}>
163
- <div className="flex size-[--cell-size] items-center justify-center text-center">
163
+ <div className="flex size-[var(--cell-size)] items-center justify-center text-center">
164
164
  {children}
165
165
  </div>
166
166
  </td>
@@ -202,7 +202,7 @@ function CalendarDayButton({
202
202
  data-range-end={modifiers.range_end}
203
203
  data-range-middle={modifiers.range_middle}
204
204
  className={cn(
205
- "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 flex aspect-square h-auto w-full min-w-[--cell-size] flex-col gap-1 font-normal leading-none data-[range-end=true]:rounded-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] [&>span]:text-xs [&>span]:opacity-70",
205
+ "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 flex aspect-square h-auto w-full min-w-[var(--cell-size)] flex-col gap-1 font-normal leading-none data-[range-end=true]:rounded-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] [&>span]:text-xs [&>span]:opacity-70",
206
206
  defaultClassNames.day,
207
207
  className
208
208
  )}
package/src/primitives/chart.tsx CHANGED
@@ -212,7 +212,7 @@ const ChartTooltipContent: React.ForwardRefExoticComponent<
212
212
  !hideIndicator && (
213
213
  <div
214
214
  className={cn(
215
- "shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]",
215
+ "shrink-0 rounded-[2px] border-[var(--color-border)] bg-[var(--color-bg)]",
216
216
  {
217
217
  "h-2.5 w-2.5": indicator === "dot",
218
218
  "w-1": indicator === "line",
package/src/primitives/hover-card.tsx CHANGED
@@ -19,7 +19,7 @@ const HoverCardContent = React.forwardRef<
19
19
  align={align}
20
20
  sideOffset={sideOffset}
21
21
  className={cn(
22
- "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-hover-card-content-transform-origin]",
22
+ "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[var(--radix-hover-card-content-transform-origin)]",
23
23
  className
24
24
  )}
25
25
  {...props}
package/src/primitives/menubar.tsx CHANGED
@@ -93,7 +93,7 @@ const MenubarSubContent = React.forwardRef<
93
93
  <MenubarPrimitive.SubContent
94
94
  ref={ref}
95
95
  className={cn(
96
- "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-menubar-content-transform-origin]",
96
+ "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[var(--radix-menubar-content-transform-origin)]",
97
97
  className
98
98
  )}
99
99
  {...props}
@@ -116,7 +116,7 @@ const MenubarContent = React.forwardRef<
116
116
  alignOffset={alignOffset}
117
117
  sideOffset={sideOffset}
118
118
  className={cn(
119
- "z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-menubar-content-transform-origin]",
119
+ "z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[var(--radix-menubar-content-transform-origin)]",
120
120
  className
121
121
  )}
122
122
  {...props}