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

package/dist/ui/atoms/Textarea/Textarea.stories.d.ts

@@ -1,9 +1,19 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import Textarea from "./Textarea";
 declare const meta: Meta<typeof Textarea>;
-export declare const Primary: StoryObj<typeof Textarea>;
-export declare const WithDefaultValue: StoryObj<typeof Textarea>;
-export declare const WithError: StoryObj<typeof Textarea>;
-export declare const NoResize: StoryObj<typeof Textarea>;
-export declare const LargeTextarea: StoryObj<typeof Textarea>;
 export default meta;
+type Story = StoryObj<typeof Textarea>;
+export declare const Default: Story;
+export declare const WithDefaultValue: Story;
+export declare const WithError: Story;
+export declare const ResizeOptions: Story;
+export declare const Sizes: Story;
+export declare const Controlled: Story;
+export declare const Uncontrolled: Story;
+export declare const AllStates: Story;
+export declare const WithCols: Story;
+export declare const WithEvents: Story;
+export declare const DefaultState: Story;
+export declare const FocusState: Story;
+export declare const ErrorState: Story;
+export declare const DisabledState: Story;

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

@@ -4,6 +4,7 @@ export interface TooltipProps extends HTMLAttributes<HTMLDivElement> {
     children: ReactNode;
     position?: "top" | "bottom" | "left" | "right";
     delay?: number;
+    'aria-label'?: string;
 }
 /**
  * Tooltip Component
@@ -18,4 +19,4 @@ export interface TooltipProps extends HTMLAttributes<HTMLDivElement> {
  * </Tooltip>
  * ```
  */
-export default function Tooltip({ content, children, position, delay, className, ...props }: TooltipProps): import("react/jsx-runtime").JSX.Element;
+export default function Tooltip({ content, children, position, delay, className, 'aria-label': _ariaLabel, ...props }: TooltipProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/atoms/Tooltip/Tooltip.stories.d.ts

@@ -5,12 +5,44 @@ declare const meta: {
     component: typeof Tooltip;
     parameters: {
         layout: string;
+        docs: {
+            description: {
+                component: string;
+            };
+        };
     };
     tags: string[];
     argTypes: {
+        content: {
+            control: "text";
+            description: string;
+        };
+        children: {
+            control: false;
+            description: string;
+        };
         position: {
             control: "select";
             options: string[];
+            description: string;
+        };
+        delay: {
+            control: "number";
+            description: string;
+        };
+        'aria-label': {
+            control: "text";
+            description: string;
+        };
+        onOpenChange: {
+            description: string;
+            action: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                category: string;
+            };
         };
     };
 };
@@ -21,3 +53,14 @@ export declare const Top: Story;
 export declare const Bottom: Story;
 export declare const Left: Story;
 export declare const Right: Story;
+export declare const WithCustomDelay: Story;
+export declare const KeyboardAccessible: Story;
+export declare const WithAriaLabel: Story;
+export declare const AllPositions: Story;
+export declare const KeyboardNavigation: Story;
+export declare const WithDifferentDelays: Story;
+export declare const WithEvents: Story;
+export declare const ClosedState: Story;
+export declare const OpenState: Story;
+export declare const TopPosition: Story;
+export declare const BottomPosition: Story;

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

@@ -1,24 +1,40 @@
 export { default as Info } from "./Info/Info";
+export type { InfoProps } from "./Info/Info";
 export { default as Text } from "./Text/Text";
 export { default as Input } from "./Input/Input";
-export type { InputProps } from "./Input/Input";
+export type { InputProps, InputSize, InputVariant, InputState } from "./Input/Input";
 export { default as Button } from "./Button/Button";
-export { default as BoxWrapper } from "./BoxWrapper/BoxWrapper";
+export type { ButtonProps, ButtonVariant, ButtonSize } from "./Button/Button";
+export { default as NavLink } from "./NavLink/NavLink";
+export type { NavLinkProps, NavLinkVariant, NavLinkSize } from "./NavLink";
+export { useNavLink } from "./NavLink";
+export type { UseNavLinkOptions, UseNavLinkResult } from "./NavLink";
 export { default as Badge } from "./Badge/Badge";
 export { default as Select } from "./Select/Select";
+export type { SelectProps, SelectOption, SelectOptionGroup, SelectSize } from "./Select/Select";
 export { default as Textarea } from "./Textarea/Textarea";
 export { default as Label } from "./Label/Label";
 export { default as ErrorMessage } from "./ErrorMessage/ErrorMessage";
-export { default as NavLink } from "./NavLink/NavLink";
 export { default as Tooltip } from "./Tooltip/Tooltip";
 export type { TooltipProps } from "./Tooltip/Tooltip";
 export { default as Skeleton } from "./Skeleton/Skeleton";
+export { default as Spinner } from "./Spinner/Spinner";
+export type { SpinnerProps, SpinnerSize, SpinnerVariant } from "./Spinner/Spinner";
 export type { SkeletonProps } from "./Skeleton/Skeleton";
-export { default as SidebarItem } from "./SidebarItem/SidebarItem";
-export type { SidebarItemProps } from "./SidebarItem/SidebarItem";
 export { default as Collapsible } from "./Collapsible/Collapsible";
 export type { CollapsibleProps } from "./Collapsible/Collapsible";
 export { default as Checkbox } from "./Checkbox/Checkbox";
 export type { CheckboxProps } from "./Checkbox/Checkbox";
 export { default as Radio } from "./Radio/Radio";
 export type { RadioProps } from "./Radio/Radio";
+export { default as Progress } from "./Progress/Progress";
+export type { ProgressProps, ProgressVariant, ProgressSize } from "./Progress/Progress";
+export { default as Switch } from "./Switch/Switch";
+export type { SwitchProps, SwitchSize } from "./Switch/Switch";
+export { default as Separator } from "./Separator/Separator";
+export type { SeparatorProps, SeparatorOrientation, SeparatorVariant } from "./Separator/Separator";
+export { default as Slider } from "./Slider/Slider";
+export type { SliderProps, SliderVariant, SliderSize } from "./Slider/Slider";
+export * from "./Chip";
+export type { ChipProps, ChipVariant, ChipSize } from "./Chip";
+export * from "./Avatar";

package/dist/ui/builders/ComponentBuilder.d.ts

@@ -0,0 +1,93 @@
+/**
+ * Component Builder
+ *
+ * Fluent builder for creating components with method chaining.
+ */
+import type { ComponentBuilderConfig, BuiltComponent, ComponentFactoryOptions } from './types';
+/**
+ * Component Builder
+ *
+ * Fluent builder for creating components with method chaining.
+ *
+ * @example
+ * ```typescript
+ * const button = ComponentBuilder
+ *   .atom('Button')
+ *   .withVariants(['primary', 'secondary', 'outline'])
+ *   .withSizes(['sm', 'md', 'lg'])
+ *   .withTokens({
+ *     colors: ['primary', 'secondary'],
+ *     spacing: ['sm', 'md', 'lg'],
+ *   })
+ *   .withAccessibility({
+ *     ariaLabel: true,
+ *     keyboardNavigation: true,
+ *   })
+ *   .build();
+ * ```
+ */
+export declare class ComponentBuilder {
+    private config;
+    private options;
+    private constructor();
+    /**
+     * Create an atom builder
+     */
+    static atom(name: string): ComponentBuilder;
+    /**
+     * Create a molecule builder
+     */
+    static molecule(name: string): ComponentBuilder;
+    /**
+     * Create an organism builder
+     */
+    static organism(name: string): ComponentBuilder;
+    /**
+     * Create a template builder
+     */
+    static template(name: string): ComponentBuilder;
+    /**
+     * Create a pattern builder
+     */
+    static pattern(name: string): ComponentBuilder;
+    /**
+     * Create a layout builder
+     */
+    static layout(name: string): ComponentBuilder;
+    /**
+     * Add variants
+     */
+    withVariants(variants: string[]): this;
+    /**
+     * Add sizes
+     */
+    withSizes(sizes: string[]): this;
+    /**
+     * Add states
+     */
+    withStates(states: string[]): this;
+    /**
+     * Add tokens
+     */
+    withTokens(tokens: ComponentBuilderConfig['tokens']): this;
+    /**
+     * Add accessibility features
+     */
+    withAccessibility(accessibility: ComponentBuilderConfig['accessibility']): this;
+    /**
+     * Add props
+     */
+    withProps(props: Record<string, unknown>): this;
+    /**
+     * Enable children
+     */
+    withChildren(children?: boolean): this;
+    /**
+     * Set factory options
+     */
+    withOptions(options: ComponentFactoryOptions): this;
+    /**
+     * Build the component
+     */
+    build(): BuiltComponent;
+}

package/dist/ui/builders/ComponentFactory.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Component Factory
+ *
+ * Factory for creating components using various design patterns.
+ */
+import type { ComponentBuilderConfig, BuiltComponent, ComponentFactoryOptions } from './types';
+/**
+ * Component Factory
+ *
+ * Main factory for creating components based on category and configuration.
+ */
+export declare class ComponentFactory {
+    /**
+     * Create a component
+     */
+    static create(config: ComponentBuilderConfig, options?: ComponentFactoryOptions): BuiltComponent;
+    /**
+     * Get appropriate builder for category
+     */
+    private static getBuilder;
+    /**
+     * Validate component configuration
+     */
+    static validate(config: ComponentBuilderConfig): {
+        valid: boolean;
+        errors: string[];
+    };
+}

package/dist/ui/builders/ComponentRegistry.d.ts

@@ -0,0 +1,57 @@
+/**
+ * Component Registry
+ *
+ * Registry for managing component configurations and metadata.
+ */
+import type { ComponentBuilderConfig, BuiltComponent } from './types';
+/**
+ * Component Metadata
+ */
+export interface ComponentMetadata {
+    config: ComponentBuilderConfig;
+    builtComponent?: BuiltComponent;
+    createdAt: Date;
+    updatedAt: Date;
+    tags?: string[];
+    description?: string;
+}
+/**
+ * Component Registry
+ *
+ * Central registry for component configurations.
+ */
+export declare class ComponentRegistry {
+    private static registry;
+    /**
+     * Register a component
+     */
+    static register(name: string, config: ComponentBuilderConfig, metadata?: Partial<ComponentMetadata>): void;
+    /**
+     * Get component metadata
+     */
+    static get(name: string): ComponentMetadata | undefined;
+    /**
+     * Check if component exists
+     */
+    static has(name: string): boolean;
+    /**
+     * Get all registered components
+     */
+    static getAll(): ComponentMetadata[];
+    /**
+     * Get components by category
+     */
+    static getByCategory(category: ComponentBuilderConfig['category']): ComponentMetadata[];
+    /**
+     * Remove component
+     */
+    static remove(name: string): boolean;
+    /**
+     * Clear registry
+     */
+    static clear(): void;
+    /**
+     * Update component
+     */
+    static update(name: string, updates: Partial<ComponentMetadata>): boolean;
+}

package/dist/ui/builders/StorybookIntegration.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Storybook Integration for Component Builder
+ *
+ * Utilities for generating stories from Component Builder configurations.
+ */
+import type { ComponentBuilderConfig } from './types';
+/**
+ * Generate Storybook story code from component configuration
+ */
+export declare function generateStoryFromConfig(config: ComponentBuilderConfig): string;
+/**
+ * Generate story file path
+ */
+export declare function getStoryFilePath(config: ComponentBuilderConfig): string;

package/dist/ui/builders/builders/AtomBuilder.d.ts

@@ -0,0 +1,53 @@
+/**
+ * Atom Builder
+ *
+ * Builder for creating atom components.
+ */
+import type { ComponentBuilderConfig, BuiltComponent, ComponentFactoryOptions } from '../types';
+/**
+ * Atom Builder
+ *
+ * Builder for creating atom components following design system patterns.
+ */
+export declare class AtomBuilder {
+    /**
+     * Build an atom component
+     */
+    static build(config: ComponentBuilderConfig, options?: ComponentFactoryOptions): BuiltComponent;
+    /**
+     * Generate component code
+     */
+    private static generateComponentCode;
+    /**
+     * Generate props interface
+     */
+    private static generatePropsInterface;
+    /**
+     * Generate variants
+     */
+    private static generateVariants;
+    /**
+     * Generate sizes
+     */
+    private static generateSizes;
+    /**
+     * Generate accessibility attributes
+     */
+    private static generateAccessibility;
+    /**
+     * Generate props list
+     */
+    private static generatePropsList;
+    /**
+     * Generate TypeScript types
+     */
+    private static generateTypes;
+    /**
+     * Generate Storybook stories
+     */
+    private static generateStories;
+    /**
+     * Generate tests
+     */
+    private static generateTests;
+}

package/dist/ui/builders/builders/MoleculeBuilder.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Molecule Builder
+ *
+ * Builder for creating molecule components.
+ */
+import type { ComponentBuilderConfig, BuiltComponent, ComponentFactoryOptions } from '../types';
+/**
+ * Molecule Builder
+ *
+ * Builder for creating molecule components that combine atoms.
+ */
+export declare class MoleculeBuilder {
+    /**
+     * Build a molecule component
+     */
+    static build(config: ComponentBuilderConfig, options?: ComponentFactoryOptions): BuiltComponent;
+    /**
+     * Generate component code
+     */
+    private static generateComponentCode;
+    /**
+     * Generate Storybook stories
+     */
+    private static generateStories;
+    /**
+     * Generate TypeScript types
+     */
+    private static generateTypes;
+    /**
+     * Generate tests
+     */
+    private static generateTests;
+}

package/dist/ui/builders/builders/OrganismBuilder.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Organism Builder
+ *
+ * Builder for creating organism components.
+ */
+import type { ComponentBuilderConfig, BuiltComponent, ComponentFactoryOptions } from '../types';
+/**
+ * Organism Builder
+ *
+ * Builder for creating organism components that combine molecules and atoms.
+ */
+export declare class OrganismBuilder {
+    /**
+     * Build an organism component
+     */
+    static build(config: ComponentBuilderConfig, options?: ComponentFactoryOptions): BuiltComponent;
+    /**
+     * Generate component code
+     */
+    private static generateComponentCode;
+    /**
+     * Generate Storybook stories
+     */
+    private static generateStories;
+    /**
+     * Generate TypeScript types
+     */
+    private static generateTypes;
+    /**
+     * Generate tests
+     */
+    private static generateTests;
+}

package/dist/ui/builders/builders/TemplateBuilder.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Template Builder
+ *
+ * Builder for creating template components.
+ */
+import type { ComponentBuilderConfig, BuiltComponent, ComponentFactoryOptions } from '../types';
+/**
+ * Template Builder
+ *
+ * Builder for creating template components that combine organisms.
+ */
+export declare class TemplateBuilder {
+    /**
+     * Build a template component
+     */
+    static build(config: ComponentBuilderConfig, options?: ComponentFactoryOptions): BuiltComponent;
+    /**
+     * Generate component code
+     */
+    private static generateComponentCode;
+    /**
+     * Generate Storybook stories
+     */
+    private static generateStories;
+    /**
+     * Generate TypeScript types
+     */
+    private static generateTypes;
+    /**
+     * Generate tests
+     */
+    private static generateTests;
+}

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

@@ -0,0 +1,9 @@
+/**
+ * Component Builder System
+ *
+ * Main exports for the Component Builder system.
+ */
+export { ComponentFactory } from './ComponentFactory';
+export { ComponentBuilder } from './ComponentBuilder';
+export { ComponentRegistry } from './ComponentRegistry';
+export * from './types';

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

@@ -0,0 +1,59 @@
+/**
+ * Component Builder Types
+ *
+ * Type definitions for the Component Builder system.
+ */
+import type { ColorRole } from '../tokens/colors';
+import type { SpacingScale } from '../tokens/spacing';
+import type { FontSize, FontWeight, LineHeight } from '../tokens/typography';
+/**
+ * Component Category
+ */
+export type ComponentCategory = 'atom' | 'molecule' | 'organism' | 'template' | 'pattern' | 'layout';
+/**
+ * Component Builder Configuration
+ */
+export interface ComponentBuilderConfig {
+    name: string;
+    category: ComponentCategory;
+    variants?: string[];
+    sizes?: string[];
+    states?: string[];
+    tokens?: {
+        colors?: ColorRole[];
+        spacing?: SpacingScale[];
+        typography?: {
+            sizes?: FontSize[];
+            weights?: FontWeight[];
+            lineHeights?: LineHeight[];
+        };
+    };
+    accessibility?: {
+        ariaLabel?: boolean;
+        keyboardNavigation?: boolean;
+        focusManagement?: boolean;
+    };
+    props?: Record<string, unknown>;
+    children?: boolean;
+}
+/**
+ * Built Component
+ */
+export interface BuiltComponent {
+    name: string;
+    category: ComponentCategory;
+    code: string;
+    types: string;
+    stories?: string;
+    tests?: string;
+    config: ComponentBuilderConfig;
+}
+/**
+ * Component Factory Options
+ */
+export interface ComponentFactoryOptions {
+    includeStories?: boolean;
+    includeTests?: boolean;
+    includeTypes?: boolean;
+    template?: 'default' | 'factory' | 'builder' | 'strategy';
+}

package/dist/ui/devtools/ContextDevTools.d.ts

@@ -0,0 +1,33 @@
+/**
+ * ContextDevTools Props
+ */
+export interface ContextDevToolsProps {
+    /**
+     * Whether devtools are enabled
+     */
+    enabled?: boolean;
+    /**
+     * Position of devtools panel
+     */
+    position?: 'top' | 'bottom' | 'left' | 'right';
+    /**
+     * Custom contexts to track (optional)
+     */
+    contexts?: Array<{
+        name: string;
+        context: React.Context<unknown>;
+        selector?: (value: unknown) => unknown;
+    }>;
+}
+/**
+ * ContextDevTools Component
+ *
+ * DevTools panel for inspecting React contexts in Storybook.
+ * Provides visualization of context hierarchy, values, and changes.
+ *
+ * @example
+ * ```tsx
+ * <ContextDevTools enabled={true} position="bottom" />
+ * ```
+ */
+export declare function ContextDevTools({ enabled, position, contexts, }: ContextDevToolsProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/ui/extensions/ExtensionRegistry.d.ts

@@ -0,0 +1,42 @@
+/**
+ * Extension Registry
+ *
+ * Registry for managing design system extensions.
+ */
+import type { ExtensionDefinition, IExtensionRegistry } from './types';
+/**
+ * Extension Registry
+ *
+ * Manages registration and retrieval of design system extensions.
+ */
+export declare class ExtensionRegistry implements IExtensionRegistry {
+    private static registry;
+    /**
+     * Register an extension
+     */
+    static register(extension: ExtensionDefinition): void;
+    /**
+     * Unregister an extension
+     */
+    static unregister(id: string): boolean;
+    /**
+     * Get an extension
+     */
+    static get(id: string): ExtensionDefinition | undefined;
+    /**
+     * Get all registered extensions
+     */
+    static getAll(): ExtensionDefinition[];
+    /**
+     * Check if an extension is registered
+     */
+    static has(id: string): boolean;
+    /**
+     * Get all extension IDs
+     */
+    static getIds(): string[];
+    /**
+     * Clear all extensions
+     */
+    static clear(): void;
+}

package/dist/ui/extensions/flow/atoms/FlowHandle.d.ts

@@ -0,0 +1,28 @@
+import { type HandleProps } from '@xyflow/react';
+/**
+ * FlowHandle Component
+ *
+ * Wrapper for React Flow's Handle component with design system tokens.
+ * Enhanced with support for multiple handles per position, visual variants,
+ * conditional rendering, and improved accessibility.
+ *
+ * Single Responsibility: Render handle with design system styling and enhanced features.
+ */
+export interface FlowHandleProps extends HandleProps {
+    variant?: 'default' | 'primary' | 'success' | 'warning' | 'error';
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Custom style override
+     */
+    customStyle?: React.CSSProperties;
+    /**
+     * ARIA label for accessibility
+     */
+    ariaLabel?: string;
+    /**
+     * Whether to show the handle conditionally based on node data
+     * If provided, handle will only render if this function returns true
+     */
+    shouldRender?: (nodeData: unknown) => boolean;
+}
+export declare function FlowHandle({ variant, size, className, customStyle, ariaLabel, shouldRender, id, ...props }: FlowHandleProps): import("react/jsx-runtime").JSX.Element | null;