fancy-ui-react 0.2.0

package/dist/components/checkbox/Checkbox.js

@@ -0,0 +1,123 @@
+"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 { useComposedRefs } from "../../internals/dom/use-composed-refs.js";
+import { useElementRef } from "../../internals/dom/use-element-ref.js";
+import { useIsomorphicLayoutEffect } from "../../internals/dom/ssr.js";
+import { useSoundCue } from "../../sound/use-sound.js";
+/* empty css             */
+const Checkbox = forwardRef(
+  ({
+    checked: checkedProp,
+    defaultChecked = false,
+    indeterminate: indeterminateProp = false,
+    onCheckedChange,
+    disabled = false,
+    required = false,
+    invalid = false,
+    id,
+    name,
+    value,
+    label,
+    children,
+    className,
+    sound = false
+  }, forwardedRef) => {
+    const isControlled = checkedProp !== void 0;
+    const [uncontrolledChecked, setUncontrolledChecked] = useState(defaultChecked);
+    const checked = isControlled ? checkedProp : uncontrolledChecked;
+    const [indeterminate, setIndeterminate] = useState(indeterminateProp);
+    const prevIndeterminateProp = useRef(indeterminateProp);
+    if (indeterminateProp !== prevIndeterminateProp.current) {
+      prevIndeterminateProp.current = indeterminateProp;
+      setIndeterminate(indeterminateProp);
+    }
+    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);
+    const [input, inputRef] = useElementRef();
+    const composedRef = useComposedRefs(forwardedRef, inputRef);
+    useIsomorphicLayoutEffect(() => {
+      if (input) input.indeterminate = indeterminate;
+    }, [input, indeterminate]);
+    function handleChange(event) {
+      if (effectiveDisabled) {
+        event.currentTarget.checked = checked;
+        return;
+      }
+      const next = event.currentTarget.checked;
+      if (!isControlled) setUncontrolledChecked(next);
+      setIndeterminate(false);
+      playCue(next ? "toggle-on" : "toggle-off");
+      onCheckedChange?.(next);
+    }
+    const wrapperClasses = cn(
+      "ft-checkbox inline-flex items-center gap-[10px] text-[13px]",
+      effectiveDisabled ? "cursor-not-allowed opacity-50" : "cursor-pointer",
+      className
+    );
+    return /* @__PURE__ */ jsxs("label", { className: wrapperClasses, children: [
+      /* @__PURE__ */ jsxs("span", { className: "ft-checkbox-box", children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: composedRef,
+            type: "checkbox",
+            className: "ft-checkbox-control border-input",
+            id: effectiveId,
+            name,
+            value,
+            checked,
+            disabled: effectiveDisabled,
+            required: effectiveRequired,
+            "aria-checked": indeterminate ? "mixed" : checked,
+            "aria-invalid": effectiveInvalid ? "true" : void 0,
+            "aria-describedby": field?.describedBy,
+            "aria-label": label,
+            "data-invalid": effectiveInvalid ? "true" : void 0,
+            onChange: handleChange
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            className: "ft-checkbox-mark",
+            viewBox: "0 0 18 18",
+            "aria-hidden": "true",
+            focusable: "false",
+            children: [
+              /* @__PURE__ */ jsx(
+                "path",
+                {
+                  className: "ft-checkbox-mark-check",
+                  d: "M4 9.2 7.2 12.4 14 5.6",
+                  pathLength: 1,
+                  vectorEffect: "non-scaling-stroke"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "path",
+                {
+                  className: "ft-checkbox-mark-dash",
+                  d: "M4.5 9h9",
+                  pathLength: 1,
+                  vectorEffect: "non-scaling-stroke"
+                }
+              )
+            ]
+          }
+        )
+      ] }),
+      children
+    ] });
+  }
+);
+Checkbox.displayName = "Checkbox";
+export {
+  Checkbox
+};

package/dist/components/checkbox/index.d.ts

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

package/dist/components/code-diff/CodeDiff.d.ts

@@ -0,0 +1,39 @@
+/**
+ * Props for CodeDiff
+ */
+export interface CodeDiffProps {
+    /**
+     * Raw unified diff text — whatever `git diff` printed. Parsed on every
+     * change, so a patch that is still arriving can be handed over as it grows.
+     */
+    diff: string;
+    /** Header label when the patch names no file, or names exactly one. */
+    filename?: string;
+    /** Whether to show the old/new line-number gutters. */
+    lineNumbers?: boolean;
+    /**
+     * Whether the bodies are folded away. A master switch: it seeds every file,
+     * and flipping it re-folds or re-opens the whole patch. The React
+     * counterpart of the Svelte source's bindable prop — pair it with
+     * `onCollapsedChange` to observe the aggregate the way `bind:collapsed`
+     * would report it.
+     */
+    collapsed?: boolean;
+    /**
+     * Reports the whole-patch fold state after a header click: true only once
+     * nothing is left open.
+     */
+    onCollapsedChange?: (collapsed: boolean) => void;
+    /** Lines shown before the rest hide behind a "show more" button. 0 shows all. */
+    maxLines?: number;
+    /** Whether long lines wrap instead of scrolling sideways. */
+    wrap?: boolean;
+    /** Additional CSS classes */
+    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 CodeDiff: import("react").ForwardRefExoticComponent<CodeDiffProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/code-diff/CodeDiff.js

@@ -0,0 +1,213 @@
+"use client";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { forwardRef, useMemo, useState } from "react";
+import { cn } from "../../utils.js";
+import { useInertAttribute } from "../../internals/dom/use-inert-attribute.js";
+import { useFancyId } from "../../internals/use-id.js";
+import { parseUnifiedDiff } from "../../internals/diff.js";
+import { useSoundCue } from "../../sound/use-sound.js";
+/* empty css              */
+const GLYPH = { add: "+", del: "−", context: " ", meta: " " };
+const CodeDiff = forwardRef(function CodeDiff2({
+  diff,
+  filename,
+  lineNumbers = true,
+  collapsed = false,
+  onCollapsedChange,
+  maxLines = 0,
+  wrap = false,
+  className,
+  sound = false
+}, ref) {
+  const uid = useFancyId();
+  const playCue = useSoundCue(sound);
+  const files = useMemo(() => parseUnifiedDiff(diff), [diff]);
+  const [folded, setFolded] = useState({});
+  const [unclamped, setUnclamped] = useState({});
+  const [collapsedValue, setCollapsedValue] = useState(collapsed);
+  const [lastProp, setLastProp] = useState(collapsed);
+  if (lastProp !== collapsed) {
+    setLastProp(collapsed);
+    if (collapsedValue !== collapsed) {
+      setCollapsedValue(collapsed);
+      setFolded({});
+    }
+  }
+  function nameOf(file, count) {
+    if (filename !== void 0 && count <= 1) return filename;
+    if (file.isRename && file.oldPath !== null && file.newPath !== null && file.oldPath !== file.newPath) {
+      return `${file.oldPath} → ${file.newPath}`;
+    }
+    return file.newPath ?? file.oldPath ?? "";
+  }
+  const signature = useMemo(
+    () => files.map((file) => {
+      const anchor = file.hunks[0];
+      return `${nameOf(file, files.length)}:${anchor?.oldStart ?? ""}:${anchor?.newStart ?? ""}`;
+    }).join("\n"),
+    // `nameOf` is re-created every render but reads nothing beyond `filename`,
+    // so the two inputs below are the whole dependency set.
+    [files, filename]
+  );
+  const [lastSignature, setLastSignature] = useState(signature);
+  if (lastSignature !== signature) {
+    setLastSignature(signature);
+    setFolded({});
+    setUnclamped({});
+  }
+  function isFolded(name) {
+    return folded[name] ?? collapsedValue;
+  }
+  const views = useMemo(
+    () => files.map((file) => {
+      const name = nameOf(file, files.length);
+      const rows = [];
+      let total = 0;
+      for (const hunk of file.hunks) {
+        if (hunk.header !== "") rows.push({ kind: "sep", text: hunk.header });
+        for (const line of hunk.lines) {
+          rows.push({ kind: "line", line });
+          total++;
+        }
+      }
+      if (maxLines <= 0 || unclamped[name] || total <= maxLines) {
+        return { file, name, rows, hidden: 0 };
+      }
+      const shown = [];
+      let seen = 0;
+      for (const row of rows) {
+        shown.push(row);
+        if (row.kind !== "line") continue;
+        seen++;
+        if (seen === maxLines) break;
+      }
+      return { file, name, rows: shown, hidden: total - maxLines };
+    }),
+    // Same as above: `filename` stands in for `nameOf`.
+    [files, filename, maxLines, unclamped]
+  );
+  function toggle(name) {
+    const next = !isFolded(name);
+    const nextFolded = { ...folded, [name]: next };
+    setFolded(nextFolded);
+    playCue(next ? "close" : "open");
+    const all = views.every((view) => nextFolded[view.name] ?? collapsedValue);
+    setCollapsedValue(all);
+    onCollapsedChange?.(all);
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      role: "group",
+      "aria-label": "Code diff",
+      className: cn(
+        "fancy-code-diff",
+        "border-border bg-card/50 w-full overflow-hidden rounded-lg border font-mono text-xs",
+        className
+      ),
+      children: views.map((view, index) => {
+        const open = !isFolded(view.name);
+        const headerId = `${uid}-${index}-header`;
+        const bodyId = `${uid}-${index}-body`;
+        return /* @__PURE__ */ jsxs("div", { className: "border-border border-t first:border-t-0", children: [
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              id: headerId,
+              className: "text-muted-foreground hover:text-foreground flex w-full items-center gap-2 px-3 py-2 text-left transition-colors",
+              "aria-expanded": open,
+              "aria-controls": bodyId,
+              onClick: () => toggle(view.name),
+              children: [
+                /* @__PURE__ */ jsx(
+                  "svg",
+                  {
+                    className: cn("ft-chevron size-3.5 shrink-0", open && "ft-open"),
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: "2.5",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    "aria-hidden": "true",
+                    children: /* @__PURE__ */ jsx("path", { d: "m9 6 6 6-6 6" })
+                  }
+                ),
+                view.name ? /* @__PURE__ */ jsx("span", { className: "text-foreground min-w-0 truncate", children: view.name }) : null,
+                view.file.isNew ? /* @__PURE__ */ jsx("span", { className: "ft-badge", children: "new file" }) : view.file.isDeleted ? /* @__PURE__ */ jsx("span", { className: "ft-badge", children: "deleted" }) : null,
+                /* @__PURE__ */ jsxs("span", { className: "ml-auto flex shrink-0 items-center gap-2 tabular-nums", children: [
+                  view.file.additions > 0 ? /* @__PURE__ */ jsxs("span", { className: "ft-stat-add", children: [
+                    "+",
+                    view.file.additions
+                  ] }) : null,
+                  view.file.deletions > 0 ? /* @__PURE__ */ jsxs("span", { className: "ft-stat-del", children: [
+                    "−",
+                    view.file.deletions
+                  ] }) : null
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: cn("ft-body", open && "ft-open"), children: /* @__PURE__ */ jsx("div", { className: "overflow-hidden", children: /* @__PURE__ */ jsxs(DiffBody, { id: bodyId, labelledBy: headerId, open, children: [
+            /* @__PURE__ */ jsx("div", { className: cn("ft-scroll", wrap && "ft-wrap"), children: view.rows.map(
+              (row, rowIndex) => row.kind === "sep" ? /* @__PURE__ */ jsx("div", { className: "ft-sep", children: row.text }, rowIndex) : /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: cn(
+                    "ft-row",
+                    row.line.type === "add" && "ft-add",
+                    row.line.type === "del" && "ft-del",
+                    row.line.type === "context" && "ft-context",
+                    row.line.type === "meta" && "ft-meta"
+                  ),
+                  "data-kind": row.line.type,
+                  children: [
+                    lineNumbers ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                      /* @__PURE__ */ jsx("span", { className: "ft-num", "aria-hidden": "true", children: row.line.oldLine ?? "" }),
+                      /* @__PURE__ */ jsx("span", { className: "ft-num", "aria-hidden": "true", children: row.line.newLine ?? "" })
+                    ] }) : null,
+                    /* @__PURE__ */ jsx("span", { className: "ft-glyph", "aria-hidden": "true", children: GLYPH[row.line.type] }),
+                    row.line.type === "add" || row.line.type === "del" ? /* @__PURE__ */ jsx("span", { className: "sr-only select-none", children: row.line.type === "add" ? "Added line" : "Removed line" }) : null,
+                    /* @__PURE__ */ jsx("span", { className: "ft-code", children: row.line.text })
+                  ]
+                },
+                rowIndex
+              )
+            ) }),
+            view.hidden > 0 ? /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                className: "text-muted-foreground hover:text-foreground hover:bg-muted/40 border-border w-full border-t px-3 py-1.5 text-left transition-colors",
+                onClick: () => {
+                  playCue("open");
+                  setUnclamped((current) => ({ ...current, [view.name]: true }));
+                },
+                children: [
+                  "Show ",
+                  view.hidden,
+                  " more ",
+                  view.hidden === 1 ? "line" : "lines"
+                ]
+              }
+            ) : null
+          ] }) }) })
+        ] }, index);
+      })
+    }
+  );
+});
+function DiffBody({
+  id,
+  labelledBy,
+  open,
+  children
+}) {
+  const inertRef = useInertAttribute(!open);
+  return /* @__PURE__ */ jsx("div", { ref: inertRef, id, role: "group", "aria-labelledby": labelledBy, children });
+}
+export {
+  CodeDiff
+};

package/dist/components/code-diff/index.d.ts

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

package/dist/components/colourful-text/ColourfulText.d.ts

@@ -0,0 +1,28 @@
+/**
+ * ColourfulText - Per-character color animation
+ *
+ * Each character is individually animated with shuffled colors.
+ * Colors reshuffle every 5 seconds with staggered CSS transitions.
+ * Pure CSS implementation (no motion library dependency).
+ */
+export interface ColourfulTextProps {
+    /** Text to animate */
+    text: string;
+    /** Array of colors to cycle through */
+    colors?: string[];
+    /** Initial color before animation */
+    startColor?: string;
+    /** Transition duration in seconds for each character */
+    duration?: number;
+    /** Additional CSS classes */
+    className?: string;
+    /**
+     * Seed for the color shuffle. The Svelte source shuffles with
+     * `Math.random()` at component init; here the initial shuffle must be
+     * identical between the server render and its hydration, so it draws from
+     * a deterministic stream instead. The same seed always deals the same
+     * initial order — change it to make two instances start differently.
+     */
+    seed?: number;
+}
+export declare function ColourfulText({ text, colors, startColor, duration, className, seed, }: ColourfulTextProps): import("react").JSX.Element;

package/dist/components/colourful-text/ColourfulText.js

@@ -0,0 +1,73 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { cn } from "../../utils.js";
+import { useLiveRef } from "../../internals/dom/use-live-ref.js";
+const DEFAULT_COLORS = [
+  "rgb(131, 179, 32)",
+  "rgb(47, 195, 106)",
+  "rgb(42, 169, 210)",
+  "rgb(4, 112, 202)",
+  "rgb(107, 10, 255)",
+  "rgb(183, 0, 218)",
+  "rgb(218, 0, 171)",
+  "rgb(230, 64, 92)",
+  "rgb(232, 98, 63)",
+  "rgb(249, 129, 47)"
+];
+function mulberry32(seed) {
+  let state = seed >>> 0;
+  return () => {
+    state = state + 1831565813 >>> 0;
+    let t = state;
+    t = Math.imul(t ^ t >>> 15, t | 1);
+    t ^= t + Math.imul(t ^ t >>> 7, t | 61);
+    return ((t ^ t >>> 14) >>> 0) / 4294967296;
+  };
+}
+function shuffleColors(colors, random) {
+  const out = [...colors];
+  for (let i = out.length - 1; i > 0; i--) {
+    const j = Math.floor(random() * (i + 1));
+    [out[i], out[j]] = [out[j], out[i]];
+  }
+  return out;
+}
+function ColourfulText({
+  text,
+  colors = DEFAULT_COLORS,
+  startColor = "rgb(255, 255, 255)",
+  duration = 0.5,
+  className,
+  seed = 1
+}) {
+  const [currentColors, setCurrentColors] = useState(
+    () => shuffleColors(colors, mulberry32(seed))
+  );
+  const colorsRef = useLiveRef(colors);
+  useEffect(() => {
+    const random = mulberry32(seed ^ 2654435769);
+    const intervalId = setInterval(() => {
+      if (document.visibilityState === "visible") {
+        setCurrentColors(shuffleColors(colorsRef.current, random));
+      }
+    }, 5e3);
+    return () => clearInterval(intervalId);
+  }, [seed, colorsRef]);
+  const chars = text.split("");
+  return /* @__PURE__ */ jsx("span", { className: cn("colourful-text inline-flex", className), children: chars.map((char, i) => /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: "colourful-char inline-block",
+      style: {
+        color: currentColors[i % currentColors.length] ?? startColor,
+        transition: `color ${duration}s ease ${i * 0.05}s,opacity ${duration}s ease ${i * 0.05}s,transform ${duration}s ease ${i * 0.05}s,filter ${duration}s ease ${i * 0.05}s`
+      },
+      children: char === " " ? " " : char
+    },
+    i
+  )) });
+}
+export {
+  ColourfulText
+};

package/dist/components/colourful-text/index.d.ts

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

package/dist/components/combobox/Combobox.d.ts

@@ -0,0 +1,53 @@
+import type { ComboboxOption } from "./types.js";
+export type { ComboboxOption };
+export interface ComboboxProps {
+    /** The closed set of selectable options. A value outside this list is never valid. */
+    options: ComboboxOption[];
+    /**
+     * The selected option's value, or "" when nothing is selected.
+     *
+     * Controlled when passed: the caller owns it and writes the value back
+     * from `onValueChange`. Left out entirely, the component keeps its own
+     * copy and still reports every change — the React spelling of the
+     * source's `$bindable("")`.
+     */
+    value?: string;
+    /** Called with the new value whenever the selection commits — a row click, Enter on the active row, or a caller writing `value` never fires this itself. */
+    onValueChange?: (value: string) => void;
+    /** Shown while the field is empty and nothing is selected. */
+    placeholder?: string;
+    /** Blocks focus and typing; excluded from form submission. Overridden by a surrounding FormField. */
+    disabled?: 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` — submitted via a hidden input carrying `value`, since the visible field displays the option's label, not its value. */
+    name?: string;
+    /** Accessible name — for a control with no visible Label next to it. */
+    label?: string;
+    /** Matches an option against the current query. Default: case-insensitive substring match on `label`. */
+    filter?: (option: ComboboxOption, query: string) => boolean;
+    /** Shown in the panel when no option matches the current query. */
+    emptyMessage?: string;
+    /** Additional CSS classes. */
+    className?: string;
+    /**
+     * Plays the matching interface cue through the sound controller. Off by
+     * default; only audible once the user has enabled sound.
+     */
+    sound?: boolean;
+}
+/**
+ * A text input over a closed set of options, with a portalled listbox panel.
+ *
+ * The input element arrives through the ref channel rather than a `ref` prop,
+ * per PORTING.md — the Svelte source declares `ref = $bindable(null)`.
+ *
+ * Rest props are not spread: the source reads only these props off `$props()`
+ * and has no `...restProps`, so the port carries no wider attribute surface
+ * than the component it mirrors.
+ */
+export declare const Combobox: import("react").ForwardRefExoticComponent<ComboboxProps & import("react").RefAttributes<HTMLInputElement>>;