@juspay/blend-design-system 0.0.21 → 0.0.22-beta

package/dist/assets/main.css

@@ -1 +1 @@
-[data-vaul-drawer][data-vaul-drawer-direction=bottom]:after{display:none}
+[data-vaul-drawer][data-vaul-drawer-direction=bottom]:after{display:none}.react-flow{direction:ltr}.react-flow__container{position:absolute;width:100%;height:100%;top:0;left:0}.react-flow__pane{z-index:1;cursor:-webkit-grab;cursor:grab}.react-flow__pane.selection{cursor:pointer}.react-flow__pane.dragging{cursor:-webkit-grabbing;cursor:grabbing}.react-flow__viewport{transform-origin:0 0;z-index:2;pointer-events:none}.react-flow__renderer{z-index:4}.react-flow__selection{z-index:6}.react-flow__nodesselection-rect:focus,.react-flow__nodesselection-rect:focus-visible{outline:none}.react-flow .react-flow__edges{pointer-events:none;overflow:visible}.react-flow__edge-path,.react-flow__connection-path{stroke:#b1b1b7;stroke-width:1;fill:none}.react-flow__edge{pointer-events:visibleStroke;cursor:pointer}.react-flow__edge.animated path{stroke-dasharray:5;-webkit-animation:dashdraw .5s linear infinite;animation:dashdraw .5s linear infinite}.react-flow__edge.animated path.react-flow__edge-interaction{stroke-dasharray:none;-webkit-animation:none;animation:none}.react-flow__edge.inactive{pointer-events:none}.react-flow__edge.selected,.react-flow__edge:focus,.react-flow__edge:focus-visible{outline:none}.react-flow__edge.selected .react-flow__edge-path,.react-flow__edge:focus .react-flow__edge-path,.react-flow__edge:focus-visible .react-flow__edge-path{stroke:#555}.react-flow__edge-textwrapper{pointer-events:all}.react-flow__edge-textbg{fill:#fff}.react-flow__edge .react-flow__edge-text{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.react-flow__connection{pointer-events:none}.react-flow__connection .animated{stroke-dasharray:5;-webkit-animation:dashdraw .5s linear infinite;animation:dashdraw .5s linear infinite}.react-flow__connectionline{z-index:1001}.react-flow__nodes{pointer-events:none;transform-origin:0 0}.react-flow__node{position:absolute;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:all;transform-origin:0 0;box-sizing:border-box;cursor:-webkit-grab;cursor:grab}.react-flow__node.dragging{cursor:-webkit-grabbing;cursor:grabbing}.react-flow__nodesselection{z-index:3;transform-origin:left top;pointer-events:none}.react-flow__nodesselection-rect{position:absolute;pointer-events:all;cursor:-webkit-grab;cursor:grab}.react-flow__handle{position:absolute;pointer-events:none;min-width:5px;min-height:5px;width:6px;height:6px;background:#1a192b;border:1px solid white;border-radius:100%}.react-flow__handle.connectionindicator{pointer-events:all;cursor:crosshair}.react-flow__handle-bottom{top:auto;left:50%;bottom:-4px;transform:translate(-50%)}.react-flow__handle-top{left:50%;top:-4px;transform:translate(-50%)}.react-flow__handle-left{top:50%;left:-4px;transform:translateY(-50%)}.react-flow__handle-right{right:-4px;top:50%;transform:translateY(-50%)}.react-flow__edgeupdater{cursor:move;pointer-events:all}.react-flow__panel{position:absolute;z-index:5;margin:15px}.react-flow__panel.top{top:0}.react-flow__panel.bottom{bottom:0}.react-flow__panel.left{left:0}.react-flow__panel.right{right:0}.react-flow__panel.center{left:50%;transform:translate(-50%)}.react-flow__attribution{font-size:10px;background:#ffffff80;padding:2px 3px;margin:0}.react-flow__attribution a{text-decoration:none;color:#999}@-webkit-keyframes dashdraw{0%{stroke-dashoffset:10}}@keyframes dashdraw{0%{stroke-dashoffset:10}}.react-flow__edgelabel-renderer{position:absolute;width:100%;height:100%;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.react-flow__edge.updating .react-flow__edge-path{stroke:#777}.react-flow__edge-text{font-size:10px}.react-flow__node.selectable:focus,.react-flow__node.selectable:focus-visible{outline:none}.react-flow__node-default,.react-flow__node-input,.react-flow__node-output,.react-flow__node-group{padding:10px;border-radius:3px;width:150px;font-size:12px;color:#222;text-align:center;border-width:1px;border-style:solid;border-color:#1a192b;background-color:#fff}.react-flow__node-default.selectable:hover,.react-flow__node-input.selectable:hover,.react-flow__node-output.selectable:hover,.react-flow__node-group.selectable:hover{box-shadow:0 1px 4px 1px #00000014}.react-flow__node-default.selectable.selected,.react-flow__node-default.selectable:focus,.react-flow__node-default.selectable:focus-visible,.react-flow__node-input.selectable.selected,.react-flow__node-input.selectable:focus,.react-flow__node-input.selectable:focus-visible,.react-flow__node-output.selectable.selected,.react-flow__node-output.selectable:focus,.react-flow__node-output.selectable:focus-visible,.react-flow__node-group.selectable.selected,.react-flow__node-group.selectable:focus,.react-flow__node-group.selectable:focus-visible{box-shadow:0 0 0 .5px #1a192b}.react-flow__node-group{background-color:#f0f0f040}.react-flow__nodesselection-rect,.react-flow__selection{background:#0059dc14;border:1px dotted rgba(0,89,220,.8)}.react-flow__nodesselection-rect:focus,.react-flow__nodesselection-rect:focus-visible,.react-flow__selection:focus,.react-flow__selection:focus-visible{outline:none}.react-flow__controls{box-shadow:0 0 2px 1px #00000014}.react-flow__controls-button{border:none;background:#fefefe;border-bottom:1px solid #eee;box-sizing:content-box;display:flex;justify-content:center;align-items:center;width:16px;height:16px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;padding:5px}.react-flow__controls-button:hover{background:#f4f4f4}.react-flow__controls-button svg{width:100%;max-width:12px;max-height:12px}.react-flow__controls-button:disabled{pointer-events:none}.react-flow__controls-button:disabled svg{fill-opacity:.4}.react-flow__minimap{background-color:#fff}.react-flow__minimap svg{display:block}.react-flow__resize-control{position:absolute}.react-flow__resize-control.left,.react-flow__resize-control.right{cursor:ew-resize}.react-flow__resize-control.top,.react-flow__resize-control.bottom{cursor:ns-resize}.react-flow__resize-control.top.left,.react-flow__resize-control.bottom.right{cursor:nwse-resize}.react-flow__resize-control.bottom.left,.react-flow__resize-control.top.right{cursor:nesw-resize}.react-flow__resize-control.handle{width:4px;height:4px;border:1px solid #fff;border-radius:1px;background-color:#3367d9;transform:translate(-50%,-50%)}.react-flow__resize-control.handle.left{left:0;top:50%}.react-flow__resize-control.handle.right{left:100%;top:50%}.react-flow__resize-control.handle.top{left:50%;top:0}.react-flow__resize-control.handle.bottom{left:50%;top:100%}.react-flow__resize-control.handle.top.left,.react-flow__resize-control.handle.bottom.left{left:0}.react-flow__resize-control.handle.top.right,.react-flow__resize-control.handle.bottom.right{left:100%}.react-flow__resize-control.line{border-color:#3367d9;border-width:0;border-style:solid}.react-flow__resize-control.line.left,.react-flow__resize-control.line.right{width:1px;transform:translate(-50%);top:0;height:100%}.react-flow__resize-control.line.left{left:0;border-left-width:1px}.react-flow__resize-control.line.right{left:100%;border-right-width:1px}.react-flow__resize-control.line.top,.react-flow__resize-control.line.bottom{height:1px;transform:translateY(-50%);left:0;width:100%}.react-flow__resize-control.line.top{top:0;border-top-width:1px}.react-flow__resize-control.line.bottom{border-bottom-width:1px;top:100%}.blend-workflow-canvas .react-flow__node{cursor:pointer;padding:0;border:none;background:transparent;border-radius:0;box-shadow:none}.blend-workflow-canvas .react-flow__node:hover,.blend-workflow-canvas .react-flow__node.selected,.blend-workflow-canvas .react-flow__node.selectable:hover{padding:0;border:none;background:transparent;box-shadow:none}.blend-workflow-canvas .react-flow__edge{cursor:pointer}.blend-workflow-canvas .react-flow__attribution{display:none}

package/dist/components/Card/CardComponents.d.ts

@@ -6,18 +6,21 @@ type CardComponentProps = {
         variant?: CardVariant.DEFAULT;
     }>;
     cardToken: CardTokenType;
+    maxHeight?: string;
 };
 type AlignedCardComponentProps = {
     props: Extract<CardProps, {
         variant: CardVariant.ALIGNED;
     }>;
     cardToken: CardTokenType;
+    maxHeight?: string;
 };
 type CustomCardComponentProps = {
     props: Extract<CardProps, {
         variant: CardVariant.CUSTOM;
     }>;
     cardToken: CardTokenType;
+    maxHeight?: string;
 };
 export declare const DefaultCard: React.FC<CardComponentProps>;
 export declare const AlignedCard: React.FC<AlignedCardComponentProps>;

package/dist/components/Card/types.d.ts

@@ -43,4 +43,15 @@ export type CustomCardProps = {
 export type CardProps = {
     className?: string;
     maxWidth?: string;
+    /**
+     * Height of the card. Accepts any valid CSS height value.
+     * Examples: "200px", "100%", "50vh", "auto"
+     * Note: For percentage heights to work, parent container must have a defined height.
+     */
+    maxHeight?: string;
+    /**
+     * Minimum height of the card. Accepts any valid CSS height value.
+     * Useful when you want the card to grow with content but maintain a minimum height.
+     */
+    minHeight?: string;
 } & (DefaultCardProps | AlignedCardProps | CustomCardProps);

package/dist/components/DataTable/DataTablePagination.d.ts

@@ -4,8 +4,9 @@ type DataTablePaginationProps = {
     totalRows: number;
     pageSizeOptions: number[];
     isLoading?: boolean;
+    hasData?: boolean;
     onPageChange: (page: number) => void;
     onPageSizeChange: (pageSize: number) => void;
 };
-export declare function DataTablePagination({ currentPage, pageSize, totalRows, pageSizeOptions, isLoading, onPageChange, onPageSizeChange, }: DataTablePaginationProps): import("react/jsx-runtime").JSX.Element;
+export declare function DataTablePagination({ currentPage, pageSize, totalRows, pageSizeOptions, isLoading, hasData, onPageChange, onPageSizeChange, }: DataTablePaginationProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/DataTable/TableBody/types.d.ts

@@ -4,6 +4,7 @@ export type TableBodyProps<T extends Record<string, unknown>> = {
     currentData: T[];
     visibleColumns: ColumnDefinition<T>[];
     idField: string;
+    tableTitle?: string;
     selectedRows: Record<string, boolean>;
     editingRows: Record<string, boolean>;
     editValues: Record<string, T>;

package/dist/components/DataTable/TableCell/index.d.ts

@@ -1,3 +1,4 @@
+import { default as React } from 'react';
 import { TableCellProps } from './types';
-declare const TableCell: import('react').ForwardRefExoticComponent<TableCellProps<Record<string, unknown>> & import('react').RefAttributes<HTMLTableCellElement>>;
+declare const TableCell: React.ForwardRefExoticComponent<TableCellProps<Record<string, unknown>> & React.RefAttributes<HTMLTableCellElement>>;
 export default TableCell;

package/dist/components/DataTable/TableCell/types.d.ts

@@ -3,6 +3,8 @@ export type TableCellProps<T extends Record<string, unknown>> = {
     column: ColumnDefinition<T>;
     row: T;
     rowIndex: number;
+    colIndex?: number;
+    tableTitle?: string;
     isEditing: boolean;
     currentValue: unknown;
     width: React.CSSProperties;

package/dist/components/DataTable/TableFooter/types.d.ts

@@ -5,6 +5,7 @@ export type TableFooterProps = {
     pageSize: number;
     totalRows: number;
     isLoading?: boolean;
+    hasData?: boolean;
     onPageChange: (page: number) => void;
     onPageSizeChange: (size: number) => void;
 };

package/dist/components/DateRangePicker/CalendarGrid.d.ts

@@ -11,6 +11,7 @@ type CalendarGridProps = {
     customDisableDates?: (date: Date) => boolean;
     customRangeConfig?: CustomRangeConfig;
     showDateTimePicker?: boolean;
+    resetScrollPosition?: number;
 };
 declare const CalendarGrid: import('react').ForwardRefExoticComponent<CalendarGridProps & import('react').RefAttributes<HTMLDivElement>>;
 export default CalendarGrid;

package/dist/components/DateRangePicker/dateRangePicker.tokens.d.ts

@@ -192,7 +192,13 @@ export type CalendarTokenType = {
                 };
                 todayIndicator: {
                     width: CSSObject['width'];
+                    height: CSSObject['height'];
                     backgroundColor: CSSObject['backgroundColor'];
+                    borderRadius: CSSObject['borderRadius'];
+                    position: CSSObject['position'];
+                    bottom: CSSObject['bottom'];
+                    left: CSSObject['left'];
+                    transform: CSSObject['transform'];
                 };
             };
         };

package/dist/components/WorkflowCanvas/WorkflowCanvas.d.ts

@@ -0,0 +1,19 @@
+import { WorkflowCanvasProps } from './types';
+/**
+ * WorkflowCanvas component for building visual workflow builders
+ *
+ * A powerful workflow canvas component built on top of ReactFlow, providing
+ * a complete solution for creating node-based workflow editors with support
+ * for custom nodes, edges, controls, and theming.
+ *
+ * @component
+ * @param {WorkflowCanvasProps} props - Canvas configuration and event handlers
+ * @returns {JSX.Element} The workflow canvas wrapped in ReactFlowProvider
+ *
+ * @example
+ * See the full demo at `apps/site/src/demos/WorkflowCanvasDemo.tsx`
+ *
+ * @public
+ */
+declare const WorkflowCanvas: (props: WorkflowCanvasProps) => import("react/jsx-runtime").JSX.Element;
+export default WorkflowCanvas;

package/dist/components/WorkflowCanvas/WorkflowControls.d.ts

@@ -0,0 +1,3 @@
+import { WorkflowControlsProps } from './types';
+declare const _default: import('react').MemoExoticComponent<({ showZoom, showFitView, position, }: WorkflowControlsProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

package/dist/components/WorkflowCanvas/components/NodeContent.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+export type NodeContentProps = {
+    icon?: ReactNode;
+    label?: string;
+    description?: string;
+    iconBackgroundColor?: string;
+    iconPadding?: string | number;
+    iconBorderRadius?: string | number;
+    labelColor?: string;
+    labelFontWeight?: number;
+    descriptionColor?: string;
+    descriptionOpacity?: number;
+};
+declare const _default: import('react').MemoExoticComponent<({ icon, label, description, iconBackgroundColor, iconPadding, iconBorderRadius, labelColor, labelFontWeight, descriptionColor, descriptionOpacity, }: NodeContentProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

package/dist/components/WorkflowCanvas/constants.d.ts

@@ -0,0 +1,42 @@
+/**
+ * WorkflowCanvas constants
+ * Internal implementation constants that should NOT be customized via tokens
+ *
+ * These are technical implementation details required for ReactFlow integration.
+ * User-customizable values (spacing, sizes, etc.) have been moved to
+ * workflow.tokens.ts where they can be themed and customized per breakpoint.
+ */
+/**
+ * ReactFlow-specific CSS class names
+ * These are required by ReactFlow library and should not be changed
+ */
+export declare const REACTFLOW_CLASSES: {
+    /** Prevents dragging on this element (ReactFlow class) */
+    readonly NO_DRAG: "nodrag";
+    /** Prevents panning on this element (ReactFlow class) */
+    readonly NO_PAN: "nopan";
+    /** Combined no-drag and no-pan classes */
+    readonly NO_DRAG_PAN: "nodrag nopan";
+};
+/**
+ * CSS transform constants
+ * Standard CSS transform values for internal positioning logic
+ */
+export declare const TRANSFORMS: {
+    /** Center transform for absolute positioned elements */
+    readonly CENTER: "translate(-50%, -50%)";
+};
+/**
+ * Animation and transition constants
+ * Standard transition and animation values for consistent behavior
+ */
+export declare const TRANSITIONS: {
+    /** Default transition for smooth animations */
+    readonly DEFAULT: "all 0.2s ease-in-out";
+    /** Zoom animation duration in ms */
+    readonly ZOOM_DURATION: 200;
+    /** Fit view animation duration in ms */
+    readonly FIT_VIEW_DURATION: 200;
+    /** Fit view padding ratio */
+    readonly FIT_VIEW_PADDING: 0.2;
+};

package/dist/components/WorkflowCanvas/edges/DefaultEdge.d.ts

@@ -0,0 +1,3 @@
+import { CustomEdgeProps } from '../types';
+declare const _default: import('react').MemoExoticComponent<({ id, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, selected, data, }: CustomEdgeProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

package/dist/components/WorkflowCanvas/index.d.ts

@@ -0,0 +1,11 @@
+export { default as WorkflowCanvas } from './WorkflowCanvas';
+export { default as DefaultNode } from './nodes/DefaultNode';
+export { default as InputNode } from './nodes/InputNode';
+export { default as OutputNode } from './nodes/OutputNode';
+export { default as DefaultEdge } from './edges/DefaultEdge';
+export { default as WorkflowControls } from './WorkflowControls';
+export { default as NodeContent } from './components/NodeContent';
+export * from './types';
+export * from './workflow.tokens';
+export * from './constants';
+export * from './utils';

package/dist/components/WorkflowCanvas/nodes/DefaultNode.d.ts

@@ -0,0 +1,3 @@
+import { CustomNodeProps } from '../types';
+declare const _default: import('react').MemoExoticComponent<({ data, selected }: CustomNodeProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

package/dist/components/WorkflowCanvas/nodes/InputNode.d.ts

@@ -0,0 +1,3 @@
+import { CustomNodeProps } from '../types';
+declare const _default: import('react').MemoExoticComponent<({ data, selected }: CustomNodeProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

package/dist/components/WorkflowCanvas/nodes/OutputNode.d.ts

@@ -0,0 +1,3 @@
+import { CustomNodeProps } from '../types';
+declare const _default: import('react').MemoExoticComponent<({ data, selected }: CustomNodeProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

package/dist/components/WorkflowCanvas/types.d.ts

@@ -0,0 +1,76 @@
+import { Node, Edge, NodeProps, EdgeProps, Connection } from 'reactflow';
+import { ReactNode } from 'react';
+export type { Node, Edge, NodeProps, EdgeProps, Connection };
+export declare enum NodeType {
+    DEFAULT = "default",
+    INPUT = "input",
+    OUTPUT = "output",
+    CUSTOM = "custom"
+}
+export declare enum EdgeType {
+    DEFAULT = "default",
+    STRAIGHT = "straight",
+    STEP = "step",
+    SMOOTHSTEP = "smoothstep",
+    SIMPLEBEZIER = "simplebezier"
+}
+export type BaseNodeData = {
+    label?: string;
+    description?: string;
+    icon?: ReactNode;
+    status?: 'default' | 'success' | 'error' | 'warning';
+    [key: string]: unknown;
+};
+export type BaseEdgeData = {
+    label?: string;
+    animated?: boolean;
+    [key: string]: unknown;
+};
+export type BlendNode = Node<BaseNodeData>;
+export type BlendEdge = Edge<BaseEdgeData>;
+export type WorkflowCanvasProps = {
+    nodes: BlendNode[];
+    edges: BlendEdge[];
+    onNodesChange?: (nodes: BlendNode[]) => void;
+    onEdgesChange?: (edges: BlendEdge[]) => void;
+    onConnect?: (connection: Connection) => void;
+    onNodeClick?: (event: React.MouseEvent, node: BlendNode) => void;
+    onEdgeClick?: (event: React.MouseEvent, edge: BlendEdge) => void;
+    onNodeDoubleClick?: (event: React.MouseEvent, node: BlendNode) => void;
+    onPaneClick?: (event: React.MouseEvent) => void;
+    height?: string | number;
+    width?: string | number;
+    fitView?: boolean;
+    showControls?: boolean;
+    controlsPosition?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    showMinimap?: boolean;
+    showBackground?: boolean;
+    panOnScroll?: boolean;
+    zoomOnScroll?: boolean;
+    nodesDraggable?: boolean;
+    nodesConnectable?: boolean;
+    elementsSelectable?: boolean;
+    minZoom?: number;
+    maxZoom?: number;
+    defaultZoom?: number;
+    children?: ReactNode;
+};
+export type CustomNodeProps = NodeProps<BaseNodeData> & {
+    selected: boolean;
+};
+export type CustomEdgeProps = EdgeProps<BaseEdgeData> & {
+    selected?: boolean;
+};
+export declare enum ControlButton {
+    ZOOM_IN = "zoom-in",
+    ZOOM_OUT = "zoom-out",
+    FIT_VIEW = "fit-view",
+    INTERACTIVE = "interactive",
+    LOCK = "lock"
+}
+export type WorkflowControlsProps = {
+    showZoom?: boolean;
+    showFitView?: boolean;
+    showInteractive?: boolean;
+    position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+};

package/dist/components/WorkflowCanvas/utils.d.ts

@@ -0,0 +1,13 @@
+import { WorkflowTokensType } from './workflow.tokens';
+export declare const createStyledHandle: (backgroundColor: string | undefined, borderColor: string | undefined, hoverBackgroundColor: string | undefined, hoverBorderColor: string | undefined) => import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('reactflow').HandleProps & Omit<import('react').HTMLAttributes<HTMLDivElement>, "id"> & import('react').RefAttributes<HTMLDivElement>, {
+    $tokens: WorkflowTokensType;
+}>> & string & Omit<import('react').MemoExoticComponent<import('react').ForwardRefExoticComponent<import('reactflow').HandleProps & Omit<import('react').HTMLAttributes<HTMLDivElement>, "id"> & import('react').RefAttributes<HTMLDivElement>>>, keyof import('react').Component<any, {}, any>>;
+export declare const createTokenStyledHandle: () => import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('reactflow').HandleProps & Omit<import('react').HTMLAttributes<HTMLDivElement>, "id"> & import('react').RefAttributes<HTMLDivElement>, {
+    $tokens: WorkflowTokensType;
+}>> & string & Omit<import('react').MemoExoticComponent<import('react').ForwardRefExoticComponent<import('reactflow').HandleProps & Omit<import('react').HTMLAttributes<HTMLDivElement>, "id"> & import('react').RefAttributes<HTMLDivElement>>>, keyof import('react').Component<any, {}, any>>;
+export declare const createGradientWrapper: (gradientStart: string | undefined, gradientEnd: string | undefined, borderColor: string | undefined) => import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $boxShadow: string | undefined;
+}>> & string;
+export declare const getBoxShadow: (selected: boolean, selectedShadow: string | undefined, defaultShadow: string | undefined) => string | undefined;
+export declare const getEdgeStroke: (selected: boolean | undefined, animated: boolean | undefined, selectedStroke: string | undefined, animatedStroke: string | undefined, defaultStroke: string | undefined) => string | undefined;
+export declare const getEdgeStrokeWidth: (selected: boolean | undefined, selectedWidth: number | string | undefined, defaultWidth: number | string | undefined) => number | string | undefined;

package/dist/components/WorkflowCanvas/workflow.tokens.d.ts

@@ -0,0 +1,100 @@
+import { CSSObject } from 'styled-components';
+import { FoundationTokenType } from '../../tokens/theme.token';
+import { BreakpointType } from '../../breakpoints/breakPoints';
+export type NodeState = 'default' | 'hover' | 'selected';
+export type WorkflowTokensType = {
+    canvas: {
+        backgroundColor: CSSObject['backgroundColor'];
+        dotColor: CSSObject['color'];
+        dotGap: CSSObject['gap'];
+        dotSize: number;
+    };
+    node: {
+        default: {
+            backgroundColor: CSSObject['backgroundColor'];
+            border: CSSObject['border'];
+            borderRadius: CSSObject['borderRadius'];
+            color: CSSObject['color'];
+            padding: CSSObject['padding'];
+            boxShadow: CSSObject['boxShadow'];
+            fontSize: CSSObject['fontSize'];
+            fontWeight: CSSObject['fontWeight'];
+            minWidth: CSSObject['minWidth'];
+            minHeight: CSSObject['minHeight'];
+        };
+        hover: {
+            backgroundColor: CSSObject['backgroundColor'];
+            border: CSSObject['border'];
+            boxShadow: CSSObject['boxShadow'];
+        };
+        selected: {
+            backgroundColor: CSSObject['backgroundColor'];
+            border: CSSObject['border'];
+            boxShadow: CSSObject['boxShadow'];
+        };
+        content: {
+            gap: CSSObject['gap'];
+            padding: CSSObject['padding'];
+        };
+        icon: {
+            paddingSm: CSSObject['padding'];
+            paddingMd: CSSObject['padding'];
+            borderRadiusSm: CSSObject['borderRadius'];
+            borderRadiusMd: CSSObject['borderRadius'];
+            size: {
+                small: number;
+                medium: number;
+                large: number;
+            };
+        };
+    };
+    handle: {
+        backgroundColor: CSSObject['backgroundColor'];
+        border: CSSObject['border'];
+        width: CSSObject['width'];
+        height: CSSObject['height'];
+        hover: {
+            backgroundColor: CSSObject['backgroundColor'];
+            border: CSSObject['border'];
+        };
+    };
+    edge: {
+        stroke: CSSObject['stroke'];
+        strokeWidth: CSSObject['strokeWidth'];
+        selected: {
+            stroke: CSSObject['stroke'];
+            strokeWidth: CSSObject['strokeWidth'];
+        };
+        animated: {
+            stroke: CSSObject['stroke'];
+        };
+    };
+    controls: {
+        backgroundColor: CSSObject['backgroundColor'];
+        border: CSSObject['border'];
+        borderRadius: CSSObject['borderRadius'];
+        boxShadow: CSSObject['boxShadow'];
+        padding: CSSObject['padding'];
+        gap: CSSObject['gap'];
+        offset: CSSObject['top'] | CSSObject['right'] | CSSObject['bottom'] | CSSObject['left'];
+        button: {
+            color: CSSObject['color'];
+            hover: {
+                backgroundColor: CSSObject['backgroundColor'];
+            };
+        };
+    };
+    minimap: {
+        backgroundColor: CSSObject['backgroundColor'];
+        border: CSSObject['border'];
+        borderRadius: CSSObject['borderRadius'];
+        maskColor: CSSObject['backgroundColor'];
+        nodeColor: CSSObject['color'];
+        nodeStrokeColor: CSSObject['color'];
+        nodeBorderRadius: CSSObject['borderRadius'];
+    };
+};
+export type ResponsiveWorkflowTokens = {
+    [key in keyof BreakpointType]: WorkflowTokensType;
+};
+export declare const getWorkflowTokens: (foundationToken: FoundationTokenType) => ResponsiveWorkflowTokens;

package/dist/context/ThemeContext.d.ts

@@ -40,6 +40,7 @@ import { ThemeType } from '../tokens';
 import { ResponsiveSkeletonTokens } from '../components/Skeleton/skeleton.tokens';
 import { BREAKPOINTS } from '../breakpoints/breakPoints';
 import { ResponsiveStepperTokens } from '../components/Stepper/stepper.tokens';
+import { ResponsiveWorkflowTokens } from '../components/WorkflowCanvas/workflow.tokens';
 export type ComponentTokenType = {
     TAGS?: ResponsiveTagTokens;
     SEARCH_INPUT?: ResponsiveSearchInputTokens;
@@ -81,6 +82,7 @@ export type ComponentTokenType = {
     SIDEBAR?: ResponsiveSidebarTokens;
     UPLOAD?: ResponsiveUploadTokens;
     CODE_BLOCK?: ResponsiveCodeBlockTokens;
+    WORKFLOW_CANVAS?: ResponsiveWorkflowTokens;
 };
 type ThemeContextType = {
     foundationTokens: ThemeType;

package/dist/context/useComponentToken.d.ts

@@ -39,4 +39,5 @@ import { ResponsiveStatCardTokens } from '../components/StatCard/statcard.tokens
 import { ResponsiveSidebarTokens } from '../components/Sidebar/sidebar.tokens';
 import { ResponsiveUploadTokens } from '../components/Upload/upload.tokens';
 import { ResponsiveCodeBlockTokens } from '../components/CodeBlock/codeBlock.token';
-export declare const useComponentToken: (component: keyof ComponentTokenType) => ResponsiveSearchInputTokens | ResponsiveTagTokens | ResponsiveTextAreaTokens | ResponsiveTextInputTokens | ResponsiveNumberInputTokens | ResponsiveAlertTokens | ResponsiveRadioTokens | ResponsiveOTPInputTokens | ResponsiveUnitInputTokens | ResponsiveMultiValueInputTokens | ResponsiveSwitchTokens | ResponsiveCheckboxTokens | ResponsiveTabsTokens | ResponsiveTooltipTokens | ResponsiveDropdownInputTokens | ResponsiveButtonTokens | ResponsiveModalTokens | ResponsiveBreadcrumbTokens | ResponsivePopoverTokens | ResponsiveMenuTokensType | ResponsiveMultiSelectTokens | ResponsiveSingleSelectTokens | ResponsiveTableTokens | ResponsiveCalendarTokens | ResponsiveAccordionTokens | ResponsiveStatCardTokens | ResponsiveProgressBarTokens | ResponsiveDrawerTokens | ResponsiveChartTokens | ResponsiveSnackbarTokens | ResponsiveStepperTokens | ResponsiveKeyValuePairTokens | ResponsiveCardTokens | ResponsiveSkeletonTokens | ResponsiveTopbarTokens | ResponsiveAvatarTokens | ResponsiveAvatarGroupTokens | ResponsiveSidebarTokens | ResponsiveUploadTokens | ResponsiveCodeBlockTokens;
+import { ResponsiveWorkflowTokens } from '../components/WorkflowCanvas/workflow.tokens';
+export declare const useComponentToken: (component: keyof ComponentTokenType) => ResponsiveSearchInputTokens | ResponsiveTagTokens | ResponsiveTextAreaTokens | ResponsiveTextInputTokens | ResponsiveNumberInputTokens | ResponsiveAlertTokens | ResponsiveRadioTokens | ResponsiveOTPInputTokens | ResponsiveUnitInputTokens | ResponsiveMultiValueInputTokens | ResponsiveSwitchTokens | ResponsiveCheckboxTokens | ResponsiveTabsTokens | ResponsiveTooltipTokens | ResponsiveDropdownInputTokens | ResponsiveButtonTokens | ResponsiveModalTokens | ResponsiveBreadcrumbTokens | ResponsivePopoverTokens | ResponsiveMenuTokensType | ResponsiveMultiSelectTokens | ResponsiveSingleSelectTokens | ResponsiveTableTokens | ResponsiveCalendarTokens | ResponsiveAccordionTokens | ResponsiveStatCardTokens | ResponsiveProgressBarTokens | ResponsiveDrawerTokens | ResponsiveChartTokens | ResponsiveSnackbarTokens | ResponsiveStepperTokens | ResponsiveKeyValuePairTokens | ResponsiveCardTokens | ResponsiveSkeletonTokens | ResponsiveTopbarTokens | ResponsiveAvatarTokens | ResponsiveAvatarGroupTokens | ResponsiveSidebarTokens | ResponsiveUploadTokens | ResponsiveCodeBlockTokens | ResponsiveWorkflowTokens;

package/dist/main.d.ts

@@ -34,6 +34,7 @@ export * from './components/Skeleton';
 export * from './components/KeyValuePair';
 export * from './components/VirtualList';
 export * from './components/Upload';
+export * from './components/WorkflowCanvas';
 export * from './components/ButtonGroup';
 export * from './components/Button';
 export * from './context';