@juspay/blend-design-system 0.0.37-beta.7 → 0.0.37

package/dist/{node-C_DmV86X.js → breadcrumbV2.tokens-CovJEwot.js}

@@ -7082,6 +7082,14 @@ const f = (r) => {
           color: r.colors.gray[600]
         },
         iconColor: r.colors.gray[400]
+      },
+      footer: {
+        paddingTop: r.unit[16],
+        paddingRight: r.unit[16],
+        paddingBottom: r.unit[16],
+        paddingLeft: r.unit[16],
+        backgroundColor: r.colors.gray[0],
+        borderTop: `${r.border.width[1]} solid ${r.colors.gray[200]}`
       }
     },
     mobilePanel: {
@@ -7428,6 +7436,14 @@ const f = (r) => {
           color: r.colors.gray[200]
         },
         iconColor: r.colors.gray[500]
+      },
+      footer: {
+        paddingTop: r.unit[16],
+        paddingRight: r.unit[16],
+        paddingBottom: r.unit[16],
+        paddingLeft: r.unit[16],
+        backgroundColor: r.colors.gray[800],
+        borderTop: `${r.border.width[1]} solid ${r.colors.gray[700]}`
       }
     },
     mobilePanel: {

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

@@ -1,4 +1,6 @@
+/** @deprecated Will be deprecated soon. Use AccordionV2 instead. */
 export { default as Accordion } from './Accordion';
+/** @deprecated Will be deprecated soon. Use AccordionV2 instead. */
 export { default as AccordionItem } from './AccordionItem';
 export * from './accordion.tokens';
 export * from './types';

package/dist/components/AccordionV2/accordionV2.animations.d.ts

@@ -1,3 +1,3 @@
 export declare const accordionDown: import('styled-components/dist/models/Keyframes').default;
 export declare const accordionUp: import('styled-components/dist/models/Keyframes').default;
-export declare const ACCORDION_TRANSITION = "all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94)";
+export declare const ACCORDION_TRANSITION = "height 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94)";

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

@@ -1,3 +1,4 @@
+/** @deprecated Will be deprecated soon. Use AlertV2 instead. */
 export { default as Alert } from './Alert';
 export * from './alert.tokens';
 export * from './types';

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

@@ -1,3 +1,4 @@
+/** @deprecated Will be deprecated soon. Use AvatarV2 instead. */
 export { default as Avatar } from './Avatar';
 export * from './avatar.tokens';
 export * from './types';

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

@@ -1,3 +1,4 @@
+/** @deprecated Will be deprecated soon. Use BreadcrumbV2 instead. */
 export { default as Breadcrumb } from './Breadcrumb';
 export * from './breadcrumb.tokens';
 export * from './types';

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

@@ -1,3 +1,4 @@
+/** @deprecated Will be deprecated soon. Use ButtonV2 instead. */
 export { default as Button } from './Button';
 export * from './button.tokens';
 export * from './types';

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

@@ -1,2 +1,3 @@
+/** @deprecated Will be deprecated soon. Use ButtonGroupV2 instead. */
 export { default as ButtonGroup } from './ButtonGroup';
 export * from './types';

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

@@ -1,3 +1,4 @@
+/** @deprecated Will be deprecated soon. Use CardV2 instead. */
 export { default as Card } from './Card';
 export * from './card.tokens';
 export * from './types';

package/dist/components/CardV2/CardV2.d.ts

@@ -0,0 +1,45 @@
+import { CardV2Actions, CardV2Body, CardV2Content, CardV2Footer, CardV2Header, CardV2Media, CardV2Meta } from './CardV2Components';
+import { default as CardV2Skeleton } from './CardV2Skeleton';
+import { CardV2ActionPlacement, CardV2Orientation, CardV2Padding, CardV2Variant } from './cardV2.types';
+declare const CardV2Root: import('react').ForwardRefExoticComponent<{
+    variant?: CardV2Variant;
+    orientation?: CardV2Orientation;
+    padding?: CardV2Padding;
+    title?: import('react').ReactNode;
+    truncateTitle?: boolean;
+    subtitle?: import('react').ReactNode;
+    description?: import('react').ReactNode;
+    eyebrow?: import('react').ReactNode;
+    media?: import('react').ReactNode;
+    mediaWidth?: import('styled-components').CSSObject["width"];
+    mediaHeight?: import('styled-components').CSSObject["height"];
+    mediaMinHeight?: import('styled-components').CSSObject["minHeight"];
+    leadingSlot?: import('react').ReactNode;
+    trailingSlot?: import('react').ReactNode;
+    footer?: import('react').ReactNode;
+    actions?: import('./cardV2.types').CardV2Action | import('./cardV2.types').CardV2Action[];
+    actionPlacement?: CardV2ActionPlacement;
+    centered?: boolean;
+    interactive?: boolean;
+    selected?: boolean;
+    skeleton?: import('./cardV2.types').CardV2SkeletonProps;
+    width?: import('styled-components').CSSObject["width"];
+    minWidth?: import('styled-components').CSSObject["minWidth"];
+    maxWidth?: import('styled-components').CSSObject["maxWidth"];
+    height?: import('styled-components').CSSObject["height"];
+    minHeight?: import('styled-components').CSSObject["minHeight"];
+    maxHeight?: import('styled-components').CSSObject["maxHeight"];
+    scrollable?: boolean;
+    children?: import('react').ReactNode;
+} & Omit<import('react').HTMLAttributes<HTMLDivElement>, "title" | "children"> & import('react').RefAttributes<HTMLDivElement>>;
+declare const CardV2: typeof CardV2Root & {
+    Header: typeof CardV2Header;
+    Meta: typeof CardV2Meta;
+    Media: typeof CardV2Media;
+    Body: typeof CardV2Body;
+    Content: typeof CardV2Content;
+    Actions: typeof CardV2Actions;
+    Footer: typeof CardV2Footer;
+    Skeleton: typeof CardV2Skeleton;
+};
+export default CardV2;

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

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+import { CardV2TokensType } from './cardV2.tokens';
+import { CardV2Padding, CardV2Action } from './cardV2.types';
+export declare const isTextPrimitive: (value: unknown) => value is string | number;
+export declare const toCardV2ActionArray: (actions?: CardV2Action | CardV2Action[]) => import('../ButtonV2').ButtonV2Props[];
+export declare const getCardV2Padding: (tokens: CardV2TokensType, padding: CardV2Padding) => string;
+export declare const renderCardV2Text: ({ value, id, as, styles, dataElement, truncate, }: {
+    value?: ReactNode;
+    id: string;
+    as: "p" | "h2";
+    styles: React.CSSProperties;
+    dataElement: string;
+    truncate?: boolean;
+}) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/CardV2/CardV2Components.d.ts

@@ -0,0 +1,8 @@
+import { CardV2ActionsProps, CardV2BodyProps, CardV2FooterProps, CardV2HeaderProps, CardV2MediaProps, CardV2MetaProps, CardV2SectionProps } from './cardV2.types';
+export declare const CardV2Meta: ({ title, truncateTitle, subtitle, eyebrow, centered, }: CardV2MetaProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const CardV2Header: ({ title, truncateTitle, subtitle, eyebrow, leadingSlot, trailingSlot, centered, }: CardV2HeaderProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const CardV2Media: ({ children, orientation, width, height, minHeight, }: CardV2MediaProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const CardV2Actions: ({ actions, centered }: CardV2ActionsProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const CardV2Content: ({ children }: CardV2SectionProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const CardV2Body: ({ description, actions, centered, scrollable, children, }: CardV2BodyProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const CardV2Footer: ({ children, actions, centered, divider, }: CardV2FooterProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/CardV2/CardV2Context.d.ts

@@ -0,0 +1,14 @@
+import { CardV2TokensType } from './cardV2.tokens';
+export type CardV2ContextValue = {
+    tokens: CardV2TokensType;
+    centered: boolean;
+    scrollable: boolean;
+    ids: {
+        eyebrow: string;
+        title: string;
+        subtitle: string;
+        description: string;
+    };
+};
+export declare const CardV2Context: import('react').Context<CardV2ContextValue | null>;
+export declare const useCardV2Context: () => CardV2ContextValue | null;

package/dist/components/CardV2/CardV2Skeleton.d.ts

@@ -0,0 +1,6 @@
+import { CardV2SkeletonProps } from './cardV2.types';
+export type CardV2SkeletonComponentProps = {
+    skeleton?: CardV2SkeletonProps;
+};
+declare const CardV2Skeleton: ({ skeleton }: CardV2SkeletonComponentProps) => import("react/jsx-runtime").JSX.Element;
+export default CardV2Skeleton;

package/dist/components/CardV2/accessibility/CardV2AccessibilityReport.d.ts

@@ -0,0 +1,2 @@
+import { AccessibilityReport } from '../../StatCard/accessibility/StatCardAccessibilityReport';
+export declare const cardV2AccessibilityReport: AccessibilityReport;

package/dist/components/CardV2/accessibility/index.d.ts

@@ -0,0 +1 @@
+export { cardV2AccessibilityReport } from './CardV2AccessibilityReport';

package/dist/components/CardV2/cardV2.dark.tokens.d.ts

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

package/dist/components/CardV2/cardV2.light.tokens.d.ts

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

package/dist/components/CardV2/cardV2.tokens.d.ts

@@ -0,0 +1,5 @@
+import { FoundationTokenType } from '../../tokens/theme.token';
+import { Theme } from '../../context/theme.enum';
+import { ResponsiveCardV2Tokens } from './cardV2.tokens.types';
+export type { CardV2TokensType, ResponsiveCardV2Tokens, } from './cardV2.tokens.types';
+export declare const getCardV2Tokens: (foundationToken: FoundationTokenType, theme?: Theme | string) => ResponsiveCardV2Tokens;

package/dist/components/CardV2/cardV2.tokens.types.d.ts

@@ -0,0 +1,92 @@
+import { CSSObject } from 'styled-components';
+import { BreakpointType } from '../../breakpoints/breakPoints';
+import { CardV2Orientation, CardV2Padding, CardV2Variant } from './cardV2.types';
+export type CardV2TokensType = {
+    width: CSSObject['width'];
+    minWidth: CSSObject['minWidth'];
+    maxWidth: CSSObject['maxWidth'];
+    borderRadius: CSSObject['borderRadius'];
+    border: {
+        [key in CardV2Variant]: CSSObject['border'];
+    };
+    backgroundColor: {
+        [key in CardV2Variant]: CSSObject['backgroundColor'];
+    };
+    boxShadow: {
+        [key in CardV2Variant]: CSSObject['boxShadow'];
+    };
+    state: {
+        hover: {
+            border: CSSObject['border'];
+            boxShadow: CSSObject['boxShadow'];
+        };
+        selected: {
+            border: CSSObject['border'];
+            boxShadow: CSSObject['boxShadow'];
+        };
+        focus: {
+            outline: CSSObject['outline'];
+            outlineOffset: CSSObject['outlineOffset'];
+        };
+    };
+    padding: {
+        [key in CardV2Padding]: {
+            x: CSSObject['padding'];
+            y: CSSObject['padding'];
+        };
+    };
+    layout: {
+        gap: CSSObject['gap'];
+        mediaGap: {
+            [key in CardV2Orientation]: CSSObject['gap'];
+        };
+    };
+    media: {
+        width: CSSObject['width'];
+        height: CSSObject['height'];
+        minHeight: CSSObject['minHeight'];
+        borderRadius: CSSObject['borderRadius'];
+        backgroundColor: CSSObject['backgroundColor'];
+    };
+    header: {
+        gap: CSSObject['gap'];
+        eyebrow: {
+            fontSize: CSSObject['fontSize'];
+            fontWeight: CSSObject['fontWeight'];
+            lineHeight: CSSObject['lineHeight'];
+            color: CSSObject['color'];
+        };
+        title: {
+            fontSize: CSSObject['fontSize'];
+            fontWeight: CSSObject['fontWeight'];
+            lineHeight: CSSObject['lineHeight'];
+            color: CSSObject['color'];
+        };
+        subtitle: {
+            fontSize: CSSObject['fontSize'];
+            fontWeight: CSSObject['fontWeight'];
+            lineHeight: CSSObject['lineHeight'];
+            color: CSSObject['color'];
+        };
+    };
+    body: {
+        gap: CSSObject['gap'];
+        description: {
+            fontSize: CSSObject['fontSize'];
+            fontWeight: CSSObject['fontWeight'];
+            lineHeight: CSSObject['lineHeight'];
+            color: CSSObject['color'];
+        };
+    };
+    footer: {
+        gap: CSSObject['gap'];
+        paddingTop: CSSObject['paddingTop'];
+        borderTop: CSSObject['borderTop'];
+    };
+    actions: {
+        gap: CSSObject['gap'];
+    };
+};
+export type ResponsiveCardV2Tokens = {
+    [key in keyof BreakpointType]: CardV2TokensType;
+};

package/dist/components/CardV2/cardV2.types.d.ts

@@ -0,0 +1,106 @@
+import { FC, ForwardRefExoticComponent, ReactNode, RefAttributes } from 'react';
+import { CSSObject } from 'styled-components';
+import { ButtonV2Props } from '../ButtonV2/buttonV2.types';
+import { SkeletonVariant } from '../Skeleton/types';
+export declare enum CardV2Variant {
+    OUTLINED = "outlined",
+    ELEVATED = "elevated",
+    GHOST = "ghost"
+}
+export declare enum CardV2Orientation {
+    VERTICAL = "vertical",
+    HORIZONTAL = "horizontal"
+}
+export declare enum CardV2Padding {
+    NONE = "none",
+    COMPACT = "compact",
+    COMFORTABLE = "comfortable"
+}
+export declare enum CardV2ActionPlacement {
+    BODY = "body",
+    FOOTER = "footer"
+}
+export type CardV2SkeletonProps = {
+    show?: boolean;
+    variant?: SkeletonVariant;
+    height?: CSSObject['height'];
+    width?: CSSObject['width'];
+};
+export type CardV2Action = ButtonV2Props;
+export type CardV2SectionProps = {
+    children?: ReactNode;
+};
+export type CardV2HeaderProps = {
+    title?: ReactNode;
+    truncateTitle?: boolean;
+    subtitle?: ReactNode;
+    eyebrow?: ReactNode;
+    leadingSlot?: ReactNode;
+    trailingSlot?: ReactNode;
+    centered?: boolean;
+};
+export type CardV2MetaProps = Pick<CardV2HeaderProps, 'title' | 'truncateTitle' | 'subtitle' | 'eyebrow' | 'centered'>;
+export type CardV2MediaProps = CardV2SectionProps & {
+    orientation?: CardV2Orientation;
+    width?: CSSObject['width'];
+    height?: CSSObject['height'];
+    minHeight?: CSSObject['minHeight'];
+};
+export type CardV2BodyProps = CardV2SectionProps & {
+    description?: ReactNode;
+    actions?: CardV2Action | CardV2Action[];
+    centered?: boolean;
+    scrollable?: boolean;
+};
+export type CardV2ActionsProps = {
+    actions?: CardV2Action | CardV2Action[];
+    centered?: boolean;
+};
+export type CardV2FooterProps = CardV2SectionProps & {
+    actions?: CardV2Action | CardV2Action[];
+    centered?: boolean;
+    divider?: boolean;
+};
+export type CardV2Props = {
+    variant?: CardV2Variant;
+    orientation?: CardV2Orientation;
+    padding?: CardV2Padding;
+    title?: ReactNode;
+    truncateTitle?: boolean;
+    subtitle?: ReactNode;
+    description?: ReactNode;
+    eyebrow?: ReactNode;
+    media?: ReactNode;
+    mediaWidth?: CSSObject['width'];
+    mediaHeight?: CSSObject['height'];
+    mediaMinHeight?: CSSObject['minHeight'];
+    leadingSlot?: ReactNode;
+    trailingSlot?: ReactNode;
+    footer?: ReactNode;
+    actions?: CardV2Action | CardV2Action[];
+    actionPlacement?: CardV2ActionPlacement;
+    centered?: boolean;
+    interactive?: boolean;
+    selected?: boolean;
+    skeleton?: CardV2SkeletonProps;
+    width?: CSSObject['width'];
+    minWidth?: CSSObject['minWidth'];
+    maxWidth?: CSSObject['maxWidth'];
+    height?: CSSObject['height'];
+    minHeight?: CSSObject['minHeight'];
+    maxHeight?: CSSObject['maxHeight'];
+    scrollable?: boolean;
+    children?: ReactNode;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, 'title' | 'children'>;
+export type CardV2Component = ForwardRefExoticComponent<CardV2Props & RefAttributes<HTMLDivElement>> & {
+    Header: FC<CardV2HeaderProps>;
+    Meta: FC<CardV2MetaProps>;
+    Media: FC<CardV2MediaProps>;
+    Body: FC<CardV2BodyProps>;
+    Content: FC<CardV2SectionProps>;
+    Actions: FC<CardV2ActionsProps>;
+    Footer: FC<CardV2FooterProps>;
+    Skeleton: FC<{
+        skeleton?: CardV2SkeletonProps;
+    }>;
+};

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

@@ -0,0 +1,5 @@
+export { default as CardV2 } from './CardV2';
+export { CardV2Actions, CardV2Body, CardV2Content, CardV2Footer, CardV2Header, CardV2Media, CardV2Meta, } from './CardV2Components';
+export { default as CardV2Skeleton } from './CardV2Skeleton';
+export * from './cardV2.types';
+export * from './cardV2.tokens';

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

@@ -1,12 +1,22 @@
+/** @deprecated Will be deprecated soon. Use ChartV2 instead. */
 export { default as Charts } from './Charts';
+/** @deprecated Will be deprecated soon. Use ChartV2 instead. */
 export { default as CoreChart } from './CoreChart';
+/** @deprecated Will be deprecated soon. Use ChartV2 instead. */
 export { default as ChartContainer } from './ChartContainer';
+/** @deprecated Will be deprecated soon. Use ChartV2 instead. */
 export { default as ChartHeader } from './ChartHeader';
+/** @deprecated Will be deprecated soon. Use ChartV2 instead. */
 export { default as ChartLegends } from './ChartLegend';
+/** @deprecated Will be deprecated soon. Use ChartV2 instead. */
 export { default as SankeyNode } from './SankeyNode';
+/** @deprecated Will be deprecated soon. Use ChartV2 instead. */
 export { default as SankeyLink } from './SankeyLink';
+/** @deprecated Will be deprecated soon. Use ChartV2 instead. */
 export { default as BlendChart } from './BlendChart';
+/** @deprecated Will be deprecated soon. Use ChartV2 instead. */
 export { default as BlendChartContainer } from './BlendChartContainer';
+/** @deprecated Will be deprecated soon. Use ChartV2 instead. */
 export { default as BlendChartHeader } from './BlendChartHeader';
 export * from './chart.tokens';
 export * from './types';

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

@@ -180,6 +180,7 @@ export type ChartsProps = {
     chartHeaderSlot: ReactNode;
     stackedLegends?: boolean;
     stackedLegendsData?: StackedLegendsDataPoint[];
+    showAllLegends?: boolean;
     barsize?: number;
     xAxis?: XAxisConfig;
     yAxis?: YAxisConfig;
@@ -238,6 +239,7 @@ export type ChartLegendsProps = {
         title: string;
         total?: string;
     }[];
+    showAllLegends?: boolean;
 };
 export type CustomTooltipProps = TooltipProps<ValueType, NameType> & {
     hoveredKey: string | null;

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

@@ -1,3 +1,4 @@
+/** @deprecated Will be deprecated soon. Use ChatInputV2 instead. */
 export { default as ChatInput } from './ChatInput';
 export * from './chatInput.tokens';
 export * from './types';

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

@@ -1,2 +1,3 @@
+/** @deprecated Will be deprecated soon. Use CheckboxV2 instead. */
 export { Checkbox } from './Checkbox';
 export * from './types';

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

@@ -1,2 +1,3 @@
+/** @deprecated Will be deprecated soon. Use CodeEditorV2 instead. */
 export { default as CodeEditor } from './CodeEditor';
 export * from './types';

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

@@ -1,9 +1,29 @@
 import { ReactNode } from 'react';
-import { SupportedLanguage } from '../CodeBlock/types';
 export declare enum CodeEditorVariant {
     DEFAULT = "default",
     NO_GUTTER = "no-gutter"
 }
+/**
+ * Common Monaco language IDs, provided purely for IDE autocomplete on the
+ * `language` prop — NOT a runtime constraint. Every entry is verified against
+ * the language IDs monaco-editor actually registers (Monaco does not export a
+ * static union of its built-in IDs; they are only enumerable at runtime via
+ * `monaco.languages.getLanguages()`). Note Monaco's plain-text ID is
+ * `plaintext` and shell scripts are `shell` (there is no `bash` ID). Monaco
+ * also has no distinct `jsx`/`tsx` IDs — those still work through the open
+ * string arm of {@link CodeEditorLanguage}: the editor maps them onto the
+ * `javascript`/`typescript` tokenizers.
+ */
+export type KnownCodeEditorLanguage = 'javascript' | 'typescript' | 'json' | 'css' | 'scss' | 'less' | 'html' | 'xml' | 'markdown' | 'yaml' | 'ini' | 'graphql' | 'sql' | 'python' | 'rust' | 'go' | 'java' | 'kotlin' | 'swift' | 'c' | 'cpp' | 'csharp' | 'php' | 'ruby' | 'shell' | 'powershell' | 'dockerfile' | 'plaintext';
+/**
+ * Language accepted by {@link CodeEditorProps.language}: autocomplete for
+ * {@link KnownCodeEditorLanguage}, while `(string & {})` keeps the prop open
+ * to every other Monaco language ID (the component forwards to Monaco, whose
+ * own `language` option is a plain `string`). Decoupled from `CodeBlock`'s
+ * `SupportedLanguage`, which is scoped to CodeBlock's hand-rolled tokenizer
+ * rather than Monaco.
+ */
+export type CodeEditorLanguage = KnownCodeEditorLanguage | (string & {});
 export type CodeEditorProps = {
     value: string;
     onChange?: (value: string) => void;
@@ -28,7 +48,7 @@ export type CodeEditorProps = {
      */
     showLeftIcon?: boolean;
     showCopyButton?: boolean;
-    language?: SupportedLanguage;
+    language?: CodeEditorLanguage;
     placeholder?: string;
     readOnly?: boolean;
     disabled?: boolean;

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

@@ -11,7 +11,7 @@ declare const CodeEditorV2: import('react').ForwardRefExoticComponent<{
         rightSlot?: import('react').ReactNode;
         showCopyButton?: boolean;
     };
-    language?: import('./codeEditorV2.types').CodeEditorV2SupportedLanguage;
+    language?: import('./codeEditorV2.types').CodeEditorV2Language;
     placeholder?: string;
     readOnly?: boolean;
     disabled?: boolean;

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

@@ -15,7 +15,28 @@ export type CodeEditorV2DiffLine = {
     content: string;
     type: CodeEditorV2DiffLineType;
 };
-export type CodeEditorV2SupportedLanguage = 'javascript' | 'typescript' | 'jsx' | 'tsx' | 'json' | 'css' | 'html' | 'markdown' | 'yaml' | 'python' | 'rust' | 'haskell';
+/**
+ * Common Monaco language IDs, provided purely for IDE autocomplete on the
+ * `language` prop — NOT a runtime constraint. Every entry is verified against
+ * the language IDs monaco-editor actually registers (Monaco does not export a
+ * static union of its built-in IDs; they are only enumerable at runtime via
+ * `monaco.languages.getLanguages()`). Note Monaco's plain-text ID is
+ * `plaintext` and shell scripts are `shell` (there is no `bash` ID). Monaco
+ * also has no distinct `jsx`/`tsx` IDs — those still work through the open
+ * string arm of {@link CodeEditorV2Language}: the editor maps them onto the
+ * `javascript`/`typescript` tokenizers.
+ */
+export type KnownCodeEditorV2Language = 'javascript' | 'typescript' | 'json' | 'css' | 'scss' | 'less' | 'html' | 'xml' | 'markdown' | 'yaml' | 'ini' | 'graphql' | 'sql' | 'python' | 'rust' | 'go' | 'java' | 'kotlin' | 'swift' | 'c' | 'cpp' | 'csharp' | 'php' | 'ruby' | 'shell' | 'powershell' | 'dockerfile' | 'plaintext';
+/**
+ * Language accepted by {@link CodeEditorV2Props.language}: autocomplete for
+ * {@link KnownCodeEditorV2Language}, while `(string & {})` keeps the prop open
+ * to every other Monaco language ID (matching the internal
+ * `MonacoEditorWrapper`'s `language: string` — Monaco itself types the option
+ * as a plain `string`).
+ */
+export type CodeEditorV2Language = KnownCodeEditorV2Language | (string & {});
+/** @deprecated Use {@link CodeEditorV2Language} instead. */
+export type CodeEditorV2SupportedLanguage = CodeEditorV2Language;
 export type CodeEditorV2Dimensions = {
     width?: CSSObject['width'];
     maxWidth?: CSSObject['maxWidth'];
@@ -37,7 +58,7 @@ export type CodeEditorV2Props = {
         rightSlot?: ReactNode;
         showCopyButton?: boolean;
     };
-    language?: CodeEditorV2SupportedLanguage;
+    language?: CodeEditorV2Language;
     placeholder?: string;
     readOnly?: boolean;
     disabled?: boolean;