fancy-ui-react 0.2.0

package/dist/components/autocomplete/Autocomplete.js

@@ -0,0 +1,186 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef, useState, useCallback, useMemo, useEffect } 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 { useFancyId } from "../../internals/use-id.js";
+import { useSoundCue } from "../../sound/use-sound.js";
+import { AUTOCOMPLETE_KEY } from "./types.js";
+import { AutocompletePanel } from "./AutocompletePanel.js";
+/* empty css                 */
+const Autocomplete = forwardRef(function Autocomplete2({
+  suggestions,
+  value: valueProp,
+  onValueChange,
+  onSelect,
+  placeholder,
+  disabled = false,
+  required = false,
+  invalid = false,
+  id,
+  name,
+  label,
+  minLength = 1,
+  maxSuggestions = 8,
+  className,
+  sound = false
+}, forwardedRef) {
+  const field = useField();
+  const uid = useFancyId();
+  const effectiveId = field?.controlId ?? id ?? `${uid}-input`;
+  const effectiveDisabled = field?.disabled ?? disabled;
+  const effectiveRequired = field?.required ?? required;
+  const effectiveInvalid = field?.invalid ?? invalid;
+  const panelId = `${uid}-listbox`;
+  const playCue = useSoundCue(sound);
+  const [value, setValue] = useState(valueProp ?? "");
+  const [seededFrom, setSeededFrom] = useState(valueProp);
+  if (valueProp !== seededFrom) {
+    setSeededFrom(valueProp);
+    setValue(valueProp ?? "");
+  }
+  const [open, setOpen] = useState(false);
+  const [inputNode, setInputNode] = useElementRef();
+  const inputRef = useComposedRefs(setInputNode, forwardedRef);
+  const computeSuggestions = useCallback(
+    (text) => {
+      if (text.length < minLength) return [];
+      const q = text.toLowerCase();
+      return suggestions.filter((s) => s.toLowerCase().includes(q)).slice(0, maxSuggestions);
+    },
+    [suggestions, minLength, maxSuggestions]
+  );
+  const filteredSuggestions = useMemo(
+    () => computeSuggestions(value),
+    [computeSuggestions, value]
+  );
+  const listbox = useListbox({ count: filteredSuggestions.length, loop: true });
+  useEffect(() => {
+    if (filteredSuggestions.length === 0) setOpen(false);
+  }, [filteredSuggestions.length]);
+  const optionId = useCallback((index) => `${panelId}-option-${index}`, [panelId]);
+  const commit = useCallback(
+    (suggestion) => {
+      const changed = value !== suggestion;
+      setValue(suggestion);
+      setOpen(false);
+      if (!effectiveDisabled && changed) playCue("select");
+      onValueChange?.(suggestion);
+      onSelect?.(suggestion);
+    },
+    [value, effectiveDisabled, playCue, onValueChange, onSelect]
+  );
+  const close = useCallback(() => {
+    setOpen(false);
+  }, []);
+  function handleInput(event) {
+    if (effectiveDisabled) return;
+    const next = event.currentTarget.value;
+    setValue(next);
+    onValueChange?.(next);
+    setOpen(computeSuggestions(next).length > 0);
+    listbox.setActive(-1);
+  }
+  function handleFocus() {
+    if (effectiveDisabled) return;
+    if (computeSuggestions(value).length > 0) setOpen(true);
+  }
+  function handleBlur() {
+    setOpen(false);
+  }
+  function handleKeydown(event) {
+    if (effectiveDisabled) return;
+    switch (event.key) {
+      case "ArrowDown":
+        if (!open) {
+          if (computeSuggestions(value).length > 0) {
+            event.preventDefault();
+            setOpen(true);
+            listbox.moveToEdge("first");
+          }
+          return;
+        }
+        event.preventDefault();
+        listbox.move(1);
+        break;
+      case "ArrowUp":
+        if (!open) return;
+        event.preventDefault();
+        listbox.move(-1);
+        break;
+      case "Enter": {
+        if (!open) return;
+        const active = filteredSuggestions[listbox.activeIndex];
+        if (active) {
+          event.preventDefault();
+          commit(active);
+        }
+        break;
+      }
+    }
+  }
+  const context = useMemo(
+    () => ({
+      open,
+      panelId,
+      inputRef: inputNode,
+      suggestions: filteredSuggestions,
+      query: value,
+      activeIndex: listbox.activeIndex,
+      optionId,
+      isActive: (index) => index === listbox.activeIndex,
+      select: commit,
+      close
+    }),
+    [open, panelId, inputNode, filteredSuggestions, value, listbox.activeIndex, optionId, commit, close]
+  );
+  const resultsMessage = filteredSuggestions.length === 1 ? "1 suggestion" : `${filteredSuggestions.length} suggestions`;
+  const classes = cn(
+    "ft-autocomplete w-full rounded-[8px] border border-input bg-background px-[12px] py-[9px] text-[13px] text-foreground transition-colors",
+    "placeholder:text-muted-foreground",
+    "focus-visible:outline-none",
+    "disabled:cursor-not-allowed disabled:opacity-50",
+    effectiveInvalid && "border-destructive/50",
+    className
+  );
+  return /* @__PURE__ */ jsxs(AUTOCOMPLETE_KEY.Provider, { value: context, children: [
+    /* @__PURE__ */ jsxs("div", { className: "ft-autocomplete-wrapper relative", children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref: inputRef,
+          type: "text",
+          role: "combobox",
+          id: effectiveId,
+          name,
+          placeholder,
+          value,
+          disabled: effectiveDisabled,
+          required: effectiveRequired,
+          "aria-invalid": effectiveInvalid ? "true" : void 0,
+          "aria-describedby": field?.describedBy,
+          "aria-label": field?.labelId ? void 0 : label,
+          "aria-expanded": open,
+          "aria-haspopup": "listbox",
+          "aria-autocomplete": "list",
+          "aria-controls": open ? panelId : void 0,
+          "aria-activedescendant": open && listbox.activeIndex >= 0 ? optionId(listbox.activeIndex) : void 0,
+          className: classes,
+          onChange: handleInput,
+          onFocus: handleFocus,
+          onBlur: handleBlur,
+          onKeyDown: handleKeydown
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "sr-only", role: "status", "aria-live": "polite", children: open ? resultsMessage : "" })
+    ] }),
+    /* @__PURE__ */ jsx(AutocompletePanel, {})
+  ] });
+});
+Autocomplete.displayName = "Autocomplete";
+export {
+  Autocomplete
+};

package/dist/components/autocomplete/AutocompletePanel.d.ts

@@ -0,0 +1,12 @@
+/**
+ * The floating suggestions list.
+ *
+ * `Autocomplete` renders this unconditionally and it gates itself on
+ * `ctx.open`, where the source mounts it inside its own `{#if open}` — so the
+ * context is always present, and the rows are never drawn before there is at
+ * least one suggestion to show.
+ */
+export declare function AutocompletePanel(): import("react").JSX.Element;
+export declare namespace AutocompletePanel {
+    var displayName: string;
+}

package/dist/components/autocomplete/AutocompletePanel.js

@@ -0,0 +1,123 @@
+"use client";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useCallback, 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 { getMatchRange } from "./match.js";
+import { AUTOCOMPLETE_KEY } from "./types.js";
+function AutocompletePanel() {
+  const ctx = AUTOCOMPLETE_KEY.useRequired();
+  const [panel, setPanelNode] = useElementRef();
+  const presence = usePresence(ctx.open);
+  const { side, align } = useAnchorPosition(panel, {
+    anchor: () => ctx.inputRef,
+    side: "bottom",
+    align: "start",
+    offset: 4
+  });
+  const exclude = useCallback(() => [ctx.inputRef], [ctx.inputRef]);
+  useDismissable(panel, { onDismiss: ctx.close, exclude, active: ctx.open });
+  const panelRef = useComposedRefs(
+    setPanelNode,
+    presence.register(anchored, (entering) => ({ side, entering }))
+  );
+  const frozen = useRef({
+    suggestions: ctx.suggestions,
+    query: ctx.query,
+    activeIndex: ctx.activeIndex
+  });
+  if (ctx.open) {
+    frozen.current = {
+      suggestions: ctx.suggestions,
+      query: ctx.query,
+      activeIndex: ctx.activeIndex
+    };
+  }
+  const view = frozen.current;
+  return /* @__PURE__ */ jsx(Portal, { children: presence.mounted ? (
+    /*
+    					A `<div role="listbox">`, not a `<ul>` — see Combobox's identical
+    					panel for why (its rows are real buttons, not a permitted child of
+    					`<ul>`).
+    
+    					No focus trap: focus never leaves the input (`aria-activedescendant`
+    					tracks the active row instead). Each row is a real button, kept out
+    					of the tab sequence with `tabindex="-1"`, with `onMouseDown` calling
+    					`preventDefault()` so clicking one never blurs the input a beat
+    					before its own `onClick` commits the suggestion.
+    
+    					`data-state` is an ordinary attribute (divergence D-2) carrying
+    					`surfaceState`'s TWO values — never `"opening"` (convention C-5).
+    					`inert` is not written by hand either: `usePresence` sets it on the
+    					registered node for the whole exit, which is what stops a row taking
+    					a click on its way out.
+    				*/
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: panelRef,
+        id: ctx.panelId,
+        role: "listbox",
+        className: "ft-autocomplete-panel border-border bg-popover text-popover-foreground flex max-h-[260px] w-max min-w-[220px] flex-col gap-[1px] overflow-auto rounded-[10px] border p-[5px] text-[13px] shadow-lg outline-none",
+        "data-state": presence.surfaceState,
+        "data-side": side,
+        "data-align": "start",
+        style: { transformOrigin: originFor(side, align) },
+        children: view.suggestions.map((suggestion, index) => {
+          const range = getMatchRange(suggestion, view.query);
+          const isActive = index === view.activeIndex;
+          return (
+            /*
+            	`onMouseDown` below 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 closes the panel
+            	(unmounting this row) before the click already in flight can
+            	land. jsdom implements no such default action to suppress, so
+            	no test in this repo can watch this guard prevent that
+            	outcome — only that the call happens (the suite's "the row's
+            	mousedown handler calls preventDefault" dispatches a bare
+            	`mousedown` and checks `event.defaultPrevented`). Do not
+            	delete this as dead code on the strength of a green suite.
+            */
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                id: ctx.optionId(index),
+                role: "option",
+                tabIndex: -1,
+                "aria-selected": isActive,
+                className: cn(
+                  "ft-autocomplete-option flex w-full cursor-pointer items-center justify-between gap-2 rounded-[6px] px-[10px] py-[7px] text-left",
+                  isActive && "bg-accent text-accent-foreground"
+                ),
+                onMouseDown: (event) => event.preventDefault(),
+                onClick: () => ctx.select(suggestion),
+                children: [
+                  /* @__PURE__ */ jsx("span", { children: range ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                    suggestion.slice(0, range.start),
+                    /* @__PURE__ */ jsx("strong", { children: suggestion.slice(range.start, range.end) }),
+                    suggestion.slice(range.end)
+                  ] }) : suggestion }),
+                  isActive ? /* @__PURE__ */ jsx("kbd", { "aria-hidden": "true", className: "text-muted-foreground font-mono text-[10px]", children: "⏎" }) : null
+                ]
+              },
+              suggestion
+            )
+          );
+        })
+      }
+    )
+  ) : null });
+}
+AutocompletePanel.displayName = "AutocompletePanel";
+export {
+  AutocompletePanel
+};

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

@@ -0,0 +1,4 @@
+export { Autocomplete } from "./Autocomplete.js";
+export type { AutocompleteProps } from "./Autocomplete.js";
+export { AUTOCOMPLETE_KEY } from "./types.js";
+export type { AutocompleteContext } from "./types.js";

package/dist/components/autocomplete/match.d.ts

@@ -0,0 +1,6 @@
+export interface MatchRange {
+    start: number;
+    end: number;
+}
+/** Finds the first case-insensitive occurrence of `query` inside `text`. Returns `null` when `query` is empty or not present. */
+export declare function getMatchRange(text: string, query: string): MatchRange | null;

package/dist/components/autocomplete/match.js

@@ -0,0 +1,10 @@
+"use client";
+function getMatchRange(text, query) {
+  if (!query) return null;
+  const index = text.toLowerCase().indexOf(query.toLowerCase());
+  if (index === -1) return null;
+  return { start: index, end: index + query.length };
+}
+export {
+  getMatchRange
+};

package/dist/components/autocomplete/types.d.ts

@@ -0,0 +1,52 @@
+/**
+ * The contract between the Autocomplete root and its portalled suggestions
+ * panel.
+ *
+ * Autocomplete is an **open field**: `value` is free text and every one of
+ * its characters is already valid the moment it is typed. `suggestions` are
+ * advisory only — the panel is a shortcut for finishing a value the user
+ * could have typed out in full, never a constraint on what `value` may be.
+ * The root owns the filtering, the active row, and what a click or Enter on
+ * a row does to `value`; the panel only reads this and calls back into it.
+ */
+export interface AutocompleteContext {
+    /** Whether the panel is open. Read by the panel's own exit transition to
+     *  tell an entrance from a departure — one bidirectional transition
+     *  instance reports `direction: "both"` and cannot distinguish them.
+     *  Also the panel's dismissable `active` gate: the instant this flips
+     *  false the layer stops answering Escape, so a second Escape during the
+     *  fade reaches whatever is underneath instead of being swallowed by a
+     *  panel that is already leaving. */
+    readonly open: boolean;
+    /** The panel's own id — also what the input's `aria-controls` points at while open. */
+    readonly panelId: string;
+    /** The real input element, once mounted — what the panel anchors against and excludes from outside-click dismissal. */
+    readonly inputRef: HTMLInputElement | null;
+    /** The suggestions currently visible in the panel, already filtered and capped at `maxSuggestions`. */
+    readonly suggestions: string[];
+    /** The current value, for computing each row's highlighted span. */
+    readonly query: string;
+    /** Index of the keyboard-active row within `suggestions`, or -1 when none is active — arrowing highlights a row without writing it into the field. */
+    readonly activeIndex: number;
+    /** The dom id a row at this index must carry, so `aria-activedescendant` can point at it. */
+    optionId(index: number): string;
+    /** Whether the row at this index is the keyboard-active one. */
+    isActive(index: number): boolean;
+    /** Commits `suggestion` into the field and closes the panel. */
+    select(suggestion: string): void;
+    /** Closes the panel without touching `value` — arrowing never wrote into the field, so there is nothing to restore. */
+    close(): void;
+}
+/**
+ * The context the root publishes to its panel.
+ *
+ * The Svelte source keys this on a `unique symbol` passed to
+ * `setContext`/`getContext`; React's own context object plays that role here,
+ * under the same name, because the Svelte `index.ts` exports the key — so it
+ * keeps its public identity on both sides.
+ *
+ * Read it with `AUTOCOMPLETE_KEY.useRequired()`: the panel is only ever
+ * rendered by the root, so a missing provider is a programming error rather
+ * than a degrade-gracefully case.
+ */
+export declare const AUTOCOMPLETE_KEY: import("../../internals/dom/context.js").InternalContext<AutocompleteContext>;

package/dist/components/autocomplete/types.js

@@ -0,0 +1,6 @@
+"use client";
+import { createInternalContext } from "../../internals/dom/context.js";
+const AUTOCOMPLETE_KEY = createInternalContext("AUTOCOMPLETE_KEY");
+export {
+  AUTOCOMPLETE_KEY
+};

package/dist/components/bento-grid/BentoGrid.d.ts

@@ -0,0 +1,6 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export interface BentoGridProps extends HTMLAttributes<HTMLDivElement> {
+    className?: string;
+    children?: ReactNode;
+}
+export declare function BentoGrid({ className, children, ...rest }: BentoGridProps): import("react").JSX.Element;

package/dist/components/bento-grid/BentoGrid.js

@@ -0,0 +1,19 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../utils.js";
+function BentoGrid({ className = "", children, ...rest }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "mx-auto grid max-w-7xl grid-cols-1 gap-4 md:auto-rows-[18rem] md:grid-cols-3",
+        className
+      ),
+      ...rest,
+      children
+    }
+  );
+}
+export {
+  BentoGrid
+};

package/dist/components/bento-grid/BentoGridCard.d.ts

@@ -0,0 +1,11 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export interface BentoGridCardProps extends HTMLAttributes<HTMLDivElement> {
+    name: string;
+    description: string;
+    href: string;
+    cta: string;
+    className?: string;
+    icon?: ReactNode;
+    background?: ReactNode;
+}
+export declare function BentoGridCard({ name, description: desc, href, cta, className, icon, background, ...rest }: BentoGridCardProps): import("react").JSX.Element;

package/dist/components/bento-grid/BentoGridCard.js

@@ -0,0 +1,49 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { cn } from "../../utils.js";
+function BentoGridCard({
+  name,
+  description: desc,
+  href,
+  cta,
+  className = "",
+  icon,
+  background,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "group relative col-span-3 flex flex-col justify-end overflow-hidden rounded-xl",
+        "bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)]",
+        "transform-gpu dark:bg-black dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset] dark:[border:1px_solid_rgba(255,255,255,.1)]",
+        className
+      ),
+      ...rest,
+      children: [
+        background,
+        /* @__PURE__ */ jsxs("div", { className: "pointer-events-none z-10 flex transform-gpu flex-col gap-1 p-6 transition-all duration-300 group-hover:-translate-y-10", children: [
+          /* @__PURE__ */ jsx("div", { className: "size-12 origin-left transform-gpu text-neutral-700 transition-all duration-300 ease-in-out group-hover:scale-75", children: icon }),
+          /* @__PURE__ */ jsx("h3", { className: "text-xl font-semibold text-neutral-700 dark:text-neutral-300", children: name }),
+          /* @__PURE__ */ jsx("p", { className: "max-w-lg text-neutral-400", children: desc })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute bottom-0 flex w-full translate-y-10 transform-gpu flex-row items-center p-4 opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100", children: /* @__PURE__ */ jsxs(
+          "a",
+          {
+            href,
+            className: "pointer-events-auto inline-flex items-center rounded-md px-3 py-1.5 text-sm font-medium text-neutral-700 transition-colors hover:bg-neutral-100 dark:text-neutral-200 dark:hover:bg-neutral-800",
+            children: [
+              cta,
+              " →"
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 transform-gpu transition-all duration-300 group-hover:bg-black/[.03] group-hover:dark:bg-neutral-800/10" })
+      ]
+    }
+  );
+}
+export {
+  BentoGridCard
+};

package/dist/components/bento-grid/BentoGridItem.d.ts

@@ -0,0 +1,9 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export interface BentoGridItemProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    className?: string;
+    header?: ReactNode;
+    icon?: ReactNode;
+    title?: ReactNode;
+    description?: ReactNode;
+}
+export declare function BentoGridItem({ className, header, icon, title, description, ...rest }: BentoGridItemProps): import("react").JSX.Element;

package/dist/components/bento-grid/BentoGridItem.js

@@ -0,0 +1,33 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { cn } from "../../utils.js";
+function BentoGridItem({
+  className = "",
+  header,
+  icon,
+  title,
+  description,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "group/bento shadow-input row-span-1 flex flex-col justify-between space-y-4 rounded-xl border border-transparent bg-white p-4 transition duration-200 hover:shadow-xl dark:border-white/[0.2] dark:bg-black dark:shadow-none",
+        className
+      ),
+      ...rest,
+      children: [
+        header,
+        /* @__PURE__ */ jsxs("div", { className: "transition duration-200 group-hover/bento:translate-x-2", children: [
+          icon,
+          title && /* @__PURE__ */ jsx("div", { className: "my-2 font-sans font-bold text-neutral-600 dark:text-neutral-200", children: title }),
+          description && /* @__PURE__ */ jsx("div", { className: "font-sans text-xs font-normal text-neutral-600 dark:text-neutral-300", children: description })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  BentoGridItem
+};

package/dist/components/bento-grid/index.d.ts

@@ -0,0 +1,6 @@
+export { BentoGrid } from "./BentoGrid.js";
+export type { BentoGridProps } from "./BentoGrid.js";
+export { BentoGridItem } from "./BentoGridItem.js";
+export type { BentoGridItemProps } from "./BentoGridItem.js";
+export { BentoGridCard } from "./BentoGridCard.js";
+export type { BentoGridCardProps } from "./BentoGridCard.js";

package/dist/components/bg-falling-stars/FallingStarsBg.d.ts

@@ -0,0 +1,24 @@
+/**
+ * FallingStarsBg - Canvas-based 3D starfield background
+ *
+ * Stars travel toward the camera through a perspective projection and trail a
+ * layered stroke that fakes motion blur. Everything is drawn on a 2D canvas from
+ * a `requestAnimationFrame` loop - no CSS or SVG animation - and the canvas is
+ * sized from `devicePixelRatio` and kept in sync by a `ResizeObserver`.
+ */
+export interface FallingStarsBgProps {
+    /** Star color as hex string */
+    color?: string;
+    /** Number of stars */
+    count?: number;
+    /** Additional CSS classes */
+    className?: string;
+    /**
+     * Seed for the starfield. The same seed always lays out and flies the same
+     * sky, which is what keeps the component free of `Math.random()`. Change it
+     * to give two starfields on one page different skies - the default is
+     * shared, so two `<FallingStarsBg />` with no seed show the same sky.
+     */
+    seed?: number;
+}
+export declare function FallingStarsBg({ color, count, className, seed, }: FallingStarsBgProps): import("react").JSX.Element;