@waveso/ui 0.15.1 → 0.17.0

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/form.d.ts

@@ -7,20 +7,6 @@ type FormProps<TFieldValues extends FieldValues> = {
   onSubmit: SubmitHandler<TFieldValues>;
 } & Omit<React.ComponentProps<"form">, "onSubmit">;
 type FormRootProps = React.ComponentProps<"form">;
-type FormErrorProps = React.ComponentProps<"p">;
-type FormActionsProps = React.ComponentProps<"div">;
-type FormMessageProps = React.ComponentProps<"p">;
-declare function Form<TFieldValues extends FieldValues>({ form, onSubmit, ...props }: FormProps<TFieldValues>): React.JSX.Element;
-/**
- * Plain `<form>` element with RHF integration.
- *
- * Uses a native `<form>` instead of `@base-ui/react/form` because Base UI
- * Form's internal submit/validation handling conflicts with React Hook Form
- * and blocks button click events inside modal dialogs. Since RHF already
- * provides validation, error handling, and submit management, the Base UI
- * Form wrapper adds no value at the moment.
- */
-declare function FormRoot({ className, ...props }: FormRootProps): React.JSX.Element;
 type FormFieldRenderArgs<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> = {
   id: string;
   field: ControllerRenderProps<TFieldValues, TName>;
@@ -43,6 +29,20 @@ type FormFieldProps<TFieldValues extends FieldValues, TName extends FieldPath<TF
    */
   render: (args: FormFieldRenderArgs<TFieldValues, TName>) => React.ReactNode;
 } & Omit<React.ComponentProps<typeof Field>, "children" | "name" | "invalid" | "touched" | "dirty" | "render">;
+type FormErrorProps = React.ComponentProps<"p">;
+type FormActionsProps = React.ComponentProps<"div">;
+type FormMessageProps = React.ComponentProps<"p">;
+declare function Form<TFieldValues extends FieldValues>({ form, onSubmit, ...props }: FormProps<TFieldValues>): React.JSX.Element;
+/**
+ * Plain `<form>` element with RHF integration.
+ *
+ * Uses a native `<form>` instead of `@base-ui/react/form` because Base UI
+ * Form's internal submit/validation handling conflicts with React Hook Form
+ * and blocks button click events inside modal dialogs. Since RHF already
+ * provides validation, error handling, and submit management, the Base UI
+ * Form wrapper adds no value at the moment.
+ */
+declare function FormRoot({ className, ...props }: FormRootProps): React.JSX.Element;
 /**
  * Base UI + React Hook Form field helper.
  *

package/dist/form.js

@@ -65,16 +65,19 @@ function FormField(props) {
 			children: [
 				label ? /* @__PURE__ */ jsxs(FieldLabel, { children: [label, isRequired ? /* @__PURE__ */ jsx("span", {
 					"aria-hidden": "true",
-					className: "text-destructive ml-1",
+					className: "text-danger ms-1",
 					children: "*"
 				}) : null] }) : null,
-				description ? /* @__PURE__ */ jsx(FieldDescription, { children: description }) : null,
 				render({
 					id: controlId,
 					field,
 					fieldState
 				}),
-				fieldState.error ? /* @__PURE__ */ jsx(FieldError, { children: fieldState.error.message }) : null
+				fieldState.error ? /* @__PURE__ */ jsx(FieldError, {
+					match: true,
+					children: fieldState.error.message
+				}) : null,
+				description ? /* @__PURE__ */ jsx(FieldDescription, { children: description }) : null
 			]
 		})
 	});
@@ -86,7 +89,7 @@ function FormError({ className, ...props }) {
 	return /* @__PURE__ */ jsx("p", {
 		"data-slot": "form-error",
 		role: "alert",
-		className: cn("text-destructive rounded-lg border border-destructive/30 bg-destructive/5 p-4 text-sm", className),
+		className: cn("text-danger rounded-lg border border-danger/30 bg-danger/5 p-4 text-sm", className),
 		...props,
 		children: message
 	});

package/dist/glyph-matrix.d.ts

@@ -0,0 +1,25 @@
+import * as React from "react";
+//#region src/glyph-matrix.d.ts
+interface GlyphMatrixProps extends React.ComponentProps<"canvas"> {
+  /** Characters picked from at random. */
+  glyphs?: string;
+  /** Multiplies how fast the field changes. 0 holds it still. */
+  speed?: number;
+  /**
+   * Bright flashes, some typing short runs along a row. Off leaves a calm
+   * shimmer: glyphs swapping quietly at their resting brightness.
+   */
+  glitch?: boolean;
+}
+/**
+ * A field of glitching glyphs, for decorative backgrounds (`glitch={false}`
+ * for a calm shimmer behind busy content). Styled with
+ * classes: `text-*` sets the glyphs' color and size, `font-*` their typeface,
+ * and `accent-*` the color of the flares, which alternate with the text color
+ * at full strength. A theme switch re-tints the field. `opacity-*` makes it
+ * fainter, and `mask-*` fades it toward an edge (`mask-b-from-40%`) or around
+ * content on top (`mask-radial-from-transparent mask-radial-to-black`).
+ */
+declare function GlyphMatrix({ glyphs, speed, glitch, className, ref, ...props }: GlyphMatrixProps): React.JSX.Element;
+//#endregion
+export { GlyphMatrix, type GlyphMatrixProps };

package/dist/glyph-matrix.js

@@ -0,0 +1,266 @@
+"use client";
+import { cn } from "./lib/utils.js";
+import { mergeRefs } from "./lib/merge-refs.js";
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+//#region src/glyph-matrix.tsx
+const DEFAULT_GLYPHS = "ABCDEFGHIJKLMNOPQRSTUVWXYZ!@#$&*()-_+=/[]{};:<>.,0123456789";
+/** Space beside each glyph and the row height, in ems. */
+const CELL_GAP = .6;
+const ROW_HEIGHT = 1.55;
+/** Share of cells left blank. */
+const BLANK_SHARE = .1;
+/** Resting opacity range of the other cells. */
+const REST_MIN = .12;
+const REST_RANGE = .38;
+/** Share of the field that quietly swaps its glyph each second. */
+const SWAP_RATE = .2;
+/** Share of the field that flares each second. */
+const FLARE_RATE = .035;
+/** Chance a flare starts a streak: a run that types along its row. */
+const STREAK_CHANCE = .24;
+/** Share of streaks that run long (10–24 cells instead of 2–8). */
+const LONG_STREAK_CHANCE = 1 / 16;
+/** Seconds between a streak's cells. */
+const STREAK_PACE = .028;
+/** Faint background glyphs gain nothing from more than 2 device pixels per px. */
+const MAX_PIXEL_RATIO = 2;
+/** How often the canvas's color and font are re-read, in seconds. */
+const STYLE_CHECK = .25;
+function randomGlyph(pool) {
+	return pool[Math.floor(Math.random() * pool.length)] ?? " ";
+}
+function randomRest() {
+	return Math.random() < BLANK_SHARE ? 0 : REST_MIN + Math.random() * REST_RANGE;
+}
+function randomFlare() {
+	return {
+		peak: .45 + Math.random() * .55,
+		hold: .04 + Math.random() * .26,
+		fade: .45 + Math.random() * .6,
+		accent: Math.random() < .5
+	};
+}
+/** Cells a streak adds after its first one. */
+function streakLength() {
+	return Math.random() < LONG_STREAK_CHANCE ? 9 + Math.floor(Math.random() * 15) : 1 + Math.floor(Math.random() * 7);
+}
+/**
+* A field of glitching glyphs, for decorative backgrounds (`glitch={false}`
+* for a calm shimmer behind busy content). Styled with
+* classes: `text-*` sets the glyphs' color and size, `font-*` their typeface,
+* and `accent-*` the color of the flares, which alternate with the text color
+* at full strength. A theme switch re-tints the field. `opacity-*` makes it
+* fainter, and `mask-*` fades it toward an edge (`mask-b-from-40%`) or around
+* content on top (`mask-radial-from-transparent mask-radial-to-black`).
+*/
+function GlyphMatrix({ glyphs = DEFAULT_GLYPHS, speed = 1, glitch = true, className, ref, ...props }) {
+	const canvasRef = React.useRef(null);
+	const mergedRef = React.useMemo(() => mergeRefs(canvasRef, ref), [ref]);
+	React.useEffect(() => {
+		const canvas = canvasRef.current;
+		const context = canvas?.getContext("2d");
+		if (!canvas || !context) return;
+		const pool = Array.from(glyphs.length > 0 ? glyphs : DEFAULT_GLYPHS);
+		const pace = Number.isFinite(speed) ? Math.max(0, speed) : 1;
+		const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)");
+		let color = "";
+		let accent = "";
+		let font = "";
+		let cellWidth = 0;
+		let cellHeight = 0;
+		let cols = 0;
+		let total = 0;
+		let cells = [];
+		let rests = /* @__PURE__ */ new Float32Array(0);
+		let heats = /* @__PURE__ */ new Float32Array(0);
+		let flares = [];
+		const active = /* @__PURE__ */ new Set();
+		const dirty = /* @__PURE__ */ new Set();
+		const streaks = [];
+		let swapCarry = 0;
+		let flareCarry = 0;
+		let styleCheck = STYLE_CHECK;
+		let visible = true;
+		let disposed = false;
+		let frame = 0;
+		let last = 0;
+		const drawCell = (index) => {
+			const x = index % cols * cellWidth;
+			const y = Math.floor(index / cols) * cellHeight;
+			const glyph = cells[index] ?? " ";
+			const rest = rests[index] ?? 0;
+			const heat = heats[index] ?? 0;
+			context.clearRect(x, y, cellWidth, cellHeight);
+			if (rest * (1 - heat) > .004) {
+				context.fillStyle = color;
+				context.globalAlpha = rest * (1 - heat);
+				context.fillText(glyph, x + cellWidth / 2, y + cellHeight / 2);
+			}
+			if (heat > .004) {
+				context.fillStyle = flares[index]?.accent ? accent : color;
+				context.globalAlpha = heat;
+				context.fillText(glyph, x + cellWidth / 2, y + cellHeight / 2);
+			}
+		};
+		const paintAll = () => {
+			context.clearRect(0, 0, canvas.clientWidth, canvas.clientHeight);
+			context.font = font;
+			context.textAlign = "center";
+			context.textBaseline = "middle";
+			for (let index = 0; index < total; index++) drawCell(index);
+			dirty.clear();
+		};
+		const build = () => {
+			const ratio = Math.min(window.devicePixelRatio || 1, MAX_PIXEL_RATIO);
+			const { clientWidth: width, clientHeight: height } = canvas;
+			canvas.width = Math.round(width * ratio);
+			canvas.height = Math.round(height * ratio);
+			context.setTransform(ratio, 0, 0, ratio, 0, 0);
+			context.font = font;
+			const size = parseFloat(getComputedStyle(canvas).fontSize) || 14;
+			let advance = 1;
+			for (const glyph of new Set(pool)) advance = Math.max(advance, context.measureText(glyph).width);
+			cellWidth = Math.ceil(advance + size * CELL_GAP);
+			cellHeight = Math.ceil(size * ROW_HEIGHT);
+			cols = Math.ceil(width / cellWidth);
+			total = cols * Math.ceil(height / cellHeight);
+			cells = Array.from({ length: total }, () => randomGlyph(pool));
+			rests = Float32Array.from({ length: total }, randomRest);
+			heats = new Float32Array(total);
+			flares = [];
+			active.clear();
+			dirty.clear();
+			streaks.length = 0;
+			paintAll();
+		};
+		const syncStyle = () => {
+			const computed = getComputedStyle(canvas);
+			const nextAccent = computed.accentColor === "auto" ? computed.color : computed.accentColor;
+			const nextFont = `${computed.fontWeight} ${computed.fontSize} ${computed.fontFamily}`;
+			const colorChanged = computed.color !== color || nextAccent !== accent;
+			color = computed.color;
+			accent = nextAccent;
+			if (nextFont !== font) {
+				font = nextFont;
+				build();
+				if (!document.fonts.check(nextFont)) document.fonts.load(nextFont).then(() => {
+					if (!disposed && font === nextFont) build();
+				}, () => {});
+			} else if (colorChanged) paintAll();
+		};
+		const ignite = (index, flare) => {
+			flares[index] = { ...flare };
+			heats[index] = flare.peak;
+			active.add(index);
+			dirty.add(index);
+		};
+		const update = (dt) => {
+			swapCarry += total * SWAP_RATE * pace * dt;
+			for (; swapCarry >= 1; swapCarry--) {
+				const index = Math.floor(Math.random() * total);
+				if (active.has(index)) continue;
+				cells[index] = randomGlyph(pool);
+				dirty.add(index);
+			}
+			if (glitch) flareCarry += total * FLARE_RATE * pace * dt;
+			for (; flareCarry >= 1; flareCarry--) {
+				const index = Math.floor(Math.random() * total);
+				const flare = randomFlare();
+				ignite(index, flare);
+				if (Math.random() < STREAK_CHANCE) streaks.push({
+					index,
+					left: streakLength(),
+					carry: 0,
+					flare
+				});
+			}
+			for (let s = streaks.length - 1; s >= 0; s--) {
+				const streak = streaks[s];
+				if (!streak) continue;
+				streak.carry += dt * pace / STREAK_PACE;
+				while (streak.carry >= 1 && streak.left > 0) {
+					streak.carry -= 1;
+					streak.left -= 1;
+					streak.index += 1;
+					if (streak.index % cols === 0 || streak.index >= total) {
+						streak.left = 0;
+						break;
+					}
+					ignite(streak.index, streak.flare);
+				}
+				if (streak.left <= 0) streaks.splice(s, 1);
+			}
+			for (const index of active) {
+				const flare = flares[index];
+				if (!flare) {
+					active.delete(index);
+					continue;
+				}
+				if (flare.hold > 0) flare.hold -= dt;
+				else heats[index] = (heats[index] ?? 0) * Math.exp(-dt * 4 / flare.fade);
+				const heat = heats[index] ?? 0;
+				if (heat < .012 && flare.hold <= 0) {
+					heats[index] = 0;
+					active.delete(index);
+				} else if (Math.random() < heat * dt * 12) cells[index] = randomGlyph(pool);
+				dirty.add(index);
+			}
+			for (const index of dirty) drawCell(index);
+			dirty.clear();
+		};
+		const settle = () => {
+			for (const index of active) {
+				heats[index] = 0;
+				drawCell(index);
+			}
+			active.clear();
+			streaks.length = 0;
+		};
+		const tick = (time) => {
+			frame = requestAnimationFrame(tick);
+			const dt = last ? Math.min(.05, (time - last) / 1e3) : 0;
+			last = time;
+			if (!visible || dt === 0) return;
+			styleCheck -= dt;
+			if (styleCheck <= 0) {
+				styleCheck = STYLE_CHECK;
+				syncStyle();
+			}
+			if (reducedMotion.matches) {
+				if (active.size > 0) settle();
+				return;
+			}
+			update(dt);
+		};
+		const resizeObserver = new ResizeObserver(() => {
+			if (font) build();
+			else syncStyle();
+		});
+		resizeObserver.observe(canvas);
+		const intersectionObserver = new IntersectionObserver(([entry]) => {
+			if (entry) visible = entry.isIntersecting;
+		});
+		intersectionObserver.observe(canvas);
+		frame = requestAnimationFrame(tick);
+		return () => {
+			disposed = true;
+			cancelAnimationFrame(frame);
+			resizeObserver.disconnect();
+			intersectionObserver.disconnect();
+		};
+	}, [
+		glyphs,
+		speed,
+		glitch
+	]);
+	return /* @__PURE__ */ jsx("canvas", {
+		ref: mergedRef,
+		"data-slot": "glyph-matrix",
+		"aria-hidden": "true",
+		className: cn("text-contrast accent-accent font-mono text-sm pointer-events-none block size-full", className),
+		...props
+	});
+}
+//#endregion
+export { GlyphMatrix };

package/dist/gradient-reveal-text.d.ts

@@ -4,7 +4,7 @@ interface GradientRevealTextProps {
   text: string;
   /** Spotlight follow speed in seconds. Default: 0 (instant) */
   duration?: number;
-  /** Gradient colors for the reveal effect. Default: rainbow */
+  /** Gradient colors for the reveal effect, any CSS color (`var(--wave-teal-400)` too). Default: rainbow */
   colors?: string[];
   /** Base stroke opacity when not hovered. Default: 0.3 */
   baseOpacity?: number;
@@ -16,7 +16,7 @@ interface GradientRevealTextProps {
   spotlightSize?: number;
   /** Stroke width in px. Default: auto (1.5% of text height) */
   strokeWidth?: number;
-  /** Base stroke color. Default: neutral-200 (light) / neutral-800 (dark) via Tailwind */
+  /** Base stroke color. Default: the `contour` token, so it follows the theme */
   baseColor?: string;
   className?: string;
 }
@@ -30,7 +30,7 @@ interface GradientRevealTextProps {
  * @example
  * ```tsx
  * <GradientRevealText text="HELLO" />
- * <GradientRevealText text="BRAND" colors={["#ff0000", "#00ff00"]} />
+ * <GradientRevealText text="BRAND" colors={["var(--wave-red-400)", "var(--wave-green-400)"]} />
  * ```
  */
 declare function GradientRevealText({ text, duration, colors, baseOpacity, hoverOpacity, fontFamily, spotlightSize, strokeWidth: strokeWidthPx, baseColor, className }: GradientRevealTextProps): import("react").JSX.Element;

package/dist/gradient-reveal-text.js

@@ -4,11 +4,11 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useId, useRef, useState } from "react";
 //#region src/gradient-reveal-text.tsx
 const DEFAULT_COLORS = [
-	"#eab308",
-	"#ef4444",
-	"#3b82f6",
-	"#06b6d4",
-	"#8b5cf6"
+	"var(--wave-yellow-400)",
+	"var(--wave-red-400)",
+	"var(--wave-blue-400)",
+	"var(--wave-teal-400)",
+	"var(--wave-purple-400)"
 ];
 /**
 * Large decorative text with a gradient spotlight that follows the cursor.
@@ -20,7 +20,7 @@ const DEFAULT_COLORS = [
 * @example
 * ```tsx
 * <GradientRevealText text="HELLO" />
-* <GradientRevealText text="BRAND" colors={["#ff0000", "#00ff00"]} />
+* <GradientRevealText text="BRAND" colors={["var(--wave-red-400)", "var(--wave-green-400)"]} />
 * ```
 */
 function GradientRevealText({ text, duration = 0, colors = DEFAULT_COLORS, baseOpacity = .3, hoverOpacity = .7, fontFamily = "Helvetica Neue, Helvetica, Arial, sans-serif", spotlightSize = .6, strokeWidth: strokeWidthPx, baseColor, className }) {
@@ -188,7 +188,7 @@ function GradientRevealText({ text, duration = 0, colors = DEFAULT_COLORS, baseO
 					y2: "0%",
 					children: hovered && stops.map((s) => /* @__PURE__ */ jsx("stop", {
 						offset: s.offset,
-						stopColor: s.color
+						style: { stopColor: s.color }
 					}, s.offset))
 				}),
 				/* @__PURE__ */ jsxs("radialGradient", {
@@ -236,7 +236,7 @@ function GradientRevealText({ text, duration = 0, colors = DEFAULT_COLORS, baseO
 				y: "50%",
 				textAnchor: "middle",
 				dominantBaseline: "central",
-				className: baseColor ? "font-bold" : "font-bold stroke-neutral-200 dark:stroke-neutral-800",
+				className: baseColor ? "font-bold" : "font-bold stroke-contour",
 				style: {
 					...textStyle,
 					...baseColor ? { stroke: baseColor } : {},

package/dist/input-group.js

@@ -6,7 +6,7 @@ import { Textarea } from "./textarea.js";
 import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 //#region src/input-group.tsx
-const inputGroupVariants = cva("bg-edge hover:border-focus has-[[data-slot=input-group-control]:focus-visible]:border-focus has-[[data-slot=input-group-control]:focus-visible]:ring-focus/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/30 has-[[data-slot][aria-invalid=true]]:border-destructive group/input-group relative flex w-full min-w-0 items-center rounded-md border border-transparent motion-color outline-hidden in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:pointer-events-none has-disabled:opacity-30 not-has-disabled:has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-3 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3", {
+const inputGroupVariants = cva("bg-shade hover:border-focus has-[[data-slot=input-group-control]:focus-visible]:border-focus has-[[data-slot=input-group-control]:focus-visible]:ring-focus/50 has-[[data-slot][aria-invalid=true]]:ring-danger/30 has-[[data-slot][aria-invalid=true]]:border-danger group/input-group relative flex w-full min-w-0 items-center rounded-md border border-transparent motion-color outline-hidden in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:pointer-events-none has-disabled:opacity-30 not-has-disabled:has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-3 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3", {
 	variants: { size: {
 		xs: "h-6 rounded-sm",
 		sm: "h-8",

package/dist/input-otp.d.ts

@@ -4,14 +4,14 @@ import { OTPInput } from "input-otp";
 type InputOTPProps = React.ComponentProps<typeof OTPInput> & {
   containerClassName?: string;
 };
-declare function InputOTP({ className, containerClassName, ...props }: InputOTPProps): React.JSX.Element;
 type InputOTPGroupProps = React.ComponentProps<"div">;
-declare function InputOTPGroup({ className, ...props }: InputOTPGroupProps): React.JSX.Element;
 type InputOTPSlotProps = React.ComponentProps<"div"> & {
   index: number;
 };
-declare function InputOTPSlot({ index, className, ...props }: InputOTPSlotProps): React.JSX.Element;
 type InputOTPSeparatorProps = React.ComponentProps<"div">;
+declare function InputOTP({ className, containerClassName, ...props }: InputOTPProps): React.JSX.Element;
+declare function InputOTPGroup({ className, ...props }: InputOTPGroupProps): React.JSX.Element;
+declare function InputOTPSlot({ index, className, ...props }: InputOTPSlotProps): React.JSX.Element;
 declare function InputOTPSeparator({ className, ...props }: InputOTPSeparatorProps): React.JSX.Element;
 //#endregion
 export { InputOTP, InputOTPGroup, type InputOTPGroupProps, type InputOTPProps, InputOTPSeparator, type InputOTPSeparatorProps, InputOTPSlot, type InputOTPSlotProps };

package/dist/input-otp.js

@@ -10,7 +10,7 @@ function InputOTP({ className, containerClassName, ...props }) {
 		"data-slot": "input-otp",
 		containerClassName: cn("group/input-otp flex items-center has-disabled:opacity-50", containerClassName),
 		spellCheck: false,
-		className: cn("disabled:cursor-not-allowed", className),
+		className: cn(className),
 		...props
 	});
 }
@@ -26,7 +26,7 @@ function InputOTPSlot({ index, className, ...props }) {
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "input-otp-slot",
 		"data-active": isActive || void 0,
-		className: cn("border-edge dark:bg-edge/30 relative flex size-9 items-center justify-center border-y border-r text-sm motion-color outline-hidden first:rounded-l-md first:border-l last:rounded-r-md", "data-active:border-focus data-active:ring-3 data-active:ring-focus/50 data-active:z-10", "group-has-aria-invalid/input-otp:border-destructive group-has-aria-invalid/input-otp:data-active:ring-3 group-has-aria-invalid/input-otp:data-active:ring-destructive/30", className),
+		className: cn("border-shade relative flex size-9 items-center justify-center border-y border-r text-sm motion-color outline-hidden first:rounded-l-md first:border-l last:rounded-r-md", "data-active:border-focus data-active:ring-3 data-active:ring-focus/50 data-active:z-10", "group-has-aria-invalid/input-otp:border-danger group-has-aria-invalid/input-otp:data-active:ring-3 group-has-aria-invalid/input-otp:data-active:ring-danger/30", className),
 		...props,
 		children: [char, hasFakeCaret && /* @__PURE__ */ jsx("div", {
 			className: "pointer-events-none absolute inset-0 flex items-center justify-center",

package/dist/input.js

@@ -3,7 +3,7 @@ import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import { Input as Input$1 } from "@base-ui/react/input";
 //#region src/input.tsx
-const inputVariants = cva("bg-edge hover:border-focus focus-visible:border-focus focus-visible:ring-focus/50 aria-invalid:ring-destructive/30 aria-invalid:border-destructive placeholder:text-soft flex w-full min-w-0 items-center overflow-hidden rounded-md border border-transparent motion-color outline-hidden file:inline-flex file:my-[3px] file:items-center file:me-3 file:cursor-clickable file:rounded-md file:border-0 file:bg-primary file:px-2.5 file:leading-none file:font-medium file:text-white file:motion-color file:hover:bg-primary/80 focus-visible:ring-3 disabled:pointer-events-none disabled:opacity-30 aria-invalid:ring-3", {
+const inputVariants = cva("bg-shade hover:border-focus focus-visible:border-focus focus-visible:ring-focus/50 aria-invalid:ring-danger/30 aria-invalid:border-danger placeholder:text-soft flex w-full min-w-0 items-center overflow-hidden rounded-md border border-transparent motion-color outline-hidden file:inline-flex file:my-[3px] file:items-center file:me-3 file:cursor-clickable file:rounded-md file:border-0 file:bg-primary file:px-2.5 file:leading-none file:font-medium file:text-white file:motion-color file:hover:bg-primary/80 focus-visible:ring-3 data-disabled:pointer-events-none data-disabled:opacity-30 aria-invalid:ring-3", {
 	variants: { size: {
 		xs: "h-6 rounded-sm px-2 text-xs file:-ms-[5px] file:h-4",
 		sm: "h-8 px-3 text-sm file:-ms-[9px] file:h-6",

package/dist/item.d.ts

@@ -25,7 +25,7 @@ declare function ItemSeparator({ className, ...props }: ItemSeparatorProps): Rea
 declare function Item({ className, variant, size, render, ...props }: ItemProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
 declare function ItemMedia({ className, variant, ...props }: ItemMediaProps): React.JSX.Element;
 declare function ItemContent({ className, ...props }: ItemContentProps): React.JSX.Element;
-declare function ItemTitle({ className, ...props }: ItemTitleProps): React.JSX.Element;
+declare function ItemTitle({ className, children, ...props }: ItemTitleProps): React.JSX.Element;
 declare function ItemDescription({ className, ...props }: ItemDescriptionProps): React.JSX.Element;
 declare function ItemActions({ className, ...props }: ItemActionsProps): React.JSX.Element;
 declare function ItemHeader({ className, ...props }: ItemHeaderProps): React.JSX.Element;