@btndprojects/loam-ui-native 0.2.1 → 0.3.1

package/dist/chunk-EICSYRAG.js

@@ -0,0 +1,341 @@
+import { useOptionalConfirm } from './chunk-7QOYGENL.js';
+import { ListRow } from './chunk-JA6TK7H2.js';
+import { IconTile } from './chunk-XBXUBBJZ.js';
+import { Alert } from './chunk-Z7I4ZSO6.js';
+import { Button } from './chunk-5DTKORLI.js';
+import { resolveTextRole } from './chunk-L4D5LHCH.js';
+import { Badge } from './chunk-LGNTP5XA.js';
+import { Spinner } from './chunk-G7H3NX3G.js';
+import { isAndroidIdiom } from './chunk-TH4PW2WU.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import 'react';
+import { Text, View } from 'react-native';
+import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var DEFAULT_LABELS = {
+  status: {
+    disconnected: "Not connected",
+    connecting: "Connecting",
+    connected: "Connected",
+    syncing: "Syncing",
+    "needs-access": "Needs access",
+    error: "Error"
+  },
+  account: "Account",
+  lastSync: "Last sync",
+  syncingNow: "Syncing now\u2026",
+  manage: "Manage",
+  connect: "Connect",
+  reconnect: "Reconnect",
+  reviewAccess: "Review access",
+  cancel: "Cancel",
+  disconnect: "Disconnect",
+  more: "More actions",
+  waitingFor: (name) => `Waiting for ${name}\u2026`,
+  errorBody: "Access expired. Reconnect to resume syncing.",
+  needsAccessBody: "Some access was removed. Review it to keep everything working.",
+  confirmTitle: (name) => `Disconnect ${name}?`,
+  confirmBody: "Syncing stops. Data already imported stays.",
+  value: {
+    connected: "Connected",
+    syncing: "Syncing",
+    connecting: "Connecting",
+    error: "Reconnect",
+    "needs-access": "Review access",
+    disconnected: "Connect"
+  },
+  line: (status, lastSync) => ({
+    connected: lastSync ? `Connected \xB7 synced ${lastSync}` : "Connected",
+    syncing: "Syncing now\u2026",
+    connecting: "Connecting\u2026",
+    error: "Access expired \xB7 tap to reconnect",
+    "needs-access": "Needs access \xB7 tap to review",
+    disconnected: "Not connected \xB7 tap to connect"
+  })[status]
+};
+function ConnectionCard({
+  name,
+  icon = "link",
+  status,
+  lastSync,
+  onPress,
+  divider,
+  platform,
+  labels: labelsProp,
+  density,
+  selected,
+  disabled,
+  trailing,
+  variant = "row",
+  description,
+  account,
+  error,
+  loading,
+  onConnect,
+  onCancel,
+  onReconnect,
+  onManage,
+  onMore,
+  onDisconnect
+}) {
+  const labels = useLabels("connectionCard", DEFAULT_LABELS, labelsProp);
+  const theme = useLoamTheme("connection-card");
+  const android = isAndroidIdiom(theme, platform);
+  if (variant === "card") {
+    return /* @__PURE__ */ jsx(
+      CardForm,
+      {
+        name,
+        icon,
+        status,
+        lastSync,
+        description,
+        account,
+        error,
+        loading,
+        labels,
+        android,
+        disabled,
+        onConnect,
+        onCancel,
+        onReconnect,
+        onManage,
+        onMore,
+        onDisconnect
+      }
+    );
+  }
+  const tone = status === "error" ? theme.color.dangerOnSoft : status === "needs-access" ? theme.color.warnOnSoft : status === "disconnected" && !android ? theme.color.accentStrong : theme.color.text2;
+  const leading = typeof icon === "string" ? /* @__PURE__ */ jsx(
+    IconTile,
+    {
+      icon,
+      size: android ? "md" : "sm",
+      glyphSize: android ? theme.icon.md : void 0
+    }
+  ) : icon;
+  if (android) {
+    const text = labels.line(status, lastSync);
+    return /* @__PURE__ */ jsx(
+      ListRow,
+      {
+        platform: "android",
+        title: name,
+        subtitle: /* @__PURE__ */ jsx(
+          Text,
+          {
+            numberOfLines: 1,
+            style: [
+              { fontFamily: theme.font.sans },
+              resolveTextRole(theme, "bodyMedium", true),
+              { color: tone }
+            ],
+            children: text
+          }
+        ),
+        leading,
+        onPress,
+        divider,
+        density,
+        selected,
+        disabled,
+        trailing,
+        accessibilityLabel: `${name}, ${text}`
+      }
+    );
+  }
+  const value = labels.value[status];
+  return /* @__PURE__ */ jsx(
+    ListRow,
+    {
+      platform: "ios",
+      title: name,
+      leading,
+      trailing: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          Text,
+          {
+            numberOfLines: 1,
+            style: [
+              { fontFamily: theme.font.sans },
+              resolveTextRole(theme, "body", false),
+              { color: tone }
+            ],
+            children: value
+          }
+        ),
+        trailing
+      ] }),
+      chevron: true,
+      onPress,
+      divider,
+      density,
+      selected,
+      disabled,
+      accessibilityLabel: `${name}, ${value}`
+    }
+  );
+}
+var BADGE_TONE = {
+  connected: "good",
+  syncing: "accent",
+  error: "danger",
+  disconnected: "neutral",
+  connecting: "neutral",
+  "needs-access": "warn"
+};
+function CardForm({
+  name,
+  icon = "link",
+  status,
+  lastSync,
+  description,
+  account,
+  error,
+  loading,
+  disabled,
+  labels,
+  android,
+  onConnect,
+  onCancel,
+  onReconnect,
+  onManage,
+  onMore,
+  onDisconnect
+}) {
+  const theme = useLoamTheme("connection-card");
+  const { styles } = useStyles(sheet);
+  const confirmApi = useOptionalConfirm();
+  const word = labels.status[status];
+  const platform = android ? "android" : "ios";
+  const busy = loading || status === "connecting";
+  const disconnect = async () => {
+    if (!onDisconnect) return;
+    const ok = confirmApi ? await confirmApi.confirm({
+      title: labels.confirmTitle(name),
+      body: labels.confirmBody,
+      tone: "danger",
+      confirmLabel: labels.disconnect
+    }) : true;
+    if (ok) onDisconnect();
+  };
+  const more = onMore ? /* @__PURE__ */ jsx(
+    Button,
+    {
+      variant: "ghost",
+      leadingIcon: "more-horizontal",
+      accessibilityLabel: labels.more,
+      onPress: onMore,
+      disabled
+    }
+  ) : null;
+  const manage = /* @__PURE__ */ jsx(Button, { variant: "outline", onPress: onManage, disabled, children: labels.manage });
+  const actions = {
+    connected: /* @__PURE__ */ jsxs(Fragment, { children: [
+      manage,
+      more
+    ] }),
+    syncing: /* @__PURE__ */ jsxs(Fragment, { children: [
+      manage,
+      more
+    ] }),
+    error: /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Button, { variant: "primary", onPress: onReconnect, disabled, children: labels.reconnect }),
+      more
+    ] }),
+    disconnected: /* @__PURE__ */ jsx(Button, { variant: "primary", onPress: onConnect, loading: busy, disabled, children: labels.connect }),
+    connecting: /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Button, { variant: "primary", loading: true, disabled, children: labels.waitingFor(name) }),
+      /* @__PURE__ */ jsx(Button, { variant: "ghost", onPress: onCancel, disabled, children: labels.cancel })
+    ] }),
+    "needs-access": /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Button, { variant: "primary", onPress: onReconnect, disabled, children: labels.reviewAccess }),
+      more
+    ] })
+  };
+  const showMeta = status !== "disconnected" && status !== "connecting";
+  const syncing = status === "syncing";
+  const alertTone = status === "error" ? "danger" : "warn";
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      style: [styles.card, disabled && styles.disabled],
+      accessibilityLabel: `${name}, ${word}`,
+      accessibilityState: { disabled: !!disabled, busy },
+      children: [
+        /* @__PURE__ */ jsxs(View, { style: styles.header, children: [
+          typeof icon === "string" ? /* @__PURE__ */ jsx(IconTile, { icon, size: "lg", glyphSize: theme.icon.md }) : icon,
+          /* @__PURE__ */ jsxs(View, { style: styles.titles, children: [
+            /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles.name, children: name }),
+            description ? /* @__PURE__ */ jsx(Text, { numberOfLines: 2, style: styles.description, children: description }) : null
+          ] }),
+          /* @__PURE__ */ jsx(Badge, { variant: BADGE_TONE[status], size: "sm", dot: !syncing, children: word })
+        ] }),
+        showMeta && (account || lastSync || syncing) ? /* @__PURE__ */ jsxs(View, { style: styles.meta, children: [
+          account ? /* @__PURE__ */ jsxs(View, { style: styles.metaRow, children: [
+            /* @__PURE__ */ jsx(Text, { style: styles.metaKey, children: labels.account }),
+            /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles.metaValue, children: account })
+          ] }) : null,
+          lastSync || syncing ? /* @__PURE__ */ jsxs(View, { style: styles.metaRow, children: [
+            /* @__PURE__ */ jsx(Text, { style: styles.metaKey, children: labels.lastSync }),
+            syncing ? /* @__PURE__ */ jsx(Spinner, { size: "sm", platform, accessibilityLabel: word }) : null,
+            /* @__PURE__ */ jsx(Text, { style: styles.metaValue, children: syncing ? labels.syncingNow : lastSync })
+          ] }) : null
+        ] }) : null,
+        status === "error" || status === "needs-access" ? /* @__PURE__ */ jsx(
+          Alert,
+          {
+            size: "compact",
+            tone: alertTone,
+            platform,
+            title: error ?? (status === "error" ? labels.errorBody : labels.needsAccessBody)
+          }
+        ) : null,
+        /* @__PURE__ */ jsx(View, { style: styles.actions, children: actions[status] }),
+        onDisconnect && status !== "disconnected" && status !== "connecting" ? /* @__PURE__ */ jsx(Button, { variant: "danger", size: "sm", onPress: () => void disconnect(), disabled, children: labels.disconnect }) : null
+      ]
+    }
+  );
+}
+var sheet = createStyleSheet((theme) => ({
+  card: {
+    gap: theme.space.s4,
+    padding: theme.space.s4,
+    backgroundColor: theme.color.surface,
+    borderRadius: theme.radius.lg,
+    borderWidth: theme.card.borderWidth,
+    borderColor: theme.card.borderColor,
+    ...theme.card.shadow
+  },
+  disabled: { opacity: theme.opacity[64] },
+  header: { flexDirection: "row", alignItems: "flex-start", gap: theme.space.s3 },
+  titles: { flex: 1, minWidth: 0, gap: theme.space.s1 },
+  name: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[16],
+    fontWeight: theme.fontWeight.bold,
+    color: theme.color.text
+  },
+  description: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[13],
+    color: theme.color.text2
+  },
+  meta: { gap: theme.space.s1 },
+  metaRow: { flexDirection: "row", alignItems: "center", gap: theme.space.s3 },
+  metaKey: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[13],
+    color: theme.color.text2
+  },
+  metaValue: {
+    flexShrink: 1,
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[13],
+    color: theme.color.text
+  },
+  actions: { flexDirection: "row", flexWrap: "wrap", alignItems: "center", gap: theme.space.s2 }
+}));
+
+export { ConnectionCard };

package/dist/chunk-EMWAJMAS.js

@@ -0,0 +1,83 @@
+import 'react';
+import { ScrollView, Platform, View, KeyboardAvoidingView } from 'react-native';
+import { useLoamTheme } from '@btndprojects/loam-theme-native';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+// src/screen/screen.tsx
+function Screen({
+  children,
+  background = "bg",
+  insets,
+  padding = 16,
+  scroll = true,
+  keyboard = true,
+  header,
+  footer,
+  style,
+  testID,
+  orientation = "vertical",
+  align = "start",
+  size
+}) {
+  const theme = useLoamTheme("screen");
+  const pad = padding === 0 ? 0 : theme.space[padding];
+  const top = insets?.top ?? 0;
+  const bottom = insets?.bottom ?? 0;
+  const bodyPad = {
+    padding: pad,
+    ...orientation === "horizontal" ? { flexDirection: "row" } : null,
+    ...align === "start" ? null : { justifyContent: align === "center" ? "center" : "flex-end" },
+    ...size ? {
+      width: "100%",
+      alignSelf: "center",
+      maxWidth: { sm: theme.panel.sm, md: theme.panel.lg, lg: theme.panel.xl }[size]
+    } : null
+  };
+  const body = scroll ? /* @__PURE__ */ jsx(
+    ScrollView,
+    {
+      style: { flex: 1 },
+      contentContainerStyle: [bodyPad, { flexGrow: 1 }],
+      keyboardShouldPersistTaps: "handled",
+      keyboardDismissMode: Platform.OS === "ios" ? "interactive" : "on-drag",
+      children
+    }
+  ) : /* @__PURE__ */ jsx(View, { style: [{ flex: 1 }, bodyPad], children });
+  const frame = /* @__PURE__ */ jsxs(Fragment, { children: [
+    header,
+    body,
+    footer ? /* @__PURE__ */ jsx(
+      View,
+      {
+        style: {
+          paddingHorizontal: pad || theme.space[16],
+          paddingTop: theme.space[8],
+          paddingBottom: Math.max(bottom, theme.space[16])
+        },
+        children: footer
+      }
+    ) : null
+  ] });
+  const outer = [
+    {
+      flex: 1,
+      paddingTop: top,
+      paddingBottom: footer ? 0 : bottom,
+      paddingStart: insets?.left ?? 0,
+      paddingEnd: insets?.right ?? 0,
+      backgroundColor: background === "grouped" ? theme.color.surface2 : theme.color.bg
+    },
+    style
+  ];
+  return keyboard && Platform.OS !== "web" ? /* @__PURE__ */ jsx(
+    KeyboardAvoidingView,
+    {
+      testID,
+      behavior: Platform.OS === "ios" ? "padding" : void 0,
+      style: outer,
+      children: frame
+    }
+  ) : /* @__PURE__ */ jsx(View, { testID, style: outer, children: frame });
+}
+
+export { Screen };

package/dist/chunk-EOLZWRV6.js

@@ -0,0 +1,149 @@
+import { Text } from './chunk-L4D5LHCH.js';
+import { announce } from './chunk-W23G6JLF.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-PCEFCOLN.js';
+import { useResolvedMotion } from './chunk-J64KGCGX.js';
+import * as React from 'react';
+import { View } from 'react-native';
+import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var DEFAULT_LABELS = {
+  level: (percent) => `Input level, ${percent}%`,
+  tooLoud: "Too loud",
+  noInput: "No input",
+  muted: "Muted"
+};
+var LEVEL_METER_SEGMENTS = 12;
+var SAMPLE_MS = 80;
+var REDUCED_MS = 250;
+var NOISE_FLOOR = 0.02;
+var DEFAULT_BARS = { 16: 12, 24: 24, 36: 32 };
+var clamp = (v) => Number.isFinite(v) ? Math.min(1, Math.max(0, v)) : 0;
+function LevelMeter({
+  level,
+  variant = "history",
+  size = 24,
+  bars: barsProp,
+  muted = false,
+  silentAfter = 3e3,
+  clipAt = 0.9,
+  showStatus = true,
+  motion,
+  labels: labelsProp,
+  style,
+  testID
+}) {
+  const theme = useLoamTheme();
+  const { styles: s } = useStyles(sheet);
+  const labels = useLabels("levelMeter", DEFAULT_LABELS, labelsProp);
+  const reduced = useResolvedMotion(motion) !== "full";
+  const bars = Math.max(1, Math.round(barsProp ?? DEFAULT_BARS[size]));
+  const value = clamp(level);
+  const latest = React.useRef(value);
+  latest.current = value;
+  const [samples, setSamples] = React.useState(() => Array(bars).fill(0));
+  const [throttled, setThrottled] = React.useState(value);
+  const [quiet, setQuiet] = React.useState(false);
+  const lastSound = React.useRef(Date.now());
+  React.useEffect(() => {
+    setSamples(
+      (prev) => prev.length === bars ? prev : [...Array(Math.max(0, bars - prev.length)).fill(0), ...prev].slice(-bars)
+    );
+  }, [bars]);
+  React.useEffect(() => {
+    if (muted) return void 0;
+    lastSound.current = Date.now();
+    setQuiet(false);
+    const id = setInterval(
+      () => {
+        const v = latest.current;
+        const now = Date.now();
+        if (v > NOISE_FLOOR) lastSound.current = now;
+        setQuiet(now - lastSound.current >= silentAfter);
+        if (reduced) setThrottled(v);
+        else setSamples((prev) => [...prev.slice(1), v]);
+      },
+      reduced ? REDUCED_MS : SAMPLE_MS
+    );
+    return () => clearInterval(id);
+  }, [muted, reduced, silentAfter]);
+  const shown = reduced ? throttled : value;
+  const silent = !muted && quiet && value <= NOISE_FLOOR;
+  const clipping = !muted && !silent && shown >= clipAt;
+  const status = muted ? "muted" : silent ? "silent" : clipping ? "clipping" : "live";
+  const width = bars * 4 - 2;
+  const meter = variant === "level";
+  React.useEffect(() => {
+    if (!meter) return;
+    if (status === "clipping") announce(labels.tooLoud);
+    else if (status === "silent") announce(labels.noInput);
+  }, [meter, status, labels.tooLoud, labels.noInput]);
+  const word = status === "muted" ? labels.muted : status === "silent" ? labels.noInput : status === "clipping" ? labels.tooLoud : "";
+  let drawing;
+  if (status === "muted") {
+    drawing = /* @__PURE__ */ jsxs(View, { style: s.row, children: [
+      /* @__PURE__ */ jsx(Icon, { name: "mic-off", size: 16, color: theme.color.text2 }),
+      /* @__PURE__ */ jsx(View, { testID: "level-meter-muted", style: [s.dashed, { width }] })
+    ] });
+  } else if (status === "silent") {
+    drawing = /* @__PURE__ */ jsx(View, { testID: "level-meter-silent", style: [s.flat, { width }] });
+  } else if (meter) {
+    const lit = Math.round(shown * LEVEL_METER_SEGMENTS);
+    drawing = /* @__PURE__ */ jsx(View, { style: s.bars, children: Array.from({ length: LEVEL_METER_SEGMENTS }, (_, i) => {
+      const warn = clipping && i >= LEVEL_METER_SEGMENTS - 2;
+      return /* @__PURE__ */ jsx(
+        View,
+        {
+          testID: warn ? "level-meter-warn" : i < lit ? "level-meter-lit" : void 0,
+          style: [
+            s.segment,
+            { height: size },
+            warn ? s.warn : i < lit ? s.on : s.off
+          ]
+        },
+        i
+      );
+    }) });
+  } else if (reduced) {
+    drawing = /* @__PURE__ */ jsx(View, { testID: "level-meter-reduced", style: [s.track, { width }], children: /* @__PURE__ */ jsx(View, { style: [s.fill, { width: `${Math.round(shown * 100)}%` }] }) });
+  } else {
+    drawing = /* @__PURE__ */ jsx(View, { testID: "level-meter-history", style: [s.bars, { height: size }], children: samples.map((v, i) => /* @__PURE__ */ jsx(View, { style: [s.bar, { height: Math.max(2, Math.round(v * size)) }] }, i)) });
+  }
+  const percent = muted ? 0 : Math.round(shown * 100);
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      testID,
+      style: [s.root, { height: size }, style],
+      ...meter ? {
+        accessible: true,
+        accessibilityRole: "progressbar",
+        accessibilityLabel: word ? `${labels.level(percent)}, ${word}` : labels.level(percent)
+      } : { accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants" },
+      children: [
+        drawing,
+        showStatus && word ? /* @__PURE__ */ jsx(Text, { variant: "caption1", style: clipping ? s.wordWarn : s.word, children: word }) : null
+      ]
+    }
+  );
+}
+var sheet = createStyleSheet((theme) => ({
+  root: { flexDirection: "row", alignItems: "center", gap: theme.space.s2 },
+  row: { flexDirection: "row", alignItems: "center", gap: theme.space[6] },
+  bars: { flexDirection: "row", alignItems: "center", gap: theme.space[2] },
+  bar: { width: theme.space[2], borderRadius: 1, backgroundColor: theme.color.text2 },
+  segment: { width: theme.space[6], borderRadius: theme.radius[2] },
+  on: { backgroundColor: theme.color.text2 },
+  off: { backgroundColor: theme.color.border },
+  warn: { backgroundColor: theme.color.warn },
+  // A zero-height box with a dashed edge: RN draws dashes only on a full border.
+  dashed: { height: 0, borderWidth: 1, borderStyle: "dashed", borderColor: theme.color.borderStrong },
+  flat: { height: theme.space[2], borderRadius: 1, backgroundColor: theme.color.text3 },
+  track: { height: theme.space[4], borderRadius: theme.radius[2], overflow: "hidden", backgroundColor: theme.color.border },
+  fill: { height: theme.space[4], borderRadius: theme.radius[2], backgroundColor: theme.color.text2 },
+  word: { color: theme.color.text2, fontWeight: theme.fontWeight.medium },
+  wordWarn: { color: theme.color.warnOnSoft, fontWeight: theme.fontWeight.medium }
+}));
+
+export { LEVEL_METER_SEGMENTS, LevelMeter };