@ecohouse/ui 0.1.39 → 0.1.40

package/dist/index.cjs

@@ -30306,40 +30306,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__ */ jsxRuntime.jsx(Svg21__default.default, { width: size, height: size, viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
-    Svg21.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__ */ jsxRuntime.jsx(Svg21__default.default, { width: size, height: size, viewBox: "0 0 19 19", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
-    Svg21.Path,
-    {
-      d: CURRENT_LOCATION_PATH,
-      stroke: color,
-      strokeWidth,
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }
-  ) });
-}
-
 // src/utils/mergeRefs.ts
 function mergeRefs(internalRef, forwardedRef) {
   return (node) => {
@@ -32115,7 +32081,7 @@ var styles15 = reactNative.StyleSheet.create({
 });
 var DESKTOP_MIN_WIDTH3 = 1024;
 var CHEVRON_SIZE3 = 24;
-var Accordion = react.forwardRef(function Accordion2({
+react.forwardRef(function Accordion2({
   title,
   children,
   open: openProp,
@@ -32456,7 +32422,7 @@ var styles18 = reactNative.StyleSheet.create({
     flex: 1
   }
 });
-var QuantityInput = react.forwardRef(
+react.forwardRef(
   function QuantityInput2({
     label,
     icon: Icon2,
@@ -34270,9 +34236,10 @@ var styles26 = reactNative.StyleSheet.create({
   },
   rangeValueRow: {
     minWidth: 0,
+    width: "100%",
     flexDirection: "row",
     alignItems: "center",
-    justifyContent: "flex-start",
+    justifyContent: "space-between",
     flexWrap: "nowrap",
     gap: 10
   },
@@ -34617,38 +34584,16 @@ var styles28 = reactNative.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 = react.forwardRef(function Drawer2({
+react.forwardRef(function Drawer2({
   open,
   onClose,
   children,
   title,
   width = DEFAULT_WIDTH2,
+  animationDuration = DEFAULT_DURATION,
   closeOnBackdropPress = true,
   backdropAccessibilityLabel = "Close",
   closeAccessibilityLabel = "Close",
@@ -34658,9 +34603,14 @@ var Drawer = react.forwardRef(function Drawer2({
   const panelRef = react.useRef(null);
   const setPanelRef = react.useMemo(() => mergeRefs(panelRef, forwardedRef), [forwardedRef]);
   const resolvedClassName = className?.trim() || void 0;
-  useApplyWebClassName(panelRef, resolvedClassName, open && reactNative.Platform.OS === "web");
+  const closeTimeoutRef = react.useRef(null);
+  const [mounted, setMounted] = react.useState(open);
+  const [entered, setEntered] = react.useState(false);
+  const animatedWidth = react.useRef(new reactNative.Animated.Value(open ? width : 0)).current;
+  const animatedBackdrop = react.useRef(new reactNative.Animated.Value(open ? 1 : 0)).current;
+  useApplyWebClassName(panelRef, resolvedClassName, mounted && reactNative.Platform.OS === "web");
   react.useEffect(() => {
-    if (!open || reactNative.Platform.OS !== "web") return void 0;
+    if (!mounted || reactNative.Platform.OS !== "web") return void 0;
     const previousOverflow = document.body.style.overflow;
     document.body.style.overflow = "hidden";
     const onKeyDown = (event) => {
@@ -34671,7 +34621,84 @@ var Drawer = react.forwardRef(function Drawer2({
       document.body.style.overflow = previousOverflow;
       document.removeEventListener("keydown", onKeyDown);
     };
-  }, [open, onClose]);
+  }, [mounted, onClose]);
+  react.useEffect(() => {
+    if (reactNative.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]);
+  react.useEffect(() => {
+    if (reactNative.Platform.OS === "web") return void 0;
+    if (open) {
+      setMounted(true);
+      reactNative.Animated.parallel([
+        reactNative.Animated.timing(animatedWidth, {
+          toValue: width,
+          duration: animationDuration,
+          easing: reactNative.Easing.out(reactNative.Easing.cubic),
+          useNativeDriver: false
+        }),
+        reactNative.Animated.timing(animatedBackdrop, {
+          toValue: 1,
+          duration: animationDuration,
+          easing: reactNative.Easing.out(reactNative.Easing.cubic),
+          useNativeDriver: true
+        })
+      ]).start();
+      return void 0;
+    }
+    reactNative.Animated.parallel([
+      reactNative.Animated.timing(animatedWidth, {
+        toValue: 0,
+        duration: animationDuration,
+        easing: reactNative.Easing.in(reactNative.Easing.cubic),
+        useNativeDriver: false
+      }),
+      reactNative.Animated.timing(animatedBackdrop, {
+        toValue: 0,
+        duration: animationDuration,
+        easing: reactNative.Easing.in(reactNative.Easing.cubic),
+        useNativeDriver: true
+      })
+    ]).start(({ finished }) => {
+      if (finished) setMounted(false);
+    });
+    return void 0;
+  }, [open, width, animationDuration, animatedWidth, animatedBackdrop]);
+  const handleWebTransitionEnd = react.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__ */ jsxRuntime.jsxs(reactNative.View, { style: styles29.header, children: [
     /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles29.title, numberOfLines: 1, children: title }),
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -34686,12 +34713,12 @@ var Drawer = react.forwardRef(function Drawer2({
       }
     )
   ] }) : null;
-  const panel = /* @__PURE__ */ jsxRuntime.jsxs(
+  const panelContent = /* @__PURE__ */ jsxRuntime.jsxs(
     reactNative.View,
     {
       ref: setPanelRef,
       accessibilityViewIsModal: true,
-      style: [styles29.panel, { width }, style],
+      style: [styles29.panelInner, { width }, style],
       onStartShouldSetResponder: () => true,
       children: [
         header,
@@ -34700,45 +34727,104 @@ var Drawer = react.forwardRef(function Drawer2({
     }
   );
   if (reactNative.Platform.OS === "web") {
-    if (!open || typeof document === "undefined") return null;
+    if (!mounted || typeof document === "undefined") return null;
     return (0, import_react_dom2.createPortal)(
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: webRootDomStyle2, role: "presentation", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            type: "button",
-            "aria-label": backdropAccessibilityLabel,
-            disabled: !closeOnBackdropPress,
-            onClick: closeOnBackdropPress ? onClose : void 0,
-            style: webBackdropDomStyle2
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            style: {
-              position: "relative",
-              zIndex: 1,
-              height: "100%",
-              maxWidth: "100%",
-              display: "flex"
-            },
-            children: panel
-          }
-        )
-      ] }),
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    style: {
+                      width,
+                      maxWidth: "100%",
+                      height: "100%",
+                      marginLeft: "auto",
+                      display: "flex",
+                      flexDirection: "column"
+                    },
+                    children: panelContent
+                  }
+                )
+              }
+            )
+          ]
+        }
+      ),
       document.body
     );
   }
+  if (!mounted) return null;
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactNative.Modal,
     {
-      visible: open,
+      visible: mounted,
       transparent: true,
-      animationType: "slide",
+      animationType: "none",
       onRequestClose: onClose,
       statusBarTranslucent: true,
       children: /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles29.root, accessibilityViewIsModal: true, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          reactNative.Animated.View,
+          {
+            pointerEvents: "none",
+            style: [styles29.backdrop, { opacity: animatedBackdrop }]
+          }
+        ),
         /* @__PURE__ */ jsxRuntime.jsx(
           reactNative.Pressable,
           {
@@ -34746,10 +34832,10 @@ var Drawer = react.forwardRef(function Drawer2({
             accessibilityLabel: backdropAccessibilityLabel,
             disabled: !closeOnBackdropPress,
             onPress: closeOnBackdropPress ? onClose : void 0,
-            style: styles29.backdrop
+            style: reactNative.StyleSheet.absoluteFill
           }
         ),
-        panel
+        /* @__PURE__ */ jsxRuntime.jsx(reactNative.Animated.View, { style: [styles29.panelShell, { width: animatedWidth }], children: panelContent })
       ] })
     }
   );
@@ -34764,11 +34850,19 @@ var styles29 = reactNative.StyleSheet.create({
     ...reactNative.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,
@@ -34787,10 +34881,11 @@ var styles29 = reactNative.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,
@@ -35094,7 +35189,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 = react.forwardRef(
+react.forwardRef(
   function AutocompleteInput2({
     value,
     options,
@@ -37669,7 +37764,6 @@ react-dom/cjs/react-dom.development.js:
    *)
 */
 
-exports.Accordion = Accordion;
 exports.AccordionItem = AccordionItem;
 exports.AccountHeader = AccountHeader;
 exports.AlertTriangleIcon = AlertTriangleIcon;
@@ -37677,9 +37771,7 @@ exports.Amenity = Amenity;
 exports.AmenityIcon = AmenityIcon;
 exports.AppleIcon = AppleIcon;
 exports.AreaExpandIcon = AreaExpandIcon;
-exports.ArrowLeftIcon = ArrowLeftIcon;
 exports.ArrowRightIcon = ArrowRightIcon;
-exports.AutocompleteInput = AutocompleteInput;
 exports.Avatar = Avatar;
 exports.AvatarSimple = AvatarSimple;
 exports.BRAND_LOGO_COLORS = BRAND_LOGO_COLORS;
@@ -37713,10 +37805,8 @@ exports.CommentCard = CommentCard;
 exports.ContactInfoCard = ContactInfoCard;
 exports.CopyIcon = CopyIcon;
 exports.Counter = Counter;
-exports.CurrentLocationIcon = CurrentLocationIcon;
 exports.DatePicker = DatePicker;
 exports.DownloadIcon = DownloadIcon;
-exports.Drawer = Drawer;
 exports.EditIcon = EditIcon;
 exports.FacebookIcon = FacebookIcon;
 exports.FavoritesButton = FavoritesButton;
@@ -37763,7 +37853,6 @@ exports.PawIcon = PawIcon;
 exports.PhoneIcon = PhoneIcon;
 exports.PlusIcon = PlusIcon;
 exports.QrCodeIcon = QrCodeIcon;
-exports.QuantityInput = QuantityInput;
 exports.QuietHoursIcon = QuietHoursIcon;
 exports.Range = Range;
 exports.RatingInput = RatingInput;