@btndprojects/loam-ui-native 0.2.1 → 0.3.1

package/dist/{chunk-46MMSDGL.js → chunk-F2KNBPKY.js}

@@ -1,5 +1,5 @@
-import { Chip } from './chunk-2SY63FCH.js';
-import { NumberRoll } from './chunk-T5LTPKX6.js';
+import { Chip } from './chunk-7NGMUVNU.js';
+import { NumberRoll } from './chunk-IMMALLRU.js';
 import { useLabels } from './chunk-APCWFOZW.js';
 import { useResolvedMotion } from './chunk-J64KGCGX.js';
 import * as React from 'react';
@@ -24,11 +24,15 @@ function FilterBar({
   motion = "full",
   animateCount = false,
   accessibilityLabel,
-  labels: labelsProp
+  labels: labelsProp,
+  size = "sm",
+  orientation = "horizontal",
+  variant = "plain"
 }) {
   const labels = useLabels("filterBar", DEFAULT_LABELS, labelsProp);
   const { styles } = useStyles(sheet, { density });
   const theme = useLoamTheme("filter-bar");
+  const vertical = orientation === "vertical";
   const hasFilters = filters.length > 0;
   const showClearAll = hasFilters && onClearAll != null;
   const hasCount = resultCount != null;
@@ -52,76 +56,102 @@ function FilterBar({
     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,
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      accessibilityRole: "toolbar",
+      accessibilityLabel: accessibilityLabel ?? labels.filters,
+      style: [
+        styles.root,
+        vertical ? { flexDirection: "column", alignItems: "flex-start" } : null,
+        variant === "outline" ? {
+          borderWidth: theme.borderWidth.thin,
+          borderColor: theme.color.border,
+          borderRadius: theme.radius.md,
+          padding: theme.space.s2
+        } : null,
+        variant === "filled" ? {
+          backgroundColor: theme.color.surface2,
+          borderRadius: theme.radius.md,
+          padding: theme.space.s2
+        } : null
+      ],
+      children: [
+        children,
+        hasFilters ? /* @__PURE__ */ jsx(
+          ScrollView,
           {
-            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 })
-  ] });
+            horizontal: !vertical,
+            showsHorizontalScrollIndicator: false,
+            style: styles.scrollRoot,
+            contentContainerStyle: [
+              styles.scrollContent,
+              vertical ? { flexWrap: "wrap" } : null
+            ],
+            children: filters.map((filter) => /* @__PURE__ */ jsx(
+              Chip,
+              {
+                size,
+                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: {
@@ -182,12 +212,13 @@ var sheet = createStyleSheet((theme) => ({
     paddingHorizontal: theme.space.s2,
     borderRadius: theme.radius.sm
   },
+  // A link-style sm button (F23): accent-strong ink, no fill at rest.
   clearAllLabel: {
     fontFamily: theme.font.sans,
     fontWeight: theme.fontWeight.semibold,
     fontSize: theme.type.footnote.fontSize,
     lineHeight: theme.type.footnote.lineHeight,
-    color: theme.color.text2
+    color: theme.color.accentStrong
   }
 }));
 

package/dist/{chunk-KQZ3GLHR.js → chunk-G7H3NX3G.js}

@@ -1,3 +1,4 @@
+import { isAndroidIdiom } from './chunk-TH4PW2WU.js';
 import { useLabels } from './chunk-APCWFOZW.js';
 import * as React from 'react';
 import { StyleSheet, Animated, Easing, View, Text } from 'react-native';
@@ -12,6 +13,10 @@ var RING = {
   xl: { diameter: 40, stroke: 4 }
 };
 var ARC_FRACTION = 0.7;
+var ARC_START = { ios: -40, android: -15 };
+function spinnerArcStart(android) {
+  return android ? ARC_START.android : ARC_START.ios;
+}
 var DEFAULT_LABELS = {
   loading: "Loading",
   stillWorking: "Still working\u2026"
@@ -21,12 +26,14 @@ function Spinner({
   color,
   accessibilityLabel: accessibilityLabelProp,
   motion = "full",
-  labels: labelsProp
+  labels: labelsProp,
+  platform
 }) {
   const theme = useLoamTheme("spinner");
   const labels = useLabels("spinner", DEFAULT_LABELS, labelsProp);
   const accessibilityLabel = accessibilityLabelProp ?? labels.loading;
-  const stroke = color ?? theme.color.accent;
+  const stroke = color ?? theme.color.accentStrong;
+  const arcStart = spinnerArcStart(isAndroidIdiom(theme, platform));
   const { diameter, stroke: strokeWidth } = RING[size];
   const spinning = motion === "full" && !theme.reduceMotion;
   const radius = (diameter - strokeWidth) / 2;
@@ -57,22 +64,38 @@ function Spinner({
   return /* @__PURE__ */ jsx(
     Animated.View,
     {
-      accessibilityRole: "progressbar",
-      accessibilityLabel,
-      accessibilityState: { busy: true },
+      ...accessibilityLabel === "" ? { accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", "aria-hidden": true } : {
+        accessibilityRole: "progressbar",
+        accessibilityLabel,
+        accessibilityState: { busy: true }
+      },
       style: { width: diameter, height: diameter, transform: [{ rotate: spin }] },
-      children: /* @__PURE__ */ jsx(Svg, { width: diameter, height: diameter, viewBox: `0 0 ${diameter} ${diameter}`, fill: "none", children: /* @__PURE__ */ jsx(
-        Circle,
-        {
-          cx: diameter / 2,
-          cy: diameter / 2,
-          r: radius,
-          stroke,
-          strokeWidth,
-          strokeLinecap: "round",
-          strokeDasharray: `${arc} ${circumference}`
-        }
-      ) })
+      children: /* @__PURE__ */ jsxs(Svg, { width: diameter, height: diameter, viewBox: `0 0 ${diameter} ${diameter}`, fill: "none", children: [
+        /* @__PURE__ */ jsx(
+          Circle,
+          {
+            cx: diameter / 2,
+            cy: diameter / 2,
+            r: radius,
+            stroke: theme.color.surface3,
+            strokeWidth
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Circle,
+          {
+            cx: diameter / 2,
+            cy: diameter / 2,
+            r: radius,
+            stroke,
+            strokeWidth,
+            strokeLinecap: "round",
+            strokeDasharray: `${arc} ${circumference}`,
+            rotation: arcStart,
+            origin: `${diameter / 2}, ${diameter / 2}`
+          }
+        )
+      ] })
     }
   );
 }