fancy-ui-react 0.2.0

package/dist/components/navigation-menu/NavigationMenuItem.js

@@ -0,0 +1,18 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { cn } from "../../utils.js";
+import { useFancyId } from "../../internals/use-id.js";
+import { NAVIGATION_MENU_ITEM_KEY } from "./types.js";
+function NavigationMenuItem({ value, children, className }) {
+  const baseId = useFancyId();
+  const context = useMemo(
+    () => ({ value, triggerId: `${baseId}-trigger`, contentId: `${baseId}-content` }),
+    [value, baseId]
+  );
+  return /* @__PURE__ */ jsx(NAVIGATION_MENU_ITEM_KEY.Provider, { value: context, children: /* @__PURE__ */ jsx("li", { className: cn("ft-navigation-menu-item", className), children }) });
+}
+NavigationMenuItem.displayName = "NavigationMenuItem";
+export {
+  NavigationMenuItem
+};

package/dist/components/navigation-menu/NavigationMenuLink.d.ts

@@ -0,0 +1,31 @@
+import type { ReactNode } from "react";
+export interface NavigationMenuLinkProps {
+    /** Destination URL. */
+    href: string;
+    /** Marks this as the current page: sets `aria-current="page"` and the current-row styling. */
+    current?: boolean;
+    /** The row's title. Ignored when `children` is given. */
+    title?: string;
+    /** The row's supporting description, shown under the title. Ignored when `children` is given. */
+    description?: string;
+    /** Marks the destination as off-site: opens in a new tab with a safe `rel`, and adds an sr-only note. */
+    external?: boolean;
+    /**
+     * Full override for the row's content — e.g. the mockup's feature tile,
+     * which pairs an icon with its title on one line. Takes over from
+     * `title`/`description` entirely when given.
+     */
+    children?: ReactNode;
+    /** Additional CSS classes. */
+    className?: string;
+}
+/**
+ * A row inside a panel. An ordinary anchor, deliberately — never
+ * `role="menuitem"`.
+ *
+ * The source exposes no ref here, so neither does this.
+ */
+export declare function NavigationMenuLink({ href, current, title, description, external, children, className, }: NavigationMenuLinkProps): import("react").JSX.Element;
+export declare namespace NavigationMenuLink {
+    var displayName: string;
+}

package/dist/components/navigation-menu/NavigationMenuLink.js

@@ -0,0 +1,41 @@
+"use client";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { cn } from "../../utils.js";
+/* empty css                         */
+function NavigationMenuLink({
+  href,
+  current = false,
+  title,
+  description,
+  external = false,
+  children,
+  className
+}) {
+  const classes = cn(
+    "ft-navigation-menu-link flex flex-col gap-0.5 rounded-lg px-2.5 py-2 text-left no-underline transition-colors",
+    "hover:bg-accent hover:text-accent-foreground focus-visible:outline-none",
+    current && "bg-accent text-accent-foreground",
+    className
+  );
+  return /* @__PURE__ */ jsxs(
+    "a",
+    {
+      href,
+      className: classes,
+      "aria-current": current ? "page" : void 0,
+      target: external ? "_blank" : void 0,
+      rel: external ? "noopener noreferrer" : void 0,
+      children: [
+        children ? children : /* @__PURE__ */ jsxs(Fragment, { children: [
+          title ? /* @__PURE__ */ jsx("span", { className: "ft-navigation-menu-link-title text-foreground block text-[12px] font-medium", children: title }) : null,
+          description ? /* @__PURE__ */ jsx("span", { className: "ft-navigation-menu-link-description text-muted-foreground text-[12px]", children: description }) : null
+        ] }),
+        external ? /* @__PURE__ */ jsx("span", { className: "sr-only", children: " (opens in a new tab)" }) : null
+      ]
+    }
+  );
+}
+NavigationMenuLink.displayName = "NavigationMenuLink";
+export {
+  NavigationMenuLink
+};

package/dist/components/navigation-menu/NavigationMenuList.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode } from "react";
+export interface NavigationMenuListProps {
+    /** The `NavigationMenuItem`s (and any plain link that isn't a disclosure). */
+    children?: ReactNode;
+    /** Additional CSS classes. */
+    className?: string;
+}
+export declare const NavigationMenuList: import("react").ForwardRefExoticComponent<NavigationMenuListProps & import("react").RefAttributes<HTMLUListElement>>;

package/dist/components/navigation-menu/NavigationMenuList.js

@@ -0,0 +1,33 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef, useEffect } from "react";
+import { cn } from "../../utils.js";
+import { useComposedRefs } from "../../internals/dom/use-composed-refs.js";
+import { useElementRef } from "../../internals/dom/use-element-ref.js";
+import { useNavigationMenuContext } from "./types.js";
+const NavigationMenuList = forwardRef(
+  function NavigationMenuList2({ children, className }, forwardedRef) {
+    const { setListRef } = useNavigationMenuContext();
+    const [node, setNode] = useElementRef();
+    const listRef = useComposedRefs(setNode, forwardedRef);
+    useEffect(() => {
+      setListRef(node);
+      return () => setListRef(null);
+    }, [setListRef, node]);
+    return /* @__PURE__ */ jsx(
+      "ul",
+      {
+        ref: listRef,
+        className: cn(
+          "ft-navigation-menu-list m-0 flex list-none items-center gap-1 p-0",
+          className
+        ),
+        children
+      }
+    );
+  }
+);
+NavigationMenuList.displayName = "NavigationMenuList";
+export {
+  NavigationMenuList
+};

package/dist/components/navigation-menu/NavigationMenuTrigger.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode } from "react";
+export interface NavigationMenuTriggerProps {
+    /** The trigger's label. */
+    children?: ReactNode;
+    /** Additional CSS classes. */
+    className?: string;
+}
+export declare const NavigationMenuTrigger: import("react").ForwardRefExoticComponent<NavigationMenuTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/navigation-menu/NavigationMenuTrigger.js

@@ -0,0 +1,90 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef, useRef, useEffect } from "react";
+import { cn } from "../../utils.js";
+import { useComposedRefs } from "../../internals/dom/use-composed-refs.js";
+import { useNavigationMenuItemContext, useNavigationMenuContext } from "./types.js";
+/* empty css                            */
+const NavigationMenuTrigger = forwardRef(
+  function NavigationMenuTrigger2({ children, className }, forwardedRef) {
+    const item = useNavigationMenuItemContext();
+    const root = useNavigationMenuContext();
+    const buttonRef = useRef(null);
+    const setButtonRef = useComposedRefs(buttonRef, forwardedRef);
+    const isOpen = root.value === item.value;
+    const tabIndexAttr = root.focusedValue === item.value ? 0 : -1;
+    const { registerTrigger } = root;
+    useEffect(() => registerTrigger(item.value), [registerTrigger, item.value]);
+    function handleClick() {
+      root.toggle(item.value);
+      root.focus(item.value);
+      buttonRef.current?.focus();
+    }
+    function handlePointerEnter() {
+      root.scheduleOpen(item.value);
+    }
+    function handlePointerLeave() {
+      root.scheduleClose();
+    }
+    function handleKeydown(event) {
+      switch (event.key) {
+        case "Enter":
+        case " ":
+        case "ArrowDown":
+          event.preventDefault();
+          root.open(item.value);
+          root.focus(item.value);
+          root.requestFocus(item.value);
+          break;
+        case "ArrowRight":
+          event.preventDefault();
+          root.move(item.value, 1);
+          break;
+        case "ArrowLeft":
+          event.preventDefault();
+          root.move(item.value, -1);
+          break;
+        case "Home":
+          event.preventDefault();
+          root.moveToEdge("first");
+          break;
+        case "End":
+          event.preventDefault();
+          root.moveToEdge("last");
+          break;
+      }
+    }
+    const classes = cn(
+      "ft-navigation-menu-trigger text-muted-foreground inline-flex cursor-pointer items-center gap-1 rounded-[8px] px-[14px] py-[8px] text-[13px] font-medium transition-colors",
+      "hover:bg-accent hover:text-accent-foreground focus-visible:outline-none",
+      isOpen && "bg-accent text-accent-foreground",
+      className
+    );
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref: setButtonRef,
+        type: "button",
+        id: item.triggerId,
+        "data-ft-nav-trigger": "",
+        "data-value": item.value,
+        className: classes,
+        "aria-expanded": isOpen,
+        "aria-controls": isOpen ? item.contentId : void 0,
+        tabIndex: tabIndexAttr,
+        onClick: handleClick,
+        onPointerEnter: handlePointerEnter,
+        onPointerLeave: handlePointerLeave,
+        onKeyDown: handleKeydown,
+        children: [
+          children,
+          /* @__PURE__ */ jsx("span", { className: "ft-navigation-menu-caret", "aria-hidden": "true", children: "▾" })
+        ]
+      }
+    );
+  }
+);
+NavigationMenuTrigger.displayName = "NavigationMenuTrigger";
+export {
+  NavigationMenuTrigger
+};

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

@@ -0,0 +1,14 @@
+export { NavigationMenu } from "./NavigationMenu.js";
+export type { NavigationMenuProps } from "./NavigationMenu.js";
+export { NavigationMenuList } from "./NavigationMenuList.js";
+export type { NavigationMenuListProps } from "./NavigationMenuList.js";
+export { NavigationMenuItem } from "./NavigationMenuItem.js";
+export type { NavigationMenuItemProps } from "./NavigationMenuItem.js";
+export { NavigationMenuTrigger } from "./NavigationMenuTrigger.js";
+export type { NavigationMenuTriggerProps } from "./NavigationMenuTrigger.js";
+export { NavigationMenuContent } from "./NavigationMenuContent.js";
+export type { NavigationMenuContentProps } from "./NavigationMenuContent.js";
+export { NavigationMenuLink } from "./NavigationMenuLink.js";
+export type { NavigationMenuLinkProps } from "./NavigationMenuLink.js";
+export { NAVIGATION_MENU_KEY, NAVIGATION_MENU_ITEM_KEY } from "./types.js";
+export type { NavigationMenuContext, NavigationMenuItemContext } from "./types.js";

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

@@ -0,0 +1,107 @@
+/**
+ * The contract between the `NavigationMenu` root and the compound pieces
+ * nested inside it (`NavigationMenuList` down to `NavigationMenuLink`).
+ *
+ * Two separate contexts, not one. The root context below is shared by every
+ * descendant and owns the single source of truth: which item (if any) is
+ * open, the hover-intent timers, and the roving-tabindex position across the
+ * trigger row. The item context is re-provided by each `NavigationMenuItem`
+ * and only ever holds that one item's own identity — its `value` and the id
+ * pair that links its trigger to its panel via `aria-controls` /
+ * `aria-labelledby`. A `NavigationMenuTrigger` or `NavigationMenuContent`
+ * reads both: the item context to know who it is, the root context to know
+ * (and change) what is open.
+ *
+ * The source publishes both contracts under a `unique symbol` context key;
+ * React's own context object plays that role here, so the exported names are
+ * kept and the values are `React.Context` objects rather than symbols:
+ *
+ * ```tsx
+ * const root = useContext(NAVIGATION_MENU_KEY);
+ * ```
+ */
+/** What the root publishes. Every compound piece reads it; only the root writes it. */
+export interface NavigationMenuContext {
+    /** The currently open item's value, or `""` when every panel is closed. */
+    readonly value: string;
+    /** Delay in ms before a hovered trigger opens its panel. */
+    readonly openDelay: number;
+    /** Delay in ms before a panel closes after the pointer leaves it and its trigger. */
+    readonly closeDelay: number;
+    /** The trigger row's element, once mounted. Every panel anchors against this, not against its own trigger. */
+    readonly listRef: HTMLElement | null;
+    /** The value that currently carries `tabindex="0"` on its trigger, or `null` before anything has registered. */
+    readonly focusedValue: string | null;
+    /** Registers the trigger row element that panels anchor against. */
+    setListRef(element: HTMLElement | null): void;
+    /** Looks up a trigger's own button element by its item value, once registered. */
+    getTriggerElement(itemValue: string): HTMLElement | null;
+    /** Joins the roving-focus order. Returns the matching unregister function; call it on destroy. */
+    registerTrigger(itemValue: string): () => void;
+    /** Opens `itemValue` immediately, closing whatever else was open. */
+    open(itemValue: string): void;
+    /** Closes the open panel immediately and returns focus to its trigger. */
+    close(): void;
+    /** Opens `itemValue` if it isn't already open, otherwise closes it. Used by a trigger's click. */
+    toggle(itemValue: string): void;
+    /**
+     * Pointer-intent open: starts the open delay, unless something else is
+     * already open, in which case it switches immediately with no delay — the
+     * pointer is moving along an already-open row, not arriving fresh.
+     */
+    scheduleOpen(itemValue: string): void;
+    /** Pointer-intent close: starts the close delay, giving the pointer time to travel into the panel. */
+    scheduleClose(): void;
+    /** Cancels a pending close — the pointer re-entered the trigger or the panel before the delay elapsed. */
+    cancelClose(): void;
+    /** Marks `itemValue` as owed a focus-into-panel move the next time its panel mounts. */
+    requestFocus(itemValue: string): void;
+    /**
+     * Consumes the focus request for `itemValue`, if there is one. Returns
+     * whether there was one.
+     *
+     * Its identity changes whenever the pending request changes, which is how a
+     * panel effect that lists it as a dependency learns a new request arrived —
+     * the React stand-in for the source reading a `$state` inside its `$effect`.
+     */
+    consumeFocusRequest(itemValue: string): boolean;
+    /** Closes `itemValue`'s panel without moving focus — used when focus tabs out of it on its own. */
+    collapseIfOpen(itemValue: string): void;
+    /** Marks `itemValue` as the roving-focus position, without moving DOM focus. */
+    focus(itemValue: string): void;
+    /**
+     * Moves the roving-focus position, and DOM focus, `delta` steps from
+     * `from` in DOM order, wrapping at both ends. If a panel is already open
+     * it follows the new focus immediately — the same "no re-delay" rule
+     * `scheduleOpen` applies to the pointer, applied to the keyboard too.
+     */
+    move(from: string, delta: number): void;
+    /** Moves the roving-focus position, and DOM focus, to the first or last trigger in DOM order. */
+    moveToEdge(edge: "first" | "last"): void;
+}
+export declare const NAVIGATION_MENU_KEY: import("react").Context<NavigationMenuContext | undefined>;
+/** What a `NavigationMenuItem` publishes to its own `NavigationMenuTrigger` and `NavigationMenuContent`. */
+export interface NavigationMenuItemContext {
+    /** This item's own value, as given to `NavigationMenuItem`. */
+    readonly value: string;
+    /** The trigger button's id — what the panel's `aria-labelledby` points at. */
+    readonly triggerId: string;
+    /** The panel's id — what the trigger's `aria-controls` points at while its panel exists. */
+    readonly contentId: string;
+}
+export declare const NAVIGATION_MENU_ITEM_KEY: import("react").Context<NavigationMenuItemContext | undefined>;
+/**
+ * Reads the enclosing `NavigationMenu`'s root context.
+ *
+ * Every compound piece below the root is only ever rendered inside it — the
+ * same assumption the source's own `getContext` calls make, which throw
+ * nothing and simply hand back `undefined` — so a missing provider is a
+ * wiring mistake worth a named error rather than a shape to degrade into.
+ * Internal: not exported from `index.ts`.
+ */
+export declare function useNavigationMenuContext(): NavigationMenuContext;
+/**
+ * Reads the enclosing `NavigationMenuItem`'s context. Internal: not exported
+ * from `index.ts`.
+ */
+export declare function useNavigationMenuItemContext(): NavigationMenuItemContext;

package/dist/components/navigation-menu/types.js

@@ -0,0 +1,32 @@
+"use client";
+import { createContext, useContext } from "react";
+const NAVIGATION_MENU_KEY = createContext(void 0);
+NAVIGATION_MENU_KEY.displayName = "NavigationMenuContext";
+const NAVIGATION_MENU_ITEM_KEY = createContext(
+  void 0
+);
+NAVIGATION_MENU_ITEM_KEY.displayName = "NavigationMenuItemContext";
+function useNavigationMenuContext() {
+  const value = useContext(NAVIGATION_MENU_KEY);
+  if (value === void 0) {
+    throw new Error(
+      "NavigationMenuContext is missing: this component must be rendered inside a <NavigationMenu>."
+    );
+  }
+  return value;
+}
+function useNavigationMenuItemContext() {
+  const value = useContext(NAVIGATION_MENU_ITEM_KEY);
+  if (value === void 0) {
+    throw new Error(
+      "NavigationMenuItemContext is missing: this component must be rendered inside a <NavigationMenuItem>."
+    );
+  }
+  return value;
+}
+export {
+  NAVIGATION_MENU_ITEM_KEY,
+  NAVIGATION_MENU_KEY,
+  useNavigationMenuContext,
+  useNavigationMenuItemContext
+};

package/dist/components/neon-border/NeonBorder.d.ts

@@ -0,0 +1,22 @@
+import type { HTMLAttributes, ReactNode } from "react";
+/**
+ * NeonBorder - Dual-color neon glow border effect
+ *
+ * Two gradient layers with blur and drop-shadow create a bicolor neon effect.
+ * Optional rotation animation with half or full coverage.
+ */
+export interface NeonBorderProps extends Omit<HTMLAttributes<HTMLDivElement>, "className" | "style"> {
+    /** First neon color */
+    color1?: string;
+    /** Second neon color */
+    color2?: string;
+    /** Animation type: none (static), half (50% coverage), full (100% coverage) */
+    animationType?: "none" | "half" | "full";
+    /** Animation duration in seconds */
+    duration?: number;
+    /** Additional CSS classes */
+    className?: string;
+    /** Content */
+    children?: ReactNode;
+}
+export declare function NeonBorder({ color1, color2, animationType, duration, className, children, ...rest }: NeonBorderProps): import("react").JSX.Element;

package/dist/components/neon-border/NeonBorder.js

@@ -0,0 +1,50 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { cn } from "../../utils.js";
+/* empty css                */
+function getWidth(type) {
+  switch (type) {
+    case "none":
+      return 12;
+    case "half":
+      return 50;
+    case "full":
+      return 100;
+  }
+}
+function NeonBorder({
+  color1 = "#0496ff",
+  color2 = "#ff0a54",
+  animationType = "half",
+  duration = 6,
+  className,
+  children,
+  ...rest
+}) {
+  const styleVars = {
+    "--neon-duration": `${duration}s`,
+    "--neon-color1": color1,
+    "--neon-color2": color2,
+    "--neon-width": `${getWidth(animationType)}%`
+  };
+  const animated = animationType !== "none";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "neon-border-container relative z-10 inline-block h-10 w-full max-w-sm overflow-hidden rounded-lg p-px",
+        className
+      ),
+      style: styleVars,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: cn("neon-layer-one rounded-lg", animated && "neon-animated") }),
+        /* @__PURE__ */ jsx("div", { className: cn("neon-layer-two rounded-lg", animated && "neon-animated") }),
+        children
+      ]
+    }
+  );
+}
+export {
+  NeonBorder
+};

package/dist/components/neon-border/index.d.ts

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

package/dist/components/noise-reveal/NoiseReveal.d.ts

@@ -0,0 +1,29 @@
+/**
+ * NoiseReveal - A WebGL image reveal driven by a Perlin-noise dissolve mask.
+ *
+ * The mask lives entirely in the fragment shader: domain-warped noise plus a
+ * radial gradient that contracts as `uProgress` runs 0 -> 1, clamped and
+ * inverted into an alpha value. The vertex shader adds a wave displacement that
+ * fades out over the same progress. Reveals once on viewport entry, or under
+ * full manual control via `revealed`.
+ *
+ * The render loop pauses while the canvas is scrolled out of view or its tab is
+ * in the background, and resumes from the noise phase it paused at.
+ */
+export interface NoiseRevealProps {
+    /** Image URL */
+    src: string;
+    /** Accessible label for the image */
+    alt?: string;
+    /** Reveal trigger: "view" = on viewport entry, "manual" = via `revealed` */
+    trigger?: "view" | "manual";
+    /** Manual reveal state (used with trigger="manual"; also allows re-hiding) */
+    revealed?: boolean;
+    /** Reveal animation duration in seconds */
+    duration?: number;
+    /** Delay before reveal in seconds (trigger="view") */
+    delay?: number;
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare function NoiseReveal({ src, alt, trigger, revealed, duration, delay, className, }: NoiseRevealProps): import("react").JSX.Element;