@multiplatform.one/forms 7.45.1 → 7.47.0

package/src/fields/Barcode/Barcode.stories.tsx

@@ -3,10 +3,11 @@ import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { BarcodeIcon, CameraIcon, XIcon } from "@phosphor-icons/react";
 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 { Barcode } from "./index";
+import { Text } from "@multiplatform.one/theme";
 
 const iconProps = {
   barcodeIcon: <BarcodeIcon size={18} />,

package/src/fields/Barcode/BarcodePreview.stories.tsx

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

package/src/fields/Checkbox/Checkbox.stories.tsx

@@ -4,10 +4,12 @@ import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { CheckIcon } from "@phosphor-icons/react";
 import { useForm } from "@tanstack/react-form";
 import { useState } from "react";
-import { Checkbox as TamaguiCheckbox, Label, Paragraph, XStack, YStack } from "tamagui";
+import { Checkbox as TamaguiCheckbox, XStack, YStack } from "tamagui";
+import { Label } from "../../Label";
 import { Button } from "../../Button";
 import { Form } from "../../Form";
 import { Checkbox, Checkboxes, CheckboxGroup } from "./index";
+import { Paragraph } from "@multiplatform.one/theme";
 
 const meta: Meta<typeof Checkbox> = {
   title: "Forms/Checkbox",

package/src/fields/Checkbox/CheckboxGroup.stories.tsx

@@ -1,8 +1,8 @@
 import { action } from "@multiplatform.one/storybook";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
-import { Preset } from "@multiplatform.one/theme";
+import { Preset, Paragraph } from "@multiplatform.one/theme";
 import { useForm } from "@tanstack/react-form";
-import { Paragraph, YStack } from "tamagui";
+import { YStack } from "tamagui";
 import { Button } from "../../Button";
 import { Form } from "../../Form";
 import { CheckboxGroup } from "./CheckboxGroup";

package/src/fields/Checkbox/Checkboxes.stories.tsx

@@ -1,9 +1,10 @@
 import { action } from "@multiplatform.one/storybook";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { useState } from "react";
-import { Paragraph, XStack, YStack } from "tamagui";
+import { XStack, YStack } from "tamagui";
 import { CheckboxGroup } from "./CheckboxGroup";
 import { Checkboxes } from "./index";
+import { Paragraph } from "@multiplatform.one/theme";
 
 const meta: Meta = {
   title: "Forms/Checkboxes",

package/src/fields/ColorPicker/PresetSwatches.stories.tsx

@@ -7,8 +7,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 { PresetSwatches } from "./parts";
+import { Text } from "@multiplatform.one/theme";
 
 const BRAND = ["#1E40AF", "#1D4ED8", "#2563EB", "#3B82F6", "#60A5FA", "#93C5FD", "#BFDBFE"];
 

package/src/fields/ColorPicker/index.tsx

@@ -8,7 +8,6 @@ import {
 } from "@multiplatform.one/theme";
 import { type ComponentProps, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { type Popover, View, XStack, YStack, isWeb, useProps, useTheme } from "tamagui";
-import { Button } from "../../Button";
 
 import { Field, FieldLayout } from "../../fieldLayout";
 import {
@@ -425,19 +424,13 @@ function ColorBody({
               placeholder="#000000"
               maxLength={showAlpha ? 9 : 7}
             />
+            {hasEyeDropper && (
+              <InputParts.Action label={t("Eyedropper")} onPress={handleEyeDropper}>
+                <Pipette />
+              </InputParts.Action>
+            )}
           </InputParts.Box>
         </InputParts>
-        {hasEyeDropper && (
-          <Button
-            size={knobProps.sizeToken}
-            chromeless
-            icon={<Pipette size={CHIP_PX[sizeTokenStop(knobProps.sizeToken)] ?? 18} />}
-            onPress={handleEyeDropper}
-            cursor="pointer"
-            aria-label={t("Eyedropper")}
-            hoverStyle={{ opacity: 0.7 }}
-          />
-        )}
       </XStack>
     </YStack>
   );
@@ -500,6 +493,7 @@ function ColorPickerControl({
       // Focus can still be parked on a control inside the closing panel while
       // it animates out — treat that the same as focus already being lost.
       const inClosingPanel =
+        typeof HTMLElement !== "undefined" &&
         active instanceof HTMLElement &&
         !!active.closest('[data-testid="floating-panel-viewport"]');
       if (active && active !== document.body && !inClosingPanel) return;

package/src/fields/Combobox/Combobox.stories.tsx

@@ -3,11 +3,12 @@ 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, XStack, YStack } from "tamagui";
+import { XStack, YStack } from "tamagui";
 import { Button } from "../../Button";
 import { Form } from "../../Form";
 import { Combobox, type ComboboxOption } from "./index";
 import { authorOptions } from "./authorOptions";
+import { Text } from "@multiplatform.one/theme";
 
 const meta: Meta<typeof Combobox> = {
   title: "Forms/Combobox",

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;
 }