@jinmi/ui 0.0.0-stage → 6.0.2

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

@@ -0,0 +1 @@
+{"version":3,"file":"ParentSize.mjs","names":[],"sources":["../../../src/awesome/Spline/ParentSize.tsx"],"sourcesContent":["import { debounce } from 'es-toolkit/compat';\r\nimport {\r\n  type CSSProperties,\r\n  memo,\r\n  type ReactNode,\r\n  type Ref,\r\n  useEffect,\r\n  useMemo,\r\n  useRef,\r\n  useState,\r\n} from 'react';\r\nimport { mergeRefs } from 'react-merge-refs';\r\n\r\ninterface ResizeObserverCallback {\r\n  (entries: ResizeObserverEntry[], observer: ResizeObserver): void;\r\n}\r\n\r\ninterface ResizeObserverPolyfill {\r\n  new (callback: ResizeObserverCallback): ResizeObserver;\r\n}\r\n\r\n// @TODO remove when upgraded to TS 4 which has its own declaration\r\ninterface PrivateWindow {\r\n  ResizeObserver: ResizeObserverPolyfill;\r\n}\r\n\r\nexport interface ParentSizeProps {\r\n  /** Child render function `({ width, height, top, left, ref, resize }) => ReactNode`. */\r\n  children: (\r\n    args: {\r\n      ref: HTMLDivElement | null;\r\n      resize: (state: ParentSizeState) => void;\r\n    } & ParentSizeState,\r\n  ) => ReactNode;\r\n  /** Optional `className` to add to the parent `div` wrapper used for size measurement. */\r\n  className?: string;\r\n  /** Child render updates upon resize are delayed until `debounceTime` milliseconds _after_ the last resize event is observed. */\r\n  debounceTime?: number;\r\n  /** Optional flag to toggle leading debounce calls. When set to true this will ensure that the component always renders immediately. (defaults to true) */\r\n  enableDebounceLeadingCall?: boolean;\r\n  /** Optional dimensions provided won't trigger a state change when changed. */\r\n  ignoreDimensions?: keyof ParentSizeState | (keyof ParentSizeState)[];\r\n  /** Optional `style` object to apply to the parent `div` wrapper used for size measurement. */\r\n  parentSizeStyles?: CSSProperties;\r\n  ref?: Ref<HTMLDivElement>;\r\n  /** Optionally inject a ResizeObserver polyfill, else this *must* be globally available. */\r\n  resizeObserverPolyfill?: ResizeObserverPolyfill;\r\n}\r\n\r\ntype ParentSizeState = {\r\n  height: number;\r\n  left: number;\r\n  top: number;\r\n  width: number;\r\n};\r\n\r\nexport type ParentSizeProvidedProps = ParentSizeState;\r\n\r\nconst defaultIgnoreDimensions: ParentSizeProps['ignoreDimensions'] = [];\r\nconst defaultParentSizeStyles = { height: '100%', width: '100%' };\r\n\r\nconst ParentSize = memo<ParentSizeProps>(\r\n  ({\r\n    ref,\r\n    className,\r\n    children,\r\n    debounceTime = 300,\r\n    ignoreDimensions = defaultIgnoreDimensions,\r\n    parentSizeStyles,\r\n    enableDebounceLeadingCall = true,\r\n    resizeObserverPolyfill,\r\n    ...restProps\r\n  }) => {\r\n    const target = useRef<HTMLDivElement | null>(null);\r\n    const animationFrameID = useRef(0);\r\n\r\n    const [state, setState] = useState<ParentSizeState>({\r\n      height: 0,\r\n      left: 0,\r\n      top: 0,\r\n      width: 0,\r\n    });\r\n\r\n    const resize = useMemo(() => {\r\n      const normalized = Array.isArray(ignoreDimensions) ? ignoreDimensions : [ignoreDimensions];\r\n\r\n      return debounce(\r\n        (incoming: ParentSizeState) => {\r\n          setState((existing) => {\r\n            const stateKeys = Object.keys(existing) as (keyof ParentSizeState)[];\r\n            const keysWithChanges = stateKeys.filter((key) => existing[key] !== incoming[key]);\r\n            const shouldBail = keysWithChanges.every((key) => normalized.includes(key));\r\n\r\n            return shouldBail ? existing : incoming;\r\n          });\r\n        },\r\n        debounceTime,\r\n        { leading: enableDebounceLeadingCall },\r\n      );\r\n    }, [debounceTime, enableDebounceLeadingCall, ignoreDimensions]);\r\n\r\n    useEffect(() => {\r\n      const LocalResizeObserver =\r\n        resizeObserverPolyfill || (window as unknown as PrivateWindow).ResizeObserver;\r\n\r\n      const observer = new LocalResizeObserver((entries) => {\r\n        for (const entry of entries) {\r\n          const { left, top, width, height } = entry?.contentRect ?? {};\r\n          animationFrameID.current = window.requestAnimationFrame(() => {\r\n            resize({ height, left, top, width });\r\n          });\r\n        }\r\n      });\r\n      if (target.current) observer.observe(target.current);\r\n\r\n      return () => {\r\n        window.cancelAnimationFrame(animationFrameID.current);\r\n        observer.disconnect();\r\n        resize.cancel();\r\n      };\r\n    }, [resize, resizeObserverPolyfill]);\r\n\r\n    return (\r\n      <div\r\n        className={className}\r\n        ref={mergeRefs<HTMLDivElement>([ref, target])}\r\n        style={{ ...defaultParentSizeStyles, ...parentSizeStyles }}\r\n        {...restProps}\r\n      >\r\n        {children({\r\n          ...state,\r\n          ref: target.current,\r\n          resize,\r\n        })}\r\n      </div>\r\n    );\r\n  },\r\n);\r\n\r\nexport default ParentSize;\r\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"}

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

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

package/es/awesome/Spline/Spine.mjs

@@ -0,0 +1,83 @@
+"use client";
+import ParentSize from "./ParentSize.mjs";
+import { memo, useEffect, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { Application } from "@splinetool/runtime";
+//#region src/awesome/Spline/Spine.tsx
+const Spline = memo(({ ref, scene, style, onMouseDown, onMouseUp, onMouseHover, onKeyDown, onKeyUp, onStart, onLookAt, onFollow, onWheel, onLoad, renderOnDemand = true, ...props }) => {
+	const canvasRef = useRef(null);
+	const [isLoading, setIsLoading] = useState(true);
+	const init = async (speApp, events) => {
+		await speApp.load(scene);
+		for (const event of events) if (event.cb) speApp.addEventListener(event.name, event.cb);
+		setIsLoading(false);
+		onLoad?.(speApp);
+	};
+	useEffect(() => {
+		setIsLoading(true);
+		let speApp;
+		const events = [
+			{
+				cb: onMouseDown,
+				name: "mouseDown"
+			},
+			{
+				cb: onMouseUp,
+				name: "mouseUp"
+			},
+			{
+				cb: onMouseHover,
+				name: "mouseHover"
+			},
+			{
+				cb: onKeyDown,
+				name: "keyDown"
+			},
+			{
+				cb: onKeyUp,
+				name: "keyUp"
+			},
+			{
+				cb: onStart,
+				name: "start"
+			},
+			{
+				cb: onLookAt,
+				name: "lookAt"
+			},
+			{
+				cb: onFollow,
+				name: "follow"
+			},
+			{
+				cb: onWheel,
+				name: "scroll"
+			}
+		];
+		if (canvasRef.current) {
+			speApp = new Application(canvasRef.current, { renderOnDemand });
+			init(speApp, events);
+		}
+		return () => {
+			for (const event of events) if (event.cb) speApp.removeEventListener(event.name, event.cb);
+			speApp.dispose();
+		};
+	}, [scene]);
+	return /* @__PURE__ */ jsx(ParentSize, {
+		debounceTime: 50,
+		parentSizeStyles: style,
+		ref,
+		...props,
+		children: () => {
+			return /* @__PURE__ */ jsx("canvas", {
+				ref: canvasRef,
+				style: { display: isLoading ? "none" : "block" }
+			});
+		}
+	});
+});
+Spline.displayName = "Spline";
+//#endregion
+export { Spline as default };
+
+//# sourceMappingURL=Spine.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Spine.mjs","names":[],"sources":["../../../src/awesome/Spline/Spine.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { type SplineEvent, type SplineEventName } from '@splinetool/runtime';\r\nimport { Application } from '@splinetool/runtime';\r\nimport { memo, useEffect, useRef, useState } from 'react';\r\n\r\nimport ParentSize from './ParentSize';\r\nimport { type SplineProps } from './type';\r\n\r\nconst Spline = memo<SplineProps>(\r\n  ({\r\n    ref,\r\n    scene,\r\n    style,\r\n    onMouseDown,\r\n    onMouseUp,\r\n    onMouseHover,\r\n    onKeyDown,\r\n    onKeyUp,\r\n    onStart,\r\n    onLookAt,\r\n    onFollow,\r\n    onWheel,\r\n    onLoad,\r\n    renderOnDemand = true,\r\n    ...props\r\n  }) => {\r\n    const canvasRef = useRef<HTMLCanvasElement>(null);\r\n    const [isLoading, setIsLoading] = useState(true);\r\n\r\n    const init = async (\r\n      speApp: Application,\r\n      events: {\r\n        cb?: (e: SplineEvent) => void;\r\n        name: SplineEventName;\r\n      }[],\r\n    ) => {\r\n      await speApp.load(scene);\r\n\r\n      for (const event of events) {\r\n        if (event.cb) {\r\n          speApp.addEventListener(event.name, event.cb);\r\n        }\r\n      }\r\n\r\n      setIsLoading(false);\r\n      onLoad?.(speApp);\r\n    };\r\n\r\n    // Initialize runtime when component is mounted\r\n    useEffect(() => {\r\n      setIsLoading(true);\r\n\r\n      let speApp: Application;\r\n      const events: {\r\n        cb?: (e: SplineEvent) => void;\r\n        name: SplineEventName;\r\n      }[] = [\r\n        {\r\n          cb: onMouseDown,\r\n          name: 'mouseDown',\r\n        },\r\n        {\r\n          cb: onMouseUp,\r\n          name: 'mouseUp',\r\n        },\r\n        {\r\n          cb: onMouseHover,\r\n          name: 'mouseHover',\r\n        },\r\n        {\r\n          cb: onKeyDown,\r\n          name: 'keyDown',\r\n        },\r\n        {\r\n          cb: onKeyUp,\r\n          name: 'keyUp',\r\n        },\r\n        {\r\n          cb: onStart,\r\n          name: 'start',\r\n        },\r\n        {\r\n          cb: onLookAt,\r\n          name: 'lookAt',\r\n        },\r\n        {\r\n          cb: onFollow,\r\n          name: 'follow',\r\n        },\r\n        {\r\n          cb: onWheel,\r\n          name: 'scroll',\r\n        },\r\n      ];\r\n\r\n      if (canvasRef.current) {\r\n        speApp = new Application(canvasRef.current, { renderOnDemand });\r\n        init(speApp, events);\r\n      }\r\n\r\n      return () => {\r\n        for (const event of events) {\r\n          if (event.cb) {\r\n            speApp.removeEventListener(event.name, event.cb);\r\n          }\r\n        }\r\n        speApp.dispose();\r\n      };\r\n      // eslint-disable-next-line react-hooks/exhaustive-deps\r\n    }, [scene]);\r\n\r\n    return (\r\n      <ParentSize debounceTime={50} parentSizeStyles={style} ref={ref} {...props}>\r\n        {() => {\r\n          return (\r\n            <canvas\r\n              ref={canvasRef}\r\n              style={{\r\n                display: isLoading ? 'none' : 'block',\r\n              }}\r\n            />\r\n          );\r\n        }}\r\n      </ParentSize>\r\n    );\r\n  },\r\n);\r\n\r\nSpline.displayName = 'Spline';\r\n\r\nexport default Spline;\r\n\r\nexport { type SPEObject, type SplineEvent, type SplineEventName } from '@splinetool/runtime';\r\n"],"mappings":";;;;;;AASA,MAAM,SAAS,MACZ,EACC,KACA,OACA,OACA,aACA,WACA,cACA,WACA,SACA,SACA,UACA,UACA,SACA,QACA,iBAAiB,MACjB,GAAG,YACC;CACJ,MAAM,YAAY,OAA0B,IAAI;CAChD,MAAM,CAAC,WAAW,gBAAgB,SAAS,IAAI;CAE/C,MAAM,OAAO,OACX,QACA,WAIG;EACH,MAAM,OAAO,KAAK,KAAK;EAEvB,KAAK,MAAM,SAAS,QAClB,IAAI,MAAM,IACR,OAAO,iBAAiB,MAAM,MAAM,MAAM,EAAE;EAIhD,aAAa,KAAK;EAClB,SAAS,MAAM;CACjB;CAGA,gBAAgB;EACd,aAAa,IAAI;EAEjB,IAAI;EACJ,MAAM,SAGA;GACJ;IACE,IAAI;IACJ,MAAM;GACR;GACA;IACE,IAAI;IACJ,MAAM;GACR;GACA;IACE,IAAI;IACJ,MAAM;GACR;GACA;IACE,IAAI;IACJ,MAAM;GACR;GACA;IACE,IAAI;IACJ,MAAM;GACR;GACA;IACE,IAAI;IACJ,MAAM;GACR;GACA;IACE,IAAI;IACJ,MAAM;GACR;GACA;IACE,IAAI;IACJ,MAAM;GACR;GACA;IACE,IAAI;IACJ,MAAM;GACR;EACF;EAEA,IAAI,UAAU,SAAS;GACrB,SAAS,IAAI,YAAY,UAAU,SAAS,EAAE,eAAe,CAAC;GAC9D,KAAK,QAAQ,MAAM;EACrB;EAEA,aAAa;GACX,KAAK,MAAM,SAAS,QAClB,IAAI,MAAM,IACR,OAAO,oBAAoB,MAAM,MAAM,MAAM,EAAE;GAGnD,OAAO,QAAQ;EACjB;CAEF,GAAG,CAAC,KAAK,CAAC;CAEV,OACE,oBAAC,YAAD;EAAY,cAAc;EAAI,kBAAkB;EAAY;EAAK,GAAI;EAC5D,gBAAA;GACL,OACE,oBAAC,UAAD;IACE,KAAK;IACL,OAAO,EACL,SAAS,YAAY,SAAS,QAChC;GACD,CAAA;EAEL;CACU,CAAA;AAEhB,CACF;AAEA,OAAO,cAAc"}

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

@@ -0,0 +1,3 @@
+import { SplineProps } from "./type.mjs";
+import Spline from "./Spine.mjs";
+export { type SplineProps, Spline as default };

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

@@ -0,0 +1,21 @@
+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'> {
+  onFollow?: (e: SplineEvent) => void;
+  onKeyDown?: (e: SplineEvent) => void;
+  onKeyUp?: (e: SplineEvent) => void;
+  onLoad?: (e: Application) => void;
+  onLookAt?: (e: SplineEvent) => void;
+  onMouseDown?: (e: SplineEvent) => void;
+  onMouseHover?: (e: SplineEvent) => void;
+  onMouseUp?: (e: SplineEvent) => void;
+  onStart?: (e: SplineEvent) => void;
+  onWheel?: (e: SplineEvent) => void;
+  ref?: Ref<HTMLDivElement>;
+  renderOnDemand?: boolean;
+  scene: string;
+}
+//#endregion
+export { SplineProps };
+//# sourceMappingURL=type.d.mts.map

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

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

package/es/awesome/Spotlight/Spotlight.mjs

@@ -0,0 +1,33 @@
+"use client";
+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();
+	const { isDarkMode } = useThemeMode();
+	const cssVariables = useMemo(() => ({
+		"--spotlight-opacity": outside ? "0" : "0.1",
+		"--spotlight-size": `${size}px`,
+		"--spotlight-x": `${offset?.x ?? 0}px`,
+		"--spotlight-y": `${offset?.y ?? 0}px`
+	}), [
+		offset,
+		size,
+		outside
+	]);
+	const spotlightStyle = isDarkMode ? outside ? styles.spotlightDarkOutside : styles.spotlightDark : outside ? styles.spotlightLightOutside : styles.spotlightLight;
+	return /* @__PURE__ */ jsx("div", {
+		className: cx(spotlightStyle, className),
+		ref: reference,
+		style: cssVariables,
+		...properties
+	});
+});
+Spotlight.displayName = "Spotlight";
+//#endregion
+export { Spotlight as default };
+
+//# sourceMappingURL=Spotlight.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Spotlight.mjs","names":[],"sources":["../../../src/awesome/Spotlight/Spotlight.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { cx, useThemeMode } from 'antd-style';\r\nimport { memo, useMemo } from 'react';\r\n\r\nimport { styles } from './style';\r\nimport type { SpotlightProps } from './type';\r\nimport { useMouseOffset } from './useMouseOffset';\r\n\r\nconst Spotlight = memo<SpotlightProps>(({ className, size = 64, ...properties }) => {\r\n  const [offset, outside, reference] = useMouseOffset();\r\n  const { isDarkMode } = useThemeMode();\r\n\r\n  const cssVariables = useMemo<Record<string, string>>(\r\n    () => ({\r\n      '--spotlight-opacity': outside ? '0' : '0.1',\r\n      '--spotlight-size': `${size}px`,\r\n      '--spotlight-x': `${offset?.x ?? 0}px`,\r\n      '--spotlight-y': `${offset?.y ?? 0}px`,\r\n    }),\r\n    [offset, size, outside],\r\n  );\r\n\r\n  const spotlightStyle = isDarkMode\r\n    ? outside\r\n      ? styles.spotlightDarkOutside\r\n      : styles.spotlightDark\r\n    : outside\r\n      ? styles.spotlightLightOutside\r\n      : styles.spotlightLight;\r\n\r\n  return (\r\n    <div\r\n      className={cx(spotlightStyle, className)}\r\n      ref={reference}\r\n      style={cssVariables}\r\n      {...properties}\r\n    />\r\n  );\r\n});\r\n\r\nSpotlight.displayName = 'Spotlight';\r\n\r\nexport default Spotlight;\r\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"}

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

@@ -0,0 +1,3 @@
+import { SpotlightProps } from "./type.mjs";
+import Spotlight from "./Spotlight.mjs";
+export { type SpotlightProps, Spotlight as default };

package/es/awesome/Spotlight/style.mjs

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/awesome/Spotlight/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\r\n\r\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\r\n  spotlightDark: css`\r\n    pointer-events: none;\r\n\r\n    position: absolute;\r\n    z-index: 1;\r\n    inset: 0;\r\n\r\n    border-radius: inherit;\r\n\r\n    opacity: var(--spotlight-opacity, 0.1);\r\n    background: radial-gradient(\r\n      var(--spotlight-size, 64px) circle at var(--spotlight-x, 0) var(--spotlight-y, 0),\r\n      ${cssVar.colorText},\r\n      transparent\r\n    );\r\n\r\n    transition: all 0.2s;\r\n  `,\r\n\r\n  spotlightDarkOutside: css`\r\n    pointer-events: none;\r\n\r\n    position: absolute;\r\n    z-index: 1;\r\n    inset: 0;\r\n\r\n    border-radius: inherit;\r\n\r\n    opacity: 0;\r\n    background: radial-gradient(\r\n      var(--spotlight-size, 64px) circle at var(--spotlight-x, 0) var(--spotlight-y, 0),\r\n      ${cssVar.colorText},\r\n      transparent\r\n    );\r\n\r\n    transition: all 0.2s;\r\n  `,\r\n\r\n  spotlightLight: css`\r\n    pointer-events: none;\r\n\r\n    position: absolute;\r\n    z-index: 1;\r\n    inset: 0;\r\n\r\n    border-radius: inherit;\r\n\r\n    opacity: var(--spotlight-opacity, 0.1);\r\n    background: radial-gradient(\r\n      var(--spotlight-size, 64px) circle at var(--spotlight-x, 0) var(--spotlight-y, 0),\r\n      #fff,\r\n      ${cssVar.colorTextQuaternary}\r\n    );\r\n\r\n    transition: all 0.2s;\r\n  `,\r\n\r\n  spotlightLightOutside: css`\r\n    pointer-events: none;\r\n\r\n    position: absolute;\r\n    z-index: 1;\r\n    inset: 0;\r\n\r\n    border-radius: inherit;\r\n\r\n    opacity: 0;\r\n    background: radial-gradient(\r\n      var(--spotlight-size, 64px) circle at var(--spotlight-x, 0) var(--spotlight-y, 0),\r\n      #fff,\r\n      ${cssVar.colorTextQuaternary}\r\n    );\r\n\r\n    transition: all 0.2s;\r\n  `,\r\n}));\r\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,eAAe,GAAG;;;;;;;;;;;;QAYZ,OAAO,UAAU;;;;;;CAOvB,sBAAsB,GAAG;;;;;;;;;;;;QAYnB,OAAO,UAAU;;;;;;CAOvB,gBAAgB,GAAG;;;;;;;;;;;;;QAab,OAAO,oBAAoB;;;;;CAMjC,uBAAuB,GAAG;;;;;;;;;;;;;QAapB,OAAO,oBAAoB;;;;;AAKnC,EAAE"}

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

@@ -0,0 +1,8 @@
+import { DivProps } from "../../types/index.mjs";
+//#region src/awesome/Spotlight/type.d.ts
+interface SpotlightProps extends DivProps {
+  size?: number;
+}
+//#endregion
+export { SpotlightProps };
+//# sourceMappingURL=type.d.mts.map

package/es/awesome/Spotlight/useMouseOffset.mjs

@@ -0,0 +1,38 @@
+import { useEffect, useRef, useState } from "react";
+//#region src/awesome/Spotlight/useMouseOffset.ts
+const useMouseOffset = () => {
+	const [offset, setOffset] = useState();
+	const [outside, setOutside] = useState(true);
+	const reference = useRef(null);
+	useEffect(() => {
+		if (reference.current && reference.current.parentElement) {
+			const element = reference.current.parentElement;
+			const onMouseMove = (e) => {
+				const bound = element.getBoundingClientRect();
+				setOffset({
+					x: e.clientX - bound.x,
+					y: e.clientY - bound.y
+				});
+				setOutside(false);
+			};
+			const onMouseLeave = () => {
+				setOutside(true);
+			};
+			element.addEventListener("mousemove", onMouseMove);
+			element.addEventListener("mouseleave", onMouseLeave);
+			return () => {
+				element.removeEventListener("mousemove", onMouseMove);
+				element.removeEventListener("mouseleave", onMouseLeave);
+			};
+		}
+	}, []);
+	return [
+		offset,
+		outside,
+		reference
+	];
+};
+//#endregion
+export { useMouseOffset };
+
+//# sourceMappingURL=useMouseOffset.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useMouseOffset.mjs","names":[],"sources":["../../../src/awesome/Spotlight/useMouseOffset.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\r\n\r\nexport const useMouseOffset = (): any => {\r\n  const [offset, setOffset] = useState<{ x: number; y: number }>();\r\n  const [outside, setOutside] = useState(true);\r\n  const reference = useRef<HTMLDivElement>(null);\r\n\r\n  useEffect(() => {\r\n    if (reference.current && reference.current.parentElement) {\r\n      const element = reference.current.parentElement;\r\n\r\n      // debounce?\r\n      const onMouseMove = (e: MouseEvent) => {\r\n        const bound = element.getBoundingClientRect();\r\n        setOffset({ x: e.clientX - bound.x, y: e.clientY - bound.y });\r\n        setOutside(false);\r\n      };\r\n\r\n      const onMouseLeave = () => {\r\n        setOutside(true);\r\n      };\r\n      element.addEventListener('mousemove', onMouseMove);\r\n      element.addEventListener('mouseleave', onMouseLeave);\r\n      return () => {\r\n        element.removeEventListener('mousemove', onMouseMove);\r\n        element.removeEventListener('mouseleave', onMouseLeave);\r\n      };\r\n    }\r\n  }, []);\r\n\r\n  return [offset, outside, reference] as const;\r\n};\r\n"],"mappings":";;AAEA,MAAa,uBAA4B;CACvC,MAAM,CAAC,QAAQ,aAAa,SAAmC;CAC/D,MAAM,CAAC,SAAS,cAAc,SAAS,IAAI;CAC3C,MAAM,YAAY,OAAuB,IAAI;CAE7C,gBAAgB;EACd,IAAI,UAAU,WAAW,UAAU,QAAQ,eAAe;GACxD,MAAM,UAAU,UAAU,QAAQ;GAGlC,MAAM,eAAe,MAAkB;IACrC,MAAM,QAAQ,QAAQ,sBAAsB;IAC5C,UAAU;KAAE,GAAG,EAAE,UAAU,MAAM;KAAG,GAAG,EAAE,UAAU,MAAM;IAAE,CAAC;IAC5D,WAAW,KAAK;GAClB;GAEA,MAAM,qBAAqB;IACzB,WAAW,IAAI;GACjB;GACA,QAAQ,iBAAiB,aAAa,WAAW;GACjD,QAAQ,iBAAiB,cAAc,YAAY;GACnD,aAAa;IACX,QAAQ,oBAAoB,aAAa,WAAW;IACpD,QAAQ,oBAAoB,cAAc,YAAY;GACxD;EACF;CACF,GAAG,CAAC,CAAC;CAEL,OAAO;EAAC;EAAQ;EAAS;CAAS;AACpC"}

package/es/awesome/SpotlightCard/SpotlightCard.d.mts

@@ -0,0 +1,6 @@
+import { SpotlightCardProps } from "./type.mjs";
+//#region src/awesome/SpotlightCard/SpotlightCard.d.ts
+declare const SpotlightCard: import("react").NamedExoticComponent<SpotlightCardProps<any>>;
+//#endregion
+export { SpotlightCard as default };
+//# sourceMappingURL=SpotlightCard.d.mts.map

package/es/awesome/SpotlightCard/SpotlightCard.mjs

@@ -0,0 +1,55 @@
+"use client";
+import Grid from "../../Grid/Grid.mjs";
+import { CHILDREN_CLASSNAME, styles } from "./style.mjs";
+import SpotlightCardItem from "./SpotlightCardItem.mjs";
+import { memo, useEffect, useMemo, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { cx } from "antd-style";
+//#region src/awesome/SpotlightCard/SpotlightCard.tsx
+const SpotlightCard = memo(({ items, renderItem: Content, maxItemWidth, className, columns = 3, gap = "1em", style, size = 800, borderRadius = 12, spotlight = true, ...rest }) => {
+	const cssVariables = useMemo(() => ({
+		"--spotlight-card-border-radius": `${borderRadius}px`,
+		"--spotlight-card-size": `${size}px`
+	}), [borderRadius, size]);
+	const ref = useRef(null);
+	useEffect(() => {
+		if (!ref.current) return;
+		if (!spotlight) return;
+		const fn = (e) => {
+			for (const card of document.querySelectorAll(`.${CHILDREN_CLASSNAME}`)) {
+				const rect = card.getBoundingClientRect(), x = e.clientX - rect.left, y = e.clientY - rect.top;
+				card.style.setProperty("--mouse-x", `${x}px`);
+				card.style.setProperty("--mouse-y", `${y}px`);
+			}
+		};
+		ref.current.addEventListener("mousemove", fn);
+		return () => {
+			ref.current?.removeEventListener("mousemove", fn);
+		};
+	}, []);
+	return /* @__PURE__ */ jsx(Grid, {
+		className: cx(styles.container, styles.grid, className),
+		gap,
+		maxItemWidth,
+		ref,
+		rows: columns,
+		style: {
+			...cssVariables,
+			...style
+		},
+		...rest,
+		children: items.map((item, index) => {
+			return /* @__PURE__ */ jsx(SpotlightCardItem, {
+				borderRadius,
+				className: CHILDREN_CLASSNAME,
+				size,
+				children: /* @__PURE__ */ jsx(Content, { ...item })
+			}, index);
+		})
+	});
+});
+SpotlightCard.displayName = "SpotlightCard";
+//#endregion
+export { SpotlightCard as default };
+
+//# sourceMappingURL=SpotlightCard.mjs.map

package/es/awesome/SpotlightCard/SpotlightCard.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpotlightCard.mjs","names":[],"sources":["../../../src/awesome/SpotlightCard/SpotlightCard.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { cx } from 'antd-style';\r\nimport { memo, useEffect, useMemo, useRef } from 'react';\r\n\r\nimport Grid from '@/Grid';\r\n\r\nimport SpotlightCardItem from './SpotlightCardItem';\r\nimport { CHILDREN_CLASSNAME, styles } from './style';\r\nimport type { SpotlightCardProps } from './type';\r\n\r\nconst SpotlightCard = memo<SpotlightCardProps>(\r\n  ({\r\n    items,\r\n    renderItem: Content,\r\n    maxItemWidth,\r\n    className,\r\n    columns = 3,\r\n    gap = '1em',\r\n    style,\r\n    size = 800,\r\n    borderRadius = 12,\r\n    spotlight = true,\r\n    ...rest\r\n  }) => {\r\n    const cssVariables = useMemo<Record<string, string>>(\r\n      () => ({\r\n        '--spotlight-card-border-radius': `${borderRadius}px`,\r\n        '--spotlight-card-size': `${size}px`,\r\n      }),\r\n      [borderRadius, size],\r\n    );\r\n    const ref = useRef<HTMLDivElement>(null);\r\n\r\n    useEffect(() => {\r\n      if (!ref.current) return;\r\n      if (!spotlight) return;\r\n      const fn = (e: MouseEvent) => {\r\n        for (const card of document.querySelectorAll(`.${CHILDREN_CLASSNAME}`)) {\r\n          const rect = card.getBoundingClientRect(),\r\n            x = e.clientX - rect.left,\r\n            y = e.clientY - rect.top;\r\n\r\n          (card as HTMLDivElement).style.setProperty('--mouse-x', `${x}px`);\r\n          (card as HTMLDivElement).style.setProperty('--mouse-y', `${y}px`);\r\n        }\r\n      };\r\n      ref.current.addEventListener('mousemove', fn);\r\n\r\n      return () => {\r\n        ref.current?.removeEventListener('mousemove', fn);\r\n      };\r\n    }, []);\r\n\r\n    return (\r\n      <Grid\r\n        className={cx(styles.container, styles.grid, className)}\r\n        gap={gap}\r\n        maxItemWidth={maxItemWidth}\r\n        ref={ref}\r\n        rows={columns}\r\n        style={{\r\n          ...cssVariables,\r\n          ...style,\r\n        }}\r\n        {...rest}\r\n      >\r\n        {items.map((item, index) => {\r\n          return (\r\n            <SpotlightCardItem\r\n              borderRadius={borderRadius}\r\n              className={CHILDREN_CLASSNAME}\r\n              key={index}\r\n              size={size}\r\n            >\r\n              <Content {...item} />\r\n            </SpotlightCardItem>\r\n          );\r\n        })}\r\n      </Grid>\r\n    );\r\n  },\r\n);\r\n\r\nSpotlightCard.displayName = 'SpotlightCard';\r\n\r\nexport default SpotlightCard;\r\n"],"mappings":";;;;;;;;AAWA,MAAM,gBAAgB,MACnB,EACC,OACA,YAAY,SACZ,cACA,WACA,UAAU,GACV,MAAM,OACN,OACA,OAAO,KACP,eAAe,IACf,YAAY,MACZ,GAAG,WACC;CACJ,MAAM,eAAe,eACZ;EACL,kCAAkC,GAAG,aAAa;EAClD,yBAAyB,GAAG,KAAK;CACnC,IACA,CAAC,cAAc,IAAI,CACrB;CACA,MAAM,MAAM,OAAuB,IAAI;CAEvC,gBAAgB;EACd,IAAI,CAAC,IAAI,SAAS;EAClB,IAAI,CAAC,WAAW;EAChB,MAAM,MAAM,MAAkB;GAC5B,KAAK,MAAM,QAAQ,SAAS,iBAAiB,IAAI,oBAAoB,GAAG;IACtE,MAAM,OAAO,KAAK,sBAAsB,GACtC,IAAI,EAAE,UAAU,KAAK,MACrB,IAAI,EAAE,UAAU,KAAK;IAEvB,KAAyB,MAAM,YAAY,aAAa,GAAG,EAAE,GAAG;IAChE,KAAyB,MAAM,YAAY,aAAa,GAAG,EAAE,GAAG;GAClE;EACF;EACA,IAAI,QAAQ,iBAAiB,aAAa,EAAE;EAE5C,aAAa;GACX,IAAI,SAAS,oBAAoB,aAAa,EAAE;EAClD;CACF,GAAG,CAAC,CAAC;CAEL,OACE,oBAAC,MAAD;EACE,WAAW,GAAG,OAAO,WAAW,OAAO,MAAM,SAAS;EACjD;EACS;EACT;EACL,MAAM;EACN,OAAO;GACL,GAAG;GACH,GAAG;EACL;EACA,GAAI;EAEH,UAAA,MAAM,KAAK,MAAM,UAAU;GAC1B,OACE,oBAAC,mBAAD;IACgB;IACd,WAAW;IAEL;IAEN,UAAA,oBAAC,SAAD,EAAS,GAAI,KAAO,CAAA;GACH,GAJZ,KAIY;EAEvB,CAAC;CACG,CAAA;AAEV,CACF;AAEA,cAAc,cAAc"}

package/es/awesome/SpotlightCard/SpotlightCardItem.mjs

@@ -0,0 +1,32 @@
+"use client";
+import FlexBasic_default from "../../Flex/FlexBasic.mjs";
+import { styles } from "./style.mjs";
+import { memo, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+import { cx, useThemeMode } from "antd-style";
+//#region src/awesome/SpotlightCard/SpotlightCardItem.tsx
+const SpotlightCardItem = memo(({ children, className, style, borderRadius, size, ...rest }) => {
+	const { isDarkMode } = useThemeMode();
+	const cssVariables = useMemo(() => ({
+		"--spotlight-card-border-radius": `${borderRadius}px`,
+		"--spotlight-card-size": `${size}px`
+	}), [borderRadius, size]);
+	return /* @__PURE__ */ jsx(FlexBasic_default, {
+		className: cx(isDarkMode ? styles.itemContainerDark : styles.itemContainerLight, className),
+		style: {
+			...cssVariables,
+			borderRadius,
+			...style
+		},
+		...rest,
+		children: /* @__PURE__ */ jsx(FlexBasic_default, {
+			className: styles.content,
+			children
+		})
+	});
+});
+SpotlightCardItem.displayName = "SpotlightCardItem";
+//#endregion
+export { SpotlightCardItem as default };
+
+//# sourceMappingURL=SpotlightCardItem.mjs.map

package/es/awesome/SpotlightCard/SpotlightCardItem.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpotlightCardItem.mjs","names":["Flexbox"],"sources":["../../../src/awesome/SpotlightCard/SpotlightCardItem.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { cx, useThemeMode } from 'antd-style';\r\nimport { memo, useMemo } from 'react';\r\n\r\nimport { Flexbox } from '@/Flex';\r\n\r\nimport { styles } from './style';\r\nimport type { SpotlightCardItemProps } from './type';\r\n\r\nconst SpotlightCardItem = memo<SpotlightCardItemProps>(\r\n  ({ children, className, style, borderRadius, size, ...rest }) => {\r\n    const { isDarkMode } = useThemeMode();\r\n\r\n    const cssVariables = useMemo<Record<string, string>>(\r\n      () => ({\r\n        '--spotlight-card-border-radius': `${borderRadius}px`,\r\n        '--spotlight-card-size': `${size}px`,\r\n      }),\r\n      [borderRadius, size],\r\n    );\r\n\r\n    return (\r\n      <Flexbox\r\n        className={cx(isDarkMode ? styles.itemContainerDark : styles.itemContainerLight, className)}\r\n        style={{\r\n          ...cssVariables,\r\n          borderRadius,\r\n          ...style,\r\n        }}\r\n        {...rest}\r\n      >\r\n        <Flexbox className={styles.content}>{children}</Flexbox>\r\n      </Flexbox>\r\n    );\r\n  },\r\n);\r\n\r\nSpotlightCardItem.displayName = 'SpotlightCardItem';\r\n\r\nexport default SpotlightCardItem;\r\n"],"mappings":";;;;;;;AAUA,MAAM,oBAAoB,MACvB,EAAE,UAAU,WAAW,OAAO,cAAc,MAAM,GAAG,WAAW;CAC/D,MAAM,EAAE,eAAe,aAAa;CAEpC,MAAM,eAAe,eACZ;EACL,kCAAkC,GAAG,aAAa;EAClD,yBAAyB,GAAG,KAAK;CACnC,IACA,CAAC,cAAc,IAAI,CACrB;CAEA,OACE,oBAACA,mBAAD;EACE,WAAW,GAAG,aAAa,OAAO,oBAAoB,OAAO,oBAAoB,SAAS;EAC1F,OAAO;GACL,GAAG;GACH;GACA,GAAG;EACL;EACA,GAAI;EAEJ,UAAA,oBAACA,mBAAD;GAAS,WAAW,OAAO;GAAU;EAAkB,CAAA;CAChD,CAAA;AAEb,CACF;AAEA,kBAAkB,cAAc"}

package/es/awesome/SpotlightCard/index.d.mts

@@ -0,0 +1,3 @@
+import { SpotlightCardProps } from "./type.mjs";
+import SpotlightCard from "./SpotlightCard.mjs";
+export { type SpotlightCardProps, SpotlightCard as default };

package/es/awesome/SpotlightCard/style.mjs

@@ -0,0 +1,139 @@
+import { createStaticStyles, responsive } from "antd-style";
+//#region src/awesome/SpotlightCard/style.ts
+const CHILDREN_CLASSNAME = "hover-card";
+const styles = createStaticStyles(({ css, cssVar }) => ({
+	container: css`
+    &:hover > .${CHILDREN_CLASSNAME}::after {
+      opacity: 1;
+    }
+  `,
+	content: css`
+    z-index: 2;
+
+    flex-grow: 1;
+
+    height: 100%;
+    margin: 1px;
+    border-radius: calc(var(--spotlight-card-border-radius, 12px) - 1px);
+
+    background: ${cssVar.colorBgContainer};
+  `,
+	grid: css`
+    display: grid;
+
+    ${responsive.sm} {
+      display: flex;
+      flex-direction: column;
+    }
+  `,
+	itemContainerDark: css`
+    cursor: pointer;
+
+    position: relative;
+
+    overflow: hidden;
+
+    width: 100%;
+    border-radius: var(--spotlight-card-border-radius, 12px);
+
+    background: color-mix(in srgb, ${cssVar.colorBorderSecondary} 75%, transparent);
+
+    &::before,
+    &::after {
+      content: '';
+
+      position: absolute;
+      inset-block-start: 0;
+      inset-inline-start: 0;
+
+      width: 100%;
+      height: 100%;
+      border-radius: inherit;
+
+      opacity: 0;
+
+      transition: opacity 500ms;
+    }
+
+    &::before {
+      pointer-events: none;
+      user-select: none;
+      z-index: 3;
+      background: radial-gradient(
+        var(--spotlight-card-size, 800px) circle at var(--mouse-x) var(--mouse-y),
+        color-mix(in srgb, ${cssVar.colorTextBase} 6%, transparent),
+        transparent 40%
+      );
+    }
+
+    &::after {
+      z-index: 1;
+      background: radial-gradient(
+        calc(var(--spotlight-card-size, 800px) * 0.75) circle at var(--mouse-x) var(--mouse-y),
+        color-mix(in srgb, ${cssVar.colorTextBase} 40%, transparent),
+        transparent 40%
+      );
+    }
+
+    :hover::before {
+      opacity: 1;
+    }
+  `,
+	itemContainerLight: css`
+    cursor: pointer;
+
+    position: relative;
+
+    overflow: hidden;
+
+    width: 100%;
+    border-radius: var(--spotlight-card-border-radius, 12px);
+
+    background: color-mix(in srgb, ${cssVar.colorBorderSecondary} 75%, transparent);
+
+    &::before,
+    &::after {
+      content: '';
+
+      position: absolute;
+      inset-block-start: 0;
+      inset-inline-start: 0;
+
+      width: 100%;
+      height: 100%;
+      border-radius: inherit;
+
+      opacity: 0;
+
+      transition: opacity 500ms;
+    }
+
+    &::before {
+      pointer-events: none;
+      user-select: none;
+      z-index: 3;
+      background: radial-gradient(
+        var(--spotlight-card-size, 800px) circle at var(--mouse-x) var(--mouse-y),
+        color-mix(in srgb, ${cssVar.colorTextBase} 2%, transparent),
+        transparent 40%
+      );
+    }
+
+    &::after {
+      z-index: 1;
+      background: radial-gradient(
+        calc(var(--spotlight-card-size, 800px) * 0.75) circle at var(--mouse-x) var(--mouse-y),
+        color-mix(in srgb, ${cssVar.colorTextBase} 20%, transparent),
+        transparent 40%
+      );
+    }
+
+    :hover::before {
+      opacity: 1;
+    }
+  `
+}));
+//#endregion
+export { CHILDREN_CLASSNAME, styles };
+
+//# sourceMappingURL=style.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/awesome/SpotlightCard/style.ts"],"sourcesContent":["import { createStaticStyles, responsive } from 'antd-style';\r\n\r\nexport const CHILDREN_CLASSNAME = 'hover-card';\r\n\r\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\r\n  container: css`\r\n    &:hover > .${CHILDREN_CLASSNAME}::after {\r\n      opacity: 1;\r\n    }\r\n  `,\r\n\r\n  content: css`\r\n    z-index: 2;\r\n\r\n    flex-grow: 1;\r\n\r\n    height: 100%;\r\n    margin: 1px;\r\n    border-radius: calc(var(--spotlight-card-border-radius, 12px) - 1px);\r\n\r\n    background: ${cssVar.colorBgContainer};\r\n  `,\r\n  grid: css`\r\n    display: grid;\r\n\r\n    ${responsive.sm} {\r\n      display: flex;\r\n      flex-direction: column;\r\n    }\r\n  `,\r\n  itemContainerDark: css`\r\n    cursor: pointer;\r\n\r\n    position: relative;\r\n\r\n    overflow: hidden;\r\n\r\n    width: 100%;\r\n    border-radius: var(--spotlight-card-border-radius, 12px);\r\n\r\n    background: color-mix(in srgb, ${cssVar.colorBorderSecondary} 75%, transparent);\r\n\r\n    &::before,\r\n    &::after {\r\n      content: '';\r\n\r\n      position: absolute;\r\n      inset-block-start: 0;\r\n      inset-inline-start: 0;\r\n\r\n      width: 100%;\r\n      height: 100%;\r\n      border-radius: inherit;\r\n\r\n      opacity: 0;\r\n\r\n      transition: opacity 500ms;\r\n    }\r\n\r\n    &::before {\r\n      pointer-events: none;\r\n      user-select: none;\r\n      z-index: 3;\r\n      background: radial-gradient(\r\n        var(--spotlight-card-size, 800px) circle at var(--mouse-x) var(--mouse-y),\r\n        color-mix(in srgb, ${cssVar.colorTextBase} 6%, transparent),\r\n        transparent 40%\r\n      );\r\n    }\r\n\r\n    &::after {\r\n      z-index: 1;\r\n      background: radial-gradient(\r\n        calc(var(--spotlight-card-size, 800px) * 0.75) circle at var(--mouse-x) var(--mouse-y),\r\n        color-mix(in srgb, ${cssVar.colorTextBase} 40%, transparent),\r\n        transparent 40%\r\n      );\r\n    }\r\n\r\n    :hover::before {\r\n      opacity: 1;\r\n    }\r\n  `,\r\n\r\n  itemContainerLight: css`\r\n    cursor: pointer;\r\n\r\n    position: relative;\r\n\r\n    overflow: hidden;\r\n\r\n    width: 100%;\r\n    border-radius: var(--spotlight-card-border-radius, 12px);\r\n\r\n    background: color-mix(in srgb, ${cssVar.colorBorderSecondary} 75%, transparent);\r\n\r\n    &::before,\r\n    &::after {\r\n      content: '';\r\n\r\n      position: absolute;\r\n      inset-block-start: 0;\r\n      inset-inline-start: 0;\r\n\r\n      width: 100%;\r\n      height: 100%;\r\n      border-radius: inherit;\r\n\r\n      opacity: 0;\r\n\r\n      transition: opacity 500ms;\r\n    }\r\n\r\n    &::before {\r\n      pointer-events: none;\r\n      user-select: none;\r\n      z-index: 3;\r\n      background: radial-gradient(\r\n        var(--spotlight-card-size, 800px) circle at var(--mouse-x) var(--mouse-y),\r\n        color-mix(in srgb, ${cssVar.colorTextBase} 2%, transparent),\r\n        transparent 40%\r\n      );\r\n    }\r\n\r\n    &::after {\r\n      z-index: 1;\r\n      background: radial-gradient(\r\n        calc(var(--spotlight-card-size, 800px) * 0.75) circle at var(--mouse-x) var(--mouse-y),\r\n        color-mix(in srgb, ${cssVar.colorTextBase} 20%, transparent),\r\n        transparent 40%\r\n      );\r\n    }\r\n\r\n    :hover::before {\r\n      opacity: 1;\r\n    }\r\n  `,\r\n}));\r\n"],"mappings":";;AAEA,MAAa,qBAAqB;AAElC,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,WAAW,GAAG;iBACC,mBAAmB;;;;CAKlC,SAAS,GAAG;;;;;;;;;kBASI,OAAO,iBAAiB;;CAExC,MAAM,GAAG;;;MAGL,WAAW,GAAG;;;;;CAKlB,mBAAmB,GAAG;;;;;;;;;;qCAUa,OAAO,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;6BAyBpC,OAAO,cAAc;;;;;;;;;6BASrB,OAAO,cAAc;;;;;;;;;CAUhD,oBAAoB,GAAG;;;;;;;;;;qCAUY,OAAO,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;6BAyBpC,OAAO,cAAc;;;;;;;;;6BASrB,OAAO,cAAc;;;;;;;;;AASlD,EAAE"}

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

@@ -0,0 +1,16 @@
+import { DivProps } from "../../types/index.mjs";
+import { ReactNode } from "react";
+//#region src/awesome/SpotlightCard/type.d.ts
+interface SpotlightCardProps<T = any> extends DivProps {
+  borderRadius?: number;
+  columns?: number;
+  gap?: number | string;
+  items: T[];
+  maxItemWidth?: string | number;
+  renderItem: (item: T) => ReactNode;
+  size?: number;
+  spotlight?: boolean;
+}
+//#endregion
+export { SpotlightCardProps };
+//# sourceMappingURL=type.d.mts.map

package/es/awesome/TypewriterEffect/TypewriterEffect.d.mts

@@ -0,0 +1,6 @@
+import { TypewriterEffectProps } from "./type.mjs";
+//#region src/awesome/TypewriterEffect/TypewriterEffect.d.ts
+declare const TypewriterEffect: import("react").NamedExoticComponent<TypewriterEffectProps>;
+//#endregion
+export { TypewriterEffect as default };
+//# sourceMappingURL=TypewriterEffect.d.mts.map