@ecohouse/ui 0.1.32 → 0.1.33

package/src/icons/VideoOff/VideoOffIcon.web.tsx

@@ -0,0 +1,27 @@
+import { VIDEO_OFF_PATH } from "./videoOffPath";
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+
+/** Web / Storybook — plain SVG (no react-native-svg). */
+export function VideoOffIcon({ size = 24, color = colors.primary, strokeWidth = 2 }: IconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden
+    >
+      <path
+        d={VIDEO_OFF_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export { VIDEO_OFF_PATH } from "./videoOffPath";

package/src/icons/VideoOff/index.ts

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

package/src/icons/VideoOff/videoOffPath.ts

@@ -0,0 +1,2 @@
+export const VIDEO_OFF_PATH =
+  "M5 5C3.34315 5 2 6.34315 2 8V16C2 17.6569 3.34315 19 5 19H14C15.3527 19 16.4962 18.1048 16.8705 16.8745M17 12L20.6343 8.36569C21.0627 7.93731 21.2769 7.72312 21.4608 7.70865C21.6203 7.69609 21.7763 7.76068 21.8802 7.88238C22 8.02265 22 8.32556 22 8.93137V15.0686C22 15.6744 22 15.9774 21.8802 16.1176C21.7763 16.2393 21.6203 16.3039 21.4608 16.2914C21.2769 16.2769 21.0627 16.0627 20.6343 15.6343L17 12ZM17 12V9.8C17 8.11984 17 7.27976 16.673 6.63803C16.3854 6.07354 15.9265 5.6146 15.362 5.32698C14.7202 5 13.8802 5 12.2 5H9.5M2 2L22 22";

package/src/icons/ZoomOut/ZoomOutIcon.tsx

@@ -0,0 +1,21 @@
+import Svg, { Path } from "react-native-svg";
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+import { ZOOM_OUT_PATH } from "./zoomOutPath";
+
+export { ZOOM_OUT_PATH } from "./zoomOutPath";
+
+/** Exit-fullscreen / zoom-out corners control (24×24 viewBox). */
+export function ZoomOutIcon({ size = 24, color = colors.primary, strokeWidth = 2 }: IconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <Path
+        d={ZOOM_OUT_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}

package/src/icons/ZoomOut/index.ts

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

package/src/icons/ZoomOut/zoomOutPath.ts

@@ -0,0 +1,2 @@
+export const ZOOM_OUT_PATH =
+  "M3 8H3.2C4.88016 8 5.72024 8 6.36197 7.67302C6.92646 7.3854 7.3854 6.92646 7.67302 6.36197C8 5.72024 8 4.88016 8 3.2V3M3 16H3.2C4.88016 16 5.72024 16 6.36197 16.327C6.92646 16.6146 7.3854 17.0735 7.67302 17.638C8 18.2798 8 19.1198 8 20.8V21M16 3V3.2C16 4.88016 16 5.72024 16.327 6.36197C16.6146 6.92646 17.0735 7.3854 17.638 7.67302C18.2798 8 19.1198 8 20.8 8H21M16 21V20.8C16 19.1198 16 18.2798 16.327 17.638C16.6146 17.0735 17.0735 16.6146 17.638 16.327C18.2798 16 19.1198 16 20.8 16H21";

package/src/icons/index.ts

@@ -11,6 +11,7 @@ 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";
@@ -45,6 +46,7 @@ export {
 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";
@@ -80,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

@@ -2,6 +2,7 @@ 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";
@@ -36,6 +37,7 @@ import {
 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";
@@ -69,6 +71,8 @@ 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 = {
@@ -77,6 +81,7 @@ export const icons = {
   apple: AppleIcon,
   arrowRight: ArrowRightIcon,
   bag: BagIcon,
+  ban: BanIcon,
   bell: BellIcon,
   building: BuildingIcon,
   calendar: CalendarIcon,
@@ -98,6 +103,7 @@ export const icons = {
   cardLocation: CardLocationIcon,
   facebook: FacebookIcon,
   filters: FiltersIcon,
+  fullscreen: FullscreenIcon,
   guests: GuestsIcon,
   heart: HeartIcon,
   globe: GlobeIcon,
@@ -143,7 +149,9 @@ export const icons = {
   user: UserIcon,
   usersAlt: UsersAltIcon,
   video: VideoIcon,
+  videoOff: VideoOffIcon,
   whatsApp: WhatsAppIcon,
+  zoomOut: ZoomOutIcon,
 } as const satisfies Record<string, IconComponent>;
 
 export type IconName = keyof typeof icons;
@@ -168,6 +176,7 @@ export const iconGroups = {
   actions: [
     "show",
     "alertTriangle",
+    "ban",
     "bell",
     "camera",
     "key",
@@ -185,7 +194,9 @@ export const iconGroups = {
     "saveHeart",
     "share",
     "filters",
+    "fullscreen",
     "heart",
+    "zoomOut",
     "star",
     "starFilled",
     "minus",
@@ -212,6 +223,7 @@ export const iconGroups = {
     "user",
     "usersAlt",
     "video",
+    "videoOff",
     "whatsApp",
   ],
   communication: ["mail", "phone"],

package/src/index.ts

@@ -5,6 +5,7 @@ export {
   Badge,
   StatusBadge,
   PaginationDots,
+  StepPager,
   InfoTile,
   StepList,
   Counter,
@@ -36,6 +37,7 @@ export type {
   StatusBadgeProps,
   StatusBadgeTone,
   PaginationDotsProps,
+  StepPagerProps,
   InfoTileProps,
   StepListProps,
   CounterProps,
@@ -106,6 +108,7 @@ export {
   getIconsByGroup,
   ArrowRightIcon,
   BagIcon,
+  BanIcon,
   BellIcon,
   BuildingIcon,
   CalendarIcon,
@@ -139,6 +142,7 @@ export {
   TrashIcon,
   FacebookIcon,
   FiltersIcon,
+  FullscreenIcon,
   HeartIcon,
   GlobeIcon,
   GooglePlayIcon,
@@ -174,6 +178,8 @@ export {
   UserIcon,
   UsersAltIcon,
   VideoIcon,
+  VideoOffIcon,
+  ZoomOutIcon,
 } from "./icons";
 export type {
   IconProps,
@@ -208,3 +214,5 @@ export {
 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/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: {
@@ -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/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";
+}