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

package/dist/ui/organisms/Table/index.d.ts

@@ -0,0 +1,30 @@
+export { default as Table } from './Table';
+export type { TableColumn } from './TableTypes';
+export { TableContext, useTableContext, useTableContextOptional } from './TableContext';
+export type { TableContextValue, PaginationMode, PaginationState, SortState, FilterState, SelectionState, } from './TableContext';
+export { TableProvider } from './TableProvider';
+export type { TableProviderProps } from './TableProvider';
+export { default as TableHeader } from './TableHeader';
+export type { TableHeaderProps } from './TableHeader';
+export { default as TableHeaderRow } from './TableHeaderRow';
+export type { TableHeaderRowProps } from './TableHeaderRow';
+export { default as TableHeaderCell } from './TableHeaderCell';
+export type { TableHeaderCellProps } from './TableHeaderCell';
+export { default as TableBody } from './TableBody';
+export type { TableBodyProps } from './TableBody';
+export { default as TableRow } from './TableRow';
+export type { TableRowProps } from './TableRow';
+export { default as TableCell } from './TableCell';
+export type { TableCellProps } from './TableCell';
+export { default as TableFilters } from './TableFilters';
+export type { TableFiltersProps } from './TableFilters';
+export { default as TablePagination } from './TablePagination';
+export type { TablePaginationProps } from './TablePagination';
+export { default as TableEmptyState } from './TableEmptyState';
+export type { TableEmptyStateProps } from './TableEmptyState';
+export { default as TableActions } from './TableActions';
+export type { TableActionsProps } from './TableActions';
+export { useVirtualScrolling } from './useVirtualScrolling';
+export { useColumnResizing } from './useColumnResizing';
+export type { UseVirtualScrollingOptions, VirtualScrollingResult } from './useVirtualScrolling';
+export type { UseColumnResizingOptions, UseColumnResizingResult } from './useColumnResizing';

package/dist/ui/organisms/Table/useColumnResizing.d.ts

@@ -0,0 +1,39 @@
+export interface ColumnWidth {
+    [key: string]: number;
+}
+export interface UseColumnResizingOptions {
+    defaultWidths?: ColumnWidth;
+    minWidth?: number;
+    maxWidth?: number;
+    resizable?: boolean;
+}
+export interface UseColumnResizingResult {
+    columnWidths: ColumnWidth;
+    setColumnWidth: (columnKey: string, width: number) => void;
+    resetColumnWidths: () => void;
+    isResizing: boolean;
+    resizingColumn: string | null;
+    startResize: (columnKey: string, startX: number, startWidth: number) => void;
+    handleResize: (currentX: number) => void;
+    endResize: () => void;
+}
+/**
+ * useColumnResizing Hook
+ *
+ * Hook for managing column resizing in tables.
+ *
+ * @example
+ * ```tsx
+ * const {
+ *   columnWidths,
+ *   setColumnWidth,
+ *   startResize,
+ *   handleResize,
+ *   endResize,
+ * } = useColumnResizing({
+ *   defaultWidths: { name: 200, email: 250 },
+ *   minWidth: 100,
+ * });
+ * ```
+ */
+export declare function useColumnResizing(options?: UseColumnResizingOptions): UseColumnResizingResult;

package/dist/ui/organisms/Table/useVirtualScrolling.d.ts

@@ -0,0 +1,35 @@
+export interface UseVirtualScrollingOptions {
+    itemHeight: number;
+    containerHeight?: number;
+    overscan?: number;
+    enabled?: boolean;
+}
+export interface VirtualScrollingResult {
+    virtualItems: Array<{
+        index: number;
+        start: number;
+        end: number;
+        size: number;
+    }>;
+    totalHeight: number;
+    scrollOffset: number;
+    setScrollOffset: (offset: number) => void;
+    scrollToIndex: (index: number) => void;
+    containerRef: React.RefObject<HTMLDivElement>;
+}
+/**
+ * useVirtualScrolling Hook
+ *
+ * Hook for virtual scrolling to improve performance with large datasets.
+ * Only renders visible items plus overscan buffer.
+ *
+ * @example
+ * ```tsx
+ * const { virtualItems, totalHeight, containerRef } = useVirtualScrolling({
+ *   itemHeight: 50,
+ *   containerHeight: 400,
+ *   overscan: 5,
+ * });
+ * ```
+ */
+export declare function useVirtualScrolling<T>(items: T[], options: UseVirtualScrollingOptions): VirtualScrollingResult;

package/dist/ui/organisms/Timeline/Timeline.d.ts

@@ -0,0 +1,34 @@
+import type { ReactNode } from 'react';
+export type TimelineOrientation = 'horizontal' | 'vertical';
+export interface TimelineItem {
+    id: string;
+    title: string;
+    description?: string;
+    content?: ReactNode;
+    timestamp?: string;
+    icon?: ReactNode;
+    status?: 'default' | 'active' | 'completed' | 'error';
+}
+export interface TimelineProps {
+    items: TimelineItem[];
+    orientation?: TimelineOrientation;
+    className?: string;
+}
+/**
+ * Timeline Component
+ *
+ * A timeline component for displaying events in chronological order.
+ * Supports horizontal and vertical orientations.
+ * Follows Atomic Design principles as an Organism component.
+ *
+ * @example
+ * ```tsx
+ * <Timeline
+ *   items={[
+ *     { id: '1', title: 'Event 1', description: 'Description 1', timestamp: '2024-01-01' },
+ *     { id: '2', title: 'Event 2', description: 'Description 2', timestamp: '2024-01-02' },
+ *   ]}
+ * />
+ * ```
+ */
+export default function Timeline({ items, orientation, className, }: TimelineProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/organisms/Timeline/Timeline.stories.d.ts

@@ -0,0 +1,12 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Timeline from './Timeline';
+declare const meta: Meta<typeof Timeline>;
+export default meta;
+type Story = StoryObj<typeof Timeline>;
+export declare const Default: Story;
+export declare const Horizontal: Story;
+export declare const WithIcons: Story;
+export declare const WithContent: Story;
+export declare const WithErrors: Story;
+export declare const Simple: Story;
+export declare const LongContent: Story;

package/dist/ui/organisms/Timeline/Timeline.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/ui/organisms/Timeline/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './Timeline';
+export type { TimelineProps, TimelineItem, TimelineOrientation } from './Timeline';

package/dist/ui/organisms/Toast/Toast.d.ts

@@ -0,0 +1,8 @@
+import { type HTMLAttributes } from 'react';
+import { type Toast as ToastType } from './ToastContext';
+export interface ToastProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    toast: ToastType;
+    onDismiss: (id: string) => void;
+    position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'top-center' | 'bottom-center';
+}
+export declare function Toast({ toast, onDismiss, position, className, style, ...props }: ToastProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/organisms/Toast/Toast.stories.d.ts

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ToastProvider } from './index';
+declare const meta: Meta<typeof ToastProvider>;
+export default meta;
+type Story = StoryObj<typeof ToastProvider>;
+export declare const Default: Story;
+export declare const TopLeft: Story;
+export declare const BottomRight: Story;
+export declare const BottomLeft: Story;
+export declare const TopCenter: Story;
+export declare const BottomCenter: Story;
+export declare const MultipleToasts: Story;
+export declare const WithActions: Story;
+export declare const CustomDuration: Story;

package/dist/ui/organisms/Toast/Toast.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/ui/organisms/Toast/ToastContainer.d.ts

@@ -0,0 +1,5 @@
+export interface ToastContainerProps {
+    position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'top-center' | 'bottom-center';
+    maxToasts?: number;
+}
+export declare function ToastContainer({ position, maxToasts, }: ToastContainerProps): import("react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,21 @@
+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/organisms/Toast/ToastProvider.d.ts

@@ -0,0 +1,7 @@
+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;

package/dist/ui/organisms/Toast/index.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Toast Components
+ *
+ * Toast notification system with provider, hook, and container.
+ */
+export { ToastProvider } from './ToastProvider';
+export { ToastContainer } from './ToastContainer';
+export { Toast } from './Toast';
+export { useToast } from './useToast';
+export { useToastContext, useToastContextOptional } from './ToastContext';
+export type { ToastProviderProps } from './ToastProvider';
+export type { ToastContainerProps } from './ToastContainer';
+export type { ToastProps } from './Toast';
+export type { ToastOptions } from './useToast';
+export type { Toast as ToastType, ToastVariant, ToastContextValue } from './ToastContext';

package/dist/ui/organisms/Toast/useToast.d.ts

@@ -0,0 +1,35 @@
+import { type ToastVariant } from './ToastContext';
+export interface ToastOptions {
+    title: string;
+    description?: string;
+    variant?: ToastVariant;
+    duration?: number;
+    action?: {
+        label: string;
+        onClick: () => void;
+    };
+}
+/**
+ * useToast Hook
+ *
+ * Hook for showing toast notifications.
+ *
+ * @example
+ * ```tsx
+ * const toast = useToast();
+ *
+ * toast.success('Success!', 'Operation completed successfully');
+ * toast.error('Error!', 'Something went wrong');
+ * toast.info('Info', 'Here is some information');
+ * toast.warning('Warning', 'Please be careful');
+ * ```
+ */
+export declare function useToast(): {
+    show: (options: ToastOptions) => string;
+    success: (title: string, description?: string, options?: Omit<ToastOptions, "title" | "description" | "variant">) => string;
+    error: (title: string, description?: string, options?: Omit<ToastOptions, "title" | "description" | "variant">) => string;
+    warning: (title: string, description?: string, options?: Omit<ToastOptions, "title" | "description" | "variant">) => string;
+    info: (title: string, description?: string, options?: Omit<ToastOptions, "title" | "description" | "variant">) => string;
+    dismiss: (id: string) => void;
+    clearAll: () => void;
+};

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

@@ -1,6 +1,16 @@
 export { default as LoginBox } from "./LoginBox/LoginBox";
 export { default as Modal } from "./Modal/Modal";
 export { default as Table } from "./Table/Table";
-export type { TableColumn } from "./Table/Table";
+export * from "./Table";
 export { default as Sidebar } from "./Sidebar/Sidebar";
-export type { SidebarProps } from "./Sidebar/Sidebar";
+export * from "./Sidebar";
+export * from "./Dialog";
+export * from "./Toast";
+export { default as Stepper } from "./Stepper/Stepper";
+export type { StepperProps, StepperStep, StepperStatus } from "./Stepper/Stepper";
+export { default as Timeline } from "./Timeline/Timeline";
+export type { TimelineProps, TimelineItem, TimelineOrientation } from "./Timeline/Timeline";
+export { default as CommandPalette } from "./CommandPalette/CommandPalette";
+export type { CommandPaletteProps, CommandItem } from "./CommandPalette/CommandPalette";
+export { default as DataGrid } from "./DataGrid/DataGrid";
+export type { DataGridProps, DataGridColumn, DataGridGroup } from "./DataGrid/DataGrid";

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

@@ -0,0 +1,52 @@
+/**
+ * Advanced Theme Provider
+ *
+ * Enhanced ThemeProvider with support for:
+ * - Multiple themes simultaneously
+ * - CSS variables
+ * - Theme inheritance
+ * - Smooth transitions
+ */
+import { type ReactNode } from 'react';
+import type { Theme, CustomThemeConfig, ThemeBuilderOptions } from '../themes/types';
+export interface AdvancedThemeContextValue {
+    currentTheme: string;
+    themes: Record<string, Theme>;
+    setTheme: (themeName: string) => void;
+    registerTheme: (config: CustomThemeConfig) => Theme;
+    removeTheme: (themeName: string) => boolean;
+    getTheme: (themeName?: string) => Theme | undefined;
+    tokens: Theme | null;
+    options: ThemeBuilderOptions;
+    setOptions: (options: Partial<ThemeBuilderOptions>) => void;
+}
+export interface AdvancedThemeProviderProps {
+    children: ReactNode;
+    defaultTheme?: string;
+    options?: ThemeBuilderOptions;
+    initialThemes?: CustomThemeConfig[];
+}
+/**
+ * Advanced ThemeProvider Component
+ *
+ * Provides advanced theme management with support for multiple themes,
+ * CSS variables, inheritance, and smooth transitions.
+ *
+ * @example
+ * ```tsx
+ * <AdvancedThemeProvider
+ *   defaultTheme="light"
+ *   options={{
+ *     enableCSSVariables: true,
+ *     enableTransitions: true,
+ *   }}
+ * >
+ *   <App />
+ * </AdvancedThemeProvider>
+ * ```
+ */
+export declare function AdvancedThemeProvider({ children, defaultTheme, options: initialOptions, initialThemes, }: AdvancedThemeProviderProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Hook to use advanced theme context
+ */
+export declare function useAdvancedTheme(): AdvancedThemeContextValue;

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

@@ -0,0 +1,9 @@
+/**
+ * Providers Module
+ *
+ * Exports for theme and context providers.
+ */
+export { ThemeProvider, useTheme } from './ThemeProvider';
+export type { ThemeContextValue, ThemeProviderProps } from './ThemeProvider';
+export { AdvancedThemeProvider, useAdvancedTheme, } from './AdvancedThemeProvider';
+export type { AdvancedThemeContextValue, AdvancedThemeProviderProps } from './AdvancedThemeProvider';

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/tokens.factory';
+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, any>>(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;