@juspay/blend-design-system 0.0.9 → 0.0.10-beta

package/dist/assets/main.css

@@ -1 +1 @@
-[data-vaul-drawer][data-vaul-drawer-direction=bottom]:after{display:none}.gradient-blur{position:absolute;z-index:2;top:0;right:0;bottom:0;left:0}.gradient-blur>div,.gradient-blur:before,.gradient-blur:after{position:absolute;top:0;right:0;bottom:0;left:0}.gradient-blur:before{content:"";z-index:30;-webkit-backdrop-filter:blur(.5px);backdrop-filter:blur(.5px);mask:linear-gradient(to top,rgba(0,0,0,0) 0%,rgba(0,0,0,1) 12.5%,rgba(0,0,0,1) 25%,rgba(0,0,0,0) 37.5%)}.gradient-blur>div:nth-of-type(1){z-index:32;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);mask:linear-gradient(to top,rgba(0,0,0,0) 12.5%,rgba(0,0,0,1) 25%,rgba(0,0,0,1) 37.5%,rgba(0,0,0,0) 50%)}.gradient-blur>div:nth-of-type(2){z-index:33;-webkit-backdrop-filter:blur(1.5px);backdrop-filter:blur(1.5px);mask:linear-gradient(to top,rgba(0,0,0,0) 25%,rgba(0,0,0,1) 37.5%,rgba(0,0,0,1) 50%,rgba(0,0,0,0) 62.5%)}.gradient-blur>div:nth-of-type(3){z-index:34;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);mask:linear-gradient(to top,rgba(0,0,0,0) 37.5%,rgba(0,0,0,1) 50%,rgba(0,0,0,1) 62.5%,rgba(0,0,0,0) 75%)}.gradient-blur>div:nth-of-type(4){z-index:35;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);mask:linear-gradient(to top,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 62.5%,rgba(0,0,0,1) 75%,rgba(0,0,0,0) 87.5%)}.gradient-blur>div:nth-of-type(5){z-index:36;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);mask:linear-gradient(to top,rgba(0,0,0,0) 62.5%,rgba(0,0,0,1) 75%,rgba(0,0,0,1) 87.5%,rgba(0,0,0,0) 100%)}.gradient-blur>div:nth-of-type(6){z-index:37;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);mask:linear-gradient(to top,rgba(0,0,0,0) 75%,rgba(0,0,0,1) 87.5%,rgba(0,0,0,1) 100%)}.gradient-blur:after{content:"";z-index:38;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);mask:linear-gradient(to top,rgba(0,0,0,0) 87.5%,rgba(0,0,0,1) 100%)}
+[data-vaul-drawer][data-vaul-drawer-direction=bottom]:after{display:none}

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

@@ -76,6 +76,8 @@ export type ChartHeaderProps = {
     onExitFullscreen?: () => void;
     isFullscreen?: boolean;
     isSmallScreen?: boolean;
+    isExpanded: boolean;
+    setIsExpanded: (isExpanded: boolean) => void;
 };
 export type ChartLegendsProps = {
     chartContainerRef: React.RefObject<HTMLDivElement>;

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

@@ -6,6 +6,7 @@ type CalendarGridProps = {
     allowSingleDateSelection?: boolean;
     disableFutureDates?: boolean;
     disablePastDates?: boolean;
+    showDateTimePicker?: boolean;
 };
 declare const CalendarGrid: import('react').ForwardRefExoticComponent<CalendarGridProps & import('react').RefAttributes<HTMLDivElement>>;
 export default CalendarGrid;

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

@@ -1,7 +1,10 @@
+import { default as React } from 'react';
 type TimeSelectorProps = {
     value: string;
     onChange: (time: string) => void;
     className?: string;
+    autoFocus?: boolean;
+    tabIndex?: number;
 };
-declare const TimeSelector: import('react').ForwardRefExoticComponent<TimeSelectorProps & import('react').RefAttributes<HTMLDivElement>>;
+declare const TimeSelector: React.ForwardRefExoticComponent<TimeSelectorProps & React.RefAttributes<HTMLDivElement>>;
 export default TimeSelector;

package/dist/components/DateRangePicker/dateRangePicker.tokens.d.ts

@@ -1,5 +1,6 @@
 import { CSSObject } from 'styled-components';
 import { FoundationTokenType } from '../../tokens/theme.token';
+import { BreakpointType } from '../../breakpoints/breakPoints';
 export type CalendarTokenType = {
     quickRange: {
         width: CSSObject['width'];
@@ -176,8 +177,12 @@ export type CalendarTokenType = {
                 gap: CSSObject['gap'];
                 label: {
                     color: CSSObject['color'];
-                    minWidth: CSSObject['minWidth'];
+                    width: CSSObject['width'];
+                    fontSize: CSSObject['fontSize'];
+                    fontWeight: CSSObject['fontWeight'];
                 };
+                fontSize: CSSObject['fontSize'];
+                fontWeight: CSSObject['fontWeight'];
             };
         };
         calendarGrid: {
@@ -197,6 +202,7 @@ export type CalendarTokenType = {
                 container: {
                     position: CSSObject['position'];
                     height: CSSObject['height'];
+                    marginBottom: CSSObject['marginBottom'];
                 };
             };
             week: {
@@ -204,6 +210,12 @@ export type CalendarTokenType = {
                     display: CSSObject['display'];
                     gridTemplateColumns: CSSObject['gridTemplateColumns'];
                     padding: CSSObject['padding'];
+                    gap: CSSObject['gap'];
+                };
+                container: {
+                    display: CSSObject['display'];
+                    flexDirection: CSSObject['flexDirection'];
+                    gap: CSSObject['gap'];
                 };
                 header: {
                     display: CSSObject['display'];
@@ -219,6 +231,9 @@ export type CalendarTokenType = {
                 };
                 dayName: {
                     padding: CSSObject['padding'];
+                    fontSize: CSSObject['fontSize'];
+                    fontWeight: CSSObject['fontWeight'];
+                    color: CSSObject['color'];
                 };
             };
             day: {
@@ -229,10 +244,17 @@ export type CalendarTokenType = {
                     position: CSSObject['position'];
                     fontWeight: CSSObject['fontWeight'];
                     boxSizing: CSSObject['boxSizing'];
-                    border: CSSObject['border'];
+                    outline: CSSObject['outline'];
+                    fontSize: CSSObject['fontSize'];
+                    lineHeight: CSSObject['lineHeight'];
+                    display: CSSObject['display'];
+                    alignItems: CSSObject['alignItems'];
+                    justifyContent: CSSObject['justifyContent'];
+                    width: CSSObject['width'];
+                    height: CSSObject['height'];
                 };
                 hover: {
-                    border: CSSObject['border'];
+                    outline: CSSObject['outline'];
                     borderRadius: CSSObject['borderRadius'];
                 };
                 empty: {
@@ -280,4 +302,7 @@ export type CalendarTokenType = {
         };
     };
 };
-export declare const getCalendarToken: (foundationToken: FoundationTokenType) => CalendarTokenType;
+export type ResponsiveCalendarTokens = {
+    [key in keyof BreakpointType]: CalendarTokenType;
+};
+export declare const getCalendarToken: (foundationToken: FoundationTokenType) => ResponsiveCalendarTokens;

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

@@ -23,7 +23,7 @@ export type DateRange = {
 export type DateRangePickerProps = {
     value?: DateRange;
     onChange?: (range: DateRange) => void;
-    showTimePicker?: boolean;
+    showDateTimePicker?: boolean;
     showPresets?: boolean;
     placeholder?: string;
     isDisabled?: boolean;

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

@@ -1,6 +1,7 @@
 import { TextInputSize } from '../TextInput/types';
 import { SelectMenuGroupType } from '../../Select/types';
 export declare enum DropdownInputSize {
+    SM = "sm",
     MD = "md",
     LG = "lg"
 }

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

@@ -1,5 +1,6 @@
 import { TextInputSize } from '../TextInput/types';
 export declare enum MultiValueInputSize {
+    SM = "sm",
     MD = "md",
     LG = "lg"
 }

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

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

package/dist/components/Popover/Popover.d.ts

@@ -1,6 +1,6 @@
 import { PopoverProps } from './types';
 declare const Popover: {
-    ({ heading, description, trigger, children, showCloseButton, onOpenChange, open, asModal, primaryAction, secondaryAction, sideOffset, side, align, alignOffset, width, minWidth, maxWidth, height, minHeight, maxHeight, zIndex, size, onClose, }: PopoverProps): import("react/jsx-runtime").JSX.Element;
+    ({ heading, description, trigger, children, showCloseButton, onOpenChange, open, asModal, primaryAction, secondaryAction, sideOffset, side, align, alignOffset, width, minWidth, maxWidth, height, minHeight, maxHeight, zIndex, size, onClose, shadow, }: PopoverProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default Popover;

package/dist/components/Popover/popover.tokens.d.ts

@@ -4,7 +4,7 @@ import { FoundationTokenType } from '../../tokens/theme.token';
 export type PopoverTokenType = {
     background: CSSObject['backgroundColor'];
     border: CSSObject['border'];
-    shadow: CSSObject['boxShadow'];
+    shadow: FoundationTokenType['shadows'];
     gap: CSSObject['gap'];
     zIndex: CSSObject['zIndex'];
     borderRadius: CSSObject['borderRadius'];

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

@@ -28,4 +28,5 @@ export type PopoverProps = {
     zIndex?: number;
     size?: PopoverSize;
     onClose?: () => void;
+    shadow?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
 };

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

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

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

@@ -1,44 +1,20 @@
 import { ReactNode } from 'react';
 import { DirectoryData } from '../Directory/types';
-export type SidebarNavItem = {
-    label: string;
-    leftSlot?: ReactNode;
-    rightSlot?: ReactNode;
-    onClick?: () => void;
-};
-export type SidebarNavSection = {
-    label?: string;
-    navItems: SidebarNavItem[];
-};
-export type MerchantData = {
-    label: string;
-    sections: SidebarNavSection[];
-};
-export type TenantData = {
+export type LeftPanelItem = {
     label: string;
     icon: ReactNode;
-    merchantData: MerchantData[];
+    value?: string;
 };
-type TenantInfo = {
-    label: string;
-    icon: ReactNode;
-    id?: string;
-};
-type MerchantInfo = {
-    label: string;
-    icon: ReactNode;
-    id?: string;
+export type LeftPanelInfo = {
+    items: LeftPanelItem[];
+    selected: string;
+    onSelect: (value: string) => void;
 };
 export type SidebarProps = {
-    tenants: TenantInfo[];
-    merchants: MerchantInfo[];
     children: ReactNode;
     data: DirectoryData[];
+    leftPanel?: LeftPanelInfo;
     topbar: ReactNode;
-    activeTenant?: string;
-    setActiveTenant?: (tenant: string) => void;
-    activeMerchant?: string;
-    setActiveMerchant?: (merchant: string) => void;
     footer?: ReactNode;
+    sidebarTopSlot?: ReactNode;
 };
-export {};

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

@@ -23,6 +23,9 @@ export type SingleSelectTokensType = {
             container: {
                 [key in TriggerStates]: CSSObject['backgroundColor'];
             };
+            'no-container': {
+                [key in TriggerStates]: CSSObject['backgroundColor'];
+            };
         };
         outline: {
             [key in SelectMenuVariant]: {

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

@@ -53,7 +53,7 @@ export type SelectMenuItemType = {
     subMenu?: SelectMenuItemType[];
 };
 export type SingleSelectProps = {
-    label: string;
+    label?: string;
     subLabel?: string;
     hintText?: string;
     required?: boolean;

package/dist/context/ThemeContext.d.ts

@@ -21,7 +21,7 @@ import { PopoverTokenType } from '../components/Popover/popover.tokens';
 import { ResponsiveMenuTokensType } from '../components/Menu/menu.tokens';
 import { ResponsiveMultiSelectTokens } from '../components/MultiSelect/multiSelect.tokens';
 import { TableTokenType } from '../components/DataTable/dataTable.tokens';
-import { CalendarTokenType } from '../components/DateRangePicker/dateRangePicker.tokens';
+import { ResponsiveCalendarTokens } from '../components/DateRangePicker/dateRangePicker.tokens';
 import { ResponsiveAccordionTokens } from '../components/Accordion/accordion.tokens';
 import { ResponsiveStatCardTokens } from '../components/StatCard/statcard.tokens';
 import { ProgressBarTokenType } from '../components/ProgressBar/progressbar.tokens';
@@ -54,7 +54,7 @@ export type ComponentTokenType = {
     MULTI_SELECT?: ResponsiveMultiSelectTokens;
     SINGLE_SELECT?: ResponsiveSingleSelectTokens;
     TABLE?: TableTokenType;
-    CALENDAR?: CalendarTokenType;
+    CALENDAR?: ResponsiveCalendarTokens;
     ACCORDION?: ResponsiveAccordionTokens;
     STAT_CARD?: ResponsiveStatCardTokens;
     PROGRESS_BAR?: ProgressBarTokenType;

package/dist/context/useComponentToken.d.ts

@@ -21,7 +21,7 @@ import { PopoverTokenType } from '../components/Popover/popover.tokens';
 import { ResponsiveMenuTokensType } from '../components/Menu/menu.tokens';
 import { ResponsiveMultiSelectTokens } from '../components/MultiSelect/multiSelect.tokens';
 import { TableTokenType } from '../components/DataTable/dataTable.tokens';
-import { CalendarTokenType } from '../components/DateRangePicker/dateRangePicker.tokens';
+import { ResponsiveCalendarTokens } from '../components/DateRangePicker/dateRangePicker.tokens';
 import { ResponsiveAccordionTokens } from '../components/Accordion/accordion.tokens';
 import { ResponsiveStatCardTokens } from '../components/StatCard/statcard.tokens';
 import { ProgressBarTokenType } from '../components/ProgressBar/progressbar.tokens';
@@ -29,4 +29,4 @@ 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 | OTPInputTokensType | ResponsiveUnitInputTokens | MultiValueInputTokensType | ResponsiveSwitchTokens | ResponsiveCheckboxTokens | ResponsiveTabsTokens | TooltipTokensType | ResponsiveDropdownInputTokens | ResponsiveButtonTokens | ModalTokensType | ResponsiveBreadcrumbTokens | PopoverTokenType | ResponsiveMenuTokensType | ResponsiveMultiSelectTokens | ResponsiveSingleSelectTokens | TableTokenType | CalendarTokenType | ResponsiveAccordionTokens | ResponsiveStatCardTokens | ProgressBarTokenType | DrawerTokensType | ResponsiveChartTokens | ResponsiveSnackbarTokens;
+export declare const useComponentToken: (component: keyof ComponentTokenType) => SearchInputTokensType | ResponsiveTagTokens | ResponsiveTextAreaTokens | ResponsiveTextInputTokens | ResponsiveNumberInputTokens | ResponsiveAlertTokens | ResponsiveRadioTokens | OTPInputTokensType | ResponsiveUnitInputTokens | MultiValueInputTokensType | ResponsiveSwitchTokens | ResponsiveCheckboxTokens | ResponsiveTabsTokens | TooltipTokensType | ResponsiveDropdownInputTokens | ResponsiveButtonTokens | ModalTokensType | ResponsiveBreadcrumbTokens | PopoverTokenType | ResponsiveMenuTokensType | ResponsiveMultiSelectTokens | ResponsiveSingleSelectTokens | TableTokenType | ResponsiveCalendarTokens | ResponsiveAccordionTokens | ResponsiveStatCardTokens | ProgressBarTokenType | DrawerTokensType | ResponsiveChartTokens | ResponsiveSnackbarTokens;