@nexub/react 6.0.0 → 6.2.0

package/accessibility.json

@@ -1,5 +1,5 @@
 {
-  "version": "6.0.0",
+  "version": "6.2.0",
   "standard": "WCAG 2.2 Level AA",
   "method": {
     "automated": "axe-core rules tagged wcag2a, wcag2aa, wcag21a, wcag21aa and wcag22aa, run on every Storybook story in light and dark, and on open popups (menus, listboxes, dialogs), on every pull request; a new violation fails the build.",
@@ -342,6 +342,15 @@
       "keyboard": [],
       "screenReader": []
     },
+    {
+      "slug": "date-time-picker",
+      "name": "Date Time Picker",
+      "package": "@nexub/react",
+      "automated": "pass",
+      "exceptions": [],
+      "keyboard": [],
+      "screenReader": []
+    },
     {
       "slug": "dialog",
       "name": "Dialog",
@@ -401,6 +410,15 @@
       "keyboard": [],
       "screenReader": []
     },
+    {
+      "slug": "event-calendar",
+      "name": "Event Calendar",
+      "package": "@nexub/react",
+      "automated": "pass",
+      "exceptions": [],
+      "keyboard": [],
+      "screenReader": []
+    },
     {
       "slug": "eyebrow-chip",
       "name": "Eyebrow Chip",
@@ -410,6 +428,15 @@
       "keyboard": [],
       "screenReader": []
     },
+    {
+      "slug": "fieldset",
+      "name": "Fieldset",
+      "package": "@nexub/react",
+      "automated": "pass",
+      "exceptions": [],
+      "keyboard": [],
+      "screenReader": []
+    },
     {
       "slug": "filter-builder",
       "name": "Filter Builder",
@@ -459,6 +486,17 @@
       "keyboard": [],
       "screenReader": []
     },
+    {
+      "slug": "form",
+      "name": "Form",
+      "package": "@nexub/react",
+      "automated": "pass",
+      "exceptions": [],
+      "keyboard": [
+        "Enter: Submits from any text field; the first invalid field takes focus."
+      ],
+      "screenReader": []
+    },
     {
       "slug": "funnel",
       "name": "Funnel",
@@ -546,6 +584,19 @@
       "keyboard": [],
       "screenReader": []
     },
+    {
+      "slug": "inline-edit",
+      "name": "Inline Edit",
+      "package": "@nexub/react",
+      "automated": "pass",
+      "exceptions": [],
+      "keyboard": [
+        "Enter / Space: On the text: starts editing.",
+        "Enter: In the input: saves.",
+        "Escape: Reverts and returns focus to the text."
+      ],
+      "screenReader": []
+    },
     {
       "slug": "input",
       "name": "Input",
@@ -1094,6 +1145,18 @@
         "Render it only while waiting and remove it when tokens start, so it is not announced again."
       ]
     },
+    {
+      "slug": "time-picker",
+      "name": "Time Picker",
+      "package": "@nexub/react",
+      "automated": "pass",
+      "exceptions": [],
+      "keyboard": [
+        "ArrowUp / ArrowDown: Changes the focused segment (hour, minute, AM/PM).",
+        "ArrowLeft / ArrowRight: Moves between segments."
+      ],
+      "screenReader": []
+    },
     {
       "slug": "toast",
       "name": "Toast",

package/dist/components/DateTimePicker/DateTimePicker.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import type { Locale } from 'date-fns';
+export interface DateTimePickerProps {
+    /** Date and time in the reader's local time. */
+    value?: Date;
+    onChange?: (value: Date | undefined) => void;
+    /** Time used when a date is picked first. @default '09:00' */
+    defaultTime?: string;
+    minuteStep?: number;
+    minDate?: Date;
+    maxDate?: Date;
+    disabled?: boolean;
+    /** IANA zone to name next to the fields (label only; the value stays local). */
+    timeZone?: string;
+    'aria-label'?: string;
+    className?: string;
+    locale?: Locale;
+}
+/** A DatePicker and a TimePicker that edit one `Date` together. */
+export declare function DateTimePicker({ value, onChange, defaultTime, minuteStep, minDate, maxDate, disabled, timeZone, 'aria-label': ariaLabel, className, locale, }: DateTimePickerProps): React.JSX.Element;

package/dist/components/DateTimePicker/DateTimePicker.js

@@ -0,0 +1,67 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../utils/cn.js";
+import { DatePicker } from "../DatePicker/DatePicker.js";
+import { TimePicker } from "../TimePicker/TimePicker.js";
+import { useIntlLocale, useNexubMessages } from "../NexubProvider/NexubProvider.js";
+const pad = (n) => String(n).padStart(2, "0");
+const timeOf = (d) => `${pad(d.getHours())}:${pad(d.getMinutes())}`;
+const withTime = (d, time) => {
+  const [h = 0, m = 0] = time.split(":").map(Number);
+  const next = new Date(d);
+  next.setHours(h, m, 0, 0);
+  return next;
+};
+function DateTimePicker({
+  value,
+  onChange,
+  defaultTime = "09:00",
+  minuteStep,
+  minDate,
+  maxDate,
+  disabled,
+  timeZone,
+  "aria-label": ariaLabel,
+  className,
+  locale
+}) {
+  const messages = useNexubMessages();
+  const intlLocale = useIntlLocale();
+  const [pendingTime, setPendingTime] = React.useState(defaultTime);
+  const time = value ? timeOf(value) : pendingTime;
+  const zoneName = timeZone ? new Intl.DateTimeFormat(intlLocale, { timeZone, timeZoneName: "shortOffset" }).formatToParts(value ?? /* @__PURE__ */ new Date()).find((p) => p.type === "timeZoneName")?.value ?? timeZone : void 0;
+  return /* @__PURE__ */ jsxs("div", { role: "group", "aria-label": ariaLabel, className: cn("flex flex-wrap items-center gap-2", className), children: [
+    /* @__PURE__ */ jsx("div", { className: "min-w-40 flex-1", children: /* @__PURE__ */ jsx(
+      DatePicker,
+      {
+        "aria-label": messages.dateLabel,
+        value,
+        onChange: (date) => onChange?.(date ? withTime(date, time) : void 0),
+        minDate,
+        maxDate,
+        disabled,
+        locale
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      TimePicker,
+      {
+        "aria-label": messages.timeLabel,
+        wrapperClassName: "w-36",
+        value: time,
+        minuteStep,
+        disabled,
+        onValueChange: (next) => {
+          if (!next) return;
+          if (value) onChange?.(withTime(value, next));
+          else setPendingTime(next);
+        }
+      }
+    ),
+    zoneName && /* @__PURE__ */ jsx("span", { className: "text-body-sm text-[var(--color-on-surface-muted)]", children: messages.timeZoneLabel(`${zoneName} (${timeZone})`) })
+  ] });
+}
+export {
+  DateTimePicker
+};

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

@@ -0,0 +1,2 @@
+export { DateTimePicker } from './DateTimePicker.js';
+export type { DateTimePickerProps } from './DateTimePicker.js';

package/dist/components/DateTimePicker/index.js

@@ -0,0 +1,4 @@
+import { DateTimePicker } from "./DateTimePicker.js";
+export {
+  DateTimePicker
+};

package/dist/components/EventCalendar/EventCalendar.d.ts

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { type Day } from 'date-fns';
+export type EventCalendarView = 'month' | 'week';
+export type EventTone = 'primary' | 'success' | 'warning' | 'error' | 'info';
+export interface CalendarEvent {
+    id: string;
+    title: string;
+    start: Date;
+    /** Inclusive end; events spanning days show on each of them. */
+    end?: Date;
+    /** Hides the start time. */
+    allDay?: boolean;
+    /** @default 'primary' */
+    tone?: EventTone;
+}
+export interface EventCalendarProps {
+    events: CalendarEvent[];
+    /** Any day inside the shown month or week. */
+    date?: Date;
+    defaultDate?: Date;
+    onDateChange?: (date: Date) => void;
+    view?: EventCalendarView;
+    defaultView?: EventCalendarView;
+    onViewChange?: (view: EventCalendarView) => void;
+    onEventClick?: (event: CalendarEvent) => void;
+    /** A day's number, or its "N more" link in month view. */
+    onDayClick?: (date: Date) => void;
+    /** Events shown per day in month view before "N more". @default 3 */
+    maxEventsPerDay?: number;
+    /** 0 = Sunday. Defaults to the locale's first day of the week. */
+    weekStartsOn?: Day;
+    className?: string;
+}
+/**
+ * A month or week grid of events. Display only: your app owns the events and
+ * decides what a click on an event or a day does.
+ */
+export declare function EventCalendar({ events, date: dateProp, defaultDate, onDateChange, view: viewProp, defaultView, onViewChange, onEventClick, onDayClick, maxEventsPerDay, weekStartsOn: weekStartsOnProp, className, }: EventCalendarProps): React.JSX.Element;

package/dist/components/EventCalendar/EventCalendar.js

@@ -0,0 +1,204 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import {
+  addDays,
+  addMonths,
+  addWeeks,
+  endOfDay,
+  endOfMonth,
+  endOfWeek,
+  format,
+  isSameDay,
+  isSameMonth,
+  startOfDay,
+  startOfMonth,
+  startOfWeek
+} from "date-fns";
+import { ChevronLeft, ChevronRight } from "@nexub/icons";
+import { cn } from "../../utils/cn.js";
+import { Button } from "../Button/Button.js";
+import { IconButton } from "../IconButton/IconButton.js";
+import { SegmentedControl } from "../SegmentedControl/SegmentedControl.js";
+import { useControllableState } from "../../hooks/useControllableState.js";
+import { useIntlLocale, useLocale, useNexubMessages } from "../NexubProvider/NexubProvider.js";
+const tones = {
+  primary: "bg-[var(--color-primary-container)] text-[var(--color-on-primary-container)]",
+  success: "bg-[var(--color-success-container)] text-[var(--color-on-success-container)]",
+  warning: "bg-[var(--color-warning-container)] text-[var(--color-on-warning-container)]",
+  error: "bg-[var(--color-error-container)] text-[var(--color-on-error-container)]",
+  info: "bg-[var(--color-info-container)] text-[var(--color-on-info-container)]"
+};
+function localeWeekStart(locale) {
+  try {
+    const loc = new Intl.Locale(locale ?? new Intl.DateTimeFormat().resolvedOptions().locale);
+    const firstDay = loc.getWeekInfo?.().firstDay ?? loc.weekInfo?.firstDay;
+    return firstDay ? firstDay % 7 : 0;
+  } catch {
+    return 0;
+  }
+}
+function EventCalendar({
+  events,
+  date: dateProp,
+  defaultDate,
+  onDateChange,
+  view: viewProp,
+  defaultView = "month",
+  onViewChange,
+  onEventClick,
+  onDayClick,
+  maxEventsPerDay = 3,
+  weekStartsOn: weekStartsOnProp,
+  className
+}) {
+  const t = useNexubMessages();
+  const { dir } = useLocale();
+  const intlLocale = useIntlLocale();
+  const [date = /* @__PURE__ */ new Date(), setDate] = useControllableState({
+    value: dateProp,
+    defaultValue: defaultDate ?? /* @__PURE__ */ new Date(),
+    onChange: onDateChange
+  });
+  const [view = "month", setView] = useControllableState({
+    value: viewProp,
+    defaultValue: defaultView,
+    onChange: onViewChange
+  });
+  const weekStartsOn = weekStartsOnProp ?? localeWeekStart(intlLocale);
+  const opts = { weekStartsOn };
+  const month = view === "month";
+  const first = startOfWeek(month ? startOfMonth(date) : date, opts);
+  const last = endOfWeek(month ? endOfMonth(date) : date, opts);
+  const days = [];
+  for (let d = first; d <= last; d = addDays(d, 1)) days.push(d);
+  const weeks = [];
+  for (let i = 0; i < days.length; i += 7) weeks.push(days.slice(i, i + 7));
+  const sorted = React.useMemo(
+    () => [...events].sort((a, b) => a.start.getTime() - b.start.getTime()),
+    [events]
+  );
+  const eventsOn = (day) => sorted.filter((e) => e.start <= endOfDay(day) && (e.end ?? e.start) >= startOfDay(day));
+  const fmt = (o) => new Intl.DateTimeFormat(intlLocale, o);
+  const title = month ? fmt({ month: "long", year: "numeric" }).format(date) : fmt({ month: "short", day: "numeric", year: "numeric" }).formatRange(days[0], days[6]);
+  const timeFmt = fmt({ timeStyle: "short" });
+  const fullFmt = fmt({ dateStyle: "full" });
+  const today = /* @__PURE__ */ new Date();
+  const step = (n) => setDate(month ? addMonths(date, n) : addWeeks(date, n));
+  const [Back, Forward] = dir === "rtl" ? [ChevronRight, ChevronLeft] : [ChevronLeft, ChevronRight];
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-3", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+      /* @__PURE__ */ jsx("h2", { "aria-live": "polite", className: "me-auto text-title-lg font-semibold text-[var(--color-on-surface)]", children: title }),
+      /* @__PURE__ */ jsx(Button, { variant: "outlined", size: "sm", onClick: () => setDate(/* @__PURE__ */ new Date()), children: t.today }),
+      /* @__PURE__ */ jsx(IconButton, { variant: "ghost", size: "sm", label: month ? t.previousMonth : t.previousWeek, onClick: () => step(-1), children: /* @__PURE__ */ jsx(Back, { size: "sm", "aria-hidden": "true" }) }),
+      /* @__PURE__ */ jsx(IconButton, { variant: "ghost", size: "sm", label: month ? t.nextMonth : t.nextWeek, onClick: () => step(1), children: /* @__PURE__ */ jsx(Forward, { size: "sm", "aria-hidden": "true" }) }),
+      /* @__PURE__ */ jsxs(
+        SegmentedControl.Root,
+        {
+          size: "sm",
+          "aria-label": t.calendarView,
+          value: view,
+          onValueChange: (v) => v && setView(v),
+          children: [
+            /* @__PURE__ */ jsx(SegmentedControl.Item, { value: "month", children: t.monthView }),
+            /* @__PURE__ */ jsx(SegmentedControl.Item, { value: "week", children: t.weekView })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("table", { className: "w-full table-fixed border-collapse text-body-sm", children: [
+      /* @__PURE__ */ jsx("caption", { className: "sr-only", children: title }),
+      /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: weeks[0].map((d) => /* @__PURE__ */ jsx(
+        "th",
+        {
+          scope: "col",
+          abbr: fmt({ weekday: "long" }).format(d),
+          className: "pb-2 text-label-md font-medium text-[var(--color-on-surface-muted)]",
+          children: fmt({ weekday: "short" }).format(d)
+        },
+        d.getDay()
+      )) }) }),
+      /* @__PURE__ */ jsx("tbody", { children: weeks.map((week) => /* @__PURE__ */ jsx("tr", { children: week.map((day) => {
+        const list = eventsOn(day);
+        const shown = month ? list.slice(0, maxEventsPerDay) : list;
+        const hidden = list.length - shown.length;
+        const isToday = isSameDay(day, today);
+        const outside = month && !isSameMonth(day, date);
+        return /* @__PURE__ */ jsxs(
+          "td",
+          {
+            "aria-current": isToday ? "date" : void 0,
+            className: cn(
+              "border border-[var(--color-outline-variant)] p-1 align-top",
+              month ? "h-28" : "h-80",
+              outside && "bg-[var(--color-surface-container-low)]"
+            ),
+            children: [
+              /* @__PURE__ */ jsx(
+                DayNumber,
+                {
+                  day,
+                  label: fullFmt.format(day),
+                  isToday,
+                  muted: outside,
+                  onClick: onDayClick
+                }
+              ),
+              /* @__PURE__ */ jsx("ul", { className: "mt-1 flex flex-col gap-0.5", children: shown.map((e) => {
+                const time = e.allDay || !isSameDay(e.start, day) ? "" : timeFmt.format(e.start);
+                const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+                  time && /* @__PURE__ */ jsx("span", { className: "me-1 tabular-nums opacity-80", children: time }),
+                  e.title
+                ] });
+                const cls = cn(
+                  "block w-full truncate rounded-shape-min px-1.5 py-0.5 text-start text-label-md",
+                  tones[e.tone ?? "primary"]
+                );
+                return /* @__PURE__ */ jsx("li", { children: onEventClick ? /* @__PURE__ */ jsx("button", { type: "button", className: cn(cls, "hover:opacity-90"), onClick: () => onEventClick(e), children: body }) : /* @__PURE__ */ jsx("span", { className: cls, children: body }) }, e.id);
+              }) }),
+              hidden > 0 && (onDayClick ? /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "min-h-6 px-1.5 text-label-md text-[var(--color-on-surface-variant)] hover:underline",
+                  onClick: () => onDayClick(day),
+                  children: t.moreCount(hidden)
+                }
+              ) : /* @__PURE__ */ jsx("span", { className: "mt-0.5 block px-1.5 text-label-md text-[var(--color-on-surface-variant)]", children: t.moreCount(hidden) }))
+            ]
+          },
+          day.toISOString()
+        );
+      }) }, week[0].toISOString())) })
+    ] })
+  ] });
+}
+function DayNumber({
+  day,
+  label,
+  isToday,
+  muted,
+  onClick
+}) {
+  const cls = cn(
+    "inline-flex size-7 items-center justify-center rounded-full text-label-md tabular-nums",
+    isToday ? "bg-[var(--color-primary)] text-[var(--color-on-primary)]" : muted ? "text-[var(--color-on-surface-muted)]" : "text-[var(--color-on-surface)]"
+  );
+  const n = day.getDate();
+  return onClick ? /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      "aria-label": label,
+      className: cn(cls, !isToday && "hover:bg-[var(--color-surface-container-high)]"),
+      onClick: () => onClick(day),
+      children: n
+    }
+  ) : /* @__PURE__ */ jsxs("time", { dateTime: format(day, "yyyy-MM-dd"), className: cls, children: [
+    /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: n }),
+    /* @__PURE__ */ jsx("span", { className: "sr-only", children: label })
+  ] });
+}
+export {
+  EventCalendar
+};

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

@@ -0,0 +1,2 @@
+export { EventCalendar } from './EventCalendar.js';
+export type { EventCalendarProps, EventCalendarView, CalendarEvent, EventTone } from './EventCalendar.js';

package/dist/components/EventCalendar/index.js

@@ -0,0 +1,4 @@
+import { EventCalendar } from "./EventCalendar.js";
+export {
+  EventCalendar
+};

package/dist/components/Fieldset/Fieldset.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+export interface FieldsetProps extends React.FieldsetHTMLAttributes<HTMLFieldSetElement> {
+    /** The group's name, read before each field inside it. */
+    legend: React.ReactNode;
+    description?: React.ReactNode;
+}
+/**
+ * Groups related fields under a heading (`<fieldset>` + `<legend>`). `disabled`
+ * disables every control inside it, natively.
+ */
+export declare const Fieldset: React.ForwardRefExoticComponent<FieldsetProps & React.RefAttributes<HTMLFieldSetElement>>;

package/dist/components/Fieldset/Fieldset.js

@@ -0,0 +1,23 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../utils/cn.js";
+const Fieldset = React.forwardRef(function Fieldset2({ legend, description, className, children, ...props }, ref) {
+  const descriptionId = React.useId();
+  return /* @__PURE__ */ jsxs(
+    "fieldset",
+    {
+      ref,
+      "aria-describedby": description ? descriptionId : void 0,
+      className: cn("m-0 flex min-w-0 flex-col gap-4 border-0 p-0", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("legend", { className: "mb-1 p-0 text-title-sm font-semibold text-[var(--color-on-surface)]", children: legend }),
+        description && /* @__PURE__ */ jsx("p", { id: descriptionId, className: "text-body-sm text-[var(--color-on-surface-muted)]", children: description }),
+        children
+      ]
+    }
+  );
+});
+export {
+  Fieldset
+};

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

@@ -0,0 +1,2 @@
+export { Fieldset } from './Fieldset.js';
+export type { FieldsetProps } from './Fieldset.js';

package/dist/components/Fieldset/index.js

@@ -0,0 +1,4 @@
+import { Fieldset } from "./Fieldset.js";
+export {
+  Fieldset
+};

package/dist/components/Form/Form.d.ts

@@ -0,0 +1,33 @@
+import * as React from 'react';
+export interface FormErrorItem {
+    /** The field's `name`. */
+    name: string;
+    /** The field's DOM id, or its name when it has none (ErrorSummary link target). */
+    id: string;
+    message: string;
+}
+export type FormErrors = Record<string, string>;
+export interface FormContextValue {
+    errors: FormErrors;
+    submitting: boolean;
+}
+/** Errors and submitting state of the closest `Form`, or null outside one. */
+export declare function useForm(): FormContextValue | null;
+export interface FormProps extends Omit<React.FormHTMLAttributes<HTMLFormElement>, 'onSubmit' | 'onInvalid'> {
+    /**
+     * Extra checks after the browser's own (`required`, `type`, `pattern`, `min`…).
+     * Return `{ fieldName: message }`; empty values mean valid. Plug zod or any
+     * schema library in here.
+     */
+    validate?: (data: FormData) => Record<string, string | null | undefined | false> | void;
+    /** Called with the form data only when every field is valid. A promise sets `submitting`. */
+    onSubmit?: (data: FormData, event: React.FormEvent<HTMLFormElement>) => void | Promise<unknown>;
+    /** Called after a failed submit, in field order; pass the list to ErrorSummary. */
+    onInvalidSubmit?: (errors: FormErrorItem[]) => void;
+}
+/**
+ * A `<form>` that validates on submit with the browser's constraint validation
+ * plus your `validate`, shows the messages through FormField, and focuses the
+ * first invalid field. A field's error clears as soon as it is edited.
+ */
+export declare const Form: React.ForwardRefExoticComponent<FormProps & React.RefAttributes<HTMLFormElement>>;

package/dist/components/Form/Form.js

@@ -0,0 +1,79 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../utils/cn.js";
+const FormContext = React.createContext(null);
+function useForm() {
+  return React.useContext(FormContext);
+}
+const isControl = (el) => "validity" in el && "name" in el && Boolean(el.name);
+const Form = React.forwardRef(function Form2({ validate, onSubmit, onInvalidSubmit, onInput, className, children, ...props }, ref) {
+  const [errors, setErrors] = React.useState({});
+  const [submitting, setSubmitting] = React.useState(false);
+  const handleSubmit = async (event) => {
+    event.preventDefault();
+    if (submitting) return;
+    const form = event.currentTarget;
+    const data = new FormData(form);
+    const controls = Array.from(form.elements).filter(isControl).filter((el) => !el.disabled);
+    const next = {};
+    for (const el of controls) {
+      if (!el.validity.valid && !next[el.name]) next[el.name] = el.validationMessage;
+    }
+    for (const [name, message] of Object.entries(validate?.(data) ?? {})) {
+      if (message && !next[name]) next[name] = message;
+    }
+    setErrors(next);
+    if (Object.keys(next).length) {
+      const seen = /* @__PURE__ */ new Set();
+      const items = [];
+      for (const el of controls) {
+        if (next[el.name] && !seen.has(el.name)) {
+          seen.add(el.name);
+          items.push({ name: el.name, id: el.id || el.name, message: next[el.name] });
+        }
+      }
+      for (const name of Object.keys(next)) {
+        if (!seen.has(name)) items.push({ name, id: name, message: next[name] });
+      }
+      onInvalidSubmit?.(items);
+      const first = controls.find((el) => next[el.name] && el.type !== "hidden");
+      first?.focus();
+      return;
+    }
+    const result = onSubmit?.(data, event);
+    if (result instanceof Promise) {
+      setSubmitting(true);
+      try {
+        await result;
+      } finally {
+        setSubmitting(false);
+      }
+    }
+  };
+  const handleInput = (event) => {
+    onInput?.(event);
+    const name = event.target.name;
+    if (name && errors[name]) {
+      setErrors(({ [name]: _cleared, ...rest }) => rest);
+    }
+  };
+  const value = React.useMemo(() => ({ errors, submitting }), [errors, submitting]);
+  return /* @__PURE__ */ jsx(FormContext.Provider, { value, children: /* @__PURE__ */ jsx(
+    "form",
+    {
+      ref,
+      noValidate: true,
+      "aria-busy": submitting || void 0,
+      className: cn("flex flex-col gap-5", className),
+      onSubmit: handleSubmit,
+      onInput: handleInput,
+      ...props,
+      children
+    }
+  ) });
+});
+export {
+  Form,
+  useForm
+};

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

@@ -0,0 +1,2 @@
+export { Form, useForm } from './Form.js';
+export type { FormProps, FormErrorItem, FormErrors, FormContextValue } from './Form.js';

package/dist/components/Form/index.js

@@ -0,0 +1,5 @@
+import { Form, useForm } from "./Form.js";
+export {
+  Form,
+  useForm
+};

package/dist/components/FormField/FormField.d.ts

@@ -10,6 +10,8 @@ export interface FormFieldContextValue {
     disabled?: boolean;
     descriptionId: string;
     errorId: string;
+    /** The message from the enclosing Form for this field's `name`. */
+    formError?: string;
 }
 export interface FormFieldRootProps extends React.HTMLAttributes<HTMLDivElement> {
     id?: string;