@mantine/code-highlight 7.0.0-alpha.1

package/esm/index.css

@@ -0,0 +1,326 @@
+.mantine-XIBJZDt {
+  display: inline-block;
+  padding: 0.0625rem 0.1875rem;
+  font-size: 0.8125rem;
+  border-radius: var(--mantine-radius-xs);
+  line-height: var(--_code-line-height, var(--mantine-line-height));
+  font-family: var(--mantine-font-family-monospace);
+}
+
+.mantine-RDvBcjB {
+  display: block;
+  padding: var(--mantine-spacing-xs) var(--mantine-spacing-md);
+  margin: 0;
+  --_code-line-height: 1.7;
+}
+
+.mantine-cmEtjrV {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+}
+
+.mantine-059sM-t {
+  display: flex;
+  margin-top: 0.4375rem;
+  margin-right: 0.4375rem;
+}
+
+.mantine-tB-P5PD,
+.mantine-NTm-nGn {
+  background-color: transparent;
+  opacity: 0.8;
+  margin: 0;
+}
+
+@media (hover: hover) {
+
+  .mantine-tB-P5PD:hover, .mantine-NTm-nGn:hover {
+    opacity: 1;
+  }
+}
+
+@media (hover: none) {
+
+  .mantine-tB-P5PD:active, .mantine-NTm-nGn:active {
+    opacity: 1;
+  }
+}
+
+@media (max-width: 40em) {
+
+.mantine-tB-P5PD,
+.mantine-NTm-nGn {
+    display: none
+}
+  }
+
+.mantine-tB-P5PD {
+  position: absolute;
+  top: 0.3125rem;
+  right: 0.3125rem;
+  z-index: 1;
+}
+
+.mantine-PBrPXnu {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--mantine-font-size-xs);
+  gap: 0.4375rem;
+  padding: 0.4375rem 0.75rem;
+  font-family: var(--mantine-font-family-monospace);
+  font-weight: 700;
+  line-height: 1;
+  user-select: none;
+  cursor: var(--_file-cursor);
+  border: 0.0625rem solid var(--_file-bd);
+  border-top: 0;
+  border-left: 0;
+  color: var(--_file-color);
+  opacity: var(--_file-opacity);
+  background-color: var(--_file-bg);
+}
+
+@media (hover: hover) {
+
+  .mantine-PBrPXnu:hover {
+    --_file-opacity: 1;
+  }
+}
+
+@media (hover: none) {
+
+  .mantine-PBrPXnu:active {
+    --_file-opacity: 1;
+  }
+}
+
+.mantine-PBrPXnu:last-of-type {
+    border-bottom-right-radius: var(--mantine-radius-sm);
+  }
+
+.mantine-PBrPXnu:only-child {
+    --_file-cursor: default;
+  }
+
+.mantine-PBrPXnu[data-active] {
+    --_file-opacity: 1;
+    --_file-color: var(--_file-active-color) !important;
+    --_file-bg: var(--_file-active-bg);
+  }
+
+.mantine-PBrPXnu {
+
+  --_file-opacity: 0.8;
+  --_file-cursor: pointer;
+}
+
+[data-mantine-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);
+}
+
+@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 {
+    --_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 {
+  display: flex;
+}
+
+.mantine-YfYyOiA {
+  max-height: var(--ch-max-collapsed-height);
+  overflow: hidden;
+  position: relative;
+}
+
+.mantine-YfYyOiA::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    background-image: linear-gradient(0deg, var(--_background) 16%, rgba(0, 0, 0, 0) 100%);
+    border-radius: calc(var(--mantine-radius-md) - 0.0625rem);
+  }
+
+.mantine-YfYyOiA[data-expanded] {
+    max-height: none;
+  }
+
+.mantine-YfYyOiA[data-expanded]::before {
+      display: none;
+    }
+
+.mantine-haNyFRC {
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: var(--mantine-font-size-sm);
+  color: var(--mantine-color-anchor);
+  width: 100%;
+  text-align: center;
+  padding-top: var(--mantine-spacing-xs);
+  padding-bottom: var(--mantine-spacing-xs);
+}
+
+.mantine-haNyFRC[data-hidden] {
+    display: none;
+  }
+
+.mantine-k6OJW8l {
+  margin-top: 0;
+  position: relative;
+}
+
+.mantine-h-DP-Yw {
+  color: var(--_color);
+  background: var(--_background);
+}
+
+  [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);
+}
+
+  @media (prefers-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);
+  }
+}
+
+  [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 {
+    --_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);
+  }
+}
+
+  .mantine-h-DP-Yw .hljs-comment,
+  .mantine-h-DP-Yw .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 {
+    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 {
+    color: var(--code-tag-color);
+  }
+
+  .mantine-h-DP-Yw .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 {
+    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 {
+    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_ {
+    color: var(--code-class-color);
+  }
+
+  .mantine-h-DP-Yw .hljs-emphasis {
+    font-style: italic;
+  }
+
+  .mantine-h-DP-Yw .hljs-strong {
+    font-weight: 700;
+  }
+
+  .mantine-h-DP-Yw .hljs-link {
+    text-decoration: underline;
+  }

package/esm/index.js

@@ -0,0 +1,4 @@
+export { CodeHighlightTabs } from './CodeHighlightTabs.js';
+export { CodeHighlight } from './CodeHighlight.js';
+export { InlineCodeHighlight } from './InlineCodeHighlight.js';
+//# sourceMappingURL=index.js.map

package/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/esm/use-highlight.js

@@ -0,0 +1,19 @@
+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 getCodeProps = () => highlighted ? { dangerouslySetInnerHTML: { __html: highlightedCode } } : { children: code.trim() };
+  useEffect(() => {
+    if (highlightOnClient) {
+      setHighlightedCode(getHighlightedCode());
+      setHighlighted(true);
+    }
+  }, []);
+  return getCodeProps;
+}
+
+export { useHighlight };
+//# sourceMappingURL=use-highlight.js.map

package/esm/use-highlight.js.map

@@ -0,0 +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;;;;"}

package/lib/CodeHighlight.d.ts

@@ -0,0 +1,29 @@
+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;
+    /** Code language, `'tsx'` by default */
+    language?: string;
+    /** Determines whether copy button should be displayed, `true` by default */
+    withCopyButton?: boolean;
+    /** Copy tooltip label, `'Copy code'` by default */
+    copyLabel?: string;
+    /** Copied tooltip label, `'Copied'` by default */
+    copiedLabel?: string;
+    /** Determines whether code should be highlighted only after component is mounted to the dom (disables code highlight on server), `false` by default */
+    highlightOnClient?: boolean;
+}
+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

@@ -0,0 +1,55 @@
+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 CodeHighlightTabsCssVariables = {
+    root: '--ch-max-collapsed-height';
+};
+export interface CodeHighlightTabsCode {
+    language?: string;
+    code: string;
+    fileName?: string;
+    icon?: React.ReactNode;
+}
+export interface CodeHighlightTabsProps extends BoxProps, StylesApiProps<CodeHighlightTabsFactory>, ElementProps<'div'> {
+    /** Code to highlight with meta data (file name and icon) */
+    code: CodeHighlightTabsCode | CodeHighlightTabsCode[];
+    /** Default active tab index */
+    defaultActiveTab?: number;
+    /** Index of controlled active tab state */
+    activeTab?: number;
+    /** Called when tab changes */
+    onTabChange?(tab: number): void;
+    /** Determines whether header with file names and copy button should be rendered, `true` by default */
+    withHeader?: boolean;
+    /** Copy tooltip label, `'Copy code'` by default */
+    copyLabel?: string;
+    /** Copied tooltip label, `'Copied'` by default */
+    copiedLabel?: string;
+    /** Function that returns icon based on file name */
+    getFileIcon?(fileName: string): React.ReactNode;
+    /** `max-height` of code in collapsed state, `'6rem'` by default */
+    maxCollapsedHeight?: React.CSSProperties['maxHeight'];
+    /** Controlled expanded state */
+    expanded?: boolean;
+    /** Uncontrolled expanded state initial value */
+    defaultExpanded?: boolean;
+    /** Called when expanded state changes */
+    onExpandedChange?(expanded: boolean): void;
+    /** Expand button label and tooltip, `'Expand code'` by default */
+    expandCodeLabel?: string;
+    /** Collapse button label and tooltip, `'Collapse code'` by default */
+    collapseCodeLabel?: string;
+    /** Determines whether to show the expand button, `false` by default */
+    withExpandButton?: boolean;
+}
+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/CopyIcon.d.ts

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

package/lib/ExpandIcon.d.ts

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

package/lib/FileIcon.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface FileIconProps {
+    fileName: string | undefined;
+    getFileIcon?: ((fileName: string) => React.ReactNode) | undefined;
+    fileIcon: React.ReactNode | undefined;
+}
+export declare function FileIcon({ fileIcon, fileName, getFileIcon }: FileIconProps): JSX.Element | null;
+export {};

package/lib/InlineCodeHighlight.d.ts

@@ -0,0 +1,19 @@
+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;
+    /** Code language, `'tsx'` by default */
+    language?: string;
+}
+export type InlineCodeHighlightFactory = Factory<{
+    props: InlineCodeHighlightProps;
+    ref: HTMLElement;
+    stylesNames: InlineCodeHighlightStylesNames;
+}>;
+export declare const InlineCodeHighlight: import("@mantine/core").MantineComponent<{
+    props: InlineCodeHighlightProps;
+    ref: HTMLElement;
+    stylesNames: InlineCodeHighlightStylesNames;
+}>;

package/lib/index.d.ts

@@ -0,0 +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';

package/lib/use-highlight.d.ts

@@ -0,0 +1,15 @@
+interface UseHighlightInput {
+    code: string;
+    language: string;
+    highlightOnClient: boolean | undefined;
+}
+export declare function useHighlight({ code, language, highlightOnClient }: UseHighlightInput): () => {
+    dangerouslySetInnerHTML: {
+        __html: string;
+    };
+    children?: undefined;
+} | {
+    children: string;
+    dangerouslySetInnerHTML?: undefined;
+};
+export {};

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@mantine/code-highlight",
+  "description": "Code highlight with Mantine theme",
+  "version": "7.0.0-alpha.1",
+  "main": "cjs/index.js",
+  "module": "esm/index.js",
+  "types": "lib/index.d.ts",
+  "license": "MIT",
+  "author": "Vitaly Rtishchev <rtivital@gmail.com>",
+  "sideEffects": false,
+  "homepage": "https://mantine.dev/others/prism/",
+  "repository": {
+    "url": "https://github.com/mantinedev/mantine.git",
+    "type": "git",
+    "directory": "src/mantine-prism"
+  },
+  "keywords": [
+    "react",
+    "next",
+    "nextjs",
+    "ui",
+    "components",
+    "ui-kit",
+    "library",
+    "frontend",
+    "code",
+    "highlight",
+    "syntax",
+    "syntax-highlight"
+  ],
+  "peerDependencies": {
+    "@mantine/core": "7.0.0-alpha.1",
+    "@mantine/hooks": "7.0.0-alpha.1",
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
+  },
+  "dependencies": {
+    "highlight.js": "^11.7.0",
+    "clsx": "1.1.1"
+  },
+  "devDependencies": {}
+}