beez-ui 0.6.2 → 0.7.0

package/dist/motion/surface-keyframes.js

@@ -1,5 +1,6 @@
-import { MOTION_DIALOG_DISTANCE, MOTION_EASE, MOTION_SURFACE_CLIP_PERCENT, MOTION_SURFACE_SCALE, MOTION_TIMING, MOTION_TOOLTIP_DISTANCE, SPRING_PANEL, SPRING_TOOLTIP } from "./tokens.js";
+import { MOTION_DIALOG_DISTANCE, MOTION_EASE, MOTION_EASE_DRAWER, MOTION_SURFACE_CLIP_BLEED_PX, MOTION_SURFACE_CLIP_PERCENT, MOTION_SURFACE_SCALE, MOTION_TIMING, MOTION_TOOLTIP_DISTANCE, SPRING_PANEL, SPRING_TOOLTIP } from "./tokens.js";
 const EASE_OUT = [...MOTION_EASE];
+const EASE_DRAWER = [...MOTION_EASE_DRAWER];
 const SIDES = [
 	"top",
 	"right",
@@ -48,18 +49,25 @@ function offsetAwayFromTrigger(side, distance) {
 		y: 0
 	};
 }
+/**
+* Open edges extend the clip past the box, so the ring and drop shadow drawn outside it
+* (Tailwind rings are box-shadows) are never cut while the surface reveals or settles.
+*/
+const OPEN_EDGE = `-${MOTION_SURFACE_CLIP_BLEED_PX}px`;
+/** Fully revealed clip: nothing of the surface, its outline or its shadow is hidden. */
+const REVEALED_CLIP = `inset(${OPEN_EDGE} ${OPEN_EDGE} ${OPEN_EDGE} ${OPEN_EDGE})`;
 /** Collapsed clip anchored at the corner or edge closest to the trigger. */
 function collapsedClip(side, align) {
 	const hidden = `${MOTION_SURFACE_CLIP_PERCENT}%`;
 	const half = `${MOTION_SURFACE_CLIP_PERCENT / 2}%`;
 	/** Maps an alignment to the inset kept on the leading and trailing edges of the cross axis. */
-	const crossAxis = (value) => value === "start" ? ["0%", hidden] : value === "end" ? [hidden, "0%"] : [half, half];
+	const crossAxis = (value) => value === "start" ? [OPEN_EDGE, hidden] : value === "end" ? [hidden, OPEN_EDGE] : [half, half];
 	if (side === "bottom" || side === "top") {
 		const [left, right] = crossAxis(align);
-		return side === "bottom" ? `inset(0% ${right} ${hidden} ${left})` : `inset(${hidden} ${right} 0% ${left})`;
+		return side === "bottom" ? `inset(${OPEN_EDGE} ${right} ${hidden} ${left})` : `inset(${hidden} ${right} ${OPEN_EDGE} ${left})`;
 	}
 	const [top, bottom] = crossAxis(align);
-	return side === "right" ? `inset(${top} ${hidden} ${bottom} 0%)` : `inset(${top} 0% ${bottom} ${hidden})`;
+	return side === "right" ? `inset(${top} ${hidden} ${bottom} ${OPEN_EDGE})` : `inset(${top} ${OPEN_EDGE} ${bottom} ${hidden})`;
 }
 /** Edge-panel travel: fully off-screen on the side the sheet is attached to. */
 function sheetOffset(element) {
@@ -136,7 +144,7 @@ export function surfaceEnter(element, kind) {
 	};
 	// Primitives aligned over their trigger (Select item-aligned) have no side to reveal from.
 	if (side) {
-		keyframes.clipPath = [collapsedClip(side, align), "inset(0% 0% 0% 0%)"];
+		keyframes.clipPath = [collapsedClip(side, align), REVEALED_CLIP];
 	}
 	return {
 		keyframes,
@@ -190,9 +198,13 @@ export function surfaceExit(element, kind) {
 	}
 	if (kind === "sheet") {
 		const offset = sheetOffset(element);
+		// A spring would linger at the edge; the drawer curve accelerates the panel away.
 		return {
 			keyframes: { transform: [transform("0%", "0%"), transform(offset.x, offset.y)] },
-			transition: SPRING_PANEL
+			transition: {
+				duration: MOTION_TIMING.sheetExit,
+				ease: EASE_DRAWER
+			}
 		};
 	}
 	return {

package/dist/motion/tokens.d.ts

@@ -16,6 +16,10 @@ export declare const MOTION_TIMING: {
     readonly listStagger: 0.035;
     readonly closeEnter: 0.2;
     readonly closeDelay: 0.16;
+    readonly sheetExit: 0.24;
+    readonly reveal: 0.4;
+    readonly monthSwap: 0.24;
+    readonly cursorBlink: 1;
     readonly skeleton: 1.8;
 };
 /** Items beyond this position share the last stagger delay, so long lists never lag behind. */
@@ -47,6 +51,13 @@ export declare const SPRING_LAYOUT: {
     readonly damping: 32;
     readonly mass: 0.6;
 };
+/** Keyboard highlight in menus and lists: quick enough to keep up with a held arrow key. */
+export declare const SPRING_HIGHLIGHT: {
+    readonly type: "spring";
+    readonly stiffness: 700;
+    readonly damping: 45;
+    readonly mass: 0.5;
+};
 /** Tab indicator glide, tuned to settle without overshooting the list edges. */
 export declare const SPRING_TABS: {
     readonly type: "spring";
@@ -84,13 +95,25 @@ export declare const MOTION_ITEM_CHECK_SCALE = 0.75;
 export declare const MOTION_ICON_SWAP_SCALE = 0.25;
 export declare const MOTION_CLOSE_BUTTON_SCALE = 0.8;
 export declare const MOTION_LIST_ITEM_DISTANCE = 6;
+/** Loaded images settle from a slight zoom, so they develop in place instead of popping in. */
+export declare const MOTION_REVEAL_SCALE = 1.06;
+export declare const MOTION_REVEAL_BLUR_PX = 6;
+/** Calendar months slide just enough to show the direction of navigation. */
+export declare const MOTION_MONTH_DISTANCE = 12;
+/** Skeleton shine travels from fully before the box to fully past it, as a `translate` value. */
+export declare const MOTION_SHIMMER_TRANSLATE: readonly ["-100% 0", "100% 0"];
+/** Hovered interactive cards gain a soft drop shadow; the rest value has the same shape, invisible. */
+export declare const MOTION_CARD_SHADOW_LIFT = "0px 4px 16px 0px rgba(0, 0, 0, 0.08)";
+export declare const MOTION_CARD_SHADOW_REST = "0px 0px 0px 0px rgba(0, 0, 0, 0)";
 export declare const MOTION_SURFACE_SCALE = 0.96;
 /** Fraction of the surface kept hidden by the clip at the start of its reveal, in percent. */
 export declare const MOTION_SURFACE_CLIP_PERCENT = 92;
+/** Room left outside a revealing surface for its ring and drop shadow (`shadow-lg` spans ~22px). */
+export declare const MOTION_SURFACE_CLIP_BLEED_PX = 24;
 export declare const MOTION_TOOLTIP_DISTANCE = 8;
 export declare const MOTION_DIALOG_DISTANCE = 20;
 export declare const MOTION_CONTENT_DISTANCE = 4;
 export declare const MOTION_INVALID_SHAKE_PX: readonly [0, -6, 6, -4, 4, -2, 0];
 /** Time after an item loses its active state during which a new active item still glides from it. */
 export declare const GLIDE_CONTINUITY_MS = 300;
-export type MotionKind = "press" | "subtle-press" | "toggle" | "fade" | "content" | "message" | "card" | "row" | "field" | "thumb" | "check" | "selection" | "item-check" | "rotate" | "list-item" | "icon-swap" | "delayed-pop" | "skeleton" | "link" | "icon" | "tooltip" | "surface" | "dialog" | "sheet" | "overlay";
+export type MotionKind = "press" | "subtle-press" | "toggle" | "fade" | "content" | "message" | "card" | "row" | "field" | "thumb" | "check" | "selection" | "item-check" | "rotate" | "list-item" | "icon-swap" | "delayed-pop" | "skeleton" | "reveal" | "link" | "icon" | "tooltip" | "surface" | "dialog" | "sheet" | "overlay";

package/dist/motion/tokens.js

@@ -16,6 +16,10 @@ export const MOTION_TIMING = {
 	listStagger: .035,
 	closeEnter: .2,
 	closeDelay: .16,
+	sheetExit: .24,
+	reveal: .4,
+	monthSwap: .24,
+	cursorBlink: 1,
 	skeleton: 1.8
 };
 /** Items beyond this position share the last stagger delay, so long lists never lag behind. */
@@ -62,6 +66,13 @@ export const SPRING_LAYOUT = {
 	damping: 32,
 	mass: .6
 };
+/** Keyboard highlight in menus and lists: quick enough to keep up with a held arrow key. */
+export const SPRING_HIGHLIGHT = {
+	type: "spring",
+	stiffness: 700,
+	damping: 45,
+	mass: .5
+};
 /** Tab indicator glide, tuned to settle without overshooting the list edges. */
 export const SPRING_TABS = {
 	type: "spring",
@@ -99,9 +110,21 @@ export const MOTION_ITEM_CHECK_SCALE = .75;
 export const MOTION_ICON_SWAP_SCALE = .25;
 export const MOTION_CLOSE_BUTTON_SCALE = .8;
 export const MOTION_LIST_ITEM_DISTANCE = 6;
+/** Loaded images settle from a slight zoom, so they develop in place instead of popping in. */
+export const MOTION_REVEAL_SCALE = 1.06;
+export const MOTION_REVEAL_BLUR_PX = 6;
+/** Calendar months slide just enough to show the direction of navigation. */
+export const MOTION_MONTH_DISTANCE = 12;
+/** Skeleton shine travels from fully before the box to fully past it, as a `translate` value. */
+export const MOTION_SHIMMER_TRANSLATE = ["-100% 0", "100% 0"];
+/** Hovered interactive cards gain a soft drop shadow; the rest value has the same shape, invisible. */
+export const MOTION_CARD_SHADOW_LIFT = "0px 4px 16px 0px rgba(0, 0, 0, 0.08)";
+export const MOTION_CARD_SHADOW_REST = "0px 0px 0px 0px rgba(0, 0, 0, 0)";
 export const MOTION_SURFACE_SCALE = .96;
 /** Fraction of the surface kept hidden by the clip at the start of its reveal, in percent. */
 export const MOTION_SURFACE_CLIP_PERCENT = 92;
+/** Room left outside a revealing surface for its ring and drop shadow (`shadow-lg` spans ~22px). */
+export const MOTION_SURFACE_CLIP_BLEED_PX = 24;
 export const MOTION_TOOLTIP_DISTANCE = 8;
 export const MOTION_DIALOG_DISTANCE = 20;
 export const MOTION_CONTENT_DISTANCE = 4;

package/dist/providers/beez-ui-provider.js

@@ -1,16 +1,26 @@
 "use client";
 import { c as _c } from "react/compiler-runtime";
 /** Shares optional rendering adapters without importing a framework into the core. */
-import { createContext, useContext } from "react";
+import { createContext, useContext, useSyncExternalStore } from "react";
 import { MotionConfig } from "motion/react";
 import { ThemeProvider } from "next-themes";
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+* next-themes renders an inline script that applies the stored theme before hydration. It only
+* runs when it arrives in server HTML; a script created by a client render never executes, and
+* React 19 warns about it. Client-only renders mark it as a data block, which React accepts.
+*/
+const CLIENT_RENDER_THEME_SCRIPT_PROPS = { type: "application/json" };
+/** Nothing to subscribe to: the value only distinguishes server/hydration from client renders. */
+function subscribeToRenderEnvironment() {
+	return () => {};
+}
 /** Native elements remain the implicit fallback for unconfigured adapters. */
 const EMPTY_COMPONENTS = {};
 const AdapterContext = createContext(EMPTY_COMPONENTS);
 /** Merges nested overrides while preserving stable adapter identities. */
 export function BeezUIProvider(t0) {
-	const $ = _c(9);
+	const $ = _c(13);
 	const { children, components: t1, themeOptions } = t0;
 	const components = t1 === undefined ? EMPTY_COMPONENTS : t1;
 	const parent = useContext(AdapterContext);
@@ -27,35 +37,57 @@ export function BeezUIProvider(t0) {
 		t2 = $[2];
 	}
 	const value = t2;
+	const isClientOnlyRender = useSyncExternalStore(subscribeToRenderEnvironment, _temp, _temp2);
 	let t3;
-	if ($[3] !== children || $[4] !== value) {
-		t3 = /* @__PURE__ */ _jsx(MotionConfig, {
+	if ($[3] !== isClientOnlyRender || $[4] !== themeOptions?.scriptProps) {
+		t3 = isClientOnlyRender ? {
+			...CLIENT_RENDER_THEME_SCRIPT_PROPS,
+			...themeOptions?.scriptProps
+		} : themeOptions?.scriptProps;
+		$[3] = isClientOnlyRender;
+		$[4] = themeOptions?.scriptProps;
+		$[5] = t3;
+	} else {
+		t3 = $[5];
+	}
+	const scriptProps = t3;
+	let t4;
+	if ($[6] !== children || $[7] !== value) {
+		t4 = /* @__PURE__ */ _jsx(MotionConfig, {
 			reducedMotion: "user",
 			children: /* @__PURE__ */ _jsx(AdapterContext.Provider, {
 				value,
 				children
 			})
 		});
-		$[3] = children;
-		$[4] = value;
-		$[5] = t3;
+		$[6] = children;
+		$[7] = value;
+		$[8] = t4;
 	} else {
-		t3 = $[5];
+		t4 = $[8];
 	}
-	let t4;
-	if ($[6] !== t3 || $[7] !== themeOptions) {
-		t4 = /* @__PURE__ */ _jsx(ThemeProvider, {
+	let t5;
+	if ($[9] !== scriptProps || $[10] !== t4 || $[11] !== themeOptions) {
+		t5 = /* @__PURE__ */ _jsx(ThemeProvider, {
 			attribute: "class",
 			...themeOptions,
-			children: t3
+			scriptProps,
+			children: t4
 		});
-		$[6] = t3;
-		$[7] = themeOptions;
-		$[8] = t4;
+		$[9] = scriptProps;
+		$[10] = t4;
+		$[11] = themeOptions;
+		$[12] = t5;
 	} else {
-		t4 = $[8];
+		t5 = $[12];
 	}
-	return t4;
+	return t5;
+}
+function _temp2() {
+	return false;
+}
+function _temp() {
+	return true;
 }
 /** Reads adapters internally; native components work without a provider. */
 export function useBeezUIComponents() {