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

package/dist/ui/extensions/flow/molecules/CustomNode.d.ts

@@ -0,0 +1,88 @@
+import React from 'react';
+import { Position, type NodeProps, type Connection, type Edge } from '@xyflow/react';
+import type { FlowNodeData } from '../organisms/FlowTypes';
+/**
+ * CustomNode Component
+ *
+ * Enhanced custom node component that follows the design system.
+ * Supports dynamic handles with custom styles, conditional rendering,
+ * content slots, and improved flexibility.
+ *
+ * Composes atoms (FlowNodeWrapper, FlowHandle) into a reusable node.
+ * Uses React.memo with granular comparison for performance optimization.
+ *
+ * @example
+ * ```tsx
+ * <CustomNode
+ *   data={{
+ *     label: 'My Node',
+ *     sourceHandles: [
+ *       { id: 'a', position: Position.Right, style: { top: 10 } },
+ *       { id: 'b', position: Position.Right, style: { bottom: 10, top: 'auto' } }
+ *     ],
+ *     customContent: <div>Custom content</div>
+ *   }}
+ * />
+ * ```
+ */
+export interface CustomNodeData extends FlowNodeData {
+    /**
+     * Custom source handles configuration with enhanced options
+     */
+    sourceHandles?: Array<{
+        id?: string;
+        position: Position;
+        variant?: FlowNodeData['variant'];
+        style?: React.CSSProperties;
+        isConnectable?: boolean;
+        onConnect?: (params: Connection | Edge) => void;
+        onMouseDown?: (event: React.MouseEvent) => void;
+        ariaLabel?: string;
+    }>;
+    /**
+     * Custom target handles configuration with enhanced options
+     */
+    targetHandles?: Array<{
+        id?: string;
+        position: Position;
+        variant?: FlowNodeData['variant'];
+        style?: React.CSSProperties;
+        isConnectable?: boolean;
+        onConnect?: (params: Connection | Edge) => void;
+        ariaLabel?: string;
+    }>;
+    /**
+     * Whether to show default handles if custom handles are not provided
+     */
+    showDefaultHandles?: boolean;
+    /**
+     * Custom content slot - overrides default content rendering
+     */
+    customContent?: React.ReactNode;
+    /**
+     * Custom style for the node wrapper
+     */
+    customStyle?: React.CSSProperties;
+    /**
+     * Custom className for the node wrapper
+     */
+    customClassName?: string;
+    /**
+     * Use FlowNodeContent for structured content rendering
+     */
+    useStructuredContent?: boolean;
+    /**
+     * Render props for header, body, footer
+     */
+    renderHeader?: (data: FlowNodeData) => React.ReactNode;
+    renderBody?: (data: FlowNodeData) => React.ReactNode;
+    renderFooter?: (data: FlowNodeData) => React.ReactNode;
+    /**
+     * Slots for header, body, footer
+     */
+    headerSlot?: React.ReactNode;
+    bodySlot?: React.ReactNode;
+    footerSlot?: React.ReactNode;
+}
+export type CustomNodeProps = NodeProps<CustomNodeData>;
+export declare const CustomNode: React.MemoExoticComponent<({ data, selected, isConnectable, ...nodeProps }: CustomNodeProps) => import("react/jsx-runtime").JSX.Element>;

package/dist/ui/extensions/flow/molecules/FloatingConnectionLine.d.ts

@@ -0,0 +1,11 @@
+import { type ConnectionLineComponentProps } from '@xyflow/react';
+/**
+ * FloatingConnectionLine Component
+ *
+ * Connection line component for floating edges that shows a preview
+ * of the edge being created. Uses the same intersection calculation
+ * as FloatingEdge for consistency.
+ *
+ * Based on the official React Flow FloatingConnectionLine example.
+ */
+export declare function FloatingConnectionLine({ toX, toY, fromPosition, toPosition, fromNode, }: ConnectionLineComponentProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/ui/extensions/flow/molecules/FloatingEdge.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { type EdgeProps } from '@xyflow/react';
+import type { FlowEdgeData } from '../organisms/FlowTypes';
+/**
+ * FloatingEdge Component
+ *
+ * Enhanced edge that dynamically adapts to node positions, useful for nodes that can move.
+ * Uses React Flow's store to get current node positions and calculates intersection points
+ * for better edge routing.
+ *
+ * Based on the official React Flow FloatingEdges example with improvements:
+ * - Better intersection point calculation
+ * - Support for animated edges
+ * - Better styling integration
+ * - Improved memoization
+ */
+export type FloatingEdgeProps = EdgeProps<FlowEdgeData>;
+export declare const FloatingEdge: React.MemoExoticComponent<({ id, source, target, style, data, selected, }: FloatingEdgeProps) => import("react/jsx-runtime").JSX.Element | null>;

package/dist/ui/extensions/flow/molecules/FlowNodeContent.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import type { ReactNode } from 'react';
+import type { FlowNodeData, NodeHeaderProps, NodeBodyProps, NodeFooterProps } from '../organisms/FlowTypes';
+/**
+ * FlowNodeContent Component
+ *
+ * Content wrapper for nodes with support for render props pattern.
+ * Single Responsibility: Structure node content with header, body, footer.
+ */
+export interface FlowNodeContentProps {
+    children?: ReactNode;
+    renderHeader?: (data: FlowNodeData) => ReactNode;
+    renderBody?: (data: FlowNodeData) => ReactNode;
+    renderFooter?: (data: FlowNodeData) => ReactNode;
+    HeaderComponent?: React.ComponentType<NodeHeaderProps>;
+    BodyComponent?: React.ComponentType<NodeBodyProps>;
+    FooterComponent?: React.ComponentType<NodeFooterProps>;
+    headerSlot?: ReactNode;
+    bodySlot?: ReactNode;
+    footerSlot?: ReactNode;
+}
+export declare function FlowNodeContent({ children, renderHeader, renderBody, renderFooter, HeaderComponent, BodyComponent, FooterComponent, headerSlot, bodySlot, footerSlot, }: FlowNodeContentProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/ui/extensions/flow/molecules/FlowNodeToolbar.d.ts

@@ -0,0 +1,71 @@
+import React from 'react';
+import { Position, type NodeToolbarProps as ReactFlowNodeToolbarProps } from '@xyflow/react';
+/**
+ * FlowNodeToolbar Component
+ *
+ * Enhanced wrapper for React Flow's NodeToolbar with design system components.
+ * Supports all positions (top, right, bottom, left), all alignments (start, center, end),
+ * conditional visibility, animations, and better integration with design system.
+ *
+ * Single Responsibility: Render toolbar with design system Button components and enhanced features.
+ *
+ * @example
+ * ```tsx
+ * <FlowNodeToolbar
+ *   position={Position.Top}
+ *   align="center"
+ *   visible={selected}
+ *   animation="fade"
+ *   actions={[
+ *     { label: 'Edit', onClick: () => {}, variant: 'primary' },
+ *     { label: 'Delete', onClick: () => {}, variant: 'error' }
+ *   ]}
+ * />
+ * ```
+ */
+export interface FlowNodeToolbarProps extends Omit<ReactFlowNodeToolbarProps, 'children' | 'position' | 'align'> {
+    /**
+     * Toolbar position relative to node
+     * Supports all Position enum values or string values
+     */
+    position?: Position | 'top' | 'right' | 'bottom' | 'left';
+    /**
+     * Toolbar alignment
+     * 'start' | 'center' | 'end'
+     */
+    align?: 'start' | 'center' | 'end';
+    /**
+     * Actions to display in toolbar
+     */
+    actions?: Array<{
+        label: string;
+        icon?: React.ReactNode;
+        onClick: () => void;
+        variant?: 'primary' | 'regular' | 'secondary' | 'error' | 'outline' | 'ghost';
+        disabled?: boolean;
+        tooltip?: string;
+    }>;
+    /**
+     * Whether toolbar is visible (defaults to true)
+     * Can be a boolean or a function that receives node data and returns boolean
+     */
+    visible?: boolean | ((nodeData: unknown) => boolean);
+    /**
+     * Animation variant
+     */
+    animation?: 'none' | 'fade' | 'slide' | 'scale' | 'slide-up' | 'slide-down' | 'slide-left' | 'slide-right';
+    /**
+     * Offset from node (in pixels)
+     */
+    offset?: number;
+    /**
+     * Custom className for toolbar container
+     */
+    className?: string;
+    /**
+     * Custom style for toolbar container
+     */
+    style?: React.CSSProperties;
+    children?: React.ReactNode;
+}
+export declare function FlowNodeToolbar({ actions, children, position, align, visible, animation, offset, className, style, ...props }: FlowNodeToolbarProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/ui/extensions/flow/molecules/InputNode.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { type NodeProps } from '@xyflow/react';
+import type { FlowNodeData } from '../organisms/FlowTypes';
+/**
+ * InputNode Component
+ *
+ * Specialized node for input nodes - only has source handles (outputs).
+ * Typically used as entry points in a flow.
+ */
+export type InputNodeProps = NodeProps<FlowNodeData>;
+export declare const InputNode: React.MemoExoticComponent<({ data, selected, }: InputNodeProps) => import("react/jsx-runtime").JSX.Element>;

package/dist/ui/extensions/flow/molecules/NoteNode.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { type NodeProps } from '@xyflow/react';
+import type { FlowNodeData } from '../organisms/FlowTypes';
+/**
+ * NoteNode Component
+ *
+ * Post-it style node for annotations and notes.
+ * Styled with a yellow/note-like appearance.
+ */
+export interface NoteNodeData extends FlowNodeData {
+    /**
+     * Note content
+     */
+    note?: string;
+}
+export type NoteNodeProps = NodeProps<NoteNodeData>;
+export declare const NoteNode: React.MemoExoticComponent<({ data, selected, }: NoteNodeProps) => import("react/jsx-runtime").JSX.Element>;

package/dist/ui/extensions/flow/molecules/OutputNode.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { type NodeProps } from '@xyflow/react';
+import type { FlowNodeData } from '../organisms/FlowTypes';
+/**
+ * OutputNode Component
+ *
+ * Specialized node for output nodes - only has target handles (inputs).
+ * Typically used as exit points in a flow.
+ */
+export type OutputNodeProps = NodeProps<FlowNodeData>;
+export declare const OutputNode: React.MemoExoticComponent<({ data, selected, }: OutputNodeProps) => import("react/jsx-runtime").JSX.Element>;

package/dist/ui/extensions/flow/molecules/ResizableNode.d.ts

@@ -0,0 +1,92 @@
+import React from 'react';
+import { type NodeProps } from '@xyflow/react';
+import type { FlowNodeData } from '../organisms/FlowTypes';
+/**
+ * ResizableNode Component
+ *
+ * Enhanced specialized node with resizing capability using NodeResizer/NodeResizeControl from @xyflow/react.
+ * Supports constraints, aspect ratio, custom resize handlers, and multiple variants.
+ *
+ * Variants:
+ * - 'default': Full resizer with all handles
+ * - 'vertical': Only vertical resizing (top/bottom)
+ * - 'horizontal': Only horizontal resizing (left/right)
+ * - 'bottom-right': Only bottom-right corner resizing
+ * - 'custom': Custom resizer with custom icon
+ *
+ * @example
+ * ```tsx
+ * <ResizableNode
+ *   data={{
+ *     label: 'Resizable',
+ *     variant: 'vertical',
+ *     minHeight: 50,
+ *     maxHeight: 200,
+ *     keepAspectRatio: true
+ *   }}
+ * />
+ * ```
+ */
+export interface ResizableNodeData extends FlowNodeData {
+    /**
+     * Minimum width
+     */
+    minWidth?: number;
+    /**
+     * Maximum width
+     */
+    maxWidth?: number;
+    /**
+     * Minimum height
+     */
+    minHeight?: number;
+    /**
+     * Maximum height
+     */
+    maxHeight?: number;
+    /**
+     * Keep aspect ratio while resizing
+     */
+    keepAspectRatio?: boolean;
+    /**
+     * Show resizer handles (defaults to selected state)
+     */
+    isVisible?: boolean;
+    /**
+     * Resizer variant: 'default' | 'vertical' | 'horizontal' | 'bottom-right' | 'custom'
+     */
+    resizerVariant?: 'default' | 'vertical' | 'horizontal' | 'bottom-right' | 'custom';
+    /**
+     * Custom resize icon component (for 'custom' variant)
+     */
+    customResizeIcon?: React.ReactNode;
+    /**
+     * Resizer color
+     */
+    resizerColor?: string;
+    /**
+     * Should resize callback - return false to prevent resize
+     */
+    shouldResize?: (params: {
+        width: number;
+        height: number;
+    }) => boolean;
+    /**
+     * Callback when resize starts
+     */
+    onResizeStart?: () => void;
+    /**
+     * Callback during resize
+     */
+    onResize?: (width: number, height: number) => void;
+    /**
+     * Callback when resize ends
+     */
+    onResizeEnd?: (width: number, height: number) => void;
+    /**
+     * Expand parent when resizing (for child nodes)
+     */
+    expandParent?: boolean;
+}
+export type ResizableNodeProps = NodeProps<ResizableNodeData>;
+export declare const ResizableNode: React.MemoExoticComponent<({ data, selected, width, height, }: ResizableNodeProps) => import("react/jsx-runtime").JSX.Element>;

package/dist/ui/extensions/flow/molecules/SelectorNode.d.ts

@@ -0,0 +1,40 @@
+import React, { ChangeEvent } from 'react';
+import { Position, type NodeProps } from '@xyflow/react';
+import type { FlowNodeData } from '../organisms/FlowTypes';
+/**
+ * SelectorNode Component
+ *
+ * Specialized node with interactive controls (e.g., color picker, selectors).
+ * Supports multiple source handles for different outputs.
+ */
+export interface SelectorNodeData extends FlowNodeData {
+    /**
+     * Callback for when selector value changes
+     */
+    onChange?: (event: ChangeEvent<HTMLInputElement | HTMLSelectElement>) => void;
+    /**
+     * Current value of the selector
+     */
+    value?: string;
+    /**
+     * Type of selector: 'color' | 'select' | 'text' | 'number'
+     */
+    selectorType?: 'color' | 'select' | 'text' | 'number';
+    /**
+     * Options for select type
+     */
+    options?: Array<{
+        label: string;
+        value: string;
+    }>;
+    /**
+     * Multiple source handles configuration
+     */
+    sourceHandles?: Array<{
+        id: string;
+        position: Position;
+        label?: string;
+    }>;
+}
+export type SelectorNodeProps = NodeProps<SelectorNodeData>;
+export declare const SelectorNode: React.MemoExoticComponent<({ data, selected, }: SelectorNodeProps) => import("react/jsx-runtime").JSX.Element>;

package/dist/ui/extensions/flow/molecules/TextNode.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import { type NodeProps } from '@xyflow/react';
+import type { FlowNodeData } from '../organisms/FlowTypes';
+/**
+ * TextNode Component
+ *
+ * Node focused on editable text content.
+ * Allows inline editing of text content.
+ */
+export interface TextNodeData extends FlowNodeData {
+    /**
+     * Text content (editable)
+     */
+    text?: string;
+    /**
+     * Placeholder text
+     */
+    placeholder?: string;
+    /**
+     * Callback when text changes
+     */
+    onTextChange?: (text: string) => void;
+}
+export type TextNodeProps = NodeProps<TextNodeData>;
+export declare const TextNode: React.MemoExoticComponent<({ data, selected, }: TextNodeProps) => import("react/jsx-runtime").JSX.Element>;

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

@@ -0,0 +1,24 @@
+/**
+ * Flow Molecules
+ *
+ * Composed components that combine atoms into reusable molecules.
+ */
+export { CustomNode, type CustomNodeProps } from './CustomNode';
+export type { CustomNodeData } from './CustomNode';
+export { CustomEdge, type CustomEdgeProps, type CustomEdgeData } from './CustomEdge';
+export { FloatingEdge, type FloatingEdgeProps } from './FloatingEdge';
+export { FloatingConnectionLine } from './FloatingConnectionLine';
+export { FlowNodeToolbar, type FlowNodeToolbarProps } from './FlowNodeToolbar';
+export { InputNode, type InputNodeProps } from './InputNode';
+export { OutputNode, type OutputNodeProps } from './OutputNode';
+export { SelectorNode, type SelectorNodeProps, type SelectorNodeData } from './SelectorNode';
+export { ResizableNode, type ResizableNodeProps, type ResizableNodeData } from './ResizableNode';
+export { FlowNodeContent, type FlowNodeContentProps } from './FlowNodeContent';
+export { CardNode, type CardNodeProps } from './CardNode';
+export type { CardNodeData } from './CardNode';
+export { ColorSelectorNode, type ColorSelectorNodeProps } from './ColorSelectorNode';
+export type { ColorSelectorNodeData } from './ColorSelectorNode';
+export { TextNode, type TextNodeProps } from './TextNode';
+export type { TextNodeData } from './TextNode';
+export { NoteNode, type NoteNodeProps } from './NoteNode';
+export type { NoteNodeData } from './NoteNode';

package/dist/ui/extensions/flow/organisms/FlowBackground.d.ts

@@ -0,0 +1,52 @@
+import React from 'react';
+import { type BackgroundProps } from '@xyflow/react';
+/**
+ * FlowBackground Component
+ *
+ * Wrapper for React Flow's Background component with design system integration.
+ * Uses CSS variables from React Flow (--xy-background-*) and integrates with
+ * FlowStyleContext for theming support.
+ *
+ * @example
+ * ```tsx
+ * <FlowBackground variant="dots" size={2} />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <FlowBackground
+ *   variant="lines"
+ *   bgColor="#ffffff"
+ *   patternColor="#e5e7eb"
+ * />
+ * ```
+ */
+export interface FlowBackgroundProps extends Omit<BackgroundProps, 'bgColor' | 'patternColor'> {
+    /**
+     * Background pattern variant
+     * @default 'dots'
+     */
+    variant?: 'dots' | 'lines' | 'cross';
+    /**
+     * Pattern size in pixels
+     * @default 2
+     */
+    size?: number;
+    /**
+     * Custom background color (overrides CSS variable)
+     */
+    bgColor?: string;
+    /**
+     * Custom pattern color (overrides CSS variable)
+     */
+    patternColor?: string;
+    /**
+     * Additional CSS class name
+     */
+    className?: string;
+    /**
+     * Inline styles
+     */
+    style?: React.CSSProperties;
+}
+export declare function FlowBackground({ variant, size, bgColor: customBgColor, patternColor: customPatternColor, className, style, ...props }: FlowBackgroundProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/extensions/flow/organisms/FlowCanvas.d.ts

@@ -0,0 +1,60 @@
+import React from 'react';
+import { type ReactFlowProps } from '@xyflow/react';
+import { FlowBackground } from './FlowBackground';
+import { FlowControls } from './FlowControls';
+import { FlowMinimap } from './FlowMinimap';
+import { FlowPanel } from './FlowPanel';
+/**
+ * FlowCanvasRoot Component
+ *
+ * Root component that wraps ReactFlow with design system integration.
+ * Single Responsibility: Render ReactFlow with design system configuration.
+ *
+ * Features:
+ * - Memoized nodeTypes and edgeTypes for performance
+ * - Theme support
+ * - Prop filtering to prevent React warnings
+ */
+export interface FlowCanvasRootProps extends Omit<ReactFlowProps, 'nodes' | 'edges' | 'nodeTypes' | 'edgeTypes'> {
+    nodeTypes?: ReactFlowProps['nodeTypes'];
+    edgeTypes?: ReactFlowProps['edgeTypes'];
+    className?: string;
+    /**
+     * Custom connection line component
+     */
+    connectionLineComponent?: ReactFlowProps['connectionLineComponent'];
+    /**
+     * Default edge options (applied to all new edges)
+     */
+    defaultEdgeOptions?: ReactFlowProps['defaultEdgeOptions'];
+    /**
+     * Node origin for better positioning (default: [0, 0])
+     */
+    nodeOrigin?: [number, number];
+    /**
+     * Enable snap to grid
+     */
+    snapToGrid?: boolean;
+    /**
+     * Grid size for snapping [x, y]
+     */
+    snapGrid?: [number, number];
+    /**
+     * Only render visible elements for performance (useful for large flows)
+     * @default true
+     */
+    onlyRenderVisibleElements?: boolean;
+}
+export declare const FlowCanvasRoot: React.NamedExoticComponent<FlowCanvasRootProps>;
+/**
+ * FlowCanvas Compound Component
+ *
+ * Provides a hierarchical structure of components following compound components pattern.
+ */
+export declare const FlowCanvas: {
+    Root: React.NamedExoticComponent<FlowCanvasRootProps>;
+    Background: typeof FlowBackground;
+    Controls: typeof FlowControls;
+    Minimap: typeof FlowMinimap;
+    Panel: typeof FlowPanel;
+};

package/dist/ui/extensions/flow/organisms/FlowContext.d.ts

@@ -0,0 +1,49 @@
+import type { Node, Edge, NodeChange, EdgeChange, Connection, ReactFlowInstance } from '@xyflow/react';
+import type { FlowNodeData, FlowEdgeData, ValidationRule, ConnectionRule, LayoutStrategyName, LayoutOptions } from './FlowTypes';
+/**
+ * Flow Context Value
+ *
+ * Context that complements ReactFlowProvider with design system specific
+ * functionality. This does NOT replace ReactFlowProvider.
+ */
+export interface FlowContextValue<TNodeData extends FlowNodeData = FlowNodeData, TEdgeData extends FlowEdgeData = FlowEdgeData> {
+    nodes: Node<TNodeData>[];
+    edges: Edge<TEdgeData>[];
+    reactFlowInstance: ReactFlowInstance | null;
+    setReactFlowInstance: (instance: ReactFlowInstance | null) => void;
+    setNodes: (nodes: Node<TNodeData>[] | ((prev: Node<TNodeData>[]) => Node<TNodeData>[])) => void;
+    setEdges: (edges: Edge<TEdgeData>[] | ((prev: Edge<TEdgeData>[]) => Edge<TEdgeData>[])) => void;
+    onNodesChange?: (changes: NodeChange[]) => void;
+    onEdgesChange?: (changes: EdgeChange[]) => void;
+    onConnect?: (connection: Connection) => void;
+    validationRules: ValidationRule[];
+    connectionRules: ConnectionRule[];
+    addValidationRule: (rule: ValidationRule) => void;
+    removeValidationRule: (id: string) => void;
+    addConnectionRule: (rule: ConnectionRule) => void;
+    removeConnectionRule: (id: string) => void;
+    layoutStrategy: LayoutStrategyName | null;
+    setLayoutStrategy: (strategy: LayoutStrategyName | null) => void;
+    layoutOptions: LayoutOptions;
+    setLayoutOptions: (options: LayoutOptions) => void;
+    theme: 'light' | 'dark';
+    setTheme: (theme: 'light' | 'dark') => void;
+    onNodeAdd?: (node: Node<TNodeData>) => void;
+    onNodeRemove?: (nodeId: string) => void;
+    onNodeUpdate?: (nodeId: string, data: Partial<TNodeData>) => void;
+    onEdgeAdd?: (edge: Edge<TEdgeData>) => void;
+    onEdgeRemove?: (edgeId: string) => void;
+    onEdgeUpdate?: (edgeId: string, data: Partial<TEdgeData>) => void;
+}
+declare const FlowContext: import("react").Context<FlowContextValue<FlowNodeData, FlowEdgeData> | undefined>;
+/**
+ * Hook to access Flow context
+ *
+ * @throws Error if used outside of FlowProvider
+ */
+export declare function useFlowContext<TNodeData extends FlowNodeData = FlowNodeData, TEdgeData extends FlowEdgeData = FlowEdgeData>(): FlowContextValue<TNodeData, TEdgeData>;
+/**
+ * Hook to access Flow context (optional, returns undefined if not in FlowProvider)
+ */
+export declare function useFlowContextOptional<TNodeData extends FlowNodeData = FlowNodeData, TEdgeData extends FlowEdgeData = FlowEdgeData>(): FlowContextValue<TNodeData, TEdgeData> | undefined;
+export { FlowContext };

package/dist/ui/extensions/flow/organisms/FlowControls.d.ts

@@ -0,0 +1,13 @@
+import { type ControlsProps } from '@xyflow/react';
+/**
+ * FlowControls Component
+ *
+ * Wrapper for React Flow's Controls component with design system tokens.
+ * Single Responsibility: Render controls with design system styling.
+ */
+export interface FlowControlsProps extends Omit<ControlsProps, 'className' | 'position'> {
+    className?: string;
+    variant?: 'default' | 'minimal' | 'full';
+    position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+}
+export declare function FlowControls({ className, variant, position, ...props }: FlowControlsProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/extensions/flow/organisms/FlowDragHandle.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+import type { HTMLAttributes } from 'react';
+/**
+ * FlowDragHandle Component
+ *
+ * Custom drag handle for nodes. Use this component to create a specific area
+ * within a node that can be used for dragging, while other parts remain non-draggable.
+ *
+ * Add the class "nodrag" to other elements to prevent dragging from those areas.
+ *
+ * Single Responsibility: Provide a draggable handle area within a node.
+ */
+export interface FlowDragHandleProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Icon or content to display in the drag handle
+     */
+    icon?: React.ReactNode;
+    /**
+     * Size of the drag handle
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Variant for styling
+     */
+    variant?: 'default' | 'primary' | 'subtle';
+}
+export declare function FlowDragHandle({ icon, size, variant, className, children, ...props }: FlowDragHandleProps): import("react/jsx-runtime").JSX.Element;