@btndprojects/loam-ui-native 0.2.1 → 0.3.1

package/dist/{chunk-JUYWSSKW.js → chunk-MPEPTSER.js}

@@ -1,10 +1,12 @@
-import { Chip } from './chunk-2SY63FCH.js';
-import { NO_UA_FOCUS_RING } from './chunk-3NMD74ZU.js';
+import { Chip } from './chunk-7NGMUVNU.js';
+import { fieldSurfaceFill } from './chunk-43K3BLXV.js';
 import { useLabels } from './chunk-APCWFOZW.js';
+import { NO_UA_FOCUS_RING } from './chunk-2YKVID2V.js';
+import { Icon } from './chunk-PCEFCOLN.js';
 import { useResolvedMotion, springConfig } from './chunk-J64KGCGX.js';
 import * as React from 'react';
-import { View, Text, Pressable, TextInput, Animated, LayoutAnimation, AccessibilityInfo } from 'react-native';
-import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
+import { View, Text, Pressable, TextInput, ActivityIndicator, Animated, LayoutAnimation, AccessibilityInfo } from 'react-native';
+import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
 import { MOTION_MOVE } from '@btndprojects/loam-tokens';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -14,7 +16,10 @@ var DEFAULT_LABELS = {
   removed: (tag) => `${tag} removed`,
   duplicate: (tag) => `${tag} is already added`,
   maxReached: (max) => `No more than ${max} tags`,
-  invalid: (tag) => `${tag} is not valid`
+  invalid: (tag) => `${tag} is not valid`,
+  clear: "Clear",
+  valid: "Valid",
+  loading: "Loading"
 };
 var CHIP_SIZE = { xs: "xs", sm: "xs", md: "sm", lg: "md" };
 function TagSlot({
@@ -59,7 +64,8 @@ function TagsInput({
   value: valueProp,
   defaultValue,
   onValueChange,
-  size = "md",
+  size = "lg",
+  surface = "filled",
   delimiters = [","],
   addOnBlur = false,
   validate,
@@ -75,6 +81,11 @@ function TagsInput({
   invalid = false,
   readOnly = false,
   disabled = false,
+  clearable = false,
+  success = false,
+  leadingIcon,
+  trailingIcon,
+  loading = false,
   containerStyle,
   onBlur,
   onFocus,
@@ -97,8 +108,8 @@ function TagsInput({
     });
   };
   const labels = useLabels("tagsInput", DEFAULT_LABELS, labelsProp);
-  const { styles } = useStyles(sheet, { size });
   const theme = useLoamTheme("tags-input");
+  const { styles } = useStyles(sheet, { size, os: theme.platform === "iOS" ? "ios" : "android" });
   const [inner, setInner] = React.useState(defaultValue ?? []);
   const controlled = valueProp !== void 0;
   const tags = controlled ? valueProp : inner;
@@ -187,21 +198,48 @@ function TagsInput({
     if (highlight === tags.length - 1) removeAt(highlight);
     else setHighlight(tags.length - 1);
   };
-  const tone = disabled ? { border: theme.color.border, fill: theme.color.surface3 } : invalid || error || rejection ? { border: theme.color.danger, fill: theme.color.dangerSoft } : focused ? { border: theme.focus.ringColor, fill: theme.color.surface } : { border: theme.color.borderStrong, fill: theme.color.surface2 };
+  const restFill = fieldSurfaceFill(theme, surface);
+  const tone = disabled ? { border: theme.color.borderStrong, fill: restFill } : invalid || error || rejection ? { border: theme.color.danger, fill: focused ? theme.color.surface : restFill } : focused ? { border: theme.focus.ringColor, fill: theme.color.surface } : { border: theme.color.borderStrong, fill: restFill };
   const message = error ?? rejection ?? void 0;
   const hasError = invalid || Boolean(message);
   const shown = message ?? description;
+  const valid = success && !hasError && !disabled && !loading;
+  const showClear = clearable && !inert && (tags.length > 0 || text.length > 0);
+  const clearAll = () => {
+    if (tags.length > 0) {
+      flowNext();
+      emit([]);
+      announce(labels.clear);
+    }
+    setText("");
+    setRejection(null);
+    setHighlight(null);
+    inputRef.current?.focus();
+  };
   return /* @__PURE__ */ jsxs(View, { style: [styles.field, containerStyle], children: [
-    label ? /* @__PURE__ */ jsx(Text, { nativeID: labelId, style: [styles.label, hasError && { color: theme.color.danger }], children: label }) : null,
+    label ? /* @__PURE__ */ jsx(
+      Text,
+      {
+        nativeID: labelId,
+        style: [styles.label, hasError && { color: theme.color.dangerOnSoft }],
+        children: label
+      }
+    ) : null,
     /* @__PURE__ */ jsxs(
       Pressable,
       {
         testID: "tags-input-container",
+        "aria-busy": loading || void 0,
         accessible: false,
         disabled: inert,
         onPress: () => inputRef.current?.focus(),
-        style: [styles.container, { borderColor: tone.border, backgroundColor: tone.fill }],
+        style: [
+          styles.container,
+          { borderColor: tone.border, backgroundColor: tone.fill },
+          disabled && { opacity: theme.state.disabledOpacity }
+        ],
         children: [
+          leadingIcon ? /* @__PURE__ */ jsx(View, { testID: "tags-input-leading-icon", children: /* @__PURE__ */ jsx(Icon, { name: leadingIcon, size: theme.ctl.icon[size], color: theme.color.text2 }) }) : null,
           tags.map((tag, index) => /* @__PURE__ */ jsx(
             TagSlot,
             {
@@ -249,7 +287,37 @@ function TagsInput({
               },
               style: [styles.input, NO_UA_FOCUS_RING]
             }
-          )
+          ),
+          showClear ? /* @__PURE__ */ jsx(
+            Pressable,
+            {
+              testID: "tags-input-clear",
+              accessibilityRole: "button",
+              accessibilityLabel: labels.clear,
+              onPress: clearAll,
+              hitSlop: Math.max(0, (theme.tapMin - theme.ctl.icon[size]) / 2),
+              children: /* @__PURE__ */ jsx(Icon, { name: "x", size: theme.ctl.icon[size], color: theme.color.text2 })
+            }
+          ) : null,
+          loading && !disabled ? /* @__PURE__ */ jsx(
+            ActivityIndicator,
+            {
+              testID: "tags-input-loading",
+              size: "small",
+              color: theme.color.text2,
+              accessibilityLabel: labels.loading
+            }
+          ) : null,
+          trailingIcon ? /* @__PURE__ */ jsx(View, { testID: "tags-input-trailing-icon", children: /* @__PURE__ */ jsx(Icon, { name: trailingIcon, size: theme.ctl.icon[size], color: theme.color.text2 }) }) : null,
+          valid ? /* @__PURE__ */ jsx(
+            View,
+            {
+              testID: "tags-input-status-icon",
+              accessibilityRole: "image",
+              accessibilityLabel: labels.valid,
+              children: /* @__PURE__ */ jsx(Icon, { name: "check-circle", size: theme.ctl.icon[size], color: theme.color.good })
+            }
+          ) : null
         ]
       }
     ),
@@ -257,19 +325,30 @@ function TagsInput({
       Text,
       {
         accessibilityLiveRegion: "polite",
-        style: [styles.message, { color: hasError ? theme.color.danger : theme.color.text3 }],
+        style: [
+          styles.message,
+          {
+            color: hasError ? theme.color.dangerOnSoft : valid ? theme.color.goodOnSoft : theme.color.text3
+          }
+        ],
         children: shown
       }
     ) : null
   ] });
 }
 var sheet = createStyleSheet((theme) => ({
-  field: { gap: theme.space.s2 },
+  // R11: the label sits in `text`, 6 above the shell — 13 / 600 on iOS, 14 / 500 on Android.
+  // maxWidth keeps a wrapping field inside a shrink-to-fit parent instead of growing to its max-content width.
+  field: { gap: theme.space[6], maxWidth: "100%" },
   label: {
     fontFamily: theme.font.sans,
-    fontWeight: theme.fontWeight.semibold,
-    fontSize: theme.fontSize[14],
-    color: theme.color.text2
+    color: theme.color.text,
+    variants: {
+      os: {
+        ios: { fontSize: theme.fontSize[13], fontWeight: theme.fontWeight.semibold },
+        android: { fontSize: theme.fontSize[14], fontWeight: theme.fontWeight.medium }
+      }
+    }
   },
   container: {
     flexDirection: "row",

package/dist/chunk-MWPJ4YGP.js

@@ -0,0 +1 @@
+

package/dist/{chunk-LUMVGO2K.js → chunk-N7AX4OA4.js}

@@ -1,7 +1,8 @@
-import { NumberRoll } from './chunk-T5LTPKX6.js';
+import { NumberRoll } from './chunk-IMMALLRU.js';
+import { Skeleton } from './chunk-YJ5PXOX3.js';
 import { NAMED_ROLE } from './chunk-W23G6JLF.js';
 import { useLabels, useLoamLocale } from './chunk-APCWFOZW.js';
-import { Icon } from './chunk-UXGIW7OK.js';
+import { Icon } from './chunk-PCEFCOLN.js';
 import 'react';
 import { View, Text } from 'react-native';
 import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
@@ -13,6 +14,15 @@ var DEFAULT_LABELS = {
   flat: "No change",
   delta: (direction, text) => `${direction} ${text}`
 };
+var TONE_INK = {
+  muted: (t) => t.color.text2,
+  subtle: (t) => t.color.text3,
+  accent: (t) => t.color.accentStrong,
+  good: (t) => t.color.good,
+  warn: (t) => t.color.warn,
+  danger: (t) => t.color.danger
+};
+var SIZE_TYPE = { sm: "title3", md: "title1", lg: "largeTitle" };
 var DIRECTION_GLYPH = {
   up: "arrow-up",
   down: "arrow-down",
@@ -33,6 +43,37 @@ function formatDelta(delta, locale) {
   const sign = delta > 0 ? "+" : delta < 0 ? "\u2212" : "";
   return `${sign}${Math.abs(delta).toLocaleString(locale)}`;
 }
+function MetricDelta({
+  delta,
+  deltaDirection,
+  invert = false,
+  size = "md",
+  labels: labelsProp
+}) {
+  const labels = useLabels("metric", DEFAULT_LABELS, labelsProp);
+  const locale = useLoamLocale();
+  const direction = resolveDirection(delta, deltaDirection);
+  const tone = toneFor(direction, invert);
+  const deltaText = formatDelta(delta, locale);
+  const directionWord = labels[direction];
+  const { styles } = useStyles(sheet, { size, tone });
+  const theme = useLoamTheme("metric");
+  const glyphColor = tone === "good" ? theme.status.doneOnSoft : tone === "bad" ? theme.status.crashedOnSoft : theme.status.pendingOnSoft;
+  const iconSize = size === "sm" ? theme.icon.xs : size === "lg" ? theme.icon.md : theme.icon.sm;
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      accessible: true,
+      accessibilityRole: NAMED_ROLE,
+      style: styles.delta,
+      accessibilityLabel: deltaText ? labels.delta(directionWord, deltaText) : directionWord,
+      children: [
+        /* @__PURE__ */ jsx(Icon, { name: DIRECTION_GLYPH[direction], size: iconSize, color: glyphColor }),
+        deltaText ? /* @__PURE__ */ jsx(Text, { style: styles.deltaText, children: deltaText }) : null
+      ]
+    }
+  );
+}
 function Metric({
   label,
   value,
@@ -44,44 +85,52 @@ function Metric({
   caption,
   motion = "full",
   animateValue = false,
+  format,
+  tone,
+  align = "start",
+  loading = false,
   accessibilityLabel,
   labels: labelsProp
 }) {
   const hasDelta = delta !== void 0 && delta !== "";
-  const direction = resolveDirection(delta, deltaDirection);
-  const tone = toneFor(direction, invert);
-  const labels = useLabels("metric", DEFAULT_LABELS, labelsProp);
-  const locale = useLoamLocale();
-  const deltaText = hasDelta ? formatDelta(delta, locale) : "";
-  const directionWord = labels[direction];
   const numeric = typeof value === "number";
   const willAnimateValue = animateValue && numeric && motion !== "none" && motion !== "reduced";
-  const { styles } = useStyles(sheet, { size, tone });
+  const { styles } = useStyles(sheet, { size });
   const theme = useLoamTheme("metric");
-  const glyphColor = tone === "good" ? theme.status.doneOnSoft : tone === "bad" ? theme.status.crashedOnSoft : theme.status.pendingOnSoft;
-  const iconSize = size === "sm" ? theme.icon.xs : size === "lg" ? theme.icon.md : theme.icon.sm;
+  const locale = useLoamLocale();
+  const toneInk = tone && tone !== "default" ? TONE_INK[tone](theme) : void 0;
+  const valueStyle = toneInk ? [styles.value, { color: toneInk }] : styles.value;
+  const shown = format && numeric ? value.toLocaleString(locale, format) : value;
+  const boneHeight = theme.type[SIZE_TYPE[size]].lineHeight;
   return /* @__PURE__ */ jsxs(
     View,
     {
-      style: styles.root,
+      style: [styles.root, align === "end" ? styles.rootEnd : null],
+      "aria-busy": loading || void 0,
+      accessibilityState: loading ? { busy: true } : void 0,
       ...accessibilityLabel ? { role: "group", accessibilityLabel } : null,
       children: [
         /* @__PURE__ */ jsx(Text, { style: styles.label, children: label }),
         /* @__PURE__ */ jsxs(View, { style: styles.valueRow, children: [
-          willAnimateValue ? /* @__PURE__ */ jsx(NumberRoll, { value, textStyle: styles.value, motion }) : /* @__PURE__ */ jsx(Text, { style: styles.value, children: value }),
-          unit !== void 0 ? /* @__PURE__ */ jsx(Text, { style: styles.unit, children: unit }) : null
+          loading ? /* @__PURE__ */ jsx(Skeleton, { variant: "rect", width: theme.space[96], height: boneHeight, decorative: true }) : willAnimateValue ? /* @__PURE__ */ jsx(
+            NumberRoll,
+            {
+              value,
+              format,
+              textStyle: valueStyle,
+              motion
+            }
+          ) : /* @__PURE__ */ jsx(Text, { style: valueStyle, children: shown }),
+          unit !== void 0 && !loading ? /* @__PURE__ */ jsx(Text, { style: styles.unit, children: unit }) : null
         ] }),
-        hasDelta ? /* @__PURE__ */ jsxs(
-          View,
+        hasDelta && !loading ? /* @__PURE__ */ jsx(
+          MetricDelta,
           {
-            accessible: true,
-            accessibilityRole: NAMED_ROLE,
-            style: styles.delta,
-            accessibilityLabel: deltaText ? labels.delta(directionWord, deltaText) : directionWord,
-            children: [
-              /* @__PURE__ */ jsx(Icon, { name: DIRECTION_GLYPH[direction], size: iconSize, color: glyphColor }),
-              deltaText ? /* @__PURE__ */ jsx(Text, { style: styles.deltaText, children: deltaText }) : null
-            ]
+            delta,
+            deltaDirection,
+            invert,
+            size,
+            labels: labelsProp
           }
         ) : null,
         caption !== void 0 ? /* @__PURE__ */ jsx(Text, { style: styles.caption, children: caption }) : null
@@ -91,6 +140,7 @@ function Metric({
 }
 var sheet = createStyleSheet((theme) => ({
   root: { alignItems: "flex-start", gap: theme.space.s1 },
+  rootEnd: { alignItems: "flex-end" },
   // Muted secondary ink; clears AA on surface in both modes.
   label: {
     fontFamily: theme.font.sans,
@@ -173,8 +223,9 @@ var sheet = createStyleSheet((theme) => ({
     flexDirection: "row",
     alignItems: "center",
     gap: theme.space.s1,
+    // Spec: a fixed 20-high chip, px 8, 12 / 600.
+    height: theme.space[20],
     paddingHorizontal: theme.space.s2,
-    paddingVertical: theme.space.s1,
     borderRadius: theme.radius.full,
     borderWidth: theme.borderWidth.base,
     variants: {
@@ -189,9 +240,9 @@ var sheet = createStyleSheet((theme) => ({
     fontFamily: theme.font.sans,
     fontWeight: theme.fontWeight.semibold,
     fontVariant: ["tabular-nums"],
-    fontSize: theme.type.footnote.fontSize,
-    lineHeight: theme.type.footnote.lineHeight,
-    letterSpacing: theme.type.footnote.letterSpacing,
+    fontSize: theme.type.caption1.fontSize,
+    lineHeight: theme.type.caption1.lineHeight,
+    letterSpacing: theme.type.caption1.letterSpacing,
     variants: {
       tone: {
         good: { color: theme.status.doneOnSoft },
@@ -209,4 +260,4 @@ var sheet = createStyleSheet((theme) => ({
   }
 }));
 
-export { Metric };
+export { Metric, MetricDelta };