@mantine/code-highlight 7.13.5-alpha.1 → 7.13.5-alpha.2

package/lib/CodeHighlightTabs.d.ts

@@ -0,0 +1,55 @@
+import { BoxProps, ElementProps, Factory, StylesApiProps } from '@mantine/core';
+export type CodeHighlightTabsStylesNames = 'root' | 'code' | 'codeWrapper' | 'showCodeButton' | 'pre' | 'controls' | 'control' | 'header' | 'file' | 'files' | 'fileIcon';
+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 */
+    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;
+    /** Determines whether copy button should be displayed, `true` by default */
+    withCopyButton?: 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,8 @@
+interface CopyIconProps extends React.ComponentPropsWithoutRef<'svg'> {
+    copied: boolean;
+}
+export declare function CopyIcon({ copied, style, ...others }: CopyIconProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace CopyIcon {
+    var displayName: string;
+}
+export {};

package/lib/ExpandIcon.d.ts

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

package/lib/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/InlineCodeHighlight.d.ts

@@ -0,0 +1,18 @@
+import { BoxProps, ElementProps, Factory, StylesApiProps } from '@mantine/core';
+export type InlineCodeHighlightStylesNames = 'code';
+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.mts

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

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, CodeHighlightTabsCssVariables, } from './CodeHighlightTabs';
+export type { CodeHighlightFactory, CodeHighlightProps, CodeHighlightStylesNames, } from './CodeHighlight';
+export type { InlineCodeHighlightFactory, InlineCodeHighlightProps, InlineCodeHighlightStylesNames, } 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

@@ -1,6 +1,6 @@
 {
   "name": "@mantine/code-highlight",
-  "version": "7.13.5-alpha.1",
+  "version": "7.13.5-alpha.2",
   "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.13.5-alpha.1",
-    "@mantine/hooks": "7.13.5-alpha.1",
+    "@mantine/core": "7.13.5-alpha.2",
+    "@mantine/hooks": "7.13.5-alpha.2",
     "react": "^18.x || ^19.x",
     "react-dom": "^18.x || ^19.x"
   },