@multiplatform.one/forms 6.6.0 → 7.0.0

package/src/fields/TextArea/TextArea.stories.tsx

@@ -95,7 +95,8 @@ export const Standalone: Story = {
   args: {
     label: "Description",
     placeholder: "Enter description...",
-    helperText: "Up to 500 characters",
+    helperText: "Include any access instructions",
+    maxLength: 500,
     disabled: false,
     required: false,
     size: "$3",
@@ -129,6 +130,15 @@ export const WithError: Story = {
   },
 };
 
+export const ReadOnly: Story = {
+  args: {
+    label: "Published notes",
+    defaultValue: "These notes are locked after publish.",
+    readOnly: true,
+    helperText: "Read-only — still focusable",
+  },
+};
+
 export const Sizes: Story = {
   render: () => (
     <YStack gap="$4" maxWidth={400}>

package/src/fields/TextArea/index.tsx

@@ -52,7 +52,7 @@ export interface TextAreaProps {
   renderOverlay?: () => ReactNode;
   /** When true, renders a skeleton placeholder instead of the textarea */
   skeleton?: boolean;
-  /** When true, uses compact sizing */
+  /** When true, applies compact density (tighter layout gaps; control size unchanged) */
   compact?: boolean;
 }
 
@@ -78,7 +78,7 @@ export function TextArea({
   textAreaProps,
   numberOfLines,
   maxLength,
-  showCount = false,
+  showCount,
   autoResize = false,
   minRows = 3,
   maxRows = 10,
@@ -92,6 +92,7 @@ export function TextArea({
   const resolvedValidators = useResolvedValidators(required, validators, label, name);
   const theme = useTheme();
   const [charCount, setCharCount] = useState(() => (value ?? defaultValue ?? "").length);
+  const [countLive, setCountLive] = useState(false);
 
   const internalRef = useRef<any>(null);
   const textAreaRef = textAreaRefProp ? (textAreaRefProp as RefObject<any>) : internalRef;
@@ -100,6 +101,10 @@ export function TextArea({
   const resolvedSizeToken = (size || knobProps.sizeToken) as SizeTokens;
   const minHeightPx = getFieldHeight(resolvedSizeToken, minRows || 3);
   const maxHeightPx = getFieldHeight(resolvedSizeToken, maxRows);
+  // Polaris/GOV.UK: a declared limit always surfaces a live count. Explicit
+  // `showCount={false}` ejects.
+  const showCharacterCount = showCount ?? maxLength != null;
+  const countId = showCharacterCount && id ? `${id}-count` : undefined;
 
   const measureAndResize = useCallback(() => {
     if (!autoResize || !isWeb) return;
@@ -132,22 +137,47 @@ export function TextArea({
   if (skeleton) {
     return (
       <InputParts size={size || knobProps.sizeToken}>
-        {label && <Skeleton variant="text" width="30%" height={14} />}
+        {label && <Skeleton variant="text" width="30%" />}
         <Skeleton variant="rounded" width="100%" height={minHeightPx} />
       </InputParts>
     );
   }
 
   const renderCount = (length: number) => {
-    if (!showCount) return null;
-    const isOverLimit = maxLength != null && length > maxLength;
-    const text = maxLength != null ? `${length}/${maxLength}` : `${length} characters`;
+    if (!showCharacterCount) return null;
+    const safeLength = Math.max(0, length);
+    const remaining = maxLength != null ? maxLength - safeLength : undefined;
+    const isOverLimit = remaining != null && remaining < 0;
+    const text = maxLength != null ? `${safeLength}/${maxLength}` : `${safeLength} characters`;
+    const countLabel =
+      maxLength == null
+        ? `${safeLength} characters`
+        : isOverLimit
+          ? `${Math.abs(remaining ?? 0)} over the ${maxLength} character limit`
+          : `${Math.max(0, remaining ?? 0)} remaining of ${maxLength}`;
     return (
       <XStack
         justifyContent={countPosition.endsWith("right") ? "flex-end" : "flex-start"}
-        {...(countPosition.startsWith("top") ? { marginBottom: "$2" } : { marginTop: "$2" })}
+        pointerEvents="none"
+        {...(countPosition.startsWith("top")
+          ? { marginBottom: "$2" }
+          : {
+              position: "absolute",
+              left: 0,
+              right: 0,
+              bottom: 0,
+              paddingHorizontal: "$3",
+              paddingBottom: "$2",
+            })}
       >
-        <Paragraph size="$2" color={isOverLimit ? formCommonColors.error : formCommonColors.muted}>
+        <Paragraph
+          {...(countId ? { id: countId } : undefined)}
+          size="$2"
+          color={isOverLimit ? formCommonColors.error : formCommonColors.muted}
+          aria-label={countLabel}
+          aria-live={countLive ? "polite" : "off"}
+          aria-atomic="true"
+        >
           {text}
         </Paragraph>
       </XStack>
@@ -155,6 +185,7 @@ export function TextArea({
   };
 
   const cappedRadius = clampRadiusForLargeComponent(knobProps.borderRadius.borderRadius);
+  const countInside = showCharacterCount && countPosition.startsWith("bottom");
 
   const resizeStyle = autoResize
     ? {
@@ -186,11 +217,15 @@ export function TextArea({
     hasError?: boolean,
   ) => (
     <>
-      {showCount && countPosition.startsWith("top") && renderCount(countFrom(textValue))}
-      <YStack position="relative">
+      {showCharacterCount && countPosition.startsWith("top") && renderCount(countFrom(textValue))}
+      <YStack position="relative" width="100%">
         <InputParts.Box
           height="auto"
+          width="100%"
+          alignItems="stretch"
           borderRadius={cappedRadius}
+          cursor={disabled ? "not-allowed" : "text"}
+          theme={hasError ? "red" : undefined}
           // LC-40: Box owns the disabled chrome wash (value text stays >= AA);
           // the old 0.5 whole-box dim dropped text under the floor.
           disabled={disabled}
@@ -208,23 +243,40 @@ export function TextArea({
             {...textAreaProps}
             {...(isWeb
               ? {
-                  outlineWidth: 0,
-                  focusStyle: { outlineWidth: 0 },
-                  focusVisibleStyle: { outlineWidth: 0 },
+                  // Polaris multiline: no native resize (Box clips it). Primer
+                  // vertical resize is the autoResize=false fallback only when
+                  // the host does not clip — we keep none so LC-71 inset ring
+                  // and overflow:hidden stay intact.
+                  style: {
+                    resize: "none",
+                    overflowWrap: "anywhere",
+                    ...(typeof (textAreaProps as { style?: object } | undefined)?.style === "object"
+                      ? (textAreaProps as { style?: object }).style
+                      : undefined),
+                  },
+                  ...(countInside ? { paddingBottom: "$5" } : undefined),
                 }
-              : undefined)}
-            placeholderTextColor={theme.color7?.val ?? "$color7"}
+              : countInside
+                ? { paddingBottom: "$5" }
+                : undefined)}
+            placeholderTextColor={theme.placeholderColor?.val ?? formCommonColors.muted}
             {...(maxLength != null ? { maxLength } : undefined)}
             {...(placeholder !== undefined ? { placeholder } : undefined)}
             disabled={disabled}
-            readOnly={!!readOnly || !!disabled}
+            readOnly={!!readOnly}
             {...(disabled ? { cursor: "not-allowed" as const } : undefined)}
             {...(readOnly ? { "aria-readonly": true } : undefined)}
             aria-required={required || undefined}
             aria-invalid={hasError || undefined}
+            aria-multiline="true"
+            {...(countId ? { "aria-describedby": countId } : undefined)}
             id={id}
             {...(isControlled ? { value: textValue } : { defaultValue: textValue })}
             onChange={onChange}
+            onFocus={(e: any) => {
+              setCountLive(true);
+              (textAreaProps as { onFocus?: (ev: any) => void } | undefined)?.onFocus?.(e);
+            }}
             onChangeText={(text) => {
               if (disabled || readOnly) return;
               setCharCount(text.length);
@@ -235,12 +287,16 @@ export function TextArea({
             {...(autoResize && !isWeb
               ? { onContentSizeChange: handleContentSizeChange }
               : undefined)}
-            {...(handleBlur ? { onBlur: handleBlur } : undefined)}
+            onBlur={(e: any) => {
+              setCountLive(false);
+              handleBlur?.(e);
+              (textAreaProps as { onBlur?: (ev: any) => void } | undefined)?.onBlur?.(e);
+            }}
           />
         </InputParts.Box>
+        {countInside && renderCount(countFrom(textValue))}
         {renderOverlay?.()}
       </YStack>
-      {showCount && countPosition.startsWith("bottom") && renderCount(countFrom(textValue))}
     </>
   );
 
@@ -260,7 +316,7 @@ export function TextArea({
         // the sibling label/helper readable) — it needs the disabled state.
         disabled={disabled}
       >
-        <InputParts size={size || knobProps.sizeToken}>
+        <InputParts size={size || knobProps.sizeToken} {...(error ? { theme: "red" } : undefined)}>
           {renderTextArea(value ?? defaultValue, undefined, undefined, !!error)}
         </InputParts>
       </FieldLayout>
@@ -290,7 +346,10 @@ export function TextArea({
             // LC-40: see standalone branch — FieldLayout carries dimWhole.
             disabled={disabled}
           >
-            <InputParts size={size || knobProps.sizeToken}>
+            <InputParts
+              size={size || knobProps.sizeToken}
+              {...(resolvedError ? { theme: "red" } : undefined)}
+            >
               {renderTextArea(
                 field.state.value as string,
                 (text) => field.handleChange(text as any),

package/src/fields/TimePicker/TimePicker.spec.tsx

@@ -1,9 +1,27 @@
+import { act, fireEvent, waitFor } from "@testing-library/react";
 import { describe, expect, it, vi } from "vitest";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
 import { Form } from "../../Form";
 import { TimePicker } from "./index";
+import { to12Hour, to24Hour } from "./parts";
+
+vi.mock("@tamagui/lucide-icons-2", () => ({
+  Clock: () => null,
+  X: () => null,
+}));
 
 describe("TimePicker", () => {
+  describe("time math", () => {
+    it("converts 12 AM/PM without dropping noon or midnight", () => {
+      expect(to24Hour(12, "AM")).toBe(0);
+      expect(to24Hour(12, "PM")).toBe(12);
+      expect(to24Hour(1, "PM")).toBe(13);
+      expect(to12Hour(0)).toEqual({ h: 12, period: "AM" });
+      expect(to12Hour(12)).toEqual({ h: 12, period: "PM" });
+      expect(to12Hour(14)).toEqual({ h: 2, period: "PM" });
+    });
+  });
+
   describe("without form context", () => {
     it("renders with label and placeholder", () => {
       const result = renderWithProviders(
@@ -53,6 +71,54 @@ describe("TimePicker", () => {
       const input = result.container.querySelector("input");
       expect(input?.getAttribute("value")).toContain("2:30");
     });
+
+    it("does not invent a time for invalid values", () => {
+      const result = renderWithProviders(
+        <TimePicker label="Time" name="t" value="25:99" timeFormat="12h" />,
+      );
+      const input = result.container.querySelector("input");
+      expect(input?.getAttribute("value")).toBe("");
+      expect(result.findTextElement("Invalid time value")).toBeDefined();
+    });
+
+    it("keeps the LC-71 ring on the outer box, not the inner field", () => {
+      const result = renderWithProviders(
+        <TimePicker label="Time" name="t" value="14:30" timeFormat="12h" />,
+      );
+      const input = result.container.querySelector("input");
+      expect(input?.className).toContain("mp-input-area");
+      const box = result.container.querySelector(".mp-composite-ring");
+      expect(box).toBeTruthy();
+      expect(box?.contains(input)).toBe(true);
+    });
+
+    it("opens the clock dial and flips AM/PM at noon", async () => {
+      const onChange = vi.fn();
+      const result = renderWithProviders(
+        <TimePicker label="Time" name="t" value="12:30" timeFormat="12h" onChange={onChange} />,
+      );
+      const trigger = result.container.querySelector("input,button,[role='button']");
+      expect(trigger).toBeTruthy();
+      await act(async () => {
+        if (trigger) {
+          fireEvent.mouseDown(trigger);
+          fireEvent.click(trigger);
+        }
+      });
+      await waitFor(() => {
+        expect(document.querySelector('[data-testid="time-picker-dial"]')).toBeTruthy();
+      });
+      const am = Array.from(document.querySelectorAll('[role="radio"]')).find(
+        (el) => el.textContent === "AM",
+      );
+      expect(am).toBeTruthy();
+      await act(async () => {
+        if (am) fireEvent.click(am);
+      });
+      await waitFor(() => {
+        expect(onChange).toHaveBeenCalledWith("00:30");
+      });
+    });
   });
 
   describe("with form context", () => {

package/src/fields/TimePicker/TimePicker.stories.tsx

@@ -1,6 +1,5 @@
 import { action } from "@multiplatform.one/storybook";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
-import { ClockIcon } from "@phosphor-icons/react";
 import { useForm } from "@tanstack/react-form";
 import { useState } from "react";
 import { Text, YStack } from "tamagui";
@@ -14,7 +13,8 @@ const meta: Meta<typeof TimePicker> = {
   parameters: {
     docs: {
       description: {
-        component: "A time picker with scrollable hour/minute columns and optional AM/PM toggle.",
+        component:
+          "A time picker with a Material 3 clock dial, digital hour/minute segments, and AM/PM fill toggle.",
       },
     },
   },
@@ -57,8 +57,8 @@ export const Main: Story = {
       return (
         <Form form={form} maxWidth={400}>
           <YStack gap="$4">
-            <TimePicker label="Start Time" name="startTime" clockIcon={<ClockIcon size={16} />} />
-            <TimePicker label="End Time" name="endTime" clockIcon={<ClockIcon size={16} />} />
+            <TimePicker label="Start Time" name="startTime" />
+            <TimePicker label="End Time" name="endTime" />
             <Button action="submit">Save Schedule</Button>
           </YStack>
         </Form>
@@ -77,7 +77,6 @@ export const Standalone: Story = {
     minuteStep: 5,
     showSeconds: false,
   },
-  render: (args) => <TimePicker {...args} clockIcon={<ClockIcon size={16} />} />,
 };
 
 export const Basic: Story = {
@@ -87,7 +86,6 @@ export const Basic: Story = {
     value: "09:30",
     onChange: action("onChange"),
   },
-  render: (args) => <TimePicker {...args} clockIcon={<ClockIcon size={16} />} />,
 };
 
 export const Disabled: Story = {
@@ -98,7 +96,6 @@ export const Disabled: Story = {
     disabled: true,
     onChange: action("onChange"),
   },
-  render: (args) => <TimePicker {...args} clockIcon={<ClockIcon size={16} />} />,
 };
 
 export const WithError: Story = {
@@ -109,36 +106,17 @@ export const WithError: Story = {
     error: "Time is required",
     onChange: action("onChange"),
   },
-  render: (args) => <TimePicker {...args} clockIcon={<ClockIcon size={16} />} />,
 };
 
 export const Sizes: Story = {
   render: () => (
     <YStack gap="$4" maxWidth={300}>
       <Text fontWeight="bold">Size $2</Text>
-      <TimePicker
-        label="Small"
-        value="09:30"
-        size="$2"
-        clockIcon={<ClockIcon size={16} />}
-        onChange={action("onChange")}
-      />
+      <TimePicker label="Small" value="09:30" size="$2" onChange={action("onChange")} />
       <Text fontWeight="bold">Size $3</Text>
-      <TimePicker
-        label="Medium"
-        value="09:30"
-        size="$3"
-        clockIcon={<ClockIcon size={16} />}
-        onChange={action("onChange")}
-      />
+      <TimePicker label="Medium" value="09:30" size="$3" onChange={action("onChange")} />
       <Text fontWeight="bold">Size $4</Text>
-      <TimePicker
-        label="Large"
-        value="09:30"
-        size="$4"
-        clockIcon={<ClockIcon size={16} />}
-        onChange={action("onChange")}
-      />
+      <TimePicker label="Large" value="09:30" size="$4" onChange={action("onChange")} />
     </YStack>
   ),
 };
@@ -151,7 +129,6 @@ export const WithSeconds: Story = {
     showSeconds: true,
     onChange: action("onChange"),
   },
-  render: (args) => <TimePicker {...args} clockIcon={<ClockIcon size={16} />} />,
 };
 
 export const TwelveHour: Story = {
@@ -161,7 +138,6 @@ export const TwelveHour: Story = {
     value: "14:30",
     onChange: action("onChange"),
   },
-  render: (args) => <TimePicker {...args} clockIcon={<ClockIcon size={16} />} />,
 };
 
 export const TwentyFourHour: Story = {
@@ -172,7 +148,6 @@ export const TwentyFourHour: Story = {
     timeFormat: "24h",
     onChange: action("onChange"),
   },
-  render: (args) => <TimePicker {...args} clockIcon={<ClockIcon size={16} />} />,
 };
 
 export const OneMinuteStep: Story = {
@@ -183,7 +158,6 @@ export const OneMinuteStep: Story = {
     minuteStep: 1,
     onChange: action("onChange"),
   },
-  render: (args) => <TimePicker {...args} clockIcon={<ClockIcon size={16} />} />,
 };
 
 export const Interactive: Story = {
@@ -200,7 +174,6 @@ export const Interactive: Story = {
               setValue(v);
               action("onChange")(v);
             }}
-            clockIcon={<ClockIcon size={16} />}
           />
           <TimePicker
             label="24h Format"
@@ -210,9 +183,8 @@ export const Interactive: Story = {
               setValue(v);
               action("onChange")(v);
             }}
-            clockIcon={<ClockIcon size={16} />}
           />
-          <TimePicker label="Disabled" value="17:00" disabled clockIcon={<ClockIcon size={16} />} />
+          <TimePicker label="Disabled" value="17:00" disabled />
         </YStack>
       );
     };
@@ -223,5 +195,4 @@ export const Interactive: Story = {
 /** Loading placeholder — the skeleton mirrors the field's anatomy (LC-20 / DG-ST-02). */
 export const SkeletonState: Story = {
   args: { label: "Start Time", skeleton: true },
-  render: (args) => <TimePicker {...args} clockIcon={<ClockIcon size={16} />} />,
 };