trix-ui 0.2.1 → 0.2.3

package/templates/wrappers/progress-wrapper.tsx

@@ -0,0 +1,248 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "../../lib/utils";
+
+type Axis = "y" | "x";
+
+export type ScrollProgressState = {
+  /** 0..1 (clamped if clamp=true) */
+  progress: number;
+  /** Raw (can go <0 or >1 when clamp=false) */
+  rawProgress: number;
+  /** True if any part of the element intersects the viewport */
+  inView: boolean;
+  /** Element rect in viewport coordinates */
+  rect: DOMRect | null;
+};
+
+export interface ScrollProgressWrapProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "onProgress"> {
+  /** Render-prop child gets scroll progress state */
+  children: (state: ScrollProgressState) => React.ReactNode;
+
+  /** Scroll axis (default "y") */
+  axis?: Axis;
+
+  /**
+   * When progress should start/end.
+   * - "cover": progress=0 when element just enters, progress=1 when it just leaves (default)
+   * - "contain": progress=0 when element top hits viewport top, progress=1 when bottom hits viewport bottom
+   */
+  mode?: "cover" | "contain";
+
+  /** Clamp progress to 0..1 (default true) */
+  clamp?: boolean;
+
+  /**
+   * Call on every progress change (rAF throttled)
+   * Receives clamped progress.
+   */
+  onProgress?: (progress: number, state: ScrollProgressState) => void;
+
+  /**
+   * Additional offset (px) applied to viewport size.
+   * Useful to trigger earlier/later without rootMargin complexity.
+   * Default 0.
+   */
+  viewportOffset?: number;
+
+  /**
+   * Update frequency control. If true (default), uses requestAnimationFrame while scrolling/resizing.
+   * If false, uses scroll+resize events directly (still throttled by rAF internally).
+   */
+  raf?: boolean;
+
+  /**
+   * Debug overlay (default false)
+   * Shows progress and a small bar.
+   */
+  debug?: boolean;
+}
+
+function clamp01(n: number) {
+  if (n < 0) return 0;
+  if (n > 1) return 1;
+  return n;
+}
+
+function usePrefersReducedMotion(): boolean {
+  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;
+}
+
+/**
+ * ScrollProgressWrap
+ * Exposes element-local scroll progress (0..1) for timelines, progress bars, parallax, etc.
+ */
+export function ScrollProgressWrap({
+  axis = "y",
+  mode = "cover",
+  clamp = true,
+  onProgress,
+  viewportOffset = 0,
+  raf = true,
+  debug = false,
+  className,
+  style,
+  children,
+  ...props
+}: ScrollProgressWrapProps): React.JSX.Element {
+  const ref = React.useRef<HTMLDivElement | null>(null);
+  const reducedMotion = usePrefersReducedMotion();
+
+  const [state, setState] = React.useState<ScrollProgressState>({
+    progress: 0,
+    rawProgress: 0,
+    inView: false,
+    rect: null,
+  });
+
+  const last = React.useRef({
+    progress: Number.NaN,
+    rawProgress: Number.NaN,
+    inView: false,
+  });
+
+  const compute = React.useCallback(() => {
+    const el = ref.current;
+    if (!el) return;
+
+    const rect = el.getBoundingClientRect();
+
+    // viewport size with optional offset
+    const vw = window.innerWidth + viewportOffset * 2;
+    const vh = window.innerHeight + viewportOffset * 2;
+
+    // shift coordinates if viewportOffset is used (simulate bigger viewport)
+    const top = rect.top - viewportOffset;
+    const left = rect.left - viewportOffset;
+
+    const size = axis === "y" ? rect.height : rect.width;
+    const viewportSize = axis === "y" ? vh : vw;
+    const start = axis === "y" ? top : left;
+    const end = start + size;
+
+    const inView = end > 0 && start < viewportSize;
+
+    let rawProgress: number;
+
+    if (mode === "cover") {
+      // progress from "just entering" (end=0) to "just leaving" (start=viewport)
+      // When element end touches 0 => progress 0
+      // When element start touches viewport => progress 1
+      const denom = size + viewportSize || 1;
+      rawProgress = (viewportSize - start) / denom;
+    } else {
+      // "contain": from top hits viewport top to bottom hits viewport bottom
+      // top=0 => 0, bottom=viewport => 1
+      const denom = Math.max(1, viewportSize - size);
+      rawProgress = (-start) / denom;
+    }
+
+    const progress = clamp ? clamp01(rawProgress) : rawProgress;
+
+    // avoid excessive re-renders
+    const changed =
+      progress !== last.current.progress ||
+      rawProgress !== last.current.rawProgress ||
+      inView !== last.current.inView;
+
+    if (!changed) return;
+
+    last.current = { progress, rawProgress, inView };
+
+    const next: ScrollProgressState = {
+      progress,
+      rawProgress,
+      inView,
+      rect,
+    };
+
+    setState(next);
+    onProgress?.(progress, next);
+  }, [axis, mode, clamp, onProgress, viewportOffset]);
+
+  React.useEffect(() => {
+    if (typeof window === "undefined") return;
+
+    // Reduced motion doesn't mean "no updates", but we can still compute normally.
+    // Keeping this here in case you want to short-circuit later:
+    // if (reducedMotion) return;
+
+    let ticking = false;
+
+    const schedule = () => {
+      if (ticking) return;
+      ticking = true;
+      requestAnimationFrame(() => {
+        ticking = false;
+        compute();
+      });
+    };
+
+    // initial
+    schedule();
+
+    const onScroll = () => schedule();
+    const onResize = () => schedule();
+
+    window.addEventListener("scroll", onScroll, { passive: true });
+    window.addEventListener("resize", onResize);
+
+    // If raf=true, we also keep things smooth during momentum scrolling on some devices
+    // by scheduling repeatedly while the page is scrolling.
+    // We still only update when events fire, but rAF ensures we render at the right time.
+    // (If you want "always-on" tracking, we can add an optional loop mode later.)
+    return () => {
+      window.removeEventListener("scroll", onScroll);
+      window.removeEventListener("resize", onResize);
+    };
+  }, [compute, reducedMotion, raf]);
+
+  return (
+    <div
+      ref={ref}
+      {...props}
+      className={cn("relative", className)}
+      style={style}
+    >
+      {children(state)}
+
+      {debug ? (
+        <div className="pointer-events-none absolute right-3 top-3 z-10 w-36 rounded-xl border border-border/60 bg-background/80 p-3 text-[11px] text-muted-foreground shadow-sm backdrop-blur">
+          <div className="flex items-center justify-between">
+            <span>progress</span>
+            <span className="font-medium text-foreground">
+              {Math.round(state.progress * 100)}%
+            </span>
+          </div>
+          <div className="mt-2 h-2 w-full overflow-hidden rounded-full bg-muted">
+            <div
+              className="h-full bg-foreground"
+              style={{ width: `${clamp01(state.progress) * 100}%` }}
+            />
+          </div>
+          <div className="mt-2 flex items-center justify-between">
+            <span>inView</span>
+            <span className="font-medium text-foreground">
+              {state.inView ? "true" : "false"}
+            </span>
+          </div>
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+ScrollProgressWrap.displayName = "ScrollProgressWrap";

package/templates/wrappers/reveal-wrap.tsx

@@ -0,0 +1,136 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+type RevealDirection = "up" | "down" | "left" | "right" | "none"
+
+export interface RevealWrapProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  /** Reveal only once (default true) */
+  once?: boolean
+
+  /** IntersectionObserver threshold (default 0.2) */
+  threshold?: number
+
+  /** IntersectionObserver rootMargin (default "0px 0px -10% 0px") */
+  rootMargin?: string
+
+  /** Transition delay in ms (default 0) */
+  delay?: number
+
+  /** Transition duration in ms (default 600) */
+  duration?: number
+
+  /** Direction to reveal from (default "up") */
+  direction?: RevealDirection
+
+  /** Offset distance in px (default 18) */
+  distance?: number
+}
+
+function usePrefersReducedMotion(): boolean {
+  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
+}
+
+export function RevealWrap({
+  once = true,
+  threshold = 0.2,
+  rootMargin = "0px 0px -10% 0px",
+  delay = 0,
+  duration = 600,
+  direction = "up",
+  distance = 18,
+  className,
+  style,
+  children,
+  ...props
+}: RevealWrapProps): React.JSX.Element {
+  const ref = React.useRef<HTMLDivElement | null>(null)
+  const [visible, setVisible] = React.useState(false)
+  const reducedMotion = usePrefersReducedMotion()
+
+  React.useEffect(() => {
+    if (reducedMotion) {
+      setVisible(true)
+      return
+    }
+
+    const el = ref.current
+    if (!el) return
+
+    if (typeof IntersectionObserver === "undefined") {
+      setVisible(true)
+      return
+    }
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const entry = entries[0]
+        if (!entry) return
+
+        if (entry.isIntersecting) {
+          setVisible(true)
+          if (once) observer.unobserve(entry.target)
+        } else if (!once) {
+          setVisible(false)
+        }
+      },
+      { threshold, rootMargin }
+    )
+
+    observer.observe(el)
+    return () => observer.disconnect()
+  }, [once, threshold, rootMargin, reducedMotion])
+
+  const clampedDistance = Math.max(0, distance)
+  const clampedDuration = Math.max(0, duration)
+  const clampedDelay = Math.max(0, delay)
+
+  const offsetClass =
+    direction === "up"
+      ? "translate-y-[var(--reveal-distance)]"
+      : direction === "down"
+      ? "-translate-y-[var(--reveal-distance)]"
+      : direction === "left"
+      ? "translate-x-[var(--reveal-distance)]"
+      : direction === "right"
+      ? "-translate-x-[var(--reveal-distance)]"
+      : ""
+
+  return (
+    <div
+      ref={ref}
+      {...props}
+      className={cn(
+        "transition-[opacity,transform] ease-out will-change-[opacity,transform]",
+        "motion-reduce:transition-none motion-reduce:transform-none",
+        visible
+          ? "opacity-100 translate-x-0 translate-y-0"
+          : cn("opacity-0", offsetClass),
+        className
+      )}
+      style={{
+        "--reveal-distance": `${clampedDistance}px`,
+        transitionDuration: `${clampedDuration}ms`,
+        transitionDelay: `${clampedDelay}ms`,
+        ...style,
+      } as React.CSSProperties}
+    >
+      {children}
+    </div>
+  )
+}
+
+RevealWrap.displayName = "RevealWrap"

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
-}

package/templates/components/ui/dropdown.tsx

@@ -1,75 +0,0 @@
-import * as React from "react"
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
-
-import { cn } from "@/lib/utils"
-
-const DropdownMenu = DropdownMenuPrimitive.Root
-const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
-const DropdownMenuGroup = DropdownMenuPrimitive.Group
-
-const DropdownMenuContent = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
-  <DropdownMenuPrimitive.Portal>
-    <DropdownMenuPrimitive.Content
-      ref={ref}
-      sideOffset={sideOffset}
-      className={cn(
-        "z-50 min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md",
-        className
-      )}
-      {...props}
-    />
-  </DropdownMenuPrimitive.Portal>
-))
-DropdownMenuContent.displayName = "DropdownMenuContent"
-
-const DropdownMenuItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item>
->(({ className, ...props }, ref) => (
-  <DropdownMenuPrimitive.Item
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
-    )}
-    {...props}
-  />
-))
-DropdownMenuItem.displayName = "DropdownMenuItem"
-
-const DropdownMenuLabel = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label>
->(({ className, ...props }, ref) => (
-  <DropdownMenuPrimitive.Label
-    ref={ref}
-    className={cn("px-2 py-1.5 text-xs font-semibold", className)}
-    {...props}
-  />
-))
-DropdownMenuLabel.displayName = "DropdownMenuLabel"
-
-const DropdownMenuSeparator = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <DropdownMenuPrimitive.Separator
-    ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-border", className)}
-    {...props}
-  />
-))
-DropdownMenuSeparator.displayName = "DropdownMenuSeparator"
-
-export {
-  DropdownMenu,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuGroup
-}

package/templates/components/ui/select.tsx

@@ -1,24 +0,0 @@
-import * as React from "react"
-
-import { cn } from "@/lib/utils"
-
-export interface SelectProps
-  extends React.SelectHTMLAttributes<HTMLSelectElement> {}
-
-const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
-  ({ className, children, ...props }, ref) => (
-    <select
-      ref={ref}
-      className={cn(
-        "flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 ring-offset-background disabled:cursor-not-allowed disabled:opacity-50",
-        className
-      )}
-      {...props}
-    >
-      {children}
-    </select>
-  )
-)
-Select.displayName = "Select"
-
-export { Select }

package/templates/components/ui/switch.tsx

@@ -1,27 +0,0 @@
-import * as React from "react"
-import * as SwitchPrimitive from "@radix-ui/react-switch"
-
-import { cn } from "@/lib/utils"
-
-const Switch = React.forwardRef<
-  React.ElementRef<typeof SwitchPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root>
->(({ className, ...props }, ref) => (
-  <SwitchPrimitive.Root
-    ref={ref}
-    className={cn(
-      "inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border border-input bg-background transition-colors 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",
-      className
-    )}
-    {...props}
-  >
-    <SwitchPrimitive.Thumb
-      className={
-        "pointer-events-none block h-4 w-4 rounded-full bg-background shadow transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
-      }
-    />
-  </SwitchPrimitive.Root>
-))
-Switch.displayName = "Switch"
-
-export { Switch }