flikkui 0.1.0-beta.8 → 0.2.0-beta.1

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

@@ -0,0 +1,196 @@
+import React__default, { 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;
+    useEffect(() => {
+        var _a;
+        const outer = outerRef.current;
+        const container = containerRef.current;
+        if (!outer || !container || !isAnimating)
+            return;
+        let animationFrameId;
+        // Initialize mouse far away so spotlight is hidden on load
+        const vMouse = new THREE.Vector2(-1e4, -1e4);
+        const vMouseDamp = new THREE.Vector2(-1e4, -1e4);
+        const vResolution = new THREE.Vector2();
+        const vContentResolution = new THREE.Vector2();
+        const vOffset = new THREE.Vector2();
+        const vColor = new THREE.Color(color);
+        // Damped rotation for smooth tilt
+        let rotateXDamp = 0;
+        let rotateYDamp = 0;
+        let w = 1;
+        let h = 1;
+        // Scene setup
+        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);
+        // Style the canvas - larger than outer to allow glow bleeding
+        const canvas = renderer.domElement;
+        canvas.style.position = "absolute";
+        canvas.style.pointerEvents = "none";
+        canvas.style.zIndex = "10";
+        // Canvas is appended to outer, not container, so it can be larger
+        outer.appendChild(canvas);
+        // Initial roundness check from outer container where className is applied
+        const initialComputedStyle = getComputedStyle(outer);
+        const borderRadiusPx = parseFloat(initialComputedStyle.borderRadius) || 0;
+        // Geometry and material
+        const geo = new THREE.PlaneGeometry(1, 1);
+        const material = new THREE.ShaderMaterial({
+            vertexShader,
+            fragmentShader,
+            uniforms: {
+                u_mouse: { value: vMouseDamp },
+                u_resolution: { value: vResolution },
+                u_contentResolution: { value: vContentResolution },
+                u_offset: { value: vOffset },
+                u_pixelRatio: { value: Math.min(window.devicePixelRatio || 1, 2) },
+                u_color: { value: vColor },
+                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);
+        const onPointerMove = (e) => {
+            if (!container)
+                return;
+            const rect = container.getBoundingClientRect();
+            // Mouse coordinates are relative to the CONTENT area
+            vMouse.set(e.clientX - rect.left, e.clientY - rect.top);
+        };
+        document.addEventListener("mousemove", onPointerMove);
+        document.addEventListener("pointermove", onPointerMove);
+        const resize = () => {
+            if (!container || !outer)
+                return;
+            w = container.clientWidth;
+            h = container.clientHeight;
+            const dpr = Math.min(window.devicePixelRatio || 1, 2);
+            // Canvas size = card size + padding for glow
+            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);
+            vResolution.set(canvasW, canvasH).multiplyScalar(dpr);
+            vContentResolution.set(w, h).multiplyScalar(dpr);
+            vOffset.set(glowExtent, glowExtent).multiplyScalar(dpr);
+            material.uniforms.u_pixelRatio.value = dpr;
+            // Calculate shader roundness from outer container's CSS border-radius
+            const shortestDim = Math.min(w, h);
+            const currentRadius = 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) => {
+            // Smooth mouse damping
+            vMouseDamp.x += (vMouse.x - vMouseDamp.x) * 0.1;
+            vMouseDamp.y += (vMouse.y - vMouseDamp.y) * 0.1;
+            // 3D Tilt Effect - smoothly synced with spotlight
+            if (tiltIntensity > 0 && outer && w > 0 && h > 0) {
+                // Check if mouse is inside the card bounds
+                const isInside = vMouseDamp.x >= 0 &&
+                    vMouseDamp.x <= w &&
+                    vMouseDamp.y >= 0 &&
+                    vMouseDamp.y <= h;
+                // Calculate target rotation
+                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;
+                }
+                // Smoothly interpolate toward target using same damping as spotlight
+                rotateXDamp += (targetRotateX - rotateXDamp) * 0.08;
+                rotateYDamp += (targetRotateY - rotateYDamp) * 0.08;
+                outer.style.transform = `perspective(1000px) rotateX(${rotateXDamp}deg) rotateY(${rotateYDamp}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();
+        };
+    }, [
+        variation,
+        borderWidth,
+        color,
+        spotlightSize,
+        spotlightEdge,
+        isAnimating,
+        glowExtent,
+        glowIntensity,
+        tiltIntensity,
+    ]);
+    const containerStyle = {
+        ...style,
+        ...(rounded ? { borderRadius: rounded } : {}),
+    };
+    return (React__default.createElement("div", { ref: outerRef, className: cn("relative overflow-visible", className), style: containerStyle, ...props },
+        React__default.createElement("div", { ref: containerRef, className: "relative w-full h-full", style: { borderRadius: "inherit", zIndex: 20 } }, 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-rounded)", "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,10 @@
+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";

package/dist/components/effects/index.js

@@ -0,0 +1,5 @@
+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';

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

@@ -4,4 +4,3 @@ import { CheckboxProps } from "./Checkbox.types";
  * Checkbox component for selecting one or more options
  */
 export declare const Checkbox: React.FC<CheckboxProps>;
-export default Checkbox;

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

@@ -1,30 +1,27 @@
-import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
 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';
-import ForwardRef from '../../../node_modules/@heroicons/react/24/outline/esm/MinusIcon.js';
-import ForwardRef$1 from '../../../node_modules/@heroicons/react/24/outline/esm/CheckIcon.js';
 
 /**
  * Checkbox component for selecting one or more options
  */
-var Checkbox = function (_a) {
-    var id = _a.id, name = _a.name, value = _a.value, controlledChecked = _a.checked, _b = _a.indeterminate, indeterminate = _b === void 0 ? false : _b, onChange = _a.onChange, label = _a.label, description = _a.description, _c = _a.state, state = _c === void 0 ? "default" : _c, _d = _a.size, size = _d === void 0 ? "md" : _d, className = _a.className, restProps = __rest(_a, ["id", "name", "value", "checked", "indeterminate", "onChange", "label", "description", "state", "size", "className"]);
-    var _e = useState(false), internalChecked = _e[0], setInternalChecked = _e[1];
-    var inputRef = useRef(null);
+const Checkbox = ({ id, name, value, checked: controlledChecked, indeterminate = false, onChange, label, description, state = "default", size = "md", className, ...restProps }) => {
+    const [internalChecked, setInternalChecked] = useState(false);
+    const inputRef = useRef(null);
     // Determine if component is controlled or uncontrolled
-    var isControlled = controlledChecked !== undefined;
-    var isChecked = isControlled ? controlledChecked : internalChecked;
+    const isControlled = controlledChecked !== undefined;
+    const isChecked = isControlled ? controlledChecked : internalChecked;
     // Set indeterminate property on the input element
-    useEffect(function () {
+    useEffect(() => {
         if (inputRef.current) {
             inputRef.current.indeterminate = indeterminate;
         }
     }, [indeterminate]);
     // Derive state flags
-    var isDisabled = state === "disabled";
-    var handleChange = function (e) {
+    const isDisabled = state === "disabled";
+    const handleChange = (e) => {
         if (isDisabled)
             return;
         if (!isControlled) {
@@ -32,14 +29,14 @@ var Checkbox = function (_a) {
         }
         onChange === null || onChange === void 0 ? void 0 : onChange(e.target.checked, value);
     };
-    return (React__default.createElement("div", __assign({ className: cn(checkboxTheme.baseStyle, className) }, restProps),
+    return (React__default.createElement("div", { className: cn(checkboxTheme.baseStyle, className), ...restProps },
         React__default.createElement("div", { className: cn(checkboxTheme.inputContainerStyle, checkboxTheme.sizes[size]) },
-            React__default.createElement("input", { ref: inputRef, type: "checkbox", id: id, name: name, value: value, checked: isChecked, onChange: handleChange, disabled: isDisabled, "aria-describedby": description ? "".concat(id, "-description") : undefined, "data-state": isDisabled ? "disabled" : "default", className: cn(checkboxTheme.inputStyle, checkboxTheme.sizes[size], indeterminate && "bg-neutral-200") }),
-            indeterminate && (React__default.createElement(ForwardRef, { 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 && (React__default.createElement(ForwardRef$1, { 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) && (React__default.createElement("div", { className: "cursor-pointer" },
+            React__default.createElement("input", { ref: inputRef, 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 && (React__default.createElement(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 && (React__default.createElement(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) && (React__default.createElement("div", { className: `cursor-pointer` },
             label && (React__default.createElement(FormLabel, { htmlFor: id, className: "!mb-0", state: state }, label)),
-            description && (React__default.createElement("div", { id: "".concat(id, "-description"), className: checkboxTheme.descriptionStyle }, description))))));
+            description && (React__default.createElement("div", { id: `${id}-description`, className: checkboxTheme.descriptionStyle }, description))))));
 };
 
-export { Checkbox, Checkbox as default };
+export { Checkbox };

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

@@ -1,5 +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

@@ -1,15 +1,42 @@
 /**
  * Default theme configuration for the Checkbox component
+ * Includes dark mode support via dark: prefixes
  */
-var checkboxTheme = {
+const checkboxTheme = {
     baseStyle: "relative flex items-start gap-3",
     inputContainerStyle: "relative flex-shrink-0 group grid grid-cols-1",
-    inputStyle: "col-start-1 row-start-1 appearance-none rounded-md border-2 border-gray-300 bg-white checked:border-[var(--color-primary)] checked:bg-[var(--color-primary)] disabled:border-gray-300 disabled:bg-gray-100 disabled:checked:bg-gray-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-primary-600)] checked:outline-2 checked:outline-[var(--color-primary-100)] checked:outline-offset-1 transition-all duration-400 data-[state=disabled]:border-gray-300 data-[state=disabled]:bg-gray-100",
-    descriptionStyle: "text-base text-text-secondary mt-0.5",
+    // Input styles with light and dark mode variants
+    inputStyle: "col-start-1 row-start-1 appearance-none rounded-md 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"
-    }
+        md: "size-6",
+    },
 };
 
 export { checkboxTheme };

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

@@ -1,3 +1,3 @@
-export { default, Checkbox } from './Checkbox';
-export * from './Checkbox.types';
-export * from './Checkbox.theme';
+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;

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

@@ -0,0 +1,27 @@
+import React from 'react';
+import type { ColorPickerContextValue, ColorPickerProps } from './ColorPicker.types';
+/**
+ * ColorPicker Context
+ */
+export declare const ColorPickerContext: React.Context<ColorPickerContextValue | undefined>;
+/**
+ * Hook to access ColorPicker context
+ */
+export declare const useColorPicker: () => ColorPickerContextValue;
+/**
+ * Export compound component with sub-components
+ * Following Flikkui pattern (like Accordion, Tabs, Table)
+ */
+export declare const ColorPicker: React.FC<ColorPickerProps> & {
+    Trigger: React.FC<import("./ColorPicker.types").ColorPickerTriggerProps>;
+    Content: React.FC<import("./ColorPicker.types").ColorPickerContentProps>;
+    Canvas: React.FC<{
+        className?: string;
+    }>;
+    Swatch: React.FC<import("./ColorPicker.types").ColorPickerSwatchProps>;
+    Sliders: React.FC<import("./ColorPicker.types").ColorPickerSlidersProps>;
+    Input: React.FC<import("./ColorPicker.types").ColorPickerInputProps>;
+    FormatSelector: React.FC<import("./ColorPicker.types").ColorPickerFormatSelectorProps>;
+    EyeDropper: React.FC<import("./ColorPicker.types").ColorPickerEyeDropperProps>;
+    Presets: React.FC<import("./ColorPicker.types").ColorPickerPresetsProps>;
+};

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

@@ -0,0 +1,6 @@
+import type { ColorPickerTheme } from './ColorPicker.types';
+/**
+ * ColorPicker theme configuration
+ * Following Dropdown/Select popup styling patterns
+ */
+export declare const colorPickerTheme: ColorPickerTheme;