fancy-ui-react 0.2.0

package/dist/components/command-menu/CommandMenu.js

@@ -0,0 +1,386 @@
+"use client";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { forwardRef, useState, useRef, useInsertionEffect, useEffect, useCallback, useSyncExternalStore, Fragment as Fragment$1 } from "react";
+import { cn } from "../../utils.js";
+import { Portal } from "../../internals/Portal.js";
+import { useDismissable } from "../../internals/dismissable.js";
+import { useFocusTrap } from "../../internals/focus-trap.js";
+import { useScrollLock } from "../../internals/scroll-lock.js";
+import { useConstant } from "../../internals/dom/ssr.js";
+import { useComposedRefs } from "../../internals/dom/use-composed-refs.js";
+import { useElementRef } from "../../internals/dom/use-element-ref.js";
+import { useEventCallback } from "../../internals/dom/use-event-callback.js";
+import { useLiveRef } from "../../internals/dom/use-live-ref.js";
+import { anchored } from "../../internals/motion/anchored.js";
+import { DURATIONS } from "../../internals/motion/tokens.js";
+import { usePresence } from "../../internals/motion/presence.js";
+import { createListbox } from "../../internals/listbox.js";
+import { useFancyId } from "../../internals/use-id.js";
+import { useSoundCue } from "../../sound/use-sound.js";
+import { getMatchRange, defaultFilter } from "./match.js";
+/* empty css                 */
+const ANNOUNCE_DEBOUNCE_MS = 300;
+function computeDisplayItems(filtered) {
+  const ungrouped = [];
+  const order = [];
+  const byName = /* @__PURE__ */ new Map();
+  for (const item of filtered) {
+    if (!item.group) {
+      ungrouped.push(item);
+      continue;
+    }
+    let bucket = byName.get(item.group);
+    if (!bucket) {
+      bucket = [];
+      byName.set(item.group, bucket);
+      order.push(item.group);
+    }
+    bucket.push(item);
+  }
+  return [...ungrouped, ...order.flatMap((name) => byName.get(name))];
+}
+function computeGroups(display) {
+  const groups = [];
+  let current = null;
+  display.forEach((item, index) => {
+    const name = item.group ?? null;
+    if (!current || current.name !== name) {
+      current = { name, rows: [] };
+      groups.push(current);
+    }
+    current.rows.push({ item, index });
+  });
+  return groups;
+}
+const getServerSnapshot = () => -1;
+const CommandMenu = forwardRef(function CommandMenu2({
+  open: openProp,
+  onOpenChange,
+  items,
+  query: queryProp,
+  onQueryChange,
+  onSelect,
+  placeholder = "Search...",
+  emptyMessage = "No results",
+  label = "Command menu",
+  filter,
+  className,
+  icon,
+  empty,
+  sound = false
+}, forwardedRef) {
+  const [open, setOpenState] = useState(openProp ?? false);
+  const [lastOpenProp, setLastOpenProp] = useState(openProp);
+  if (lastOpenProp !== openProp) {
+    setLastOpenProp(openProp);
+    setOpenState(openProp ?? false);
+  }
+  const [query, setQueryState] = useState(queryProp ?? "");
+  const [lastQueryProp, setLastQueryProp] = useState(queryProp);
+  if (lastQueryProp !== queryProp) {
+    setLastQueryProp(queryProp);
+    setQueryState(queryProp ?? "");
+  }
+  const uid = useFancyId();
+  const listId = `${uid}-list`;
+  function optionId(index) {
+    return `${uid}-option-${index}`;
+  }
+  const [panel, setPanelNode] = useElementRef();
+  const [listNode, setListNode] = useElementRef();
+  function matches(item, q) {
+    return filter ? filter(item, q) : defaultFilter(item, q);
+  }
+  function computeFilteredItems(q) {
+    return items.filter((item) => matches(item, q));
+  }
+  const filteredItems = computeFilteredItems(query);
+  const displayItems = computeDisplayItems(filteredItems);
+  const groups = computeGroups(displayItems);
+  const queryRef = useRef(query);
+  useInsertionEffect(() => {
+    queryRef.current = query;
+  }, [query]);
+  const itemsRef = useLiveRef(items);
+  const filterRef = useLiveRef(filter);
+  const handleActiveChange = useEventCallback((index) => {
+    const row = listNode?.querySelector(`#${CSS.escape(optionId(index))}`);
+    row?.scrollIntoView?.({ block: "nearest" });
+  });
+  const listbox = useConstant(() => {
+    const live = () => {
+      const q = queryRef.current;
+      const f = filterRef.current;
+      return computeDisplayItems(
+        itemsRef.current.filter((item) => f ? f(item, q) : defaultFilter(item, q))
+      );
+    };
+    return createListbox({
+      count: () => live().length,
+      enabled: (index) => !live()[index]?.disabled,
+      loop: true,
+      onActiveChange: handleActiveChange
+    });
+  });
+  useEffect(() => () => listbox.destroy(), [listbox]);
+  const getSnapshot = useCallback(() => listbox.activeIndex, [listbox]);
+  const activeIndex = useSyncExternalStore(listbox.subscribe, getSnapshot, getServerSnapshot);
+  const trap = useFocusTrap(panel);
+  const presence = usePresence(open, {
+    // The two halves of the focus handshake, at the two moments the source
+    // puts them: `onintrostart` → rearm, `onoutrostart` → returnFocusNow.
+    //
+    // `returnFocusNow` at the dismiss instant is the whole point: waiting
+    // for the trap's own `destroy()` would leave a keyboard user on
+    // `<body>` for the whole length of the fade, because the panel is
+    // marked `inert` the instant the exit starts.
+    //
+    // `rearm` is the other half. A menu reopened DURING its fade reverses
+    // the exit instead of remounting, so the trap is never re-created:
+    // without this the panel would come back `aria-modal` and interactive
+    // with focus left on whatever was focused before it opened, Tab
+    // walking the page rather than the panel, and the eager return already
+    // spent for the life of the instance.
+    onEnterStart: () => trap.rearm(),
+    onExitStart: () => trap.returnFocusNow()
+  });
+  useScrollLock(presence.mounted);
+  useDismissable(panel, { onDismiss: () => setOpen(false), active: open });
+  const panelRef = useComposedRefs(
+    setPanelNode,
+    forwardedRef,
+    presence.register("panel", anchored, (entering) => ({
+      entering,
+      duration: DURATIONS.base,
+      exitDuration: DURATIONS.exit
+    }))
+  );
+  const scrimRef = presence.register("scrim", anchored, (entering) => ({
+    entering,
+    scale: false,
+    duration: DURATIONS.base,
+    exitDuration: DURATIONS.exit
+  }));
+  const emitQueryChange = useEventCallback(onQueryChange);
+  const playCue = useSoundCue(sound);
+  const hasOpenedBefore = useRef(false);
+  const lastHandledOpen = useRef(null);
+  useEffect(() => {
+    if (lastHandledOpen.current === open) return;
+    lastHandledOpen.current = open;
+    if (!open) return;
+    if (hasOpenedBefore.current) {
+      queryRef.current = "";
+      setQueryState("");
+      emitQueryChange("");
+    }
+    hasOpenedBefore.current = true;
+    listbox.setActive(-1);
+    listbox.moveToEdge("first");
+  }, [open, listbox, emitQueryChange]);
+  const [announcedCount, setAnnouncedCount] = useState(null);
+  const resultCount = filteredItems.length;
+  useEffect(() => {
+    if (!open) return;
+    if (resultCount === 0) {
+      setAnnouncedCount(0);
+      return;
+    }
+    const timer = setTimeout(() => {
+      setAnnouncedCount(resultCount);
+    }, ANNOUNCE_DEBOUNCE_MS);
+    return () => clearTimeout(timer);
+  }, [resultCount, open]);
+  const resultsMessage = announcedCount === null ? "" : announcedCount === 1 ? "1 result" : `${announcedCount} results`;
+  function setOpen(next, options = {}) {
+    if (open === next) return;
+    setOpenState(next);
+    onOpenChange?.(next);
+    if (!options.silent) playCue("close");
+  }
+  function commitItem(item) {
+    if (item.disabled) return;
+    playCue("select");
+    item.onSelect?.();
+    onSelect?.(item);
+    setOpen(false, { silent: true });
+  }
+  function setQuery(next) {
+    if (query === next) return;
+    queryRef.current = next;
+    setQueryState(next);
+    onQueryChange?.(next);
+  }
+  function handleInput(event) {
+    setQuery(event.currentTarget.value);
+    listbox.moveToEdge("first");
+  }
+  function handleKeydown(event) {
+    switch (event.key) {
+      case "ArrowDown":
+        event.preventDefault();
+        listbox.move(1);
+        break;
+      case "ArrowUp":
+        event.preventDefault();
+        listbox.move(-1);
+        break;
+      case "Home":
+        event.preventDefault();
+        listbox.moveToEdge("first");
+        break;
+      case "End":
+        event.preventDefault();
+        listbox.moveToEdge("last");
+        break;
+      case "Enter": {
+        const active = displayItems[listbox.activeIndex];
+        if (active) {
+          event.preventDefault();
+          commitItem(active);
+        }
+        break;
+      }
+    }
+  }
+  const classes = cn(
+    "ft-command-menu border-border bg-popover text-popover-foreground fixed top-[12vh] left-1/2 z-50 flex max-h-[70vh] w-[calc(100%-2rem)] max-w-xl -translate-x-1/2 flex-col overflow-hidden rounded-xl border shadow-2xl",
+    "focus-visible:outline-none",
+    className
+  );
+  return /* @__PURE__ */ jsx(Portal, { children: presence.mounted ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: scrimRef,
+        className: "ft-command-menu-scrim fixed inset-0 z-50 bg-black/60",
+        "aria-hidden": "true"
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: panelRef,
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": label,
+        tabIndex: -1,
+        className: classes,
+        "data-state": presence.surfaceState,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "border-border flex h-[42px] shrink-0 items-center gap-[10px] border-b px-[14px]", children: [
+            /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "text-muted-foreground text-[13px]", children: "⌕" }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "text",
+                role: "combobox",
+                "aria-label": label,
+                "aria-haspopup": "listbox",
+                "aria-expanded": "true",
+                "aria-controls": listId,
+                "aria-autocomplete": "list",
+                "aria-activedescendant": activeIndex >= 0 ? optionId(activeIndex) : void 0,
+                placeholder,
+                value: query,
+                className: "text-foreground placeholder:text-muted-foreground min-w-0 flex-1 bg-transparent text-[13px] outline-none",
+                onChange: handleInput,
+                onKeyDown: handleKeydown
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "kbd",
+              {
+                "aria-hidden": "true",
+                className: "text-muted-foreground border-border bg-accent ml-auto shrink-0 rounded-[4px] border px-[6px] py-[2px] font-mono text-[10px]",
+                children: "esc"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: setListNode,
+              id: listId,
+              role: "listbox",
+              "aria-label": label,
+              className: "flex min-h-0 flex-col gap-[2px] overflow-y-auto p-[8px]",
+              children: filteredItems.length === 0 ? empty ?? /* @__PURE__ */ jsx(
+                "div",
+                {
+                  role: "presentation",
+                  className: "ft-command-menu-empty text-muted-foreground rounded-[8px] px-[12px] py-[8px] text-[13px]",
+                  children: emptyMessage
+                }
+              ) : groups.map((group) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+                group.name ? /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    role: "presentation",
+                    className: "ft-command-menu-heading text-muted-foreground/60 px-[12px] py-[4px] text-[10px] font-medium tracking-[.08em] uppercase",
+                    children: group.name
+                  }
+                ) : null,
+                group.rows.map(({ item, index }) => {
+                  const range = getMatchRange(item.label, query);
+                  return (
+                    /*
+                    	`onMouseDown` defends against a real browser's
+                    	focus-follows-mousedown default action stealing
+                    	focus onto this row before its own `onClick`
+                    	commits — without it, that focus shift blurs the
+                    	input first, which nothing here reacts to
+                    	directly, but the whole point of this pattern is
+                    	that focus never leaves the input at all. jsdom
+                    	implements no such default action to suppress, so
+                    	no test in this folder can watch this guard
+                    	prevent that outcome — only that the call
+                    	happens. Do not delete this as dead code on the
+                    	strength of a green suite.
+                    */
+                    /* @__PURE__ */ jsxs(
+                      "button",
+                      {
+                        type: "button",
+                        id: optionId(index),
+                        role: "option",
+                        tabIndex: -1,
+                        disabled: item.disabled,
+                        "aria-selected": activeIndex === index,
+                        "aria-disabled": item.disabled ? "true" : void 0,
+                        className: cn(
+                          "ft-command-menu-row flex w-full items-center justify-between gap-3 rounded-[8px] px-[12px] py-[8px] text-left text-[13px]",
+                          activeIndex === index && !item.disabled ? "bg-accent text-accent-foreground" : "text-foreground",
+                          item.disabled && "pointer-events-none opacity-50"
+                        ),
+                        onMouseDown: (event) => event.preventDefault(),
+                        onClick: () => commitItem(item),
+                        children: [
+                          /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
+                            icon ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "shrink-0", children: icon(item) }) : null,
+                            /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: range ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                              item.label.slice(0, range.start),
+                              /* @__PURE__ */ jsx("mark", { children: item.label.slice(range.start, range.end) }),
+                              item.label.slice(range.end)
+                            ] }) : item.label })
+                          ] }),
+                          item.meta ? /* @__PURE__ */ jsx("span", { className: "shrink-0 text-[11px] opacity-60", children: item.meta }) : null
+                        ]
+                      },
+                      item.id
+                    )
+                  );
+                })
+              ] }, group.name ?? "__ft_ungrouped__"))
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "sr-only", role: "status", "aria-live": "polite", children: resultsMessage })
+        ]
+      }
+    )
+  ] }) : null });
+});
+CommandMenu.displayName = "CommandMenu";
+export {
+  CommandMenu
+};

package/dist/components/command-menu/index.d.ts

@@ -0,0 +1,3 @@
+export { CommandMenu } from "./CommandMenu.js";
+export type { CommandMenuProps } from "./CommandMenu.js";
+export type { CommandItem } from "./types.js";

package/dist/components/command-menu/match.d.ts

@@ -0,0 +1,19 @@
+import type { CommandItem } from "./types.js";
+/** Case- and diacritic-insensitive substring match over `label` plus `keywords`. An empty query matches everything. */
+export declare function defaultFilter(item: CommandItem, query: string): boolean;
+export interface MatchRange {
+    start: number;
+    end: number;
+}
+/**
+ * Finds the first case- and diacritic-insensitive occurrence of `query`
+ * inside `label`, returning the span **in `label`'s own original
+ * characters** — not in the folded form used to search.
+ *
+ * Returns `null` when `query` is empty or not literally present in the
+ * folded label — including when a custom `filter` matched the item for a
+ * reason unrelated to a literal substring of `label` (a keyword, a fuzzy
+ * match). Callers render the label plain in that case rather than
+ * fabricating a highlighted span the match had nothing to do with.
+ */
+export declare function getMatchRange(label: string, query: string): MatchRange | null;

package/dist/components/command-menu/match.js

@@ -0,0 +1,45 @@
+"use client";
+const COMBINING_MARKS = new RegExp("[\\u0300-\\u036f]", "g");
+function fold(text) {
+  return text.normalize("NFD").replace(COMBINING_MARKS, "").toLowerCase();
+}
+function defaultFilter(item, query) {
+  if (!query) return true;
+  const needle = fold(query);
+  if (fold(item.label).includes(needle)) return true;
+  return item.keywords?.some((keyword) => fold(keyword).includes(needle)) ?? false;
+}
+function foldWithMap(text) {
+  let folded = "";
+  const map = [];
+  let offset = 0;
+  for (const char of text) {
+    const strippedChar = fold(char);
+    for (const outChar of strippedChar) {
+      folded += outChar;
+      for (let i = 0; i < outChar.length; i++) {
+        map.push(offset);
+      }
+    }
+    offset += char.length;
+  }
+  return { folded, map };
+}
+function getMatchRange(label, query) {
+  if (!query) return null;
+  const foldedQuery = fold(query);
+  if (!foldedQuery) return null;
+  const { folded, map } = foldWithMap(label);
+  const index = folded.indexOf(foldedQuery);
+  if (index === -1) return null;
+  const start = map[index];
+  if (start === void 0) return null;
+  const endFoldedIndex = index + foldedQuery.length;
+  const nextStart = map[endFoldedIndex];
+  const end = endFoldedIndex < map.length && nextStart !== void 0 ? nextStart : label.length;
+  return { start, end };
+}
+export {
+  defaultFilter,
+  getMatchRange
+};

package/dist/components/command-menu/types.d.ts

@@ -0,0 +1,19 @@
+/**
+ * One selectable row. `id` is what a row is keyed by; `label` is what a
+ * person reads and types against. `group` and `meta` are purely
+ * presentational — CommandMenu never reorders or sorts `items` itself, it
+ * only filters and buckets them by `group` for display.
+ */
+export interface CommandItem {
+    id: string;
+    label: string;
+    /** Optional right-aligned secondary text — the category column in the mockup. */
+    meta?: string;
+    /** Optional group heading this item sits under. Items with no group render first, ungrouped. */
+    group?: string;
+    /** Extra terms the default filter matches against, alongside `label`. Never shown. */
+    keywords?: string[];
+    disabled?: boolean;
+    /** Called when this item is committed — Enter on the active row, or a click. Runs before the component's own `onSelect`. */
+    onSelect?: () => void;
+}

package/dist/components/compare/Compare.d.ts

@@ -0,0 +1,31 @@
+import { type ReactNode } from "react";
+export interface CompareProps {
+    firstImage?: string;
+    secondImage?: string;
+    firstImageAlt?: string;
+    secondImageAlt?: string;
+    className?: string;
+    firstContentClass?: string;
+    secondContentClass?: string;
+    initialSliderPercentage?: number;
+    slideMode?: "hover" | "drag";
+    showHandlebar?: boolean;
+    autoplay?: boolean;
+    autoplayDuration?: number;
+    onpercentagechange?: (percentage: number) => void;
+    ondragstart?: () => void;
+    ondragend?: () => void;
+    onhoverenter?: () => void;
+    onhoverleave?: () => void;
+    firstContent?: ReactNode;
+    secondContent?: ReactNode;
+    handle?: ReactNode;
+    /**
+     * Accessible name for the slider. The element carries `role="slider"` and
+     * sits in the tab order, so it needs one — the two images around it are not
+     * its label. Overridable because "before and after" only says something when
+     * the caller says what changed.
+     */
+    ariaLabel?: string;
+}
+export declare function Compare({ firstImage, secondImage, firstImageAlt, secondImageAlt, className, firstContentClass, secondContentClass, initialSliderPercentage, slideMode, showHandlebar, autoplay, autoplayDuration, onpercentagechange, ondragstart, ondragend, onhoverenter, onhoverleave, firstContent, secondContent, handle, ariaLabel, }: CompareProps): import("react").JSX.Element;