@juspay/blend-design-system 0.0.24-beta → 0.0.24

package/dist/components/Avatar/StyledAvatar.d.ts

@@ -1,8 +1 @@
-import { StyledAvatarContainerProps, StyledAvatarIndicatorProps } from './types';
-export declare const StyledAvatarContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledAvatarContainerProps>> & string;
 export declare const StyledAvatarImage: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, never>> & string;
-export declare const StyledAvatarFallback: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const StyledAvatarIndicator: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, StyledAvatarIndicatorProps>> & string;
-export declare const StyledAvatarWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const StyledAvatarLeadingSlot: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const StyledAvatarTrailingSlot: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/components/Avatar/avatar.tokens.d.ts

@@ -11,7 +11,7 @@ export type AvatarVariant = 'withImage' | 'withoutImage';
  *
  * Structure:
  * - gap: Spacing between avatar and slots
- * - container: Main avatar container properties
+ * - avatar: Main avatar container properties
  * - text: Fallback text styling
  * - indicator: Online status indicator
  * - slot: Leading and trailing slot styling
@@ -55,9 +55,11 @@ export type AvatarTokensType = {
             [key in AvatarState]: CSSObject['backgroundColor'];
         };
         border: {
-            [key in AvatarState]: {
-                color: CSSObject['borderColor'];
-                width: CSSObject['borderWidth'];
+            [key in AvatarSize]: {
+                [key in AvatarState]: {
+                    color: CSSObject['borderColor'];
+                    width: CSSObject['borderWidth'];
+                };
             };
         };
         size: {

package/dist/components/Avatar/avatarUtils.d.ts

@@ -5,3 +5,10 @@ export declare const hexToRgb: (hex: string) => {
     g: number;
     b: number;
 } | null;
+/**
+ * Get a consistent color for an avatar based on the full name/text
+ * Uses hash of the entire text to ensure unique colors for different names
+ * @param text - The text to generate color from (e.g., name or alt text)
+ * @returns A hex color code
+ */
+export declare const getColorFromText: (text: string) => string;

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

@@ -1,7 +1,7 @@
 import { HTMLAttributes } from 'react';
 export declare enum AvatarSize {
-    XS = "xs",
     SM = "sm",
+    REGULAR = "regular",
     MD = "md",
     LG = "lg",
     XL = "xl"

package/dist/components/Button/Button.d.ts

@@ -9,8 +9,11 @@ declare const Button: import('react').ForwardRefExoticComponent<{
     disabled?: boolean;
     onClick?: () => void;
     loading?: boolean;
+    showSkeleton?: boolean;
+    skeletonVariant?: import('../Skeleton').SkeletonVariant;
     buttonGroupPosition?: "center" | "left" | "right";
     fullWidth?: boolean;
+    width?: string | number;
     justifyContent?: import('styled-components').CSSObject["justifyContent"];
     state?: ButtonState;
 } & Omit<import('react').ButtonHTMLAttributes<HTMLButtonElement>, "style" | "className"> & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/components/Button/ButtonBase.d.ts

@@ -0,0 +1,11 @@
+import { ButtonProps } from './types';
+import { ButtonTokensType } from './button.tokens';
+export type ButtonBaseProps = Omit<ButtonProps, 'showSkeleton' | 'skeletonVariant'> & {
+    isSkeleton?: boolean;
+    tokens?: ButtonTokensType;
+};
+declare const ButtonBase: import('react').ForwardRefExoticComponent<Omit<ButtonProps, "showSkeleton" | "skeletonVariant"> & {
+    isSkeleton?: boolean;
+    tokens?: ButtonTokensType;
+} & import('react').RefAttributes<HTMLButtonElement>>;
+export default ButtonBase;

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

@@ -1,5 +1,6 @@
 import { default as React } from 'react';
 import { CSSObject } from 'styled-components';
+import { SkeletonVariant } from '../Skeleton/skeleton.tokens';
 export declare enum ButtonType {
     PRIMARY = "primary",
     SECONDARY = "secondary",
@@ -32,8 +33,11 @@ export type ButtonProps = {
     disabled?: boolean;
     onClick?: () => void;
     loading?: boolean;
+    showSkeleton?: boolean;
+    skeletonVariant?: SkeletonVariant;
     buttonGroupPosition?: 'center' | 'left' | 'right';
     fullWidth?: boolean;
+    width?: string | number;
     justifyContent?: CSSObject['justifyContent'];
     state?: ButtonState;
 } & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'style' | 'className'>;

package/dist/components/ChatInput/ChatInput.d.ts

@@ -1,5 +1,26 @@
 import { default as React } from 'react';
-import { ChatInputProps, AttachedFile } from './types';
+import { AttachedFile, TopQuery } from './types';
 export declare const getDocIcon: (fileType: AttachedFile["type"]) => React.ReactNode;
-declare const ChatInput: React.ForwardRefExoticComponent<ChatInputProps & React.RefAttributes<HTMLTextAreaElement>>;
+declare const ChatInput: React.ForwardRefExoticComponent<Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "value" | "onChange"> & {
+    value?: string;
+    slot1?: React.ReactNode;
+    onChange?: (value: string) => void;
+    onSend?: (message: string, files: AttachedFile[]) => void;
+    onAttachFiles?: (files: File[]) => void;
+    onVoiceRecord?: () => void;
+    onFileRemove?: (fileId: string) => void;
+    onFileClick?: (file: AttachedFile) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    maxLength?: number;
+    autoResize?: boolean;
+    attachedFiles?: AttachedFile[];
+    topQueries?: TopQuery[];
+    onTopQuerySelect?: (query: TopQuery) => void;
+    topQueriesMaxHeight?: number;
+    attachButtonIcon?: React.ReactNode;
+    voiceButtonIcon?: React.ReactNode;
+    sendButtonIcon?: React.ReactNode;
+    overflowMenuProps?: Partial<import('../Menu').MenuProps>;
+} & React.RefAttributes<HTMLTextAreaElement>>;
 export default ChatInput;

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

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { ReactNode, TextareaHTMLAttributes } from 'react';
 import { MenuProps } from '../Menu/types';
 export type AttachedFile = {
     id: string;
@@ -12,8 +12,9 @@ export type TopQuery = {
     id: string;
     text: string;
 };
-export type ChatInputProps = {
+export type ChatInputProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'onChange' | 'value'> & {
     value?: string;
+    slot1?: ReactNode;
     onChange?: (value: string) => void;
     onSend?: (message: string, files: AttachedFile[]) => void;
     onAttachFiles?: (files: File[]) => void;
@@ -32,8 +33,6 @@ export type ChatInputProps = {
     voiceButtonIcon?: ReactNode;
     sendButtonIcon?: ReactNode;
     overflowMenuProps?: Partial<MenuProps>;
-    'aria-label'?: string;
-    'aria-describedby'?: string;
 };
 export type ChatInputTokens = {
     container: {

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

@@ -12,10 +12,6 @@ export declare const createOverflowMenuItems: (hiddenFiles: AttachedFile[], onFi
  * Handle textarea auto-resize functionality
  */
 export declare const handleAutoResize: (element: HTMLTextAreaElement | null, autoResize: boolean) => void;
-/**
- * Check if Enter key should trigger send
- */
-export declare const shouldSendOnEnter: (key: string, shiftKey: boolean, metaKey: boolean, ctrlKey: boolean) => boolean;
 /**
  * Validate message length against maxLength
  */

package/dist/components/CodeEditor/CodeEditor.d.ts

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

package/dist/components/CodeEditor/CodeEditorHeader.d.ts

@@ -0,0 +1,13 @@
+import { CodeBlockTokenType } from '../CodeBlock/codeBlock.token';
+import { ReactNode } from 'react';
+type CodeEditorHeaderProps = {
+    header: string;
+    headerLeftSlot?: ReactNode;
+    headerRightSlot?: ReactNode;
+    showCopyButton: boolean;
+    isCopied: boolean;
+    onCopy: () => void;
+    tokens: CodeBlockTokenType;
+};
+export declare const CodeEditorHeader: ({ header, headerLeftSlot, headerRightSlot, showCopyButton, isCopied, onCopy, tokens, }: CodeEditorHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/CodeEditor/MonacoEditorWrapper.d.ts

@@ -0,0 +1,18 @@
+import { CodeBlockTokenType } from '../CodeBlock/codeBlock.token';
+type MonacoEditorWrapperProps = {
+    value: string;
+    language: string;
+    onChange?: (value: string) => void;
+    readOnly: boolean;
+    disabled: boolean;
+    placeholder?: string;
+    showLineNumbers: boolean;
+    minHeight: string | number;
+    maxHeight?: string | number;
+    height?: string | number;
+    tokens: CodeBlockTokenType;
+    onFocus?: () => void;
+    onBlur?: () => void;
+};
+export declare const MonacoEditorWrapper: ({ value, language, onChange, readOnly, disabled, placeholder, showLineNumbers, minHeight, maxHeight, height, tokens, onFocus, onBlur, }: MonacoEditorWrapperProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

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

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

@@ -0,0 +1,27 @@
+import { ReactNode } from 'react';
+import { SupportedLanguage } from '../CodeBlock/types';
+export declare enum CodeEditorVariant {
+    DEFAULT = "default",
+    NO_GUTTER = "no-gutter"
+}
+export type CodeEditorProps = {
+    value: string;
+    onChange?: (value: string) => void;
+    variant?: CodeEditorVariant;
+    showLineNumbers?: boolean;
+    showHeader?: boolean;
+    header?: string;
+    headerLeftSlot?: ReactNode;
+    headerRightSlot?: ReactNode;
+    showCopyButton?: boolean;
+    language?: SupportedLanguage;
+    placeholder?: string;
+    readOnly?: boolean;
+    disabled?: boolean;
+    minHeight?: string | number;
+    maxHeight?: string | number;
+    height?: string | number;
+    className?: string;
+    onBlur?: () => void;
+    onFocus?: () => void;
+};

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

@@ -0,0 +1,9 @@
+import { CodeEditorVariant } from './types';
+/**
+ * Determines if line numbers should be shown
+ */
+export declare const shouldShowLineNumbers: (showLineNumbers: boolean | undefined, variant: CodeEditorVariant) => boolean;
+/**
+ * Calculates container styles with min/max height
+ */
+export declare const getContainerStyles: (minHeight?: string | number, maxHeight?: string | number) => React.CSSProperties;

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

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

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

@@ -12,6 +12,7 @@ export declare enum MultiValueInputState {
     DISABLED = "disabled"
 }
 export type MultiValueInputProps = {
+    value?: string;
     label?: string;
     sublabel?: string;
     helpIconHintText?: string;
@@ -24,4 +25,4 @@ export type MultiValueInputProps = {
     onTagRemove?: (tag: string) => void;
     onChange?: (value: string) => void;
     size?: TextInputSize;
-} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'style' | 'className' | 'onChange'>;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'style' | 'className' | 'onChange' | 'value'>;

package/dist/components/Skeleton/SkeletonCompound.d.ts

@@ -6,7 +6,6 @@ import { SkeletonProps } from './types';
  * <Skeleton loading={true}>
  *   <Skeleton.Avatar size="md" />
  *   <Skeleton.Text lines={2} />
- *   <Skeleton.Button />
  * </Skeleton>
  *
  * Or traditional:
@@ -26,20 +25,6 @@ declare const SkeletonCompound: import('react').ForwardRefExoticComponent<import
         size?: import('./types').SkeletonSize;
         shape?: "circle" | "square";
     } & import('react').RefAttributes<HTMLDivElement>>;
-    /**
-     * Button skeleton with perfect token mirroring and dynamic sizing
-     */
-    Button: import('react').ForwardRefExoticComponent<import('./types').BaseSkeletonProps & Omit<import('../Primitives/Block/Block').BlockProps, "children"> & {
-        buttonType?: import('../Button').ButtonType;
-        size?: import('../Button').ButtonSize;
-        subType?: import('../Button').ButtonSubType;
-        width?: string | number;
-        fullWidth?: boolean;
-        buttonGroupPosition?: "center" | "left" | "right";
-        text?: string;
-        hasLeadingIcon?: boolean;
-        hasTrailingIcon?: boolean;
-    } & import('react').RefAttributes<HTMLDivElement>>;
     /**
      * Card skeleton with default layout or custom children
      */

package/dist/components/Skeleton/hooks/useSkeletonBase.d.ts

@@ -15,7 +15,3 @@ export declare const useSkeletonBase: (loading: boolean, children?: ReactNode) =
     tokens: SkeletonTokensType;
     prefersReducedMotion: boolean;
 };
-/**
- * Common skeleton component props validation and defaults
- */
-export declare const useSkeletonDefaults: <T extends Record<string, unknown>>(props: T, defaults: Partial<T>) => T;

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

@@ -1,10 +1,10 @@
 export { default as Skeleton } from './SkeletonCompound';
 export { default as SkeletonBase } from './Skeleton';
 export { default as SkeletonAvatar } from './SkeletonAvatar';
-export { default as SkeletonButton } from './SkeletonButton';
 export { default as SkeletonCard } from './SkeletonCard';
 export { useSkeletonBase } from './hooks/useSkeletonBase';
-export type { SkeletonProps, SkeletonAvatarProps, SkeletonButtonProps, SkeletonCardProps, SkeletonSize, BaseSkeletonProps, SkeletonVariant, SkeletonShape, } from './types';
+export { getSkeletonState, mergeSkeletonProps, getSkeletonDefaults, } from './utils';
+export type { SkeletonProps, SkeletonAvatarProps, SkeletonCardProps, SkeletonSize, BaseSkeletonProps, SkeletonVariant, SkeletonShape, } from './types';
 export type { SkeletonTokensType, ResponsiveSkeletonTokens, } from './skeleton.tokens';
 export { getSkeletonTokens } from './skeleton.tokens';
 export { default } from './SkeletonCompound';

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

@@ -1,7 +1,6 @@
 import { ReactNode } from 'react';
 import { BlockProps } from '../Primitives/Block/Block';
 import { SkeletonVariant, SkeletonShape } from './skeleton.tokens';
-import { ButtonType, ButtonSize, ButtonSubType } from '../Button/types';
 export type SkeletonSize = 'sm' | 'md' | 'lg';
 export type BaseSkeletonProps = {
     variant?: SkeletonVariant;
@@ -19,17 +18,6 @@ export type SkeletonAvatarProps = BaseSkeletonProps & Omit<BlockProps, 'children
     size?: SkeletonSize;
     shape?: 'circle' | 'square';
 };
-export type SkeletonButtonProps = BaseSkeletonProps & Omit<BlockProps, 'children'> & {
-    buttonType?: ButtonType;
-    size?: ButtonSize;
-    subType?: ButtonSubType;
-    width?: string | number;
-    fullWidth?: boolean;
-    buttonGroupPosition?: 'center' | 'left' | 'right';
-    text?: string;
-    hasLeadingIcon?: boolean;
-    hasTrailingIcon?: boolean;
-};
 export type SkeletonCardProps = BaseSkeletonProps & Omit<BlockProps, 'children'> & {
     children?: ReactNode;
     padding?: string | number;

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

@@ -0,0 +1,18 @@
+/**
+ * Simple utility function for skeleton state logic
+ * Not a hook since it doesn't call any React hooks internally
+ */
+export declare function getSkeletonState(showSkeleton: boolean): {
+    shouldShowSkeleton: boolean;
+    shouldShowContent: boolean;
+};
+/**
+ * Helper function for merging component props with skeleton props
+ * Not a hook since it's just a pure utility function
+ */
+export declare function mergeSkeletonProps<TComponentProps, TSkeletonProps>(componentProps: TComponentProps, skeletonProps?: Partial<TSkeletonProps>): TComponentProps & Partial<TSkeletonProps>;
+/**
+ * Common skeleton component props validation and defaults
+ * Renamed from useSkeletonDefaults since it's not a hook
+ */
+export declare function getSkeletonDefaults<T extends Record<string, unknown>>(props: T, defaults: Partial<T>): T;

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

@@ -1,6 +1,9 @@
 import { default as React } from 'react';
-import { Toaster as Snackbar } from 'sonner';
-import { AddToastOptions, CustomToastProps } from './types';
+import { AddToastOptions, CustomToastProps, SnackbarPosition } from './types';
 export declare const StyledToast: React.FC<CustomToastProps>;
-export declare const addSnackbar: ({ header, description, variant, onClose, actionButton, duration, }: AddToastOptions) => string | number;
+export declare const addSnackbar: ({ header, description, variant, onClose, actionButton, duration, position, }: AddToastOptions) => string | number;
+type SnackbarProps = {
+    position?: SnackbarPosition;
+};
+declare const Snackbar: React.FC<SnackbarProps>;
 export default Snackbar;

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

@@ -4,6 +4,14 @@ export declare enum SnackbarVariant {
     WARNING = "warning",
     ERROR = "error"
 }
+export declare enum SnackbarPosition {
+    TOP_LEFT = "top-left",
+    TOP_RIGHT = "top-right",
+    BOTTOM_LEFT = "bottom-left",
+    BOTTOM_RIGHT = "bottom-right",
+    TOP_CENTER = "top-center",
+    BOTTOM_CENTER = "bottom-center"
+}
 export type AddToastOptions = {
     header: string;
     description?: string;
@@ -15,6 +23,7 @@ export type AddToastOptions = {
         autoDismiss?: boolean;
     };
     duration?: number;
+    position?: SnackbarPosition;
 };
 export type CustomToastProps = {
     header: string;

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

@@ -0,0 +1,15 @@
+import { TagColor, TagShape, TagSize, TagVariant } from './types';
+declare const Tag: import('react').ForwardRefExoticComponent<Omit<import('../Primitives/Block/Block').BlockProps, "children"> & {
+    text: string;
+    variant?: TagVariant;
+    color?: TagColor;
+    size?: TagSize;
+    shape?: TagShape;
+    leftSlot?: import('react').ReactNode;
+    rightSlot?: import('react').ReactNode;
+    splitTagPosition?: "left" | "right";
+} & {
+    showSkeleton?: boolean;
+    skeletonVariant?: import('../Skeleton').SkeletonVariant;
+} & import('react').RefAttributes<HTMLDivElement>>;
+export default Tag;

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

@@ -0,0 +1,20 @@
+import { TagTokensType } from './tag.tokens';
+import { TagProps, TagColor, TagShape, TagSize, TagVariant } from './types';
+export type TagBaseProps = TagProps & {
+    isSkeleton?: boolean;
+    tokens?: TagTokensType;
+};
+declare const TagBase: import('react').ForwardRefExoticComponent<Omit<import('../Primitives/Block/Block').BlockProps, "children"> & {
+    text: string;
+    variant?: TagVariant;
+    color?: TagColor;
+    size?: TagSize;
+    shape?: TagShape;
+    leftSlot?: import('react').ReactNode;
+    rightSlot?: import('react').ReactNode;
+    splitTagPosition?: "left" | "right";
+} & {
+    isSkeleton?: boolean;
+    tokens?: TagTokensType;
+} & import('react').RefAttributes<HTMLDivElement>>;
+export default TagBase;

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

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

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

@@ -1,4 +1,6 @@
 import { ReactNode } from 'react';
+import { SkeletonVariant } from '../Skeleton/skeleton.tokens';
+import { BlockProps } from '../Primitives/Block/Block';
 export declare enum TagVariant {
     NO_FILL = "noFill",
     ATTENTIVE = "attentive",
@@ -22,7 +24,7 @@ export declare enum TagShape {
     ROUNDED = "rounded",
     SQUARICAL = "squarical"
 }
-export type TagProps = {
+export type TagProps = Omit<BlockProps, 'children'> & {
     text: string;
     variant?: TagVariant;
     color?: TagColor;
@@ -30,6 +32,9 @@ export type TagProps = {
     shape?: TagShape;
     leftSlot?: ReactNode;
     rightSlot?: ReactNode;
-    onClick?: () => void;
     splitTagPosition?: 'left' | 'right';
 };
+export type TagWithSkeletonProps = TagProps & {
+    showSkeleton?: boolean;
+    skeletonVariant?: SkeletonVariant;
+};

package/dist/main.d.ts

@@ -37,6 +37,7 @@ export * from './components/Upload';
 export * from './components/WorkflowCanvas';
 export * from './components/ChatInput';
 export * from './components/CodeBlock';
+export * from './components/CodeEditor';
 export * from './components/ButtonGroup';
 export * from './components/Button';
 export * from './context';