@dloizides/ui-forms 1.16.0 → 1.18.0

package/dist/index.d.mts

@@ -939,7 +939,10 @@ declare const controlStyles: {
         elevation: number;
         overflow: "hidden";
     };
+    /** A menu option is a tap target, so it carries the kit floor (SHOWCASE-1). */
     option: {
+        minHeight: number;
+        justifyContent: "center";
         paddingHorizontal: number;
         paddingVertical: number;
     };

package/dist/index.d.ts

@@ -939,7 +939,10 @@ declare const controlStyles: {
         elevation: number;
         overflow: "hidden";
     };
+    /** A menu option is a tap target, so it carries the kit floor (SHOWCASE-1). */
     option: {
+        minHeight: number;
+        justifyContent: "center";
         paddingHorizontal: number;
         paddingVertical: number;
     };

package/dist/index.js

@@ -460,7 +460,13 @@ var controlStyles = reactNative.StyleSheet.create({
     elevation: MENU_ELEVATION,
     overflow: "hidden"
   },
-  option: { paddingHorizontal: MENU_OPT_PAD_H, paddingVertical: MENU_OPT_PAD_V },
+  /** A menu option is a tap target, so it carries the kit floor (SHOWCASE-1). */
+  option: {
+    minHeight: a11y.MIN_TOUCH_TARGET_PX,
+    justifyContent: "center",
+    paddingHorizontal: MENU_OPT_PAD_H,
+    paddingVertical: MENU_OPT_PAD_V
+  },
   optionText: { fontSize: OPTION_FONT },
   error: { fontSize: ERROR_FONT, marginTop: ERROR_GAP }
 });
@@ -964,10 +970,13 @@ var OUTLINE_PAD_H = 12;
 var OUTLINE_PAD_V = 5;
 var OUTLINE_FONT_SIZE = 13;
 var CHIP_ICON_GAP = 6;
+var MIN_TARGET_PX = 44;
 var chipStyles = reactNative.StyleSheet.create({
   chip: {
     paddingHorizontal: 12,
     paddingVertical: 6,
+    minHeight: MIN_TARGET_PX,
+    justifyContent: "center",
     borderRadius: SOLID_RADIUS,
     backgroundColor: TRANSPARENT_COLOR,
     borderWidth: 1
@@ -975,6 +984,8 @@ var chipStyles = reactNative.StyleSheet.create({
   chipOutline: {
     paddingHorizontal: OUTLINE_PAD_H,
     paddingVertical: OUTLINE_PAD_V,
+    minHeight: MIN_TARGET_PX,
+    justifyContent: "center",
     borderRadius: OUTLINE_RADIUS,
     borderWidth: 1
   },
@@ -1257,7 +1268,10 @@ var styles6 = reactNative.StyleSheet.create({
     flexDirection: "row",
     justifyContent: "space-between",
     alignItems: "center",
-    marginBottom: 12
+    marginBottom: 12,
+    // The ROW is the hit box (SHOWCASE-1): RN-web renders Switch as a 40x20 box and ignores
+    // `hitSlop`, so a pointer target smaller than the floor cannot be widened any other way.
+    minHeight: a11y.MIN_TOUCH_TARGET_PX
   },
   textColumn: {
     flex: 1
@@ -1281,6 +1295,9 @@ var FormSwitch = ({
   accessibilityHint
 }) => {
   const { theme } = uiFeedback.useUi();
+  const toggle = React2__default.default.useCallback(() => {
+    if (!disabled) onValueChange(!value);
+  }, [disabled, onValueChange, value]);
   const { colors } = theme;
   const hasDescription = typeof description === "string" && description !== "";
   const themeStyles = React2__default.default.useMemo(() => {
@@ -1288,32 +1305,42 @@ var FormSwitch = ({
     const descriptionStyle = { color: colors.textSecondary };
     return { label: labelStyle, description: descriptionStyle };
   }, [colors.text, colors.textSecondary]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    reactNative.View,
-    {
-      style: [
-        styles6.container,
-        containerStyle
-      ],
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles6.textColumn, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles6.label, themeStyles.label], children: label }),
-          hasDescription ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles6.description, themeStyles.description], children: description }) : null
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          reactNative.Switch,
-          {
-            accessibilityHint: accessibilityHint ?? label,
-            accessibilityLabel: label,
-            accessibilityState: { checked: value, disabled },
-            disabled,
-            testID,
-            value,
-            onValueChange
-          }
-        )
-      ]
-    }
+  return (
+    /*
+      Pointer target only: the whole row toggles on press. It is NOT an a11y element and NOT a tab
+      stop (`accessible` / `focusable` false) so the native input below stays the ONE switch. The
+      Switch sits under `pointerEvents="none"`, so a tap on it reaches this row exactly once
+      instead of toggling twice; keyboard focus + Space still reach the input directly.
+    */
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      reactNative.Pressable,
+      {
+        accessible: false,
+        disabled,
+        onPress: toggle,
+        style: [styles6.container, containerStyle],
+        tabIndex: -1,
+        testID: `${testID}-row`,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles6.textColumn, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles6.label, themeStyles.label], children: label }),
+            hasDescription ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles6.description, themeStyles.description], children: description }) : null
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { pointerEvents: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
+            reactNative.Switch,
+            {
+              accessibilityHint: accessibilityHint ?? label,
+              accessibilityLabel: label,
+              accessibilityState: { checked: value, disabled },
+              disabled,
+              testID,
+              value,
+              onValueChange
+            }
+          ) })
+        ]
+      }
+    )
   );
 };
 var ACTIVATION_KEYS = ["Enter", " ", "Spacebar"];
@@ -1327,7 +1354,14 @@ var styles7 = reactNative.StyleSheet.create({
     flexDirection: "row",
     alignItems: "flex-start",
     gap: 10,
-    marginBottom: 12
+    marginBottom: 12,
+    // The whole row is the Pressable, so the row IS the hit box: on RN-web `hitSlop` is inert and a
+    // one-line label measured 36px tall (SHOWCASE-1). The 20px visual box keeps its size inside.
+    minHeight: a11y.MIN_TOUCH_TARGET_PX
+  },
+  /** With no hint the row is a single line, so centre it vertically inside the floor. */
+  centered: {
+    alignItems: "center"
   },
   box: {
     width: BOX_SIZE,
@@ -1404,7 +1438,12 @@ var FormCheckbox = ({
       disabled,
       onPress: toggle,
       role: "checkbox",
-      style: [styles7.container, containerStyle, disabled ? { opacity: DISABLED_OPACITY } : null],
+      style: [
+        styles7.container,
+        hasHint ? null : styles7.centered,
+        containerStyle,
+        disabled ? { opacity: DISABLED_OPACITY } : null
+      ],
       testID,
       ...keyboardProps,
       children: [