@btndprojects/loam-ui-native 0.2.1 → 0.3.1

package/dist/{chunk-W63AJTM7.js → chunk-LAUJPLDB.js}

@@ -1,13 +1,15 @@
 import { DRAG_CURSOR } from './chunk-KTAC4MGE.js';
-import { Input } from './chunk-7BUIKDD6.js';
+import { Sheet } from './chunk-B7JZ3N5G.js';
+import { Input } from './chunk-KXLDK6HB.js';
 import { haptics } from './chunk-NY2U3PBI.js';
 import { useLabels } from './chunk-APCWFOZW.js';
-import { Icon } from './chunk-UXGIW7OK.js';
+import { Icon } from './chunk-PCEFCOLN.js';
+import { useResolvedMotion } from './chunk-J64KGCGX.js';
 import * as React from 'react';
-import { PanResponder, View, StyleSheet, Pressable, Animated, Easing } from 'react-native';
+import { View, Pressable, Text, PanResponder, StyleSheet, Platform, Animated, Easing } from 'react-native';
 import { Svg, Defs, LinearGradient, Stop, Rect, Pattern } from 'react-native-svg';
 import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 
 var GEOMETRY = {
   sm: { plane: 120, hue: 12, thumb: 16 },
@@ -99,6 +101,8 @@ var DEFAULT_LABELS = {
   hexError: "Enter a 6-digit hex, like #4A7C59",
   savedColours: "Saved colours",
   useSaved: (hex) => `Use saved colour ${hex}`,
+  presetColours: "Preset colours",
+  usePreset: (hex) => `Use preset colour ${hex}`,
   saveColour: "Save this colour"
 };
 var CHECK = 4;
@@ -110,22 +114,31 @@ function Checker({ id, dark }) {
     /* @__PURE__ */ jsx(Rect, { x: CHECK, y: CHECK, width: CHECK, height: CHECK, fill: b })
   ] });
 }
-function ColorField({
+function ColorFieldBody({
   value,
   defaultValue = "#4A7C59",
   onValueChange,
   showInput = true,
+  surface = "filled",
   disabled = false,
+  readOnly = false,
+  hint,
+  error,
+  success = false,
+  loading = false,
+  placeholder,
   size = "md",
   accessibilityLabel,
   style,
   savedColors,
+  presets,
   onSavedColorsChange,
   showAlpha = false,
   alpha: alphaProp,
   defaultAlpha = 1,
   onAlphaChange,
-  labels: labelsProp
+  labels: labelsProp,
+  motion = "full"
 }) {
   const labels = useLabels("colorField", DEFAULT_LABELS, labelsProp);
   const isControlled = value !== void 0;
@@ -147,8 +160,9 @@ function ColorField({
   const hueBox = React.useRef({ w: 0, x: 0 });
   const hsvRef = React.useRef(hsv);
   hsvRef.current = hsv;
-  const disabledRef = React.useRef(disabled);
-  disabledRef.current = disabled;
+  const locked = disabled || readOnly;
+  const disabledRef = React.useRef(locked);
+  disabledRef.current = locked;
   const editingHex = React.useRef(false);
   const [hexTouched, setHexTouched] = React.useState(false);
   const [planeW, setPlaneW] = React.useState(0);
@@ -220,8 +234,10 @@ function ColorField({
       else return false;
       return true;
     }
-    if (key === "ArrowRight" || key === "ArrowUp") commit({ ...cur, h: clamp(cur.h + step, 0, 360) });
-    else if (key === "ArrowLeft" || key === "ArrowDown") commit({ ...cur, h: clamp(cur.h - step, 0, 360) });
+    if (key === "ArrowRight" || key === "ArrowUp")
+      commit({ ...cur, h: clamp(cur.h + step, 0, 360) });
+    else if (key === "ArrowLeft" || key === "ArrowDown")
+      commit({ ...cur, h: clamp(cur.h - step, 0, 360) });
     else if (key === "Home") commit({ ...cur, h: 0 });
     else if (key === "End") commit({ ...cur, h: 360 });
     else return false;
@@ -308,7 +324,9 @@ function ColorField({
   };
   const onAlphaAction = (e) => {
     if (disabledRef.current) return;
-    commitAlpha.current(alphaRefVal.current + (e.nativeEvent.actionName === "increment" ? 0.1 : -0.1));
+    commitAlpha.current(
+      alphaRefVal.current + (e.nativeEvent.actionName === "increment" ? 0.1 : -0.1)
+    );
   };
   const saveCurrent = () => {
     const key = hex.toUpperCase();
@@ -316,7 +334,7 @@ function ColorField({
     onSavedColorsChange?.([key, ...rest]);
   };
   const pickSaved = (c) => {
-    if (disabled) return;
+    if (locked) return;
     const next = hexToHsv(c, hsvRef.current.h);
     if (next) commit(next);
   };
@@ -347,9 +365,9 @@ function ColorField({
         "aria-valuemax": 100,
         "aria-valuenow": Math.round(hsv.v),
         "aria-valuetext": labels.planeValue(Math.round(hsv.s), Math.round(hsv.v)),
-        style: [styles.plane, !disabled && DRAG_CURSOR],
-        ...disabled ? {} : planePan.panHandlers,
-        ...{ tabIndex: disabled ? -1 : 0, onKeyDown: keyHandler("plane") },
+        style: [styles.plane, !locked && DRAG_CURSOR],
+        ...locked ? {} : planePan.panHandlers,
+        ...{ tabIndex: locked ? -1 : 0, onKeyDown: keyHandler("plane") },
         children: [
           planeW > 0 ? /* @__PURE__ */ jsxs(Svg, { width: planeW, height: geo.plane, style: StyleSheet.absoluteFill, children: [
             /* @__PURE__ */ jsxs(Defs, { children: [
@@ -392,9 +410,9 @@ function ColorField({
         "aria-valuenow": Math.round(hsv.h),
         accessibilityActions: hueActions,
         onAccessibilityAction: onHueAction,
-        style: [styles.hue, !disabled && DRAG_CURSOR],
-        ...disabled ? {} : huePan.panHandlers,
-        ...{ tabIndex: disabled ? -1 : 0, onKeyDown: keyHandler("hue") },
+        style: [styles.hue, !locked && DRAG_CURSOR],
+        ...locked ? {} : huePan.panHandlers,
+        ...{ tabIndex: locked ? -1 : 0, onKeyDown: keyHandler("hue") },
         children: [
           hueW > 0 ? /* @__PURE__ */ jsxs(Svg, { width: hueW, height: geo.hue, style: StyleSheet.absoluteFill, children: [
             /* @__PURE__ */ jsx(Defs, { children: /* @__PURE__ */ jsxs(LinearGradient, { id: "loam-cf-hue", x1: "0", y1: "0", x2: "1", y2: "0", children: [
@@ -429,7 +447,12 @@ function ColorField({
         onLayout: onAlphaLayout,
         accessibilityRole: "adjustable",
         accessibilityLabel: accessibilityLabel ? labels.opacityNamed(accessibilityLabel) : labels.opacity,
-        accessibilityValue: { min: 0, max: 100, now: Math.round(alpha * 100), text: labels.opacityValue(Math.round(alpha * 100)) },
+        accessibilityValue: {
+          min: 0,
+          max: 100,
+          now: Math.round(alpha * 100),
+          text: labels.opacityValue(Math.round(alpha * 100))
+        },
         accessibilityState: { disabled },
         "aria-valuemin": 0,
         "aria-valuemax": 100,
@@ -437,9 +460,9 @@ function ColorField({
         "aria-valuetext": labels.opacityValue(Math.round(alpha * 100)),
         accessibilityActions: hueActions,
         onAccessibilityAction: onAlphaAction,
-        style: [styles.hue, !disabled && DRAG_CURSOR],
-        ...disabled ? {} : alphaPan.panHandlers,
-        ...{ tabIndex: disabled ? -1 : 0, onKeyDown: onAlphaKey },
+        style: [styles.hue, !locked && DRAG_CURSOR],
+        ...locked ? {} : alphaPan.panHandlers,
+        ...{ tabIndex: locked ? -1 : 0, onKeyDown: onAlphaKey },
         children: [
           alphaW > 0 ? /* @__PURE__ */ jsxs(Svg, { width: alphaW, height: geo.hue, style: StyleSheet.absoluteFill, children: [
             /* @__PURE__ */ jsxs(Defs, { children: [
@@ -449,8 +472,28 @@ function ColorField({
                 /* @__PURE__ */ jsx(Stop, { offset: "1", stopColor: hex, stopOpacity: 1 })
               ] })
             ] }),
-            /* @__PURE__ */ jsx(Rect, { x: "0", y: "0", width: alphaW, height: geo.hue, rx: geo.hue / 2, fill: "url(#loam-cf-check)" }),
-            /* @__PURE__ */ jsx(Rect, { x: "0", y: "0", width: alphaW, height: geo.hue, rx: geo.hue / 2, fill: "url(#loam-cf-alpha)" })
+            /* @__PURE__ */ jsx(
+              Rect,
+              {
+                x: "0",
+                y: "0",
+                width: alphaW,
+                height: geo.hue,
+                rx: geo.hue / 2,
+                fill: "url(#loam-cf-check)"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Rect,
+              {
+                x: "0",
+                y: "0",
+                width: alphaW,
+                height: geo.hue,
+                rx: geo.hue / 2,
+                fill: "url(#loam-cf-alpha)"
+              }
+            )
           ] }) : null,
           /* @__PURE__ */ jsx(
             View,
@@ -468,12 +511,22 @@ function ColorField({
     showInput ? /* @__PURE__ */ jsxs(View, { style: styles.row, children: [
       showAlpha ? /* @__PURE__ */ jsx(View, { style: [styles.preview, styles.alphaPreview], testID: "color-field-alpha-preview", children: [false, true].map((dark) => /* @__PURE__ */ jsxs(Svg, { width: "50%", height: "100%", children: [
         /* @__PURE__ */ jsx(Defs, { children: /* @__PURE__ */ jsx(Checker, { id: dark ? "loam-cf-pd" : "loam-cf-pl", dark }) }),
-        /* @__PURE__ */ jsx(Rect, { x: "0", y: "0", width: "100%", height: "100%", fill: `url(#${dark ? "loam-cf-pd" : "loam-cf-pl"})` }),
+        /* @__PURE__ */ jsx(
+          Rect,
+          {
+            x: "0",
+            y: "0",
+            width: "100%",
+            height: "100%",
+            fill: `url(#${dark ? "loam-cf-pd" : "loam-cf-pl"})`
+          }
+        ),
         /* @__PURE__ */ jsx(Rect, { x: "0", y: "0", width: "100%", height: "100%", fill: hex, fillOpacity: alpha })
-      ] }, String(dark))) }) : /* @__PURE__ */ jsx(PreviewSwatch, { color: hex, style: styles.preview }),
+      ] }, String(dark))) }) : /* @__PURE__ */ jsx(PreviewSwatch, { color: hex, style: styles.preview, motion }),
       /* @__PURE__ */ jsx(View, { style: styles.inputWrap, children: /* @__PURE__ */ jsx(
         Input,
         {
+          surface,
           value: hexText,
           onChangeText: onHexChange,
           onFocus: () => {
@@ -484,61 +537,108 @@ function ColorField({
             setHexTouched(true);
             setHexText(hex);
           },
-          editable: !disabled,
+          editable: !locked,
           autoCapitalize: "characters",
           autoCorrect: false,
           maxLength: 7,
-          size: size === "sm" ? "sm" : "md",
-          validationState: hexError ? "invalid" : "default",
-          message: hexError ? labels.hexError : void 0,
+          size: size === "sm" ? "md" : "lg",
+          placeholder,
+          loading,
+          success,
+          validationState: hexError || error ? "invalid" : "default",
+          message: error ?? (hexError ? labels.hexError : void 0),
           showStatusIcon: false,
           accessibilityLabel: labels.hexColour,
           style: { fontFamily: theme.font.mono }
         }
       ) })
     ] }) : null,
-    savedColors || onSavedColorsChange ? /* @__PURE__ */ jsxs(View, { accessibilityRole: "group", accessibilityLabel: labels.savedColours, style: styles.saved, children: [
-      (savedColors ?? []).map((c) => /* @__PURE__ */ jsx(
-        Pressable,
-        {
-          accessibilityRole: "button",
-          accessibilityLabel: labels.useSaved(c.toUpperCase()),
-          accessibilityState: { disabled },
-          disabled,
-          onPress: () => pickSaved(c),
-          hitSlop: theme.space[4],
-          style: [styles.swatch, { backgroundColor: c }]
-        },
-        c
-      )),
-      onSavedColorsChange ? (
-        // A swatch-sized slot rather than a 30px button, so the row reads
-        // as one strip of equal squares with the next free slot at its end.
-        /* @__PURE__ */ jsx(
-          Pressable,
-          {
-            accessibilityRole: "button",
-            accessibilityLabel: labels.saveColour,
-            accessibilityState: { disabled },
-            disabled,
-            onPress: saveCurrent,
-            hitSlop: theme.space[4],
-            style: ({ pressed }) => [
-              styles.swatch,
-              styles.saveSlot,
-              pressed ? { backgroundColor: theme.state.pressed } : null,
-              disabled ? { opacity: theme.state.disabledOpacity } : null
-            ],
-            children: /* @__PURE__ */ jsx(Icon, { name: "plus", size: 14, color: theme.color.text2 })
-          }
-        )
-      ) : null
-    ] }) : null
+    presets && presets.length > 0 ? /* @__PURE__ */ jsx(
+      View,
+      {
+        accessibilityRole: "radiogroup",
+        accessibilityLabel: labels.presetColours,
+        testID: "color-field-presets",
+        style: styles.saved,
+        children: presets.map((c) => {
+          const checked = c.toUpperCase() === hex.toUpperCase();
+          return /* @__PURE__ */ jsx(
+            Pressable,
+            {
+              accessibilityRole: "radio",
+              accessibilityLabel: labels.usePreset(c.toUpperCase()),
+              accessibilityState: { checked, disabled },
+              ...Platform.OS === "web" ? { "aria-checked": checked } : null,
+              disabled: locked,
+              onPress: () => pickSaved(c),
+              hitSlop: theme.space[4],
+              style: [
+                styles.swatch,
+                { backgroundColor: c },
+                checked ? styles.swatchChecked : null
+              ]
+            },
+            c
+          );
+        })
+      }
+    ) : null,
+    savedColors || onSavedColorsChange ? /* @__PURE__ */ jsxs(
+      View,
+      {
+        accessibilityRole: "group",
+        accessibilityLabel: labels.savedColours,
+        style: styles.saved,
+        children: [
+          (savedColors ?? []).map((c) => /* @__PURE__ */ jsx(
+            Pressable,
+            {
+              accessibilityRole: "button",
+              accessibilityLabel: labels.useSaved(c.toUpperCase()),
+              accessibilityState: { disabled },
+              disabled: locked,
+              onPress: () => pickSaved(c),
+              hitSlop: theme.space[4],
+              style: [styles.swatch, { backgroundColor: c }]
+            },
+            c
+          )),
+          onSavedColorsChange ? (
+            // A swatch-sized slot rather than a 30px button, so the row reads
+            // as one strip of equal squares with the next free slot at its end.
+            /* @__PURE__ */ jsx(
+              Pressable,
+              {
+                accessibilityRole: "button",
+                accessibilityLabel: labels.saveColour,
+                accessibilityState: { disabled },
+                disabled: locked,
+                onPress: saveCurrent,
+                hitSlop: theme.space[4],
+                style: ({ pressed }) => [
+                  styles.swatch,
+                  styles.saveSlot,
+                  pressed ? { backgroundColor: theme.state.pressed } : null,
+                  disabled ? { opacity: theme.state.disabledOpacity } : null
+                ],
+                children: /* @__PURE__ */ jsx(Icon, { name: "plus", size: 14, color: theme.color.text2 })
+              }
+            )
+          ) : null
+        ]
+      }
+    ) : null,
+    hint ? /* @__PURE__ */ jsx(Text, { style: styles.hint, children: hint }) : null
   ] });
 }
 var HEAVY_SHADOW_RATIO = 1.2;
-function PreviewSwatch({ color, style }) {
+function PreviewSwatch({
+  color,
+  style,
+  motion = "full"
+}) {
   const theme = useLoamTheme("color-field");
+  const animate = useResolvedMotion(motion, "color-field") !== "none";
   const progress = React.useRef(new Animated.Value(1)).current;
   const [range, setRange] = React.useState([color, color]);
   React.useEffect(() => {
@@ -546,6 +646,10 @@ function PreviewSwatch({ color, style }) {
   }, [color]);
   React.useEffect(() => {
     if (range[0] === range[1]) return;
+    if (!animate) {
+      progress.setValue(1);
+      return;
+    }
     progress.setValue(0);
     Animated.timing(progress, {
       toValue: 1,
@@ -553,11 +657,14 @@ function PreviewSwatch({ color, style }) {
       easing: Easing.out(Easing.quad),
       useNativeDriver: false
     }).start();
-  }, [range, progress, theme.spring.fe.duration]);
+  }, [range, progress, animate, theme.spring.fe.duration]);
   const backgroundColor = progress.interpolate({ inputRange: [0, 1], outputRange: range });
   return /* @__PURE__ */ jsx(Animated.View, { style: [style, { backgroundColor }] });
 }
 var sheet = createStyleSheet((theme) => ({
+  hint: { fontFamily: theme.font.sans, fontSize: theme.fontSize[12], color: theme.color.text3 },
+  sheetTrigger: { flexDirection: "row", alignItems: "center", gap: theme.space[8] },
+  sheetHex: { fontFamily: theme.font.mono, fontSize: theme.fontSize[14], color: theme.color.text },
   // The per-size `width` is the picker's preferred measure: a plane a little wider
   // than it is tall, which also leaves the swatch and the hex field a line they
   // both fit on. The caller's `style` merges after it, so it is a default rather
@@ -652,7 +759,7 @@ var sheet = createStyleSheet((theme) => ({
   preview: {
     width: theme.space[32],
     height: theme.space[32],
-    borderRadius: theme.radius.sm,
+    borderRadius: theme.radius.xs,
     borderWidth: theme.borderWidth.base,
     borderColor: theme.color.border
   },
@@ -673,10 +780,14 @@ var sheet = createStyleSheet((theme) => ({
   swatch: {
     width: theme.space[24],
     height: theme.space[24],
-    borderRadius: theme.radius.sm,
+    borderRadius: theme.radius.xs,
     borderWidth: theme.borderWidth.base,
     borderColor: theme.color.border
   },
+  swatchChecked: {
+    borderWidth: theme.borderWidth.heavy,
+    borderColor: theme.color.text
+  },
   saveSlot: {
     alignItems: "center",
     justifyContent: "center",
@@ -684,5 +795,59 @@ var sheet = createStyleSheet((theme) => ({
     borderColor: theme.color.borderStrong
   }
 }));
+function ColorField({
+  presentation = "inline",
+  ...props
+}) {
+  const [open, setOpen] = React.useState(false);
+  const [local, setLocal] = React.useState(props.value ?? props.defaultValue ?? "#4A7C59");
+  const { styles } = useStyles(sheet, {
+    size: props.size ?? "md",
+    disabled: props.disabled ?? false
+  });
+  const labels = useLabels("colorField", DEFAULT_LABELS, props.labels);
+  const current = props.value ?? local;
+  if (presentation === "inline") return /* @__PURE__ */ jsx(ColorFieldBody, { ...props });
+  const locked = Boolean(props.disabled || props.readOnly);
+  return /* @__PURE__ */ jsxs(View, { style: props.style, children: [
+    /* @__PURE__ */ jsxs(
+      Pressable,
+      {
+        accessibilityRole: "button",
+        accessibilityLabel: `${props.accessibilityLabel ?? labels.hexColour} ${current.toUpperCase()}`,
+        accessibilityState: { disabled: locked, expanded: open },
+        disabled: locked,
+        onPress: () => setOpen(true),
+        style: styles.sheetTrigger,
+        children: [
+          /* @__PURE__ */ jsx(PreviewSwatch, { color: current, style: styles.preview, motion: props.motion }),
+          /* @__PURE__ */ jsx(Text, { style: styles.sheetHex, children: current.toUpperCase() })
+        ]
+      }
+    ),
+    props.hint ? /* @__PURE__ */ jsx(Text, { style: styles.hint, children: props.hint }) : null,
+    /* @__PURE__ */ jsx(
+      Sheet,
+      {
+        open,
+        onClose: () => setOpen(false),
+        title: props.accessibilityLabel,
+        motion: props.motion,
+        children: /* @__PURE__ */ jsx(
+          ColorFieldBody,
+          {
+            ...props,
+            style: void 0,
+            value: current,
+            onValueChange: (next) => {
+              setLocal(next);
+              props.onValueChange?.(next);
+            }
+          }
+        )
+      }
+    )
+  ] });
+}
 
 export { ColorField };

package/dist/{chunk-TN2ZNJUI.js → chunk-LGNTP5XA.js}

@@ -1,14 +1,29 @@
-import { NumberRoll } from './chunk-T5LTPKX6.js';
+import { NumberRoll } from './chunk-IMMALLRU.js';
 import { NAMED_ROLE } from './chunk-W23G6JLF.js';
-import { Icon } from './chunk-UXGIW7OK.js';
+import { useFocusRing } from './chunk-2YKVID2V.js';
+import { Icon } from './chunk-PCEFCOLN.js';
 import { useResolvedMotion, springConfig, motionTiming } from './chunk-J64KGCGX.js';
 import * as React from 'react';
-import { Animated, StyleSheet, Text } from 'react-native';
+import { Animated, StyleSheet, Text, Pressable } from 'react-native';
 import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-function useForeground(variant) {
+function useForeground(variant, solid = false) {
   const theme = useLoamTheme("badge");
+  if (solid) {
+    switch (variant) {
+      case "accent":
+        return theme.color.accentInk;
+      case "good":
+        return theme.color.goodInk;
+      case "warn":
+        return theme.color.warnInk;
+      case "danger":
+        return theme.color.dangerInk;
+      case "info":
+        return theme.color.infoInk;
+    }
+  }
   switch (variant) {
     case "accent":
       return theme.color.accentOnSoft;
@@ -30,6 +45,7 @@ function Badge({
   variant = "neutral",
   size = "md",
   outline = false,
+  solid = false,
   leadingIcon,
   dot = false,
   dotStyle,
@@ -39,14 +55,16 @@ function Badge({
   announce = false,
   motion = "full",
   animateCount = false,
+  onPress,
   accessibilityLabel,
   style
 }) {
   const { styles } = useStyles(sheet, { variant, size, outline });
   const theme = useLoamTheme("badge");
-  const fg = useForeground(variant);
+  const fg = useForeground(variant, solid);
+  const focusRing = useFocusRing(theme.radius.full);
   const iconSize = size === "sm" ? 12 : 14;
-  const dotSize = size === "sm" ? theme.space[6] : theme.space[7];
+  const dotSize = theme.space[6];
   const label = typeof children === "string" ? children : void 0;
   const level = useResolvedMotion(motion, "badge");
   const appear = React.useRef(new Animated.Value(level === "full" ? 0.5 : 1)).current;
@@ -79,13 +97,18 @@ function Badge({
   const isCount = count !== void 0;
   if (isCount && count === 0 && !showZero) return null;
   const display = isCount ? count > max ? `${max}+` : String(count) : void 0;
-  return /* @__PURE__ */ jsxs(
+  const pill = /* @__PURE__ */ jsxs(
     Animated.View,
     {
-      accessibilityRole: NAMED_ROLE,
+      accessibilityRole: onPress ? void 0 : NAMED_ROLE,
       accessibilityLabel: accessibilityLabel ?? (isCount ? String(count) : label),
       accessibilityLiveRegion: announce && isCount ? "polite" : "none",
-      style: [styles.base, style, { transform: [{ scale: appear }] }],
+      style: [
+        styles.base,
+        solid && variant !== "neutral" && !outline ? { backgroundColor: theme.color[variant], borderColor: theme.color[variant] } : null,
+        style,
+        { transform: [{ scale: appear }] }
+      ],
       children: [
         ghost ? /* @__PURE__ */ jsx(
           Animated.View,
@@ -129,6 +152,19 @@ function Badge({
       ]
     }
   );
+  if (!onPress) return pill;
+  return /* @__PURE__ */ jsx(
+    Pressable,
+    {
+      accessibilityRole: "link",
+      accessibilityLabel: accessibilityLabel ?? (isCount ? String(count) : label),
+      onPress,
+      onFocus: focusRing.handlers.onFocus,
+      onBlur: focusRing.handlers.onBlur,
+      style: [{ alignSelf: "flex-start", borderRadius: theme.radius.full }, focusRing.style],
+      children: pill
+    }
+  );
 }
 var sheet = createStyleSheet((theme) => ({
   base: {
@@ -157,9 +193,8 @@ var sheet = createStyleSheet((theme) => ({
       },
       size: {
         sm: { height: theme.space[20], paddingHorizontal: theme.space.s2 },
-        // Reference (buildWidgets chip): `padding:7px 13px` — 13px is a step of the spacing ramp.
-        // height is derived from padding + content (no fixed height in spec).
-        md: { paddingVertical: theme.space[7], paddingHorizontal: theme.space[13] }
+        // Final 03 (R10): md is pinned at 24 with 10 padding, like web.
+        md: { height: theme.space[24], paddingHorizontal: theme.space[10] }
       },
       outline: {
         true: {
@@ -177,7 +212,6 @@ var sheet = createStyleSheet((theme) => ({
     variants: {
       size: {
         sm: { fontSize: theme.fontSize[12] },
-        // Reference (buildWidgets chip): `font-size:13px` — 13px, read from the ramp rather than hardcoded.
         md: { fontSize: theme.fontSize[13] }
       },
       variant: {},