@btndprojects/loam-ui-native 0.2.1 → 0.3.1

package/dist/{chunk-LMPHCVJJ.js → chunk-RAESDNU5.js}

@@ -1,11 +1,11 @@
-import { Coachmark, CoachmarkDots } from './chunk-YAAHPATV.js';
-import { useTourHost, Highlight, Beacon, useTourInsets } from './chunk-H7DWSL4O.js';
-import { Progress } from './chunk-5UTRIXQ6.js';
-import { Button } from './chunk-E2E3I5W2.js';
+import { Coachmark, CoachmarkDots } from './chunk-ZYQ23DPT.js';
+import { useTourHost, Highlight, Beacon, useTourInsets } from './chunk-36DA3IPO.js';
+import { Button } from './chunk-5DTKORLI.js';
+import { isAndroidIdiom } from './chunk-TH4PW2WU.js';
 import { useLabels } from './chunk-APCWFOZW.js';
-import { Icon } from './chunk-UXGIW7OK.js';
+import { Icon } from './chunk-PCEFCOLN.js';
 import * as React from 'react';
-import { BackHandler, AccessibilityInfo, Pressable, View, Text } from 'react-native';
+import { BackHandler, AccessibilityInfo, Pressable, Text, View } from 'react-native';
 import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
 import { materializeTour, resolveText, stepsForSurface, kindFor, canAttachGate, isStepGated, highlightFor, shouldSkipMissingStep, hintRuns } from '@btndprojects/loam-engage';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -308,7 +308,7 @@ function Tour({
   const variant = cardVariant ?? (kind === "modal" || !resolved ? "centered" : touch ? "docked" : "anchored");
   if (kind === "beacon" && resolved && !beaconOpen) {
     return /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(Highlight, { kind: highlight, target: resolved, padding: step.padding, motion }),
+      /* @__PURE__ */ jsx(Highlight, { kind: highlight, target: resolved, halo: step.padding, motion }),
       /* @__PURE__ */ jsx(
         Beacon,
         {
@@ -346,14 +346,16 @@ function Tour({
     onAction: onAction ? (action) => onAction(action, step) : void 0
   };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    resolved ? /* @__PURE__ */ jsx(Highlight, { kind: highlight, target: resolved, padding: step.padding, motion }) : null,
+    resolved ? /* @__PURE__ */ jsx(Highlight, { kind: highlight, target: resolved, halo: step.padding, motion }) : null,
     /* @__PURE__ */ jsx(React.Fragment, { children: renderCard ? renderCard(cardProps) : /* @__PURE__ */ jsx(TourStepCard, { ...cardProps }) }, renderCard ? index : variant)
   ] });
 }
 function TourHint({ text }) {
   const { styles } = useStyles(sheet);
+  const theme = useLoamTheme("tour");
+  const ios = isAndroidIdiom(theme) ? null : styles.hintIos;
   return /* @__PURE__ */ jsx(Fragment, { children: hintRuns(text).map(
-    (run, i) => run.key ? /* @__PURE__ */ jsx(Text, { style: styles.hintKey, children: run.text }, i) : /* @__PURE__ */ jsx(Text, { children: run.text }, i)
+    (run, i) => run.key ? /* @__PURE__ */ jsx(Text, { style: [ios, styles.hintKey], children: run.text }, i) : /* @__PURE__ */ jsx(Text, { style: ios, children: run.text }, i)
   ) });
 }
 function TourStepCard({
@@ -385,6 +387,7 @@ function TourStepCard({
   const isLast = index === total - 1;
   const kind = kindFor(step.kind, Boolean(step.anchor));
   const cta = step.cta;
+  const ios = !isAndroidIdiom(theme);
   return /* @__PURE__ */ jsxs(
     Coachmark,
     {
@@ -395,7 +398,10 @@ function TourStepCard({
       kicker: name,
       title: t(step.title) ?? "",
       body: typeof step.body === "string" ? step.body : void 0,
-      media: step.media,
+      media: step.media ? /* @__PURE__ */ jsx(View, { style: styles.media, children: step.media }) : void 0,
+      titleStyle: ios ? styles.titleIos : void 0,
+      bodyStyle: ios ? styles.bodyIos : void 0,
+      dockOffset: ios ? theme.space[12] : void 0,
       hint: waiting ?? (gated ? /* @__PURE__ */ jsx(TourHint, { text: t(step.hint) ?? labels.waiting }) : void 0),
       motion,
       onClose,
@@ -406,26 +412,36 @@ function TourStepCard({
           accessibilityRole: "button",
           accessibilityLabel: labels.minimise,
           onPress: onMinimise,
-          hitSlop: theme.space[10],
-          style: styles.iconButton,
+          hitSlop: (theme.hit.sm - theme.ctl.sm) / 2,
+          android_ripple: { color: theme.state.pressed, borderless: true },
+          style: ({ pressed }) => [
+            styles.iconButton,
+            pressed ? { backgroundColor: theme.state.pressed } : null
+          ],
           children: /* @__PURE__ */ jsx(Icon, { name: "chevron-down", size: theme.icon.sm, color: theme.color.text3 })
         }
       ) : null,
       actions: /* @__PURE__ */ jsxs(Fragment, { children: [
-        onBack ? /* @__PURE__ */ jsx(Button, { size: "sm", variant: "outline", onPress: onBack, children: labels.back }) : null,
-        gated ? step.skippable === false ? null : /* @__PURE__ */ jsx(Button, { size: "sm", variant: "ghost", onPress: onSkipStep, children: labels.skipStep }) : /* @__PURE__ */ jsx(Button, { size: "lg", variant: "primary", onPress: onNext, children: isLast ? labels.finish : labels.next })
+        onBack ? /* @__PURE__ */ jsx(Button, { size: "lg", variant: "outline", onPress: onBack, children: labels.back }) : null,
+        gated ? step.skippable === false ? null : /* @__PURE__ */ jsx(Button, { size: "lg", variant: "ghost", onPress: onSkipStep, children: labels.skipStep }) : /* @__PURE__ */ jsx(Button, { size: "lg", variant: "primary", onPress: onNext, children: isLast ? labels.finish : labels.next })
       ] }),
       children: [
         typeof step.body !== "string" && step.body ? /* @__PURE__ */ jsx(Fragment, { children: step.body }) : null,
-        cta ? /* @__PURE__ */ jsx(
-          Button,
-          {
-            size: "sm",
-            variant: "ghost",
-            trailingIcon: "arrow-right",
-            onPress: () => onAction?.(cta.action),
-            children: cta.label
-          }
+        cta ? (
+          // A Link, not a button: it leaves the card's own flow.
+          /* @__PURE__ */ jsx(
+            Pressable,
+            {
+              accessibilityRole: "link",
+              onPress: () => onAction?.(cta.action),
+              hitSlop: (theme.hit.sm - theme.fontSize[15]) / 2,
+              style: styles.cta,
+              children: ({ pressed }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(Text, { style: [styles.ctaText, pressed ? styles.ctaPressed : null], children: cta.label }),
+                /* @__PURE__ */ jsx(Icon, { name: "arrow-right", size: theme.icon.xs, color: theme.color.accentStrong })
+              ] })
+            }
+          )
         ) : null,
         /* @__PURE__ */ jsx(
           TourProgress,
@@ -453,40 +469,40 @@ function TourProgress({
   const { styles } = useStyles(sheet);
   const labels = useLabels("tour", DEFAULT_LABELS, labelsProp);
   const stepLabel = stepLabelProp ?? labels.step;
-  return /* @__PURE__ */ jsxs(View, { style: styles.progress, children: [
-    /* @__PURE__ */ jsx(
-      Progress,
-      {
-        size: "sm",
-        value: index + 1,
-        max: Math.max(1, total),
-        accessibilityLabel: labels.stepOf(stepLabel, index + 1, total)
-      }
-    ),
-    /* @__PURE__ */ jsxs(View, { style: styles.progressRail, children: [
-      /* @__PURE__ */ jsx(
-        CoachmarkDots,
-        {
-          total,
-          index,
-          onSelect,
-          stepLabel,
-          titles
-        }
-      ),
-      /* @__PURE__ */ jsxs(Text, { style: styles.counter, children: [
-        index + 1,
-        " / ",
-        total
-      ] })
-    ] })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      role: "group",
+      accessibilityLabel: labels.stepOf(stepLabel, index + 1, total),
+      style: styles.progress,
+      children: [
+        /* @__PURE__ */ jsx(
+          CoachmarkDots,
+          {
+            total,
+            index,
+            onSelect,
+            stepLabel,
+            titles
+          }
+        ),
+        /* @__PURE__ */ jsxs(Text, { style: styles.counter, children: [
+          index + 1,
+          " / ",
+          total
+        ] })
+      ]
+    }
+  );
 }
 function TourLauncher({
   label: labelProp,
   counter,
   onPress,
+  icon,
   pinned = true,
+  dismissible = false,
+  onDismiss,
   labels: labelsProp
 }) {
   const theme = useLoamTheme("tour");
@@ -494,7 +510,9 @@ function TourLauncher({
   const label = labelProp ?? labels.resume;
   const { styles } = useStyles(sheet);
   const insets = useTourInsets();
-  return /* @__PURE__ */ jsxs(
+  const wrap = dismissible && onDismiss !== void 0;
+  const place = pinned ? { end: theme.space[16] + insets.right, bottom: theme.space[16] + insets.bottom } : null;
+  const pill = /* @__PURE__ */ jsxs(
     Pressable,
     {
       accessibilityRole: "button",
@@ -502,17 +520,34 @@ function TourLauncher({
       onPress,
       style: ({ pressed }) => [
         styles.launcher,
-        pinned ? styles.launcherPinned : null,
-        pinned ? { right: theme.space[16] + insets.right, bottom: theme.space[16] + insets.bottom } : null,
+        pinned && !wrap ? styles.launcherPinned : null,
+        !wrap ? place : null,
         pressed ? { backgroundColor: theme.state.pressed } : null
       ],
       children: [
-        /* @__PURE__ */ jsx(Icon, { name: "star", size: theme.icon.sm, color: theme.color.accentStrong }),
+        icon ? /* @__PURE__ */ jsx(Icon, { name: icon, size: theme.icon.sm, color: theme.color.accentStrong }) : null,
         /* @__PURE__ */ jsx(Text, { style: styles.launcherLabel, children: label }),
-        counter ? /* @__PURE__ */ jsx(Text, { style: styles.counter, children: counter }) : null
+        counter ? /* @__PURE__ */ jsx(View, { style: styles.launcherBadge, children: /* @__PURE__ */ jsx(Text, { style: styles.count, children: counter }) }) : null
       ]
     }
   );
+  if (!wrap) return pill;
+  return /* @__PURE__ */ jsxs(View, { style: [styles.launcherGroup, pinned ? styles.launcherPinned : null, place], children: [
+    pill,
+    /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        accessibilityRole: "button",
+        accessibilityLabel: labels.leave,
+        onPress: onDismiss,
+        style: ({ pressed }) => [
+          styles.launcherDismiss,
+          pressed ? { backgroundColor: theme.state.pressed } : null
+        ],
+        children: /* @__PURE__ */ jsx(Icon, { name: "x", size: theme.icon.sm, color: theme.color.text2 })
+      }
+    )
+  ] });
 }
 var sheet = createStyleSheet((theme) => ({
   /** A control named inside a gated hint, shaped like the app's own label. */
@@ -521,46 +556,105 @@ var sheet = createStyleSheet((theme) => ({
     color: theme.color.text,
     textTransform: "none"
   },
+  hintIos: { fontSize: theme.fontSize[13] },
+  // A ghost icon Button sm: its square, its corner, its pressed layer.
   iconButton: {
     width: theme.ctl.sm,
     height: theme.ctl.sm,
     alignItems: "center",
     justifyContent: "center",
-    borderRadius: theme.radius.full
+    borderRadius: theme.ctl.r.sm
+  },
+  titleIos: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.semibold,
+    fontSize: theme.type.headline.fontSize,
+    lineHeight: theme.type.headline.lineHeight,
+    letterSpacing: theme.type.headline.letterSpacing
   },
-  progress: { gap: theme.space[8], marginTop: theme.space[2] },
-  progressRail: { flexDirection: "row", alignItems: "center", gap: theme.space[6] },
+  bodyIos: {
+    fontSize: theme.type.subheadline.fontSize,
+    lineHeight: theme.type.subheadline.lineHeight
+  },
+  media: { borderRadius: theme.radius.sm, overflow: "hidden" },
+  cta: { flexDirection: "row", alignItems: "center", alignSelf: "flex-start", gap: theme.space[4] },
+  ctaText: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.semibold,
+    fontSize: theme.fontSize[15],
+    color: theme.color.accentStrong
+  },
+  ctaPressed: { textDecorationLine: "underline" },
+  progress: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space[6],
+    height: theme.space[32],
+    marginTop: theme.space[2]
+  },
+  // The count style: mono 12 / 500, text-2, tabular.
   counter: {
-    marginLeft: "auto",
+    marginStart: "auto",
+    fontFamily: theme.font.mono,
+    fontSize: theme.fontSize[12],
+    fontWeight: theme.fontWeight.medium,
+    color: theme.color.text2,
+    fontVariant: ["tabular-nums"]
+  },
+  count: {
     fontFamily: theme.font.mono,
-    fontSize: theme.type.caption2.fontSize,
-    color: theme.color.text3,
+    fontSize: theme.fontSize[12],
+    fontWeight: theme.fontWeight.medium,
+    color: theme.color.text2,
     fontVariant: ["tabular-nums"]
   },
+  // The ChecklistLauncher recipe.
   launcher: {
     flexDirection: "row",
     alignItems: "center",
-    gap: theme.space[9],
+    gap: theme.space[10],
     height: theme.ctl.lg,
-    paddingHorizontal: theme.space[15],
+    paddingStart: theme.space[14],
+    paddingEnd: theme.space[8],
     borderRadius: theme.radius.full,
-    borderWidth: theme.borderWidth.thin,
+    borderWidth: theme.borderWidth.thick,
     // The pill's edge is the only thing separating it from the screen behind,
     // so it is a graphical edge at 3:1 — the measured accent, not the raw one.
     borderColor: theme.focus.ringColor,
     backgroundColor: theme.color.surface,
     ...theme.shadow.lg
   },
+  launcherGroup: { flexDirection: "row", alignItems: "center", gap: theme.space[8] },
+  launcherDismiss: {
+    width: theme.ctl.lg,
+    height: theme.ctl.lg,
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: theme.radius.full,
+    borderWidth: theme.borderWidth.thick,
+    borderColor: theme.color.border,
+    backgroundColor: theme.color.surface,
+    ...theme.shadow.lg
+  },
   launcherPinned: {
     position: "absolute",
-    right: theme.space[16],
+    end: theme.space[16],
     bottom: theme.space[16]
   },
   launcherLabel: {
     fontFamily: theme.font.sans,
-    fontWeight: theme.fontWeight.bold,
-    fontSize: theme.type.subheadline.fontSize,
+    fontWeight: theme.fontWeight.semibold,
+    fontSize: theme.fontSize[16],
     color: theme.color.accentStrong
+  },
+  // The 28 capsule.
+  launcherBadge: {
+    flexDirection: "row",
+    alignItems: "center",
+    height: theme.space[28],
+    paddingHorizontal: theme.space[10],
+    borderRadius: theme.radius.full,
+    backgroundColor: theme.color.surface2
   }
 }));
 

package/dist/chunk-RBYQUXNL.js

@@ -0,0 +1 @@
+

package/dist/chunk-RCM3DT5E.js

@@ -0,0 +1 @@
+

package/dist/chunk-RGNY56L7.js

@@ -0,0 +1,282 @@
+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 { Switch } from './chunk-VFDQAAIW.js';
+import { isAndroidIdiom } from './chunk-TH4PW2WU.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { useResolvedMotion, springConfig } from './chunk-J64KGCGX.js';
+import * as React from 'react';
+import { Animated, Text, View, Linking } from 'react-native';
+import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var DEFAULT_LABELS = {
+  allow: "Continue",
+  deny: "Not now",
+  deniedTitle: "Turned off in Settings",
+  openSettings: "Open Settings",
+  unavailableCapabilities: "Unavailable until the permission is re-enabled",
+  capabilityOff: (capability) => `${capability}, off`
+};
+function PermissionPrimer({
+  icon = "bell",
+  title,
+  description,
+  allowLabel,
+  onAllow,
+  denyLabel,
+  onDeny,
+  motion = "full",
+  tone = "accent",
+  size = "md",
+  variant = "soft",
+  labels: labelsProp,
+  platform
+}) {
+  const { styles } = useStyles(sheet);
+  const theme = useLoamTheme("permission");
+  const android = (platform ?? (isAndroidIdiom(theme) ? "android" : "ios")) === "android";
+  const labels = useLabels("permission", DEFAULT_LABELS, labelsProp);
+  const allow = allowLabel ?? labels.allow;
+  const deny = denyLabel ?? labels.deny;
+  const level = useResolvedMotion(motion, "permission");
+  const rise = React.useRef(new Animated.Value(level === "full" ? 0 : 1)).current;
+  React.useEffect(() => {
+    if (level !== "full") return;
+    const run = Animated.spring(rise, {
+      ...springConfig(theme, "ds"),
+      toValue: 1,
+      useNativeDriver: true
+    });
+    run.start();
+    return () => run.stop();
+  }, []);
+  return /* @__PURE__ */ jsxs(
+    Animated.View,
+    {
+      style: [
+        styles.primer,
+        size === "compact" && styles.primerCompact,
+        variant === "outline" && styles.primerOutline,
+        variant === "solid" && styles.primerSolid,
+        {
+          opacity: rise,
+          transform: [
+            {
+              translateY: rise.interpolate({
+                inputRange: [0, 1],
+                outputRange: [theme.space.s6, 0]
+              })
+            }
+          ]
+        }
+      ],
+      accessibilityRole: "alert",
+      children: [
+        /* @__PURE__ */ jsx(
+          Animated.View,
+          {
+            style: [
+              {
+                transform: [{ scale: rise.interpolate({ inputRange: [0, 1], outputRange: [0.9, 1] }) }]
+              }
+            ],
+            children: /* @__PURE__ */ jsx(IconTile, { icon, tone, size: size === "compact" ? "md" : "lg" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Text,
+          {
+            accessibilityRole: "header",
+            style: [
+              styles.primerTitle,
+              // Android: the sans headline role (24 / 400) at regular weight.
+              android && {
+                ...resolveTextRole(theme, "headlineSmall", true),
+                fontFamily: theme.font.sans,
+                fontWeight: theme.fontWeight.regular
+              }
+            ],
+            children: title
+          }
+        ),
+        /* @__PURE__ */ jsx(Text, { style: styles.primerBody, children: description }),
+        /* @__PURE__ */ jsxs(View, { style: styles.primerActions, children: [
+          /* @__PURE__ */ jsx(Button, { size: "lg", variant: "primary", fullWidth: true, accessibilityLabel: allow, onPress: onAllow, children: allow }),
+          /* @__PURE__ */ jsx(Button, { size: "lg", variant: "ghost", fullWidth: true, accessibilityLabel: deny, onPress: onDeny, children: deny })
+        ] })
+      ]
+    }
+  );
+}
+function PermissionDenied({
+  icon = "lock",
+  title,
+  description,
+  settingsLabel,
+  onOpenSettings,
+  capabilities = [],
+  tone = "warn",
+  variant,
+  size,
+  labels: labelsProp
+}) {
+  const { styles } = useStyles(sheet);
+  const labels = useLabels("permission", DEFAULT_LABELS, labelsProp);
+  const titleText = title ?? labels.deniedTitle;
+  const settings = settingsLabel ?? labels.openSettings;
+  return /* @__PURE__ */ jsxs(View, { style: styles.deniedRoot, children: [
+    /* @__PURE__ */ jsx(
+      Alert,
+      {
+        tone,
+        variant,
+        size,
+        icon,
+        title: titleText,
+        description,
+        action: /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "sm",
+            variant: variant === "solid" ? "tonal" : "outline",
+            accessibilityLabel: settings,
+            onPress: onOpenSettings ?? (() => void Linking.openSettings?.()),
+            children: settings
+          }
+        )
+      }
+    ),
+    capabilities.length > 0 ? (
+      // Dimmed and inert: these rows show the cost of the denial, and must not
+      // look like something the user can flip on from here.
+      /* @__PURE__ */ jsx(
+        View,
+        {
+          role: "group",
+          style: styles.capList,
+          accessibilityLabel: labels.unavailableCapabilities,
+          children: capabilities.map((c) => /* @__PURE__ */ jsxs(
+            View,
+            {
+              accessible: true,
+              accessibilityRole: "text",
+              accessibilityLabel: c.on ? c.label : labels.capabilityOff(c.label),
+              "aria-disabled": c.managed || void 0,
+              style: [styles.capRow, c.managed && styles.managed],
+              children: [
+                /* @__PURE__ */ jsx(Text, { style: styles.capLabel, children: c.label }),
+                /* @__PURE__ */ jsx(
+                  View,
+                  {
+                    accessible: false,
+                    accessibilityElementsHidden: true,
+                    importantForAccessibility: "no-hide-descendants",
+                    "aria-hidden": true,
+                    children: /* @__PURE__ */ jsx(Switch, { decorative: true, value: c.on ?? false, disabled: c.managed })
+                  }
+                )
+              ]
+            },
+            c.id
+          ))
+        }
+      )
+    ) : null
+  ] });
+}
+var sheet = createStyleSheet((theme) => ({
+  // ---- primer ----
+  primer: {
+    paddingVertical: theme.space.s4,
+    paddingHorizontal: theme.space.s6,
+    borderRadius: theme.radius.lg,
+    backgroundColor: theme.color.surface,
+    alignItems: "center",
+    gap: theme.space[13],
+    // `shadow.lg` is the only thing lifting this card off the page, and high
+    // contrast zeroes it — `edge.neutral` takes over there, and is `transparent`
+    // before that so the primer keeps its borderless look.
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.edge.neutral,
+    ...theme.shadow.lg
+  },
+  primerCompact: {
+    paddingVertical: theme.space.s2,
+    paddingHorizontal: theme.space.s4,
+    gap: theme.space.s2
+  },
+  primerOutline: { borderColor: theme.color.border, shadowOpacity: 0, elevation: 0 },
+  primerSolid: { backgroundColor: theme.color.surface2, shadowOpacity: 0, elevation: 0 },
+  primerTitle: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.semibold,
+    fontSize: theme.type.title3.fontSize,
+    color: theme.color.text,
+    textAlign: "center"
+  },
+  primerBody: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.fontSize * 1.5,
+    color: theme.color.text2,
+    textAlign: "center"
+  },
+  primerActions: { alignSelf: "stretch", gap: theme.space.s2 },
+  flowRoot: { gap: theme.space.s4 },
+  // ---- denied ----
+  deniedRoot: { gap: theme.space.s4 },
+  capList: {
+    borderRadius: theme.radius.lg,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.color.border,
+    backgroundColor: theme.color.surface,
+    overflow: "hidden",
+    pointerEvents: "none"
+  },
+  capRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    padding: theme.space[14],
+    borderBottomWidth: theme.borderWidth.base,
+    borderBottomColor: theme.color.border
+  },
+  capLabel: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[14],
+    color: theme.color.text
+  },
+  managed: { opacity: theme.state.disabledOpacity }
+}));
+function permissionShowsDenied(status, denials, os) {
+  if (status === "blocked") return true;
+  if (status !== "denied") return false;
+  return os === "ios" || denials >= 2;
+}
+function PermissionFlow({
+  status,
+  denials = 0,
+  platform,
+  primer,
+  denied,
+  icon,
+  size,
+  variant,
+  action
+}) {
+  const theme = useLoamTheme("permission");
+  const { styles } = useStyles(sheet);
+  if (status === "granted") return null;
+  const os = platform ?? (isAndroidIdiom(theme) ? "android" : "ios");
+  const showsDenied = permissionShowsDenied(status, denials, os);
+  const shown = showsDenied ? /* @__PURE__ */ jsx(PermissionDenied, { icon, size, variant, ...denied }) : /* @__PURE__ */ jsx(PermissionPrimer, { platform: os, icon, size, variant, ...primer });
+  if (action === void 0 || action === null) return shown;
+  return /* @__PURE__ */ jsxs(View, { style: styles.flowRoot, children: [
+    shown,
+    action
+  ] });
+}
+
+export { PermissionDenied, PermissionFlow, PermissionPrimer, permissionShowsDenied };