@scripso-homepad/ui 0.3.8 → 0.4.0

package/dist/chunk-C7GHBVMM.js

@@ -0,0 +1,614 @@
+import { useLayoutEffect, useRef, useState, isValidElement, cloneElement } from 'react';
+import { StyleSheet, Platform, Text, Pressable, View, TextInput } from 'react-native';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import Svg, { Path } from 'react-native-svg';
+
+// 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: 18,
+    letterSpacing: 0
+  },
+  sm: {
+    fontFamily: fonts.sans,
+    fontSize: 12,
+    fontWeight: fontWeight.semibold,
+    lineHeight: 16,
+    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";
+}
+function resolveWebElement(ref) {
+  const node = ref.current;
+  if (!node) return null;
+  if (hasClassList(node)) return node;
+  const host = node;
+  if (hasClassList(host._touchableNode)) return host._touchableNode;
+  if (typeof host.getScrollableNode === "function") {
+    const scrollNode = host.getScrollableNode();
+    if (hasClassList(scrollNode)) return scrollNode;
+  }
+  return null;
+}
+function useApplyWebClassName(ref, className, enabled = true) {
+  useLayoutEffect(() => {
+    if (!enabled || Platform.OS !== "web" || !className?.trim()) return;
+    const element = resolveWebElement(ref);
+    if (!element) return;
+    const classes = className.trim().split(/\s+/);
+    element.classList.add(...classes);
+    return () => {
+      element.classList.remove(...classes);
+    };
+  }, [ref, className, enabled]);
+}
+function Label({
+  children,
+  required = false,
+  disabled = false,
+  style,
+  className,
+  ...props
+}) {
+  const ref = useRef(null);
+  useApplyWebClassName(ref, className);
+  return /* @__PURE__ */ jsxs(
+    Text,
+    {
+      ref,
+      style: [styles.label, disabled && styles.labelDisabled, style],
+      accessibilityRole: "text",
+      ...props,
+      children: [
+        children,
+        required ? /* @__PURE__ */ jsx(Text, { style: styles.required, children: " *" }) : null
+      ]
+    }
+  );
+}
+var styles = StyleSheet.create({
+  label: {
+    ...labelTypography,
+    color: colors.slateBlue
+  },
+  labelDisabled: {
+    color: colors.stormGray400
+  },
+  required: {
+    color: colors.inputError
+  }
+});
+
+// src/icons/eyeIconPaths.ts
+var 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";
+var 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";
+var 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";
+function EyeIcon({
+  size = 20,
+  color = "#c7cdd1",
+  strokeWidth = 2
+}) {
+  return /* @__PURE__ */ jsxs(Svg, { width: size, height: size, viewBox: "0 0 20 20", fill: "none", children: [
+    /* @__PURE__ */ jsx(
+      Path,
+      {
+        d: EYE_OPEN_OUTLINE_PATH,
+        stroke: color,
+        strokeWidth,
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Path,
+      {
+        d: EYE_OPEN_PUPIL_PATH,
+        stroke: color,
+        strokeWidth,
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  ] });
+}
+function EyeOffIcon({
+  size = 20,
+  color = "#c7cdd1",
+  strokeWidth = 2
+}) {
+  return /* @__PURE__ */ jsx(Svg, { width: size, height: size, viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx(
+    Path,
+    {
+      d: EYE_OFF_PATH,
+      stroke: color,
+      strokeWidth,
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
+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 createOutlineStyle(ringColor) {
+  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" } : null
+  };
+}
+var defaultOutline = createOutlineStyle(colors.transparent);
+function getInputFieldStyles(state) {
+  const containerBase = {
+    borderRadius: radii.lg,
+    ...Platform.OS !== "web" ? { overflow: "hidden" } : 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
+      };
+  }
+}
+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
+  },
+  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"
+    } : null
+  }
+});
+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
+    });
+  }
+  return icon;
+}
+function Input({
+  label,
+  leftIcon,
+  rightIcon,
+  error,
+  hint,
+  containerStyle,
+  style,
+  className,
+  fieldClassName,
+  fieldStyle,
+  labelClassName,
+  inputClassName,
+  errorClassName,
+  hintClassName,
+  editable = true,
+  secureTextEntry,
+  showPasswordToggle,
+  onFocus,
+  onBlur,
+  ...props
+}) {
+  const wrapperRef = useRef(null);
+  const fieldRef = useRef(null);
+  const inputRef = useRef(null);
+  const helperRef = useRef(null);
+  const [focused, setFocused] = useState(false);
+  const [passwordVisible, setPasswordVisible] = useState(false);
+  useApplyWebClassName(wrapperRef, className);
+  useApplyWebClassName(fieldRef, fieldClassName);
+  useApplyWebClassName(inputRef, inputClassName);
+  useApplyWebClassName(helperRef, error ? errorClassName : hintClassName);
+  const isDisabled = editable === false;
+  const passwordToggleEnabled = secureTextEntry === true && showPasswordToggle !== false && rightIcon == null;
+  const effectiveSecureTextEntry = passwordToggleEnabled ? !passwordVisible : secureTextEntry;
+  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;
+  function togglePasswordVisibility() {
+    if (!isDisabled) {
+      setPasswordVisible((visible) => !visible);
+    }
+  }
+  const trailingIcon = passwordToggleEnabled ? /* @__PURE__ */ jsx(
+    Pressable,
+    {
+      onPress: togglePasswordVisibility,
+      disabled: isDisabled,
+      accessibilityRole: "button",
+      accessibilityLabel: passwordVisible ? "Hide password" : "Show password",
+      hitSlop: 8,
+      style: styles2.iconPressable,
+      children: renderInputIcon(
+        passwordVisible ? /* @__PURE__ */ jsx(EyeOffIcon, {}) : /* @__PURE__ */ jsx(EyeIcon, {}),
+        iconColor
+      )
+    }
+  ) : rightIcon ? renderInputIcon(rightIcon, iconColor) : null;
+  return /* @__PURE__ */ jsxs(View, { ref: wrapperRef, style: [styles2.wrapper, containerStyle], children: [
+    label ? /* @__PURE__ */ jsx(Label, { disabled: isDisabled, className: labelClassName, children: label }) : null,
+    /* @__PURE__ */ jsx(View, { style: fieldStyles.outline, children: /* @__PURE__ */ jsxs(
+      View,
+      {
+        ref: fieldRef,
+        style: [inputFieldMetrics.container, fieldStyles.container, fieldStyle],
+        children: [
+          leftIcon ? /* @__PURE__ */ jsx(View, { style: styles2.iconSlot, children: renderInputIcon(leftIcon, iconColor) }) : null,
+          /* @__PURE__ */ jsx(
+            TextInput,
+            {
+              ref: inputRef,
+              style: [
+                inputFieldMetrics.input,
+                fieldStyles.text,
+                style
+              ],
+              placeholderTextColor: fieldStyles.placeholder,
+              editable,
+              secureTextEntry: effectiveSecureTextEntry,
+              onFocus: handleFocus,
+              onBlur: handleBlur,
+              accessibilityState: { disabled: isDisabled },
+              ...props
+            }
+          ),
+          trailingIcon ? /* @__PURE__ */ jsx(View, { style: styles2.iconSlot, children: trailingIcon }) : null
+        ]
+      }
+    ) }),
+    helperMessage ? /* @__PURE__ */ jsx(Text, { ref: helperRef, style: error ? styles2.error : styles2.hint, children: helperMessage }) : null
+  ] });
+}
+var styles2 = StyleSheet.create({
+  wrapper: {
+    width: "100%",
+    gap: spacing.sm
+  },
+  iconSlot: {
+    width: INPUT_ICON_SIZE,
+    height: INPUT_ICON_SIZE,
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0
+  },
+  iconPressable: {
+    width: INPUT_ICON_SIZE,
+    height: INPUT_ICON_SIZE,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  error: {
+    fontSize: 12,
+    lineHeight: 16,
+    color: colors.inputError
+  },
+  hint: {
+    fontSize: 12,
+    lineHeight: 16,
+    color: colors.stormGray300
+  }
+});
+
+export { INPUT_ICON_GAP, Input, Label, brand, buttonTypography, colors, emeraldGreen, fontSize, fontWeight, fonts, getInputFieldStyles, inputFieldMetrics, labelTypography, navy, radii, resolveInputVisualState, rubyRed, shadows, spacing, stormGray, useApplyWebClassName };
+//# sourceMappingURL=chunk-C7GHBVMM.js.map
+//# sourceMappingURL=chunk-C7GHBVMM.js.map