@juspay/blend-design-system 0.0.1

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

@@ -0,0 +1,91 @@
+import { default as React } from 'react';
+import { CSSObject } from 'styled-components';
+type StateStyles = {
+    _hover?: PrimitiveInputProps;
+    _focus?: PrimitiveInputProps;
+    _active?: PrimitiveInputProps;
+    _disabled?: PrimitiveInputProps;
+    _visited?: PrimitiveInputProps;
+    _focusVisible?: PrimitiveInputProps;
+    _focusWithin?: PrimitiveInputProps;
+    _focusActive?: PrimitiveInputProps;
+};
+type PrimitiveInputProps = StateStyles & {
+    color?: CSSObject['color'];
+    position?: CSSObject['position'];
+    inset?: CSSObject['inset'];
+    top?: CSSObject['top'];
+    right?: CSSObject['right'];
+    bottom?: CSSObject['bottom'];
+    left?: CSSObject['left'];
+    zIndex?: CSSObject['zIndex'];
+    pointerEvents?: CSSObject['pointerEvents'];
+    opacity?: CSSObject['opacity'];
+    padding?: CSSObject['padding'];
+    paddingTop?: CSSObject['paddingTop'];
+    paddingBottom?: CSSObject['paddingBottom'];
+    paddingLeft?: CSSObject['paddingLeft'];
+    paddingRight?: CSSObject['paddingRight'];
+    paddingX?: CSSObject['padding'];
+    paddingY?: CSSObject['padding'];
+    paddingInlineStart?: CSSObject['paddingInlineStart'];
+    paddingInlineEnd?: CSSObject['paddingInlineEnd'];
+    margin?: CSSObject['margin'];
+    marginTop?: CSSObject['marginTop'];
+    marginBottom?: CSSObject['marginBottom'];
+    marginLeft?: CSSObject['marginLeft'];
+    marginRight?: CSSObject['marginRight'];
+    marginX?: CSSObject['margin'];
+    marginY?: CSSObject['margin'];
+    display?: CSSObject['display'];
+    flexDirection?: CSSObject['flexDirection'];
+    justifyContent?: CSSObject['justifyContent'];
+    alignItems?: CSSObject['alignItems'];
+    flexWrap?: CSSObject['flexWrap'];
+    flexGrow?: CSSObject['flexGrow'];
+    flexShrink?: CSSObject['flexShrink'];
+    flexBasis?: CSSObject['flexBasis'];
+    gap?: CSSObject['gap'];
+    rowGap?: CSSObject['rowGap'];
+    columnGap?: CSSObject['columnGap'];
+    alignContent?: CSSObject['alignContent'];
+    alignSelf?: CSSObject['alignSelf'];
+    justifySelf?: CSSObject['justifySelf'];
+    borderRadius?: CSSObject['borderRadius'];
+    borderTopLeftRadius?: CSSObject['borderTopLeftRadius'];
+    borderTopRightRadius?: CSSObject['borderTopRightRadius'];
+    borderBottomLeftRadius?: CSSObject['borderBottomLeftRadius'];
+    borderBottomRightRadius?: CSSObject['borderBottomRightRadius'];
+    outline?: CSSObject['outline'];
+    outlineColor?: CSSObject['outlineColor'];
+    outlineWidth?: CSSObject['outlineWidth'];
+    outlineStyle?: CSSObject['outlineStyle'];
+    outlineOffset?: CSSObject['outlineOffset'];
+    width?: CSSObject['width'];
+    height?: CSSObject['height'];
+    minWidth?: CSSObject['minWidth'];
+    minHeight?: CSSObject['minHeight'];
+    maxWidth?: CSSObject['maxWidth'];
+    maxHeight?: CSSObject['maxHeight'];
+    size?: CSSObject['width'] | CSSObject['height'];
+    backgroundColor?: CSSObject['backgroundColor'];
+    border?: CSSObject['border'];
+    borderTop?: CSSObject['borderTop'];
+    borderBottom?: CSSObject['borderBottom'];
+    borderLeft?: CSSObject['borderLeft'];
+    borderRight?: CSSObject['borderRight'];
+    boxShadow?: CSSObject['boxShadow'];
+    overflow?: CSSObject['overflow'];
+    overflowX?: CSSObject['overflowX'];
+    overflowY?: CSSObject['overflowY'];
+    contentCentered?: boolean;
+    cursor?: CSSObject['cursor'];
+    placeholderStyles?: CSSObject;
+};
+export type InputProps = React.InputHTMLAttributes<HTMLInputElement> & PrimitiveInputProps & {
+    as?: 'input' | 'textarea';
+    key?: string | number;
+    ref?: React.Ref<HTMLInputElement>;
+};
+declare const PrimitiveInput: React.FC<InputProps>;
+export default PrimitiveInput;

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

@@ -0,0 +1,58 @@
+import { default as React, JSX } from 'react';
+import { CSSObject } from 'styled-components';
+type StateStyles = {
+    _hover?: StyledLinkProps;
+    _focus?: StyledLinkProps;
+    _active?: StyledLinkProps;
+    _disabled?: StyledLinkProps;
+    _visited?: StyledLinkProps;
+};
+type StyledLinkProps = StateStyles & {
+    color?: CSSObject['color'];
+    gap?: CSSObject['gap'];
+    fontSize?: CSSObject['fontSize'];
+    fontWeight?: CSSObject['fontWeight'];
+    lineHeight?: CSSObject['lineHeight'];
+    letterSpacing?: CSSObject['letterSpacing'];
+    textAlign?: CSSObject['textAlign'];
+    textTransform?: CSSObject['textTransform'];
+    textOverflow?: CSSObject['textOverflow'];
+    textDecoration?: CSSObject['textDecoration'];
+    padding?: CSSObject['padding'];
+    paddingX?: CSSObject['paddingX'];
+    paddingY?: CSSObject['paddingY'];
+    paddingTop?: CSSObject['paddingTop'];
+    paddingBottom?: CSSObject['paddingBottom'];
+    paddingLeft?: CSSObject['paddingLeft'];
+    paddingRight?: CSSObject['paddingRight'];
+    margin?: CSSObject['margin'];
+    marginX?: CSSObject['marginX'];
+    marginY?: CSSObject['marginY'];
+    marginTop?: CSSObject['marginTop'];
+    marginBottom?: CSSObject['marginBottom'];
+    marginLeft?: CSSObject['marginLeft'];
+    marginRight?: CSSObject['marginRight'];
+    display?: CSSObject['display'];
+    width?: CSSObject['width'];
+    height?: CSSObject['height'];
+    cursor?: CSSObject['cursor'];
+    whiteSpace?: CSSObject['whiteSpace'];
+    transition?: CSSObject['transition'];
+    backgroundColor?: CSSObject['backgroundColor'];
+    border?: CSSObject['border'];
+    borderRadius?: CSSObject['borderRadius'];
+    opacity?: CSSObject['opacity'];
+};
+type SemanticLinkTag = keyof Pick<JSX.IntrinsicElements, 'a' | 'span' | 'div'>;
+export type PrimitiveLinkProps = StyledLinkProps & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'color' | 'as'> & {
+    as?: SemanticLinkTag;
+    children?: React.ReactNode;
+    ref?: React.Ref<HTMLAnchorElement>;
+};
+/**
+ * PrimitiveLink Component
+ * @description
+ * A highly customizable anchor component styled via props.
+ */
+declare const PrimitiveLink: React.ForwardRefExoticComponent<Omit<PrimitiveLinkProps, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
+export default PrimitiveLink;

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

@@ -0,0 +1,39 @@
+import { default as React, JSX } from 'react';
+import { CSSObject } from 'styled-components';
+export type SemanticTagType = keyof Pick<JSX.IntrinsicElements, 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'span' | 'code' | 'q' | 'small' | 'label'>;
+export type PrimitiveTextProps = {
+    fontWeight?: CSSObject['fontWeight'];
+    color?: CSSObject['color'];
+    textAlign?: CSSObject['textAlign'];
+    letterSpacing?: CSSObject['letterSpacing'];
+    fontFamily?: CSSObject['fontFamily'];
+    opacity?: CSSObject['opacity'];
+    margin?: CSSObject['margin'];
+    marginX?: CSSObject['margin'];
+    marginY?: CSSObject['margin'];
+    padding?: CSSObject['padding'];
+    paddingX?: CSSObject['padding'];
+    paddingY?: CSSObject['padding'];
+    fontSize?: CSSObject['fontSize'];
+    lineHeight?: CSSObject['lineHeight'];
+    truncate?: boolean;
+    userSelect?: CSSObject['userSelect'];
+    name?: CSSObject['name'];
+    htmlFor?: CSSObject['htmlFor'];
+    textTransform?: CSSObject['textTransform'];
+};
+export type TextProps = PrimitiveTextProps & Omit<React.HTMLAttributes<HTMLElement>, 'color'> & {
+    children: React.ReactNode;
+    as?: SemanticTagType;
+};
+/**
+ * PrimitiveText Component
+ * @description
+ * A low-level text primitive that renders styled text without variant abstraction.
+ *
+ * @param {React.ReactNode} children - The content to render.
+ * @param {SemanticTagType} as - Optional semantic tag to render as.
+ * @param {PrimitiveTextProps} rest - Styling props.
+ */
+declare const PrimitiveText: React.FC<TextProps>;
+export default PrimitiveText;

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

@@ -0,0 +1,88 @@
+import { default as React } from 'react';
+import { CSSObject } from 'styled-components';
+type StateStyles = {
+    _hover?: PrimitiveTextareaProps;
+    _focus?: PrimitiveTextareaProps;
+    _active?: PrimitiveTextareaProps;
+    _disabled?: PrimitiveTextareaProps;
+    _visited?: PrimitiveTextareaProps;
+    _focusVisible?: PrimitiveTextareaProps;
+    _focusWithin?: PrimitiveTextareaProps;
+    _focusActive?: PrimitiveTextareaProps;
+};
+type PrimitiveTextareaProps = StateStyles & {
+    color?: CSSObject['color'];
+    position?: CSSObject['position'];
+    inset?: CSSObject['inset'];
+    top?: CSSObject['top'];
+    right?: CSSObject['right'];
+    bottom?: CSSObject['bottom'];
+    left?: CSSObject['left'];
+    zIndex?: CSSObject['zIndex'];
+    pointerEvents?: CSSObject['pointerEvents'];
+    opacity?: CSSObject['opacity'];
+    padding?: CSSObject['padding'];
+    paddingTop?: CSSObject['paddingTop'];
+    paddingBottom?: CSSObject['paddingBottom'];
+    paddingLeft?: CSSObject['paddingLeft'];
+    paddingRight?: CSSObject['paddingRight'];
+    paddingX?: CSSObject['padding'];
+    paddingY?: CSSObject['padding'];
+    paddingInlineStart?: CSSObject['paddingInlineStart'];
+    paddingInlineEnd?: CSSObject['paddingInlineEnd'];
+    margin?: CSSObject['margin'];
+    marginTop?: CSSObject['marginTop'];
+    marginBottom?: CSSObject['marginBottom'];
+    marginLeft?: CSSObject['marginLeft'];
+    marginRight?: CSSObject['marginRight'];
+    marginX?: CSSObject['margin'];
+    marginY?: CSSObject['margin'];
+    display?: CSSObject['display'];
+    flexDirection?: CSSObject['flexDirection'];
+    justifyContent?: CSSObject['justifyContent'];
+    alignItems?: CSSObject['alignItems'];
+    flexWrap?: CSSObject['flexWrap'];
+    flexGrow?: CSSObject['flexGrow'];
+    flexShrink?: CSSObject['flexShrink'];
+    flexBasis?: CSSObject['flexBasis'];
+    gap?: CSSObject['gap'];
+    rowGap?: CSSObject['rowGap'];
+    columnGap?: CSSObject['columnGap'];
+    alignContent?: CSSObject['alignContent'];
+    alignSelf?: CSSObject['alignSelf'];
+    justifySelf?: CSSObject['justifySelf'];
+    borderRadius?: CSSObject['borderRadius'];
+    borderTopLeftRadius?: CSSObject['borderTopLeftRadius'];
+    borderTopRightRadius?: CSSObject['borderTopRightRadius'];
+    borderBottomLeftRadius?: CSSObject['borderBottomLeftRadius'];
+    borderBottomRightRadius?: CSSObject['borderBottomRightRadius'];
+    outline?: CSSObject['outline'];
+    outlineColor?: CSSObject['outlineColor'];
+    outlineWidth?: CSSObject['outlineWidth'];
+    outlineStyle?: CSSObject['outlineStyle'];
+    outlineOffset?: CSSObject['outlineOffset'];
+    width?: CSSObject['width'];
+    height?: CSSObject['height'];
+    minWidth?: CSSObject['minWidth'];
+    minHeight?: CSSObject['minHeight'];
+    maxWidth?: CSSObject['maxWidth'];
+    maxHeight?: CSSObject['maxHeight'];
+    backgroundColor?: CSSObject['backgroundColor'];
+    border?: CSSObject['border'];
+    borderTop?: CSSObject['borderTop'];
+    borderBottom?: CSSObject['borderBottom'];
+    borderLeft?: CSSObject['borderLeft'];
+    borderRight?: CSSObject['borderRight'];
+    boxShadow?: CSSObject['boxShadow'];
+    overflow?: CSSObject['overflow'];
+    overflowX?: CSSObject['overflowX'];
+    overflowY?: CSSObject['overflowY'];
+    contentCentered?: boolean;
+    cursor?: CSSObject['cursor'];
+    placeholderStyles?: CSSObject;
+    resize?: CSSObject['resize'];
+    fontFamily?: CSSObject['fontFamily'];
+};
+export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement> & PrimitiveTextareaProps;
+declare const PrimitiveTextarea: React.FC<TextareaProps>;
+export default PrimitiveTextarea;

package/dist/components/ProgressBar/ProgressBar.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { ProgressBarProps } from './types';
+declare const ProgressBar: React.FC<ProgressBarProps>;
+export default ProgressBar;

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

@@ -0,0 +1,3 @@
+export { default as ProgressBar } from './ProgressBar';
+export * from './types';
+export * from './utils';

package/dist/components/ProgressBar/progressbar.tokens.d.ts

@@ -0,0 +1,63 @@
+import { ProgressBarSize } from './types';
+import { CSSObject } from 'styled-components';
+export type ProgressBarTokenType = {
+    container: {
+        borderRadius: string;
+        overflow: string;
+    };
+    height: {
+        [ProgressBarSize.SMALL]: CSSObject['height'];
+        [ProgressBarSize.MEDIUM]: CSSObject['height'];
+        [ProgressBarSize.LARGE]: CSSObject['height'];
+    };
+    fill: {
+        solid: {
+            backgroundColor: CSSObject['backgroundColor'];
+            borderRadius: CSSObject['borderRadius'];
+        };
+        segmented: {
+            backgroundColor: CSSObject['backgroundColor'];
+            borderRadius: CSSObject['borderRadius'];
+        };
+    };
+    empty: {
+        solid: {
+            backgroundColor: CSSObject['backgroundColor'];
+        };
+        segmented: {
+            backgroundColor: CSSObject['backgroundColor'];
+            backgroundImage: CSSObject['backgroundImage'];
+            backgroundSize: CSSObject['backgroundSize'];
+        };
+    };
+    circular: {
+        size: {
+            [ProgressBarSize.SMALL]: CSSObject['width'];
+            [ProgressBarSize.MEDIUM]: CSSObject['width'];
+            [ProgressBarSize.LARGE]: CSSObject['width'];
+        };
+        strokeWidth: {
+            [ProgressBarSize.SMALL]: number;
+            [ProgressBarSize.MEDIUM]: number;
+            [ProgressBarSize.LARGE]: number;
+        };
+        solid: {
+            stroke: CSSObject['stroke'];
+            background: CSSObject['stroke'];
+        };
+        segmented: {
+            stroke: CSSObject['stroke'];
+            background: CSSObject['stroke'];
+            dashArray: string;
+            dashOffset: string;
+        };
+    };
+    label: {
+        fontSize: CSSObject['fontSize'];
+        fontWeight: CSSObject['fontWeight'];
+        color: CSSObject['color'];
+    };
+    transition: string;
+};
+declare const progressBarTokens: ProgressBarTokenType;
+export default progressBarTokens;

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

@@ -0,0 +1,22 @@
+export declare enum ProgressBarSize {
+    SMALL = "sm",
+    MEDIUM = "md",
+    LARGE = "lg"
+}
+export declare enum ProgressBarVariant {
+    SOLID = "solid",
+    SEGMENTED = "segmented",
+    CIRCULAR = "circular"
+}
+export declare enum ProgressBarType {
+    SOLID = "solid",
+    SEGMENTED = "segmented"
+}
+export type ProgressBarProps = {
+    value: number;
+    size?: ProgressBarSize;
+    variant?: ProgressBarVariant;
+    type?: ProgressBarType;
+    showLabel?: boolean;
+    className?: string;
+};

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

@@ -0,0 +1,7 @@
+import { ProgressBarSize, ProgressBarVariant } from './types';
+import { CSSObject } from 'styled-components';
+export declare const getProgressBarStyles: (size: ProgressBarSize) => CSSObject;
+export declare const getProgressBarFillStyles: (variant: ProgressBarVariant) => CSSObject;
+export declare const getProgressBarEmptyStyles: (variant: ProgressBarVariant) => CSSObject;
+export declare const getProgressBarLabelStyles: () => CSSObject;
+export declare const clampValue: (value: number) => number;

package/dist/components/Radio/Radio.d.ts

@@ -0,0 +1,6 @@
+import { RadioProps } from './types';
+export declare const Radio: {
+    ({ id, value, checked, defaultChecked, onChange, disabled, required, error, size, children, subtext, slot, name, ...rest }: RadioProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default Radio;

package/dist/components/Radio/RadioGroup.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { RadioGroupProps } from './types';
+declare const RadioGroup: React.ForwardRefExoticComponent<RadioGroupProps & React.RefAttributes<HTMLDivElement>>;
+export default RadioGroup;

package/dist/components/Radio/StyledRadio.d.ts

@@ -0,0 +1,7 @@
+import { RadioSize } from './types';
+export declare const StyledRadioInput: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {
+    size: RadioSize;
+    $isDisabled: boolean;
+    $isChecked: boolean;
+    $error?: boolean;
+}>> & string;

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

@@ -0,0 +1,4 @@
+export { default as Radio } from './Radio';
+export { default as RadioGroup } from './RadioGroup';
+export { RadioSize } from './types';
+export type { RadioProps, RadioGroupProps } from './types';

package/dist/components/Radio/radio.token.d.ts

@@ -0,0 +1,75 @@
+import { CSSObject } from 'styled-components';
+import { ThemeType } from '../../tokens';
+import { RadioSize } from './types';
+import { BreakpointType } from '../../breakpoints/breakPoints';
+export type RadioState = 'default' | 'hover' | 'disabled' | 'error';
+export type RadioIndicatorState = 'active' | 'inactive';
+export type RadioTokensType = Readonly<{
+    gap: CSSObject['gap'];
+    slotGap: CSSObject['gap'];
+    groupGap: CSSObject['gap'];
+    indicator: {
+        [key in RadioIndicatorState]: {
+            background: {
+                [key in Exclude<RadioState, 'error'>]: CSSObject['backgroundColor'];
+            };
+            border: {
+                [key in Exclude<RadioState, 'error'>]: CSSObject['borderColor'];
+            };
+        };
+    };
+    activeIndicator: {
+        active: {
+            background: {
+                [key in Exclude<RadioState, 'hover' | 'error'>]: CSSObject['backgroundColor'];
+            };
+        };
+    };
+    content: {
+        label: {
+            color: {
+                [key in RadioState]: CSSObject['color'];
+            };
+            font: {
+                [key in RadioSize]: {
+                    fontSize: CSSObject['fontSize'];
+                    fontWeight: CSSObject['fontWeight'];
+                };
+            };
+        };
+        sublabel: {
+            color: {
+                [key in RadioState]: CSSObject['color'];
+            };
+            font: {
+                [key in RadioSize]: {
+                    fontSize: CSSObject['fontSize'];
+                    fontWeight: CSSObject['fontWeight'];
+                };
+            };
+        };
+    };
+    height: {
+        [key in RadioSize]: CSSObject['height'];
+    };
+    borderWidth: {
+        [key in RadioIndicatorState]: {
+            [key in Exclude<RadioState, 'error'>]: number;
+        };
+    };
+    slot: {
+        size: {
+            [key in RadioSize]: CSSObject['width'];
+        };
+    };
+    required: {
+        color: CSSObject['color'];
+        spacing: CSSObject['marginLeft'];
+    };
+}>;
+export type ResponsiveRadioTokens = {
+    [key in keyof BreakpointType]: RadioTokensType;
+};
+export declare const getRadioTokens: (foundationToken: ThemeType) => ResponsiveRadioTokens;
+declare const radioTokens: ResponsiveRadioTokens;
+export default radioTokens;

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

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

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

@@ -0,0 +1,47 @@
+import { default as React } from 'react';
+import { RadioSize, RadioProps } from './types';
+import { RadioTokensType } from './radio.token';
+export declare const getRadioDataState: (checked: boolean) => string;
+export declare const extractPixelValue: (tokenValue: string) => number;
+export declare const getSpacingBySize: (size: RadioSize) => {
+    marginLeft: string;
+    marginTop: string;
+};
+export declare const isControlledRadio: (checked: boolean | undefined) => boolean;
+export declare const createRadioInputProps: (checked: boolean | undefined, defaultChecked: boolean) => {
+    checked: boolean | undefined;
+    defaultChecked?: undefined;
+} | {
+    defaultChecked: boolean;
+    checked?: undefined;
+};
+export declare const getCurrentCheckedState: (checked: boolean | undefined, defaultChecked: boolean) => boolean;
+export declare const createRadioChangeHandler: (disabled: boolean, onChange?: (checked: boolean) => void) => (e: React.ChangeEvent<HTMLInputElement>) => void;
+export declare const isRadioElement: (child: React.ReactElement, RadioComponent: React.ComponentType<RadioProps>) => child is React.ReactElement<RadioProps>;
+export declare const shouldRadioBeChecked: (groupValue: string | undefined, groupDefaultValue: string | undefined, radioValue: string) => boolean;
+export declare const createGroupChangeHandler: (onChange?: (value: string) => void) => (isChecked: boolean, childValue: string) => void;
+export declare const isValidRadioValue: (value: unknown) => value is string;
+/**
+ * Gets the text color based on radio state
+ */
+export declare const getRadioTextColor: (radioTokens: RadioTokensType, isDisabled: boolean, error: boolean, isSubtext?: boolean) => string;
+/**
+ * Gets the text properties for radio labels and subtext
+ */
+export declare const getRadioTextProps: (radioTokens: RadioTokensType, size: RadioSize, isDisabled: boolean, error: boolean, isSubtext?: boolean) => {
+    fontSize: string;
+    fontWeight: string;
+    color: string;
+};
+/**
+ * Gets label styles for radio components
+ */
+export declare const getRadioLabelStyles: (radioTokens: RadioTokensType, isDisabled: boolean) => {
+    display: "inline-flex";
+    alignItems: "center";
+    padding: number;
+    margin: number;
+    minHeight: string;
+    cursor: "not-allowed" | "pointer";
+    lineHeight: number;
+};

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

@@ -0,0 +1,25 @@
+import { SelectMenuGroupType, SelectMenuSize, SelectMenuVariant } from './types';
+import { default as React } from 'react';
+export declare enum SelectionTagType {
+    COUNT = "count",
+    TEXT = "text"
+}
+type SelectProps = {
+    label: string;
+    subLabel?: string;
+    hintText?: string;
+    required?: boolean;
+    helpIconText?: string;
+    placeholder: string;
+    size?: SelectMenuSize;
+    items: SelectMenuGroupType[];
+    variant?: SelectMenuVariant;
+    selected: string | string[];
+    onSelectChange: (value: string | string[]) => void;
+    allowMultiSelect?: boolean;
+    enableSearch?: boolean;
+    selectionTagType?: SelectionTagType;
+    slot?: React.ReactNode;
+};
+declare const Select: ({ items, variant, label, subLabel, hintText, required, helpIconText, placeholder, size, selected, onSelectChange, allowMultiSelect, enableSearch, selectionTagType, slot, }: SelectProps) => import("react/jsx-runtime").JSX.Element;
+export default Select;

package/dist/components/Select/SelectMenu.d.ts

@@ -0,0 +1,3 @@
+import { SelectMenuProps } from './types';
+declare const SelectMenu: ({ trigger, items, asModal, alignment, side, sideOffset, alignOffset, maxHeight, selected, onSelect, allowMultiSelect, enableSearch, onOpenChange, }: SelectMenuProps) => import("react/jsx-runtime").JSX.Element;
+export default SelectMenu;

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

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

package/dist/components/Select/select.token.d.ts

@@ -0,0 +1,40 @@
+import { CSSObject } from 'styled-components';
+type SelectTokenTypes = {
+    trigger: {
+        container: {
+            gap: CSSObject['gap'];
+        };
+        label: {
+            color: CSSObject['color'];
+            fontWeight: CSSObject['fontWeight'];
+            fontSize: CSSObject['fontSize'];
+        };
+        selectedValue: {
+            color: CSSObject['color'];
+            font: {
+                weight: CSSObject['fontWeight'];
+                size: {
+                    sm: CSSObject['fontSize'];
+                    md: CSSObject['fontSize'];
+                    lg: CSSObject['fontSize'];
+                };
+            };
+            padding: {
+                sm: {
+                    x: CSSObject['padding'];
+                    y: CSSObject['padding'];
+                };
+                md: {
+                    x: CSSObject['padding'];
+                    y: CSSObject['padding'];
+                };
+                lg: {
+                    x: CSSObject['padding'];
+                    y: CSSObject['padding'];
+                };
+            };
+        };
+    };
+};
+declare const selectTokens: Readonly<SelectTokenTypes>;
+export default selectTokens;