expo-interface 0.2.0 → 0.3.0

package/src/color-picker/index.ios.tsx

@@ -1,33 +1,80 @@
 import type {ColorPickerProps} from './types';
 import type {ViewModifier} from '@expo/ui/swift-ui/modifiers';
 
-import {ColorPicker as SwiftUIColorPicker} from '@expo/ui/swift-ui';
-import {disabled as disabledMod} from '@expo/ui/swift-ui/modifiers';
+import {Button, ColorPicker as SwiftUIColorPicker, HStack, Spacer, Text, ZStack} from '@expo/ui/swift-ui';
+import {accessibilityLabel, background, buttonStyle, disabled as disabledMod, frame, labelsHidden, shapes} from '@expo/ui/swift-ui/modifiers';
+import {useColor} from '../theme';
+import {parseColor, toHex} from './shared';
+
+/** Diameter of a preset swatch, and of its ring when selected. */
+const SWATCH = 30;
+const SWATCH_INNER = 28;
+const SWATCH_SELECTED = 22;
+const NONE = '#00000000';
 
 /**
  * iOS renders SwiftUI's `ColorPicker`: the label with the rainbow-ringed
  * color well at the trailing edge, which opens the system color picker.
  * SwiftUI reports the selection as `#RRGGBBAA` when opacity is supported and
- * `#RRGGBB` otherwise; the other platforms mirror both formats.
+ * `#RRGGBB` otherwise; the other platforms mirror both formats. With
+ * `swatches` the row is composed by hand: the label, a spacer, the preset
+ * circles (the selected one ringed in the label color) and the picker's
+ * well with its own label hidden.
  */
 export function ColorPicker({
   label,
   value,
   onValueChange,
   supportsOpacity = true,
+  swatches,
   disabled,
   testID,
 }: ColorPickerProps) {
+  const labelColor = useColor('label');
   const modifiers: ViewModifier[] = [];
   if (disabled) modifiers.push(disabledMod(true));
+  if (!swatches?.length) {
+    return (
+      <SwiftUIColorPicker
+        label={label}
+        selection={value}
+        supportsOpacity={supportsOpacity}
+        onSelectionChange={onValueChange}
+        modifiers={modifiers}
+        testID={testID}
+      />
+    );
+  }
+  const current = parseColor(value);
+  const currentHex = toHex({...current, a: 1}, false);
   return (
-    <SwiftUIColorPicker
-      label={label}
-      selection={value}
-      supportsOpacity={supportsOpacity}
-      onSelectionChange={onValueChange}
-      modifiers={modifiers}
-      testID={testID}
-    />
+    <HStack spacing={8} modifiers={modifiers} testID={testID}>
+      {label != null ? <Text>{label}</Text> : null}
+      <Spacer/>
+      {swatches.map(seed => {
+        const selected = toHex(parseColor(seed), false) === currentHex;
+        const inner = selected ? SWATCH_SELECTED : SWATCH_INNER;
+        return (
+          <Button
+            key={seed}
+            onPress={() => onValueChange(toHex({...parseColor(seed), a: current.a}, supportsOpacity))}
+            modifiers={[buttonStyle('plain'), accessibilityLabel(`Color ${seed}`)]}>
+            <ZStack modifiers={[frame({width: SWATCH, height: SWATCH}), background(selected ? labelColor : NONE, shapes.circle())]}>
+              <ZStack modifiers={[frame({width: inner, height: inner}), background(seed, shapes.circle())]}>
+                <Spacer/>
+              </ZStack>
+            </ZStack>
+          </Button>
+        );
+      })}
+      <SwiftUIColorPicker
+        label={label}
+        selection={value}
+        supportsOpacity={supportsOpacity}
+        onSelectionChange={onValueChange}
+        modifiers={[labelsHidden()]}
+        testID={testID ? `${testID}-well` : undefined}
+      />
+    </HStack>
   );
 }

package/src/color-picker/index.tsx

@@ -13,13 +13,16 @@ import {parseColor, toCss, toHex, useColorValue} from './shared';
 /**
  * On web the row is a native `<button>` holding the label and the color
  * well — a conic rainbow ring around the selected color, as on iOS — which
- * opens the iOS picker redrawn in the kit's `Sheet`.
+ * opens the iOS picker redrawn in the kit's `Sheet`. With `swatches` the row
+ * is a `<div>` instead, so each preset and the well are buttons of their
+ * own (buttons cannot nest).
  */
 export function ColorPicker({
   label,
   value,
   onValueChange,
   supportsOpacity = true,
+  swatches,
   disabled,
   testID,
   style,
@@ -30,11 +33,69 @@ export function ColorPicker({
     '--ui-color-picker-value': toCss(current),
     ...flatten(StyleSheet.flatten(style) as TextStyle),
   } as CSSProperties;
+  const className = ['ui-color-picker', disabled && 'ui-color-picker--disabled'].filter(Boolean).join(' ');
+  const well = (
+    <span className="ui-color-picker__well" aria-hidden="true">
+      <span className="ui-color-picker__swatch"/>
+    </span>
+  );
+  const sheet = (
+    <Sheet isPresented={open} onDismiss={() => setOpen(false)}>
+      <ColorPickerSheet
+        title={label ?? 'Colors'}
+        value={toHex(current, true)}
+        supportsOpacity={supportsOpacity}
+        onValueChange={hex => setCurrent(parseColor(hex))}
+        onClose={() => setOpen(false)}
+        testID={testID ? `${testID}-sheet` : undefined}
+      />
+    </Sheet>
+  );
+
+  if (swatches?.length) {
+    const currentHex = toHex({...current, a: 1}, false);
+    return (
+      <>
+        <div className={`${className} ui-color-picker--presets`} style={vars} data-testid={testID}>
+          {label != null ? <Label color="label" style={{flexShrink: 1}}>{label}</Label> : null}
+          <span className="ui-color-picker__presets">
+            {swatches.map(seed => {
+              const selected = toHex(parseColor(seed), false) === currentHex;
+              return (
+                <button
+                  key={seed}
+                  type="button"
+                  className={['ui-color-picker__preset', selected && 'ui-color-picker__preset--selected'].filter(Boolean).join(' ')}
+                  style={{'--ui-color-picker-preset': seed} as CSSProperties}
+                  aria-label={`Color ${seed}`}
+                  aria-pressed={selected}
+                  disabled={disabled}
+                  onClick={() => setCurrent({...parseColor(seed), a: current.a})}
+                />
+              );
+            })}
+            <button
+              type="button"
+              className="ui-color-picker__open"
+              aria-label={label ?? 'Color'}
+              aria-haspopup="dialog"
+              aria-expanded={open}
+              disabled={disabled}
+              onClick={() => setOpen(true)}>
+              {well}
+            </button>
+          </span>
+        </div>
+        {sheet}
+      </>
+    );
+  }
+
   return (
     <>
       <button
         type="button"
-        className={['ui-color-picker', disabled && 'ui-color-picker--disabled'].filter(Boolean).join(' ')}
+        className={className}
         style={vars}
         disabled={disabled}
         aria-label={label == null ? 'Color' : undefined}
@@ -43,20 +104,9 @@ export function ColorPicker({
         onClick={() => setOpen(true)}
         data-testid={testID}>
         {label != null ? <Label color="label" style={{flexShrink: 1}}>{label}</Label> : null}
-        <span className="ui-color-picker__well" aria-hidden="true">
-          <span className="ui-color-picker__swatch"/>
-        </span>
+        {well}
       </button>
-      <Sheet isPresented={open} onDismiss={() => setOpen(false)}>
-        <ColorPickerSheet
-          title={label ?? 'Colors'}
-          value={toHex(current, true)}
-          supportsOpacity={supportsOpacity}
-          onValueChange={hex => setCurrent(parseColor(hex))}
-          onClose={() => setOpen(false)}
-          testID={testID ? `${testID}-sheet` : undefined}
-        />
-      </Sheet>
+      {sheet}
     </>
   );
 }

package/src/color-picker/types.ts

@@ -5,9 +5,9 @@ import type {StyleProp, ViewStyle} from 'react-native';
  * opens the system color picker.
  *
  * Bridges the SwiftUI `ColorPicker` on iOS. Android (Jetpack Compose) and
- * web (DOM) redraw the iOS row — the label and the rainbow-ringed well — and
- * open a sheet that reproduces the iOS picker: Grid, Spectrum and Sliders
- * tabs, the opacity slider and the preview swatch with saved colors.
+ * web (DOM) redraw the iOS row — the label and the well — and open a sheet
+ * that reproduces the iOS picker: Grid, Spectrum and Sliders tabs, the
+ * opacity slider and the preview swatch with saved colors.
  * A controlled control: pair `value` with `onValueChange`.
  */
 export interface ColorPickerProps {
@@ -25,6 +25,12 @@ export interface ColorPickerProps {
    * @default true
    */
   supportsOpacity?: boolean;
+  /**
+   * Preset colors (`#RRGGBB`) drawn as a row of round swatches before the
+   * well on every platform, the selected one ringed; tapping one picks it.
+   * The well still opens the full picker for any other color.
+   */
+  swatches?: string[];
   /** Disables interaction. */
   disabled?: boolean;
   /** Identifier used to locate the component in end-to-end tests. */

package/src/context-menu/index.android.tsx

@@ -2,26 +2,54 @@ import type {ContextMenuProps} from '../menu/types';
 
 import {useState} from 'react';
 import {Box, DropdownMenu} from '@expo/ui/jetpack-compose';
-import {combinedClickable, testID as testIDModifier} from '@expo/ui/jetpack-compose/modifiers';
+import {combinedClickable, matchParentSize, offset, size, testID as testIDModifier} from '@expo/ui/jetpack-compose/modifiers';
 import {MenuItems} from '../menu/index.android';
 
 /**
  * Android wraps `children` in a `Box` with `combinedClickable`, so a
- * long-press expands a Material 3 `DropdownMenu` anchored to it while a tap
- * goes to `onPress`. `children` must be Compose content.
+ * long-press expands a Material 3 `DropdownMenu` while a tap goes to
+ * `onPress`. `children` must be Compose content.
+ *
+ * The dropdown is anchored to an invisible box laid over the content: the
+ * size of the content for a long-press (the menu opens below it, as a
+ * Compose menu does), or a zero-size box offset to the `at` point, which is
+ * how the menu opens where a canvas says it was asked for.
  */
-export function ContextMenu({items, children, onPress, disabled, testID}: ContextMenuProps) {
+export function ContextMenu({items, children, onPress, disabled, at, onDismiss, testID}: ContextMenuProps) {
   const [expanded, setExpanded] = useState(false);
+  const [point, setPoint] = useState(at ?? null);
+  // A new `at` (including one given at mount) opens the menu there; derived
+  // from the prop as it changes.
+  const [seen, setSeen] = useState<ContextMenuProps['at']>(undefined);
+  if (at !== seen) {
+    setSeen(at);
+    if (at && !disabled) {
+      setPoint(at);
+      setExpanded(true);
+    }
+  }
+  const close = () => {
+    setExpanded(false);
+    onDismiss?.();
+  };
+
   const modifiers = [
-    ...(disabled ? [] : [combinedClickable({onClick: onPress, onLongClick: () => setExpanded(true)})]),
+    ...(disabled ? [] : [combinedClickable({onClick: onPress, onLongClick: () => {
+      setPoint(null);
+      setExpanded(true);
+    }})]),
     ...(testID ? [testIDModifier(testID)] : []),
   ];
+
   return (
-    <DropdownMenu expanded={expanded} onDismissRequest={() => setExpanded(false)}>
-      <DropdownMenu.Trigger>
-        <Box modifiers={modifiers}>{children}</Box>
-      </DropdownMenu.Trigger>
-      <MenuItems items={items} onClose={() => setExpanded(false)}/>
-    </DropdownMenu>
+    <Box modifiers={modifiers}>
+      {children}
+      <DropdownMenu
+        expanded={expanded}
+        onDismissRequest={close}
+        modifiers={point ? [offset(point.x, point.y), size(0, 0)] : [matchParentSize()]}>
+        <MenuItems items={items} onClose={close}/>
+      </DropdownMenu>
+    </Box>
   );
 }

package/src/context-menu/index.ios.tsx

@@ -7,7 +7,9 @@ import {MenuItems} from '../menu/index.ios';
 /**
  * iOS renders SwiftUI's `contextMenu`: a long-press on `children` lifts it
  * into a preview with the entries beneath. `children` must be SwiftUI
- * content. A plain tap is passed to `onPress` through `onTapGesture`.
+ * content. A plain tap is passed to `onPress` through `onTapGesture`. SwiftUI
+ * has no menu at a point, so `at` is ignored here (the long-press stays the
+ * trigger) and `onDismiss` is not reported.
  */
 export function ContextMenu({items, children, onPress, disabled, testID}: ContextMenuProps) {
   if (disabled) return <>{children}</>;

package/src/context-menu/index.tsx

@@ -1,21 +1,24 @@
 import '../menu/menu.css';
 import type {MouseEvent, PointerEvent} from 'react';
 import type {ContextMenuProps} from '../menu/types';
-import {useId, useRef, useState} from 'react';
+import {useEffect, useId, useRef, useState} from 'react';
 import {MenuList, menuIdent} from '../menu/list';
 
 const LONG_PRESS_MS = 500;
 
 /**
  * On web the entries live in the same native `popover="auto"` element as
- * `Menu`, opened with `showPopover()` on right-click (`contextmenu`) or a
- * touch long-press and placed at the pointer. The browser still owns the top
- * layer and light dismiss. The wrapper is `display: contents`, so it doesn't
- * affect the layout of `children`.
+ * `Menu`, opened with `showPopover()` on right-click (`contextmenu`), a touch
+ * long-press, or the `at` prop, and placed at the pointer. The browser still
+ * owns the top layer and light dismiss. The wrapper is `display: contents`,
+ * so it doesn't affect the layout of `children`; `at` is measured against
+ * the content's first element (its own coordinates), falling back to the
+ * viewport when the content has no box of its own.
  */
-export function ContextMenu({items, children, onPress, disabled, testID}: ContextMenuProps) {
+export function ContextMenu({items, children, onPress, disabled, at, onDismiss, testID}: ContextMenuProps) {
   const ident = menuIdent(useId());
   const popover = useRef<HTMLDivElement>(null);
+  const wrapper = useRef<HTMLDivElement>(null);
   const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
   const [position, setPosition] = useState<{x: number; y: number} | null>(null);
 
@@ -39,8 +42,22 @@ export function ContextMenu({items, children, onPress, disabled, testID}: Contex
     timer.current = null;
   };
 
+  // A point the content reports (a canvas's own right click): relative to
+  // the content's box, which `display: contents` leaves to its first child
+  // (the popover itself when the content has no element of its own, in which
+  // case the point is taken as viewport coordinates).
+  useEffect(() => {
+    if (!at || disabled) return;
+    const content = wrapper.current!.firstElementChild;
+    const rect = content !== popover.current ? content!.getBoundingClientRect() : {left: 0, top: 0};
+    setPosition({x: rect.left + at.x, y: rect.top + at.y});
+    const element = popover.current;
+    if (element && !element.matches(':popover-open')) element.showPopover();
+  }, [at, disabled]);
+
   return (
     <div
+      ref={wrapper}
       className="ui-context-menu"
       onContextMenu={onContextMenu}
       onPointerDown={onPointerDown}
@@ -50,7 +67,7 @@ export function ContextMenu({items, children, onPress, disabled, testID}: Contex
       onClick={disabled ? undefined : onPress}
       data-testid={testID}>
       {children}
-      <MenuList id={ident} items={items} position={position} popoverRef={popover}/>
+      <MenuList id={ident} items={items} position={position} popoverRef={popover} onClose={onDismiss}/>
     </div>
   );
 }

package/src/fab/fab.css

@@ -0,0 +1,72 @@
+/*
+ * The Material floating action button geometry on the web: a 56px circle
+ * (40 small, 96 large) or a 56px capsule when extended, filled with the tint,
+ * the icon and label in the contrast color, lifted by a soft shadow. Where it
+ * floats is the screen's job (`Screen`'s `fab` slot fixes it to the viewport).
+ */
+.ui-fab__anchor {
+  display: inline-flex;
+}
+
+.ui-fab {
+  -webkit-appearance: none;
+  appearance: none;
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  box-sizing: border-box;
+  width: 56px;
+  height: 56px;
+  margin: 0;
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  background: var(--color-tint);
+  color: var(--color-on-tint);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
+  font-family: var(--font-display);
+  font-size: 15px;
+  font-weight: 600;
+  line-height: 1.2;
+  white-space: nowrap;
+  cursor: pointer;
+  user-select: none;
+  transition: filter 0.15s ease, opacity 0.15s ease;
+}
+
+.ui-fab--small {
+  width: 40px;
+  height: 40px;
+}
+
+.ui-fab--large {
+  width: 96px;
+  height: 96px;
+}
+
+.ui-fab--extended {
+  width: auto;
+  height: 56px;
+  padding: 0 20px;
+  border-radius: 999px;
+}
+
+.ui-fab:hover:not(:disabled) {
+  filter: brightness(1.08);
+}
+
+.ui-fab:active:not(:disabled) {
+  filter: brightness(0.92);
+}
+
+.ui-fab:focus-visible {
+  outline: 2px solid var(--color-label);
+  outline-offset: 2px;
+}
+
+.ui-fab:disabled {
+  opacity: 0.45;
+  cursor: default;
+}

package/src/fab/index.android.tsx

@@ -0,0 +1,72 @@
+import type {ModifierConfig} from '@expo/ui/jetpack-compose/modifiers';
+import type {FabProps, FabSize} from './types';
+
+import {useState} from 'react';
+import {
+  DropdownMenu,
+  ExtendedFloatingActionButton,
+  FloatingActionButton,
+  Icon,
+  LargeFloatingActionButton,
+  SmallFloatingActionButton,
+  Text,
+} from '@expo/ui/jetpack-compose';
+import {alpha, testID as testIDModifier} from '@expo/ui/jetpack-compose/modifiers';
+import {NativeHost} from '../host';
+import {MenuItems} from '../menu/index.android';
+import {useColor} from '../theme';
+import {FAB_ICON} from './shared';
+
+const VARIANT: Record<FabSize, typeof FloatingActionButton> = {
+  small: SmallFloatingActionButton,
+  regular: FloatingActionButton,
+  large: LargeFloatingActionButton,
+  extended: ExtendedFloatingActionButton,
+};
+
+/**
+ * Android renders the Material 3 `FloatingActionButton` family, filled with
+ * the accent (the container color) and the icon in `onTint`, inside its own
+ * accent-seeded host so it can float over a React Native screen. With
+ * `items` the button is the trigger of the same Compose `DropdownMenu` the
+ * kit's `Menu` anchors, so the menu is shared and only the trigger differs.
+ */
+export function Fab({label, icon, onPress, items, size = 'regular', disabled, testID}: FabProps) {
+  const tint = useColor('tint');
+  const onTint = useColor('onTint');
+  const [expanded, setExpanded] = useState(false);
+  const Component = VARIANT[size];
+  const modifiers: ModifierConfig[] = [];
+  if (disabled) modifiers.push(alpha(0.4));
+  if (testID) modifiers.push(testIDModifier(testID));
+  const press = items ? () => setExpanded(true) : onPress;
+
+  const button = (
+    <Component containerColor={tint} onClick={disabled ? undefined : press} modifiers={modifiers}>
+      <FloatingActionButton.Icon>
+        {icon.drawable ? (
+          <Icon source={icon.drawable} size={FAB_ICON[size]} tint={onTint} contentDescription={label}/>
+        ) : (
+          // No drawable registered for this icon (see `icon()`): the label stands in.
+          <Text color={onTint}>{label.slice(0, 1)}</Text>
+        )}
+      </FloatingActionButton.Icon>
+      {size === 'extended' ? (
+        <ExtendedFloatingActionButton.Text>
+          <Text color={onTint} style={{fontWeight: '600'}}>{label}</Text>
+        </ExtendedFloatingActionButton.Text>
+      ) : null}
+    </Component>
+  );
+
+  return (
+    <NativeHost fit>
+      {items ? (
+        <DropdownMenu expanded={expanded} onDismissRequest={() => setExpanded(false)}>
+          <DropdownMenu.Trigger>{button}</DropdownMenu.Trigger>
+          <MenuItems items={items} onClose={() => setExpanded(false)}/>
+        </DropdownMenu>
+      ) : button}
+    </NativeHost>
+  );
+}

package/src/fab/index.ios.tsx

@@ -0,0 +1,68 @@
+import type {ViewModifier} from '@expo/ui/swift-ui/modifiers';
+import type {FabProps} from './types';
+
+import {Button, HStack, Image, Menu as SwiftUIMenu, Text} from '@expo/ui/swift-ui';
+import {
+  accessibilityLabel,
+  background,
+  buttonStyle,
+  disabled as disabledMod,
+  font,
+  foregroundStyle,
+  frame,
+  opacity,
+  padding,
+  shadow,
+  shapes,
+} from '@expo/ui/swift-ui/modifiers';
+import {iosSymbol} from '../button/shared';
+import {NativeHost} from '../host';
+import {MenuItems} from '../menu/index.ios';
+import {useColor} from '../theme';
+import {FAB_EXTENDED_PADDING, FAB_GAP, FAB_ICON, FAB_SIZE} from './shared';
+
+/**
+ * iOS has no floating action button, so it is drawn in SwiftUI: a circle
+ * (56 pt, 40 small, 96 large) or a capsule when extended, filled with the
+ * tint, the icon in `onTint`, a soft shadow, as the label of a plain
+ * `Button`; with `items`, as the label of a SwiftUI `Menu`, whose entries are
+ * the ones the kit's `Menu` renders.
+ */
+export function Fab({label, icon, onPress, items, size = 'regular', disabled, testID}: FabProps) {
+  const tint = useColor('tint');
+  const onTint = useColor('onTint');
+  const circle = size !== 'extended';
+  const dimension = FAB_SIZE[size];
+  const faceModifiers: ViewModifier[] = [
+    circle ? frame({width: dimension, height: dimension}) : frame({height: dimension}),
+  ];
+  if (!circle) faceModifiers.push(padding({horizontal: FAB_EXTENDED_PADDING}));
+  faceModifiers.push(
+    background(tint, circle ? shapes.circle() : shapes.capsule()),
+    shadow({radius: 4, y: 2, color: 'rgba(0, 0, 0, 0.25)'}),
+  );
+  const face = (
+    <HStack spacing={FAB_GAP} modifiers={faceModifiers}>
+      <Image systemName={iosSymbol(icon)} color={onTint} size={FAB_ICON[size]}/>
+      {circle ? null : (
+        <Text modifiers={[foregroundStyle({type: 'color', color: onTint}), font({weight: 'semibold'})]}>{label}</Text>
+      )}
+    </HStack>
+  );
+  const modifiers: ViewModifier[] = [buttonStyle('plain'), accessibilityLabel(label)];
+  if (disabled) modifiers.push(disabledMod(true), opacity(0.4));
+
+  return (
+    <NativeHost fit>
+      {items ? (
+        <SwiftUIMenu label={face} modifiers={modifiers} testID={testID}>
+          <MenuItems items={items}/>
+        </SwiftUIMenu>
+      ) : (
+        <Button onPress={onPress} modifiers={modifiers} testID={testID}>
+          {face}
+        </Button>
+      )}
+    </NativeHost>
+  );
+}

package/src/fab/index.tsx

@@ -0,0 +1,37 @@
+import './fab.css';
+import type {CSSProperties} from 'react';
+import type {FabProps} from './types';
+import {useId, useRef} from 'react';
+import {SymbolView} from 'expo-symbols';
+import {MenuList, menuIdent} from '../menu/list';
+import {FAB_ICON} from './shared';
+
+/**
+ * On web the button is a `<button>` with the Material geometry (a circle or
+ * an extended capsule, filled with the tint) styled via `fab.css`. With
+ * `items` it carries a `popovertarget` to the kit's popup menu, the same
+ * `MenuList` the `Menu` opens, anchored above the button by CSS anchor
+ * positioning. Where it floats is the screen's job (`Screen`'s `fab` slot).
+ */
+export function Fab({label, icon, onPress, items, size = 'regular', disabled, testID}: FabProps) {
+  const ident = menuIdent(useId());
+  const anchor = `--${ident}`;
+  const wrapper = useRef<HTMLSpanElement>(null);
+  const extended = size === 'extended';
+  return (
+    <span ref={wrapper} className="ui-fab__anchor" style={{anchorName: anchor} as CSSProperties}>
+      <button
+        type="button"
+        className={`ui-fab ui-fab--${size}`}
+        aria-label={extended ? undefined : label}
+        disabled={disabled}
+        onClick={items ? undefined : onPress}
+        popoverTarget={items ? ident : undefined}
+        data-testid={testID}>
+        <SymbolView name={icon.symbol} size={FAB_ICON[size]} tintColor="currentColor"/>
+        {extended ? <span className="ui-fab__label">{label}</span> : null}
+      </button>
+      {items ? <MenuList id={ident} items={items} anchor={anchor} anchorRef={wrapper}/> : null}
+    </span>
+  );
+}

package/src/fab/shared.ts

@@ -0,0 +1,23 @@
+import type {FabSize} from './types';
+
+/** Diameter of the circular sizes and height of the extended one, in points (Material's). */
+export const FAB_SIZE: Record<FabSize, number> = {
+  small: 40,
+  regular: 56,
+  large: 96,
+  extended: 56,
+};
+
+/** Icon size per `FabSize`. */
+export const FAB_ICON: Record<FabSize, number> = {
+  small: 24,
+  regular: 24,
+  large: 36,
+  extended: 24,
+};
+
+/** Horizontal padding of the extended capsule. */
+export const FAB_EXTENDED_PADDING = 20;
+
+/** Gap between the icon and the label of the extended one. */
+export const FAB_GAP = 12;