@btndprojects/loam-ui-native 0.2.1 → 0.3.1

package/dist/chunk-UQGBTPXH.js

@@ -1,218 +0,0 @@
-import { useLabels } from './chunk-APCWFOZW.js';
-import { Icon } from './chunk-UXGIW7OK.js';
-import { useResolvedMotion, springConfig } from './chunk-J64KGCGX.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 DEFAULT_LABELS = {
-  offline: (queued) => `Offline \xB7 ${queued} change${queued === 1 ? "" : "s"} queued`,
-  syncing: "Back online \xB7 syncing",
-  synced: "All changes synced",
-  retry: "RETRY",
-  badgeQueued: "Queued \u2014 waiting for a connection",
-  badgeSyncing: "Syncing",
-  badgeSynced: "Synced",
-  badgeFailed: "Failed to sync"
-};
-function statusMeta(status, queued, labels) {
-  switch (status) {
-    case "offline":
-      return { icon: "wifi-off", label: labels.offline(queued) };
-    case "syncing":
-      return { icon: "refresh", label: labels.syncing };
-    default:
-      return { icon: "check-circle", label: labels.synced };
-  }
-}
-function ConnectivityBanner({
-  status,
-  queuedCount = 0,
-  onRetry,
-  message,
-  motion = "full",
-  labels: labelsProp
-}) {
-  const labels = useLabels("connectivity", DEFAULT_LABELS, labelsProp);
-  const { styles } = useStyles(sheet, { status });
-  const theme = useLoamTheme("connectivity");
-  const level = useResolvedMotion(motion, "connectivity");
-  const enter = React.useRef(new Animated.Value(level === "full" ? 0 : 1)).current;
-  const first = React.useRef(true);
-  React.useEffect(() => {
-    if (level !== "full") {
-      enter.setValue(1);
-      return;
-    }
-    enter.setValue(first.current ? 0 : 0.6);
-    first.current = false;
-    const run = Animated.spring(enter, {
-      ...springConfig(theme, "ds"),
-      toValue: 1,
-      useNativeDriver: true
-    });
-    run.start();
-    return () => run.stop();
-  }, [status, level, enter, theme]);
-  const dim = React.useRef(new Animated.Value(1)).current;
-  React.useEffect(() => {
-    if (status !== "syncing" || level !== "full" || theme.reduceMotion) {
-      dim.setValue(1);
-      return;
-    }
-    const half = theme.loop.pulse / 2;
-    const easing = Easing.bezier(...theme.easing.inOut);
-    const loop = Animated.loop(
-      Animated.sequence([
-        Animated.timing(dim, { toValue: 0.4, duration: half, easing, useNativeDriver: true }),
-        Animated.timing(dim, { toValue: 1, duration: half, easing, useNativeDriver: true })
-      ])
-    );
-    loop.start();
-    return () => loop.stop();
-  }, [status, level, theme.reduceMotion, theme.loop.pulse, theme.easing.inOut, dim]);
-  const meta = statusMeta(status, queuedCount, labels);
-  const fg = status === "offline" ? (
-    // The offline banner rests on `surface3`, where neutral `text2` measures
-    // only 4.4:1 (WCAG fail); primary `text` clears 4.5:1.
-    theme.color.text
-  ) : status === "syncing" ? theme.color.warnOnSoft : theme.color.goodOnSoft;
-  return /* @__PURE__ */ jsx(
-    Pressable,
-    {
-      accessibilityRole: onRetry ? "button" : "text",
-      accessibilityLabel: message ?? meta.label,
-      accessibilityState: onRetry ? {} : { disabled: true },
-      onPress: onRetry,
-      style: ({ pressed }) => [styles.banner, pressed && onRetry ? styles.pressed : null],
-      children: /* @__PURE__ */ jsxs(
-        Animated.View,
-        {
-          style: [
-            styles.slide,
-            {
-              opacity: enter,
-              transform: [
-                {
-                  translateY: enter.interpolate({
-                    inputRange: [0, 1],
-                    outputRange: [-theme.space[10], 0]
-                  })
-                }
-              ]
-            }
-          ],
-          children: [
-            /* @__PURE__ */ jsx(Animated.View, { style: { opacity: dim }, children: /* @__PURE__ */ jsx(Icon, { name: meta.icon, size: 15, color: fg }) }),
-            /* @__PURE__ */ jsx(Text, { style: [styles.label, { color: fg }], numberOfLines: 1, ellipsizeMode: "tail", children: message ?? meta.label }),
-            status === "offline" && onRetry ? /* @__PURE__ */ jsx(Text, { style: styles.retry, children: labels.retry }) : null
-          ]
-        }
-      )
-    }
-  );
-}
-var SYNC_ICON = {
-  queued: "refresh",
-  syncing: "refresh",
-  synced: "check",
-  failed: "alert-circle"
-};
-function SyncBadge({
-  state,
-  accessibilityLabel,
-  size = 26,
-  labels: labelsProp
-}) {
-  const labels = useLabels("connectivity", DEFAULT_LABELS, labelsProp);
-  const { styles } = useStyles(sheet, { state });
-  const theme = useLoamTheme("connectivity");
-  const meta = {
-    icon: SYNC_ICON[state],
-    label: {
-      queued: labels.badgeQueued,
-      syncing: labels.badgeSyncing,
-      synced: labels.badgeSynced,
-      failed: labels.badgeFailed
-    }[state]
-  };
-  const fg = state === "synced" ? theme.color.goodOnSoft : state === "failed" ? theme.color.dangerOnSoft : theme.color.warnOnSoft;
-  return /* @__PURE__ */ jsx(
-    View,
-    {
-      accessibilityRole: "image",
-      accessibilityLabel: accessibilityLabel ?? meta.label,
-      style: [styles.badge, { width: size, height: size }],
-      children: /* @__PURE__ */ jsx(Icon, { name: meta.icon, size: Math.round(size * 0.54), color: fg })
-    }
-  );
-}
-var sheet = createStyleSheet((theme) => ({
-  banner: {
-    flexDirection: "row",
-    alignItems: "center",
-    paddingVertical: theme.space[10],
-    paddingHorizontal: theme.space.s4,
-    borderBottomWidth: theme.borderWidth.base,
-    variants: {
-      status: {
-        offline: {
-          backgroundColor: theme.color.surface3,
-          borderBottomColor: theme.color.border
-        },
-        syncing: {
-          backgroundColor: theme.color.warnSoft,
-          borderBottomColor: theme.edge.warn
-        },
-        online: {
-          backgroundColor: theme.color.goodSoft,
-          borderBottomColor: theme.edge.good
-        }
-      },
-      state: {}
-    }
-  },
-  slide: {
-    flex: 1,
-    flexDirection: "row",
-    alignItems: "center",
-    gap: theme.space[9],
-    variants: { status: {}, state: {} }
-  },
-  // `minWidth: 0` lets the copy truncate rather than push `RETRY` off the edge.
-  label: {
-    flex: 1,
-    minWidth: 0,
-    fontFamily: theme.font.sans,
-    fontWeight: theme.fontWeight.semibold,
-    fontSize: theme.type.caption1.fontSize,
-    variants: { status: {}, state: {} }
-  },
-  retry: {
-    fontFamily: theme.font.mono,
-    fontSize: theme.fontSize[10],
-    // Shown only on the offline banner's `surface3` fill, where `text3` is
-    // 4.16:1 (WCAG fail); primary `text` clears 4.5:1.
-    color: theme.color.text,
-    variants: { status: {}, state: {} }
-  },
-  badge: {
-    alignItems: "center",
-    justifyContent: "center",
-    borderRadius: theme.radius.full,
-    borderWidth: theme.borderWidth.base,
-    variants: {
-      state: {
-        queued: { backgroundColor: theme.color.warnSoft, borderColor: theme.edge.warn },
-        syncing: { backgroundColor: theme.color.warnSoft, borderColor: theme.edge.warn },
-        synced: { backgroundColor: theme.color.goodSoft, borderColor: theme.edge.good },
-        failed: { backgroundColor: theme.color.dangerSoft, borderColor: theme.edge.danger }
-      },
-      status: {}
-    }
-  },
-  pressed: { opacity: theme.state.pressedOpacity }
-}));
-
-export { ConnectivityBanner, SyncBadge };

package/dist/chunk-UYGDJWMN.js

@@ -1,273 +0,0 @@
-import { Progress } from './chunk-5UTRIXQ6.js';
-import { Button } from './chunk-E2E3I5W2.js';
-import { useLabels } from './chunk-APCWFOZW.js';
-import { Icon } from './chunk-UXGIW7OK.js';
-import * as React from 'react';
-import { View, Text, Animated, Easing } from 'react-native';
-import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
-var DEFAULT_LABELS = {
-  hint: "PNG, JPG or PDF \xB7 up to 25 MB each",
-  camera: "Camera",
-  library: "Library",
-  permissionTitle: "Permission needed",
-  permissionBody: "Allow camera and photo access in Settings to upload.",
-  openSettings: "Open settings",
-  done: "Done",
-  failed: "Failed",
-  queued: "Queued",
-  progressRemaining: (percent2, remaining) => `${percent2}% \xB7 ${remaining}`,
-  phraseDone: (size) => size ? `uploaded, ${size}` : "uploaded",
-  phraseFailed: (error) => error ? `upload failed, ${error}` : "upload failed",
-  phraseQueued: "queued",
-  phraseUploading: (percent2) => `uploading, ${percent2} percent`,
-  uploading: (name) => `Uploading ${name}`,
-  retry: (name) => `Retry ${name}`,
-  remove: (name) => `Remove ${name}`
-};
-function clamp(n, lo, hi) {
-  return Math.max(lo, Math.min(hi, n));
-}
-function percent(progress) {
-  return Math.round(clamp(progress ?? 0, 0, 1) * 100);
-}
-function statusLabel(file, labels) {
-  switch (file.status) {
-    case "done":
-      return [file.fileType, file.size].filter(Boolean).join(" \xB7 ") || labels.done;
-    case "error":
-      return labels.failed;
-    case "queued":
-      return labels.queued;
-    default:
-      return file.remaining ? labels.progressRemaining(percent(file.progress), file.remaining) : `${percent(file.progress)}%`;
-  }
-}
-function statusPhrase(file, labels) {
-  switch (file.status) {
-    case "done":
-      return labels.phraseDone(file.size);
-    case "error":
-      return labels.phraseFailed(file.error);
-    case "queued":
-      return labels.phraseQueued;
-    default:
-      return labels.phraseUploading(percent(file.progress));
-  }
-}
-function FileUploadRow({ file, onRetry, onRemove, motion, labels }) {
-  const theme = useLoamTheme("file-upload");
-  const { styles } = useStyles(sheet);
-  const isError = file.status === "error";
-  const isDone = file.status === "done";
-  const isUploading = file.status === "uploading";
-  const anim = React.useRef(new Animated.Value(motion === "none" ? 1 : 0)).current;
-  React.useEffect(() => {
-    if (motion === "none") return;
-    Animated.timing(anim, {
-      toValue: 1,
-      duration: theme.motion.enter.duration,
-      easing: Easing.bezier(...theme.motion.enter.easing),
-      useNativeDriver: true
-    }).start();
-  }, []);
-  const animatedStyle = motion === "none" ? null : {
-    opacity: anim,
-    ...motion === "full" ? {
-      transform: [
-        { translateY: anim.interpolate({ inputRange: [0, 1], outputRange: [theme.space.s2, 0] }) }
-      ]
-    } : {}
-  };
-  const chipBg = isError ? theme.color.dangerSoft : theme.color.surface2;
-  const chipFg = isError ? theme.color.dangerOnSoft : theme.color.text2;
-  return /* @__PURE__ */ jsxs(Animated.View, { style: [styles.row, animatedStyle], children: [
-    /* @__PURE__ */ jsx(
-      View,
-      {
-        style: [
-          styles.chip,
-          { backgroundColor: chipBg },
-          // Soft tints collapse to the plain surface at high contrast; carry the
-          // meaning to an edge outline instead.
-          isError ? { borderWidth: theme.borderWidth.base, borderColor: theme.edge.danger } : null
-        ],
-        children: /* @__PURE__ */ jsx(Icon, { name: "filedoc", size: theme.icon.md, color: chipFg })
-      }
-    ),
-    /* @__PURE__ */ jsxs(View, { style: styles.main, children: [
-      /* @__PURE__ */ jsxs(View, { style: styles.line, children: [
-        /* @__PURE__ */ jsx(
-          Text,
-          {
-            numberOfLines: 1,
-            accessibilityLabel: `${file.name}, ${statusPhrase(file, labels)}`,
-            style: styles.name,
-            children: file.name
-          }
-        ),
-        /* @__PURE__ */ jsx(Text, { style: [styles.status, { color: isError ? theme.color.danger : theme.color.text2 }], children: statusLabel(file, labels) })
-      ] }),
-      isError && file.error ? /* @__PURE__ */ jsx(Text, { style: [styles.status, { color: theme.color.danger }], children: file.error }) : null,
-      isUploading ? /* @__PURE__ */ jsx(
-        Progress,
-        {
-          size: "sm",
-          value: percent(file.progress),
-          accessibilityLabel: labels.uploading(file.name)
-        }
-      ) : null
-    ] }),
-    isDone ? /* @__PURE__ */ jsx(View, { style: styles.check, children: /* @__PURE__ */ jsx(Icon, { name: "check-circle", size: theme.icon.md, color: theme.color.good }) }) : isError ? /* @__PURE__ */ jsx(
-      Button,
-      {
-        variant: "ghost",
-        size: "sm",
-        leadingIcon: "refresh",
-        accessibilityLabel: labels.retry(file.name),
-        onPress: onRetry ? () => onRetry(file.id) : void 0
-      }
-    ) : /* @__PURE__ */ jsx(
-      Button,
-      {
-        variant: "ghost",
-        size: "sm",
-        leadingIcon: "x",
-        accessibilityLabel: labels.remove(file.name),
-        onPress: onRemove ? () => onRemove(file.id) : void 0
-      }
-    )
-  ] });
-}
-function FileUpload({
-  files,
-  onPickCamera,
-  onPickLibrary,
-  onRetry,
-  onRemove,
-  permissionState = "granted",
-  onOpenSettings,
-  accept: _accept,
-  hint: hintProp,
-  motion = "reduced",
-  labels: labelsProp
-}) {
-  const theme = useLoamTheme("file-upload");
-  const { styles } = useStyles(sheet);
-  const labels = useLabels("fileUpload", DEFAULT_LABELS, labelsProp);
-  const hint = hintProp ?? labels.hint;
-  const denied = permissionState === "denied";
-  return /* @__PURE__ */ jsxs(View, { style: styles.rootWrap, children: [
-    denied ? /* @__PURE__ */ jsxs(View, { style: styles.denied, children: [
-      /* @__PURE__ */ jsxs(View, { style: styles.deniedHead, children: [
-        /* @__PURE__ */ jsx(Icon, { name: "lock", size: theme.icon.md, color: theme.color.warnOnSoft }),
-        /* @__PURE__ */ jsxs(View, { style: styles.main, children: [
-          /* @__PURE__ */ jsx(Text, { style: [styles.deniedTitle, { color: theme.color.warnOnSoft }], children: labels.permissionTitle }),
-          /* @__PURE__ */ jsx(Text, { style: [styles.deniedBody, { color: theme.color.warnOnSoft }], children: labels.permissionBody })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsx(
-        Button,
-        {
-          variant: "outline",
-          size: "sm",
-          leadingIcon: "settings",
-          accessibilityLabel: labels.openSettings,
-          onPress: onOpenSettings,
-          children: labels.openSettings
-        }
-      )
-    ] }) : /* @__PURE__ */ jsxs(View, { style: styles.entry, children: [
-      /* @__PURE__ */ jsxs(View, { style: styles.actions, children: [
-        /* @__PURE__ */ jsx(View, { style: styles.actionItem, children: /* @__PURE__ */ jsx(Button, { variant: "outline", leadingIcon: "maximize", fullWidth: true, onPress: onPickCamera, children: labels.camera }) }),
-        /* @__PURE__ */ jsx(View, { style: styles.actionItem, children: /* @__PURE__ */ jsx(Button, { variant: "outline", leadingIcon: "image", fullWidth: true, onPress: onPickLibrary, children: labels.library }) })
-      ] }),
-      hint ? /* @__PURE__ */ jsx(Text, { style: styles.hint, children: hint }) : null
-    ] }),
-    files.length > 0 ? /* @__PURE__ */ jsx(View, { style: styles.list, children: files.map((file) => /* @__PURE__ */ jsx(
-      FileUploadRow,
-      {
-        file,
-        onRetry,
-        onRemove,
-        motion,
-        labels
-      },
-      file.id
-    )) }) : null
-  ] });
-}
-var sheet = createStyleSheet((theme) => ({
-  rootWrap: { alignSelf: "stretch", gap: theme.space.s4 },
-  entry: { gap: theme.space.s2 },
-  actions: { flexDirection: "row", gap: theme.space.s3 },
-  actionItem: { flex: 1 },
-  hint: {
-    fontFamily: theme.font.sans,
-    fontSize: theme.type.footnote.fontSize,
-    lineHeight: theme.type.footnote.lineHeight,
-    letterSpacing: theme.type.footnote.letterSpacing,
-    color: theme.color.text2
-  },
-  denied: {
-    gap: theme.space.s3,
-    padding: theme.space.s4,
-    borderRadius: theme.radius.lg,
-    backgroundColor: theme.color.warnSoft,
-    borderWidth: theme.borderWidth.base,
-    borderColor: theme.edge.warn
-  },
-  deniedHead: { flexDirection: "row", alignItems: "flex-start", gap: theme.space.s3 },
-  deniedTitle: {
-    fontFamily: theme.font.sans,
-    fontWeight: theme.fontWeight.bold,
-    fontSize: theme.type.subheadline.fontSize,
-    lineHeight: theme.type.subheadline.lineHeight,
-    letterSpacing: theme.type.subheadline.letterSpacing
-  },
-  deniedBody: {
-    fontFamily: theme.font.sans,
-    fontSize: theme.type.footnote.fontSize,
-    lineHeight: theme.type.footnote.lineHeight,
-    letterSpacing: theme.type.footnote.letterSpacing
-  },
-  list: { alignSelf: "stretch", gap: theme.space.s2 },
-  row: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: theme.space.s3,
-    padding: theme.space.s3,
-    borderRadius: theme.radius.md,
-    borderWidth: theme.borderWidth.base,
-    borderColor: theme.color.border,
-    backgroundColor: theme.color.surface
-  },
-  chip: {
-    width: theme.ctl.md,
-    height: theme.ctl.md,
-    borderRadius: theme.ctl.r.sm,
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  main: { flex: 1, minWidth: 0, gap: theme.space.s1 },
-  line: { flexDirection: "row", alignItems: "center", gap: theme.space.s2 },
-  name: {
-    flex: 1,
-    minWidth: 0,
-    fontFamily: theme.font.sans,
-    fontSize: theme.type.subheadline.fontSize,
-    lineHeight: theme.type.subheadline.lineHeight,
-    letterSpacing: theme.type.subheadline.letterSpacing,
-    color: theme.color.text
-  },
-  status: {
-    fontFamily: theme.font.mono,
-    fontSize: theme.type.caption1.fontSize,
-    lineHeight: theme.type.caption1.lineHeight,
-    letterSpacing: theme.type.caption1.letterSpacing
-  },
-  check: { alignItems: "center", justifyContent: "center" }
-}));
-
-export { FileUpload };

package/dist/chunk-W74TXYFB.js

@@ -1,107 +0,0 @@
-import { useLabels } from './chunk-APCWFOZW.js';
-import * as React from 'react';
-import { Animated, Easing, View, Text } from 'react-native';
-import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
-var DEFAULT_LABELS = {
-  label: "Thinking\u2026",
-  accessibleLabel: "Thinking"
-};
-var DOT_BOX = { sm: 6, md: 8, lg: 10 };
-function useThinkingPulse(active) {
-  const theme = useLoamTheme("thinking");
-  const p = React.useRef(new Animated.Value(0)).current;
-  const { duration, easing } = theme.motion.loop;
-  React.useEffect(() => {
-    if (!active) {
-      p.setValue(0);
-      return;
-    }
-    const bezier = Easing.bezier(...easing);
-    const loop = Animated.loop(
-      Animated.sequence([
-        Animated.timing(p, { toValue: 1, duration, easing: bezier, useNativeDriver: true }),
-        Animated.timing(p, { toValue: 0, duration, easing: bezier, useNativeDriver: true })
-      ])
-    );
-    loop.start();
-    return () => loop.stop();
-  }, [active, p, duration, easing]);
-  return active ? {
-    opacity: p.interpolate({ inputRange: [0, 1], outputRange: [1, 0.55] }),
-    transform: [{ scale: p.interpolate({ inputRange: [0, 1], outputRange: [1, 0.9] }) }]
-  } : null;
-}
-function Thinking({
-  label: labelProp,
-  size = "md",
-  tone = "working",
-  motion = "full",
-  announce = true,
-  accessibleLabel: accessibleLabelProp,
-  labels: labelsProp,
-  style,
-  testID
-}) {
-  const labels = useLabels("thinking", DEFAULT_LABELS, labelsProp);
-  const label = labelProp ?? labels.label;
-  const accessibleLabel = accessibleLabelProp ?? labels.accessibleLabel;
-  const { styles } = useStyles(sheet, { tone, size });
-  const theme = useLoamTheme("thinking");
-  const pulseStyle = useThinkingPulse(motion === "full" && !theme.reduceMotion);
-  const hasLabel = label !== "";
-  const box = DOT_BOX[size];
-  const dotColor = tone === "accent" ? theme.color.accent : tone === "neutral" ? theme.color.text2 : theme.status.working;
-  const name = hasLabel ? label : accessibleLabel;
-  const liveProps = announce ? { accessibilityLiveRegion: "polite", role: "status", accessibilityLabel: name } : {};
-  return /* @__PURE__ */ jsxs(View, { ...liveProps, testID, style: [styles.root, style], children: [
-    /* @__PURE__ */ jsx(
-      Animated.View,
-      {
-        style: [
-          { width: box, height: box, borderRadius: theme.radius.full, backgroundColor: dotColor },
-          pulseStyle
-        ]
-      }
-    ),
-    hasLabel ? /* @__PURE__ */ jsx(Text, { style: styles.label, children: label }) : null
-  ] });
-}
-var sheet = createStyleSheet((theme) => ({
-  root: {
-    flexDirection: "row",
-    alignItems: "center",
-    alignSelf: "flex-start",
-    gap: theme.space.s2
-  },
-  label: {
-    fontFamily: theme.font.sans,
-    variants: {
-      tone: {
-        working: { color: theme.color.text },
-        accent: { color: theme.color.text },
-        neutral: { color: theme.color.text2 }
-      },
-      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
-        }
-      }
-    }
-  }
-}));
-
-export { Thinking, useThinkingPulse };