@btndprojects/loam-ui-native 0.2.1 → 0.3.1

package/dist/chunk-RIK6UX2K.js

@@ -0,0 +1,344 @@
+import { useInputPlatform, useColorTransition, useFieldValidation } from './chunk-KXLDK6HB.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 } from './chunk-J64KGCGX.js';
+import * as React2 from 'react';
+import { Easing, Animated, TextInput, ActivityIndicator, View, Text } from 'react-native';
+import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+function graphemeCount(text) {
+  const Seg = Intl.Segmenter;
+  if (Seg) {
+    let n = 0;
+    for (const _ of new Seg(void 0, { granularity: "grapheme" }).segment(text)) n++;
+    return n;
+  }
+  return Array.from(text).length;
+}
+var COUNT_ANNOUNCE_AT = [20, 10, 5, 0];
+var DEFAULT_COUNT_LABELS = {
+  left: (remaining) => `${remaining} character${remaining === 1 ? "" : "s"} left`,
+  tooMany: (over) => `${over} character${over === 1 ? "" : "s"} too many`
+};
+function useCharacterCount(value, limit, always = false, labelsProp) {
+  const labels = useLabels("characterCount", DEFAULT_COUNT_LABELS, labelsProp);
+  const count = graphemeCount(value);
+  const remaining = limit === void 0 ? Infinity : limit - count;
+  const over = remaining < 0;
+  const visible = limit !== void 0 && (always || count >= limit * 0.8 || remaining <= 20);
+  const text = limit === void 0 ? "" : over ? labels.tooMany(-remaining) : labels.left(remaining);
+  const lastRef = React2.useRef("");
+  const lastOverRef = React2.useRef(false);
+  if (limit !== void 0) {
+    const hit = COUNT_ANNOUNCE_AT.includes(remaining);
+    if (hit || over && !lastOverRef.current) {
+      lastRef.current = text;
+      lastOverRef.current = over;
+    } else if (!visible) {
+      lastRef.current = "";
+      lastOverRef.current = false;
+    }
+  }
+  return { count, remaining, visible, over, text, announcement: lastRef.current };
+}
+var ROW_HEIGHT = 22;
+var MIN_HEIGHT = 46;
+var DEFAULT_LABELS = {
+  validating: "Validating",
+  valid: "Valid",
+  invalid: "Invalid"
+};
+function Textarea({
+  error = false,
+  success = false,
+  loading = false,
+  rows = 3,
+  autoGrow = false,
+  minRows = 3,
+  maxRows = 10,
+  surface = "filled",
+  size = "lg",
+  disabled: disabledProp = false,
+  motion = "full",
+  editable: editableProp = true,
+  onFocus,
+  onBlur,
+  onContentSizeChange,
+  style,
+  containerStyle,
+  labels: labelsProp,
+  platform,
+  ...rest
+}) {
+  const labels = useLabels("textarea", DEFAULT_LABELS, labelsProp);
+  const [focused, setFocused] = React2.useState(false);
+  const disabled = disabledProp || editableProp === false;
+  const editable = !disabled;
+  const animateColour = useResolvedMotion(motion, "textarea") === "full";
+  const os = useInputPlatform(platform);
+  const { styles } = useStyles(sheet, { disabled, os });
+  const theme = useLoamTheme("textarea");
+  const tier = size === "lg" ? null : {
+    padH: theme.ctl.px[size],
+    padV: size === "md" ? theme.space[10] : size === "sm" ? theme.space.s2 : theme.space[6],
+    radius: theme.ctl.r[size],
+    fontSize: size === "md" ? theme.fontSize[16] : theme.fontSize[14]
+  };
+  const padV = 2 * (tier ? tier.padV : theme.space[10]);
+  const floor = tier ? theme.ctl[size] : MIN_HEIGHT;
+  const minHeight = Math.max(floor, (autoGrow ? minRows : rows) * ROW_HEIGHT + padV);
+  const maxHeight = maxRows * ROW_HEIGHT + padV;
+  const [grownHeight, setGrownHeight] = React2.useState(null);
+  const handleContentSizeChange = (e) => {
+    if (autoGrow) {
+      const next = Math.min(
+        Math.max(e.nativeEvent.contentSize.height + padV, minHeight),
+        maxHeight
+      );
+      setGrownHeight(next);
+    }
+    onContentSizeChange?.(e);
+  };
+  const isLoading = loading && !disabled;
+  const invalid = !isLoading && !disabled && error;
+  const valid = !isLoading && !disabled && !error && success;
+  const restFill = fieldSurfaceFill(theme, surface);
+  const tone = disabled ? { border: theme.color.borderStrong, fill: restFill } : isLoading ? { border: theme.focus.ringColor, fill: theme.color.surface } : invalid ? { 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 easing = React2.useMemo(() => Easing.bezier(...theme.easing.base), [theme.easing.base]);
+  const borderColor = useColorTransition(tone.border, theme.duration.base, easing, animateColour);
+  const backgroundColor = useColorTransition(tone.fill, theme.duration.base, easing, animateColour);
+  const handleFocus = (e) => {
+    setFocused(true);
+    onFocus?.(e);
+  };
+  const handleBlur = (e) => {
+    setFocused(false);
+    onBlur?.(e);
+  };
+  return /* @__PURE__ */ jsxs(
+    Animated.View,
+    {
+      testID: "textarea-container",
+      style: [
+        styles.container,
+        tier && {
+          paddingHorizontal: tier.padH,
+          paddingVertical: tier.padV,
+          borderRadius: tier.radius
+        },
+        containerStyle,
+        { minHeight, borderColor, backgroundColor },
+        // `autoGrow`: cap the container and drive its height from the content.
+        // Until the first measurement lands it rests at the `minRows` floor.
+        autoGrow && { maxHeight, height: grownHeight ?? minHeight }
+      ],
+      accessibilityState: { disabled },
+      children: [
+        /* @__PURE__ */ jsx(
+          TextInput,
+          {
+            ...rest,
+            multiline: true,
+            textAlignVertical: "top",
+            editable,
+            "aria-disabled": disabled || void 0,
+            placeholderTextColor: theme.color.text3,
+            "aria-invalid": invalid || void 0,
+            "aria-busy": isLoading || void 0,
+            onFocus: handleFocus,
+            onBlur: handleBlur,
+            onContentSizeChange: handleContentSizeChange,
+            style: [styles.input, tier && { fontSize: tier.fontSize }, NO_UA_FOCUS_RING, style]
+          }
+        ),
+        isLoading ? /* @__PURE__ */ jsx(
+          ActivityIndicator,
+          {
+            testID: "textarea-spinner",
+            size: "small",
+            color: theme.color.accent,
+            accessibilityLabel: labels.validating
+          }
+        ) : valid || invalid ? /* @__PURE__ */ jsx(
+          View,
+          {
+            testID: "textarea-status-icon",
+            accessibilityRole: "image",
+            accessibilityLabel: valid ? labels.valid : labels.invalid,
+            children: /* @__PURE__ */ jsx(
+              Icon,
+              {
+                name: valid ? "check-circle" : "alert-triangle",
+                size: theme.icon.sm,
+                color: valid ? theme.color.good : theme.color.danger
+              }
+            )
+          }
+        ) : null
+      ]
+    }
+  );
+}
+var DEFAULT_FIELD_LABELS = { ...DEFAULT_LABELS, errorPrefix: "Error: " };
+function TextareaField({
+  label,
+  hint,
+  error: errorProp,
+  success: successProp,
+  validate,
+  containerStyle,
+  onBlur,
+  onChangeText,
+  showCount = false,
+  maxLength,
+  labels: labelsProp,
+  ...textareaProps
+}) {
+  const os = useInputPlatform(textareaProps.platform);
+  const { styles } = useStyles(fieldSheet, { os });
+  const labels = useLabels("textareaField", DEFAULT_FIELD_LABELS, labelsProp);
+  const [own, setOwn] = React2.useState(textareaProps.defaultValue ?? "");
+  const text = textareaProps.value ?? own;
+  const counter = useCharacterCount(text, showCount ? maxLength : void 0);
+  const {
+    error: validated,
+    success,
+    ...handlers
+  } = useFieldValidation({
+    validate,
+    error: errorProp,
+    success: successProp,
+    value: textareaProps.value,
+    onBlur,
+    onChangeText: (next) => {
+      setOwn(next);
+      onChangeText?.(next);
+    }
+  });
+  const error = validated ?? (counter.over ? counter.text : void 0);
+  const theme = useLoamTheme("textarea");
+  const labelId = React2.useId();
+  return (
+    // Sizing lands here, not on the inner `Textarea`: a label and helper line that
+    // did not follow the field's width would read as a different control.
+    /* @__PURE__ */ jsxs(View, { style: [styles.field, containerStyle], children: [
+      label ? /* @__PURE__ */ jsx(Text, { nativeID: labelId, style: [styles.label, error ? styles.labelError : null], children: label }) : null,
+      /* @__PURE__ */ jsx(
+        Textarea,
+        {
+          ...textareaProps,
+          ...handlers,
+          maxLength: showCount ? void 0 : maxLength,
+          labels,
+          success,
+          "aria-labelledby": label ? labelId : textareaProps["aria-labelledby"],
+          error: Boolean(error)
+        }
+      ),
+      error ? (
+        // Colour, icon and text together; the alert role announces it when it appears.
+        /* @__PURE__ */ jsxs(
+          View,
+          {
+            accessibilityRole: "alert",
+            accessibilityLabel: `${labels.errorPrefix}${error}`,
+            style: styles.errorRow,
+            children: [
+              /* @__PURE__ */ jsx(Icon, { name: "alert-triangle", size: theme.icon.sm, color: theme.color.dangerOnSoft }),
+              /* @__PURE__ */ jsx(Text, { style: styles.error, children: error })
+            ]
+          }
+        )
+      ) : hint ? /* @__PURE__ */ jsx(Text, { style: styles.hint, children: hint }) : null,
+      showCount && maxLength !== void 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        counter.visible && !(counter.over && !validated) ? /* @__PURE__ */ jsx(Text, { testID: "textarea-count", style: [styles.hint, counter.over && styles.countOver], children: counter.text }) : null,
+        /* @__PURE__ */ jsx(
+          View,
+          {
+            role: "status",
+            accessibilityLiveRegion: "polite",
+            accessible: Boolean(counter.announcement),
+            accessibilityLabel: counter.announcement || void 0
+          }
+        )
+      ] }) : null
+    ] })
+  );
+}
+var sheet = createStyleSheet((theme) => ({
+  // `borderColor` / `backgroundColor` are supplied at the use site as animated
+  // values, so the field can travel between states over `duration.base`.
+  container: {
+    // The reference draws a `1.5px` field edge — the static `w2` weight.
+    borderWidth: theme.borderWidth.thick,
+    borderRadius: theme.radius.md,
+    flexDirection: "row",
+    alignItems: "flex-start",
+    gap: theme.space.s2,
+    paddingHorizontal: theme.space[14],
+    paddingVertical: theme.space[10],
+    variants: {
+      // Matches Input (R5): the whole shell sits at `state.disabledOpacity`.
+      disabled: {
+        true: { opacity: theme.state.disabledOpacity },
+        false: {}
+      }
+    }
+  },
+  input: {
+    flex: 1,
+    // Same as `Input`: the `<textarea>` react-native-web renders carries a
+    // `min-width: auto` intrinsic floor, which would push the field out of a
+    // container narrower than that measure. Yoga already defaults to 0.
+    minWidth: 0,
+    padding: 0,
+    color: theme.color.text,
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[16],
+    variants: {
+      // The value: 17 on iOS, 16 on Android (Final 02).
+      os: {
+        ios: { fontSize: theme.fontSize[17] },
+        android: { fontSize: theme.fontSize[16] }
+      },
+      // The value keeps primary `text`; the shell's opacity does the dimming.
+      disabled: {
+        true: { color: theme.color.text },
+        false: {}
+      }
+    }
+  }
+}));
+var fieldSheet = createStyleSheet((theme) => ({
+  field: { gap: theme.space[6] },
+  // R11, as Input: 13 / 600 on iOS, 14 / 500 on Android, in `text`.
+  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 }
+      }
+    }
+  },
+  labelError: { color: theme.color.dangerOnSoft },
+  hint: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[12],
+    color: theme.color.text3
+  },
+  countOver: { color: theme.color.dangerOnSoft },
+  errorRow: { flexDirection: "row", alignItems: "center", gap: theme.space.s1 },
+  error: {
+    flexShrink: 1,
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[12],
+    color: theme.color.dangerOnSoft
+  }
+}));
+
+export { Textarea, TextareaField };

package/dist/{chunk-5LAAAXFP.js → chunk-RJA3RXO3.js}

@@ -1,4 +1,4 @@
-import { useAnalyzerLabels, camMeta, decorativeProps } from './chunk-HJLPZA4X.js';
+import { useAnalyzerLabels, camMeta, decorativeProps } from './chunk-OCHPK5YV.js';
 import { useLoamLocale } from './chunk-APCWFOZW.js';
 import { useReducedMotion } from './chunk-J64KGCGX.js';
 import * as React from 'react';
@@ -40,60 +40,69 @@ function PlaceholderFeed({
   const scale = still ? 1.015 : phase.interpolate({ inputRange: [0, 1], outputRange: [1.015, 1.046] });
   const translateX = still ? 0 : phase.interpolate({ inputRange: [0, 1], outputRange: [0, 8] });
   const translateY = still ? 0 : phase.interpolate({ inputRange: [0, 1], outputRange: [0, -8] });
-  return /* @__PURE__ */ jsxs(View, { accessible: false, testID: "loam-placeholder-feed", style: styles.root, ...decorativeProps(), children: [
-    /* @__PURE__ */ jsx(
-      Animated.View,
-      {
-        testID: still ? "loam-cam-plate-static" : "loam-cam-plate",
-        style: [styles.plate, { transform: [{ translateX }, { translateY }, { scale }] }],
-        children: /* @__PURE__ */ jsxs(Svg, { width: "100%", height: "100%", children: [
-          /* @__PURE__ */ jsxs(Defs, { children: [
-            /* @__PURE__ */ jsx(
-              Pattern,
-              {
-                id: "loam-cam-stripe",
-                patternUnits: "userSpaceOnUse",
-                width: 11,
-                height: 11,
-                patternTransform: "rotate(52)",
-                children: /* @__PURE__ */ jsx(
-                  Line,
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      accessible: false,
+      testID: "loam-placeholder-feed",
+      style: styles.root,
+      ...decorativeProps(),
+      children: [
+        /* @__PURE__ */ jsx(
+          Animated.View,
+          {
+            testID: still ? "loam-cam-plate-static" : "loam-cam-plate",
+            style: [styles.plate, { transform: [{ translateX }, { translateY }, { scale }] }],
+            children: /* @__PURE__ */ jsxs(Svg, { width: "100%", height: "100%", children: [
+              /* @__PURE__ */ jsxs(Defs, { children: [
+                /* @__PURE__ */ jsx(
+                  Pattern,
                   {
-                    x1: 0,
-                    y1: 0,
-                    x2: 0,
-                    y2: 11,
-                    stroke: theme.white.a2,
-                    strokeWidth: theme.borderWidth.heavy
+                    id: "loam-cam-stripe",
+                    patternUnits: "userSpaceOnUse",
+                    width: 11,
+                    height: 11,
+                    patternTransform: "rotate(52)",
+                    children: /* @__PURE__ */ jsx(
+                      Line,
+                      {
+                        x1: 0,
+                        y1: 0,
+                        x2: 0,
+                        y2: 11,
+                        stroke: theme.white.a2,
+                        strokeWidth: theme.borderWidth.heavy
+                      }
+                    )
                   }
-                )
-              }
-            ),
-            /* @__PURE__ */ jsxs(RadialGradient, { id: "loam-cam-warm", cx: "22%", cy: "18%", rx: "62%", ry: "62%", children: [
-              /* @__PURE__ */ jsx(Stop, { offset: "0", stopColor: theme.white.a3 }),
-              /* @__PURE__ */ jsx(Stop, { offset: "1", stopColor: theme.white.a3, stopOpacity: theme.opacity[0] })
-            ] }),
-            /* @__PURE__ */ jsxs(RadialGradient, { id: "loam-cam-cool", cx: "78%", cy: "82%", rx: "64%", ry: "64%", children: [
-              /* @__PURE__ */ jsx(Stop, { offset: "0", stopColor: theme.black.a5 }),
-              /* @__PURE__ */ jsx(Stop, { offset: "1", stopColor: theme.black.a5, stopOpacity: theme.opacity[0] })
+                ),
+                /* @__PURE__ */ jsxs(RadialGradient, { id: "loam-cam-warm", cx: "22%", cy: "18%", rx: "62%", ry: "62%", children: [
+                  /* @__PURE__ */ jsx(Stop, { offset: "0", stopColor: theme.white.a3 }),
+                  /* @__PURE__ */ jsx(Stop, { offset: "1", stopColor: theme.white.a3, stopOpacity: theme.opacity[0] })
+                ] }),
+                /* @__PURE__ */ jsxs(RadialGradient, { id: "loam-cam-cool", cx: "78%", cy: "82%", rx: "64%", ry: "64%", children: [
+                  /* @__PURE__ */ jsx(Stop, { offset: "0", stopColor: theme.black.a5 }),
+                  /* @__PURE__ */ jsx(Stop, { offset: "1", stopColor: theme.black.a5, stopOpacity: theme.opacity[0] })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx(Rect, { x: "0", y: "0", width: "100%", height: "100%", fill: "url(#loam-cam-stripe)" }),
+              /* @__PURE__ */ jsx(Rect, { x: "0", y: "0", width: "100%", height: "100%", fill: "url(#loam-cam-warm)" }),
+              /* @__PURE__ */ jsx(Rect, { x: "0", y: "0", width: "100%", height: "100%", fill: "url(#loam-cam-cool)" })
             ] })
-          ] }),
-          /* @__PURE__ */ jsx(Rect, { x: "0", y: "0", width: "100%", height: "100%", fill: "url(#loam-cam-stripe)" }),
-          /* @__PURE__ */ jsx(Rect, { x: "0", y: "0", width: "100%", height: "100%", fill: "url(#loam-cam-warm)" }),
-          /* @__PURE__ */ jsx(Rect, { x: "0", y: "0", width: "100%", height: "100%", fill: "url(#loam-cam-cool)" })
-        ] })
-      }
-    ),
-    /* @__PURE__ */ jsx(View, { testID: "loam-cam-vignette", style: styles.vignette, children: /* @__PURE__ */ jsxs(Svg, { width: "100%", height: "100%", children: [
-      /* @__PURE__ */ jsx(Defs, { children: /* @__PURE__ */ jsxs(RadialGradient, { id: "loam-cam-vignette-fill", cx: "50%", cy: "50%", rx: "50%", ry: "50%", children: [
-        /* @__PURE__ */ jsx(Stop, { offset: "0.42", stopColor: theme.black.a9, stopOpacity: theme.opacity[0] }),
-        /* @__PURE__ */ jsx(Stop, { offset: "1", stopColor: theme.black.a9 })
-      ] }) }),
-      /* @__PURE__ */ jsx(Rect, { x: "0", y: "0", width: "100%", height: "100%", fill: "url(#loam-cam-vignette-fill)" })
-    ] }) }),
-    children,
-    /* @__PURE__ */ jsx(Text, { style: [styles.label, camMeta(theme), topInset ? { marginTop: topInset } : null], children: label ?? t.placeholderFeed })
-  ] });
+          }
+        ),
+        /* @__PURE__ */ jsx(View, { testID: "loam-cam-vignette", style: styles.vignette, children: /* @__PURE__ */ jsxs(Svg, { width: "100%", height: "100%", children: [
+          /* @__PURE__ */ jsx(Defs, { children: /* @__PURE__ */ jsxs(RadialGradient, { id: "loam-cam-vignette-fill", cx: "50%", cy: "50%", rx: "50%", ry: "50%", children: [
+            /* @__PURE__ */ jsx(Stop, { offset: "0.42", stopColor: theme.black.a9, stopOpacity: theme.opacity[0] }),
+            /* @__PURE__ */ jsx(Stop, { offset: "1", stopColor: theme.black.a9 })
+          ] }) }),
+          /* @__PURE__ */ jsx(Rect, { x: "0", y: "0", width: "100%", height: "100%", fill: "url(#loam-cam-vignette-fill)" })
+        ] }) }),
+        children,
+        /* @__PURE__ */ jsx(Text, { style: [styles.label, camMeta(theme), topInset ? { marginTop: topInset } : null], children: label ?? t.placeholderFeed })
+      ]
+    }
+  );
 }
 var PLATE = {
   plant: { width: "38%", height: "42%", caption: "plant subject" },
@@ -153,8 +162,8 @@ var feedSheet = createStyleSheet((theme) => ({
     position: "absolute",
     left: theme.space[16],
     // Clear of the top bar, which is where the close button and the title plate
-    // sit.
-    top: theme.layout.appbarH + theme.space[8],
+    // sit, and one pill lower so the status pill never covers it.
+    top: theme.layout.appbarH + theme.space[8] + theme.space[40],
     fontSize: theme.fontSize[10]
   },
   subjectPlate: {

package/dist/chunk-RJYRJ3LD.js

@@ -0,0 +1 @@
+