@btndprojects/loam-ui-native 0.1.1 → 0.3.1

package/dist/chunk-JXJB2X6M.js

@@ -1,131 +0,0 @@
-import { useColorTransition } from './chunk-ITTYJZWX.js';
-import { haptics } from './chunk-NY2U3PBI.js';
-import { useResolvedMotion } from './chunk-6N33LFQA.js';
-import { Icon } from './chunk-TKVFVF5D.js';
-import * as React from 'react';
-import { Easing, Animated, Pressable, Platform } from 'react-native';
-import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
-import { jsx } from 'react/jsx-runtime';
-
-var BOX = { sm: 16, md: 24 };
-var GLYPH = { sm: 12, md: 14 };
-var CHECK_STROKE = 3.5;
-function nextChecked(current) {
-  return current === true ? false : true;
-}
-function useResolvedPlatform(explicit) {
-  const theme = useLoamTheme();
-  if (explicit) return explicit;
-  if (Platform.OS === "ios") return "ios";
-  if (Platform.OS === "android") return "android";
-  return theme.platform === "iOS" ? "ios" : "android";
-}
-function Checkbox({
-  checked,
-  defaultChecked = false,
-  onCheckedChange,
-  size = "md",
-  platform,
-  disabled = false,
-  motion = "full",
-  accessibilityLabel
-}) {
-  const isControlled = checked !== void 0;
-  const [internal, setInternal] = React.useState(defaultChecked);
-  const value = isControlled ? checked : internal;
-  const isChecked = value === true;
-  const isIndeterminate = value === "indeterminate";
-  const isOn = isChecked || isIndeterminate;
-  const theme = useLoamTheme();
-  const os = useResolvedPlatform(platform);
-  const { styles } = useStyles(sheet, { shape: `${os}-${size}`, disabled });
-  const resolvedMotion = useResolvedMotion(motion);
-  const animateColour = resolvedMotion !== "none";
-  const animatePress = resolvedMotion === "full";
-  const easing = React.useMemo(() => Easing.bezier(...theme.easing.base), [theme.easing.base]);
-  const backgroundColor = useColorTransition(
-    isOn ? theme.color.accent : "transparent",
-    theme.duration.base,
-    easing,
-    animateColour
-  );
-  const borderColor = useColorTransition(
-    isOn ? theme.color.accent : theme.color.borderStrong,
-    theme.duration.base,
-    easing,
-    animateColour
-  );
-  const scale = React.useRef(new Animated.Value(1)).current;
-  const spring = (to) => Animated.spring(scale, {
-    toValue: to,
-    useNativeDriver: true,
-    ...theme.spring.press
-  }).start();
-  const handlePress = () => {
-    const next = nextChecked(value);
-    if (!isControlled) setInternal(next);
-    haptics.impact("light");
-    onCheckedChange?.(next);
-  };
-  return /* @__PURE__ */ jsx(
-    Pressable,
-    {
-      accessibilityRole: "checkbox",
-      accessibilityLabel,
-      accessibilityState: { checked: isIndeterminate ? "mixed" : isChecked, disabled },
-      "aria-checked": isIndeterminate ? "mixed" : isChecked,
-      disabled,
-      onPress: disabled ? void 0 : handlePress,
-      onPressIn: disabled || !animatePress ? void 0 : () => spring(0.9),
-      onPressOut: disabled || !animatePress ? void 0 : () => spring(1),
-      children: /* @__PURE__ */ jsx(
-        Animated.View,
-        {
-          testID: "checkbox-box",
-          style: [styles.box, { backgroundColor, borderColor, transform: [{ scale }] }],
-          children: isOn ? /* @__PURE__ */ jsx(
-            Icon,
-            {
-              name: isIndeterminate ? "minus" : "check",
-              size: GLYPH[size],
-              color: theme.color.accentInk,
-              strokeWidth: CHECK_STROKE
-            }
-          ) : null
-        }
-      )
-    }
-  );
-}
-function boxStyle(os, size, radius) {
-  return {
-    width: BOX[size],
-    height: BOX[size],
-    borderRadius: os === "ios" ? radius.full : radius.sm
-  };
-}
-var sheet = createStyleSheet((theme) => ({
-  // `backgroundColor` / `borderColor` are supplied at the use site as animated
-  // values so the box can travel between states over `duration.base`.
-  box: {
-    alignItems: "center",
-    justifyContent: "center",
-    // The reference draws a `2px` edge — the static `w3` weight, not the
-    // contrast-reactive hairline, because the ring is part of the drawing.
-    borderWidth: theme.borderWidth.heavy,
-    variants: {
-      shape: {
-        "ios-sm": boxStyle("ios", "sm", theme.radius),
-        "ios-md": boxStyle("ios", "md", theme.radius),
-        "android-sm": boxStyle("android", "sm", theme.radius),
-        "android-md": boxStyle("android", "md", theme.radius)
-      },
-      disabled: {
-        true: { opacity: theme.state.disabledOpacity },
-        false: {}
-      }
-    }
-  }
-}));
-
-export { Checkbox };

package/dist/chunk-LRJNDEIA.js

@@ -1,302 +0,0 @@
-import { useTourInsets } from './chunk-JUAMLEHX.js';
-import { Progress } from './chunk-2ZZ7TDJ4.js';
-import { Button } from './chunk-3ARE4TES.js';
-import { Icon } from './chunk-TKVFVF5D.js';
-import 'react';
-import { View, Text, Pressable } from 'react-native';
-import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
-function ChecklistProgress({
-  done,
-  total,
-  motion = "full"
-}) {
-  const { styles } = useStyles(sheet);
-  return /* @__PURE__ */ jsxs(View, { style: styles.progressRow, children: [
-    /* @__PURE__ */ jsx(View, { style: styles.grow, children: /* @__PURE__ */ jsx(
-      Progress,
-      {
-        size: "sm",
-        value: done,
-        max: Math.max(1, total),
-        accessibilityLabel: `${done} of ${total} done`,
-        motion
-      }
-    ) }),
-    /* @__PURE__ */ jsxs(Text, { style: styles.meta, children: [
-      done,
-      " / ",
-      total
-    ] })
-  ] });
-}
-function ChecklistRow({
-  item,
-  divided = false,
-  onAction,
-  onToggle
-}) {
-  const theme = useLoamTheme();
-  const { styles } = useStyles(sheet);
-  const mark = /* @__PURE__ */ jsx(View, { style: [styles.mark, item.done ? styles.markDone : null], children: item.done ? /* @__PURE__ */ jsx(Icon, { name: "check", size: theme.icon.xs, color: theme.color.goodInk }) : null });
-  return /* @__PURE__ */ jsxs(View, { style: [styles.row, divided ? styles.rowDivided : null], children: [
-    onToggle ? /* @__PURE__ */ jsx(
-      Pressable,
-      {
-        accessibilityRole: "checkbox",
-        accessibilityState: { checked: Boolean(item.done) },
-        "aria-checked": Boolean(item.done),
-        accessibilityLabel: item.title,
-        hitSlop: theme.space[10],
-        onPress: () => onToggle(!item.done),
-        children: mark
-      }
-    ) : mark,
-    /* @__PURE__ */ jsxs(View, { style: styles.rowText, children: [
-      /* @__PURE__ */ jsxs(View, { style: styles.rowTitleLine, children: [
-        /* @__PURE__ */ jsx(Text, { style: [styles.rowTitle, item.done ? styles.rowTitleDone : null], children: item.title }),
-        item.optional ? /* @__PURE__ */ jsx(Text, { style: styles.optionalTag, children: "optional" }) : null
-      ] }),
-      item.description ? /* @__PURE__ */ jsx(Text, { style: styles.rowDescription, children: item.description }) : null
-    ] }),
-    item.meta ? /* @__PURE__ */ jsx(Text, { style: styles.meta, children: item.meta }) : null,
-    !item.done && onAction ? /* @__PURE__ */ jsx(Button, { size: "sm", variant: "outline", disabled: item.disabled, onPress: onAction, children: item.actionLabel ?? "Start" }) : null
-  ] });
-}
-function Checklist({
-  title,
-  description,
-  items,
-  onItemAction,
-  onToggle,
-  onDismiss,
-  dismissLabel = "Collapse checklist",
-  completeTitle = "All set",
-  completeBody,
-  completeAction,
-  showProgress = true,
-  motion = "full"
-}) {
-  const theme = useLoamTheme();
-  const { styles } = useStyles(sheet);
-  const required = items.filter((i) => !i.optional);
-  const done = items.filter((i) => i.done).length;
-  const complete = required.length > 0 && required.every((i) => i.done);
-  return /* @__PURE__ */ jsxs(View, { accessibilityRole: "summary", accessibilityLabel: title, style: styles.panel, children: [
-    /* @__PURE__ */ jsxs(View, { style: styles.panelHead, children: [
-      /* @__PURE__ */ jsxs(View, { style: styles.panelHeadRow, children: [
-        /* @__PURE__ */ jsxs(View, { style: styles.grow, children: [
-          /* @__PURE__ */ jsx(Text, { style: styles.panelTitle, children: title }),
-          description ? /* @__PURE__ */ jsx(Text, { style: styles.panelDescription, children: description }) : null
-        ] }),
-        onDismiss ? /* @__PURE__ */ jsx(
-          Pressable,
-          {
-            accessibilityRole: "button",
-            accessibilityLabel: dismissLabel,
-            onPress: onDismiss,
-            hitSlop: theme.space[10],
-            style: styles.iconButton,
-            children: /* @__PURE__ */ jsx(Icon, { name: "chevron-down", size: theme.icon.sm, color: theme.color.text3 })
-          }
-        ) : null
-      ] }),
-      showProgress ? /* @__PURE__ */ jsx(ChecklistProgress, { done, total: items.length, motion }) : null
-    ] }),
-    complete ? /* @__PURE__ */ jsxs(View, { style: styles.completeBody, children: [
-      /* @__PURE__ */ jsxs(View, { style: styles.completeHead, children: [
-        /* @__PURE__ */ jsx(Icon, { name: "check-circle", size: theme.icon.md, color: theme.color.good }),
-        /* @__PURE__ */ jsx(Text, { style: styles.panelTitle, children: completeTitle })
-      ] }),
-      completeBody ? /* @__PURE__ */ jsx(Text, { style: styles.rowDescription, children: completeBody }) : null,
-      completeAction
-    ] }) : /* @__PURE__ */ jsx(View, { children: items.map((item, i) => /* @__PURE__ */ jsx(
-      ChecklistRow,
-      {
-        item,
-        divided: i > 0,
-        onAction: onItemAction ? () => onItemAction(item) : void 0,
-        onToggle: onToggle ? (next) => onToggle(item, next) : void 0
-      },
-      item.id
-    )) })
-  ] });
-}
-function ChecklistLauncher({
-  done,
-  total,
-  label = "Setup",
-  onPress,
-  pinned = true
-}) {
-  const theme = useLoamTheme();
-  const { styles } = useStyles(sheet);
-  const insets = useTourInsets();
-  const pct = Math.round(done / Math.max(1, total) * 100);
-  return /* @__PURE__ */ jsxs(
-    Pressable,
-    {
-      accessibilityRole: "button",
-      accessibilityLabel: `${label} \u2014 ${done} of ${total} done`,
-      onPress,
-      style: ({ pressed }) => [
-        styles.launcher,
-        pinned ? styles.launcherPinned : null,
-        // A stylesheet cannot read a runtime inset; `TourHost`'s is composed in here.
-        pinned ? { right: theme.space[16] + insets.right, bottom: theme.space[16] + insets.bottom } : null,
-        pressed ? { backgroundColor: theme.state.pressed } : null
-      ],
-      children: [
-        /* @__PURE__ */ jsx(Icon, { name: "list-ul", size: theme.icon.sm, color: theme.color.accentStrong }),
-        /* @__PURE__ */ jsx(Text, { style: styles.launcherLabel, children: label }),
-        /* @__PURE__ */ jsxs(View, { style: styles.launcherBadge, children: [
-          /* @__PURE__ */ jsx(
-            View,
-            {
-              accessibilityElementsHidden: true,
-              importantForAccessibility: "no-hide-descendants",
-              style: styles.launcherTrack,
-              children: /* @__PURE__ */ jsx(View, { style: [styles.launcherFill, { width: `${pct}%` }] })
-            }
-          ),
-          /* @__PURE__ */ jsxs(Text, { style: styles.meta, children: [
-            done,
-            "/",
-            total
-          ] })
-        ] })
-      ]
-    }
-  );
-}
-var sheet = createStyleSheet((theme) => ({
-  panel: {
-    borderRadius: theme.radius.lg,
-    borderWidth: theme.borderWidth.thin,
-    borderColor: theme.color.border,
-    backgroundColor: theme.color.surface,
-    overflow: "hidden",
-    ...theme.shadow.lg
-  },
-  panelHead: {
-    gap: theme.space[6],
-    paddingHorizontal: theme.space[16],
-    paddingTop: theme.space[14],
-    paddingBottom: theme.space[12],
-    borderBottomWidth: theme.borderWidth.thin,
-    borderBottomColor: theme.color.border
-  },
-  panelHeadRow: { flexDirection: "row", alignItems: "flex-start", gap: theme.space[10] },
-  panelTitle: {
-    fontFamily: theme.font.display,
-    fontWeight: theme.font.displayWeight,
-    fontSize: theme.type.title3.fontSize,
-    color: theme.color.text
-  },
-  panelDescription: {
-    marginTop: theme.space[4],
-    fontFamily: theme.font.sans,
-    fontSize: theme.type.footnote.fontSize,
-    lineHeight: theme.type.footnote.lineHeight,
-    color: theme.color.text3
-  },
-  iconButton: {
-    width: theme.ctl.sm,
-    height: theme.ctl.sm,
-    alignItems: "center",
-    justifyContent: "center",
-    borderRadius: theme.radius.full
-  },
-  progressRow: { flexDirection: "row", alignItems: "center", gap: theme.space[10], marginTop: theme.space[4] },
-  grow: { flex: 1 },
-  meta: {
-    fontFamily: theme.font.mono,
-    fontSize: theme.type.caption2.fontSize,
-    color: theme.color.text3,
-    fontVariant: ["tabular-nums"]
-  },
-  row: {
-    flexDirection: "row",
-    alignItems: "flex-start",
-    gap: theme.space[11],
-    paddingHorizontal: theme.space[16],
-    paddingVertical: theme.space[12]
-  },
-  rowDivided: { borderTopWidth: theme.borderWidth.thin, borderTopColor: theme.color.border },
-  rowText: { flex: 1, gap: theme.space[2] },
-  rowTitleLine: { flexDirection: "row", alignItems: "center", gap: theme.space[8] },
-  rowTitle: {
-    fontFamily: theme.font.sans,
-    fontWeight: theme.fontWeight.bold,
-    fontSize: theme.type.subheadline.fontSize,
-    color: theme.color.text
-  },
-  rowTitleDone: { color: theme.color.text3, textDecorationLine: "line-through" },
-  rowDescription: {
-    fontFamily: theme.font.sans,
-    fontSize: theme.type.footnote.fontSize,
-    lineHeight: theme.type.footnote.lineHeight,
-    color: theme.color.text3
-  },
-  optionalTag: {
-    fontFamily: theme.font.mono,
-    fontSize: theme.type.caption2.fontSize,
-    letterSpacing: theme.tracking.caps,
-    textTransform: "uppercase",
-    color: theme.color.text3
-  },
-  mark: {
-    marginTop: theme.space[2],
-    width: theme.space[18],
-    height: theme.space[18],
-    borderRadius: theme.radius.full,
-    borderWidth: theme.borderWidth.thick,
-    borderColor: theme.color.borderStrong,
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  markDone: { borderColor: theme.color.good, backgroundColor: theme.color.good },
-  completeBody: { gap: theme.space[10], padding: theme.space[16] },
-  completeHead: { flexDirection: "row", alignItems: "center", gap: theme.space[10] },
-  launcher: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: theme.space[10],
-    height: theme.ctl.lg,
-    paddingLeft: theme.space[14],
-    paddingRight: theme.space[8],
-    borderRadius: theme.radius.full,
-    borderWidth: theme.borderWidth.thin,
-    // Graphical edge at 3:1 — the measured accent, not the raw one.
-    borderColor: theme.focus.ringColor,
-    backgroundColor: theme.color.surface,
-    ...theme.shadow.lg
-  },
-  launcherPinned: { position: "absolute", right: theme.space[16], bottom: theme.space[16] },
-  launcherLabel: {
-    fontFamily: theme.font.sans,
-    fontWeight: theme.fontWeight.bold,
-    fontSize: theme.type.subheadline.fontSize,
-    color: theme.color.accentStrong
-  },
-  launcherBadge: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: theme.space[7],
-    paddingHorizontal: theme.space[8],
-    paddingVertical: theme.space[4],
-    borderRadius: theme.radius.full,
-    backgroundColor: theme.color.surface2
-  },
-  launcherTrack: {
-    width: theme.space[32],
-    height: theme.space[3],
-    borderRadius: theme.radius.full,
-    backgroundColor: theme.color.surface3,
-    overflow: "hidden"
-  },
-  launcherFill: { height: "100%", backgroundColor: theme.color.accent }
-}));
-
-export { Checklist, ChecklistLauncher, ChecklistProgress, ChecklistRow };

package/dist/chunk-LSS54GLJ.js

@@ -1,116 +0,0 @@
-import { Icon } from './chunk-TKVFVF5D.js';
-import 'react';
-import { View, Text, Pressable } from 'react-native';
-import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
-function TruncationNotice({
-  shown,
-  total,
-  noun = "items",
-  onShowAll,
-  actionIcon = "arrow-down",
-  variant = "inline",
-  size = "md",
-  // Accepted for API consistency; intentionally unused (static feedback).
-  motion: _motion = "full"
-}) {
-  const { styles } = useStyles(sheet, { variant, size });
-  const theme = useLoamTheme();
-  if (shown >= total) return null;
-  const message = `Showing ${shown.toLocaleString()} of ${total.toLocaleString()} ${noun}`;
-  const iconSize = size === "sm" ? theme.icon.xs : theme.icon.sm;
-  const pad = variant === "bar" ? size === "sm" ? { paddingHorizontal: theme.space.s3, paddingVertical: theme.space.s2 } : { paddingHorizontal: theme.space.s4, paddingVertical: theme.space.s3 } : null;
-  return /* @__PURE__ */ jsxs(View, { style: [styles.base, pad], children: [
-    /* @__PURE__ */ jsx(Text, { style: styles.message, children: message }),
-    onShowAll ? /* @__PURE__ */ jsxs(
-      Pressable,
-      {
-        accessibilityRole: "button",
-        accessibilityLabel: `Show all ${total.toLocaleString()} ${noun}`,
-        onPress: onShowAll,
-        hitSlop: { top: theme.space.s2, bottom: theme.space.s2 },
-        style: ({ pressed }) => [styles.action, pressed ? styles.pressed : null],
-        children: [
-          /* @__PURE__ */ jsxs(Text, { style: styles.actionLabel, children: [
-            "Show all ",
-            total.toLocaleString()
-          ] }),
-          actionIcon ? /* @__PURE__ */ jsx(Icon, { name: actionIcon, size: iconSize, color: theme.color.accentStrong }) : null
-        ]
-      }
-    ) : null
-  ] });
-}
-var sheet = createStyleSheet((theme) => ({
-  /** Press feedback for the action affordance. */
-  pressed: { opacity: theme.state.pressedOpacity },
-  base: {
-    flexDirection: "row",
-    alignItems: "center",
-    variants: {
-      variant: {
-        inline: { alignSelf: "flex-start", gap: theme.space.s2 },
-        bar: {
-          alignSelf: "stretch",
-          justifyContent: "space-between",
-          gap: theme.space.s3,
-          borderTopWidth: theme.borderWidth.base,
-          borderTopColor: theme.color.border,
-          backgroundColor: theme.color.surface2
-        }
-      },
-      size: { sm: {}, md: {} }
-    }
-  },
-  // Muted secondary ink; clears AA on surface / surface-2 in both modes. Tabular
-  // figures keep the digits aligned as the counts change.
-  message: {
-    fontFamily: theme.font.sans,
-    color: theme.color.text2,
-    fontVariant: ["tabular-nums"],
-    variants: {
-      size: {
-        sm: {
-          fontSize: theme.type.caption1.fontSize,
-          lineHeight: theme.type.caption1.lineHeight,
-          letterSpacing: theme.type.caption1.letterSpacing
-        },
-        md: {
-          fontSize: theme.type.footnote.fontSize,
-          lineHeight: theme.type.footnote.lineHeight,
-          letterSpacing: theme.type.footnote.letterSpacing
-        }
-      },
-      variant: {}
-    }
-  },
-  action: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: theme.space.s1
-  },
-  actionLabel: {
-    fontFamily: theme.font.sans,
-    fontWeight: theme.fontWeight.semibold,
-    color: theme.color.accentStrong,
-    fontVariant: ["tabular-nums"],
-    variants: {
-      size: {
-        sm: {
-          fontSize: theme.type.caption1.fontSize,
-          lineHeight: theme.type.caption1.lineHeight,
-          letterSpacing: theme.type.caption1.letterSpacing
-        },
-        md: {
-          fontSize: theme.type.footnote.fontSize,
-          lineHeight: theme.type.footnote.lineHeight,
-          letterSpacing: theme.type.footnote.letterSpacing
-        }
-      },
-      variant: {}
-    }
-  }
-}));
-
-export { TruncationNotice };

package/dist/chunk-LZLHELAG.js

@@ -1,137 +0,0 @@
-import { Icon } from './chunk-TKVFVF5D.js';
-import 'react';
-import { View, Text, Pressable } from 'react-native';
-import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
-var VARIANT_KIND = {
-  empty: "accent",
-  "no-results": "muted",
-  error: "danger",
-  "no-permission": "info",
-  offline: "warn",
-  stale: "muted"
-};
-var VARIANT_ICON = {
-  empty: "mail",
-  "no-results": "search",
-  error: "refresh",
-  "no-permission": "lock",
-  offline: "wifi-off",
-  stale: "clock"
-};
-function useForeground(kind) {
-  const theme = useLoamTheme();
-  switch (kind) {
-    case "muted":
-      return theme.color.text2;
-    case "danger":
-      return theme.color.dangerOnSoft;
-    case "warn":
-      return theme.color.warnOnSoft;
-    case "info":
-      return theme.color.infoOnSoft;
-    default:
-      return theme.color.accentOnSoft;
-  }
-}
-function EmptyState({
-  variant = "empty",
-  icon,
-  title,
-  description,
-  actionLabel,
-  onAction,
-  // Inert (see prop docs); destructured so it never reaches a native element.
-  motion: _motion = "full"
-}) {
-  const kind = VARIANT_KIND[variant];
-  const { styles } = useStyles(sheet, { kind });
-  const theme = useLoamTheme();
-  const fg = useForeground(kind);
-  const iconName = icon ?? VARIANT_ICON[variant];
-  const pillInk = kind === "muted" ? theme.color.text : theme.color.accentInk;
-  return /* @__PURE__ */ jsxs(View, { style: styles.base, children: [
-    /* @__PURE__ */ jsx(View, { style: styles.tile, children: /* @__PURE__ */ jsx(Icon, { name: iconName, size: 30, color: fg }) }),
-    /* @__PURE__ */ jsx(Text, { style: styles.title, children: title }),
-    description ? /* @__PURE__ */ jsx(Text, { style: styles.description, children: description }) : null,
-    actionLabel ? /* @__PURE__ */ jsx(
-      Pressable,
-      {
-        accessibilityRole: "button",
-        accessibilityLabel: actionLabel,
-        onPress: onAction,
-        style: ({ pressed }) => [styles.pill, pressed && styles.pressed],
-        children: /* @__PURE__ */ jsx(Text, { style: [styles.pillLabel, { color: pillInk }], children: actionLabel })
-      }
-    ) : null
-  ] });
-}
-var sheet = createStyleSheet((theme) => ({
-  base: {
-    alignItems: "center",
-    justifyContent: "center",
-    gap: theme.space.s4
-  },
-  tile: {
-    width: theme.space[76],
-    height: theme.space[76],
-    borderRadius: theme.radius.xl,
-    alignItems: "center",
-    justifyContent: "center",
-    // The tile is a fixed 76pt square, so the tone edge draws inside it and
-    // costs no layout. Without it a re-resolved palette leaves the glyph on a
-    // bare surface with no tile behind it.
-    borderWidth: theme.borderWidth.base,
-    borderColor: "transparent",
-    variants: {
-      kind: {
-        accent: { backgroundColor: theme.color.accentSoft, borderColor: theme.edge.accent },
-        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 }
-      }
-    }
-  },
-  title: {
-    fontFamily: theme.font.display,
-    fontWeight: theme.font.displayWeight,
-    fontSize: theme.fontSize[26],
-    color: theme.color.text,
-    textAlign: "center"
-  },
-  description: {
-    fontFamily: theme.font.sans,
-    fontSize: theme.fontSize[14],
-    lineHeight: Math.round(theme.fontSize[14] * 1.55),
-    color: theme.color.text2,
-    textAlign: "center"
-  },
-  pill: {
-    borderRadius: theme.radius.full,
-    paddingVertical: theme.space.s3,
-    paddingHorizontal: theme.space.s5,
-    alignItems: "center",
-    justifyContent: "center",
-    variants: {
-      kind: {
-        accent: { backgroundColor: theme.color.accent },
-        muted: { backgroundColor: theme.color.surface2 },
-        danger: { backgroundColor: theme.color.accent },
-        warn: { backgroundColor: theme.color.accent },
-        info: { backgroundColor: theme.color.accent }
-      }
-    }
-  },
-  pressed: {
-    transform: [{ scale: 0.95 }]
-  },
-  pillLabel: {
-    fontFamily: theme.font.sans,
-    fontWeight: theme.fontWeight.bold,
-    fontSize: theme.fontSize[14]
-  }
-}));
-
-export { EmptyState };