@ecohouse/ui 0.1.30 → 0.1.32

package/src/icons/index.ts

@@ -7,6 +7,7 @@ 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";
@@ -21,6 +22,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,11 +36,13 @@ 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 { HeartIcon } from "./Heart";
@@ -52,6 +56,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 +68,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";

package/src/icons/registry.ts

@@ -1,4 +1,5 @@
 import { ArrowRightIcon } from "./ArrowRight";
+import { AlertTriangleIcon } from "./AlertTriangle";
 import { AppleIcon, GooglePlayIcon } from "./Store";
 import { BagIcon } from "./Bag";
 import { BellIcon } from "./Bell";
@@ -12,6 +13,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,11 +27,13 @@ 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 { HeartIcon } from "./Heart";
@@ -42,6 +46,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 +57,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";
@@ -64,6 +72,7 @@ import { VideoIcon } from "./Video";
 import type { IconComponent } from "./types";
 
 export const icons = {
+  alertTriangle: AlertTriangleIcon,
   areaExpand: AreaExpandIcon,
   apple: AppleIcon,
   arrowRight: ArrowRightIcon,
@@ -80,8 +89,10 @@ export const icons = {
   chevronLeft: ChevronLeftIcon,
   clock: ClockIcon,
   close: CloseIcon,
+  edit: EditIcon,
   clockFilled: ClockFilledIcon,
   copy: CopyIcon,
+  download: DownloadIcon,
   bathrooms: BathroomsIcon,
   bedrooms: BedroomsIcon,
   cardLocation: CardLocationIcon,
@@ -99,6 +110,8 @@ export const icons = {
   linkedin: LinkedInIcon,
   listView: ListViewIcon,
   locationPin: LocationPinIcon,
+  locationUser: LocationUserIcon,
+  lock: LockIcon,
   logOut: LogOutIcon,
   mail: MailIcon,
   mapView: MapViewIcon,
@@ -107,10 +120,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,6 +139,7 @@ export const icons = {
   star: StarIcon,
   starFilled: StarFilledIcon,
   tooltipArrow: TooltipArrowIcon,
+  trash: TrashIcon,
   user: UserIcon,
   usersAlt: UsersAltIcon,
   video: VideoIcon,
@@ -139,6 +158,7 @@ export const iconGroups = {
     "home",
     "listView",
     "locationPin",
+    "locationUser",
     "mapCollapse",
     "mapExpand",
     "mapView",
@@ -147,6 +167,7 @@ export const iconGroups = {
   ],
   actions: [
     "show",
+    "alertTriangle",
     "bell",
     "camera",
     "key",
@@ -154,10 +175,12 @@ export const iconGroups = {
     "checkBadge",
     "checkSuccess",
     "copy",
+    "download",
     "search",
     "calendar",
     "calendarOutline",
     "close",
+    "edit",
     "ratingStar",
     "saveHeart",
     "share",
@@ -167,6 +190,8 @@ export const iconGroups = {
     "starFilled",
     "minus",
     "plus",
+    "refresh",
+    "refundStatus",
     "sort",
   ],
   objects: [
@@ -178,7 +203,12 @@ export const iconGroups = {
     "clock",
     "clockFilled",
     "guests",
+    "lock",
+    "noSmoking",
+    "paw",
     "qrCode",
+    "quietHours",
+    "trash",
     "user",
     "usersAlt",
     "video",

package/src/index.ts

@@ -1,7 +1,12 @@
 export {
   Avatar,
   AvatarSimple,
+  AccountHeader,
   Badge,
+  StatusBadge,
+  PaginationDots,
+  InfoTile,
+  StepList,
   Counter,
   SegmentedToggle,
   Sidebar,
@@ -11,6 +16,7 @@ export {
   Button,
   Checkbox,
   DatePicker,
+  FloatingActionButton,
   Input,
   VerificationCodeInput,
   Select,
@@ -24,8 +30,14 @@ export type {
   AvatarProps,
   AvatarMenuItem,
   AvatarSimpleProps,
+  AccountHeaderProps,
   BadgeProps,
   BadgeVariant,
+  StatusBadgeProps,
+  StatusBadgeTone,
+  PaginationDotsProps,
+  InfoTileProps,
+  StepListProps,
   CounterProps,
   SegmentedToggleOption,
   SegmentedToggleProps,
@@ -45,6 +57,7 @@ export type {
   DatePickerRangeProps,
   DatePickerVariant,
   DateRange,
+  FloatingActionButtonProps,
   InputIcon,
   InputProps,
   InputSize,
@@ -84,6 +97,7 @@ export type {
 export {
   Icon,
   AmenityIcon,
+  AlertTriangleIcon,
   AppleIcon,
   icons,
   iconNames,
@@ -103,6 +117,7 @@ export {
   ChevronLeftIcon,
   ClockIcon,
   CloseIcon,
+  EditIcon,
   BathroomsIcon,
   BedroomsIcon,
   CardLocationIcon,
@@ -113,10 +128,15 @@ export {
   CheckSuccessIcon,
   ClockFilledIcon,
   CopyIcon,
+  DownloadIcon,
   QrCodeIcon,
   ShareIcon,
   TooltipArrowIcon,
   WhatsAppIcon,
+  QuietHoursIcon,
+  NoSmokingIcon,
+  PawIcon,
+  TrashIcon,
   FacebookIcon,
   FiltersIcon,
   HeartIcon,
@@ -130,6 +150,8 @@ export {
   LinkedInIcon,
   ListViewIcon,
   LocationPinIcon,
+  LocationUserIcon,
+  LockIcon,
   LogOutIcon,
   MailIcon,
   MapViewIcon,
@@ -140,6 +162,8 @@ export {
   NavigateIcon,
   PhoneIcon,
   PlusIcon,
+  RefreshIcon,
+  RefundStatusIcon,
   SearchIcon,
   SettingsIcon,
   ShowIcon,
@@ -182,3 +206,5 @@ export {
   fonts,
 } from "./theme";
 export type { GreyStep } from "./theme";
+
+export { abbreviateMonthName, formatDate, formatDateDayShortMonth } from "./utils/dateUtils";

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

@@ -193,7 +193,7 @@ export const datePickerTypography = {
     fontFamily: fonts.sans,
     fontSize: 12,
     fontWeight: "400" as const,
-    lineHeight: 12,
+    lineHeight: 14,
     letterSpacing: 0.36,
   },
   rangeLabel: {

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