@dloizides/ui-forms 1.18.4 → 1.18.7

package/dist/index.mjs

@@ -2,10 +2,10 @@ import React2, { useState, useCallback, useMemo, useEffect, useRef, useLayoutEff
 import { Platform, StyleSheet, TextInput, View, Text, ScrollView, Pressable, Switch, TouchableOpacity } from 'react-native';
 import { useUi } from '@dloizides/ui-feedback';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { Button } from '@dloizides/ui-buttons';
+import { themeFocusRingColor, Button } from '@dloizides/ui-buttons';
 import { createPortal } from 'react-dom';
 import { MIN_TOUCH_TARGET_PX } from '@dloizides/a11y';
-import { Z_INDEX } from '@dloizides/design-tokens';
+import { Z_INDEX, focusRingOutline } from '@dloizides/design-tokens';
 
 // src/Field/Field.tsx
 function attachControlId(child, candidateId, describedById) {
@@ -604,8 +604,7 @@ var IS_WEB5 = Platform.OS === "web";
 var TRANSITION_PROPERTY = "border-color, background-color, box-shadow";
 var TRANSITION_DURATION = "0.14s";
 var TRANSITION_TIMING = "ease";
-var FOCUS_RING_WIDTH = 3;
-var FOCUS_RING_ALPHA = 0.16;
+var NO_RING = { outlineWidth: 0 };
 var HOVER_BORDER_ALPHA = 0.22;
 var PLACEHOLDER_ALPHA = 0.6;
 var HEX_RADIX = 16;
@@ -660,15 +659,14 @@ function useThemedInput(options = {}) {
     const backgroundColor = isFocused ? colors.surface : colors.surfaceElevated;
     const base = { color: colors.text, borderColor, backgroundColor };
     if (!IS_WEB5) return base;
-    const ringColor = hasError ? errorColor : primary;
-    const ring = isFocused ? `0 0 0 ${FOCUS_RING_WIDTH}px ${withAlpha(ringColor, FOCUS_RING_ALPHA)}` : "none";
+    const ringColor = hasError ? errorColor : themeFocusRingColor(theme);
+    const ring = isFocused ? focusRingOutline(ringColor) : NO_RING;
     const webStyle = {
       transitionProperty: TRANSITION_PROPERTY,
       // Collapse the eased transition to instant when the user prefers reduced motion.
       transitionDuration: prefersReducedMotion() ? "0s" : TRANSITION_DURATION,
       transitionTimingFunction: TRANSITION_TIMING,
-      boxShadow: ring,
-      outlineStyle: "none"
+      ...ring
     };
     return { ...base, ...webStyle };
   }, [
@@ -680,7 +678,8 @@ function useThemedInput(options = {}) {
     colors.surface,
     colors.surfaceElevated,
     primary,
-    errorColor
+    errorColor,
+    theme
   ]);
   const focusBind = useMemo(() => ({ onFocus: handleFocus, onBlur: handleBlur }), [handleFocus, handleBlur]);
   const hoverBind = useMemo(
@@ -973,6 +972,7 @@ var chipStyles = StyleSheet.create({
     paddingHorizontal: 12,
     paddingVertical: 6,
     minHeight: MIN_TARGET_PX,
+    minWidth: MIN_TARGET_PX,
     justifyContent: "center",
     borderRadius: SOLID_RADIUS,
     backgroundColor: TRANSPARENT_COLOR,
@@ -982,6 +982,7 @@ var chipStyles = StyleSheet.create({
     paddingHorizontal: OUTLINE_PAD_H,
     paddingVertical: OUTLINE_PAD_V,
     minHeight: MIN_TARGET_PX,
+    minWidth: MIN_TARGET_PX,
     justifyContent: "center",
     borderRadius: OUTLINE_RADIUS,
     borderWidth: 1