@ecohouse/ui 0.1.32 → 0.1.34

package/src/index.ts

@@ -5,7 +5,10 @@ export {
   Badge,
   StatusBadge,
   PaginationDots,
+  StepPager,
   InfoTile,
+  ContactInfoCard,
+  AccordionItem,
   StepList,
   Counter,
   SegmentedToggle,
@@ -17,11 +20,13 @@ export {
   Checkbox,
   DatePicker,
   FloatingActionButton,
+  Modal,
   Input,
   VerificationCodeInput,
   Select,
   Textarea,
   Toggle,
+  ToggleRow,
   RatingInput,
   CommentCard,
   Range,
@@ -36,7 +41,10 @@ export type {
   StatusBadgeProps,
   StatusBadgeTone,
   PaginationDotsProps,
+  StepPagerProps,
   InfoTileProps,
+  ContactInfoCardProps,
+  AccordionItemProps,
   StepListProps,
   CounterProps,
   SegmentedToggleOption,
@@ -58,6 +66,7 @@ export type {
   DatePickerVariant,
   DateRange,
   FloatingActionButtonProps,
+  ModalProps,
   InputIcon,
   InputProps,
   InputSize,
@@ -70,6 +79,7 @@ export type {
   SelectMultipleProps,
   TextareaProps,
   ToggleProps,
+  ToggleRowProps,
   RatingInputProps,
   CommentCardProps,
   RangeProps,
@@ -106,11 +116,13 @@ export {
   getIconsByGroup,
   ArrowRightIcon,
   BagIcon,
+  BanIcon,
   BellIcon,
   BuildingIcon,
   CalendarIcon,
   CalendarOutlineIcon,
   CameraIcon,
+  CameraFilledIcon,
   CheckIcon,
   CheckBadgeIcon,
   ChevronDownIcon,
@@ -139,10 +151,13 @@ export {
   TrashIcon,
   FacebookIcon,
   FiltersIcon,
+  FullscreenIcon,
   HeartIcon,
+  HeadsetIcon,
   GlobeIcon,
   GooglePlayIcon,
   HelpCircleIcon,
+  HideIcon,
   HomeIcon,
   InstagramIcon,
   KeyIcon,
@@ -158,6 +173,7 @@ export {
   MapCollapseIcon,
   MapExpandIcon,
   MenuIcon,
+  MenuLinesIcon,
   MinusIcon,
   NavigateIcon,
   PhoneIcon,
@@ -174,6 +190,8 @@ export {
   UserIcon,
   UsersAltIcon,
   VideoIcon,
+  VideoOffIcon,
+  ZoomOutIcon,
 } from "./icons";
 export type {
   IconProps,
@@ -208,3 +226,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";
+}