@uselets/ui 1.7.2 → 1.9.0

package/dist/skills/uselets-ui/references/component-catalog.md

@@ -105,7 +105,7 @@ Unless noted otherwise, each module also exports its public `*Props` types from
   - Notes: confirmation dialog composition
 - `badge`
   - Exports: `Badge`, `badgeVariants`
-  - Notes: pill-shaped tag with `size: 'xs' | 'sm' | 'md' | 'lg' | 'xl'` (default `md`), `solid`/`outline`/`subtle`/`ghost`/`link` variants, `color: UIColor` (`primary` default), and `asChild`
+  - Notes: pill-shaped tag with `size: 'xs' | 'sm' | 'md' | 'lg' | 'xl'` (default `md`), `solid`/`secondary`/`outline`/`subtle` variants, `color: UIColor` (`primary` default), and `asChild`
 - `button`
   - Exports: `Button`, `buttonVariants`
   - Notes: action button with `solid`, `secondary`, `outline`, `subtle`, `ghost`, and `link` variants, `color: UIColor` (`primary` default), sizes from `xs` through `xl` plus icon sizes through `icon-xl`, and `loading`
@@ -221,25 +221,26 @@ Unless noted otherwise, each module also exports its public `*Props` types from
   - Exports: `Avatar`, `AvatarBadge`, `AvatarFallback`, `AvatarGroup`, `AvatarGroupCount`, `AvatarImage`
 - `card`
   - Exports: `Card`, `CardAction`, `CardContent`, `CardDescription`, `CardFooter`, `CardHeader`, `CardTitle`
+  - Notes: supports `size: 'sm' | 'md' | 'lg'` with default `md`
 - `carousel`
   - Exports: `Carousel`, `CarouselContent`, `CarouselItem`, `CarouselPrevious`, `CarouselNext`, `CarouselIndicators`, `useCarousel`
 - `center`
   - Exports: `Center`, `centerVariants`
 - `chart`
-  - Exports: `ChartContainer`, `ChartLegend`, `ChartLegendContent`, `ChartStyle`, `ChartTooltip`, `ChartTooltipContent`, `ChartConfig`
-  - Notes: low-level chart primitives. For app usage prefer the high-level `area-chart`, `bar-chart`, `pie-chart`, `donut-chart` modules. Import raw recharts primitives (`Bar`, `XAxis`, etc.) directly from `recharts` when composing with `ChartContainer`.
+  - Exports: `ChartContainer`, `ChartLegend`, `ChartLegendContent`, `ChartStyle`, `ChartTooltip`, `ChartTooltipContent`, `ChartConfig`, `ChartColorKey`, `CHART_COLOR_KEYS`, `DEFAULT_CHART_PALETTE`, `resolveChartColor`
+  - Notes: low-level chart primitives. For app usage prefer the high-level `area-chart`, `bar-chart`, `pie-chart`, `donut-chart` modules. Import raw recharts primitives (`Bar`, `XAxis`, etc.) directly from `recharts` when composing with `ChartContainer`. `ChartColorKey` is the union of theme color tokens accepted by every high-level chart (`primary | brand | gray | zinc | red | yellow | green | blue | indigo | pink`) and resolves to `var(--{key}-500)` via `resolveChartColor`.
 - `area-chart`
   - Exports: `AreaChart`, `AreaChartSeries`, `AreaChartType`, `AreaChartCurveType`, `AreaChartGridAxis`
-  - Notes: high-level area chart. Pass `data`, `series` (array of `{ name, label?, color? }`), and `dataKey` (X axis field). Supports `type` (default/stacked/percent/split), `curveType`, `withXAxis`, `withYAxis`, `gridAxis`, `withDots`, `withTooltip`, `withLegend`. Defaults to chart colors `--chart-1..5`.
+  - Notes: high-level area chart. Pass `data`, `series` (array of `{ name, label?, color?, colorKey? }`), and `dataKey` (X axis field). Supports `type` (default/stacked/percent/split), `curveType`, `withXAxis`, `withYAxis`, `gridAxis`, `withDots`, `withTooltip`, `withLegend`. Use `colorKey: ChartColorKey` for theme colors (`'blue'`, `'primary'`, etc.) or `color` for raw CSS values; explicit `color` wins. Defaults to chart colors `--chart-1..5`. Pass `areaProps` to spread props (e.g. `onClick`) onto each underlying recharts `<Area>`.
 - `bar-chart`
   - Exports: `BarChart`, `BarChartSeries`, `BarChartType`, `BarChartOrientation`, `BarChartGridAxis`
-  - Notes: high-level bar chart. Same shape as `area-chart` plus `orientation` (vertical/horizontal), `barSize`, `radius`. Supports stacked and percent types.
+  - Notes: high-level bar chart. Same shape as `area-chart` plus `orientation` (vertical/horizontal), `barSize`, `radius`. Series accept `color` / `colorKey`. Supports stacked and percent types. Pass `barProps` to spread props (e.g. `onClick`, `cursor`) onto each underlying recharts `<Bar>`.
 - `pie-chart`
   - Exports: `PieChart`, `PieChartBase`, `PieChartDatum`, `buildPieConfig`
-  - Notes: high-level pie chart. Pass `data` as `Array<{ name, value, color? }>`. Supports `withLabels`, `labelsPosition`, `startAngle`, `endAngle`, `paddingAngle`, `withLegend`, `withTooltip`. `PieChartBase` is the shared internal renderer used by `donut-chart`.
+  - Notes: high-level pie chart. Pass `data` as `Array<{ name, value, color?, colorKey? }>`. Supports `withLabels`, `labelsPosition`, `startAngle`, `endAngle`, `paddingAngle`, `withLegend`, `withTooltip`, `strokeWidth`, and `strokeColor` (theme key or CSS value, defaults to `var(--background)` so segment gaps match the page background). Pass `pieProps` to spread props (e.g. `onClick`) onto the underlying recharts `<Pie>`. `PieChartBase` is the shared internal renderer used by `donut-chart`.
 - `donut-chart`
   - Exports: `DonutChart`
-  - Notes: same data shape as `pie-chart`. Adds `thickness` (donut hole size in px) and `withTotal` + `totalLabel` (renders sum in the center).
+  - Notes: same data shape as `pie-chart`. Adds `thickness` (donut hole size in px) and `withTotal` + `totalLabel` (renders sum in the center). Inherits `colorKey`, `strokeColor`, and `pieProps` from `PieChart`.
 - `collapsible`
   - Exports: `Collapsible`, `CollapsibleTrigger`, `CollapsibleContent`
 - `container`

package/dist/skills/uselets-ui/references/package-guide.md

@@ -266,10 +266,16 @@ The package stylesheet exposes these palette families:
 
 The same palette family names are exported as `uiColors` and `UIColor`. `Button`, `Toggle`, `Checkbox`, `RadioGroupItem`, and `Switch` use `UIColor` for color props. `ButtonColor` remains available as a compatibility alias, but new public APIs should use `UIColor`.
 
-Each palette family is exposed as:
+Each palette family is exposed in four layers:
 
 - CSS variables such as `--primary-500`, `--brand-500`, and `--zinc-900`
+- Semantic CSS aliases such as `--green`, `--red`, and `--gray`, mapped to `500` in light mode and `400` in dark mode
 - Tailwind v4 utilities such as `bg-primary-500`, `text-zinc-900`, `border-red-300`
+- Tailwind v4 semantic utilities such as `bg-green`, `text-red`, and `border-gray`
+
+Color-aware components use semantic family aliases for their primary color. For example, `color="green"` resolves
+to `--green-500` in light mode and `--green-400` in dark mode, while hover and subtle surfaces keep explicit
+palette steps.
 
 Primary semantic tokens:
 

package/dist/styles/gomax.css

@@ -138,6 +138,14 @@
   --primary-foreground: oklch(1 0 0);
   --brand: var(--brand-500);
   --brand-foreground: oklch(1 0 0);
+  --gray: var(--gray-500);
+  --zinc: var(--zinc-500);
+  --red: var(--red-500);
+  --yellow: var(--yellow-500);
+  --blue: var(--blue-500);
+  --indigo: var(--indigo-500);
+  --pink: var(--pink-500);
+  --green: var(--green-500);
   --secondary: var(--gray-100);
   --secondary-foreground: var(--gray-900);
   --muted: var(--gray-100);
@@ -175,6 +183,14 @@
   --primary-foreground: oklch(1 0 0);
   --brand: var(--brand-400);
   --brand-foreground: oklch(1 0 0);
+  --gray: var(--gray-400);
+  --zinc: var(--zinc-400);
+  --red: var(--red-400);
+  --yellow: var(--yellow-400);
+  --blue: var(--blue-400);
+  --indigo: var(--indigo-400);
+  --pink: var(--pink-400);
+  --green: var(--green-400);
   --secondary: var(--zinc-800);
   --secondary-foreground: var(--zinc-50);
   --muted: var(--zinc-800);

package/dist/styles/max.css

@@ -139,6 +139,14 @@
   --primary-foreground: var(--zinc-50);
   --brand: var(--brand-500);
   --brand-foreground: var(--zinc-50);
+  --gray: var(--gray-500);
+  --zinc: var(--zinc-500);
+  --red: var(--red-500);
+  --yellow: var(--yellow-500);
+  --blue: var(--blue-500);
+  --indigo: var(--indigo-500);
+  --pink: var(--pink-500);
+  --green: var(--green-500);
   --secondary: var(--zinc-100);
   --secondary-foreground: var(--zinc-900);
   --muted: var(--zinc-100);
@@ -176,6 +184,14 @@
   --primary-foreground: var(--zinc-50);
   --brand: var(--brand-400);
   --brand-foreground: var(--zinc-50);
+  --gray: var(--gray-400);
+  --zinc: var(--zinc-400);
+  --red: var(--red-400);
+  --yellow: var(--yellow-400);
+  --blue: var(--blue-400);
+  --indigo: var(--indigo-400);
+  --pink: var(--pink-400);
+  --green: var(--green-400);
   --secondary: var(--zinc-800);
   --secondary-foreground: var(--zinc-50);
   --muted: var(--zinc-800);

package/dist/styles/theme.css

@@ -154,6 +154,14 @@
   --color-green-900: var(--green-900);
   --color-green-950: var(--green-950);
 
+  --color-gray: var(--gray);
+  --color-zinc: var(--zinc);
+  --color-red: var(--red);
+  --color-yellow: var(--yellow);
+  --color-blue: var(--blue);
+  --color-indigo: var(--indigo);
+  --color-pink: var(--pink);
+  --color-green: var(--green);
   --color-sidebar-ring: var(--sidebar-ring);
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uselets/ui",
-  "version": "1.7.2",
+  "version": "1.9.0",
   "type": "module",
   "private": false,
   "description": "React component library for the LET'S design system.",
@@ -27,6 +27,9 @@
     "package.json",
     "README.md"
   ],
+  "engines": {
+    "node": ">=22.12.0"
+  },
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -55,7 +58,7 @@
     }
   },
   "dependencies": {
-    "@base-ui/react": "1.4.1",
+    "@base-ui/react": "1.5.0",
     "@fontsource-variable/inter": "5.2.8",
     "@react-input/mask": "2.0.4",
     "@tabler/icons-react": "3.44.0",
@@ -63,17 +66,17 @@
     "class-variance-authority": "0.7.1",
     "clsx": "2.1.1",
     "cmdk": "1.1.1",
-    "commander": "14.0.3",
-    "date-fns": "4.1.0",
+    "commander": "15.0.0",
+    "date-fns": "4.4.0",
     "embla-carousel-react": "8.6.0",
     "input-otp": "1.4.2",
     "next-themes": "0.4.6",
-    "radix-ui": "1.4.3",
-    "react-day-picker": "9.14.0",
+    "radix-ui": "1.5.0",
+    "react-day-picker": "10.0.1",
     "react-dropzone": "15.0.0",
-    "react-resizable-panels": "4.11.1",
+    "react-resizable-panels": "4.11.2",
     "recharts": "3.8.1",
-    "shadcn": "4.6.0",
+    "shadcn": "4.11.0",
     "sonner": "2.0.7",
     "tailwind-merge": "3.6.0",
     "tailwind-scrollbar": "4.0.2",
@@ -87,15 +90,15 @@
     "@bosh-code/tsdown-plugin-tailwindcss": "1.0.1",
     "@tailwindcss/postcss": "4.3.0",
     "@testing-library/react": "16.3.2",
-    "@tsdown/css": "0.22.0",
-    "@turbo/gen": "2.9.14",
-    "@types/node": "25.9.1",
-    "@types/react": "19.2.15",
+    "@tsdown/css": "0.22.2",
+    "@turbo/gen": "2.9.18",
+    "@types/node": "25.9.3",
+    "@types/react": "19.2.17",
     "@types/react-dom": "19.2.3",
     "jsdom": "29.1.1",
     "tailwindcss": "4.3.0",
-    "tsdown": "0.22.0",
+    "tsdown": "0.22.2",
     "typescript": "6.0.3",
-    "vitest": "4.1.6"
+    "vitest": "4.1.8"
   }
 }

package/skills/uselets-ui/references/component-catalog.md

@@ -105,7 +105,7 @@ Unless noted otherwise, each module also exports its public `*Props` types from
   - Notes: confirmation dialog composition
 - `badge`
   - Exports: `Badge`, `badgeVariants`
-  - Notes: pill-shaped tag with `size: 'xs' | 'sm' | 'md' | 'lg' | 'xl'` (default `md`), `solid`/`outline`/`subtle`/`ghost`/`link` variants, `color: UIColor` (`primary` default), and `asChild`
+  - Notes: pill-shaped tag with `size: 'xs' | 'sm' | 'md' | 'lg' | 'xl'` (default `md`), `solid`/`secondary`/`outline`/`subtle` variants, `color: UIColor` (`primary` default), and `asChild`
 - `button`
   - Exports: `Button`, `buttonVariants`
   - Notes: action button with `solid`, `secondary`, `outline`, `subtle`, `ghost`, and `link` variants, `color: UIColor` (`primary` default), sizes from `xs` through `xl` plus icon sizes through `icon-xl`, and `loading`
@@ -221,25 +221,26 @@ Unless noted otherwise, each module also exports its public `*Props` types from
   - Exports: `Avatar`, `AvatarBadge`, `AvatarFallback`, `AvatarGroup`, `AvatarGroupCount`, `AvatarImage`
 - `card`
   - Exports: `Card`, `CardAction`, `CardContent`, `CardDescription`, `CardFooter`, `CardHeader`, `CardTitle`
+  - Notes: supports `size: 'sm' | 'md' | 'lg'` with default `md`
 - `carousel`
   - Exports: `Carousel`, `CarouselContent`, `CarouselItem`, `CarouselPrevious`, `CarouselNext`, `CarouselIndicators`, `useCarousel`
 - `center`
   - Exports: `Center`, `centerVariants`
 - `chart`
-  - Exports: `ChartContainer`, `ChartLegend`, `ChartLegendContent`, `ChartStyle`, `ChartTooltip`, `ChartTooltipContent`, `ChartConfig`
-  - Notes: low-level chart primitives. For app usage prefer the high-level `area-chart`, `bar-chart`, `pie-chart`, `donut-chart` modules. Import raw recharts primitives (`Bar`, `XAxis`, etc.) directly from `recharts` when composing with `ChartContainer`.
+  - Exports: `ChartContainer`, `ChartLegend`, `ChartLegendContent`, `ChartStyle`, `ChartTooltip`, `ChartTooltipContent`, `ChartConfig`, `ChartColorKey`, `CHART_COLOR_KEYS`, `DEFAULT_CHART_PALETTE`, `resolveChartColor`
+  - Notes: low-level chart primitives. For app usage prefer the high-level `area-chart`, `bar-chart`, `pie-chart`, `donut-chart` modules. Import raw recharts primitives (`Bar`, `XAxis`, etc.) directly from `recharts` when composing with `ChartContainer`. `ChartColorKey` is the union of theme color tokens accepted by every high-level chart (`primary | brand | gray | zinc | red | yellow | green | blue | indigo | pink`) and resolves to `var(--{key}-500)` via `resolveChartColor`.
 - `area-chart`
   - Exports: `AreaChart`, `AreaChartSeries`, `AreaChartType`, `AreaChartCurveType`, `AreaChartGridAxis`
-  - Notes: high-level area chart. Pass `data`, `series` (array of `{ name, label?, color? }`), and `dataKey` (X axis field). Supports `type` (default/stacked/percent/split), `curveType`, `withXAxis`, `withYAxis`, `gridAxis`, `withDots`, `withTooltip`, `withLegend`. Defaults to chart colors `--chart-1..5`.
+  - Notes: high-level area chart. Pass `data`, `series` (array of `{ name, label?, color?, colorKey? }`), and `dataKey` (X axis field). Supports `type` (default/stacked/percent/split), `curveType`, `withXAxis`, `withYAxis`, `gridAxis`, `withDots`, `withTooltip`, `withLegend`. Use `colorKey: ChartColorKey` for theme colors (`'blue'`, `'primary'`, etc.) or `color` for raw CSS values; explicit `color` wins. Defaults to chart colors `--chart-1..5`. Pass `areaProps` to spread props (e.g. `onClick`) onto each underlying recharts `<Area>`.
 - `bar-chart`
   - Exports: `BarChart`, `BarChartSeries`, `BarChartType`, `BarChartOrientation`, `BarChartGridAxis`
-  - Notes: high-level bar chart. Same shape as `area-chart` plus `orientation` (vertical/horizontal), `barSize`, `radius`. Supports stacked and percent types.
+  - Notes: high-level bar chart. Same shape as `area-chart` plus `orientation` (vertical/horizontal), `barSize`, `radius`. Series accept `color` / `colorKey`. Supports stacked and percent types. Pass `barProps` to spread props (e.g. `onClick`, `cursor`) onto each underlying recharts `<Bar>`.
 - `pie-chart`
   - Exports: `PieChart`, `PieChartBase`, `PieChartDatum`, `buildPieConfig`
-  - Notes: high-level pie chart. Pass `data` as `Array<{ name, value, color? }>`. Supports `withLabels`, `labelsPosition`, `startAngle`, `endAngle`, `paddingAngle`, `withLegend`, `withTooltip`. `PieChartBase` is the shared internal renderer used by `donut-chart`.
+  - Notes: high-level pie chart. Pass `data` as `Array<{ name, value, color?, colorKey? }>`. Supports `withLabels`, `labelsPosition`, `startAngle`, `endAngle`, `paddingAngle`, `withLegend`, `withTooltip`, `strokeWidth`, and `strokeColor` (theme key or CSS value, defaults to `var(--background)` so segment gaps match the page background). Pass `pieProps` to spread props (e.g. `onClick`) onto the underlying recharts `<Pie>`. `PieChartBase` is the shared internal renderer used by `donut-chart`.
 - `donut-chart`
   - Exports: `DonutChart`
-  - Notes: same data shape as `pie-chart`. Adds `thickness` (donut hole size in px) and `withTotal` + `totalLabel` (renders sum in the center).
+  - Notes: same data shape as `pie-chart`. Adds `thickness` (donut hole size in px) and `withTotal` + `totalLabel` (renders sum in the center). Inherits `colorKey`, `strokeColor`, and `pieProps` from `PieChart`.
 - `collapsible`
   - Exports: `Collapsible`, `CollapsibleTrigger`, `CollapsibleContent`
 - `container`

package/skills/uselets-ui/references/package-guide.md

@@ -266,10 +266,16 @@ The package stylesheet exposes these palette families:
 
 The same palette family names are exported as `uiColors` and `UIColor`. `Button`, `Toggle`, `Checkbox`, `RadioGroupItem`, and `Switch` use `UIColor` for color props. `ButtonColor` remains available as a compatibility alias, but new public APIs should use `UIColor`.
 
-Each palette family is exposed as:
+Each palette family is exposed in four layers:
 
 - CSS variables such as `--primary-500`, `--brand-500`, and `--zinc-900`
+- Semantic CSS aliases such as `--green`, `--red`, and `--gray`, mapped to `500` in light mode and `400` in dark mode
 - Tailwind v4 utilities such as `bg-primary-500`, `text-zinc-900`, `border-red-300`
+- Tailwind v4 semantic utilities such as `bg-green`, `text-red`, and `border-gray`
+
+Color-aware components use semantic family aliases for their primary color. For example, `color="green"` resolves
+to `--green-500` in light mode and `--green-400` in dark mode, while hover and subtle surfaces keep explicit
+palette steps.
 
 Primary semantic tokens: