@btndprojects/loam-ui-native 0.1.0 → 0.2.1

package/dist/chunk-3WEZCGHX.js

@@ -0,0 +1,265 @@
+import { haptics } from './chunk-NY2U3PBI.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-UXGIW7OK.js';
+import { useResolvedMotion, springConfig } from './chunk-J64KGCGX.js';
+import * as React from 'react';
+import { 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 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}`
+};
+function Cell({
+  size,
+  label,
+  selected = false,
+  disabled,
+  icon,
+  text,
+  haptic,
+  onPress,
+  indicated = false,
+  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;
+  return /* @__PURE__ */ jsx(
+    Pressable,
+    {
+      accessibilityRole: "button",
+      accessibilityLabel: label,
+      accessibilityState: { disabled, selected },
+      ...selected ? { "aria-current": "page" } : null,
+      disabled,
+      hitSlop: { top: slopY, bottom: slopY },
+      onPress: () => {
+        if (haptic) haptics.selection();
+        onPress();
+      },
+      style: styles.cell,
+      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 })
+    }
+  );
+}
+function Pagination({
+  page: pageProp,
+  defaultPage = 1,
+  onPageChange,
+  pageCount: pageCountProp,
+  total,
+  pageSize = 10,
+  siblingCount = 1,
+  boundaryCount = 1,
+  showEdges = false,
+  variant = "list",
+  size = "md",
+  disabled = false,
+  labels: labelsProp,
+  style,
+  haptic = true,
+  motion = "full"
+}) {
+  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 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, height } = e.nativeEvent.layout;
+    cells.current.set(n, { x, y, w: width, 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,
+      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, 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)
+    ] })
+  );
+}
+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]
+          }
+        ])
+      ),
+      selected: { true: { backgroundColor: theme.color.accent }, false: {} },
+      disabled: { true: {}, false: {} }
+    }
+  },
+  label: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.bold,
+    fontVariant: ["tabular-nums"],
+    fontSize: theme.type.subheadline.fontSize,
+    lineHeight: theme.type.subheadline.lineHeight,
+    variants: { size: {}, selected: {}, disabled: {} }
+  },
+  indicator: {
+    position: "absolute",
+    backgroundColor: theme.color.accent,
+    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,
+    textAlign: "center",
+    color: theme.color.text2,
+    fontFamily: theme.font.mono,
+    fontSize: theme.type.footnote.fontSize,
+    fontVariant: ["tabular-nums"]
+  }
+}));
+
+export { Pagination, getPaginationRange };

package/dist/chunk-46MMSDGL.js

@@ -0,0 +1,194 @@
+import { Chip } from './chunk-2SY63FCH.js';
+import { NumberRoll } from './chunk-T5LTPKX6.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { useResolvedMotion } from './chunk-J64KGCGX.js';
+import * as React from 'react';
+import { LayoutAnimation, AccessibilityInfo, View, ScrollView, Text, Pressable } from 'react-native';
+import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var DEFAULT_LABELS = {
+  filters: "Active filters",
+  none: "No filters",
+  clearAll: "Clear all",
+  resultNoun: "results",
+  count: (count, noun) => `${count} ${noun}`
+};
+function FilterBar({
+  filters,
+  resultCount,
+  resultNoun,
+  onClearAll,
+  children,
+  density = "comfortable",
+  motion = "full",
+  animateCount = false,
+  accessibilityLabel,
+  labels: labelsProp
+}) {
+  const labels = useLabels("filterBar", DEFAULT_LABELS, labelsProp);
+  const { styles } = useStyles(sheet, { density });
+  const theme = useLoamTheme("filter-bar");
+  const hasFilters = filters.length > 0;
+  const showClearAll = hasFilters && onClearAll != null;
+  const hasCount = resultCount != null;
+  const countLabel = hasCount ? labels.count(resultCount, resultNoun ?? labels.resultNoun) : void 0;
+  const level = useResolvedMotion(motion, "filter-bar");
+  const idsKey = filters.map((f) => f.id).join("\0");
+  const prevIds = React.useRef(idsKey);
+  if (prevIds.current !== idsKey) {
+    prevIds.current = idsKey;
+    if (level === "full") {
+      const fs = theme.spring.fs;
+      LayoutAnimation.configureNext({
+        duration: fs.duration,
+        create: { type: "easeInEaseOut", property: "opacity" },
+        update: { type: "spring", springDamping: fs.dampingRatio },
+        delete: { type: "easeInEaseOut", property: "opacity" }
+      });
+    }
+  }
+  React.useEffect(() => {
+    if (countLabel !== void 0 && !animateCount)
+      AccessibilityInfo.announceForAccessibility(countLabel);
+  }, [countLabel, animateCount]);
+  return /* @__PURE__ */ jsxs(View, { accessibilityRole: "toolbar", accessibilityLabel: accessibilityLabel ?? labels.filters, style: styles.root, children: [
+    children,
+    hasFilters ? /* @__PURE__ */ jsx(
+      ScrollView,
+      {
+        horizontal: true,
+        showsHorizontalScrollIndicator: false,
+        style: styles.scrollRoot,
+        contentContainerStyle: styles.scrollContent,
+        children: filters.map((filter) => /* @__PURE__ */ jsx(
+          Chip,
+          {
+            selectable: true,
+            selected: true,
+            removable: true,
+            onRemove: filter.onRemove,
+            onSelectedChange: filter.onRemove,
+            accessibilityLabel: filter.label,
+            children: filter.label
+          },
+          filter.id
+        ))
+      }
+    ) : /* @__PURE__ */ jsx(Text, { style: styles.empty, children: labels.none }),
+    showClearAll ? /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        accessibilityRole: "button",
+        accessibilityLabel: labels.clearAll,
+        onPress: onClearAll,
+        hitSlop: 8,
+        style: ({ pressed }) => [
+          styles.clearAll,
+          // Takes the free space itself so it sits directly beside the count.
+          { marginStart: "auto" },
+          pressed ? { backgroundColor: theme.state.pressed } : null
+        ],
+        children: /* @__PURE__ */ jsx(Text, { style: styles.clearAllLabel, children: labels.clearAll })
+      }
+    ) : null,
+    hasCount ? animateCount ? /* @__PURE__ */ jsx(
+      NumberRoll,
+      {
+        value: resultCount,
+        formatValue: () => countLabel,
+        textStyle: {
+          fontFamily: theme.font.sans,
+          fontWeight: theme.fontWeight.semibold,
+          fontSize: theme.type.footnote.fontSize,
+          lineHeight: theme.type.footnote.lineHeight,
+          color: theme.color.text2
+        },
+        motion,
+        announce: true,
+        style: showClearAll ? styles.countRollAfterClear : styles.countRoll
+      }
+    ) : (
+      // `accessibilityLiveRegion` re-announces on Android; the effect above
+      // covers iOS, where the prop is a no-op.
+      /* @__PURE__ */ jsx(
+        Text,
+        {
+          accessibilityLiveRegion: "polite",
+          accessibilityLabel: countLabel,
+          style: showClearAll ? [styles.count, styles.countAfterClear] : styles.count,
+          children: countLabel
+        }
+      )
+    ) : /* @__PURE__ */ jsx(View, { style: styles.countSpacer })
+  ] });
+}
+var sheet = createStyleSheet((theme) => ({
+  root: {
+    flexDirection: "row",
+    alignItems: "center",
+    variants: {
+      density: {
+        comfortable: { gap: theme.space.s3 },
+        compact: { gap: theme.space.s2 }
+      }
+    }
+  },
+  // The scroll container must not grow to fill the cross axis, so `flexShrink: 1`
+  // lets it give room to the count + clear-all while `flexGrow: 0` keeps it to
+  // its content height.
+  scrollRoot: { flexGrow: 0, flexShrink: 1 },
+  scrollContent: {
+    flexDirection: "row",
+    alignItems: "center",
+    variants: {
+      density: {
+        comfortable: { gap: theme.space.s2 },
+        compact: { gap: theme.space.s1 }
+      }
+    }
+  },
+  empty: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    color: theme.color.text3
+  },
+  // Never shrinks: the tokens scroll, the count does not, so "62 results"
+  // stays on one line instead of stacking into two.
+  count: {
+    marginStart: "auto",
+    flexShrink: 0,
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.semibold,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    fontVariant: ["tabular-nums"],
+    color: theme.color.text2
+  },
+  // Keeps clear-all pinned to the inline start edge when there is no count to
+  // push it there with `marginStart: 'auto'`.
+  countSpacer: { marginStart: "auto", width: 0 },
+  // The rolling count sits where the static one does — pushed to the inline end.
+  countRoll: { marginStart: "auto", flexShrink: 0 },
+  countAfterClear: { marginStart: 0 },
+  countRollAfterClear: { flexShrink: 0 },
+  // Pinned to the `sm` control height so it sits flush with the documented
+  // `size="sm"` "Add filter" button in the leading slot (padding gave 26px).
+  clearAll: {
+    flexShrink: 0,
+    height: theme.ctl.sm,
+    justifyContent: "center",
+    paddingHorizontal: theme.space.s2,
+    borderRadius: theme.radius.sm
+  },
+  clearAllLabel: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.semibold,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    color: theme.color.text2
+  }
+}));
+
+export { FilterBar };