@juspay/blend-design-system 0.0.1

package/dist/components/Drawer/drawer.tokens.d.ts

@@ -0,0 +1,60 @@
+import { CSSObject } from 'styled-components';
+import { FoundationTokenType } from '../../tokens/theme.token';
+export type DrawerTokensType = {
+    overlay: {
+        backgroundColor: CSSObject['backgroundColor'];
+        zIndex: CSSObject['zIndex'];
+    };
+    content: {
+        backgroundColor: CSSObject['backgroundColor'];
+        borderRadius: CSSObject['borderRadius'];
+        boxShadow: CSSObject['boxShadow'];
+        zIndex: CSSObject['zIndex'];
+        border: CSSObject['border'];
+    };
+    mobileOffset: {
+        top: CSSObject['top'];
+        bottom: CSSObject['bottom'];
+        left: CSSObject['left'];
+        right: CSSObject['right'];
+    };
+    handle: {
+        backgroundColor: CSSObject['backgroundColor'];
+        borderRadius: CSSObject['borderRadius'];
+        width: CSSObject['width'];
+        height: CSSObject['height'];
+    };
+    header: {
+        padding: CSSObject['padding'];
+        borderBottom: CSSObject['borderBottom'];
+        backgroundColor: CSSObject['backgroundColor'];
+        title: {
+            color: CSSObject['color'];
+            fontSize: CSSObject['fontSize'];
+            fontWeight: CSSObject['fontWeight'];
+            lineHeight: CSSObject['lineHeight'];
+        };
+        description: {
+            color: CSSObject['color'];
+            fontSize: CSSObject['fontSize'];
+            lineHeight: CSSObject['lineHeight'];
+        };
+    };
+    body: {
+        padding: CSSObject['padding'];
+        backgroundColor: CSSObject['backgroundColor'];
+        maxHeight: CSSObject['maxHeight'];
+        overflowY: CSSObject['overflowY'];
+    };
+    footer: {
+        padding: CSSObject['padding'];
+        borderTop: CSSObject['borderTop'];
+        backgroundColor: CSSObject['backgroundColor'];
+        gap: CSSObject['gap'];
+        alignItems: CSSObject['alignItems'];
+        justifyContent: CSSObject['justifyContent'];
+    };
+};
+export declare const drawerTokens: DrawerTokensType;
+export declare const getDrawerComponentTokens: (foundationToken: FoundationTokenType) => DrawerTokensType;
+export default drawerTokens;

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

@@ -0,0 +1,3 @@
+export { Drawer, DrawerTrigger, DrawerPortal, DrawerOverlay, DrawerContent, DrawerHeader, DrawerTitle, DrawerDescription, DrawerBody, DrawerFooter, DrawerClose, StatusDrawer, MultiSelectDrawer, SingleSelectDrawer, NestedMultiSelectDrawer, NestedSingleSelectDrawer, } from './Drawer';
+export * from './types';
+export type { DrawerTokensType } from './drawer.tokens';

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

@@ -0,0 +1,384 @@
+import { ReactNode } from 'react';
+import { ButtonV2Props } from '../Button/types';
+export type DrawerDirection = 'top' | 'bottom' | 'left' | 'right';
+export type DrawerProps = {
+    /**
+     * Whether the drawer is open
+     */
+    open?: boolean;
+    /**
+     * Callback when the drawer open state changes
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * The direction from which the drawer slides in
+     * @default 'bottom'
+     */
+    direction?: DrawerDirection;
+    /**
+     * Whether the drawer should be modal (with overlay)
+     * @default true
+     */
+    modal?: boolean;
+    /**
+     * Whether the drawer can be dismissed by clicking outside
+     * @default true
+     */
+    dismissible?: boolean;
+    /**
+     * Whether to show the drag handle (only for bottom/top drawers)
+     * @default true
+     */
+    showHandle?: boolean;
+    /**
+     * Custom handle element
+     */
+    handle?: ReactNode;
+    /**
+     * Whether the drawer should be nested (for stacking effect)
+     * @default false
+     */
+    nested?: boolean;
+    /**
+     * Custom snap points for the drawer (only for bottom/top drawers)
+     */
+    snapPoints?: (string | number)[];
+    /**
+     * Active snap point (can be index or the snap point value itself)
+     */
+    activeSnapPoint?: number | string | null;
+    /**
+     * Callback when snap point changes
+     */
+    onSnapPointChange?: (activeSnapPoint: number | string | null) => void;
+    /**
+     * Whether the drawer should fade from the given snap point index
+     */
+    fadeFromIndex?: number;
+    /**
+     * Disable velocity-based snapping, ensuring sequential snap point navigation
+     * @default false
+     */
+    snapToSequentialPoint?: boolean;
+    /**
+     * Custom mobile offset values (overrides token defaults)
+     */
+    mobileOffset?: {
+        top?: string;
+        bottom?: string;
+        left?: string;
+        right?: string;
+    };
+    /**
+     * Custom class name for the drawer content
+     */
+    className?: string;
+    /**
+     * Custom class name for the overlay
+     */
+    overlayClassName?: string;
+    /**
+     * Custom styles for the drawer content
+     */
+    style?: React.CSSProperties;
+    /**
+     * Children content
+     */
+    children: ReactNode;
+};
+export type DrawerTriggerProps = {
+    /**
+     * The trigger element
+     */
+    children: ReactNode;
+    /**
+     * Custom class name
+     */
+    className?: string;
+    /**
+     * Whether the trigger is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Custom click handler
+     */
+    onClick?: () => void;
+};
+export type DrawerContentProps = {
+    /**
+     * Content of the drawer
+     */
+    children: ReactNode;
+    /**
+     * Custom class name
+     */
+    className?: string;
+    /**
+     * Custom styles
+     */
+    style?: React.CSSProperties;
+};
+export type DrawerHeaderProps = {
+    /**
+     * Header content
+     */
+    children: ReactNode;
+    /**
+     * Custom class name
+     */
+    className?: string;
+};
+export type DrawerTitleProps = {
+    /**
+     * Title content
+     */
+    children: ReactNode;
+    /**
+     * Custom class name
+     */
+    className?: string;
+};
+export type DrawerDescriptionProps = {
+    /**
+     * Description content
+     */
+    children: ReactNode;
+    /**
+     * Custom class name
+     */
+    className?: string;
+};
+export type DrawerFooterProps = {
+    /**
+     * Footer content
+     */
+    children: ReactNode;
+    /**
+     * Custom class name
+     */
+    className?: string;
+};
+export type DrawerCloseProps = {
+    /**
+     * Close button content
+     */
+    children: ReactNode;
+    /**
+     * Custom class name
+     */
+    className?: string;
+    /**
+     * Whether the close button is disabled
+     */
+    disabled?: boolean;
+};
+export type StatusDrawerProps = {
+    /**
+     * Whether the drawer is open
+     */
+    open?: boolean;
+    /**
+     * Callback when the drawer open state changes
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * The heading text (gray-700, heading.sm)
+     */
+    heading: string;
+    /**
+     * The description text (gray-500, body.md)
+     */
+    description: string;
+    /**
+     * Primary action button props (e.g., Delete, OK, Confirm)
+     */
+    primaryButtonProps: ButtonV2Props;
+    /**
+     * Secondary action button props (e.g., Cancel) - optional
+     */
+    secondaryButtonProps?: ButtonV2Props;
+    /**
+     * 56x56px slot for any React element (icon, image, etc.)
+     */
+    slot: ReactNode;
+    /**
+     * The direction from which the drawer slides in
+     * @default 'bottom'
+     */
+    direction?: DrawerDirection;
+    /**
+     * Whether the drawer should be modal (with overlay)
+     * @default true
+     */
+    modal?: boolean;
+    /**
+     * Whether the drawer can be dismissed by clicking outside
+     * @default true
+     */
+    dismissible?: boolean;
+    /**
+     * Custom mobile offset values (overrides token defaults)
+     */
+    mobileOffset?: {
+        top?: string;
+        bottom?: string;
+        left?: string;
+        right?: string;
+    };
+    /**
+     * Custom class name for the drawer content
+     */
+    className?: string;
+    /**
+     * Custom styles for the drawer content
+     */
+    style?: React.CSSProperties;
+};
+export type SelectDrawerItem = {
+    /**
+     * Unique identifier for the item
+     */
+    value: string;
+    /**
+     * Display label for the item
+     */
+    label: string;
+    /**
+     * Optional subtitle/description
+     */
+    subLabel?: string;
+    /**
+     * Optional icon or element to display on the left
+     */
+    slot1?: ReactNode;
+    /**
+     * Whether the item is disabled
+     */
+    disabled?: boolean;
+};
+export type SelectDrawerGroup = {
+    /**
+     * Optional group label
+     */
+    groupLabel?: string;
+    /**
+     * Items in this group
+     */
+    items: SelectDrawerItem[];
+    /**
+     * Whether to show separator after this group
+     */
+    showSeparator?: boolean;
+};
+export type SelectDrawerProps = {
+    /**
+     * Whether the drawer is open
+     */
+    open?: boolean;
+    /**
+     * Callback when the drawer open state changes
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * The heading text (gray-800, body.lg)
+     */
+    heading: string;
+    /**
+     * The description text (gray-500, body.md)
+     */
+    description?: string;
+    /**
+     * 14x14px slot for any React element (icon, etc.)
+     */
+    rightSlot?: ReactNode;
+    /**
+     * Array of items or groups to display
+     */
+    items: SelectDrawerGroup[];
+    /**
+     * Currently selected values (for multi-select)
+     */
+    selectedValues?: string[];
+    /**
+     * Single selected value (for single-select)
+     */
+    selectedValue?: string;
+    /**
+     * Callback when selection changes (multi-select)
+     */
+    onSelectionChange?: (selectedValues: string[]) => void;
+    /**
+     * Callback when single selection changes
+     */
+    onValueChange?: (value: string) => void;
+    /**
+     * Whether to enable search functionality
+     * @default true
+     */
+    enableSearch?: boolean;
+    /**
+     * Search placeholder text
+     * @default 'Search'
+     */
+    searchPlaceholder?: string;
+    /**
+     * Whether this is a multi-select drawer
+     * @default true
+     */
+    multiSelect?: boolean;
+    /**
+     * Cancel button text
+     * @default 'Clear All'
+     */
+    cancelText?: string;
+    /**
+     * Confirm button text
+     * @default 'Done'
+     */
+    confirmText?: string;
+    /**
+     * Cancel button click handler
+     */
+    onCancel?: () => void;
+    /**
+     * Confirm button click handler
+     */
+    onConfirm?: () => void;
+    /**
+     * Whether to show the cancel button
+     * @default true
+     */
+    showCancelButton?: boolean;
+    /**
+     * The direction from which the drawer slides in
+     * @default 'bottom'
+     */
+    direction?: DrawerDirection;
+    /**
+     * Whether the drawer should be modal (with overlay)
+     * @default true
+     */
+    modal?: boolean;
+    /**
+     * Whether the drawer can be dismissed by clicking outside
+     * @default true
+     */
+    dismissible?: boolean;
+    /**
+     * Custom mobile offset values (overrides token defaults)
+     */
+    mobileOffset?: {
+        top?: string;
+        bottom?: string;
+        left?: string;
+        right?: string;
+    };
+    /**
+     * Custom class name for the drawer content
+     */
+    className?: string;
+    /**
+     * Custom styles for the drawer content
+     */
+    style?: React.CSSProperties;
+};

package/dist/components/Dropdown/Dropdown.d.ts

@@ -0,0 +1,9 @@
+import { MenuV2GroupType } from '../Menu';
+declare const Dropdown: ({ label, optionalLabel, hintText, slot, items, }: {
+    label?: string;
+    optionalLabel?: string;
+    hintText?: string;
+    slot?: React.ReactNode;
+    items: MenuV2GroupType[];
+}) => import("react/jsx-runtime").JSX.Element;
+export default Dropdown;

package/dist/components/GradientBlur/GradientBlur.d.ts

@@ -0,0 +1,2 @@
+declare const GradientBlur: () => import("react/jsx-runtime").JSX.Element;
+export default GradientBlur;

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

@@ -0,0 +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;
+export default DropdownInput;

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

@@ -0,0 +1,33 @@
+import { CSSObject } from 'styled-components';
+import { FoundationTokenType } from '../../../tokens/theme.token';
+import { DropdownInputSize, DropdownInputState } from './types';
+export type DropdownInputTokensType = {
+    input: {
+        gap: CSSObject['gap'];
+        borderRadius?: CSSObject['borderRadius'];
+        boxShadow: {
+            [key in DropdownInputState]: CSSObject['boxShadow'];
+        };
+        paddingX: {
+            [key in DropdownInputSize]: CSSObject['padding'];
+        };
+        paddingY: {
+            [key in DropdownInputSize]: CSSObject['padding'];
+        };
+        border: {
+            [key in DropdownInputState]: CSSObject['border'];
+        };
+        color: {
+            [key in DropdownInputState]: CSSObject['color'];
+        };
+        outline: {
+            [key in DropdownInputState]: CSSObject['outline'];
+        };
+        backgroundColor: {
+            [key in DropdownInputState]: CSSObject['backgroundColor'];
+        };
+    };
+};
+declare const dropdownInputTokens: Readonly<DropdownInputTokensType>;
+export declare const getDropdownInputTokens: (foundationTheme: FoundationTokenType) => DropdownInputTokensType;
+export default dropdownInputTokens;

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

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

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

@@ -0,0 +1,31 @@
+import { TextInputSize } from '../TextInput/types';
+import { SelectMenuGroupType } from '../../Select/types';
+export declare enum DropdownInputSize {
+    MD = "md",
+    LG = "lg"
+}
+export declare enum DropdownInputState {
+    DEFAULT = "default",
+    HOVER = "hover",
+    FOCUS = "focus",
+    ERROR = "error",
+    DISABLED = "disabled"
+}
+export type DropdownInputProps = {
+    label?: string;
+    sublabel?: string;
+    helpIconHintText?: string;
+    error?: boolean;
+    errorMessage?: string;
+    hintText?: string;
+    value?: string;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    slot?: React.ReactNode;
+    size?: TextInputSize;
+    dropDownValue?: string;
+    onDropDownChange?: (value: string) => void;
+    dropDownItems: SelectMenuGroupType[];
+    dropdownName?: string;
+    onDropdownOpen?: () => void;
+    onDropdownClose?: () => void;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'style' | 'className'>;

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

@@ -0,0 +1,3 @@
+import { MultiValueInputProps } from './types';
+declare const MultiValueInput: ({ label, sublabel, disabled, required, error, errorMessage, hintText, tags, onTagAdd, onTagRemove, size, ...rest }: MultiValueInputProps) => import("react/jsx-runtime").JSX.Element;
+export default MultiValueInput;

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

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

package/dist/components/Inputs/MultiValueInput/multiValueInput.tokens.d.ts

@@ -0,0 +1,33 @@
+import { CSSObject } from 'styled-components';
+import { FoundationTokenType } from '../../../tokens/theme.token';
+import { MultiValueInputSize, MultiValueInputState } from './types';
+export type MultiValueInputTokensType = {
+    input: {
+        gap: CSSObject['gap'];
+        borderRadius?: CSSObject['borderRadius'];
+        boxShadow: {
+            [key in MultiValueInputState]: CSSObject['boxShadow'];
+        };
+        paddingX: {
+            [key in MultiValueInputSize]: CSSObject['padding'];
+        };
+        paddingY: {
+            [key in MultiValueInputSize]: CSSObject['padding'];
+        };
+        border: {
+            [key in MultiValueInputState]: CSSObject['border'];
+        };
+        color: {
+            [key in MultiValueInputState]: CSSObject['color'];
+        };
+        outline: {
+            [key in MultiValueInputState]: CSSObject['outline'];
+        };
+        backgroundColor: {
+            [key in MultiValueInputState]: CSSObject['backgroundColor'];
+        };
+    };
+};
+declare const multiValueInputTokens: Readonly<MultiValueInputTokensType>;
+export declare const getMultiValueInputTokens: (foundationTheme: FoundationTokenType) => MultiValueInputTokensType;
+export default multiValueInputTokens;

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

@@ -0,0 +1,25 @@
+import { TextInputSize } from '../TextInput/types';
+export declare enum MultiValueInputSize {
+    MD = "md",
+    LG = "lg"
+}
+export declare enum MultiValueInputState {
+    DEFAULT = "default",
+    HOVER = "hover",
+    FOCUS = "focus",
+    ERROR = "error",
+    DISABLED = "disabled"
+}
+export type MultiValueInputProps = {
+    label?: string;
+    sublabel?: string;
+    helpIconHintText?: string;
+    error?: boolean;
+    errorMessage?: string;
+    hintText?: string;
+    disabled?: boolean;
+    tags?: string[];
+    onTagAdd?: (tag: string) => void;
+    onTagRemove?: (tag: string) => void;
+    size?: TextInputSize;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'style' | 'className'>;

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

@@ -0,0 +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;
+export default NumberInput;

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

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

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

@@ -0,0 +1,44 @@
+import { CSSObject } from 'styled-components';
+import { FoundationTokenType } from '../../../tokens/theme.token';
+declare enum TextInputSize {
+    MD = "md",
+    LG = "lg"
+}
+declare enum TextInputState {
+    DEFAULT = "default",
+    HOVER = "hover",
+    FOCUS = "focus",
+    ERROR = "error",
+    DISABLED = "disabled"
+}
+export type NumberInputTokensType = {
+    input: {
+        gap: CSSObject['gap'];
+        borderRadius?: CSSObject['borderRadius'];
+        boxShadow: {
+            [key in TextInputState]: CSSObject['boxShadow'];
+        };
+        paddingX: {
+            [key in TextInputSize]: CSSObject['padding'];
+        };
+        paddingY: {
+            [key in TextInputSize]: CSSObject['padding'];
+        };
+        border: {
+            [key in TextInputState]: CSSObject['border'];
+        };
+        color: {
+            [key in TextInputState]: CSSObject['color'];
+        };
+        outline: {
+            [key in TextInputState]: CSSObject['outline'];
+        };
+        backgroundColor: {
+            default: CSSObject['backgroundColor'];
+            disabled: CSSObject['backgroundColor'];
+        };
+    };
+};
+declare const numberInputTokens: Readonly<NumberInputTokensType>;
+export declare const getNumberInputTokens: (foundationTheme: FoundationTokenType) => NumberInputTokensType;
+export default numberInputTokens;

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

@@ -0,0 +1,16 @@
+export declare enum NumberInputSize {
+    MEDIUM = "md",
+    LARGE = "lg"
+}
+export type NumberInputProps = {
+    value: number;
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    step?: number;
+    error?: boolean;
+    errorMessage?: string;
+    size?: NumberInputSize;
+    label?: string;
+    sublabel?: string;
+    helpIconHintText?: string;
+    hintText?: string;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'style' | 'className' | 'value'>;

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

@@ -0,0 +1,3 @@
+import { OTPProps } from './types';
+declare const OTPInput: ({ label, sublabel, disabled, helpIconHintText, name, required, error, errorMessage, hintText, value, onChange, form, ...rest }: OTPProps) => import("react/jsx-runtime").JSX.Element;
+export default OTPInput;

package/dist/components/Inputs/OTPInput/index.d.ts

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