@btndprojects/loam-ui-native 0.1.1 → 0.3.1

package/dist/{chunk-4YIP3CWS.js → chunk-PK7BN3MI.js}

@@ -1,7 +1,10 @@
-import { useColorTransition } from './chunk-ITTYJZWX.js';
-import { useResolvedMotion } from './chunk-6N33LFQA.js';
+import { FieldMessage } from './chunk-BTRMA7GC.js';
+import { useColorTransition } from './chunk-KXLDK6HB.js';
+import { useFocusRing } from './chunk-2YKVID2V.js';
+import { Icon } from './chunk-PCEFCOLN.js';
+import { useResolvedMotion } from './chunk-J64KGCGX.js';
 import * as React from 'react';
-import { View, Text, Easing, Animated, Pressable } from 'react-native';
+import { Platform, View, Text, Easing, Animated, Pressable } from 'react-native';
 import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
@@ -19,17 +22,24 @@ function RadioGroup({
   onValueChange,
   size = "md",
   motion = "full",
+  platform,
   disabled = false,
   label,
   accessibilityLabel,
+  error = false,
+  hint,
+  tone = "accent",
   children
 }) {
   const isControlled = value !== void 0;
   const [internal, setInternal] = React.useState(defaultValue);
   const selected = isControlled ? value : internal;
   const { styles } = useStyles(sheet, { size, disabled });
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("radio-group");
+  const os = platform ?? (Platform.OS === "ios" ? "ios" : Platform.OS === "android" ? "android" : theme.platform === "iOS" ? "ios" : "android");
   const labelId = React.useId();
+  const invalid = Boolean(error);
+  const message = typeof error === "string" && error ? error : hint;
   const itemsRef = React.useRef([]);
   const [, bump] = React.useReducer((c) => c + 1, 0);
   const register = React.useCallback((entry) => {
@@ -83,12 +93,27 @@ function RadioGroup({
       select,
       size,
       motion,
+      os,
       disabled,
+      invalid,
+      tone,
       activeValue,
       register,
       onItemKeyDown
     }),
-    [selected, select, size, motion, disabled, activeValue, register, onItemKeyDown]
+    [
+      selected,
+      select,
+      size,
+      motion,
+      os,
+      disabled,
+      invalid,
+      tone,
+      activeValue,
+      register,
+      onItemKeyDown
+    ]
   );
   return /* @__PURE__ */ jsx(RadioGroupContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxs(View, { style: styles.root, children: [
     label ? /* @__PURE__ */ jsx(Text, { nativeID: labelId, style: styles.groupLabel, children: label }) : null,
@@ -98,10 +123,12 @@ function RadioGroup({
         accessibilityRole: "radiogroup",
         accessibilityLabel: label ? void 0 : accessibilityLabel,
         ...label ? { "aria-labelledby": labelId } : null,
+        "aria-invalid": invalid || void 0,
         style: styles.group,
         children
       }
-    )
+    ),
+    message ? /* @__PURE__ */ jsx(FieldMessage, { invalid: invalid && typeof error === "string", children: message }) : null
   ] }) });
 }
 function RadioGroupItem({
@@ -111,10 +138,17 @@ function RadioGroupItem({
   disabled = false
 }) {
   const ctx = useRadioGroupContext();
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("radio-group");
   const selected = ctx.value === value;
   const isDisabled = ctx.disabled || disabled;
-  const { styles } = useStyles(sheet, { size: ctx.size, disabled: isDisabled });
+  const { styles } = useStyles(sheet, {
+    size: ctx.size,
+    disabled: isDisabled,
+    os: ctx.os,
+    selected
+  });
+  const ios = ctx.os === "ios";
+  const focusRing = useFocusRing(theme.radius.sm);
   const nodeRef = React.useRef(null);
   const entryRef = React.useRef({ value, disabled: isDisabled, focus: () => {
   } });
@@ -123,12 +157,12 @@ function RadioGroupItem({
   entryRef.current.focus = () => nodeRef.current?.focus?.();
   const { register } = ctx;
   React.useEffect(() => register(entryRef.current), [register]);
-  const resolvedMotion = useResolvedMotion(ctx.motion);
+  const resolvedMotion = useResolvedMotion(ctx.motion, "radio-group");
   const animateEdge = resolvedMotion !== "none";
   const animateDot = resolvedMotion === "full";
   const easing = React.useMemo(() => Easing.bezier(...theme.easing.base), [theme.easing.base]);
   const borderColor = useColorTransition(
-    selected ? theme.color.accent : theme.color.borderStrong,
+    selected ? theme.color[ctx.tone] : ctx.invalid ? theme.color.danger : theme.color.text3,
     theme.duration.fast,
     easing,
     animateEdge
@@ -164,10 +198,32 @@ function RadioGroupItem({
       "aria-checked": selected,
       disabled: isDisabled,
       onPress: isDisabled ? void 0 : () => ctx.select(value),
-      style: styles.item,
+      style: [styles.item, focusRing.style],
+      onFocus: focusRing.handlers.onFocus,
+      onBlur: focusRing.handlers.onBlur,
       ...webProps,
       children: [
-        /* @__PURE__ */ jsx(Animated.View, { testID: "radio-indicator", style: [styles.indicator, { borderColor }], children: /* @__PURE__ */ jsx(Animated.View, { style: [styles.dot, { transform: [{ scale: dotScale }] }] }) }),
+        ios ? (
+          // The check column is always reserved so labels never shift.
+          /* @__PURE__ */ jsx(View, { testID: "radio-check", style: styles.checkColumn, children: selected ? /* @__PURE__ */ jsx(View, { testID: "radio-check-mark", children: /* @__PURE__ */ jsx(
+            Icon,
+            {
+              name: "check",
+              size: theme.icon.sm,
+              color: ctx.tone === "accent" ? theme.color.accentStrong : theme.color[ctx.tone],
+              strokeWidth: theme.icon.strokeBold
+            }
+          ) }) : null })
+        ) : /* @__PURE__ */ jsx(Animated.View, { testID: "radio-indicator", style: [styles.indicator, { borderColor }], children: /* @__PURE__ */ jsx(
+          Animated.View,
+          {
+            style: [
+              styles.dot,
+              ctx.tone === "accent" ? null : { backgroundColor: theme.color[ctx.tone] },
+              { transform: [{ scale: dotScale }] }
+            ]
+          }
+        ) }),
         label ? /* @__PURE__ */ jsx(Text, { style: styles.label, children: label }) : null
       ]
     }
@@ -177,20 +233,34 @@ var sheet = createStyleSheet((theme) => ({
   // Stacks the optional group label above the radios.
   root: { gap: theme.space.s2 },
   group: { gap: theme.space.s3 },
+  // Group label 13 / 600 text (R11), on the OS label role.
   groupLabel: {
+    ...theme.ctl.label.sm,
     fontFamily: theme.font.sans,
-    fontWeight: theme.fontWeight.semibold,
-    fontSize: theme.fontSize[14],
-    color: theme.color.text2
+    color: theme.color.text
   },
   item: {
     flexDirection: "row",
     alignItems: "center",
-    gap: theme.space.s3,
+    // Label 10 from the mark (R10).
+    gap: theme.space[10],
+    paddingHorizontal: theme.space[12],
+    borderRadius: theme.ctl.r.md,
+    // The row is the hit area: never shorter than the minimum tap target.
+    minHeight: theme.tapMin,
     variants: {
+      // iOS check rows sit on the tap minimum; Android radio rows are 56 (F7).
+      os: { ios: {}, android: { minHeight: theme.space[56] } },
+      selected: { true: { backgroundColor: theme.state.selected }, false: {} },
       disabled: { true: { opacity: theme.state.disabledOpacity }, false: {} }
     }
   },
+  checkColumn: {
+    width: theme.space[24],
+    alignItems: "center",
+    justifyContent: "center",
+    variants: { size: { sm: {}, md: {} }, disabled: { true: {}, false: {} } }
+  },
   // `borderColor` is supplied at the use site as an animated value so the edge
   // can travel over `duration.fast`. The fill stays transparent — the reference
   // gives the indicator a border and nothing else.
@@ -202,10 +272,10 @@ var sheet = createStyleSheet((theme) => ({
     backgroundColor: "transparent",
     borderRadius: theme.radius.full,
     variants: {
-      // The dot is always half the indicator (reference: 11px inside 22px).
+      // The dot is always half the indicator (10px inside 20px).
       size: {
         sm: { width: theme.space[16], height: theme.space[16] },
-        md: { width: theme.space[22], height: theme.space[22] }
+        md: { width: theme.space[20], height: theme.space[20] }
       },
       disabled: { true: {}, false: {} }
     }
@@ -216,7 +286,7 @@ var sheet = createStyleSheet((theme) => ({
     variants: {
       size: {
         sm: { width: theme.space[8], height: theme.space[8] },
-        md: { width: theme.space[11], height: theme.space[11] }
+        md: { width: theme.space[10], height: theme.space[10] }
       },
       disabled: { true: {}, false: {} }
     }

package/dist/{chunk-KMI5ML5I.js → chunk-PWFRDRGS.js}

@@ -1,10 +1,21 @@
-import { Spinner } from './chunk-O7AE6DAF.js';
-import { Skeleton, SkeletonText } from './chunk-RIBDXGUG.js';
+import { Image } from './chunk-KZ3X7TSL.js';
+import { Skeleton, SkeletonText } from './chunk-YJ5PXOX3.js';
+import { softToneSkin } from './chunk-PJLTKDVY.js';
+import { Spinner } from './chunk-G7H3NX3G.js';
+import { isAndroidIdiom } from './chunk-TH4PW2WU.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-PCEFCOLN.js';
+import { motionTiming, springConfig } from './chunk-J64KGCGX.js';
 import * as React from 'react';
-import { StyleSheet, Animated, View, Pressable, Text, Image } from 'react-native';
+import { StyleSheet, Animated, View, Pressable, Text, Image as Image$1 } from 'react-native';
 import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
+var DEFAULT_LABELS = {
+  loading: "Loading",
+  select: "Select"
+};
+var CardStateContext = React.createContext({ inactive: false });
 function Card({
   children,
   variant = "default",
@@ -13,26 +24,54 @@ function Card({
   accessibilityLabel,
   selected = false,
   busy = false,
-  busyLabel = "Loading",
+  busyLabel,
   skeleton = false,
   emphasized = false,
   dragging = false,
-  motion = "full"
+  motion = "full",
+  padding = "none",
+  tone = "neutral",
+  inactive = false,
+  selectable = false,
+  onSelectedChange,
+  platform,
+  labels: labelsProp
 }) {
-  const theme = useLoamTheme();
+  const labels = useLabels("card", DEFAULT_LABELS, labelsProp);
+  const theme = useLoamTheme("card");
   const { styles } = useStyles(sheet, {
     variant: variant === "default" ? void 0 : variant,
     selected,
     emphasized,
-    dragging
+    dragging,
+    inactive
   });
+  const android = isAndroidIdiom(theme, platform);
+  const skin = tone === "neutral" ? null : softToneSkin(theme, tone);
+  const PAD = { none: 0, sm: theme.space.s2, md: theme.space.s4, lg: theme.space.s6 };
+  const extra = skin || padding !== "none" ? {
+    ...skin ? { backgroundColor: skin.fill, borderColor: skin.edge } : null,
+    ...padding !== "none" ? { padding: PAD[padding] } : null
+  } : null;
+  const toggle = () => onSelectedChange?.(!selected);
   const scale = React.useRef(new Animated.Value(1)).current;
-  const spring = (to) => Animated.spring(scale, {
-    toValue: to,
-    useNativeDriver: true,
-    speed: 40,
-    bounciness: 6
-  }).start();
+  const spring = (to) => {
+    if (theme.reduceMotion) return;
+    Animated.spring(scale, {
+      ...springConfig(theme, "fs"),
+      toValue: to,
+      useNativeDriver: true
+    }).start();
+  };
+  const tintOn = dragging || selected;
+  const tintOpacity = React.useRef(new Animated.Value(tintOn ? 1 : 0)).current;
+  React.useEffect(() => {
+    Animated.timing(tintOpacity, {
+      toValue: tintOn ? 1 : 0,
+      ...motionTiming(theme.reduceMotion ? "reduced" : "full"),
+      useNativeDriver: true
+    }).start();
+  }, [tintOn, tintOpacity, theme.reduceMotion]);
   if (skeleton) {
     return /* @__PURE__ */ jsx(
       View,
@@ -52,7 +91,24 @@ function Card({
     );
   }
   const tint = dragging ? theme.state.dragged : selected ? theme.state.selected : null;
-  const tintOverlay = tint ? /* @__PURE__ */ jsx(View, { style: [StyleSheet.absoluteFill, { backgroundColor: tint, pointerEvents: "none" }] }) : null;
+  const tintOverlay = tint ? /* @__PURE__ */ jsx(
+    Animated.View,
+    {
+      style: [StyleSheet.absoluteFill, { backgroundColor: tint, opacity: tintOpacity, pointerEvents: "none" }]
+    }
+  ) : null;
+  const selectMark = selectable && (!android || selected) ? /* @__PURE__ */ jsx(
+    Pressable,
+    {
+      accessibilityRole: "checkbox",
+      accessibilityLabel: labels.select,
+      accessibilityState: { checked: selected },
+      onPress: toggle,
+      hitSlop: theme.space[12],
+      style: [styles.selectMark, android ? styles.selectMarkAndroid : null, selected ? styles.selectMarkOn : null],
+      children: selected ? /* @__PURE__ */ jsx(Icon, { name: "check", size: android ? theme.space[14] : theme.space[16], color: theme.color.accentInk }) : null
+    }
+  ) : null;
   const lift = dragging && motion === "full" && !theme.reduceMotion;
   const dragTransform = lift ? [{ scale: 1.022 }, { rotate: theme.rtl ? "-1.2deg" : "1.2deg" }] : [];
   const withBusy = (node) => busy ? /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -65,10 +121,10 @@ function Card({
         importantForAccessibility: "no-hide-descendants"
       }
     ),
-    /* @__PURE__ */ jsx(View, { style: styles.busySpinner, children: /* @__PURE__ */ jsx(Spinner, { size: "sm", accessibilityLabel: busyLabel }) })
+    /* @__PURE__ */ jsx(View, { style: styles.busySpinner, children: /* @__PURE__ */ jsx(Spinner, { size: "sm", accessibilityLabel: busyLabel ?? labels.loading }) })
   ] }) : node;
   if (onPress) {
-    return /* @__PURE__ */ jsxs(Animated.View, { style: [styles.base, style, { transform: [{ scale }, ...dragTransform] }], children: [
+    return /* @__PURE__ */ jsxs(Animated.View, { style: [styles.base, extra, style, { transform: [{ scale }, ...dragTransform] }], children: [
       tintOverlay,
       /* @__PURE__ */ jsx(
         Pressable,
@@ -77,12 +133,14 @@ function Card({
           accessibilityLabel,
           accessibilityState: { selected: selected || void 0, busy: busy || void 0 },
           onPress,
-          onPressIn: () => spring(0.98),
+          onLongPress: selectable && android ? toggle : void 0,
+          onPressIn: () => spring(0.97),
           onPressOut: () => spring(1),
           style: StyleSheet.absoluteFill
         }
       ),
-      /* @__PURE__ */ jsx(View, { style: styles.pressContent, children: withBusy(children) })
+      /* @__PURE__ */ jsx(View, { style: styles.pressContent, children: /* @__PURE__ */ jsx(CardStateContext.Provider, { value: { inactive }, children: withBusy(children) }) }),
+      selectMark
     ] });
   }
   return /* @__PURE__ */ jsxs(
@@ -91,10 +149,11 @@ function Card({
       role: "group",
       accessibilityLabel,
       accessibilityState: { selected: selected || void 0, busy: busy || void 0 },
-      style: [styles.base, style, dragTransform.length ? { transform: dragTransform } : null],
+      style: [styles.base, extra, style, dragTransform.length ? { transform: dragTransform } : null],
       children: [
         tintOverlay,
-        withBusy(children)
+        /* @__PURE__ */ jsx(CardStateContext.Provider, { value: { inactive }, children: withBusy(children) }),
+        selectMark
       ]
     }
   );
@@ -105,7 +164,8 @@ function CardHeader({ children, style }) {
 }
 function CardTitle({ children, style }) {
   const { styles } = useStyles(sheet);
-  return typeof children === "string" ? /* @__PURE__ */ jsx(Text, { style: [styles.title, style], children }) : /* @__PURE__ */ jsx(Fragment, { children });
+  const { inactive } = React.useContext(CardStateContext);
+  return typeof children === "string" ? /* @__PURE__ */ jsx(Text, { style: [styles.title, inactive ? styles.titleInactive : null, style], children }) : /* @__PURE__ */ jsx(Fragment, { children });
 }
 function CardDescription({ children, style }) {
   const { styles } = useStyles(sheet);
@@ -121,13 +181,30 @@ function CardFooter({ children, style }) {
 }
 function CardMedia({
   source,
+  fallbackSrc,
+  placeholder,
   height = 160,
   style,
   accessibilityLabel
 }) {
   const { styles } = useStyles(sheet);
+  const { inactive } = React.useContext(CardStateContext);
+  const uri = source && typeof source === "object" && !Array.isArray(source) && "uri" in source ? source.uri : void 0;
+  if (uri !== void 0 || !source) {
+    return /* @__PURE__ */ jsx(
+      Image,
+      {
+        src: uri,
+        fallbackSrc,
+        placeholder,
+        alt: accessibilityLabel,
+        inactive,
+        style: [styles.media, { height }, style]
+      }
+    );
+  }
   return /* @__PURE__ */ jsx(
-    Image,
+    Image$1,
     {
       source,
       resizeMode: "cover",
@@ -168,14 +245,25 @@ var sheet = createStyleSheet((theme) => ({
     backgroundColor: theme.color.surface,
     borderWidth: theme.borderWidth.thin,
     borderColor: theme.color.border,
-    borderRadius: theme.radius.xl,
+    borderRadius: theme.radius.lg,
     overflow: "hidden",
     variants: {
       variant: {
         // Reference (buildWidgets): `box-shadow:0 12px 30px rgba(30,25,15,.14)` → md token is
         // the nearest match; elevated steps up to lg for the stronger treatment.
-        default: { ...theme.shadow.md },
-        elevated: { ...theme.shadow.lg },
+        // The resting card reads the theme's `card` style (edge + shadow), so one
+        // theme setting restyles every card. `outline` keeps its own edge — it
+        // is the variant that *is* a border.
+        default: {
+          borderWidth: theme.card.borderWidth,
+          borderColor: theme.card.borderColor,
+          ...theme.card.shadow
+        },
+        elevated: {
+          borderWidth: theme.card.borderWidth,
+          borderColor: theme.card.borderColor,
+          ...theme.shadow.lg
+        },
         outline: {}
       },
       // Selection: an accent border. The `state-selected` tint is a translucent
@@ -189,7 +277,8 @@ var sheet = createStyleSheet((theme) => ({
       // it derives the accent at the hard-edge strength every such edge needs,
       // and it is a no-op on an accent that already clears.
       selected: {
-        true: { borderColor: theme.focus.ringColor },
+        // Width too: a theme may draw cards edgeless, and the mark must survive it.
+        true: { borderColor: theme.focus.ringColor, borderWidth: theme.borderWidth.thin },
         false: {}
       },
       // Von Restorff emphasis — a 2px accent border + the stronger `lg`
@@ -206,11 +295,48 @@ var sheet = createStyleSheet((theme) => ({
       // Dragging: a raised shadow + accent border over the card's own surface;
       // the `state-dragged` tint and the scale/tilt are applied in the component.
       dragging: {
-        true: { borderColor: theme.focus.ringColor, ...theme.shadow.lg },
+        true: {
+          borderColor: theme.focus.ringColor,
+          borderWidth: theme.borderWidth.thin,
+          ...theme.shadow.lg
+        },
+        false: {}
+      },
+      // A07 inactive: surface-2 and no shadow; it still opens and selects.
+      inactive: {
+        true: {
+          backgroundColor: theme.color.surface2,
+          shadowOpacity: 0,
+          elevation: 0
+        },
         false: {}
       }
     }
   },
+  titleInactive: { color: theme.color.text2 },
+  // A08 selection mark, top-start 12 in. iOS: the edit-mode circle 22.
+  selectMark: {
+    position: "absolute",
+    top: theme.space[12],
+    start: theme.space[12],
+    width: theme.space[22],
+    height: theme.space[22],
+    borderRadius: theme.radius.full,
+    borderWidth: theme.borderWidth.heavy,
+    borderColor: theme.color.borderStrong,
+    backgroundColor: theme.color.surface,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  // Android: the 18 check, drawn only on a selected card.
+  selectMarkAndroid: {
+    width: theme.space[18],
+    height: theme.space[18]
+  },
+  selectMarkOn: {
+    backgroundColor: theme.color.accent,
+    borderColor: theme.color.accent
+  },
   header: {
     // Reference (buildWidgets small widget): `padding:16px` — s4 = 16px.
     paddingHorizontal: theme.space.s4,
@@ -253,8 +379,8 @@ var sheet = createStyleSheet((theme) => ({
   },
   media: {
     width: "100%",
-    borderTopLeftRadius: theme.radius.xl,
-    borderTopRightRadius: theme.radius.xl,
+    borderTopLeftRadius: theme.radius.lg,
+    borderTopRightRadius: theme.radius.lg,
     backgroundColor: theme.color.surface2
   }
 }));