@ecohouse/ui 0.1.50 → 0.1.52

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ecohouse/ui",
-  "version": "0.1.50",
+  "version": "0.1.52",
   "type": "module",
   "private": false,
   "description": "Cross-platform presentation-only UI components for EcoHouse (React Native + React Native Web)",
@@ -83,12 +83,17 @@
   "devDependencies": {
     "@commitlint/cli": "^21.2.1",
     "@commitlint/config-conventional": "^21.2.0",
+    "@csstools/css-parser-algorithms": "4.0.0",
+    "@csstools/css-tokenizer": "4.0.0",
+    "@emnapi/core": "1.11.2",
+    "@emnapi/runtime": "1.11.2",
     "@eslint/js": "^9.17.0",
     "@storybook/react-vite": "^10.5.6",
     "@tailwindcss/postcss": "^4.1.13",
     "@tailwindcss/vite": "^4.1.13",
     "@types/react": "^18.3.18",
     "@types/react-dom": "^18.3.7",
+    "css-tree": "3.2.1",
     "eslint": "^9.17.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-react-hooks": "^5.1.0",

package/src/components/AutocompleteInput/AutocompleteInput.tsx

@@ -265,11 +265,14 @@ const styles = StyleSheet.create({
     borderColor: colors.grey700,
     borderRadius: 16,
     backgroundColor: colors.grey700,
-    shadowColor: colors.black,
-    shadowOffset: { width: 0, height: 8 },
-    shadowOpacity: 0.4,
-    shadowRadius: 18,
-    elevation: 12,
+    ...Platform.select({
+      web: {
+        boxShadow: `0 8px 18px ${colors.black}66`,
+      },
+      default: {
+        elevation: 12,
+      },
+    }),
   },
   list: {
     maxHeight: MENU_MAX_HEIGHT,

package/src/components/Drawer/Drawer.tsx

@@ -74,6 +74,7 @@ export const Drawer = forwardRef<ComponentRef<typeof View>, DrawerProps>(functio
   forwardedRef,
 ) {
   const panelRef = useRef<ComponentRef<typeof View>>(null);
+  const shellRef = useRef<HTMLDivElement | null>(null);
   const setPanelRef = useMemo(() => mergeRefs(panelRef, forwardedRef), [forwardedRef]);
   const resolvedClassName = className?.trim() || undefined;
   const closeTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
@@ -102,6 +103,27 @@ export const Drawer = forwardRef<ComponentRef<typeof View>, DrawerProps>(functio
     };
   }, [mounted, onClose]);
 
+  const targetWidth = Math.min(width, typeof window !== "undefined" ? window.innerWidth : width);
+
+  const playWidth = useCallback(
+    (target: number) => {
+      const shell = shellRef.current;
+      if (!shell) return;
+      const reduced =
+        typeof window !== "undefined" &&
+        window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+      const duration = reduced ? 0 : animationDuration;
+      const from = shell.getBoundingClientRect().width;
+      shell.style.transition = "none";
+      shell.style.width = `${from}px`;
+      // Flush layout so the transition starts from the current width, not the final one.
+      void shell.offsetWidth;
+      shell.style.transition = `width ${duration}ms cubic-bezier(0.32, 0.72, 0, 1)`;
+      shell.style.width = `${target}px`;
+    },
+    [animationDuration],
+  );
+
   // Web: mount at width 0, then expand; on close collapse then unmount.
   useEffect(() => {
     if (Platform.OS !== "web") return undefined;
@@ -113,13 +135,11 @@ export const Drawer = forwardRef<ComponentRef<typeof View>, DrawerProps>(functio
 
     if (open) {
       setMounted(true);
-      const frame = requestAnimationFrame(() => {
-        requestAnimationFrame(() => setEntered(true));
-      });
-      return () => cancelAnimationFrame(frame);
+      return undefined;
     }
 
     setEntered(false);
+    playWidth(0);
     // Fallback if transitionend is skipped (e.g. reduced motion / tab background).
     closeTimeoutRef.current = setTimeout(() => {
       setMounted(false);
@@ -132,7 +152,27 @@ export const Drawer = forwardRef<ComponentRef<typeof View>, DrawerProps>(functio
         closeTimeoutRef.current = null;
       }
     };
-  }, [open, animationDuration]);
+  }, [open, animationDuration, playWidth]);
+
+  // Portal exists only after mounted flips. Animate from 0 on the next frame.
+  useEffect(() => {
+    if (Platform.OS !== "web" || !mounted || !open) return undefined;
+
+    const shell = shellRef.current;
+    if (shell) {
+      shell.style.transition = "none";
+      shell.style.width = "0px";
+    }
+
+    const frame = requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        setEntered(true);
+        playWidth(targetWidth);
+      });
+    });
+
+    return () => cancelAnimationFrame(frame);
+  }, [mounted, open, targetWidth, playWidth]);
 
   // Native: animate width + backdrop opacity.
   useEffect(() => {
@@ -267,28 +307,28 @@ export const Drawer = forwardRef<ComponentRef<typeof View>, DrawerProps>(functio
           minWidth:0 is required — flex defaults would otherwise lock width to content.
         */}
         <div
+          ref={shellRef}
           onTransitionEnd={handleWebTransitionEnd}
           style={{
             position: "relative",
             zIndex: 1,
             height: "100%",
-            width: entered
-              ? Math.min(width, typeof window !== "undefined" ? window.innerWidth : width)
-              : 0,
+            flex: "0 0 auto",
             minWidth: 0,
             maxWidth: "100%",
             overflow: "hidden",
-            transition: `width ${animationDuration}ms cubic-bezier(0.32, 0.72, 0, 1)`,
             willChange: "width",
             boxSizing: "border-box",
           }}
         >
           <div
             style={{
-              width,
+              position: "absolute",
+              top: 0,
+              right: 0,
+              bottom: 0,
+              width: targetWidth,
               maxWidth: "100%",
-              height: "100%",
-              marginLeft: "auto",
               display: "flex",
               flexDirection: "column",
             }}