fancy-ui-react 0.2.0

package/dist/components/file-upload/FileUpload.js

@@ -0,0 +1,438 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef, useState, useRef } from "react";
+import { cn } from "../../utils.js";
+import { useField } from "../../internals/field.js";
+import { useFancyId } from "../../internals/use-id.js";
+import { useComposedRefs } from "../../internals/dom/use-composed-refs.js";
+import { useIsomorphicLayoutEffect } from "../../internals/dom/ssr.js";
+import { preset } from "../../internals/motion/transitions.js";
+import { prefersReducedMotion } from "../../internals/motion/anchored.js";
+import { JS_EASINGS, DURATIONS } from "../../internals/motion/tokens.js";
+import { runTransition } from "../../internals/motion/animate.js";
+import { useSoundCue } from "../../sound/use-sound.js";
+/* empty css                */
+const rowEnter = preset("fade-up");
+const rowLeave = preset("fade");
+function sameRendered(a, b) {
+  if (a.length !== b.length) return false;
+  for (let i = 0; i < a.length; i += 1) {
+    if (a[i].entry !== b[i].entry || a[i].exiting !== b[i].exiting) return false;
+  }
+  return true;
+}
+function formatBytes(bytes) {
+  if (bytes >= 1e6) {
+    const mb = bytes / 1e6;
+    return `${mb % 1 === 0 ? mb.toFixed(0) : mb.toFixed(1)} MB`;
+  }
+  if (bytes >= 1e3) {
+    const kb = bytes / 1e3;
+    return `${kb % 1 === 0 ? kb.toFixed(0) : kb.toFixed(1)} KB`;
+  }
+  return `${bytes} B`;
+}
+function matchesAccept(file, pattern) {
+  if (!pattern) return true;
+  const rules = pattern.split(",").map((rule) => rule.trim().toLowerCase()).filter(Boolean);
+  if (rules.length === 0) return true;
+  const fileName = file.name.toLowerCase();
+  const fileType = file.type.toLowerCase();
+  return rules.some((rule) => {
+    if (rule.startsWith(".")) return fileName.endsWith(rule);
+    if (rule.endsWith("/*")) return fileType.startsWith(rule.slice(0, -1));
+    return fileType === rule;
+  });
+}
+const FileUpload = forwardRef(
+  ({
+    files: filesProp,
+    defaultFiles = [],
+    onFilesChange,
+    accept,
+    multiple = false,
+    maxSize,
+    maxFiles,
+    disabled = false,
+    required = false,
+    invalid = false,
+    id,
+    name,
+    label,
+    hint,
+    className,
+    sound = false
+  }, ref) => {
+    const isControlled = filesProp !== void 0;
+    const [uncontrolledFiles, setUncontrolledFiles] = useState(defaultFiles);
+    const files = isControlled ? filesProp : uncontrolledFiles;
+    const field = useField();
+    const generatedId = useFancyId();
+    const effectiveId = field?.controlId ?? id ?? generatedId;
+    const effectiveDisabled = field?.disabled ?? disabled;
+    const effectiveRequired = field?.required ?? required;
+    const effectiveInvalid = field?.invalid ?? invalid;
+    const playCue = useSoundCue(sound);
+    const hintId = `${effectiveId}-hint`;
+    const describedBy = [field?.describedBy, hint ? hintId : void 0].filter(Boolean).join(" ") || void 0;
+    const [dragDepth, setDragDepth] = useState(0);
+    const dragging = dragDepth > 0;
+    const inputRef = useRef(null);
+    const composedInputRef = useComposedRefs(ref, inputRef);
+    const listRef = useRef(null);
+    const [liveMessage, setLiveMessage] = useState("");
+    function announce(message) {
+      setLiveMessage("");
+      queueMicrotask(() => setLiveMessage(message));
+    }
+    const nextRowIdRef = useRef(0);
+    function createRowId() {
+      nextRowIdRef.current += 1;
+      return `${generatedId}-file-${nextRowIdRef.current}`;
+    }
+    const [rendered, setRendered] = useState(
+      () => files.map((entry) => ({ entry, exiting: false }))
+    );
+    const renderedRef = useRef(rendered);
+    const rowElsRef = useRef(/* @__PURE__ */ new Map());
+    const rowRefCallbacksRef = useRef(/* @__PURE__ */ new Map());
+    const runsRef = useRef(/* @__PURE__ */ new Map());
+    const exitStartedRef = useRef(/* @__PURE__ */ new Set());
+    const enterIdsRef = useRef(/* @__PURE__ */ new Set());
+    function rowRefFor(rowId) {
+      let callback = rowRefCallbacksRef.current.get(rowId);
+      if (!callback) {
+        callback = (node) => {
+          if (node) {
+            rowElsRef.current.set(rowId, node);
+          } else {
+            rowElsRef.current.delete(rowId);
+            if (rowRefCallbacksRef.current.get(rowId) === callback) {
+              rowRefCallbacksRef.current.delete(rowId);
+            }
+          }
+        };
+        rowRefCallbacksRef.current.set(rowId, callback);
+      }
+      return callback;
+    }
+    function commitFiles(next, cue) {
+      if (!isControlled) setUncontrolledFiles(next);
+      if (cue) playCue(cue);
+      onFilesChange?.(next);
+    }
+    useIsomorphicLayoutEffect(() => {
+      const prev = renderedRef.current;
+      const listExisted = prev.some((row) => !row.exiting);
+      const fileIds = new Set(files.map((entry) => entry.id));
+      const next = [];
+      let fileIndex = 0;
+      const revived = [];
+      const pushFresh = (entry) => {
+        next.push({ entry, exiting: false });
+        if (listExisted) enterIdsRef.current.add(entry.id);
+      };
+      for (const row of prev) {
+        if (fileIds.has(row.entry.id)) {
+          while (fileIndex < files.length && files[fileIndex].id !== row.entry.id) {
+            pushFresh(files[fileIndex]);
+            fileIndex += 1;
+          }
+          if (row.exiting) revived.push(row.entry.id);
+          next.push({ entry: files[fileIndex], exiting: false });
+          fileIndex += 1;
+        } else {
+          next.push({ entry: row.entry, exiting: true });
+        }
+      }
+      while (fileIndex < files.length) {
+        pushFresh(files[fileIndex]);
+        fileIndex += 1;
+      }
+      for (const rowId of revived) {
+        runsRef.current.get(rowId)?.abort();
+        runsRef.current.delete(rowId);
+        exitStartedRef.current.delete(rowId);
+        rowElsRef.current.get(rowId)?.removeAttribute("inert");
+      }
+      if (!sameRendered(prev, next)) {
+        renderedRef.current = next;
+        setRendered(next);
+      }
+    }, [files]);
+    useIsomorphicLayoutEffect(() => {
+      const finishExit = (rowId) => {
+        runsRef.current.delete(rowId);
+        exitStartedRef.current.delete(rowId);
+        renderedRef.current = renderedRef.current.filter((row) => row.entry.id !== rowId);
+        setRendered(renderedRef.current);
+      };
+      for (const row of renderedRef.current) {
+        const rowId = row.entry.id;
+        if (!row.exiting || exitStartedRef.current.has(rowId)) continue;
+        exitStartedRef.current.add(rowId);
+        const element = rowElsRef.current.get(rowId);
+        if (!element) {
+          finishExit(rowId);
+          continue;
+        }
+        element.toggleAttribute("inert", true);
+        const spec = rowLeave(
+          element,
+          {
+            duration: prefersReducedMotion() ? 0 : DURATIONS.exit,
+            easing: JS_EASINGS.in
+          },
+          { direction: "out" }
+        );
+        const run = runTransition(
+          element,
+          spec,
+          0,
+          runsRef.current.get(rowId),
+          () => finishExit(rowId)
+        );
+        if (exitStartedRef.current.has(rowId)) runsRef.current.set(rowId, run);
+      }
+      if (enterIdsRef.current.size > 0) {
+        const pending = Array.from(enterIdsRef.current);
+        enterIdsRef.current.clear();
+        for (const rowId of pending) {
+          const element = rowElsRef.current.get(rowId);
+          if (!element) continue;
+          const spec = rowEnter(
+            element,
+            {
+              duration: prefersReducedMotion() ? 0 : DURATIONS.fast,
+              distance: 8,
+              easing: JS_EASINGS.out
+            },
+            { direction: "in" }
+          );
+          let run;
+          let settled = false;
+          run = runTransition(element, spec, 1, void 0, () => {
+            settled = true;
+            runsRef.current.delete(rowId);
+            run?.abort();
+          });
+          if (!settled) runsRef.current.set(rowId, run);
+        }
+      }
+    }, [rendered]);
+    useIsomorphicLayoutEffect(() => {
+      const runs = runsRef.current;
+      return () => {
+        for (const run of runs.values()) run.abort();
+        runs.clear();
+      };
+    }, []);
+    function addFiles(incoming) {
+      if (effectiveDisabled || incoming.length === 0) return;
+      const selected = multiple ? incoming : incoming.slice(0, 1);
+      const next = multiple ? [...files] : [];
+      const problems = [];
+      let addedCount = 0;
+      for (const file of incoming.slice(selected.length)) {
+        problems.push(`${file.name} was not added: only one file is accepted.`);
+      }
+      for (const file of selected) {
+        if (maxFiles !== void 0 && next.length >= maxFiles) {
+          problems.push(
+            `${file.name} was not added: the limit of ${maxFiles} file${maxFiles === 1 ? "" : "s"} has been reached.`
+          );
+          continue;
+        }
+        if (!matchesAccept(file, accept)) {
+          const error = `${file.name} is not an accepted file type.`;
+          next.push({ id: createRowId(), file, progress: null, status: "error", error });
+          problems.push(error);
+          addedCount += 1;
+          continue;
+        }
+        if (maxSize !== void 0 && file.size > maxSize) {
+          const error = `${file.name} exceeds the ${formatBytes(maxSize)} limit.`;
+          next.push({ id: createRowId(), file, progress: null, status: "error", error });
+          problems.push(error);
+          addedCount += 1;
+          continue;
+        }
+        next.push({ id: createRowId(), file, progress: null, status: "pending" });
+        addedCount += 1;
+      }
+      const cue = problems.length > 0 ? "error" : addedCount > 0 ? "select" : void 0;
+      commitFiles(next, cue);
+      if (problems.length > 0) {
+        announce(problems.join(" "));
+      } else if (addedCount > 0) {
+        announce(`${addedCount} file${addedCount === 1 ? "" : "s"} added.`);
+      }
+    }
+    function handleInputChange(event) {
+      if (effectiveDisabled) return;
+      addFiles(Array.from(event.currentTarget.files ?? []));
+    }
+    function handleInputClick(event) {
+      event.currentTarget.value = "";
+    }
+    function handleDragEnter(event) {
+      event.preventDefault();
+      if (effectiveDisabled) return;
+      setDragDepth((depth) => depth + 1);
+    }
+    function handleDragOver(event) {
+      event.preventDefault();
+    }
+    function handleDragLeave(event) {
+      event.preventDefault();
+      if (effectiveDisabled) return;
+      setDragDepth((depth) => Math.max(0, depth - 1));
+    }
+    function handleDrop(event) {
+      event.preventDefault();
+      setDragDepth(0);
+      if (effectiveDisabled) return;
+      const dropped = Array.from(event.dataTransfer?.files ?? []);
+      addFiles(dropped);
+    }
+    function removeFile(fileId) {
+      if (effectiveDisabled) return;
+      const index = files.findIndex((entry) => entry.id === fileId);
+      if (index === -1) return;
+      const next = files.filter((entry) => entry.id !== fileId);
+      commitFiles(next);
+      const input = inputRef.current;
+      if (input && input.files && input.files.length > 0) {
+        const remaining = new Set(next.map((entry) => entry.file));
+        const stale = Array.from(input.files).some((file) => !remaining.has(file));
+        if (stale) input.value = "";
+      }
+      const target = next[Math.min(index, next.length - 1)];
+      const button = target ? Array.from(listRef.current?.querySelectorAll("[data-file-row]") ?? []).find((row) => row.dataset.fileRow === target.id)?.querySelector("[data-file-remove]") : void 0;
+      if (button) {
+        button.focus();
+      } else {
+        inputRef.current?.focus();
+      }
+    }
+    const classes = cn("ft-file-upload flex flex-col gap-3", className);
+    const dropzoneClasses = cn(
+      "ft-file-upload-dropzone flex flex-col items-center gap-1 rounded-[10px] border-[1.5px] border-dashed p-[18px] text-center transition-colors",
+      effectiveInvalid ? "border-destructive/60" : "ft-file-upload-accent-border",
+      dragging && "ft-file-upload-dragging",
+      effectiveDisabled && "cursor-not-allowed opacity-50"
+    );
+    return /* @__PURE__ */ jsxs("div", { className: classes, children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: dropzoneClasses,
+          role: "presentation",
+          "data-dragging": dragging ? "true" : void 0,
+          onDragEnter: handleDragEnter,
+          onDragOver: handleDragOver,
+          onDragLeave: handleDragLeave,
+          onDrop: handleDrop,
+          children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                ref: composedInputRef,
+                type: "file",
+                id: effectiveId,
+                name,
+                accept,
+                multiple,
+                disabled: effectiveDisabled,
+                required: effectiveRequired,
+                "aria-invalid": effectiveInvalid ? "true" : void 0,
+                "aria-describedby": describedBy,
+                "aria-label": label,
+                className: "ft-file-upload-input sr-only",
+                onClick: handleInputClick,
+                onChange: handleInputChange
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              "label",
+              {
+                htmlFor: effectiveId,
+                className: "ft-file-upload-prompt flex flex-col items-center gap-1",
+                children: [
+                  /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "ft-file-upload-icon", children: "⇪" }),
+                  /* @__PURE__ */ jsxs("span", { className: "text-[12px] font-medium", children: [
+                    "Drag and drop or ",
+                    /* @__PURE__ */ jsx("span", { className: "ft-file-upload-browse", children: "browse" })
+                  ] })
+                ]
+              }
+            ),
+            hint && /* @__PURE__ */ jsx("p", { id: hintId, className: "text-muted-foreground text-[11px]", children: hint })
+          ]
+        }
+      ),
+      rendered.length > 0 && /* @__PURE__ */ jsx("ul", { ref: listRef, className: "ft-file-upload-list flex flex-col gap-2", children: rendered.map(({ entry }) => /* @__PURE__ */ jsxs(
+        "li",
+        {
+          ref: rowRefFor(entry.id),
+          "data-file-row": entry.id,
+          className: "border-border flex items-center gap-[10px] rounded-[8px] border px-[10px] py-[8px] text-[12px]",
+          children: [
+            /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "📄" }),
+            /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [
+              /* @__PURE__ */ jsx("span", { className: "truncate", children: entry.file.name }),
+              entry.status === "uploading" ? /* @__PURE__ */ jsx(
+                "div",
+                {
+                  role: "progressbar",
+                  "aria-valuemin": 0,
+                  "aria-valuemax": 100,
+                  "aria-valuenow": entry.progress ?? void 0,
+                  "aria-label": `Uploading ${entry.file.name}`,
+                  className: "ft-file-upload-progress-track",
+                  children: /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: cn(
+                        "ft-file-upload-progress-fill",
+                        entry.progress === null && "ft-file-upload-progress-indeterminate"
+                      ),
+                      style: {
+                        ["--ft-fileupload-progress"]: entry.progress !== null ? entry.progress / 100 : void 0
+                      }
+                    }
+                  )
+                }
+              ) : entry.status === "error" && entry.error ? /* @__PURE__ */ jsx("p", { className: "text-destructive", children: entry.error }) : entry.status === "done" ? /* @__PURE__ */ jsxs("span", { className: "ft-file-upload-done flex items-center gap-1", children: [
+                /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "✓" }),
+                " Done"
+              ] }) : null
+            ] }),
+            entry.status === "uploading" && entry.progress !== null && /* @__PURE__ */ jsxs("span", { "aria-hidden": "true", className: "text-muted-foreground", children: [
+              entry.progress,
+              "%"
+            ] }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                "data-file-remove": true,
+                disabled: effectiveDisabled,
+                "aria-label": `Remove ${entry.file.name}`,
+                className: "ft-file-upload-remove text-muted-foreground shrink-0",
+                onClick: () => removeFile(entry.id),
+                children: "✕"
+              }
+            )
+          ]
+        },
+        entry.id
+      )) }),
+      /* @__PURE__ */ jsx("div", { "aria-live": "polite", className: "sr-only", children: liveMessage })
+    ] });
+  }
+);
+FileUpload.displayName = "FileUpload";
+export {
+  FileUpload
+};

package/dist/components/file-upload/index.d.ts

@@ -0,0 +1,2 @@
+export { FileUpload } from "./FileUpload.js";
+export type { FileUploadProps, UploadFile } from "./FileUpload.js";

package/dist/components/fireworks-hdr/FireworksHdr.d.ts

@@ -0,0 +1,56 @@
+import { type ShellKind, type FireworksHandle } from "./fireworks-shared.js";
+/** Props for {@link FireworksHdr}. */
+export interface FireworksHdrProps {
+    /**
+     * Brand hues (hex). Order is irrelevant — they are parsed and sorted into
+     * the canonical cool→warm ping-pong order (cyan, blue, violet, magenta)
+     * so the shell sweep is stable however they are listed.
+     */
+    palette?: string[];
+    /**
+     * Opt into the GPU engine: WebGPU HDR first, then a WebGL2 fallback
+     * (display-p3 SDR where supported, else plain sRGB). When false, no engine
+     * boots at all.
+     */
+    hdr?: boolean;
+    /** Display exposure multiplier, clamped [1,4]. */
+    exposure?: number;
+    /** Run the ambient auto-scheduler. */
+    ambient?: boolean;
+    /** Ambient intensity [0,1] — scales shell size/energy. */
+    ambientIntensity?: number;
+    /**
+     * Launch a shell toward the pointer on window pointerdown. Read once, when
+     * the engine activates — a later change does not re-wire the listener.
+     */
+    interactive?: boolean;
+    /** Quality tier, or "auto" to pick from the render level + DPR. */
+    quality?: "auto" | "high" | "mid" | "low";
+    /**
+     * Which shells the ambient scheduler is allowed to fire, picked uniformly.
+     * Defaults to the weighted peony/willow/ring mix. Pattern shells ("heart",
+     * "star") are valid here; "glyph" and "shape" are not — they need points
+     * the scheduler has no way to invent, so they are ignored if listed.
+     */
+    ambientShells?: ShellKind[];
+    /** Force ambient off under prefers-reduced-motion (launches still work). */
+    respectReducedMotion?: boolean;
+    /** Extra classes on the canvas wrapper. */
+    className?: string;
+    /**
+     * Called when the engine is live, with an imperative handle. Never called
+     * when no GPU renderer comes up (the caller uses its own timeout). Called
+     * again after a GPU context loss is recovered, with a fresh handle whose
+     * `renderLevel` reflects the engine that came back (a lost WebGPU device
+     * can return as the WebGL2 fallback).
+     */
+    onReady?: (handle: FireworksHandle) => void;
+    /**
+     * Called once when the GPU context is lost and cannot be brought back.
+     * The component has torn itself down by then: the loop is stopped, the
+     * listeners are gone, and any handle it handed out is inert. Use it to
+     * swap in a static fallback.
+     */
+    onLost?: () => void;
+}
+export declare function FireworksHdr({ palette, hdr, exposure, ambient, ambientIntensity, interactive, quality, ambientShells, respectReducedMotion, className, onReady, onLost, }: FireworksHdrProps): import("react").JSX.Element;