@lobehub/ui 4.3.2 → 4.3.3

package/es/awesome/GridBackground/GridBackground.d.mts

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

package/es/awesome/GridBackground/GridBackground.mjs

@@ -1,11 +1,13 @@
 'use client';
 
 import Grid_default from "./components/Grid.mjs";
-import { useStyles } from "./style.mjs";
+import { styles } from "./style.mjs";
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { useSize } from "ahooks";
+import { cssVar, cx, useTheme } from "antd-style";
 import { shuffle } from "es-toolkit/compat";
+import { useSize } from "ahooks";
+import chroma from "chroma-js";
 
 //#region src/awesome/GridBackground/GridBackground.tsx
 const initialGroup = [
@@ -28,13 +30,29 @@ const initialGroup = [
 const GridBackground = memo(({ flip, reverse, showBackground, backgroundColor, random, animationDuration = 8, className, colorFront, colorBack, strokeWidth, style, animation, ...rest }) => {
 	const ref = useRef(null);
 	const size = useSize(ref);
-	const { styles, cx, theme } = useStyles({
+	const theme = useTheme();
+	const backgroundCssVariables = useMemo(() => {
+		if (!showBackground) return {};
+		const scale = chroma.bezier([
+			theme.colorText,
+			backgroundColor || "blue",
+			theme.colorBgLayout
+		]).scale().mode("lch").correctLightness().colors(6);
+		return {
+			"--grid-background-color-1": scale[1],
+			"--grid-background-color-2": scale[2],
+			"--grid-background-color-3": scale[3],
+			"--grid-background-color-4": scale[4]
+		};
+	}, [
+		showBackground,
 		backgroundColor,
-		reverse
-	});
+		theme.colorText,
+		theme.colorBgLayout
+	]);
 	const gridProps = useMemo(() => ({
-		className: styles.highlight,
-		color: colorFront || theme.colorText,
+		className: reverse ? styles.highlightReverse : styles.highlight,
+		color: colorFront || cssVar.colorText,
 		strokeWidth
 	}), [
 		reverse,
@@ -75,14 +93,17 @@ const GridBackground = memo(({ flip, reverse, showBackground, backgroundColor, r
 		...rest,
 		children: [
 			/* @__PURE__ */ jsx(Grid_default, {
-				color: colorBack || theme.colorBorder,
+				color: colorBack || cssVar.colorBorder,
 				strokeWidth,
 				style: { zIndex: 2 }
 			}),
 			animation && /* @__PURE__ */ jsx(HighlightGrid, {}),
 			showBackground && /* @__PURE__ */ jsx("div", {
 				className: styles.backgroundContainer,
-				style: size ? { fontSize: size.width / 80 } : {},
+				style: {
+					...size ? { fontSize: size.width / 80 } : {},
+					...backgroundCssVariables
+				},
 				children: /* @__PURE__ */ jsx("div", { className: styles.background })
 			})
 		]

package/es/awesome/GridBackground/GridBackground.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"GridBackground.mjs","names":["gridProps: GridProps","Grid"],"sources":["../../../src/awesome/GridBackground/GridBackground.tsx"],"sourcesContent":["'use client';\n\nimport { useSize } from 'ahooks';\nimport { shuffle } from 'es-toolkit/compat';\nimport { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport Grid, { type GridProps } from './components/Grid';\nimport { useStyles } from './style';\nimport type { GridBackgroundProps } from './type';\n\nconst initialGroup = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14];\n\nconst GridBackground = memo<GridBackgroundProps>(\n  ({\n    flip,\n    reverse,\n    showBackground,\n    backgroundColor,\n    random,\n    animationDuration = 8,\n    className,\n    colorFront,\n    colorBack,\n    strokeWidth,\n    style,\n    animation,\n    ...rest\n  }) => {\n    const ref = useRef(null);\n    const size = useSize(ref);\n    const { styles, cx, theme } = useStyles({ backgroundColor, reverse });\n\n    const gridProps: GridProps = useMemo(\n      () => ({\n        className: styles.highlight,\n        color: colorFront || theme.colorText,\n        strokeWidth,\n      }),\n      [reverse, colorFront, strokeWidth],\n    );\n\n    const [group, setGroup] = useState(random ? initialGroup : undefined);\n    useEffect(() => {\n      setGroup(random ? shuffle(initialGroup) : undefined);\n    }, [random]);\n\n    const HighlightGrid = useCallback(() => {\n      if (!group)\n        return <Grid style={{ '--duration': `${animationDuration}s` } as any} {...gridProps} />;\n\n      return (\n        <>\n          {group.map((item, index) => {\n            return (\n              <Grid\n                key={item}\n                linePick={item}\n                style={\n                  {\n                    '--delay': `${index + Math.random()}s`,\n                    '--duration': `${animationDuration}s`,\n                  } as any\n                }\n                {...gridProps}\n              />\n            );\n          })}\n        </>\n      );\n    }, [group, animationDuration, gridProps]);\n\n    return (\n      <div\n        className={cx(styles.container, className)}\n        ref={ref}\n        style={flip ? { transform: 'scaleY(-1)', ...style } : style}\n        {...rest}\n      >\n        <Grid\n          color={colorBack || theme.colorBorder}\n          strokeWidth={strokeWidth}\n          style={{ zIndex: 2 }}\n        />\n        {animation && <HighlightGrid />}\n        {showBackground && (\n          <div\n            className={styles.backgroundContainer}\n            style={size ? { fontSize: size.width / 80 } : {}}\n          >\n            <div className={styles.background} />\n          </div>\n        )}\n      </div>\n    );\n  },\n);\n\nGridBackground.displayName = 'GridBackground';\n\nexport default GridBackground;\n"],"mappings":";;;;;;;;;;AAUA,MAAM,eAAe;CAAC;CAAG;CAAG;CAAG;CAAG;CAAG;CAAG;CAAG;CAAG;CAAG;CAAG;CAAI;CAAI;CAAI;CAAI;CAAG;AAEvE,MAAM,iBAAiB,MACpB,EACC,MACA,SACA,gBACA,iBACA,QACA,oBAAoB,GACpB,WACA,YACA,WACA,aACA,OACA,WACA,GAAG,WACC;CACJ,MAAM,MAAM,OAAO,KAAK;CACxB,MAAM,OAAO,QAAQ,IAAI;CACzB,MAAM,EAAE,QAAQ,IAAI,UAAU,UAAU;EAAE;EAAiB;EAAS,CAAC;CAErE,MAAMA,YAAuB,eACpB;EACL,WAAW,OAAO;EAClB,OAAO,cAAc,MAAM;EAC3B;EACD,GACD;EAAC;EAAS;EAAY;EAAY,CACnC;CAED,MAAM,CAAC,OAAO,YAAY,SAAS,SAAS,eAAe,OAAU;AACrE,iBAAgB;AACd,WAAS,SAAS,QAAQ,aAAa,GAAG,OAAU;IACnD,CAAC,OAAO,CAAC;CAEZ,MAAM,gBAAgB,kBAAkB;AACtC,MAAI,CAAC,MACH,QAAO,oBAACC;GAAK,OAAO,EAAE,cAAc,GAAG,kBAAkB,IAAI;GAAS,GAAI;IAAa;AAEzF,SACE,4CACG,MAAM,KAAK,MAAM,UAAU;AAC1B,UACE,oBAACA;IAEC,UAAU;IACV,OACE;KACE,WAAW,GAAG,QAAQ,KAAK,QAAQ,CAAC;KACpC,cAAc,GAAG,kBAAkB;KACpC;IAEH,GAAI;MARC,KASL;IAEJ,GACD;IAEJ;EAAC;EAAO;EAAmB;EAAU,CAAC;AAEzC,QACE,qBAAC;EACC,WAAW,GAAG,OAAO,WAAW,UAAU;EACrC;EACL,OAAO,OAAO;GAAE,WAAW;GAAc,GAAG;GAAO,GAAG;EACtD,GAAI;;GAEJ,oBAACA;IACC,OAAO,aAAa,MAAM;IACb;IACb,OAAO,EAAE,QAAQ,GAAG;KACpB;GACD,aAAa,oBAAC,kBAAgB;GAC9B,kBACC,oBAAC;IACC,WAAW,OAAO;IAClB,OAAO,OAAO,EAAE,UAAU,KAAK,QAAQ,IAAI,GAAG,EAAE;cAEhD,oBAAC,SAAI,WAAW,OAAO,aAAc;KACjC;;GAEJ;EAGX;AAED,eAAe,cAAc;AAE7B,6BAAe"}
+{"version":3,"file":"GridBackground.mjs","names":["gridProps: GridProps","Grid"],"sources":["../../../src/awesome/GridBackground/GridBackground.tsx"],"sourcesContent":["'use client';\n\nimport { useSize } from 'ahooks';\nimport { cssVar, cx, useTheme } from 'antd-style';\nimport chroma from 'chroma-js';\nimport { shuffle } from 'es-toolkit/compat';\nimport { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport Grid, { type GridProps } from './components/Grid';\nimport { styles } from './style';\nimport type { GridBackgroundProps } from './type';\n\nconst initialGroup = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14];\n\nconst GridBackground = memo<GridBackgroundProps>(\n  ({\n    flip,\n    reverse,\n    showBackground,\n    backgroundColor,\n    random,\n    animationDuration = 8,\n    className,\n    colorFront,\n    colorBack,\n    strokeWidth,\n    style,\n    animation,\n    ...rest\n  }) => {\n    const ref = useRef(null);\n    const size = useSize(ref);\n    const theme = useTheme();\n\n    const backgroundCssVariables = useMemo<Record<string, string>>(() => {\n      if (!showBackground) return {} as Record<string, string>;\n\n      const scale = chroma\n        .bezier([theme.colorText, backgroundColor || 'blue', theme.colorBgLayout])\n        .scale()\n        .mode('lch')\n        .correctLightness()\n        .colors(6);\n\n      return {\n        '--grid-background-color-1': scale[1],\n        '--grid-background-color-2': scale[2],\n        '--grid-background-color-3': scale[3],\n        '--grid-background-color-4': scale[4],\n      };\n    }, [showBackground, backgroundColor, theme.colorText, theme.colorBgLayout]);\n\n    const gridProps: GridProps = useMemo(\n      () => ({\n        className: reverse ? styles.highlightReverse : styles.highlight,\n        color: colorFront || cssVar.colorText,\n        strokeWidth,\n      }),\n      [reverse, colorFront, strokeWidth],\n    );\n\n    const [group, setGroup] = useState(random ? initialGroup : undefined);\n    useEffect(() => {\n      setGroup(random ? shuffle(initialGroup) : undefined);\n    }, [random]);\n\n    const HighlightGrid = useCallback(() => {\n      if (!group)\n        return <Grid style={{ '--duration': `${animationDuration}s` } as any} {...gridProps} />;\n\n      return (\n        <>\n          {group.map((item, index) => {\n            return (\n              <Grid\n                key={item}\n                linePick={item}\n                style={\n                  {\n                    '--delay': `${index + Math.random()}s`,\n                    '--duration': `${animationDuration}s`,\n                  } as any\n                }\n                {...gridProps}\n              />\n            );\n          })}\n        </>\n      );\n    }, [group, animationDuration, gridProps]);\n\n    return (\n      <div\n        className={cx(styles.container, className)}\n        ref={ref}\n        style={flip ? { transform: 'scaleY(-1)', ...style } : style}\n        {...rest}\n      >\n        <Grid\n          color={colorBack || cssVar.colorBorder}\n          strokeWidth={strokeWidth}\n          style={{ zIndex: 2 }}\n        />\n        {animation && <HighlightGrid />}\n        {showBackground && (\n          <div\n            className={styles.backgroundContainer}\n            style={{\n              ...(size ? { fontSize: size.width / 80 } : {}),\n              ...backgroundCssVariables,\n            }}\n          >\n            <div className={styles.background} />\n          </div>\n        )}\n      </div>\n    );\n  },\n);\n\nGridBackground.displayName = 'GridBackground';\n\nexport default GridBackground;\n"],"mappings":";;;;;;;;;;;;AAYA,MAAM,eAAe;CAAC;CAAG;CAAG;CAAG;CAAG;CAAG;CAAG;CAAG;CAAG;CAAG;CAAG;CAAI;CAAI;CAAI;CAAI;CAAG;AAEvE,MAAM,iBAAiB,MACpB,EACC,MACA,SACA,gBACA,iBACA,QACA,oBAAoB,GACpB,WACA,YACA,WACA,aACA,OACA,WACA,GAAG,WACC;CACJ,MAAM,MAAM,OAAO,KAAK;CACxB,MAAM,OAAO,QAAQ,IAAI;CACzB,MAAM,QAAQ,UAAU;CAExB,MAAM,yBAAyB,cAAsC;AACnE,MAAI,CAAC,eAAgB,QAAO,EAAE;EAE9B,MAAM,QAAQ,OACX,OAAO;GAAC,MAAM;GAAW,mBAAmB;GAAQ,MAAM;GAAc,CAAC,CACzE,OAAO,CACP,KAAK,MAAM,CACX,kBAAkB,CAClB,OAAO,EAAE;AAEZ,SAAO;GACL,6BAA6B,MAAM;GACnC,6BAA6B,MAAM;GACnC,6BAA6B,MAAM;GACnC,6BAA6B,MAAM;GACpC;IACA;EAAC;EAAgB;EAAiB,MAAM;EAAW,MAAM;EAAc,CAAC;CAE3E,MAAMA,YAAuB,eACpB;EACL,WAAW,UAAU,OAAO,mBAAmB,OAAO;EACtD,OAAO,cAAc,OAAO;EAC5B;EACD,GACD;EAAC;EAAS;EAAY;EAAY,CACnC;CAED,MAAM,CAAC,OAAO,YAAY,SAAS,SAAS,eAAe,OAAU;AACrE,iBAAgB;AACd,WAAS,SAAS,QAAQ,aAAa,GAAG,OAAU;IACnD,CAAC,OAAO,CAAC;CAEZ,MAAM,gBAAgB,kBAAkB;AACtC,MAAI,CAAC,MACH,QAAO,oBAACC;GAAK,OAAO,EAAE,cAAc,GAAG,kBAAkB,IAAI;GAAS,GAAI;IAAa;AAEzF,SACE,4CACG,MAAM,KAAK,MAAM,UAAU;AAC1B,UACE,oBAACA;IAEC,UAAU;IACV,OACE;KACE,WAAW,GAAG,QAAQ,KAAK,QAAQ,CAAC;KACpC,cAAc,GAAG,kBAAkB;KACpC;IAEH,GAAI;MARC,KASL;IAEJ,GACD;IAEJ;EAAC;EAAO;EAAmB;EAAU,CAAC;AAEzC,QACE,qBAAC;EACC,WAAW,GAAG,OAAO,WAAW,UAAU;EACrC;EACL,OAAO,OAAO;GAAE,WAAW;GAAc,GAAG;GAAO,GAAG;EACtD,GAAI;;GAEJ,oBAACA;IACC,OAAO,aAAa,OAAO;IACd;IACb,OAAO,EAAE,QAAQ,GAAG;KACpB;GACD,aAAa,oBAAC,kBAAgB;GAC9B,kBACC,oBAAC;IACC,WAAW,OAAO;IAClB,OAAO;KACL,GAAI,OAAO,EAAE,UAAU,KAAK,QAAQ,IAAI,GAAG,EAAE;KAC7C,GAAG;KACJ;cAED,oBAAC,SAAI,WAAW,OAAO,aAAc;KACjC;;GAEJ;EAGX;AAED,eAAe,cAAc;AAE7B,6BAAe"}

package/es/awesome/GridBackground/GridShowcase.d.mts

@@ -1,8 +1,8 @@
 import { GridShowcaseProps } from "./type.mjs";
-import * as react113 from "react";
+import * as react119 from "react";
 
 //#region src/awesome/GridBackground/GridShowcase.d.ts
-declare const GridShowcase: react113.NamedExoticComponent<GridShowcaseProps>;
+declare const GridShowcase: react119.NamedExoticComponent<GridShowcaseProps>;
 //#endregion
 export { GridShowcase };
 //# sourceMappingURL=GridShowcase.d.mts.map

package/es/awesome/GridBackground/style.mjs

@@ -1,84 +1,92 @@
-import { createStyles, keyframes } from "antd-style";
-import chroma from "chroma-js";
+import { createStaticStyles, keyframes } from "antd-style";
 
 //#region src/awesome/GridBackground/style.ts
-const useStyles = createStyles(({ css: css$1, token }, { reverse, backgroundColor = "blue" }) => {
-	const highlightAnimation = keyframes`
-    0% {
-      mask-position: 100% 0%;
-    }
-    16%,100% {
-      mask-position: 100% 200%;
-    }
-  `;
-	const highlightAnimationReverse = keyframes`
-    0% {
-      mask-position: 100% 200%;
-    }
-    16%,100% {
-      mask-position: 100% 0%;
-    }
-  `;
-	const scale = chroma.bezier([
-		token.colorText,
-		backgroundColor,
-		token.colorBgLayout
-	]).scale().mode("lch").correctLightness().colors(6);
+const highlightAnimation = keyframes`
+  0% {
+    mask-position: 100% 0%;
+  }
+  16%,100% {
+    mask-position: 100% 200%;
+  }
+`;
+const highlightAnimationReverse = keyframes`
+  0% {
+    mask-position: 100% 200%;
+  }
+  16%,100% {
+    mask-position: 100% 0%;
+  }
+`;
+const styles = createStaticStyles(({ css: css$1 }) => {
 	const width = 24;
 	const height = 36;
 	return {
 		background: css$1`
-        position: absolute;
-        inset-block-start: ${60 - height / 2}%;
-        inset-inline-start: ${50 - width / 2}%;
-        transform: rotateX(60deg);
+      position: absolute;
+      inset-block-start: ${60 - height / 2}%;
+      inset-inline-start: ${50 - width / 2}%;
+      transform: rotateX(60deg);
 
-        width: ${width}%;
-        height: ${height}%;
+      width: ${width}%;
+      height: ${height}%;
+      border-radius: 50%;
 
-        background: ${scale[1]};
-        filter: blur(2em) saturate(400%);
-        border-radius: 50%;
-        box-shadow:
-          0 0 1em 2em ${scale[1]},
-          0 0 3em 6em ${scale[2]},
-          0 0 6em 10em ${scale[3]},
-          0 0 8em 16em ${scale[4]};
-      `,
+      background: var(--grid-background-color-1, transparent);
+      filter: blur(2em) saturate(400%);
+      box-shadow:
+        0 0 1em 2em var(--grid-background-color-1, transparent),
+        0 0 3em 6em var(--grid-background-color-2, transparent),
+        0 0 6em 10em var(--grid-background-color-3, transparent),
+        0 0 8em 16em var(--grid-background-color-4, transparent);
+    `,
 		backgroundContainer: css$1`
-        position: absolute;
-        z-index: -1;
-        inset: 0;
+      position: absolute;
+      z-index: -1;
+      inset: 0;
 
-        width: 100%;
-        height: 100%;
+      width: 100%;
+      height: 100%;
 
-        perspective: 200px;
-      `,
+      perspective: 200px;
+    `,
 		container: css$1`
-        position: relative;
+      position: relative;
 
-        mask-image: linear-gradient(to bottom, transparent, #fff 30%, #fff 70%, transparent);
-        mask-size: cover;
-      `,
+      mask-image: linear-gradient(to bottom, transparent, #fff 30%, #fff 70%, transparent);
+      mask-size: cover;
+    `,
 		highlight: css$1`
-        --duration: 6s;
-        --delay: 0s;
+      --duration: 6s;
+      --delay: 0s;
 
-        position: absolute;
-        z-index: 1;
-        inset: 0;
+      position: absolute;
+      z-index: 1;
+      inset: 0;
 
-        animation: ${reverse ? highlightAnimationReverse : highlightAnimation} var(--duration)
-          cubic-bezier(0.62, 0.62, 0.28, 0.67) infinite;
-        animation-delay: var(--delay);
+      animation: ${highlightAnimation} var(--duration) cubic-bezier(0.62, 0.62, 0.28, 0.67) infinite;
+      animation-delay: var(--delay);
 
-        mask-image: linear-gradient(to bottom, transparent 40%, #fff 60%, transparent);
-        mask-size: 100% 200%;
-      `
+      mask-image: linear-gradient(to bottom, transparent 40%, #fff 60%, transparent);
+      mask-size: 100% 200%;
+    `,
+		highlightReverse: css$1`
+      --duration: 6s;
+      --delay: 0s;
+
+      position: absolute;
+      z-index: 1;
+      inset: 0;
+
+      animation: ${highlightAnimationReverse} var(--duration) cubic-bezier(0.62, 0.62, 0.28, 0.67)
+        infinite;
+      animation-delay: var(--delay);
+
+      mask-image: linear-gradient(to bottom, transparent 40%, #fff 60%, transparent);
+      mask-size: 100% 200%;
+    `
 	};
 });
 
 //#endregion
-export { useStyles };
+export { styles };
 //# sourceMappingURL=style.mjs.map

package/es/awesome/GridBackground/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/awesome/GridBackground/style.ts"],"sourcesContent":["import { createStyles, keyframes } from 'antd-style';\nimport chroma from 'chroma-js';\n\nexport const useStyles = createStyles(\n  (\n    { css, token },\n    { reverse, backgroundColor = 'blue' }: { backgroundColor?: string; reverse?: boolean },\n  ) => {\n    const highlightAnimation = keyframes`\n    0% {\n      mask-position: 100% 0%;\n    }\n    16%,100% {\n      mask-position: 100% 200%;\n    }\n  `;\n    const highlightAnimationReverse = keyframes`\n    0% {\n      mask-position: 100% 200%;\n    }\n    16%,100% {\n      mask-position: 100% 0%;\n    }\n  `;\n\n    const scale = chroma\n      .bezier([token.colorText, backgroundColor, token.colorBgLayout])\n      .scale()\n      .mode('lch')\n      .correctLightness()\n      .colors(6);\n    const width = 24;\n    const height = 36;\n\n    return {\n      background: css`\n        position: absolute;\n        inset-block-start: ${60 - height / 2}%;\n        inset-inline-start: ${50 - width / 2}%;\n        transform: rotateX(60deg);\n\n        width: ${width}%;\n        height: ${height}%;\n\n        background: ${scale[1]};\n        filter: blur(2em) saturate(400%);\n        border-radius: 50%;\n        box-shadow:\n          0 0 1em 2em ${scale[1]},\n          0 0 3em 6em ${scale[2]},\n          0 0 6em 10em ${scale[3]},\n          0 0 8em 16em ${scale[4]};\n      `,\n      backgroundContainer: css`\n        position: absolute;\n        z-index: -1;\n        inset: 0;\n\n        width: 100%;\n        height: 100%;\n\n        perspective: 200px;\n      `,\n      container: css`\n        position: relative;\n\n        mask-image: linear-gradient(to bottom, transparent, #fff 30%, #fff 70%, transparent);\n        mask-size: cover;\n      `,\n      highlight: css`\n        --duration: 6s;\n        --delay: 0s;\n\n        position: absolute;\n        z-index: 1;\n        inset: 0;\n\n        animation: ${reverse ? highlightAnimationReverse : highlightAnimation} var(--duration)\n          cubic-bezier(0.62, 0.62, 0.28, 0.67) infinite;\n        animation-delay: var(--delay);\n\n        mask-image: linear-gradient(to bottom, transparent 40%, #fff 60%, transparent);\n        mask-size: 100% 200%;\n      `,\n    };\n  },\n);\n"],"mappings":";;;;AAGA,MAAa,YAAY,cAErB,EAAE,YAAK,SACP,EAAE,SAAS,kBAAkB,aAC1B;CACH,MAAM,qBAAqB,SAAS;;;;;;;;CAQpC,MAAM,4BAA4B,SAAS;;;;;;;;CAS3C,MAAM,QAAQ,OACX,OAAO;EAAC,MAAM;EAAW;EAAiB,MAAM;EAAc,CAAC,CAC/D,OAAO,CACP,KAAK,MAAM,CACX,kBAAkB,CAClB,OAAO,EAAE;CACZ,MAAM,QAAQ;CACd,MAAM,SAAS;AAEf,QAAO;EACL,YAAY,KAAG;;6BAEQ,KAAK,SAAS,EAAE;8BACf,KAAK,QAAQ,EAAE;;;iBAG5B,MAAM;kBACL,OAAO;;sBAEH,MAAM,GAAG;;;;wBAIP,MAAM,GAAG;wBACT,MAAM,GAAG;yBACR,MAAM,GAAG;yBACT,MAAM,GAAG;;EAE5B,qBAAqB,KAAG;;;;;;;;;;EAUxB,WAAW,KAAG;;;;;;EAMd,WAAW,KAAG;;;;;;;;qBAQC,UAAU,4BAA4B,mBAAmB;;;;;;;EAOzE;EAEJ"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/awesome/GridBackground/style.ts"],"sourcesContent":["import { createStaticStyles, keyframes } from 'antd-style';\n\nconst highlightAnimation = keyframes`\n  0% {\n    mask-position: 100% 0%;\n  }\n  16%,100% {\n    mask-position: 100% 200%;\n  }\n`;\n\nconst highlightAnimationReverse = keyframes`\n  0% {\n    mask-position: 100% 200%;\n  }\n  16%,100% {\n    mask-position: 100% 0%;\n  }\n`;\n\nexport const styles = createStaticStyles(({ css }) => {\n  const width = 24;\n  const height = 36;\n\n  return {\n    background: css`\n      position: absolute;\n      inset-block-start: ${60 - height / 2}%;\n      inset-inline-start: ${50 - width / 2}%;\n      transform: rotateX(60deg);\n\n      width: ${width}%;\n      height: ${height}%;\n      border-radius: 50%;\n\n      background: var(--grid-background-color-1, transparent);\n      filter: blur(2em) saturate(400%);\n      box-shadow:\n        0 0 1em 2em var(--grid-background-color-1, transparent),\n        0 0 3em 6em var(--grid-background-color-2, transparent),\n        0 0 6em 10em var(--grid-background-color-3, transparent),\n        0 0 8em 16em var(--grid-background-color-4, transparent);\n    `,\n    backgroundContainer: css`\n      position: absolute;\n      z-index: -1;\n      inset: 0;\n\n      width: 100%;\n      height: 100%;\n\n      perspective: 200px;\n    `,\n    container: css`\n      position: relative;\n\n      mask-image: linear-gradient(to bottom, transparent, #fff 30%, #fff 70%, transparent);\n      mask-size: cover;\n    `,\n    highlight: css`\n      --duration: 6s;\n      --delay: 0s;\n\n      position: absolute;\n      z-index: 1;\n      inset: 0;\n\n      animation: ${highlightAnimation} var(--duration) cubic-bezier(0.62, 0.62, 0.28, 0.67) infinite;\n      animation-delay: var(--delay);\n\n      mask-image: linear-gradient(to bottom, transparent 40%, #fff 60%, transparent);\n      mask-size: 100% 200%;\n    `,\n    highlightReverse: css`\n      --duration: 6s;\n      --delay: 0s;\n\n      position: absolute;\n      z-index: 1;\n      inset: 0;\n\n      animation: ${highlightAnimationReverse} var(--duration) cubic-bezier(0.62, 0.62, 0.28, 0.67)\n        infinite;\n      animation-delay: var(--delay);\n\n      mask-image: linear-gradient(to bottom, transparent 40%, #fff 60%, transparent);\n      mask-size: 100% 200%;\n    `,\n  };\n});\n"],"mappings":";;;AAEA,MAAM,qBAAqB,SAAS;;;;;;;;AASpC,MAAM,4BAA4B,SAAS;;;;;;;;AAS3C,MAAa,SAAS,oBAAoB,EAAE,iBAAU;CACpD,MAAM,QAAQ;CACd,MAAM,SAAS;AAEf,QAAO;EACL,YAAY,KAAG;;2BAEQ,KAAK,SAAS,EAAE;4BACf,KAAK,QAAQ,EAAE;;;eAG5B,MAAM;gBACL,OAAO;;;;;;;;;;;EAWnB,qBAAqB,KAAG;;;;;;;;;;EAUxB,WAAW,KAAG;;;;;;EAMd,WAAW,KAAG;;;;;;;;mBAQC,mBAAmB;;;;;;EAMlC,kBAAkB,KAAG;;;;;;;;mBAQN,0BAA0B;;;;;;;EAO1C;EACD"}

package/es/awesome/Hero/Hero.d.mts

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

package/es/awesome/Hero/Hero.mjs

@@ -6,7 +6,7 @@ import Center_default from "../../Flex/Center.mjs";
 import Button_default from "../../Button/Button.mjs";
 import AuroraBackground_default from "../AuroraBackground/AuroraBackground.mjs";
 import GradientButton_default from "../GradientButton/GradientButton.mjs";
-import { useStyles } from "./style.mjs";
+import { styles } from "./style.mjs";
 import { memo, useCallback } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { ConfigProvider } from "antd";
@@ -15,7 +15,6 @@ import { Github } from "lucide-react";
 
 //#region src/awesome/Hero/Hero.tsx
 const Hero = memo(({ title, description, actions, Link }) => {
-	const { styles } = useStyles();
 	const { mobile } = useResponsive();
 	const LinkRender = Link || A_default;
 	const ButtonGroups = useCallback(() => Boolean(actions?.length) && /* @__PURE__ */ jsx(FlexBasic_default, {

package/es/awesome/Hero/Hero.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Hero.mjs","names":["A","Flexbox","GradientButton","Button","AuroraBackground","Center"],"sources":["../../../src/awesome/Hero/Hero.tsx"],"sourcesContent":["'use client';\n\nimport { ConfigProvider } from 'antd';\nimport { useResponsive } from 'antd-style';\nimport { Github } from 'lucide-react';\nimport { memo, useCallback } from 'react';\n\nimport A from '@/A';\nimport Button from '@/Button';\nimport { Center, Flexbox } from '@/Flex';\nimport AuroraBackground from '@/awesome/AuroraBackground';\nimport GradientButton from '@/awesome/GradientButton';\n\nimport { useStyles } from './style';\nimport type { HeroProps } from './type';\n\nconst Hero = memo<HeroProps>(({ title, description, actions, Link }) => {\n  const { styles } = useStyles();\n  const { mobile } = useResponsive();\n\n  const LinkRender = Link || A;\n\n  const ButtonGroups = useCallback(\n    () =>\n      Boolean(actions?.length) && (\n        <Flexbox className={styles.actions} gap={16} horizontal justify={'center'}>\n          {actions!.map(({ text, link, openExternal, github, type }, index) => {\n            const content =\n              type === 'primary' ? (\n                <GradientButton\n                  block={mobile}\n                  icon={github ? Github : undefined}\n                  key={index}\n                  size=\"large\"\n                >\n                  {text}\n                </GradientButton>\n              ) : (\n                <Button\n                  block={mobile}\n                  icon={github ? Github : undefined}\n                  key={index}\n                  size=\"large\"\n                  type=\"primary\"\n                >\n                  {text}\n                </Button>\n              );\n\n            return openExternal ? (\n              <A href={link} key={text} target={openExternal ? '_blank' : undefined}>\n                {content}\n              </A>\n            ) : (\n              <LinkRender key={text} to={link}>\n                {content}\n              </LinkRender>\n            );\n          })}\n        </Flexbox>\n      ),\n    [actions],\n  );\n\n  return (\n    <>\n      <AuroraBackground />\n      <ConfigProvider theme={{ token: { fontSize: 16 } }}>\n        <Flexbox align={'center'} style={{ zIndex: 1 }}>\n          <Flexbox className={styles.container} distribution={'center'} horizontal>\n            <Center>\n              {title && (\n                <Center\n                  as={'h1'}\n                  className={styles.title}\n                  dangerouslySetInnerHTML={{ __html: title }}\n                  gap={'0.25em'}\n                  horizontal\n                  wrap={'wrap'}\n                />\n              )}\n              {description && (\n                <p className={styles.desc} dangerouslySetInnerHTML={{ __html: description }} />\n              )}\n              <ButtonGroups />\n            </Center>\n          </Flexbox>\n        </Flexbox>\n      </ConfigProvider>\n    </>\n  );\n});\n\nHero.displayName = 'Hero';\n\nexport default Hero;\n"],"mappings":";;;;;;;;;;;;;;;;AAgBA,MAAM,OAAO,MAAiB,EAAE,OAAO,aAAa,SAAS,WAAW;CACtE,MAAM,EAAE,WAAW,WAAW;CAC9B,MAAM,EAAE,WAAW,eAAe;CAElC,MAAM,aAAa,QAAQA;CAE3B,MAAM,eAAe,kBAEjB,QAAQ,SAAS,OAAO,IACtB,oBAACC;EAAQ,WAAW,OAAO;EAAS,KAAK;EAAI;EAAW,SAAS;YAC9D,QAAS,KAAK,EAAE,MAAM,MAAM,cAAc,QAAQ,QAAQ,UAAU;GACnE,MAAM,UACJ,SAAS,YACP,oBAACC;IACC,OAAO;IACP,MAAM,SAAS,SAAS;IAExB,MAAK;cAEJ;MAHI,MAIU,GAEjB,oBAACC;IACC,OAAO;IACP,MAAM,SAAS,SAAS;IAExB,MAAK;IACL,MAAK;cAEJ;MAJI,MAKE;AAGb,UAAO,eACL,oBAACH;IAAE,MAAM;IAAiB,QAAQ,eAAe,WAAW;cACzD;MADiB,KAEhB,GAEJ,oBAAC;IAAsB,IAAI;cACxB;MADc,KAEJ;IAEf;GACM,EAEd,CAAC,QAAQ,CACV;AAED,QACE,8CACE,oBAACI,6BAAmB,EACpB,oBAAC;EAAe,OAAO,EAAE,OAAO,EAAE,UAAU,IAAI,EAAE;YAChD,oBAACH;GAAQ,OAAO;GAAU,OAAO,EAAE,QAAQ,GAAG;aAC5C,oBAACA;IAAQ,WAAW,OAAO;IAAW,cAAc;IAAU;cAC5D,qBAACI;KACE,SACC,oBAACA;MACC,IAAI;MACJ,WAAW,OAAO;MAClB,yBAAyB,EAAE,QAAQ,OAAO;MAC1C,KAAK;MACL;MACA,MAAM;OACN;KAEH,eACC,oBAAC;MAAE,WAAW,OAAO;MAAM,yBAAyB,EAAE,QAAQ,aAAa;OAAI;KAEjF,oBAAC,iBAAe;QACT;KACD;IACF;GACK,IAChB;EAEL;AAEF,KAAK,cAAc;AAEnB,mBAAe"}
+{"version":3,"file":"Hero.mjs","names":["A","Flexbox","GradientButton","Button","AuroraBackground","Center"],"sources":["../../../src/awesome/Hero/Hero.tsx"],"sourcesContent":["'use client';\n\nimport { ConfigProvider } from 'antd';\nimport { useResponsive } from 'antd-style';\nimport { Github } from 'lucide-react';\nimport { memo, useCallback } from 'react';\n\nimport A from '@/A';\nimport Button from '@/Button';\nimport { Center, Flexbox } from '@/Flex';\nimport AuroraBackground from '@/awesome/AuroraBackground';\nimport GradientButton from '@/awesome/GradientButton';\n\nimport { styles } from './style';\nimport type { HeroProps } from './type';\n\nconst Hero = memo<HeroProps>(({ title, description, actions, Link }) => {\n  const { mobile } = useResponsive();\n\n  const LinkRender = Link || A;\n\n  const ButtonGroups = useCallback(\n    () =>\n      Boolean(actions?.length) && (\n        <Flexbox className={styles.actions} gap={16} horizontal justify={'center'}>\n          {actions!.map(({ text, link, openExternal, github, type }, index) => {\n            const content =\n              type === 'primary' ? (\n                <GradientButton\n                  block={mobile}\n                  icon={github ? Github : undefined}\n                  key={index}\n                  size=\"large\"\n                >\n                  {text}\n                </GradientButton>\n              ) : (\n                <Button\n                  block={mobile}\n                  icon={github ? Github : undefined}\n                  key={index}\n                  size=\"large\"\n                  type=\"primary\"\n                >\n                  {text}\n                </Button>\n              );\n\n            return openExternal ? (\n              <A href={link} key={text} target={openExternal ? '_blank' : undefined}>\n                {content}\n              </A>\n            ) : (\n              <LinkRender key={text} to={link}>\n                {content}\n              </LinkRender>\n            );\n          })}\n        </Flexbox>\n      ),\n    [actions],\n  );\n\n  return (\n    <>\n      <AuroraBackground />\n      <ConfigProvider theme={{ token: { fontSize: 16 } }}>\n        <Flexbox align={'center'} style={{ zIndex: 1 }}>\n          <Flexbox className={styles.container} distribution={'center'} horizontal>\n            <Center>\n              {title && (\n                <Center\n                  as={'h1'}\n                  className={styles.title}\n                  dangerouslySetInnerHTML={{ __html: title }}\n                  gap={'0.25em'}\n                  horizontal\n                  wrap={'wrap'}\n                />\n              )}\n              {description && (\n                <p className={styles.desc} dangerouslySetInnerHTML={{ __html: description }} />\n              )}\n              <ButtonGroups />\n            </Center>\n          </Flexbox>\n        </Flexbox>\n      </ConfigProvider>\n    </>\n  );\n});\n\nHero.displayName = 'Hero';\n\nexport default Hero;\n"],"mappings":";;;;;;;;;;;;;;;;AAgBA,MAAM,OAAO,MAAiB,EAAE,OAAO,aAAa,SAAS,WAAW;CACtE,MAAM,EAAE,WAAW,eAAe;CAElC,MAAM,aAAa,QAAQA;CAE3B,MAAM,eAAe,kBAEjB,QAAQ,SAAS,OAAO,IACtB,oBAACC;EAAQ,WAAW,OAAO;EAAS,KAAK;EAAI;EAAW,SAAS;YAC9D,QAAS,KAAK,EAAE,MAAM,MAAM,cAAc,QAAQ,QAAQ,UAAU;GACnE,MAAM,UACJ,SAAS,YACP,oBAACC;IACC,OAAO;IACP,MAAM,SAAS,SAAS;IAExB,MAAK;cAEJ;MAHI,MAIU,GAEjB,oBAACC;IACC,OAAO;IACP,MAAM,SAAS,SAAS;IAExB,MAAK;IACL,MAAK;cAEJ;MAJI,MAKE;AAGb,UAAO,eACL,oBAACH;IAAE,MAAM;IAAiB,QAAQ,eAAe,WAAW;cACzD;MADiB,KAEhB,GAEJ,oBAAC;IAAsB,IAAI;cACxB;MADc,KAEJ;IAEf;GACM,EAEd,CAAC,QAAQ,CACV;AAED,QACE,8CACE,oBAACI,6BAAmB,EACpB,oBAAC;EAAe,OAAO,EAAE,OAAO,EAAE,UAAU,IAAI,EAAE;YAChD,oBAACH;GAAQ,OAAO;GAAU,OAAO,EAAE,QAAQ,GAAG;aAC5C,oBAACA;IAAQ,WAAW,OAAO;IAAW,cAAc;IAAU;cAC5D,qBAACI;KACE,SACC,oBAACA;MACC,IAAI;MACJ,WAAW,OAAO;MAClB,yBAAyB,EAAE,QAAQ,OAAO;MAC1C,KAAK;MACL;MACA,MAAM;OACN;KAEH,eACC,oBAAC;MAAE,WAAW,OAAO;MAAM,yBAAyB,EAAE,QAAQ,aAAa;OAAI;KAEjF,oBAAC,iBAAe;QACT;KACD;IACF;GACK,IAChB;EAEL;AAEF,KAAK,cAAc;AAEnB,mBAAe"}

package/es/awesome/Hero/style.mjs

@@ -1,7 +1,8 @@
-import { createStyles } from "antd-style";
+import { staticStylish } from "../../styles/theme/customStylishStatic.mjs";
+import { createStaticStyles, responsive } from "antd-style";
 
 //#region src/awesome/Hero/style.ts
-const useStyles = createStyles(({ css: css$1, responsive, token, stylish }) => ({
+const styles = createStaticStyles(({ css: css$1, cssVar: cssVar$1 }) => ({
 	actions: css$1`
     margin-block-start: 24px;
 
@@ -10,7 +11,7 @@ const useStyles = createStyles(({ css: css$1, responsive, token, stylish }) => (
       font-weight: 500;
     }
 
-    ${responsive.mobile} {
+    ${responsive.sm} {
       flex-direction: column;
       gap: 16px;
       width: 100%;
@@ -28,14 +29,14 @@ const useStyles = createStyles(({ css: css$1, responsive, token, stylish }) => (
   `,
 	desc: css$1`
     margin-block-start: 0;
-    font-size: ${token.fontSizeHeading3}px;
-    color: ${token.colorTextSecondary};
+    font-size: ${cssVar$1.fontSizeHeading3};
+    color: ${cssVar$1.colorTextSecondary};
     text-align: center;
 
-    ${responsive.mobile} {
+    ${responsive.sm} {
       margin-block: 24px;
       margin-inline: 16px;
-      font-size: ${token.fontSizeHeading5}px;
+      font-size: ${cssVar$1.fontSizeHeading5};
     }
   `,
 	title: css$1`
@@ -48,7 +49,7 @@ const useStyles = createStyles(({ css: css$1, responsive, token, stylish }) => (
     text-align: center;
 
     b {
-      ${stylish.gradientAnimation}
+      ${staticStylish.gradientAnimation}
       position: relative;
       z-index: 5;
       background-clip: text;
@@ -60,12 +61,12 @@ const useStyles = createStyles(({ css: css$1, responsive, token, stylish }) => (
       }
     }
 
-    ${responsive.mobile} {
+    ${responsive.sm} {
       font-size: 64px;
     }
   `
 }));
 
 //#endregion
-export { useStyles };
+export { styles };
 //# sourceMappingURL=style.mjs.map

package/es/awesome/Hero/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/awesome/Hero/style.ts"],"sourcesContent":["import { createStyles } from 'antd-style';\n\nexport const useStyles = createStyles(({ css, responsive, token, stylish }) => ({\n  actions: css`\n    margin-block-start: 24px;\n\n    button {\n      padding-inline: 32px !important;\n      font-weight: 500;\n    }\n\n    ${responsive.mobile} {\n      flex-direction: column;\n      gap: 16px;\n      width: 100%;\n      margin-block-start: 24px;\n\n      button {\n        width: 100%;\n      }\n    }\n  `,\n\n  container: css`\n    position: relative;\n    box-sizing: border-box;\n    text-align: center;\n  `,\n\n  desc: css`\n    margin-block-start: 0;\n    font-size: ${token.fontSizeHeading3}px;\n    color: ${token.colorTextSecondary};\n    text-align: center;\n\n    ${responsive.mobile} {\n      margin-block: 24px;\n      margin-inline: 16px;\n      font-size: ${token.fontSizeHeading5}px;\n    }\n  `,\n  title: css`\n    z-index: 10;\n\n    margin: 0;\n\n    font-size: min(100px, 10vw);\n    line-height: 1.2;\n    text-align: center;\n\n    b {\n      ${stylish.gradientAnimation}\n      position: relative;\n      z-index: 5;\n      background-clip: text;\n\n      -webkit-text-fill-color: transparent;\n\n      &::selection {\n        -webkit-text-fill-color: #000 !important;\n      }\n    }\n\n    ${responsive.mobile} {\n      font-size: 64px;\n    }\n  `,\n}));\n"],"mappings":";;;AAEA,MAAa,YAAY,cAAc,EAAE,YAAK,YAAY,OAAO,eAAe;CAC9E,SAAS,KAAG;;;;;;;;MAQR,WAAW,OAAO;;;;;;;;;;;CAYtB,WAAW,KAAG;;;;;CAMd,MAAM,KAAG;;iBAEM,MAAM,iBAAiB;aAC3B,MAAM,mBAAmB;;;MAGhC,WAAW,OAAO;;;mBAGL,MAAM,iBAAiB;;;CAGxC,OAAO,KAAG;;;;;;;;;;QAUJ,QAAQ,kBAAkB;;;;;;;;;;;;MAY5B,WAAW,OAAO;;;;CAIvB,EAAE"}
+{"version":3,"file":"style.mjs","names":["cssVar","lobeStaticStylish"],"sources":["../../../src/awesome/Hero/style.ts"],"sourcesContent":["import { createStaticStyles, responsive } from 'antd-style';\n\nimport { lobeStaticStylish } from '@/styles';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  actions: css`\n    margin-block-start: 24px;\n\n    button {\n      padding-inline: 32px !important;\n      font-weight: 500;\n    }\n\n    ${responsive.sm} {\n      flex-direction: column;\n      gap: 16px;\n      width: 100%;\n      margin-block-start: 24px;\n\n      button {\n        width: 100%;\n      }\n    }\n  `,\n\n  container: css`\n    position: relative;\n    box-sizing: border-box;\n    text-align: center;\n  `,\n\n  desc: css`\n    margin-block-start: 0;\n    font-size: ${cssVar.fontSizeHeading3};\n    color: ${cssVar.colorTextSecondary};\n    text-align: center;\n\n    ${responsive.sm} {\n      margin-block: 24px;\n      margin-inline: 16px;\n      font-size: ${cssVar.fontSizeHeading5};\n    }\n  `,\n  title: css`\n    z-index: 10;\n\n    margin: 0;\n\n    font-size: min(100px, 10vw);\n    line-height: 1.2;\n    text-align: center;\n\n    b {\n      ${lobeStaticStylish.gradientAnimation}\n      position: relative;\n      z-index: 5;\n      background-clip: text;\n\n      -webkit-text-fill-color: transparent;\n\n      &::selection {\n        -webkit-text-fill-color: #000 !important;\n      }\n    }\n\n    ${responsive.sm} {\n      font-size: 64px;\n    }\n  `,\n}));\n"],"mappings":";;;;AAIA,MAAa,SAAS,oBAAoB,EAAE,YAAK,wBAAc;CAC7D,SAAS,KAAG;;;;;;;;MAQR,WAAW,GAAG;;;;;;;;;;;CAYlB,WAAW,KAAG;;;;;CAMd,MAAM,KAAG;;iBAEMA,SAAO,iBAAiB;aAC5BA,SAAO,mBAAmB;;;MAGjC,WAAW,GAAG;;;mBAGDA,SAAO,iBAAiB;;;CAGzC,OAAO,KAAG;;;;;;;;;;QAUJC,cAAkB,kBAAkB;;;;;;;;;;;;MAYtC,WAAW,GAAG;;;;CAInB,EAAE"}

package/es/awesome/Spline/ParentSize.mjs

@@ -1,7 +1,7 @@
 import { memo, useEffect, useMemo, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
-import { mergeRefs } from "react-merge-refs";
 import { debounce } from "es-toolkit/compat";
+import { mergeRefs } from "react-merge-refs";
 
 //#region src/awesome/Spline/ParentSize.tsx
 const defaultIgnoreDimensions = [];

package/es/awesome/Spline/Spine.d.mts

@@ -1,9 +1,9 @@
 import { SplineProps } from "./type.mjs";
-import * as react115 from "react";
+import * as react121 from "react";
 import "@splinetool/runtime";
 
 //#region src/awesome/Spline/Spine.d.ts
-declare const Spline: react115.NamedExoticComponent<SplineProps>;
+declare const Spline: react121.NamedExoticComponent<SplineProps>;
 //#endregion
 export { Spline };
 //# sourceMappingURL=Spine.d.mts.map

package/es/awesome/Spotlight/Spotlight.d.mts

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

package/es/awesome/Spotlight/Spotlight.mjs

@@ -1,21 +1,29 @@
 'use client';
 
-import { useStyles } from "./style.mjs";
+import { styles } from "./style.mjs";
 import { useMouseOffset } from "./useMouseOffset.mjs";
-import { memo } from "react";
+import { memo, useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
+import { cx, useThemeMode } from "antd-style";
 
 //#region src/awesome/Spotlight/Spotlight.tsx
 const Spotlight = memo(({ className, size = 64, ...properties }) => {
 	const [offset, outside, reference] = useMouseOffset();
-	const { styles, cx } = useStyles({
+	const { isDarkMode } = useThemeMode();
+	const cssVariables = useMemo(() => ({
+		"--spotlight-opacity": outside ? "0" : "0.1",
+		"--spotlight-size": `${size}px`,
+		"--spotlight-x": `${offset?.x ?? 0}px`,
+		"--spotlight-y": `${offset?.y ?? 0}px`
+	}), [
 		offset,
-		outside,
-		size
-	});
+		size,
+		outside
+	]);
 	return /* @__PURE__ */ jsx("div", {
-		className: cx(styles, className),
+		className: cx(isDarkMode ? outside ? styles.spotlightDarkOutside : styles.spotlightDark : outside ? styles.spotlightLightOutside : styles.spotlightLight, className),
 		ref: reference,
+		style: cssVariables,
 		...properties
 	});
 });

package/es/awesome/Spotlight/Spotlight.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Spotlight.mjs","names":[],"sources":["../../../src/awesome/Spotlight/Spotlight.tsx"],"sourcesContent":["'use client';\n\nimport { memo } from 'react';\n\nimport { useStyles } from './style';\nimport type { SpotlightProps } from './type';\nimport { useMouseOffset } from './useMouseOffset';\n\nconst Spotlight = memo<SpotlightProps>(({ className, size = 64, ...properties }) => {\n  const [offset, outside, reference] = useMouseOffset();\n  const { styles, cx } = useStyles({ offset, outside, size });\n\n  return <div className={cx(styles, className)} ref={reference} {...properties} />;\n});\n\nSpotlight.displayName = 'Spotlight';\n\nexport default Spotlight;\n"],"mappings":";;;;;;;;AAQA,MAAM,YAAY,MAAsB,EAAE,WAAW,OAAO,IAAI,GAAG,iBAAiB;CAClF,MAAM,CAAC,QAAQ,SAAS,aAAa,gBAAgB;CACrD,MAAM,EAAE,QAAQ,OAAO,UAAU;EAAE;EAAQ;EAAS;EAAM,CAAC;AAE3D,QAAO,oBAAC;EAAI,WAAW,GAAG,QAAQ,UAAU;EAAE,KAAK;EAAW,GAAI;GAAc;EAChF;AAEF,UAAU,cAAc;AAExB,wBAAe"}
+{"version":3,"file":"Spotlight.mjs","names":[],"sources":["../../../src/awesome/Spotlight/Spotlight.tsx"],"sourcesContent":["'use client';\n\nimport { cx, useThemeMode } from 'antd-style';\nimport { memo, useMemo } from 'react';\n\nimport { styles } from './style';\nimport type { SpotlightProps } from './type';\nimport { useMouseOffset } from './useMouseOffset';\n\nconst Spotlight = memo<SpotlightProps>(({ className, size = 64, ...properties }) => {\n  const [offset, outside, reference] = useMouseOffset();\n  const { isDarkMode } = useThemeMode();\n\n  const cssVariables = useMemo<Record<string, string>>(\n    () => ({\n      '--spotlight-opacity': outside ? '0' : '0.1',\n      '--spotlight-size': `${size}px`,\n      '--spotlight-x': `${offset?.x ?? 0}px`,\n      '--spotlight-y': `${offset?.y ?? 0}px`,\n    }),\n    [offset, size, outside],\n  );\n\n  const spotlightStyle = isDarkMode\n    ? outside\n      ? styles.spotlightDarkOutside\n      : styles.spotlightDark\n    : outside\n      ? styles.spotlightLightOutside\n      : styles.spotlightLight;\n\n  return (\n    <div\n      className={cx(spotlightStyle, className)}\n      ref={reference}\n      style={cssVariables}\n      {...properties}\n    />\n  );\n});\n\nSpotlight.displayName = 'Spotlight';\n\nexport default Spotlight;\n"],"mappings":";;;;;;;;;AASA,MAAM,YAAY,MAAsB,EAAE,WAAW,OAAO,IAAI,GAAG,iBAAiB;CAClF,MAAM,CAAC,QAAQ,SAAS,aAAa,gBAAgB;CACrD,MAAM,EAAE,eAAe,cAAc;CAErC,MAAM,eAAe,eACZ;EACL,uBAAuB,UAAU,MAAM;EACvC,oBAAoB,GAAG,KAAK;EAC5B,iBAAiB,GAAG,QAAQ,KAAK,EAAE;EACnC,iBAAiB,GAAG,QAAQ,KAAK,EAAE;EACpC,GACD;EAAC;EAAQ;EAAM;EAAQ,CACxB;AAUD,QACE,oBAAC;EACC,WAAW,GAVQ,aACnB,UACE,OAAO,uBACP,OAAO,gBACT,UACE,OAAO,wBACP,OAAO,gBAIqB,UAAU;EACxC,KAAK;EACL,OAAO;EACP,GAAI;GACJ;EAEJ;AAEF,UAAU,cAAc;AAExB,wBAAe"}

package/es/awesome/Spotlight/style.mjs

@@ -1,28 +1,81 @@
-import { createStyles } from "antd-style";
+import { createStaticStyles } from "antd-style";
 
 //#region src/awesome/Spotlight/style.ts
-const useStyles = createStyles(({ css: css$1, token, isDarkMode }, { offset, outside, size }) => {
-	const spotlightX = (offset?.x ?? 0) + "px";
-	const spotlightY = (offset?.y ?? 0) + "px";
-	return css$1`
-      pointer-events: none;
-
-      position: absolute;
-      z-index: 1;
-      inset: 0;
-
-      opacity: ${outside ? "0" : ".1"};
-      background: radial-gradient(
-        ${size + "px"} circle at ${spotlightX} ${spotlightY},
-        ${isDarkMode ? token.colorText : "#fff"},
-        ${isDarkMode ? "transparent" : token.colorTextQuaternary}
-      );
-      border-radius: inherit;
-
-      transition: all 0.2s;
-    `;
-});
+const styles = createStaticStyles(({ css: css$1, cssVar: cssVar$1 }) => ({
+	spotlightDark: css$1`
+    pointer-events: none;
+
+    position: absolute;
+    z-index: 1;
+    inset: 0;
+
+    border-radius: inherit;
+
+    opacity: var(--spotlight-opacity, 0.1);
+    background: radial-gradient(
+      var(--spotlight-size, 64px) circle at var(--spotlight-x, 0) var(--spotlight-y, 0),
+      ${cssVar$1.colorText},
+      transparent
+    );
+
+    transition: all 0.2s;
+  `,
+	spotlightDarkOutside: css$1`
+    pointer-events: none;
+
+    position: absolute;
+    z-index: 1;
+    inset: 0;
+
+    border-radius: inherit;
+
+    opacity: 0;
+    background: radial-gradient(
+      var(--spotlight-size, 64px) circle at var(--spotlight-x, 0) var(--spotlight-y, 0),
+      ${cssVar$1.colorText},
+      transparent
+    );
+
+    transition: all 0.2s;
+  `,
+	spotlightLight: css$1`
+    pointer-events: none;
+
+    position: absolute;
+    z-index: 1;
+    inset: 0;
+
+    border-radius: inherit;
+
+    opacity: var(--spotlight-opacity, 0.1);
+    background: radial-gradient(
+      var(--spotlight-size, 64px) circle at var(--spotlight-x, 0) var(--spotlight-y, 0),
+      #fff,
+      ${cssVar$1.colorTextQuaternary}
+    );
+
+    transition: all 0.2s;
+  `,
+	spotlightLightOutside: css$1`
+    pointer-events: none;
+
+    position: absolute;
+    z-index: 1;
+    inset: 0;
+
+    border-radius: inherit;
+
+    opacity: 0;
+    background: radial-gradient(
+      var(--spotlight-size, 64px) circle at var(--spotlight-x, 0) var(--spotlight-y, 0),
+      #fff,
+      ${cssVar$1.colorTextQuaternary}
+    );
+
+    transition: all 0.2s;
+  `
+}));
 
 //#endregion
-export { useStyles };
+export { styles };
 //# sourceMappingURL=style.mjs.map

package/es/awesome/Spotlight/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/awesome/Spotlight/style.ts"],"sourcesContent":["import { createStyles } from 'antd-style';\n\nexport const useStyles = createStyles(\n  (\n    { css, token, isDarkMode },\n    { offset, outside, size }: { offset: { x: number; y: number }; outside: boolean; size: number },\n  ) => {\n    const spotlightX = (offset?.x ?? 0) + 'px';\n    const spotlightY = (offset?.y ?? 0) + 'px';\n    const spotlightOpacity = outside ? '0' : '.1';\n    const spotlightSize = size + 'px';\n    return css`\n      pointer-events: none;\n\n      position: absolute;\n      z-index: 1;\n      inset: 0;\n\n      opacity: ${spotlightOpacity};\n      background: radial-gradient(\n        ${spotlightSize} circle at ${spotlightX} ${spotlightY},\n        ${isDarkMode ? token.colorText : '#fff'},\n        ${isDarkMode ? 'transparent' : token.colorTextQuaternary}\n      );\n      border-radius: inherit;\n\n      transition: all 0.2s;\n    `;\n  },\n);\n"],"mappings":";;;AAEA,MAAa,YAAY,cAErB,EAAE,YAAK,OAAO,cACd,EAAE,QAAQ,SAAS,WAChB;CACH,MAAM,cAAc,QAAQ,KAAK,KAAK;CACtC,MAAM,cAAc,QAAQ,KAAK,KAAK;AAGtC,QAAO,KAAG;;;;;;;iBAFe,UAAU,MAAM,KASX;;UARR,OAAO,KAUT,aAAa,WAAW,GAAG,WAAW;UACpD,aAAa,MAAM,YAAY,OAAO;UACtC,aAAa,gBAAgB,MAAM,oBAAoB;;;;;;EAOhE"}
+{"version":3,"file":"style.mjs","names":["cssVar"],"sources":["../../../src/awesome/Spotlight/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  spotlightDark: css`\n    pointer-events: none;\n\n    position: absolute;\n    z-index: 1;\n    inset: 0;\n\n    border-radius: inherit;\n\n    opacity: var(--spotlight-opacity, 0.1);\n    background: radial-gradient(\n      var(--spotlight-size, 64px) circle at var(--spotlight-x, 0) var(--spotlight-y, 0),\n      ${cssVar.colorText},\n      transparent\n    );\n\n    transition: all 0.2s;\n  `,\n\n  spotlightDarkOutside: css`\n    pointer-events: none;\n\n    position: absolute;\n    z-index: 1;\n    inset: 0;\n\n    border-radius: inherit;\n\n    opacity: 0;\n    background: radial-gradient(\n      var(--spotlight-size, 64px) circle at var(--spotlight-x, 0) var(--spotlight-y, 0),\n      ${cssVar.colorText},\n      transparent\n    );\n\n    transition: all 0.2s;\n  `,\n\n  spotlightLight: css`\n    pointer-events: none;\n\n    position: absolute;\n    z-index: 1;\n    inset: 0;\n\n    border-radius: inherit;\n\n    opacity: var(--spotlight-opacity, 0.1);\n    background: radial-gradient(\n      var(--spotlight-size, 64px) circle at var(--spotlight-x, 0) var(--spotlight-y, 0),\n      #fff,\n      ${cssVar.colorTextQuaternary}\n    );\n\n    transition: all 0.2s;\n  `,\n\n  spotlightLightOutside: css`\n    pointer-events: none;\n\n    position: absolute;\n    z-index: 1;\n    inset: 0;\n\n    border-radius: inherit;\n\n    opacity: 0;\n    background: radial-gradient(\n      var(--spotlight-size, 64px) circle at var(--spotlight-x, 0) var(--spotlight-y, 0),\n      #fff,\n      ${cssVar.colorTextQuaternary}\n    );\n\n    transition: all 0.2s;\n  `,\n}));\n"],"mappings":";;;AAEA,MAAa,SAAS,oBAAoB,EAAE,YAAK,wBAAc;CAC7D,eAAe,KAAG;;;;;;;;;;;;QAYZA,SAAO,UAAU;;;;;;CAOvB,sBAAsB,KAAG;;;;;;;;;;;;QAYnBA,SAAO,UAAU;;;;;;CAOvB,gBAAgB,KAAG;;;;;;;;;;;;;QAabA,SAAO,oBAAoB;;;;;CAMjC,uBAAuB,KAAG;;;;;;;;;;;;;QAapBA,SAAO,oBAAoB;;;;;CAKlC,EAAE"}