elseware-ui 3.0.0 → 3.0.2

package/dist/index.native.js

@@ -5,6 +5,7 @@ var tailwindMerge = require('tailwind-merge');
 var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var jsxRuntime$1 = require('nativewind/jsx-runtime');
+var formik = require('formik');
 
 // src/components/data-entry/button/native/Button.native.tsx
 
@@ -97,14 +98,14 @@ function useResolvedButtonConfig({
 // src/data/styles.tsx
 var variantsSolid = {
   ["default" /* default */]: "bg-gray-300 text-gray-900 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-100 dark:hover:bg-gray-600",
-  ["primary" /* primary */]: "bg-gradient-to-r from-eui-primary-500 to-eui-primary-600 text-white hover:brightness-110",
-  ["secondary" /* secondary */]: "bg-gradient-to-r from-eui-secondary-600 to-eui-secondary-500 text-white hover:brightness-110",
-  ["success" /* success */]: "bg-gradient-to-r from-eui-success-600 to-eui-success-500 text-white hover:brightness-110",
-  ["danger" /* danger */]: "bg-gradient-to-r from-eui-danger-600 to-eui-danger-500 text-white hover:brightness-110",
-  ["warning" /* warning */]: "bg-gradient-to-r from-eui-warning-500 to-eui-warning-400 text-black hover:brightness-105",
-  ["info" /* info */]: "bg-gradient-to-r from-eui-info-600 to-eui-info-500 text-white hover:brightness-110",
-  ["light" /* light */]: "bg-gradient-to-r from-eui-light-400 to-eui-light-300 text-gray-900 hover:brightness-105 dark:from-gray-200 dark:to-gray-100 dark:text-gray-900",
-  ["dark" /* dark */]: "bg-gradient-to-r from-eui-dark-400 to-eui-dark-500 text-white hover:brightness-110 dark:from-eui-dark-300 dark:to-eui-dark-400"
+  ["primary" /* primary */]: "bg-eui-primary-500 text-white hover:bg-eui-primary-600",
+  ["secondary" /* secondary */]: "bg-eui-secondary-500 text-white hover:bg-eui-secondary-600",
+  ["success" /* success */]: "bg-eui-success-500 text-white hover:bg-eui-success-600",
+  ["danger" /* danger */]: "bg-eui-danger-500 text-white hover:bg-eui-danger-600",
+  ["warning" /* warning */]: "bg-eui-warning-500 text-black hover:bg-eui-warning-400",
+  ["info" /* info */]: "bg-eui-info-500 text-white hover:bg-eui-info-600",
+  ["light" /* light */]: "bg-eui-light-400 text-gray-900 hover:bg-eui-light-300 dark:bg-gray-200 dark:text-gray-900 dark:hover:bg-gray-100",
+  ["dark" /* dark */]: "bg-eui-dark-500 text-white hover:bg-eui-dark-400 dark:bg-eui-dark-400 dark:hover:bg-eui-dark-300"
 };
 var variantsLite = {
   ["default" /* default */]: "bg-gray-500/10 border border-gray-300 text-gray-700 dark:bg-gray-400/10 dark:border-gray-700 dark:text-gray-200",
@@ -128,6 +129,17 @@ var variantsGhost = {
   ["light" /* light */]: "bg-transparent border border-gray-300 text-gray-700 hover:bg-white/10 dark:border-gray-500 dark:text-gray-100 dark:hover:bg-white/5",
   ["dark" /* dark */]: "bg-transparent border border-eui-dark-500 text-eui-dark-500 hover:bg-eui-dark-500/10 dark:text-eui-dark-300 dark:border-eui-dark-300"
 };
+var textVariants = {
+  ["default" /* default */]: "eui-text-md",
+  ["primary" /* primary */]: "text-blue-500",
+  ["secondary" /* secondary */]: "text-gray-500",
+  ["success" /* success */]: "text-green-500",
+  ["danger" /* danger */]: "text-red-500",
+  ["warning" /* warning */]: "text-yellow-500",
+  ["info" /* info */]: "text-blue-400",
+  ["light" /* light */]: "text-gray-300",
+  ["dark" /* dark */]: "text-gray-900"
+};
 var shapes = {
   ["square" /* square */]: "rounded-none",
   ["roundedSquare" /* roundedSquare */]: "rounded-md",
@@ -156,7 +168,7 @@ function resolveButtonVariantStyles({
     ghost: variantsGhost
   });
 }
-function getButtonTextColorClassName(className) {
+function getButtonLabelColorClassName(className) {
   return className.split(/\s+/).filter(
     (token) => token.startsWith("text-") || token.startsWith("dark:text-") || token.startsWith("disabled:text-")
   ).join(" ");
@@ -203,8 +215,6 @@ function Button({
   block = false,
   compact = false,
   mode,
-  buttonColor,
-  textColor,
   contentClassName,
   labelClassName,
   className,
@@ -212,9 +222,6 @@ function Button({
   appearance,
   shape,
   size,
-  style,
-  contentStyle,
-  labelStyle,
   accessibilityRole = "button",
   accessibilityState,
   type: _type,
@@ -242,21 +249,9 @@ function Button({
     appearance: resolvedAppearance,
     variant: resolvedVariant
   });
-  const textColorClassName = getButtonTextColorClassName(variantStyles);
-  const rootStyle = {
-    ...mode === "text" ? {
-      backgroundColor: "transparent",
-      borderColor: "transparent"
-    } : null,
-    ...buttonColor && mode !== "text" ? {
-      backgroundColor: buttonColor,
-      borderColor: buttonColor
-    } : null,
-    ...!buttonColor && textColor && resolvedAppearance !== "solid" ? { borderColor: textColor } : null
-  };
-  const labelTextStyle = textColor ? { color: textColor } : null;
+  const labelColorClassName = getButtonLabelColorClassName(variantStyles);
   const content = text ?? children;
-  const resolvedIcon = typeof icon === "function" ? icon({ color: textColor ?? "currentColor", size: iconSize }) : icon;
+  const resolvedIcon = typeof icon === "function" ? icon({ color: "currentColor", size: iconSize }) : icon;
   return /* @__PURE__ */ jsxRuntime$1.jsx(
     reactNative.Pressable,
     {
@@ -280,10 +275,8 @@ function Button({
       disabled: disabled || loading,
       onPress,
       style: ({ pressed }) => [
-        rootStyle,
         pressed && !disabled && !loading ? { opacity: 0.82 } : null,
-        disabled || loading ? { opacity: 0.55 } : null,
-        style
+        disabled || loading ? { opacity: 0.55 } : null
       ],
       children: /* @__PURE__ */ jsxRuntime$1.jsxs(
         reactNative.View,
@@ -292,7 +285,6 @@ function Button({
             "z-10 flex-row items-center justify-center gap-2",
             contentClassName
           ),
-          style: contentStyle,
           children: [
             loading ? /* @__PURE__ */ jsxRuntime$1.jsx(
               reactNative.View,
@@ -301,14 +293,7 @@ function Button({
                   "shrink-0 items-center justify-center",
                   metrics.slotClassName
                 ),
-                children: /* @__PURE__ */ jsxRuntime$1.jsx(
-                  reactNative.ActivityIndicator,
-                  {
-                    className: textColorClassName,
-                    color: textColor,
-                    size: "small"
-                  }
-                )
+                children: /* @__PURE__ */ jsxRuntime$1.jsx(reactNative.ActivityIndicator, { className: labelColorClassName, size: "small" })
               }
             ) : null,
             !loading && resolvedIcon ? /* @__PURE__ */ jsxRuntime$1.jsx(
@@ -327,11 +312,11 @@ function Button({
                 className: cn(
                   "font-bold",
                   metrics.labelClassName,
-                  textColorClassName,
+                  labelColorClassName,
                   labelClassName
                 ),
                 numberOfLines: 1,
-                style: [nativeLabelBaseStyle, labelTextStyle, labelStyle],
+                style: nativeLabelBaseStyle,
                 children: content
               }
             ) }) : content
@@ -342,9 +327,725 @@ function Button({
   );
 }
 var Button_native_default = Button;
+function isMultiCheckbox(props) {
+  return Array.isArray(props.options);
+}
+function useResolvedCheckboxConfig({
+  label,
+  placeholder,
+  variant,
+  shape
+}) {
+  const eui = useEUIConfig();
+  return {
+    shape: shape ?? eui?.config?.global?.shape ?? "roundedSquare",
+    variant: variant ?? "secondary",
+    label: label ?? placeholder
+  };
+}
+function useCheckboxFieldState(props) {
+  const isMulti = isMultiCheckbox(props);
+  const [multiField, multiMeta, multiHelpers] = formik.useField(
+    props
+  );
+  const [singleField, singleMeta, singleHelpers] = formik.useField(
+    props
+  );
+  return {
+    isMulti,
+    multiField,
+    multiMeta,
+    multiHelpers,
+    singleField,
+    singleMeta,
+    singleHelpers
+  };
+}
+
+// src/components/data-entry/checkbox/base/Checkbox.styles.ts
+var checkboxShapes = shapes;
+var checkboxGroupClassName = "flex flex-col gap-2";
+var checkboxOptionRowClassName = "flex flex-row items-start gap-3";
+var checkboxLabelClassName = "cursor-pointer select-none text-sm leading-relaxed text-gray-800 dark:text-gray-200";
+var checkboxIndicatorDisabledClassName = "cursor-not-allowed opacity-50";
+
+// src/components/data-entry/checkbox/native/Checkbox.native.styles.ts
+var nativeCheckboxVariants = {
+  default: {
+    checkedClassName: "border-eui-secondary-600 bg-eui-secondary-600 dark:border-eui-secondary-500 dark:bg-eui-secondary-500",
+    iconClassName: "text-white"
+  },
+  primary: {
+    checkedClassName: "border-eui-primary-600 bg-eui-primary-600 dark:border-eui-primary-500 dark:bg-eui-primary-500",
+    iconClassName: "text-white"
+  },
+  secondary: {
+    checkedClassName: "border-eui-secondary-600 bg-eui-secondary-600 dark:border-eui-secondary-500 dark:bg-eui-secondary-500",
+    iconClassName: "text-white"
+  },
+  success: {
+    checkedClassName: "border-eui-success-600 bg-eui-success-600 dark:border-eui-success-500 dark:bg-eui-success-500",
+    iconClassName: "text-white"
+  },
+  danger: {
+    checkedClassName: "border-eui-danger-600 bg-eui-danger-600 dark:border-eui-danger-500 dark:bg-eui-danger-500",
+    iconClassName: "text-white"
+  },
+  warning: {
+    checkedClassName: "border-eui-warning-500 bg-eui-warning-500 dark:border-eui-warning-400 dark:bg-eui-warning-400",
+    iconClassName: "text-black"
+  },
+  info: {
+    checkedClassName: "border-eui-info-600 bg-eui-info-600 dark:border-eui-info-500 dark:bg-eui-info-500",
+    iconClassName: "text-white"
+  },
+  light: {
+    checkedClassName: "border-eui-light-400 bg-eui-light-400 dark:border-gray-200 dark:bg-gray-200",
+    iconClassName: "text-gray-900"
+  },
+  dark: {
+    checkedClassName: "border-eui-dark-500 bg-eui-dark-500 dark:border-eui-dark-300 dark:bg-eui-dark-300",
+    iconClassName: "text-white"
+  }
+};
+function resolveNativeCheckboxVariantStyles(variant) {
+  return nativeCheckboxVariants[variant];
+}
+function getIndicatorClassName({
+  checked,
+  className,
+  disabled,
+  indicatorClassName,
+  checkedIndicatorClassName,
+  resolvedShape,
+  variantCheckedClassName
+}) {
+  return cn(
+    "h-5 w-5 shrink-0 items-center justify-center border-2 border-gray-300 bg-white dark:border-neutral-600 dark:bg-neutral-900",
+    checkboxShapes[resolvedShape],
+    indicatorClassName,
+    className,
+    checked && variantCheckedClassName,
+    checked && checkedIndicatorClassName,
+    disabled && checkboxIndicatorDisabledClassName
+  );
+}
+function Tick({
+  checkedIconClassName,
+  iconClassName
+}) {
+  return /* @__PURE__ */ jsxRuntime$1.jsx(
+    reactNative.Text,
+    {
+      className: cn(
+        "text-sm font-bold leading-none",
+        iconClassName,
+        checkedIconClassName
+      ),
+      children: "\u2713"
+    }
+  );
+}
+function Checkbox(checkboxProps) {
+  const {
+    label,
+    placeholder,
+    variant,
+    shape,
+    disabled = false,
+    className,
+    groupClassName,
+    optionClassName,
+    indicatorClassName,
+    checkedIndicatorClassName,
+    checkedIconClassName,
+    labelClassName
+  } = checkboxProps;
+  const {
+    shape: resolvedShape,
+    variant: resolvedVariant,
+    label: resolvedLabel
+  } = useResolvedCheckboxConfig({
+    label,
+    placeholder,
+    variant,
+    shape
+  });
+  const {
+    isMulti,
+    multiField,
+    multiMeta,
+    multiHelpers,
+    singleField,
+    singleMeta,
+    singleHelpers
+  } = useCheckboxFieldState(checkboxProps);
+  const variantStyles = resolveNativeCheckboxVariantStyles(resolvedVariant);
+  const activeMeta = isMulti ? multiMeta : singleMeta;
+  const multiProps = isMultiCheckbox(checkboxProps) ? checkboxProps : null;
+  const singleChecked = singleField.value;
+  const errorText = activeMeta.touched && typeof activeMeta.error === "string" ? activeMeta.error : null;
+  return /* @__PURE__ */ jsxRuntime$1.jsxs(reactNative.View, { className: cn(checkboxGroupClassName, groupClassName), children: [
+    !isMulti && /* @__PURE__ */ jsxRuntime$1.jsxs(
+      reactNative.Pressable,
+      {
+        accessibilityRole: "checkbox",
+        accessibilityState: {
+          checked: singleChecked,
+          disabled
+        },
+        className: cn(checkboxOptionRowClassName, optionClassName),
+        disabled,
+        onPress: () => singleHelpers.setValue(!singleChecked),
+        children: [
+          /* @__PURE__ */ jsxRuntime$1.jsx(
+            reactNative.View,
+            {
+              className: getIndicatorClassName({
+                checked: singleChecked,
+                className,
+                disabled,
+                indicatorClassName,
+                checkedIndicatorClassName,
+                resolvedShape,
+                variantCheckedClassName: variantStyles.checkedClassName
+              }),
+              children: singleChecked ? /* @__PURE__ */ jsxRuntime$1.jsx(
+                Tick,
+                {
+                  checkedIconClassName,
+                  iconClassName: variantStyles.iconClassName
+                }
+              ) : null
+            }
+          ),
+          resolvedLabel ? /* @__PURE__ */ jsxRuntime$1.jsx(reactNative.Text, { className: cn(checkboxLabelClassName, labelClassName), children: resolvedLabel }) : null
+        ]
+      }
+    ),
+    isMulti && multiProps?.options.map((option) => {
+      const values = multiField.value ?? [];
+      const checked = values.includes(option.value);
+      const optionDisabled = disabled || option.disabled === true;
+      return /* @__PURE__ */ jsxRuntime$1.jsxs(
+        reactNative.Pressable,
+        {
+          accessibilityRole: "checkbox",
+          accessibilityState: {
+            checked,
+            disabled: optionDisabled
+          },
+          className: cn(checkboxOptionRowClassName, optionClassName),
+          disabled: optionDisabled,
+          onPress: () => multiHelpers.setValue(
+            checked ? values.filter((value) => value !== option.value) : [...values, option.value]
+          ),
+          children: [
+            /* @__PURE__ */ jsxRuntime$1.jsx(
+              reactNative.View,
+              {
+                className: getIndicatorClassName({
+                  checked,
+                  className,
+                  disabled: optionDisabled,
+                  indicatorClassName,
+                  checkedIndicatorClassName,
+                  resolvedShape,
+                  variantCheckedClassName: variantStyles.checkedClassName
+                }),
+                children: checked ? /* @__PURE__ */ jsxRuntime$1.jsx(
+                  Tick,
+                  {
+                    checkedIconClassName,
+                    iconClassName: variantStyles.iconClassName
+                  }
+                ) : null
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime$1.jsx(
+              reactNative.Text,
+              {
+                className: cn(
+                  checkboxLabelClassName,
+                  optionDisabled && "opacity-60",
+                  labelClassName
+                ),
+                children: option.label
+              }
+            )
+          ]
+        },
+        option.value
+      );
+    }),
+    errorText ? /* @__PURE__ */ jsxRuntime$1.jsx(reactNative.Text, { className: "px-2 py-1 text-sm font-medium text-eui-danger-500", children: errorText }) : null
+  ] });
+}
+function renderFormChildren(children, formik) {
+  return typeof children === "function" ? children(formik) : children;
+}
+function FormObservers({
+  formik,
+  onChange,
+  onDirtyChange
+}) {
+  const prevValuesRef = react.useRef(formik.values);
+  react.useEffect(() => {
+    onDirtyChange?.(formik.dirty);
+  }, [formik.dirty, onDirtyChange]);
+  react.useEffect(() => {
+    if (!onChange) return;
+    const currentValues = formik.values;
+    const prevValues = prevValuesRef.current;
+    const changed = {};
+    Object.keys(currentValues).forEach((key) => {
+      if (currentValues[key] !== prevValues[key]) {
+        changed[key] = currentValues[key];
+      }
+    });
+    if (Object.keys(changed).length > 0) {
+      onChange(currentValues, { changed });
+    }
+    prevValuesRef.current = currentValues;
+  }, [formik.values, onChange]);
+  return null;
+}
+function Form({
+  initialValues = {},
+  validationSchema,
+  enableReinitialize,
+  children,
+  className,
+  contentClassName,
+  onSubmit,
+  onChange,
+  onDirtyChange
+}) {
+  return /* @__PURE__ */ jsxRuntime$1.jsx(
+    formik.Formik,
+    {
+      initialValues,
+      validationSchema,
+      enableReinitialize,
+      onSubmit: async (values, helpers) => {
+        await onSubmit(values, helpers);
+      },
+      children: (formik) => /* @__PURE__ */ jsxRuntime$1.jsxs(reactNative.View, { className: cn(className), children: [
+        /* @__PURE__ */ jsxRuntime$1.jsx(
+          FormObservers,
+          {
+            formik,
+            onChange,
+            onDirtyChange
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime$1.jsx(reactNative.View, { className: cn(contentClassName), children: renderFormChildren(children, formik) })
+      ] })
+    }
+  );
+}
+
+// src/components/data-entry/form/form-response/base/FormResponse.styles.ts
+var formResponseSizeStyles = {
+  xs: {
+    root: "px-2 py-1",
+    text: "text-xs"
+  },
+  sm: {
+    root: "px-3 py-2",
+    text: "text-sm"
+  },
+  md: {
+    root: "px-4 py-2",
+    text: "text-base"
+  },
+  lg: {
+    root: "px-5 py-3",
+    text: "text-lg"
+  },
+  xl: {
+    root: "px-6 py-4",
+    text: "text-xl"
+  }
+};
+function isTextClassName(token) {
+  const styleToken = token.split(":").pop() ?? token;
+  return styleToken.startsWith("text-");
+}
+function splitClassName(className) {
+  const tokens = className.split(/\s+/).filter(Boolean);
+  return {
+    root: tokens.filter((token) => !isTextClassName(token)).join(" "),
+    text: tokens.filter(isTextClassName).join(" ")
+  };
+}
+function resolveFormResponseStyles({
+  shape,
+  size,
+  variant
+}) {
+  const variantClassNames = splitClassName(variantsLite[variant]);
+  const sizeClassNames = formResponseSizeStyles[size];
+  return {
+    rootClassName: [
+      "border",
+      variantClassNames.root,
+      shapes[shape],
+      sizeClassNames.root
+    ].filter(Boolean).join(" "),
+    textClassName: [
+      "font-poppins font-light",
+      variantClassNames.text,
+      sizeClassNames.text
+    ].filter(Boolean).join(" ")
+  };
+}
+function FormResponse({
+  text,
+  variant = "default",
+  shape = "roundedSquare",
+  size = "md",
+  className,
+  textClassName
+}) {
+  if (!text) {
+    return null;
+  }
+  const styles = resolveFormResponseStyles({ shape, size, variant });
+  return /* @__PURE__ */ jsxRuntime$1.jsx(reactNative.View, { className: cn(styles.rootClassName, className), children: /* @__PURE__ */ jsxRuntime$1.jsx(reactNative.Text, { className: cn(styles.textClassName, textClassName), children: text }) });
+}
+
+// src/components/data-entry/input/input-label/base/InputLabel.styles.ts
+var inputLabelStaticClassName = "pointer-events-none select-none px-0 text-[13.5px] leading-none text-[#6B7280]";
+var inputLabelBaseClassName = "pointer-events-none absolute left-3 z-10 select-none bg-white/95 px-1 font-medium leading-none dark:bg-eui-dark-800";
+var inputLabelErrorClassName = "text-[#6B7280]";
+var inputLabelDisabledClassName = "opacity-60";
+var nativeInputLabelColors = {
+  default: "#6B7280",
+  disabled: "#9CA3AF"
+};
+var nativeInputLabelStyle = {
+  left: 12,
+  position: "absolute",
+  zIndex: 10
+};
+var nativeInputLabelMetrics = {
+  floatingFontSize: 12,
+  floatingTop: 6,
+  restingFontSize: 16,
+  restingTop: 18
+};
+function getLabelColor({ disabled }) {
+  if (disabled) {
+    return nativeInputLabelColors.disabled;
+  }
+  return nativeInputLabelColors.default;
+}
+function InputLabel({
+  text,
+  children,
+  className,
+  floating,
+  errored = false,
+  disabled = false,
+  animatedValue
+}) {
+  const isFloatingLabel = typeof floating === "boolean";
+  const progress = animatedValue;
+  const animatedStyle = progress ? {
+    fontSize: progress.interpolate({
+      inputRange: [0, 1],
+      outputRange: [
+        nativeInputLabelMetrics.restingFontSize,
+        nativeInputLabelMetrics.floatingFontSize
+      ]
+    }),
+    lineHeight: progress.interpolate({
+      inputRange: [0, 1],
+      outputRange: [
+        nativeInputLabelMetrics.restingFontSize,
+        nativeInputLabelMetrics.floatingFontSize
+      ]
+    }),
+    top: progress.interpolate({
+      inputRange: [0, 1],
+      outputRange: [
+        nativeInputLabelMetrics.restingTop,
+        nativeInputLabelMetrics.floatingTop
+      ]
+    })
+  } : {
+    fontSize: floating === true ? nativeInputLabelMetrics.floatingFontSize : nativeInputLabelMetrics.restingFontSize,
+    lineHeight: floating === true ? nativeInputLabelMetrics.floatingFontSize : nativeInputLabelMetrics.restingFontSize,
+    top: floating === true ? nativeInputLabelMetrics.floatingTop : nativeInputLabelMetrics.restingTop
+  };
+  return /* @__PURE__ */ jsxRuntime$1.jsx(
+    reactNative.Animated.Text,
+    {
+      className: cn(
+        isFloatingLabel ? inputLabelBaseClassName : inputLabelStaticClassName,
+        isFloatingLabel && "bg-transparent px-0 dark:bg-transparent",
+        errored && inputLabelErrorClassName,
+        disabled && inputLabelDisabledClassName,
+        className
+      ),
+      style: [
+        isFloatingLabel ? nativeInputLabelStyle : null,
+        isFloatingLabel ? animatedStyle : null,
+        {
+          color: getLabelColor({ disabled }),
+          includeFontPadding: false
+        }
+      ],
+      children: text || children
+    }
+  );
+}
+
+// src/components/data-entry/input/input-response/base/InputResponse.styles.ts
+var inputResponseBaseClassName = "px-2 pt-1.5 text-sm font-medium";
+var inputResponseVariants = textVariants;
+function InputResponse({
+  name,
+  visibility = false,
+  variant = "default",
+  className,
+  message
+}) {
+  const [mounted, setMounted] = react.useState(Boolean(visibility));
+  const progress = react.useRef(new reactNative.Animated.Value(visibility ? 1 : 0)).current;
+  react.useEffect(() => {
+    if (visibility) {
+      setMounted(true);
+    }
+    reactNative.Animated.timing(progress, {
+      duration: visibility ? 180 : 120,
+      easing: visibility ? reactNative.Easing.out(reactNative.Easing.cubic) : reactNative.Easing.in(reactNative.Easing.cubic),
+      toValue: visibility ? 1 : 0,
+      useNativeDriver: true
+    }).start(() => {
+      if (!visibility) {
+        setMounted(false);
+      }
+    });
+  }, [progress, visibility]);
+  if (!mounted) {
+    return null;
+  }
+  const animatedStyle = {
+    opacity: progress,
+    transform: [
+      {
+        translateY: progress.interpolate({
+          inputRange: [0, 1],
+          outputRange: [6, 0]
+        })
+      }
+    ]
+  };
+  const content = message ?? /* @__PURE__ */ jsxRuntime$1.jsx(formik.ErrorMessage, { name, children: (errorMessage) => String(errorMessage) });
+  return /* @__PURE__ */ jsxRuntime$1.jsx(reactNative.Animated.View, { className: "w-full", style: animatedStyle, children: /* @__PURE__ */ jsxRuntime$1.jsx(
+    reactNative.Text,
+    {
+      className: cn(
+        inputResponseBaseClassName,
+        inputResponseVariants[variant],
+        className
+      ),
+      style: { includeFontPadding: false },
+      children: content
+    }
+  ) });
+}
+function resolveInputType({
+  passwordVisible,
+  type
+}) {
+  return type === "password" && passwordVisible ? "text" : type;
+}
+function useResolvedInputConfig({
+  label,
+  placeholder,
+  shape,
+  type = "text"
+}) {
+  const eui = useEUIConfig();
+  return {
+    shape: shape ?? eui?.config?.global?.shape ?? "square",
+    type,
+    label: label ?? placeholder
+  };
+}
+function useInputFieldState(props) {
+  const [field, meta, helpers] = formik.useField(props);
+  return {
+    field,
+    meta,
+    helpers
+  };
+}
+
+// src/components/data-entry/input/input/base/Input.styles.ts
+var inputShapes = shapes;
+var inputRootClassName = "relative w-full";
+var inputFrameClassName = "relative h-14 w-full overflow-hidden border bg-white/95 px-3 dark:bg-eui-dark-800";
+var inputFrameIdleClassName = "border-gray-300 hover:border-gray-400 dark:border-eui-dark-300 dark:hover:border-eui-dark-200";
+var inputFrameActiveClassName = "border-eui-secondary-600";
+var inputFrameErrorClassName = "border-eui-danger-500";
+var inputFrameDisabledClassName = "cursor-not-allowed opacity-60";
+var inputControlClassName = "w-full bg-transparent pt-5 pb-2 text-base font-medium text-gray-950 dark:text-gray-50";
+
+// src/components/data-entry/input/input/native/Input.native.styles.ts
+var nativeInputControlClassName = "h-full";
+var nativePasswordInputClassName = "pr-16";
+var nativePasswordToggleClassName = "absolute right-3 top-[18px] h-5 items-center justify-center";
+var nativePasswordToggleTextClassName = "text-xs font-semibold text-eui-dark-200";
+var nativeInputControlStyle = {
+  backgroundColor: "transparent",
+  borderBottomWidth: 0,
+  borderColor: "transparent",
+  borderWidth: 0,
+  includeFontPadding: false,
+  outlineColor: "transparent",
+  outlineStyle: "none",
+  textAlignVertical: "center"
+};
+function Input(inputProps) {
+  const {
+    type = "text",
+    label,
+    placeholder,
+    inputClassName,
+    labelClassName,
+    responseClassName,
+    step: _step,
+    shape,
+    disabled = false,
+    className,
+    onBlur,
+    onFocus,
+    onChange: _onChange,
+    ..._props
+  } = inputProps;
+  const { field, helpers, meta } = useInputFieldState(inputProps);
+  const [focused, setFocused] = react.useState(false);
+  const [passwordVisible, setPasswordVisible] = react.useState(false);
+  const labelProgress = react.useRef(
+    new reactNative.Animated.Value(String(field.value ?? "").length > 0 ? 1 : 0)
+  ).current;
+  const {
+    shape: resolvedShape,
+    type: resolvedType,
+    label: resolvedLabel
+  } = useResolvedInputConfig({
+    label,
+    placeholder,
+    shape,
+    type
+  });
+  const inputType = resolveInputType({
+    passwordVisible,
+    type: resolvedType
+  });
+  const hasError = Boolean(meta.touched && meta.error);
+  const errorText = hasError && typeof meta.error === "string" ? meta.error : null;
+  const hasValue = String(field.value ?? "").length > 0;
+  const floating = focused || hasValue;
+  react.useEffect(() => {
+    reactNative.Animated.timing(labelProgress, {
+      duration: 190,
+      easing: reactNative.Easing.out(reactNative.Easing.cubic),
+      toValue: floating ? 1 : 0,
+      useNativeDriver: false
+    }).start();
+  }, [floating, labelProgress]);
+  const handleBlur = (event) => {
+    setFocused(false);
+    helpers.setTouched(true);
+    onBlur?.(event);
+  };
+  const handleFocus = (event) => {
+    setFocused(true);
+    onFocus?.(event);
+  };
+  return /* @__PURE__ */ jsxRuntime$1.jsxs(reactNative.View, { className: inputRootClassName, children: [
+    /* @__PURE__ */ jsxRuntime$1.jsx(
+      reactNative.View,
+      {
+        className: cn(
+          inputFrameClassName,
+          hasError ? inputFrameErrorClassName : focused ? inputFrameActiveClassName : inputFrameIdleClassName,
+          inputShapes[resolvedShape],
+          disabled && inputFrameDisabledClassName,
+          className
+        ),
+        children: /* @__PURE__ */ jsxRuntime$1.jsx(
+          reactNative.TextInput,
+          {
+            accessibilityLabel: resolvedLabel,
+            className: cn(
+              inputControlClassName,
+              nativeInputControlClassName,
+              type === "password" && nativePasswordInputClassName,
+              inputClassName
+            ),
+            editable: !disabled,
+            keyboardType: inputType === "number" ? "numeric" : "default",
+            onBlur: handleBlur,
+            onChangeText: (value) => helpers.setValue(value),
+            onFocus: handleFocus,
+            placeholder: "",
+            secureTextEntry: type === "password" && !passwordVisible,
+            style: nativeInputControlStyle,
+            underlineColorAndroid: "transparent",
+            value: field.value ?? ""
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime$1.jsx(
+      InputLabel,
+      {
+        animatedValue: labelProgress,
+        disabled,
+        errored: hasError,
+        floating,
+        text: resolvedLabel,
+        className: labelClassName
+      }
+    ),
+    type === "password" ? /* @__PURE__ */ jsxRuntime$1.jsx(
+      reactNative.Pressable,
+      {
+        accessibilityRole: "button",
+        accessibilityLabel: passwordVisible ? "Hide password" : "Show password",
+        className: nativePasswordToggleClassName,
+        disabled,
+        onPress: () => setPasswordVisible((current) => !current),
+        children: /* @__PURE__ */ jsxRuntime$1.jsx(reactNative.Text, { className: nativePasswordToggleTextClassName, children: passwordVisible ? "Hide" : "Show" })
+      }
+    ) : null,
+    /* @__PURE__ */ jsxRuntime$1.jsx(
+      InputResponse,
+      {
+        message: errorText,
+        name: field.name,
+        visibility: Boolean(errorText),
+        variant: "danger",
+        className: responseClassName
+      }
+    )
+  ] });
+}
 
 exports.Button = Button_native_default;
+exports.Checkbox = Checkbox;
 exports.EUIProvider = EUIProvider;
+exports.Form = Form;
+exports.FormResponse = FormResponse;
+exports.Input = Input;
+exports.InputLabel = InputLabel;
+exports.InputResponse = InputResponse;
 exports.resolveWithGlobal = resolveWithGlobal;
 exports.useEUIConfig = useEUIConfig;
 //# sourceMappingURL=index.native.js.map