@scripso-homepad/ui 0.3.6 → 0.3.7

package/dist/index.js

@@ -1,8 +1,259 @@
-import { useRef, useLayoutEffect } from 'react';
-import { StyleSheet, TouchableOpacity, Text, Platform } from 'react-native';
-import { jsx } from 'react/jsx-runtime';
+import { useRef, useState, useLayoutEffect, isValidElement, cloneElement } from 'react';
+import { StyleSheet, Platform, TouchableOpacity, Text, View, TextInput, Pressable, ScrollView, Modal, Dimensions } from 'react-native';
+import Svg, { Path } from 'react-native-svg';
+import { jsx, jsxs } from 'react/jsx-runtime';
 
 // src/components/Button.tsx
+
+// src/icons/arrowUpRightPath.ts
+var ARROW_UP_RIGHT_PATH = "M14.1667 14.1668V5.8335H5.83333M14.1667 5.8335L5.83333 14.1668";
+function ArrowUpRightIcon({
+  size = 20,
+  color = "#08275d",
+  strokeWidth = 2
+}) {
+  return /* @__PURE__ */ jsx(Svg, { width: size, height: size, viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsx(
+    Path,
+    {
+      d: ARROW_UP_RIGHT_PATH,
+      stroke: color,
+      strokeWidth,
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
+
+// src/theme/tokens.ts
+var stormGray = {
+  "0": "#fbfcfc",
+  "0.5": "#eceef0",
+  "1": "#dadde0",
+  "1.5": "#c7cdd1",
+  "2": "#b5bcc1",
+  "3": "#8f9aa3",
+  "4": "#6a7984",
+  "5": "#455765",
+  "6": "#374651",
+  "7": "#29343d",
+  "8": "#1c2328",
+  "8.5": "#151a1e"
+};
+var navy = {
+  "0": "#f8f9fb",
+  "0.5": "#e5e9ef",
+  "1": "#cdd3df",
+  "1.5": "#b4bece",
+  "2": "#9ca8be",
+  "3": "#6a7d9e",
+  "4": "#39527d",
+  "5": "#08275d",
+  "6": "#061f4a",
+  "7": "#051738",
+  "8": "#031025",
+  "8.5": "#020c1c"
+};
+var rubyRed = {
+  "0": "#fff5f6",
+  "0.5": "#f7dddf",
+  "1": "#efc4c8",
+  "1.5": "#e7acb1",
+  "2": "#df939a",
+  "3": "#ce626d",
+  "4": "#be313f",
+  "5": "#ae0011",
+  "6": "#8b000e",
+  "7": "#68000a",
+  "8": "#460007",
+  "8.5": "#340005"
+};
+var emeraldGreen = {
+  "0": "#f0fbf5",
+  "0.5": "#dcf2e5",
+  "1": "#c8e8d5",
+  "1.5": "#b4dfc5",
+  "2": "#a0d5b5",
+  "3": "#77c394",
+  "4": "#4fb074",
+  "5": "#279d54",
+  "6": "#1f7e43",
+  "7": "#175e32",
+  "8": "#103f22",
+  "8.5": "#0c2f19"
+};
+var brand = {
+  slateBlue: "#182e3c",
+  stormGray: stormGray["5"],
+  navy: navy["5"],
+  rubyRed: rubyRed["5"],
+  emeraldGreen: emeraldGreen["5"]
+};
+var colors = {
+  // Brand colors
+  slateBlue: brand.slateBlue,
+  // Emerald Green — Figma scale + brand swatch
+  emeraldGreen0: emeraldGreen["0"],
+  emeraldGreen50: emeraldGreen["0.5"],
+  emeraldGreen100: emeraldGreen["1"],
+  emeraldGreen150: emeraldGreen["1.5"],
+  emeraldGreen200: emeraldGreen["2"],
+  emeraldGreen300: emeraldGreen["3"],
+  emeraldGreen400: emeraldGreen["4"],
+  emeraldGreen500: emeraldGreen["5"],
+  emeraldGreen600: emeraldGreen["6"],
+  emeraldGreen700: emeraldGreen["7"],
+  emeraldGreen800: emeraldGreen["8"],
+  emeraldGreen850: emeraldGreen["8.5"],
+  /** Primary brand emerald green — Figma Emerald Green 5 */
+  emeraldGreen: brand.emeraldGreen,
+  // Ruby Red — Figma scale + brand swatch
+  rubyRed0: rubyRed["0"],
+  rubyRed50: rubyRed["0.5"],
+  rubyRed100: rubyRed["1"],
+  rubyRed150: rubyRed["1.5"],
+  rubyRed200: rubyRed["2"],
+  rubyRed300: rubyRed["3"],
+  rubyRed400: rubyRed["4"],
+  rubyRed500: rubyRed["5"],
+  rubyRed600: rubyRed["6"],
+  rubyRed700: rubyRed["7"],
+  rubyRed800: rubyRed["8"],
+  rubyRed850: rubyRed["8.5"],
+  /** Primary brand ruby red — Figma Ruby Red 5 */
+  rubyRed: brand.rubyRed,
+  // Navy — Figma scale + brand swatch
+  navy0: navy["0"],
+  navy50: navy["0.5"],
+  navy100: navy["1"],
+  navy150: navy["1.5"],
+  navy200: navy["2"],
+  navy300: navy["3"],
+  navy400: navy["4"],
+  navy500: navy["5"],
+  navy600: navy["6"],
+  navy700: navy["7"],
+  navy800: navy["8"],
+  navy850: navy["8.5"],
+  /** Primary brand navy — Figma Navy 5 */
+  navy: brand.navy,
+  // Storm Gray — Figma scale + brand swatch
+  stormGray0: stormGray["0"],
+  stormGray50: stormGray["0.5"],
+  stormGray100: stormGray["1"],
+  stormGray150: stormGray["1.5"],
+  stormGray200: stormGray["2"],
+  stormGray300: stormGray["3"],
+  stormGray400: stormGray["4"],
+  stormGray500: stormGray["5"],
+  /** Figma brand swatch "Storm Gray" — same as `stormGray500` */
+  stormGrayBrand: brand.stormGray,
+  stormGray600: stormGray["6"],
+  stormGray700: stormGray["7"],
+  stormGray800: stormGray["8"],
+  stormGray850: stormGray["8.5"],
+  /** @deprecated Use `stormGray0` */
+  storm0: stormGray["0"],
+  /** @deprecated Use `stormGray50` */
+  storm50: stormGray["0.5"],
+  /** @deprecated Use `stormGray200` */
+  storm200: stormGray["2"],
+  /** @deprecated Use `stormGray300` */
+  storm300: stormGray["3"],
+  /** @deprecated Use `stormGray500` */
+  storm500: stormGray["5"],
+  /** @deprecated Use `stormGray700` */
+  storm700: stormGray["7"],
+  /** @deprecated Use `stormGray850` */
+  storm900: stormGray["8.5"],
+  countrySelectorSelectedBg: `${stormGray["0.5"]}99`,
+  white: "#ffffff",
+  error: "#dc2626",
+  errorDark: "#b3261e",
+  errorLight: "#fee2e2",
+  /** @deprecated Use `rubyRed` */
+  inputError: brand.rubyRed,
+  inputOutlineFocus: navy["0.5"],
+  inputOutlineError: rubyRed["0.5"],
+  warning: "#92400e",
+  warningBg: "#fef3c7",
+  success: "#28a745",
+  successMuted: "#9fd4a8",
+  /** @deprecated Use `emeraldGreen` */
+  green: brand.emeraldGreen,
+  transparent: "transparent"
+};
+var radii = {
+  sm: 8,
+  md: 12,
+  lg: 16,
+  xl: 20,
+  full: 9999
+};
+var spacing = {
+  xs: 4,
+  sm: 8,
+  md: 12,
+  lg: 16,
+  xl: 24,
+  xxl: 32
+};
+var fontSize = {
+  xs: 11,
+  sm: 12,
+  md: 14,
+  base: 16,
+  lg: 18,
+  xl: 24,
+  xxl: 32
+};
+var fontWeight = {
+  regular: "400",
+  medium: "500",
+  semibold: "600",
+  bold: "700"
+};
+var fonts = {
+  sans: "Noto Sans Armenian"
+};
+var labelTypography = {
+  fontFamily: fonts.sans,
+  fontSize: fontSize.sm,
+  fontWeight: fontWeight.medium,
+  lineHeight: fontSize.sm,
+  letterSpacing: 0
+};
+var buttonTypography = {
+  lg: {
+    fontFamily: fonts.sans,
+    fontSize: 14,
+    fontWeight: fontWeight.semibold,
+    lineHeight: 14,
+    letterSpacing: 0
+  },
+  sm: {
+    fontFamily: fonts.sans,
+    fontSize: 12,
+    fontWeight: fontWeight.semibold,
+    lineHeight: 12,
+    letterSpacing: 0
+  }
+};
+var shadows = {
+  card: {
+    shadowColor: colors.navy,
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.05,
+    shadowRadius: 20,
+    elevation: 2
+  },
+  cardLg: {
+    shadowColor: colors.navy,
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.1,
+    shadowRadius: 20,
+    elevation: 4
+  }
+};
 function hasClassList(node) {
   return typeof node === "object" && node !== null && "classList" in node && typeof node.classList?.add === "function";
 }
@@ -18,9 +269,9 @@ function resolveWebElement(ref) {
   }
   return null;
 }
-function useApplyWebClassName(ref, className) {
+function useApplyWebClassName(ref, className, enabled = true) {
   useLayoutEffect(() => {
-    if (Platform.OS !== "web" || !className?.trim()) return;
+    if (!enabled || Platform.OS !== "web" || !className?.trim()) return;
     const element = resolveWebElement(ref);
     if (!element) return;
     const classes = className.trim().split(/\s+/);
@@ -28,14 +279,73 @@ function useApplyWebClassName(ref, className) {
     return () => {
       element.classList.remove(...classes);
     };
-  }, [ref, className]);
+  }, [ref, className, enabled]);
 }
+var variantConfig = {
+  white: {
+    backgroundColor: colors.white,
+    textColor: colors.slateBlue,
+    iconBadgeBackgroundColor: colors.stormGray150,
+    iconColor: colors.navy
+  },
+  primary: {
+    backgroundColor: colors.navy,
+    textColor: colors.stormGray0,
+    iconBadgeBackgroundColor: colors.white,
+    iconColor: colors.navy
+  },
+  green: {
+    backgroundColor: colors.green,
+    textColor: colors.stormGray0,
+    iconBadgeBackgroundColor: colors.white,
+    iconColor: colors.green
+  },
+  gray: {
+    backgroundColor: colors.stormGray50,
+    textColor: colors.slateBlue,
+    iconBadgeBackgroundColor: colors.stormGray150,
+    iconColor: colors.navy
+  }
+};
+var sizeConfig = {
+  lg: {
+    borderRadius: 16,
+    paddingTop: 8,
+    paddingRight: 8,
+    paddingBottom: 8,
+    paddingLeft: 24,
+    paddingHorizontalCentered: 24,
+    minHeight: 52,
+    text: buttonTypography.lg,
+    iconContainerSize: 36,
+    iconContainerRadius: 12,
+    iconContainerPadding: 8,
+    iconSize: 20
+  },
+  sm: {
+    borderRadius: 12,
+    paddingTop: 8,
+    paddingRight: 8,
+    paddingBottom: 8,
+    paddingLeft: 16,
+    paddingHorizontalCentered: 16,
+    minHeight: 48,
+    text: buttonTypography.sm,
+    iconContainerSize: 32,
+    iconContainerRadius: 8,
+    iconContainerPadding: 8,
+    iconSize: 16
+  }
+};
 function Button({
   title,
+  children,
   onPress,
   disabled = false,
   variant = "primary",
-  size = "medium",
+  size = "lg",
+  showIcon = false,
+  icon,
   style,
   textStyle,
   className,
@@ -43,23 +353,38 @@ function Button({
 }) {
   const containerRef = useRef(null);
   const textRef = useRef(null);
+  const preset = variantConfig[variant];
+  const metrics = sizeConfig[size];
   useApplyWebClassName(containerRef, className);
   useApplyWebClassName(textRef, textClassName);
+  const label = typeof children !== "undefined" ? children : title;
+  const hasCustomChildren = typeof children !== "undefined";
+  const hasIcon = showIcon || icon != null;
+  const iconNode = icon ?? /* @__PURE__ */ jsx(ArrowUpRightIcon, { size: metrics.iconSize, color: preset.iconColor });
   const containerStyle = [
     styles.base,
-    variantStyles[variant],
-    sizeStyles[size],
-    disabled && disabledVariantStyles[variant],
+    {
+      borderRadius: metrics.borderRadius,
+      backgroundColor: preset.backgroundColor,
+      minHeight: metrics.minHeight,
+      paddingTop: metrics.paddingTop,
+      paddingBottom: metrics.paddingBottom,
+      paddingLeft: hasIcon ? metrics.paddingLeft : metrics.paddingHorizontalCentered,
+      paddingRight: hasIcon ? metrics.paddingRight : metrics.paddingHorizontalCentered
+    },
+    hasIcon ? styles.withIcon : styles.centered,
+    disabled && styles.disabled,
     style
   ];
   const labelStyle = [
-    textBaseStyles.base,
-    textVariantStyles[variant],
-    textSizeStyles[size],
-    disabled && textDisabledStyles[variant],
+    styles.label,
+    metrics.text,
+    { color: preset.textColor },
+    !hasIcon && styles.labelCentered,
+    hasIcon && styles.labelWithIcon,
     textStyle
   ];
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(
     TouchableOpacity,
     {
       ref: containerRef,
@@ -69,113 +394,806 @@ function Button({
       activeOpacity: 0.7,
       accessibilityRole: "button",
       accessibilityState: { disabled },
-      children: /* @__PURE__ */ jsx(Text, { ref: textRef, style: labelStyle, children: title })
+      children: [
+        hasCustomChildren ? children : /* @__PURE__ */ jsx(Text, { ref: textRef, style: labelStyle, children: label }),
+        hasIcon ? /* @__PURE__ */ jsx(
+          View,
+          {
+            style: [
+              styles.iconContainer,
+              {
+                width: metrics.iconContainerSize,
+                height: metrics.iconContainerSize,
+                borderRadius: metrics.iconContainerRadius,
+                padding: metrics.iconContainerPadding,
+                backgroundColor: preset.iconBadgeBackgroundColor
+              }
+            ],
+            children: iconNode
+          }
+        ) : null
+      ]
     }
   );
 }
 var styles = StyleSheet.create({
   base: {
+    flexDirection: "row",
     alignItems: "center",
-    justifyContent: "center",
-    borderRadius: 8,
     borderWidth: 0
-  }
-});
-var variantStyles = StyleSheet.create({
-  primary: {
-    backgroundColor: "#2563eb"
   },
-  secondary: {
-    backgroundColor: "#4b5563"
+  centered: {
+    justifyContent: "center"
   },
-  outline: {
-    backgroundColor: "transparent",
-    borderWidth: 1,
-    borderColor: "#2563eb"
+  withIcon: {
+    justifyContent: "space-between"
   },
-  ghost: {
-    backgroundColor: "transparent"
+  disabled: {
+    opacity: 0.6
+  },
+  label: {},
+  labelCentered: {
+    textAlign: "center"
+  },
+  labelWithIcon: {
+    flex: 1,
+    flexShrink: 1,
+    marginRight: 8
+  },
+  iconContainer: {
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0
   }
 });
-var sizeStyles = StyleSheet.create({
-  small: {
-    paddingVertical: 8,
-    paddingHorizontal: 16,
-    minWidth: 96
-  },
-  medium: {
-    paddingVertical: 12,
-    paddingHorizontal: 24,
-    minWidth: 120
-  },
-  large: {
-    paddingVertical: 16,
-    paddingHorizontal: 32,
-    minWidth: 160
+var INPUT_HEIGHT = 52;
+var INPUT_ICON_SIZE = 20;
+var INPUT_ICON_GAP = 10;
+var INPUT_OUTLINE_WIDTH = 2;
+function resolveInputVisualState({
+  focused = false,
+  error = false,
+  disabled = false
+}) {
+  if (disabled) return "disabled";
+  if (error) return "error";
+  if (focused) return "focused";
+  return "default";
+}
+function getInputFieldStyles(state) {
+  const outlineBase = {
+    borderRadius: radii.lg + INPUT_OUTLINE_WIDTH,
+    padding: INPUT_OUTLINE_WIDTH,
+    backgroundColor: colors.transparent
+  };
+  switch (state) {
+    case "disabled":
+      return {
+        outline: outlineBase,
+        container: {
+          borderWidth: 1,
+          borderColor: colors.stormGray50,
+          backgroundColor: colors.stormGray50
+        },
+        text: { color: colors.stormGray300 },
+        placeholder: colors.stormGray300,
+        icon: colors.stormGray150
+      };
+    case "error":
+      return {
+        outline: {
+          ...outlineBase,
+          backgroundColor: colors.inputOutlineError
+        },
+        container: {
+          borderWidth: 1,
+          borderColor: colors.inputError,
+          backgroundColor: colors.white
+        },
+        text: { color: colors.inputError },
+        placeholder: colors.stormGray200,
+        icon: colors.inputError
+      };
+    case "focused":
+      return {
+        outline: {
+          ...outlineBase,
+          backgroundColor: colors.inputOutlineFocus
+        },
+        container: {
+          borderWidth: 1,
+          borderColor: colors.navy,
+          backgroundColor: colors.white
+        },
+        text: { color: colors.slateBlue },
+        placeholder: colors.stormGray200,
+        icon: colors.navy
+      };
+    default:
+      return {
+        outline: outlineBase,
+        container: {
+          borderWidth: 1,
+          borderColor: colors.stormGray50,
+          backgroundColor: colors.white
+        },
+        text: { color: colors.slateBlue },
+        placeholder: colors.stormGray200,
+        icon: colors.stormGray150
+      };
   }
-});
-var disabledVariantStyles = StyleSheet.create({
-  primary: {
-    backgroundColor: "#93c5fd",
-    opacity: 0.7
+}
+var inputFieldMetrics = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    height: INPUT_HEIGHT,
+    minHeight: INPUT_HEIGHT,
+    maxHeight: INPUT_HEIGHT,
+    borderRadius: radii.lg,
+    padding: 16,
+    gap: INPUT_ICON_GAP,
+    ...Platform.OS === "web" ? { boxSizing: "border-box" } : null
   },
-  secondary: {
-    backgroundColor: "#9ca3af",
-    opacity: 0.7
+  input: {
+    flex: 1,
+    alignSelf: "stretch",
+    fontFamily: fonts.sans,
+    fontSize: fontSize.md,
+    fontWeight: fontWeight.medium,
+    lineHeight: fontSize.md,
+    paddingVertical: 0,
+    paddingHorizontal: 0,
+    margin: 0,
+    borderWidth: 0,
+    backgroundColor: colors.transparent,
+    ...Platform.OS === "web" ? {
+      height: "100%",
+      minHeight: 0,
+      outlineStyle: "none"
+    } : null
+  }
+});
+function Label({
+  children,
+  required = false,
+  disabled = false,
+  style,
+  className,
+  ...props
+}) {
+  const ref = useRef(null);
+  useApplyWebClassName(ref, className);
+  return /* @__PURE__ */ jsxs(
+    Text,
+    {
+      ref,
+      style: [styles2.label, disabled && styles2.labelDisabled, style],
+      accessibilityRole: "text",
+      ...props,
+      children: [
+        children,
+        required ? /* @__PURE__ */ jsx(Text, { style: styles2.required, children: " *" }) : null
+      ]
+    }
+  );
+}
+var styles2 = StyleSheet.create({
+  label: {
+    ...labelTypography,
+    color: colors.slateBlue
   },
-  outline: {
-    borderColor: "#93c5fd",
-    opacity: 0.7
+  labelDisabled: {
+    color: colors.stormGray400
   },
-  ghost: {
-    opacity: 0.5
+  required: {
+    color: colors.inputError
   }
 });
-var textBaseStyles = StyleSheet.create({
-  base: {
-    fontWeight: "600"
+function renderInputIcon(icon, color) {
+  if (!icon) return null;
+  if (isValidElement(icon)) {
+    return cloneElement(icon, {
+      size: icon.props.size ?? INPUT_ICON_SIZE,
+      color: icon.props.color ?? color
+    });
   }
-});
-var textVariantStyles = StyleSheet.create({
-  primary: {
-    color: "#ffffff"
+  return icon;
+}
+function Input({
+  label,
+  leftIcon,
+  rightIcon,
+  error,
+  hint,
+  containerStyle,
+  style,
+  className,
+  labelClassName,
+  inputClassName,
+  errorClassName,
+  hintClassName,
+  editable = true,
+  onFocus,
+  onBlur,
+  ...props
+}) {
+  const wrapperRef = useRef(null);
+  const inputRef = useRef(null);
+  const helperRef = useRef(null);
+  const [focused, setFocused] = useState(false);
+  useApplyWebClassName(wrapperRef, className);
+  useApplyWebClassName(inputRef, inputClassName);
+  useApplyWebClassName(helperRef, error ? errorClassName : hintClassName);
+  const isDisabled = editable === false;
+  const visualState = resolveInputVisualState({
+    focused,
+    error: Boolean(error),
+    disabled: isDisabled
+  });
+  const fieldStyles = getInputFieldStyles(visualState);
+  const iconColor = fieldStyles.icon;
+  function handleFocus(event) {
+    setFocused(true);
+    onFocus?.(event);
+  }
+  function handleBlur(event) {
+    setFocused(false);
+    onBlur?.(event);
+  }
+  const helperMessage = error ?? hint;
+  return /* @__PURE__ */ jsxs(View, { ref: wrapperRef, style: [styles3.wrapper, containerStyle], children: [
+    label ? /* @__PURE__ */ jsx(Label, { disabled: isDisabled, className: labelClassName, children: label }) : null,
+    /* @__PURE__ */ jsx(View, { style: fieldStyles.outline, children: /* @__PURE__ */ jsxs(View, { style: [inputFieldMetrics.container, fieldStyles.container], children: [
+      leftIcon ? /* @__PURE__ */ jsx(View, { style: styles3.iconSlot, children: renderInputIcon(leftIcon, iconColor) }) : null,
+      /* @__PURE__ */ jsx(
+        TextInput,
+        {
+          ref: inputRef,
+          style: [
+            inputFieldMetrics.input,
+            fieldStyles.text,
+            style
+          ],
+          placeholderTextColor: fieldStyles.placeholder,
+          editable,
+          onFocus: handleFocus,
+          onBlur: handleBlur,
+          accessibilityState: { disabled: isDisabled },
+          ...props
+        }
+      ),
+      rightIcon ? /* @__PURE__ */ jsx(View, { style: styles3.iconSlot, children: renderInputIcon(rightIcon, iconColor) }) : null
+    ] }) }),
+    helperMessage ? /* @__PURE__ */ jsx(Text, { ref: helperRef, style: error ? styles3.error : styles3.hint, children: helperMessage }) : null
+  ] });
+}
+var styles3 = StyleSheet.create({
+  wrapper: {
+    width: "100%",
+    gap: spacing.sm
   },
-  secondary: {
-    color: "#ffffff"
+  iconSlot: {
+    width: INPUT_ICON_SIZE,
+    height: INPUT_ICON_SIZE,
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0
   },
-  outline: {
-    color: "#2563eb"
+  error: {
+    fontSize: 12,
+    lineHeight: 12,
+    color: colors.inputError
   },
-  ghost: {
-    color: "#2563eb"
+  hint: {
+    fontSize: 12,
+    lineHeight: 12,
+    color: colors.stormGray300
   }
 });
-var textSizeStyles = StyleSheet.create({
-  small: {
-    fontSize: 14
+
+// src/data/countries.ts
+var defaultCountry = {
+  code: "AM",
+  name: "Armenia",
+  dialCode: "+374"
+};
+var countries = [
+  defaultCountry,
+  { code: "AF", name: "Afghanistan", dialCode: "+93" },
+  { code: "AL", name: "Albania", dialCode: "+355" },
+  { code: "DZ", name: "Algeria", dialCode: "+213" },
+  { code: "AR", name: "Argentina", dialCode: "+54" },
+  { code: "AU", name: "Australia", dialCode: "+61" },
+  { code: "AT", name: "Austria", dialCode: "+43" },
+  { code: "AZ", name: "Azerbaijan", dialCode: "+994" },
+  { code: "BH", name: "Bahrain", dialCode: "+973" },
+  { code: "BY", name: "Belarus", dialCode: "+375" },
+  { code: "BE", name: "Belgium", dialCode: "+32" },
+  { code: "BR", name: "Brazil", dialCode: "+55" },
+  { code: "BG", name: "Bulgaria", dialCode: "+359" },
+  { code: "CA", name: "Canada", dialCode: "+1" },
+  { code: "CL", name: "Chile", dialCode: "+56" },
+  { code: "CN", name: "China", dialCode: "+86" },
+  { code: "CO", name: "Colombia", dialCode: "+57" },
+  { code: "HR", name: "Croatia", dialCode: "+385" },
+  { code: "CY", name: "Cyprus", dialCode: "+357" },
+  { code: "CZ", name: "Czech Republic", dialCode: "+420" },
+  { code: "DK", name: "Denmark", dialCode: "+45" },
+  { code: "EG", name: "Egypt", dialCode: "+20" },
+  { code: "EE", name: "Estonia", dialCode: "+372" },
+  { code: "FI", name: "Finland", dialCode: "+358" },
+  { code: "FR", name: "France", dialCode: "+33" },
+  { code: "GE", name: "Georgia", dialCode: "+995" },
+  { code: "DE", name: "Germany", dialCode: "+49" },
+  { code: "GR", name: "Greece", dialCode: "+30" },
+  { code: "HK", name: "Hong Kong", dialCode: "+852" },
+  { code: "HU", name: "Hungary", dialCode: "+36" },
+  { code: "IN", name: "India", dialCode: "+91" },
+  { code: "ID", name: "Indonesia", dialCode: "+62" },
+  { code: "IR", name: "Iran", dialCode: "+98" },
+  { code: "IQ", name: "Iraq", dialCode: "+964" },
+  { code: "IE", name: "Ireland", dialCode: "+353" },
+  { code: "IL", name: "Israel", dialCode: "+972" },
+  { code: "IT", name: "Italy", dialCode: "+39" },
+  { code: "JP", name: "Japan", dialCode: "+81" },
+  { code: "JO", name: "Jordan", dialCode: "+962" },
+  { code: "KZ", name: "Kazakhstan", dialCode: "+7" },
+  { code: "KW", name: "Kuwait", dialCode: "+965" },
+  { code: "LV", name: "Latvia", dialCode: "+371" },
+  { code: "LB", name: "Lebanon", dialCode: "+961" },
+  { code: "LT", name: "Lithuania", dialCode: "+370" },
+  { code: "LU", name: "Luxembourg", dialCode: "+352" },
+  { code: "MY", name: "Malaysia", dialCode: "+60" },
+  { code: "MX", name: "Mexico", dialCode: "+52" },
+  { code: "MD", name: "Moldova", dialCode: "+373" },
+  { code: "NL", name: "Netherlands", dialCode: "+31" },
+  { code: "NZ", name: "New Zealand", dialCode: "+64" },
+  { code: "NG", name: "Nigeria", dialCode: "+234" },
+  { code: "NO", name: "Norway", dialCode: "+47" },
+  { code: "PK", name: "Pakistan", dialCode: "+92" },
+  { code: "PS", name: "Palestine", dialCode: "+970" },
+  { code: "PH", name: "Philippines", dialCode: "+63" },
+  { code: "PL", name: "Poland", dialCode: "+48" },
+  { code: "PT", name: "Portugal", dialCode: "+351" },
+  { code: "QA", name: "Qatar", dialCode: "+974" },
+  { code: "RO", name: "Romania", dialCode: "+40" },
+  { code: "RU", name: "Russia", dialCode: "+7" },
+  { code: "SA", name: "Saudi Arabia", dialCode: "+966" },
+  { code: "RS", name: "Serbia", dialCode: "+381" },
+  { code: "SG", name: "Singapore", dialCode: "+65" },
+  { code: "SK", name: "Slovakia", dialCode: "+421" },
+  { code: "SI", name: "Slovenia", dialCode: "+386" },
+  { code: "ZA", name: "South Africa", dialCode: "+27" },
+  { code: "KR", name: "South Korea", dialCode: "+82" },
+  { code: "ES", name: "Spain", dialCode: "+34" },
+  { code: "SE", name: "Sweden", dialCode: "+46" },
+  { code: "CH", name: "Switzerland", dialCode: "+41" },
+  { code: "SY", name: "Syria", dialCode: "+963" },
+  { code: "TW", name: "Taiwan", dialCode: "+886" },
+  { code: "TH", name: "Thailand", dialCode: "+66" },
+  { code: "TR", name: "Turkey", dialCode: "+90" },
+  { code: "UA", name: "Ukraine", dialCode: "+380" },
+  { code: "AE", name: "United Arab Emirates", dialCode: "+971" },
+  { code: "GB", name: "United Kingdom", dialCode: "+44" },
+  { code: "US", name: "United States", dialCode: "+1" },
+  { code: "UZ", name: "Uzbekistan", dialCode: "+998" },
+  { code: "VN", name: "Vietnam", dialCode: "+84" }
+];
+function findCountry(code) {
+  return countries.find((country) => country.code === code) ?? defaultCountry;
+}
+
+// src/icons/chevronDownPath.ts
+var CHEVRON_DOWN_PATH = "M4 6L8 10L12 6";
+function ChevronDownIcon({
+  size = 16,
+  color = "#dadde0",
+  strokeWidth = 2
+}) {
+  return /* @__PURE__ */ jsx(Svg, { width: size, height: size, viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx(
+    Path,
+    {
+      d: CHEVRON_DOWN_PATH,
+      stroke: color,
+      strokeWidth,
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
+
+// src/utils/countryFlag.ts
+function countryCodeToFlagEmoji(code) {
+  const upper = code.trim().toUpperCase();
+  if (upper.length !== 2) return "";
+  return String.fromCodePoint(
+    ...upper.split("").map((char) => 127462 - 65 + char.charCodeAt(0))
+  );
+}
+var COUNTRY_DROPDOWN_SCROLL_CLASS = "hp-country-dropdown-scroll";
+var STYLE_ID = "hp-country-dropdown-scroll-styles";
+var countryDropdownScrollCss = `
+  .${COUNTRY_DROPDOWN_SCROLL_CLASS} {
+    scrollbar-width: thin;
+    scrollbar-color: ${colors.stormGray300} transparent;
+    overflow-y: auto;
+  }
+
+  .${COUNTRY_DROPDOWN_SCROLL_CLASS}::-webkit-scrollbar {
+    width: 4px;
+  }
+
+  .${COUNTRY_DROPDOWN_SCROLL_CLASS}::-webkit-scrollbar-corner {
+    background: transparent;
+  }
+
+  .${COUNTRY_DROPDOWN_SCROLL_CLASS}::-webkit-scrollbar-button,
+  .${COUNTRY_DROPDOWN_SCROLL_CLASS}::-webkit-scrollbar-button:single-button,
+  .${COUNTRY_DROPDOWN_SCROLL_CLASS}::-webkit-scrollbar-button:vertical:start:decrement,
+  .${COUNTRY_DROPDOWN_SCROLL_CLASS}::-webkit-scrollbar-button:vertical:end:increment {
+    display: none;
+    width: 0;
+    height: 0;
+    -webkit-appearance: none;
+    appearance: none;
+  }
+
+  .${COUNTRY_DROPDOWN_SCROLL_CLASS}::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  .${COUNTRY_DROPDOWN_SCROLL_CLASS}::-webkit-scrollbar-thumb {
+    background-color: ${colors.stormGray300};
+    border-radius: 9999px;
+  }
+`;
+function ensureCountryDropdownScrollStyles() {
+  if (Platform.OS !== "web" || typeof document === "undefined") return;
+  if (document.getElementById(STYLE_ID)) return;
+  const style = document.createElement("style");
+  style.id = STYLE_ID;
+  style.textContent = countryDropdownScrollCss;
+  document.head.appendChild(style);
+}
+var DROPDOWN_GAP = 10;
+var DROPDOWN_HEIGHT = 186;
+var DROPDOWN_PADDING = 8;
+var OPTION_GAP = 10;
+var OPTION_HEIGHT = 35;
+var TRIGGER_HEIGHT = 52;
+var CHEVRON_SIZE = 16;
+function resolveDropdownTop(anchor) {
+  const windowHeight = Dimensions.get("window").height;
+  const topBelow = anchor.y + anchor.height + DROPDOWN_GAP;
+  const topAbove = anchor.y - DROPDOWN_GAP - DROPDOWN_HEIGHT;
+  const fitsBelow = topBelow + DROPDOWN_HEIGHT <= windowHeight;
+  if (fitsBelow) return topBelow;
+  if (topAbove >= 0) return topAbove;
+  return Math.max(0, Math.min(topBelow, windowHeight - DROPDOWN_HEIGHT));
+}
+function CountryCodeSelector({
+  value = defaultCountry.code,
+  onValueChange,
+  options = countries,
+  disabled = false,
+  style,
+  className
+}) {
+  const wrapperRef = useRef(null);
+  const triggerRef = useRef(null);
+  const scrollRef = useRef(null);
+  const [open, setOpen] = useState(false);
+  const [anchor, setAnchor] = useState(null);
+  useApplyWebClassName(wrapperRef, className);
+  useApplyWebClassName(
+    scrollRef,
+    COUNTRY_DROPDOWN_SCROLL_CLASS,
+    open && Boolean(anchor)
+  );
+  useLayoutEffect(() => {
+    ensureCountryDropdownScrollStyles();
+  }, []);
+  const selected = findCountry(value);
+  const textColor = disabled ? colors.stormGray200 : colors.slateBlue;
+  function closeDropdown() {
+    setOpen(false);
+    setAnchor(null);
+  }
+  function handleOpen() {
+    if (disabled) return;
+    triggerRef.current?.measureInWindow((x, y, width, height) => {
+      setAnchor({ x, y, width, height });
+      setOpen(true);
+    });
+  }
+  function handleSelect(code) {
+    onValueChange?.(code);
+    closeDropdown();
+  }
+  const dropdownTop = anchor ? resolveDropdownTop(anchor) : 0;
+  const optionList = options.map((item, index) => {
+    const isSelected = item.code === selected.code;
+    const isLast = index === options.length - 1;
+    return /* @__PURE__ */ jsxs(
+      Pressable,
+      {
+        accessibilityRole: "button",
+        onPress: () => handleSelect(item.code),
+        style: [
+          styles4.option,
+          isSelected && styles4.optionSelected,
+          !isLast && styles4.optionSpacing
+        ],
+        children: [
+          /* @__PURE__ */ jsx(Text, { style: styles4.flag, children: countryCodeToFlagEmoji(item.code) }),
+          /* @__PURE__ */ jsx(Text, { style: styles4.optionDialCode, children: item.dialCode })
+        ]
+      },
+      item.code
+    );
+  });
+  const dropdownList = /* @__PURE__ */ jsx(
+    ScrollView,
+    {
+      ref: scrollRef,
+      style: styles4.dropdownScroll,
+      contentContainerStyle: styles4.dropdownContent,
+      keyboardShouldPersistTaps: "handled",
+      showsVerticalScrollIndicator: true,
+      bounces: false,
+      nestedScrollEnabled: true,
+      children: optionList
+    }
+  );
+  return /* @__PURE__ */ jsxs(View, { ref: wrapperRef, style: [styles4.root, style], children: [
+    /* @__PURE__ */ jsxs(
+      Pressable,
+      {
+        ref: triggerRef,
+        accessibilityRole: "button",
+        disabled,
+        onPress: handleOpen,
+        style: [
+          styles4.trigger,
+          disabled ? styles4.triggerDisabled : styles4.triggerEnabled,
+          Platform.OS === "web" ? styles4.triggerWeb : null
+        ],
+        children: [
+          /* @__PURE__ */ jsx(Text, { style: styles4.flag, children: countryCodeToFlagEmoji(selected.code) }),
+          /* @__PURE__ */ jsx(Text, { style: [styles4.dialCode, { color: textColor }], children: selected.dialCode }),
+          /* @__PURE__ */ jsx(ChevronDownIcon, { size: CHEVRON_SIZE, color: colors.stormGray100 })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Modal,
+      {
+        visible: open,
+        transparent: true,
+        animationType: "fade",
+        onRequestClose: closeDropdown,
+        children: /* @__PURE__ */ jsx(Pressable, { style: styles4.overlay, onPress: closeDropdown, children: anchor ? /* @__PURE__ */ jsx(
+          View,
+          {
+            style: [
+              styles4.dropdown,
+              {
+                top: dropdownTop,
+                left: anchor.x,
+                width: anchor.width
+              }
+            ],
+            children: dropdownList
+          }
+        ) : null })
+      }
+    )
+  ] });
+}
+var styles4 = StyleSheet.create({
+  root: {
+    alignSelf: "flex-start",
+    flexShrink: 0
+  },
+  trigger: {
+    flexDirection: "row",
+    alignItems: "center",
+    alignSelf: "flex-start",
+    flexGrow: 0,
+    flexShrink: 0,
+    height: TRIGGER_HEIGHT,
+    borderRadius: radii.lg,
+    borderWidth: 1,
+    padding: spacing.lg,
+    gap: spacing.sm
+  },
+  triggerEnabled: {
+    borderColor: colors.stormGray50,
+    backgroundColor: colors.white
+  },
+  triggerDisabled: {
+    borderColor: colors.stormGray50,
+    backgroundColor: colors.stormGray50
+  },
+  triggerWeb: {
+    width: "max-content"
+  },
+  flag: {
+    fontSize: 18,
+    lineHeight: 22
+  },
+  dialCode: {
+    fontSize: fontSize.md,
+    fontWeight: fontWeight.medium
+  },
+  overlay: {
+    flex: 1,
+    backgroundColor: "transparent"
+  },
+  dropdown: {
+    position: "absolute",
+    height: DROPDOWN_HEIGHT,
+    borderRadius: radii.lg,
+    borderWidth: 1,
+    borderColor: colors.stormGray50,
+    backgroundColor: colors.white,
+    padding: DROPDOWN_PADDING,
+    overflow: "hidden"
+  },
+  dropdownScroll: {
+    flex: 1
   },
-  medium: {
-    fontSize: 16
+  dropdownContent: {
+    flexGrow: 1
   },
-  large: {
-    fontSize: 18
+  option: {
+    flexDirection: "row",
+    alignItems: "center",
+    height: OPTION_HEIGHT,
+    borderRadius: radii.sm,
+    padding: spacing.sm,
+    gap: spacing.sm
+  },
+  optionSpacing: {
+    marginBottom: OPTION_GAP
+  },
+  optionSelected: {
+    backgroundColor: colors.countrySelectorSelectedBg
+  },
+  optionDialCode: {
+    fontFamily: fonts.sans,
+    fontSize: fontSize.md,
+    fontWeight: fontWeight.regular,
+    lineHeight: fontSize.md,
+    letterSpacing: 0,
+    textAlign: "center",
+    color: colors.slateBlue
   }
 });
-var textDisabledStyles = StyleSheet.create({
-  primary: {
-    color: "#e5e7eb"
+function PhoneInput({
+  label,
+  countryCode,
+  onCountryCodeChange,
+  error,
+  hint,
+  containerStyle,
+  style,
+  className,
+  labelClassName,
+  inputClassName,
+  errorClassName,
+  hintClassName,
+  editable = true,
+  onFocus,
+  onBlur,
+  ...props
+}) {
+  const wrapperRef = useRef(null);
+  const inputRef = useRef(null);
+  const helperRef = useRef(null);
+  const [focused, setFocused] = useState(false);
+  useApplyWebClassName(wrapperRef, className);
+  useApplyWebClassName(inputRef, inputClassName);
+  useApplyWebClassName(helperRef, error ? errorClassName : hintClassName);
+  const isDisabled = editable === false;
+  const phoneVisualState = resolveInputVisualState({
+    focused,
+    error: Boolean(error),
+    disabled: isDisabled
+  });
+  const phoneFieldStyles = getInputFieldStyles(phoneVisualState);
+  function handleFocus(event) {
+    setFocused(true);
+    onFocus?.(event);
+  }
+  function handleBlur(event) {
+    setFocused(false);
+    onBlur?.(event);
+  }
+  const helperMessage = error ?? hint;
+  return /* @__PURE__ */ jsxs(View, { ref: wrapperRef, style: [styles5.wrapper, containerStyle], children: [
+    label ? /* @__PURE__ */ jsx(Label, { disabled: isDisabled, className: labelClassName, children: label }) : null,
+    /* @__PURE__ */ jsxs(View, { style: styles5.row, children: [
+      /* @__PURE__ */ jsx(
+        CountryCodeSelector,
+        {
+          value: countryCode,
+          onValueChange: onCountryCodeChange,
+          disabled: isDisabled,
+          style: styles5.countrySelector
+        }
+      ),
+      /* @__PURE__ */ jsxs(View, { style: styles5.phoneColumn, children: [
+        /* @__PURE__ */ jsx(View, { style: [phoneFieldStyles.outline, styles5.phoneOutline], children: /* @__PURE__ */ jsx(
+          View,
+          {
+            style: [
+              inputFieldMetrics.container,
+              phoneFieldStyles.container,
+              styles5.phoneField
+            ],
+            children: /* @__PURE__ */ jsx(
+              TextInput,
+              {
+                ref: inputRef,
+                style: [
+                  inputFieldMetrics.input,
+                  phoneFieldStyles.text,
+                  style
+                ],
+                keyboardType: "phone-pad",
+                placeholderTextColor: phoneFieldStyles.placeholder,
+                editable,
+                onFocus: handleFocus,
+                onBlur: handleBlur,
+                accessibilityState: { disabled: isDisabled },
+                ...props
+              }
+            )
+          }
+        ) }),
+        helperMessage ? /* @__PURE__ */ jsx(Text, { ref: helperRef, style: error ? styles5.error : styles5.hint, children: helperMessage }) : null
+      ] })
+    ] })
+  ] });
+}
+var styles5 = StyleSheet.create({
+  wrapper: {
+    width: "100%",
+    gap: spacing.sm
+  },
+  row: {
+    flexDirection: "row",
+    alignItems: "flex-start",
+    gap: INPUT_ICON_GAP
+  },
+  countrySelector: {
+    flexShrink: 0,
+    alignSelf: "flex-start"
+  },
+  phoneColumn: {
+    flex: 1,
+    gap: spacing.sm
+  },
+  phoneOutline: {
+    width: "100%"
   },
-  secondary: {
-    color: "#f3f4f6"
+  phoneField: {
+    flex: 1
   },
-  outline: {
-    color: "#93c5fd"
+  error: {
+    fontSize: 12,
+    lineHeight: 12,
+    color: colors.inputError
   },
-  ghost: {
-    color: "#93c5fd"
+  hint: {
+    fontSize: 12,
+    lineHeight: 12,
+    color: colors.stormGray300
   }
 });
 
-export { Button };
+export { Button, CountryCodeSelector, Input, Label, PhoneInput, brand, buttonTypography, colors, countries, defaultCountry, emeraldGreen, findCountry, fontSize, fontWeight, fonts, labelTypography, navy, radii, rubyRed, shadows, spacing, stormGray };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map