@dloizides/ui-forms 1.17.0 → 1.18.1

package/dist/index.d.mts

@@ -934,12 +934,15 @@ declare const controlStyles: {
         borderWidth: number;
         borderRadius: number;
         paddingVertical: number;
-        zIndex: number;
+        zIndex: 1000;
         boxShadow: string;
         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

@@ -934,12 +934,15 @@ declare const controlStyles: {
         borderWidth: number;
         borderRadius: number;
         paddingVertical: number;
-        zIndex: number;
+        zIndex: 1000;
         boxShadow: string;
         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

@@ -7,6 +7,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var uiButtons = require('@dloizides/ui-buttons');
 var reactDom = require('react-dom');
 var a11y = require('@dloizides/a11y');
+var designTokens = require('@dloizides/design-tokens');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -398,7 +399,6 @@ var MENU_OPT_PAD_H = 12;
 var MENU_OPT_PAD_V = 8;
 var MENU_MIN_WIDTH = 160;
 var MENU_MAX_HEIGHT = 260;
-var MENU_Z = 1e3;
 var MENU_ELEVATION = 8;
 var MENU_BOX_SHADOW = "0px 2px 8px rgba(0, 0, 0, 0.15)";
 var OPTION_FONT = 14;
@@ -455,17 +455,23 @@ var controlStyles = reactNative.StyleSheet.create({
     borderWidth: INPUT_BORDER,
     borderRadius: MENU_RADIUS,
     paddingVertical: MENU_PAD_V,
-    zIndex: MENU_Z,
+    zIndex: designTokens.Z_INDEX.dropdown,
     boxShadow: MENU_BOX_SHADOW,
     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 }
 });
 var IS_WEB3 = reactNative.Platform.OS === "web";
-var MENU_PORTAL_Z_INDEX = 1e3;
+var MENU_PORTAL_Z_INDEX = designTokens.Z_INDEX.popover;
 var MENU_TOP_GAP2 = 4;
 function toDomNode(ref) {
   const node = ref.current;
@@ -1262,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
@@ -1286,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(() => {
@@ -1293,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"];
@@ -1332,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,
@@ -1409,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: [