fancy-ui-react 0.2.0

package/dist/components/date-picker/DatePicker.js

@@ -0,0 +1,331 @@
+"use client";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { forwardRef, useState, useMemo, useEffect } 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 { useField } from "../../internals/field.js";
+import { useFancyId } from "../../internals/use-id.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 { useSoundCue } from "../../sound/use-sound.js";
+import { formatISODate, getMonthGrid, isSameDay, addMonths, clampDate } from "../../internals/calendar-core.js";
+import { getWeekdayNames, formatMonthYear, formatTriggerDate, formatDayAccessibleName, findEnabledDay, isDayInRange, dayOnly, addDays, findEnabledInRow } from "./date-utils.js";
+/* empty css                */
+const DatePicker = forwardRef(function DatePicker2({
+  value: valueProp,
+  onValueChange,
+  min,
+  max,
+  weekStartsOn = 1,
+  disabled = false,
+  required = false,
+  invalid = false,
+  id,
+  name,
+  label,
+  placeholder = "Pick a date",
+  locale,
+  isDateDisabled,
+  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}-panel`;
+  const [uncontrolledValue, setUncontrolledValue] = useState(null);
+  const isControlled = valueProp !== void 0;
+  const value = isControlled ? valueProp : uncontrolledValue;
+  const [open, setOpen] = useState(false);
+  const [panel, setPanelNode] = useElementRef();
+  const [triggerNode, setTriggerNode] = useElementRef();
+  const triggerRef = useComposedRefs(setTriggerNode, forwardedRef);
+  const [viewDate, setViewDate] = useState(null);
+  const [focusedDate, setFocusedDateState] = useState(null);
+  const playCue = useSoundCue(sound);
+  function isDayDisabled(date) {
+    return !isDayInRange(date, min, max) || (isDateDisabled?.(date) ?? false);
+  }
+  const weekdayNames = useMemo(
+    () => getWeekdayNames(weekStartsOn, locale),
+    [weekStartsOn, locale]
+  );
+  const monthLabel = useMemo(
+    () => viewDate ? formatMonthYear(viewDate, locale) : "",
+    [viewDate, locale]
+  );
+  const triggerLabel = formatTriggerDate(value, locale);
+  useEffect(() => {
+    if (!open || !focusedDate) return;
+    panel?.querySelector(`[data-ft-date="${formatISODate(focusedDate)}"]`)?.focus();
+  }, [open, focusedDate, panel]);
+  function setFocusedDate(date) {
+    setFocusedDateState(date);
+    setViewDate(
+      (view) => !view || date.getFullYear() !== view.getFullYear() || date.getMonth() !== view.getMonth() ? new Date(date.getFullYear(), date.getMonth(), 1) : view
+    );
+  }
+  function openPanel() {
+    if (effectiveDisabled) return;
+    const seed = value ? dayOnly(value) : dayOnly(/* @__PURE__ */ new Date());
+    setViewDate(new Date(seed.getFullYear(), seed.getMonth(), 1));
+    setFocusedDateState(seed);
+    setOpen(true);
+    playCue("open");
+  }
+  function closePanel(reason = "dismiss") {
+    setOpen(false);
+    if (reason === "dismiss") playCue("close");
+    triggerNode?.focus();
+  }
+  function toggle() {
+    if (open) closePanel();
+    else openPanel();
+  }
+  function commit(date) {
+    if (isDayDisabled(date)) return;
+    const changed = !value || !isSameDay(value, date);
+    if (!isControlled) setUncontrolledValue(date);
+    if (changed) playCue("select");
+    onValueChange?.(date);
+    closePanel(changed ? "commit" : "dismiss");
+  }
+  function moveDays(delta) {
+    if (!focusedDate) return;
+    const direction = delta > 0 ? 1 : -1;
+    const found = findEnabledDay(addDays(focusedDate, delta), direction, isDayDisabled);
+    if (found) setFocusedDate(found);
+  }
+  function moveToWeekEdge(edge) {
+    if (!focusedDate) return;
+    const found = findEnabledInRow(focusedDate, weekStartsOn, edge, isDayDisabled);
+    if (found) setFocusedDate(found);
+  }
+  function moveMonths(n) {
+    if (!focusedDate) return;
+    const raw = addMonths(focusedDate, n);
+    let target = raw;
+    let searchDirection = n >= 0 ? 1 : -1;
+    if (min || max) {
+      target = clampDate(raw, min, max);
+      if (target.getTime() !== raw.getTime()) {
+        searchDirection = target.getTime() > raw.getTime() ? 1 : -1;
+      }
+    }
+    const found = isDayDisabled(target) ? findEnabledDay(target, searchDirection, isDayDisabled) : target;
+    if (found) setFocusedDate(found);
+  }
+  function handleGridKeydown(event) {
+    if (!focusedDate) return;
+    switch (event.key) {
+      case "ArrowRight":
+        moveDays(1);
+        break;
+      case "ArrowLeft":
+        moveDays(-1);
+        break;
+      case "ArrowDown":
+        moveDays(7);
+        break;
+      case "ArrowUp":
+        moveDays(-7);
+        break;
+      case "Home":
+        moveToWeekEdge("start");
+        break;
+      case "End":
+        moveToWeekEdge("end");
+        break;
+      case "PageUp":
+        moveMonths(event.shiftKey ? -12 : -1);
+        break;
+      case "PageDown":
+        moveMonths(event.shiftKey ? 12 : 1);
+        break;
+      case "Enter":
+      case " ":
+        commit(focusedDate);
+        break;
+      default:
+        return;
+    }
+    event.preventDefault();
+  }
+  const presence = usePresence(open);
+  const { side: resolvedSide, align: resolvedAlign } = useAnchorPosition(panel, {
+    anchor: triggerNode,
+    side: "bottom",
+    align: "start",
+    offset: 8
+  });
+  useDismissable(panel, {
+    onDismiss: closePanel,
+    exclude: [triggerNode],
+    active: open
+  });
+  const panelRef = useComposedRefs(
+    setPanelNode,
+    presence.register(anchored, (entering) => ({ side: resolvedSide, entering }))
+  );
+  const classes = cn(
+    "ft-date-picker-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
+  );
+  const weeks = useMemo(
+    () => viewDate ? getMonthGrid(viewDate.getFullYear(), viewDate.getMonth(), weekStartsOn) : [],
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [viewDate?.getFullYear(), viewDate?.getMonth(), weekStartsOn]
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref: triggerRef,
+        type: "button",
+        role: "combobox",
+        id: effectiveId,
+        name,
+        className: classes,
+        disabled: effectiveDisabled,
+        "aria-haspopup": "grid",
+        "aria-expanded": open,
+        "aria-controls": open ? panelId : void 0,
+        "aria-required": effectiveRequired ? "true" : void 0,
+        "aria-invalid": effectiveInvalid ? "true" : void 0,
+        "aria-describedby": field?.describedBy,
+        "aria-label": label,
+        onClick: toggle,
+        children: [
+          /* @__PURE__ */ jsx("span", { className: triggerLabel ? void 0 : "text-muted-foreground", children: triggerLabel ?? placeholder }),
+          /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "text-muted-foreground", children: "📅" })
+        ]
+      }
+    ),
+    name ? (
+      /* Real form participation for a control with no native input
+         underneath. ISO (YYYY-MM-DD), the same shape a native
+         `<input type="date">` submits. `disabled` mirrors the
+         trigger's own effective disabled state, so a disabled
+         DatePicker is excluded from submission exactly like a
+         disabled native control would be. React's missing-onChange
+         warning exempts `type="hidden"`, so no handler is needed. */
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "hidden",
+          name,
+          value: value ? formatISODate(value) : "",
+          disabled: effectiveDisabled
+        }
+      )
+    ) : null,
+    /* @__PURE__ */ jsx(Portal, { children: presence.mounted && viewDate && focusedDate ? /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: panelRef,
+        id: panelId,
+        className: "ft-date-picker-panel border-border bg-popover text-popover-foreground flex w-max flex-col gap-2 rounded-[10px] border p-[12px] shadow-lg outline-none",
+        "data-state": presence.surfaceState,
+        "data-side": resolvedSide,
+        "data-align": "start",
+        style: { transformOrigin: originFor(resolvedSide, resolvedAlign) },
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 text-[12px] font-semibold", children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "ft-date-picker-nav text-muted-foreground cursor-pointer",
+                "aria-label": "Previous month",
+                onClick: () => moveMonths(-1),
+                children: "‹"
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { children: monthLabel }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "ft-date-picker-nav text-muted-foreground cursor-pointer",
+                "aria-label": "Next month",
+                onClick: () => moveMonths(1),
+                children: "›"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs(
+            "table",
+            {
+              role: "grid",
+              "aria-label": monthLabel,
+              className: "border-collapse text-[11px]",
+              onKeyDown: handleGridKeydown,
+              children: [
+                /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: weekdayNames.map((weekdayName, weekdayIndex) => /* @__PURE__ */ jsx(
+                  "th",
+                  {
+                    role: "columnheader",
+                    scope: "col",
+                    className: "text-muted-foreground px-1 py-1 font-normal",
+                    children: weekdayName
+                  },
+                  weekdayIndex
+                )) }) }),
+                /* @__PURE__ */ jsx("tbody", { children: weeks.map((week, weekIndex) => (
+                  /* No explicit role="row": `<tr>` already has an
+                     implicit ARIA row role inside a table[role=grid]
+                     — restating it is flagged as redundant. */
+                  /* @__PURE__ */ jsx("tr", { children: week.map((day) => {
+                    const iso = formatISODate(day.date);
+                    const dayDisabled = isDayDisabled(day.date);
+                    const dayFocused = isSameDay(day.date, focusedDate);
+                    const daySelected = value ? isSameDay(day.date, value) : false;
+                    return /* @__PURE__ */ jsx(
+                      "td",
+                      {
+                        role: "gridcell",
+                        "data-ft-date": iso,
+                        tabIndex: dayFocused ? 0 : -1,
+                        "aria-selected": daySelected,
+                        "aria-disabled": dayDisabled ? "true" : void 0,
+                        "aria-label": formatDayAccessibleName(day.date, locale),
+                        className: cn(
+                          "ft-date-picker-day cursor-pointer rounded-[6px] px-1 py-1 text-center",
+                          !day.inMonth && "text-muted-foreground",
+                          dayDisabled && "cursor-not-allowed opacity-40",
+                          daySelected && "bg-accent text-accent-foreground"
+                        ),
+                        onClick: () => {
+                          if (dayDisabled) return;
+                          setFocusedDate(day.date);
+                          commit(day.date);
+                        },
+                        children: day.date.getDate()
+                      },
+                      iso
+                    );
+                  }) }, weekIndex)
+                )) })
+              ]
+            }
+          )
+        ]
+      }
+    ) : null }),
+    /* @__PURE__ */ jsx("div", { className: "sr-only", role: "status", "aria-live": "polite", children: open ? monthLabel : "" })
+  ] });
+});
+DatePicker.displayName = "DatePicker";
+export {
+  DatePicker
+};

package/dist/components/date-picker/date-utils.d.ts

@@ -0,0 +1,39 @@
+import type { WeekStartsOn } from "../../internals/calendar-core.js";
+/** Truncates `date` to local midnight. Always returns a new Date. */
+export declare function dayOnly(date: Date): Date;
+/** Returns a new date `n` days away from `date`, in local time. */
+export declare function addDays(date: Date, n: number): Date;
+/** Whether `date` falls strictly before `bound`, comparing whole days only. */
+export declare function isBeforeDay(date: Date, bound: Date): boolean;
+/** Whether `date` falls strictly after `bound`, comparing whole days only. */
+export declare function isAfterDay(date: Date, bound: Date): boolean;
+/** Whether `date` falls within `[min, max]` (either bound optional), comparing whole days only. */
+export declare function isDayInRange(date: Date, min?: Date, max?: Date): boolean;
+export declare const MAX_DAY_SEARCH = 3660;
+/**
+ * Steps from `from` one day at a time in `direction` until `isDisabled`
+ * returns false, including `from` itself. Returns `null` if nothing enabled
+ * turns up within `MAX_DAY_SEARCH` steps.
+ */
+export declare function findEnabledDay(from: Date, direction: 1 | -1, isDisabled: (date: Date) => boolean): Date | null;
+/** The first day (in `weekStartsOn` terms) of the week `date` falls in. */
+export declare function weekStartOf(date: Date, weekStartsOn: WeekStartsOn): Date;
+/**
+ * Scans the 7-day row containing `date` from one edge inward for the first
+ * enabled day, stopping at the far edge of that same row rather than
+ * spilling into the next week. Returns `null` if the whole row is disabled.
+ */
+export declare function findEnabledInRow(date: Date, weekStartsOn: WeekStartsOn, edge: "start" | "end", isDisabled: (date: Date) => boolean): Date | null;
+/**
+ * Short weekday names ("Mon", "Tue", ...) ordered starting from
+ * `weekStartsOn`, formatted with `locale`. A fixed reference week (a known
+ * Sunday plus offsets) stands in for "any week" — only the weekday, not the
+ * date, ever reaches the formatter.
+ */
+export declare function getWeekdayNames(weekStartsOn: WeekStartsOn, locale?: string): string[];
+/** "July 2026"-style label for the currently displayed month, locale-aware. */
+export declare function formatMonthYear(date: Date, locale?: string): string;
+/** Full accessible name for a single day cell — never just the bare number. */
+export declare function formatDayAccessibleName(date: Date, locale?: string): string;
+/** Short label for the trigger button, e.g. "24 Jul 2026". `null`/`undefined` format to `undefined`. */
+export declare function formatTriggerDate(date: Date | null | undefined, locale?: string): string | undefined;

package/dist/components/date-picker/date-utils.js

@@ -0,0 +1,85 @@
+"use client";
+function dayOnly(date) {
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+}
+function addDays(date, n) {
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate() + n);
+}
+function isBeforeDay(date, bound) {
+  return dayOnly(date).getTime() < dayOnly(bound).getTime();
+}
+function isAfterDay(date, bound) {
+  return dayOnly(date).getTime() > dayOnly(bound).getTime();
+}
+function isDayInRange(date, min, max) {
+  if (min && isBeforeDay(date, min)) return false;
+  if (max && isAfterDay(date, max)) return false;
+  return true;
+}
+const MAX_DAY_SEARCH = 3660;
+function findEnabledDay(from, direction, isDisabled) {
+  let candidate = from;
+  let steps = 0;
+  while (isDisabled(candidate)) {
+    if (steps >= MAX_DAY_SEARCH) return null;
+    candidate = addDays(candidate, direction);
+    steps++;
+  }
+  return candidate;
+}
+function weekStartOf(date, weekStartsOn) {
+  const offset = (date.getDay() - weekStartsOn + 7) % 7;
+  return addDays(date, -offset);
+}
+function findEnabledInRow(date, weekStartsOn, edge, isDisabled) {
+  const start = weekStartOf(date, weekStartsOn);
+  const direction = edge === "start" ? 1 : -1;
+  let candidate = edge === "start" ? start : addDays(start, 6);
+  for (let steps = 0; steps < 7; steps++) {
+    if (!isDisabled(candidate)) return candidate;
+    candidate = addDays(candidate, direction);
+  }
+  return null;
+}
+function getWeekdayNames(weekStartsOn, locale) {
+  const referenceSunday = new Date(2023, 0, 1);
+  const formatter = new Intl.DateTimeFormat(locale, { weekday: "short" });
+  return Array.from(
+    { length: 7 },
+    (_, i) => formatter.format(addDays(referenceSunday, weekStartsOn + i))
+  );
+}
+function formatMonthYear(date, locale) {
+  return new Intl.DateTimeFormat(locale, { month: "long", year: "numeric" }).format(date);
+}
+function formatDayAccessibleName(date, locale) {
+  return new Intl.DateTimeFormat(locale, {
+    weekday: "long",
+    day: "numeric",
+    month: "long",
+    year: "numeric"
+  }).format(date);
+}
+function formatTriggerDate(date, locale) {
+  if (!date) return void 0;
+  return new Intl.DateTimeFormat(locale, {
+    day: "numeric",
+    month: "short",
+    year: "numeric"
+  }).format(date);
+}
+export {
+  MAX_DAY_SEARCH,
+  addDays,
+  dayOnly,
+  findEnabledDay,
+  findEnabledInRow,
+  formatDayAccessibleName,
+  formatMonthYear,
+  formatTriggerDate,
+  getWeekdayNames,
+  isAfterDay,
+  isBeforeDay,
+  isDayInRange,
+  weekStartOf
+};

package/dist/components/date-picker/index.d.ts

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

package/dist/components/dialog/Dialog.d.ts

@@ -0,0 +1,29 @@
+import type { ReactNode } from "react";
+export interface DialogProps {
+    /** Whether the dialog is open. Controlled when given; the component keeps its own copy either way. */
+    open?: boolean;
+    /** Fires whenever `open` changes, from any trigger — the close button, Escape, an outside click, or the optional `trigger` node. */
+    onOpenChange?: (open: boolean) => void;
+    /** The heading. Omitted entirely (not just visually) when not given, so `aria-labelledby` never points at nothing. */
+    title?: string;
+    /** The copy under the title. Same omission rule as `title`. */
+    description?: string;
+    /** Whether Escape and an outside click close the dialog. The close button always works regardless — see the README. */
+    dismissible?: boolean;
+    /** Element to focus once the dialog opens. Defaults to the first focusable descendant — often the close button; pass a form field here for dialogs built around one. */
+    initialFocus?: HTMLElement | null;
+    /** The dialog's body. */
+    children?: ReactNode;
+    /** The action row under the body. Free-form — callers build their own buttons. */
+    footer?: ReactNode;
+    /** Optional trigger; renders in place and opens the dialog on activation. */
+    trigger?: ReactNode;
+    /** Additional classes for the panel. */
+    className?: string;
+    /**
+     * Plays the matching open/close cue through the sound controller. Off by
+     * default; only audible once the user has enabled sound.
+     */
+    sound?: boolean;
+}
+export declare const Dialog: import("react").ForwardRefExoticComponent<DialogProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/dialog/Dialog.js

@@ -0,0 +1,105 @@
+"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 "./DialogSurface.js";
+const Dialog = forwardRef(function Dialog2({
+  open: openProp,
+  onOpenChange,
+  title,
+  description,
+  dismissible = true,
+  initialFocus = null,
+  children,
+  footer,
+  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);
+    playCue(next ? "open" : "close");
+    onOpenChange?.(next);
+  }
+  const triggerRef = useRef(null);
+  function openFromTrigger() {
+    if (open) return;
+    setOpen(true);
+  }
+  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-start justify-between gap-3", children: [
+      title ? /* @__PURE__ */ jsx("h2", { id: titleId, className: "text-[15px] font-semibold text-balance", children: title }) : null,
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "ft-dialog-close text-muted-foreground hover:bg-accent hover:text-accent-foreground inline-flex h-6 w-6 shrink-0 cursor-pointer items-center justify-center rounded-md transition-colors focus-visible:ring-[3px] focus-visible:ring-[var(--ft-overlay-accent)]/35 focus-visible:outline-none",
+          onClick: () => setOpen(false),
+          "aria-label": "Close",
+          children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "✕" })
+        }
+      )
+    ] }),
+    description ? /* @__PURE__ */ jsx("p", { id: descriptionId, className: "text-muted-foreground text-[12.5px] leading-relaxed", children: description }) : null,
+    children,
+    footer ? /* @__PURE__ */ jsx("div", { className: "flex justify-end gap-2", children: footer }) : null
+  ] });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    trigger ? (
+      /*
+      	This wrapper adds no semantics of its own on purpose — it only
+      	listens for the click bubbling up from whatever `trigger` renders,
+      	which is expected to be a real interactive element (a Button,
+      	typically) carrying its own keyboard activation. `display: contents`
+      	keeps it out of layout entirely, so it never affects how the
+      	trigger's own content positions itself.
+      */
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          ref: (node) => {
+            triggerRef.current = node;
+          },
+          className: "contents",
+          onClick: openFromTrigger,
+          children: trigger
+        }
+      )
+    ) : null,
+    /* @__PURE__ */ jsx(
+      DialogSurface,
+      {
+        ref: forwardedRef,
+        open,
+        role: "dialog",
+        titleId,
+        descriptionId,
+        escape: dismissible,
+        outsideClick: dismissible,
+        onDismiss: () => setOpen(false),
+        initialFocus,
+        fallbackFocus: () => triggerRef.current,
+        exclude: () => [triggerRef.current],
+        panelClass: cn(className),
+        children: panelContent
+      }
+    )
+  ] });
+});
+Dialog.displayName = "Dialog";
+export {
+  Dialog
+};

package/dist/components/dialog/DialogSurface.d.ts

@@ -0,0 +1,2 @@
+import type { DialogSurfaceProps } from "./types.js";
+export declare const DialogSurface: import("react").ForwardRefExoticComponent<DialogSurfaceProps & import("react").RefAttributes<HTMLDivElement>>;