@btndprojects/loam-ui-native 0.1.1 → 0.3.1

package/dist/chunk-6RV6UW2J.js

@@ -0,0 +1,349 @@
+import { haptics } from './chunk-NY2U3PBI.js';
+import { isAndroidIdiom } from './chunk-TH4PW2WU.js';
+import { useLabels } from './chunk-APCWFOZW.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 { useWindowDimensions, Animated, View, Text, Pressable } from 'react-native';
+import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function getPaginationRange({
+  page,
+  pageCount,
+  siblingCount = 1,
+  boundaryCount = 1
+}) {
+  const count = Math.floor(pageCount);
+  if (!(count >= 1)) return [];
+  const sib = Math.max(0, Math.floor(siblingCount));
+  const bound = Math.max(0, Math.floor(boundaryCount));
+  const current = Math.min(Math.max(Math.round(page) || 1, 1), count);
+  const shown = /* @__PURE__ */ new Set();
+  const add = (n) => {
+    if (n >= 1 && n <= count) shown.add(n);
+  };
+  for (let n = 1; n <= bound; n += 1) add(n);
+  for (let n = count - bound + 1; n <= count; n += 1) add(n);
+  for (let n = current - sib; n <= current + sib; n += 1) add(n);
+  const sorted = [...shown].sort((a, b) => a - b);
+  const out = [];
+  sorted.forEach((n, i) => {
+    const prev = sorted[i - 1];
+    if (prev !== void 0) {
+      const gap = n - prev - 1;
+      if (gap === 1) out.push(prev + 1);
+      else if (gap > 1) out.push("ellipsis");
+    }
+    out.push(n);
+  });
+  return out;
+}
+var STEP_DOWN = {
+  xs: "xs",
+  sm: "xs",
+  md: "sm",
+  lg: "md"
+};
+var DEFAULT_LABELS = {
+  nav: "Pagination",
+  previous: "Previous page",
+  next: "Next page",
+  first: "First page",
+  last: "Last page",
+  page: (n) => `Page ${n}`,
+  pageOf: (n, c) => `Page ${n} of ${c}`,
+  rangeOf: (a, b, t) => `${a}\u2013${b} of ${t}`
+};
+function Cell({
+  size,
+  label,
+  selected = false,
+  disabled,
+  icon,
+  text,
+  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 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,
+    {
+      accessibilityRole: "button",
+      accessibilityLabel: label,
+      accessibilityState: { disabled, selected },
+      ...selected ? { "aria-current": "page" } : null,
+      disabled,
+      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: ({ 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 }) : (
+        // Current = state-selected + accent-strong; the label weight does not move.
+        /* @__PURE__ */ jsx(Text, { style: [styles.label, { color: fg }], children: text })
+      )
+    }
+  );
+}
+function Pagination({
+  page: pageProp,
+  defaultPage = 1,
+  onPageChange,
+  pageCount: pageCountProp,
+  total,
+  pageSize = 10,
+  siblingCount = 1,
+  boundaryCount = 1,
+  showEdges = false,
+  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(
+      pageCountProp ?? (total !== void 0 ? Math.ceil(total / Math.max(1, pageSize)) : 1)
+    )
+  );
+  const [inner, setInner] = React.useState(defaultPage);
+  const controlled = pageProp !== void 0;
+  const page = Math.min(Math.max(controlled ? pageProp : inner, 1), count);
+  const go = (next) => {
+    const target = Math.min(Math.max(next, 1), count);
+    if (target === page) return;
+    if (!controlled) setInner(target);
+    onPageChange?.(target);
+  };
+  const cells = React.useRef(/* @__PURE__ */ new Map());
+  const ind = React.useRef({ x: new Animated.Value(0), w: new Animated.Value(0) }).current;
+  const [measured, setMeasured] = React.useState(false);
+  const placed = React.useRef(false);
+  const slideTo = React.useCallback(
+    (n) => {
+      const c = cells.current.get(n);
+      if (!c) return;
+      if (!placed.current || level !== "full") {
+        placed.current = true;
+        ind.x.setValue(c.x);
+        ind.w.setValue(c.w);
+        setMeasured(true);
+        return;
+      }
+      const cfg = { ...springConfig(theme, "fs"), useNativeDriver: false };
+      Animated.parallel([
+        Animated.spring(ind.x, { ...cfg, toValue: c.x }),
+        Animated.spring(ind.w, { ...cfg, toValue: c.w })
+      ]).start();
+    },
+    [ind, level, theme]
+  );
+  React.useEffect(() => slideTo(page), [page, slideTo]);
+  const measure = (n) => (e) => {
+    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);
+  const atStart = page <= 1;
+  const atEnd = page >= count;
+  const arrow = (key, label, icon, target, off) => /* @__PURE__ */ jsx(
+    Cell,
+    {
+      size,
+      label,
+      icon,
+      outline: true,
+      tonal: isCompact,
+      tile: arrows === "tile",
+      android,
+      haptic,
+      disabled: disabled || off,
+      onPress: () => go(target)
+    },
+    key
+  );
+  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,
+          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"];
+var sheet = createStyleSheet((theme) => ({
+  row: { flexDirection: "row", alignItems: "center", gap: theme.space[4] },
+  cell: {
+    alignItems: "center",
+    justifyContent: "center",
+    variants: {
+      size: Object.fromEntries(
+        SIZES.map((s) => [
+          s,
+          {
+            height: theme.ctl[s],
+            minWidth: Math.max(theme.ctl[s], theme.hit[s]),
+            paddingHorizontal: theme.ctl.px[s] / 2,
+            borderRadius: theme.ctl.r[s]
+          }
+        ])
+      ),
+      // 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.medium,
+    fontVariant: ["tabular-nums"],
+    fontSize: theme.type.subheadline.fontSize,
+    lineHeight: theme.type.subheadline.lineHeight,
+    variants: { size: {}, selected: {}, disabled: {} }
+  },
+  indicator: {
+    position: "absolute",
+    backgroundColor: theme.state.selected,
+    variants: {
+      size: Object.fromEntries(SIZES.map((s) => [s, { borderRadius: theme.ctl.r[s] }])),
+      selected: {},
+      disabled: {}
+    }
+  },
+  gap: {
+    color: theme.color.text3,
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.subheadline.fontSize,
+    paddingHorizontal: theme.space[4]
+  },
+  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.sans,
+    fontSize: theme.fontSize[14],
+    fontWeight: theme.fontWeight.medium,
+    fontVariant: ["tabular-nums"]
+  }
+}));
+
+export { Pagination, getPaginationRange };