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

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

@@ -49,3 +49,4 @@ export interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement
  */
 declare const Button: import("react").NamedExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
 export default Button;
+export { Button };

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

@@ -5,6 +5,11 @@ export interface TooltipProps extends HTMLAttributes<HTMLDivElement> {
     position?: "top" | "bottom" | "left" | "right";
     delay?: number;
     'aria-label'?: string;
+    /**
+     * When true, the tooltip wrapper won't interfere with absolute positioning of children.
+     * The wrapper will use `position: static` instead of `position: relative`.
+     */
+    preservePositioning?: boolean;
 }
 /**
  * Tooltip Component
@@ -19,4 +24,4 @@ export interface TooltipProps extends HTMLAttributes<HTMLDivElement> {
  * </Tooltip>
  * ```
  */
-export default function Tooltip({ content, children, position, delay, className, 'aria-label': _ariaLabel, ...props }: TooltipProps): import("react/jsx-runtime").JSX.Element;
+export default function Tooltip({ content, children, position, delay, className, 'aria-label': _ariaLabel, preservePositioning, ...props }: TooltipProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/extensions/flow/components/AddNodeButton.d.ts

@@ -1,7 +1 @@
-/**
- * Add Node Button Component
- *
- * Simple button to add new nodes to the canvas.
- * Opens a dropdown menu to select node type (without previews).
- */
 export declare function AddNodeButton(): import("react/jsx-runtime").JSX.Element;

package/dist/ui/extensions/flow/components/DatasetSelector.d.ts

@@ -1,6 +1 @@
-/**
- * Dataset Selector Component
- *
- * Component for selecting and loading flow templates/datasets.
- */
 export declare function DatasetSelector(): import("react/jsx-runtime").JSX.Element;

package/dist/ui/extensions/flow/components/ExportPanel.d.ts

@@ -1,8 +1,3 @@
-/**
- * Export Panel Component
- *
- * Panel for exporting flows in multiple formats
- */
 export interface ExportPanelProps {
     /**
      * Custom className

package/dist/ui/extensions/flow/components/FloatingEdgesCheckbox.d.ts

@@ -1,6 +1 @@
-/**
- * Floating Edges Checkbox Component
- *
- * Checkbox to enable/disable floating edges.
- */
 export declare function FloatingEdgesCheckbox(): import("react/jsx-runtime").JSX.Element;

package/dist/ui/extensions/flow/components/HandlePositionsDropdown.d.ts

@@ -1,7 +1,2 @@
-/**
- * Handle Positions Dropdown Component
- *
- * Dropdown to select default handle positions for nodes.
- */
 export type HandlePosition = 'top-bottom' | 'left-right' | 'all';
 export declare function HandlePositionsDropdown(): import("react/jsx-runtime").JSX.Element;

package/dist/ui/extensions/flow/components/NodesEdgesTabContent.d.ts

@@ -1,11 +1,3 @@
-/**
- * Nodes & Edges Tab Content Component
- *
- * Organizes content in exact sections matching the reference:
- * - OPTIONS: Handle Positions, Floating Edges
- * - NODES & EDGES: Dataset selector, Add new node button
- * - NODE INSPECTOR: Editor for selected node/edge or empty message
- */
 /**
  * Main Nodes & Edges Tab Content Component
  */

package/dist/ui/extensions/flow/components/PlaygroundCanvas.d.ts

@@ -1,9 +1,3 @@
-/**
- * Playground Canvas Component
- *
- * Wrapper for the main React Flow canvas.
- * Manages flow state and integrates with PlaygroundContext.
- */
 /**
  * Main PlaygroundCanvas component
  * Wraps the inner component with FlowProvider

package/dist/ui/extensions/flow/components/PlaygroundCanvasFooter.d.ts

@@ -1,7 +1 @@
-/**
- * Playground Canvas Footer Component
- *
- * Footer with tabs for Node Inspector and Viewport Logger.
- * Positioned at bottom-right of the canvas.
- */
 export declare function PlaygroundCanvasFooter(): import("react/jsx-runtime").JSX.Element;

package/dist/ui/extensions/flow/components/PlaygroundDevTools.d.ts

@@ -1,8 +1,3 @@
-/**
- * Playground Dev Tools Component
- *
- * Development tools panel with debug, state inspector, profiler, and logger.
- */
 export interface PlaygroundDevToolsProps {
     enabled?: boolean;
     position?: 'bottom' | 'top' | 'left' | 'right';

package/dist/ui/extensions/flow/components/PlaygroundHeader.d.ts

@@ -1,7 +1 @@
-/**
- * Playground Header Component
- *
- * Professional header for the playground with Apply Changes functionality.
- * Uses design system tokens for consistent styling.
- */
 export declare function PlaygroundHeader(): import("react/jsx-runtime").JSX.Element;

package/dist/ui/extensions/flow/components/PlaygroundLayout.d.ts

@@ -1,12 +1,3 @@
-/**
- * Playground Layout Component
- *
- * Main layout component for the playground with split-view:
- * - Left: Tabs and Content
- * - Right: Canvas
- *
- * Uses design system tokens for consistent styling.
- */
 export interface PlaygroundLayoutProps {
     initialState?: Partial<import('../context/PlaygroundContext').PlaygroundState>;
 }

package/dist/ui/extensions/flow/components/PlaygroundSearch.d.ts

@@ -1,8 +1,3 @@
-/**
- * Enhanced Playground Search Component
- *
- * Advanced search functionality with filters, preview, and navigation.
- */
 export interface PlaygroundSearchProps {
     onResultSelect?: (result: {
         type: 'node' | 'edge';

package/dist/ui/extensions/flow/components/PlaygroundSidebar.d.ts

@@ -1,13 +1,3 @@
-/**
- * Playground Sidebar Component
- *
- * Professional sidebar for the playground with tabs and content.
- * Enhanced with search, collapsible sections, and better organization.
- * Uses design system tokens for consistent styling.
- *
- * Refactored to use SideNavbar component from the design system.
- * Now uses all advanced features: collapsible, resizable, persistent, responsive.
- */
 import { type PlaygroundTabId } from './PlaygroundTabs';
 export interface PlaygroundSidebarProps {
     activeTab: PlaygroundTabId;

package/dist/ui/extensions/flow/context/index.d.ts

@@ -4,9 +4,9 @@
  * Context implementations for Flow components.
  */
 export { FlowContext, useFlowContext, useFlowContextOptional } from '../organisms/FlowContext';
-export { FlowStyleContext, FlowStyleProvider, useFlowStyleContext, useFlowStyleContextOptional } from './FlowStyleContext';
-export { FlowEventContext, FlowEventProvider, useFlowEventContext } from './FlowEventContext';
-export { FlowPerformanceContext, FlowPerformanceProvider, useFlowPerformanceContext } from './FlowPerformanceContext';
+export { FlowStyleProvider, useFlowStyleContext, useFlowStyleContextOptional } from './FlowStyleContext';
+export { FlowEventProvider, useFlowEventContext } from './FlowEventContext';
+export { FlowPerformanceProvider, useFlowPerformanceContext } from './FlowPerformanceContext';
 export type { FlowStyleContextValue, FlowStyleProviderProps } from './FlowStyleContext';
 export type { FlowEventContextValue, FlowEventProviderProps, FlowEvent, FlowEventType, FlowEventHandler } from './FlowEventContext';
 export type { FlowPerformanceContextValue, FlowPerformanceProviderProps, PerformanceMetrics, PerformanceOptions } from './FlowPerformanceContext';

package/dist/ui/extensions/flow/hooks/useAutoLayout.d.ts

@@ -1,8 +1,3 @@
-/**
- * useAutoLayout Hook
- *
- * Hook for applying automatic layouts to flows.
- */
 import type { Node, Edge } from '@xyflow/react';
 import type { LayoutStrategyName, LayoutOptions, LayoutResult } from '../organisms/FlowTypes';
 /**

package/dist/ui/extensions/flow/hooks/useFlowActions.d.ts

@@ -1,8 +1,3 @@
-/**
- * useFlowActions Hook
- *
- * Hook that uses React Flow's useReactFlow to provide actions.
- */
 import type { FitViewOptions, ReactFlowJsonObject } from '@xyflow/react';
 /**
  * Hook for flow actions

package/dist/ui/extensions/flow/hooks/useFlowEvents.d.ts

@@ -1,8 +1,3 @@
-/**
- * useFlowEvents Hook
- *
- * Hook for subscribing to and emitting Flow events.
- */
 import type { FlowEventType, FlowEvent, FlowEventHandler } from '../context/FlowEventContext';
 /**
  * Flow Events Hook Return

package/dist/ui/extensions/flow/hooks/useFlowPerformance.d.ts

@@ -1,8 +1,3 @@
-/**
- * useFlowPerformance Hook
- *
- * Hook for monitoring and optimizing Flow performance.
- */
 import type { PerformanceMetrics, PerformanceOptions } from '../context/FlowPerformanceContext';
 /**
  * Flow Performance Hook Return

package/dist/ui/extensions/flow/hooks/useFlowSelection.d.ts

@@ -1,8 +1,3 @@
-/**
- * useFlowSelection Hook
- *
- * Hook for advanced selection management.
- */
 import type { Node, Edge } from '@xyflow/react';
 import type { FlowNodeData, FlowEdgeData } from '../organisms/FlowTypes';
 /**

package/dist/ui/extensions/flow/hooks/useFlowState.d.ts

@@ -1,9 +1,3 @@
-/**
- * useFlowState Hook
- *
- * Hook that uses React Flow's native hooks (useNodesState, useEdgesState)
- * and adds design system functionality.
- */
 import type { Node, Edge } from '@xyflow/react';
 import type { FlowNodeData, FlowEdgeData } from '../organisms/FlowTypes';
 /**

package/dist/ui/extensions/flow/hooks/useFlowStyles.d.ts

@@ -1,8 +1,3 @@
-/**
- * useFlowStyles Hook
- *
- * Hook for accessing and managing Flow CSS variables and theming.
- */
 import type { FlowThemeVariables, ThemeMode } from '../styles/flow-theme';
 /**
  * Flow Styles Hook Return

package/dist/ui/extensions/flow/hooks/useFlowUtils.d.ts

@@ -1,8 +1,3 @@
-/**
- * useFlowUtils Hook
- *
- * Hook for Flow utility functions (geometry, helpers, etc.).
- */
 import type { Node, Edge, XYPosition, Position, InternalNode } from '@xyflow/react';
 /**
  * Flow Utils Hook Return

package/dist/ui/extensions/flow/hooks/useFlowValidation.d.ts

@@ -1,8 +1,3 @@
-/**
- * useFlowValidation Hook
- *
- * Hook for validating flow using validation rules.
- */
 import type { ValidationResult } from '../organisms/FlowTypes';
 /**
  * Hook for flow validation

package/dist/ui/extensions/flow/hooks/useFlowViewport.d.ts

@@ -1,8 +1,3 @@
-/**
- * useFlowViewport Hook
- *
- * Hook for viewport management (zoom, pan, fit view).
- */
 import type { XYPosition, FitViewOptions } from '@xyflow/react';
 /**
  * Flow Viewport Hook Return

package/dist/ui/extensions/flow/hooks/useFlowVirtualization.d.ts

@@ -1,8 +1,3 @@
-/**
- * useFlowVirtualization Hook
- *
- * Hook for viewport-based rendering in very large flows (>1000 nodes).
- */
 import type { Node, Edge } from '@xyflow/react';
 /**
  * Hook for flow virtualization

package/dist/ui/extensions/flow/hooks/useKeyboardShortcuts.d.ts

@@ -1,8 +1,3 @@
-/**
- * Keyboard Shortcuts Hook
- *
- * Hook for managing keyboard shortcuts in the playground
- */
 export interface KeyboardShortcut {
     key: string;
     ctrl?: boolean;

package/dist/ui/extensions/flow/hooks/useNodeSelection.d.ts

@@ -1,8 +1,3 @@
-/**
- * useNodeSelection Hook
- *
- * Hook for managing node selection using React Flow's useOnSelectionChange.
- */
 import type { Node, Edge } from '@xyflow/react';
 /**
  * Hook for node selection

package/dist/ui/extensions/flow/hooks/usePlaygroundHistory.d.ts

@@ -1,8 +1,3 @@
-/**
- * Playground History Hook
- *
- * Hook for managing undo/redo history in the playground
- */
 import type { Node, Edge } from '@xyflow/react';
 import type { FlowNodeData, FlowEdgeData } from '../organisms/FlowTypes';
 export interface HistoryState {

package/dist/ui/extensions/flow/hooks/usePlaygroundKeyboardNavigation.d.ts

@@ -1,8 +1,3 @@
-/**
- * Playground Keyboard Navigation Hook
- *
- * Enhanced keyboard navigation for the playground with focus management.
- */
 export interface PlaygroundKeyboardNavigationOptions {
     enabled?: boolean;
     onNodeDelete?: (nodeId: string) => void;

package/dist/ui/extensions/flow/index.d.ts

@@ -45,6 +45,6 @@ export { NodeFactory } from './utils/nodeFactory';
 export { EdgeFactory } from './utils/edgeFactory';
 export { FlowValidator } from './utils/validation';
 export { LayoutEngine, layoutEngine, DagreLayoutStrategy, ELKLayoutStrategy, ForceDirectedLayoutStrategy } from './utils/layoutEngine';
-export * from './utils/cssUtils';
+export { generateCSSVariables, applyFlowCSSVariables, getCSSVariable, setCSSVariable, tokenToCSSVariable } from './utils/cssUtils';
 export * from './utils/geometryUtils';
 export * from './utils/performanceUtils';

package/dist/ui/extensions/flow/utils/cssUtils.d.ts

@@ -11,7 +11,7 @@ export declare function generateCSSVariables(theme: FlowThemeVariables): Record<
 /**
  * Apply CSS variables to an element
  */
-export declare function applyCSSVariables(element: HTMLElement | null, variables: Record<string, string>): void;
+export declare function applyFlowCSSVariables(element: HTMLElement | null, variables: Record<string, string>): void;
 /**
  * Get CSS variable value
  */

package/dist/ui/index.d.ts

@@ -12,9 +12,6 @@ export * from "./tokens/themes/dark";
 export * from "./providers";
 export * from "./themes";
 export * from "./extensions";
-export * from "./builders";
-export * from "./playgrounds";
-export * from "./tools";
 export { getSpacingClass, getSpacing } from "./tokens/spacing";
 export { getTypographyClasses, getTypography } from "./tokens/typography";
 export { getColorClass, getColor } from "./tokens/colors";
@@ -23,3 +20,4 @@ export { getAnimationClass, getAnimation, getTransitionClass } from "./tokens/an
 export { getZIndexClass, getZIndex } from "./tokens/z-index";
 export { getOpacityClass, getOpacity } from "./tokens/opacity";
 export { getGradientClass, getGradient } from "./tokens/gradients";
+export { cn } from "./utils";

package/dist/ui/molecules/Header/Header.d.ts

@@ -0,0 +1,44 @@
+/**
+ * Header Component
+ *
+ * Horizontal header component with logo, navigation, and actions slots.
+ * Uses compound components pattern for maximum flexibility.
+ *
+ * @see EPIC-002: Header Component (Molecule)
+ * @see RFC-003: Header Composition Pattern (APPROVED)
+ * @see ADR-002: Header + SideNavbar Compatibility (ACCEPTED)
+ */
+import { HeaderLogo } from './components/HeaderLogo';
+import { HeaderNavigation } from './components/HeaderNavigation';
+import { HeaderActions } from './components/HeaderActions';
+import { HeaderHamburger } from './components/HeaderHamburger';
+import { HeaderMobileMenu } from './components/HeaderMobileMenu';
+import type { HeaderProps } from './types';
+/**
+ * Header Component
+ *
+ * Horizontal header with compound components pattern.
+ *
+ * @example
+ * ```tsx
+ * <Header>
+ *   <Header.Logo href="/">MyApp</Header.Logo>
+ *   <Header.Navigation>
+ *     <NavLink href="/home">Home</NavLink>
+ *     <NavLink href="/about">About</NavLink>
+ *   </Header.Navigation>
+ *   <Header.Actions>
+ *     <Button>Sign In</Button>
+ *   </Header.Actions>
+ * </Header>
+ * ```
+ */
+export declare function Header({ children, variant, sticky, maxWidth, bare, className, ...props }: HeaderProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Header {
+    var Logo: typeof HeaderLogo;
+    var Navigation: typeof HeaderNavigation;
+    var Actions: typeof HeaderActions;
+    var Hamburger: typeof HeaderHamburger;
+    var MobileMenu: typeof HeaderMobileMenu;
+}
+export default Header;

package/dist/ui/molecules/Header/Header.stories.d.ts

@@ -0,0 +1,45 @@
+/**
+ * Header Stories
+ *
+ * Storybook stories for the Header component.
+ */
+import type { Meta, StoryObj } from '@storybook/react';
+import { Header } from './Header';
+declare const meta: Meta<typeof Header>;
+export default meta;
+type Story = StoryObj<typeof Header>;
+/**
+ * Default Header
+ */
+export declare const Default: Story;
+/**
+ * Header with Logo and Navigation
+ */
+export declare const WithNavigation: Story;
+/**
+ * Header with Logo and Actions
+ */
+export declare const WithActions: Story;
+/**
+ * Complete Header
+ */
+export declare const Complete: Story;
+/**
+ * Variants
+ */
+export declare const Variants: Story;
+/**
+ * Sticky Header
+ */
+export declare const Sticky: Story;
+/**
+ * With Mobile Menu
+ */
+export declare const WithMobileMenu: Story;
+/**
+ * With DashboardLayout
+ *
+ * Example of Header used with DashboardLayout.
+ * Uses `bare` prop to avoid duplicate header/Container wrappers.
+ */
+export declare const WithDashboardLayout: Story;

package/dist/ui/molecules/Header/components/HeaderActions.d.ts

@@ -0,0 +1,33 @@
+/**
+ * HeaderActions Component
+ *
+ * Actions slot component for Header (typically buttons, user menu, etc.).
+ *
+ * @see EPIC-002: Header Component (Molecule)
+ * @see RFC-003: Header Composition Pattern (APPROVED)
+ */
+import { type ReactNode } from 'react';
+export interface HeaderActionsProps {
+    /**
+     * Actions content (typically Button components)
+     */
+    children: ReactNode;
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+}
+/**
+ * HeaderActions Component
+ *
+ * Actions slot for Header. Typically contains Button components or user menu.
+ *
+ * @example
+ * ```tsx
+ * <Header.Actions>
+ *   <Button variant="outline">Sign In</Button>
+ *   <Button variant="primary">Sign Up</Button>
+ * </Header.Actions>
+ * ```
+ */
+export declare function HeaderActions({ children, className, }: HeaderActionsProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/molecules/Header/components/HeaderHamburger.d.ts

@@ -0,0 +1,48 @@
+/**
+ * HeaderHamburger Component
+ *
+ * Hamburger button for toggling mobile menu.
+ *
+ * @see EPIC-002: Header Component (Molecule)
+ * @see TASK-027: Hamburger Button
+ */
+import React from 'react';
+export interface HeaderHamburgerProps {
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+    /**
+     * Custom icon component
+     */
+    icon?: React.ReactNode;
+    /**
+     * Custom close icon component
+     */
+    closeIcon?: React.ReactNode;
+    /**
+     * Button variant
+     * @default 'ghost'
+     */
+    variant?: 'ghost' | 'outline' | 'default';
+    /**
+     * Button size
+     * @default 'md'
+     */
+    size?: 'sm' | 'md' | 'lg';
+}
+/**
+ * HeaderHamburger Component
+ *
+ * Hamburger button that toggles the mobile menu.
+ * Only visible on mobile devices.
+ *
+ * @example
+ * ```tsx
+ * <Header>
+ *   <Header.Hamburger />
+ *   <Header.Logo href="/">MyApp</Header.Logo>
+ * </Header>
+ * ```
+ */
+export declare function HeaderHamburger({ className, icon, closeIcon, variant, size, }: HeaderHamburgerProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/molecules/Header/components/HeaderLogo.d.ts

@@ -0,0 +1,34 @@
+/**
+ * HeaderLogo Component
+ *
+ * Logo slot component for Header.
+ *
+ * @see EPIC-002: Header Component (Molecule)
+ * @see RFC-003: Header Composition Pattern (APPROVED)
+ */
+import { type ReactNode } from 'react';
+import type { NavLinkProps } from '../../../atoms/NavLink';
+export interface HeaderLogoProps extends Omit<NavLinkProps, 'children'> {
+    /**
+     * Logo content (text, image, or component)
+     */
+    children: ReactNode;
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+}
+/**
+ * HeaderLogo Component
+ *
+ * Logo slot for Header. Renders as a NavLink by default.
+ *
+ * @example
+ * ```tsx
+ * <Header.Logo href="/">MyApp</Header.Logo>
+ * <Header.Logo href="/">
+ *   <img src="/logo.png" alt="Logo" />
+ * </Header.Logo>
+ * ```
+ */
+export declare function HeaderLogo({ children, className, ...props }: HeaderLogoProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/molecules/Header/components/HeaderMobileMenu.d.ts

@@ -0,0 +1,36 @@
+/**
+ * HeaderMobileMenu Component
+ *
+ * Mobile menu drawer for Header navigation.
+ *
+ * @see EPIC-002: Header Component (Molecule)
+ * @see TASK-028: Mobile Menu (Drawer)
+ */
+import React from 'react';
+export interface HeaderMobileMenuProps {
+    /**
+     * Menu content (typically navigation links)
+     */
+    children: React.ReactNode;
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+}
+/**
+ * HeaderMobileMenu Component
+ *
+ * Mobile menu drawer that slides in from the side.
+ * Uses Drawer component from design system.
+ *
+ * @example
+ * ```tsx
+ * <Header>
+ *   <Header.MobileMenu>
+ *     <NavLink href="/home">Home</NavLink>
+ *     <NavLink href="/about">About</NavLink>
+ *   </Header.MobileMenu>
+ * </Header>
+ * ```
+ */
+export declare function HeaderMobileMenu({ children, className, }: HeaderMobileMenuProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/molecules/Header/components/HeaderNavigation.d.ts

@@ -0,0 +1,33 @@
+/**
+ * HeaderNavigation Component
+ *
+ * Navigation slot component for Header.
+ *
+ * @see EPIC-002: Header Component (Molecule)
+ * @see RFC-003: Header Composition Pattern (APPROVED)
+ */
+import { type ReactNode } from 'react';
+export interface HeaderNavigationProps {
+    /**
+     * Navigation content (typically NavLink components)
+     */
+    children: ReactNode;
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+}
+/**
+ * HeaderNavigation Component
+ *
+ * Navigation slot for Header. Typically contains NavLink components.
+ *
+ * @example
+ * ```tsx
+ * <Header.Navigation>
+ *   <NavLink href="/home">Home</NavLink>
+ *   <NavLink href="/about">About</NavLink>
+ * </Header.Navigation>
+ * ```
+ */
+export declare function HeaderNavigation({ children, className, }: HeaderNavigationProps): import("react/jsx-runtime").JSX.Element;