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

package/dist/chunk-SYNOJOQO.js

@@ -0,0 +1,377 @@
+import { Icon } from './chunk-TKVFVF5D.js';
+import * as React from 'react';
+import { Animated, Easing, Pressable, Text, View } 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,
+  // 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,
+  /**
+   * Negative block margins on the *inline* action, so its 28px box is absorbed
+   * into the copy column's own height (a title line is ~17px) and an inline
+   * action therefore adds **zero** height to the banner.
+   */
+  inlineActionInsetY: -6,
+  /**
+   * Longest action label that still sits inline beside the copy. Past this, the
+   * label would squeeze the message into a sliver, so it drops to its own row.
+   */
+  inlineActionMaxChars: 14,
+  /** Leading-icon and close-glyph size in the inline banner — between `icon.sm` and `icon.md`. */
+  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,
+  /**
+   * Negative margins on the system banner's `tapMin` close target, so growing
+   * the target from 26px to 44px does not inflate the banner's own padding.
+   */
+  systemDismissInsetY: -9,
+  systemDismissInsetEnd: -13
+};
+var TONE_ICON = {
+  info: "info",
+  success: "check-circle",
+  warn: "alert-triangle",
+  danger: "alert-triangle",
+  neutral: "info"
+};
+var VARIANT_META = {
+  offline: { tone: "neutral", icon: "cloud-off" },
+  stale: { tone: "neutral", icon: "clock" },
+  maintenance: { tone: "info", icon: "wrench" }
+};
+function useToneColor(tone) {
+  const theme = useLoamTheme();
+  switch (tone) {
+    case "success":
+      return theme.color.goodOnSoft;
+    case "warn":
+      return theme.color.warnOnSoft;
+    case "danger":
+      return theme.color.dangerOnSoft;
+    case "neutral":
+      return theme.status.pendingOnSoft;
+    default:
+      return theme.color.infoOnSoft;
+  }
+}
+function resolvePlacement(placement, label) {
+  if (placement !== "auto") return placement;
+  return label.length <= SPEC.inlineActionMaxChars ? "inline" : "block";
+}
+function Banner({
+  tone,
+  variant = "default",
+  placement = "section",
+  title,
+  message,
+  children,
+  icon,
+  actionLabel,
+  onAction,
+  actionPlacement = "auto",
+  onDismiss,
+  updatedLabel,
+  onRefresh,
+  refreshLabel = "Refresh",
+  timeWindow,
+  timezone,
+  countdown,
+  motion = "full"
+}) {
+  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 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 dismissHitSlop = Math.max(0, Math.round((theme.tapMin - SPEC.glyph) / 2));
+  const refreshHitSlop = Math.max(0, Math.round((theme.tapMin - SPEC.refreshMinHeight) / 2));
+  const animate = motion === "full" && !theme.reduceMotion;
+  const opacity = React.useRef(new Animated.Value(animate ? 0 : 1)).current;
+  React.useEffect(() => {
+    if (!animate) {
+      opacity.setValue(1);
+      return;
+    }
+    const anim = Animated.timing(opacity, {
+      toValue: 1,
+      duration: theme.motion.enter.duration,
+      easing: Easing.bezier(...theme.motion.enter.easing),
+      useNativeDriver: true
+    });
+    anim.start();
+    return () => anim.stop();
+  }, [animate, opacity, theme.motion.enter.duration, theme.motion.enter.easing]);
+  const action = actionLabel && actionPos ? /* @__PURE__ */ jsx(
+    Pressable,
+    {
+      accessibilityRole: "button",
+      accessibilityLabel: actionLabel,
+      onPress: onAction,
+      hitSlop: actionHitSlop,
+      style: actionPos === "inline" ? styles.actionInline : styles.action,
+      children: /* @__PURE__ */ jsx(Text, { style: [styles.actionLabel, { color: toneColor }], children: actionLabel })
+    }
+  ) : null;
+  const refresh = showRefresh ? /* @__PURE__ */ jsxs(
+    Pressable,
+    {
+      accessibilityRole: "button",
+      accessibilityLabel: refreshLabel,
+      onPress: onRefresh,
+      hitSlop: refreshHitSlop,
+      style: [styles.refresh, { borderColor: toneColor }],
+      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
+  ] });
+}
+function SystemBanner({
+  message,
+  icon = "star",
+  onDismiss
+}) {
+  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
+  ] });
+}
+var sheet = createStyleSheet((theme) => ({
+  base: {
+    flexDirection: "row",
+    alignItems: "flex-start",
+    gap: theme.space[SPEC.gap],
+    paddingTop: theme.space.s3,
+    paddingBottom: theme.space.s3,
+    paddingEnd: theme.space.s3,
+    paddingStart: SPEC.padStart,
+    borderRadius: theme.radius.md,
+    borderWidth: theme.borderWidth.thin,
+    variants: {
+      tone: {
+        info: { backgroundColor: theme.color.infoSoft },
+        success: { backgroundColor: theme.color.goodSoft },
+        warn: { backgroundColor: theme.color.warnSoft },
+        danger: { backgroundColor: theme.color.dangerSoft },
+        neutral: { backgroundColor: theme.status.pendingSoft }
+      },
+      placement: {
+        // Full-bleed strip: flush to the edge, no radius, most emphasis.
+        page: { borderRadius: 0, alignSelf: "stretch" },
+        // The default inset card.
+        section: { borderRadius: theme.radius.md },
+        // Compact notice: tighter block padding so it threads into content.
+        inline: {
+          borderRadius: theme.radius.md,
+          paddingTop: theme.space.s2,
+          paddingBottom: theme.space.s2
+        }
+      }
+    }
+  },
+  iconSlot: {
+    // Nudge the icon onto the title's optical baseline.
+    paddingTop: theme.space[1]
+  },
+  // `minWidth: 0` is what lets a long word truncate instead of pushing the
+  // trailing edge of the card out.
+  content: {
+    flex: 1,
+    minWidth: 0,
+    flexDirection: "column",
+    // The 2px column gap replaces the message's old `marginTop`.
+    gap: theme.space[2]
+  },
+  title: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.bold,
+    fontSize: SPEC.titleSize,
+    lineHeight: SPEC.titleSize * theme.lineHeight.snug,
+    color: theme.color.text
+  },
+  message: {
+    fontFamily: theme.font.sans,
+    fontSize: SPEC.bodySize,
+    lineHeight: SPEC.bodySize * SPEC.messageLineHeight,
+    color: theme.color.text
+  },
+  // 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.
+  actionRow: {
+    flexDirection: "row",
+    justifyContent: "flex-end",
+    marginEnd: SPEC.actionInsetEnd,
+    marginBottom: SPEC.actionInsetBottom
+  },
+  action: {
+    minHeight: SPEC.actionMinHeight,
+    paddingHorizontal: SPEC.actionPadX,
+    borderRadius: theme.radius.sm,
+    borderWidth: 0,
+    backgroundColor: "transparent",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  // Same unboxed label, on the banner's own row. `flexShrink: 0` keeps it whole
+  // while the copy column absorbs the width; the negative block margins keep it
+  // from adding any height, so an inline action is free.
+  actionInline: {
+    flexShrink: 0,
+    minHeight: SPEC.actionMinHeight,
+    paddingHorizontal: SPEC.actionPadX,
+    marginTop: SPEC.inlineActionInsetY,
+    marginBottom: SPEC.inlineActionInsetY,
+    borderRadius: theme.radius.sm,
+    borderWidth: 0,
+    backgroundColor: "transparent",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  actionLabel: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.bold,
+    fontSize: SPEC.bodySize
+  },
+  // 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
+  },
+  // 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
+  },
+  // The stale refresh affordance sits self-centered on the trailing edge.
+  refreshSlot: {
+    flexShrink: 0,
+    alignSelf: "center"
+  },
+  // An outline pill in the tone's on-soft ink; `borderColor` is set at the call
+  // site so it matches the icon and label. The 32px box grows to `tapMin` via
+  // `hitSlop`, not a 44px slab.
+  refresh: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: SPEC.refreshGap,
+    minHeight: SPEC.refreshMinHeight,
+    paddingHorizontal: SPEC.refreshPadX,
+    borderRadius: theme.radius.sm,
+    borderWidth: theme.borderWidth.thin,
+    backgroundColor: "transparent"
+  },
+  dismiss: {
+    paddingTop: theme.space[1]
+  },
+  system: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space[10],
+    paddingVertical: theme.space.s3,
+    paddingHorizontal: theme.space.s4,
+    backgroundColor: theme.color.accent
+  },
+  systemMessage: {
+    flex: 1,
+    minWidth: 0,
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.semibold,
+    fontSize: SPEC.bodySize,
+    color: theme.color.accentInk
+  },
+  // A full `tapMin` target pulled back with negative margins, so the reachable
+  // area is 44×44 while the banner keeps its 12px/16px padding.
+  systemDismiss: {
+    width: theme.tapMin,
+    height: theme.tapMin,
+    marginTop: SPEC.systemDismissInsetY,
+    marginBottom: SPEC.systemDismissInsetY,
+    marginEnd: SPEC.systemDismissInsetEnd,
+    alignItems: "center",
+    justifyContent: "center"
+  }
+}));
+
+export { Banner, SystemBanner };

package/dist/chunk-T753XT36.js

@@ -0,0 +1 @@
+

package/dist/chunk-TKQYWZ5V.js

@@ -0,0 +1,196 @@
+import { NumberRoll } from './chunk-CUMUNPXY.js';
+import { Icon } from './chunk-TKVFVF5D.js';
+import 'react';
+import { View, Text } from 'react-native';
+import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var DIRECTION_GLYPH = {
+  up: "arrow-up",
+  down: "arrow-down",
+  flat: "minus"
+};
+var DIRECTION_WORD = {
+  up: "Up",
+  down: "Down",
+  flat: "No change"
+};
+function resolveDirection(delta, deltaDirection) {
+  if (deltaDirection) return deltaDirection;
+  if (typeof delta === "number") return delta > 0 ? "up" : delta < 0 ? "down" : "flat";
+  return "flat";
+}
+function toneFor(direction, invert) {
+  if (direction === "flat") return "neutral";
+  const isGood = direction === "up" ? !invert : invert;
+  return isGood ? "good" : "bad";
+}
+function formatDelta(delta) {
+  if (typeof delta === "string") return delta;
+  const sign = delta > 0 ? "+" : delta < 0 ? "\u2212" : "";
+  return `${sign}${Math.abs(delta).toLocaleString()}`;
+}
+function Metric({
+  label,
+  value,
+  unit,
+  delta,
+  deltaDirection,
+  invert = false,
+  size = "md",
+  caption,
+  motion = "full",
+  animateValue = false,
+  accessibilityLabel
+}) {
+  const hasDelta = delta !== void 0 && delta !== "";
+  const direction = resolveDirection(delta, deltaDirection);
+  const tone = toneFor(direction, invert);
+  const deltaText = hasDelta ? formatDelta(delta) : "";
+  const numeric = typeof value === "number";
+  const willAnimateValue = animateValue && numeric && motion !== "none" && motion !== "reduced";
+  const { styles } = useStyles(sheet, { size, tone });
+  const theme = useLoamTheme();
+  const glyphColor = tone === "good" ? theme.status.doneOnSoft : tone === "bad" ? theme.status.crashedOnSoft : theme.status.pendingOnSoft;
+  const iconSize = size === "sm" ? theme.icon.xs : size === "lg" ? theme.icon.md : theme.icon.sm;
+  return /* @__PURE__ */ jsxs(View, { style: styles.root, accessibilityLabel, children: [
+    /* @__PURE__ */ jsx(Text, { style: styles.label, children: label }),
+    /* @__PURE__ */ jsxs(View, { style: styles.valueRow, children: [
+      willAnimateValue ? /* @__PURE__ */ jsx(NumberRoll, { value, textStyle: styles.value, motion }) : /* @__PURE__ */ jsx(Text, { style: styles.value, children: value }),
+      unit !== void 0 ? /* @__PURE__ */ jsx(Text, { style: styles.unit, children: unit }) : null
+    ] }),
+    hasDelta ? /* @__PURE__ */ jsxs(
+      View,
+      {
+        style: styles.delta,
+        accessibilityLabel: deltaText ? `${DIRECTION_WORD[direction]} ${deltaText}` : DIRECTION_WORD[direction],
+        children: [
+          /* @__PURE__ */ jsx(Icon, { name: DIRECTION_GLYPH[direction], size: iconSize, color: glyphColor }),
+          deltaText ? /* @__PURE__ */ jsx(Text, { style: styles.deltaText, children: deltaText }) : null
+        ]
+      }
+    ) : null,
+    caption !== void 0 ? /* @__PURE__ */ jsx(Text, { style: styles.caption, children: caption }) : null
+  ] });
+}
+var sheet = createStyleSheet((theme) => ({
+  root: { alignItems: "flex-start", gap: theme.space.s1 },
+  // Muted secondary ink; clears AA on surface in both modes.
+  label: {
+    fontFamily: theme.font.sans,
+    color: theme.color.text2,
+    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
+        },
+        lg: {
+          fontSize: theme.type.subheadline.fontSize,
+          lineHeight: theme.type.subheadline.lineHeight,
+          letterSpacing: theme.type.subheadline.letterSpacing
+        }
+      }
+    }
+  },
+  valueRow: { flexDirection: "row", alignItems: "baseline", gap: theme.space.s1 },
+  // Big value — sans, bold, tabular so digits do not jitter as it updates.
+  value: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.bold,
+    color: theme.color.text,
+    fontVariant: ["tabular-nums"],
+    variants: {
+      size: {
+        sm: {
+          fontSize: theme.type.title3.fontSize,
+          lineHeight: theme.type.title3.lineHeight,
+          letterSpacing: theme.type.title3.letterSpacing
+        },
+        md: {
+          fontSize: theme.type.title1.fontSize,
+          lineHeight: theme.type.title1.lineHeight,
+          letterSpacing: theme.type.title1.letterSpacing
+        },
+        lg: {
+          fontSize: theme.type.largeTitle.fontSize,
+          lineHeight: theme.type.largeTitle.lineHeight,
+          letterSpacing: theme.type.largeTitle.letterSpacing
+        }
+      }
+    }
+  },
+  unit: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.medium,
+    color: theme.color.text2,
+    fontVariant: ["tabular-nums"],
+    variants: {
+      size: {
+        sm: {
+          fontSize: theme.type.footnote.fontSize,
+          lineHeight: theme.type.footnote.lineHeight,
+          letterSpacing: theme.type.footnote.letterSpacing
+        },
+        md: {
+          fontSize: theme.type.callout.fontSize,
+          lineHeight: theme.type.callout.lineHeight,
+          letterSpacing: theme.type.callout.letterSpacing
+        },
+        lg: {
+          fontSize: theme.type.title3.fontSize,
+          lineHeight: theme.type.title3.lineHeight,
+          letterSpacing: theme.type.title3.letterSpacing
+        }
+      }
+    }
+  },
+  // Soft-tinted delta chip: tint + on-soft ink, plus a tone edge that appears
+  // under high contrast when the tint collapses to the plain surface.
+  delta: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space.s1,
+    paddingHorizontal: theme.space.s2,
+    paddingVertical: theme.space.s1,
+    borderRadius: theme.radius.full,
+    borderWidth: theme.borderWidth.base,
+    variants: {
+      tone: {
+        good: { backgroundColor: theme.status.doneSoft, borderColor: theme.edge.good },
+        bad: { backgroundColor: theme.status.crashedSoft, borderColor: theme.edge.danger },
+        neutral: { backgroundColor: theme.status.pendingSoft, borderColor: theme.edge.neutral }
+      }
+    }
+  },
+  deltaText: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.semibold,
+    fontVariant: ["tabular-nums"],
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    letterSpacing: theme.type.footnote.letterSpacing,
+    variants: {
+      tone: {
+        good: { color: theme.status.doneOnSoft },
+        bad: { color: theme.status.crashedOnSoft },
+        neutral: { color: theme.status.pendingOnSoft }
+      }
+    }
+  },
+  caption: {
+    fontFamily: theme.font.sans,
+    color: theme.color.text2,
+    fontSize: theme.type.caption1.fontSize,
+    lineHeight: theme.type.caption1.lineHeight,
+    letterSpacing: theme.type.caption1.letterSpacing
+  }
+}));
+
+export { Metric };

package/dist/chunk-TKVFVF5D.js

@@ -0,0 +1,95 @@
+import 'react';
+import { Svg, Circle, Line, Rect, Polyline, Polygon, Ellipse, Path } from 'react-native-svg';
+import { icons } from '@btndprojects/loam-icons';
+import { useLoamTheme } from '@btndprojects/loam-theme-native';
+import { jsx } from 'react/jsx-runtime';
+
+// src/lib/icon.tsx
+function Icon({ name, size = 20, color, strokeWidth = 1.5 }) {
+  const theme = useLoamTheme();
+  const stroke = color ?? theme.color.text;
+  return /* @__PURE__ */ jsx(Svg, { width: size, height: size, viewBox: "0 0 24 24", fill: "none", children: icons[name].map((p, i) => {
+    if (p.t === "circle")
+      return p.fill ? /* @__PURE__ */ jsx(Circle, { cx: p.cx, cy: p.cy, r: p.r, fill: stroke }, i) : /* @__PURE__ */ jsx(Circle, { cx: p.cx, cy: p.cy, r: p.r, stroke, strokeWidth }, i);
+    if (p.t === "line")
+      return /* @__PURE__ */ jsx(
+        Line,
+        {
+          x1: p.x1,
+          y1: p.y1,
+          x2: p.x2,
+          y2: p.y2,
+          stroke,
+          strokeWidth,
+          strokeLinecap: "round"
+        },
+        i
+      );
+    if (p.t === "rect")
+      return /* @__PURE__ */ jsx(
+        Rect,
+        {
+          x: p.x,
+          y: p.y,
+          width: p.width,
+          height: p.height,
+          rx: p.rx,
+          ry: p.ry,
+          stroke,
+          strokeWidth,
+          strokeLinejoin: "round"
+        },
+        i
+      );
+    if (p.t === "polyline")
+      return /* @__PURE__ */ jsx(
+        Polyline,
+        {
+          points: p.points,
+          stroke,
+          strokeWidth,
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        },
+        i
+      );
+    if (p.t === "polygon")
+      return /* @__PURE__ */ jsx(
+        Polygon,
+        {
+          points: p.points,
+          stroke,
+          strokeWidth,
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        },
+        i
+      );
+    if (p.t === "ellipse")
+      return /* @__PURE__ */ jsx(
+        Ellipse,
+        {
+          cx: p.cx,
+          cy: p.cy,
+          rx: p.rx,
+          ry: p.ry,
+          stroke,
+          strokeWidth
+        },
+        i
+      );
+    return /* @__PURE__ */ jsx(
+      Path,
+      {
+        d: p.d,
+        stroke,
+        strokeWidth,
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      },
+      i
+    );
+  }) });
+}
+
+export { Icon };