@juspay/blend-design-system 0.0.27-beta → 0.0.28-beta

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

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
 import { ButtonProps } from '../Button/types';
+import { SkeletonVariant } from '../Skeleton';
 export declare enum CardVariant {
     DEFAULT = "default",
     ALIGNED = "aligned",
@@ -40,6 +41,12 @@ export type CustomCardProps = {
     variant: CardVariant.CUSTOM;
     children: ReactNode;
 };
+export type CardSkeletonProps = {
+    variant: SkeletonVariant;
+    show: boolean;
+    height?: string;
+    width?: string;
+};
 export type CardProps = {
     maxWidth?: string;
     /**
@@ -53,4 +60,5 @@ export type CardProps = {
      * Useful when you want the card to grow with content but maintain a minimum height.
      */
     minHeight?: string;
+    skeleton?: CardSkeletonProps;
 } & (DefaultCardProps | AlignedCardProps | CustomCardProps);

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

@@ -0,0 +1,25 @@
+import { default as React } from 'react';
+interface SankeyChartWrapperProps {
+    chartName?: string;
+    transformedData: {
+        nodes: {
+            name: string;
+        }[];
+        links: {
+            source: number;
+            target: number;
+            value: number;
+            color?: string;
+            hoverColor?: string;
+            sourceName?: string;
+            targetName?: string;
+        }[];
+    };
+    nodeColors: string[];
+    linkColors: string[];
+    sankeyWidth: number;
+    sankeyHeight: number;
+    isSmallScreen: boolean;
+}
+declare const SankeyChartWrapper: React.FC<SankeyChartWrapperProps>;
+export default SankeyChartWrapper;

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

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { SankeyLinkProps } from './types';
+declare const SankeyLink: React.FC<SankeyLinkProps>;
+export default SankeyLink;

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

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { SankeyNodeProps } from './types';
+declare const SankeyNode: React.FC<SankeyNodeProps>;
+export default SankeyNode;

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

@@ -3,4 +3,6 @@ export { default as CoreChart } from './CoreChart';
 export { default as ChartContainer } from './ChartContainer';
 export { default as ChartHeader } from './ChartHeader';
 export { default as ChartLegends } from './ChartLegend';
+export { default as SankeyNode } from './SankeyNode';
+export { default as SankeyLink } from './SankeyLink';
 export * from './types';

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

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

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

@@ -25,7 +25,8 @@ export declare enum ChartType {
     LINE = "line",
     BAR = "bar",
     PIE = "pie",
-    SCATTER = "scatter"
+    SCATTER = "scatter",
+    SANKEY = "sankey"
 }
 export declare enum LegendsChangeType {
     INCREASE = "increase",
@@ -104,6 +105,7 @@ export type RenderChartProps = {
     xAxis?: XAxisConfig;
     yAxis?: YAxisConfig;
     noData?: NoDataProps;
+    height?: number | string;
 };
 export type CoreChartProps = {
     chartType?: ChartType;
@@ -183,3 +185,59 @@ export type CustomTooltipProps = TooltipProps<ValueType, NameType> & {
     xAxis?: XAxisConfig;
     yAxis?: YAxisConfig;
 };
+export type SankeyNode = {
+    name: string;
+    id?: string;
+    color?: string;
+};
+export type SankeyLink = {
+    source: number | string;
+    target: number | string;
+    value: number;
+    color?: string;
+    hoverColor?: string;
+};
+export type SankeyData = {
+    nodes: SankeyNode[];
+    links: SankeyLink[];
+};
+export type SankeyTooltipData = {
+    payload: {
+        name?: string;
+        value?: number;
+        source?: number | string;
+        target?: number | string;
+        sourceName?: string;
+        targetName?: string;
+        color?: string;
+        hoverColor?: string;
+    };
+};
+export type SankeyNodeProps = {
+    x?: number;
+    y?: number;
+    width?: number;
+    height?: number;
+    index?: number;
+    payload?: SankeyNode & {
+        value?: number;
+    };
+    containerWidth?: number;
+    nodeColors?: string[];
+    onMouseEnter?: (data: SankeyTooltipData, event: React.MouseEvent) => void;
+    onMouseLeave?: () => void;
+};
+export type SankeyLinkProps = {
+    sourceX?: number;
+    targetX?: number;
+    sourceY?: number;
+    targetY?: number;
+    sourceControlX?: number;
+    targetControlX?: number;
+    linkWidth?: number;
+    index?: number;
+    payload?: SankeyLink;
+    linkColors?: string[];
+    onMouseEnter?: (data: SankeyTooltipData, event: React.MouseEvent) => void;
+    onMouseLeave?: () => void;
+};

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

@@ -27,4 +27,8 @@ export type CheckboxProps = {
     children?: ReactNode;
     subtext?: string;
     slot?: ReactNode;
+    maxLength?: {
+        label?: number;
+        subtext?: number;
+    };
 };

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

@@ -1,6 +1,10 @@
+import { useSortable } from '@dnd-kit/sortable';
 interface DraggableColumnHeaderProps {
     id: string;
-    children: React.ReactNode;
+    children: (dragHandleProps: {
+        listeners?: ReturnType<typeof useSortable>['listeners'];
+        attributes?: ReturnType<typeof useSortable>['attributes'];
+    }) => React.ReactNode;
     style?: React.CSSProperties;
     disabled?: boolean;
     'data-table-column-heading'?: string;

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

@@ -578,10 +578,7 @@ export declare const CUSTOM_FORMAT_EXAMPLES: {
  * @param type The type of haptic feedback to trigger
  */
 export declare const triggerHapticFeedback: (type?: HapticFeedbackType) => void;
-/**
- * Optimized Apple Calendar-style haptic manager
- */
-export declare class AppleCalendarHapticManager {
+export declare class calendarHapticManager {
     private lastHapticTime;
     private lastHapticIndex;
     private readonly hapticCooldown;
@@ -596,19 +593,19 @@ export declare class AppleCalendarHapticManager {
     destroy(): void;
 }
 export declare const MOBILE_CALENDAR_CONSTANTS: {
-    readonly SNAP_DURATION: 300;
-    readonly MOMENTUM_THRESHOLD: 0.03;
+    readonly SNAP_DURATION: 340;
+    readonly MOMENTUM_THRESHOLD: 0.01;
     readonly DECELERATION_RATE: 0.95;
-    readonly MIN_VELOCITY: 0.01;
-    readonly MAX_MOMENTUM_DISTANCE: 2;
-    readonly VELOCITY_MULTIPLIER: 0.15;
-    readonly VELOCITY_SMOOTHING: 0.8;
-    readonly SCROLL_RESISTANCE: 0.9;
+    readonly MIN_VELOCITY: 0.005;
+    readonly MAX_MOMENTUM_DISTANCE: 50;
+    readonly VELOCITY_MULTIPLIER: 0.8;
+    readonly VELOCITY_SMOOTHING: 0.7;
+    readonly SCROLL_RESISTANCE: 0.95;
     readonly SCALE_SELECTED: 1.02;
     readonly SCALE_UNSELECTED: 0.98;
     readonly OPACITY_SELECTED: 1;
     readonly OPACITY_UNSELECTED: 0.9;
-    readonly TRANSITION_DURATION: "180ms";
+    readonly TRANSITION_DURATION: "220ms";
     readonly EASING: "cubic-bezier(0.25, 0.46, 0.45, 0.94)";
     readonly ANIMATION_FRAME_LIMIT: 60;
     readonly VELOCITY_HISTORY_SIZE: 3;
@@ -616,7 +613,7 @@ export declare const MOBILE_CALENDAR_CONSTANTS: {
 export declare const MOBILE_PICKER_CONSTANTS: {
     readonly ITEM_HEIGHT: 44;
     readonly VISIBLE_ITEMS: 3;
-    readonly SCROLL_DEBOUNCE: 80;
+    readonly SCROLL_DEBOUNCE: 130;
 };
 /**
  * Safely gets an item from an array with comprehensive bounds checking

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

@@ -1,3 +1,3 @@
 import { MultiSelectProps } from './types';
-declare const MultiSelect: ({ selectedValues, onChange, items, label, sublabel, disabled, helpIconHintText, name, required, variant, selectionTagType, slot, hintText, placeholder, size, enableSearch, searchPlaceholder, enableSelectAll, selectAllText, maxSelections, customTrigger, useDrawerOnMobile, minMenuWidth, maxMenuWidth, maxMenuHeight, alignment, side, sideOffset, alignOffset, inline, onBlur, onFocus, error, errorMessage, showActionButtons, primaryAction, secondaryAction, showItemDividers, showHeaderBorder, fullWidth, enableVirtualization, virtualListItemHeight, virtualListOverscan, itemsToRender, onEndReached, endReachedThreshold, hasMore, loadingComponent, skeleton, }: MultiSelectProps) => import("react/jsx-runtime").JSX.Element;
+declare const MultiSelect: ({ selectedValues, onChange, items, label, sublabel, disabled, helpIconHintText, name, required, variant, selectionTagType, slot, hintText, placeholder, size, enableSearch, searchPlaceholder, enableSelectAll, selectAllText, maxSelections, customTrigger, useDrawerOnMobile, minMenuWidth, maxMenuWidth, maxMenuHeight, alignment, side, sideOffset, alignOffset, inline, onBlur, onFocus, error, errorMessage, showActionButtons, primaryAction, secondaryAction, showItemDividers, showHeaderBorder, fullWidth, enableVirtualization, virtualListItemHeight, virtualListOverscan, itemsToRender, onEndReached, endReachedThreshold, hasMore, loadingComponent, skeleton, maxTriggerWidth, minTriggerWidth, }: MultiSelectProps) => import("react/jsx-runtime").JSX.Element;
 export default MultiSelect;

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

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

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

@@ -77,6 +77,8 @@ export type MultiSelectProps = {
     maxSelections?: number;
     customTrigger?: React.ReactNode;
     useDrawerOnMobile?: boolean;
+    maxTriggerWidth?: number;
+    minTriggerWidth?: number;
     minMenuWidth?: number;
     maxMenuWidth?: number;
     maxMenuHeight?: number;

package/dist/components/Primitives/PrimitiveButton/PrimitiveButton.d.ts

@@ -60,6 +60,8 @@ type PrimitiveButtonProps = StateStyles & {
     outlineStyle?: CSSObject['outlineStyle'];
     outlineWidth?: CSSObject['outlineWidth'];
     outlineColor?: CSSObject['outlineColor'];
+    transform?: CSSObject['transform'];
+    transition?: CSSObject['transition'];
     disabled?: boolean;
     fontWeight?: CSSObject['fontWeight'];
     fontSize?: CSSObject['fontSize'];
@@ -122,6 +124,8 @@ declare const PrimitiveButton: React.ForwardRefExoticComponent<StateStyles & {
     outlineStyle?: CSSObject["outlineStyle"];
     outlineWidth?: CSSObject["outlineWidth"];
     outlineColor?: CSSObject["outlineColor"];
+    transform?: CSSObject["transform"];
+    transition?: CSSObject["transition"];
     disabled?: boolean;
     fontWeight?: CSSObject["fontWeight"];
     fontSize?: CSSObject["fontSize"];

package/dist/components/Radio/Radio.d.ts

@@ -1,6 +1,6 @@
 import { RadioProps } from './types';
 export declare const Radio: {
-    ({ id, value, checked, defaultChecked, onChange, disabled, required, error, size, children, subtext, slot, name, ...rest }: RadioProps): import("react/jsx-runtime").JSX.Element;
+    ({ id, checked, defaultChecked, onChange, disabled, required, error, size, children, subtext, slot, name, maxLength, ...rest }: RadioProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default Radio;

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

@@ -17,6 +17,10 @@ export type RadioProps = {
     subtext?: string;
     slot?: ReactNode;
     name?: string;
+    maxLength?: {
+        label?: number;
+        subtext?: number;
+    };
 };
 export type RadioGroupProps = {
     id?: string;

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

@@ -6,16 +6,6 @@ export declare const getSpacingBySize: (size: RadioSize) => {
     marginLeft: string;
     marginTop: string;
 };
-export declare const isControlledRadio: (checked: boolean | undefined) => boolean;
-export declare const createRadioInputProps: (checked: boolean | undefined, defaultChecked: boolean) => {
-    checked: boolean | undefined;
-    defaultChecked?: undefined;
-} | {
-    defaultChecked: boolean;
-    checked?: undefined;
-};
-export declare const getCurrentCheckedState: (checked: boolean | undefined, defaultChecked: boolean) => boolean;
-export declare const createRadioChangeHandler: (disabled: boolean, onChange?: (checked: boolean) => void) => (e: React.ChangeEvent<HTMLInputElement>) => void;
 export declare const isRadioElement: (child: React.ReactElement, RadioComponent: React.ComponentType<RadioProps>) => child is React.ReactElement<RadioProps>;
 export declare const shouldRadioBeChecked: (groupValue: string | undefined, groupDefaultValue: string | undefined, radioValue: string) => boolean;
 export declare const createGroupChangeHandler: (onChange?: (value: string) => void) => (isChecked: boolean, childValue: string) => void;

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

@@ -1,3 +1,3 @@
 import { SingleSelectProps } from './types';
-declare const SingleSelect: ({ label, subLabel, hintText, required, helpIconText, placeholder, error, errorMessage, size, items, name, variant, disabled, selected, onSelect, enableSearch, searchPlaceholder, slot, customTrigger, useDrawerOnMobile, alignment, side, sideOffset, alignOffset, minMenuWidth, maxMenuWidth, maxMenuHeight, onBlur, onFocus, inline, fullWidth, enableVirtualization, virtualListItemHeight, virtualListOverscan, onEndReached, endReachedThreshold, hasMore, loadingComponent, skeleton, }: SingleSelectProps) => import("react/jsx-runtime").JSX.Element;
+declare const SingleSelect: ({ label, subLabel, hintText, required, helpIconText, placeholder, error, errorMessage, size, items, name, variant, disabled, selected, onSelect, enableSearch, searchPlaceholder, slot, customTrigger, useDrawerOnMobile, alignment, side, sideOffset, alignOffset, minMenuWidth, maxMenuWidth, maxMenuHeight, onBlur, onFocus, inline, fullWidth, enableVirtualization, virtualListItemHeight, virtualListOverscan, onEndReached, endReachedThreshold, hasMore, loadingComponent, skeleton, maxTriggerWidth, minTriggerWidth, }: SingleSelectProps) => import("react/jsx-runtime").JSX.Element;
 export default SingleSelect;

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

@@ -20,6 +20,8 @@ export type SingleSelectTriggerProps = {
     error?: boolean;
     errorMessage?: string;
     disabled?: boolean;
+    maxTriggerWidth?: number;
+    minTriggerWidth?: number;
 };
-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;
+declare const SingleSelectTrigger: ({ maxTriggerWidth, minTriggerWidth, 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/types.d.ts

@@ -108,4 +108,6 @@ export type SingleSelectProps = {
         show?: boolean;
         variant?: SkeletonVariant;
     };
+    maxTriggerWidth?: number;
+    minTriggerWidth?: number;
 };

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, minWidth, maxWidth, xAxis, yAxis, valueFormatter, height, direction, ...props }: StatCardProps): import("react/jsx-runtime").JSX.Element;
+    ({ title, value, valueTooltip, change, subtitle, variant, chartData, progressValue, titleIcon, actionIcon, helpIconText, dropdownProps, minWidth, maxWidth, xAxis, yAxis, valueFormatter, height, direction, skeleton, ...props }: StatCardProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default StatCard;

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

@@ -1,6 +1,13 @@
 import { ReactNode } from 'react';
 import { SingleSelectProps } from '../SingleSelect';
 import { AxisType } from '../Charts/types';
+import { SkeletonVariant } from '../Skeleton';
+export type StatCardSkeletonProps = {
+    variant: SkeletonVariant;
+    show: boolean;
+    height?: string;
+    width?: string;
+};
 export declare enum StatCardVariant {
     LINE = "line",
     PROGRESS_BAR = "progress",
@@ -59,4 +66,5 @@ export type StatCardProps = {
     valueFormatter?: AxisType;
     height?: string;
     direction?: StatCardDirection;
+    skeleton?: StatCardSkeletonProps;
 };

package/dist/components/Switch/Switch.d.ts

@@ -1,5 +1,5 @@
 import { SwitchProps } from './types';
 export declare const Switch: {
-    ({ id, checked, defaultChecked, onChange, disabled, required, error, size, label, subtext, slot, name, value, ...rest }: SwitchProps): import("react/jsx-runtime").JSX.Element;
+    ({ id, checked, defaultChecked, onChange, disabled, required, error, size, label, subtext, slot, name, value, maxLength, ...rest }: SwitchProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

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

@@ -13,10 +13,14 @@ export type SwitchProps = {
     error?: boolean;
     size?: SwitchSize;
     label?: string;
-    subtext?: ReactNode;
+    subtext?: string;
     slot?: ReactNode;
     name?: string;
     value?: string;
+    maxLength?: {
+        label?: number;
+        subtext?: number;
+    };
 };
 export type SwitchGroupProps = {
     id?: string;

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

@@ -28,16 +28,17 @@ export declare const createTabsFromSelection: <T extends {
 /**
  * Prepares items for SingleSelect dropdown (all tabs including scrolled-out)
  */
-export declare const prepareDropdownItems: (tabs: TabItem[]) => {
+export declare const prepareDropdownItems: (tabs: TabItem[], originalItems?: TabItem[]) => {
     items: {
         value: string;
         label: string;
     }[];
 }[];
 /**
- * Returns all tabs for display (no limiting - let horizontal scroll handle overflow)
+ * Returns tabs for display, limited by maxDisplayTabs if provided.
+ * When limited, shows tabs centered around the active tab to ensure it's always visible.
  */
-export declare const getDisplayTabs: (tabs: TabItem[]) => TabItem[];
+export declare const getDisplayTabs: (tabs: TabItem[], maxDisplayTabs?: number, activeTab?: string) => TabItem[];
 /**
  * Calculates the position and width for the tab indicator
  */
@@ -58,3 +59,17 @@ export declare const calculateTransitionDimensions: (oldTab: HTMLButtonElement,
     finalLeft: number;
     finalWidth: number;
 };
+/**
+ * Determines the actual tab value from a potentially concatenated value
+ * Concatenated tabs use underscore as separator, but we need to distinguish
+ * from single tabs that naturally have underscores in their values
+ */
+export declare const getActualTabValue: (processedValue: string, originalTabValues: Set<string>) => string;
+/**
+ * Checks if a concatenated tab value should trigger multiple close events
+ */
+export declare const isConcatenatedTab: (tabValue: string, originalTabValues: Set<string>) => boolean;
+/**
+ * Extracts original values from a concatenated tab value
+ */
+export declare const extractOriginalValues: (concatenatedValue: string) => string[];

package/dist/global-utils/GlobalUtils.d.ts

@@ -1,2 +1,7 @@
 export declare const toPixels: (value: string | number | undefined) => number;
 export declare const capitalizeFirstLetter: (string: string) => string;
+export declare const getTruncatedText: (text: string, limit?: number) => {
+    truncatedValue: string;
+    fullValue: string;
+    isTruncated: boolean;
+};