@juspay/blend-design-system 0.0.31 → 0.0.32

package/dist/components/Charts/BlendChart.d.ts

@@ -0,0 +1,3 @@
+import { BlendChartProps } from './BlendChart.types';
+declare const BlendChart: import('react').ForwardRefExoticComponent<Omit<BlendChartProps, "ref"> & import('react').RefAttributes<import('highcharts-react-official').HighchartsReactRefObject>>;
+export default BlendChart;

package/dist/components/Charts/BlendChart.types.d.ts

@@ -0,0 +1,28 @@
+import { HighchartsReactProps, HighchartsReactRefObject } from 'highcharts-react-official';
+import { default as Highcharts } from 'highcharts';
+export declare const BlendChartBaseInstance: typeof Highcharts;
+export type BlendChartType = typeof Highcharts;
+export type BlendChartReactProps = HighchartsReactProps;
+export type BlendChartProps = BlendChartReactProps & {
+    highcharts?: BlendChartType;
+};
+export type BlendChartOptions = Highcharts.Options;
+export type BlendChartSeriesOptionsType = Highcharts.SeriesOptionsType;
+export type BlendChartSeriesLineOptions = Highcharts.SeriesLineOptions;
+export type BlendChartSeriesAreaOptions = Highcharts.SeriesAreaOptions;
+export type BlendChartSeriesXrangeOptions = Highcharts.SeriesXrangeOptions;
+export type BlendChartPoint = Highcharts.Point;
+export type BlendChartPointMarkerOptionsObject = Highcharts.PointMarkerOptionsObject;
+export type BlendChartXAxisOptions = Highcharts.XAxisOptions;
+export type BlendChartYAxisOptions = Highcharts.YAxisOptions;
+export type BlendChartChart = Highcharts.Chart;
+export type BlendChartAxis = Highcharts.Axis;
+export type BlendChartSeries = Highcharts.Series;
+export type BlendChartSeriesZonesOptionsObject = Highcharts.SeriesZonesOptionsObject;
+export type BlendChartReactRefObject = HighchartsReactRefObject;
+export interface BlendChartContainerProps {
+    children: React.ReactNode;
+}
+export interface BlendChartHeaderProps {
+    children: React.ReactNode;
+}

package/dist/components/Charts/BlendChartContainer.d.ts

@@ -0,0 +1,6 @@
+import { BlendChartContainerProps } from './BlendChart.types';
+declare const BlendChartContainer: {
+    ({ children }: BlendChartContainerProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default BlendChartContainer;

package/dist/components/Charts/BlendChartHeader.d.ts

@@ -0,0 +1,6 @@
+import { BlendChartHeaderProps } from './BlendChart.types';
+declare const BlendChartHeader: {
+    ({ children }: BlendChartHeaderProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default BlendChartHeader;

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

@@ -5,4 +5,8 @@ export { default as ChartHeader } from './ChartHeader';
 export { default as ChartLegends } from './ChartLegend';
 export { default as SankeyNode } from './SankeyNode';
 export { default as SankeyLink } from './SankeyLink';
+export { default as BlendChart } from './BlendChart';
+export { default as BlendChartContainer } from './BlendChartContainer';
+export { default as BlendChartHeader } from './BlendChartHeader';
 export * from './types';
+export * from './BlendChart.types';

package/dist/components/Charts/renderChart.d.ts

@@ -1,2 +1,2 @@
 import { RenderChartProps } from './types';
-export declare const renderChart: ({ chartName, flattenedData, chartType, hoveredKey, lineKeys, colors, setHoveredKey, data: originalData, selectedKeys, isSmallScreen, barsize, xAxis, yAxis, noData, height, }: RenderChartProps) => import("react/jsx-runtime").JSX.Element;
+export declare const renderChart: ({ chartName, flattenedData, chartType, hoveredKey, lineKeys, colors, setHoveredKey, data: originalData, selectedKeys, isSmallScreen, barsize, xAxis, yAxis, tooltip, noData, height, CustomizedDot, }: RenderChartProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -17,6 +17,13 @@ export type DataPoint = {
         timeZone?: string;
         hour12?: boolean;
     }[];
+    error?: {
+        title: string;
+        errorData?: {
+            label: string;
+            value: string;
+        }[];
+    };
 };
 export declare enum ChartLegendPosition {
     TOP = "top",
@@ -27,6 +34,7 @@ export declare enum ChartType {
     BAR = "bar",
     PIE = "pie",
     SCATTER = "scatter",
+    AREA = "area",
     SANKEY = "sankey"
 }
 export declare enum LegendsChangeType {
@@ -80,6 +88,24 @@ export type AxisConfig = {
 };
 export type XAxisConfig = AxisConfig;
 export type YAxisConfig = AxisConfig;
+export type TooltipConfig = {
+    position?: {
+        x?: number;
+        y?: number;
+    };
+    allowEscapeViewBox?: {
+        x?: boolean;
+        y?: boolean;
+    };
+};
+export type DotItemDotProps = {
+    cx?: number;
+    cy?: number;
+    value?: number;
+    payload?: {
+        name?: string;
+    };
+};
 export type NewNestedDataPoint = {
     name: string;
     data: {
@@ -97,7 +123,10 @@ export type RenderChartProps = {
     chartType: ChartType;
     hoveredKey: string | null;
     lineKeys: string[];
-    colors: string[];
+    colors: {
+        key: string;
+        color: string;
+    }[];
     setHoveredKey: (key: string | null) => void;
     data: NewNestedDataPoint[];
     selectedKeys: string[];
@@ -105,16 +134,22 @@ export type RenderChartProps = {
     barsize?: number;
     xAxis?: XAxisConfig;
     yAxis?: YAxisConfig;
+    tooltip?: TooltipConfig;
     noData?: NoDataProps;
     height?: number | string;
+    CustomizedDot?: (props: DotItemDotProps) => React.ReactElement<SVGElement>;
 };
 export type CoreChartProps = {
     chartType?: ChartType;
     data: NewNestedDataPoint[];
-    colors?: string[];
+    colors?: {
+        key: string;
+        color: string;
+    }[];
     barsize?: number;
     xAxis?: XAxisConfig;
     yAxis?: YAxisConfig;
+    tooltip?: TooltipConfig;
     height?: number | string;
     width?: number | string;
     isSmallScreen?: boolean;
@@ -130,7 +165,10 @@ export type ChartsSkeletonProps = {
 export type ChartsProps = {
     chartType?: ChartType;
     data: NewNestedDataPoint[];
-    colors?: string[];
+    colors?: {
+        key: string;
+        color: string;
+    }[];
     slot1?: ReactNode;
     slot2?: ReactNode;
     slot3?: ReactNode;
@@ -141,6 +179,7 @@ export type ChartsProps = {
     barsize?: number;
     xAxis?: XAxisConfig;
     yAxis?: YAxisConfig;
+    tooltip?: TooltipConfig;
     noData?: NoDataProps;
     height?: number;
     showHeader?: boolean;
@@ -149,6 +188,11 @@ export type ChartsProps = {
     onExpandedChange?: (isExpanded: boolean) => void;
     chartName?: string;
     skeleton?: ChartsSkeletonProps;
+    legends?: {
+        title: string;
+        total?: string;
+    }[];
+    CustomizedDot?: (props: DotItemDotProps) => React.ReactElement<SVGElement>;
 };
 export type FlattenedDataPoint = {
     name: string;
@@ -171,7 +215,10 @@ export type ChartHeaderProps = {
 export type ChartLegendsProps = {
     chartContainerRef: React.RefObject<HTMLDivElement>;
     keys: string[];
-    colors: string[];
+    colors: {
+        key: string;
+        color: string;
+    }[];
     handleLegendClick: (key: string) => void;
     handleLegendEnter: (key: string) => void;
     handleLegendLeave: () => void;
@@ -182,6 +229,10 @@ export type ChartLegendsProps = {
     stacked?: boolean;
     isSmallScreen?: boolean;
     stackedLegendsData?: StackedLegendsDataPoint[];
+    legends?: {
+        title: string;
+        total?: string;
+    }[];
 };
 export type CustomTooltipProps = TooltipProps<ValueType, NameType> & {
     hoveredKey: string | null;
@@ -230,7 +281,10 @@ export type SankeyNodeProps = {
         value?: number;
     };
     containerWidth?: number;
-    nodeColors?: string[];
+    nodeColors?: (string | {
+        key: string;
+        color: string;
+    })[];
     onMouseEnter?: (data: SankeyTooltipData, event: React.MouseEvent) => void;
     onMouseLeave?: () => void;
 };
@@ -244,7 +298,10 @@ export type SankeyLinkProps = {
     linkWidth?: number;
     index?: number;
     payload?: SankeyLink;
-    linkColors?: string[];
+    linkColors?: (string | {
+        key: string;
+        color: string;
+    })[];
     onMouseEnter?: (data: SankeyTooltipData, event: React.MouseEvent) => void;
     onMouseLeave?: () => void;
 };

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

@@ -1 +1,4 @@
-export declare const DEFAULT_COLORS: string[];
+export declare const DEFAULT_COLORS: {
+    key: string;
+    color: string;
+}[];

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

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+import { AttachedFile, MenuProps } from '../../main';
+type AttachmentFileProps = {
+    attachedFiles: AttachedFile[];
+    onFileRemove?: (fileId: string) => void;
+    onFileClick?: (file: AttachedFile) => void;
+    overflowMenuProps?: Partial<MenuProps>;
+    containerRef?: React.RefObject<HTMLDivElement | null>;
+};
+declare const AttachmentFile: ({ attachedFiles, onFileRemove, onFileClick, overflowMenuProps, containerRef, }: AttachmentFileProps) => false | import("react/jsx-runtime").JSX.Element;
+export default AttachmentFile;

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

@@ -0,0 +1,14 @@
+import { AttachedFile, MenuProps } from '../../main';
+type MobileChatInputProps = {
+    value: string;
+    onChange?: (value: string) => void;
+    slot1?: React.ReactNode;
+    placeholder?: string;
+    attachedFiles?: AttachedFile[];
+    handleAttachClick?: () => void;
+    onFileRemove?: (fileId: string) => void;
+    onFileClick?: (file: AttachedFile) => void;
+    overflowMenuProps?: Partial<MenuProps>;
+};
+declare const MobileChatInput: React.FC<MobileChatInputProps>;
+export default MobileChatInput;

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

@@ -13,6 +13,52 @@ import { FoundationTokenType } from '../../tokens/theme.token';
  * - topQueries: Top queries section with header and items
  */
 export type ChatInputTokensType = Readonly<{
+    backgroundColor: {
+        default: CSSObject['backgroundColor'];
+        hover: CSSObject['backgroundColor'];
+        disabled: CSSObject['backgroundColor'];
+    };
+    borderRadius: {
+        default: CSSObject['borderRadius'];
+        focus: CSSObject['borderRadius'];
+    };
+    border: {
+        default: CSSObject['border'];
+        focus: CSSObject['border'];
+    };
+    minHeight: CSSObject['minHeight'];
+    maxHeight: CSSObject['maxHeight'];
+    gap: CSSObject['gap'];
+    text: {
+        color: {
+            default: CSSObject['color'];
+            hover: CSSObject['color'];
+            focus: CSSObject['color'];
+            disabled: CSSObject['color'];
+        };
+        fontSize: {
+            default: CSSObject['fontSize'];
+            hover: CSSObject['fontSize'];
+            focus: CSSObject['fontSize'];
+            disabled: CSSObject['fontSize'];
+        };
+        fontWeight: {
+            default: CSSObject['fontWeight'];
+            hover: CSSObject['fontWeight'];
+            focus: CSSObject['fontWeight'];
+            disabled: CSSObject['fontWeight'];
+        };
+        lineHeight: {
+            default: CSSObject['lineHeight'];
+            hover: CSSObject['lineHeight'];
+            focus: CSSObject['lineHeight'];
+        };
+    };
+    resize: CSSObject['resize'];
+    overflow: CSSObject['overflow'];
+    paddingLeft: CSSObject['paddingLeft'];
+    paddingTop: CSSObject['paddingTop'];
+    paddingBottom: CSSObject['paddingBottom'];
     container: {
         backgroundColor: {
             default: CSSObject['backgroundColor'];

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

@@ -30,3 +30,8 @@ export declare const filterDuplicateFiles: (files: File[], attachedFiles: Attach
     newFiles: File[];
     duplicateFiles: string[];
 };
+/**
+ * Simple utility to truncate placeholder text if it exceeds the textarea's available width
+ * Uses canvas to measure text width and truncates with ellipsis if needed
+ */
+export declare const truncatePlaceholder: (textarea: HTMLTextAreaElement | null, placeholder: string | undefined) => string | undefined;

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

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

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

@@ -7,6 +7,7 @@ export type TableFooterProps = {
     isLoading?: boolean;
     showSkeleton?: boolean;
     hasData?: boolean;
+    isNarrowContainer?: boolean;
     onPageChange: (page: number) => void;
     onPageSizeChange: (size: number) => void;
 };

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

@@ -15,6 +15,7 @@ type FilterComponentsProps = {
     onFilterApplied?: () => void;
 };
 export declare const SortOptions: React.FC<{
+    column: ColumnDefinition<Record<string, unknown>>;
     fieldKey: string;
     tableToken: TableTokenType;
     sortHandlers: SortHandlers;

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

@@ -2,6 +2,7 @@ import { SortDirection, FilterType, ColumnDefinition } from '../types';
 export type SortState = {
     currentSortField: string | null;
     currentSortDirection: SortDirection;
+    currentSortType?: string;
 };
 export type FilterState = {
     columnSearchValues: Record<string, string>;
@@ -15,11 +16,11 @@ export type ColumnFilterHandler = (field: string, filterType: FilterType, value:
     max: number;
 }, operator?: 'endsWith' | 'startsWith' | 'equals' | 'contains' | 'gt' | 'lt' | 'gte' | 'lte' | 'range') => void;
 export type SortHandlers = {
-    handleSort: (field: string) => void;
-    handleSortAscending: (field: string) => void;
-    handleSortDescending: (field: string) => void;
+    handleSort: (field: string, sortType?: string) => void;
+    handleSortAscending: (field: string, sortType?: string) => void;
+    handleSortDescending: (field: string, sortType?: string) => void;
 };
-export declare const createSortHandlers: (sortState: SortState, onSort: (field: keyof Record<string, unknown>) => void, onSortAscending?: (field: keyof Record<string, unknown>) => void, onSortDescending?: (field: keyof Record<string, unknown>) => void) => SortHandlers;
+export declare const createSortHandlers: (sortState: SortState, onSort: (field: keyof Record<string, unknown>, sortType?: string) => void, onSortAscending?: (field: keyof Record<string, unknown>, sortType?: string) => void, onSortDescending?: (field: keyof Record<string, unknown>, sortType?: string) => void) => SortHandlers;
 export type FilterHandlers = {
     handleSearchChange: (fieldKey: string, value: string) => void;
     handleSelectFilter: (column: ColumnDefinition<Record<string, unknown>>, fieldKey: string, value: string, onColumnFilter?: ColumnFilterHandler) => void;

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

@@ -34,9 +34,9 @@ export type TableHeaderProps<T extends Record<string, unknown>> = {
     mobileConfig?: MobileDataTableConfig;
     mobileOverflowColumns?: ColumnDefinition<T>[];
     onMobileOverflowClick?: (row: T) => void;
-    onSort: (field: keyof T) => void;
-    onSortAscending?: (field: keyof T) => void;
-    onSortDescending?: (field: keyof T) => void;
+    onSort: (field: keyof T, sortType?: string) => void;
+    onSortAscending?: (field: keyof T, sortType?: string) => void;
+    onSortDescending?: (field: keyof T, sortType?: string) => void;
     onSelectAll: (checked: boolean | 'indeterminate') => void;
     onColumnChange: (columns: ColumnDefinition<T>[]) => void;
     onColumnReorder?: (columns: ColumnDefinition<T>[]) => void;

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

@@ -126,6 +126,46 @@ export type BaseColumnDefinition<T> = {
     filterType?: FilterType;
     showSkeleton?: boolean;
     skeletonVariant?: SkeletonVariant;
+    /**
+     * Function to get the field to sort by. Allows sorting by a different field than the column's field.
+     * @param sortType - Optional sort type identifier (e.g., 'primary', 'delta', 'absolute')
+     * @returns The field name to sort by
+     * @example
+     * // Sort by delta_total_volume when sortType is 'delta'
+     * getSortField: (sortType) => sortType === 'delta' ? 'delta_total_volume' : 'total_volume'
+     */
+    getSortField?: (sortType?: string) => string;
+    /**
+     * Enable delta sorting UI in the sorting popover. When true, shows "Value | Delta" sections.
+     * Requires getSortField to be provided for delta sorting to work.
+     * @default false
+     */
+    isDeltaSortable?: boolean;
+    /**
+     * Optional function to format/transform values before comparison during sorting.
+     * Useful for custom sorting logic (e.g., extracting numbers from formatted strings like "INR 276").
+     * The sortType parameter allows you to apply different formatting logic for delta sorting vs primary sorting.
+     * @param value - The raw value from the data row
+     * @param row - The entire row data
+     * @param column - The column definition
+     * @param sortType - Optional sort type identifier (e.g., 'primary', 'delta', 'absolute') - same value passed to getSortField. Use this to determine if delta sorting is active and apply appropriate formatting.
+     * @returns The formatted value to use for comparison
+     * @example
+     * // Different formatting for delta vs primary sorting
+     * sortValueFormatter: (value, row, column, sortType) => {
+     *   // For delta sorting, values might already be numbers
+     *   if (sortType === 'delta') {
+     *     return typeof value === 'number' ? value : 0
+     *   }
+     *   // For primary sorting, extract numeric value from formatted string
+     *   if (typeof value === 'string') {
+     *     const num = parseFloat(value.replace(/[^\d.-]/g, ''))
+     *     return isNaN(num) ? 0 : num
+     *   }
+     *   return value
+     * }
+     */
+    sortValueFormatter?: (value: unknown, row: T, column: ColumnDefinition<T>, sortType?: string) => unknown;
 };
 export type ColumnDefinition<T> = (BaseColumnDefinition<T> & {
     type: ColumnType.TEXT;
@@ -172,6 +212,7 @@ export type ColumnDefinition<T> = (BaseColumnDefinition<T> & {
 export type SortConfig = {
     field: string;
     direction: SortDirection;
+    sortType?: string;
 };
 export type SearchConfig = {
     query: string;

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

@@ -1,6 +1,6 @@
 import { DirectoryProps } from './types';
 declare const Directory: {
-    ({ directoryData, idPrefix, activeItem, onActiveItemChange, defaultActiveItem, }: DirectoryProps): import("react/jsx-runtime").JSX.Element;
+    ({ directoryData, idPrefix, activeItem, onActiveItemChange, defaultActiveItem, iconOnlyMode, }: DirectoryProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default Directory;

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

@@ -17,5 +17,5 @@ type ActiveItemProviderProps = {
     defaultActiveItem?: string | null;
 };
 export declare const ActiveItemProvider: React.FC<ActiveItemProviderProps>;
-declare const NavItem: ({ item, index, onNavigate, itemPath, }: NavItemProps) => import("react/jsx-runtime").JSX.Element;
+declare const NavItem: ({ item, index, onNavigate, itemPath, iconOnlyMode, }: NavItemProps) => import("react/jsx-runtime").JSX.Element;
 export default NavItem;

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

@@ -1,3 +1,3 @@
 import { SectionProps } from './types';
-declare const Section: ({ section, sectionIndex, onNavigateBetweenSections, idPrefix, }: SectionProps) => import("react/jsx-runtime").JSX.Element;
+declare const Section: ({ section, sectionIndex, onNavigateBetweenSections, idPrefix, iconOnlyMode, }: SectionProps) => import("react/jsx-runtime").JSX.Element;
 export default Section;

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

@@ -5,6 +5,7 @@ export type DirectoryProps = {
     activeItem?: string | null;
     onActiveItemChange?: (item: string | null) => void;
     defaultActiveItem?: string | null;
+    iconOnlyMode?: boolean;
 };
 export type DirectoryData = {
     label?: string;
@@ -31,10 +32,12 @@ export type SectionProps = {
     sectionIndex: number;
     onNavigateBetweenSections: (direction: 'up' | 'down', currentIndex: number) => void;
     idPrefix?: string;
+    iconOnlyMode?: boolean;
 };
 export type NavItemProps = {
     item: NavbarItem;
     index: number;
     onNavigate: (direction: 'up' | 'down', currentIndex: number) => void;
     itemPath?: string;
+    iconOnlyMode?: boolean;
 };

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

@@ -118,6 +118,11 @@ export type DrawerContentProps = {
      * ID of the element describing the drawer content
      */
     'aria-describedby'?: string;
+    /**
+     * Whether the drawer should take full screen (full height and width, no border radius)
+     * @default false
+     */
+    fullScreen?: boolean;
 };
 export type DrawerHeaderProps = {
     /**

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

@@ -7,6 +7,40 @@
  * @returns Sanitized string value
  */
 export declare const sanitizeNumberInput: (inputValue: string, allowNegative?: boolean) => string;
+/**
+ * Clamps a numeric value to the nearest valid boundary (min or max)
+ * If value is less than min, returns min
+ * If value is greater than max, returns max
+ * Otherwise returns the value unchanged
+ *
+ * @param value - The numeric value to clamp
+ * @param min - Minimum allowed value
+ * @param max - Maximum allowed value
+ * @returns Clamped numeric value
+ */
+export declare const clampToBoundary: (value: number, min?: number, max?: number) => number;
+/**
+ * Increments a value by step, respecting min/max constraints
+ *
+ * @param currentValue - Current numeric value (can be null)
+ * @param step - Step size
+ * @param min - Minimum allowed value
+ * @param max - Maximum allowed value
+ * @param preventNegative - Whether to prevent negative values
+ * @returns New incremented value, clamped to boundaries
+ */
+export declare const incrementValue: (currentValue: number | null, step?: number, min?: number, max?: number, preventNegative?: boolean) => number;
+/**
+ * Decrements a value by step, respecting min/max constraints
+ *
+ * @param currentValue - Current numeric value (can be null)
+ * @param step - Step size
+ * @param min - Minimum allowed value
+ * @param max - Maximum allowed value
+ * @param preventNegative - Whether to prevent negative values
+ * @returns New decremented value, clamped to boundaries
+ */
+export declare const decrementValue: (currentValue: number | null, step?: number, min?: number, max?: number, preventNegative?: boolean) => number;
 /**
  * Clamps and sanitizes the value on blur
  * Similar to Chakra UI's clampValueOnBlur behavior
@@ -15,9 +49,55 @@ export declare const sanitizeNumberInput: (inputValue: string, allowNegative?: b
  * @param allowNegative - Whether negative numbers are allowed
  * @param min - Minimum allowed value
  * @param max - Maximum allowed value
- * @returns Clamped and sanitized number value or empty string
+ * @returns Clamped and sanitized value string
  */
 export declare const clampValueOnBlur: (inputValue: string, allowNegative?: boolean, min?: number, max?: number) => string;
+/**
+ * Checks if a numeric value is outside the valid range
+ *
+ * @param value - The numeric value to check
+ * @param min - Minimum allowed value
+ * @param max - Maximum allowed value
+ * @returns True if value is outside the valid range
+ */
+export declare const isValueOutsideRange: (value: number, min?: number, max?: number) => boolean;
+/**
+ * Checks if incrementing would exceed max
+ *
+ * @param currentValue - Current numeric value (can be null)
+ * @param step - Step size
+ * @param min - Minimum allowed value
+ * @param max - Maximum allowed value
+ * @returns True if incrementing would exceed max
+ */
+export declare const wouldExceedMax: (currentValue: number | null, step: number, min?: number, max?: number) => boolean;
+/**
+ * Checks if decrementing would go below min
+ *
+ * @param currentValue - Current numeric value (can be null)
+ * @param step - Step size
+ * @param min - Minimum allowed value
+ * @param preventNegative - Whether to prevent negative values
+ * @returns True if decrementing would go below min
+ */
+export declare const wouldGoBelowMin: (currentValue: number | null, step: number, min?: number, preventNegative?: boolean) => boolean;
+/**
+ * Generates an error message for a value outside the valid range
+ *
+ * @param min - Minimum allowed value
+ * @param max - Maximum allowed value
+ * @returns Error message string
+ */
+export declare const getRangeErrorMessage: (min?: number, max?: number) => string;
+/**
+ * Validates if a number value is within min/max bounds
+ *
+ * @param value - The number value to validate
+ * @param min - Minimum allowed value
+ * @param max - Maximum allowed value
+ * @returns True if value is within bounds, false otherwise
+ */
+export declare const isValueInRange: (value: number | null | undefined, min?: number, max?: number) => boolean;
 /**
  * Validates if a string represents a valid number
  *

package/dist/components/Inputs/TextArea/textarea.token.d.ts

@@ -10,6 +10,10 @@ declare enum TextAreaState {
 }
 export type TextAreaTokensType = {
     gap: CSSObject['gap'];
+    placeholder?: {
+        color?: CSSObject['color'];
+        fontWeight?: CSSObject['fontWeight'];
+    };
     label: {
         fontSize: CSSObject['fontSize'];
         fontWeight: CSSObject['fontWeight'];

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

@@ -1,3 +1,3 @@
 import { MultiSelectProps } from './types';
-declare const MultiSelect: ({ selectedValues, onChange, items, label, sublabel, disabled, helpIconHintText, name, required, variant, selectionTagType, slot, hintText, placeholder, size, enableSearch, searchPlaceholder, enableSelectAll, selectAllText, maxSelections, customTrigger, useDrawerOnMobile, minMenuWidth, maxMenuWidth, maxMenuHeight, alignment, side, sideOffset, alignOffset, inline, onBlur, onFocus, error, errorMessage, showActionButtons, primaryAction, secondaryAction, showItemDividers, showHeaderBorder, fullWidth, enableVirtualization, virtualListItemHeight, virtualListOverscan, itemsToRender, onEndReached, endReachedThreshold, hasMore, loadingComponent, skeleton, maxTriggerWidth, minTriggerWidth, allowCustomValue, customValueLabel, }: MultiSelectProps) => import("react/jsx-runtime").JSX.Element;
+declare const MultiSelect: ({ selectedValues, onChange, items, label, sublabel, disabled, helpIconHintText, name, required, variant, selectionTagType, slot, hintText, placeholder, size, enableSearch, searchPlaceholder, enableSelectAll, selectAllText, maxSelections, customTrigger, useDrawerOnMobile, minMenuWidth, maxMenuWidth, maxMenuHeight, alignment, side, sideOffset, alignOffset, inline, onBlur, onFocus, error, errorMessage, showActionButtons, primaryAction, secondaryAction, showItemDividers, showHeaderBorder, fullWidth, enableVirtualization, virtualListItemHeight, virtualListOverscan, itemsToRender, onEndReached, endReachedThreshold, hasMore, loadingComponent, skeleton, maxTriggerWidth, minTriggerWidth, allowCustomValue, customValueLabel, showClearButton, onClearAllClick, }: MultiSelectProps) => import("react/jsx-runtime").JSX.Element;
 export default MultiSelect;

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

@@ -123,6 +123,8 @@ export type MultiSelectProps = {
     skeleton?: MultiSelectSkeletonProps;
     allowCustomValue?: boolean;
     customValueLabel?: string;
+    showClearButton?: boolean;
+    onClearAllClick?: () => void;
 };
 export type MultiSelectMenuProps = {
     items: MultiSelectMenuGroupType[];