@juspay/blend-design-system 0.0.29-beta → 0.0.30-beta

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@juspay/blend-design-system",
     "private": false,
-    "version": "0.0.29-beta",
+    "version": "0.0.30-beta",
     "description": "A comprehensive React component library and design system by Juspay",
     "type": "module",
     "main": "./dist/main.js",
@@ -27,11 +27,14 @@
         "test:ui": "vitest --ui",
         "test:coverage": "vitest --coverage",
         "test:watch": "vitest --watch",
-        "test:run": "vitest run"
+        "test:run": "vitest run",
+        "test:a11y": "vitest run --testNamePattern 'accessibility|Accessibility'",
+        "test:a11y:watch": "vitest --testNamePattern 'accessibility|Accessibility'",
+        "test:file": "vitest run"
     },
     "peerDependencies": {
-        "react": "^18.0.0 || ^19.0.0",
-        "react-dom": "^18.0.0 || ^19.0.0"
+        "react": "^18.3.1 || >=19.2.1",
+        "react-dom": "^18.3.1 || >=19.2.1"
     },
     "dependencies": {
         "@dnd-kit/core": "^6.3.1",
@@ -50,7 +53,6 @@
         "lucide-react": "^0.511.0",
         "monaco-editor": "^0.54.0",
         "radix-ui": "^1.1.3",
-        "reactflow": "^11.11.4",
         "recharts": "^2.15.3",
         "sonner": "^2.0.3",
         "styled-components": "^6.1.18",
@@ -68,7 +70,6 @@
         "@testing-library/dom": "^10.4.0",
         "@testing-library/jest-dom": "^6.6.3",
         "@testing-library/react": "^16.3.0",
-        "@testing-library/react-hooks": "^8.0.1",
         "@testing-library/user-event": "^14.6.1",
         "@types/jest-axe": "^3.5.9",
         "@types/node": "^22.15.21",
@@ -86,8 +87,8 @@
         "jest-styled-components": "^7.2.0",
         "jsdom": "^26.1.0",
         "prettier": "^3.1.0",
-        "react": "^19.1.0",
-        "react-dom": "^19.1.0",
+        "react": "^19.2.1",
+        "react-dom": "^19.2.1",
         "resize-observer-polyfill": "^1.5.1",
         "storybook": "^8.6.12",
         "typescript": "~5.8.3",

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

@@ -1,16 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { default as DataTable } from './DataTable';
-declare const meta: Meta<typeof DataTable>;
-export default meta;
-type Story = StoryObj<typeof DataTable>;
-export declare const Default: Story;
-export declare const WithSearchAndFiltering: Story;
-export declare const WithAdvancedFiltering: Story;
-export declare const WithInlineEditing: Story;
-export declare const WithRowExpansion: Story;
-export declare const WithPagination: Story;
-export declare const WithCustomHeaderSlots: Story;
-export declare const ServerSideOperations: Story;
-export declare const LoadingState: Story;
-export declare const EmptyState: Story;
-export declare const WithRowStyling: Story;

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

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

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

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

@@ -1,42 +0,0 @@
-/**
- * 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

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

@@ -1,12 +0,0 @@
-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';
-export { BaseEdge, EdgeLabelRenderer, getBezierPath, getStraightPath, getSmoothStepPath, Handle, Position, } from 'reactflow';

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

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

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

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

@@ -1,79 +0,0 @@
-import { Node, Edge, NodeProps, EdgeProps, Connection, NodeTypes, EdgeTypes } from 'reactflow';
-import { ReactNode } from 'react';
-export type { Node, Edge, NodeProps, EdgeProps, Connection, NodeTypes, EdgeTypes, };
-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;
-    nodeTypes?: NodeTypes;
-    edgeTypes?: EdgeTypes;
-    height?: string | number;
-    width?: string | number;
-    fitView?: boolean;
-    showControls?: boolean;
-    controlsPosition?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
-    showMinimap?: boolean;
-    minimapPosition?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
-    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

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

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