@tidbcloud/uikit 2.0.0-beta.65 → 2.0.0-beta.67

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @tidbcloud/uikit
 
+## 2.0.0-beta.67
+
+### Minor Changes
+
+- Re-export code-highlight
+
+## 2.0.0-beta.66
+
+### Patch Changes
+
+- fix MediaQuery type error
+
 ## 2.0.0-beta.65
 
 ### Patch Changes

package/dist/biz/CodeBlock/index.cjs

@@ -39,7 +39,7 @@ const CodeBlock = ({
   children,
   copyContent,
   onCopyClick,
-  codeHightlightProps,
+  codeHighlightProps,
   foldProps,
   ...rest
 }) => {
@@ -69,7 +69,7 @@ const CodeBlock = ({
         children: codeRender ? codeRender(children) : /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
           CodeHighlight.CodeHighlight,
           {
-            ...codeHightlightProps,
+            ...codeHighlightProps,
             withCopyButton: false,
             code: children,
             language,
@@ -89,7 +89,7 @@ const CodeBlock = ({
                 //   whiteSpace: 'pre-wrap'
                 // }
               },
-              codeHightlightProps == null ? void 0 : codeHightlightProps.styles
+              codeHighlightProps == null ? void 0 : codeHighlightProps.styles
             ])
           }
         )

package/dist/biz/CodeBlock/index.d.cts

@@ -7,7 +7,7 @@ export interface CodeBlockProps extends BoxProps {
     codeRender?: (content: string) => React.ReactNode;
     copyContent?: string;
     onCopyClick?: () => void;
-    codeHightlightProps?: Omit<CodeHighlightProps, 'language' | 'children'>;
+    codeHighlightProps?: Omit<CodeHighlightProps, 'language' | 'children' | 'code'>;
     foldProps?: {
         defaultHeight?: number;
         persistenceKey?: string;
@@ -15,7 +15,7 @@ export interface CodeBlockProps extends BoxProps {
         onIconClick?: (folded: boolean) => void;
     };
 }
-export declare const CodeBlock: ({ language, codeRender, children, copyContent, onCopyClick, codeHightlightProps, foldProps, ...rest }: React.PropsWithChildren<CodeBlockProps>) => import("react/jsx-runtime.js").JSX.Element;
+export declare const CodeBlock: ({ language, codeRender, children, copyContent, onCopyClick, codeHighlightProps, foldProps, ...rest }: React.PropsWithChildren<CodeBlockProps>) => import("react/jsx-runtime.js").JSX.Element;
 export interface CopyTextProps extends CodeProps {
     value: string;
 }

package/dist/biz/CodeBlock/index.d.ts

@@ -7,7 +7,7 @@ export interface CodeBlockProps extends BoxProps {
     codeRender?: (content: string) => React.ReactNode;
     copyContent?: string;
     onCopyClick?: () => void;
-    codeHightlightProps?: Omit<CodeHighlightProps, 'language' | 'children'>;
+    codeHighlightProps?: Omit<CodeHighlightProps, 'language' | 'children' | 'code'>;
     foldProps?: {
         defaultHeight?: number;
         persistenceKey?: string;
@@ -15,7 +15,7 @@ export interface CodeBlockProps extends BoxProps {
         onIconClick?: (folded: boolean) => void;
     };
 }
-export declare const CodeBlock: ({ language, codeRender, children, copyContent, onCopyClick, codeHightlightProps, foldProps, ...rest }: React.PropsWithChildren<CodeBlockProps>) => import("react/jsx-runtime.js").JSX.Element;
+export declare const CodeBlock: ({ language, codeRender, children, copyContent, onCopyClick, codeHighlightProps, foldProps, ...rest }: React.PropsWithChildren<CodeBlockProps>) => import("react/jsx-runtime.js").JSX.Element;
 export interface CopyTextProps extends CodeProps {
     value: string;
 }

package/dist/biz/CodeBlock/index.js

@@ -37,7 +37,7 @@ const CodeBlock = ({
   children,
   copyContent,
   onCopyClick,
-  codeHightlightProps,
+  codeHighlightProps,
   foldProps,
   ...rest
 }) => {
@@ -67,7 +67,7 @@ const CodeBlock = ({
         children: codeRender ? codeRender(children) : /* @__PURE__ */ jsxRuntimeExports.jsx(
           CodeHighlight,
           {
-            ...codeHightlightProps,
+            ...codeHighlightProps,
             withCopyButton: false,
             code: children,
             language,
@@ -87,7 +87,7 @@ const CodeBlock = ({
                 //   whiteSpace: 'pre-wrap'
                 // }
               },
-              codeHightlightProps == null ? void 0 : codeHightlightProps.styles
+              codeHighlightProps == null ? void 0 : codeHighlightProps.styles
             ])
           }
         )

package/dist/node_modules/.pnpm/@mantine_code-highlight@7.13.2_@mantine_core@7.13.2_patch_hash_v5k5cxye7xaihpcgowhgciky7a_@ma_tdwfyw6pqjurzjjnx3eualyu44/node_modules/@mantine/code-highlight/esm/CodeHighlightTabs.cjs

@@ -0,0 +1,172 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("../../../../../react@18.3.1/node_modules/react/jsx-runtime.cjs");
+const React = require("react");
+const clsx = require("clsx");
+const index = require("../../../../../highlight.js@11.10.0/node_modules/highlight.js/lib/index.cjs");
+const CopyIcon = require("./CopyIcon.cjs");
+const ExpandIcon = require("./ExpandIcon.cjs");
+const FileIcon = require("./FileIcon.cjs");
+const CodeHighlight_module_css = require("./CodeHighlight.module.css.cjs");
+const CodeHighlight_theme_module_css = require("./CodeHighlight.theme.module.css.cjs");
+const rem = require("../../../../../@mantine_core@7.13.2_patch_hash_v5k5cxye7xaihpcgowhgciky7a_@mantine_hooks@7.13.2_react@18.3.1_hlfamvk7n3o6ychyvm5cyru4yu/node_modules/@mantine/core/esm/core/utils/units-converters/rem.cjs");
+const factory = require("../../../../../@mantine_core@7.13.2_patch_hash_v5k5cxye7xaihpcgowhgciky7a_@mantine_hooks@7.13.2_react@18.3.1_hlfamvk7n3o6ychyvm5cyru4yu/node_modules/@mantine/core/esm/core/factory/factory.cjs");
+const useProps = require("../../../../../@mantine_core@7.13.2_patch_hash_v5k5cxye7xaihpcgowhgciky7a_@mantine_hooks@7.13.2_react@18.3.1_hlfamvk7n3o6ychyvm5cyru4yu/node_modules/@mantine/core/esm/core/MantineProvider/use-props/use-props.cjs");
+const useStyles = require("../../../../../@mantine_core@7.13.2_patch_hash_v5k5cxye7xaihpcgowhgciky7a_@mantine_hooks@7.13.2_react@18.3.1_hlfamvk7n3o6ychyvm5cyru4yu/node_modules/@mantine/core/esm/core/styles-api/use-styles/use-styles.cjs");
+const useUncontrolled = require("../../../../../@mantine_hooks@7.13.2_react@18.3.1/node_modules/@mantine/hooks/esm/use-uncontrolled/use-uncontrolled.cjs");
+const UnstyledButton = require("../../../../../@mantine_core@7.13.2_patch_hash_v5k5cxye7xaihpcgowhgciky7a_@mantine_hooks@7.13.2_react@18.3.1_hlfamvk7n3o6ychyvm5cyru4yu/node_modules/@mantine/core/esm/components/UnstyledButton/UnstyledButton.cjs");
+const Box = require("../../../../../@mantine_core@7.13.2_patch_hash_v5k5cxye7xaihpcgowhgciky7a_@mantine_hooks@7.13.2_react@18.3.1_hlfamvk7n3o6ychyvm5cyru4yu/node_modules/@mantine/core/esm/core/Box/Box.cjs");
+const ScrollArea = require("../../../../../@mantine_core@7.13.2_patch_hash_v5k5cxye7xaihpcgowhgciky7a_@mantine_hooks@7.13.2_react@18.3.1_hlfamvk7n3o6ychyvm5cyru4yu/node_modules/@mantine/core/esm/components/ScrollArea/ScrollArea.cjs");
+const Tooltip = require("../../../../../@mantine_core@7.13.2_patch_hash_v5k5cxye7xaihpcgowhgciky7a_@mantine_hooks@7.13.2_react@18.3.1_hlfamvk7n3o6ychyvm5cyru4yu/node_modules/@mantine/core/esm/components/Tooltip/Tooltip.cjs");
+const ActionIcon = require("../../../../../@mantine_core@7.13.2_patch_hash_v5k5cxye7xaihpcgowhgciky7a_@mantine_hooks@7.13.2_react@18.3.1_hlfamvk7n3o6ychyvm5cyru4yu/node_modules/@mantine/core/esm/components/ActionIcon/ActionIcon.cjs");
+const CopyButton = require("../../../../../@mantine_core@7.13.2_patch_hash_v5k5cxye7xaihpcgowhgciky7a_@mantine_hooks@7.13.2_react@18.3.1_hlfamvk7n3o6ychyvm5cyru4yu/node_modules/@mantine/core/esm/components/CopyButton/CopyButton.cjs");
+const createVarsResolver = require("../../../../../@mantine_core@7.13.2_patch_hash_v5k5cxye7xaihpcgowhgciky7a_@mantine_hooks@7.13.2_react@18.3.1_hlfamvk7n3o6ychyvm5cyru4yu/node_modules/@mantine/core/esm/core/styles-api/create-vars-resolver/create-vars-resolver.cjs");
+const classes = { ...CodeHighlight_module_css.default, root: clsx(CodeHighlight_module_css.default.root, CodeHighlight_theme_module_css.default.theme) };
+const defaultProps = {
+  withHeader: true,
+  copyLabel: "Copy code",
+  copiedLabel: "Copied",
+  maxCollapsedHeight: rem.rem("8rem"),
+  expandCodeLabel: "Expand code",
+  collapseCodeLabel: "Collapse code",
+  withCopyButton: true
+};
+const varsResolver = createVarsResolver.createVarsResolver((_, { maxCollapsedHeight }) => ({
+  root: { "--ch-max-collapsed-height": rem.rem(maxCollapsedHeight) }
+}));
+const CodeHighlightTabs = factory.factory((_props, ref) => {
+  const props = useProps.useProps("CodeHighlightTabs", defaultProps, _props);
+  const {
+    classNames,
+    className,
+    style,
+    styles,
+    unstyled,
+    vars,
+    children,
+    code,
+    defaultActiveTab,
+    activeTab,
+    onTabChange,
+    withHeader,
+    copiedLabel,
+    copyLabel,
+    getFileIcon,
+    maxCollapsedHeight,
+    expanded,
+    defaultExpanded,
+    onExpandedChange,
+    expandCodeLabel,
+    collapseCodeLabel,
+    withExpandButton,
+    withCopyButton,
+    mod,
+    ...others
+  } = props;
+  const getStyles = useStyles.useStyles({
+    name: "CodeHighlightTabs",
+    props,
+    classes,
+    className,
+    style,
+    classNames,
+    styles,
+    unstyled,
+    vars,
+    varsResolver
+  });
+  const [value, setValue] = useUncontrolled.useUncontrolled({
+    defaultValue: defaultActiveTab,
+    value: activeTab,
+    finalValue: 0,
+    onChange: onTabChange
+  });
+  const [_expanded, setExpanded] = useUncontrolled.useUncontrolled({
+    defaultValue: defaultExpanded,
+    value: expanded,
+    finalValue: true,
+    onChange: onExpandedChange
+  });
+  const nodes = Array.isArray(code) ? code : [code];
+  const currentCode = nodes[value];
+  const highlighted = index.default.highlight(currentCode.code.trim(), {
+    language: currentCode.language || "plaintext"
+  }).value;
+  const files = nodes.map((node, index2) => /* @__PURE__ */ React.createElement(
+    UnstyledButton.UnstyledButton,
+    {
+      ...getStyles("file"),
+      key: node.fileName,
+      mod: { active: index2 === value },
+      onClick: () => setValue(index2)
+    },
+    /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+      FileIcon.FileIcon,
+      {
+        fileIcon: node.icon,
+        getFileIcon,
+        fileName: node.fileName,
+        ...getStyles("fileIcon")
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("span", { children: node.fileName })
+  ));
+  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(
+    Box.Box,
+    {
+      ...getStyles("root"),
+      mod: [{ collapsed: !_expanded }, mod],
+      ref,
+      ...others,
+      dir: "ltr",
+      children: [
+        withHeader && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs("div", { ...getStyles("header"), children: [
+          /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(ScrollArea.ScrollArea, { type: "never", dir: "ltr", offsetScrollbars: false, children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("div", { ...getStyles("files"), children: files }) }),
+          /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs("div", { ...getStyles("controls"), children: [
+            withExpandButton && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+              Tooltip.Tooltip,
+              {
+                label: _expanded ? collapseCodeLabel : expandCodeLabel,
+                fz: "sm",
+                position: "left",
+                children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+                  ActionIcon.ActionIcon,
+                  {
+                    onClick: () => setExpanded(!_expanded),
+                    variant: "none",
+                    "aria-label": _expanded ? collapseCodeLabel : expandCodeLabel,
+                    ...getStyles("control"),
+                    children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(ExpandIcon.ExpandIcon, { expanded: _expanded })
+                  }
+                )
+              }
+            ),
+            withCopyButton && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(CopyButton.CopyButton, { value: currentCode.code.trim(), children: ({ copied, copy }) => /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Tooltip.Tooltip, { label: copied ? copiedLabel : copyLabel, fz: "sm", position: "left", children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+              ActionIcon.ActionIcon,
+              {
+                onClick: copy,
+                variant: "none",
+                ...getStyles("control"),
+                "aria-label": copied ? copiedLabel : copyLabel,
+                children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(CopyIcon.CopyIcon, { copied })
+              }
+            ) }) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(ScrollArea.ScrollArea, { type: "auto", dir: "ltr", offsetScrollbars: false, children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Box.Box, { ...getStyles("codeWrapper"), mod: { expanded: _expanded }, children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("pre", { ...getStyles("pre"), children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("code", { ...getStyles("code"), dangerouslySetInnerHTML: { __html: highlighted } }) }) }) }),
+        /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+          UnstyledButton.UnstyledButton,
+          {
+            ...getStyles("showCodeButton"),
+            mod: { hidden: _expanded },
+            onClick: () => setExpanded(true),
+            children: expandCodeLabel
+          }
+        )
+      ]
+    }
+  );
+});
+CodeHighlightTabs.displayName = "@mantine/core/CodeHighlightTabs";
+CodeHighlightTabs.classes = classes;
+exports.CodeHighlightTabs = CodeHighlightTabs;

package/dist/node_modules/.pnpm/@mantine_code-highlight@7.13.2_@mantine_core@7.13.2_patch_hash_v5k5cxye7xaihpcgowhgciky7a_@ma_tdwfyw6pqjurzjjnx3eualyu44/node_modules/@mantine/code-highlight/esm/CodeHighlightTabs.js

@@ -0,0 +1,172 @@
+import { j as jsxRuntimeExports } from "../../../../../react@18.3.1/node_modules/react/jsx-runtime.js";
+import { createElement } from "react";
+import clsx from "clsx";
+import HighlightJS from "../../../../../highlight.js@11.10.0/node_modules/highlight.js/lib/index.js";
+import { CopyIcon } from "./CopyIcon.js";
+import { ExpandIcon } from "./ExpandIcon.js";
+import { FileIcon } from "./FileIcon.js";
+import _classes from "./CodeHighlight.module.css.js";
+import themeClasses from "./CodeHighlight.theme.module.css.js";
+import { rem } from "../../../../../@mantine_core@7.13.2_patch_hash_v5k5cxye7xaihpcgowhgciky7a_@mantine_hooks@7.13.2_react@18.3.1_hlfamvk7n3o6ychyvm5cyru4yu/node_modules/@mantine/core/esm/core/utils/units-converters/rem.js";
+import { factory } from "../../../../../@mantine_core@7.13.2_patch_hash_v5k5cxye7xaihpcgowhgciky7a_@mantine_hooks@7.13.2_react@18.3.1_hlfamvk7n3o6ychyvm5cyru4yu/node_modules/@mantine/core/esm/core/factory/factory.js";
+import { useProps } from "../../../../../@mantine_core@7.13.2_patch_hash_v5k5cxye7xaihpcgowhgciky7a_@mantine_hooks@7.13.2_react@18.3.1_hlfamvk7n3o6ychyvm5cyru4yu/node_modules/@mantine/core/esm/core/MantineProvider/use-props/use-props.js";
+import { useStyles } from "../../../../../@mantine_core@7.13.2_patch_hash_v5k5cxye7xaihpcgowhgciky7a_@mantine_hooks@7.13.2_react@18.3.1_hlfamvk7n3o6ychyvm5cyru4yu/node_modules/@mantine/core/esm/core/styles-api/use-styles/use-styles.js";
+import { useUncontrolled } from "../../../../../@mantine_hooks@7.13.2_react@18.3.1/node_modules/@mantine/hooks/esm/use-uncontrolled/use-uncontrolled.js";
+import { UnstyledButton } from "../../../../../@mantine_core@7.13.2_patch_hash_v5k5cxye7xaihpcgowhgciky7a_@mantine_hooks@7.13.2_react@18.3.1_hlfamvk7n3o6ychyvm5cyru4yu/node_modules/@mantine/core/esm/components/UnstyledButton/UnstyledButton.js";
+import { Box } from "../../../../../@mantine_core@7.13.2_patch_hash_v5k5cxye7xaihpcgowhgciky7a_@mantine_hooks@7.13.2_react@18.3.1_hlfamvk7n3o6ychyvm5cyru4yu/node_modules/@mantine/core/esm/core/Box/Box.js";
+import { ScrollArea } from "../../../../../@mantine_core@7.13.2_patch_hash_v5k5cxye7xaihpcgowhgciky7a_@mantine_hooks@7.13.2_react@18.3.1_hlfamvk7n3o6ychyvm5cyru4yu/node_modules/@mantine/core/esm/components/ScrollArea/ScrollArea.js";
+import { Tooltip } from "../../../../../@mantine_core@7.13.2_patch_hash_v5k5cxye7xaihpcgowhgciky7a_@mantine_hooks@7.13.2_react@18.3.1_hlfamvk7n3o6ychyvm5cyru4yu/node_modules/@mantine/core/esm/components/Tooltip/Tooltip.js";
+import { ActionIcon } from "../../../../../@mantine_core@7.13.2_patch_hash_v5k5cxye7xaihpcgowhgciky7a_@mantine_hooks@7.13.2_react@18.3.1_hlfamvk7n3o6ychyvm5cyru4yu/node_modules/@mantine/core/esm/components/ActionIcon/ActionIcon.js";
+import { CopyButton } from "../../../../../@mantine_core@7.13.2_patch_hash_v5k5cxye7xaihpcgowhgciky7a_@mantine_hooks@7.13.2_react@18.3.1_hlfamvk7n3o6ychyvm5cyru4yu/node_modules/@mantine/core/esm/components/CopyButton/CopyButton.js";
+import { createVarsResolver } from "../../../../../@mantine_core@7.13.2_patch_hash_v5k5cxye7xaihpcgowhgciky7a_@mantine_hooks@7.13.2_react@18.3.1_hlfamvk7n3o6ychyvm5cyru4yu/node_modules/@mantine/core/esm/core/styles-api/create-vars-resolver/create-vars-resolver.js";
+const classes = { ..._classes, root: clsx(_classes.root, themeClasses.theme) };
+const defaultProps = {
+  withHeader: true,
+  copyLabel: "Copy code",
+  copiedLabel: "Copied",
+  maxCollapsedHeight: rem("8rem"),
+  expandCodeLabel: "Expand code",
+  collapseCodeLabel: "Collapse code",
+  withCopyButton: true
+};
+const varsResolver = createVarsResolver((_, { maxCollapsedHeight }) => ({
+  root: { "--ch-max-collapsed-height": rem(maxCollapsedHeight) }
+}));
+const CodeHighlightTabs = factory((_props, ref) => {
+  const props = useProps("CodeHighlightTabs", defaultProps, _props);
+  const {
+    classNames,
+    className,
+    style,
+    styles,
+    unstyled,
+    vars,
+    children,
+    code,
+    defaultActiveTab,
+    activeTab,
+    onTabChange,
+    withHeader,
+    copiedLabel,
+    copyLabel,
+    getFileIcon,
+    maxCollapsedHeight,
+    expanded,
+    defaultExpanded,
+    onExpandedChange,
+    expandCodeLabel,
+    collapseCodeLabel,
+    withExpandButton,
+    withCopyButton,
+    mod,
+    ...others
+  } = props;
+  const getStyles = useStyles({
+    name: "CodeHighlightTabs",
+    props,
+    classes,
+    className,
+    style,
+    classNames,
+    styles,
+    unstyled,
+    vars,
+    varsResolver
+  });
+  const [value, setValue] = useUncontrolled({
+    defaultValue: defaultActiveTab,
+    value: activeTab,
+    finalValue: 0,
+    onChange: onTabChange
+  });
+  const [_expanded, setExpanded] = useUncontrolled({
+    defaultValue: defaultExpanded,
+    value: expanded,
+    finalValue: true,
+    onChange: onExpandedChange
+  });
+  const nodes = Array.isArray(code) ? code : [code];
+  const currentCode = nodes[value];
+  const highlighted = HighlightJS.highlight(currentCode.code.trim(), {
+    language: currentCode.language || "plaintext"
+  }).value;
+  const files = nodes.map((node, index) => /* @__PURE__ */ createElement(
+    UnstyledButton,
+    {
+      ...getStyles("file"),
+      key: node.fileName,
+      mod: { active: index === value },
+      onClick: () => setValue(index)
+    },
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      FileIcon,
+      {
+        fileIcon: node.icon,
+        getFileIcon,
+        fileName: node.fileName,
+        ...getStyles("fileIcon")
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: node.fileName })
+  ));
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    Box,
+    {
+      ...getStyles("root"),
+      mod: [{ collapsed: !_expanded }, mod],
+      ref,
+      ...others,
+      dir: "ltr",
+      children: [
+        withHeader && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { ...getStyles("header"), children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(ScrollArea, { type: "never", dir: "ltr", offsetScrollbars: false, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ...getStyles("files"), children: files }) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { ...getStyles("controls"), children: [
+            withExpandButton && /* @__PURE__ */ jsxRuntimeExports.jsx(
+              Tooltip,
+              {
+                label: _expanded ? collapseCodeLabel : expandCodeLabel,
+                fz: "sm",
+                position: "left",
+                children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  ActionIcon,
+                  {
+                    onClick: () => setExpanded(!_expanded),
+                    variant: "none",
+                    "aria-label": _expanded ? collapseCodeLabel : expandCodeLabel,
+                    ...getStyles("control"),
+                    children: /* @__PURE__ */ jsxRuntimeExports.jsx(ExpandIcon, { expanded: _expanded })
+                  }
+                )
+              }
+            ),
+            withCopyButton && /* @__PURE__ */ jsxRuntimeExports.jsx(CopyButton, { value: currentCode.code.trim(), children: ({ copied, copy }) => /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip, { label: copied ? copiedLabel : copyLabel, fz: "sm", position: "left", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+              ActionIcon,
+              {
+                onClick: copy,
+                variant: "none",
+                ...getStyles("control"),
+                "aria-label": copied ? copiedLabel : copyLabel,
+                children: /* @__PURE__ */ jsxRuntimeExports.jsx(CopyIcon, { copied })
+              }
+            ) }) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(ScrollArea, { type: "auto", dir: "ltr", offsetScrollbars: false, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { ...getStyles("codeWrapper"), mod: { expanded: _expanded }, children: /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { ...getStyles("pre"), children: /* @__PURE__ */ jsxRuntimeExports.jsx("code", { ...getStyles("code"), dangerouslySetInnerHTML: { __html: highlighted } }) }) }) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          UnstyledButton,
+          {
+            ...getStyles("showCodeButton"),
+            mod: { hidden: _expanded },
+            onClick: () => setExpanded(true),
+            children: expandCodeLabel
+          }
+        )
+      ]
+    }
+  );
+});
+CodeHighlightTabs.displayName = "@mantine/core/CodeHighlightTabs";
+CodeHighlightTabs.classes = classes;
+export {
+  CodeHighlightTabs
+};

package/dist/node_modules/.pnpm/@mantine_code-highlight@7.13.2_@mantine_core@7.13.2_patch_hash_v5k5cxye7xaihpcgowhgciky7a_@ma_tdwfyw6pqjurzjjnx3eualyu44/node_modules/@mantine/code-highlight/esm/ExpandIcon.cjs

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("../../../../../react@18.3.1/node_modules/react/jsx-runtime.cjs");
+const rem = require("../../../../../@mantine_core@7.13.2_patch_hash_v5k5cxye7xaihpcgowhgciky7a_@mantine_hooks@7.13.2_react@18.3.1_hlfamvk7n3o6ychyvm5cyru4yu/node_modules/@mantine/core/esm/core/utils/units-converters/rem.cjs");
+function ExpandIcon({ expanded, style, ...others }) {
+  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      style: { width: rem.rem(18), height: rem.rem(18), ...style },
+      viewBox: "0 0 24 24",
+      strokeWidth: "2",
+      stroke: "currentColor",
+      fill: "none",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      ...others,
+      children: expanded ? /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(jsxRuntime.jsxRuntimeExports.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }),
+        /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("path", { d: "M12 13v-8l-3 3m6 0l-3 -3" }),
+        /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("path", { d: "M9 17l1 0" }),
+        /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("path", { d: "M14 17l1 0" }),
+        /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("path", { d: "M19 17l1 0" }),
+        /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("path", { d: "M4 17l1 0" })
+      ] }) : /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(jsxRuntime.jsxRuntimeExports.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }),
+        /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("path", { d: "M12 11v8l3 -3m-6 0l3 3" }),
+        /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("path", { d: "M9 7l1 0" }),
+        /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("path", { d: "M14 7l1 0" }),
+        /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("path", { d: "M19 7l1 0" }),
+        /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("path", { d: "M4 7l1 0" })
+      ] })
+    }
+  );
+}
+exports.ExpandIcon = ExpandIcon;

package/dist/node_modules/.pnpm/@mantine_code-highlight@7.13.2_@mantine_core@7.13.2_patch_hash_v5k5cxye7xaihpcgowhgciky7a_@ma_tdwfyw6pqjurzjjnx3eualyu44/node_modules/@mantine/code-highlight/esm/ExpandIcon.js

@@ -0,0 +1,36 @@
+import { j as jsxRuntimeExports } from "../../../../../react@18.3.1/node_modules/react/jsx-runtime.js";
+import { rem } from "../../../../../@mantine_core@7.13.2_patch_hash_v5k5cxye7xaihpcgowhgciky7a_@mantine_hooks@7.13.2_react@18.3.1_hlfamvk7n3o6ychyvm5cyru4yu/node_modules/@mantine/core/esm/core/utils/units-converters/rem.js";
+function ExpandIcon({ expanded, style, ...others }) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      style: { width: rem(18), height: rem(18), ...style },
+      viewBox: "0 0 24 24",
+      strokeWidth: "2",
+      stroke: "currentColor",
+      fill: "none",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      ...others,
+      children: expanded ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M12 13v-8l-3 3m6 0l-3 -3" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M9 17l1 0" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M14 17l1 0" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M19 17l1 0" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M4 17l1 0" })
+      ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M12 11v8l3 -3m-6 0l3 3" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M9 7l1 0" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M14 7l1 0" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M19 7l1 0" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M4 7l1 0" })
+      ] })
+    }
+  );
+}
+export {
+  ExpandIcon
+};

package/dist/node_modules/.pnpm/@mantine_code-highlight@7.13.2_@mantine_core@7.13.2_patch_hash_v5k5cxye7xaihpcgowhgciky7a_@ma_tdwfyw6pqjurzjjnx3eualyu44/node_modules/@mantine/code-highlight/esm/FileIcon.cjs

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("../../../../../react@18.3.1/node_modules/react/jsx-runtime.cjs");
+function FileIcon({ fileIcon, fileName, getFileIcon, className, style }) {
+  if (fileIcon) {
+    return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("span", { className, style, children: fileIcon });
+  }
+  if (getFileIcon && fileName) {
+    return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("span", { className, style, children: getFileIcon(fileName) });
+  }
+  return null;
+}
+exports.FileIcon = FileIcon;

package/dist/node_modules/.pnpm/@mantine_code-highlight@7.13.2_@mantine_core@7.13.2_patch_hash_v5k5cxye7xaihpcgowhgciky7a_@ma_tdwfyw6pqjurzjjnx3eualyu44/node_modules/@mantine/code-highlight/esm/FileIcon.js

@@ -0,0 +1,13 @@
+import { j as jsxRuntimeExports } from "../../../../../react@18.3.1/node_modules/react/jsx-runtime.js";
+function FileIcon({ fileIcon, fileName, getFileIcon, className, style }) {
+  if (fileIcon) {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className, style, children: fileIcon });
+  }
+  if (getFileIcon && fileName) {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className, style, children: getFileIcon(fileName) });
+  }
+  return null;
+}
+export {
+  FileIcon
+};

package/dist/primitive/MediaQuery/index.cjs

@@ -8,7 +8,7 @@ function MediaQuery(props) {
   const { children, smallerThan, largerThan, query, styles: styles$1, className } = useProps.useProps("MediaQuery", {}, props);
   const { classes, cx } = styles.default({ smallerThan, largerThan, query, styles: styles$1 });
   if (children === void 0) {
-    return void 0;
+    return null;
   }
   const child = React.Children.only(children);
   if (typeof child === "object" && child !== null && "props" in child) {

package/dist/primitive/MediaQuery/index.d.cts

@@ -15,4 +15,4 @@ export interface MediaQueryProps {
     /** Styles applied to child when breakpoint matches */
     styles: CSSObject | ((theme: MantineTheme) => CSSObject);
 }
-export declare function MediaQuery(props: MediaQueryProps): string | number | boolean | Iterable<React.ReactNode> | React.ReactElement<any, string | React.JSXElementConstructor<any>> | null | undefined;
+export declare function MediaQuery(props: MediaQueryProps): React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;

package/dist/primitive/MediaQuery/index.d.ts

@@ -15,4 +15,4 @@ export interface MediaQueryProps {
     /** Styles applied to child when breakpoint matches */
     styles: CSSObject | ((theme: MantineTheme) => CSSObject);
 }
-export declare function MediaQuery(props: MediaQueryProps): string | number | boolean | Iterable<React.ReactNode> | React.ReactElement<any, string | React.JSXElementConstructor<any>> | null | undefined;
+export declare function MediaQuery(props: MediaQueryProps): React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;

package/dist/primitive/MediaQuery/index.js

@@ -6,7 +6,7 @@ function MediaQuery(props) {
   const { children, smallerThan, largerThan, query, styles, className } = useProps("MediaQuery", {}, props);
   const { classes, cx } = useStyles({ smallerThan, largerThan, query, styles });
   if (children === void 0) {
-    return void 0;
+    return null;
   }
   const child = Children.only(children);
   if (typeof child === "object" && child !== null && "props" in child) {

package/dist/primitive/index.cjs

@@ -132,6 +132,8 @@ const Calendar = require("../node_modules/.pnpm/@mantine_dates@7.13.2_@mantine_c
 const Month = require("../node_modules/.pnpm/@mantine_dates@7.13.2_@mantine_core@7.13.2_patch_hash_v5k5cxye7xaihpcgowhgciky7a_@mantine_hoo_fqvtf6tg4qjwkxanualzufe6zy/node_modules/@mantine/dates/esm/components/Month/Month.cjs");
 const TimeInput = require("../node_modules/.pnpm/@mantine_dates@7.13.2_@mantine_core@7.13.2_patch_hash_v5k5cxye7xaihpcgowhgciky7a_@mantine_hoo_fqvtf6tg4qjwkxanualzufe6zy/node_modules/@mantine/dates/esm/components/TimeInput/TimeInput.cjs");
 const TextInput = require("./TextInput/TextInput.cjs");
+const CodeHighlight = require("../node_modules/.pnpm/@mantine_code-highlight@7.13.2_@mantine_core@7.13.2_patch_hash_v5k5cxye7xaihpcgowhgciky7a_@ma_tdwfyw6pqjurzjjnx3eualyu44/node_modules/@mantine/code-highlight/esm/CodeHighlight.cjs");
+const CodeHighlightTabs = require("../node_modules/.pnpm/@mantine_code-highlight@7.13.2_@mantine_core@7.13.2_patch_hash_v5k5cxye7xaihpcgowhgciky7a_@ma_tdwfyw6pqjurzjjnx3eualyu44/node_modules/@mantine/code-highlight/esm/CodeHighlightTabs.cjs");
 exports.useColorScheme = useColorScheme.useColorScheme;
 exports.Dropzone = index.Dropzone;
 exports.notifier = index$1.notifier;
@@ -269,3 +271,5 @@ exports.Calendar = Calendar.Calendar;
 exports.Month = Month.Month;
 exports.TimeInput = TimeInput.TimeInput;
 exports.TextInput = TextInput.TextInput;
+exports.CodeHighlight = CodeHighlight.CodeHighlight;
+exports.CodeHighlightTabs = CodeHighlightTabs.CodeHighlightTabs;

package/dist/primitive/index.d.cts

@@ -44,3 +44,5 @@ export { TextInput, type TextInputProps } from './TextInput/index.js';
 export { notifier } from './notifier/index.js';
 export { Typography, TYPOGRAPHY_STYLES_MAP, type TypographyProps } from './Typography/index.js';
 export { MediaQuery, type MediaQueryProps } from './MediaQuery/index.js';
+export { CodeHighlight, CodeHighlightTabs } from '@mantine/code-highlight';
+export type { CodeHighlightProps, CodeHighlightTabsProps } from '@mantine/code-highlight';

package/dist/primitive/index.d.ts

@@ -44,3 +44,5 @@ export { TextInput, type TextInputProps } from './TextInput/index.js';
 export { notifier } from './notifier/index.js';
 export { Typography, TYPOGRAPHY_STYLES_MAP, type TypographyProps } from './Typography/index.js';
 export { MediaQuery, type MediaQueryProps } from './MediaQuery/index.js';
+export { CodeHighlight, CodeHighlightTabs } from '@mantine/code-highlight';
+export type { CodeHighlightProps, CodeHighlightTabsProps } from '@mantine/code-highlight';

package/dist/primitive/index.js

@@ -130,6 +130,8 @@ import { Calendar } from "../node_modules/.pnpm/@mantine_dates@7.13.2_@mantine_c
 import { Month } from "../node_modules/.pnpm/@mantine_dates@7.13.2_@mantine_core@7.13.2_patch_hash_v5k5cxye7xaihpcgowhgciky7a_@mantine_hoo_fqvtf6tg4qjwkxanualzufe6zy/node_modules/@mantine/dates/esm/components/Month/Month.js";
 import { TimeInput } from "../node_modules/.pnpm/@mantine_dates@7.13.2_@mantine_core@7.13.2_patch_hash_v5k5cxye7xaihpcgowhgciky7a_@mantine_hoo_fqvtf6tg4qjwkxanualzufe6zy/node_modules/@mantine/dates/esm/components/TimeInput/TimeInput.js";
 import { TextInput } from "./TextInput/TextInput.js";
+import { CodeHighlight } from "../node_modules/.pnpm/@mantine_code-highlight@7.13.2_@mantine_core@7.13.2_patch_hash_v5k5cxye7xaihpcgowhgciky7a_@ma_tdwfyw6pqjurzjjnx3eualyu44/node_modules/@mantine/code-highlight/esm/CodeHighlight.js";
+import { CodeHighlightTabs } from "../node_modules/.pnpm/@mantine_code-highlight@7.13.2_@mantine_core@7.13.2_patch_hash_v5k5cxye7xaihpcgowhgciky7a_@ma_tdwfyw6pqjurzjjnx3eualyu44/node_modules/@mantine/code-highlight/esm/CodeHighlightTabs.js";
 export {
   Accordion,
   ActionIcon,
@@ -156,6 +158,8 @@ export {
   Chip,
   CloseButton,
   Code,
+  CodeHighlight,
+  CodeHighlightTabs,
   Collapse,
   ColorInput,
   ColorPicker,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tidbcloud/uikit",
-  "version": "2.0.0-beta.65",
+  "version": "2.0.0-beta.67",
   "description": "tidbcloud uikit",
   "type": "module",
   "main": "dist/primitive/index.cjs",