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

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

@@ -1,3 +1,3 @@
 import { DropdownInputProps } from './types';
-declare const DropdownInput: ({ label, sublabel, disabled, helpIconHintText, name, required, error, errorMessage, hintText, value, onChange, slot, size, placeholder, dropDownValue, onDropDownChange, dropDownItems, dropdownName, onDropdownOpen, onDropdownClose, ...rest }: DropdownInputProps) => import("react/jsx-runtime").JSX.Element;
+declare const DropdownInput: ({ label, sublabel, disabled, helpIconHintText, name, required, error, errorMessage, hintText, value, onChange, slot, size, placeholder, dropDownValue, onDropDownChange, dropDownItems, dropdownName, onDropdownOpen, onDropdownClose, onBlur, onFocus, ...rest }: DropdownInputProps) => import("react/jsx-runtime").JSX.Element;
 export default DropdownInput;

package/dist/components/Inputs/DropdownInput/dropdownInput.tokens.d.ts

@@ -1,6 +1,7 @@
 import { CSSObject } from 'styled-components';
 import { FoundationTokenType } from '../../../tokens/theme.token';
 import { DropdownInputSize, DropdownInputState } from './types';
+import { BreakpointType } from '../../../breakpoints/breakPoints';
 export type DropdownInputTokensType = {
     input: {
         gap: CSSObject['gap'];
@@ -28,6 +29,9 @@ export type DropdownInputTokensType = {
         };
     };
 };
+export type ResponsiveDropdownInputTokens = {
+    [key in keyof BreakpointType]: DropdownInputTokensType;
+};
 declare const dropdownInputTokens: Readonly<DropdownInputTokensType>;
-export declare const getDropdownInputTokens: (foundationTheme: FoundationTokenType) => DropdownInputTokensType;
+export declare const getDropdownInputTokens: (foundationTheme: FoundationTokenType) => ResponsiveDropdownInputTokens;
 export default dropdownInputTokens;

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

@@ -28,4 +28,6 @@ export type DropdownInputProps = {
     dropdownName?: string;
     onDropdownOpen?: () => void;
     onDropdownClose?: () => void;
-} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'style' | 'className'>;
+    onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
+    onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'style' | 'className' | 'onBlur' | 'onFocus'>;

package/dist/components/Inputs/NumberInput/NumberInput.d.ts

@@ -1,3 +1,3 @@
 import { NumberInputProps } from './types';
-declare const NumberInput: ({ value, onChange, min, max, step, error, errorMessage, required, disabled, size, placeholder, sublabel, helpIconHintText, label, hintText, name, ...rest }: NumberInputProps) => import("react/jsx-runtime").JSX.Element;
+declare const NumberInput: ({ value, onChange, min, max, step, error, errorMessage, required, disabled, size, placeholder, sublabel, helpIconHintText, label, hintText, name, onBlur, onFocus, ...rest }: NumberInputProps) => import("react/jsx-runtime").JSX.Element;
 export default NumberInput;

package/dist/components/Inputs/NumberInput/numberInput.tokens.d.ts

@@ -1,5 +1,6 @@
 import { CSSObject } from 'styled-components';
 import { FoundationTokenType } from '../../../tokens/theme.token';
+import { BreakpointType } from '../../../breakpoints/breakPoints';
 declare enum TextInputSize {
     MD = "md",
     LG = "lg"
@@ -39,6 +40,9 @@ export type NumberInputTokensType = {
         };
     };
 };
+export type ResponsiveNumberInputTokens = {
+    [key in keyof BreakpointType]: NumberInputTokensType;
+};
 declare const numberInputTokens: Readonly<NumberInputTokensType>;
-export declare const getNumberInputTokens: (foundationTheme: FoundationTokenType) => NumberInputTokensType;
+export declare const getNumberInputTokens: (foundationTheme: FoundationTokenType) => ResponsiveNumberInputTokens;
 export default numberInputTokens;

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

@@ -3,7 +3,7 @@ export declare enum NumberInputSize {
     LARGE = "lg"
 }
 export type NumberInputProps = {
-    value: number;
+    value: number | undefined;
     onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
     step?: number;
     error?: boolean;
@@ -13,4 +13,6 @@ export type NumberInputProps = {
     sublabel?: string;
     helpIconHintText?: string;
     hintText?: string;
-} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'style' | 'className' | 'value'>;
+    onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
+    onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'style' | 'className' | 'value' | 'onBlur' | 'onFocus'>;

package/dist/components/Inputs/TextArea/textarea.token.d.ts

@@ -1,5 +1,6 @@
 import { CSSObject } from 'styled-components';
 import { FoundationTokenType } from '../../../tokens/theme.token';
+import { BreakpointType } from '../../../breakpoints/breakPoints';
 type TextAreaState = 'default' | 'hover' | 'focus' | 'error' | 'disabled';
 export type TextAreaTokensType = {
     fontFamily: CSSObject['fontFamily'];
@@ -22,6 +23,9 @@ export type TextAreaTokensType = {
         [key in TextAreaState]: CSSObject['backgroundColor'];
     };
 };
+export type ResponsiveTextAreaTokens = {
+    [key in keyof BreakpointType]: TextAreaTokensType;
+};
 export declare const textAreaTokens: TextAreaTokensType;
-export declare const getTextAreaTokens: (foundationTokens: FoundationTokenType) => TextAreaTokensType;
+export declare const getTextAreaTokens: (foundationTokens: FoundationTokenType) => ResponsiveTextAreaTokens;
 export default textAreaTokens;

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

@@ -19,4 +19,4 @@ export type TextAreaProps = {
     errorMessage?: string;
     resize?: 'none' | 'both' | 'horizontal' | 'vertical' | 'block' | 'inline';
     wrap?: CSSObject['whiteSpace'];
-} & Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'size' | 'style' | 'className'>;
+} & Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'size' | 'style' | 'className' | 'onFocus' | 'onBlur'>;

package/dist/components/Inputs/TextInput/TextInput.d.ts

@@ -1,3 +1,3 @@
 import { TextInputProps } from './types';
-declare const TextInput: ({ size, leftSlot, rightSlot, error, errorMessage, hintText, helpIconHintText, disabled, label, placeholder, sublabel, value, onChange, name, required, ...rest }: TextInputProps) => import("react/jsx-runtime").JSX.Element;
+declare const TextInput: ({ size, leftSlot, rightSlot, error, errorMessage, hintText, helpIconHintText, disabled, label, placeholder, sublabel, value, onChange, name, required, onBlur, onFocus, ...rest }: TextInputProps) => import("react/jsx-runtime").JSX.Element;
 export default TextInput;

package/dist/components/Inputs/TextInput/textInput.tokens.d.ts

@@ -1,6 +1,7 @@
 import { CSSObject } from 'styled-components';
 import { FoundationTokenType } from '../../../tokens/theme.token';
 import { TextInputSize, TextInputState } from './types';
+import { BreakpointType } from '../../../breakpoints/breakPoints';
 export type TextInputTokensType = {
     input: {
         gap: CSSObject['gap'];
@@ -29,5 +30,8 @@ export type TextInputTokensType = {
     };
 };
 declare const textInputTokens: Readonly<TextInputTokensType>;
-export declare const getTextInputTokens: (foundationTheme: FoundationTokenType) => TextInputTokensType;
+export type ResponsiveTextInputTokens = {
+    [key in keyof BreakpointType]: TextInputTokensType;
+};
+export declare const getTextInputTokens: (foundationTheme: FoundationTokenType) => ResponsiveTextInputTokens;
 export default textInputTokens;

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

@@ -21,4 +21,6 @@ export type TextInputProps = {
     rightSlot?: React.ReactNode;
     value: string;
     onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
-} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'style' | 'className'>;
+    onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
+    onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'style' | 'className' | 'onBlur' | 'onFocus'>;

package/dist/components/Inputs/UnitInput/UnitInput.d.ts

@@ -1,3 +1,3 @@
 import { UnitInputProps } from './types';
-declare const UnitInput: ({ value, onChange, min, max, step, error, errorMessage, required, disabled, size, placeholder, sublabel, helpIconHintText, label, hintText, leftSlot, rightSlot, unit, unitPosition, name, ...rest }: UnitInputProps) => import("react/jsx-runtime").JSX.Element;
+declare const UnitInput: ({ value, onChange, min, max, step, error, errorMessage, required, disabled, size, placeholder, sublabel, helpIconHintText, label, hintText, leftSlot, rightSlot, unit, unitPosition, name, onFocus, onBlur, ...rest }: UnitInputProps) => import("react/jsx-runtime").JSX.Element;
 export default UnitInput;

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

@@ -7,7 +7,7 @@ export declare enum UnitPosition {
     RIGHT = "right"
 }
 export type UnitInputProps = {
-    value: number;
+    value: number | undefined;
     onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
     step?: number;
     error?: boolean;
@@ -22,4 +22,6 @@ export type UnitInputProps = {
     rightSlot?: React.ReactNode;
     unit: string;
     unitPosition?: UnitPosition;
+    onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;
+    onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
 } & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'style' | 'className'>;

package/dist/components/Inputs/UnitInput/unitInput.tokens.d.ts

@@ -1,6 +1,7 @@
 import { CSSObject } from 'styled-components';
 import { UnitInputSize } from './types';
 import { FoundationTokenType } from '../../../tokens/theme.token';
+import { BreakpointType } from '../../../breakpoints/breakPoints';
 declare enum UnitInputState {
     DEFAULT = "default",
     HOVER = "hover",
@@ -36,5 +37,8 @@ export type UnitInputTokensType = {
     };
 };
 declare const unitInputTokens: UnitInputTokensType;
-export declare const getUnitInputTokens: (foundationTheme: FoundationTokenType) => UnitInputTokensType;
+export type ResponsiveUnitInputTokens = {
+    [key in keyof BreakpointType]: UnitInputTokensType;
+};
+export declare const getUnitInputTokens: (foundationTheme: FoundationTokenType) => ResponsiveUnitInputTokens;
 export default unitInputTokens;

package/dist/components/Inputs/utils/FloatingLabels/FloatingLabels.d.ts

@@ -0,0 +1,7 @@
+declare const FloatingLabels: ({ label, required, name, isFocused, }: {
+    label: string;
+    required: boolean;
+    name: string;
+    isFocused: boolean;
+}) => import("react/jsx-runtime").JSX.Element;
+export default FloatingLabels;

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

@@ -0,0 +1,22 @@
+import { default as React } from 'react';
+import { MultiSelectTokensType } from './multiSelect.tokens';
+import { MultiSelectMenuSize, MultiSelectSelectionTagType, MultiSelectVariant } from './types';
+export type MultiSelectTriggerProps = {
+    selectedValues: string[];
+    slot: React.ReactNode;
+    variant: MultiSelectVariant;
+    size: MultiSelectMenuSize;
+    isSmallScreen: boolean;
+    onChange: (value: string) => void;
+    name: string;
+    label: string;
+    placeholder: string;
+    required: boolean;
+    selectionTagType: MultiSelectSelectionTagType;
+    valueLabelMap: Record<string, string>;
+    open: boolean;
+    onClick?: () => void;
+    multiSelectTokens: MultiSelectTokensType;
+};
+declare const MultiSelectTrigger: ({ selectedValues, slot, variant, size, isSmallScreen, onChange, name, label, placeholder, required, selectionTagType, valueLabelMap, open, onClick, multiSelectTokens, }: MultiSelectTriggerProps) => import("react/jsx-runtime").JSX.Element;
+export default MultiSelectTrigger;

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

@@ -1,2 +1,3 @@
 export { default as MultiSelect } from './MultiSelect';
+export { default as MultiSelectTrigger } from './MultiSelectTrigger';
 export * from './types';

package/dist/components/MultiSelect/multiSelect.tokens.d.ts

@@ -1,11 +1,16 @@
 import { CSSObject } from 'styled-components';
 import { MultiSelectMenuSize, MultiSelectSelectionTagType, MultiSelectVariant } 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 MultiSelectTokensType = {
     trigger: {
-        padding: {
+        height: CSSObject['height'];
+        paddingX: {
+            [key in MultiSelectMenuSize]: CSSObject['padding'];
+        };
+        paddingY: {
             [key in MultiSelectMenuSize]: CSSObject['padding'];
         };
         borderRadius: {
@@ -72,6 +77,9 @@ export type MultiSelectTokensType = {
         };
     };
 };
+export type ResponsiveMultiSelectTokens = {
+    [key in keyof BreakpointType]: MultiSelectTokensType;
+};
 export declare const multiSelectTokens: MultiSelectTokensType;
-export declare const getMultiSelectTokens: (foundationToken: FoundationTokenType) => MultiSelectTokensType;
+export declare const getMultiSelectTokens: (foundationToken: FoundationTokenType) => ResponsiveMultiSelectTokens;
 export {};

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

@@ -41,6 +41,7 @@ export type MultiSelectMenuGroupType = {
     showSeparator?: boolean;
 };
 export type MultiSelectProps = {
+    height?: number;
     selectedValues: string[];
     onChange: (selectedValue: string) => void;
     items: MultiSelectMenuGroupType[];

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

@@ -13,6 +13,8 @@ type PrimitiveButtonProps = StateStyles & {
     padding?: CSSObject['padding'];
     paddingX?: CSSObject['padding'];
     paddingY?: CSSObject['padding'];
+    paddingTop?: CSSObject['padding'];
+    paddingBottom?: CSSObject['padding'];
     margin?: CSSObject['margin'];
     marginX?: CSSObject['margin'];
     marginY?: CSSObject['margin'];
@@ -73,6 +75,8 @@ declare const PrimitiveButton: React.ForwardRefExoticComponent<StateStyles & {
     padding?: CSSObject["padding"];
     paddingX?: CSSObject["padding"];
     paddingY?: CSSObject["padding"];
+    paddingTop?: CSSObject["padding"];
+    paddingBottom?: CSSObject["padding"];
     margin?: CSSObject["margin"];
     marginX?: CSSObject["margin"];
     marginY?: CSSObject["margin"];

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

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

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

@@ -21,6 +21,11 @@ export type PrimitiveTextProps = {
     name?: CSSObject['name'];
     htmlFor?: CSSObject['htmlFor'];
     textTransform?: CSSObject['textTransform'];
+    position?: CSSObject['position'];
+    top?: CSSObject['top'];
+    left?: CSSObject['left'];
+    bottom?: CSSObject['bottom'];
+    right?: CSSObject['right'];
 };
 export type TextProps = PrimitiveTextProps & Omit<React.HTMLAttributes<HTMLElement>, 'color'> & {
     children: React.ReactNode;

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

@@ -82,6 +82,8 @@ type PrimitiveTextareaProps = StateStyles & {
     placeholderStyles?: CSSObject;
     resize?: CSSObject['resize'];
     fontFamily?: CSSObject['fontFamily'];
+    fontSize?: CSSObject['fontSize'];
+    fontWeight?: CSSObject['fontWeight'];
 };
 export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement> & PrimitiveTextareaProps;
 declare const PrimitiveTextarea: React.FC<TextareaProps>;

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

@@ -0,0 +1,21 @@
+import { default as React } from 'react';
+import { SelectMenuSize, SelectMenuVariant } from './types';
+import { SingleSelectTokensType } from './singleSelect.tokens';
+export type SingleSelectTriggerProps = {
+    size: SelectMenuSize;
+    selected: string;
+    label: string;
+    name: string;
+    placeholder: string;
+    required: boolean;
+    valueLabelMap: Record<string, string>;
+    open: boolean;
+    onClick?: () => void;
+    slot: React.ReactNode;
+    variant: SelectMenuVariant;
+    isSmallScreenWithLargeSize: boolean;
+    isItemSelected: boolean;
+    singleSelectTokens: SingleSelectTokensType;
+};
+declare const SingleSelectTrigger: ({ size, selected, label, name, placeholder, required, valueLabelMap, open, onClick, slot, variant, isSmallScreenWithLargeSize, isItemSelected, singleSelectTokens, }: SingleSelectTriggerProps) => import("react/jsx-runtime").JSX.Element;
+export default SingleSelectTrigger;

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;