@btndprojects/loam-ui-native 0.1.1 → 0.3.1

package/dist/chunk-VJLSSSGC.js

@@ -0,0 +1,438 @@
+import { PhaseAnnouncement, NoteBlock } from './chunk-SZLI34TA.js';
+import { IconTile } from './chunk-XBXUBBJZ.js';
+import { CardHeader, CardTitle, CardContent, CardFooter, Card } from './chunk-PWFRDRGS.js';
+import { useAnalyzerCopy, decorativeProps, camInk } from './chunk-OCHPK5YV.js';
+import { Button } from './chunk-5DTKORLI.js';
+import { isAndroidIdiom } from './chunk-TH4PW2WU.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-PCEFCOLN.js';
+import { useResolvedMotion, motionTiming, springConfig } from './chunk-J64KGCGX.js';
+import * as React from 'react';
+import { Animated, View, Text, Platform, findNodeHandle, AccessibilityInfo } from 'react-native';
+import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
+import { permissionScreen } from '@btndprojects/loam-analyzer';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/camera-permission/camera-permission-labels.ts
+var DEFAULT_CAMERA_PERMISSION_LABELS = {
+  takeAnother: "Take another"
+};
+function useCameraPermissionLabels(own) {
+  return useLabels("cameraPermission", DEFAULT_CAMERA_PERMISSION_LABELS, own);
+}
+var STATE_ICON = {
+  undetermined: "camera",
+  prompting: "camera",
+  granted: "camera",
+  denied: "lock",
+  unavailable: "monitor"
+};
+function Wrap({
+  layout,
+  style,
+  children
+}) {
+  if (layout === "card")
+    return /* @__PURE__ */ jsx(Card, { variant: "elevated", style, children });
+  return /* @__PURE__ */ jsx(View, { style, children });
+}
+function ScreenShell({
+  size = "lg",
+  variant = "primary",
+  loading = false,
+  state,
+  icon,
+  onPrimary,
+  onSecondary,
+  inert = false,
+  announce = true,
+  autoFocus = false,
+  body,
+  layout = "screen",
+  copy: copyProp
+}) {
+  const words = useAnalyzerCopy(copyProp);
+  const theme = useLoamTheme("camera-permission");
+  const { styles } = useStyles(permissionSheet, {
+    inert,
+    layout,
+    lead: layout === "screen" && isAndroidIdiom(theme)
+  });
+  const screen = permissionScreen(state, words);
+  const copy = body ?? screen.body;
+  const heading = React.useRef(null);
+  const level = useResolvedMotion(void 0, "camera-permission");
+  const rise = React.useRef(new Animated.Value(level === "none" ? 1 : 0)).current;
+  React.useEffect(() => {
+    if (level === "none") return;
+    if (level === "reduced") {
+      Animated.timing(rise, { ...motionTiming(level), toValue: 1, useNativeDriver: true }).start();
+    } else {
+      Animated.spring(rise, {
+        ...springConfig(theme, "ds"),
+        toValue: 1,
+        useNativeDriver: true
+      }).start();
+    }
+  }, []);
+  React.useLayoutEffect(() => {
+    if (!autoFocus) return;
+    const node = heading.current;
+    if (!node || Platform.OS === "web") return;
+    const tag = findNodeHandle(node);
+    if (tag !== null) AccessibilityInfo.setAccessibilityFocus(tag);
+  }, [autoFocus]);
+  return /* @__PURE__ */ jsx(
+    Animated.View,
+    {
+      testID: `loam-permission-${state}`,
+      style: [
+        styles.shell,
+        {
+          opacity: rise,
+          transform: level === "full" ? [{ translateY: rise.interpolate({ inputRange: [0, 1], outputRange: [12, 0] }) }] : []
+        }
+      ],
+      children: /* @__PURE__ */ jsxs(Wrap, { layout, style: styles.card, children: [
+        /* @__PURE__ */ jsx(PhaseAnnouncement, { message: announce ? `${screen.heading}. ${copy}` : null }),
+        /* @__PURE__ */ jsxs(CardHeader, { children: [
+          /* @__PURE__ */ jsx(View, { accessible: false, ...decorativeProps(), children: /* @__PURE__ */ jsx(
+            IconTile,
+            {
+              icon: icon ?? STATE_ICON[state],
+              tone: state === "denied" || state === "unavailable" ? "warn" : "accent",
+              size
+            }
+          ) }),
+          /* @__PURE__ */ jsx(CardTitle, { children: /* @__PURE__ */ jsx(Text, { ref: heading, accessibilityRole: "header", style: styles.heading, children: screen.heading }) }),
+          /* @__PURE__ */ jsx(Text, { style: styles.body, children: copy })
+        ] }),
+        /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx(NoteBlock, { title: words.permission[state].label, description: screen.note }) }),
+        /* @__PURE__ */ jsx(CardFooter, { children: /* @__PURE__ */ jsxs(View, { style: styles.actions, children: [
+          screen.secondary ? /* @__PURE__ */ jsx(View, { style: styles.actionSlot, children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "outline",
+              size,
+              fullWidth: true,
+              disabled: inert,
+              onPress: onSecondary,
+              children: screen.secondary
+            }
+          ) }) : null,
+          /* @__PURE__ */ jsx(View, { style: styles.actionSlot, children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant,
+              size,
+              loading,
+              fullWidth: true,
+              disabled: inert,
+              onPress: onPrimary,
+              children: screen.primary
+            }
+          ) })
+        ] }) })
+      ] })
+    }
+  );
+}
+function CameraPermissionPrimer({
+  size,
+  variant,
+  loading,
+  icon,
+  privacyStatement,
+  prompting = false,
+  onContinue,
+  onUpload,
+  autoFocus,
+  announce,
+  layout,
+  copy
+}) {
+  return /* @__PURE__ */ jsx(
+    ScreenShell,
+    {
+      size,
+      variant,
+      loading,
+      icon,
+      state: prompting ? "prompting" : "undetermined",
+      inert: prompting,
+      body: privacyStatement,
+      onPrimary: onContinue,
+      onSecondary: onUpload,
+      autoFocus,
+      announce,
+      layout,
+      copy
+    }
+  );
+}
+function CameraDenied({
+  size,
+  variant,
+  loading,
+  icon,
+  onOpenSettings,
+  onUpload,
+  autoFocus,
+  announce,
+  layout,
+  copy
+}) {
+  return /* @__PURE__ */ jsx(
+    ScreenShell,
+    {
+      size,
+      variant,
+      loading,
+      state: "denied",
+      icon,
+      onPrimary: onOpenSettings,
+      onSecondary: onUpload,
+      autoFocus,
+      announce,
+      layout,
+      copy
+    }
+  );
+}
+function CameraUnavailable({
+  size,
+  variant,
+  loading,
+  icon,
+  onUpload,
+  autoFocus,
+  announce,
+  layout,
+  copy
+}) {
+  return /* @__PURE__ */ jsx(
+    ScreenShell,
+    {
+      size,
+      variant,
+      loading,
+      icon,
+      state: "unavailable",
+      onPrimary: onUpload,
+      autoFocus,
+      announce,
+      layout,
+      copy
+    }
+  );
+}
+function CameraPermissionScreen({
+  size,
+  variant,
+  loading,
+  icon,
+  state,
+  onRequestPermission,
+  onOpenSettings,
+  onUpload,
+  privacyStatement,
+  autoFocus,
+  announce,
+  layout,
+  copy
+}) {
+  const theme = useLoamTheme("camera-permission");
+  const level = useResolvedMotion(void 0, "camera-permission");
+  const last = React.useRef(state);
+  const fade = React.useRef(new Animated.Value(1)).current;
+  const [leaving, setLeaving] = React.useState(false);
+  const granted = state === "granted";
+  if (!granted) last.current = state;
+  React.useEffect(() => {
+    if (!granted) {
+      fade.setValue(1);
+      setLeaving(false);
+      return;
+    }
+    if (level === "none") return;
+    setLeaving(true);
+    Animated.timing(fade, {
+      duration: level === "reduced" ? theme.duration.fast : theme.duration.slow,
+      toValue: 0,
+      useNativeDriver: true
+    }).start(() => setLeaving(false));
+  }, [granted, level, fade]);
+  if (granted && !leaving) return null;
+  const shown = granted ? last.current : state;
+  return /* @__PURE__ */ jsx(Animated.View, { style: { opacity: fade }, pointerEvents: granted ? "none" : "auto", children: renderScreen(shown) });
+  function renderScreen(state2) {
+    if (state2 === "denied") {
+      return /* @__PURE__ */ jsx(
+        CameraDenied,
+        {
+          size,
+          variant,
+          loading,
+          icon,
+          onOpenSettings,
+          onUpload,
+          autoFocus,
+          announce,
+          layout,
+          copy
+        }
+      );
+    }
+    if (state2 === "unavailable") {
+      return /* @__PURE__ */ jsx(
+        CameraUnavailable,
+        {
+          size,
+          variant,
+          loading,
+          icon,
+          onUpload,
+          autoFocus,
+          announce,
+          layout,
+          copy
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      CameraPermissionPrimer,
+      {
+        size,
+        variant,
+        loading,
+        icon,
+        prompting: state2 === "prompting",
+        privacyStatement,
+        onContinue: onRequestPermission,
+        onUpload,
+        autoFocus,
+        announce,
+        layout,
+        copy
+      }
+    );
+  }
+}
+function CaptureDone({
+  size = "lg",
+  variant = "primary",
+  loading = false,
+  icon = "check",
+  label: labelProp,
+  actionLabel,
+  labels,
+  copy,
+  onTakeAnother,
+  announce = true
+}) {
+  const t = useCameraPermissionLabels(labels);
+  const words = useAnalyzerCopy(copy);
+  const label = labelProp ?? words.done;
+  const theme = useLoamTheme("camera-permission");
+  const { styles } = useStyles(permissionSheet);
+  return /* @__PURE__ */ jsxs(View, { testID: "loam-capture-done", style: styles.done, children: [
+    /* @__PURE__ */ jsx(PhaseAnnouncement, { message: announce ? label : null }),
+    /* @__PURE__ */ jsx(
+      View,
+      {
+        accessible: false,
+        style: [styles.doneMark, { width: theme.ctl[size], height: theme.ctl[size] }],
+        ...decorativeProps(),
+        children: /* @__PURE__ */ jsx(Icon, { name: icon, size: theme.icon.lg, color: theme.color.goodInk })
+      }
+    ),
+    /* @__PURE__ */ jsx(Text, { style: [styles.doneLabel, { color: camInk(theme) }], children: label }),
+    /* @__PURE__ */ jsx(Button, { variant, size, loading, fullWidth: true, onPress: onTakeAnother, children: actionLabel ?? t.takeAnother })
+  ] });
+}
+var permissionSheet = createStyleSheet((theme) => ({
+  shell: {
+    width: "100%",
+    alignItems: "center",
+    variants: {
+      // The OS owns the dialog that is up. We draw nothing over it, and we do
+      // not leave live controls under it either — and we do not dim the copy:
+      // the three clauses are the point of the screen. Both buttons are
+      // `disabled`, and the shell takes no touch.
+      inert: {
+        true: { pointerEvents: "none" },
+        false: { pointerEvents: "auto" }
+      },
+      // The full-screen layout: the system ground, centred (iOS) or leading
+      // (Android) content.
+      layout: {
+        screen: {
+          flexGrow: 1,
+          justifyContent: "center",
+          padding: theme.space[24],
+          backgroundColor: theme.color.bg
+        },
+        card: {}
+      },
+      lead: { true: { alignItems: "flex-start" }, false: {} }
+    }
+  },
+  card: {
+    width: "100%",
+    maxWidth: theme.panel.lg
+  },
+  heading: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.title3.fontSize,
+    fontWeight: theme.fontWeight.semibold,
+    color: theme.color.text
+  },
+  body: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[15],
+    lineHeight: theme.fontSize[15] * theme.lineHeight.relaxed,
+    color: theme.color.text2
+  },
+  // The slots share one row when both labels fit on a line and each takes the
+  // full width when they do not. Equal zero-basis slots split a 360pt card
+  // into two ~135pt halves, and "Upload instead" at `lg` wrapped onto two lines
+  // inside its button.
+  actions: {
+    width: "100%",
+    flexDirection: "row",
+    flexWrap: "wrap",
+    alignItems: "center",
+    gap: theme.space[8]
+  },
+  actionSlot: {
+    flexGrow: 1,
+    flexShrink: 0,
+    flexBasis: "auto"
+  },
+  done: {
+    width: "100%",
+    maxWidth: theme.panel.sm,
+    alignSelf: "center",
+    alignItems: "center",
+    gap: theme.space[12],
+    padding: theme.space[16],
+    borderRadius: theme.radius.lg,
+    backgroundColor: theme.black.a12,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.white.a5
+  },
+  doneMark: {
+    width: theme.ctl.lg,
+    height: theme.ctl.lg,
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: theme.radius.full,
+    backgroundColor: theme.color.good
+  },
+  doneLabel: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[15]
+  }
+}));
+
+export { CameraDenied, CameraPermissionPrimer, CameraPermissionScreen, CameraUnavailable, CaptureDone };