elseware-ui 2.40.4 → 3.0.1

package/dist/index.native.mjs

@@ -0,0 +1,904 @@
+import { Pressable, View, ActivityIndicator, Text, Animated, Easing, TextInput } from 'react-native';
+import { twMerge } from 'tailwind-merge';
+import { createContext, useState, useContext, useRef, useEffect } from 'react';
+import { jsx } from 'react/jsx-runtime';
+import { jsx as jsx$1, jsxs } from 'nativewind/jsx-runtime';
+import { ErrorMessage, useField } from 'formik';
+
+// src/components/data-entry/button/native/Button.native.tsx
+
+// node_modules/clsx/dist/clsx.mjs
+function r(e) {
+  var t, f, n = "";
+  if ("string" == typeof e || "number" == typeof e) n += e;
+  else if ("object" == typeof e) if (Array.isArray(e)) {
+    var o = e.length;
+    for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
+  } else for (f in e) e[f] && (n && (n += " "), n += f);
+  return n;
+}
+function clsx() {
+  for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
+  return n;
+}
+var clsx_default = clsx;
+function cn(...inputs) {
+  return twMerge(clsx_default(inputs));
+}
+
+// src/utils/styles.ts
+function resolveAppearanceStyles({
+  appearance = "solid",
+  variant = "default",
+  solid,
+  lite,
+  ghost
+}) {
+  switch (appearance) {
+    case "ghost":
+      return ghost[variant];
+    case "lite":
+      return lite[variant];
+    default:
+      return solid[variant];
+  }
+}
+var EUIContext = createContext(null);
+var EUIProvider = ({
+  config,
+  children
+}) => {
+  const [state, setState] = useState(config);
+  return /* @__PURE__ */ jsx(EUIContext.Provider, { value: { config: state, setConfig: setState }, children });
+};
+var useEUIConfig = () => {
+  const ctx = useContext(EUIContext);
+  if (!ctx) {
+    throw new Error("useEUIConfig must be used inside EUIProvider");
+  }
+  return ctx;
+};
+
+// src/components/eui/resolveGlobalConfigs.tsx
+function resolveWithGlobal(config, props, defaults) {
+  return {
+    ...defaults,
+    ...config?.global ?? {},
+    ...props
+  };
+}
+
+// src/components/data-entry/button/base/Button.config.ts
+var buttonModeAppearance = {
+  contained: "solid",
+  "contained-tonal": "lite",
+  outlined: "ghost",
+  text: "ghost"
+};
+function useResolvedButtonConfig({
+  compact = false,
+  mode,
+  variant,
+  appearance,
+  shape,
+  size
+}) {
+  const eui = useEUIConfig();
+  const configuredSize = size ?? eui?.config?.global?.size ?? "md";
+  return {
+    shape: shape ?? eui?.config?.global?.shape ?? "square",
+    size: compact && configuredSize === "md" ? "sm" : configuredSize,
+    variant: variant ?? eui?.config?.global?.variant ?? "success",
+    appearance: appearance ?? (mode ? buttonModeAppearance[mode] : "solid")
+  };
+}
+
+// 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-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",
+  ["primary" /* primary */]: "bg-eui-primary-500/10 border border-eui-primary-500/30 text-eui-primary-400 dark:text-eui-primary-300",
+  ["secondary" /* secondary */]: "bg-eui-secondary-500/10 border border-eui-secondary-500/30 text-eui-secondary-500 dark:text-eui-secondary-400",
+  ["success" /* success */]: "bg-eui-success-500/10 border border-eui-success-500/30 text-eui-success-500 dark:text-eui-success-400",
+  ["danger" /* danger */]: "bg-eui-danger-500/10 border border-eui-danger-500/30 text-eui-danger-500 dark:text-eui-danger-400",
+  ["warning" /* warning */]: "bg-eui-warning-500/10 border border-eui-warning-500/30 text-eui-warning-600 dark:text-eui-warning-400",
+  ["info" /* info */]: "bg-eui-info-500/10 border border-eui-info-500/30 text-eui-info-500 dark:text-eui-info-400",
+  ["light" /* light */]: "bg-white/40 border border-white/30 text-gray-800 dark:bg-white/10 dark:border-white/10 dark:text-gray-100",
+  ["dark" /* dark */]: "bg-eui-dark-500/10 border border-eui-dark-500/30 text-eui-dark-500 dark:text-eui-dark-300"
+};
+var variantsGhost = {
+  ["default" /* default */]: "bg-transparent border border-gray-300 text-gray-700 hover:bg-gray-100 dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-800",
+  ["primary" /* primary */]: "bg-transparent border border-eui-primary-500 text-eui-primary-500 hover:bg-eui-primary-500/10 dark:text-eui-primary-300 dark:border-eui-primary-400",
+  ["secondary" /* secondary */]: "bg-transparent border border-eui-secondary-500 text-eui-secondary-500 hover:bg-eui-secondary-500/10 dark:text-eui-secondary-400 dark:border-eui-secondary-400",
+  ["success" /* success */]: "bg-transparent border border-eui-success-500 text-eui-success-500 hover:bg-eui-success-500/10 dark:text-eui-success-400 dark:border-eui-success-400",
+  ["danger" /* danger */]: "bg-transparent border border-eui-danger-500 text-eui-danger-500 hover:bg-eui-danger-500/10 dark:text-eui-danger-400 dark:border-eui-danger-400",
+  ["warning" /* warning */]: "bg-transparent border border-eui-warning-500 text-eui-warning-600 hover:bg-eui-warning-500/10 dark:text-eui-warning-400 dark:border-eui-warning-400",
+  ["info" /* info */]: "bg-transparent border border-eui-info-500 text-eui-info-500 hover:bg-eui-info-500/10 dark:text-eui-info-400 dark:border-eui-info-400",
+  ["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",
+  ["softRoundedSquare" /* softRoundedSquare */]: "rounded-lg",
+  ["circle" /* circle */]: "rounded-full"
+};
+
+// src/components/data-entry/button/base/Button.styles.ts
+var buttonShapes = shapes;
+var buttonIconSizes = {
+  xs: 14,
+  sm: 16,
+  md: 18,
+  lg: 20,
+  xl: 22
+};
+function resolveButtonVariantStyles({
+  appearance,
+  variant
+}) {
+  return resolveAppearanceStyles({
+    appearance,
+    variant,
+    solid: variantsSolid,
+    lite: variantsLite,
+    ghost: variantsGhost
+  });
+}
+function getButtonLabelColorClassName(className) {
+  return className.split(/\s+/).filter(
+    (token) => token.startsWith("text-") || token.startsWith("dark:text-") || token.startsWith("disabled:text-")
+  ).join(" ");
+}
+
+// src/components/data-entry/button/native/Button.native.styles.ts
+var nativeButtonSizes = {
+  xs: {
+    rootClassName: "min-h-[30px] px-2.5 py-1",
+    labelClassName: "text-xs leading-[14px]",
+    slotClassName: "h-[14px] w-[14px]"
+  },
+  sm: {
+    rootClassName: "min-h-9 px-3 py-1.5",
+    labelClassName: "text-sm leading-4",
+    slotClassName: "h-4 w-4"
+  },
+  md: {
+    rootClassName: "min-h-11 px-4 py-2",
+    labelClassName: "text-[15px] leading-[18px]",
+    slotClassName: "h-[18px] w-[18px]"
+  },
+  lg: {
+    rootClassName: "min-h-[50px] px-[18px] py-3",
+    labelClassName: "text-[17px] leading-5",
+    slotClassName: "h-5 w-5"
+  },
+  xl: {
+    rootClassName: "min-h-14 px-[22px] py-4",
+    labelClassName: "text-[19px] leading-[22px]",
+    slotClassName: "h-[22px] w-[22px]"
+  }
+};
+var nativeLabelBaseStyle = {
+  includeFontPadding: false,
+  textAlignVertical: "center"
+};
+function Button({
+  icon,
+  text,
+  children,
+  loading = false,
+  disabled = false,
+  block = false,
+  compact = false,
+  mode,
+  contentClassName,
+  labelClassName,
+  className,
+  variant,
+  appearance,
+  shape,
+  size,
+  accessibilityRole = "button",
+  accessibilityState,
+  type: _type,
+  onClick: _onClick,
+  onMouseMove: _onMouseMove,
+  onPress,
+  ...rest
+}) {
+  const {
+    shape: resolvedShape,
+    size: resolvedSize,
+    variant: resolvedVariant,
+    appearance: resolvedAppearance
+  } = useResolvedButtonConfig({
+    compact,
+    mode,
+    variant,
+    appearance,
+    shape,
+    size
+  });
+  const metrics = nativeButtonSizes[resolvedSize];
+  const iconSize = buttonIconSizes[resolvedSize];
+  const variantStyles = resolveButtonVariantStyles({
+    appearance: resolvedAppearance,
+    variant: resolvedVariant
+  });
+  const labelColorClassName = getButtonLabelColorClassName(variantStyles);
+  const content = text ?? children;
+  const resolvedIcon = typeof icon === "function" ? icon({ color: "currentColor", size: iconSize }) : icon;
+  return /* @__PURE__ */ jsx$1(
+    Pressable,
+    {
+      ...rest,
+      accessibilityRole,
+      accessibilityState: {
+        disabled: disabled || loading,
+        ...accessibilityState
+      },
+      className: cn(
+        "relative items-center justify-center overflow-hidden",
+        variantStyles,
+        buttonShapes[resolvedShape],
+        metrics.rootClassName,
+        block && "w-full",
+        mode === "text" && "border-transparent bg-transparent",
+        (disabled || loading) && "opacity-55",
+        !disabled && !loading && "active:opacity-80",
+        className
+      ),
+      disabled: disabled || loading,
+      onPress,
+      style: ({ pressed }) => [
+        pressed && !disabled && !loading ? { opacity: 0.82 } : null,
+        disabled || loading ? { opacity: 0.55 } : null
+      ],
+      children: /* @__PURE__ */ jsxs(
+        View,
+        {
+          className: cn(
+            "z-10 flex-row items-center justify-center gap-2",
+            contentClassName
+          ),
+          children: [
+            loading ? /* @__PURE__ */ jsx$1(
+              View,
+              {
+                className: cn(
+                  "shrink-0 items-center justify-center",
+                  metrics.slotClassName
+                ),
+                children: /* @__PURE__ */ jsx$1(ActivityIndicator, { className: labelColorClassName, size: "small" })
+              }
+            ) : null,
+            !loading && resolvedIcon ? /* @__PURE__ */ jsx$1(
+              View,
+              {
+                className: cn(
+                  "shrink-0 items-center justify-center",
+                  metrics.slotClassName
+                ),
+                children: resolvedIcon
+              }
+            ) : null,
+            typeof content === "string" || typeof content === "number" ? /* @__PURE__ */ jsx$1(View, { className: "items-center justify-center", children: /* @__PURE__ */ jsx$1(
+              Text,
+              {
+                className: cn(
+                  "font-bold",
+                  metrics.labelClassName,
+                  labelColorClassName,
+                  labelClassName
+                ),
+                numberOfLines: 1,
+                style: nativeLabelBaseStyle,
+                children: content
+              }
+            ) }) : content
+          ]
+        }
+      )
+    }
+  );
+}
+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] = useField(
+    props
+  );
+  const [singleField, singleMeta, singleHelpers] = 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__ */ jsx$1(
+    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__ */ jsxs(View, { className: cn(checkboxGroupClassName, groupClassName), children: [
+    !isMulti && /* @__PURE__ */ jsxs(
+      Pressable,
+      {
+        accessibilityRole: "checkbox",
+        accessibilityState: {
+          checked: singleChecked,
+          disabled
+        },
+        className: cn(checkboxOptionRowClassName, optionClassName),
+        disabled,
+        onPress: () => singleHelpers.setValue(!singleChecked),
+        children: [
+          /* @__PURE__ */ jsx$1(
+            View,
+            {
+              className: getIndicatorClassName({
+                checked: singleChecked,
+                className,
+                disabled,
+                indicatorClassName,
+                checkedIndicatorClassName,
+                resolvedShape,
+                variantCheckedClassName: variantStyles.checkedClassName
+              }),
+              children: singleChecked ? /* @__PURE__ */ jsx$1(
+                Tick,
+                {
+                  checkedIconClassName,
+                  iconClassName: variantStyles.iconClassName
+                }
+              ) : null
+            }
+          ),
+          resolvedLabel ? /* @__PURE__ */ jsx$1(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__ */ jsxs(
+        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__ */ jsx$1(
+              View,
+              {
+                className: getIndicatorClassName({
+                  checked,
+                  className,
+                  disabled: optionDisabled,
+                  indicatorClassName,
+                  checkedIndicatorClassName,
+                  resolvedShape,
+                  variantCheckedClassName: variantStyles.checkedClassName
+                }),
+                children: checked ? /* @__PURE__ */ jsx$1(
+                  Tick,
+                  {
+                    checkedIconClassName,
+                    iconClassName: variantStyles.iconClassName
+                  }
+                ) : null
+              }
+            ),
+            /* @__PURE__ */ jsx$1(
+              Text,
+              {
+                className: cn(
+                  checkboxLabelClassName,
+                  optionDisabled && "opacity-60",
+                  labelClassName
+                ),
+                children: option.label
+              }
+            )
+          ]
+        },
+        option.value
+      );
+    }),
+    errorText ? /* @__PURE__ */ jsx$1(Text, { className: "px-2 py-1 text-sm font-medium text-eui-danger-500", children: errorText }) : null
+  ] });
+}
+
+// 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__ */ jsx$1(
+    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] = useState(Boolean(visibility));
+  const progress = useRef(new Animated.Value(visibility ? 1 : 0)).current;
+  useEffect(() => {
+    if (visibility) {
+      setMounted(true);
+    }
+    Animated.timing(progress, {
+      duration: visibility ? 180 : 120,
+      easing: visibility ? Easing.out(Easing.cubic) : Easing.in(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__ */ jsx$1(ErrorMessage, { name, children: (errorMessage) => String(errorMessage) });
+  return /* @__PURE__ */ jsx$1(Animated.View, { className: "w-full", style: animatedStyle, children: /* @__PURE__ */ jsx$1(
+    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] = 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] = useState(false);
+  const [passwordVisible, setPasswordVisible] = useState(false);
+  const labelProgress = useRef(
+    new 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;
+  useEffect(() => {
+    Animated.timing(labelProgress, {
+      duration: 190,
+      easing: Easing.out(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__ */ jsxs(View, { className: inputRootClassName, children: [
+    /* @__PURE__ */ jsx$1(
+      View,
+      {
+        className: cn(
+          inputFrameClassName,
+          hasError ? inputFrameErrorClassName : focused ? inputFrameActiveClassName : inputFrameIdleClassName,
+          inputShapes[resolvedShape],
+          disabled && inputFrameDisabledClassName,
+          className
+        ),
+        children: /* @__PURE__ */ jsx$1(
+          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__ */ jsx$1(
+      InputLabel,
+      {
+        animatedValue: labelProgress,
+        disabled,
+        errored: hasError,
+        floating,
+        text: resolvedLabel,
+        className: labelClassName
+      }
+    ),
+    type === "password" ? /* @__PURE__ */ jsx$1(
+      Pressable,
+      {
+        accessibilityRole: "button",
+        accessibilityLabel: passwordVisible ? "Hide password" : "Show password",
+        className: nativePasswordToggleClassName,
+        disabled,
+        onPress: () => setPasswordVisible((current) => !current),
+        children: /* @__PURE__ */ jsx$1(Text, { className: nativePasswordToggleTextClassName, children: passwordVisible ? "Hide" : "Show" })
+      }
+    ) : null,
+    /* @__PURE__ */ jsx$1(
+      InputResponse,
+      {
+        message: errorText,
+        name: field.name,
+        visibility: Boolean(errorText),
+        variant: "danger",
+        className: responseClassName
+      }
+    )
+  ] });
+}
+
+export { Button_native_default as Button, Checkbox, EUIProvider, Input, InputLabel, InputResponse, resolveWithGlobal, useEUIConfig };
+//# sourceMappingURL=index.native.mjs.map
+//# sourceMappingURL=index.native.mjs.map