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

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

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+export interface ChartContainerProps {
+    children: React.ReactNode;
+}
+export declare const ChartContainer: React.FC<ChartContainerProps>;
+export default ChartContainer;

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

@@ -1,2 +1,3 @@
 import { ChartHeaderProps } from './types';
-export declare const ChartHeader: React.FC<ChartHeaderProps>;
+declare const ChartHeader: React.FC<ChartHeaderProps>;
+export default ChartHeader;

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

@@ -1,3 +1,4 @@
 import { default as React } from 'react';
 import { ChartLegendsProps } from './types';
-export declare const ChartLegends: React.NamedExoticComponent<ChartLegendsProps>;
+declare const _default: React.NamedExoticComponent<ChartLegendsProps>;
+export default _default;

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: (timeZone?: string, hour12?: boolean) => ((value: string | number) => string);
+export declare const getAxisFormatterWithConfig: (axisType: AxisType, dateOnly?: boolean, smart?: boolean, timeZone?: string, hour12?: boolean) => ((value: string | number) => string);
+export declare const getAxisFormatter: (axisType: AxisType, timeZone?: string, hour12?: boolean) => ((value: string | number) => string);

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

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

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

@@ -1,2 +1,6 @@
 export { default as Charts } from './Charts';
+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 * from './types';

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,42 @@ 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;
+    timeZone?: string;
+    hour12?: boolean;
+};
+export type XAxisConfig = AxisConfig;
+export type YAxisConfig = AxisConfig;
 export type NewNestedDataPoint = {
     name: string;
     data: {
@@ -42,18 +78,32 @@ 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 CoreChartProps = {
+    chartType?: ChartType;
+    data: NewNestedDataPoint[];
+    colors?: string[];
+    barsize?: number;
+    xAxis?: XAxisConfig;
+    yAxis?: YAxisConfig;
+    height?: number | string;
+    width?: number | string;
+    isSmallScreen?: boolean;
+    hoveredKey?: string | null;
+    onHoveredKeyChange?: (key: string | null) => void;
+    selectedKeys?: string[];
+    enableHover?: boolean;
 };
 export type ChartsProps = {
     chartType?: ChartType;
     data: NewNestedDataPoint[];
     colors?: string[];
-    xAxisLabel?: string;
-    yAxisLabel?: string;
     slot1?: ReactNode;
     slot2?: ReactNode;
     slot3?: ReactNode;
@@ -61,6 +111,9 @@ export type ChartsProps = {
     chartHeaderSlot: ReactNode;
     stackedLegends?: boolean;
     stackedLegendsData?: StackedLegendsDataPoint[];
+    barsize?: number;
+    xAxis?: XAxisConfig;
+    yAxis?: YAxisConfig;
 };
 export type FlattenedDataPoint = {
     name: string;
@@ -99,4 +152,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/Inputs/SearchInput/SearchInput.d.ts

@@ -1,3 +1,8 @@
-import { SearchInputProps } from './types';
-declare const SearchInput: ({ leftSlot, rightSlot, error, placeholder, value, onChange, name, ...rest }: SearchInputProps) => import("react/jsx-runtime").JSX.Element;
+declare const SearchInput: import('react').ForwardRefExoticComponent<{
+    leftSlot?: React.ReactNode;
+    rightSlot?: React.ReactNode;
+    error?: boolean;
+    value?: string;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+} & Omit<import('react').InputHTMLAttributes<HTMLInputElement>, "size" | "style" | "className"> & import('react').RefAttributes<HTMLInputElement>>;
 export default SearchInput;

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,14 @@ export type StatCardChange = {
     valueType: ChangeType;
     tooltip?: ReactNode;
 };
+export type StatCardAxisConfig = {
+    type?: AxisType;
+    tickFormatter?: (value: string | number) => string;
+    dateOnly?: boolean;
+    smart?: boolean;
+    timeZone?: string;
+    hour12?: boolean;
+};
 export type StatCardProps = {
     title: string;
     value: string | number;
@@ -33,4 +42,7 @@ export type StatCardProps = {
     helpIconText?: string;
     dropdownProps?: SingleSelectProps;
     maxWidth?: string;
+    xAxis?: StatCardAxisConfig;
+    yAxis?: StatCardAxisConfig;
+    valueFormatter?: AxisType;
 };