@btndprojects/loam-ui-native 0.0.0-stage → 0.1.0

package/dist/chunk-Q72LJOVE.js

@@ -0,0 +1,169 @@
+import { Chip } from './chunk-AI4DWZCD.js';
+import { NumberRoll } from './chunk-CUMUNPXY.js';
+import * as React from 'react';
+import { AccessibilityInfo, View, ScrollView, Text, Pressable } from 'react-native';
+import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function FilterBar({
+  filters,
+  resultCount,
+  resultNoun = "results",
+  onClearAll,
+  children,
+  density = "comfortable",
+  motion = "full",
+  animateCount = false,
+  accessibilityLabel = "Active filters"
+}) {
+  const { styles } = useStyles(sheet, { density });
+  const theme = useLoamTheme();
+  const hasFilters = filters.length > 0;
+  const showClearAll = hasFilters && onClearAll != null;
+  const hasCount = resultCount != null;
+  const countLabel = hasCount ? `${resultCount} ${resultNoun}` : void 0;
+  React.useEffect(() => {
+    if (countLabel !== void 0 && !animateCount)
+      AccessibilityInfo.announceForAccessibility(countLabel);
+  }, [countLabel, animateCount]);
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      accessibilityRole: "toolbar",
+      accessibilityLabel,
+      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: "No filters" }),
+        showClearAll ? /* @__PURE__ */ jsx(
+          Pressable,
+          {
+            accessibilityRole: "button",
+            accessibilityLabel: "Clear all",
+            onPress: onClearAll,
+            hitSlop: 8,
+            style: ({ pressed }) => [
+              styles.clearAll,
+              pressed ? { backgroundColor: theme.state.pressed } : null
+            ],
+            children: /* @__PURE__ */ jsx(Text, { style: styles.clearAllLabel, children: "Clear all" })
+          }
+        ) : 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: 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: 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 },
+  clearAll: {
+    flexShrink: 0,
+    paddingHorizontal: theme.space.s2,
+    paddingVertical: theme.space.s1,
+    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 };

package/dist/chunk-QCDXZBC5.js

@@ -0,0 +1,247 @@
+import { Icon } from './chunk-TKVFVF5D.js';
+import 'react';
+import { View, Text, Pressable } from 'react-native';
+import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function PermissionPrimer({
+  icon = "bell",
+  title,
+  description,
+  allowLabel = "Continue",
+  onAllow,
+  denyLabel = "Not now",
+  onDeny
+}) {
+  const { styles } = useStyles(sheet);
+  const theme = useLoamTheme();
+  return /* @__PURE__ */ jsxs(View, { style: styles.primer, accessibilityRole: "alert", children: [
+    /* @__PURE__ */ jsx(View, { style: styles.primerTile, children: /* @__PURE__ */ jsx(Icon, { name: icon, size: 26, color: theme.color.accentOnSoft }) }),
+    /* @__PURE__ */ jsx(Text, { style: styles.primerTitle, children: title }),
+    /* @__PURE__ */ jsx(Text, { style: styles.primerBody, children: description }),
+    /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        accessibilityRole: "button",
+        accessibilityLabel: allowLabel,
+        onPress: onAllow,
+        style: ({ pressed }) => [styles.allow, pressed && styles.pressed],
+        children: /* @__PURE__ */ jsx(Text, { style: styles.allowLabel, children: allowLabel })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        accessibilityRole: "button",
+        accessibilityLabel: denyLabel,
+        onPress: onDeny,
+        style: ({ pressed }) => [styles.deny, pressed && styles.pressed],
+        children: /* @__PURE__ */ jsx(Text, { style: styles.denyLabel, children: denyLabel })
+      }
+    )
+  ] });
+}
+function PermissionDenied({
+  icon = "lock",
+  title = "Turned off in Settings",
+  description,
+  settingsLabel = "Open Settings",
+  onOpenSettings,
+  capabilities = []
+}) {
+  const { styles } = useStyles(sheet);
+  const theme = useLoamTheme();
+  const ctaSlop = Math.max(0, (theme.hit.sm - theme.ctl.sm) / 2);
+  return /* @__PURE__ */ jsxs(View, { style: styles.deniedRoot, children: [
+    /* @__PURE__ */ jsxs(View, { style: styles.deniedCard, children: [
+      /* @__PURE__ */ jsxs(View, { style: styles.deniedHead, children: [
+        /* @__PURE__ */ jsx(Icon, { name: icon, size: 17, color: theme.color.warnOnSoft }),
+        /* @__PURE__ */ jsx(Text, { style: styles.deniedTitle, children: title })
+      ] }),
+      /* @__PURE__ */ jsx(Text, { style: styles.deniedBody, children: description }),
+      /* @__PURE__ */ jsx(
+        Pressable,
+        {
+          accessibilityRole: "button",
+          accessibilityLabel: settingsLabel,
+          onPress: onOpenSettings,
+          hitSlop: { top: ctaSlop, bottom: ctaSlop },
+          style: ({ pressed }) => [styles.settings, pressed && styles.pressed],
+          children: /* @__PURE__ */ jsx(Text, { style: styles.settingsLabel, children: settingsLabel })
+        }
+      )
+    ] }),
+    capabilities.length > 0 ? (
+      // Dimmed and inert: these rows show the cost of the denial, and must not
+      // look like something the user can flip on from here.
+      /* @__PURE__ */ jsx(
+        View,
+        {
+          role: "group",
+          style: styles.capList,
+          accessibilityLabel: "Unavailable until the permission is re-enabled",
+          children: capabilities.map((c) => /* @__PURE__ */ jsxs(View, { style: styles.capRow, children: [
+            /* @__PURE__ */ jsx(Text, { style: styles.capLabel, children: c.label }),
+            /* @__PURE__ */ jsx(View, { style: styles.capSwitch, children: /* @__PURE__ */ jsx(View, { style: styles.capThumb }) })
+          ] }, c.id))
+        }
+      )
+    ) : null
+  ] });
+}
+var sheet = createStyleSheet((theme) => ({
+  // ---- primer ----
+  primer: {
+    padding: theme.space[20],
+    borderRadius: theme.radius.xl,
+    backgroundColor: theme.color.surface,
+    alignItems: "center",
+    gap: theme.space[13],
+    // `shadow.lg` is the only thing lifting this card off the page, and high
+    // contrast zeroes it — `edge.neutral` takes over there, and is `transparent`
+    // before that so the primer keeps its borderless look.
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.edge.neutral,
+    ...theme.shadow.lg
+  },
+  primerTile: {
+    width: theme.space[56],
+    height: theme.space[56],
+    borderRadius: theme.radius.full,
+    backgroundColor: theme.color.accentSoft,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.edge.accent,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  primerTitle: {
+    fontFamily: theme.font.display,
+    fontWeight: theme.font.displayWeight,
+    fontSize: theme.type.title3.fontSize,
+    color: theme.color.text,
+    textAlign: "center"
+  },
+  primerBody: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.fontSize * 1.5,
+    color: theme.color.text2,
+    textAlign: "center"
+  },
+  allow: {
+    alignSelf: "stretch",
+    minHeight: theme.tapMin,
+    borderRadius: theme.radius.md,
+    backgroundColor: theme.color.accent,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  allowLabel: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.bold,
+    fontSize: theme.type.subheadline.fontSize,
+    color: theme.color.accentInk
+  },
+  deny: {
+    alignSelf: "stretch",
+    minHeight: theme.tapMin,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  denyLabel: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.semibold,
+    fontSize: theme.fontSize[14],
+    color: theme.color.text3
+  },
+  // ---- denied ----
+  deniedRoot: { gap: theme.space.s4 },
+  deniedCard: {
+    padding: theme.space.s4,
+    borderRadius: theme.radius.lg,
+    backgroundColor: theme.color.warnSoft,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.edge.warn,
+    gap: theme.space[11],
+    alignItems: "flex-start"
+  },
+  deniedHead: { flexDirection: "row", alignItems: "center", gap: theme.space[9] },
+  deniedTitle: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.bold,
+    fontSize: theme.fontSize[14],
+    color: theme.color.warnOnSoft
+  },
+  deniedBody: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    // The denied card sits on a `warnSoft` tint; neutral `text2` fails AA there,
+    // so raise the body copy to primary `text` to clear 4.5:1.
+    color: theme.color.text
+  },
+  // Sized like `Button` `size="sm"`, not like a full-bleed primary CTA: this is a
+  // secondary action sitting beside footnote copy. `hitSlop` supplies the rest of
+  // the 44pt target on the component.
+  settings: {
+    height: theme.ctl.sm,
+    paddingHorizontal: theme.space.s3,
+    borderRadius: theme.radius.md,
+    backgroundColor: theme.color.warn,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  // `warnInk` is the token system's readable ink *for the warn fill* — a flat
+  // white here was only legible by luck, and broke outright on a light warn tone.
+  // The label tracks the body copy's footnote step instead of running a size above it.
+  settingsLabel: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.bold,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    letterSpacing: theme.type.footnote.letterSpacing,
+    color: theme.color.warnInk
+  },
+  capList: {
+    borderRadius: theme.radius.lg,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.color.border,
+    backgroundColor: theme.color.surface,
+    overflow: "hidden",
+    opacity: theme.state.disabledOpacity,
+    pointerEvents: "none"
+  },
+  capRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    padding: theme.space[14],
+    borderBottomWidth: theme.borderWidth.base,
+    borderBottomColor: theme.color.border
+  },
+  capLabel: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[14],
+    color: theme.color.text
+  },
+  capSwitch: {
+    width: theme.space[44],
+    height: theme.space[26],
+    borderRadius: theme.radius.full,
+    backgroundColor: theme.color.surface3,
+    justifyContent: "center",
+    paddingHorizontal: theme.space[3]
+  },
+  capThumb: {
+    width: theme.space[20],
+    height: theme.space[20],
+    borderRadius: theme.radius.full,
+    // A knob travelling a track — `color.knob` is the mode-invariant token that
+    // exists for exactly this, and was already what Switch and Slider use.
+    backgroundColor: theme.color.knob,
+    ...theme.shadow.sm
+  },
+  pressed: { opacity: theme.state.pressedOpacity }
+}));
+
+export { PermissionDenied, PermissionPrimer };

package/dist/chunk-QDYDBCFP.js

@@ -0,0 +1,197 @@
+import { Icon } from './chunk-TKVFVF5D.js';
+import * as React from 'react';
+import { View, Image, Text } from 'react-native';
+import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var SIZE_PX = { xs: 28, sm: 36, md: 48, lg: 60, xl: 76 };
+function useStatusColor(status) {
+  const theme = useLoamTheme();
+  if (!status) return void 0;
+  switch (status) {
+    case "online":
+      return theme.color.good;
+    case "offline":
+      return theme.color.text3;
+    case "busy":
+      return theme.color.danger;
+    case "away":
+      return theme.color.warn;
+  }
+}
+function hashToChartIndex(seed) {
+  const s = seed ?? "";
+  let h = 0;
+  for (let i = 0; i < s.length; i += 1) h = h * 31 + s.charCodeAt(i) >>> 0;
+  return h % 6;
+}
+function hashedColors(theme, seed) {
+  const fills = [
+    { bg: theme.chart.c1, ink: theme.chart.c1Ink },
+    { bg: theme.chart.c2, ink: theme.chart.c2Ink },
+    { bg: theme.chart.c3, ink: theme.chart.c3Ink },
+    { bg: theme.chart.c4, ink: theme.chart.c4Ink },
+    { bg: theme.chart.c5, ink: theme.chart.c5Ink },
+    { bg: theme.chart.c6, ink: theme.chart.c6Ink }
+  ];
+  return fills[hashToChartIndex(seed)];
+}
+function initialsFromName(name) {
+  const words = (name ?? "").trim().split(/\s+/).filter(Boolean);
+  const first = words[0];
+  if (!first) return "";
+  if (words.length === 1) return first.slice(0, 2).toUpperCase();
+  const last = words[words.length - 1] ?? first;
+  return (first[0] + last[0]).toUpperCase();
+}
+function Avatar({
+  src,
+  name,
+  id,
+  size = "md",
+  status,
+  presence = "dot",
+  shape = "circle",
+  accent = false,
+  hashed = false,
+  // Inert (see prop docs); destructured so it never reaches a native element.
+  motion: _motion = "full"
+}) {
+  const { styles } = useStyles(sheet, { size, accent });
+  const theme = useLoamTheme();
+  const [errored, setErrored] = React.useState(false);
+  const statusColor = useStatusColor(status);
+  const dim = SIZE_PX[size];
+  const showImage = Boolean(src) && !errored;
+  const initials = initialsFromName(name);
+  const hashPair = hashed && initials ? hashedColors(theme, id ?? name) : void 0;
+  const fg = hashPair ? hashPair.ink : accent ? theme.color.accentOnSoft : theme.color.text2;
+  const label = name ?? "Avatar";
+  const shapeRadius = shape === "circle" ? theme.radius.full : shape === "rounded" ? theme.radius.lg : Math.round(dim * 0.32);
+  const shapeStyle = {
+    borderRadius: shapeRadius,
+    ...shape === "squircle" ? { borderCurve: "continuous" } : null
+  };
+  const dotSize = Math.round(dim * 0.28);
+  const ring = 2.5;
+  const dotStyle = {
+    position: "absolute",
+    right: 0,
+    bottom: 0,
+    width: dotSize,
+    height: dotSize,
+    borderRadius: theme.radius.full,
+    borderWidth: ring,
+    borderColor: theme.color.surface,
+    backgroundColor: statusColor
+  };
+  const ringStyle = {
+    position: "absolute",
+    top: -ring - 1,
+    left: -ring - 1,
+    right: -ring - 1,
+    bottom: -ring - 1,
+    borderRadius: shape === "circle" ? theme.radius.full : shapeRadius + ring + 1,
+    borderWidth: ring,
+    borderColor: statusColor,
+    ...shape === "squircle" ? { borderCurve: "continuous" } : null
+  };
+  return /* @__PURE__ */ jsxs(View, { style: styles.root, accessibilityRole: "image", accessibilityLabel: label, children: [
+    /* @__PURE__ */ jsx(View, { style: [styles.circle, shapeStyle, hashPair ? { backgroundColor: hashPair.bg } : null], children: showImage ? /* @__PURE__ */ jsx(Image, { source: { uri: src }, style: styles.image, onError: () => setErrored(true) }) : initials ? /* @__PURE__ */ jsx(Text, { style: [styles.initials, { color: fg }], children: initials }) : /* @__PURE__ */ jsx(Icon, { name: "user", size: Math.round(dim * 0.5), color: fg }) }),
+    statusColor && presence === "ring" ? /* @__PURE__ */ jsx(View, { style: ringStyle, accessibilityRole: "image", accessibilityLabel: status }) : null,
+    statusColor && presence === "dot" ? /* @__PURE__ */ jsx(View, { style: dotStyle, accessibilityRole: "image", accessibilityLabel: status }) : null
+  ] });
+}
+function AvatarGroup({ children, size = "md", max }) {
+  const { styles } = useStyles(sheet, { size, accent: false });
+  const theme = useLoamTheme();
+  const dim = SIZE_PX[size];
+  const ring = 2.5;
+  const overlap = Math.round(dim * 0.3);
+  const all = React.Children.toArray(children);
+  const visible = typeof max === "number" ? all.slice(0, max) : all;
+  const extra = all.length - visible.length;
+  const wrapper = (index) => ({
+    backgroundColor: theme.color.surface,
+    borderRadius: theme.radius.full,
+    padding: ring,
+    marginStart: index === 0 ? 0 : -overlap
+  });
+  return /* @__PURE__ */ jsxs(View, { style: styles.group, children: [
+    visible.map((child, i) => /* @__PURE__ */ jsx(View, { style: wrapper(i), children: React.isValidElement(child) ? React.cloneElement(child, { size }) : child }, i)),
+    extra > 0 ? /* @__PURE__ */ jsx(View, { style: wrapper(visible.length), children: /* @__PURE__ */ jsx(View, { style: styles.circle, children: /* @__PURE__ */ jsxs(Text, { style: styles.overflow, children: [
+      "+",
+      extra
+    ] }) }) }) : null
+  ] });
+}
+var sheet = createStyleSheet((theme) => ({
+  root: { position: "relative" },
+  group: { flexDirection: "row", alignItems: "center" },
+  circle: {
+    alignItems: "center",
+    justifyContent: "center",
+    overflow: "hidden",
+    borderRadius: theme.radius.full,
+    variants: {
+      size: {
+        xs: { width: theme.space[28], height: theme.space[28] },
+        sm: { width: theme.space[36], height: theme.space[36] },
+        md: { width: theme.space[48], height: theme.space[48] },
+        lg: { width: theme.space[60], height: theme.space[60] },
+        xl: { width: theme.space[76], height: theme.space[76] }
+      },
+      // The disc *is* the avatar, so it needs an edge that outlives its fill:
+      // `accentSoft` collapses to the plain surface under high contrast and the
+      // initials would be left floating. Every size sets an explicit width and
+      // height, so the border draws inside the box and changes no layout.
+      accent: {
+        true: {
+          backgroundColor: theme.color.accentSoft,
+          borderWidth: theme.borderWidth.base,
+          borderColor: theme.edge.accent
+        },
+        false: {
+          backgroundColor: theme.color.surface2,
+          borderWidth: theme.borderWidth.base,
+          borderColor: theme.edge.neutral
+        }
+      }
+    }
+  },
+  image: { width: "100%", height: "100%" },
+  initials: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.bold,
+    variants: {
+      size: {
+        xs: { fontSize: theme.fontSize[11] },
+        sm: { fontSize: theme.fontSize[14] },
+        md: { fontSize: theme.fontSize[19] },
+        lg: { fontSize: theme.fontSize[24] },
+        xl: { fontSize: theme.fontSize[30] }
+      },
+      accent: {
+        true: { color: theme.color.accentOnSoft },
+        false: { color: theme.color.text2 }
+      }
+    }
+  },
+  overflow: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.bold,
+    color: theme.color.text2,
+    variants: {
+      size: {
+        xs: { fontSize: theme.fontSize[9] },
+        sm: { fontSize: theme.fontSize[12] },
+        md: { fontSize: theme.fontSize[16] },
+        lg: { fontSize: theme.fontSize[20] },
+        xl: { fontSize: theme.fontSize[25] }
+      },
+      accent: {}
+    }
+  }
+}));
+
+export { Avatar, AvatarGroup, hashToChartIndex, initialsFromName };