@btndprojects/loam-ui-native 0.1.1 → 0.2.1

package/dist/{chunk-QCDXZBC5.js → chunk-O5V4TG3V.js}

@@ -1,73 +1,135 @@
-import { Icon } from './chunk-TKVFVF5D.js';
-import 'react';
-import { View, Text, Pressable } from 'react-native';
+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, Text, Pressable, View } 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 = "Continue",
+  allowLabel,
   onAllow,
-  denyLabel = "Not now",
-  onDeny
+  denyLabel,
+  onDeny,
+  motion = "full",
+  labels: labelsProp
 }) {
   const { styles } = useStyles(sheet);
-  const theme = useLoamTheme();
-  return /* @__PURE__ */ jsxs(View, { style: styles.primer, accessibilityRole: "alert", children: [
-    /* @__PURE__ */ jsx(View, { style: styles.primerTile, children: /* @__PURE__ */ jsx(Icon, { name: icon, size: 26, color: theme.color.accentOnSoft }) }),
-    /* @__PURE__ */ jsx(Text, { style: styles.primerTitle, children: title }),
-    /* @__PURE__ */ jsx(Text, { style: styles.primerBody, children: description }),
-    /* @__PURE__ */ jsx(
-      Pressable,
-      {
-        accessibilityRole: "button",
-        accessibilityLabel: allowLabel,
-        onPress: onAllow,
-        style: ({ pressed }) => [styles.allow, pressed && styles.pressed],
-        children: /* @__PURE__ */ jsx(Text, { style: styles.allowLabel, children: allowLabel })
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      Pressable,
-      {
-        accessibilityRole: "button",
-        accessibilityLabel: denyLabel,
-        onPress: onDeny,
-        style: ({ pressed }) => [styles.deny, pressed && styles.pressed],
-        children: /* @__PURE__ */ jsx(Text, { style: styles.denyLabel, children: denyLabel })
-      }
-    )
-  ] });
+  const labels = useLabels("permission", DEFAULT_LABELS, labelsProp);
+  const allow = allowLabel ?? labels.allow;
+  const deny = denyLabel ?? labels.deny;
+  const theme = useLoamTheme("permission");
+  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,
+        {
+          opacity: rise,
+          transform: [
+            {
+              translateY: rise.interpolate({
+                inputRange: [0, 1],
+                outputRange: [theme.space.s6, 0]
+              })
+            }
+          ]
+        }
+      ],
+      accessibilityRole: "alert",
+      children: [
+        /* @__PURE__ */ jsx(
+          Animated.View,
+          {
+            style: [
+              styles.primerTile,
+              {
+                transform: [{ scale: rise.interpolate({ inputRange: [0, 1], outputRange: [0.9, 1] }) }]
+              }
+            ],
+            children: /* @__PURE__ */ jsx(Icon, { name: icon, size: 26, color: theme.color.accentOnSoft })
+          }
+        ),
+        /* @__PURE__ */ jsx(Text, { accessibilityRole: "header", style: styles.primerTitle, children: title }),
+        /* @__PURE__ */ jsx(Text, { style: styles.primerBody, children: description }),
+        /* @__PURE__ */ jsx(
+          Pressable,
+          {
+            accessibilityRole: "button",
+            accessibilityLabel: allow,
+            onPress: onAllow,
+            style: ({ pressed }) => [styles.allow, pressed && styles.pressed],
+            children: /* @__PURE__ */ jsx(Text, { style: styles.allowLabel, children: allow })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Pressable,
+          {
+            accessibilityRole: "button",
+            accessibilityLabel: deny,
+            onPress: onDeny,
+            style: ({ pressed }) => [styles.deny, pressed && styles.pressed],
+            children: /* @__PURE__ */ jsx(Text, { style: styles.denyLabel, children: deny })
+          }
+        )
+      ]
+    }
+  );
 }
 function PermissionDenied({
   icon = "lock",
-  title = "Turned off in Settings",
+  title,
   description,
-  settingsLabel = "Open Settings",
+  settingsLabel,
   onOpenSettings,
-  capabilities = []
+  capabilities = [],
+  labels: labelsProp
 }) {
   const { styles } = useStyles(sheet);
-  const theme = useLoamTheme();
+  const labels = useLabels("permission", DEFAULT_LABELS, labelsProp);
+  const titleText = title ?? labels.deniedTitle;
+  const settings = settingsLabel ?? labels.openSettings;
+  const theme = useLoamTheme("permission");
   const ctaSlop = Math.max(0, (theme.hit.sm - theme.ctl.sm) / 2);
   return /* @__PURE__ */ jsxs(View, { style: styles.deniedRoot, children: [
     /* @__PURE__ */ jsxs(View, { style: styles.deniedCard, children: [
       /* @__PURE__ */ jsxs(View, { style: styles.deniedHead, children: [
         /* @__PURE__ */ jsx(Icon, { name: icon, size: 17, color: theme.color.warnOnSoft }),
-        /* @__PURE__ */ jsx(Text, { style: styles.deniedTitle, children: title })
+        /* @__PURE__ */ jsx(Text, { accessibilityRole: "header", style: styles.deniedTitle, children: titleText })
       ] }),
       /* @__PURE__ */ jsx(Text, { style: styles.deniedBody, children: description }),
       /* @__PURE__ */ jsx(
         Pressable,
         {
           accessibilityRole: "button",
-          accessibilityLabel: settingsLabel,
+          accessibilityLabel: settings,
           onPress: onOpenSettings,
           hitSlop: { top: ctaSlop, bottom: ctaSlop },
           style: ({ pressed }) => [styles.settings, pressed && styles.pressed],
-          children: /* @__PURE__ */ jsx(Text, { style: styles.settingsLabel, children: settingsLabel })
+          children: /* @__PURE__ */ jsx(Text, { style: styles.settingsLabel, children: settings })
         }
       )
     ] }),
@@ -79,11 +141,31 @@ function PermissionDenied({
         {
           role: "group",
           style: styles.capList,
-          accessibilityLabel: "Unavailable until the permission is re-enabled",
-          children: capabilities.map((c) => /* @__PURE__ */ jsxs(View, { style: styles.capRow, children: [
-            /* @__PURE__ */ jsx(Text, { style: styles.capLabel, children: c.label }),
-            /* @__PURE__ */ jsx(View, { style: styles.capSwitch, children: /* @__PURE__ */ jsx(View, { style: styles.capThumb }) })
-          ] }, c.id))
+          accessibilityLabel: labels.unavailableCapabilities,
+          children: capabilities.map((c) => /* @__PURE__ */ jsxs(
+            View,
+            {
+              accessible: true,
+              accessibilityRole: "text",
+              accessibilityLabel: labels.capabilityOff(c.label),
+              style: styles.capRow,
+              children: [
+                /* @__PURE__ */ jsx(Text, { style: styles.capLabel, children: c.label }),
+                /* @__PURE__ */ jsx(
+                  View,
+                  {
+                    style: styles.capSwitch,
+                    accessible: false,
+                    accessibilityElementsHidden: true,
+                    importantForAccessibility: "no-hide-descendants",
+                    "aria-hidden": true,
+                    children: /* @__PURE__ */ jsx(View, { style: styles.capThumb })
+                  }
+                )
+              ]
+            },
+            c.id
+          ))
         }
       )
     ) : null

package/dist/{chunk-U7TFM2JA.js → chunk-OJQUBQWA.js}

@@ -1,4 +1,4 @@
-import { Card } from './chunk-KMI5ML5I.js';
+import { Card } from './chunk-YXOAPXMU.js';
 import * as React from 'react';
 import { Animated, View, Text, Pressable, StyleSheet } from 'react-native';
 import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
@@ -10,7 +10,7 @@ var FAMILY = {
   large: { width: 344, aspectRatio: 0.86 }
 };
 function useToneStyles(tone, accent) {
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("widget");
   if (tone === "neutral") {
     return { surface: void 0, titleColor: theme.color.text };
   }
@@ -45,7 +45,7 @@ function Widget({
   accessibilityLabel
 }) {
   const { styles } = useStyles(sheet, { size });
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("widget");
   const { surface, titleColor } = useToneStyles(tone, accent);
   const announced = accessibilityLabel ?? title;
   const pressScale = theme.reduceMotion ? 1 : motion === "full" ? 0.97 : motion === "reduced" ? 0.99 : 1;

package/dist/{chunk-VQHPQEUH.js → chunk-OWAMM2DK.js}

@@ -1,6 +1,7 @@
-import { NumberRoll } from './chunk-CUMUNPXY.js';
+import { NumberRoll } from './chunk-T5LTPKX6.js';
 import { haptics } from './chunk-NY2U3PBI.js';
-import { Icon } from './chunk-TKVFVF5D.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-UXGIW7OK.js';
 import * as React from 'react';
 import { Animated, View, Pressable, TextInput, Easing } from 'react-native';
 import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
@@ -8,6 +9,10 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 
 var BUTTON_PRESS_SCALE = 0.88;
 var ROLL_H = { xs: 18, sm: 20, md: 24, lg: 28 };
+var DEFAULT_LABELS = {
+  decrease: "Decrement",
+  increase: "Increment"
+};
 function clamp(n, lo, hi) {
   const low = Math.max(lo, n);
   return hi === void 0 ? low : Math.min(hi, low);
@@ -27,13 +32,15 @@ function Stepper({
   editable = false,
   accessibilityLabel,
   pill = false,
-  motion = "full"
+  motion = "full",
+  labels: labelsProp
 }) {
+  const labels = useLabels("stepper", DEFAULT_LABELS, labelsProp);
   const isControlled = value !== void 0;
   const [internal, setInternal] = React.useState(defaultValue ?? min);
   const current = clamp(isControlled ? value : internal, min, max);
   const { styles } = useStyles(sheet, { size, pill });
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("stepper");
   const atMin = current <= min;
   const atMax = max !== void 0 && current >= max;
   const setValue = React.useCallback(
@@ -87,7 +94,7 @@ function Stepper({
         Pressable,
         {
           accessibilityRole: "button",
-          accessibilityLabel: "Decrement",
+          accessibilityLabel: labels.decrease,
           accessibilityState: { disabled: disabled || atMin },
           disabled: disabled || atMin,
           onPress: disabled || atMin ? void 0 : decrement,
@@ -143,7 +150,7 @@ function Stepper({
         Pressable,
         {
           accessibilityRole: "button",
-          accessibilityLabel: "Increment",
+          accessibilityLabel: labels.increase,
           accessibilityState: { disabled: disabled || atMax },
           disabled: disabled || atMax,
           onPress: disabled || atMax ? void 0 : increment,