@oxy.so/bloom 5.4.1 → 6.1.0

package/src/stay-search/GuestPicker.tsx

@@ -1,8 +1,8 @@
 import React, { memo } from 'react';
 import { View } from 'react-native';
 
-import { Button } from '../button';
-import { resolveButtonRamps } from '../button/shared';
+import { LinkButton } from '../button';
+
 import { StepperRow } from '../stepper';
 import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
@@ -48,7 +48,7 @@ function GuestPickerComponent({
   note,
   onClose,
   closeLabel: closeLabelProp,
-  size = 'medium',
+  size,
   style,
   testID,
 }: GuestPickerProps) {
@@ -102,9 +102,9 @@ function GuestPickerComponent({
       ) : null}
       {close ? (
         <View style={{ alignItems: 'flex-end', paddingTop: 12 }}>
-          <Button variant="link" size="small" onPress={close} testID={testID ? `${testID}-close` : undefined}>
+          <LinkButton  size="sm" onPress={close} testID={testID ? `${testID}-close` : undefined}>
             {closeLabel}
-          </Button>
+          </LinkButton>
         </View>
       ) : null}
     </View>

package/src/stay-search/StaySearchCompact.tsx

@@ -114,14 +114,14 @@ function StaySearchCompactComponent({
       </Pressable>
       {onFilterPress ? (
         <Button
-          variant="secondary"
-          size="medium"
+
+          size="md"
           iconOnly
           icon={filterIcon}
           onPress={onFilterPress}
           accessibilityLabel={filterLabel}
           testID={testID ? `${testID}-filter` : undefined}
-          style={{ marginRight: 9, flexShrink: 0 }}
+          style={{ marginRight: 9, flexShrink: 0 }} tone="neutral" appearance="outline"
         />
       ) : null}
     </View>

package/src/stay-search/types.ts

@@ -169,7 +169,7 @@ export interface GuestPickerProps {
   onClose?: () => void;
   /** `"Close"` in English; follows the locale. */
   closeLabel?: string;
-  /** Stepper size. Default `'medium'`; `'small'` for a popover. */
+  /** Stepper size. Default `'md'`; `'sm'` for a popover. */
   size?: StepperSize;
   style?: StyleProp<ViewStyle>;
   /** Derives `-<kind>` per row (then the stepper's own suffixes). */

package/src/stepper/Stepper.tsx

@@ -1,4 +1,5 @@
-import React, { memo, useCallback, useMemo } from 'react';
+import { useBloomAppearance } from '../appearance';
+import React, { memo, useCallback } from 'react';
 import { Platform, View, type AccessibilityActionEvent } from 'react-native';
 
 import { Button } from '../button';
@@ -51,10 +52,10 @@ const IS_WEB = Platform.OS === 'web';
 
 const SIZE_CONFIG: Record<
   StepperSize,
-  { button: 'small' | 'medium'; type: TypeScaleVariant; valueWidth: number; height: number; gap: number }
+  { button: 'sm' | 'md'; type: TypeScaleVariant; valueWidth: number; height: number; gap: number }
 > = {
-  small: { button: 'small', type: 'body-semibold', valueWidth: 24, height: 32, gap: 8 },
-  medium: { button: 'medium', type: 'headline-semibold', valueWidth: 32, height: 36, gap: 12 },
+  sm: { button: 'sm', type: 'body-semibold', valueWidth: 24, height: 32, gap: 8 },
+  md: { button: 'md', type: 'headline-semibold', valueWidth: 32, height: 36, gap: 12 },
 };
 
 /** Snap to `step` from `min` and clamp, without floating-point drift. */
@@ -90,7 +91,7 @@ function StepperComponent({
   max,
   step = 1,
   disabled: disabledProp = false,
-  size = 'medium',
+  size: sizeProp,
   formatValue,
   accessibilityLabel,
   decrementLabel: decrementLabelProp,
@@ -100,6 +101,8 @@ function StepperComponent({
   style,
   testID,
 }: StepperProps) {
+  const { size: inheritedSize } = useBloomAppearance({ size: sizeProp }, { size: 'md', tone: 'neutral' });
+  const size = inheritedSize === 'xs' || inheritedSize === 'sm' ? 'sm' : 'md';
   const common = useCommonMessages();
   const { messages } = useMessages(STEPPER_MESSAGES);
   const decrementLabel = decrementLabelProp ?? messages.decrease;
@@ -198,7 +201,7 @@ function StepperComponent({
       style={[{ flexDirection: 'row', alignItems: 'center', gap: config.gap }, style]}
     >
       <Button
-        variant="secondary"
+
         size={config.button}
         iconOnly
         icon={removes ? RiDeleteBinLine : RiSubtractLine}
@@ -206,11 +209,13 @@ function StepperComponent({
         disabled={!(canDecrement || removes)}
         accessibilityLabel={removes ? removeLabel : decrementLabel}
         tabIndex={removes ? 0 : -1}
-        testID={testID ? `${testID}-decrement` : undefined}
+        testID={testID ? `${testID}-decrement` : undefined} tone="neutral" appearance="outline"
       />
       <View
         accessibilityRole="adjustable"
         accessibilityLabel={field.accessibilityLabel}
+        aria-describedby={field.describedBy}
+        aria-invalid={field.invalid || undefined}
         aria-valuemin={min}
         aria-valuemax={max}
         aria-valuenow={value}
@@ -236,7 +241,7 @@ function StepperComponent({
         </Text>
       </View>
       <Button
-        variant="secondary"
+
         size={config.button}
         iconOnly
         icon={RiAddLine}
@@ -244,7 +249,7 @@ function StepperComponent({
         disabled={!canIncrement}
         accessibilityLabel={incrementLabel}
         tabIndex={-1}
-        testID={testID ? `${testID}-increment` : undefined}
+        testID={testID ? `${testID}-increment` : undefined} tone="neutral" appearance="outline"
       />
     </View>
   );

package/src/stepper/types.ts

@@ -1,8 +1,8 @@
 import type { ReactNode } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 
-/** `small` pairs 32px buttons with body text; `medium` (default) 38px buttons with headline text. */
-export type StepperSize = 'small' | 'medium';
+/** `sm` pairs 32px buttons with body text; `md` (default) 36px buttons with headline text. */
+export type StepperSize = 'sm' | 'md';
 
 export interface StepperProps {
   /** The current value. The stepper is fully controlled. */
@@ -17,7 +17,7 @@ export interface StepperProps {
   step?: number;
   /** Disables both buttons and the keyboard. */
   disabled?: boolean;
-  /** Default `medium`. */
+  /** Default `md`. */
   size?: StepperSize;
   /** How the value is drawn and announced (`aria-valuetext`), e.g. `(n) => \`${n}+\``. */
   formatValue?: (value: number) => string;

package/src/sticker/Sticker.tsx

@@ -0,0 +1,5 @@
+import { createSticker } from './create-sticker';
+import { loadLottiePlayer, warnLottieUnavailable } from './lottie-module';
+
+/** A sticker, animated with `lottie-react-native` when it is installed. */
+export const Sticker = createSticker({ loadLottiePlayer, warnLottieUnavailable });

package/src/sticker/Sticker.web.tsx

@@ -0,0 +1,5 @@
+import { createSticker } from './create-sticker';
+import { loadLottiePlayer, warnLottieUnavailable } from './lottie-module.web';
+
+/** A sticker, animated with `@lottiefiles/dotlottie-react` when it is installed. */
+export const Sticker = createSticker({ loadLottiePlayer, warnLottieUnavailable });

package/src/sticker/create-sticker.tsx

@@ -0,0 +1,129 @@
+import React, { memo, useCallback, useEffect, useState } from 'react';
+import { View } from 'react-native';
+import { useReducedMotion } from 'react-native-reanimated';
+
+import { useMessages } from '../locale/messages';
+import { MESSAGE_MEDIA_MESSAGES } from '../message-media/messages';
+import { MediaImage } from '../message-media/parts';
+import type { ComponentType } from 'react';
+import type { LottiePlayerProps, StickerProps } from './types';
+
+export interface StickerPlatform {
+  /** The platform's Lottie player, or `null` when its optional peer is missing. */
+  loadLottiePlayer(): ComponentType<LottiePlayerProps> | null;
+  warnLottieUnavailable(): void;
+}
+
+/** A sticker's transparent parts must stay transparent: no placeholder colour. */
+const TRANSPARENT = 'transparent';
+
+/**
+ * A sticker, animated when it can be and still when it cannot.
+ *
+ * The still `fallback` is ALWAYS drawn first and stays until the animation
+ * reports it has loaded, so a sticker never flashes blank while its Lottie file
+ * arrives — and when the animation cannot play at all (no player installed on
+ * this platform, a failed load, a person who asked for reduced motion) the still
+ * is simply what remains. Every one of those outcomes looks like a sticker.
+ *
+ * Draws no surface: no background, no radius, no padding. A sticker with a
+ * bubble behind it is a picture of a sticker. `StickerMessage` is this plus the
+ * chat affordances (press, sending, failed).
+ */
+export function createSticker({
+  loadLottiePlayer,
+  warnLottieUnavailable,
+}: StickerPlatform) {
+  function StickerComponent({
+    animation,
+    fallback,
+    size = 128,
+    loop = true,
+    paused = false,
+    accessibilityLabel: accessibilityLabelProp,
+    decorative = false,
+    style,
+    testID,
+  }: StickerProps) {
+    const { messages } = useMessages(MESSAGE_MEDIA_MESSAGES);
+    const reducedMotion = useReducedMotion();
+    const [loaded, setLoaded] = useState(false);
+    const [failed, setFailed] = useState(false);
+
+    // A new animation starts from its still again.
+    useEffect(() => {
+      setLoaded(false);
+      setFailed(false);
+    }, [animation]);
+
+    const Player =
+      animation && !reducedMotion && !failed ? loadLottiePlayer() : null;
+    useEffect(() => {
+      if (animation && !reducedMotion && !Player) warnLottieUnavailable();
+    }, [animation, reducedMotion, Player]);
+
+    const onLoad = useCallback(() => setLoaded(true), []);
+    const onError = useCallback(() => setFailed(true), []);
+
+    const showStill = !Player || !loaded;
+
+    return (
+      <View
+        accessible={!decorative}
+        accessibilityRole={decorative ? undefined : 'image'}
+        accessibilityLabel={decorative ? undefined : accessibilityLabelProp ?? messages.sticker}
+        aria-hidden={decorative}
+        style={[
+          { width: size, height: size, position: 'relative' },
+          style ?? null,
+        ]}
+        testID={testID}
+      >
+        {showStill ? (
+          <View
+            style={{
+              position: 'absolute',
+              top: 0,
+              left: 0,
+              width: size,
+              height: size,
+            }}
+          >
+            <MediaImage
+              source={fallback}
+              placeholder={TRANSPARENT}
+              resizeMode='contain'
+              testID={testID ? `${testID}-still` : undefined}
+            />
+          </View>
+        ) : null}
+        {Player && animation ? (
+          <View
+            style={{
+              position: 'absolute',
+              top: 0,
+              left: 0,
+              width: size,
+              height: size,
+              opacity: loaded ? 1 : 0,
+            }}
+            testID={testID ? `${testID}-animation` : undefined}
+          >
+            <Player
+              uri={animation}
+              loop={loop}
+              paused={paused}
+              onLoad={onLoad}
+              onError={onError}
+              style={{ width: size, height: size }}
+            />
+          </View>
+        ) : null}
+      </View>
+    );
+  }
+
+  const Sticker = memo(StickerComponent);
+  Sticker.displayName = 'Sticker';
+  return Sticker;
+}

package/src/sticker/index.ts

@@ -0,0 +1,3 @@
+export { Sticker } from './Sticker';
+export { provideLottiePlayer, resetLottiePlayer } from './lottie-module';
+export type { LottiePlayerProps, StickerProps } from './types';

package/src/sticker/index.web.ts

@@ -0,0 +1,8 @@
+// AUTO-GENERATED by scripts/generate-platform-exports.mjs — DO NOT EDIT.
+// Source of truth: src/sticker/index.ts.
+// Re-run `bun run generate:exports` (or any `bun run build`) after
+// changing that barrel or the set of web-forked subpaths.
+
+export { Sticker } from './Sticker.web';
+export { provideLottiePlayer, resetLottiePlayer } from './lottie-module.web';
+export type { LottiePlayerProps, StickerProps } from './types';

package/src/sticker/lottie-module.ts

@@ -0,0 +1,109 @@
+/**
+ * The optional-peer boundary for the NATIVE Lottie player, `lottie-react-native`.
+ *
+ * Same contract as `media-flight/expo-video-module.ts`, and for the same reason:
+ * Bloom ships no native code, so an app that shows no animated sticker must not
+ * be made to install a native module. The `require` is a string literal as a
+ * direct statement of a `try` block — the one shape Metro collects as an
+ * optional dependency — and the `typeof require` guard stays OUTSIDE the try.
+ *
+ * Whatever player loads is adapted to {@link LottiePlayerProps}, so `Sticker`
+ * drives the native and the web player (`lottie-module.web.ts`) the same way.
+ */
+import { createElement, useEffect, useRef, type ComponentType } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+
+import type { LottiePlayerProps } from './types';
+
+declare const require: (moduleName: string) => unknown;
+
+/** The slice of `lottie-react-native`'s `LottieView` Bloom depends on. */
+interface LottieViewLikeProps {
+  source: { uri: string };
+  autoPlay?: boolean;
+  loop?: boolean;
+  resizeMode?: 'contain';
+  onAnimationLoaded?: () => void;
+  onAnimationFailure?: (error: string) => void;
+  style?: StyleProp<ViewStyle>;
+}
+
+interface LottieViewHandle {
+  pause(): void;
+  resume(): void;
+}
+
+type LottieViewLike = ComponentType<LottieViewLikeProps & { ref?: unknown }>;
+
+let providedPlayer: ComponentType<LottiePlayerProps> | null | undefined;
+let loadedPlayer: ComponentType<LottiePlayerProps> | null | undefined;
+let hasWarned = false;
+
+/** Tests (and an app with its own build of the player) hand one in here. */
+export function provideLottiePlayer(player: ComponentType<LottiePlayerProps> | null): void {
+  providedPlayer = player;
+}
+
+/** Forget the loaded player — for tests. */
+export function resetLottiePlayer(): void {
+  providedPlayer = undefined;
+  loadedPlayer = undefined;
+  hasWarned = false;
+}
+
+function isComponent(candidate: unknown): candidate is LottieViewLike {
+  if (typeof candidate === 'function') return true;
+  return typeof candidate === 'object' && candidate !== null && '$$typeof' in candidate;
+}
+
+function adapt(LottieView: LottieViewLike): ComponentType<LottiePlayerProps> {
+  function NativeLottiePlayer({ uri, loop, paused, onLoad, onError, style }: LottiePlayerProps) {
+    const ref = useRef<LottieViewHandle | null>(null);
+    useEffect(() => {
+      if (paused) ref.current?.pause();
+      else ref.current?.resume();
+    }, [paused]);
+    return createElement(LottieView, {
+      ref,
+      source: { uri },
+      autoPlay: !paused,
+      loop,
+      resizeMode: 'contain',
+      onAnimationLoaded: onLoad,
+      onAnimationFailure: onError,
+      style,
+    });
+  }
+  return NativeLottiePlayer;
+}
+
+/** The native player, adapted, or `null` when `lottie-react-native` is not installed. */
+export function loadLottiePlayer(): ComponentType<LottiePlayerProps> | null {
+  if (providedPlayer !== undefined && providedPlayer !== null) return providedPlayer;
+  if (loadedPlayer !== undefined) return loadedPlayer;
+  loadedPlayer = null;
+
+  if (typeof require === 'undefined') return loadedPlayer;
+
+  try {
+    const loaded = require('lottie-react-native') as { default?: unknown } | null | undefined;
+    const view = isComponent(loaded) ? loaded : loaded?.default;
+    if (isComponent(view)) loadedPlayer = adapt(view);
+  } catch {
+    loadedPlayer = null;
+  }
+  return loadedPlayer;
+}
+
+/** One dev warning per module lifetime: a still sticker looks like a working one. */
+export function warnLottieUnavailable(): void {
+  if (process.env.NODE_ENV === 'production' || hasWarned) return;
+  hasWarned = true;
+  // eslint-disable-next-line no-console
+  console.warn(
+    '[Bloom] An animated Sticker fell back to its still image: the optional peer ' +
+      '`lottie-react-native` could not be loaded. Install it (`npx expo install ' +
+      'lottie-react-native`) to animate stickers.',
+  );
+}
+

package/src/sticker/lottie-module.web.ts

@@ -0,0 +1,107 @@
+/**
+ * The optional-peer boundary for the WEB Lottie player,
+ * `@lottiefiles/dotlottie-react` — the web half of `lottie-module.ts`, with the
+ * same loading contract and the same adapted surface.
+ *
+ * dotLottie draws with ThorVG compiled to WebAssembly, which plays both `.lottie`
+ * archives and plain Lottie JSON, and exposes its instance through a ref
+ * callback rather than props: load, failure and pause all go through it.
+ */
+import { createElement, useEffect, useRef, type ComponentType } from 'react';
+
+import type { LottiePlayerProps } from './types';
+
+declare const require: (moduleName: string) => unknown;
+
+interface DotLottieInstance {
+  play(): void;
+  pause(): void;
+  addEventListener(event: 'load' | 'loadError', listener: () => void): void;
+  removeEventListener(event: 'load' | 'loadError', listener: () => void): void;
+}
+
+interface DotLottieReactLikeProps {
+  src: string;
+  autoplay?: boolean;
+  loop?: boolean;
+  dotLottieRefCallback?: (instance: DotLottieInstance | null) => void;
+  style?: unknown;
+}
+
+type DotLottieReactLike = ComponentType<DotLottieReactLikeProps>;
+
+let providedPlayer: ComponentType<LottiePlayerProps> | null | undefined;
+let loadedPlayer: ComponentType<LottiePlayerProps> | null | undefined;
+let hasWarned = false;
+
+export function provideLottiePlayer(player: ComponentType<LottiePlayerProps> | null): void {
+  providedPlayer = player;
+}
+
+/** Forget the loaded player — for tests. */
+export function resetLottiePlayer(): void {
+  providedPlayer = undefined;
+  loadedPlayer = undefined;
+  hasWarned = false;
+}
+
+function isComponent(candidate: unknown): candidate is DotLottieReactLike {
+  if (typeof candidate === 'function') return true;
+  return typeof candidate === 'object' && candidate !== null && '$$typeof' in candidate;
+}
+
+function adapt(DotLottieReact: DotLottieReactLike): ComponentType<LottiePlayerProps> {
+  function WebLottiePlayer({ uri, loop, paused, onLoad, onError, style }: LottiePlayerProps) {
+    const instance = useRef<DotLottieInstance | null>(null);
+    const callbacks = useRef({ onLoad, onError });
+    callbacks.current = { onLoad, onError };
+
+    useEffect(() => {
+      if (paused) instance.current?.pause();
+      else instance.current?.play();
+    }, [paused]);
+
+    return createElement(DotLottieReact, {
+      src: uri,
+      autoplay: !paused,
+      loop,
+      style,
+      dotLottieRefCallback: (next) => {
+        if (instance.current === next) return;
+        instance.current = next;
+        if (!next) return;
+        next.addEventListener('load', () => callbacks.current.onLoad?.());
+        next.addEventListener('loadError', () => callbacks.current.onError?.('load failed'));
+      },
+    });
+  }
+  return WebLottiePlayer;
+}
+
+/** The web player, adapted, or `null` when `@lottiefiles/dotlottie-react` is not installed. */
+export function loadLottiePlayer(): ComponentType<LottiePlayerProps> | null {
+  if (providedPlayer !== undefined && providedPlayer !== null) return providedPlayer;
+  if (loadedPlayer !== undefined) return loadedPlayer;
+  loadedPlayer = null;
+
+  if (typeof require === 'undefined') return loadedPlayer;
+
+  try {
+    const loaded = require('@lottiefiles/dotlottie-react') as { DotLottieReact?: unknown } | null | undefined;
+    if (isComponent(loaded?.DotLottieReact)) loadedPlayer = adapt(loaded.DotLottieReact);
+  } catch {
+    loadedPlayer = null;
+  }
+  return loadedPlayer;
+}
+
+export function warnLottieUnavailable(): void {
+  if (process.env.NODE_ENV === 'production' || hasWarned) return;
+  hasWarned = true;
+  // eslint-disable-next-line no-console
+  console.warn(
+    '[Bloom] An animated Sticker fell back to its still image: the optional peer ' +
+      '`@lottiefiles/dotlottie-react` could not be loaded. Install it to animate ' +
+      'stickers on the web.',
+  );
+}

package/src/sticker/types.ts

@@ -0,0 +1,45 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+
+import type { MessageMediaSource } from '../message-media/types';
+
+export interface StickerProps {
+  /**
+   * URL of the Lottie animation (JSON or `.lottie`). Omit it for a still
+   * sticker; the `fallback` is then the sticker.
+   */
+  animation?: string;
+  /**
+   * The still image of the same sticker. Shown while the animation loads, when
+   * it cannot play (no Lottie player installed, the file failed), and always
+   * when the person asked for reduced motion.
+   */
+  fallback: MessageMediaSource;
+  /** Square edge. Default 128. */
+  size?: number;
+  /** Default true. */
+  loop?: boolean;
+  /** Hold the current frame — e.g. while the sticker is scrolled out of view. */
+  paused?: boolean;
+  /**
+   * A sticker IS its meaning; with no name it announces "Sticker" and conveys
+   * nothing. Pass what the pack author gave it — its emoji or its word.
+   */
+  accessibilityLabel?: string;
+  /**
+   * Hide it from assistive technology because its container already names it —
+   * `StickerMessage` does, on its pressable. Default false.
+   */
+  decorative?: boolean;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+/** What `Sticker` needs from a Lottie player, whichever platform supplies it. */
+export interface LottiePlayerProps {
+  uri: string;
+  loop: boolean;
+  paused: boolean;
+  onLoad?: () => void;
+  onError?: (error: string) => void;
+  style?: StyleProp<ViewStyle>;
+}

package/src/styles/surface-levels.ts

@@ -103,6 +103,7 @@ import { Platform, type ViewStyle } from 'react-native';
 
 import type { Theme } from '../theme/types';
 import { useTheme } from '../theme/use-theme';
+import { BloomThemeContext } from '../theme/BloomThemeProvider';
 import { mixColors, quietText } from './color-contrast';
 import { RING_OFFSET_VAR } from './interactive-web-css';
 import type { WebCssStyle } from './web-view-style';
@@ -360,6 +361,13 @@ export function useSurfaceLevel(delta: number = 0): SurfaceLevelPaint {
  * app does not repeat a guess at every call site and does not have to be swept
  * when a container changes what it paints.
  */
+/** Optional ambient fill for layout containers that also work without a theme. */
+export function useOptionalSurfaceFill(): string | undefined {
+  const theme = useContext(BloomThemeContext)?.theme;
+  const { level, fill } = useContext(SurfaceLevelContext);
+  return fill ?? (theme ? levelBackground(theme, level) : undefined);
+}
+
 export function useSurfaceFill(): string {
   const theme = useTheme();
   const { level, fill } = useContext(SurfaceLevelContext);

package/src/surface/Surface.tsx

@@ -1,30 +1,25 @@
-import { surfaceStyle } from '../shapes/surface-style';
+import { resolveSurfaceGeometry } from './resolve-surface-geometry';
 import { SURFACE_SHAPES } from '../design-tokens/shapes';
 import React, { forwardRef, memo } from 'react';
 import { styled } from 'react-native-css';
 import { Platform, StyleSheet, type View } from 'react-native';
-import { parseRgba, withAlpha } from '../theme/color-utils';
 import { StyledView } from '../styles/styled-primitives';
 import { borderRadius } from '../styles/tokens';
-import { SurfaceLevelProvider, surfaceFillVars } from '../styles/surface-levels';
-import { useSurfaceLayer } from './use-surface-layer';
-import { resolveSurfaceFill } from './shared';
+import { SurfaceLevelProvider } from '../styles/surface-levels';
+import { useResolvedSurface } from './use-resolved-surface';
 import { SurfacePaint } from './SurfacePaint';
 import type { SurfaceProps } from './types';
 
 /** Layout-neutral container: callers supply their own padding and content. */
 const SurfaceComponent = forwardRef<View, SurfaceProps>(function SurfaceComponent({
-  children, material = 'solid', fill, radius = borderRadius.xl, cornerCurve = SURFACE_SHAPES.panel.curve,
+  children, fill, radius, cornerCurve = SURFACE_SHAPES.panel.curve,
   style, className, accessibilityLabel, testID, ...hostProps
 }, ref) {
-  const glass = material === 'glass';
-  const layer = useSurfaceLayer();
   const resolvedStyle = StyleSheet.flatten(style);
-  const effectiveRadius = resolvedStyle?.borderRadius ?? radius;
-  const tint = fill ?? resolvedStyle?.backgroundColor ?? (glass ? withAlpha(layer.fill, 0.25) : layer.fill);
-  const painted = glass || (tint !== 'transparent' && parseRgba(String(tint))?.a !== 0);
-  const color = resolveSurfaceFill(String(tint), glass, layer.parentFill);
-  const publishedFill = painted ? resolveSurfaceFill(color, false, layer.parentFill) : layer.parentFill;
+  const geometry = resolveSurfaceGeometry(radius, style, borderRadius.xl, cornerCurve);
+
+  const override = fill ?? resolvedStyle?.backgroundColor;
+  const material = useResolvedSurface({ fill: override === undefined ? undefined : String(override) });
   return (
     <StyledView
       {...hostProps}
@@ -32,10 +27,10 @@ const SurfaceComponent = forwardRef<View, SurfaceProps>(function SurfaceComponen
       className={className}
       accessibilityLabel={accessibilityLabel}
       testID={testID}
-      style={[{ position: 'relative', borderRadius: effectiveRadius, ...surfaceStyle({ curve: cornerCurve }) }, style, { backgroundColor: 'transparent', ...surfaceFillVars(painted ? publishedFill : undefined) }]}
+      style={[{ position: 'relative' }, style, { backgroundColor: 'transparent', ...material.vars, ...geometry.style }]}
     >
-      {painted ? <SurfacePaint fill={color} backdrop={layer.parentFill} radius={effectiveRadius} shape={{ curve: cornerCurve }} glass={glass} /> : null}
-      <SurfaceLevelProvider level={painted ? layer.level : layer.parentLevel} fill={publishedFill}>{children}</SurfaceLevelProvider>
+      {material.painted ? <SurfacePaint fill={material.paintFill} radius={geometry.radius} shape={geometry.shape} /> : null}
+      <SurfaceLevelProvider level={material.level} fill={material.publishedFill}>{children}</SurfaceLevelProvider>
     </StyledView>
   );
 });