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

package/dist/components/BreadcrumbV2/BreadcrumbV2.d.ts

@@ -0,0 +1,3 @@
+import { BreadcrumbV2Component } from './breadcrumbV2.types';
+declare const BreadcrumbV2: BreadcrumbV2Component;
+export default BreadcrumbV2;

package/dist/components/BreadcrumbV2/BreadcrumbV2Icon.d.ts

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

package/dist/components/BreadcrumbV2/BreadcrumbV2Item.d.ts

@@ -0,0 +1,6 @@
+import { BreadcrumbCompoundItemProps } from './breadcrumbV2.types';
+declare const BreadcrumbV2CompoundItem: {
+    ({ href, onClick, isActive, children, }: BreadcrumbCompoundItemProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default BreadcrumbV2CompoundItem;

package/dist/components/BreadcrumbV2/BreadcrumbV2List.d.ts

@@ -0,0 +1,15 @@
+import { BreadcrumbV2TokensType } from './breadcrumbV2.tokens';
+import { IndexedBreadcrumbChild } from './utils';
+export type BreadcrumbV2ListProps = {
+    breadcrumbTokens: BreadcrumbV2TokensType;
+    shouldShowMenu: boolean;
+    base: IndexedBreadcrumbChild | undefined;
+    rest: IndexedBreadcrumbChild[];
+    menuItems: IndexedBreadcrumbChild[];
+    totalItems: number;
+};
+declare const BreadcrumbV2List: {
+    ({ breadcrumbTokens, shouldShowMenu, base, rest, menuItems, totalItems, }: BreadcrumbV2ListProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default BreadcrumbV2List;

package/dist/components/BreadcrumbV2/BreadcrumbV2OverflowMenu.d.ts

@@ -0,0 +1,11 @@
+import { BreadcrumbV2TokensType } from './breadcrumbV2.tokens';
+import { IndexedBreadcrumbChild } from './utils';
+export type BreadcrumbV2OverflowMenuProps = {
+    menuItems: IndexedBreadcrumbChild[];
+    breadcrumbTokens: BreadcrumbV2TokensType;
+};
+declare const BreadcrumbV2OverflowMenu: {
+    ({ menuItems, breadcrumbTokens, }: BreadcrumbV2OverflowMenuProps): import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};
+export default BreadcrumbV2OverflowMenu;

package/dist/components/BreadcrumbV2/BreadcrumbV2Page.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+export type BreadcrumbV2PageProps = {
+    children: React.ReactNode;
+};
+declare const BreadcrumbV2Page: {
+    ({ children }: BreadcrumbV2PageProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default BreadcrumbV2Page;

package/dist/components/BreadcrumbV2/BreadcrumbV2Separator.d.ts

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

package/dist/components/BreadcrumbV2/breadcrumbV2.dark.tokens.d.ts

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

package/dist/components/BreadcrumbV2/breadcrumbV2.light.tokens.d.ts

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

package/dist/components/BreadcrumbV2/breadcrumbV2.tokens.d.ts

@@ -0,0 +1,31 @@
+import { CSSObject } from 'styled-components';
+import { BreakpointType } from '../../breakpoints/breakPoints';
+import { FoundationTokenType } from '../../tokens/theme.token';
+import { Theme } from '../../context/theme.enum';
+export type BreadcrumbV2State = 'default' | 'hover' | 'active';
+export type BreadcrumbV2TokensType = {
+    gap: CSSObject['gap'];
+    item: {
+        padding: CSSObject['padding'];
+        gap: CSSObject['gap'];
+        text: {
+            fontSize: CSSObject['fontSize'];
+            fontWeight: CSSObject['fontWeight'];
+            color: {
+                [key in BreadcrumbV2State]: CSSObject['color'];
+            };
+        };
+    };
+    ellipsis: {
+        color: CSSObject['color'];
+        borderRadius: CSSObject['borderRadius'];
+        size: number;
+    };
+    separator: {
+        color: CSSObject['color'];
+    };
+};
+export type ResponsiveBreadcrumbV2Tokens = {
+    [key in keyof BreakpointType]: BreadcrumbV2TokensType;
+};
+export declare const getBreadcrumbV2Tokens: (foundationToken: FoundationTokenType, theme?: Theme | string) => ResponsiveBreadcrumbV2Tokens;

package/dist/components/BreadcrumbV2/breadcrumbV2.types.d.ts

@@ -0,0 +1,46 @@
+import { default as BreadcrumbV2CompoundItem } from './BreadcrumbV2Item';
+import { default as BreadcrumbV2Icon } from './BreadcrumbV2Icon';
+import { default as BreadcrumbV2Page } from './BreadcrumbV2Page';
+import { default as BreadcrumbV2Separator } from './BreadcrumbV2Separator';
+import * as React from 'react';
+export type BreadcrumbV2ItemType = {
+    /** Stable unique id for React list keys when `href` may repeat or collide (e.g. dynamic routes). */
+    id?: string | number;
+    leftSlot?: React.ReactNode;
+    rightSlot?: React.ReactNode;
+    label: string;
+    href: string;
+    /** With `href`, prevents default navigation and runs this handler (SPA / client routing). */
+    onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void;
+};
+export type BreadcrumbCompoundIconProps = {
+    children: React.ReactNode;
+};
+export type BreadcrumbCompoundSeparatorProps = {
+    children?: React.ReactNode;
+};
+export type BreadcrumbCompoundItemProps = {
+    href?: string;
+    onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void;
+    isActive?: boolean;
+    children: React.ReactNode;
+};
+export type BreadcrumbV2Props = {
+    children?: React.ReactNode;
+    items?: BreadcrumbV2ItemType[];
+    /**
+     * When the number of `Item`s (or `items` entries) is **greater than** this value,
+     * the bar collapses to first crumb + ellipsis + trailing segment(s). At least one
+     * trailing segment stays visible when overflow is active (so the current page is not
+     * menu-only). Use a finite integer ≥ 1; values below 1 or non-finite values disable
+     * overflow (all crumbs inline).
+     */
+    maxItems?: number;
+};
+export type BreadcrumbV2Component = ((props: BreadcrumbV2Props) => React.ReactElement | null) & {
+    displayName?: string;
+    Item: typeof BreadcrumbV2CompoundItem;
+    Icon: typeof BreadcrumbV2Icon;
+    Separator: typeof BreadcrumbV2Separator;
+    Page: typeof BreadcrumbV2Page;
+};

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

@@ -0,0 +1,3 @@
+export { default as BreadcrumbV2 } from './BreadcrumbV2';
+export * from './breadcrumbV2.tokens';
+export * from './breadcrumbV2.types';

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

@@ -0,0 +1,27 @@
+import { BreadcrumbCompoundItemProps } from './breadcrumbV2.types';
+import * as React from 'react';
+/** Collects visible text from React nodes for accessible labels (e.g. Page text inside Item). */
+export declare function getPlainTextFromReactNode(node: React.ReactNode): string;
+export type IndexedBreadcrumbChild = {
+    el: React.ReactElement<BreadcrumbCompoundItemProps>;
+    idx: number;
+};
+export declare function filterBreadcrumbItemChildren(children: React.ReactNode, ItemComponent: React.ComponentType<BreadcrumbCompoundItemProps>): React.ReactElement<BreadcrumbCompoundItemProps>[];
+export declare function indexBreadcrumbChildren(items: React.ReactElement<BreadcrumbCompoundItemProps>[]): IndexedBreadcrumbChild[];
+export declare function computeBreadcrumbOverflowLayout(indexed: IndexedBreadcrumbChild[], maxItems: number): {
+    shouldShowMenu: boolean;
+    base: IndexedBreadcrumbChild | undefined;
+    rest: IndexedBreadcrumbChild[];
+    menuItems: IndexedBreadcrumbChild[];
+};
+export declare function resolveBreadcrumbItemActive(idx: number, el: React.ReactElement<BreadcrumbCompoundItemProps>, totalItems: number): boolean;
+/**
+ * Native event for {@link createStubAnchorClickEvent}. Uses real MouseEvent in DOM;
+ * minimal object elsewhere so SSR does not throw.
+ */
+export declare function createStubNativeClickEvent(): MouseEvent;
+/**
+ * Approximates a React click on an anchor for overflow menu items (no real DOM event).
+ * {@link BreadcrumbV2Item} calls preventDefault before onClick — callers here should do the same for parity.
+ */
+export declare function createStubAnchorClickEvent(href: string): React.MouseEvent<HTMLAnchorElement>;

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

@@ -0,0 +1,6 @@
+import { CodeBlockDiffViewProps } from './types';
+declare const CodeBlockDiffView: {
+    ({ diffLines, diffViewSegments, codeContentId, tokens, rowCtx, diffExpandChunk, }: CodeBlockDiffViewProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default CodeBlockDiffView;

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

@@ -0,0 +1,16 @@
+import { CodeBlockTokenType } from '../codeBlock.token';
+import { DiffLine, DiffViewSegment } from '../types';
+import { DiffRowRenderContext } from '../CodeBlockLineParts';
+export type DiffGapExpansionState = {
+    revealedFromTop: number;
+    revealedFromBottom: number;
+};
+export interface CodeBlockDiffViewProps {
+    diffLines: DiffLine[];
+    diffViewSegments: DiffViewSegment[];
+    codeContentId: string;
+    tokens: CodeBlockTokenType;
+    rowCtx: DiffRowRenderContext;
+    /** Lines to reveal per click when expanding from the top or bottom of a gap */
+    diffExpandChunk: number;
+}

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

@@ -0,0 +1,4 @@
+import { DiffGapExpansionState } from './types';
+export declare const getGapLineTotal: (start: number, end: number) => number;
+export declare const getGapHiddenLineCount: (start: number, end: number, state: DiffGapExpansionState | undefined) => number;
+export declare const isGapFullyExpanded: (start: number, end: number, state: DiffGapExpansionState | undefined) => boolean;

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

@@ -0,0 +1,56 @@
+import { CSSProperties, ReactNode } from 'react';
+import { CodeBlockTokenType } from './codeBlock.token';
+import { DiffLineType, DiffLine } from './types';
+import { SyntaxToken } from './utils';
+export type LineCounter = {
+    left: number;
+    right: number;
+};
+export declare const EmptyGutterCell: React.FC<{
+    width: string | number | undefined;
+}>;
+type LineNumberGutterProps = {
+    lineIndex: number;
+    width: string | number | undefined;
+    color: string | undefined;
+    style?: React.CSSProperties;
+};
+export declare const LineNumberGutter: React.FC<LineNumberGutterProps>;
+export type TokenizedCodeLineProps = {
+    tokens: SyntaxToken[];
+    getTokenColor: (type: string) => string;
+    paddingTop?: string | number;
+    paddingBottom?: string | number;
+    paddingLeft?: string | number;
+    paddingRight?: string | number;
+    whiteSpace?: 'pre-wrap' | 'pre';
+};
+export declare const TokenizedCodeLine: React.FC<TokenizedCodeLineProps>;
+export type CodeLineWrapperProps = {
+    children: ReactNode;
+    style?: React.CSSProperties;
+    lineIndex?: number;
+};
+export declare const CodeLineWrapper: React.FC<CodeLineWrapperProps>;
+export type PreElementProps = {
+    children: ReactNode;
+    fontFamily: string | undefined;
+    fontSize: string | number | undefined;
+    lineHeight: string | number | undefined;
+    id?: string;
+};
+export declare const PreElement: React.FC<PreElementProps>;
+export type DiffRowRenderContext = {
+    shouldShowLineNumbers: boolean;
+    tokens: CodeBlockTokenType;
+    tokenizeLine: (line: string) => SyntaxToken[];
+    getTokenColor: (type: string) => string;
+    getDiffGutterStyle: (lineType?: DiffLineType) => CSSProperties;
+    getDiffLineBackground: (lineType?: DiffLineType) => CSSProperties;
+};
+/**
+ * One full-width row: left pane + right pane in a single flex row so both
+ * sides always share the same row height.
+ */
+export declare const renderDiffUnifiedRowPair: (leftLine: DiffLine | undefined, rightLine: DiffLine | undefined, rowKey: string, counters: LineCounter, ctx: DiffRowRenderContext, tokens: CodeBlockTokenType) => ReactNode;
+export {};

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

@@ -82,6 +82,24 @@ export type CodeBlockTokenType = {
             comment: CSSObject['color'];
             text: CSSObject['color'];
         };
+        expandContext: {
+            backgroundColor: CSSObject['backgroundColor'];
+            borderTop: CSSObject['borderTop'];
+            borderBottom: CSSObject['borderBottom'];
+            padding: CSSObject['padding'];
+            color: CSSObject['color'];
+            fontSize: CSSObject['fontSize'];
+            letterSpacing: CSSObject['letterSpacing'];
+            button: {
+                padding: CSSObject['padding'];
+                dotsPadding: CSSObject['padding'];
+                opacity: CSSObject['opacity'];
+                disabledOpacity: CSSObject['opacity'];
+                hoverBackgroundColor: CSSObject['backgroundColor'];
+                borderRadius: CSSObject['borderRadius'];
+                iconSize: number;
+            };
+        };
     };
 };
 export type ResponsiveCodeBlockTokens = {

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

@@ -14,6 +14,15 @@ export interface DiffLine {
     type: DiffLineType;
 }
 export type SupportedLanguage = 'javascript' | 'typescript' | 'jsx' | 'tsx' | 'json' | 'css' | 'html' | 'markdown' | 'yaml' | 'python' | 'rust' | 'haskell';
+export type DiffViewSegment = {
+    type: 'lines';
+    start: number;
+    end: number;
+} | {
+    type: 'collapsed';
+    start: number;
+    end: number;
+};
 export type CodeBlockProps = {
     code: string;
     variant?: CodeBlockVariant;
@@ -26,4 +35,20 @@ export type CodeBlockProps = {
     showCopyButton?: boolean;
     autoFormat?: boolean;
     language?: SupportedLanguage;
+    /**
+     * When true (default), unchanged lines outside the context window around
+     * edits are hidden behind an expand control (GitHub-style). Only applies
+     * when variant is DIFF and diffLines is set.
+     */
+    isDiffUnchangedCollapsed?: boolean;
+    /**
+     * How many unchanged lines to show above and below each change when
+     * isDiffUnchangedCollapsed is true. Defaults to 3.
+     */
+    diffContextLines?: number;
+    /**
+     * Lines revealed per click when expanding a collapsed gap from the start
+     * or end (GitHub-style). Defaults to 20.
+     */
+    diffExpandChunk?: number;
 };

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

@@ -1,5 +1,5 @@
 import { CodeBlockTokenType } from './codeBlock.token';
-import { DiffLineType, DiffLine, SupportedLanguage } from './types';
+import { DiffLineType, DiffLine, DiffViewSegment, SupportedLanguage } from './types';
 /**
  * Token interface for syntax highlighting
  */
@@ -41,3 +41,18 @@ export declare const createCopyToClipboard: (code: string, setIsCopied: (copied:
  * Processes lines for diff or normal mode
  */
 export declare const processLines: (isDiffMode: boolean, diffLines: DiffLine[] | undefined, code: string) => string[] | undefined;
+/**
+ * Stable key for a collapsed line range in diff view (inclusive indices).
+ */
+export declare const getDiffCollapsedRangeKey: (start: number, end: number) => string;
+/**
+ * Merges per-change visibility intervals (change line ± context) into
+ * non-overlapping ranges of line indices that stay visible when collapsed.
+ */
+export declare const mergeDiffVisibleIntervals: (diffLines: DiffLine[], contextLines: number) => [number, number][];
+/**
+ * Builds ordered segments: visible line ranges and collapsed gaps. Expanded
+ * gaps are still emitted as `collapsed`; the UI decides whether to show the
+ * expand affordance or the full line range.
+ */
+export declare const buildDiffViewSegments: (diffLines: DiffLine[], contextLines: number, isCollapsedMode: boolean) => DiffViewSegment[];

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

@@ -0,0 +1,28 @@
+import { CodeEditorV2Variant } from './codeEditorV2.types';
+declare const CodeEditorV2: import('react').ForwardRefExoticComponent<{
+    value: string;
+    onChange?: (value: string) => void;
+    variant?: CodeEditorV2Variant;
+    showLineNumbers?: boolean;
+    header?: {
+        showHeader?: boolean;
+        title?: string;
+        leftSlot?: import('react').ReactNode;
+        rightSlot?: import('react').ReactNode;
+        showCopyButton?: boolean;
+    };
+    language?: import('./codeEditorV2.types').SupportedLanguage;
+    placeholder?: string;
+    readOnly?: boolean;
+    disabled?: boolean;
+    onBlur?: () => void;
+    onFocus?: () => void;
+    autoFocus?: boolean;
+    diff?: boolean;
+    originalValue?: string;
+    renderSideBySide?: boolean;
+    isDiffUnchangedCollapsed?: boolean;
+    diffContextLines?: number;
+    diffExpandChunk?: number;
+} & import('./codeEditorV2.types').CodeEditorV2Dimensions & Omit<import('react').HTMLAttributes<HTMLDivElement>, "style" | "className" | "children" | "onChange"> & import('react').RefAttributes<HTMLDivElement>>;
+export default CodeEditorV2;

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

@@ -0,0 +1,2 @@
+import { CodeEditorV2HeaderProps } from './codeEditorV2.types';
+export declare const CodeEditorV2Header: ({ title, leftSlot, rightSlot, showCopyButton, isCopied, onCopy, tokens, }: CodeEditorV2HeaderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/CodeEditorV2/MonacoEditor/MonacoEditorWrapper.d.ts

@@ -0,0 +1,2 @@
+import { MonacoEditorWrapperProps } from '../codeEditorV2.types';
+export declare function MonacoEditorWrapper({ value, language, onChange, readOnly, disabled, placeholder, showLineNumbers, minHeight, maxHeight, height, tokens, onFocus, onBlur, autoFocus, diff, originalValue, renderSideBySide, isDiffUnchangedCollapsed, diffContextLines, diffExpandChunk, }: MonacoEditorWrapperProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/CodeEditorV2/MonacoEditor/monacoTheme.d.ts

@@ -0,0 +1,3 @@
+import { CodeEditorV2Tokens } from '../codeEditorV2.tokens';
+import type * as Monaco from 'monaco-editor';
+export declare function createEditorTheme(tokens: CodeEditorV2Tokens): Monaco.editor.IStandaloneThemeData;

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

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

package/dist/components/CodeEditorV2/codeEditorV2.light.token.d.ts

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

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

@@ -0,0 +1,94 @@
+import { CSSObject } from 'styled-components';
+import { DiffLineType, MonacoTheme } from './codeEditorV2.types';
+import { BreakpointType } from '../../breakpoints/breakPoints';
+import { FoundationTokenType } from '../../tokens/theme.token';
+import { Theme } from '../../context/theme.enum';
+export type CodeEditorV2Tokens = {
+    backgroundColor: CSSObject['backgroundColor'];
+    border: CSSObject['border'];
+    borderRadius: CSSObject['borderRadius'];
+    boxShadow: CSSObject['boxShadow'];
+    theme: MonacoTheme;
+    header: {
+        backgroundColor: CSSObject['backgroundColor'];
+        borderBottom: CSSObject['borderBottom'];
+        paddingTop: CSSObject['paddingTop'];
+        paddingBottom: CSSObject['paddingBottom'];
+        paddingLeft: CSSObject['paddingLeft'];
+        paddingRight: CSSObject['paddingRight'];
+        gap: CSSObject['gap'];
+        icon: {
+            width: CSSObject['width'];
+        };
+        text: {
+            fontSize: CSSObject['fontSize'];
+            fontWeight: CSSObject['fontWeight'];
+            lineHeight: CSSObject['lineHeight'];
+            color: CSSObject['color'];
+        };
+    };
+    body: {
+        paddingTop: CSSObject['paddingTop'];
+        paddingBottom: CSSObject['paddingBottom'];
+        paddingLeft: CSSObject['paddingLeft'];
+        paddingRight: CSSObject['paddingRight'];
+        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'];
+            paddingTop: CSSObject['paddingTop'];
+            paddingBottom: CSSObject['paddingBottom'];
+            paddingLeft: CSSObject['paddingLeft'];
+            paddingRight: CSSObject['paddingRight'];
+        };
+        highlightedLine: {
+            backgroundColor: {
+                [key in DiffLineType]: CSSObject['backgroundColor'];
+            };
+        };
+        syntax: {
+            keyword: {
+                color: CSSObject['color'];
+            };
+            function: {
+                color: CSSObject['color'];
+            };
+            string: {
+                color: CSSObject['color'];
+            };
+            number: {
+                color: CSSObject['color'];
+            };
+            operator: {
+                color: CSSObject['color'];
+            };
+            variable: {
+                color: CSSObject['color'];
+            };
+            comment: {
+                color: CSSObject['color'];
+            };
+            text: {
+                color: CSSObject['color'];
+            };
+        };
+    };
+};
+export type ResponsiveCodeEditorV2Tokens = {
+    [key in keyof BreakpointType]: CodeEditorV2Tokens;
+};
+export declare const getCodeEditorV2Tokens: (foundationToken: FoundationTokenType, theme?: Theme | string) => ResponsiveCodeEditorV2Tokens;

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

@@ -0,0 +1,112 @@
+import { ReactNode } from 'react';
+import { CodeEditorV2Tokens } from './codeEditorV2.tokens';
+import { CSSObject } from 'styled-components';
+export declare enum CodeEditorV2Variant {
+    DEFAULT = "default",
+    NO_GUTTER = "no-gutter",
+    DIFF = "diff"
+}
+export declare enum MonacoTheme {
+    LIGHT = "light",
+    DARK = "dark"
+}
+export declare enum DiffLineType {
+    ADDED = "added",
+    REMOVED = "removed",
+    UNCHANGED = "unchanged"
+}
+export type DiffLine = {
+    content: string;
+    type: DiffLineType;
+};
+export type SupportedLanguage = 'javascript' | 'typescript' | 'jsx' | 'tsx' | 'json' | 'css' | 'html' | 'markdown' | 'yaml' | 'python' | 'rust' | 'haskell';
+export type CodeEditorV2Dimensions = {
+    width?: CSSObject['width'];
+    maxWidth?: CSSObject['maxWidth'];
+    minWidth?: CSSObject['minWidth'];
+    height?: CSSObject['height'];
+    maxHeight?: CSSObject['maxHeight'];
+    minHeight?: CSSObject['minHeight'];
+};
+export type CodeEditorV2Props = {
+    value: string;
+    onChange?: (value: string) => void;
+    /** Use `DIFF` to enable Monaco’s diff editor (same as `diff={true}`; either is enough). */
+    variant?: CodeEditorV2Variant;
+    showLineNumbers?: boolean;
+    header?: {
+        showHeader?: boolean;
+        title?: string;
+        leftSlot?: ReactNode;
+        rightSlot?: ReactNode;
+        showCopyButton?: boolean;
+    };
+    language?: SupportedLanguage;
+    placeholder?: string;
+    readOnly?: boolean;
+    disabled?: boolean;
+    onBlur?: () => void;
+    onFocus?: () => void;
+    autoFocus?: boolean;
+    /**
+     * When true, renders Monaco’s diff view. Same as `variant={CodeEditorV2Variant.DIFF}`—use
+     * either (or both); diff mode is on if either is set.
+     */
+    diff?: boolean;
+    /** The original (left-side) source for diff mode. */
+    originalValue?: string;
+    /** Render diffs inline (single column) instead of side-by-side. */
+    renderSideBySide?: boolean;
+    /**
+     * When true (default), Monaco hides unchanged regions in diff mode with a
+     * GitHub-like expand control.
+     */
+    isDiffUnchangedCollapsed?: boolean;
+    /** Context lines shown around edits when unchanged regions are hidden. Defaults to 3. */
+    diffContextLines?: number;
+    /** Lines revealed per expand action when unchanged regions are hidden. Defaults to 20. */
+    diffExpandChunk?: number;
+} & CodeEditorV2Dimensions & Omit<React.HTMLAttributes<HTMLDivElement>, 'style' | 'className' | 'onChange' | 'children'>;
+export type CodeEditorV2HeaderProps = {
+    title?: string;
+    leftSlot?: ReactNode;
+    rightSlot?: ReactNode;
+    showCopyButton: boolean;
+    isCopied: boolean;
+    onCopy: () => void;
+    tokens: CodeEditorV2Tokens;
+};
+export type MonacoEditorWrapperDimensions = {
+    minHeight: CSSObject['minHeight'];
+    maxHeight?: CSSObject['maxHeight'];
+    height?: CSSObject['height'];
+    width?: CSSObject['width'];
+    maxWidth?: CSSObject['maxWidth'];
+    minWidth?: CSSObject['minWidth'];
+};
+export type MonacoEditorWrapperProps = {
+    value: string;
+    language: string;
+    onChange?: (value: string) => void;
+    readOnly: boolean;
+    disabled: boolean;
+    placeholder?: string;
+    showLineNumbers: boolean;
+    tokens: CodeEditorV2Tokens;
+    onFocus?: () => void;
+    onBlur?: () => void;
+    /** When true, focuses the editor on mount. Defaults to false. */
+    autoFocus?: boolean;
+    /** When true, renders a side-by-side diff view instead of a single editor. */
+    diff?: boolean;
+    /** The original (left-side) source for diff mode. */
+    originalValue?: string;
+    /** Render diffs inline (single column) instead of side-by-side. */
+    renderSideBySide?: boolean;
+    /** Hide unchanged regions in diff mode (GitHub-style). */
+    isDiffUnchangedCollapsed?: boolean;
+    /** Context lines shown around edits when unchanged regions are hidden. */
+    diffContextLines?: number;
+    /** Lines revealed per expand action when unchanged regions are hidden. */
+    diffExpandChunk?: number;
+} & MonacoEditorWrapperDimensions;

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

@@ -0,0 +1,3 @@
+export { default as CodeEditorV2 } from './CodeEditorV2';
+export * from './codeEditorV2.types';
+export * from './codeEditorV2.tokens';