fancy-ui-react 0.2.0

package/dist/components/search-input/SearchInput.js

@@ -0,0 +1,192 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef, useState, useRef, useEffect, useCallback } from "react";
+import { cn } from "../../utils.js";
+import { useField } from "../../internals/field.js";
+import { useComposedRefs } from "../../internals/dom/use-composed-refs.js";
+import { preset } from "../../internals/motion/transitions.js";
+import { prefersReducedMotion } from "../../internals/motion/anchored.js";
+import { DURATIONS } from "../../internals/motion/tokens.js";
+import { runTransition } from "../../internals/motion/animate.js";
+import { useSoundCue } from "../../sound/use-sound.js";
+/* empty css                 */
+const pop = preset("scale");
+const searchIcon = /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    className: "size-4",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": "true",
+    children: [
+      /* @__PURE__ */ jsx("circle", { cx: "11", cy: "11", r: "8" }),
+      /* @__PURE__ */ jsx("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" })
+    ]
+  }
+);
+const SearchInput = forwardRef(
+  ({
+    value: valueProp,
+    defaultValue = "",
+    onValueChange,
+    onSearch,
+    placeholder = "Search",
+    debounceMs = 0,
+    disabled = false,
+    readonly = false,
+    required = false,
+    invalid = false,
+    id,
+    name,
+    label,
+    clearable = true,
+    className,
+    sound = false
+  }, forwardedRef) => {
+    const isControlled = valueProp !== void 0;
+    const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+    const value = isControlled ? valueProp : uncontrolledValue;
+    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 canClear = clearable && !effectiveDisabled && !readonly && value !== "";
+    const inputRef = useRef(null);
+    const composedRef = useComposedRefs(forwardedRef, inputRef);
+    const debounceTimer = useRef(void 0);
+    function clearDebounce() {
+      if (debounceTimer.current !== void 0) {
+        clearTimeout(debounceTimer.current);
+        debounceTimer.current = void 0;
+      }
+    }
+    const hasMountedOnce = useRef(false);
+    useEffect(() => {
+      hasMountedOnce.current = true;
+      return () => {
+        hasMountedOnce.current = false;
+        clearDebounce();
+      };
+    }, []);
+    const introRun = useRef(null);
+    const clearButtonRef = useCallback((node) => {
+      if (node === null) {
+        introRun.current?.abort();
+        introRun.current = null;
+        return;
+      }
+      if (!hasMountedOnce.current) return;
+      const spec = pop(
+        node,
+        { duration: prefersReducedMotion() ? 0 : DURATIONS.fast },
+        { direction: "in" }
+      );
+      const handle = { current: null };
+      const run = runTransition(node, spec, 1, void 0, () => {
+        handle.current?.abort();
+        introRun.current = null;
+      });
+      handle.current = run;
+      introRun.current = run;
+    }, []);
+    const classes = cn(
+      "ft-search-input flex w-full items-center gap-2 rounded-full border border-input bg-background px-[14px] py-[9px] text-[13px] transition-colors",
+      effectiveDisabled && "cursor-not-allowed opacity-50",
+      effectiveInvalid && "border-destructive/50",
+      className
+    );
+    function handleInput(event) {
+      if (effectiveDisabled) return;
+      const next = event.currentTarget.value;
+      if (!isControlled) setUncontrolledValue(next);
+      onValueChange?.(next);
+      clearDebounce();
+      if (debounceMs > 0) {
+        debounceTimer.current = setTimeout(() => {
+          debounceTimer.current = void 0;
+          onSearch?.(next);
+        }, debounceMs);
+      }
+    }
+    function handleKeydown(event) {
+      if (effectiveDisabled) return;
+      if (event.key === "Enter") {
+        clearDebounce();
+        onSearch?.(value);
+        return;
+      }
+      if (event.key === "Escape" && canClear) {
+        event.stopPropagation();
+        clearValue();
+      }
+    }
+    function clearValue() {
+      if (effectiveDisabled || readonly) return;
+      if (!isControlled) setUncontrolledValue("");
+      playCue("press");
+      onValueChange?.("");
+      clearDebounce();
+      inputRef.current?.focus();
+    }
+    return /* @__PURE__ */ jsxs("div", { className: classes, children: [
+      /* @__PURE__ */ jsx("span", { className: "ft-search-input-icon text-muted-foreground flex shrink-0 items-center", children: searchIcon }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref: composedRef,
+          type: "search",
+          placeholder,
+          name,
+          id: effectiveId,
+          value,
+          disabled: effectiveDisabled,
+          readOnly: readonly,
+          required: effectiveRequired,
+          "aria-invalid": effectiveInvalid ? "true" : void 0,
+          "aria-describedby": field?.describedBy,
+          "aria-label": label,
+          className: "ft-search-input-field text-foreground placeholder:text-muted-foreground min-w-0 flex-1 border-0 bg-transparent p-0 outline-none disabled:cursor-not-allowed",
+          onChange: handleInput,
+          onKeyDown: handleKeydown
+        }
+      ),
+      canClear && /* @__PURE__ */ jsx(
+        "button",
+        {
+          ref: clearButtonRef,
+          type: "button",
+          className: "ft-search-input-clear text-muted-foreground hover:bg-accent hover:text-accent-foreground flex size-[18px] shrink-0 items-center justify-center rounded-full",
+          "aria-label": "Clear search",
+          onClick: clearValue,
+          children: /* @__PURE__ */ jsxs(
+            "svg",
+            {
+              className: "size-2.5",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "3",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              "aria-hidden": "true",
+              children: [
+                /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+                /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+              ]
+            }
+          )
+        }
+      )
+    ] });
+  }
+);
+SearchInput.displayName = "SearchInput";
+export {
+  SearchInput
+};

package/dist/components/search-input/index.d.ts

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

package/dist/components/select/Select.d.ts

@@ -0,0 +1,44 @@
+import type { Side, Align } from "../../internals/anchor-position.js";
+import type { SelectOption } from "./types.js";
+export type { SelectOption };
+export interface SelectProps {
+    /** The options to choose from, in order. */
+    options: SelectOption[];
+    /** The selected value. `""` means nothing is selected. */
+    value?: string;
+    /** Called with the new value whenever the selection changes. */
+    onValueChange?: (value: string) => void;
+    /** Shown in the trigger while nothing is selected. */
+    placeholder?: string;
+    /** Blocks opening and excludes the control from form submission. Overridden by a surrounding FormField. */
+    disabled?: boolean;
+    /** Marks the control 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`. When set, a hidden input carries the value so the control participates in form submission. */
+    name?: string;
+    /** Accessible name — for a control with no visible Label next to it. */
+    label?: string;
+    /** Side of the trigger to place the panel on. */
+    side?: Side;
+    /** Alignment along the trigger's cross axis. */
+    align?: Align;
+    /** Additional CSS classes, merged onto the trigger. */
+    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 combobox trigger plus a portalled listbox panel, driven off an `options`
+ * array.
+ *
+ * `forwardRef` because the source declares `ref = $bindable(null)` on the
+ * trigger button — the exposed element is the `<button>`, not a wrapper.
+ */
+export declare const Select: import("react").ForwardRefExoticComponent<SelectProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/select/Select.js

@@ -0,0 +1,255 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef, useCallback, useState, useRef, useEffect, useMemo } from "react";
+import { cn } from "../../utils.js";
+import { useField } from "../../internals/field.js";
+import { useListbox } from "../../internals/listbox.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 { useFancyId } from "../../internals/use-id.js";
+import { useSoundCue } from "../../sound/use-sound.js";
+import { SelectPanel } from "./SelectPanel.js";
+import { SelectReactContext } from "./types.js";
+/* empty css           */
+const Select = forwardRef(function Select2({
+  options,
+  value: valueProp,
+  onValueChange,
+  placeholder,
+  disabled = false,
+  required = false,
+  invalid = false,
+  id,
+  name,
+  label,
+  side = "bottom",
+  align = "start",
+  className,
+  sound = false
+}, forwardedRef) {
+  const field = useField();
+  const effectiveId = field?.controlId ?? id;
+  const effectiveDisabled = field?.disabled ?? disabled;
+  const effectiveRequired = field?.required ?? required;
+  const effectiveInvalid = field?.invalid ?? invalid;
+  const uid = useFancyId();
+  const panelId = `${uid}-listbox`;
+  const optionId = useCallback((index) => `${uid}-option-${index}`, [uid]);
+  const playCue = useSoundCue(sound);
+  const [open, setOpenState] = useState(false);
+  const openRef = useRef(false);
+  const setOpen = useCallback((next) => {
+    openRef.current = next;
+    setOpenState(next);
+  }, []);
+  const [triggerNode, setTriggerNode] = useElementRef();
+  const triggerRef = useComposedRefs(setTriggerNode, forwardedRef);
+  const panelRef = useRef(null);
+  const [value, setValueState] = useState(valueProp ?? "");
+  const [lastValueProp, setLastValueProp] = useState(valueProp);
+  if (lastValueProp !== valueProp) {
+    setLastValueProp(valueProp);
+    setValueState(valueProp ?? "");
+  }
+  const selectedIndex = options.findIndex((o) => o.value === value);
+  const selectedOption = selectedIndex === -1 ? void 0 : options[selectedIndex];
+  function isOptionEnabled(index) {
+    return !options[index]?.disabled;
+  }
+  function setValue(next) {
+    if (value === next) return false;
+    setValueState(next);
+    playCue("select");
+    onValueChange?.(next);
+    return true;
+  }
+  function commitIndex(index) {
+    const option = options[index];
+    if (!option || option.disabled) return false;
+    return setValue(option.value);
+  }
+  const handleActiveChange = useEventCallback((index) => {
+    if (!openRef.current) {
+      commitIndex(index);
+      return;
+    }
+    const row = panelRef.current?.querySelector(`#${CSS.escape(optionId(index))}`);
+    row?.scrollIntoView?.({ block: "nearest" });
+  });
+  const listbox = useListbox({
+    count: options.length,
+    enabled: isOptionEnabled,
+    onActiveChange: handleActiveChange
+  });
+  useEffect(() => {
+    if (listbox.activeIndex !== -1 && listbox.activeIndex >= options.length) {
+      listbox.setActive(-1);
+    }
+  }, [listbox, options.length]);
+  function openPanel(fallbackEdge) {
+    if (effectiveDisabled) return;
+    setOpen(true);
+    playCue("open");
+    if (selectedIndex !== -1 && isOptionEnabled(selectedIndex)) {
+      listbox.setActive(selectedIndex);
+    } else {
+      listbox.moveToEdge(fallbackEdge);
+    }
+  }
+  function closePanel(reason = "dismiss") {
+    setOpen(false);
+    if (reason === "dismiss") playCue("close");
+  }
+  function commitActiveAndClose() {
+    const committed = listbox.activeIndex !== -1 && commitIndex(listbox.activeIndex);
+    closePanel(committed ? "commit" : "dismiss");
+  }
+  function handleTriggerClick() {
+    if (effectiveDisabled) return;
+    if (open) {
+      closePanel();
+    } else {
+      openPanel("first");
+    }
+  }
+  function labelAt(index) {
+    return options[index]?.label ?? "";
+  }
+  function isTypeaheadKey(event) {
+    return event.key.length === 1 && event.key !== " " && !event.ctrlKey && !event.metaKey && !event.altKey;
+  }
+  function handleTriggerKeydown(event) {
+    if (effectiveDisabled) return;
+    if (!open) {
+      switch (event.key) {
+        case "Enter":
+        case " ":
+        case "ArrowDown":
+          event.preventDefault();
+          openPanel("first");
+          return;
+        case "ArrowUp":
+          event.preventDefault();
+          openPanel("last");
+          return;
+        default:
+          if (isTypeaheadKey(event)) listbox.typeahead(event.key, labelAt);
+          return;
+      }
+    }
+    switch (event.key) {
+      case "ArrowDown":
+        event.preventDefault();
+        listbox.move(1);
+        return;
+      case "ArrowUp":
+        event.preventDefault();
+        listbox.move(-1);
+        return;
+      case "Home":
+        event.preventDefault();
+        listbox.moveToEdge("first");
+        return;
+      case "End":
+        event.preventDefault();
+        listbox.moveToEdge("last");
+        return;
+      case "Enter":
+      case " ":
+        event.preventDefault();
+        commitActiveAndClose();
+        return;
+      case "Tab":
+        commitActiveAndClose();
+        return;
+      default:
+        if (isTypeaheadKey(event)) listbox.typeahead(event.key, labelAt);
+        return;
+    }
+  }
+  const contextSetActive = useEventCallback((index) => {
+    listbox.setActive(index);
+  });
+  const contextCommit = useEventCallback((index) => {
+    const committed = commitIndex(index);
+    closePanel(committed ? "commit" : "dismiss");
+  });
+  const contextClose = useEventCallback(() => closePanel("dismiss"));
+  const activeIndex = listbox.activeIndex;
+  const context = useMemo(
+    () => ({
+      open,
+      panelId,
+      options,
+      value,
+      label,
+      activeIndex,
+      side,
+      align,
+      triggerRef: triggerNode,
+      optionId,
+      isSelected: (index) => index === selectedIndex,
+      isActive: (index) => index === activeIndex,
+      setActive: contextSetActive,
+      commit: contextCommit,
+      close: contextClose
+    }),
+    [
+      open,
+      panelId,
+      options,
+      value,
+      label,
+      activeIndex,
+      side,
+      align,
+      triggerNode,
+      optionId,
+      selectedIndex,
+      contextSetActive,
+      contextCommit,
+      contextClose
+    ]
+  );
+  const classes = cn(
+    "ft-select-trigger flex w-full items-center justify-between gap-2 rounded-[8px] border border-input bg-background px-[12px] py-[9px] text-left text-[13px] text-foreground transition-colors",
+    "focus-visible:outline-none",
+    "disabled:cursor-not-allowed disabled:opacity-50",
+    effectiveInvalid && "border-destructive/50",
+    className
+  );
+  return /* @__PURE__ */ jsxs(SelectReactContext.Provider, { value: context, children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref: triggerRef,
+        id: effectiveId,
+        type: "button",
+        role: "combobox",
+        "aria-haspopup": "listbox",
+        "aria-expanded": open,
+        "aria-controls": open ? panelId : void 0,
+        "aria-activedescendant": open && activeIndex !== -1 ? optionId(activeIndex) : void 0,
+        "aria-invalid": effectiveInvalid ? "true" : void 0,
+        "aria-required": effectiveRequired ? "true" : void 0,
+        "aria-describedby": field?.describedBy,
+        "aria-label": label,
+        disabled: effectiveDisabled,
+        className: classes,
+        onClick: handleTriggerClick,
+        onKeyDown: handleTriggerKeydown,
+        children: [
+          /* @__PURE__ */ jsx("span", { className: cn("truncate", !selectedOption && "text-muted-foreground"), children: selectedOption?.label ?? placeholder ?? "" }),
+          /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "ft-select-caret text-muted-foreground text-[9px]", children: "▼" })
+        ]
+      }
+    ),
+    name ? /* @__PURE__ */ jsx("input", { type: "hidden", name, value, disabled: effectiveDisabled }) : null,
+    /* @__PURE__ */ jsx(SelectPanel, { ref: panelRef })
+  ] });
+});
+Select.displayName = "Select";
+export {
+  Select
+};

package/dist/components/select/SelectPanel.d.ts

@@ -0,0 +1,33 @@
+export interface SelectPanelProps {
+    /** Additional CSS classes, merged onto the panel. */
+    className?: string;
+}
+/**
+ * `Select`'s portalled listbox.
+ *
+ * No focus trap here, unlike a dialog surface — a combobox listbox is not a
+ * dialog. Focus deliberately never leaves the trigger; the active row is only
+ * ever communicated through `aria-activedescendant` on the button, which is
+ * why this panel carries `role="listbox"` and `role="option"` rows instead of
+ * a plain menu. Focus staying there through a mouse click specifically depends
+ * on `preventFocusSteal` below, not merely on this component never calling
+ * `.focus()` — see its own comment.
+ *
+ * ONE bidirectional transition, never a split in/out pair: `usePresence` owns
+ * both directions on one clock, so a panel reopened mid-exit continues from
+ * where it is instead of snapping to invisible first. `entering` is what tells
+ * the transition which way it is going, and it arrives from the presence
+ * handle rather than being guessed from a direction the runtime reports as
+ * `"both"`.
+ *
+ * `Select` renders this component unconditionally and the mount gate lives
+ * here — the React shape of the source's `{#if open}` one level up, which is
+ * also why `open` still has to arrive through the context. `data-state` is an
+ * ORDINARY attribute (divergence D-2): the source writes it imperatively from
+ * a transition event because its scheduler skips effects inside a closing
+ * branch, and React re-renders an exiting surface normally. `inert` is never
+ * written by hand either: `usePresence` sets it on the registered node for the
+ * whole exit, which is exactly what a closing listbox wants — the rows stop
+ * taking clicks the instant the panel starts leaving.
+ */
+export declare const SelectPanel: import("react").ForwardRefExoticComponent<SelectPanelProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/select/SelectPanel.js

@@ -0,0 +1,108 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useRef } from "react";
+import { cn } from "../../utils.js";
+import { Portal } from "../../internals/Portal.js";
+import { useAnchorPosition } from "../../internals/use-anchor-position.js";
+import { useDismissable } from "../../internals/dismissable.js";
+import { useComposedRefs } from "../../internals/dom/use-composed-refs.js";
+import { useElementRef } from "../../internals/dom/use-element-ref.js";
+import { anchored, originFor } from "../../internals/motion/anchored.js";
+import { usePresence } from "../../internals/motion/presence.js";
+import { useSelectContext } from "./types.js";
+/* empty css                 */
+const SelectPanel = forwardRef(function SelectPanel2({ className }, forwardedRef) {
+  const ctx = useSelectContext();
+  const [panel, setPanelNode] = useElementRef();
+  const presence = usePresence(ctx.open);
+  const { side: resolvedSide, align: resolvedAlign } = useAnchorPosition(panel, {
+    anchor: () => ctx.triggerRef,
+    side: ctx.side,
+    align: ctx.align,
+    offset: 4
+  });
+  useDismissable(panel, {
+    onDismiss: ctx.close,
+    exclude: () => [ctx.triggerRef],
+    active: ctx.open
+  });
+  const panelRef = useComposedRefs(
+    setPanelNode,
+    forwardedRef,
+    presence.register(anchored, (entering) => ({ side: resolvedSide, entering }))
+  );
+  const frozen = useRef({ options: ctx.options, value: ctx.value, activeIndex: ctx.activeIndex });
+  if (ctx.open) {
+    frozen.current = { options: ctx.options, value: ctx.value, activeIndex: ctx.activeIndex };
+  }
+  const view = frozen.current;
+  const selectedIndex = view.options.findIndex((o) => o.value === view.value);
+  function rowClasses(index, option) {
+    return cn(
+      "ft-select-option flex cursor-pointer items-center justify-between gap-2 rounded-[6px] px-[10px] py-[7px] text-foreground select-none",
+      (index === selectedIndex || index === view.activeIndex) && "bg-accent text-accent-foreground",
+      option.disabled && "cursor-not-allowed opacity-50"
+    );
+  }
+  function handleClick(index, option) {
+    if (option.disabled) return;
+    ctx.commit(index);
+  }
+  function handlePointerEnter(index, option) {
+    if (option.disabled) return;
+    ctx.setActive(index);
+  }
+  function preventFocusSteal(event) {
+    event.preventDefault();
+  }
+  return /* @__PURE__ */ jsx(Portal, { children: presence.mounted ? /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: panelRef,
+      id: ctx.panelId,
+      role: "listbox",
+      "aria-label": ctx.label,
+      className: cn(
+        "ft-select-panel border-border bg-popover text-popover-foreground flex w-max min-w-[160px] flex-col gap-[1px] rounded-[10px] border p-[5px] text-[13px] shadow-lg outline-none",
+        className
+      ),
+      "data-state": presence.surfaceState,
+      "data-side": resolvedSide,
+      "data-align": ctx.align,
+      style: { transformOrigin: originFor(resolvedSide, resolvedAlign) },
+      children: view.options.map((option, index) => (
+        /*
+        	Keyboard activation for a row is not local: the trigger
+        	button owns every keydown (Enter/Space/arrow keys/typeahead)
+        	and drives selection through `aria-activedescendant`, per the
+        	ARIA combobox-with-listbox-popup pattern. A row-level keydown
+        	handler would be dead code — focus never reaches a row to fire
+        	one — not a missing affordance.
+        */
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            id: ctx.optionId(index),
+            role: "option",
+            tabIndex: -1,
+            "aria-selected": index === selectedIndex,
+            "aria-disabled": option.disabled ? "true" : void 0,
+            className: rowClasses(index, option),
+            onMouseDown: preventFocusSteal,
+            onClick: () => handleClick(index, option),
+            onPointerEnter: () => handlePointerEnter(index, option),
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "truncate", children: option.label }),
+              index === selectedIndex ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "text-[var(--ft-field-accent)]", children: "✓" }) : null
+            ]
+          },
+          option.value
+        )
+      ))
+    }
+  ) : null });
+});
+SelectPanel.displayName = "SelectPanel";
+export {
+  SelectPanel
+};

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

@@ -0,0 +1,3 @@
+export { Select } from "./Select.js";
+export type { SelectProps } from "./Select.js";
+export type { SelectOption } from "./types.js";