@oxy.so/bloom 2.12.4 → 3.0.1

package/src/text-field/TextField.tsx

@@ -13,6 +13,7 @@ import { useReducedMotion } from 'react-native-reanimated';
 
 import { useTheme } from '../theme/use-theme';
 import { useInteractionState } from '../hooks/use-interaction-state';
+import { useFieldControl } from '../field/context';
 import { mergeRefs } from '../hooks/merge-refs';
 import {
   atoms as a,
@@ -338,7 +339,15 @@ export function TextFieldInput({
   // Read directly rather than through `useTextFieldContext`: a missing root is
   // not an error here, it is the branch below.
   const ctx = useContext(Context);
-  const inputDisabled = disabled === true || rest.editable === false;
+  // The enclosing `Field`, when there is one. This is the input's half of the
+  // association contract (`field/context.ts`): the field owns the id the label
+  // points at, which hint is currently described, the invalid state and the
+  // disabled state, and the input applies them. `disabled` combines with `||`
+  // because it is a constraint — a field that is off cannot be turned back on
+  // from inside it — while the id and the name DEFER to the field, so the
+  // visible label and the announced name cannot disagree.
+  const field = useFieldControl();
+  const inputDisabled = disabled === true || rest.editable === false || field?.disabled === true;
   const setInputDisabled = ctx?.setInputDisabled;
 
   // Report up, so the icon and suffix beside the input dim with it.
@@ -349,8 +358,16 @@ export function TextFieldInput({
   }, [setInputDisabled, inputDisabled]);
 
   if (ctx === null) {
+    // A standalone input wraps ITSELF in a field shell. The shell has to carry
+    // the enclosing `Field`'s invalid and disabled state too, or the chrome
+    // paints as if nothing were wrong while the input inside it is inert — the
+    // one arrangement where the two halves of the control disagree.
     return (
-      <TextField isInvalid={isInvalid} disabled={disabled} size={size}>
+      <TextField
+        isInvalid={isInvalid || field?.invalid === true}
+        disabled={disabled || field?.disabled === true}
+        size={size}
+      >
         <TextFieldInput
           label={label}
           placeholder={placeholder}
@@ -375,7 +392,7 @@ export function TextFieldInput({
     ),
   );
 
-  const invalid = ctx.isInvalid || isInvalid === true;
+  const invalid = ctx.isInvalid || isInvalid === true || field?.invalid === true;
   const fieldDisabled = ctx.disabled || inputDisabled;
   const state = {
     hovered: ctx.hovered,
@@ -392,12 +409,32 @@ export function TextFieldInput({
     'aria-disabled': fieldDisabled || undefined,
     'aria-invalid': invalid || undefined,
   };
+  // The enclosing `Field`'s wiring. `rest` is spread BEFORE these, so an
+  // explicit `nativeID` or `aria-describedby` on the input still wins — an app
+  // that already wired its own association keeps it.
+  const fieldProps = field
+    ? {
+        nativeID: rest.nativeID ?? field.controlId,
+        'aria-describedby': (rest as Record<string, unknown>)['aria-describedby'] ?? field.describedBy,
+        'aria-required': field.required || undefined,
+      }
+    : undefined;
+  // On web the `<label for>` already names the input, but `aria-label` would
+  // OVERRIDE it — so when the field has a text label the two must be the same
+  // string rather than two spellings of it. On native there is no association
+  // at all and this prop is the only name the control has.
+  const accessibleName = field?.labelText ?? label;
   const webDisabled = IS_WEB && fieldDisabled ? ({ disabled: true } as Record<string, unknown>) : undefined;
 
   if (floatingLabel) {
+    // The ids and the described-by still travel, so the error is announced —
+    // but a floating label inside a `Field` that also draws a label shows the
+    // same words twice, once above the box and once inside it. They are
+    // alternatives, not layers: use one or the other. `docs/field.mdx` says so
+    // where a caller will read it.
     return (
       <FloatingLabelInput
-        label={label}
+        label={accessibleName}
         value={value}
         onChangeText={onChangeText}
         onFocus={onFocus}
@@ -406,6 +443,7 @@ export function TextFieldInput({
         refs={refs}
         style={style}
         {...rest}
+        {...fieldProps}
         {...disabledProps}
         {...webDisabled}
       />
@@ -462,9 +500,10 @@ export function TextFieldInput({
         accessibilityHint={undefined}
         hitSlop={{ top: 20, bottom: 20, left: 20, right: 20 }}
         {...rest}
+        {...fieldProps}
         {...disabledProps}
         {...webDisabled}
-        accessibilityLabel={label}
+        accessibilityLabel={accessibleName}
         ref={refs}
         value={value}
         onChangeText={onChangeText}

package/src/theme/glass-colors.ts

@@ -271,3 +271,83 @@ export function resolveGlassColors(fill: string): GlassColors {
     hairlineWidth: BORDER_WIDTH.hairline,
   };
 }
+
+/**
+ * The CHROME alpha — the neutral counterpart of {@link GLASS_FILL_ALPHA}.
+ *
+ * ── WHY A SECOND ALPHA AND NOT THE SAME ONE ─────────────────────────────────
+ *
+ * {@link GLASS_FILL_ALPHA} prices a BRAND fill: a `primary` button whose label
+ * is that fill's own on-colour, sitting on one of Bloom's five neutral
+ * surfaces. A page header's island is neither of those things. It is a NEUTRAL
+ * surface off the existing ladder (`styles/surface-levels`, rung 1 — the same
+ * fill a card and a menu panel paint) and it floats over content Bloom does not
+ * own: a photograph, a video still, a map, a list that scrolls under it. Its
+ * label is the theme's own `text`, not an on-fill token.
+ *
+ * So the two materials are priced against different backdrops, and the number
+ * that is right for one is wrong for the other in a measurable direction:
+ *
+ *   brand fill   backdrop ∈ Bloom's own five surfaces      worst case: light mode,
+ *                                                          a white-ish page LIFTS
+ *                                                          the pane under a white
+ *                                                          label
+ *   chrome fill  backdrop ∈ [black, white] — anything      worst case: DARK mode
+ *                                                          over a WHITE backdrop,
+ *                                                          which lifts a dark pane
+ *                                                          under a white label
+ *
+ * That is why dark carries the HIGHER alpha here and light the lower one, which
+ * is the opposite of the intuition that a dark UI can afford more transparency.
+ * A dark island has the whole luminance range above it to be washed out INTO; a
+ * light island over the same white backdrop barely moves, because it is already
+ * near white.
+ *
+ * ── WHAT THESE TWO VALUES BUY ───────────────────────────────────────────────
+ *
+ * Measured over 64 presets x the two extremes of the backdrop range, with the
+ * theme's own `text` as the label, in `theme/__tests__/glass-colors.test.ts`.
+ * The gate pins the floors EXACTLY, in both directions, so a hundredth in
+ * either direction has to be a decision:
+ *
+ *   light 0.72  worst AA ratio over the range  …pinned by the gate
+ *   dark  0.80  worst AA ratio over the range  …pinned by the gate
+ *
+ * and both remain genuinely translucent: the gate also measures how far the
+ * PAINTED pane moves between a black and a white backdrop, asserts that
+ * movement is non-zero, and asserts it is monotonic in the alpha — so an alpha
+ * quietly raised to 1.0 to buy contrast fails on the translucency side rather
+ * than passing on the legibility side.
+ */
+export const GLASS_CHROME_ALPHA = { light: 0.72, dark: 0.8 } as const;
+
+/**
+ * Resolve the pane around a NEUTRAL chrome fill — an island of controls
+ * floating over content.
+ *
+ * Both arguments are resolved colour strings the caller already holds, for the
+ * same reason {@link resolveGlassColors} takes one: the caller is the only one
+ * who knows which rung of the surface ladder its container sits on. In practice
+ * that is `resolveSurfaceLevel(theme, 1)` — `.background` for `fill`, `.border`
+ * for `hairline` — which is the fill a card and a menu panel already paint, so
+ * an island reads as Bloom chrome rather than as a fourth material.
+ *
+ * The LABEL is not returned, exactly as in `resolveGlassColors`: a neutral pane
+ * carries the theme's own `text`, and the rungs under it come from
+ * `surfaceTextOn(theme, fill)` — the caller is already holding both.
+ */
+export function resolveChromeGlassColors(
+  fill: string,
+  hairline: string,
+  isDark: boolean,
+): GlassColors {
+  return {
+    fill: withAlpha(fill, GLASS_CHROME_ALPHA[isDark ? 'dark' : 'light']),
+    // The hairline keeps a little more body than the pane it edges: it is the
+    // lip of the island, and a hairline that dissolves at the same rate as the
+    // fill stops reading as an edge at exactly the moment the fill stops
+    // reading as a surface.
+    hairline: withAlpha(hairline, Math.min(1, GLASS_CHROME_ALPHA[isDark ? 'dark' : 'light'] + 0.12)),
+    hairlineWidth: BORDER_WIDTH.hairline,
+  };
+}

package/lib/commonjs/social-button/use-svg-id.js

@@ -1,16 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useSvgIdPrefix = useSvgIdPrefix;
-var _react = require("react");
-/**
- * A DOM-safe id prefix, per component instance. Two marks of one brand on a
- * page must not resolve each other's `url(#…)`, and React's `useId` carries
- * characters an SVG id cannot.
- */
-function useSvgIdPrefix(prefix) {
-  return `${prefix}-${(0, _react.useId)().replace(/[^a-zA-Z0-9]/g, '')}-`;
-}
-//# sourceMappingURL=use-svg-id.js.map

package/lib/commonjs/social-button/use-svg-id.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_react","require","useSvgIdPrefix","prefix","useId","replace"],"sourceRoot":"../../../src","sources":["social-button/use-svg-id.ts"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAEA;AACA;AACA;AACA;AACA;AACO,SAASC,cAAcA,CAACC,MAAc,EAAU;EACrD,OAAO,GAAGA,MAAM,IAAI,IAAAC,YAAK,EAAC,CAAC,CAACC,OAAO,CAAC,eAAe,EAAE,EAAE,CAAC,GAAG;AAC7D","ignoreList":[]}

package/lib/module/social-button/use-svg-id.js

@@ -1,13 +0,0 @@
-"use strict";
-
-import { useId } from 'react';
-
-/**
- * A DOM-safe id prefix, per component instance. Two marks of one brand on a
- * page must not resolve each other's `url(#…)`, and React's `useId` carries
- * characters an SVG id cannot.
- */
-export function useSvgIdPrefix(prefix) {
-  return `${prefix}-${useId().replace(/[^a-zA-Z0-9]/g, '')}-`;
-}
-//# sourceMappingURL=use-svg-id.js.map

package/lib/module/social-button/use-svg-id.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["useId","useSvgIdPrefix","prefix","replace"],"sourceRoot":"../../../src","sources":["social-button/use-svg-id.ts"],"mappings":";;AAAA,SAASA,KAAK,QAAQ,OAAO;;AAE7B;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,cAAcA,CAACC,MAAc,EAAU;EACrD,OAAO,GAAGA,MAAM,IAAIF,KAAK,CAAC,CAAC,CAACG,OAAO,CAAC,eAAe,EAAE,EAAE,CAAC,GAAG;AAC7D","ignoreList":[]}

package/lib/typescript/commonjs/social-button/use-svg-id.d.ts

@@ -1,7 +0,0 @@
-/**
- * A DOM-safe id prefix, per component instance. Two marks of one brand on a
- * page must not resolve each other's `url(#…)`, and React's `useId` carries
- * characters an SVG id cannot.
- */
-export declare function useSvgIdPrefix(prefix: string): string;
-//# sourceMappingURL=use-svg-id.d.ts.map

package/lib/typescript/commonjs/social-button/use-svg-id.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"use-svg-id.d.ts","sourceRoot":"","sources":["../../../../src/social-button/use-svg-id.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAErD"}

package/lib/typescript/module/social-button/use-svg-id.d.ts

@@ -1,7 +0,0 @@
-/**
- * A DOM-safe id prefix, per component instance. Two marks of one brand on a
- * page must not resolve each other's `url(#…)`, and React's `useId` carries
- * characters an SVG id cannot.
- */
-export declare function useSvgIdPrefix(prefix: string): string;
-//# sourceMappingURL=use-svg-id.d.ts.map

package/lib/typescript/module/social-button/use-svg-id.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"use-svg-id.d.ts","sourceRoot":"","sources":["../../../../src/social-button/use-svg-id.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAErD"}

package/src/social-button/use-svg-id.ts

@@ -1,10 +0,0 @@
-import { useId } from 'react';
-
-/**
- * A DOM-safe id prefix, per component instance. Two marks of one brand on a
- * page must not resolve each other's `url(#…)`, and React's `useId` carries
- * characters an SVG id cannot.
- */
-export function useSvgIdPrefix(prefix: string): string {
-  return `${prefix}-${useId().replace(/[^a-zA-Z0-9]/g, '')}-`;
-}