@btndprojects/loam-ui-native 0.1.0 → 0.2.1

package/dist/{chunk-IIQTAY3J.js → chunk-DN7MNQIP.js}

@@ -1,35 +1,57 @@
-import { Skeleton } from './chunk-RIBDXGUG.js';
-import { Button } from './chunk-3ARE4TES.js';
-import { useResolvedMotion } from './chunk-6N33LFQA.js';
-import { Icon } from './chunk-TKVFVF5D.js';
+import { Skeleton } from './chunk-PNF3NKB5.js';
+import { Button } from './chunk-E2E3I5W2.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-UXGIW7OK.js';
+import { useResolvedMotion } from './chunk-J64KGCGX.js';
 import * as React from 'react';
 import { View, Text, Animated, Easing } from 'react-native';
 import { Svg, Path, Polyline, Circle, Line, Rect } from 'react-native-svg';
 import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
-var STATE_DEFAULTS = {
+// src/charts/charts-labels.ts
+var DEFAULT_CHARTS_LABELS = {
   emptyTitle: "No data",
   emptyMessage: "There is nothing to show for this range.",
   errorTitle: "Could not load this chart",
   errorMessage: "The data could not be loaded.",
-  retryLabel: "Retry",
-  loadingLabel: "Loading chart"
+  retry: "Retry",
+  loading: "Loading chart",
+  other: "Other",
+  lineChart: "Line chart",
+  barChart: "Bar chart",
+  donutChart: "DonutChart chart",
+  stackedBarChart: "Stacked bar chart",
+  noData: (kind) => kind + ", no data",
+  pointCount: (n) => n + " " + (n === 1 ? "point" : "points"),
+  span: (first, end) => first + " to " + end,
+  seriesSummary: (kind, span, points, min, max, last) => kind + (span ? ", " + span : "") + ", " + points + ", " + min + " to " + max + ", last " + last,
+  donutSummary: (kind, slices) => kind + ": " + slices,
+  donutSlice: (label, pct) => label + " " + pct + "%",
+  stackedSummary: (kind, names, columns) => kind + " of " + names + " across " + columns + " columns"
 };
 function ChartFrame({
   state = "data",
   width,
   height,
   compact = false,
-  emptyTitle = STATE_DEFAULTS.emptyTitle,
-  emptyMessage = STATE_DEFAULTS.emptyMessage,
-  errorTitle = STATE_DEFAULTS.errorTitle,
-  errorMessage = STATE_DEFAULTS.errorMessage,
-  retryLabel = STATE_DEFAULTS.retryLabel,
-  loadingLabel = STATE_DEFAULTS.loadingLabel,
+  emptyTitle: emptyTitleProp,
+  emptyMessage: emptyMessageProp,
+  errorTitle: errorTitleProp,
+  errorMessage: errorMessageProp,
+  retryLabel: retryLabelProp,
+  loadingLabel: loadingLabelProp,
+  labels: labelsProp,
   onRetry
 }) {
-  const theme = useLoamTheme();
+  const labels = useLabels("charts", DEFAULT_CHARTS_LABELS, labelsProp);
+  const emptyTitle = emptyTitleProp ?? labels.emptyTitle;
+  const emptyMessage = emptyMessageProp ?? labels.emptyMessage;
+  const errorTitle = errorTitleProp ?? labels.errorTitle;
+  const errorMessage = errorMessageProp ?? labels.errorMessage;
+  const retryLabel = retryLabelProp ?? labels.retry;
+  const loadingLabel = loadingLabelProp ?? labels.loading;
+  const theme = useLoamTheme("charts");
   const { styles } = useStyles(frameSheet);
   if (state === "data") return null;
   const box = { minWidth: width, minHeight: height };
@@ -112,15 +134,15 @@ function toneColors(theme, tone) {
   }
 }
 function useToneColors(tone) {
-  return toneColors(useLoamTheme(), tone);
+  return toneColors(useLoamTheme("charts"), tone);
 }
 function clamp(n, lo, hi) {
   return Math.max(lo, Math.min(hi, n));
 }
 function useDrawIn(motion, animate) {
-  const resolved = useResolvedMotion(motion ?? (animate ? "full" : "none"));
+  const resolved = useResolvedMotion(motion ?? (animate ? "full" : "none"), "charts");
   const on = resolved !== "none";
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("charts");
   const opacity = React.useRef(new Animated.Value(on ? 0 : 1)).current;
   React.useEffect(() => {
     if (!on) return;
@@ -136,6 +158,7 @@ function useDrawIn(motion, animate) {
   return opacity;
 }
 function Sparkline({
+  labels: labelsProp,
   data,
   width = 120,
   height = 32,
@@ -153,11 +176,13 @@ function Sparkline({
   retryLabel,
   loadingLabel,
   onRetry,
-  accessibilityLabel = "Sparkline chart"
+  accessibilityLabel: labelProp
 }) {
+  const labels = useLabels("charts", DEFAULT_CHARTS_LABELS, labelsProp);
   const { main, soft } = useToneColors(tone);
   const opacity = useDrawIn(motion, animate);
   const dotR = strokeWidth + 1.5;
+  const accessibilityLabel = labelProp ?? summarizeSeries(labels.lineChart, data, void 0, labels);
   const pad = Math.max(strokeWidth, showDot ? dotR : 0);
   const innerW = Math.max(0, width - pad * 2);
   const innerH = Math.max(0, height - pad * 2);
@@ -176,6 +201,7 @@ function Sparkline({
     return /* @__PURE__ */ jsx(
       ChartFrame,
       {
+        labels,
         compact: true,
         state,
         width,
@@ -214,6 +240,26 @@ function Sparkline({
     }
   );
 }
+function spoken(n) {
+  return new Intl.NumberFormat("en", { notation: "compact", maximumFractionDigits: 1 }).format(n);
+}
+function summarizeSeries(kind, values, labels, copy = DEFAULT_CHARTS_LABELS) {
+  if (values.length === 0) return copy.noData(kind);
+  const min = Math.min(...values);
+  const max = Math.max(...values);
+  const last = values[values.length - 1];
+  const first = labels?.[0];
+  const end = labels?.[values.length - 1];
+  const span = first && end ? copy.span(first, end) : "";
+  return copy.seriesSummary(
+    kind,
+    span,
+    copy.pointCount(values.length),
+    spoken(min),
+    spoken(max),
+    spoken(last)
+  );
+}
 function normalizeBars(data) {
   return data.map((d) => typeof d === "number" ? { value: d } : d);
 }
@@ -223,6 +269,7 @@ function topRoundedBar(x, y, w, h, r) {
   return `M ${x},${y + h} L ${x},${y + rr} Q ${x},${y} ${x + rr},${y} L ${x + w - rr},${y} Q ${x + w},${y} ${x + w},${y + rr} L ${x + w},${y + h} Z`;
 }
 function BarChart({
+  labels: labelsProp,
   data,
   width = 140,
   height = 150,
@@ -232,11 +279,18 @@ function BarChart({
   highlightLast = true,
   highlightIndex,
   colors,
-  accessibilityLabel = "Bar chart"
+  accessibilityLabel: labelProp
 }) {
-  const theme = useLoamTheme();
+  const labels = useLabels("charts", DEFAULT_CHARTS_LABELS, labelsProp);
+  const theme = useLoamTheme("charts");
   const { main, soft } = useToneColors(tone);
   const bars = normalizeBars(data);
+  const accessibilityLabel = labelProp ?? summarizeSeries(
+    labels.barChart,
+    bars.map((b) => b.value),
+    bars.map((b) => b.label),
+    labels
+  );
   const n = bars.length;
   const values = bars.map((b) => b.value);
   const max = n > 0 ? Math.max(...values, 0) : 0;
@@ -264,6 +318,7 @@ function BarChart({
   );
 }
 function RingChart({
+  labels: labelsProp,
   value,
   max = 100,
   size = 92,
@@ -272,7 +327,8 @@ function RingChart({
   label = false,
   accessibilityLabel
 }) {
-  const theme = useLoamTheme();
+  useLabels("charts", DEFAULT_CHARTS_LABELS, labelsProp);
+  const theme = useLoamTheme("charts");
   const { main } = useToneColors(tone);
   const fraction = max > 0 ? clamp(value / max, 0, 1) : 0;
   const now = Math.round(fraction * 100);
@@ -349,8 +405,19 @@ function RingChart({
   );
 }
 var ringSvgStyle = { position: "absolute" };
-function Donut({
-  data,
+function foldDonutSlices(data, max, other) {
+  if (max <= 0 || data.length <= max) return data;
+  const keep = new Set(
+    data.map((d, i) => ({ v: d.value, i })).sort((a, b) => b.v - a.v).slice(0, max - 1).map((x) => x.i)
+  );
+  const rest = data.filter((_, i) => !keep.has(i)).reduce((a, d) => a + d.value, 0);
+  return [...data.filter((_, i) => keep.has(i)), { label: other, value: rest }];
+}
+function DonutChart({
+  labels: labelsProp,
+  data: rawData,
+  maxSlices = 5,
+  otherLabel: otherLabelProp,
   size = 140,
   thickness = 18,
   showLegend = true,
@@ -365,15 +432,23 @@ function Donut({
   retryLabel,
   loadingLabel,
   onRetry,
-  accessibilityLabel = "Donut chart"
+  accessibilityLabel: labelProp
 }) {
-  const theme = useLoamTheme();
+  const labels = useLabels("charts", DEFAULT_CHARTS_LABELS, labelsProp);
+  const data = foldDonutSlices(rawData, maxSlices, otherLabelProp ?? labels.other);
+  const donutTotal = data.reduce((a, d) => a + d.value, 0);
+  const accessibilityLabel = labelProp ?? (data.length && donutTotal > 0 ? labels.donutSummary(
+    labels.donutChart,
+    data.map((d) => labels.donutSlice(d.label, Math.round(d.value / donutTotal * 100))).join(", ")
+  ) : labels.noData(labels.donutChart));
+  const theme = useLoamTheme("charts");
   const { styles } = useStyles(donutSheet);
   const opacity = useDrawIn(motion, animate);
   if (state !== "data") {
     return /* @__PURE__ */ jsx(
       ChartFrame,
       {
+        labels,
         state,
         width: size,
         height: size,
@@ -518,7 +593,8 @@ var donutSheet = createStyleSheet((theme) => ({
     color: theme.color.text2
   }
 }));
-function StackedBar({
+function StackedBarChart({
+  labels: labelsProp,
   data,
   series,
   width = 280,
@@ -541,7 +617,8 @@ function StackedBar({
   onRetry,
   accessibilityLabel
 }) {
-  const theme = useLoamTheme();
+  const labels = useLabels("charts", DEFAULT_CHARTS_LABELS, labelsProp);
+  const theme = useLoamTheme("charts");
   const { styles } = useStyles(stackedSheet);
   const opacity = useDrawIn(motion, animate);
   const palette = [
@@ -553,11 +630,16 @@ function StackedBar({
     theme.chart.c6
   ];
   const segColor = (i) => colors && colors.length > 0 ? colors[i % colors.length] : palette[i % palette.length];
-  const label = accessibilityLabel ?? (series && series.length ? `Stacked bar chart of ${series.map((s) => s.label).join(", ")} across ${data.length} columns` : "Stacked bar chart");
+  const label = accessibilityLabel ?? (series && series.length ? labels.stackedSummary(
+    labels.stackedBarChart,
+    series.map((s) => s.label).join(", "),
+    data.length
+  ) : labels.stackedBarChart);
   if (state !== "data") {
     return /* @__PURE__ */ jsx(
       ChartFrame,
       {
+        labels,
         state,
         width,
         height,
@@ -649,6 +731,7 @@ var stackedSheet = createStyleSheet((theme) => ({
   }
 }));
 function StatCard({
+  labels: labelsProp,
   label,
   value,
   delta,
@@ -657,6 +740,7 @@ function StatCard({
   tone = "accent",
   accessibilityLabel
 }) {
+  useLabels("charts", DEFAULT_CHARTS_LABELS, labelsProp);
   const { styles } = useStyles(statSheet, { deltaTone });
   const [sparkW, setSparkW] = React.useState(0);
   const onSparkLayout = React.useCallback((e) => {
@@ -712,4 +796,4 @@ var statSheet = createStyleSheet((theme) => ({
   spark: { marginTop: "auto" }
 }));
 
-export { BarChart, ChartFrame, Donut, RingChart, Sparkline, StackedBar, StatCard };
+export { BarChart, ChartFrame, DonutChart, RingChart, Sparkline, StackedBarChart, StatCard, foldDonutSlices };

package/dist/{chunk-47FWHGUN.js → chunk-DVGBZ3TX.js}

@@ -1,25 +1,40 @@
 import { NO_UA_FOCUS_RING } from './chunk-3NMD74ZU.js';
-import { useResolvedMotion } from './chunk-6N33LFQA.js';
-import { Icon } from './chunk-TKVFVF5D.js';
+import { announce } from './chunk-W23G6JLF.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-UXGIW7OK.js';
+import { useResolvedMotion } from './chunk-J64KGCGX.js';
 import * as React from 'react';
-import { View, TextInput, ScrollView, Text, Animated, Pressable, Easing } from 'react-native';
+import { Platform, View, TextInput, Pressable, Text, ScrollView, Animated, Easing } from 'react-native';
 import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
 var LEADING_ICON = 18;
 var CANCEL_WIDTH = 52;
 var RECENTS_MAX_H = 120;
-function SearchBar({
+var DEFAULT_LABELS = {
+  placeholder: "Search",
+  clear: "Clear search",
+  recent: "Recent",
+  noMatches: "No matches",
+  noMatchesFor: (query) => `No matches for "${query}"`,
+  tryRecent: "Try a recent search",
+  results: (count) => `${count} ${count === 1 ? "result" : "results"}`,
+  cancel: "Cancel"
+};
+function SearchField({
   data,
   recents = [],
   onSelect,
-  placeholder = "Search",
+  placeholder: placeholderProp,
   value,
   defaultValue = "",
-  onChangeText
+  onChangeText,
+  labels: labelsProp
 }) {
   const { styles } = useStyles(sheet);
-  const theme = useLoamTheme();
+  const labels = useLabels("searchField", DEFAULT_LABELS, labelsProp);
+  const placeholder = placeholderProp ?? labels.placeholder;
+  const theme = useLoamTheme("search-field");
   const iconColor = theme.color.text3;
   const [focused, setFocused] = React.useState(false);
   const isControlled = value !== void 0;
@@ -29,6 +44,7 @@ function SearchBar({
     if (!isControlled) setInternal(text);
     onChangeText?.(text);
   };
+  const clear = () => handleChangeText("");
   const isEmpty = query.length === 0;
   const needle = query.toLowerCase();
   const matches = isEmpty ? [] : data.filter((item) => item.toLowerCase().includes(needle));
@@ -47,6 +63,12 @@ function SearchBar({
     },
     item
   );
+  const countText = isEmpty ? "" : matches.length === 0 ? labels.noMatches : labels.results(matches.length);
+  React.useEffect(() => {
+    if (Platform.OS === "web" || !countText) return;
+    const t = setTimeout(() => announce(countText), 600);
+    return () => clearTimeout(t);
+  }, [countText]);
   return /* @__PURE__ */ jsxs(View, { style: styles.container, children: [
     /* @__PURE__ */ jsxs(View, { style: [styles.field, focused ? styles.fieldFocused : null], children: [
       /* @__PURE__ */ jsx(Icon, { name: "search", size: LEADING_ICON, color: iconColor }),
@@ -59,33 +81,59 @@ function SearchBar({
           onFocus: () => setFocused(true),
           onBlur: () => setFocused(false),
           placeholder,
-          placeholderTextColor: theme.color.text3
+          placeholderTextColor: theme.color.text3,
+          returnKeyType: "search",
+          ...Platform.OS === "web" ? { role: "searchbox" } : { accessibilityRole: "search" },
+          accessibilityLabel: placeholder,
+          onSubmitEditing: () => {
+            const top = matches[0];
+            if (top !== void 0) onSelect?.(top);
+          },
+          onKeyPress: (e) => {
+            if (e.nativeEvent.key === "Escape" && !isEmpty) clear();
+          }
+        }
+      ),
+      isEmpty ? null : /* @__PURE__ */ jsx(
+        Pressable,
+        {
+          accessibilityRole: "button",
+          accessibilityLabel: labels.clear,
+          onPress: clear,
+          hitSlop: Math.max(0, (theme.tapMin - theme.icon.sm) / 2),
+          children: /* @__PURE__ */ jsx(Icon, { name: "x", size: theme.icon.sm, color: iconColor })
         }
       )
     ] }),
+    Platform.OS === "web" ? /* @__PURE__ */ jsx(Text, { accessibilityLiveRegion: "polite", style: styles.liveCount, children: countText }) : null,
     /* @__PURE__ */ jsx(ScrollView, { style: styles.results, contentContainerStyle: styles.resultsContent, children: isEmpty ? /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(Text, { style: styles.recentHeader, children: "Recent" }),
+      recents.length > 0 ? /* @__PURE__ */ jsx(Text, { style: styles.recentHeader, children: labels.recent }) : null,
       recents.map((item) => renderRow(item, "more-horizontal"))
-    ] }) : matches.length > 0 ? matches.map((item) => renderRow(item, "search")) : /* @__PURE__ */ jsxs(Text, { style: styles.empty, children: [
-      'No matches for "',
-      query,
-      '"'
+    ] }) : matches.length > 0 ? matches.map((item) => renderRow(item, "search")) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Text, { style: styles.empty, children: labels.noMatchesFor(query) }),
+      recents.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Text, { style: styles.recentHeader, children: labels.tryRecent }),
+        recents.map((item) => renderRow(item, "more-horizontal"))
+      ] }) : null
     ] }) })
   ] });
 }
-function SearchExpand({
+function ExpandingSearchField({
   recents = [],
-  placeholder = "Search",
+  placeholder: placeholderProp,
   value,
   defaultValue = "",
   onChangeText,
   onCancel,
   onSelectRecent,
-  motion = "full"
+  motion = "full",
+  labels: labelsProp
 }) {
   const { styles: sx } = useStyles(expandSheet);
-  const theme = useLoamTheme();
-  const resolved = useResolvedMotion(motion);
+  const labels = useLabels("searchField", DEFAULT_LABELS, labelsProp);
+  const placeholder = placeholderProp ?? labels.placeholder;
+  const theme = useLoamTheme("search-field");
+  const resolved = useResolvedMotion(motion, "search-field");
   const animateTravel = resolved === "full";
   const animateFade = resolved !== "none";
   const isControlled = value !== void 0;
@@ -169,7 +217,8 @@ function SearchExpand({
               onBlur: handleBlur,
               placeholder,
               placeholderTextColor: theme.color.text3,
-              returnKeyType: "search"
+              returnKeyType: "search",
+              accessibilityLabel: placeholder
             }
           ),
           /* @__PURE__ */ jsx(
@@ -180,14 +229,19 @@ function SearchExpand({
                 overflow: "hidden",
                 pointerEvents: focused ? "auto" : "none"
               },
+              accessibilityElementsHidden: !focused,
+              importantForAccessibility: focused ? "auto" : "no-hide-descendants",
+              ...focused ? null : { "aria-hidden": true },
               children: /* @__PURE__ */ jsx(Animated.View, { style: { opacity: cancelOpacity }, children: /* @__PURE__ */ jsx(
                 Pressable,
                 {
                   accessibilityRole: "button",
-                  accessibilityLabel: "Cancel",
+                  accessibilityLabel: labels.cancel,
+                  focusable: focused,
+                  tabIndex: focused ? 0 : -1,
                   onPress: handleCancel,
                   style: sx.cancelBtn,
-                  children: /* @__PURE__ */ jsx(Text, { style: sx.cancelText, children: "Cancel" })
+                  children: /* @__PURE__ */ jsx(Text, { style: sx.cancelText, children: labels.cancel })
                 }
               ) })
             }
@@ -206,11 +260,17 @@ function SearchExpand({
             pointerEvents: focused ? "auto" : "none"
           }
         ],
+        accessibilityElementsHidden: !focused,
+        importantForAccessibility: focused ? "auto" : "no-hide-descendants",
+        ...focused ? null : { "aria-hidden": true },
         children: /* @__PURE__ */ jsx(View, { style: sx.chipsRow, children: recents.map((label) => /* @__PURE__ */ jsxs(
           Pressable,
           {
             accessibilityRole: "button",
             accessibilityLabel: label,
+            focusable: focused,
+            tabIndex: focused ? 0 : -1,
+            hitSlop: { top: theme.space[6], bottom: theme.space[6] },
             onPress: () => handleChipPress(label),
             style: sx.chip,
             children: [
@@ -241,7 +301,7 @@ var sheet = createStyleSheet((theme) => ({
     borderWidth: theme.borderWidth.thick,
     borderColor: "transparent"
   },
-  // Same focused treatment as `SearchExpand`: the two sit in the same product.
+  // Same focused treatment as `ExpandingSearchField`: the two sit in the same product.
   // The edge is the *measured* ring colour, not the raw
   // accent. `NO_UA_FOCUS_RING` removes the browser's own outline, so this edge
   // is the **only** focus affordance the field has — which makes it a focus
@@ -261,6 +321,7 @@ var sheet = createStyleSheet((theme) => ({
     backgroundColor: "transparent"
   },
   results: { alignSelf: "stretch" },
+  liveCount: { position: "absolute", width: 1, height: 1, opacity: 0, overflow: "hidden" },
   resultsContent: { gap: theme.space.s1 },
   recentHeader: {
     fontFamily: theme.font.mono,
@@ -391,4 +452,4 @@ var expandSheet = createStyleSheet((theme) => ({
   }
 }));
 
-export { SearchBar, SearchExpand };
+export { ExpandingSearchField, SearchField };