@waveso/ui 0.15.0 → 0.16.0

package/dist/drawer.js

@@ -46,7 +46,7 @@ function DrawerViewport({ className, ...props }) {
 function DrawerContent({ className, children, showCloseButton = false, ...props }) {
 	return /* @__PURE__ */ jsxs(DrawerPortal, { children: [/* @__PURE__ */ jsx(DrawerOverlay, {}), /* @__PURE__ */ jsx(DrawerViewport, { children: /* @__PURE__ */ jsxs(Drawer$1.Popup, {
 		"data-slot": "drawer-content",
-		className: cn("group/drawer-content bg-foundation fixed z-50 flex flex-col overflow-y-auto border-edge text-sm shadow-lg outline-hidden", "transition-[translate] duration-(--duration-lg) ease-(--ease) data-[swiping]:duration-0", "data-[swipe-direction=down]:inset-x-0 data-[swipe-direction=down]:bottom-0 data-[swipe-direction=down]:mt-24 data-[swipe-direction=down]:max-h-[80vh] data-[swipe-direction=down]:rounded-t-lg data-[swipe-direction=down]:border-t", "data-[swipe-direction=up]:inset-x-0 data-[swipe-direction=up]:top-0 data-[swipe-direction=up]:mb-24 data-[swipe-direction=up]:max-h-[80vh] data-[swipe-direction=up]:rounded-b-lg data-[swipe-direction=up]:border-b", "data-[swipe-direction=left]:inset-y-0 data-[swipe-direction=left]:left-0 data-[swipe-direction=left]:w-3/4 data-[swipe-direction=left]:rounded-r-lg data-[swipe-direction=left]:border-r data-[swipe-direction=left]:sm:max-w-sm", "data-[swipe-direction=right]:inset-y-0 data-[swipe-direction=right]:right-0 data-[swipe-direction=right]:w-3/4 data-[swipe-direction=right]:rounded-l-lg data-[swipe-direction=right]:border-l data-[swipe-direction=right]:sm:max-w-sm", "data-[swipe-direction=down]:data-[starting-style]:translate-y-full data-[swipe-direction=down]:data-[ending-style]:translate-y-full", "data-[swipe-direction=up]:data-[starting-style]:-translate-y-full data-[swipe-direction=up]:data-[ending-style]:-translate-y-full", "data-[swipe-direction=left]:data-[starting-style]:-translate-x-full data-[swipe-direction=left]:data-[ending-style]:-translate-x-full", "data-[swipe-direction=right]:data-[starting-style]:translate-x-full data-[swipe-direction=right]:data-[ending-style]:translate-x-full", className),
+		className: cn("group/drawer-content bg-foundation fixed z-50 flex flex-col overflow-y-auto border-shade text-sm shadow-lg outline-hidden", "transition-[translate] duration-(--duration-lg) ease-(--ease) data-[swiping]:duration-0", "data-[swipe-direction=down]:inset-x-0 data-[swipe-direction=down]:bottom-0 data-[swipe-direction=down]:mt-24 data-[swipe-direction=down]:max-h-[80vh] data-[swipe-direction=down]:rounded-t-lg data-[swipe-direction=down]:border-t", "data-[swipe-direction=up]:inset-x-0 data-[swipe-direction=up]:top-0 data-[swipe-direction=up]:mb-24 data-[swipe-direction=up]:max-h-[80vh] data-[swipe-direction=up]:rounded-b-lg data-[swipe-direction=up]:border-b", "data-[swipe-direction=left]:inset-y-0 data-[swipe-direction=left]:left-0 data-[swipe-direction=left]:w-3/4 data-[swipe-direction=left]:rounded-r-lg data-[swipe-direction=left]:border-r data-[swipe-direction=left]:sm:max-w-sm", "data-[swipe-direction=right]:inset-y-0 data-[swipe-direction=right]:right-0 data-[swipe-direction=right]:w-3/4 data-[swipe-direction=right]:rounded-l-lg data-[swipe-direction=right]:border-l data-[swipe-direction=right]:sm:max-w-sm", "data-[swipe-direction=down]:data-[starting-style]:translate-y-full data-[swipe-direction=down]:data-[ending-style]:translate-y-full", "data-[swipe-direction=up]:data-[starting-style]:-translate-y-full data-[swipe-direction=up]:data-[ending-style]:-translate-y-full", "data-[swipe-direction=left]:data-[starting-style]:-translate-x-full data-[swipe-direction=left]:data-[ending-style]:-translate-x-full", "data-[swipe-direction=right]:data-[starting-style]:translate-x-full data-[swipe-direction=right]:data-[ending-style]:translate-x-full", className),
 		...props,
 		children: [
 			/* @__PURE__ */ jsx("div", {

package/dist/encrypted-text.d.ts

@@ -1,6 +1,4 @@
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import * as React from "react";
-
 //#region src/encrypted-text.d.ts
 type EncryptedTextProps = React.ComponentProps<"span"> & {
   text: string;
@@ -11,18 +9,21 @@ type EncryptedTextProps = React.ComponentProps<"span"> & {
   revealedClassName?: string;
   scrambleOnly?: boolean;
   scrambleOneChar?: boolean;
+  /** Where the reveal begins. Default: "start" */
+  revealDirection?: "start" | "end" | "center" | "random";
+  /** Scramble and reveal again when hovered. Default: false */
+  scrambleOnHover?: boolean;
+  /** Scramble and reveal again after every reveal. Default: false */
+  loop?: boolean;
+  /** Pause between a reveal and the next loop, in ms. Default: 2000 */
+  loopDelayMs?: number;
 };
-declare function EncryptedText({
-  text,
-  className,
-  revealDelayMs,
-  charset,
-  flipDelayMs,
-  encryptedClassName,
-  revealedClassName,
-  scrambleOnly,
-  scrambleOneChar,
-  ...props
-}: EncryptedTextProps): _$react_jsx_runtime0.JSX.Element | null;
+/**
+ * Text that starts scrambled and reveals itself, character by character, once
+ * it scrolls into view. Each character keeps its real width while scrambled
+ * (the stand-in glyph sits over an invisible copy and narrows to fit), so the
+ * text never shifts what's around it. Screen readers get the real text.
+ */
+declare function EncryptedText({ text, className, revealDelayMs, charset, flipDelayMs, encryptedClassName, revealedClassName, scrambleOnly, scrambleOneChar, revealDirection, scrambleOnHover, loop, loopDelayMs, onPointerEnter, ...props }: EncryptedTextProps): React.JSX.Element | null;
 //#endregion
 export { EncryptedText, type EncryptedTextProps };

package/dist/encrypted-text.js

@@ -1,29 +1,95 @@
 "use client";
 import { cn } from "./lib/utils.js";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { useReducedMotion } from "motion/react";
 //#region src/encrypted-text.tsx
 const DEFAULT_CHARSET = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()_+-={}[];:,.<>/?";
-function randomChar(charset) {
-	return charset.charAt(Math.floor(Math.random() * charset.length));
+const REDUCED_MOTION = "(prefers-reduced-motion: reduce)";
+/** Opacity of a scrambled character far from its turn. */
+const ENCRYPTED_OPACITY = .6;
+/** Characters ahead of the reveal that brighten toward full opacity. */
+const LEAD = 4;
+function isSpace(char) {
+	return /\s/.test(char);
 }
-function scramblePreservingSpaces(original, charset) {
-	if (!original) return "";
-	let result = "";
-	for (let i = 0; i < original.length; i += 1) result += original[i] === " " ? " " : randomChar(charset);
-	return result;
+function randomGlyph(pool) {
+	return pool[Math.floor(Math.random() * pool.length)] ?? "";
 }
-function EncryptedText({ text, className, revealDelayMs = 50, charset = DEFAULT_CHARSET, flipDelayMs = 50, encryptedClassName, revealedClassName, scrambleOnly = false, scrambleOneChar = false, ...props }) {
-	const prefersReducedMotion = useReducedMotion();
+/**
+* A scramble that's the same on the server and in the browser, so the text
+* can start encrypted without a hydration mismatch.
+*/
+function initialFrame(chars, pool) {
+	let rank = 0;
+	return {
+		glyphs: chars.map((char, index) => isSpace(char) ? char : pool[((char.codePointAt(0) ?? 0) + index * 7) % pool.length] ?? char),
+		scales: chars.map(() => 1),
+		ranks: chars.map((char) => isSpace(char) ? -1 : rank++),
+		revealed: 0
+	};
+}
+/** Each character's place in the reveal order for a direction; -1 for spaces. */
+function rankLetters(chars, direction) {
+	const order = chars.flatMap((char, index) => isSpace(char) ? [] : [index]);
+	if (direction === "end") order.reverse();
+	if (direction === "center") {
+		const middle = (chars.length - 1) / 2;
+		order.sort((a, b) => Math.abs(a - middle) - Math.abs(b - middle));
+	}
+	if (direction === "random") for (let i = order.length - 1; i > 0; i--) {
+		const j = Math.floor(Math.random() * (i + 1));
+		[order[i], order[j]] = [order[j] ?? 0, order[i] ?? 0];
+	}
+	const ranks = chars.map(() => -1);
+	order.forEach((index, rank) => {
+		ranks[index] = rank;
+	});
+	return ranks;
+}
+const glyphWidths = /* @__PURE__ */ new Map();
+let measurer;
+/** Measures a glyph in a font, caching it once the font has loaded. */
+function measureGlyph(font, glyph) {
+	const key = `${font}|${glyph}`;
+	const cached = glyphWidths.get(key);
+	if (cached !== void 0) return cached;
+	measurer ??= document.createElement("canvas").getContext("2d");
+	if (!measurer) return 0;
+	measurer.font = font;
+	const width = measurer.measureText(glyph).width;
+	if (document.fonts.check(font)) glyphWidths.set(key, width);
+	return width;
+}
+/** How much to narrow a stand-in glyph so it fits the real one's width. */
+function squeeze(font, char, glyph) {
+	const room = measureGlyph(font, char);
+	const need = measureGlyph(font, glyph);
+	return need > room && need > 0 ? Math.max(.05, room / need) : 1;
+}
+function subscribeReducedMotion(onChange) {
+	const query = window.matchMedia(REDUCED_MOTION);
+	query.addEventListener("change", onChange);
+	return () => query.removeEventListener("change", onChange);
+}
+const getReducedMotion = () => window.matchMedia(REDUCED_MOTION).matches;
+const getServerReducedMotion = () => false;
+/**
+* Text that starts scrambled and reveals itself, character by character, once
+* it scrolls into view. Each character keeps its real width while scrambled
+* (the stand-in glyph sits over an invisible copy and narrows to fit), so the
+* text never shifts what's around it. Screen readers get the real text.
+*/
+function EncryptedText({ text, className, revealDelayMs = 50, charset = DEFAULT_CHARSET, flipDelayMs = 50, encryptedClassName, revealedClassName, scrambleOnly = false, scrambleOneChar = false, revealDirection = "start", scrambleOnHover = false, loop = false, loopDelayMs = 2e3, onPointerEnter, ...props }) {
+	const prefersReducedMotion = React.useSyncExternalStore(subscribeReducedMotion, getReducedMotion, getServerReducedMotion);
 	const ref = React.useRef(null);
+	const restartRef = React.useRef(null);
+	const isRunningRef = React.useRef(false);
 	const [isInView, setIsInView] = React.useState(false);
-	const [revealCount, setRevealCount] = React.useState(0);
-	const [, setFlipTick] = React.useState(0);
-	const animationFrameRef = React.useRef(null);
-	const startTimeRef = React.useRef(0);
-	const lastFlipTimeRef = React.useRef(0);
-	const scrambleCharsRef = React.useRef([]);
+	const chars = React.useMemo(() => Array.from(text), [text]);
+	const pool = React.useMemo(() => Array.from(charset.length > 0 ? charset : DEFAULT_CHARSET), [charset]);
+	const initial = React.useMemo(() => initialFrame(chars, pool), [chars, pool]);
+	const [live, setLive] = React.useState();
+	const frame = live?.chars === chars ? live.frame : initial;
 	React.useEffect(() => {
 		if (prefersReducedMotion) return;
 		const el = ref.current;
@@ -38,78 +104,151 @@ function EncryptedText({ text, className, revealDelayMs = 50, charset = DEFAULT_
 		return () => observer.disconnect();
 	}, [prefersReducedMotion]);
 	React.useEffect(() => {
-		if (prefersReducedMotion) return;
-		if (!isInView) return;
-		scrambleCharsRef.current = (text ? scramblePreservingSpaces(text, charset) : "").split("");
-		startTimeRef.current = performance.now();
-		lastFlipTimeRef.current = startTimeRef.current;
-		setRevealCount(0);
-		let isCancelled = false;
+		const root = ref.current;
+		if (prefersReducedMotion || !isInView || !root) return;
+		const computed = getComputedStyle(root);
+		const font = `${computed.fontStyle} ${computed.fontWeight} ${computed.fontSize} ${computed.fontFamily}`;
+		const letters = chars.filter((char) => !isSpace(char)).length;
+		let glyphs = [];
+		let scales = [];
+		let ranks = [];
+		let revealed = 0;
+		let start = 0;
+		let lastFlip = 0;
+		let frameId = 0;
+		let timer;
+		const scramble = (index) => {
+			const glyph = randomGlyph(pool);
+			glyphs[index] = glyph;
+			scales[index] = squeeze(font, chars[index] ?? glyph, glyph);
+		};
+		const publish = () => {
+			setLive({
+				chars,
+				frame: {
+					glyphs: [...glyphs],
+					scales: [...scales],
+					ranks,
+					revealed
+				}
+			});
+		};
 		const update = (now) => {
-			if (isCancelled) return;
-			const totalLength = text.length;
-			if (scrambleOnly) {
-				if (now - lastFlipTimeRef.current >= Math.max(0, flipDelayMs)) {
-					if (scrambleOneChar) {
-						const indices = [];
-						for (let i = 0; i < totalLength; i++) if (text[i] !== " ") indices.push(i);
-						if (indices.length > 0) {
-							const idx = indices[Math.floor(Math.random() * indices.length)];
-							scrambleCharsRef.current[idx] = randomChar(charset);
-						}
-					} else for (let index = 0; index < totalLength; index += 1) scrambleCharsRef.current[index] = text[index] === " " ? " " : randomChar(charset);
-					lastFlipTimeRef.current = now;
-					setFlipTick((t) => t + 1 & 65535);
+			let isChanged = false;
+			if (!scrambleOnly) {
+				const next = Math.min(letters, Math.floor((now - start) / Math.max(1, revealDelayMs)));
+				isChanged = next !== revealed;
+				revealed = next;
+				if (revealed >= letters) {
+					publish();
+					isRunningRef.current = false;
+					if (loop) timer = setTimeout(run, Math.max(0, loopDelayMs));
+					return;
 				}
-				animationFrameRef.current = requestAnimationFrame(update);
-				return;
 			}
-			const elapsedMs = now - startTimeRef.current;
-			const currentRevealCount = Math.min(totalLength, Math.floor(elapsedMs / Math.max(1, revealDelayMs)));
-			setRevealCount(currentRevealCount);
-			if (currentRevealCount >= totalLength) return;
-			if (now - lastFlipTimeRef.current >= Math.max(0, flipDelayMs)) {
-				for (let index = currentRevealCount; index < totalLength; index += 1) scrambleCharsRef.current[index] = text[index] === " " ? " " : randomChar(charset);
-				lastFlipTimeRef.current = now;
-				setFlipTick((t) => t + 1 & 65535);
+			if (now - lastFlip >= Math.max(0, flipDelayMs)) {
+				lastFlip = now;
+				isChanged = true;
+				if (scrambleOnly && scrambleOneChar) {
+					const scrambled = chars.flatMap((char, index) => isSpace(char) ? [] : [index]);
+					const index = scrambled[Math.floor(Math.random() * scrambled.length)];
+					if (index !== void 0) scramble(index);
+				} else chars.forEach((char, index) => {
+					if (!isSpace(char) && (ranks[index] ?? 0) >= revealed) scramble(index);
+				});
 			}
-			animationFrameRef.current = requestAnimationFrame(update);
+			if (isChanged) publish();
+			frameId = requestAnimationFrame(update);
+		};
+		const run = () => {
+			cancelAnimationFrame(frameId);
+			clearTimeout(timer);
+			isRunningRef.current = true;
+			ranks = rankLetters(chars, revealDirection);
+			glyphs = [...chars];
+			scales = chars.map(() => 1);
+			chars.forEach((char, index) => {
+				if (!isSpace(char)) scramble(index);
+			});
+			revealed = 0;
+			start = performance.now();
+			lastFlip = start;
+			publish();
+			frameId = requestAnimationFrame(update);
 		};
-		animationFrameRef.current = requestAnimationFrame(update);
+		restartRef.current = run;
+		run();
 		return () => {
-			isCancelled = true;
-			if (animationFrameRef.current !== null) cancelAnimationFrame(animationFrameRef.current);
+			cancelAnimationFrame(frameId);
+			clearTimeout(timer);
+			isRunningRef.current = false;
+			restartRef.current = null;
 		};
 	}, [
 		prefersReducedMotion,
 		isInView,
-		text,
+		chars,
+		pool,
 		revealDelayMs,
-		charset,
 		flipDelayMs,
 		scrambleOnly,
-		scrambleOneChar
+		scrambleOneChar,
+		revealDirection,
+		loop,
+		loopDelayMs
 	]);
+	const handlePointerEnter = (event) => {
+		onPointerEnter?.(event);
+		if (scrambleOnHover && !scrambleOnly && !isRunningRef.current) restartRef.current?.();
+	};
 	if (!text) return null;
+	const words = [];
+	chars.forEach((char, index) => {
+		const word = words.at(-1);
+		if (isSpace(char) || !word || isSpace(chars[index - 1] ?? " ")) words.push({
+			start: index,
+			letters: [char]
+		});
+		else word.letters.push(char);
+	});
 	return /* @__PURE__ */ jsxs("span", {
 		ref,
 		"data-slot": "encrypted-text",
 		className,
+		onPointerEnter: handlePointerEnter,
 		...props,
 		children: [/* @__PURE__ */ jsx("span", {
 			className: "sr-only",
 			children: text
-		}), text.split("").map((char, index) => {
-			const isRevealed = prefersReducedMotion || !isInView || !scrambleOnly && index < revealCount;
-			const displayChar = isRevealed ? char : char === " " ? " " : scrambleCharsRef.current[index] ?? char;
-			return /* @__PURE__ */ jsx("span", {
-				"aria-hidden": "true",
-				"data-slot": "encrypted-text-char",
-				"data-revealed": isRevealed || void 0,
-				className: cn(isRevealed ? revealedClassName : encryptedClassName),
-				children: displayChar
-			}, index);
-		})]
+		}), words.map((word) => isSpace(word.letters[0] ?? "") ? /* @__PURE__ */ jsx(React.Fragment, { children: word.letters[0] }, word.start) : /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			"data-slot": "encrypted-text-word",
+			className: "whitespace-nowrap",
+			children: word.letters.map((char, offset) => {
+				const index = word.start + offset;
+				const rank = frame.ranks[index] ?? 0;
+				const isRevealed = prefersReducedMotion || !scrambleOnly && rank < frame.revealed;
+				const distance = rank - frame.revealed;
+				const lift = Math.max(0, 1 - distance / LEAD);
+				const scale = frame.scales[index] ?? 1;
+				return /* @__PURE__ */ jsx("span", {
+					"data-slot": "encrypted-text-char",
+					"data-revealed": isRevealed || void 0,
+					className: cn("motion-color relative inline-block", isRevealed ? revealedClassName : encryptedClassName),
+					style: isRevealed || scrambleOnly ? void 0 : { opacity: ENCRYPTED_OPACITY + .4 * lift },
+					children: isRevealed ? char : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+						"data-slot": "encrypted-text-ghost",
+						className: "invisible",
+						children: char
+					}), /* @__PURE__ */ jsx("span", {
+						"data-slot": "encrypted-text-glyph",
+						className: "absolute top-0 left-1/2 -translate-x-1/2",
+						style: scale < 1 ? { scale: `${scale} 1` } : void 0,
+						children: frame.glyphs[index] ?? char
+					})] })
+				}, index);
+			})
+		}, word.start))]
 	});
 }
 //#endregion

package/dist/field.d.ts

@@ -1,40 +1,37 @@
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import * as React from "react";
+import { VariantProps } from "class-variance-authority";
 import { Field as FieldPrimitive } from "@base-ui/react/field";
-import * as _$_base_ui_react0 from "@base-ui/react";
-
 //#region src/field.d.ts
-type FieldProps = React.ComponentProps<typeof FieldPrimitive.Root>;
+declare const fieldVariants: (props?: ({
+  orientation?: "horizontal" | "vertical" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type FieldProps = React.ComponentProps<typeof FieldPrimitive.Root> & VariantProps<typeof fieldVariants>;
 type FieldLabelProps = React.ComponentProps<typeof FieldPrimitive.Label>;
+type FieldContentProps = React.ComponentProps<"div">;
 type FieldDescriptionProps = React.ComponentProps<typeof FieldPrimitive.Description>;
 type FieldItemProps = React.ComponentProps<typeof FieldPrimitive.Item>;
 type FieldErrorProps = React.ComponentProps<typeof FieldPrimitive.Error>;
 type FieldValidityProps = React.ComponentProps<typeof FieldPrimitive.Validity>;
 type FieldControlProps = React.ComponentProps<typeof FieldPrimitive.Control>;
-declare function Field({
-  className,
-  ...props
-}: FieldProps): _$react_jsx_runtime0.JSX.Element;
-declare function FieldLabel({
-  className,
-  ...props
-}: FieldLabelProps): _$react_jsx_runtime0.JSX.Element;
-declare function FieldControl({
-  className,
-  ...props
-}: FieldControlProps): _$react_jsx_runtime0.JSX.Element;
-declare function FieldDescription({
-  className,
-  ...props
-}: FieldDescriptionProps): _$react_jsx_runtime0.JSX.Element;
-declare function FieldItem({
-  className,
-  ...props
-}: FieldItemProps): _$react_jsx_runtime0.JSX.Element;
-declare function FieldError({
-  className,
-  ...props
-}: FieldErrorProps): _$react_jsx_runtime0.JSX.Element;
-declare const FieldValidity: React.FC<_$_base_ui_react0.FieldValidityProps>;
+/**
+ * A labelled control with its messages. Below the control, `FieldError`
+ * comes first and `FieldDescription` under it, so the hint stays visible
+ * while the error is showing. An invalid field doesn't tint its text: the
+ * control's danger ring and the error carry the state, and the label
+ * stays neutral.
+ */
+declare function Field({ className, orientation, ...props }: FieldProps): React.JSX.Element;
+declare function FieldLabel({ className, ...props }: FieldLabelProps): React.JSX.Element;
+declare function FieldControl({ className, ...props }: FieldControlProps): React.JSX.Element;
+/**
+ * A label and its description stacked together, beside a control. The label
+ * row is as tall as the default checkbox, radio and switch (24px), so its
+ * text centers on the control.
+ */
+declare function FieldContent({ className, ...props }: FieldContentProps): React.JSX.Element;
+declare function FieldDescription({ className, ...props }: FieldDescriptionProps): React.JSX.Element;
+declare function FieldItem({ className, ...props }: FieldItemProps): React.JSX.Element;
+declare function FieldError({ className, ...props }: FieldErrorProps): React.JSX.Element;
+declare const FieldValidity: React.FC<import("@base-ui/react").FieldValidityProps>;
 //#endregion
-export { Field, FieldControl, type FieldControlProps, FieldDescription, type FieldDescriptionProps, FieldError, type FieldErrorProps, FieldItem, type FieldItemProps, FieldLabel, type FieldLabelProps, FieldPrimitive, type FieldProps, FieldValidity, type FieldValidityProps };
+export { Field, FieldContent, type FieldContentProps, FieldControl, type FieldControlProps, FieldDescription, type FieldDescriptionProps, FieldError, type FieldErrorProps, FieldItem, type FieldItemProps, FieldLabel, type FieldLabelProps, FieldPrimitive, type FieldProps, FieldValidity, type FieldValidityProps, fieldVariants };

package/dist/field.js

@@ -1,50 +1,78 @@
 "use client";
 import { cn } from "./lib/utils.js";
 import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
 import { Field as FieldPrimitive } from "@base-ui/react/field";
 //#region src/field.tsx
-function Field({ className, ...props }) {
+const fieldVariants = cva("flex w-full gap-3", {
+	variants: { orientation: {
+		vertical: "flex-col *:w-full [&>.sr-only]:w-auto",
+		horizontal: "flex flex-row items-center *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px"
+	} },
+	defaultVariants: { orientation: "vertical" }
+});
+/**
+* A labelled control with its messages. Below the control, `FieldError`
+* comes first and `FieldDescription` under it, so the hint stays visible
+* while the error is showing. An invalid field doesn't tint its text: the
+* control's danger ring and the error carry the state, and the label
+* stays neutral.
+*/
+function Field({ className, orientation, ...props }) {
 	return /* @__PURE__ */ jsx(FieldPrimitive.Root, {
 		"data-slot": "field",
-		className: cn("grid w-full gap-2 data-[invalid]:text-destructive", className),
+		"data-orientation": orientation ?? "vertical",
+		className: cn(fieldVariants({ orientation }), className),
 		...props
 	});
 }
 function FieldLabel({ className, ...props }) {
 	return /* @__PURE__ */ jsx(FieldPrimitive.Label, {
 		"data-slot": "field-label",
-		className: cn("text-sm font-medium leading-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-70", className),
+		className: cn("flex w-fit items-center gap-2 text-sm leading-snug font-medium select-none [&[for]]:cursor-clickable data-disabled:pointer-events-none data-disabled:opacity-30", className),
 		...props
 	});
 }
 function FieldControl({ className, ...props }) {
 	return /* @__PURE__ */ jsx(FieldPrimitive.Control, {
 		"data-slot": "field-control",
-		className: cn("data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50", className),
+		className,
+		...props
+	});
+}
+/**
+* A label and its description stacked together, beside a control. The label
+* row is as tall as the default checkbox, radio and switch (24px), so its
+* text centers on the control.
+*/
+function FieldContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "field-content",
+		className: cn("flex flex-1 flex-col gap-2 leading-snug [&>[data-slot=field-label]]:min-h-6", className),
 		...props
 	});
 }
 function FieldDescription({ className, ...props }) {
 	return /* @__PURE__ */ jsx(FieldPrimitive.Description, {
 		"data-slot": "field-description",
-		className: cn("text-muted text-left text-sm leading-normal font-normal", "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4", className),
+		className: cn("text-muted text-start text-sm leading-normal font-normal", "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4", "last:mt-0 nth-last-2:-mt-1 group-has-data-horizontal/field:text-balance", className),
 		...props
 	});
 }
 function FieldItem({ className, ...props }) {
 	return /* @__PURE__ */ jsx(FieldPrimitive.Item, {
 		"data-slot": "field-item",
-		className: cn("flex items-center gap-2", className),
+		className: cn("group/field flex items-center gap-2", className),
 		...props
 	});
 }
 function FieldError({ className, ...props }) {
 	return /* @__PURE__ */ jsx(FieldPrimitive.Error, {
 		"data-slot": "field-error",
-		className: cn("text-destructive text-sm font-normal", className),
+		className: cn("text-danger text-sm font-normal -mb-3", className),
 		...props
 	});
 }
 const FieldValidity = FieldPrimitive.Validity;
 //#endregion
-export { Field, FieldControl, FieldDescription, FieldError, FieldItem, FieldLabel, FieldPrimitive, FieldValidity };
+export { Field, FieldContent, FieldControl, FieldDescription, FieldError, FieldItem, FieldLabel, FieldPrimitive, FieldValidity, fieldVariants };

package/dist/fieldset.d.ts

@@ -0,0 +1,14 @@
+import * as React from "react";
+import { Fieldset as Fieldset$1 } from "@base-ui/react/fieldset";
+//#region src/fieldset.d.ts
+type FieldsetProps = React.ComponentProps<typeof Fieldset$1.Root>;
+type FieldsetLegendProps = React.ComponentProps<typeof Fieldset$1.Legend>;
+/**
+ * Groups related fields under one legend (an address, a set of choices).
+ * `disabled` disables every `Field` inside it.
+ */
+declare function Fieldset({ className, ...props }: FieldsetProps): React.JSX.Element;
+/** The fieldset's title, announced as its accessible name. */
+declare function FieldsetLegend({ className, ...props }: FieldsetLegendProps): React.JSX.Element;
+//#endregion
+export { Fieldset, FieldsetLegend, type FieldsetLegendProps, type FieldsetProps };

package/dist/fieldset.js

@@ -0,0 +1,26 @@
+"use client";
+import { cn } from "./lib/utils.js";
+import { jsx } from "react/jsx-runtime";
+import { Fieldset as Fieldset$1 } from "@base-ui/react/fieldset";
+//#region src/fieldset.tsx
+/**
+* Groups related fields under one legend (an address, a set of choices).
+* `disabled` disables every `Field` inside it.
+*/
+function Fieldset({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Fieldset$1.Root, {
+		"data-slot": "fieldset",
+		className: cn("flex w-full min-w-0 flex-col gap-7 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3 *:data-[slot=field-group]:gap-4", className),
+		...props
+	});
+}
+/** The fieldset's title, announced as its accessible name. */
+function FieldsetLegend({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Fieldset$1.Legend, {
+		"data-slot": "fieldset-legend",
+		className: cn("mb-3 text-base font-medium data-disabled:opacity-30", className),
+		...props
+	});
+}
+//#endregion
+export { Fieldset, FieldsetLegend };

package/dist/film-grain-shader.d.ts

@@ -1,5 +1,4 @@
 //#region src/film-grain-shader.d.ts
-declare const vertexShader = "\nattribute vec2 position;\nvarying vec2 vUv;\n\nvoid main() {\n  vUv = position * 0.5 + 0.5;\n  gl_Position = vec4(position, 0.0, 1.0);\n}\n";
-declare const fragmentShader = "\nprecision highp float;\n\nuniform float uTime;\nuniform vec2 uResolution;\nuniform float uDensity;\nuniform float uOpacity;\nuniform float uFps;\nuniform vec3 uColor;\n\nvarying vec2 vUv;\n\n// Stable hash\nfloat hash(vec2 p, float seed) {\n  return fract(sin(dot(p + seed, vec2(127.1, 311.7))) * 43758.5453123);\n}\n\n// Film response curve (soft toe + shoulder rolloff)\nfloat filmCurve(float x) {\n  return smoothstep(0.0, 0.2, x) * (1.0 - smoothstep(0.8, 1.0, x));\n}\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy;\n  vec2 p = floor(uv);\n\n  // Temporal coherence: blend between current and next frame seed\n  float frame = floor(uTime * uFps);\n  float t = fract(uTime * uFps);\n  float seed = frame * 0.1731;\n\n  // Multi-scale grain with inter-frame blending on fine layer\n  float fineA = hash(p, seed);\n  float fineB = hash(p, seed + 0.1731);\n  float fine = mix(fineA, fineB, t);\n\n  float medium = hash(floor(uv * 0.5), seed + 3.1);\n  float coarse = hash(floor(uv * 0.25), seed + 7.93);\n\n  float grain = fine * 0.65 + medium * 0.25 + coarse * 0.10;\n\n  // Emulsion clumping (organic structure)\n  float cluster = hash(floor(uv * 0.18), seed + 9.2);\n  grain *= mix(0.75, 1.35, cluster);\n\n  // Density threshold\n  grain = smoothstep(1.0 - uDensity, 1.0, grain);\n\n  // Film response curve (replaces raw pow gamma)\n  grain = filmCurve(grain);\n\n  // Micro-blur: sample neighbors for optical diffusion\n  float n1 = hash(p + vec2(1.0, 0.0), seed);\n  float n2 = hash(p - vec2(1.0, 0.0), seed);\n  float n3 = hash(p + vec2(0.0, 1.0), seed);\n  float n4 = hash(p - vec2(0.0, 1.0), seed);\n  float neighbors = (n1 + n2 + n3 + n4) * 0.25;\n  grain = mix(grain, neighbors, 0.15);\n\n  // Chromatic aberration (reuse neighbor hashes)\n  float rShift = n1 * 0.015;\n  float bShift = n2 * 0.015;\n\n  vec3 color = uColor * vec3(\n    grain + rShift,\n    grain,\n    grain + bShift\n  );\n\n  color = clamp(color, 0.0, 1.0);\n\n  gl_FragColor = vec4(color, grain * uOpacity);\n}\n";
-//#endregion
-export { fragmentShader, vertexShader };
+export declare const vertexShader = "\nattribute vec2 position;\nvarying vec2 vUv;\n\nvoid main() {\n  vUv = position * 0.5 + 0.5;\n  gl_Position = vec4(position, 0.0, 1.0);\n}\n";
+export declare const fragmentShader = "\nprecision highp float;\n\nuniform float uTime;\nuniform vec2 uResolution;\nuniform float uDensity;\nuniform float uOpacity;\nuniform float uFps;\nuniform vec3 uColor;\n\nvarying vec2 vUv;\n\n// Stable hash\nfloat hash(vec2 p, float seed) {\n  return fract(sin(dot(p + seed, vec2(127.1, 311.7))) * 43758.5453123);\n}\n\n// Film response curve (soft toe + shoulder rolloff)\nfloat filmCurve(float x) {\n  return smoothstep(0.0, 0.2, x) * (1.0 - smoothstep(0.8, 1.0, x));\n}\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy;\n  vec2 p = floor(uv);\n\n  // Temporal coherence: blend between current and next frame seed\n  float frame = floor(uTime * uFps);\n  float t = fract(uTime * uFps);\n  float seed = frame * 0.1731;\n\n  // Multi-scale grain with inter-frame blending on fine layer\n  float fineA = hash(p, seed);\n  float fineB = hash(p, seed + 0.1731);\n  float fine = mix(fineA, fineB, t);\n\n  float medium = hash(floor(uv * 0.5), seed + 3.1);\n  float coarse = hash(floor(uv * 0.25), seed + 7.93);\n\n  float grain = fine * 0.65 + medium * 0.25 + coarse * 0.10;\n\n  // Emulsion clumping (organic structure)\n  float cluster = hash(floor(uv * 0.18), seed + 9.2);\n  grain *= mix(0.75, 1.35, cluster);\n\n  // Density threshold\n  grain = smoothstep(1.0 - uDensity, 1.0, grain);\n\n  // Film response curve (replaces raw pow gamma)\n  grain = filmCurve(grain);\n\n  // Micro-blur: sample neighbors for optical diffusion\n  float n1 = hash(p + vec2(1.0, 0.0), seed);\n  float n2 = hash(p - vec2(1.0, 0.0), seed);\n  float n3 = hash(p + vec2(0.0, 1.0), seed);\n  float n4 = hash(p - vec2(0.0, 1.0), seed);\n  float neighbors = (n1 + n2 + n3 + n4) * 0.25;\n  grain = mix(grain, neighbors, 0.15);\n\n  // Chromatic aberration (reuse neighbor hashes)\n  float rShift = n1 * 0.015;\n  float bShift = n2 * 0.015;\n\n  vec3 color = uColor * vec3(\n    grain + rShift,\n    grain,\n    grain + bShift\n  );\n\n  color = clamp(color, 0.0, 1.0);\n\n  gl_FragColor = vec4(color, grain * uOpacity);\n}\n";
+//#endregion

package/dist/film-grain-webgl.d.ts

@@ -1,5 +1,3 @@
-import * as _$react from "react";
-
 //#region src/film-grain-webgl.d.ts
 interface UseFilmGrainOptions {
   density: number;
@@ -8,10 +6,5 @@ interface UseFilmGrainOptions {
   /** Hex color for canvas fallback grain. Default '#ffffff' */
   color?: string;
 }
-declare function useFilmGrain({
-  density,
-  fps,
-  color
-}: UseFilmGrainOptions): _$react.RefObject<HTMLCanvasElement | null>;
-//#endregion
-export { useFilmGrain };
+export declare function useFilmGrain({ density, fps, color }: UseFilmGrainOptions): import("react").RefObject<HTMLCanvasElement | null>;
+//#endregion

package/dist/film-grain-webgl.js

@@ -92,7 +92,10 @@ function generateGrainTexture(width, height, density, color) {
 	const [r, g, b, a] = parseHex(color);
 	const imageData = ctx.createImageData(width, height);
 	const pixels = new Uint32Array(imageData.data.buffer);
-	for (let i = 0; i < pixels.length; i++) if (Math.random() < density) pixels[i] = (Math.round(a * (.4 + Math.random() * .6)) << 24 | b << 16 | g << 8 | r) >>> 0;
+	for (let i = 0; i < pixels.length; i++) if (Math.random() < density) {
+		const variation = Math.round(a * (.4 + Math.random() * .6));
+		pixels[i] = (variation << 24 | b << 16 | g << 8 | r) >>> 0;
+	}
 	ctx.putImageData(imageData, 0, 0);
 	return offscreen;
 }

package/dist/film-grain.d.ts

@@ -1,6 +1,4 @@
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import * as React from "react";
-
 //#region src/film-grain.d.ts
 interface FilmGrainProps {
   density?: number;
@@ -11,14 +9,6 @@ interface FilmGrainProps {
   className?: string;
   style?: React.CSSProperties;
 }
-declare function FilmGrain({
-  density,
-  opacity,
-  blendMode,
-  fps,
-  color,
-  className,
-  style
-}: FilmGrainProps): _$react_jsx_runtime0.JSX.Element;
+declare function FilmGrain({ density, opacity, blendMode, fps, color, className, style }: FilmGrainProps): React.JSX.Element;
 //#endregion
 export { FilmGrain, type FilmGrainProps };