@btndprojects/loam-ui-native 0.2.1 → 0.3.1

package/dist/{chunk-3WEZCGHX.js → chunk-6RV6UW2J.js}

@@ -1,9 +1,11 @@
 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 { useResolvedMotion, springConfig } from './chunk-J64KGCGX.js';
 import * as React from 'react';
-import { Animated, View, Text, Pressable } from 'react-native';
+import { useWindowDimensions, Animated, View, Text, Pressable } from 'react-native';
 import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -38,6 +40,12 @@ function getPaginationRange({
   });
   return out;
 }
+var STEP_DOWN = {
+  xs: "xs",
+  sm: "xs",
+  md: "sm",
+  lg: "md"
+};
 var DEFAULT_LABELS = {
   nav: "Pagination",
   previous: "Previous page",
@@ -45,7 +53,8 @@ var DEFAULT_LABELS = {
   first: "First page",
   last: "Last page",
   page: (n) => `Page ${n}`,
-  pageOf: (n, c) => `Page ${n} of ${c}`
+  pageOf: (n, c) => `Page ${n} of ${c}`,
+  rangeOf: (a, b, t) => `${a}\u2013${b} of ${t}`
 };
 function Cell({
   size,
@@ -57,12 +66,19 @@ function Cell({
   haptic,
   onPress,
   indicated = false,
+  outline = false,
+  tonal = false,
+  tile = false,
+  android,
   onLayout
 }) {
   const theme = useLoamTheme("pagination");
   const { styles } = useStyles(sheet, { size, selected: selected && !indicated, disabled });
-  const slopY = Math.max(0, (theme.hit[size] - theme.ctl[size]) / 2);
-  const fg = disabled ? theme.color.text3 : selected ? theme.color.accentInk : theme.color.text;
+  const hit = android ? Math.max(theme.hit[size], theme.space[48]) : theme.hit[size];
+  const slopY = Math.max(0, (hit - theme.ctl[size]) / 2);
+  const slopX = outline ? Math.max(0, (hit - theme.ctl[size]) / 2) : 0;
+  const fg = disabled ? theme.color.text3 : selected ? theme.color.accentStrong : theme.color.text;
+  const focusRing = useFocusRing(theme.ctl.r[size], android);
   return /* @__PURE__ */ jsx(
     Pressable,
     {
@@ -71,14 +87,38 @@ function Cell({
       accessibilityState: { disabled, selected },
       ...selected ? { "aria-current": "page" } : null,
       disabled,
-      hitSlop: { top: slopY, bottom: slopY },
+      hitSlop: { top: slopY, bottom: slopY, left: slopX, right: slopX },
+      android_ripple: android && !disabled ? { color: theme.state.pressed, borderless: false, foreground: true } : void 0,
       onPress: () => {
         if (haptic) haptics.selection();
         onPress();
       },
-      style: styles.cell,
+      style: ({ pressed }) => [
+        styles.cell,
+        outline && !android && styles.outline,
+        // Android: arrows are borderless (tonal in the compact row); the current page is a capsule.
+        outline && android && { backgroundColor: tonal ? theme.color.surface2 : "transparent" },
+        android && !tile && { borderRadius: theme.radius.full },
+        outline && tile && {
+          backgroundColor: theme.color.surface,
+          borderWidth: theme.borderWidth.base,
+          borderColor: theme.color.borderStrong,
+          borderRadius: theme.ctl.r[size]
+        },
+        outline && { width: theme.ctl[size], minWidth: theme.ctl[size], paddingHorizontal: 0 },
+        // The design's disabled tile: a soft fill, no edge.
+        disabled && outline && tile && { backgroundColor: theme.color.surface2, borderColor: "transparent" },
+        disabled && outline && { opacity: theme.state.disabledOpacity },
+        pressed && !android && !disabled && { backgroundColor: theme.state.pressed },
+        focusRing.style
+      ],
+      onFocus: focusRing.handlers.onFocus,
+      onBlur: focusRing.handlers.onBlur,
       onLayout,
-      children: icon ? /* @__PURE__ */ jsx(Icon, { name: icon, size: theme.ctl.icon[size], color: fg }) : /* @__PURE__ */ jsx(Text, { style: [styles.label, { color: fg }], children: text })
+      children: icon ? /* @__PURE__ */ jsx(Icon, { name: icon, size: theme.ctl.icon[size], color: fg }) : (
+        // Current = state-selected + accent-strong; the label weight does not move.
+        /* @__PURE__ */ jsx(Text, { style: [styles.label, { color: fg }], children: text })
+      )
     }
   );
 }
@@ -92,18 +132,29 @@ function Pagination({
   siblingCount = 1,
   boundaryCount = 1,
   showEdges = false,
-  variant = "list",
-  size = "md",
+  variant: variantProp = "auto",
+  size: sizeProp = "lg",
+  density = "comfortable",
+  orientation = "horizontal",
+  arrows: arrowsProp,
   disabled = false,
+  platform,
   labels: labelsProp,
   style,
   haptic = true,
   motion = "full"
 }) {
+  const size = density === "compact" ? STEP_DOWN[sizeProp] : sizeProp;
+  const vertical = orientation === "vertical";
   const theme = useLoamTheme("pagination");
   const level = useResolvedMotion(motion, "pagination");
   const { styles } = useStyles(sheet, { size, selected: false, disabled });
   const labels = useLabels("pagination", DEFAULT_LABELS, labelsProp);
+  const android = isAndroidIdiom(theme, platform);
+  const arrows = arrowsProp ?? (android ? "tile" : "default");
+  const { width } = useWindowDimensions();
+  const variant = variantProp === "auto" ? width > 600 ? "list" : "compact" : variantProp;
+  const isCompact = variant === "compact" || variant === "range";
   const count = Math.max(
     1,
     Math.floor(
@@ -144,8 +195,8 @@ function Pagination({
   );
   React.useEffect(() => slideTo(page), [page, slideTo]);
   const measure = (n) => (e) => {
-    const { x, y, width, height } = e.nativeEvent.layout;
-    cells.current.set(n, { x, y, w: width, h: height });
+    const { x, y, width: width2, height } = e.nativeEvent.layout;
+    cells.current.set(n, { x, y, w: width2, h: height });
     if (n === page) slideTo(n);
   };
   const sel = cells.current.get(page);
@@ -157,6 +208,10 @@ function Pagination({
       size,
       label,
       icon,
+      outline: true,
+      tonal: isCompact,
+      tile: arrows === "tile",
+      android,
       haptic,
       disabled: disabled || off,
       onPress: () => go(target)
@@ -166,45 +221,64 @@ function Pagination({
   return (
     // `navigation` (an <nav> landmark on web) is what makes the label legal: an
     // aria-label on a role-less View is prohibited and never spoken.
-    /* @__PURE__ */ jsxs(View, { role: "navigation", accessibilityLabel: labels.nav, style: [styles.row, style], children: [
-      variant !== "compact" && measured && sel ? /* @__PURE__ */ jsx(
-        Animated.View,
-        {
-          pointerEvents: "none",
-          style: [styles.indicator, { top: sel.y, height: sel.h, left: ind.x, width: ind.w }]
-        }
-      ) : null,
-      showEdges && arrow("first", labels.first, "skip-back", 1, atStart),
-      arrow("prev", labels.previous, "chevron-left", page - 1, atStart),
-      variant === "compact" ? /* @__PURE__ */ jsx(Text, { accessibilityLiveRegion: "polite", style: styles.readout, children: labels.pageOf(page, count) }) : getPaginationRange({ page, pageCount: count, siblingCount, boundaryCount }).map(
-        (item, i) => item === "ellipsis" ? /* @__PURE__ */ jsx(
-          Text,
-          {
-            accessibilityElementsHidden: true,
-            importantForAccessibility: "no-hide-descendants",
-            style: styles.gap,
-            children: "\u2026"
-          },
-          `gap-${i}`
-        ) : /* @__PURE__ */ jsx(
-          Cell,
-          {
-            size,
-            label: labels.page(item),
-            text: String(item),
-            selected: item === page,
-            haptic,
-            disabled,
-            onPress: () => go(item),
-            indicated: measured && item === page,
-            onLayout: measure(item)
-          },
-          item
-        )
-      ),
-      arrow("next", labels.next, "chevron-right", page + 1, atEnd),
-      showEdges && arrow("last", labels.last, "skip-forward", count, atEnd)
-    ] })
+    /* @__PURE__ */ jsxs(
+      View,
+      {
+        role: "navigation",
+        accessibilityLabel: labels.nav,
+        style: [
+          styles.row,
+          vertical ? { flexDirection: "column" } : null,
+          density === "compact" ? { gap: theme.space[2] } : null,
+          style
+        ],
+        children: [
+          !isCompact && !vertical && measured && sel ? /* @__PURE__ */ jsx(
+            Animated.View,
+            {
+              pointerEvents: "none",
+              style: [
+                styles.indicator,
+                android && arrows !== "tile" && { borderRadius: theme.radius.full },
+                { top: sel.y, height: sel.h, left: ind.x, width: ind.w }
+              ]
+            }
+          ) : null,
+          showEdges && arrow("first", labels.first, "skip-back", 1, atStart),
+          arrow("prev", labels.previous, "chevron-left", page - 1, atStart),
+          isCompact ? /* @__PURE__ */ jsx(Text, { accessibilityLiveRegion: "polite", style: styles.readout, children: variant === "range" && total !== void 0 ? labels.rangeOf((page - 1) * pageSize + 1, Math.min(total, page * pageSize), total) : labels.pageOf(page, count) }) : getPaginationRange({ page, pageCount: count, siblingCount, boundaryCount }).map(
+            (item, i) => item === "ellipsis" ? /* @__PURE__ */ jsx(
+              Text,
+              {
+                accessibilityElementsHidden: true,
+                importantForAccessibility: "no-hide-descendants",
+                style: styles.gap,
+                children: "\u2026"
+              },
+              `gap-${i}`
+            ) : /* @__PURE__ */ jsx(
+              Cell,
+              {
+                size,
+                label: labels.page(item),
+                text: String(item),
+                selected: item === page,
+                android,
+                tile: arrows === "tile",
+                haptic,
+                disabled,
+                onPress: () => go(item),
+                indicated: measured && !vertical && item === page,
+                onLayout: measure(item)
+              },
+              item
+            )
+          ),
+          arrow("next", labels.next, "chevron-right", page + 1, atEnd),
+          showEdges && arrow("last", labels.last, "skip-forward", count, atEnd)
+        ]
+      }
+    )
   );
 }
 var SIZES = ["xs", "sm", "md", "lg"];
@@ -225,13 +299,20 @@ var sheet = createStyleSheet((theme) => ({
           }
         ])
       ),
-      selected: { true: { backgroundColor: theme.color.accent }, false: {} },
+      // Current = state-selected + accent-strong ink (F22), never a fill.
+      selected: { true: { backgroundColor: theme.state.selected }, false: {} },
       disabled: { true: {}, false: {} }
     }
   },
+  outline: {
+    backgroundColor: "transparent",
+    // R3: a pressable edge is the strong 1.5 rule.
+    borderWidth: theme.borderWidth.strong,
+    borderColor: theme.color.borderStrong
+  },
   label: {
     fontFamily: theme.font.sans,
-    fontWeight: theme.fontWeight.bold,
+    fontWeight: theme.fontWeight.medium,
     fontVariant: ["tabular-nums"],
     fontSize: theme.type.subheadline.fontSize,
     lineHeight: theme.type.subheadline.lineHeight,
@@ -239,7 +320,7 @@ var sheet = createStyleSheet((theme) => ({
   },
   indicator: {
     position: "absolute",
-    backgroundColor: theme.color.accent,
+    backgroundColor: theme.state.selected,
     variants: {
       size: Object.fromEntries(SIZES.map((s) => [s, { borderRadius: theme.ctl.r[s] }])),
       selected: {},
@@ -254,10 +335,13 @@ var sheet = createStyleSheet((theme) => ({
   },
   readout: {
     minWidth: theme.hit.lg * 2,
+    // Keeps a long read-out ("Page 12 of 24") off the arrows it sits between.
+    paddingHorizontal: theme.space[4],
     textAlign: "center",
     color: theme.color.text2,
-    fontFamily: theme.font.mono,
-    fontSize: theme.type.footnote.fontSize,
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[14],
+    fontWeight: theme.fontWeight.medium,
     fontVariant: ["tabular-nums"]
   }
 }));