@lobehub/ui 3.4.2 → 3.4.3

package/es/Highlighter/SyntaxHighlighter/index.mjs

@@ -0,0 +1,72 @@
+'use client';
+
+import StaticRenderer_default from "./StaticRenderer.mjs";
+import { useStyles } from "./style.mjs";
+import StreamRenderer_default from "./StreamRenderer.mjs";
+import { memo, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+
+//#region src/Highlighter/SyntaxHighlighter/index.tsx
+const SyntaxHighlighter = memo(({ animated, children, className, enableTransformer, language, style, theme, variant = "borderless" }) => {
+	const { styles, cx } = useStyles();
+	const isDefaultTheme = theme === "lobe-theme" || !theme;
+	const showBackground = !isDefaultTheme && variant === "filled";
+	const resolvedTheme = isDefaultTheme ? void 0 : theme;
+	const variants = useMemo(() => cva(styles.root, {
+		defaultVariants: {
+			shiki: true,
+			showBackground: false,
+			variant: "borderless"
+		},
+		variants: {
+			shiki: {
+				false: styles.unshiki,
+				true: styles.shiki
+			},
+			variant: {
+				filled: styles.padding,
+				outlined: styles.padding,
+				borderless: styles.noPadding
+			},
+			showBackground: {
+				false: styles.noBackground,
+				true: null
+			}
+		}
+	}), [styles]);
+	const shikiClassName = cx(variants({
+		shiki: true,
+		showBackground,
+		variant
+	}), className);
+	const fallbackClassName = cx(variants({
+		shiki: false,
+		showBackground,
+		variant
+	}), className);
+	if (animated) return /* @__PURE__ */ jsx(StreamRenderer_default, {
+		className: shikiClassName,
+		enableTransformer,
+		fallbackClassName,
+		language,
+		style,
+		theme: resolvedTheme,
+		children
+	});
+	return /* @__PURE__ */ jsx(StaticRenderer_default, {
+		className: shikiClassName,
+		enableTransformer,
+		fallbackClassName,
+		language,
+		style,
+		theme: resolvedTheme,
+		children
+	});
+}, (prevProps, nextProps) => prevProps.children === nextProps.children && prevProps.language === nextProps.language);
+SyntaxHighlighter.displayName = "SyntaxHighlighter";
+var SyntaxHighlighter_default = SyntaxHighlighter;
+
+//#endregion
+export { SyntaxHighlighter_default as default };
+//# sourceMappingURL=index.mjs.map

package/es/Highlighter/SyntaxHighlighter/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":["StreamRenderer","StaticRenderer"],"sources":["../../../src/Highlighter/SyntaxHighlighter/index.tsx"],"sourcesContent":["'use client';\n\nimport { cva } from 'class-variance-authority';\nimport { memo, useMemo } from 'react';\n\nimport type { SyntaxHighlighterProps } from '../type';\nimport StaticRenderer from './StaticRenderer';\nimport StreamRenderer from './StreamRenderer';\nimport { useStyles } from './style';\n\nconst SyntaxHighlighter = memo<SyntaxHighlighterProps>(\n  ({\n    animated,\n    children,\n    className,\n    enableTransformer,\n    language,\n    style,\n    theme,\n    variant = 'borderless',\n  }) => {\n    const { styles, cx } = useStyles();\n    const isDefaultTheme = theme === 'lobe-theme' || !theme;\n    const showBackground = !isDefaultTheme && variant === 'filled';\n    const resolvedTheme = isDefaultTheme ? undefined : theme;\n\n    const variants = useMemo(\n      () =>\n        cva(styles.root, {\n          defaultVariants: {\n            shiki: true,\n            showBackground: false,\n            variant: 'borderless',\n          },\n          /* eslint-disable sort-keys-fix/sort-keys-fix */\n          variants: {\n            shiki: {\n              false: styles.unshiki,\n              true: styles.shiki,\n            },\n            variant: {\n              filled: styles.padding,\n              outlined: styles.padding,\n              borderless: styles.noPadding,\n            },\n            showBackground: {\n              false: styles.noBackground,\n              true: null,\n            },\n          },\n          /* eslint-enable sort-keys-fix/sort-keys-fix */\n        }),\n      [styles],\n    );\n\n    const shikiClassName = cx(variants({ shiki: true, showBackground, variant }), className);\n    const fallbackClassName = cx(variants({ shiki: false, showBackground, variant }), className);\n\n    if (animated) {\n      return (\n        <StreamRenderer\n          className={shikiClassName}\n          enableTransformer={enableTransformer}\n          fallbackClassName={fallbackClassName}\n          language={language}\n          style={style}\n          theme={resolvedTheme}\n        >\n          {children}\n        </StreamRenderer>\n      );\n    }\n\n    return (\n      <StaticRenderer\n        className={shikiClassName}\n        enableTransformer={enableTransformer}\n        fallbackClassName={fallbackClassName}\n        language={language}\n        style={style}\n        theme={resolvedTheme}\n      >\n        {children}\n      </StaticRenderer>\n    );\n  },\n  (prevProps, nextProps) =>\n    prevProps.children === nextProps.children && prevProps.language === nextProps.language,\n);\n\nSyntaxHighlighter.displayName = 'SyntaxHighlighter';\n\nexport default SyntaxHighlighter;\n"],"mappings":";;;;;;;;;;AAUA,MAAM,oBAAoB,MACvB,EACC,UACA,UACA,WACA,mBACA,UACA,OACA,OACA,UAAU,mBACN;CACJ,MAAM,EAAE,QAAQ,OAAO,WAAW;CAClC,MAAM,iBAAiB,UAAU,gBAAgB,CAAC;CAClD,MAAM,iBAAiB,CAAC,kBAAkB,YAAY;CACtD,MAAM,gBAAgB,iBAAiB,SAAY;CAEnD,MAAM,WAAW,cAEb,IAAI,OAAO,MAAM;EACf,iBAAiB;GACf,OAAO;GACP,gBAAgB;GAChB,SAAS;GACV;EAED,UAAU;GACR,OAAO;IACL,OAAO,OAAO;IACd,MAAM,OAAO;IACd;GACD,SAAS;IACP,QAAQ,OAAO;IACf,UAAU,OAAO;IACjB,YAAY,OAAO;IACpB;GACD,gBAAgB;IACd,OAAO,OAAO;IACd,MAAM;IACP;GACF;EAEF,CAAC,EACJ,CAAC,OAAO,CACT;CAED,MAAM,iBAAiB,GAAG,SAAS;EAAE,OAAO;EAAM;EAAgB;EAAS,CAAC,EAAE,UAAU;CACxF,MAAM,oBAAoB,GAAG,SAAS;EAAE,OAAO;EAAO;EAAgB;EAAS,CAAC,EAAE,UAAU;AAE5F,KAAI,SACF,QACE,oBAACA;EACC,WAAW;EACQ;EACA;EACT;EACH;EACP,OAAO;EAEN;GACc;AAIrB,QACE,oBAACC;EACC,WAAW;EACQ;EACA;EACT;EACH;EACP,OAAO;EAEN;GACc;IAGpB,WAAW,cACV,UAAU,aAAa,UAAU,YAAY,UAAU,aAAa,UAAU,SACjF;AAED,kBAAkB,cAAc;AAEhC,gCAAe"}

package/es/Highlighter/SyntaxHighlighter/style.mjs

@@ -0,0 +1,117 @@
+import { createStyles } from "antd-style";
+
+//#region src/Highlighter/SyntaxHighlighter/style.ts
+const useStyles = createStyles(({ css: css$1, token, cx: cx$1, prefixCls }) => {
+	return {
+		noBackground: css$1`
+      pre {
+        background: transparent !important;
+      }
+    `,
+		noPadding: css$1`
+      pre {
+        padding: 0;
+      }
+    `,
+		padding: css$1`
+      pre {
+        padding: 16px;
+      }
+    `,
+		root: css$1`
+      direction: ltr;
+      margin: 0;
+      padding: 0;
+      text-align: start;
+
+      pre {
+        overflow-x: auto;
+        margin: 0;
+        padding: 0;
+      }
+    `,
+		shiki: cx$1(`${prefixCls}-highlighter-shiki`, css$1`
+        pre {
+          code {
+            display: block;
+
+            .line {
+              display: inline-block;
+
+              width: calc(100% + 32px);
+              margin-block: 0;
+              margin-inline: -16px;
+              padding-block: 0;
+              padding-inline: 16px;
+            }
+          }
+
+          &.has-focused {
+            .line:not(.focused) {
+              opacity: 0.5;
+            }
+          }
+
+          .highlighted {
+            background: ${token.colorFillTertiary};
+
+            &.warning {
+              background: ${token.colorWarningBg};
+            }
+
+            &.error {
+              background: ${token.colorErrorBg};
+            }
+          }
+
+          .highlighted-word {
+            padding-block: 0.1em;
+            padding-inline: 0.2em;
+            border: 1px solid ${token.colorBorderSecondary};
+            border-radius: ${token.borderRadius}px;
+
+            background: ${token.colorFillTertiary};
+          }
+
+          .diff {
+            &.remove {
+              background: ${token.colorErrorBg};
+
+              &::before {
+                content: '-';
+
+                position: absolute;
+                inset-inline-start: 4px;
+
+                display: inline-block;
+
+                color: ${token.colorErrorText};
+              }
+            }
+
+            &.add {
+              background: ${token.colorSuccessBg};
+
+              &::before {
+                content: '+';
+
+                position: absolute;
+                inset-inline-start: 4px;
+
+                display: inline-block;
+
+                color: ${token.colorSuccessText};
+              }
+            }
+          }
+        }
+      `),
+		unshiki: css$1`
+      color: ${token.colorTextDescription};
+    `
+	};
+});
+
+//#endregion
+export { useStyles };
+//# sourceMappingURL=style.mjs.map

package/es/Highlighter/SyntaxHighlighter/style.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":["cx"],"sources":["../../../src/Highlighter/SyntaxHighlighter/style.ts"],"sourcesContent":["import { createStyles } from 'antd-style';\n\nexport const useStyles = createStyles(({ css, token, cx, prefixCls }) => {\n  return {\n    noBackground: css`\n      pre {\n        background: transparent !important;\n      }\n    `,\n\n    noPadding: css`\n      pre {\n        padding: 0;\n      }\n    `,\n\n    padding: css`\n      pre {\n        padding: 16px;\n      }\n    `,\n    root: css`\n      direction: ltr;\n      margin: 0;\n      padding: 0;\n      text-align: start;\n\n      pre {\n        overflow-x: auto;\n        margin: 0;\n        padding: 0;\n      }\n    `,\n    shiki: cx(\n      `${prefixCls}-highlighter-shiki`,\n      css`\n        pre {\n          code {\n            display: block;\n\n            .line {\n              display: inline-block;\n\n              width: calc(100% + 32px);\n              margin-block: 0;\n              margin-inline: -16px;\n              padding-block: 0;\n              padding-inline: 16px;\n            }\n          }\n\n          &.has-focused {\n            .line:not(.focused) {\n              opacity: 0.5;\n            }\n          }\n\n          .highlighted {\n            background: ${token.colorFillTertiary};\n\n            &.warning {\n              background: ${token.colorWarningBg};\n            }\n\n            &.error {\n              background: ${token.colorErrorBg};\n            }\n          }\n\n          .highlighted-word {\n            padding-block: 0.1em;\n            padding-inline: 0.2em;\n            border: 1px solid ${token.colorBorderSecondary};\n            border-radius: ${token.borderRadius}px;\n\n            background: ${token.colorFillTertiary};\n          }\n\n          .diff {\n            &.remove {\n              background: ${token.colorErrorBg};\n\n              &::before {\n                content: '-';\n\n                position: absolute;\n                inset-inline-start: 4px;\n\n                display: inline-block;\n\n                color: ${token.colorErrorText};\n              }\n            }\n\n            &.add {\n              background: ${token.colorSuccessBg};\n\n              &::before {\n                content: '+';\n\n                position: absolute;\n                inset-inline-start: 4px;\n\n                display: inline-block;\n\n                color: ${token.colorSuccessText};\n              }\n            }\n          }\n        }\n      `,\n    ),\n    unshiki: css`\n      color: ${token.colorTextDescription};\n    `,\n  };\n});\n"],"mappings":";;;AAEA,MAAa,YAAY,cAAc,EAAE,YAAK,OAAO,UAAI,gBAAgB;AACvE,QAAO;EACL,cAAc,KAAG;;;;;EAMjB,WAAW,KAAG;;;;;EAMd,SAAS,KAAG;;;;;EAKZ,MAAM,KAAG;;;;;;;;;;;;EAYT,OAAOA,KACL,GAAG,UAAU,qBACb,KAAG;;;;;;;;;;;;;;;;;;;;;;;0BAuBiB,MAAM,kBAAkB;;;4BAGtB,MAAM,eAAe;;;;4BAIrB,MAAM,aAAa;;;;;;;gCAOf,MAAM,qBAAqB;6BAC9B,MAAM,aAAa;;0BAEtB,MAAM,kBAAkB;;;;;4BAKtB,MAAM,aAAa;;;;;;;;;;yBAUtB,MAAM,eAAe;;;;;4BAKlB,MAAM,eAAe;;;;;;;;;;yBAUxB,MAAM,iBAAiB;;;;;QAM3C;EACD,SAAS,KAAG;eACD,MAAM,qBAAqB;;EAEvC;EACD"}

package/es/Highlighter/const.d.mts

@@ -0,0 +1,9 @@
+//#region src/Highlighter/const.d.ts
+interface HighlighterThemeItem {
+  displayName: string;
+  id: string;
+}
+declare const highlighterThemes: HighlighterThemeItem[];
+//#endregion
+export { highlighterThemes };
+//# sourceMappingURL=const.d.mts.map

package/es/Highlighter/const.mjs

@@ -0,0 +1,31 @@
+import { bundledLanguagesInfo, bundledThemesInfo } from "shiki";
+
+//#region src/Highlighter/const.ts
+const highlighterThemes = [{
+	displayName: "Lobe Theme",
+	id: "lobe-theme"
+}, ...bundledThemesInfo.map((item) => ({
+	displayName: item.displayName,
+	id: item.id
+}))];
+const FALLBACK_LANG = "plaintext";
+const getCodeLanguageByInput = (input) => {
+	if (!input) return "plaintext";
+	const inputLang = input.toLocaleLowerCase();
+	return bundledLanguagesInfo.find((lang) => lang.id === inputLang || lang.aliases?.includes(inputLang))?.id || "plaintext";
+};
+const getCodeLanguageFilename = (input) => {
+	if (!input) return "Plaintext";
+	const inputLang = input.toLocaleLowerCase();
+	const matchLang = bundledLanguagesInfo.find((lang) => lang.id === inputLang || lang.aliases?.includes(inputLang));
+	return `*.${matchLang?.aliases?.[0] || matchLang?.id || "txt"}`;
+};
+const getCodeLanguageDisplayName = (input) => {
+	if (!input) return "Plaintext";
+	const inputLang = input.toLocaleLowerCase();
+	return bundledLanguagesInfo.find((lang) => lang.id === inputLang || lang.aliases?.includes(inputLang))?.name || "Plaintext";
+};
+
+//#endregion
+export { FALLBACK_LANG, getCodeLanguageByInput, getCodeLanguageDisplayName, getCodeLanguageFilename, highlighterThemes };
+//# sourceMappingURL=const.mjs.map

package/es/Highlighter/const.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"const.mjs","names":["highlighterThemes: HighlighterThemeItem[]"],"sources":["../../src/Highlighter/const.ts"],"sourcesContent":["import { bundledLanguagesInfo, bundledThemesInfo } from 'shiki';\n\ninterface HighlighterThemeItem {\n  displayName: string;\n  id: string;\n}\n\nexport const highlighterThemes: HighlighterThemeItem[] = [\n  {\n    displayName: 'Lobe Theme',\n    id: 'lobe-theme',\n  },\n  ...bundledThemesInfo.map((item) => ({\n    displayName: item.displayName,\n    id: item.id,\n  })),\n];\n\nexport const FALLBACK_LANG = 'plaintext';\n\nexport const getCodeLanguageByInput = (input: string): string => {\n  if (!input) {\n    return 'plaintext';\n  }\n  const inputLang = input.toLocaleLowerCase();\n\n  const matchLang = bundledLanguagesInfo.find(\n    (lang) => lang.id === inputLang || lang.aliases?.includes(inputLang),\n  );\n  return matchLang?.id || 'plaintext';\n};\n\nexport const getCodeLanguageFilename = (input: string): string => {\n  if (!input) {\n    return 'Plaintext';\n  }\n  const inputLang = input.toLocaleLowerCase();\n\n  const matchLang = bundledLanguagesInfo.find(\n    (lang) => lang.id === inputLang || lang.aliases?.includes(inputLang),\n  );\n  const type = matchLang?.aliases?.[0] || matchLang?.id || 'txt';\n  return `*.${type}`;\n};\n\nexport const getCodeLanguageDisplayName = (input: string): string => {\n  if (!input) {\n    return 'Plaintext';\n  }\n  const inputLang = input.toLocaleLowerCase();\n\n  const matchLang = bundledLanguagesInfo.find(\n    (lang) => lang.id === inputLang || lang.aliases?.includes(inputLang),\n  );\n  return matchLang?.name || 'Plaintext';\n};\n"],"mappings":";;;AAOA,MAAaA,oBAA4C,CACvD;CACE,aAAa;CACb,IAAI;CACL,EACD,GAAG,kBAAkB,KAAK,UAAU;CAClC,aAAa,KAAK;CAClB,IAAI,KAAK;CACV,EAAE,CACJ;AAED,MAAa,gBAAgB;AAE7B,MAAa,0BAA0B,UAA0B;AAC/D,KAAI,CAAC,MACH,QAAO;CAET,MAAM,YAAY,MAAM,mBAAmB;AAK3C,QAHkB,qBAAqB,MACpC,SAAS,KAAK,OAAO,aAAa,KAAK,SAAS,SAAS,UAAU,CACrE,EACiB,MAAM;;AAG1B,MAAa,2BAA2B,UAA0B;AAChE,KAAI,CAAC,MACH,QAAO;CAET,MAAM,YAAY,MAAM,mBAAmB;CAE3C,MAAM,YAAY,qBAAqB,MACpC,SAAS,KAAK,OAAO,aAAa,KAAK,SAAS,SAAS,UAAU,CACrE;AAED,QAAO,KADM,WAAW,UAAU,MAAM,WAAW,MAAM;;AAI3D,MAAa,8BAA8B,UAA0B;AACnE,KAAI,CAAC,MACH,QAAO;CAET,MAAM,YAAY,MAAM,mBAAmB;AAK3C,QAHkB,qBAAqB,MACpC,SAAS,KAAK,OAAO,aAAa,KAAK,SAAS,SAAS,UAAU,CACrE,EACiB,QAAQ"}

package/es/Highlighter/index.d.mts

@@ -0,0 +1,5 @@
+import { highlighterThemes } from "./const.mjs";
+import { HighlighterProps, SyntaxHighlighterProps } from "./type.mjs";
+import { Highlighter } from "./Highlighter.mjs";
+import { SyntaxHighlighter } from "./SyntaxHighlighter/index.mjs";
+export { HighlighterProps, SyntaxHighlighter, SyntaxHighlighterProps, Highlighter as default, highlighterThemes };

package/es/Highlighter/index.mjs

@@ -0,0 +1,5 @@
+import { highlighterThemes } from "./const.mjs";
+import SyntaxHighlighter_default from "./SyntaxHighlighter/index.mjs";
+import Highlighter_default from "./Highlighter.mjs";
+
+export { SyntaxHighlighter_default as SyntaxHighlighter, Highlighter_default as default, highlighterThemes };

package/es/Highlighter/style.mjs

@@ -0,0 +1,131 @@
+import { createStyles } from "antd-style";
+
+//#region src/Highlighter/style.ts
+const useStyles = createStyles(({ token, css: css$1, cx: cx$1, prefixCls, stylish }) => {
+	const prefix = `${prefixCls}-highlighter`;
+	const actionsHoverCls = `${prefix}-highlighter-hover-actions`;
+	const langHoverCls = `${prefix}-highlighter-hover-lang`;
+	const expandCls = `${prefix}-highlighter-body-expand`;
+	return {
+		actions: cx$1(actionsHoverCls, css$1`
+        position: absolute;
+        z-index: 2;
+        inset-block-start: 8px;
+        inset-inline-end: 8px;
+
+        opacity: 0;
+      `),
+		bodyCollapsed: css$1`
+      height: 0;
+      opacity: 0;
+    `,
+		bodyExpand: cx$1(expandCls),
+		bodyRoot: css$1`
+      overflow: hidden;
+      transition: opacity 0.25s ${token.motionEaseOut};
+    `,
+		borderless: stylish.variantBorderlessWithoutHover,
+		filled: cx$1(stylish.variantFilledWithoutHover, css$1`
+        background: ${token.colorFillQuaternary};
+      `),
+		headerBorderless: css$1`
+      padding-inline: 0;
+    `,
+		headerFilled: css$1`
+      background: transparent;
+    `,
+		headerOutlined: css$1`
+      & + .${expandCls} {
+        border-block-start: 1px solid ${token.colorFillQuaternary};
+      }
+    `,
+		headerRoot: css$1`
+      cursor: pointer;
+      position: relative;
+      padding: 4px;
+    `,
+		lang: cx$1(langHoverCls, stylish.blur, css$1`
+        position: absolute;
+        z-index: 2;
+        inset-block-end: 8px;
+        inset-inline-end: 8px;
+
+        font-family: ${token.fontFamilyCode};
+        color: ${token.colorTextSecondary};
+
+        opacity: 0;
+        background: ${token.colorFillQuaternary};
+
+        transition: opacity 0.1s;
+      `),
+		nowrap: css$1`
+      pre,
+      code {
+        text-wrap: nowrap;
+      }
+    `,
+		outlined: stylish.variantOutlinedWithoutHover,
+		root: cx$1(prefix, css$1`
+        position: relative;
+
+        overflow: hidden;
+
+        width: 100%;
+        border-radius: ${token.borderRadius}px;
+
+        transition: background-color 100ms ${token.motionEaseOut};
+
+        .languageTitle {
+          opacity: 0.5;
+          filter: grayscale(100%);
+          transition:
+            opacity,
+            grayscale 0.2s ${token.motionEaseInOut};
+        }
+
+        .panel-actions {
+          opacity: 0;
+          transition: opacity 0.2s ${token.motionEaseInOut};
+        }
+
+        &:hover {
+          .languageTitle {
+            opacity: 1;
+            filter: grayscale(0%);
+          }
+
+          .panel-actions {
+            opacity: 1;
+          }
+
+          .${actionsHoverCls} {
+            opacity: 1;
+          }
+
+          .${langHoverCls} {
+            opacity: 1;
+          }
+        }
+
+        pre {
+          height: 100%;
+          font-size: 12px;
+        }
+
+        code {
+          background: transparent !important;
+        }
+      `),
+		shadow: stylish.shadow,
+		wrap: css$1`
+      pre,
+      code {
+        text-wrap: wrap;
+      }
+    `
+	};
+});
+
+//#endregion
+export { useStyles };
+//# sourceMappingURL=style.mjs.map

package/es/Highlighter/style.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":["cx"],"sources":["../../src/Highlighter/style.ts"],"sourcesContent":["import { createStyles } from 'antd-style';\n\nexport const useStyles = createStyles(({ token, css, cx, prefixCls, stylish }) => {\n  const prefix = `${prefixCls}-highlighter`;\n  const actionsHoverCls = `${prefix}-highlighter-hover-actions`;\n  const langHoverCls = `${prefix}-highlighter-hover-lang`;\n  const expandCls = `${prefix}-highlighter-body-expand`;\n\n  return {\n    actions: cx(\n      actionsHoverCls,\n      css`\n        position: absolute;\n        z-index: 2;\n        inset-block-start: 8px;\n        inset-inline-end: 8px;\n\n        opacity: 0;\n      `,\n    ),\n    bodyCollapsed: css`\n      height: 0;\n      opacity: 0;\n    `,\n    bodyExpand: cx(expandCls),\n    bodyRoot: css`\n      overflow: hidden;\n      transition: opacity 0.25s ${token.motionEaseOut};\n    `,\n    borderless: stylish.variantBorderlessWithoutHover,\n    filled: cx(\n      stylish.variantFilledWithoutHover,\n      css`\n        background: ${token.colorFillQuaternary};\n      `,\n    ),\n    headerBorderless: css`\n      padding-inline: 0;\n    `,\n\n    headerFilled: css`\n      background: transparent;\n    `,\n\n    headerOutlined: css`\n      & + .${expandCls} {\n        border-block-start: 1px solid ${token.colorFillQuaternary};\n      }\n    `,\n\n    headerRoot: css`\n      cursor: pointer;\n      position: relative;\n      padding: 4px;\n    `,\n\n    lang: cx(\n      langHoverCls,\n      stylish.blur,\n      css`\n        position: absolute;\n        z-index: 2;\n        inset-block-end: 8px;\n        inset-inline-end: 8px;\n\n        font-family: ${token.fontFamilyCode};\n        color: ${token.colorTextSecondary};\n\n        opacity: 0;\n        background: ${token.colorFillQuaternary};\n\n        transition: opacity 0.1s;\n      `,\n    ),\n    nowrap: css`\n      pre,\n      code {\n        text-wrap: nowrap;\n      }\n    `,\n    outlined: stylish.variantOutlinedWithoutHover,\n    root: cx(\n      prefix,\n      css`\n        position: relative;\n\n        overflow: hidden;\n\n        width: 100%;\n        border-radius: ${token.borderRadius}px;\n\n        transition: background-color 100ms ${token.motionEaseOut};\n\n        .languageTitle {\n          opacity: 0.5;\n          filter: grayscale(100%);\n          transition:\n            opacity,\n            grayscale 0.2s ${token.motionEaseInOut};\n        }\n\n        .panel-actions {\n          opacity: 0;\n          transition: opacity 0.2s ${token.motionEaseInOut};\n        }\n\n        &:hover {\n          .languageTitle {\n            opacity: 1;\n            filter: grayscale(0%);\n          }\n\n          .panel-actions {\n            opacity: 1;\n          }\n\n          .${actionsHoverCls} {\n            opacity: 1;\n          }\n\n          .${langHoverCls} {\n            opacity: 1;\n          }\n        }\n\n        pre {\n          height: 100%;\n          font-size: 12px;\n        }\n\n        code {\n          background: transparent !important;\n        }\n      `,\n    ),\n    shadow: stylish.shadow,\n    wrap: css`\n      pre,\n      code {\n        text-wrap: wrap;\n      }\n    `,\n  };\n});\n"],"mappings":";;;AAEA,MAAa,YAAY,cAAc,EAAE,OAAO,YAAK,UAAI,WAAW,cAAc;CAChF,MAAM,SAAS,GAAG,UAAU;CAC5B,MAAM,kBAAkB,GAAG,OAAO;CAClC,MAAM,eAAe,GAAG,OAAO;CAC/B,MAAM,YAAY,GAAG,OAAO;AAE5B,QAAO;EACL,SAASA,KACP,iBACA,KAAG;;;;;;;QAQJ;EACD,eAAe,KAAG;;;;EAIlB,YAAYA,KAAG,UAAU;EACzB,UAAU,KAAG;;kCAEiB,MAAM,cAAc;;EAElD,YAAY,QAAQ;EACpB,QAAQA,KACN,QAAQ,2BACR,KAAG;sBACa,MAAM,oBAAoB;QAE3C;EACD,kBAAkB,KAAG;;;EAIrB,cAAc,KAAG;;;EAIjB,gBAAgB,KAAG;aACV,UAAU;wCACiB,MAAM,oBAAoB;;;EAI9D,YAAY,KAAG;;;;;EAMf,MAAMA,KACJ,cACA,QAAQ,MACR,KAAG;;;;;;uBAMc,MAAM,eAAe;iBAC3B,MAAM,mBAAmB;;;sBAGpB,MAAM,oBAAoB;;;QAI3C;EACD,QAAQ,KAAG;;;;;;EAMX,UAAU,QAAQ;EAClB,MAAMA,KACJ,QACA,KAAG;;;;;;yBAMgB,MAAM,aAAa;;6CAEC,MAAM,cAAc;;;;;;;6BAOpC,MAAM,gBAAgB;;;;;qCAKd,MAAM,gBAAgB;;;;;;;;;;;;;aAa9C,gBAAgB;;;;aAIhB,aAAa;;;;;;;;;;;;;QAcrB;EACD,QAAQ,QAAQ;EAChB,MAAM,KAAG;;;;;;EAMV;EACD"}

package/es/Highlighter/type.d.mts

@@ -0,0 +1,61 @@
+import { FlexboxProps } from "../Flex/type.mjs";
+import "../Flex/index.mjs";
+import { DivProps } from "../types/index.mjs";
+import { ActionIconProps } from "../ActionIcon/type.mjs";
+import "../ActionIcon/index.mjs";
+import { CSSProperties, ReactNode, Ref } from "react";
+import { BuiltinTheme } from "shiki";
+
+//#region src/Highlighter/type.d.ts
+interface SyntaxHighlighterProps extends DivProps {
+  animated?: boolean;
+  children: string;
+  enableTransformer?: HighlighterProps['enableTransformer'];
+  language: HighlighterProps['language'];
+  ref?: Ref<HTMLDivElement>;
+  theme?: HighlighterProps['theme'];
+  variant?: HighlighterProps['variant'];
+}
+interface HighlighterProps extends Omit<FlexboxProps, 'children' | 'wrap'> {
+  actionIconSize?: ActionIconProps['size'];
+  actionsRender?: (props: {
+    actionIconSize: ActionIconProps['size'];
+    content: string;
+    getContent: () => string;
+    language: string;
+    originalNode: ReactNode;
+  }) => ReactNode;
+  allowChangeLanguage?: boolean;
+  animated?: boolean;
+  bodyRender?: (props: {
+    content: string;
+    language: string;
+    originalNode: ReactNode;
+  }) => ReactNode;
+  children: string;
+  classNames?: {
+    body?: string;
+    content?: string;
+    header?: string;
+  };
+  copyable?: boolean;
+  defaultExpand?: boolean;
+  enableTransformer?: boolean;
+  fileName?: string;
+  fullFeatured?: boolean;
+  icon?: ReactNode;
+  language: string;
+  shadow?: boolean;
+  showLanguage?: boolean;
+  styles?: {
+    body?: CSSProperties;
+    content?: CSSProperties;
+    header?: CSSProperties;
+  };
+  theme?: 'lobe-theme' | BuiltinTheme;
+  variant?: 'filled' | 'outlined' | 'borderless';
+  wrap?: boolean;
+}
+//#endregion
+export { HighlighterProps, SyntaxHighlighterProps };
+//# sourceMappingURL=type.d.mts.map

package/es/Hotkey/Hotkey.d.mts

@@ -0,0 +1,8 @@
+import { HotkeyProps } from "./type.mjs";
+import * as react60 from "react";
+
+//#region src/Hotkey/Hotkey.d.ts
+declare const Hotkey: react60.NamedExoticComponent<HotkeyProps>;
+//#endregion
+export { Hotkey };
+//# sourceMappingURL=Hotkey.d.mts.map

package/es/Hotkey/Hotkey.mjs

@@ -0,0 +1,154 @@
+'use client';
+
+import FlexBasic_default from "../Flex/FlexBasic.mjs";
+import Center_default from "../Flex/Center.mjs";
+import { KeyMapEnum } from "./const.mjs";
+import Icon_default from "../Icon/Icon.mjs";
+import LeftClickIcon_default from "../icons/lucideExtra/LeftClickIcon.mjs";
+import LeftDoubleClickIcon_default from "../icons/lucideExtra/LeftDoubleClickIcon.mjs";
+import RightClickIcon_default from "../icons/lucideExtra/RightClickIcon.mjs";
+import RightDoubleClickIcon_default from "../icons/lucideExtra/RightDoubleClickIcon.mjs";
+import { useStyles } from "./style.mjs";
+import { checkIsAppleDevice, splitKeysByPlus, startCase } from "./utils.mjs";
+import { memo, useEffect, useMemo, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { ArrowBigUpIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowRightToLineIcon, ArrowUpIcon, ChevronUpIcon, Command, CornerDownLeftIcon, Delete, Grid2X2Icon, MouseIcon, Option, SpaceIcon } from "lucide-react";
+
+//#region src/Hotkey/Hotkey.tsx
+const mappingKey = (isAppleDevice) => ({
+	[KeyMapEnum.Alt]: isAppleDevice ? /* @__PURE__ */ jsx(Icon_default, {
+		icon: Option,
+		size: { size: "0.95em" }
+	}) : "Alt",
+	[KeyMapEnum.Backspace]: isAppleDevice ? /* @__PURE__ */ jsx(Icon_default, { icon: Delete }) : "Backspace",
+	[KeyMapEnum.Ctrl]: isAppleDevice ? /* @__PURE__ */ jsx(Icon_default, { icon: ChevronUpIcon }) : "Ctrl",
+	[KeyMapEnum.Down]: /* @__PURE__ */ jsx(Icon_default, { icon: ArrowDownIcon }),
+	[KeyMapEnum.Enter]: isAppleDevice ? /* @__PURE__ */ jsx(Icon_default, { icon: CornerDownLeftIcon }) : "Enter",
+	[KeyMapEnum.LeftClick]: /* @__PURE__ */ jsx(Icon_default, {
+		icon: LeftClickIcon_default,
+		size: {
+			size: "1.2em",
+			strokeWidth: 1.75
+		}
+	}),
+	[KeyMapEnum.Left]: /* @__PURE__ */ jsx(Icon_default, { icon: ArrowLeftIcon }),
+	[KeyMapEnum.Meta]: isAppleDevice ? /* @__PURE__ */ jsx(Icon_default, {
+		icon: Command,
+		size: { size: "0.95em" }
+	}) : /* @__PURE__ */ jsx(Icon_default, { icon: Grid2X2Icon }),
+	[KeyMapEnum.MiddleClick]: /* @__PURE__ */ jsx(Icon_default, {
+		icon: MouseIcon,
+		size: {
+			size: "1.2em",
+			strokeWidth: 1.75
+		}
+	}),
+	[KeyMapEnum.Mod]: isAppleDevice ? /* @__PURE__ */ jsx(Icon_default, {
+		icon: Command,
+		size: { size: "0.95em" }
+	}) : "Ctrl",
+	[KeyMapEnum.RightClick]: /* @__PURE__ */ jsx(Icon_default, {
+		icon: RightClickIcon_default,
+		size: {
+			size: "1.2em",
+			strokeWidth: 1.75
+		}
+	}),
+	[KeyMapEnum.RightDoubleClick]: /* @__PURE__ */ jsx(Icon_default, {
+		icon: RightDoubleClickIcon_default,
+		size: {
+			size: "1.2em",
+			strokeWidth: 1.75
+		}
+	}),
+	[KeyMapEnum.LeftDoubleClick]: /* @__PURE__ */ jsx(Icon_default, {
+		icon: LeftDoubleClickIcon_default,
+		size: {
+			size: "1.2em",
+			strokeWidth: 1.75
+		}
+	}),
+	[KeyMapEnum.Right]: /* @__PURE__ */ jsx(Icon_default, { icon: ArrowRightIcon }),
+	[KeyMapEnum.Shift]: isAppleDevice ? /* @__PURE__ */ jsx(Icon_default, {
+		icon: ArrowBigUpIcon,
+		size: {
+			size: "1.15em",
+			strokeWidth: 1.75
+		}
+	}) : "Shift",
+	[KeyMapEnum.Space]: /* @__PURE__ */ jsx(Icon_default, { icon: SpaceIcon }),
+	[KeyMapEnum.Tab]: isAppleDevice ? /* @__PURE__ */ jsx(Icon_default, { icon: ArrowRightToLineIcon }) : "Tab",
+	[KeyMapEnum.Up]: /* @__PURE__ */ jsx(Icon_default, { icon: ArrowUpIcon }),
+	[KeyMapEnum.Comma]: ",",
+	[KeyMapEnum.Period]: ".",
+	[KeyMapEnum.Slash]: "?",
+	[KeyMapEnum.Semicolon]: ";",
+	[KeyMapEnum.Quote]: "'",
+	[KeyMapEnum.Backquote]: "`",
+	[KeyMapEnum.Backslash]: "\\",
+	[KeyMapEnum.BracketLeft]: "[",
+	[KeyMapEnum.BracketRight]: "]",
+	[KeyMapEnum.Minus]: "-",
+	[KeyMapEnum.Equal]: "+"
+});
+const Hotkey = memo(({ variant = "filled", classNames, styles: customStyles, keys, inverseTheme, isApple, compact, className, style, ...rest }) => {
+	const { cx, styles } = useStyles();
+	const isBorderless = variant === "borderless";
+	const [keysGroup, setKeysGroup] = useState(splitKeysByPlus(keys));
+	const isAppleDevice = useMemo(() => checkIsAppleDevice(isApple), [isApple]);
+	const variants = useMemo(() => cva(styles.root, {
+		defaultVariants: {
+			inverseTheme: false,
+			variant: "filled"
+		},
+		variants: {
+			variant: {
+				filled: styles.filled,
+				outlined: styles.outlined,
+				borderless: styles.borderless
+			},
+			inverseTheme: {
+				false: null,
+				true: styles.inverseTheme
+			}
+		}
+	}), [styles]);
+	useEffect(() => {
+		setKeysGroup(splitKeysByPlus(keys));
+	}, [keys]);
+	const mapping = useMemo(() => mappingKey(isAppleDevice), [isAppleDevice]);
+	return /* @__PURE__ */ jsx(FlexBasic_default, {
+		align: "center",
+		className,
+		gap: isBorderless ? 6 : 2,
+		horizontal: true,
+		style,
+		...rest,
+		children: compact || isBorderless ? /* @__PURE__ */ jsx(Center_default, {
+			as: "kbd",
+			className: cx(variants({
+				inverseTheme,
+				variant
+			}), classNames?.kbdClassName),
+			gap: 6,
+			horizontal: true,
+			style: customStyles?.kbdStyle,
+			children: keysGroup.map((key, index) => /* @__PURE__ */ jsx("div", { children: mapping[key] ?? startCase(key) }, index))
+		}) : keysGroup.map((key, index) => /* @__PURE__ */ jsx(Center_default, {
+			as: "kbd",
+			className: cx(variants({
+				inverseTheme,
+				variant
+			}), classNames?.kbdClassName),
+			style: customStyles?.kbdStyle,
+			children: mapping[key] ?? startCase(key)
+		}, index))
+	});
+});
+Hotkey.displayName = "Hotkey";
+var Hotkey_default = Hotkey;
+
+//#endregion
+export { Hotkey_default as default };
+//# sourceMappingURL=Hotkey.mjs.map

package/es/Hotkey/Hotkey.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Hotkey.mjs","names":["Icon","LeftClickIcon","RightClickIcon","RightDoubleClickIcon","LeftDoubleClickIcon","mapping: Record<string, any>","Flexbox","Center"],"sources":["../../src/Hotkey/Hotkey.tsx"],"sourcesContent":["'use client';\n\nimport { cva } from 'class-variance-authority';\nimport {\n  ArrowBigUpIcon,\n  ArrowDownIcon,\n  ArrowLeftIcon,\n  ArrowRightIcon,\n  ArrowRightToLineIcon,\n  ArrowUpIcon,\n  ChevronUpIcon,\n  Command,\n  CornerDownLeftIcon,\n  Delete,\n  Grid2X2Icon,\n  MouseIcon,\n  Option,\n  SpaceIcon,\n} from 'lucide-react';\nimport { memo, useEffect, useMemo, useState } from 'react';\n\nimport { Center, Flexbox } from '@/Flex';\nimport Icon from '@/Icon';\nimport LeftClickIcon from '@/icons/lucideExtra/LeftClickIcon';\nimport LeftDoubleClickIcon from '@/icons/lucideExtra/LeftDoubleClickIcon';\nimport RightClickIcon from '@/icons/lucideExtra/RightClickIcon';\nimport RightDoubleClickIcon from '@/icons/lucideExtra/RightDoubleClickIcon';\n\nimport { KeyMapEnum } from './const';\nimport { useStyles } from './style';\nimport type { HotkeyProps } from './type';\nimport { checkIsAppleDevice, splitKeysByPlus, startCase } from './utils';\n\nconst mappingKey = (isAppleDevice: boolean) => ({\n  [KeyMapEnum.Alt]: isAppleDevice ? <Icon icon={Option} size={{ size: '0.95em' }} /> : 'Alt',\n  [KeyMapEnum.Backspace]: isAppleDevice ? <Icon icon={Delete} /> : 'Backspace',\n  [KeyMapEnum.Ctrl]: isAppleDevice ? <Icon icon={ChevronUpIcon} /> : 'Ctrl',\n  [KeyMapEnum.Down]: <Icon icon={ArrowDownIcon} />,\n  [KeyMapEnum.Enter]: isAppleDevice ? <Icon icon={CornerDownLeftIcon} /> : 'Enter',\n  [KeyMapEnum.LeftClick]: <Icon icon={LeftClickIcon} size={{ size: '1.2em', strokeWidth: 1.75 }} />,\n  [KeyMapEnum.Left]: <Icon icon={ArrowLeftIcon} />,\n  [KeyMapEnum.Meta]: isAppleDevice ? (\n    <Icon icon={Command} size={{ size: '0.95em' }} />\n  ) : (\n    <Icon icon={Grid2X2Icon} />\n  ),\n  [KeyMapEnum.MiddleClick]: <Icon icon={MouseIcon} size={{ size: '1.2em', strokeWidth: 1.75 }} />,\n  [KeyMapEnum.Mod]: isAppleDevice ? <Icon icon={Command} size={{ size: '0.95em' }} /> : 'Ctrl',\n  [KeyMapEnum.RightClick]: (\n    <Icon icon={RightClickIcon} size={{ size: '1.2em', strokeWidth: 1.75 }} />\n  ),\n  [KeyMapEnum.RightDoubleClick]: (\n    <Icon icon={RightDoubleClickIcon} size={{ size: '1.2em', strokeWidth: 1.75 }} />\n  ),\n  [KeyMapEnum.LeftDoubleClick]: (\n    <Icon icon={LeftDoubleClickIcon} size={{ size: '1.2em', strokeWidth: 1.75 }} />\n  ),\n  [KeyMapEnum.Right]: <Icon icon={ArrowRightIcon} />,\n  [KeyMapEnum.Shift]: isAppleDevice ? (\n    <Icon icon={ArrowBigUpIcon} size={{ size: '1.15em', strokeWidth: 1.75 }} />\n  ) : (\n    'Shift'\n  ),\n  [KeyMapEnum.Space]: <Icon icon={SpaceIcon} />,\n  [KeyMapEnum.Tab]: isAppleDevice ? <Icon icon={ArrowRightToLineIcon} /> : 'Tab',\n  [KeyMapEnum.Up]: <Icon icon={ArrowUpIcon} />,\n  [KeyMapEnum.Comma]: ',',\n  [KeyMapEnum.Period]: '.',\n  [KeyMapEnum.Slash]: '?',\n  [KeyMapEnum.Semicolon]: ';',\n  [KeyMapEnum.Quote]: \"'\",\n  [KeyMapEnum.Backquote]: '`',\n  [KeyMapEnum.Backslash]: '\\\\',\n  [KeyMapEnum.BracketLeft]: '[',\n  [KeyMapEnum.BracketRight]: ']',\n  [KeyMapEnum.Minus]: '-',\n  [KeyMapEnum.Equal]: '+',\n});\n\nconst Hotkey = memo<HotkeyProps>(\n  ({\n    variant = 'filled',\n    classNames,\n    styles: customStyles,\n    keys,\n    inverseTheme,\n    isApple,\n    compact,\n    className,\n    style,\n    ...rest\n  }) => {\n    const { cx, styles } = useStyles();\n    const isBorderless = variant === 'borderless';\n    const [keysGroup, setKeysGroup] = useState(splitKeysByPlus(keys));\n    const isAppleDevice = useMemo(() => checkIsAppleDevice(isApple), [isApple]);\n\n    const variants = useMemo(\n      () =>\n        cva(styles.root, {\n          defaultVariants: {\n            inverseTheme: false,\n            variant: 'filled',\n          },\n          /* eslint-disable sort-keys-fix/sort-keys-fix */\n          variants: {\n            variant: {\n              filled: styles.filled,\n              outlined: styles.outlined,\n              borderless: styles.borderless,\n            },\n            inverseTheme: {\n              false: null,\n              true: styles.inverseTheme,\n            },\n          },\n          /* eslint-enable sort-keys-fix/sort-keys-fix */\n        }),\n      [styles],\n    );\n\n    useEffect(() => {\n      const newValue = splitKeysByPlus(keys);\n      setKeysGroup(newValue);\n    }, [keys]);\n\n    const mapping: Record<string, any> = useMemo(() => mappingKey(isAppleDevice), [isAppleDevice]);\n\n    return (\n      <Flexbox\n        align={'center'}\n        className={className}\n        gap={isBorderless ? 6 : 2}\n        horizontal\n        style={style}\n        {...rest}\n      >\n        {compact || isBorderless ? (\n          <Center\n            as={'kbd'}\n            className={cx(variants({ inverseTheme, variant }), classNames?.kbdClassName)}\n            gap={6}\n            horizontal\n            style={customStyles?.kbdStyle}\n          >\n            {keysGroup.map((key, index) => (\n              <div key={index}>{mapping[key] ?? startCase(key)}</div>\n            ))}\n          </Center>\n        ) : (\n          keysGroup.map((key, index) => (\n            <Center\n              as={'kbd'}\n              className={cx(variants({ inverseTheme, variant }), classNames?.kbdClassName)}\n              key={index}\n              style={customStyles?.kbdStyle}\n            >\n              {mapping[key] ?? startCase(key)}\n            </Center>\n          ))\n        )}\n      </Flexbox>\n    );\n  },\n);\n\nHotkey.displayName = 'Hotkey';\n\nexport default Hotkey;\n"],"mappings":"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"}