@juspay/blend-design-system 0.0.21 → 0.0.22

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/Accordion/AccordionItem.d.ts

@@ -5,5 +5,6 @@ declare const AccordionItem: import('react').ForwardRefExoticComponent<Accordion
     isFirst?: boolean;
     isLast?: boolean;
     isIntermediate?: boolean;
+    currentValue?: string | string[];
 } & import('react').RefAttributes<HTMLDivElement>>;
 export default AccordionItem;

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

@@ -41,6 +41,16 @@ export type CustomCardProps = {
     children: ReactNode;
 };
 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/Charts/renderChart.d.ts

@@ -1,2 +1,2 @@
 import { RenderChartProps } from './types';
-export declare const renderChart: ({ flattenedData, chartType, hoveredKey, lineKeys, colors, setHoveredKey, data: originalData, selectedKeys, isSmallScreen, barsize, xAxis, yAxis, noData, }: RenderChartProps) => import("react/jsx-runtime").JSX.Element;
+export declare const renderChart: ({ chartName, flattenedData, chartType, hoveredKey, lineKeys, colors, setHoveredKey, data: originalData, selectedKeys, isSmallScreen, barsize, xAxis, yAxis, noData, }: RenderChartProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -90,6 +90,7 @@ export type StackedLegendsDataPoint = {
     changeType: LegendsChangeType;
 };
 export type RenderChartProps = {
+    chartName?: string;
     flattenedData: FlattenedDataPoint[];
     chartType: ChartType;
     hoveredKey: string | null;
@@ -139,6 +140,7 @@ export type ChartsProps = {
     showCollapseIcon?: boolean;
     isExpanded?: boolean;
     onExpandedChange?: (isExpanded: boolean) => void;
+    chartName?: string;
 };
 export type FlattenedDataPoint = {
     name: string;

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/DataTable/TableHeader/handlers.d.ts

@@ -19,10 +19,10 @@ export type SortHandlers = {
     handleSortAscending: (field: string) => void;
     handleSortDescending: (field: string) => void;
 };
+export declare const createSortHandlers: (sortState: SortState, onSort: (field: keyof Record<string, unknown>) => void, onSortAscending?: (field: keyof Record<string, unknown>) => void, onSortDescending?: (field: keyof Record<string, unknown>) => void) => SortHandlers;
 export type FilterHandlers = {
     handleSearchChange: (fieldKey: string, value: string) => void;
     handleSelectFilter: (column: ColumnDefinition<Record<string, unknown>>, fieldKey: string, value: string, onColumnFilter?: ColumnFilterHandler) => void;
     handleMultiSelectFilter: (column: ColumnDefinition<Record<string, unknown>>, fieldKey: string, value: string, onColumnFilter?: ColumnFilterHandler) => void;
 };
-export declare const createSortHandlers: (sortState: SortState, setSortState: React.Dispatch<React.SetStateAction<SortState>>, onSort: (field: keyof Record<string, unknown>) => void) => SortHandlers;
 export declare const createFilterHandlers: (setFilterState: React.Dispatch<React.SetStateAction<FilterState>>) => FilterHandlers;

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

@@ -1,10 +1,11 @@
-import { ColumnDefinition, FilterType, RowActionsConfig } from '../types';
+import { ColumnDefinition, FilterType, RowActionsConfig, SortConfig } from '../types';
 import { MobileDataTableConfig } from '../hooks/useMobileDataTable';
 export type TableHeaderProps<T extends Record<string, unknown>> = {
     visibleColumns: ColumnDefinition<T>[];
     allVisibleColumns?: ColumnDefinition<T>[];
     initialColumns: ColumnDefinition<T>[];
     selectAll: boolean | 'indeterminate';
+    sortConfig?: SortConfig | null;
     enableInlineEdit?: boolean;
     enableColumnManager?: boolean;
     columnManagerMaxSelections?: number;
@@ -31,6 +32,8 @@ export type TableHeaderProps<T extends Record<string, unknown>> = {
     mobileOverflowColumns?: ColumnDefinition<T>[];
     onMobileOverflowClick?: (row: T) => void;
     onSort: (field: keyof T) => void;
+    onSortAscending?: (field: keyof T) => void;
+    onSortDescending?: (field: keyof T) => void;
     onSelectAll: (checked: boolean | 'indeterminate') => void;
     onColumnChange: (columns: ColumnDefinition<T>[]) => void;
     onColumnFilter?: (field: string, type: FilterType, value: string | string[] | {

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/DateRangePicker/types.d.ts

@@ -100,7 +100,6 @@ export type TriggerConfig = {
     placeholder?: string;
     showIcon?: boolean;
     icon?: ReactNode;
-    className?: string;
     style?: React.CSSProperties;
     renderTrigger?: (props: {
         selectedRange: DateRange | undefined;

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

@@ -69,18 +69,6 @@ export type DrawerProps = {
         left?: string;
         right?: string;
     };
-    /**
-     * Custom class name for the drawer content
-     */
-    className?: string;
-    /**
-     * Custom class name for the overlay
-     */
-    overlayClassName?: string;
-    /**
-     * Custom styles for the drawer content
-     */
-    style?: React.CSSProperties;
     /**
      * Children content
      */

package/dist/components/Inputs/NumberInput/numberInput.tokens.d.ts

@@ -2,6 +2,7 @@ import { CSSObject } from 'styled-components';
 import { FoundationTokenType } from '../../../tokens/theme.token';
 import { BreakpointType } from '../../../breakpoints/breakPoints';
 declare enum TextInputSize {
+    SM = "sm",
     MD = "md",
     LG = "lg"
 }

package/dist/components/Inputs/UnitInput/types.d.ts

@@ -1,4 +1,5 @@
 export declare enum UnitInputSize {
+    SMALL = "sm",
     MEDIUM = "md",
     LARGE = "lg"
 }

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

@@ -9,7 +9,6 @@ export type ModalProps = {
     children: ReactNode;
     primaryAction?: ModalButtonAction;
     secondaryAction?: ModalButtonAction;
-    className?: string;
     showCloseButton?: boolean;
     showHeader?: boolean;
     showFooter?: boolean;

package/dist/components/MultiSelect/MultiSelectMenuItem.d.ts

@@ -1,11 +1,12 @@
 import { MultiSelectMenuItemType } from './types';
 declare const MultiSelectMenuItem: {
-    ({ item, onSelect, selected, maxSelections, allItems, }: {
+    ({ item, onSelect, selected, maxSelections, allItems, index, }: {
         item: MultiSelectMenuItemType;
         onSelect: (value: string) => void;
         selected: string[];
         maxSelections?: number;
         allItems?: MultiSelectMenuItemType[];
+        index?: number;
     }): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/dist/components/MultiSelect/MultiSelectTrigger.d.ts

@@ -19,6 +19,7 @@ export type MultiSelectTriggerProps = {
     multiSelectTokens: MultiSelectTokensType;
     inline?: boolean;
     error?: boolean;
+    disabled?: boolean;
 };
-declare const MultiSelectTrigger: ({ selectedValues, slot, variant, size, isSmallScreen, onChange, name, label, placeholder, required, selectionTagType, valueLabelMap, open, onClick, multiSelectTokens, inline, error, }: MultiSelectTriggerProps) => import("react/jsx-runtime").JSX.Element;
+declare const MultiSelectTrigger: ({ selectedValues, slot, variant, size, isSmallScreen, onChange, name, label, placeholder, required, selectionTagType, valueLabelMap, open, onClick, multiSelectTokens, inline, error, disabled, }: MultiSelectTriggerProps) => import("react/jsx-runtime").JSX.Element;
 export default MultiSelectTrigger;

package/dist/components/MultiSelect/multiSelect.tokens.d.ts

@@ -76,6 +76,11 @@ export type MultiSelectTokensType = {
                 };
             };
         };
+        placeholder: {
+            color: CSSObject['color'];
+            fontSize: CSSObject['fontSize'];
+            fontWeight: CSSObject['fontWeight'];
+        };
     };
     menu: {
         backgroundColor: CSSObject['backgroundColor'];

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

@@ -18,5 +18,4 @@ export type ProgressBarProps = {
     variant?: ProgressBarVariant;
     type?: ProgressBarType;
     showLabel?: boolean;
-    className?: string;
 };

package/dist/components/Select/SelectItem/types.d.ts

@@ -35,4 +35,5 @@ export type SelectItemProps = {
     showCheckmark?: boolean;
     className?: string;
     selectedPosition?: 'first' | 'middle' | 'last' | 'only' | 'none';
+    index?: number;
 };

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

@@ -37,4 +37,20 @@ export type SidebarProps = {
     merchantInfo?: MerchantInfo;
     rightActions?: ReactNode;
     enableTopbarAutoHide?: boolean;
+    /**
+     * Controlled state: Current expanded state of the sidebar
+     * When provided, sidebar operates in controlled mode - parent must handle state updates
+     */
+    isExpanded?: boolean;
+    /**
+     * Callback fired when sidebar expand/collapse state should change
+     * In controlled mode: Parent should update isExpanded prop based on this callback
+     * In uncontrolled mode: Optional callback for state change notifications
+     */
+    onExpandedChange?: (isExpanded: boolean) => void;
+    /**
+     * Uncontrolled mode: Initial expanded state (defaults to true)
+     * Only used when isExpanded is not provided
+     */
+    defaultIsExpanded?: boolean;
 };

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

@@ -24,3 +24,4 @@ export declare const getDefaultMerchantInfo: () => {
     onSelect: (value: string) => void;
 };
 export declare const useTopbarAutoHide: (enableTopbarAutoHide: boolean) => boolean;
+export declare const isControlledSidebar: (isExpanded: boolean | undefined) => boolean;

package/dist/components/SingleSelect/SingleSelectTrigger.d.ts

@@ -19,6 +19,7 @@ export type SingleSelectTriggerProps = {
     inline?: boolean;
     error?: boolean;
     errorMessage?: string;
+    disabled?: boolean;
 };
-declare const SingleSelectTrigger: ({ size, selected, label, name, placeholder, required, valueLabelMap, open, onClick, slot, variant, isSmallScreenWithLargeSize, isItemSelected, singleSelectTokens, inline, error, }: SingleSelectTriggerProps) => import("react/jsx-runtime").JSX.Element;
+declare const SingleSelectTrigger: ({ size, selected, label, name, placeholder, required, valueLabelMap, open, onClick, slot, variant, isSmallScreenWithLargeSize, isItemSelected, singleSelectTokens, inline, error, disabled, }: SingleSelectTriggerProps) => import("react/jsx-runtime").JSX.Element;
 export default SingleSelectTrigger;

package/dist/components/SingleSelect/singleSelect.tokens.d.ts

@@ -67,6 +67,16 @@ export type SingleSelectTokensType = {
                 [key in TriggerStates]: CSSObject['outline'];
             };
         };
+        placeholder: {
+            color: CSSObject['color'];
+            fontSize: CSSObject['fontSize'];
+            fontWeight: CSSObject['fontWeight'];
+        };
+        selectedValue: {
+            color: CSSObject['color'];
+            fontSize: CSSObject['fontSize'];
+            fontWeight: CSSObject['fontWeight'];
+        };
     };
     menu: {
         backgroundColor: CSSObject['backgroundColor'];

package/dist/components/StatCard/StatCard.d.ts

@@ -1,6 +1,6 @@
 import { StatCardProps } from './types';
 declare const StatCard: {
-    ({ title, value, valueTooltip, change, subtitle, variant, chartData, progressValue, titleIcon, actionIcon, helpIconText, dropdownProps, maxWidth, xAxis, yAxis, valueFormatter, height, direction, }: StatCardProps): import("react/jsx-runtime").JSX.Element;
+    ({ title, value, valueTooltip, change, subtitle, variant, chartData, progressValue, titleIcon, actionIcon, helpIconText, dropdownProps, maxWidth, xAxis, yAxis, valueFormatter, height, direction, ...props }: StatCardProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default StatCard;

package/dist/components/Tabs/Tabs.d.ts

@@ -1,4 +1,5 @@
-declare const Tabs: import('react').ForwardRefExoticComponent<Omit<import('@radix-ui/react-tabs').TabsProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & {
+import * as React from 'react';
+declare const Tabs: React.ForwardRefExoticComponent<Omit<import('@radix-ui/react-tabs').TabsProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
     variant?: import('./types').TabsVariant;
     size?: import('./types').TabsSize;
     items?: import('./types').TabItem[];
@@ -9,5 +10,6 @@ declare const Tabs: import('react').ForwardRefExoticComponent<Omit<import('@radi
     dropdownTooltip?: string;
     addButtonTooltip?: string;
     maxDisplayTabs?: number;
-} & import('react').RefAttributes<HTMLDivElement>>;
+    disable?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
 export default Tabs;

package/dist/components/Tabs/TabsList.d.ts

@@ -1,5 +1,6 @@
 import { TabsSize, TabsVariant } from './types';
-declare const TabsList: import('react').ForwardRefExoticComponent<Omit<import('@radix-ui/react-tabs').TabsListProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & {
+import * as React from 'react';
+declare const TabsList: React.ForwardRefExoticComponent<Omit<import('@radix-ui/react-tabs').TabsListProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
     variant?: TabsVariant;
     size?: TabsSize;
     expanded?: boolean;
@@ -14,5 +15,6 @@ declare const TabsList: import('react').ForwardRefExoticComponent<Omit<import('@
     maxDisplayTabs?: number;
     onTabChange?: (value: string) => void;
     activeTab?: string;
-} & import('react').RefAttributes<HTMLDivElement>>;
+    disable?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
 export default TabsList;

package/dist/components/Tabs/TabsTrigger.d.ts

@@ -8,5 +8,6 @@ declare const TabsTrigger: import('react').ForwardRefExoticComponent<Omit<import
     children: string | number;
     closable?: boolean;
     onClose?: () => void;
+    disable?: boolean;
 } & import('react').RefAttributes<HTMLButtonElement>>;
 export default TabsTrigger;

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

@@ -16,6 +16,7 @@ export type TabItem = {
     content: ReactNode;
     closable?: boolean;
     isDefault?: boolean;
+    disable?: boolean;
 };
 export type TabsProps = ComponentPropsWithoutRef<typeof TabsPrimitive.Root> & {
     variant?: TabsVariant;
@@ -28,6 +29,7 @@ export type TabsProps = ComponentPropsWithoutRef<typeof TabsPrimitive.Root> & {
     dropdownTooltip?: string;
     addButtonTooltip?: string;
     maxDisplayTabs?: number;
+    disable?: boolean;
 };
 export type TabsListProps = ComponentPropsWithoutRef<typeof TabsPrimitive.List> & {
     variant?: TabsVariant;
@@ -44,6 +46,7 @@ export type TabsListProps = ComponentPropsWithoutRef<typeof TabsPrimitive.List>
     maxDisplayTabs?: number;
     onTabChange?: (value: string) => void;
     activeTab?: string;
+    disable?: boolean;
 };
 export type TabsTriggerProps = ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger> & {
     value: string;
@@ -54,6 +57,7 @@ export type TabsTriggerProps = ComponentPropsWithoutRef<typeof TabsPrimitive.Tri
     children: string | number;
     closable?: boolean;
     onClose?: () => void;
+    disable?: boolean;
 };
 export type TabsContentProps = ComponentPropsWithoutRef<typeof TabsPrimitive.Content>;
 export type TabsStyles = {

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;