@btndprojects/loam-ui-native 0.0.0-stage → 0.1.0

package/dist/chunk-ITTYJZWX.js

@@ -0,0 +1,271 @@
+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 { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+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(() => {
+    setRange((prev) => prev[1] === target ? prev : [prev[1], target]);
+  }, [target]);
+  const [from, to] = range;
+  React.useEffect(() => {
+    if (from === to) return;
+    if (!animate) {
+      progress.setValue(1);
+      return;
+    }
+    progress.setValue(0);
+    Animated.timing(progress, { toValue: 1, duration, easing, useNativeDriver: false }).start();
+  }, [from, to, progress, duration, easing, animate]);
+  return progress.interpolate({ inputRange: [0, 1], outputRange: [from, to] });
+}
+function Input({
+  size = "md",
+  error = false,
+  success = false,
+  loading = false,
+  leadingIcon,
+  trailingIcon,
+  validationState = "default",
+  message,
+  showStatusIcon = true,
+  motion = "full",
+  editable = true,
+  onFocus,
+  onBlur,
+  style,
+  containerStyle,
+  ...rest
+}) {
+  const [focused, setFocused] = React.useState(false);
+  const animateColour = useResolvedMotion(motion) === "full";
+  const disabled = editable === false;
+  const isLoading = loading && !disabled;
+  const valid = !isLoading && (validationState === "valid" || success);
+  const invalid = !isLoading && (validationState === "invalid" || error);
+  const { styles } = useStyles(sheet, { size, disabled });
+  const theme = useLoamTheme();
+  const iconSize = theme.ctl.icon[size];
+  const iconColor = theme.color.text3;
+  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 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 showStatus = showStatusIcon && statusIconName !== void 0;
+  const messageColor = invalid ? theme.color.danger : 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 toValue = showStatus ? 1 : 0;
+    if (!animateColour) {
+      statusOpacity.setValue(toValue);
+      return;
+    }
+    Animated.timing(statusOpacity, {
+      toValue,
+      duration: theme.duration.base,
+      easing,
+      useNativeDriver: true
+    }).start();
+  }, [showStatus, statusOpacity, theme.duration.base, easing, animateColour]);
+  const handleFocus = (e) => {
+    setFocused(true);
+    onFocus?.(e);
+  };
+  const handleBlur = (e) => {
+    setFocused(false);
+    onBlur?.(e);
+  };
+  return /* @__PURE__ */ jsxs(View, { style: [styles.root, containerStyle], children: [
+    /* @__PURE__ */ jsxs(
+      Animated.View,
+      {
+        testID: "input-container",
+        style: [styles.container, { borderColor, backgroundColor }],
+        accessibilityState: { disabled },
+        children: [
+          leadingIcon ? /* @__PURE__ */ jsx(Icon, { name: leadingIcon, size: iconSize, color: iconColor }) : null,
+          /* @__PURE__ */ jsx(
+            TextInput,
+            {
+              ...rest,
+              editable,
+              "aria-busy": isLoading || void 0,
+              placeholderTextColor: theme.color.text3,
+              onFocus: handleFocus,
+              onBlur: handleBlur,
+              hitSlop: { top: slopY, bottom: slopY },
+              style: [styles.input, NO_UA_FOCUS_RING, style]
+            }
+          ),
+          isLoading ? (
+            // The trailing slot is the async spinner while validating; the stale
+            // status icon / trailing glyph are suppressed until it resolves.
+            /* @__PURE__ */ jsx(
+              ActivityIndicator,
+              {
+                testID: "input-spinner",
+                size: "small",
+                color: theme.color.accent,
+                accessibilityLabel: "Validating"
+              }
+            )
+          ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            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",
+                style: { opacity: statusOpacity },
+                children: /* @__PURE__ */ jsx(Icon, { name: statusIconName, size: iconSize, color: statusColor })
+              }
+            ) : null
+          ] })
+        ]
+      }
+    ),
+    showMessageRow ? /* @__PURE__ */ jsx(View, { style: styles.messageRow, children: message ? /* @__PURE__ */ jsx(Text, { style: [styles.message, { color: messageColor }], children: message }) : null }) : null
+  ] });
+}
+function TextField({
+  label,
+  hint,
+  error,
+  containerStyle,
+  ...inputProps
+}) {
+  const { styles } = useStyles(fieldSheet);
+  const labelId = React.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,
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          ...inputProps,
+          "aria-labelledby": label ? labelId : inputProps["aria-labelledby"],
+          error: Boolean(error)
+        }
+      ),
+      error ? /* @__PURE__ */ jsx(Text, { style: styles.error, children: error }) : hint ? /* @__PURE__ */ jsx(Text, { style: styles.hint, children: hint }) : null
+    ] })
+  );
+}
+var sheet = createStyleSheet((theme) => ({
+  root: { gap: theme.space.s1 },
+  // `borderColor` / `backgroundColor` are supplied at the use site as animated
+  // values, so the field can travel between validation states over `duration.base`.
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    // The reference draws a `1.5px` field edge — the static `w2` weight.
+    borderWidth: theme.borderWidth.thick,
+    variants: {
+      // Height, padding, gap and corner radius all resolve from one control-size
+      // tier (26 / 30 / 36 / 44).
+      size: {
+        xs: {
+          height: theme.ctl.xs,
+          paddingHorizontal: theme.ctl.px.xs,
+          gap: theme.ctl.gap.xs,
+          borderRadius: theme.ctl.r.xs
+        },
+        sm: {
+          height: theme.ctl.sm,
+          paddingHorizontal: theme.ctl.px.sm,
+          gap: theme.ctl.gap.sm,
+          borderRadius: theme.ctl.r.sm
+        },
+        md: {
+          height: theme.ctl.md,
+          paddingHorizontal: theme.ctl.px.md,
+          gap: theme.ctl.gap.md,
+          borderRadius: theme.ctl.r.md
+        },
+        lg: {
+          height: theme.ctl.lg,
+          paddingHorizontal: theme.ctl.px.lg,
+          gap: theme.ctl.gap.lg,
+          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.)
+      disabled: {
+        true: {},
+        false: {}
+      }
+    }
+  },
+  input: {
+    flex: 1,
+    // Yoga's default, but react-native-web renders a real `<input>`, whose
+    // `min-width: auto` resolves to its ~178px intrinsic text-box measure. That
+    // floor let the field push out of a container narrower than itself, so a
+    // `containerStyle` width was only ever honoured upwards. It does not change
+    // the measure the control shrinks to when nothing sizes it — that comes from
+    // the same intrinsic width as a *max*-content size.
+    minWidth: 0,
+    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] }
+      },
+      // 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`.
+      disabled: {
+        true: { color: theme.color.text },
+        false: {}
+      }
+    }
+  },
+  messageRow: { minHeight: theme.space.s4, justifyContent: "center" },
+  message: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[12]
+  }
+}));
+var fieldSheet = createStyleSheet((theme) => ({
+  field: { gap: theme.space.s2 },
+  label: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.semibold,
+    fontSize: theme.fontSize[14],
+    color: theme.color.text2
+  },
+  hint: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[12],
+    color: theme.color.text3
+  },
+  error: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[12],
+    color: theme.color.danger
+  }
+}));
+
+export { Input, TextField, useColorTransition };