@juspay/blend-design-system 0.0.1

package/dist/components/Switch/switch.token.d.ts

@@ -0,0 +1,112 @@
+import { CSSObject } from 'styled-components';
+import { ThemeType } from '../../tokens';
+import { SwitchSize } from './types';
+import { BreakpointType } from '../../breakpoints/breakPoints';
+export type SwitchState = 'default' | 'hover' | 'disabled' | 'error';
+export type SwitchIndicatorState = 'active' | 'inactive';
+export type SwitchTokensType = {
+    gap: CSSObject['gap'];
+    slotGap: CSSObject['gap'];
+    contentGap: CSSObject['gap'];
+    height: {
+        [key in SwitchSize]: CSSObject['height'];
+    };
+    width: {
+        [key in SwitchSize]: CSSObject['width'];
+    };
+    borderRadius: {
+        base: CSSObject['borderRadius'];
+        thumb: CSSObject['borderRadius'];
+    };
+    indicator: {
+        [key in SwitchIndicatorState]: {
+            background: {
+                [key in Exclude<SwitchState, 'error'>]: CSSObject['backgroundColor'];
+            };
+            border: {
+                [key in Exclude<SwitchState, 'error'>]: CSSObject['borderColor'];
+            };
+        };
+    };
+    thumb: {
+        background: CSSObject['backgroundColor'];
+        border: {
+            color: CSSObject['borderColor'];
+            width: CSSObject['borderWidth'];
+        };
+        size: {
+            [key in SwitchSize]: {
+                width: CSSObject['width'];
+                height: CSSObject['height'];
+                top: CSSObject['top'];
+                left: CSSObject['left'];
+                offset: {
+                    active: CSSObject['left'];
+                    inactive: CSSObject['left'];
+                };
+            };
+        };
+    };
+    content: {
+        label: {
+            color: {
+                [key in SwitchState]: CSSObject['color'];
+            };
+            font: {
+                [key in SwitchSize]: {
+                    fontSize: CSSObject['fontSize'];
+                    fontWeight: CSSObject['fontWeight'];
+                };
+            };
+        };
+        sublabel: {
+            color: {
+                [key in SwitchState]: CSSObject['color'];
+            };
+            font: {
+                [key in SwitchSize]: {
+                    fontSize: CSSObject['fontSize'];
+                    fontWeight: CSSObject['fontWeight'];
+                };
+            };
+            spacing: {
+                left: {
+                    [key in SwitchSize]: CSSObject['marginLeft'];
+                };
+                top: CSSObject['marginTop'];
+            };
+        };
+    };
+    borderWidth: {
+        [key in SwitchIndicatorState]: {
+            [key in Exclude<SwitchState, 'error'>]: number;
+        };
+    };
+    focus: {
+        outline: {
+            width: CSSObject['borderWidth'];
+            color: CSSObject['borderColor'];
+            offset: CSSObject['outlineOffset'];
+        };
+    };
+    slot: {
+        size: {
+            [key in SwitchSize]: CSSObject['width'];
+        };
+        spacing: CSSObject['margin'];
+    };
+    required: {
+        color: CSSObject['color'];
+        spacing: CSSObject['margin'];
+    };
+    transition: {
+        duration: CSSObject['transitionDuration'];
+        easing: CSSObject['transitionTimingFunction'];
+    };
+};
+export type ResponsiveSwitchTokens = {
+    [key in keyof BreakpointType]: SwitchTokensType;
+};
+export declare const getSwitchTokens: (foundationToken: ThemeType) => ResponsiveSwitchTokens;
+declare const switchTokens: ResponsiveSwitchTokens;
+export default switchTokens;

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

@@ -0,0 +1,30 @@
+import { ReactNode } from 'react';
+export declare enum SwitchSize {
+    SMALL = "sm",
+    MEDIUM = "md"
+}
+export type SwitchProps = {
+    id?: string;
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onChange?: (checked: boolean) => void;
+    disabled?: boolean;
+    required?: boolean;
+    error?: boolean;
+    size?: SwitchSize;
+    label?: ReactNode;
+    subtext?: ReactNode;
+    slot?: ReactNode;
+    name?: string;
+    value?: string;
+};
+export type SwitchGroupProps = {
+    id?: string;
+    label?: string;
+    name?: string;
+    children: ReactNode;
+    disabled?: boolean;
+    value?: string[];
+    defaultValue?: string[];
+    onChange?: (value: string[]) => void;
+};

package/dist/components/Switch/utils.d.ts

@@ -0,0 +1,58 @@
+import { default as React } from 'react';
+import { SwitchSize, SwitchProps } from './types';
+import { SwitchTokensType } from './switch.token';
+export declare const getSwitchDataState: (checked: boolean) => string;
+export declare const extractPixelValue: (tokenValue: string) => number;
+export declare const getSpacingBySize: (size: SwitchSize) => {
+    marginLeft: string;
+    marginTop: string;
+};
+/**
+ * Determines if the switch component is controlled based on the checked prop
+ */
+export declare const isControlledSwitch: (checked: boolean | undefined) => boolean;
+/**
+ * Creates a toggle handler for switch components
+ */
+export declare const createSwitchToggleHandler: (currentChecked: boolean, disabled: boolean, isControlled: boolean, setInternalChecked?: React.Dispatch<React.SetStateAction<boolean>>, onChange?: (checked: boolean) => void) => () => void;
+/**
+ * Gets the text color based on switch state
+ */
+export declare const getSwitchTextColor: (tokens: SwitchTokensType, disabled: boolean, error: boolean) => string;
+/**
+ * Gets the subtext color based on switch state
+ */
+export declare const getSwitchSubtextColor: (tokens: SwitchTokensType, disabled: boolean, error: boolean) => string;
+/**
+ * Gets the text properties for switch labels
+ */
+export declare const getSwitchTextProps: (tokens: SwitchTokensType, size: SwitchSize, disabled: boolean, error: boolean) => {
+    fontSize: string;
+    fontWeight: string;
+    color: string;
+};
+/**
+ * Gets the subtext properties for switch
+ */
+export declare const getSwitchSubtextProps: (tokens: SwitchTokensType, size: SwitchSize, disabled: boolean, error: boolean) => {
+    fontSize: string;
+    color: string;
+};
+/**
+ * Gets label styles for switch components
+ */
+export declare const getSwitchLabelStyles: (disabled: boolean) => {
+    cursor: "not-allowed" | "pointer";
+    display: "flex";
+    alignItems: "center";
+    margin: number;
+    padding: number;
+};
+/**
+ * Validates if a child element is a Switch component
+ */
+export declare const isSwitchElement: (child: React.ReactElement, SwitchComponent: React.ComponentType<SwitchProps>) => child is React.ReactElement<SwitchProps>;
+/**
+ * Creates a group change handler for switch groups
+ */
+export declare const createSwitchGroupChangeHandler: (values: string[], isControlled: boolean, setInternalValues?: React.Dispatch<React.SetStateAction<string[]>>, onChange?: (values: string[]) => void) => (checked: boolean, childValue: string) => void;

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

@@ -0,0 +1,22 @@
+import { TabsVariant, TabsSize } from './types';
+import { TabsTokensType } from './tabs.token';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+export declare const StyledTabs: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<TabsPrimitive.TabsProps & import('react').RefAttributes<HTMLDivElement>, never>> & string & Omit<import('react').ForwardRefExoticComponent<TabsPrimitive.TabsProps & import('react').RefAttributes<HTMLDivElement>>, keyof import('react').Component<any, {}, any>>;
+export declare const StyledTabsContent: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<TabsPrimitive.TabsContentProps & import('react').RefAttributes<HTMLDivElement>, {
+    $tabsToken: TabsTokensType;
+}>> & string & Omit<import('react').ForwardRefExoticComponent<TabsPrimitive.TabsContentProps & import('react').RefAttributes<HTMLDivElement>>, keyof import('react').Component<any, {}, any>>;
+export declare const StyledTabsList: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<TabsPrimitive.TabsListProps & import('react').RefAttributes<HTMLDivElement>, {
+    $variant: TabsVariant;
+    $size: TabsSize;
+    $expanded: boolean;
+    $fitContent: boolean;
+    $tabsToken: TabsTokensType;
+}>> & string & Omit<import('react').ForwardRefExoticComponent<TabsPrimitive.TabsListProps & import('react').RefAttributes<HTMLDivElement>>, keyof import('react').Component<any, {}, any>>;
+export declare const StyledTabsTrigger: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<TabsPrimitive.TabsTriggerProps & import('react').RefAttributes<HTMLButtonElement>, {
+    $variant: TabsVariant;
+    $size: TabsSize;
+    $tabsToken: TabsTokensType;
+}>> & string & Omit<import('react').ForwardRefExoticComponent<TabsPrimitive.TabsTriggerProps & import('react').RefAttributes<HTMLButtonElement>>, keyof import('react').Component<any, {}, any>>;
+export declare const IconContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
+    $tabsToken: TabsTokensType;
+}>> & string;

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

@@ -0,0 +1,5 @@
+declare const Tabs: import('react').ForwardRefExoticComponent<Omit<import('@radix-ui/react-tabs').TabsProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & {
+    variant?: import('./types').TabsVariant;
+    size?: import('./types').TabsSize;
+} & import('react').RefAttributes<HTMLDivElement>>;
+export default Tabs;

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

@@ -0,0 +1,2 @@
+declare const TabsContent: import('react').ForwardRefExoticComponent<Omit<import('@radix-ui/react-tabs').TabsContentProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export default TabsContent;

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

@@ -0,0 +1,8 @@
+import { TabsSize, TabsVariant } from './types';
+declare const TabsList: import('react').ForwardRefExoticComponent<Omit<import('@radix-ui/react-tabs').TabsListProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & {
+    variant?: TabsVariant;
+    size?: TabsSize;
+    expanded?: boolean;
+    fitContent?: boolean;
+} & import('react').RefAttributes<HTMLDivElement>>;
+export default TabsList;

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

@@ -0,0 +1,10 @@
+import { TabsVariant, TabsSize } from './types';
+declare const TabsTrigger: import('react').ForwardRefExoticComponent<Omit<import('@radix-ui/react-tabs').TabsTriggerProps & import('react').RefAttributes<HTMLButtonElement>, "ref"> & {
+    value: string;
+    variant?: TabsVariant;
+    size?: TabsSize;
+    leftSlot?: import('react').ReactNode;
+    rightSlot?: import('react').ReactNode;
+    children: string | number;
+} & import('react').RefAttributes<HTMLButtonElement>>;
+export default TabsTrigger;

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

@@ -0,0 +1,6 @@
+import { default as Tabs } from './Tabs';
+import { default as TabsList } from './TabsList';
+import { default as TabsTrigger } from './TabsTrigger';
+import { default as TabsContent } from './TabsContent';
+export { Tabs, TabsList, TabsTrigger, TabsContent };
+export * from './types';

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

@@ -0,0 +1,60 @@
+import { CSSObject } from 'styled-components';
+import { ThemeType } from '../../tokens';
+import { TabsVariant, TabsSize } from './types';
+export type TabsState = 'default' | 'hover' | 'active' | 'disabled';
+export type TabsTokensType = {
+    gap: {
+        [key in TabsVariant]: CSSObject['gap'];
+    };
+    list: {
+        padding: {
+            [key in TabsVariant]: CSSObject['padding'];
+        };
+        backgroundColor: {
+            [key in TabsVariant]: CSSObject['backgroundColor'];
+        };
+        borderRadius: {
+            [key in TabsVariant]: CSSObject['borderRadius'];
+        };
+        borderBottom: {
+            [key in TabsVariant]: CSSObject['borderBottom'];
+        };
+    };
+    trigger: {
+        height: {
+            [key in TabsSize]: CSSObject['height'];
+        };
+        padding: {
+            [key in TabsSize]: CSSObject['padding'];
+        };
+        fontSize: {
+            [key in TabsSize]: CSSObject['fontSize'];
+        };
+        iconGap: CSSObject['gap'];
+        fontWeight: {
+            [key in TabsVariant]: {
+                [key in TabsState]?: CSSObject['fontWeight'];
+            };
+        };
+        color: {
+            [key in TabsVariant]: {
+                [key in TabsState]?: CSSObject['color'];
+            };
+        };
+        backgroundColor: {
+            [key in TabsVariant]: {
+                [key in TabsState]?: CSSObject['backgroundColor'];
+            };
+        };
+        borderRadius: {
+            [key in TabsVariant]: CSSObject['borderRadius'];
+        };
+    };
+    underline: {
+        height: CSSObject['height'];
+        color: CSSObject['color'];
+    };
+};
+export declare const getTabsTokens: (foundationToken: ThemeType) => TabsTokensType;
+declare const tabsTokens: TabsTokensType;
+export default tabsTokens;

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

@@ -0,0 +1,34 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+export declare enum TabsVariant {
+    BOXED = "boxed",
+    FLOATING = "floating",
+    UNDERLINE = "underline"
+}
+export declare enum TabsSize {
+    MD = "md",
+    LG = "lg"
+}
+export type TabsProps = ComponentPropsWithoutRef<typeof TabsPrimitive.Root> & {
+    variant?: TabsVariant;
+    size?: TabsSize;
+};
+export type TabsListProps = ComponentPropsWithoutRef<typeof TabsPrimitive.List> & {
+    variant?: TabsVariant;
+    size?: TabsSize;
+    expanded?: boolean;
+    fitContent?: boolean;
+};
+export type TabsTriggerProps = ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger> & {
+    value: string;
+    variant?: TabsVariant;
+    size?: TabsSize;
+    leftSlot?: ReactNode;
+    rightSlot?: ReactNode;
+    children: string | number;
+};
+export type TabsContentProps = ComponentPropsWithoutRef<typeof TabsPrimitive.Content>;
+export type TabsStyles = {
+    list: string;
+    trigger: string;
+};

package/dist/components/Tags/Tags.d.ts

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

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

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

package/dist/components/Tags/tag.tokens.d.ts

@@ -0,0 +1,57 @@
+import { CSSObject } from 'styled-components';
+import { ThemeType } from '../../tokens';
+import { TagColor, TagShape, TagSize, TagVariant } from './types';
+import { BreakpointType } from '../../breakpoints/breakPoints';
+export type TagTokensType = Readonly<{
+    background: {
+        [key in TagVariant]: {
+            [key in TagColor]: CSSObject['color'];
+        };
+    };
+    color: {
+        [key in TagVariant]: {
+            [key in TagColor]: CSSObject['color'];
+        };
+    };
+    borderColor: {
+        [key in TagVariant]: {
+            [key in TagColor]: CSSObject['color'];
+        };
+    };
+    borderRadius: {
+        [key in TagShape]: {
+            [key in TagSize]: CSSObject['borderRadius'];
+        };
+    };
+    borderWidth: {
+        [key in TagVariant]: {
+            [key in TagColor]: CSSObject['borderWidth'];
+        };
+    };
+    font: {
+        [key in TagSize]: {
+            fontSize: CSSObject['fontSize'];
+            fontWeight: CSSObject['fontWeight'];
+        };
+    };
+    gap: {
+        [key in TagSize]: CSSObject['gap'];
+    };
+    padding: {
+        [key in TagSize]: CSSObject['padding'];
+    };
+    height: {
+        [key in TagSize]: CSSObject['height'];
+    };
+    slot: {
+        size: {
+            [key in TagSize]: CSSObject['width'];
+        };
+    };
+}>;
+export type ResponsiveTagTokens = {
+    [key in keyof BreakpointType]: TagTokensType;
+};
+declare const tagTokens: TagTokensType;
+export declare const getTagTokens: (foundationToken: ThemeType) => ResponsiveTagTokens;
+export default tagTokens;

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

@@ -0,0 +1,35 @@
+import { ReactNode } from 'react';
+export declare enum TagVariant {
+    NO_FILL = "noFill",
+    ATTENTIVE = "attentive",
+    SUBTLE = "subtle"
+}
+export declare enum TagColor {
+    NEUTRAL = "neutral",
+    PRIMARY = "primary",
+    SUCCESS = "success",
+    ERROR = "error",
+    WARNING = "warning",
+    PURPLE = "purple"
+}
+export declare enum TagSize {
+    XS = "xs",
+    SM = "sm",
+    MD = "md",
+    LG = "lg"
+}
+export declare enum TagShape {
+    ROUNDED = "rounded",
+    SQUARICAL = "squarical"
+}
+export type TagProps = {
+    text: string;
+    variant?: TagVariant;
+    color?: TagColor;
+    size?: TagSize;
+    shape?: TagShape;
+    leftSlot?: ReactNode;
+    rightSlot?: ReactNode;
+    onClick?: () => void;
+    splitTagPosition?: 'left' | 'right';
+};

package/dist/components/Text/Text.d.ts

@@ -0,0 +1,12 @@
+import { default as React, JSX } from 'react';
+import { PrimitiveTextProps } from '../Primitives/PrimitiveText/PrimitiveText';
+export type SemanticTagType = keyof Pick<JSX.IntrinsicElements, 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'span' | 'code' | 'q' | 'small' | 'label'>;
+export type TextProps = PrimitiveTextProps & {
+    children: React.ReactNode;
+    variant?: VariantType;
+    as?: SemanticTagType;
+    style?: React.CSSProperties;
+};
+export type VariantType = 'body.xs' | 'body.sm' | 'body.md' | 'body.lg' | 'display.sm' | 'display.md' | 'display.lg' | 'display.xl' | 'heading.sm' | 'heading.md' | 'heading.lg' | 'heading.xl' | 'heading.2xl' | 'code.sm' | 'code.md' | 'code.lg';
+declare const Text: ({ children, variant, as, color, fontWeight, fontSize, truncate, style, ...rest }: TextProps) => import("react/jsx-runtime").JSX.Element;
+export default Text;

package/dist/components/Tooltip/Tooltip.d.ts

@@ -0,0 +1,3 @@
+import { TooltipProps } from './types';
+export declare const Tooltip: ({ children: trigger, content, side, align, showArrow, size, slot, slotDirection, delayDuration, offset, open, }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
+export default Tooltip;

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

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

package/dist/components/Tooltip/tooltip.tokens.d.ts

@@ -0,0 +1,31 @@
+import { CSSObject } from 'styled-components';
+import { TooltipSize } from './types';
+import { FoundationTokenType } from '../../tokens/theme.token';
+export type TooltipTokensType = {
+    background: CSSObject['backgroundColor'];
+    color: CSSObject['color'];
+    fontWeight: {
+        [key in TooltipSize]: CSSObject['fontWeight'];
+    };
+    borderRadius: {
+        [key in TooltipSize]: CSSObject['borderRadius'];
+    };
+    maxWidth: {
+        [key in TooltipSize]: CSSObject['maxWidth'];
+    };
+    padding: {
+        [key in TooltipSize]: CSSObject['padding'];
+    };
+    fontSize: {
+        [key in TooltipSize]: CSSObject['fontSize'];
+    };
+    lineHeight: {
+        [key in TooltipSize]: CSSObject['lineHeight'];
+    };
+    gap: {
+        [key in TooltipSize]: CSSObject['gap'];
+    };
+};
+declare const tooltipTokens: TooltipTokensType;
+export declare const getTooltipTokens: (foundationToken: FoundationTokenType) => TooltipTokensType;
+export default tooltipTokens;

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

@@ -0,0 +1,33 @@
+import { ReactNode } from 'react';
+export declare enum TooltipSlotDirection {
+    LEFT = "left",
+    RIGHT = "right"
+}
+export declare enum TooltipSide {
+    TOP = "top",
+    RIGHT = "right",
+    LEFT = "left",
+    BOTTOM = "bottom"
+}
+export declare enum TooltipAlign {
+    START = "start",
+    END = "end",
+    CENTER = "center"
+}
+export declare enum TooltipSize {
+    SMALL = "sm",
+    LARGE = "lg"
+}
+export type TooltipProps = {
+    children: ReactNode;
+    content: ReactNode | string;
+    open?: boolean;
+    side?: TooltipSide;
+    align?: TooltipAlign;
+    showArrow?: boolean;
+    size?: TooltipSize;
+    slot?: ReactNode;
+    slotDirection?: TooltipSlotDirection;
+    delayDuration?: number;
+    offset?: number;
+};

package/dist/context/ThemeContext.d.ts

@@ -0,0 +1,66 @@
+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 { 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 { 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 { MultiValueInputTokensType } from '../components/Inputs/MultiValueInput/multiValueInput.tokens';
+import { DropdownInputTokensType } from '../components/Inputs/DropdownInput/dropdownInput.tokens';
+import { ResponsiveCheckboxTokens } from '../components/Checkbox/checkbox.token';
+import { TabsTokensType } 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 { 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';
+import { BreakpointType } from '../breakpoints/breakPoints';
+export type ComponentTokenType = {
+    TAGS?: ResponsiveTagTokens;
+    SEARCH_INPUT?: SearchInputTokensType;
+    TEXT_AREA?: TextAreaTokensType;
+    RADIO?: ResponsiveRadioTokens;
+    SWITCH?: ResponsiveSwitchTokens;
+    TEXT_INPUT?: TextInputTokensType;
+    NUMBER_INPUT?: NumberInputTokensType;
+    ALERT?: ResponsiveAlertTokens;
+    OTP_INPUT?: OTPInputTokensType;
+    TOOLTIP?: TooltipTokensType;
+    UNIT_INPUT?: UnitInputTokensType;
+    MULTI_VALUE_INPUT?: MultiValueInputTokensType;
+    DROPDOWN_INPUT?: DropdownInputTokensType;
+    CHECKBOX?: ResponsiveCheckboxTokens;
+    TABS?: TabsTokensType;
+    BUTTON?: ResponsiveButtonTokens;
+    MODAL?: ModalTokensType;
+    BREADCRUMB?: ResponsiveBreadcrumbTokens;
+    POPOVER?: PopoverTokenType;
+    MENU?: ResponsiveMenuTokensType;
+    MULTI_SELECT?: MultiSelectTokensType;
+    TABLE?: TableTokenType;
+    CALENDAR?: CalendarTokenType;
+    ACCORDION?: AccordionTokenType;
+    STAT_CARD?: StatCardTokenType;
+    PROGRESS_BAR?: ProgressBarTokenType;
+    DRAWER?: DrawerTokensType;
+};
+type ThemeContextType = {
+    foundationTokens: ThemeType;
+    componentTokens: Required<ComponentTokenType>;
+    breakpoints: BreakpointType;
+};
+declare const ThemeContext: import('react').Context<ThemeContextType>;
+export declare const useTheme: () => ThemeContextType;
+export default ThemeContext;

package/dist/context/ThemeProvider.d.ts

@@ -0,0 +1,11 @@
+import { BreakpointType } from '../breakpoints/breakPoints';
+import { ThemeType } from '../tokens';
+import { ComponentTokenType } from './ThemeContext';
+type ThemeProviderProps = {
+    foundationTokens?: ThemeType;
+    componentTokens?: ComponentTokenType;
+    breakpoints?: BreakpointType;
+    children: React.ReactNode;
+};
+declare const ThemeProvider: ({ foundationTokens, componentTokens, breakpoints, children, }: ThemeProviderProps) => import("react/jsx-runtime").JSX.Element;
+export default ThemeProvider;

package/dist/context/index.d.ts

@@ -0,0 +1,4 @@
+export { default as ThemeProvider } from './ThemeProvider';
+export { useTheme } from './ThemeContext';
+export type { ComponentTokenType } from './ThemeContext';
+export type { ThemeType } from '../tokens';

package/dist/context/initComponentTokens.d.ts

@@ -0,0 +1,4 @@
+import { ThemeType } from '../tokens';
+import { ComponentTokenType } from './ThemeContext';
+declare const initTokens: (componentTokens: ComponentTokenType, foundationTokens: ThemeType) => Required<ComponentTokenType>;
+export default initTokens;