@btndprojects/loam-ui-native 0.2.1 → 0.3.1

package/dist/chunk-XRSJ32M3.js

@@ -0,0 +1,331 @@
+import { Progress } from './chunk-L2WMOA2V.js';
+import { Button } from './chunk-5DTKORLI.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-PCEFCOLN.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,
+  disabled = false,
+  compact = false,
+  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,
+        compact && { paddingVertical: theme.space.s2, paddingHorizontal: theme.space.s3, gap: theme.space.s2 },
+        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.dangerOnSoft : theme.color.text2 }], children: statusLabel(file, labels) })
+          ] }),
+          isError && file.error ? /* @__PURE__ */ jsx(Text, { style: [styles.status, { color: theme.color.dangerOnSoft }], 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",
+            disabled,
+            accessibilityLabel: labels.retry(file.name),
+            onPress: onRetry ? () => onRetry(file.id) : void 0
+          }
+        ) : /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "ghost",
+            size: "sm",
+            leadingIcon: "x",
+            disabled,
+            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",
+  disabled = false,
+  density = "standard",
+  loading = false,
+  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";
+  const compact = density === "compact";
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      style: [styles.rootWrap, compact && { gap: theme.space.s3 }],
+      "aria-busy": loading || void 0,
+      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, compact && { gap: theme.space.s2 }], children: [
+            /* @__PURE__ */ jsx(View, { style: styles.actionItem, children: /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "outline",
+                size: compact ? "sm" : void 0,
+                loading,
+                leadingIcon: "maximize",
+                fullWidth: true,
+                disabled,
+                onPress: onPickCamera,
+                children: labels.camera
+              }
+            ) }),
+            /* @__PURE__ */ jsx(View, { style: styles.actionItem, children: /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "outline",
+                size: compact ? "sm" : void 0,
+                loading,
+                leadingIcon: "image",
+                fullWidth: true,
+                disabled,
+                onPress: onPickLibrary,
+                children: labels.library
+              }
+            ) })
+          ] }),
+          hint ? /* @__PURE__ */ jsx(Text, { style: styles.hint, children: hint }) : null
+        ] }),
+        files.length > 0 ? /* @__PURE__ */ jsx(View, { style: [styles.list, compact && { gap: theme.space.s1 }], children: files.map((file) => /* @__PURE__ */ jsx(
+          FileUploadRow,
+          {
+            file,
+            onRetry,
+            onRemove,
+            motion,
+            disabled,
+            compact,
+            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,
+    paddingVertical: theme.space.s3,
+    paddingHorizontal: theme.space.s4,
+    borderRadius: theme.radius.md,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.color.border,
+    backgroundColor: theme.color.surface
+  },
+  chip: {
+    width: theme.space[40],
+    height: theme.space[40],
+    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-XTCVOEAW.js

@@ -0,0 +1 @@
+

package/dist/chunk-XWGXVQF6.js

@@ -0,0 +1,58 @@
+import { MEDIA, OVERLAY_ALPHA } from '@btndprojects/loam-tokens';
+
+// src/os-surfaces/os-metrics.ts
+var APP_ICON_ASSET_PX = {
+  store: 1024,
+  home: 180,
+  spotlight: 120,
+  settings: 58
+};
+var APP_ICON_PREVIEW_PX = {
+  store: 76,
+  home: 56,
+  spotlight: 40,
+  settings: 28
+};
+var IOS_ICON_CORNER_RATIO = 0.23;
+var ANDROID_ICON_MASK_RATIO = 0.5;
+var ICON_SAFE_MARGIN = { iOS: 0.18, android: 0.25 };
+var ICON_MARK_RATIO = { size: 0.46, radius: 0.1 };
+var LAUNCH_MARK = { size: 64, radius: 18 };
+var DYNAMIC_ISLAND = { height: 37, minWidth: 122 };
+var DYNAMIC_ISLAND_FILL = "#000000";
+var LIVE_ACTIVITY_MAX_H = 160;
+var LIVE_ACTIVITY_CARD = { tile: 34, tileRadius: 11, trackH: 4 };
+var WIDGET_SIZE = {
+  small: { width: 158, height: 158 },
+  medium: { width: 338, height: 158 },
+  large: { width: 338, height: 354 }
+};
+var WIDGET_CORNER = { iOS: 22, android: 28 };
+var WIDGET_INNER_CORNER_ANDROID = 20;
+var IOS_EDIT_MENU_RADIUS = 10;
+var SHEET_GRABBER_W = 36;
+var OS_MATERIAL = {
+  /** Live-activity / prominent card fill (reference: `rgba(255,255,255,.14)`). */
+  fill: `rgba(255,255,255,${OVERLAY_ALPHA.a5})`,
+  /** Notification card fill (reference: `rgba(255,255,255,.12)`). */
+  fillWeak: `rgba(255,255,255,${OVERLAY_ALPHA.a4})`,
+  /** Progress track over material (reference: `rgba(255,255,255,.25)`). */
+  track: `rgba(255,255,255,${OVERLAY_ALPHA.a8})`,
+  /** Primary ink on material. White, because the backdrop is a wallpaper. */
+  ink: MEDIA.ink,
+  /**
+   * Divider between items in a system menu (reference: `rgba(128,128,128,.35)`).
+   *
+   * The one value here that is genuinely not a ramp stop, and could not be: a
+   * mid-grey at 35% is the only wash that stays visible over *both* light and
+   * dark OS chrome, which is a different requirement from every other entry —
+   * those all know the backdrop is dark. Neither a white nor a black stop can
+   * do it, so the literal stands, with this as the reason.
+   */
+  divider: "rgba(128,128,128,0.35)"
+};
+var OS_MATERIAL_INK_OPACITY = { secondary: 0.85, tertiary: 0.7 };
+var LOCK_SCREEN_WALLPAPER = "#2b2620";
+var OS_SIZE_RATIO = { sm: 0.75, md: 1, lg: 1.25 };
+
+export { ANDROID_ICON_MASK_RATIO, APP_ICON_ASSET_PX, APP_ICON_PREVIEW_PX, DYNAMIC_ISLAND, DYNAMIC_ISLAND_FILL, ICON_MARK_RATIO, ICON_SAFE_MARGIN, IOS_EDIT_MENU_RADIUS, IOS_ICON_CORNER_RATIO, LAUNCH_MARK, LIVE_ACTIVITY_CARD, LIVE_ACTIVITY_MAX_H, LOCK_SCREEN_WALLPAPER, OS_MATERIAL, OS_MATERIAL_INK_OPACITY, OS_SIZE_RATIO, SHEET_GRABBER_W, WIDGET_CORNER, WIDGET_INNER_CORNER_ANDROID, WIDGET_SIZE };