@ecohouse/ui 0.1.32 → 0.1.34

package/src/components/ContactInfoCard/ContactInfoCard.tsx

@@ -0,0 +1,141 @@
+import { forwardRef, useMemo, useRef, type ComponentRef } from "react";
+import {
+  StyleSheet,
+  Text,
+  useWindowDimensions,
+  View,
+  type StyleProp,
+  type ViewProps,
+  type ViewStyle,
+} from "react-native";
+import type { IconComponent, IconProps } from "../../icons";
+import { colors, fonts } from "../../theme";
+import { mergeRefs } from "../../utils/mergeRefs";
+import { useApplyWebClassName } from "../../utils/useApplyWebClassName";
+
+export interface ContactInfoCardProps extends Omit<ViewProps, "style" | "children"> {
+  title: string;
+  value: string;
+  icon: IconComponent;
+  iconProps?: Omit<IconProps, "size">;
+  iconSize?: number;
+  /** Icon slot fill. Defaults to `#E38E5E0F`. */
+  iconSlotBackgroundColor?: string;
+  style?: StyleProp<ViewStyle>;
+  className?: string;
+}
+
+const DESKTOP_MIN_WIDTH = 1024;
+const CARD_HEIGHT_MOBILE = 78;
+const CARD_HEIGHT_DESKTOP = 96;
+const CARD_PADDING_MOBILE = 16;
+const CARD_PADDING_DESKTOP = 24;
+const CARD_GAP_MOBILE = 16;
+const CARD_GAP_DESKTOP = 24;
+const ICON_SLOT = 48;
+const ICON_SIZE = 24;
+const ICON_SLOT_BG = "#E38E5E0F";
+const ICON_COLOR = "#B76533";
+
+/**
+ * Support contact strip — icon slot + title/value.
+ * Mobile: height 78, padding 16, gap 16, radius 20.
+ * Desktop: height 96, padding 24, gap 24, radius 20.
+ */
+export const ContactInfoCard = forwardRef<ComponentRef<typeof View>, ContactInfoCardProps>(
+  function ContactInfoCard(
+    {
+      title,
+      value,
+      icon: Icon,
+      iconProps,
+      iconSize = ICON_SIZE,
+      iconSlotBackgroundColor = ICON_SLOT_BG,
+      style,
+      className,
+      accessibilityLabel,
+      ...rest
+    },
+    forwardedRef,
+  ) {
+    const containerRef = useRef<ComponentRef<typeof View>>(null);
+    const setContainerRef = useMemo(() => mergeRefs(containerRef, forwardedRef), [forwardedRef]);
+    const { width: viewportWidth } = useWindowDimensions();
+    const isDesktop = viewportWidth >= DESKTOP_MIN_WIDTH;
+
+    useApplyWebClassName(containerRef, className);
+
+    return (
+      <View
+        {...rest}
+        ref={setContainerRef}
+        accessibilityRole="text"
+        accessibilityLabel={accessibilityLabel ?? `${title}. ${value}`}
+        style={[
+          styles.root,
+          {
+            height: isDesktop ? CARD_HEIGHT_DESKTOP : CARD_HEIGHT_MOBILE,
+            gap: isDesktop ? CARD_GAP_DESKTOP : CARD_GAP_MOBILE,
+            padding: isDesktop ? CARD_PADDING_DESKTOP : CARD_PADDING_MOBILE,
+          },
+          style,
+        ]}
+      >
+        <View style={[styles.iconSlot, { backgroundColor: iconSlotBackgroundColor }]}>
+          <Icon
+            {...iconProps}
+            size={iconSize}
+            color={iconProps?.color ?? ICON_COLOR}
+            strokeWidth={iconProps?.strokeWidth ?? 2}
+          />
+        </View>
+        <View style={styles.textBlock}>
+          <Text style={styles.title}>{title}</Text>
+          <Text style={styles.value}>{value}</Text>
+        </View>
+      </View>
+    );
+  },
+);
+
+const styles = StyleSheet.create({
+  root: {
+    width: "100%",
+    flexDirection: "row",
+    alignItems: "center",
+    borderRadius: 20,
+    backgroundColor: colors.grey750,
+    opacity: 1,
+  },
+  iconSlot: {
+    width: ICON_SLOT,
+    height: ICON_SLOT,
+    padding: 12,
+    borderRadius: 12,
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0,
+  },
+  textBlock: {
+    flexShrink: 1,
+    minWidth: 0,
+    flexDirection: "column",
+    gap: 8,
+  },
+  title: {
+    fontFamily: fonts.sans,
+    fontSize: 14,
+    fontWeight: "600",
+    lineHeight: 14,
+    letterSpacing: 0.42,
+    color: colors.white,
+  },
+  value: {
+    fontFamily: fonts.sans,
+    fontSize: 14,
+    fontWeight: "400",
+    lineHeight: 14,
+    letterSpacing: 0.42,
+    color: colors.lightGrey,
+  },
+});

package/src/components/ContactInfoCard/index.ts

@@ -0,0 +1,2 @@
+export { ContactInfoCard } from "./ContactInfoCard";
+export type { ContactInfoCardProps } from "./ContactInfoCard";

package/src/components/DatePicker/DatePicker.tsx

@@ -2,6 +2,7 @@ import {
   forwardRef,
   useCallback,
   useEffect,
+  useLayoutEffect,
   useMemo,
   useRef,
   useState,
@@ -93,6 +94,11 @@ type DatePickerBaseProps = Omit<ViewProps, "style" | "children"> & {
   weekStartsOn?: 0 | 1;
   /** Styles the calendar popup independently from the trigger width. */
   calendarStyle?: StyleProp<ViewStyle>;
+  /**
+   * When true, only the calendar panel is rendered (no field/trigger).
+   * Use with controlled `open` for icon-button / popover hosts.
+   */
+  hideTrigger?: boolean;
   style?: StyleProp<ViewStyle>;
   className?: string;
 };
@@ -113,7 +119,8 @@ export type DatePickerRangeProps = DatePickerBaseProps & {
 
 export type DatePickerProps = DatePickerSingleProps | DatePickerRangeProps;
 
-const DEFAULT_WIDTH = 380;
+const DEFAULT_WIDTH = 320;
+const DEFAULT_MENU_HEIGHT = 388;
 const RANGE_TRIGGER_WIDTH = 382;
 const TRIGGER_HEIGHT = 44;
 const TRIGGER_RADIUS = 60;
@@ -174,6 +181,7 @@ export const DatePicker = forwardRef<ComponentRef<typeof View>, DatePickerProps>
       formatValue: formatValueProp,
       weekStartsOn = 1,
       calendarStyle,
+      hideTrigger = false,
       style,
       className,
       accessibilityLabel,
@@ -207,6 +215,8 @@ export const DatePicker = forwardRef<ComponentRef<typeof View>, DatePickerProps>
     );
     const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
     const [hoveredDayKey, setHoveredDayKey] = useState<number | null>(null);
+    /** Web: flip calendar to the trigger's right edge when it would overflow the viewport. */
+    const [menuAlignEnd, setMenuAlignEnd] = useState(false);
 
     const rangeValue: DateRange = isRange
       ? isValueControlled
@@ -221,6 +231,13 @@ export const DatePicker = forwardRef<ComponentRef<typeof View>, DatePickerProps>
 
     const isOpen = isOpenControlled ? openProp : uncontrolledOpen;
 
+    const defaultMenuWidth = usesRangeTrigger ? RANGE_TRIGGER_WIDTH : DEFAULT_WIDTH;
+    const resolvedMenuWidth = useMemo(() => {
+      const flat = StyleSheet.flatten(calendarStyle);
+      const width = flat?.width;
+      return typeof width === "number" ? width : defaultMenuWidth;
+    }, [calendarStyle, defaultMenuWidth]);
+
     const [visibleMonth, setVisibleMonth] = useState(() => {
       const anchor =
         defaultVisibleMonth ?? (isRange ? rangeValue.start : singleValue) ?? new Date();
@@ -238,11 +255,33 @@ export const DatePicker = forwardRef<ComponentRef<typeof View>, DatePickerProps>
           setVisibleMonth(new Date(anchor.getFullYear(), anchor.getMonth(), 1));
         } else {
           setHoveredDayKey(null);
+          setMenuAlignEnd(false);
         }
       },
       [isOpenControlled, isRange, onOpenChange, rangeValue.start, singleValue],
     );
 
+    // Prefer left alignment; flip to right when the menu would overflow the viewport (web).
+    useLayoutEffect(() => {
+      if (Platform.OS !== "web" || !isOpen || hideTrigger) return;
+
+      const updateMenuAlign = () => {
+        const trigger = triggerRef.current as unknown as {
+          getBoundingClientRect?: () => DOMRect;
+        } | null;
+        const rect = trigger?.getBoundingClientRect?.();
+        if (!rect) return;
+
+        const viewportPadding = 8;
+        const overflowsRight = rect.left + resolvedMenuWidth > window.innerWidth - viewportPadding;
+        setMenuAlignEnd(overflowsRight);
+      };
+
+      updateMenuAlign();
+      window.addEventListener("resize", updateMenuAlign);
+      return () => window.removeEventListener("resize", updateMenuAlign);
+    }, [hideTrigger, isOpen, resolvedMenuWidth]);
+
     // Close on outside click (web only; native has no document-level events).
     useEffect(() => {
       if (Platform.OS !== "web" || !isOpen) return;
@@ -371,6 +410,7 @@ export const DatePicker = forwardRef<ComponentRef<typeof View>, DatePickerProps>
         style={[
           styles.root,
           usesRangeTrigger && styles.rangeRoot,
+          hideTrigger && styles.rootHideTrigger,
           isOpen && styles.rootOpen,
           disabled && styles.disabled,
           style,
@@ -378,52 +418,65 @@ export const DatePicker = forwardRef<ComponentRef<typeof View>, DatePickerProps>
         accessibilityState={{ disabled, expanded: isOpen }}
       >
         <View style={[styles.triggerWrap, isOpen && styles.triggerWrapOpen]}>
-          <Pressable
-            ref={triggerRef}
-            onPress={handleTriggerPress}
-            disabled={disabled}
-            accessibilityRole="button"
-            accessibilityLabel={resolvedAccessibilityLabel}
-            accessibilityState={{ disabled, expanded: isOpen }}
-            style={[
-              styles.trigger,
-              usesRangeTrigger && styles.rangeTrigger,
-              usesRangeTrigger &&
-                (usesVerticalRangeTrigger
-                  ? styles.rangeTriggerVertical
-                  : styles.rangeTriggerHorizontal),
-              {
-                borderColor: triggerBorderColor,
-                backgroundColor: usesRangeTrigger ? "transparent" : colors.grey700,
-              },
-            ]}
-          >
-            {usesRangeTrigger ? (
-              <>
-                <RangeTriggerField label={startLabel} time={startTime} value={startValue} />
-                <View
-                  style={
-                    usesVerticalRangeTrigger
-                      ? styles.rangeDividerVertical
-                      : styles.rangeDividerHorizontal
-                  }
-                />
-                <RangeTriggerField label={endLabel} time={endTime} value={endValue} />
-              </>
-            ) : (
-              <>
-                <Text style={[styles.triggerText, { color: triggerTextColor }]} numberOfLines={1}>
-                  {triggerLabel}
-                </Text>
-                <View style={styles.iconSlot}>
-                  <CalendarOutlineIcon size={ICON_SIZE} color={colors.grey100} />
-                </View>
-              </>
-            )}
-          </Pressable>
+          {hideTrigger ? null : (
+            <Pressable
+              ref={triggerRef}
+              onPress={handleTriggerPress}
+              disabled={disabled}
+              accessibilityRole="button"
+              accessibilityLabel={resolvedAccessibilityLabel}
+              accessibilityState={{ disabled, expanded: isOpen }}
+              style={[
+                styles.trigger,
+                usesRangeTrigger && styles.rangeTrigger,
+                usesRangeTrigger &&
+                  (usesVerticalRangeTrigger
+                    ? styles.rangeTriggerVertical
+                    : styles.rangeTriggerHorizontal),
+                {
+                  borderColor: triggerBorderColor,
+                  backgroundColor: usesRangeTrigger ? "transparent" : colors.grey700,
+                },
+              ]}
+            >
+              {usesRangeTrigger ? (
+                <>
+                  <RangeTriggerField label={startLabel} time={startTime} value={startValue} />
+                  <View
+                    style={
+                      usesVerticalRangeTrigger
+                        ? styles.rangeDividerVertical
+                        : styles.rangeDividerHorizontal
+                    }
+                  />
+                  <RangeTriggerField label={endLabel} time={endTime} value={endValue} />
+                </>
+              ) : (
+                <>
+                  <Text style={[styles.triggerText, { color: triggerTextColor }]} numberOfLines={1}>
+                    {triggerLabel}
+                  </Text>
+                  <View style={styles.iconSlot}>
+                    <CalendarOutlineIcon size={ICON_SIZE} color={colors.grey100} />
+                  </View>
+                </>
+              )}
+            </Pressable>
+          )}
 
           {isOpen ? (
-            <View style={[styles.menu, usesRangeTrigger && styles.rangeMenu, calendarStyle]}>
+            <View
+              style={[
+                styles.menu,
+                usesRangeTrigger && styles.rangeMenu,
+                hideTrigger
+                  ? styles.menuInline
+                  : menuAlignEnd
+                    ? styles.menuAlignEnd
+                    : styles.menuAlignStart,
+                calendarStyle,
+              ]}
+            >
               <View style={styles.calendarHeader}>
                 <Pressable
                   onPress={handlePrevMonth}
@@ -590,6 +643,10 @@ const styles = StyleSheet.create({
     gap: 8,
     alignSelf: "flex-start",
   },
+  rootHideTrigger: {
+    width: "auto",
+    gap: 0,
+  },
   rootOpen: {
     zIndex: 30,
   },
@@ -694,13 +751,14 @@ const styles = StyleSheet.create({
   menu: {
     position: "absolute",
     top: "100%",
-    left: 0,
     width: DEFAULT_WIDTH,
+    height: DEFAULT_MENU_HEIGHT,
     marginTop: 8,
     zIndex: 10,
     borderRadius: MENU_RADIUS,
     padding: 12,
     gap: 0,
+    opacity: 1,
     backgroundColor: colors.grey700,
     ...Platform.select({
       web: {
@@ -711,6 +769,21 @@ const styles = StyleSheet.create({
       },
     }),
   },
+  menuAlignStart: {
+    left: 0,
+    right: "auto",
+  },
+  menuAlignEnd: {
+    left: "auto",
+    right: 0,
+  },
+  menuInline: {
+    position: "relative",
+    top: "auto",
+    left: "auto",
+    right: "auto",
+    marginTop: 0,
+  },
   rangeMenu: {
     width: RANGE_TRIGGER_WIDTH,
   },

package/src/components/Modal/Modal.stories.tsx

@@ -0,0 +1,100 @@
+import { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Pressable, StyleSheet, Text, View } from "react-native";
+import { colors, fonts } from "../../theme";
+import { Modal } from "./Modal";
+
+const meta = {
+  title: "Components/Modal",
+  component: Modal,
+  parameters: {
+    backgrounds: { default: "black" },
+  },
+} satisfies Meta<typeof Modal>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+function ModalDemo() {
+  const [open, setOpen] = useState(true);
+
+  return (
+    <View style={styles.page}>
+      <Pressable onPress={() => setOpen(true)} style={styles.openButton}>
+        <Text style={styles.openLabel}>Open modal</Text>
+      </Pressable>
+
+      <Modal open={open} onClose={() => setOpen(false)}>
+        <View style={styles.panel}>
+          <Text style={styles.title}>Modal</Text>
+          <Text style={styles.body}>Backdrop uses #09090933 + blur(20px).</Text>
+          <Pressable onPress={() => setOpen(false)} style={styles.closeButton}>
+            <Text style={styles.closeLabel}>Close</Text>
+          </Pressable>
+        </View>
+      </Modal>
+    </View>
+  );
+}
+
+export const Default: Story = {
+  args: {
+    open: true,
+    onClose: () => undefined,
+    children: null,
+  },
+  render: () => <ModalDemo />,
+};
+
+const styles = StyleSheet.create({
+  page: {
+    minHeight: 360,
+    alignItems: "center",
+    justifyContent: "center",
+    padding: 24,
+  },
+  openButton: {
+    paddingHorizontal: 16,
+    paddingVertical: 10,
+    borderRadius: 40,
+    backgroundColor: colors.primary,
+  },
+  openLabel: {
+    fontFamily: fonts.sans,
+    fontSize: 14,
+    fontWeight: "600",
+    color: colors.white,
+  },
+  panel: {
+    width: 320,
+    gap: 16,
+    padding: 24,
+    borderRadius: 24,
+    backgroundColor: colors.dark,
+  },
+  title: {
+    fontFamily: fonts.sans,
+    fontSize: 18,
+    fontWeight: "700",
+    color: colors.white,
+  },
+  body: {
+    fontFamily: fonts.sans,
+    fontSize: 14,
+    lineHeight: 17.5,
+    color: colors.grey100,
+  },
+  closeButton: {
+    alignSelf: "flex-start",
+    paddingHorizontal: 16,
+    paddingVertical: 10,
+    borderRadius: 40,
+    backgroundColor: colors.grey700,
+  },
+  closeLabel: {
+    fontFamily: fonts.sans,
+    fontSize: 14,
+    fontWeight: "600",
+    color: colors.white,
+  },
+});

package/src/components/Modal/Modal.tsx

@@ -0,0 +1,165 @@
+import { forwardRef, useEffect, useMemo, useRef, type ComponentRef, type ReactNode } from "react";
+import { createPortal } from "react-dom";
+import {
+  Modal as RNModal,
+  Platform,
+  Pressable,
+  StyleSheet,
+  View,
+  type StyleProp,
+  type ViewStyle,
+} from "react-native";
+import { mergeRefs } from "../../utils/mergeRefs";
+import { useApplyWebClassName } from "../../utils/useApplyWebClassName";
+
+export interface ModalProps {
+  /** Controls visibility. */
+  open: boolean;
+  /** Called on backdrop press, Escape / Android back, or explicit close. */
+  onClose: () => void;
+  children: ReactNode;
+  /** Close when the dimmed backdrop is pressed. Defaults to `true`. */
+  closeOnBackdropPress?: boolean;
+  /** Accessible name for the backdrop control. Defaults to `"Close"`. */
+  backdropAccessibilityLabel?: string;
+  /** Style for the centered content wrapper around `children`. */
+  contentStyle?: StyleProp<ViewStyle>;
+  /** Web CSS class applied to the content wrapper. */
+  className?: string;
+}
+
+const BACKDROP_COLOR = "#09090933";
+const WEB_Z_INDEX = 500;
+
+/** Plain DOM backdrop — RN StyleSheet / Modal host often drops `backdrop-filter`. */
+const webBackdropDomStyle = {
+  position: "absolute",
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0,
+  backgroundColor: BACKDROP_COLOR,
+  backdropFilter: "blur(20px)",
+  WebkitBackdropFilter: "blur(20px)",
+  border: "none",
+  padding: 0,
+  margin: 0,
+  cursor: "pointer",
+} as const;
+
+const webRootDomStyle = {
+  position: "fixed",
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0,
+  zIndex: WEB_Z_INDEX,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+} as const;
+
+export const Modal = forwardRef<ComponentRef<typeof View>, ModalProps>(function Modal(
+  {
+    open,
+    onClose,
+    children,
+    closeOnBackdropPress = true,
+    backdropAccessibilityLabel = "Close",
+    contentStyle,
+    className,
+  },
+  forwardedRef,
+) {
+  const contentRef = useRef<ComponentRef<typeof View>>(null);
+  const setContentRef = useMemo(() => mergeRefs(contentRef, forwardedRef), [forwardedRef]);
+  const resolvedClassName = className?.trim() || undefined;
+
+  useApplyWebClassName(contentRef, resolvedClassName, open && Platform.OS === "web");
+
+  useEffect(() => {
+    if (!open || Platform.OS !== "web") return undefined;
+
+    const previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", onKeyDown);
+
+    return () => {
+      document.body.style.overflow = previousOverflow;
+      document.removeEventListener("keydown", onKeyDown);
+    };
+  }, [open, onClose]);
+
+  const content = (
+    <View
+      ref={setContentRef}
+      style={[styles.content, contentStyle]}
+      onStartShouldSetResponder={() => true}
+    >
+      {children}
+    </View>
+  );
+
+  // Web: portal + real DOM backdrop so `backdrop-filter` blurs the page behind.
+  if (Platform.OS === "web") {
+    if (!open || typeof document === "undefined") return null;
+
+    return createPortal(
+      <div style={webRootDomStyle} role="presentation">
+        <button
+          type="button"
+          aria-label={backdropAccessibilityLabel}
+          disabled={!closeOnBackdropPress}
+          onClick={closeOnBackdropPress ? onClose : undefined}
+          style={webBackdropDomStyle}
+        />
+        <div style={{ position: "relative", zIndex: 1, maxWidth: "100%", maxHeight: "100%" }}>
+          {content}
+        </div>
+      </div>,
+      document.body,
+    );
+  }
+
+  return (
+    <RNModal
+      visible={open}
+      transparent
+      animationType="fade"
+      onRequestClose={onClose}
+      statusBarTranslucent
+    >
+      <View style={styles.root} accessibilityViewIsModal>
+        <Pressable
+          accessibilityRole="button"
+          accessibilityLabel={backdropAccessibilityLabel}
+          disabled={!closeOnBackdropPress}
+          onPress={closeOnBackdropPress ? onClose : undefined}
+          style={styles.backdrop}
+        />
+        {content}
+      </View>
+    </RNModal>
+  );
+});
+
+const styles = StyleSheet.create({
+  root: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  backdrop: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: BACKDROP_COLOR,
+  },
+  content: {
+    zIndex: 1,
+    maxWidth: "100%",
+    maxHeight: "100%",
+  },
+});

package/src/components/Modal/index.ts

@@ -0,0 +1,2 @@
+export { Modal } from "./Modal";
+export type { ModalProps } from "./Modal";