@btndprojects/loam-ui-native 0.0.0-stage → 0.1.0

package/dist/chunk-35OFI3JG.js

@@ -0,0 +1,499 @@
+import { Thinking } from './chunk-XXXEFXY5.js';
+import { Spinner } from './chunk-O7AE6DAF.js';
+import { Icon } from './chunk-TKVFVF5D.js';
+import * as React from 'react';
+import { StyleSheet, View, Text, Pressable } from 'react-native';
+import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var SYSTEM_STATE_META = {
+  "404": { tone: "muted", icon: "search", code: "404" },
+  "403": { tone: "warn", icon: "lock", code: "403" },
+  "500": { tone: "danger", icon: "alert-triangle", code: "500" },
+  maintenance: { tone: "warn", icon: "wrench", code: "Soon" },
+  offline: { tone: "info", icon: "wifi-off", code: "Offline" }
+};
+function useTone(tone) {
+  const theme = useLoamTheme();
+  switch (tone) {
+    case "danger":
+      return theme.color.dangerOnSoft;
+    case "warn":
+      return theme.color.warnOnSoft;
+    case "info":
+      return theme.color.infoOnSoft;
+    default:
+      return theme.color.text2;
+  }
+}
+function SystemState({
+  variant = "404",
+  code,
+  icon,
+  title,
+  description,
+  primaryLabel,
+  onPrimary,
+  secondaryLabel,
+  onSecondary,
+  errorId,
+  onCopyErrorId
+}) {
+  const meta = SYSTEM_STATE_META[variant];
+  const { styles } = useStyles(sheet, { tone: meta.tone });
+  const theme = useLoamTheme();
+  const tone = useTone(meta.tone);
+  if (process.env.NODE_ENV !== "production" && !primaryLabel && !secondaryLabel) {
+    console.warn(
+      `[loam] <SystemState variant="${variant}"> has no action. Every system state must offer a route back to a working screen.`
+    );
+  }
+  return /* @__PURE__ */ jsxs(View, { style: styles.base, accessibilityRole: "alert", children: [
+    /* @__PURE__ */ jsxs(View, { style: styles.body, children: [
+      /* @__PURE__ */ jsx(View, { style: styles.tile, children: /* @__PURE__ */ jsx(Icon, { name: icon ?? meta.icon, size: theme.icon.xl, color: tone }) }),
+      /* @__PURE__ */ jsx(Text, { style: [styles.code, { color: tone }], children: code ?? meta.code }),
+      /* @__PURE__ */ jsx(Text, { style: styles.title, children: title }),
+      description ? /* @__PURE__ */ jsx(Text, { style: styles.description, children: description }) : null,
+      errorId ? /* @__PURE__ */ jsxs(
+        Pressable,
+        {
+          accessibilityRole: "button",
+          accessibilityLabel: `Copy error id ${errorId}`,
+          onPress: onCopyErrorId ? () => onCopyErrorId(errorId) : void 0,
+          style: ({ pressed }) => [styles.errorChip, pressed && styles.pressed],
+          children: [
+            /* @__PURE__ */ jsx(Icon, { name: "copy", size: theme.icon.xs, color: theme.color.text2 }),
+            /* @__PURE__ */ jsx(Text, { style: styles.errorId, children: errorId })
+          ]
+        }
+      ) : null
+    ] }),
+    /* @__PURE__ */ jsxs(View, { style: styles.actions, children: [
+      primaryLabel ? /* @__PURE__ */ jsx(
+        Pressable,
+        {
+          accessibilityRole: "button",
+          accessibilityLabel: primaryLabel,
+          onPress: onPrimary,
+          style: ({ pressed }) => [styles.primary, pressed && styles.pressed],
+          children: /* @__PURE__ */ jsx(Text, { style: styles.primaryLabel, children: primaryLabel })
+        }
+      ) : null,
+      secondaryLabel ? /* @__PURE__ */ jsx(
+        Pressable,
+        {
+          accessibilityRole: "button",
+          accessibilityLabel: secondaryLabel,
+          onPress: onSecondary,
+          style: ({ pressed }) => [styles.secondary, pressed && styles.pressed],
+          children: /* @__PURE__ */ jsx(Text, { style: styles.secondaryLabel, children: secondaryLabel })
+        }
+      ) : null
+    ] })
+  ] });
+}
+var sheet = createStyleSheet((theme) => ({
+  base: {
+    flex: 1,
+    padding: theme.space.s5,
+    gap: theme.space.s5,
+    backgroundColor: theme.color.bg,
+    justifyContent: "space-between"
+  },
+  body: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    gap: theme.space.s3
+  },
+  // The tone tile: a soft tint plus an `edge` outline. At normal contrast the
+  // edge is transparent; under high contrast the tint collapses to the surface
+  // and the outline is what carries the meaning.
+  tile: {
+    width: theme.space.s8 + theme.space.s3,
+    height: theme.space.s8 + theme.space.s3,
+    borderRadius: theme.radius.full,
+    alignItems: "center",
+    justifyContent: "center",
+    borderWidth: theme.borderWidth.base,
+    variants: {
+      tone: {
+        muted: { backgroundColor: theme.color.surface2, borderColor: theme.edge.neutral },
+        danger: { backgroundColor: theme.color.dangerSoft, borderColor: theme.edge.danger },
+        warn: { backgroundColor: theme.color.warnSoft, borderColor: theme.edge.warn },
+        info: { backgroundColor: theme.color.infoSoft, borderColor: theme.edge.info }
+      }
+    }
+  },
+  code: {
+    fontFamily: theme.font.mono,
+    fontSize: theme.type.caption2.fontSize,
+    lineHeight: theme.type.caption2.lineHeight,
+    // `tracking` steps are `em` multiples, so they have to be multiplied by the
+    // size — the previous literal was the same value written out by hand.
+    letterSpacing: theme.type.caption2.fontSize * theme.tracking.caps,
+    textTransform: "uppercase"
+  },
+  // `type.title2`, not a hand-written 24/1.15: 24 is not a step on either ramp
+  // and the ratio was a raw multiplier rather than a `lineHeight` token.
+  title: {
+    fontFamily: theme.font.display,
+    fontWeight: theme.font.displayWeight,
+    fontSize: theme.type.title2.fontSize,
+    lineHeight: theme.type.title2.lineHeight,
+    letterSpacing: theme.type.title2.letterSpacing,
+    color: theme.color.text,
+    textAlign: "center"
+  },
+  description: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.subheadline.fontSize,
+    lineHeight: theme.type.subheadline.lineHeight,
+    color: theme.color.text2,
+    textAlign: "center"
+  },
+  errorChip: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space.s2,
+    minHeight: theme.tapMin,
+    paddingHorizontal: theme.space.s3,
+    borderRadius: theme.radius.md,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.color.border,
+    backgroundColor: theme.color.surface2
+  },
+  errorId: {
+    fontFamily: theme.font.mono,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    color: theme.color.text2
+  },
+  actions: { gap: theme.space.s3 },
+  primary: {
+    minHeight: theme.tapMin,
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: theme.radius.md,
+    backgroundColor: theme.color.accent,
+    paddingHorizontal: theme.space.s4
+  },
+  primaryLabel: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.bold,
+    fontSize: theme.type.subheadline.fontSize,
+    lineHeight: theme.type.subheadline.lineHeight,
+    color: theme.color.accentInk
+  },
+  secondary: {
+    minHeight: theme.tapMin,
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: theme.radius.md,
+    borderWidth: theme.borderWidth.strong,
+    borderColor: theme.color.borderStrong,
+    paddingHorizontal: theme.space.s4
+  },
+  secondaryLabel: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.semibold,
+    fontSize: theme.type.subheadline.fontSize,
+    lineHeight: theme.type.subheadline.lineHeight,
+    color: theme.color.text
+  },
+  pressed: { opacity: theme.state.pressedOpacity }
+}));
+function useLoadingFloor(active, floor) {
+  const [shown, setShown] = React.useState(false);
+  const shownAt = React.useRef(null);
+  React.useEffect(() => {
+    if (active && !shown) {
+      const t = setTimeout(() => {
+        shownAt.current = Date.now();
+        setShown(true);
+      }, floor);
+      return () => clearTimeout(t);
+    }
+    if (!active && shown) {
+      const elapsed = shownAt.current == null ? floor : Date.now() - shownAt.current;
+      const remaining = Math.max(0, floor - elapsed);
+      if (remaining === 0) {
+        shownAt.current = null;
+        setShown(false);
+        return void 0;
+      }
+      const t = setTimeout(() => {
+        shownAt.current = null;
+        setShown(false);
+      }, remaining);
+      return () => clearTimeout(t);
+    }
+    return void 0;
+  }, [active, shown, floor]);
+  return shown;
+}
+function useLate(active, after) {
+  const [late, setLate] = React.useState(false);
+  React.useEffect(() => {
+    if (!active) {
+      setLate(false);
+      return void 0;
+    }
+    const t = setTimeout(() => setLate(true), after);
+    return () => clearTimeout(t);
+  }, [active, after]);
+  return late;
+}
+function AreaState({
+  state = "idle",
+  children,
+  minHeight = 160,
+  loadingContent,
+  loadingLabel = "Loading",
+  lateLabel = "Still working\u2026",
+  loadingFloor,
+  lateAfter,
+  empty,
+  error,
+  errorTitle = "Couldn\u2019t load this",
+  errorDescription,
+  retryLabel = "Try again",
+  onRetry,
+  staleLabel,
+  refreshLabel = "Refresh",
+  onRefresh,
+  refreshing = false,
+  idle,
+  motion = "full"
+}) {
+  const theme = useLoamTheme();
+  const { styles } = useStyles(areaSheet);
+  const floor = loadingFloor ?? theme.timing.loadingFloor;
+  const lateMs = lateAfter ?? theme.timing.lateAfter;
+  const isLoading = state === "loading";
+  const showLoading = useLoadingFloor(isLoading, floor);
+  const late = useLate(isLoading, lateMs);
+  const busy = isLoading || showLoading;
+  const loadingView = /* @__PURE__ */ jsxs(View, { style: styles.center, children: [
+    loadingContent ?? /* @__PURE__ */ jsx(Spinner, { size: "lg", accessibilityLabel: loadingLabel, motion }),
+    late ? (
+      // The late escalation is the `thinking` recipe's loading label: a gently
+      // pulsing "Still working…" line (its own polite live region announces the
+      // escalation). Reduced motion holds it solid — the text still carries it.
+      /* @__PURE__ */ jsx(Thinking, { label: lateLabel, tone: "neutral", size: "sm", motion })
+    ) : null
+  ] });
+  const errorView = error ?? /* @__PURE__ */ jsxs(View, { accessibilityRole: "alert", style: styles.center, children: [
+    /* @__PURE__ */ jsx(View, { style: styles.errorTile, children: /* @__PURE__ */ jsx(Icon, { name: "alert-triangle", size: theme.icon.lg, color: theme.color.dangerOnSoft }) }),
+    /* @__PURE__ */ jsx(Text, { style: styles.errorTitle, children: errorTitle }),
+    errorDescription ? /* @__PURE__ */ jsx(Text, { style: styles.errorBody, children: errorDescription }) : null,
+    onRetry ? /* @__PURE__ */ jsxs(
+      Pressable,
+      {
+        accessibilityRole: "button",
+        accessibilityLabel: retryLabel,
+        onPress: onRetry,
+        style: ({ pressed }) => [styles.retry, pressed && styles.pressed],
+        children: [
+          /* @__PURE__ */ jsx(Icon, { name: "refresh", size: theme.icon.sm, color: theme.color.accentInk }),
+          /* @__PURE__ */ jsx(Text, { style: styles.retryLabel, children: retryLabel })
+        ]
+      }
+    ) : null
+  ] });
+  let body;
+  if (showLoading) {
+    body = loadingView;
+  } else {
+    switch (state) {
+      case "loading":
+        body = /* @__PURE__ */ jsx(View, { style: styles.fill });
+        break;
+      case "empty":
+        body = empty ?? /* @__PURE__ */ jsx(View, { style: styles.center, children: /* @__PURE__ */ jsx(Text, { style: styles.errorBody, children: "Nothing here yet." }) });
+        break;
+      case "error":
+        body = errorView;
+        break;
+      case "stale":
+        body = /* @__PURE__ */ jsxs(View, { style: styles.fill, children: [
+          /* @__PURE__ */ jsx(View, { style: styles.fill, children }),
+          /* @__PURE__ */ jsx(
+            View,
+            {
+              style: styles.staleScrim,
+              accessibilityElementsHidden: true,
+              importantForAccessibility: "no-hide-descendants"
+            }
+          ),
+          /* @__PURE__ */ jsxs(View, { style: styles.staleBanner, children: [
+            /* @__PURE__ */ jsx(Icon, { name: "clock", size: theme.icon.xs, color: theme.color.text2 }),
+            staleLabel ? /* @__PURE__ */ jsx(Text, { style: styles.staleText, numberOfLines: 1, children: staleLabel }) : null,
+            onRefresh ? /* @__PURE__ */ jsxs(
+              Pressable,
+              {
+                accessibilityRole: "button",
+                accessibilityLabel: refreshing ? `${refreshLabel}\u2026` : refreshLabel,
+                accessibilityState: { busy: refreshing, disabled: refreshing },
+                disabled: refreshing,
+                onPress: refreshing ? void 0 : onRefresh,
+                style: ({ pressed }) => [styles.refresh, pressed && styles.pressed],
+                children: [
+                  refreshing ? /* @__PURE__ */ jsx(Spinner, { size: "sm", accessibilityLabel: `${refreshLabel}\u2026` }) : /* @__PURE__ */ jsx(Icon, { name: "refresh", size: theme.icon.xs, color: theme.color.text }),
+                  /* @__PURE__ */ jsx(Text, { style: styles.refreshLabel, children: refreshLabel })
+                ]
+              }
+            ) : null
+          ] })
+        ] });
+        break;
+      case "ready":
+        body = children;
+        break;
+      case "idle":
+      default:
+        body = idle ?? /* @__PURE__ */ jsx(View, { style: styles.fill });
+        break;
+    }
+  }
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      style: [styles.base, { minHeight }],
+      accessibilityLiveRegion: "polite",
+      "aria-busy": busy,
+      accessibilityState: { busy },
+      ...{ "aria-live": "polite" },
+      children: body
+    }
+  );
+}
+var areaSheet = createStyleSheet((theme) => ({
+  base: {
+    position: "relative",
+    backgroundColor: theme.color.surface,
+    borderRadius: theme.radius.lg
+  },
+  fill: { flex: 1 },
+  center: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    gap: theme.space.s3,
+    padding: theme.space.s5
+  },
+  latePill: {
+    alignSelf: "center",
+    flexDirection: "row",
+    alignItems: "center",
+    backgroundColor: theme.color.warnSoft,
+    borderColor: theme.edge.warn,
+    borderWidth: theme.borderWidth.base,
+    borderRadius: theme.radius.full,
+    paddingHorizontal: theme.space.s2,
+    paddingVertical: theme.space[2]
+  },
+  lateText: {
+    fontFamily: theme.font.sans,
+    color: theme.color.warnOnSoft,
+    fontSize: theme.type.caption1.fontSize,
+    lineHeight: theme.type.caption1.lineHeight,
+    letterSpacing: theme.type.caption1.letterSpacing
+  },
+  errorTile: {
+    width: theme.space.s7,
+    height: theme.space.s7,
+    borderRadius: theme.radius.full,
+    alignItems: "center",
+    justifyContent: "center",
+    borderWidth: theme.borderWidth.base,
+    backgroundColor: theme.color.dangerSoft,
+    borderColor: theme.edge.danger
+  },
+  errorTitle: {
+    fontFamily: theme.font.display,
+    fontWeight: theme.font.displayWeight,
+    fontSize: theme.type.headline.fontSize,
+    lineHeight: theme.type.headline.lineHeight,
+    letterSpacing: theme.type.headline.letterSpacing,
+    color: theme.color.text,
+    textAlign: "center"
+  },
+  errorBody: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.subheadline.fontSize,
+    lineHeight: theme.type.subheadline.lineHeight,
+    color: theme.color.text2,
+    textAlign: "center"
+  },
+  retry: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space.s2,
+    minHeight: theme.tapMin,
+    paddingHorizontal: theme.space.s4,
+    borderRadius: theme.radius.md,
+    backgroundColor: theme.color.accent
+  },
+  retryLabel: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.bold,
+    fontSize: theme.type.subheadline.fontSize,
+    lineHeight: theme.type.subheadline.lineHeight,
+    color: theme.color.accentInk
+  },
+  // A translucent surface wash — dims the stale content without touching the
+  // text's own contrast, and without blocking taps (`pointerEvents: none`).
+  staleScrim: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: theme.color.surface,
+    opacity: theme.opacity[48],
+    pointerEvents: "none",
+    borderRadius: theme.radius.lg
+  },
+  // The stale marker + refresh, floated at the top edge above the scrim on its
+  // own solid surface so its text keeps full AA contrast.
+  staleBanner: {
+    position: "absolute",
+    top: theme.space.s2,
+    start: theme.space.s2,
+    end: theme.space.s2,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space.s2,
+    paddingHorizontal: theme.space.s3,
+    paddingVertical: theme.space.s1,
+    borderRadius: theme.radius.full,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.color.border,
+    backgroundColor: theme.color.surface2
+  },
+  staleText: {
+    flex: 1,
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.caption1.fontSize,
+    lineHeight: theme.type.caption1.lineHeight,
+    color: theme.color.text2
+  },
+  refresh: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space.s2,
+    minHeight: theme.tapMin,
+    paddingHorizontal: theme.space.s3,
+    borderRadius: theme.radius.full,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.color.borderStrong,
+    backgroundColor: theme.color.surface
+  },
+  refreshLabel: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.semibold,
+    fontSize: theme.type.caption1.fontSize,
+    lineHeight: theme.type.caption1.lineHeight,
+    color: theme.color.text
+  },
+  pressed: { opacity: theme.state.pressedOpacity }
+}));
+
+export { AreaState, SYSTEM_STATE_META, SystemState };

package/dist/chunk-3ARE4TES.js

@@ -0,0 +1,195 @@
+import { HoldToConfirm } from './chunk-AWJOCGFZ.js';
+import { Icon } from './chunk-TKVFVF5D.js';
+import * as React from 'react';
+import { Animated, Pressable, ActivityIndicator, Text } from 'react-native';
+import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function holdSizeFor(size) {
+  return size === "xs" ? "sm" : size;
+}
+function useForeground(variant, disabled) {
+  const theme = useLoamTheme();
+  if (disabled) return theme.color.text3;
+  switch (variant) {
+    case "primary":
+      return theme.color.accentInk;
+    case "tonal":
+      return theme.color.accentOnSoft;
+    // v2 on-inks: measured against the danger fill instead of assuming white.
+    case "danger":
+      return theme.color.dangerInk;
+    default:
+      return theme.color.text;
+  }
+}
+function Button({
+  children,
+  variant = "primary",
+  size = "md",
+  loading = false,
+  disabled = false,
+  fullWidth = false,
+  leadingIcon,
+  trailingIcon,
+  onPress,
+  accessibilityLabel,
+  motion = "full",
+  hold = false,
+  onConfirm,
+  holdDuration,
+  confirmingLabel
+}) {
+  const theme = useLoamTheme();
+  const { styles } = useStyles(sheet, { variant, size, disabled, fullWidth });
+  const fg = useForeground(variant, disabled);
+  const scale = React.useRef(new Animated.Value(1)).current;
+  if (hold && variant === "danger") {
+    return /* @__PURE__ */ jsx(
+      HoldToConfirm,
+      {
+        variant: "danger",
+        size: holdSizeFor(size),
+        fullWidth,
+        disabled,
+        leadingIcon,
+        motion,
+        duration: holdDuration,
+        confirmingLabel,
+        accessibilityLabel,
+        onConfirm: onConfirm ?? (() => {
+        }),
+        children
+      }
+    );
+  }
+  const busy = loading;
+  const interactive = !disabled && !busy;
+  const iconSize = theme.ctl.icon[size];
+  const slopY = Math.max(0, (theme.hit[size] - theme.ctl[size]) / 2);
+  const animatePress = motion === "full" && !theme.reduceMotion;
+  const spring = (to) => Animated.spring(scale, {
+    toValue: to,
+    useNativeDriver: true,
+    speed: 40,
+    bounciness: 6
+  }).start();
+  return /* @__PURE__ */ jsx(
+    Pressable,
+    {
+      accessibilityRole: "button",
+      accessibilityLabel,
+      accessibilityState: { disabled, busy },
+      disabled,
+      onPress: interactive ? onPress : void 0,
+      onPressIn: interactive && animatePress ? () => spring(0.97) : void 0,
+      onPressOut: interactive && animatePress ? () => spring(1) : void 0,
+      hitSlop: { top: slopY, bottom: slopY },
+      style: fullWidth ? fullWidthStyle : void 0,
+      children: /* @__PURE__ */ jsxs(Animated.View, { style: [styles.base, { transform: [{ scale }] }], children: [
+        loading ? /* @__PURE__ */ jsx(ActivityIndicator, { size: "small", color: fg, accessibilityLabel: "Loading" }) : leadingIcon ? /* @__PURE__ */ jsx(Icon, { name: leadingIcon, size: iconSize, color: fg }) : null,
+        typeof children === "string" ? /* @__PURE__ */ jsx(Text, { style: [styles.label, { color: fg }], children }) : children,
+        !loading && trailingIcon ? /* @__PURE__ */ jsx(Icon, { name: trailingIcon, size: iconSize, color: fg }) : null
+      ] })
+    }
+  );
+}
+var fullWidthStyle = { alignSelf: "stretch" };
+var sheet = createStyleSheet((theme) => ({
+  base: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    variants: {
+      variant: {
+        primary: { backgroundColor: theme.color.accent },
+        // `accentSoft` collapses to the plain surface under high contrast, which
+        // would leave a tonal button indistinguishable from a ghost one. The
+        // accent edge is what separates them there; it is `transparent` at
+        // normal contrast, and gives `tonal` the same bordered box as `outline`.
+        tonal: {
+          backgroundColor: theme.color.accentSoft,
+          borderWidth: theme.borderWidth.base,
+          borderColor: theme.edge.accent
+        },
+        outline: {
+          backgroundColor: "transparent",
+          borderWidth: theme.borderWidth.thin,
+          borderColor: theme.color.borderStrong
+        },
+        ghost: { backgroundColor: "transparent" },
+        danger: { backgroundColor: theme.color.danger }
+      },
+      // Height, horizontal padding, gap and radius all resolve from the same
+      // control-size tier — one ramp, four steps (26 / 30 / 36 / 44).
+      size: {
+        xs: {
+          height: theme.ctl.xs,
+          paddingHorizontal: theme.ctl.px.xs,
+          gap: theme.ctl.gap.xs,
+          borderRadius: theme.ctl.r.xs
+        },
+        sm: {
+          height: theme.ctl.sm,
+          paddingHorizontal: theme.ctl.px.sm,
+          gap: theme.ctl.gap.sm,
+          borderRadius: theme.ctl.r.sm
+        },
+        md: {
+          height: theme.ctl.md,
+          paddingHorizontal: theme.ctl.px.md,
+          gap: theme.ctl.gap.md,
+          borderRadius: theme.ctl.r.md
+        },
+        lg: {
+          height: theme.ctl.lg,
+          paddingHorizontal: theme.ctl.px.lg,
+          gap: theme.ctl.gap.lg,
+          borderRadius: theme.ctl.r.lg
+        }
+      },
+      // Only a real `disabled` greys the fill — `loading` keeps the variant
+      // colour (R8: busy ≠ disabled).
+      disabled: {
+        true: { backgroundColor: theme.color.surface3, borderWidth: 0 },
+        false: {}
+      },
+      fullWidth: { true: { alignSelf: "stretch" }, false: {} }
+    }
+  },
+  // Bold sans label; size/line-height/tracking come from the overhauled
+  // semantic ramp (footnote → subheadline → body as the button grows).
+  label: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.bold,
+    variants: {
+      size: {
+        xs: {
+          fontSize: theme.type.caption1.fontSize,
+          lineHeight: theme.type.caption1.lineHeight,
+          letterSpacing: theme.type.caption1.letterSpacing
+        },
+        sm: {
+          fontSize: theme.type.footnote.fontSize,
+          lineHeight: theme.type.footnote.lineHeight,
+          letterSpacing: theme.type.footnote.letterSpacing
+        },
+        md: {
+          fontSize: theme.type.subheadline.fontSize,
+          lineHeight: theme.type.subheadline.lineHeight,
+          letterSpacing: theme.type.subheadline.letterSpacing
+        },
+        lg: {
+          fontSize: theme.type.body.fontSize,
+          lineHeight: theme.type.body.lineHeight,
+          letterSpacing: theme.type.body.letterSpacing
+        }
+      },
+      variant: {},
+      disabled: {},
+      fullWidth: {}
+    }
+  }
+}));
+
+export { Button };

package/dist/chunk-3ECPOSKO.js

@@ -0,0 +1 @@
+