@scripso-homepad/ui 0.3.5 → 0.3.7

package/src/theme/tokens.ts

@@ -0,0 +1,272 @@
+/**
+ * HomePad design tokens — aligned with the Figma design system
+ * (navy / storm gray / slate-blue palette from HomePad brand).
+ */
+
+/** Storm Gray scale — Figma steps 0 → 8.5 */
+export const 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",
+} as const;
+
+export type StormGrayStep = keyof typeof stormGray;
+
+/** Navy scale — Figma steps 0 → 8.5 */
+export const 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",
+} as const;
+
+export type NavyStep = keyof typeof navy;
+
+/** Ruby Red scale — Figma steps 0 → 8.5 */
+export const 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",
+} as const;
+
+export type RubyRedStep = keyof typeof rubyRed;
+
+/** Emerald Green scale — Figma steps 0 → 8.5 */
+export const 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",
+} as const;
+
+export type EmeraldGreenStep = keyof typeof emeraldGreen;
+
+/** Figma brand palette — primary swatch per color family */
+export const brand = {
+  slateBlue: "#182e3c",
+  stormGray: stormGray["5"],
+  navy: navy["5"],
+  rubyRed: rubyRed["5"],
+  emeraldGreen: emeraldGreen["5"],
+} as const;
+
+export const 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",
+} as const;
+
+export const radii = {
+  sm: 8,
+  md: 12,
+  lg: 16,
+  xl: 20,
+  full: 9999,
+} as const;
+
+export const spacing = {
+  xs: 4,
+  sm: 8,
+  md: 12,
+  lg: 16,
+  xl: 24,
+  xxl: 32,
+} as const;
+
+export const fontSize = {
+  xs: 11,
+  sm: 12,
+  md: 14,
+  base: 16,
+  lg: 18,
+  xl: 24,
+  xxl: 32,
+} as const;
+
+export const fontWeight = {
+  regular: "400" as const,
+  medium: "500" as const,
+  semibold: "600" as const,
+  bold: "700" as const,
+};
+
+export const fonts = {
+  sans: "Noto Sans Armenian",
+} as const;
+
+/** Input label typography — matches Figma (Medium, 100% line-height). */
+export const labelTypography = {
+  fontFamily: fonts.sans,
+  fontSize: fontSize.sm,
+  fontWeight: fontWeight.medium,
+  lineHeight: fontSize.sm,
+  letterSpacing: 0,
+} as const;
+
+/** Button label typography — matches Figma (SemiBold, 100% line-height). */
+export const 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,
+  },
+} as const;
+
+export const 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,
+  },
+} as const;

package/src/utils/countryDropdownScrollStyles.ts

@@ -0,0 +1,52 @@
+import { Platform } from "react-native";
+import { colors } from "../theme/tokens";
+
+export const COUNTRY_DROPDOWN_SCROLL_CLASS = "hp-country-dropdown-scroll";
+
+const STYLE_ID = "hp-country-dropdown-scroll-styles";
+
+export const 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;
+  }
+`;
+
+export function ensureCountryDropdownScrollStyles(): void {
+  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);
+}

package/src/utils/countryFlag.ts

@@ -0,0 +1,9 @@
+/** ISO 3166-1 alpha-2 country code → flag emoji (cross-platform). */
+export function countryCodeToFlagEmoji(code: string): string {
+  const upper = code.trim().toUpperCase();
+  if (upper.length !== 2) return "";
+
+  return String.fromCodePoint(
+    ...upper.split("").map((char) => 0x1f1e6 - 65 + char.charCodeAt(0)),
+  );
+}

package/src/utils/useApplyWebClassName.ts

@@ -45,9 +45,10 @@ function resolveWebElement(ref: React.RefObject<unknown>): ClassListElement | nu
 export function useApplyWebClassName(
   ref: React.RefObject<unknown>,
   className?: string,
+  enabled = true,
 ): void {
   useLayoutEffect(() => {
-    if (Platform.OS !== "web" || !className?.trim()) return;
+    if (!enabled || Platform.OS !== "web" || !className?.trim()) return;
 
     const element = resolveWebElement(ref);
     if (!element) return;
@@ -58,5 +59,5 @@ export function useApplyWebClassName(
     return () => {
       element.classList.remove(...classes);
     };
-  }, [ref, className]);
+  }, [ref, className, enabled]);
 }