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

package/dist/chunk-S7F6XLTK.js

@@ -0,0 +1,540 @@
+import { ContinuousNotice, ShutterButton, TorchToggle, GridToggle, GuideOverlay, ExpertPanel, LensPicker, SequenceStrip, ShutterTray, FlipButton, TrackingOverlay, GridOverlay, FocusTapZone, FocusIndicator } from './chunk-BV3B2HYZ.js';
+import { PlaceholderFeed } from './chunk-LAECSR4H.js';
+import { decorativeProps, camInk, SurfaceLiveRegion, ViewfinderTopBar, GlassIconButton, GuidanceChip, GateHint, useSurfaceAnnounce } from './chunk-RW6ZL2FQ.js';
+import { Icon } from './chunk-TKVFVF5D.js';
+import * as React2 from 'react';
+import { View, Animated, Easing, Text, Pressable } from 'react-native';
+import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
+import { queueLabel, profile, caps, isFrozen, primaryCheck, TOASTS, gateHint, angleAt, viewfinderSubtitle, PRIVACY_STATEMENT, confidenceTone, confidenceLabel, CAPTURED_PILL, DONE_LABEL } from '@btndprojects/loam-analyzer';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+function numericRatio(ratio) {
+  if (!ratio) return void 0;
+  const [w, h] = ratio.split(":");
+  const width = Number(w);
+  const height = Number(h);
+  if (!Number.isFinite(width) || !Number.isFinite(height) || height === 0) return void 0;
+  return width / height;
+}
+function CameraSurface({
+  ratio,
+  platform = "ios",
+  insets = {},
+  feed,
+  accessibilityLabel,
+  children
+}) {
+  const { styles } = useStyles(stageSheet);
+  const aspect = numericRatio(ratio);
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      role: "group",
+      accessibilityLabel,
+      testID: `loam-camera-surface-${platform}`,
+      style: [styles.stage, aspect === void 0 ? styles.stageFill : { aspectRatio: aspect }],
+      children: [
+        feed,
+        /* @__PURE__ */ jsx(
+          View,
+          {
+            testID: "loam-camera-chrome",
+            style: [
+              styles.chrome,
+              {
+                paddingTop: insets.top ?? 0,
+                paddingBottom: insets.bottom ?? 0,
+                paddingStart: insets.left ?? 0,
+                paddingEnd: insets.right ?? 0
+              }
+            ],
+            children
+          }
+        )
+      ]
+    }
+  );
+}
+function PreviewSlot({ preview, label, topInset }) {
+  const { styles } = useStyles(stageSheet);
+  return /* @__PURE__ */ jsx(View, { style: styles.previewSlot, children: preview ?? /* @__PURE__ */ jsx(PlaceholderFeed, { label, topInset }) });
+}
+function CaptureFlash({ token = null }) {
+  const theme = useLoamTheme();
+  const { styles } = useStyles(stageSheet);
+  const [flashes, setFlashes] = React2.useState(0);
+  const first = React2.useRef(true);
+  const opacity = React2.useRef(new Animated.Value(0)).current;
+  React2.useEffect(() => {
+    if (token === null || token === void 0) return;
+    if (first.current) {
+      first.current = false;
+      return;
+    }
+    setFlashes((n) => n + 1);
+    opacity.setValue(1);
+    Animated.timing(opacity, {
+      toValue: 0,
+      duration: theme.duration[100],
+      easing: Easing.bezier(...theme.easing.out),
+      useNativeDriver: true
+    }).start();
+  }, [token, opacity, theme.duration, theme.easing.out]);
+  if (flashes === 0) return null;
+  return /* @__PURE__ */ jsx(
+    Animated.View,
+    {
+      accessible: false,
+      testID: "loam-capture-flash",
+      style: [styles.flash, { opacity }],
+      ...decorativeProps()
+    }
+  );
+}
+function QueueBadge({ count, onPress }) {
+  const theme = useLoamTheme();
+  const { styles } = useStyles(stageSheet);
+  if (count <= 0) return null;
+  const text = queueLabel(count);
+  const ink = camInk(theme);
+  const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Icon, { name: "scan", size: theme.icon.sm, color: ink }),
+    /* @__PURE__ */ jsx(Text, { style: [styles.badgeText, { color: ink }], children: text })
+  ] });
+  if (onPress) {
+    return /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        accessibilityRole: "button",
+        accessibilityLabel: text,
+        style: styles.badge,
+        onPress,
+        children: body
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(View, { accessible: true, accessibilityLabel: text, style: styles.badge, children: body });
+}
+var stageSheet = createStyleSheet((theme) => ({
+  stage: {
+    position: "relative",
+    width: "100%",
+    flexDirection: "column",
+    overflow: "hidden",
+    backgroundColor: theme.media.onInk
+  },
+  // A phone stage fills its screen; the web half needs a 560px floor because it
+  // can be dropped into a 200px box on a page, and a phone cannot.
+  stageFill: {
+    flexGrow: 1,
+    flexShrink: 1,
+    flexBasis: theme.space[0]
+  },
+  chrome: {
+    // `box-none` so the chrome layer never swallows a tap meant for the feed's
+    // tap-to-focus zone underneath it.
+    pointerEvents: "box-none",
+    position: "relative",
+    zIndex: theme.z.raised,
+    flexGrow: 1,
+    flexShrink: 1,
+    flexBasis: theme.space[0],
+    flexDirection: "column"
+  },
+  previewSlot: {
+    position: "absolute",
+    top: theme.space[0],
+    bottom: theme.space[0],
+    left: theme.space[0],
+    right: theme.space[0],
+    overflow: "hidden"
+  },
+  flash: {
+    pointerEvents: "none",
+    position: "absolute",
+    top: theme.space[0],
+    bottom: theme.space[0],
+    left: theme.space[0],
+    right: theme.space[0],
+    zIndex: theme.z.overlay,
+    backgroundColor: theme.media.ink
+  },
+  badge: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space[8],
+    minHeight: theme.ctl.lg,
+    paddingHorizontal: theme.space[12],
+    paddingVertical: theme.space[8],
+    borderRadius: theme.radius.full,
+    backgroundColor: theme.black.a12,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.white.a5
+  },
+  badgeText: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[13]
+  }
+}));
+var SCRIM_STOP = {
+  captured: "a6",
+  done: "a7",
+  result: "a8",
+  analysing: "a10",
+  failure: "a11"
+};
+function feedLabel(p, phase, platform, zoom) {
+  const facing = platform === "web" ? "webcam \xB7 front" : "rear camera";
+  if (phase === "live") return `${facing} \xB7 ${p.ratio} \xB7 ${zoom}x \xB7 placeholder feed`;
+  if (phase === "captured") return `frozen frame \xB7 ${p.ratio} \xB7 placeholder`;
+  if (phase === "analysing") return "frozen frame \xB7 analysing";
+  if (phase === "result" || phase === "failure") return "frozen frame";
+  if (phase === "done") return "captured frame";
+  return `${facing} \xB7 ${p.ratio} \xB7 placeholder feed`;
+}
+function phaseMessage(p, phase) {
+  if (phase === "live") return `${p.label}. ${p.subject}.`;
+  if (phase === "captured") return CAPTURED_PILL;
+  if (phase === "analysing") return "Analysing";
+  if (phase === "result") return "Result ready";
+  if (phase === "failure") return "Analysis failed";
+  if (phase === "done") return DONE_LABEL;
+  return null;
+}
+function detectedChip(detected, confidence) {
+  if (confidence === void 0) {
+    return { text: detected, tone: "good", icon: "check-circle" };
+  }
+  const tone = confidenceTone(confidence);
+  const icon = tone === "good" ? "check-circle" : tone === "warn" ? "alert-triangle" : "alert-circle";
+  return { text: `${detected} \xB7 ${confidenceLabel(confidence)}`, tone, icon };
+}
+function PhaseAnnouncer({
+  profile: p,
+  phase,
+  detected
+}) {
+  const announce = useSurfaceAnnounce();
+  const sink = React2.useRef(announce);
+  sink.current = announce;
+  React2.useEffect(() => {
+    const message = phaseMessage(p, phase);
+    if (message) sink.current?.(message);
+  }, [p, phase]);
+  React2.useEffect(() => {
+    if (detected) sink.current?.(detected);
+  }, [detected]);
+  return null;
+}
+function Analyzer({
+  profile: profileProp,
+  level = "guided",
+  platform = "ios",
+  phase,
+  ratio,
+  insets,
+  preview,
+  objects = [],
+  gate = { pass: true, failing: [] },
+  countdown = null,
+  detected = null,
+  detectedConfidence,
+  shots = 0,
+  angleIndex = 0,
+  queueCount = 0,
+  torch = false,
+  torchAvailable = true,
+  grid = false,
+  zoom = 1,
+  zoomStops = [2, 1, 0.5],
+  expertOpen = false,
+  expertValues = {},
+  focusPoint = null,
+  flashToken = null,
+  title,
+  privacyStatement = PRIVACY_STATEMENT,
+  children,
+  onCapture,
+  onUpload,
+  onClose,
+  onTorchChange,
+  onGridChange,
+  onZoomChange,
+  onFlip,
+  onFocusPoint,
+  onExpertOpenChange,
+  onExpertChange,
+  onSequenceRedo,
+  onSequenceRead,
+  onQueuePress,
+  onGatePass,
+  onNotify
+}) {
+  const theme = useLoamTheme();
+  const { styles } = useStyles(analyzerSheet);
+  const p = profile(profileProp);
+  const caps$1 = caps(level);
+  const chip = detected ? detectedChip(detected, detectedConfidence) : null;
+  const live = phase === "live";
+  const frozen = isFrozen(phase);
+  const continuous = p.shutter === "continuous";
+  const tracking = objects.length > 0;
+  const trackLocked = objects.some((o) => o.locked === true);
+  const gateOpen = caps$1.gate ? gate.pass : true;
+  const blockedToast = React2.useMemo(() => {
+    const check = primaryCheck(p, gate);
+    return TOASTS.gateBlocked(check ? check.fix : gateHint(p, gate));
+  }, [p, gate]);
+  const notify = React2.useRef(onNotify);
+  notify.current = onNotify;
+  const gatePass = React2.useRef(onGatePass);
+  gatePass.current = onGatePass;
+  const wasOpen = React2.useRef(gateOpen);
+  React2.useEffect(() => {
+    if (live && gateOpen && !wasOpen.current) gatePass.current?.();
+    wasOpen.current = gateOpen;
+  }, [gateOpen, live]);
+  const blocked = React2.useCallback(
+    (toast) => notify.current?.({ title: toast, tone: "warn" }),
+    []
+  );
+  const toggleGrid = React2.useCallback(
+    (next) => {
+      if (!caps$1.grid) return;
+      onGridChange?.(next);
+      notify.current?.({ title: TOASTS.grid(next) });
+    },
+    [caps$1.grid, onGridChange]
+  );
+  const close = React2.useCallback(() => {
+    onClose?.();
+    notify.current?.({ title: TOASTS.close });
+  }, [onClose]);
+  const angle = angleAt(p, angleIndex);
+  const subtitle = viewfinderSubtitle(p, { angleIndex, shots });
+  const sequence = caps$1.sequence && (p.frames === "multi" || typeof p.frames === "number" && p.frames > 1);
+  const scrimStop = SCRIM_STOP[phase];
+  const trayPrimary = continuous ? /* @__PURE__ */ jsx(ContinuousNotice, {}) : /* @__PURE__ */ jsx(
+    ShutterButton,
+    {
+      platform,
+      mode: p.shutter,
+      enabled: gateOpen,
+      countdown: caps$1.auto ? countdown : null,
+      blockedToast,
+      onPress: onCapture,
+      onBlocked: blocked
+    }
+  );
+  return /* @__PURE__ */ jsxs(SurfaceLiveRegion, { children: [
+    /* @__PURE__ */ jsx(PhaseAnnouncer, { profile: p, phase, detected: chip ? chip.text : null }),
+    /* @__PURE__ */ jsxs(
+      CameraSurface,
+      {
+        ratio,
+        platform,
+        insets,
+        accessibilityLabel: `${title ?? p.label} viewfinder`,
+        feed: /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            PreviewSlot,
+            {
+              preview,
+              label: feedLabel(p, phase, platform, zoom),
+              topInset: insets?.top ?? 0
+            }
+          ),
+          scrimStop ? /* @__PURE__ */ jsx(
+            View,
+            {
+              accessible: false,
+              testID: `loam-cam-scrim-${phase}`,
+              style: [styles.scrim, { backgroundColor: theme.black[scrimStop] }],
+              ...decorativeProps()
+            }
+          ) : null,
+          tracking ? /* @__PURE__ */ jsx(
+            TrackingOverlay,
+            {
+              objects,
+              frozen,
+              dimmed: phase === "analysing",
+              safeAreaBottom: insets?.bottom ?? 0
+            }
+          ) : null,
+          live ? /* @__PURE__ */ jsx(GridOverlay, { visible: caps$1.grid && grid }) : null,
+          live ? /* @__PURE__ */ jsx(FocusTapZone, { onFocusPoint }) : null,
+          live ? /* @__PURE__ */ jsx(
+            FocusIndicator,
+            {
+              point: focusPoint,
+              pulseKey: focusPoint ? `${focusPoint.x},${focusPoint.y}` : 0
+            }
+          ) : null,
+          /* @__PURE__ */ jsx(CaptureFlash, { token: flashToken })
+        ] }),
+        children: [
+          /* @__PURE__ */ jsx(View, { style: styles.topLayer, children: /* @__PURE__ */ jsxs(
+            ViewfinderTopBar,
+            {
+              title: title ?? p.label,
+              subtitle,
+              align: platform === "ios" ? "center" : "start",
+              onClose: onClose ? close : void 0,
+              children: [
+                caps$1.torch ? /* @__PURE__ */ jsx(TorchToggle, { on: torch, available: torchAvailable, onChange: onTorchChange }) : null,
+                caps$1.grid ? /* @__PURE__ */ jsx(GridToggle, { on: grid, onChange: toggleGrid }) : null,
+                caps$1.expert && onExpertOpenChange ? /* @__PURE__ */ jsx(
+                  GlassIconButton,
+                  {
+                    icon: "sliders",
+                    label: "Expert controls",
+                    on: expertOpen,
+                    onPress: () => onExpertOpenChange(!expertOpen)
+                  }
+                ) : null
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsxs(View, { style: styles.band, children: [
+            live && caps$1.guide ? /* @__PURE__ */ jsx(
+              GuideOverlay,
+              {
+                kind: p.guide,
+                pass: gateOpen,
+                dimmed: trackLocked,
+                hint: angle?.hint,
+                scanning: continuous
+              }
+            ) : null,
+            queueCount > 0 ? /* @__PURE__ */ jsx(View, { style: styles.queueWrap, children: /* @__PURE__ */ jsx(QueueBadge, { count: queueCount, onPress: onQueuePress }) }) : null,
+            live ? /* @__PURE__ */ jsxs(View, { style: styles.floatStack, children: [
+              caps$1.expert && expertOpen ? /* @__PURE__ */ jsx(View, { style: styles.stretch, children: /* @__PURE__ */ jsx(
+                ExpertPanel,
+                {
+                  platform,
+                  values: expertValues,
+                  onChange: onExpertChange,
+                  onClose: onExpertOpenChange ? () => onExpertOpenChange(false) : void 0
+                }
+              ) }) : null,
+              caps$1.zoom ? /* @__PURE__ */ jsx(LensPicker, { stops: zoomStops, value: zoom, onChange: onZoomChange }) : null,
+              chip ? /* @__PURE__ */ jsx(GuidanceChip, { tone: chip.tone, icon: chip.icon, text: chip.text }) : null,
+              caps$1.gate ? (
+                // `live={!detected}` suspends the guidance line's announcements
+                // while a decode stands: the scanner has resolved, so there is
+                // nothing left to instruct, and "Ready" must not talk over the
+                // answer in the one live region (spec E.6).
+                /* @__PURE__ */ jsx(
+                  GateHint,
+                  {
+                    profile: p,
+                    gate,
+                    countdown: caps$1.auto ? countdown : null,
+                    live: !detected
+                  }
+                )
+              ) : null
+            ] }) : null
+          ] }),
+          frozen || !live ? /* @__PURE__ */ jsx(View, { style: [styles.phaseLayer, styles.raised], children }) : null,
+          live ? /* @__PURE__ */ jsxs(View, { style: [styles.liveColumn, styles.raised], children: [
+            sequence ? /* @__PURE__ */ jsx(
+              SequenceStrip,
+              {
+                total: typeof p.frames === "number" ? p.frames : 6,
+                shots,
+                current: angleIndex,
+                angles: p.angles,
+                mode: p.frames === "multi" ? "batch" : "angles",
+                onRedo: onSequenceRedo,
+                onRead: onSequenceRead
+              }
+            ) : null,
+            /* @__PURE__ */ jsx(
+              ShutterTray,
+              {
+                platform,
+                start: /* @__PURE__ */ jsx(GlassIconButton, { icon: "upload", label: "Upload a photo", onPress: onUpload }),
+                primary: trayPrimary,
+                stack: continuous,
+                end: caps$1.flip ? /* @__PURE__ */ jsx(FlipButton, { onFlip }) : null
+              }
+            ),
+            /* @__PURE__ */ jsx(Text, { style: [styles.privacy, { color: camInk(theme) }], children: privacyStatement })
+          ] }) : null
+        ]
+      }
+    )
+  ] });
+}
+var analyzerSheet = createStyleSheet((theme) => ({
+  scrim: {
+    pointerEvents: "none",
+    position: "absolute",
+    top: theme.space[0],
+    bottom: theme.space[0],
+    left: theme.space[0],
+    right: theme.space[0]
+  },
+  topLayer: {
+    pointerEvents: "box-none",
+    zIndex: 1
+  },
+  raised: {
+    zIndex: 1
+  },
+  band: {
+    pointerEvents: "box-none",
+    flexGrow: 1,
+    flexShrink: 1,
+    flexBasis: theme.space[0]
+  },
+  queueWrap: {
+    pointerEvents: "box-none",
+    position: "absolute",
+    top: theme.space[0],
+    right: theme.space[8]
+  },
+  floatStack: {
+    pointerEvents: "box-none",
+    position: "absolute",
+    left: theme.space[0],
+    right: theme.space[0],
+    bottom: theme.space[0],
+    flexDirection: "column",
+    alignItems: "center",
+    gap: theme.space[8],
+    paddingHorizontal: theme.space[8],
+    paddingBottom: theme.space[8]
+  },
+  stretch: {
+    alignSelf: "stretch"
+  },
+  phaseLayer: {
+    pointerEvents: "box-none",
+    flexShrink: 1,
+    flexDirection: "column",
+    justifyContent: "flex-end"
+  },
+  liveColumn: {
+    flexDirection: "column",
+    gap: theme.space[6],
+    paddingHorizontal: theme.space[8],
+    paddingBottom: theme.space[4]
+  },
+  privacy: {
+    alignSelf: "center",
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[10],
+    lineHeight: theme.fontSize[10] * 1.4,
+    textAlign: "center",
+    paddingHorizontal: theme.space[8],
+    paddingVertical: theme.space[2],
+    borderRadius: theme.radius.sm,
+    backgroundColor: theme.black.a12,
+    overflow: "hidden"
+  }
+}));
+
+export { Analyzer, CameraSurface, CaptureFlash, PreviewSlot, QueueBadge };

package/dist/chunk-SBMNWWBV.js

@@ -0,0 +1,155 @@
+import { NumberRoll } from './chunk-CUMUNPXY.js';
+import { Icon } from './chunk-TKVFVF5D.js';
+import 'react';
+import { View, Animated, Text } from 'react-native';
+import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function useForeground(variant) {
+  const theme = useLoamTheme();
+  switch (variant) {
+    case "accent":
+      return theme.color.accentOnSoft;
+    case "good":
+      return theme.color.goodOnSoft;
+    case "warn":
+      return theme.color.warnOnSoft;
+    case "danger":
+      return theme.color.dangerOnSoft;
+    case "info":
+      return theme.color.infoOnSoft;
+    case "neutral":
+    default:
+      return theme.color.text2;
+  }
+}
+function Badge({
+  children,
+  variant = "neutral",
+  size = "md",
+  outline = false,
+  leadingIcon,
+  dot = false,
+  dotStyle,
+  count,
+  max = 99,
+  showZero = false,
+  announce = false,
+  motion = "full",
+  animateCount = false,
+  accessibilityLabel,
+  style
+}) {
+  const { styles } = useStyles(sheet, { variant, size, outline });
+  const theme = useLoamTheme();
+  const fg = useForeground(variant);
+  const iconSize = size === "sm" ? 12 : 14;
+  const dotSize = size === "sm" ? theme.space[6] : theme.space[7];
+  const label = typeof children === "string" ? children : void 0;
+  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(
+    View,
+    {
+      accessibilityRole: "text",
+      accessibilityLabel: accessibilityLabel ?? (isCount ? String(count) : label),
+      accessibilityLiveRegion: announce && isCount ? "polite" : "none",
+      style: [styles.base, style],
+      children: [
+        dot && !isCount ? (
+          // `Animated.View` rather than `View` so `dotStyle` can carry an
+          // `Animated.Value`. With no override it behaves as a plain view — this
+          // is the cost of making the dot animatable at all, and it is nil.
+          /* @__PURE__ */ jsx(
+            Animated.View,
+            {
+              testID: "loam-badge-dot",
+              style: [
+                {
+                  width: dotSize,
+                  height: dotSize,
+                  borderRadius: dotSize / 2,
+                  backgroundColor: fg
+                },
+                dotStyle
+              ]
+            }
+          )
+        ) : null,
+        leadingIcon ? /* @__PURE__ */ jsx(Icon, { name: leadingIcon, size: iconSize, color: fg }) : null,
+        isCount && animateCount ? /* @__PURE__ */ jsx(
+          NumberRoll,
+          {
+            value: count,
+            formatValue: () => display ?? "",
+            textStyle: [styles.label, styles.tabular, { color: fg }],
+            motion,
+            decorative: true
+          }
+        ) : isCount ? /* @__PURE__ */ jsx(Text, { style: [styles.label, styles.tabular, { color: fg }], children: display }) : label !== void 0 ? /* @__PURE__ */ jsx(Text, { style: [styles.label, { color: fg }], children: label }) : children
+      ]
+    }
+  );
+}
+var sheet = createStyleSheet((theme) => ({
+  base: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    alignSelf: "flex-start",
+    gap: theme.space.s1,
+    borderRadius: theme.radius.full,
+    // The edge box is on the base, not the tone, for two reasons: `theme.edge.*`
+    // is `transparent` until the contrast preference flips (so this is invisible
+    // now and a real outline then), and a width added per tone would make a
+    // `good` badge 2px larger than the `neutral` one beside it. `base` is the
+    // contrast-reactive width — it thickens to 2 where a `-soft` fill collapses
+    // to `--surface` and the pill would otherwise stop existing.
+    borderWidth: theme.borderWidth.base,
+    borderColor: "transparent",
+    variants: {
+      variant: {
+        neutral: { backgroundColor: theme.color.surface2, borderColor: theme.edge.neutral },
+        accent: { backgroundColor: theme.color.accentSoft, borderColor: theme.edge.accent },
+        good: { backgroundColor: theme.color.goodSoft, borderColor: theme.edge.good },
+        warn: { backgroundColor: theme.color.warnSoft, borderColor: theme.edge.warn },
+        danger: { backgroundColor: theme.color.dangerSoft, borderColor: theme.edge.danger },
+        info: { backgroundColor: theme.color.infoSoft, borderColor: theme.edge.info }
+      },
+      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] }
+      },
+      outline: {
+        true: {
+          backgroundColor: "transparent",
+          borderWidth: theme.borderWidth.thin,
+          borderColor: theme.color.borderStrong
+        },
+        false: {}
+      }
+    }
+  },
+  label: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.semibold,
+    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: {},
+      outline: {}
+    }
+  },
+  // Tabular figures for count mode so the number never jitters as it updates.
+  tabular: {
+    fontVariant: ["tabular-nums"]
+  }
+}));
+
+export { Badge };

package/dist/chunk-SDTQPRRB.js

@@ -0,0 +1 @@
+