@btndprojects/loam-ui-native 0.1.1 → 0.2.1

package/dist/{chunk-52X2VYTD.js → chunk-67IZZ2MJ.js}

@@ -1,10 +1,19 @@
-import { useColorTransition } from './chunk-ITTYJZWX.js';
+import { useColorTransition } from './chunk-7BUIKDD6.js';
+import { announce } from './chunk-W23G6JLF.js';
 import { haptics } from './chunk-NY2U3PBI.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-UXGIW7OK.js';
+import { springConfig } from './chunk-J64KGCGX.js';
 import * as React from 'react';
-import { Animated, Easing, Pressable, View, TextInput, Text } from 'react-native';
+import { Animated, Easing, View, Pressable, TextInput, Platform, Text } from 'react-native';
 import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
+var DEFAULT_LABELS = {
+  field: "One-time code",
+  incorrect: "Incorrect code",
+  errorAnnouncement: (field, message) => `${field}: ${message}`
+};
 var MASK = "\u2022";
 var COMPLETE_POP = 1.08;
 var COMPLETE_STAGGER = 55;
@@ -17,7 +26,7 @@ function OTPBox({
   caret,
   pop
 }) {
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("otp");
   const { styles } = useStyles(sheet, { disabled: false });
   const easing = React.useMemo(() => Easing.bezier(...theme.easing.base), [theme.easing.base]);
   const borderColor = useColorTransition(borderTarget, theme.duration.base, easing);
@@ -39,18 +48,23 @@ function OTP({
   onComplete,
   disabled = false,
   error = false,
+  errorMessage: errorMessageProp,
   secure = false,
   keyboardType = "number-pad",
-  accessibilityLabel = "One-time code",
+  accessibilityLabel: accessibilityLabelProp,
+  labels: labelsProp,
   style
 }) {
+  const labels = useLabels("otp", DEFAULT_LABELS, labelsProp);
+  const errorMessage = errorMessageProp ?? labels.incorrect;
+  const accessibilityLabel = accessibilityLabelProp ?? labels.field;
   const isControlled = value !== void 0;
   const [internal, setInternal] = React.useState(() => defaultValue.slice(0, length));
   const current = (isControlled ? value : internal) ?? "";
   const [focused, setFocused] = React.useState(false);
   const inputRef = React.useRef(null);
   const { styles } = useStyles(sheet, { disabled });
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("otp");
   const caret = React.useRef(new Animated.Value(1)).current;
   React.useEffect(() => {
     if (!focused || disabled || theme.reduceMotion) {
@@ -114,64 +128,105 @@ function OTP({
     anim.start();
     return () => anim.stop();
   }, [isComplete, disabled, pops, theme.duration.base, theme.easing.base]);
-  return /* @__PURE__ */ jsxs(
-    Pressable,
-    {
-      onPress: focus,
-      disabled,
-      accessibilityRole: "none",
-      style: [styles.row, style],
-      children: [
-        /* @__PURE__ */ jsx(
-          View,
-          {
-            style: styles.boxes,
-            importantForAccessibility: "no-hide-descendants",
-            accessibilityElementsHidden: true,
-            children: Array.from({ length }).map((_, i) => {
-              const char = current[i];
-              const isActive = focused && !disabled && !error && i === activeIndex && i < length;
-              const borderTarget = error ? theme.color.danger : isComplete ? theme.color.good : char || isActive ? theme.color.accent : theme.color.borderStrong;
-              return /* @__PURE__ */ jsx(
-                OTPBox,
-                {
-                  char,
-                  secure,
-                  active: isActive,
-                  borderTarget,
-                  fillTarget: isActive ? theme.color.surface : theme.color.surface2,
-                  caret,
-                  pop: pops[i]
-                },
-                i
-              );
-            })
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          TextInput,
-          {
-            ref: inputRef,
-            value: current,
-            onChangeText: handleChange,
-            onFocus: () => setFocused(true),
-            onBlur: () => setFocused(false),
-            editable: !disabled,
-            keyboardType,
-            textContentType: "oneTimeCode",
-            autoComplete: "one-time-code",
-            maxLength: length,
-            caretHidden: true,
-            accessibilityLabel,
-            accessibilityState: { disabled },
-            style: styles.hiddenInput
-          }
-        )
-      ]
+  const kick = React.useRef(new Animated.Value(0)).current;
+  const wasError = React.useRef(error);
+  React.useEffect(() => {
+    if (error && !wasError.current) {
+      haptics.notify("error");
+      announce(labels.errorAnnouncement(accessibilityLabel, errorMessage), "assertive");
+      if (!theme.reduceMotion) {
+        kick.setValue(theme.space[4]);
+        Animated.spring(kick, {
+          ...springConfig(theme, "fs", { thrown: true }),
+          toValue: 0,
+          useNativeDriver: true
+        }).start();
+      }
     }
-  );
+    wasError.current = error;
+  }, [error, kick, theme, accessibilityLabel, errorMessage, labels]);
+  const errorId = React.useId();
+  const showError = error && !!errorMessage;
+  return /* @__PURE__ */ jsxs(View, { style: [styles.root, style], children: [
+    /* @__PURE__ */ jsxs(Pressable, { onPress: focus, disabled, accessibilityRole: "none", style: styles.row, children: [
+      /* @__PURE__ */ jsx(
+        Animated.View,
+        {
+          style: [styles.boxes, { transform: [{ translateX: kick }] }],
+          importantForAccessibility: "no-hide-descendants",
+          accessibilityElementsHidden: true,
+          children: Array.from({ length }).map((_, i) => {
+            const char = current[i];
+            const isActive = focused && !disabled && !error && i === activeIndex && i < length;
+            const borderTarget = error ? theme.color.danger : isComplete ? theme.color.good : char || isActive ? theme.color.accent : theme.color.borderStrong;
+            return /* @__PURE__ */ jsx(
+              OTPBox,
+              {
+                char,
+                secure,
+                active: isActive,
+                borderTarget,
+                fillTarget: isActive ? theme.color.surface : theme.color.surface2,
+                caret,
+                pop: pops[i]
+              },
+              i
+            );
+          })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        TextInput,
+        {
+          ref: inputRef,
+          value: current,
+          onChangeText: handleChange,
+          onFocus: () => setFocused(true),
+          onBlur: () => setFocused(false),
+          editable: !disabled,
+          keyboardType,
+          textContentType: "oneTimeCode",
+          autoComplete: "one-time-code",
+          maxLength: length,
+          caretHidden: true,
+          accessibilityLabel,
+          accessibilityState: { disabled },
+          secureTextEntry: secure,
+          accessibilityHint: showError && Platform.OS !== "web" ? errorMessage : void 0,
+          ...{
+            "aria-invalid": error || void 0,
+            "aria-describedby": showError ? errorId : void 0
+          },
+          style: styles.hiddenInput
+        }
+      )
+    ] }),
+    showError ? (
+      // Read through the field it describes; not a second swipe stop on native.
+      /* @__PURE__ */ jsxs(
+        View,
+        {
+          style: styles.errorRow,
+          importantForAccessibility: "no-hide-descendants",
+          accessibilityElementsHidden: true,
+          children: [
+            /* @__PURE__ */ jsx(Icon, { name: "alert-triangle", size: theme.icon.sm, color: theme.color.danger }),
+            /* @__PURE__ */ jsx(Text, { nativeID: errorId, style: styles.errorText, children: errorMessage })
+          ]
+        }
+      )
+    ) : null
+  ] });
 }
 var sheet = createStyleSheet((theme) => ({
+  root: { alignSelf: "flex-start", gap: theme.space.s2 },
+  errorRow: { flexDirection: "row", alignItems: "center", gap: theme.space.s1 },
+  errorText: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    color: theme.color.danger
+  },
   row: {
     position: "relative",
     alignSelf: "flex-start",

package/dist/{chunk-UYG5L34B.js → chunk-6YAQBXB3.js}

@@ -1,9 +1,13 @@
-import { useThinkingPulse } from './chunk-XXXEFXY5.js';
+import { useThinkingPulse } from './chunk-W74TXYFB.js';
+import { useLabels } from './chunk-APCWFOZW.js';
 import 'react';
 import { View, Animated, Text } from 'react-native';
 import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
+var DEFAULT_LABELS = {
+  status: (state) => `Status: ${state}`
+};
 function StatusDot({
   state,
   size = "md",
@@ -12,13 +16,15 @@ function StatusDot({
   motion = "full",
   accessibilityLabel,
   style,
-  testID
+  testID,
+  labels: labelsProp
 }) {
+  const labels = useLabels("statusDot", DEFAULT_LABELS, labelsProp);
   const { styles } = useStyles(sheet, { state, size });
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("status-dot");
   const shouldPulse = state === "working" && (pulse ?? true) && motion === "full" && !theme.reduceMotion;
   const pulseStyle = useThinkingPulse(shouldPulse);
-  const name = accessibilityLabel || label || `Status: ${state}`;
+  const name = accessibilityLabel || label || labels.status(state);
   return /* @__PURE__ */ jsxs(
     View,
     {

package/dist/{chunk-BTTFCMKG.js → chunk-74FLKD24.js}

@@ -1,13 +1,22 @@
-import { useColorTransition } from './chunk-ITTYJZWX.js';
+import { useColorTransition, useFieldValidation } from './chunk-7BUIKDD6.js';
 import { NO_UA_FOCUS_RING } from './chunk-3NMD74ZU.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-UXGIW7OK.js';
 import * as React from 'react';
-import { Easing, Animated, TextInput, View, Text } from 'react-native';
+import { Easing, Animated, TextInput, ActivityIndicator, View, Text } from 'react-native';
 import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 
 var ROW_HEIGHT = 22;
+var DEFAULT_LABELS = {
+  validating: "Validating",
+  valid: "Valid",
+  invalid: "Invalid"
+};
 function Textarea({
   error = false,
+  success = false,
+  loading = false,
   rows = 3,
   autoGrow = false,
   minRows = 3,
@@ -18,24 +27,32 @@ function Textarea({
   onContentSizeChange,
   style,
   containerStyle,
+  labels: labelsProp,
   ...rest
 }) {
+  const labels = useLabels("textarea", DEFAULT_LABELS, labelsProp);
   const [focused, setFocused] = React.useState(false);
   const disabled = editable === false;
   const { styles } = useStyles(sheet, { disabled });
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("textarea");
   const padV = 2 * theme.space.s3;
   const minHeight = (autoGrow ? minRows : rows) * ROW_HEIGHT + padV;
   const maxHeight = maxRows * ROW_HEIGHT + padV;
   const [grownHeight, setGrownHeight] = React.useState(null);
   const handleContentSizeChange = (e) => {
     if (autoGrow) {
-      const next = Math.min(Math.max(e.nativeEvent.contentSize.height + padV, minHeight), maxHeight);
+      const next = Math.min(
+        Math.max(e.nativeEvent.contentSize.height + padV, minHeight),
+        maxHeight
+      );
       setGrownHeight(next);
     }
     onContentSizeChange?.(e);
   };
-  const tone = disabled ? { border: theme.color.border, fill: theme.color.surface3 } : error ? { 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 isLoading = loading && !disabled;
+  const invalid = !isLoading && !disabled && error;
+  const valid = !isLoading && !disabled && !error && success;
+  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);
   const backgroundColor = useColorTransition(tone.fill, theme.duration.base, easing);
@@ -47,7 +64,7 @@ function Textarea({
     setFocused(false);
     onBlur?.(e);
   };
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(
     Animated.View,
     {
       testID: "textarea-container",
@@ -60,31 +77,72 @@ function Textarea({
         autoGrow && { maxHeight, height: grownHeight ?? minHeight }
       ],
       accessibilityState: { disabled },
-      children: /* @__PURE__ */ jsx(
-        TextInput,
-        {
-          ...rest,
-          multiline: true,
-          textAlignVertical: "top",
-          editable,
-          placeholderTextColor: theme.color.text3,
-          onFocus: handleFocus,
-          onBlur: handleBlur,
-          onContentSizeChange: handleContentSizeChange,
-          style: [styles.input, NO_UA_FOCUS_RING, style]
-        }
-      )
+      children: [
+        /* @__PURE__ */ jsx(
+          TextInput,
+          {
+            ...rest,
+            multiline: true,
+            textAlignVertical: "top",
+            editable,
+            placeholderTextColor: theme.color.text3,
+            "aria-invalid": invalid || void 0,
+            "aria-busy": isLoading || void 0,
+            onFocus: handleFocus,
+            onBlur: handleBlur,
+            onContentSizeChange: handleContentSizeChange,
+            style: [styles.input, 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.goodOnSoft : theme.color.dangerOnSoft
+              }
+            )
+          }
+        ) : null
+      ]
     }
   );
 }
 function TextareaField({
   label,
   hint,
-  error,
+  error: errorProp,
+  success: successProp,
+  validate,
   containerStyle,
+  onBlur,
+  onChangeText,
   ...textareaProps
 }) {
   const { styles } = useStyles(fieldSheet);
+  const { error, success, ...handlers } = useFieldValidation({
+    validate,
+    error: errorProp,
+    success: successProp,
+    value: textareaProps.value,
+    onBlur,
+    onChangeText
+  });
+  const theme = useLoamTheme("textarea");
   const labelId = React.useId();
   return (
     // Sizing lands here, not on the inner `Textarea`: a label and helper line that
@@ -95,11 +153,19 @@ function TextareaField({
         Textarea,
         {
           ...textareaProps,
+          ...handlers,
+          success,
           "aria-labelledby": label ? labelId : textareaProps["aria-labelledby"],
           error: Boolean(error)
         }
       ),
-      error ? /* @__PURE__ */ jsx(Text, { style: styles.error, children: error }) : hint ? /* @__PURE__ */ jsx(Text, { style: styles.hint, children: hint }) : null
+      error ? (
+        // Colour, icon and text together; the alert role announces it when it appears.
+        /* @__PURE__ */ jsxs(View, { accessibilityRole: "alert", 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
     ] })
   );
 }
@@ -110,6 +176,9 @@ var sheet = createStyleSheet((theme) => ({
     // 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.s3,
     paddingVertical: theme.space.s3,
     variants: {
@@ -156,7 +225,9 @@ var fieldSheet = createStyleSheet((theme) => ({
     fontSize: theme.fontSize[12],
     color: theme.color.text3
   },
+  errorRow: { flexDirection: "row", alignItems: "center", gap: theme.space.s1 },
   error: {
+    flexShrink: 1,
     fontFamily: theme.font.sans,
     fontSize: theme.fontSize[12],
     color: theme.color.danger

package/dist/{chunk-ITTYJZWX.js → chunk-7BUIKDD6.js}

@@ -1,19 +1,53 @@
 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 { useLabels } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-UXGIW7OK.js';
+import { useResolvedMotion } from './chunk-J64KGCGX.js';
+import * as React2 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 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,6 +58,11 @@ function useColorTransition(target, duration, easing, animate = true) {
   }, [from, to, progress, duration, easing, animate]);
   return progress.interpolate({ inputRange: [0, 1], outputRange: [from, to] });
 }
+var DEFAULT_LABELS = {
+  validating: "Validating",
+  valid: "Valid",
+  invalid: "Invalid"
+};
 function Input({
   size = "md",
   error = false,
@@ -40,21 +79,23 @@ function Input({
   onBlur,
   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 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 { styles } = useStyles(sheet, { size, disabled });
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("input");
   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 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;
@@ -62,8 +103,8 @@ function Input({
   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 statusOpacity = React2.useRef(new Animated.Value(0)).current;
+  React2.useEffect(() => {
     const toValue = showStatus ? 1 : 0;
     if (!animateColour) {
       statusOpacity.setValue(toValue);
@@ -115,7 +156,7 @@ function Input({
                 testID: "input-spinner",
                 size: "small",
                 color: theme.color.accent,
-                accessibilityLabel: "Validating"
+                accessibilityLabel: labels.validating
               }
             )
           ) : /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -125,7 +166,7 @@ function Input({
               {
                 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,12 +181,24 @@ 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 { 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
@@ -156,6 +209,8 @@ function TextField({
         Input,
         {
           ...inputProps,
+          ...handlers,
+          success,
           "aria-labelledby": label ? labelId : inputProps["aria-labelledby"],
           error: Boolean(error)
         }
@@ -268,4 +323,4 @@ var fieldSheet = createStyleSheet((theme) => ({
   }
 }));
 
-export { Input, TextField, useColorTransition };
+export { Input, TextField, useColorTransition, useFieldValidation };