@lobehub/ui 5.57.2 → 6.0.0-beta.1

package/es/awesome/GradientButton/style.mjs

@@ -1,112 +1,64 @@
-import { staticStylish } from "../../styles/theme/customStylishStatic.mjs";
-import { createStaticStyles, cx } from "antd-style";
+import { cssVar } from "../../styles/stylex/cssVar.stylex.mjs";
 //#region src/awesome/GradientButton/style.ts
-const styles = createStaticStyles(({ css, cssVar }) => {
-	const borderRadius = "var(--gradient-button-border-radius, var(--ant-border-radius))";
-	return {
-		buttonDark: css`
-      position: relative;
-      z-index: 1;
-      border: none;
-      border-radius: ${borderRadius} !important;
-
-      &::before {
-        ${staticStylish.gradientAnimation}
-        content: '';
-
-        position: absolute;
-        z-index: -2;
-        inset: 0;
-
-        border-radius: ${borderRadius};
-      }
-
-      &::after {
-        content: '';
-
-        position: absolute;
-        z-index: -1;
-        inset-block-start: 1px;
-        inset-inline-start: 1px;
-
-        width: calc(100% - 2px);
-        height: calc(100% - 2px);
-        border-radius: calc(${borderRadius} - 1px);
-
-        background: ${cssVar.colorBgLayout};
-      }
-
-      &:hover {
-        &::after {
-          background: color-mix(in srgb, ${cssVar.colorBgLayout} 90%, transparent);
-        }
-      }
-
-      &:active {
-        &::after {
-          background: color-mix(in srgb, ${cssVar.colorBgLayout} 85%, transparent);
-        }
-      }
-    `,
-		buttonLight: css`
-      position: relative;
-      z-index: 1;
-      border: none;
-      border-radius: ${borderRadius} !important;
-
-      &::before {
-        ${staticStylish.gradientAnimation}
-        content: '';
-
-        position: absolute;
-        z-index: -2;
-        inset: 0;
-
-        border-radius: ${borderRadius};
-      }
-
-      &::after {
-        content: '';
-
-        position: absolute;
-        z-index: -1;
-        inset-block-start: 1px;
-        inset-inline-start: 1px;
-
-        width: calc(100% - 2px);
-        height: calc(100% - 2px);
-        border-radius: calc(${borderRadius} - 1px);
-
-        background: ${cssVar.colorBgContainer};
-      }
-
-      &:hover {
-        &::after {
-          background: color-mix(in srgb, ${cssVar.colorBgContainer} 95%, transparent);
-        }
-      }
-
-      &:active {
-        &::after {
-          background: color-mix(in srgb, ${cssVar.colorBgContainer} 90%, transparent);
-        }
-      }
-    `,
-		glow: cx(staticStylish.gradientAnimation, css`
-        position: absolute;
-        z-index: -2;
-        inset-block-start: 0;
-        inset-inline-start: 0;
-
-        width: 100%;
-        height: 100%;
-        border-radius: inherit;
-
-        opacity: 0.5;
-        filter: blur(0.5em);
-      `)
-	};
-});
+`${cssVar.gold}${cssVar.magenta}${cssVar.geekblue}${cssVar.cyan}`;
+const styles = {
+	button: {
+		kVAM5u: "lb181nr7w",
+		kaIpWk: "lb8itt2c",
+		ksu8eU: "lbng3xce",
+		kMzoRj: "lbfn42iu",
+		kVAEAm: "lb1n2onr6",
+		kY2c9j: "lb1vjfegm",
+		kUfP38: "lb12x7qc6",
+		k5JduY: "lb100rkj9",
+		k3foIR: "lb1n3af7d",
+		kc1e00: "lb1scoo6m",
+		kwXMNM: "lb1j6awrg",
+		kDVEDD: "lbi4xitw",
+		k4zj60: "lb19httdr",
+		kkgrvl: "lb1ix9i1y",
+		kFcpXp: "lbxx281p",
+		kPB484: "lb188t37e",
+		kS191i: "lb1gvgb2w",
+		kQZAMR: "lb1eozw7i",
+		kLmWZc: "lbzuot31",
+		k7EzDT: "lb1t5bk73",
+		kZiNAr: "lbqfgnys",
+		k3DiCg: "lb7ji8rf",
+		k836YN: "lb1w2b1bf",
+		kgeoSG: "lb10tli2e",
+		kEoFBp: "lb1hmns74",
+		kxmVGU: "lbchklzq",
+		$$css: true
+	},
+	buttonDark: {
+		ks3ayO: "lb187o56u lb1akn0p5 lb10obk4h",
+		$$css: true
+	},
+	buttonLight: {
+		ks3ayO: "lb1jurmlm lb1nqxrk8 lb1rtc2l9",
+		$$css: true
+	},
+	glow: {
+		kaIpWk: "lb1pjcqnp",
+		kKxzle: "lb1u8cyq",
+		k44tkh: "lbz5h9r3",
+		ko0y90: "lba4qsjk",
+		kKVMdj: "lb1xfnrba",
+		kyAemX: "lb1debuo4",
+		kKwaWg: "lbqureyv",
+		kgSjnq: "lb1g6ikvs",
+		ku685b: "lb12xnt1u",
+		k87sOh: "lb13vifvy",
+		kLqNvP: "lb1o0tod",
+		kSiTet: "lbbyyjgo",
+		kVAEAm: "lb10l6tqk",
+		kY2c9j: "lb1fdshc9",
+		kZKoxP: "lb5yr21d",
+		kzqmXN: "lbh8yej3",
+		$$css: true
+	}
+};
 //#endregion
 export { styles };
 

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

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":["lobeStaticStylish"],"sources":["../../../src/awesome/GradientButton/style.ts"],"sourcesContent":["import { createStaticStyles, cx } from 'antd-style';\n\nimport { lobeStaticStylish } from '@/styles';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => {\n  const borderRadius = 'var(--gradient-button-border-radius, var(--ant-border-radius))';\n\n  return {\n    buttonDark: css`\n      position: relative;\n      z-index: 1;\n      border: none;\n      border-radius: ${borderRadius} !important;\n\n      &::before {\n        ${lobeStaticStylish.gradientAnimation}\n        content: '';\n\n        position: absolute;\n        z-index: -2;\n        inset: 0;\n\n        border-radius: ${borderRadius};\n      }\n\n      &::after {\n        content: '';\n\n        position: absolute;\n        z-index: -1;\n        inset-block-start: 1px;\n        inset-inline-start: 1px;\n\n        width: calc(100% - 2px);\n        height: calc(100% - 2px);\n        border-radius: calc(${borderRadius} - 1px);\n\n        background: ${cssVar.colorBgLayout};\n      }\n\n      &:hover {\n        &::after {\n          background: color-mix(in srgb, ${cssVar.colorBgLayout} 90%, transparent);\n        }\n      }\n\n      &:active {\n        &::after {\n          background: color-mix(in srgb, ${cssVar.colorBgLayout} 85%, transparent);\n        }\n      }\n    `,\n    buttonLight: css`\n      position: relative;\n      z-index: 1;\n      border: none;\n      border-radius: ${borderRadius} !important;\n\n      &::before {\n        ${lobeStaticStylish.gradientAnimation}\n        content: '';\n\n        position: absolute;\n        z-index: -2;\n        inset: 0;\n\n        border-radius: ${borderRadius};\n      }\n\n      &::after {\n        content: '';\n\n        position: absolute;\n        z-index: -1;\n        inset-block-start: 1px;\n        inset-inline-start: 1px;\n\n        width: calc(100% - 2px);\n        height: calc(100% - 2px);\n        border-radius: calc(${borderRadius} - 1px);\n\n        background: ${cssVar.colorBgContainer};\n      }\n\n      &:hover {\n        &::after {\n          background: color-mix(in srgb, ${cssVar.colorBgContainer} 95%, transparent);\n        }\n      }\n\n      &:active {\n        &::after {\n          background: color-mix(in srgb, ${cssVar.colorBgContainer} 90%, transparent);\n        }\n      }\n    `,\n    glow: cx(\n      lobeStaticStylish.gradientAnimation,\n      css`\n        position: absolute;\n        z-index: -2;\n        inset-block-start: 0;\n        inset-inline-start: 0;\n\n        width: 100%;\n        height: 100%;\n        border-radius: inherit;\n\n        opacity: 0.5;\n        filter: blur(0.5em);\n      `,\n    ),\n  };\n});\n"],"mappings":";;;AAIA,MAAa,SAAS,oBAAoB,EAAE,KAAK,aAAa;CAC5D,MAAM,eAAe;CAErB,OAAO;EACL,YAAY,GAAG;;;;uBAII,aAAa;;;UAG1BA,cAAkB,kBAAkB;;;;;;;yBAOrB,aAAa;;;;;;;;;;;;;8BAaR,aAAa;;sBAErB,OAAO,cAAc;;;;;2CAKA,OAAO,cAAc;;;;;;2CAMrB,OAAO,cAAc;;;;EAI5D,aAAa,GAAG;;;;uBAIG,aAAa;;;UAG1BA,cAAkB,kBAAkB;;;;;;;yBAOrB,aAAa;;;;;;;;;;;;;8BAaR,aAAa;;sBAErB,OAAO,iBAAiB;;;;;2CAKH,OAAO,iBAAiB;;;;;;2CAMxB,OAAO,iBAAiB;;;;EAI/D,MAAM,GACJA,cAAkB,mBAClB,GAAG;;;;;;;;;;;;OAaL;CACF;AACF,CAAC"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/awesome/GradientButton/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\n\nconst gradient = stylex.keyframes({\n  '0%': { backgroundPosition: '0% 50%' },\n  '50%': { backgroundPosition: '100% 50%' },\n  '100%': { backgroundPosition: '0% 50%' },\n});\n\nconst borderRadius = 'var(--gradient-button-border-radius, var(--lobe-border-radius))';\nconst gradientImage = `linear-gradient(-45deg, ${cssVar.gold}, ${cssVar.magenta}, ${cssVar.geekblue}, ${cssVar.cyan})`;\nconst hover = ':hover:not(:active)';\n\nexport const styles = stylex.create({\n  button: {\n    'borderColor': 'currentcolor',\n    'borderRadius': borderRadius,\n    'borderStyle': 'none',\n    'borderWidth': 'medium',\n    'position': 'relative',\n    'zIndex': 1,\n    '::after': {\n      borderRadius: `calc(${borderRadius} - 1px)`,\n      content: \"''\",\n      insetBlockStart: 1,\n      insetInlineStart: 1,\n      position: 'absolute',\n      zIndex: -1,\n      height: 'calc(100% - 2px)',\n      width: 'calc(100% - 2px)',\n    },\n    '::before': {\n      inset: 0,\n      borderRadius,\n      animationDelay: '5s',\n      animationDuration: '5s',\n      animationIterationCount: 'infinite',\n      animationName: gradient,\n      animationTimingFunction: 'ease',\n      backgroundImage: gradientImage,\n      backgroundSize: '400% 400%',\n      content: \"''\",\n      position: 'absolute',\n      zIndex: -2,\n    },\n  },\n  buttonDark: {\n    '::after': {\n      backgroundColor: {\n        'default': cssVar.colorBgLayout,\n        [hover]: `color-mix(in srgb, ${cssVar.colorBgLayout} 90%, transparent)`,\n        ':active': `color-mix(in srgb, ${cssVar.colorBgLayout} 85%, transparent)`,\n      },\n    },\n  },\n  buttonLight: {\n    '::after': {\n      backgroundColor: {\n        'default': cssVar.colorBgContainer,\n        [hover]: `color-mix(in srgb, ${cssVar.colorBgContainer} 95%, transparent)`,\n        ':active': `color-mix(in srgb, ${cssVar.colorBgContainer} 90%, transparent)`,\n      },\n    },\n  },\n  glow: {\n    borderRadius: 'inherit',\n    animationDelay: '5s',\n    animationDuration: '5s',\n    animationIterationCount: 'infinite',\n    animationName: gradient,\n    animationTimingFunction: 'ease',\n    backgroundImage: gradientImage,\n    backgroundSize: '400% 400%',\n    filter: 'blur(0.5em)',\n    insetBlockStart: 0,\n    insetInlineStart: 0,\n    opacity: 0.5,\n    position: 'absolute',\n    zIndex: -2,\n    height: '100%',\n    width: '100%',\n  },\n});\n"],"mappings":";;AAKsB,GAA2B,OAAO,OAAS,OAAO,UAAY,OAAO,WAAa,OAAO;AAE/G,MAAa,SAAS;CACpB,QAAQ;EACN,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,YAAY;EACV,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF"}

package/es/awesome/GradientButton/type.d.mts

@@ -1,9 +1,8 @@
-import { ButtonProps } from "../../base-ui/Button/type.mjs";
-import "../../base-ui/Button/index.mjs";
+import { ButtonProps } from "../../Button/type.mjs";
+import "../../Button/index.mjs";
 //#region src/awesome/GradientButton/type.d.ts
-interface GradientButtonProps extends ButtonProps {
+export interface GradientButtonProps extends ButtonProps {
   glow?: boolean;
 }
 //#endregion
-export { GradientButtonProps };
 //# sourceMappingURL=type.d.mts.map

package/es/awesome/GridBackground/GridBackground.mjs

@@ -1,9 +1,12 @@
 "use client";
+import { styleProps } from "../../styles/stylex/props.mjs";
+import { cssVar } from "../../styles/stylex/cssVar.stylex.mjs";
+import { useTheme } from "../../styles/theme/scope.mjs";
 import Grid from "./components/Grid.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 { cssVar, cx, useTheme } from "antd-style";
+import * as stylex from "@stylexjs/stylex";
 import { shuffle } from "es-toolkit/compat";
 import chroma from "chroma-js";
 import { useSize } from "ahooks";
@@ -49,7 +52,7 @@ const GridBackground = memo(({ flip, reverse, showBackground, backgroundColor, r
 		theme.colorBgLayout
 	]);
 	const gridProps = useMemo(() => ({
-		className: reverse ? styles.highlightReverse : styles.highlight,
+		className: stylex.props(styles.highlight, reverse && styles.highlightReverse).className,
 		color: colorFront || cssVar.colorText,
 		strokeWidth
 	}), [
@@ -82,12 +85,11 @@ const GridBackground = memo(({ flip, reverse, showBackground, backgroundColor, r
 		gridProps
 	]);
 	return /* @__PURE__ */ jsxs("div", {
-		className: cx(styles.container, className),
-		ref,
-		style: flip ? {
+		...styleProps(styles.container, className, flip ? {
 			transform: "scaleY(-1)",
 			...style
-		} : style,
+		} : style),
+		ref,
 		...rest,
 		children: [
 			/* @__PURE__ */ jsx(Grid, {
@@ -97,12 +99,12 @@ const GridBackground = memo(({ flip, reverse, showBackground, backgroundColor, r
 			}),
 			animation && /* @__PURE__ */ jsx(HighlightGrid, {}),
 			showBackground && /* @__PURE__ */ jsx("div", {
-				className: styles.backgroundContainer,
+				...stylex.props(styles.backgroundContainer),
 				style: {
 					...size ? { fontSize: size.width / 80 } : {},
 					...backgroundCssVariables
 				},
-				children: /* @__PURE__ */ jsx("div", { className: styles.background })
+				children: /* @__PURE__ */ jsx("div", { ...stylex.props(styles.backgroundShape) })
 			})
 		]
 	});

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

@@ -1 +1 @@
-{"version":3,"file":"GridBackground.mjs","names":[],"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;AAAE;AAEtE,MAAM,iBAAiB,MACpB,EACC,MACA,SACA,gBACA,iBACA,QACA,oBAAoB,GACpB,WACA,YACA,WACA,aACA,OACA,WACA,GAAG,WACC;CACJ,MAAM,MAAM,OAAO,IAAI;CACvB,MAAM,OAAO,QAAQ,GAAG;CACxB,MAAM,QAAQ,SAAS;CAEvB,MAAM,yBAAyB,cAAsC;EACnE,IAAI,CAAC,gBAAgB,OAAO,CAAC;EAE7B,MAAM,QAAQ,OACX,OAAO;GAAC,MAAM;GAAW,mBAAmB;GAAQ,MAAM;EAAa,CAAC,CAAC,CACzE,MAAM,CAAC,CACP,KAAK,KAAK,CAAC,CACX,iBAAiB,CAAC,CAClB,OAAO,CAAC;EAEX,OAAO;GACL,6BAA6B,MAAM;GACnC,6BAA6B,MAAM;GACnC,6BAA6B,MAAM;GACnC,6BAA6B,MAAM;EACrC;CACF,GAAG;EAAC;EAAgB;EAAiB,MAAM;EAAW,MAAM;CAAa,CAAC;CAE1E,MAAM,YAAuB,eACpB;EACL,WAAW,UAAU,OAAO,mBAAmB,OAAO;EACtD,OAAO,cAAc,OAAO;EAC5B;CACF,IACA;EAAC;EAAS;EAAY;CAAW,CACnC;CAEA,MAAM,CAAC,OAAO,YAAY,SAAS,SAAS,eAAe,KAAA,CAAS;CACpE,gBAAgB;EACd,SAAS,SAAS,QAAQ,YAAY,IAAI,KAAA,CAAS;CACrD,GAAG,CAAC,MAAM,CAAC;CAEX,MAAM,gBAAgB,kBAAkB;EACtC,IAAI,CAAC,OACH,OAAO,oBAAC,MAAD;GAAM,OAAO,EAAE,cAAc,GAAG,kBAAkB,GAAG;GAAU,GAAI;EAAY,CAAA;EAExF,OACE,oBAAA,YAAA,EAAA,UACG,MAAM,KAAK,MAAM,UAAU;GAC1B,OACE,oBAAC,MAAD;IAEE,UAAU;IACV,OACE;KACE,WAAW,GAAG,QAAQ,KAAK,OAAO,EAAE;KACpC,cAAc,GAAG,kBAAkB;IACrC;IAEF,GAAI;GACL,GATM,IASN;EAEL,CAAC,EACD,CAAA;CAEN,GAAG;EAAC;EAAO;EAAmB;CAAS,CAAC;CAExC,OACE,qBAAC,OAAD;EACE,WAAW,GAAG,OAAO,WAAW,SAAS;EACpC;EACL,OAAO,OAAO;GAAE,WAAW;GAAc,GAAG;EAAM,IAAI;EACtD,GAAI;EAJN,UAAA;GAME,oBAAC,MAAD;IACE,OAAO,aAAa,OAAO;IACd;IACb,OAAO,EAAE,QAAQ,EAAE;GACpB,CAAA;GACA,aAAa,oBAAC,eAAD,CAAgB,CAAA;GAC7B,kBACC,oBAAC,OAAD;IACE,WAAW,OAAO;IAClB,OAAO;KACL,GAAI,OAAO,EAAE,UAAU,KAAK,QAAQ,GAAG,IAAI,CAAC;KAC5C,GAAG;IACL;IAEA,UAAA,oBAAC,OAAD,EAAK,WAAW,OAAO,WAAa,CAAA;GACjC,CAAA;EAEJ;;AAET,CACF;AAEA,eAAe,cAAc"}
+{"version":3,"file":"GridBackground.mjs","names":[],"sources":["../../../src/awesome/GridBackground/GridBackground.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport { useSize } from 'ahooks';\nimport chroma from 'chroma-js';\nimport { shuffle } from 'es-toolkit/compat';\nimport { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\nimport { styleProps } from '@/styles/stylex/props';\nimport { useTheme } from '@/styles/theme/scope';\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: stylex.props(styles.highlight, reverse && styles.highlightReverse).className,\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        {...styleProps(\n          styles.container,\n          className,\n          flip ? { transform: 'scaleY(-1)', ...style } : style,\n        )}\n        ref={ref}\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            {...stylex.props(styles.backgroundContainer)}\n            style={{\n              ...(size ? { fontSize: size.width / 80 } : {}),\n              ...backgroundCssVariables,\n            }}\n          >\n            <div {...stylex.props(styles.backgroundShape)} />\n          </div>\n        )}\n      </div>\n    );\n  },\n);\n\nGridBackground.displayName = 'GridBackground';\n\nexport default GridBackground;\n"],"mappings":";;;;;;;;;;;;;AAaA,MAAM,eAAe;CAAC;CAAG;CAAG;CAAG;CAAG;CAAG;CAAG;CAAG;CAAG;CAAG;CAAG;CAAI;CAAI;CAAI;CAAI;AAAE;AACtE,MAAM,iBAAiB,MAA2B,EAChD,MACA,SACA,gBACA,iBACA,QACA,oBAAoB,GACpB,WACA,YACA,WACA,aACA,OACA,WACA,GAAG,WACC;CACJ,MAAM,MAAM,OAAO,IAAI;CACvB,MAAM,OAAO,QAAQ,GAAG;CACxB,MAAM,QAAQ,SAAS;CACvB,MAAM,yBAAyB,cAAsC;EACnE,IAAI,CAAC,gBAAgB,OAAO,CAAC;EAC7B,MAAM,QAAQ,OAAO,OAAO;GAAC,MAAM;GAAW,mBAAmB;GAAQ,MAAM;EAAa,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,KAAK,KAAK,CAAC,CAAC,iBAAiB,CAAC,CAAC,OAAO,CAAC;EAC9I,OAAO;GACL,6BAA6B,MAAM;GACnC,6BAA6B,MAAM;GACnC,6BAA6B,MAAM;GACnC,6BAA6B,MAAM;EACrC;CACF,GAAG;EAAC;EAAgB;EAAiB,MAAM;EAAW,MAAM;CAAa,CAAC;CAC1E,MAAM,YAAuB,eAAe;EAC1C,WAAW,OAAO,MAAM,OAAO,WAAW,WAAW,OAAO,gBAAgB,CAAC,CAAC;EAC9E,OAAO,cAAc,OAAO;EAC5B;CACF,IAAI;EAAC;EAAS;EAAY;CAAW,CAAC;CACtC,MAAM,CAAC,OAAO,YAAY,SAAS,SAAS,eAAe,KAAA,CAAS;CACpE,gBAAgB;EACd,SAAS,SAAS,QAAQ,YAAY,IAAI,KAAA,CAAS;CACrD,GAAG,CAAC,MAAM,CAAC;CACX,MAAM,gBAAgB,kBAAkB;EACtC,IAAI,CAAC,OAAO,OAAO,oBAAC,MAAD;GAAM,OAAO,EAC9B,cAAc,GAAG,kBAAkB,GACrC;GAAU,GAAI;EAAY,CAAA;EAC1B,OAAO,oBAAA,YAAA,EAAA,UACA,MAAM,KAAK,MAAM,UAAU;GAC9B,OAAO,oBAAC,MAAD;IAAiB,UAAU;IAAM,OAAO;KAC7C,WAAW,GAAG,QAAQ,KAAK,OAAO,EAAE;KACpC,cAAc,GAAG,kBAAkB;IACrC;IAAU,GAAI;GAAY,GAHR,IAGQ;EAC5B,CAAC,EACG,CAAA;CACR,GAAG;EAAC;EAAO;EAAmB;CAAS,CAAC;CACxC,OAAO,qBAAC,OAAD;EAAK,GAAI,WAAW,OAAO,WAAW,WAAW,OAAO;GAC7D,WAAW;GACX,GAAG;EACL,IAAI,KAAK;EAAQ;EAAK,GAAI;EAHnB,UAAA;GAID,oBAAC,MAAD;IAAM,OAAO,aAAa,OAAO;IAA0B;IAAa,OAAO,EACjF,QAAQ,EACV;GAAI,CAAA;GACC,aAAa,oBAAC,eAAD,CAAgB,CAAA;GAC7B,kBAAkB,oBAAC,OAAD;IAAK,GAAI,OAAO,MAAM,OAAO,mBAAmB;IAAG,OAAO;KAC/E,GAAI,OAAO,EACT,UAAU,KAAK,QAAQ,GACzB,IAAI,CAAC;KACL,GAAG;IACL;IACQ,UAAA,oBAAC,OAAD,EAAK,GAAI,OAAO,MAAM,OAAO,eAAe,EAAI,CAAA;GAC7C,CAAA;EACJ;;AACX,CAAC;AACD,eAAe,cAAc"}

package/es/awesome/GridBackground/GridShowcase.mjs

@@ -1,9 +1,9 @@
 "use client";
 import FlexBasic_default from "../../Flex/FlexBasic.mjs";
+import { useTheme } from "../../styles/theme/scope.mjs";
 import GridBackground from "./GridBackground.mjs";
 import { memo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useTheme } from "antd-style";
 import { rgba } from "polished";
 //#region src/awesome/GridBackground/GridShowcase.tsx
 const GridShowcase = memo(({ style, children, backgroundColor = "#001dff", innerProps, ...rest }) => {

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

@@ -1 +1 @@
-{"version":3,"file":"GridShowcase.mjs","names":["Flexbox"],"sources":["../../../src/awesome/GridBackground/GridShowcase.tsx"],"sourcesContent":["'use client';\n\nimport { useTheme } from 'antd-style';\nimport { rgba } from 'polished';\nimport { memo } from 'react';\n\nimport { Flexbox } from '@/Flex';\n\nimport GridBackground from './GridBackground';\nimport type { GridShowcaseProps } from './type';\n\nconst GridShowcase = memo<GridShowcaseProps>(\n  ({ style, children, backgroundColor = '#001dff', innerProps, ...rest }) => {\n    const theme = useTheme();\n\n    return (\n      <Flexbox style={{ position: 'relative', ...style }} {...rest}>\n        <GridBackground\n          animation\n          flip\n          colorBack={rgba(theme.colorText, 0.12)}\n          colorFront={rgba(theme.colorText, 0.6)}\n        />\n        <Flexbox align={'center'} {...innerProps} style={{ zIndex: 4, ...innerProps?.style }}>\n          {children}\n        </Flexbox>\n        <GridBackground\n          animation\n          random\n          reverse\n          showBackground\n          backgroundColor={backgroundColor}\n          colorBack={rgba(theme.colorText, 0.24)}\n          colorFront={theme.colorText}\n          style={{ zIndex: 0 }}\n        />\n      </Flexbox>\n    );\n  },\n);\n\nGridShowcase.displayName = 'GridShowcase';\n\nexport default GridShowcase;\n"],"mappings":";;;;;;;;AAWA,MAAM,eAAe,MAClB,EAAE,OAAO,UAAU,kBAAkB,WAAW,YAAY,GAAG,WAAW;CACzE,MAAM,QAAQ,SAAS;CAEvB,OACE,qBAACA,mBAAD;EAAS,OAAO;GAAE,UAAU;GAAY,GAAG;EAAM;EAAG,GAAI;EAAxD,UAAA;GACE,oBAAC,gBAAD;IACE,WAAA;IACA,MAAA;IACA,WAAW,KAAK,MAAM,WAAW,GAAI;IACrC,YAAY,KAAK,MAAM,WAAW,EAAG;GACtC,CAAA;GACD,oBAACA,mBAAD;IAAS,OAAO;IAAU,GAAI;IAAY,OAAO;KAAE,QAAQ;KAAG,GAAG,YAAY;IAAM;IAChF;GACM,CAAA;GACT,oBAAC,gBAAD;IACE,WAAA;IACA,QAAA;IACA,SAAA;IACA,gBAAA;IACiB;IACjB,WAAW,KAAK,MAAM,WAAW,GAAI;IACrC,YAAY,MAAM;IAClB,OAAO,EAAE,QAAQ,EAAE;GACpB,CAAA;EACM;;AAEb,CACF;AAEA,aAAa,cAAc"}
+{"version":3,"file":"GridShowcase.mjs","names":["Flexbox"],"sources":["../../../src/awesome/GridBackground/GridShowcase.tsx"],"sourcesContent":["'use client';\n\nimport { rgba } from 'polished';\nimport { memo } from 'react';\n\nimport { Flexbox } from '@/Flex';\nimport { useTheme } from '@/styles/theme/scope';\n\nimport GridBackground from './GridBackground';\nimport type { GridShowcaseProps } from './type';\n\nconst GridShowcase = memo<GridShowcaseProps>(\n  ({ style, children, backgroundColor = '#001dff', innerProps, ...rest }) => {\n    const theme = useTheme();\n\n    return (\n      <Flexbox style={{ position: 'relative', ...style }} {...rest}>\n        <GridBackground\n          animation\n          flip\n          colorBack={rgba(theme.colorText, 0.12)}\n          colorFront={rgba(theme.colorText, 0.6)}\n        />\n        <Flexbox align={'center'} {...innerProps} style={{ zIndex: 4, ...innerProps?.style }}>\n          {children}\n        </Flexbox>\n        <GridBackground\n          animation\n          random\n          reverse\n          showBackground\n          backgroundColor={backgroundColor}\n          colorBack={rgba(theme.colorText, 0.24)}\n          colorFront={theme.colorText}\n          style={{ zIndex: 0 }}\n        />\n      </Flexbox>\n    );\n  },\n);\n\nGridShowcase.displayName = 'GridShowcase';\n\nexport default GridShowcase;\n"],"mappings":";;;;;;;;AAWA,MAAM,eAAe,MAClB,EAAE,OAAO,UAAU,kBAAkB,WAAW,YAAY,GAAG,WAAW;CACzE,MAAM,QAAQ,SAAS;CAEvB,OACE,qBAACA,mBAAD;EAAS,OAAO;GAAE,UAAU;GAAY,GAAG;EAAM;EAAG,GAAI;EAAxD,UAAA;GACE,oBAAC,gBAAD;IACE,WAAA;IACA,MAAA;IACA,WAAW,KAAK,MAAM,WAAW,GAAI;IACrC,YAAY,KAAK,MAAM,WAAW,EAAG;GACtC,CAAA;GACD,oBAACA,mBAAD;IAAS,OAAO;IAAU,GAAI;IAAY,OAAO;KAAE,QAAQ;KAAG,GAAG,YAAY;IAAM;IAChF;GACM,CAAA;GACT,oBAAC,gBAAD;IACE,WAAA;IACA,QAAA;IACA,SAAA;IACA,gBAAA;IACiB;IACjB,WAAW,KAAK,MAAM,WAAW,GAAI;IACrC,YAAY,MAAM;IAClB,OAAO,EAAE,QAAQ,EAAE;GACpB,CAAA;EACM;;AAEb,CACF;AAEA,aAAa,cAAc"}

package/es/awesome/GridBackground/style.mjs

@@ -1,90 +1,53 @@
-import { createStaticStyles, keyframes } from "antd-style";
 //#region src/awesome/GridBackground/style.ts
-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 }) => {
-	const width = 24;
-	const height = 36;
-	return {
-		background: css`
-      position: absolute;
-      inset-block-start: ${60 - height / 2}%;
-      inset-inline-start: ${50 - width / 2}%;
-      transform: rotateX(60deg);
-
-      width: ${width}%;
-      height: ${height}%;
-      border-radius: 50%;
-
-      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`
-      position: absolute;
-      z-index: -1;
-      inset: 0;
-
-      width: 100%;
-      height: 100%;
-
-      perspective: 200px;
-    `,
-		container: css`
-      position: relative;
-
-      mask-image: linear-gradient(to bottom, transparent, #fff 30%, #fff 70%, transparent);
-      mask-size: cover;
-    `,
-		highlight: css`
-      --duration: 6s;
-      --delay: 0s;
-
-      position: absolute;
-      z-index: 1;
-      inset: 0;
-
-      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%;
-    `,
-		highlightReverse: css`
-      --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%;
-    `
-	};
-});
+const styles = {
+	backgroundShape: {
+		kaIpWk: "lb16rqkct",
+		kWkggS: "lbv5s5hp",
+		kGVxlE: "lb1trq2s7",
+		ku685b: "lb1ebsbtg",
+		k87sOh: "lb1o8sa5k",
+		kLqNvP: "lb81iihk",
+		kVAEAm: "lb10l6tqk",
+		k3aq6I: "lbbmks7n",
+		kZKoxP: "lb119rli9",
+		kzqmXN: "lbu9fw5t",
+		$$css: true
+	},
+	backgroundContainer: {
+		kpwlN0: "lb10a8y8t",
+		kwFjlL: "lb3qvkrv",
+		kVAEAm: "lb10l6tqk",
+		kY2c9j: "lb8knxv4",
+		kZKoxP: "lb5yr21d",
+		kzqmXN: "lbh8yej3",
+		$$css: true
+	},
+	container: {
+		kX1K2I: "lb7jios3",
+		kn1fP1: "lb12qzq6t",
+		kVAEAm: "lb1n2onr6",
+		$$css: true
+	},
+	highlight: {
+		"--delay": "lbx41sp4",
+		"--duration": "lb98was",
+		kpwlN0: "lb10a8y8t",
+		kKxzle: "lbnvj4n5",
+		k44tkh: "lbg7ug8h",
+		ko0y90: "lba4qsjk",
+		kKVMdj: "lb1fc998c",
+		kyAemX: "lb1b8cam7",
+		kX1K2I: "lb1tfxnlg",
+		kn1fP1: "lb6kp3kt",
+		kVAEAm: "lb10l6tqk",
+		kY2c9j: "lb1vjfegm",
+		$$css: true
+	},
+	highlightReverse: {
+		kKVMdj: "lbe5e5tm",
+		$$css: true
+	}
+};
 //#endregion
 export { styles };
 

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

@@ -1 +1 @@
-{"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,UAAU;CACpD,MAAM,QAAQ;CACd,MAAM,SAAS;CAEf,OAAO;EACL,YAAY,GAAG;;2BAEQ,KAAK,SAAS,EAAE;4BACf,KAAK,QAAQ,EAAE;;;eAG5B,MAAM;gBACL,OAAO;;;;;;;;;;;EAWnB,qBAAqB,GAAG;;;;;;;;;;EAUxB,WAAW,GAAG;;;;;;EAMd,WAAW,GAAG;;;;;;;;mBAQC,mBAAmB;;;;;;EAMlC,kBAAkB,GAAG;;;;;;;;mBAQN,0BAA0B;;;;;;;CAO3C;AACF,CAAC"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/awesome/GridBackground/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nconst highlightAnimation = stylex.keyframes({\n  '0%': { maskPosition: '100% 0%' },\n  '16%': { maskPosition: '100% 200%' },\n  '100%': { maskPosition: '100% 200%' },\n});\n\nconst highlightAnimationReverse = stylex.keyframes({\n  '0%': { maskPosition: '100% 200%' },\n  '16%': { maskPosition: '100% 0%' },\n  '100%': { maskPosition: '100% 0%' },\n});\n\nexport const styles = stylex.create({\n  backgroundShape: {\n    borderRadius: '50%',\n    backgroundColor: 'var(--grid-background-color-1, transparent)',\n    boxShadow:\n      '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)',\n    filter: 'blur(2em) saturate(400%)',\n    insetBlockStart: '42%',\n    insetInlineStart: '38%',\n    position: 'absolute',\n    transform: 'rotateX(60deg)',\n    height: '36%',\n    width: '24%',\n  },\n  backgroundContainer: {\n    inset: 0,\n    perspective: '200px',\n    position: 'absolute',\n    zIndex: -1,\n    height: '100%',\n    width: '100%',\n  },\n  container: {\n    maskImage: 'linear-gradient(to bottom, transparent, #fff 30%, #fff 70%, transparent)',\n    maskSize: 'cover',\n    position: 'relative',\n  },\n  highlight: {\n    '--delay': '0s',\n    '--duration': '6s',\n    'inset': 0,\n    'animationDelay': 'var(--delay)',\n    'animationDuration': 'var(--duration)',\n    'animationIterationCount': 'infinite',\n    'animationName': highlightAnimation,\n    'animationTimingFunction': 'cubic-bezier(0.62, 0.62, 0.28, 0.67)',\n    'maskImage': 'linear-gradient(to bottom, transparent 40%, #fff 60%, transparent)',\n    'maskSize': '100% 200%',\n    'position': 'absolute',\n    'zIndex': 1,\n  },\n  highlightReverse: {\n    animationName: highlightAnimationReverse,\n  },\n});\n"],"mappings":";AAGA,MAAa,SAAS;CACpB,iBAAiB;EACf,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,qBAAqB;EACnB,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,WAAW;EACX,cAAc;EACd,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,kBAAkB;EAChB,QAAQ;EACR,OAAO;CACT;AACF"}

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

@@ -2,7 +2,7 @@ import { FlexboxProps } from "../../Flex/type.mjs";
 import "../../Flex/index.mjs";
 import { DivProps } from "../../types/index.mjs";
 //#region src/awesome/GridBackground/type.d.ts
-interface GridBackgroundProps extends DivProps {
+export interface GridBackgroundProps extends DivProps {
   animation?: boolean;
   animationDuration?: number;
   backgroundColor?: string;
@@ -14,10 +14,9 @@ interface GridBackgroundProps extends DivProps {
   showBackground?: boolean;
   strokeWidth?: number;
 }
-interface GridShowcaseProps extends FlexboxProps {
+export interface GridShowcaseProps extends FlexboxProps {
   backgroundColor?: GridBackgroundProps['backgroundColor'];
   innerProps?: FlexboxProps;
 }
 //#endregion
-export { GridBackgroundProps, GridShowcaseProps };
 //# sourceMappingURL=type.d.mts.map

package/es/awesome/Hero/Hero.mjs

@@ -1,25 +1,24 @@
 "use client";
 import A from "../../A/index.mjs";
+import Icon from "../../Icon/Icon.mjs";
+import Button from "../../Button/Button.mjs";
 import FlexBasic_default from "../../Flex/FlexBasic.mjs";
 import Center from "../../Flex/Center.mjs";
-import Icon from "../../Icon/Icon.mjs";
-import Button from "../../base-ui/Button/Button.mjs";
+import { useResponsive } from "../../styles/theme/scope.mjs";
 import AuroraBackground from "../AuroraBackground/AuroraBackground.mjs";
 import GradientButton from "../GradientButton/GradientButton.mjs";
 import GithubIcon from "../../icons/lucideExtra/GithubIcon.mjs";
 import { styles } from "./style.mjs";
 import { memo, useCallback } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { useResponsive } from "antd-style";
+import clsx from "clsx";
+import * as stylex from "@stylexjs/stylex";
 //#region src/awesome/Hero/Hero.tsx
 const Hero = memo(({ title, description, actions, Link }) => {
 	const { mobile } = useResponsive();
 	const LinkRender = Link || A;
-	const ButtonGroups = useCallback(() => Boolean(actions?.length) && /* @__PURE__ */ jsx(FlexBasic_default, {
-		horizontal: true,
-		className: styles.actions,
-		gap: 16,
-		justify: "center",
+	const ButtonGroups = useCallback(() => Boolean(actions?.length) && /* @__PURE__ */ jsx("div", {
+		className: clsx(stylex.props(styles.actions).className, "lobe-hero-actions"),
 		children: actions.map(({ text, link, openExternal, github, type }, index) => {
 			const content = type === "primary" ? /* @__PURE__ */ jsx(GradientButton, {
 				block: mobile,
@@ -57,19 +56,19 @@ const Hero = memo(({ title, description, actions, Link }) => {
 		},
 		children: /* @__PURE__ */ jsx(FlexBasic_default, {
 			horizontal: true,
-			className: styles.container,
+			className: stylex.props(styles.container).className,
 			distribution: "center",
 			children: /* @__PURE__ */ jsxs(Center, { children: [
 				title && /* @__PURE__ */ jsx(Center, {
 					horizontal: true,
 					as: "h1",
-					className: styles.title,
+					className: clsx(stylex.props(styles.title).className, "lobe-hero-title"),
 					dangerouslySetInnerHTML: { __html: title },
 					gap: "0.25em",
 					wrap: "wrap"
 				}),
 				description && /* @__PURE__ */ jsx("p", {
-					className: styles.desc,
+					...stylex.props(styles.desc),
 					dangerouslySetInnerHTML: { __html: description }
 				}),
 				/* @__PURE__ */ jsx(ButtonGroups, {})

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

@@ -1 +1 @@
-{"version":3,"file":"Hero.mjs","names":["Flexbox"],"sources":["../../../src/awesome/Hero/Hero.tsx"],"sourcesContent":["'use client';\n\nimport { GithubIcon } from '@lobehub/ui/icons';\nimport { useResponsive } from 'antd-style';\nimport { memo, useCallback } from 'react';\n\nimport A from '@/A';\nimport AuroraBackground from '@/awesome/AuroraBackground';\nimport GradientButton from '@/awesome/GradientButton';\nimport Button from '@/base-ui/Button';\nimport { Center, Flexbox } from '@/Flex';\nimport Icon from '@/Icon';\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 horizontal className={styles.actions} gap={16} 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 ? <Icon icon={GithubIcon} size={18} /> : undefined}\n                  key={index}\n                  size=\"large\"\n                >\n                  {text}\n                </GradientButton>\n              ) : (\n                <Button\n                  block={mobile}\n                  icon={github ? <Icon icon={GithubIcon} size={18} /> : 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      <Flexbox align={'center'} style={{ fontSize: 16, zIndex: 1 }}>\n        <Flexbox horizontal className={styles.container} distribution={'center'}>\n          <Center>\n            {title && (\n              <Center\n                horizontal\n                as={'h1'}\n                className={styles.title}\n                dangerouslySetInnerHTML={{ __html: title }}\n                gap={'0.25em'}\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    </>\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,cAAc;CAEjC,MAAM,aAAa,QAAQ;CAE3B,MAAM,eAAe,kBAEjB,QAAQ,SAAS,MAAM,KACrB,oBAACA,mBAAD;EAAS,YAAA;EAAW,WAAW,OAAO;EAAS,KAAK;EAAI,SAAS;EAC9D,UAAA,QAAS,KAAK,EAAE,MAAM,MAAM,cAAc,QAAQ,QAAQ,UAAU;GACnE,MAAM,UACJ,SAAS,YACP,oBAAC,gBAAD;IACE,OAAO;IACP,MAAM,SAAS,oBAAC,MAAD;KAAM,MAAM;KAAY,MAAM;IAAK,CAAA,IAAI,KAAA;IAEtD,MAAK;IAEJ,UAAA;GACa,GAJT,KAIS,IAEhB,oBAAC,QAAD;IACE,OAAO;IACP,MAAM,SAAS,oBAAC,MAAD;KAAM,MAAM;KAAY,MAAM;IAAK,CAAA,IAAI,KAAA;IAEtD,MAAK;IACL,MAAK;IAEJ,UAAA;GACK,GALD,KAKC;GAGZ,OAAO,eACL,oBAAC,GAAD;IAAG,MAAM;IAAiB,QAAQ,eAAe,WAAW,KAAA;IACzD,UAAA;GACA,GAFiB,IAEjB,IAEH,oBAAC,YAAD;IAAuB,IAAI;IACxB,UAAA;GACS,GAFK,IAEL;EAEhB,CAAC;CACM,CAAA,GAEb,CAAC,OAAO,CACV;CAEA,OACE,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,kBAAD,CAAmB,CAAA,GACnB,oBAACA,mBAAD;EAAS,OAAO;EAAU,OAAO;GAAE,UAAU;GAAI,QAAQ;EAAE;EACzD,UAAA,oBAACA,mBAAD;GAAS,YAAA;GAAW,WAAW,OAAO;GAAW,cAAc;GAC7D,UAAA,qBAAC,QAAD,EAAA,UAAA;IACG,SACC,oBAAC,QAAD;KACE,YAAA;KACA,IAAI;KACJ,WAAW,OAAO;KAClB,yBAAyB,EAAE,QAAQ,MAAM;KACzC,KAAK;KACL,MAAM;IACP,CAAA;IAEF,eACC,oBAAC,KAAD;KAAG,WAAW,OAAO;KAAM,yBAAyB,EAAE,QAAQ,YAAY;IAAI,CAAA;IAEhF,oBAAC,cAAD,CAAe,CAAA;GACT,EAAA,CAAA;EACD,CAAA;CACF,CAAA,CACT,EAAA,CAAA;AAEN,CAAC;AAED,KAAK,cAAc"}
+{"version":3,"file":"Hero.mjs","names":["Flexbox"],"sources":["../../../src/awesome/Hero/Hero.tsx"],"sourcesContent":["'use client';\n\nimport './style.css';\n\nimport { GithubIcon } from '@lobehub/ui/icons';\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport { memo, useCallback } from 'react';\n\nimport A from '@/A';\nimport AuroraBackground from '@/awesome/AuroraBackground';\nimport GradientButton from '@/awesome/GradientButton';\nimport Button from '@/Button';\nimport { Center, Flexbox } from '@/Flex';\nimport Icon from '@/Icon';\nimport { useResponsive } from '@/styles/theme/scope';\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        <div className={clsx(stylex.props(styles.actions).className, 'lobe-hero-actions')}>\n          {actions!.map(({ text, link, openExternal, github, type }, index) => {\n            const content =\n              type === 'primary' ? (\n                <GradientButton\n                  block={mobile}\n                  icon={github ? <Icon icon={GithubIcon} size={18} /> : undefined}\n                  key={index}\n                  size=\"large\"\n                >\n                  {text}\n                </GradientButton>\n              ) : (\n                <Button\n                  block={mobile}\n                  icon={github ? <Icon icon={GithubIcon} size={18} /> : 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        </div>\n      ),\n    [actions],\n  );\n\n  return (\n    <>\n      <AuroraBackground />\n      <Flexbox align={'center'} style={{ fontSize: 16, zIndex: 1 }}>\n        <Flexbox\n          horizontal\n          className={stylex.props(styles.container).className}\n          distribution={'center'}\n        >\n          <Center>\n            {title && (\n              <Center\n                horizontal\n                as={'h1'}\n                className={clsx(stylex.props(styles.title).className, 'lobe-hero-title')}\n                dangerouslySetInnerHTML={{ __html: title }}\n                gap={'0.25em'}\n                wrap={'wrap'}\n              />\n            )}\n            {description && (\n              <p {...stylex.props(styles.desc)} dangerouslySetInnerHTML={{ __html: description }} />\n            )}\n            <ButtonGroups />\n          </Center>\n        </Flexbox>\n      </Flexbox>\n    </>\n  );\n});\n\nHero.displayName = 'Hero';\n\nexport default Hero;\n"],"mappings":";;;;;;;;;;;;;;;;AAgBA,MAAM,OAAO,MAAiB,EAC5B,OACA,aACA,SACA,WACI;CACJ,MAAM,EACJ,WACE,cAAc;CAClB,MAAM,aAAa,QAAQ;CAC3B,MAAM,eAAe,kBAAkB,QAAQ,SAAS,MAAM,KAAK,oBAAC,OAAD;EAAK,WAAW,KAAK,OAAO,MAAM,OAAO,OAAO,CAAC,CAAC,WAAW,mBAAmB;EAC1I,UAAA,QAAS,KAAK,EACnB,MACA,MACA,cACA,QACA,QACC,UAAU;GACX,MAAM,UAAU,SAAS,YAAY,oBAAC,gBAAD;IAAgB,OAAO;IAAQ,MAAM,SAAS,oBAAC,MAAD;KAAM,MAAM;KAAY,MAAM;IAAK,CAAA,IAAI,KAAA;IAAuB,MAAK;IACzI,UAAA;GACa,GAFgH,KAEhH,IAAI,oBAAC,QAAD;IAAQ,OAAO;IAAQ,MAAM,SAAS,oBAAC,MAAD;KAAM,MAAM;KAAY,MAAM;IAAK,CAAA,IAAI,KAAA;IAAuB,MAAK;IAAQ,MAAK;IACvI,UAAA;GACK,GAFyG,KAEzG;GAClB,OAAO,eAAe,oBAAC,GAAD;IAAG,MAAM;IAAiB,QAAQ,eAAe,WAAW,KAAA;IACvE,UAAA;GACA,GAF+B,IAE/B,IAAI,oBAAC,YAAD;IAAuB,IAAI;IAC/B,UAAA;GACS,GAFY,IAEZ;EACtB,CAAC;CACQ,CAAA,GAAG,CAAC,OAAO,CAAC;CACvB,OAAO,qBAAA,YAAA,EAAA,UAAA,CACH,oBAAC,kBAAD,CAAmB,CAAA,GACnB,oBAACA,mBAAD;EAAS,OAAO;EAAU,OAAO;GACjC,UAAU;GACV,QAAQ;EACV;EACI,UAAA,oBAACA,mBAAD;GAAS,YAAA;GAAW,WAAW,OAAO,MAAM,OAAO,SAAS,CAAC,CAAC;GAAW,cAAc;GACrF,UAAA,qBAAC,QAAD,EAAA,UAAA;IACG,SAAS,oBAAC,QAAD;KAAQ,YAAA;KAAW,IAAI;KAAM,WAAW,KAAK,OAAO,MAAM,OAAO,KAAK,CAAC,CAAC,WAAW,iBAAiB;KAAG,yBAAyB,EAC1I,QAAQ,MACV;KAAG,KAAK;KAAU,MAAM;IAAS,CAAA;IAC9B,eAAe,oBAAC,KAAD;KAAG,GAAI,OAAO,MAAM,OAAO,IAAI;KAAG,yBAAyB,EAC3E,QAAQ,YACV;IAAI,CAAA;IACF,oBAAC,cAAD,CAAe,CAAA;GACT,EAAA,CAAA;EACD,CAAA;CACF,CAAA,CACT,EAAA,CAAA;AACN,CAAC;AACD,KAAK,cAAc"}