@godxjp/ui 19.6.0 → 20.1.0

package/dist/components/data-entry/date-range-picker.js

@@ -1,12 +1,25 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { ArrowRight, CalendarIcon, X } from "lucide-react";
 import { usePickerLocales, useTranslation } from "../../i18n/use-translation.js";
-import { parseDateInput, toIsoDate } from "../../lib/datetime/index.js";
+import { toIsoDate } from "../../lib/datetime/index.js";
+import {
+  formatPickerDate,
+  parsePickerDate,
+  pickerDateAllowed
+} from "../../lib/datetime/picker-format.js";
+import { Button } from "../general/button.js";
+import { Flex } from "../layout/flex.js";
+import {
+  CONTROL_VARIANT_CHROME_CLASS,
+  CONTROL_STATUS_CHROME_CLASS,
+  controlAppearanceAttributes
+} from "./control-appearance.js";
 import { useControlledLatch } from "../../lib/hooks.js";
 import { pickGroupFieldA11y, useFieldIdentity } from "../../lib/field-a11y.js";
 import { cn } from "../../lib/utils.js";
+import { resolveAllowClear } from "./control-surface.js";
 import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from "../data-display/popover.js";
 import { Calendar } from "./calendar.js";
 const ISO_HINT = "yyyy-mm-dd";
@@ -24,12 +37,52 @@ function DateRangePicker({
   showClose,
   fromDate,
   toDate,
-  allowClear = true,
+  disabledDate,
+  cellRender,
+  allowClear,
+  format,
+  parseFormat,
+  minDate,
+  maxDate,
+  showWeek,
+  presets,
+  needConfirm = false,
+  allowEmpty = [true, true],
+  order = true,
+  open: openProp,
+  defaultOpen = false,
+  onOpenChange,
+  inputReadOnly,
+  preserveInvalidOnBlur,
+  placement = "bottom-start",
+  renderExtraFooter,
+  size,
+  status,
+  variant = "outlined",
+  ref,
   ...ariaProps
 }) {
   const { t } = useTranslation();
-  const { dayPickerLocale } = usePickerLocales(localeProp);
-  const [open, setOpen] = React.useState(false);
+  const { dayPickerLocale, locale } = usePickerLocales(localeProp);
+  const appearance = controlAppearanceAttributes({ status, variant });
+  const [internalOpen, setInternalOpen] = React.useState(defaultOpen);
+  const open = !disabled && (openProp ?? internalOpen);
+  const [pending, setPending] = React.useState();
+  const [hasPending, setHasPending] = React.useState(false);
+  const setOpen = (next) => {
+    if (disabled && next) return;
+    if (openProp === void 0) setInternalOpen(next);
+    onOpenChange?.(next);
+    if (!next) {
+      setHasPending(false);
+      setPending(void 0);
+    }
+  };
+  const minimum = minDate ?? fromDate;
+  const maximum = maxDate ?? toDate;
+  const allowed = (date) => pickerDateAllowed(date, minimum, maximum, disabledDate);
+  const display = (date) => formatPickerDate(date, format, locale);
+  const parse = (text) => parsePickerDate(text, format, parseFormat);
   const groupA11y = pickGroupFieldA11y(ariaProps);
   const autoId = React.useId();
   const groupId = id ?? autoId;
@@ -41,29 +94,45 @@ function DateRangePicker({
   const isControlled = useControlledLatch(valueProp !== void 0);
   const [internalValue, setInternalValue] = React.useState(defaultValue);
   const value = isControlled ? valueProp : internalValue;
-  const [fromText, setFromText] = React.useState(() => toIsoDate(value?.from));
-  const [toText, setToText] = React.useState(() => toIsoDate(value?.to));
+  const working = hasPending ? pending : value;
+  const [fromText, setFromText] = React.useState(() => display(value?.from));
+  const [toText, setToText] = React.useState(() => display(value?.to));
   React.useEffect(() => {
-    setFromText(toIsoDate(value?.from));
-    setToText(toIsoDate(value?.to));
-  }, [value?.from, value?.to]);
+    setFromText(formatPickerDate(value?.from, format, locale));
+    setToText(formatPickerDate(value?.to, format, locale));
+  }, [value?.from, value?.to, format, locale]);
   const resolvedPlaceholder = placeholder ?? t("dataEntry.dateRangePicker.placeholder") ?? ISO_HINT;
   const emit = (next) => {
     if (!isControlled) setInternalValue(next);
     onValueChange?.(next);
   };
-  const showClear = allowClear && Boolean(value?.from || value?.to) && !disabled;
+  const clearControl = resolveAllowClear(allowClear, true, t("common.clear") ?? "Clear");
+  const showClear = clearControl.enabled && allowEmpty.every(Boolean) && Boolean(value?.from || value?.to) && !disabled;
   const clear = () => {
     emit(void 0);
     setFromText("");
     setToText("");
   };
+  const validRange = (next) => Boolean(
+    next && (next.from ? allowed(next.from) : allowEmpty[0]) && (next.to ? allowed(next.to) : allowEmpty[1])
+  );
+  const choose = (range) => {
+    let next = range;
+    if (next?.from && !allowed(next.from) || next?.to && !allowed(next.to)) return;
+    if (order && next?.from && next.to && next.from > next.to)
+      next = { from: next.to, to: next.from };
+    if (needConfirm) {
+      setPending(next);
+      setHasPending(true);
+    } else emit(next);
+  };
   const commitEdge = (edge, raw) => {
     const trimmed = raw.trim();
-    if (trimmed !== "" && !/^\d{4}-\d{2}-\d{2}$/.test(trimmed)) return;
-    const parsed = trimmed === "" ? void 0 : parseDateInput(trimmed) ?? void 0;
-    const next = { from: value?.from, to: value?.to, [edge]: parsed };
-    emit(next.from || next.to ? next : void 0);
+    const parsed = parse(trimmed);
+    if (trimmed && (!parsed || !allowed(parsed))) return;
+    if (!trimmed && !allowEmpty[edge === "from" ? 0 : 1]) return;
+    const next = { from: working?.from, to: working?.to, [edge]: parsed };
+    choose(next.from || next.to ? next : void 0);
   };
   const sharedKeyHandlers = {
     onKeyDown: (event) => {
@@ -76,135 +145,204 @@ function DateRangePicker({
     }
   };
   const innerInputClass = "ui-month-picker-input";
-  return /* @__PURE__ */ jsx(Popover, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsx(PopoverAnchor, { asChild: true, children: /* @__PURE__ */ jsxs(
-    "div",
-    {
-      role: "group",
-      id: groupId,
-      ...groupA11y,
-      "data-field": rangeField,
-      "aria-disabled": disabled ? true : void 0,
-      "data-state": open ? "open" : "closed",
-      className: cn(
-        // One input-styled shell for the whole range — the shared composite-field box, so
-        // this and the month range picker cannot drift into two slightly different fields.
-        "ui-control ui-control-composite-field",
-        "aria-invalid:border-destructive",
-        className
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+    (format || needConfirm || preserveInvalidOnBlur) && rangeName ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "hidden",
+          disabled,
+          name: `${rangeName}_from`,
+          value: toIsoDate(value?.from)
+        }
       ),
-      onClick: () => {
-        if (!disabled) setOpen(true);
-      },
-      children: [
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            id: fromId,
-            "data-field": rangeField ? `${rangeField}_from` : void 0,
-            name: rangeName ? `${rangeName}_from` : void 0,
-            value: fromText,
-            disabled,
-            placeholder: resolvedPlaceholder,
-            inputMode: "numeric",
-            autoComplete: "off",
-            "aria-label": t("dataEntry.dateRangePicker.from") ?? "From",
-            className: innerInputClass,
-            ...sharedKeyHandlers,
-            onChange: (event) => {
-              setFromText(event.target.value);
-              commitEdge("from", event.target.value);
-            },
-            onBlur: (event) => {
-              const parsed = parseDateInput(event.target.value.trim());
-              setFromText(parsed ? toIsoDate(parsed) : toIsoDate(value?.from));
-            }
-          }
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "hidden",
+          disabled,
+          name: `${rangeName}_to`,
+          value: toIsoDate(value?.to)
+        }
+      )
+    ] }) : null,
+    /* @__PURE__ */ jsx(PopoverAnchor, { asChild: true, children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        role: "group",
+        id: groupId,
+        ...groupA11y,
+        "data-field": rangeField,
+        "data-size": size,
+        ...appearance,
+        "aria-disabled": disabled ? true : void 0,
+        "data-state": open ? "open" : "closed",
+        className: cn(
+          // One input-styled shell for the whole range — the shared composite-field box, so
+          // this and the month range picker cannot drift into two slightly different fields.
+          "ui-control ui-control-composite-field",
+          "aria-invalid:border-destructive",
+          CONTROL_VARIANT_CHROME_CLASS[variant],
+          CONTROL_STATUS_CHROME_CLASS,
+          className
         ),
-        /* @__PURE__ */ jsx(ArrowRight, { className: "ui-month-picker-separator-icon", "aria-hidden": "true" }),
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            id: toId,
-            "data-field": rangeField ? `${rangeField}_to` : void 0,
-            name: rangeName ? `${rangeName}_to` : void 0,
-            value: toText,
-            disabled,
-            placeholder: resolvedPlaceholder,
-            inputMode: "numeric",
-            autoComplete: "off",
-            "aria-label": t("dataEntry.dateRangePicker.to") ?? "To",
-            className: innerInputClass,
-            ...sharedKeyHandlers,
-            onChange: (event) => {
-              setToText(event.target.value);
-              commitEdge("to", event.target.value);
-            },
-            onBlur: (event) => {
-              const parsed = parseDateInput(event.target.value.trim());
-              setToText(parsed ? toIsoDate(parsed) : toIsoDate(value?.to));
+        onClick: () => {
+          if (!disabled) setOpen(true);
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              id: fromId,
+              "data-field": rangeField ? `${rangeField}_from` : void 0,
+              name: !format && !needConfirm && !preserveInvalidOnBlur && rangeName ? `${rangeName}_from` : void 0,
+              ref,
+              readOnly: inputReadOnly,
+              value: fromText,
+              disabled,
+              placeholder: resolvedPlaceholder,
+              inputMode: "numeric",
+              autoComplete: "off",
+              "aria-label": t("dataEntry.dateRangePicker.from") ?? "From",
+              className: innerInputClass,
+              ...sharedKeyHandlers,
+              onChange: (event) => {
+                setFromText(event.target.value);
+                commitEdge("from", event.target.value);
+              },
+              onBlur: (event) => {
+                const parsed = parse(event.target.value);
+                const accepted = parsed && allowed(parsed) ? parsed : void 0;
+                if (!preserveInvalidOnBlur)
+                  setFromText(accepted ? display(accepted) : display(value?.from));
+              }
             }
-          }
-        ),
-        showClear ? /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            tabIndex: -1,
-            "aria-label": t("common.clear") ?? "Clear",
-            className: "text-muted-foreground hover:text-foreground shrink-0",
-            onClick: (event) => {
-              event.stopPropagation();
-              clear();
-            },
-            children: /* @__PURE__ */ jsx(X, { className: "ui-month-picker-icon", "aria-hidden": "true" })
-          }
-        ) : null,
-        /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            disabled,
-            tabIndex: -1,
-            "aria-label": t("dataEntry.dateRangePicker.openCalendar") ?? "Open calendar",
-            className: "text-muted-foreground hover:text-foreground shrink-0",
-            children: /* @__PURE__ */ jsx(CalendarIcon, { className: "ui-month-picker-icon", "aria-hidden": "true" })
-          }
-        ) }),
-        /* @__PURE__ */ jsx(
-          PopoverContent,
-          {
-            className: "ui-control-panel-flush",
-            align: "start",
-            onOpenAutoFocus: (event) => event.preventDefault(),
-            children: /* @__PURE__ */ jsx(
-              Calendar,
-              {
-                mode: "range",
-                selected: value,
-                defaultMonth: value?.from,
-                numberOfMonths: 2,
-                onSelect: (range) => {
-                  emit(range);
-                  setFromText(toIsoDate(range?.from));
-                  setToText(toIsoDate(range?.to));
-                },
-                locale: dayPickerLocale,
-                disabled: [
-                  ...fromDate ? [{ before: fromDate }] : [],
-                  ...toDate ? [{ after: toDate }] : []
-                ],
-                startMonth: fromDate,
-                endMonth: toDate,
-                showToday,
-                showClose,
-                onClose: () => setOpen(false)
+          ),
+          /* @__PURE__ */ jsx(ArrowRight, { className: "ui-month-picker-separator-icon", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              id: toId,
+              "data-field": rangeField ? `${rangeField}_to` : void 0,
+              name: !format && !needConfirm && !preserveInvalidOnBlur && rangeName ? `${rangeName}_to` : void 0,
+              readOnly: inputReadOnly,
+              value: toText,
+              disabled,
+              placeholder: resolvedPlaceholder,
+              inputMode: "numeric",
+              autoComplete: "off",
+              "aria-label": t("dataEntry.dateRangePicker.to") ?? "To",
+              className: innerInputClass,
+              ...sharedKeyHandlers,
+              onChange: (event) => {
+                setToText(event.target.value);
+                commitEdge("to", event.target.value);
+              },
+              onBlur: (event) => {
+                const parsed = parse(event.target.value);
+                const accepted = parsed && allowed(parsed) ? parsed : void 0;
+                if (!preserveInvalidOnBlur)
+                  setToText(accepted ? display(accepted) : display(value?.to));
               }
-            )
-          }
-        )
-      ]
-    }
-  ) }) });
+            }
+          ),
+          showClear ? /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              tabIndex: -1,
+              "aria-label": clearControl.label,
+              className: "text-muted-foreground hover:text-foreground shrink-0",
+              onClick: (event) => {
+                event.stopPropagation();
+                event.currentTarget.closest("div")?.querySelector("input:not([type=hidden])")?.focus();
+                clear();
+              },
+              children: clearControl.clearIcon ?? /* @__PURE__ */ jsx(X, { className: "ui-month-picker-icon", "aria-hidden": "true" })
+            }
+          ) : /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              disabled,
+              tabIndex: -1,
+              "aria-label": t("dataEntry.dateRangePicker.openCalendar") ?? "Open calendar",
+              className: "text-muted-foreground hover:text-foreground shrink-0",
+              children: /* @__PURE__ */ jsx(CalendarIcon, { className: "ui-month-picker-icon", "aria-hidden": "true" })
+            }
+          ) }),
+          /* @__PURE__ */ jsxs(
+            PopoverContent,
+            {
+              className: "ui-control-panel-flush",
+              side: placement.startsWith("top") ? "top" : "bottom",
+              align: placement.endsWith("end") ? "end" : "start",
+              onClick: (event) => event.stopPropagation(),
+              onOpenAutoFocus: (event) => event.preventDefault(),
+              children: [
+                presets?.length ? /* @__PURE__ */ jsx(Flex, { wrap: true, gap: "xs", pad: "sm", children: presets.map((preset, index) => /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    type: "button",
+                    variant: "ghost",
+                    size: "sm",
+                    onClick: () => {
+                      const range = typeof preset.value === "function" ? preset.value() : preset.value;
+                      if (validRange(range)) choose(range);
+                    },
+                    children: preset.label
+                  },
+                  index
+                )) }) : null,
+                /* @__PURE__ */ jsx(
+                  Calendar,
+                  {
+                    mode: "range",
+                    selected: working,
+                    defaultMonth: working?.from,
+                    showWeekNumber: showWeek,
+                    numberOfMonths: 2,
+                    onSelect: (range) => {
+                      choose(range);
+                      setFromText(display(range?.from));
+                      setToText(display(range?.to));
+                    },
+                    locale: dayPickerLocale,
+                    disabled: [
+                      ...minimum ? [{ before: minimum }] : [],
+                      ...maximum ? [{ after: maximum }] : [],
+                      ...disabledDate ? [disabledDate] : []
+                    ],
+                    cellRender,
+                    startMonth: minimum,
+                    endMonth: maximum,
+                    showToday,
+                    showClose,
+                    onClose: () => setOpen(false)
+                  }
+                ),
+                needConfirm ? /* @__PURE__ */ jsx(Flex, { pad: "sm", justify: "end", children: /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    type: "button",
+                    disabled: !validRange(working),
+                    onClick: () => {
+                      if (validRange(working)) {
+                        emit(working);
+                        setOpen(false);
+                      }
+                    },
+                    children: t("dataEntry.timePicker.confirm")
+                  }
+                ) }) : null,
+                renderExtraFooter?.()
+              ]
+            }
+          )
+        ]
+      }
+    ) })
+  ] });
 }
 export {
   DateRangePicker

package/dist/components/data-entry/field.js

@@ -1,4 +1,3 @@
-"use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "../../lib/utils.js";
 import { Label } from "./label.js";

package/dist/components/data-entry/form-field.d.ts

@@ -1,4 +1,4 @@
 import * as React from "react";
 import type { FormFieldProp } from "../../props/components/data-entry.prop.js";
 export type { FormFieldProp, FormFieldProp as FormFieldProps, } from "../../props/components/data-entry.prop.js";
-export declare function FormField({ id, name, field, label, required, helper, error: errorProp, labelAddon, layout: layoutProp, labelWidth: labelWidthProp, controlWidth: controlWidthProp, colSpan, className, children, staticText, }: FormFieldProp): React.JSX.Element;
+export declare function FormField({ id, name, field, label, required, helper, error: errorProp, validateStatus, hasFeedback, feedback, labelAddon, layout: layoutProp, labelWidth: labelWidthProp, controlWidth: controlWidthProp, colSpan, className, children, staticText, }: FormFieldProp): React.JSX.Element;

package/dist/components/data-entry/form-field.js

@@ -1,7 +1,10 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
+import { CheckCircle, CircleAlert, LoaderCircle, TriangleAlert } from "lucide-react";
+import { useTranslation } from "../../i18n/use-translation.js";
 import { Label } from "../data-entry/label.js";
+import { controlIconClass } from "../../lib/control-styles.js";
 import { cn } from "../../lib/utils.js";
 import { FieldIdentityContext, FieldNameContext, mergeAriaIds } from "../../lib/field-a11y.js";
 import { useOptionalAppContext } from "../../app/app-provider.js";
@@ -17,6 +20,9 @@ function FormField({
   required,
   helper,
   error: errorProp,
+  validateStatus,
+  hasFeedback,
+  feedback,
   labelAddon,
   layout: layoutProp,
   labelWidth: labelWidthProp,
@@ -27,6 +33,7 @@ function FormField({
   staticText
 }) {
   const form = useFormLayout();
+  const { t } = useTranslation();
   const layout = layoutProp ?? form?.layout ?? "vertical";
   const labelWidth = labelWidthProp ?? form?.labelWidth;
   const controlWidth = controlWidthProp ?? form?.controlWidth;
@@ -39,6 +46,9 @@ function FormField({
   const resolvedId = id ?? autoId;
   const labelId = `${resolvedId}-label`;
   const helperId = helper ? `${resolvedId}-helper` : void 0;
+  const validationStatus = error ? "error" : validateStatus;
+  const feedbackId = hasFeedback && validationStatus ? `${resolvedId}-feedback` : void 0;
+  const FeedbackIcon = validationStatus === "validating" ? LoaderCircle : validationStatus === "error" ? CircleAlert : validationStatus === "warning" ? TriangleAlert : CheckCircle;
   const errorId = error ? `${resolvedId}-error` : void 0;
   const fieldKey = field ?? name ?? id;
   const emitFieldNames = useOptionalAppContext()?.emitFieldNames ?? false;
@@ -67,6 +77,8 @@ function FormField({
     // controls (Radio.Group, checkbox lists, range pairs) have no labelable root,
     // and a dangling `for` triggers Chrome's "Incorrect use of <label>" issue.
     id: childProps?.id ?? resolvedId,
+    ...form?.disabled && childProps?.disabled !== false ? { disabled: true } : {},
+    ...validationStatus === "validating" ? { "aria-busy": true } : {},
     // Read the child's own value first in BOTH cases: cloneElement
     // overwrites every key present in the config bag, `undefined` included, so a bare
     // `"data-field": fieldKey` would erase a value the control set for itself.
@@ -82,14 +94,15 @@ function FormField({
     // aria-errormessage (surfaced when aria-invalid is true).
     "aria-describedby": mergeIds(
       childProps?.["aria-describedby"],
-      helperId
+      helperId,
+      feedbackId
     ),
     "aria-errormessage": mergeIds(
       childProps?.["aria-errormessage"],
       errorId
     ),
     "aria-required": required ? true : childProps?.["aria-required"],
-    "aria-invalid": error ? true : childProps?.["aria-invalid"]
+    "aria-invalid": validationStatus === "error" ? true : childProps?.["aria-invalid"]
   }) : children;
   const style = {};
   if (labelWidth != null)
@@ -125,7 +138,11 @@ function FormField({
                   },
                   children: /* @__PURE__ */ jsxs("span", { children: [
                     label,
-                    required && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "ui-form-field-required", children: "*" })
+                    !required && form?.requiredMark === "optional" && /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+                      " ",
+                      t("dataEntry.form.optional")
+                    ] }),
+                    required && form?.requiredMark !== false && form?.requiredMark !== "optional" && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "ui-form-field-required", children: "*" })
                   ] })
                 }
               )
@@ -134,7 +151,25 @@ function FormField({
           labelAddon
         ] }),
         /* @__PURE__ */ jsxs("div", { "data-slot": "form-field-control", className: "ui-form-field-control", children: [
-          isStatic ? childWithA11y : /* @__PURE__ */ jsx(FieldNameContext.Provider, { value: fieldNameContext, children: /* @__PURE__ */ jsx(FieldIdentityContext.Provider, { value: fieldIdentityContext, children: childWithA11y }) }),
+          isStatic ? childWithA11y : /* @__PURE__ */ jsx(FieldNameContext.Provider, { value: fieldNameContext, children: /* @__PURE__ */ jsx(FieldIdentityContext.Provider, { value: fieldIdentityContext, children: /* @__PURE__ */ jsx(
+            "fieldset",
+            {
+              role: "presentation",
+              className: "contents",
+              disabled: form?.disabled && childProps?.disabled !== false,
+              children: childWithA11y
+            }
+          ) }) }),
+          hasFeedback && validationStatus ? /* @__PURE__ */ jsxs("span", { id: feedbackId, role: "status", className: "ui-inline-xs text-xs", children: [
+            feedback ?? /* @__PURE__ */ jsx(
+              FeedbackIcon,
+              {
+                "aria-hidden": "true",
+                className: validationStatus === "validating" ? `${controlIconClass} motion-safe:animate-spin` : controlIconClass
+              }
+            ),
+            t(`dataEntry.form.${validationStatus}`)
+          ] }) : null,
           helper ? /* @__PURE__ */ jsx("p", { id: helperId, className: "text-muted-foreground text-xs", children: helper }) : null,
           error ? /* @__PURE__ */ jsx("p", { id: errorId, role: "alert", className: "text-destructive text-xs", children: error }) : null
         ] })

package/dist/components/data-entry/form.d.ts

@@ -4,6 +4,8 @@ export type { FormProp, FormProp as FormProps } from "../../props/components/dat
 /** Resolved layout settings shared from a Form down to its FormFields (override per field). */
 export interface FormLayoutContextValue {
     layout: FormLayoutProp;
+    disabled?: boolean;
+    requiredMark?: boolean | "optional";
     labelWidth?: WidthProp;
     controlWidth?: WidthProp;
     labelAlign: "start" | "end";
@@ -17,6 +19,8 @@ export declare function useFormLayout(): FormLayoutContextValue | null;
  * inside it.
  */
 export declare const Form: React.ForwardRefExoticComponent<React.FormHTMLAttributes<HTMLFormElement> & {
+    disabled?: boolean;
+    requiredMark?: boolean | "optional";
     layout?: FormLayoutProp;
     labelWidth?: WidthProp;
     controlWidth?: WidthProp;

package/dist/components/data-entry/form.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import { Slot } from "@radix-ui/react-slot";
+import { Slot } from "../../lib/slot.js";
 import * as React from "react";
 import { cn } from "../../lib/utils.js";
 import { FormErrorsProvider } from "./form-errors.js";
@@ -11,6 +11,8 @@ function useFormLayout() {
 }
 const Form = React.forwardRef(function Form2({
   layout = "vertical",
+  disabled,
+  requiredMark,
   labelWidth,
   controlWidth,
   labelAlign = "end",
@@ -24,8 +26,8 @@ const Form = React.forwardRef(function Form2({
   ...props
 }, ref) {
   const ctx = React.useMemo(
-    () => ({ layout, labelWidth, controlWidth, labelAlign, collapseBelow }),
-    [layout, labelWidth, controlWidth, labelAlign, collapseBelow]
+    () => ({ layout, labelWidth, controlWidth, labelAlign, collapseBelow, disabled, requiredMark }),
+    [layout, labelWidth, controlWidth, labelAlign, collapseBelow, disabled, requiredMark]
   );
   const content = columns != null ? /* @__PURE__ */ jsx(ResponsiveGrid, { columns, children }) : children;
   const withRegistry = (node) => errors !== void 0 ? /* @__PURE__ */ jsx(FormErrorsProvider, { errors, children: node }) : node;