beez-ui 3.0.1 → 4.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "beez-ui",
-  "version": "3.0.1",
+  "version": "4.0.0",
   "description": "Shared UI components with the customizations extracted from TuTribu.",
   "type": "module",
   "sideEffects": [

package/dist/motion/shared-layout-bg.d.ts

@@ -1,16 +0,0 @@
-import { type ComponentProps } from "react";
-export type SharedLayoutBgProps = ComponentProps<"ul"> & {
-    /** Classes of the moving pill. */
-    pillClassName?: string;
-    /** Positioning override for the pill wrapper inside each item. */
-    pillContainerClassName?: string;
-    /** Horizontal distance, in pixels, the pill extends past each row. */
-    inset?: number;
-};
-/**
- * Renders a list whose items share one hover pill that glides between them.
- * Each child element receives the pill behind its content, so children should be list items.
- * @param props - List attributes, pill styling and the items to decorate.
- * @returns The decorated list.
- */
-export declare function SharedLayoutBg({ children, className, onMouseLeave, pillClassName, pillContainerClassName, inset, ...props }: SharedLayoutBgProps): import("react").JSX.Element;

package/dist/motion/shared-layout-bg.js

@@ -1,181 +0,0 @@
-"use client";
-import { c as _c } from "react/compiler-runtime";
-/** Follows the hovered item of a list with one shared background pill, as in beui.dev. */
-import { AnimatePresence, motion } from "motion/react";
-import { Children, cloneElement, isValidElement, useId, useState } from "react";
-import { usePrefersReducedMotion } from "../hooks/use-prefers-reduced-motion.js";
-import { cn } from "../lib/utils.js";
-import { MOTION_REVEAL_BLUR_PX, SPRING_LAYOUT } from "./tokens.js";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-/** Horizontal distance, in pixels, the pill extends past each row by default. */
-const DEFAULT_PILL_INSET_PX = 20;
-const PILL_BLUR = `blur(${MOTION_REVEAL_BLUR_PX}px)`;
-/** The pill fades in blurred, and only blurs out when the pointer leaves the whole list. */
-const PILL_VARIANTS = {
-	initial: {
-		opacity: 0,
-		filter: PILL_BLUR
-	},
-	animate: {
-		opacity: 1,
-		filter: "blur(0px)"
-	},
-	exit: (isHovering) => isHovering ? {} : {
-		opacity: 0,
-		filter: PILL_BLUR
-	}
-};
-/** With reduced motion the pill appears and leaves at once, like other pointer highlights. */
-const REDUCED_PILL_VARIANTS = {
-	initial: { opacity: 0 },
-	animate: {
-		opacity: 1,
-		transition: { duration: 0 }
-	},
-	exit: (isHovering) => isHovering ? {} : {
-		opacity: 0,
-		transition: { duration: 0 }
-	}
-};
-/**
-* Renders a list whose items share one hover pill that glides between them.
-* Each child element receives the pill behind its content, so children should be list items.
-* @param props - List attributes, pill styling and the items to decorate.
-* @returns The decorated list.
-*/
-export function SharedLayoutBg(t0) {
-	const $ = _c(34);
-	let children;
-	let className;
-	let onMouseLeave;
-	let pillClassName;
-	let pillContainerClassName;
-	let props;
-	let t1;
-	if ($[0] !== t0) {
-		({children, className, onMouseLeave, pillClassName, pillContainerClassName, inset: t1, ...props} = t0);
-		$[0] = t0;
-		$[1] = children;
-		$[2] = className;
-		$[3] = onMouseLeave;
-		$[4] = pillClassName;
-		$[5] = pillContainerClassName;
-		$[6] = props;
-		$[7] = t1;
-	} else {
-		children = $[1];
-		className = $[2];
-		onMouseLeave = $[3];
-		pillClassName = $[4];
-		pillContainerClassName = $[5];
-		props = $[6];
-		t1 = $[7];
-	}
-	const inset = t1 === undefined ? DEFAULT_PILL_INSET_PX : t1;
-	const [hoveredKey, setHoveredKey] = useState(null);
-	const layoutId = useId();
-	const shouldReduceMotion = usePrefersReducedMotion();
-	const isHovering = hoveredKey !== null;
-	let t2;
-	if ($[8] !== children || $[9] !== hoveredKey || $[10] !== inset || $[11] !== isHovering || $[12] !== layoutId || $[13] !== pillClassName || $[14] !== pillContainerClassName || $[15] !== shouldReduceMotion) {
-		let t3;
-		if ($[17] !== hoveredKey || $[18] !== inset || $[19] !== isHovering || $[20] !== layoutId || $[21] !== pillClassName || $[22] !== pillContainerClassName || $[23] !== shouldReduceMotion) {
-			t3 = (child, index) => {
-				const item = child;
-				const itemKey = item.key === null ? `item-${index}` : String(item.key);
-				return cloneElement(item, {
-					key: itemKey,
-					className: cn("relative", item.props.className),
-					onMouseEnter: (event) => {
-						item.props.onMouseEnter?.(event);
-						setHoveredKey(itemKey);
-					}
-				}, /* @__PURE__ */ _jsxs(_Fragment, { children: [/* @__PURE__ */ _jsx(AnimatePresence, {
-					custom: isHovering,
-					children: isHovering ? /* @__PURE__ */ _jsx(motion.div, {
-						variants: shouldReduceMotion ? REDUCED_PILL_VARIANTS : PILL_VARIANTS,
-						initial: "initial",
-						animate: "animate",
-						exit: "exit",
-						custom: isHovering,
-						className: cn("pointer-events-none absolute inset-y-0", pillContainerClassName),
-						style: {
-							left: -inset,
-							right: -inset
-						},
-						children: hoveredKey === itemKey ? /* @__PURE__ */ _jsx(motion.div, {
-							"data-slot": "shared-layout-pill",
-							layoutId: `shared-layout-bg-${layoutId}`,
-							transition: shouldReduceMotion ? { duration: 0 } : SPRING_LAYOUT,
-							className: cn("pointer-events-none size-full rounded-2xl bg-muted/80", pillClassName)
-						}) : null
-					}) : null
-				}), /* @__PURE__ */ _jsx("div", {
-					className: "relative z-10",
-					children: item.props.children
-				})] }));
-			};
-			$[17] = hoveredKey;
-			$[18] = inset;
-			$[19] = isHovering;
-			$[20] = layoutId;
-			$[21] = pillClassName;
-			$[22] = pillContainerClassName;
-			$[23] = shouldReduceMotion;
-			$[24] = t3;
-		} else {
-			t3 = $[24];
-		}
-		t2 = Children.toArray(children).filter(isValidElement).map(t3);
-		$[8] = children;
-		$[9] = hoveredKey;
-		$[10] = inset;
-		$[11] = isHovering;
-		$[12] = layoutId;
-		$[13] = pillClassName;
-		$[14] = pillContainerClassName;
-		$[15] = shouldReduceMotion;
-		$[16] = t2;
-	} else {
-		t2 = $[16];
-	}
-	const items = t2;
-	const t3 = props;
-	let t4;
-	if ($[25] !== onMouseLeave) {
-		t4 = (event_0) => {
-			setHoveredKey(null);
-			onMouseLeave?.(event_0);
-		};
-		$[25] = onMouseLeave;
-		$[26] = t4;
-	} else {
-		t4 = $[26];
-	}
-	let t5;
-	if ($[27] !== className) {
-		t5 = cn("flex w-full flex-col", className);
-		$[27] = className;
-		$[28] = t5;
-	} else {
-		t5 = $[28];
-	}
-	let t6;
-	if ($[29] !== items || $[30] !== t3 || $[31] !== t4 || $[32] !== t5) {
-		t6 = /* @__PURE__ */ _jsx(motion.ul, {
-			...t3,
-			layoutRoot: true,
-			onMouseLeave: t4,
-			className: t5,
-			children: items
-		});
-		$[29] = items;
-		$[30] = t3;
-		$[31] = t4;
-		$[32] = t5;
-		$[33] = t6;
-	} else {
-		t6 = $[33];
-	}
-	return t6;
-}