@btndprojects/loam-ui-native 0.2.1 → 0.3.1

package/dist/{chunk-QIKT7LIB.js → chunk-PFLNFIVB.js}

@@ -1,8 +1,11 @@
+import { resolveTextRole } from './chunk-L4D5LHCH.js';
+import { isAndroidIdiom } from './chunk-TH4PW2WU.js';
 import { useLabels } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-PCEFCOLN.js';
 import * as React from 'react';
-import { View, Text } from 'react-native';
+import { View, Text, Pressable } from 'react-native';
 import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 var DEFAULT_LABELS = {
   pair: (term, description) => `${term}, ${description}`
@@ -19,18 +22,28 @@ function DescriptionList({
   // Accepted for API consistency; static data drives no motion.
   motion: _motion,
   children,
-  labels
+  labels,
+  platform,
+  align
 }) {
   const { styles } = useStyles(sheet);
   const ctx = React.useMemo(
-    () => ({ layout, density, labels }),
-    [layout, density, labels]
+    () => ({ layout, density, labels, platform, align }),
+    [layout, density, labels, platform, align]
   );
   const rows = [
-    ...items?.map((entry, i) => /* @__PURE__ */ jsx(DescriptionItem, { term: entry.term, description: entry.description }, `item-${i}`)) ?? [],
+    ...items?.map((entry, i) => /* @__PURE__ */ jsx(
+      DescriptionItem,
+      {
+        term: entry.term,
+        description: entry.description,
+        onPress: entry.onPress
+      },
+      `item-${i}`
+    )) ?? [],
     ...React.Children.toArray(children)
   ];
-  const content = dividers ? rows.flatMap(
+  const content = dividers || layout === "inline" ? rows.flatMap(
     (row, i) => i === 0 ? [row] : [/* @__PURE__ */ jsx(View, { style: styles.divider }, `divider-${i}`), row]
   ) : rows;
   return /* @__PURE__ */ jsx(DescriptionListContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(View, { style: styles.root, children: content }) });
@@ -38,33 +51,88 @@ function DescriptionList({
 function DescriptionItem({
   term,
   description,
+  onPress,
   labels: labelsProp
 }) {
-  const { layout, density, labels: ctxLabels } = React.useContext(DescriptionListContext);
+  const {
+    layout,
+    density,
+    labels: ctxLabels,
+    platform,
+    align
+  } = React.useContext(DescriptionListContext);
   const labels = useLabels("descriptionList", DEFAULT_LABELS, labelsProp ?? ctxLabels);
   const { styles } = useStyles(sheet, { layout, density });
   const theme = useLoamTheme("description-list");
   const isInline = layout === "inline";
+  const android = isAndroidIdiom(theme, platform);
+  const body = resolveTextRole(theme, "body", android);
+  const textAlign = align ? align === "center" ? "center" : align === "start" === !theme.rtl ? "left" : "right" : void 0;
+  const row = isInline ? { minHeight: theme.space[android ? 56 : 44], alignItems: "center" } : null;
   const pairLabel = typeof term === "string" && typeof description === "string" ? labels.pair(term, description) : void 0;
-  return /* @__PURE__ */ jsxs(
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Text,
+      {
+        style: [
+          styles.term,
+          isInline && termInlineStyle,
+          isInline && { ...body, color: theme.color.text },
+          textAlign ? { textAlign } : null
+        ],
+        children: term
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Text,
+      {
+        style: [
+          styles.value,
+          isInline && {
+            ...body,
+            color: theme.color.text2,
+            flexShrink: 1,
+            textAlign: theme.rtl ? "left" : "right"
+          },
+          textAlign ? { textAlign } : null,
+          onPress && isInline ? { marginStart: "auto" } : null
+        ],
+        children: description
+      }
+    ),
+    onPress ? /* @__PURE__ */ jsx(
+      Icon,
+      {
+        name: theme.rtl ? "chevron-left" : "chevron-right",
+        size: theme.icon.sm,
+        color: theme.color.text3
+      }
+    ) : null
+  ] });
+  if (onPress) {
+    return /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        accessibilityRole: "button",
+        accessibilityLabel: pairLabel,
+        onPress,
+        style: ({ pressed }) => [
+          styles.container,
+          row,
+          { alignItems: "center" },
+          pressed ? { backgroundColor: theme.state.hover } : null
+        ],
+        children: content
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
     View,
     {
-      style: styles.container,
+      style: [styles.container, row],
       accessible: pairLabel !== void 0,
       accessibilityLabel: pairLabel,
-      children: [
-        /* @__PURE__ */ jsx(Text, { style: [styles.term, isInline && termInlineStyle], children: term }),
-        /* @__PURE__ */ jsx(
-          Text,
-          {
-            style: [
-              styles.value,
-              isInline && { flexShrink: 1, textAlign: theme.rtl ? "left" : "right" }
-            ],
-            children: description
-          }
-        )
-      ]
+      children: content
     }
   );
 }

package/dist/chunk-PHSZY37H.js

@@ -0,0 +1,300 @@
+import { Badge } from './chunk-LGNTP5XA.js';
+import { isAndroidIdiom } from './chunk-TH4PW2WU.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { useFocusRing } from './chunk-2YKVID2V.js';
+import { Icon } from './chunk-PCEFCOLN.js';
+import { springConfig } from './chunk-J64KGCGX.js';
+import * as React from 'react';
+import { View, Animated, Pressable, Text } from 'react-native';
+import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var DEFAULT_LABELS = {
+  tabWithBadge: (label, badge) => `${label}, ${badge}`
+};
+var CAPSULE_W = 56;
+var CAPSULE_H = 32;
+var GLYPH_SIZE = 22;
+var BAR_H = { ios: 49, android: 80 };
+var BADGE_MAX = 99;
+function translucent(color) {
+  return /^#[0-9a-f]{6}$/i.test(color) ? `${color}eb` : color;
+}
+function Tab({
+  item,
+  selected,
+  onPress,
+  motion,
+  bounce,
+  labels,
+  android,
+  showIndicator,
+  compact,
+  badgeSolid
+}) {
+  const theme = useLoamTheme("tab-bar");
+  const { styles } = useStyles(sheet);
+  const glyph = selected ? theme.color.accentStrong : theme.color.text2;
+  const ink = selected ? theme.color.text : theme.color.text2;
+  const scale = React.useRef(new Animated.Value(1)).current;
+  const spring = (to) => {
+    if (motion === "none" || android) return;
+    Animated.spring(scale, {
+      ...springConfig(theme, "fs"),
+      toValue: to,
+      useNativeDriver: true
+    }).start();
+  };
+  const badgeScale = React.useRef(new Animated.Value(1)).current;
+  const lastBadge = React.useRef(item.badge ?? 0);
+  React.useEffect(() => {
+    const now = item.badge ?? 0;
+    const rose = now > lastBadge.current;
+    lastBadge.current = now;
+    if (!rose || !bounce) return;
+    badgeScale.setValue(1.3);
+    Animated.spring(badgeScale, {
+      toValue: 1,
+      useNativeDriver: true,
+      speed: 20,
+      bounciness: 12
+    }).start();
+  }, [item.badge, bounce, badgeScale]);
+  const showBadge = item.badge !== void 0 && item.badge > 0;
+  const badgeText = item.badge !== void 0 && item.badge > BADGE_MAX ? `${BADGE_MAX}+` : `${item.badge}`;
+  const disabled = item.disabled === true;
+  const focusRing = useFocusRing(theme.radius.md);
+  return /* @__PURE__ */ jsx(
+    Pressable,
+    {
+      accessibilityRole: "tab",
+      accessibilityLabel: showBadge ? labels.tabWithBadge(item.label, badgeText) : item.label,
+      accessibilityState: { selected, disabled },
+      disabled,
+      onPress,
+      onPressIn: () => spring(0.9),
+      onPressOut: () => spring(1),
+      onFocus: focusRing.handlers.onFocus,
+      onBlur: focusRing.handlers.onBlur,
+      style: [styles.tab, disabled && { opacity: theme.state.disabledOpacity }, focusRing.style],
+      children: ({ pressed }) => /* @__PURE__ */ jsxs(
+        Animated.View,
+        {
+          style: [styles.tabInner, compact ? { gap: 0 } : null, { transform: [{ scale }] }],
+          children: [
+            /* @__PURE__ */ jsxs(
+              View,
+              {
+                testID: "tab-capsule",
+                style: [
+                  styles.capsule,
+                  selected && showIndicator && { backgroundColor: theme.state.selected },
+                  // iOS highlights the capsule; Android ripples inside it.
+                  pressed && !android && { backgroundColor: theme.state.pressed }
+                ],
+                children: [
+                  android ? /* @__PURE__ */ jsx(
+                    Pressable,
+                    {
+                      accessible: false,
+                      importantForAccessibility: "no",
+                      disabled,
+                      onPress,
+                      android_ripple: { color: theme.state.pressed, borderless: false },
+                      style: [
+                        StyleSheetAbsolute,
+                        { borderRadius: theme.radius.full, overflow: "hidden" }
+                      ]
+                    }
+                  ) : null,
+                  /* @__PURE__ */ jsx(Icon, { name: item.icon, size: GLYPH_SIZE, color: glyph }),
+                  showBadge ? /* @__PURE__ */ jsx(Animated.View, { style: [styles.badge, { transform: [{ scale: badgeScale }] }], children: /* @__PURE__ */ jsx(Badge, { size: "sm", variant: "danger", solid: badgeSolid, count: item.badge, max: BADGE_MAX }) }) : null
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Text,
+              {
+                style: [styles.label, android ? styles.labelAndroid : styles.labelIos, { color: ink }],
+                numberOfLines: 1,
+                children: item.label
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+var StyleSheetAbsolute = {
+  position: "absolute",
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0
+};
+function CenterAction({
+  action,
+  android
+}) {
+  const theme = useLoamTheme("tab-bar");
+  const { styles } = useStyles(sheet);
+  const disabled = action.disabled === true;
+  const focusRing = useFocusRing(theme.radius.md);
+  return /* @__PURE__ */ jsx(View, { style: styles.tab, children: /* @__PURE__ */ jsx(
+    Pressable,
+    {
+      accessibilityRole: "button",
+      accessibilityLabel: action.accessibilityLabel,
+      accessibilityHint: disabled ? action.disabledReason : void 0,
+      accessibilityState: { disabled },
+      onPress: disabled ? action.onDisabledPress : action.onPress,
+      android_ripple: android ? { color: theme.state.pressed, borderless: false } : void 0,
+      onFocus: focusRing.handlers.onFocus,
+      onBlur: focusRing.handlers.onBlur,
+      style: ({ pressed }) => [
+        styles.center,
+        focusRing.style,
+        android ? { width: CAPSULE_W, height: theme.space[40] } : { width: theme.ctl.lg, height: theme.ctl.lg },
+        {
+          backgroundColor: pressed && !android && !disabled ? theme.color.accentFillPress : theme.color.accent
+        },
+        disabled && { opacity: theme.state.disabledOpacity }
+      ],
+      children: /* @__PURE__ */ jsx(Icon, { name: action.icon, size: GLYPH_SIZE, color: theme.color.accentInk })
+    }
+  ) });
+}
+function TabBar({
+  items,
+  value,
+  onValueChange,
+  onReselect,
+  centerAction,
+  bottomInset = 0,
+  showIndicator = true,
+  motion = "full",
+  size = "md",
+  density = "comfortable",
+  variant = "default",
+  orientation = "horizontal",
+  disabled = false,
+  accessibilityLabel,
+  labels: labelsProp,
+  platform,
+  badgeSolid = false
+}) {
+  const theme = useLoamTheme("tab-bar");
+  const labels = useLabels("tabBar", DEFAULT_LABELS, labelsProp);
+  const { styles } = useStyles(sheet);
+  const android = isAndroidIdiom(theme, platform);
+  const select = (next) => {
+    if (next === value && onReselect) onReselect(next);
+    else onValueChange?.(next);
+  };
+  const cells = items.map((item) => /* @__PURE__ */ jsx(
+    Tab,
+    {
+      item,
+      selected: item.value === value,
+      onPress: () => select(item.value),
+      motion,
+      bounce: motion !== "none" && !theme.reduceMotion,
+      labels,
+      android,
+      showIndicator,
+      compact: density === "compact",
+      badgeSolid
+    },
+    item.value
+  ));
+  if (centerAction) {
+    cells.splice(
+      Math.ceil(items.length / 2),
+      0,
+      /* @__PURE__ */ jsx(CenterAction, { action: centerAction, android }, "__center")
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      accessibilityRole: "tablist",
+      accessibilityLabel,
+      "aria-disabled": disabled || void 0,
+      pointerEvents: disabled ? "none" : void 0,
+      style: [
+        styles.bar,
+        orientation === "vertical" ? { flexDirection: "column" } : null,
+        variant === "floating" ? {
+          margin: theme.space.s3,
+          borderRadius: theme.radius.full,
+          overflow: "hidden",
+          ...theme.shadow.md
+        } : null,
+        disabled ? { opacity: theme.state.disabledOpacity } : null,
+        android ? { backgroundColor: theme.color.surface2 } : {
+          backgroundColor: translucent(theme.color.surface),
+          borderTopWidth: theme.borderWidth.hair,
+          borderTopColor: theme.color.border
+        },
+        {
+          // The theme's `layout.tabbarH` when its platform matches; otherwise the OS height.
+          minHeight: orientation === "vertical" ? void 0 : size === "sm" ? theme.hit.lg : (android === (theme.platform === "Android") ? theme.layout.tabbarH : BAR_H[android ? "android" : "ios"]) + (size === "lg" ? theme.space.s2 : 0),
+          paddingBottom: bottomInset
+        },
+        variant === "flat" ? { backgroundColor: theme.color.surface, borderTopWidth: 0 } : null,
+        orientation === "vertical" ? { borderTopWidth: 0, borderEndWidth: theme.borderWidth.hair, borderEndColor: theme.color.border } : null
+      ],
+      children: cells
+    }
+  );
+}
+var sheet = createStyleSheet((theme) => ({
+  bar: {
+    flexDirection: "row",
+    alignItems: "stretch"
+  },
+  tab: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  tabInner: {
+    alignItems: "center",
+    gap: theme.space[2]
+  },
+  capsule: {
+    width: CAPSULE_W,
+    height: CAPSULE_H,
+    borderRadius: theme.radius.full,
+    alignItems: "center",
+    justifyContent: "center",
+    overflow: "visible",
+    position: "relative"
+  },
+  center: {
+    borderRadius: theme.space[12],
+    alignItems: "center",
+    justifyContent: "center",
+    overflow: "hidden"
+  },
+  badge: {
+    position: "absolute",
+    top: 0,
+    left: CAPSULE_W / 2 + theme.space[4]
+  },
+  label: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.medium
+  },
+  labelIos: {
+    fontSize: theme.fontSize[10],
+    lineHeight: theme.space[12]
+  },
+  labelAndroid: {
+    fontSize: theme.fontSize[12],
+    lineHeight: theme.space[16]
+  }
+}));
+
+export { TabBar };

package/dist/chunk-PJLTKDVY.js

@@ -0,0 +1,18 @@
+// src/lib/tone-skin.ts
+function softToneSkin(theme, tone) {
+  const c = theme.color;
+  switch (tone) {
+    case "accent":
+      return { fill: c.accentSoft, edge: c.accent, ink: c.accentOnSoft };
+    case "good":
+      return { fill: c.goodSoft, edge: c.good, ink: c.goodOnSoft };
+    case "warn":
+      return { fill: c.warnSoft, edge: c.warn, ink: c.warnOnSoft };
+    case "danger":
+      return { fill: c.dangerSoft, edge: c.danger, ink: c.dangerOnSoft };
+    case "info":
+      return { fill: c.infoSoft, edge: c.info, ink: c.infoOnSoft };
+  }
+}
+
+export { softToneSkin };

package/dist/{chunk-SHHY5OMK.js → chunk-PK7BN3MI.js}

@@ -1,7 +1,10 @@
-import { useColorTransition } from './chunk-7BUIKDD6.js';
+import { FieldMessage } from './chunk-BTRMA7GC.js';
+import { useColorTransition } from './chunk-KXLDK6HB.js';
+import { useFocusRing } from './chunk-2YKVID2V.js';
+import { Icon } from './chunk-PCEFCOLN.js';
 import { useResolvedMotion } from './chunk-J64KGCGX.js';
 import * as React from 'react';
-import { View, Text, Easing, Animated, Pressable } from 'react-native';
+import { Platform, View, Text, Easing, Animated, Pressable } from 'react-native';
 import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
@@ -19,9 +22,13 @@ function RadioGroup({
   onValueChange,
   size = "md",
   motion = "full",
+  platform,
   disabled = false,
   label,
   accessibilityLabel,
+  error = false,
+  hint,
+  tone = "accent",
   children
 }) {
   const isControlled = value !== void 0;
@@ -29,7 +36,10 @@ function RadioGroup({
   const selected = isControlled ? value : internal;
   const { styles } = useStyles(sheet, { size, disabled });
   const theme = useLoamTheme("radio-group");
+  const os = platform ?? (Platform.OS === "ios" ? "ios" : Platform.OS === "android" ? "android" : theme.platform === "iOS" ? "ios" : "android");
   const labelId = React.useId();
+  const invalid = Boolean(error);
+  const message = typeof error === "string" && error ? error : hint;
   const itemsRef = React.useRef([]);
   const [, bump] = React.useReducer((c) => c + 1, 0);
   const register = React.useCallback((entry) => {
@@ -83,12 +93,27 @@ function RadioGroup({
       select,
       size,
       motion,
+      os,
       disabled,
+      invalid,
+      tone,
       activeValue,
       register,
       onItemKeyDown
     }),
-    [selected, select, size, motion, disabled, activeValue, register, onItemKeyDown]
+    [
+      selected,
+      select,
+      size,
+      motion,
+      os,
+      disabled,
+      invalid,
+      tone,
+      activeValue,
+      register,
+      onItemKeyDown
+    ]
   );
   return /* @__PURE__ */ jsx(RadioGroupContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxs(View, { style: styles.root, children: [
     label ? /* @__PURE__ */ jsx(Text, { nativeID: labelId, style: styles.groupLabel, children: label }) : null,
@@ -98,10 +123,12 @@ function RadioGroup({
         accessibilityRole: "radiogroup",
         accessibilityLabel: label ? void 0 : accessibilityLabel,
         ...label ? { "aria-labelledby": labelId } : null,
+        "aria-invalid": invalid || void 0,
         style: styles.group,
         children
       }
-    )
+    ),
+    message ? /* @__PURE__ */ jsx(FieldMessage, { invalid: invalid && typeof error === "string", children: message }) : null
   ] }) });
 }
 function RadioGroupItem({
@@ -114,7 +141,14 @@ function RadioGroupItem({
   const theme = useLoamTheme("radio-group");
   const selected = ctx.value === value;
   const isDisabled = ctx.disabled || disabled;
-  const { styles } = useStyles(sheet, { size: ctx.size, disabled: isDisabled });
+  const { styles } = useStyles(sheet, {
+    size: ctx.size,
+    disabled: isDisabled,
+    os: ctx.os,
+    selected
+  });
+  const ios = ctx.os === "ios";
+  const focusRing = useFocusRing(theme.radius.sm);
   const nodeRef = React.useRef(null);
   const entryRef = React.useRef({ value, disabled: isDisabled, focus: () => {
   } });
@@ -128,7 +162,7 @@ function RadioGroupItem({
   const animateDot = resolvedMotion === "full";
   const easing = React.useMemo(() => Easing.bezier(...theme.easing.base), [theme.easing.base]);
   const borderColor = useColorTransition(
-    selected ? theme.color.accent : theme.color.borderStrong,
+    selected ? theme.color[ctx.tone] : ctx.invalid ? theme.color.danger : theme.color.text3,
     theme.duration.fast,
     easing,
     animateEdge
@@ -164,10 +198,32 @@ function RadioGroupItem({
       "aria-checked": selected,
       disabled: isDisabled,
       onPress: isDisabled ? void 0 : () => ctx.select(value),
-      style: styles.item,
+      style: [styles.item, focusRing.style],
+      onFocus: focusRing.handlers.onFocus,
+      onBlur: focusRing.handlers.onBlur,
       ...webProps,
       children: [
-        /* @__PURE__ */ jsx(Animated.View, { testID: "radio-indicator", style: [styles.indicator, { borderColor }], children: /* @__PURE__ */ jsx(Animated.View, { style: [styles.dot, { transform: [{ scale: dotScale }] }] }) }),
+        ios ? (
+          // The check column is always reserved so labels never shift.
+          /* @__PURE__ */ jsx(View, { testID: "radio-check", style: styles.checkColumn, children: selected ? /* @__PURE__ */ jsx(View, { testID: "radio-check-mark", children: /* @__PURE__ */ jsx(
+            Icon,
+            {
+              name: "check",
+              size: theme.icon.sm,
+              color: ctx.tone === "accent" ? theme.color.accentStrong : theme.color[ctx.tone],
+              strokeWidth: theme.icon.strokeBold
+            }
+          ) }) : null })
+        ) : /* @__PURE__ */ jsx(Animated.View, { testID: "radio-indicator", style: [styles.indicator, { borderColor }], children: /* @__PURE__ */ jsx(
+          Animated.View,
+          {
+            style: [
+              styles.dot,
+              ctx.tone === "accent" ? null : { backgroundColor: theme.color[ctx.tone] },
+              { transform: [{ scale: dotScale }] }
+            ]
+          }
+        ) }),
         label ? /* @__PURE__ */ jsx(Text, { style: styles.label, children: label }) : null
       ]
     }
@@ -177,22 +233,34 @@ var sheet = createStyleSheet((theme) => ({
   // Stacks the optional group label above the radios.
   root: { gap: theme.space.s2 },
   group: { gap: theme.space.s3 },
+  // Group label 13 / 600 text (R11), on the OS label role.
   groupLabel: {
+    ...theme.ctl.label.sm,
     fontFamily: theme.font.sans,
-    fontWeight: theme.fontWeight.semibold,
-    fontSize: theme.fontSize[14],
-    color: theme.color.text2
+    color: theme.color.text
   },
   item: {
     flexDirection: "row",
     alignItems: "center",
-    gap: theme.space.s3,
+    // Label 10 from the mark (R10).
+    gap: theme.space[10],
+    paddingHorizontal: theme.space[12],
+    borderRadius: theme.ctl.r.md,
     // The row is the hit area: never shorter than the minimum tap target.
     minHeight: theme.tapMin,
     variants: {
+      // iOS check rows sit on the tap minimum; Android radio rows are 56 (F7).
+      os: { ios: {}, android: { minHeight: theme.space[56] } },
+      selected: { true: { backgroundColor: theme.state.selected }, false: {} },
       disabled: { true: { opacity: theme.state.disabledOpacity }, false: {} }
     }
   },
+  checkColumn: {
+    width: theme.space[24],
+    alignItems: "center",
+    justifyContent: "center",
+    variants: { size: { sm: {}, md: {} }, disabled: { true: {}, false: {} } }
+  },
   // `borderColor` is supplied at the use site as an animated value so the edge
   // can travel over `duration.fast`. The fill stays transparent — the reference
   // gives the indicator a border and nothing else.
@@ -204,10 +272,10 @@ var sheet = createStyleSheet((theme) => ({
     backgroundColor: "transparent",
     borderRadius: theme.radius.full,
     variants: {
-      // The dot is always half the indicator (reference: 11px inside 22px).
+      // The dot is always half the indicator (10px inside 20px).
       size: {
         sm: { width: theme.space[16], height: theme.space[16] },
-        md: { width: theme.space[22], height: theme.space[22] }
+        md: { width: theme.space[20], height: theme.space[20] }
       },
       disabled: { true: {}, false: {} }
     }
@@ -218,7 +286,7 @@ var sheet = createStyleSheet((theme) => ({
     variants: {
       size: {
         sm: { width: theme.space[8], height: theme.space[8] },
-        md: { width: theme.space[11], height: theme.space[11] }
+        md: { width: theme.space[10], height: theme.space[10] }
       },
       disabled: { true: {}, false: {} }
     }