@lobehub/ui 4.3.2 → 4.3.3

package/es/Highlighter/SyntaxHighlighter/StreamRenderer.mjs

@@ -1,16 +1,12 @@
 'use client';
 
-import { useHighlight } from "../../hooks/useHighlight.mjs";
-import { useStyles } from "./style.mjs";
+import { useStreamHighlight } from "../../hooks/useStreamHighlight.mjs";
 import { memo } from "react";
 import { jsx } from "react/jsx-runtime";
+import { cx } from "antd-style";
 import { getTokenStyleObject } from "@shikijs/core";
 
 //#region src/Highlighter/SyntaxHighlighter/StreamRenderer.tsx
-const applyColorReplacement = (color, replacements) => {
-	if (!color || !replacements) return color;
-	return replacements[color.toLowerCase()] || color;
-};
 const normalizeStyleKeys = (style) => {
 	const normalized = {};
 	Object.entries(style).forEach(([key, value]) => {
@@ -19,27 +15,19 @@ const normalizeStyleKeys = (style) => {
 	});
 	return normalized;
 };
-const getTokenInlineStyle = (token, replacements) => {
-	const baseStyle = normalizeStyleKeys(token.htmlStyle || getTokenStyleObject(token));
-	if (!replacements) return {
-		...baseStyle,
-		whiteSpace: "pre"
-	};
-	const style = {
-		...baseStyle,
+const getTokenInlineStyle = (token) => {
+	return {
+		...normalizeStyleKeys(token.htmlStyle || getTokenStyleObject(token)),
 		whiteSpace: "pre"
 	};
-	if (style.color && typeof style.color === "string") style.color = applyColorReplacement(style.color, replacements);
-	if (style.backgroundColor && typeof style.backgroundColor === "string") style.backgroundColor = applyColorReplacement(style.backgroundColor, replacements);
-	return style;
 };
-const TokenSpan = memo(({ token, replacements }) => {
+const TokenSpan = memo(({ token }) => {
 	return /* @__PURE__ */ jsx("span", {
-		style: getTokenInlineStyle(token, replacements),
+		style: getTokenInlineStyle(token),
 		children: token.content
 	}, token.content);
 }, (prev, next) => prev.token === next.token);
-const TokenLine = memo(({ line, replacements }) => {
+const TokenLine = memo(({ line }) => {
 	if (!line.length) return /* @__PURE__ */ jsx("span", {
 		className: "line",
 		children: /* @__PURE__ */ jsx("span", {
@@ -49,16 +37,12 @@ const TokenLine = memo(({ line, replacements }) => {
 	});
 	return /* @__PURE__ */ jsx("span", {
 		className: "line",
-		children: line.map((token, tokenIndex) => /* @__PURE__ */ jsx(TokenSpan, {
-			replacements,
-			token
-		}, `token-${tokenIndex}`))
+		children: line.map((token, tokenIndex) => /* @__PURE__ */ jsx(TokenSpan, { token }, `token-${tokenIndex}`))
 	});
 }, (prev, next) => prev.line === next.line);
 const StreamRenderer = memo(({ children, className, enableTransformer, fallbackClassName, language, style, theme }) => {
-	const { cx } = useStyles();
 	const safeChildren = children ?? "";
-	const { streaming } = useHighlight(safeChildren, {
+	const streaming = useStreamHighlight(safeChildren, {
 		enableTransformer,
 		language,
 		streaming: true,
@@ -66,7 +50,6 @@ const StreamRenderer = memo(({ children, className, enableTransformer, fallbackC
 	});
 	const lines = streaming?.lines;
 	const preStyle = streaming?.preStyle;
-	const replacements = streaming?.colorReplacements;
 	if (!lines || lines.length === 0) return /* @__PURE__ */ jsx("div", {
 		className: fallbackClassName,
 		dir: "ltr",
@@ -87,10 +70,7 @@ const StreamRenderer = memo(({ children, className, enableTransformer, fallbackC
 					flexDirection: "column",
 					whiteSpace: "pre"
 				},
-				children: lines.map((line, index) => /* @__PURE__ */ jsx(TokenLine, {
-					line,
-					replacements
-				}, `line-${index}`))
+				children: lines.map((line, index) => /* @__PURE__ */ jsx(TokenLine, { line }, `line-${index}`))
 			})
 		})
 	});

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

@@ -1 +1 @@
-{"version":3,"file":"StreamRenderer.mjs","names":["normalized: CSSProperties","style: CSSProperties"],"sources":["../../../src/Highlighter/SyntaxHighlighter/StreamRenderer.tsx"],"sourcesContent":["'use client';\n\nimport { getTokenStyleObject } from '@shikijs/core';\nimport type { CSSProperties } from 'react';\nimport { memo } from 'react';\nimport type { BuiltinTheme, ThemedToken } from 'shiki';\n\nimport { useHighlight } from '@/hooks/useHighlight';\n\nimport { useStyles } from './style';\n\ninterface StreamRendererProps {\n  children: string;\n  className?: string;\n  enableTransformer?: boolean;\n  fallbackClassName?: string;\n  language: string;\n  style?: CSSProperties;\n  theme?: BuiltinTheme;\n}\n\nconst applyColorReplacement = (color?: string, replacements?: Record<string, string>) => {\n  if (!color || !replacements) return color;\n  return replacements[color.toLowerCase()] || color;\n};\n\nconst normalizeStyleKeys = (style: Record<string, string | number>): CSSProperties => {\n  const normalized: CSSProperties = {};\n  Object.entries(style).forEach(([key, value]) => {\n    const normalizedKey = key.replaceAll(/-([a-z])/g, (_, char) => char.toUpperCase());\n    (normalized as Record<string, string | number>)[normalizedKey] = value;\n  });\n  return normalized;\n};\n\nconst getTokenInlineStyle = (\n  token: ThemedToken,\n  replacements?: Record<string, string>,\n): CSSProperties => {\n  const rawStyle = token.htmlStyle || getTokenStyleObject(token);\n  const baseStyle = normalizeStyleKeys(rawStyle);\n  if (!replacements) return { ...baseStyle, whiteSpace: 'pre' };\n\n  const style: CSSProperties = {\n    ...baseStyle,\n    whiteSpace: 'pre',\n  };\n\n  if (style.color && typeof style.color === 'string') {\n    style.color = applyColorReplacement(style.color, replacements);\n  }\n  if (style.backgroundColor && typeof style.backgroundColor === 'string') {\n    style.backgroundColor = applyColorReplacement(style.backgroundColor, replacements);\n  }\n\n  return style;\n};\n\nconst TokenSpan = memo(\n  ({ token, replacements }: { replacements?: Record<string, string>; token: ThemedToken }) => {\n    return (\n      <span key={token.content} style={getTokenInlineStyle(token, replacements)}>\n        {token.content}\n      </span>\n    );\n  },\n  (prev, next) => prev.token === next.token,\n);\n\nconst TokenLine = memo(\n  ({ line, replacements }: { line: ThemedToken[]; replacements?: Record<string, string> }) => {\n    if (!line.length) {\n      return (\n        <span className=\"line\">\n          <span style={{ whiteSpace: 'pre' }}>{'\\u00A0'}</span>\n        </span>\n      );\n    }\n\n    return (\n      <span className=\"line\">\n        {line.map((token, tokenIndex) => (\n          <TokenSpan key={`token-${tokenIndex}`} replacements={replacements} token={token} />\n        ))}\n      </span>\n    );\n  },\n  (prev, next) => prev.line === next.line,\n);\n\nconst StreamRenderer = memo<StreamRendererProps>(\n  ({ children, className, enableTransformer, fallbackClassName, language, style, theme }) => {\n    const { cx } = useStyles();\n\n    // Safely handle empty or invalid children\n    const safeChildren = children ?? '';\n\n    const { streaming } = useHighlight(safeChildren, {\n      enableTransformer,\n      language,\n      streaming: true,\n      theme,\n    });\n\n    const lines = streaming?.lines;\n    const preStyle = streaming?.preStyle;\n    const replacements = streaming?.colorReplacements;\n\n    if (!lines || lines.length === 0) {\n      return (\n        <div className={fallbackClassName} dir=\"ltr\" style={style}>\n          <pre>\n            <code>{safeChildren}</code>\n          </pre>\n        </div>\n      );\n    }\n\n    return (\n      <div className={className} dir=\"ltr\" style={style}>\n        <pre className={cx('shiki', theme)} style={preStyle} tabIndex={0}>\n          <code style={{ display: 'flex', flexDirection: 'column', whiteSpace: 'pre' }}>\n            {lines.map((line, index) => (\n              <TokenLine key={`line-${index}`} line={line} replacements={replacements} />\n            ))}\n          </code>\n        </pre>\n      </div>\n    );\n  },\n);\n\nStreamRenderer.displayName = 'StreamRenderer';\n\nexport default StreamRenderer;\n"],"mappings":";;;;;;;;;AAqBA,MAAM,yBAAyB,OAAgB,iBAA0C;AACvF,KAAI,CAAC,SAAS,CAAC,aAAc,QAAO;AACpC,QAAO,aAAa,MAAM,aAAa,KAAK;;AAG9C,MAAM,sBAAsB,UAA0D;CACpF,MAAMA,aAA4B,EAAE;AACpC,QAAO,QAAQ,MAAM,CAAC,SAAS,CAAC,KAAK,WAAW;EAC9C,MAAM,gBAAgB,IAAI,WAAW,cAAc,GAAG,SAAS,KAAK,aAAa,CAAC;AAClF,EAAC,WAA+C,iBAAiB;GACjE;AACF,QAAO;;AAGT,MAAM,uBACJ,OACA,iBACkB;CAElB,MAAM,YAAY,mBADD,MAAM,aAAa,oBAAoB,MAAM,CAChB;AAC9C,KAAI,CAAC,aAAc,QAAO;EAAE,GAAG;EAAW,YAAY;EAAO;CAE7D,MAAMC,QAAuB;EAC3B,GAAG;EACH,YAAY;EACb;AAED,KAAI,MAAM,SAAS,OAAO,MAAM,UAAU,SACxC,OAAM,QAAQ,sBAAsB,MAAM,OAAO,aAAa;AAEhE,KAAI,MAAM,mBAAmB,OAAO,MAAM,oBAAoB,SAC5D,OAAM,kBAAkB,sBAAsB,MAAM,iBAAiB,aAAa;AAGpF,QAAO;;AAGT,MAAM,YAAY,MACf,EAAE,OAAO,mBAAkF;AAC1F,QACE,oBAAC;EAAyB,OAAO,oBAAoB,OAAO,aAAa;YACtE,MAAM;IADE,MAAM,QAEV;IAGV,MAAM,SAAS,KAAK,UAAU,KAAK,MACrC;AAED,MAAM,YAAY,MACf,EAAE,MAAM,mBAAmF;AAC1F,KAAI,CAAC,KAAK,OACR,QACE,oBAAC;EAAK,WAAU;YACd,oBAAC;GAAK,OAAO,EAAE,YAAY,OAAO;aAAG;IAAgB;GAChD;AAIX,QACE,oBAAC;EAAK,WAAU;YACb,KAAK,KAAK,OAAO,eAChB,oBAAC;GAAoD;GAAqB;KAA1D,SAAS,aAA0D,CACnF;GACG;IAGV,MAAM,SAAS,KAAK,SAAS,KAAK,KACpC;AAED,MAAM,iBAAiB,MACpB,EAAE,UAAU,WAAW,mBAAmB,mBAAmB,UAAU,OAAO,YAAY;CACzF,MAAM,EAAE,OAAO,WAAW;CAG1B,MAAM,eAAe,YAAY;CAEjC,MAAM,EAAE,cAAc,aAAa,cAAc;EAC/C;EACA;EACA,WAAW;EACX;EACD,CAAC;CAEF,MAAM,QAAQ,WAAW;CACzB,MAAM,WAAW,WAAW;CAC5B,MAAM,eAAe,WAAW;AAEhC,KAAI,CAAC,SAAS,MAAM,WAAW,EAC7B,QACE,oBAAC;EAAI,WAAW;EAAmB,KAAI;EAAa;YAClD,oBAAC,mBACC,oBAAC,oBAAM,eAAoB,GACvB;GACF;AAIV,QACE,oBAAC;EAAe;EAAW,KAAI;EAAa;YAC1C,oBAAC;GAAI,WAAW,GAAG,SAAS,MAAM;GAAE,OAAO;GAAU,UAAU;aAC7D,oBAAC;IAAK,OAAO;KAAE,SAAS;KAAQ,eAAe;KAAU,YAAY;KAAO;cACzE,MAAM,KAAK,MAAM,UAChB,oBAAC;KAAsC;KAAoB;OAA3C,QAAQ,QAAmD,CAC3E;KACG;IACH;GACF;EAGX;AAED,eAAe,cAAc;AAE7B,6BAAe"}
+{"version":3,"file":"StreamRenderer.mjs","names":["normalized: CSSProperties"],"sources":["../../../src/Highlighter/SyntaxHighlighter/StreamRenderer.tsx"],"sourcesContent":["'use client';\n\nimport { getTokenStyleObject } from '@shikijs/core';\nimport { cx } from 'antd-style';\nimport type { CSSProperties } from 'react';\nimport { memo } from 'react';\nimport type { BuiltinTheme, ThemedToken } from 'shiki';\n\nimport { useStreamHighlight } from '@/hooks/useStreamHighlight';\n\ninterface StreamRendererProps {\n  children: string;\n  className?: string;\n  enableTransformer?: boolean;\n  fallbackClassName?: string;\n  language: string;\n  style?: CSSProperties;\n  theme?: BuiltinTheme;\n}\n\nconst normalizeStyleKeys = (style: Record<string, string | number>): CSSProperties => {\n  const normalized: CSSProperties = {};\n  Object.entries(style).forEach(([key, value]) => {\n    const normalizedKey = key.replaceAll(/-([a-z])/g, (_, char) => char.toUpperCase());\n    (normalized as Record<string, string | number>)[normalizedKey] = value;\n  });\n  return normalized;\n};\n\nconst getTokenInlineStyle = (token: ThemedToken): CSSProperties => {\n  const rawStyle = token.htmlStyle || getTokenStyleObject(token);\n  const baseStyle = normalizeStyleKeys(rawStyle);\n  return { ...baseStyle, whiteSpace: 'pre' };\n};\n\nconst TokenSpan = memo(\n  ({ token }: { token: ThemedToken }) => {\n    return (\n      <span key={token.content} style={getTokenInlineStyle(token)}>\n        {token.content}\n      </span>\n    );\n  },\n  (prev, next) => prev.token === next.token,\n);\n\nconst TokenLine = memo(\n  ({ line }: { line: ThemedToken[] }) => {\n    if (!line.length) {\n      return (\n        <span className=\"line\">\n          <span style={{ whiteSpace: 'pre' }}>{'\\u00A0'}</span>\n        </span>\n      );\n    }\n\n    return (\n      <span className=\"line\">\n        {line.map((token, tokenIndex) => (\n          <TokenSpan key={`token-${tokenIndex}`} token={token} />\n        ))}\n      </span>\n    );\n  },\n  (prev, next) => prev.line === next.line,\n);\n\nconst StreamRenderer = memo<StreamRendererProps>(\n  ({ children, className, enableTransformer, fallbackClassName, language, style, theme }) => {\n    // Safely handle empty or invalid children\n    const safeChildren = children ?? '';\n\n    const streaming = useStreamHighlight(safeChildren, {\n      enableTransformer,\n      language,\n      streaming: true,\n      theme,\n    });\n\n    const lines = streaming?.lines;\n    const preStyle = streaming?.preStyle;\n\n    if (!lines || lines.length === 0) {\n      return (\n        <div className={fallbackClassName} dir=\"ltr\" style={style}>\n          <pre>\n            <code>{safeChildren}</code>\n          </pre>\n        </div>\n      );\n    }\n\n    return (\n      <div className={className} dir=\"ltr\" style={style}>\n        <pre className={cx('shiki', theme)} style={preStyle} tabIndex={0}>\n          <code style={{ display: 'flex', flexDirection: 'column', whiteSpace: 'pre' }}>\n            {lines.map((line, index) => (\n              <TokenLine key={`line-${index}`} line={line} />\n            ))}\n          </code>\n        </pre>\n      </div>\n    );\n  },\n);\n\nStreamRenderer.displayName = 'StreamRenderer';\n\nexport default StreamRenderer;\n"],"mappings":";;;;;;;;;AAoBA,MAAM,sBAAsB,UAA0D;CACpF,MAAMA,aAA4B,EAAE;AACpC,QAAO,QAAQ,MAAM,CAAC,SAAS,CAAC,KAAK,WAAW;EAC9C,MAAM,gBAAgB,IAAI,WAAW,cAAc,GAAG,SAAS,KAAK,aAAa,CAAC;AAClF,EAAC,WAA+C,iBAAiB;GACjE;AACF,QAAO;;AAGT,MAAM,uBAAuB,UAAsC;AAGjE,QAAO;EAAE,GADS,mBADD,MAAM,aAAa,oBAAoB,MAAM,CAChB;EACvB,YAAY;EAAO;;AAG5C,MAAM,YAAY,MACf,EAAE,YAAoC;AACrC,QACE,oBAAC;EAAyB,OAAO,oBAAoB,MAAM;YACxD,MAAM;IADE,MAAM,QAEV;IAGV,MAAM,SAAS,KAAK,UAAU,KAAK,MACrC;AAED,MAAM,YAAY,MACf,EAAE,WAAoC;AACrC,KAAI,CAAC,KAAK,OACR,QACE,oBAAC;EAAK,WAAU;YACd,oBAAC;GAAK,OAAO,EAAE,YAAY,OAAO;aAAG;IAAgB;GAChD;AAIX,QACE,oBAAC;EAAK,WAAU;YACb,KAAK,KAAK,OAAO,eAChB,oBAAC,aAA6C,SAA9B,SAAS,aAA8B,CACvD;GACG;IAGV,MAAM,SAAS,KAAK,SAAS,KAAK,KACpC;AAED,MAAM,iBAAiB,MACpB,EAAE,UAAU,WAAW,mBAAmB,mBAAmB,UAAU,OAAO,YAAY;CAEzF,MAAM,eAAe,YAAY;CAEjC,MAAM,YAAY,mBAAmB,cAAc;EACjD;EACA;EACA,WAAW;EACX;EACD,CAAC;CAEF,MAAM,QAAQ,WAAW;CACzB,MAAM,WAAW,WAAW;AAE5B,KAAI,CAAC,SAAS,MAAM,WAAW,EAC7B,QACE,oBAAC;EAAI,WAAW;EAAmB,KAAI;EAAa;YAClD,oBAAC,mBACC,oBAAC,oBAAM,eAAoB,GACvB;GACF;AAIV,QACE,oBAAC;EAAe;EAAW,KAAI;EAAa;YAC1C,oBAAC;GAAI,WAAW,GAAG,SAAS,MAAM;GAAE,OAAO;GAAU,UAAU;aAC7D,oBAAC;IAAK,OAAO;KAAE,SAAS;KAAQ,eAAe;KAAU,YAAY;KAAO;cACzE,MAAM,KAAK,MAAM,UAChB,oBAAC,aAAsC,QAAvB,QAAQ,QAAuB,CAC/C;KACG;IACH;GACF;EAGX;AAED,eAAe,cAAc;AAE7B,6BAAe"}

package/es/Highlighter/SyntaxHighlighter/index.d.mts

@@ -1,8 +1,8 @@
 import { SyntaxHighlighterProps } from "../type.mjs";
-import * as react47 from "react";
+import * as react15 from "react";
 
 //#region src/Highlighter/SyntaxHighlighter/index.d.ts
-declare const SyntaxHighlighter: react47.NamedExoticComponent<SyntaxHighlighterProps>;
+declare const SyntaxHighlighter: react15.NamedExoticComponent<SyntaxHighlighterProps>;
 //#endregion
 export { SyntaxHighlighter };
 //# sourceMappingURL=index.d.mts.map

package/es/Highlighter/SyntaxHighlighter/index.mjs

@@ -1,45 +1,17 @@
 '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 { variants } from "./style.mjs";
+import { memo } from "react";
 import { jsx } from "react/jsx-runtime";
-import { cva } from "class-variance-authority";
+import { cx } from "antd-style";
 
 //#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: {
-			animated: false,
-			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
-			},
-			animated: {
-				true: styles.animated,
-				false: null
-			}
-		}
-	}), [styles]);
 	const shikiClassName = cx(variants({
 		animated,
 		shiki: true,

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

@@ -1 +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            animated: false,\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            animated: {\n              true: styles.animated,\n              false: null,\n            },\n          },\n          /* eslint-enable sort-keys-fix/sort-keys-fix */\n        }),\n      [styles],\n    );\n\n    const shikiClassName = cx(\n      variants({ animated, shiki: true, showBackground, variant }),\n      className,\n    );\n    const fallbackClassName = cx(\n      variants({ animated, shiki: false, showBackground, variant }),\n      className,\n    );\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,UAAU;GACV,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;GACD,UAAU;IACR,MAAM,OAAO;IACb,OAAO;IACR;GACF;EAEF,CAAC,EACJ,CAAC,OAAO,CACT;CAED,MAAM,iBAAiB,GACrB,SAAS;EAAE;EAAU,OAAO;EAAM;EAAgB;EAAS,CAAC,EAC5D,UACD;CACD,MAAM,oBAAoB,GACxB,SAAS;EAAE;EAAU,OAAO;EAAO;EAAgB;EAAS,CAAC,EAC7D,UACD;AAED,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"}
+{"version":3,"file":"index.mjs","names":["StreamRenderer","StaticRenderer"],"sources":["../../../src/Highlighter/SyntaxHighlighter/index.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { memo } from 'react';\n\nimport type { SyntaxHighlighterProps } from '../type';\nimport StaticRenderer from './StaticRenderer';\nimport StreamRenderer from './StreamRenderer';\nimport { variants } 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 isDefaultTheme = theme === 'lobe-theme' || !theme;\n    const showBackground = !isDefaultTheme && variant === 'filled';\n    const resolvedTheme = isDefaultTheme ? undefined : theme;\n\n    const shikiClassName = cx(\n      variants({ animated, shiki: true, showBackground, variant }),\n      className,\n    );\n    const fallbackClassName = cx(\n      variants({ animated, shiki: false, showBackground, variant }),\n      className,\n    );\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,iBAAiB,UAAU,gBAAgB,CAAC;CAClD,MAAM,iBAAiB,CAAC,kBAAkB,YAAY;CACtD,MAAM,gBAAgB,iBAAiB,SAAY;CAEnD,MAAM,iBAAiB,GACrB,SAAS;EAAE;EAAU,OAAO;EAAM;EAAgB;EAAS,CAAC,EAC5D,UACD;CACD,MAAM,oBAAoB,GACxB,SAAS;EAAE;EAAU,OAAO;EAAO;EAAgB;EAAS,CAAC,EAC7D,UACD;AAED,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

@@ -1,4 +1,5 @@
-import { createStyles, keyframes } from "antd-style";
+import { createStaticStyles, cx, keyframes } from "antd-style";
+import { cva } from "class-variance-authority";
 
 //#region src/Highlighter/SyntaxHighlighter/style.ts
 const fadeIn = keyframes`
@@ -9,7 +10,7 @@ const fadeIn = keyframes`
       opacity: 1;
     }
   `;
-const useStyles = createStyles(({ css: css$1, token, cx: cx$1, prefixCls }) => {
+const styles = createStaticStyles(({ css: css$1, cssVar: cssVar$1 }) => {
 	return {
 		animated: css$1`
       .animate-fade-in,
@@ -43,10 +44,9 @@ const useStyles = createStyles(({ css: css$1, token, cx: cx$1, prefixCls }) => {
       pre {
         overflow-x: auto;
         margin: 0;
-        padding: 0;
       }
     `,
-		shiki: cx$1(`${prefixCls}-highlighter-shiki`, css$1`
+		shiki: cx("ant-highlighter-highlighter-shiki", css$1`
         pre {
           code {
             display: block;
@@ -69,29 +69,29 @@ const useStyles = createStyles(({ css: css$1, token, cx: cx$1, prefixCls }) => {
           }
 
           .highlighted {
-            background: ${token.colorFillTertiary};
+            background: ${cssVar$1.colorFillTertiary};
 
             &.warning {
-              background: ${token.colorWarningBg};
+              background: ${cssVar$1.colorWarningBg};
             }
 
             &.error {
-              background: ${token.colorErrorBg};
+              background: ${cssVar$1.colorErrorBg};
             }
           }
 
           .highlighted-word {
             padding-block: 0.1em;
             padding-inline: 0.2em;
-            border: 1px solid ${token.colorBorderSecondary};
-            border-radius: ${token.borderRadius}px;
+            border: 1px solid ${cssVar$1.colorBorderSecondary};
+            border-radius: ${cssVar$1.borderRadius};
 
-            background: ${token.colorFillTertiary};
+            background: ${cssVar$1.colorFillTertiary};
           }
 
           .diff {
             &.remove {
-              background: ${token.colorErrorBg};
+              background: ${cssVar$1.colorErrorBg};
 
               &::before {
                 content: '-';
@@ -101,12 +101,12 @@ const useStyles = createStyles(({ css: css$1, token, cx: cx$1, prefixCls }) => {
 
                 display: inline-block;
 
-                color: ${token.colorErrorText};
+                color: ${cssVar$1.colorErrorText};
               }
             }
 
             &.add {
-              background: ${token.colorSuccessBg};
+              background: ${cssVar$1.colorSuccessBg};
 
               &::before {
                 content: '+';
@@ -116,18 +116,45 @@ const useStyles = createStyles(({ css: css$1, token, cx: cx$1, prefixCls }) => {
 
                 display: inline-block;
 
-                color: ${token.colorSuccessText};
+                color: ${cssVar$1.colorSuccessText};
               }
             }
           }
         }
       `),
 		unshiki: css$1`
-      color: ${token.colorTextDescription};
+      color: ${cssVar$1.colorTextDescription};
     `
 	};
 });
+const variants = cva(styles.root, {
+	defaultVariants: {
+		animated: false,
+		shiki: true,
+		showBackground: false,
+		variant: "borderless"
+	},
+	variants: {
+		shiki: {
+			false: styles.unshiki,
+			true: styles.shiki
+		},
+		showBackground: {
+			false: styles.noBackground,
+			true: null
+		},
+		animated: {
+			true: styles.animated,
+			false: null
+		},
+		variant: {
+			filled: styles.padding,
+			outlined: styles.padding,
+			borderless: styles.noPadding
+		}
+	}
+});
 
 //#endregion
-export { useStyles };
+export { variants };
 //# sourceMappingURL=style.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":["cx"],"sources":["../../../src/Highlighter/SyntaxHighlighter/style.ts"],"sourcesContent":["import { createStyles, keyframes } from 'antd-style';\n\nconst fadeIn = keyframes`\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  `;\n\nexport const useStyles = createStyles(({ css, token, cx, prefixCls }) => {\n  return {\n    animated: css`\n      .animate-fade-in,\n      span.line > span,\n      code:not(:has(span.line)) {\n        opacity: 1;\n        animation: ${fadeIn} 1s ease-in-out;\n      }\n    `,\n\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,MAAM,SAAS,SAAS;;;;;;;;AASxB,MAAa,YAAY,cAAc,EAAE,YAAK,OAAO,UAAI,gBAAgB;AACvE,QAAO;EACL,UAAU,KAAG;;;;;qBAKI,OAAO;;;EAIxB,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"}
+{"version":3,"file":"style.mjs","names":["cssVar"],"sources":["../../../src/Highlighter/SyntaxHighlighter/style.ts"],"sourcesContent":["import { createStaticStyles, cx, keyframes } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nconst fadeIn = keyframes`\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  `;\n\nexport const styles = createStaticStyles(({ css, cssVar }) => {\n  return {\n    animated: css`\n      .animate-fade-in,\n      span.line > span,\n      code:not(:has(span.line)) {\n        opacity: 1;\n        animation: ${fadeIn} 1s ease-in-out;\n      }\n    `,\n\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      }\n    `,\n    shiki: cx(\n      'ant-highlighter-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: ${cssVar.colorFillTertiary};\n\n            &.warning {\n              background: ${cssVar.colorWarningBg};\n            }\n\n            &.error {\n              background: ${cssVar.colorErrorBg};\n            }\n          }\n\n          .highlighted-word {\n            padding-block: 0.1em;\n            padding-inline: 0.2em;\n            border: 1px solid ${cssVar.colorBorderSecondary};\n            border-radius: ${cssVar.borderRadius};\n\n            background: ${cssVar.colorFillTertiary};\n          }\n\n          .diff {\n            &.remove {\n              background: ${cssVar.colorErrorBg};\n\n              &::before {\n                content: '-';\n\n                position: absolute;\n                inset-inline-start: 4px;\n\n                display: inline-block;\n\n                color: ${cssVar.colorErrorText};\n              }\n            }\n\n            &.add {\n              background: ${cssVar.colorSuccessBg};\n\n              &::before {\n                content: '+';\n\n                position: absolute;\n                inset-inline-start: 4px;\n\n                display: inline-block;\n\n                color: ${cssVar.colorSuccessText};\n              }\n            }\n          }\n        }\n      `,\n    ),\n    unshiki: css`\n      color: ${cssVar.colorTextDescription};\n    `,\n  };\n});\n\nexport const variants = cva(styles.root, {\n  defaultVariants: {\n    animated: false,\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    showBackground: {\n      false: styles.noBackground,\n      true: null,\n    },\n    animated: {\n      true: styles.animated,\n      false: null,\n    },\n    variant: {\n      filled: styles.padding,\n      outlined: styles.padding,\n      borderless: styles.noPadding,\n    },\n  },\n  /* eslint-enable sort-keys-fix/sort-keys-fix */\n});\n"],"mappings":";;;;AAGA,MAAM,SAAS,SAAS;;;;;;;;AASxB,MAAa,SAAS,oBAAoB,EAAE,YAAK,uBAAa;AAC5D,QAAO;EACL,UAAU,KAAG;;;;;qBAKI,OAAO;;;EAIxB,cAAc,KAAG;;;;;EAMjB,WAAW,KAAG;;;;;EAMd,SAAS,KAAG;;;;;EAKZ,MAAM,KAAG;;;;;;;;;;;EAWT,OAAO,GACL,qCACA,KAAG;;;;;;;;;;;;;;;;;;;;;;;0BAuBiBA,SAAO,kBAAkB;;;4BAGvBA,SAAO,eAAe;;;;4BAItBA,SAAO,aAAa;;;;;;;gCAOhBA,SAAO,qBAAqB;6BAC/BA,SAAO,aAAa;;0BAEvBA,SAAO,kBAAkB;;;;;4BAKvBA,SAAO,aAAa;;;;;;;;;;yBAUvBA,SAAO,eAAe;;;;;4BAKnBA,SAAO,eAAe;;;;;;;;;;yBAUzBA,SAAO,iBAAiB;;;;;QAM5C;EACD,SAAS,KAAG;eACDA,SAAO,qBAAqB;;EAExC;EACD;AAEF,MAAa,WAAW,IAAI,OAAO,MAAM;CACvC,iBAAiB;EACf,UAAU;EACV,OAAO;EACP,gBAAgB;EAChB,SAAS;EACV;CAED,UAAU;EACR,OAAO;GACL,OAAO,OAAO;GACd,MAAM,OAAO;GACd;EACD,gBAAgB;GACd,OAAO,OAAO;GACd,MAAM;GACP;EACD,UAAU;GACR,MAAM,OAAO;GACb,OAAO;GACR;EACD,SAAS;GACP,QAAQ,OAAO;GACf,UAAU,OAAO;GACjB,YAAY,OAAO;GACpB;EACF;CAEF,CAAC"}

package/es/Highlighter/style.mjs

@@ -1,13 +1,15 @@
-import { createStyles } from "antd-style";
+import { staticStylish } from "../styles/theme/customStylishStatic.mjs";
+import { createStaticStyles, cx } from "antd-style";
+import { cva } from "class-variance-authority";
 
 //#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`;
+const actionsHoverCls = "ant-highlighter-highlighter-hover-actions";
+const langHoverCls = "ant-highlighter-highlighter-hover-lang";
+const expandCls = "ant-highlighter-highlighter-body-expand";
+const prefix = "ant-highlighter";
+const styles = createStaticStyles(({ css: css$1, cssVar: cssVar$1 }) => {
 	return {
-		actions: cx$1(actionsHoverCls, css$1`
+		actions: cx(actionsHoverCls, css$1`
         position: absolute;
         z-index: 2;
         inset-block-start: 8px;
@@ -19,14 +21,14 @@ const useStyles = createStyles(({ token, css: css$1, cx: cx$1, prefixCls, stylis
       height: 0;
       opacity: 0;
     `,
-		bodyExpand: cx$1(expandCls),
+		bodyExpand: cx(expandCls),
 		bodyRoot: css$1`
       overflow: hidden;
-      transition: opacity 0.25s ${token.motionEaseOut};
+      transition: opacity 0.25s ${cssVar$1.motionEaseOut};
     `,
-		borderless: stylish.variantBorderlessWithoutHover,
-		filled: cx$1(stylish.variantFilledWithoutHover, css$1`
-        background: ${token.colorFillQuaternary};
+		borderless: staticStylish.variantBorderlessWithoutHover,
+		filled: cx(staticStylish.variantFilledWithoutHover, css$1`
+        background: ${cssVar$1.colorFillQuaternary};
       `),
 		headerBorderless: css$1`
       padding-inline: 0;
@@ -36,7 +38,7 @@ const useStyles = createStyles(({ token, css: css$1, cx: cx$1, prefixCls, stylis
     `,
 		headerOutlined: css$1`
       & + .${expandCls} {
-        border-block-start: 1px solid ${token.colorFillQuaternary};
+        border-block-start: 1px solid ${cssVar$1.colorFillQuaternary};
       }
     `,
 		headerRoot: css$1`
@@ -44,17 +46,17 @@ const useStyles = createStyles(({ token, css: css$1, cx: cx$1, prefixCls, stylis
       position: relative;
       padding: 4px;
     `,
-		lang: cx$1(langHoverCls, stylish.blur, css$1`
+		lang: cx(langHoverCls, staticStylish.blur, css$1`
         position: absolute;
         z-index: 2;
         inset-block-end: 8px;
         inset-inline-end: 8px;
 
-        font-family: ${token.fontFamilyCode};
-        color: ${token.colorTextSecondary};
+        font-family: ${cssVar$1.fontFamilyCode};
+        color: ${cssVar$1.colorTextSecondary};
 
         opacity: 0;
-        background: ${token.colorFillQuaternary};
+        background: ${cssVar$1.colorFillQuaternary};
 
         transition: opacity 0.1s;
       `),
@@ -64,28 +66,28 @@ const useStyles = createStyles(({ token, css: css$1, cx: cx$1, prefixCls, stylis
         text-wrap: nowrap;
       }
     `,
-		outlined: stylish.variantOutlinedWithoutHover,
-		root: cx$1(prefix, css$1`
+		outlined: staticStylish.variantOutlinedWithoutHover,
+		root: cx(prefix, css$1`
         position: relative;
 
         overflow: hidden;
 
         width: 100%;
-        border-radius: ${token.borderRadius}px;
+        border-radius: ${cssVar$1.borderRadius};
 
-        transition: background-color 100ms ${token.motionEaseOut};
+        transition: background-color 100ms ${cssVar$1.motionEaseOut};
 
         .languageTitle {
           opacity: 0.5;
           filter: grayscale(100%);
           transition:
             opacity,
-            grayscale 0.2s ${token.motionEaseInOut};
+            grayscale 0.2s ${cssVar$1.motionEaseInOut};
         }
 
         .panel-actions {
           opacity: 0;
-          transition: opacity 0.2s ${token.motionEaseInOut};
+          transition: opacity 0.2s ${cssVar$1.motionEaseInOut};
         }
 
         &:hover {
@@ -116,7 +118,7 @@ const useStyles = createStyles(({ token, css: css$1, cx: cx$1, prefixCls, stylis
           background: transparent !important;
         }
       `),
-		shadow: stylish.shadow,
+		shadow: staticStylish.shadow,
 		wrap: css$1`
       pre,
       code {
@@ -125,7 +127,44 @@ const useStyles = createStyles(({ token, css: css$1, cx: cx$1, prefixCls, stylis
     `
 	};
 });
+const variants = cva(styles.root, {
+	defaultVariants: {
+		shadow: false,
+		variant: "filled",
+		wrap: false
+	},
+	variants: {
+		variant: {
+			filled: styles.filled,
+			outlined: styles.outlined,
+			borderless: styles.borderless
+		},
+		shadow: {
+			false: null,
+			true: styles.shadow
+		},
+		wrap: {
+			false: styles.nowrap,
+			true: styles.wrap
+		}
+	}
+});
+const headerVariants = cva(styles.headerRoot, {
+	defaultVariants: { variant: "filled" },
+	variants: { variant: {
+		filled: cx(styles.headerFilled, styles.headerOutlined),
+		outlined: styles.headerOutlined,
+		borderless: styles.headerBorderless
+	} }
+});
+const bodyVariants = cva(styles.bodyRoot, {
+	defaultVariants: { expand: true },
+	variants: { expand: {
+		false: styles.bodyCollapsed,
+		true: styles.bodyExpand
+	} }
+});
 
 //#endregion
-export { useStyles };
+export { bodyVariants, headerVariants, styles, variants };
 //# sourceMappingURL=style.mjs.map

package/es/Highlighter/style.mjs.map

@@ -1 +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"}
+{"version":3,"file":"style.mjs","names":["cssVar","lobeStaticStylish"],"sources":["../../src/Highlighter/style.ts"],"sourcesContent":["import { createStaticStyles, cx } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nimport { lobeStaticStylish } from '@/styles';\n\n// 动态类名常量（用于 className）\nexport const actionsHoverCls = 'ant-highlighter-highlighter-hover-actions';\nexport const langHoverCls = 'ant-highlighter-highlighter-hover-lang';\nexport const expandCls = 'ant-highlighter-highlighter-body-expand';\nexport const prefix = 'ant-highlighter';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => {\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 ${cssVar.motionEaseOut};\n    `,\n    borderless: lobeStaticStylish.variantBorderlessWithoutHover,\n    filled: cx(\n      lobeStaticStylish.variantFilledWithoutHover,\n      css`\n        background: ${cssVar.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 ${cssVar.colorFillQuaternary};\n      }\n    `,\n\n    headerRoot: css`\n      cursor: pointer;\n      position: relative;\n      padding: 4px;\n    `,\n\n    lang: cx(\n      langHoverCls,\n      lobeStaticStylish.blur,\n      css`\n        position: absolute;\n        z-index: 2;\n        inset-block-end: 8px;\n        inset-inline-end: 8px;\n\n        font-family: ${cssVar.fontFamilyCode};\n        color: ${cssVar.colorTextSecondary};\n\n        opacity: 0;\n        background: ${cssVar.colorFillQuaternary};\n\n        transition: opacity 0.1s;\n      `,\n    ),\n    nowrap: css`\n      pre,\n      code {\n        text-wrap: nowrap;\n      }\n    `,\n    outlined: lobeStaticStylish.variantOutlinedWithoutHover,\n    root: cx(\n      prefix,\n      css`\n        position: relative;\n\n        overflow: hidden;\n\n        width: 100%;\n        border-radius: ${cssVar.borderRadius};\n\n        transition: background-color 100ms ${cssVar.motionEaseOut};\n\n        .languageTitle {\n          opacity: 0.5;\n          filter: grayscale(100%);\n          transition:\n            opacity,\n            grayscale 0.2s ${cssVar.motionEaseInOut};\n        }\n\n        .panel-actions {\n          opacity: 0;\n          transition: opacity 0.2s ${cssVar.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: lobeStaticStylish.shadow,\n    wrap: css`\n      pre,\n      code {\n        text-wrap: wrap;\n      }\n    `,\n  };\n});\n\nexport const variants = cva(styles.root, {\n  defaultVariants: {\n    shadow: false,\n    variant: 'filled',\n    wrap: false,\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    shadow: {\n      false: null,\n      true: styles.shadow,\n    },\n    wrap: {\n      false: styles.nowrap,\n      true: styles.wrap,\n    },\n  },\n  /* eslint-enable sort-keys-fix/sort-keys-fix */\n});\n\nexport const headerVariants = cva(styles.headerRoot, {\n  defaultVariants: {\n    variant: 'filled',\n  },\n  /* eslint-disable sort-keys-fix/sort-keys-fix */\n  variants: {\n    variant: {\n      filled: cx(styles.headerFilled, styles.headerOutlined),\n      outlined: styles.headerOutlined,\n      borderless: styles.headerBorderless,\n    },\n  },\n  /* eslint-enable sort-keys-fix/sort-keys-fix */\n});\n\nexport const bodyVariants = cva(styles.bodyRoot, {\n  defaultVariants: {\n    expand: true,\n  },\n  variants: {\n    expand: {\n      false: styles.bodyCollapsed,\n      true: styles.bodyExpand,\n    },\n  },\n});\n"],"mappings":";;;;;AAMA,MAAa,kBAAkB;AAC/B,MAAa,eAAe;AAC5B,MAAa,YAAY;AACzB,MAAa,SAAS;AAEtB,MAAa,SAAS,oBAAoB,EAAE,YAAK,uBAAa;AAC5D,QAAO;EACL,SAAS,GACP,iBACA,KAAG;;;;;;;QAQJ;EACD,eAAe,KAAG;;;;EAIlB,YAAY,GAAG,UAAU;EACzB,UAAU,KAAG;;kCAEiBA,SAAO,cAAc;;EAEnD,YAAYC,cAAkB;EAC9B,QAAQ,GACNA,cAAkB,2BAClB,KAAG;sBACaD,SAAO,oBAAoB;QAE5C;EACD,kBAAkB,KAAG;;;EAIrB,cAAc,KAAG;;;EAIjB,gBAAgB,KAAG;aACV,UAAU;wCACiBA,SAAO,oBAAoB;;;EAI/D,YAAY,KAAG;;;;;EAMf,MAAM,GACJ,cACAC,cAAkB,MAClB,KAAG;;;;;;uBAMcD,SAAO,eAAe;iBAC5BA,SAAO,mBAAmB;;;sBAGrBA,SAAO,oBAAoB;;;QAI5C;EACD,QAAQ,KAAG;;;;;;EAMX,UAAUC,cAAkB;EAC5B,MAAM,GACJ,QACA,KAAG;;;;;;yBAMgBD,SAAO,aAAa;;6CAEAA,SAAO,cAAc;;;;;;;6BAOrCA,SAAO,gBAAgB;;;;;qCAKfA,SAAO,gBAAgB;;;;;;;;;;;;;aAa/C,gBAAgB;;;;aAIhB,aAAa;;;;;;;;;;;;;QAcrB;EACD,QAAQC,cAAkB;EAC1B,MAAM,KAAG;;;;;;EAMV;EACD;AAEF,MAAa,WAAW,IAAI,OAAO,MAAM;CACvC,iBAAiB;EACf,QAAQ;EACR,SAAS;EACT,MAAM;EACP;CAED,UAAU;EACR,SAAS;GACP,QAAQ,OAAO;GACf,UAAU,OAAO;GACjB,YAAY,OAAO;GACpB;EACD,QAAQ;GACN,OAAO;GACP,MAAM,OAAO;GACd;EACD,MAAM;GACJ,OAAO,OAAO;GACd,MAAM,OAAO;GACd;EACF;CAEF,CAAC;AAEF,MAAa,iBAAiB,IAAI,OAAO,YAAY;CACnD,iBAAiB,EACf,SAAS,UACV;CAED,UAAU,EACR,SAAS;EACP,QAAQ,GAAG,OAAO,cAAc,OAAO,eAAe;EACtD,UAAU,OAAO;EACjB,YAAY,OAAO;EACpB,EACF;CAEF,CAAC;AAEF,MAAa,eAAe,IAAI,OAAO,UAAU;CAC/C,iBAAiB,EACf,QAAQ,MACT;CACD,UAAU,EACR,QAAQ;EACN,OAAO,OAAO;EACd,MAAM,OAAO;EACd,EACF;CACF,CAAC"}