@ecohouse/ui 0.1.59 → 0.1.61

package/src/icons/GoogleBrand/GoogleBrandIcon.tsx

@@ -0,0 +1,15 @@
+import Svg, { Path } from "react-native-svg";
+import type { IconProps } from "../types";
+import { GOOGLE_BRAND_PATHS } from "./googleBrandPaths";
+
+export { GOOGLE_BRAND_PATHS } from "./googleBrandPaths";
+
+export function GoogleBrandIcon({ size = 18 }: IconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 18 18" fill="none">
+      {GOOGLE_BRAND_PATHS.map((path) => (
+        <Path key={path.fill} clipRule="evenodd" d={path.d} fill={path.fill} fillRule="evenodd" />
+      ))}
+    </Svg>
+  );
+}

package/src/icons/GoogleBrand/GoogleBrandIcon.web.tsx

@@ -0,0 +1,21 @@
+import type { IconProps } from "../types";
+import { GOOGLE_BRAND_PATHS } from "./googleBrandPaths";
+
+export function GoogleBrandIcon({ size = 18 }: IconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 18 18"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden
+    >
+      {GOOGLE_BRAND_PATHS.map((path) => (
+        <path key={path.fill} clipRule="evenodd" d={path.d} fill={path.fill} fillRule="evenodd" />
+      ))}
+    </svg>
+  );
+}
+
+export { GOOGLE_BRAND_PATHS } from "./googleBrandPaths";

package/src/icons/GoogleBrand/googleBrandPaths.ts

@@ -0,0 +1,18 @@
+export const GOOGLE_BRAND_PATHS = [
+  {
+    d: "M17.64 9.20456C17.64 8.56637 17.5827 7.95274 17.4764 7.36365H9V10.845H13.8436C13.635 11.97 13.0009 12.9232 12.0477 13.5614V15.8196H14.9564C16.6582 14.2527 17.64 11.9455 17.64 9.20456Z",
+    fill: "#4285F4",
+  },
+  {
+    d: "M9.00366 18C11.4337 18 13.4709 17.1941 14.96 15.8195L12.0514 13.5613C11.2455 14.1013 10.2146 14.4204 9.00366 14.4204C6.65957 14.4204 4.67548 12.8372 3.96776 10.71H0.960938V13.0418C2.44185 15.9831 5.48548 18 9.00366 18Z",
+    fill: "#34A853",
+  },
+  {
+    d: "M3.96409 10.7099C3.78409 10.1699 3.68182 9.59313 3.68182 8.99995C3.68182 8.40677 3.78409 7.82995 3.96409 7.28995V4.95813H0.957273C0.347727 6.17313 0 7.54768 0 8.99995C0 10.4522 0.347727 11.8268 0.957273 13.0418L3.96409 10.7099Z",
+    fill: "#FBBC05",
+  },
+  {
+    d: "M9.00366 3.57955C10.325 3.57955 11.5114 4.03364 12.4441 4.92545L15.0255 2.34409C13.4668 0.891818 11.4296 0 9.00366 0C5.48548 0 2.44185 2.01682 0.960938 4.95818L3.96776 7.29C4.67548 5.16273 6.65957 3.57955 9.00366 3.57955Z",
+    fill: "#A63E3E",
+  },
+] as const;

package/src/icons/GoogleBrand/index.ts

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

package/src/icons/PaymentCard/PaymentCardIcon.tsx

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

package/src/icons/PaymentCard/PaymentCardIcon.web.tsx

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

package/src/icons/PaymentCard/index.ts

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

package/src/icons/PaymentCard/paymentCardPath.ts

@@ -0,0 +1,3 @@
+/** Filled payment card icon path — 16×16 viewBox. */
+export const PAYMENT_CARD_PATH =
+  "M4.66536 10H6.66536C6.84218 10 7.01174 9.9298 7.13677 9.80478C7.26179 9.67975 7.33203 9.51019 7.33203 9.33337C7.33203 9.15656 7.26179 8.98699 7.13677 8.86197C7.01174 8.73695 6.84218 8.66671 6.66536 8.66671H4.66536C4.48855 8.66671 4.31898 8.73695 4.19396 8.86197C4.06894 8.98699 3.9987 9.15656 3.9987 9.33337C3.9987 9.51019 4.06894 9.67975 4.19396 9.80478C4.31898 9.9298 4.48855 10 4.66536 10ZM12.6654 3.33337H3.33203C2.8016 3.33337 2.29289 3.54409 1.91782 3.91916C1.54274 4.29423 1.33203 4.80294 1.33203 5.33337V11.3334C1.33203 11.8638 1.54274 12.3725 1.91782 12.7476C2.29289 13.1227 2.8016 13.3334 3.33203 13.3334H12.6654C13.1958 13.3334 13.7045 13.1227 14.0796 12.7476C14.4546 12.3725 14.6654 11.8638 14.6654 11.3334V5.33337C14.6654 4.80294 14.4546 4.29423 14.0796 3.91916C13.7045 3.54409 13.1958 3.33337 12.6654 3.33337ZM13.332 11.3334C13.332 11.5102 13.2618 11.6798 13.1368 11.8048C13.0117 11.9298 12.8422 12 12.6654 12H3.33203C3.15522 12 2.98565 11.9298 2.86063 11.8048C2.7356 11.6798 2.66536 11.5102 2.66536 11.3334V7.33337H13.332V11.3334ZM13.332 6.00004H2.66536V5.33337C2.66536 5.15656 2.7356 4.98699 2.86063 4.86197C2.98565 4.73695 3.15522 4.66671 3.33203 4.66671H12.6654C12.8422 4.66671 13.0117 4.73695 13.1368 4.86197C13.2618 4.98699 13.332 5.15656 13.332 5.33337V6.00004Z";

package/src/icons/Receipt/ReceiptIcon.tsx

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

package/src/icons/Receipt/ReceiptIcon.web.tsx

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

package/src/icons/Receipt/index.ts

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

package/src/icons/Receipt/receiptPath.ts

@@ -0,0 +1,3 @@
+/** Filled receipt icon path — 16×16 viewBox. */
+export const RECEIPT_PATH =
+  "M6.66667 5.33337H10.6667C10.8435 5.33337 11.013 5.26314 11.1381 5.13811C11.2631 5.01309 11.3333 4.84352 11.3333 4.66671C11.3333 4.4899 11.2631 4.32033 11.1381 4.1953C11.013 4.07028 10.8435 4.00004 10.6667 4.00004H6.66667C6.48986 4.00004 6.32029 4.07028 6.19526 4.1953C6.07024 4.32033 6 4.4899 6 4.66671C6 4.84352 6.07024 5.01309 6.19526 5.13811C6.32029 5.26314 6.48986 5.33337 6.66667 5.33337ZM5.33333 8.00004H10.6667C10.8435 8.00004 11.013 7.9298 11.1381 7.80478C11.2631 7.67975 11.3333 7.51019 11.3333 7.33337C11.3333 7.15656 11.2631 6.98699 11.1381 6.86197C11.013 6.73695 10.8435 6.66671 10.6667 6.66671H5.33333C5.15652 6.66671 4.98695 6.73695 4.86193 6.86197C4.7369 6.98699 4.66667 7.15656 4.66667 7.33337C4.66667 7.51019 4.7369 7.67975 4.86193 7.80478C4.98695 7.9298 5.15652 8.00004 5.33333 8.00004ZM5.33333 10.6667H10.6667C10.8435 10.6667 11.013 10.5965 11.1381 10.4714C11.2631 10.3464 11.3333 10.1769 11.3333 10C11.3333 9.82323 11.2631 9.65366 11.1381 9.52864C11.013 9.40361 10.8435 9.33337 10.6667 9.33337H5.33333C5.15652 9.33337 4.98695 9.40361 4.86193 9.52864C4.7369 9.65366 4.66667 9.82323 4.66667 10C4.66667 10.1769 4.7369 10.3464 4.86193 10.4714C4.98695 10.5965 5.15652 10.6667 5.33333 10.6667ZM13.3333 1.33337H2.66667C2.48986 1.33337 2.32029 1.40361 2.19526 1.52864C2.07024 1.65366 2 1.82323 2 2.00004V14C2 14.1238 2.03448 14.2452 2.09957 14.3505C2.16466 14.4558 2.25779 14.541 2.36852 14.5963C2.47926 14.6517 2.60323 14.6751 2.72654 14.664C2.84984 14.6529 2.96762 14.6077 3.06667 14.5334L4.44667 13.5L5.82 14.5334C5.9354 14.6199 6.07575 14.6667 6.22 14.6667C6.36425 14.6667 6.5046 14.6199 6.62 14.5334L8 13.5L9.38 14.5334C9.4954 14.6199 9.63575 14.6667 9.78 14.6667C9.92425 14.6667 10.0646 14.6199 10.18 14.5334L11.5533 13.5L12.9333 14.5334C13.0329 14.6075 13.1511 14.6525 13.2748 14.6631C13.3985 14.6737 13.5226 14.6495 13.6333 14.5934C13.7433 14.538 13.8357 14.4532 13.9005 14.3485C13.9652 14.2438 13.9996 14.1232 14 14V2.00004C14 1.82323 13.9298 1.65366 13.8047 1.52864C13.6797 1.40361 13.5101 1.33337 13.3333 1.33337ZM12.6667 12.6667L11.9533 12.1334C11.8379 12.0468 11.6976 12 11.5533 12C11.4091 12 11.2687 12.0468 11.1533 12.1334L9.78 13.1667L8.4 12.1334C8.2846 12.0468 8.14425 12 8 12C7.85575 12 7.7154 12.0468 7.6 12.1334L6.22 13.1667L4.84667 12.1334C4.73127 12.0468 4.59091 12 4.44667 12C4.30242 12 4.16206 12.0468 4.04667 12.1334L3.33333 12.6667V2.66671H12.6667V12.6667Z";

package/src/icons/index.ts

@@ -12,6 +12,7 @@ export { AlertTriangleIcon } from "./AlertTriangle";
 export { AppleIcon } from "./Store";
 export { ArrowLeftIcon } from "./ArrowLeft";
 export { ArrowRightIcon } from "./ArrowRight";
+export { BackspaceIcon } from "./Backspace";
 export { BagIcon } from "./Bag";
 export { BanIcon } from "./Ban";
 export { BlockedGuestsIcon } from "./BlockedGuests";
@@ -59,6 +60,7 @@ export {
 export { QuietHoursIcon, NoSmokingIcon, PawIcon, TrashIcon } from "./HouseRules";
 export { FacebookIcon } from "./Facebook";
 export { FiltersIcon } from "./Filters";
+export { FingerprintIcon } from "./Fingerprint";
 export { FullscreenIcon } from "./Fullscreen";
 export { CutleryIcon } from "./Cutlery";
 export { DollarIcon } from "./Dollar";
@@ -68,6 +70,7 @@ export { DoubleCheckIcon } from "./DoubleCheck";
 export { HeartIcon } from "./Heart";
 export { HeadsetIcon } from "./Headset";
 export { GlobeIcon } from "./Globe";
+export { GoogleBrandIcon } from "./GoogleBrand";
 export { GooglePlayIcon } from "./Store";
 export { HelpCircleIcon } from "./HelpCircle";
 export { HideIcon } from "./Hide";
@@ -99,9 +102,11 @@ export { NotificationQrCodeIcon } from "./NotificationQrCode";
 export { NotificationSuccessIcon } from "./NotificationSuccess";
 export { NotificationWarningIcon } from "./NotificationWarning";
 export { PhoneIcon } from "./Phone";
+export { PaymentCardIcon } from "./PaymentCard";
 export { PlusIcon } from "./Plus";
 export { MinusIcon } from "./Minus";
 export { RefreshIcon } from "./Refresh";
+export { ReceiptIcon } from "./Receipt";
 export { RefundStatusIcon } from "./RefundStatus";
 export { SearchIcon } from "./Search";
 export { SettingsIcon } from "./Settings";

package/src/icons/registry.ts

@@ -2,6 +2,7 @@ import { ActiveGuestsIcon } from "./ActiveGuests";
 import { ArrowRightIcon } from "./ArrowRight";
 import { AlertTriangleIcon } from "./AlertTriangle";
 import { AppleIcon, GooglePlayIcon } from "./Store";
+import { BackspaceIcon } from "./Backspace";
 import { BagIcon } from "./Bag";
 import { BanIcon } from "./Ban";
 import { BlockedGuestsIcon } from "./BlockedGuests";
@@ -47,6 +48,8 @@ import {
 } from "./CottageDetail";
 import { NoSmokingIcon, PawIcon, QuietHoursIcon, TrashIcon } from "./HouseRules";
 import { FacebookIcon } from "./Facebook";
+import { FingerprintIcon } from "./Fingerprint";
+import { GoogleBrandIcon } from "./GoogleBrand";
 import { FiltersIcon } from "./Filters";
 import { FullscreenIcon } from "./Fullscreen";
 import { CutleryIcon } from "./Cutlery";
@@ -87,8 +90,10 @@ import { NotificationQrCodeIcon } from "./NotificationQrCode";
 import { NotificationSuccessIcon } from "./NotificationSuccess";
 import { NotificationWarningIcon } from "./NotificationWarning";
 import { PhoneIcon } from "./Phone";
+import { PaymentCardIcon } from "./PaymentCard";
 import { PlusIcon } from "./Plus";
 import { RefreshIcon } from "./Refresh";
+import { ReceiptIcon } from "./Receipt";
 import { RefundStatusIcon } from "./RefundStatus";
 import { SearchIcon } from "./Search";
 import { SettingsIcon } from "./Settings";
@@ -118,6 +123,7 @@ export const icons = {
   areaExpand: AreaExpandIcon,
   apple: AppleIcon,
   arrowRight: ArrowRightIcon,
+  backspace: BackspaceIcon,
   bag: BagIcon,
   ban: BanIcon,
   blockedGuests: BlockedGuestsIcon,
@@ -148,6 +154,8 @@ export const icons = {
   bedrooms: BedroomsIcon,
   cardLocation: CardLocationIcon,
   facebook: FacebookIcon,
+  fingerprint: FingerprintIcon,
+  googleBrand: GoogleBrandIcon,
   filters: FiltersIcon,
   fullscreen: FullscreenIcon,
   guests: GuestsIcon,
@@ -185,12 +193,14 @@ export const icons = {
   notificationSuccess: NotificationSuccessIcon,
   notificationWarning: NotificationWarningIcon,
   paw: PawIcon,
+  paymentCard: PaymentCardIcon,
   phone: PhoneIcon,
   qrCode: QrCodeIcon,
   quietHours: QuietHoursIcon,
   ratingStar: RatingStarIcon,
   plus: PlusIcon,
   refresh: RefreshIcon,
+  receipt: ReceiptIcon,
   refundStatus: RefundStatusIcon,
   search: SearchIcon,
   saveHeart: SaveHeartIcon,
@@ -282,6 +292,8 @@ export const iconGroups = {
     "smartKey",
     "stayHome",
     "filters",
+    "backspace",
+    "fingerprint",
     "fullscreen",
     "heart",
     "headset",
@@ -333,7 +345,7 @@ export const iconGroups = {
     "notificationQrCode",
     "notificationWarning",
   ],
-  social: ["apple", "facebook", "googlePlay", "instagram", "linkedin"],
+  social: ["apple", "facebook", "googleBrand", "googlePlay", "instagram", "linkedin"],
   interface: [
     "areaExpand",
     "cutlery",

package/src/index.ts

@@ -144,6 +144,7 @@ export {
   getIconsByGroup,
   ArrowLeftIcon,
   ArrowRightIcon,
+  BackspaceIcon,
   BagIcon,
   BanIcon,
   BellIcon,
@@ -188,6 +189,8 @@ export {
   PawIcon,
   TrashIcon,
   FacebookIcon,
+  FingerprintIcon,
+  GoogleBrandIcon,
   FiltersIcon,
   FullscreenIcon,
   HeartIcon,
@@ -222,8 +225,10 @@ export {
   NotificationSuccessIcon,
   NotificationWarningIcon,
   PhoneIcon,
+  PaymentCardIcon,
   PlusIcon,
   RefreshIcon,
+  ReceiptIcon,
   RefundStatusIcon,
   SearchIcon,
   SettingsIcon,

package/src/theme/typography.ts

@@ -2,20 +2,20 @@ export const fonts = {
   sans: "Noto Sans Armenian",
 } as const;
 
-/** Button label — SemiBold, line-height 100%, letter-spacing 3%. */
+/** Button label — SemiBold, 125%+ line-height so Noto Sans Armenian is not clipped. */
 export const buttonTypography = {
   lg: {
     fontFamily: fonts.sans,
     fontSize: 14,
     fontWeight: "600" as const,
-    lineHeight: 14,
+    lineHeight: 20,
     letterSpacing: 0.42,
   },
   sm: {
     fontFamily: fonts.sans,
     fontSize: 12,
     fontWeight: "600" as const,
-    lineHeight: 12,
+    lineHeight: 16,
     letterSpacing: 0.36,
   },
 } as const;
@@ -47,12 +47,12 @@ export const segmentedToggleTypography = {
   letterSpacing: 0,
 } as const;
 
-/** Language switcher trigger and option labels — SemiBold 14, tracking 3%. */
+/** Language switcher trigger and option labels — SemiBold 14, 18px line-height, tracking 3%. */
 export const languageSwitcherTypography = {
   fontFamily: fonts.sans,
   fontSize: 14,
   fontWeight: "600" as const,
-  lineHeight: 14,
+  lineHeight: 18,
   letterSpacing: 0.42,
 } as const;
 
@@ -222,7 +222,7 @@ export const datePickerTypography = {
     fontFamily: fonts.sans,
     fontSize: 14,
     fontWeight: "700" as const,
-    lineHeight: 14,
+    lineHeight: 18,
     letterSpacing: 0,
   },
   /** Weekday header (ԵՐ, ԵՔ, ...) — Regular, uppercase, centered, Grey/300. */
@@ -230,14 +230,14 @@ export const datePickerTypography = {
     fontFamily: fonts.sans,
     fontSize: 12,
     fontWeight: "400" as const,
-    lineHeight: 12,
+    lineHeight: 16,
     letterSpacing: 0,
   },
   day: {
     fontFamily: fonts.sans,
     fontSize: 14,
     fontWeight: "400" as const,
-    lineHeight: 14,
+    lineHeight: 18,
     letterSpacing: 0,
   },
 } as const;

package/src/utils/dateUtils.ts

@@ -83,9 +83,10 @@ export function formatDateDayShortMonth(date: Date, monthNames: string[], letter
 }
 
 /**
- * Builds a 6×7 grid of calendar days for the month containing `monthDate`,
- * including the leading/trailing days from adjacent months needed to fill
- * whole weeks. `weekStartsOn` follows the JS `Date#getDay()` convention
+ * Builds a 4–6 × 7 grid of calendar days for the month containing `monthDate`,
+ * including adjacent-month days only when they share a week with this month.
+ * Trailing weeks that are entirely the next month are omitted.
+ * `weekStartsOn` follows the JS `Date#getDay()` convention
  * (0 = Sunday, 1 = Monday, ...).
  */
 export function getMonthMatrix(monthDate: Date, weekStartsOn: 0 | 1 = 1): Date[][] {
@@ -105,7 +106,9 @@ export function getMonthMatrix(monthDate: Date, weekStartsOn: 0 | 1 = 1): Date[]
       days.push(cursor);
       cursor = new Date(cursor.getFullYear(), cursor.getMonth(), cursor.getDate() + 1);
     }
-    weeks.push(days);
+    if (days.some((day) => day.getMonth() === month)) {
+      weeks.push(days);
+    }
   }
   return weeks;
 }