@multiplatform.one/forms 6.4.1 → 6.4.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiplatform.one/forms",
-  "version": "6.4.1",
+  "version": "6.4.2",
   "description": "Cross-platform form components with URL state management",
   "keywords": [
     "cross-platform",
@@ -69,9 +69,9 @@
     "perfect-freehand": "^1.2.3",
     "react-native-svg": "15.15.4",
     "tamagui": "2.0.0-rc.41",
-    "@multiplatform.one/router": "6.4.1",
-    "@multiplatform.one/table-primitives": "6.4.1",
-    "@multiplatform.one/theme": "6.4.1"
+    "@multiplatform.one/router": "6.4.2",
+    "@multiplatform.one/theme": "6.4.2",
+    "@multiplatform.one/table-primitives": "6.4.2"
   },
   "devDependencies": {
     "@tamagui/build": "2.0.0-rc.41",
@@ -92,9 +92,9 @@
     "react-i18next": "^16.6.6",
     "react-native-web": "^0.21.2",
     "vitest": "^4.1.5",
-    "@multiplatform.one/config": "6.4.1",
-    "@multiplatform.one/storybook": "6.4.1",
-    "@multiplatform.one/test-utils": "6.4.1"
+    "@multiplatform.one/storybook": "6.4.2",
+    "@multiplatform.one/test-utils": "6.4.2",
+    "@multiplatform.one/config": "6.4.2"
   },
   "peerDependencies": {
     "expo-maps": "*",

package/src/Wheel/index.tsx

@@ -596,7 +596,7 @@ export function Wheel<T = string | number>({
     <WheelContainer
       height={containerHeight}
       opacity={disabled ? 0.5 : 1}
-      {...knobProps.borderRadius}
+      {...knobProps.containerRadius}
       data-testid="wheel"
     >
       {/* Selection indicator */}

package/src/fields/DatePicker/DatetimePicker.tsx

@@ -7,6 +7,7 @@ import {
 } from "@multiplatform.one/theme";
 import { type ComponentProps, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { coerceToDate } from "./utils";
+import { DatePickerFieldValueSync } from "./fieldValueSync";
 import { Calendar, X } from "@tamagui/lucide-icons-2";
 import { AnimatePresence, Text, View, useProps, type Popover } from "tamagui";
 
@@ -794,26 +795,31 @@ export function DatetimePicker<
         const resolvedError = getFieldError(field, errorProp);
 
         return (
-          <FieldLayout
-            id={id}
-            label={label}
-            labelProps={labelProps}
-            error={resolvedError}
-            helperText={helperText}
-            required={required}
-            size={size}
-            knobProps={knobProps}
-            // LC-40: see standalone branch — FieldLayout carries dimWhole.
-            disabled={disabled}
-          >
-            <InputParts size={size || knobProps.sizeToken}>
-              {renderPopover(
-                !!resolvedError,
-                mergeFieldHandler(field, "handleBlur", _onBlur),
-                mergeFieldHandler(field, "handleChange"),
-              )}
-            </InputParts>
-          </FieldLayout>
+          <>
+            {/* Form branch displays from `selectedDatetime` — keep it synced
+                to the live field value (late seeds / programmatic updates). */}
+            <DatePickerFieldValueSync value={field.state.value} onSync={setSelectedDatetime} />
+            <FieldLayout
+              id={id}
+              label={label}
+              labelProps={labelProps}
+              error={resolvedError}
+              helperText={helperText}
+              required={required}
+              size={size}
+              knobProps={knobProps}
+              // LC-40: see standalone branch — FieldLayout carries dimWhole.
+              disabled={disabled}
+            >
+              <InputParts size={size || knobProps.sizeToken}>
+                {renderPopover(
+                  !!resolvedError,
+                  mergeFieldHandler(field, "handleBlur", _onBlur),
+                  mergeFieldHandler(field, "handleChange"),
+                )}
+              </InputParts>
+            </FieldLayout>
+          </>
         );
       }}
     </Field>

package/src/fields/DatePicker/fieldValueSync.tsx

@@ -0,0 +1,34 @@
+import type { Dispatch, SetStateAction } from "react";
+import { useEffect } from "react";
+import { coerceToDate } from "./utils";
+
+/**
+ * Mirrors the TanStack field value into a picker's display state
+ * (`selectedDate` / `selectedDatetime`). Without it the form branch only
+ * ever showed the mount-time value, so a value applied AFTER first paint
+ * (create-mode engine seeding, form.setFieldValue, live server merge) never
+ * rendered. Display-only: never calls onChange/onValueChange (LC-14 — a
+ * programmatic value application is not a user edit). Rendered inside the
+ * Field render prop, which re-renders on field state changes (hooks cannot
+ * live in the render prop itself — same extraction as Stepper/PhoneInput
+ * renderers).
+ */
+export function DatePickerFieldValueSync({
+  value,
+  onSync,
+}: {
+  value: unknown;
+  onSync: Dispatch<SetStateAction<Date | null>>;
+}) {
+  useEffect(() => {
+    const next = coerceToDate(value);
+    // Keep the previous Date identity when the instant is unchanged so the
+    // sync never churns downstream effects (close-on-select watches state).
+    onSync((prev) =>
+      prev === next || (prev !== null && next !== null && prev.getTime() === next.getTime())
+        ? prev
+        : next,
+    );
+  }, [value, onSync]);
+  return null;
+}

package/src/fields/DatePicker/index.tsx

@@ -1,14 +1,7 @@
 import type { DeepKeys, DeepValue } from "@tanstack/form-core";
 import { useAccentOnSurface, useResolvedKnobs } from "@multiplatform.one/theme";
-import {
-  type ComponentProps,
-  type Dispatch,
-  type SetStateAction,
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-} from "react";
+import { type ComponentProps, useCallback, useEffect, useRef, useState } from "react";
+import { DatePickerFieldValueSync } from "./fieldValueSync";
 import { coerceToDate } from "./utils";
 import { AnimatePresence, type Popover, View, useProps } from "tamagui";
 
@@ -254,40 +247,6 @@ function CalendarBody({
   );
 }
 
-// ---------------------------------------------------------------------------
-// FieldValueSync — form-integrated display sync
-// ---------------------------------------------------------------------------
-
-/**
- * Mirrors the TanStack field value into the picker's display state
- * (`selectedDate`). Without it the form branch only ever showed the
- * mount-time value, so a value applied AFTER first paint (create-mode
- * engine seeding, form.setFieldValue, live server merge) never rendered.
- * Display-only: never calls onChange/onValueChange (LC-14 — a programmatic
- * value application is not a user edit). Rendered inside the Field render
- * prop, which re-renders on field state changes (hooks cannot live in the
- * render prop itself — same extraction as Stepper/PhoneInput renderers).
- */
-function DatePickerFieldValueSync({
-  value,
-  onSync,
-}: {
-  value: unknown;
-  onSync: Dispatch<SetStateAction<Date | null>>;
-}) {
-  useEffect(() => {
-    const next = coerceToDate(value);
-    // Keep the previous Date identity when the instant is unchanged so the
-    // sync never churns downstream effects (close-on-select watches state).
-    onSync((prev) =>
-      prev === next || (prev !== null && next !== null && prev.getTime() === next.getTime())
-        ? prev
-        : next,
-    );
-  }, [value, onSync]);
-  return null;
-}
-
 // ---------------------------------------------------------------------------
 // DatePicker — main exported component
 // ---------------------------------------------------------------------------

package/src/fields/RadioGroup/index.tsx

@@ -16,7 +16,7 @@ import {
 import { getSize } from "@tamagui/get-token";
 import { Skeleton } from "../../Skeleton";
 import { Field, FieldLayout } from "../../fieldLayout";
-import { formControlColors } from "../../shared/colorRamps";
+import { formControlColors, formSelectedColors } from "../../shared/colorRamps";
 import {
   getElevationWrapperProps,
   getFieldError,
@@ -284,7 +284,10 @@ export function RadioGroup({
       >
         <RadioIndicatorFrame
           borderRadius={indicatorRadius}
-          backgroundColor={knobProps.textAccentColor}
+          // LC-05: the dot is the selection mark, so it paints the active
+          // accent — `textAccentColor` is the LABEL ink tier ($color/$color11)
+          // and made the checked radio read as ink, not as chosen (D-01).
+          backgroundColor={formSelectedColors.mark}
           {...(knobProps.transition ? { animation: knobProps.transition } : undefined)}
         />
       </RadioGlyph>

package/src/fields/Rating/index.tsx

@@ -8,6 +8,7 @@ import { getVariable, isWeb, styled, useTheme, View, XStack } from "tamagui";
 import Svg, { Path } from "react-native-svg";
 import { Skeleton } from "../../Skeleton";
 import { Field, FieldLayout } from "../../fieldLayout";
+import { formSelectedColors } from "../../shared/colorRamps";
 import { t } from "../../shared/t";
 import {
   getFieldError,
@@ -304,9 +305,16 @@ export function Rating({
   const resolvedValidators = useResolvedValidators(required, validators, label, name);
   const filledStars = useMemo(() => Math.round(value * maxStars), [value, maxStars]);
 
-  // Resolve color tokens to actual CSS values for Phosphor icons
+  // Resolve color tokens to actual CSS values for Phosphor icons.
+  // LC-05: the FILLED star is the selection mark, so it resolves the shared
+  // accent mark token — it painted `$color10`, a muted neutral that made a
+  // 3-star rating read as disabled chrome rather than as a chosen value
+  // (D-01). The empty star stays neutral: it marks nothing.
   const theme = useTheme();
-  const filledColor = getVariable(theme.color10?.get("web") ?? theme.color?.get("web"));
+  const markToken = formSelectedColors.mark.slice(1);
+  const filledColor = getVariable(
+    (theme as any)[markToken]?.get("web") ?? theme.color10?.get("web") ?? theme.color?.get("web"),
+  );
   const emptyColor = getVariable(theme.color7?.get("web") ?? theme.color?.get("web"));
 
   const handleStarPress = (

package/src/shared/colorRamps.ts

@@ -51,13 +51,28 @@ export const formControlColors = {
   },
 } as const;
 
+/**
+ * Selected/checked MARK channel (LC-05 ONE-EMPHASIS).
+ *
+ * Every choice control in the field family marks its selection with the ACTIVE
+ * ACCENT — the radio dot, the filled rating star and the checked Switch track
+ * all resolve here — so a user learns one meaning for the accent instead of
+ * decoding a per-control dialect. Ink marks selection nowhere (D-01).
+ * Marks are non-text chrome, so the floor they must clear is the 3:1
+ * graphical-object tier, not the 4.5:1 text tier; text placed ON this fill
+ * takes `useReadableTextOn` rather than an assumed anchor.
+ */
+export const formSelectedColors = {
+  mark: "$accentBackground",
+} as const;
+
 // Bento switch polarity: accent track when on, light thumb. Separate from
 // formControlColors.thumb, which Slider still uses with inverted polarity.
 // Checked state uses the accent solid so on/off reads at a glance and
 // matches the accent CTAs on the same screen (SB-D-19).
 export const formSwitchColors = {
   track: {
-    on: "$accentBackground",
+    on: formSelectedColors.mark,
     off: "$color5",
   },
   thumb: "$color1",