@lobehub/ui 5.64.2 → 6.0.0-beta.10

package/es/awesome/LandingSection/style.mjs

@@ -1,87 +1,83 @@
-import { createStaticStyles } from "antd-style";
 //#region src/awesome/LandingSection/style.ts
-const styles = createStaticStyles(({ css, cssVar, responsive }) => ({
-	body: css`
-    margin-block-start: 32px;
-  `,
-	description: css`
-    max-inline-size: 34rem;
-    margin: 0;
-
-    font-size: 15px;
-    line-height: 1.6;
-    color: ${cssVar.colorTextSecondary};
-    text-wrap: pretty;
-  `,
-	eyebrow: css`
-    margin-block-end: 6px;
-  `,
-	extra: css`
-    display: flex;
-    flex: none;
-    flex-wrap: wrap;
-    gap: 8px;
-    align-items: center;
-
-    ${responsive.mobile} {
-      [data-align='start'] > & {
-        align-self: flex-start;
-      }
-    }
-  `,
-	header: css`
-    display: flex;
-    flex-direction: column;
-    gap: 20px;
-    align-items: center;
-
-    text-align: center;
-
-    &[data-align='start'] {
-      flex-direction: row;
-      gap: 32px;
-      align-items: flex-end;
-      justify-content: space-between;
-
-      text-align: start;
-
-      ${responsive.mobile} {
-        flex-direction: column;
-        gap: 16px;
-        align-items: stretch;
-      }
-    }
-  `,
-	heading: css`
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    align-items: center;
-
-    min-inline-size: 0;
-
-    [data-align='start'] > & {
-      align-items: flex-start;
-    }
-  `,
-	root: css`
-    padding-block: clamp(48px, 8vh, 80px);
-
-    &[data-divider='true'] {
-      border-block-start: 1px solid ${cssVar.colorBorderSecondary};
-    }
-  `,
-	title: css`
-    margin: 0;
-
-    font-size: clamp(24px, 3vw, 32px);
-    font-weight: bold;
-    line-height: 1.2;
-    color: ${cssVar.colorText};
-    text-wrap: balance;
-    letter-spacing: -0.025em;
-  `
-}));
+const styles = {
+	body: {
+		keoZOQ: "lbg87l8a",
+		$$css: true
+	},
+	description: {
+		kogj98: "lb1ghz6dp",
+		kMwMTN: "lbc77et8",
+		kGuDYH: "lb1jvydc1",
+		kLWn49: "lb1dbl2gt",
+		ks0D6T: "lb19pysoa",
+		kN2L0X: "lb1fzhlzt",
+		$$css: true
+	},
+	extra: {
+		kUk6DE: "lb1okw0bk",
+		kOIVth: "lb167g77z",
+		kGNEyG: "lb6s0dn4",
+		k1xSpc: "lb78zum5",
+		kwnvtZ: "lb1a02dak",
+		$$css: true
+	},
+	extraStart: {
+		kSGwAc: "lb1mhsu00",
+		$$css: true
+	},
+	eyebrow: {
+		k1K539: "lbzueoph",
+		$$css: true
+	},
+	header: {
+		kOIVth: "lb1c1vhfx",
+		kGNEyG: "lb6s0dn4",
+		k1xSpc: "lb78zum5",
+		kXwgrk: "lbdt5ytf",
+		k9WMMc: "lb2b8uid",
+		$$css: true
+	},
+	headerStart: {
+		kOIVth: "lb1rzw5jd lbte0vnk",
+		kGNEyG: "lbuk3077 lb1p67ayb",
+		kXwgrk: "lb1q0g3np lbrhvytc",
+		kjj79g: "lb1qughib",
+		k9WMMc: "lb1yc453h",
+		$$css: true
+	},
+	heading: {
+		kOIVth: "lb167g77z",
+		kGNEyG: "lb6s0dn4",
+		k1xSpc: "lb78zum5",
+		kXwgrk: "lbdt5ytf",
+		k7Eaqz: "lbeuugli",
+		$$css: true
+	},
+	headingStart: {
+		kGNEyG: "lb1cy8zhl",
+		$$css: true
+	},
+	root: {
+		k8WAf4: "lb51e83g",
+		$$css: true
+	},
+	rootDivider: {
+		kLZC3w: "lbwyyj3y",
+		kPef9Z: "lb13fuv20",
+		kEafiO: "lb178xt8z",
+		$$css: true
+	},
+	title: {
+		kogj98: "lb1ghz6dp",
+		kMwMTN: "lb66ogz0",
+		kGuDYH: "lb1veytfx",
+		k63SB2: "lb117nqv4",
+		kb6lSQ: "lb1w69ole",
+		kLWn49: "lb1u7k74",
+		kN2L0X: "lb1w2vvpw",
+		$$css: true
+	}
+};
 //#endregion
 export { styles };
 

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

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/awesome/LandingSection/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar, responsive }) => ({\n  body: css`\n    margin-block-start: 32px;\n  `,\n  description: css`\n    max-inline-size: 34rem;\n    margin: 0;\n\n    font-size: 15px;\n    line-height: 1.6;\n    color: ${cssVar.colorTextSecondary};\n    text-wrap: pretty;\n  `,\n  eyebrow: css`\n    margin-block-end: 6px;\n  `,\n  extra: css`\n    display: flex;\n    flex: none;\n    flex-wrap: wrap;\n    gap: 8px;\n    align-items: center;\n\n    ${responsive.mobile} {\n      [data-align='start'] > & {\n        align-self: flex-start;\n      }\n    }\n  `,\n  header: css`\n    display: flex;\n    flex-direction: column;\n    gap: 20px;\n    align-items: center;\n\n    text-align: center;\n\n    &[data-align='start'] {\n      flex-direction: row;\n      gap: 32px;\n      align-items: flex-end;\n      justify-content: space-between;\n\n      text-align: start;\n\n      ${responsive.mobile} {\n        flex-direction: column;\n        gap: 16px;\n        align-items: stretch;\n      }\n    }\n  `,\n  heading: css`\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n    align-items: center;\n\n    min-inline-size: 0;\n\n    [data-align='start'] > & {\n      align-items: flex-start;\n    }\n  `,\n  root: css`\n    padding-block: clamp(48px, 8vh, 80px);\n\n    &[data-divider='true'] {\n      border-block-start: 1px solid ${cssVar.colorBorderSecondary};\n    }\n  `,\n  title: css`\n    margin: 0;\n\n    font-size: clamp(24px, 3vw, 32px);\n    font-weight: bold;\n    line-height: 1.2;\n    color: ${cssVar.colorText};\n    text-wrap: balance;\n    letter-spacing: -0.025em;\n  `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,QAAQ,kBAAkB;CACzE,MAAM,GAAG;;;CAGT,aAAa,GAAG;;;;;;aAML,OAAO,mBAAmB;;;CAGrC,SAAS,GAAG;;;CAGZ,OAAO,GAAG;;;;;;;MAON,WAAW,OAAO;;;;;;CAMtB,QAAQ,GAAG;;;;;;;;;;;;;;;;QAgBL,WAAW,OAAO;;;;;;;CAOxB,SAAS,GAAG;;;;;;;;;;;;CAYZ,MAAM,GAAG;;;;sCAI2B,OAAO,qBAAqB;;;CAGhE,OAAO,GAAG;;;;;;aAMC,OAAO,UAAU;;;;AAI9B,EAAE"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/awesome/LandingSection/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\nimport { media } from '@/styles/stylex/media.stylex';\n\nexport const styles = stylex.create({\n  body: {\n    marginBlockStart: 32,\n  },\n  description: {\n    margin: 0,\n    color: cssVar.colorTextSecondary,\n    fontSize: 15,\n    lineHeight: 1.6,\n    maxInlineSize: '34rem',\n    textWrap: 'pretty',\n  },\n  extra: {\n    flex: 'none',\n    gap: 8,\n    alignItems: 'center',\n    display: 'flex',\n    flexWrap: 'wrap',\n  },\n  extraStart: {\n    alignSelf: { default: null, [media.mobile]: 'flex-start' },\n  },\n  eyebrow: {\n    marginBlockEnd: 6,\n  },\n  header: {\n    gap: 20,\n    alignItems: 'center',\n    display: 'flex',\n    flexDirection: 'column',\n    textAlign: 'center',\n  },\n  headerStart: {\n    gap: { default: 32, [media.mobile]: 16 },\n    alignItems: { default: 'flex-end', [media.mobile]: 'stretch' },\n    flexDirection: { default: 'row', [media.mobile]: 'column' },\n    justifyContent: 'space-between',\n    textAlign: 'start',\n  },\n  heading: {\n    gap: 8,\n    alignItems: 'center',\n    display: 'flex',\n    flexDirection: 'column',\n    minInlineSize: 0,\n  },\n  headingStart: {\n    alignItems: 'flex-start',\n  },\n  root: {\n    paddingBlock: 'clamp(48px,8vh,80px)',\n  },\n  rootDivider: {\n    borderBlockStartColor: cssVar.colorBorderSecondary,\n    borderBlockStartStyle: 'solid',\n    borderBlockStartWidth: 1,\n  },\n  title: {\n    margin: 0,\n    color: cssVar.colorText,\n    fontSize: 'clamp(24px, 3vw, 32px)',\n    fontWeight: 'bold',\n    letterSpacing: '-0.025em',\n    lineHeight: 1.2,\n    textWrap: 'balance',\n  },\n});\n"],"mappings":";AAKA,MAAa,SAAS;CACpB,MAAM;EACJ,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,YAAY;EACV,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,OAAO;CACT;CACA,QAAQ;EACN,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,cAAc;EACZ,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF"}

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

@@ -3,7 +3,7 @@ import { LandingLinkRender } from "../landingLink.mjs";
 import { LandingAction, LandingNavigate } from "../landingActions.mjs";
 import { ReactNode } from "react";
 //#region src/awesome/LandingSection/type.d.ts
-interface LandingSectionProps extends Omit<DivProps, 'title'> {
+export interface LandingSectionProps extends Omit<DivProps, 'title'> {
   /** Small buttons on the right side of the header, e.g. "Browse components". */
   actions?: LandingAction[];
   /**
@@ -36,5 +36,4 @@ interface LandingSectionProps extends Omit<DivProps, 'title'> {
   title?: ReactNode;
 }
 //#endregion
-export { LandingSectionProps };
 //# sourceMappingURL=type.d.mts.map

package/es/awesome/LogoMarquee/LogoMarquee.mjs

@@ -1,16 +1,19 @@
 "use client";
+import { styleProps } from "../../styles/stylex/props.mjs";
 import { renderLandingIcon } from "../landingIcon.mjs";
+import { logoMarqueeMarker } from "./marker.stylex.mjs";
 import { styles } from "./style.mjs";
 import { memo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { cx } from "antd-style";
+import clsx$1 from "clsx";
+import * as stylex from "@stylexjs/stylex";
 //#region src/awesome/LogoMarquee/LogoMarquee.tsx
 const Track = ({ hidden, iconOnly, iconSize, items }) => /* @__PURE__ */ jsx("div", {
 	"aria-hidden": hidden || void 0,
-	className: styles.track,
+	...stylex.props(styles.track),
 	children: items.map(({ icon, label }) => /* @__PURE__ */ jsxs("span", {
-		className: styles.item,
 		title: iconOnly ? label : void 0,
+		...stylex.props(styles.item),
 		children: [renderLandingIcon(icon, iconSize), !iconOnly && label]
 	}, label))
 });
@@ -21,14 +24,13 @@ const LogoMarquee = memo(({ caption, className, duration = 28, gap = 36, iconOnl
 		"--logo-marquee-max-width": typeof maxWidth === "number" ? `${maxWidth}px` : maxWidth
 	};
 	return /* @__PURE__ */ jsxs("div", {
-		className: cx(styles.root, className),
-		style: {
+		...styleProps(styles.root, className, {
 			...variables,
 			...style
-		},
+		}),
 		...rest,
 		children: [/* @__PURE__ */ jsxs("div", {
-			className: styles.viewport,
+			...stylex.props(logoMarqueeMarker, styles.viewport),
 			children: [/* @__PURE__ */ jsx(Track, {
 				iconOnly,
 				iconSize,
@@ -40,7 +42,7 @@ const LogoMarquee = memo(({ caption, className, duration = 28, gap = 36, iconOnl
 				items
 			})]
 		}), caption && /* @__PURE__ */ jsx("p", {
-			className: styles.caption,
+			className: clsx$1("lobe-logo-marquee-caption", stylex.props(styles.caption).className),
 			children: caption
 		})]
 	});

package/es/awesome/LogoMarquee/LogoMarquee.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"LogoMarquee.mjs","names":[],"sources":["../../../src/awesome/LogoMarquee/LogoMarquee.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { type CSSProperties, memo } from 'react';\n\nimport { renderLandingIcon } from '@/awesome/landingIcon';\n\nimport { styles } from './style';\nimport type { LogoMarqueeProps } from './type';\n\nconst Track = ({\n  hidden,\n  iconOnly,\n  iconSize,\n  items,\n}: Pick<LogoMarqueeProps, 'iconOnly' | 'items'> & { hidden?: boolean; iconSize: number }) => (\n  <div aria-hidden={hidden || undefined} className={styles.track}>\n    {items.map(({ icon, label }) => (\n      <span className={styles.item} key={label} title={iconOnly ? label : undefined}>\n        {renderLandingIcon(icon, iconSize)}\n        {!iconOnly && label}\n      </span>\n    ))}\n  </div>\n);\n\nconst LogoMarquee = memo<LogoMarqueeProps>(\n  ({\n    caption,\n    className,\n    duration = 28,\n    gap = 36,\n    iconOnly = false,\n    iconSize = 18,\n    items,\n    maxWidth = 640,\n    style,\n    ...rest\n  }) => {\n    const variables = {\n      '--logo-marquee-duration': `${duration}s`,\n      '--logo-marquee-gap': `${gap}px`,\n      '--logo-marquee-max-width': typeof maxWidth === 'number' ? `${maxWidth}px` : maxWidth,\n    } as CSSProperties;\n\n    return (\n      <div className={cx(styles.root, className)} style={{ ...variables, ...style }} {...rest}>\n        <div className={styles.viewport}>\n          <Track iconOnly={iconOnly} iconSize={iconSize} items={items} />\n          <Track hidden iconOnly={iconOnly} iconSize={iconSize} items={items} />\n        </div>\n        {caption && <p className={styles.caption}>{caption}</p>}\n      </div>\n    );\n  },\n);\n\nLogoMarquee.displayName = 'LogoMarquee';\n\nexport default LogoMarquee;\n"],"mappings":";;;;;;;AAUA,MAAM,SAAS,EACb,QACA,UACA,UACA,YAEA,oBAAC,OAAD;CAAK,eAAa,UAAU,KAAA;CAAW,WAAW,OAAO;CACtD,UAAA,MAAM,KAAK,EAAE,MAAM,YAClB,qBAAC,QAAD;EAAM,WAAW,OAAO;EAAkB,OAAO,WAAW,QAAQ,KAAA;EAApE,UAAA,CACG,kBAAkB,MAAM,QAAQ,GAChC,CAAC,YAAY,KACV;CAH6B,GAAA,KAG7B,CACP;AACE,CAAA;AAGP,MAAM,cAAc,MACjB,EACC,SACA,WACA,WAAW,IACX,MAAM,IACN,WAAW,OACX,WAAW,IACX,OACA,WAAW,KACX,OACA,GAAG,WACC;CACJ,MAAM,YAAY;EAChB,2BAA2B,GAAG,SAAS;EACvC,sBAAsB,GAAG,IAAI;EAC7B,4BAA4B,OAAO,aAAa,WAAW,GAAG,SAAS,MAAM;CAC/E;CAEA,OACE,qBAAC,OAAD;EAAK,WAAW,GAAG,OAAO,MAAM,SAAS;EAAG,OAAO;GAAE,GAAG;GAAW,GAAG;EAAM;EAAG,GAAI;EAAnF,UAAA,CACE,qBAAC,OAAD;GAAK,WAAW,OAAO;GAAvB,UAAA,CACE,oBAAC,OAAD;IAAiB;IAAoB;IAAiB;GAAQ,CAAA,GAC9D,oBAAC,OAAD;IAAO,QAAA;IAAiB;IAAoB;IAAiB;GAAQ,CAAA,CAClE;EACJ,CAAA,GAAA,WAAW,oBAAC,KAAD;GAAG,WAAW,OAAO;GAAU,UAAA;EAAW,CAAA,CACnD;;AAET,CACF;AAEA,YAAY,cAAc"}
+{"version":3,"file":"LogoMarquee.mjs","names":["clsx"],"sources":["../../../src/awesome/LogoMarquee/LogoMarquee.tsx"],"sourcesContent":["'use client';\n\nimport './style.css';\n\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport { type CSSProperties, memo } from 'react';\n\nimport { renderLandingIcon } from '@/awesome/landingIcon';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { logoMarqueeMarker } from './marker.stylex';\nimport { styles } from './style';\nimport type { LogoMarqueeProps } from './type';\n\nconst Track = ({\n  hidden,\n  iconOnly,\n  iconSize,\n  items,\n}: Pick<LogoMarqueeProps, 'iconOnly' | 'items'> & { hidden?: boolean; iconSize: number }) => (\n  <div aria-hidden={hidden || undefined} {...stylex.props(styles.track)}>\n    {items.map(({ icon, label }) => (\n      <span key={label} title={iconOnly ? label : undefined} {...stylex.props(styles.item)}>\n        {renderLandingIcon(icon, iconSize)}\n        {!iconOnly && label}\n      </span>\n    ))}\n  </div>\n);\n\nconst LogoMarquee = memo<LogoMarqueeProps>(\n  ({\n    caption,\n    className,\n    duration = 28,\n    gap = 36,\n    iconOnly = false,\n    iconSize = 18,\n    items,\n    maxWidth = 640,\n    style,\n    ...rest\n  }) => {\n    const variables = {\n      '--logo-marquee-duration': `${duration}s`,\n      '--logo-marquee-gap': `${gap}px`,\n      '--logo-marquee-max-width': typeof maxWidth === 'number' ? `${maxWidth}px` : maxWidth,\n    } as CSSProperties;\n\n    return (\n      <div {...styleProps(styles.root, className, { ...variables, ...style })} {...rest}>\n        <div {...stylex.props(logoMarqueeMarker, styles.viewport)}>\n          <Track iconOnly={iconOnly} iconSize={iconSize} items={items} />\n          <Track hidden iconOnly={iconOnly} iconSize={iconSize} items={items} />\n        </div>\n        {caption && (\n          <p className={clsx('lobe-logo-marquee-caption', stylex.props(styles.caption).className)}>\n            {caption}\n          </p>\n        )}\n      </div>\n    );\n  },\n);\n\nLogoMarquee.displayName = 'LogoMarquee';\n\nexport default LogoMarquee;\n"],"mappings":";;;;;;;;;;AAWA,MAAM,SAAS,EACb,QACA,UACA,UACA,YAII,oBAAC,OAAD;CAAK,eAAa,UAAU,KAAA;CAAW,GAAI,OAAO,MAAM,OAAO,KAAK;CACrE,UAAA,MAAM,KAAK,EACZ,MACA,YACI,qBAAC,QAAD;EAAkB,OAAO,WAAW,QAAQ,KAAA;EAAW,GAAI,OAAO,MAAM,OAAO,IAAI;EAAnF,UAAA,CACC,kBAAkB,MAAM,QAAQ,GAChC,CAAC,YAAY,KACV;CAHO,GAAA,KAGP,CAAC;AACN,CAAA;AACP,MAAM,cAAc,MAAwB,EAC1C,SACA,WACA,WAAW,IACX,MAAM,IACN,WAAW,OACX,WAAW,IACX,OACA,WAAW,KACX,OACA,GAAG,WACC;CACJ,MAAM,YAAY;EAChB,2BAA2B,GAAG,SAAS;EACvC,sBAAsB,GAAG,IAAI;EAC7B,4BAA4B,OAAO,aAAa,WAAW,GAAG,SAAS,MAAM;CAC/E;CACA,OAAO,qBAAC,OAAD;EAAK,GAAI,WAAW,OAAO,MAAM,WAAW;GACjD,GAAG;GACH,GAAG;EACL,CAAC;EAAG,GAAI;EAHD,UAAA,CAID,qBAAC,OAAD;GAAK,GAAI,OAAO,MAAM,mBAAmB,OAAO,QAAQ;GAAxD,UAAA,CACE,oBAAC,OAAD;IAAiB;IAAoB;IAAiB;GAAQ,CAAA,GAC9D,oBAAC,OAAD;IAAO,QAAA;IAAiB;IAAoB;IAAiB;GAAQ,CAAA,CAClE;EACJ,CAAA,GAAA,WAAW,oBAAC,KAAD;GAAG,WAAWA,OAAK,6BAA6B,OAAO,MAAM,OAAO,OAAO,CAAC,CAAC,SAAS;GAC7F,UAAA;EACA,CAAA,CACF;;AACX,CAAC;AACD,YAAY,cAAc"}

package/es/awesome/LogoMarquee/marker.stylex.mjs

@@ -0,0 +1,9 @@
+//#region src/awesome/LogoMarquee/marker.stylex.ts
+const logoMarqueeMarker = {
+	lbtf5aio: "lbtf5aio",
+	$$css: true
+};
+//#endregion
+export { logoMarqueeMarker };
+
+//# sourceMappingURL=marker.stylex.mjs.map

package/es/awesome/LogoMarquee/marker.stylex.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"marker.stylex.mjs","names":[],"sources":["../../../src/awesome/LogoMarquee/marker.stylex.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nexport const logoMarqueeMarker = stylex.defineMarker();\n"],"mappings":";AACA,MAAa,oBAAoB;CAC/B,UAAU;CACV,OAAO;AACT"}

package/es/awesome/LogoMarquee/style.mjs

@@ -1,69 +1,49 @@
-import { createStaticStyles, keyframes } from "antd-style";
 //#region src/awesome/LogoMarquee/style.ts
-const slide = keyframes`
-  to {
-    transform: translateX(calc(-100% - var(--logo-marquee-gap)));
-  }
-`;
-const styles = createStaticStyles(({ css, cssVar }) => ({
-	caption: css`
-    margin: 0;
-    font-size: ${cssVar.fontSizeSM};
-    color: ${cssVar.colorTextTertiary};
-
-    a {
-      color: inherit;
-      text-decoration: none;
-      transition: color 140ms ease;
-    }
-
-    a:hover {
-      color: ${cssVar.colorText};
-    }
-  `,
-	item: css`
-    display: inline-flex;
-    gap: 8px;
-    align-items: center;
-
-    font-size: ${cssVar.fontSize};
-    color: ${cssVar.colorTextTertiary};
-    white-space: nowrap;
-  `,
-	root: css`
-    display: flex;
-    flex-direction: column;
-    gap: 16px;
-    align-items: center;
-
-    inline-size: 100%;
-  `,
-	track: css`
-    display: flex;
-    flex: none;
-    gap: var(--logo-marquee-gap);
-    align-items: center;
-
-    animation: ${slide} var(--logo-marquee-duration) linear infinite;
-
-    @media (prefers-reduced-motion: reduce) {
-      animation: none;
-    }
-  `,
-	viewport: css`
-    overflow: hidden;
-    display: flex;
-    gap: var(--logo-marquee-gap);
-
-    inline-size: min(100%, var(--logo-marquee-max-width));
-
-    mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
-
-    &:hover > * {
-      animation-play-state: paused;
-    }
-  `
-}));
+const styles = {
+	caption: {
+		kogj98: "lb1ghz6dp",
+		kMwMTN: "lb53gy9q",
+		kGuDYH: "lbxobqjj",
+		$$css: true
+	},
+	item: {
+		kOIVth: "lb167g77z",
+		kGNEyG: "lb6s0dn4",
+		kMwMTN: "lb53gy9q",
+		k1xSpc: "lb3nfvp2",
+		kGuDYH: "lb1pzwcx8",
+		khDVqt: "lbuxw1ft",
+		$$css: true
+	},
+	root: {
+		kOIVth: "lbou54vl",
+		kGNEyG: "lb6s0dn4",
+		k1xSpc: "lb78zum5",
+		kXwgrk: "lbdt5ytf",
+		kzqmXN: "lbh8yej3",
+		$$css: true
+	},
+	track: {
+		kUk6DE: "lb1okw0bk",
+		kOIVth: "lbb2ngsn",
+		kGNEyG: "lb6s0dn4",
+		k44tkh: "lb10k1zvg lb1u6grsq",
+		ko0y90: "lba4qsjk lbg0664w",
+		kKVMdj: "lb1123evd lb1aquc0h",
+		k5bvn2: "lbn3rm52",
+		kyAemX: "lb1esw782 lb1uea3p4",
+		k1xSpc: "lb78zum5",
+		$$css: true
+	},
+	viewport: {
+		kOIVth: "lbb2ngsn",
+		kVQacm: "lbb3r6kr",
+		k1xSpc: "lb78zum5",
+		kzqmXN: "lb1gllafx",
+		kX1K2I: "lb968dim",
+		$$css: true
+	}
+};
 //#endregion
 export { styles };
 

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

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/awesome/LogoMarquee/style.ts"],"sourcesContent":["import { createStaticStyles, keyframes } from 'antd-style';\n\nconst slide = keyframes`\n  to {\n    transform: translateX(calc(-100% - var(--logo-marquee-gap)));\n  }\n`;\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  caption: css`\n    margin: 0;\n    font-size: ${cssVar.fontSizeSM};\n    color: ${cssVar.colorTextTertiary};\n\n    a {\n      color: inherit;\n      text-decoration: none;\n      transition: color 140ms ease;\n    }\n\n    a:hover {\n      color: ${cssVar.colorText};\n    }\n  `,\n  item: css`\n    display: inline-flex;\n    gap: 8px;\n    align-items: center;\n\n    font-size: ${cssVar.fontSize};\n    color: ${cssVar.colorTextTertiary};\n    white-space: nowrap;\n  `,\n  root: css`\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n    align-items: center;\n\n    inline-size: 100%;\n  `,\n  track: css`\n    display: flex;\n    flex: none;\n    gap: var(--logo-marquee-gap);\n    align-items: center;\n\n    animation: ${slide} var(--logo-marquee-duration) linear infinite;\n\n    @media (prefers-reduced-motion: reduce) {\n      animation: none;\n    }\n  `,\n  viewport: css`\n    overflow: hidden;\n    display: flex;\n    gap: var(--logo-marquee-gap);\n\n    inline-size: min(100%, var(--logo-marquee-max-width));\n\n    mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);\n\n    &:hover > * {\n      animation-play-state: paused;\n    }\n  `,\n}));\n"],"mappings":";;AAEA,MAAM,QAAQ,SAAS;;;;;AAMvB,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,SAAS,GAAG;;iBAEG,OAAO,WAAW;aACtB,OAAO,kBAAkB;;;;;;;;;eASvB,OAAO,UAAU;;;CAG9B,MAAM,GAAG;;;;;iBAKM,OAAO,SAAS;aACpB,OAAO,kBAAkB;;;CAGpC,MAAM,GAAG;;;;;;;;CAQT,OAAO,GAAG;;;;;;iBAMK,MAAM;;;;;;CAMrB,UAAU,GAAG;;;;;;;;;;;;;AAaf,EAAE"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/awesome/LogoMarquee/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\n\nimport { logoMarqueeMarker } from './marker.stylex';\n\nconst slide = stylex.keyframes({\n  to: { transform: 'translateX(calc(-100% - var(--logo-marquee-gap)))' },\n});\n\nconst reducedMotion = '@media (prefers-reduced-motion: reduce)';\n\nexport const styles = stylex.create({\n  caption: {\n    margin: 0,\n    color: cssVar.colorTextTertiary,\n    fontSize: cssVar.fontSizeSM,\n  },\n  item: {\n    gap: 8,\n    alignItems: 'center',\n    color: cssVar.colorTextTertiary,\n    display: 'inline-flex',\n    fontSize: cssVar.fontSize,\n    whiteSpace: 'nowrap',\n  },\n  root: {\n    gap: 16,\n    alignItems: 'center',\n    display: 'flex',\n    flexDirection: 'column',\n    inlineSize: '100%',\n  },\n  track: {\n    flex: 'none',\n    gap: 'var(--logo-marquee-gap)',\n    alignItems: 'center',\n    animationDuration: { default: 'var(--logo-marquee-duration)', [reducedMotion]: '0s' },\n    animationIterationCount: { default: 'infinite', [reducedMotion]: 1 },\n    animationName: { default: slide, [reducedMotion]: 'none' },\n    animationPlayState: {\n      default: null,\n      [stylex.when.ancestor(':hover', logoMarqueeMarker)]: 'paused',\n    },\n    animationTimingFunction: { default: 'linear', [reducedMotion]: 'ease' },\n    display: 'flex',\n  },\n  viewport: {\n    gap: 'var(--logo-marquee-gap)',\n    overflow: 'hidden',\n    display: 'flex',\n    inlineSize: 'min(100%, var(--logo-marquee-max-width))',\n    maskImage: 'linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent)',\n  },\n});\n"],"mappings":";AAOA,MAAa,SAAS;CACpB,SAAS;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF"}

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

@@ -1,14 +1,14 @@
 import { DivProps } from "../../types/index.mjs";
 import { ElementType, ReactNode } from "react";
 //#region src/awesome/LogoMarquee/type.d.ts
-interface LogoMarqueeItem {
+export interface LogoMarqueeItem {
   /** An icon component such as `OpenAI` from `@lobehub/icons`, or a ready-made node. */
   icon: ElementType<{
     size: number;
   }> | ReactNode;
   label: string;
 }
-interface LogoMarqueeProps extends DivProps {
+export interface LogoMarqueeProps extends DivProps {
   /** Caption below the track, e.g. a link to the icon catalog. */
   caption?: ReactNode;
   /**
@@ -36,5 +36,4 @@ interface LogoMarqueeProps extends DivProps {
   maxWidth?: number | string;
 }
 //#endregion
-export { LogoMarqueeItem, LogoMarqueeProps };
 //# sourceMappingURL=type.d.mts.map

package/es/awesome/Spline/ParentSize.mjs

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

package/es/awesome/Spline/ParentSize.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ParentSize.mjs","names":[],"sources":["../../../src/awesome/Spline/ParentSize.tsx"],"sourcesContent":["import { debounce } from 'es-toolkit/compat';\nimport {\n  type CSSProperties,\n  memo,\n  type ReactNode,\n  type Ref,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { mergeRefs } from 'react-merge-refs';\n\ninterface ResizeObserverCallback {\n  (entries: ResizeObserverEntry[], observer: ResizeObserver): void;\n}\n\ninterface ResizeObserverPolyfill {\n  new (callback: ResizeObserverCallback): ResizeObserver;\n}\n\n// @TODO remove when upgraded to TS 4 which has its own declaration\ninterface PrivateWindow {\n  ResizeObserver: ResizeObserverPolyfill;\n}\n\nexport interface ParentSizeProps {\n  /** Child render function `({ width, height, top, left, ref, resize }) => ReactNode`. */\n  children: (\n    args: {\n      ref: HTMLDivElement | null;\n      resize: (state: ParentSizeState) => void;\n    } & ParentSizeState,\n  ) => ReactNode;\n  /** Optional `className` to add to the parent `div` wrapper used for size measurement. */\n  className?: string;\n  /** Child render updates upon resize are delayed until `debounceTime` milliseconds _after_ the last resize event is observed. */\n  debounceTime?: number;\n  /** Optional flag to toggle leading debounce calls. When set to true this will ensure that the component always renders immediately. (defaults to true) */\n  enableDebounceLeadingCall?: boolean;\n  /** Optional dimensions provided won't trigger a state change when changed. */\n  ignoreDimensions?: keyof ParentSizeState | (keyof ParentSizeState)[];\n  /** Optional `style` object to apply to the parent `div` wrapper used for size measurement. */\n  parentSizeStyles?: CSSProperties;\n  ref?: Ref<HTMLDivElement>;\n  /** Optionally inject a ResizeObserver polyfill, else this *must* be globally available. */\n  resizeObserverPolyfill?: ResizeObserverPolyfill;\n}\n\ntype ParentSizeState = {\n  height: number;\n  left: number;\n  top: number;\n  width: number;\n};\n\nexport type ParentSizeProvidedProps = ParentSizeState;\n\nconst defaultIgnoreDimensions: ParentSizeProps['ignoreDimensions'] = [];\nconst defaultParentSizeStyles = { height: '100%', width: '100%' };\n\nconst ParentSize = memo<ParentSizeProps>(\n  ({\n    ref,\n    className,\n    children,\n    debounceTime = 300,\n    ignoreDimensions = defaultIgnoreDimensions,\n    parentSizeStyles,\n    enableDebounceLeadingCall = true,\n    resizeObserverPolyfill,\n    ...restProps\n  }) => {\n    const target = useRef<HTMLDivElement | null>(null);\n    const animationFrameID = useRef(0);\n\n    const [state, setState] = useState<ParentSizeState>({\n      height: 0,\n      left: 0,\n      top: 0,\n      width: 0,\n    });\n\n    const resize = useMemo(() => {\n      const normalized = Array.isArray(ignoreDimensions) ? ignoreDimensions : [ignoreDimensions];\n\n      return debounce(\n        (incoming: ParentSizeState) => {\n          setState((existing) => {\n            const stateKeys = Object.keys(existing) as (keyof ParentSizeState)[];\n            const keysWithChanges = stateKeys.filter((key) => existing[key] !== incoming[key]);\n            const shouldBail = keysWithChanges.every((key) => normalized.includes(key));\n\n            return shouldBail ? existing : incoming;\n          });\n        },\n        debounceTime,\n        { leading: enableDebounceLeadingCall },\n      );\n    }, [debounceTime, enableDebounceLeadingCall, ignoreDimensions]);\n\n    useEffect(() => {\n      const LocalResizeObserver =\n        resizeObserverPolyfill || (window as unknown as PrivateWindow).ResizeObserver;\n\n      const observer = new LocalResizeObserver((entries) => {\n        for (const entry of entries) {\n          const { left, top, width, height } = entry?.contentRect ?? {};\n          animationFrameID.current = window.requestAnimationFrame(() => {\n            resize({ height, left, top, width });\n          });\n        }\n      });\n      if (target.current) observer.observe(target.current);\n\n      return () => {\n        window.cancelAnimationFrame(animationFrameID.current);\n        observer.disconnect();\n        resize.cancel();\n      };\n    }, [resize, resizeObserverPolyfill]);\n\n    return (\n      <div\n        className={className}\n        ref={mergeRefs<HTMLDivElement>([ref, target])}\n        style={{ ...defaultParentSizeStyles, ...parentSizeStyles }}\n        {...restProps}\n      >\n        {children({\n          ...state,\n          ref: target.current,\n          resize,\n        })}\n      </div>\n    );\n  },\n);\n\nexport default ParentSize;\n"],"mappings":";;;;;AA0DA,MAAM,0BAA+D,CAAC;AACtE,MAAM,0BAA0B;CAAE,QAAQ;CAAQ,OAAO;AAAO;AAEhE,MAAM,aAAa,MAChB,EACC,KACA,WACA,UACA,eAAe,KACf,mBAAmB,yBACnB,kBACA,4BAA4B,MAC5B,wBACA,GAAG,gBACC;CACJ,MAAM,SAAS,OAA8B,IAAI;CACjD,MAAM,mBAAmB,OAAO,CAAC;CAEjC,MAAM,CAAC,OAAO,YAAY,SAA0B;EAClD,QAAQ;EACR,MAAM;EACN,KAAK;EACL,OAAO;CACT,CAAC;CAED,MAAM,SAAS,cAAc;EAC3B,MAAM,aAAa,MAAM,QAAQ,gBAAgB,IAAI,mBAAmB,CAAC,gBAAgB;EAEzF,OAAO,UACJ,aAA8B;GAC7B,UAAU,aAAa;IAKrB,OAJkB,OAAO,KAAK,QACE,CAAC,CAAC,QAAQ,QAAQ,SAAS,SAAS,SAAS,IAC5C,CAAC,CAAC,OAAO,QAAQ,WAAW,SAAS,GAAG,CAEzD,IAAI,WAAW;GACjC,CAAC;EACH,GACA,cACA,EAAE,SAAS,0BAA0B,CACvC;CACF,GAAG;EAAC;EAAc;EAA2B;CAAgB,CAAC;CAE9D,gBAAgB;EAId,MAAM,WAAW,KAFf,0BAA2B,OAAoC,iBAEvB,YAAY;GACpD,KAAK,MAAM,SAAS,SAAS;IAC3B,MAAM,EAAE,MAAM,KAAK,OAAO,WAAW,OAAO,eAAe,CAAC;IAC5D,iBAAiB,UAAU,OAAO,4BAA4B;KAC5D,OAAO;MAAE;MAAQ;MAAM;MAAK;KAAM,CAAC;IACrC,CAAC;GACH;EACF,CAAC;EACD,IAAI,OAAO,SAAS,SAAS,QAAQ,OAAO,OAAO;EAEnD,aAAa;GACX,OAAO,qBAAqB,iBAAiB,OAAO;GACpD,SAAS,WAAW;GACpB,OAAO,OAAO;EAChB;CACF,GAAG,CAAC,QAAQ,sBAAsB,CAAC;CAEnC,OACE,oBAAC,OAAD;EACa;EACX,KAAK,UAA0B,CAAC,KAAK,MAAM,CAAC;EAC5C,OAAO;GAAE,GAAG;GAAyB,GAAG;EAAiB;EACzD,GAAI;EAEH,UAAA,SAAS;GACR,GAAG;GACH,KAAK,OAAO;GACZ;EACF,CAAC;CACE,CAAA;AAET,CACF"}
+{"version":3,"file":"ParentSize.mjs","names":[],"sources":["../../../src/awesome/Spline/ParentSize.tsx"],"sourcesContent":["import { debounce } from 'es-toolkit/compat';\nimport {\n  type CSSProperties,\n  memo,\n  type ReactNode,\n  type Ref,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nimport { mergeRefs } from '@/utils/mergeRefs';\n\ninterface ResizeObserverCallback {\n  (entries: ResizeObserverEntry[], observer: ResizeObserver): void;\n}\n\ninterface ResizeObserverPolyfill {\n  new (callback: ResizeObserverCallback): ResizeObserver;\n}\n\n// @TODO remove when upgraded to TS 4 which has its own declaration\ninterface PrivateWindow {\n  ResizeObserver: ResizeObserverPolyfill;\n}\n\nexport interface ParentSizeProps {\n  /** Child render function `({ width, height, top, left, ref, resize }) => ReactNode`. */\n  children: (\n    args: {\n      ref: HTMLDivElement | null;\n      resize: (state: ParentSizeState) => void;\n    } & ParentSizeState,\n  ) => ReactNode;\n  /** Optional `className` to add to the parent `div` wrapper used for size measurement. */\n  className?: string;\n  /** Child render updates upon resize are delayed until `debounceTime` milliseconds _after_ the last resize event is observed. */\n  debounceTime?: number;\n  /** Optional flag to toggle leading debounce calls. When set to true this will ensure that the component always renders immediately. (defaults to true) */\n  enableDebounceLeadingCall?: boolean;\n  /** Optional dimensions provided won't trigger a state change when changed. */\n  ignoreDimensions?: keyof ParentSizeState | (keyof ParentSizeState)[];\n  /** Optional `style` object to apply to the parent `div` wrapper used for size measurement. */\n  parentSizeStyles?: CSSProperties;\n  ref?: Ref<HTMLDivElement>;\n  /** Optionally inject a ResizeObserver polyfill, else this *must* be globally available. */\n  resizeObserverPolyfill?: ResizeObserverPolyfill;\n}\n\ntype ParentSizeState = {\n  height: number;\n  left: number;\n  top: number;\n  width: number;\n};\n\nexport type ParentSizeProvidedProps = ParentSizeState;\n\nconst defaultIgnoreDimensions: ParentSizeProps['ignoreDimensions'] = [];\nconst defaultParentSizeStyles = { height: '100%', width: '100%' };\n\nconst ParentSize = memo<ParentSizeProps>(\n  ({\n    ref,\n    className,\n    children,\n    debounceTime = 300,\n    ignoreDimensions = defaultIgnoreDimensions,\n    parentSizeStyles,\n    enableDebounceLeadingCall = true,\n    resizeObserverPolyfill,\n    ...restProps\n  }) => {\n    const target = useRef<HTMLDivElement | null>(null);\n    const animationFrameID = useRef(0);\n\n    const [state, setState] = useState<ParentSizeState>({\n      height: 0,\n      left: 0,\n      top: 0,\n      width: 0,\n    });\n\n    const resize = useMemo(() => {\n      const normalized = Array.isArray(ignoreDimensions) ? ignoreDimensions : [ignoreDimensions];\n\n      return debounce(\n        (incoming: ParentSizeState) => {\n          setState((existing) => {\n            const stateKeys = Object.keys(existing) as (keyof ParentSizeState)[];\n            const keysWithChanges = stateKeys.filter((key) => existing[key] !== incoming[key]);\n            const shouldBail = keysWithChanges.every((key) => normalized.includes(key));\n\n            return shouldBail ? existing : incoming;\n          });\n        },\n        debounceTime,\n        { leading: enableDebounceLeadingCall },\n      );\n    }, [debounceTime, enableDebounceLeadingCall, ignoreDimensions]);\n\n    useEffect(() => {\n      const LocalResizeObserver =\n        resizeObserverPolyfill || (window as unknown as PrivateWindow).ResizeObserver;\n\n      const observer = new LocalResizeObserver((entries) => {\n        for (const entry of entries) {\n          const { left, top, width, height } = entry?.contentRect ?? {};\n          animationFrameID.current = window.requestAnimationFrame(() => {\n            resize({ height, left, top, width });\n          });\n        }\n      });\n      if (target.current) observer.observe(target.current);\n\n      return () => {\n        window.cancelAnimationFrame(animationFrameID.current);\n        observer.disconnect();\n        resize.cancel();\n      };\n    }, [resize, resizeObserverPolyfill]);\n\n    return (\n      <div\n        className={className}\n        ref={mergeRefs<HTMLDivElement>([ref, target])}\n        style={{ ...defaultParentSizeStyles, ...parentSizeStyles }}\n        {...restProps}\n      >\n        {children({\n          ...state,\n          ref: target.current,\n          resize,\n        })}\n      </div>\n    );\n  },\n);\n\nexport default ParentSize;\n"],"mappings":";;;;;AA2DA,MAAM,0BAA+D,CAAC;AACtE,MAAM,0BAA0B;CAAE,QAAQ;CAAQ,OAAO;AAAO;AAEhE,MAAM,aAAa,MAChB,EACC,KACA,WACA,UACA,eAAe,KACf,mBAAmB,yBACnB,kBACA,4BAA4B,MAC5B,wBACA,GAAG,gBACC;CACJ,MAAM,SAAS,OAA8B,IAAI;CACjD,MAAM,mBAAmB,OAAO,CAAC;CAEjC,MAAM,CAAC,OAAO,YAAY,SAA0B;EAClD,QAAQ;EACR,MAAM;EACN,KAAK;EACL,OAAO;CACT,CAAC;CAED,MAAM,SAAS,cAAc;EAC3B,MAAM,aAAa,MAAM,QAAQ,gBAAgB,IAAI,mBAAmB,CAAC,gBAAgB;EAEzF,OAAO,UACJ,aAA8B;GAC7B,UAAU,aAAa;IAKrB,OAJkB,OAAO,KAAK,QACE,CAAC,CAAC,QAAQ,QAAQ,SAAS,SAAS,SAAS,IAC5C,CAAC,CAAC,OAAO,QAAQ,WAAW,SAAS,GAAG,CAEzD,IAAI,WAAW;GACjC,CAAC;EACH,GACA,cACA,EAAE,SAAS,0BAA0B,CACvC;CACF,GAAG;EAAC;EAAc;EAA2B;CAAgB,CAAC;CAE9D,gBAAgB;EAId,MAAM,WAAW,KAFf,0BAA2B,OAAoC,iBAEvB,YAAY;GACpD,KAAK,MAAM,SAAS,SAAS;IAC3B,MAAM,EAAE,MAAM,KAAK,OAAO,WAAW,OAAO,eAAe,CAAC;IAC5D,iBAAiB,UAAU,OAAO,4BAA4B;KAC5D,OAAO;MAAE;MAAQ;MAAM;MAAK;KAAM,CAAC;IACrC,CAAC;GACH;EACF,CAAC;EACD,IAAI,OAAO,SAAS,SAAS,QAAQ,OAAO,OAAO;EAEnD,aAAa;GACX,OAAO,qBAAqB,iBAAiB,OAAO;GACpD,SAAS,WAAW;GACpB,OAAO,OAAO;EAChB;CACF,GAAG,CAAC,QAAQ,sBAAsB,CAAC;CAEnC,OACE,oBAAC,OAAD;EACa;EACX,KAAK,UAA0B,CAAC,KAAK,MAAM,CAAC;EAC5C,OAAO;GAAE,GAAG;GAAyB,GAAG;EAAiB;EACzD,GAAI;EAEH,UAAA,SAAS;GACR,GAAG;GACH,KAAK,OAAO;GACZ;EACF,CAAC;CACE,CAAA;AAET,CACF"}

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

@@ -1,7 +1,7 @@
 import { HTMLAttributes, Ref } from "react";
 import { Application, SplineEvent } from "@splinetool/runtime";
 //#region src/awesome/Spline/type.d.ts
-interface SplineProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onLoad' | 'onMouseDown' | 'onMouseUp' | 'onMouseHover' | 'onKeyDown' | 'onKeyUp' | 'onWheel'> {
+export interface SplineProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onLoad' | 'onMouseDown' | 'onMouseUp' | 'onMouseHover' | 'onKeyDown' | 'onKeyUp' | 'onWheel'> {
   onFollow?: (e: SplineEvent) => void;
   onKeyDown?: (e: SplineEvent) => void;
   onKeyUp?: (e: SplineEvent) => void;
@@ -17,5 +17,4 @@ interface SplineProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onLoad' | 'o
   scene: string;
 }
 //#endregion
-export { SplineProps };
 //# sourceMappingURL=type.d.mts.map

package/es/awesome/Spotlight/Spotlight.mjs

@@ -1,9 +1,10 @@
 "use client";
+import { styleProps } from "../../styles/stylex/props.mjs";
+import { useThemeMode } from "../../styles/theme/scope.mjs";
 import { styles } from "./style.mjs";
 import { useMouseOffset } from "./useMouseOffset.mjs";
 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();
@@ -18,9 +19,12 @@ const Spotlight = memo(({ className, size = 64, ...properties }) => {
 		size,
 		outside
 	]);
-	const spotlightStyle = isDarkMode ? outside ? styles.spotlightDarkOutside : styles.spotlightDark : outside ? styles.spotlightLightOutside : styles.spotlightLight;
 	return /* @__PURE__ */ jsx("div", {
-		className: cx(spotlightStyle, className),
+		...styleProps([
+			styles.root,
+			isDarkMode ? styles.dark : styles.light,
+			outside && styles.outside
+		], 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 { 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,eAAe;CACpD,MAAM,EAAE,eAAe,aAAa;CAEpC,MAAM,eAAe,eACZ;EACL,uBAAuB,UAAU,MAAM;EACvC,oBAAoB,GAAG,KAAK;EAC5B,iBAAiB,GAAG,QAAQ,KAAK,EAAE;EACnC,iBAAiB,GAAG,QAAQ,KAAK,EAAE;CACrC,IACA;EAAC;EAAQ;EAAM;CAAO,CACxB;CAEA,MAAM,iBAAiB,aACnB,UACE,OAAO,uBACP,OAAO,gBACT,UACE,OAAO,wBACP,OAAO;CAEb,OACE,oBAAC,OAAD;EACE,WAAW,GAAG,gBAAgB,SAAS;EACvC,KAAK;EACL,OAAO;EACP,GAAI;CACL,CAAA;AAEL,CAAC;AAED,UAAU,cAAc"}
+{"version":3,"file":"Spotlight.mjs","names":[],"sources":["../../../src/awesome/Spotlight/Spotlight.tsx"],"sourcesContent":["'use client';\n\nimport { memo, useMemo } from 'react';\n\nimport { styleProps } from '@/styles/stylex/props';\nimport { useThemeMode } from '@/styles/theme/scope';\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  return (\n    <div\n      {...styleProps(\n        [styles.root, isDarkMode ? styles.dark : styles.light, outside && styles.outside],\n        className,\n      )}\n      ref={reference}\n      style={cssVariables}\n      {...properties}\n    />\n  );\n});\n\nSpotlight.displayName = 'Spotlight';\n\nexport default Spotlight;\n"],"mappings":";;;;;;;;AAWA,MAAM,YAAY,MAAsB,EAAE,WAAW,OAAO,IAAI,GAAG,iBAAiB;CAClF,MAAM,CAAC,QAAQ,SAAS,aAAa,eAAe;CACpD,MAAM,EAAE,eAAe,aAAa;CAEpC,MAAM,eAAe,eACZ;EACL,uBAAuB,UAAU,MAAM;EACvC,oBAAoB,GAAG,KAAK;EAC5B,iBAAiB,GAAG,QAAQ,KAAK,EAAE;EACnC,iBAAiB,GAAG,QAAQ,KAAK,EAAE;CACrC,IACA;EAAC;EAAQ;EAAM;CAAO,CACxB;CAEA,OACE,oBAAC,OAAD;EACE,GAAI,WACF;GAAC,OAAO;GAAM,aAAa,OAAO,OAAO,OAAO;GAAO,WAAW,OAAO;EAAO,GAChF,SACF;EACA,KAAK;EACL,OAAO;EACP,GAAI;CACL,CAAA;AAEL,CAAC;AAED,UAAU,cAAc"}