@fabio.caffarello/react-design-system 1.7.0 → 1.8.0

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

@@ -0,0 +1,61 @@
+/**
+ * Border Tokens
+ *
+ * Centralized border system for consistent borders and dividers.
+ * Uses Factory Pattern for type-safe token creation.
+ */
+export type BorderWidth = 'none' | 'thin' | 'base' | 'medium' | 'thick';
+export type BorderStyle = 'solid' | 'dashed' | 'dotted';
+export interface BorderToken {
+    width: {
+        value: number;
+        px: string;
+        tailwind: string;
+    };
+    style: BorderStyle;
+    description: string;
+}
+/**
+ * Border Token Factory
+ * Creates border tokens with consistent values
+ */
+export declare class BorderTokenFactory {
+    /**
+     * Create a border width token
+     */
+    static createWidth(width: BorderWidth): BorderToken['width'];
+    /**
+     * Create a complete border token
+     */
+    static create(width: BorderWidth, style?: BorderStyle): BorderToken;
+}
+/**
+ * Pre-defined border tokens
+ */
+export declare const BORDER_TOKENS: {
+    readonly none: BorderToken;
+    readonly thin: BorderToken;
+    readonly base: BorderToken;
+    readonly medium: BorderToken;
+    readonly thick: BorderToken;
+    readonly thinDashed: BorderToken;
+    readonly baseDashed: BorderToken;
+    readonly thinDotted: BorderToken;
+    readonly baseDotted: BorderToken;
+};
+/**
+ * Helper function to get border token
+ */
+export declare function getBorder(size: keyof typeof BORDER_TOKENS): BorderToken;
+/**
+ * Helper function to get border width as Tailwind class
+ */
+export declare function getBorderWidthClass(width: BorderWidth): string;
+/**
+ * Helper function to get border style as Tailwind class
+ */
+export declare function getBorderStyleClass(style: BorderStyle): string;
+/**
+ * Helper function to get complete border classes
+ */
+export declare function getBorderClasses(width: BorderWidth, style?: BorderStyle): string;

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

@@ -0,0 +1,55 @@
+/**
+ * Gradient Tokens
+ *
+ * Centralized gradient system for consistent color gradients.
+ * Uses Factory Pattern for type-safe token creation.
+ */
+export type GradientDirection = 'to-r' | 'to-l' | 'to-t' | 'to-b' | 'to-tr' | 'to-tl' | 'to-br' | 'to-bl';
+export type GradientRole = 'primary' | 'secondary' | 'success' | 'error' | 'info' | 'warning';
+export interface GradientToken {
+    value: string;
+    tailwind: string;
+    description: string;
+    from: string;
+    via?: string;
+    to: string;
+}
+/**
+ * Gradient Token Factory
+ * Creates gradient tokens with consistent color schemes
+ */
+export declare class GradientTokenFactory {
+    /**
+     * Create a gradient token
+     */
+    static create(role: GradientRole, direction?: GradientDirection): GradientToken;
+    /**
+     * Convert hex color to approximate Tailwind color class
+     * This is a helper for documentation, actual implementation uses arbitrary values
+     */
+    private static hexToTailwindColor;
+}
+/**
+ * Pre-defined gradient tokens
+ */
+export declare const GRADIENT_TOKENS: {
+    readonly primary: GradientToken;
+    readonly secondary: GradientToken;
+    readonly success: GradientToken;
+    readonly error: GradientToken;
+    readonly info: GradientToken;
+    readonly warning: GradientToken;
+    readonly 'primary-to-r': GradientToken;
+    readonly 'primary-to-b': GradientToken;
+    readonly 'secondary-to-r': GradientToken;
+    readonly 'success-to-r': GradientToken;
+    readonly 'error-to-r': GradientToken;
+};
+/**
+ * Helper function to get gradient token
+ */
+export declare function getGradient(role: GradientRole, direction?: GradientDirection): GradientToken;
+/**
+ * Helper function to get gradient as Tailwind classes
+ */
+export declare function getGradientClass(role: GradientRole, direction?: GradientDirection): string;

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

@@ -0,0 +1,31 @@
+/**
+ * Design Tokens Index
+ *
+ * Centralized exports for all design tokens.
+ */
+export * from './colors';
+export { COLOR_TOKENS, COLOR_TOKENS_LIGHT, COLOR_TOKENS_DARK, getColor, getColorClass } from './colors';
+export * from './spacing';
+export { SPACING_TOKENS, getSpacing, getSpacingClass } from './spacing';
+export * from './typography';
+export { TYPOGRAPHY_TOKENS, FONT_FAMILY_TOKENS, FONT_WEIGHT_TOKENS, getTypography, getTypographyClasses } from './typography';
+export * from './shadows';
+export { SHADOW_TOKENS, getShadow, getShadowClass } from './shadows';
+export * from './radius';
+export { RADIUS_TOKENS, getRadius, getRadiusClass } from './radius';
+export * from './borders';
+export { BORDER_TOKENS, getBorder, getBorderWidthClass, getBorderStyleClass, getBorderClasses } from './borders';
+export * from './breakpoints';
+export { BREAKPOINT_TOKENS, getBreakpoint, getMediaQuery } from './breakpoints';
+export * from './animations';
+export { ANIMATION_TOKENS, getAnimation, getAnimationClass, getTransitionClass } from './animations';
+export * from './z-index';
+export { Z_INDEX_TOKENS, getZIndex, getZIndexClass } from './z-index';
+export * from './opacity';
+export { OPACITY_TOKENS, getOpacity, getOpacityClass } from './opacity';
+export * from './gradients';
+export { GRADIENT_TOKENS, getGradient, getGradientClass } from './gradients';
+export * from './sidebar';
+export { SIDEBAR_TOKENS, getNestedIndentClass } from './sidebar';
+export * from './tokens.factory';
+export { TokensFactory, defaultTokensFactory, createTokenSet } from './tokens.factory';

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

@@ -0,0 +1,51 @@
+/**
+ * Opacity Tokens
+ *
+ * Centralized opacity system for consistent transparency values.
+ * Uses Factory Pattern for type-safe token creation.
+ */
+export type OpacityValue = 0 | 5 | 10 | 20 | 25 | 30 | 40 | 50 | 60 | 70 | 75 | 80 | 90 | 95 | 100;
+export interface OpacityToken {
+    value: OpacityValue;
+    decimal: number;
+    tailwind: string;
+    description: string;
+}
+/**
+ * Opacity Token Factory
+ * Creates opacity tokens with consistent values
+ */
+export declare class OpacityTokenFactory {
+    /**
+     * Create an opacity token
+     */
+    static create(value: OpacityValue): OpacityToken;
+}
+/**
+ * Pre-defined opacity tokens
+ */
+export declare const OPACITY_TOKENS: {
+    readonly transparent: OpacityToken;
+    readonly '5': OpacityToken;
+    readonly '10': OpacityToken;
+    readonly '20': OpacityToken;
+    readonly '25': OpacityToken;
+    readonly '30': OpacityToken;
+    readonly '40': OpacityToken;
+    readonly '50': OpacityToken;
+    readonly '60': OpacityToken;
+    readonly '70': OpacityToken;
+    readonly '75': OpacityToken;
+    readonly '80': OpacityToken;
+    readonly '90': OpacityToken;
+    readonly '95': OpacityToken;
+    readonly opaque: OpacityToken;
+};
+/**
+ * Helper function to get opacity token
+ */
+export declare function getOpacity(value: OpacityValue): OpacityToken;
+/**
+ * Helper function to get opacity as Tailwind class
+ */
+export declare function getOpacityClass(value: OpacityValue): string;

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

@@ -0,0 +1,45 @@
+/**
+ * Border Radius Tokens
+ *
+ * Centralized border radius system for consistent rounded corners.
+ * Uses Factory Pattern for type-safe token creation.
+ */
+export type RadiusSize = 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full';
+export interface RadiusToken {
+    value: number;
+    rem: string;
+    px: string;
+    tailwind: string;
+    description: string;
+}
+/**
+ * Radius Token Factory
+ * Creates radius tokens with consistent values
+ */
+export declare class RadiusTokenFactory {
+    /**
+     * Create a radius token
+     */
+    static create(size: RadiusSize): RadiusToken;
+}
+/**
+ * Pre-defined radius tokens
+ */
+export declare const RADIUS_TOKENS: {
+    readonly none: RadiusToken;
+    readonly sm: RadiusToken;
+    readonly md: RadiusToken;
+    readonly lg: RadiusToken;
+    readonly xl: RadiusToken;
+    readonly '2xl': RadiusToken;
+    readonly '3xl': RadiusToken;
+    readonly full: RadiusToken;
+};
+/**
+ * Helper function to get radius token
+ */
+export declare function getRadius(size: keyof typeof RADIUS_TOKENS): RadiusToken;
+/**
+ * Helper function to get radius as Tailwind class
+ */
+export declare function getRadiusClass(size: keyof typeof RADIUS_TOKENS): string;

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

@@ -0,0 +1,42 @@
+/**
+ * Shadow Tokens
+ *
+ * Centralized shadow system for consistent elevation and depth.
+ * Uses Factory Pattern for type-safe token creation.
+ */
+export type ShadowSize = 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'inner';
+export interface ShadowToken {
+    value: string;
+    tailwind: string;
+    description: string;
+}
+/**
+ * Shadow Token Factory
+ * Creates shadow tokens with consistent values
+ */
+export declare class ShadowTokenFactory {
+    /**
+     * Create a shadow token
+     */
+    static create(size: ShadowSize): ShadowToken;
+}
+/**
+ * Pre-defined shadow tokens
+ */
+export declare const SHADOW_TOKENS: {
+    readonly none: ShadowToken;
+    readonly sm: ShadowToken;
+    readonly md: ShadowToken;
+    readonly lg: ShadowToken;
+    readonly xl: ShadowToken;
+    readonly '2xl': ShadowToken;
+    readonly inner: ShadowToken;
+};
+/**
+ * Helper function to get shadow token
+ */
+export declare function getShadow(size: keyof typeof SHADOW_TOKENS): ShadowToken;
+/**
+ * Helper function to get shadow as Tailwind class
+ */
+export declare function getShadowClass(size: keyof typeof SHADOW_TOKENS): string;

package/dist/ui/tokens/themes/dark.d.ts

@@ -4,35 +4,35 @@
  * Dark theme color palette and tokens.
  */
 export declare const DARK_THEME: {
-    readonly colors: Record<import("../colors").ColorRole, import("../colors").SemanticColor>;
+    readonly colors: Record<import("..").ColorRole, import("..").SemanticColor>;
     readonly spacing: {
-        readonly none: import("../spacing").SpacingToken;
-        readonly xs: import("../spacing").SpacingToken;
-        readonly sm: import("../spacing").SpacingToken;
-        readonly md: import("../spacing").SpacingToken;
-        readonly base: import("../spacing").SpacingToken;
-        readonly lg: import("../spacing").SpacingToken;
-        readonly xl: import("../spacing").SpacingToken;
-        readonly '2xl': import("../spacing").SpacingToken;
-        readonly '3xl': import("../spacing").SpacingToken;
-        readonly '4xl': import("../spacing").SpacingToken;
-        readonly '5xl': import("../spacing").SpacingToken;
-        readonly '6xl': import("../spacing").SpacingToken;
+        readonly none: import("..").SpacingToken;
+        readonly xs: import("..").SpacingToken;
+        readonly sm: import("..").SpacingToken;
+        readonly md: import("..").SpacingToken;
+        readonly base: import("..").SpacingToken;
+        readonly lg: import("..").SpacingToken;
+        readonly xl: import("..").SpacingToken;
+        readonly '2xl': import("..").SpacingToken;
+        readonly '3xl': import("..").SpacingToken;
+        readonly '4xl': import("..").SpacingToken;
+        readonly '5xl': import("..").SpacingToken;
+        readonly '6xl': import("..").SpacingToken;
     };
     readonly typography: {
-        readonly h1: import("../typography").TypographyToken;
-        readonly h2: import("../typography").TypographyToken;
-        readonly h3: import("../typography").TypographyToken;
-        readonly h4: import("../typography").TypographyToken;
-        readonly h5: import("../typography").TypographyToken;
-        readonly h6: import("../typography").TypographyToken;
-        readonly body: import("../typography").TypographyToken;
-        readonly bodySmall: import("../typography").TypographyToken;
-        readonly bodyLarge: import("../typography").TypographyToken;
-        readonly label: import("../typography").TypographyToken;
-        readonly caption: import("../typography").TypographyToken;
-        readonly button: import("../typography").TypographyToken;
+        readonly h1: import("..").TypographyToken;
+        readonly h2: import("..").TypographyToken;
+        readonly h3: import("..").TypographyToken;
+        readonly h4: import("..").TypographyToken;
+        readonly h5: import("..").TypographyToken;
+        readonly h6: import("..").TypographyToken;
+        readonly body: import("..").TypographyToken;
+        readonly bodySmall: import("..").TypographyToken;
+        readonly bodyLarge: import("..").TypographyToken;
+        readonly label: import("..").TypographyToken;
+        readonly caption: import("..").TypographyToken;
+        readonly button: import("..").TypographyToken;
     };
-    readonly breakpoints: Record<import("../breakpoints").BreakpointName, import("../breakpoints").BreakpointToken>;
+    readonly breakpoints: Record<import("..").BreakpointName, import("..").BreakpointToken>;
     readonly mode: "dark";
 };

package/dist/ui/tokens/themes/light.d.ts

@@ -4,35 +4,35 @@
  * Light theme color palette and tokens.
  */
 export declare const LIGHT_THEME: {
-    readonly colors: Record<import("../colors").ColorRole, import("../colors").SemanticColor>;
+    readonly colors: Record<import("..").ColorRole, import("..").SemanticColor>;
     readonly spacing: {
-        readonly none: import("../spacing").SpacingToken;
-        readonly xs: import("../spacing").SpacingToken;
-        readonly sm: import("../spacing").SpacingToken;
-        readonly md: import("../spacing").SpacingToken;
-        readonly base: import("../spacing").SpacingToken;
-        readonly lg: import("../spacing").SpacingToken;
-        readonly xl: import("../spacing").SpacingToken;
-        readonly '2xl': import("../spacing").SpacingToken;
-        readonly '3xl': import("../spacing").SpacingToken;
-        readonly '4xl': import("../spacing").SpacingToken;
-        readonly '5xl': import("../spacing").SpacingToken;
-        readonly '6xl': import("../spacing").SpacingToken;
+        readonly none: import("..").SpacingToken;
+        readonly xs: import("..").SpacingToken;
+        readonly sm: import("..").SpacingToken;
+        readonly md: import("..").SpacingToken;
+        readonly base: import("..").SpacingToken;
+        readonly lg: import("..").SpacingToken;
+        readonly xl: import("..").SpacingToken;
+        readonly '2xl': import("..").SpacingToken;
+        readonly '3xl': import("..").SpacingToken;
+        readonly '4xl': import("..").SpacingToken;
+        readonly '5xl': import("..").SpacingToken;
+        readonly '6xl': import("..").SpacingToken;
     };
     readonly typography: {
-        readonly h1: import("../typography").TypographyToken;
-        readonly h2: import("../typography").TypographyToken;
-        readonly h3: import("../typography").TypographyToken;
-        readonly h4: import("../typography").TypographyToken;
-        readonly h5: import("../typography").TypographyToken;
-        readonly h6: import("../typography").TypographyToken;
-        readonly body: import("../typography").TypographyToken;
-        readonly bodySmall: import("../typography").TypographyToken;
-        readonly bodyLarge: import("../typography").TypographyToken;
-        readonly label: import("../typography").TypographyToken;
-        readonly caption: import("../typography").TypographyToken;
-        readonly button: import("../typography").TypographyToken;
+        readonly h1: import("..").TypographyToken;
+        readonly h2: import("..").TypographyToken;
+        readonly h3: import("..").TypographyToken;
+        readonly h4: import("..").TypographyToken;
+        readonly h5: import("..").TypographyToken;
+        readonly h6: import("..").TypographyToken;
+        readonly body: import("..").TypographyToken;
+        readonly bodySmall: import("..").TypographyToken;
+        readonly bodyLarge: import("..").TypographyToken;
+        readonly label: import("..").TypographyToken;
+        readonly caption: import("..").TypographyToken;
+        readonly button: import("..").TypographyToken;
     };
-    readonly breakpoints: Record<import("../breakpoints").BreakpointName, import("../breakpoints").BreakpointToken>;
+    readonly breakpoints: Record<import("..").BreakpointName, import("..").BreakpointToken>;
     readonly mode: "light";
 };

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

@@ -8,12 +8,26 @@ import { type SpacingScale, type SpacingToken } from './spacing';
 import { type TypographyToken, type FontSize, type LineHeight, type FontWeight } from './typography';
 import { type ColorRole, type SemanticColor } from './colors';
 import { type BreakpointName, type BreakpointToken } from './breakpoints';
+import { type ShadowSize, type ShadowToken } from './shadows';
+import { type RadiusSize, type RadiusToken } from './radius';
+import { type BorderWidth, type BorderToken } from './borders';
+import { type AnimationDuration, type EasingFunction, type AnimationToken } from './animations';
+import { type ZIndexLayer, type ZIndexToken } from './z-index';
+import { type OpacityValue, type OpacityToken } from './opacity';
+import { type GradientRole, type GradientDirection, type GradientToken } from './gradients';
 export type ThemeMode = 'light' | 'dark';
 export interface TokenSet {
     spacing: Record<string, SpacingToken>;
     typography: Record<string, TypographyToken>;
     colors: Record<ColorRole, SemanticColor>;
     breakpoints: Record<BreakpointName, BreakpointToken>;
+    shadows: Record<string, ShadowToken>;
+    radius: Record<string, RadiusToken>;
+    borders: Record<string, BorderToken>;
+    animations: Record<string, AnimationToken>;
+    zIndex: Record<string, ZIndexToken>;
+    opacity: Record<string, OpacityToken>;
+    gradients: Record<string, GradientToken>;
 }
 /**
  * Tokens Factory
@@ -38,6 +52,34 @@ export declare class TokensFactory {
      * Create breakpoint token
      */
     createBreakpoint(name: BreakpointName): BreakpointToken;
+    /**
+     * Create shadow token
+     */
+    createShadow(size: ShadowSize): ShadowToken;
+    /**
+     * Create radius token
+     */
+    createRadius(size: RadiusSize): RadiusToken;
+    /**
+     * Create border token
+     */
+    createBorder(width: BorderWidth): BorderToken;
+    /**
+     * Create animation token
+     */
+    createAnimation(duration: AnimationDuration, easing?: EasingFunction): AnimationToken;
+    /**
+     * Create z-index token
+     */
+    createZIndex(layer: ZIndexLayer): ZIndexToken;
+    /**
+     * Create opacity token
+     */
+    createOpacity(value: OpacityValue): OpacityToken;
+    /**
+     * Create gradient token
+     */
+    createGradient(role: GradientRole, direction?: GradientDirection): GradientToken;
     /**
      * Create complete token set for a theme
      */

package/dist/ui/tokens/z-index.d.ts

@@ -0,0 +1,44 @@
+/**
+ * Z-Index Tokens
+ *
+ * Centralized z-index system for consistent layering.
+ * Uses Factory Pattern for type-safe token creation.
+ */
+export type ZIndexLayer = 'base' | 'dropdown' | 'sticky' | 'fixed' | 'modal-backdrop' | 'modal' | 'popover' | 'tooltip' | 'toast';
+export interface ZIndexToken {
+    value: number;
+    tailwind: string;
+    description: string;
+}
+/**
+ * Z-Index Token Factory
+ * Creates z-index tokens with consistent layering
+ */
+export declare class ZIndexTokenFactory {
+    /**
+     * Create a z-index token
+     */
+    static create(layer: ZIndexLayer): ZIndexToken;
+}
+/**
+ * Pre-defined z-index tokens
+ */
+export declare const Z_INDEX_TOKENS: {
+    readonly base: ZIndexToken;
+    readonly dropdown: ZIndexToken;
+    readonly sticky: ZIndexToken;
+    readonly fixed: ZIndexToken;
+    readonly 'modal-backdrop': ZIndexToken;
+    readonly modal: ZIndexToken;
+    readonly popover: ZIndexToken;
+    readonly tooltip: ZIndexToken;
+    readonly toast: ZIndexToken;
+};
+/**
+ * Helper function to get z-index token
+ */
+export declare function getZIndex(layer: ZIndexLayer): ZIndexToken;
+/**
+ * Helper function to get z-index as Tailwind class
+ */
+export declare function getZIndexClass(layer: ZIndexLayer): string;

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

@@ -0,0 +1,6 @@
+/**
+ * Utils Module
+ *
+ * Shared utilities and helper functions for the design system.
+ */
+export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fabio.caffarello/react-design-system",
   "private": false,
-  "version": "1.7.0",
+  "version": "1.8.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -14,6 +14,38 @@
         "default": "./dist/index.js"
       },
       "require": "./dist/index.cjs"
+    },
+    "./atoms": {
+      "types": "./dist/ui/atoms/index.d.ts",
+      "import": {
+        "development": "./src/ui/atoms/index.ts",
+        "default": "./dist/atoms/index.js"
+      },
+      "require": "./dist/atoms/index.cjs"
+    },
+    "./molecules": {
+      "types": "./dist/ui/molecules/index.d.ts",
+      "import": {
+        "development": "./src/ui/molecules/index.ts",
+        "default": "./dist/molecules/index.js"
+      },
+      "require": "./dist/molecules/index.cjs"
+    },
+    "./organisms": {
+      "types": "./dist/ui/organisms/index.d.ts",
+      "import": {
+        "development": "./src/ui/organisms/index.ts",
+        "default": "./dist/organisms/index.js"
+      },
+      "require": "./dist/organisms/index.cjs"
+    },
+    "./tokens": {
+      "types": "./dist/ui/tokens/index.d.ts",
+      "import": {
+        "development": "./src/ui/tokens/index.ts",
+        "default": "./dist/tokens/index.js"
+      },
+      "require": "./dist/tokens/index.cjs"
     }
   },
   "files": [
@@ -32,27 +64,39 @@
     "build-storybook": "storybook build",
     "plop": "plop",
     "postplop": "prettier -w './src/ui/**/*.{ts,tsx}'",
-    "test": "vitest run"
+    "test": "vitest run",
+    "test:coverage": "vitest run --coverage",
+    "test:watch": "vitest watch",
+    "audit:tokens": "node scripts/audit-tokens.js"
   },
   "peerDependencies": {
+    "@hookform/resolvers": "^3.0.0",
+    "lucide-react": "^0.552.0",
     "react": ">=19",
     "react-dom": ">=19",
-    "lucide-react": "^0.552.0"
+    "react-hook-form": "^7.71.0",
+    "zod": "^3.0.0"
   },
   "dependencies": {
     "@tailwindcss/postcss": "^4.1.16",
-    "react": "^19.1.1",
-    "react-dom": "^19.1.1"
+    "react": ">=19",
+    "react-dom": ">=19"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^4.1.2",
     "@eslint/js": "^9.36.0",
+    "@hookform/resolvers": "^3.0.0",
     "@storybook/addon-a11y": "^10.0.3",
     "@storybook/addon-docs": "^10.0.3",
+    "@storybook/addon-mcp": "^0.1.8",
     "@storybook/addon-vitest": "^10.0.3",
     "@storybook/react-vite": "^10.0.3",
+    "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.0",
+    "lucide-react": "^0.552.0",
+    "react-hook-form": "^7.71.0",
+    "zod": "^3.0.0",
     "@types/node": "^24.6.0",
     "@types/react": "^19.1.16",
     "@types/react-dom": "^19.1.9",
@@ -83,4 +127,4 @@
       "plugin:storybook/recommended"
     ]
   }
-}
+}