@ecohouse/ui 0.1.1 → 0.1.3

package/src/icons/ChevronDown/ChevronDownIcon.tsx

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

package/src/icons/ChevronDown/ChevronDownIcon.web.tsx

@@ -0,0 +1,36 @@
+import { CHEVRON_DOWN_PATH } from "./chevronDownPath";
+import { colors } from "../../theme";
+
+interface ChevronDownIconProps {
+  size?: number;
+  color?: string;
+  strokeWidth?: number;
+}
+
+/** Web / Storybook — plain SVG (no react-native-svg). */
+export function ChevronDownIcon({
+  size = 20,
+  color = colors.primary,
+  strokeWidth = 2,
+}: ChevronDownIconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 20 20"
+      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/ChevronDown/chevronDownPath.ts

@@ -0,0 +1,2 @@
+/** Chevron down path — 20×20 viewBox. */
+export const CHEVRON_DOWN_PATH = "M5 7.5L10 12.5L15 7.5";

package/src/icons/ChevronDown/index.ts

@@ -0,0 +1 @@
+export { ChevronDownIcon, CHEVRON_DOWN_PATH } from "./ChevronDownIcon";

package/src/icons/Search/SearchIcon.tsx

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

package/src/icons/Search/SearchIcon.web.tsx

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

package/src/icons/Search/index.ts

@@ -0,0 +1 @@
+export { SearchIcon, SEARCH_CIRCLE_PATH, SEARCH_HANDLE_PATH } from "./SearchIcon";

package/src/icons/Search/searchPath.ts

@@ -0,0 +1,5 @@
+/** Search (magnifying glass) paths — 20×20 viewBox. */
+export const SEARCH_CIRCLE_PATH =
+  "M9.16667 15.8333C12.8486 15.8333 15.8333 12.8486 15.8333 9.16667C15.8333 5.48477 12.8486 2.5 9.16667 2.5C5.48477 2.5 2.5 5.48477 2.5 9.16667C2.5 12.8486 5.48477 15.8333 9.16667 15.8333Z";
+
+export const SEARCH_HANDLE_PATH = "M17.5 17.5L13.875 13.875";

package/src/icons/index.ts

@@ -10,7 +10,9 @@ export { BagIcon } from "./Bag";
 export { BellIcon } from "./Bell";
 export { BuildingIcon } from "./Building";
 export { CameraIcon } from "./Camera";
+export { CheckIcon } from "./Check";
 export { CheckBadgeIcon } from "./CheckBadge";
+export { ChevronDownIcon } from "./ChevronDown";
 export { ClockIcon } from "./Clock";
 export { FacebookIcon } from "./Facebook";
 export { HomeIcon } from "./Home";
@@ -20,5 +22,6 @@ export { LinkedInIcon } from "./LinkedIn";
 export { MailIcon } from "./Mail";
 export { NavigateIcon } from "./Navigate";
 export { PhoneIcon } from "./Phone";
+export { SearchIcon } from "./Search";
 export { ShowIcon } from "./Show";
 export { UserIcon } from "./User";

package/src/icons/registry.ts

@@ -3,7 +3,9 @@ import { BagIcon } from "./Bag";
 import { BellIcon } from "./Bell";
 import { BuildingIcon } from "./Building";
 import { CameraIcon } from "./Camera";
+import { CheckIcon } from "./Check";
 import { CheckBadgeIcon } from "./CheckBadge";
+import { ChevronDownIcon } from "./ChevronDown";
 import { ClockIcon } from "./Clock";
 import { FacebookIcon } from "./Facebook";
 import { HomeIcon } from "./Home";
@@ -13,6 +15,7 @@ import { LinkedInIcon } from "./LinkedIn";
 import { MailIcon } from "./Mail";
 import { NavigateIcon } from "./Navigate";
 import { PhoneIcon } from "./Phone";
+import { SearchIcon } from "./Search";
 import { ShowIcon } from "./Show";
 import { UserIcon } from "./User";
 import type { IconComponent } from "./types";
@@ -23,7 +26,9 @@ export const icons = {
   bell: BellIcon,
   building: BuildingIcon,
   camera: CameraIcon,
+  check: CheckIcon,
   checkBadge: CheckBadgeIcon,
+  chevronDown: ChevronDownIcon,
   clock: ClockIcon,
   facebook: FacebookIcon,
   home: HomeIcon,
@@ -33,6 +38,7 @@ export const icons = {
   mail: MailIcon,
   navigate: NavigateIcon,
   phone: PhoneIcon,
+  search: SearchIcon,
   show: ShowIcon,
   user: UserIcon,
 } as const satisfies Record<string, IconComponent>;
@@ -42,8 +48,8 @@ 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"],
+  navigation: ["arrowRight", "chevronDown", "home", "navigate"],
+  actions: ["show", "bell", "camera", "key", "check", "checkBadge", "search"],
   objects: ["bag", "building", "clock", "user"],
   communication: ["mail", "phone"],
   social: ["facebook", "instagram", "linkedin"],

package/src/index.ts

@@ -1,11 +1,18 @@
-export { Button, Input } from "./components";
+export { Button, Checkbox, Input, Select, Textarea, Toggle } from "./components";
 export type {
   ButtonProps,
   ButtonSize,
   ButtonVariant,
+  CheckboxProps,
+  CheckboxVariant,
   InputProps,
   InputSize,
-  InputState,
+  SelectOption,
+  SelectProps,
+  SelectSingleProps,
+  SelectMultipleProps,
+  TextareaProps,
+  ToggleProps,
 } from "./components";
 
 export {
@@ -20,7 +27,9 @@ export {
   BellIcon,
   BuildingIcon,
   CameraIcon,
+  CheckIcon,
   CheckBadgeIcon,
+  ChevronDownIcon,
   ClockIcon,
   FacebookIcon,
   HomeIcon,
@@ -30,10 +39,19 @@ export {
   MailIcon,
   NavigateIcon,
   PhoneIcon,
+  SearchIcon,
   ShowIcon,
   UserIcon,
 } from "./icons";
 export type { IconProps, IconName, IconGroup, IconComponent, IconByNameProps } from "./icons";
 
-export { colors, grey, buttonTypography, inputTypography, fonts } from "./theme";
+export {
+  colors,
+  grey,
+  buttonTypography,
+  inputTypography,
+  selectTypography,
+  textareaTypography,
+  fonts,
+} from "./theme";
 export type { GreyStep } from "./theme";

package/src/theme/index.ts

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

package/src/theme/typography.ts

@@ -26,9 +26,34 @@ export const inputTypography = {
     fontFamily: fonts.sans,
     fontSize: 12,
     fontWeight: "500" as const,
-    lineHeight: 16,
+    lineHeight: 12,
+    letterSpacing: 0.36,
+  },
+  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: 12,
+    letterSpacing: 0.36,
+  },
+} as const;
+
+/** Select label / field / hint typography — Medium/Regular 12–14, letter-spacing 3%. */
+export const selectTypography = {
+  label: {
+    fontFamily: fonts.sans,
+    fontSize: 12,
+    fontWeight: "500" as const,
+    lineHeight: 12,
+    letterSpacing: 0.36,
+  },
   field: {
     fontFamily: fonts.sans,
     fontSize: 14,
@@ -40,7 +65,32 @@ export const inputTypography = {
     fontFamily: fonts.sans,
     fontSize: 12,
     fontWeight: "400" as const,
-    lineHeight: 16,
+    lineHeight: 12,
+    letterSpacing: 0.36,
+  },
+} as const;
+
+/** Textarea label / field / hint typography — Medium/Regular 12–14, letter-spacing 3%. */
+export const textareaTypography = {
+  label: {
+    fontFamily: fonts.sans,
+    fontSize: 12,
+    fontWeight: "500" as const,
+    lineHeight: 12,
+    letterSpacing: 0.36,
+  },
+  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: 12,
+    letterSpacing: 0.36,
+  },
 } as const;

package/src/utils/mergeRefs.ts

@@ -0,0 +1,20 @@
+import type { ForwardedRef, MutableRefObject, RefCallback } from "react";
+
+/**
+ * Combines a component's internal ref (used e.g. by `useApplyWebClassName`)
+ * with an optional externally-forwarded ref, so consumers can still call
+ * `.focus()`/`.measure()` on the underlying native node via `ref`.
+ */
+export function mergeRefs<T>(
+  internalRef: MutableRefObject<T | null>,
+  forwardedRef: ForwardedRef<T>,
+): RefCallback<T> {
+  return (node) => {
+    internalRef.current = node;
+    if (typeof forwardedRef === "function") {
+      forwardedRef(node);
+    } else if (forwardedRef) {
+      forwardedRef.current = node;
+    }
+  };
+}

package/src/web/styles/fonts.css

@@ -0,0 +1 @@
+@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+Armenian:wght@400;500;600;700&display=swap");

package/src/web/styles/typography.css

@@ -1,6 +1,10 @@
+:root {
+  --font-sans: "Noto Sans Armenian", ui-sans-serif, system-ui, sans-serif;
+}
+
 @layer components {
   .typography-button-lg {
-    font-family: var(--font-sans, "Noto Sans Armenian", ui-sans-serif, system-ui, sans-serif);
+    font-family: var(--font-sans);
     font-size: 14px;
     font-weight: 600;
     line-height: 100%;
@@ -8,7 +12,7 @@
   }
 
   .typography-button-sm {
-    font-family: var(--font-sans, "Noto Sans Armenian", ui-sans-serif, system-ui, sans-serif);
+    font-family: var(--font-sans);
     font-size: 12px;
     font-weight: 600;
     line-height: 100%;