@btndprojects/loam-ui-native 0.1.1 → 0.3.1

package/dist/{chunk-SYNOJOQO.js → chunk-WVVD3XOV.js}

@@ -1,31 +1,21 @@
-import { Icon } from './chunk-TKVFVF5D.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-PCEFCOLN.js';
+import { springConfig, motionTiming, useResolvedMotion } from './chunk-J64KGCGX.js';
 import * as React from 'react';
-import { Animated, Easing, Pressable, Text, View } from 'react-native';
+import { Animated, Pressable, Text, View, LayoutAnimation } from 'react-native';
 import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 var SPEC = {
-  /** Row gap between the icon and the copy column. */
-  gap: 10,
+  /** Row gap between the icon and the copy column (12, Final 03). */
+  gap: 12,
   // loam-allow-raw: ramp key, read via theme.space at the use site
-  /** Leading pad — 1px deeper than the other three, to optically inset the icon. */
-  padStart: 13,
-  /** Inline banner title size. */
-  titleSize: 13.5,
-  /** Message, action label and system-banner copy size. */
-  bodySize: 12.5,
   /** Message line-height ratio. v2 moved this off `lineHeight.normal` (1.45). */
   messageLineHeight: 1.4,
   /** Trailing action row's negative end margin, so the label aligns to the edge. */
   actionInsetEnd: -8,
   /** Trailing action row's negative bottom margin, absorbing its own tap padding. */
   actionInsetBottom: -6,
-  /**
-   * Visible height of the action label's box. Deliberately *below* `tapMin`: the
-   * label is unboxed, so the target is grown with `hitSlop` instead of with a
-   * 44px slab of empty space (`actionHitSlop` below closes the gap).
-   */
-  actionMinHeight: 28,
   /** Action label horizontal padding. */
   actionPadX: 8,
   /**
@@ -43,14 +33,10 @@ var SPEC = {
   glyph: 18,
   /** Close-glyph size in the system banner. */
   systemGlyph: 15,
-  /** Meta-line (last-updated stamp / service window / countdown) size. */
-  metaSize: 11.5,
   /** Refresh affordance: gap between icon and label. */
   refreshGap: 6,
   /** Refresh affordance: horizontal padding. */
   refreshPadX: 10,
-  /** Refresh affordance: box height (grown to `tapMin` with `hitSlop`). */
-  refreshMinHeight: 32,
   /** Refresh affordance: glyph size. */
   refreshGlyph: 15,
   /**
@@ -60,6 +46,12 @@ var SPEC = {
   systemDismissInsetY: -9,
   systemDismissInsetEnd: -13
 };
+var DEFAULT_LABELS = {
+  dismiss: "Dismiss",
+  refresh: "Refresh",
+  updated: (when) => `Updated ${when}`,
+  windowInZone: (timeWindow, timezone) => `${timeWindow} \xB7 ${timezone}`
+};
 var TONE_ICON = {
   info: "info",
   success: "check-circle",
@@ -73,7 +65,7 @@ var VARIANT_META = {
   maintenance: { tone: "info", icon: "wrench" }
 };
 function useToneColor(tone) {
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("banner");
   switch (tone) {
     case "success":
       return theme.color.goodOnSoft;
@@ -105,42 +97,57 @@ function Banner({
   onDismiss,
   updatedLabel,
   onRefresh,
-  refreshLabel = "Refresh",
+  refreshLabel: refreshLabelProp,
   timeWindow,
   timezone,
   countdown,
-  motion = "full"
+  motion = "full",
+  labels: labelsProp
 }) {
+  const labels = useLabels("banner", DEFAULT_LABELS, labelsProp);
+  const refreshLabel = refreshLabelProp ?? labels.refresh;
   const variantMeta = variant === "default" ? void 0 : VARIANT_META[variant];
   const effectiveTone = tone ?? variantMeta?.tone ?? "info";
   const { styles } = useStyles(sheet, { tone: effectiveTone, placement });
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("banner");
   const toneColor = useToneColor(effectiveTone);
   const borderColor = toneColor + "55";
   const iconName = icon ?? variantMeta?.icon ?? TONE_ICON[effectiveTone];
   const actionPos = actionLabel ? resolvePlacement(actionPlacement, actionLabel) : void 0;
   const dismissible = variant !== "offline" && Boolean(onDismiss);
   const showRefresh = !actionLabel && Boolean(onRefresh);
-  const metaLine = variant === "stale" && updatedLabel ? `Updated ${updatedLabel}` : variant === "maintenance" && timeWindow ? timezone ? `${timeWindow} \xB7 ${timezone}` : timeWindow : null;
-  const actionHitSlop = Math.max(0, Math.round((theme.tapMin - SPEC.actionMinHeight) / 2));
+  const metaLine = variant === "stale" && updatedLabel ? labels.updated(updatedLabel) : variant === "maintenance" && timeWindow ? timezone ? labels.windowInZone(timeWindow, timezone) : timeWindow : null;
+  const actionHitSlop = Math.max(0, Math.round((theme.tapMin - theme.ctl.sm) / 2));
   const dismissHitSlop = Math.max(0, Math.round((theme.tapMin - SPEC.glyph) / 2));
-  const refreshHitSlop = Math.max(0, Math.round((theme.tapMin - SPEC.refreshMinHeight) / 2));
+  const refreshHitSlop = Math.max(0, Math.round((theme.tapMin - theme.ctl.sm) / 2));
   const animate = motion === "full" && !theme.reduceMotion;
-  const opacity = React.useRef(new Animated.Value(animate ? 0 : 1)).current;
+  const opacity = React.useRef(new Animated.Value(motion === "none" ? 1 : 0)).current;
   React.useEffect(() => {
-    if (!animate) {
+    if (motion === "none") {
       opacity.setValue(1);
       return;
     }
-    const anim = Animated.timing(opacity, {
+    const anim = animate ? Animated.spring(opacity, {
+      ...springConfig(theme, "ds"),
       toValue: 1,
-      duration: theme.motion.enter.duration,
-      easing: Easing.bezier(...theme.motion.enter.easing),
       useNativeDriver: true
-    });
+    }) : Animated.timing(opacity, { ...motionTiming("reduced"), toValue: 1, useNativeDriver: true });
     anim.start();
     return () => anim.stop();
-  }, [animate, opacity, theme.motion.enter.duration, theme.motion.enter.easing]);
+  }, []);
+  const close = () => {
+    if (motion !== "none") {
+      LayoutAnimation.configureNext({
+        duration: theme.spring.de.duration,
+        update: animate ? { type: LayoutAnimation.Types.spring, springDamping: theme.spring.ds.dampingRatio } : { type: LayoutAnimation.Types.easeOut },
+        delete: {
+          type: LayoutAnimation.Types.easeOut,
+          property: LayoutAnimation.Properties.opacity
+        }
+      });
+    }
+    onDismiss?.();
+  };
   const action = actionLabel && actionPos ? /* @__PURE__ */ jsx(
     Pressable,
     {
@@ -148,7 +155,10 @@ function Banner({
       accessibilityLabel: actionLabel,
       onPress: onAction,
       hitSlop: actionHitSlop,
-      style: actionPos === "inline" ? styles.actionInline : styles.action,
+      style: ({ pressed }) => [
+        actionPos === "inline" ? styles.actionInline : styles.action,
+        pressed ? styles.pressed : null
+      ],
       children: /* @__PURE__ */ jsx(Text, { style: [styles.actionLabel, { color: toneColor }], children: actionLabel })
     }
   ) : null;
@@ -159,58 +169,140 @@ function Banner({
       accessibilityLabel: refreshLabel,
       onPress: onRefresh,
       hitSlop: refreshHitSlop,
-      style: [styles.refresh, { borderColor: toneColor }],
+      style: ({ pressed }) => [
+        styles.refresh,
+        { borderColor: toneColor },
+        pressed ? styles.pressed : null
+      ],
       children: [
         /* @__PURE__ */ jsx(Icon, { name: "refresh", size: SPEC.refreshGlyph, color: toneColor }),
         /* @__PURE__ */ jsx(Text, { style: [styles.actionLabel, { color: toneColor }], children: refreshLabel })
       ]
     }
   ) : null;
-  return /* @__PURE__ */ jsxs(Animated.View, { accessibilityRole: "alert", style: [styles.base, { borderColor, opacity }], children: [
-    /* @__PURE__ */ jsx(View, { style: styles.iconSlot, children: /* @__PURE__ */ jsx(Icon, { name: iconName, size: SPEC.glyph, color: toneColor }) }),
-    /* @__PURE__ */ jsxs(View, { style: styles.content, children: [
-      title ? /* @__PURE__ */ jsx(Text, { style: styles.title, children: title }) : null,
-      message ? /* @__PURE__ */ jsx(Text, { style: styles.message, children: message }) : typeof children === "string" ? /* @__PURE__ */ jsx(Text, { style: styles.message, children }) : children,
-      metaLine ? /* @__PURE__ */ jsx(Text, { style: [styles.meta, { color: toneColor }], children: metaLine }) : null,
-      variant === "maintenance" && countdown ? /* @__PURE__ */ jsx(Text, { style: [styles.metaStrong, { color: toneColor }], children: countdown }) : null,
-      actionPos === "block" ? /* @__PURE__ */ jsx(View, { style: styles.actionRow, children: action }) : null
-    ] }),
-    actionPos === "inline" ? action : null,
-    refresh ? /* @__PURE__ */ jsx(View, { style: styles.refreshSlot, children: refresh }) : null,
-    dismissible ? /* @__PURE__ */ jsx(
-      Pressable,
-      {
-        accessibilityRole: "button",
-        accessibilityLabel: "Dismiss",
-        onPress: onDismiss,
-        hitSlop: dismissHitSlop,
-        style: styles.dismiss,
-        children: /* @__PURE__ */ jsx(Icon, { name: "x", size: SPEC.glyph, color: toneColor })
-      }
-    ) : null
-  ] });
+  return /* @__PURE__ */ jsxs(
+    Animated.View,
+    {
+      accessibilityRole: "alert",
+      style: [
+        styles.base,
+        {
+          borderColor,
+          opacity,
+          transform: animate ? [{ translateY: opacity.interpolate({ inputRange: [0, 1], outputRange: [-8, 0] }) }] : []
+        }
+      ],
+      children: [
+        /* @__PURE__ */ jsx(View, { style: styles.iconSlot, children: /* @__PURE__ */ jsx(Icon, { name: iconName, size: SPEC.glyph, color: toneColor }) }),
+        /* @__PURE__ */ jsxs(View, { style: styles.content, children: [
+          title ? /* @__PURE__ */ jsx(Text, { style: [styles.title, { color: toneColor }], children: title }) : null,
+          message ? /* @__PURE__ */ jsx(Text, { style: [styles.message, { color: toneColor }], children: message }) : typeof children === "string" ? /* @__PURE__ */ jsx(Text, { style: [styles.message, { color: toneColor }], children }) : children,
+          metaLine ? /* @__PURE__ */ jsx(Text, { style: [styles.meta, { color: toneColor }], children: metaLine }) : null,
+          variant === "maintenance" && countdown ? /* @__PURE__ */ jsx(Text, { style: [styles.metaStrong, { color: toneColor }], children: countdown }) : null,
+          actionPos === "block" ? /* @__PURE__ */ jsx(View, { style: styles.actionRow, children: action }) : null
+        ] }),
+        actionPos === "inline" ? action : null,
+        refresh ? /* @__PURE__ */ jsx(View, { style: styles.refreshSlot, children: refresh }) : null,
+        dismissible ? /* @__PURE__ */ jsx(
+          Pressable,
+          {
+            accessibilityRole: "button",
+            accessibilityLabel: labels.dismiss,
+            onPress: close,
+            hitSlop: dismissHitSlop,
+            style: ({ pressed }) => [styles.dismiss, pressed ? styles.pressed : null],
+            children: /* @__PURE__ */ jsx(Icon, { name: "x", size: SPEC.glyph, color: toneColor })
+          }
+        ) : null
+      ]
+    }
+  );
 }
 function SystemBanner({
   message,
   icon = "star",
-  onDismiss
+  onDismiss,
+  tone,
+  actionLabel,
+  onAction,
+  motion = "full",
+  variant = "solid",
+  size = "md",
+  labels: labelsProp
 }) {
+  const labels = useLabels("banner", DEFAULT_LABELS, labelsProp);
   const { styles } = useStyles(sheet);
-  const theme = useLoamTheme();
-  return /* @__PURE__ */ jsxs(View, { accessibilityRole: "alert", style: styles.system, children: [
-    /* @__PURE__ */ jsx(Icon, { name: icon, size: 18, color: theme.color.accentInk }),
-    /* @__PURE__ */ jsx(Text, { style: styles.systemMessage, numberOfLines: 1, ellipsizeMode: "tail", children: message }),
-    onDismiss ? /* @__PURE__ */ jsx(
-      Pressable,
-      {
-        accessibilityRole: "button",
-        accessibilityLabel: "Dismiss",
-        onPress: onDismiss,
-        style: styles.systemDismiss,
-        children: /* @__PURE__ */ jsx(Icon, { name: "x", size: SPEC.systemGlyph, color: theme.color.accentInk })
-      }
-    ) : null
-  ] });
+  const theme = useLoamTheme("banner");
+  const toneFill = {
+    info: { fill: theme.color.info, ink: theme.color.infoInk },
+    success: { fill: theme.color.good, ink: theme.color.goodInk },
+    warn: { fill: theme.color.warn, ink: theme.color.warnInk },
+    danger: { fill: theme.color.danger, ink: theme.color.dangerInk },
+    neutral: { fill: theme.color.text, ink: theme.color.surface }
+  };
+  const softFill = {
+    info: { fill: theme.color.infoSoft, ink: theme.color.infoOnSoft },
+    success: { fill: theme.color.goodSoft, ink: theme.color.goodOnSoft },
+    warn: { fill: theme.color.warnSoft, ink: theme.color.warnOnSoft },
+    danger: { fill: theme.color.dangerSoft, ink: theme.color.dangerOnSoft },
+    neutral: { fill: theme.status.pendingSoft, ink: theme.status.pendingOnSoft }
+  };
+  const fills = variant === "soft" ? softFill : toneFill;
+  const fill = tone ? fills[tone] : variant === "soft" ? { fill: theme.color.accentSoft, ink: theme.color.accentOnSoft } : { fill: theme.color.accent, ink: theme.color.accentInk };
+  const compact = size === "sm";
+  const level = useResolvedMotion(motion, "banner");
+  const enter = React.useRef(new Animated.Value(level === "none" ? 1 : 0)).current;
+  React.useEffect(() => {
+    if (level === "none") return;
+    Animated.timing(enter, { ...motionTiming(level), toValue: 1, useNativeDriver: true }).start();
+  }, []);
+  return /* @__PURE__ */ jsxs(
+    Animated.View,
+    {
+      accessibilityRole: "alert",
+      style: [
+        styles.system,
+        compact && { paddingVertical: theme.space.s2 },
+        { backgroundColor: fill.fill, opacity: enter }
+      ],
+      children: [
+        /* @__PURE__ */ jsx(Icon, { name: icon, size: compact ? 16 : 18, color: fill.ink }),
+        /* @__PURE__ */ jsx(
+          Text,
+          {
+            style: [
+              styles.systemMessage,
+              compact && { fontSize: theme.fontSize[13] },
+              { color: fill.ink }
+            ],
+            numberOfLines: 1,
+            ellipsizeMode: "tail",
+            children: message
+          }
+        ),
+        actionLabel && onAction ? /* @__PURE__ */ jsx(
+          Pressable,
+          {
+            accessibilityRole: "button",
+            accessibilityLabel: actionLabel,
+            onPress: onAction,
+            style: ({ pressed }) => pressed ? styles.pressed : null,
+            children: /* @__PURE__ */ jsx(Text, { style: [styles.systemMessage, styles.systemAction, { color: fill.ink }], children: actionLabel })
+          }
+        ) : null,
+        onDismiss ? /* @__PURE__ */ jsx(
+          Pressable,
+          {
+            accessibilityRole: "button",
+            accessibilityLabel: labels.dismiss,
+            onPress: onDismiss,
+            style: ({ pressed }) => [styles.systemDismiss, pressed ? styles.pressed : null],
+            children: /* @__PURE__ */ jsx(Icon, { name: "x", size: SPEC.systemGlyph, color: fill.ink })
+          }
+        ) : null
+      ]
+    }
+  );
 }
 var sheet = createStyleSheet((theme) => ({
   base: {
@@ -219,8 +311,9 @@ var sheet = createStyleSheet((theme) => ({
     gap: theme.space[SPEC.gap],
     paddingTop: theme.space.s3,
     paddingBottom: theme.space.s3,
+    // Padding 16 / 12: the start is the full 16, the end stays 12 for the dismiss.
     paddingEnd: theme.space.s3,
-    paddingStart: SPEC.padStart,
+    paddingStart: theme.space.s4,
     borderRadius: theme.radius.md,
     borderWidth: theme.borderWidth.thin,
     variants: {
@@ -261,15 +354,14 @@ var sheet = createStyleSheet((theme) => ({
   title: {
     fontFamily: theme.font.sans,
     fontWeight: theme.fontWeight.bold,
-    fontSize: SPEC.titleSize,
-    lineHeight: SPEC.titleSize * theme.lineHeight.snug,
-    color: theme.color.text
+    fontSize: theme.fontSize[14],
+    lineHeight: theme.fontSize[14] * theme.lineHeight.snug
   },
   message: {
     fontFamily: theme.font.sans,
-    fontSize: SPEC.bodySize,
-    lineHeight: SPEC.bodySize * SPEC.messageLineHeight,
-    color: theme.color.text
+    fontWeight: theme.fontWeight.medium,
+    fontSize: theme.fontSize[14],
+    lineHeight: theme.fontSize[14] * SPEC.messageLineHeight
   },
   // The block row carries no `marginTop`: the copy column's own 2px gap is the
   // separation, and the negative bottom margin absorbs the label's tap padding.
@@ -280,7 +372,7 @@ var sheet = createStyleSheet((theme) => ({
     marginBottom: SPEC.actionInsetBottom
   },
   action: {
-    minHeight: SPEC.actionMinHeight,
+    minHeight: theme.ctl.sm,
     paddingHorizontal: SPEC.actionPadX,
     borderRadius: theme.radius.sm,
     borderWidth: 0,
@@ -293,7 +385,7 @@ var sheet = createStyleSheet((theme) => ({
   // from adding any height, so an inline action is free.
   actionInline: {
     flexShrink: 0,
-    minHeight: SPEC.actionMinHeight,
+    minHeight: theme.ctl.sm,
     paddingHorizontal: SPEC.actionPadX,
     marginTop: SPEC.inlineActionInsetY,
     marginBottom: SPEC.inlineActionInsetY,
@@ -303,25 +395,26 @@ var sheet = createStyleSheet((theme) => ({
     alignItems: "center",
     justifyContent: "center"
   },
+  // The OS button weight (Final 03): 600 on iOS, 500 on Android.
   actionLabel: {
     fontFamily: theme.font.sans,
-    fontWeight: theme.fontWeight.bold,
-    fontSize: SPEC.bodySize
+    fontWeight: theme.platform === "iOS" ? theme.fontWeight.semibold : theme.fontWeight.medium,
+    fontSize: theme.fontSize[13]
   },
   // A last-updated stamp / service window. Colored the tone's on-soft ink at the
   // call site (AA on the tint); a plain weight so it reads as secondary copy.
   meta: {
     fontFamily: theme.font.sans,
     fontWeight: theme.fontWeight.medium,
-    fontSize: SPEC.metaSize,
-    lineHeight: SPEC.metaSize * SPEC.messageLineHeight
+    fontSize: theme.fontSize[12],
+    lineHeight: theme.fontSize[12] * SPEC.messageLineHeight
   },
   // The maintenance countdown — the same meta line, emphasized.
   metaStrong: {
     fontFamily: theme.font.sans,
     fontWeight: theme.fontWeight.bold,
-    fontSize: SPEC.metaSize,
-    lineHeight: SPEC.metaSize * SPEC.messageLineHeight
+    fontSize: theme.fontSize[12],
+    lineHeight: theme.fontSize[12] * SPEC.messageLineHeight
   },
   // The stale refresh affordance sits self-centered on the trailing edge.
   refreshSlot: {
@@ -336,29 +429,32 @@ var sheet = createStyleSheet((theme) => ({
     alignItems: "center",
     justifyContent: "center",
     gap: SPEC.refreshGap,
-    minHeight: SPEC.refreshMinHeight,
+    minHeight: theme.ctl.sm,
     paddingHorizontal: SPEC.refreshPadX,
     borderRadius: theme.radius.sm,
     borderWidth: theme.borderWidth.thin,
     backgroundColor: "transparent"
   },
+  // Press acknowledgement for the unboxed controls: a dim, no layout change.
+  pressed: { opacity: theme.state.pressedOpacity },
   dismiss: {
     paddingTop: theme.space[1]
   },
   system: {
     flexDirection: "row",
     alignItems: "center",
-    gap: theme.space[10],
+    gap: theme.space[12],
     paddingVertical: theme.space.s3,
     paddingHorizontal: theme.space.s4,
     backgroundColor: theme.color.accent
   },
+  systemAction: { flex: 0, textDecorationLine: "underline" },
   systemMessage: {
     flex: 1,
     minWidth: 0,
     fontFamily: theme.font.sans,
     fontWeight: theme.fontWeight.semibold,
-    fontSize: SPEC.bodySize,
+    fontSize: theme.fontSize[14],
     color: theme.color.accentInk
   },
   // A full `tapMin` target pulled back with negative margins, so the reachable

package/dist/chunk-XAIWMSLB.js

@@ -0,0 +1 @@
+

package/dist/chunk-XBXUBBJZ.js

@@ -0,0 +1,98 @@
+import { StatusDot } from './chunk-OANH27AK.js';
+import { Icon } from './chunk-PCEFCOLN.js';
+import 'react';
+import { View } from 'react-native';
+import { createStyleSheet, useStyles } from '@btndprojects/loam-theme-native';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var ICON_TILE_GLYPH = {
+  xs: 14,
+  sm: 16,
+  md: 18,
+  lg: 20,
+  xl: 24,
+  hero: 28
+};
+function IconTile({
+  icon,
+  tone = "neutral",
+  size = "md",
+  glyphSize,
+  shape,
+  status,
+  accessibilityLabel,
+  style
+}) {
+  const { styles, theme } = useStyles(sheet, { tone, size });
+  const ink = {
+    neutral: theme.color.text2,
+    accent: theme.color.accentOnSoft,
+    good: theme.color.goodOnSoft,
+    warn: theme.color.warnOnSoft,
+    danger: theme.color.dangerOnSoft,
+    info: theme.color.infoOnSoft
+  }[tone];
+  const dim = {
+    xs: theme.space[26],
+    sm: theme.space[30],
+    md: theme.space[36],
+    lg: theme.space[44],
+    xl: theme.space[56],
+    hero: theme.space[64]
+  }[size];
+  const shapeStyle = shape === "circle" ? { borderRadius: theme.radius.full } : shape === "squircle" ? { borderRadius: Math.round(dim * 0.32), borderCurve: "continuous" } : null;
+  const tile = /* @__PURE__ */ jsx(
+    View,
+    {
+      accessible: accessibilityLabel != null,
+      accessibilityRole: accessibilityLabel ? "image" : void 0,
+      accessibilityLabel,
+      importantForAccessibility: accessibilityLabel ? "yes" : "no-hide-descendants",
+      accessibilityElementsHidden: accessibilityLabel == null,
+      style: [styles.tile, shapeStyle, style],
+      children: /* @__PURE__ */ jsx(Icon, { name: icon, size: glyphSize ?? ICON_TILE_GLYPH[size], color: ink })
+    }
+  );
+  if (!status) return tile;
+  return /* @__PURE__ */ jsxs(View, { style: styles.host, children: [
+    tile,
+    /* @__PURE__ */ jsx(View, { style: styles.badge, children: /* @__PURE__ */ jsx(StatusDot, { state: status, size: size === "xs" || size === "sm" ? "sm" : "md" }) })
+  ] });
+}
+var sheet = createStyleSheet((theme) => ({
+  host: { alignSelf: "flex-start" },
+  badge: {
+    position: "absolute",
+    right: -theme.space[2],
+    bottom: -theme.space[2],
+    padding: theme.space[2],
+    borderRadius: theme.radius.full,
+    backgroundColor: theme.color.surface
+  },
+  tile: {
+    alignItems: "center",
+    justifyContent: "center",
+    // A fixed square, so the tone edge draws inside it and costs no layout.
+    borderWidth: theme.borderWidth.base,
+    variants: {
+      tone: {
+        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: {
+        xs: { width: theme.space[26], height: theme.space[26], borderRadius: theme.radius.sm },
+        sm: { width: theme.space[30], height: theme.space[30], borderRadius: theme.radius.sm },
+        md: { width: theme.space[36], height: theme.space[36], borderRadius: theme.radius.sm },
+        lg: { width: theme.space[44], height: theme.space[44], borderRadius: theme.radius.md },
+        xl: { width: theme.space[56], height: theme.space[56], borderRadius: theme.radius.lg },
+        hero: { width: theme.space[64], height: theme.space[64], borderRadius: theme.radius[20] }
+      }
+    }
+  }
+}));
+
+export { ICON_TILE_GLYPH, IconTile };

package/dist/chunk-XCU7MYBJ.js

@@ -0,0 +1 @@
+