@otfdashkit/ui 0.1.6 → 0.1.8

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 (14) hide show
  1. package/README.md +46 -5
  2. package/dist/index.js +19 -18
  3. package/dist/index.mjs +19 -18
  4. package/package.json +2 -4
  5. package/src/charts/area-chart.tsx +2 -2
  6. package/src/charts/bar-chart.tsx +4 -4
  7. package/src/charts/line-chart.tsx +2 -2
  8. package/src/primitives/Calendar/Calendar.tsx +7 -7
  9. package/src/primitives/HoverCard/HoverCard.tsx +1 -1
  10. package/src/primitives/Menubar/Menubar.tsx +2 -2
  11. package/src/primitives/calendar.tsx +7 -7
  12. package/src/primitives/chart.tsx +1 -1
  13. package/src/primitives/hover-card.tsx +1 -1
  14. package/src/primitives/menubar.tsx +2 -2
package/README.md CHANGED
@@ -1,7 +1,7 @@
1
1
  <h1 align="center">@otfdashkit/ui</h1>
2
2
 
3
3
  <p align="center">
4
- 90 web components for builders shipping production apps — Radix under the hood, Tailwind v4 on top, AI-agent-readable by design.
4
+ 150+ web components for builders shipping production apps, 90 of them documented one by one. Tailwind CSS v3 or v4 on top, AI-agent-readable by design.
5
5
  </p>
6
6
 
7
7
  <p align="center">
@@ -13,7 +13,7 @@
13
13
  </a>
14
14
  <img src="https://img.shields.io/badge/License-MIT-blue.svg?style=flat-square" alt="MIT License">
15
15
  <img src="https://img.shields.io/badge/React-19-000?style=flat-square" alt="React 19">
16
- <img src="https://img.shields.io/badge/Tailwind-v4-000?style=flat-square" alt="Tailwind v4">
16
+ <img src="https://img.shields.io/badge/Tailwind-v3%20%7C%20v4-000?style=flat-square" alt="Tailwind v3 or v4">
17
17
  </p>
18
18
 
19
19
  ---
@@ -27,7 +27,7 @@
27
27
  - **Advanced** — Tiptap editor, ImageCrop, file uploaders, marquees, shiki-powered code blocks, video player
28
28
  - **17 themes** out of the box from [`@otfdashkit/tokens`](https://www.npmjs.com/package/@otfdashkit/tokens) — swap palette by changing one attribute on `<html>`
29
29
 
30
- 90 installable web components in [`src/`](src/). Full catalog at the Storybook below.
30
+ 150+ web components in [`src/`](src/), 90 documented one by one. Full catalog at the Storybook below.
31
31
 
32
32
  ## Live demos
33
33
 
@@ -43,6 +43,47 @@ pnpm add @otfdashkit/ui @otfdashkit/tokens
43
43
  # or: bun add @otfdashkit/ui @otfdashkit/tokens
44
44
  ```
45
45
 
46
+ ## Tailwind setup
47
+
48
+ Tailwind needs two things: scan the package source, and map the theme tokens (HSL channels) to colours.
49
+
50
+ ```css
51
+ /* Tailwind v4: in your global CSS */
52
+ @source "../node_modules/@otfdashkit/ui/src/**/*.{ts,tsx}";
53
+
54
+ @theme inline {
55
+ --color-background: hsl(var(--background));
56
+ --color-foreground: hsl(var(--foreground));
57
+ --color-card: hsl(var(--card));
58
+ --color-card-foreground: hsl(var(--card-foreground));
59
+ --color-popover: hsl(var(--popover));
60
+ --color-popover-foreground: hsl(var(--popover-foreground));
61
+ --color-primary: hsl(var(--primary));
62
+ --color-primary-foreground: hsl(var(--primary-foreground));
63
+ --color-secondary: hsl(var(--secondary));
64
+ --color-secondary-foreground: hsl(var(--secondary-foreground));
65
+ --color-muted: hsl(var(--muted));
66
+ --color-muted-foreground: hsl(var(--muted-foreground));
67
+ --color-accent: hsl(var(--accent));
68
+ --color-accent-foreground: hsl(var(--accent-foreground));
69
+ --color-destructive: hsl(var(--destructive));
70
+ --color-destructive-foreground: hsl(var(--destructive-foreground));
71
+ --color-border: hsl(var(--border));
72
+ --color-input: hsl(var(--input));
73
+ --color-ring: hsl(var(--ring));
74
+ }
75
+ ```
76
+
77
+ ```js
78
+ // Tailwind v3: tailwind.config.js
79
+ import { otfPreset } from '@otfdashkit/tokens/tailwind-preset'
80
+
81
+ export default {
82
+ presets: [otfPreset],
83
+ content: ['./src/**/*.{ts,tsx}', './node_modules/@otfdashkit/ui/src/**/*.{ts,tsx}'],
84
+ }
85
+ ```
86
+
46
87
  ## Quick start
47
88
 
48
89
  ```tsx
@@ -58,7 +99,7 @@ export default function SignInCard() {
58
99
  return (
59
100
  <Card>
60
101
  <Input placeholder="Email" />
61
- <Button variant="primary" size="lg">Continue</Button>
102
+ <Button size="lg">Continue</Button>
62
103
  </Card>
63
104
  )
64
105
  }
@@ -92,7 +133,7 @@ Questions, bugs, feature requests: **[discord.gg/gpXyu7SqNZ](https://discord.gg/
92
133
 
93
134
  ## Status
94
135
 
95
- `v0.1.x` — alpha. APIs may change before `1.0`. Pin exact releases in production.
136
+ Live on npm and in production: the OTF SaaS Dashboard kit is built on it. Versions follow semver; while on `0.x`, a minor release can change an API, so pin exact versions in production.
96
137
 
97
138
  ## License
98
139
 
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
@@ -7098,10 +7098,10 @@ function AreaChart({
7098
7098
  }) {
7099
7099
  const keys = Array.isArray(dataKey) ? dataKey : [dataKey];
7100
7100
  const curve = curved ? "monotone" : "linear";
7101
- return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-full overflow-hidden", className), style: { minWidth: 0 }, children: /* @__PURE__ */ jsxRuntime.jsx(RechartsPrimitive.ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ jsxRuntime.jsxs(RechartsPrimitive.AreaChart, { data: data.map((d) => ({ ...d })), margin: { top: 4, right: 4, left: -20, bottom: 0 }, children: [
7101
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-full overflow-hidden", className), style: { minWidth: 0 }, children: /* @__PURE__ */ jsxRuntime.jsx(RechartsPrimitive.ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ jsxRuntime.jsxs(RechartsPrimitive.AreaChart, { data: data.map((d) => ({ ...d })), margin: { top: 4, right: 4, left: 0, bottom: 0 }, children: [
7102
7102
  showGrid && /* @__PURE__ */ jsxRuntime.jsx(RechartsPrimitive.CartesianGrid, { strokeDasharray: "3 3", stroke: "hsl(var(--border))" }),
7103
7103
  /* @__PURE__ */ jsxRuntime.jsx(RechartsPrimitive.XAxis, { dataKey: xAxisKey, tick: { fontSize: 12, fill: "hsl(var(--muted-foreground))" }, axisLine: false, tickLine: false }),
7104
- /* @__PURE__ */ jsxRuntime.jsx(RechartsPrimitive.YAxis, { tick: { fontSize: 12, fill: "hsl(var(--muted-foreground))" }, axisLine: false, tickLine: false }),
7104
+ /* @__PURE__ */ jsxRuntime.jsx(RechartsPrimitive.YAxis, { width: "auto", tick: { fontSize: 12, fill: "hsl(var(--muted-foreground))" }, axisLine: false, tickLine: false }),
7105
7105
  showTooltip && /* @__PURE__ */ jsxRuntime.jsx(
7106
7106
  RechartsPrimitive.Tooltip,
7107
7107
  {
@@ -7164,7 +7164,7 @@ function BarChart({
7164
7164
  {
7165
7165
  data: data.map((d) => ({ ...d })),
7166
7166
  layout,
7167
- margin: { top: 4, right: lineDataKey ? 8 : 4, left: -20, bottom: 0 },
7167
+ margin: { top: 4, right: lineDataKey ? 8 : 4, left: 0, bottom: 0 },
7168
7168
  barSize,
7169
7169
  maxBarSize,
7170
7170
  barCategoryGap,
@@ -7172,13 +7172,14 @@ function BarChart({
7172
7172
  showGrid && /* @__PURE__ */ jsxRuntime.jsx(RechartsPrimitive.CartesianGrid, { strokeDasharray: "3 3", stroke: "hsl(var(--border))" }),
7173
7173
  isVertical ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
7174
7174
  /* @__PURE__ */ jsxRuntime.jsx(RechartsPrimitive.XAxis, { type: "number", tick: { fontSize: 12, fill: "hsl(var(--muted-foreground))" }, axisLine: false, tickLine: false }),
7175
- /* @__PURE__ */ jsxRuntime.jsx(RechartsPrimitive.YAxis, { type: "category", dataKey: xAxisKey, tick: { fontSize: 12, fill: "hsl(var(--muted-foreground))" }, axisLine: false, tickLine: false })
7175
+ /* @__PURE__ */ jsxRuntime.jsx(RechartsPrimitive.YAxis, { width: "auto", type: "category", dataKey: xAxisKey, tick: { fontSize: 12, fill: "hsl(var(--muted-foreground))" }, axisLine: false, tickLine: false })
7176
7176
  ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
7177
7177
  /* @__PURE__ */ jsxRuntime.jsx(RechartsPrimitive.XAxis, { dataKey: xAxisKey, tick: { fontSize: 12, fill: "hsl(var(--muted-foreground))" }, axisLine: false, tickLine: false }),
7178
- /* @__PURE__ */ jsxRuntime.jsx(RechartsPrimitive.YAxis, { yAxisId: "left", tick: { fontSize: 12, fill: "hsl(var(--muted-foreground))" }, axisLine: false, tickLine: false }),
7178
+ /* @__PURE__ */ jsxRuntime.jsx(RechartsPrimitive.YAxis, { width: "auto", yAxisId: "left", tick: { fontSize: 12, fill: "hsl(var(--muted-foreground))" }, axisLine: false, tickLine: false }),
7179
7179
  lineDataKey && /* @__PURE__ */ jsxRuntime.jsx(
7180
7180
  RechartsPrimitive.YAxis,
7181
7181
  {
7182
+ width: "auto",
7182
7183
  yAxisId: "right",
7183
7184
  orientation: "right",
7184
7185
  tick: { fontSize: 12, fill: "hsl(var(--muted-foreground))" },
@@ -7253,10 +7254,10 @@ function LineChart({
7253
7254
  const keys = Array.isArray(dataKey) ? dataKey : [dataKey];
7254
7255
  const curve = curved ? "monotone" : "linear";
7255
7256
  const dash = dotted ? "4 4" : void 0;
7256
- return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-full overflow-hidden", className), style: { minWidth: 0 }, children: /* @__PURE__ */ jsxRuntime.jsx(RechartsPrimitive.ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ jsxRuntime.jsxs(RechartsPrimitive.LineChart, { data: data.map((d) => ({ ...d })), margin: { top: 4, right: 4, left: -20, bottom: 0 }, children: [
7257
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-full overflow-hidden", className), style: { minWidth: 0 }, children: /* @__PURE__ */ jsxRuntime.jsx(RechartsPrimitive.ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ jsxRuntime.jsxs(RechartsPrimitive.LineChart, { data: data.map((d) => ({ ...d })), margin: { top: 4, right: 4, left: 0, bottom: 0 }, children: [
7257
7258
  showGrid && /* @__PURE__ */ jsxRuntime.jsx(RechartsPrimitive.CartesianGrid, { strokeDasharray: "3 3", stroke: "hsl(var(--border))" }),
7258
7259
  /* @__PURE__ */ jsxRuntime.jsx(RechartsPrimitive.XAxis, { dataKey: xAxisKey, tick: { fontSize: 12, fill: "hsl(var(--muted-foreground))" }, axisLine: false, tickLine: false }),
7259
- /* @__PURE__ */ jsxRuntime.jsx(RechartsPrimitive.YAxis, { tick: { fontSize: 12, fill: "hsl(var(--muted-foreground))" }, axisLine: false, tickLine: false }),
7260
+ /* @__PURE__ */ jsxRuntime.jsx(RechartsPrimitive.YAxis, { width: "auto", tick: { fontSize: 12, fill: "hsl(var(--muted-foreground))" }, axisLine: false, tickLine: false }),
7260
7261
  showTooltip && /* @__PURE__ */ jsxRuntime.jsx(
7261
7262
  RechartsPrimitive.Tooltip,
7262
7263
  {
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
@@ -7045,10 +7045,10 @@ function AreaChart({
7045
7045
  }) {
7046
7046
  const keys = Array.isArray(dataKey) ? dataKey : [dataKey];
7047
7047
  const curve = curved ? "monotone" : "linear";
7048
- return /* @__PURE__ */ jsx("div", { className: cn("w-full overflow-hidden", className), style: { minWidth: 0 }, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ jsxs(AreaChart$1, { data: data.map((d) => ({ ...d })), margin: { top: 4, right: 4, left: -20, bottom: 0 }, children: [
7048
+ return /* @__PURE__ */ jsx("div", { className: cn("w-full overflow-hidden", className), style: { minWidth: 0 }, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ jsxs(AreaChart$1, { data: data.map((d) => ({ ...d })), margin: { top: 4, right: 4, left: 0, bottom: 0 }, children: [
7049
7049
  showGrid && /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3", stroke: "hsl(var(--border))" }),
7050
7050
  /* @__PURE__ */ jsx(XAxis, { dataKey: xAxisKey, tick: { fontSize: 12, fill: "hsl(var(--muted-foreground))" }, axisLine: false, tickLine: false }),
7051
- /* @__PURE__ */ jsx(YAxis, { tick: { fontSize: 12, fill: "hsl(var(--muted-foreground))" }, axisLine: false, tickLine: false }),
7051
+ /* @__PURE__ */ jsx(YAxis, { width: "auto", tick: { fontSize: 12, fill: "hsl(var(--muted-foreground))" }, axisLine: false, tickLine: false }),
7052
7052
  showTooltip && /* @__PURE__ */ jsx(
7053
7053
  Tooltip,
7054
7054
  {
@@ -7111,7 +7111,7 @@ function BarChart({
7111
7111
  {
7112
7112
  data: data.map((d) => ({ ...d })),
7113
7113
  layout,
7114
- margin: { top: 4, right: lineDataKey ? 8 : 4, left: -20, bottom: 0 },
7114
+ margin: { top: 4, right: lineDataKey ? 8 : 4, left: 0, bottom: 0 },
7115
7115
  barSize,
7116
7116
  maxBarSize,
7117
7117
  barCategoryGap,
@@ -7119,13 +7119,14 @@ function BarChart({
7119
7119
  showGrid && /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3", stroke: "hsl(var(--border))" }),
7120
7120
  isVertical ? /* @__PURE__ */ jsxs(Fragment, { children: [
7121
7121
  /* @__PURE__ */ jsx(XAxis, { type: "number", tick: { fontSize: 12, fill: "hsl(var(--muted-foreground))" }, axisLine: false, tickLine: false }),
7122
- /* @__PURE__ */ jsx(YAxis, { type: "category", dataKey: xAxisKey, tick: { fontSize: 12, fill: "hsl(var(--muted-foreground))" }, axisLine: false, tickLine: false })
7122
+ /* @__PURE__ */ jsx(YAxis, { width: "auto", type: "category", dataKey: xAxisKey, tick: { fontSize: 12, fill: "hsl(var(--muted-foreground))" }, axisLine: false, tickLine: false })
7123
7123
  ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
7124
7124
  /* @__PURE__ */ jsx(XAxis, { dataKey: xAxisKey, tick: { fontSize: 12, fill: "hsl(var(--muted-foreground))" }, axisLine: false, tickLine: false }),
7125
- /* @__PURE__ */ jsx(YAxis, { yAxisId: "left", tick: { fontSize: 12, fill: "hsl(var(--muted-foreground))" }, axisLine: false, tickLine: false }),
7125
+ /* @__PURE__ */ jsx(YAxis, { width: "auto", yAxisId: "left", tick: { fontSize: 12, fill: "hsl(var(--muted-foreground))" }, axisLine: false, tickLine: false }),
7126
7126
  lineDataKey && /* @__PURE__ */ jsx(
7127
7127
  YAxis,
7128
7128
  {
7129
+ width: "auto",
7129
7130
  yAxisId: "right",
7130
7131
  orientation: "right",
7131
7132
  tick: { fontSize: 12, fill: "hsl(var(--muted-foreground))" },
@@ -7200,10 +7201,10 @@ function LineChart({
7200
7201
  const keys = Array.isArray(dataKey) ? dataKey : [dataKey];
7201
7202
  const curve = curved ? "monotone" : "linear";
7202
7203
  const dash = dotted ? "4 4" : void 0;
7203
- return /* @__PURE__ */ jsx("div", { className: cn("w-full overflow-hidden", className), style: { minWidth: 0 }, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ jsxs(LineChart$1, { data: data.map((d) => ({ ...d })), margin: { top: 4, right: 4, left: -20, bottom: 0 }, children: [
7204
+ return /* @__PURE__ */ jsx("div", { className: cn("w-full overflow-hidden", className), style: { minWidth: 0 }, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ jsxs(LineChart$1, { data: data.map((d) => ({ ...d })), margin: { top: 4, right: 4, left: 0, bottom: 0 }, children: [
7204
7205
  showGrid && /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3", stroke: "hsl(var(--border))" }),
7205
7206
  /* @__PURE__ */ jsx(XAxis, { dataKey: xAxisKey, tick: { fontSize: 12, fill: "hsl(var(--muted-foreground))" }, axisLine: false, tickLine: false }),
7206
- /* @__PURE__ */ jsx(YAxis, { tick: { fontSize: 12, fill: "hsl(var(--muted-foreground))" }, axisLine: false, tickLine: false }),
7207
+ /* @__PURE__ */ jsx(YAxis, { width: "auto", tick: { fontSize: 12, fill: "hsl(var(--muted-foreground))" }, axisLine: false, tickLine: false }),
7207
7208
  showTooltip && /* @__PURE__ */ jsx(
7208
7209
  Tooltip,
7209
7210
  {
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@otfdashkit/ui",
3
- "version": "0.1.6",
4
- "description": "OTF UI — production-quality React component library. 98 primitives + blocks + layouts + charts on Radix + Tailwind v4. Cross-platform parity API with @otfdashkit/ui-native.",
3
+ "version": "0.1.8",
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",
7
7
  "ui",
@@ -11,8 +11,6 @@
11
11
  "design-system",
12
12
  "radix",
13
13
  "tailwind",
14
- "tailwind-v4",
15
- "shadcn",
16
14
  "headless",
17
15
  "accessible"
18
16
  ],
package/src/charts/area-chart.tsx CHANGED
@@ -50,10 +50,10 @@ export function AreaChart({
50
50
  return (
51
51
  <div className={cn('w-full overflow-hidden', className)} style={{ minWidth: 0 }}>
52
52
  <ResponsiveContainer width="100%" height={height}>
53
- <RechartsAreaChart data={data.map((d) => ({ ...d }))} margin={{ top: 4, right: 4, left: -20, bottom: 0 }}>
53
+ <RechartsAreaChart data={data.map((d) => ({ ...d }))} margin={{ top: 4, right: 4, left: 0, bottom: 0 }}>
54
54
  {showGrid && <CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--border))" />}
55
55
  <XAxis dataKey={xAxisKey} tick={{ fontSize: 12, fill: 'hsl(var(--muted-foreground))' }} axisLine={false} tickLine={false} />
56
- <YAxis tick={{ fontSize: 12, fill: 'hsl(var(--muted-foreground))' }} axisLine={false} tickLine={false} />
56
+ <YAxis width="auto" tick={{ fontSize: 12, fill: 'hsl(var(--muted-foreground))' }} axisLine={false} tickLine={false} />
57
57
  {showTooltip && (
58
58
  <Tooltip
59
59
  contentStyle={{
package/src/charts/bar-chart.tsx CHANGED
@@ -78,7 +78,7 @@ export function BarChart({
78
78
  <Chart
79
79
  data={data.map((d) => ({ ...d }))}
80
80
  layout={layout}
81
- margin={{ top: 4, right: lineDataKey ? 8 : 4, left: -20, bottom: 0 }}
81
+ margin={{ top: 4, right: lineDataKey ? 8 : 4, left: 0, bottom: 0 }}
82
82
  barSize={barSize}
83
83
  maxBarSize={maxBarSize}
84
84
  barCategoryGap={barCategoryGap}
@@ -87,14 +87,14 @@ export function BarChart({
87
87
  {isVertical ? (
88
88
  <>
89
89
  <XAxis type="number" tick={{ fontSize: 12, fill: 'hsl(var(--muted-foreground))' }} axisLine={false} tickLine={false} />
90
- <YAxis type="category" dataKey={xAxisKey} tick={{ fontSize: 12, fill: 'hsl(var(--muted-foreground))' }} axisLine={false} tickLine={false} />
90
+ <YAxis width="auto" type="category" dataKey={xAxisKey} tick={{ fontSize: 12, fill: 'hsl(var(--muted-foreground))' }} axisLine={false} tickLine={false} />
91
91
  </>
92
92
  ) : (
93
93
  <>
94
94
  <XAxis dataKey={xAxisKey} tick={{ fontSize: 12, fill: 'hsl(var(--muted-foreground))' }} axisLine={false} tickLine={false} />
95
- <YAxis yAxisId="left" tick={{ fontSize: 12, fill: 'hsl(var(--muted-foreground))' }} axisLine={false} tickLine={false} />
95
+ <YAxis width="auto" yAxisId="left" tick={{ fontSize: 12, fill: 'hsl(var(--muted-foreground))' }} axisLine={false} tickLine={false} />
96
96
  {lineDataKey && (
97
- <YAxis
97
+ <YAxis width="auto"
98
98
  yAxisId="right"
99
99
  orientation="right"
100
100
  tick={{ fontSize: 12, fill: 'hsl(var(--muted-foreground))' }}
package/src/charts/line-chart.tsx CHANGED
@@ -55,10 +55,10 @@ export function LineChart({
55
55
  return (
56
56
  <div className={cn('w-full overflow-hidden', className)} style={{ minWidth: 0 }}>
57
57
  <ResponsiveContainer width="100%" height={height}>
58
- <RechartsLineChart data={data.map((d) => ({ ...d }))} margin={{ top: 4, right: 4, left: -20, bottom: 0 }}>
58
+ <RechartsLineChart data={data.map((d) => ({ ...d }))} margin={{ top: 4, right: 4, left: 0, bottom: 0 }}>
59
59
  {showGrid && <CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--border))" />}
60
60
  <XAxis dataKey={xAxisKey} tick={{ fontSize: 12, fill: 'hsl(var(--muted-foreground))' }} axisLine={false} tickLine={false} />
61
- <YAxis tick={{ fontSize: 12, fill: 'hsl(var(--muted-foreground))' }} axisLine={false} tickLine={false} />
61
+ <YAxis width="auto" tick={{ fontSize: 12, fill: 'hsl(var(--muted-foreground))' }} axisLine={false} tickLine={false} />
62
62
  {showTooltip && (
63
63
  <Tooltip
64
64
  contentStyle={{
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}