@dloizides/ui-forms 1.18.6 → 1.19.0

package/CHANGELOG.md

@@ -1,6 +1,10 @@
 # Changelog
 
-## 1.18.5
+## 1.18.7
+
+- Focused inputs draw the fleet focus ring (`@dloizides/design-tokens` 1.14 `FOCUS_RING`: 2 px solid outline, 2 px offset, contrast-checked colour; error colour when errored) instead of the 3 px 16% box-shadow halo (FOCUS-RING-1 "One focus ring across the shared kit").
+
+## 1.18.6
 
 **ChipSelector: a short chip (e.g. "All") is at least 44 px wide, not only 44 px tall (KEFI-FIT-1 "kefi-web fit and hit-box fixes").**
 

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 ?? "";
@@ -610,8 +615,7 @@ var IS_WEB5 = reactNative.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;
@@ -636,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(
@@ -658,23 +662,23 @@ 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 : primary;
-    const ring = isFocused ? `0 0 0 ${FOCUS_RING_WIDTH}px ${withAlpha(ringColor, FOCUS_RING_ALPHA)}` : "none";
+    const ringColor = hasError ? errorColor : uiButtons.themeFocusRingColor(theme);
+    const ring = isFocused ? designTokens.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 };
   }, [
@@ -685,8 +689,12 @@ function useThemedInput(options = {}) {
     colors.border,
     colors.surface,
     colors.surfaceElevated,
+    colors.background,
+    colors.textSecondary,
+    editable,
     primary,
-    errorColor
+    errorColor,
+    theme
   ]);
   const focusBind = React2.useMemo(() => ({ onFocus: handleFocus, onBlur: handleBlur }), [handleFocus, handleBlur]);
   const hoverBind = React2.useMemo(
@@ -736,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;
@@ -1589,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]);
@@ -1637,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`
       }
     ),
@@ -1655,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" } : {};