@juspay/blend-design-system 0.0.1

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

@@ -0,0 +1,55 @@
+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 declare const dummyMenuItemsLong: SelectMenuGroupType[];

package/dist/components/Sidebar/Sidebar.d.ts

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

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

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

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

@@ -0,0 +1,44 @@
+import { ReactNode } from 'react';
+import { DirectoryData } from '../Directory/types';
+export type SidebarNavItem = {
+    label: string;
+    leftSlot?: ReactNode;
+    rightSlot?: ReactNode;
+    onClick?: () => void;
+};
+export type SidebarNavSection = {
+    label?: string;
+    navItems: SidebarNavItem[];
+};
+export type MerchantData = {
+    label: string;
+    sections: SidebarNavSection[];
+};
+export type TenantData = {
+    label: string;
+    icon: ReactNode;
+    merchantData: MerchantData[];
+};
+type TenantInfo = {
+    label: string;
+    icon: ReactNode;
+    id?: string;
+};
+type MerchantInfo = {
+    label: string;
+    icon: ReactNode;
+    id?: string;
+};
+export type SidebarProps = {
+    tenants: TenantInfo[];
+    merchants: MerchantInfo[];
+    children: ReactNode;
+    data: DirectoryData[];
+    topbar: ReactNode;
+    activeTenant?: string;
+    setActiveTenant?: (tenant: string) => void;
+    activeMerchant?: string;
+    setActiveMerchant?: (merchant: string) => void;
+    footer?: ReactNode;
+};
+export {};

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

@@ -0,0 +1,3 @@
+import { SingleSelectProps } from './types';
+declare const SingleSelect: ({ label, subLabel, hintText, required, helpIconText, placeholder, size, items, name, variant, disabled, selected, onSelect, enableSearch, slot, useDrawerOnMobile, alignment, side, sideOffset, alignOffset, minWidth, maxWidth, maxHeight, }: SingleSelectProps) => import("react/jsx-runtime").JSX.Element;
+export default SingleSelect;

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

@@ -0,0 +1,21 @@
+import { default as React } from 'react';
+import { SelectMenuAlignment, SelectMenuSide, SelectMenuGroupType } from '../Select';
+type SingleSelectMenuProps = {
+    items: SelectMenuGroupType[];
+    selected: string;
+    onSelect: (value: string) => void;
+    trigger: React.ReactNode;
+    minWidth?: number;
+    maxWidth?: number;
+    maxHeight?: number;
+    enableSearch?: boolean;
+    disabled?: boolean;
+    alignment?: SelectMenuAlignment;
+    side?: SelectMenuSide;
+    sideOffset?: number;
+    alignOffset?: number;
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+};
+declare const SingleSelectMenu: ({ items, selected, onSelect, trigger, minWidth, maxWidth, maxHeight, enableSearch, disabled, alignment, side, sideOffset, alignOffset, open, onOpenChange, }: SingleSelectMenuProps) => import("react/jsx-runtime").JSX.Element;
+export default SingleSelectMenu;

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

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

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

@@ -0,0 +1,26 @@
+import { SelectMenuAlignment, SelectMenuSide, SelectMenuGroupType, SelectMenuSize, SelectMenuVariant } from '../Select';
+export type SingleSelectProps = {
+    label: string;
+    subLabel?: string;
+    hintText?: string;
+    required?: boolean;
+    helpIconText?: string;
+    placeholder: string;
+    size?: SelectMenuSize;
+    items: SelectMenuGroupType[];
+    variant?: SelectMenuVariant;
+    selected: string;
+    onSelect: (value: string) => void;
+    enableSearch?: boolean;
+    slot?: React.ReactNode;
+    disabled?: boolean;
+    name?: string;
+    useDrawerOnMobile?: boolean;
+    alignment?: SelectMenuAlignment;
+    side?: SelectMenuSide;
+    sideOffset?: number;
+    alignOffset?: number;
+    minWidth?: number;
+    maxWidth?: number;
+    maxHeight?: number;
+};

package/dist/components/Slider/Slider.d.ts

@@ -0,0 +1,5 @@
+import { SliderProps as BaseSliderProps } from './types';
+import * as SliderPrimitive from '@radix-ui/react-slider';
+type SliderProps = BaseSliderProps & Omit<React.ComponentProps<typeof SliderPrimitive.Root>, keyof BaseSliderProps>;
+declare const Slider: import('react').ForwardRefExoticComponent<Omit<SliderProps, "ref"> & import('react').RefAttributes<HTMLSpanElement>>;
+export default Slider;

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

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

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

@@ -0,0 +1,30 @@
+export declare enum SliderVariant {
+    PRIMARY = "primary",
+    SECONDARY = "secondary"
+}
+export declare enum SliderSize {
+    SMALL = "sm",
+    MEDIUM = "md",
+    LARGE = "lg"
+}
+export declare enum SliderValueType {
+    NUMBER = "number",
+    PERCENTAGE = "percentage",
+    DECIMAL = "decimal"
+}
+export type SliderValueFormatConfig = {
+    type: SliderValueType;
+    decimalPlaces?: number;
+    prefix?: string;
+    suffix?: string;
+    showLabels?: boolean;
+    formatter?: (value: number) => string;
+};
+export type SliderLabelPosition = 'top' | 'bottom' | 'inline';
+export type SliderProps = {
+    variant?: SliderVariant;
+    size?: SliderSize;
+    valueFormat?: SliderValueFormatConfig;
+    showValueLabels?: boolean;
+    labelPosition?: SliderLabelPosition;
+};

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

@@ -0,0 +1,49 @@
+import { default as React } from 'react';
+import { SliderVariant, SliderSize, SliderValueType, SliderValueFormatConfig } from './types';
+type SliderCSSProperties = React.CSSProperties & {
+    '&:hover'?: {
+        boxShadow?: string;
+    };
+    '&:focus'?: {
+        outline?: string;
+        boxShadow?: string;
+    };
+    '&:active'?: {
+        cursor?: string;
+    };
+    '&:disabled'?: {
+        cursor?: string;
+        opacity?: string | number;
+    };
+};
+interface SliderTokenStyles {
+    root: SliderCSSProperties;
+    track: SliderCSSProperties;
+    range: SliderCSSProperties;
+    thumb: SliderCSSProperties;
+}
+export declare const getSliderTokenStyles: (variant: SliderVariant, size: SliderSize) => SliderTokenStyles;
+/**
+ * Formats a slider value according to the specified format configuration
+ */
+export declare const formatSliderValue: (value: number, format?: SliderValueFormatConfig) => string;
+/**
+ * Parse a formatted string value back to a number
+ */
+export declare const parseSliderValue: (formattedValue: string, format?: SliderValueFormatConfig) => number;
+export declare const createSliderRange: (min: number, max: number, step: number, initialStart: number, initialEnd: number, type: SliderValueType, options?: {
+    prefix?: string;
+    suffix?: string;
+    decimalPlaces?: number;
+}) => {
+    min: number;
+    max: number;
+    step: number;
+    defaultValue: number[];
+    valueFormat: SliderValueFormatConfig;
+};
+/**
+ * Get label styles for value display
+ */
+export declare const getSliderLabelStyles: (position?: "top" | "bottom" | "inline") => SliderCSSProperties;
+export {};

package/dist/components/Snackbar/Snackbar.d.ts

@@ -0,0 +1,4 @@
+import { Toaster as Snackbar } from 'sonner';
+import { AddToastOptions } from './types';
+export declare const addSnackbar: ({ header, description, variant, onClose, actionButton, }: AddToastOptions) => string | number;
+export default Snackbar;

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

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

package/dist/components/Snackbar/snackbar.tokens.d.ts

@@ -0,0 +1,52 @@
+import { CSSObject } from 'styled-components';
+import { VariantType } from '../Text/Text';
+export type SnackbarTokens = Readonly<{
+    icon: {
+        color: {
+            info: CSSObject['color'];
+            success: CSSObject['color'];
+            warning: CSSObject['color'];
+            error: CSSObject['color'];
+        };
+    };
+    container: {
+        backgroundColor: CSSObject['color'];
+        borderRadius: CSSObject['borderRadius'];
+        padding: CSSObject['padding'];
+        minWidth: CSSObject['minWidth'];
+        maxWidth: CSSObject['maxWidth'];
+        boxShadow: CSSObject['boxShadow'];
+    };
+    header: {
+        layout: {
+            gap: CSSObject['gap'];
+            marginBottom: CSSObject['marginBottom'];
+            iconGap: CSSObject['gap'];
+        };
+        text: {
+            color: CSSObject['color'];
+            variant: VariantType;
+        };
+    };
+    description: {
+        layout: {
+            paddingLeft: CSSObject['paddingLeft'];
+            gap: CSSObject['gap'];
+        };
+        text: {
+            color: CSSObject['color'];
+            variant: VariantType;
+        };
+    };
+    actionButton: {
+        layout: {
+            paddingX: CSSObject['padding'];
+        };
+        text: {
+            color: CSSObject['color'];
+            variant: VariantType;
+        };
+    };
+}>;
+declare const snackbarTokens: SnackbarTokens;
+export default snackbarTokens;

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

@@ -0,0 +1,26 @@
+export declare enum SnackbarVariant {
+    INFO = "info",
+    SUCCESS = "success",
+    WARNING = "warning",
+    ERROR = "error"
+}
+export type AddToastOptions = {
+    header: string;
+    description?: string;
+    variant?: SnackbarVariant;
+    onClose?: () => void;
+    actionButton?: {
+        label: string;
+        onClick: () => void;
+    };
+};
+export type CustomToastProps = {
+    header: string;
+    description?: string;
+    variant: SnackbarVariant;
+    onClose?: () => void;
+    actionButton?: {
+        label: string;
+        onClick: () => void;
+    };
+};

package/dist/components/SplitTag/SplitTag.d.ts

@@ -0,0 +1,6 @@
+import { SplitTagProps } from './types';
+declare const SplitTag: {
+    ({ primaryTag, secondaryTag, size, shape }: SplitTagProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default SplitTag;

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

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

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

@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+import { TagColor, TagProps, TagShape, TagSize, TagVariant } from '../Tags';
+export type TagConfig = {
+    text: string;
+    variant?: TagVariant;
+    style?: TagColor;
+    onClick?: () => void;
+};
+export type SplitTagProps = {
+    primaryTag: Omit<TagProps, 'splitTagPosition' | 'size' | 'shape'>;
+    secondaryTag?: Omit<TagProps, 'splitTagPosition' | 'size' | 'shape'>;
+    leadingSlot?: ReactNode;
+    trailingSlot?: ReactNode;
+    size?: TagSize;
+    shape?: TagShape;
+};

package/dist/components/StatCard/StatCard.d.ts

@@ -0,0 +1,6 @@
+import { StatCardProps } from './types';
+declare const StatCard: {
+    ({ title, value, change, subtitle, variant, chartData, progressValue, titleIcon, actionIcon, helpIconText, }: StatCardProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default StatCard;

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

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

package/dist/components/StatCard/statcard.tokens.d.ts

@@ -0,0 +1,145 @@
+import { CSSObject } from 'styled-components';
+import { StatCardVariant } from './types';
+import { FoundationTokenType } from '../../tokens/theme.token';
+export type StatCardState = 'default' | 'hover' | 'loading';
+export type StatCardTokenType = {
+    height: CSSObject['height'];
+    border: {
+        [key in StatCardState]?: CSSObject['border'];
+    };
+    borderRadius: CSSObject['borderRadius'];
+    backgroundColor: {
+        [key in StatCardState]?: CSSObject['backgroundColor'];
+    };
+    boxShadow: CSSObject['boxShadow'];
+    padding: CSSObject['padding'];
+    gap: CSSObject['gap'];
+    header: {
+        gap: CSSObject['gap'];
+        titleIcon: {
+            width: CSSObject['width'];
+            height: CSSObject['height'];
+            marginBottom: CSSObject['marginBottom'];
+        };
+        title: {
+            [key in StatCardVariant]: {
+                fontSize: CSSObject['fontSize'];
+                fontWeight: CSSObject['fontWeight'];
+                color: CSSObject['color'];
+            };
+        };
+        helpIcon: {
+            width: CSSObject['width'];
+            height: CSSObject['height'];
+            color: CSSObject['color'];
+        };
+    };
+    headerStatGap: {
+        gap: CSSObject['gap'];
+    };
+    stats: {
+        gap: CSSObject['gap'];
+        value: {
+            [key in StatCardVariant]: {
+                fontSize: CSSObject['fontSize'];
+                fontWeight: CSSObject['fontWeight'];
+                color: CSSObject['color'];
+            };
+        };
+        change: {
+            marginLeft: CSSObject['marginLeft'];
+            arrow: {
+                width: CSSObject['width'];
+                height: CSSObject['height'];
+                marginRight: CSSObject['marginRight'];
+            };
+            text: {
+                fontSize: CSSObject['fontSize'];
+                fontWeight: CSSObject['fontWeight'];
+                increase: {
+                    color: CSSObject['color'];
+                };
+                decrease: {
+                    color: CSSObject['color'];
+                };
+            };
+        };
+        subtitle: {
+            [key in StatCardVariant]: {
+                fontSize: CSSObject['fontSize'];
+                fontWeight: CSSObject['fontWeight'];
+                color: CSSObject['color'];
+            };
+        };
+    };
+    chart: {
+        height: CSSObject['height'];
+        colors: {
+            line: {
+                increase: CSSObject['color'];
+                decrease: CSSObject['color'];
+            };
+            area: {
+                increase: CSSObject['color'];
+                decrease: CSSObject['color'];
+            };
+            gradient: {
+                end: CSSObject['color'];
+                startOpacity: number;
+                endOpacity: number;
+            };
+        };
+        line: {
+            strokeWidth: CSSObject['strokeWidth'];
+            activeDot: {
+                radius: number;
+                fill: CSSObject['fill'];
+            };
+        };
+        bar: {
+            radius: number[];
+            fill: CSSObject['fill'];
+            activeBar: {
+                fill: CSSObject['fill'];
+            };
+        };
+        progressBar: {
+            height: CSSObject['height'];
+            borderRadius: CSSObject['borderRadius'];
+            gap: CSSObject['gap'];
+            background: {
+                fill: CSSObject['backgroundColor'];
+                empty: CSSObject['backgroundColor'];
+                pattern: {
+                    color: CSSObject['color'];
+                    size: CSSObject['backgroundSize'];
+                };
+            };
+            label: {
+                fontSize: CSSObject['fontSize'];
+                fontWeight: CSSObject['fontWeight'];
+                color: CSSObject['color'];
+            };
+        };
+        tooltip: {
+            cursor: {
+                strokeDasharray: string;
+                stroke: CSSObject['stroke'];
+            };
+            container: {
+                backgroundColor: CSSObject['backgroundColor'];
+                padding: CSSObject['padding'];
+                borderRadius: CSSObject['borderRadius'];
+            };
+            text: {
+                color: CSSObject['color'];
+            };
+            bar: {
+                cursor: {
+                    fill: CSSObject['fill'];
+                };
+            };
+        };
+    };
+};
+export declare const getStatCardToken: (foundationToken: FoundationTokenType) => StatCardTokenType;

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

@@ -0,0 +1,32 @@
+import { ReactNode } from 'react';
+export declare enum StatCardVariant {
+    LINE = "line",
+    PROGRESS_BAR = "progress",
+    BAR = "bar",
+    NUMBER = "number"
+}
+export declare enum ChangeType {
+    INCREASE = "increase",
+    DECREASE = "decrease"
+}
+export type ChartDataPoint = {
+    value: number;
+    label: string;
+    date?: string;
+};
+export type StatCardChange = {
+    value: number;
+    type: ChangeType;
+};
+export type StatCardProps = {
+    title: string;
+    value: string | number;
+    change?: StatCardChange;
+    subtitle?: string;
+    variant: StatCardVariant;
+    chartData?: ChartDataPoint[];
+    progressValue?: number;
+    titleIcon?: ReactNode;
+    actionIcon?: ReactNode;
+    helpIconText?: string;
+};

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

@@ -0,0 +1,11 @@
+import { SwitchSize } from './types';
+export declare const StyledSwitchRoot: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
+    size: SwitchSize;
+    $isDisabled: boolean;
+    $isChecked: boolean;
+    $error?: boolean;
+}>> & string;
+export declare const StyledSwitchThumb: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    size: SwitchSize;
+    $isChecked: boolean;
+}>> & string;

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

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

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

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

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

@@ -0,0 +1,4 @@
+export { Switch } from './Switch';
+export { default as SwitchGroup } from './SwitchGroup';
+export { SwitchSize } from './types';
+export type { SwitchProps, SwitchGroupProps } from './types';