@dloizides/ui-forms 1.18.7 → 1.19.0

package/dist/index.d.mts

@@ -470,6 +470,8 @@ interface UseThemedInputOptions {
     onFocus?: (e: FocusEvent) => void;
     /** Consumer blur handler — composed with the internal focus-state toggle. */
     onBlur?: (e: BlurEvent) => void;
+    /** `false` renders the read-only treatment: the recessed ground fill and the secondary ink. */
+    editable?: boolean;
 }
 interface ThemedInput {
     /** The themed input style for the current focus/hover state (memoised). Merge AFTER your box style. */

package/dist/index.d.ts

@@ -470,6 +470,8 @@ interface UseThemedInputOptions {
     onFocus?: (e: FocusEvent) => void;
     /** Consumer blur handler — composed with the internal focus-state toggle. */
     onBlur?: (e: BlurEvent) => void;
+    /** `false` renders the read-only treatment: the recessed ground fill and the secondary ink. */
+    editable?: boolean;
 }
 interface ThemedInput {
     /** The themed input style for the current focus/hover state (memoised). Merge AFTER your box style. */

package/dist/index.js

@@ -4,10 +4,10 @@ var React2 = require('react');
 var reactNative = require('react-native');
 var uiFeedback = require('@dloizides/ui-feedback');
 var jsxRuntime = require('react/jsx-runtime');
+var designTokens = require('@dloizides/design-tokens');
 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 }; }
 
@@ -146,6 +146,11 @@ function useFormGridMetrics() {
 function useIsGapOwned() {
   return React2__default.default.useContext(GapOwnedContext);
 }
+var ERROR_LIGHT_STEPS = ["500", "600", "700"];
+var ERROR_DARK_STEPS = ["300", "200", "400", "100", "500"];
+function fieldErrorInk(theme) {
+  return designTokens.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";
@@ -201,8 +206,8 @@ var Field = ({
   const { theme } = uiFeedback.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 ?? "";
@@ -635,9 +640,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 } = uiFeedback.useUi();
-  const { colors, palette, semantic } = theme;
+  const { colors, palette } = theme;
   const [isFocused, setIsFocused] = React2.useState(false);
   const [isHovered, setIsHovered] = React2.useState(false);
   const handleFocus = React2.useCallback(
@@ -657,13 +662,14 @@ function useThemedInput(options = {}) {
   const handleHoverIn = React2.useCallback(() => setIsHovered(true), []);
   const handleHoverOut = React2.useCallback(() => setIsHovered(false), []);
   const primary = palette.primary["500"];
-  const errorColor = semantic.error["500"];
+  const errorColor = fieldErrorInk(theme);
   const style = React2.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 : uiButtons.themeFocusRingColor(theme);
     const ring = isFocused ? designTokens.focusRingOutline(ringColor) : NO_RING;
@@ -683,6 +689,9 @@ function useThemedInput(options = {}) {
     colors.border,
     colors.surface,
     colors.surfaceElevated,
+    colors.background,
+    colors.textSecondary,
+    editable,
     primary,
     errorColor,
     theme
@@ -735,7 +744,7 @@ var ThemedTextInput = React2__default.default.forwardRef(function ThemedTextInpu
     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;
@@ -1588,7 +1597,7 @@ function TypeaheadControl({
   testID
 }) {
   const { theme } = uiFeedback.useUi();
-  const { colors, palette, semantic } = theme;
+  const { colors, palette } = theme;
   const anchorRef = React2.useRef(null);
   const [isOpen, setIsOpen] = React2.useState(false);
   const exactPick = React2.useMemo(() => options.some((o) => o.label === value), [options, value]);
@@ -1636,7 +1645,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`
       }
     ),
@@ -1654,7 +1663,7 @@ function TypeaheadControl({
         usePortal: true
       }
     ) : null,
-    hasError ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { role: "alert", style: [controlStyles.error, { color: semantic.error["500"] }], testID: `${testID}-error`, children: error }) : null
+    hasError ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { role: "alert", style: [controlStyles.error, { color: fieldErrorInk(theme) }], testID: `${testID}-error`, children: error }) : null
   ] });
 }
 var WEB_DATE_PROPS = typeof document !== "undefined" ? { type: "date" } : {};