@btndprojects/loam-ui-native 0.2.1 → 0.3.1

package/dist/{chunk-EY4DD67D.js → chunk-ZIRMWD2B.js}

@@ -1,10 +1,13 @@
-import { useReorder, ROOT_SCROLLER } from './chunk-36EC2T6P.js';
-import { Card, CardContent } from './chunk-YXOAPXMU.js';
+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-UXGIW7OK.js';
+import { Icon } from './chunk-PCEFCOLN.js';
 import * as React from 'react';
-import { View, ScrollView, Text, Pressable, Animated } from 'react-native';
+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';
 
@@ -37,6 +40,14 @@ function Board({
   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
@@ -62,6 +73,8 @@ function Board({
     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) {
@@ -87,9 +100,7 @@ function Board({
     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
-    );
+    setMessage(labels.moved(card.title, destCol.title, target + 1, destCol.items.length) + over);
     if (onNotify) {
       const before = cols;
       onNotify({
@@ -109,8 +120,10 @@ function Board({
   const reorder = useReorder({
     motion,
     tilt: false,
-    // The default face is a `Card`, cornered at `radius.xl`.
-    radius: theme.radius.xl,
+    // 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;
@@ -129,6 +142,7 @@ function Board({
     }
   });
   const step = (cardId, dir) => {
+    if (disabled || !interactive || loading) return false;
     const at = locate(cardId);
     if (!at) return false;
     const { col, row } = at;
@@ -162,52 +176,84 @@ function Board({
     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?.();
   };
-  return /* @__PURE__ */ jsxs(View, { role: "group", accessibilityLabel: label, onLayout, style: [styles.root, style], children: [
-    /* @__PURE__ */ jsx(
-      ScrollView,
-      {
-        ...reorder.scroller(ROOT_SCROLLER, { horizontal: true, page: pageW + theme.space.s3 }),
-        horizontal: true,
-        pagingEnabled: true,
-        showsHorizontalScrollIndicator: false,
-        snapToInterval: pageW,
-        decelerationRate: "fast",
-        contentContainerStyle: styles.track,
-        children: cols.map((column) => /* @__PURE__ */ jsx(
-          Column,
+  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,
           {
-            column,
-            width: pageW,
-            collapsed: collapsed[column.id] ?? false,
-            reorder,
-            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 })
-      }
-    )
-  ] });
+            ...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,
@@ -220,6 +266,19 @@ function Column({
   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,
@@ -231,12 +290,13 @@ function Column({
         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(View, { style: styles.countNeutral, children: /* @__PURE__ */ jsx(Text, { style: styles.countNeutralText, children: count }) })
+          /* @__PURE__ */ jsx(Badge, { size: "sm", children: `${count}` })
         ]
       }
     ) });
@@ -246,7 +306,7 @@ function Column({
     {
       role: "group",
       accessibilityLabel: labels.columnName(column.title, count),
-      style: styles.column,
+      style: columnStyle,
       children: [
         /* @__PURE__ */ jsxs(View, { style: styles.header, children: [
           /* @__PURE__ */ jsx(
@@ -257,19 +317,18 @@ function Column({
               accessibilityState: { expanded: true },
               ...expandedProps(true),
               onPress: onToggle,
-              hitSlop: 8,
+              hitSlop: (theme.hit.xs - theme.ctl.xs) / 2,
+              android_ripple: android ? { color: theme.state.pressed, borderless: false } : void 0,
               style: ({ pressed }) => [
                 styles.toggle,
-                pressed && { backgroundColor: theme.state.pressed }
+                pressed && !android && { backgroundColor: theme.state.pressed }
               ],
-              children: /* @__PURE__ */ jsx(Icon, { name: "chevron-down", size: theme.icon.sm, color: theme.color.text2 })
+              children: /* @__PURE__ */ jsx(Icon, { name: "chevron-down", size: theme.ctl.icon.xs, color: theme.color.text2 })
             }
           ),
-          /* @__PURE__ */ jsx(Text, { style: styles.headerTitle, numberOfLines: 1, children: column.title }),
-          over ? /* @__PURE__ */ jsxs(View, { style: styles.countWarn, children: [
-            /* @__PURE__ */ jsx(Icon, { name: "alert-triangle", size: theme.icon.xs, color: theme.color.warnOnSoft }),
-            /* @__PURE__ */ jsx(Text, { style: styles.countWarnText, children: countLabel })
-          ] }) : /* @__PURE__ */ jsx(View, { style: styles.countNeutral, children: /* @__PURE__ */ jsx(Text, { style: styles.countNeutralText, children: countLabel }) })
+          /* @__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,
@@ -280,33 +339,41 @@ function Column({
             contentContainerStyle: styles.listPad,
             showsVerticalScrollIndicator: false,
             ...{ "aria-label": labels.cardList(column.title) },
-            children: /* @__PURE__ */ jsx(View, { ...reorder.group(column.id), style: styles.list, 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,
+            children: /* @__PURE__ */ jsx(
+              View,
               {
-                card,
-                column,
-                index: row,
-                total: count,
-                reorder,
-                renderCard,
-                onCardKey,
-                onStep,
-                labels: labelsProp
-              },
-              card.id
-            )) })
+                ...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
+                ))
+              }
+            )
           }
         )
       ]
@@ -320,10 +387,27 @@ function CardBody({
   lifted = false
 }) {
   const { styles } = useStyles(sheet);
-  return /* @__PURE__ */ jsx(Card, { variant: "default", dragging: lifted, motion: "none", children: /* @__PURE__ */ jsxs(CardContent, { style: styles.cardBody, children: [
-    /* @__PURE__ */ jsx(Text, { style: styles.cardTitle, children: card.title }),
-    card.description ? /* @__PURE__ */ jsx(Text, { style: styles.cardDesc, children: card.description }) : null
-  ] }) });
+  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,
@@ -331,6 +415,7 @@ function CardCell({
   index,
   total,
   reorder,
+  disabled,
   renderCard,
   onCardKey,
   onStep,
@@ -339,6 +424,7 @@ function CardCell({
   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)
@@ -353,14 +439,20 @@ function CardCell({
     /* @__PURE__ */ jsx(Animated.View, { role: "listitem", ...reorder.item(card.id, column.id, index), children: /* @__PURE__ */ jsx(
       Pressable,
       {
-        ...reorder.press(card.id),
-        accessibilityRole: "button",
+        ...disabled || locked ? {} : reorder.press(card.id),
+        disabled: disabled || locked,
+        accessibilityRole: locked ? void 0 : "button",
         accessibilityLabel: card.title,
-        accessibilityHint: labels.cardHint(index + 1, total, column.title),
-        accessibilityActions: cardActions,
-        onAccessibilityAction: onAction,
-        style: ({ pressed }) => [styles.card, pressed && { opacity: theme.state.pressedOpacity }],
-        ...keyProps,
+        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 })
       }
     ) })
@@ -380,7 +472,14 @@ var sheet = createStyleSheet((theme) => ({
     gap: theme.space.s3
   },
   header: { flexDirection: "row", alignItems: "center", gap: theme.space.s2 },
-  toggle: { borderRadius: theme.radius.sm, padding: theme.space.s1 },
+  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,
@@ -389,35 +488,8 @@ var sheet = createStyleSheet((theme) => ({
     lineHeight: theme.type.subheadline.lineHeight,
     color: theme.color.text
   },
-  countNeutral: {
-    borderRadius: theme.radius.full,
-    backgroundColor: theme.color.surface3,
-    paddingHorizontal: theme.space.s2,
-    paddingVertical: theme.space[2]
-  },
-  countNeutralText: {
-    fontFamily: theme.font.mono,
-    fontSize: theme.type.caption1.fontSize,
-    // Primary ink: `text2` is only ~4.4:1 on the pill's surface-3 fill, short of
-    // AA; primary `text` clears it (~12.7:1 light / ~11.6:1 dark).
-    color: theme.color.text
-  },
-  countWarn: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: theme.space.s1,
-    borderRadius: theme.radius.full,
-    borderWidth: theme.borderWidth.base,
-    borderColor: theme.edge.warn,
-    backgroundColor: theme.color.warnSoft,
-    paddingHorizontal: theme.space.s2,
-    paddingVertical: theme.space[2]
-  },
-  countWarnText: {
-    fontFamily: theme.font.mono,
-    fontSize: theme.type.caption1.fontSize,
-    color: theme.color.warnOnSoft
-  },
+  // 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
@@ -439,8 +511,9 @@ var sheet = createStyleSheet((theme) => ({
     fontSize: theme.type.footnote.fontSize,
     color: theme.color.text3
   },
-  card: { borderRadius: theme.radius.xl },
+  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,

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 };