@ecohouse/ui 0.1.39 → 0.1.40

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ecohouse/ui",
-  "version": "0.1.39",
+  "version": "0.1.40",
   "type": "module",
   "private": false,
   "description": "Cross-platform presentation-only UI components for EcoHouse (React Native + React Native Web)",

package/src/components/DatePicker/DatePicker.tsx

@@ -716,9 +716,10 @@ const styles = StyleSheet.create({
   },
   rangeValueRow: {
     minWidth: 0,
+    width: "100%",
     flexDirection: "row",
     alignItems: "center",
-    justifyContent: "flex-start",
+    justifyContent: "space-between",
     flexWrap: "nowrap",
     gap: 10,
   },

package/src/components/Drawer/Drawer.tsx

@@ -1,6 +1,18 @@
-import { forwardRef, useEffect, useMemo, useRef, type ComponentRef, type ReactNode } from "react";
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ComponentRef,
+  type ReactNode,
+  type TransitionEvent,
+} from "react";
 import { createPortal } from "react-dom";
 import {
+  Animated,
+  Easing,
   Modal as RNModal,
   Platform,
   Pressable,
@@ -25,6 +37,8 @@ export interface DrawerProps {
   title?: string;
   /** Panel width in px. Defaults to `652`. */
   width?: number;
+  /** Open/close width transition duration in ms. Defaults to `320`. */
+  animationDuration?: number;
   /** Close when the dimmed backdrop is pressed. Defaults to `true`. */
   closeOnBackdropPress?: boolean;
   /** Accessible name for the backdrop control. Defaults to `"Close"`. */
@@ -39,36 +53,10 @@ export interface DrawerProps {
 
 const BACKDROP_COLOR = "#09090933";
 const DEFAULT_WIDTH = 652;
+const DEFAULT_DURATION = 320;
 const WEB_Z_INDEX = 500;
 const CLOSE_ICON_SIZE = 24;
 
-/** Plain DOM backdrop — RN StyleSheet often drops `backdrop-filter`. */
-const webBackdropDomStyle = {
-  position: "absolute",
-  top: 0,
-  right: 0,
-  bottom: 0,
-  left: 0,
-  backgroundColor: BACKDROP_COLOR,
-  backdropFilter: "blur(18px)",
-  WebkitBackdropFilter: "blur(18px)",
-  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",
-  justifyContent: "flex-end",
-} as const;
-
 export const Drawer = forwardRef<ComponentRef<typeof View>, DrawerProps>(function Drawer(
   {
     open,
@@ -76,6 +64,7 @@ export const Drawer = forwardRef<ComponentRef<typeof View>, DrawerProps>(functio
     children,
     title,
     width = DEFAULT_WIDTH,
+    animationDuration = DEFAULT_DURATION,
     closeOnBackdropPress = true,
     backdropAccessibilityLabel = "Close",
     closeAccessibilityLabel = "Close",
@@ -87,11 +76,17 @@ export const Drawer = forwardRef<ComponentRef<typeof View>, DrawerProps>(functio
   const panelRef = useRef<ComponentRef<typeof View>>(null);
   const setPanelRef = useMemo(() => mergeRefs(panelRef, forwardedRef), [forwardedRef]);
   const resolvedClassName = className?.trim() || undefined;
+  const closeTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
-  useApplyWebClassName(panelRef, resolvedClassName, open && Platform.OS === "web");
+  const [mounted, setMounted] = useState(open);
+  const [entered, setEntered] = useState(false);
+  const animatedWidth = useRef(new Animated.Value(open ? width : 0)).current;
+  const animatedBackdrop = useRef(new Animated.Value(open ? 1 : 0)).current;
+
+  useApplyWebClassName(panelRef, resolvedClassName, mounted && Platform.OS === "web");
 
   useEffect(() => {
-    if (!open || Platform.OS !== "web") return undefined;
+    if (!mounted || Platform.OS !== "web") return undefined;
 
     const previousOverflow = document.body.style.overflow;
     document.body.style.overflow = "hidden";
@@ -105,7 +100,96 @@ export const Drawer = forwardRef<ComponentRef<typeof View>, DrawerProps>(functio
       document.body.style.overflow = previousOverflow;
       document.removeEventListener("keydown", onKeyDown);
     };
-  }, [open, onClose]);
+  }, [mounted, onClose]);
+
+  // Web: mount at width 0, then expand; on close collapse then unmount.
+  useEffect(() => {
+    if (Platform.OS !== "web") return undefined;
+
+    if (closeTimeoutRef.current) {
+      clearTimeout(closeTimeoutRef.current);
+      closeTimeoutRef.current = null;
+    }
+
+    if (open) {
+      setMounted(true);
+      const frame = requestAnimationFrame(() => {
+        requestAnimationFrame(() => setEntered(true));
+      });
+      return () => cancelAnimationFrame(frame);
+    }
+
+    setEntered(false);
+    // Fallback if transitionend is skipped (e.g. reduced motion / tab background).
+    closeTimeoutRef.current = setTimeout(() => {
+      setMounted(false);
+      closeTimeoutRef.current = null;
+    }, animationDuration + 50);
+
+    return () => {
+      if (closeTimeoutRef.current) {
+        clearTimeout(closeTimeoutRef.current);
+        closeTimeoutRef.current = null;
+      }
+    };
+  }, [open, animationDuration]);
+
+  // Native: animate width + backdrop opacity.
+  useEffect(() => {
+    if (Platform.OS === "web") return undefined;
+
+    if (open) {
+      setMounted(true);
+      Animated.parallel([
+        Animated.timing(animatedWidth, {
+          toValue: width,
+          duration: animationDuration,
+          easing: Easing.out(Easing.cubic),
+          useNativeDriver: false,
+        }),
+        Animated.timing(animatedBackdrop, {
+          toValue: 1,
+          duration: animationDuration,
+          easing: Easing.out(Easing.cubic),
+          useNativeDriver: true,
+        }),
+      ]).start();
+      return undefined;
+    }
+
+    Animated.parallel([
+      Animated.timing(animatedWidth, {
+        toValue: 0,
+        duration: animationDuration,
+        easing: Easing.in(Easing.cubic),
+        useNativeDriver: false,
+      }),
+      Animated.timing(animatedBackdrop, {
+        toValue: 0,
+        duration: animationDuration,
+        easing: Easing.in(Easing.cubic),
+        useNativeDriver: true,
+      }),
+    ]).start(({ finished }) => {
+      if (finished) setMounted(false);
+    });
+    return undefined;
+  }, [open, width, animationDuration, animatedWidth, animatedBackdrop]);
+
+  const handleWebTransitionEnd = useCallback(
+    (event: TransitionEvent<HTMLDivElement>) => {
+      if (event.target !== event.currentTarget) return;
+      if (event.propertyName !== "width") return;
+      if (!open) {
+        if (closeTimeoutRef.current) {
+          clearTimeout(closeTimeoutRef.current);
+          closeTimeoutRef.current = null;
+        }
+        setMounted(false);
+      }
+    },
+    [open],
+  );
 
   const header =
     title != null && title !== "" ? (
@@ -125,11 +209,11 @@ export const Drawer = forwardRef<ComponentRef<typeof View>, DrawerProps>(functio
       </View>
     ) : null;
 
-  const panel = (
+  const panelContent = (
     <View
       ref={setPanelRef}
       accessibilityViewIsModal
-      style={[styles.panel, { width }, style]}
+      style={[styles.panelInner, { width }, style]}
       onStartShouldSetResponder={() => true}
     >
       {header}
@@ -138,50 +222,110 @@ export const Drawer = forwardRef<ComponentRef<typeof View>, DrawerProps>(functio
   );
 
   if (Platform.OS === "web") {
-    if (!open || typeof document === "undefined") return null;
+    if (!mounted || typeof document === "undefined") return null;
 
     return createPortal(
-      <div style={webRootDomStyle} role="presentation">
+      <div
+        style={{
+          position: "fixed",
+          top: 0,
+          right: 0,
+          bottom: 0,
+          left: 0,
+          zIndex: WEB_Z_INDEX,
+          display: "flex",
+          justifyContent: "flex-end",
+          pointerEvents: "auto",
+        }}
+        role="presentation"
+      >
         <button
           type="button"
           aria-label={backdropAccessibilityLabel}
           disabled={!closeOnBackdropPress}
           onClick={closeOnBackdropPress ? onClose : undefined}
-          style={webBackdropDomStyle}
+          style={{
+            position: "absolute",
+            top: 0,
+            right: 0,
+            bottom: 0,
+            left: 0,
+            backgroundColor: BACKDROP_COLOR,
+            backdropFilter: "blur(18px)",
+            WebkitBackdropFilter: "blur(18px)",
+            border: "none",
+            padding: 0,
+            margin: 0,
+            cursor: closeOnBackdropPress ? "pointer" : "default",
+            opacity: entered ? 1 : 0,
+            transition: `opacity ${animationDuration}ms ease`,
+          }}
         />
+        {/*
+          Shell width animates 0 ↔ panel width. Inner stays fixed-width and
+          right-aligned so content isn't crushed and appears to slide in.
+          minWidth:0 is required — flex defaults would otherwise lock width to content.
+        */}
         <div
+          onTransitionEnd={handleWebTransitionEnd}
           style={{
             position: "relative",
             zIndex: 1,
             height: "100%",
+            width: entered
+              ? Math.min(width, typeof window !== "undefined" ? window.innerWidth : width)
+              : 0,
+            minWidth: 0,
             maxWidth: "100%",
-            display: "flex",
+            overflow: "hidden",
+            transition: `width ${animationDuration}ms cubic-bezier(0.32, 0.72, 0, 1)`,
+            willChange: "width",
+            boxSizing: "border-box",
           }}
         >
-          {panel}
+          <div
+            style={{
+              width,
+              maxWidth: "100%",
+              height: "100%",
+              marginLeft: "auto",
+              display: "flex",
+              flexDirection: "column",
+            }}
+          >
+            {panelContent}
+          </div>
         </div>
       </div>,
       document.body,
     );
   }
 
+  if (!mounted) return null;
+
   return (
     <RNModal
-      visible={open}
+      visible={mounted}
       transparent
-      animationType="slide"
+      animationType="none"
       onRequestClose={onClose}
       statusBarTranslucent
     >
       <View style={styles.root} accessibilityViewIsModal>
+        <Animated.View
+          pointerEvents="none"
+          style={[styles.backdrop, { opacity: animatedBackdrop }]}
+        />
         <Pressable
           accessibilityRole="button"
           accessibilityLabel={backdropAccessibilityLabel}
           disabled={!closeOnBackdropPress}
           onPress={closeOnBackdropPress ? onClose : undefined}
-          style={styles.backdrop}
+          style={StyleSheet.absoluteFill}
         />
-        {panel}
+        <Animated.View style={[styles.panelShell, { width: animatedWidth }]}>
+          {panelContent}
+        </Animated.View>
       </View>
     </RNModal>
   );
@@ -197,11 +341,19 @@ const styles = StyleSheet.create({
     ...StyleSheet.absoluteFillObject,
     backgroundColor: BACKDROP_COLOR,
   },
-  panel: {
+  panelShell: {
     zIndex: 1,
+    height: "100%",
+    maxWidth: "100%",
+    overflow: "hidden",
+    alignItems: "flex-end",
+    minWidth: 0,
+  },
+  panelInner: {
     height: "100%",
     maxWidth: "100%",
     backgroundColor: colors.grey800,
+    flexShrink: 0,
   },
   header: {
     height: 65,
@@ -220,10 +372,11 @@ const styles = StyleSheet.create({
     fontFamily: fonts.sans,
     fontSize: 16,
     fontWeight: "600",
-    lineHeight: 16,
+    lineHeight: 22,
     letterSpacing: 0,
     color: colors.white,
     marginRight: 12,
+    overflow: "visible",
   },
   closeButton: {
     width: CLOSE_ICON_SIZE,

package/src/icons/index.ts

@@ -9,7 +9,6 @@ export { AmenityIcon } from "./Amenity";
 export type { AmenityIconProps, AmenityName } from "./Amenity";
 export { AlertTriangleIcon } from "./AlertTriangle";
 export { AppleIcon } from "./Store";
-export { ArrowLeftIcon } from "./ArrowLeft";
 export { ArrowRightIcon } from "./ArrowRight";
 export { BagIcon } from "./Bag";
 export { BanIcon } from "./Ban";
@@ -26,7 +25,6 @@ export { ChevronDownIcon } from "./ChevronDown";
 export { ChevronLeftIcon } from "./ChevronLeft";
 export { ClockIcon } from "./Clock";
 export { CloseIcon } from "./Close";
-export { CurrentLocationIcon } from "./CurrentLocation";
 export { EditIcon } from "./Edit";
 export {
   BathroomsIcon,

package/src/index.ts

@@ -9,10 +9,8 @@ export {
   InfoTile,
   ContactInfoCard,
   AccordionItem,
-  Accordion,
   StepList,
   Counter,
-  QuantityInput,
   SegmentedToggle,
   Sidebar,
   LanguageSwitcher,
@@ -23,9 +21,7 @@ export {
   DatePicker,
   FloatingActionButton,
   Modal,
-  Drawer,
   Input,
-  AutocompleteInput,
   VerificationCodeInput,
   Select,
   Textarea,
@@ -49,10 +45,8 @@ export type {
   InfoTileProps,
   ContactInfoCardProps,
   AccordionItemProps,
-  AccordionProps,
   StepListProps,
   CounterProps,
-  QuantityInputProps,
   SegmentedToggleOption,
   SegmentedToggleProps,
   SidebarProps,
@@ -74,12 +68,9 @@ export type {
   DateRange,
   FloatingActionButtonProps,
   ModalProps,
-  DrawerProps,
   InputIcon,
   InputProps,
   InputSize,
-  AutocompleteInputProps,
-  AutocompleteOption,
   VerificationCodeInputHandle,
   VerificationCodeInputProps,
   SelectIcon,
@@ -128,7 +119,6 @@ export {
   iconGroups,
   iconGroupNames,
   getIconsByGroup,
-  ArrowLeftIcon,
   ArrowRightIcon,
   BagIcon,
   BanIcon,
@@ -145,7 +135,6 @@ export {
   ChevronLeftIcon,
   ClockIcon,
   CloseIcon,
-  CurrentLocationIcon,
   EditIcon,
   BathroomsIcon,
   BedroomsIcon,