@juspay/blend-design-system 0.0.1 → 0.0.5-beta.1

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

@@ -0,0 +1,76 @@
+import { CSSObject } from 'styled-components';
+import { SelectMenuSize, SelectMenuVariant } from './types';
+import { FoundationTokenType } from '../../tokens/theme.token';
+import { BreakpointType } from '../../breakpoints/breakPoints';
+type TriggerStates = 'open' | 'closed' | 'hover' | 'focus';
+export type SingleSelectItemStates = 'default' | 'hover' | 'active' | 'focus' | 'focusVisible' | 'disabled' | 'selected';
+export type SingleSelectTokensType = {
+    trigger: {
+        height: CSSObject['height'];
+        paddingX: {
+            [key in SelectMenuSize]: CSSObject['padding'];
+        };
+        paddingY: {
+            [key in SelectMenuSize]: CSSObject['padding'];
+        };
+        borderRadius: {
+            [key in SelectMenuSize]: CSSObject['borderRadius'];
+        };
+        boxShadow: {
+            [key in SelectMenuVariant]: CSSObject['boxShadow'];
+        };
+        backgroundColor: {
+            container: {
+                [key in TriggerStates]: CSSObject['backgroundColor'];
+            };
+        };
+        outline: {
+            [key in SelectMenuVariant]: {
+                [key in TriggerStates]: CSSObject['outline'];
+            };
+        };
+    };
+    dropdown: {
+        shadow: CSSObject['boxShadow'];
+        backgroundColor: CSSObject['backgroundColor'];
+        paddingTop: CSSObject['paddingTop'];
+        paddingBottom: CSSObject['paddingBottom'];
+        border: CSSObject['border'];
+        outline: CSSObject['outline'];
+        borderRadius: CSSObject['borderRadius'];
+        item: {
+            padding: CSSObject['padding'];
+            margin: CSSObject['margin'];
+            borderRadius: CSSObject['borderRadius'];
+            gap: CSSObject['gap'];
+            backgroundColor: {
+                [key in SingleSelectItemStates]: CSSObject['backgroundColor'];
+            };
+            label: {
+                fontSize: CSSObject['fontSize'];
+                fontWeight: CSSObject['fontWeight'];
+                color: {
+                    [key in SingleSelectItemStates]: CSSObject['color'];
+                };
+            };
+            subLabel: {
+                fontSize: CSSObject['fontSize'];
+                fontWeight: CSSObject['fontWeight'];
+                color: {
+                    [key in SingleSelectItemStates]: CSSObject['color'];
+                };
+            };
+        };
+        seperator: {
+            color: CSSObject['color'];
+            height: CSSObject['height'];
+            margin: CSSObject['margin'];
+        };
+    };
+};
+export type ResponsiveSingleSelectTokens = {
+    [key in keyof BreakpointType]: SingleSelectTokensType;
+};
+export declare const singleSelectTokens: SingleSelectTokensType;
+export declare const getSingleSelectTokens: (foundationToken: FoundationTokenType) => ResponsiveSingleSelectTokens;
+export {};

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

@@ -1,4 +1,57 @@
-import { SelectMenuAlignment, SelectMenuSide, SelectMenuGroupType, SelectMenuSize, SelectMenuVariant } from '../Select';
+export declare enum SelectMenuAlignment {
+    START = "start",
+    CENTER = "center",
+    END = "end"
+}
+export declare enum SelectMenuVariant {
+    CONTAINER = "container",
+    NO_CONTAINER = "no-container"
+}
+export declare enum SelectMenuSize {
+    SMALL = "sm",
+    MEDIUM = "md",
+    LARGE = "lg"
+}
+export declare enum SelectMenuSide {
+    TOP = "top",
+    LEFT = "left",
+    RIGHT = "right",
+    BOTTOM = "bottom"
+}
+export type SelectMenuGroupType = {
+    groupLabel?: string;
+    items: SelectMenuItemType[];
+    showSeparator?: boolean;
+};
+export type SelectMenuProps = {
+    trigger?: React.ReactNode;
+    items: SelectMenuGroupType[];
+    asModal?: boolean;
+    alignment?: SelectMenuAlignment;
+    side?: SelectMenuSide;
+    sideOffset?: number;
+    alignOffset?: number;
+    collisonBoundaryRef?: Element | null | Array<Element | null>;
+    maxHeight?: number;
+    selected?: string | string[];
+    onSelect?: (value: string | string[]) => void;
+    allowMultiSelect?: boolean;
+    enableSearch?: boolean;
+    onOpenChange?: (open: boolean) => void;
+};
+export type SelectMenuItemType = {
+    label: string;
+    value: string;
+    checked?: boolean;
+    subLabel?: string;
+    slot1?: React.ReactNode;
+    slot2?: React.ReactNode;
+    slot3?: React.ReactNode;
+    slot4?: React.ReactNode;
+    disabled?: boolean;
+    onClick?: () => void;
+    subMenu?: SelectMenuItemType[];
+};
 export type SingleSelectProps = {
     label: string;
     subLabel?: string;

package/dist/components/Tabs/tabs.token.d.ts

@@ -1,10 +1,13 @@
 import { CSSObject } from 'styled-components';
 import { ThemeType } from '../../tokens';
 import { TabsVariant, TabsSize } from './types';
+import { BreakpointType } from '../../breakpoints/breakPoints';
 export type TabsState = 'default' | 'hover' | 'active' | 'disabled';
 export type TabsTokensType = {
     gap: {
-        [key in TabsVariant]: CSSObject['gap'];
+        [key in TabsSize]: {
+            [key in TabsVariant]: CSSObject['gap'];
+        };
     };
     list: {
         padding: {
@@ -25,7 +28,9 @@ export type TabsTokensType = {
             [key in TabsSize]: CSSObject['height'];
         };
         padding: {
-            [key in TabsSize]: CSSObject['padding'];
+            [key in TabsVariant]: {
+                [key in TabsSize]: CSSObject['padding'];
+            };
         };
         fontSize: {
             [key in TabsSize]: CSSObject['fontSize'];
@@ -49,12 +54,16 @@ export type TabsTokensType = {
         borderRadius: {
             [key in TabsVariant]: CSSObject['borderRadius'];
         };
+        border: {
+            [key in TabsVariant]: CSSObject['border'];
+        };
     };
     underline: {
         height: CSSObject['height'];
         color: CSSObject['color'];
     };
 };
-export declare const getTabsTokens: (foundationToken: ThemeType) => TabsTokensType;
-declare const tabsTokens: TabsTokensType;
-export default tabsTokens;
+export type ResponsiveTabsTokens = {
+    [key in keyof BreakpointType]: TabsTokensType;
+};
+export declare const getTabsTokens: (foundationToken: ThemeType) => ResponsiveTabsTokens;

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

@@ -3,7 +3,8 @@ import * as TabsPrimitive from '@radix-ui/react-tabs';
 export declare enum TabsVariant {
     BOXED = "boxed",
     FLOATING = "floating",
-    UNDERLINE = "underline"
+    UNDERLINE = "underline",
+    PILLS = "pills"
 }
 export declare enum TabsSize {
     MD = "md",

package/dist/context/ThemeContext.d.ts

@@ -1,25 +1,25 @@
 import { ThemeType } from '../tokens';
 import { ResponsiveTagTokens } from '../components/Tags/tag.tokens';
 import { SearchInputTokensType } from '../components/Inputs/SearchInput/searchInput.tokens';
-import { TextAreaTokensType } from '../components/Inputs/TextArea/textarea.token';
+import { ResponsiveTextAreaTokens } from '../components/Inputs/TextArea/textarea.token';
 import { ResponsiveRadioTokens } from '../components/Radio/radio.token';
 import { ResponsiveSwitchTokens } from '../components/Switch/switch.token';
-import { TextInputTokensType } from '../components/Inputs/TextInput/textInput.tokens';
-import { NumberInputTokensType } from '../components/Inputs/NumberInput/numberInput.tokens';
+import { ResponsiveTextInputTokens } from '../components/Inputs/TextInput/textInput.tokens';
+import { ResponsiveNumberInputTokens } from '../components/Inputs/NumberInput/numberInput.tokens';
 import { ResponsiveAlertTokens } from '../components/Alert/alert.tokens';
 import { OTPInputTokensType } from '../components/Inputs/OTPInput/otpInput.tokens';
 import { TooltipTokensType } from '../components/Tooltip/tooltip.tokens';
-import { UnitInputTokensType } from '../components/Inputs/UnitInput/unitInput.tokens';
+import { ResponsiveUnitInputTokens } from '../components/Inputs/UnitInput/unitInput.tokens';
 import { MultiValueInputTokensType } from '../components/Inputs/MultiValueInput/multiValueInput.tokens';
-import { DropdownInputTokensType } from '../components/Inputs/DropdownInput/dropdownInput.tokens';
+import { ResponsiveDropdownInputTokens } from '../components/Inputs/DropdownInput/dropdownInput.tokens';
 import { ResponsiveCheckboxTokens } from '../components/Checkbox/checkbox.token';
-import { TabsTokensType } from '../components/Tabs/tabs.token';
+import { ResponsiveTabsTokens } from '../components/Tabs/tabs.token';
 import { ResponsiveButtonTokens } from '../components/Button/button.tokens';
 import { ModalTokensType } from '../components/Modal/modal.tokens';
 import { ResponsiveBreadcrumbTokens } from '../components/Breadcrumb/breadcrumb.tokens';
 import { PopoverTokenType } from '../components/Popover/popover.tokens';
 import { ResponsiveMenuTokensType } from '../components/Menu/menu.tokens';
-import { MultiSelectTokensType } from '../components/MultiSelect/multiSelect.tokens';
+import { ResponsiveMultiSelectTokens } from '../components/MultiSelect/multiSelect.tokens';
 import { TableTokenType } from '../components/DataTable/dataTable.tokens';
 import { CalendarTokenType } from '../components/DateRangePicker/dateRangePicker.tokens';
 import { AccordionTokenType } from '../components/Accordion/accordion.tokens';
@@ -27,28 +27,30 @@ import { StatCardTokenType } from '../components/StatCard/statcard.tokens';
 import { ProgressBarTokenType } from '../components/ProgressBar/progressbar.tokens';
 import { DrawerTokensType } from '../components/Drawer/drawer.tokens';
 import { BreakpointType } from '../breakpoints/breakPoints';
+import { ResponsiveSingleSelectTokens } from '../components/SingleSelect/singleSelect.tokens';
 export type ComponentTokenType = {
     TAGS?: ResponsiveTagTokens;
     SEARCH_INPUT?: SearchInputTokensType;
-    TEXT_AREA?: TextAreaTokensType;
+    TEXT_AREA?: ResponsiveTextAreaTokens;
     RADIO?: ResponsiveRadioTokens;
     SWITCH?: ResponsiveSwitchTokens;
-    TEXT_INPUT?: TextInputTokensType;
-    NUMBER_INPUT?: NumberInputTokensType;
+    TEXT_INPUT?: ResponsiveTextInputTokens;
+    NUMBER_INPUT?: ResponsiveNumberInputTokens;
     ALERT?: ResponsiveAlertTokens;
     OTP_INPUT?: OTPInputTokensType;
     TOOLTIP?: TooltipTokensType;
-    UNIT_INPUT?: UnitInputTokensType;
+    UNIT_INPUT?: ResponsiveUnitInputTokens;
     MULTI_VALUE_INPUT?: MultiValueInputTokensType;
-    DROPDOWN_INPUT?: DropdownInputTokensType;
+    DROPDOWN_INPUT?: ResponsiveDropdownInputTokens;
     CHECKBOX?: ResponsiveCheckboxTokens;
-    TABS?: TabsTokensType;
+    TABS?: ResponsiveTabsTokens;
     BUTTON?: ResponsiveButtonTokens;
     MODAL?: ModalTokensType;
     BREADCRUMB?: ResponsiveBreadcrumbTokens;
     POPOVER?: PopoverTokenType;
     MENU?: ResponsiveMenuTokensType;
-    MULTI_SELECT?: MultiSelectTokensType;
+    MULTI_SELECT?: ResponsiveMultiSelectTokens;
+    SINGLE_SELECT?: ResponsiveSingleSelectTokens;
     TABLE?: TableTokenType;
     CALENDAR?: CalendarTokenType;
     ACCORDION?: AccordionTokenType;

package/dist/context/useComponentToken.d.ts

@@ -1,29 +1,30 @@
 import { SearchInputTokensType } from '../components/Inputs/SearchInput/searchInput.tokens';
-import { TextAreaTokensType } from '../components/Inputs/TextArea/textarea.token';
+import { ResponsiveTextAreaTokens } from '../components/Inputs/TextArea/textarea.token';
 import { ResponsiveTagTokens } from '../components/Tags/tag.tokens';
 import { ResponsiveRadioTokens } from '../components/Radio/radio.token';
 import { ResponsiveSwitchTokens } from '../components/Switch/switch.token';
 import { ResponsiveCheckboxTokens } from '../components/Checkbox/checkbox.token';
-import { TabsTokensType } from '../components/Tabs/tabs.token';
+import { ResponsiveTabsTokens } from '../components/Tabs/tabs.token';
 import { ComponentTokenType } from './ThemeContext';
-import { TextInputTokensType } from '../components/Inputs/TextInput/textInput.tokens';
-import { NumberInputTokensType } from '../components/Inputs/NumberInput/numberInput.tokens';
+import { ResponsiveTextInputTokens } from '../components/Inputs/TextInput/textInput.tokens';
+import { ResponsiveNumberInputTokens } from '../components/Inputs/NumberInput/numberInput.tokens';
 import { ResponsiveAlertTokens } from '../components/Alert/alert.tokens';
 import { OTPInputTokensType } from '../components/Inputs/OTPInput/otpInput.tokens';
 import { TooltipTokensType } from '../components/Tooltip/tooltip.tokens';
-import { UnitInputTokensType } from '../components/Inputs/UnitInput/unitInput.tokens';
+import { ResponsiveUnitInputTokens } from '../components/Inputs/UnitInput/unitInput.tokens';
 import { MultiValueInputTokensType } from '../components/Inputs/MultiValueInput/multiValueInput.tokens';
-import { DropdownInputTokensType } from '../components/Inputs/DropdownInput/dropdownInput.tokens';
+import { ResponsiveDropdownInputTokens } from '../components/Inputs/DropdownInput/dropdownInput.tokens';
 import { ResponsiveButtonTokens } from '../components/Button/button.tokens';
 import { ModalTokensType } from '../components/Modal/modal.tokens';
 import { ResponsiveBreadcrumbTokens } from '../components/Breadcrumb/breadcrumb.tokens';
 import { PopoverTokenType } from '../components/Popover/popover.tokens';
 import { ResponsiveMenuTokensType } from '../components/Menu/menu.tokens';
-import { MultiSelectTokensType } from '../components/MultiSelect/multiSelect.tokens';
+import { ResponsiveMultiSelectTokens } from '../components/MultiSelect/multiSelect.tokens';
 import { TableTokenType } from '../components/DataTable/dataTable.tokens';
 import { CalendarTokenType } from '../components/DateRangePicker/dateRangePicker.tokens';
 import { AccordionTokenType } from '../components/Accordion/accordion.tokens';
 import { StatCardTokenType } from '../components/StatCard/statcard.tokens';
 import { ProgressBarTokenType } from '../components/ProgressBar/progressbar.tokens';
 import { DrawerTokensType } from '../components/Drawer/drawer.tokens';
-export declare const useComponentToken: (component: keyof ComponentTokenType) => SearchInputTokensType | ResponsiveTagTokens | TextAreaTokensType | TextInputTokensType | NumberInputTokensType | ResponsiveAlertTokens | ResponsiveRadioTokens | OTPInputTokensType | UnitInputTokensType | MultiValueInputTokensType | ResponsiveSwitchTokens | ResponsiveCheckboxTokens | TabsTokensType | TooltipTokensType | DropdownInputTokensType | ResponsiveButtonTokens | ModalTokensType | ResponsiveBreadcrumbTokens | PopoverTokenType | ResponsiveMenuTokensType | MultiSelectTokensType | TableTokenType | CalendarTokenType | AccordionTokenType | StatCardTokenType | ProgressBarTokenType | DrawerTokensType;
+import { ResponsiveSingleSelectTokens } from '../components/SingleSelect/singleSelect.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 | AccordionTokenType | StatCardTokenType | ProgressBarTokenType | DrawerTokensType;

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

@@ -0,0 +1 @@
+export declare const toPixels: (value: string | number | undefined) => number;