@dloizides/ui-forms 1.25.0 → 1.26.0

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## 1.26.0
+
+INVOICE-3 "Invoice interface over a user-chosen folder": owner picks.
+
+- `SelectControl` trigger fills with `surfaceElevated`, like an editable field, so it differs from read-only.
+- Read-only `useThemedInput` draws the rest border, so the box shows on a form of the same fill.
+- Placeholder is solid `textSecondary`: 0.6 alpha measured 2.38 against the 4.5 AA floor.
+- `FormField` gains `inputRef`.
+
 ## 1.25.0
 
 INVOICE-3 "Invoice interface over a user-chosen folder": extracted from invoice-web.

package/dist/index.d.mts

@@ -438,8 +438,10 @@ interface FormFieldProps extends Omit<TextInputProps, 'style'> {
     recentKey?: string;
     /** Cap on remembered values when {@link recentKey} is set (most-recent-first). Default 10. */
     recentMax?: number;
+    /** Reaches the input, for focusing it without scrolling the page. Not forwarded when `recentKey` is set. */
+    inputRef?: React.Ref<TextInput>;
 }
-declare const FormField: ({ label, labelHidden, required, error, containerStyle, recentKey, recentMax, ...textInputProps }: FormFieldProps) => React.ReactElement;
+declare const FormField: ({ label, labelHidden, required, error, containerStyle, recentKey, recentMax, inputRef, ...textInputProps }: FormFieldProps) => React.ReactElement;
 
 /**
  * `ThemedTextInput` — the shared, readable + lively text-input primitive. A thin `<TextInput>`
@@ -501,7 +503,7 @@ 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. */
+    /** `false` renders the read-only treatment: flat surface fill, no input outline, secondary ink. */
     editable?: boolean;
 }
 interface ThemedInput {

package/dist/index.d.ts

@@ -438,8 +438,10 @@ interface FormFieldProps extends Omit<TextInputProps, 'style'> {
     recentKey?: string;
     /** Cap on remembered values when {@link recentKey} is set (most-recent-first). Default 10. */
     recentMax?: number;
+    /** Reaches the input, for focusing it without scrolling the page. Not forwarded when `recentKey` is set. */
+    inputRef?: React.Ref<TextInput>;
 }
-declare const FormField: ({ label, labelHidden, required, error, containerStyle, recentKey, recentMax, ...textInputProps }: FormFieldProps) => React.ReactElement;
+declare const FormField: ({ label, labelHidden, required, error, containerStyle, recentKey, recentMax, inputRef, ...textInputProps }: FormFieldProps) => React.ReactElement;
 
 /**
  * `ThemedTextInput` — the shared, readable + lively text-input primitive. A thin `<TextInput>`
@@ -501,7 +503,7 @@ 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. */
+    /** `false` renders the read-only treatment: flat surface fill, no input outline, secondary ink. */
     editable?: boolean;
 }
 interface ThemedInput {

package/dist/index.js

@@ -813,7 +813,6 @@ var TRANSITION_DURATION = "0.14s";
 var TRANSITION_TIMING = "ease";
 var NO_RING = { outlineWidth: 0 };
 var HOVER_BORDER_ALPHA = 0.22;
-var PLACEHOLDER_ALPHA = 0.6;
 var HEX_RADIX = 16;
 var HEX_SHORT_LENGTH = 4;
 var HEX_FULL_LENGTH = 7;
@@ -862,9 +861,10 @@ function useThemedInput(options = {}) {
   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 editableBorder = isFocused ? focusBorder : isHovered ? withAlpha(colors.text, HOVER_BORDER_ALPHA) : restBorder;
+    const borderColor = editable ? editableBorder : restBorder;
     const editableFill = isFocused ? colors.surface : colors.surfaceElevated;
-    const backgroundColor = editable ? editableFill : colors.background;
+    const backgroundColor = editable ? editableFill : colors.surface;
     const base = { color: editable ? colors.text : colors.textSecondary, borderColor, backgroundColor };
     if (!IS_WEB5) return base;
     const ringColor = hasError ? errorColor : uiButtons.themeFocusRingColor(theme);
@@ -899,7 +899,7 @@ function useThemedInput(options = {}) {
   );
   return {
     style,
-    placeholderTextColor: withAlpha(colors.textSecondary, PLACEHOLDER_ALPHA),
+    placeholderTextColor: colors.textSecondary,
     isFocused,
     isHovered,
     focusBind,
@@ -1142,6 +1142,7 @@ var FormField = ({
   containerStyle,
   recentKey,
   recentMax,
+  inputRef,
   ...textInputProps
 }) => /* @__PURE__ */ jsxRuntime.jsx(
   Field,
@@ -1161,7 +1162,7 @@ var FormField = ({
         testID: "form-field-input",
         ...textInputProps
       };
-      return recentKey !== void 0 && recentKey !== "" ? /* @__PURE__ */ jsxRuntime.jsx(RecentInputField, { label, recentKey, recentMax, ...inputProps }) : /* @__PURE__ */ jsxRuntime.jsx(ThemedTextInput, { ...inputProps });
+      return recentKey !== void 0 && recentKey !== "" ? /* @__PURE__ */ jsxRuntime.jsx(RecentInputField, { label, recentKey, recentMax, ...inputProps }) : /* @__PURE__ */ jsxRuntime.jsx(ThemedTextInput, { ref: inputRef, ...inputProps });
     }
   }
 );
@@ -1742,7 +1743,7 @@ function SelectControl({
         "aria-expanded": isOpen,
         "aria-labelledby": labelledById,
         onPress: toggle,
-        style: [controlStyles.selectTrigger, { borderColor: colors.border, backgroundColor: colors.surface }],
+        style: [controlStyles.selectTrigger, { borderColor: colors.border, backgroundColor: colors.surfaceElevated }],
         testID: `${testID}-trigger`,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { numberOfLines: 1, style: [controlStyles.selectTriggerText, { color: value === "" ? colors.textSecondary : colors.text }], children: selectedLabel }),