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

package/dist/ui/stories/App/AppBuilder.stories.d.ts

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { AppBuilder } from '../../tools/AppBuilder/AppBuilder';
+declare const meta: Meta<typeof AppBuilder>;
+export default meta;
+type Story = StoryObj<typeof AppBuilder>;
+/**
+ * Default App Builder
+ *
+ * Start with an empty application
+ */
+export declare const Default: Story;
+/**
+ * App Builder with Dashboard Example
+ *
+ * Pre-configured with a dashboard feature showing cards and buttons
+ */
+export declare const WithDashboard: Story;
+/**
+ * App Builder with Form Example
+ *
+ * Pre-configured with a contact form feature
+ */
+export declare const WithForm: Story;
+/**
+ * App Builder with Multiple Features
+ *
+ * Shows how to organize an app with multiple features
+ */
+export declare const WithMultipleFeatures: Story;
+/**
+ * App Builder with Grid Layout
+ *
+ * Shows grid layout configuration
+ */
+export declare const WithGridLayout: Story;

package/dist/ui/stories/App/ComponentBuilder.stories.d.ts

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ComponentAssistant } from '../../tools/DeveloperJourney/ComponentAssistant';
+declare const meta: Meta<typeof ComponentAssistant>;
+export default meta;
+type Story = StoryObj<typeof ComponentAssistant>;
+/**
+ * Default Component Builder
+ */
+export declare const Default: Story;

package/dist/ui/stories/App/TokenBuilder.stories.d.ts

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from '@storybook/react';
+declare const TokenBuilderPlaceholder: () => import("react/jsx-runtime").JSX.Element;
+declare const meta: Meta<typeof TokenBuilderPlaceholder>;
+export default meta;
+type Story = StoryObj<typeof TokenBuilderPlaceholder>;
+/**
+ * Default Token Builder
+ */
+export declare const Default: Story;

package/dist/ui/stories/App/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * App Stories
+ *
+ * Special stories for App Builder tools
+ */
+export { default as AppBuilder } from './AppBuilder.stories';
+export { default as ComponentBuilder } from './ComponentBuilder.stories';
+export { default as TokenBuilder } from './TokenBuilder.stories';
+export { default as ThemeBuilder } from './ThemeBuilder.stories';

package/dist/ui/templates/DashboardLayout/DashboardLayout.d.ts

@@ -0,0 +1,55 @@
+import React from 'react';
+import { SideNavbar } from '../../organisms';
+export interface DashboardLayoutProps {
+    /**
+     * Sidebar content - use SideNavbar.Navbar and SideNavbar.Sidebar subcomponents
+     */
+    sidebar?: React.ReactNode;
+    /**
+     * Main content area
+     */
+    children: React.ReactNode;
+    /**
+     * Header content
+     */
+    header?: React.ReactNode;
+    /**
+     * Footer content
+     */
+    footer?: React.ReactNode;
+    /**
+     * Sidebar collapsed by default
+     * @default false
+     */
+    defaultCollapsed?: boolean;
+    /**
+     * SideNavbar props
+     */
+    sidebarProps?: Omit<React.ComponentProps<typeof SideNavbar>, 'children'>;
+}
+/**
+ * DashboardLayout - A complete dashboard page layout
+ *
+ * Combines SideNavbar, Container, and Stack to create a full dashboard structure.
+ * This template provides a complete page layout with sensible defaults.
+ *
+ * @example
+ * ```tsx
+ * <DashboardLayout
+ *   sidebar={
+ *     <>
+ *       <SideNavbar.Navbar>
+ *         <SideNavbar.Navbar.Item icon={<Home />} label="Home" />
+ *       </SideNavbar.Navbar>
+ *       <SideNavbar.Sidebar>
+ *         <SideNavbar.Sidebar.Content>Content</SideNavbar.Sidebar.Content>
+ *       </SideNavbar.Sidebar>
+ *     </>
+ *   }
+ *   header={<Header />}
+ * >
+ *   <MainContent />
+ * </DashboardLayout>
+ * ```
+ */
+export declare function DashboardLayout({ sidebar, children, header, footer, defaultCollapsed, sidebarProps, }: DashboardLayoutProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/templates/DashboardLayout/DashboardLayout.stories.d.ts

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { DashboardLayout } from './DashboardLayout';
+declare const meta: Meta<typeof DashboardLayout>;
+export default meta;
+type Story = StoryObj<typeof DashboardLayout>;
+export declare const Default: Story;
+export declare const CollapsedSidebar: Story;
+export declare const NoSidebar: Story;
+export declare const Minimal: Story;
+export declare const WithEvents: Story;
+export declare const DefaultState: Story;
+export declare const CollapsedState: Story;
+export declare const NoSidebarState: Story;
+export declare const MinimalState: Story;

package/dist/ui/templates/DashboardLayout/index.d.ts

@@ -0,0 +1 @@
+export { DashboardLayout, type DashboardLayoutProps } from './DashboardLayout';

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

@@ -0,0 +1 @@
+export { DashboardLayout, type DashboardLayoutProps } from './DashboardLayout';

package/dist/ui/themes/ThemeBuilder.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Theme Builder
+ *
+ * Builder Pattern for creating custom themes.
+ * Supports theme inheritance and CSS variable generation.
+ */
+import type { CustomThemeConfig, Theme } from './types';
+export declare class ThemeBuilder {
+    private config;
+    private baseFactory;
+    constructor(config: CustomThemeConfig);
+    /**
+     * Build a complete theme from configuration
+     */
+    build(): Theme;
+    /**
+     * Merge color overrides with base colors
+     */
+    private mergeColors;
+    /**
+     * Generate CSS variables from token set
+     */
+    private generateCSSVariables;
+    /**
+     * Create a theme builder instance
+     */
+    static create(config: CustomThemeConfig): ThemeBuilder;
+}

package/dist/ui/themes/ThemeRegistry.d.ts

@@ -0,0 +1,55 @@
+/**
+ * Theme Registry
+ *
+ * Central registry for managing multiple themes.
+ * Supports theme registration, retrieval, and switching.
+ */
+import type { CustomThemeConfig, Theme, ThemeRegistry } from './types';
+export declare class ThemeRegistryManager {
+    private themes;
+    private defaultTheme;
+    /**
+     * Register a new theme
+     */
+    register(config: CustomThemeConfig): Theme;
+    /**
+     * Register built-in themes (light and dark)
+     */
+    registerBuiltInThemes(): void;
+    /**
+     * Generate CSS variables from token set
+     */
+    private generateCSSVariables;
+    /**
+     * Get a theme by name
+     */
+    get(name: string): Theme | undefined;
+    /**
+     * Get all registered themes
+     */
+    getAll(): ThemeRegistry;
+    /**
+     * Check if a theme exists
+     */
+    has(name: string): boolean;
+    /**
+     * Remove a theme
+     */
+    remove(name: string): boolean;
+    /**
+     * Get default theme name
+     */
+    getDefaultTheme(): string;
+    /**
+     * Set default theme
+     */
+    setDefaultTheme(name: string): void;
+    /**
+     * Get theme names
+     */
+    getThemeNames(): string[];
+}
+/**
+ * Global theme registry instance
+ */
+export declare const themeRegistry: ThemeRegistryManager;

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

@@ -0,0 +1,9 @@
+/**
+ * Themes Module
+ *
+ * Exports for the advanced theme system.
+ */
+export { ThemeBuilder } from './ThemeBuilder';
+export { ThemeRegistryManager, themeRegistry } from './ThemeRegistry';
+export type { CustomThemeConfig, Theme, ThemeRegistry, ThemeBuilderOptions, } from './types';
+export { mergeDeep, toCSSVariableName, applyCSSVariables, removeCSSVariables, } from './utils';

package/dist/ui/themes/types.d.ts

@@ -0,0 +1,48 @@
+/**
+ * Theme Types
+ *
+ * Type definitions for the advanced theme system.
+ */
+import type { TokenSet, ThemeMode } from '../tokens';
+import type { ColorRole, SemanticColor } from '../tokens/colors';
+/**
+ * Custom theme configuration
+ * Allows partial overrides of the default token set
+ */
+export interface CustomThemeConfig {
+    name: string;
+    base?: ThemeMode;
+    colors?: Partial<Record<ColorRole, Partial<SemanticColor>>>;
+    spacing?: Partial<TokenSet['spacing']>;
+    typography?: Partial<TokenSet['typography']>;
+    shadows?: Partial<TokenSet['shadows']>;
+    radius?: Partial<TokenSet['radius']>;
+    borders?: Partial<TokenSet['borders']>;
+    animations?: Partial<TokenSet['animations']>;
+    zIndex?: Partial<TokenSet['zIndex']>;
+    opacity?: Partial<TokenSet['opacity']>;
+    gradients?: Partial<TokenSet['gradients']>;
+}
+/**
+ * Complete theme definition
+ */
+export interface Theme extends TokenSet {
+    name: string;
+    mode: ThemeMode;
+    cssVariables: Record<string, string>;
+}
+/**
+ * Theme registry
+ */
+export interface ThemeRegistry {
+    [themeName: string]: Theme;
+}
+/**
+ * Theme builder options
+ */
+export interface ThemeBuilderOptions {
+    enableCSSVariables?: boolean;
+    enableTransitions?: boolean;
+    transitionDuration?: string;
+    storageKey?: string;
+}

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

@@ -0,0 +1,21 @@
+/**
+ * Theme Utilities
+ *
+ * Helper functions for theme operations.
+ */
+/**
+ * Deep merge utility
+ */
+export declare function mergeDeep<T extends Record<string, unknown>>(target: T, ...sources: Partial<T>[]): T;
+/**
+ * Convert CSS variable name to kebab-case
+ */
+export declare function toCSSVariableName(name: string): string;
+/**
+ * Apply CSS variables to element
+ */
+export declare function applyCSSVariables(element: HTMLElement, variables: Record<string, string>): void;
+/**
+ * Remove CSS variables from element
+ */
+export declare function removeCSSVariables(element: HTMLElement, variableNames: string[]): void;

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

@@ -0,0 +1,41 @@
+/**
+ * Token Visualization Components
+ *
+ * React components for visualizing design tokens in Storybook
+ */
+/**
+ * Color Palette Visualization
+ */
+export declare function ColorPalette(): import("react/jsx-runtime").JSX.Element;
+/**
+ * Spacing Reference Visualization
+ */
+export declare function SpacingReference(): import("react/jsx-runtime").JSX.Element;
+/**
+ * Typography Reference Visualization
+ */
+export declare function TypographyReference(): import("react/jsx-runtime").JSX.Element;
+/**
+ * Shadow Reference Visualization
+ */
+export declare function ShadowReference(): import("react/jsx-runtime").JSX.Element;
+/**
+ * Radius Reference Visualization
+ */
+export declare function RadiusReference(): import("react/jsx-runtime").JSX.Element;
+/**
+ * Animation Reference Visualization
+ */
+export declare function AnimationReference(): import("react/jsx-runtime").JSX.Element;
+/**
+ * Z-Index Reference Visualization
+ */
+export declare function ZIndexReference(): import("react/jsx-runtime").JSX.Element;
+/**
+ * Opacity Reference Visualization
+ */
+export declare function OpacityReference(): import("react/jsx-runtime").JSX.Element;
+/**
+ * Gradient Reference Visualization
+ */
+export declare function GradientReference(): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,65 @@
+/**
+ * Animation Tokens
+ *
+ * Centralized animation and transition system for consistent timing and easing.
+ * Uses Factory Pattern for type-safe token creation.
+ */
+export type AnimationDuration = 'fast' | 'base' | 'slow' | 'slower';
+export type EasingFunction = 'ease-in' | 'ease-out' | 'ease-in-out' | 'spring';
+export interface AnimationToken {
+    duration: {
+        value: string;
+        ms: number;
+        tailwind: string;
+    };
+    easing: {
+        value: string;
+        tailwind: string;
+        description: string;
+    };
+}
+export interface TransitionToken {
+    property: string;
+    duration: string;
+    timingFunction: string;
+    tailwind: string;
+}
+/**
+ * Animation Token Factory
+ * Creates animation tokens with consistent timing and easing
+ */
+export declare class AnimationTokenFactory {
+    /**
+     * Create an animation token
+     */
+    static create(duration: AnimationDuration, easing?: EasingFunction): AnimationToken;
+    /**
+     * Create a transition token
+     */
+    static createTransition(property: string | string[], duration?: AnimationDuration, easing?: EasingFunction): TransitionToken;
+}
+/**
+ * Pre-defined animation tokens
+ */
+export declare const ANIMATION_TOKENS: {
+    readonly fast: AnimationToken;
+    readonly base: AnimationToken;
+    readonly slow: AnimationToken;
+    readonly slower: AnimationToken;
+    readonly colors: TransitionToken;
+    readonly opacity: TransitionToken;
+    readonly transform: TransitionToken;
+    readonly all: TransitionToken;
+};
+/**
+ * Helper function to get animation token
+ */
+export declare function getAnimation(duration: AnimationDuration, easing?: EasingFunction): AnimationToken;
+/**
+ * Helper function to get animation classes
+ */
+export declare function getAnimationClass(duration: AnimationDuration, easing?: EasingFunction): string;
+/**
+ * Helper function to get transition classes
+ */
+export declare function getTransitionClass(property: string | string[], duration?: AnimationDuration, easing?: EasingFunction): string;

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/colors.d.ts

@@ -73,8 +73,12 @@ export declare class ColorTokenFactory {
      */
     generatePalette(): Record<ColorRole, SemanticColor>;
 }
-export declare const COLOR_TOKENS_LIGHT: Record<ColorRole, SemanticColor>;
-export declare const COLOR_TOKENS_DARK: Record<ColorRole, SemanticColor>;
+/**
+ * Light theme colors (default)
+ */
+declare let COLOR_TOKENS_LIGHT: Record<ColorRole, SemanticColor>;
+declare let COLOR_TOKENS_DARK: Record<ColorRole, SemanticColor>;
+export { COLOR_TOKENS_LIGHT, COLOR_TOKENS_DARK };
 /**
  * Default color tokens (light theme)
  */
@@ -86,4 +90,24 @@ export declare function getColor(role: ColorRole, shade?: 'light' | 'DEFAULT' |
 /**
  * Helper function to get color as Tailwind class
  */
-export declare function getColorClass(role: ColorRole, shade?: 'light' | 'DEFAULT' | 'dark', type?: 'text' | 'bg' | 'border'): string;
+export declare function getColorClass(role: ColorRole, shade?: 'light' | 'DEFAULT' | 'dark' | 'contrast', type?: 'text' | 'bg' | 'border'): string;
+/**
+ * Helper function to get hover color class
+ * Returns the complete hover class (e.g., 'hover:bg-gray-100')
+ * Note: Tailwind needs to see the full class name, so we return it as a complete string
+ */
+export declare function getHoverColorClass(role: ColorRole, shade?: 'light' | 'DEFAULT' | 'dark', type?: 'text' | 'bg' | 'border'): string;
+/**
+ * Helper function to get focus color class
+ * Returns the complete focus class (e.g., 'focus:bg-gray-100')
+ */
+export declare function getFocusColorClass(role: ColorRole, shade?: 'light' | 'DEFAULT' | 'dark', type?: 'text' | 'bg' | 'border'): string;
+/**
+ * Helper function to get focus ring color class
+ * Returns the complete focus ring class (e.g., 'focus:ring-indigo-500')
+ * This returns complete classes that Tailwind can detect, avoiding string manipulation.
+ *
+ * Note: These classes must be in the safelist or used elsewhere in the codebase
+ * for Tailwind to include them in the build.
+ */
+export declare function getFocusRingClass(role: ColorRole, shade?: 'light' | 'DEFAULT' | 'dark'): 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, getHoverColorClass, getFocusColorClass, getFocusRingClass } 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, getTypographySize, getTypographySizeFromFontSize, getTypographyWeight, getTypographyWeightFromFontWeight, getTypographyLineHeight } 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;