@btndprojects/loam-ui-native 0.1.0 → 0.2.1

package/dist/{chunk-JXJB2X6M.js → chunk-Q6NKEPRE.js}

@@ -1,11 +1,11 @@
-import { useColorTransition } from './chunk-ITTYJZWX.js';
+import { useColorTransition } from './chunk-7BUIKDD6.js';
 import { haptics } from './chunk-NY2U3PBI.js';
-import { useResolvedMotion } from './chunk-6N33LFQA.js';
-import { Icon } from './chunk-TKVFVF5D.js';
+import { Icon } from './chunk-UXGIW7OK.js';
+import { useResolvedMotion, springConfig } from './chunk-J64KGCGX.js';
 import * as React from 'react';
-import { Easing, Animated, Pressable, Platform } from 'react-native';
+import { Easing, Animated, Pressable, View, Text, Platform } from 'react-native';
 import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
-import { jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 
 var BOX = { sm: 16, md: 24 };
 var GLYPH = { sm: 12, md: 14 };
@@ -14,7 +14,7 @@ function nextChecked(current) {
   return current === true ? false : true;
 }
 function useResolvedPlatform(explicit) {
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("checkbox");
   if (explicit) return explicit;
   if (Platform.OS === "ios") return "ios";
   if (Platform.OS === "android") return "android";
@@ -28,7 +28,8 @@ function Checkbox({
   platform,
   disabled = false,
   motion = "full",
-  accessibilityLabel
+  accessibilityLabel,
+  label
 }) {
   const isControlled = checked !== void 0;
   const [internal, setInternal] = React.useState(defaultChecked);
@@ -36,30 +37,32 @@ function Checkbox({
   const isChecked = value === true;
   const isIndeterminate = value === "indeterminate";
   const isOn = isChecked || isIndeterminate;
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("checkbox");
   const os = useResolvedPlatform(platform);
   const { styles } = useStyles(sheet, { shape: `${os}-${size}`, disabled });
-  const resolvedMotion = useResolvedMotion(motion);
+  const hasLabel = label != null && label !== "";
+  const resolvedMotion = useResolvedMotion(motion, "checkbox");
   const animateColour = resolvedMotion !== "none";
   const animatePress = resolvedMotion === "full";
   const easing = React.useMemo(() => Easing.bezier(...theme.easing.base), [theme.easing.base]);
+  const fillMs = isOn ? theme.spring.de.duration : theme.spring.fe.duration;
   const backgroundColor = useColorTransition(
     isOn ? theme.color.accent : "transparent",
-    theme.duration.base,
+    fillMs,
     easing,
     animateColour
   );
   const borderColor = useColorTransition(
     isOn ? theme.color.accent : theme.color.borderStrong,
-    theme.duration.base,
+    fillMs,
     easing,
     animateColour
   );
   const scale = React.useRef(new Animated.Value(1)).current;
   const spring = (to) => Animated.spring(scale, {
+    ...springConfig(theme, "fs"),
     toValue: to,
-    useNativeDriver: true,
-    ...theme.spring.press
+    useNativeDriver: true
   }).start();
   const handlePress = () => {
     const next = nextChecked(value);
@@ -67,33 +70,65 @@ function Checkbox({
     haptics.impact("light");
     onCheckedChange?.(next);
   };
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(
     Pressable,
     {
       accessibilityRole: "checkbox",
-      accessibilityLabel,
+      accessibilityLabel: accessibilityLabel ?? label,
       accessibilityState: { checked: isIndeterminate ? "mixed" : isChecked, disabled },
       "aria-checked": isIndeterminate ? "mixed" : isChecked,
       disabled,
+      hitSlop: hasLabel ? void 0 : Math.max(0, (theme.tapMin - BOX[size]) / 2),
+      style: hasLabel ? [styles.row, { minHeight: theme.tapMin }] : void 0,
       onPress: disabled ? void 0 : handlePress,
-      onPressIn: disabled || !animatePress ? void 0 : () => spring(0.9),
+      onPressIn: disabled || !animatePress ? void 0 : () => spring(0.96),
       onPressOut: disabled || !animatePress ? void 0 : () => spring(1),
-      children: /* @__PURE__ */ jsx(
-        Animated.View,
-        {
-          testID: "checkbox-box",
-          style: [styles.box, { backgroundColor, borderColor, transform: [{ scale }] }],
-          children: isOn ? /* @__PURE__ */ jsx(
-            Icon,
-            {
-              name: isIndeterminate ? "minus" : "check",
-              size: GLYPH[size],
-              color: theme.color.accentInk,
-              strokeWidth: CHECK_STROKE
-            }
-          ) : null
-        }
-      )
+      children: [
+        /* @__PURE__ */ jsx(
+          Animated.View,
+          {
+            testID: "checkbox-box",
+            style: [styles.box, { backgroundColor, borderColor, transform: [{ scale }] }],
+            children: isOn ? /* @__PURE__ */ jsx(
+              Glyph,
+              {
+                name: isIndeterminate ? "minus" : "check",
+                size: GLYPH[size],
+                color: theme.color.accentInk,
+                animate: animatePress
+              },
+              isIndeterminate ? "minus" : "check"
+            ) : null
+          }
+        ),
+        hasLabel ? (
+          // Part of the control's name already — not a second element to reach.
+          /* @__PURE__ */ jsx(View, { accessible: false, importantForAccessibility: "no", style: styles.labelWrap, children: /* @__PURE__ */ jsx(Text, { style: styles.label, children: label }) })
+        ) : null
+      ]
+    }
+  );
+}
+function Glyph({
+  name,
+  size,
+  color,
+  animate
+}) {
+  const theme = useLoamTheme("checkbox");
+  const p = React.useRef(new Animated.Value(animate ? 0 : 1)).current;
+  React.useEffect(() => {
+    if (!animate) return;
+    Animated.spring(p, { ...springConfig(theme, "ds"), toValue: 1, useNativeDriver: true }).start();
+  }, [animate, p, theme]);
+  return /* @__PURE__ */ jsx(
+    Animated.View,
+    {
+      style: {
+        opacity: p.interpolate({ inputRange: [0, 1], outputRange: [0, 1], extrapolate: "clamp" }),
+        transform: [{ scale: p.interpolate({ inputRange: [0, 1], outputRange: [0.5, 1] }) }]
+      },
+      children: /* @__PURE__ */ jsx(Icon, { name, size, color, strokeWidth: CHECK_STROKE })
     }
   );
 }
@@ -105,6 +140,20 @@ function boxStyle(os, size, radius) {
   };
 }
 var sheet = createStyleSheet((theme) => ({
+  row: { flexDirection: "row", alignItems: "center", gap: theme.space.s2 },
+  labelWrap: { flexShrink: 1 },
+  label: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    color: theme.color.text,
+    variants: {
+      disabled: {
+        true: { opacity: theme.state.disabledOpacity },
+        false: {}
+      }
+    }
+  },
   // `backgroundColor` / `borderColor` are supplied at the use site as animated
   // values so the box can travel between states over `duration.base`.
   box: {

package/dist/chunk-QDZGFXQD.js

@@ -0,0 +1,176 @@
+import { useLabels } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-UXGIW7OK.js';
+import { useResolvedMotion, motionTiming, springConfig } from './chunk-J64KGCGX.js';
+import * as React from 'react';
+import { Animated, View, Text, Pressable, LayoutAnimation } from 'react-native';
+import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var DEFAULT_LABELS = {
+  dismiss: "Dismiss"
+};
+var TONE_ICON = {
+  info: "info",
+  good: "check-circle",
+  warn: "alert-triangle",
+  danger: "alert-circle",
+  neutral: "info"
+};
+function alertToneColors(theme, tone) {
+  switch (tone) {
+    case "good":
+      return {
+        glyph: theme.color.goodOnSoft,
+        border: theme.color.good,
+        tint: theme.color.goodSoft
+      };
+    case "warn":
+      return {
+        glyph: theme.color.warnOnSoft,
+        border: theme.color.warn,
+        tint: theme.color.warnSoft
+      };
+    case "danger":
+      return {
+        glyph: theme.color.dangerOnSoft,
+        border: theme.color.danger,
+        tint: theme.color.dangerSoft
+      };
+    case "neutral":
+      return {
+        glyph: theme.color.text2,
+        border: theme.color.borderStrong,
+        tint: theme.color.surface2
+      };
+    default:
+      return {
+        glyph: theme.color.infoOnSoft,
+        border: theme.color.info,
+        tint: theme.color.infoSoft
+      };
+  }
+}
+function Alert({
+  title,
+  description,
+  tone = "info",
+  icon,
+  dismissible = false,
+  onDismiss,
+  action,
+  children,
+  labels: labelsProp
+}) {
+  const labels = useLabels("alert", DEFAULT_LABELS, labelsProp);
+  const { styles } = useStyles(sheet, { tone });
+  const theme = useLoamTheme("alert");
+  const toneColors = alertToneColors(theme, tone);
+  const showDismiss = dismissible || onDismiss != null;
+  const iconName = icon === false ? void 0 : icon ?? TONE_ICON[tone];
+  const dismissHitSlop = Math.max(0, Math.round((theme.tapMin - theme.icon.sm) / 2));
+  const level = useResolvedMotion(void 0, "alert");
+  const enter = React.useRef(new Animated.Value(level === "none" ? 1 : 0)).current;
+  React.useEffect(() => {
+    if (level === "none") return;
+    if (level === "reduced") {
+      Animated.timing(enter, { ...motionTiming(level), toValue: 1, useNativeDriver: true }).start();
+      return;
+    }
+    Animated.spring(enter, { ...springConfig(theme, "ds"), toValue: 1, useNativeDriver: true }).start();
+  }, []);
+  const dismiss = () => {
+    if (level !== "none") {
+      LayoutAnimation.configureNext({
+        duration: theme.spring.ds.duration,
+        delete: { type: LayoutAnimation.Types.easeOut, property: LayoutAnimation.Properties.opacity },
+        update: level === "full" ? { type: LayoutAnimation.Types.spring, springDamping: theme.spring.ds.dampingRatio } : { type: LayoutAnimation.Types.easeOut }
+      });
+    }
+    onDismiss?.();
+  };
+  return /* @__PURE__ */ jsxs(
+    Animated.View,
+    {
+      accessibilityRole: "alert",
+      style: [
+        styles.base,
+        { borderColor: toneColors.border },
+        {
+          opacity: enter,
+          transform: level === "full" ? [{ translateY: enter.interpolate({ inputRange: [0, 1], outputRange: [4, 0] }) }] : []
+        }
+      ],
+      children: [
+        iconName ? /* @__PURE__ */ jsx(View, { style: styles.iconSlot, children: /* @__PURE__ */ jsx(Icon, { name: iconName, size: theme.icon.md, color: toneColors.glyph }) }) : null,
+        /* @__PURE__ */ jsxs(View, { style: styles.content, children: [
+          /* @__PURE__ */ jsx(Text, { style: styles.title, children: title }),
+          description ? /* @__PURE__ */ jsx(Text, { style: styles.description, children: description }) : null,
+          children,
+          action ? /* @__PURE__ */ jsx(View, { style: styles.action, children: action }) : null
+        ] }),
+        showDismiss ? /* @__PURE__ */ jsx(
+          Pressable,
+          {
+            accessibilityRole: "button",
+            accessibilityLabel: labels.dismiss,
+            onPress: dismiss,
+            hitSlop: dismissHitSlop,
+            style: ({ pressed }) => [styles.dismiss, pressed ? styles.pressed : null],
+            children: /* @__PURE__ */ jsx(Icon, { name: "x", size: theme.icon.sm, color: toneColors.glyph })
+          }
+        ) : null
+      ]
+    }
+  );
+}
+var sheet = createStyleSheet((theme) => ({
+  base: {
+    flexDirection: "row",
+    alignItems: "flex-start",
+    gap: theme.space.s3,
+    padding: theme.space.s4,
+    borderRadius: theme.radius.lg,
+    borderWidth: theme.borderWidth.thin,
+    variants: {
+      tone: {
+        info: { backgroundColor: theme.color.infoSoft },
+        good: { backgroundColor: theme.color.goodSoft },
+        warn: { backgroundColor: theme.color.warnSoft },
+        danger: { backgroundColor: theme.color.dangerSoft },
+        neutral: { backgroundColor: theme.color.surface2 }
+      }
+    }
+  },
+  iconSlot: {
+    // Nudge the icon onto the title's optical baseline.
+    paddingTop: theme.space[1]
+  },
+  content: {
+    flex: 1,
+    gap: theme.space.s1
+  },
+  title: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.bold,
+    fontSize: theme.fontSize[14],
+    color: theme.color.text
+  },
+  description: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[14],
+    color: theme.color.text
+  },
+  action: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space.s2,
+    marginTop: theme.space.s2
+  },
+  pressed: { opacity: theme.state.pressedOpacity },
+  // `marginStart`, not `marginLeft`: RN's layout engine mirrors it under RTL.
+  dismiss: {
+    marginStart: theme.space.s2
+  }
+}));
+
+export { Alert };

package/dist/{chunk-SYNOJOQO.js → chunk-QEYFDRHR.js}

@@ -1,6 +1,8 @@
-import { Icon } from './chunk-TKVFVF5D.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-UXGIW7OK.js';
+import { springConfig, motionTiming } from './chunk-J64KGCGX.js';
 import * as React from 'react';
-import { Animated, Easing, Pressable, Text, View } from 'react-native';
+import { Animated, Pressable, Text, View, LayoutAnimation } from 'react-native';
 import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
@@ -60,6 +62,12 @@ var SPEC = {
   systemDismissInsetY: -9,
   systemDismissInsetEnd: -13
 };
+var DEFAULT_LABELS = {
+  dismiss: "Dismiss",
+  refresh: "Refresh",
+  updated: (when) => `Updated ${when}`,
+  windowInZone: (timeWindow, timezone) => `${timeWindow} \xB7 ${timezone}`
+};
 var TONE_ICON = {
   info: "info",
   success: "check-circle",
@@ -73,7 +81,7 @@ var VARIANT_META = {
   maintenance: { tone: "info", icon: "wrench" }
 };
 function useToneColor(tone) {
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("banner");
   switch (tone) {
     case "success":
       return theme.color.goodOnSoft;
@@ -105,42 +113,50 @@ function Banner({
   onDismiss,
   updatedLabel,
   onRefresh,
-  refreshLabel = "Refresh",
+  refreshLabel: refreshLabelProp,
   timeWindow,
   timezone,
   countdown,
-  motion = "full"
+  motion = "full",
+  labels: labelsProp
 }) {
+  const labels = useLabels("banner", DEFAULT_LABELS, labelsProp);
+  const refreshLabel = refreshLabelProp ?? labels.refresh;
   const variantMeta = variant === "default" ? void 0 : VARIANT_META[variant];
   const effectiveTone = tone ?? variantMeta?.tone ?? "info";
   const { styles } = useStyles(sheet, { tone: effectiveTone, placement });
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("banner");
   const toneColor = useToneColor(effectiveTone);
   const borderColor = toneColor + "55";
   const iconName = icon ?? variantMeta?.icon ?? TONE_ICON[effectiveTone];
   const actionPos = actionLabel ? resolvePlacement(actionPlacement, actionLabel) : void 0;
   const dismissible = variant !== "offline" && Boolean(onDismiss);
   const showRefresh = !actionLabel && Boolean(onRefresh);
-  const metaLine = variant === "stale" && updatedLabel ? `Updated ${updatedLabel}` : variant === "maintenance" && timeWindow ? timezone ? `${timeWindow} \xB7 ${timezone}` : timeWindow : null;
+  const metaLine = variant === "stale" && updatedLabel ? labels.updated(updatedLabel) : variant === "maintenance" && timeWindow ? timezone ? labels.windowInZone(timeWindow, timezone) : timeWindow : null;
   const actionHitSlop = Math.max(0, Math.round((theme.tapMin - SPEC.actionMinHeight) / 2));
   const dismissHitSlop = Math.max(0, Math.round((theme.tapMin - SPEC.glyph) / 2));
   const refreshHitSlop = Math.max(0, Math.round((theme.tapMin - SPEC.refreshMinHeight) / 2));
   const animate = motion === "full" && !theme.reduceMotion;
-  const opacity = React.useRef(new Animated.Value(animate ? 0 : 1)).current;
+  const opacity = React.useRef(new Animated.Value(motion === "none" ? 1 : 0)).current;
   React.useEffect(() => {
-    if (!animate) {
+    if (motion === "none") {
       opacity.setValue(1);
       return;
     }
-    const anim = Animated.timing(opacity, {
-      toValue: 1,
-      duration: theme.motion.enter.duration,
-      easing: Easing.bezier(...theme.motion.enter.easing),
-      useNativeDriver: true
-    });
+    const anim = animate ? Animated.spring(opacity, { ...springConfig(theme, "ds"), toValue: 1, useNativeDriver: true }) : Animated.timing(opacity, { ...motionTiming("reduced"), toValue: 1, useNativeDriver: true });
     anim.start();
     return () => anim.stop();
-  }, [animate, opacity, theme.motion.enter.duration, theme.motion.enter.easing]);
+  }, []);
+  const close = () => {
+    if (motion !== "none") {
+      LayoutAnimation.configureNext({
+        duration: theme.spring.de.duration,
+        update: animate ? { type: LayoutAnimation.Types.spring, springDamping: theme.spring.ds.dampingRatio } : { type: LayoutAnimation.Types.easeOut },
+        delete: { type: LayoutAnimation.Types.easeOut, property: LayoutAnimation.Properties.opacity }
+      });
+    }
+    onDismiss?.();
+  };
   const action = actionLabel && actionPos ? /* @__PURE__ */ jsx(
     Pressable,
     {
@@ -148,7 +164,10 @@ function Banner({
       accessibilityLabel: actionLabel,
       onPress: onAction,
       hitSlop: actionHitSlop,
-      style: actionPos === "inline" ? styles.actionInline : styles.action,
+      style: ({ pressed }) => [
+        actionPos === "inline" ? styles.actionInline : styles.action,
+        pressed ? styles.pressed : null
+      ],
       children: /* @__PURE__ */ jsx(Text, { style: [styles.actionLabel, { color: toneColor }], children: actionLabel })
     }
   ) : null;
@@ -159,14 +178,25 @@ function Banner({
       accessibilityLabel: refreshLabel,
       onPress: onRefresh,
       hitSlop: refreshHitSlop,
-      style: [styles.refresh, { borderColor: toneColor }],
+      style: ({ pressed }) => [
+        styles.refresh,
+        { borderColor: toneColor },
+        pressed ? styles.pressed : null
+      ],
       children: [
         /* @__PURE__ */ jsx(Icon, { name: "refresh", size: SPEC.refreshGlyph, color: toneColor }),
         /* @__PURE__ */ jsx(Text, { style: [styles.actionLabel, { color: toneColor }], children: refreshLabel })
       ]
     }
   ) : null;
-  return /* @__PURE__ */ jsxs(Animated.View, { accessibilityRole: "alert", style: [styles.base, { borderColor, opacity }], children: [
+  return /* @__PURE__ */ jsxs(Animated.View, { accessibilityRole: "alert", style: [
+    styles.base,
+    {
+      borderColor,
+      opacity,
+      transform: animate ? [{ translateY: opacity.interpolate({ inputRange: [0, 1], outputRange: [-8, 0] }) }] : []
+    }
+  ], children: [
     /* @__PURE__ */ jsx(View, { style: styles.iconSlot, children: /* @__PURE__ */ jsx(Icon, { name: iconName, size: SPEC.glyph, color: toneColor }) }),
     /* @__PURE__ */ jsxs(View, { style: styles.content, children: [
       title ? /* @__PURE__ */ jsx(Text, { style: styles.title, children: title }) : null,
@@ -181,10 +211,10 @@ function Banner({
       Pressable,
       {
         accessibilityRole: "button",
-        accessibilityLabel: "Dismiss",
-        onPress: onDismiss,
+        accessibilityLabel: labels.dismiss,
+        onPress: close,
         hitSlop: dismissHitSlop,
-        style: styles.dismiss,
+        style: ({ pressed }) => [styles.dismiss, pressed ? styles.pressed : null],
         children: /* @__PURE__ */ jsx(Icon, { name: "x", size: SPEC.glyph, color: toneColor })
       }
     ) : null
@@ -193,10 +223,12 @@ function Banner({
 function SystemBanner({
   message,
   icon = "star",
-  onDismiss
+  onDismiss,
+  labels: labelsProp
 }) {
+  const labels = useLabels("banner", DEFAULT_LABELS, labelsProp);
   const { styles } = useStyles(sheet);
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("banner");
   return /* @__PURE__ */ jsxs(View, { accessibilityRole: "alert", style: styles.system, children: [
     /* @__PURE__ */ jsx(Icon, { name: icon, size: 18, color: theme.color.accentInk }),
     /* @__PURE__ */ jsx(Text, { style: styles.systemMessage, numberOfLines: 1, ellipsizeMode: "tail", children: message }),
@@ -204,9 +236,9 @@ function SystemBanner({
       Pressable,
       {
         accessibilityRole: "button",
-        accessibilityLabel: "Dismiss",
+        accessibilityLabel: labels.dismiss,
         onPress: onDismiss,
-        style: styles.systemDismiss,
+        style: ({ pressed }) => [styles.systemDismiss, pressed ? styles.pressed : null],
         children: /* @__PURE__ */ jsx(Icon, { name: "x", size: SPEC.systemGlyph, color: theme.color.accentInk })
       }
     ) : null
@@ -342,6 +374,8 @@ var sheet = createStyleSheet((theme) => ({
     borderWidth: theme.borderWidth.thin,
     backgroundColor: "transparent"
   },
+  // Press acknowledgement for the unboxed controls: a dim, no layout change.
+  pressed: { opacity: theme.state.pressedOpacity },
   dismiss: {
     paddingTop: theme.space[1]
   },