@flikk/ui 1.0.0-beta.1

package/dist/components/effects/SpotlightBorder/SpotlightBorder.js

@@ -0,0 +1,214 @@
+import { jsx } from 'react/jsx-runtime';
+import { useRef, useEffect } from 'react';
+import * as THREE from 'three';
+import { cn } from '../../../utils/cn.js';
+import { variationMap } from './SpotlightBorder.types.js';
+import { fragmentShader, vertexShader } from './SpotlightBorder.shaders.js';
+
+/**
+ * SpotlightBorder Component
+ * Adds an interactive WebGL border effect around its children.
+ * The border illuminates near the mouse cursor and supports a soft outer glow.
+ * Refactored to handle larger canvas for external glow and prevent clipping of child shadows.
+ *
+ * @example
+ * ```tsx
+ * <SpotlightBorder color="#3b82f6" borderWidth={2} className="rounded-xl">
+ *   <div className="p-6 bg-gray-900">
+ *     <h3>Premium Card</h3>
+ *   </div>
+ * </SpotlightBorder>
+ * ```
+ */
+const SpotlightBorder = ({ children, variation = "rounded-rect", rounded, borderWidth = 2, color = "#ffffff", spotlightSize = 0.4, spotlightEdge = 0.5, glowExtent = 20, glowIntensity = 0.6, tiltIntensity = 5, shouldAnimate = true, className, style, ...props }) => {
+    var _a;
+    const outerRef = useRef(null);
+    const containerRef = useRef(null);
+    // Check for reduced motion preference
+    const prefersReducedMotion = typeof window !== "undefined" &&
+        ((_a = window.matchMedia) === null || _a === void 0 ? void 0 : _a.call(window, "(prefers-reduced-motion: reduce)").matches);
+    const isAnimating = shouldAnimate && !prefersReducedMotion;
+    // Refs to store THREE.js objects across effects
+    const rendererRef = useRef(null);
+    const sceneRef = useRef(null);
+    const cameraRef = useRef(null);
+    const materialRef = useRef(null);
+    const quadRef = useRef(null);
+    const geoRef = useRef(null);
+    const canvasRef = useRef(null);
+    // Refs for animation state
+    const vMouseRef = useRef(new THREE.Vector2(-1e4, -1e4));
+    const vMouseDampRef = useRef(new THREE.Vector2(-1e4, -1e4));
+    const vResolutionRef = useRef(new THREE.Vector2());
+    const vContentResolutionRef = useRef(new THREE.Vector2());
+    const vOffsetRef = useRef(new THREE.Vector2());
+    const rotateXDampRef = useRef(0);
+    const rotateYDampRef = useRef(0);
+    const wRef = useRef(1);
+    const hRef = useRef(1);
+    // One-time setup effect: creates renderer, scene, camera, geometry, material, mesh
+    useEffect(() => {
+        var _a;
+        const outer = outerRef.current;
+        const container = containerRef.current;
+        if (!outer || !container || !isAnimating)
+            return;
+        const scene = new THREE.Scene();
+        const camera = new THREE.OrthographicCamera();
+        camera.position.z = 1;
+        const renderer = new THREE.WebGLRenderer({ alpha: true });
+        renderer.setClearColor(0x000000, 0);
+        const canvas = renderer.domElement;
+        canvas.style.position = "absolute";
+        canvas.style.pointerEvents = "none";
+        canvas.style.zIndex = "10";
+        outer.appendChild(canvas);
+        const geo = new THREE.PlaneGeometry(1, 1);
+        const material = new THREE.ShaderMaterial({
+            vertexShader,
+            fragmentShader,
+            uniforms: {
+                u_mouse: { value: vMouseDampRef.current },
+                u_resolution: { value: vResolutionRef.current },
+                u_contentResolution: { value: vContentResolutionRef.current },
+                u_offset: { value: vOffsetRef.current },
+                u_pixelRatio: { value: Math.min(window.devicePixelRatio || 1, 2) },
+                u_color: { value: new THREE.Color(color) },
+                u_shapeSize: { value: 1.0 },
+                u_roundness: { value: 0.0 },
+                u_borderSize: { value: 0.0 },
+                u_spotlightSize: { value: spotlightSize },
+                u_spotlightEdge: { value: spotlightEdge },
+                u_glowIntensity: { value: glowIntensity },
+            },
+            defines: { VAR: (_a = variationMap[variation]) !== null && _a !== void 0 ? _a : 0 },
+            transparent: true,
+        });
+        const quad = new THREE.Mesh(geo, material);
+        scene.add(quad);
+        // Store refs
+        rendererRef.current = renderer;
+        sceneRef.current = scene;
+        cameraRef.current = camera;
+        materialRef.current = material;
+        quadRef.current = quad;
+        geoRef.current = geo;
+        canvasRef.current = canvas;
+        let animationFrameId;
+        const onPointerMove = (e) => {
+            if (!container)
+                return;
+            const rect = container.getBoundingClientRect();
+            vMouseRef.current.set(e.clientX - rect.left, e.clientY - rect.top);
+        };
+        document.addEventListener("mousemove", onPointerMove);
+        document.addEventListener("pointermove", onPointerMove);
+        const borderRadiusPx = parseFloat(getComputedStyle(outer).borderRadius) || 0;
+        const resize = () => {
+            if (!container || !outer)
+                return;
+            const w = container.clientWidth;
+            const h = container.clientHeight;
+            wRef.current = w;
+            hRef.current = h;
+            const dpr = Math.min(window.devicePixelRatio || 1, 2);
+            const canvasW = w + glowExtent * 2;
+            const canvasH = h + glowExtent * 2;
+            renderer.setSize(canvasW, canvasH);
+            renderer.setPixelRatio(dpr);
+            canvas.style.top = `-${glowExtent}px`;
+            canvas.style.left = `-${glowExtent}px`;
+            canvas.style.width = `${canvasW}px`;
+            canvas.style.height = `${canvasH}px`;
+            camera.left = -canvasW / 2;
+            camera.right = canvasW / 2;
+            camera.top = canvasH / 2;
+            camera.bottom = -canvasH / 2;
+            camera.updateProjectionMatrix();
+            quad.scale.set(canvasW, canvasH, 1);
+            vResolutionRef.current.set(canvasW, canvasH).multiplyScalar(dpr);
+            vContentResolutionRef.current.set(w, h).multiplyScalar(dpr);
+            vOffsetRef.current.set(glowExtent, glowExtent).multiplyScalar(dpr);
+            material.uniforms.u_pixelRatio.value = dpr;
+            const shortestDim = Math.min(w, h);
+            const childEl = rounded ? null : container.firstElementChild;
+            const currentRadius = childEl
+                ? parseFloat(getComputedStyle(childEl).borderRadius) || borderRadiusPx
+                : parseFloat(getComputedStyle(outer).borderRadius) || borderRadiusPx;
+            const normalizedRoundness = Math.min((currentRadius / shortestDim) * 2, 1);
+            material.uniforms.u_roundness.value = normalizedRoundness;
+            const normalizedBorderWidth = borderWidth / shortestDim;
+            material.uniforms.u_borderSize.value = normalizedBorderWidth;
+        };
+        resize();
+        window.addEventListener("resize", resize);
+        const ro = new ResizeObserver(() => resize());
+        ro.observe(container);
+        const animate = (now) => {
+            const vMouse = vMouseRef.current;
+            const vMouseDamp = vMouseDampRef.current;
+            const w = wRef.current;
+            const h = hRef.current;
+            vMouseDamp.x += (vMouse.x - vMouseDamp.x) * 0.1;
+            vMouseDamp.y += (vMouse.y - vMouseDamp.y) * 0.1;
+            if (tiltIntensity > 0 && outer && w > 0 && h > 0) {
+                const isInside = vMouseDamp.x >= 0 &&
+                    vMouseDamp.x <= w &&
+                    vMouseDamp.y >= 0 &&
+                    vMouseDamp.y <= h;
+                let targetRotateX = 0;
+                let targetRotateY = 0;
+                if (isInside) {
+                    const offsetX = vMouseDamp.x / w - 0.5;
+                    const offsetY = vMouseDamp.y / h - 0.5;
+                    targetRotateY = offsetX * tiltIntensity;
+                    targetRotateX = -offsetY * tiltIntensity;
+                }
+                rotateXDampRef.current += (targetRotateX - rotateXDampRef.current) * 0.08;
+                rotateYDampRef.current += (targetRotateY - rotateYDampRef.current) * 0.08;
+                outer.style.transform = `perspective(1000px) rotateX(${rotateXDampRef.current}deg) rotateY(${rotateYDampRef.current}deg)`;
+            }
+            renderer.render(scene, camera);
+            animationFrameId = requestAnimationFrame(animate);
+        };
+        animationFrameId = requestAnimationFrame(animate);
+        return () => {
+            document.removeEventListener("mousemove", onPointerMove);
+            document.removeEventListener("pointermove", onPointerMove);
+            window.removeEventListener("resize", resize);
+            ro.disconnect();
+            cancelAnimationFrame(animationFrameId);
+            if (outer.contains(canvas)) {
+                outer.removeChild(canvas);
+            }
+            renderer.dispose();
+            geo.dispose();
+            material.dispose();
+            rendererRef.current = null;
+            sceneRef.current = null;
+            cameraRef.current = null;
+            materialRef.current = null;
+            quadRef.current = null;
+            geoRef.current = null;
+            canvasRef.current = null;
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isAnimating, variation]);
+    // Update shader uniforms when props change (without tearing down WebGL)
+    useEffect(() => {
+        const material = materialRef.current;
+        if (!material)
+            return;
+        material.uniforms.u_color.value.set(color);
+        material.uniforms.u_spotlightSize.value = spotlightSize;
+        material.uniforms.u_spotlightEdge.value = spotlightEdge;
+        material.uniforms.u_glowIntensity.value = glowIntensity;
+    }, [color, spotlightSize, spotlightEdge, glowIntensity]);
+    const containerStyle = {
+        ...style,
+        ...(rounded ? { borderRadius: rounded } : {}),
+    };
+    return (jsx("div", { ref: outerRef, className: cn("relative overflow-visible", className), style: containerStyle, ...props, children: jsx("div", { ref: containerRef, className: "relative w-full h-full", style: { borderRadius: "inherit", zIndex: 20 }, children: children }) }));
+};
+
+export { SpotlightBorder };

package/dist/components/effects/SpotlightBorder/SpotlightBorder.shaders.d.ts

@@ -0,0 +1,7 @@
+/**
+ * GLSL Shaders for SpotlightBorder effect
+ * Uses Signed Distance Functions (SDFs) with aspect-correct coordinates
+ * Supports larger canvas for external glow and suppresses inner glow.
+ */
+export declare const vertexShader = "\nvarying vec2 v_texcoord;\nvoid main() {\n    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n    v_texcoord = uv;\n}\n";
+export declare const fragmentShader = "\nvarying vec2 v_texcoord;\n\nuniform vec2 u_mouse;\nuniform vec2 u_resolution;         // Canvas resolution\nuniform vec2 u_contentResolution;  // Card/Content resolution\nuniform vec2 u_offset;             // Pixel offset of content within canvas\nuniform float u_pixelRatio;\nuniform vec3 u_color;\n\nuniform float u_shapeSize;\nuniform float u_roundness;\nuniform float u_borderSize;\nuniform float u_spotlightSize;\nuniform float u_spotlightEdge;\nuniform float u_glowIntensity;\n\n#ifndef PI\n#define PI 3.1415926535897932384626433832795\n#endif\n#ifndef TWO_PI\n#define TWO_PI 6.2831853071795864769252867665590\n#endif\n\n#ifndef VAR\n#define VAR 0\n#endif\n\n// Signed Distance Function for rounded box\nfloat sdRoundedBox(vec2 p, vec2 b, float r) {\n    vec2 q = abs(p) - b + r;\n    return length(max(q, 0.0)) + min(max(q.x, q.y), 0.0) - r;\n}\n\n// Signed Distance Function for circle\nfloat sdCircle(vec2 p, float r) {\n    return length(p) - r;\n}\n\n// Signed Distance Function for equilateral triangle\nfloat sdPoly(vec2 p, float r, int sides) {\n    float an = PI / float(sides);\n    float en = TWO_PI / float(sides);\n    float he = r * tan(0.5 * an);\n    float a = atan(p.x, -p.y) + an; \n    float bn = floor(a / en);\n    a -= (bn + 0.5) * en;\n    p = length(p) * vec2(cos(a), sin(a));\n    return p.x * cos(an) - p.y * sin(an) - r * cos(an);\n}\n\n// Smooth stroke with anti-aliasing\nfloat smoothStroke(float d, float width, float pixelSize) {\n    float halfWidth = width * 0.5;\n    float alpha = smoothstep(halfWidth + pixelSize, halfWidth - pixelSize, abs(d));\n    return alpha;\n}\n\n// Smooth fill\nfloat smoothFill(float d, float pixelSize) {\n    return 1.0 - smoothstep(-pixelSize, pixelSize, d);\n}\n\nvoid main() {\n    // 1. Setup Coordinates relative to CONTENT area\n    // gl_FragCoord is in canvas pixels. We subtract offset to get relative to card.\n    vec2 fragRelative = gl_FragCoord.xy - u_offset;\n    vec2 uv = fragRelative / u_contentResolution.xy;\n    \n    // We want the shader to be centered at 0.5 in CONTENT area\n    float aspect = u_contentResolution.x / u_contentResolution.y;\n    vec2 p = (uv - 0.5) * vec2(aspect, 1.0);\n    \n    // Mouse setup (mouse is also relative to card)\n    vec2 mouseUV = u_mouse * u_pixelRatio / u_contentResolution.xy;\n    vec2 m = (mouseUV - 0.5) * vec2(aspect, 1.0);\n    m.y *= -1.0; \n    \n    // 2. Shape Parameters\n    vec2 boxSize = vec2(aspect, 1.0) * 0.5 * u_shapeSize;\n    float pixelSize = 1.0 / u_contentResolution.y; \n    \n    // 3. Mouse Interaction (Spotlight)\n    float mouseDist = length(p - m);\n    \n    // Spotlight follows mouse - reveal factor\n    float spotlight = smoothstep(u_spotlightSize + u_spotlightEdge, u_spotlightSize * 0.1, mouseDist);\n    \n    // 4. Draw Shape\n    float d = 0.0;\n    float borderAlpha = 0.0;\n    float glowAlpha = 0.0;\n    \n    if (VAR == 0) {\n        // Correctly scale corner radius by the shortest dimension in p-space\n        float radius = u_roundness * 0.5 * min(aspect, 1.0);\n        d = sdRoundedBox(p, boxSize, radius);\n        \n        // Sharp border stroke\n        float strokeD = d + u_borderSize * 0.5;\n        borderAlpha = smoothStroke(strokeD, u_borderSize, pixelSize * 2.0);\n        \n        // Gradual glow - ONLY OUTSIDE (d > 0)\n        float glowRadius = u_borderSize * 15.0; \n        if (d > 0.0) {\n            glowAlpha = exp(-d / (glowRadius * 0.25)) * 0.5 * u_glowIntensity;\n        } else {\n            // Suppress inner glow\n            glowAlpha = 0.0;\n        }\n    } \n    else if (VAR == 1) {\n        d = sdCircle(p, 0.5 * u_shapeSize); \n        borderAlpha = smoothFill(d, pixelSize);\n        if (d > 0.0) glowAlpha = exp(-d / 0.1) * 0.3 * u_glowIntensity;\n    }\n    else if (VAR == 2) {\n        d = sdCircle(p, 0.5 * u_shapeSize);\n        float strokeD = d + u_borderSize * 0.5;\n        borderAlpha = smoothStroke(strokeD, u_borderSize, pixelSize * 2.0);\n        if (d > 0.0) glowAlpha = exp(-d / (u_borderSize * 5.0)) * 0.4 * u_glowIntensity;\n    }\n    else if (VAR == 3) {\n        d = sdPoly(p + vec2(0.0, 0.1), 0.3 * u_shapeSize, 3);\n        borderAlpha = smoothFill(d, pixelSize);\n        if (d > 0.0) glowAlpha = exp(-d / 0.1) * 0.3 * u_glowIntensity;\n    }\n    \n    // Apply spotlight mask\n    borderAlpha *= spotlight;\n    glowAlpha *= spotlight;\n    \n    // Combine\n    float finalAlpha = max(glowAlpha, borderAlpha);\n\n    gl_FragColor = vec4(u_color, finalAlpha);\n}\n";

package/dist/components/effects/SpotlightBorder/SpotlightBorder.shaders.js

@@ -0,0 +1,152 @@
+/**
+ * GLSL Shaders for SpotlightBorder effect
+ * Uses Signed Distance Functions (SDFs) with aspect-correct coordinates
+ * Supports larger canvas for external glow and suppresses inner glow.
+ */
+const vertexShader = /* glsl */ `
+varying vec2 v_texcoord;
+void main() {
+    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+    v_texcoord = uv;
+}
+`;
+const fragmentShader = /* glsl */ `
+varying vec2 v_texcoord;
+
+uniform vec2 u_mouse;
+uniform vec2 u_resolution;         // Canvas resolution
+uniform vec2 u_contentResolution;  // Card/Content resolution
+uniform vec2 u_offset;             // Pixel offset of content within canvas
+uniform float u_pixelRatio;
+uniform vec3 u_color;
+
+uniform float u_shapeSize;
+uniform float u_roundness;
+uniform float u_borderSize;
+uniform float u_spotlightSize;
+uniform float u_spotlightEdge;
+uniform float u_glowIntensity;
+
+#ifndef PI
+#define PI 3.1415926535897932384626433832795
+#endif
+#ifndef TWO_PI
+#define TWO_PI 6.2831853071795864769252867665590
+#endif
+
+#ifndef VAR
+#define VAR 0
+#endif
+
+// Signed Distance Function for rounded box
+float sdRoundedBox(vec2 p, vec2 b, float r) {
+    vec2 q = abs(p) - b + r;
+    return length(max(q, 0.0)) + min(max(q.x, q.y), 0.0) - r;
+}
+
+// Signed Distance Function for circle
+float sdCircle(vec2 p, float r) {
+    return length(p) - r;
+}
+
+// Signed Distance Function for equilateral triangle
+float sdPoly(vec2 p, float r, int sides) {
+    float an = PI / float(sides);
+    float en = TWO_PI / float(sides);
+    float he = r * tan(0.5 * an);
+    float a = atan(p.x, -p.y) + an; 
+    float bn = floor(a / en);
+    a -= (bn + 0.5) * en;
+    p = length(p) * vec2(cos(a), sin(a));
+    return p.x * cos(an) - p.y * sin(an) - r * cos(an);
+}
+
+// Smooth stroke with anti-aliasing
+float smoothStroke(float d, float width, float pixelSize) {
+    float halfWidth = width * 0.5;
+    float alpha = smoothstep(halfWidth + pixelSize, halfWidth - pixelSize, abs(d));
+    return alpha;
+}
+
+// Smooth fill
+float smoothFill(float d, float pixelSize) {
+    return 1.0 - smoothstep(-pixelSize, pixelSize, d);
+}
+
+void main() {
+    // 1. Setup Coordinates relative to CONTENT area
+    // gl_FragCoord is in canvas pixels. We subtract offset to get relative to card.
+    vec2 fragRelative = gl_FragCoord.xy - u_offset;
+    vec2 uv = fragRelative / u_contentResolution.xy;
+    
+    // We want the shader to be centered at 0.5 in CONTENT area
+    float aspect = u_contentResolution.x / u_contentResolution.y;
+    vec2 p = (uv - 0.5) * vec2(aspect, 1.0);
+    
+    // Mouse setup (mouse is also relative to card)
+    vec2 mouseUV = u_mouse * u_pixelRatio / u_contentResolution.xy;
+    vec2 m = (mouseUV - 0.5) * vec2(aspect, 1.0);
+    m.y *= -1.0; 
+    
+    // 2. Shape Parameters
+    vec2 boxSize = vec2(aspect, 1.0) * 0.5 * u_shapeSize;
+    float pixelSize = 1.0 / u_contentResolution.y; 
+    
+    // 3. Mouse Interaction (Spotlight)
+    float mouseDist = length(p - m);
+    
+    // Spotlight follows mouse - reveal factor
+    float spotlight = smoothstep(u_spotlightSize + u_spotlightEdge, u_spotlightSize * 0.1, mouseDist);
+    
+    // 4. Draw Shape
+    float d = 0.0;
+    float borderAlpha = 0.0;
+    float glowAlpha = 0.0;
+    
+    if (VAR == 0) {
+        // Correctly scale corner radius by the shortest dimension in p-space
+        float radius = u_roundness * 0.5 * min(aspect, 1.0);
+        d = sdRoundedBox(p, boxSize, radius);
+        
+        // Sharp border stroke
+        float strokeD = d + u_borderSize * 0.5;
+        borderAlpha = smoothStroke(strokeD, u_borderSize, pixelSize * 2.0);
+        
+        // Gradual glow - ONLY OUTSIDE (d > 0)
+        float glowRadius = u_borderSize * 15.0; 
+        if (d > 0.0) {
+            glowAlpha = exp(-d / (glowRadius * 0.25)) * 0.5 * u_glowIntensity;
+        } else {
+            // Suppress inner glow
+            glowAlpha = 0.0;
+        }
+    } 
+    else if (VAR == 1) {
+        d = sdCircle(p, 0.5 * u_shapeSize); 
+        borderAlpha = smoothFill(d, pixelSize);
+        if (d > 0.0) glowAlpha = exp(-d / 0.1) * 0.3 * u_glowIntensity;
+    }
+    else if (VAR == 2) {
+        d = sdCircle(p, 0.5 * u_shapeSize);
+        float strokeD = d + u_borderSize * 0.5;
+        borderAlpha = smoothStroke(strokeD, u_borderSize, pixelSize * 2.0);
+        if (d > 0.0) glowAlpha = exp(-d / (u_borderSize * 5.0)) * 0.4 * u_glowIntensity;
+    }
+    else if (VAR == 3) {
+        d = sdPoly(p + vec2(0.0, 0.1), 0.3 * u_shapeSize, 3);
+        borderAlpha = smoothFill(d, pixelSize);
+        if (d > 0.0) glowAlpha = exp(-d / 0.1) * 0.3 * u_glowIntensity;
+    }
+    
+    // Apply spotlight mask
+    borderAlpha *= spotlight;
+    glowAlpha *= spotlight;
+    
+    // Combine
+    float finalAlpha = max(glowAlpha, borderAlpha);
+
+    gl_FragColor = vec4(u_color, finalAlpha);
+}
+`;
+
+export { fragmentShader, vertexShader };

package/dist/components/effects/SpotlightBorder/SpotlightBorder.types.d.ts

@@ -0,0 +1,61 @@
+import React from "react";
+export type SpotlightBorderVariation = "rounded-rect" | "circle" | "circle-ring" | "triangle";
+export declare const variationMap: Record<SpotlightBorderVariation, number>;
+export interface SpotlightBorderProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Content to wrap with the effect */
+    children: React.ReactNode;
+    /**
+     * Shape variation for the border
+     * @default 'rounded-rect'
+     */
+    variation?: SpotlightBorderVariation;
+    /**
+     * Border radius for the container (e.g., "1rem", "var(--button-radius)", "9999px")
+     * This controls both the container clip and the shader's corner roundness.
+     * @default undefined (inherits from className like rounded-lg)
+     */
+    rounded?: string;
+    /**
+     * Border/stroke width in pixels
+     * @default 2
+     */
+    borderWidth?: number;
+    /**
+     * Color of the border effect (hex color)
+     * @default '#ffffff'
+     */
+    color?: string;
+    /**
+     * Size of the mouse-following spotlight (0-1)
+     * @default 0.4
+     */
+    spotlightSize?: number;
+    /**
+     * Edge softness of the spotlight (higher = softer falloff)
+     * @default 0.5
+     */
+    spotlightEdge?: number;
+    /**
+     * Whether to animate the effect (respects prefers-reduced-motion)
+     * @default true
+     */
+    shouldAnimate?: boolean;
+    /**
+     * How far the glow can spread outside the container in pixels.
+     * This also solves clipping issues with child shadows.
+     * @default 20
+     */
+    glowExtent?: number;
+    /**
+     * Overall intensity of the glow halo (0-1)
+     * @default 0.6
+     */
+    glowIntensity?: number;
+    /**
+     * Intensity of the 3D tilt effect based on mouse position (0 = disabled)
+     * @default 10
+     */
+    tiltIntensity?: number;
+    /** Additional className for the container */
+    className?: string;
+}

package/dist/components/effects/SpotlightBorder/SpotlightBorder.types.js

@@ -0,0 +1,8 @@
+const variationMap = {
+    "rounded-rect": 0,
+    circle: 1,
+    "circle-ring": 2,
+    triangle: 3,
+};
+
+export { variationMap };

package/dist/components/effects/SpotlightBorder/index.d.ts

@@ -0,0 +1,2 @@
+export { SpotlightBorder } from "./SpotlightBorder";
+export type { SpotlightBorderProps, SpotlightBorderVariation, } from "./SpotlightBorder.types";

package/dist/components/effects/index.d.ts

@@ -0,0 +1,14 @@
+export { CustomCursor } from "./CustomCursor";
+export type { CustomCursorProps } from "./CustomCursor";
+export { GlassEffect } from "./GlassEffect";
+export type { GlassEffectProps, BlendMode } from "./GlassEffect";
+export { Overlay } from "./Overlay";
+export type { OverlayProps, OverlayPosition, OverlayAnimations, } from "./Overlay";
+export { SpotlightBorder } from "./SpotlightBorder";
+export type { SpotlightBorderProps, SpotlightBorderVariation, } from "./SpotlightBorder";
+export { GlassSurface } from "./GlassSurface";
+export type { GlassSurfaceProps, GlassChannel, GlassMixBlendMode, } from "./GlassSurface";
+export { AIOrb } from "./AIOrb";
+export type { AIOrbProps, DotSphereProps, LiquidProps } from "./AIOrb";
+export { Animated } from "./Animated";
+export type { AnimatedGroupProps, AnimatedItemProps, AnimationPreset, AnimatedElement, } from "./Animated";

package/dist/components/effects/index.js

@@ -0,0 +1,7 @@
+export { CustomCursor } from './CustomCursor/CustomCursor.js';
+export { GlassEffect } from './GlassEffect/GlassEffect.js';
+export { Overlay } from './Overlay/Overlay.js';
+export { SpotlightBorder } from './SpotlightBorder/SpotlightBorder.js';
+export { GlassSurface } from './GlassSurface/GlassSurface.js';
+export { AIOrb } from './AIOrb/AIOrb.js';
+export { Animated } from './Animated/Animated.js';

package/dist/components/forms/Checkbox/Checkbox.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import { CheckboxProps } from "./Checkbox.types";
+/**
+ * Checkbox component for selecting one or more options
+ */
+export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;

package/dist/components/forms/Checkbox/Checkbox.js

@@ -0,0 +1,43 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default, { useState, useRef, useEffect } from 'react';
+import { checkboxTheme } from './Checkbox.theme.js';
+import { FormLabel } from '../FormLabel/FormLabel.js';
+import { MinusIcon, CheckIcon } from '@heroicons/react/24/outline';
+import { cn } from '../../../utils/cn.js';
+
+/**
+ * Checkbox component for selecting one or more options
+ */
+const Checkbox = React__default.forwardRef(({ id, name, value, checked: controlledChecked, indeterminate = false, onChange, label, description, state = "default", size = "md", className, ...restProps }, ref) => {
+    const [internalChecked, setInternalChecked] = useState(false);
+    const inputRef = useRef(null);
+    // Determine if component is controlled or uncontrolled
+    const isControlled = controlledChecked !== undefined;
+    const isChecked = isControlled ? controlledChecked : internalChecked;
+    // Set indeterminate property on the input element
+    useEffect(() => {
+        if (inputRef.current) {
+            inputRef.current.indeterminate = indeterminate;
+        }
+    }, [indeterminate]);
+    // Derive state flags
+    const isDisabled = state === "disabled";
+    const handleChange = (e) => {
+        if (isDisabled)
+            return;
+        if (!isControlled) {
+            setInternalChecked(e.target.checked);
+        }
+        onChange === null || onChange === void 0 ? void 0 : onChange(e.target.checked, value);
+    };
+    return (jsxs("div", { className: cn(checkboxTheme.baseStyle, className), ...restProps, children: [jsxs("div", { className: cn(checkboxTheme.inputContainerStyle, checkboxTheme.sizes[size]), children: [jsx("input", { ref: (node) => {
+                            inputRef.current = node;
+                            if (typeof ref === 'function')
+                                ref(node);
+                            else if (ref)
+                                ref.current = node;
+                        }, type: "checkbox", id: id, name: name, value: value, checked: isChecked, onChange: handleChange, disabled: isDisabled, "aria-describedby": description ? `${id}-description` : undefined, "data-state": isDisabled ? "disabled" : "default", className: cn(checkboxTheme.inputStyle, checkboxTheme.sizes[size], indeterminate && "bg-neutral-200") }), indeterminate && (jsx(MinusIcon, { className: cn("pointer-events-none col-start-1 row-start-1 self-center justify-self-center opacity-100 stroke-neutral-600 transition-opacity duration-200", size === "sm" ? "size-3" : "size-4"), strokeWidth: 3 })), isChecked && !indeterminate && (jsx(CheckIcon, { className: cn("pointer-events-none col-start-1 row-start-1 self-center justify-self-center opacity-100 stroke-white transition-opacity duration-200", size === "sm" ? "size-3" : "size-4"), strokeWidth: 3 }))] }), (label || description) && (jsxs("div", { className: `cursor-pointer`, children: [label && (jsx(FormLabel, { htmlFor: id, className: "!mb-0", state: state, children: label })), description && (jsx("div", { id: `${id}-description`, className: checkboxTheme.descriptionStyle, children: description }))] }))] }));
+});
+Checkbox.displayName = "Checkbox";
+
+export { Checkbox };

package/dist/components/forms/Checkbox/Checkbox.theme.d.ts

@@ -0,0 +1,6 @@
+import { CheckboxTheme } from "./Checkbox.types";
+/**
+ * Default theme configuration for the Checkbox component
+ * Includes dark mode support via dark: prefixes
+ */
+export declare const checkboxTheme: CheckboxTheme;

package/dist/components/forms/Checkbox/Checkbox.theme.js

@@ -0,0 +1,42 @@
+/**
+ * Default theme configuration for the Checkbox component
+ * Includes dark mode support via dark: prefixes
+ */
+const checkboxTheme = {
+    baseStyle: "relative flex items-start gap-3",
+    inputContainerStyle: "relative flex-shrink-0 group grid grid-cols-1",
+    // Input styles with light and dark mode variants
+    inputStyle: "col-start-1 row-start-1 appearance-none rounded-[calc(var(--radius-base)*0.75)] border-2 transition-all duration-400 " +
+        // Default state - light
+        "border-[var(--color-border)] bg-[var(--color-background)] " +
+        // Default state - dark
+        " " +
+        // Checked state - light
+        "checked:border-[var(--color-primary)] checked:bg-[var(--color-primary)] " +
+        // Checked state - dark
+        " " +
+        // Checked outline - light
+        "checked:outline-2 checked:outline-[var(--color-primary-100)] checked:outline-offset-1 " +
+        // Checked outline - dark
+        "dark:checked:outline-[var(--color-primary-900)] " +
+        // Focus visible - light
+        "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-primary-600)] " +
+        // Focus visible - dark
+        "dark:focus-visible:outline-[var(--color-primary-500)] " +
+        // Disabled state - light
+        "disabled:bg-[var(--color-background-disabled)] disabled:checked:outline-0 " +
+        "data-[state=disabled]:border-[var(--color-border)] data-[state=disabled]:bg-[var(--color-background-disabled)] data-[state=disabled]:cursor-not-allowed " +
+        // Disabled state - dark
+        "dark:disabled:bg-[var(--color-neutral-700)] dark:disabled:border-[var(--color-neutral-600)] " +
+        "dark:data-[state=disabled]:bg-[var(--color-neutral-700)] dark:data-[state=disabled]:border-[var(--color-neutral-600)]",
+    // Description text - light and dark
+    descriptionStyle: "text-sm mt-0.5 " +
+        "text-[var(--color-text-secondary)] " +
+        "dark:text-[var(--color-neutral-400)]",
+    sizes: {
+        sm: "size-5 mt-0.25",
+        md: "size-6",
+    },
+};
+
+export { checkboxTheme };

package/dist/components/forms/Checkbox/Checkbox.types.d.ts

@@ -0,0 +1,35 @@
+import React from 'react';
+/**
+ * State variants for the checkbox component
+ */
+export type CheckboxState = 'default' | 'disabled';
+/**
+ * Size variants for the checkbox component
+ */
+export type CheckboxSize = 'sm' | 'md';
+/**
+ * Checkbox component props
+ */
+export interface CheckboxProps extends Omit<React.HTMLAttributes<HTMLInputElement>, 'onChange' | 'size'> {
+    id: string;
+    name: string;
+    value: string;
+    checked?: boolean;
+    indeterminate?: boolean;
+    onChange?: (checked: boolean, value: string) => void;
+    label?: string;
+    description?: string;
+    state?: CheckboxState;
+    size?: CheckboxSize;
+    className?: string;
+}
+/**
+ * Checkbox theme configuration
+ */
+export interface CheckboxTheme {
+    baseStyle: string;
+    inputContainerStyle: string;
+    inputStyle: string;
+    descriptionStyle: string;
+    sizes: Record<CheckboxSize, string>;
+}

package/dist/components/forms/Checkbox/index.d.ts

@@ -0,0 +1,3 @@
+export { Checkbox } from './Checkbox';
+export type { CheckboxProps, CheckboxSize, CheckboxState } from './Checkbox.types';
+export { checkboxTheme } from './Checkbox.theme';

package/dist/components/forms/ColorPicker/ColorPicker.animations.d.ts

@@ -0,0 +1,17 @@
+import type { Variants } from 'motion/react';
+/**
+ * ColorPicker animations
+ * IMPORTANT: Always import from 'motion/react' NOT 'framer-motion'
+ */
+/**
+ * Popover content fade-in animation
+ */
+export declare const contentVariants: Variants;
+/**
+ * Swatch scale animation on hover/press
+ */
+export declare const swatchVariants: Variants;
+/**
+ * Preset swatch animation
+ */
+export declare const presetSwatchVariants: Variants;