@waveso/ui 0.0.10 → 0.1.0

package/dist/masonry.js

@@ -1,235 +1,194 @@
-import { StarIcon } from './chunk-DIGOLJIR.js';
-import { cn } from './chunk-76UQO56T.js';
-import * as React from 'react';
-import { AnimatePresence, motion } from 'motion/react';
-import { jsx, jsxs } from 'react/jsx-runtime';
-
-var STAGGER_STEP = 0.05;
-var MasonryStaggerContext = React.createContext(null);
-function Masonry({
-  columns,
-  columnWidth,
-  gap = 4,
-  className,
-  children,
-  ...props
-}) {
-  const containerRef = React.useRef(null);
-  const rafRef = React.useRef(0);
-  const staggerCounterRef = React.useRef(0);
-  staggerCounterRef.current = 0;
-  const getStaggerIndex = React.useCallback(
-    () => staggerCounterRef.current++,
-    []
-  );
-  React.useLayoutEffect(() => {
-    const container = containerRef.current;
-    if (!container) return;
-    const remPx = parseFloat(
-      getComputedStyle(document.documentElement).fontSize
-    );
-    const gapPx = gap * 0.25 * remPx;
-    function reflow() {
-      const allChildren = Array.from(container.children);
-      const items = allChildren.filter((el) => el.dataset.exiting == null);
-      if (items.length === 0) {
-        container.style.removeProperty("height");
-        return;
-      }
-      const containerWidth = container.clientWidth;
-      if (containerWidth === 0) return;
-      let colCount;
-      if (columns != null) {
-        colCount = Math.max(1, columns);
-      } else if (columnWidth != null) {
-        colCount = Math.max(
-          1,
-          Math.floor((containerWidth + gapPx) / (columnWidth + gapPx))
-        );
-      } else {
-        colCount = Math.max(
-          1,
-          Math.floor((containerWidth + gapPx) / (240 + gapPx))
-        );
-      }
-      if (colCount <= 1) {
-        container.style.removeProperty("height");
-        container.style.display = "flex";
-        container.style.flexDirection = "column";
-        container.style.gap = `${gapPx}px`;
-        for (const item of items) {
-          item.style.removeProperty("position");
-          item.style.removeProperty("top");
-          item.style.removeProperty("left");
-          item.style.removeProperty("width");
-        }
-        return;
-      }
-      container.style.removeProperty("display");
-      container.style.removeProperty("flex-direction");
-      container.style.removeProperty("gap");
-      const colWidth = (containerWidth - (colCount - 1) * gapPx) / colCount;
-      const columnBottoms = new Array(colCount).fill(0);
-      const topItems = [];
-      const regularItems = [];
-      for (const item of items) {
-        const raw = parseInt(item.dataset.span || "1", 10);
-        if (raw > 1) {
-          topItems.push({ el: item, span: Math.min(raw, colCount) });
-        } else {
-          regularItems.push(item);
-        }
-      }
-      for (const { el, span } of topItems) {
-        el.style.position = "absolute";
-        el.style.width = `${span * colWidth + (span - 1) * gapPx}px`;
-      }
-      for (const item of regularItems) {
-        item.style.position = "absolute";
-        item.style.width = `${colWidth}px`;
-      }
-      const topHeights = [];
-      for (const { el } of topItems) {
-        topHeights.push(el.offsetHeight);
-      }
-      const regularHeights = [];
-      for (const item of regularItems) {
-        regularHeights.push(item.offsetHeight);
-      }
-      let nextCol = 0;
-      for (let i = 0; i < topItems.length; i++) {
-        const { el, span } = topItems[i];
-        const s = Math.min(span, colCount - nextCol);
-        const x = nextCol * (colWidth + gapPx);
-        el.style.top = "0px";
-        el.style.left = `${x}px`;
-        if (s !== span) {
-          el.style.width = `${s * colWidth + (s - 1) * gapPx}px`;
-        }
-        const bottom = topHeights[i] + gapPx;
-        for (let c = nextCol; c < nextCol + s; c++) {
-          columnBottoms[c] = bottom;
-        }
-        nextCol += s;
-      }
-      for (let i = 0; i < regularItems.length; i++) {
-        let shortestCol = 0;
-        for (let c = 1; c < colCount; c++) {
-          if (columnBottoms[c] < columnBottoms[shortestCol]) {
-            shortestCol = c;
-          }
-        }
-        const x = shortestCol * (colWidth + gapPx);
-        const y = columnBottoms[shortestCol];
-        regularItems[i].style.top = `${y}px`;
-        regularItems[i].style.left = `${x}px`;
-        columnBottoms[shortestCol] = y + regularHeights[i] + gapPx;
-      }
-      const maxBottom = Math.max(...columnBottoms) - gapPx;
-      container.style.height = `${Math.max(0, maxBottom)}px`;
-    }
-    function scheduleReflow() {
-      cancelAnimationFrame(rafRef.current);
-      rafRef.current = requestAnimationFrame(reflow);
-    }
-    reflow();
-    const ro = new ResizeObserver(scheduleReflow);
-    ro.observe(container);
-    const mo = new MutationObserver(scheduleReflow);
-    mo.observe(container, {
-      childList: true,
-      subtree: true,
-      attributes: true,
-      attributeFilter: ["data-exiting", "data-span"]
-    });
-    container.addEventListener("load", scheduleReflow, true);
-    return () => {
-      cancelAnimationFrame(rafRef.current);
-      ro.disconnect();
-      mo.disconnect();
-      container.removeEventListener("load", scheduleReflow, true);
-      container.style.removeProperty("height");
-      container.style.removeProperty("display");
-      container.style.removeProperty("flex-direction");
-      container.style.removeProperty("gap");
-      const items = Array.from(container.children);
-      for (const item of items) {
-        item.style.removeProperty("position");
-        item.style.removeProperty("top");
-        item.style.removeProperty("left");
-        item.style.removeProperty("width");
-      }
-    };
-  }, [columns, columnWidth, gap]);
-  return /* @__PURE__ */ jsx(MasonryStaggerContext.Provider, { value: getStaggerIndex, children: /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref: containerRef,
-      "data-slot": "masonry",
-      className: cn("relative", className),
-      ...props,
-      children: /* @__PURE__ */ jsx(AnimatePresence, { children })
-    }
-  ) });
+"use client";
+import { cn } from "./lib/utils.js";
+import { StarIcon } from "./lib/internal-icons.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { AnimatePresence, motion } from "motion/react";
+//#region src/masonry.tsx
+const STAGGER_STEP = .05;
+const MasonryStaggerContext = React.createContext(null);
+function Masonry({ columns, columnWidth, gap = 4, className, children, ...props }) {
+	const containerRef = React.useRef(null);
+	const rafRef = React.useRef(0);
+	const staggerCounterRef = React.useRef(0);
+	staggerCounterRef.current = 0;
+	const getStaggerIndex = React.useCallback(() => staggerCounterRef.current++, []);
+	React.useLayoutEffect(() => {
+		const container = containerRef.current;
+		if (!container) return;
+		const remPx = parseFloat(getComputedStyle(document.documentElement).fontSize);
+		const gapPx = gap * .25 * remPx;
+		function reflow() {
+			const items = Array.from(container.children).filter((el) => el.dataset.exiting == null);
+			if (items.length === 0) {
+				container.style.removeProperty("height");
+				return;
+			}
+			const containerWidth = container.clientWidth;
+			if (containerWidth === 0) return;
+			let colCount;
+			if (columns != null) colCount = Math.max(1, columns);
+			else if (columnWidth != null) colCount = Math.max(1, Math.floor((containerWidth + gapPx) / (columnWidth + gapPx)));
+			else colCount = Math.max(1, Math.floor((containerWidth + gapPx) / (240 + gapPx)));
+			if (colCount <= 1) {
+				container.style.removeProperty("height");
+				container.style.display = "flex";
+				container.style.flexDirection = "column";
+				container.style.gap = `${gapPx}px`;
+				for (const item of items) {
+					item.style.removeProperty("position");
+					item.style.removeProperty("top");
+					item.style.removeProperty("left");
+					item.style.removeProperty("width");
+				}
+				return;
+			}
+			container.style.removeProperty("display");
+			container.style.removeProperty("flex-direction");
+			container.style.removeProperty("gap");
+			const colWidth = (containerWidth - (colCount - 1) * gapPx) / colCount;
+			const columnBottoms = new Array(colCount).fill(0);
+			const topItems = [];
+			const regularItems = [];
+			for (const item of items) {
+				const raw = parseInt(item.dataset.span || "1", 10);
+				if (raw > 1) topItems.push({
+					el: item,
+					span: Math.min(raw, colCount)
+				});
+				else regularItems.push(item);
+			}
+			for (const { el, span } of topItems) {
+				el.style.position = "absolute";
+				el.style.width = `${span * colWidth + (span - 1) * gapPx}px`;
+			}
+			for (const item of regularItems) {
+				item.style.position = "absolute";
+				item.style.width = `${colWidth}px`;
+			}
+			const topHeights = [];
+			for (const { el } of topItems) topHeights.push(el.offsetHeight);
+			const regularHeights = [];
+			for (const item of regularItems) regularHeights.push(item.offsetHeight);
+			let nextCol = 0;
+			for (let i = 0; i < topItems.length; i++) {
+				const { el, span } = topItems[i];
+				const s = Math.min(span, colCount - nextCol);
+				const x = nextCol * (colWidth + gapPx);
+				el.style.top = "0px";
+				el.style.left = `${x}px`;
+				if (s !== span) el.style.width = `${s * colWidth + (s - 1) * gapPx}px`;
+				const bottom = topHeights[i] + gapPx;
+				for (let c = nextCol; c < nextCol + s; c++) columnBottoms[c] = bottom;
+				nextCol += s;
+			}
+			for (let i = 0; i < regularItems.length; i++) {
+				let shortestCol = 0;
+				for (let c = 1; c < colCount; c++) if (columnBottoms[c] < columnBottoms[shortestCol]) shortestCol = c;
+				const x = shortestCol * (colWidth + gapPx);
+				const y = columnBottoms[shortestCol];
+				regularItems[i].style.top = `${y}px`;
+				regularItems[i].style.left = `${x}px`;
+				columnBottoms[shortestCol] = y + regularHeights[i] + gapPx;
+			}
+			const maxBottom = Math.max(...columnBottoms) - gapPx;
+			container.style.height = `${Math.max(0, maxBottom)}px`;
+		}
+		function scheduleReflow() {
+			cancelAnimationFrame(rafRef.current);
+			rafRef.current = requestAnimationFrame(reflow);
+		}
+		reflow();
+		const ro = new ResizeObserver(scheduleReflow);
+		ro.observe(container);
+		const mo = new MutationObserver(scheduleReflow);
+		mo.observe(container, {
+			childList: true,
+			subtree: true,
+			attributes: true,
+			attributeFilter: ["data-exiting", "data-span"]
+		});
+		container.addEventListener("load", scheduleReflow, true);
+		return () => {
+			cancelAnimationFrame(rafRef.current);
+			ro.disconnect();
+			mo.disconnect();
+			container.removeEventListener("load", scheduleReflow, true);
+			container.style.removeProperty("height");
+			container.style.removeProperty("display");
+			container.style.removeProperty("flex-direction");
+			container.style.removeProperty("gap");
+			const items = Array.from(container.children);
+			for (const item of items) {
+				item.style.removeProperty("position");
+				item.style.removeProperty("top");
+				item.style.removeProperty("left");
+				item.style.removeProperty("width");
+			}
+		};
+	}, [
+		columns,
+		columnWidth,
+		gap
+	]);
+	return /* @__PURE__ */ jsx(MasonryStaggerContext.Provider, {
+		value: getStaggerIndex,
+		children: /* @__PURE__ */ jsx("div", {
+			ref: containerRef,
+			"data-slot": "masonry",
+			className: cn("relative", className),
+			...props,
+			children: /* @__PURE__ */ jsx(AnimatePresence, { children })
+		})
+	});
 }
 function FeaturedBadge() {
-  return /* @__PURE__ */ jsx(
-    "span",
-    {
-      "data-slot": "masonry-badge",
-      className: "absolute top-2 right-2 z-10 flex size-5 items-center justify-center pointer-events-none",
-      "aria-label": "Featured",
-      children: /* @__PURE__ */ jsx(StarIcon, { width: 10, height: 10, fill: "currentColor", "aria-hidden": true })
-    }
-  );
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "masonry-badge",
+		className: "absolute top-2 right-2 z-10 flex size-5 items-center justify-center pointer-events-none",
+		"aria-label": "Featured",
+		children: /* @__PURE__ */ jsx(StarIcon, {
+			width: 10,
+			height: 10,
+			fill: "currentColor",
+			"aria-hidden": true
+		})
+	});
 }
-function MasonryItem({
-  className,
-  span,
-  children,
-  ...props
-}) {
-  const isSpanned = span != null && span > 1;
-  const getStaggerIndex = React.useContext(MasonryStaggerContext);
-  const [staggerDelay] = React.useState(
-    () => getStaggerIndex ? getStaggerIndex() * STAGGER_STEP : 0
-  );
-  return /* @__PURE__ */ jsxs(
-    motion.div,
-    {
-      "data-slot": "masonry-item",
-      "data-span": isSpanned ? span : void 0,
-      className: cn("relative", className),
-      initial: {
-        opacity: 0,
-        y: 10,
-        filter: "blur(8px)"
-      },
-      animate: {
-        opacity: 1,
-        y: 0,
-        filter: "blur(0px)"
-      },
-      transition: {
-        type: "spring",
-        stiffness: 100,
-        damping: 10,
-        delay: staggerDelay
-      },
-      exit: {
-        opacity: 0,
-        scale: 1.2,
-        filter: "blur(8px)"
-      },
-      ...props,
-      children: [
-        children,
-        isSpanned && /* @__PURE__ */ jsx(FeaturedBadge, {})
-      ]
-    }
-  );
+function MasonryItem({ className, span, children, ...props }) {
+	const isSpanned = span != null && span > 1;
+	const getStaggerIndex = React.useContext(MasonryStaggerContext);
+	const [staggerDelay] = React.useState(() => getStaggerIndex ? getStaggerIndex() * STAGGER_STEP : 0);
+	return /* @__PURE__ */ jsxs(motion.div, {
+		"data-slot": "masonry-item",
+		"data-span": isSpanned ? span : void 0,
+		className: cn("relative", className),
+		initial: {
+			opacity: 0,
+			y: 10,
+			filter: "blur(8px)"
+		},
+		animate: {
+			opacity: 1,
+			y: 0,
+			filter: "blur(0px)"
+		},
+		transition: {
+			type: "spring",
+			stiffness: 100,
+			damping: 10,
+			delay: staggerDelay
+		},
+		exit: {
+			opacity: 0,
+			scale: 1.2,
+			filter: "blur(8px)"
+		},
+		...props,
+		children: [children, isSpanned && /* @__PURE__ */ jsx(FeaturedBadge, {})]
+	});
 }
-
+//#endregion
 export { Masonry, MasonryItem };
-//# sourceMappingURL=masonry.js.map
+
 //# sourceMappingURL=masonry.js.map

package/dist/masonry.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/masonry.tsx"],"names":[],"mappings":"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","file":"masonry.js","sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\n\nimport { AnimatePresence, type HTMLMotionProps, motion } from \"motion/react\"\n\nimport { StarIcon } from \"./lib/internal-icons\"\nimport { cn } from \"./lib/utils\"\n\nconst STAGGER_STEP = 0.05 // 50ms between each item's enter animation\n\nconst MasonryStaggerContext = React.createContext<(() => number) | null>(null)\n\ntype MasonryProps = React.ComponentProps<\"div\"> & {\n  columns?: number\n  columnWidth?: number\n  gap?: number\n}\n\ntype MasonryItemProps = Omit<HTMLMotionProps<\"div\">, \"children\"> & {\n  span?: number\n  children?: React.ReactNode\n}\n\nfunction Masonry({\n  columns,\n  columnWidth,\n  gap = 4,\n  className,\n  children,\n  ...props\n}: MasonryProps) {\n  const containerRef = React.useRef<HTMLDivElement>(null)\n  const rafRef = React.useRef<number>(0)\n  const staggerCounterRef = React.useRef(0)\n\n  // Reset counter each render so new items in a batch get fresh 0-based indices\n  staggerCounterRef.current = 0\n\n  const getStaggerIndex = React.useCallback(\n    () => staggerCounterRef.current++,\n    [],\n  )\n\n  React.useLayoutEffect(() => {\n    const container = containerRef.current\n    if (!container) return\n\n    const remPx = parseFloat(\n      getComputedStyle(document.documentElement).fontSize,\n    )\n    const gapPx = gap * 0.25 * remPx\n\n    function reflow() {\n      const allChildren = Array.from(container!.children) as HTMLElement[]\n      // Skip exiting items — they keep their position during exit animation\n      const items = allChildren.filter((el) => el.dataset.exiting == null)\n\n      if (items.length === 0) {\n        container!.style.removeProperty(\"height\")\n        return\n      }\n\n      const containerWidth = container!.clientWidth\n      if (containerWidth === 0) return\n\n      let colCount: number\n      if (columns != null) {\n        colCount = Math.max(1, columns)\n      } else if (columnWidth != null) {\n        colCount = Math.max(\n          1,\n          Math.floor((containerWidth + gapPx) / (columnWidth + gapPx)),\n        )\n      } else {\n        colCount = Math.max(\n          1,\n          Math.floor((containerWidth + gapPx) / (240 + gapPx)),\n        )\n      }\n\n      // Single column: use normal flow with gap\n      if (colCount <= 1) {\n        container!.style.removeProperty(\"height\")\n        container!.style.display = \"flex\"\n        container!.style.flexDirection = \"column\"\n        container!.style.gap = `${gapPx}px`\n        for (const item of items) {\n          item.style.removeProperty(\"position\")\n          item.style.removeProperty(\"top\")\n          item.style.removeProperty(\"left\")\n          item.style.removeProperty(\"width\")\n        }\n        return\n      }\n\n      // Multi-column: clear single-column styles\n      container!.style.removeProperty(\"display\")\n      container!.style.removeProperty(\"flex-direction\")\n      container!.style.removeProperty(\"gap\")\n\n      const colWidth = (containerWidth - (colCount - 1) * gapPx) / colCount\n      const columnBottoms = new Array<number>(colCount).fill(0)\n\n      // Partition items: spanning (top-pinned) vs regular\n      const topItems: { el: HTMLElement; span: number }[] = []\n      const regularItems: HTMLElement[] = []\n      for (const item of items) {\n        const raw = parseInt(item.dataset.span || \"1\", 10)\n        if (raw > 1) {\n          topItems.push({ el: item, span: Math.min(raw, colCount) })\n        } else {\n          regularItems.push(item)\n        }\n      }\n\n      // First pass: set width on all items for correct height measurement\n      for (const { el, span } of topItems) {\n        el.style.position = \"absolute\"\n        el.style.width = `${span * colWidth + (span - 1) * gapPx}px`\n      }\n      for (const item of regularItems) {\n        item.style.position = \"absolute\"\n        item.style.width = `${colWidth}px`\n      }\n\n      // Second pass: batch-read heights\n      const topHeights: number[] = []\n      for (const { el } of topItems) {\n        topHeights.push(el.offsetHeight)\n      }\n      const regularHeights: number[] = []\n      for (const item of regularItems) {\n        regularHeights.push(item.offsetHeight)\n      }\n\n      // Third pass: place top items at Y=0, left-to-right\n      let nextCol = 0\n      for (let i = 0; i < topItems.length; i++) {\n        const { el, span } = topItems[i]!\n        const s = Math.min(span, colCount - nextCol)\n\n        const x = nextCol * (colWidth + gapPx)\n        el.style.top = \"0px\"\n        el.style.left = `${x}px`\n        // Recalculate width if span was clamped\n        if (s !== span) {\n          el.style.width = `${s * colWidth + (s - 1) * gapPx}px`\n        }\n\n        const bottom = topHeights[i]! + gapPx\n        for (let c = nextCol; c < nextCol + s; c++) {\n          columnBottoms[c] = bottom\n        }\n\n        nextCol += s\n      }\n\n      // Fourth pass: place regular items in shortest column\n      for (let i = 0; i < regularItems.length; i++) {\n        let shortestCol = 0\n        for (let c = 1; c < colCount; c++) {\n          if (columnBottoms[c]! < columnBottoms[shortestCol]!) {\n            shortestCol = c\n          }\n        }\n\n        const x = shortestCol * (colWidth + gapPx)\n        const y = columnBottoms[shortestCol]!\n\n        regularItems[i]!.style.top = `${y}px`\n        regularItems[i]!.style.left = `${x}px`\n\n        columnBottoms[shortestCol] = y + regularHeights[i]! + gapPx\n      }\n\n      const maxBottom = Math.max(...columnBottoms) - gapPx\n      container!.style.height = `${Math.max(0, maxBottom)}px`\n    }\n\n    function scheduleReflow() {\n      cancelAnimationFrame(rafRef.current)\n      rafRef.current = requestAnimationFrame(reflow)\n    }\n\n    reflow()\n\n    const ro = new ResizeObserver(scheduleReflow)\n    ro.observe(container)\n\n    const mo = new MutationObserver(scheduleReflow)\n    mo.observe(container, {\n      childList: true,\n      subtree: true,\n      attributes: true,\n      attributeFilter: [\"data-exiting\", \"data-span\"],\n    })\n\n    // Detect image/media loads that change item heights\n    container.addEventListener(\"load\", scheduleReflow, true)\n\n    return () => {\n      cancelAnimationFrame(rafRef.current)\n      ro.disconnect()\n      mo.disconnect()\n      container.removeEventListener(\"load\", scheduleReflow, true)\n      container.style.removeProperty(\"height\")\n      container.style.removeProperty(\"display\")\n      container.style.removeProperty(\"flex-direction\")\n      container.style.removeProperty(\"gap\")\n      const items = Array.from(container.children) as HTMLElement[]\n      for (const item of items) {\n        item.style.removeProperty(\"position\")\n        item.style.removeProperty(\"top\")\n        item.style.removeProperty(\"left\")\n        item.style.removeProperty(\"width\")\n      }\n    }\n  }, [columns, columnWidth, gap])\n\n  return (\n    <MasonryStaggerContext.Provider value={getStaggerIndex}>\n      <div\n        ref={containerRef}\n        data-slot=\"masonry\"\n        className={cn(\"relative\", className)}\n        {...props}\n      >\n        <AnimatePresence>\n          {children}\n        </AnimatePresence>\n      </div>\n    </MasonryStaggerContext.Provider>\n  )\n}\n\nfunction FeaturedBadge() {\n  return (\n    <span\n      data-slot=\"masonry-badge\"\n      className=\"absolute top-2 right-2 z-10 flex size-5 items-center justify-center pointer-events-none\"\n      aria-label=\"Featured\"\n    >\n      <StarIcon width={10} height={10} fill=\"currentColor\" aria-hidden />\n    </span>\n  )\n}\n\nfunction MasonryItem({\n  className,\n  span,\n  children,\n  ...props\n}: MasonryItemProps) {\n  const isSpanned = span != null && span > 1\n  const getStaggerIndex = React.useContext(MasonryStaggerContext)\n\n  // Capture stagger index once on mount — useState initializer runs exactly once\n  const [staggerDelay] = React.useState(() =>\n    getStaggerIndex ? getStaggerIndex() * STAGGER_STEP : 0,\n  )\n\n  return (\n    <motion.div\n      data-slot=\"masonry-item\"\n      data-span={isSpanned ? span : undefined}\n      className={cn(\"relative\", className)}\n      initial={{\n        opacity: 0,\n        y: 10,\n        filter: \"blur(8px)\"\n      }}\n      animate={{\n        opacity: 1,\n        y: 0,\n        filter: \"blur(0px)\"\n      }}\n      transition={{\n        type: \"spring\",\n        stiffness: 100,\n        damping: 10,\n        delay: staggerDelay,\n      }}\n      exit={{\n        opacity: 0,\n        scale: 1.2,\n        filter: \"blur(8px)\",\n      }}\n      {...props}\n    >\n      {children}\n      {isSpanned && <FeaturedBadge />}\n    </motion.div>\n  )\n}\n\nexport { Masonry, MasonryItem }\n"]}
+{"version":3,"file":"masonry.js","names":[],"sources":["../src/masonry.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\n\nimport { AnimatePresence, type HTMLMotionProps, motion } from \"motion/react\"\n\nimport { StarIcon } from \"./lib/internal-icons\"\nimport { cn } from \"./lib/utils\"\n\nconst STAGGER_STEP = 0.05 // 50ms between each item's enter animation\n\nconst MasonryStaggerContext = React.createContext<(() => number) | null>(null)\n\ntype MasonryProps = React.ComponentProps<\"div\"> & {\n  columns?: number\n  columnWidth?: number\n  gap?: number\n}\n\ntype MasonryItemProps = Omit<HTMLMotionProps<\"div\">, \"children\"> & {\n  span?: number\n  children?: React.ReactNode\n}\n\nfunction Masonry({\n  columns,\n  columnWidth,\n  gap = 4,\n  className,\n  children,\n  ...props\n}: MasonryProps) {\n  const containerRef = React.useRef<HTMLDivElement>(null)\n  const rafRef = React.useRef<number>(0)\n  const staggerCounterRef = React.useRef(0)\n\n  // Reset counter each render so new items in a batch get fresh 0-based indices\n  staggerCounterRef.current = 0\n\n  const getStaggerIndex = React.useCallback(\n    () => staggerCounterRef.current++,\n    [],\n  )\n\n  React.useLayoutEffect(() => {\n    const container = containerRef.current\n    if (!container) return\n\n    const remPx = parseFloat(\n      getComputedStyle(document.documentElement).fontSize,\n    )\n    const gapPx = gap * 0.25 * remPx\n\n    function reflow() {\n      const allChildren = Array.from(container!.children) as HTMLElement[]\n      // Skip exiting items — they keep their position during exit animation\n      const items = allChildren.filter((el) => el.dataset.exiting == null)\n\n      if (items.length === 0) {\n        container!.style.removeProperty(\"height\")\n        return\n      }\n\n      const containerWidth = container!.clientWidth\n      if (containerWidth === 0) return\n\n      let colCount: number\n      if (columns != null) {\n        colCount = Math.max(1, columns)\n      } else if (columnWidth != null) {\n        colCount = Math.max(\n          1,\n          Math.floor((containerWidth + gapPx) / (columnWidth + gapPx)),\n        )\n      } else {\n        colCount = Math.max(\n          1,\n          Math.floor((containerWidth + gapPx) / (240 + gapPx)),\n        )\n      }\n\n      // Single column: use normal flow with gap\n      if (colCount <= 1) {\n        container!.style.removeProperty(\"height\")\n        container!.style.display = \"flex\"\n        container!.style.flexDirection = \"column\"\n        container!.style.gap = `${gapPx}px`\n        for (const item of items) {\n          item.style.removeProperty(\"position\")\n          item.style.removeProperty(\"top\")\n          item.style.removeProperty(\"left\")\n          item.style.removeProperty(\"width\")\n        }\n        return\n      }\n\n      // Multi-column: clear single-column styles\n      container!.style.removeProperty(\"display\")\n      container!.style.removeProperty(\"flex-direction\")\n      container!.style.removeProperty(\"gap\")\n\n      const colWidth = (containerWidth - (colCount - 1) * gapPx) / colCount\n      const columnBottoms = new Array<number>(colCount).fill(0)\n\n      // Partition items: spanning (top-pinned) vs regular\n      const topItems: { el: HTMLElement; span: number }[] = []\n      const regularItems: HTMLElement[] = []\n      for (const item of items) {\n        const raw = parseInt(item.dataset.span || \"1\", 10)\n        if (raw > 1) {\n          topItems.push({ el: item, span: Math.min(raw, colCount) })\n        } else {\n          regularItems.push(item)\n        }\n      }\n\n      // First pass: set width on all items for correct height measurement\n      for (const { el, span } of topItems) {\n        el.style.position = \"absolute\"\n        el.style.width = `${span * colWidth + (span - 1) * gapPx}px`\n      }\n      for (const item of regularItems) {\n        item.style.position = \"absolute\"\n        item.style.width = `${colWidth}px`\n      }\n\n      // Second pass: batch-read heights\n      const topHeights: number[] = []\n      for (const { el } of topItems) {\n        topHeights.push(el.offsetHeight)\n      }\n      const regularHeights: number[] = []\n      for (const item of regularItems) {\n        regularHeights.push(item.offsetHeight)\n      }\n\n      // Third pass: place top items at Y=0, left-to-right\n      let nextCol = 0\n      for (let i = 0; i < topItems.length; i++) {\n        const { el, span } = topItems[i]!\n        const s = Math.min(span, colCount - nextCol)\n\n        const x = nextCol * (colWidth + gapPx)\n        el.style.top = \"0px\"\n        el.style.left = `${x}px`\n        // Recalculate width if span was clamped\n        if (s !== span) {\n          el.style.width = `${s * colWidth + (s - 1) * gapPx}px`\n        }\n\n        const bottom = topHeights[i]! + gapPx\n        for (let c = nextCol; c < nextCol + s; c++) {\n          columnBottoms[c] = bottom\n        }\n\n        nextCol += s\n      }\n\n      // Fourth pass: place regular items in shortest column\n      for (let i = 0; i < regularItems.length; i++) {\n        let shortestCol = 0\n        for (let c = 1; c < colCount; c++) {\n          if (columnBottoms[c]! < columnBottoms[shortestCol]!) {\n            shortestCol = c\n          }\n        }\n\n        const x = shortestCol * (colWidth + gapPx)\n        const y = columnBottoms[shortestCol]!\n\n        regularItems[i]!.style.top = `${y}px`\n        regularItems[i]!.style.left = `${x}px`\n\n        columnBottoms[shortestCol] = y + regularHeights[i]! + gapPx\n      }\n\n      const maxBottom = Math.max(...columnBottoms) - gapPx\n      container!.style.height = `${Math.max(0, maxBottom)}px`\n    }\n\n    function scheduleReflow() {\n      cancelAnimationFrame(rafRef.current)\n      rafRef.current = requestAnimationFrame(reflow)\n    }\n\n    reflow()\n\n    const ro = new ResizeObserver(scheduleReflow)\n    ro.observe(container)\n\n    const mo = new MutationObserver(scheduleReflow)\n    mo.observe(container, {\n      childList: true,\n      subtree: true,\n      attributes: true,\n      attributeFilter: [\"data-exiting\", \"data-span\"],\n    })\n\n    // Detect image/media loads that change item heights\n    container.addEventListener(\"load\", scheduleReflow, true)\n\n    return () => {\n      cancelAnimationFrame(rafRef.current)\n      ro.disconnect()\n      mo.disconnect()\n      container.removeEventListener(\"load\", scheduleReflow, true)\n      container.style.removeProperty(\"height\")\n      container.style.removeProperty(\"display\")\n      container.style.removeProperty(\"flex-direction\")\n      container.style.removeProperty(\"gap\")\n      const items = Array.from(container.children) as HTMLElement[]\n      for (const item of items) {\n        item.style.removeProperty(\"position\")\n        item.style.removeProperty(\"top\")\n        item.style.removeProperty(\"left\")\n        item.style.removeProperty(\"width\")\n      }\n    }\n  }, [columns, columnWidth, gap])\n\n  return (\n    <MasonryStaggerContext.Provider value={getStaggerIndex}>\n      <div\n        ref={containerRef}\n        data-slot=\"masonry\"\n        className={cn(\"relative\", className)}\n        {...props}\n      >\n        <AnimatePresence>\n          {children}\n        </AnimatePresence>\n      </div>\n    </MasonryStaggerContext.Provider>\n  )\n}\n\nfunction FeaturedBadge() {\n  return (\n    <span\n      data-slot=\"masonry-badge\"\n      className=\"absolute top-2 right-2 z-10 flex size-5 items-center justify-center pointer-events-none\"\n      aria-label=\"Featured\"\n    >\n      <StarIcon width={10} height={10} fill=\"currentColor\" aria-hidden />\n    </span>\n  )\n}\n\nfunction MasonryItem({\n  className,\n  span,\n  children,\n  ...props\n}: MasonryItemProps) {\n  const isSpanned = span != null && span > 1\n  const getStaggerIndex = React.useContext(MasonryStaggerContext)\n\n  // Capture stagger index once on mount — useState initializer runs exactly once\n  const [staggerDelay] = React.useState(() =>\n    getStaggerIndex ? getStaggerIndex() * STAGGER_STEP : 0,\n  )\n\n  return (\n    <motion.div\n      data-slot=\"masonry-item\"\n      data-span={isSpanned ? span : undefined}\n      className={cn(\"relative\", className)}\n      initial={{\n        opacity: 0,\n        y: 10,\n        filter: \"blur(8px)\"\n      }}\n      animate={{\n        opacity: 1,\n        y: 0,\n        filter: \"blur(0px)\"\n      }}\n      transition={{\n        type: \"spring\",\n        stiffness: 100,\n        damping: 10,\n        delay: staggerDelay,\n      }}\n      exit={{\n        opacity: 0,\n        scale: 1.2,\n        filter: \"blur(8px)\",\n      }}\n      {...props}\n    >\n      {children}\n      {isSpanned && <FeaturedBadge />}\n    </motion.div>\n  )\n}\n\nexport { Masonry, MasonryItem }\n"],"mappings":"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"}

package/dist/menu.d.ts

@@ -1,47 +1,105 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as React from 'react';
-import { Menu as Menu$1 } from '@base-ui/react/menu';
+import { RestoreFocusOnClose } from "./lib/focus.js";
+import * as React from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { Menu as Menu$1 } from "@base-ui/react/menu";
 
+//#region src/menu.d.ts
 type MenuProps = React.ComponentProps<typeof Menu$1.Root>;
 type MenuPortalProps = React.ComponentProps<typeof Menu$1.Portal>;
 type MenuTriggerProps = React.ComponentProps<typeof Menu$1.Trigger>;
-type MenuContentProps = React.ComponentProps<typeof Menu$1.Popup> & Pick<React.ComponentProps<typeof Menu$1.Positioner>, "align" | "alignOffset" | "side" | "sideOffset">;
+type MenuContentProps = React.ComponentProps<typeof Menu$1.Popup> & Pick<React.ComponentProps<typeof Menu$1.Positioner>, "align" | "alignOffset" | "side" | "sideOffset"> & {
+  /**
+   * Focus-restoration policy when the menu closes. Defaults to Base
+   * UI's behaviour (restore to the trigger). Use `"keyboard"` when
+   * the trigger is hover/focus-within–revealed so a pointer close
+   * doesn't keep it pinned visible. See {@link RestoreFocusOnClose}.
+   */
+  restoreFocusOnClose?: RestoreFocusOnClose;
+};
 type MenuGroupProps = React.ComponentProps<typeof Menu$1.Group>;
 type MenuLabelProps = React.ComponentProps<typeof Menu$1.GroupLabel> & {
-    inset?: boolean;
+  inset?: boolean;
 };
 type MenuItemProps = React.ComponentProps<typeof Menu$1.Item> & {
-    inset?: boolean;
-    variant?: "default" | "destructive";
+  inset?: boolean;
+  variant?: "default" | "destructive";
 };
 type MenuSubProps = React.ComponentProps<typeof Menu$1.SubmenuRoot>;
 type MenuSubTriggerProps = React.ComponentProps<typeof Menu$1.SubmenuTrigger> & {
-    inset?: boolean;
+  inset?: boolean;
 };
 type MenuSubContentProps = MenuContentProps;
 type MenuCheckboxItemProps = React.ComponentProps<typeof Menu$1.CheckboxItem> & {
-    inset?: boolean;
+  inset?: boolean;
 };
 type MenuRadioGroupProps = React.ComponentProps<typeof Menu$1.RadioGroup>;
 type MenuRadioItemProps = React.ComponentProps<typeof Menu$1.RadioItem> & {
-    inset?: boolean;
+  inset?: boolean;
 };
 type MenuSeparatorProps = React.ComponentProps<typeof Menu$1.Separator>;
 type MenuShortcutProps = React.ComponentProps<"span">;
-declare function Menu(props: MenuProps): react_jsx_runtime.JSX.Element;
-declare function MenuPortal(props: MenuPortalProps): react_jsx_runtime.JSX.Element;
-declare function MenuTrigger(props: MenuTriggerProps): react_jsx_runtime.JSX.Element;
-declare function MenuContent({ align, alignOffset, side, sideOffset, className, ...props }: MenuContentProps): react_jsx_runtime.JSX.Element;
-declare function MenuGroup(props: MenuGroupProps): react_jsx_runtime.JSX.Element;
-declare function MenuLabel({ className, inset, ...props }: MenuLabelProps): react_jsx_runtime.JSX.Element;
-declare function MenuItem({ className, inset, variant, ...props }: MenuItemProps): react_jsx_runtime.JSX.Element;
-declare function MenuSub(props: MenuSubProps): react_jsx_runtime.JSX.Element;
-declare function MenuSubTrigger({ className, inset, children, ...props }: MenuSubTriggerProps): react_jsx_runtime.JSX.Element;
-declare function MenuSubContent({ align, alignOffset, side, sideOffset, className, ...props }: MenuSubContentProps): react_jsx_runtime.JSX.Element;
-declare function MenuCheckboxItem({ className, children, checked, inset, ...props }: MenuCheckboxItemProps): react_jsx_runtime.JSX.Element;
-declare function MenuRadioGroup(props: MenuRadioGroupProps): react_jsx_runtime.JSX.Element;
-declare function MenuRadioItem({ className, children, inset, ...props }: MenuRadioItemProps): react_jsx_runtime.JSX.Element;
-declare function MenuSeparator({ className, ...props }: MenuSeparatorProps): react_jsx_runtime.JSX.Element;
-declare function MenuShortcut({ className, ...props }: MenuShortcutProps): react_jsx_runtime.JSX.Element;
-
+declare function Menu(props: MenuProps): _$react_jsx_runtime0.JSX.Element;
+declare function MenuPortal(props: MenuPortalProps): _$react_jsx_runtime0.JSX.Element;
+declare function MenuTrigger(props: MenuTriggerProps): _$react_jsx_runtime0.JSX.Element;
+declare function MenuContent({
+  align,
+  alignOffset,
+  side,
+  sideOffset,
+  className,
+  restoreFocusOnClose,
+  finalFocus,
+  ...props
+}: MenuContentProps): _$react_jsx_runtime0.JSX.Element;
+declare function MenuGroup(props: MenuGroupProps): _$react_jsx_runtime0.JSX.Element;
+declare function MenuLabel({
+  className,
+  inset,
+  ...props
+}: MenuLabelProps): _$react_jsx_runtime0.JSX.Element;
+declare function MenuItem({
+  className,
+  inset,
+  variant,
+  ...props
+}: MenuItemProps): _$react_jsx_runtime0.JSX.Element;
+declare function MenuSub(props: MenuSubProps): _$react_jsx_runtime0.JSX.Element;
+declare function MenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: MenuSubTriggerProps): _$react_jsx_runtime0.JSX.Element;
+declare function MenuSubContent({
+  align,
+  alignOffset,
+  side,
+  sideOffset,
+  className,
+  ...props
+}: MenuSubContentProps): _$react_jsx_runtime0.JSX.Element;
+declare function MenuCheckboxItem({
+  className,
+  children,
+  checked,
+  inset,
+  ...props
+}: MenuCheckboxItemProps): _$react_jsx_runtime0.JSX.Element;
+declare function MenuRadioGroup(props: MenuRadioGroupProps): _$react_jsx_runtime0.JSX.Element;
+declare function MenuRadioItem({
+  className,
+  children,
+  inset,
+  ...props
+}: MenuRadioItemProps): _$react_jsx_runtime0.JSX.Element;
+declare function MenuSeparator({
+  className,
+  ...props
+}: MenuSeparatorProps): _$react_jsx_runtime0.JSX.Element;
+declare function MenuShortcut({
+  className,
+  ...props
+}: MenuShortcutProps): _$react_jsx_runtime0.JSX.Element;
+//#endregion
 export { Menu, MenuCheckboxItem, MenuContent, MenuGroup, MenuItem, MenuLabel, MenuPortal, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuShortcut, MenuSub, MenuSubContent, MenuSubTrigger, MenuTrigger };
+//# sourceMappingURL=menu.d.ts.map