@scripso-homepad/ui 0.3.6 → 0.3.8

package/src/data/countries.ts

@@ -0,0 +1,98 @@
+export type Country = {
+  code: string;
+  name: string;
+  dialCode: string;
+};
+
+export const defaultCountry: Country = {
+  code: "AM",
+  name: "Armenia",
+  dialCode: "+374",
+};
+
+export const countries: Country[] = [
+  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" },
+];
+
+export function findCountry(code: string): Country {
+  return countries.find((country) => country.code === code) ?? defaultCountry;
+}

package/src/icons/ArrowUpRightIcon.tsx

@@ -0,0 +1,29 @@
+import Svg, { Path } from "react-native-svg";
+import { ARROW_UP_RIGHT_PATH } from "./arrowUpRightPath";
+
+export { ARROW_UP_RIGHT_PATH } from "./arrowUpRightPath";
+
+interface ArrowUpRightIconProps {
+  size?: number;
+  color?: string;
+  strokeWidth?: number;
+}
+
+/** Native — react-native-svg (peer dependency). */
+export function ArrowUpRightIcon({
+  size = 20,
+  color = "#08275d",
+  strokeWidth = 2,
+}: ArrowUpRightIconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 20 20" fill="none">
+      <Path
+        d={ARROW_UP_RIGHT_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}

package/src/icons/ArrowUpRightIcon.web.tsx

@@ -0,0 +1,35 @@
+import { ARROW_UP_RIGHT_PATH } from "./arrowUpRightPath";
+
+interface ArrowUpRightIconProps {
+  size?: number;
+  color?: string;
+  strokeWidth?: number;
+}
+
+/** Web / Storybook — plain SVG (no react-native-svg). */
+export function ArrowUpRightIcon({
+  size = 20,
+  color = "#08275d",
+  strokeWidth = 2,
+}: ArrowUpRightIconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden
+    >
+      <path
+        d={ARROW_UP_RIGHT_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export { ARROW_UP_RIGHT_PATH } from "./arrowUpRightPath";

package/src/icons/ChevronDownIcon.tsx

@@ -0,0 +1,29 @@
+import Svg, { Path } from "react-native-svg";
+import { CHEVRON_DOWN_PATH } from "./chevronDownPath";
+
+export { CHEVRON_DOWN_PATH } from "./chevronDownPath";
+
+interface ChevronDownIconProps {
+  size?: number;
+  color?: string;
+  strokeWidth?: number;
+}
+
+/** Native — react-native-svg (peer dependency). */
+export function ChevronDownIcon({
+  size = 16,
+  color = "#dadde0",
+  strokeWidth = 2,
+}: ChevronDownIconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 16 16" fill="none">
+      <Path
+        d={CHEVRON_DOWN_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}

package/src/icons/ChevronDownIcon.web.tsx

@@ -0,0 +1,35 @@
+import { CHEVRON_DOWN_PATH } from "./chevronDownPath";
+
+interface ChevronDownIconProps {
+  size?: number;
+  color?: string;
+  strokeWidth?: number;
+}
+
+/** Web / Storybook — plain SVG (no react-native-svg). */
+export function ChevronDownIcon({
+  size = 16,
+  color = "#dadde0",
+  strokeWidth = 2,
+}: ChevronDownIconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden
+    >
+      <path
+        d={CHEVRON_DOWN_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export { CHEVRON_DOWN_PATH } from "./chevronDownPath";

package/src/icons/EyeIcon.tsx

@@ -0,0 +1,36 @@
+import Svg, { Path } from "react-native-svg";
+import { EYE_OPEN_OUTLINE_PATH, EYE_OPEN_PUPIL_PATH } from "./eyeIconPaths";
+
+export { EYE_OPEN_OUTLINE_PATH, EYE_OPEN_PUPIL_PATH } from "./eyeIconPaths";
+
+interface EyeIconProps {
+  size?: number;
+  color?: string;
+  strokeWidth?: number;
+}
+
+/** Native — open eye (password hidden). */
+export function EyeIcon({
+  size = 20,
+  color = "#c7cdd1",
+  strokeWidth = 2,
+}: EyeIconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 20 20" fill="none">
+      <Path
+        d={EYE_OPEN_OUTLINE_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <Path
+        d={EYE_OPEN_PUPIL_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}

package/src/icons/EyeIcon.web.tsx

@@ -0,0 +1,42 @@
+import { EYE_OPEN_OUTLINE_PATH, EYE_OPEN_PUPIL_PATH } from "./eyeIconPaths";
+
+interface EyeIconProps {
+  size?: number;
+  color?: string;
+  strokeWidth?: number;
+}
+
+/** Web — open eye (password hidden). */
+export function EyeIcon({
+  size = 20,
+  color = "#c7cdd1",
+  strokeWidth = 2,
+}: EyeIconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden
+    >
+      <path
+        d={EYE_OPEN_OUTLINE_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d={EYE_OPEN_PUPIL_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export { EYE_OPEN_OUTLINE_PATH, EYE_OPEN_PUPIL_PATH } from "./eyeIconPaths";

package/src/icons/EyeOffIcon.tsx

@@ -0,0 +1,29 @@
+import Svg, { Path } from "react-native-svg";
+import { EYE_OFF_PATH } from "./eyeIconPaths";
+
+export { EYE_OFF_PATH } from "./eyeIconPaths";
+
+interface EyeOffIconProps {
+  size?: number;
+  color?: string;
+  strokeWidth?: number;
+}
+
+/** Native — slashed eye (password visible). */
+export function EyeOffIcon({
+  size = 20,
+  color = "#c7cdd1",
+  strokeWidth = 2,
+}: EyeOffIconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <Path
+        d={EYE_OFF_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}

package/src/icons/EyeOffIcon.web.tsx

@@ -0,0 +1,35 @@
+import { EYE_OFF_PATH } from "./eyeIconPaths";
+
+interface EyeOffIconProps {
+  size?: number;
+  color?: string;
+  strokeWidth?: number;
+}
+
+/** Web — slashed eye (password visible). */
+export function EyeOffIcon({
+  size = 20,
+  color = "#c7cdd1",
+  strokeWidth = 2,
+}: EyeOffIconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden
+    >
+      <path
+        d={EYE_OFF_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export { EYE_OFF_PATH } from "./eyeIconPaths";

package/src/icons/KeyIcon.tsx

@@ -0,0 +1,36 @@
+import Svg, { Path } from "react-native-svg";
+import { KEY_ICON_BODY_PATH, KEY_ICON_DOT_PATH } from "./keyIconPaths";
+
+export { KEY_ICON_BODY_PATH, KEY_ICON_DOT_PATH } from "./keyIconPaths";
+
+interface KeyIconProps {
+  size?: number;
+  color?: string;
+  strokeWidth?: number;
+}
+
+/** Native — react-native-svg (peer dependency). */
+export function KeyIcon({
+  size = 20,
+  color = "#c7cdd1",
+  strokeWidth = 2,
+}: KeyIconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 19 19" fill="none">
+      <Path
+        d={KEY_ICON_BODY_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <Path
+        d={KEY_ICON_DOT_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}

package/src/icons/KeyIcon.web.tsx

@@ -0,0 +1,42 @@
+import { KEY_ICON_BODY_PATH, KEY_ICON_DOT_PATH } from "./keyIconPaths";
+
+interface KeyIconProps {
+  size?: number;
+  color?: string;
+  strokeWidth?: number;
+}
+
+/** Web / Storybook — plain SVG (no react-native-svg). */
+export function KeyIcon({
+  size = 20,
+  color = "#c7cdd1",
+  strokeWidth = 2,
+}: KeyIconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 19 19"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden
+    >
+      <path
+        d={KEY_ICON_BODY_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d={KEY_ICON_DOT_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export { KEY_ICON_BODY_PATH, KEY_ICON_DOT_PATH } from "./keyIconPaths";

package/src/icons/arrowUpRightPath.ts

@@ -0,0 +1,2 @@
+export const ARROW_UP_RIGHT_PATH =
+  "M14.1667 14.1668V5.8335H5.83333M14.1667 5.8335L5.83333 14.1668";

package/src/icons/chevronDownPath.ts

@@ -0,0 +1 @@
+export const CHEVRON_DOWN_PATH = "M4 6L8 10L12 6";

package/src/icons/eyeIconPaths.ts

@@ -0,0 +1,8 @@
+export const EYE_OPEN_OUTLINE_PATH =
+  "M1.71835 10.2898C1.6489 10.1027 1.6489 9.89691 1.71835 9.70981C2.39476 8.06969 3.54294 6.66735 5.01732 5.68056C6.4917 4.69378 8.22588 4.16699 10 4.16699C11.7741 4.16699 13.5083 4.69378 14.9827 5.68056C16.4571 6.66735 17.6053 8.06969 18.2817 9.70981C18.3511 9.89691 18.3511 10.1027 18.2817 10.2898C17.6053 11.9299 16.4571 13.3323 14.9827 14.3191C13.5083 15.3058 11.7741 15.8326 10 15.8326C8.22588 15.8326 6.4917 15.3058 5.01732 14.3191C3.54294 13.3323 2.39476 11.9299 1.71835 10.2898Z";
+
+export const EYE_OPEN_PUPIL_PATH =
+  "M10 12.4998C11.3807 12.4998 12.5 11.3805 12.5 9.99981C12.5 8.6191 11.3807 7.49981 10 7.49981C8.6193 7.49981 7.50001 8.6191 7.50001 9.99981C7.50001 11.3805 8.6193 12.4998 10 12.4998Z";
+
+export const EYE_OFF_PATH =
+  "M10.733 5.076C13.0624 4.7984 15.4186 5.29082 17.4419 6.47805C19.4651 7.66528 21.0442 9.48208 21.938 11.651C22.0213 11.8755 22.0213 12.1225 21.938 12.347C21.5705 13.238 21.0848 14.0755 20.494 14.837M14.084 14.158C13.5182 14.7045 12.7604 15.0069 11.9738 15C11.1872 14.9932 10.4348 14.6777 9.87854 14.1215C9.32232 13.5652 9.00681 12.8128 8.99998 12.0262C8.99314 11.2396 9.29553 10.4818 9.842 9.916M17.479 17.499C16.1525 18.2848 14.6725 18.776 13.1394 18.9394C11.6063 19.1028 10.056 18.9345 8.59363 18.4459C7.13131 17.9573 5.79119 17.1599 4.66421 16.1077C3.53723 15.0556 2.64975 13.7734 2.062 12.348C1.97866 12.1235 1.97866 11.8765 2.062 11.652C2.94863 9.50186 4.50867 7.69725 6.508 6.509M2 2L22 22";

package/src/icons/keyIconPaths.ts

@@ -0,0 +1,5 @@
+export const KEY_ICON_BODY_PATH =
+  "M1.48833 13.8769C1.17575 14.1894 1.00009 14.6132 1 15.0552V16.8652C1 17.0862 1.0878 17.2982 1.24408 17.4545C1.40036 17.6107 1.61232 17.6985 1.83333 17.6985H4.33333C4.55435 17.6985 4.76631 17.6107 4.92259 17.4545C5.07887 17.2982 5.16667 17.0862 5.16667 16.8652V16.0319C5.16667 15.8109 5.25446 15.5989 5.41074 15.4426C5.56702 15.2863 5.77899 15.1985 6 15.1985H6.83333C7.05435 15.1985 7.26631 15.1107 7.42259 14.9545C7.57887 14.7982 7.66667 14.5862 7.66667 14.3652V13.5319C7.66667 13.3109 7.75446 13.0989 7.91074 12.9426C8.06702 12.7863 8.27899 12.6985 8.5 12.6985H8.64333C9.08532 12.6984 9.50918 12.5228 9.82167 12.2102L10.5 11.5319C11.6582 11.9353 12.919 11.9338 14.0762 11.5275C15.2334 11.1212 16.2185 10.3342 16.8703 9.29531C17.5221 8.25638 17.802 7.02702 17.6643 5.80832C17.5265 4.58962 16.9793 3.45375 16.112 2.58651C15.2448 1.71928 14.1089 1.17202 12.8902 1.03428C11.6715 0.896534 10.4422 1.17645 9.40323 1.82824C8.3643 2.48003 7.57733 3.4651 7.17104 4.6223C6.76475 5.77951 6.76321 7.04034 7.16667 8.19854L1.48833 13.8769Z";
+
+export const KEY_ICON_DOT_PATH =
+  "M13.0833 6.03187C13.3135 6.03187 13.5 5.84532 13.5 5.61521C13.5 5.38509 13.3135 5.19854 13.0833 5.19854C12.8532 5.19854 12.6667 5.38509 12.6667 5.61521C12.6667 5.84532 12.8532 6.03187 13.0833 6.03187Z";

package/src/index.ts

@@ -4,3 +4,45 @@ export type {
   ButtonSize,
   ButtonVariant,
 } from "./components/Button";
+
+export { Input } from "./components/Input";
+export type { InputProps } from "./components/Input";
+
+export { PhoneInput } from "./components/PhoneInput";
+export type { PhoneInputProps } from "./components/PhoneInput";
+
+export { CountryCodeSelector } from "./components/CountryCodeSelector";
+export type { CountryCodeSelectorProps } from "./components/CountryCodeSelector";
+
+export {
+  countries,
+  defaultCountry,
+  findCountry,
+} from "./data/countries";
+export type { Country } from "./data/countries";
+
+export { Label } from "./components/Label";
+export type { LabelProps } from "./components/Label";
+
+export {
+  colors,
+  brand,
+  emeraldGreen,
+  navy,
+  rubyRed,
+  stormGray,
+  buttonTypography,
+  labelTypography,
+  fonts,
+  fontSize,
+  fontWeight,
+  radii,
+  shadows,
+  spacing,
+} from "./theme/tokens";
+export type {
+  EmeraldGreenStep,
+  NavyStep,
+  RubyRedStep,
+  StormGrayStep,
+} from "./theme/tokens";

package/src/theme/input.ts

@@ -0,0 +1,154 @@
+import { Platform, StyleSheet, type TextStyle, type ViewStyle } from "react-native";
+import { colors, fonts, fontSize, fontWeight, radii } from "./tokens";
+
+export const INPUT_HEIGHT = 52;
+export const INPUT_ICON_SIZE = 20;
+export const INPUT_ICON_GAP = 10;
+export const INPUT_OUTLINE_WIDTH = 2;
+
+export type InputVisualState =
+  | "default"
+  | "focused"
+  | "error"
+  | "disabled";
+
+export interface InputStateFlags {
+  focused?: boolean;
+  error?: boolean;
+  disabled?: boolean;
+}
+
+export function resolveInputVisualState({
+  focused = false,
+  error = false,
+  disabled = false,
+}: InputStateFlags): InputVisualState {
+  if (disabled) return "disabled";
+  if (error) return "error";
+  if (focused) return "focused";
+  return "default";
+}
+
+interface FieldStyleSet {
+  container: ViewStyle;
+  outline: ViewStyle;
+  text: TextStyle;
+  placeholder: string;
+  icon: string;
+}
+
+function createOutlineStyle(ringColor: string): ViewStyle {
+  return {
+    borderRadius: radii.lg + INPUT_OUTLINE_WIDTH,
+    borderWidth: INPUT_OUTLINE_WIDTH,
+    borderColor: ringColor,
+    padding: 0,
+    backgroundColor: colors.transparent,
+    width: "100%",
+    alignSelf: "stretch",
+    ...(Platform.OS !== "web" ? { overflow: "hidden" as const } : null),
+  };
+}
+
+const defaultOutline = createOutlineStyle(colors.transparent);
+
+export function getInputFieldStyles(state: InputVisualState): FieldStyleSet {
+  const containerBase: ViewStyle = {
+    borderRadius: radii.lg,
+    ...(Platform.OS !== "web" ? { overflow: "hidden" as const } : null),
+  };
+
+  switch (state) {
+    case "disabled":
+      return {
+        outline: defaultOutline,
+        container: {
+          ...containerBase,
+          borderWidth: 1,
+          borderColor: colors.stormGray50,
+          backgroundColor: colors.stormGray50,
+        },
+        text: { color: colors.stormGray300 },
+        placeholder: colors.stormGray300,
+        icon: colors.stormGray150,
+      };
+    case "error":
+      return {
+        outline: createOutlineStyle(colors.inputOutlineError),
+        container: {
+          ...containerBase,
+          borderWidth: 1,
+          borderColor: colors.inputError,
+          backgroundColor: colors.white,
+        },
+        text: { color: colors.inputError },
+        placeholder: colors.stormGray200,
+        icon: colors.inputError,
+      };
+    case "focused":
+      return {
+        outline: createOutlineStyle(colors.inputOutlineFocus),
+        container: {
+          ...containerBase,
+          borderWidth: 1,
+          borderColor: colors.navy,
+          backgroundColor: colors.white,
+        },
+        text: { color: colors.slateBlue },
+        placeholder: colors.stormGray200,
+        icon: colors.navy,
+      };
+    default:
+      return {
+        outline: defaultOutline,
+        container: {
+          ...containerBase,
+          borderWidth: 1,
+          borderColor: colors.stormGray50,
+          backgroundColor: colors.white,
+        },
+        text: { color: colors.slateBlue },
+        placeholder: colors.stormGray200,
+        icon: colors.stormGray150,
+      };
+  }
+}
+
+export const 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" } as ViewStyle)
+      : null),
+  },
+  input: {
+    flex: 1,
+    alignSelf: "stretch",
+    fontFamily: fonts.sans,
+    fontSize: fontSize.md,
+    fontWeight: fontWeight.medium,
+    lineHeight: Platform.OS === "web" ? fontSize.md : 20,
+    paddingVertical: 0,
+    paddingHorizontal: 0,
+    margin: 0,
+    borderWidth: 0,
+    backgroundColor: colors.transparent,
+    ...(Platform.OS === "android"
+      ? { includeFontPadding: false }
+      : null),
+    ...(Platform.OS === "web"
+      ? ({
+          height: "100%",
+          minHeight: 0,
+          outlineStyle: "none",
+        } as TextStyle)
+      : null),
+  },
+});