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

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

@@ -0,0 +1,3 @@
+import { CardProps } from './types';
+declare const Card: import('react').ForwardRefExoticComponent<CardProps & import('react').RefAttributes<HTMLDivElement>>;
+export default Card;

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

@@ -0,0 +1,25 @@
+import { default as React } from 'react';
+import { CardVariant, CardProps } from './types';
+import { CardTokenType } from './card.tokens';
+type CardComponentProps = {
+    props: Extract<CardProps, {
+        variant?: CardVariant.DEFAULT;
+    }>;
+    cardToken: CardTokenType;
+};
+type AlignedCardComponentProps = {
+    props: Extract<CardProps, {
+        variant: CardVariant.ALIGNED;
+    }>;
+    cardToken: CardTokenType;
+};
+type CustomCardComponentProps = {
+    props: Extract<CardProps, {
+        variant: CardVariant.CUSTOM;
+    }>;
+    cardToken: CardTokenType;
+};
+export declare const DefaultCard: React.FC<CardComponentProps>;
+export declare const AlignedCard: React.FC<AlignedCardComponentProps>;
+export declare const CustomCard: React.FC<CustomCardComponentProps>;
+export {};

package/dist/components/Card/card.tokens.d.ts

@@ -0,0 +1,87 @@
+import { CSSObject } from 'styled-components';
+import { CardAlignment } from './types';
+import { FoundationTokenType } from '../../tokens/theme.token';
+import { BreakpointType } from '../../breakpoints/breakPoints';
+export type CardState = 'default' | 'hover';
+export type CardTokenType = {
+    maxWidth: CSSObject['maxWidth'];
+    borderRadius: CSSObject['borderRadius'];
+    boxShadow: CSSObject['boxShadow'];
+    padding: CSSObject['padding'];
+    border: CSSObject['border'];
+    backgroundColor: CSSObject['backgroundColor'];
+    header: {
+        backgroundColor: CSSObject['backgroundColor'];
+        padding: CSSObject['padding'];
+        borderBottom: CSSObject['borderBottom'];
+        borderRadius: CSSObject['borderRadius'];
+        title: {
+            fontSize: CSSObject['fontSize'];
+            fontWeight: CSSObject['fontWeight'];
+            color: CSSObject['color'];
+        };
+        tag: {
+            gap: CSSObject['gap'];
+        };
+        subHeader: {
+            fontSize: CSSObject['fontSize'];
+            fontWeight: CSSObject['fontWeight'];
+            color: CSSObject['color'];
+        };
+    };
+    body: {
+        padding: CSSObject['padding'];
+        title: {
+            fontSize: CSSObject['fontSize'];
+            fontWeight: CSSObject['fontWeight'];
+            color: CSSObject['color'];
+        };
+        content: {
+            fontSize: CSSObject['fontSize'];
+            color: CSSObject['color'];
+        };
+    };
+    spacing: {
+        header: {
+            subHeader: {
+                marginTop: CSSObject['marginTop'];
+            };
+        };
+        body: {
+            slot1: {
+                marginTop: CSSObject['marginTop'];
+            };
+            title: {
+                marginTop: CSSObject['marginTop'];
+            };
+            content: {
+                marginTop: CSSObject['marginTop'];
+            };
+            slot2: {
+                marginTop: CSSObject['marginTop'];
+            };
+        };
+        action: {
+            inline: {
+                marginTop: CSSObject['marginTop'];
+            };
+            regular: {
+                marginTop: CSSObject['marginTop'];
+            };
+        };
+        headerSlot: {
+            gap: CSSObject['gap'];
+        };
+    };
+    alignment: {
+        [key in CardAlignment]: {
+            padding: CSSObject['padding'];
+            gap: CSSObject['gap'];
+            minHeight?: CSSObject['minHeight'];
+        };
+    };
+};
+export type ResponsiveCardTokens = {
+    [key in keyof BreakpointType]: CardTokenType;
+};
+export declare const getCardTokens: (foundationToken: FoundationTokenType) => ResponsiveCardTokens;

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

@@ -0,0 +1,2 @@
+export { default as Card } from './Card';
+export * from './types';

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

@@ -0,0 +1,46 @@
+import { ReactNode } from 'react';
+import { ButtonV2Props } from '../Button/types';
+export declare enum CardVariant {
+    DEFAULT = "default",
+    ALIGNED = "aligned",
+    CUSTOM = "custom"
+}
+export declare enum CardAlignment {
+    VERTICAL = "vertical",
+    HORIZONTAL = "horizontal"
+}
+export type DefaultCardProps = {
+    variant?: CardVariant.DEFAULT;
+    headerSlot1?: ReactNode;
+    headerTitle?: string;
+    headerTag?: ReactNode;
+    headerSlot2?: ReactNode;
+    subHeader?: string;
+    bodySlot1?: ReactNode;
+    bodyTitle?: string;
+    content?: ReactNode;
+    bodySlot2?: ReactNode;
+    actionButton?: ButtonV2Props;
+};
+export type AlignedCardProps = {
+    variant: CardVariant.ALIGNED;
+    alignment: CardAlignment;
+    centerAlign?: boolean;
+    cardSlot?: ReactNode;
+    headerTitle?: string;
+    headerTag?: ReactNode;
+    headerSlot2?: ReactNode;
+    subHeader?: string;
+    bodySlot1?: ReactNode;
+    bodyTitle?: string;
+    content?: ReactNode;
+    actionButton?: ButtonV2Props;
+};
+export type CustomCardProps = {
+    variant: CardVariant.CUSTOM;
+    children: ReactNode;
+};
+export type CardProps = {
+    className?: string;
+    maxWidth?: string;
+} & (DefaultCardProps | AlignedCardProps | CustomCardProps);

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

@@ -1,8 +1,9 @@
-import { NewNestedDataPoint, FlattenedDataPoint, AxisType } from './types';
+import { NewNestedDataPoint, FlattenedDataPoint, AxisType, XAxisConfig } 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 createStableSmartFormatter: (xAxisConfig: XAxisConfig, flattenedData: FlattenedDataPoint[]) => ((value: string | number) => string) | undefined;
 export declare const getAxisFormatter: (axisType: AxisType, timeZone?: string, hour12?: boolean) => ((value: string | number) => string);

package/dist/components/Charts/chart.tokens.d.ts

@@ -39,12 +39,7 @@ export type ChartTokensType = {
         minHeight: CSSObject['minHeight'];
     };
     content: {
-        padding: {
-            [key in ChartSize]: CSSObject['padding'];
-        };
-        paddingX: {
-            [key in ChartSize]: CSSObject['padding'];
-        };
+        padding: CSSObject['padding'];
         gap: {
             [key in ChartSize]: CSSObject['gap'];
         };

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, }: RenderChartProps) => import("react/jsx-runtime").JSX.Element;
+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;

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

@@ -1,6 +1,7 @@
 import { ReactNode } from 'react';
 import { TooltipProps } from 'recharts';
 import { NameType, ValueType } from 'recharts/types/component/DefaultTooltipContent';
+import { ButtonV2Props } from '../Button';
 export type DataPoint = {
     primary: {
         label: string;
@@ -45,6 +46,12 @@ export type TickProps = {
     };
     [key: string]: unknown;
 };
+export type NoDataProps = {
+    title?: string;
+    subtitle?: string;
+    slot?: ReactNode;
+    button?: ButtonV2Props;
+};
 export type AxisConfig = {
     label?: string;
     showLabel?: boolean;
@@ -84,6 +91,7 @@ export type RenderChartProps = {
     barsize?: number;
     xAxis?: XAxisConfig;
     yAxis?: YAxisConfig;
+    noData?: NoDataProps;
 };
 export type CoreChartProps = {
     chartType?: ChartType;
@@ -114,6 +122,7 @@ export type ChartsProps = {
     barsize?: number;
     xAxis?: XAxisConfig;
     yAxis?: YAxisConfig;
+    noData?: NoDataProps;
 };
 export type FlattenedDataPoint = {
     name: string;

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

@@ -1,5 +1,5 @@
 import { ColumnManagerProps } from './types';
 export declare const ColumnManager: {
-    <T extends Record<string, unknown>>({ columns, visibleColumns, onColumnChange, }: ColumnManagerProps<T>): import("react/jsx-runtime").JSX.Element;
+    <T extends Record<string, unknown>>({ columns, visibleColumns, onColumnChange, maxSelections, alwaysSelectedColumns, }: ColumnManagerProps<T>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

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

@@ -1,7 +1,7 @@
 import { default as React } from 'react';
 import { ColumnDefinition } from '../types';
 import { TableTokenType } from '../dataTable.tokens';
-import { SortHandlers, FilterHandlers, FilterState, ColumnFilterHandler } from './handlers';
+import { SortHandlers, FilterHandlers, FilterState, ColumnFilterHandler, SortState } from './handlers';
 type FilterComponentsProps = {
     column: ColumnDefinition<Record<string, unknown>>;
     data?: Record<string, unknown>[];
@@ -9,6 +9,7 @@ type FilterComponentsProps = {
     sortHandlers: SortHandlers;
     filterHandlers: FilterHandlers;
     filterState: FilterState;
+    sortState: SortState;
     onColumnFilter?: ColumnFilterHandler;
     onPopoverClose?: () => void;
 };
@@ -16,6 +17,7 @@ export declare const SortOptions: React.FC<{
     fieldKey: string;
     tableToken: TableTokenType;
     sortHandlers: SortHandlers;
+    sortState: SortState;
 }>;
 export declare const DropdownSearchSection: React.FC<{
     column: ColumnDefinition<Record<string, unknown>>;

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

@@ -1,7 +1,7 @@
 import { default as React } from 'react';
 import { ColumnDefinition } from '../types';
 import { TableTokenType } from '../dataTable.tokens';
-import { SortHandlers, FilterHandlers, FilterState, ColumnFilterHandler } from './handlers';
+import { SortHandlers, FilterHandlers, FilterState, ColumnFilterHandler, SortState } from './handlers';
 type MobileFilterDrawerProps = {
     column: ColumnDefinition<Record<string, unknown>>;
     data?: Record<string, unknown>[];
@@ -9,6 +9,7 @@ type MobileFilterDrawerProps = {
     sortHandlers: SortHandlers;
     filterHandlers: FilterHandlers;
     filterState: FilterState;
+    sortState: SortState;
     onColumnFilter?: ColumnFilterHandler;
     onPopoverClose?: () => void;
 };

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

@@ -7,6 +7,8 @@ export type TableHeaderProps<T extends Record<string, unknown>> = {
     selectAll: boolean | 'indeterminate';
     enableInlineEdit?: boolean;
     enableColumnManager?: boolean;
+    columnManagerMaxSelections?: number;
+    columnManagerAlwaysSelected?: string[];
     enableRowExpansion?: boolean;
     enableRowSelection?: boolean;
     rowActions?: RowActionsConfig<T>;

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

@@ -85,6 +85,8 @@ export type ColumnManagerProps<T extends Record<string, unknown>> = {
     columns: ColumnDefinition<T>[];
     visibleColumns: ColumnDefinition<T>[];
     onColumnChange: (columns: ColumnDefinition<T>[]) => void;
+    maxSelections?: number;
+    alwaysSelectedColumns?: string[];
 };
 export type AdvancedFilterProps = {
     filters: unknown[];
@@ -219,6 +221,8 @@ export type DataTableProps<T extends Record<string, unknown>> = {
     onAdvancedFiltersChange?: (filters: unknown[]) => void;
     columnFreeze?: number;
     enableColumnManager?: boolean;
+    columnManagerMaxSelections?: number;
+    columnManagerAlwaysSelected?: (keyof T)[];
     pagination?: PaginationConfig;
     serverSidePagination?: boolean;
     onPageChange?: (page: number) => void;

package/dist/components/Inputs/SearchInput/searchInput.tokens.d.ts

@@ -35,6 +35,10 @@ export type SearchInputTokensType = {
     };
     outline: CSSObject['outline'];
     boxShadow: CSSObject['boxShadow'];
+    color: CSSObject['color'];
+    fontSize: CSSObject['fontSize'];
+    fontWeight: CSSObject['fontWeight'];
+    placeholderColor: CSSObject['color'];
 };
 declare const searchInputTokens: Readonly<SearchInputTokensType>;
 export declare const getSearchInputTokens: (foundationTokens: FoundationTokenType) => SearchInputTokensType;

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

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

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, customTrigger, useDrawerOnMobile, minWidth, maxWidth, maxHeight, alignment, side, sideOffset, alignOffset, inline, onBlur, onFocus, error, errorMessage, showActionButtons, primaryAction, secondaryAction, showItemDividers, showHeaderBorder, }: 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, minWidth, maxWidth, maxHeight, alignment, side, sideOffset, alignOffset, inline, onBlur, onFocus, error, errorMessage, showActionButtons, primaryAction, secondaryAction, showItemDividers, showHeaderBorder, }: MultiSelectProps) => import("react/jsx-runtime").JSX.Element;
 export default MultiSelect;

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

@@ -1,3 +1,3 @@
 import { MultiSelectMenuProps } from './types';
-declare const MultiSelectMenu: ({ items, selected, onSelect, trigger, minWidth, maxWidth, maxHeight, disabled, enableSearch, searchPlaceholder, enableSelectAll, selectAllText, onSelectAll, alignment, side, sideOffset, alignOffset, open, onOpenChange, showActionButtons, primaryAction, secondaryAction, }: MultiSelectMenuProps) => import("react/jsx-runtime").JSX.Element;
+declare const MultiSelectMenu: ({ items, selected, onSelect, trigger, minWidth, maxWidth, maxHeight, disabled, enableSearch, searchPlaceholder, enableSelectAll, selectAllText, maxSelections, onSelectAll, alignment, side, sideOffset, alignOffset, open, onOpenChange, showActionButtons, primaryAction, secondaryAction, }: MultiSelectMenuProps) => import("react/jsx-runtime").JSX.Element;
 export default MultiSelectMenu;

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

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

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

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

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

@@ -33,6 +33,7 @@ export type MultiSelectMenuItemType = {
     slot3?: React.ReactNode;
     slot4?: React.ReactNode;
     disabled?: boolean;
+    alwaysSelected?: boolean;
     onClick?: () => void;
     subMenu?: MultiSelectMenuItemType[];
     tooltip?: string | React.ReactNode;
@@ -72,6 +73,7 @@ export type MultiSelectProps = {
     searchPlaceholder?: string;
     enableSelectAll?: boolean;
     selectAllText?: string;
+    maxSelections?: number;
     customTrigger?: React.ReactNode;
     useDrawerOnMobile?: boolean;
     minWidth?: number;
@@ -116,6 +118,7 @@ export type MultiSelectMenuProps = {
     enableSelectAll?: boolean;
     selectAllText?: string;
     onSelectAll?: (selectAll: boolean) => void;
+    maxSelections?: number;
     alignment?: MultiSelectMenuAlignment;
     side?: MultiSelectMenuSide;
     sideOffset?: number;

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

@@ -15,6 +15,7 @@ type PrimitiveInputProps = StateStyles & {
     fontSize?: CSSObject['fontSize'];
     fontWeight?: CSSObject['fontWeight'];
     lineHeight?: CSSObject['lineHeight'];
+    placeholderColor?: CSSObject['color'];
     position?: CSSObject['position'];
     inset?: CSSObject['inset'];
     top?: CSSObject['top'];

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

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

package/dist/context/ThemeContext.d.ts

@@ -30,6 +30,7 @@ import { BreakpointType } from '../breakpoints/breakPoints';
 import { ResponsiveSingleSelectTokens } from '../components/SingleSelect/singleSelect.tokens';
 import { ResponsiveChartTokens } from '../components/Charts/chart.tokens';
 import { ResponsiveSnackbarTokens } from '../components/Snackbar/snackbar.tokens';
+import { ResponsiveCardTokens } from '../components/Card/card.tokens';
 export type ComponentTokenType = {
     TAGS?: ResponsiveTagTokens;
     SEARCH_INPUT?: SearchInputTokensType;
@@ -61,6 +62,7 @@ export type ComponentTokenType = {
     DRAWER?: DrawerTokensType;
     CHARTS?: ResponsiveChartTokens;
     SNACKBAR?: ResponsiveSnackbarTokens;
+    CARD?: ResponsiveCardTokens;
 };
 type ThemeContextType = {
     foundationTokens: ThemeType;

package/dist/context/useComponentToken.d.ts

@@ -29,4 +29,5 @@ import { DrawerTokensType } from '../components/Drawer/drawer.tokens';
 import { ResponsiveSingleSelectTokens } from '../components/SingleSelect/singleSelect.tokens';
 import { ResponsiveChartTokens } from '../components/Charts/chart.tokens';
 import { ResponsiveSnackbarTokens } from '../components/Snackbar/snackbar.tokens';
-export declare const useComponentToken: (component: keyof ComponentTokenType) => SearchInputTokensType | ResponsiveTagTokens | ResponsiveTextAreaTokens | ResponsiveTextInputTokens | ResponsiveNumberInputTokens | ResponsiveAlertTokens | ResponsiveRadioTokens | ResponsiveOTPInputTokens | ResponsiveUnitInputTokens | MultiValueInputTokensType | ResponsiveSwitchTokens | ResponsiveCheckboxTokens | ResponsiveTabsTokens | ResponsiveTooltipTokens | ResponsiveDropdownInputTokens | ResponsiveButtonTokens | ModalTokensType | ResponsiveBreadcrumbTokens | PopoverTokenType | ResponsiveMenuTokensType | ResponsiveMultiSelectTokens | ResponsiveSingleSelectTokens | ResponsiveTableTokens | ResponsiveCalendarTokens | ResponsiveAccordionTokens | ResponsiveStatCardTokens | ProgressBarTokenType | DrawerTokensType | ResponsiveChartTokens | ResponsiveSnackbarTokens;
+import { ResponsiveCardTokens } from '../components/Card/card.tokens';
+export declare const useComponentToken: (component: keyof ComponentTokenType) => SearchInputTokensType | ResponsiveTagTokens | ResponsiveTextAreaTokens | ResponsiveTextInputTokens | ResponsiveNumberInputTokens | ResponsiveAlertTokens | ResponsiveRadioTokens | ResponsiveOTPInputTokens | ResponsiveUnitInputTokens | MultiValueInputTokensType | ResponsiveSwitchTokens | ResponsiveCheckboxTokens | ResponsiveTabsTokens | ResponsiveTooltipTokens | ResponsiveDropdownInputTokens | ResponsiveButtonTokens | ModalTokensType | ResponsiveBreadcrumbTokens | PopoverTokenType | ResponsiveMenuTokensType | ResponsiveMultiSelectTokens | ResponsiveSingleSelectTokens | ResponsiveTableTokens | ResponsiveCalendarTokens | ResponsiveAccordionTokens | ResponsiveStatCardTokens | ProgressBarTokenType | DrawerTokensType | ResponsiveChartTokens | ResponsiveSnackbarTokens | ResponsiveCardTokens;

package/dist/main.d.ts

@@ -19,6 +19,7 @@ export * from './components/Snackbar';
 export * from './components/Charts';
 export * from './components/DateRangePicker';
 export * from './components/StatCard';
+export * from './components/Card';
 export * from './components/Inputs';
 export * from './components/Menu';
 export * from './components/DataTable';