Changelog

Hooks — usePrefersReducedMotion and useDetectDevice are now named exports — May 2026

Both hooks shipped as default exports, which broke the repo-wide rule that only *.preview.tsx files may use export default. They are now named exports so imports stay consistent with every other Foundations hook.

How to update your copy

Switch any default import of these hooks to a named import:

          -import usePrefersReducedMotion from '@/foundations/hooks/use-prefers-reduced-motion/use-prefers-reduced-motion';
+import { usePrefersReducedMotion } from '@/foundations/hooks/use-prefers-reduced-motion/use-prefers-reduced-motion';

-import useDetectDevice from '@/foundations/hooks/use-detect-device/use-detect-device';
+import { useDetectDevice } from '@/foundations/hooks/use-detect-device/use-detect-device';
        

useDetectDevice also now exports its return type as UseDetectDeviceProps (previously the unexported, misspelled useDetectDevidePorps).

Chart — Recharts cartesian backend + --chart-* tokens — May 2026

Area, Bars, and Stacked now render through Recharts and the shadcn-style ChartContainer helper. Sparkline and Donut remain custom SVG.

What changed

• New dependency: recharts (^3.8.x). Add it to your app when copying chart/.
• Theme: --chart-1 … --chart-5 in globals-data-attr.css for series colors.
• Default series color moves from border-hover tone to --chart-1 (parent text-* still works via currentColor on Chart.Area).
• New file: chart-container.tsx (ChartContainer, ChartConfig, tooltip helpers).

Unchanged

• Public Chart.* prop API (data, xLabels, aspect, bleed, formatValue, etc.).

How to update your copy

          pnpm add recharts@^3.8.1
        

Import globals-data-attr.css (or merge the --chart-* block). Copy both chart.tsx and chart-container.tsx.

Variant rename: family → brand, family-soft → brandSoft — May 2026

CSS motion and theme tokens no longer use a -family- segment, but several primitives still exposed React variants named family and family-soft. That mismatch confused copy-paste consumers, so the public variant API is renamed for clarity.

What changed

Affected primitives: Button (brandSoft only — the filled ConnectKit primary style remains variant="muted"), Badge, Checkbox, Radio, Switch, Input / Input.Group, Tabs, Tooltip, Toast / Toaster, Menu.Item.

Unchanged (intentionally)

• [data-theme="family"] in theme.css — theme preset id, not a component variant
• CSS keyframe names such as family-fade-in in motion.css

How to update your copy

          // Before
<Button variant="family-soft">Save</Button>
<Tabs variant="family">…</Tabs>
<Menu.Item variant="family">…</Menu.Item>
toast({ title: 'Saved', variant: 'family' });

// After
<Button variant="brandSoft">Save</Button>
<Tabs variant="brand">…</Tabs>
<Menu.Item variant="brand">…</Menu.Item>
toast({ title: 'Saved', variant: 'brand' });
        

Search your app for variant="family", variant='family', variant="family-soft", and union types like 'family' | after pulling this change.