@fabio.caffarello/react-design-system 1.24.0 → 2.0.1

package/dist/ui/primitives/Collapsible/Collapsible.d.ts

@@ -1,7 +1,12 @@
 import { type HTMLAttributes, type ReactNode } from "react";
 export interface CollapsibleProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
     children: ReactNode;
-    trigger: ReactNode;
+    /**
+     * Content for the toggle button. When omitted, Collapsible renders only
+     * the animated content panel — the caller is responsible for its own
+     * trigger and `open`-state wiring (SidebarGroup/SideNavbarGroup pattern).
+     */
+    trigger?: ReactNode;
     defaultOpen?: boolean;
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
@@ -26,4 +31,5 @@ export interface CollapsibleProps extends Omit<HTMLAttributes<HTMLDivElement>, "
  * </Collapsible>
  * ```
  */
-export default function Collapsible({ children, trigger, defaultOpen, open, onOpenChange, disabled, duration, storageKey, className, ...props }: CollapsibleProps): import("react/jsx-runtime").JSX.Element;
+declare const Collapsible: import("react").ForwardRefExoticComponent<CollapsibleProps & import("react").RefAttributes<HTMLDivElement>>;
+export default Collapsible;

package/dist/ui/primitives/ErrorMessage/ErrorMessage.d.ts

@@ -14,5 +14,5 @@ interface Props extends HTMLAttributes<HTMLDivElement> {
  * <ErrorMessage message="This field is required" id="email-error" />
  * ```
  */
-export default function ErrorMessage({ message, id, className, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+export default function ErrorMessage({ message, id, className, ...props }: Props): import("react").JSX.Element;
 export {};

package/dist/ui/primitives/Info/Info.d.ts

@@ -2,4 +2,4 @@ import type { HTMLAttributes } from "react";
 export interface InfoProps extends HTMLAttributes<HTMLDivElement> {
     variant?: "info" | "warning" | "error";
 }
-export default function Info({ variant, className, ...props }: InfoProps): import("react/jsx-runtime").JSX.Element;
+export default function Info({ variant, className, ...props }: InfoProps): import("react").JSX.Element;

package/dist/ui/primitives/NavLink/NavLink.d.ts

@@ -1,3 +1,14 @@
+/**
+ * NavLink Component
+ *
+ * Navigation link component with active state detection and Next.js integration.
+ *
+ * @see EPIC-001: NavLink Component (Atom)
+ * @see RFC-001: NavLink Hook Strategy (APPROVED)
+ * @see RFC-002: Next.js Integration Strategy (APPROVED)
+ * @see ADR-001: Active State Detection (ACCEPTED)
+ */
+import React from "react";
 import type { NavLinkProps } from "./types";
 /**
  * NavLink Component
@@ -15,5 +26,5 @@ import type { NavLinkProps } from "./types";
  * to avoid issues with conditional hook calls. For now, use the `active` prop manually
  * or implement pathname detection in the parent component.
  */
-export declare function NavLink({ href, children, active, disabled, variant, size, as, className, "aria-label": ariaLabel, onClick, onKeyDown, ...props }: NavLinkProps): import("react/jsx-runtime").JSX.Element;
+export declare const NavLink: React.ForwardRefExoticComponent<NavLinkProps & React.RefAttributes<HTMLAnchorElement>>;
 export default NavLink;

package/dist/ui/primitives/Radio/Radio.d.ts

@@ -2,6 +2,15 @@ import type { InputHTMLAttributes, ReactNode } from "react";
 export interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"> {
     label?: ReactNode;
     error?: boolean;
+    /**
+     * Validation success state — paints the border and (when
+     * `helperText` is also set) the helper-text color green. Matches
+     * the Input + Select + Checkbox + Switch + Textarea convention;
+     * the three feedback flags (`error`, `success`, `helperText`)
+     * cover every form primitive in the DS. Error takes precedence
+     * when both `error` and `success` are set.
+     */
+    success?: boolean;
     helperText?: string;
 }
 /**

package/dist/ui/primitives/Separator/Separator.d.ts

@@ -19,5 +19,5 @@ export interface SeparatorProps extends HTMLAttributes<HTMLHRElement> {
  * <Separator orientation="vertical" variant="dashed" />
  * ```
  */
-declare const Separator: import("react").NamedExoticComponent<SeparatorProps>;
+declare const Separator: import("react").MemoExoticComponent<({ orientation, variant, className, ...props }: SeparatorProps) => import("react").JSX.Element>;
 export default Separator;

package/dist/ui/primitives/Skeleton/Skeleton.d.ts

@@ -17,4 +17,4 @@ export interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
  * <Skeleton variant="text" lines={3} />
  * ```
  */
-export default function Skeleton({ variant, width, height, lines, className, "aria-label": ariaLabel, ...props }: SkeletonProps): import("react/jsx-runtime").JSX.Element;
+export default function Skeleton({ variant, width, height, lines, className, "aria-label": ariaLabel, ...props }: SkeletonProps): import("react").JSX.Element;

package/dist/ui/primitives/Spinner/Spinner.d.ts

@@ -6,5 +6,5 @@ export interface SpinnerProps extends HTMLAttributes<HTMLDivElement> {
     variant?: SpinnerVariant;
     label?: string;
 }
-declare const Spinner: import("react").NamedExoticComponent<SpinnerProps>;
+declare const Spinner: import("react").MemoExoticComponent<({ size, variant, label, className, ...props }: SpinnerProps) => import("react").JSX.Element>;
 export default Spinner;

package/dist/ui/primitives/Switch/Switch.d.ts

@@ -3,8 +3,22 @@ export type SwitchSize = "sm" | "md" | "lg";
 export interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type"> {
     size?: SwitchSize;
     label?: string;
-    description?: string;
+    /**
+     * Secondary text rendered beneath the label, wired through
+     * `aria-describedby`. Named `helperText` to match Input, Select,
+     * Checkbox, and Radio — every form primitive in the DS uses the
+     * same prop name for this role.
+     */
+    helperText?: string;
     error?: boolean;
+    /**
+     * Validation success state — paints the (off-state) track border
+     * and (when `helperText` is also set) the helper-text color green.
+     * Matches the Input + Select + Checkbox + Radio + Textarea
+     * convention. Error takes precedence when both `error` and
+     * `success` are set.
+     */
+    success?: boolean;
 }
 /**
  * Switch Component
@@ -18,7 +32,7 @@ export interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
  *
  * <Switch
  *   label="Enable notifications"
- *   description="Receive email notifications"
+ *   helperText="Receive email notifications"
  *   checked={notifications}
  *   onChange={(e) => setNotifications(e.target.checked)}
  * />

package/dist/ui/primitives/Text/Text.d.ts

@@ -6,7 +6,6 @@ interface Props<T extends ElementType> extends HTMLAttributes<JSX.IntrinsicEleme
     as?: T;
     bold?: boolean;
     italic?: boolean;
-    color?: string;
     colorRole?: TextColorRole;
     colorShade?: TextColorShade;
 }

package/dist/ui/primitives/Textarea/Textarea.d.ts

@@ -1,8 +1,26 @@
 import type { TextareaHTMLAttributes } from "react";
 interface Props extends TextareaHTMLAttributes<HTMLTextAreaElement> {
     error?: boolean;
+    /**
+     * Validation success state — paints the border and (when
+     * `helperText` is also set) the helper-text color green. Matches
+     * the Input + Select + Checkbox + Radio + Switch convention; the
+     * three feedback flags (`error`, `success`, `helperText`) cover
+     * every form primitive in the DS. Error takes precedence when
+     * both `error` and `success` are set.
+     */
+    success?: boolean;
     resize?: "none" | "both" | "horizontal" | "vertical";
     label?: string;
+    /**
+     * Secondary text rendered beneath the textarea, wired through
+     * `aria-describedby`. Named `helperText` to match Input, Select,
+     * Checkbox, Radio, and Switch — every form primitive in the DS
+     * uses the same prop name for this role. When `error` or
+     * `success` is also set, the helper text inherits the matching
+     * red / green color.
+     */
+    helperText?: string;
 }
 /**
  * Textarea Component

package/dist/ui/primitives/Tooltip/Tooltip.d.ts

@@ -24,4 +24,5 @@ export interface TooltipProps extends HTMLAttributes<HTMLDivElement> {
  * </Tooltip>
  * ```
  */
-export default function Tooltip({ content, children, position, delay, className, "aria-label": _ariaLabel, preservePositioning, ...props }: TooltipProps): import("react/jsx-runtime").JSX.Element;
+declare const Tooltip: import("react").ForwardRefExoticComponent<TooltipProps & import("react").RefAttributes<HTMLDivElement>>;
+export default Tooltip;

package/dist/ui/providers/AppProvider.d.ts

@@ -71,7 +71,7 @@ export interface AppProviderProps {
  * </AppProvider>
  * ```
  */
-export declare function AppProvider({ children, config }: AppProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function AppProvider({ children, config }: AppProviderProps): import("react").JSX.Element;
 /**
  * Hook to access AppProvider context
  *

package/dist/ui/providers/ConfigProvider.d.ts

@@ -114,7 +114,7 @@ export interface ConfigProviderProps {
  * </ConfigProvider>
  * ```
  */
-export declare function ConfigProvider({ children, config: customConfig, strategy: _strategy, }: ConfigProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function ConfigProvider({ children, config: customConfig, strategy: _strategy, }: ConfigProviderProps): import("react").JSX.Element;
 /**
  * Hook to use config context
  *

package/dist/ui/providers/DialogProvider.d.ts

@@ -7,4 +7,4 @@ export interface DialogProviderProps {
     titleId?: string;
     descriptionId?: string;
 }
-export declare function DialogProvider({ children, open: controlledOpen, defaultOpen, onOpenChange, titleId, descriptionId, }: DialogProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function DialogProvider({ children, open: controlledOpen, defaultOpen, onOpenChange, titleId, descriptionId, }: DialogProviderProps): import("react").JSX.Element;

package/dist/ui/providers/ThemeProvider.d.ts

@@ -27,7 +27,7 @@ export interface ThemeProviderProps {
  * </ThemeProvider>
  * ```
  */
-export declare function ThemeProvider({ children, defaultTheme, storageKey, }: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function ThemeProvider({ children, defaultTheme, storageKey, }: ThemeProviderProps): import("react").JSX.Element;
 /**
  * Hook to use theme context
  */

package/dist/ui/providers/ToastProvider.d.ts

@@ -4,4 +4,4 @@ export interface ToastProviderProps {
     defaultDuration?: number;
     maxToasts?: number;
 }
-export declare function ToastProvider({ children, defaultDuration, maxToasts, }: ToastProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function ToastProvider({ children, defaultDuration, maxToasts, }: ToastProviderProps): import("react").JSX.Element;

package/dist/ui/tokens/TokenVisualizations.d.ts

@@ -6,32 +6,32 @@
 /**
  * Color Palette Visualization
  */
-export declare function ColorPalette(): import("react/jsx-runtime").JSX.Element;
+export declare function ColorPalette(): import("react").JSX.Element;
 /**
  * Spacing Reference Visualization
  */
-export declare function SpacingReference(): import("react/jsx-runtime").JSX.Element;
+export declare function SpacingReference(): import("react").JSX.Element;
 /**
  * Typography Reference Visualization
  */
-export declare function TypographyReference(): import("react/jsx-runtime").JSX.Element;
+export declare function TypographyReference(): import("react").JSX.Element;
 /**
  * Shadow Reference Visualization
  */
-export declare function ShadowReference(): import("react/jsx-runtime").JSX.Element;
+export declare function ShadowReference(): import("react").JSX.Element;
 /**
  * Radius Reference Visualization
  */
-export declare function RadiusReference(): import("react/jsx-runtime").JSX.Element;
+export declare function RadiusReference(): import("react").JSX.Element;
 /**
  * Animation Reference Visualization
  */
-export declare function AnimationReference(): import("react/jsx-runtime").JSX.Element;
+export declare function AnimationReference(): import("react").JSX.Element;
 /**
  * Z-Index Reference Visualization
  */
-export declare function ZIndexReference(): import("react/jsx-runtime").JSX.Element;
+export declare function ZIndexReference(): import("react").JSX.Element;
 /**
  * Opacity Reference Visualization
  */
-export declare function OpacityReference(): import("react/jsx-runtime").JSX.Element;
+export declare function OpacityReference(): import("react").JSX.Element;

package/dist/ui/tokens/spacing.d.ts

@@ -54,4 +54,4 @@ export declare function getSpacing(scale: keyof typeof SPACING_TOKENS): SpacingT
 /**
  * Helper function to get spacing as Tailwind class
  */
-export declare function getSpacingClass(scale: keyof typeof SPACING_TOKENS, direction?: "p" | "m" | "px" | "mx" | "py" | "my" | "pt" | "mt" | "pr" | "mr" | "pb" | "mb" | "pl" | "ml" | "gap" | "gap-x" | "gap-y" | "space-y"): string;
+export declare function getSpacingClass(scale: keyof typeof SPACING_TOKENS, direction?: "p" | "m" | "px" | "mx" | "py" | "my" | "pt" | "mt" | "pr" | "mr" | "pb" | "mb" | "pl" | "ml" | "gap" | "gap-x" | "gap-y" | "space-x" | "space-y"): string;

package/dist/ui/utils/index.d.ts

@@ -5,3 +5,4 @@
  */
 export { cn } from "./cn";
 export { cva, type VariantProps } from "./cva";
+export { mergeRefs } from "./mergeRefs";

package/dist/ui/utils/mergeRefs.d.ts

@@ -0,0 +1,16 @@
+import type { Ref, RefCallback } from "react";
+/**
+ * Compose multiple refs into a single ref callback.
+ *
+ * Each input ref receives the node when the returned callback is invoked.
+ * Callback refs are called with the node; object refs receive it via
+ * `.current`; `null`/`undefined` entries are ignored. Designed for the
+ * common cloneElement pattern where a parent owns an internal ref to a
+ * trigger AND the consumer may have supplied their own ref on that
+ * trigger — both need to land on the same node.
+ *
+ * Under React 19, a consumer's ref attached to `<Child ref={r}/>` flows
+ * through `child.props.ref` after cloneElement; pass that into mergeRefs
+ * alongside the parent's internal ref.
+ */
+export declare function mergeRefs<T>(...refs: Array<Ref<T> | undefined>): RefCallback<T>;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fabio.caffarello/react-design-system",
   "private": false,
-  "version": "1.24.0",
+  "version": "2.0.1",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -26,13 +26,15 @@
     "access": "public"
   },
   "scripts": {
-    "build": "npx tsc --project tsconfig.app.json --declaration --emitDeclarationOnly --outDir dist || true && vite build && npm run build:validate",
-    "build:validate": "tsx scripts/validate-build-exports.ts",
+    "build": "npx tsc --project tsconfig.app.json --declaration --emitDeclarationOnly --outDir dist && vite build && npm run build:validate",
+    "build:validate": "tsx scripts/validate-build-exports.ts && node scripts/validate-use-client-in-dist.mjs",
     "lint": "eslint .",
+    "typecheck": "tsc --build --force tsconfig.json",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "storybook:smoke": "npm run build-storybook && node scripts/storybook-smoke.mjs",
     "test:a11y:baseline": "npm run build-storybook && node scripts/a11y-serial-baseline.mjs",
+    "test:next-smoke": "node scripts/next-smoke.mjs",
     "plop": "plop",
     "postplop": "prettier -w './src/ui/**/*.{ts,tsx}'",
     "test": "node scripts/run-tests.mjs",
@@ -40,12 +42,34 @@
     "prepare": "husky"
   },
   "peerDependencies": {
-    "@hookform/resolvers": "^3.0.0",
-    "lucide-react": "^0.552.0",
+    "lucide-react": "^0.552.0 || ^1.0.0",
     "react": ">=19",
     "react-dom": ">=19",
-    "react-hook-form": "^7.71.0",
-    "zod": "^3.0.0"
+    "react-hook-form": "^7.77.0"
+  },
+  "overrides": {
+    "handlebars": "^4.7.9",
+    "lodash": "^4.17.24",
+    "fast-uri": "^3.1.2",
+    "flatted": "^3.4.2",
+    "qs": "^6.15.2",
+    "js-yaml": "^4.2.0",
+    "yaml": "^2.9.0",
+    "rollup": "^4.59.0",
+    "picomatch": "^4.0.4",
+    "@commitlint/config-validator": {
+      "ajv": "^8.17.2"
+    },
+    "@jsdevtools/coverage-istanbul-loader": {
+      "ajv": "^8.17.2"
+    },
+    "micromatch": {
+      "picomatch": "^2.3.2"
+    },
+    "test-exclude": {
+      "minimatch": "^3.1.4",
+      "brace-expansion": "^1.1.13"
+    }
   },
   "dependencies": {
     "@tailwindcss/postcss": "^4.1.16",
@@ -53,62 +77,60 @@
     "clsx": "^2.1.1",
     "react": ">=19",
     "react-dom": ">=19",
-    "tailwind-merge": "^3.4.0"
+    "tailwind-merge": "^3.6.0"
   },
   "devDependencies": {
     "@commitlint/cli": "^20.3.1",
     "@commitlint/config-conventional": "^20.3.1",
-    "@eslint/js": "^9.36.0",
-    "@hookform/resolvers": "^3.0.0",
+    "@eslint/js": "^10.0.1",
     "@playwright/test": "^1.60.0",
-    "@storybook/addon-a11y": "^10.0.3",
-    "@storybook/addon-coverage": "^3.0.0",
-    "@storybook/addon-designs": "^11.1.1",
-    "@storybook/addon-docs": "^10.0.3",
+    "@storybook/addon-a11y": "^10.4.2",
+    "@storybook/addon-coverage": "^3.0.1",
+    "@storybook/addon-designs": "^11.1.3",
+    "@storybook/addon-docs": "^10.4.2",
     "@storybook/addon-measure": "^9.0.8",
     "@storybook/addon-outline": "^9.0.8",
-    "@storybook/addon-vitest": "^10.0.3",
-    "@storybook/react-vite": "^10.0.3",
+    "@storybook/addon-vitest": "^10.4.2",
+    "@storybook/react-vite": "^10.4.2",
     "@storybook/test": "^8.6.15",
     "@tailwindcss/vite": "^4.1.16",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
-    "@testing-library/react": "^16.3.0",
+    "@testing-library/react": "^16.3.2",
     "@types/bun": "^1.3.7",
     "@types/node": "^24.6.0",
-    "@types/react": "^19.1.16",
-    "@types/react-dom": "^19.1.9",
+    "@types/react": "^19.2.16",
+    "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^5.0.4",
-    "@vitest/browser-playwright": "^4.0.6",
-    "@vitest/coverage-v8": "^4.0.6",
+    "@vitest/browser-playwright": "^4.1.8",
+    "@vitest/coverage-v8": "^4.1.8",
     "autoprefixer": "^10.4.21",
-    "baseline-browser-mapping": "^2.9.14",
+    "baseline-browser-mapping": "^2.10.32",
     "dependency-cruiser": "^17.3.6",
-    "eslint": "^9.36.0",
+    "eslint": "^10.4.1",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.22",
-    "eslint-plugin-storybook": "^10.0.3",
+    "eslint-plugin-storybook": "^10.4.2",
     "globals": "^16.4.0",
     "husky": "^9.1.7",
-    "jsdom": "^27.0.1",
+    "jsdom": "^29.1.1",
     "lint-staged": "^16.2.7",
-    "lucide-react": "^0.552.0",
+    "lucide-react": "^1.17.0",
     "madge": "^8.0.0",
     "plop": "^4.0.4",
     "postcss": "^8.5.6",
-    "prettier": "^3.6.2",
-    "react-hook-form": "^7.71.0",
+    "prettier": "^3.8.3",
+    "react-hook-form": "^7.77.0",
     "remark-gfm": "^4.0.1",
-    "storybook": "^10.0.3",
+    "storybook": "^10.4.2",
     "storybook-addon-performance": "^0.17.3",
-    "tailwindcss": "^4.1.16",
-    "tsx": "^4.19.2",
-    "typescript": "~5.9.3",
-    "typescript-eslint": "^8.45.0",
+    "tailwindcss": "^4.3.0",
+    "tsx": "^4.22.4",
+    "typescript": "~6.0.3",
+    "typescript-eslint": "^8.60.1",
     "vite": "^7.1.7",
-    "vite-tsconfig-paths": "^5.1.4",
-    "vitest": "^4.0.6",
-    "zod": "^3.0.0"
+    "vite-tsconfig-paths": "^6.1.1",
+    "vitest": "^4.1.8"
   },
   "eslintConfig": {
     "extends": [

package/dist/ui/components/Dialog/DialogContext.d.ts

@@ -1,10 +0,0 @@
-export interface DialogContextValue {
-    isOpen: boolean;
-    onOpenChange: (open: boolean) => void;
-    onClose: () => void;
-    titleId?: string;
-    descriptionId?: string;
-}
-export declare const DialogContext: import("react").Context<DialogContextValue | undefined>;
-export declare function useDialogContext(): DialogContextValue;
-export declare function useDialogContextOptional(): DialogContextValue | undefined;

package/dist/ui/components/Dialog/DialogProvider.d.ts

@@ -1,10 +0,0 @@
-import { type ReactNode } from "react";
-export interface DialogProviderProps {
-    children: ReactNode;
-    open?: boolean;
-    defaultOpen?: boolean;
-    onOpenChange?: (open: boolean) => void;
-    titleId?: string;
-    descriptionId?: string;
-}
-export declare function DialogProvider({ children, open: controlledOpen, defaultOpen, onOpenChange, titleId, descriptionId, }: DialogProviderProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/components/Toast/ToastContext.d.ts

@@ -1,21 +0,0 @@
-export type ToastVariant = "success" | "error" | "warning" | "info";
-export interface Toast {
-    id: string;
-    title: string;
-    description?: string;
-    variant: ToastVariant;
-    duration?: number;
-    action?: {
-        label: string;
-        onClick: () => void;
-    };
-}
-export interface ToastContextValue {
-    toasts: Toast[];
-    addToast: (toast: Omit<Toast, "id">) => string;
-    removeToast: (id: string) => void;
-    clearAll: () => void;
-}
-export declare const ToastContext: import("react").Context<ToastContextValue | undefined>;
-export declare function useToastContext(): ToastContextValue;
-export declare function useToastContextOptional(): ToastContextValue | undefined;

package/dist/ui/components/Toast/ToastProvider.d.ts

@@ -1,7 +0,0 @@
-import { type ReactNode } from "react";
-export interface ToastProviderProps {
-    children: ReactNode;
-    defaultDuration?: number;
-    maxToasts?: number;
-}
-export declare function ToastProvider({ children, defaultDuration, maxToasts, }: ToastProviderProps): import("react/jsx-runtime").JSX.Element;