@ecohouse/ui 0.1.39 → 0.1.40

package/dist/index.js

@@ -30300,40 +30300,6 @@ function AmenityIcon({ name, size = 20, color = colors.primary }) {
   )) });
 }
 
-// src/icons/ArrowLeft/arrowLeftPath.ts
-var ARROW_LEFT_PATH = "M10.1972 6.59961L4.80078 11.9994L10.1972 17.3996M4.80078 11.9965H19.202";
-function ArrowLeftIcon({ size = 24, color = colors.white, strokeWidth = 1.35 }) {
-  return /* @__PURE__ */ jsx(Svg21, { width: size, height: size, viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx(
-    Path,
-    {
-      d: ARROW_LEFT_PATH,
-      stroke: color,
-      strokeWidth,
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }
-  ) });
-}
-
-// src/icons/CurrentLocation/currentLocationPath.ts
-var CURRENT_LOCATION_PATH = "M17.4167 9.08333H14.0833M4.08333 9.08333H0.75M9.08333 4.08333V0.75M9.08333 17.4167V14.0833M15.75 9.08333C15.75 12.7652 12.7652 15.75 9.08333 15.75C5.40144 15.75 2.41667 12.7652 2.41667 9.08333C2.41667 5.40144 5.40144 2.41667 9.08333 2.41667C12.7652 2.41667 15.75 5.40144 15.75 9.08333ZM11.5833 9.08333C11.5833 10.464 10.464 11.5833 9.08333 11.5833C7.70262 11.5833 6.58333 10.464 6.58333 9.08333C6.58333 7.70262 7.70262 6.58333 9.08333 6.58333C10.464 6.58333 11.5833 7.70262 11.5833 9.08333Z";
-function CurrentLocationIcon({
-  size = 19,
-  color = colors.primary,
-  strokeWidth = 1.5
-}) {
-  return /* @__PURE__ */ jsx(Svg21, { width: size, height: size, viewBox: "0 0 19 19", fill: "none", children: /* @__PURE__ */ jsx(
-    Path,
-    {
-      d: CURRENT_LOCATION_PATH,
-      stroke: color,
-      strokeWidth,
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }
-  ) });
-}
-
 // src/utils/mergeRefs.ts
 function mergeRefs(internalRef, forwardedRef) {
   return (node) => {
@@ -32109,7 +32075,7 @@ var styles15 = StyleSheet.create({
 });
 var DESKTOP_MIN_WIDTH3 = 1024;
 var CHEVRON_SIZE3 = 24;
-var Accordion = forwardRef(function Accordion2({
+forwardRef(function Accordion2({
   title,
   children,
   open: openProp,
@@ -32450,7 +32416,7 @@ var styles18 = StyleSheet.create({
     flex: 1
   }
 });
-var QuantityInput = forwardRef(
+forwardRef(
   function QuantityInput2({
     label,
     icon: Icon2,
@@ -34264,9 +34230,10 @@ var styles26 = StyleSheet.create({
   },
   rangeValueRow: {
     minWidth: 0,
+    width: "100%",
     flexDirection: "row",
     alignItems: "center",
-    justifyContent: "flex-start",
+    justifyContent: "space-between",
     flexWrap: "nowrap",
     gap: 10
   },
@@ -34611,38 +34578,16 @@ var styles28 = StyleSheet.create({
 var import_react_dom2 = __toESM(require_react_dom());
 var BACKDROP_COLOR2 = "#09090933";
 var DEFAULT_WIDTH2 = 652;
+var DEFAULT_DURATION = 320;
 var WEB_Z_INDEX2 = 500;
 var CLOSE_ICON_SIZE = 24;
-var webBackdropDomStyle2 = {
-  position: "absolute",
-  top: 0,
-  right: 0,
-  bottom: 0,
-  left: 0,
-  backgroundColor: BACKDROP_COLOR2,
-  backdropFilter: "blur(18px)",
-  WebkitBackdropFilter: "blur(18px)",
-  border: "none",
-  padding: 0,
-  margin: 0,
-  cursor: "pointer"
-};
-var webRootDomStyle2 = {
-  position: "fixed",
-  top: 0,
-  right: 0,
-  bottom: 0,
-  left: 0,
-  zIndex: WEB_Z_INDEX2,
-  display: "flex",
-  justifyContent: "flex-end"
-};
-var Drawer = forwardRef(function Drawer2({
+forwardRef(function Drawer2({
   open,
   onClose,
   children,
   title,
   width = DEFAULT_WIDTH2,
+  animationDuration = DEFAULT_DURATION,
   closeOnBackdropPress = true,
   backdropAccessibilityLabel = "Close",
   closeAccessibilityLabel = "Close",
@@ -34652,9 +34597,14 @@ var Drawer = forwardRef(function Drawer2({
   const panelRef = useRef(null);
   const setPanelRef = useMemo(() => mergeRefs(panelRef, forwardedRef), [forwardedRef]);
   const resolvedClassName = className?.trim() || void 0;
-  useApplyWebClassName(panelRef, resolvedClassName, open && Platform.OS === "web");
+  const closeTimeoutRef = useRef(null);
+  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 void 0;
+    if (!mounted || Platform.OS !== "web") return void 0;
     const previousOverflow = document.body.style.overflow;
     document.body.style.overflow = "hidden";
     const onKeyDown = (event) => {
@@ -34665,7 +34615,84 @@ var Drawer = forwardRef(function Drawer2({
       document.body.style.overflow = previousOverflow;
       document.removeEventListener("keydown", onKeyDown);
     };
-  }, [open, onClose]);
+  }, [mounted, onClose]);
+  useEffect(() => {
+    if (Platform.OS !== "web") return void 0;
+    if (closeTimeoutRef.current) {
+      clearTimeout(closeTimeoutRef.current);
+      closeTimeoutRef.current = null;
+    }
+    if (open) {
+      setMounted(true);
+      const frame = requestAnimationFrame(() => {
+        requestAnimationFrame(() => setEntered(true));
+      });
+      return () => cancelAnimationFrame(frame);
+    }
+    setEntered(false);
+    closeTimeoutRef.current = setTimeout(() => {
+      setMounted(false);
+      closeTimeoutRef.current = null;
+    }, animationDuration + 50);
+    return () => {
+      if (closeTimeoutRef.current) {
+        clearTimeout(closeTimeoutRef.current);
+        closeTimeoutRef.current = null;
+      }
+    };
+  }, [open, animationDuration]);
+  useEffect(() => {
+    if (Platform.OS === "web") return void 0;
+    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 void 0;
+    }
+    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 void 0;
+  }, [open, width, animationDuration, animatedWidth, animatedBackdrop]);
+  const handleWebTransitionEnd = useCallback(
+    (event) => {
+      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 !== "" ? /* @__PURE__ */ jsxs(View, { style: styles29.header, children: [
     /* @__PURE__ */ jsx(Text, { style: styles29.title, numberOfLines: 1, children: title }),
     /* @__PURE__ */ jsx(
@@ -34680,12 +34707,12 @@ var Drawer = forwardRef(function Drawer2({
       }
     )
   ] }) : null;
-  const panel = /* @__PURE__ */ jsxs(
+  const panelContent = /* @__PURE__ */ jsxs(
     View,
     {
       ref: setPanelRef,
       accessibilityViewIsModal: true,
-      style: [styles29.panel, { width }, style],
+      style: [styles29.panelInner, { width }, style],
       onStartShouldSetResponder: () => true,
       children: [
         header,
@@ -34694,45 +34721,104 @@ var Drawer = forwardRef(function Drawer2({
     }
   );
   if (Platform.OS === "web") {
-    if (!open || typeof document === "undefined") return null;
+    if (!mounted || typeof document === "undefined") return null;
     return (0, import_react_dom2.createPortal)(
-      /* @__PURE__ */ jsxs("div", { style: webRootDomStyle2, role: "presentation", children: [
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            "aria-label": backdropAccessibilityLabel,
-            disabled: !closeOnBackdropPress,
-            onClick: closeOnBackdropPress ? onClose : void 0,
-            style: webBackdropDomStyle2
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              position: "relative",
-              zIndex: 1,
-              height: "100%",
-              maxWidth: "100%",
-              display: "flex"
-            },
-            children: panel
-          }
-        )
-      ] }),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          style: {
+            position: "fixed",
+            top: 0,
+            right: 0,
+            bottom: 0,
+            left: 0,
+            zIndex: WEB_Z_INDEX2,
+            display: "flex",
+            justifyContent: "flex-end",
+            pointerEvents: "auto"
+          },
+          role: "presentation",
+          children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                "aria-label": backdropAccessibilityLabel,
+                disabled: !closeOnBackdropPress,
+                onClick: closeOnBackdropPress ? onClose : void 0,
+                style: {
+                  position: "absolute",
+                  top: 0,
+                  right: 0,
+                  bottom: 0,
+                  left: 0,
+                  backgroundColor: BACKDROP_COLOR2,
+                  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`
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "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%",
+                  overflow: "hidden",
+                  transition: `width ${animationDuration}ms cubic-bezier(0.32, 0.72, 0, 1)`,
+                  willChange: "width",
+                  boxSizing: "border-box"
+                },
+                children: /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    style: {
+                      width,
+                      maxWidth: "100%",
+                      height: "100%",
+                      marginLeft: "auto",
+                      display: "flex",
+                      flexDirection: "column"
+                    },
+                    children: panelContent
+                  }
+                )
+              }
+            )
+          ]
+        }
+      ),
       document.body
     );
   }
+  if (!mounted) return null;
   return /* @__PURE__ */ jsx(
     Modal$1,
     {
-      visible: open,
+      visible: mounted,
       transparent: true,
-      animationType: "slide",
+      animationType: "none",
       onRequestClose: onClose,
       statusBarTranslucent: true,
       children: /* @__PURE__ */ jsxs(View, { style: styles29.root, accessibilityViewIsModal: true, children: [
+        /* @__PURE__ */ jsx(
+          Animated.View,
+          {
+            pointerEvents: "none",
+            style: [styles29.backdrop, { opacity: animatedBackdrop }]
+          }
+        ),
         /* @__PURE__ */ jsx(
           Pressable,
           {
@@ -34740,10 +34826,10 @@ var Drawer = forwardRef(function Drawer2({
             accessibilityLabel: backdropAccessibilityLabel,
             disabled: !closeOnBackdropPress,
             onPress: closeOnBackdropPress ? onClose : void 0,
-            style: styles29.backdrop
+            style: StyleSheet.absoluteFill
           }
         ),
-        panel
+        /* @__PURE__ */ jsx(Animated.View, { style: [styles29.panelShell, { width: animatedWidth }], children: panelContent })
       ] })
     }
   );
@@ -34758,11 +34844,19 @@ var styles29 = StyleSheet.create({
     ...StyleSheet.absoluteFillObject,
     backgroundColor: BACKDROP_COLOR2
   },
-  panel: {
+  panelShell: {
     zIndex: 1,
     height: "100%",
     maxWidth: "100%",
-    backgroundColor: colors.grey800
+    overflow: "hidden",
+    alignItems: "flex-end",
+    minWidth: 0
+  },
+  panelInner: {
+    height: "100%",
+    maxWidth: "100%",
+    backgroundColor: colors.grey800,
+    flexShrink: 0
   },
   header: {
     height: 65,
@@ -34781,10 +34875,11 @@ var styles29 = StyleSheet.create({
     fontFamily: fonts.sans,
     fontSize: 16,
     fontWeight: "600",
-    lineHeight: 16,
+    lineHeight: 22,
     letterSpacing: 0,
     color: colors.white,
-    marginRight: 12
+    marginRight: 12,
+    overflow: "visible"
   },
   closeButton: {
     width: CLOSE_ICON_SIZE,
@@ -35088,7 +35183,7 @@ var MENU_MAX_HEIGHT = 248;
 var BLUR_CLOSE_DELAY_MS = 120;
 var AUTOCOMPLETE_ROOT_Z_INDEX = 1100;
 var AUTOCOMPLETE_MENU_Z_INDEX = 1101;
-var AutocompleteInput = forwardRef(
+forwardRef(
   function AutocompleteInput2({
     value,
     options,
@@ -37663,6 +37758,6 @@ react-dom/cjs/react-dom.development.js:
    *)
 */
 
-export { Accordion, AccordionItem, AccountHeader, AlertTriangleIcon, Amenity, AmenityIcon, AppleIcon, AreaExpandIcon, ArrowLeftIcon, ArrowRightIcon, AutocompleteInput, Avatar, AvatarSimple, BRAND_LOGO_COLORS, BRAND_LOGO_DEFAULT_HEIGHT, BRAND_LOGO_DEFAULT_WIDTH, Badge, BagIcon, BanIcon, BathroomsIcon, BedroomsIcon, BellIcon, BrandLogo, BuildingIcon, Button, CalendarIcon, CalendarMinusIcon, CalendarOutlineIcon, CameraFilledIcon, CameraIcon, CardLocationIcon, CheckBadgeIcon, CheckIcon, CheckSuccessIcon, Checkbox, ChevronDownIcon, ChevronLeftIcon, ClockFilledIcon, ClockIcon, CloseIcon, CommentCard, ContactInfoCard, CopyIcon, Counter, CurrentLocationIcon, DatePicker, DownloadIcon, Drawer, EditIcon, FacebookIcon, FavoritesButton, FiltersIcon, FloatingActionButton, FullscreenIcon, GlobeIcon, GooglePlayIcon, GuestsIcon, HeadsetIcon, HeartIcon, HelpCircleIcon, HideIcon, HomeIcon, Icon, IconStatusBadge, InfoCardV2, InfoTile, Input, InstagramIcon, KeyIcon, LanguageSwitcher, LayoutGridIcon, LinkedInIcon, ListViewIcon, LocationPinIcon, LocationUserIcon, LockIcon, LogOutIcon, MailIcon, MapCollapseIcon, MapExpandIcon, MapViewIcon, MenuIcon, MenuItem, MenuLinesIcon, MinusIcon, Modal, MoreHorizontalIcon, NavigateIcon, NoSmokingIcon, PaginationDots, PawIcon, PhoneIcon, PlusIcon, QrCodeIcon, QuantityInput, QuietHoursIcon, Range, RatingInput, RatingStarIcon, RefreshIcon, RefundStatusIcon, SaveHeartIcon, SearchIcon, SegmentedToggle, Select, SettingsIcon, ShareIcon, ShowIcon, Sidebar, SidebarIcon, SortIcon, StarFilledIcon, StarIcon, StatCard, StatusBadge, StepList, StepPager, TableViewIcon, Textarea, Toggle, ToggleRow, TooltipArrowIcon, TrashIcon, UserIcon, UsersAltIcon, VerificationCodeInput, VideoIcon, VideoOffIcon, WhatsAppIcon, ZoomOutIcon, abbreviateMonthName, avatarTypography, badgeTypography, buttonTypography, colors, commentCardTypography, counterTypography, datePickerTypography, defaultLanguageOptions, fonts, formatDate, formatDateDayShortMonth, getIconsByGroup, grey, iconGroupNames, iconGroups, iconNames, icons, inputTypography, languageSwitcherTypography, ratingTypography, resolvePopoverAlign, segmentedToggleTypography, selectTypography, statCardTypography, textareaTypography };
+export { AccordionItem, AccountHeader, AlertTriangleIcon, Amenity, AmenityIcon, AppleIcon, AreaExpandIcon, ArrowRightIcon, Avatar, AvatarSimple, BRAND_LOGO_COLORS, BRAND_LOGO_DEFAULT_HEIGHT, BRAND_LOGO_DEFAULT_WIDTH, Badge, BagIcon, BanIcon, BathroomsIcon, BedroomsIcon, BellIcon, BrandLogo, BuildingIcon, Button, CalendarIcon, CalendarMinusIcon, CalendarOutlineIcon, CameraFilledIcon, CameraIcon, CardLocationIcon, CheckBadgeIcon, CheckIcon, CheckSuccessIcon, Checkbox, ChevronDownIcon, ChevronLeftIcon, ClockFilledIcon, ClockIcon, CloseIcon, CommentCard, ContactInfoCard, CopyIcon, Counter, DatePicker, DownloadIcon, EditIcon, FacebookIcon, FavoritesButton, FiltersIcon, FloatingActionButton, FullscreenIcon, GlobeIcon, GooglePlayIcon, GuestsIcon, HeadsetIcon, HeartIcon, HelpCircleIcon, HideIcon, HomeIcon, Icon, IconStatusBadge, InfoCardV2, InfoTile, Input, InstagramIcon, KeyIcon, LanguageSwitcher, LayoutGridIcon, LinkedInIcon, ListViewIcon, LocationPinIcon, LocationUserIcon, LockIcon, LogOutIcon, MailIcon, MapCollapseIcon, MapExpandIcon, MapViewIcon, MenuIcon, MenuItem, MenuLinesIcon, MinusIcon, Modal, MoreHorizontalIcon, NavigateIcon, NoSmokingIcon, PaginationDots, PawIcon, PhoneIcon, PlusIcon, QrCodeIcon, QuietHoursIcon, Range, RatingInput, RatingStarIcon, RefreshIcon, RefundStatusIcon, SaveHeartIcon, SearchIcon, SegmentedToggle, Select, SettingsIcon, ShareIcon, ShowIcon, Sidebar, SidebarIcon, SortIcon, StarFilledIcon, StarIcon, StatCard, StatusBadge, StepList, StepPager, TableViewIcon, Textarea, Toggle, ToggleRow, TooltipArrowIcon, TrashIcon, UserIcon, UsersAltIcon, VerificationCodeInput, VideoIcon, VideoOffIcon, WhatsAppIcon, ZoomOutIcon, abbreviateMonthName, avatarTypography, badgeTypography, buttonTypography, colors, commentCardTypography, counterTypography, datePickerTypography, defaultLanguageOptions, fonts, formatDate, formatDateDayShortMonth, getIconsByGroup, grey, iconGroupNames, iconGroups, iconNames, icons, inputTypography, languageSwitcherTypography, ratingTypography, resolvePopoverAlign, segmentedToggleTypography, selectTypography, statCardTypography, textareaTypography };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map