@lobehub/ui 5.64.2 → 6.0.0-beta.10

package/es/Video/type.d.mts

@@ -0,0 +1,125 @@
+import { CSSProperties, Key, ReactEventHandler, ReactNode, Ref } from "react";
+//#region src/Video/type.d.ts
+export interface VideoSection {
+  start: number;
+  title: string;
+}
+export type VideoMarkerColor = 'success' | 'warning' | 'error' | 'info' | (string & {});
+export interface VideoMarker {
+  color?: VideoMarkerColor;
+  content?: ReactNode;
+  key?: Key;
+  label?: ReactNode;
+  time: number;
+}
+export type VideoStatus = 'loading' | 'ready' | 'error';
+export interface VideoState {
+  activeMarkers: VideoMarker[];
+  activeSection?: VideoSection;
+  captions: boolean;
+  duration: number;
+  muted: boolean;
+  paused: boolean;
+  rate: number;
+  size?: {
+    height: number;
+    width: number;
+  };
+  status: VideoStatus;
+  time: number;
+}
+export interface VideoPlayer {
+  getState: () => VideoState;
+  pause: () => void;
+  play: () => Promise<void>;
+  requestFullscreen: () => Promise<void>;
+  readonly root: HTMLDivElement | null;
+  seek: (seconds: number) => void;
+  setCaptions: (captions: boolean) => void;
+  setMuted: (muted: boolean) => void;
+  setRate: (rate: number) => void;
+  step: (frames: number) => void;
+  subscribe: (listener: (state: VideoState) => void) => () => void;
+  toggle: () => void;
+  toggleMute: () => void;
+  readonly video: HTMLVideoElement | null;
+}
+export interface VideoMediaProps {
+  autoPlay?: boolean;
+  loop?: boolean;
+  onEnded?: ReactEventHandler<HTMLVideoElement>;
+  onError?: ReactEventHandler<HTMLVideoElement>;
+  onPause?: ReactEventHandler<HTMLVideoElement>;
+  onPlay?: ReactEventHandler<HTMLVideoElement>;
+  onTimeUpdate?: ReactEventHandler<HTMLVideoElement>;
+  poster?: string;
+  preload?: HTMLVideoElement['preload'];
+  src: string;
+}
+export interface VideoRootProps extends VideoMediaProps {
+  captions?: boolean;
+  children?: ReactNode;
+  className?: string;
+  defaultPlaybackRate?: number;
+  fps?: number;
+  height?: number | string;
+  markers?: VideoMarker[];
+  maxHeight?: number;
+  muted?: boolean;
+  onMarkerClick?: (marker: VideoMarker) => void;
+  onMutedChange?: (muted: boolean) => void;
+  onRateChange?: (rate: number) => void;
+  onRetry?: () => Promise<unknown> | void;
+  playbackRates?: number[];
+  player?: VideoPlayer;
+  ref?: Ref<VideoPlayer>;
+  sections?: VideoSection[];
+  style?: CSSProperties;
+  width?: number | string;
+}
+export interface VideoTimelineProps {
+  children?: ReactNode;
+  className?: string;
+  style?: CSSProperties;
+  thumbnails?: boolean;
+}
+export interface VideoControlsProps {
+  children?: ReactNode;
+  className?: string;
+  extra?: ReactNode;
+  frameStep?: boolean;
+  style?: CSSProperties;
+}
+export interface VideoCaptionProps {
+  action?: (marker: VideoMarker) => ReactNode;
+  className?: string;
+  style?: CSSProperties;
+}
+export interface VideoFrameProps {
+  children?: ReactNode;
+  className?: string;
+  style?: CSSProperties;
+}
+export interface VideoSectionListProps {
+  className?: string;
+  style?: CSSProperties;
+}
+export interface VideoProps extends Omit<VideoRootProps, 'children'> {
+  classNames?: {
+    controls?: string;
+    frame?: string;
+    root?: string;
+    timeline?: string;
+  };
+  frameStep?: boolean;
+  overlay?: (state: VideoState) => ReactNode;
+  styles?: {
+    controls?: CSSProperties;
+    frame?: CSSProperties;
+    root?: CSSProperties;
+    timeline?: CSSProperties;
+  };
+  thumbnails?: boolean;
+}
+//#endregion
+//# sourceMappingURL=type.d.mts.map

package/es/Video/useControlsIdle.mjs

@@ -0,0 +1,39 @@
+"use client";
+import { useCallback, useEffect, useRef, useState } from "react";
+//#region src/Video/useControlsIdle.ts
+const IDLE_HIDE_MS = 2e3;
+const useControlsIdle = (forceVisible) => {
+	const [active, setActive] = useState(false);
+	const [focused, setFocused] = useState(false);
+	const [held, setHeld] = useState(false);
+	const timer = useRef(void 0);
+	const clear = useCallback(() => {
+		if (timer.current === void 0) return;
+		window.clearTimeout(timer.current);
+		timer.current = void 0;
+	}, []);
+	const wake = useCallback(() => {
+		setActive(true);
+		clear();
+		timer.current = window.setTimeout(() => {
+			timer.current = void 0;
+			setActive(false);
+		}, IDLE_HIDE_MS);
+	}, [clear]);
+	const sleep = useCallback(() => {
+		clear();
+		setActive(false);
+	}, [clear]);
+	useEffect(() => clear, [clear]);
+	return {
+		hold: setHeld,
+		setFocused,
+		sleep,
+		visible: forceVisible || active || focused || held,
+		wake
+	};
+};
+//#endregion
+export { useControlsIdle };
+
+//# sourceMappingURL=useControlsIdle.mjs.map

package/es/Video/useControlsIdle.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useControlsIdle.mjs","names":[],"sources":["../../src/Video/useControlsIdle.ts"],"sourcesContent":["'use client';\n\nimport { useCallback, useEffect, useRef, useState } from 'react';\n\nconst IDLE_HIDE_MS = 2000;\n\nexport const useControlsIdle = (forceVisible: boolean) => {\n  const [active, setActive] = useState(false);\n  const [focused, setFocused] = useState(false);\n  const [held, setHeld] = useState(false);\n  const timer = useRef<number | undefined>(undefined);\n\n  const clear = useCallback(() => {\n    if (timer.current === undefined) return;\n    window.clearTimeout(timer.current);\n    timer.current = undefined;\n  }, []);\n\n  const wake = useCallback(() => {\n    setActive(true);\n    clear();\n    timer.current = window.setTimeout(() => {\n      timer.current = undefined;\n      setActive(false);\n    }, IDLE_HIDE_MS);\n  }, [clear]);\n\n  const sleep = useCallback(() => {\n    clear();\n    setActive(false);\n  }, [clear]);\n\n  useEffect(() => clear, [clear]);\n\n  return {\n    hold: setHeld,\n    setFocused,\n    sleep,\n    visible: forceVisible || active || focused || held,\n    wake,\n  };\n};\n"],"mappings":";;;AAIA,MAAM,eAAe;AAErB,MAAa,mBAAmB,iBAA0B;CACxD,MAAM,CAAC,QAAQ,aAAa,SAAS,KAAK;CAC1C,MAAM,CAAC,SAAS,cAAc,SAAS,KAAK;CAC5C,MAAM,CAAC,MAAM,WAAW,SAAS,KAAK;CACtC,MAAM,QAAQ,OAA2B,KAAA,CAAS;CAElD,MAAM,QAAQ,kBAAkB;EAC9B,IAAI,MAAM,YAAY,KAAA,GAAW;EACjC,OAAO,aAAa,MAAM,OAAO;EACjC,MAAM,UAAU,KAAA;CAClB,GAAG,CAAC,CAAC;CAEL,MAAM,OAAO,kBAAkB;EAC7B,UAAU,IAAI;EACd,MAAM;EACN,MAAM,UAAU,OAAO,iBAAiB;GACtC,MAAM,UAAU,KAAA;GAChB,UAAU,KAAK;EACjB,GAAG,YAAY;CACjB,GAAG,CAAC,KAAK,CAAC;CAEV,MAAM,QAAQ,kBAAkB;EAC9B,MAAM;EACN,UAAU,KAAK;CACjB,GAAG,CAAC,KAAK,CAAC;CAEV,gBAAgB,OAAO,CAAC,KAAK,CAAC;CAE9B,OAAO;EACL,MAAM;EACN;EACA;EACA,SAAS,gBAAgB,UAAU,WAAW;EAC9C;CACF;AACF"}

package/es/Video/useFullscreen.mjs

@@ -0,0 +1,17 @@
+"use client";
+import { useEffect, useState } from "react";
+//#region src/Video/useFullscreen.ts
+const useFullscreen = (store) => {
+	const [fullscreen, setFullscreen] = useState(false);
+	useEffect(() => {
+		const sync = () => setFullscreen(Boolean(store.root) && document.fullscreenElement === store.root);
+		sync();
+		document.addEventListener("fullscreenchange", sync);
+		return () => document.removeEventListener("fullscreenchange", sync);
+	}, [store]);
+	return fullscreen;
+};
+//#endregion
+export { useFullscreen };
+
+//# sourceMappingURL=useFullscreen.mjs.map

package/es/Video/useFullscreen.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFullscreen.mjs","names":[],"sources":["../../src/Video/useFullscreen.ts"],"sourcesContent":["'use client';\n\nimport { useEffect, useState } from 'react';\n\nimport type { VideoStore } from './store';\n\nexport const useFullscreen = (store: VideoStore) => {\n  const [fullscreen, setFullscreen] = useState(false);\n  useEffect(() => {\n    const sync = () =>\n      setFullscreen(Boolean(store.root) && document.fullscreenElement === store.root);\n    sync();\n    document.addEventListener('fullscreenchange', sync);\n    return () => document.removeEventListener('fullscreenchange', sync);\n  }, [store]);\n  return fullscreen;\n};\n"],"mappings":";;;AAMA,MAAa,iBAAiB,UAAsB;CAClD,MAAM,CAAC,YAAY,iBAAiB,SAAS,KAAK;CAClD,gBAAgB;EACd,MAAM,aACJ,cAAc,QAAQ,MAAM,IAAI,KAAK,SAAS,sBAAsB,MAAM,IAAI;EAChF,KAAK;EACL,SAAS,iBAAiB,oBAAoB,IAAI;EAClD,aAAa,SAAS,oBAAoB,oBAAoB,IAAI;CACpE,GAAG,CAAC,KAAK,CAAC;CACV,OAAO;AACT"}

package/es/Video/useKeyboard.mjs

@@ -0,0 +1,60 @@
+//#region src/Video/useKeyboard.ts
+const DEFAULT_PLAYBACK_RATES = [
+	.5,
+	1,
+	1.5,
+	2
+];
+const nextRate = (rates, current, direction) => {
+	const index = rates.indexOf(current);
+	const from = index === -1 ? rates.findIndex((rate) => rate >= current) : index;
+	return rates[Math.min(Math.max((from === -1 ? rates.length - 1 : from) + direction, 0), rates.length - 1)];
+};
+const handleVideoKey = (event, store, rates = DEFAULT_PLAYBACK_RATES) => {
+	if (event.altKey || event.ctrlKey || event.metaKey) return false;
+	const target = event.target;
+	const host = event.currentTarget;
+	if (host instanceof Node && target instanceof Node && host !== target && !host.contains(target)) return false;
+	if (target?.isContentEditable || target?.closest?.("input, textarea, select, [role=\"menuitem\"], [contenteditable]:not([contenteditable=\"false\"])")) return false;
+	if (target instanceof HTMLButtonElement && (event.key === " " || event.key === "Enter")) return false;
+	const state = store.getState();
+	if (state.status !== "ready") return false;
+	switch (event.key.toLowerCase()) {
+		case " ":
+		case "k":
+			store.toggle();
+			return true;
+		case ",":
+			store.step(-1);
+			return true;
+		case ".":
+			store.step(1);
+			return true;
+		case "arrowleft":
+			store.seek(state.time - (event.shiftKey ? 5 : 1));
+			return true;
+		case "arrowright":
+			store.seek(state.time + (event.shiftKey ? 5 : 1));
+			return true;
+		case "j":
+			store.setRate(nextRate(rates, state.rate, -1));
+			return true;
+		case "l":
+			store.setRate(nextRate(rates, state.rate, 1));
+			return true;
+		case "m":
+			store.toggleMute();
+			return true;
+		case "c":
+			store.setCaptions(!state.captions);
+			return true;
+		case "f":
+			store.toggleFullscreen();
+			return true;
+		default: return false;
+	}
+};
+//#endregion
+export { DEFAULT_PLAYBACK_RATES, handleVideoKey };
+
+//# sourceMappingURL=useKeyboard.mjs.map

package/es/Video/useKeyboard.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useKeyboard.mjs","names":[],"sources":["../../src/Video/useKeyboard.ts"],"sourcesContent":["import type { KeyboardEvent as ReactKeyboardEvent } from 'react';\n\nimport type { VideoStore } from './store';\n\nexport const DEFAULT_PLAYBACK_RATES = [0.5, 1, 1.5, 2];\n\nconst nextRate = (rates: number[], current: number, direction: 1 | -1) => {\n  const index = rates.indexOf(current);\n  const from = index === -1 ? rates.findIndex((rate) => rate >= current) : index;\n  const next = Math.min(\n    Math.max((from === -1 ? rates.length - 1 : from) + direction, 0),\n    rates.length - 1,\n  );\n  return rates[next];\n};\n\nexport const handleVideoKey = (\n  event: KeyboardEvent | ReactKeyboardEvent,\n  store: VideoStore,\n  rates: number[] = DEFAULT_PLAYBACK_RATES,\n) => {\n  if (event.altKey || event.ctrlKey || event.metaKey) return false;\n  const target = event.target as HTMLElement | null;\n  // Portalled content (menus) bubbles through React to Root without being inside it.\n  const host = event.currentTarget as Node | null;\n  if (host instanceof Node && target instanceof Node && host !== target && !host.contains(target))\n    return false;\n  if (\n    target?.isContentEditable ||\n    target?.closest?.(\n      'input, textarea, select, [role=\"menuitem\"], [contenteditable]:not([contenteditable=\"false\"])',\n    )\n  )\n    return false;\n  if (target instanceof HTMLButtonElement && (event.key === ' ' || event.key === 'Enter'))\n    return false;\n  const state = store.getState();\n  if (state.status !== 'ready') return false;\n\n  switch (event.key.toLowerCase()) {\n    case ' ':\n    case 'k': {\n      store.toggle();\n      return true;\n    }\n    case ',': {\n      store.step(-1);\n      return true;\n    }\n    case '.': {\n      store.step(1);\n      return true;\n    }\n    case 'arrowleft': {\n      store.seek(state.time - (event.shiftKey ? 5 : 1));\n      return true;\n    }\n    case 'arrowright': {\n      store.seek(state.time + (event.shiftKey ? 5 : 1));\n      return true;\n    }\n    case 'j': {\n      store.setRate(nextRate(rates, state.rate, -1));\n      return true;\n    }\n    case 'l': {\n      store.setRate(nextRate(rates, state.rate, 1));\n      return true;\n    }\n    case 'm': {\n      store.toggleMute();\n      return true;\n    }\n    case 'c': {\n      store.setCaptions(!state.captions);\n      return true;\n    }\n    case 'f': {\n      store.toggleFullscreen();\n      return true;\n    }\n    default: {\n      return false;\n    }\n  }\n};\n"],"mappings":";AAIA,MAAa,yBAAyB;CAAC;CAAK;CAAG;CAAK;AAAC;AAErD,MAAM,YAAY,OAAiB,SAAiB,cAAsB;CACxE,MAAM,QAAQ,MAAM,QAAQ,OAAO;CACnC,MAAM,OAAO,UAAU,KAAK,MAAM,WAAW,SAAS,QAAQ,OAAO,IAAI;CAKzE,OAAO,MAJM,KAAK,IAChB,KAAK,KAAK,SAAS,KAAK,MAAM,SAAS,IAAI,QAAQ,WAAW,CAAC,GAC/D,MAAM,SAAS,CAED;AAClB;AAEA,MAAa,kBACX,OACA,OACA,QAAkB,2BACf;CACH,IAAI,MAAM,UAAU,MAAM,WAAW,MAAM,SAAS,OAAO;CAC3D,MAAM,SAAS,MAAM;CAErB,MAAM,OAAO,MAAM;CACnB,IAAI,gBAAgB,QAAQ,kBAAkB,QAAQ,SAAS,UAAU,CAAC,KAAK,SAAS,MAAM,GAC5F,OAAO;CACT,IACE,QAAQ,qBACR,QAAQ,UACN,kGACF,GAEA,OAAO;CACT,IAAI,kBAAkB,sBAAsB,MAAM,QAAQ,OAAO,MAAM,QAAQ,UAC7E,OAAO;CACT,MAAM,QAAQ,MAAM,SAAS;CAC7B,IAAI,MAAM,WAAW,SAAS,OAAO;CAErC,QAAQ,MAAM,IAAI,YAAY,GAA9B;EACE,KAAK;EACL,KAAK;GACH,MAAM,OAAO;GACb,OAAO;EAET,KAAK;GACH,MAAM,KAAK,EAAE;GACb,OAAO;EAET,KAAK;GACH,MAAM,KAAK,CAAC;GACZ,OAAO;EAET,KAAK;GACH,MAAM,KAAK,MAAM,QAAQ,MAAM,WAAW,IAAI,EAAE;GAChD,OAAO;EAET,KAAK;GACH,MAAM,KAAK,MAAM,QAAQ,MAAM,WAAW,IAAI,EAAE;GAChD,OAAO;EAET,KAAK;GACH,MAAM,QAAQ,SAAS,OAAO,MAAM,MAAM,EAAE,CAAC;GAC7C,OAAO;EAET,KAAK;GACH,MAAM,QAAQ,SAAS,OAAO,MAAM,MAAM,CAAC,CAAC;GAC5C,OAAO;EAET,KAAK;GACH,MAAM,WAAW;GACjB,OAAO;EAET,KAAK;GACH,MAAM,YAAY,CAAC,MAAM,QAAQ;GACjC,OAAO;EAET,KAAK;GACH,MAAM,iBAAiB;GACvB,OAAO;EAET,SACE,OAAO;CAEX;AACF"}

package/es/Video/useVideo.d.mts

@@ -0,0 +1,9 @@
+import { VideoPlayer, VideoState } from "./type.mjs";
+//#region src/Video/useVideo.d.ts
+export declare function useVideoState(player: VideoPlayer): VideoState;
+export declare function useVideoState<T>(player: VideoPlayer, selector: (state: VideoState) => T): T;
+export declare function useVideo(): VideoState;
+export declare function useVideo<T>(selector: (state: VideoState) => T): T;
+export declare const useVideoPlayer: () => VideoPlayer;
+//#endregion
+//# sourceMappingURL=useVideo.d.mts.map

package/es/Video/useVideo.mjs

@@ -0,0 +1,17 @@
+"use client";
+import { useVideoContext } from "./context.mjs";
+import { createVideoStore } from "./store.mjs";
+import { useState, useSyncExternalStore } from "react";
+//#region src/Video/useVideo.ts
+const identity = (state) => state;
+function useVideoState(player, selector = identity) {
+	return useSyncExternalStore(player.subscribe, () => selector(player.getState()), () => selector(player.getState()));
+}
+function useVideo(selector = identity) {
+	return useVideoState(useVideoContext().store, selector);
+}
+const useVideoPlayer = () => useState(createVideoStore)[0];
+//#endregion
+export { useVideo, useVideoPlayer, useVideoState };
+
+//# sourceMappingURL=useVideo.mjs.map

package/es/Video/useVideo.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useVideo.mjs","names":[],"sources":["../../src/Video/useVideo.ts"],"sourcesContent":["'use client';\n\nimport { useState, useSyncExternalStore } from 'react';\n\nimport { useVideoContext } from './context';\nimport { createVideoStore } from './store';\nimport type { VideoPlayer, VideoState } from './type';\n\nconst identity = (state: VideoState) => state as unknown;\n\nexport function useVideoState(player: VideoPlayer): VideoState;\nexport function useVideoState<T>(player: VideoPlayer, selector: (state: VideoState) => T): T;\nexport function useVideoState(\n  player: VideoPlayer,\n  selector: (state: VideoState) => unknown = identity,\n) {\n  return useSyncExternalStore(\n    player.subscribe,\n    () => selector(player.getState()),\n    () => selector(player.getState()),\n  );\n}\n\nexport function useVideo(): VideoState;\nexport function useVideo<T>(selector: (state: VideoState) => T): T;\nexport function useVideo(selector: (state: VideoState) => unknown = identity) {\n  return useVideoState(useVideoContext().store, selector);\n}\n\nexport const useVideoPlayer = (): VideoPlayer => useState(createVideoStore)[0];\n"],"mappings":";;;;;AAQA,MAAM,YAAY,UAAsB;AAIxC,SAAgB,cACd,QACA,WAA2C,UAC3C;CACA,OAAO,qBACL,OAAO,iBACD,SAAS,OAAO,SAAS,CAAC,SAC1B,SAAS,OAAO,SAAS,CAAC,CAClC;AACF;AAIA,SAAgB,SAAS,WAA2C,UAAU;CAC5E,OAAO,cAAc,gBAAgB,CAAC,CAAC,OAAO,QAAQ;AACxD;AAEA,MAAa,uBAAoC,SAAS,gBAAgB,CAAC,CAAC"}

package/es/awesome/AgentSkillCard/AgentSkillCard.mjs

@@ -1,13 +1,14 @@
 "use client";
+import { styleProps } from "../../styles/stylex/props.mjs";
 import Icon from "../../Icon/Icon.mjs";
-import Segmented from "../../base-ui/Segmented/Segmented.mjs";
+import Segmented from "../../Segmented/Segmented.mjs";
 import Snippet from "../../Snippet/Snippet.mjs";
 import { DEFAULT_SKILL_AGENTS } from "./agents.mjs";
 import { renderLandingIcon } from "../landingIcon.mjs";
-import { styles } from "./style.mjs";
+import { childStyles, styles } from "./style.mjs";
 import { memo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { cx } from "antd-style";
+import * as stylex from "@stylexjs/stylex";
 import { Bot, UserRound } from "lucide-react";
 //#region src/awesome/AgentSkillCard/AgentSkillCard.tsx
 const AVATAR_SIZE = 28;
@@ -17,7 +18,7 @@ const AgentSkillCard = memo(({ agent, agents = DEFAULT_SKILL_AGENTS, className,
 	const panel = mode === "human" && human ? human : agent;
 	const shell = panel.shell ?? mode === "human";
 	return /* @__PURE__ */ jsxs("div", {
-		className: cx(styles.root, className),
+		...styleProps(styles.root, className),
 		...rest,
 		children: [
 			human && /* @__PURE__ */ jsx(Segmented, {
@@ -46,31 +47,31 @@ const AgentSkillCard = memo(({ agent, agents = DEFAULT_SKILL_AGENTS, className,
 				}
 			}),
 			/* @__PURE__ */ jsxs("div", {
-				className: styles.panel,
+				...stylex.props(styles.panel),
 				children: [
 					mode === "agent" && agents.length > 0 && /* @__PURE__ */ jsx("div", {
-						className: styles.agents,
+						...stylex.props(styles.agents),
 						children: agents.map(({ avatar, title }) => /* @__PURE__ */ jsx("span", {
-							className: styles.agent,
 							title,
+							...stylex.props(styles.agent),
 							children: renderLandingIcon(avatar, AVATAR_SIZE)
 						}, title))
 					}),
 					panel.description && /* @__PURE__ */ jsx("p", {
-						className: styles.description,
+						...stylex.props(styles.description),
 						children: panel.description
 					}),
 					/* @__PURE__ */ jsx(Snippet, {
-						className: styles.code,
 						language: "bash",
 						prefix: shell ? "$" : void 0,
+						style: childStyles.code,
 						variant: "outlined",
 						children: panel.code
 					})
 				]
 			}),
 			footer && /* @__PURE__ */ jsx("div", {
-				className: styles.footer,
+				...styleProps(styles.footer, "lobe-agent-skill-card-footer"),
 				children: footer
 			})
 		]

package/es/awesome/AgentSkillCard/AgentSkillCard.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"AgentSkillCard.mjs","names":[],"sources":["../../../src/awesome/AgentSkillCard/AgentSkillCard.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { Bot, UserRound } from 'lucide-react';\nimport { memo, useState } from 'react';\n\nimport { renderLandingIcon } from '@/awesome/landingIcon';\nimport Segmented from '@/base-ui/Segmented';\nimport Icon from '@/Icon';\nimport Snippet from '@/Snippet';\n\nimport { DEFAULT_SKILL_AGENTS } from './agents';\nimport { styles } from './style';\nimport type { AgentSkillCardMode, AgentSkillCardProps } from './type';\n\nconst AVATAR_SIZE = 28;\n\nconst AgentSkillCard = memo<AgentSkillCardProps>(\n  ({\n    agent,\n    agents = DEFAULT_SKILL_AGENTS,\n    className,\n    defaultMode = 'agent',\n    footer,\n    human,\n    mode: controlledMode,\n    onModeChange,\n    ...rest\n  }) => {\n    const [innerMode, setInnerMode] = useState<AgentSkillCardMode>(defaultMode);\n    const mode = human ? (controlledMode ?? innerMode) : 'agent';\n    const panel = mode === 'human' && human ? human : agent;\n    const shell = panel.shell ?? mode === 'human';\n\n    return (\n      <div className={cx(styles.root, className)} {...rest}>\n        {human && (\n          <Segmented<AgentSkillCardMode>\n            block\n            size={'large'}\n            value={mode}\n            variant={'outlined'}\n            options={[\n              {\n                icon: <Icon icon={Bot} size={16} />,\n                label: agent.label ?? \"I'm an Agent\",\n                value: 'agent',\n              },\n              {\n                icon: <Icon icon={UserRound} size={16} />,\n                label: human.label ?? \"I'm a Human\",\n                value: 'human',\n              },\n            ]}\n            onChange={(next) => {\n              setInnerMode(next);\n              onModeChange?.(next);\n            }}\n          />\n        )}\n        <div className={styles.panel}>\n          {mode === 'agent' && agents.length > 0 && (\n            <div className={styles.agents}>\n              {agents.map(({ avatar, title }) => (\n                <span className={styles.agent} key={title} title={title}>\n                  {renderLandingIcon(avatar, AVATAR_SIZE)}\n                </span>\n              ))}\n            </div>\n          )}\n          {panel.description && <p className={styles.description}>{panel.description}</p>}\n          <Snippet\n            className={styles.code}\n            language={'bash'}\n            prefix={shell ? '$' : undefined}\n            variant={'outlined'}\n          >\n            {panel.code}\n          </Snippet>\n        </div>\n        {footer && <div className={styles.footer}>{footer}</div>}\n      </div>\n    );\n  },\n);\n\nAgentSkillCard.displayName = 'AgentSkillCard';\n\nexport default AgentSkillCard;\n"],"mappings":";;;;;;;;;;;;AAeA,MAAM,cAAc;AAEpB,MAAM,iBAAiB,MACpB,EACC,OACA,SAAS,sBACT,WACA,cAAc,SACd,QACA,OACA,MAAM,gBACN,cACA,GAAG,WACC;CACJ,MAAM,CAAC,WAAW,gBAAgB,SAA6B,WAAW;CAC1E,MAAM,OAAO,QAAS,kBAAkB,YAAa;CACrD,MAAM,QAAQ,SAAS,WAAW,QAAQ,QAAQ;CAClD,MAAM,QAAQ,MAAM,SAAS,SAAS;CAEtC,OACE,qBAAC,OAAD;EAAK,WAAW,GAAG,OAAO,MAAM,SAAS;EAAG,GAAI;EAAhD,UAAA;GACG,SACC,oBAAC,WAAD;IACE,OAAA;IACA,MAAM;IACN,OAAO;IACP,SAAS;IACT,SAAS,CACP;KACE,MAAM,oBAAC,MAAD;MAAM,MAAM;MAAK,MAAM;KAAK,CAAA;KAClC,OAAO,MAAM,SAAS;KACtB,OAAO;IACT,GACA;KACE,MAAM,oBAAC,MAAD;MAAM,MAAM;MAAW,MAAM;KAAK,CAAA;KACxC,OAAO,MAAM,SAAS;KACtB,OAAO;IACT,CACF;IACA,WAAW,SAAS;KAClB,aAAa,IAAI;KACjB,eAAe,IAAI;IACrB;GACD,CAAA;GAEH,qBAAC,OAAD;IAAK,WAAW,OAAO;IAAvB,UAAA;KACG,SAAS,WAAW,OAAO,SAAS,KACnC,oBAAC,OAAD;MAAK,WAAW,OAAO;MACpB,UAAA,OAAO,KAAK,EAAE,QAAQ,YACrB,oBAAC,QAAD;OAAM,WAAW,OAAO;OAA0B;OAC/C,UAAA,kBAAkB,QAAQ,WAAW;MAClC,GAF8B,KAE9B,CACP;KACE,CAAA;KAEN,MAAM,eAAe,oBAAC,KAAD;MAAG,WAAW,OAAO;MAAc,UAAA,MAAM;KAAe,CAAA;KAC9E,oBAAC,SAAD;MACE,WAAW,OAAO;MAClB,UAAU;MACV,QAAQ,QAAQ,MAAM,KAAA;MACtB,SAAS;MAER,UAAA,MAAM;KACA,CAAA;IACN;;GACJ,UAAU,oBAAC,OAAD;IAAK,WAAW,OAAO;IAAS,UAAA;GAAY,CAAA;EACpD;;AAET,CACF;AAEA,eAAe,cAAc"}
+{"version":3,"file":"AgentSkillCard.mjs","names":[],"sources":["../../../src/awesome/AgentSkillCard/AgentSkillCard.tsx"],"sourcesContent":["'use client';\n\nimport './style.css';\n\nimport * as stylex from '@stylexjs/stylex';\nimport { Bot, UserRound } from 'lucide-react';\nimport { memo, useState } from 'react';\n\nimport { renderLandingIcon } from '@/awesome/landingIcon';\nimport Icon from '@/Icon';\nimport Segmented from '@/Segmented';\nimport Snippet from '@/Snippet';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { DEFAULT_SKILL_AGENTS } from './agents';\nimport { childStyles, styles } from './style';\nimport type { AgentSkillCardMode, AgentSkillCardProps } from './type';\n\nconst AVATAR_SIZE = 28;\n\nconst AgentSkillCard = memo<AgentSkillCardProps>(\n  ({\n    agent,\n    agents = DEFAULT_SKILL_AGENTS,\n    className,\n    defaultMode = 'agent',\n    footer,\n    human,\n    mode: controlledMode,\n    onModeChange,\n    ...rest\n  }) => {\n    const [innerMode, setInnerMode] = useState<AgentSkillCardMode>(defaultMode);\n    const mode = human ? (controlledMode ?? innerMode) : 'agent';\n    const panel = mode === 'human' && human ? human : agent;\n    const shell = panel.shell ?? mode === 'human';\n\n    return (\n      <div {...styleProps(styles.root, className)} {...rest}>\n        {human && (\n          <Segmented<AgentSkillCardMode>\n            block\n            size={'large'}\n            value={mode}\n            variant={'outlined'}\n            options={[\n              {\n                icon: <Icon icon={Bot} size={16} />,\n                label: agent.label ?? \"I'm an Agent\",\n                value: 'agent',\n              },\n              {\n                icon: <Icon icon={UserRound} size={16} />,\n                label: human.label ?? \"I'm a Human\",\n                value: 'human',\n              },\n            ]}\n            onChange={(next) => {\n              setInnerMode(next);\n              onModeChange?.(next);\n            }}\n          />\n        )}\n        <div {...stylex.props(styles.panel)}>\n          {mode === 'agent' && agents.length > 0 && (\n            <div {...stylex.props(styles.agents)}>\n              {agents.map(({ avatar, title }) => (\n                <span key={title} title={title} {...stylex.props(styles.agent)}>\n                  {renderLandingIcon(avatar, AVATAR_SIZE)}\n                </span>\n              ))}\n            </div>\n          )}\n          {panel.description && <p {...stylex.props(styles.description)}>{panel.description}</p>}\n          <Snippet\n            language={'bash'}\n            prefix={shell ? '$' : undefined}\n            style={childStyles.code}\n            variant={'outlined'}\n          >\n            {panel.code}\n          </Snippet>\n        </div>\n        {footer && (\n          <div {...styleProps(styles.footer, 'lobe-agent-skill-card-footer')}>{footer}</div>\n        )}\n      </div>\n    );\n  },\n);\n\nAgentSkillCard.displayName = 'AgentSkillCard';\n\nexport default AgentSkillCard;\n"],"mappings":";;;;;;;;;;;;;AAcA,MAAM,cAAc;AACpB,MAAM,iBAAiB,MAA2B,EAChD,OACA,SAAS,sBACT,WACA,cAAc,SACd,QACA,OACA,MAAM,gBACN,cACA,GAAG,WACC;CACJ,MAAM,CAAC,WAAW,gBAAgB,SAA6B,WAAW;CAC1E,MAAM,OAAO,QAAQ,kBAAkB,YAAY;CACnD,MAAM,QAAQ,SAAS,WAAW,QAAQ,QAAQ;CAClD,MAAM,QAAQ,MAAM,SAAS,SAAS;CACtC,OAAO,qBAAC,OAAD;EAAK,GAAI,WAAW,OAAO,MAAM,SAAS;EAAG,GAAI;EAAjD,UAAA;GACA,SAAS,oBAAC,WAAD;IAA+B,OAAA;IAAM,MAAM;IAAS,OAAO;IAAM,SAAS;IAAY,SAAS,CAAC;KAC5G,MAAM,oBAAC,MAAD;MAAM,MAAM;MAAK,MAAM;KAAK,CAAA;KAClC,OAAO,MAAM,SAAS;KACtB,OAAO;IACT,GAAG;KACD,MAAM,oBAAC,MAAD;MAAM,MAAM;MAAW,MAAM;KAAK,CAAA;KACxC,OAAO,MAAM,SAAS;KACtB,OAAO;IACT,CAAC;IAAG,WAAU,SAAQ;KACpB,aAAa,IAAI;KACjB,eAAe,IAAI;IACrB;GAAI,CAAA;GACA,qBAAC,OAAD;IAAK,GAAI,OAAO,MAAM,OAAO,KAAK;IAAlC,UAAA;KACG,SAAS,WAAW,OAAO,SAAS,KAAK,oBAAC,OAAD;MAAK,GAAI,OAAO,MAAM,OAAO,MAAM;MACxE,UAAA,OAAO,KAAK,EACjB,QACA,YACI,oBAAC,QAAD;OAAyB;OAAO,GAAI,OAAO,MAAM,OAAO,KAAK;OACxD,UAAA,kBAAkB,QAAQ,WAAW;MAClC,GAFG,KAEH,CAAC;KACN,CAAA;KACN,MAAM,eAAe,oBAAC,KAAD;MAAG,GAAI,OAAO,MAAM,OAAO,WAAW;MAAI,UAAA,MAAM;KAAe,CAAA;KACrF,oBAAC,SAAD;MAAS,UAAU;MAAQ,QAAQ,QAAQ,MAAM,KAAA;MAAW,OAAO,YAAY;MAAM,SAAS;MAC3F,UAAA,MAAM;KACA,CAAA;IACN;;GACJ,UAAU,oBAAC,OAAD;IAAK,GAAI,WAAW,OAAO,QAAQ,8BAA8B;IAAI,UAAA;GAAY,CAAA;EACzF;;AACX,CAAC;AACD,eAAe,cAAc"}

package/es/awesome/AgentSkillCard/agents.d.mts

@@ -1,6 +1,5 @@
 import { AgentSkillCardAgent } from "./type.mjs";
 //#region src/awesome/AgentSkillCard/agents.d.ts
-declare const DEFAULT_SKILL_AGENTS: AgentSkillCardAgent[];
+export declare const DEFAULT_SKILL_AGENTS: AgentSkillCardAgent[];
 //#endregion
-export { DEFAULT_SKILL_AGENTS };
 //# sourceMappingURL=agents.d.mts.map

package/es/awesome/AgentSkillCard/style.mjs

@@ -1,85 +1,69 @@
-import { createStaticStyles } from "antd-style";
 //#region src/awesome/AgentSkillCard/style.ts
-const styles = createStaticStyles(({ css, cssVar }) => ({
-	agent: css`
-    display: inline-flex;
-    flex: none;
-    border-radius: 8px;
-    transition: transform 140ms ease;
-
-    &:hover {
-      transform: translateY(-2px);
-    }
-
-    @media (prefers-reduced-motion: reduce) {
-      &:hover {
-        transform: none;
-      }
-    }
-  `,
-	agents: css`
-    display: flex;
-    flex-wrap: wrap;
-    gap: 14px;
-    justify-content: center;
-  `,
-	code: css`
-    inline-size: 100%;
-    text-align: start;
-  `,
-	description: css`
-    margin: 0;
-
-    font-size: 15px;
-    font-weight: 500;
-    line-height: 1.5;
-    color: ${cssVar.colorText};
-    text-align: center;
-    text-wrap: balance;
-  `,
-	footer: css`
-    display: flex;
-    flex-wrap: wrap;
-    gap: 16px;
-    justify-content: center;
-
-    font-size: ${cssVar.fontSizeSM};
-    color: ${cssVar.colorTextTertiary};
-
-    a {
-      color: inherit;
-      text-decoration: none;
-    }
-
-    a:hover {
-      color: ${cssVar.colorText};
-    }
-  `,
-	panel: css`
-    display: flex;
-    flex-direction: column;
-    gap: 16px;
-  `,
-	root: css`
-    display: flex;
-    flex-direction: column;
-    gap: 20px;
-
-    inline-size: 100%;
-    max-inline-size: 480px;
-    padding-block: 12px 16px;
-    padding-inline: 12px;
-    border: 1px solid ${cssVar.colorBorderSecondary};
-    border-radius: 16px;
-
-    background: color-mix(in srgb, ${cssVar.colorBgElevated} 25%, transparent);
-    backdrop-filter: blur(12px);
-    box-shadow:
-      0 1px 2px rgb(0 0 0 / 4%),
-      0 12px 32px rgb(0 0 0 / 6%);
-  `
-}));
+const styles = {
+	agent: {
+		kaIpWk: "lbur7f20",
+		kUk6DE: "lb1okw0bk",
+		kmkexE: "lb1iou1qo",
+		k1xSpc: "lb3nfvp2",
+		k3aq6I: "lb1lz31oe lbnotfpo",
+		$$css: true
+	},
+	agents: {
+		kOIVth: "lb1af02g3",
+		k1xSpc: "lb78zum5",
+		kwnvtZ: "lb1a02dak",
+		kjj79g: "lbl56j7k",
+		$$css: true
+	},
+	description: {
+		kogj98: "lb1ghz6dp",
+		kMwMTN: "lb66ogz0",
+		kGuDYH: "lb1jvydc1",
+		k63SB2: "lbk50ysn",
+		kLWn49: "lb1evy7pa",
+		k9WMMc: "lb2b8uid",
+		kN2L0X: "lb1w2vvpw",
+		$$css: true
+	},
+	footer: {
+		kOIVth: "lbou54vl",
+		kMwMTN: "lb53gy9q",
+		k1xSpc: "lb78zum5",
+		kwnvtZ: "lb1a02dak",
+		kGuDYH: "lbxobqjj",
+		kjj79g: "lbl56j7k",
+		$$css: true
+	},
+	panel: {
+		kOIVth: "lbou54vl",
+		k1xSpc: "lb78zum5",
+		kXwgrk: "lbdt5ytf",
+		$$css: true
+	},
+	root: {
+		kVAM5u: "lb10cypdb",
+		kaIpWk: "lbgqmno8",
+		ksu8eU: "lb1y0btm7",
+		kMzoRj: "lbmkeg23",
+		kOIVth: "lb1c1vhfx",
+		kg3NbH: "lbaope02",
+		k6WDB: "lbvn2z4z",
+		kWkggS: "lb1sy65q1",
+		kGVxlE: "lbg1erjj",
+		k1xSpc: "lb78zum5",
+		kXwgrk: "lbdt5ytf",
+		kzqmXN: "lbh8yej3",
+		ks0D6T: "lb17fpy1y",
+		kGO01o: "lb1l90r2v",
+		kLKAdn: "lbz9dl7a",
+		$$css: true
+	}
+};
+const childStyles = { code: {
+	inlineSize: "100%",
+	textAlign: "start"
+} };
 //#endregion
-export { styles };
+export { childStyles, styles };
 
 //# sourceMappingURL=style.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/awesome/AgentSkillCard/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  agent: css`\n    display: inline-flex;\n    flex: none;\n    border-radius: 8px;\n    transition: transform 140ms ease;\n\n    &:hover {\n      transform: translateY(-2px);\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      &:hover {\n        transform: none;\n      }\n    }\n  `,\n  agents: css`\n    display: flex;\n    flex-wrap: wrap;\n    gap: 14px;\n    justify-content: center;\n  `,\n  code: css`\n    inline-size: 100%;\n    text-align: start;\n  `,\n  description: css`\n    margin: 0;\n\n    font-size: 15px;\n    font-weight: 500;\n    line-height: 1.5;\n    color: ${cssVar.colorText};\n    text-align: center;\n    text-wrap: balance;\n  `,\n  footer: css`\n    display: flex;\n    flex-wrap: wrap;\n    gap: 16px;\n    justify-content: center;\n\n    font-size: ${cssVar.fontSizeSM};\n    color: ${cssVar.colorTextTertiary};\n\n    a {\n      color: inherit;\n      text-decoration: none;\n    }\n\n    a:hover {\n      color: ${cssVar.colorText};\n    }\n  `,\n  panel: css`\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n  `,\n  root: css`\n    display: flex;\n    flex-direction: column;\n    gap: 20px;\n\n    inline-size: 100%;\n    max-inline-size: 480px;\n    padding-block: 12px 16px;\n    padding-inline: 12px;\n    border: 1px solid ${cssVar.colorBorderSecondary};\n    border-radius: 16px;\n\n    background: color-mix(in srgb, ${cssVar.colorBgElevated} 25%, transparent);\n    backdrop-filter: blur(12px);\n    box-shadow:\n      0 1px 2px rgb(0 0 0 / 4%),\n      0 12px 32px rgb(0 0 0 / 6%);\n  `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,OAAO,GAAG;;;;;;;;;;;;;;;;CAgBV,QAAQ,GAAG;;;;;;CAMX,MAAM,GAAG;;;;CAIT,aAAa,GAAG;;;;;;aAML,OAAO,UAAU;;;;CAI5B,QAAQ,GAAG;;;;;;iBAMI,OAAO,WAAW;aACtB,OAAO,kBAAkB;;;;;;;;eAQvB,OAAO,UAAU;;;CAG9B,OAAO,GAAG;;;;;CAKV,MAAM,GAAG;;;;;;;;;wBASa,OAAO,qBAAqB;;;qCAGf,OAAO,gBAAgB;;;;;;AAM5D,EAAE"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/awesome/AgentSkillCard/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport type { CSSProperties } from 'react';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\n\nexport const styles = stylex.create({\n  agent: {\n    borderRadius: 8,\n    flex: 'none',\n    transition: 'transform 140ms ease',\n    display: 'inline-flex',\n    transform: {\n      'default': null,\n      ':hover': 'translateY(-2px)',\n      '@media (prefers-reduced-motion: reduce)': { 'default': null, ':hover': 'none' },\n    },\n  },\n  agents: {\n    gap: 14,\n    display: 'flex',\n    flexWrap: 'wrap',\n    justifyContent: 'center',\n  },\n  description: {\n    margin: 0,\n    color: cssVar.colorText,\n    fontSize: 15,\n    fontWeight: 500,\n    lineHeight: 1.5,\n    textAlign: 'center',\n    textWrap: 'balance',\n  },\n  footer: {\n    gap: 16,\n    color: cssVar.colorTextTertiary,\n    display: 'flex',\n    flexWrap: 'wrap',\n    fontSize: cssVar.fontSizeSM,\n    justifyContent: 'center',\n  },\n  panel: {\n    gap: 16,\n    display: 'flex',\n    flexDirection: 'column',\n  },\n  root: {\n    borderColor: cssVar.colorBorderSecondary,\n    borderRadius: 16,\n    borderStyle: 'solid',\n    borderWidth: 1,\n    gap: 20,\n    paddingInline: 12,\n    backdropFilter: 'blur(12px)',\n    backgroundColor: `color-mix(in srgb, ${cssVar.colorBgElevated} 25%, transparent)`,\n    boxShadow: '0 1px 2px rgb(0 0 0 / 4%), 0 12px 32px rgb(0 0 0 / 6%)',\n    display: 'flex',\n    flexDirection: 'column',\n    inlineSize: '100%',\n    maxInlineSize: 480,\n    paddingBlockEnd: '16px',\n    paddingBlockStart: '12px',\n  },\n});\n\nexport const childStyles = {\n  code: {\n    inlineSize: '100%',\n    textAlign: 'start',\n  },\n} satisfies Record<string, CSSProperties>;\n"],"mappings":";AAIA,MAAa,SAAS;CACpB,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,QAAQ;EACN,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,QAAQ;EACN,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF;AACA,MAAa,cAAc,EACzB,MAAM;CACJ,YAAY;CACZ,WAAW;AACb,EACF"}

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

@@ -1,15 +1,15 @@
 import { DivProps } from "../../types/index.mjs";
 import { ElementType, ReactNode } from "react";
 //#region src/awesome/AgentSkillCard/type.d.ts
-type AgentSkillCardMode = 'agent' | 'human';
-interface AgentSkillCardAgent {
+export type AgentSkillCardMode = 'agent' | 'human';
+export interface AgentSkillCardAgent {
   /** An avatar component such as `ClaudeCode.Avatar` from `@lobehub/icons`, or a ready-made node. */
   avatar: ElementType<{
     size: number;
   }> | ReactNode;
   title: string;
 }
-interface AgentSkillCardPanel {
+export interface AgentSkillCardPanel {
   /** The text users copy: a prompt for agents, a shell command for humans. */
   code: string;
   /** One-line instruction above the code block. */
@@ -19,7 +19,7 @@ interface AgentSkillCardPanel {
   /** Renders the code with a `$` shell prompt. Defaults to true for the human panel. */
   shell?: boolean;
 }
-interface AgentSkillCardProps extends DivProps {
+export interface AgentSkillCardProps extends DivProps {
   /** Shown when the agent tab is active. */
   agent: AgentSkillCardPanel;
   /**
@@ -37,5 +37,4 @@ interface AgentSkillCardProps extends DivProps {
   onModeChange?: (mode: AgentSkillCardMode) => void;
 }
 //#endregion
-export { AgentSkillCardAgent, AgentSkillCardMode, AgentSkillCardPanel, AgentSkillCardProps };
 //# sourceMappingURL=type.d.mts.map

package/es/awesome/AuroraBackground/AuroraBackground.mjs

@@ -1,9 +1,11 @@
 "use client";
+import { styleProps } from "../../styles/stylex/props.mjs";
 import FlexBasic_default from "../../Flex/FlexBasic.mjs";
+import { useThemeMode } from "../../styles/theme/scope.mjs";
 import { styles } from "./style.mjs";
 import { memo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { cx, useThemeMode } from "antd-style";
+import * as stylex from "@stylexjs/stylex";
 //#region src/awesome/AuroraBackground/AuroraBackground.tsx
 const AuroraBackground = memo(({ ref, classNames, styles: customStyles, children, ...rest }) => {
 	const { isDarkMode } = useThemeMode();
@@ -11,9 +13,8 @@ const AuroraBackground = memo(({ ref, classNames, styles: customStyles, children
 		ref,
 		...rest,
 		children: [/* @__PURE__ */ jsx(FlexBasic_default, {
-			className: cx(styles.wrapper, classNames?.wrapper),
-			style: customStyles?.wrapper,
-			children: /* @__PURE__ */ jsx("div", { className: isDarkMode ? styles.bgDark : styles.bgLight })
+			...styleProps(styles.wrapper, classNames?.wrapper, customStyles?.wrapper),
+			children: /* @__PURE__ */ jsx("div", { ...stylex.props(styles.bg, isDarkMode ? styles.bgDark : styles.bgLight) })
 		}), /* @__PURE__ */ jsx(FlexBasic_default, {
 			className: classNames?.content,
 			flex: 1,

package/es/awesome/AuroraBackground/AuroraBackground.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"AuroraBackground.mjs","names":["Flexbox"],"sources":["../../../src/awesome/AuroraBackground/AuroraBackground.tsx"],"sourcesContent":["'use client';\n\nimport { cx, useThemeMode } from 'antd-style';\nimport { memo } from 'react';\n\nimport { Flexbox } from '@/Flex';\n\nimport { styles } from './style';\nimport type { AuroraBackgroundProps } from './type';\n\nconst AuroraBackground = memo<AuroraBackgroundProps>(\n  ({ ref, classNames, styles: customStyles, children, ...rest }) => {\n    const { isDarkMode } = useThemeMode();\n    return (\n      <Flexbox ref={ref} {...rest}>\n        <Flexbox className={cx(styles.wrapper, classNames?.wrapper)} style={customStyles?.wrapper}>\n          <div className={isDarkMode ? styles.bgDark : styles.bgLight} />\n        </Flexbox>\n        <Flexbox\n          className={classNames?.content}\n          flex={1}\n          style={{ zIndex: 1, ...customStyles?.content }}\n          width={'100%'}\n        >\n          {children}\n        </Flexbox>\n      </Flexbox>\n    );\n  },\n);\n\nAuroraBackground.displayName = 'AuroraBackground';\n\nexport default AuroraBackground;\n"],"mappings":";;;;;;;AAUA,MAAM,mBAAmB,MACtB,EAAE,KAAK,YAAY,QAAQ,cAAc,UAAU,GAAG,WAAW;CAChE,MAAM,EAAE,eAAe,aAAa;CACpC,OACE,qBAACA,mBAAD;EAAc;EAAK,GAAI;EAAvB,UAAA,CACE,oBAACA,mBAAD;GAAS,WAAW,GAAG,OAAO,SAAS,YAAY,OAAO;GAAG,OAAO,cAAc;GAChF,UAAA,oBAAC,OAAD,EAAK,WAAW,aAAa,OAAO,SAAS,OAAO,QAAU,CAAA;EACvD,CAAA,GACT,oBAACA,mBAAD;GACE,WAAW,YAAY;GACvB,MAAM;GACN,OAAO;IAAE,QAAQ;IAAG,GAAG,cAAc;GAAQ;GAC7C,OAAO;GAEN;EACM,CAAA,CACF;;AAEb,CACF;AAEA,iBAAiB,cAAc"}
+{"version":3,"file":"AuroraBackground.mjs","names":["Flexbox"],"sources":["../../../src/awesome/AuroraBackground/AuroraBackground.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport { memo } from 'react';\n\nimport { Flexbox } from '@/Flex';\nimport { styleProps } from '@/styles/stylex/props';\nimport { useThemeMode } from '@/styles/theme/scope';\n\nimport { styles } from './style';\nimport type { AuroraBackgroundProps } from './type';\n\nconst AuroraBackground = memo<AuroraBackgroundProps>(\n  ({ ref, classNames, styles: customStyles, children, ...rest }) => {\n    const { isDarkMode } = useThemeMode();\n    return (\n      <Flexbox ref={ref} {...rest}>\n        <Flexbox {...styleProps(styles.wrapper, classNames?.wrapper, customStyles?.wrapper)}>\n          <div {...stylex.props(styles.bg, isDarkMode ? styles.bgDark : styles.bgLight)} />\n        </Flexbox>\n        <Flexbox\n          className={classNames?.content}\n          flex={1}\n          style={{ zIndex: 1, ...customStyles?.content }}\n          width={'100%'}\n        >\n          {children}\n        </Flexbox>\n      </Flexbox>\n    );\n  },\n);\n\nAuroraBackground.displayName = 'AuroraBackground';\n\nexport default AuroraBackground;\n"],"mappings":";;;;;;;;;AASA,MAAM,mBAAmB,MAA6B,EACpD,KACA,YACA,QAAQ,cACR,UACA,GAAG,WACC;CACJ,MAAM,EACJ,eACE,aAAa;CACjB,OAAO,qBAACA,mBAAD;EAAc;EAAK,GAAI;EAAvB,UAAA,CACD,oBAACA,mBAAD;GAAS,GAAI,WAAW,OAAO,SAAS,YAAY,SAAS,cAAc,OAAO;GAChF,UAAA,oBAAC,OAAD,EAAK,GAAI,OAAO,MAAM,OAAO,IAAI,aAAa,OAAO,SAAS,OAAO,OAAO,EAAI,CAAA;EACzE,CAAA,GACT,oBAACA,mBAAD;GAAS,WAAW,YAAY;GAAS,MAAM;GAAG,OAAO;IAC3D,QAAQ;IACR,GAAG,cAAc;GACnB;GAAG,OAAO;GACH;EACM,CAAA,CACF;;AACf,CAAC;AACD,iBAAiB,cAAc"}