fancy-ui-react 0.2.0

package/dist/components/ai-data-table/AiDataTable.js

@@ -0,0 +1,110 @@
+"use client";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../utils.js";
+/* empty css                  */
+const TRUE_LABEL = "True";
+const FALSE_LABEL = "False";
+const EMPTY_LABEL = "No value";
+const ALIGN_CLASS = {
+  left: "text-left",
+  center: "text-center",
+  right: "text-right"
+};
+function alignOf(column) {
+  return column.align ?? (column.numeric ? "right" : "left");
+}
+const AiDataTable = forwardRef(
+  ({ columns, rows, caption, captionVisible = false, dense = false, highlightColumn, cell, className }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn("ft-datatable w-full max-w-full overflow-x-auto", className),
+        tabIndex: 0,
+        role: "region",
+        "aria-label": caption ?? "Data table",
+        children: /* @__PURE__ */ jsxs(
+          "table",
+          {
+            className: cn(
+              "ft-datatable-table w-full border-collapse text-sm",
+              dense && "ft-datatable-dense"
+            ),
+            children: [
+              caption ? /* @__PURE__ */ jsx(
+                "caption",
+                {
+                  className: captionVisible ? "ft-datatable-caption text-muted-foreground pb-2 text-left text-xs" : "ft-datatable-caption sr-only",
+                  children: caption
+                }
+              ) : null,
+              /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { className: "border-border border-b", children: columns.map((column, columnIndex) => /* @__PURE__ */ jsx(
+                "th",
+                {
+                  scope: "col",
+                  className: cn(
+                    "text-muted-foreground text-xs font-medium whitespace-nowrap",
+                    ALIGN_CLASS[alignOf(column)],
+                    column.numeric && "tabular-nums",
+                    column.key === highlightColumn && "ft-datatable-highlight"
+                  ),
+                  children: column.label
+                },
+                columnIndex
+              )) }) }),
+              /* @__PURE__ */ jsx("tbody", { children: rows.map((row, rowIndex) => /* @__PURE__ */ jsx("tr", { className: cn(rowIndex % 2 === 1 && "ft-datatable-zebra"), children: columns.map((column, columnIndex) => {
+                const value = row[column.key];
+                return /* @__PURE__ */ jsx(
+                  "td",
+                  {
+                    className: cn(
+                      "align-top",
+                      ALIGN_CLASS[alignOf(column)],
+                      column.numeric && "tabular-nums",
+                      column.key === highlightColumn && "ft-datatable-highlight"
+                    ),
+                    children: cell ? cell(value, { row: rowIndex, key: column.key }) : typeof value === "boolean" ? value ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                      /* @__PURE__ */ jsx(
+                        "svg",
+                        {
+                          className: "ft-datatable-true inline-block size-3.5 align-[-0.15em]",
+                          viewBox: "0 0 24 24",
+                          fill: "none",
+                          stroke: "currentColor",
+                          strokeWidth: "3",
+                          strokeLinecap: "round",
+                          strokeLinejoin: "round",
+                          "aria-hidden": "true",
+                          children: /* @__PURE__ */ jsx("path", { d: "m5 13 4 4L19 7" })
+                        }
+                      ),
+                      /* @__PURE__ */ jsx("span", { className: "sr-only", children: TRUE_LABEL })
+                    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                      /* @__PURE__ */ jsx("span", { className: "ft-datatable-false text-muted-foreground", "aria-hidden": "true", children: "–" }),
+                      " ",
+                      /* @__PURE__ */ jsx("span", { className: "sr-only", children: FALSE_LABEL })
+                    ] }) : value === null || value === void 0 || value === "" ? (
+                      // An empty string is the third way a model says nothing, alongside
+                      // `null` and a key it never mentioned, so it reads the same way
+                      // rather than as a cell the renderer dropped on the floor.
+                      /* @__PURE__ */ jsxs(Fragment, { children: [
+                        /* @__PURE__ */ jsx("span", { className: "ft-datatable-empty text-muted-foreground", "aria-hidden": "true", children: "—" }),
+                        /* @__PURE__ */ jsx("span", { className: "sr-only", children: EMPTY_LABEL })
+                      ] })
+                    ) : value
+                  },
+                  columnIndex
+                );
+              }) }, rowIndex)) })
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+AiDataTable.displayName = "AiDataTable";
+export {
+  AiDataTable
+};

package/dist/components/ai-data-table/index.d.ts

@@ -0,0 +1,2 @@
+export { AiDataTable } from "./AiDataTable.js";
+export type { AiDataTableProps, AiDataTableColumn, AiDataTableRow, AiDataTableValue, } from "./AiDataTable.js";

package/dist/components/alert-dialog/AlertDialog.d.ts

@@ -0,0 +1,35 @@
+import type { ReactNode } from "react";
+export interface AlertDialogProps {
+    /** Whether the alert dialog is open. Controlled when given; the component keeps its own copy either way. */
+    open?: boolean;
+    /** Fires whenever `open` changes — Confirm, Cancel, or Escape. */
+    onOpenChange?: (open: boolean) => void;
+    /** The heading. Omitted entirely (not just visually) when not given, so `aria-labelledby` never points at nothing. */
+    title?: string;
+    /** The warning copy under the title. Same omission rule as `title`. */
+    description?: string;
+    /** Label of the destructive action. */
+    confirmLabel?: string;
+    /** Label of the safe action. */
+    cancelLabel?: string;
+    /** Called when the destructive action is activated, before the surface closes. */
+    onConfirm?: () => void;
+    /**
+     * Called when the safe action is activated, before the surface closes —
+     * and also when Escape closes the surface, since Escape is treated as
+     * the keyboard equivalent of Cancel here. See the README for why.
+     */
+    onCancel?: () => void;
+    /** Element to focus once the surface opens. Defaults to the Cancel button — see the README. */
+    initialFocus?: HTMLElement | null;
+    /** Optional trigger; renders in place and opens the surface on activation. */
+    trigger?: ReactNode;
+    /** Additional classes for the panel. */
+    className?: string;
+    /**
+     * Plays the matching open/select/close cue through the sound controller.
+     * Off by default; only audible once the user has enabled sound.
+     */
+    sound?: boolean;
+}
+export declare const AlertDialog: import("react").ForwardRefExoticComponent<AlertDialogProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/alert-dialog/AlertDialog.js

@@ -0,0 +1,109 @@
+"use client";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { forwardRef, useState, useRef } from "react";
+import { cn } from "../../utils.js";
+import { useFancyId } from "../../internals/use-id.js";
+import { useSoundCue } from "../../sound/use-sound.js";
+import { DialogSurface } from "../dialog/DialogSurface.js";
+import { Button } from "../button/Button.js";
+const AlertDialog = forwardRef(function AlertDialog2({
+  open: openProp,
+  onOpenChange,
+  title,
+  description,
+  confirmLabel = "Confirm",
+  cancelLabel = "Cancel",
+  onConfirm,
+  onCancel,
+  initialFocus = null,
+  trigger,
+  className,
+  sound = false
+}, forwardedRef) {
+  const [open, setOpenState] = useState(openProp ?? false);
+  const [lastOpenProp, setLastOpenProp] = useState(openProp);
+  if (lastOpenProp !== openProp) {
+    setLastOpenProp(openProp);
+    setOpenState(openProp ?? false);
+  }
+  const playCue = useSoundCue(sound);
+  function setOpen(next) {
+    if (open === next) return;
+    setOpenState(next);
+    onOpenChange?.(next);
+  }
+  const triggerRef = useRef(null);
+  function openFromTrigger() {
+    if (open) return;
+    playCue("open");
+    setOpen(true);
+  }
+  function handleCancel() {
+    if (open) playCue("close");
+    onCancel?.();
+    setOpen(false);
+  }
+  function handleConfirm() {
+    playCue("select");
+    onConfirm?.();
+    setOpen(false);
+  }
+  const uid = useFancyId();
+  const titleId = title ? `${uid}-title` : void 0;
+  const descriptionId = description ? `${uid}-description` : void 0;
+  const panelContent = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-destructive", "aria-hidden": "true", children: "⚠" }),
+      title ? /* @__PURE__ */ jsx("h2", { id: titleId, className: "text-[15px] font-semibold text-balance", children: title }) : null
+    ] }),
+    description ? /* @__PURE__ */ jsx("p", { id: descriptionId, className: "text-muted-foreground text-[12.5px] leading-relaxed", children: description }) : null,
+    /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
+      /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", onClick: handleCancel, children: cancelLabel }),
+      /* @__PURE__ */ jsx(Button, { variant: "destructive", size: "sm", onClick: handleConfirm, children: confirmLabel })
+    ] })
+  ] });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    trigger ? (
+      /*
+      	See Dialog's identical wrapper for why this has no ARIA role of its
+      	own: it only listens for the click bubbling up from whatever
+      	`trigger` renders, which is expected to be a real interactive
+      	element carrying its own keyboard activation. `display: contents`
+      	keeps it out of layout entirely.
+      */
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          ref: (node) => {
+            triggerRef.current = node;
+          },
+          className: "contents",
+          onClick: openFromTrigger,
+          children: trigger
+        }
+      )
+    ) : null,
+    /* @__PURE__ */ jsx(
+      DialogSurface,
+      {
+        ref: forwardedRef,
+        open,
+        role: "alertdialog",
+        titleId,
+        descriptionId,
+        escape: true,
+        outsideClick: false,
+        onDismiss: handleCancel,
+        initialFocus,
+        fallbackFocus: () => triggerRef.current,
+        exclude: () => [triggerRef.current],
+        panelClass: cn("border-destructive/25", className),
+        children: panelContent
+      }
+    )
+  ] });
+});
+AlertDialog.displayName = "AlertDialog";
+export {
+  AlertDialog
+};

package/dist/components/alert-dialog/index.d.ts

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

package/dist/components/animated-beam/AnimatedBeam.d.ts

@@ -0,0 +1,39 @@
+/**
+ * A target element for the beam. The Svelte side receives the live elements
+ * (`bind:this` values); in React the same prop also accepts a ref object,
+ * since `ref.current` is how a React consumer holds an element.
+ */
+export type AnimatedBeamTarget = HTMLElement | {
+    readonly current: HTMLElement | null;
+};
+export interface AnimatedBeamProps {
+    className?: string;
+    containerRef: AnimatedBeamTarget | null;
+    fromRef: AnimatedBeamTarget | null;
+    toRef: AnimatedBeamTarget | null;
+    curvature?: number;
+    reverse?: boolean;
+    pathColor?: string;
+    pathWidth?: number;
+    pathOpacity?: number;
+    gradientStartColor?: string;
+    gradientStopColor?: string;
+    /** Seconds the beam waits before its first travel. Feeds the gradient
+     * animations' `begin`, so a group of beams can be staggered. */
+    delay?: number;
+    duration?: number;
+    startXOffset?: number;
+    startYOffset?: number;
+    endXOffset?: number;
+    endYOffset?: number;
+    /**
+     * Seed for the default animation duration. The Svelte side randomises the
+     * default (`Math.random() * 3 + 4`); a render-path `Math.random()` would
+     * make the server render and its hydration disagree, so the default is
+     * derived deterministically from this seed instead. Two beams with no
+     * `seed` and no `duration` share the same pace — vary the seed (or pass
+     * `duration`) to desynchronise them.
+     */
+    seed?: number;
+}
+export declare function AnimatedBeam({ className, containerRef, fromRef, toRef, curvature, reverse, pathColor, pathWidth, pathOpacity, gradientStartColor, gradientStopColor, delay, duration, startXOffset, startYOffset, endXOffset, endYOffset, seed, }: AnimatedBeamProps): import("react").JSX.Element;

package/dist/components/animated-beam/AnimatedBeam.js

@@ -0,0 +1,192 @@
+"use client";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { cn } from "../../utils.js";
+import { useFancyId } from "../../internals/use-id.js";
+import { useIsomorphicLayoutEffect } from "../../internals/dom/ssr.js";
+import { useEventCallback } from "../../internals/dom/use-event-callback.js";
+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 resolveTarget(target) {
+  if (!target) return null;
+  return target instanceof HTMLElement ? target : target.current;
+}
+function AnimatedBeam({
+  className = "",
+  containerRef,
+  fromRef,
+  toRef,
+  curvature = 0,
+  reverse = false,
+  pathColor = "gray",
+  pathWidth = 2,
+  pathOpacity = 0.2,
+  gradientStartColor = "#FFAA40",
+  gradientStopColor = "#9C40FF",
+  delay = 0,
+  duration,
+  startXOffset = 0,
+  startYOffset = 0,
+  endXOffset = 0,
+  endYOffset = 0,
+  seed = 1
+}) {
+  const id = useFancyId("beam");
+  const defaultDuration = useMemo(() => mulberry32(seed)() * 3 + 4, [seed]);
+  const resolvedDuration = duration ?? defaultDuration;
+  const [isVertical, setIsVertical] = useState(false);
+  const [isRightToLeft, setIsRightToLeft] = useState(false);
+  const [isBottomToTop, setIsBottomToTop] = useState(false);
+  const [pathD, setPathD] = useState("");
+  const [svgDimensions, setSvgDimensions] = useState({
+    width: 0,
+    height: 0
+  });
+  const x1 = (reverse ? !isRightToLeft : isRightToLeft) ? "90%; -10%;" : "10%; 110%;";
+  const x2 = (reverse ? !isRightToLeft : isRightToLeft) ? "100%; 0%;" : "0%; 100%;";
+  const y1 = (reverse ? !isBottomToTop : isBottomToTop) ? "90%; -10%;" : "10%; 110%;";
+  const y2 = (reverse ? !isBottomToTop : isBottomToTop) ? "100%; 0%;" : "0%; 100%;";
+  const updatePath = useEventCallback(() => {
+    const container = resolveTarget(containerRef);
+    const from = resolveTarget(fromRef);
+    const to = resolveTarget(toRef);
+    if (container && from && to) {
+      const containerRect = container.getBoundingClientRect();
+      const rectA = from.getBoundingClientRect();
+      const rectB = to.getBoundingClientRect();
+      const svgWidth = containerRect.width;
+      const svgHeight = containerRect.height;
+      setSvgDimensions({ width: svgWidth, height: svgHeight });
+      const startX = rectA.left - containerRect.left + rectA.width / 2 + startXOffset;
+      const startY = rectA.top - containerRect.top + rectA.height / 2 + startYOffset;
+      const endX = rectB.left - containerRect.left + rectB.width / 2 + endXOffset;
+      const endY = rectB.top - containerRect.top + rectB.height / 2 + endYOffset;
+      setIsVertical(Math.abs(endY - startY) > Math.abs(endX - startX));
+      setIsRightToLeft(endX < startX);
+      setIsBottomToTop(endY < startY);
+      const controlY = startY - curvature;
+      const d = `M ${startX},${startY} Q ${(startX + endX) / 2},${controlY} ${endX},${endY}`;
+      setPathD(d);
+    }
+  });
+  useIsomorphicLayoutEffect(() => {
+    const container = resolveTarget(containerRef);
+    if (!container) return;
+    const resizeObserver = new ResizeObserver(() => {
+      updatePath();
+    });
+    resizeObserver.observe(container);
+    updatePath();
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [containerRef, updatePath]);
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      fill: "none",
+      width: svgDimensions.width,
+      height: svgDimensions.height,
+      xmlns: "http://www.w3.org/2000/svg",
+      className: cn(
+        "pointer-events-none absolute top-0 left-0 transform-gpu stroke-2",
+        className
+      ),
+      viewBox: `0 0 ${svgDimensions.width} ${svgDimensions.height}`,
+      children: [
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: pathD,
+            stroke: pathColor,
+            strokeWidth: pathWidth,
+            strokeOpacity: pathOpacity,
+            strokeLinecap: "round"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: pathD,
+            strokeWidth: pathWidth,
+            stroke: `url(#${id})`,
+            strokeOpacity: "1",
+            strokeLinecap: "round"
+          }
+        ),
+        /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id, gradientUnits: "userSpaceOnUse", x1: "0%", x2: "0%", y1: "0%", y2: "0%", children: [
+          /* @__PURE__ */ jsx("stop", { stopColor: gradientStartColor, stopOpacity: "0" }),
+          /* @__PURE__ */ jsx("stop", { stopColor: gradientStartColor }),
+          /* @__PURE__ */ jsx("stop", { offset: "32.5%", stopColor: gradientStopColor }),
+          /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: gradientStopColor, stopOpacity: "0" }),
+          !isVertical ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              "animate",
+              {
+                attributeName: "x1",
+                values: x1,
+                dur: `${resolvedDuration}s`,
+                begin: `${delay}s`,
+                keyTimes: "0; 1",
+                keySplines: "0.16 1 0.3 1",
+                calcMode: "spline",
+                repeatCount: "indefinite"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "animate",
+              {
+                attributeName: "x2",
+                values: x2,
+                dur: `${resolvedDuration}s`,
+                begin: `${delay}s`,
+                keyTimes: "0; 1",
+                keySplines: "0.16 1 0.3 1",
+                calcMode: "spline",
+                repeatCount: "indefinite"
+              }
+            )
+          ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              "animate",
+              {
+                attributeName: "y1",
+                values: y1,
+                dur: `${resolvedDuration}s`,
+                begin: `${delay}s`,
+                keyTimes: "0; 1",
+                keySplines: "0.16 1 0.3 1",
+                calcMode: "spline",
+                repeatCount: "indefinite"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "animate",
+              {
+                attributeName: "y2",
+                values: y2,
+                dur: `${resolvedDuration}s`,
+                begin: `${delay}s`,
+                keyTimes: "0; 1",
+                keySplines: "0.16 1 0.3 1",
+                calcMode: "spline",
+                repeatCount: "indefinite"
+              }
+            )
+          ] })
+        ] }) })
+      ]
+    }
+  );
+}
+export {
+  AnimatedBeam
+};

package/dist/components/animated-beam/index.d.ts

@@ -0,0 +1,2 @@
+export { AnimatedBeam } from "./AnimatedBeam.js";
+export type { AnimatedBeamProps, AnimatedBeamTarget } from "./AnimatedBeam.js";

package/dist/components/animated-testimonials/AnimatedTestimonials.d.ts

@@ -0,0 +1,32 @@
+/**
+ * AnimatedTestimonials - Animated testimonial carousel
+ *
+ * Cycles through testimonials with smooth slide animations.
+ * Supports manual navigation and optional autoplay.
+ */
+export interface Testimonial {
+    /** The testimonial quote */
+    quote: string;
+    /** Author's full name */
+    name: string;
+    /** Author's title or role */
+    designation: string;
+    /** URL to author's avatar image */
+    src: string;
+}
+export interface AnimatedTestimonialsProps {
+    /** Array of testimonials to display */
+    testimonials: Testimonial[];
+    /** Auto-advance testimonials */
+    autoplay?: boolean;
+    /** Interval between auto-advances (ms) */
+    interval?: number;
+    /** 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 function AnimatedTestimonials({ testimonials, autoplay, interval, className, sound, }: AnimatedTestimonialsProps): import("react").JSX.Element;