@ecohouse/ui 0.1.0

package/dist/index.js

@@ -0,0 +1,480 @@
+import { useRef, useLayoutEffect } from 'react';
+import { StyleSheet, Platform, TouchableOpacity, Text, View } 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 = "#082640",
+  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": "#f6fafe",
+  "0.5": "#dee5eb",
+  "1": "#c6d0d8",
+  "1.5": "#afbac5",
+  "2": "#97a5b2",
+  "3": "#677b8c",
+  "4": "#385066",
+  "5": "#082640",
+  "6": "#061e33",
+  "7": "#051726",
+  "8": "#030f1a",
+  "8.5": "#020b13"
+};
+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 typographyScale = {
+  12: { fontSize: 12, lineHeight: 16 },
+  14: { fontSize: 14, lineHeight: 19 },
+  18: { fontSize: 18, lineHeight: 24 },
+  20: { fontSize: 20, lineHeight: 27 },
+  24: { fontSize: 24, lineHeight: 25 },
+  32: { fontSize: 32, lineHeight: 34 }
+};
+var fontWeight = {
+  regular: "400",
+  medium: "500",
+  semibold: "600",
+  bold: "700"
+};
+var fonts = {
+  sans: "Noto Sans Armenian"
+};
+var labelTypography = {
+  fontFamily: fonts.sans,
+  fontSize: typographyScale[12].fontSize,
+  fontWeight: fontWeight.medium,
+  lineHeight: typographyScale[12].lineHeight,
+  letterSpacing: 0
+};
+var buttonTypography = {
+  lg: {
+    fontFamily: fonts.sans,
+    fontSize: typographyScale[14].fontSize,
+    fontWeight: fontWeight.semibold,
+    lineHeight: typographyScale[14].lineHeight,
+    letterSpacing: 0
+  },
+  sm: {
+    fontFamily: fonts.sans,
+    fontSize: typographyScale[12].fontSize,
+    fontWeight: fontWeight.semibold,
+    lineHeight: typographyScale[12].lineHeight,
+    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;
+    let cancelled = false;
+    let rafId = 0;
+    let appliedElement = null;
+    const classes = className.trim().split(/\s+/);
+    const apply = () => {
+      if (cancelled) return;
+      const element = resolveWebElement(ref);
+      if (!element) {
+        rafId = requestAnimationFrame(apply);
+        return;
+      }
+      appliedElement = element;
+      element.classList.add(...classes);
+    };
+    apply();
+    return () => {
+      cancelled = true;
+      if (rafId) cancelAnimationFrame(rafId);
+      appliedElement?.classList.remove(...classes);
+    };
+  }, [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: {
+    /** Matches Tailwind `h-13` so size stays stable before web classNames attach. */
+    minHeight: 52,
+    borderRadius: 16,
+    paddingTop: 8,
+    paddingRight: 8,
+    paddingBottom: 8,
+    paddingLeft: 24,
+    paddingHorizontalCentered: 24,
+    text: buttonTypography.lg,
+    iconContainerSize: 36,
+    iconContainerRadius: 12,
+    iconContainerPadding: 8,
+    iconSize: 20
+  },
+  sm: {
+    minHeight: 40,
+    borderRadius: 12,
+    paddingTop: 8,
+    paddingRight: 8,
+    paddingBottom: 8,
+    paddingLeft: 16,
+    paddingHorizontalCentered: 16,
+    text: buttonTypography.sm,
+    iconContainerSize: 32,
+    iconContainerRadius: 8,
+    iconContainerPadding: 8,
+    iconSize: 16
+  }
+};
+function Button({
+  title,
+  children,
+  onPress,
+  disabled = false,
+  variant = "primary",
+  size = "lg",
+  showIcon = false,
+  icon,
+  style,
+  textStyle,
+  className,
+  textClassName
+}) {
+  const containerRef = useRef(null);
+  const textRef = useRef(null);
+  const preset = variantConfig[variant];
+  const metrics = sizeConfig[size];
+  const label = typeof children !== "undefined" ? children : title;
+  const hasCustomChildren = typeof children !== "undefined";
+  const customIcon = icon != null && typeof icon !== "boolean" ? icon : void 0;
+  const hasIcon = showIcon || icon === true || customIcon != null;
+  const resolvedContainerClassName = [Platform.OS === "web" ? "max-md:px-4!" : "", className].filter(Boolean).join(" ");
+  useApplyWebClassName(containerRef, resolvedContainerClassName || void 0);
+  useApplyWebClassName(textRef, textClassName);
+  const iconNode = customIcon ?? /* @__PURE__ */ jsx(ArrowUpRightIcon, { size: metrics.iconSize, color: preset.iconColor });
+  const containerStyle = [
+    styles.base,
+    {
+      minHeight: metrics.minHeight,
+      borderRadius: metrics.borderRadius,
+      backgroundColor: preset.backgroundColor,
+      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 = [
+    styles.label,
+    metrics.text,
+    { color: preset.textColor },
+    Platform.OS === "android" ? styles.labelAndroid : null,
+    !hasIcon && styles.labelCentered,
+    hasIcon && styles.labelWithIcon,
+    textStyle
+  ];
+  return /* @__PURE__ */ jsxs(
+    TouchableOpacity,
+    {
+      ref: containerRef,
+      style: containerStyle,
+      onPress,
+      disabled,
+      activeOpacity: 0.7,
+      accessibilityRole: "button",
+      accessibilityState: { disabled },
+      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",
+    borderWidth: 0
+  },
+  centered: {
+    justifyContent: "center"
+  },
+  withIcon: {
+    justifyContent: "space-between"
+  },
+  disabled: {
+    opacity: 0.6
+  },
+  label: {},
+  labelAndroid: {
+    includeFontPadding: false
+  },
+  labelCentered: {
+    textAlign: "center"
+  },
+  labelWithIcon: {
+    flex: 1,
+    flexShrink: 1,
+    marginRight: 8
+  },
+  iconContainer: {
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0
+  }
+});
+
+export { ArrowUpRightIcon, Button, brand, buttonTypography, colors, emeraldGreen, fontSize, fontWeight, fonts, labelTypography, navy, radii, rubyRed, shadows, spacing, stormGray, typographyScale };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/icons/arrowUpRightPath.ts","../src/icons/ArrowUpRightIcon.tsx","../src/theme/tokens.ts","../src/utils/useApplyWebClassName.ts","../src/components/Button.tsx"],"names":["Platform","jsx"],"mappings":"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","file":"index.js","sourcesContent":["export const ARROW_UP_RIGHT_PATH = \"M14.1667 14.1668V5.8335H5.83333M14.1667 5.8335L5.83333 14.1668\";\n","import Svg, { Path } from \"react-native-svg\";\nimport { ARROW_UP_RIGHT_PATH } from \"./arrowUpRightPath\";\n\nexport { ARROW_UP_RIGHT_PATH } from \"./arrowUpRightPath\";\n\ninterface ArrowUpRightIconProps {\n  size?: number;\n  color?: string;\n  strokeWidth?: number;\n}\n\n/** Native — react-native-svg (peer dependency). */\nexport function ArrowUpRightIcon({\n  size = 20,\n  color = \"#082640\",\n  strokeWidth = 2,\n}: ArrowUpRightIconProps) {\n  return (\n    <Svg width={size} height={size} viewBox=\"0 0 20 20\" fill=\"none\">\n      <Path\n        d={ARROW_UP_RIGHT_PATH}\n        stroke={color}\n        strokeWidth={strokeWidth}\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    </Svg>\n  );\n}\n","/**\n * EcoHouse design tokens — aligned with the shared design system\n * (navy / storm gray / slate-blue palette).\n */\n\n/** Storm Gray scale — Figma steps 0 → 8.5 */\nexport const stormGray = {\n  \"0\": \"#fbfcfc\",\n  \"0.5\": \"#eceef0\",\n  \"1\": \"#dadde0\",\n  \"1.5\": \"#c7cdd1\",\n  \"2\": \"#b5bcc1\",\n  \"3\": \"#8f9aa3\",\n  \"4\": \"#6a7984\",\n  \"5\": \"#455765\",\n  \"6\": \"#374651\",\n  \"7\": \"#29343d\",\n  \"8\": \"#1c2328\",\n  \"8.5\": \"#151a1e\",\n} as const;\n\nexport type StormGrayStep = keyof typeof stormGray;\n\n/** Navy scale — Figma steps 0 → 8.5 */\nexport const navy = {\n  \"0\": \"#f6fafe\",\n  \"0.5\": \"#dee5eb\",\n  \"1\": \"#c6d0d8\",\n  \"1.5\": \"#afbac5\",\n  \"2\": \"#97a5b2\",\n  \"3\": \"#677b8c\",\n  \"4\": \"#385066\",\n  \"5\": \"#082640\",\n  \"6\": \"#061e33\",\n  \"7\": \"#051726\",\n  \"8\": \"#030f1a\",\n  \"8.5\": \"#020b13\",\n} as const;\n\nexport type NavyStep = keyof typeof navy;\n\n/** Ruby Red scale — Figma steps 0 → 8.5 */\nexport const rubyRed = {\n  \"0\": \"#fff5f6\",\n  \"0.5\": \"#f7dddf\",\n  \"1\": \"#efc4c8\",\n  \"1.5\": \"#e7acb1\",\n  \"2\": \"#df939a\",\n  \"3\": \"#ce626d\",\n  \"4\": \"#be313f\",\n  \"5\": \"#ae0011\",\n  \"6\": \"#8b000e\",\n  \"7\": \"#68000a\",\n  \"8\": \"#460007\",\n  \"8.5\": \"#340005\",\n} as const;\n\nexport type RubyRedStep = keyof typeof rubyRed;\n\n/** Emerald Green scale — Figma steps 0 → 8.5 */\nexport const emeraldGreen = {\n  \"0\": \"#f0fbf5\",\n  \"0.5\": \"#dcf2e5\",\n  \"1\": \"#c8e8d5\",\n  \"1.5\": \"#b4dfc5\",\n  \"2\": \"#a0d5b5\",\n  \"3\": \"#77c394\",\n  \"4\": \"#4fb074\",\n  \"5\": \"#279d54\",\n  \"6\": \"#1f7e43\",\n  \"7\": \"#175e32\",\n  \"8\": \"#103f22\",\n  \"8.5\": \"#0c2f19\",\n} as const;\n\nexport type EmeraldGreenStep = keyof typeof emeraldGreen;\n\n/** Figma brand palette — primary swatch per color family */\nexport const brand = {\n  slateBlue: \"#182e3c\",\n  stormGray: stormGray[\"5\"],\n  navy: navy[\"5\"],\n  rubyRed: rubyRed[\"5\"],\n  emeraldGreen: emeraldGreen[\"5\"],\n} as const;\n\nexport const colors = {\n  // Brand colors\n  slateBlue: brand.slateBlue,\n\n  // Emerald Green — Figma scale + brand swatch\n  emeraldGreen0: emeraldGreen[\"0\"],\n  emeraldGreen50: emeraldGreen[\"0.5\"],\n  emeraldGreen100: emeraldGreen[\"1\"],\n  emeraldGreen150: emeraldGreen[\"1.5\"],\n  emeraldGreen200: emeraldGreen[\"2\"],\n  emeraldGreen300: emeraldGreen[\"3\"],\n  emeraldGreen400: emeraldGreen[\"4\"],\n  emeraldGreen500: emeraldGreen[\"5\"],\n  emeraldGreen600: emeraldGreen[\"6\"],\n  emeraldGreen700: emeraldGreen[\"7\"],\n  emeraldGreen800: emeraldGreen[\"8\"],\n  emeraldGreen850: emeraldGreen[\"8.5\"],\n\n  /** Primary brand emerald green — Figma Emerald Green 5 */\n  emeraldGreen: brand.emeraldGreen,\n\n  // Ruby Red — Figma scale + brand swatch\n  rubyRed0: rubyRed[\"0\"],\n  rubyRed50: rubyRed[\"0.5\"],\n  rubyRed100: rubyRed[\"1\"],\n  rubyRed150: rubyRed[\"1.5\"],\n  rubyRed200: rubyRed[\"2\"],\n  rubyRed300: rubyRed[\"3\"],\n  rubyRed400: rubyRed[\"4\"],\n  rubyRed500: rubyRed[\"5\"],\n  rubyRed600: rubyRed[\"6\"],\n  rubyRed700: rubyRed[\"7\"],\n  rubyRed800: rubyRed[\"8\"],\n  rubyRed850: rubyRed[\"8.5\"],\n\n  /** Primary brand ruby red — Figma Ruby Red 5 */\n  rubyRed: brand.rubyRed,\n\n  // Navy — Figma scale + brand swatch\n  navy0: navy[\"0\"],\n  navy50: navy[\"0.5\"],\n  navy100: navy[\"1\"],\n  navy150: navy[\"1.5\"],\n  navy200: navy[\"2\"],\n  navy300: navy[\"3\"],\n  navy400: navy[\"4\"],\n  navy500: navy[\"5\"],\n  navy600: navy[\"6\"],\n  navy700: navy[\"7\"],\n  navy800: navy[\"8\"],\n  navy850: navy[\"8.5\"],\n\n  /** Primary brand navy — Figma Navy 5 */\n  navy: brand.navy,\n\n  // Storm Gray — Figma scale + brand swatch\n  stormGray0: stormGray[\"0\"],\n  stormGray50: stormGray[\"0.5\"],\n  stormGray100: stormGray[\"1\"],\n  stormGray150: stormGray[\"1.5\"],\n  stormGray200: stormGray[\"2\"],\n  stormGray300: stormGray[\"3\"],\n  stormGray400: stormGray[\"4\"],\n  stormGray500: stormGray[\"5\"],\n  /** Figma brand swatch \"Storm Gray\" — same as `stormGray500` */\n  stormGrayBrand: brand.stormGray,\n  stormGray600: stormGray[\"6\"],\n  stormGray700: stormGray[\"7\"],\n  stormGray800: stormGray[\"8\"],\n  stormGray850: stormGray[\"8.5\"],\n\n  /** @deprecated Use `stormGray0` */\n  storm0: stormGray[\"0\"],\n  /** @deprecated Use `stormGray50` */\n  storm50: stormGray[\"0.5\"],\n  /** @deprecated Use `stormGray200` */\n  storm200: stormGray[\"2\"],\n  /** @deprecated Use `stormGray300` */\n  storm300: stormGray[\"3\"],\n  /** @deprecated Use `stormGray500` */\n  storm500: stormGray[\"5\"],\n  /** @deprecated Use `stormGray700` */\n  storm700: stormGray[\"7\"],\n  /** @deprecated Use `stormGray850` */\n  storm900: stormGray[\"8.5\"],\n\n  countrySelectorSelectedBg: `${stormGray[\"0.5\"]}99`,\n\n  white: \"#ffffff\",\n  error: \"#dc2626\",\n  errorDark: \"#b3261e\",\n  errorLight: \"#fee2e2\",\n  /** @deprecated Use `rubyRed` */\n  inputError: brand.rubyRed,\n  inputOutlineFocus: navy[\"0.5\"],\n  inputOutlineError: rubyRed[\"0.5\"],\n  warning: \"#92400e\",\n  warningBg: \"#fef3c7\",\n  success: \"#28a745\",\n  successMuted: \"#9fd4a8\",\n  /** @deprecated Use `emeraldGreen` */\n  green: brand.emeraldGreen,\n  transparent: \"transparent\",\n} as const;\n\nexport const radii = {\n  sm: 8,\n  md: 12,\n  lg: 16,\n  xl: 20,\n  full: 9999,\n} as const;\n\nexport const spacing = {\n  xs: 4,\n  sm: 8,\n  md: 12,\n  lg: 16,\n  xl: 24,\n  xxl: 32,\n} as const;\n\nexport const fontSize = {\n  xs: 11,\n  sm: 12,\n  md: 14,\n  base: 16,\n  lg: 18,\n  xl: 24,\n  xxl: 32,\n} as const;\n\n/**\n * Canonical Homepad type scale (matches `.typography-*` in `src/web/styles/typography.css`).\n * font-size / line-height pairs:\n * 12/16 · 14/19 · 18/24 · 20/27 · 24/25 · 32/34\n */\nexport const typographyScale = {\n  12: { fontSize: 12, lineHeight: 16 },\n  14: { fontSize: 14, lineHeight: 19 },\n  18: { fontSize: 18, lineHeight: 24 },\n  20: { fontSize: 20, lineHeight: 27 },\n  24: { fontSize: 24, lineHeight: 25 },\n  32: { fontSize: 32, lineHeight: 34 },\n} as const;\n\nexport const fontWeight = {\n  regular: \"400\" as const,\n  medium: \"500\" as const,\n  semibold: \"600\" as const,\n  bold: \"700\" as const,\n};\n\nexport const fonts = {\n  sans: \"Noto Sans Armenian\",\n} as const;\n\n/** Input label typography — Medium, typography-12 scale. */\nexport const labelTypography = {\n  fontFamily: fonts.sans,\n  fontSize: typographyScale[12].fontSize,\n  fontWeight: fontWeight.medium,\n  lineHeight: typographyScale[12].lineHeight,\n  letterSpacing: 0,\n} as const;\n\n/** Button label typography — SemiBold. */\nexport const buttonTypography = {\n  lg: {\n    fontFamily: fonts.sans,\n    fontSize: typographyScale[14].fontSize,\n    fontWeight: fontWeight.semibold,\n    lineHeight: typographyScale[14].lineHeight,\n    letterSpacing: 0,\n  },\n  sm: {\n    fontFamily: fonts.sans,\n    fontSize: typographyScale[12].fontSize,\n    fontWeight: fontWeight.semibold,\n    lineHeight: typographyScale[12].lineHeight,\n    letterSpacing: 0,\n  },\n} as const;\n\nexport const shadows = {\n  card: {\n    shadowColor: colors.navy,\n    shadowOffset: { width: 0, height: 4 },\n    shadowOpacity: 0.05,\n    shadowRadius: 20,\n    elevation: 2,\n  },\n  cardLg: {\n    shadowColor: colors.navy,\n    shadowOffset: { width: 0, height: 4 },\n    shadowOpacity: 0.1,\n    shadowRadius: 20,\n    elevation: 4,\n  },\n} as const;\n","import { useLayoutEffect } from \"react\";\nimport { Platform } from \"react-native\";\n\ninterface ClassListElement {\n  classList: {\n    add: (...classes: string[]) => void;\n    remove: (...classes: string[]) => void;\n  };\n}\n\nfunction hasClassList(node: unknown): node is ClassListElement {\n  return (\n    typeof node === \"object\" &&\n    node !== null &&\n    \"classList\" in node &&\n    typeof (node as ClassListElement).classList?.add === \"function\"\n  );\n}\n\nfunction resolveWebElement(ref: React.RefObject<unknown>): ClassListElement | null {\n  const node = ref.current;\n  if (!node) return null;\n\n  if (hasClassList(node)) return node;\n\n  const host = node as {\n    _touchableNode?: unknown;\n    getScrollableNode?: () => unknown;\n  };\n\n  if (hasClassList(host._touchableNode)) return host._touchableNode;\n\n  if (typeof host.getScrollableNode === \"function\") {\n    const scrollNode = host.getScrollableNode();\n    if (hasClassList(scrollNode)) return scrollNode;\n  }\n\n  return null;\n}\n\n/**\n * Applies CSS class names to the underlying DOM node on web.\n * Keeps TouchableOpacity/Text as the render path so default RN styles stay intact.\n *\n * Retries via rAF when the host node is not ready yet — otherwise classes like\n * `h-13` / `w-full` would only land after a later re-render (e.g. typing in a form),\n * which visibly changes button size.\n */\nexport function useApplyWebClassName(\n  ref: React.RefObject<unknown>,\n  className?: string,\n  enabled = true,\n): void {\n  useLayoutEffect(() => {\n    if (!enabled || Platform.OS !== \"web\" || !className?.trim()) return;\n\n    let cancelled = false;\n    let rafId = 0;\n    let appliedElement: ClassListElement | null = null;\n    const classes = className.trim().split(/\\s+/);\n\n    const apply = () => {\n      if (cancelled) return;\n\n      const element = resolveWebElement(ref);\n      if (!element) {\n        rafId = requestAnimationFrame(apply);\n        return;\n      }\n\n      appliedElement = element;\n      element.classList.add(...classes);\n    };\n\n    apply();\n\n    return () => {\n      cancelled = true;\n      if (rafId) cancelAnimationFrame(rafId);\n      appliedElement?.classList.remove(...classes);\n    };\n  }, [ref, className, enabled]);\n}\n","import { useRef, type ComponentRef, type ReactNode } from \"react\";\nimport {\n  Platform,\n  StyleSheet,\n  Text,\n  TouchableOpacity,\n  View,\n  type GestureResponderEvent,\n  type StyleProp,\n  type TextStyle,\n  type ViewStyle,\n} from \"react-native\";\nimport { ArrowUpRightIcon } from \"../icons/ArrowUpRightIcon\";\nimport { colors, buttonTypography } from \"../theme/tokens\";\nimport { useApplyWebClassName } from \"../utils/useApplyWebClassName\";\n\nexport type ButtonVariant = \"white\" | \"primary\" | \"green\" | \"gray\";\nexport type ButtonSize = \"lg\" | \"sm\";\n\nexport interface ButtonProps {\n  title?: string;\n  children?: ReactNode;\n  onPress: (event: GestureResponderEvent) => void;\n  disabled?: boolean;\n  variant?: ButtonVariant;\n  size?: ButtonSize;\n  showIcon?: boolean;\n  /** Custom icon inside the badge. Defaults to `ArrowUpRightIcon` when `showIcon` is true. */\n  icon?: ReactNode;\n  style?: StyleProp<ViewStyle>;\n  textStyle?: StyleProp<TextStyle>;\n  className?: string;\n  textClassName?: string;\n}\n\ntype VariantStyleSet = {\n  backgroundColor: string;\n  textColor: string;\n  iconBadgeBackgroundColor: string;\n  iconColor: string;\n};\n\nconst variantConfig: Record<ButtonVariant, VariantStyleSet> = {\n  white: {\n    backgroundColor: colors.white,\n    textColor: colors.slateBlue,\n    iconBadgeBackgroundColor: colors.stormGray150,\n    iconColor: colors.navy,\n  },\n  primary: {\n    backgroundColor: colors.navy,\n    textColor: colors.stormGray0,\n    iconBadgeBackgroundColor: colors.white,\n    iconColor: colors.navy,\n  },\n  green: {\n    backgroundColor: colors.green,\n    textColor: colors.stormGray0,\n    iconBadgeBackgroundColor: colors.white,\n    iconColor: colors.green,\n  },\n  gray: {\n    backgroundColor: colors.stormGray50,\n    textColor: colors.slateBlue,\n    iconBadgeBackgroundColor: colors.stormGray150,\n    iconColor: colors.navy,\n  },\n};\n\nconst sizeConfig = {\n  lg: {\n    /** Matches Tailwind `h-13` so size stays stable before web classNames attach. */\n    minHeight: 52,\n    borderRadius: 16,\n    paddingTop: 8,\n    paddingRight: 8,\n    paddingBottom: 8,\n    paddingLeft: 24,\n    paddingHorizontalCentered: 24,\n    text: buttonTypography.lg,\n    iconContainerSize: 36,\n    iconContainerRadius: 12,\n    iconContainerPadding: 8,\n    iconSize: 20,\n  },\n  sm: {\n    minHeight: 40,\n    borderRadius: 12,\n    paddingTop: 8,\n    paddingRight: 8,\n    paddingBottom: 8,\n    paddingLeft: 16,\n    paddingHorizontalCentered: 16,\n    text: buttonTypography.sm,\n    iconContainerSize: 32,\n    iconContainerRadius: 8,\n    iconContainerPadding: 8,\n    iconSize: 16,\n  },\n} as const;\n\nexport function Button({\n  title,\n  children,\n  onPress,\n  disabled = false,\n  variant = \"primary\",\n  size = \"lg\",\n  showIcon = false,\n  icon,\n  style,\n  textStyle,\n  className,\n  textClassName,\n}: ButtonProps) {\n  const containerRef = useRef<ComponentRef<typeof TouchableOpacity>>(null);\n  const textRef = useRef<ComponentRef<typeof Text>>(null);\n  const preset = variantConfig[variant];\n  const metrics = sizeConfig[size];\n\n  const label = typeof children !== \"undefined\" ? children : title;\n  const hasCustomChildren = typeof children !== \"undefined\";\n  const customIcon = icon != null && typeof icon !== \"boolean\" ? icon : undefined;\n  const hasIcon = showIcon || icon === true || customIcon != null;\n  const resolvedContainerClassName = [Platform.OS === \"web\" ? \"max-md:px-4!\" : \"\", className]\n    .filter(Boolean)\n    .join(\" \");\n\n  useApplyWebClassName(containerRef, resolvedContainerClassName || undefined);\n  useApplyWebClassName(textRef, textClassName);\n\n  const iconNode = customIcon ?? (\n    <ArrowUpRightIcon size={metrics.iconSize} color={preset.iconColor} />\n  );\n\n  const containerStyle = [\n    styles.base,\n    {\n      minHeight: metrics.minHeight,\n      borderRadius: metrics.borderRadius,\n      backgroundColor: preset.backgroundColor,\n      paddingTop: metrics.paddingTop,\n      paddingBottom: metrics.paddingBottom,\n      paddingLeft: hasIcon ? metrics.paddingLeft : metrics.paddingHorizontalCentered,\n      paddingRight: hasIcon ? metrics.paddingRight : metrics.paddingHorizontalCentered,\n    },\n    hasIcon ? styles.withIcon : styles.centered,\n    disabled && styles.disabled,\n    style,\n  ];\n\n  const labelStyle = [\n    styles.label,\n    metrics.text,\n    { color: preset.textColor },\n    Platform.OS === \"android\" ? styles.labelAndroid : null,\n    !hasIcon && styles.labelCentered,\n    hasIcon && styles.labelWithIcon,\n    textStyle,\n  ];\n\n  return (\n    <TouchableOpacity\n      ref={containerRef}\n      style={containerStyle}\n      onPress={onPress}\n      disabled={disabled}\n      activeOpacity={0.7}\n      accessibilityRole=\"button\"\n      accessibilityState={{ disabled }}\n    >\n      {hasCustomChildren ? (\n        children\n      ) : (\n        <Text ref={textRef} style={labelStyle}>\n          {label}\n        </Text>\n      )}\n\n      {hasIcon ? (\n        <View\n          style={[\n            styles.iconContainer,\n            {\n              width: metrics.iconContainerSize,\n              height: metrics.iconContainerSize,\n              borderRadius: metrics.iconContainerRadius,\n              padding: metrics.iconContainerPadding,\n              backgroundColor: preset.iconBadgeBackgroundColor,\n            },\n          ]}\n        >\n          {iconNode}\n        </View>\n      ) : null}\n    </TouchableOpacity>\n  );\n}\n\nconst styles = StyleSheet.create({\n  base: {\n    flexDirection: \"row\",\n    alignItems: \"center\",\n    borderWidth: 0,\n  },\n  centered: {\n    justifyContent: \"center\",\n  },\n  withIcon: {\n    justifyContent: \"space-between\",\n  },\n  disabled: {\n    opacity: 0.6,\n  },\n  label: {},\n  labelAndroid: {\n    includeFontPadding: false,\n  },\n  labelCentered: {\n    textAlign: \"center\",\n  },\n  labelWithIcon: {\n    flex: 1,\n    flexShrink: 1,\n    marginRight: 8,\n  },\n  iconContainer: {\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    flexShrink: 0,\n  },\n});\n"]}

package/package.json

@@ -0,0 +1,121 @@
+{
+  "name": "@ecohouse/ui",
+  "version": "0.1.0",
+  "type": "module",
+  "private": false,
+  "description": "Cross-platform presentation-only UI components for EcoHouse (React Native + React Native Web)",
+  "license": "MIT",
+  "author": "EcoHouse",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Eco-House-Cortel/eco-cottage-ui.git"
+  },
+  "publishConfig": {
+    "access": "restricted"
+  },
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "react-native": "./src/index.ts",
+  "exports": {
+    ".": {
+      "react-native": "./src/index.ts",
+      "types": "./dist/index.d.ts",
+      "import": "./src/index.ts",
+      "require": "./dist/index.cjs",
+      "default": "./src/index.ts"
+    },
+    "./web/typography.css": "./src/web/styles/typography.css"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "engines": {
+    "node": ">=22"
+  },
+  "packageManager": "npm@11.6.1",
+  "overrides": {
+    "@emnapi/core": "1.11.2",
+    "@emnapi/runtime": "1.11.2"
+  },
+  "scripts": {
+    "build": "tsup",
+    "clean": "rm -rf dist",
+    "dev": "tsup --watch",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "storybook": "storybook dev -p 6006",
+    "storybook:clean": "rm -rf node_modules/.cache/storybook node_modules/.vite storybook-static && storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "prepare": "husky"
+  },
+  "lint-staged": {
+    "*.{js,jsx,ts,tsx,mjs}": [
+      "eslint --fix --max-warnings=0 --no-warn-ignored",
+      "prettier --write"
+    ],
+    "*.{json,md,css,yml,yaml,html}": [
+      "prettier --write"
+    ]
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-native": ">=0.74",
+    "react-native-svg": ">=13",
+    "react-native-web": ">=0.19"
+  },
+  "peerDependenciesMeta": {
+    "react-native-svg": {
+      "optional": true
+    },
+    "react-native-web": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@commitlint/cli": "^21.2.1",
+    "@commitlint/config-conventional": "^21.2.0",
+    "@eslint/js": "^9.17.0",
+    "@storybook/addon-essentials": "^8.4.7",
+    "@storybook/addon-interactions": "^8.4.7",
+    "@storybook/react-vite": "^8.4.7",
+    "@storybook/test": "^8.4.7",
+    "@tailwindcss/postcss": "^4.1.13",
+    "@tailwindcss/vite": "^4.1.13",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.7",
+    "eslint": "^9.17.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-react-hooks": "^5.1.0",
+    "globals": "^15.14.0",
+    "husky": "^9.1.7",
+    "lint-staged": "^16.4.0",
+    "prettier": "^3.9.6",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-native": "^0.76.5",
+    "react-native-svg": "^15.11.2",
+    "react-native-web": "^0.19.13",
+    "storybook": "^8.4.7",
+    "tailwindcss": "^4.1.13",
+    "tsup": "^8.3.5",
+    "typescript": "^5.7.2",
+    "typescript-eslint": "^8.18.2",
+    "vite": "^5.4.11",
+    "vitest": "^3.0.5"
+  },
+  "keywords": [
+    "ecohouse",
+    "react",
+    "react-native",
+    "ui",
+    "components",
+    "storybook"
+  ]
+}