@juspay/blend-design-system 0.0.20-beta → 0.0.21-beta

package/dist/components/CodeBlock/codeBlock.token.d.ts

@@ -0,0 +1,90 @@
+import { CSSObject } from 'styled-components';
+import { FoundationTokenType } from '../../tokens/theme.token';
+import { BreakpointType } from '../../breakpoints/breakPoints';
+import { DiffLineType } from './types';
+/**
+ * CodeBlock Tokens following the pattern: [target].CSSProp.[variant].[state]
+ *
+ * Structure:
+ * - target: container | header | gutter | code | syntax (defines what element the token applies to)
+ * - CSSProp: backgroundColor | border | borderRadius | padding | color | fontSize | fontFamily | lineHeight
+ * - variant: default | removed | added (for diff-specific styles)
+ * - state: default | hover | active (for interactive elements)
+ * Need to check for this — Rust, Haskel, resript, python
+ * Size-independent properties: all properties are size-independent for CodeBlock
+ */
+export type CodeBlockTokenType = {
+    backgroundColor: CSSObject['backgroundColor'];
+    border: CSSObject['border'];
+    borderRadius: CSSObject['borderRadius'];
+    boxShadow: CSSObject['boxShadow'];
+    header: {
+        backgroundColor: CSSObject['backgroundColor'];
+        borderBottom: CSSObject['borderBottom'];
+        padding: {
+            x: CSSObject['padding'];
+            y: CSSObject['padding'];
+        };
+        gap: CSSObject['gap'];
+        icon: {
+            width: CSSObject['width'];
+        };
+        text: {
+            fontSize: CSSObject['fontSize'];
+            fontWeight: CSSObject['fontWeight'];
+            lineHeight: CSSObject['lineHeight'];
+            color: CSSObject['color'];
+        };
+    };
+    body: {
+        padding: {
+            x: CSSObject['padding'];
+            y: CSSObject['padding'];
+        };
+        backgroundColor: CSSObject['backgroundColor'];
+        gutter: {
+            width: CSSObject['width'];
+            color: CSSObject['color'];
+            backgroundColor: {
+                [key in DiffLineType]: CSSObject['backgroundColor'];
+            };
+            borderLeft: {
+                [key in DiffLineType]: CSSObject['borderLeft'];
+            };
+            borderColor: {
+                [key in DiffLineType]: CSSObject['color'];
+            };
+        };
+        code: {
+            fontFamily: CSSObject['fontFamily'];
+            fontSize: CSSObject['fontSize'];
+            lineHeight: CSSObject['lineHeight'];
+            padding: {
+                x: {
+                    left: CSSObject['paddingLeft'];
+                    right: CSSObject['paddingRight'];
+                };
+                y: CSSObject['padding'];
+            };
+        };
+        highlightedLine: {
+            backgroundColor: {
+                [key in DiffLineType]: CSSObject['backgroundColor'];
+            };
+        };
+        syntax: {
+            keyword: CSSObject['color'];
+            function: CSSObject['color'];
+            string: CSSObject['color'];
+            number: CSSObject['color'];
+            operator: CSSObject['color'];
+            variable: CSSObject['color'];
+            comment: CSSObject['color'];
+            text: CSSObject['color'];
+        };
+    };
+};
+export type ResponsiveCodeBlockTokens = {
+    [key in keyof BreakpointType]: CodeBlockTokenType;
+};
+export declare const getCodeBlockTokens: (foundationToken: FoundationTokenType) => ResponsiveCodeBlockTokens;

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

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

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

@@ -0,0 +1,25 @@
+import { ReactNode } from 'react';
+export declare enum CodeBlockVariant {
+    DEFAULT = "default",
+    NO_GUTTER = "no-gutter",
+    DIFF = "diff"
+}
+export declare enum DiffLineType {
+    ADDED = "added",
+    REMOVED = "removed",
+    UNCHANGED = "unchanged"
+}
+export interface DiffLine {
+    content: string;
+    type: DiffLineType;
+}
+export type CodeBlockProps = {
+    code: string;
+    variant?: CodeBlockVariant;
+    showLineNumbers?: boolean;
+    showHeader?: boolean;
+    header?: string;
+    headerLeftSlot?: ReactNode;
+    headerRightSlot?: ReactNode;
+    diffLines?: DiffLine[];
+};

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

@@ -0,0 +1,38 @@
+import { CodeBlockTokenType } from './codeBlock.token';
+import { DiffLineType, DiffLine } from './types';
+/**
+ * Token interface for syntax highlighting
+ */
+export interface SyntaxToken {
+    type: string;
+    value: string;
+}
+/**
+ * Tokenizes a line of code for syntax highlighting
+ * Supports multiple languages: JavaScript/TypeScript, Python, Rust, Haskell
+ */
+export declare const tokenizeLine: (line: string) => SyntaxToken[];
+/**
+ * Gets the color for a token type based on syntax highlighting rules
+ */
+export declare const getTokenColor: (type: string, syntaxTokens: CodeBlockTokenType["body"]["syntax"]) => string;
+/**
+ * Gets the gutter (line number) styling for diff mode
+ */
+export declare const getDiffGutterStyle: (lineType: DiffLineType | undefined, isDiffMode: boolean, gutterTokens: CodeBlockTokenType["body"]["gutter"]) => React.CSSProperties;
+/**
+ * Gets the highlighted line background styling for diff mode
+ */
+export declare const getDiffLineBackground: (lineType: DiffLineType | undefined, isDiffMode: boolean, highlightedLineTokens: CodeBlockTokenType["body"]["highlightedLine"]) => React.CSSProperties;
+/**
+ * Determines if line numbers should be shown based on variant and explicit prop
+ */
+export declare const shouldShowLineNumbers: (showLineNumbers: boolean | undefined, variant: string) => boolean;
+/**
+ * Creates a copy to clipboard function with state management
+ */
+export declare const createCopyToClipboard: (code: string, setIsCopied: (copied: boolean) => void) => () => void;
+/**
+ * Processes lines for diff or normal mode
+ */
+export declare const processLines: (isDiffMode: boolean, diffLines: DiffLine[] | undefined, code: string) => string[] | undefined;

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

@@ -2,6 +2,7 @@ import { ColumnDefinition, SearchConfig, AdvancedFilterProps } from '../types';
 export type DataTableHeaderProps<T extends Record<string, unknown>> = {
     title?: string;
     description?: string;
+    showHeader?: boolean;
     showToolbar?: boolean;
     enableSearch?: boolean;
     searchPlaceholder?: string;

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

@@ -7,6 +7,7 @@ export type TableCellProps<T extends Record<string, unknown>> = {
     currentValue: unknown;
     width: React.CSSProperties;
     frozenStyles?: React.CSSProperties;
+    isFirstRow?: boolean;
     onFieldChange: (value: unknown) => void;
     getDisplayValue?: (value: unknown, column: ColumnDefinition<T>) => unknown;
 };

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

@@ -254,6 +254,7 @@ export type DataTableProps<T extends Record<string, unknown>> = {
     onPageChange?: (page: number) => void;
     onPageSizeChange?: (pageSize: number) => void;
     isLoading?: boolean;
+    showHeader?: boolean;
     showToolbar?: boolean;
     showSettings?: boolean;
     headerSlot1?: ReactNode;

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

@@ -1,4 +1,5 @@
 import { DateRangePreset, DateRangePickerSize, CustomPresetConfig } from './types';
+import { CalendarTokenType } from './dateRangePicker.tokens';
 type QuickRangeSelectorProps = {
     isOpen: boolean;
     onToggle: () => void;
@@ -13,6 +14,7 @@ type QuickRangeSelectorProps = {
     size?: DateRangePickerSize;
     maxMenuHeight?: number;
     isStandalone?: boolean;
+    calendarToken?: CalendarTokenType;
 };
 declare const QuickRangeSelector: import('react').ForwardRefExoticComponent<QuickRangeSelectorProps & import('react').RefAttributes<HTMLDivElement>>;
 export default QuickRangeSelector;

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

@@ -1,10 +1,12 @@
 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/components/mobile.tokens.d.ts

@@ -0,0 +1,77 @@
+import { CSSObject } from 'styled-components';
+import { FoundationTokenType } from '../../../tokens/theme.token';
+import { BreakpointType } from '../../../breakpoints/breakPoints';
+/**
+ * Mobile DateRangePicker Tokens for mobile-specific components
+ *
+ * Separate tokens for mobile components that have different styling requirements
+ * These tokens are used by ScrollablePicker, ActionButtons, and DatePickerComponent
+ *
+ * Note: PresetItem now uses SelectItem tokens, tabs use existing Tabs component tokens
+ */
+export type MobileTokenType = {
+    picker: {
+        itemHeight: CSSObject['height'];
+        containerHeight: CSSObject['height'];
+        divider: {
+            width: CSSObject['width'];
+            strokeColor: CSSObject['color'];
+            strokeColorEnd: CSSObject['color'];
+        };
+        text: {
+            selected: {
+                fontSize: CSSObject['fontSize'];
+                fontWeight: CSSObject['fontWeight'];
+                color: CSSObject['color'];
+                opacity: CSSObject['opacity'];
+            };
+            unselected: {
+                fontSize: CSSObject['fontSize'];
+                fontWeight: CSSObject['fontWeight'];
+                color: CSSObject['color'];
+                opacity: CSSObject['opacity'];
+            };
+        };
+        title: {
+            padding: {
+                x: CSSObject['padding'];
+                y: CSSObject['padding'];
+            };
+            backgroundColor: CSSObject['backgroundColor'];
+            text: {
+                fontSize: CSSObject['fontSize'];
+                fontWeight: CSSObject['fontWeight'];
+                color: CSSObject['color'];
+            };
+        };
+    };
+    footer: {
+        gap: CSSObject['gap'];
+        padding: {
+            x: CSSObject['padding'];
+            y: CSSObject['padding'];
+        };
+        borderTop: CSSObject['borderTop'];
+    };
+    padding: {
+        x: CSSObject['padding'];
+        y: CSSObject['padding'];
+    };
+    gap: CSSObject['gap'];
+    header: {
+        backgroundColor: CSSObject['backgroundColor'];
+        padding: {
+            x: CSSObject['padding'];
+            y: CSSObject['padding'];
+        };
+        text: {
+            fontSize: CSSObject['fontSize'];
+            fontWeight: CSSObject['fontWeight'];
+            color: CSSObject['color'];
+        };
+    };
+};
+export type ResponsiveMobileTokens = {
+    [key in keyof BreakpointType]: MobileTokenType;
+};
+export declare const getMobileToken: (foundationToken: FoundationTokenType) => ResponsiveMobileTokens;