@btndprojects/loam-ui-native 0.1.1 → 0.3.1

package/dist/{chunk-Q72LJOVE.js → chunk-F2KNBPKY.js}

@@ -1,27 +1,57 @@
-import { Chip } from './chunk-AI4DWZCD.js';
-import { NumberRoll } from './chunk-CUMUNPXY.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';
-import { AccessibilityInfo, View, ScrollView, Text, Pressable } from 'react-native';
+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 = "results",
+  resultNoun,
   onClearAll,
   children,
   density = "comfortable",
   motion = "full",
   animateCount = false,
-  accessibilityLabel = "Active filters"
+  accessibilityLabel,
+  labels: labelsProp,
+  size = "sm",
+  orientation = "horizontal",
+  variant = "plain"
 }) {
+  const labels = useLabels("filterBar", DEFAULT_LABELS, labelsProp);
   const { styles } = useStyles(sheet, { density });
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("filter-bar");
+  const vertical = orientation === "vertical";
   const hasFilters = filters.length > 0;
   const showClearAll = hasFilters && onClearAll != null;
   const hasCount = resultCount != null;
-  const countLabel = hasCount ? `${resultCount} ${resultNoun}` : void 0;
+  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);
@@ -30,20 +60,38 @@ function FilterBar({
     View,
     {
       accessibilityRole: "toolbar",
-      accessibilityLabel,
-      style: styles.root,
+      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,
           {
-            horizontal: true,
+            horizontal: !vertical,
             showsHorizontalScrollIndicator: false,
             style: styles.scrollRoot,
-            contentContainerStyle: styles.scrollContent,
+            contentContainerStyle: [
+              styles.scrollContent,
+              vertical ? { flexWrap: "wrap" } : null
+            ],
             children: filters.map((filter) => /* @__PURE__ */ jsx(
               Chip,
               {
+                size,
                 selectable: true,
                 selected: true,
                 removable: true,
@@ -55,19 +103,21 @@ function FilterBar({
               filter.id
             ))
           }
-        ) : /* @__PURE__ */ jsx(Text, { style: styles.empty, children: "No filters" }),
+        ) : /* @__PURE__ */ jsx(Text, { style: styles.empty, children: labels.none }),
         showClearAll ? /* @__PURE__ */ jsx(
           Pressable,
           {
             accessibilityRole: "button",
-            accessibilityLabel: "Clear all",
+            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: "Clear all" })
+            children: /* @__PURE__ */ jsx(Text, { style: styles.clearAllLabel, children: labels.clearAll })
           }
         ) : null,
         hasCount ? animateCount ? /* @__PURE__ */ jsx(
@@ -84,7 +134,7 @@ function FilterBar({
             },
             motion,
             announce: true,
-            style: styles.countRoll
+            style: showClearAll ? styles.countRollAfterClear : styles.countRoll
           }
         ) : (
           // `accessibilityLiveRegion` re-announces on Android; the effect above
@@ -94,7 +144,7 @@ function FilterBar({
             {
               accessibilityLiveRegion: "polite",
               accessibilityLabel: countLabel,
-              style: styles.count,
+              style: showClearAll ? [styles.count, styles.countAfterClear] : styles.count,
               children: countLabel
             }
           )
@@ -151,18 +201,24 @@ var sheet = createStyleSheet((theme) => ({
   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,
-    paddingVertical: theme.space.s1,
     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-O7AE6DAF.js → chunk-G7H3NX3G.js}

@@ -1,10 +1,11 @@
+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';
 import { Svg, Circle } from 'react-native-svg';
 import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
-// src/spinner/spinner.tsx
 var RING = {
   sm: { diameter: 16, stroke: 2 },
   md: { diameter: 20, stroke: 2.5 },
@@ -12,14 +13,27 @@ 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"
+};
 function Spinner({
   size = "md",
   color,
-  accessibilityLabel = "Loading",
-  motion = "full"
+  accessibilityLabel: accessibilityLabelProp,
+  motion = "full",
+  labels: labelsProp,
+  platform
 }) {
-  const theme = useLoamTheme();
-  const stroke = color ?? theme.color.accent;
+  const theme = useLoamTheme("spinner");
+  const labels = useLabels("spinner", DEFAULT_LABELS, labelsProp);
+  const accessibilityLabel = accessibilityLabelProp ?? labels.loading;
+  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;
@@ -50,36 +64,55 @@ 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}`
+          }
+        )
+      ] })
     }
   );
 }
-var DEFAULT_LATE_LABEL = "Still working\u2026";
 function LoadingOverlay({
   active = true,
   size = "lg",
   color,
-  accessibilityLabel = "Loading",
+  accessibilityLabel: accessibilityLabelProp,
   late = false,
-  lateLabel = DEFAULT_LATE_LABEL,
+  lateLabel: lateLabelProp,
   scrim = "default",
-  motion = "full"
+  motion = "full",
+  labels: labelsProp
 }) {
+  const labels = useLabels("spinner", DEFAULT_LABELS, labelsProp);
+  const accessibilityLabel = accessibilityLabelProp ?? labels.loading;
+  const lateLabel = lateLabelProp ?? labels.stillWorking;
   const { styles } = useStyles(sheet, { scrim: scrim === "light" ? "light" : void 0 });
   if (!active) return null;
   return /* @__PURE__ */ jsx(