@multiplatform.one/forms 7.46.0 → 7.47.0

package/src/fields/Combobox/index.tsx

@@ -35,11 +35,12 @@ import {
   useGlyphColor,
   useResolvedKnobs,
   transitionProps,
+  Text as HouseText,
+  type TextProps as HouseTextProps,
 } from "@multiplatform.one/theme";
 import type { LabelProps, SizeTokens } from "tamagui";
 import { Pressable as RNPressable } from "react-native";
 import { Input as TInput, Text, View, XStack, YStack, isWeb, styled, useTheme } from "tamagui";
-import { Button } from "../../Button";
 import { Chip, type ChipProps } from "../../Chip";
 import { pickerTriggerContract } from "../../shared/pickerTriggerContract";
 import { Skeleton } from "../../Skeleton";
@@ -134,18 +135,22 @@ function useSelectedMarkColor(): string {
   return entry?.val ?? theme.color?.val ?? "currentColor";
 }
 
-const GroupHeader = styled(Text, {
-  name: "ComboboxGroupHeader",
-  paddingHorizontal: "$3",
-  paddingVertical: "$2",
-  paddingTop: "$3",
-  fontWeight: "600",
-  fontSize: "$2",
-  opacity: 0.6,
-  numberOfLines: 1,
-  userSelect: "none",
-  cursor: "default",
-});
+function GroupHeader(props: HouseTextProps) {
+  return (
+    <HouseText
+      paddingHorizontal="$3"
+      paddingVertical="$2"
+      paddingTop="$3"
+      fontWeight="600"
+      fontSize="$2"
+      opacity={0.6}
+      numberOfLines={1}
+      userSelect="none"
+      cursor="default"
+      {...props}
+    />
+  );
+}
 
 // ── Types ─────────────────────────────────────────────────────
 
@@ -1452,28 +1457,21 @@ function FloatingComboboxCore({
         )}
       </View>
       {clearable && !multiple && !disabled && typeof value === "string" && value !== "" && (
-        <Button
-          size={knobProps.control.height}
-          chromeless
-          {...pickerTriggerContract(knobProps.control.height)}
-          icon={<XIcon size={14} />}
-          alignSelf="center"
-          cursor="pointer"
+        <InputParts.Action
+          size={knobProps.sizeToken}
+          height={knobProps.control.height}
           tabIndex={-1}
-          aria-label={t("Clear")}
-          opacity={0.6}
-          hoverStyle={{ opacity: 1 }}
+          label={t("Clear")}
           // useClick opens on mousedown at the trigger — swallow it so
           // clearing never toggles the dropdown.
-          onMouseDown={(e: any) => {
+          onMouseDown={(e) => {
             e.stopPropagation();
             e.preventDefault();
           }}
-          onPress={(e: any) => {
-            e.stopPropagation?.();
-            onValueChange?.("");
-          }}
-        />
+          onPress={() => onValueChange?.("")}
+        >
+          <XIcon />
+        </InputParts.Action>
       )}
       <View paddingInlineEnd="$2" alignSelf="center">
         <CaretDownIcon size={16} color={glyphColor} />
@@ -1553,11 +1551,12 @@ function FloatingComboboxCore({
                       </InputParts.Section>
                     ) : filter ? (
                       <InputParts.Section>
-                        <InputParts.Button onPress={() => setInternalFilter("")}>
-                          <InputParts.Icon>
-                            <XIcon />
-                          </InputParts.Icon>
-                        </InputParts.Button>
+                        <InputParts.Action
+                          label={t("Clear search")}
+                          onPress={() => setInternalFilter("")}
+                        >
+                          <XIcon />
+                        </InputParts.Action>
                       </InputParts.Section>
                     ) : null}
                   </InputParts.Box>
@@ -2542,15 +2541,14 @@ function NativeComboboxCore({
       triggerSizing={triggerSizing}
       triggerEnd={
         clearable && !multiple && !disabled && typeof value === "string" && value !== "" ? (
-          <Button
+          <InputParts.Action
             size={knobProps.sizeToken}
-            chromeless
-            width={knobProps.control.height}
-            paddingHorizontal={0}
-            aria-label={t("Clear")}
-            icon={<XIcon size={14} />}
+            height={knobProps.control.height}
+            label={t("Clear")}
             onPress={() => onValueChange?.("")}
-          />
+          >
+            <XIcon />
+          </InputParts.Action>
         ) : undefined
       }
       triggerA11y={{

package/src/fields/DatePicker/Calendar.stories.tsx

@@ -1,8 +1,9 @@
 import { action } from "@multiplatform.one/storybook";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { useState } from "react";
-import { Text, YStack } from "tamagui";
+import { YStack } from "tamagui";
 import { Calendar } from "./Calendar";
+import { Text } from "@multiplatform.one/theme";
 
 const meta: Meta<typeof Calendar> = {
   title: "Forms/Calendar",

package/src/fields/DatePicker/Calendar.tsx

@@ -1,4 +1,4 @@
-import { transitionProps } from "@multiplatform.one/theme";
+import { edgeColorAt, transitionProps } from "@multiplatform.one/theme";
 import { useCallback, useMemo, useState } from "react";
 import { Separator, Text, View, XStack, YStack, useMedia } from "tamagui";
 
@@ -325,8 +325,7 @@ export function Calendar({
           alignSelf="center"
           width={px * 7}
           {...knobProps.borderRadius}
-          borderWidth={knobProps.borderRadius.borderWidth || 1}
-          borderColor={formCommonColors.divider}
+          borderColor={edgeColorAt(formCommonColors.divider, knobProps.borderWidthStop)}
           backgroundColor="$color3"
           padding={2}
         >
@@ -361,8 +360,8 @@ export function Calendar({
         {...knobProps.gap}
         {...knobProps.panelPadding}
         {...knobProps.borderRadiusNested}
-        borderWidth={knobProps.borderRadius.borderWidth || 1}
-        borderColor={formCommonColors.divider}
+        borderWidth={knobProps.borderRadius.borderWidth}
+        borderColor={edgeColorAt(formCommonColors.divider, knobProps.borderWidthStop)}
       >
         {!fullWidthMode && (
           <CalendarPanel

package/src/fields/DatePicker/DatePicker.spec.tsx

@@ -185,7 +185,7 @@ describe("DatePicker", () => {
       const result = renderWithProviders(<FormExample />);
 
       // Clear commits null via field.handleChange → onChange validator errors.
-      const clearButton = result.container.querySelector("button");
+      const clearButton = result.container.querySelector("[data-testid='date-picker-clear']");
       expect(clearButton).toBeTruthy();
       await act(async () => {
         if (clearButton) fireEvent.click(clearButton);
@@ -233,7 +233,7 @@ describe("DatePicker", () => {
       };
 
       const result = renderWithProviders(<FormExample />);
-      const clearButton = result.container.querySelector("button");
+      const clearButton = result.container.querySelector("[data-testid='date-picker-clear']");
       expect(clearButton).toBeTruthy();
       await act(async () => {
         if (clearButton) fireEvent.click(clearButton);

package/src/fields/DatePicker/DatePicker.stories.tsx

@@ -4,7 +4,7 @@ import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { useForm } from "@tanstack/react-form";
 import type { ComponentProps } from "react";
 import { useState } from "react";
-import { Text, YStack } from "tamagui";
+import { YStack } from "tamagui";
 import { Button } from "../../Button";
 import { Form } from "../../Form";
 import { Calendar } from "./Calendar";
@@ -13,6 +13,7 @@ import { DatetimePicker } from "./DatetimePicker";
 import { MonthPicker } from "./MonthPicker";
 import { MultiDatePicker } from "./MultiDatePicker";
 import { DatePicker } from "./index";
+import { Text } from "@multiplatform.one/theme";
 
 const meta: Meta<typeof DatePicker> = {
   title: "Forms/DatePicker",

package/src/fields/DatePicker/DateRangePicker.stories.tsx

@@ -3,10 +3,11 @@ import { DataTable, type DataTableColumn } from "@multiplatform.one/table";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { useForm } from "@tanstack/react-form";
 import { useState } from "react";
-import { Text, YStack } from "tamagui";
+import { YStack } from "tamagui";
 import { Button } from "../../Button";
 import { Form } from "../../Form";
 import { DateRangePicker } from "./DateRangePicker";
+import { Text } from "@multiplatform.one/theme";
 
 const meta: Meta<typeof DateRangePicker> = {
   title: "Forms/DateRangePicker",

package/src/fields/DatePicker/DatetimePicker.stories.tsx

@@ -3,10 +3,11 @@ import { DataTable, type DataTableColumn } from "@multiplatform.one/table";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { useForm } from "@tanstack/react-form";
 import { useState } from "react";
-import { Text, YStack } from "tamagui";
+import { YStack } from "tamagui";
 import { Button } from "../../Button";
 import { Form } from "../../Form";
 import { DatetimePicker } from "./DatetimePicker";
+import { Text } from "@multiplatform.one/theme";
 
 const meta: Meta<typeof DatetimePicker> = {
   title: "Forms/DatetimePicker",

package/src/fields/DatePicker/MonthPicker.stories.tsx

@@ -1,10 +1,11 @@
 import { action } from "@multiplatform.one/storybook";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { useForm } from "@tanstack/react-form";
-import { Text, YStack } from "tamagui";
+import { YStack } from "tamagui";
 import { Button } from "../../Button";
 import { Form } from "../../Form";
 import { MonthPicker } from "./MonthPicker";
+import { Text } from "@multiplatform.one/theme";
 
 const meta: Meta<typeof MonthPicker> = {
   title: "Forms/MonthPicker",

package/src/fields/DatePicker/MultiDatePicker.spec.tsx

@@ -103,7 +103,7 @@ describe("MultiDatePicker", () => {
       expect(input?.value).toContain(",");
     });
 
-    const iconButton = result.container.querySelector("button");
+    const iconButton = result.container.querySelector("[data-testid='date-picker-clear']");
     if (iconButton) {
       await act(async () => {
         fireEvent.click(iconButton);

package/src/fields/DatePicker/MultiDatePicker.stories.tsx

@@ -3,10 +3,11 @@ import { DataTable, type DataTableColumn } from "@multiplatform.one/table";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { useForm } from "@tanstack/react-form";
 import { useState } from "react";
-import { Text, YStack } from "tamagui";
+import { YStack } from "tamagui";
 import { Button } from "../../Button";
 import { Form } from "../../Form";
 import { MultiDatePicker } from "./MultiDatePicker";
+import { Text } from "@multiplatform.one/theme";
 
 const meta: Meta<typeof MultiDatePicker> = {
   title: "Forms/MultiDatePicker",

package/src/fields/DatePicker/parts.tsx

@@ -873,20 +873,16 @@ export function DatePickerClearButton({
   label?: string;
 }) {
   return (
-    <InputParts.Button
+    <InputParts.Action
       {...floatingPanelActionProps}
       data-testid="date-picker-clear"
-      aria-label={label ?? t("Clear date")}
+      label={label ?? t("Clear date")}
       disabled={disabled}
-      onPress={(e) => {
-        e.stopPropagation();
-        onReset();
-      }}
+      tabIndex={-1}
+      onPress={onReset}
     >
-      <InputParts.Icon>
-        <XIcon />
-      </InputParts.Icon>
-    </InputParts.Button>
+      <XIcon />
+    </InputParts.Action>
   );
 }
 

package/src/fields/Duration/Duration.spec.tsx

@@ -3,6 +3,7 @@ import { describe, expect, it, vi } from "vitest";
 import { sizeRecipeForToken } from "@multiplatform.one/theme";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
 import { Form } from "../../Form";
+import { Input } from "../Input";
 import { TableCellContext } from "../../shared/tableCellContext";
 import { getFieldHeight } from "../../shared/utils";
 import {
@@ -134,6 +135,29 @@ describe("Duration", () => {
   });
 
   describe("design law", () => {
+    it.each(["$2", "$3", "$4", "$6"] as const)(
+      "shares Input's centered adornment and chrome at %s",
+      (size) => {
+        const result = renderWithProviders(
+          <>
+            <Duration label="Duration" size={size} value={28800} />
+            <Input label="Reference" size={size} value="8 h 00 m" />
+          </>,
+        );
+        const box = result.container.querySelector("[data-duration-box]") as HTMLElement;
+        const reference = result.container.querySelectorAll("[data-mp-input-box]")[1];
+        const icon = box.querySelector("svg")?.parentElement;
+        expect(icon?.parentElement).toBe(box);
+        expect(getComputedStyle(box).alignItems).toBe("center");
+        for (const property of ["paddingLeft", "paddingRight", "boxShadow"] as const) {
+          expect(getComputedStyle(box)[property]).toBe(getComputedStyle(reference)[property]);
+        }
+        for (const input of box.querySelectorAll("input")) {
+          expect(getComputedStyle(input).textAlign).toBe("left");
+        }
+      },
+    );
+
     it("packs the clock and segments at the start of a stretched box", () => {
       const result = renderWithProviders(<Duration label="Wide" value={3600} />);
       const box = result.container.querySelector("[data-duration-box]") as HTMLElement;
@@ -192,7 +216,7 @@ describe("Duration", () => {
       expect(segmentWidthPx(lMin)).toBe(durationSegmentWidth("$6", 2));
       expect(segmentWidthPx(sMin)).toBeLessThan(segmentWidthPx(lMin));
       const sHours = small.container.querySelector('input[aria-label="Hours"]');
-      expect(segmentWidthPx(sHours)).toBe(durationSegmentWidth("$2", 3));
+      expect(segmentWidthPx(sHours)).toBe(durationSegmentWidth("$2", 1));
     });
 
     it("clock glyph follows the icon recipe, not a hardcoded 16 (LC-75)", () => {

package/src/fields/Duration/Duration.stories.tsx

@@ -2,10 +2,13 @@ import { action } from "@multiplatform.one/storybook";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { useForm } from "@tanstack/react-form";
 import { useState } from "react";
-import { Text, YStack } from "tamagui";
+import { ClockIcon } from "@phosphor-icons/react";
+import { YStack } from "tamagui";
 import { Button } from "../../Button";
 import { Form } from "../../Form";
+import { Input } from "../Input";
 import { Duration } from "./index";
+import { Text } from "@multiplatform.one/theme";
 
 const meta: Meta<typeof Duration> = {
   title: "Forms/Duration",
@@ -129,6 +132,7 @@ export const FullWidth: Story = {
         value={3600}
         onChange={action("onChange")}
       />
+      <Input label="Input reference" value="1 h 00 m" leftIcon={<ClockIcon />} />
       <Duration
         label="Small"
         size="$3"
@@ -136,6 +140,7 @@ export const FullWidth: Story = {
         value={3600}
         onChange={action("onChange")}
       />
+      <Input label="Small Input reference" size="$3" value="1 h 00 m" leftIcon={<ClockIcon />} />
     </YStack>
   ),
 };

package/src/fields/Duration/durationMath.spec.ts

@@ -59,8 +59,8 @@ describe("durationMath", () => {
 
   it("sizes segment width from the size recipe, not a fixed 48/64", () => {
     const md = sizeRecipeForToken("$4");
-    expect(durationSegmentWidth("$4", 2)).toBe(md.paddingHorizontal + md.fontSize * 2);
-    expect(durationSegmentWidth("$4", 3)).toBe(md.paddingHorizontal + md.fontSize * 3);
+    expect(durationSegmentWidth("$4", 2)).toBe(md.fontSize * 2);
+    expect(durationSegmentWidth("$4", 3)).toBe(md.fontSize * 3);
     expect(durationSegmentWidth("$2", 2)).not.toBe(durationSegmentWidth("$6", 2));
     expect(durationSegmentWidth("$2", 2)).toBeLessThan(durationSegmentWidth("$4", 2));
   });

package/src/fields/Duration/durationMath.ts

@@ -74,5 +74,5 @@ export function parseDurationText(text: string): number | null {
  */
 export function durationSegmentWidth(sizeToken: string, digits: number): number {
   const recipe = sizeRecipeForToken(sizeToken);
-  return recipe.paddingHorizontal + recipe.fontSize * digits;
+  return recipe.fontSize * digits;
 }

package/src/fields/Duration/index.tsx

@@ -52,6 +52,10 @@ const defaultPresets: DurationPreset[] = [
   { label: "8h", seconds: 28800 },
 ];
 
+const DIGIT_PROBE = "000";
+/** Room for the web caret, which scrolls an exactly-fitted input by its own width. */
+const CARET_ALLOWANCE = 2;
+
 /** Preset chips stay on the $2 row (28px). The field size token does not reach them. */
 export const DURATION_PRESET_SIZE = "$2" as const;
 
@@ -70,6 +74,7 @@ function DurationSegment({
   required,
   hasError,
   sizeToken,
+  digitAdvance,
 }: {
   id?: string;
   unit: string;
@@ -85,12 +90,18 @@ function DurationSegment({
   required?: boolean;
   hasError?: boolean;
   sizeToken: string;
+  /** Painted width of one digit, measured by DurationControl; null until laid out. */
+  digitAdvance: number | null;
 }) {
   const [draft, setDraft] = useState<string | null>(null);
   const shown = draft ?? (wide ? String(value) : String(value).padStart(2, "0"));
   const locked = !!(disabled || readOnly);
   const recipe = sizeRecipeForToken(sizeToken);
-  const segmentWidth = durationSegmentWidth(sizeToken, wide ? 3 : 2);
+  const digits = Math.max(1, shown.length);
+  const segmentWidth =
+    digitAdvance == null
+      ? durationSegmentWidth(sizeToken, digits)
+      : Math.ceil(digitAdvance * digits) + CARET_ALLOWANCE;
 
   const commitDraft = () => {
     if (draft == null) return;
@@ -121,9 +132,8 @@ function DurationSegment({
         aria-required={required || undefined}
         aria-invalid={hasError || undefined}
         color={formCommonColors.text}
-        textAlign="right"
+        textAlign="left"
         {...knobProps.controlType}
-        flex={0}
         width={segmentWidth}
         minWidth={segmentWidth}
         maxWidth={segmentWidth}
@@ -222,6 +232,10 @@ function DurationControl({
   const sizeToken = String(size || knobProps.sizeToken);
   const recipe = sizeRecipeForToken(sizeToken);
   const resolvedClock = clockIcon === undefined ? <ClockIcon size={recipe.iconSize} /> : clockIcon;
+  // Segments take one em per digit until the painted font reports its own
+  // digit advance, so the value hugs its unit in every preset font and never
+  // clips. The probe sits in the full-width row so nothing narrows it.
+  const [digitAdvance, setDigitAdvance] = useState<number | null>(null);
 
   const commitParts = useCallback(
     (patch: Partial<DurationParts>) => {
@@ -233,78 +247,84 @@ function DurationControl({
   return (
     <InputParts size={size || knobProps.sizeToken} {...(hasError ? { theme: "error" } : undefined)}>
       <InputParts.Box
-        elevation={undefined}
         disabled={disabled}
         role="group"
         aria-label={hasLabel ? undefined : t("Duration")}
         data-ring-target="box"
         data-duration-box=""
         justifyContent="flex-start"
-        alignItems="stretch"
         size={sizeToken as SizeTokens}
-        height={recipe.height}
-        sizeRecipeEscape="duration-box"
       >
-        <InputParts.Section
+        {resolvedClock != null ? (
+          <InputParts.Icon adornment="leading">{resolvedClock}</InputParts.Icon>
+        ) : null}
+        <XStack
+          alignItems="center"
           justifyContent="flex-start"
-          alignItems="stretch"
+          height="100%"
           flexGrow={1}
           flexShrink={1}
-          flexBasis="auto"
           minWidth={0}
+          gap={recipe.gap}
+          data-duration-row=""
         >
-          <XStack
-            alignItems="center"
-            justifyContent="flex-start"
-            width="100%"
-            height="100%"
-            flexGrow={0}
-            flexShrink={1}
-            gap={recipe.gap}
-            data-duration-row=""
-          >
-            {resolvedClock != null ? (
-              <InputParts.Icon adornment="leading">{resolvedClock}</InputParts.Icon>
-            ) : null}
-            {!hideDays ? (
-              <DurationSegment
-                id={id}
-                unit={t("d")}
-                ariaLabel={t("Days")}
-                value={parts.days}
-                onCommit={(days) => commitParts({ days })}
-                onPasteDuration={onChange}
-                disabled={disabled}
-                readOnly={readOnly}
-                knobProps={knobProps}
-                placeholder={placeholder}
-                required={required}
-                hasError={hasError}
-                sizeToken={sizeToken}
-              />
-            ) : null}
+          {!hideDays ? (
             <DurationSegment
-              id={hideDays ? id : `${id}-hours`}
-              unit={t("h")}
-              ariaLabel={t("Hours")}
-              value={parts.hours}
-              onCommit={(hours) => commitParts({ hours })}
+              id={id}
+              unit={t("d")}
+              ariaLabel={t("Days")}
+              value={parts.days}
+              onCommit={(days) => commitParts({ days })}
               onPasteDuration={onChange}
               disabled={disabled}
               readOnly={readOnly}
               knobProps={knobProps}
-              wide
-              placeholder={hideDays ? placeholder : undefined}
+              placeholder={placeholder}
               required={required}
               hasError={hasError}
               sizeToken={sizeToken}
+              digitAdvance={digitAdvance}
             />
+          ) : null}
+          <DurationSegment
+            id={hideDays ? id : `${id}-hours`}
+            unit={t("h")}
+            ariaLabel={t("Hours")}
+            value={parts.hours}
+            onCommit={(hours) => commitParts({ hours })}
+            onPasteDuration={onChange}
+            disabled={disabled}
+            readOnly={readOnly}
+            knobProps={knobProps}
+            wide
+            placeholder={hideDays ? placeholder : undefined}
+            required={required}
+            hasError={hasError}
+            sizeToken={sizeToken}
+            digitAdvance={digitAdvance}
+          />
+          <DurationSegment
+            id={`${id}-minutes`}
+            unit={t("m")}
+            ariaLabel={t("Min")}
+            value={parts.minutes}
+            onCommit={(minutes) => commitParts({ minutes })}
+            onPasteDuration={onChange}
+            disabled={disabled}
+            readOnly={readOnly}
+            knobProps={knobProps}
+            required={required}
+            hasError={hasError}
+            sizeToken={sizeToken}
+            digitAdvance={digitAdvance}
+          />
+          {showSeconds ? (
             <DurationSegment
-              id={`${id}-minutes`}
-              unit={t("m")}
-              ariaLabel={t("Min")}
-              value={parts.minutes}
-              onCommit={(minutes) => commitParts({ minutes })}
+              id={`${id}-seconds`}
+              unit={t("s")}
+              ariaLabel={t("Sec")}
+              value={parts.seconds}
+              onCommit={(secs) => commitParts({ seconds: secs })}
               onPasteDuration={onChange}
               disabled={disabled}
               readOnly={readOnly}
@@ -312,25 +332,26 @@ function DurationControl({
               required={required}
               hasError={hasError}
               sizeToken={sizeToken}
+              digitAdvance={digitAdvance}
             />
-            {showSeconds ? (
-              <DurationSegment
-                id={`${id}-seconds`}
-                unit={t("s")}
-                ariaLabel={t("Sec")}
-                value={parts.seconds}
-                onCommit={(secs) => commitParts({ seconds: secs })}
-                onPasteDuration={onChange}
-                disabled={disabled}
-                readOnly={readOnly}
-                knobProps={knobProps}
-                required={required}
-                hasError={hasError}
-                sizeToken={sizeToken}
-              />
-            ) : null}
-          </XStack>
-        </InputParts.Section>
+          ) : null}
+          <Text
+            aria-hidden
+            position="absolute"
+            opacity={0}
+            pointerEvents="none"
+            numberOfLines={1}
+            {...knobProps.body}
+            {...knobProps.controlType}
+            fontSize={recipe.fontSize}
+            onLayout={(e) => {
+              const width = e.nativeEvent.layout.width;
+              if (width > 0) setDigitAdvance(width / DIGIT_PROBE.length);
+            }}
+          >
+            {DIGIT_PROBE}
+          </Text>
+        </XStack>
       </InputParts.Box>
     </InputParts>
   );