@ecohouse/ui 0.1.0 → 0.1.1

package/src/icons/Mail/MailIcon.web.tsx

@@ -0,0 +1,26 @@
+import { MAIL_PATH } from "./mailPath";
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+
+export function MailIcon({ size = 20, color = colors.primary, strokeWidth = 2 }: IconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden
+    >
+      <path
+        d={MAIL_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export { MAIL_PATH } from "./mailPath";

package/src/icons/Mail/index.ts

@@ -0,0 +1 @@
+export { MailIcon, MAIL_PATH } from "./MailIcon";

package/src/icons/Mail/mailPath.ts

@@ -0,0 +1,2 @@
+export const MAIL_PATH =
+  "M3.33333 4.99984L8.42303 8.84339L8.42473 8.8448C8.98987 9.25924 9.27261 9.46658 9.5823 9.54668C9.85602 9.61748 10.1438 9.61748 10.4175 9.54668C10.7274 9.46651 11.011 9.25856 11.5771 8.84339C11.5771 8.84339 14.8417 6.33812 16.6667 4.99984M2.5 13.1667V6.83333C2.5 5.89991 2.5 5.43285 2.68166 5.07633C2.84144 4.76273 3.09623 4.50795 3.40983 4.34816C3.76635 4.1665 4.23341 4.1665 5.16683 4.1665H14.8335C15.7669 4.1665 16.233 4.1665 16.5895 4.34816C16.9031 4.50795 17.1587 4.76273 17.3185 5.07633C17.5 5.43251 17.5 5.899 17.5 6.8306V13.1695C17.5 14.1011 17.5 14.5669 17.3185 14.9231C17.1587 15.2367 16.9031 15.4919 16.5895 15.6517C16.2333 15.8332 15.7675 15.8332 14.8359 15.8332H5.16409C4.23249 15.8332 3.766 15.8332 3.40983 15.6517C3.09623 15.4919 2.84144 15.2367 2.68166 14.9231C2.5 14.5666 2.5 14.1001 2.5 13.1667Z";

package/src/icons/Navigate/NavigateIcon.tsx

@@ -0,0 +1,20 @@
+import Svg, { Path } from "react-native-svg";
+import { NAVIGATE_PATH } from "./navigatePath";
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+
+export { NAVIGATE_PATH } from "./navigatePath";
+
+export function NavigateIcon({ size = 20, color = colors.primary, strokeWidth = 2 }: IconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 20 20" fill="none">
+      <Path
+        d={NAVIGATE_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}

package/src/icons/Navigate/NavigateIcon.web.tsx

@@ -0,0 +1,26 @@
+import { NAVIGATE_PATH } from "./navigatePath";
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+
+export function NavigateIcon({ size = 20, color = colors.primary, strokeWidth = 2 }: IconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden
+    >
+      <path
+        d={NAVIGATE_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export { NAVIGATE_PATH } from "./navigatePath";

package/src/icons/Navigate/index.ts

@@ -0,0 +1 @@
+export { NavigateIcon, NAVIGATE_PATH } from "./NavigateIcon";

package/src/icons/Navigate/navigatePath.ts

@@ -0,0 +1,2 @@
+export const NAVIGATE_PATH =
+  "M5.691 14.2339C11.5836 17.7694 16.2976 13.0554 15.7084 4.21658C6.86968 3.62732 2.15584 8.34151 5.691 14.2339ZM5.691 14.2339C5.69093 14.2338 5.69107 14.234 5.691 14.2339ZM5.691 14.2339L4.16675 15.7576M5.691 14.2339L8.88079 11.0436";

package/src/icons/Phone/PhoneIcon.tsx

@@ -0,0 +1,20 @@
+import Svg, { Path } from "react-native-svg";
+import { PHONE_PATH } from "./phonePath";
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+
+export { PHONE_PATH } from "./phonePath";
+
+export function PhoneIcon({ size = 20, color = colors.primary, strokeWidth = 2 }: IconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 20 20" fill="none">
+      <Path
+        d={PHONE_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}

package/src/icons/Phone/PhoneIcon.web.tsx

@@ -0,0 +1,26 @@
+import { PHONE_PATH } from "./phonePath";
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+
+export function PhoneIcon({ size = 20, color = colors.primary, strokeWidth = 2 }: IconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden
+    >
+      <path
+        d={PHONE_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export { PHONE_PATH } from "./phonePath";

package/src/icons/Phone/index.ts

@@ -0,0 +1 @@
+export { PhoneIcon, PHONE_PATH } from "./PhoneIcon";

package/src/icons/Phone/phonePath.ts

@@ -0,0 +1,2 @@
+export const PHONE_PATH =
+  "M7.91872 3.54768C7.66561 2.91492 7.05276 2.5 6.37126 2.5H4.07895C3.20692 2.5 2.5 3.20675 2.5 4.07878C2.5 11.491 8.50898 17.5 15.9212 17.5C16.7933 17.5 17.5 16.793 17.5 15.921L17.5004 13.6283C17.5004 12.9468 17.0856 12.334 16.4528 12.0809L14.2558 11.2024C13.6874 10.9751 13.0402 11.0774 12.57 11.4693L12.0029 11.9422C11.3407 12.4941 10.3664 12.4502 9.75683 11.8407L8.16018 10.2425C7.55066 9.63302 7.50561 8.65945 8.05745 7.99724L8.53027 7.43025C8.92218 6.95996 9.02541 6.31263 8.79805 5.74424L7.91872 3.54768Z";

package/src/icons/Show/ShowIcon.tsx

@@ -0,0 +1,33 @@
+import Svg, { Path } from "react-native-svg";
+import { SHOW_PATH, SHOW_PUPIL_PATH } from "./showPath";
+import { colors } from "../../theme";
+
+export { SHOW_PATH, SHOW_PUPIL_PATH } from "./showPath";
+
+interface ShowIconProps {
+  size?: number;
+  color?: string;
+  strokeWidth?: number;
+}
+
+/** Native — react-native-svg (peer dependency). */
+export function ShowIcon({ size = 20, color = colors.primary, strokeWidth = 2 }: ShowIconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 20 20" fill="none">
+      <Path
+        d={SHOW_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <Path
+        d={SHOW_PUPIL_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}

package/src/icons/Show/ShowIcon.web.tsx

@@ -0,0 +1,39 @@
+import { SHOW_PATH, SHOW_PUPIL_PATH } from "./showPath";
+import { colors } from "../../theme";
+
+interface ShowIconProps {
+  size?: number;
+  color?: string;
+  strokeWidth?: number;
+}
+
+/** Web / Storybook — plain SVG (no react-native-svg). */
+export function ShowIcon({ size = 20, color = colors.primary, strokeWidth = 2 }: ShowIconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden
+    >
+      <path
+        d={SHOW_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d={SHOW_PUPIL_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export { SHOW_PATH, SHOW_PUPIL_PATH } from "./showPath";

package/src/icons/Show/index.ts

@@ -0,0 +1 @@
+export { ShowIcon, SHOW_PATH, SHOW_PUPIL_PATH } from "./ShowIcon";

package/src/icons/Show/showPath.ts

@@ -0,0 +1,6 @@
+/** Show (eye) icon path — 20×20 viewBox. */
+export const SHOW_PATH =
+  "M1.66669 10C1.66669 10 4.16669 4.16667 10 4.16667C15.8334 4.16667 18.3334 10 18.3334 10C18.3334 10 15.8334 15.8333 10 15.8333C4.16669 15.8333 1.66669 10 1.66669 10Z";
+
+export const SHOW_PUPIL_PATH =
+  "M10 12.5C11.3807 12.5 12.5 11.3807 12.5 10C12.5 8.61929 11.3807 7.5 10 7.5C8.61929 7.5 7.5 8.61929 7.5 10C7.5 11.3807 8.61929 12.5 10 12.5Z";

package/src/icons/User/UserIcon.tsx

@@ -0,0 +1,26 @@
+import Svg, { Path } from "react-native-svg";
+import { USER_PATH } from "./userPath";
+import { colors } from "../../theme";
+
+export { USER_PATH } from "./userPath";
+
+interface UserIconProps {
+  size?: number;
+  color?: string;
+  strokeWidth?: number;
+}
+
+/** Native — react-native-svg (peer dependency). */
+export function UserIcon({ size = 20, color = colors.primary, strokeWidth = 2 }: UserIconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 20 20" fill="none">
+      <Path
+        d={USER_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}

package/src/icons/User/UserIcon.web.tsx

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

package/src/icons/User/index.ts

@@ -0,0 +1 @@
+export { UserIcon, USER_PATH } from "./UserIcon";

package/src/icons/User/userPath.ts

@@ -0,0 +1,3 @@
+/** User icon path — 20×20 viewBox. */
+export const USER_PATH =
+  "M15.8334 17.5C15.8334 14.2783 13.2217 11.6667 10 11.6667C6.77836 11.6667 4.16669 14.2783 4.16669 17.5M10 9.16667C8.15907 9.16667 6.66669 7.67428 6.66669 5.83333C6.66669 3.99238 8.15907 2.5 10 2.5C11.841 2.5 13.3334 3.99238 13.3334 5.83333C13.3334 7.67428 11.841 9.16667 10 9.16667Z";

package/src/icons/index.ts

@@ -0,0 +1,24 @@
+export type { IconProps, IconComponent } from "./types";
+export type { IconName, IconGroup } from "./registry";
+export type { IconByNameProps } from "./Icon";
+
+export { icons, iconNames, iconGroups, iconGroupNames, getIconsByGroup } from "./registry";
+export { Icon } from "./Icon";
+
+export { ArrowRightIcon } from "./ArrowRight";
+export { BagIcon } from "./Bag";
+export { BellIcon } from "./Bell";
+export { BuildingIcon } from "./Building";
+export { CameraIcon } from "./Camera";
+export { CheckBadgeIcon } from "./CheckBadge";
+export { ClockIcon } from "./Clock";
+export { FacebookIcon } from "./Facebook";
+export { HomeIcon } from "./Home";
+export { InstagramIcon } from "./Instagram";
+export { KeyIcon } from "./Key";
+export { LinkedInIcon } from "./LinkedIn";
+export { MailIcon } from "./Mail";
+export { NavigateIcon } from "./Navigate";
+export { PhoneIcon } from "./Phone";
+export { ShowIcon } from "./Show";
+export { UserIcon } from "./User";

package/src/icons/registry.ts

@@ -0,0 +1,58 @@
+import { ArrowRightIcon } from "./ArrowRight";
+import { BagIcon } from "./Bag";
+import { BellIcon } from "./Bell";
+import { BuildingIcon } from "./Building";
+import { CameraIcon } from "./Camera";
+import { CheckBadgeIcon } from "./CheckBadge";
+import { ClockIcon } from "./Clock";
+import { FacebookIcon } from "./Facebook";
+import { HomeIcon } from "./Home";
+import { InstagramIcon } from "./Instagram";
+import { KeyIcon } from "./Key";
+import { LinkedInIcon } from "./LinkedIn";
+import { MailIcon } from "./Mail";
+import { NavigateIcon } from "./Navigate";
+import { PhoneIcon } from "./Phone";
+import { ShowIcon } from "./Show";
+import { UserIcon } from "./User";
+import type { IconComponent } from "./types";
+
+export const icons = {
+  arrowRight: ArrowRightIcon,
+  bag: BagIcon,
+  bell: BellIcon,
+  building: BuildingIcon,
+  camera: CameraIcon,
+  checkBadge: CheckBadgeIcon,
+  clock: ClockIcon,
+  facebook: FacebookIcon,
+  home: HomeIcon,
+  instagram: InstagramIcon,
+  key: KeyIcon,
+  linkedin: LinkedInIcon,
+  mail: MailIcon,
+  navigate: NavigateIcon,
+  phone: PhoneIcon,
+  show: ShowIcon,
+  user: UserIcon,
+} as const satisfies Record<string, IconComponent>;
+
+export type IconName = keyof typeof icons;
+
+export const iconNames = Object.keys(icons) as IconName[];
+
+export const iconGroups = {
+  navigation: ["arrowRight", "home", "navigate"],
+  actions: ["show", "bell", "camera", "key", "checkBadge"],
+  objects: ["bag", "building", "clock", "user"],
+  communication: ["mail", "phone"],
+  social: ["facebook", "instagram", "linkedin"],
+} as const satisfies Record<string, readonly IconName[]>;
+
+export type IconGroup = keyof typeof iconGroups;
+
+export const iconGroupNames = Object.keys(iconGroups) as IconGroup[];
+
+export function getIconsByGroup(group: IconGroup): IconName[] {
+  return [...iconGroups[group]];
+}

package/src/icons/types.ts

@@ -0,0 +1,9 @@
+import type { ComponentType } from "react";
+
+export interface IconProps {
+  size?: number;
+  color?: string;
+  strokeWidth?: number;
+}
+
+export type IconComponent = ComponentType<IconProps>;

package/src/index.ts

@@ -1,23 +1,39 @@
-export { Button } from "./components/Button";
-export type { ButtonProps, ButtonSize, ButtonVariant } from "./components/Button";
-
-export { ArrowUpRightIcon } from "./icons/ArrowUpRightIcon";
+export { Button, Input } from "./components";
+export type {
+  ButtonProps,
+  ButtonSize,
+  ButtonVariant,
+  InputProps,
+  InputSize,
+  InputState,
+} from "./components";
 
 export {
-  colors,
-  brand,
-  emeraldGreen,
-  navy,
-  rubyRed,
-  stormGray,
-  buttonTypography,
-  labelTypography,
-  fonts,
-  fontSize,
-  fontWeight,
-  radii,
-  shadows,
-  spacing,
-  typographyScale,
-} from "./theme/tokens";
-export type { EmeraldGreenStep, NavyStep, RubyRedStep, StormGrayStep } from "./theme/tokens";
+  Icon,
+  icons,
+  iconNames,
+  iconGroups,
+  iconGroupNames,
+  getIconsByGroup,
+  ArrowRightIcon,
+  BagIcon,
+  BellIcon,
+  BuildingIcon,
+  CameraIcon,
+  CheckBadgeIcon,
+  ClockIcon,
+  FacebookIcon,
+  HomeIcon,
+  InstagramIcon,
+  KeyIcon,
+  LinkedInIcon,
+  MailIcon,
+  NavigateIcon,
+  PhoneIcon,
+  ShowIcon,
+  UserIcon,
+} from "./icons";
+export type { IconProps, IconName, IconGroup, IconComponent, IconByNameProps } from "./icons";
+
+export { colors, grey, buttonTypography, inputTypography, fonts } from "./theme";
+export type { GreyStep } from "./theme";

package/src/theme/colors.test.ts

@@ -0,0 +1,12 @@
+import { describe, expect, it } from "vitest";
+import { colors } from "./colors";
+import { buttonTypography } from "./typography";
+
+describe("design tokens", () => {
+  it("exposes primary and button typography used by Button", () => {
+    expect(colors.primary).toBe("#B46436");
+    expect(colors.dark).toBe("#090909");
+    expect(buttonTypography.lg.fontSize).toBe(14);
+    expect(buttonTypography.lg.fontWeight).toBe("600");
+  });
+});

package/src/theme/colors.ts

@@ -0,0 +1,46 @@
+export const grey = {
+  "0": "#767676",
+  "0.5": "#6E6E6E",
+  "1": "#666666",
+  "1.5": "#5E5E5E",
+  "2": "#565656",
+  "3": "#474747",
+  "4": "#373737",
+  "5": "#272727",
+  "6": "#1F1F1F",
+  "7": "#171717",
+  "7.5": "#161616",
+  "8": "#101010",
+  "8.5": "#0C0C0C",
+  "9": "#080808",
+  "9.5": "#040404",
+} as const;
+
+export type GreyStep = keyof typeof grey;
+
+export const colors = {
+  primary: "#B46436",
+  black: "#000000",
+  white: "#ffffff",
+  dark: "#090909",
+  red: "#A63E3E",
+  lightGrey: "#B7B7B7",
+  primaryMuted: "#B464360F",
+  redMuted: "#A63E3E0F",
+
+  grey0: grey["0"],
+  grey50: grey["0.5"],
+  grey100: grey["1"],
+  grey150: grey["1.5"],
+  grey200: grey["2"],
+  grey300: grey["3"],
+  grey400: grey["4"],
+  grey500: grey["5"],
+  grey600: grey["6"],
+  grey700: grey["7"],
+  grey750: grey["7.5"],
+  grey800: grey["8"],
+  grey850: grey["8.5"],
+  grey900: grey["9"],
+  grey950: grey["9.5"],
+} as const;

package/src/theme/index.ts

@@ -0,0 +1,4 @@
+export { colors, grey } from "./colors";
+export type { GreyStep } from "./colors";
+
+export { fonts, buttonTypography, inputTypography } from "./typography";

package/src/theme/typography.ts

@@ -0,0 +1,46 @@
+export const fonts = {
+  sans: "Noto Sans Armenian",
+} as const;
+
+/** Button label — SemiBold, line-height 100%, letter-spacing 3%. */
+export const buttonTypography = {
+  lg: {
+    fontFamily: fonts.sans,
+    fontSize: 14,
+    fontWeight: "600" as const,
+    lineHeight: 14,
+    letterSpacing: 0.42,
+  },
+  sm: {
+    fontFamily: fonts.sans,
+    fontSize: 12,
+    fontWeight: "600" as const,
+    lineHeight: 12,
+    letterSpacing: 0.36,
+  },
+} as const;
+
+/** Input label / field / hint typography. */
+export const inputTypography = {
+  label: {
+    fontFamily: fonts.sans,
+    fontSize: 12,
+    fontWeight: "500" as const,
+    lineHeight: 16,
+    letterSpacing: 0,
+  },
+  field: {
+    fontFamily: fonts.sans,
+    fontSize: 14,
+    fontWeight: "400" as const,
+    lineHeight: 19,
+    letterSpacing: 0,
+  },
+  hint: {
+    fontFamily: fonts.sans,
+    fontSize: 12,
+    fontWeight: "400" as const,
+    lineHeight: 16,
+    letterSpacing: 0,
+  },
+} as const;