@mantine/code-highlight 7.17.1 → 8.0.0-alpha.1

package/lib/CodeHighlightProvider/adapters/shiki-themes.d.ts

@@ -0,0 +1,430 @@
+export declare const light: {
+    colors: {
+        'activityBar.activeBorder': string;
+        'activityBar.background': string;
+        'activityBar.border': string;
+        'activityBar.foreground': string;
+        'activityBar.inactiveForeground': string;
+        'activityBarBadge.background': string;
+        'activityBarBadge.foreground': string;
+        'badge.background': string;
+        'badge.foreground': string;
+        'breadcrumb.activeSelectionForeground': string;
+        'breadcrumb.focusForeground': string;
+        'breadcrumb.foreground': string;
+        'breadcrumbPicker.background': string;
+        'button.background': string;
+        'button.foreground': string;
+        'button.hoverBackground': string;
+        'button.secondaryBackground': string;
+        'button.secondaryForeground': string;
+        'button.secondaryHoverBackground': string;
+        'checkbox.background': string;
+        'checkbox.border': string;
+        'debugConsole.errorForeground': string;
+        'debugConsole.infoForeground': string;
+        'debugConsole.sourceForeground': string;
+        'debugConsole.warningForeground': string;
+        'debugConsoleInputIcon.foreground': string;
+        'debugIcon.breakpointForeground': string;
+        'debugTokenExpression.boolean': string;
+        'debugTokenExpression.error': string;
+        'debugTokenExpression.name': string;
+        'debugTokenExpression.number': string;
+        'debugTokenExpression.string': string;
+        'debugTokenExpression.value': string;
+        'debugToolBar.background': string;
+        descriptionForeground: string;
+        'diffEditor.insertedLineBackground': string;
+        'diffEditor.insertedTextBackground': string;
+        'diffEditor.removedLineBackground': string;
+        'diffEditor.removedTextBackground': string;
+        'dropdown.background': string;
+        'dropdown.border': string;
+        'dropdown.foreground': string;
+        'dropdown.listBackground': string;
+        'editor.background': string;
+        'editor.findMatchBackground': string;
+        'editor.findMatchHighlightBackground': string;
+        'editor.focusedStackFrameHighlightBackground': string;
+        'editor.foldBackground': string;
+        'editor.foreground': string;
+        'editor.lineHighlightBackground': string;
+        'editor.linkedEditingBackground': string;
+        'editor.selectionHighlightBackground': string;
+        'editor.stackFrameHighlightBackground': string;
+        'editor.wordHighlightBackground': string;
+        'editor.wordHighlightBorder': string;
+        'editor.wordHighlightStrongBackground': string;
+        'editor.wordHighlightStrongBorder': string;
+        'editorBracketHighlight.foreground1': string;
+        'editorBracketHighlight.foreground2': string;
+        'editorBracketHighlight.foreground3': string;
+        'editorBracketHighlight.foreground4': string;
+        'editorBracketHighlight.foreground5': string;
+        'editorBracketHighlight.foreground6': string;
+        'editorBracketHighlight.unexpectedBracket.foreground': string;
+        'editorBracketMatch.background': string;
+        'editorBracketMatch.border': string;
+        'editorCursor.foreground': string;
+        'editorGroup.border': string;
+        'editorGroupHeader.tabsBackground': string;
+        'editorGroupHeader.tabsBorder': string;
+        'editorGutter.addedBackground': string;
+        'editorGutter.deletedBackground': string;
+        'editorGutter.modifiedBackground': string;
+        'editorIndentGuide.activeBackground': string;
+        'editorIndentGuide.background': string;
+        'editorInlayHint.background': string;
+        'editorInlayHint.foreground': string;
+        'editorInlayHint.paramBackground': string;
+        'editorInlayHint.paramForeground': string;
+        'editorInlayHint.typeBackground': string;
+        'editorInlayHint.typeForeground': string;
+        'editorLineNumber.activeForeground': string;
+        'editorLineNumber.foreground': string;
+        'editorOverviewRuler.border': string;
+        'editorWhitespace.foreground': string;
+        'editorWidget.background': string;
+        errorForeground: string;
+        focusBorder: string;
+        foreground: string;
+        'gitDecoration.addedResourceForeground': string;
+        'gitDecoration.conflictingResourceForeground': string;
+        'gitDecoration.deletedResourceForeground': string;
+        'gitDecoration.ignoredResourceForeground': string;
+        'gitDecoration.modifiedResourceForeground': string;
+        'gitDecoration.submoduleResourceForeground': string;
+        'gitDecoration.untrackedResourceForeground': string;
+        'icon.foreground': string;
+        'input.background': string;
+        'input.border': string;
+        'input.foreground': string;
+        'input.placeholderForeground': string;
+        'keybindingLabel.foreground': string;
+        'list.activeSelectionBackground': string;
+        'list.activeSelectionForeground': string;
+        'list.focusBackground': string;
+        'list.focusForeground': string;
+        'list.highlightForeground': string;
+        'list.hoverBackground': string;
+        'list.hoverForeground': string;
+        'list.inactiveFocusBackground': string;
+        'list.inactiveSelectionBackground': string;
+        'list.inactiveSelectionForeground': string;
+        'minimapSlider.activeBackground': string;
+        'minimapSlider.background': string;
+        'minimapSlider.hoverBackground': string;
+        'notificationCenterHeader.background': string;
+        'notificationCenterHeader.foreground': string;
+        'notifications.background': string;
+        'notifications.border': string;
+        'notifications.foreground': string;
+        'notificationsErrorIcon.foreground': string;
+        'notificationsInfoIcon.foreground': string;
+        'notificationsWarningIcon.foreground': string;
+        'panel.background': string;
+        'panel.border': string;
+        'panelInput.border': string;
+        'panelTitle.activeBorder': string;
+        'panelTitle.activeForeground': string;
+        'panelTitle.inactiveForeground': string;
+        'pickerGroup.border': string;
+        'pickerGroup.foreground': string;
+        'progressBar.background': string;
+        'quickInput.background': string;
+        'quickInput.foreground': string;
+        'scrollbar.shadow': string;
+        'scrollbarSlider.activeBackground': string;
+        'scrollbarSlider.background': string;
+        'scrollbarSlider.hoverBackground': string;
+        'settings.headerForeground': string;
+        'settings.modifiedItemIndicator': string;
+        'sideBar.background': string;
+        'sideBar.border': string;
+        'sideBar.foreground': string;
+        'sideBarSectionHeader.background': string;
+        'sideBarSectionHeader.border': string;
+        'sideBarSectionHeader.foreground': string;
+        'sideBarTitle.foreground': string;
+        'statusBar.background': string;
+        'statusBar.border': string;
+        'statusBar.debuggingBackground': string;
+        'statusBar.debuggingForeground': string;
+        'statusBar.focusBorder': string;
+        'statusBar.foreground': string;
+        'statusBar.noFolderBackground': string;
+        'statusBarItem.activeBackground': string;
+        'statusBarItem.focusBorder': string;
+        'statusBarItem.hoverBackground': string;
+        'statusBarItem.prominentBackground': string;
+        'statusBarItem.remoteBackground': string;
+        'statusBarItem.remoteForeground': string;
+        'symbolIcon.arrayForeground': string;
+        'symbolIcon.booleanForeground': string;
+        'symbolIcon.classForeground': string;
+        'symbolIcon.colorForeground': string;
+        'symbolIcon.constantForeground': string;
+        'symbolIcon.constructorForeground': string;
+        'symbolIcon.enumeratorForeground': string;
+        'symbolIcon.enumeratorMemberForeground': string;
+        'symbolIcon.eventForeground': string;
+        'symbolIcon.fieldForeground': string;
+        'symbolIcon.fileForeground': string;
+        'symbolIcon.folderForeground': string;
+        'symbolIcon.functionForeground': string;
+        'symbolIcon.interfaceForeground': string;
+        'symbolIcon.keyForeground': string;
+        'symbolIcon.keywordForeground': string;
+        'symbolIcon.methodForeground': string;
+        'symbolIcon.moduleForeground': string;
+        'symbolIcon.namespaceForeground': string;
+        'symbolIcon.nullForeground': string;
+        'symbolIcon.numberForeground': string;
+        'symbolIcon.objectForeground': string;
+        'symbolIcon.operatorForeground': string;
+        'symbolIcon.packageForeground': string;
+        'symbolIcon.propertyForeground': string;
+        'symbolIcon.referenceForeground': string;
+        'symbolIcon.snippetForeground': string;
+        'symbolIcon.stringForeground': string;
+        'symbolIcon.structForeground': string;
+        'symbolIcon.textForeground': string;
+        'symbolIcon.typeParameterForeground': string;
+        'symbolIcon.unitForeground': string;
+        'symbolIcon.variableForeground': string;
+        'tab.activeBackground': string;
+        'tab.activeBorder': string;
+        'tab.activeBorderTop': string;
+        'tab.activeForeground': string;
+        'tab.border': string;
+        'tab.hoverBackground': string;
+        'tab.inactiveBackground': string;
+        'tab.inactiveForeground': string;
+        'tab.unfocusedActiveBorder': string;
+        'tab.unfocusedActiveBorderTop': string;
+        'tab.unfocusedHoverBackground': string;
+        'terminal.ansiBlack': string;
+        'terminal.ansiBlue': string;
+        'terminal.ansiBrightBlack': string;
+        'terminal.ansiBrightBlue': string;
+        'terminal.ansiBrightCyan': string;
+        'terminal.ansiBrightGreen': string;
+        'terminal.ansiBrightMagenta': string;
+        'terminal.ansiBrightRed': string;
+        'terminal.ansiBrightWhite': string;
+        'terminal.ansiBrightYellow': string;
+        'terminal.ansiCyan': string;
+        'terminal.ansiGreen': string;
+        'terminal.ansiMagenta': string;
+        'terminal.ansiRed': string;
+        'terminal.ansiWhite': string;
+        'terminal.ansiYellow': string;
+        'terminal.foreground': string;
+        'textBlockQuote.background': string;
+        'textBlockQuote.border': string;
+        'textCodeBlock.background': string;
+        'textLink.activeForeground': string;
+        'textLink.foreground': string;
+        'textPreformat.foreground': string;
+        'textSeparator.foreground': string;
+        'titleBar.activeBackground': string;
+        'titleBar.activeForeground': string;
+        'titleBar.border': string;
+        'titleBar.inactiveBackground': string;
+        'titleBar.inactiveForeground': string;
+        'tree.indentGuidesStroke': string;
+        'welcomePage.buttonBackground': string;
+        'welcomePage.buttonHoverBackground': string;
+    };
+    displayName: string;
+    semanticHighlighting: boolean;
+    tokenColors: ({
+        scope: string[];
+        settings: {
+            foreground: string;
+            fontStyle?: undefined;
+            background?: undefined;
+            content?: undefined;
+        };
+    } | {
+        scope: string;
+        settings: {
+            foreground: string;
+            fontStyle?: undefined;
+            background?: undefined;
+            content?: undefined;
+        };
+    } | {
+        scope: string;
+        settings: {
+            fontStyle: string;
+            foreground: string;
+            background?: undefined;
+            content?: undefined;
+        };
+    } | {
+        scope: string;
+        settings: {
+            background: string;
+            content: string;
+            fontStyle: string;
+            foreground: string;
+        };
+    } | {
+        scope: string[];
+        settings: {
+            fontStyle: string;
+            foreground: string;
+            background?: undefined;
+            content?: undefined;
+        };
+    } | {
+        scope: string[];
+        settings: {
+            fontStyle: string;
+            foreground?: undefined;
+            background?: undefined;
+            content?: undefined;
+        };
+    } | {
+        scope: string[];
+        settings: {
+            background: string;
+            foreground: string;
+            fontStyle?: undefined;
+            content?: undefined;
+        };
+    })[];
+    type: string;
+};
+export declare const dark: {
+    type: string;
+    colors: {
+        'dropdown.background': string;
+        'list.activeSelectionBackground': string;
+        'quickInputList.focusBackground': string;
+        'list.inactiveSelectionBackground': string;
+        'list.hoverBackground': string;
+        'list.highlightForeground': string;
+        'button.background': string;
+        'editor.background': string;
+        'editor.foreground': string;
+        'editor.selectionBackground': string;
+        'minimap.selectionHighlight': string;
+        'editor.selectionHighlightBackground': string;
+        'editor.lineHighlightBackground': string;
+        'editorLineNumber.activeForeground': string;
+        'editor.wordHighlightBackground': string;
+        'editor.wordHighlightStrongBackground': string;
+        'editorCursor.foreground': string;
+        'editorWhitespace.foreground': string;
+        'editorIndentGuide.background': string;
+        'editorIndentGuide.activeBackground': string;
+        'editorGroupHeader.tabsBackground': string;
+        'tab.inactiveBackground': string;
+        'tab.border': string;
+        'tab.inactiveForeground': string;
+        'tab.lastPinnedBorder': string;
+        'peekView.border': string;
+        'panelTitle.activeForeground': string;
+        'statusBar.background': string;
+        'statusBar.debuggingBackground': string;
+        'statusBar.noFolderBackground': string;
+        'titleBar.activeBackground': string;
+        'statusBarItem.remoteBackground': string;
+        'ports.iconRunningProcessForeground': string;
+        'activityBar.background': string;
+        'activityBar.foreground': string;
+        'activityBarBadge.background': string;
+        'sideBar.background': string;
+        'sideBarSectionHeader.background': string;
+        'menu.background': string;
+        'menu.foreground': string;
+        'pickerGroup.foreground': string;
+        'inputOption.activeBorder': string;
+        focusBorder: string;
+        'terminal.ansiBlack': string;
+        'terminal.ansiRed': string;
+        'terminal.ansiGreen': string;
+        'terminal.ansiYellow': string;
+        'terminal.ansiBlue': string;
+        'terminal.ansiMagenta': string;
+        'terminal.ansiCyan': string;
+        'terminal.ansiWhite': string;
+        'terminal.ansiBrightBlack': string;
+        'terminal.ansiBrightRed': string;
+        'terminal.ansiBrightGreen': string;
+        'terminal.ansiBrightYellow': string;
+        'terminal.ansiBrightBlue': string;
+        'terminal.ansiBrightMagenta': string;
+        'terminal.ansiBrightCyan': string;
+        'terminal.ansiBrightWhite': string;
+        'terminal.inactiveSelectionBackground': string;
+    };
+    tokenColors: ({
+        settings: {
+            foreground: string;
+            fontStyle?: undefined;
+        };
+        scope?: undefined;
+        name?: undefined;
+    } | {
+        scope: string[];
+        settings: {
+            foreground: string;
+            fontStyle?: undefined;
+        };
+        name?: undefined;
+    } | {
+        name: string;
+        scope: string;
+        settings: {
+            fontStyle: string;
+            foreground: string;
+        };
+    } | {
+        name: string;
+        scope: string[];
+        settings: {
+            fontStyle: string;
+            foreground: string;
+        };
+    } | {
+        name: string;
+        scope: string;
+        settings: {
+            foreground: string;
+            fontStyle?: undefined;
+        };
+    } | {
+        name: string;
+        scope: string[];
+        settings: {
+            foreground: string;
+            fontStyle?: undefined;
+        };
+    } | {
+        name: string;
+        scope: string;
+        settings: {
+            fontStyle: string;
+            foreground?: undefined;
+        };
+    } | {
+        scope: string;
+        settings: {
+            fontStyle: string;
+            foreground?: undefined;
+        };
+        name?: undefined;
+    } | {
+        scope: string;
+        settings: {
+            foreground: string;
+            fontStyle?: undefined;
+        };
+        name?: undefined;
+    })[];
+    semanticHighlighting: boolean;
+};

package/lib/CodeHighlightTabs/CodeHighlightTabs.d.ts

@@ -0,0 +1,34 @@
+import { BoxProps, ElementProps, Factory, StylesApiProps } from '@mantine/core';
+import { CodeHighlightSettings, CodeHighlightStylesNames } from '../CodeHighlight/CodeHighlight';
+/** Available shiki languages for default Mantine shiki instance.
+ *  Should be used only with *.mantine.dev projects */
+export type CodeHighlightDefaultLanguage = 'tsx' | 'scss' | 'html' | 'bash' | 'json';
+export interface CodeHighlightTabsCode {
+    language?: CodeHighlightDefaultLanguage | (string & {});
+    code: string;
+    fileName?: string;
+    icon?: React.ReactNode;
+}
+export type CodeHighlightTabsStylesNames = 'root' | 'files' | 'file' | 'fileIcon' | 'filesScrollarea' | CodeHighlightStylesNames;
+export interface CodeHighlightTabsProps extends CodeHighlightSettings, BoxProps, StylesApiProps<CodeHighlightTabsFactory>, ElementProps<'div'> {
+    /** Code to highlight with meta data (file name and icon) */
+    code: CodeHighlightTabsCode[];
+    /** Function that returns icon based on file name */
+    getFileIcon?: (fileName: string) => React.ReactNode;
+    /** Default active tab index */
+    defaultActiveTab?: number;
+    /** Index of controlled active tab state */
+    activeTab?: number;
+    /** Called when tab changes */
+    onTabChange?: (tab: number) => void;
+}
+export type CodeHighlightTabsFactory = Factory<{
+    props: CodeHighlightTabsProps;
+    ref: HTMLDivElement;
+    stylesNames: CodeHighlightTabsStylesNames;
+}>;
+export declare const CodeHighlightTabs: import("@mantine/core").MantineComponent<{
+    props: CodeHighlightTabsProps;
+    ref: HTMLDivElement;
+    stylesNames: CodeHighlightTabsStylesNames;
+}>;

package/lib/CodeHighlightTabs/FileIcon.d.ts

@@ -0,0 +1,9 @@
+interface FileIconProps {
+    fileName: string | undefined;
+    getFileIcon?: ((fileName: string) => React.ReactNode) | undefined;
+    fileIcon: React.ReactNode | undefined;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare function FileIcon({ fileIcon, fileName, getFileIcon, className, style }: FileIconProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/lib/index.d.mts

@@ -1,6 +1,12 @@
-export { CodeHighlightTabs } from './CodeHighlightTabs';
-export { CodeHighlight } from './CodeHighlight';
-export { InlineCodeHighlight } from './InlineCodeHighlight';
-export type { CodeHighlightTabsFactory, CodeHighlightTabsStylesNames, CodeHighlightTabsProps, CodeHighlightTabsCode, CodeHighlightTabsCssVariables, } from './CodeHighlightTabs';
-export type { CodeHighlightFactory, CodeHighlightProps, CodeHighlightStylesNames, } from './CodeHighlight';
-export type { InlineCodeHighlightFactory, InlineCodeHighlightProps, InlineCodeHighlightStylesNames, } from './InlineCodeHighlight';
+export { CodeHighlight } from './CodeHighlight/CodeHighlight';
+export { InlineCodeHighlight } from './CodeHighlight/InlineCodeHighlight';
+export { CodeHighlightTabs } from './CodeHighlightTabs/CodeHighlightTabs';
+export { CodeHighlightControl } from './CodeHighlight/CodeHighlightControl/CodeHighlightControl';
+export { CodeHighlightAdapterProvider, useHighlight, } from './CodeHighlightProvider/CodeHighlightProvider';
+export { createHighlightJsAdapter } from './CodeHighlightProvider/adapters/highlight-js-adapter';
+export { createShikiAdapter, stripShikiCodeBlocks, } from './CodeHighlightProvider/adapters/shiki-adapter';
+export { plainTextAdapter } from './CodeHighlightProvider/adapters/plain-text-adapter';
+export type { CodeHighlightFactory, CodeHighlightCssVariables, CodeHighlightProps, CodeHighlightStylesNames, } from './CodeHighlight/CodeHighlight';
+export type { CodeHighlightTabsCode, CodeHighlightTabsProps, CodeHighlightTabsStylesNames, CodeHighlightTabsFactory, CodeHighlightDefaultLanguage, } from './CodeHighlightTabs/CodeHighlightTabs';
+export type { InlineCodeHighlightProps, InlineCodeHighlightCssVariables, InlineCodeHighlightFactory, InlineCodeHighlightStylesNames, } from './CodeHighlight/InlineCodeHighlight';
+export type { CodeHighlightControlProps } from './CodeHighlight/CodeHighlightControl/CodeHighlightControl';

package/lib/index.d.ts

@@ -1,6 +1,12 @@
-export { CodeHighlightTabs } from './CodeHighlightTabs';
-export { CodeHighlight } from './CodeHighlight';
-export { InlineCodeHighlight } from './InlineCodeHighlight';
-export type { CodeHighlightTabsFactory, CodeHighlightTabsStylesNames, CodeHighlightTabsProps, CodeHighlightTabsCode, CodeHighlightTabsCssVariables, } from './CodeHighlightTabs';
-export type { CodeHighlightFactory, CodeHighlightProps, CodeHighlightStylesNames, } from './CodeHighlight';
-export type { InlineCodeHighlightFactory, InlineCodeHighlightProps, InlineCodeHighlightStylesNames, } from './InlineCodeHighlight';
+export { CodeHighlight } from './CodeHighlight/CodeHighlight';
+export { InlineCodeHighlight } from './CodeHighlight/InlineCodeHighlight';
+export { CodeHighlightTabs } from './CodeHighlightTabs/CodeHighlightTabs';
+export { CodeHighlightControl } from './CodeHighlight/CodeHighlightControl/CodeHighlightControl';
+export { CodeHighlightAdapterProvider, useHighlight, } from './CodeHighlightProvider/CodeHighlightProvider';
+export { createHighlightJsAdapter } from './CodeHighlightProvider/adapters/highlight-js-adapter';
+export { createShikiAdapter, stripShikiCodeBlocks, } from './CodeHighlightProvider/adapters/shiki-adapter';
+export { plainTextAdapter } from './CodeHighlightProvider/adapters/plain-text-adapter';
+export type { CodeHighlightFactory, CodeHighlightCssVariables, CodeHighlightProps, CodeHighlightStylesNames, } from './CodeHighlight/CodeHighlight';
+export type { CodeHighlightTabsCode, CodeHighlightTabsProps, CodeHighlightTabsStylesNames, CodeHighlightTabsFactory, CodeHighlightDefaultLanguage, } from './CodeHighlightTabs/CodeHighlightTabs';
+export type { InlineCodeHighlightProps, InlineCodeHighlightCssVariables, InlineCodeHighlightFactory, InlineCodeHighlightStylesNames, } from './CodeHighlight/InlineCodeHighlight';
+export type { CodeHighlightControlProps } from './CodeHighlight/CodeHighlightControl/CodeHighlightControl';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mantine/code-highlight",
-  "version": "7.17.1",
+  "version": "8.0.0-alpha.1",
   "description": "Code highlight with Mantine theme",
   "homepage": "https://mantine.dev/x/code-highlight/",
   "license": "MIT",
@@ -45,8 +45,8 @@
     "directory": "packages/@mantine/code-highlight"
   },
   "peerDependencies": {
-    "@mantine/core": "7.17.1",
-    "@mantine/hooks": "7.17.1",
+    "@mantine/core": "8.0.0-alpha.1",
+    "@mantine/hooks": "8.0.0-alpha.1",
     "react": "^18.x || ^19.x",
     "react-dom": "^18.x || ^19.x"
   },
@@ -58,7 +58,7 @@
     "@mantine-tests/core": "workspace:*",
     "@mantine/core": "workspace:*",
     "@mantine/hooks": "workspace:*",
-    "react": "^19.0.0",
+    "react": "19.0.0",
     "react-dom": "19.0.0"
   }
 }