@dloizides/ui-forms 1.18.7 → 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 { 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, focusRingOutline } 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 ?? "";
@@ -629,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(
@@ -651,13 +656,14 @@ 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 : themeFocusRingColor(theme);
     const ring = isFocused ? focusRingOutline(ringColor) : NO_RING;
@@ -677,6 +683,9 @@ function useThemedInput(options = {}) {
     colors.border,
     colors.surface,
     colors.surfaceElevated,
+    colors.background,
+    colors.textSecondary,
+    editable,
     primary,
     errorColor,
     theme
@@ -729,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;
@@ -1582,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]);
@@ -1630,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`
       }
     ),
@@ -1648,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" } : {};