elseware-ui 3.0.6 → 3.0.7

package/dist/index.native.js

@@ -600,139 +600,6 @@ function Checkbox(checkboxProps) {
     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]";
@@ -876,35 +743,8 @@ function InputResponse({
     }
   ) });
 }
-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
+// src/data/styles/shared.styles.tsx
 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-primary-300/10";
@@ -929,55 +769,49 @@ var nativeInputControlStyle = {
   outlineStyle: "none",
   textAlignVertical: "center"
 };
-function Input(inputProps) {
+function useResolvedDateSelectorConfig({
+  label,
+  placeholder,
+  shape
+}) {
+  const eui = useEUIConfig();
+  return {
+    label: label ?? placeholder,
+    shape: shape ?? eui?.config?.global?.shape ?? "square"
+  };
+}
+function useDateSelectorFieldState(props) {
+  const [field, meta, helpers] = formik.useField(props);
+  return {
+    field,
+    helpers,
+    meta
+  };
+}
+function DateSelector(dateSelectorProps) {
   const {
-    type = "text",
-    label,
-    placeholder,
+    disabled = false,
     inputClassName,
+    label,
     labelClassName,
+    placeholder,
     responseClassName,
-    step: _step,
     shape,
-    disabled = false,
+    styles,
     className,
     onBlur,
-    onFocus,
-    onChange: _onChange,
-    ..._props
-  } = inputProps;
-  const { field, helpers, meta } = useInputFieldState(inputProps);
+    onFocus
+  } = dateSelectorProps;
+  const { field, helpers, meta } = useDateSelectorFieldState(dateSelectorProps);
   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({
+  const labelProgress = react.useRef(new reactNative.Animated.Value(1)).current;
+  const { label: resolvedLabel, shape: resolvedShape } = useResolvedDateSelectorConfig({
     label,
     placeholder,
-    shape,
-    type
-  });
-  const inputType = resolveInputType({
-    passwordVisible,
-    type: resolvedType
+    shape
   });
   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);
@@ -985,7 +819,9 @@ function Input(inputProps) {
   };
   const handleFocus = (event) => {
     setFocused(true);
-    onFocus?.(event);
+    onFocus?.(
+      event
+    );
   };
   return /* @__PURE__ */ jsxRuntime$1.jsxs(reactNative.View, { className: inputRootClassName, children: [
     /* @__PURE__ */ jsxRuntime$1.jsx(
@@ -996,7 +832,8 @@ function Input(inputProps) {
           hasError ? inputFrameErrorClassName : focused ? inputFrameActiveClassName : inputFrameIdleClassName,
           inputShapes[resolvedShape],
           disabled && inputFrameDisabledClassName,
-          className
+          className,
+          styles
         ),
         children: /* @__PURE__ */ jsxRuntime$1.jsx(
           reactNative.TextInput,
@@ -1005,16 +842,14 @@ function Input(inputProps) {
             className: cn(
               inputControlClassName,
               nativeInputControlClassName,
-              type === "password" && nativePasswordInputClassName,
               inputClassName
             ),
             editable: !disabled,
-            keyboardType: inputType === "number" ? "numeric" : "default",
+            keyboardType: "numbers-and-punctuation",
             onBlur: handleBlur,
             onChangeText: (value) => helpers.setValue(value),
             onFocus: handleFocus,
             placeholder: "",
-            secureTextEntry: type === "password" && !passwordVisible,
             style: nativeInputControlStyle,
             underlineColorAndroid: "transparent",
             value: field.value ?? ""
@@ -1028,22 +863,979 @@ function Input(inputProps) {
         animatedValue: labelProgress,
         disabled,
         errored: hasError,
-        floating,
+        floating: true,
         text: resolvedLabel,
         className: labelClassName
       }
     ),
-    type === "password" ? /* @__PURE__ */ jsxRuntime$1.jsx(
-      reactNative.Pressable,
+    /* @__PURE__ */ jsxRuntime$1.jsx(
+      InputResponse,
       {
-        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" })
+        message: errorText,
+        name: field.name,
+        visibility: Boolean(errorText),
+        variant: "danger",
+        className: responseClassName
       }
-    ) : 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 }) });
+}
+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
+  };
+}
+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
+      }
+    )
+  ] });
+}
+function useResolvedInputFileConfig({
+  label,
+  placeholder,
+  shape
+}) {
+  const eui = useEUIConfig();
+  return {
+    label: label ?? placeholder,
+    shape: shape ?? eui?.config?.global?.shape ?? "square"
+  };
+}
+function useInputFileFieldState(props) {
+  const [field, meta, helpers] = formik.useField(props);
+  return {
+    field,
+    helpers,
+    meta
+  };
+}
+function isNativeInputFileValue(file) {
+  return Boolean(file && typeof file === "object");
+}
+function getInputFileName(file) {
+  if (!isNativeInputFileValue(file)) {
+    return "";
+  }
+  if ("name" in file && file.name) {
+    return file.name;
+  }
+  if ("fileName" in file && file.fileName) {
+    return file.fileName;
+  }
+  if ("uri" in file && file.uri) {
+    return file.uri.split("/").filter(Boolean).pop() ?? "";
+  }
+  return "";
+}
+function InputFile(inputFileProps) {
+  const {
+    disabled = false,
+    inputClassName,
+    label,
+    labelClassName,
+    onFileSelect,
+    placeholder,
+    responseClassName,
+    shape,
+    className
+  } = inputFileProps;
+  const { field, meta, helpers } = useInputFileFieldState(inputFileProps);
+  const [focused, setFocused] = react.useState(false);
+  const { label: resolvedLabel, shape: resolvedShape } = useResolvedInputFileConfig({
+    label,
+    placeholder,
+    shape
+  });
+  const hasError = Boolean(meta.touched && meta.error);
+  const errorText = hasError && typeof meta.error === "string" ? meta.error : null;
+  const fileName = getInputFileName(field.value);
+  const floating = focused || Boolean(fileName);
+  const handlePress = async () => {
+    if (disabled || !onFileSelect) {
+      return;
+    }
+    setFocused(true);
+    const selectedFile = await onFileSelect();
+    if (selectedFile !== void 0) {
+      await helpers.setValue(selectedFile);
+      await helpers.setTouched(true);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime$1.jsxs(reactNative.View, { className: inputRootClassName, children: [
+    /* @__PURE__ */ jsxRuntime$1.jsx(
+      reactNative.Pressable,
+      {
+        accessibilityLabel: resolvedLabel,
+        accessibilityRole: "button",
+        disabled,
+        onBlur: () => setFocused(false),
+        onFocus: () => setFocused(true),
+        onPress: () => void handlePress(),
+        className: cn(
+          inputFrameClassName,
+          "justify-center",
+          hasError ? inputFrameErrorClassName : focused ? inputFrameActiveClassName : inputFrameIdleClassName,
+          inputShapes[resolvedShape],
+          disabled && inputFrameDisabledClassName,
+          className
+        ),
+        children: /* @__PURE__ */ jsxRuntime$1.jsx(
+          reactNative.Text,
+          {
+            numberOfLines: 1,
+            className: cn(
+              inputControlClassName,
+              "pt-5 pb-2",
+              !fileName && "text-gray-500 dark:text-gray-300",
+              inputClassName
+            ),
+            style: { includeFontPadding: false },
+            children: fileName
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime$1.jsx(
+      InputLabel,
+      {
+        disabled,
+        errored: hasError,
+        floating,
+        text: resolvedLabel,
+        className: labelClassName
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime$1.jsx(
+      InputResponse,
+      {
+        message: errorText,
+        name: field.name,
+        visibility: Boolean(errorText),
+        variant: "danger",
+        className: responseClassName
+      }
+    )
+  ] });
+}
+function useResolvedSelectConfig({
+  label,
+  placeholder,
+  shape
+}) {
+  const eui = useEUIConfig();
+  return {
+    label: label ?? placeholder,
+    shape: shape ?? eui?.config?.global?.shape ?? "square"
+  };
+}
+function useSelectFieldState(props) {
+  const [field, meta, helpers] = formik.useField(props);
+  return {
+    field,
+    helpers,
+    meta
+  };
+}
+function getSelectOptionLabel(options, value) {
+  const option = options.find((item) => item.value === value);
+  if (!option) {
+    return "";
+  }
+  return String(option.label ?? "");
+}
+function Select(selectProps) {
+  const {
+    disabled = false,
+    inputClassName,
+    label,
+    labelClassName,
+    options,
+    placeholder,
+    responseClassName,
+    shape,
+    styles,
+    className,
+    onBlur,
+    onFocus,
+    ..._props
+  } = selectProps;
+  const { field, helpers, meta } = useSelectFieldState(selectProps);
+  const [focused, setFocused] = react.useState(false);
+  const [open, setOpen] = react.useState(false);
+  const { label: resolvedLabel, shape: resolvedShape } = useResolvedSelectConfig({
+    label,
+    placeholder,
+    shape
+  });
+  const hasError = Boolean(meta.touched && meta.error);
+  const errorText = hasError && typeof meta.error === "string" ? meta.error : null;
+  const selectedLabel = getSelectOptionLabel(options, field.value ?? "");
+  const closeOptions = () => {
+    setOpen(false);
+    setFocused(false);
+    void helpers.setTouched(true);
+  };
+  const handleOpen = () => {
+    if (disabled) {
+      return;
+    }
+    setFocused(true);
+    setOpen(true);
+  };
+  const handleSelect = (option) => {
+    if (option.disabled) {
+      return;
+    }
+    void helpers.setValue(option.value);
+    void helpers.setTouched(true);
+    setOpen(false);
+    setFocused(false);
+  };
+  const handleBlur = (event) => {
+    setFocused(false);
+    void 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.Pressable,
+      {
+        accessibilityLabel: resolvedLabel,
+        accessibilityRole: "button",
+        accessibilityState: { disabled, expanded: open },
+        disabled,
+        onBlur: handleBlur,
+        onFocus: handleFocus,
+        onPress: handleOpen,
+        className: cn(
+          inputFrameClassName,
+          "justify-center",
+          hasError ? inputFrameErrorClassName : focused || open ? inputFrameActiveClassName : inputFrameIdleClassName,
+          inputShapes[resolvedShape],
+          disabled && inputFrameDisabledClassName,
+          className,
+          styles
+        ),
+        children: /* @__PURE__ */ jsxRuntime$1.jsx(
+          reactNative.Text,
+          {
+            numberOfLines: 1,
+            className: cn(
+              inputControlClassName,
+              "pt-5 pb-2",
+              !selectedLabel && "text-gray-500 dark:text-gray-300",
+              inputClassName
+            ),
+            style: { includeFontPadding: false },
+            children: selectedLabel
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime$1.jsx(
+      InputLabel,
+      {
+        disabled,
+        errored: hasError,
+        floating: true,
+        text: resolvedLabel,
+        className: labelClassName
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime$1.jsx(
+      InputResponse,
+      {
+        message: errorText,
+        name: field.name,
+        visibility: Boolean(errorText),
+        variant: "danger",
+        className: responseClassName
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime$1.jsx(
+      reactNative.Modal,
+      {
+        animationType: "fade",
+        onRequestClose: closeOptions,
+        transparent: true,
+        visible: open,
+        children: /* @__PURE__ */ jsxRuntime$1.jsxs(reactNative.View, { className: "flex-1 justify-end bg-black/40 px-4 py-6", children: [
+          /* @__PURE__ */ jsxRuntime$1.jsx(
+            reactNative.Pressable,
+            {
+              accessibilityLabel: "Close select options",
+              accessibilityRole: "button",
+              className: "absolute inset-0",
+              onPress: closeOptions
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime$1.jsx(reactNative.View, { className: "max-h-[70%] overflow-hidden rounded-lg bg-white shadow-xl dark:bg-eui-dark-500", children: /* @__PURE__ */ jsxRuntime$1.jsx(reactNative.ScrollView, { children: options.map((option) => {
+            const selected = option.value === field.value;
+            return /* @__PURE__ */ jsxRuntime$1.jsx(
+              reactNative.Pressable,
+              {
+                accessibilityRole: "button",
+                accessibilityState: {
+                  disabled: option.disabled,
+                  selected
+                },
+                disabled: option.disabled,
+                onPress: () => handleSelect(option),
+                className: cn(
+                  "min-h-12 justify-center border-b border-gray-200 px-4 py-3 dark:border-eui-dark-300",
+                  selected && "bg-eui-secondary-500/10",
+                  option.disabled && "opacity-50"
+                ),
+                children: /* @__PURE__ */ jsxRuntime$1.jsx(reactNative.Text, { className: "text-base font-medium text-gray-950 dark:text-gray-50", children: String(option.label) })
+              },
+              option.value
+            );
+          }) }) })
+        ] })
+      }
+    )
+  ] });
+}
+function useResolvedTagsConfig({
+  label,
+  limit = 10,
+  placeholder,
+  shape
+}) {
+  const eui = useEUIConfig();
+  return {
+    label: label ?? placeholder,
+    limit,
+    shape: shape ?? eui?.config?.global?.shape ?? "square"
+  };
+}
+function useTagsFieldState(props) {
+  const [field, meta, helpers] = formik.useField(props);
+  return {
+    field,
+    helpers,
+    meta
+  };
+}
+function getTagsValue(value) {
+  if (!Array.isArray(value)) {
+    return [];
+  }
+  return value.filter((tag) => typeof tag === "string");
+}
+function addTagToList(tags, value, limit) {
+  const trimmed = value.trim();
+  if (!trimmed || tags.includes(trimmed) || tags.length >= limit) {
+    return tags;
+  }
+  return [...tags, trimmed];
+}
+function removeTagFromList(tags, index) {
+  return tags.filter((_, tagIndex) => tagIndex !== index);
+}
+var nativeTagsInputControlStyle = {
+  ...nativeInputControlStyle,
+  minHeight: 28,
+  paddingBottom: 0,
+  paddingTop: 0
+};
+function Tags(tagsProps) {
+  const {
+    disabled = false,
+    inputClassName,
+    label,
+    labelClassName,
+    limit,
+    placeholder,
+    responseClassName,
+    shape,
+    styles,
+    tagClassName,
+    removeButtonClassName,
+    counterClassName,
+    className,
+    onBlur,
+    onFocus,
+    ..._props
+  } = tagsProps;
+  const { field, helpers, meta } = useTagsFieldState(tagsProps);
+  const [input, setInput] = react.useState("");
+  const [focused, setFocused] = react.useState(false);
+  const {
+    label: resolvedLabel,
+    limit: resolvedLimit,
+    shape: resolvedShape
+  } = useResolvedTagsConfig({
+    label,
+    limit,
+    placeholder,
+    shape
+  });
+  const tags = getTagsValue(field.value);
+  const hasError = Boolean(meta.touched && meta.error);
+  const errorText = hasError && typeof meta.error === "string" ? meta.error : null;
+  const floating = focused || input.length > 0 || tags.length > 0;
+  const handleAddTag = (value = input) => {
+    if (disabled) {
+      return;
+    }
+    const nextTags = addTagToList(tags, value, resolvedLimit);
+    if (nextTags !== tags) {
+      void helpers.setValue(nextTags);
+    }
+    if (value.trim()) {
+      void helpers.setTouched(true);
+    }
+    setInput("");
+  };
+  const handleChangeText = (value) => {
+    if (value.endsWith(",")) {
+      handleAddTag(value.slice(0, -1));
+      return;
+    }
+    setInput(value);
+  };
+  const handleKeyPress = (event) => {
+    if (event.nativeEvent?.key === "Backspace" && input === "" && tags.length) {
+      void helpers.setValue(tags.slice(0, -1));
+      void helpers.setTouched(true);
+    }
+  };
+  const handleRemoveTag = (index) => {
+    if (disabled) {
+      return;
+    }
+    void helpers.setValue(removeTagFromList(tags, index));
+    void helpers.setTouched(true);
+  };
+  const handleBlur = (event) => {
+    setFocused(false);
+    void 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.jsxs(
+      reactNative.View,
+      {
+        className: cn(
+          inputFrameClassName,
+          "h-auto min-h-14 flex-row flex-wrap items-center gap-2 overflow-visible px-3 pt-6 pb-7",
+          hasError ? inputFrameErrorClassName : focused ? inputFrameActiveClassName : inputFrameIdleClassName,
+          inputShapes[resolvedShape],
+          disabled && inputFrameDisabledClassName,
+          className,
+          styles
+        ),
+        children: [
+          tags.map((tag, index) => /* @__PURE__ */ jsxRuntime$1.jsxs(
+            reactNative.View,
+            {
+              className: cn(
+                "max-w-full flex-row items-center gap-1 rounded bg-eui-light-300 px-2 py-1 dark:bg-eui-dark-400",
+                tagClassName
+              ),
+              children: [
+                /* @__PURE__ */ jsxRuntime$1.jsx(
+                  reactNative.Text,
+                  {
+                    className: "shrink text-sm font-medium text-eui-dark-700 dark:text-eui-light-300",
+                    numberOfLines: 1,
+                    style: { includeFontPadding: false },
+                    children: tag
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime$1.jsx(
+                  reactNative.Pressable,
+                  {
+                    accessibilityLabel: `Remove ${tag}`,
+                    accessibilityRole: "button",
+                    className: cn(
+                      "h-5 w-5 items-center justify-center",
+                      disabled && "opacity-50",
+                      removeButtonClassName
+                    ),
+                    disabled,
+                    onPress: () => handleRemoveTag(index),
+                    children: /* @__PURE__ */ jsxRuntime$1.jsx(
+                      reactNative.Text,
+                      {
+                        className: "text-xs font-bold text-eui-danger-500",
+                        style: { includeFontPadding: false },
+                        children: "x"
+                      }
+                    )
+                  }
+                )
+              ]
+            },
+            `${tag}-${index}`
+          )),
+          tags.length < resolvedLimit ? /* @__PURE__ */ jsxRuntime$1.jsx(
+            reactNative.TextInput,
+            {
+              accessibilityLabel: resolvedLabel,
+              className: cn(
+                inputControlClassName,
+                "h-7 w-auto min-w-[120px] flex-1 p-0",
+                inputClassName
+              ),
+              editable: !disabled,
+              onBlur: handleBlur,
+              onChangeText: handleChangeText,
+              onFocus: handleFocus,
+              onKeyPress: handleKeyPress,
+              onSubmitEditing: () => handleAddTag(),
+              placeholder: "",
+              returnKeyType: "done",
+              style: nativeTagsInputControlStyle,
+              underlineColorAndroid: "transparent",
+              value: input
+            }
+          ) : null,
+          /* @__PURE__ */ jsxRuntime$1.jsxs(
+            reactNative.Text,
+            {
+              className: cn(
+                "absolute bottom-3 right-3 text-xs font-semibold text-eui-dark-50",
+                counterClassName
+              ),
+              style: { includeFontPadding: false },
+              children: [
+                tags.length,
+                "/",
+                resolvedLimit
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime$1.jsx(
+      InputLabel,
+      {
+        disabled,
+        errored: hasError,
+        floating,
+        text: resolvedLabel,
+        className: labelClassName
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime$1.jsx(
+      InputResponse,
+      {
+        message: errorText,
+        name: field.name,
+        visibility: Boolean(errorText),
+        variant: "danger",
+        className: responseClassName
+      }
+    )
+  ] });
+}
+function useResolvedTextAreaConfig({
+  label,
+  limit = 1e3,
+  placeholder,
+  shape
+}) {
+  const eui = useEUIConfig();
+  return {
+    label: label ?? placeholder,
+    limit,
+    shape: shape ?? eui?.config?.global?.shape ?? "square"
+  };
+}
+function useTextAreaFieldState(props) {
+  const [field, meta, helpers] = formik.useField(props);
+  return {
+    field,
+    helpers,
+    meta
+  };
+}
+function getTextAreaCharacterCount(value) {
+  return String(value ?? "").length;
+}
+var nativeTextAreaControlStyle = {
+  ...nativeInputControlStyle,
+  minHeight: 128,
+  textAlignVertical: "top"
+};
+function TextArea(textAreaProps) {
+  const {
+    disabled = false,
+    inputClassName,
+    label,
+    labelClassName,
+    limit,
+    placeholder,
+    responseClassName,
+    shape,
+    styles,
+    className,
+    onBlur,
+    onFocus,
+    ..._props
+  } = textAreaProps;
+  const { field, helpers, meta } = useTextAreaFieldState(textAreaProps);
+  const [focused, setFocused] = react.useState(false);
+  const {
+    label: resolvedLabel,
+    limit: resolvedLimit,
+    shape: resolvedShape
+  } = useResolvedTextAreaConfig({
+    label,
+    limit,
+    placeholder,
+    shape
+  });
+  const hasError = Boolean(meta.touched && meta.error);
+  const errorText = hasError && typeof meta.error === "string" ? meta.error : null;
+  const characterCount = getTextAreaCharacterCount(field.value);
+  const floating = focused || characterCount > 0;
+  const handleBlur = (event) => {
+    setFocused(false);
+    void 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.jsxs(
+      reactNative.View,
+      {
+        className: cn(
+          inputFrameClassName,
+          "h-auto min-h-32 px-3",
+          hasError ? inputFrameErrorClassName : focused ? inputFrameActiveClassName : inputFrameIdleClassName,
+          inputShapes[resolvedShape],
+          disabled && inputFrameDisabledClassName,
+          className,
+          styles
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime$1.jsx(
+            reactNative.TextInput,
+            {
+              accessibilityLabel: resolvedLabel,
+              className: cn(inputControlClassName, "min-h-32 pb-8", inputClassName),
+              editable: !disabled,
+              maxLength: resolvedLimit,
+              multiline: true,
+              onBlur: handleBlur,
+              onChangeText: (value) => helpers.setValue(value),
+              onFocus: handleFocus,
+              placeholder: "",
+              style: nativeTextAreaControlStyle,
+              underlineColorAndroid: "transparent",
+              value: field.value ?? ""
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime$1.jsxs(reactNative.Text, { className: "absolute bottom-3 right-3 text-xs font-semibold text-eui-dark-50", children: [
+            characterCount,
+            "/",
+            resolvedLimit
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime$1.jsx(
+      InputLabel,
+      {
+        disabled,
+        errored: hasError,
+        floating,
+        text: resolvedLabel,
+        className: labelClassName
+      }
+    ),
     /* @__PURE__ */ jsxRuntime$1.jsx(
       InputResponse,
       {
@@ -1059,12 +1851,17 @@ function Input(inputProps) {
 
 exports.Button = Button_native_default;
 exports.Checkbox = Checkbox;
+exports.DateSelector = DateSelector;
 exports.EUIProvider = EUIProvider;
 exports.Form = Form;
 exports.FormResponse = FormResponse;
 exports.Input = Input;
+exports.InputFile = InputFile;
 exports.InputLabel = InputLabel;
 exports.InputResponse = InputResponse;
+exports.Select = Select;
+exports.Tags = Tags;
+exports.TextArea = TextArea;
 exports.resolveWithGlobal = resolveWithGlobal;
 exports.useEUIConfig = useEUIConfig;
 //# sourceMappingURL=index.native.js.map