@btndprojects/loam-ui-native 0.2.1 → 0.3.1

package/dist/chunk-QJMMM4RC.js

@@ -0,0 +1,124 @@
+import { IconTile } from './chunk-XBXUBBJZ.js';
+import { Button } from './chunk-5DTKORLI.js';
+import { stateLayout } from './chunk-TH4PW2WU.js';
+import { useResolvedMotion, springConfig } from './chunk-J64KGCGX.js';
+import * as React from 'react';
+import { Animated, Text, View } 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",
+  success: "good"
+};
+var VARIANT_ICON = {
+  empty: "mail",
+  "no-results": "search",
+  error: "refresh",
+  "no-permission": "lock",
+  offline: "wifi-off",
+  stale: "clock",
+  success: "check-circle"
+};
+var KIND_TONE = {
+  accent: "accent",
+  muted: "neutral",
+  danger: "danger",
+  warn: "warn",
+  info: "info",
+  good: "good"
+};
+function EmptyState({
+  variant = "empty",
+  icon,
+  title,
+  description,
+  actionLabel,
+  onAction,
+  secondaryActionLabel,
+  onSecondaryAction,
+  layout = "fullScreen",
+  platform,
+  motion = "full"
+}) {
+  const kind = VARIANT_KIND[variant];
+  const { styles } = useStyles(sheet);
+  const theme = useLoamTheme("empty-state");
+  const iconName = icon ?? VARIANT_ICON[variant];
+  const geo = stateLayout(theme, layout, platform);
+  const level = useResolvedMotion(motion, "empty-state");
+  const rise = React.useRef(new Animated.Value(level === "none" ? 1 : 0)).current;
+  React.useEffect(() => {
+    if (level === "none") return;
+    Animated.spring(rise, {
+      ...springConfig(theme, "ds"),
+      toValue: 1,
+      useNativeDriver: true
+    }).start();
+  }, []);
+  const riseStyle = {
+    opacity: rise,
+    transform: level === "full" ? [
+      {
+        translateY: rise.interpolate({
+          inputRange: [0, 1],
+          outputRange: [theme.space.s3, 0]
+        })
+      }
+    ] : []
+  };
+  return /* @__PURE__ */ jsxs(Animated.View, { style: [styles.base, riseStyle], children: [
+    /* @__PURE__ */ jsx(IconTile, { icon: iconName, tone: KIND_TONE[kind], size: geo.tile }),
+    /* @__PURE__ */ jsx(Text, { style: [styles.title, geo.title], children: title }),
+    description ? /* @__PURE__ */ jsx(Text, { style: styles.description, children: description }) : null,
+    actionLabel || secondaryActionLabel ? /* @__PURE__ */ jsxs(View, { style: styles.actions, children: [
+      actionLabel ? /* @__PURE__ */ jsx(Button, { size: geo.button, onPress: onAction, accessibilityLabel: actionLabel, children: actionLabel }) : null,
+      secondaryActionLabel ? /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "outline",
+          size: geo.button,
+          onPress: onSecondaryAction,
+          accessibilityLabel: secondaryActionLabel,
+          children: secondaryActionLabel
+        }
+      ) : null
+    ] }) : null
+  ] });
+}
+var sheet = createStyleSheet((theme) => ({
+  base: {
+    alignItems: "center",
+    justifyContent: "center",
+    gap: theme.space.s3
+  },
+  // Size, line height and weight come from `stateLayout` (the OS ramp, R14).
+  title: {
+    fontFamily: theme.font.sans,
+    color: theme.color.text,
+    textAlign: "center"
+  },
+  description: {
+    maxWidth: theme.space[160] * 2,
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.subheadline.fontSize,
+    lineHeight: theme.type.subheadline.lineHeight,
+    color: theme.color.text2,
+    textAlign: "center"
+  },
+  // Final 03: mt 8, gap 8; primary then outline.
+  actions: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    justifyContent: "center",
+    gap: theme.space.s2,
+    marginTop: theme.space.s2
+  }
+}));
+
+export { EmptyState };

package/dist/chunk-QYWEVAM6.js

@@ -0,0 +1,407 @@
+import { MetricDelta } from './chunk-N7AX4OA4.js';
+import { NumberRoll } from './chunk-IMMALLRU.js';
+import { Skeleton } from './chunk-YJ5PXOX3.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-PCEFCOLN.js';
+import { useResolvedMotion, springConfig } from './chunk-J64KGCGX.js';
+import * as React from 'react';
+import { Pressable, View, Text, Animated } from 'react-native';
+import { Svg, Path } from 'react-native-svg';
+import { icons, ICON_VIEWBOX } from '@btndprojects/loam-icons';
+import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+
+var RATING_DEFAULT_LABELS = {
+  rating: "Rating",
+  readOnlyLabel: (name, value, max) => `${name}: ${value} out of ${max} stars`,
+  rate: (value, max) => `Rate ${value} of ${max}`,
+  readout: (value, max) => `${value} of ${max}`,
+  readoutWithCount: (value, max, count) => `${value} of ${max} \xB7 ${count} reviews`,
+  outOf: (value, max) => `${value} out of ${max}`,
+  stars: (n) => `${n} ${n === 1 ? "star" : "stars"}`,
+  ratings: (n, formatted) => `${formatted} ${n === 1 ? "rating" : "ratings"}`
+};
+var ICON_SIZE = { sm: 20, md: 26, lg: 34 };
+var STAR_PATH = icons.star.flatMap((part) => part.t === "path" ? [part.d] : []).join(" ");
+function toHalfStep(value) {
+  return Math.round(value * 2) / 2;
+}
+function Star({
+  color,
+  fraction,
+  size,
+  delay = 0,
+  kick = 0,
+  animate = false
+}) {
+  const theme = useLoamTheme("rating");
+  const { styles } = useStyles(starSheet);
+  const filled = Math.max(0, Math.min(1, fraction));
+  const grow = React.useRef(new Animated.Value(1)).current;
+  const pulse = React.useRef(new Animated.Value(1)).current;
+  const wasFilled = React.useRef(filled > 0);
+  React.useEffect(() => {
+    const was = wasFilled.current;
+    wasFilled.current = filled > 0;
+    if (!animate || was || filled === 0) return;
+    grow.setValue(0.5);
+    const a = Animated.sequence([
+      Animated.delay(delay),
+      Animated.spring(grow, { ...springConfig(theme, "fs"), toValue: 1, useNativeDriver: true })
+    ]);
+    a.start();
+    return () => a.stop();
+  }, [filled > 0]);
+  React.useEffect(() => {
+    if (!animate || !kick) return;
+    pulse.setValue(1.2);
+    Animated.spring(pulse, {
+      ...springConfig(theme, "fs"),
+      toValue: 1,
+      useNativeDriver: true
+    }).start();
+  }, [kick]);
+  return /* @__PURE__ */ jsxs(View, { style: { width: size, height: size }, children: [
+    /* @__PURE__ */ jsx(Icon, { name: "star", size, color: theme.color.borderStrong }),
+    filled > 0 ? /* @__PURE__ */ jsx(
+      Animated.View,
+      {
+        testID: "rating-star-fill",
+        style: [
+          styles.clip,
+          {
+            width: size * filled,
+            opacity: grow,
+            transform: [{ scale: Animated.multiply(grow, pulse) }]
+          }
+        ],
+        children: /* @__PURE__ */ jsx(View, { style: styles.paint, children: /* @__PURE__ */ jsx(Svg, { width: size, height: size, viewBox: ICON_VIEWBOX, children: /* @__PURE__ */ jsx(
+          Path,
+          {
+            d: STAR_PATH,
+            fill: color ?? theme.color.warn,
+            stroke: color ?? theme.color.warn,
+            strokeWidth: theme.borderWidth.thick,
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ) }) })
+      }
+    ) : null
+  ] });
+}
+function Rating({
+  value,
+  defaultValue = 0,
+  onValueChange,
+  max = 5,
+  size = "md",
+  readOnly = false,
+  disabled = false,
+  accessibilityLabel: accessibilityLabelProp,
+  showValue = false,
+  count,
+  motion = "full",
+  labels: labelsProp,
+  tone = "warn",
+  error
+}) {
+  const { styles } = useStyles(sheet, { size });
+  const labels = useLabels("rating", RATING_DEFAULT_LABELS, labelsProp);
+  const accessibilityLabel = accessibilityLabelProp ?? labels.rating;
+  const theme = useLoamTheme("rating");
+  const iconSize = ICON_SIZE[size];
+  const starColor = {
+    warn: theme.color.warn,
+    accent: theme.color.accent,
+    good: theme.color.good,
+    danger: theme.color.danger,
+    info: theme.color.info,
+    neutral: theme.color.text2
+  }[tone];
+  const starSlopY = Math.max(0, (theme.tapMin - (iconSize + theme.space.s1 * 2)) / 2);
+  const isControlled = value !== void 0;
+  const [internal, setInternal] = React.useState(defaultValue);
+  const current = isControlled ? value : internal;
+  const animate = useResolvedMotion(motion, "rating") === "full" && !readOnly && !disabled;
+  const [chosen, setChosen] = React.useState({ index: -1, n: 0 });
+  const before = React.useRef(0);
+  const setValue = (next) => {
+    before.current = Math.ceil(current);
+    setChosen((c) => ({ index: next - 1, n: c.n + 1 }));
+    if (!isControlled) setInternal(next);
+    onValueChange?.(next);
+  };
+  const clamped = Math.max(0, Math.min(max, current));
+  const snapped = readOnly ? Math.round(clamped * 10) / 10 : toHalfStep(clamped);
+  const shown = Number.isInteger(snapped) ? String(snapped) : snapped.toFixed(1);
+  const label = readOnly ? labels.readOnlyLabel(accessibilityLabel, shown, max) : accessibilityLabel;
+  const readoutLabel = count !== void 0 ? labels.readoutWithCount(shown, max, count) : labels.readout(shown, max);
+  const stars = /* @__PURE__ */ jsx(Fragment, { children: Array.from({ length: max }, (_, i) => {
+    const starValue = i + 1;
+    const fraction = Math.max(0, Math.min(1, snapped - i));
+    return /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        style: styles.star,
+        accessibilityRole: "button",
+        accessibilityLabel: labels.rate(starValue, max),
+        accessibilityState: { disabled: readOnly || disabled, selected: fraction >= 0.5 },
+        disabled: readOnly || disabled,
+        hitSlop: { top: starSlopY, bottom: starSlopY },
+        onPress: readOnly || disabled ? void 0 : () => setValue(starValue),
+        children: /* @__PURE__ */ jsx(
+          Star,
+          {
+            fraction,
+            color: starColor,
+            size: iconSize,
+            animate,
+            delay: Math.min(Math.max(0, i - before.current), 8) * 30,
+            kick: chosen.index === i ? chosen.n : 0
+          }
+        )
+      },
+      i
+    );
+  }) });
+  const main = /* @__PURE__ */ jsxs(View, { style: styles.wrapper, children: [
+    readOnly ? (
+      // A display, not a control: one image-like stop that reads the score,
+      // instead of five disabled "Rate N of 5" buttons to swipe through
+      // (WCAG 4.1.2; VoiceOver/TalkBack would announce each as dimmed).
+      /* @__PURE__ */ jsx(View, { accessible: true, accessibilityRole: "image", accessibilityLabel: label, children: /* @__PURE__ */ jsx(
+        View,
+        {
+          style: styles.row,
+          accessibilityElementsHidden: true,
+          importantForAccessibility: "no-hide-descendants",
+          ...{ "aria-hidden": true },
+          children: stars
+        }
+      ) })
+    ) : /* @__PURE__ */ jsx(
+      View,
+      {
+        style: [styles.row, disabled ? styles.disabled : null],
+        role: "group",
+        accessibilityLabel: label,
+        "aria-disabled": disabled || void 0,
+        "aria-invalid": error ? true : void 0,
+        children: stars
+      }
+    ),
+    showValue ? /* @__PURE__ */ jsx(Text, { testID: "rating-readout", style: styles.readout, children: readoutLabel }) : null
+  ] });
+  if (!error) return main;
+  return /* @__PURE__ */ jsxs(View, { style: styles.errorColumn, children: [
+    main,
+    /* @__PURE__ */ jsx(Text, { role: "alert", style: styles.error, children: error })
+  ] });
+}
+var sheet = createStyleSheet((theme) => ({
+  // Outer wrapper groups the star row with the optional readout.
+  wrapper: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space.s2
+  },
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+    variants: {
+      size: {
+        sm: { gap: theme.space.s1 },
+        md: { gap: theme.space.s1 },
+        lg: { gap: theme.space.s2 }
+      }
+    }
+  },
+  errorColumn: { gap: theme.space.s1 },
+  error: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    color: theme.color.dangerOnSoft
+  },
+  disabled: { opacity: theme.state.disabledOpacity },
+  star: {
+    padding: theme.space.s1
+  },
+  // Companion readout — uses body/sm weight and text2 tone so it reads as
+  // secondary information alongside the star icons.
+  readout: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[14],
+    color: theme.color.text2
+  }
+}));
+var starSheet = createStyleSheet(() => ({
+  // `start` + `overflow: 'hidden'` is the clip: the painted star inside keeps its
+  // full width and is cropped to the fraction, from the leading edge either way
+  // round, so RTL needs no sign flip.
+  clip: {
+    position: "absolute",
+    top: 0,
+    bottom: 0,
+    start: 0,
+    overflow: "hidden"
+  },
+  paint: { position: "absolute", top: 0, start: 0 }
+}));
+function RatingSummary({
+  average,
+  distribution,
+  count,
+  size = "md",
+  color = "warn",
+  formatCount = String,
+  fractionDigits = 1,
+  rowLabel: rowLabelProp,
+  countLabel: countLabelProp,
+  roll = false,
+  loading = false,
+  unit,
+  delta,
+  align = "start",
+  motion,
+  labels: labelsProp,
+  style,
+  testID
+}) {
+  const labels = useLabels("rating", RATING_DEFAULT_LABELS, labelsProp);
+  const theme = useLoamTheme("rating");
+  const { styles } = useStyles(sheet2, { align, color });
+  const rowLabel = rowLabelProp ?? labels.stars;
+  const countLabel = countLabelProp ?? ((n) => labels.ratings(n, formatCount(n)));
+  const max = distribution?.length || 5;
+  const total = count ?? (distribution ? distribution.reduce((a, b) => a + b, 0) : 0);
+  const peak = distribution ? Math.max(1, ...distribution) : 1;
+  const shown = average.toFixed(fractionDigits);
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      testID,
+      style: [styles.root, style],
+      "aria-busy": loading || void 0,
+      accessibilityState: loading ? { busy: true } : void 0,
+      children: [
+        /* @__PURE__ */ jsxs(View, { style: styles.head, children: [
+          loading ? (
+            // The bar is as many digits wide as the figure and one text-line tall.
+            /* @__PURE__ */ jsx(
+              Skeleton,
+              {
+                variant: "rect",
+                width: shown.length * theme.space.s3,
+                height: theme.type.title3.fontSize,
+                decorative: true
+              }
+            )
+          ) : roll ? /* @__PURE__ */ jsx(
+            NumberRoll,
+            {
+              value: average,
+              formatValue: (n) => n.toFixed(fractionDigits),
+              motion,
+              textStyle: styles.average
+            }
+          ) : /* @__PURE__ */ jsx(Text, { style: styles.average, children: shown }),
+          unit != null ? /* @__PURE__ */ jsx(Text, { style: styles.caption, children: unit }) : null,
+          delta != null ? /* @__PURE__ */ jsx(MetricDelta, { delta, size: "sm" }) : null,
+          /* @__PURE__ */ jsxs(View, { style: styles.stack, children: [
+            /* @__PURE__ */ jsx(Rating, { readOnly: true, value: average, max, size, tone: color, motion }),
+            total > 0 ? /* @__PURE__ */ jsx(Text, { style: styles.caption, children: countLabel(total) }) : null
+          ] })
+        ] }),
+        distribution ? /* @__PURE__ */ jsx(View, { style: styles.rows, children: Array.from({ length: max }, (_, k) => max - k).map((stars) => {
+          const n = distribution[stars - 1] ?? 0;
+          return /* @__PURE__ */ jsxs(View, { style: styles.row, testID: `rating-summary-row-${stars}`, children: [
+            /* @__PURE__ */ jsx(Text, { style: styles.rowLabel, children: rowLabel(stars) }),
+            /* @__PURE__ */ jsx(View, { style: styles.track, children: /* @__PURE__ */ jsx(
+              View,
+              {
+                testID: "rating-summary-bar",
+                style: [styles.fill, { width: `${n / peak * 100}%` }]
+              }
+            ) }),
+            /* @__PURE__ */ jsx(Text, { style: styles.rowCount, children: formatCount(n) })
+          ] }, stars);
+        }) }) : null
+      ]
+    }
+  );
+}
+var sheet2 = createStyleSheet((theme) => ({
+  root: {
+    gap: theme.space.s3,
+    variants: {
+      align: {
+        start: { alignItems: "flex-start" },
+        center: { alignItems: "center" },
+        end: { alignItems: "flex-end" }
+      }
+    }
+  },
+  head: { flexDirection: "row", alignItems: "center", gap: theme.space.s3 },
+  stack: { gap: theme.space.s1 },
+  // The average — the same title step `Metric`'s `sm` value is set in, tabular
+  // so the digits do not jitter as it changes.
+  average: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.bold,
+    color: theme.color.text,
+    fontVariant: ["tabular-nums"],
+    fontSize: theme.type.title3.fontSize,
+    lineHeight: theme.type.title3.lineHeight,
+    letterSpacing: theme.type.title3.letterSpacing
+  },
+  caption: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.caption1.fontSize,
+    lineHeight: theme.type.caption1.lineHeight,
+    letterSpacing: theme.type.caption1.letterSpacing,
+    color: theme.color.text3
+  },
+  rows: { gap: theme.space.s1 },
+  row: { flexDirection: "row", alignItems: "center", gap: theme.space.s2 },
+  rowLabel: {
+    width: theme.space[56],
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.caption1.fontSize,
+    lineHeight: theme.type.caption1.lineHeight,
+    letterSpacing: theme.type.caption1.letterSpacing,
+    color: theme.color.text3
+  },
+  track: {
+    flex: 1,
+    height: theme.space[8],
+    overflow: "hidden",
+    borderRadius: theme.radius.full,
+    backgroundColor: theme.color.surface3
+  },
+  fill: {
+    height: "100%",
+    borderRadius: theme.radius.full,
+    variants: {
+      color: {
+        warn: { backgroundColor: theme.color.warn },
+        accent: { backgroundColor: theme.color.accentStrong },
+        good: { backgroundColor: theme.color.good },
+        danger: { backgroundColor: theme.color.danger },
+        info: { backgroundColor: theme.color.info }
+      }
+    }
+  },
+  rowCount: {
+    width: theme.space[40],
+    textAlign: "right",
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.caption1.fontSize,
+    lineHeight: theme.type.caption1.lineHeight,
+    letterSpacing: theme.type.caption1.letterSpacing,
+    fontVariant: ["tabular-nums"],
+    color: theme.color.text3
+  }
+}));
+
+export { Rating, RatingSummary };

package/dist/chunk-R5T4VZ7Z.js

@@ -0,0 +1,126 @@
+import { Skeleton } from './chunk-YJ5PXOX3.js';
+import { softToneSkin } from './chunk-PJLTKDVY.js';
+import * as React from 'react';
+import { View, Text, StyleSheet, Pressable } from 'react-native';
+import { createStyleSheet, useStyles } from '@btndprojects/loam-theme-native';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function panelSurface(theme, {
+  variant = "default",
+  elevation = "default",
+  padding,
+  tone = "neutral",
+  error
+}) {
+  const out = {};
+  if (variant === "elevated") Object.assign(out, theme.shadow.md);
+  if (variant === "outline") {
+    out.backgroundColor = "transparent";
+    out.borderWidth = theme.borderWidth.base;
+    out.borderColor = theme.color.borderStrong;
+  }
+  if (elevation === "raised") Object.assign(out, theme.shadow.lg);
+  if (elevation === "flat") Object.assign(out, { shadowOpacity: 0, elevation: 0 });
+  if (padding === "none") out.padding = 0;
+  if (padding === "sm") out.padding = theme.space.s3;
+  if (padding === "md") out.padding = theme.space.s5;
+  if (padding === "lg") out.padding = theme.space[24];
+  if (tone !== "neutral") {
+    const skin = softToneSkin(theme, tone);
+    out.backgroundColor = skin.fill;
+    out.borderWidth = theme.borderWidth.base;
+    out.borderColor = skin.edge;
+  }
+  if (error) {
+    out.borderWidth = theme.borderWidth.base;
+    out.borderColor = theme.edge.danger;
+  }
+  return out;
+}
+function PanelFooter({
+  loading,
+  error,
+  tone = "neutral"
+}) {
+  const { styles } = useStyles(sheet);
+  if (!loading && !error) return null;
+  return /* @__PURE__ */ jsxs(View, { style: styles.footer, children: [
+    loading ? /* @__PURE__ */ jsxs(View, { testID: "panel-loading", style: styles.bars, children: [
+      /* @__PURE__ */ jsx(View, { style: styles.barWide, children: /* @__PURE__ */ jsx(Skeleton, { variant: "text", decorative: true }) }),
+      /* @__PURE__ */ jsx(View, { style: styles.barNarrow, children: /* @__PURE__ */ jsx(Skeleton, { variant: "text", decorative: true }) })
+    ] }) : null,
+    error ? /* @__PURE__ */ jsx(
+      Text,
+      {
+        role: "alert",
+        style: [styles.error, tone !== "neutral" && tone !== "danger" ? styles.errorChip : null],
+        children: error
+      }
+    ) : null
+  ] });
+}
+function PanelRoot({
+  interactive = false,
+  onPress,
+  pressLabel,
+  style,
+  children,
+  ...rest
+}) {
+  const { styles } = useStyles(sheet);
+  if (!interactive || !onPress) {
+    return /* @__PURE__ */ jsx(View, { ...rest, style, children });
+  }
+  const { gap, rowGap, columnGap, flexDirection, alignItems, justifyContent, flexWrap, ...outer } = StyleSheet.flatten(style) ?? {};
+  return /* @__PURE__ */ jsxs(View, { ...rest, style: outer, children: [
+    /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        accessibilityRole: "button",
+        accessibilityLabel: pressLabel ?? rest.accessibilityLabel,
+        onPress,
+        style: StyleSheet.absoluteFill
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      View,
+      {
+        style: [
+          styles.pressContent,
+          { gap, rowGap, columnGap, flexDirection, alignItems, justifyContent, flexWrap }
+        ],
+        children
+      }
+    )
+  ] });
+}
+var sheet = createStyleSheet((theme) => ({
+  pressContent: { alignSelf: "stretch", flexGrow: 1, pointerEvents: "box-none" },
+  footer: { alignSelf: "stretch", gap: theme.space.s2 },
+  bars: { gap: theme.space.s2 },
+  barWide: { width: "70%" },
+  barNarrow: { width: "40%" },
+  error: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    color: theme.color.dangerOnSoft
+  },
+  // `dangerOnSoft` is measured on the danger tint only; on any other toned
+  // panel the message carries its own danger tint.
+  errorChip: {
+    alignSelf: "flex-start",
+    backgroundColor: theme.color.dangerSoft,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.edge.danger,
+    borderRadius: theme.radius.xs,
+    paddingHorizontal: theme.space.s2,
+    paddingVertical: theme.space.s1
+  }
+}));
+function panelMutedInk(theme, tone) {
+  return tone && tone !== "neutral" ? theme.color.text2 : theme.color.text3;
+}
+var PanelToneContext = React.createContext("neutral");
+
+export { PanelFooter, PanelRoot, PanelToneContext, panelMutedInk, panelSurface };

package/dist/chunk-R77HFLZD.js

@@ -0,0 +1 @@
+