@waveso/ui 0.15.0 → 0.16.0

package/dist/form.d.ts

@@ -1,36 +1,12 @@
 import { Field } from "./field.js";
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import * as React from "react";
-import * as _$react_hook_form0 from "react-hook-form";
 import { ControllerFieldState, ControllerRenderProps, FieldPath, FieldValues, RegisterOptions, SubmitHandler, UseFormReturn, useForm, useWatch } from "react-hook-form";
-
 //#region src/form.d.ts
 type FormProps<TFieldValues extends FieldValues> = {
   form: UseFormReturn<TFieldValues>;
   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_runtime0.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_runtime0.JSX.Element;
 type FormFieldRenderArgs<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> = {
   id: string;
   field: ControllerRenderProps<TFieldValues, TName>;
@@ -53,25 +29,30 @@ 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.
  *
  * It maps RHF Controller state onto Base UI's <Field> state so styling can
  * rely on `data-[invalid]`, `data-[touched]`, `data-[dirty]`, etc.
  */
-declare function FormField<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>>(props: FormFieldProps<TFieldValues, TName>): _$react_jsx_runtime0.JSX.Element;
-declare function FormError({
-  className,
-  ...props
-}: FormErrorProps): _$react_jsx_runtime0.JSX.Element | null;
-declare function FormActions({
-  className,
-  ...props
-}: FormActionsProps): _$react_jsx_runtime0.JSX.Element;
-declare function FormMessage({
-  className,
-  ...props
-}: FormMessageProps): _$react_jsx_runtime0.JSX.Element;
+declare function FormField<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>>(props: FormFieldProps<TFieldValues, TName>): React.JSX.Element;
+declare function FormError({ className, ...props }: FormErrorProps): React.JSX.Element | null;
+declare function FormActions({ className, ...props }: FormActionsProps): React.JSX.Element;
+declare function FormMessage({ className, ...props }: FormMessageProps): React.JSX.Element;
 /**
  * Convenience helper for mapping RHF field props onto either:
  * - Base UI controls (use `onValueChange`)
@@ -83,15 +64,15 @@ declare function fieldControlProps<TFieldValues extends FieldValues, TName exten
   invalid?: boolean;
   native?: boolean;
 }): {
-  "aria-describedby": string | undefined;
-  "aria-invalid": boolean | undefined;
-  onValueChange?: ((...event: any[]) => void) | undefined;
   id: string | undefined;
   name: TName;
-  ref: _$react_hook_form0.RefCallBack;
+  ref: import("react-hook-form").RefCallBack;
   value: string;
-  onBlur: _$react_hook_form0.Noop;
+  onBlur: import("react-hook-form").Noop;
   onChange: (...event: any[]) => void;
+  onValueChange?: ((...event: any[]) => void) | undefined;
+  "aria-describedby": string | undefined;
+  "aria-invalid": boolean | undefined;
 };
 //#endregion
 export { Form, FormActions, type FormActionsProps, FormError, type FormErrorProps, FormField, type FormFieldProps, type FormFieldRenderArgs, FormMessage, type FormMessageProps, type FormProps, FormRoot, type FormRootProps, fieldControlProps, useForm, useWatch };

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

@@ -1,12 +1,10 @@
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
-
 //#region src/gradient-reveal-text.d.ts
 interface GradientRevealTextProps {
   /** The text to display */
   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;
@@ -18,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;
 }
@@ -32,20 +30,9 @@ 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): _$react_jsx_runtime0.JSX.Element;
+declare function GradientRevealText({ text, duration, colors, baseOpacity, hoverOpacity, fontFamily, spotlightSize, strokeWidth: strokeWidthPx, baseColor, className }: GradientRevealTextProps): import("react").JSX.Element;
 //#endregion
 export { GradientRevealText, type GradientRevealTextProps };

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/hooks/use-mobile.d.ts

@@ -4,6 +4,5 @@
  *
  * @param breakpoint - Width in pixels. Defaults to 768.
  */
-declare function useIsMobile(breakpoint?: number): boolean;
-//#endregion
-export { useIsMobile };
+export declare function useIsMobile(breakpoint?: number): boolean;
+//#endregion

package/dist/infinite-scroll.d.ts

@@ -1,6 +1,4 @@
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import * as React from "react";
-
 //#region src/infinite-scroll.d.ts
 type InfiniteScrollProps = React.ComponentProps<"div"> & {
   onLoadMore: () => void;
@@ -13,19 +11,6 @@ type InfiniteScrollProps = React.ComponentProps<"div"> & {
   loader?: React.ReactNode;
   endMessage?: React.ReactNode;
 };
-declare function InfiniteScroll({
-  onLoadMore,
-  hasMore,
-  isLoading,
-  direction,
-  root,
-  rootMargin,
-  threshold,
-  loader,
-  endMessage,
-  className,
-  children,
-  ...props
-}: InfiniteScrollProps): _$react_jsx_runtime0.JSX.Element;
+declare function InfiniteScroll({ onLoadMore, hasMore, isLoading, direction, root, rootMargin, threshold, loader, endMessage, className, children, ...props }: InfiniteScrollProps): React.JSX.Element;
 //#endregion
 export { InfiniteScroll, type InfiniteScrollProps };

package/dist/input-group.d.ts

@@ -1,14 +1,11 @@
 import { Button } from "./button.js";
 import { Input } from "./input.js";
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import * as React from "react";
 import { VariantProps } from "class-variance-authority";
-import * as _$class_variance_authority_types0 from "class-variance-authority/types";
-
 //#region src/input-group.d.ts
 declare const inputGroupVariants: (props?: ({
-  size?: "default" | "sm" | "xs" | "lg" | null | undefined;
-} & _$class_variance_authority_types0.ClassProp) | undefined) => string;
+  size?: "default" | "lg" | "sm" | "xs" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type InputGroupProps = React.ComponentProps<"div"> & VariantProps<typeof inputGroupVariants>;
 type InputGroupAddonProps = React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>;
 type InputGroupButtonProps = Omit<React.ComponentProps<typeof Button>, "size" | "type"> & VariantProps<typeof inputGroupButtonVariants> & {
@@ -17,40 +14,17 @@ type InputGroupButtonProps = Omit<React.ComponentProps<typeof Button>, "size" |
 type InputGroupTextProps = React.ComponentProps<"span">;
 type InputGroupInputProps = React.ComponentProps<typeof Input>;
 type InputGroupTextareaProps = React.ComponentProps<"textarea">;
-declare function InputGroup({
-  className,
-  size,
-  ...props
-}: InputGroupProps): _$react_jsx_runtime0.JSX.Element;
+declare function InputGroup({ className, size, ...props }: InputGroupProps): React.JSX.Element;
 declare const inputGroupAddonVariants: (props?: ({
-  align?: "inline-start" | "inline-end" | "block-start" | "block-end" | null | undefined;
-} & _$class_variance_authority_types0.ClassProp) | undefined) => string;
-declare function InputGroupAddon({
-  className,
-  align,
-  ...props
-}: InputGroupAddonProps): _$react_jsx_runtime0.JSX.Element;
+  align?: "block-end" | "block-start" | "inline-end" | "inline-start" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function InputGroupAddon({ className, align, ...props }: InputGroupAddonProps): React.JSX.Element;
 declare const inputGroupButtonVariants: (props?: ({
   size?: "default" | "icon" | null | undefined;
-} & _$class_variance_authority_types0.ClassProp) | undefined) => string;
-declare function InputGroupButton({
-  className,
-  type,
-  variant,
-  size,
-  ...props
-}: InputGroupButtonProps): _$react_jsx_runtime0.JSX.Element;
-declare function InputGroupText({
-  className,
-  ...props
-}: InputGroupTextProps): _$react_jsx_runtime0.JSX.Element;
-declare function InputGroupInput({
-  className,
-  ...props
-}: InputGroupInputProps): _$react_jsx_runtime0.JSX.Element;
-declare function InputGroupTextarea({
-  className,
-  ...props
-}: InputGroupTextareaProps): _$react_jsx_runtime0.JSX.Element;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function InputGroupButton({ className, type, variant, size, ...props }: InputGroupButtonProps): React.JSX.Element;
+declare function InputGroupText({ className, ...props }: InputGroupTextProps): React.JSX.Element;
+declare function InputGroupInput({ className, ...props }: InputGroupInputProps): React.JSX.Element;
+declare function InputGroupTextarea({ className, ...props }: InputGroupTextareaProps): React.JSX.Element;
 //#endregion
 export { InputGroup, InputGroupAddon, type InputGroupAddonProps, InputGroupButton, type InputGroupButtonProps, InputGroupInput, type InputGroupInputProps, type InputGroupProps, InputGroupText, type InputGroupTextProps, InputGroupTextarea, type InputGroupTextareaProps, inputGroupAddonVariants, inputGroupButtonVariants, inputGroupVariants };

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

@@ -1,33 +1,17 @@
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import * as React from "react";
 import { OTPInput } from "input-otp";
-
 //#region src/input-otp.d.ts
 type InputOTPProps = React.ComponentProps<typeof OTPInput> & {
   containerClassName?: string;
 };
-declare function InputOTP({
-  className,
-  containerClassName,
-  ...props
-}: InputOTPProps): _$react_jsx_runtime0.JSX.Element;
 type InputOTPGroupProps = React.ComponentProps<"div">;
-declare function InputOTPGroup({
-  className,
-  ...props
-}: InputOTPGroupProps): _$react_jsx_runtime0.JSX.Element;
 type InputOTPSlotProps = React.ComponentProps<"div"> & {
   index: number;
 };
-declare function InputOTPSlot({
-  index,
-  className,
-  ...props
-}: InputOTPSlotProps): _$react_jsx_runtime0.JSX.Element;
 type InputOTPSeparatorProps = React.ComponentProps<"div">;
-declare function InputOTPSeparator({
-  className,
-  ...props
-}: InputOTPSeparatorProps): _$react_jsx_runtime0.JSX.Element;
+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 };