@nori-ui/core 1.0.6 → 1.1.0

package/dist/client.cjs

@@ -68,8 +68,8 @@ var defaultDictionary = {
   // floatButton
   "floatButton.backToTop": "Back to top",
   // calendar
-  "calendar.header.previous": "Previous",
-  "calendar.header.next": "Next",
+  "calendar.header.previous": "Previous month",
+  "calendar.header.next": "Next month",
   "calendar.header.openMonthView": "Open month picker",
   "calendar.header.openYearView": "Open year picker",
   "calendar.header.openDayView": "Open day picker",
@@ -85,7 +85,10 @@ var defaultDictionary = {
   "checkbox.checked": "Checked",
   "checkbox.unchecked": "Unchecked",
   "switch.on": "On",
-  "switch.off": "Off"
+  "switch.off": "Off",
+  // field
+  "field.requiredIndicator": "*",
+  "field.requiredLabel": "required"
 };
 
 // src/i18n/resolve.ts
@@ -3697,6 +3700,13 @@ var Button = /* @__PURE__ */ __name(({
   );
 }, "Button");
 
+// src/components/Calendar/scroll/ScrollBody.tsx
+var ScrollBody = /* @__PURE__ */ __name((_props) => {
+  throw new Error(
+    "[Calendar] ScrollBody: no platform implementation resolved. Ensure your bundler honors *.web.tsx / *.native.tsx extensions."
+  );
+}, "ScrollBody");
+
 // src/components/Calendar/state/locale-utils.ts
 var getFirstDayOfWeek = /* @__PURE__ */ __name((locale) => {
   try {
@@ -4058,9 +4068,15 @@ var Select = /* @__PURE__ */ __name((props) => {
     itemHeight = DEFAULT_ITEM_HEIGHT,
     maxMenuHeight = DEFAULT_MAX_MENU,
     className,
-    testID
+    testID,
+    id,
+    name
   } = props;
   const ariaLabel = props["aria-label"];
+  const ariaLabelledBy = props["aria-labelledby"];
+  const ariaDescribedBy = props["aria-describedby"];
+  const ariaInvalid = props["aria-invalid"];
+  const ariaRequired = props["aria-required"];
   const multiple = props.multiple === true;
   const maxSelected = multiple ? props.maxSelected : void 0;
   const maxChips = multiple ? props.maxChips ?? 3 : void 0;
@@ -4424,11 +4440,11 @@ var Select = /* @__PURE__ */ __name((props) => {
     if (!open || searchable || reactNative.Platform.OS !== "web") {
       return;
     }
-    const id = requestAnimationFrame(() => {
+    const id2 = requestAnimationFrame(() => {
       const node = popupRef.current;
       node?.focus?.();
     });
-    return () => cancelAnimationFrame(id);
+    return () => cancelAnimationFrame(id2);
   }, [open, searchable]);
   const onListScroll = React.useCallback(
     (event) => {
@@ -4505,7 +4521,13 @@ var Select = /* @__PURE__ */ __name((props) => {
           "aria-controls": `${baseId}-listbox`,
           "aria-haspopup": "listbox",
           tabIndex: disabled ? -1 : 0,
+          ...id !== void 0 ? { id, nativeID: id } : {},
+          ...name !== void 0 ? { name } : {},
           ...ariaLabel !== void 0 ? { "aria-label": ariaLabel, accessibilityLabel: ariaLabel } : {},
+          ...ariaLabelledBy !== void 0 ? { "aria-labelledby": ariaLabelledBy, accessibilityLabelledBy: ariaLabelledBy } : {},
+          ...ariaDescribedBy !== void 0 ? { "aria-describedby": ariaDescribedBy, accessibilityDescribedBy: ariaDescribedBy } : {},
+          ...ariaInvalid === true ? { "aria-invalid": true } : {},
+          ...ariaRequired === true ? { "aria-required": true } : {},
           ...disabled ? { "aria-disabled": true, disabled: true } : {}
         },
         onPress: () => {
@@ -5179,7 +5201,7 @@ var Caption = /* @__PURE__ */ __name(({
         alignSelf: "center"
       },
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(NavButton, { label: t("calendar.header.previous", { defaultValue: "Previous" }), onPress: onPrev, children: "\u2039" }),
+        /* @__PURE__ */ jsxRuntime.jsx(NavButton, { label: t("calendar.header.previous", { defaultValue: "Previous month" }), onPress: onPrev, children: "\u2039" }),
         /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: { flexDirection: "row", gap: monthGap, width: titleRowWidth }, children: showMultiTitles ? months.map((m, i) => /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: { width: gridWidth, alignItems: "center" }, children: caption === "dropdown" && view === "day" ? /* @__PURE__ */ jsxRuntime.jsx(
           DropdownPair,
           {
@@ -5225,7 +5247,7 @@ var Caption = /* @__PURE__ */ __name(({
             drilldown: true
           }
         ) }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(NavButton, { label: t("calendar.header.next", { defaultValue: "Next" }), onPress: onNext, children: "\u203A" })
+        /* @__PURE__ */ jsxRuntime.jsx(NavButton, { label: t("calendar.header.next", { defaultValue: "Next month" }), onPress: onNext, children: "\u203A" })
       ]
     }
   );
@@ -5268,8 +5290,53 @@ var DropdownPair = /* @__PURE__ */ __name(({ month, year, monthOptions, yearOpti
   ] });
 }, "DropdownPair");
 var CELL_SIZE = 40;
-var DayCell = /* @__PURE__ */ __name(({ ctx, onPress, onHoverIn, onHoverOut, renderDay }) => {
+var formatterCache = /* @__PURE__ */ new Map();
+var RUNTIME_DEFAULT_LOCALE_KEY = "__default__";
+var getDayFormatter = /* @__PURE__ */ __name((locale) => {
+  const key = locale ?? RUNTIME_DEFAULT_LOCALE_KEY;
+  const cached2 = formatterCache.get(key);
+  if (cached2) {
+    return cached2;
+  }
+  try {
+    const fmt = new Intl.DateTimeFormat(locale, {
+      weekday: "long",
+      month: "long",
+      day: "numeric",
+      year: "numeric",
+      timeZone: "UTC"
+    });
+    formatterCache.set(key, fmt);
+    return fmt;
+  } catch {
+    return null;
+  }
+}, "getDayFormatter");
+var formatDayLabel = /* @__PURE__ */ __name((ctx, locale) => {
+  const jsDate = new Date(Date.UTC(ctx.date.year, ctx.date.month - 1, ctx.date.day));
+  const fmt = getDayFormatter(locale);
+  const base = fmt ? fmt.format(jsDate) : (
+    // Fallback if the runtime rejects the locale tag.
+    `${ctx.date.month}/${ctx.date.day}/${ctx.date.year}`
+  );
+  const suffixes = [];
+  if (ctx.isToday) {
+    suffixes.push("today");
+  }
+  if (ctx.isSelected || ctx.isRangeStart || ctx.isRangeEnd) {
+    suffixes.push("selected");
+  }
+  if (ctx.isInRange && !ctx.isRangeStart && !ctx.isRangeEnd) {
+    suffixes.push("in range");
+  }
+  if (ctx.isUnavailable) {
+    suffixes.push("unavailable");
+  }
+  return suffixes.length > 0 ? `${base}, ${suffixes.join(", ")}` : base;
+}, "formatDayLabel");
+var DayCell = /* @__PURE__ */ __name(({ ctx, onPress, onHoverIn, onHoverOut, renderDay, locale }) => {
   const colors = useThemeColors();
+  const accessibilityLabel = formatDayLabel(ctx, locale);
   const isSelectedLike = ctx.isSelected || ctx.isRangeStart || ctx.isRangeEnd;
   const isInsideRange = ctx.isInRange || ctx.isInPreviewRange;
   const isRangeMiddle = isInsideRange && !isSelectedLike;
@@ -5278,7 +5345,8 @@ var DayCell = /* @__PURE__ */ __name(({ ctx, onPress, onHoverIn, onHoverOut, ren
     reactNative.Pressable,
     {
       accessibilityRole: "button",
-      accessibilityState: { disabled: ctx.isUnavailable },
+      accessibilityLabel,
+      accessibilityState: { disabled: ctx.isUnavailable, selected: isSelectedLike },
       disabled: ctx.isUnavailable,
       onPress,
       ...onHoverIn ? { onHoverIn } : {},
@@ -5536,6 +5604,7 @@ var DayGrid = /* @__PURE__ */ __name((props) => {
               DayCell,
               {
                 ctx,
+                locale,
                 onPress: () => onDayPress(date),
                 ...onDayHover ? {
                   onHoverIn: /* @__PURE__ */ __name(() => onDayHover(date), "onHoverIn"),
@@ -5698,6 +5767,9 @@ var focusDayCell = /* @__PURE__ */ __name((root, date, force) => {
   if (!root) {
     return;
   }
+  if (typeof document === "undefined" || typeof root.contains !== "function") {
+    return;
+  }
   if (!force && !root.contains(document.activeElement)) {
     return;
   }
@@ -5802,8 +5874,13 @@ var SingleOrMultiCalendar = /* @__PURE__ */ __name((props) => {
   const colors = useThemeColors();
   const firstDayOfWeek = props.firstDayOfWeek ?? getFirstDayOfWeek(locale);
   const weekendDays = props.weekendDays ?? getWeekendDays(locale);
-  const visibleMonths = pickVisibleMonths(props.visibleMonths, containerWidth);
+  const visibleMonths = props.behavior === "scroll" ? 1 : pickVisibleMonths(props.visibleMonths, containerWidth);
   const { innerWidth, gridsRowWidth } = surfaceMetrics(visibleMonths);
+  React.useEffect(() => {
+    if (process.env.NODE_ENV !== "production" && props.behavior === "scroll" && typeof props.visibleMonths === "number" && props.visibleMonths > 1) {
+      console.warn('[Calendar] visibleMonths is ignored when behavior="scroll"; falling back to single column.');
+    }
+  }, [props.behavior, props.visibleMonths]);
   const containerRef = React.useRef(null);
   const state = useCalendarState({
     ...props.mode !== void 0 ? { mode: props.mode } : {},
@@ -5866,6 +5943,8 @@ var SingleOrMultiCalendar = /* @__PURE__ */ __name((props) => {
       setAnchor((a) => a.add({ years: -10 }));
     } else if (state.view === "month") {
       setAnchor((a) => a.add({ years: -1 }));
+    } else if (props.behavior === "scroll") {
+      state.moveFocus({ months: -1 });
     } else {
       setAnchor((a) => a.add({ months: -1 }));
     }
@@ -5875,6 +5954,8 @@ var SingleOrMultiCalendar = /* @__PURE__ */ __name((props) => {
       setAnchor((a) => a.add({ years: 10 }));
     } else if (state.view === "month") {
       setAnchor((a) => a.add({ years: 1 }));
+    } else if (props.behavior === "scroll") {
+      state.moveFocus({ months: 1 });
     } else {
       setAnchor((a) => a.add({ months: 1 }));
     }
@@ -5937,22 +6018,44 @@ var SingleOrMultiCalendar = /* @__PURE__ */ __name((props) => {
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsxs(FadeIn, { children: [
-          state.view === "day" && /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: { flexDirection: "row", gap: MONTH_GAP, alignSelf: "center", width: gridsRowWidth }, children: months.map((m) => /* @__PURE__ */ jsxRuntime.jsx(
-            DayGrid,
+          state.view === "day" && (props.behavior === "scroll" ? /* @__PURE__ */ jsxRuntime.jsx(
+            ScrollBody,
             {
-              visibleMonth: m,
-              locale,
               mode: props.mode ?? "single",
-              value: state.value,
+              locale,
               focusedDate: state.focusedDate,
-              isUnavailable: state.isUnavailable,
-              weekendDays,
+              onFocusedMonthChange: (next) => setAnchor(next),
+              value: state.value,
+              onSelectDate: (date) => state.selectDate(date, "click"),
               firstDayOfWeek,
-              onDayPress: (date) => state.selectDate(date, "click"),
+              weekendDays,
+              ...props.minValue !== void 0 ? { minValue: props.minValue } : {},
+              ...props.maxValue !== void 0 ? { maxValue: props.maxValue } : {},
+              ...props.isDateUnavailable !== void 0 ? { isDateUnavailable: props.isDateUnavailable } : {},
               ...renderDay ? { renderDay } : {}
-            },
-            `${m.year}-${m.month}`
-          )) }),
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx(
+            reactNative.View,
+            {
+              style: { flexDirection: "row", gap: MONTH_GAP, alignSelf: "center", width: gridsRowWidth },
+              children: months.map((m) => /* @__PURE__ */ jsxRuntime.jsx(
+                DayGrid,
+                {
+                  visibleMonth: m,
+                  locale,
+                  mode: props.mode ?? "single",
+                  value: state.value,
+                  focusedDate: state.focusedDate,
+                  isUnavailable: state.isUnavailable,
+                  weekendDays,
+                  firstDayOfWeek,
+                  onDayPress: (date) => state.selectDate(date, "click"),
+                  ...renderDay ? { renderDay } : {}
+                },
+                `${m.year}-${m.month}`
+              ))
+            }
+          )),
           state.view === "month" && /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: { alignItems: "center" }, children: /* @__PURE__ */ jsxRuntime.jsx(
             MonthGrid,
             {
@@ -5987,8 +6090,13 @@ var RangeCalendar = /* @__PURE__ */ __name((props) => {
   const colors = useThemeColors();
   const firstDayOfWeek = props.firstDayOfWeek ?? getFirstDayOfWeek(locale);
   const weekendDays = props.weekendDays ?? getWeekendDays(locale);
-  const visibleMonths = pickVisibleMonths(props.visibleMonths, containerWidth);
+  const visibleMonths = props.behavior === "scroll" ? 1 : pickVisibleMonths(props.visibleMonths, containerWidth);
   const { innerWidth, gridsRowWidth } = surfaceMetrics(visibleMonths);
+  React.useEffect(() => {
+    if (process.env.NODE_ENV !== "production" && props.behavior === "scroll" && typeof props.visibleMonths === "number" && props.visibleMonths > 1) {
+      console.warn('[Calendar] visibleMonths is ignored when behavior="scroll"; falling back to single column.');
+    }
+  }, [props.behavior, props.visibleMonths]);
   const containerRef = React.useRef(null);
   const range2 = useRangeState({
     ...props.value !== void 0 ? { value: props.value } : {},
@@ -6066,6 +6174,8 @@ var RangeCalendar = /* @__PURE__ */ __name((props) => {
       setAnchor((a) => a.add({ years: -10 }));
     } else if (view === "month") {
       setAnchor((a) => a.add({ years: -1 }));
+    } else if (props.behavior === "scroll") {
+      setFocusedDate((f) => f.add({ months: -1 }));
     } else {
       setAnchor((a) => a.add({ months: -1 }));
     }
@@ -6075,6 +6185,8 @@ var RangeCalendar = /* @__PURE__ */ __name((props) => {
       setAnchor((a) => a.add({ years: 10 }));
     } else if (view === "month") {
       setAnchor((a) => a.add({ years: 1 }));
+    } else if (props.behavior === "scroll") {
+      setFocusedDate((f) => f.add({ months: 1 }));
     } else {
       setAnchor((a) => a.add({ months: 1 }));
     }
@@ -6145,24 +6257,47 @@ var RangeCalendar = /* @__PURE__ */ __name((props) => {
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsxs(FadeIn, { children: [
-          view === "day" && /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: { flexDirection: "row", gap: MONTH_GAP, alignSelf: "center", width: gridsRowWidth }, children: months.map((m) => /* @__PURE__ */ jsxRuntime.jsx(
-            DayGrid,
+          view === "day" && (props.behavior === "scroll" ? /* @__PURE__ */ jsxRuntime.jsx(
+            ScrollBody,
             {
-              visibleMonth: m,
-              locale,
               mode: "range",
+              locale,
+              focusedDate,
+              onFocusedMonthChange: (next) => setAnchor(next),
               value: range2.value,
               previewRange: range2.previewRange,
-              focusedDate,
-              isUnavailable: range2.isUnavailable,
-              weekendDays,
+              onSelectDate: (date) => range2.selectDate(date),
               firstDayOfWeek,
-              onDayPress: (date) => range2.selectDate(date),
-              onDayHover: (date) => range2.setHoveredDate(date),
+              weekendDays,
+              ...props.minValue !== void 0 ? { minValue: props.minValue } : {},
+              ...props.maxValue !== void 0 ? { maxValue: props.maxValue } : {},
+              ...props.isDateUnavailable !== void 0 ? { isDateUnavailable: props.isDateUnavailable } : {},
               ...renderDay ? { renderDay } : {}
-            },
-            `${m.year}-${m.month}`
-          )) }),
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx(
+            reactNative.View,
+            {
+              style: { flexDirection: "row", gap: MONTH_GAP, alignSelf: "center", width: gridsRowWidth },
+              children: months.map((m) => /* @__PURE__ */ jsxRuntime.jsx(
+                DayGrid,
+                {
+                  visibleMonth: m,
+                  locale,
+                  mode: "range",
+                  value: range2.value,
+                  previewRange: range2.previewRange,
+                  focusedDate,
+                  isUnavailable: range2.isUnavailable,
+                  weekendDays,
+                  firstDayOfWeek,
+                  onDayPress: (date) => range2.selectDate(date),
+                  onDayHover: (date) => range2.setHoveredDate(date),
+                  ...renderDay ? { renderDay } : {}
+                },
+                `${m.year}-${m.month}`
+              ))
+            }
+          )),
           view === "month" && /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: { alignItems: "center" }, children: /* @__PURE__ */ jsxRuntime.jsx(
             MonthGrid,
             {
@@ -6350,7 +6485,15 @@ var Checkbox = /* @__PURE__ */ __name(({
   className,
   testID,
   asChild,
-  children
+  children,
+  id,
+  name,
+  "aria-labelledby": ariaLabelledBy,
+  accessibilityLabelledBy,
+  "aria-describedby": ariaDescribedBy,
+  accessibilityDescribedBy,
+  "aria-invalid": ariaInvalid,
+  "aria-required": ariaRequired
 }) => {
   const colors = useThemeColors();
   const [inner, setInner] = React.useState(defaultChecked);
@@ -6378,6 +6521,13 @@ var Checkbox = /* @__PURE__ */ __name(({
     accessibilityState: { checked: value, disabled: Boolean(disabled) },
     testID
   };
+  if (id !== void 0) {
+    commonProps.id = id;
+    commonProps.nativeID = id;
+  }
+  if (name !== void 0) {
+    commonProps.name = name;
+  }
   if (disabled) {
     commonProps["aria-disabled"] = true;
   }
@@ -6385,6 +6535,26 @@ var Checkbox = /* @__PURE__ */ __name(({
     commonProps["aria-label"] = label;
     commonProps.accessibilityLabel = label;
   }
+  if (ariaLabelledBy !== void 0) {
+    commonProps["aria-labelledby"] = ariaLabelledBy;
+    commonProps.accessibilityLabelledBy = ariaLabelledBy;
+  }
+  if (accessibilityLabelledBy !== void 0) {
+    commonProps.accessibilityLabelledBy = accessibilityLabelledBy;
+  }
+  if (ariaDescribedBy !== void 0) {
+    commonProps["aria-describedby"] = ariaDescribedBy;
+    commonProps.accessibilityDescribedBy = ariaDescribedBy;
+  }
+  if (accessibilityDescribedBy !== void 0) {
+    commonProps.accessibilityDescribedBy = accessibilityDescribedBy;
+  }
+  if (ariaInvalid) {
+    commonProps["aria-invalid"] = true;
+  }
+  if (ariaRequired) {
+    commonProps["aria-required"] = true;
+  }
   if (asChild) {
     const slotProps = {
       role: "checkbox",
@@ -6853,6 +7023,279 @@ var Dialog = Object.assign(DialogRoot, {
   Footer: DialogFooter,
   Close: DialogClose
 });
+var FieldContext = React.createContext(null);
+var useFieldContextStrict = /* @__PURE__ */ __name((caller) => {
+  const ctx = React.useContext(FieldContext);
+  if (!ctx) {
+    throw new Error(`[Field] ${caller} must be used inside <Field> or <Field.Group>.`);
+  }
+  return ctx;
+}, "useFieldContextStrict");
+var childHasDisplayName = /* @__PURE__ */ __name((child, name) => {
+  if (!React.isValidElement(child)) {
+    return false;
+  }
+  const t = child.type;
+  return typeof t !== "string" && t?.displayName === name;
+}, "childHasDisplayName");
+var COMPOUND_DISPLAY_NAMES = ["Field.Label", "Field.Description", "Field.Error", "Field.Control"];
+var isCompoundChild = /* @__PURE__ */ __name((child) => COMPOUND_DISPLAY_NAMES.some((name) => childHasDisplayName(child, name)), "isCompoundChild");
+var FieldRoot = /* @__PURE__ */ __name(({
+  name,
+  required = false,
+  disabled = false,
+  error = null,
+  label,
+  description,
+  validating = false,
+  orientation = "vertical",
+  id,
+  children,
+  className,
+  testID,
+  isGroup = false
+}) => {
+  const colors = useThemeColors();
+  const reactId = React.useId();
+  const fieldId = id ?? `nori-ui-field-${reactId}`;
+  const labelId = `${fieldId}-label`;
+  const descriptionId = `${fieldId}-desc`;
+  const errorId = `${fieldId}-error`;
+  const isCompoundMode = React.useMemo(() => {
+    let found = false;
+    React.Children.forEach(children, (child) => {
+      if (isCompoundChild(child)) {
+        found = true;
+      }
+    });
+    return found;
+  }, [children]);
+  const hasDescription = React.useMemo(() => {
+    if (!isCompoundMode) {
+      return description !== void 0 && description !== null && description !== false && description !== "";
+    }
+    let found = false;
+    React.Children.forEach(children, (child) => {
+      if (childHasDisplayName(child, "Field.Description")) {
+        found = true;
+      }
+    });
+    return found;
+  }, [isCompoundMode, description, children]);
+  const hasError = React.useMemo(() => {
+    if (!isCompoundMode) {
+      return Boolean(error);
+    }
+    let found = false;
+    React.Children.forEach(children, (child) => {
+      if (childHasDisplayName(child, "Field.Error") && React.isValidElement(child)) {
+        const el = child;
+        if (el.props.children !== void 0 && el.props.children !== null && el.props.children !== false && el.props.children !== "") {
+          found = true;
+        }
+      }
+    });
+    if (!found && error !== null && error !== void 0 && error !== false && error !== "") {
+      found = true;
+    }
+    return found;
+  }, [isCompoundMode, error, children]);
+  const describedBy = React.useMemo(() => {
+    const ids = [];
+    if (hasDescription) {
+      ids.push(descriptionId);
+    }
+    if (hasError) {
+      ids.push(errorId);
+    }
+    return ids.length === 0 ? void 0 : ids.join(" ");
+  }, [hasDescription, hasError, descriptionId, errorId]);
+  const value = {
+    fieldId,
+    labelId,
+    descriptionId,
+    errorId,
+    hasError,
+    hasDescription,
+    describedBy,
+    disabled,
+    required,
+    validating,
+    ...name !== void 0 ? { name } : {},
+    // In compound mode pass `error` (string) so Field.Error can fall back to it.
+    // In shorthand mode the error prop may be ReactNode; only pass when it is a string/null.
+    ...error !== null && error !== void 0 && typeof error === "string" ? { error } : {},
+    isGroup
+  };
+  const warnedRef = React.useRef(false);
+  React.useEffect(() => {
+    if (process.env.NODE_ENV === "production" || warnedRef.current) {
+      return;
+    }
+    const hasShorthand = label !== void 0 || description !== void 0 || error !== void 0;
+    if (hasShorthand && isCompoundMode) {
+      warnedRef.current = true;
+      console.warn(
+        "[Field] Mixing shorthand props (label/description/error) with compound children (Field.Label/Field.Description/Field.Error) is not supported. The compound children will win. To suppress this warning, use only one mode."
+      );
+    }
+  }, [label, description, error, isCompoundMode]);
+  const containerStyle = orientation === "horizontal" ? {
+    flexDirection: "row",
+    alignItems: "flex-start",
+    gap: px(colors.spacing["3"])
+  } : { flexDirection: "column", gap: px(colors.spacing["1"]) };
+  const containerExtra = {};
+  if (testID !== void 0) {
+    containerExtra.testID = testID;
+  }
+  containerExtra["data-orientation"] = orientation;
+  if (isGroup) {
+    containerExtra.role = "group";
+    containerExtra["aria-labelledby"] = labelId;
+    containerExtra.accessibilityRole = "none";
+  }
+  if (validating) {
+    containerExtra["data-validating"] = "";
+    containerExtra["aria-busy"] = true;
+  }
+  const renderShorthand = /* @__PURE__ */ __name(() => {
+    const childArray = React.Children.toArray(children);
+    const controlChild = childArray.length === 1 && React.isValidElement(childArray[0]) ? childArray[0] : null;
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      label !== void 0 && label !== null && label !== false ? /* @__PURE__ */ jsxRuntime.jsx(FieldLabel, { children: label }) : null,
+      description !== void 0 && description !== null && description !== false && description !== "" ? /* @__PURE__ */ jsxRuntime.jsx(FieldDescription, { children: description }) : null,
+      controlChild !== null ? /* @__PURE__ */ jsxRuntime.jsx(FieldControl, { children: controlChild }) : children,
+      error !== void 0 && error !== null && error !== false && error !== "" ? /* @__PURE__ */ jsxRuntime.jsx(FieldError, { children: error }) : null
+    ] });
+  }, "renderShorthand");
+  return /* @__PURE__ */ jsxRuntime.jsx(FieldContext.Provider, { value, children: /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: containerStyle, ...className !== void 0 ? { className } : {}, ...containerExtra, children: [
+    isCompoundMode ? children : renderShorthand(),
+    validating ? /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: "sm" }) : null
+  ] }) });
+}, "FieldRoot");
+var FieldLabel = /* @__PURE__ */ __name(({ children }) => {
+  const ctx = useFieldContextStrict("Field.Label");
+  const colors = useThemeColors();
+  const { t } = useTranslation();
+  const requiredIndicator = t("field.requiredIndicator");
+  const requiredLabel = t("field.requiredLabel");
+  const focusInput = /* @__PURE__ */ __name(() => {
+    if (typeof document !== "undefined") {
+      const el = document.getElementById(ctx.fieldId);
+      if (el && typeof el.focus === "function") {
+        el.focus();
+      }
+    }
+  }, "focusInput");
+  return /* @__PURE__ */ jsxRuntime.jsx(reactNative.Pressable, { onPress: focusInput, accessibilityRole: "none", disabled: ctx.disabled, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    reactNative.Text,
+    {
+      nativeID: ctx.labelId,
+      ...{ id: ctx.labelId },
+      accessibilityRole: "text",
+      style: {
+        fontFamily: colors.fontFamily.body,
+        fontSize: px(colors.fontSize.sm),
+        fontWeight: colors.fontWeight.medium,
+        color: ctx.disabled ? colors.semantic.text.muted : colors.semantic.text.default
+      },
+      children: [
+        children,
+        ctx.required ? /* @__PURE__ */ jsxRuntime.jsx(
+          reactNative.Text,
+          {
+            accessibilityLabel: requiredLabel,
+            ...{ "aria-label": requiredLabel },
+            style: { color: colors.color.danger },
+            children: ` ${requiredIndicator}`
+          }
+        ) : null
+      ]
+    }
+  ) });
+}, "FieldLabel");
+FieldLabel.displayName = "Field.Label";
+var FieldControl = /* @__PURE__ */ __name(({ children }) => {
+  const ctx = useFieldContextStrict("Field.Control");
+  if (React.Children.count(children) !== 1 || !React.isValidElement(children)) {
+    throw new Error("[Field.Control] expects exactly one child element.");
+  }
+  const child = children;
+  const merged = {
+    id: child.props.id ?? ctx.fieldId,
+    accessibilityLabelledBy: ctx.labelId,
+    "aria-labelledby": ctx.labelId
+  };
+  if (ctx.name !== void 0 && child.props.name === void 0) {
+    merged.name = ctx.name;
+  }
+  if (ctx.describedBy !== void 0) {
+    merged["aria-describedby"] = ctx.describedBy;
+    merged.accessibilityDescribedBy = ctx.describedBy;
+  }
+  if (ctx.hasError) {
+    merged["aria-invalid"] = true;
+  }
+  if (ctx.required) {
+    merged["aria-required"] = true;
+  }
+  if (ctx.disabled || child.props.disabled) {
+    merged.disabled = true;
+  }
+  return React.cloneElement(child, merged);
+}, "FieldControl");
+FieldControl.displayName = "Field.Control";
+var FieldDescription = /* @__PURE__ */ __name(({ children }) => {
+  const ctx = useFieldContextStrict("Field.Description");
+  const colors = useThemeColors();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.Text,
+    {
+      nativeID: ctx.descriptionId,
+      ...{ id: ctx.descriptionId },
+      style: {
+        fontFamily: colors.fontFamily.body,
+        fontSize: px(colors.fontSize.sm),
+        color: colors.semantic.text.muted
+      },
+      children
+    }
+  );
+}, "FieldDescription");
+FieldDescription.displayName = "Field.Description";
+var FieldError = /* @__PURE__ */ __name(({ children }) => {
+  const ctx = useFieldContextStrict("Field.Error");
+  const colors = useThemeColors();
+  const content = children ?? ctx.error;
+  if (content === null || content === void 0 || content === "" || content === false) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.Text,
+    {
+      nativeID: ctx.errorId,
+      ...{ id: ctx.errorId, role: "alert" },
+      accessibilityRole: "text",
+      style: {
+        fontFamily: colors.fontFamily.body,
+        fontSize: px(colors.fontSize.sm),
+        color: colors.color.danger
+      },
+      children: content
+    }
+  );
+}, "FieldError");
+FieldError.displayName = "Field.Error";
+var FieldGroup = /* @__PURE__ */ __name((props) => /* @__PURE__ */ jsxRuntime.jsx(FieldRoot, { ...props, isGroup: true }), "FieldGroup");
+FieldGroup.displayName = "Field.Group";
+var Field = Object.assign(FieldRoot, {
+  Label: FieldLabel,
+  Description: FieldDescription,
+  Control: FieldControl,
+  Error: FieldError,
+  Group: FieldGroup
+});
 var isDev = process.env.NODE_ENV !== "production";
 var SafeAreaInsetsContext = /* @__PURE__ */ React__namespace.createContext(null);
 if (isDev) {
@@ -7863,6 +8306,55 @@ var InputGroup = Object.assign(InputGroupRoot, {
   Addon: InputGroupAddon,
   Input: InputGroupInput
 });
+var Label = /* @__PURE__ */ __name(({ htmlFor, required = false, disabled = false, children, className, testID }) => {
+  const colors = useThemeColors();
+  const { t } = useTranslation();
+  const requiredIndicator = t("field.requiredIndicator");
+  const requiredLabel = t("field.requiredLabel");
+  const focusTarget = /* @__PURE__ */ __name(() => {
+    if (typeof document !== "undefined") {
+      const el = document.getElementById(htmlFor);
+      if (el && typeof el.focus === "function") {
+        el.focus();
+      }
+    }
+  }, "focusTarget");
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.Pressable,
+    {
+      onPress: focusTarget,
+      accessibilityRole: "none",
+      disabled,
+      ...testID !== void 0 ? { testID } : {},
+      ...className !== void 0 ? { className } : {},
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        reactNative.Text,
+        {
+          ...{ htmlFor },
+          accessibilityRole: "text",
+          style: {
+            fontFamily: colors.fontFamily.body,
+            fontSize: px(colors.fontSize.sm),
+            fontWeight: colors.fontWeight.medium,
+            color: disabled ? colors.semantic.text.muted : colors.semantic.text.default
+          },
+          children: [
+            children,
+            required ? /* @__PURE__ */ jsxRuntime.jsx(
+              reactNative.Text,
+              {
+                accessibilityLabel: requiredLabel,
+                ...{ "aria-label": requiredLabel },
+                style: { color: colors.color.danger },
+                children: ` ${requiredIndicator}`
+              }
+            ) : null
+          ]
+        }
+      )
+    }
+  );
+}, "Label");
 var range = /* @__PURE__ */ __name((from, to) => {
   if (to < from) {
     return [];
@@ -9009,7 +9501,15 @@ var RadioGroup = /* @__PURE__ */ __name(({
   name,
   children,
   className,
-  testID
+  testID,
+  id,
+  nativeID,
+  "aria-labelledby": ariaLabelledBy,
+  accessibilityLabelledBy,
+  "aria-describedby": ariaDescribedBy,
+  accessibilityDescribedBy,
+  "aria-invalid": ariaInvalid,
+  "aria-required": ariaRequired
 }) => {
   const [inner, setInner] = React.useState(defaultValue2);
   const isControlled = value !== void 0;
@@ -9111,7 +9611,15 @@ var RadioGroup = /* @__PURE__ */ __name(({
     "aria-orientation": orientation,
     "aria-disabled": disabled || void 0,
     onKeyDown: handleKeyDown,
-    ...testID !== void 0 ? { testID } : {}
+    ...testID !== void 0 ? { testID } : {},
+    ...id !== void 0 ? { id } : {},
+    ...nativeID !== void 0 ? { nativeID } : {},
+    ...ariaLabelledBy !== void 0 ? { "aria-labelledby": ariaLabelledBy } : {},
+    ...accessibilityLabelledBy !== void 0 ? { accessibilityLabelledBy } : {},
+    ...ariaDescribedBy !== void 0 ? { "aria-describedby": ariaDescribedBy } : {},
+    ...accessibilityDescribedBy !== void 0 ? { accessibilityDescribedBy } : {},
+    ...ariaInvalid ? { "aria-invalid": true } : {},
+    ...ariaRequired ? { "aria-required": true } : {}
   };
   return /* @__PURE__ */ jsxRuntime.jsx(RadioGroupContext.Provider, { value: ctxValue, children: /* @__PURE__ */ jsxRuntime.jsx(
     RadioGroupViewport,
@@ -10057,7 +10565,15 @@ var Switch = /* @__PURE__ */ __name(({
   className,
   testID,
   asChild,
-  children
+  children,
+  id,
+  name,
+  "aria-labelledby": ariaLabelledBy,
+  accessibilityLabelledBy,
+  "aria-describedby": ariaDescribedBy,
+  accessibilityDescribedBy,
+  "aria-invalid": ariaInvalid,
+  "aria-required": ariaRequired
 }) => {
   const colors = useThemeColors();
   const [inner, setInner] = React.useState(defaultChecked);
@@ -10082,6 +10598,13 @@ var Switch = /* @__PURE__ */ __name(({
     accessibilityState: { checked: value, disabled: Boolean(disabled) },
     testID
   };
+  if (id !== void 0) {
+    commonProps.id = id;
+    commonProps.nativeID = id;
+  }
+  if (name !== void 0) {
+    commonProps.name = name;
+  }
   if (disabled) {
     commonProps["aria-disabled"] = true;
   }
@@ -10089,6 +10612,26 @@ var Switch = /* @__PURE__ */ __name(({
     commonProps["aria-label"] = label;
     commonProps.accessibilityLabel = label;
   }
+  if (ariaLabelledBy !== void 0) {
+    commonProps["aria-labelledby"] = ariaLabelledBy;
+    commonProps.accessibilityLabelledBy = ariaLabelledBy;
+  }
+  if (accessibilityLabelledBy !== void 0) {
+    commonProps.accessibilityLabelledBy = accessibilityLabelledBy;
+  }
+  if (ariaDescribedBy !== void 0) {
+    commonProps["aria-describedby"] = ariaDescribedBy;
+    commonProps.accessibilityDescribedBy = ariaDescribedBy;
+  }
+  if (accessibilityDescribedBy !== void 0) {
+    commonProps.accessibilityDescribedBy = accessibilityDescribedBy;
+  }
+  if (ariaInvalid) {
+    commonProps["aria-invalid"] = true;
+  }
+  if (ariaRequired) {
+    commonProps["aria-required"] = true;
+  }
   if (asChild) {
     const slotProps = {
       role: "switch",
@@ -10455,7 +10998,6 @@ var Tabs = Object.assign(TabsRoot, {
   Trigger: TabsTrigger,
   Content: TabsContent
 });
-var CONTAINER_LAYOUT_BASE4 = { flexDirection: "column" };
 var FIELD_LAYOUT_BASE2 = {
   flexDirection: "row",
   alignItems: "center",
@@ -10466,42 +11008,33 @@ var FIELD_LAYOUT_BASE2 = {
   overflow: "hidden"
 };
 var TextInput = /* @__PURE__ */ __name(({
-  label,
-  helperText,
-  error,
   disabled,
   leading,
   trailing,
   containerClassName,
   className,
   testID,
+  id,
+  name,
   onChangeText,
   multiline,
   numberOfLines,
   ...rest
 }) => {
   const colors = useThemeColors();
-  const reactId = React.useId();
-  const inputId = testID ?? `nori-ui-input-${reactId}`;
   const inputRef = React.useRef(null);
-  const focusInput = /* @__PURE__ */ __name(() => {
-    inputRef.current?.focus();
-  }, "focusInput");
-  const describeId = `${inputId}-describe`;
-  const hasError = Boolean(error);
-  const describedBy = error || helperText ? describeId : void 0;
+  const restAny = rest;
+  const hasError = restAny["aria-invalid"] === true || restAny["aria-invalid"] === "true";
   const inputExtras = {};
   if (testID !== void 0) {
     inputExtras.testID = testID;
   }
-  if (label !== void 0) {
-    inputExtras.accessibilityLabel = label;
-  }
-  if (hasError) {
-    inputExtras["aria-invalid"] = true;
+  if (id !== void 0) {
+    inputExtras.id = id;
+    inputExtras.nativeID = id;
   }
-  if (describedBy !== void 0) {
-    inputExtras["aria-describedby"] = describedBy;
+  if (name !== void 0) {
+    inputExtras.name = name;
   }
   if (multiline !== void 0) {
     inputExtras.multiline = multiline;
@@ -10512,12 +11045,6 @@ var TextInput = /* @__PURE__ */ __name(({
   if (onChangeText !== void 0) {
     inputExtras.onChangeText = onChangeText;
   }
-  const labelStyle = {
-    fontFamily: colors.fontFamily.body,
-    fontSize: px(colors.fontSize.sm),
-    fontWeight: colors.fontWeight.medium,
-    color: colors.semantic.text.default
-  };
   const inputStyle = {
     flex: 1,
     paddingVertical: px(colors.spacing["2"]),
@@ -10525,17 +11052,6 @@ var TextInput = /* @__PURE__ */ __name(({
     fontSize: px(colors.fontSize.md),
     color: colors.semantic.text.default
   };
-  const helperStyle = {
-    fontFamily: colors.fontFamily.body,
-    fontSize: px(colors.fontSize.sm),
-    color: colors.semantic.text.muted
-  };
-  const errorStyle = {
-    fontFamily: colors.fontFamily.body,
-    fontSize: px(colors.fontSize.sm),
-    color: colors.color.danger
-  };
-  const containerStyle = { ...CONTAINER_LAYOUT_BASE4, gap: px(colors.spacing["1"]) };
   const fieldStyle = [
     FIELD_LAYOUT_BASE2,
     {
@@ -10546,55 +11062,33 @@ var TextInput = /* @__PURE__ */ __name(({
     },
     disabled ? { opacity: 0.6 } : null
   ];
-  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { className: cn("flex flex-col gap-1", containerClassName), style: containerStyle, children: [
-    label !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Pressable, { onPress: focusInput, accessibilityRole: "none", disabled, children: /* @__PURE__ */ jsxRuntime.jsx(
-      reactNative.Text,
-      {
-        nativeID: `${inputId}-label`,
-        accessibilityRole: "text",
-        className: "text-sm font-medium text-semantic-text-default",
-        style: labelStyle,
-        children: label
-      }
-    ) }) : null,
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      reactNative.View,
-      {
-        className: cn(
-          "flex-row items-center rounded-md border px-3",
-          hasError ? "border-semantic-interactive-destructive" : "border-semantic-border-default",
-          disabled ? "opacity-60" : void 0
+  return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { className: cn(containerClassName), style: { flexDirection: "column" }, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    reactNative.View,
+    {
+      className: cn(
+        "flex-row items-center rounded-md border px-3",
+        hasError ? "border-semantic-interactive-destructive" : "border-semantic-border-default",
+        disabled ? "opacity-60" : void 0
+      ),
+      style: fieldStyle,
+      children: [
+        leading ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { className: "mr-2", style: { marginRight: px(colors.spacing["2"]) }, children: leading }) : null,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          reactNative.TextInput,
+          {
+            ref: inputRef,
+            editable: !disabled,
+            className: cn("flex-1 py-2 text-md text-semantic-text-default outline-none", className),
+            placeholderTextColor: colors.semantic.text.muted,
+            ...inputExtras,
+            ...rest,
+            style: [inputStyle, rest.style]
+          }
         ),
-        style: fieldStyle,
-        children: [
-          leading ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { className: "mr-2", style: { marginRight: px(colors.spacing["2"]) }, children: leading }) : null,
-          /* @__PURE__ */ jsxRuntime.jsx(
-            reactNative.TextInput,
-            {
-              ref: inputRef,
-              nativeID: inputId,
-              editable: !disabled,
-              className: cn("flex-1 py-2 text-md text-semantic-text-default outline-none", className),
-              placeholderTextColor: colors.semantic.text.muted,
-              ...inputExtras,
-              ...rest,
-              style: [inputStyle, rest.style]
-            }
-          ),
-          trailing ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { className: "ml-2", style: { marginLeft: px(colors.spacing["2"]) }, children: trailing }) : null
-        ]
-      }
-    ),
-    error ? /* @__PURE__ */ jsxRuntime.jsx(
-      reactNative.Text,
-      {
-        nativeID: describeId,
-        className: "text-sm text-semantic-interactive-destructive",
-        style: errorStyle,
-        children: error
-      }
-    ) : helperText ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { nativeID: describeId, className: "text-sm text-semantic-text-muted", style: helperStyle, children: helperText }) : null
-  ] });
+        trailing ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { className: "ml-2", style: { marginLeft: px(colors.spacing["2"]) }, children: trailing }) : null
+      ]
+    }
+  ) });
 }, "TextInput");
 var TextArea = /* @__PURE__ */ __name(({ numberOfLines = 4, resize = "vertical", style, ...rest }) => {
   const resizeStyle = { resize };
@@ -11798,11 +12292,13 @@ exports.Calendar = Calendar;
 exports.Card = Card;
 exports.Checkbox = Checkbox;
 exports.Dialog = Dialog;
+exports.Field = Field;
 exports.FloatButton = FloatButton;
 exports.HStack = HStack;
 exports.I18nProvider = I18nProvider;
 exports.Icon = Icon;
 exports.InputGroup = InputGroup;
+exports.Label = Label;
 exports.LocaleProvider = LocaleProvider;
 exports.NoriProvider = NoriProvider;
 exports.PAGINATION_COMPACT_BREAKPOINT = PAGINATION_COMPACT_BREAKPOINT;