@majapisoftwares/ui 4.0.2

package/components/NavigationDrawer/NavigationDrawer.jsx

@@ -0,0 +1,29 @@
+import Drawer from "../Drawer";
+import { useCallback } from "react";
+import navigationDrawerState from "./navigationDrawer.state";
+import { useSnapshot } from "valtio";
+import clsx from "../../utils/clsx";
+export default function NavigationDrawer({ children, navigationChildren, position, title, noPadding, panelClassName, }) {
+    const { isOpen } = useSnapshot(navigationDrawerState);
+    const handleChangeOpen = useCallback((open) => {
+        if (window.innerWidth <= 1024) {
+            navigationDrawerState.setOpen(open);
+        }
+    }, []);
+    return (<>
+      <Drawer open={isOpen} onChangeOpen={handleChangeOpen} className="lg:hidden" position={position} title={title} noPadding={noPadding} panelClassName={panelClassName}>
+        {navigationChildren}
+      </Drawer>
+      <div className={clsx("fixed left-0 top-0 z-10 hidden h-full w-full max-w-xs flex-1 overflow-y-auto px-4 py-4 pt-20 lg:block", "bg-zinc-100/95 backdrop-blur-sm [@supports(backdrop-filter:blur(0))]:bg-zinc-100/75", "dark:bg-zinc-900/95 dark:[@supports(backdrop-filter:blur(0))]:bg-zinc-900/75", "transition-transform", {
+            "translate-x-0": isOpen,
+            "-translate-x-full": !isOpen,
+        }, panelClassName)}>
+        {navigationChildren}
+      </div>
+      <div className={clsx("flex min-h-screen flex-col ring-offset-zinc-100 transition-all duration-300", {
+            "lg:pl-80 lg:duration-150": isOpen,
+        })}>
+        {children}
+      </div>
+    </>);
+}

package/components/NavigationDrawer/NavigationItem.d.ts

@@ -0,0 +1,13 @@
+import { ReactElement, ReactNode } from "react";
+export default function NavigationItem({ icon, children, href, exact, alternativeActiveHrefs, className, disabled, active, }: {
+    icon?: ReactElement<{
+        className?: string;
+    }>;
+    children: ReactNode;
+    href: string;
+    exact?: boolean;
+    alternativeActiveHrefs?: string[];
+    className?: string;
+    disabled?: boolean;
+    active?: boolean;
+}): import("react").JSX.Element;

package/components/NavigationDrawer/NavigationItem.jsx

@@ -0,0 +1,24 @@
+import clsx from "../../utils/clsx";
+import { useRouter } from "next/router";
+import { cloneElement } from "react";
+import Button from "../Button";
+import navigationDrawerState from "./navigationDrawer.state";
+import useMediaQuery from "../../hooks/useMediaQuery";
+export default function NavigationItem({ icon, children, href, exact, alternativeActiveHrefs, className, disabled, active, }) {
+    const router = useRouter();
+    active =
+        active === undefined
+            ? exact
+                ? router.pathname === href ||
+                    alternativeActiveHrefs?.some((href) => router.pathname === href)
+                : router.pathname.includes(href) ||
+                    alternativeActiveHrefs?.some((href) => router.pathname.includes(href))
+            : active;
+    const isMobile = useMediaQuery(`(max-width: 1024px)`);
+    return (<Button variant={active ? "light" : "text"} color={active ? "primary" : "default"} className={clsx("w-full justify-start border-transparent", className)} leading={icon &&
+            cloneElement(icon, {
+                className: clsx(icon.props?.className, "w-5! mr-3"),
+            })} href={href} onClick={isMobile ? navigationDrawerState.close : undefined} disabled={disabled}>
+      {children}
+    </Button>);
+}

package/components/NavigationDrawer/index.d.ts

@@ -0,0 +1,6 @@
+import NavigationDrawer from "./NavigationDrawer";
+export * from "./NavigationDrawer";
+export default NavigationDrawer;
+export { default as NavigationItem } from "./NavigationItem";
+export { default as navigationDrawerState } from "./navigationDrawer.state";
+export * from "./navigationDrawer.state";

package/components/NavigationDrawer/index.jsx

@@ -0,0 +1,6 @@
+import NavigationDrawer from "./NavigationDrawer";
+export * from "./NavigationDrawer";
+export default NavigationDrawer;
+export { default as NavigationItem } from "./NavigationItem";
+export { default as navigationDrawerState } from "./navigationDrawer.state";
+export * from "./navigationDrawer.state";

package/components/NavigationDrawer/navigationDrawer.state.d.ts

@@ -0,0 +1,9 @@
+declare const navigationDrawerState: {
+    isOpen: boolean;
+    open(): void;
+    close(): void;
+    setOpen(open: boolean): void;
+    toggle(): void;
+};
+export declare const hydrateNavigationDrawerState: (cookies?: object) => void;
+export default navigationDrawerState;

package/components/NavigationDrawer/navigationDrawer.state.js

@@ -0,0 +1,19 @@
+import { proxy } from "valtio";
+import createStateHydration from "../../utils/createStateHydration";
+const navigationDrawerState = proxy({
+    isOpen: false,
+    open() {
+        navigationDrawerState.isOpen = true;
+    },
+    close() {
+        navigationDrawerState.isOpen = false;
+    },
+    setOpen(open) {
+        navigationDrawerState.isOpen = open;
+    },
+    toggle() {
+        navigationDrawerState.isOpen = !navigationDrawerState.isOpen;
+    },
+});
+export const hydrateNavigationDrawerState = createStateHydration("navigationDrawerState", navigationDrawerState, ["isOpen"]);
+export default navigationDrawerState;

package/components/NoSsr/NoSsr.d.ts

@@ -0,0 +1,4 @@
+import React, { ReactNode } from "react";
+export default function NoSsr({ children }: {
+    children: ReactNode;
+}): React.JSX.Element | null;

package/components/NoSsr/NoSsr.jsx

@@ -0,0 +1,8 @@
+import React, { useEffect, useState } from "react";
+export default function NoSsr({ children }) {
+    const [isMounted, setIsMounted] = useState(false);
+    useEffect(() => {
+        setIsMounted(true);
+    }, []);
+    return isMounted ? <>{children}</> : null;
+}

package/components/NoSsr/index.d.ts

@@ -0,0 +1,3 @@
+import NoSsr from "./NoSsr";
+export * from "./NoSsr";
+export default NoSsr;

package/components/NoSsr/index.jsx

@@ -0,0 +1,3 @@
+import NoSsr from "./NoSsr";
+export * from "./NoSsr";
+export default NoSsr;

package/components/Noise/Noise.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+interface NoiseProps {
+    patternSize?: number;
+    patternScaleX?: number;
+    patternScaleY?: number;
+    patternRefreshInterval?: number;
+    patternAlpha?: number;
+    className?: string;
+}
+declare const Noise: React.FC<NoiseProps>;
+export default Noise;

package/components/Noise/Noise.jsx

@@ -0,0 +1,69 @@
+import React, { useEffect, useRef } from "react";
+import clsx from "../../utils/clsx";
+const Noise = ({ patternSize = 250, patternScaleX = 1, patternScaleY = 1, patternRefreshInterval = 2, patternAlpha = 15, className, }) => {
+    const grainRef = useRef(null);
+    useEffect(() => {
+        const canvas = grainRef.current;
+        if (!canvas)
+            return;
+        const ctx = canvas.getContext("2d");
+        if (!ctx)
+            return;
+        let frame = 0;
+        const patternCanvas = document.createElement("canvas");
+        patternCanvas.width = patternSize;
+        patternCanvas.height = patternSize;
+        const patternCtx = patternCanvas.getContext("2d");
+        if (!patternCtx)
+            return;
+        const patternData = patternCtx.createImageData(patternSize, patternSize);
+        const patternPixelDataLength = patternSize * patternSize * 4;
+        const resize = () => {
+            if (!canvas)
+                return;
+            canvas.width = window.innerWidth * window.devicePixelRatio;
+            canvas.height = window.innerHeight * window.devicePixelRatio;
+            ctx.scale(patternScaleX, patternScaleY);
+        };
+        const updatePattern = () => {
+            for (let i = 0; i < patternPixelDataLength; i += 4) {
+                const value = Math.random() * 255;
+                patternData.data[i] = value;
+                patternData.data[i + 1] = value;
+                patternData.data[i + 2] = value;
+                patternData.data[i + 3] = patternAlpha;
+            }
+            patternCtx.putImageData(patternData, 0, 0);
+        };
+        const drawGrain = () => {
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            const pattern = ctx.createPattern(patternCanvas, "repeat");
+            if (pattern) {
+                ctx.fillStyle = pattern;
+                ctx.fillRect(0, 0, canvas.width, canvas.height);
+            }
+        };
+        const loop = () => {
+            if (frame % patternRefreshInterval === 0) {
+                updatePattern();
+                drawGrain();
+            }
+            frame++;
+            window.requestAnimationFrame(loop);
+        };
+        window.addEventListener("resize", resize);
+        resize();
+        loop();
+        return () => {
+            window.removeEventListener("resize", resize);
+        };
+    }, [
+        patternSize,
+        patternScaleX,
+        patternScaleY,
+        patternRefreshInterval,
+        patternAlpha,
+    ]);
+    return (<canvas className={clsx("absolute top-0 left-0 h-screen w-screen", className)} ref={grainRef}/>);
+};
+export default Noise;

package/components/Noise/index.d.ts

@@ -0,0 +1,3 @@
+import Noise from "./Noise";
+export * from "./Noise";
+export default Noise;

package/components/Noise/index.jsx

@@ -0,0 +1,3 @@
+import Noise from "./Noise";
+export * from "./Noise";
+export default Noise;

package/components/Notifications/Notifications.d.ts

@@ -0,0 +1,3 @@
+export default function Notifications({ notificationClassName, }: {
+    notificationClassName?: string;
+}): import("react").JSX.Element;

package/components/Notifications/Notifications.jsx

@@ -0,0 +1,60 @@
+import { AnimatePresence, motion } from "motion/react";
+import { useSnapshot } from "valtio";
+import notificationsState from "./notifications.state";
+import { CheckCircleIcon, ExclamationCircleIcon, } from "@heroicons/react/24/outline";
+import { XMarkIcon } from "@heroicons/react/20/solid";
+import Button from "../Button";
+import { cloneElement, useEffect } from "react";
+import clsx from "../../utils/clsx";
+export default function Notifications({ notificationClassName, }) {
+    const { notifications, remove, setRendered } = useSnapshot(notificationsState);
+    useEffect(() => {
+        setRendered(true);
+        return () => {
+            setRendered(false);
+        };
+    }, [setRendered]);
+    return (<ul id="ui-notifications" className="pointer-events-none fixed inset-0 z-30 flex flex-col items-center justify-end gap-3 px-4 py-6 sm:items-end sm:justify-start sm:p-6">
+      <AnimatePresence initial={false}>
+        {notifications.map(({ _id, dismissable, title, message, icon, actions, style, className, }) => {
+            const iconChild = (typeof icon === "string"
+                ? {
+                    success: <CheckCircleIcon className="text-success-400!"/>,
+                    error: (<ExclamationCircleIcon className="text-error-400!"/>),
+                }[icon]
+                : icon);
+            // noinspection SuspiciousTypeOfGuard
+            return (<motion.li key={_id} layout initial={{ opacity: 0, y: 50, scale: 0.3 }} animate={{ opacity: 1, y: 0, scale: 1 }} exit={{ opacity: 0, scale: 0.5, transition: { duration: 0.2 } }} className={clsx("pointer-events-auto w-full max-w-sm overflow-hidden rounded-lg bg-white shadow-lg ring-1 ring-black/5 dark:bg-zinc-800 dark:ring-white/10", notificationClassName, className)} style={style}>
+                <div className="p-4">
+                  <div className="flex items-start">
+                    {iconChild && (<div className="mr-2 shrink-0">
+                        {cloneElement(iconChild, {
+                        className: clsx("h-6 w-6 text-zinc-400 dark:text-zinc-600", iconChild.props?.className),
+                        "aria-hidden": "true",
+                    })}
+                      </div>)}
+                    <div className="ml-1 w-0 flex-1 pt-0.5">
+                      <p className="text-sm font-medium text-zinc-900 dark:text-zinc-100">
+                        {title || message}
+                      </p>
+                      {title && message && (<p className="mt-1 text-sm text-zinc-500 dark:text-zinc-400">
+                          {message}
+                        </p>)}
+                      {actions && (<div className="-m-3 mt-0 flex">
+                          {actions}
+                        </div>)}
+                    </div>
+                    {dismissable && (<div className="ml-4 flex shrink-0">
+                        <Button icon onClick={() => {
+                        remove(_id);
+                    }} className="h-5 w-5 p-0!" variant="text">
+                          <XMarkIcon className="h-5 w-5 text-zinc-400" aria-label="Close"/>
+                        </Button>
+                      </div>)}
+                  </div>
+                </div>
+              </motion.li>);
+        })}
+      </AnimatePresence>
+    </ul>);
+}

package/components/Notifications/index.d.ts

@@ -0,0 +1,5 @@
+import Notifications from "./Notifications";
+export * from "./Notifications";
+export default Notifications;
+export { default as notificationsState } from "./notifications.state";
+export * from "./notifications.state";

package/components/Notifications/index.jsx

@@ -0,0 +1,6 @@
+import Notifications from "./Notifications";
+export * from "./Notifications";
+export default Notifications;
+// noinspection JSUnusedGlobalSymbols
+export { default as notificationsState } from "./notifications.state";
+export * from "./notifications.state";

package/components/Notifications/notifications.state.d.ts

@@ -0,0 +1,24 @@
+import { StringValue } from "ms";
+import { CSSProperties, ReactElement, ReactNode } from "react";
+type Notification = {
+    _id: string;
+    message: string | ReactElement;
+    title?: string;
+    timeout?: number | StringValue;
+    icon?: "success" | "error" | ReactElement;
+    dismissable?: boolean;
+    actions?: ReactNode;
+    suppress?: boolean;
+    style?: CSSProperties;
+    className?: string;
+};
+declare const notificationsState: {
+    rendered: boolean;
+    setRendered(rendered: boolean): void;
+    notifications: Notification[];
+    add({ _id, dismissable, timeout, ...notification }: Pick<Partial<Notification>, "_id"> & Omit<Notification, "_id">): void;
+    remove(_id: string): void;
+};
+export declare function showNotification(notification: string | (Pick<Partial<Notification>, "_id"> & Omit<Notification, "_id">)): void;
+export declare function removeNotification(_id: string): void;
+export default notificationsState;

package/components/Notifications/notifications.state.js

@@ -0,0 +1,41 @@
+import { proxy, ref } from "valtio";
+import isomorphicObjectId from "@majapisoftwares/next/utils/isomorphicObjectId";
+import ms from "ms";
+const notificationsState = proxy({
+    rendered: false,
+    setRendered(rendered) {
+        notificationsState.rendered = rendered;
+    },
+    notifications: [],
+    add({ _id = isomorphicObjectId().toString(), dismissable = true, timeout, ...notification }) {
+        if (!notificationsState.rendered) {
+            console.error("<Notifications /> is not rendered. The notification will be ignored.");
+        }
+        notificationsState.notifications.push(ref({
+            ...notification,
+            dismissable,
+            _id,
+        }));
+        if (timeout) {
+            setTimeout(() => {
+                notificationsState.remove(_id);
+            }, typeof timeout !== "number" ? ms(timeout) : timeout);
+        }
+    },
+    remove(_id) {
+        notificationsState.notifications.splice(notificationsState.notifications.findIndex((n) => n._id === _id), 1);
+    },
+});
+export function showNotification(notification) {
+    const notificationObject = typeof notification === "string" ? { message: notification } : notification;
+    if (notificationObject.suppress &&
+        notificationsState.notifications.find((n) => n.message === notificationObject.message &&
+            n.title === notificationObject.title)) {
+        return;
+    }
+    notificationsState.add(notificationObject);
+}
+export function removeNotification(_id) {
+    notificationsState.remove(_id);
+}
+export default notificationsState;

package/components/Orb/Orb.d.ts

@@ -0,0 +1,8 @@
+interface OrbProps {
+    hue?: number;
+    hoverIntensity?: number;
+    rotateOnHover?: boolean;
+    forceHoverState?: boolean;
+}
+export default function Orb({ hue, hoverIntensity, rotateOnHover, forceHoverState, }: OrbProps): import("react").JSX.Element;
+export {};

package/components/Orb/Orb.jsx

@@ -0,0 +1,258 @@
+import { useEffect, useRef } from "react";
+import { Mesh, Program, Renderer, Triangle, Vec3 } from "ogl";
+export default function Orb({ hue = 0, hoverIntensity = 0.2, rotateOnHover = true, forceHoverState = false, }) {
+    const ctnDom = useRef(null);
+    const vert = /* glsl */ `
+    precision highp float;
+    attribute vec2 position;
+    attribute vec2 uv;
+    varying vec2 vUv;
+    void main() {
+      vUv = uv;
+      gl_Position = vec4(position, 0.0, 1.0);
+    }
+  `;
+    const frag = /* glsl */ `
+    precision highp float;
+
+    uniform float iTime;
+    uniform vec3 iResolution;
+    uniform float hue;
+    uniform float hover;
+    uniform float rot;
+    uniform float hoverIntensity;
+    varying vec2 vUv;
+
+    vec3 rgb2yiq(vec3 c) {
+      float y = dot(c, vec3(0.299, 0.587, 0.114));
+      float i = dot(c, vec3(0.596, -0.274, -0.322));
+      float q = dot(c, vec3(0.211, -0.523, 0.312));
+      return vec3(y, i, q);
+    }
+    
+    vec3 yiq2rgb(vec3 c) {
+      float r = c.x + 0.956 * c.y + 0.621 * c.z;
+      float g = c.x - 0.272 * c.y - 0.647 * c.z;
+      float b = c.x - 1.106 * c.y + 1.703 * c.z;
+      return vec3(r, g, b);
+    }
+    
+    vec3 adjustHue(vec3 color, float hueDeg) {
+      float hueRad = hueDeg * 3.14159265 / 180.0;
+      vec3 yiq = rgb2yiq(color);
+      float cosA = cos(hueRad);
+      float sinA = sin(hueRad);
+      float i = yiq.y * cosA - yiq.z * sinA;
+      float q = yiq.y * sinA + yiq.z * cosA;
+      yiq.y = i;
+      yiq.z = q;
+      return yiq2rgb(yiq);
+    }
+    
+    vec3 hash33(vec3 p3) {
+      p3 = fract(p3 * vec3(0.1031, 0.11369, 0.13787));
+      p3 += dot(p3, p3.yxz + 19.19);
+      return -1.0 + 2.0 * fract(vec3(
+        p3.x + p3.y,
+        p3.x + p3.z,
+        p3.y + p3.z
+      ) * p3.zyx);
+    }
+    
+    float snoise3(vec3 p) {
+      const float K1 = 0.333333333;
+      const float K2 = 0.166666667;
+      vec3 i = floor(p + (p.x + p.y + p.z) * K1);
+      vec3 d0 = p - (i - (i.x + i.y + i.z) * K2);
+      vec3 e = step(vec3(0.0), d0 - d0.yzx);
+      vec3 i1 = e * (1.0 - e.zxy);
+      vec3 i2 = 1.0 - e.zxy * (1.0 - e);
+      vec3 d1 = d0 - (i1 - K2);
+      vec3 d2 = d0 - (i2 - K1);
+      vec3 d3 = d0 - 0.5;
+      vec4 h = max(0.6 - vec4(
+        dot(d0, d0),
+        dot(d1, d1),
+        dot(d2, d2),
+        dot(d3, d3)
+      ), 0.0);
+      vec4 n = h * h * h * h * vec4(
+        dot(d0, hash33(i)),
+        dot(d1, hash33(i + i1)),
+        dot(d2, hash33(i + i2)),
+        dot(d3, hash33(i + 1.0))
+      );
+      return dot(vec4(31.316), n);
+    }
+    
+    vec4 extractAlpha(vec3 colorIn) {
+      float a = max(max(colorIn.r, colorIn.g), colorIn.b);
+      return vec4(colorIn.rgb / (a + 1e-5), a);
+    }
+    
+    const vec3 baseColor1 = vec3(0.611765, 0.262745, 0.996078);
+    const vec3 baseColor2 = vec3(0.298039, 0.760784, 0.913725);
+    const vec3 baseColor3 = vec3(0.062745, 0.078431, 0.600000);
+    const float innerRadius = 0.6;
+    const float noiseScale = 0.65;
+    
+    float light1(float intensity, float attenuation, float dist) {
+      return intensity / (1.0 + dist * attenuation);
+    }
+    
+    float light2(float intensity, float attenuation, float dist) {
+      return intensity / (1.0 + dist * dist * attenuation);
+    }
+    
+    vec4 draw(vec2 uv) {
+      vec3 color1 = adjustHue(baseColor1, hue);
+      vec3 color2 = adjustHue(baseColor2, hue);
+      vec3 color3 = adjustHue(baseColor3, hue);
+      
+      float ang = atan(uv.y, uv.x);
+      float len = length(uv);
+      float invLen = len > 0.0 ? 1.0 / len : 0.0;
+      
+      float n0 = snoise3(vec3(uv * noiseScale, iTime * 0.5)) * 0.5 + 0.5;
+      float r0 = mix(mix(innerRadius, 1.0, 0.4), mix(innerRadius, 1.0, 0.6), n0);
+      float d0 = distance(uv, (r0 * invLen) * uv);
+      float v0 = light1(1.0, 10.0, d0);
+      v0 *= smoothstep(r0 * 1.05, r0, len);
+      float cl = cos(ang + iTime * 2.0) * 0.5 + 0.5;
+      
+      float a = iTime * -1.0;
+      vec2 pos = vec2(cos(a), sin(a)) * r0;
+      float d = distance(uv, pos);
+      float v1 = light2(1.5, 5.0, d);
+      v1 *= light1(1.0, 50.0, d0);
+      
+      float v2 = smoothstep(1.0, mix(innerRadius, 1.0, n0 * 0.5), len);
+      float v3 = smoothstep(innerRadius, mix(innerRadius, 1.0, 0.5), len);
+      
+      vec3 col = mix(color1, color2, cl);
+      col = mix(color3, col, v0);
+      col = (col + v1) * v2 * v3;
+      col = clamp(col, 0.0, 1.0);
+      
+      return extractAlpha(col);
+    }
+    
+    vec4 mainImage(vec2 fragCoord) {
+      vec2 center = iResolution.xy * 0.5;
+      float size = min(iResolution.x, iResolution.y);
+      vec2 uv = (fragCoord - center) / size * 2.0;
+      
+      float angle = rot;
+      float s = sin(angle);
+      float c = cos(angle);
+      uv = vec2(c * uv.x - s * uv.y, s * uv.x + c * uv.y);
+      
+      uv.x += hover * hoverIntensity * 0.1 * sin(uv.y * 10.0 + iTime);
+      uv.y += hover * hoverIntensity * 0.1 * sin(uv.x * 10.0 + iTime);
+      
+      return draw(uv);
+    }
+    
+    void main() {
+      vec2 fragCoord = vUv * iResolution.xy;
+      vec4 col = mainImage(fragCoord);
+      gl_FragColor = vec4(col.rgb * col.a, col.a);
+    }
+  `;
+    useEffect(() => {
+        const container = ctnDom.current;
+        if (!container)
+            return;
+        const renderer = new Renderer({ alpha: true, premultipliedAlpha: false });
+        const gl = renderer.gl;
+        gl.clearColor(0, 0, 0, 0);
+        container.appendChild(gl.canvas);
+        const geometry = new Triangle(gl);
+        const program = new Program(gl, {
+            vertex: vert,
+            fragment: frag,
+            uniforms: {
+                iTime: { value: 0 },
+                iResolution: {
+                    value: new Vec3(gl.canvas.width, gl.canvas.height, gl.canvas.width / gl.canvas.height),
+                },
+                hue: { value: hue },
+                hover: { value: 0 },
+                rot: { value: 0 },
+                hoverIntensity: { value: hoverIntensity },
+            },
+        });
+        const mesh = new Mesh(gl, { geometry, program });
+        function resize() {
+            if (!container)
+                return;
+            const dpr = window.devicePixelRatio || 1;
+            const width = container.clientWidth;
+            const height = container.clientHeight;
+            renderer.setSize(width * dpr, height * dpr);
+            gl.canvas.style.width = width + "px";
+            gl.canvas.style.height = height + "px";
+            program.uniforms.iResolution.value.set(gl.canvas.width, gl.canvas.height, gl.canvas.width / gl.canvas.height);
+        }
+        window.addEventListener("resize", resize);
+        resize();
+        let targetHover = 0;
+        let lastTime = 0;
+        let currentRot = 0;
+        const rotationSpeed = 0.3; // radians per second
+        const handleMouseMove = (e) => {
+            const rect = container.getBoundingClientRect();
+            const x = e.clientX - rect.left;
+            const y = e.clientY - rect.top;
+            const width = rect.width;
+            const height = rect.height;
+            const size = Math.min(width, height);
+            const centerX = width / 2;
+            const centerY = height / 2;
+            const uvX = ((x - centerX) / size) * 2.0;
+            const uvY = ((y - centerY) / size) * 2.0;
+            if (Math.sqrt(uvX * uvX + uvY * uvY) < 0.8) {
+                targetHover = 1;
+            }
+            else {
+                targetHover = 0;
+            }
+        };
+        const handleMouseLeave = () => {
+            targetHover = 0;
+        };
+        if (hoverIntensity) {
+            container.addEventListener("mousemove", handleMouseMove);
+            container.addEventListener("mouseleave", handleMouseLeave);
+        }
+        let rafId;
+        const update = (t) => {
+            rafId = requestAnimationFrame(update);
+            const dt = (t - lastTime) * 0.001;
+            lastTime = t;
+            program.uniforms.iTime.value = t * 0.001;
+            program.uniforms.hue.value = hue;
+            program.uniforms.hoverIntensity.value = hoverIntensity;
+            const effectiveHover = forceHoverState ? 1 : targetHover;
+            program.uniforms.hover.value +=
+                (effectiveHover - program.uniforms.hover.value) * 0.1;
+            if (rotateOnHover && effectiveHover > 0.5) {
+                currentRot += dt * rotationSpeed;
+            }
+            program.uniforms.rot.value = currentRot;
+            renderer.render({ scene: mesh });
+        };
+        rafId = requestAnimationFrame(update);
+        return () => {
+            cancelAnimationFrame(rafId);
+            window.removeEventListener("resize", resize);
+            if (hoverIntensity) {
+                container.removeEventListener("mousemove", handleMouseMove);
+                container.removeEventListener("mouseleave", handleMouseLeave);
+            }
+            container.removeChild(gl.canvas);
+            gl.getExtension("WEBGL_lose_context")?.loseContext();
+        };
+    }, [hue, hoverIntensity, rotateOnHover, forceHoverState, vert, frag]);
+    return <div ref={ctnDom} className="h-full w-full"/>;
+}

package/components/Orb/index.d.ts

@@ -0,0 +1,3 @@
+import Orb from "./Orb";
+export * from "./Orb";
+export default Orb;

package/components/Orb/index.jsx

@@ -0,0 +1,3 @@
+import Orb from "./Orb";
+export * from "./Orb";
+export default Orb;