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

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/Breadcrumb/types.d.ts

@@ -3,4 +3,10 @@ export type BreadcrumbItemType = {
     rightSlot?: React.ReactNode;
     label: string;
     href: string;
+    /**
+     * Optional click handler for custom routing (e.g., React Router).
+     * When provided, prevents default link behavior and calls this handler instead.
+     * Use this to avoid page reloads and handle navigation with client-side routing.
+     */
+    onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void;
 };

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/button.tokens.d.ts

@@ -37,7 +37,10 @@ export type ButtonTokensType = {
     padding: {
         [key in ButtonSize]: {
             [key in ButtonType]: {
-                [key in ButtonSubType]: CSSObject['padding'];
+                [key in ButtonSubType]: {
+                    x: CSSObject['padding'];
+                    y: CSSObject['padding'];
+                };
             };
         };
     };

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/Checkbox/checkbox.animations.d.ts

@@ -0,0 +1,2 @@
+export declare const checkboxRootAnimations: import('styled-components').RuleSet<object>;
+export declare const checkboxIndicatorAnimations: import('styled-components').RuleSet<object>;

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/DataTable/types.d.ts

@@ -188,11 +188,12 @@ export type PaginationConfig = {
     totalRows: number;
     pageSizeOptions?: number[];
 };
-export type BulkAction = {
-    id: string;
-    label: string;
-    variant: 'primary' | 'secondary' | 'danger';
-    onClick: (selectedRowIds: string[]) => void;
+export type BulkActionsConfig = {
+    showSelectAll?: boolean;
+    showDeselectAll?: boolean;
+    onSelectAll?: () => void;
+    onDeselectAll?: () => void;
+    customActions?: ReactNode;
 };
 export type RowActionConfig<T extends Record<string, unknown>> = {
     id: string;
@@ -274,8 +275,24 @@ export type DataTableProps<T extends Record<string, unknown>> = {
     isRowExpandable?: (row: T, index: number) => boolean;
     onRowExpansionChange?: (rowId: unknown, isExpanded: boolean, rowData: T) => void;
     enableRowSelection?: boolean;
-    bulkActions?: BulkAction[];
+    onRowSelectionChange?: (selectedRowIds: string[], isSelected: boolean, rowId: string, rowData: T) => void;
+    bulkActions?: BulkActionsConfig;
     rowActions?: RowActionsConfig<T>;
     getRowStyle?: (row: T, index: number) => React.CSSProperties;
+    tableBodyHeight?: string | number;
+    /**
+     * Approximate height of a single row in pixels.
+     * Used to calculate minimum table height based on page size.
+     * Helps maintain consistent layout and prevent shifting.
+     * @default 52
+     */
+    rowHeight?: number;
+    /**
+     * Whether to maintain minimum height based on page size.
+     * When true, table maintains consistent height preventing layout shifts.
+     * When false, table height adjusts to content.
+     * @default true
+     */
+    maintainMinHeight?: boolean;
     mobileColumnsToShow?: number;
 };

package/dist/components/DateRangePicker/TimeSelector.d.ts

@@ -1,12 +1,10 @@
 import { default as React } from 'react';
-import { CalendarTokenType } from './dateRangePicker.tokens';
 type TimeSelectorProps = {
     value: string;
     onChange: (time: string) => void;
     className?: string;
     autoFocus?: boolean;
     tabIndex?: number;
-    calendarToken?: CalendarTokenType;
 };
 declare const TimeSelector: React.ForwardRefExoticComponent<TimeSelectorProps & React.RefAttributes<HTMLDivElement>>;
 export default TimeSelector;

package/dist/components/DateRangePicker/dateRangePicker.tokens.d.ts

@@ -83,7 +83,7 @@ export type CalendarTokenType = {
         border: CSSObject['border'];
         borderRadius: CSSObject['borderRadius'];
         boxShadow: CSSObject['boxShadow'];
-        inputs: {
+        header: {
             padding: {
                 x: CSSObject['padding'];
                 y: CSSObject['padding'];
@@ -92,12 +92,9 @@ export type CalendarTokenType = {
                 gap: CSSObject['gap'];
                 label: {
                     color: CSSObject['color'];
-                    width: CSSObject['width'];
                     fontSize: CSSObject['fontSize'];
                     fontWeight: CSSObject['fontWeight'];
                 };
-                fontSize: CSSObject['fontSize'];
-                fontWeight: CSSObject['fontWeight'];
             };
         };
         calendarGrid: {
@@ -136,8 +133,8 @@ export type CalendarTokenType = {
                     fontWeight: CSSObject['fontWeight'];
                     fontSize: CSSObject['fontSize'];
                     lineHeight: CSSObject['lineHeight'];
-                    outline: {
-                        [key in CalendarState]: CSSObject['outline'];
+                    border: {
+                        [key in CalendarState]: CSSObject['border'];
                     };
                     borderRadius: CSSObject['borderRadius'];
                 };
@@ -166,14 +163,8 @@ export type CalendarTokenType = {
                     todayDay: {
                         fontWeight: CSSObject['fontWeight'];
                     };
-                    hoverState: {
-                        boxShadow: CSSObject['boxShadow'];
-                        borderRadius: CSSObject['borderRadius'];
-                    };
                     disabledDay: {
-                        opacity: CSSObject['opacity'];
-                        cursor: CSSObject['cursor'];
-                        pointerEvents: CSSObject['pointerEvents'];
+                        color: CSSObject['color'];
                     };
                 };
                 text: {
@@ -189,16 +180,13 @@ export type CalendarTokenType = {
                     todayDay: {
                         color: CSSObject['color'];
                     };
+                    disabledDate: {
+                        color: CSSObject['color'];
+                    };
                 };
                 todayIndicator: {
                     width: CSSObject['width'];
-                    height: CSSObject['height'];
                     backgroundColor: CSSObject['backgroundColor'];
-                    borderRadius: CSSObject['borderRadius'];
-                    position: CSSObject['position'];
-                    bottom: CSSObject['bottom'];
-                    left: CSSObject['left'];
-                    transform: CSSObject['transform'];
                 };
             };
         };

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

@@ -17,6 +17,11 @@ export type NavbarItem = {
     onClick?: () => void;
     href?: string;
     isSelected?: boolean;
+    /**
+     * When true, the item appears in the Sidebar mobile navigation drawer.
+     * Desktop always renders all items regardless of this flag.
+     */
+    showOnMobile?: boolean;
 };
 export type SectionProps = {
     section: DirectoryData;

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/Menu/menu.animations.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Menu dropdown content animations
+ */
+export declare const menuContentAnimations = "\n  transform-origin: var(--radix-dropdown-menu-content-transform-origin);\n\n  &[data-side='bottom'][data-state='open'] {\n    animation: slideInFromTop 400ms cubic-bezier(0.16, 1, 0.3, 1);\n  }\n  &[data-side='bottom'][data-state='closed'] {\n    animation: slideOutToTop 300ms cubic-bezier(0.16, 1, 0.3, 1);\n  }\n\n  &[data-side='top'][data-state='open'] {\n    animation: slideInFromBottom 400ms cubic-bezier(0.16, 1, 0.3, 1);\n  }\n  &[data-side='top'][data-state='closed'] {\n    animation: slideOutToBottom 300ms cubic-bezier(0.16, 1, 0.3, 1);\n  }\n\n  &[data-side='right'][data-state='open'] {\n    animation: slideInFromLeft 400ms cubic-bezier(0.16, 1, 0.3, 1);\n  }\n  &[data-side='right'][data-state='closed'] {\n    animation: slideOutToLeft 300ms cubic-bezier(0.16, 1, 0.3, 1);\n  }\n\n  &[data-side='left'][data-state='open'] {\n    animation: slideInFromRight 400ms cubic-bezier(0.16, 1, 0.3, 1);\n  }\n  &[data-side='left'][data-state='closed'] {\n    animation: slideOutToRight 300ms cubic-bezier(0.16, 1, 0.3, 1);\n  }\n\n  /* Shadcn-style keyframes with zoom + slide + fade */\n  @keyframes slideInFromTop {\n    from {\n      opacity: 0;\n      transform: translateY(-8px) scale(0.95);\n    }\n    to {\n      opacity: 1;\n      transform: translateY(0) scale(1);\n    }\n  }\n\n  @keyframes slideOutToTop {\n    from {\n      opacity: 1;\n      transform: translateY(0) scale(1);\n    }\n    to {\n      opacity: 0;\n      transform: translateY(-8px) scale(0.95);\n    }\n  }\n\n  @keyframes slideInFromBottom {\n    from {\n      opacity: 0;\n      transform: translateY(8px) scale(0.95);\n    }\n    to {\n      opacity: 1;\n      transform: translateY(0) scale(1);\n    }\n  }\n\n  @keyframes slideOutToBottom {\n    from {\n      opacity: 1;\n      transform: translateY(0) scale(1);\n    }\n    to {\n      opacity: 0;\n      transform: translateY(8px) scale(0.95);\n    }\n  }\n\n  @keyframes slideInFromLeft {\n    from {\n      opacity: 0;\n      transform: translateX(-8px) scale(0.95);\n    }\n    to {\n      opacity: 1;\n      transform: translateX(0) scale(1);\n    }\n  }\n\n  @keyframes slideOutToLeft {\n    from {\n      opacity: 1;\n      transform: translateX(0) scale(1);\n    }\n    to {\n      opacity: 0;\n      transform: translateX(-8px) scale(0.95);\n    }\n  }\n\n  @keyframes slideInFromRight {\n    from {\n      opacity: 0;\n      transform: translateX(8px) scale(0.95);\n    }\n    to {\n      opacity: 1;\n      transform: translateX(0) scale(1);\n    }\n  }\n\n  @keyframes slideOutToRight {\n    from {\n      opacity: 1;\n      transform: translateX(0) scale(1);\n    }\n    to {\n      opacity: 0;\n      transform: translateX(8px) scale(0.95);\n    }\n  }\n";
+/**
+ * Submenu animations
+ */
+export declare const submenuContentAnimations = "\n  transform-origin: var(--radix-dropdown-menu-content-transform-origin);\n\n  &[data-side='right'][data-state='open'] {\n    animation: slideInFromLeft 400ms cubic-bezier(0.16, 1, 0.3, 1);\n  }\n  &[data-side='right'][data-state='closed'] {\n    animation: slideOutToLeft 300ms cubic-bezier(0.16, 1, 0.3, 1);\n  }\n\n  &[data-side='left'][data-state='open'] {\n    animation: slideInFromRight 400ms cubic-bezier(0.16, 1, 0.3, 1);\n  }\n  &[data-side='left'][data-state='closed'] {\n    animation: slideOutToRight 300ms cubic-bezier(0.16, 1, 0.3, 1);\n  }\n";

package/dist/components/Modal/modal.animations.d.ts

@@ -0,0 +1,3 @@
+export declare const modalBackdropAnimations: (isAnimatingIn: boolean) => import('styled-components').RuleSet<object>;
+export declare const modalContentAnimations: (isAnimatingIn: boolean) => import('styled-components').RuleSet<object>;
+export declare const ANIMATION_DURATION = 500;

package/dist/components/Modal/modal.utils.d.ts

@@ -0,0 +1,2 @@
+export declare const getPortalContainer: () => HTMLElement;
+export declare const cleanupPortalContainer: () => void;

package/dist/components/Modal/useModal.d.ts

@@ -0,0 +1,5 @@
+export declare const useModal: (isOpen: boolean, onClose: () => void) => {
+    shouldRender: boolean;
+    isAnimatingIn: boolean;
+    portalContainer: HTMLElement | null;
+};

package/dist/components/MultiSelect/multiSelect.animations.d.ts

@@ -0,0 +1,12 @@
+/**
+ * MultiSelect Dropdown Animations
+ *
+ * Shadcn-style animations with zoom + slide + fade
+ * - Combined animation in single keyframe
+ * - Side-aware based on dropdown position
+ * - Smooth spring easing
+ */
+/**
+ * Main dropdown content animations
+ */
+export declare const dropdownContentAnimations = "\n  transform-origin: var(--radix-dropdown-menu-content-transform-origin);\n\n  /* Opening animations - Shadcn style with zoom */\n  &[data-side='bottom'][data-state='open'] {\n    animation: slideInFromTop 400ms cubic-bezier(0.16, 1, 0.3, 1);\n  }\n  &[data-side='bottom'][data-state='closed'] {\n    animation: slideOutToTop 300ms cubic-bezier(0.16, 1, 0.3, 1);\n  }\n\n  &[data-side='top'][data-state='open'] {\n    animation: slideInFromBottom 400ms cubic-bezier(0.16, 1, 0.3, 1);\n  }\n  &[data-side='top'][data-state='closed'] {\n    animation: slideOutToBottom 300ms cubic-bezier(0.16, 1, 0.3, 1);\n  }\n\n  &[data-side='right'][data-state='open'] {\n    animation: slideInFromLeft 400ms cubic-bezier(0.16, 1, 0.3, 1);\n  }\n  &[data-side='right'][data-state='closed'] {\n    animation: slideOutToLeft 300ms cubic-bezier(0.16, 1, 0.3, 1);\n  }\n\n  &[data-side='left'][data-state='open'] {\n    animation: slideInFromRight 400ms cubic-bezier(0.16, 1, 0.3, 1);\n  }\n  &[data-side='left'][data-state='closed'] {\n    animation: slideOutToRight 300ms cubic-bezier(0.16, 1, 0.3, 1);\n  }\n\n  /* Shadcn-style keyframes with zoom + slide + fade */\n  @keyframes slideInFromTop {\n    from {\n      opacity: 0;\n      transform: translateY(-8px) scale(0.95);\n    }\n    to {\n      opacity: 1;\n      transform: translateY(0) scale(1);\n    }\n  }\n\n  @keyframes slideOutToTop {\n    from {\n      opacity: 1;\n      transform: translateY(0) scale(1);\n    }\n    to {\n      opacity: 0;\n      transform: translateY(-8px) scale(0.95);\n    }\n  }\n\n  @keyframes slideInFromBottom {\n    from {\n      opacity: 0;\n      transform: translateY(8px) scale(0.95);\n    }\n    to {\n      opacity: 1;\n      transform: translateY(0) scale(1);\n    }\n  }\n\n  @keyframes slideOutToBottom {\n    from {\n      opacity: 1;\n      transform: translateY(0) scale(1);\n    }\n    to {\n      opacity: 0;\n      transform: translateY(8px) scale(0.95);\n    }\n  }\n\n  @keyframes slideInFromLeft {\n    from {\n      opacity: 0;\n      transform: translateX(-8px) scale(0.95);\n    }\n    to {\n      opacity: 1;\n      transform: translateX(0) scale(1);\n    }\n  }\n\n  @keyframes slideOutToLeft {\n    from {\n      opacity: 1;\n      transform: translateX(0) scale(1);\n    }\n    to {\n      opacity: 0;\n      transform: translateX(-8px) scale(0.95);\n    }\n  }\n\n  @keyframes slideInFromRight {\n    from {\n      opacity: 0;\n      transform: translateX(8px) scale(0.95);\n    }\n    to {\n      opacity: 1;\n      transform: translateX(0) scale(1);\n    }\n  }\n\n  @keyframes slideOutToRight {\n    from {\n      opacity: 1;\n      transform: translateX(0) scale(1);\n    }\n    to {\n      opacity: 0;\n      transform: translateX(8px) scale(0.95);\n    }\n  }\n";

package/dist/components/Popover/popover.animations.d.ts

@@ -0,0 +1 @@
+export declare const popoverContentAnimations: import('styled-components').RuleSet<object>;

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

@@ -84,6 +84,11 @@ type PrimitiveInputProps = StateStyles & {
     overflowY?: CSSObject['overflowY'];
     contentCentered?: boolean;
     cursor?: CSSObject['cursor'];
+    transition?: CSSObject['transition'];
+    transitionProperty?: CSSObject['transitionProperty'];
+    transitionDuration?: CSSObject['transitionDuration'];
+    transitionTimingFunction?: CSSObject['transitionTimingFunction'];
+    transitionDelay?: CSSObject['transitionDelay'];
     placeholderStyles?: CSSObject;
 };
 export type InputProps = React.InputHTMLAttributes<HTMLInputElement> & PrimitiveInputProps & {

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

@@ -79,6 +79,11 @@ type PrimitiveTextareaProps = StateStyles & {
     overflowY?: CSSObject['overflowY'];
     contentCentered?: boolean;
     cursor?: CSSObject['cursor'];
+    transition?: CSSObject['transition'];
+    transitionProperty?: CSSObject['transitionProperty'];
+    transitionDuration?: CSSObject['transitionDuration'];
+    transitionTimingFunction?: CSSObject['transitionTimingFunction'];
+    transitionDelay?: CSSObject['transitionDelay'];
     placeholderStyles?: CSSObject;
     resize?: CSSObject['resize'];
     fontFamily?: CSSObject['fontFamily'];

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

@@ -0,0 +1 @@
+export declare const radioAnimations: import('styled-components').RuleSet<object>;

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

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+import { MobileNavigationItem as MobileNavigationItemType } from '../types';
+import { MobileNavigationTokenType } from './mobile.tokens';
+type MobileNavigationItemProps = {
+    item: MobileNavigationItemType;
+    index?: number;
+    tokens: MobileNavigationTokenType;
+    onSelect: (item: MobileNavigationItemType) => void;
+};
+declare const MobileNavigationItem: React.ForwardRefExoticComponent<MobileNavigationItemProps & React.RefAttributes<HTMLButtonElement>>;
+export default MobileNavigationItem;

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

@@ -0,0 +1,7 @@
+import { MobileNavigationTokenType } from './mobile.tokens';
+type MoreButtonProps = {
+    tokens: MobileNavigationTokenType;
+    onClick: () => void;
+};
+declare const MoreButton: import('react').ForwardRefExoticComponent<MoreButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
+export default MoreButton;

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

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+import { MobileNavigationTokenType } from './mobile.tokens';
+type PrimaryActionButtonProps = {
+    tokens: MobileNavigationTokenType;
+    buttonProps?: Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'type'>;
+};
+declare const PrimaryActionButton: React.ForwardRefExoticComponent<PrimaryActionButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export default PrimaryActionButton;

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

@@ -0,0 +1,24 @@
+import { MobileNavigationItem } from '../types';
+/**
+ * Custom hook to manage ordered items with smart property updates.
+ * Only resets order when items are added/removed, otherwise preserves order
+ * and just updates properties (like isSelected).
+ *
+ * This hook is extracted because:
+ * 1. It encapsulates complex state logic
+ * 2. The logic is reusable across different navigation contexts
+ * 3. It keeps the component clean and focused on rendering
+ */
+export declare const useOrderedItems: <T extends {
+    label: string;
+}>(items: T[]) => readonly [T[], import('react').Dispatch<import('react').SetStateAction<T[]>>];
+/**
+ * Custom hook for item selection with smart swapping logic.
+ * Handles the complex behavior of swapping secondary items with primary items.
+ *
+ * This hook is extracted because:
+ * 1. It encapsulates business logic for item swapping
+ * 2. It reduces component complexity
+ * 3. The logic is testable in isolation
+ */
+export declare const useItemSelection: (orderedItems: MobileNavigationItem[], setOrderedItems: (items: MobileNavigationItem[]) => void, primaryItems: MobileNavigationItem[], hasSecondaryItems: boolean, onCollapse: () => void) => (item: MobileNavigationItem, isSecondaryItem?: boolean) => void;

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

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