@btndprojects/loam-ui-native 0.2.1 → 0.3.1

package/dist/{chunk-E2E3I5W2.js → chunk-5DTKORLI.js}

@@ -1,7 +1,9 @@
-import { HoldToConfirm } from './chunk-M656FYNH.js';
+import { HoldToConfirm } from './chunk-YLRSRUPS.js';
 import { haptics } from './chunk-NY2U3PBI.js';
+import { isAndroidIdiom } from './chunk-TH4PW2WU.js';
 import { useLabels } from './chunk-APCWFOZW.js';
-import { Icon } from './chunk-UXGIW7OK.js';
+import { useFocusRing } from './chunk-2YKVID2V.js';
+import { Icon } from './chunk-PCEFCOLN.js';
 import { springConfig } from './chunk-J64KGCGX.js';
 import * as React from 'react';
 import { Animated, Pressable, ActivityIndicator, Text } from 'react-native';
@@ -14,9 +16,8 @@ var DEFAULT_LABELS = {
 function holdSizeFor(size) {
   return size === "xs" ? "sm" : size;
 }
-function useForeground(variant, disabled) {
+function useForeground(variant) {
   const theme = useLoamTheme("button");
-  if (disabled) return theme.color.text3;
   switch (variant) {
     case "primary":
       return theme.color.accentInk;
@@ -32,7 +33,7 @@ function useForeground(variant, disabled) {
 function Button({
   children,
   variant = "primary",
-  size = "md",
+  size = "lg",
   loading = false,
   disabled = false,
   fullWidth = false,
@@ -55,7 +56,7 @@ function Button({
   const theme = useLoamTheme("button");
   const soft = softDisabled && !disabled;
   const { styles } = useStyles(sheet, { variant, size, disabled: disabled || soft, fullWidth });
-  const fg = useForeground(variant, disabled || soft);
+  const fg = useForeground(variant);
   const scale = React.useRef(new Animated.Value(1)).current;
   const kick = React.useRef(new Animated.Value(0)).current;
   const [checked, setChecked] = React.useState(false);
@@ -74,6 +75,7 @@ function Button({
     const t = setTimeout(() => setChecked(false), 1500);
     return () => clearTimeout(t);
   }, [checked]);
+  const focusRing = useFocusRing(theme.ctl.r[size], isAndroidIdiom(theme));
   if (hold && variant === "danger") {
     return /* @__PURE__ */ jsx(
       HoldToConfirm,
@@ -97,7 +99,9 @@ function Button({
   const interactive = !disabled && !busy && !soft;
   const iconSize = theme.ctl.icon[size];
   const slopY = Math.max(0, (theme.hit[size] - theme.ctl[size]) / 2);
-  const animatePress = motion === "full" && !theme.reduceMotion;
+  const android = isAndroidIdiom(theme);
+  const animatePress = !android && motion === "full" && !theme.reduceMotion;
+  const pressFill = android ? void 0 : variant === "primary" ? theme.color.accentFillPress : variant === "danger" ? theme.color.dangerFillPress : variant === "outline" || variant === "ghost" ? theme.state.pressed : void 0;
   const tapHaptic = haptic ?? (variant === "primary" || variant === "danger");
   const spring = (to) => Animated.spring(scale, {
     ...springConfig(theme, "fs"),
@@ -117,7 +121,11 @@ function Button({
         setPending(false);
         if (!animatePress) return;
         kick.setValue(4);
-        Animated.spring(kick, { ...springConfig(theme, "fs", { thrown: true }), toValue: 0, useNativeDriver: true }).start();
+        Animated.spring(kick, {
+          ...springConfig(theme, "fs", { thrown: true }),
+          toValue: 0,
+          useNativeDriver: true
+        }).start();
       }
     );
   };
@@ -128,20 +136,41 @@ function Button({
       accessibilityLabel,
       accessibilityHint: soft ? disabledReason : void 0,
       accessibilityState: { disabled: disabled || soft, busy },
+      "aria-disabled": soft ? true : void 0,
       disabled,
       onPress: soft && !busy ? onDisabledPress : interactive ? press : void 0,
       onPressIn: interactive && (animatePress || tapHaptic) ? () => {
         if (tapHaptic) haptics.impact(variant === "danger" ? "medium" : "light");
-        if (animatePress) spring(0.96);
+        if (animatePress) spring(0.97);
       } : void 0,
       onPressOut: interactive && animatePress ? () => spring(1) : void 0,
+      onFocus: focusRing.handlers.onFocus,
+      onBlur: focusRing.handlers.onBlur,
       hitSlop: { top: slopY, bottom: slopY },
-      style: fullWidth ? fullWidthStyle : void 0,
-      children: /* @__PURE__ */ jsxs(Animated.View, { style: [styles.base, { transform: [{ scale }, { translateX: kick }] }], children: [
-        checked ? /* @__PURE__ */ jsx(Icon, { name: "check", size: iconSize, color: fg }) : loading || pending && spin ? /* @__PURE__ */ jsx(ActivityIndicator, { size: "small", color: fg, accessibilityLabel: labels.loading }) : leadingIcon ? /* @__PURE__ */ jsx(Icon, { name: leadingIcon, size: iconSize, color: fg }) : null,
-        typeof children === "string" ? /* @__PURE__ */ jsx(Text, { style: [styles.label, { color: fg }], children }) : children,
-        !loading && !checked && trailingIcon ? /* @__PURE__ */ jsx(Icon, { name: trailingIcon, size: iconSize, color: fg }) : null
-      ] })
+      android_ripple: android && interactive ? { color: theme.state.pressed, borderless: false, foreground: true } : void 0,
+      style: [
+        // The ripple is drawn on the Pressable, so it carries the corner and
+        // clips to it; the dim covers the whole control (R5).
+        android ? { borderRadius: theme.ctl.r[size], overflow: "hidden" } : null,
+        disabled || soft ? { opacity: theme.state.disabledOpacity } : null,
+        fullWidth ? fullWidthStyle : null,
+        focusRing.style
+      ],
+      children: ({ pressed }) => /* @__PURE__ */ jsxs(
+        Animated.View,
+        {
+          style: [
+            styles.base,
+            pressed && interactive && pressFill ? { backgroundColor: pressFill } : null,
+            { transform: [{ scale }, { translateX: kick }] }
+          ],
+          children: [
+            checked ? /* @__PURE__ */ jsx(Icon, { name: "check", size: iconSize, color: fg }) : loading || pending && spin ? /* @__PURE__ */ jsx(ActivityIndicator, { size: "small", color: fg, accessibilityLabel: labels.loading }) : leadingIcon ? /* @__PURE__ */ jsx(Icon, { name: leadingIcon, size: iconSize, color: fg }) : null,
+            typeof children === "string" ? /* @__PURE__ */ jsx(Text, { style: [styles.label, { color: fg }], children }) : children,
+            !loading && !checked && trailingIcon ? /* @__PURE__ */ jsx(Icon, { name: trailingIcon, size: iconSize, color: fg }) : null
+          ]
+        }
+      )
     }
   );
 }
@@ -165,7 +194,8 @@ var sheet = createStyleSheet((theme) => ({
         },
         outline: {
           backgroundColor: "transparent",
-          borderWidth: theme.borderWidth.thin,
+          // R3: a pressable edge is the strong 1.5 rule.
+          borderWidth: theme.borderWidth.strong,
           borderColor: theme.color.borderStrong
         },
         ghost: { backgroundColor: "transparent" },
@@ -199,42 +229,21 @@ var sheet = createStyleSheet((theme) => ({
           borderRadius: theme.ctl.r.lg
         }
       },
-      // Only a real `disabled` greys the fill — `loading` keeps the variant
-      // colour (R8: busy ≠ disabled).
-      disabled: {
-        true: { backgroundColor: theme.color.surface3, borderWidth: 0 },
-        false: {}
-      },
+      // R5: disabled is a dim (opacity on the Pressable), never a repaint.
+      disabled: { true: {}, false: {} },
       fullWidth: { true: { alignSelf: "stretch" }, false: {} }
     }
   },
-  // Bold sans label; size/line-height/tracking come from the overhauled
-  // semantic ramp (footnote → subheadline → body as the button grows).
+  // F13: the label reads the platform role for its tier (iOS caption 1 →
+  // body at 600, Android label large 14 / 500), from `theme.ctl.label`.
   label: {
     fontFamily: theme.font.sans,
-    fontWeight: theme.fontWeight.bold,
     variants: {
       size: {
-        xs: {
-          fontSize: theme.type.caption1.fontSize,
-          lineHeight: theme.type.caption1.lineHeight,
-          letterSpacing: theme.type.caption1.letterSpacing
-        },
-        sm: {
-          fontSize: theme.type.footnote.fontSize,
-          lineHeight: theme.type.footnote.lineHeight,
-          letterSpacing: theme.type.footnote.letterSpacing
-        },
-        md: {
-          fontSize: theme.type.subheadline.fontSize,
-          lineHeight: theme.type.subheadline.lineHeight,
-          letterSpacing: theme.type.subheadline.letterSpacing
-        },
-        lg: {
-          fontSize: theme.type.body.fontSize,
-          lineHeight: theme.type.body.lineHeight,
-          letterSpacing: theme.type.body.letterSpacing
-        }
+        xs: theme.ctl.label.xs,
+        sm: theme.ctl.label.sm,
+        md: theme.ctl.label.md,
+        lg: theme.ctl.label.lg
       },
       variant: {},
       disabled: {},

package/dist/{chunk-5VFZRGVD.js → chunk-5J4WFXFA.js}

@@ -2,7 +2,7 @@ import { overscrollIntent, bandIndicator, overscrollOffset, GESTURE_SLOP_PX, SCR
 import { expandedProps } from './chunk-W23G6JLF.js';
 import { haptics } from './chunk-NY2U3PBI.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 { useWindowDimensions, Animated, Easing, AccessibilityInfo, PanResponder, View, Pressable, ScrollView } from 'react-native';
 import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
@@ -53,6 +53,8 @@ function OneHanded({
   onRefresh,
   refreshing,
   shift,
+  align = "stretch",
+  orientation = "vertical",
   exitLabel: exitLabelProp,
   exitHint: exitHintProp,
   indicatorLabel: indicatorLabelProp,
@@ -436,23 +438,38 @@ function OneHanded({
         )
       }
     ),
-    /* @__PURE__ */ jsx(Animated.View, { style: [styles.content, { transform: [{ translateY: contentY }] }], children: /* @__PURE__ */ jsx(
-      ScrollView,
+    /* @__PURE__ */ jsx(
+      Animated.View,
       {
-        ...rest,
-        focusable: true,
-        scrollEventThrottle: 16,
-        contentContainerStyle: [
-          rest.contentContainerStyle,
-          bandMounted ? { paddingBottom: dropDistance } : null
+        testID: "one-handed-content",
+        style: [
+          styles.content,
+          align !== "stretch" && bandMounted ? {
+            width: `${theme.layout.reachZone * 100}%`,
+            alignSelf: align === "start" ? "flex-start" : "flex-end"
+          } : null,
+          { transform: [{ translateY: contentY }] }
         ],
-        onScroll: (e) => {
-          scrollTop.current = e.nativeEvent.contentOffset.y;
-          rest.onScroll?.(e);
-        },
-        children
+        children: /* @__PURE__ */ jsx(
+          ScrollView,
+          {
+            ...rest,
+            horizontal: orientation === "horizontal" ? true : rest.horizontal,
+            focusable: true,
+            scrollEventThrottle: 16,
+            contentContainerStyle: [
+              rest.contentContainerStyle,
+              bandMounted ? { paddingBottom: dropDistance } : null
+            ],
+            onScroll: (e) => {
+              scrollTop.current = e.nativeEvent.contentOffset.y;
+              rest.onScroll?.(e);
+            },
+            children
+          }
+        )
       }
-    ) })
+    )
   ] });
 }
 var sheet = createStyleSheet((theme) => ({

package/dist/{chunk-JBMLWFSJ.js → chunk-5KJ7TEQ6.js}

@@ -1,6 +1,7 @@
-import { useReorder } from './chunk-36EC2T6P.js';
+import { useReorder } from './chunk-D2LN4I7I.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 { View, Animated, Pressable, Text } from 'react-native';
 import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
@@ -38,9 +39,11 @@ function Sortable({
   numbered = true,
   handleIcon = "grip",
   disabled = false,
+  density = "standard",
   formatAnnouncement,
   motion = "full",
   onNotify,
+  liftedId,
   style,
   labels: labelsProp
 }) {
@@ -94,6 +97,7 @@ function Sortable({
   draggingRef.current = onDraggingChange;
   const reorder = useReorder({
     motion,
+    liftHaptic: "light",
     disabled,
     renderGhost: (id) => {
       const item = byId.get(id);
@@ -104,6 +108,7 @@ function Sortable({
           index: resolved.indexOf(id),
           numbered,
           handleIcon,
+          density,
           lifted: true
         }
       ) : null;
@@ -144,37 +149,52 @@ function Sortable({
     else if (name === "moveToBottom") step(id, resolved.length - 1);
   };
   return /* @__PURE__ */ jsxs(View, { style: [styles.root, style], children: [
-    /* @__PURE__ */ jsx(View, { role: "list", accessibilityLabel: label, style: styles.list, ...reorder.group("list"), children: resolved.map((id, index) => {
-      const item = byId.get(id);
-      const keyProps = {
-        onKeyDown: (event) => onKey(event, id)
-      };
-      return /* @__PURE__ */ jsx(Animated.View, { role: "listitem", ...reorder.item(id, "list", index), children: /* @__PURE__ */ jsx(
-        Pressable,
-        {
-          ...disabled ? {} : reorder.press(id),
-          disabled,
-          accessibilityRole: "button",
-          accessibilityLabel: item.label,
-          accessibilityHint: labels.rowHint(index + 1, resolved.length),
-          accessibilityState: { disabled },
-          accessibilityActions: disabled ? void 0 : rowActions(labels),
-          onAccessibilityAction: (event) => onAction(event, id),
-          style: ({ pressed }) => [styles.press, pressed && !disabled && styles.pressed],
-          ...keyProps,
-          children: /* @__PURE__ */ jsx(
-            RowBody,
+    /* @__PURE__ */ jsx(
+      View,
+      {
+        role: "list",
+        accessibilityLabel: label,
+        style: [
+          styles.list,
+          density === "compact" ? styles.listCompact : null,
+          density === "comfortable" ? styles.listSpacious : null
+        ],
+        ...reorder.group("list"),
+        children: resolved.map((id, index) => {
+          const item = byId.get(id);
+          const keyProps = {
+            onKeyDown: (event) => onKey(event, id)
+          };
+          return /* @__PURE__ */ jsx(Animated.View, { role: "listitem", ...reorder.item(id, "list", index), children: /* @__PURE__ */ jsx(
+            Pressable,
             {
-              item,
-              index,
-              numbered,
-              handleIcon,
-              disabled
+              ...disabled ? {} : reorder.press(id),
+              disabled,
+              accessibilityRole: "button",
+              accessibilityLabel: item.label,
+              accessibilityHint: labels.rowHint(index + 1, resolved.length),
+              accessibilityState: { disabled },
+              accessibilityActions: disabled ? void 0 : rowActions(labels),
+              onAccessibilityAction: (event) => onAction(event, id),
+              style: ({ pressed }) => [styles.press, pressed && !disabled && styles.pressed],
+              ...keyProps,
+              children: /* @__PURE__ */ jsx(
+                RowBody,
+                {
+                  item,
+                  index,
+                  numbered,
+                  handleIcon,
+                  density,
+                  disabled,
+                  lifted: id === liftedId
+                }
+              )
             }
-          )
-        }
-      ) }, id);
-    }) }),
+          ) }, id);
+        })
+      }
+    ),
     reorder.overlay,
     /* @__PURE__ */ jsx(
       View,
@@ -193,38 +213,53 @@ function RowBody({
   index,
   numbered,
   handleIcon,
+  density = "standard",
   lifted = false,
   disabled = false
 }) {
   const { styles } = useStyles(sheet);
   const theme = useLoamTheme("sortable");
-  return /* @__PURE__ */ jsxs(View, { style: [styles.row, lifted && styles.rowLifted, disabled && styles.rowDisabled], children: [
-    lifted ? /* @__PURE__ */ jsx(View, { pointerEvents: "none", style: styles.draggedLayer }) : null,
-    /* @__PURE__ */ jsx(
-      Icon,
-      {
-        name: item.icon ?? handleIcon,
-        size: theme.icon.md,
-        color: lifted ? theme.color.accent : theme.color.text3,
-        strokeWidth: theme.icon.stroke
-      }
-    ),
-    numbered ? /* @__PURE__ */ jsx(Text, { style: styles.position, children: index + 1 }) : null,
-    /* @__PURE__ */ jsx(Text, { style: styles.label, numberOfLines: 1, children: item.label }),
-    item.meta ? /* @__PURE__ */ jsx(Text, { style: styles.meta, children: item.meta }) : null
-  ] });
+  const baseMinHeight = isAndroidIdiom(theme) ? theme.layout.listRowH : theme.ctl.lg;
+  const rowMinHeight = density === "compact" ? baseMinHeight - theme.space[8] : density === "comfortable" ? baseMinHeight + theme.space[8] : baseMinHeight;
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      style: [
+        styles.row,
+        { minHeight: rowMinHeight },
+        lifted && styles.rowLifted,
+        disabled && styles.rowDisabled
+      ],
+      children: [
+        lifted ? /* @__PURE__ */ jsx(View, { pointerEvents: "none", style: styles.draggedLayer }) : null,
+        /* @__PURE__ */ jsx(
+          Icon,
+          {
+            name: item.icon ?? handleIcon,
+            size: theme.icon.md,
+            color: lifted ? theme.color.accent : theme.color.text3,
+            strokeWidth: theme.icon.stroke
+          }
+        ),
+        numbered ? /* @__PURE__ */ jsx(Text, { style: styles.position, children: index + 1 }) : null,
+        /* @__PURE__ */ jsx(Text, { style: styles.label, numberOfLines: 1, children: item.label }),
+        item.meta ? /* @__PURE__ */ jsx(Text, { style: styles.meta, children: item.meta }) : null
+      ]
+    }
+  );
 }
 var sheet = createStyleSheet((theme) => ({
   root: { alignSelf: "stretch" },
   list: { gap: theme.space.s2 },
+  listCompact: { gap: theme.space.s1 },
+  listSpacious: { gap: theme.space.s3 },
   press: { borderRadius: theme.radius.md },
   pressed: { opacity: theme.state.pressedOpacity },
   row: {
     flexDirection: "row",
     alignItems: "center",
     gap: theme.space.s3,
-    minHeight: theme.layout.listRowH,
-    paddingHorizontal: theme.space.s3,
+    paddingHorizontal: theme.space.s4,
     borderRadius: theme.radius.md,
     borderWidth: theme.borderWidth.base,
     borderColor: theme.color.border,