@ecohouse/ui 0.1.31 → 0.1.33

package/src/icons/index.ts

@@ -7,9 +7,11 @@ export { Icon } from "./Icon";
 
 export { AmenityIcon } from "./Amenity";
 export type { AmenityIconProps, AmenityName } from "./Amenity";
+export { AlertTriangleIcon } from "./AlertTriangle";
 export { AppleIcon } from "./Store";
 export { ArrowRightIcon } from "./ArrowRight";
 export { BagIcon } from "./Bag";
+export { BanIcon } from "./Ban";
 export { BellIcon } from "./Bell";
 export { BuildingIcon } from "./Building";
 export { CalendarIcon } from "./Calendar";
@@ -21,6 +23,7 @@ export { ChevronDownIcon } from "./ChevronDown";
 export { ChevronLeftIcon } from "./ChevronLeft";
 export { ClockIcon } from "./Clock";
 export { CloseIcon } from "./Close";
+export { EditIcon } from "./Edit";
 export {
   BathroomsIcon,
   BedroomsIcon,
@@ -34,13 +37,16 @@ export {
   CheckSuccessIcon,
   ClockFilledIcon,
   CopyIcon,
+  DownloadIcon,
   QrCodeIcon,
   ShareIcon,
   TooltipArrowIcon,
   WhatsAppIcon,
 } from "./CottageDetail";
+export { QuietHoursIcon, NoSmokingIcon, PawIcon, TrashIcon } from "./HouseRules";
 export { FacebookIcon } from "./Facebook";
 export { FiltersIcon } from "./Filters";
+export { FullscreenIcon } from "./Fullscreen";
 export { HeartIcon } from "./Heart";
 export { GlobeIcon } from "./Globe";
 export { GooglePlayIcon } from "./Store";
@@ -52,6 +58,8 @@ export { LayoutGridIcon } from "./LayoutGrid";
 export { LinkedInIcon } from "./LinkedIn";
 export { ListViewIcon } from "./ListView";
 export { LocationPinIcon } from "./LocationPin";
+export { LocationUserIcon } from "./LocationUser";
+export { LockIcon } from "./Lock";
 export { LogOutIcon } from "./LogOut";
 export { MailIcon } from "./Mail";
 export { MapViewIcon } from "./MapView";
@@ -62,6 +70,8 @@ export { NavigateIcon } from "./Navigate";
 export { PhoneIcon } from "./Phone";
 export { PlusIcon } from "./Plus";
 export { MinusIcon } from "./Minus";
+export { RefreshIcon } from "./Refresh";
+export { RefundStatusIcon } from "./RefundStatus";
 export { SearchIcon } from "./Search";
 export { SettingsIcon } from "./Settings";
 export { ShowIcon } from "./Show";
@@ -72,4 +82,6 @@ export { StarFilledIcon } from "./StarFilled";
 export { UserIcon } from "./User";
 export { UsersAltIcon } from "./UsersAlt";
 export { VideoIcon } from "./Video";
+export { VideoOffIcon } from "./VideoOff";
+export { ZoomOutIcon } from "./ZoomOut";
 export type { StarIconProps } from "./Star";

package/src/icons/registry.ts

@@ -1,6 +1,8 @@
 import { ArrowRightIcon } from "./ArrowRight";
+import { AlertTriangleIcon } from "./AlertTriangle";
 import { AppleIcon, GooglePlayIcon } from "./Store";
 import { BagIcon } from "./Bag";
+import { BanIcon } from "./Ban";
 import { BellIcon } from "./Bell";
 import { BuildingIcon } from "./Building";
 import { CalendarIcon } from "./Calendar";
@@ -12,6 +14,7 @@ import { ChevronDownIcon } from "./ChevronDown";
 import { ChevronLeftIcon } from "./ChevronLeft";
 import { ClockIcon } from "./Clock";
 import { CloseIcon } from "./Close";
+import { EditIcon } from "./Edit";
 import {
   BathroomsIcon,
   BedroomsIcon,
@@ -25,13 +28,16 @@ import {
   CheckSuccessIcon,
   ClockFilledIcon,
   CopyIcon,
+  DownloadIcon,
   QrCodeIcon,
   ShareIcon,
   TooltipArrowIcon,
   WhatsAppIcon,
 } from "./CottageDetail";
+import { NoSmokingIcon, PawIcon, QuietHoursIcon, TrashIcon } from "./HouseRules";
 import { FacebookIcon } from "./Facebook";
 import { FiltersIcon } from "./Filters";
+import { FullscreenIcon } from "./Fullscreen";
 import { HeartIcon } from "./Heart";
 import { GlobeIcon } from "./Globe";
 import { HelpCircleIcon } from "./HelpCircle";
@@ -42,6 +48,8 @@ import { LayoutGridIcon } from "./LayoutGrid";
 import { LinkedInIcon } from "./LinkedIn";
 import { ListViewIcon } from "./ListView";
 import { LocationPinIcon } from "./LocationPin";
+import { LocationUserIcon } from "./LocationUser";
+import { LockIcon } from "./Lock";
 import { LogOutIcon } from "./LogOut";
 import { MailIcon } from "./Mail";
 import { MapViewIcon } from "./MapView";
@@ -51,6 +59,8 @@ import { MinusIcon } from "./Minus";
 import { NavigateIcon } from "./Navigate";
 import { PhoneIcon } from "./Phone";
 import { PlusIcon } from "./Plus";
+import { RefreshIcon } from "./Refresh";
+import { RefundStatusIcon } from "./RefundStatus";
 import { SearchIcon } from "./Search";
 import { SettingsIcon } from "./Settings";
 import { ShowIcon } from "./Show";
@@ -61,13 +71,17 @@ import { StarFilledIcon } from "./StarFilled";
 import { UserIcon } from "./User";
 import { UsersAltIcon } from "./UsersAlt";
 import { VideoIcon } from "./Video";
+import { VideoOffIcon } from "./VideoOff";
+import { ZoomOutIcon } from "./ZoomOut";
 import type { IconComponent } from "./types";
 
 export const icons = {
+  alertTriangle: AlertTriangleIcon,
   areaExpand: AreaExpandIcon,
   apple: AppleIcon,
   arrowRight: ArrowRightIcon,
   bag: BagIcon,
+  ban: BanIcon,
   bell: BellIcon,
   building: BuildingIcon,
   calendar: CalendarIcon,
@@ -80,13 +94,16 @@ export const icons = {
   chevronLeft: ChevronLeftIcon,
   clock: ClockIcon,
   close: CloseIcon,
+  edit: EditIcon,
   clockFilled: ClockFilledIcon,
   copy: CopyIcon,
+  download: DownloadIcon,
   bathrooms: BathroomsIcon,
   bedrooms: BedroomsIcon,
   cardLocation: CardLocationIcon,
   facebook: FacebookIcon,
   filters: FiltersIcon,
+  fullscreen: FullscreenIcon,
   guests: GuestsIcon,
   heart: HeartIcon,
   globe: GlobeIcon,
@@ -99,6 +116,8 @@ export const icons = {
   linkedin: LinkedInIcon,
   listView: ListViewIcon,
   locationPin: LocationPinIcon,
+  locationUser: LocationUserIcon,
+  lock: LockIcon,
   logOut: LogOutIcon,
   mail: MailIcon,
   mapView: MapViewIcon,
@@ -107,10 +126,15 @@ export const icons = {
   menu: MenuIcon,
   minus: MinusIcon,
   navigate: NavigateIcon,
+  noSmoking: NoSmokingIcon,
+  paw: PawIcon,
   phone: PhoneIcon,
   qrCode: QrCodeIcon,
+  quietHours: QuietHoursIcon,
   ratingStar: RatingStarIcon,
   plus: PlusIcon,
+  refresh: RefreshIcon,
+  refundStatus: RefundStatusIcon,
   search: SearchIcon,
   saveHeart: SaveHeartIcon,
   share: ShareIcon,
@@ -121,10 +145,13 @@ export const icons = {
   star: StarIcon,
   starFilled: StarFilledIcon,
   tooltipArrow: TooltipArrowIcon,
+  trash: TrashIcon,
   user: UserIcon,
   usersAlt: UsersAltIcon,
   video: VideoIcon,
+  videoOff: VideoOffIcon,
   whatsApp: WhatsAppIcon,
+  zoomOut: ZoomOutIcon,
 } as const satisfies Record<string, IconComponent>;
 
 export type IconName = keyof typeof icons;
@@ -139,6 +166,7 @@ export const iconGroups = {
     "home",
     "listView",
     "locationPin",
+    "locationUser",
     "mapCollapse",
     "mapExpand",
     "mapView",
@@ -147,6 +175,8 @@ export const iconGroups = {
   ],
   actions: [
     "show",
+    "alertTriangle",
+    "ban",
     "bell",
     "camera",
     "key",
@@ -154,19 +184,25 @@ export const iconGroups = {
     "checkBadge",
     "checkSuccess",
     "copy",
+    "download",
     "search",
     "calendar",
     "calendarOutline",
     "close",
+    "edit",
     "ratingStar",
     "saveHeart",
     "share",
     "filters",
+    "fullscreen",
     "heart",
+    "zoomOut",
     "star",
     "starFilled",
     "minus",
     "plus",
+    "refresh",
+    "refundStatus",
     "sort",
   ],
   objects: [
@@ -178,10 +214,16 @@ export const iconGroups = {
     "clock",
     "clockFilled",
     "guests",
+    "lock",
+    "noSmoking",
+    "paw",
     "qrCode",
+    "quietHours",
+    "trash",
     "user",
     "usersAlt",
     "video",
+    "videoOff",
     "whatsApp",
   ],
   communication: ["mail", "phone"],

package/src/index.ts

@@ -1,7 +1,13 @@
 export {
   Avatar,
   AvatarSimple,
+  AccountHeader,
   Badge,
+  StatusBadge,
+  PaginationDots,
+  StepPager,
+  InfoTile,
+  StepList,
   Counter,
   SegmentedToggle,
   Sidebar,
@@ -11,6 +17,7 @@ export {
   Button,
   Checkbox,
   DatePicker,
+  FloatingActionButton,
   Input,
   VerificationCodeInput,
   Select,
@@ -24,8 +31,15 @@ export type {
   AvatarProps,
   AvatarMenuItem,
   AvatarSimpleProps,
+  AccountHeaderProps,
   BadgeProps,
   BadgeVariant,
+  StatusBadgeProps,
+  StatusBadgeTone,
+  PaginationDotsProps,
+  StepPagerProps,
+  InfoTileProps,
+  StepListProps,
   CounterProps,
   SegmentedToggleOption,
   SegmentedToggleProps,
@@ -45,6 +59,7 @@ export type {
   DatePickerRangeProps,
   DatePickerVariant,
   DateRange,
+  FloatingActionButtonProps,
   InputIcon,
   InputProps,
   InputSize,
@@ -84,6 +99,7 @@ export type {
 export {
   Icon,
   AmenityIcon,
+  AlertTriangleIcon,
   AppleIcon,
   icons,
   iconNames,
@@ -92,6 +108,7 @@ export {
   getIconsByGroup,
   ArrowRightIcon,
   BagIcon,
+  BanIcon,
   BellIcon,
   BuildingIcon,
   CalendarIcon,
@@ -103,6 +120,7 @@ export {
   ChevronLeftIcon,
   ClockIcon,
   CloseIcon,
+  EditIcon,
   BathroomsIcon,
   BedroomsIcon,
   CardLocationIcon,
@@ -113,12 +131,18 @@ export {
   CheckSuccessIcon,
   ClockFilledIcon,
   CopyIcon,
+  DownloadIcon,
   QrCodeIcon,
   ShareIcon,
   TooltipArrowIcon,
   WhatsAppIcon,
+  QuietHoursIcon,
+  NoSmokingIcon,
+  PawIcon,
+  TrashIcon,
   FacebookIcon,
   FiltersIcon,
+  FullscreenIcon,
   HeartIcon,
   GlobeIcon,
   GooglePlayIcon,
@@ -130,6 +154,8 @@ export {
   LinkedInIcon,
   ListViewIcon,
   LocationPinIcon,
+  LocationUserIcon,
+  LockIcon,
   LogOutIcon,
   MailIcon,
   MapViewIcon,
@@ -140,6 +166,8 @@ export {
   NavigateIcon,
   PhoneIcon,
   PlusIcon,
+  RefreshIcon,
+  RefundStatusIcon,
   SearchIcon,
   SettingsIcon,
   ShowIcon,
@@ -150,6 +178,8 @@ export {
   UserIcon,
   UsersAltIcon,
   VideoIcon,
+  VideoOffIcon,
+  ZoomOutIcon,
 } from "./icons";
 export type {
   IconProps,
@@ -182,3 +212,7 @@ export {
   fonts,
 } from "./theme";
 export type { GreyStep } from "./theme";
+
+export { abbreviateMonthName, formatDate, formatDateDayShortMonth } from "./utils/dateUtils";
+export { resolvePopoverAlign } from "./utils/popoverAlign";
+export type { PopoverAlign, ResolvePopoverAlignOptions } from "./utils/popoverAlign";

package/src/theme/colors.test.ts

@@ -30,7 +30,7 @@ describe("design tokens", () => {
       fontSize: 12,
       fontWeight: "400",
       letterSpacing: 0.36,
-      lineHeight: 12,
+      lineHeight: 16,
     };
 
     expect(inputTypography.field).toMatchObject(fieldTypography);

package/src/theme/colors.ts

@@ -33,10 +33,13 @@ export const colors = {
   red: "#A63E3E",
   lightGrey: "#B7B7B7",
   green: "#34A853",
+  greenMuted: "#34A85329",
   primaryMuted: "#B464360F",
   primaryHover: "#B4643633",
   redMuted: "#A63E3E0F",
   redHover: "#A63E3E33",
+  greyMuted: "#76767629",
+  cancelledMuted: "#A63E3E29",
 
   grey0: grey["0"],
   grey50: grey["0.5"],
@@ -47,6 +50,7 @@ export const colors = {
   grey400: grey["4"],
   grey500: grey["5"],
   grey600: grey["6"],
+  grey650: "#1B1B1B",
   grey700: grey["7"],
   grey750: grey["7.5"],
   grey800: grey["8"],

package/src/theme/typography.ts

@@ -119,7 +119,7 @@ export const inputTypography = {
     fontFamily: fonts.sans,
     fontSize: 12,
     fontWeight: "400" as const,
-    lineHeight: 12,
+    lineHeight: 16,
     letterSpacing: 0.36,
   },
   hint: {
@@ -144,7 +144,7 @@ export const selectTypography = {
     fontFamily: fonts.sans,
     fontSize: 12,
     fontWeight: "400" as const,
-    lineHeight: 12,
+    lineHeight: 16,
     letterSpacing: 0.36,
   },
   hint: {
@@ -169,7 +169,7 @@ export const avatarTypography = {
     fontFamily: fonts.sans,
     fontSize: 12,
     fontWeight: "400" as const,
-    lineHeight: 12,
+    lineHeight: 14,
     letterSpacing: 0,
   },
   menuItem: {
@@ -193,7 +193,7 @@ export const datePickerTypography = {
     fontFamily: fonts.sans,
     fontSize: 12,
     fontWeight: "400" as const,
-    lineHeight: 12,
+    lineHeight: 14,
     letterSpacing: 0.36,
   },
   rangeLabel: {
@@ -255,7 +255,7 @@ export const textareaTypography = {
     fontFamily: fonts.sans,
     fontSize: 12,
     fontWeight: "400" as const,
-    lineHeight: 12,
+    lineHeight: 16,
     letterSpacing: 0.36,
   },
   hint: {

package/src/utils/dateUtils.ts

@@ -57,6 +57,31 @@ export function formatDate(date: Date): string {
   return `${day}.${month}.${date.getFullYear()}`;
 }
 
+/**
+ * Shortens a month name to `letterCount` letters.
+ * Armenian digraph «ու» counts as one letter so «Հուլիս» → «Հուլ», not «Հու».
+ */
+export function abbreviateMonthName(monthName: string, letterCount = 3): string {
+  const chars = Array.from(monthName);
+  let visual = 0;
+  let end = 0;
+  while (end < chars.length && visual < letterCount) {
+    if (chars[end] === "ո" && chars[end + 1] === "ւ") {
+      end += 2;
+    } else {
+      end += 1;
+    }
+    visual += 1;
+  }
+  return chars.slice(0, end).join("");
+}
+
+/** "15 Հուլ 2026" — day + abbreviated month + year for range triggers. */
+export function formatDateDayShortMonth(date: Date, monthNames: string[], letterCount = 3): string {
+  const month = abbreviateMonthName(monthNames[date.getMonth()] ?? "", letterCount);
+  return `${date.getDate()} ${month} ${date.getFullYear()}`;
+}
+
 /**
  * Builds a 6×7 grid of calendar days for the month containing `monthDate`,
  * including the leading/trailing days from adjacent months needed to fill

package/src/utils/popoverAlign.ts

@@ -0,0 +1,85 @@
+export type PopoverAlign = "center" | "start" | "end";
+
+export type ResolvePopoverAlignOptions = {
+  /** Trigger element bounds in viewport coordinates. */
+  triggerRect: Pick<DOMRect, "left" | "right" | "width">;
+  /** Popover panel width in px. */
+  panelWidth: number;
+  /** Viewport width in px. */
+  viewportWidth: number;
+  /** Minimum gap from the viewport edges. Defaults to 8. */
+  padding?: number;
+  /**
+   * `auto` (default): prefer center, then end (opens left), then start (opens right).
+   * Fixed values force that alignment.
+   */
+  preferred?: PopoverAlign | "auto";
+};
+
+function fitsCenter(
+  triggerRect: Pick<DOMRect, "left" | "width">,
+  panelWidth: number,
+  viewportWidth: number,
+  padding: number,
+) {
+  const centerX = triggerRect.left + triggerRect.width / 2;
+  const left = centerX - panelWidth / 2;
+  const right = centerX + panelWidth / 2;
+  return left >= padding && right <= viewportWidth - padding;
+}
+
+function fitsEnd(triggerRect: Pick<DOMRect, "right">, panelWidth: number, padding: number) {
+  return triggerRect.right - panelWidth >= padding;
+}
+
+function fitsStart(
+  triggerRect: Pick<DOMRect, "left">,
+  panelWidth: number,
+  viewportWidth: number,
+  padding: number,
+) {
+  return triggerRect.left + panelWidth <= viewportWidth - padding;
+}
+
+/**
+ * Picks horizontal popover alignment so the panel stays in view.
+ * Preference for `auto`: center → start (rightward) → end (leftward)
+ * when the trigger sits near the left edge (common for card actions).
+ */
+export function resolvePopoverAlign({
+  triggerRect,
+  panelWidth,
+  viewportWidth,
+  padding = 8,
+  preferred = "auto",
+}: ResolvePopoverAlignOptions): PopoverAlign {
+  if (preferred !== "auto") {
+    return preferred;
+  }
+
+  if (fitsCenter(triggerRect, panelWidth, viewportWidth, padding)) {
+    return "center";
+  }
+
+  const spaceLeft = triggerRect.right - padding;
+  const spaceRight = viewportWidth - padding - triggerRect.left;
+
+  // Prefer opening toward the side with more room.
+  if (spaceRight >= spaceLeft) {
+    if (fitsStart(triggerRect, panelWidth, viewportWidth, padding)) {
+      return "start";
+    }
+    if (fitsEnd(triggerRect, panelWidth, padding)) {
+      return "end";
+    }
+  } else {
+    if (fitsEnd(triggerRect, panelWidth, padding)) {
+      return "end";
+    }
+    if (fitsStart(triggerRect, panelWidth, viewportWidth, padding)) {
+      return "start";
+    }
+  }
+
+  return spaceRight >= spaceLeft ? "start" : "end";
+}