@lobehub/ui 6.0.0-beta.1 → 6.0.0-beta.11

package/es/awesome/Grainient/Grainient.mjs

@@ -0,0 +1,314 @@
+"use client";
+import { styleProps } from "../../styles/stylex/props.mjs";
+import { useThemeMode } from "../../styles/theme/scope.mjs";
+import { styles } from "./style.mjs";
+import { memo, useEffect, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import * as stylex from "@stylexjs/stylex";
+//#region src/awesome/Grainient/Grainient.tsx
+const VERTEX_SHADER = `#version 300 es
+in vec2 position;
+void main() {
+  gl_Position = vec4(position, 0.0, 1.0);
+}
+`;
+const FRAGMENT_SHADER = `#version 300 es
+precision highp float;
+uniform vec2 iResolution;
+uniform float iTime;
+uniform float uTimeSpeed;
+uniform float uColorBalance;
+uniform float uWarpStrength;
+uniform float uWarpFrequency;
+uniform float uWarpSpeed;
+uniform float uWarpAmplitude;
+uniform float uBlendAngle;
+uniform float uBlendSoftness;
+uniform float uRotationAmount;
+uniform float uNoiseScale;
+uniform float uGrainAmount;
+uniform float uGrainScale;
+uniform float uGrainAnimated;
+uniform float uContrast;
+uniform float uGamma;
+uniform float uSaturation;
+uniform vec2 uCenterOffset;
+uniform float uZoom;
+uniform vec3 uColor1;
+uniform vec3 uColor2;
+uniform vec3 uColor3;
+uniform float uLightMode;
+out vec4 fragColor;
+#define S(a,b,t) smoothstep(a,b,t)
+mat2 Rot(float a){float s=sin(a),c=cos(a);return mat2(c,-s,s,c);}
+vec2 hash(vec2 p){p=vec2(dot(p,vec2(2127.1,81.17)),dot(p,vec2(1269.5,283.37)));return fract(sin(p)*43758.5453);}
+float noise(vec2 p){vec2 i=floor(p),f=fract(p),u=f*f*(3.0-2.0*f);float n=mix(mix(dot(-1.0+2.0*hash(i+vec2(0.0,0.0)),f-vec2(0.0,0.0)),dot(-1.0+2.0*hash(i+vec2(1.0,0.0)),f-vec2(1.0,0.0)),u.x),mix(dot(-1.0+2.0*hash(i+vec2(0.0,1.0)),f-vec2(0.0,1.0)),dot(-1.0+2.0*hash(i+vec2(1.0,1.0)),f-vec2(1.0,1.0)),u.x),u.y);return 0.5+0.5*n;}
+void mainImage(out vec4 o, vec2 C){
+  float t=iTime*uTimeSpeed;
+  vec2 uv=C/iResolution.xy;
+  float ratio=iResolution.x/iResolution.y;
+  vec2 tuv=uv-0.5+uCenterOffset;
+  tuv/=max(uZoom,0.001);
+
+  float degree=noise(vec2(t*0.1,tuv.x*tuv.y)*uNoiseScale);
+  tuv.y*=1.0/ratio;
+  tuv*=Rot(radians((degree-0.5)*uRotationAmount+180.0));
+  tuv.y*=ratio;
+
+  float frequency=uWarpFrequency;
+  float ws=max(uWarpStrength,0.001);
+  float amplitude=uWarpAmplitude/ws;
+  float warpTime=t*uWarpSpeed;
+  tuv.x+=sin(tuv.y*frequency+warpTime)/amplitude;
+  tuv.y+=sin(tuv.x*(frequency*1.5)+warpTime)/(amplitude*0.5);
+
+  vec3 colLav=uColor1;
+  vec3 colOrg=uColor2;
+  vec3 colDark=uColor3;
+  float b=uColorBalance;
+  float s=max(uBlendSoftness,0.0);
+  mat2 blendRot=Rot(radians(uBlendAngle));
+  float blendX=(tuv*blendRot).x;
+  float edge0=-0.3-b-s;
+  float edge1=0.2-b+s;
+  float v0=0.5-b+s;
+  float v1=-0.3-b-s;
+  vec3 layer1=mix(colDark,colOrg,S(edge0,edge1,blendX));
+  vec3 layer2=mix(colOrg,colLav,S(edge0,edge1,blendX));
+  vec3 col=mix(layer1,layer2,S(v0,v1,tuv.y));
+
+  vec2 grainUv=uv*max(uGrainScale,0.001);
+  if(uGrainAnimated>0.5){grainUv+=vec2(iTime*0.05);}
+  float grain=fract(sin(dot(grainUv,vec2(12.9898,78.233)))*43758.5453);
+  col+=(grain-0.5)*uGrainAmount;
+
+  col=(col-0.5)*uContrast+0.5;
+  float luma=dot(col,vec3(0.2126,0.7152,0.0722));
+  col=mix(vec3(luma),col,uSaturation);
+  col=pow(max(col,0.0),vec3(1.0/max(uGamma,0.001)));
+  col=clamp(col,0.0,1.0);
+  if(uLightMode>0.5){
+    float energy=max(max(col.r,col.g),col.b);
+    vec3 hue=col/max(energy,0.001);
+    float chroma=length(col-vec3(dot(col,vec3(0.333333))));
+    float coverage=clamp(0.12+chroma*1.15+energy*0.18,0.0,0.88);
+    col=mix(vec3(1.0),clamp(hue*0.58+col*0.18,0.0,1.0),coverage);
+  }
+
+  o=vec4(col,1.0);
+}
+void main(){
+  vec4 o=vec4(0.0);
+  mainImage(o,gl_FragCoord.xy);
+  fragColor=o;
+}
+`;
+const hexToRgb = (hex) => {
+	let value = hex.trim().replace("#", "");
+	if (value.length === 3) value = [...value].map((c) => c + c).join("");
+	const result = /^([\da-f]{2})([\da-f]{2})([\da-f]{2})$/i.exec(value);
+	if (!result) return [
+		1,
+		1,
+		1
+	];
+	return [
+		Number.parseInt(result[1], 16) / 255,
+		Number.parseInt(result[2], 16) / 255,
+		Number.parseInt(result[3], 16) / 255
+	];
+};
+const compile = (gl, type, source) => {
+	const shader = gl.createShader(type);
+	if (!shader) return null;
+	gl.shaderSource(shader, source);
+	gl.compileShader(shader);
+	if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+		gl.deleteShader(shader);
+		return null;
+	}
+	return shader;
+};
+/**
+* Animated grainy gradient (WebGL2, no extra dependency). Fills its nearest positioned ancestor,
+* pauses when off-screen or the tab is hidden, and draws one still frame when reduced motion is
+* preferred. Without WebGL2 it renders nothing, so give the parent a fallback background.
+*/
+const Grainient = memo(({ timeSpeed = .25, colorBalance = 0, warpStrength = 1, warpFrequency = 5, warpSpeed = 2, warpAmplitude = 50, blendAngle = 0, blendSoftness = .05, rotationAmount = 500, noiseScale = 2, grainAmount = .1, grainScale = 2, contrast = 1.5, gamma = 1, saturation = 1, zoom = .9, centerX = 0, centerY = 0, color1 = "#FF9FFC", color2 = "#5227FF", color3 = "#B497CF", grainAnimated = false, lightMode = false, className, style, ...rest }) => {
+	const containerRef = useRef(null);
+	const drawRef = useRef(null);
+	const uniformsRef = useRef(null);
+	const { isDarkMode } = useThemeMode();
+	const light = lightMode === "auto" ? !isDarkMode : lightMode;
+	useEffect(() => {
+		const container = containerRef.current;
+		if (!container) return;
+		const canvas = document.createElement("canvas");
+		canvas.className = stylex.props(styles.canvas).className ?? "";
+		const gl = canvas.getContext("webgl2", {
+			alpha: true,
+			antialias: false
+		});
+		if (!gl) return;
+		container.append(canvas);
+		const vs = compile(gl, gl.VERTEX_SHADER, VERTEX_SHADER);
+		const fs = compile(gl, gl.FRAGMENT_SHADER, FRAGMENT_SHADER);
+		const program = gl.createProgram();
+		if (!vs || !fs || !program) {
+			canvas.remove();
+			return;
+		}
+		gl.attachShader(program, vs);
+		gl.attachShader(program, fs);
+		gl.linkProgram(program);
+		if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+			canvas.remove();
+			return;
+		}
+		gl.useProgram(program);
+		const buffer = gl.createBuffer();
+		gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+		gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
+			-1,
+			-1,
+			3,
+			-1,
+			-1,
+			3
+		]), gl.STATIC_DRAW);
+		const position = gl.getAttribLocation(program, "position");
+		gl.enableVertexAttribArray(position);
+		gl.vertexAttribPointer(position, 2, gl.FLOAT, false, 0, 0);
+		const loc = (name) => gl.getUniformLocation(program, name);
+		const uTime = loc("iTime");
+		const uRes = loc("iResolution");
+		const started = performance.now();
+		const draw = () => {
+			gl.uniform1f(uTime, (performance.now() - started) * .001);
+			gl.drawArrays(gl.TRIANGLES, 0, 3);
+		};
+		drawRef.current = draw;
+		uniformsRef.current?.();
+		const setSize = () => {
+			const rect = container.getBoundingClientRect();
+			const dpr = Math.min(window.devicePixelRatio || 1, 2);
+			canvas.width = Math.max(1, Math.floor(rect.width * dpr));
+			canvas.height = Math.max(1, Math.floor(rect.height * dpr));
+			gl.viewport(0, 0, canvas.width, canvas.height);
+			gl.uniform2f(uRes, canvas.width, canvas.height);
+			draw();
+		};
+		const reducedMotion = window.matchMedia?.("(prefers-reduced-motion: reduce)");
+		let raf = 0;
+		let inView = true;
+		const loop = () => {
+			draw();
+			raf = requestAnimationFrame(loop);
+		};
+		const stop = () => {
+			if (raf) cancelAnimationFrame(raf);
+			raf = 0;
+		};
+		const sync = () => {
+			const run = inView && !document.hidden && !reducedMotion?.matches;
+			if (run && !raf) raf = requestAnimationFrame(loop);
+			if (!run) {
+				stop();
+				draw();
+			}
+		};
+		const resizeObserver = new ResizeObserver(setSize);
+		resizeObserver.observe(container);
+		const intersectionObserver = new IntersectionObserver(([entry]) => {
+			inView = entry.isIntersecting;
+			sync();
+		});
+		intersectionObserver.observe(container);
+		document.addEventListener("visibilitychange", sync);
+		reducedMotion?.addEventListener("change", sync);
+		setSize();
+		sync();
+		return () => {
+			stop();
+			resizeObserver.disconnect();
+			intersectionObserver.disconnect();
+			document.removeEventListener("visibilitychange", sync);
+			reducedMotion?.removeEventListener("change", sync);
+			drawRef.current = null;
+			gl.deleteBuffer(buffer);
+			gl.deleteProgram(program);
+			gl.deleteShader(vs);
+			gl.deleteShader(fs);
+			canvas.remove();
+		};
+	}, []);
+	useEffect(() => {
+		const apply = () => {
+			const gl = (containerRef.current?.querySelector("canvas"))?.getContext("webgl2");
+			if (!gl) return;
+			const program = gl.getParameter(gl.CURRENT_PROGRAM);
+			if (!program) return;
+			const loc = (name) => gl.getUniformLocation(program, name);
+			gl.uniform1f(loc("uTimeSpeed"), timeSpeed);
+			gl.uniform1f(loc("uColorBalance"), colorBalance);
+			gl.uniform1f(loc("uWarpStrength"), warpStrength);
+			gl.uniform1f(loc("uWarpFrequency"), warpFrequency);
+			gl.uniform1f(loc("uWarpSpeed"), warpSpeed);
+			gl.uniform1f(loc("uWarpAmplitude"), warpAmplitude);
+			gl.uniform1f(loc("uBlendAngle"), blendAngle);
+			gl.uniform1f(loc("uBlendSoftness"), blendSoftness);
+			gl.uniform1f(loc("uRotationAmount"), rotationAmount);
+			gl.uniform1f(loc("uNoiseScale"), noiseScale);
+			gl.uniform1f(loc("uGrainAmount"), grainAmount);
+			gl.uniform1f(loc("uGrainScale"), grainScale);
+			gl.uniform1f(loc("uContrast"), contrast);
+			gl.uniform1f(loc("uGamma"), gamma);
+			gl.uniform1f(loc("uSaturation"), saturation);
+			gl.uniform1f(loc("uZoom"), zoom);
+			gl.uniform1f(loc("uGrainAnimated"), grainAnimated ? 1 : 0);
+			gl.uniform1f(loc("uLightMode"), light ? 1 : 0);
+			gl.uniform2f(loc("uCenterOffset"), centerX, centerY);
+			gl.uniform3f(loc("uColor1"), ...hexToRgb(color1));
+			gl.uniform3f(loc("uColor2"), ...hexToRgb(color2));
+			gl.uniform3f(loc("uColor3"), ...hexToRgb(color3));
+			drawRef.current?.();
+		};
+		uniformsRef.current = apply;
+		apply();
+	}, [
+		timeSpeed,
+		colorBalance,
+		warpStrength,
+		warpFrequency,
+		warpSpeed,
+		warpAmplitude,
+		blendAngle,
+		blendSoftness,
+		rotationAmount,
+		noiseScale,
+		grainAmount,
+		grainScale,
+		contrast,
+		gamma,
+		saturation,
+		zoom,
+		centerX,
+		centerY,
+		color1,
+		color2,
+		color3,
+		grainAnimated,
+		light
+	]);
+	return /* @__PURE__ */ jsx("div", {
+		"aria-hidden": true,
+		ref: containerRef,
+		...rest,
+		...styleProps(styles.root, className, style)
+	});
+});
+Grainient.displayName = "Grainient";
+//#endregion
+export { Grainient as default, hexToRgb };
+
+//# sourceMappingURL=Grainient.mjs.map

package/es/awesome/Grainient/Grainient.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Grainient.mjs","names":[],"sources":["../../../src/awesome/Grainient/Grainient.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport { memo, useEffect, useRef } from 'react';\n\nimport { styleProps } from '@/styles/stylex/props';\nimport { useThemeMode } from '@/styles/theme/scope';\n\nimport { styles } from './style';\nimport type { GrainientProps } from './type';\n\nconst VERTEX_SHADER = `#version 300 es\nin vec2 position;\nvoid main() {\n  gl_Position = vec4(position, 0.0, 1.0);\n}\n`;\n\nconst FRAGMENT_SHADER = `#version 300 es\nprecision highp float;\nuniform vec2 iResolution;\nuniform float iTime;\nuniform float uTimeSpeed;\nuniform float uColorBalance;\nuniform float uWarpStrength;\nuniform float uWarpFrequency;\nuniform float uWarpSpeed;\nuniform float uWarpAmplitude;\nuniform float uBlendAngle;\nuniform float uBlendSoftness;\nuniform float uRotationAmount;\nuniform float uNoiseScale;\nuniform float uGrainAmount;\nuniform float uGrainScale;\nuniform float uGrainAnimated;\nuniform float uContrast;\nuniform float uGamma;\nuniform float uSaturation;\nuniform vec2 uCenterOffset;\nuniform float uZoom;\nuniform vec3 uColor1;\nuniform vec3 uColor2;\nuniform vec3 uColor3;\nuniform float uLightMode;\nout vec4 fragColor;\n#define S(a,b,t) smoothstep(a,b,t)\nmat2 Rot(float a){float s=sin(a),c=cos(a);return mat2(c,-s,s,c);}\nvec2 hash(vec2 p){p=vec2(dot(p,vec2(2127.1,81.17)),dot(p,vec2(1269.5,283.37)));return fract(sin(p)*43758.5453);}\nfloat noise(vec2 p){vec2 i=floor(p),f=fract(p),u=f*f*(3.0-2.0*f);float n=mix(mix(dot(-1.0+2.0*hash(i+vec2(0.0,0.0)),f-vec2(0.0,0.0)),dot(-1.0+2.0*hash(i+vec2(1.0,0.0)),f-vec2(1.0,0.0)),u.x),mix(dot(-1.0+2.0*hash(i+vec2(0.0,1.0)),f-vec2(0.0,1.0)),dot(-1.0+2.0*hash(i+vec2(1.0,1.0)),f-vec2(1.0,1.0)),u.x),u.y);return 0.5+0.5*n;}\nvoid mainImage(out vec4 o, vec2 C){\n  float t=iTime*uTimeSpeed;\n  vec2 uv=C/iResolution.xy;\n  float ratio=iResolution.x/iResolution.y;\n  vec2 tuv=uv-0.5+uCenterOffset;\n  tuv/=max(uZoom,0.001);\n\n  float degree=noise(vec2(t*0.1,tuv.x*tuv.y)*uNoiseScale);\n  tuv.y*=1.0/ratio;\n  tuv*=Rot(radians((degree-0.5)*uRotationAmount+180.0));\n  tuv.y*=ratio;\n\n  float frequency=uWarpFrequency;\n  float ws=max(uWarpStrength,0.001);\n  float amplitude=uWarpAmplitude/ws;\n  float warpTime=t*uWarpSpeed;\n  tuv.x+=sin(tuv.y*frequency+warpTime)/amplitude;\n  tuv.y+=sin(tuv.x*(frequency*1.5)+warpTime)/(amplitude*0.5);\n\n  vec3 colLav=uColor1;\n  vec3 colOrg=uColor2;\n  vec3 colDark=uColor3;\n  float b=uColorBalance;\n  float s=max(uBlendSoftness,0.0);\n  mat2 blendRot=Rot(radians(uBlendAngle));\n  float blendX=(tuv*blendRot).x;\n  float edge0=-0.3-b-s;\n  float edge1=0.2-b+s;\n  float v0=0.5-b+s;\n  float v1=-0.3-b-s;\n  vec3 layer1=mix(colDark,colOrg,S(edge0,edge1,blendX));\n  vec3 layer2=mix(colOrg,colLav,S(edge0,edge1,blendX));\n  vec3 col=mix(layer1,layer2,S(v0,v1,tuv.y));\n\n  vec2 grainUv=uv*max(uGrainScale,0.001);\n  if(uGrainAnimated>0.5){grainUv+=vec2(iTime*0.05);}\n  float grain=fract(sin(dot(grainUv,vec2(12.9898,78.233)))*43758.5453);\n  col+=(grain-0.5)*uGrainAmount;\n\n  col=(col-0.5)*uContrast+0.5;\n  float luma=dot(col,vec3(0.2126,0.7152,0.0722));\n  col=mix(vec3(luma),col,uSaturation);\n  col=pow(max(col,0.0),vec3(1.0/max(uGamma,0.001)));\n  col=clamp(col,0.0,1.0);\n  if(uLightMode>0.5){\n    float energy=max(max(col.r,col.g),col.b);\n    vec3 hue=col/max(energy,0.001);\n    float chroma=length(col-vec3(dot(col,vec3(0.333333))));\n    float coverage=clamp(0.12+chroma*1.15+energy*0.18,0.0,0.88);\n    col=mix(vec3(1.0),clamp(hue*0.58+col*0.18,0.0,1.0),coverage);\n  }\n\n  o=vec4(col,1.0);\n}\nvoid main(){\n  vec4 o=vec4(0.0);\n  mainImage(o,gl_FragCoord.xy);\n  fragColor=o;\n}\n`;\n\nexport const hexToRgb = (hex: string): [number, number, number] => {\n  let value = hex.trim().replace('#', '');\n  if (value.length === 3) value = [...value].map((c) => c + c).join('');\n  const result = /^([\\da-f]{2})([\\da-f]{2})([\\da-f]{2})$/i.exec(value);\n  if (!result) return [1, 1, 1];\n  return [\n    Number.parseInt(result[1], 16) / 255,\n    Number.parseInt(result[2], 16) / 255,\n    Number.parseInt(result[3], 16) / 255,\n  ];\n};\n\nconst compile = (gl: WebGL2RenderingContext, type: number, source: string) => {\n  const shader = gl.createShader(type);\n  if (!shader) return null;\n  gl.shaderSource(shader, source);\n  gl.compileShader(shader);\n  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {\n    gl.deleteShader(shader);\n    return null;\n  }\n  return shader;\n};\n\n/**\n * Animated grainy gradient (WebGL2, no extra dependency). Fills its nearest positioned ancestor,\n * pauses when off-screen or the tab is hidden, and draws one still frame when reduced motion is\n * preferred. Without WebGL2 it renders nothing, so give the parent a fallback background.\n */\nconst Grainient = memo<GrainientProps>(\n  ({\n    timeSpeed = 0.25,\n    colorBalance = 0,\n    warpStrength = 1,\n    warpFrequency = 5,\n    warpSpeed = 2,\n    warpAmplitude = 50,\n    blendAngle = 0,\n    blendSoftness = 0.05,\n    rotationAmount = 500,\n    noiseScale = 2,\n    grainAmount = 0.1,\n    grainScale = 2,\n    contrast = 1.5,\n    gamma = 1,\n    saturation = 1,\n    zoom = 0.9,\n    centerX = 0,\n    centerY = 0,\n    color1 = '#FF9FFC',\n    color2 = '#5227FF',\n    color3 = '#B497CF',\n    grainAnimated = false,\n    lightMode = false,\n    className,\n    style,\n    ...rest\n  }) => {\n    const containerRef = useRef<HTMLDivElement>(null);\n    const drawRef = useRef<(() => void) | null>(null);\n    const uniformsRef = useRef<(() => void) | null>(null);\n    const { isDarkMode } = useThemeMode();\n    const light = lightMode === 'auto' ? !isDarkMode : lightMode;\n\n    useEffect(() => {\n      const container = containerRef.current;\n      if (!container) return;\n\n      const canvas = document.createElement('canvas');\n      canvas.className = stylex.props(styles.canvas).className ?? '';\n      const gl = canvas.getContext('webgl2', { alpha: true, antialias: false });\n      if (!gl) return;\n      container.append(canvas);\n\n      const vs = compile(gl, gl.VERTEX_SHADER, VERTEX_SHADER);\n      const fs = compile(gl, gl.FRAGMENT_SHADER, FRAGMENT_SHADER);\n      const program = gl.createProgram();\n      if (!vs || !fs || !program) {\n        canvas.remove();\n        return;\n      }\n      gl.attachShader(program, vs);\n      gl.attachShader(program, fs);\n      gl.linkProgram(program);\n      if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {\n        canvas.remove();\n        return;\n      }\n      gl.useProgram(program);\n\n      // One triangle that covers the viewport.\n      const buffer = gl.createBuffer();\n      gl.bindBuffer(gl.ARRAY_BUFFER, buffer);\n      gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 3, -1, -1, 3]), gl.STATIC_DRAW);\n      const position = gl.getAttribLocation(program, 'position');\n      gl.enableVertexAttribArray(position);\n      gl.vertexAttribPointer(position, 2, gl.FLOAT, false, 0, 0);\n\n      const loc = (name: string) => gl.getUniformLocation(program, name);\n      const uTime = loc('iTime');\n      const uRes = loc('iResolution');\n      const started = performance.now();\n\n      const draw = () => {\n        gl.uniform1f(uTime, (performance.now() - started) * 0.001);\n        gl.drawArrays(gl.TRIANGLES, 0, 3);\n      };\n      drawRef.current = draw;\n      uniformsRef.current?.();\n\n      const setSize = () => {\n        const rect = container.getBoundingClientRect();\n        const dpr = Math.min(window.devicePixelRatio || 1, 2);\n        canvas.width = Math.max(1, Math.floor(rect.width * dpr));\n        canvas.height = Math.max(1, Math.floor(rect.height * dpr));\n        gl.viewport(0, 0, canvas.width, canvas.height);\n        gl.uniform2f(uRes, canvas.width, canvas.height);\n        draw();\n      };\n\n      const reducedMotion = window.matchMedia?.('(prefers-reduced-motion: reduce)');\n      let raf = 0;\n      let inView = true;\n\n      const loop = () => {\n        draw();\n        raf = requestAnimationFrame(loop);\n      };\n      const stop = () => {\n        if (raf) cancelAnimationFrame(raf);\n        raf = 0;\n      };\n      const sync = () => {\n        const run = inView && !document.hidden && !reducedMotion?.matches;\n        if (run && !raf) raf = requestAnimationFrame(loop);\n        if (!run) {\n          stop();\n          draw();\n        }\n      };\n\n      const resizeObserver = new ResizeObserver(setSize);\n      resizeObserver.observe(container);\n      const intersectionObserver = new IntersectionObserver(([entry]) => {\n        inView = entry.isIntersecting;\n        sync();\n      });\n      intersectionObserver.observe(container);\n      document.addEventListener('visibilitychange', sync);\n      reducedMotion?.addEventListener('change', sync);\n      setSize();\n      sync();\n\n      return () => {\n        stop();\n        resizeObserver.disconnect();\n        intersectionObserver.disconnect();\n        document.removeEventListener('visibilitychange', sync);\n        reducedMotion?.removeEventListener('change', sync);\n        drawRef.current = null;\n        gl.deleteBuffer(buffer);\n        gl.deleteProgram(program);\n        gl.deleteShader(vs);\n        gl.deleteShader(fs);\n        canvas.remove();\n      };\n    }, []);\n\n    useEffect(() => {\n      const apply = () => {\n        const canvas = containerRef.current?.querySelector('canvas');\n        const gl = canvas?.getContext('webgl2');\n        if (!gl) return;\n        const program = gl.getParameter(gl.CURRENT_PROGRAM) as WebGLProgram | null;\n        if (!program) return;\n        const loc = (name: string) => gl.getUniformLocation(program, name);\n        gl.uniform1f(loc('uTimeSpeed'), timeSpeed);\n        gl.uniform1f(loc('uColorBalance'), colorBalance);\n        gl.uniform1f(loc('uWarpStrength'), warpStrength);\n        gl.uniform1f(loc('uWarpFrequency'), warpFrequency);\n        gl.uniform1f(loc('uWarpSpeed'), warpSpeed);\n        gl.uniform1f(loc('uWarpAmplitude'), warpAmplitude);\n        gl.uniform1f(loc('uBlendAngle'), blendAngle);\n        gl.uniform1f(loc('uBlendSoftness'), blendSoftness);\n        gl.uniform1f(loc('uRotationAmount'), rotationAmount);\n        gl.uniform1f(loc('uNoiseScale'), noiseScale);\n        gl.uniform1f(loc('uGrainAmount'), grainAmount);\n        gl.uniform1f(loc('uGrainScale'), grainScale);\n        gl.uniform1f(loc('uContrast'), contrast);\n        gl.uniform1f(loc('uGamma'), gamma);\n        gl.uniform1f(loc('uSaturation'), saturation);\n        gl.uniform1f(loc('uZoom'), zoom);\n        gl.uniform1f(loc('uGrainAnimated'), grainAnimated ? 1 : 0);\n        gl.uniform1f(loc('uLightMode'), light ? 1 : 0);\n        gl.uniform2f(loc('uCenterOffset'), centerX, centerY);\n        gl.uniform3f(loc('uColor1'), ...hexToRgb(color1));\n        gl.uniform3f(loc('uColor2'), ...hexToRgb(color2));\n        gl.uniform3f(loc('uColor3'), ...hexToRgb(color3));\n        drawRef.current?.();\n      };\n      uniformsRef.current = apply;\n      apply();\n    }, [\n      timeSpeed,\n      colorBalance,\n      warpStrength,\n      warpFrequency,\n      warpSpeed,\n      warpAmplitude,\n      blendAngle,\n      blendSoftness,\n      rotationAmount,\n      noiseScale,\n      grainAmount,\n      grainScale,\n      contrast,\n      gamma,\n      saturation,\n      zoom,\n      centerX,\n      centerY,\n      color1,\n      color2,\n      color3,\n      grainAnimated,\n      light,\n    ]);\n\n    return (\n      <div\n        aria-hidden\n        ref={containerRef}\n        {...rest}\n        {...styleProps(styles.root, className, style)}\n      />\n    );\n  },\n);\n\nGrainient.displayName = 'Grainient';\n\nexport default Grainient;\n"],"mappings":"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"}

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

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

package/es/awesome/Grainient/style.mjs

@@ -0,0 +1,23 @@
+//#region src/awesome/Grainient/style.ts
+const styles = {
+	canvas: {
+		kpwlN0: "lb10a8y8t",
+		kZKoxP: "lb5yr21d",
+		k1xSpc: "lb1lliihq",
+		kzqmXN: "lbh8yej3",
+		kVAEAm: "lb10l6tqk",
+		$$css: true
+	},
+	root: {
+		kpwlN0: "lb10a8y8t",
+		kVQacm: "lbb3r6kr",
+		kfzvcC: "lb47corl",
+		kVAEAm: "lb10l6tqk",
+		kY2c9j: "lb1ja2u2z",
+		$$css: true
+	}
+};
+//#endregion
+export { styles };
+
+//# sourceMappingURL=style.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/awesome/Grainient/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nexport const styles = stylex.create({\n  canvas: {\n    inset: 0,\n    blockSize: '100%',\n    display: 'block',\n    inlineSize: '100%',\n    position: 'absolute',\n  },\n  root: {\n    inset: 0,\n    overflow: 'hidden',\n    pointerEvents: 'none',\n    position: 'absolute',\n    zIndex: 0,\n  },\n});\n"],"mappings":";AACA,MAAa,SAAS;CACpB,QAAQ;EACN,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;AACF"}

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

@@ -0,0 +1,121 @@
+import { DivProps } from "../../types/index.mjs";
+//#region src/awesome/Grainient/type.d.ts
+export interface GrainientProps extends DivProps {
+  /**
+   * Angle of the color blend, in degrees.
+   * @default 0
+   */
+  blendAngle?: number;
+  /**
+   * Softness of the color edges.
+   * @default 0.05
+   */
+  blendSoftness?: number;
+  /**
+   * Horizontal offset of the field center.
+   * @default 0
+   */
+  centerX?: number;
+  /**
+   * Vertical offset of the field center.
+   * @default 0
+   */
+  centerY?: number;
+  /**
+   * First color stop, as hex.
+   * @default '#FF9FFC'
+   */
+  color1?: string;
+  /**
+   * Second color stop, as hex.
+   * @default '#5227FF'
+   */
+  color2?: string;
+  /**
+   * Third color stop, as hex.
+   * @default '#B497CF'
+   */
+  color3?: string;
+  /**
+   * Shifts the blend toward color1 (negative) or color3 (positive).
+   * @default 0
+   */
+  colorBalance?: number;
+  /**
+   * Output contrast.
+   * @default 1.5
+   */
+  contrast?: number;
+  /**
+   * Output gamma.
+   * @default 1
+   */
+  gamma?: number;
+  /**
+   * Film grain strength. 0 turns it off.
+   * @default 0.1
+   */
+  grainAmount?: number;
+  /**
+   * Animate the grain with time.
+   * @default false
+   */
+  grainAnimated?: boolean;
+  /**
+   * Film grain scale.
+   * @default 2
+   */
+  grainScale?: number;
+  /**
+   * Wash the colors toward white for a light surface. `'auto'` follows the current theme.
+   * @default false
+   */
+  lightMode?: boolean | 'auto';
+  /**
+   * Scale of the rotation noise.
+   * @default 2
+   */
+  noiseScale?: number;
+  /**
+   * Noise-driven rotation, in degrees.
+   * @default 500
+   */
+  rotationAmount?: number;
+  /**
+   * Output saturation.
+   * @default 1
+   */
+  saturation?: number;
+  /**
+   * Animation speed. A still frame is drawn when reduced motion is preferred.
+   * @default 0.25
+   */
+  timeSpeed?: number;
+  /**
+   * Warp amplitude divisor; higher is calmer.
+   * @default 50
+   */
+  warpAmplitude?: number;
+  /**
+   * Frequency of the warp waves.
+   * @default 5
+   */
+  warpFrequency?: number;
+  /**
+   * Speed of the warp waves.
+   * @default 2
+   */
+  warpSpeed?: number;
+  /**
+   * How strongly the field is warped.
+   * @default 1
+   */
+  warpStrength?: number;
+  /**
+   * Zoom of the field.
+   * @default 0.9
+   */
+  zoom?: number;
+}
+//#endregion
+//# sourceMappingURL=type.d.mts.map

package/es/awesome/GridBackground/GridBackground.mjs

@@ -2,6 +2,7 @@
 import { styleProps } from "../../styles/stylex/props.mjs";
 import { cssVar } from "../../styles/stylex/cssVar.stylex.mjs";
 import { useTheme } from "../../styles/theme/scope.mjs";
+import { useSize } from "../../hooks/useSize.mjs";
 import Grid from "./components/Grid.mjs";
 import { styles } from "./style.mjs";
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
@@ -9,7 +10,6 @@ import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import * as stylex from "@stylexjs/stylex";
 import { shuffle } from "es-toolkit/compat";
 import chroma from "chroma-js";
-import { useSize } from "ahooks";
 //#region src/awesome/GridBackground/GridBackground.tsx
 const initialGroup = [
 	0,

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

@@ -1 +1 @@
-{"version":3,"file":"GridBackground.mjs","names":[],"sources":["../../../src/awesome/GridBackground/GridBackground.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport { useSize } from 'ahooks';\nimport chroma from 'chroma-js';\nimport { shuffle } from 'es-toolkit/compat';\nimport { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\nimport { styleProps } from '@/styles/stylex/props';\nimport { useTheme } from '@/styles/theme/scope';\n\nimport Grid, { type GridProps } from './components/Grid';\nimport { styles } from './style';\nimport type { GridBackgroundProps } from './type';\n\nconst initialGroup = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14];\n\nconst GridBackground = memo<GridBackgroundProps>(\n  ({\n    flip,\n    reverse,\n    showBackground,\n    backgroundColor,\n    random,\n    animationDuration = 8,\n    className,\n    colorFront,\n    colorBack,\n    strokeWidth,\n    style,\n    animation,\n    ...rest\n  }) => {\n    const ref = useRef(null);\n    const size = useSize(ref);\n    const theme = useTheme();\n\n    const backgroundCssVariables = useMemo<Record<string, string>>(() => {\n      if (!showBackground) return {} as Record<string, string>;\n\n      const scale = chroma\n        .bezier([theme.colorText, backgroundColor || 'blue', theme.colorBgLayout])\n        .scale()\n        .mode('lch')\n        .correctLightness()\n        .colors(6);\n\n      return {\n        '--grid-background-color-1': scale[1],\n        '--grid-background-color-2': scale[2],\n        '--grid-background-color-3': scale[3],\n        '--grid-background-color-4': scale[4],\n      };\n    }, [showBackground, backgroundColor, theme.colorText, theme.colorBgLayout]);\n\n    const gridProps: GridProps = useMemo(\n      () => ({\n        className: stylex.props(styles.highlight, reverse && styles.highlightReverse).className,\n        color: colorFront || cssVar.colorText,\n        strokeWidth,\n      }),\n      [reverse, colorFront, strokeWidth],\n    );\n\n    const [group, setGroup] = useState(random ? initialGroup : undefined);\n    useEffect(() => {\n      setGroup(random ? shuffle(initialGroup) : undefined);\n    }, [random]);\n\n    const HighlightGrid = useCallback(() => {\n      if (!group)\n        return <Grid style={{ '--duration': `${animationDuration}s` } as any} {...gridProps} />;\n\n      return (\n        <>\n          {group.map((item, index) => {\n            return (\n              <Grid\n                key={item}\n                linePick={item}\n                style={\n                  {\n                    '--delay': `${index + Math.random()}s`,\n                    '--duration': `${animationDuration}s`,\n                  } as any\n                }\n                {...gridProps}\n              />\n            );\n          })}\n        </>\n      );\n    }, [group, animationDuration, gridProps]);\n\n    return (\n      <div\n        {...styleProps(\n          styles.container,\n          className,\n          flip ? { transform: 'scaleY(-1)', ...style } : style,\n        )}\n        ref={ref}\n        {...rest}\n      >\n        <Grid\n          color={colorBack || cssVar.colorBorder}\n          strokeWidth={strokeWidth}\n          style={{ zIndex: 2 }}\n        />\n        {animation && <HighlightGrid />}\n        {showBackground && (\n          <div\n            {...stylex.props(styles.backgroundContainer)}\n            style={{\n              ...(size ? { fontSize: size.width / 80 } : {}),\n              ...backgroundCssVariables,\n            }}\n          >\n            <div {...stylex.props(styles.backgroundShape)} />\n          </div>\n        )}\n      </div>\n    );\n  },\n);\n\nGridBackground.displayName = 'GridBackground';\n\nexport default GridBackground;\n"],"mappings":";;;;;;;;;;;;;AAaA,MAAM,eAAe;CAAC;CAAG;CAAG;CAAG;CAAG;CAAG;CAAG;CAAG;CAAG;CAAG;CAAG;CAAI;CAAI;CAAI;CAAI;AAAE;AACtE,MAAM,iBAAiB,MAA2B,EAChD,MACA,SACA,gBACA,iBACA,QACA,oBAAoB,GACpB,WACA,YACA,WACA,aACA,OACA,WACA,GAAG,WACC;CACJ,MAAM,MAAM,OAAO,IAAI;CACvB,MAAM,OAAO,QAAQ,GAAG;CACxB,MAAM,QAAQ,SAAS;CACvB,MAAM,yBAAyB,cAAsC;EACnE,IAAI,CAAC,gBAAgB,OAAO,CAAC;EAC7B,MAAM,QAAQ,OAAO,OAAO;GAAC,MAAM;GAAW,mBAAmB;GAAQ,MAAM;EAAa,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,KAAK,KAAK,CAAC,CAAC,iBAAiB,CAAC,CAAC,OAAO,CAAC;EAC9I,OAAO;GACL,6BAA6B,MAAM;GACnC,6BAA6B,MAAM;GACnC,6BAA6B,MAAM;GACnC,6BAA6B,MAAM;EACrC;CACF,GAAG;EAAC;EAAgB;EAAiB,MAAM;EAAW,MAAM;CAAa,CAAC;CAC1E,MAAM,YAAuB,eAAe;EAC1C,WAAW,OAAO,MAAM,OAAO,WAAW,WAAW,OAAO,gBAAgB,CAAC,CAAC;EAC9E,OAAO,cAAc,OAAO;EAC5B;CACF,IAAI;EAAC;EAAS;EAAY;CAAW,CAAC;CACtC,MAAM,CAAC,OAAO,YAAY,SAAS,SAAS,eAAe,KAAA,CAAS;CACpE,gBAAgB;EACd,SAAS,SAAS,QAAQ,YAAY,IAAI,KAAA,CAAS;CACrD,GAAG,CAAC,MAAM,CAAC;CACX,MAAM,gBAAgB,kBAAkB;EACtC,IAAI,CAAC,OAAO,OAAO,oBAAC,MAAD;GAAM,OAAO,EAC9B,cAAc,GAAG,kBAAkB,GACrC;GAAU,GAAI;EAAY,CAAA;EAC1B,OAAO,oBAAA,YAAA,EAAA,UACA,MAAM,KAAK,MAAM,UAAU;GAC9B,OAAO,oBAAC,MAAD;IAAiB,UAAU;IAAM,OAAO;KAC7C,WAAW,GAAG,QAAQ,KAAK,OAAO,EAAE;KACpC,cAAc,GAAG,kBAAkB;IACrC;IAAU,GAAI;GAAY,GAHR,IAGQ;EAC5B,CAAC,EACG,CAAA;CACR,GAAG;EAAC;EAAO;EAAmB;CAAS,CAAC;CACxC,OAAO,qBAAC,OAAD;EAAK,GAAI,WAAW,OAAO,WAAW,WAAW,OAAO;GAC7D,WAAW;GACX,GAAG;EACL,IAAI,KAAK;EAAQ;EAAK,GAAI;EAHnB,UAAA;GAID,oBAAC,MAAD;IAAM,OAAO,aAAa,OAAO;IAA0B;IAAa,OAAO,EACjF,QAAQ,EACV;GAAI,CAAA;GACC,aAAa,oBAAC,eAAD,CAAgB,CAAA;GAC7B,kBAAkB,oBAAC,OAAD;IAAK,GAAI,OAAO,MAAM,OAAO,mBAAmB;IAAG,OAAO;KAC/E,GAAI,OAAO,EACT,UAAU,KAAK,QAAQ,GACzB,IAAI,CAAC;KACL,GAAG;IACL;IACQ,UAAA,oBAAC,OAAD,EAAK,GAAI,OAAO,MAAM,OAAO,eAAe,EAAI,CAAA;GAC7C,CAAA;EACJ;;AACX,CAAC;AACD,eAAe,cAAc"}
+{"version":3,"file":"GridBackground.mjs","names":[],"sources":["../../../src/awesome/GridBackground/GridBackground.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport chroma from 'chroma-js';\nimport { shuffle } from 'es-toolkit/compat';\nimport { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { useSize } from '@/hooks/useSize';\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\nimport { styleProps } from '@/styles/stylex/props';\nimport { useTheme } from '@/styles/theme/scope';\n\nimport Grid, { type GridProps } from './components/Grid';\nimport { styles } from './style';\nimport type { GridBackgroundProps } from './type';\n\nconst initialGroup = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14];\n\nconst GridBackground = memo<GridBackgroundProps>(\n  ({\n    flip,\n    reverse,\n    showBackground,\n    backgroundColor,\n    random,\n    animationDuration = 8,\n    className,\n    colorFront,\n    colorBack,\n    strokeWidth,\n    style,\n    animation,\n    ...rest\n  }) => {\n    const ref = useRef(null);\n    const size = useSize(ref);\n    const theme = useTheme();\n\n    const backgroundCssVariables = useMemo<Record<string, string>>(() => {\n      if (!showBackground) return {} as Record<string, string>;\n\n      const scale = chroma\n        .bezier([theme.colorText, backgroundColor || 'blue', theme.colorBgLayout])\n        .scale()\n        .mode('lch')\n        .correctLightness()\n        .colors(6);\n\n      return {\n        '--grid-background-color-1': scale[1],\n        '--grid-background-color-2': scale[2],\n        '--grid-background-color-3': scale[3],\n        '--grid-background-color-4': scale[4],\n      };\n    }, [showBackground, backgroundColor, theme.colorText, theme.colorBgLayout]);\n\n    const gridProps: GridProps = useMemo(\n      () => ({\n        className: stylex.props(styles.highlight, reverse && styles.highlightReverse).className,\n        color: colorFront || cssVar.colorText,\n        strokeWidth,\n      }),\n      [reverse, colorFront, strokeWidth],\n    );\n\n    const [group, setGroup] = useState(random ? initialGroup : undefined);\n    useEffect(() => {\n      setGroup(random ? shuffle(initialGroup) : undefined);\n    }, [random]);\n\n    const HighlightGrid = useCallback(() => {\n      if (!group)\n        return <Grid style={{ '--duration': `${animationDuration}s` } as any} {...gridProps} />;\n\n      return (\n        <>\n          {group.map((item, index) => {\n            return (\n              <Grid\n                key={item}\n                linePick={item}\n                style={\n                  {\n                    '--delay': `${index + Math.random()}s`,\n                    '--duration': `${animationDuration}s`,\n                  } as any\n                }\n                {...gridProps}\n              />\n            );\n          })}\n        </>\n      );\n    }, [group, animationDuration, gridProps]);\n\n    return (\n      <div\n        {...styleProps(\n          styles.container,\n          className,\n          flip ? { transform: 'scaleY(-1)', ...style } : style,\n        )}\n        ref={ref}\n        {...rest}\n      >\n        <Grid\n          color={colorBack || cssVar.colorBorder}\n          strokeWidth={strokeWidth}\n          style={{ zIndex: 2 }}\n        />\n        {animation && <HighlightGrid />}\n        {showBackground && (\n          <div\n            {...stylex.props(styles.backgroundContainer)}\n            style={{\n              ...(size ? { fontSize: size.width / 80 } : {}),\n              ...backgroundCssVariables,\n            }}\n          >\n            <div {...stylex.props(styles.backgroundShape)} />\n          </div>\n        )}\n      </div>\n    );\n  },\n);\n\nGridBackground.displayName = 'GridBackground';\n\nexport default GridBackground;\n"],"mappings":";;;;;;;;;;;;;AAaA,MAAM,eAAe;CAAC;CAAG;CAAG;CAAG;CAAG;CAAG;CAAG;CAAG;CAAG;CAAG;CAAG;CAAI;CAAI;CAAI;CAAI;AAAE;AACtE,MAAM,iBAAiB,MAA2B,EAChD,MACA,SACA,gBACA,iBACA,QACA,oBAAoB,GACpB,WACA,YACA,WACA,aACA,OACA,WACA,GAAG,WACC;CACJ,MAAM,MAAM,OAAO,IAAI;CACvB,MAAM,OAAO,QAAQ,GAAG;CACxB,MAAM,QAAQ,SAAS;CACvB,MAAM,yBAAyB,cAAsC;EACnE,IAAI,CAAC,gBAAgB,OAAO,CAAC;EAC7B,MAAM,QAAQ,OAAO,OAAO;GAAC,MAAM;GAAW,mBAAmB;GAAQ,MAAM;EAAa,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,KAAK,KAAK,CAAC,CAAC,iBAAiB,CAAC,CAAC,OAAO,CAAC;EAC9I,OAAO;GACL,6BAA6B,MAAM;GACnC,6BAA6B,MAAM;GACnC,6BAA6B,MAAM;GACnC,6BAA6B,MAAM;EACrC;CACF,GAAG;EAAC;EAAgB;EAAiB,MAAM;EAAW,MAAM;CAAa,CAAC;CAC1E,MAAM,YAAuB,eAAe;EAC1C,WAAW,OAAO,MAAM,OAAO,WAAW,WAAW,OAAO,gBAAgB,CAAC,CAAC;EAC9E,OAAO,cAAc,OAAO;EAC5B;CACF,IAAI;EAAC;EAAS;EAAY;CAAW,CAAC;CACtC,MAAM,CAAC,OAAO,YAAY,SAAS,SAAS,eAAe,KAAA,CAAS;CACpE,gBAAgB;EACd,SAAS,SAAS,QAAQ,YAAY,IAAI,KAAA,CAAS;CACrD,GAAG,CAAC,MAAM,CAAC;CACX,MAAM,gBAAgB,kBAAkB;EACtC,IAAI,CAAC,OAAO,OAAO,oBAAC,MAAD;GAAM,OAAO,EAC9B,cAAc,GAAG,kBAAkB,GACrC;GAAU,GAAI;EAAY,CAAA;EAC1B,OAAO,oBAAA,YAAA,EAAA,UACA,MAAM,KAAK,MAAM,UAAU;GAC9B,OAAO,oBAAC,MAAD;IAAiB,UAAU;IAAM,OAAO;KAC7C,WAAW,GAAG,QAAQ,KAAK,OAAO,EAAE;KACpC,cAAc,GAAG,kBAAkB;IACrC;IAAU,GAAI;GAAY,GAHR,IAGQ;EAC5B,CAAC,EACG,CAAA;CACR,GAAG;EAAC;EAAO;EAAmB;CAAS,CAAC;CACxC,OAAO,qBAAC,OAAD;EAAK,GAAI,WAAW,OAAO,WAAW,WAAW,OAAO;GAC7D,WAAW;GACX,GAAG;EACL,IAAI,KAAK;EAAQ;EAAK,GAAI;EAHnB,UAAA;GAID,oBAAC,MAAD;IAAM,OAAO,aAAa,OAAO;IAA0B;IAAa,OAAO,EACjF,QAAQ,EACV;GAAI,CAAA;GACC,aAAa,oBAAC,eAAD,CAAgB,CAAA;GAC7B,kBAAkB,oBAAC,OAAD;IAAK,GAAI,OAAO,MAAM,OAAO,mBAAmB;IAAG,OAAO;KAC/E,GAAI,OAAO,EACT,UAAU,KAAK,QAAQ,GACzB,IAAI,CAAC;KACL,GAAG;IACL;IACQ,UAAA,oBAAC,OAAD,EAAK,GAAI,OAAO,MAAM,OAAO,eAAe,EAAI,CAAA;GAC7C,CAAA;EACJ;;AACX,CAAC;AACD,eAAe,cAAc"}

package/es/awesome/GridBackground/GridShowcase.mjs

@@ -1,10 +1,10 @@
 "use client";
 import FlexBasic_default from "../../Flex/FlexBasic.mjs";
+import { withAlpha } from "../../utils/colorMath.mjs";
 import { useTheme } from "../../styles/theme/scope.mjs";
 import GridBackground from "./GridBackground.mjs";
 import { memo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { rgba } from "polished";
 //#region src/awesome/GridBackground/GridShowcase.tsx
 const GridShowcase = memo(({ style, children, backgroundColor = "#001dff", innerProps, ...rest }) => {
 	const theme = useTheme();
@@ -18,8 +18,8 @@ const GridShowcase = memo(({ style, children, backgroundColor = "#001dff", inner
 			/* @__PURE__ */ jsx(GridBackground, {
 				animation: true,
 				flip: true,
-				colorBack: rgba(theme.colorText, .12),
-				colorFront: rgba(theme.colorText, .6)
+				colorBack: withAlpha(theme.colorText, .12),
+				colorFront: withAlpha(theme.colorText, .6)
 			}),
 			/* @__PURE__ */ jsx(FlexBasic_default, {
 				align: "center",
@@ -36,7 +36,7 @@ const GridShowcase = memo(({ style, children, backgroundColor = "#001dff", inner
 				reverse: true,
 				showBackground: true,
 				backgroundColor,
-				colorBack: rgba(theme.colorText, .24),
+				colorBack: withAlpha(theme.colorText, .24),
 				colorFront: theme.colorText,
 				style: { zIndex: 0 }
 			})

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

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

package/es/awesome/Hero/Hero.mjs

@@ -11,14 +11,14 @@ import GithubIcon from "../../icons/lucideExtra/GithubIcon.mjs";
 import { styles } from "./style.mjs";
 import { memo, useCallback } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import clsx from "clsx";
+import clsx$1 from "clsx";
 import * as stylex from "@stylexjs/stylex";
 //#region src/awesome/Hero/Hero.tsx
 const Hero = memo(({ title, description, actions, Link }) => {
 	const { mobile } = useResponsive();
 	const LinkRender = Link || A;
 	const ButtonGroups = useCallback(() => Boolean(actions?.length) && /* @__PURE__ */ jsx("div", {
-		className: clsx(stylex.props(styles.actions).className, "lobe-hero-actions"),
+		className: clsx$1(stylex.props(styles.actions).className, "lobe-hero-actions"),
 		children: actions.map(({ text, link, openExternal, github, type }, index) => {
 			const content = type === "primary" ? /* @__PURE__ */ jsx(GradientButton, {
 				block: mobile,
@@ -62,7 +62,7 @@ const Hero = memo(({ title, description, actions, Link }) => {
 				title && /* @__PURE__ */ jsx(Center, {
 					horizontal: true,
 					as: "h1",
-					className: clsx(stylex.props(styles.title).className, "lobe-hero-title"),
+					className: clsx$1(stylex.props(styles.title).className, "lobe-hero-title"),
 					dangerouslySetInnerHTML: { __html: title },
 					gap: "0.25em",
 					wrap: "wrap"

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

@@ -1 +1 @@
-{"version":3,"file":"Hero.mjs","names":["Flexbox"],"sources":["../../../src/awesome/Hero/Hero.tsx"],"sourcesContent":["'use client';\n\nimport './style.css';\n\nimport { GithubIcon } from '@lobehub/ui/icons';\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport { memo, useCallback } from 'react';\n\nimport A from '@/A';\nimport AuroraBackground from '@/awesome/AuroraBackground';\nimport GradientButton from '@/awesome/GradientButton';\nimport Button from '@/Button';\nimport { Center, Flexbox } from '@/Flex';\nimport Icon from '@/Icon';\nimport { useResponsive } from '@/styles/theme/scope';\n\nimport { styles } from './style';\nimport { type HeroProps } from './type';\n\nconst Hero = memo<HeroProps>(({ title, description, actions, Link }) => {\n  const { mobile } = useResponsive();\n\n  const LinkRender = Link || A;\n\n  const ButtonGroups = useCallback(\n    () =>\n      Boolean(actions?.length) && (\n        <div className={clsx(stylex.props(styles.actions).className, 'lobe-hero-actions')}>\n          {actions!.map(({ text, link, openExternal, github, type }, index) => {\n            const content =\n              type === 'primary' ? (\n                <GradientButton\n                  block={mobile}\n                  icon={github ? <Icon icon={GithubIcon} size={18} /> : undefined}\n                  key={index}\n                  size=\"large\"\n                >\n                  {text}\n                </GradientButton>\n              ) : (\n                <Button\n                  block={mobile}\n                  icon={github ? <Icon icon={GithubIcon} size={18} /> : undefined}\n                  key={index}\n                  size=\"large\"\n                  type=\"primary\"\n                >\n                  {text}\n                </Button>\n              );\n\n            return openExternal ? (\n              <A href={link} key={text} target={openExternal ? '_blank' : undefined}>\n                {content}\n              </A>\n            ) : (\n              <LinkRender key={text} to={link}>\n                {content}\n              </LinkRender>\n            );\n          })}\n        </div>\n      ),\n    [actions],\n  );\n\n  return (\n    <>\n      <AuroraBackground />\n      <Flexbox align={'center'} style={{ fontSize: 16, zIndex: 1 }}>\n        <Flexbox\n          horizontal\n          className={stylex.props(styles.container).className}\n          distribution={'center'}\n        >\n          <Center>\n            {title && (\n              <Center\n                horizontal\n                as={'h1'}\n                className={clsx(stylex.props(styles.title).className, 'lobe-hero-title')}\n                dangerouslySetInnerHTML={{ __html: title }}\n                gap={'0.25em'}\n                wrap={'wrap'}\n              />\n            )}\n            {description && (\n              <p {...stylex.props(styles.desc)} dangerouslySetInnerHTML={{ __html: description }} />\n            )}\n            <ButtonGroups />\n          </Center>\n        </Flexbox>\n      </Flexbox>\n    </>\n  );\n});\n\nHero.displayName = 'Hero';\n\nexport default Hero;\n"],"mappings":";;;;;;;;;;;;;;;;AAgBA,MAAM,OAAO,MAAiB,EAC5B,OACA,aACA,SACA,WACI;CACJ,MAAM,EACJ,WACE,cAAc;CAClB,MAAM,aAAa,QAAQ;CAC3B,MAAM,eAAe,kBAAkB,QAAQ,SAAS,MAAM,KAAK,oBAAC,OAAD;EAAK,WAAW,KAAK,OAAO,MAAM,OAAO,OAAO,CAAC,CAAC,WAAW,mBAAmB;EAC1I,UAAA,QAAS,KAAK,EACnB,MACA,MACA,cACA,QACA,QACC,UAAU;GACX,MAAM,UAAU,SAAS,YAAY,oBAAC,gBAAD;IAAgB,OAAO;IAAQ,MAAM,SAAS,oBAAC,MAAD;KAAM,MAAM;KAAY,MAAM;IAAK,CAAA,IAAI,KAAA;IAAuB,MAAK;IACzI,UAAA;GACa,GAFgH,KAEhH,IAAI,oBAAC,QAAD;IAAQ,OAAO;IAAQ,MAAM,SAAS,oBAAC,MAAD;KAAM,MAAM;KAAY,MAAM;IAAK,CAAA,IAAI,KAAA;IAAuB,MAAK;IAAQ,MAAK;IACvI,UAAA;GACK,GAFyG,KAEzG;GAClB,OAAO,eAAe,oBAAC,GAAD;IAAG,MAAM;IAAiB,QAAQ,eAAe,WAAW,KAAA;IACvE,UAAA;GACA,GAF+B,IAE/B,IAAI,oBAAC,YAAD;IAAuB,IAAI;IAC/B,UAAA;GACS,GAFY,IAEZ;EACtB,CAAC;CACQ,CAAA,GAAG,CAAC,OAAO,CAAC;CACvB,OAAO,qBAAA,YAAA,EAAA,UAAA,CACH,oBAAC,kBAAD,CAAmB,CAAA,GACnB,oBAACA,mBAAD;EAAS,OAAO;EAAU,OAAO;GACjC,UAAU;GACV,QAAQ;EACV;EACI,UAAA,oBAACA,mBAAD;GAAS,YAAA;GAAW,WAAW,OAAO,MAAM,OAAO,SAAS,CAAC,CAAC;GAAW,cAAc;GACrF,UAAA,qBAAC,QAAD,EAAA,UAAA;IACG,SAAS,oBAAC,QAAD;KAAQ,YAAA;KAAW,IAAI;KAAM,WAAW,KAAK,OAAO,MAAM,OAAO,KAAK,CAAC,CAAC,WAAW,iBAAiB;KAAG,yBAAyB,EAC1I,QAAQ,MACV;KAAG,KAAK;KAAU,MAAM;IAAS,CAAA;IAC9B,eAAe,oBAAC,KAAD;KAAG,GAAI,OAAO,MAAM,OAAO,IAAI;KAAG,yBAAyB,EAC3E,QAAQ,YACV;IAAI,CAAA;IACF,oBAAC,cAAD,CAAe,CAAA;GACT,EAAA,CAAA;EACD,CAAA;CACF,CAAA,CACT,EAAA,CAAA;AACN,CAAC;AACD,KAAK,cAAc"}
+{"version":3,"file":"Hero.mjs","names":["clsx","Flexbox"],"sources":["../../../src/awesome/Hero/Hero.tsx"],"sourcesContent":["'use client';\n\nimport './style.css';\n\nimport { GithubIcon } from '@lobehub/ui/icons';\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport { memo, useCallback } from 'react';\n\nimport A from '@/A';\nimport AuroraBackground from '@/awesome/AuroraBackground';\nimport GradientButton from '@/awesome/GradientButton';\nimport Button from '@/Button';\nimport { Center, Flexbox } from '@/Flex';\nimport Icon from '@/Icon';\nimport { useResponsive } from '@/styles/theme/scope';\n\nimport { styles } from './style';\nimport { type HeroProps } from './type';\n\nconst Hero = memo<HeroProps>(({ title, description, actions, Link }) => {\n  const { mobile } = useResponsive();\n\n  const LinkRender = Link || A;\n\n  const ButtonGroups = useCallback(\n    () =>\n      Boolean(actions?.length) && (\n        <div className={clsx(stylex.props(styles.actions).className, 'lobe-hero-actions')}>\n          {actions!.map(({ text, link, openExternal, github, type }, index) => {\n            const content =\n              type === 'primary' ? (\n                <GradientButton\n                  block={mobile}\n                  icon={github ? <Icon icon={GithubIcon} size={18} /> : undefined}\n                  key={index}\n                  size=\"large\"\n                >\n                  {text}\n                </GradientButton>\n              ) : (\n                <Button\n                  block={mobile}\n                  icon={github ? <Icon icon={GithubIcon} size={18} /> : undefined}\n                  key={index}\n                  size=\"large\"\n                  type=\"primary\"\n                >\n                  {text}\n                </Button>\n              );\n\n            return openExternal ? (\n              <A href={link} key={text} target={openExternal ? '_blank' : undefined}>\n                {content}\n              </A>\n            ) : (\n              <LinkRender key={text} to={link}>\n                {content}\n              </LinkRender>\n            );\n          })}\n        </div>\n      ),\n    [actions],\n  );\n\n  return (\n    <>\n      <AuroraBackground />\n      <Flexbox align={'center'} style={{ fontSize: 16, zIndex: 1 }}>\n        <Flexbox\n          horizontal\n          className={stylex.props(styles.container).className}\n          distribution={'center'}\n        >\n          <Center>\n            {title && (\n              <Center\n                horizontal\n                as={'h1'}\n                className={clsx(stylex.props(styles.title).className, 'lobe-hero-title')}\n                dangerouslySetInnerHTML={{ __html: title }}\n                gap={'0.25em'}\n                wrap={'wrap'}\n              />\n            )}\n            {description && (\n              <p {...stylex.props(styles.desc)} dangerouslySetInnerHTML={{ __html: description }} />\n            )}\n            <ButtonGroups />\n          </Center>\n        </Flexbox>\n      </Flexbox>\n    </>\n  );\n});\n\nHero.displayName = 'Hero';\n\nexport default Hero;\n"],"mappings":";;;;;;;;;;;;;;;;AAgBA,MAAM,OAAO,MAAiB,EAC5B,OACA,aACA,SACA,WACI;CACJ,MAAM,EACJ,WACE,cAAc;CAClB,MAAM,aAAa,QAAQ;CAC3B,MAAM,eAAe,kBAAkB,QAAQ,SAAS,MAAM,KAAK,oBAAC,OAAD;EAAK,WAAWA,OAAK,OAAO,MAAM,OAAO,OAAO,CAAC,CAAC,WAAW,mBAAmB;EAC1I,UAAA,QAAS,KAAK,EACnB,MACA,MACA,cACA,QACA,QACC,UAAU;GACX,MAAM,UAAU,SAAS,YAAY,oBAAC,gBAAD;IAAgB,OAAO;IAAQ,MAAM,SAAS,oBAAC,MAAD;KAAM,MAAM;KAAY,MAAM;IAAK,CAAA,IAAI,KAAA;IAAuB,MAAK;IACzI,UAAA;GACa,GAFgH,KAEhH,IAAI,oBAAC,QAAD;IAAQ,OAAO;IAAQ,MAAM,SAAS,oBAAC,MAAD;KAAM,MAAM;KAAY,MAAM;IAAK,CAAA,IAAI,KAAA;IAAuB,MAAK;IAAQ,MAAK;IACvI,UAAA;GACK,GAFyG,KAEzG;GAClB,OAAO,eAAe,oBAAC,GAAD;IAAG,MAAM;IAAiB,QAAQ,eAAe,WAAW,KAAA;IACvE,UAAA;GACA,GAF+B,IAE/B,IAAI,oBAAC,YAAD;IAAuB,IAAI;IAC/B,UAAA;GACS,GAFY,IAEZ;EACtB,CAAC;CACQ,CAAA,GAAG,CAAC,OAAO,CAAC;CACvB,OAAO,qBAAA,YAAA,EAAA,UAAA,CACH,oBAAC,kBAAD,CAAmB,CAAA,GACnB,oBAACC,mBAAD;EAAS,OAAO;EAAU,OAAO;GACjC,UAAU;GACV,QAAQ;EACV;EACI,UAAA,oBAACA,mBAAD;GAAS,YAAA;GAAW,WAAW,OAAO,MAAM,OAAO,SAAS,CAAC,CAAC;GAAW,cAAc;GACrF,UAAA,qBAAC,QAAD,EAAA,UAAA;IACG,SAAS,oBAAC,QAAD;KAAQ,YAAA;KAAW,IAAI;KAAM,WAAWD,OAAK,OAAO,MAAM,OAAO,KAAK,CAAC,CAAC,WAAW,iBAAiB;KAAG,yBAAyB,EAC1I,QAAQ,MACV;KAAG,KAAK;KAAU,MAAM;IAAS,CAAA;IAC9B,eAAe,oBAAC,KAAD;KAAG,GAAI,OAAO,MAAM,OAAO,IAAI;KAAG,yBAAyB,EAC3E,QAAQ,YACV;IAAI,CAAA;IACF,oBAAC,cAAD,CAAe,CAAA;GACT,EAAA,CAAA;EACD,CAAA;CACF,CAAA,CACT,EAAA,CAAA;AACN,CAAC;AACD,KAAK,cAAc"}