@flikk/ui 1.0.0-beta.1

package/dist/components/effects/AIOrb/variants/Liquid/Liquid.noise.js

@@ -0,0 +1,138 @@
+/**
+ * Simplex 3D noise – deterministic, seedless implementation.
+ */
+const p = [
+    151, 160, 137, 91, 90, 15, 131, 13, 201, 95, 96, 53, 194, 233, 7, 225, 140,
+    36, 103, 30, 69, 142, 8, 99, 37, 240, 21, 10, 23, 190, 6, 148, 247, 120,
+    234, 75, 0, 26, 197, 62, 94, 252, 219, 203, 117, 35, 11, 32, 57, 177, 33,
+    88, 237, 149, 56, 87, 174, 20, 125, 136, 171, 168, 68, 175, 74, 165, 71,
+    134, 139, 48, 27, 166, 77, 146, 158, 231, 83, 111, 229, 122, 60, 211, 133,
+    230, 220, 105, 92, 41, 55, 46, 245, 40, 244, 102, 143, 54, 65, 25, 63, 161,
+    1, 216, 80, 73, 209, 76, 132, 187, 208, 89, 18, 169, 200, 196, 135, 130,
+    116, 188, 159, 86, 164, 100, 109, 198, 173, 186, 3, 64, 52, 217, 226, 250,
+    124, 123, 5, 202, 38, 147, 118, 126, 255, 82, 85, 212, 207, 206, 59, 227,
+    47, 16, 58, 17, 182, 189, 28, 42, 223, 183, 170, 213, 119, 248, 152, 2, 44,
+    154, 163, 70, 221, 153, 101, 155, 167, 43, 172, 9, 129, 22, 39, 253, 19, 98,
+    108, 110, 79, 113, 224, 232, 178, 185, 112, 104, 218, 246, 97, 228, 251, 34,
+    242, 193, 238, 210, 144, 12, 191, 179, 162, 241, 81, 51, 145, 235, 249, 14,
+    239, 107, 49, 192, 214, 31, 181, 199, 106, 157, 184, 84, 204, 176, 115, 121,
+    50, 45, 127, 4, 150, 254, 138, 236, 205, 93, 222, 114, 67, 29, 24, 72, 243,
+    141, 128, 195, 78, 66, 215, 61, 156, 180,
+];
+const perm = new Array(512);
+const grad3 = [
+    [1, 1, 0], [-1, 1, 0], [1, -1, 0], [-1, -1, 0],
+    [1, 0, 1], [-1, 0, 1], [1, 0, -1], [-1, 0, -1],
+    [0, 1, 1], [0, -1, 1], [0, 1, -1], [0, -1, -1],
+];
+for (let i = 0; i < 512; i++)
+    perm[i] = p[i & 255];
+function dot3(g, x, y, z) {
+    return g[0] * x + g[1] * y + g[2] * z;
+}
+function simplex3(xin, yin, zin) {
+    const F3 = 1 / 3;
+    const G3 = 1 / 6;
+    const s = (xin + yin + zin) * F3;
+    const i = Math.floor(xin + s);
+    const j = Math.floor(yin + s);
+    const k = Math.floor(zin + s);
+    const t = (i + j + k) * G3;
+    const x0 = xin - (i - t);
+    const y0 = yin - (j - t);
+    const z0 = zin - (k - t);
+    let i1, j1, k1;
+    let i2, j2, k2;
+    if (x0 >= y0) {
+        if (y0 >= z0) {
+            i1 = 1;
+            j1 = 0;
+            k1 = 0;
+            i2 = 1;
+            j2 = 1;
+            k2 = 0;
+        }
+        else if (x0 >= z0) {
+            i1 = 1;
+            j1 = 0;
+            k1 = 0;
+            i2 = 1;
+            j2 = 0;
+            k2 = 1;
+        }
+        else {
+            i1 = 0;
+            j1 = 0;
+            k1 = 1;
+            i2 = 1;
+            j2 = 0;
+            k2 = 1;
+        }
+    }
+    else {
+        if (y0 < z0) {
+            i1 = 0;
+            j1 = 0;
+            k1 = 1;
+            i2 = 0;
+            j2 = 1;
+            k2 = 1;
+        }
+        else if (x0 < z0) {
+            i1 = 0;
+            j1 = 1;
+            k1 = 0;
+            i2 = 0;
+            j2 = 1;
+            k2 = 1;
+        }
+        else {
+            i1 = 0;
+            j1 = 1;
+            k1 = 0;
+            i2 = 1;
+            j2 = 1;
+            k2 = 0;
+        }
+    }
+    const x1 = x0 - i1 + G3;
+    const y1 = y0 - j1 + G3;
+    const z1 = z0 - k1 + G3;
+    const x2 = x0 - i2 + 2 * G3;
+    const y2 = y0 - j2 + 2 * G3;
+    const z2 = z0 - k2 + 2 * G3;
+    const x3 = x0 - 1 + 3 * G3;
+    const y3 = y0 - 1 + 3 * G3;
+    const z3 = z0 - 1 + 3 * G3;
+    const ii = i & 255;
+    const jj = j & 255;
+    const kk = k & 255;
+    const gi0 = perm[ii + perm[jj + perm[kk]]] % 12;
+    const gi1 = perm[ii + i1 + perm[jj + j1 + perm[kk + k1]]] % 12;
+    const gi2 = perm[ii + i2 + perm[jj + j2 + perm[kk + k2]]] % 12;
+    const gi3 = perm[ii + 1 + perm[jj + 1 + perm[kk + 1]]] % 12;
+    let n0 = 0, n1 = 0, n2 = 0, n3 = 0;
+    let t0 = 0.6 - x0 * x0 - y0 * y0 - z0 * z0;
+    if (t0 > 0) {
+        t0 *= t0;
+        n0 = t0 * t0 * dot3(grad3[gi0], x0, y0, z0);
+    }
+    let t1 = 0.6 - x1 * x1 - y1 * y1 - z1 * z1;
+    if (t1 > 0) {
+        t1 *= t1;
+        n1 = t1 * t1 * dot3(grad3[gi1], x1, y1, z1);
+    }
+    let t2 = 0.6 - x2 * x2 - y2 * y2 - z2 * z2;
+    if (t2 > 0) {
+        t2 *= t2;
+        n2 = t2 * t2 * dot3(grad3[gi2], x2, y2, z2);
+    }
+    let t3 = 0.6 - x3 * x3 - y3 * y3 - z3 * z3;
+    if (t3 > 0) {
+        t3 *= t3;
+        n3 = t3 * t3 * dot3(grad3[gi3], x3, y3, z3);
+    }
+    return 32 * (n0 + n1 + n2 + n3);
+}
+
+export { simplex3 };

package/dist/components/effects/AIOrb/variants/Liquid/Liquid.shaders.d.ts

@@ -0,0 +1,8 @@
+/**
+ * GLSL shaders for the Liquid orb atmosphere layer.
+ *
+ * The Liquid variant uses a soft diffuse haze (BackSide) around the sphere
+ * with smooth falloff, not a concentrated rim ring.
+ */
+export declare const glowVertex = "\nvarying vec3 vNormal;\nvarying vec3 vViewDirection;\n\nvoid main() {\n    vNormal = normalize(normalMatrix * normal);\n    vec4 worldPos = modelMatrix * vec4(position, 1.0);\n    vViewDirection = normalize(cameraPosition - worldPos.xyz);\n    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n}\n";
+export declare const atmosphereFragment = "\nprecision highp float;\n\nuniform float u_time;\nuniform vec3  u_color1;\nuniform vec3  u_color2;\nuniform vec3  u_color3;\nuniform float u_intensity;\n\nvarying vec3 vNormal;\nvarying vec3 vViewDirection;\n\nvoid main() {\n    vec3 N = normalize(vNormal);\n    vec3 V = normalize(vViewDirection);\n\n    float NdotV = max(dot(N, V), 0.0);\n\n    // Wide, smooth falloff \u2014 visible across the whole surface, not just edges.\n    // Uses smoothstep to avoid the sharp rim ring that pow(1-NdotV, n) creates.\n    float glow = 1.0 - smoothstep(0.0, 0.85, NdotV);\n    glow *= glow; // soften further\n\n    // Slow colour rotation\n    float a  = u_time * 0.2;\n    float ca = cos(a), sa = sin(a);\n    vec3 dir = vec3(\n        N.x * ca - N.z * sa,\n        N.y,\n        N.x * sa + N.z * ca\n    );\n\n    float vert = dir.y * 0.5 + 0.5;\n    vec3  col  = mix(u_color3, u_color1, vert);\n    float midW = 1.0 - abs(vert - 0.5) * 2.0;\n    col = mix(col, u_color2, midW * 0.5);\n\n    float pulse = 0.92 + sin(u_time * 0.6) * 0.08;\n    float alpha = glow * u_intensity * pulse;\n\n    gl_FragColor = vec4(col * alpha, alpha);\n}\n";

package/dist/components/effects/AIOrb/variants/Liquid/Liquid.shaders.js

@@ -0,0 +1,64 @@
+/**
+ * GLSL shaders for the Liquid orb atmosphere layer.
+ *
+ * The Liquid variant uses a soft diffuse haze (BackSide) around the sphere
+ * with smooth falloff, not a concentrated rim ring.
+ */
+// ── Shared vertex shader ─────────────────────────────────────────────────────
+const glowVertex = /* glsl */ `
+varying vec3 vNormal;
+varying vec3 vViewDirection;
+
+void main() {
+    vNormal = normalize(normalMatrix * normal);
+    vec4 worldPos = modelMatrix * vec4(position, 1.0);
+    vViewDirection = normalize(cameraPosition - worldPos.xyz);
+    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+}
+`;
+// ── Atmosphere (BackSide) — soft diffuse haze, not a rim ring ────────────────
+const atmosphereFragment = /* glsl */ `
+precision highp float;
+
+uniform float u_time;
+uniform vec3  u_color1;
+uniform vec3  u_color2;
+uniform vec3  u_color3;
+uniform float u_intensity;
+
+varying vec3 vNormal;
+varying vec3 vViewDirection;
+
+void main() {
+    vec3 N = normalize(vNormal);
+    vec3 V = normalize(vViewDirection);
+
+    float NdotV = max(dot(N, V), 0.0);
+
+    // Wide, smooth falloff — visible across the whole surface, not just edges.
+    // Uses smoothstep to avoid the sharp rim ring that pow(1-NdotV, n) creates.
+    float glow = 1.0 - smoothstep(0.0, 0.85, NdotV);
+    glow *= glow; // soften further
+
+    // Slow colour rotation
+    float a  = u_time * 0.2;
+    float ca = cos(a), sa = sin(a);
+    vec3 dir = vec3(
+        N.x * ca - N.z * sa,
+        N.y,
+        N.x * sa + N.z * ca
+    );
+
+    float vert = dir.y * 0.5 + 0.5;
+    vec3  col  = mix(u_color3, u_color1, vert);
+    float midW = 1.0 - abs(vert - 0.5) * 2.0;
+    col = mix(col, u_color2, midW * 0.5);
+
+    float pulse = 0.92 + sin(u_time * 0.6) * 0.08;
+    float alpha = glow * u_intensity * pulse;
+
+    gl_FragColor = vec4(col * alpha, alpha);
+}
+`;
+
+export { atmosphereFragment, glowVertex };

package/dist/components/effects/AIOrb/variants/Liquid/Liquid.types.d.ts

@@ -0,0 +1,47 @@
+export interface LiquidProps {
+    /**
+     * Three light colours as hex strings.
+     * @default ['#2C35B7', '#C9242F', '#9DD9EB']
+     */
+    colors?: [string, string, string];
+    /**
+     * Base mesh colour.
+     * @default '#350F3F'
+     */
+    meshColor?: string;
+    /**
+     * Animation speed multiplier.
+     * @default 1.0
+     */
+    speed?: number;
+    /**
+     * Material roughness (0-1). Lower = more mirror-like reflections.
+     * @default 0.15
+     */
+    roughness?: number;
+    /**
+     * Material metalness (0-1). Higher = liquid metal look.
+     * @default 0.95
+     */
+    metalness?: number;
+    /**
+     * Simplex noise frequency multiplier.
+     * @default 0.8
+     */
+    noiseScale?: number;
+    /**
+     * Surface displacement strength.
+     * @default 0.1
+     */
+    noiseAmplitude?: number;
+    /**
+     * Glow layer brightness multiplier.
+     * @default 1.0
+     */
+    glowIntensity?: number;
+    /**
+     * Outer glow sphere scale (controls halo spread).
+     * @default 1.8
+     */
+    glowSize?: number;
+}

package/dist/components/effects/AIOrb/variants/Liquid/index.d.ts

@@ -0,0 +1,2 @@
+export { Liquid } from "./Liquid";
+export type { LiquidProps } from "./Liquid.types";

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

@@ -0,0 +1,4 @@
+export { DotSphere } from "./DotSphere";
+export type { DotSphereProps } from "./DotSphere";
+export { Liquid } from "./Liquid";
+export type { LiquidProps } from "./Liquid";

package/dist/components/effects/Animated/Animated.animations.d.ts

@@ -0,0 +1,7 @@
+import type { Variants, Transition } from 'motion/react';
+import type { AnimationPreset } from './Animated.types';
+export declare const defaultSpringTransition: Transition;
+export declare const ANIMATION_PRESETS: Record<AnimationPreset, Record<string, number>>;
+export declare function getAnimationVariants(preset: AnimationPreset, customTransition?: Transition): Variants;
+export declare function getGroupVariants(stagger: number, delay: number): Variants;
+export declare function getExitVariant(preset: AnimationPreset): Record<string, number>;

package/dist/components/effects/Animated/Animated.animations.js

@@ -0,0 +1,49 @@
+const defaultSpringTransition = {
+    type: 'spring',
+    stiffness: 200,
+    damping: 60,
+    mass: 1,
+};
+const ANIMATION_PRESETS = {
+    fadeUp: { opacity: 0, y: 24 },
+    fadeDown: { opacity: 0, y: -24 },
+    fadeIn: { opacity: 0 },
+    scale: { opacity: 0, scale: 0.9 },
+    slideLeft: { opacity: 0, x: -24 },
+    slideRight: { opacity: 0, x: 24 },
+};
+function getAnimationVariants(preset, customTransition) {
+    const initial = ANIMATION_PRESETS[preset];
+    return {
+        hidden: { ...initial },
+        visible: {
+            opacity: 1,
+            y: 0,
+            x: 0,
+            scale: 1,
+            transition: customTransition !== null && customTransition !== void 0 ? customTransition : defaultSpringTransition,
+        },
+    };
+}
+function getGroupVariants(stagger, delay) {
+    return {
+        hidden: {},
+        visible: {
+            transition: {
+                staggerChildren: stagger,
+                delayChildren: delay,
+            },
+        },
+        exit: {
+            transition: {
+                staggerChildren: stagger * 0.5,
+                staggerDirection: -1,
+            },
+        },
+    };
+}
+function getExitVariant(preset) {
+    return { ...ANIMATION_PRESETS[preset] };
+}
+
+export { ANIMATION_PRESETS, defaultSpringTransition, getAnimationVariants, getExitVariant, getGroupVariants };

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

@@ -0,0 +1,6 @@
+import type { AnimatedContextValue, AnimatedGroupProps } from './Animated.types';
+export declare const useAnimatedContext: () => AnimatedContextValue | undefined;
+export declare const Animated: {
+    Group: ({ stagger, delay, as, children, className, ...props }: AnimatedGroupProps) => import("react/jsx-runtime").JSX.Element;
+    Item: ({ animation, transition, as, delay, className, children, ...props }: import("./Animated.types").AnimatedItemProps) => import("react/jsx-runtime").JSX.Element;
+};

package/dist/components/effects/Animated/Animated.js

@@ -0,0 +1,35 @@
+import { jsx } from 'react/jsx-runtime';
+import { createContext, useMemo, useContext } from 'react';
+import { useReducedMotion, motion, AnimatePresence } from 'motion/react';
+import { cn } from '../../../utils/cn.js';
+import { getGroupVariants } from './Animated.animations.js';
+import { AnimatedItem } from './AnimatedItem.js';
+
+const AnimatedContext = createContext(undefined);
+const useAnimatedContext = () => {
+    return useContext(AnimatedContext);
+};
+const AnimatedGroup = ({ stagger = 0.1, delay = 0, as = 'div', children, className, ...props }) => {
+    const shouldReduceMotion = useReducedMotion();
+    if (shouldReduceMotion) {
+        const Tag = as;
+        return (jsx(Tag, { className: className, ...props, children: children }));
+    }
+    const groupVariants = useMemo(() => getGroupVariants(stagger, delay), [stagger, delay]);
+    const MotionComponent = motion[as];
+    const motionProps = {
+        initial: 'hidden',
+        animate: 'visible',
+        exit: 'exit',
+        variants: groupVariants,
+        className: cn(className),
+        ...props,
+    };
+    return (jsx(AnimatedContext.Provider, { value: { isInsideGroup: true, stagger, delay }, children: jsx(AnimatePresence, { children: jsx(MotionComponent, { ...motionProps, children: children }) }) }));
+};
+const Animated = Object.assign({}, {
+    Group: AnimatedGroup,
+    Item: AnimatedItem,
+});
+
+export { Animated, useAnimatedContext };

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

@@ -0,0 +1,23 @@
+import type { Transition } from 'motion/react';
+export type AnimationPreset = 'fadeUp' | 'fadeDown' | 'fadeIn' | 'scale' | 'slideLeft' | 'slideRight';
+export type AnimatedElement = 'div' | 'section' | 'article' | 'header' | 'footer' | 'main' | 'aside' | 'li' | 'span';
+export interface AnimatedContextValue {
+    isInsideGroup: true;
+    stagger: number;
+    delay: number;
+}
+export interface AnimatedGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+    stagger?: number;
+    delay?: number;
+    as?: AnimatedElement;
+    children: React.ReactNode;
+    className?: string;
+}
+export interface AnimatedItemProps extends Omit<React.HTMLAttributes<HTMLElement>, 'transition'> {
+    animation?: AnimationPreset;
+    transition?: Transition;
+    as?: AnimatedElement;
+    delay?: number;
+    className?: string;
+    children?: React.ReactNode;
+}

package/dist/components/effects/Animated/AnimatedItem.d.ts

@@ -0,0 +1,2 @@
+import type { AnimatedItemProps } from './Animated.types';
+export declare const AnimatedItem: ({ animation, transition, as, delay, className, children, ...props }: AnimatedItemProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/effects/Animated/AnimatedItem.js

@@ -0,0 +1,41 @@
+import { jsx } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import { useReducedMotion, motion } from 'motion/react';
+import { cn } from '../../../utils/cn.js';
+import { useAnimatedContext } from './Animated.js';
+import { getAnimationVariants, getExitVariant } from './Animated.animations.js';
+
+const AnimatedItem = ({ animation = 'fadeUp', transition, as = 'div', delay, className, children, ...props }) => {
+    const shouldReduceMotion = useReducedMotion();
+    const groupContext = useAnimatedContext();
+    if (shouldReduceMotion) {
+        const Tag = as;
+        return (jsx(Tag, { className: className, ...props, children: children }));
+    }
+    const variants = useMemo(() => getAnimationVariants(animation, transition), [animation, transition]);
+    const exitState = useMemo(() => getExitVariant(animation), [animation]);
+    const motionProps = {
+        variants,
+        exit: exitState,
+        className: cn(className),
+        ...props,
+    };
+    if (!groupContext) {
+        motionProps.initial = 'hidden';
+        motionProps.animate = 'visible';
+        if (delay != null) {
+            motionProps.transition = {
+                ...(typeof variants.visible === 'object' && 'transition' in variants.visible
+                    ? variants.visible.transition
+                    : {}),
+                delay,
+            };
+        }
+    }
+    const MotionComponent = motion[as];
+    return (
+    // @ts-expect-error -- polymorphic motion element type mismatch is safe at runtime
+    jsx(MotionComponent, { ...motionProps, children: children }));
+};
+
+export { AnimatedItem };

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

@@ -0,0 +1,2 @@
+export { Animated } from './Animated';
+export type { AnimatedGroupProps, AnimatedItemProps, AnimationPreset, AnimatedElement, } from './Animated.types';

package/dist/components/effects/CustomCursor/CustomCursor.animations.d.ts

@@ -0,0 +1,16 @@
+import type { Variants, SpringOptions } from 'motion/react';
+/**
+ * Animation variants for CustomCursor component
+ * Handles enter/exit animations with scale and opacity
+ */
+export declare const customCursorVariants: Variants;
+/**
+ * Default spring configuration for smooth following behavior
+ * High stiffness for responsive movement, damping to reduce oscillation
+ */
+export declare const defaultSpringConfig: SpringOptions;
+/**
+ * Reduced motion spring configuration
+ * Nearly instant movement for users who prefer reduced motion
+ */
+export declare const reducedMotionSpringConfig: SpringOptions;

package/dist/components/effects/CustomCursor/CustomCursor.animations.js

@@ -0,0 +1,46 @@
+/**
+ * Animation variants for CustomCursor component
+ * Handles enter/exit animations with scale and opacity
+ */
+const customCursorVariants = {
+    initial: {
+        scale: 0,
+        opacity: 0,
+    },
+    animate: {
+        scale: 1,
+        opacity: 1,
+        transition: {
+            duration: 0.2,
+            ease: 'easeOut',
+        },
+    },
+    exit: {
+        scale: 0,
+        opacity: 0,
+        transition: {
+            duration: 0.15,
+            ease: 'easeIn',
+        },
+    },
+};
+/**
+ * Default spring configuration for smooth following behavior
+ * High stiffness for responsive movement, damping to reduce oscillation
+ */
+const defaultSpringConfig = {
+    stiffness: 500,
+    damping: 50,
+    bounce: 0,
+};
+/**
+ * Reduced motion spring configuration
+ * Nearly instant movement for users who prefer reduced motion
+ */
+const reducedMotionSpringConfig = {
+    stiffness: 1000,
+    damping: 100,
+    bounce: 0,
+};
+
+export { customCursorVariants, defaultSpringConfig, reducedMotionSpringConfig };

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

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import type { CustomCursorContextType, CustomCursorProviderProps, CustomCursorProps, CustomCursorFollowProps } from './CustomCursor.types';
+/**
+ * Hook to access CustomCursor context
+ * @throws Error if used outside CustomCursorProvider
+ */
+export declare const useCustomCursor: () => CustomCursorContextType;
+/**
+ * CustomCursorProvider - Context provider component
+ * Tracks mouse movement within parent element and manages cursor state
+ *
+ * @example
+ * ```tsx
+ * <CustomCursorProvider>
+ *   <CustomCursor>
+ *     <div className="w-4 h-4 bg-blue-500 rounded-full" />
+ *   </CustomCursor>
+ *   <YourContent />
+ * </CustomCursorProvider>
+ * ```
+ */
+export declare const CustomCursorProvider: React.ForwardRefExoticComponent<Omit<CustomCursorProviderProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * CustomCursor - Main cursor element component
+ * Follows mouse position exactly with instant movement
+ *
+ * @example
+ * ```tsx
+ * <CustomCursor size="md" color="primary" variant="glass">
+ *   <PaperAirplaneIcon />
+ * </CustomCursor>
+ * ```
+ */
+export declare const CustomCursor: React.ForwardRefExoticComponent<Omit<CustomCursorProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const CustomCursorFollow: React.ForwardRefExoticComponent<Omit<CustomCursorFollowProps, "ref"> & React.RefAttributes<HTMLDivElement>>;