@btndprojects/loam-ui-native 0.1.0 → 0.2.1

package/dist/{chunk-F5XNPWS7.js → chunk-2TXERVVA.js}

@@ -1,5 +1,6 @@
-import { Avatar } from './chunk-QDYDBCFP.js';
-import { Icon } from './chunk-TKVFVF5D.js';
+import { Avatar } from './chunk-V2OEB75Z.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-UXGIW7OK.js';
 import * as React4 from 'react';
 import { Platform, View, Text, Pressable, Animated, Easing } from 'react-native';
 import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
@@ -58,15 +59,29 @@ var OS_MATERIAL = {
 };
 var OS_MATERIAL_INK_OPACITY = { secondary: 0.85, tertiary: 0.7 };
 var LOCK_SCREEN_WALLPAPER = "#2b2620";
+
+// src/os-surfaces/labels.ts
+var DEFAULT_LABELS = {
+  appIconPreview: (px, sizeClass, shape) => `App icon preview, ${px} px ${sizeClass}, ${shape} mask`,
+  launchScreenPreview: "Launch screen preview",
+  cancel: "Cancel",
+  moreGrouped: (count) => `+${count} more`,
+  lockScreenPreview: "Lock screen preview",
+  shareSheetPreview: "Share sheet preview",
+  shareWith: (name) => `Share with ${name}`,
+  textSelectionMenu: "Text selection menu"
+};
 function AppIconPreview({
   sizeClass = "home",
   size,
   shape,
   showCaption = false,
-  accessibilityLabel
+  accessibilityLabel,
+  labels: labelsProp
 }) {
   const { styles } = useStyles(sheet);
-  const theme = useLoamTheme();
+  const labels = useLabels("osSurfaces", DEFAULT_LABELS, labelsProp);
+  const theme = useLoamTheme("os-surfaces");
   const px = size ?? APP_ICON_PREVIEW_PX[sizeClass];
   const resolved = shape ?? (Platform.OS === "android" ? "circle" : "squircle");
   const radius = resolved === "circle" ? px * ANDROID_ICON_MASK_RATIO : Math.round(px * IOS_ICON_CORNER_RATIO);
@@ -77,7 +92,7 @@ function AppIconPreview({
       View,
       {
         accessibilityRole: "image",
-        accessibilityLabel: accessibilityLabel ?? `App icon preview, ${APP_ICON_ASSET_PX[sizeClass]} px ${sizeClass}, ${resolved} mask`,
+        accessibilityLabel: accessibilityLabel ?? labels.appIconPreview(APP_ICON_ASSET_PX[sizeClass], sizeClass, resolved),
         style: [
           styles.tile,
           {
@@ -128,16 +143,26 @@ var sheet = createStyleSheet((theme) => ({
 function LaunchScreenPreview({
   wordmark,
   reviewNote,
-  accessibilityLabel = "Launch screen preview"
+  accessibilityLabel,
+  labels: labelsProp
 }) {
   const { styles } = useStyles(sheet2);
-  return /* @__PURE__ */ jsxs(View, { accessibilityRole: "image", accessibilityLabel, style: styles.screen, children: [
-    /* @__PURE__ */ jsxs(View, { style: styles.stack, children: [
-      /* @__PURE__ */ jsx(View, { style: styles.mark }),
-      wordmark ? /* @__PURE__ */ jsx(Text, { style: styles.wordmark, children: wordmark }) : null
-    ] }),
-    reviewNote ? /* @__PURE__ */ jsx(Text, { style: styles.note, children: reviewNote }) : null
-  ] });
+  const labels = useLabels("osSurfaces", DEFAULT_LABELS, labelsProp);
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      accessibilityRole: "image",
+      accessibilityLabel: accessibilityLabel ?? labels.launchScreenPreview,
+      style: styles.screen,
+      children: [
+        /* @__PURE__ */ jsxs(View, { style: styles.stack, children: [
+          /* @__PURE__ */ jsx(View, { style: styles.mark }),
+          wordmark ? /* @__PURE__ */ jsx(Text, { style: styles.wordmark, children: wordmark }) : null
+        ] }),
+        reviewNote ? /* @__PURE__ */ jsx(Text, { style: styles.note, children: reviewNote }) : null
+      ]
+    }
+  );
 }
 var sheet2 = createStyleSheet((theme) => ({
   // The reference paints a flat `var(--accent)` here — the one screen in the
@@ -181,12 +206,19 @@ var sheet2 = createStyleSheet((theme) => ({
 }));
 var NOTIFICATION_TILE = { size: 26, radius: 8 };
 var GROUP_STACK_OFFSET = 6;
-function announce({ title, body, time }) {
-  return [title, body, time].filter(Boolean).join(", ");
+function announce({ appName, title, body, time, groupCount }, labels) {
+  return [
+    appName,
+    title,
+    body,
+    time,
+    groupCount && groupCount > 0 ? labels.moreGrouped(groupCount) : void 0
+  ].filter(Boolean).join(", ");
 }
 function NotificationBanner(props) {
   const { styles } = useStyles(sheet3);
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("os-surfaces");
+  const labels = useLabels("osSurfaces", DEFAULT_LABELS, props.labels);
   const { appName, icon, title, body, time, actionLabel, onAction, onPress, groupCount, style } = props;
   const android = Platform.OS === "android";
   const content = /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -201,7 +233,7 @@ function NotificationBanner(props) {
         !android && time ? /* @__PURE__ */ jsx(Text, { style: styles.time, children: time }) : null
       ] }),
       /* @__PURE__ */ jsx(Text, { style: styles.body, numberOfLines: 2, children: body }),
-      groupCount && groupCount > 0 ? /* @__PURE__ */ jsx(Text, { style: styles.group, children: `+${groupCount} more` }) : null
+      groupCount && groupCount > 0 ? /* @__PURE__ */ jsx(Text, { style: styles.group, children: labels.moreGrouped(groupCount) }) : null
     ] })
   ] });
   return /* @__PURE__ */ jsxs(View, { style: styles.stackRoot, children: [
@@ -210,12 +242,20 @@ function NotificationBanner(props) {
         Pressable,
         {
           accessibilityRole: "button",
-          accessibilityLabel: announce(props),
+          accessibilityLabel: announce(props, labels),
           onPress,
           style: ({ pressed }) => [styles.bannerBody, pressed ? styles.pressed : null],
           children: content
         }
-      ) : /* @__PURE__ */ jsx(View, { accessibilityRole: "image", accessibilityLabel: announce(props), style: styles.bannerBody, children: content }),
+      ) : /* @__PURE__ */ jsx(
+        View,
+        {
+          accessibilityRole: "image",
+          accessibilityLabel: announce(props, labels),
+          style: styles.bannerBody,
+          children: content
+        }
+      ),
       actionLabel ? /* @__PURE__ */ jsx(
         Pressable,
         {
@@ -232,6 +272,7 @@ function NotificationBanner(props) {
 }
 function LockScreenNotification(props) {
   const { styles } = useStyles(sheet3);
+  const labels = useLabels("osSurfaces", DEFAULT_LABELS, props.labels);
   const { title, body, time, actionLabel, onAction, onPress, groupCount, style } = props;
   const content = /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(View, { style: styles.materialTile }),
@@ -241,7 +282,7 @@ function LockScreenNotification(props) {
         time ? /* @__PURE__ */ jsx(Text, { style: styles.materialTime, children: time }) : null
       ] }),
       /* @__PURE__ */ jsx(Text, { style: styles.materialBody, numberOfLines: 2, children: body }),
-      groupCount && groupCount > 0 ? /* @__PURE__ */ jsx(Text, { style: styles.materialTime, children: `+${groupCount} more` }) : null
+      groupCount && groupCount > 0 ? /* @__PURE__ */ jsx(Text, { style: styles.materialTime, children: labels.moreGrouped(groupCount) }) : null
     ] })
   ] });
   return /* @__PURE__ */ jsxs(View, { style: styles.stackRoot, children: [
@@ -250,12 +291,20 @@ function LockScreenNotification(props) {
         Pressable,
         {
           accessibilityRole: "button",
-          accessibilityLabel: announce(props),
+          accessibilityLabel: announce(props, labels),
           onPress,
           style: ({ pressed }) => [styles.materialBodyRow, pressed ? styles.pressed : null],
           children: content
         }
-      ) : /* @__PURE__ */ jsx(View, { accessibilityRole: "image", accessibilityLabel: announce(props), style: styles.materialBodyRow, children: content }),
+      ) : /* @__PURE__ */ jsx(
+        View,
+        {
+          accessibilityRole: "image",
+          accessibilityLabel: announce(props, labels),
+          style: styles.materialBodyRow,
+          children: content
+        }
+      ),
       actionLabel ? /* @__PURE__ */ jsx(
         Pressable,
         {
@@ -276,14 +325,16 @@ function LockScreenPreview({
   activity,
   notifications = [],
   onNotificationPress,
-  wallpaperColor = LOCK_SCREEN_WALLPAPER
+  wallpaperColor = LOCK_SCREEN_WALLPAPER,
+  labels: labelsProp
 }) {
   const { styles } = useStyles(sheet3);
+  const labels = useLabels("osSurfaces", DEFAULT_LABELS, labelsProp);
   return /* @__PURE__ */ jsxs(
     View,
     {
       role: "group",
-      accessibilityLabel: "Lock screen preview",
+      accessibilityLabel: labels.lockScreenPreview,
       style: [styles.lockScreen, { backgroundColor: wallpaperColor }],
       children: [
         /* @__PURE__ */ jsxs(View, { style: styles.clock, children: [
@@ -492,12 +543,14 @@ function LiveActivityPreview({
   detail,
   icon = "upload",
   presentation = "lockScreen",
-  cancelLabel = "Cancel",
+  cancelLabel,
   onCancel,
-  accessibilityLabel
+  accessibilityLabel,
+  labels: labelsProp
 }) {
   const { styles } = useStyles(sheet4);
-  const theme = useLoamTheme();
+  const labels = useLabels("osSurfaces", DEFAULT_LABELS, labelsProp);
+  const theme = useLoamTheme("os-surfaces");
   const announced = accessibilityLabel ?? [title, status, detail].filter(Boolean).join(", ");
   const fraction = progress === void 0 ? void 0 : clamp01(progress);
   const percent = fraction === void 0 ? void 0 : Math.round(fraction * 100);
@@ -585,7 +638,7 @@ function LiveActivityPreview({
         Pressable,
         {
           accessibilityRole: "button",
-          accessibilityLabel: cancelLabel,
+          accessibilityLabel: cancelLabel ?? labels.cancel,
           onPress: onCancel,
           style: ({ pressed }) => [styles.cancel, pressed ? styles.pressed : null],
           children: /* @__PURE__ */ jsx(Icon, { name: "x", size: theme.icon.sm, color: OS_MATERIAL.ink })
@@ -704,7 +757,7 @@ function WidgetPreview({
   accessibilityLabel
 }) {
   const { styles } = useStyles(sheet5);
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("os-surfaces");
   const size = WIDGET_SIZE[sizeClass];
   const android = Platform.OS === "android";
   const radius = android ? WIDGET_CORNER.android : WIDGET_CORNER.iOS;
@@ -825,11 +878,13 @@ function ShareSheetPreview({
   people = [],
   onPersonPress,
   actions = [],
-  onActionPress
+  onActionPress,
+  labels: labelsProp
 }) {
   const { styles } = useStyles(sheet6);
-  const theme = useLoamTheme();
-  return /* @__PURE__ */ jsxs(View, { role: "group", accessibilityLabel: "Share sheet preview", style: styles.sheet, children: [
+  const labels = useLabels("osSurfaces", DEFAULT_LABELS, labelsProp);
+  const theme = useLoamTheme("os-surfaces");
+  return /* @__PURE__ */ jsxs(View, { role: "group", accessibilityLabel: labels.shareSheetPreview, style: styles.sheet, children: [
     /* @__PURE__ */ jsx(View, { style: styles.grabber }),
     /* @__PURE__ */ jsxs(View, { style: styles.preview, children: [
       /* @__PURE__ */ jsx(View, { style: styles.previewTile, children: /* @__PURE__ */ jsx(Icon, { name: icon, size: theme.icon.md, color: theme.color.accentOnSoft }) }),
@@ -842,7 +897,7 @@ function ShareSheetPreview({
       Pressable,
       {
         accessibilityRole: "button",
-        accessibilityLabel: `Share with ${p.name}`,
+        accessibilityLabel: labels.shareWith(p.name),
         onPress: onPersonPress ? () => onPersonPress(p.id) : void 0,
         style: ({ pressed }) => [styles.person, pressed ? styles.pressed : null],
         children: [
@@ -875,16 +930,18 @@ function ShareSheetPreview({
 function TextSelectionMenu({
   items,
   onItemPress,
-  platform
+  platform,
+  labels: labelsProp
 }) {
   const { styles } = useStyles(sheet6);
+  const labels = useLabels("osSurfaces", DEFAULT_LABELS, labelsProp);
   const resolved = platform ?? (Platform.OS === "android" ? "Android" : "iOS");
   const ios = resolved === "iOS";
   return /* @__PURE__ */ jsx(
     View,
     {
       accessibilityRole: "menu",
-      accessibilityLabel: "Text selection menu",
+      accessibilityLabel: labels.textSelectionMenu,
       style: [styles.menu, ios ? styles.menuIOS : styles.menuAndroid],
       children: items.map((item, i) => /* @__PURE__ */ jsx(
         Pressable,