@btndprojects/loam-ui-native 0.1.1 → 0.3.1

package/dist/chunk-ZIRMWD2B.js

@@ -0,0 +1,555 @@
+import { useReorder, ROOT_SCROLLER } from './chunk-D2LN4I7I.js';
+import { Card, CardContent } from './chunk-PWFRDRGS.js';
+import { Badge } from './chunk-LGNTP5XA.js';
+import { softToneSkin } from './chunk-PJLTKDVY.js';
+import { expandedProps } from './chunk-W23G6JLF.js';
+import { isAndroidIdiom } from './chunk-TH4PW2WU.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-PCEFCOLN.js';
+import * as React from 'react';
+import { View, ScrollView, Text, Pressable, ActivityIndicator, Animated } from 'react-native';
+import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var DEFAULT_LABELS = {
+  board: "Board",
+  noCards: "No cards",
+  moveUp: "Move up",
+  moveDown: "Move down",
+  movePrev: "Move to previous column",
+  moveNext: "Move to next column",
+  expand: (column, count) => `Expand ${column}, ${count} cards`,
+  collapse: (column) => `Collapse ${column}`,
+  columnName: (column, count) => `${column}, ${count} cards`,
+  cardList: (column) => `${column} cards`,
+  cardHint: (position, total, column) => `Position ${position} of ${total} in ${column}. Press and hold to drag, or use the arrow keys or actions to move it.`,
+  moved: (card, column, position, total) => `Moved ${card} to ${column}, position ${position} of ${total}.`,
+  overLimit: (column, count, limit) => ` ${column} is over its limit, ${count} of ${limit}.`,
+  movedNotice: (card) => `Moved ${card}`,
+  restored: (card, column) => `Restored ${card} to ${column}.`,
+  pickedUp: (card) => `Picked up ${card}.`,
+  droppedBack: (card) => `${card} dropped where it started.`
+};
+function clamp(value, min, max) {
+  return Math.min(max, Math.max(min, value));
+}
+function Board({
+  columns,
+  renderCard,
+  onMoveCard,
+  onToggleColumn,
+  label: labelProp,
+  motion = "full",
+  disabled = false,
+  variant = "default",
+  elevation = "flat",
+  padding = "md",
+  interactive = true,
+  tone = "default",
+  loading = false,
+  density = "comfortable",
+  onNotify,
+  style,
+  labels: labelsProp
+}) {
+  const labels = useLabels("board", DEFAULT_LABELS, labelsProp);
+  const label = labelProp ?? labels.board;
+  const { styles } = useStyles(sheet);
+  const theme = useLoamTheme("board");
+  const [cols, setCols] = React.useState(columns);
+  React.useEffect(() => setCols(columns), [columns]);
+  const [collapsed, setCollapsed] = React.useState(
+    () => Object.fromEntries(columns.map((c) => [c.id, c.collapsed ?? false]))
+  );
+  React.useEffect(() => {
+    setCollapsed((prev) => {
+      const next = {};
+      for (const c of columns) next[c.id] = prev[c.id] ?? c.collapsed ?? false;
+      return next;
+    });
+  }, [columns]);
+  const [pageW, setPageW] = React.useState(theme.breakpoint.phone);
+  const onLayout = (event) => {
+    const w = event.nativeEvent.layout.width;
+    if (w > 0) setPageW(w);
+  };
+  const colW = Math.max(0, pageW - theme.space[32]);
+  const snap = colW + theme.space.s3;
+  const [message, setMessage] = React.useState("");
+  const locate = (cardId) => {
+    for (let c = 0; c < cols.length; c += 1) {
+      const r = cols[c].items.findIndex((it) => it.id === cardId);
+      if (r >= 0) return { col: c, row: r };
+    }
+    return null;
+  };
+  const moveCard = (cardId, toColumnId, index) => {
+    const from = locate(cardId);
+    const toCol = cols.findIndex((c) => c.id === toColumnId);
+    if (!from || toCol < 0) return;
+    const card = cols[from.col].items[from.row];
+    const fromColumnId = cols[from.col].id;
+    const sameCol = from.col === toCol;
+    const next = cols.map((c) => ({ ...c, items: [...c.items] }));
+    next[from.col].items.splice(from.row, 1);
+    const dest = next[toCol].items;
+    const target = clamp(sameCol && index > from.row ? index - 1 : index, 0, dest.length);
+    if (sameCol && target === from.row) return;
+    dest.splice(target, 0, card);
+    setCols(next);
+    onMoveCard?.(cardId, fromColumnId, toColumnId, target);
+    const destCol = next[toCol];
+    const over = destCol.wipLimit !== void 0 && destCol.items.length > destCol.wipLimit ? labels.overLimit(destCol.title, destCol.items.length, destCol.wipLimit) : "";
+    setMessage(labels.moved(card.title, destCol.title, target + 1, destCol.items.length) + over);
+    if (onNotify) {
+      const before = cols;
+      onNotify({
+        text: labels.movedNotice(card.title),
+        undo: () => {
+          setCols(before);
+          onMoveCard?.(cardId, toColumnId, fromColumnId, from.row);
+          setMessage(labels.restored(card.title, before[from.col].title));
+        }
+      });
+    }
+  };
+  const findCard = (cardId) => {
+    const at = locate(cardId);
+    return at ? { card: cols[at.col].items[at.row], column: cols[at.col] } : null;
+  };
+  const reorder = useReorder({
+    motion,
+    tilt: false,
+    // The default face is a `Card`, cornered at `radius.lg` (Final 09).
+    radius: theme.radius.lg,
+    // iOS lifts with a light tap (F35).
+    liftHaptic: "light",
+    renderGhost: (cardId) => {
+      const found = findCard(cardId);
+      if (!found) return null;
+      return renderCard ? renderCard(found.card, found.column) : /* @__PURE__ */ jsx(CardBody, { card: found.card, lifted: true });
+    },
+    onLift: (cardId) => {
+      const found = findCard(cardId);
+      if (found) setMessage(labels.pickedUp(found.card.title));
+    },
+    // `to` counts without the card; within a column `moveCard` expects the
+    // index before it was taken out.
+    onMove: ({ id, fromGroup, toGroup, from, to }) => moveCard(id, toGroup, fromGroup === toGroup && to > from ? to + 1 : to),
+    onCancel: (cardId) => {
+      const found = findCard(cardId);
+      if (found) setMessage(labels.droppedBack(found.card.title));
+    }
+  });
+  const step = (cardId, dir) => {
+    if (disabled || !interactive || loading) return false;
+    const at = locate(cardId);
+    if (!at) return false;
+    const { col, row } = at;
+    if (dir === "up" || dir === "down") {
+      const to = dir === "up" ? row - 1 : row + 2;
+      if (to < 0 || to > cols[col].items.length) return false;
+      reorder.animate(() => moveCard(cardId, cols[col].id, to));
+      return true;
+    }
+    const dest = adjacentColumn(col, dir === "prev" ? -1 : 1);
+    if (dest < 0) return false;
+    reorder.animate(
+      () => moveCard(cardId, cols[dest].id, Math.min(row, cols[dest].items.length))
+    );
+    return true;
+  };
+  const toggleCollapsed = (columnId) => {
+    setCollapsed((prev) => {
+      const nextVal = !prev[columnId];
+      onToggleColumn?.(columnId, nextVal);
+      return { ...prev, [columnId]: nextVal };
+    });
+  };
+  const adjacentColumn = (colIndex, dir) => {
+    for (let c = colIndex + dir; c >= 0 && c < cols.length; c += dir) {
+      if (!collapsed[cols[c].id]) return c;
+    }
+    return -1;
+  };
+  const handleCardKey = (event, cardId) => {
+    const dir = event.key === "ArrowUp" ? "up" : event.key === "ArrowDown" ? "down" : event.key === "ArrowLeft" || event.key === "ArrowRight" ? event.key === "ArrowLeft" !== theme.rtl ? "prev" : "next" : null;
+    if (dir && step(cardId, dir)) event.preventDefault?.();
+  };
+  const look = React.useMemo(
+    () => ({
+      variant,
+      elevation,
+      padding,
+      tone,
+      loading,
+      density,
+      locked: !interactive || loading
+    }),
+    [variant, elevation, padding, tone, loading, density, interactive]
+  );
+  return /* @__PURE__ */ jsx(BoardLookContext.Provider, { value: look, children: /* @__PURE__ */ jsxs(
+    View,
+    {
+      role: "group",
+      accessibilityLabel: label,
+      "aria-busy": loading || void 0,
+      onLayout,
+      style: [styles.root, style],
+      children: [
+        /* @__PURE__ */ jsx(
+          ScrollView,
+          {
+            ...reorder.scroller(ROOT_SCROLLER, { horizontal: true, page: snap }),
+            horizontal: true,
+            showsHorizontalScrollIndicator: false,
+            snapToInterval: snap,
+            decelerationRate: "fast",
+            contentContainerStyle: styles.track,
+            children: cols.map((column) => /* @__PURE__ */ jsx(
+              Column,
+              {
+                column,
+                width: colW,
+                collapsed: collapsed[column.id] ?? false,
+                reorder,
+                disabled,
+                renderCard,
+                onToggle: () => toggleCollapsed(column.id),
+                onCardKey: handleCardKey,
+                onStep: step,
+                labels: labelsProp
+              },
+              column.id
+            ))
+          }
+        ),
+        reorder.overlay,
+        /* @__PURE__ */ jsx(
+          View,
+          {
+            role: "status",
+            style: styles.srOnly,
+            accessibilityLabel: message,
+            ...{ "aria-live": "polite" },
+            children: /* @__PURE__ */ jsx(Text, { style: styles.srOnly, children: message })
+          }
+        )
+      ]
+    }
+  ) });
+}
+var BoardLookContext = React.createContext({
+  variant: "default",
+  elevation: "flat",
+  padding: "md",
+  tone: "default",
+  loading: false,
+  density: "comfortable",
+  locked: false
+});
+function Column({
+  column,
+  width,
+  collapsed,
+  reorder,
+  disabled,
+  renderCard,
+  onToggle,
+  onCardKey,
+  onStep,
+  labels: labelsProp
+}) {
+  const { styles } = useStyles(sheet);
+  const theme = useLoamTheme("board");
+  const labels = useLabels("board", DEFAULT_LABELS, labelsProp);
+  const count = column.items.length;
+  const over = column.wipLimit !== void 0 && count > column.wipLimit;
+  const countLabel = column.wipLimit !== void 0 ? `${count} / ${column.wipLimit}` : `${count}`;
+  const android = isAndroidIdiom(theme);
+  const ios = theme.platform === "iOS";
+  const look = React.useContext(BoardLookContext);
+  const compact = look.density === "compact";
+  const pad = { sm: theme.space.s2, md: theme.space.s3, lg: theme.space.s4 }[look.padding];
+  const skin = look.tone === "default" ? null : softToneSkin(theme, look.tone);
+  const skinStyle = skin ? { backgroundColor: skin.fill, borderColor: skin.edge } : null;
+  const columnStyle = [
+    styles.column,
+    skinStyle,
+    look.elevation === "flat" ? null : theme.shadow[look.elevation === "raised" ? "md" : "sm"],
+    { padding: compact && look.padding === "md" ? theme.space.s2 : pad }
+  ];
+  if (collapsed) {
+    return /* @__PURE__ */ jsx(View, { style: [styles.page, { width }], children: /* @__PURE__ */ jsxs(
+      Pressable,
+      {
+        accessibilityRole: "button",
+        accessibilityLabel: labels.expand(column.title, count),
+        accessibilityState: { expanded: false },
+        ...expandedProps(false),
+        onPress: onToggle,
+        style: ({ pressed }) => [
+          styles.rail,
+          skinStyle,
+          pressed && { backgroundColor: theme.state.pressed }
+        ],
+        children: [
+          /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: theme.icon.sm, color: theme.color.text3 }),
+          /* @__PURE__ */ jsx(Text, { style: styles.railTitle, children: column.title }),
+          /* @__PURE__ */ jsx(Badge, { size: "sm", children: `${count}` })
+        ]
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx(View, { style: [styles.page, { width }], children: /* @__PURE__ */ jsxs(
+    View,
+    {
+      role: "group",
+      accessibilityLabel: labels.columnName(column.title, count),
+      style: columnStyle,
+      children: [
+        /* @__PURE__ */ jsxs(View, { style: styles.header, children: [
+          /* @__PURE__ */ jsx(
+            Pressable,
+            {
+              accessibilityRole: "button",
+              accessibilityLabel: labels.collapse(column.title),
+              accessibilityState: { expanded: true },
+              ...expandedProps(true),
+              onPress: onToggle,
+              hitSlop: (theme.hit.xs - theme.ctl.xs) / 2,
+              android_ripple: android ? { color: theme.state.pressed, borderless: false } : void 0,
+              style: ({ pressed }) => [
+                styles.toggle,
+                pressed && !android && { backgroundColor: theme.state.pressed }
+              ],
+              children: /* @__PURE__ */ jsx(Icon, { name: "chevron-down", size: theme.ctl.icon.xs, color: theme.color.text2 })
+            }
+          ),
+          /* @__PURE__ */ jsx(Text, { style: [styles.headerTitle, ios && styles.headerTitleIos], numberOfLines: 1, children: column.title }),
+          look.loading ? /* @__PURE__ */ jsx(ActivityIndicator, { "aria-hidden": true, size: "small", color: theme.color.text3, testID: "board-loading" }) : null,
+          over ? /* @__PURE__ */ jsx(Badge, { size: "sm", variant: "warn", leadingIcon: "alert-triangle", children: countLabel }) : /* @__PURE__ */ jsx(Badge, { size: "sm", children: countLabel })
+        ] }),
+        /* @__PURE__ */ jsx(
+          ScrollView,
+          {
+            ...reorder.scroller(column.id),
+            role: "list",
+            style: styles.listScroll,
+            contentContainerStyle: styles.listPad,
+            showsVerticalScrollIndicator: false,
+            ...{ "aria-label": labels.cardList(column.title) },
+            children: /* @__PURE__ */ jsx(
+              View,
+              {
+                ...reorder.group(column.id),
+                style: [styles.list, compact ? { gap: theme.space.s1 } : null],
+                children: count === 0 ? (
+                  // The empty placeholder is the sole item of the `role="list"`, so it
+                  // is a `listitem` too (a list may contain only listitems). While a
+                  // card hovers this column the slot takes its place.
+                  /* @__PURE__ */ jsx(
+                    View,
+                    {
+                      role: "listitem",
+                      style: [styles.empty, reorder.over === column.id && styles.emptyHidden],
+                      children: /* @__PURE__ */ jsx(Text, { style: styles.emptyText, children: labels.noCards })
+                    }
+                  )
+                ) : column.items.map((card, row) => /* @__PURE__ */ jsx(
+                  CardCell,
+                  {
+                    card,
+                    column,
+                    index: row,
+                    total: count,
+                    reorder,
+                    disabled,
+                    renderCard,
+                    onCardKey,
+                    onStep,
+                    labels: labelsProp
+                  },
+                  card.id
+                ))
+              }
+            )
+          }
+        )
+      ]
+    }
+  ) });
+}
+var CARD_ACTION_NAMES = ["moveUp", "moveDown", "movePrev", "moveNext"];
+var ACTION_DIR = { moveUp: "up", moveDown: "down", movePrev: "prev", moveNext: "next" };
+function CardBody({
+  card,
+  lifted = false
+}) {
+  const { styles } = useStyles(sheet);
+  const look = React.useContext(BoardLookContext);
+  return /* @__PURE__ */ jsx(
+    Card,
+    {
+      variant: look.variant,
+      dragging: lifted,
+      selected: card.selected,
+      motion: "none",
+      style: styles.card,
+      children: /* @__PURE__ */ jsxs(
+        CardContent,
+        {
+          style: [styles.cardBody, look.density === "compact" ? styles.cardBodyCompact : null],
+          children: [
+            /* @__PURE__ */ jsx(Text, { style: styles.cardTitle, children: card.title }),
+            card.description ? /* @__PURE__ */ jsx(Text, { style: styles.cardDesc, children: card.description }) : null
+          ]
+        }
+      )
+    }
+  );
+}
+function CardCell({
+  card,
+  column,
+  index,
+  total,
+  reorder,
+  disabled,
+  renderCard,
+  onCardKey,
+  onStep,
+  labels: labelsProp
+}) {
+  const { styles } = useStyles(sheet);
+  const theme = useLoamTheme("board");
+  const labels = useLabels("board", DEFAULT_LABELS, labelsProp);
+  const { locked } = React.useContext(BoardLookContext);
+  const cardActions = CARD_ACTION_NAMES.map((name) => ({ name, label: labels[name] }));
+  const keyProps = {
+    onKeyDown: (event) => onCardKey(event, card.id)
+  };
+  const onAction = (event) => {
+    const dir = ACTION_DIR[event.nativeEvent.actionName];
+    if (dir) onStep(card.id, dir);
+  };
+  return (
+    // The card cell is the list item — the column body is a `role="list"`, so its
+    // direct children must each be a `listitem` (aria-required-children).
+    /* @__PURE__ */ jsx(Animated.View, { role: "listitem", ...reorder.item(card.id, column.id, index), children: /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        ...disabled || locked ? {} : reorder.press(card.id),
+        disabled: disabled || locked,
+        accessibilityRole: locked ? void 0 : "button",
+        accessibilityLabel: card.title,
+        accessibilityState: disabled ? { disabled: true } : void 0,
+        accessibilityHint: disabled || locked ? void 0 : labels.cardHint(index + 1, total, column.title),
+        accessibilityActions: disabled || locked ? void 0 : cardActions,
+        onAccessibilityAction: disabled || locked ? void 0 : onAction,
+        style: ({ pressed }) => [
+          styles.card,
+          pressed && !disabled && { opacity: theme.state.pressedOpacity },
+          disabled && { opacity: theme.state.disabledOpacity }
+        ],
+        ...disabled || locked ? {} : keyProps,
+        children: renderCard ? renderCard(card, column) : /* @__PURE__ */ jsx(CardBody, { card })
+      }
+    ) })
+  );
+}
+var sheet = createStyleSheet((theme) => ({
+  root: { flex: 1, alignSelf: "stretch" },
+  track: { gap: theme.space.s3 },
+  page: { paddingVertical: theme.space.s2 },
+  column: {
+    flex: 1,
+    borderRadius: theme.radius.xl,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.color.border,
+    backgroundColor: theme.color.surface2,
+    padding: theme.space.s3,
+    gap: theme.space.s3
+  },
+  header: { flexDirection: "row", alignItems: "center", gap: theme.space.s2 },
+  toggle: {
+    width: theme.ctl.xs,
+    height: theme.ctl.xs,
+    borderRadius: theme.ctl.r.xs,
+    alignItems: "center",
+    justifyContent: "center",
+    overflow: "hidden"
+  },
+  headerTitle: {
+    flex: 1,
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.bold,
+    fontSize: theme.type.subheadline.fontSize,
+    lineHeight: theme.type.subheadline.lineHeight,
+    color: theme.color.text
+  },
+  // iOS headers carry the system's semibold label weight (F35).
+  headerTitleIos: { fontWeight: theme.fontWeight.semibold },
+  // A scroller clips its content, and a card's shadow reaches ~14px past it.
+  // Bleed the scroller out over the column's padding (and the header gap) and
+  // pad it back in, so the shadows fade out inside the clip instead of being
+  // cut into a hard-edged box.
+  listScroll: { margin: -theme.space.s3 },
+  listPad: { padding: theme.space.s3 },
+  list: { gap: theme.space.s2 },
+  empty: {
+    borderRadius: theme.radius.lg,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.color.border,
+    borderStyle: "dashed",
+    paddingVertical: theme.space.s5,
+    alignItems: "center"
+  },
+  emptyHidden: { opacity: 0 },
+  emptyText: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    color: theme.color.text3
+  },
+  card: { borderRadius: theme.radius.lg },
+  cardBody: { padding: theme.space.s3, gap: theme.space.s1 },
+  cardBodyCompact: { padding: theme.space.s2 },
+  cardTitle: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.bold,
+    fontSize: theme.type.subheadline.fontSize,
+    lineHeight: theme.type.subheadline.lineHeight,
+    color: theme.color.text
+  },
+  cardDesc: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    // Secondary ink on the card surface (#fffef9): text2 clears AA there (~5.6:1).
+    color: theme.color.text2
+  },
+  rail: {
+    flex: 1,
+    alignItems: "center",
+    gap: theme.space.s3,
+    borderRadius: theme.radius.xl,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.color.border,
+    backgroundColor: theme.color.surface2,
+    paddingVertical: theme.space.s3
+  },
+  railTitle: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.bold,
+    fontSize: theme.type.subheadline.fontSize,
+    color: theme.color.text
+  },
+  srOnly: {
+    position: "absolute",
+    width: theme.space[1],
+    height: theme.space[1],
+    overflow: "hidden"
+  }
+}));
+
+export { Board };

package/dist/chunk-ZPMG3FWU.js

@@ -0,0 +1,75 @@
+import { Text } from './chunk-L4D5LHCH.js';
+import { isAndroidIdiom } from './chunk-TH4PW2WU.js';
+import 'react';
+import { View, Pressable } from 'react-native';
+import { useLoamTheme } from '@btndprojects/loam-theme-native';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function SectionHeader({
+  title,
+  variant = "list",
+  action,
+  density = "comfortable",
+  size,
+  platform,
+  style,
+  testID
+}) {
+  const theme = useLoamTheme("section-header");
+  const android = isAndroidIdiom(theme, platform);
+  const prominent = !android && variant === "prominent";
+  const ladder = android ? ["labelMedium", "titleSmall", "titleMedium"] : prominent ? ["title3", "title2", "title1"] : ["caption1", "footnote", "subheadline"];
+  const titleVariant = ladder[size === "sm" ? 0 : size === "lg" ? 2 : 1];
+  const linkLadder = android ? ["labelMedium", "labelLarge", "titleSmall"] : prominent ? ["subheadline", "body", "headline"] : ["caption1", "footnote", "subheadline"];
+  const linkVariant = linkLadder[size === "sm" ? 0 : size === "lg" ? 2 : 1];
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      testID,
+      style: [
+        {
+          flexDirection: "row",
+          alignItems: prominent ? "baseline" : "center",
+          justifyContent: "space-between",
+          gap: theme.space[8],
+          paddingHorizontal: theme.space[16],
+          paddingTop: density === "compact" ? prominent ? theme.space[12] : theme.space[8] : prominent ? theme.space[20] : theme.space[16],
+          paddingBottom: density === "compact" ? prominent ? theme.space[4] : theme.space[2] : prominent ? theme.space[8] : theme.space[6]
+        },
+        style
+      ],
+      children: [
+        /* @__PURE__ */ jsx(
+          Text,
+          {
+            accessibilityRole: "header",
+            platform: android ? "android" : "ios",
+            numberOfLines: 1,
+            variant: titleVariant,
+            tone: android ? "accent" : prominent ? "default" : "secondary",
+            style: [
+              { flexShrink: 1 },
+              prominent ? { fontWeight: theme.fontWeight.bold } : null,
+              !android && !prominent ? { textTransform: "uppercase" } : null
+            ],
+            children: title
+          }
+        ),
+        action ? /* @__PURE__ */ jsx(
+          Pressable,
+          {
+            accessibilityRole: "button",
+            accessibilityLabel: action.label,
+            onPress: action.onPress,
+            hitSlop: theme.space[8],
+            android_ripple: android ? { color: theme.state.pressed, borderless: true } : void 0,
+            style: ({ pressed }) => pressed && !android ? { opacity: theme.state.pressedOpacity } : null,
+            children: /* @__PURE__ */ jsx(Text, { platform: android ? "android" : "ios", variant: linkVariant, tone: "accent", children: action.label })
+          }
+        ) : null
+      ]
+    }
+  );
+}
+
+export { SectionHeader };