@waveso/ui 0.14.0 → 0.15.1

package/dist/drawer.d.ts

@@ -1,7 +1,5 @@
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import * as React from "react";
 import { Drawer as Drawer$1 } from "@base-ui/react/drawer";
-
 //#region src/drawer.d.ts
 type DrawerProps = React.ComponentProps<typeof Drawer$1.Root>;
 type DrawerTriggerProps = React.ComponentProps<typeof Drawer$1.Trigger>;
@@ -17,47 +15,16 @@ type DrawerFooterProps = React.ComponentProps<"div">;
 type DrawerContentProps = DrawerPopupProps & {
   showCloseButton?: boolean;
 };
-declare function Drawer({
-  ...props
-}: DrawerProps): _$react_jsx_runtime0.JSX.Element;
-declare function DrawerTrigger({
-  ...props
-}: DrawerTriggerProps): _$react_jsx_runtime0.JSX.Element;
-declare function DrawerPortal({
-  ...props
-}: DrawerPortalProps): _$react_jsx_runtime0.JSX.Element;
-declare function DrawerClose({
-  ...props
-}: DrawerCloseProps): _$react_jsx_runtime0.JSX.Element;
-declare function DrawerOverlay({
-  className,
-  ...props
-}: DrawerOverlayProps): _$react_jsx_runtime0.JSX.Element;
-declare function DrawerViewport({
-  className,
-  ...props
-}: DrawerViewportProps): _$react_jsx_runtime0.JSX.Element;
-declare function DrawerContent({
-  className,
-  children,
-  showCloseButton,
-  ...props
-}: DrawerContentProps): _$react_jsx_runtime0.JSX.Element;
-declare function DrawerHeader({
-  className,
-  ...props
-}: DrawerHeaderProps): _$react_jsx_runtime0.JSX.Element;
-declare function DrawerFooter({
-  className,
-  ...props
-}: DrawerFooterProps): _$react_jsx_runtime0.JSX.Element;
-declare function DrawerTitle({
-  className,
-  ...props
-}: DrawerTitleProps): _$react_jsx_runtime0.JSX.Element;
-declare function DrawerDescription({
-  className,
-  ...props
-}: DrawerDescriptionProps): _$react_jsx_runtime0.JSX.Element;
+declare function Drawer({ ...props }: DrawerProps): React.JSX.Element;
+declare function DrawerTrigger({ ...props }: DrawerTriggerProps): React.JSX.Element;
+declare function DrawerPortal({ ...props }: DrawerPortalProps): React.JSX.Element;
+declare function DrawerClose({ ...props }: DrawerCloseProps): React.JSX.Element;
+declare function DrawerOverlay({ className, ...props }: DrawerOverlayProps): React.JSX.Element;
+declare function DrawerViewport({ className, ...props }: DrawerViewportProps): React.JSX.Element;
+declare function DrawerContent({ className, children, showCloseButton, ...props }: DrawerContentProps): React.JSX.Element;
+declare function DrawerHeader({ className, ...props }: DrawerHeaderProps): React.JSX.Element;
+declare function DrawerFooter({ className, ...props }: DrawerFooterProps): React.JSX.Element;
+declare function DrawerTitle({ className, ...props }: DrawerTitleProps): React.JSX.Element;
+declare function DrawerDescription({ className, ...props }: DrawerDescriptionProps): React.JSX.Element;
 //#endregion
 export { Drawer, DrawerClose, type DrawerCloseProps, DrawerContent, type DrawerContentProps, DrawerDescription, type DrawerDescriptionProps, DrawerFooter, type DrawerFooterProps, DrawerHeader, type DrawerHeaderProps, DrawerOverlay, type DrawerOverlayProps, type DrawerPopupProps, DrawerPortal, type DrawerPortalProps, type DrawerProps, DrawerTitle, type DrawerTitleProps, DrawerTrigger, type DrawerTriggerProps, DrawerViewport, type DrawerViewportProps };

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;
@@ -12,17 +10,6 @@ type EncryptedTextProps = React.ComponentProps<"span"> & {
   scrambleOnly?: boolean;
   scrambleOneChar?: boolean;
 };
-declare function EncryptedText({
-  text,
-  className,
-  revealDelayMs,
-  charset,
-  flipDelayMs,
-  encryptedClassName,
-  revealedClassName,
-  scrambleOnly,
-  scrambleOneChar,
-  ...props
-}: EncryptedTextProps): _$react_jsx_runtime0.JSX.Element | null;
+declare function EncryptedText({ text, className, revealDelayMs, charset, flipDelayMs, encryptedClassName, revealedClassName, scrambleOnly, scrambleOneChar, ...props }: EncryptedTextProps): React.JSX.Element | null;
 //#endregion
 export { EncryptedText, type EncryptedTextProps };

package/dist/encrypted-text.js

@@ -40,7 +40,8 @@ function EncryptedText({ text, className, revealDelayMs = 50, charset = DEFAULT_
 	React.useEffect(() => {
 		if (prefersReducedMotion) return;
 		if (!isInView) return;
-		scrambleCharsRef.current = (text ? scramblePreservingSpaces(text, charset) : "").split("");
+		const initial = text ? scramblePreservingSpaces(text, charset) : "";
+		scrambleCharsRef.current = initial.split("");
 		startTimeRef.current = performance.now();
 		lastFlipTimeRef.current = startTimeRef.current;
 		setRevealCount(0);

package/dist/field.d.ts

@@ -1,8 +1,5 @@
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import * as React from "react";
 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>;
 type FieldLabelProps = React.ComponentProps<typeof FieldPrimitive.Label>;
@@ -11,30 +8,12 @@ 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>;
+declare function Field({ className, ...props }: FieldProps): React.JSX.Element;
+declare function FieldLabel({ className, ...props }: FieldLabelProps): React.JSX.Element;
+declare function FieldControl({ className, ...props }: FieldControlProps): 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 };

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 };

package/dist/form.d.ts

@@ -1,9 +1,6 @@
 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>;
@@ -13,11 +10,7 @@ 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;
+declare function Form<TFieldValues extends FieldValues>({ form, onSubmit, ...props }: FormProps<TFieldValues>): React.JSX.Element;
 /**
  * Plain `<form>` element with RHF integration.
  *
@@ -27,10 +20,7 @@ declare function Form<TFieldValues extends FieldValues>({
  * 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;
+declare function FormRoot({ className, ...props }: FormRootProps): React.JSX.Element;
 type FormFieldRenderArgs<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> = {
   id: string;
   field: ControllerRenderProps<TFieldValues, TName>;
@@ -59,19 +49,10 @@ type FormFieldProps<TFieldValues extends FieldValues, TName extends FieldPath<TF
  * 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/gradient-reveal-text.d.ts

@@ -1,5 +1,3 @@
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
-
 //#region src/gradient-reveal-text.d.ts
 interface GradientRevealTextProps {
   /** The text to display */
@@ -35,17 +33,6 @@ interface GradientRevealTextProps {
  * <GradientRevealText text="BRAND" colors={["#ff0000", "#00ff00"]} />
  * ```
  */
-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/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,12 +1,12 @@
 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
-type InputGroupProps = React.ComponentProps<"div">;
+declare const inputGroupVariants: (props?: ({
+  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> & {
   type?: "button" | "submit" | "reset";
@@ -14,39 +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,
-  ...props
-}: InputGroupProps): _$react_jsx_runtime0.JSX.Element;
+declare function InputGroup({ className, size, ...props }: InputGroupProps): React.JSX.Element;
 declare const inputGroupAddonVariants: (props?: ({
-  align?: "inline-end" | "inline-start" | "block-end" | "block-start" | 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?: "sm" | "xs" | "icon-xs" | "icon-sm" | 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;
+  size?: "default" | "icon" | null | undefined;
+} & 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 };
+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,20 +6,30 @@ import { Textarea } from "./textarea.js";
 import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 //#region src/input-group.tsx
-function InputGroup({ className, ...props }) {
+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", {
+	variants: { size: {
+		xs: "h-6 rounded-sm",
+		sm: "h-8",
+		default: "h-9",
+		lg: "h-11"
+	} },
+	defaultVariants: { size: "default" }
+});
+function InputGroup({ className, size = "default", ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "input-group",
+		"data-size": size,
 		role: "group",
-		className: cn("border-edge dark:bg-edge/30 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 has-disabled:bg-edge/50 dark:has-disabled:bg-edge/80 group/input-group relative flex h-8 w-full min-w-0 items-center rounded-md border transition-colors 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:cursor-not-allowed has-disabled:opacity-50 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 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5", className),
+		className: cn(inputGroupVariants({ size }), className),
 		...props
 	});
 }
-const inputGroupAddonVariants = cva("text-muted h-auto gap-2 py-1.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-sm [&>svg:not([class*='size-'])]:size-4 flex cursor-text items-center justify-center select-none", {
+const inputGroupAddonVariants = cva("text-muted h-auto gap-2 has-[>button]:gap-[3px] py-2 not-has-[>button]:group-data-[size=xs]/input-group:py-1 not-has-[>button]:group-data-[size=sm]/input-group:py-1.5 not-has-[>button]:group-data-[size=lg]/input-group:py-2.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>svg:not([class*='size-'])]:size-4 flex cursor-text items-center justify-center select-none", {
 	variants: { align: {
-		"inline-start": "pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem] order-first",
-		"inline-end": "pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem] order-last",
-		"block-start": "px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2 order-first w-full justify-start",
-		"block-end": "px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2 order-last w-full justify-start"
+		"inline-start": "order-first ps-3 not-has-[>button]:group-data-[size=xs]/input-group:ps-2 not-has-[>button]:group-data-[size=sm]/input-group:ps-3 not-has-[>button]:group-data-[size=lg]/input-group:ps-4 has-[>kbd]:-ms-1 has-[>button]:self-stretch has-[>button]:py-[3px] has-[>button]:ps-[3px] [&>button]:h-full",
+		"inline-end": "order-last pe-3 not-has-[>button]:group-data-[size=xs]/input-group:pe-2 not-has-[>button]:group-data-[size=sm]/input-group:pe-3 not-has-[>button]:group-data-[size=lg]/input-group:pe-4 has-[>kbd]:-me-1 has-[>button]:self-stretch has-[>button]:py-[3px] has-[>button]:pe-[3px] [&>button]:h-full",
+		"block-start": "order-first w-full justify-start px-3 group-data-[size=xs]/input-group:px-2 group-data-[size=sm]/input-group:px-3 group-data-[size=lg]/input-group:px-4 pt-3 group-has-[>input]/input-group:pt-3.5 [.border-b]:pb-3.5",
+		"block-end": "order-last w-full justify-start px-3 group-data-[size=xs]/input-group:px-2 group-data-[size=sm]/input-group:px-3 group-data-[size=lg]/input-group:px-4 pb-3 group-has-[>input]/input-group:pb-3.5 [.border-t]:pt-3.5"
 	} },
 	defaultVariants: { align: "inline-start" }
 });
@@ -36,16 +46,14 @@ function InputGroupAddon({ className, align = "inline-start", ...props }) {
 		...props
 	});
 }
-const inputGroupButtonVariants = cva("gap-2 text-sm shadow-none flex items-center", {
+const inputGroupButtonVariants = cva("shadow-none flex items-center gap-1.5 rounded-md text-sm [&>svg:not([class*='size-'])]:size-4 group-data-[size=xs]/input-group:gap-1 group-data-[size=xs]/input-group:rounded-sm group-data-[size=xs]/input-group:text-xs group-data-[size=xs]/input-group:[&>svg:not([class*='size-'])]:size-3.5", {
 	variants: { size: {
-		xs: "h-6 gap-1 rounded-sm px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
-		sm: "h-7 gap-1.5 rounded-sm px-2 [&>svg:not([class*='size-'])]:size-4",
-		"icon-xs": "size-6 rounded-sm p-0",
-		"icon-sm": "size-8 p-0"
+		default: "h-7 px-2 group-data-[size=xs]/input-group:px-1.5 group-data-[size=lg]/input-group:px-2.5",
+		icon: "h-6 aspect-square p-0"
 	} },
-	defaultVariants: { size: "xs" }
+	defaultVariants: { size: "default" }
 });
-function InputGroupButton({ className, type = "button", variant = "ghost", size = "xs", ...props }) {
+function InputGroupButton({ className, type = "button", variant = "default", size = "default", ...props }) {
 	return /* @__PURE__ */ jsx(Button, {
 		type,
 		"data-size": size,
@@ -64,16 +72,16 @@ function InputGroupText({ className, ...props }) {
 function InputGroupInput({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Input, {
 		"data-slot": "input-group-control",
-		className: cn("flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent", className),
+		className: cn("h-full flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 group-data-[size=xs]/input-group:px-2 group-data-[size=xs]/input-group:text-xs group-data-[size=sm]/input-group:px-3 group-data-[size=sm]/input-group:text-sm group-data-[size=lg]/input-group:px-4 group-data-[size=lg]/input-group:text-lg", className),
 		...props
 	});
 }
 function InputGroupTextarea({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Textarea, {
 		"data-slot": "input-group-control",
-		className: cn("flex-1 resize-none rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent", className),
+		className: cn("flex-1 rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0", className),
 		...props
 	});
 }
 //#endregion
-export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, inputGroupAddonVariants, inputGroupButtonVariants };
+export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, inputGroupAddonVariants, inputGroupButtonVariants, inputGroupVariants };

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;
+declare function InputOTP({ className, containerClassName, ...props }: InputOTPProps): React.JSX.Element;
 type InputOTPGroupProps = React.ComponentProps<"div">;
-declare function InputOTPGroup({
-  className,
-  ...props
-}: InputOTPGroupProps): _$react_jsx_runtime0.JSX.Element;
+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_runtime0.JSX.Element;
+declare function InputOTPSlot({ index, className, ...props }: InputOTPSlotProps): React.JSX.Element;
 type InputOTPSeparatorProps = React.ComponentProps<"div">;
-declare function InputOTPSeparator({
-  className,
-  ...props
-}: InputOTPSeparatorProps): _$react_jsx_runtime0.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.d.ts

@@ -1,19 +1,11 @@
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import * as React from "react";
 import { VariantProps } from "class-variance-authority";
 import { Input as Input$1 } from "@base-ui/react/input";
-import * as _$class_variance_authority_types0 from "class-variance-authority/types";
-
 //#region src/input.d.ts
 declare const inputVariants: (props?: ({
-  size?: "default" | "sm" | "lg" | "xs" | 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 InputProps = Omit<React.ComponentProps<typeof Input$1>, "size"> & VariantProps<typeof inputVariants>;
-declare function Input({
-  className,
-  type,
-  size,
-  ...props
-}: InputProps): _$react_jsx_runtime0.JSX.Element;
+declare function Input({ className, type, size, ...props }: InputProps): React.JSX.Element;
 //#endregion
 export { Input, type InputProps, inputVariants };

package/dist/input.js

@@ -3,12 +3,12 @@ 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("dark:bg-edge/30 hover:bg-edge/50 dark:hover:bg-edge/50 border-edge focus-visible:border-focus focus-visible:ring-focus/50 aria-invalid:ring-destructive/30 aria-invalid:border-destructive disabled:bg-edge/50 dark:disabled:bg-edge/80 placeholder:text-soft flex w-full min-w-0 items-center overflow-hidden rounded-md border bg-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-50 aria-invalid:ring-3", {
+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", {
 	variants: { size: {
 		xs: "h-6 rounded-sm px-2 text-xs file:-ms-[5px] file:h-4",
-		sm: "h-8 px-2.5 text-base file:-ms-[7px] file:h-6 md:text-sm",
-		default: "h-9 px-3 text-base file:-ms-[9px] file:h-7 md:text-sm",
-		lg: "h-10 px-3.5 text-base file:-ms-[11px] file:h-8"
+		sm: "h-8 px-3 text-sm file:-ms-[9px] file:h-6",
+		default: "h-9 px-3 text-base file:-ms-[9px] file:h-7",
+		lg: "h-11 px-4 text-lg file:-ms-[13px] file:h-9"
 	} },
 	defaultVariants: { size: "default" }
 });