@btndprojects/loam-ui-native 0.1.1 → 0.3.1

package/dist/{chunk-ITTYJZWX.js → chunk-KXLDK6HB.js}

@@ -1,19 +1,54 @@
-import { NO_UA_FOCUS_RING } from './chunk-3NMD74ZU.js';
-import { useResolvedMotion } from './chunk-6N33LFQA.js';
-import { Icon } from './chunk-TKVFVF5D.js';
-import * as React from 'react';
-import { Animated, Easing, View, TextInput, ActivityIndicator, Text } from 'react-native';
-import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
+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 { Animated, Platform, Easing, View, TextInput, ActivityIndicator, Pressable, Text } from 'react-native';
+import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
+function useFieldValidation({
+  validate,
+  error,
+  success,
+  value,
+  onBlur,
+  onChangeText
+}) {
+  const [touched, setTouched] = React2.useState(false);
+  const [verdict, setVerdict] = React2.useState(null);
+  const lastText = React2.useRef(value ?? "");
+  if (value !== void 0) lastText.current = value;
+  const run = (text) => {
+    const message = validate?.(text);
+    setVerdict({ message: message ? String(message) : void 0, filled: text !== "" });
+  };
+  if (!validate) return { error, success, onBlur, onChangeText };
+  const shownError = error ?? verdict?.message;
+  return {
+    error: shownError,
+    success: success ?? (verdict !== null && !shownError && verdict.filled ? true : void 0),
+    onBlur: (event) => {
+      setTouched(true);
+      run(lastText.current);
+      onBlur?.(event);
+    },
+    onChangeText: (text) => {
+      lastText.current = text;
+      if (touched) run(text);
+      onChangeText?.(text);
+    }
+  };
+}
 function useColorTransition(target, duration, easing, animate = true) {
-  const progress = React.useRef(new Animated.Value(1)).current;
-  const [range, setRange] = React.useState([target, target]);
-  React.useEffect(() => {
+  const progress = React2.useRef(new Animated.Value(1)).current;
+  const [range, setRange] = React2.useState([target, target]);
+  React2.useEffect(() => {
     setRange((prev) => prev[1] === target ? prev : [prev[1], target]);
   }, [target]);
   const [from, to] = range;
-  React.useEffect(() => {
+  React2.useEffect(() => {
     if (from === to) return;
     if (!animate) {
       progress.setValue(1);
@@ -24,46 +59,81 @@ function useColorTransition(target, duration, easing, animate = true) {
   }, [from, to, progress, duration, easing, animate]);
   return progress.interpolate({ inputRange: [0, 1], outputRange: [from, to] });
 }
+function useInputPlatform(explicit) {
+  const theme = useLoamTheme("input");
+  if (explicit) return explicit;
+  if (Platform.OS === "ios") return "ios";
+  if (Platform.OS === "android") return "android";
+  return theme.platform === "iOS" ? "ios" : "android";
+}
+var DEFAULT_LABELS = {
+  validating: "Validating",
+  valid: "Valid",
+  invalid: "Invalid",
+  clear: "Clear"
+};
 function Input({
-  size = "md",
+  size = "lg",
+  platform,
   error = false,
   success = false,
   loading = false,
   leadingIcon,
   trailingIcon,
   validationState = "default",
+  surface = "filled",
+  clearable = false,
   message,
   showStatusIcon = true,
   motion = "full",
   editable = true,
   onFocus,
   onBlur,
+  onChangeText,
   style,
   containerStyle,
+  labels: labelsProp,
   ...rest
 }) {
-  const [focused, setFocused] = React.useState(false);
-  const animateColour = useResolvedMotion(motion) === "full";
+  const labels = useLabels("input", DEFAULT_LABELS, labelsProp);
+  const [focused, setFocused] = React2.useState(false);
+  const inputRef = React2.useRef(null);
+  const [typed, setTyped] = React2.useState(String(rest.defaultValue ?? ""));
+  const text = rest.value !== void 0 ? rest.value : typed;
+  const handleChangeText = (next) => {
+    setTyped(next);
+    onChangeText?.(next);
+  };
+  const clearText = () => {
+    inputRef.current?.clear();
+    handleChangeText("");
+    inputRef.current?.focus();
+  };
+  const animateColour = useResolvedMotion(motion, "input") === "full";
   const disabled = editable === false;
   const isLoading = loading && !disabled;
   const valid = !isLoading && (validationState === "valid" || success);
   const invalid = !isLoading && (validationState === "invalid" || error);
+  const os = useInputPlatform(platform);
   const { styles } = useStyles(sheet, { size, disabled });
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("input");
   const iconSize = theme.ctl.icon[size];
   const iconColor = theme.color.text3;
+  const valueFont = size === "lg" ? { fontSize: theme.fontSize[os === "ios" ? 17 : 16] } : null;
   const slopY = Math.max(0, (theme.hit[size] - theme.ctl[size]) / 2);
-  const tone = disabled ? { border: theme.color.border, fill: theme.color.surface3 } : isLoading ? { border: theme.focus.ringColor, fill: theme.color.surface } : invalid ? { border: theme.color.danger, fill: theme.color.dangerSoft } : valid ? { border: theme.color.good, fill: theme.color.goodSoft } : focused ? { border: theme.focus.ringColor, fill: theme.color.surface } : { border: theme.color.borderStrong, fill: theme.color.surface2 };
-  const easing = React.useMemo(() => Easing.bezier(...theme.easing.base), [theme.easing.base]);
+  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 statusIconName = valid ? "check-circle" : invalid ? "alert-triangle" : void 0;
-  const statusColor = valid ? theme.color.goodOnSoft : theme.color.dangerOnSoft;
+  const statusColor = valid ? theme.color.good : theme.color.danger;
   const showStatus = showStatusIcon && statusIconName !== void 0;
-  const messageColor = invalid ? theme.color.danger : valid ? theme.color.goodOnSoft : theme.color.text2;
+  const showClear = clearable && !disabled && !isLoading && text.length > 0;
+  const messageColor = invalid ? theme.color.dangerOnSoft : valid ? theme.color.goodOnSoft : theme.color.text2;
   const showMessageRow = validationState !== "default" || message !== void 0;
-  const statusOpacity = React.useRef(new Animated.Value(0)).current;
-  React.useEffect(() => {
+  const statusOpacity = React2.useRef(new Animated.Value(0)).current;
+  React2.useEffect(() => {
     const toValue = showStatus ? 1 : 0;
     if (!animateColour) {
       statusOpacity.setValue(toValue);
@@ -89,7 +159,18 @@ function Input({
       Animated.View,
       {
         testID: "input-container",
-        style: [styles.container, { borderColor, backgroundColor }],
+        style: [
+          styles.container,
+          // A multiline field wraps rather than clips: the ramp height becomes
+          // a floor and the box grows with its text.
+          rest.multiline ? {
+            height: "auto",
+            minHeight: theme.ctl.lg * 2,
+            alignItems: "flex-start",
+            paddingVertical: theme.space[8]
+          } : null,
+          { borderColor, backgroundColor }
+        ],
         accessibilityState: { disabled },
         children: [
           leadingIcon ? /* @__PURE__ */ jsx(Icon, { name: leadingIcon, size: iconSize, color: iconColor }) : null,
@@ -97,13 +178,18 @@ function Input({
             TextInput,
             {
               ...rest,
+              ref: inputRef,
+              numberOfLines: rest.numberOfLines ?? (rest.multiline ? 4 : void 0),
+              onChangeText: handleChangeText,
               editable,
+              "aria-disabled": disabled || void 0,
               "aria-busy": isLoading || void 0,
+              clearButtonMode: rest.clearButtonMode ?? (os === "ios" && !clearable ? "while-editing" : "never"),
               placeholderTextColor: theme.color.text3,
               onFocus: handleFocus,
               onBlur: handleBlur,
               hitSlop: { top: slopY, bottom: slopY },
-              style: [styles.input, NO_UA_FOCUS_RING, style]
+              style: [styles.input, valueFont, NO_UA_FOCUS_RING, style]
             }
           ),
           isLoading ? (
@@ -115,17 +201,28 @@ function Input({
                 testID: "input-spinner",
                 size: "small",
                 color: theme.color.accent,
-                accessibilityLabel: "Validating"
+                accessibilityLabel: labels.validating
               }
             )
           ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            showClear ? /* @__PURE__ */ jsx(
+              Pressable,
+              {
+                testID: "input-clear",
+                accessibilityRole: "button",
+                accessibilityLabel: labels.clear,
+                onPress: clearText,
+                hitSlop: Math.max(0, (theme.tapMin - iconSize) / 2),
+                children: /* @__PURE__ */ jsx(Icon, { name: "x", size: iconSize, color: iconColor })
+              }
+            ) : null,
             trailingIcon ? /* @__PURE__ */ jsx(Icon, { name: trailingIcon, size: iconSize, color: iconColor }) : null,
             showStatus ? /* @__PURE__ */ jsx(
               Animated.View,
               {
                 testID: "input-status-icon",
                 accessibilityRole: "image",
-                accessibilityLabel: valid ? "Valid" : "Invalid",
+                accessibilityLabel: valid ? labels.valid : labels.invalid,
                 style: { opacity: statusOpacity },
                 children: /* @__PURE__ */ jsx(Icon, { name: statusIconName, size: iconSize, color: statusColor })
               }
@@ -140,22 +237,37 @@ function Input({
 function TextField({
   label,
   hint,
-  error,
+  error: errorProp,
+  success: successProp,
+  validate,
   containerStyle,
+  onBlur,
+  onChangeText,
   ...inputProps
 }) {
-  const { styles } = useStyles(fieldSheet);
-  const labelId = React.useId();
+  const os = useInputPlatform(inputProps.platform);
+  const { styles } = useStyles(fieldSheet, { os });
+  const { error, success, ...handlers } = useFieldValidation({
+    validate,
+    error: errorProp,
+    success: successProp,
+    value: inputProps.value,
+    onBlur,
+    onChangeText
+  });
+  const labelId = React2.useId();
   return (
     // The caller's sizing goes here rather than on the inner `Input`: a label and
     // a 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, children: label }) : null,
+      label ? /* @__PURE__ */ jsx(Text, { nativeID: labelId, style: [styles.label, error ? styles.labelError : null], children: label }) : null,
       /* @__PURE__ */ jsx(
         Input,
         {
           ...inputProps,
+          ...handlers,
+          success,
           "aria-labelledby": label ? labelId : inputProps["aria-labelledby"],
           error: Boolean(error)
         }
@@ -202,14 +314,11 @@ var sheet = createStyleSheet((theme) => ({
           borderRadius: theme.ctl.r.lg
         }
       },
-      // A blanket `opacity` here dimmed the value text with it: react-native-web
-      // renders `editable={false}` as `readonly` (not `disabled`, which WCAG
-      // exempts), so axe checks the text and the 0.38 opacity dropped it to
-      // ~2.2:1. The disabled state now reads from the muted `surface3` fill,
-      // plain `border` edge and `text2` value colour instead — all AA on their
-      // own, no opacity dim on the text. (Same shape as the launch-screen fix.)
+      // Final 02 R5: the whole shell, value included, sits at
+      // `state.disabledOpacity`; the field is announced disabled, which WCAG
+      // exempts from contrast.
       disabled: {
-        true: {},
+        true: { opacity: theme.state.disabledOpacity },
         false: {}
       }
     }
@@ -231,11 +340,11 @@ var sheet = createStyleSheet((theme) => ({
         xs: { fontSize: theme.fontSize[14] },
         sm: { fontSize: theme.fontSize[14] },
         md: { fontSize: theme.fontSize[16] },
-        lg: { fontSize: theme.fontSize[16] }
+        // The lg value is the platform body, set at the use site: 17 on iOS,
+        // 16 on Android.
+        lg: {}
       },
-      // Solid value colour for the locked field — the locked look reads from the
-      // `surface3` fill and plain edge, not a dimmed ink. `text2` measures only
-      // 4.4:1 on `surface3` (WCAG fail), so the value keeps primary `text`.
+      // The value keeps primary `text`; the shell's opacity does the dimming.
       disabled: {
         true: { color: theme.color.text },
         false: {}
@@ -249,13 +358,20 @@ var sheet = createStyleSheet((theme) => ({
   }
 }));
 var fieldSheet = createStyleSheet((theme) => ({
-  field: { gap: theme.space.s2 },
+  field: { gap: theme.space[6] },
+  // R11: the label sits in `text`, 6 above the shell — 13 / 600 on iOS,
+  // 14 / 500 on Android; it turns `dangerOnSoft` with the error.
   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 }
+      }
+    }
   },
+  labelError: { color: theme.color.dangerOnSoft },
   hint: {
     fontFamily: theme.font.sans,
     fontSize: theme.fontSize[12],
@@ -264,8 +380,8 @@ var fieldSheet = createStyleSheet((theme) => ({
   error: {
     fontFamily: theme.font.sans,
     fontSize: theme.fontSize[12],
-    color: theme.color.danger
+    color: theme.color.dangerOnSoft
   }
 }));
 
-export { Input, TextField, useColorTransition };
+export { Input, TextField, useColorTransition, useFieldValidation, useInputPlatform };

package/dist/chunk-KZ3X7TSL.js

@@ -0,0 +1,196 @@
+import { Skeleton } from './chunk-YJ5PXOX3.js';
+import { isAndroidIdiom } from './chunk-TH4PW2WU.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-PCEFCOLN.js';
+import { motionTiming } from './chunk-J64KGCGX.js';
+import * as React from 'react';
+import { StyleSheet, Animated, View, Pressable, Text, Image as Image$1 } from 'react-native';
+import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/lib/blurhash.ts
+var DIGITS = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz#$%*+,-.:;=?@[]^_{|}~";
+function decode83(str) {
+  let value = 0;
+  for (const c of str) {
+    const digit = DIGITS.indexOf(c);
+    if (digit < 0) throw new Error("blurhash: invalid character");
+    value = value * 83 + digit;
+  }
+  return value;
+}
+function blurhashAverage(hash) {
+  if (hash.length < 6) return void 0;
+  try {
+    const v = decode83(hash.slice(2, 6));
+    return `rgb(${v >> 16} ${v >> 8 & 255} ${v & 255})`;
+  } catch {
+    return void 0;
+  }
+}
+var DEFAULT_LABELS = { error: "Couldn\u2019t load", retry: "Retry" };
+var SMALL_W = 96;
+function Image({
+  src,
+  fallbackSrc,
+  alt,
+  ratio,
+  fit = "cover",
+  placeholder,
+  inactive = false,
+  onError,
+  onLoad,
+  platform,
+  labels: labelsProp,
+  style,
+  testID
+}) {
+  const labels = useLabels("image", DEFAULT_LABELS, labelsProp);
+  const theme = useLoamTheme("image");
+  const { styles } = useStyles(sheet);
+  const android = isAndroidIdiom(theme, platform);
+  const sources = React.useMemo(
+    () => [src, ...fallbackSrc ?? []].filter((s) => !!s),
+    [src, fallbackSrc]
+  );
+  const [index, setIndex] = React.useState(0);
+  const [attempt, setAttempt] = React.useState(0);
+  const [status, setStatus] = React.useState(sources.length ? "loading" : "missing");
+  const [size, setSize] = React.useState();
+  const width = size?.width;
+  const [showAlt, setShowAlt] = React.useState(false);
+  const fade = React.useRef(new Animated.Value(0)).current;
+  const key = sources.join("\n");
+  React.useEffect(() => {
+    setIndex(0);
+    setStatus(sources.length ? "loading" : "missing");
+    fade.setValue(0);
+  }, [key]);
+  const retry = () => {
+    setIndex(0);
+    setAttempt((a) => a + 1);
+    setStatus("loading");
+    setShowAlt(false);
+    fade.setValue(0);
+  };
+  const handleError = () => {
+    if (index + 1 < sources.length) {
+      setIndex(index + 1);
+      return;
+    }
+    setStatus("error");
+    onError?.();
+  };
+  const handleLoad = () => {
+    setStatus("loaded");
+    onLoad?.();
+    Animated.timing(fade, {
+      toValue: 1,
+      ...motionTiming(theme.reduceMotion ? "none" : "full"),
+      useNativeDriver: true
+    }).start();
+  };
+  const small = width !== void 0 && width < SMALL_W;
+  const current = sources[index];
+  let placeholderNode = null;
+  let placeholderColor;
+  if (placeholder === "skeleton") {
+    placeholderNode = /* @__PURE__ */ jsx(View, { style: StyleSheet.absoluteFill, children: size ? /* @__PURE__ */ jsx(Skeleton, { variant: "rect", width: size.width, height: size.height, style: { borderRadius: 0 } }) : null });
+  } else if (placeholder && typeof placeholder === "object" && "color" in placeholder) {
+    placeholderColor = placeholder.color;
+  } else if (placeholder && typeof placeholder === "object" && "blurhash" in placeholder) {
+    placeholderColor = blurhashAverage(placeholder.blurhash);
+  } else if (placeholder != null) {
+    placeholderNode = placeholder;
+  }
+  const boxStyle = [
+    styles.box,
+    ratio ? { aspectRatio: ratio } : null,
+    status === "loading" && placeholderColor ? { backgroundColor: placeholderColor } : null,
+    style
+  ];
+  const onLayout = (e) => setSize({ width: e.nativeEvent.layout.width, height: e.nativeEvent.layout.height });
+  if (status === "error") {
+    return /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        testID,
+        accessibilityRole: "button",
+        accessibilityLabel: [labels.error, alt].filter(Boolean).join(", "),
+        accessibilityHint: labels.retry,
+        onPress: retry,
+        onLongPress: () => setShowAlt(true),
+        android_ripple: android ? { color: theme.state.pressed, foreground: true } : void 0,
+        onLayout,
+        style: ({ pressed }) => [
+          boxStyle,
+          styles.center,
+          !android && pressed ? { backgroundColor: theme.state.pressed } : null
+        ],
+        children: small && showAlt && alt ? /* @__PURE__ */ jsx(Text, { numberOfLines: 3, style: styles.errorAlt, children: alt }) : small ? /* @__PURE__ */ jsx(Icon, { name: "image", size: 16, color: theme.color.text3 }) : /* @__PURE__ */ jsxs(View, { style: styles.errorBody, children: [
+          /* @__PURE__ */ jsx(Icon, { name: "image", size: 24, color: theme.color.text3 }),
+          /* @__PURE__ */ jsx(Text, { style: styles.errorTitle, children: labels.error }),
+          alt ? /* @__PURE__ */ jsx(Text, { numberOfLines: 2, style: styles.errorAlt, children: alt }) : null
+        ] })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(View, { testID, onLayout, style: boxStyle, children: [
+    status === "loading" ? placeholderNode : null,
+    status === "missing" ? /* @__PURE__ */ jsx(View, { style: [StyleSheet.absoluteFill, styles.center], accessibilityElementsHidden: true, children: /* @__PURE__ */ jsx(Icon, { name: "image", size: small ? 16 : 24, color: theme.color.text3 }) }) : null,
+    current ? /* @__PURE__ */ jsxs(Animated.View, { style: [StyleSheet.absoluteFill, { opacity: fade }], children: [
+      /* @__PURE__ */ jsx(
+        Image$1,
+        {
+          source: { uri: current },
+          resizeMode: fit,
+          accessible: !!alt,
+          accessibilityRole: alt ? "image" : void 0,
+          accessibilityLabel: alt || void 0,
+          onLoad: handleLoad,
+          onError: handleError,
+          style: StyleSheet.absoluteFill
+        },
+        `${current}#${attempt}`
+      ),
+      inactive ? /* @__PURE__ */ jsx(View, { testID: "image-inactive", style: styles.inactive }) : null
+    ] }) : null
+  ] });
+}
+var sheet = createStyleSheet((theme) => ({
+  box: {
+    overflow: "hidden",
+    backgroundColor: theme.color.surface3
+  },
+  center: {
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  errorBody: {
+    alignItems: "center",
+    gap: theme.space[4],
+    paddingHorizontal: theme.space[12]
+  },
+  errorTitle: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[12],
+    fontWeight: theme.fontWeight.semibold,
+    color: theme.color.text2,
+    textAlign: "center"
+  },
+  errorAlt: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[12],
+    color: theme.color.text3,
+    textAlign: "center"
+  },
+  // RN has no CSS filter on every platform: a neutral overlay blended in
+  // `saturation` mode drops the picture's chroma, the web's greyscale (A07).
+  inactive: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: theme.color.surface2,
+    mixBlendMode: "saturation"
+  }
+}));
+
+export { Image };