@waveso/ui 0.15.0 → 0.16.0

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.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" | "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 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,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

@@ -1,18 +1,15 @@
 import { Separator } from "./separator.js";
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import * as React from "react";
 import { VariantProps } from "class-variance-authority";
 import { useRender } from "@base-ui/react/use-render";
-import * as _$class_variance_authority_types0 from "class-variance-authority/types";
-
 //#region src/item.d.ts
 declare const itemVariants: (props?: ({
-  variant?: "default" | "outline" | "muted" | null | undefined;
+  variant?: "default" | "muted" | "outline" | null | undefined;
   size?: "default" | "sm" | "xs" | null | undefined;
-} & _$class_variance_authority_types0.ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare const itemMediaVariants: (props?: ({
-  variant?: "default" | "image" | "icon" | null | undefined;
-} & _$class_variance_authority_types0.ClassProp) | undefined) => string;
+  variant?: "default" | "icon" | "image" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type ItemGroupProps = React.ComponentProps<"div">;
 type ItemSeparatorProps = React.ComponentProps<typeof Separator>;
 type ItemProps = useRender.ComponentProps<"div"> & VariantProps<typeof itemVariants>;
@@ -23,49 +20,15 @@ type ItemDescriptionProps = React.ComponentProps<"p">;
 type ItemActionsProps = React.ComponentProps<"div">;
 type ItemHeaderProps = React.ComponentProps<"div">;
 type ItemFooterProps = React.ComponentProps<"div">;
-declare function ItemGroup({
-  className,
-  ...props
-}: ItemGroupProps): _$react_jsx_runtime0.JSX.Element;
-declare function ItemSeparator({
-  className,
-  ...props
-}: ItemSeparatorProps): _$react_jsx_runtime0.JSX.Element;
-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_runtime0.JSX.Element;
-declare function ItemContent({
-  className,
-  ...props
-}: ItemContentProps): _$react_jsx_runtime0.JSX.Element;
-declare function ItemTitle({
-  className,
-  ...props
-}: ItemTitleProps): _$react_jsx_runtime0.JSX.Element;
-declare function ItemDescription({
-  className,
-  ...props
-}: ItemDescriptionProps): _$react_jsx_runtime0.JSX.Element;
-declare function ItemActions({
-  className,
-  ...props
-}: ItemActionsProps): _$react_jsx_runtime0.JSX.Element;
-declare function ItemHeader({
-  className,
-  ...props
-}: ItemHeaderProps): _$react_jsx_runtime0.JSX.Element;
-declare function ItemFooter({
-  className,
-  ...props
-}: ItemFooterProps): _$react_jsx_runtime0.JSX.Element;
+declare function ItemGroup({ className, ...props }: ItemGroupProps): React.JSX.Element;
+declare function ItemSeparator({ className, ...props }: ItemSeparatorProps): React.JSX.Element;
+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, 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;
+declare function ItemFooter({ className, ...props }: ItemFooterProps): React.JSX.Element;
 //#endregion
 export { Item, ItemActions, type ItemActionsProps, ItemContent, type ItemContentProps, ItemDescription, type ItemDescriptionProps, ItemFooter, type ItemFooterProps, ItemGroup, type ItemGroupProps, ItemHeader, type ItemHeaderProps, ItemMedia, type ItemMediaProps, type ItemProps, ItemSeparator, type ItemSeparatorProps, ItemTitle, type ItemTitleProps, itemMediaVariants, itemVariants };

package/dist/item.js

@@ -2,21 +2,22 @@
 import { cn } from "./lib/utils.js";
 import { Separator } from "./separator.js";
 import { jsx } from "react/jsx-runtime";
+import * as React from "react";
 import { cva } from "class-variance-authority";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
 //#region src/item.tsx
-const itemVariants = cva("[a]:hover:bg-secondary rounded-md border text-sm w-full group/item focus-visible:border-focus focus-visible:ring-focus/50 flex items-center flex-wrap outline-hidden motion-color focus-visible:ring-3", {
+const itemVariants = cva("[a,button]:hover:bg-highlight [a,button]:cursor-clickable rounded-md border text-sm w-full group/item focus-visible:border-focus focus-visible:ring-focus/50 flex items-center flex-wrap outline-hidden motion-color focus-visible:ring-3 disabled:pointer-events-none disabled:opacity-30 aria-disabled:pointer-events-none aria-disabled:opacity-30", {
 	variants: {
 		variant: {
 			default: "border-transparent",
-			outline: "border-line",
-			muted: "bg-secondary/50 border-transparent"
+			outline: "border-contour",
+			muted: "bg-secondary/50 border-transparent [a,button]:hover:bg-secondary"
 		},
 		size: {
-			default: "gap-2.5 px-3 py-2.5",
-			sm: "gap-2 px-3 py-2",
-			xs: "gap-2 px-2.5 py-2 in-data-[slot=menu-content]:p-0"
+			default: "gap-3.5 px-4 py-3.5",
+			sm: "gap-3.5 px-3.5 py-3",
+			xs: "gap-2.5 px-3 py-2.5 in-data-[slot=menu-content]:p-0"
 		}
 	},
 	defaultVariants: {
@@ -77,21 +78,26 @@ function ItemMedia({ className, variant = "default", ...props }) {
 function ItemContent({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "item-content",
-		className: cn("flex flex-1 flex-col gap-1 group-data-[size=xs]/item:gap-0 [&+[data-slot=item-content]]:flex-none", className),
+		className: cn("flex min-w-0 flex-1 flex-col gap-1 group-data-[size=xs]/item:gap-0.5 [&+[data-slot=item-content]]:flex-none", className),
 		...props
 	});
 }
-function ItemTitle({ className, ...props }) {
+function ItemTitle({ className, children, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "item-title",
-		className: cn("line-clamp-1 flex w-fit items-center gap-2 text-sm leading-snug font-medium underline-offset-4", className),
-		...props
+		className: cn("line-clamp-1 flex w-fit max-w-full min-w-0 items-center gap-2 text-sm leading-snug font-medium underline-offset-4 [&>:not([data-slot=item-title-text])]:shrink-0", className),
+		...props,
+		children: React.Children.map(children, (child) => typeof child === "string" || typeof child === "number" ? /* @__PURE__ */ jsx("span", {
+			"data-slot": "item-title-text",
+			className: "truncate",
+			children: child
+		}) : child)
 	});
 }
 function ItemDescription({ className, ...props }) {
 	return /* @__PURE__ */ jsx("p", {
 		"data-slot": "item-description",
-		className: cn("text-muted [&>a:hover]:text-primary line-clamp-2 text-left text-sm leading-normal font-normal group-data-[size=xs]/item:text-xs [&>a]:underline [&>a]:underline-offset-4", className),
+		className: cn("text-muted [&>a:hover]:text-primary line-clamp-2 text-start text-sm leading-normal font-normal group-data-[size=xs]/item:text-xs [&>a]:underline [&>a]:underline-offset-4", className),
 		...props
 	});
 }

package/dist/kbd.d.ts

@@ -1,16 +1,8 @@
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import * as React from "react";
-
 //#region src/kbd.d.ts
 type KbdProps = React.ComponentProps<"kbd">;
-type KbdGroupProps = React.ComponentProps<"div">;
-declare function Kbd({
-  className,
-  ...props
-}: KbdProps): _$react_jsx_runtime0.JSX.Element;
-declare function KbdGroup({
-  className,
-  ...props
-}: KbdGroupProps): _$react_jsx_runtime0.JSX.Element;
+type KbdGroupProps = React.ComponentProps<"kbd">;
+declare function Kbd({ className, ...props }: KbdProps): React.JSX.Element;
+declare function KbdGroup({ className, ...props }: KbdGroupProps): React.JSX.Element;
 //#endregion
 export { Kbd, KbdGroup, type KbdGroupProps, type KbdProps };

package/dist/kbd.js

@@ -4,12 +4,12 @@ import { jsx } from "react/jsx-runtime";
 function Kbd({ className, ...props }) {
 	return /* @__PURE__ */ jsx("kbd", {
 		"data-slot": "kbd",
-		className: cn("bg-secondary text-muted in-data-[slot=tooltip-content]:bg-foundation/20 in-data-[slot=tooltip-content]:text-foundation dark:in-data-[slot=tooltip-content]:bg-foundation/10 pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium select-none [&_svg:not([class*='size-'])]:size-3", className),
+		className: cn("bg-secondary text-contrast in-data-[slot=tooltip-content]:bg-contrast-inverse/10 in-data-[slot=tooltip-content]:text-contrast-inverse pointer-events-none inline-flex h-5.5 w-fit min-w-5.5 items-center justify-center gap-1 rounded-sm px-1.5 font-sans text-xs font-medium select-none [&_svg:not([class*='size-'])]:size-3 in-data-[slot=input-group]:bg-contrast-inverse/50", className),
 		...props
 	});
 }
 function KbdGroup({ className, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
+	return /* @__PURE__ */ jsx("kbd", {
 		"data-slot": "kbd-group",
 		className: cn("inline-flex items-center gap-1", className),
 		...props

package/dist/label.d.ts

@@ -1,11 +1,6 @@
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import * as React from "react";
-
 //#region src/label.d.ts
 type LabelProps = React.ComponentProps<"label">;
-declare function Label({
-  className,
-  ...props
-}: LabelProps): _$react_jsx_runtime0.JSX.Element;
+declare function Label({ className, ...props }: LabelProps): React.JSX.Element;
 //#endregion
 export { Label, type LabelProps };

package/dist/label.js

@@ -4,7 +4,7 @@ import { jsx } from "react/jsx-runtime";
 function Label({ className, ...props }) {
 	return /* @__PURE__ */ jsx("label", {
 		"data-slot": "label",
-		className: cn("flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled]:pointer-events-none group-data-[disabled]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50", className),
+		className: cn("flex items-center gap-2 text-sm leading-snug font-medium select-none [&[for]]:cursor-clickable", "in-data-disabled:pointer-events-none in-data-disabled:opacity-30", "peer-data-disabled:pointer-events-none peer-data-disabled:opacity-30", "has-[+:is(:disabled,[data-disabled])]:pointer-events-none has-[+:is(:disabled,[data-disabled])]:opacity-30", className),
 		...props
 	});
 }

package/dist/lib/focus.d.ts

@@ -1,6 +1,5 @@
 import * as React from "react";
 import { Menu } from "@base-ui/react/menu";
-
 //#region src/lib/focus.d.ts
 /**
  * The full shape Base UI's `finalFocus` prop accepts on the
@@ -25,7 +24,7 @@ type FinalFocus = NonNullable<React.ComponentProps<typeof Menu.Popup>["finalFocu
  *   expected focus return.
  * - `"never"` — never auto-restore focus on close.
  */
-type RestoreFocusOnClose = "always" | "keyboard" | "never";
+export type RestoreFocusOnClose = "always" | "keyboard" | "never";
 /**
  * Resolve the high-level {@link RestoreFocusOnClose} policy to the
  * Base UI `finalFocus` value.
@@ -36,6 +35,5 @@ type RestoreFocusOnClose = "always" | "keyboard" | "never";
  * other — when `restoreFocusOnClose` is set it fully governs
  * `finalFocus`.
  */
-declare function resolveFinalFocus(restoreFocusOnClose: RestoreFocusOnClose | undefined, finalFocus: FinalFocus | undefined): FinalFocus | undefined;
-//#endregion
-export { RestoreFocusOnClose, resolveFinalFocus };
+export declare function resolveFinalFocus(restoreFocusOnClose: RestoreFocusOnClose | undefined, finalFocus: FinalFocus | undefined): FinalFocus | undefined;
+//#endregion

package/dist/lib/internal-icons.d.ts

@@ -1,25 +1,22 @@
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import * as React from "react";
-
 //#region src/lib/internal-icons.d.ts
 type IconProps = React.SVGProps<SVGSVGElement>;
-declare function ChevronDownIcon(props: IconProps): _$react_jsx_runtime0.JSX.Element;
-declare function ChevronUpIcon(props: IconProps): _$react_jsx_runtime0.JSX.Element;
-declare function ChevronLeftIcon(props: IconProps): _$react_jsx_runtime0.JSX.Element;
-declare function ChevronRightIcon(props: IconProps): _$react_jsx_runtime0.JSX.Element;
-declare function CheckIcon(props: IconProps): _$react_jsx_runtime0.JSX.Element;
-declare function CloseIcon(props: IconProps): _$react_jsx_runtime0.JSX.Element;
-declare function MinusIcon(props: IconProps): _$react_jsx_runtime0.JSX.Element;
-declare function EllipsisIcon(props: IconProps): _$react_jsx_runtime0.JSX.Element;
-declare function EllipsisVerticalIcon(props: IconProps): _$react_jsx_runtime0.JSX.Element;
-declare function ChevronsUpDownIcon(props: IconProps): _$react_jsx_runtime0.JSX.Element;
-declare function SidebarPanelIcon(props: IconProps): _$react_jsx_runtime0.JSX.Element;
-declare function LoaderIcon(props: IconProps): _$react_jsx_runtime0.JSX.Element;
-declare function AlertTriangleIcon(props: IconProps): _$react_jsx_runtime0.JSX.Element;
-declare function SuccessCircleIcon(props: IconProps): _$react_jsx_runtime0.JSX.Element;
-declare function InfoCircleIcon(props: IconProps): _$react_jsx_runtime0.JSX.Element;
-declare function ErrorCircleIcon(props: IconProps): _$react_jsx_runtime0.JSX.Element;
-declare function TrashIcon(props: IconProps): _$react_jsx_runtime0.JSX.Element;
-declare function StarIcon(props: IconProps): _$react_jsx_runtime0.JSX.Element;
-//#endregion
-export { AlertTriangleIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsUpDownIcon, CloseIcon, EllipsisIcon, EllipsisVerticalIcon, ErrorCircleIcon, InfoCircleIcon, LoaderIcon, MinusIcon, SidebarPanelIcon, StarIcon, SuccessCircleIcon, TrashIcon };
+export declare function ChevronDownIcon(props: IconProps): React.JSX.Element;
+export declare function ChevronUpIcon(props: IconProps): React.JSX.Element;
+export declare function ChevronLeftIcon(props: IconProps): React.JSX.Element;
+export declare function ChevronRightIcon(props: IconProps): React.JSX.Element;
+export declare function CheckIcon(props: IconProps): React.JSX.Element;
+export declare function CloseIcon(props: IconProps): React.JSX.Element;
+export declare function MinusIcon(props: IconProps): React.JSX.Element;
+export declare function EllipsisIcon(props: IconProps): React.JSX.Element;
+export declare function EllipsisVerticalIcon(props: IconProps): React.JSX.Element;
+export declare function ChevronsUpDownIcon(props: IconProps): React.JSX.Element;
+export declare function SidebarPanelIcon(props: IconProps): React.JSX.Element;
+export declare function LoaderIcon(props: IconProps): React.JSX.Element;
+export declare function AlertTriangleIcon(props: IconProps): React.JSX.Element;
+export declare function SuccessCircleIcon(props: IconProps): React.JSX.Element;
+export declare function InfoCircleIcon(props: IconProps): React.JSX.Element;
+export declare function ErrorCircleIcon(props: IconProps): React.JSX.Element;
+export declare function TrashIcon(props: IconProps): React.JSX.Element;
+export declare function StarIcon(props: IconProps): React.JSX.Element;
+//#endregion

package/dist/lib/merge-refs.d.ts

@@ -0,0 +1,9 @@
+import * as React from "react";
+//#region src/lib/merge-refs.d.ts
+/**
+ * Combines refs so one element can feed several of them: a component's own
+ * ref and the one a consumer passes. Takes object refs, callback refs and
+ * `undefined`.
+ */
+export declare function mergeRefs<T>(...refs: (React.Ref<T> | undefined)[]): (el: T | null) => void;
+//#endregion

package/dist/lib/merge-refs.js

@@ -0,0 +1,16 @@
+//#region src/lib/merge-refs.ts
+/**
+* Combines refs so one element can feed several of them: a component's own
+* ref and the one a consumer passes. Takes object refs, callback refs and
+* `undefined`.
+*/
+function mergeRefs(...refs) {
+	return (el) => {
+		refs.forEach((ref) => {
+			if (typeof ref === "function") ref(el);
+			else if (ref && typeof ref === "object") ref.current = el;
+		});
+	};
+}
+//#endregion
+export { mergeRefs };

package/dist/lib/utils.d.ts

@@ -1,5 +1,4 @@
 import { ClassValue } from "clsx";
-
 //#region src/lib/utils.d.ts
 /**
  * `cn()` is the single className helper.
@@ -35,7 +34,6 @@ import { ClassValue } from "clsx";
  * ```
  */
 type CnValue<State> = ClassValue | ((state: State) => ClassValue);
-declare function cn(...inputs: ClassValue[]): string;
-declare function cn<State>(...inputs: CnValue<State>[]): (state: State) => string;
-//#endregion
-export { cn };
+export declare function cn(...inputs: ClassValue[]): string;
+export declare function cn<State>(...inputs: CnValue<State>[]): (state: State) => string;
+//#endregion

package/dist/lib/utils.js

@@ -8,6 +8,8 @@ import { extendTailwindMerge } from "tailwind-merge";
 *   exclusive — the last one applied wins (e.g. a consumer overriding a
 *   component's default animation). `motion-color` / `motion-scrim` are left out
 *   on purpose: they compose with an enter recipe on the same element.
+* - the spin speeds (`motion-spin-*`) are mutually exclusive too, so a
+*   consumer's `motion-spin-lg` replaces a component's `motion-spin-sm`.
 * - `cursor-clickable` joins the built-in `cursor` group.
 */
 const twMerge = extendTailwindMerge({ extend: { classGroups: {
@@ -23,12 +25,18 @@ const twMerge = extendTailwindMerge({ extend: { classGroups: {
 		"motion-fade-lg",
 		"motion-pop-md"
 	],
+	"motion-spin": [
+		"motion-spin-sm",
+		"motion-spin-md",
+		"motion-spin-lg"
+	],
 	cursor: ["cursor-clickable"]
 } } });
 function cn(...inputs) {
 	if (!inputs.some((v) => typeof v === "function")) return twMerge(clsx(inputs));
 	return (state) => {
-		return twMerge(clsx(inputs.map((v) => typeof v === "function" ? v(state) : v)));
+		const resolved = inputs.map((v) => typeof v === "function" ? v(state) : v);
+		return twMerge(clsx(resolved));
 	};
 }
 //#endregion

package/dist/masonry.d.ts

@@ -1,7 +1,5 @@
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import * as React from "react";
 import { HTMLMotionProps } from "motion/react";
-
 //#region src/masonry.d.ts
 type MasonryProps = React.ComponentProps<"div"> & {
   columns?: number;
@@ -12,19 +10,7 @@ type MasonryItemProps = Omit<HTMLMotionProps<"div">, "children"> & {
   span?: number;
   children?: React.ReactNode;
 };
-declare function Masonry({
-  columns,
-  columnWidth,
-  gap,
-  className,
-  children,
-  ...props
-}: MasonryProps): _$react_jsx_runtime0.JSX.Element;
-declare function MasonryItem({
-  className,
-  span,
-  children,
-  ...props
-}: MasonryItemProps): _$react_jsx_runtime0.JSX.Element;
+declare function Masonry({ columns, columnWidth, gap, className, children, ref, ...props }: MasonryProps): React.JSX.Element;
+declare function MasonryItem({ className, span, children, ...props }: MasonryItemProps): React.JSX.Element;
 //#endregion
 export { Masonry, MasonryItem, type MasonryItemProps, type MasonryProps };

package/dist/masonry.js

@@ -1,14 +1,16 @@
 "use client";
 import { cn } from "./lib/utils.js";
 import { StarIcon } from "./lib/internal-icons.js";
+import { mergeRefs } from "./lib/merge-refs.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { AnimatePresence, motion, useReducedMotion } from "motion/react";
 //#region src/masonry.tsx
 const STAGGER_STEP = .05;
 const MasonryStaggerContext = React.createContext(null);
-function Masonry({ columns, columnWidth, gap = 4, className, children, ...props }) {
+function Masonry({ columns, columnWidth, gap = 4, className, children, ref, ...props }) {
 	const containerRef = React.useRef(null);
+	const mergedRef = React.useMemo(() => mergeRefs(containerRef, ref), [ref]);
 	const rafRef = React.useRef(0);
 	const staggerCounterRef = React.useRef(0);
 	staggerCounterRef.current = 0;
@@ -47,7 +49,7 @@ function Masonry({ columns, columnWidth, gap = 4, className, children, ...props
 			container.style.removeProperty("flex-direction");
 			container.style.removeProperty("gap");
 			const colWidth = (containerWidth - (colCount - 1) * gapPx) / colCount;
-			const columnBottoms = new Array(colCount).fill(0);
+			const columnBottoms = Array.from({ length: colCount }, () => 0);
 			const topItems = [];
 			const regularItems = [];
 			for (const item of items) {
@@ -134,7 +136,7 @@ function Masonry({ columns, columnWidth, gap = 4, className, children, ...props
 	return /* @__PURE__ */ jsx(MasonryStaggerContext.Provider, {
 		value: getStaggerIndex,
 		children: /* @__PURE__ */ jsx("div", {
-			ref: containerRef,
+			ref: mergedRef,
 			"data-slot": "masonry",
 			className: cn("relative", className),
 			...props,

package/dist/menu.d.ts

@@ -1,8 +1,6 @@
 import { RestoreFocusOnClose } from "./lib/focus.js";
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import * as React from "react";
 import { Menu as Menu$1 } from "@base-ui/react/menu";
-
 //#region src/menu.d.ts
 type MenuProps = React.ComponentProps<typeof Menu$1.Root>;
 type MenuPortalProps = React.ComponentProps<typeof Menu$1.Portal>;
@@ -22,7 +20,8 @@ type MenuLabelProps = React.ComponentProps<typeof Menu$1.GroupLabel> & {
 };
 type MenuItemProps = React.ComponentProps<typeof Menu$1.Item> & {
   inset?: boolean;
-  variant?: "default" | "destructive";
+  /** `danger` turns the item's text and leading icon red. */
+  variant?: "default" | "danger";
 };
 type MenuSubProps = React.ComponentProps<typeof Menu$1.SubmenuRoot>;
 type MenuSubTriggerProps = React.ComponentProps<typeof Menu$1.SubmenuTrigger> & {
@@ -38,67 +37,20 @@ type MenuRadioItemProps = React.ComponentProps<typeof Menu$1.RadioItem> & {
 };
 type MenuSeparatorProps = React.ComponentProps<typeof Menu$1.Separator>;
 type MenuShortcutProps = React.ComponentProps<"span">;
-declare function Menu(props: MenuProps): _$react_jsx_runtime0.JSX.Element;
-declare function MenuPortal(props: MenuPortalProps): _$react_jsx_runtime0.JSX.Element;
-declare function MenuTrigger(props: MenuTriggerProps): _$react_jsx_runtime0.JSX.Element;
-declare function MenuContent({
-  align,
-  alignOffset,
-  side,
-  sideOffset,
-  className,
-  restoreFocusOnClose,
-  finalFocus,
-  ...props
-}: MenuContentProps): _$react_jsx_runtime0.JSX.Element;
-declare function MenuGroup(props: MenuGroupProps): _$react_jsx_runtime0.JSX.Element;
-declare function MenuLabel({
-  className,
-  inset,
-  ...props
-}: MenuLabelProps): _$react_jsx_runtime0.JSX.Element;
-declare function MenuItem({
-  className,
-  inset,
-  variant,
-  ...props
-}: MenuItemProps): _$react_jsx_runtime0.JSX.Element;
-declare function MenuSub(props: MenuSubProps): _$react_jsx_runtime0.JSX.Element;
-declare function MenuSubTrigger({
-  className,
-  inset,
-  children,
-  ...props
-}: MenuSubTriggerProps): _$react_jsx_runtime0.JSX.Element;
-declare function MenuSubContent({
-  align,
-  alignOffset,
-  side,
-  sideOffset,
-  className,
-  ...props
-}: MenuSubContentProps): _$react_jsx_runtime0.JSX.Element;
-declare function MenuCheckboxItem({
-  className,
-  children,
-  checked,
-  inset,
-  ...props
-}: MenuCheckboxItemProps): _$react_jsx_runtime0.JSX.Element;
-declare function MenuRadioGroup(props: MenuRadioGroupProps): _$react_jsx_runtime0.JSX.Element;
-declare function MenuRadioItem({
-  className,
-  children,
-  inset,
-  ...props
-}: MenuRadioItemProps): _$react_jsx_runtime0.JSX.Element;
-declare function MenuSeparator({
-  className,
-  ...props
-}: MenuSeparatorProps): _$react_jsx_runtime0.JSX.Element;
-declare function MenuShortcut({
-  className,
-  ...props
-}: MenuShortcutProps): _$react_jsx_runtime0.JSX.Element;
+declare function Menu(props: MenuProps): React.JSX.Element;
+declare function MenuPortal(props: MenuPortalProps): React.JSX.Element;
+declare function MenuTrigger(props: MenuTriggerProps): React.JSX.Element;
+declare function MenuContent({ align, alignOffset, side, sideOffset, className, restoreFocusOnClose, finalFocus, ...props }: MenuContentProps): React.JSX.Element;
+declare function MenuGroup(props: MenuGroupProps): React.JSX.Element;
+declare function MenuLabel({ className, inset, ...props }: MenuLabelProps): React.JSX.Element;
+declare function MenuItem({ className, inset, variant, ...props }: MenuItemProps): React.JSX.Element;
+declare function MenuSub(props: MenuSubProps): React.JSX.Element;
+declare function MenuSubTrigger({ className, inset, children, ...props }: MenuSubTriggerProps): React.JSX.Element;
+declare function MenuSubContent({ align, alignOffset, side, sideOffset, className, ...props }: MenuSubContentProps): React.JSX.Element;
+declare function MenuCheckboxItem({ className, children, checked, inset, ...props }: MenuCheckboxItemProps): React.JSX.Element;
+declare function MenuRadioGroup(props: MenuRadioGroupProps): React.JSX.Element;
+declare function MenuRadioItem({ className, children, inset, ...props }: MenuRadioItemProps): React.JSX.Element;
+declare function MenuSeparator({ className, ...props }: MenuSeparatorProps): React.JSX.Element;
+declare function MenuShortcut({ className, ...props }: MenuShortcutProps): React.JSX.Element;
 //#endregion
 export { Menu, MenuCheckboxItem, type MenuCheckboxItemProps, MenuContent, type MenuContentProps, MenuGroup, type MenuGroupProps, MenuItem, type MenuItemProps, MenuLabel, type MenuLabelProps, MenuPortal, type MenuPortalProps, type MenuProps, MenuRadioGroup, type MenuRadioGroupProps, MenuRadioItem, type MenuRadioItemProps, MenuSeparator, type MenuSeparatorProps, MenuShortcut, type MenuShortcutProps, MenuSub, MenuSubContent, type MenuSubContentProps, type MenuSubProps, MenuSubTrigger, type MenuSubTriggerProps, MenuTrigger, type MenuTriggerProps, type RestoreFocusOnClose };