@btndprojects/loam-ui-native 0.1.1 → 0.3.1

package/dist/chunk-MPEPTSER.js

@@ -0,0 +1,414 @@
+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, 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';
+
+var DEFAULT_LABELS = {
+  remove: (tag) => `Remove ${tag}`,
+  added: (tag) => `${tag} added`,
+  removed: (tag) => `${tag} removed`,
+  duplicate: (tag) => `${tag} is already added`,
+  maxReached: (max) => `No more than ${max} tags`,
+  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({
+  animate,
+  style,
+  children
+}) {
+  const theme = useLoamTheme("tags-input");
+  const t = React.useRef(new Animated.Value(animate ? 0 : 1)).current;
+  React.useEffect(() => {
+    if (!animate) return;
+    const run = Animated.spring(t, {
+      ...springConfig(theme, "fs"),
+      toValue: 1,
+      useNativeDriver: true
+    });
+    run.start();
+    return () => run.stop();
+  }, []);
+  return /* @__PURE__ */ jsx(
+    Animated.View,
+    {
+      testID: "tag",
+      style: [
+        style,
+        {
+          opacity: t,
+          transform: [{ scale: t.interpolate({ inputRange: [0, 1], outputRange: [SCALE_IN, 1] }) }]
+        }
+      ],
+      children
+    }
+  );
+}
+var SCALE_IN = 1 - MOTION_MOVE.scaleIn;
+function splitText(text, chars) {
+  let parts = text.split(/\r?\n/);
+  for (const c of chars) parts = parts.flatMap((p) => p.split(c));
+  return parts;
+}
+function TagsInput({
+  value: valueProp,
+  defaultValue,
+  onValueChange,
+  size = "lg",
+  surface = "filled",
+  delimiters = [","],
+  addOnBlur = false,
+  validate,
+  max,
+  allowDuplicates = false,
+  transform,
+  normalize,
+  labels: labelsProp,
+  renderTag,
+  label,
+  description,
+  error,
+  invalid = false,
+  readOnly = false,
+  disabled = false,
+  clearable = false,
+  success = false,
+  leadingIcon,
+  trailingIcon,
+  loading = false,
+  containerStyle,
+  onBlur,
+  onFocus,
+  onKeyPress,
+  motion = "full",
+  ...rest
+}) {
+  const level = useResolvedMotion(motion, "tags-input");
+  const mounted = React.useRef(false);
+  React.useEffect(() => {
+    mounted.current = true;
+  }, []);
+  const flowNext = () => {
+    if (level !== "full") return;
+    const fs = theme.spring.fs;
+    LayoutAnimation.configureNext({
+      duration: fs.duration,
+      update: { type: "spring", springDamping: fs.dampingRatio },
+      delete: { type: "easeInEaseOut", property: "opacity" }
+    });
+  };
+  const labels = useLabels("tagsInput", DEFAULT_LABELS, labelsProp);
+  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;
+  const [text, setText] = React.useState("");
+  const [rejection, setRejection] = React.useState(null);
+  const [highlight, setHighlight] = React.useState(null);
+  const [focused, setFocused] = React.useState(false);
+  const inputRef = React.useRef(null);
+  const inert = disabled || readOnly;
+  const labelId = React.useId();
+  const emit = (next) => {
+    if (!controlled) setInner(next);
+    onValueChange?.(next);
+  };
+  const announce = (message2) => {
+    AccessibilityInfo.announceForAccessibility?.(message2);
+  };
+  const keyOf = normalize ?? ((t) => t);
+  const commit = (candidates) => {
+    let next = tags;
+    let problem = null;
+    const added = [];
+    for (const raw of candidates) {
+      let tag = raw.trim();
+      if (transform) tag = transform(tag).trim();
+      if (!tag) continue;
+      if (max !== void 0 && next.length >= max) {
+        problem ??= labels.maxReached(max);
+        break;
+      }
+      if (!allowDuplicates && next.some((t) => keyOf(t) === keyOf(tag))) {
+        problem ??= labels.duplicate(tag);
+        continue;
+      }
+      if (validate) {
+        const verdict = validate(tag, next);
+        if (verdict !== true) {
+          problem ??= typeof verdict === "string" && verdict ? verdict : labels.invalid(tag);
+          continue;
+        }
+      }
+      next = [...next, tag];
+      added.push(tag);
+    }
+    setRejection(problem);
+    if (added.length > 0) {
+      flowNext();
+      emit(next);
+      announce(added.map((t) => labels.added(t)).join(". "));
+    }
+    return problem;
+  };
+  const removeAt = (index) => {
+    if (inert) return;
+    const tag = tags[index];
+    if (tag === void 0) return;
+    flowNext();
+    emit(tags.filter((_, i) => i !== index));
+    setRejection(null);
+    setHighlight(null);
+    announce(labels.removed(tag));
+    inputRef.current?.focus();
+  };
+  const commitText = () => {
+    if (text.trim() === "") {
+      setText("");
+      return;
+    }
+    if (commit([text]) === null) setText("");
+  };
+  const handleChangeText = (next) => {
+    setRejection(null);
+    setHighlight(null);
+    if (delimiters.some((d) => next.includes(d))) {
+      const parts = splitText(next, delimiters);
+      const tail = parts.pop() ?? "";
+      commit(parts);
+      setText(tail);
+      return;
+    }
+    setText(next);
+  };
+  const handleKeyPress = (e) => {
+    onKeyPress?.(e);
+    if (inert || e.nativeEvent.key !== "Backspace" || text !== "" || tags.length === 0) return;
+    if (highlight === tags.length - 1) removeAt(highlight);
+    else setHighlight(tags.length - 1);
+  };
+  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.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 },
+          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,
+            {
+              animate: mounted.current && level === "full",
+              style: [styles.tag, highlight === index && { borderColor: theme.focus.ringColor }],
+              children: renderTag ? renderTag(tag, { remove: () => removeAt(index), disabled: inert }) : /* @__PURE__ */ jsx(
+                Chip,
+                {
+                  variant: "input",
+                  size: CHIP_SIZE[size],
+                  removable: !inert,
+                  disabled,
+                  removeLabel: labels.remove(tag),
+                  onRemove: () => removeAt(index),
+                  children: tag
+                }
+              )
+            },
+            `${tag}#${tags.slice(0, index).filter((t) => t === tag).length}`
+          )),
+          /* @__PURE__ */ jsx(
+            TextInput,
+            {
+              ...rest,
+              ref: inputRef,
+              value: text,
+              editable: !inert,
+              placeholder: tags.length === 0 ? rest.placeholder : void 0,
+              placeholderTextColor: theme.color.text3,
+              "aria-labelledby": label ? labelId : rest["aria-labelledby"],
+              "aria-invalid": hasError || void 0,
+              blurOnSubmit: false,
+              onChangeText: handleChangeText,
+              onSubmitEditing: commitText,
+              onKeyPress: handleKeyPress,
+              onFocus: (e) => {
+                setFocused(true);
+                onFocus?.(e);
+              },
+              onBlur: (e) => {
+                setFocused(false);
+                setHighlight(null);
+                onBlur?.(e);
+                if (addOnBlur && !inert) commitText();
+              },
+              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
+        ]
+      }
+    ),
+    shown ? /* @__PURE__ */ jsx(
+      Text,
+      {
+        accessibilityLiveRegion: "polite",
+        style: [
+          styles.message,
+          {
+            color: hasError ? theme.color.dangerOnSoft : valid ? theme.color.goodOnSoft : theme.color.text3
+          }
+        ],
+        children: shown
+      }
+    ) : null
+  ] });
+}
+var sheet = createStyleSheet((theme) => ({
+  // 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,
+    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",
+    flexWrap: "wrap",
+    alignItems: "center",
+    borderWidth: theme.borderWidth.thick,
+    variants: {
+      size: {
+        xs: {
+          minHeight: theme.ctl.xs,
+          paddingHorizontal: theme.ctl.px.xs,
+          gap: theme.ctl.gap.xs,
+          borderRadius: theme.ctl.r.xs
+        },
+        sm: {
+          minHeight: theme.ctl.sm,
+          paddingHorizontal: theme.ctl.px.sm,
+          gap: theme.ctl.gap.sm,
+          borderRadius: theme.ctl.r.sm
+        },
+        md: {
+          minHeight: theme.ctl.md,
+          paddingHorizontal: theme.ctl.px.md,
+          gap: theme.ctl.gap.md,
+          borderRadius: theme.ctl.r.md
+        },
+        lg: {
+          minHeight: theme.ctl.lg,
+          paddingHorizontal: theme.ctl.px.lg,
+          gap: theme.ctl.gap.lg,
+          borderRadius: theme.ctl.r.lg
+        }
+      }
+    }
+  },
+  // A transparent edge that the highlight fills in, so the row never shifts.
+  tag: {
+    borderWidth: theme.borderWidth.thick,
+    borderColor: "transparent",
+    borderRadius: theme.radius.full
+  },
+  input: {
+    flexGrow: 1,
+    minWidth: theme.tapMin * 2,
+    padding: 0,
+    color: theme.color.text,
+    fontFamily: theme.font.sans,
+    variants: {
+      size: {
+        xs: { fontSize: theme.fontSize[14] },
+        sm: { fontSize: theme.fontSize[14] },
+        md: { fontSize: theme.fontSize[16] },
+        lg: { fontSize: theme.fontSize[16] }
+      }
+    }
+  },
+  message: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[12]
+  }
+}));
+
+export { TagsInput };

package/dist/chunk-MWPJ4YGP.js

@@ -0,0 +1 @@
+

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

@@ -1,20 +1,33 @@
-import { NumberRoll } from './chunk-CUMUNPXY.js';
-import { Icon } from './chunk-TKVFVF5D.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-PCEFCOLN.js';
 import 'react';
 import { View, Text } from 'react-native';
 import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
+var DEFAULT_LABELS = {
+  up: "Up",
+  down: "Down",
+  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",
   flat: "minus"
 };
-var DIRECTION_WORD = {
-  up: "Up",
-  down: "Down",
-  flat: "No change"
-};
 function resolveDirection(delta, deltaDirection) {
   if (deltaDirection) return deltaDirection;
   if (typeof delta === "number") return delta > 0 ? "up" : delta < 0 ? "down" : "flat";
@@ -25,10 +38,41 @@ function toneFor(direction, invert) {
   const isGood = direction === "up" ? !invert : invert;
   return isGood ? "good" : "bad";
 }
-function formatDelta(delta) {
+function formatDelta(delta, locale) {
   if (typeof delta === "string") return delta;
   const sign = delta > 0 ? "+" : delta < 0 ? "\u2212" : "";
-  return `${sign}${Math.abs(delta).toLocaleString()}`;
+  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,
@@ -41,40 +85,62 @@ function Metric({
   caption,
   motion = "full",
   animateValue = false,
-  accessibilityLabel
+  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 deltaText = hasDelta ? formatDelta(delta) : "";
   const numeric = typeof value === "number";
   const willAnimateValue = animateValue && numeric && motion !== "none" && motion !== "reduced";
-  const { styles } = useStyles(sheet, { size, tone });
-  const theme = useLoamTheme();
-  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, { style: styles.root, accessibilityLabel, 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
-    ] }),
-    hasDelta ? /* @__PURE__ */ jsxs(
-      View,
-      {
-        style: styles.delta,
-        accessibilityLabel: deltaText ? `${DIRECTION_WORD[direction]} ${deltaText}` : DIRECTION_WORD[direction],
-        children: [
-          /* @__PURE__ */ jsx(Icon, { name: DIRECTION_GLYPH[direction], size: iconSize, color: glyphColor }),
-          deltaText ? /* @__PURE__ */ jsx(Text, { style: styles.deltaText, children: deltaText }) : null
-        ]
-      }
-    ) : null,
-    caption !== void 0 ? /* @__PURE__ */ jsx(Text, { style: styles.caption, children: caption }) : null
-  ] });
+  const { styles } = useStyles(sheet, { size });
+  const theme = useLoamTheme("metric");
+  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, 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: [
+          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 && !loading ? /* @__PURE__ */ jsx(
+          MetricDelta,
+          {
+            delta,
+            deltaDirection,
+            invert,
+            size,
+            labels: labelsProp
+          }
+        ) : null,
+        caption !== void 0 ? /* @__PURE__ */ jsx(Text, { style: styles.caption, children: caption }) : null
+      ]
+    }
+  );
 }
 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,
@@ -157,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: {
@@ -173,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 },
@@ -193,4 +260,4 @@ var sheet = createStyleSheet((theme) => ({
   }
 }));
 
-export { Metric };
+export { Metric, MetricDelta };