@dloizides/ui-forms 1.18.6 → 1.19.0

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 { Z_INDEX, focusRingOutline, readableScaleInk } from '@dloizides/design-tokens';
+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';
 
 // src/Field/Field.tsx
 function attachControlId(child, candidateId, describedById) {
@@ -140,6 +140,11 @@ function useFormGridMetrics() {
 function useIsGapOwned() {
   return React2.useContext(GapOwnedContext);
 }
+var ERROR_LIGHT_STEPS = ["500", "600", "700"];
+var ERROR_DARK_STEPS = ["300", "200", "400", "100", "500"];
+function fieldErrorInk(theme) {
+  return readableScaleInk({ ...theme.semantic.error }, theme.colors.surface, ERROR_LIGHT_STEPS, ERROR_DARK_STEPS);
+}
 var ERROR_FONT_SIZE = 12;
 var HINT_FONT_SIZE = 12;
 var OPTIONAL_MARK_FONT_WEIGHT = "400";
@@ -195,8 +200,8 @@ var Field = ({
   const { theme } = useUi();
   const gapOwned = useIsGapOwned();
   const spacingStyles = fieldSpacingStyleSet(resolveFieldSpacing(spacing, gapOwned));
-  const { colors, semantic } = theme;
-  const errorColor = semantic.error["500"];
+  const { colors } = theme;
+  const errorColor = fieldErrorInk(theme);
   const hasError = hasFieldError(error);
   const hasHint = isPresent(hint);
   const labelText = label ?? "";
@@ -604,8 +609,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;
@@ -630,9 +634,9 @@ function withAlpha(color, alpha) {
   return `rgba(${r}, ${g}, ${b}, ${alpha})`;
 }
 function useThemedInput(options = {}) {
-  const { hasError = false, onFocus, onBlur } = options;
+  const { hasError = false, onFocus, onBlur, editable = true } = options;
   const { theme } = useUi();
-  const { colors, palette, semantic } = theme;
+  const { colors, palette } = theme;
   const [isFocused, setIsFocused] = useState(false);
   const [isHovered, setIsHovered] = useState(false);
   const handleFocus = useCallback(
@@ -652,23 +656,23 @@ function useThemedInput(options = {}) {
   const handleHoverIn = useCallback(() => setIsHovered(true), []);
   const handleHoverOut = useCallback(() => setIsHovered(false), []);
   const primary = palette.primary["500"];
-  const errorColor = semantic.error["500"];
+  const errorColor = fieldErrorInk(theme);
   const style = useMemo(() => {
     const restBorder = hasError ? errorColor : colors.border;
     const focusBorder = hasError ? errorColor : primary;
     const borderColor = isFocused ? focusBorder : isHovered ? withAlpha(colors.text, HOVER_BORDER_ALPHA) : restBorder;
-    const backgroundColor = isFocused ? colors.surface : colors.surfaceElevated;
-    const base = { color: colors.text, borderColor, backgroundColor };
+    const editableFill = isFocused ? colors.surface : colors.surfaceElevated;
+    const backgroundColor = editable ? editableFill : colors.background;
+    const base = { color: editable ? colors.text : colors.textSecondary, 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 };
   }, [
@@ -679,8 +683,12 @@ function useThemedInput(options = {}) {
     colors.border,
     colors.surface,
     colors.surfaceElevated,
+    colors.background,
+    colors.textSecondary,
+    editable,
     primary,
-    errorColor
+    errorColor,
+    theme
   ]);
   const focusBind = useMemo(() => ({ onFocus: handleFocus, onBlur: handleBlur }), [handleFocus, handleBlur]);
   const hoverBind = useMemo(
@@ -730,7 +738,7 @@ var ThemedTextInput = React2.forwardRef(function ThemedTextInput2({
     placeholderTextColor: themedPlaceholder,
     focusBind,
     hoverBind
-  } = useThemedInput({ hasError, onFocus, onBlur });
+  } = useThemedInput({ hasError, onFocus, onBlur, editable: rest.editable });
   const webA11y = webFieldA11y({ describedById, hasError, required: requiredField });
   const boxStyle = unstyledBox ? null : controlStyles.input;
   const multilineStyle = rest.multiline === true && !unstyledBox ? boxStyles.multiline : null;
@@ -1583,7 +1591,7 @@ function TypeaheadControl({
   testID
 }) {
   const { theme } = useUi();
-  const { colors, palette, semantic } = theme;
+  const { colors, palette } = theme;
   const anchorRef = useRef(null);
   const [isOpen, setIsOpen] = useState(false);
   const exactPick = useMemo(() => options.some((o) => o.label === value), [options, value]);
@@ -1631,7 +1639,7 @@ function TypeaheadControl({
         onFocus: () => setIsOpen(true),
         onBlur: handleBlur,
         onSubmitEditing: handleSubmit,
-        style: [controlStyles.input, { borderColor: hasError ? semantic.error["500"] : colors.border, backgroundColor: colors.surface, color: colors.text }],
+        style: [controlStyles.input, { borderColor: hasError ? fieldErrorInk(theme) : colors.border, backgroundColor: colors.surface, color: colors.text }],
         testID: `${testID}-input`
       }
     ),
@@ -1649,7 +1657,7 @@ function TypeaheadControl({
         usePortal: true
       }
     ) : null,
-    hasError ? /* @__PURE__ */ jsx(Text, { role: "alert", style: [controlStyles.error, { color: semantic.error["500"] }], testID: `${testID}-error`, children: error }) : null
+    hasError ? /* @__PURE__ */ jsx(Text, { role: "alert", style: [controlStyles.error, { color: fieldErrorInk(theme) }], testID: `${testID}-error`, children: error }) : null
   ] });
 }
 var WEB_DATE_PROPS = typeof document !== "undefined" ? { type: "date" } : {};