@juspay/blend-design-system 0.0.37-beta.1 → 0.0.37-beta.3

package/dist/components/Badge/Badge.d.ts

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

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

@@ -0,0 +1,34 @@
+import { ReactElement } from 'react';
+export declare enum BadgeColor {
+    ALERT = "alert",
+    NEUTRAL = "neutral",
+    WARNING = "warning",
+    PRIMARY = "primary",
+    SUCCESS = "success"
+}
+export declare enum BadgeSize {
+    SM = "sm",
+    MD = "md",
+    LG = "lg"
+}
+export type BadgePosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+type BaseBadgeProps = {
+    count?: number;
+    maxCount?: number;
+    size?: BadgeSize;
+    color?: BadgeColor;
+    text?: string;
+    showBadge?: boolean;
+    showZero?: boolean;
+} & Omit<React.HTMLAttributes<HTMLSpanElement>, 'size' | 'className' | 'style' | 'children'>;
+type StandaloneBadgeProps = BaseBadgeProps & {
+    children?: undefined;
+};
+type PositionedBadgeProps = BaseBadgeProps & {
+    children: ReactElement;
+    position?: BadgePosition;
+    offset?: [number, number];
+    isCircular?: boolean;
+};
+export type BadgeProps = StandaloneBadgeProps | PositionedBadgeProps;
+export {};

package/dist/components/Badge/badge.dark.tokens.d.ts

@@ -0,0 +1,3 @@
+import { FoundationTokenType } from '../../tokens/theme.token';
+import { ResponsiveBadgeTokens } from './badge.tokens';
+export declare const getBadgeDarkTokens: (foundationToken: FoundationTokenType) => ResponsiveBadgeTokens;

package/dist/components/Badge/badge.light.tokens.d.ts

@@ -0,0 +1,3 @@
+import { FoundationTokenType } from '../../tokens/theme.token';
+import { ResponsiveBadgeTokens } from './badge.tokens';
+export declare const getBadgeLightTokens: (foundationToken: FoundationTokenType) => ResponsiveBadgeTokens;

package/dist/components/Badge/badge.tokens.d.ts

@@ -0,0 +1,55 @@
+import { CSSObject } from 'styled-components';
+import { BadgeSize, BadgeColor } from './Badge.types';
+import { BreakpointType } from '../../breakpoints/breakPoints';
+import { FoundationTokenType } from '../../tokens/theme.token';
+import { Theme } from '../../context/theme.enum';
+export type BadgeTokensType = Readonly<{
+    dot: {
+        width: {
+            [key in BadgeSize]: CSSObject['width'];
+        };
+        height: {
+            [key in BadgeSize]: CSSObject['height'];
+        };
+        borderRadius: CSSObject['borderRadius'];
+    };
+    pill: {
+        minWidth: {
+            [key in BadgeSize]: CSSObject['minWidth'];
+        };
+        height: {
+            [key in BadgeSize]: CSSObject['height'];
+        };
+        paddingLeft: {
+            [key in BadgeSize]: CSSObject['paddingLeft'];
+        };
+        paddingRight: {
+            [key in BadgeSize]: CSSObject['paddingRight'];
+        };
+        borderRadius: {
+            [key in BadgeSize]: CSSObject['borderRadius'];
+        };
+    };
+    backgroundColor: {
+        [key in BadgeColor]: CSSObject['backgroundColor'];
+    };
+    text: {
+        color: CSSObject['color'];
+        fontSize: {
+            [key in BadgeSize]: CSSObject['fontSize'];
+        };
+        fontWeight: CSSObject['fontWeight'];
+        lineHeight: {
+            [key in BadgeSize]: CSSObject['lineHeight'];
+        };
+    };
+    position: {
+        offset: {
+            [key in BadgeSize]: CSSObject['top'];
+        };
+    };
+}>;
+export type ResponsiveBadgeTokens = {
+    [key in keyof BreakpointType]: BadgeTokensType;
+};
+export declare const getBadgeTokens: (foundationToken: FoundationTokenType, theme?: Theme | string) => ResponsiveBadgeTokens;

package/dist/components/Badge/badge.utils.d.ts

@@ -0,0 +1,11 @@
+import { BadgeSize, BadgePosition } from './Badge.types';
+import { BadgeTokensType } from './badge.tokens';
+export declare const formatCount: (count: number, maxCount?: number) => string;
+export declare const getPositionStyles: (position: BadgePosition, size: BadgeSize, tokens: BadgeTokensType, customOffset?: [number, number], hasContent?: boolean, isCircular?: boolean) => {
+    top?: string;
+    right?: string;
+    bottom?: string;
+    left?: string;
+    transform: string;
+};
+export declare const getAccessibleLabel: (count: number | undefined, text: string | undefined, maxCount: number, showBadge: boolean) => string | undefined;

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

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

package/dist/components/ChartsV2/chartV2Options.d.ts

@@ -0,0 +1,3 @@
+import { default as Highcharts } from 'highcharts';
+import { ChartV2TokensType } from './chartV2.tokens';
+export declare const mergeChartOptions: (options: Highcharts.Options, tokens: ChartV2TokensType) => Record<string, unknown>;

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

@@ -1,7 +1,7 @@
 import { default as React } from 'react';
 import { AttachedFile, TopQuery } from './types';
 export declare const getDocIcon: (fileType: AttachedFile["type"]) => React.ReactNode;
-declare const ChatInput: React.ForwardRefExoticComponent<Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "value" | "onChange"> & {
+declare const ChatInput: React.ForwardRefExoticComponent<Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "onChange" | "value"> & {
     value?: string;
     slot1?: React.ReactNode;
     slot2?: React.ReactNode;

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

@@ -51,4 +51,10 @@ export type CodeBlockProps = {
      * or end (GitHub-style). Defaults to 20.
      */
     diffExpandChunk?: number;
+    /**
+     * Maximum height for the code content area. When content exceeds this height,
+     * the code area scrolls while the header remains fixed.
+     * Accepts CSS values like '300px', '20rem', '50vh', etc.
+     */
+    maxHeight?: string;
 };

package/dist/components/CodeEditorV2/codeEditorV2.tokens.d.ts

@@ -1,5 +1,5 @@
 import { CSSObject } from 'styled-components';
-import { DiffLineType, MonacoTheme } from './codeEditorV2.types';
+import { DiffLineType } from './codeEditorV2.types';
 import { BreakpointType } from '../../breakpoints/breakPoints';
 import { FoundationTokenType } from '../../tokens/theme.token';
 import { Theme } from '../../context/theme.enum';
@@ -8,7 +8,7 @@ export type CodeEditorV2Tokens = {
     border: CSSObject['border'];
     borderRadius: CSSObject['borderRadius'];
     boxShadow: CSSObject['boxShadow'];
-    theme: MonacoTheme;
+    theme: 'light' | 'dark';
     header: {
         backgroundColor: CSSObject['backgroundColor'];
         borderBottom: CSSObject['borderBottom'];

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

@@ -46,6 +46,15 @@ export declare function getPlaceholderPosition(metrics: EditorMetrics, showLineN
     left: string;
 };
 export declare function configureLanguageDefaults(monaco: typeof import('monaco-editor')): void;
+/** Monaco `IEditor` has `focus()` but no `blur()` — clear focus on the editor subtree. */
+export declare function blurMonacoEditorDom(editor: Monaco.editor.ICodeEditor): void;
+/**
+ * Single place for “view only” vs editable: locks model + DOM (no edit tooltip),
+ * empty read-only message, calmer code-block chrome, and restores IDE defaults when editable.
+ */
+export declare function getMonacoViewModeOptions(readOnly: boolean, disabled: boolean): Partial<Monaco.editor.IEditorOptions>;
+/** Diff panes do not always inherit root options — push view mode + scrollbar to both sides. */
+export declare function syncDiffEditorPaneViewMode(diffEditor: Monaco.editor.IStandaloneDiffEditor, readOnly: boolean, disabled: boolean): void;
 /** Options applied on editor mount (full set) */
 export declare function getMountEditorOptions(metrics: EditorMetrics, tokens: CodeEditorV2Tokens, showLineNumbers: boolean, readOnly: boolean, disabled: boolean): Monaco.editor.IStandaloneEditorConstructionOptions;
 /** Options applied when props change (subset) */

package/dist/components/DataTable/DataTablePagination.d.ts

@@ -2,6 +2,7 @@ type DataTablePaginationProps = {
     currentPage: number;
     pageSize: number;
     totalRows: number;
+    visibleRows?: number;
     pageSizeOptions: number[];
     isLoading?: boolean;
     hasData?: boolean;
@@ -9,5 +10,5 @@ type DataTablePaginationProps = {
     onPageChange: (page: number) => void;
     onPageSizeChange: (pageSize: number) => void;
 };
-export declare function DataTablePagination({ currentPage, pageSize, totalRows, pageSizeOptions, isLoading, hasData, isNarrowContainer, onPageChange, onPageSizeChange, }: DataTablePaginationProps): import("react/jsx-runtime").JSX.Element;
+export declare function DataTablePagination({ currentPage, pageSize, totalRows, pageSizeOptions, visibleRows, isLoading, hasData, isNarrowContainer, onPageChange, onPageSizeChange, }: DataTablePaginationProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/DataTable/TableBody/types.d.ts

@@ -14,6 +14,10 @@ export type TableBodyProps<T extends Record<string, unknown>> = {
     enableColumnManager?: boolean;
     enableRowExpansion?: boolean;
     enableRowSelection?: boolean;
+    rowSelectionConfig?: {
+        isDisabled?: (row: T, index: number) => boolean;
+        disabledText?: (row: T, index: number) => string;
+    };
     rowActions?: RowActionsConfig<T>;
     columnFreeze?: number;
     /** Freeze last N columns on the right side (sticky right). */
@@ -30,7 +34,7 @@ export type TableBodyProps<T extends Record<string, unknown>> = {
         toggleExpansion: () => void;
     }) => React.ReactNode;
     isRowExpandable?: (row: T, index: number) => boolean;
-    onRowSelect: (rowId: unknown) => void;
+    onRowSelect: (rowId: unknown, rowIndex?: number) => void;
     onEditRow: (rowId: unknown) => void;
     onSaveRow: (rowId: unknown) => void;
     onCancelEdit: (rowId: unknown) => void;

package/dist/components/DataTable/TableFooter/types.d.ts

@@ -4,6 +4,7 @@ export type TableFooterProps = {
     currentPage: number;
     pageSize: number;
     totalRows: number;
+    visibleRows?: number;
     isLoading?: boolean;
     showSkeleton?: boolean;
     hasData?: boolean;

package/dist/components/DataTable/TableHeader/FilterComponents.d.ts

@@ -25,8 +25,6 @@ export declare const SortOptions: React.FC<{
     tableToken: TableTokenType;
     sortHandlers: SortHandlers;
     sortState: SortState;
-    nestedSortOpen: boolean;
-    setNestedSortOpen: (open: boolean) => void;
     onFilterApplied?: () => void;
     onPopoverClose?: () => void;
 }>;
@@ -68,5 +66,12 @@ export declare const SliderFilter: React.FC<{
     data?: Record<string, unknown>[];
     onColumnFilter?: ColumnFilterHandler;
 }>;
+export declare const DateFilter: React.FC<{
+    column: ColumnDefinition<Record<string, unknown>>;
+    fieldKey: string;
+    tableToken: TableTokenType;
+    filterState: FilterState;
+    onColumnFilter?: ColumnFilterHandler;
+}>;
 export declare const ColumnFilter: React.FC<FilterComponentsProps>;
 export {};

package/dist/components/DataTable/TableHeader/handlers.d.ts

@@ -6,7 +6,7 @@ export type SortState = {
 };
 export type FilterState = {
     columnSearchValues: Record<string, string>;
-    columnSelectedValues: Record<string, string[] | {
+    columnSelectedValues: Record<string, string | string[] | {
         min: number;
         max: number;
     }>;

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

@@ -259,6 +259,10 @@ export type RowActionsConfig<T extends Record<string, unknown>> = {
     slot1?: RowActionConfig<T>;
     slot2?: RowActionConfig<T>;
 };
+export type RowSelectionConfig<T extends Record<string, unknown>> = {
+    isDisabled?: (row: T, index: number) => boolean;
+    disabledText?: (row: T, index: number) => string;
+};
 export type DataTableProps<T extends Record<string, unknown>> = {
     data: T[];
     columns: ColumnDefinition<T>[];
@@ -338,6 +342,7 @@ export type DataTableProps<T extends Record<string, unknown>> = {
     isRowExpandable?: (row: T, index: number) => boolean;
     onRowExpansionChange?: (rowId: unknown, isExpanded: boolean, rowData: T) => void;
     enableRowSelection?: boolean;
+    rowSelectionConfig?: RowSelectionConfig<T>;
     showBulkActionBar?: boolean;
     onRowSelectionChange?: (selectedRowIds: string[], isSelected: boolean, rowId: string, rowData: T) => void;
     bulkActions?: BulkActionsConfig;

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

@@ -1,5 +1,13 @@
 import { SortConfig, ColumnFilter, SearchConfig, FilterType, ColumnDefinition } from './types';
 import { AvatarData, TagData, SelectData, MultiSelectData, DateData, DateRangeData } from './columnTypes';
+export declare const isDateOnlyString: (value: string) => boolean;
+/**
+ * Parse a date-only string (`YYYY-MM-DD`) as a local date at midnight.
+ * Avoids JS `new Date("YYYY-MM-DD")` UTC parsing and off-by-one issues.
+ */
+export declare const parseDateOnlyLocal: (dateOnly: string) => Date;
+export declare const parseDateLike: (value: unknown) => Date | null;
+export declare const toLocalDateString: (date: Date) => string;
 export declare const filterData: <T extends Record<string, unknown>>(data: T[], filters: Record<string, unknown>) => T[];
 export declare const searchData: <T extends Record<string, unknown>>(data: T[], searchConfig: SearchConfig, columns: ColumnDefinition<T>[]) => T[];
 export declare const applyColumnFilters: <T extends Record<string, unknown>>(data: T[], filters: ColumnFilter[]) => T[];

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

@@ -109,6 +109,11 @@ export type TriggerConfig = {
         onClick: () => void;
     }) => ReactNode;
 };
+export type DateRangePickerPopoverConfig = {
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    align?: 'start' | 'center' | 'end';
+    sideOffset?: number;
+};
 /**
  * Date validation result
  */
@@ -271,6 +276,7 @@ export type DateRangePickerProps = {
     size?: DateRangePickerSize;
     formatConfig?: DateFormatConfig;
     triggerConfig?: TriggerConfig;
+    popoverConfig?: DateRangePickerPopoverConfig;
     maxMenuHeight?: number;
     showPreset?: boolean;
     /**

package/dist/components/Directory/directory.tokens.d.ts

@@ -49,6 +49,12 @@ export type DirectoryTokenType = {
                     x: CSSObject['padding'];
                     y: CSSObject['padding'];
                 };
+                iconOnlyPadding: {
+                    paddingTop: CSSObject['paddingTop'];
+                    paddingBottom: CSSObject['paddingBottom'];
+                    paddingLeft: CSSObject['paddingLeft'];
+                    paddingRight: CSSObject['paddingRight'];
+                };
                 gap: CSSObject['gap'];
                 borderRadius: CSSObject['borderRadius'];
                 fontWeight: CSSObject['fontWeight'];

package/dist/components/DrawerV2/DrawerV2.d.ts

@@ -0,0 +1,15 @@
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+import { DrawerV2BodyProps, DrawerV2CloseProps, DrawerV2CloseRef, DrawerV2ContentProps, DrawerV2ContentRef, DrawerV2DescriptionProps, DrawerV2DescriptionRef, DrawerV2FooterProps, DrawerV2HeaderProps, DrawerV2NestedRootProps, DrawerV2OverlayProps, DrawerV2OverlayRef, DrawerV2PortalProps, DrawerV2PortalRef, DrawerV2RootProps, DrawerV2TitleProps, DrawerV2TitleRef, DrawerV2TriggerProps, DrawerV2TriggerRef } from './types';
+declare const DrawerV2: ForwardRefExoticComponent<DrawerV2RootProps & RefAttributes<unknown>>;
+export declare const DrawerV2NestedRoot: ForwardRefExoticComponent<DrawerV2NestedRootProps & RefAttributes<unknown>>;
+export declare const DrawerV2Trigger: ForwardRefExoticComponent<DrawerV2TriggerProps & RefAttributes<DrawerV2TriggerRef>>;
+export declare const DrawerV2Portal: ForwardRefExoticComponent<DrawerV2PortalProps & RefAttributes<DrawerV2PortalRef>>;
+export declare const DrawerV2Overlay: ForwardRefExoticComponent<DrawerV2OverlayProps & RefAttributes<DrawerV2OverlayRef>>;
+export declare const DrawerV2Content: ForwardRefExoticComponent<DrawerV2ContentProps & RefAttributes<DrawerV2ContentRef>>;
+export declare const DrawerV2Title: ForwardRefExoticComponent<DrawerV2TitleProps & RefAttributes<DrawerV2TitleRef>>;
+export declare const DrawerV2Description: ForwardRefExoticComponent<DrawerV2DescriptionProps & RefAttributes<DrawerV2DescriptionRef>>;
+export declare const DrawerV2Close: ForwardRefExoticComponent<DrawerV2CloseProps & RefAttributes<DrawerV2CloseRef>>;
+export declare const DrawerV2Header: ForwardRefExoticComponent<DrawerV2HeaderProps & RefAttributes<HTMLDivElement>>;
+export declare const DrawerV2Body: ForwardRefExoticComponent<DrawerV2BodyProps & RefAttributes<HTMLDivElement>>;
+export declare const DrawerV2Footer: ForwardRefExoticComponent<DrawerV2FooterProps & RefAttributes<HTMLDivElement>>;
+export default DrawerV2;

package/dist/components/InputsV2/ChatInputV2/AttachmentDropdown.d.ts

@@ -0,0 +1,11 @@
+import { ChatInputV2TokensType } from './ChatInputV2.tokens';
+import { AttachedFile } from './ChatInputV2.types';
+type AttachmentDropdownV2Props = {
+    id?: string;
+    files: AttachedFile[];
+    onFileRemove: (fileId: string) => void;
+    tokens: ChatInputV2TokensType;
+    onFileClick: (file: AttachedFile) => void;
+};
+declare const AttachmentDropdownV2: ({ id, files, onFileRemove, onFileClick, tokens, }: AttachmentDropdownV2Props) => import("react/jsx-runtime").JSX.Element;
+export default AttachmentDropdownV2;

package/dist/components/InputsV2/ChatInputV2/ChatInputTagV2.d.ts

@@ -0,0 +1,13 @@
+import { ChatInputV2TokensType } from './ChatInputV2.tokens';
+import { AttachedFile } from './ChatInputV2.types';
+type ChatInputTagV2Props = {
+    text: string;
+    tokens: ChatInputV2TokensType['container']['tagContainer'];
+    /** Fired after the remove control handles `stopPropagation` (button). */
+    onRemove: () => void;
+    /** Fired after the file-name control handles `preventDefault` / `stopPropagation` (button). */
+    onFileClick: () => void;
+    file: AttachedFile;
+};
+declare const ChatInputTagV2: ({ file, text, tokens, onRemove, onFileClick, }: ChatInputTagV2Props) => import("react/jsx-runtime").JSX.Element;
+export default ChatInputTagV2;

package/dist/components/InputsV2/ChatInputV2/ChatInputV2.d.ts

@@ -0,0 +1,19 @@
+declare const ChatInputV2: import('react').ForwardRefExoticComponent<{
+    value?: string;
+    topQueries?: import('./ChatInputV2.types').TopQuery[];
+    onTopQuerySelect?: (query: import('./ChatInputV2.types').TopQuery) => void;
+    placeholder?: string;
+    onChange: (value: string) => void;
+    topContent?: import('react').ReactNode;
+    secondaryAction?: import('react').ReactNode;
+    onSecondaryActionClick?: () => void;
+    topQueriesMaxHeight?: number;
+    textareaMaxHeight?: number;
+    disabled?: boolean;
+    attachedFiles?: import('./ChatInputV2.types').AttachedFile[];
+    onAttachFiles?: (files: File[]) => void;
+    onFileRemove?: (fileId: string) => void;
+    onFileClick?: (file: import('./ChatInputV2.types').AttachedFile) => void;
+    onEnter?: () => void;
+} & Omit<import('react').TextareaHTMLAttributes<HTMLTextAreaElement>, "size" | "style" | "className" | "onFocus" | "onBlur" | "onChange" | "cols"> & import('react').RefAttributes<HTMLDivElement>>;
+export default ChatInputV2;

package/dist/components/InputsV2/ChatInputV2/ChatInputV2.dark.tokens.d.ts

@@ -0,0 +1,4 @@
+import { FoundationTokenType } from '../../../tokens/theme.token';
+import { ResponsiveChatInputV2TokensType } from './ChatInputV2.tokens';
+/** Dark theme: surfaces and borders aligned with TextInputV2 dark (gray[900] field, gray[700–800] chrome). */
+export declare const getChatInputV2DarkTokens: (foundationToken: FoundationTokenType) => ResponsiveChatInputV2TokensType;

package/dist/components/InputsV2/ChatInputV2/ChatInputV2.light.tokens.d.ts

@@ -0,0 +1,3 @@
+import { FoundationTokenType } from '../../../tokens/theme.token';
+import { ResponsiveChatInputV2TokensType } from './ChatInputV2.tokens';
+export declare const getChatInputV2LightTokens: (foundationToken: FoundationTokenType) => ResponsiveChatInputV2TokensType;

package/dist/components/InputsV2/ChatInputV2/ChatInputV2.tokens.d.ts

@@ -0,0 +1,125 @@
+import { CSSObject } from 'styled-components';
+import { BreakpointType } from '../../../breakpoints/breakPoints';
+import { FoundationTokenType } from '../../../tokens/theme.token';
+import { InputStateV2 } from '../inputV2.types';
+import { Theme } from '../../../context/theme.enum';
+export type ChatInputV2TokensType = {
+    container: {
+        backgroundColor: {
+            [key in InputStateV2]: CSSObject['backgroundColor'];
+        };
+        borderRadius: CSSObject['borderRadius'];
+        border: {
+            [key in InputStateV2]: CSSObject['border'];
+        };
+        gap: CSSObject['gap'];
+        paddingTop: CSSObject['paddingTop'];
+        paddingRight: CSSObject['paddingRight'];
+        paddingBottom: CSSObject['paddingBottom'];
+        paddingLeft: CSSObject['paddingLeft'];
+        attachedFilesContainer: {
+            gap: CSSObject['gap'];
+            overflowMenu: {
+                gap: CSSObject['gap'];
+                backgroundColor: {
+                    [key in InputStateV2]: CSSObject['backgroundColor'];
+                };
+                borderRadius: CSSObject['borderRadius'];
+                padding: CSSObject['padding'];
+                top: CSSObject['top'];
+                right: CSSObject['right'];
+                maxHeight: CSSObject['maxHeight'];
+            };
+        };
+        tagContainer: {
+            gap: CSSObject['gap'];
+            borderRadius: CSSObject['borderRadius'];
+            paddingTop: CSSObject['paddingTop'];
+            paddingRight: CSSObject['paddingRight'];
+            paddingBottom: CSSObject['paddingBottom'];
+            paddingLeft: CSSObject['paddingLeft'];
+            border: CSSObject['border'];
+            backgroundColor: CSSObject['backgroundColor'];
+            text: {
+                color: CSSObject['color'];
+                fontSize: CSSObject['fontSize'];
+                fontWeight: CSSObject['fontWeight'];
+            };
+        };
+        inputContainer: {
+            outline: {
+                [key in InputStateV2]: CSSObject['outline'];
+            };
+            boxShadow: {
+                [key in InputStateV2]: CSSObject['boxShadow'];
+            };
+            gap: CSSObject['gap'];
+            borderRadius: CSSObject['borderRadius'];
+            paddingTop: CSSObject['paddingTop'];
+            paddingRight: CSSObject['paddingRight'];
+            paddingBottom: CSSObject['paddingBottom'];
+            paddingLeft: CSSObject['paddingLeft'];
+            border: CSSObject['border'];
+            backgroundColor: CSSObject['backgroundColor'];
+            input: {
+                color: CSSObject['color'];
+                placeholder: CSSObject['color'];
+                paddingTop: CSSObject['paddingTop'];
+                paddingRight: CSSObject['paddingRight'];
+                paddingLeft: CSSObject['paddingLeft'];
+                minHeight: CSSObject['minHeight'];
+                maxHeight: CSSObject['maxHeight'];
+            };
+            actionContainer: {
+                paddingRight: CSSObject['paddingRight'];
+                paddingBottom: CSSObject['paddingBottom'];
+                paddingLeft: CSSObject['paddingLeft'];
+            };
+            topQueriesContainer: {
+                marginRight: CSSObject['marginRight'];
+                marginLeft: CSSObject['marginLeft'];
+                paddingTop: CSSObject['paddingTop'];
+                paddingRight: CSSObject['paddingRight'];
+                paddingBottom: CSSObject['paddingBottom'];
+                paddingLeft: CSSObject['paddingLeft'];
+                borderTop: CSSObject['borderTop'];
+                header: {
+                    color: CSSObject['color'];
+                    fontSize: CSSObject['fontSize'];
+                    fontWeight: CSSObject['fontWeight'];
+                    textTransform: CSSObject['textTransform'];
+                    paddingTop: CSSObject['paddingTop'];
+                    paddingRight: CSSObject['paddingRight'];
+                    paddingBottom: CSSObject['paddingBottom'];
+                    paddingLeft: CSSObject['paddingLeft'];
+                    backgroundColor: CSSObject['backgroundColor'];
+                };
+                item: {
+                    backgroundColor: {
+                        [key in InputStateV2]: CSSObject['backgroundColor'];
+                    };
+                    color: {
+                        [key in InputStateV2]: CSSObject['color'];
+                    };
+                    fontSize: CSSObject['fontSize'];
+                    fontWeight: CSSObject['fontWeight'];
+                    paddingTop: CSSObject['paddingTop'];
+                    paddingRight: CSSObject['paddingRight'];
+                    paddingBottom: CSSObject['paddingBottom'];
+                    paddingLeft: CSSObject['paddingLeft'];
+                    border: CSSObject['border'];
+                    transition: CSSObject['transition'];
+                    cursor: CSSObject['cursor'];
+                    opacity: {
+                        [key in InputStateV2]: CSSObject['opacity'];
+                    };
+                };
+            };
+        };
+    };
+};
+export type ResponsiveChatInputV2TokensType = {
+    [key in keyof BreakpointType]: ChatInputV2TokensType;
+};
+export declare const getChatInputV2Tokens: (foundationToken: FoundationTokenType, theme?: Theme | string) => ResponsiveChatInputV2TokensType;
+export default getChatInputV2Tokens;

package/dist/components/InputsV2/ChatInputV2/ChatInputV2.types.d.ts

@@ -0,0 +1,54 @@
+import { ReactNode, TextareaHTMLAttributes } from 'react';
+import { ChatInputV2TokensType } from './ChatInputV2.tokens';
+export type AttachedFile = {
+    id: string;
+    name: string;
+    type: 'image' | 'pdf' | 'csv' | 'text' | 'other';
+    size?: number;
+    url?: string;
+    preview?: string;
+};
+export type TopQuery = {
+    id: string;
+    text: string;
+};
+export type ChatInputV2Props = {
+    value?: string;
+    topQueries?: TopQuery[];
+    onTopQuerySelect?: (query: TopQuery) => void;
+    placeholder?: string;
+    onChange: (value: string) => void;
+    /** Renders full-width above the field row (e.g. context, filters, banners). */
+    topContent?: ReactNode;
+    /** Renders in the secondary control area (e.g. voice / send) next to the attach control (desktop) or the textarea end (mobile). */
+    secondaryAction?: ReactNode;
+    onSecondaryActionClick?: () => void;
+    topQueriesMaxHeight?: number;
+    /** Max textarea height in px (ChatGPT-style auto-grow). Defaults to token `input.maxHeight`. */
+    textareaMaxHeight?: number;
+    disabled?: boolean;
+    attachedFiles?: AttachedFile[];
+    /** New files from the hidden file input (append in parent state). */
+    onAttachFiles?: (files: File[]) => void;
+    /** Remove by id — use this for chip dismiss; do not use `onAttachFiles` to “replace” the list. */
+    onFileRemove?: (fileId: string) => void;
+    onFileClick?: (file: AttachedFile) => void;
+    onEnter?: () => void;
+} & Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'size' | 'style' | 'className' | 'onFocus' | 'onBlur' | 'cols' | 'onChange'>;
+export type MobileChatInputV2Props = {
+    disabled?: boolean;
+    value: string;
+    onChange?: (value: string) => void;
+    topContent?: ReactNode;
+    secondaryAction?: ReactNode;
+    placeholder?: string;
+    attachedFiles?: AttachedFile[];
+    handleAttachClick?: () => void;
+    onFileRemove?: (fileId: string) => void;
+    /** Invoked when a chip label is activated (inline or overflow); forwarded to `ChatInputV2AttachmentRow`. */
+    onFileClick?: (file: AttachedFile) => void;
+    onSecondaryActionClick?: () => void;
+    id?: string;
+    webTokens: ChatInputV2TokensType;
+    onEnter?: () => void;
+} & Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'size' | 'className' | 'onFocus' | 'onBlur' | 'cols' | 'onChange'>;

package/dist/components/InputsV2/ChatInputV2/ChatInputV2AttachmentRow.d.ts

@@ -0,0 +1,13 @@
+import { RefObject } from 'react';
+import { AttachedFile } from './ChatInputV2.types';
+import { CSSObject } from 'styled-components';
+import { ChatInputV2TokensType } from './ChatInputV2.tokens';
+export type ChatInputV2AttachmentRowProps = {
+    attachedFiles: AttachedFile[];
+    onFileRemove: (fileId: string) => void;
+    onFileClick: (file: AttachedFile) => void;
+    outerContainerRef: RefObject<HTMLElement | null>;
+    gap: NonNullable<CSSObject['gap']>;
+    tokens: ChatInputV2TokensType;
+};
+export default function ChatInputV2AttachmentRow({ tokens, attachedFiles, onFileRemove, onFileClick, outerContainerRef, gap, }: ChatInputV2AttachmentRowProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/InputsV2/ChatInputV2/ChatInputV2Mobile.dark.tokens.d.ts

@@ -0,0 +1,4 @@
+import { FoundationTokenType } from '../../../tokens/theme.token';
+import { ChatInputV2MobileTokensType } from './ChatInputV2Mobile.tokens';
+/** Dark mobile shell: aligned with `getChatInputV2DarkTokens` (gray[800] chrome, gray[800] field borders, gray[100] text). */
+export declare const getChatInputV2MobileDarkTokens: (foundationToken: FoundationTokenType) => ChatInputV2MobileTokensType;

package/dist/components/InputsV2/ChatInputV2/ChatInputV2Mobile.light.tokens.d.ts

@@ -0,0 +1,3 @@
+import { FoundationTokenType } from '../../../tokens/theme.token';
+import { ChatInputV2MobileTokensType } from './ChatInputV2Mobile.tokens';
+export declare const getChatInputV2MobileLightTokens: (foundationToken: FoundationTokenType) => ChatInputV2MobileTokensType;