@ecohouse/ui 0.1.2 → 0.1.4

package/src/icons/registry.ts

@@ -2,19 +2,29 @@ import { ArrowRightIcon } from "./ArrowRight";
 import { BagIcon } from "./Bag";
 import { BellIcon } from "./Bell";
 import { BuildingIcon } from "./Building";
+import { CalendarIcon } from "./Calendar";
 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 { HeartIcon } from "./Heart";
+import { HelpCircleIcon } from "./HelpCircle";
 import { HomeIcon } from "./Home";
 import { InstagramIcon } from "./Instagram";
 import { KeyIcon } from "./Key";
+import { LayoutGridIcon } from "./LayoutGrid";
 import { LinkedInIcon } from "./LinkedIn";
+import { LogOutIcon } from "./LogOut";
 import { MailIcon } from "./Mail";
 import { NavigateIcon } from "./Navigate";
 import { PhoneIcon } from "./Phone";
+import { SearchIcon } from "./Search";
+import { SettingsIcon } from "./Settings";
 import { ShowIcon } from "./Show";
 import { UserIcon } from "./User";
+import { VideoIcon } from "./Video";
 import type { IconComponent } from "./types";
 
 export const icons = {
@@ -22,19 +32,29 @@ export const icons = {
   bag: BagIcon,
   bell: BellIcon,
   building: BuildingIcon,
+  calendar: CalendarIcon,
   camera: CameraIcon,
+  check: CheckIcon,
   checkBadge: CheckBadgeIcon,
+  chevronDown: ChevronDownIcon,
   clock: ClockIcon,
   facebook: FacebookIcon,
+  heart: HeartIcon,
+  helpCircle: HelpCircleIcon,
   home: HomeIcon,
   instagram: InstagramIcon,
   key: KeyIcon,
+  layoutGrid: LayoutGridIcon,
   linkedin: LinkedInIcon,
+  logOut: LogOutIcon,
   mail: MailIcon,
   navigate: NavigateIcon,
   phone: PhoneIcon,
+  search: SearchIcon,
+  settings: SettingsIcon,
   show: ShowIcon,
   user: UserIcon,
+  video: VideoIcon,
 } as const satisfies Record<string, IconComponent>;
 
 export type IconName = keyof typeof icons;
@@ -42,11 +62,12 @@ 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"],
+  navigation: ["arrowRight", "chevronDown", "home", "navigate"],
+  actions: ["show", "bell", "camera", "key", "check", "checkBadge", "search", "calendar", "heart"],
+  objects: ["bag", "building", "clock", "user", "video"],
   communication: ["mail", "phone"],
   social: ["facebook", "instagram", "linkedin"],
+  interface: ["layoutGrid", "settings", "helpCircle", "logOut"],
 } as const satisfies Record<string, readonly IconName[]>;
 
 export type IconGroup = keyof typeof iconGroups;

package/src/index.ts

@@ -1,11 +1,20 @@
-export { Button, Input } from "./components";
+export { Avatar, Button, Checkbox, Input, Select, Textarea, Toggle } from "./components";
 export type {
+  AvatarProps,
+  AvatarMenuItem,
   ButtonProps,
   ButtonSize,
   ButtonVariant,
+  CheckboxProps,
+  CheckboxVariant,
   InputProps,
   InputSize,
-  InputState,
+  SelectOption,
+  SelectProps,
+  SelectSingleProps,
+  SelectMultipleProps,
+  TextareaProps,
+  ToggleProps,
 } from "./components";
 
 export {
@@ -19,21 +28,40 @@ export {
   BagIcon,
   BellIcon,
   BuildingIcon,
+  CalendarIcon,
   CameraIcon,
+  CheckIcon,
   CheckBadgeIcon,
+  ChevronDownIcon,
   ClockIcon,
   FacebookIcon,
+  HeartIcon,
+  HelpCircleIcon,
   HomeIcon,
   InstagramIcon,
   KeyIcon,
+  LayoutGridIcon,
   LinkedInIcon,
+  LogOutIcon,
   MailIcon,
   NavigateIcon,
   PhoneIcon,
+  SearchIcon,
+  SettingsIcon,
   ShowIcon,
   UserIcon,
+  VideoIcon,
 } from "./icons";
 export type { IconProps, IconName, IconGroup, IconComponent, IconByNameProps } from "./icons";
 
-export { colors, grey, buttonTypography, inputTypography, fonts } from "./theme";
+export {
+  colors,
+  grey,
+  avatarTypography,
+  buttonTypography,
+  inputTypography,
+  selectTypography,
+  textareaTypography,
+  fonts,
+} from "./theme";
 export type { GreyStep } from "./theme";

package/src/theme/colors.ts

@@ -27,6 +27,7 @@ export const colors = {
   lightGrey: "#B7B7B7",
   primaryMuted: "#B464360F",
   redMuted: "#A63E3E0F",
+  redHover: "#A63E3E33",
 
   grey0: grey["0"],
   grey50: grey["0.5"],

package/src/theme/index.ts

@@ -1,4 +1,11 @@
 export { colors, grey } from "./colors";
 export type { GreyStep } from "./colors";
 
-export { fonts, buttonTypography, inputTypography } from "./typography";
+export {
+  fonts,
+  avatarTypography,
+  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,57 @@ export const inputTypography = {
     fontFamily: fonts.sans,
     fontSize: 12,
     fontWeight: "400" as const,
-    lineHeight: 16,
+    lineHeight: 12,
+    letterSpacing: 0.36,
+  },
+} as const;
+
+/** Avatar name / email / menu-item typography — 100% line-height, 0 letter-spacing. */
+export const avatarTypography = {
+  name: {
+    fontFamily: fonts.sans,
+    fontSize: 14,
+    fontWeight: "600" as const,
+    lineHeight: 14,
+    letterSpacing: 0,
+  },
+  email: {
+    fontFamily: fonts.sans,
+    fontSize: 12,
+    fontWeight: "400" as const,
+    lineHeight: 12,
+    letterSpacing: 0,
+  },
+  menuItem: {
+    fontFamily: fonts.sans,
+    fontSize: 12,
+    fontWeight: "600" as const,
+    lineHeight: 12,
+    letterSpacing: 0,
+  },
+} 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;
+    }
+  };
+}