@multiplatform.one/forms 7.84.8 → 7.85.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiplatform.one/forms",
-  "version": "7.84.8",
+  "version": "7.85.0",
   "description": "Cross-platform form components with URL state management",
   "keywords": [
     "cross-platform",
@@ -57,10 +57,10 @@
   },
   "dependencies": {
     "@floating-ui/react": "^0.27.20",
-    "@multiplatform.one/platform": "^7.84.8",
-    "@multiplatform.one/router": "^7.84.8",
-    "@multiplatform.one/table-primitives": "^7.84.8",
-    "@multiplatform.one/theme": "^7.84.8",
+    "@multiplatform.one/platform": "^7.85.0",
+    "@multiplatform.one/router": "^7.85.0",
+    "@multiplatform.one/table-primitives": "^7.85.0",
+    "@multiplatform.one/theme": "^7.85.0",
     "@phosphor-icons/react": "^2.1.10",
     "@tamagui/get-font-sized": "2.7.6",
     "@tamagui/get-token": "2.7.6",
@@ -80,9 +80,9 @@
   },
   "devDependencies": {
     "@expo/ui": "~55.0.17",
-    "@multiplatform.one/config": "7.84.8",
-    "@multiplatform.one/storybook": "7.84.8",
-    "@multiplatform.one/test-utils": "7.84.8",
+    "@multiplatform.one/config": "7.85.0",
+    "@multiplatform.one/storybook": "7.85.0",
+    "@multiplatform.one/test-utils": "7.85.0",
     "@tamagui/build": "2.7.6",
     "@tamagui/config": "2.7.6",
     "@tamagui/vite-plugin": "2.7.6",

package/src/fields/OTPInput/index.tsx

@@ -2,7 +2,7 @@ import { useTouchSurface } from "@multiplatform.one/theme";
 import type { Validator } from "../../types";
 
 import type { DeepKeys, DeepValue } from "@tanstack/form-core";
-import { edgeColorAt, useResolvedKnobs } from "@multiplatform.one/theme";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
 import {
   type ClipboardEvent,
   type ComponentProps,
@@ -30,10 +30,11 @@ import {
 import type { FormFieldProps } from "../../fieldLayout";
 import { Input as InputParts, InputContext } from "../../InputParts";
 import { Skeleton } from "../../Skeleton";
-import { formCommonColors, formControlColors, formInputColors } from "../../shared/colorRamps";
+import { formCommonColors } from "../../shared/colorRamps";
 import { t } from "../../shared/t";
 import type { FieldComponentProps } from "../../types";
 import { ensureOtpCellCss } from "./otpCellCss";
+import { otpCellEdge } from "./otpCellEdge";
 
 export type OTPInputProps<
   TParentData extends Record<string, unknown> = Record<string, unknown>,
@@ -230,11 +231,12 @@ const OTPDigitInput = memo(function OTPDigitInput({
     otpCellHeightPx(cellSize, hydrationTouch),
   );
   const isNumeric = type === "numeric";
-  const cellBorder = hasError
-    ? formCommonColors.error
-    : value
-      ? formControlColors.boundary
-      : edgeColorAt(formInputColors.border.base, knobProps.borderWidthStop);
+  const cellEdge = otpCellEdge({
+    hasError: Boolean(hasError),
+    filled: Boolean(value),
+    hidden: knobProps.fieldEdge.hidden,
+    borderWidthStop: knobProps.borderWidthStop,
+  });
   const firstCell = digitIndex === 0;
 
   return (
@@ -256,8 +258,8 @@ const OTPDigitInput = memo(function OTPDigitInput({
       // lift each cell off the page.
       elevation={0}
       shadowOpacity={0}
-      borderColor={cellBorder}
-      hoverStyle={{ borderColor: hasError ? formCommonColors.error : formInputColors.border.hover }}
+      borderColor={cellEdge.rest}
+      hoverStyle={{ borderColor: cellEdge.hover }}
       // LC-40: forward `disabled` so each cell renders the washed chrome.
       disabled={disabled}
       // Web only: keep the Box out of the tab order. The focus handlers live

package/src/fields/OTPInput/otpCellEdge.spec.ts

@@ -0,0 +1,40 @@
+import { edgeColorAt } from "@multiplatform.one/theme";
+import { describe, expect, it } from "vitest";
+import { formCommonColors, formControlColors, formInputColors } from "../../shared/colorRamps";
+import { otpCellEdge } from "./otpCellEdge";
+
+const shown = { hasError: false, filled: false, hidden: false, borderWidthStop: "small" as const };
+
+describe("otpCellEdge", () => {
+  it("keeps a hidden edge transparent at rest and on hover, filled or not", () => {
+    for (const filled of [false, true]) {
+      expect(otpCellEdge({ ...shown, filled, hidden: true, borderWidthStop: "none" })).toEqual({
+        rest: "transparent",
+        hover: "transparent",
+      });
+    }
+  });
+
+  it("paints an error cell the error colour even under a hidden edge", () => {
+    for (const hidden of [false, true]) {
+      expect(otpCellEdge({ ...shown, hasError: true, hidden })).toEqual({
+        rest: formCommonColors.error,
+        hover: formCommonColors.error,
+      });
+    }
+  });
+
+  it.each(["small", "medium", "large"] as const)(
+    "draws the base edge at the %s stop and the boundary once filled",
+    (borderWidthStop) => {
+      expect(otpCellEdge({ ...shown, borderWidthStop })).toEqual({
+        rest: edgeColorAt(formInputColors.border.base, borderWidthStop),
+        hover: formInputColors.border.hover,
+      });
+      expect(otpCellEdge({ ...shown, borderWidthStop, filled: true })).toEqual({
+        rest: formControlColors.boundary,
+        hover: formInputColors.border.hover,
+      });
+    },
+  );
+});

package/src/fields/OTPInput/otpCellEdge.ts

@@ -0,0 +1,21 @@
+import { edgeColorAt, type Knobs } from "@multiplatform.one/theme";
+import { formCommonColors, formControlColors, formInputColors } from "../../shared/colorRamps";
+
+export interface OtpCellEdgeInput {
+  readonly hasError: boolean;
+  readonly filled: boolean;
+  readonly hidden: boolean;
+  readonly borderWidthStop: Knobs["borderWidth"];
+}
+
+export function otpCellEdge({ hasError, filled, hidden, borderWidthStop }: OtpCellEdgeInput): {
+  rest: string;
+  hover: string;
+} {
+  if (hasError) return { rest: formCommonColors.error, hover: formCommonColors.error };
+  if (hidden) return { rest: "transparent", hover: "transparent" };
+  const rest = filled
+    ? formControlColors.boundary
+    : edgeColorAt(formInputColors.border.base, borderWidthStop);
+  return { rest, hover: formInputColors.border.hover };
+}

package/types/fields/OTPInput/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/OTPInput/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/OTPInput/index.tsx"],"names":[],"mappings":"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"}

package/types/fields/OTPInput/otpCellEdge.d.ts

@@ -0,0 +1,12 @@
+import { type Knobs } from "@multiplatform.one/theme";
+export interface OtpCellEdgeInput {
+    readonly hasError: boolean;
+    readonly filled: boolean;
+    readonly hidden: boolean;
+    readonly borderWidthStop: Knobs["borderWidth"];
+}
+export declare function otpCellEdge({ hasError, filled, hidden, borderWidthStop }: OtpCellEdgeInput): {
+    rest: string;
+    hover: string;
+};
+//# sourceMappingURL=otpCellEdge.d.ts.map

package/types/fields/OTPInput/otpCellEdge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"otpCellEdge.d.ts","sourceRoot":"","sources":["../../../src/fields/OTPInput/otpCellEdge.ts"],"names":[],"mappings":"AAAA,OAAO,EAAe,KAAK,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAGnE,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,MAAM,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,MAAM,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,eAAe,EAAE,KAAK,CAAC,aAAa,CAAC,CAAC;CAChD;AAED,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,eAAe,EAAE,EAAE,gBAAgB,GAAG;IAC5F,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf,CAOA"}