@dloizides/ui-forms 1.20.0 → 1.21.0

package/dist/index.mjs

@@ -1431,12 +1431,18 @@ var FormSwitch = ({
     )
   );
 };
+
+// src/FormCheckbox/checkboxColors.ts
+var checkboxBoxColors = (colors, brand, checked) => checked ? { backgroundColor: brand, borderColor: brand } : { backgroundColor: "transparent", borderColor: colors.textSecondary };
 var ACTIVATION_KEYS = ["Enter", " ", "Spacebar"];
 var HINT_FONT_SIZE2 = 12;
 var BOX_SIZE = 20;
 var BOX_RADIUS = 5;
 var CHECK_FONT_SIZE = 14;
 var DISABLED_OPACITY = 0.5;
+var FOCUS_RING_WIDTH = 2;
+var WEB_NO_DEFAULT_OUTLINE = { outlineStyle: "none" };
+var FOCUS_RING_INSET = -6;
 var styles9 = StyleSheet.create({
   container: {
     flexDirection: "row",
@@ -1461,6 +1467,15 @@ var styles9 = StyleSheet.create({
     // Nudge the box to sit on the label's first text line.
     marginTop: 1
   },
+  focusRing: {
+    position: "absolute",
+    top: FOCUS_RING_INSET,
+    left: FOCUS_RING_INSET,
+    right: FOCUS_RING_INSET,
+    bottom: FOCUS_RING_INSET,
+    borderWidth: FOCUS_RING_WIDTH,
+    borderRadius: BOX_RADIUS - FOCUS_RING_INSET
+  },
   check: {
     fontSize: CHECK_FONT_SIZE,
     fontWeight: "700",
@@ -1496,13 +1511,15 @@ var FormCheckbox = ({
   const hintText = typeof hint === "string" && hint !== "" ? hint : description;
   const hasHint = typeof hintText === "string" && hintText !== "";
   const { hintId } = useFieldIds();
+  const [focused, setFocused] = React2.useState(false);
   const themeStyles = React2.useMemo(() => {
-    const boxOn = { backgroundColor: brand, borderColor: brand };
-    const boxOff = { backgroundColor: "transparent", borderColor: colors.border };
+    const boxOn = checkboxBoxColors(colors, brand, true);
+    const boxOff = checkboxBoxColors(colors, brand, false);
+    const ring = { borderColor: brand };
     const labelStyle = { color: colors.text };
     const hintStyle = { color: colors.textSecondary };
-    return { boxOn, boxOff, label: labelStyle, hint: hintStyle };
-  }, [brand, colors.border, colors.text, colors.textSecondary]);
+    return { boxOn, boxOff, ring, label: labelStyle, hint: hintStyle };
+  }, [brand, colors]);
   const toggle = () => {
     const next = !value;
     if (onValueChange) onValueChange(next);
@@ -1526,18 +1543,24 @@ var FormCheckbox = ({
       "aria-checked": value,
       "aria-describedby": hasHint ? hintId : void 0,
       disabled,
+      onBlur: () => setFocused(false),
+      onFocus: () => setFocused(true),
       onPress: toggle,
       role: "checkbox",
       style: [
         styles9.container,
         hasHint ? null : styles9.centered,
         containerStyle,
-        disabled ? { opacity: DISABLED_OPACITY } : null
+        disabled ? { opacity: DISABLED_OPACITY } : null,
+        Platform.OS === "web" ? WEB_NO_DEFAULT_OUTLINE : null
       ],
       testID,
       ...keyboardProps,
       children: [
-        /* @__PURE__ */ jsx(View, { style: [styles9.box, value ? themeStyles.boxOn : themeStyles.boxOff], children: value ? /* @__PURE__ */ jsx(Text, { style: [styles9.check, { color: colors.surface }], accessibilityElementsHidden: true, children: "\u2713" }) : null }),
+        /* @__PURE__ */ jsxs(View, { style: [styles9.box, value ? themeStyles.boxOn : themeStyles.boxOff], testID: `${testID}-box`, children: [
+          focused ? /* @__PURE__ */ jsx(View, { pointerEvents: "none", style: [styles9.focusRing, themeStyles.ring], testID: `${testID}-focus-ring` }) : null,
+          value ? /* @__PURE__ */ jsx(Text, { style: [styles9.check, { color: colors.surface }], accessibilityElementsHidden: true, children: "\u2713" }) : null
+        ] }),
         /* @__PURE__ */ jsxs(View, { style: styles9.textColumn, children: [
           /* @__PURE__ */ jsx(Text, { style: [styles9.label, themeStyles.label], children: label }),
           hasHint ? /* @__PURE__ */ jsx(Text, { nativeID: hintId, style: [styles9.hint, themeStyles.hint], children: hintText }) : null