@multiplatform.one/theme 7.81.2 → 7.82.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiplatform.one/theme",
-  "version": "7.81.2",
+  "version": "7.82.0",
   "description": "Tamagui theme system for multiplatform.one",
   "keywords": [
     "multiplatform",
@@ -72,8 +72,8 @@
     "access": "public"
   },
   "dependencies": {
-    "@multiplatform.one/platform": "^7.81.2",
-    "@multiplatform.one/store": "^7.81.2",
+    "@multiplatform.one/platform": "^7.82.0",
+    "@multiplatform.one/store": "^7.82.0",
     "@tamagui/animations-react-native": "2.7.6",
     "@tamagui/colors": "2.7.6",
     "@tamagui/config": "2.7.6",
@@ -89,8 +89,8 @@
   },
   "devDependencies": {
     "@expo/prebuild-config": "55.0.18",
-    "@multiplatform.one/config": "7.81.2",
-    "@multiplatform.one/test-utils": "7.81.2",
+    "@multiplatform.one/config": "7.82.0",
+    "@multiplatform.one/test-utils": "7.82.0",
     "@tamagui/animations-css": "2.7.6",
     "@tamagui/animations-reanimated": "2.7.6",
     "@tamagui/font-inter": "2.7.6",

package/src/theme/Surface.spec.tsx

@@ -154,6 +154,40 @@ describe("Surface nesting (LC-78)", () => {
   });
 });
 
+describe("Surface field (LC-176, FZ-8711)", () => {
+  function read(tree: (probe: ReactNode) => ReactNode): SurfaceIntent {
+    let intent: SurfaceIntent | undefined;
+    render(tree(createElement(Probe, { onRead: (value) => (intent = value) })) as never);
+    if (!intent) throw new Error("Surface probe did not render");
+    return intent;
+  }
+
+  it("a field's frame marks its subtree, inside a bar too, and nests unchanged", () => {
+    expect(read((probe) => probe).field).toBe(false);
+    const inBar = read((probe) =>
+      createElement(Surface, { bar: true }, createElement(Surface, { field: true }, probe)),
+    );
+    expect(inBar).toMatchObject({ bar: true, field: true });
+    expect(
+      read((probe) =>
+        createElement(Surface, { field: true }, createElement(Surface, { size: "$3" }, probe)),
+      ).field,
+    ).toBe(true);
+  });
+
+  it("a painted surface (an overlay, a card) resets it, so a menu from a slotted glyph is content", () => {
+    expect(
+      read((probe) =>
+        createElement(
+          Surface,
+          { field: true },
+          createElement(Surface, { painted: false, elevated: true }, probe),
+        ),
+      ).field,
+    ).toBe(false);
+  });
+});
+
 describe("useResolvedKnobs inside Surface", () => {
   const inSurface =
     (size: SizeTokens) =>

package/src/theme/Surface.tsx

@@ -17,12 +17,18 @@ export type SurfaceSize = SizeTokens | "unset";
  * `elevated`: the subtree sits on the elevated ground (`elevatedSurface`
  * unpainted), which in dark is the control wash's own step, so controls on it
  * step their fill one up (LC-153, FZ-7944). Any explicit `painted` resets it.
+ *
+ * `field`: the subtree is inside a text field's frame, so an icon button there
+ * is part of the field: a bare tinted glyph, never glass or a plate, even when
+ * the field sits in a bar (LC-176, FZ-8711). Any explicit `painted` resets it,
+ * so a menu opened from that glyph is content again.
  */
 export type SurfaceIntent = {
   size: SurfaceSize;
   painted: boolean;
   bar: boolean;
   elevated: boolean;
+  field: boolean;
 };
 
 export const SurfaceContext = createStyledContext<SurfaceIntent>({
@@ -30,6 +36,7 @@ export const SurfaceContext = createStyledContext<SurfaceIntent>({
   painted: false,
   bar: false,
   elevated: false,
+  field: false,
 });
 
 /** True inside a bar (LC-153): neutral buttons there are plain, not tinted. */
@@ -37,6 +44,11 @@ export function useBarSurface(): boolean {
   return SurfaceContext.useStyledContext().bar ?? false;
 }
 
+/** True inside a text field's frame (LC-176): an icon button there is the field's bare glyph. */
+export function useFieldSurface(): boolean {
+  return SurfaceContext.useStyledContext().field ?? false;
+}
+
 /** True on an elevated ground (an overlay frame, an unnested Panel): controls step their wash up in dark. */
 export function useElevatedSurface(): boolean {
   return SurfaceContext.useStyledContext().elevated ?? false;
@@ -121,7 +133,8 @@ export function clampSurfaceSize(requested: SurfaceSize, parent: SurfaceSize): S
  * inherits it. `bar` marks a bar subtree (LC-153); omitted, it inherits unless
  * `painted` is given, which resets it. `elevated` marks a frame that paints
  * the elevated ground; omitted it inherits unless `painted` is given, which
- * resets it. Either way a painted value opens a new surface with its own
+ * resets it. `field` marks a text field's frame the same way. Either way a
+ * painted value opens a new surface with its own
  * inset, so the page gutter does not reach inside it (LC-146).
  *
  * @example A table cell's editors at the row's control height
@@ -132,12 +145,14 @@ export function Surface({
   painted,
   bar,
   elevated,
+  field,
   children,
 }: {
   size?: SizeTokens;
   painted?: boolean;
   bar?: boolean;
   elevated?: boolean;
+  field?: boolean;
   children?: ReactNode;
 }) {
   const parent = SurfaceContext.useStyledContext();
@@ -145,12 +160,14 @@ export function Surface({
   const nextPainted = painted ?? parent.painted ?? false;
   const nextBar = bar ?? (painted === undefined ? (parent.bar ?? false) : false);
   const nextElevated = elevated ?? (painted === undefined ? (parent.elevated ?? false) : false);
+  const nextField = field ?? (painted === undefined ? (parent.field ?? false) : false);
   return (
     <SurfaceContext.Provider
       size={nextSize}
       painted={nextPainted}
       bar={nextBar}
       elevated={nextElevated}
+      field={nextField}
     >
       {painted === undefined ? children : <PageGutter inset={null}>{children}</PageGutter>}
     </SurfaceContext.Provider>

package/types/theme/Surface.d.ts

@@ -14,16 +14,24 @@ export type SurfaceSize = SizeTokens | "unset";
  * `elevated`: the subtree sits on the elevated ground (`elevatedSurface`
  * unpainted), which in dark is the control wash's own step, so controls on it
  * step their fill one up (LC-153, FZ-7944). Any explicit `painted` resets it.
+ *
+ * `field`: the subtree is inside a text field's frame, so an icon button there
+ * is part of the field: a bare tinted glyph, never glass or a plate, even when
+ * the field sits in a bar (LC-176, FZ-8711). Any explicit `painted` resets it,
+ * so a menu opened from that glyph is content again.
  */
 export type SurfaceIntent = {
     size: SurfaceSize;
     painted: boolean;
     bar: boolean;
     elevated: boolean;
+    field: boolean;
 };
 export declare const SurfaceContext: import("@tamagui/web").StyledContext<SurfaceIntent>;
 /** True inside a bar (LC-153): neutral buttons there are plain, not tinted. */
 export declare function useBarSurface(): boolean;
+/** True inside a text field's frame (LC-176): an icon button there is the field's bare glyph. */
+export declare function useFieldSurface(): boolean;
 /** True on an elevated ground (an overlay frame, an unnested Panel): controls step their wash up in dark. */
 export declare function useElevatedSurface(): boolean;
 /**
@@ -72,17 +80,19 @@ export declare function clampSurfaceSize(requested: SurfaceSize, parent: Surface
  * inherits it. `bar` marks a bar subtree (LC-153); omitted, it inherits unless
  * `painted` is given, which resets it. `elevated` marks a frame that paints
  * the elevated ground; omitted it inherits unless `painted` is given, which
- * resets it. Either way a painted value opens a new surface with its own
+ * resets it. `field` marks a text field's frame the same way. Either way a
+ * painted value opens a new surface with its own
  * inset, so the page gutter does not reach inside it (LC-146).
  *
  * @example A table cell's editors at the row's control height
  * <Surface size="$3">{cell}</Surface>
  */
-export declare function Surface({ size, painted, bar, elevated, children, }: {
+export declare function Surface({ size, painted, bar, elevated, field, children, }: {
     size?: SizeTokens;
     painted?: boolean;
     bar?: boolean;
     elevated?: boolean;
+    field?: boolean;
     children?: ReactNode;
 }): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Surface.d.ts.map

package/types/theme/Surface.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Surface.d.ts","sourceRoot":"","sources":["../../src/theme/Surface.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAuB,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC;AAI/D,oEAAoE;AACpE,MAAM,MAAM,WAAW,GAAG,UAAU,GAAG,OAAO,CAAC;AAC/C;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,aAAa,GAAG;IAC1B,IAAI,EAAE,WAAW,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC;IACjB,GAAG,EAAE,OAAO,CAAC;IACb,QAAQ,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,cAAc,qDAKzB,CAAC;AAEH,+EAA+E;AAC/E,wBAAgB,aAAa,IAAI,OAAO,CAEvC;AAED,6GAA6G;AAC7G,wBAAgB,kBAAkB,IAAI,OAAO,CAE5C;AAKD;;;GAGG;AACH,wBAAgB,eAAe,CAAC,IAAI,EAAE,WAAW,GAAG,MAAM,GAAG,SAAS,CAErE;AAED;;;;;;GAMG;AACH,wBAAgB,iBAAiB,CAAC,CAAC,EAAE,WAAW,GAAG,MAAM,EAAE,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,MAAM,CAI1F;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAAC,SAAS,EAAE,WAAW,GAAG,MAAM,GAAG,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,CAEzE;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,SAAS,EAAE,WAAW,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAG3F;AAED;;;;;;GAMG;AACH,wBAAgB,cAAc,CAAC,IAAI,EAAE,UAAU,GAAG,MAAM,GAAG,UAAU,CAKpE;AAED;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAAC,SAAS,EAAE,WAAW,EAAE,MAAM,EAAE,WAAW,GAAG,WAAW,CAQzF;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,OAAO,CAAC,EACtB,IAAI,EACJ,OAAO,EACP,GAAG,EACH,QAAQ,EACR,QAAQ,GACT,EAAE;IACD,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,2CAgBA"}
+{"version":3,"file":"Surface.d.ts","sourceRoot":"","sources":["../../src/theme/Surface.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAuB,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC;AAI/D,oEAAoE;AACpE,MAAM,MAAM,WAAW,GAAG,UAAU,GAAG,OAAO,CAAC;AAC/C;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,MAAM,aAAa,GAAG;IAC1B,IAAI,EAAE,WAAW,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC;IACjB,GAAG,EAAE,OAAO,CAAC;IACb,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,OAAO,CAAC;CAChB,CAAC;AAEF,eAAO,MAAM,cAAc,qDAMzB,CAAC;AAEH,+EAA+E;AAC/E,wBAAgB,aAAa,IAAI,OAAO,CAEvC;AAED,iGAAiG;AACjG,wBAAgB,eAAe,IAAI,OAAO,CAEzC;AAED,6GAA6G;AAC7G,wBAAgB,kBAAkB,IAAI,OAAO,CAE5C;AAKD;;;GAGG;AACH,wBAAgB,eAAe,CAAC,IAAI,EAAE,WAAW,GAAG,MAAM,GAAG,SAAS,CAErE;AAED;;;;;;GAMG;AACH,wBAAgB,iBAAiB,CAAC,CAAC,EAAE,WAAW,GAAG,MAAM,EAAE,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,MAAM,CAI1F;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAAC,SAAS,EAAE,WAAW,GAAG,MAAM,GAAG,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,CAEzE;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,SAAS,EAAE,WAAW,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAG3F;AAED;;;;;;GAMG;AACH,wBAAgB,cAAc,CAAC,IAAI,EAAE,UAAU,GAAG,MAAM,GAAG,UAAU,CAKpE;AAED;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAAC,SAAS,EAAE,WAAW,EAAE,MAAM,EAAE,WAAW,GAAG,WAAW,CAQzF;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,OAAO,CAAC,EACtB,IAAI,EACJ,OAAO,EACP,GAAG,EACH,QAAQ,EACR,KAAK,EACL,QAAQ,GACT,EAAE;IACD,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,2CAkBA"}