fancy-ui-react 0.2.0

package/dist/components/noise-reveal/NoiseReveal.js

@@ -0,0 +1,329 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import * as THREE from "three";
+import { cn } from "../../utils.js";
+import { useElementRef } from "../../internals/dom/use-element-ref.js";
+import { useLiveRef } from "../../internals/dom/use-live-ref.js";
+import { observeInView } from "../../internals/motion/in-view.js";
+function lerp(start, end, t) {
+  return start + (end - start) * t;
+}
+function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+function easeInOutCubic(t) {
+  return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
+}
+function getProgress(elapsed, duration) {
+  return clamp(elapsed / duration, 0, 1);
+}
+const vertexShader = `
+		uniform float uProgress;
+		varying vec2 vUv;
+
+		void main() {
+			vec3 newPosition = position;
+
+			float distanceToCenter = distance(vec2(0.5), uv);
+			float wave = (1.0 - uProgress) * sin(distanceToCenter * 20.0 - uProgress * 5.0);
+			newPosition.z += wave;
+
+			gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0);
+			vUv = uv;
+		}
+	`;
+const fragmentShader = `
+		uniform sampler2D uTexture;
+		uniform float uTime;
+		uniform float uProgress;
+		uniform vec2 uRes;
+		uniform vec2 uImageRes;
+		varying vec2 vUv;
+
+		vec4 permute(vec4 x) { return mod(((x * 34.0) + 1.0) * x, 289.0); }
+		vec4 taylorInvSqrt(vec4 r) { return 1.79284291400159 - 0.85373472095314 * r; }
+		vec3 fade(vec3 t) { return t * t * t * (t * (t * 6.0 - 15.0) + 10.0); }
+
+		float cnoise(vec3 P) {
+			vec3 Pi0 = floor(P);
+			vec3 Pi1 = Pi0 + vec3(1.0);
+			Pi0 = mod(Pi0, 289.0);
+			Pi1 = mod(Pi1, 289.0);
+			vec3 Pf0 = fract(P);
+			vec3 Pf1 = Pf0 - vec3(1.0);
+			vec4 ix = vec4(Pi0.x, Pi1.x, Pi0.x, Pi1.x);
+			vec4 iy = vec4(Pi0.yy, Pi1.yy);
+			vec4 iz0 = Pi0.zzzz;
+			vec4 iz1 = Pi1.zzzz;
+
+			vec4 ixy = permute(permute(ix) + iy);
+			vec4 ixy0 = permute(ixy + iz0);
+			vec4 ixy1 = permute(ixy + iz1);
+
+			vec4 gx0 = ixy0 / 7.0;
+			vec4 gy0 = fract(floor(gx0) / 7.0) - 0.5;
+			gx0 = fract(gx0);
+			vec4 gz0 = vec4(0.5) - abs(gx0) - abs(gy0);
+			vec4 sz0 = step(gz0, vec4(0.0));
+			gx0 -= sz0 * (step(0.0, gx0) - 0.5);
+			gy0 -= sz0 * (step(0.0, gy0) - 0.5);
+
+			vec4 gx1 = ixy1 / 7.0;
+			vec4 gy1 = fract(floor(gx1) / 7.0) - 0.5;
+			gx1 = fract(gx1);
+			vec4 gz1 = vec4(0.5) - abs(gx1) - abs(gy1);
+			vec4 sz1 = step(gz1, vec4(0.0));
+			gx1 -= sz1 * (step(0.0, gx1) - 0.5);
+			gy1 -= sz1 * (step(0.0, gy1) - 0.5);
+
+			vec3 g000 = vec3(gx0.x, gy0.x, gz0.x);
+			vec3 g100 = vec3(gx0.y, gy0.y, gz0.y);
+			vec3 g010 = vec3(gx0.z, gy0.z, gz0.z);
+			vec3 g110 = vec3(gx0.w, gy0.w, gz0.w);
+			vec3 g001 = vec3(gx1.x, gy1.x, gz1.x);
+			vec3 g101 = vec3(gx1.y, gy1.y, gz1.y);
+			vec3 g011 = vec3(gx1.z, gy1.z, gz1.z);
+			vec3 g111 = vec3(gx1.w, gy1.w, gz1.w);
+
+			vec4 norm0 = taylorInvSqrt(vec4(dot(g000, g000), dot(g010, g010), dot(g100, g100), dot(g110, g110)));
+			g000 *= norm0.x;
+			g010 *= norm0.y;
+			g100 *= norm0.z;
+			g110 *= norm0.w;
+			vec4 norm1 = taylorInvSqrt(vec4(dot(g001, g001), dot(g011, g011), dot(g101, g101), dot(g111, g111)));
+			g001 *= norm1.x;
+			g011 *= norm1.y;
+			g101 *= norm1.z;
+			g111 *= norm1.w;
+
+			float n000 = dot(g000, Pf0);
+			float n100 = dot(g100, vec3(Pf1.x, Pf0.yz));
+			float n010 = dot(g010, vec3(Pf0.x, Pf1.y, Pf0.z));
+			float n110 = dot(g110, vec3(Pf1.xy, Pf0.z));
+			float n001 = dot(g001, vec3(Pf0.xy, Pf1.z));
+			float n101 = dot(g101, vec3(Pf1.x, Pf0.y, Pf1.z));
+			float n011 = dot(g011, vec3(Pf0.x, Pf1.yz));
+			float n111 = dot(g111, Pf1);
+
+			vec3 fade_xyz = fade(Pf0);
+			vec4 n_z = mix(vec4(n000, n100, n010, n110), vec4(n001, n101, n011, n111), fade_xyz.z);
+			vec2 n_yz = mix(n_z.xy, n_z.zw, fade_xyz.y);
+			float n_xyz = mix(n_yz.x, n_yz.y, fade_xyz.x);
+			return 2.2 * n_xyz;
+		}
+
+		vec2 CoverUV(vec2 u, vec2 s, vec2 i) {
+			float rs = s.x / s.y;
+			float ri = i.x / i.y;
+			vec2 st = rs < ri ? vec2(i.x * s.y / i.y, s.y) : vec2(s.x, i.y * s.x / i.x);
+			vec2 o = (rs < ri ? vec2((st.x - s.x) / 2.0, 0.0) : vec2(0.0, (st.y - s.y) / 2.0)) / st;
+			return u * s / st + o;
+		}
+
+		void main() {
+			vec2 newUv = CoverUV(vUv, uRes, uImageRes);
+
+			vec2 displacedUv = vUv + cnoise(vec3(vUv * 5.0, uTime * 0.1));
+			float strength = cnoise(vec3(displacedUv * 5.0, uTime * 0.2));
+
+			float radialGradient = distance(vUv, vec2(0.5)) * 12.5 - 7.0 * uProgress;
+			strength += radialGradient;
+
+			strength = clamp(strength, 0.0, 1.0);
+			strength = 1.0 - strength;
+
+			vec3 textureColor = texture2D(uTexture, newUv).rgb;
+
+			float opacityProgress = smoothstep(0.0, 0.7, uProgress);
+
+			gl_FragColor = vec4(textureColor, strength * opacityProgress);
+		}
+	`;
+function NoiseReveal({
+  src,
+  alt,
+  trigger = "view",
+  revealed = false,
+  duration = 1.5,
+  delay = 0,
+  className = ""
+}) {
+  const [container, containerRef] = useElementRef();
+  const [setTarget, setSetTarget] = useState(null);
+  const revealedRef = useLiveRef(revealed);
+  useEffect(() => {
+    if (!container) return;
+    const _src = src;
+    const _duration = duration;
+    const rect = container.getBoundingClientRect();
+    const width = rect.width || 1;
+    const height = rect.height || 1;
+    if (height === 0) return;
+    const scene = new THREE.Scene();
+    scene.background = null;
+    const cameraDistance = 5;
+    const fov = 50;
+    const camera = new THREE.PerspectiveCamera(fov, width / height, 0.01, 1e3);
+    camera.position.set(0, 0, cameraDistance);
+    const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
+    renderer.setClearColor(0, 0);
+    renderer.setPixelRatio(window.devicePixelRatio);
+    renderer.setSize(width, height, false);
+    renderer.domElement.style.width = "100%";
+    renderer.domElement.style.height = "100%";
+    container.appendChild(renderer.domElement);
+    const geometry = new THREE.PlaneGeometry(1, 1, 32, 32);
+    const material = new THREE.ShaderMaterial({
+      uniforms: {
+        uTexture: { value: null },
+        uTime: { value: 0 },
+        uProgress: { value: trigger === "manual" && revealedRef.current ? 1 : 0 },
+        uRes: { value: new THREE.Vector2(1, 1) },
+        uImageRes: { value: new THREE.Vector2(1, 1) }
+      },
+      vertexShader,
+      fragmentShader,
+      transparent: true
+    });
+    const plane = new THREE.Mesh(geometry, material);
+    scene.add(plane);
+    const fitPlane = (w, h) => {
+      const visibleH = 2 * Math.tan(fov * Math.PI / 360) * cameraDistance;
+      const visibleW = visibleH * (w / h);
+      plane.scale.set(visibleW, visibleH, 1);
+      material.uniforms.uRes.value.set(visibleW, visibleH);
+    };
+    fitPlane(width, height);
+    let texture = null;
+    new THREE.TextureLoader().load(_src, (loaded) => {
+      loaded.colorSpace = THREE.SRGBColorSpace;
+      texture = loaded;
+      material.uniforms.uTexture.value = loaded;
+      const image = loaded.image;
+      material.uniforms.uImageRes.value.set(
+        image.naturalWidth || 1,
+        image.naturalHeight || 1
+      );
+    });
+    const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    let progress = material.uniforms.uProgress.value;
+    const tween = { from: progress, to: progress, start: 0, active: false };
+    const target = (value) => {
+      if (value === tween.to) return;
+      tween.to = value;
+      if (reducedMotion) {
+        progress = value;
+        tween.active = false;
+        return;
+      }
+      tween.from = progress;
+      tween.start = performance.now();
+      tween.active = true;
+    };
+    setSetTarget(() => target);
+    const handleResize = () => {
+      const r = container.getBoundingClientRect();
+      if (r.height === 0) return;
+      camera.aspect = r.width / r.height;
+      camera.updateProjectionMatrix();
+      renderer.setSize(r.width, r.height, false);
+      fitPlane(r.width, r.height);
+    };
+    window.addEventListener("resize", handleResize);
+    const clock = new THREE.Clock();
+    let pausedTime = 0;
+    let stoppedAt = null;
+    let animationId = 0;
+    const animate = () => {
+      animationId = requestAnimationFrame(animate);
+      if (tween.active) {
+        const t = getProgress(performance.now() - tween.start, _duration * 1e3);
+        progress = lerp(tween.from, tween.to, easeInOutCubic(t));
+        if (t >= 1) tween.active = false;
+      }
+      material.uniforms.uProgress.value = progress;
+      material.uniforms.uTime.value = clock.getElapsedTime() - pausedTime;
+      renderer.render(scene, camera);
+    };
+    const start = () => {
+      if (animationId !== 0) return;
+      if (stoppedAt !== null) {
+        pausedTime += clock.getElapsedTime() - stoppedAt;
+        stoppedAt = null;
+      }
+      animate();
+    };
+    const stop = () => {
+      if (animationId === 0) return;
+      cancelAnimationFrame(animationId);
+      animationId = 0;
+      stoppedAt = clock.getElapsedTime();
+    };
+    start();
+    let onScreen = true;
+    const handleVisibility = () => {
+      if (document.hidden) stop();
+      else if (onScreen) start();
+    };
+    document.addEventListener("visibilitychange", handleVisibility);
+    const inViewHandle = observeInView(container, {
+      once: false,
+      threshold: 0,
+      onChange: (intersecting) => {
+        onScreen = intersecting;
+        if (intersecting && !document.hidden) start();
+        else stop();
+      }
+    });
+    return () => {
+      setSetTarget(null);
+      window.removeEventListener("resize", handleResize);
+      document.removeEventListener("visibilitychange", handleVisibility);
+      inViewHandle.destroy();
+      stop();
+      if (renderer.domElement.parentNode === container) container.removeChild(renderer.domElement);
+      renderer.dispose();
+      geometry.dispose();
+      material.dispose();
+      texture?.dispose();
+    };
+  }, [container, src, duration, trigger, revealedRef]);
+  useEffect(() => {
+    if (trigger !== "view" || !container || !setTarget) return;
+    const set = setTarget;
+    let timeoutId = 0;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          if (entry.isIntersecting) {
+            observer.disconnect();
+            timeoutId = window.setTimeout(() => set(1), delay * 1e3);
+          }
+        }
+      },
+      { threshold: 0.1 }
+    );
+    observer.observe(container);
+    return () => {
+      observer.disconnect();
+      clearTimeout(timeoutId);
+    };
+  }, [trigger, container, setTarget, delay]);
+  useEffect(() => {
+    if (trigger !== "manual" || !setTarget) return;
+    setTarget(revealed ? 1 : 0);
+  }, [trigger, setTarget, revealed]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: containerRef,
+      className: cn("relative h-[400px] w-full", className),
+      role: alt ? "img" : void 0,
+      "aria-label": alt
+    }
+  );
+}
+export {
+  NoiseReveal
+};

package/dist/components/noise-reveal/index.d.ts

@@ -0,0 +1,2 @@
+export { NoiseReveal } from "./NoiseReveal.js";
+export type { NoiseRevealProps } from "./NoiseReveal.js";

package/dist/components/number-input/NumberInput.d.ts

@@ -0,0 +1,40 @@
+export interface NumberInputProps {
+    /**
+     * Current value; `null` when the field is empty. Controlled when supplied:
+     * pair it with `onValueChange`, the React counterpart of the Svelte
+     * source's `bind:value`.
+     */
+    value?: number | null;
+    /** Initial value when uncontrolled (no `value` prop given). `null` for an empty field. */
+    defaultValue?: number | null;
+    /** Called with the new value on every change, including a clear to `null`. */
+    onValueChange?: (value: number | null) => void;
+    /** Lower bound. Leave unset for no lower bound. */
+    min?: number;
+    /** Upper bound. Leave unset for no upper bound. */
+    max?: number;
+    /** Increment size, including fractional steps. */
+    step?: number;
+    /** Blocks focus, typing and the step buttons; excluded from form submission. Overridden by a surrounding FormField. */
+    disabled?: boolean;
+    /** Blocks typing and the step buttons but stays focusable and is still submitted, unlike `disabled`. */
+    readonly?: boolean;
+    /** Native `required`. Overridden by a surrounding FormField. */
+    required?: boolean;
+    /** Drives the error border and `aria-invalid`. Overridden by a surrounding FormField. */
+    invalid?: boolean;
+    /** Element id. Overridden by a surrounding FormField's own `controlId`. */
+    id?: string;
+    /** Native `name`, read on form submission. */
+    name?: string;
+    /** Accessible name — for a control with no visible Label next to it. */
+    label?: string;
+    /** Additional CSS classes, applied to the outer bordered wrapper. */
+    className?: string;
+    /**
+     * Plays the matching interface cue through the sound controller. Off
+     * by default; only audible once the user has enabled sound.
+     */
+    sound?: boolean;
+}
+export declare const NumberInput: import("react").ForwardRefExoticComponent<NumberInputProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/number-input/NumberInput.js

@@ -0,0 +1,207 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef, useState, useRef, useEffect } from "react";
+import { cn } from "../../utils.js";
+import { useField } from "../../internals/field.js";
+import { DURATIONS } from "../../internals/motion/tokens.js";
+import { useSoundCue } from "../../sound/use-sound.js";
+/* empty css                 */
+const NumberInput = forwardRef(
+  ({
+    value: valueProp,
+    defaultValue = null,
+    onValueChange,
+    min,
+    max,
+    step = 1,
+    disabled = false,
+    readonly = false,
+    required = false,
+    invalid = false,
+    id,
+    name,
+    label,
+    className,
+    sound = false
+  }, ref) => {
+    const isControlled = valueProp !== void 0;
+    const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+    const value = isControlled ? valueProp : uncontrolledValue;
+    function setValue(next) {
+      if (!isControlled) setUncontrolledValue(next);
+    }
+    const [rawText, setRawText] = useState(value === null ? "" : String(value));
+    const isFocused = useRef(false);
+    useEffect(() => {
+      if (isFocused.current) return;
+      setRawText(value === null ? "" : String(value));
+    }, [value]);
+    const field = useField();
+    const effectiveId = field?.controlId ?? id;
+    const effectiveDisabled = field?.disabled ?? disabled;
+    const effectiveRequired = field?.required ?? required;
+    const effectiveInvalid = field?.invalid ?? invalid;
+    const playCue = useSoundCue(sound);
+    function decimalPlaces(n) {
+      const s = String(n);
+      const dot = s.indexOf(".");
+      return dot === -1 ? 0 : s.length - dot - 1;
+    }
+    function gridPrecision() {
+      return Math.max(decimalPlaces(step), decimalPlaces(min ?? 0));
+    }
+    function roundToStep(n) {
+      const factor = 10 ** gridPrecision();
+      return Math.round(n * factor) / factor;
+    }
+    function clampValue(n) {
+      let result = n;
+      if (min !== void 0) result = Math.max(min, result);
+      if (max !== void 0) result = Math.min(max, result);
+      return result;
+    }
+    function nextStepValue(direction) {
+      if (value === null) return clampValue(min ?? 0);
+      return clampValue(roundToStep(value + direction * step));
+    }
+    const decrementDisabled = effectiveDisabled || readonly || value !== null && min !== void 0 && value <= min;
+    const incrementDisabled = effectiveDisabled || readonly || value !== null && max !== void 0 && value >= max;
+    const [steppingDirection, setSteppingDirection] = useState(null);
+    const steppingTimer = useRef(null);
+    function flagStepping(direction) {
+      setSteppingDirection(direction);
+      if (steppingTimer.current !== null) clearTimeout(steppingTimer.current);
+      steppingTimer.current = setTimeout(() => {
+        steppingTimer.current = null;
+        setSteppingDirection(null);
+      }, DURATIONS.micro);
+    }
+    useEffect(() => {
+      return () => {
+        if (steppingTimer.current !== null) clearTimeout(steppingTimer.current);
+      };
+    }, []);
+    function applyStep(direction) {
+      const next = nextStepValue(direction);
+      setValue(next);
+      setRawText(String(next));
+      playCue("tick");
+      onValueChange?.(next);
+      flagStepping(direction);
+    }
+    function handleDecrement() {
+      if (decrementDisabled) return;
+      applyStep(-1);
+    }
+    function handleIncrement() {
+      if (incrementDisabled) return;
+      applyStep(1);
+    }
+    function handleKeydown(event) {
+      if (effectiveDisabled || readonly) return;
+      if (event.key === "ArrowUp") {
+        event.preventDefault();
+        if (incrementDisabled) return;
+        applyStep(1);
+      } else if (event.key === "ArrowDown") {
+        event.preventDefault();
+        if (decrementDisabled) return;
+        applyStep(-1);
+      }
+    }
+    function handleInput(event) {
+      if (effectiveDisabled || readonly) return;
+      const raw = event.currentTarget.value;
+      setRawText(raw);
+      if (raw === "") {
+        if (value !== null) {
+          setValue(null);
+          onValueChange?.(null);
+        }
+        return;
+      }
+      const parsed = Number(raw);
+      if (Number.isNaN(parsed)) return;
+      setValue(parsed);
+      onValueChange?.(parsed);
+    }
+    function handleFocus(_event) {
+      isFocused.current = true;
+    }
+    function handleBlur(_event) {
+      isFocused.current = false;
+      let settled = value;
+      if (settled !== null) {
+        const clamped = clampValue(settled);
+        if (clamped !== settled) {
+          settled = clamped;
+          setValue(clamped);
+          onValueChange?.(clamped);
+        }
+      }
+      setRawText(settled === null ? "" : String(settled));
+    }
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "ft-number-input border-input inline-flex w-fit items-stretch overflow-hidden rounded-[8px] border",
+          effectiveInvalid && "border-destructive/50",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "ft-number-input-step text-muted-foreground border-input hover:bg-accent hover:text-accent-foreground flex w-[34px] shrink-0 cursor-pointer items-center justify-center border-r focus-visible:outline-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+              "aria-label": "Decrease value",
+              disabled: decrementDisabled,
+              "data-stepping": steppingDirection === -1 ? "true" : void 0,
+              onClick: handleDecrement,
+              children: "−"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref,
+              type: "text",
+              inputMode: "decimal",
+              className: "ft-number-input-field text-foreground w-full min-w-[3ch] border-0 bg-transparent px-[18px] py-[9px] text-center font-mono text-[13px] focus-visible:outline-none disabled:cursor-not-allowed",
+              id: effectiveId,
+              name,
+              value: rawText,
+              disabled: effectiveDisabled,
+              readOnly: readonly,
+              required: effectiveRequired,
+              "aria-invalid": effectiveInvalid ? "true" : void 0,
+              "aria-describedby": field?.describedBy,
+              "aria-label": label,
+              onChange: handleInput,
+              onKeyDown: handleKeydown,
+              onFocus: handleFocus,
+              onBlur: handleBlur
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "ft-number-input-step text-muted-foreground border-input hover:bg-accent hover:text-accent-foreground flex w-[34px] shrink-0 cursor-pointer items-center justify-center border-l focus-visible:outline-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+              "aria-label": "Increase value",
+              disabled: incrementDisabled,
+              "data-stepping": steppingDirection === 1 ? "true" : void 0,
+              onClick: handleIncrement,
+              children: "+"
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+NumberInput.displayName = "NumberInput";
+export {
+  NumberInput
+};

package/dist/components/number-input/index.d.ts

@@ -0,0 +1,2 @@
+export { NumberInput } from "./NumberInput.js";
+export type { NumberInputProps } from "./NumberInput.js";

package/dist/components/number-ticker/NumberTicker.d.ts

@@ -0,0 +1,22 @@
+/**
+ * NumberTicker - Animated number counter
+ *
+ * Animates a number from 0 to `value` (or vice versa) with easing.
+ * Triggers when the element enters the viewport via IntersectionObserver.
+ * Formatted using Intl.NumberFormat.
+ */
+export interface NumberTickerProps {
+    /** Target number to animate to */
+    value?: number;
+    /** Animation direction: "up" counts 0→value, "down" counts value→0 */
+    direction?: "up" | "down";
+    /** Animation duration in ms */
+    duration?: number;
+    /** Delay before animation starts (ms) */
+    delay?: number;
+    /** Number of decimal places to display */
+    decimalPlaces?: number;
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare function NumberTicker({ value, direction, duration, delay, decimalPlaces, className, }: NumberTickerProps): import("react").JSX.Element;