@mantine/code-highlight 7.0.0-alpha.8 → 7.0.0-beta.0

package/esm/index.css

@@ -1,4 +1,4 @@
-.mantine-XIBJZDt {
+.m-5caae6d3 {
   display: inline-block;
   padding: calc(0.0625rem * var(--mantine-scale)) calc(0.1875rem * var(--mantine-scale));
   font-size: calc(0.8125rem * var(--mantine-scale));
@@ -7,28 +7,27 @@
   font-family: var(--mantine-font-family-monospace);
 }
 
-.mantine-RDvBcjB {
+.m-2c47c4fd {
   display: block;
   padding: var(--mantine-spacing-xs) var(--mantine-spacing-md);
   margin: 0;
-  font-size: 16px; /* Required for Safari to be set in px */
   --_code-line-height: 1.7;
 }
 
-.mantine-cmEtjrV {
+.m-e58679f3 {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
 }
 
-.mantine-059sM-t {
+.m-be7e9c9c {
   display: flex;
   margin-top: calc(0.4375rem * var(--mantine-scale));
   margin-right: calc(0.4375rem * var(--mantine-scale));
 }
 
-.mantine-tB-P5PD,
-.mantine-NTm-nGn {
+.m-5caae85b,
+.m-d498bab7 {
   background-color: transparent;
   opacity: 0.8;
   margin: 0;
@@ -36,34 +35,34 @@
 
 @media (hover: hover) {
 
-  .mantine-tB-P5PD:hover, .mantine-NTm-nGn:hover {
+  .m-5caae85b:hover, .m-d498bab7:hover {
     opacity: 1;
   }
 }
 
 @media (hover: none) {
 
-  .mantine-tB-P5PD:active, .mantine-NTm-nGn:active {
+  .m-5caae85b:active, .m-d498bab7:active {
     opacity: 1;
   }
 }
 
 @media (max-width: 40em) {
 
-.mantine-tB-P5PD,
-.mantine-NTm-nGn {
+.m-5caae85b,
+.m-d498bab7 {
     display: none
 }
   }
 
-.mantine-tB-P5PD {
+.m-5caae85b {
   position: absolute;
   top: calc(0.3125rem * var(--mantine-scale));
   right: calc(0.3125rem * var(--mantine-scale));
   z-index: 1;
 }
 
-.mantine-PBrPXnu {
+.m-5cac2e62 {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -81,88 +80,70 @@
   color: var(--_file-color);
   opacity: var(--_file-opacity);
   background-color: var(--_file-bg);
+  white-space: nowrap;
 }
 
 @media (hover: hover) {
 
-  .mantine-PBrPXnu:hover {
+  .m-5cac2e62:hover {
     --_file-opacity: 1;
   }
 }
 
 @media (hover: none) {
 
-  .mantine-PBrPXnu:active {
+  .m-5cac2e62:active {
     --_file-opacity: 1;
   }
 }
 
-.mantine-PBrPXnu:last-of-type {
+.m-5cac2e62:last-of-type {
     border-bottom-right-radius: var(--mantine-radius-sm);
   }
 
-.mantine-PBrPXnu:only-child {
+.m-5cac2e62:only-child {
     --_file-cursor: default;
   }
 
-.mantine-PBrPXnu[data-active] {
+.m-5cac2e62[data-active] {
     --_file-opacity: 1;
     --_file-color: var(--_file-active-color) !important;
     --_file-bg: var(--_file-active-bg);
   }
 
-.mantine-PBrPXnu {
+.m-5cac2e62 {
 
   --_file-opacity: 0.8;
   --_file-cursor: pointer;
 }
 
-[data-mantine-color-scheme='light'] .mantine-PBrPXnu {
+[data-mantine-color-scheme='light'] .m-5cac2e62 {
     --_file-color: var(--mantine-color-gray-8);
     --_file-bd: var(--mantine-color-gray-2);
     --_file-active-bg: var(--mantine-color-white);
     --_file-active-color: var(--mantine-color-black);
 }
 
-@media (prefers-color-scheme: light) {
-
-  .mantine-PBrPXnu {
-    --_file-color: var(--mantine-color-gray-8);
-    --_file-bd: var(--mantine-color-gray-2);
-    --_file-active-bg: var(--mantine-color-white);
-    --_file-active-color: var(--mantine-color-black);
-  }
-}
-
-[data-mantine-color-scheme='dark'] .mantine-PBrPXnu {
+[data-mantine-color-scheme='dark'] .m-5cac2e62 {
     --_file-color: var(--mantine-color-dark-0);
     --_file-bd: var(--mantine-color-dark-4);
     --_file-active-bg: var(--mantine-color-dark-6);
     --_file-active-color: var(--mantine-color-white);
 }
 
-@media (prefers-color-scheme: dark) {
-
-  .mantine-PBrPXnu {
-    --_file-color: var(--mantine-color-dark-0);
-    --_file-bd: var(--mantine-color-dark-4);
-    --_file-active-bg: var(--mantine-color-dark-6);
-    --_file-active-color: var(--mantine-color-white);
-  }
-}
-
-.mantine-IvOddiX {
+.m-38d99e51 {
   display: flex;
 }
 
-.mantine-YfYyOiA {
+.m-9f507240 {
   max-height: var(--ch-max-collapsed-height);
   overflow: hidden;
   position: relative;
 }
 
-.mantine-YfYyOiA::before {
+.m-9f507240::before {
     content: '';
+    z-index: 100;
     position: absolute;
     inset: 0;
     pointer-events: none;
@@ -170,15 +151,15 @@
     border-radius: calc(var(--mantine-radius-md) - calc(0.0625rem * var(--mantine-scale)));
   }
 
-.mantine-YfYyOiA[data-expanded] {
+.m-9f507240[data-expanded] {
     max-height: none;
   }
 
-.mantine-YfYyOiA[data-expanded]::before {
+.m-9f507240[data-expanded]::before {
       display: none;
     }
 
-.mantine-haNyFRC {
+.m-c9378bc2 {
   position: absolute;
   bottom: 0;
   left: 50%;
@@ -187,39 +168,37 @@
   color: var(--mantine-color-anchor);
   width: 100%;
   text-align: center;
+  z-index: 101;
   padding-top: var(--mantine-spacing-xs);
   padding-bottom: var(--mantine-spacing-xs);
 }
 
-.mantine-haNyFRC[data-hidden] {
+.m-c9378bc2[data-hidden] {
     display: none;
   }
 
-.mantine-k6OJW8l {
+.m-5cb1b9c8 {
   margin-top: 0;
   position: relative;
 }
 
-.mantine-h-DP-Yw {
-  color: var(--_color);
-  background: var(--_background);
+.m-b46cddfb {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 1;
 }
 
-  [data-mantine-color-scheme='light'] .mantine-h-DP-Yw {
-    --_color: var(--mantine-color-gray-7);
-    --_background: var(--mantine-color-gray-0);
-    --code-comment-color: var(--mantine-color-gray-6);
-    --code-keyword-color: var(--mantine-color-violet-8);
-    --code-tag-color: var(--mantine-color-red-9);
-    --code-literal-color: var(--mantine-color-blue-6);
-    --code-string-color: var(--mantine-color-blue-9);
-    --code-variable-color: var(--mantine-color-lime-9);
-    --code-class-color: var(--mantine-color-orange-9);
-}
+.m-b46cddfb > svg {
+    display: block;
+  }
 
-  @media (prefers-color-scheme: light) {
+.m-1f5e827e {
+  color: var(--_color);
+  background: var(--_background);
+}
 
-  .mantine-h-DP-Yw {
+  [data-mantine-color-scheme='light'] .m-1f5e827e {
     --_color: var(--mantine-color-gray-7);
     --_background: var(--mantine-color-gray-0);
     --code-comment-color: var(--mantine-color-gray-6);
@@ -229,24 +208,9 @@
     --code-string-color: var(--mantine-color-blue-9);
     --code-variable-color: var(--mantine-color-lime-9);
     --code-class-color: var(--mantine-color-orange-9);
-  }
-}
-
-  [data-mantine-color-scheme='dark'] .mantine-h-DP-Yw {
-    --_color: var(--mantine-color-dark-1);
-    --_background: var(--mantine-color-dark-8);
-    --code-comment-color: var(--mantine-color-dark-3);
-    --code-keyword-color: var(--mantine-color-violet-3);
-    --code-tag-color: var(--mantine-color-yellow-4);
-    --code-literal-color: var(--mantine-color-blue-4);
-    --code-string-color: var(--mantine-color-green-6);
-    --code-variable-color: var(--mantine-color-blue-2);
-    --code-class-color: var(--mantine-color-orange-5);
 }
 
-  @media (prefers-color-scheme: dark) {
-
-  .mantine-h-DP-Yw {
+  [data-mantine-color-scheme='dark'] .m-1f5e827e {
     --_color: var(--mantine-color-dark-1);
     --_background: var(--mantine-color-dark-8);
     --code-comment-color: var(--mantine-color-dark-3);
@@ -256,72 +220,71 @@
     --code-string-color: var(--mantine-color-green-6);
     --code-variable-color: var(--mantine-color-blue-2);
     --code-class-color: var(--mantine-color-orange-5);
-  }
 }
 
-  .mantine-h-DP-Yw .hljs-comment,
-  .mantine-h-DP-Yw .hljs-quote {
+  .m-1f5e827e .hljs-comment,
+  .m-1f5e827e .hljs-quote {
     font-style: italic;
     color: var(--code-comment-color);
   }
 
-  .mantine-h-DP-Yw .hljs-doctag,
-  .mantine-h-DP-Yw .hljs-formula,
-  .mantine-h-DP-Yw .hljs-keyword {
+  .m-1f5e827e .hljs-doctag,
+  .m-1f5e827e .hljs-formula,
+  .m-1f5e827e .hljs-keyword {
     color: var(--code-keyword-color);
   }
 
-  .mantine-h-DP-Yw .hljs-deletion,
-  .mantine-h-DP-Yw .hljs-name,
-  .mantine-h-DP-Yw .hljs-section,
-  .mantine-h-DP-Yw .hljs-selector-tag,
-  .mantine-h-DP-Yw .hljs-subst {
+  .m-1f5e827e .hljs-deletion,
+  .m-1f5e827e .hljs-name,
+  .m-1f5e827e .hljs-section,
+  .m-1f5e827e .hljs-selector-tag,
+  .m-1f5e827e .hljs-subst {
     color: var(--code-tag-color);
   }
 
-  .mantine-h-DP-Yw .hljs-literal {
+  .m-1f5e827e .hljs-literal {
     color: var(--code-literal-color);
   }
 
-  .mantine-h-DP-Yw .hljs-addition,
-  .mantine-h-DP-Yw .hljs-attribute,
-  .mantine-h-DP-Yw .hljs-meta .hljs-string,
-  .mantine-h-DP-Yw .hljs-regexp,
-  .mantine-h-DP-Yw .hljs-string {
+  .m-1f5e827e .hljs-addition,
+  .m-1f5e827e .hljs-attribute,
+  .m-1f5e827e .hljs-meta .hljs-string,
+  .m-1f5e827e .hljs-regexp,
+  .m-1f5e827e .hljs-string {
     color: var(--code-string-color);
   }
 
-  .mantine-h-DP-Yw .hljs-attr,
-  .mantine-h-DP-Yw .hljs-number,
-  .mantine-h-DP-Yw .hljs-selector-attr,
-  .mantine-h-DP-Yw .hljs-selector-class,
-  .mantine-h-DP-Yw .hljs-selector-pseudo,
-  .mantine-h-DP-Yw .hljs-template-variable,
-  .mantine-h-DP-Yw .hljs-type,
-  .mantine-h-DP-Yw .hljs-variable {
+  .m-1f5e827e .hljs-attr,
+  .m-1f5e827e .hljs-number,
+  .m-1f5e827e .hljs-selector-attr,
+  .m-1f5e827e .hljs-selector-class,
+  .m-1f5e827e .hljs-selector-pseudo,
+  .m-1f5e827e .hljs-template-variable,
+  .m-1f5e827e .hljs-type,
+  .m-1f5e827e .hljs-variable {
     color: var(--code-variable-color);
   }
 
-  .mantine-h-DP-Yw .hljs-bullet,
-  .mantine-h-DP-Yw .hljs-link,
-  .mantine-h-DP-Yw .hljs-meta,
-  .mantine-h-DP-Yw .hljs-selector-id,
-  .mantine-h-DP-Yw .hljs-symbol,
-  .mantine-h-DP-Yw .hljs-title,
-  .mantine-h-DP-Yw .hljs-built_in,
-  .mantine-h-DP-Yw .hljs-class .hljs-title,
-  .mantine-h-DP-Yw .hljs-title.class_ {
+  .m-1f5e827e .hljs-bullet,
+  .m-1f5e827e .hljs-link,
+  .m-1f5e827e .hljs-meta,
+  .m-1f5e827e .hljs-selector-id,
+  .m-1f5e827e .hljs-symbol,
+  .m-1f5e827e .hljs-title,
+  .m-1f5e827e .hljs-built_in,
+  .m-1f5e827e .hljs-class .hljs-title,
+  .m-1f5e827e .hljs-title.class_ {
     color: var(--code-class-color);
   }
 
-  .mantine-h-DP-Yw .hljs-emphasis {
+  .m-1f5e827e .hljs-emphasis {
     font-style: italic;
   }
 
-  .mantine-h-DP-Yw .hljs-strong {
+  .m-1f5e827e .hljs-strong {
     font-weight: 700;
   }
 
-  .mantine-h-DP-Yw .hljs-link {
+  .m-1f5e827e .hljs-link {
     text-decoration: underline;
   }

package/esm/use-highlight.js

@@ -1,11 +1,12 @@
-'use client';
 import { useState, useEffect } from 'react';
 import hljs from 'highlight.js';
 
 function useHighlight({ code, language, highlightOnClient }) {
   const getHighlightedCode = () => hljs.highlight(code.trim(), { language }).value;
   const [highlighted, setHighlighted] = useState(!highlightOnClient);
-  const [highlightedCode, setHighlightedCode] = useState(highlightOnClient ? code : getHighlightedCode());
+  const [highlightedCode, setHighlightedCode] = useState(
+    highlightOnClient ? code : getHighlightedCode()
+  );
   const getCodeProps = () => highlighted ? { dangerouslySetInnerHTML: { __html: highlightedCode } } : { children: code.trim() };
   useEffect(() => {
     if (highlightOnClient) {

package/esm/use-highlight.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-highlight.js","sources":["../src/use-highlight.ts"],"sourcesContent":["import { useState, useEffect } from 'react';\nimport hljs from 'highlight.js';\n\ninterface UseHighlightInput {\n  code: string;\n  language: string;\n  highlightOnClient: boolean | undefined;\n}\n\nexport function useHighlight({ code, language, highlightOnClient }: UseHighlightInput) {\n  const getHighlightedCode = () => hljs.highlight(code.trim(), { language: language! }).value;\n  const [highlighted, setHighlighted] = useState(!highlightOnClient);\n  const [highlightedCode, setHighlightedCode] = useState(\n    highlightOnClient ? code : getHighlightedCode()\n  );\n\n  const getCodeProps = () =>\n    highlighted\n      ? { dangerouslySetInnerHTML: { __html: highlightedCode } }\n      : { children: code.trim() };\n\n  useEffect(() => {\n    if (highlightOnClient) {\n      setHighlightedCode(getHighlightedCode());\n      setHighlighted(true);\n    }\n  }, []);\n\n  return getCodeProps;\n}\n"],"names":[],"mappings":";;;;AAEO,SAAS,YAAY,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,iBAAiB,EAAE,EAAE;AACpE,EAAE,MAAM,kBAAkB,GAAG,MAAM,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,EAAE,EAAE,EAAE,QAAQ,EAAE,CAAC,CAAC,KAAK,CAAC;AACnF,EAAE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,CAAC,iBAAiB,CAAC,CAAC;AACrE,EAAE,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAC,iBAAiB,GAAG,IAAI,GAAG,kBAAkB,EAAE,CAAC,CAAC;AAC1G,EAAE,MAAM,YAAY,GAAG,MAAM,WAAW,GAAG,EAAE,uBAAuB,EAAE,EAAE,MAAM,EAAE,eAAe,EAAE,EAAE,GAAG,EAAE,QAAQ,EAAE,IAAI,CAAC,IAAI,EAAE,EAAE,CAAC;AAChI,EAAE,SAAS,CAAC,MAAM;AAClB,IAAI,IAAI,iBAAiB,EAAE;AAC3B,MAAM,kBAAkB,CAAC,kBAAkB,EAAE,CAAC,CAAC;AAC/C,MAAM,cAAc,CAAC,IAAI,CAAC,CAAC;AAC3B,KAAK;AACL,GAAG,EAAE,EAAE,CAAC,CAAC;AACT,EAAE,OAAO,YAAY,CAAC;AACtB;;"}
+{"version":3,"file":"use-highlight.js","sources":["../src/use-highlight.ts"],"sourcesContent":["import { useState, useEffect } from 'react';\nimport hljs from 'highlight.js';\n\ninterface UseHighlightInput {\n  code: string;\n  language: string;\n  highlightOnClient: boolean | undefined;\n}\n\nexport function useHighlight({ code, language, highlightOnClient }: UseHighlightInput) {\n  const getHighlightedCode = () => hljs.highlight(code.trim(), { language: language! }).value;\n  const [highlighted, setHighlighted] = useState(!highlightOnClient);\n  const [highlightedCode, setHighlightedCode] = useState(\n    highlightOnClient ? code : getHighlightedCode()\n  );\n\n  const getCodeProps = () =>\n    highlighted\n      ? { dangerouslySetInnerHTML: { __html: highlightedCode } }\n      : { children: code.trim() };\n\n  useEffect(() => {\n    if (highlightOnClient) {\n      setHighlightedCode(getHighlightedCode());\n      setHighlighted(true);\n    }\n  }, []);\n\n  return getCodeProps;\n}\n"],"names":[],"mappings":";;;AAEO,SAAS,YAAY,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,iBAAiB,EAAE,EAAE;AACpE,EAAE,MAAM,kBAAkB,GAAG,MAAM,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,EAAE,EAAE,EAAE,QAAQ,EAAE,CAAC,CAAC,KAAK,CAAC;AACnF,EAAE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,CAAC,iBAAiB,CAAC,CAAC;AACrE,EAAE,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ;AACxD,IAAI,iBAAiB,GAAG,IAAI,GAAG,kBAAkB,EAAE;AACnD,GAAG,CAAC;AACJ,EAAE,MAAM,YAAY,GAAG,MAAM,WAAW,GAAG,EAAE,uBAAuB,EAAE,EAAE,MAAM,EAAE,eAAe,EAAE,EAAE,GAAG,EAAE,QAAQ,EAAE,IAAI,CAAC,IAAI,EAAE,EAAE,CAAC;AAChI,EAAE,SAAS,CAAC,MAAM;AAClB,IAAI,IAAI,iBAAiB,EAAE;AAC3B,MAAM,kBAAkB,CAAC,kBAAkB,EAAE,CAAC,CAAC;AAC/C,MAAM,cAAc,CAAC,IAAI,CAAC,CAAC;AAC3B,KAAK;AACL,GAAG,EAAE,EAAE,CAAC,CAAC;AACT,EAAE,OAAO,YAAY,CAAC;AACtB;;;;"}

package/lib/CodeHighlight.d.ts

@@ -1,6 +1,5 @@
 import { BoxProps, StylesApiProps, ElementProps, Factory } from '@mantine/core';
 export type CodeHighlightStylesNames = 'root' | 'code' | 'pre' | 'copy';
-export type CodeHighlightVariant = string;
 export interface CodeHighlightProps extends BoxProps, StylesApiProps<CodeHighlightFactory>, ElementProps<'div'> {
     /** Code to highlight */
     code: string;
@@ -19,11 +18,9 @@ export type CodeHighlightFactory = Factory<{
     props: CodeHighlightProps;
     ref: HTMLDivElement;
     stylesNames: CodeHighlightStylesNames;
-    variant: CodeHighlightVariant;
 }>;
 export declare const CodeHighlight: import("@mantine/core").MantineComponent<{
     props: CodeHighlightProps;
     ref: HTMLDivElement;
     stylesNames: CodeHighlightStylesNames;
-    variant: CodeHighlightVariant;
 }>;

package/lib/CodeHighlightTabs.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
 import { BoxProps, StylesApiProps, ElementProps, Factory } from '@mantine/core';
-export type CodeHighlightTabsStylesNames = 'root' | 'code' | 'codeWrapper' | 'showCodeButton' | 'pre' | 'controls' | 'control' | 'header' | 'file' | 'files';
-export type CodeHighlightTabsVariant = string;
+export type CodeHighlightTabsStylesNames = 'root' | 'code' | 'codeWrapper' | 'showCodeButton' | 'pre' | 'controls' | 'control' | 'header' | 'file' | 'files' | 'fileIcon';
 export type CodeHighlightTabsCssVariables = {
     root: '--ch-max-collapsed-height';
 };

package/lib/CopyIcon.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 interface CopyIconProps extends React.ComponentPropsWithoutRef<'svg'> {
     copied: boolean;
 }
-export declare function CopyIcon({ copied, style, ...others }: CopyIconProps): JSX.Element;
+export declare function CopyIcon({ copied, style, ...others }: CopyIconProps): React.JSX.Element;
 export declare namespace CopyIcon {
     var displayName: string;
 }

package/lib/ExpandIcon.d.ts

@@ -2,5 +2,5 @@ import React from 'react';
 interface ExpandIconProps extends React.ComponentPropsWithoutRef<'svg'> {
     expanded: boolean;
 }
-export declare function ExpandIcon({ expanded, style, ...others }: ExpandIconProps): JSX.Element;
+export declare function ExpandIcon({ expanded, style, ...others }: ExpandIconProps): React.JSX.Element;
 export {};

package/lib/FileIcon.d.ts

@@ -3,6 +3,8 @@ 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 }: FileIconProps): JSX.Element | null;
+export declare function FileIcon({ fileIcon, fileName, getFileIcon, className, style }: FileIconProps): React.JSX.Element | null;
 export {};

package/lib/InlineCodeHighlight.d.ts

@@ -1,6 +1,5 @@
 import { BoxProps, StylesApiProps, ElementProps, Factory } from '@mantine/core';
 export type InlineCodeHighlightStylesNames = 'code';
-export type InlineCodeHighlightVariant = string;
 export interface InlineCodeHighlightProps extends BoxProps, StylesApiProps<InlineCodeHighlightFactory>, ElementProps<'div'> {
     /** Code to highlight */
     code: string;

package/lib/index.d.ts

@@ -1,6 +1,6 @@
 export { CodeHighlightTabs } from './CodeHighlightTabs';
 export { CodeHighlight } from './CodeHighlight';
 export { InlineCodeHighlight } from './InlineCodeHighlight';
-export type { CodeHighlightTabsFactory, CodeHighlightTabsStylesNames, CodeHighlightTabsProps, CodeHighlightTabsCode, CodeHighlightTabsVariant, CodeHighlightTabsCssVariables, } from './CodeHighlightTabs';
-export type { CodeHighlightFactory, CodeHighlightProps, CodeHighlightStylesNames, CodeHighlightVariant, } from './CodeHighlight';
-export type { InlineCodeHighlightFactory, InlineCodeHighlightProps, InlineCodeHighlightStylesNames, InlineCodeHighlightVariant, } 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';

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@mantine/code-highlight",
   "description": "Code highlight with Mantine theme",
-  "version": "7.0.0-alpha.8",
+  "version": "7.0.0-beta.0",
+  "types": "./lib/index.d.ts",
   "exports": {
     ".": {
       "import": "./esm/index.js",
@@ -36,14 +37,14 @@
     "syntax-highlight"
   ],
   "peerDependencies": {
-    "@mantine/core": "7.0.0-alpha.8",
-    "@mantine/hooks": "7.0.0-alpha.8",
-    "react": ">=16.8.0",
-    "react-dom": ">=16.8.0"
+    "@mantine/core": "7.0.0-beta.0",
+    "@mantine/hooks": "7.0.0-beta.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "dependencies": {
     "highlight.js": "^11.7.0",
-    "clsx": "1.1.1"
+    "clsx": "2.0.0"
   },
   "devDependencies": {}
 }

package/src/CodeHighlight.module.css

@@ -11,7 +11,6 @@
   display: block;
   padding: var(--mantine-spacing-xs) var(--mantine-spacing-md);
   margin: 0;
-  font-size: 16px; /* Required for Safari to be set in px */
   --_code-line-height: 1.7;
 }
 
@@ -67,6 +66,7 @@
   color: var(--_file-color);
   opacity: var(--_file-opacity);
   background-color: var(--_file-bg);
+  white-space: nowrap;
 
   @mixin hover {
     --_file-opacity: 1;
@@ -115,6 +115,7 @@
 
   &::before {
     content: '';
+    z-index: 100;
     position: absolute;
     inset: 0;
     pointer-events: none;
@@ -140,6 +141,7 @@
   color: var(--mantine-color-anchor);
   width: 100%;
   text-align: center;
+  z-index: 101;
   padding-top: var(--mantine-spacing-xs);
   padding-bottom: var(--mantine-spacing-xs);
 
@@ -152,3 +154,14 @@
   margin-top: 0;
   position: relative;
 }
+
+.fileIcon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0;
+
+  & > svg {
+    display: block;
+  }
+}

package/src/CodeHighlight.story.tsx

@@ -194,6 +194,12 @@ export function Tabs() {
         code={[
           { code: tsxCode, language: 'tsx', icon: <TsIcon />, fileName: 'Component.tsx' },
           { code: cssCode, language: 'css', icon: <CSSIcon />, fileName: 'Component.module.css' },
+          {
+            code: cssCode,
+            language: 'css',
+            icon: <CSSIcon />,
+            fileName: 'Long-file-name-that-will-break-to-another-line.css',
+          },
         ]}
         defaultExpanded={false}
       >

package/src/CodeHighlight.tsx

@@ -22,7 +22,6 @@ import themeClasses from './CodeHighlight.theme.module.css';
 const classes = { ..._classes, root: cx(_classes.root, themeClasses.theme) };
 
 export type CodeHighlightStylesNames = 'root' | 'code' | 'pre' | 'copy';
-export type CodeHighlightVariant = string;
 
 export interface CodeHighlightProps
   extends BoxProps,
@@ -51,7 +50,6 @@ export type CodeHighlightFactory = Factory<{
   props: CodeHighlightProps;
   ref: HTMLDivElement;
   stylesNames: CodeHighlightStylesNames;
-  variant: CodeHighlightVariant;
 }>;
 
 const defaultProps: Partial<CodeHighlightProps> = {
@@ -111,7 +109,7 @@ export const CodeHighlight = factory<CodeHighlightFactory>((_props, ref) => {
         </CopyButton>
       )}
 
-      <ScrollArea type="auto" dir="ltr" offsetScrollbars={false}>
+      <ScrollArea type="hover" dir="ltr" offsetScrollbars={false}>
         <pre {...getStyles('pre')}>
           <code {...getStyles('code')} {...getCodeProps()} />
         </pre>

package/src/CodeHighlightTabs.tsx

@@ -37,9 +37,9 @@ export type CodeHighlightTabsStylesNames =
   | 'control'
   | 'header'
   | 'file'
-  | 'files';
+  | 'files'
+  | 'fileIcon';
 
-export type CodeHighlightTabsVariant = string;
 export type CodeHighlightTabsCssVariables = {
   root: '--ch-max-collapsed-height';
 };
@@ -189,7 +189,12 @@ export const CodeHighlightTabs = factory<CodeHighlightTabsFactory>((_props, ref)
       mod={{ active: index === value }}
       onClick={() => setValue(index)}
     >
-      <FileIcon fileIcon={node.icon} getFileIcon={getFileIcon} fileName={node.fileName} />
+      <FileIcon
+        fileIcon={node.icon}
+        getFileIcon={getFileIcon}
+        fileName={node.fileName}
+        {...getStyles('fileIcon')}
+      />
       <span>{node.fileName}</span>
     </UnstyledButton>
   ));
@@ -243,7 +248,7 @@ export const CodeHighlightTabs = factory<CodeHighlightTabsFactory>((_props, ref)
         mod={{ hidden: _expanded }}
         onClick={() => setExpanded(true)}
       >
-        Expand code
+        {expandCodeLabel}
       </UnstyledButton>
     </Box>
   );