@oxy.so/bloom 5.4.1 → 6.1.0

package/src/button/types.ts

@@ -1,79 +1,13 @@
 import type { BloomAppearance, BloomTone, BloomSize } from '../appearance/types';
 import type { BloomIconRenderer } from '../icons/render-icon';
-import type { ComponentType, ReactNode } from 'react';
+import type { ReactNode } from 'react';
 import type { GestureResponderEvent, LayoutChangeEvent, ViewProps, StyleProp, ViewStyle, TextStyle } from 'react-native';
 import type { WebAriaProps } from '../styles/styled-primitives';
 import type { BloomIconComponent } from '../icons/icon-component';
 import type { TypeScaleVariant } from '../typography/scale';
 
-/**
- * Bloom's canonical button variants (shared across native + web) plus the
- * web/shadcn set that DOM apps (auth, console, website) rely on:
- *
- *   - `primary | secondary | inverse | icon | ghost | text` — the original
- *     Bloom set, rendered identically on both platforms.
- *   - `outline | link | destructive` — web additions. They are styled from the
- *     SAME Bloom design tokens so they stay visually consistent with the rest of
- *     the set. On native they fall back to a sensible equivalent
- *     (`outline → secondary`, `link → text`, `destructive → primary` tinted with
- *     the negative token) so passing them never crashes a native consumer.
- *
- * `text` (and its web alias `link`) is DELIBERATELY not a transparent `ghost`:
- * it is the compact inline affordance, so it overrides the size config's padding
- * down to 4/8 on BOTH platforms. `ghost` keeps the full padding — it is a
- * regular button that happens to have no background. The one geometry that does
- * differ by platform is `minHeight`: web clears it for `text`/`link` so the
- * control hugs its label and sits inline, native keeps the size config's value
- * because a finger needs the target and a cursor does not.
- *
- * WHICH ONE IS THE NEUTRAL TRANSPARENT AFFORDANCE — the question five families
- * answered with their own copy before this list said so:
- *
- * - **`ghost` IS NOT TRANSPARENT.** It paints an accent WASH at rest
- *   (`accent-100` / dark `accent-900`) with an accent label. It is the low-
- *   emphasis ACCENT action — the third button in a row that is still part of the
- *   accent family — and it is the wrong control for a neutral ⋯ / × / clear
- *   affordance, which lands tinted. A DESTRUCTIVE action in it is worse: a red
- *   label on a blue wash, which is what `track-list`'s selection bar shipped.
- * - **The neutral transparent ICON button is {@link GlyphButtonProps}**
- *   (`GlyphButton`, beside `Button` in `src/button`): an arbitrary round size, a
- *   neutral glyph, no fill at rest and a neutral wash on hover. Reach for it for
- *   every ⋯, ×, clear, shuffle, repeat and toggle glyph.
- * - `icon` is the neutral icon button WITH A SURFACE (`secondary`'s card +
- *   border) at the fixed 24 / 32 / 36 / 44 heights.
- * - `text` is the transparent LABELLED button: an accent label, a NEUTRAL hover
- *   wash, no fill at rest. Use it where `ghost`'s wash is too loud; colour a
- *   destructive one through `textStyle` plus an `icon` ELEMENT you paint
- *   yourself, or reach for `destructive`.
- * - `link` is running text: no container, no padding, `linkTone` for the colour
- *   and `underline` for whether the underline is the affordance at rest.
- */
-export type ButtonVariant =
-  | 'primary'
-  | 'secondary'
-  | 'inverse'
-  | 'icon'
-  | 'ghost'
-  | 'text'
-  | 'outline'
-  | 'link'
-  | 'destructive';
-
-/**
- * Bloom sizes plus shadcn-style aliases. `sm | md | lg` map onto
- * `small | medium | large`; `icon` maps onto a square icon button at the medium
- * height. The aliases exist so web consumers migrating from shadcn keep their
- * call sites unchanged. `xs` (24px) is the compact tier.
- */
-export type ButtonSize = BloomSize
-  | 'xs'
-  | 'small'
-  | 'medium'
-  | 'large'
-  | 'sm'
-  | 'md'
-  | 'lg'
-  | 'icon';
+/** Shared control size; square geometry is expressed with iconOnly. */
+export type ButtonSize = BloomSize;
 
 export interface ButtonProps {
   onLayout?: (event: LayoutChangeEvent) => void;
@@ -98,7 +32,6 @@ export interface ButtonProps {
   children?: React.ReactNode;
   disabled?: boolean;
 
-  variant?: ButtonVariant;
   size?: ButtonSize;
   style?: StyleProp<ViewStyle>;
   textStyle?: StyleProp<TextStyle>;
@@ -113,11 +46,10 @@ export interface ButtonProps {
   iconPosition?: 'left' | 'right';
 
   /**
-   * The `link` variant's colour. `primary` is the accent label, `secondary` the
+   * The inline link colour. `primary` is the accent label, `secondary` the
    * secondary-text label, `text` the READING colour (`text` at rest, secondary
    * under a pointer or a press) — the tone an underlined action takes when it
-   * sits inside a sentence and must not read as the accent. Ignored by other
-   * variants.
+   * sits inside a sentence and must not read as the accent. Used by LinkButton and plain inline actions.
    */
   linkTone?: ButtonLinkTone;
 
@@ -125,9 +57,9 @@ export interface ButtonProps {
    * When the label carries its underline. `rest` underlines always — the
    * underline IS the affordance, which is what an inline text action inside
    * running copy needs; `hover` underlines only under a pointer (the `link`
-   * variant's default, and web-only: native has no hover); `none` never does.
+   * action's default, and web-only: native has no hover); `none` never does.
    *
-   * Defaults to `hover` for `link` and `none` for every other variant, so an
+   * Defaults to `hover` for `link` and `none` for other actions, so an
    * existing call site is unchanged. Four families hand-rolled an underlined
    * `Pressable` for exactly this: `stay-filters`, `booking`, `listing-details`
    * and `media-header`.
@@ -307,10 +239,8 @@ export type ButtonLinkTone = 'primary' | 'secondary' | 'text';
 /** When {@link ButtonProps.underline} draws the label's underline. */
 export type ButtonUnderline = 'rest' | 'hover' | 'none';
 
-/** Props of `LinkButton`: its `variant` is the link colour. */
-export interface LinkButtonProps extends Omit<ButtonProps, 'variant' | 'linkTone'> {
-  variant?: ButtonLinkTone;
-}
+/** Inline action with explicit link colour and underline behavior. */
+export type LinkButtonProps = ButtonProps;
 
 /** Props of `CloseButton`. */
 export interface CloseButtonProps {

package/src/button/use-button-layout.web.ts

@@ -9,6 +9,7 @@ function assignRef<T>(ref: Ref<T> | undefined, value: T | null) {
 export function useButtonLayout(ref: Ref<View> | undefined, onLayout?: (event: LayoutChangeEvent) => void, childRef?: Ref<HTMLElement>) {
   const [node, setNode] = useState<HTMLElement | null>(null);
   const callback = useRef(onLayout);
+  const measureAfterCommit = useRef<(() => void) | undefined>(undefined);
   callback.current = onLayout;
   const enabled = Boolean(onLayout);
   const setRef = useCallback((element: HTMLElement | null) => {
@@ -27,12 +28,15 @@ export function useButtonLayout(ref: Ref<View> | undefined, onLayout?: (event: L
       last = key;
       callback.current?.({ nativeEvent: { layout }, target: node, currentTarget: node } as unknown as LayoutChangeEvent);
     };
+    measureAfterCommit.current = measure;
     measure();
     const Resize = node.ownerDocument.defaultView?.ResizeObserver;
     const observer = Resize ? new Resize(measure) : undefined;
     observer?.observe(node);
     node.ownerDocument.defaultView?.addEventListener('resize', measure);
-    return () => { observer?.disconnect(); node.ownerDocument.defaultView?.removeEventListener('resize', measure); };
+    return () => { measureAfterCommit.current = undefined; observer?.disconnect(); node.ownerDocument.defaultView?.removeEventListener('resize', measure); };
   }, [node, enabled]);
+  // A sibling changing width or order moves this button without resizing it.
+  useLayoutEffect(() => { measureAfterCommit.current?.(); });
   return setRef;
 }

package/src/button-group/ButtonGroup.tsx

@@ -1,3 +1,4 @@
+import { Surface } from '../surface';
 import { Button } from '../button';
 import { createButtonGroup } from './ButtonGroupBase';
-export const { ButtonGroup, ButtonGroupItem } = createButtonGroup(Button);
+export const { ButtonGroup, ButtonGroupItem } = createButtonGroup(Button, Surface);

package/src/button-group/ButtonGroup.web.tsx

@@ -1,3 +1,4 @@
+import { Surface } from '../surface/index.web';
 import { Button } from '../button/index.web';
 import { createButtonGroup } from './ButtonGroupBase';
-export const { ButtonGroup, ButtonGroupItem } = createButtonGroup(Button);
+export const { ButtonGroup, ButtonGroupItem } = createButtonGroup(Button, Surface);

package/src/button-group/ButtonGroupBase.tsx

@@ -1,65 +1,107 @@
-import React, { Children, createContext, Fragment, isValidElement, memo, useContext, useMemo, type ComponentType } from 'react';
+import React, { Children, createContext, Fragment, isValidElement, memo, useCallback, useContext, useId, useLayoutEffect, useMemo, useRef, type ComponentType } from 'react';
 import { Platform, View } from 'react-native';
-import { useBloomAppearance } from '../appearance';
-import { useInheritedControl } from '../control-surface';
-import type { ControlMaterial } from '../control-surface/types';
-import { GlassIsland } from '../glass';
+import Animated, { useAnimatedStyle, useSharedValue, withSpring } from 'react-native-reanimated';
+import { BloomScope, useBloomAppearance } from '../appearance';
+
 import { useTheme } from '../theme/use-theme';
-import { StyledView } from '../styles/styled-primitives';
 import type { WebCssStyle } from '../styles/web-view-style';
-import { BUTTON_RADIUS, BUTTON_SHADOW } from '../button/shared';
+import { hairlineOn, useSurfaceFill } from '../styles/surface-levels';
+import { BUTTON_RADIUS, BUTTON_SHADOW, resolveCanonicalButtonPalette } from '../button/shared';
+import { moveSelection, SELECTION_SPRING } from '../motion/selection-motion';
+import { useGroupSelection } from './use-group-selection';
 import type { ButtonProps } from '../button/types';
+import type { SurfaceProps } from '../surface/types';
 import type { ButtonGroupItemProps, ButtonGroupProps } from './types';
 
+/** Separators resolve against the material actually published by the group. */
+function Divider() {
+  const theme = useTheme();
+  const fill = useSurfaceFill();
+  return <View style={{ width: 1, marginTop: 8, marginBottom: 8, backgroundColor: hairlineOn(theme, fill) }} />;
+}
+
 /** The group owns joining and inheritance; Button owns each actual control. */
-export function createButtonGroup(Button: ComponentType<ButtonProps>) {
-  const GroupContext = createContext<{ size: 'sm' | 'md'; material: ControlMaterial } | null>(null);
-  const ButtonGroup = memo(function ButtonGroup({ material: materialProp, variant, size: sizeProp, dividers,
+export function createButtonGroup(Button: ComponentType<ButtonProps>, Surface: ComponentType<SurfaceProps>) {
+  const GroupContext = createContext<({ size: 'sm' | 'md' } & ReturnType<typeof useGroupSelection>['registry']) | null>(null);
+  const ButtonGroup = memo(function ButtonGroup({ size: sizeProp, dividers,
     children, accessibilityLabel, style, testID }: ButtonGroupProps) {
     const theme = useTheme();
-    const material = useInheritedControl('material', materialProp ?? variant, 'solid');
-    const canonicalSize = sizeProp === 'small' ? 'sm' : sizeProp === 'medium' ? 'md' : sizeProp;
+    const canonicalSize = sizeProp;
     const { size: scopedSize } = useBloomAppearance({ size: canonicalSize }, { size: 'md', tone: 'neutral' });
-    const inheritedSize = useInheritedControl('density', canonicalSize, scopedSize);
+    const inheritedSize = scopedSize;
     const size: 'sm' | 'md' = inheritedSize === 'xs' || inheritedSize === 'sm' ? 'sm' : 'md';
-    const context = useMemo(() => ({ size, material }), [size, material]);
+    const { registry, layout, disabled: selectionDisabled } = useGroupSelection();
+    const context = useMemo(() => ({ size, ...registry }), [size, registry]);
+    const x = useSharedValue(0);
+    const y = useSharedValue(0);
+    const width = useSharedValue(0);
+    const height = useSharedValue(0);
+    const opacity = useSharedValue(0);
+    const initialized = useRef(false);
+    useLayoutEffect(() => {
+      if (!layout) { moveSelection(x, opacity, null); return; }
+      const snap = !initialized.current || opacity.value === 0;
+      initialized.current = true;
+      y.value = snap ? layout.y : withSpring(layout.y, SELECTION_SPRING);
+      width.value = snap ? layout.width : withSpring(layout.width, SELECTION_SPRING);
+      height.value = snap ? layout.height : withSpring(layout.height, SELECTION_SPRING);
+      moveSelection(x, opacity, layout.x);
+    }, [layout, x, y, width, height, opacity]);
+    const selectionStyle = useAnimatedStyle(() => ({
+      width: width.value, height: height.value, opacity: opacity.value,
+      transform: [{ translateX: x.value }, { translateY: y.value }],
+    }), [x, y, width, height, opacity]);
+    const selectionPalette = resolveCanonicalButtonPalette('outline', theme, 'neutral');
     const items = Children.toArray(children).filter(isValidElement);
-    const showDividers = dividers ?? material === 'solid';
+    const showDividers = dividers ?? true;
     const row = items.map((item, index) => <Fragment key={item.key ?? index}>
-      {showDividers && index > 0 ? <View style={{ width: 1, backgroundColor: theme.colors.borderLight }} /> : null}
+      {showDividers && index > 0 ? <Divider /> : null}
       {item}
     </Fragment>);
-    if (material === 'glass') return <GroupContext.Provider value={context}>
-      <GlassIsland material="glass" role="group" accessibilityLabel={accessibilityLabel} style={style} testID={testID}>{row}</GlassIsland>
-    </GroupContext.Provider>;
     return <GroupContext.Provider value={context}>
-      <StyledView role="group" accessibilityLabel={accessibilityLabel} testID={testID}
-        style={[{ alignSelf: 'flex-start', borderWidth: 1, borderColor: theme.colors.border,
-          borderRadius: BUTTON_RADIUS, backgroundColor: 'transparent', boxShadow: BUTTON_SHADOW[theme.isDark ? 'dark' : 'light'] }, style]}>
-        <View testID={testID ? `${testID}-items` : undefined} style={{ flexDirection: 'row', alignItems: 'stretch', borderRadius: BUTTON_RADIUS, overflow: 'hidden' }}>
-          {row}
-        </View>
-      </StyledView>
+      <BloomScope size={size}>
+        <Surface radius={BUTTON_RADIUS} cornerCurve="round"
+          role="group" accessibilityLabel={accessibilityLabel} testID={testID}
+          style={[{ alignSelf: 'flex-start', boxShadow: BUTTON_SHADOW[theme.isDark ? 'dark' : 'light'] }, style]}>
+          <View testID={testID ? `${testID}-items` : undefined} style={{ flexDirection: 'row', alignItems: 'stretch', padding: 2, borderRadius: BUTTON_RADIUS, overflow: 'hidden' }}>
+            {layout || initialized.current ? <Animated.View pointerEvents="none" testID={testID ? `${testID}-selection` : undefined}
+              style={[{ position: 'absolute', left: 0, top: 0 }, selectionStyle]}>
+              <Surface radius={BUTTON_RADIUS} cornerCurve="round"
+                fill={(selectionDisabled ? selectionPalette.disabled : selectionPalette.active).background}
+                style={{ position: 'absolute', top: 0, right: 0, bottom: 0, left: 0 }} />
+            </Animated.View> : null}
+            {row}
+          </View>
+        </Surface>
+      </BloomScope>
     </GroupContext.Provider>;
   });
   const ButtonGroupItem = memo(function ButtonGroupItem({ onPress, onCheckedChange, checked: checkedProp, selected,
-    size: sizeProp, material: materialProp, variant, iconOnly = false, disabled = false, style, hitSlop,
+    size: sizeProp, iconOnly = false, disabled = false, style, hitSlop,
     ...props }: ButtonGroupItemProps) {
     const group = useContext(GroupContext);
-    const inheritedMaterial = useInheritedControl('material', undefined, 'solid');
-    const canonicalSize = sizeProp === 'small' ? 'sm' : sizeProp === 'medium' ? 'md' : sizeProp;
+    const id = useId();
+    const register = group?.register;
+    const unregister = group?.unregister;
+    const measure = group?.measure;
+    const canonicalSize = sizeProp;
     const { size: scopedSize } = useBloomAppearance({ size: canonicalSize }, { size: 'md', tone: 'neutral' });
-    const inheritedDensity = useInheritedControl('density', undefined, scopedSize);
+    const inheritedDensity = scopedSize;
     const rawSize = canonicalSize ?? group?.size ?? inheritedDensity;
     const size = rawSize === 'xs' || rawSize === 'sm' ? 'sm' : 'md';
-    const material = materialProp ?? variant ?? group?.material ?? inheritedMaterial;
     const height = size === 'sm' ? 30 : 34;
     const checked = checkedProp ?? selected;
+    useLayoutEffect(() => { register?.(id, Boolean(checked), disabled); }, [register, id, checked, disabled]);
+    useLayoutEffect(() => () => unregister?.(id), [unregister, id]);
+    const onLayout = useCallback<NonNullable<ButtonProps['onLayout']>>(event => {
+      measure?.(id, event.nativeEvent.layout);
+    }, [measure, id]);
     const itemStyle: WebCssStyle = { height, minWidth: iconOnly ? height : undefined, width: iconOnly ? height : undefined,
-      borderWidth: 0, borderRadius: material === 'glass' ? BUTTON_RADIUS : 0,
+      borderWidth: 0, borderRadius: BUTTON_RADIUS,
       boxShadow: 'none', paddingLeft: iconOnly ? 0 : 8, paddingRight: iconOnly ? 0 : 8, gap: 4,
+      ...(group?.moving && checked ? { backgroundColor: 'transparent' } : {}),
       ...(Platform.OS === 'web' ? { outlineOffset: -2 } : {}) };
-    return <Button {...props} appearance={material === 'glass' ? 'plain' : 'outline'} tone="neutral" size={size} iconOnly={iconOnly}
+    return <Button {...props} onLayout={group ? onLayout : undefined} appearance={checked && !group?.moving ? 'outline' : 'plain'} tone="neutral" size={size} iconOnly={iconOnly}
       pressed={checked} disabled={disabled} hitSlop={typeof hitSlop === 'object' ? { top: 0, bottom: 0, left: 0, right: 0, ...hitSlop } : hitSlop ?? 0}
       onPress={(event) => { if (disabled) return; onCheckedChange?.(!checked); onPress?.(event); }}
       style={[itemStyle, style]} />;

package/src/button-group/types.ts

@@ -1,38 +1,23 @@
 import type { GestureResponderEvent, StyleProp, ViewStyle } from 'react-native';
 
-import type { ControlMaterial } from '../control-surface/types';
 import type { ButtonIconComponent } from '../button/types';
 import type { BloomIconRenderer } from '../icons/render-icon';
 import type { WebAriaProps } from '../styles/styled-primitives';
 
 /** The two group sizes: 34px (`md`) and 30px (`sm`) items. */
-export type ButtonGroupSize = 'md' | 'sm' | 'medium' | 'small';
+export type ButtonGroupSize = 'md' | 'sm';
 
 export interface ButtonGroupProps {
-  /**
-   * The material the group paints: `solid` (an opaque bordered pill, Bloom's
-   * default chrome) or `glass` (one translucent island the items sit flush on).
-   *
-   * Omitted, it is INHERITED from the nearest `ControlSurface` — which is what a
-   * `PageHeader`'s action slot mounts — and falls back to `solid`. So a group in
-   * a floating header needs no material written on it, and the same group in a
-   * card is solid without one either. Precedence and its limits:
-   * `docs/composition.mdx`.
-   */
-  material?: ControlMaterial;
-  variant?: ControlMaterial;
   /**
    * Size for every item that does not set its own. Inherited from the nearest
-   * `ControlSurface` when omitted, then `md`.
+   * `BloomScope` when omitted, then `md`.
    */
   size?: ButtonGroupSize;
   /**
    * Whether to draw the 1px hairlines BETWEEN items.
    *
-   * Defaults to `true` for `solid` and `false` for `glass`. A divider is how a
-   * solid pill says "these are separate controls, fused"; on a translucent
-   * island the press highlight already says it, and a hairline over a moving
-   * backdrop reads as an artifact of the material.
+   * Defaults to `true`. Separators are inset
+   * vertically so they do not cross the outer rim.
    */
   dividers?: boolean;
   /** `ButtonGroupItem` children. */
@@ -54,9 +39,7 @@ export interface ButtonGroupItemProps {
   children?: React.ReactNode;
   /** Overrides the group's size. */
   size?: ButtonGroupSize;
-  /** Overrides the group's material. Rarely needed; the group owns it. */
-  material?: ControlMaterial;
-  variant?: ControlMaterial;
+  /** Material of a standalone item; items inside a group share the group Surface. */
   /** Highlights the item like its hover state and announces it as pressed. */
   checked?: boolean;
   selected?: boolean;

package/src/button-group/use-group-selection.ts

@@ -0,0 +1,42 @@
+import { useCallback, useMemo, useState } from 'react';
+import type { LayoutRectangle } from 'react-native';
+
+interface Entry {
+  checked: boolean;
+  disabled: boolean;
+  layout?: LayoutRectangle;
+}
+
+/** Measure real buttons so variable labels, density and RTL share one capsule. */
+export function useGroupSelection() {
+  const [entries, setEntries] = useState<Record<string, Entry>>({});
+  const register = useCallback((id: string, checked: boolean, disabled: boolean) => {
+    setEntries(previous => {
+      const entry = previous[id];
+      if (entry?.checked === checked && entry.disabled === disabled) return previous;
+      return { ...previous, [id]: { ...entry, checked, disabled } };
+    });
+  }, []);
+  const measure = useCallback((id: string, layout: LayoutRectangle) => {
+    setEntries(previous => {
+      const entry = previous[id] ?? { checked: false, disabled: false };
+      const old = entry.layout;
+      if (old && old.x === layout.x && old.y === layout.y && old.width === layout.width && old.height === layout.height) return previous;
+      return { ...previous, [id]: { ...entry, layout } };
+    });
+  }, []);
+  const unregister = useCallback((id: string) => {
+    setEntries(previous => {
+      if (!previous[id]) return previous;
+      const next = { ...previous };
+      delete next[id];
+      return next;
+    });
+  }, []);
+  const selected = Object.values(entries).filter(entry => entry.checked);
+  const selection = selected.length === 1 ? selected[0] : undefined;
+  const layout = selection?.layout;
+  const moving = Boolean(layout && layout.width > 0 && layout.height > 0);
+  const registry = useMemo(() => ({ register, measure, unregister, moving }), [register, measure, unregister, moving]);
+  return { registry, layout: moving ? layout : undefined, disabled: selection?.disabled ?? false };
+}

package/src/call-ui/CallControls.tsx

@@ -1,3 +1,4 @@
+import { useBloomAppearance } from '../appearance';
 import React, { memo, useMemo } from 'react';
 import { Pressable, View } from 'react-native';
 
@@ -53,7 +54,7 @@ function CallControlButtonComponent({
   label,
   active,
   tone = 'default',
-  size = 'large',
+  size: sizeProp,
   disabled = false,
   onPress,
   showLabel = false,
@@ -62,6 +63,9 @@ function CallControlButtonComponent({
   style,
   testID,
 }: CallControlButtonProps) {
+  const { size: inheritedSize } = useBloomAppearance({ size: sizeProp }, { size: 'lg', tone: 'neutral' });
+  const size = inheritedSize === 'xs' ? 'sm' : inheritedSize;
+
   const theme = useTheme();
   const paint = useMemo(() => resolveCallPaint(theme, accentColor), [theme, accentColor]);
   const { state: hovered, onIn, onOut } = useInteractionState();
@@ -165,7 +169,7 @@ function CallControlsComponent({
   onAddParticipant,
   onEndCall,
   controls,
-  size = 'large',
+  size: sizeProp,
   disabled = false,
   showLabels = false,
   labels,
@@ -174,6 +178,9 @@ function CallControlsComponent({
   style,
   testID,
 }: CallControlsProps) {
+  const { size: inheritedSize } = useBloomAppearance({ size: sizeProp }, { size: 'lg', tone: 'neutral' });
+  const size = inheritedSize === 'xs' ? 'sm' : inheritedSize;
+
   const { messages } = useMessages(CALL_UI_MESSAGES);
   const l = useMemo(() => ({ ...messages.controls, ...labels }), [messages, labels]);
   const geometry = CALL_CONTROL_GEOMETRY[size];

package/src/call-ui/CallMinimisedPill.tsx

@@ -149,7 +149,7 @@ function CallMinimisedPillComponent({
               activeIcon={RiMicOffFill}
               label={muted ? l.unmute : l.mute}
               active={muted}
-              size="small"
+              size="sm"
               accentColor={accentColor}
               onPress={() => onMutedChange(!muted)}
               testID={testID ? `${testID}-mute` : undefined}
@@ -160,7 +160,7 @@ function CallMinimisedPillComponent({
               icon={CallEndGlyph}
               label={l.endCall}
               tone="end"
-              size="small"
+              size="sm"
               accentColor={accentColor}
               onPress={onEndCall}
               testID={testID ? `${testID}-end` : undefined}

package/src/call-ui/CallScreen.tsx

@@ -200,7 +200,7 @@ function CallScreenComponent({
           <CallControlButton
             icon={RiCollapseDiagonalLine}
             label={l.minimise}
-            size="small"
+            size="sm"
             accentColor={accentColor}
             onPress={onMinimise}
             testID={testID ? `${testID}-minimise` : undefined}
@@ -211,7 +211,7 @@ function CallScreenComponent({
           <CallControlButton
             icon={RiChat3Line}
             label={l.chat}
-            size="small"
+            size="sm"
             accentColor={accentColor}
             onPress={onOpenChat}
             testID={testID ? `${testID}-chat` : undefined}
@@ -225,7 +225,7 @@ function CallScreenComponent({
                 ? l.participants
                 : `${l.participants} (${participantCount})`
             }
-            size="small"
+            size="sm"
             accentColor={accentColor}
             onPress={onOpenParticipants}
             testID={testID ? `${testID}-participants` : undefined}

package/src/call-ui/GroupCallBar.tsx

@@ -227,20 +227,20 @@ function GroupCallBarComponent({
       {joined ? (
         onLeave === undefined ? null : (
           <Button
-            variant="destructive"
-            size="small"
+
+            size="sm"
             onPress={onLeave}
-            testID={testID ? `${testID}-leave` : undefined}
+            testID={testID ? `${testID}-leave` : undefined} tone="danger" appearance="solid"
           >
             {labels?.leave ?? messages.leave}
           </Button>
         )
       ) : onJoin === undefined ? null : (
         <Button
-          variant="primary"
-          size="small"
+
+          size="sm"
           onPress={onJoin}
-          testID={testID ? `${testID}-join` : undefined}
+          testID={testID ? `${testID}-join` : undefined} tone="accent" appearance="solid"
         >
           {labels?.join ?? messages.join}
         </Button>

package/src/call-ui/IncomingCallBanner.tsx

@@ -131,7 +131,7 @@ function IncomingCallBannerComponent({
           icon={CallEndGlyph}
           label={l.decline}
           tone="end"
-          size="small"
+          size="sm"
           onPress={onDecline}
           testID={testID ? `${testID}-decline` : undefined}
         />
@@ -141,7 +141,7 @@ function IncomingCallBannerComponent({
           icon={RiPhoneFill}
           label={l.accept}
           tone="accept"
-          size="small"
+          size="sm"
           onPress={onAccept}
           testID={testID ? `${testID}-accept` : undefined}
         />

package/src/call-ui/shared.ts

@@ -201,9 +201,9 @@ export const CALL_CONTROL_GEOMETRY: Record<
   CallControlSize,
   { size: number; glyph: number; gap: number }
 > = {
-  small: { size: 40, glyph: 20, gap: 8 },
-  medium: { size: 48, glyph: 22, gap: 12 },
-  large: { size: 56, glyph: 26, gap: 16 },
+  sm: { size: 40, glyph: 20, gap: 8 },
+  md: { size: 48, glyph: 22, gap: 12 },
+  lg: { size: 56, glyph: 26, gap: 16 },
 };
 
 /** The English `CallScreen` words; components speak the locale's (`CALL_UI_MESSAGES`). */

package/src/call-ui/types.ts

@@ -81,10 +81,10 @@ export type CallControlKey =
   | 'addParticipant';
 
 /**
- * `small` 40px buttons (the top bar, the minimised pill), `medium` 48 (a
- * banner or a sheet), `large` 56 (the full screen's own bar).
+ * `sm` 40px buttons (the top bar, the minimised pill), `md` 48 (a
+ * banner or a sheet), `lg` 56 (the full screen's own bar).
  */
-export type CallControlSize = 'small' | 'medium' | 'large';
+export type CallControlSize = 'sm' | 'md' | 'lg';
 
 /** How a control button is painted. */
 export type CallControlTone = 'default' | 'end' | 'accept';