fancy-ui-react 0.2.0

package/dist/components/icon-button/IconButton.js

@@ -0,0 +1,62 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../utils.js";
+import { Button } from "../button/Button.js";
+const SIZE_CLASSES = {
+  sm: "size-[30px] px-0 py-0",
+  md: "size-[36px] px-0 py-0",
+  lg: "size-[42px] px-0 py-0"
+};
+const VARIANT_EXTRA_CLASSES = {
+  ghost: "text-muted-foreground"
+};
+const IconButton = forwardRef(
+  ({
+    label,
+    variant = "outline",
+    size = "md",
+    shape = "square",
+    type = "button",
+    disabled = false,
+    loading = false,
+    href = void 0,
+    target = void 0,
+    rel = void 0,
+    onClick,
+    children,
+    className,
+    sound = false
+  }, ref) => {
+    const classes = cn(
+      "ft-icon-btn",
+      SIZE_CLASSES[size],
+      shape === "circle" && "rounded-full",
+      VARIANT_EXTRA_CLASSES[variant],
+      className
+    );
+    return /* @__PURE__ */ jsx(
+      Button,
+      {
+        ref,
+        variant,
+        size,
+        type,
+        disabled,
+        loading,
+        href,
+        target,
+        rel,
+        label,
+        onClick,
+        sound,
+        iconStart: children,
+        className: classes
+      }
+    );
+  }
+);
+IconButton.displayName = "IconButton";
+export {
+  IconButton
+};

package/dist/components/icon-button/index.d.ts

@@ -0,0 +1,2 @@
+export { IconButton } from "./IconButton.js";
+export type { IconButtonProps, IconButtonShape } from "./IconButton.js";

package/dist/components/image-generation/ImageGeneration.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Props for ImageGeneration
+ */
+export interface ImageGenerationProps {
+    /** Which stage of the generation to render */
+    status: "idle" | "generating" | "done" | "error";
+    /** The generated image, shown once status is "done" */
+    src?: string | null;
+    /** Describes the image to assistive tech — typically the prompt */
+    alt: string;
+    /** CSS aspect-ratio of the frame, holding the layout across every state */
+    aspectRatio?: string;
+    /** Muted caption line under the frame */
+    prompt?: string;
+    /** The failure line shown in the error state */
+    errorText?: string;
+    /** Pressing retry calls this; the retry button only exists when it is set */
+    onRetry?: () => void;
+    /** Called once the generated image has finished loading */
+    onLoad?: () => void;
+    /** Additional CSS classes */
+    className?: string;
+    /**
+     * Plays the press cue through the sound controller when retry is
+     * pressed. Off by default; only audible once the user has enabled
+     * sound.
+     */
+    sound?: boolean;
+}
+/**
+ * ImageGeneration
+ */
+export declare const ImageGeneration: import("react").ForwardRefExoticComponent<ImageGenerationProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/image-generation/ImageGeneration.js

@@ -0,0 +1,131 @@
+"use client";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { forwardRef, useRef, useState, useEffect } from "react";
+import { cn } from "../../utils.js";
+import { useSoundCue } from "../../sound/use-sound.js";
+/* empty css                     */
+import { PixelLoader } from "../pixel-loader/PixelLoader.js";
+const ImageGeneration = forwardRef(
+  function ImageGeneration2({
+    status,
+    src,
+    alt,
+    aspectRatio = "1 / 1",
+    prompt,
+    errorText = "Generation failed",
+    onRetry,
+    onLoad,
+    className,
+    sound
+  }, ref) {
+    const playCue = useSoundCue(sound);
+    const imageEl = useRef(null);
+    const [mounted, setMounted] = useState(false);
+    const [loadedSrc, setLoadedSrc] = useState(null);
+    const [erroredSrc, setErroredSrc] = useState(null);
+    const blurred = mounted && loadedSrc !== src && erroredSrc !== src;
+    function handleLoad() {
+      if (loadedSrc === src) return;
+      setLoadedSrc(src ?? null);
+      setErroredSrc(null);
+      onLoad?.();
+    }
+    function handleError() {
+      setErroredSrc(src ?? null);
+    }
+    const settled = useRef(false);
+    useEffect(() => {
+      if (!settled.current) {
+        settled.current = true;
+        if (imageEl.current?.complete) {
+          if (imageEl.current.naturalWidth > 0) {
+            handleLoad();
+          } else {
+            setErroredSrc(src ?? null);
+          }
+        }
+      }
+      setMounted(true);
+    }, []);
+    function handleRetry() {
+      playCue("press");
+      onRetry?.();
+    }
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn("ft-imagegen flex w-full flex-col gap-2", className),
+        "aria-busy": status === "generating" ? "true" : void 0,
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "ft-imagegen-frame relative w-full overflow-hidden rounded-lg border",
+                status === "idle" && "ft-imagegen-frame-idle"
+              ),
+              style: { aspectRatio },
+              children: status === "generating" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx("div", { className: "ft-imagegen-dots", "aria-hidden": "true" }),
+                /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx(PixelLoader, { cols: 8, rows: 8 }) })
+              ] }) : status === "done" && src ? /* @__PURE__ */ jsx(
+                "img",
+                {
+                  ref: imageEl,
+                  src,
+                  alt,
+                  className: cn(
+                    "ft-imagegen-img absolute inset-0 h-full w-full object-cover",
+                    blurred && "ft-imagegen-img-blurred"
+                  ),
+                  onLoad: handleLoad,
+                  onError: handleError
+                }
+              ) : status === "error" ? /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: "ft-imagegen-error absolute inset-0 flex flex-col items-center justify-center gap-2 px-4 text-center",
+                  role: "alert",
+                  children: [
+                    /* @__PURE__ */ jsx("span", { className: "ft-imagegen-error-icon", "aria-hidden": "true", children: /* @__PURE__ */ jsxs(
+                      "svg",
+                      {
+                        className: "size-5",
+                        viewBox: "0 0 24 24",
+                        fill: "none",
+                        stroke: "currentColor",
+                        strokeWidth: "2",
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round",
+                        children: [
+                          /* @__PURE__ */ jsx("path", { d: "M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0Z" }),
+                          /* @__PURE__ */ jsx("path", { d: "M12 9v4" }),
+                          /* @__PURE__ */ jsx("path", { d: "M12 17h.01" })
+                        ]
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsx("p", { className: "ft-imagegen-error-text text-sm", children: errorText }),
+                    onRetry ? /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        className: "ft-imagegen-retry rounded border px-2.5 py-1 text-xs font-medium transition-colors",
+                        onClick: handleRetry,
+                        children: "Retry"
+                      }
+                    ) : null
+                  ]
+                }
+              ) : null
+            }
+          ),
+          prompt ? /* @__PURE__ */ jsx("p", { className: "ft-imagegen-prompt text-muted-foreground text-xs leading-relaxed", children: prompt }) : null
+        ]
+      }
+    );
+  }
+);
+export {
+  ImageGeneration
+};

package/dist/components/image-generation/index.d.ts

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

package/dist/components/image-trail-cursor/ImageTrailCursor.d.ts

@@ -0,0 +1,15 @@
+import { type VariantType } from "./trail-variants.js";
+/**
+ * ImageTrailCursor - Cursor-following image trail with 9 animation variants.
+ *
+ * The trail images are rendered by React; the motion is driven imperatively by
+ * a variant class that owns its own pointer listeners, rAF loop and GSAP
+ * timelines. Only the variant switch tears that instance down and rebuilds it,
+ * which is what the Svelte `$effect` tracks.
+ */
+export interface ImageTrailCursorProps {
+    images?: string[];
+    variant?: VariantType;
+    className?: string;
+}
+export declare function ImageTrailCursor({ images, variant, className, }: ImageTrailCursorProps): import("react").JSX.Element;

package/dist/components/image-trail-cursor/ImageTrailCursor.js

@@ -0,0 +1,75 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useRef, useEffect } from "react";
+import { cn } from "../../utils.js";
+import { variantMap } from "./trail-variants.js";
+function resetImageStyles(container) {
+  const imgEls = container.querySelectorAll(".content__img");
+  for (const el of imgEls) {
+    el.style.cssText = "";
+    const inner = el.querySelector(".content__img-inner");
+    if (inner) {
+      const bgImage = inner.style.backgroundImage;
+      inner.style.cssText = "";
+      if (bgImage) inner.style.backgroundImage = bgImage;
+    }
+  }
+}
+function ImageTrailCursor({
+  images = [],
+  variant = "type1",
+  className = ""
+}) {
+  const containerRef = useRef(null);
+  const instanceRef = useRef(null);
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    if (instanceRef.current) {
+      instanceRef.current.destroy();
+      instanceRef.current = null;
+    }
+    resetImageStyles(container);
+    const Variant = variantMap[variant] || variantMap.type1;
+    instanceRef.current = new Variant(container);
+    return () => {
+      if (instanceRef.current) {
+        instanceRef.current.destroy();
+        instanceRef.current = null;
+      }
+    };
+  }, [variant]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: containerRef,
+      className: cn(
+        "relative z-[100] h-full w-full overflow-visible rounded-lg bg-transparent",
+        className
+      ),
+      style: { touchAction: "none" },
+      children: images.map((image, i) => (
+        // Keyed on `variant + i` like the Svelte `{#each}`: switching
+        // variant remounts every trail element, so no GSAP-written
+        // inline style survives the switch.
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "content__img absolute top-0 left-0 aspect-[1.1] w-[120px] overflow-hidden rounded-[10px] opacity-0 [will-change:transform,filter] sm:w-[190px] sm:rounded-[15px]",
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "content__img-inner absolute top-[-10px] left-[-10px] h-[calc(100%+20px)] w-[calc(100%+20px)] bg-cover bg-center",
+                style: { backgroundImage: `url(${image})` }
+              }
+            )
+          },
+          variant + i
+        )
+      ))
+    }
+  );
+}
+export {
+  ImageTrailCursor
+};

package/dist/components/image-trail-cursor/index.d.ts

@@ -0,0 +1,3 @@
+export { ImageTrailCursor } from "./ImageTrailCursor.js";
+export type { ImageTrailCursorProps } from "./ImageTrailCursor.js";
+export type { VariantType } from "./trail-variants.js";

package/dist/components/image-trail-cursor/trail-variants.d.ts

@@ -0,0 +1,112 @@
+export type VariantType = "type1" | "type2" | "type3" | "type4" | "type5" | "type6" | "type7" | "type8" | "pixelated";
+export interface ImageTrailVariant {
+    destroy(): void;
+}
+export declare class ImageItem {
+    DOM: {
+        el: HTMLDivElement;
+        inner: HTMLDivElement | null;
+    };
+    private defaultStyle;
+    rect: DOMRect | null;
+    private resizeHandler;
+    constructor(DOM_el: HTMLDivElement);
+    private initEvents;
+    private getRect;
+    destroy(): void;
+}
+declare abstract class BaseVariant implements ImageTrailVariant {
+    protected container: HTMLDivElement;
+    protected DOM: {
+        el: HTMLDivElement;
+    };
+    protected images: ImageItem[];
+    protected imagesTotal: number;
+    protected imgPosition: number;
+    protected zIndexVal: number;
+    protected activeImagesCount: number;
+    protected isIdle: boolean;
+    protected mousePos: {
+        x: number;
+        y: number;
+    };
+    protected lastMousePos: {
+        x: number;
+        y: number;
+    };
+    protected cacheMousePos: {
+        x: number;
+        y: number;
+    };
+    protected touchActive: boolean;
+    private positionHistory;
+    private static readonly HISTORY_MAX_AGE;
+    private static readonly HISTORY_MAX_LEN;
+    private rafId;
+    private rafStarted;
+    private destroyed;
+    private handlePointerMove;
+    private initRender;
+    private handleTouchStart;
+    private handleTouchEnd;
+    constructor(container: HTMLDivElement);
+    private startRafLoop;
+    private pushPositionHistory;
+    protected getTouchVelocity(): {
+        dx: number;
+        dy: number;
+    };
+    protected get threshold(): number;
+    protected render(): void;
+    protected updateCache(): void;
+    protected abstract showNextImage(): void;
+    protected onImageActivated(): void;
+    protected onImageDeactivated(): void;
+    destroy(): void;
+}
+export declare class ImageTrailVariant1 extends BaseVariant {
+    protected showNextImage(): void;
+}
+export declare class ImageTrailVariant2 extends BaseVariant {
+    protected showNextImage(): void;
+}
+export declare class ImageTrailVariant3 extends BaseVariant {
+    protected showNextImage(): void;
+}
+export declare class ImageTrailVariant4 extends BaseVariant {
+    protected showNextImage(): void;
+}
+export declare class ImageTrailVariant5 extends BaseVariant {
+    private lastAngle;
+    protected showNextImage(): void;
+}
+export declare class ImageTrailVariant6 extends BaseVariant {
+    protected updateCache(): void;
+    private mapSpeedToSize;
+    private mapSpeedToBrightness;
+    private mapSpeedToBlur;
+    private mapSpeedToGrayscale;
+    protected showNextImage(): void;
+}
+export declare class ImageTrailVariant7 extends BaseVariant {
+    private visibleImagesCount;
+    private visibleImagesTotal;
+    constructor(container: HTMLDivElement);
+    protected updateCache(): void;
+    protected showNextImage(): void;
+}
+export declare class ImageTrailVariant8 extends BaseVariant {
+    private rotation;
+    private cachedRotation;
+    private zValue;
+    private cachedZValue;
+    constructor(container: HTMLDivElement);
+    protected showNextImage(): void;
+}
+export declare class ImageTrailVariantPixelated extends BaseVariant {
+    private static readonly HOLD;
+    constructor(container: HTMLDivElement);
+    protected showNextImage(): void;
+}
+export declare const variantMap: Record<VariantType, new (container: HTMLDivElement) => ImageTrailVariant>;
+export {};