trix-ui 0.2.0 → 0.2.2

package/templates/wrappers/Interative-wrapper.tsx

@@ -0,0 +1,555 @@
+"use client";
+
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cn } from "../../lib/utils";
+
+type AnyElement = HTMLElement;
+
+function composeRefs<T>(...refs: Array<React.Ref<T> | undefined>) {
+  return (node: T) => {
+    for (const ref of refs) {
+      if (!ref) continue;
+      if (typeof ref === "function") ref(node);
+      else (ref as React.MutableRefObject<T | null>).current = node;
+    }
+  };
+}
+
+function usePrefersReducedMotion() {
+  const [reduced, setReduced] = React.useState(false);
+
+  React.useEffect(() => {
+    if (typeof window === "undefined") return;
+    const media = window.matchMedia("(prefers-reduced-motion: reduce)");
+    const onChange = () => setReduced(media.matches);
+    onChange();
+    media.addEventListener?.("change", onChange);
+    return () => media.removeEventListener?.("change", onChange);
+  }, []);
+
+  return reduced;
+}
+
+const clamp = (v: number, min: number, max: number) =>
+  Math.max(min, Math.min(max, v));
+
+const lerp = (a: number, b: number, t: number) => a + (b - a) * t;
+
+export type InteractiveWrapProps = {
+  asChild?: boolean;
+
+  /** Disable all interactions */
+  disabled?: boolean;
+
+  /** Press animation (scale) */
+  press?: boolean;
+
+  /** Cursor-follow glow */
+  hoverGlow?: boolean;
+
+  /** Magnetic hover pull */
+  magnetic?: boolean;
+
+  /** Focus ring when any child inside gets focus */
+  focusRing?: boolean;
+
+  /** Clip glow + children to wrapper bounds */
+  clip?: boolean;
+
+  /** Press scale (default 0.98) */
+  pressScale?: number;
+
+  /**
+   * Magnetic strength (0 to 1)
+   * Recommended range: 0.15 to 0.45
+   */
+  magneticStrength?: number;
+
+  /** Max translate in px when magnetic is enabled (default 14) */
+  magneticMaxTranslate?: number;
+
+  /**
+   * Smoothing factor for magnetic movement (0..1)
+   * Higher = snappier, lower = smoother. Default 0.18
+   */
+  magneticDamping?: number;
+
+  /**
+   * Glow radius in px
+   * Recommended: 180 - 320
+   */
+  glowSize?: number;
+
+  /**
+   * Glow opacity (0 to 1)
+   * Recommended: 0.25 - 0.65
+   */
+  glowOpacity?: number;
+
+  /**
+   * Glow color (solid color is best)
+   * Example: "rgba(124, 58, 237, 1)"
+   */
+  glowColor?: string;
+
+  /**
+   * Smoothness for glow follow (0..1)
+   * Higher = snappier, lower = smoother. Default 0.28
+   */
+  glowDamping?: number;
+
+  /** Blend mode for glow layer (default "screen") */
+  glowBlendMode?: React.CSSProperties["mixBlendMode"];
+
+  /**
+   * Optional: wrapper-level press handler (pointer + keyboard).
+   * If provided (and not asChild), wrapper becomes button-like (role/tabIndex).
+   */
+  onPress?: (
+    e: React.PointerEvent<AnyElement> | React.KeyboardEvent<AnyElement>
+  ) => void;
+
+  className?: string;
+  children: React.ReactNode;
+} & React.HTMLAttributes<AnyElement>;
+
+export const InteractiveWrap = React.forwardRef<AnyElement, InteractiveWrapProps>(
+  (
+    {
+      asChild,
+      disabled = false,
+
+      press = true,
+      hoverGlow = true,
+      magnetic = false,
+      focusRing = true,
+      clip = true,
+
+      pressScale = 0.98,
+
+      magneticStrength = 0.32,
+      magneticMaxTranslate = 14,
+      magneticDamping = 0.18,
+
+      glowSize = 240,
+      glowOpacity = 0.45,
+      glowColor = "rgba(124, 58, 237, 1)",
+      glowDamping = 0.28,
+      glowBlendMode = "screen",
+
+      onPress,
+
+      className,
+      children,
+      style,
+      ...props
+    },
+    forwardedRef
+  ) => {
+    const Comp = asChild ? Slot : "div";
+
+    const internalRef = React.useRef<AnyElement | null>(null);
+    const ref = composeRefs(forwardedRef, internalRef);
+
+    const reducedMotion = usePrefersReducedMotion();
+    const canAnimate = !disabled && !reducedMotion;
+
+    const [hovered, setHovered] = React.useState(false);
+    const [pressed, setPressed] = React.useState(false);
+
+    // RAF loop: keeps magnet + glow stable and avoids CSS-transition lag.
+    const rafRef = React.useRef<number | null>(null);
+    const runningRef = React.useRef(false);
+
+    const pointerDownRef = React.useRef(false);
+    const keyDownRef = React.useRef(false);
+
+    const stateRef = React.useRef({
+      // current
+      x: 0,
+      y: 0,
+      tx: 0,
+      ty: 0,
+      scale: 1,
+
+      // targets
+      targetX: 0,
+      targetY: 0,
+      targetTx: 0,
+      targetTy: 0,
+      targetScale: 1,
+    });
+
+    const applyVars = React.useCallback(() => {
+      const el = internalRef.current;
+      if (!el) return;
+
+      const s = stateRef.current;
+
+      el.style.setProperty("--iw-x", `${s.x}px`);
+      el.style.setProperty("--iw-y", `${s.y}px`);
+      el.style.setProperty("--iw-tx", `${s.tx}px`);
+      el.style.setProperty("--iw-ty", `${s.ty}px`);
+      el.style.setProperty("--iw-scale", `${s.scale}`);
+    }, []);
+
+    const startLoop = React.useCallback(() => {
+      if (!canAnimate) return;
+      if (runningRef.current) return;
+      runningRef.current = true;
+
+      const tick = () => {
+        const el = internalRef.current;
+        if (!el) {
+          runningRef.current = false;
+          return;
+        }
+
+        const s = stateRef.current;
+
+        // smooth follow
+        s.x = lerp(s.x, s.targetX, clamp(glowDamping, 0.05, 0.75));
+        s.y = lerp(s.y, s.targetY, clamp(glowDamping, 0.05, 0.75));
+
+        s.tx = lerp(s.tx, s.targetTx, clamp(magneticDamping, 0.06, 0.6));
+        s.ty = lerp(s.ty, s.targetTy, clamp(magneticDamping, 0.06, 0.6));
+
+        // scale can be a bit snappier
+        s.scale = lerp(s.scale, s.targetScale, 0.22);
+
+        applyVars();
+
+        const near = (a: number, b: number) => Math.abs(a - b) < 0.12;
+
+        const settled =
+          near(s.x, s.targetX) &&
+          near(s.y, s.targetY) &&
+          near(s.tx, s.targetTx) &&
+          near(s.ty, s.targetTy) &&
+          Math.abs(s.scale - s.targetScale) < 0.01;
+
+        // keep running while hovered/pressed, or while returning to rest
+        const keepAlive = hovered || pressed || !settled;
+
+        if (keepAlive) {
+          rafRef.current = requestAnimationFrame(tick);
+        } else {
+          runningRef.current = false;
+          rafRef.current = null;
+        }
+      };
+
+      rafRef.current = requestAnimationFrame(tick);
+    }, [
+      canAnimate,
+      applyVars,
+      glowDamping,
+      magneticDamping,
+      hovered,
+      pressed,
+    ]);
+
+    const setCenterTargets = React.useCallback(() => {
+      const el = internalRef.current;
+      if (!el) return;
+      const rect = el.getBoundingClientRect();
+      const cx = rect.width / 2;
+      const cy = rect.height / 2;
+      const s = stateRef.current;
+      s.targetX = cx;
+      s.targetY = cy;
+
+      // also initialize current to avoid jump on first hover
+      if (!hovered) {
+        s.x = cx;
+        s.y = cy;
+      }
+    }, [hovered]);
+
+    React.useEffect(() => {
+      // init at center so glow looks correct before mouse moves
+      setCenterTargets();
+      applyVars();
+
+      const el = internalRef.current;
+      if (!el) return;
+
+      const ro = new ResizeObserver(() => {
+        setCenterTargets();
+        startLoop();
+      });
+
+      ro.observe(el);
+
+      return () => {
+        ro.disconnect();
+        if (rafRef.current) cancelAnimationFrame(rafRef.current);
+        rafRef.current = null;
+        runningRef.current = false;
+      };
+    }, [applyVars, setCenterTargets, startLoop]);
+
+    const setMagnetTargets = React.useCallback(
+      (clientX: number, clientY: number, pointerType?: string) => {
+        const el = internalRef.current;
+        if (!el) return;
+
+        const rect = el.getBoundingClientRect();
+
+        // local coords for glow
+        const x = clientX - rect.left;
+        const y = clientY - rect.top;
+
+        const s = stateRef.current;
+        s.targetX = x;
+        s.targetY = y;
+
+        const isTouch = pointerType === "touch";
+        const allowMouseFX = !isTouch;
+
+        if (canAnimate && magnetic && allowMouseFX) {
+          const dx = x - rect.width / 2;
+          const dy = y - rect.height / 2;
+
+          const max = Math.min(rect.width, rect.height) / 2;
+          const nx = max > 0 ? dx / max : 0;
+          const ny = max > 0 ? dy / max : 0;
+
+          const cx = clamp(nx, -1, 1);
+          const cy = clamp(ny, -1, 1);
+
+          const translateMax =
+            clamp(magneticMaxTranslate, 0, 40) *
+            clamp(magneticStrength, 0, 1);
+
+          s.targetTx = cx * translateMax;
+          s.targetTy = cy * translateMax;
+        } else {
+          s.targetTx = 0;
+          s.targetTy = 0;
+        }
+
+        startLoop();
+      },
+      [
+        canAnimate,
+        magnetic,
+        magneticMaxTranslate,
+        magneticStrength,
+        startLoop,
+      ]
+    );
+
+    const handlePointerEnter = (e: React.PointerEvent<AnyElement>) => {
+      if (disabled) return;
+      setHovered(true);
+      setCenterTargets();
+      // start loop so glow fades in smoothly even before move
+      startLoop();
+      props.onPointerEnter?.(e);
+    };
+
+    const handlePointerLeave = (e: React.PointerEvent<AnyElement>) => {
+      if (disabled) return;
+
+      setHovered(false);
+      setPressed(false);
+      pointerDownRef.current = false;
+
+      // return to rest smoothly
+      const s = stateRef.current;
+      s.targetTx = 0;
+      s.targetTy = 0;
+      s.targetScale = 1;
+      setCenterTargets();
+      startLoop();
+
+      props.onPointerLeave?.(e);
+    };
+
+    const handlePointerMove = (e: React.PointerEvent<AnyElement>) => {
+      if (disabled) return;
+      setMagnetTargets(e.clientX, e.clientY, e.pointerType);
+      props.onPointerMove?.(e);
+    };
+
+    const handlePointerDown = (e: React.PointerEvent<AnyElement>) => {
+      if (disabled) return;
+
+      // only primary button (left click)
+      if ("button" in e && e.button !== 0) {
+        props.onPointerDown?.(e);
+        return;
+      }
+
+      pointerDownRef.current = true;
+
+      try {
+        (e.currentTarget as AnyElement).setPointerCapture?.(e.pointerId);
+      } catch {
+        // ignore
+      }
+
+      if (canAnimate && press) {
+        setPressed(true);
+        stateRef.current.targetScale = clamp(pressScale, 0.9, 1);
+        startLoop();
+      }
+
+      props.onPointerDown?.(e);
+    };
+
+    const handlePointerUp = (e: React.PointerEvent<AnyElement>) => {
+      if (disabled) return;
+
+      if (press) setPressed(false);
+      stateRef.current.targetScale = 1;
+      startLoop();
+
+      // wrapper-level click (only if pointer started here)
+      if (onPress && pointerDownRef.current) onPress(e);
+      pointerDownRef.current = false;
+
+      props.onPointerUp?.(e);
+    };
+
+    const handlePointerCancel = (e: React.PointerEvent<AnyElement>) => {
+      if (disabled) return;
+      setPressed(false);
+      pointerDownRef.current = false;
+
+      const s = stateRef.current;
+      s.targetTx = 0;
+      s.targetTy = 0;
+      s.targetScale = 1;
+      startLoop();
+
+      props.onPointerCancel?.(e);
+    };
+
+    const handleKeyDown = (e: React.KeyboardEvent<AnyElement>) => {
+      if (disabled) return;
+
+      // Space/Enter press feedback (role=button behavior)
+      if ((e.key === "Enter" || e.key === " ") && press && canAnimate) {
+        if (!keyDownRef.current) {
+          keyDownRef.current = true;
+          setPressed(true);
+          stateRef.current.targetScale = clamp(pressScale, 0.9, 1);
+          startLoop();
+        }
+      }
+
+      // Prevent scroll on Space when wrapper acts like a button
+      if ((e.key === " " || e.key === "Enter") && onPress) {
+        if (e.key === " ") e.preventDefault();
+      }
+
+      props.onKeyDown?.(e);
+    };
+
+    const handleKeyUp = (e: React.KeyboardEvent<AnyElement>) => {
+      if (disabled) return;
+
+      if (e.key === "Enter" || e.key === " ") {
+        if (keyDownRef.current) {
+          keyDownRef.current = false;
+          setPressed(false);
+          stateRef.current.targetScale = 1;
+          startLoop();
+          if (onPress) onPress(e);
+        }
+      }
+
+      props.onKeyUp?.(e);
+    };
+
+    const buttonLikeProps =
+      !asChild && onPress
+        ? ({
+            role: "button",
+            tabIndex: disabled ? -1 : props.tabIndex ?? 0,
+            "aria-disabled": disabled ? true : undefined,
+          } as const)
+        : ({} as const);
+
+    const userTransform =
+      typeof style?.transform === "string" ? style.transform : "";
+
+    // If you keep CSS transition on transform, magnetic will feel delayed.
+    // We rely on RAF smoothing instead, so no transform transition here.
+    const baseTransform = canAnimate
+      ? `translate3d(var(--iw-tx, 0px), var(--iw-ty, 0px), 0) scale(var(--iw-scale, 1))`
+      : "";
+
+    return (
+      <Comp
+        ref={ref}
+        {...buttonLikeProps}
+        {...props}
+        onPointerEnter={handlePointerEnter}
+        onPointerLeave={handlePointerLeave}
+        onPointerMove={handlePointerMove}
+        onPointerDown={handlePointerDown}
+        onPointerUp={handlePointerUp}
+        onPointerCancel={handlePointerCancel}
+        onKeyDown={handleKeyDown}
+        onKeyUp={handleKeyUp}
+        data-hovered={hovered ? "true" : "false"}
+        data-pressed={pressed ? "true" : "false"}
+        className={cn(
+          "relative isolate",
+          clip ? "overflow-hidden" : "overflow-visible",
+          canAnimate && "will-change-transform",
+          disabled ? "pointer-events-none opacity-60" : "pointer-events-auto",
+          focusRing &&
+            !disabled &&
+            "focus-within:outline-none focus-within:ring-2 focus-within:ring-ring/30 focus-within:ring-offset-2 focus-within:ring-offset-background",
+          className
+        )}
+        style={{
+          ...style,
+          // Better mobile feel when wrapper is clickable
+          touchAction: onPress ? "manipulation" : style?.touchAction,
+          transform: canAnimate
+            ? `${baseTransform}${userTransform ? ` ${userTransform}` : ""}`
+            : userTransform || style?.transform,
+        }}
+      >
+        {/* Cursor-follow glow layer */}
+        {hoverGlow && (
+          <div
+            aria-hidden="true"
+            className={cn(
+              "pointer-events-none absolute inset-0",
+              "transition-opacity duration-200 ease-out"
+            )}
+            style={{
+              opacity: hovered && !disabled ? glowOpacity : 0,
+              mixBlendMode: glowBlendMode,
+              background: `radial-gradient(${glowSize}px circle at var(--iw-x, 50%) var(--iw-y, 50%), ${glowColor}, transparent 62%)`,
+            }}
+          />
+        )}
+
+        {/* Content */}
+        <div className="relative z-[1]">{children}</div>
+      </Comp>
+    );
+  }
+);
+
+InteractiveWrap.displayName = "InteractiveWrap";
+
+/* -------------------------------- Usage ---------------------------------
+
+<InteractiveWrap hoverGlow magnetic press className="rounded-2xl">
+  <button className="px-6 py-3 rounded-2xl bg-white/10 text-white">Button</button>
+</InteractiveWrap>
+
+<InteractiveWrap onPress={() => console.log("pressed")} className="rounded-xl p-3">
+  <div>Card-like clickable wrapper</div>
+</InteractiveWrap>
+
+--------------------------------------------------------------------------- */

package/LICENSE.md

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2023 shadcn
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

package/templates/components/ui/checkbox.tsx

@@ -1,33 +0,0 @@
-import * as React from "react"
-import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
-
-import { cn } from "@/lib/utils"
-
-function CheckIcon(props: React.SVGProps<SVGSVGElement>) {
-  return (
-    <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" {...props}>
-      <polyline points="3.5 8.5 6.5 11.5 12.5 4.5" />
-    </svg>
-  )
-}
-
-const Checkbox = React.forwardRef<
-  React.ElementRef<typeof CheckboxPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
->(({ className, ...props }, ref) => (
-  <CheckboxPrimitive.Root
-    ref={ref}
-    className={cn(
-      "peer h-4 w-4 shrink-0 rounded-sm border border-input bg-background shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 ring-offset-background data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
-      className
-    )}
-    {...props}
-  >
-    <CheckboxPrimitive.Indicator className="flex items-center justify-center text-current">
-      <CheckIcon className="h-3.5 w-3.5 stroke-[2.5]" />
-    </CheckboxPrimitive.Indicator>
-  </CheckboxPrimitive.Root>
-))
-Checkbox.displayName = "Checkbox"
-
-export { Checkbox }

package/templates/components/ui/dialog.tsx

@@ -1,92 +0,0 @@
-import * as React from "react"
-import * as DialogPrimitive from "@radix-ui/react-dialog"
-
-import { cn } from "@/lib/utils"
-
-const Dialog = DialogPrimitive.Root
-const DialogTrigger = DialogPrimitive.Trigger
-const DialogClose = DialogPrimitive.Close
-
-const DialogOverlay = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Overlay
-    ref={ref}
-    className={cn("fixed inset-0 z-50 bg-black/50", className)}
-    {...props}
-  />
-))
-DialogOverlay.displayName = "DialogOverlay"
-
-const DialogContent = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Portal>
-    <DialogOverlay />
-    <DialogPrimitive.Content
-      ref={ref}
-      className={cn(
-        "fixed left-1/2 top-1/2 z-50 w-full max-w-lg -translate-x-1/2 -translate-y-1/2 rounded-lg border border-border bg-background p-6 shadow-lg focus-visible:outline-none",
-        className
-      )}
-      {...props}
-    />
-  </DialogPrimitive.Portal>
-))
-DialogContent.displayName = "DialogContent"
-
-const DialogHeader = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div className={cn("flex flex-col space-y-2 text-left", className)} {...props} />
-)
-DialogHeader.displayName = "DialogHeader"
-
-const DialogFooter = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
-    {...props}
-  />
-)
-DialogFooter.displayName = "DialogFooter"
-
-const DialogTitle = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Title
-    ref={ref}
-    className={cn("text-lg font-semibold", className)}
-    {...props}
-  />
-))
-DialogTitle.displayName = "DialogTitle"
-
-const DialogDescription = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Description
-    ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
-    {...props}
-  />
-))
-DialogDescription.displayName = "DialogDescription"
-
-export {
-  Dialog,
-  DialogTrigger,
-  DialogClose,
-  DialogContent,
-  DialogHeader,
-  DialogFooter,
-  DialogTitle,
-  DialogDescription
-}