flikkui 0.1.0-beta.11 → 0.1.0-beta.12

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

@@ -0,0 +1,195 @@
+import { __rest, __assign } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
+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>
+ * ```
+ */
+var SpotlightBorder = function (_a) {
+    var _b;
+    var children = _a.children, _c = _a.variation, variation = _c === void 0 ? "rounded-rect" : _c, rounded = _a.rounded, _d = _a.borderWidth, borderWidth = _d === void 0 ? 2 : _d, _e = _a.color, color = _e === void 0 ? "#ffffff" : _e, _f = _a.spotlightSize, spotlightSize = _f === void 0 ? 0.4 : _f, _g = _a.spotlightEdge, spotlightEdge = _g === void 0 ? 0.5 : _g, _h = _a.glowExtent, glowExtent = _h === void 0 ? 20 : _h, _j = _a.glowIntensity, glowIntensity = _j === void 0 ? 0.6 : _j, _k = _a.tiltIntensity, tiltIntensity = _k === void 0 ? 5 : _k, _l = _a.shouldAnimate, shouldAnimate = _l === void 0 ? true : _l, className = _a.className, style = _a.style, props = __rest(_a, ["children", "variation", "rounded", "borderWidth", "color", "spotlightSize", "spotlightEdge", "glowExtent", "glowIntensity", "tiltIntensity", "shouldAnimate", "className", "style"]);
+    var outerRef = useRef(null);
+    var containerRef = useRef(null);
+    // Check for reduced motion preference
+    var prefersReducedMotion = typeof window !== "undefined" &&
+        ((_b = window.matchMedia) === null || _b === void 0 ? void 0 : _b.call(window, "(prefers-reduced-motion: reduce)").matches);
+    var isAnimating = shouldAnimate && !prefersReducedMotion;
+    useEffect(function () {
+        var _a;
+        var outer = outerRef.current;
+        var container = containerRef.current;
+        if (!outer || !container || !isAnimating)
+            return;
+        var animationFrameId;
+        // Initialize mouse far away so spotlight is hidden on load
+        var vMouse = new THREE.Vector2(-1e4, -1e4);
+        var vMouseDamp = new THREE.Vector2(-1e4, -1e4);
+        var vResolution = new THREE.Vector2();
+        var vContentResolution = new THREE.Vector2();
+        var vOffset = new THREE.Vector2();
+        var vColor = new THREE.Color(color);
+        // Damped rotation for smooth tilt
+        var rotateXDamp = 0;
+        var rotateYDamp = 0;
+        var w = 1;
+        var h = 1;
+        // Scene setup
+        var scene = new THREE.Scene();
+        var camera = new THREE.OrthographicCamera();
+        camera.position.z = 1;
+        var renderer = new THREE.WebGLRenderer({ alpha: true });
+        renderer.setClearColor(0x000000, 0);
+        // Style the canvas - larger than outer to allow glow bleeding
+        var 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
+        var initialComputedStyle = getComputedStyle(outer);
+        var borderRadiusPx = parseFloat(initialComputedStyle.borderRadius) || 0;
+        // Geometry and material
+        var geo = new THREE.PlaneGeometry(1, 1);
+        var material = new THREE.ShaderMaterial({
+            vertexShader: vertexShader,
+            fragmentShader: 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,
+        });
+        var quad = new THREE.Mesh(geo, material);
+        scene.add(quad);
+        var onPointerMove = function (e) {
+            if (!container)
+                return;
+            var 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);
+        var resize = function () {
+            if (!container || !outer)
+                return;
+            w = container.clientWidth;
+            h = container.clientHeight;
+            var dpr = Math.min(window.devicePixelRatio || 1, 2);
+            // Canvas size = card size + padding for glow
+            var canvasW = w + glowExtent * 2;
+            var canvasH = h + glowExtent * 2;
+            renderer.setSize(canvasW, canvasH);
+            renderer.setPixelRatio(dpr);
+            canvas.style.top = "-".concat(glowExtent, "px");
+            canvas.style.left = "-".concat(glowExtent, "px");
+            canvas.style.width = "".concat(canvasW, "px");
+            canvas.style.height = "".concat(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
+            var shortestDim = Math.min(w, h);
+            var currentRadius = parseFloat(getComputedStyle(outer).borderRadius) || borderRadiusPx;
+            var normalizedRoundness = Math.min((currentRadius / shortestDim) * 2, 1);
+            material.uniforms.u_roundness.value = normalizedRoundness;
+            var normalizedBorderWidth = borderWidth / shortestDim;
+            material.uniforms.u_borderSize.value = normalizedBorderWidth;
+        };
+        resize();
+        window.addEventListener("resize", resize);
+        var ro = new ResizeObserver(function () { return resize(); });
+        ro.observe(container);
+        var animate = function (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
+                var isInside = vMouseDamp.x >= 0 &&
+                    vMouseDamp.x <= w &&
+                    vMouseDamp.y >= 0 &&
+                    vMouseDamp.y <= h;
+                // Calculate target rotation
+                var targetRotateX = 0;
+                var targetRotateY = 0;
+                if (isInside) {
+                    var offsetX = vMouseDamp.x / w - 0.5;
+                    var 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(".concat(rotateXDamp, "deg) rotateY(").concat(rotateYDamp, "deg)");
+            }
+            renderer.render(scene, camera);
+            animationFrameId = requestAnimationFrame(animate);
+        };
+        animationFrameId = requestAnimationFrame(animate);
+        return function () {
+            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,
+    ]);
+    var containerStyle = __assign(__assign({}, style), (rounded ? { borderRadius: rounded } : {}));
+    return (React__default.createElement("div", __assign({ 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,9 @@
+/**
+ * GLSL Shaders for SpotlightBorder effect
+ * Uses Signed Distance Functions (SDFs) with aspect-correct coordinates
+ * Supports larger canvas for external glow and suppresses inner glow.
+ */
+var vertexShader = /* glsl */ "\nvarying vec2 v_texcoord;\nvoid main() {\n    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n    v_texcoord = uv;\n}\n";
+var fragmentShader = /* glsl */ "\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";
+
+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 @@
+var 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

@@ -1,6 +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 { 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.js

@@ -1,10 +1,9 @@
-import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import { __rest, __assign } from '/Users/ggn/Development/ui-flik/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
@@ -35,8 +34,8 @@ var Checkbox = function (_a) {
     return (React__default.createElement("div", __assign({ 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 }))),
+            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))))));

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 = {
     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-[var(--color-border)] bg-white checked:border-[var(--color-primary)] checked:bg-[var(--color-primary)] disabled:bg-[var(--color-background-disabled)] disabled:checked:outline-0 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-[var(--color-border)] data-[state=disabled]:bg-[var(--color-background-disabled)] data-[state=disabled]:cursor-not-allowed",
-    descriptionStyle: "text-sm text-[var(--color-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/DatePicker/DatePicker.d.ts

@@ -2,7 +2,7 @@ import React from "react";
 import type { DatePickerProps, DatePickerState, DatePickerSize, DateRange, DatePickerMode } from "./DatePicker.types";
 import { DatePickerTrigger } from "./DatePickerTrigger";
 import { DatePickerContent } from "./DatePickerContent";
-import { DatePickerPresets } from './DatePickerPresets';
+import { DatePickerPresets } from "./DatePickerPresets";
 interface DatePickerContextType {
     mode: DatePickerMode;
     isOpen: boolean;
@@ -34,5 +34,5 @@ declare const DatePickerWithCompounds: typeof DatePickerComponent & {
     Content: typeof DatePickerContent;
     Presets: typeof DatePickerPresets;
 };
-export { DatePickerTrigger, DatePickerContent, DatePickerPresets, DatePickerWithCompounds as DatePicker };
+export { DatePickerTrigger, DatePickerContent, DatePickerPresets, DatePickerWithCompounds as DatePicker, };
 export { DatePickerWithCompounds };

package/dist/components/forms/DatePicker/DatePicker.js

@@ -1,4 +1,4 @@
-import { __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import { __assign } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
 import React__default, { createContext, useState, useRef, useEffect } from 'react';
 import { datePickerTheme } from './DatePicker.theme.js';
 import { FormLabel } from '../FormLabel/FormLabel.js';
@@ -15,9 +15,9 @@ var DatePickerContext = createContext(undefined);
  */
 var formatDate = function (date, formatString, options) {
     if (options === void 0) { options = {
-        year: 'numeric',
-        month: 'short',
-        day: 'numeric'
+        year: "numeric",
+        month: "short",
+        day: "numeric",
     }; }
     // If formatString is provided, use the custom formatter
     if (formatString) {
@@ -31,7 +31,7 @@ var formatDate = function (date, formatString, options) {
  */
 var formatDateRange = function (range, formatString, options) {
     if (!range.start && !range.end) {
-        return '';
+        return "";
     }
     if (range.start && !range.end) {
         return formatDate(range.start, formatString, options);
@@ -46,7 +46,7 @@ var formatDateRange = function (range, formatString, options) {
  */
 var DatePickerComponent = function (_a) {
     var _b, _c;
-    var id = _a.id, name = _a.name, _d = _a.mode, mode = _d === void 0 ? 'single' : _d, _e = _a.size, size = _e === void 0 ? "md" : _e, _f = _a.state, state = _f === void 0 ? "default" : _f, value = _a.value, defaultValue = _a.defaultValue, _g = _a.placeholder, placeholder = _g === void 0 ? "Select date..." : _g, _h = _a.disabled, disabled = _h === void 0 ? false : _h, _j = _a.required, required = _j === void 0 ? false : _j, label = _a.label, helperText = _a.helperText, onChange = _a.onChange, onFocus = _a.onFocus, onBlur = _a.onBlur, minDate = _a.minDate, maxDate = _a.maxDate, isDateDisabled = _a.isDateDisabled, _k = _a.showToday, showToday = _k === void 0 ? true : _k, _l = _a.selectTodayByDefault, selectTodayByDefault = _l === void 0 ? false : _l, weekdays = _a.weekdays, months = _a.months, dateFormat = _a.dateFormat, formatString = _a.formatString, presets = _a.presets, _m = _a.className, className = _m === void 0 ? "" : _m, _o = _a.wrapperClassName, wrapperClassName = _o === void 0 ? "" : _o, _p = _a.portal, portal = _p === void 0 ? true : _p, _q = _a.placement, placement = _q === void 0 ? "bottom-start" : _q, _r = _a.offset, offset = _r === void 0 ? 4 : _r, children = _a.children;
+    var id = _a.id, name = _a.name, _d = _a.mode, mode = _d === void 0 ? "single" : _d, _e = _a.size, size = _e === void 0 ? "md" : _e, _f = _a.state, state = _f === void 0 ? "default" : _f, value = _a.value, defaultValue = _a.defaultValue, _g = _a.placeholder, placeholder = _g === void 0 ? "Select date..." : _g, _h = _a.disabled, disabled = _h === void 0 ? false : _h, _j = _a.required, required = _j === void 0 ? false : _j, label = _a.label, helperText = _a.helperText, onChange = _a.onChange, onFocus = _a.onFocus, onBlur = _a.onBlur, minDate = _a.minDate, maxDate = _a.maxDate, isDateDisabled = _a.isDateDisabled, _k = _a.showToday, showToday = _k === void 0 ? true : _k, _l = _a.selectTodayByDefault, selectTodayByDefault = _l === void 0 ? false : _l, weekdays = _a.weekdays, months = _a.months, dateFormat = _a.dateFormat, formatString = _a.formatString, presets = _a.presets, _m = _a.className, className = _m === void 0 ? "" : _m, _o = _a.wrapperClassName, wrapperClassName = _o === void 0 ? "" : _o, _p = _a.portal, portal = _p === void 0 ? true : _p, _q = _a.placement, placement = _q === void 0 ? "bottom-start" : _q, _r = _a.offset, offset = _r === void 0 ? 4 : _r, children = _a.children;
     // Merge theme with defaults
     var theme = __assign({}, datePickerTheme);
     // State
@@ -61,7 +61,7 @@ var DatePickerComponent = function (_a) {
     }, [value]);
     // Date selection handler (single mode)
     var handleDateSelect = function (newDate) {
-        if (mode === 'single') {
+        if (mode === "single") {
             if (newDate !== selectedValue) {
                 setSelectedValue(newDate);
                 onChange === null || onChange === void 0 ? void 0 : onChange(newDate);
@@ -84,11 +84,13 @@ var DatePickerComponent = function (_a) {
     // Format selected date/range for display
     // formatString takes precedence over dateFormat
     var displayValue = selectedValue
-        ? (mode === 'single' && selectedValue instanceof Date
+        ? mode === "single" && selectedValue instanceof Date
             ? formatDate(selectedValue, formatString, dateFormat)
-            : mode === 'range' && typeof selectedValue === 'object' && 'start' in selectedValue
+            : mode === "range" &&
+                typeof selectedValue === "object" &&
+                "start" in selectedValue
                 ? formatDateRange(selectedValue, formatString, dateFormat)
-                : placeholder)
+                : placeholder
         : placeholder;
     // Calendar icon is now built-in to the trigger component
     // Generate a unique ID if not provided
@@ -122,11 +124,15 @@ var DatePickerComponent = function (_a) {
         React__default.createElement("div", { className: cn(containerStyle, wrapperClassName) },
             label && (React__default.createElement(FormLabel, { htmlFor: datePickerId, required: required }, label)),
             React__default.createElement(DatePickerTrigger, { id: datePickerId, disabled: disabled, isOpen: isOpen, state: state, size: size, onClick: handleButtonClick, onFocus: onFocus, onBlur: onBlur, className: className },
-                React__default.createElement("span", { className: cn("block truncate", !selectedValue && "text-[var(--color-text-placeholder)]") }, displayValue)),
+                React__default.createElement("span", { className: cn("block truncate", selectedValue ? theme.valueTextStyle : theme.placeholderTextStyle) }, displayValue)),
             React__default.createElement(DatePickerContent, { isOpen: isOpen, onClose: function () { return setIsOpen(false); }, portal: portal, placement: placement, offset: offset, presets: presets }, children),
             helperText && (React__default.createElement("p", { className: cn(helperTextStyle, helperTextStateStyle) }, helperText)),
-            name && mode === 'single' && selectedValue instanceof Date && (React__default.createElement("input", { type: "hidden", name: name, value: selectedValue.toISOString() })),
-            name && mode === 'range' && selectedValue && typeof selectedValue === 'object' && 'start' in selectedValue && (React__default.createElement(React__default.Fragment, null,
+            name && mode === "single" && selectedValue instanceof Date && (React__default.createElement("input", { type: "hidden", name: name, value: selectedValue.toISOString() })),
+            name &&
+                mode === "range" &&
+                selectedValue &&
+                typeof selectedValue === "object" &&
+                "start" in selectedValue && (React__default.createElement(React__default.Fragment, null,
                 React__default.createElement("input", { type: "hidden", name: "".concat(name, "[start]"), value: ((_b = selectedValue.start) === null || _b === void 0 ? void 0 : _b.toISOString()) || "" }),
                 React__default.createElement("input", { type: "hidden", name: "".concat(name, "[end]"), value: ((_c = selectedValue.end) === null || _c === void 0 ? void 0 : _c.toISOString()) || "" }))))));
 };

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

@@ -1,4 +1,4 @@
-import { DatePickerTheme } from './DatePicker.types';
+import { DatePickerTheme } from "./DatePicker.types";
 /**
  * DatePicker component theme following Select pattern exactly
  * Uses common forms theme for consistency

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

@@ -10,6 +10,12 @@ import { formsBaseTheme } from '../forms.theme.js';
 var datePickerTheme = {
     containerStyle: formsBaseTheme.wrapperStyle,
     baseStyle: formsBaseTheme.inputGroupBaseStyle + " justify-between cursor-pointer",
+    // Trigger button style - bg-white for light mode; dark mode uses neutral-900
+    triggerButtonStyle: "w-full cursor-pointer bg-white dark:bg-[var(--color-neutral-900)]",
+    // Placeholder text style - matches Input placeholder styling
+    placeholderTextStyle: "text-[var(--color-text-placeholder)] dark:text-[var(--color-neutral-500)]",
+    // Selected value text style
+    valueTextStyle: "text-[var(--color-text-primary)] dark:text-[var(--color-neutral-200)]",
     triggerSizes: {
         sm: "".concat(formsBaseTheme.sizes.sm.text, " ").concat(formsBaseTheme.sizes.sm.padding, " ").concat(formsBaseTheme.sizes.sm.height),
         md: "".concat(formsBaseTheme.sizes.md.text, " ").concat(formsBaseTheme.sizes.md.padding, " ").concat(formsBaseTheme.sizes.md.height),
@@ -20,15 +26,28 @@ var datePickerTheme = {
     triggerFocusStates: formsBaseTheme.focusStates,
     iconEndStyle: formsBaseTheme.iconStyles.right,
     iconEndPadding: formsBaseTheme.iconStyles.padding.right,
-    contentStyle: "min-w-fit max-w-none bg-white border border-[var(--color-border)] rounded-lg shadow-real-xl p-0 overflow-hidden z-[9999] fixed",
-    contentWithPresetsStyle: "flex w-fit max-w-none bg-white border border-[var(--color-border)] rounded-lg shadow-lg p-0 overflow-hidden z-[9999] fixed",
-    presetsContainerStyle: "flex flex-col gap-1 p-3 border-r border-[var(--color-border)] bg-[var(--color-neutral-50)] min-w-[180px]",
-    presetButtonStyle: "w-full text-left px-3 py-2 text-sm rounded-md transition-colors hover:bg-white hover:text-[var(--color-text-primary)] cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2 text-[var(--color-text-secondary)] data-[active=true]:bg-white data-[active=true]:text-[var(--color-text-primary)] data-[active=true]:font-medium",
+    // Dropdown content - with dark mode support
+    contentStyle: "min-w-fit max-w-none bg-white border border-[var(--color-border)] rounded-lg shadow-real-xl p-0 overflow-hidden z-[9999] fixed " +
+        "dark:bg-[var(--color-neutral-900)] dark:border-[var(--color-neutral-700)]",
+    contentWithPresetsStyle: "flex w-fit max-w-none bg-white border border-[var(--color-border)] rounded-lg shadow-lg p-0 overflow-hidden z-[9999] fixed " +
+        "dark:bg-[var(--color-neutral-900)] dark:border-[var(--color-neutral-700)]",
+    // Presets sidebar - with dark mode support
+    presetsContainerStyle: "flex flex-col gap-1 p-3 border-r border-[var(--color-border)] bg-[var(--color-neutral-50)] min-w-[180px] " +
+        "dark:bg-[var(--color-neutral-800)] dark:border-[var(--color-neutral-700)]",
+    // Preset button - with dark mode support
+    presetButtonStyle: "w-full text-left px-3 py-2 text-sm rounded-md transition-colors cursor-pointer " +
+        "text-[var(--color-text-secondary)] hover:bg-white hover:text-[var(--color-text-primary)] " +
+        "focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2 " +
+        "data-[active=true]:bg-white data-[active=true]:text-[var(--color-text-primary)] data-[active=true]:font-medium " +
+        // Dark mode
+        "dark:text-[var(--color-neutral-400)] dark:hover:bg-[var(--color-neutral-700)] dark:hover:text-[var(--color-neutral-200)] " +
+        "dark:data-[active=true]:bg-[var(--color-neutral-700)] dark:data-[active=true]:text-[var(--color-neutral-100)] " +
+        "dark:focus-visible:ring-offset-[var(--color-neutral-800)]",
     helperTextStyle: formsBaseTheme.helperText,
     helperTextStates: {
-        default: "text-[var(--color-text-primary)]",
-        disabled: "text-[var(--color-text-muted)]",
-        invalid: "text-[var(--color-danger)]",
+        default: "text-[var(--color-text-muted)] dark:text-[var(--color-neutral-400)]",
+        disabled: "text-[var(--color-text-disabled)] dark:text-[var(--color-neutral-600)]",
+        invalid: "text-[var(--color-danger)] dark:text-[var(--color-danger-400)]",
     },
 };
 

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

@@ -1,27 +1,22 @@
-import React from 'react';
+import React from "react";
 /**
  * Size variants for DatePicker components
  */
-export type DatePickerSize = 'sm' | 'md' | 'lg';
+export type DatePickerSize = "sm" | "md" | "lg";
 /**
  * State variants for DatePicker components (aligned with forms theme)
  */
-export type DatePickerState = 'default' | 'disabled' | 'invalid';
+export type DatePickerState = "default" | "disabled" | "invalid";
 /**
  * Placement options for DatePicker popover
  */
-export type DatePickerPlacement = 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
+export type DatePickerPlacement = "bottom-start" | "bottom-end" | "top-start" | "top-end";
 /**
  * Selection mode for DatePicker
  */
-export type DatePickerMode = 'single' | 'range';
-/**
- * Date range type for range selection mode
- */
-export interface DateRange {
-    start: Date | null;
-    end: Date | null;
-}
+export type DatePickerMode = "single" | "range";
+import type { DateRange } from "../../core/Calendar/Calendar.types";
+export type { DateRange };
 /**
  * Preset for quick date range selection
  */
@@ -32,7 +27,7 @@ export interface DateRangePreset {
 /**
  * Main DatePicker component props (follows Select pattern)
  */
-export interface DatePickerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue' | 'onFocus' | 'onBlur'> {
+export interface DatePickerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue" | "onFocus" | "onBlur"> {
     /** Unique identifier */
     id?: string;
     /** Form field name */
@@ -131,6 +126,9 @@ export interface DatePickerContentProps {
 export interface DatePickerTheme {
     containerStyle: string;
     baseStyle: string;
+    triggerButtonStyle: string;
+    placeholderTextStyle: string;
+    valueTextStyle: string;
     triggerSizes: Record<DatePickerSize, string>;
     triggerStates: Record<DatePickerState, string>;
     triggerHoverStates: Record<DatePickerState, string>;