@ecohouse/ui 0.1.5 → 0.1.7

package/src/icons/Sidebar/SidebarIcon.web.tsx

@@ -0,0 +1,27 @@
+import { SIDEBAR_PATH } from "./sidebarPath";
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+
+/** Web / Storybook — plain SVG (no react-native-svg). */
+export function SidebarIcon({ 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={SIDEBAR_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export { SIDEBAR_PATH } from "./sidebarPath";

package/src/icons/Sidebar/index.ts

@@ -0,0 +1 @@
+export { SidebarIcon, SIDEBAR_PATH } from "./SidebarIcon";

package/src/icons/Sidebar/sidebarPath.ts

@@ -0,0 +1,3 @@
+/** Sidebar icon path — 20×20 viewBox. */
+export const SIDEBAR_PATH =
+  "M12.5 2.5V17.5M6.5 2.5H13.5C14.9001 2.5 15.6002 2.5 16.135 2.77248C16.6054 3.01217 16.9878 3.39462 17.2275 3.86502C17.5 4.3998 17.5 5.09987 17.5 6.5V13.5C17.5 14.9001 17.5 15.6002 17.2275 16.135C16.9878 16.6054 16.6054 16.9878 16.135 17.2275C15.6002 17.5 14.9001 17.5 13.5 17.5H6.5C5.09987 17.5 4.3998 17.5 3.86502 17.2275C3.39462 16.9878 3.01217 16.6054 2.77248 16.135C2.5 15.6002 2.5 14.9001 2.5 13.5V6.5C2.5 5.09987 2.5 4.3998 2.77248 3.86502C3.01217 3.39462 3.39462 3.01217 3.86502 2.77248C4.3998 2.5 5.09987 2.5 6.5 2.5Z";

package/src/icons/Star/StarIcon.tsx

@@ -0,0 +1,35 @@
+import Svg, { Path } from "react-native-svg";
+import { colors } from "../../theme";
+import { STAR_PATH } from "./starPath";
+import type { IconProps } from "../types";
+
+export interface StarIconProps extends IconProps {
+  active?: boolean;
+  height?: number;
+}
+
+/** Native — active is solid orange; inactive is a grey outline. */
+export function StarIcon({
+  active = false,
+  size = 28,
+  height,
+  color,
+  strokeWidth = 2,
+}: StarIconProps) {
+  const resolvedColor = color ?? (active ? "#E38E5E" : colors.grey150);
+
+  return (
+    <Svg width={size} height={height ?? (size * 26) / 28} viewBox="0 0 28 26" fill="none">
+      <Path
+        d={STAR_PATH}
+        fill={active ? resolvedColor : "none"}
+        stroke={resolvedColor}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}
+
+export { STAR_PATH } from "./starPath";

package/src/icons/Star/StarIcon.web.tsx

@@ -0,0 +1,41 @@
+import { colors } from "../../theme";
+import { STAR_PATH } from "./starPath";
+import type { IconProps } from "../types";
+
+export interface StarIconProps extends IconProps {
+  active?: boolean;
+  height?: number;
+}
+
+/** Web / Storybook — active is solid orange; inactive is a grey outline. */
+export function StarIcon({
+  active = false,
+  size = 28,
+  height,
+  color,
+  strokeWidth = 2,
+}: StarIconProps) {
+  const resolvedColor = color ?? (active ? "#E38E5E" : colors.grey150);
+
+  return (
+    <svg
+      width={size}
+      height={height ?? (size * 26) / 28}
+      viewBox="0 0 28 26"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden
+    >
+      <path
+        d={STAR_PATH}
+        fill={active ? resolvedColor : "none"}
+        stroke={resolvedColor}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export { STAR_PATH } from "./starPath";

package/src/icons/Star/index.ts

@@ -0,0 +1,2 @@
+export { StarIcon, STAR_PATH } from "./StarIcon";
+export type { StarIconProps } from "./StarIcon";

package/src/icons/Star/starPath.ts

@@ -0,0 +1,3 @@
+/** Star icon path — 28×26 viewBox. */
+export const STAR_PATH =
+  "M12.6112 2.09824C12.9186 1.47565 13.0722 1.16436 13.2808 1.0649C13.4623 0.978367 13.6732 0.978367 13.8546 1.0649C14.0632 1.16436 14.2169 1.47565 14.5242 2.09824L17.4398 8.00486C17.5305 8.18866 17.5759 8.28056 17.6422 8.35192C17.7009 8.41509 17.7713 8.46628 17.8495 8.50264C17.9378 8.54371 18.0392 8.55854 18.242 8.58818L24.7637 9.54142C25.4505 9.6418 25.7938 9.69199 25.9528 9.85973C26.091 10.0057 26.156 10.2062 26.1297 10.4055C26.0995 10.6346 25.8509 10.8767 25.3537 11.361L20.6363 15.9557C20.4893 16.0989 20.4157 16.1706 20.3683 16.2558C20.3263 16.3312 20.2993 16.4141 20.2889 16.4998C20.2772 16.5966 20.2945 16.6978 20.3292 16.9001L21.4423 23.39C21.5597 24.0745 21.6184 24.4167 21.5081 24.6198C21.4121 24.7965 21.2415 24.9205 21.0438 24.9571C20.8165 24.9992 20.5092 24.8376 19.8945 24.5144L14.0642 21.4483C13.8826 21.3527 13.7917 21.305 13.696 21.2862C13.6113 21.2696 13.5242 21.2696 13.4394 21.2862C13.3437 21.305 13.2529 21.3527 13.0713 21.4483L7.24094 24.5144C6.62626 24.8376 6.31892 24.9992 6.09167 24.9571C5.89395 24.9205 5.72334 24.7965 5.62736 24.6198C5.51704 24.4167 5.57574 24.0745 5.69314 23.39L6.80622 16.9001C6.84092 16.6978 6.85828 16.5966 6.84653 16.4998C6.83614 16.4141 6.80919 16.3312 6.76718 16.2558C6.71974 16.1706 6.64621 16.0989 6.49916 15.9557L1.78179 11.361C1.28459 10.8767 1.03599 10.6346 1.00574 10.4055C0.979423 10.2062 1.04445 10.0057 1.18271 9.85973C1.34162 9.69199 1.685 9.6418 2.37177 9.54142L8.89346 8.58818C9.09627 8.55854 9.19768 8.54371 9.286 8.50264C9.36419 8.46628 9.43459 8.41509 9.49329 8.35192C9.55958 8.28056 9.60495 8.18866 9.69567 8.00486L12.6112 2.09824Z";

package/src/icons/StarFilled/StarFilledIcon.tsx

@@ -0,0 +1,28 @@
+import Svg, { Path } from "react-native-svg";
+import { STAR_PATH } from "../Star/starPath";
+import type { IconProps } from "../types";
+
+interface StarFilledIconProps extends IconProps {
+  height?: number;
+}
+
+/** Native — supplied solid orange 28×26 star icon. */
+export function StarFilledIcon({
+  size = 28,
+  height,
+  color = "#E38E5E",
+  strokeWidth = 2,
+}: StarFilledIconProps) {
+  return (
+    <Svg width={size} height={height ?? (size * 26) / 28} viewBox="0 0 28 26" fill={color}>
+      <Path
+        d={STAR_PATH}
+        fill={color}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}

package/src/icons/StarFilled/StarFilledIcon.web.tsx

@@ -0,0 +1,34 @@
+import { STAR_PATH } from "../Star/starPath";
+import type { IconProps } from "../types";
+
+interface StarFilledIconProps extends IconProps {
+  height?: number;
+}
+
+/** Web / Storybook — supplied solid orange 28×26 star icon. */
+export function StarFilledIcon({
+  size = 28,
+  height,
+  color = "#E38E5E",
+  strokeWidth = 2,
+}: StarFilledIconProps) {
+  return (
+    <svg
+      width={size}
+      height={height ?? (size * 26) / 28}
+      viewBox="0 0 28 26"
+      fill={color}
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden
+    >
+      <path
+        d={STAR_PATH}
+        fill={color}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

package/src/icons/StarFilled/index.ts

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

package/src/icons/UsersAlt/UsersAltIcon.tsx

@@ -0,0 +1,14 @@
+import Svg, { Path } from "react-native-svg";
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+import { USERS_ALT_PATH } from "./usersAltPath";
+
+export { USERS_ALT_PATH } from "./usersAltPath";
+
+export function UsersAltIcon({ size = 28, color = colors.white }: IconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 28 28" fill="none">
+      <Path d={USERS_ALT_PATH} fill={color} />
+    </Svg>
+  );
+}

package/src/icons/UsersAlt/UsersAltIcon.web.tsx

@@ -0,0 +1,13 @@
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+import { USERS_ALT_PATH } from "./usersAltPath";
+
+export { USERS_ALT_PATH } from "./usersAltPath";
+
+export function UsersAltIcon({ size = 28, color = colors.white }: IconProps) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 28 28" fill="none" aria-hidden>
+      <path d={USERS_ALT_PATH} fill={color} />
+    </svg>
+  );
+}

package/src/icons/UsersAlt/index.ts

@@ -0,0 +1 @@
+export { UsersAltIcon, USERS_ALT_PATH } from "./UsersAltIcon";

package/src/icons/UsersAlt/usersAltPath.ts

@@ -0,0 +1,2 @@
+export const USERS_ALT_PATH =
+  "M14.35 14.2566C14.9725 13.7177 15.4718 13.0513 15.814 12.3024C16.1562 11.5536 16.3333 10.7399 16.3333 9.91659C16.3333 8.36949 15.7187 6.88576 14.6248 5.7918C13.5308 4.69783 12.0471 4.08325 10.5 4.08325C8.95289 4.08325 7.46916 4.69783 6.3752 5.7918C5.28124 6.88576 4.66666 8.36949 4.66666 9.91659C4.66665 10.7399 4.84376 11.5536 5.18597 12.3024C5.52818 13.0513 6.02748 13.7177 6.64999 14.2566C5.01682 14.9961 3.6312 16.1904 2.6588 17.6966C1.6864 19.2027 1.16837 20.9571 1.16666 22.7499C1.16666 23.0593 1.28957 23.3561 1.50837 23.5749C1.72716 23.7937 2.0239 23.9166 2.33332 23.9166C2.64274 23.9166 2.93949 23.7937 3.15828 23.5749C3.37707 23.3561 3.49999 23.0593 3.49999 22.7499C3.49999 20.8934 4.23749 19.1129 5.55024 17.8002C6.863 16.4874 8.64347 15.7499 10.5 15.7499C12.3565 15.7499 14.137 16.4874 15.4497 17.8002C16.7625 19.1129 17.5 20.8934 17.5 22.7499C17.5 23.0593 17.6229 23.3561 17.8417 23.5749C18.0605 23.7937 18.3572 23.9166 18.6667 23.9166C18.9761 23.9166 19.2728 23.7937 19.4916 23.5749C19.7104 23.3561 19.8333 23.0593 19.8333 22.7499C19.8316 20.9571 19.3136 19.2027 18.3412 17.6966C17.3688 16.1904 15.9832 14.9961 14.35 14.2566ZM10.5 13.4166C9.80775 13.4166 9.13107 13.2113 8.55549 12.8267C7.97992 12.4421 7.53132 11.8955 7.26641 11.256C7.0015 10.6164 6.93219 9.9127 7.06724 9.23377C7.20229 8.55484 7.53563 7.9312 8.02512 7.44171C8.5146 6.95223 9.13824 6.61889 9.81717 6.48384C10.4961 6.34879 11.1998 6.4181 11.8394 6.68301C12.4789 6.94791 13.0255 7.39652 13.4101 7.97209C13.7947 8.54766 14 9.22435 14 9.91659C14 10.8448 13.6312 11.7351 12.9749 12.3915C12.3185 13.0478 11.4282 13.4166 10.5 13.4166ZM21.8633 13.7899C22.61 12.9491 23.0977 11.9105 23.2678 10.799C23.4378 9.68748 23.2831 8.55051 22.822 7.52492C22.361 6.49933 21.6134 5.62885 20.6692 5.01825C19.725 4.40764 18.6244 4.08295 17.5 4.08325C17.1906 4.08325 16.8938 4.20617 16.675 4.42496C16.4562 4.64375 16.3333 4.9405 16.3333 5.24992C16.3333 5.55934 16.4562 5.85608 16.675 6.07488C16.8938 6.29367 17.1906 6.41659 17.5 6.41659C18.4282 6.41659 19.3185 6.78533 19.9749 7.44171C20.6312 8.09809 21 8.98833 21 9.91659C20.9983 10.5294 20.8358 11.131 20.5287 11.6612C20.2216 12.1915 19.7807 12.6319 19.25 12.9383C19.077 13.038 18.9325 13.1805 18.8304 13.3521C18.7283 13.5237 18.6719 13.7186 18.6667 13.9183C18.6618 14.1163 18.7074 14.3123 18.7993 14.4879C18.8911 14.6634 19.0262 14.8127 19.1917 14.9216L19.6467 15.2249L19.7983 15.3066C21.2046 15.9736 22.391 17.0286 23.2178 18.3473C24.0446 19.666 24.4773 21.1935 24.465 22.7499C24.465 23.0593 24.5879 23.3561 24.8067 23.5749C25.0255 23.7937 25.3222 23.9166 25.6317 23.9166C25.9411 23.9166 26.2378 23.7937 26.4566 23.5749C26.6754 23.3561 26.7983 23.0593 26.7983 22.7499C26.8079 20.9596 26.3594 19.1965 25.4957 17.6283C24.632 16.0601 23.3816 14.7388 21.8633 13.7899Z";

package/src/icons/index.ts

@@ -29,8 +29,15 @@ export { LogOutIcon } from "./LogOut";
 export { MailIcon } from "./Mail";
 export { NavigateIcon } from "./Navigate";
 export { PhoneIcon } from "./Phone";
+export { PlusIcon } from "./Plus";
+export { MinusIcon } from "./Minus";
 export { SearchIcon } from "./Search";
 export { SettingsIcon } from "./Settings";
 export { ShowIcon } from "./Show";
+export { SidebarIcon } from "./Sidebar";
+export { StarIcon } from "./Star";
+export { StarFilledIcon } from "./StarFilled";
 export { UserIcon } from "./User";
+export { UsersAltIcon } from "./UsersAlt";
 export { VideoIcon } from "./Video";
+export type { StarIconProps } from "./Star";

package/src/icons/registry.ts

@@ -20,12 +20,18 @@ import { LayoutGridIcon } from "./LayoutGrid";
 import { LinkedInIcon } from "./LinkedIn";
 import { LogOutIcon } from "./LogOut";
 import { MailIcon } from "./Mail";
+import { MinusIcon } from "./Minus";
 import { NavigateIcon } from "./Navigate";
 import { PhoneIcon } from "./Phone";
+import { PlusIcon } from "./Plus";
 import { SearchIcon } from "./Search";
 import { SettingsIcon } from "./Settings";
 import { ShowIcon } from "./Show";
+import { SidebarIcon } from "./Sidebar";
+import { StarIcon } from "./Star";
+import { StarFilledIcon } from "./StarFilled";
 import { UserIcon } from "./User";
+import { UsersAltIcon } from "./UsersAlt";
 import { VideoIcon } from "./Video";
 import type { IconComponent } from "./types";
 
@@ -52,12 +58,18 @@ export const icons = {
   linkedin: LinkedInIcon,
   logOut: LogOutIcon,
   mail: MailIcon,
+  minus: MinusIcon,
   navigate: NavigateIcon,
   phone: PhoneIcon,
+  plus: PlusIcon,
   search: SearchIcon,
   settings: SettingsIcon,
   show: ShowIcon,
+  sidebar: SidebarIcon,
+  star: StarIcon,
+  starFilled: StarFilledIcon,
   user: UserIcon,
+  usersAlt: UsersAltIcon,
   video: VideoIcon,
 } as const satisfies Record<string, IconComponent>;
 
@@ -78,11 +90,15 @@ export const iconGroups = {
     "calendar",
     "calendarOutline",
     "heart",
+    "star",
+    "starFilled",
+    "minus",
+    "plus",
   ],
-  objects: ["bag", "building", "clock", "user", "video"],
+  objects: ["bag", "building", "clock", "user", "usersAlt", "video"],
   communication: ["mail", "phone"],
   social: ["facebook", "instagram", "linkedin"],
-  interface: ["layoutGrid", "settings", "helpCircle", "logOut"],
+  interface: ["layoutGrid", "sidebar", "settings", "helpCircle", "logOut"],
 } as const satisfies Record<string, readonly IconName[]>;
 
 export type IconGroup = keyof typeof iconGroups;

package/src/index.ts

@@ -1,5 +1,9 @@
 export {
   Avatar,
+  Badge,
+  Counter,
+  SegmentedToggle,
+  StatCard,
   Button,
   Checkbox,
   DatePicker,
@@ -7,10 +11,18 @@ export {
   Select,
   Textarea,
   Toggle,
+  RatingInput,
+  CommentCard,
 } from "./components";
 export type {
   AvatarProps,
   AvatarMenuItem,
+  BadgeProps,
+  BadgeVariant,
+  CounterProps,
+  SegmentedToggleOption,
+  SegmentedToggleProps,
+  StatCardProps,
   ButtonProps,
   ButtonSize,
   ButtonVariant,
@@ -28,6 +40,8 @@ export type {
   SelectMultipleProps,
   TextareaProps,
   ToggleProps,
+  RatingInputProps,
+  CommentCardProps,
 } from "./components";
 
 export { MenuItem } from "./primitives";
@@ -62,20 +76,39 @@ export {
   LinkedInIcon,
   LogOutIcon,
   MailIcon,
+  MinusIcon,
   NavigateIcon,
   PhoneIcon,
+  PlusIcon,
   SearchIcon,
   SettingsIcon,
   ShowIcon,
+  SidebarIcon,
+  StarIcon,
+  StarFilledIcon,
   UserIcon,
+  UsersAltIcon,
   VideoIcon,
 } from "./icons";
-export type { IconProps, IconName, IconGroup, IconComponent, IconByNameProps } from "./icons";
+export type {
+  IconProps,
+  IconName,
+  IconGroup,
+  IconComponent,
+  IconByNameProps,
+  StarIconProps,
+} from "./icons";
 
 export {
   colors,
   grey,
   avatarTypography,
+  badgeTypography,
+  statCardTypography,
+  segmentedToggleTypography,
+  counterTypography,
+  ratingTypography,
+  commentCardTypography,
   buttonTypography,
   datePickerTypography,
   inputTypography,

package/src/theme/colors.test.ts

@@ -6,6 +6,12 @@ describe("design tokens", () => {
   it("exposes primary and button typography used by Button", () => {
     expect(colors.primary).toBe("#B46436");
     expect(colors.dark).toBe("#090909");
+    expect(colors.green).toBe("#34A853");
+    expect(colors.whiteAlpha86).toBe("#FFFFFFDB");
+    expect(colors.whiteAlpha40).toBe("#FFFFFF66");
+    expect(colors.whiteAlpha20).toBe("#FFFFFF33");
+    expect(colors.whiteAlpha10).toBe("#FFFFFF1A");
+    expect(colors.whiteAlpha5).toBe("#FFFFFF0D");
     expect(buttonTypography.lg.fontSize).toBe(14);
     expect(buttonTypography.lg.fontWeight).toBe("600");
   });

package/src/theme/colors.ts

@@ -22,9 +22,15 @@ export const colors = {
   primary: "#B46436",
   black: "#000000",
   white: "#ffffff",
+  whiteAlpha86: "#FFFFFFDB",
+  whiteAlpha40: "#FFFFFF66",
+  whiteAlpha20: "#FFFFFF33",
+  whiteAlpha10: "#FFFFFF1A",
+  whiteAlpha5: "#FFFFFF0D",
   dark: "#090909",
   red: "#A63E3E",
   lightGrey: "#B7B7B7",
+  green: "#34A853",
   primaryMuted: "#B464360F",
   primaryHover: "#B4643633",
   redMuted: "#A63E3E0F",

package/src/theme/index.ts

@@ -4,6 +4,12 @@ export type { GreyStep } from "./colors";
 export {
   fonts,
   avatarTypography,
+  badgeTypography,
+  statCardTypography,
+  segmentedToggleTypography,
+  counterTypography,
+  ratingTypography,
+  commentCardTypography,
   buttonTypography,
   datePickerTypography,
   inputTypography,

package/src/theme/typography.ts

@@ -20,6 +20,83 @@ export const buttonTypography = {
   },
 } as const;
 
+/** Badge label — Regular 14, line-height 112%, letter-spacing 0. */
+export const badgeTypography = {
+  fontFamily: fonts.sans,
+  fontSize: 14,
+  fontWeight: "400" as const,
+  lineHeight: 16,
+  letterSpacing: 0,
+} as const;
+
+/** Stat card label — Medium 16, line-height 100%, letter-spacing 0. */
+export const statCardTypography = {
+  fontFamily: fonts.sans,
+  fontSize: 16,
+  fontWeight: "500" as const,
+  lineHeight: 16,
+  letterSpacing: 0,
+} as const;
+
+/** Segmented toggle label — Medium 14, line-height 100%, letter-spacing 0. */
+export const segmentedToggleTypography = {
+  fontFamily: fonts.sans,
+  fontSize: 14,
+  fontWeight: "500" as const,
+  lineHeight: 14,
+  letterSpacing: 0,
+} as const;
+
+/** Counter value — Bold 14, line-height 100%, letter-spacing 0. */
+export const counterTypography = {
+  fontFamily: fonts.sans,
+  fontSize: 14,
+  fontWeight: "700" as const,
+  lineHeight: 14,
+  letterSpacing: 0,
+} as const;
+
+/** Rating score — Bold 32, line-height 112%, letter-spacing 0. */
+export const ratingTypography = {
+  fontFamily: fonts.sans,
+  fontSize: 32,
+  fontWeight: "700" as const,
+  lineHeight: 35.84,
+  letterSpacing: 0,
+} as const;
+
+/** Comment card identity, body, and action typography. */
+export const commentCardTypography = {
+  name: {
+    fontFamily: fonts.sans,
+    fontSize: 16,
+    fontWeight: "600" as const,
+    lineHeight: 18,
+    letterSpacing: 0,
+  },
+  date: {
+    fontFamily: fonts.sans,
+    fontSize: 14,
+    fontWeight: "400" as const,
+    lineHeight: 16,
+    letterSpacing: 0,
+  },
+  comment: {
+    fontFamily: fonts.sans,
+    fontSize: 14,
+    fontWeight: "400" as const,
+    lineHeight: 19,
+    letterSpacing: 0,
+  },
+  action: {
+    fontFamily: fonts.sans,
+    fontSize: 12,
+    fontWeight: "700" as const,
+    lineHeight: 12,
+    letterSpacing: 0,
+  },
+} as const;
+
 /** Input label / field / hint typography. */
 export const inputTypography = {
   label: {