@dloizides/ui-forms 1.25.0 → 1.25.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.d.mts CHANGED
@@ -501,7 +501,7 @@ interface UseThemedInputOptions {
501
501
  onFocus?: (e: FocusEvent) => void;
502
502
  /** Consumer blur handler — composed with the internal focus-state toggle. */
503
503
  onBlur?: (e: BlurEvent) => void;
504
- /** `false` renders the read-only treatment: the recessed ground fill and the secondary ink. */
504
+ /** `false` renders the read-only treatment: flat surface fill, no input outline, secondary ink. */
505
505
  editable?: boolean;
506
506
  }
507
507
  interface ThemedInput {
package/dist/index.d.ts CHANGED
@@ -501,7 +501,7 @@ interface UseThemedInputOptions {
501
501
  onFocus?: (e: FocusEvent) => void;
502
502
  /** Consumer blur handler — composed with the internal focus-state toggle. */
503
503
  onBlur?: (e: BlurEvent) => void;
504
- /** `false` renders the read-only treatment: the recessed ground fill and the secondary ink. */
504
+ /** `false` renders the read-only treatment: flat surface fill, no input outline, secondary ink. */
505
505
  editable?: boolean;
506
506
  }
507
507
  interface ThemedInput {
package/dist/index.js CHANGED
@@ -862,9 +862,11 @@ function useThemedInput(options = {}) {
862
862
  const style = React2.useMemo(() => {
863
863
  const restBorder = hasError ? errorColor : colors.border;
864
864
  const focusBorder = hasError ? errorColor : primary;
865
- const borderColor = isFocused ? focusBorder : isHovered ? withAlpha(colors.text, HOVER_BORDER_ALPHA) : restBorder;
865
+ const editableBorder = isFocused ? focusBorder : isHovered ? withAlpha(colors.text, HOVER_BORDER_ALPHA) : restBorder;
866
+ const readOnlyBorder = hasError ? errorColor : colors.surface;
867
+ const borderColor = editable ? editableBorder : readOnlyBorder;
866
868
  const editableFill = isFocused ? colors.surface : colors.surfaceElevated;
867
- const backgroundColor = editable ? editableFill : colors.background;
869
+ const backgroundColor = editable ? editableFill : colors.surface;
868
870
  const base = { color: editable ? colors.text : colors.textSecondary, borderColor, backgroundColor };
869
871
  if (!IS_WEB5) return base;
870
872
  const ringColor = hasError ? errorColor : uiButtons.themeFocusRingColor(theme);