@juspay/blend-design-system 0.0.14-beta → 0.0.14

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

@@ -1,5 +1,8 @@
-import { NewNestedDataPoint, FlattenedDataPoint } from './types';
+import { NewNestedDataPoint, FlattenedDataPoint, AxisType } from './types';
 export declare function transformNestedData(data: NewNestedDataPoint[], selectedKeys?: string[]): FlattenedDataPoint[];
 export declare function lightenHexColor(hex: string, amount?: number): string;
 export declare const formatNumber: (value: number | string) => string;
 export declare const capitaliseCamelCase: (text: string) => string;
+export declare const createSmartDateTimeFormatter: () => ((value: string | number) => string);
+export declare const getAxisFormatterWithConfig: (axisType: AxisType, dateOnly?: boolean, smart?: boolean) => ((value: string | number) => string);
+export declare const getAxisFormatter: (axisType: AxisType) => ((value: string | number) => string);

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

@@ -1,2 +1,2 @@
 import { CustomTooltipProps } from './types';
-export declare const CustomTooltip: ({ active, payload, label, hoveredKey, originalData, setHoveredKey, chartType, selectedKeys, }: CustomTooltipProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const CustomTooltip: ({ active, payload, label, hoveredKey, originalData, setHoveredKey, chartType, selectedKeys, xAxis, yAxis, }: CustomTooltipProps) => import("react/jsx-runtime").JSX.Element | null;

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

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

@@ -24,6 +24,40 @@ export declare enum LegendsChangeType {
     INCREASE = "increase",
     DECREASE = "decrease"
 }
+export declare enum AxisIntervalType {
+    PRESERVE_START = "preserveStart",
+    PRESERVE_END = "preserveEnd",
+    PRESERVE_START_END = "preserveStartEnd"
+}
+export declare enum AxisType {
+    DATE_TIME = "dateTime",
+    CURRENCY = "currency",
+    PERCENTAGE = "percentage",
+    NUMBER = "number"
+}
+export type TickProps = {
+    x?: number;
+    y?: number;
+    payload?: {
+        value: string | number;
+        index?: number;
+        coordinate?: number;
+    };
+    [key: string]: unknown;
+};
+export type AxisConfig = {
+    label?: string;
+    showLabel?: boolean;
+    interval?: number | AxisIntervalType;
+    show?: boolean;
+    type?: AxisType;
+    tickFormatter?: (value: string | number) => string;
+    customTick?: React.ComponentType<TickProps>;
+    dateOnly?: boolean;
+    smart?: boolean;
+};
+export type XAxisConfig = AxisConfig;
+export type YAxisConfig = AxisConfig;
 export type NewNestedDataPoint = {
     name: string;
     data: {
@@ -42,18 +76,17 @@ export type RenderChartProps = {
     lineKeys: string[];
     colors: string[];
     setHoveredKey: (key: string | null) => void;
-    xAxisLabel?: string;
-    yAxisLabel?: string;
     data: NewNestedDataPoint[];
     selectedKeys: string[];
     isSmallScreen?: boolean;
+    barsize?: number;
+    xAxis?: XAxisConfig;
+    yAxis?: YAxisConfig;
 };
 export type ChartsProps = {
     chartType?: ChartType;
     data: NewNestedDataPoint[];
     colors?: string[];
-    xAxisLabel?: string;
-    yAxisLabel?: string;
     slot1?: ReactNode;
     slot2?: ReactNode;
     slot3?: ReactNode;
@@ -61,6 +94,9 @@ export type ChartsProps = {
     chartHeaderSlot: ReactNode;
     stackedLegends?: boolean;
     stackedLegendsData?: StackedLegendsDataPoint[];
+    barsize?: number;
+    xAxis?: XAxisConfig;
+    yAxis?: YAxisConfig;
 };
 export type FlattenedDataPoint = {
     name: string;
@@ -99,4 +135,6 @@ export type CustomTooltipProps = TooltipProps<ValueType, NameType> & {
     setHoveredKey: (key: string) => void;
     chartType: ChartType;
     selectedKeys: string[];
+    xAxis?: XAxisConfig;
+    yAxis?: YAxisConfig;
 };

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

@@ -12,6 +12,8 @@ export declare const DrawerContent: React.ForwardRefExoticComponent<DrawerConten
     handle?: React.ReactNode;
     hasSnapPoints?: boolean;
     contentDriven?: boolean;
+    width?: string | number;
+    maxWidth?: string | number;
     mobileOffset?: {
         top?: string;
         bottom?: string;

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

@@ -1,3 +1,4 @@
+import { TooltipSide, TooltipAlign, TooltipSize } from '../Tooltip/types';
 export declare enum MultiSelectVariant {
     CONTAINER = "container",
     NO_CONTAINER = "no-container"
@@ -34,6 +35,16 @@ export type MultiSelectMenuItemType = {
     disabled?: boolean;
     onClick?: () => void;
     subMenu?: MultiSelectMenuItemType[];
+    tooltip?: string | React.ReactNode;
+    tooltipProps?: {
+        side?: TooltipSide;
+        align?: TooltipAlign;
+        size?: TooltipSize;
+        showArrow?: boolean;
+        delayDuration?: number;
+        offset?: number;
+    };
+    disableTruncation?: boolean;
 };
 export type MultiSelectMenuGroupType = {
     groupLabel?: string;

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

@@ -0,0 +1,3 @@
+export { default } from './index';
+export * from './index';
+export * from './types';

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

@@ -0,0 +1,5 @@
+import { SelectItemProps } from './types';
+declare const SelectItem: import('react').ForwardRefExoticComponent<SelectItemProps & import('react').RefAttributes<HTMLDivElement>>;
+export default SelectItem;
+export { SelectItemType } from './types';
+export type { SelectItemProps, BaseSelectItemType } from './types';

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

@@ -0,0 +1,37 @@
+import { ReactNode } from 'react';
+import { TooltipSide, TooltipAlign, TooltipSize } from '../../Tooltip/types';
+export declare enum SelectItemType {
+    SINGLE = "single",
+    MULTI = "multi"
+}
+export type BaseSelectItemType = {
+    label: string;
+    value: string;
+    checked?: boolean;
+    subLabel?: string;
+    slot1?: ReactNode;
+    slot2?: ReactNode;
+    slot3?: ReactNode;
+    slot4?: ReactNode;
+    disabled?: boolean;
+    onClick?: () => void;
+    subMenu?: BaseSelectItemType[];
+    tooltip?: string | ReactNode;
+    tooltipProps?: {
+        side?: TooltipSide;
+        align?: TooltipAlign;
+        size?: TooltipSize;
+        showArrow?: boolean;
+        delayDuration?: number;
+        offset?: number;
+    };
+    disableTruncation?: boolean;
+};
+export type SelectItemProps = {
+    item: BaseSelectItemType;
+    onSelect: (value: string) => void;
+    selected: string | string[];
+    type: SelectItemType;
+    showCheckmark?: boolean;
+    className?: string;
+};

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

@@ -0,0 +1,22 @@
+import { RefObject } from 'react';
+import { SelectItemType } from './types';
+export declare const checkIfTruncated: (element: HTMLElement | null) => boolean;
+export declare const useTruncationDetection: (ref: RefObject<HTMLElement>) => () => boolean;
+export declare const isItemSelected: (itemValue: string, selected: string | string[], type: SelectItemType) => boolean;
+export declare const getRightSlotConfig: (isSelected: boolean, type: SelectItemType, item: {
+    disabled?: boolean;
+}) => {
+    type: "checkbox";
+    props: {
+        disabled: boolean | undefined;
+        checked: boolean;
+        size?: undefined;
+    };
+} | {
+    type: "icon";
+    props: {
+        size: number;
+        disabled?: undefined;
+        checked?: undefined;
+    };
+} | null;

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

@@ -1,3 +1,4 @@
+import { TooltipSide, TooltipAlign, TooltipSize } from '../Tooltip/types';
 export declare enum SelectMenuAlignment {
     START = "start",
     CENTER = "center",
@@ -51,5 +52,15 @@ export type SelectMenuItemType = {
     disabled?: boolean;
     onClick?: () => void;
     subMenu?: SelectMenuItemType[];
+    tooltip?: string | React.ReactNode;
+    tooltipProps?: {
+        side?: TooltipSide;
+        align?: TooltipAlign;
+        size?: TooltipSize;
+        showArrow?: boolean;
+        delayDuration?: number;
+        offset?: number;
+    };
+    disableTruncation?: boolean;
 };
 export declare const dummyMenuItemsLong: SelectMenuGroupType[];

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

@@ -9,6 +9,7 @@ export type LeftPanelInfo = {
     items: LeftPanelItem[];
     selected: string;
     onSelect: (value: string) => void;
+    maxVisibleItems?: number;
 };
 export type SidebarProps = {
     children: ReactNode;

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

@@ -9,6 +9,7 @@ type SingleSelectMenuProps = {
     maxWidth?: number;
     maxHeight?: number;
     enableSearch?: boolean;
+    searchPlaceholder?: string;
     disabled?: boolean;
     alignment?: SelectMenuAlignment;
     side?: SelectMenuSide;
@@ -17,5 +18,5 @@ type SingleSelectMenuProps = {
     open: boolean;
     onOpenChange: (open: boolean) => void;
 };
-declare const SingleSelectMenu: ({ items, selected, onSelect, trigger, minWidth, maxWidth, maxHeight, enableSearch, disabled, alignment, side, sideOffset, alignOffset, open, onOpenChange, }: SingleSelectMenuProps) => import("react/jsx-runtime").JSX.Element;
+declare const SingleSelectMenu: ({ items, selected, onSelect, trigger, minWidth, maxWidth, maxHeight, enableSearch, searchPlaceholder, disabled, alignment, side, sideOffset, alignOffset, open, onOpenChange, }: SingleSelectMenuProps) => import("react/jsx-runtime").JSX.Element;
 export default SingleSelectMenu;

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

@@ -1,3 +1,4 @@
+import { TooltipSide, TooltipAlign, TooltipSize } from '../Tooltip/types';
 export declare enum SelectMenuAlignment {
     START = "start",
     CENTER = "center",
@@ -51,6 +52,16 @@ export type SelectMenuItemType = {
     disabled?: boolean;
     onClick?: () => void;
     subMenu?: SelectMenuItemType[];
+    tooltip?: string | React.ReactNode;
+    tooltipProps?: {
+        side?: TooltipSide;
+        align?: TooltipAlign;
+        size?: TooltipSize;
+        showArrow?: boolean;
+        delayDuration?: number;
+        offset?: number;
+    };
+    disableTruncation?: boolean;
 };
 export type SingleSelectProps = {
     label?: string;

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

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

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
 import { SingleSelectProps } from '../SingleSelect';
+import { AxisType } from '../Charts/types';
 export declare enum StatCardVariant {
     LINE = "line",
     PROGRESS_BAR = "progress",
@@ -19,6 +20,12 @@ export type StatCardChange = {
     valueType: ChangeType;
     tooltip?: ReactNode;
 };
+export type StatCardAxisConfig = {
+    type?: AxisType;
+    tickFormatter?: (value: string | number) => string;
+    dateOnly?: boolean;
+    smart?: boolean;
+};
 export type StatCardProps = {
     title: string;
     value: string | number;
@@ -33,4 +40,7 @@ export type StatCardProps = {
     helpIconText?: string;
     dropdownProps?: SingleSelectProps;
     maxWidth?: string;
+    xAxis?: StatCardAxisConfig;
+    yAxis?: StatCardAxisConfig;
+    valueFormatter?: AxisType;
 };