@waveso/ui 0.8.0 → 0.8.1

package/dist/accordion.js

@@ -25,7 +25,7 @@ function AccordionTrigger({ className, children, ...props }) {
 		className: "flex",
 		children: /* @__PURE__ */ jsxs(Accordion$1.Trigger, {
 			"data-slot": "accordion-trigger",
-			className: cn("cursor-clickable focus-visible:ring-focus/50 focus-visible:border-focus focus-visible:after:border-focus **:data-[slot=accordion-trigger-icon]:text-muted group/accordion-trigger relative flex flex-1 items-start justify-between rounded-md border border-transparent py-2.5 text-left text-sm font-medium motion-color outline-none hover:underline focus-visible:ring-3 aria-disabled:pointer-events-none aria-disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4", className),
+			className: cn("cursor-clickable focus-visible:ring-focus/50 focus-visible:border-focus focus-visible:after:border-focus **:data-[slot=accordion-trigger-icon]:text-muted group/accordion-trigger relative flex flex-1 items-start justify-between rounded-md border border-transparent py-2.5 text-left text-sm font-medium motion-color outline-hidden hover:underline focus-visible:ring-3 aria-disabled:pointer-events-none aria-disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4", className),
 			...props,
 			children: [
 				children,

package/dist/action-bar.js

@@ -197,7 +197,7 @@ function ActionBarProvider({ children, message = "You have unsaved changes", plu
 				className: "fixed bottom-6 left-1/2 z-50",
 				children: /* @__PURE__ */ jsxs("div", {
 					"data-slot": "action-bar-content",
-					className: cn("flex items-center gap-6 rounded-lg border border-line/60 bg-surface px-5 py-2.5 shadow-lg ring-1 ring-line backdrop-blur-sm", className),
+					className: cn("flex items-center gap-6 rounded-lg border border-line/60 bg-surface px-5 py-2.5 shadow-lg ring-1 ring-line", className),
 					children: [/* @__PURE__ */ jsx("span", {
 						"data-slot": "action-bar-message",
 						className: cn("whitespace-nowrap text-sm font-medium", saveError ? "text-destructive" : "text-contrast"),

package/dist/alert-dialog.js

@@ -34,7 +34,7 @@ function AlertDialogContent({ className, size = "default", ...props }) {
 	return /* @__PURE__ */ jsxs(AlertDialogPortal, { children: [/* @__PURE__ */ jsx(AlertDialogOverlay, {}), /* @__PURE__ */ jsx(AlertDialog$1.Popup, {
 		"data-slot": "alert-dialog-content",
 		"data-size": size,
-		className: cn("motion-scale-lg bg-foundation ring-contrast/10 group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-4 rounded-lg p-4 ring-1 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=lg]:max-w-lg data-[size=xl]:max-w-xl data-[size=default]:sm:max-w-sm data-[size=lg]:sm:max-w-lg data-[size=xl]:sm:max-w-xl", className),
+		className: cn("motion-scale-lg bg-foundation ring-contrast/10 group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-4 rounded-lg p-4 ring-1 outline-hidden data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=lg]:max-w-lg data-[size=xl]:max-w-xl data-[size=default]:sm:max-w-sm data-[size=lg]:sm:max-w-lg data-[size=xl]:sm:max-w-xl", className),
 		...props
 	})] });
 }
@@ -76,7 +76,7 @@ function AlertDialogDescription({ className, ...props }) {
 function AlertDialogAction({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Button, {
 		"data-slot": "alert-dialog-action",
-		className: cn(className),
+		className,
 		...props
 	});
 }

package/dist/autocomplete.js

@@ -13,7 +13,7 @@ function Autocomplete({ ...props }) {
 function AutocompleteInput({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Autocomplete$1.Input, {
 		"data-slot": "autocomplete-input",
-		className: cn("dark:bg-edge/30 border-edge focus-visible:border-focus focus-visible:ring-focus/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-edge/50 dark:disabled:bg-edge/80 placeholder:text-soft h-8 w-full min-w-0 rounded-md border bg-transparent px-2.5 py-1 text-base transition-colors outline-none focus-visible:ring-3 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 md:text-sm", className),
+		className: cn("dark:bg-edge/30 border-edge focus-visible:border-focus focus-visible:ring-focus/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-edge/50 dark:disabled:bg-edge/80 placeholder:text-soft h-8 w-full min-w-0 rounded-md border bg-transparent px-2.5 py-1 text-base transition-colors outline-hidden focus-visible:ring-3 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 md:text-sm", className),
 		...props
 	});
 }
@@ -47,7 +47,7 @@ function AutocompleteValue({ ...props }) {
 function AutocompletePortal({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Autocomplete$1.Portal, {
 		"data-slot": "autocomplete-portal",
-		className: cn(className),
+		className,
 		...props
 	});
 }
@@ -61,7 +61,7 @@ function AutocompleteBackdrop({ className, ...props }) {
 function AutocompletePositioner({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Autocomplete$1.Positioner, {
 		"data-slot": "autocomplete-positioner",
-		className: cn(className),
+		className,
 		...props
 	});
 }
@@ -103,7 +103,7 @@ function AutocompleteList({ className, ...props }) {
 function AutocompleteRow({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Autocomplete$1.Row, {
 		"data-slot": "autocomplete-row",
-		className: cn(className),
+		className,
 		...props
 	});
 }

package/dist/badge.d.ts

@@ -5,7 +5,7 @@ import * as _$class_variance_authority_types0 from "class-variance-authority/typ
 
 //#region src/badge.d.ts
 declare const badgeVariants: (props?: ({
-  variant?: "default" | "destructive" | "link" | "success" | "warning" | "secondary" | "outline" | "ghost" | null | undefined;
+  variant?: "default" | "success" | "destructive" | "warning" | "secondary" | "outline" | "ghost" | "link" | null | undefined;
 } & _$class_variance_authority_types0.ClassProp) | undefined) => string;
 type BadgeProps = useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants>;
 declare function Badge({

package/dist/button-group.d.ts

@@ -1,5 +1,5 @@
 import { Separator } from "./separator.js";
-import * as _$react from "react";
+import * as React from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import { VariantProps } from "class-variance-authority";
 import { useRender } from "@base-ui/react/use-render";
@@ -21,7 +21,7 @@ declare function ButtonGroupText({
   className,
   render,
   ...props
-}: ButtonGroupTextProps): _$react.ReactElement<unknown, string | _$react.JSXElementConstructor<any>>;
+}: ButtonGroupTextProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
 declare function ButtonGroupSeparator({
   className,
   orientation,

package/dist/button-group.js

@@ -1,6 +1,7 @@
 "use client";
 import { cn } from "./lib/utils.js";
 import { Separator } from "./separator.js";
+import "react";
 import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import { mergeProps } from "@base-ui/react/merge-props";

package/dist/button.d.ts

@@ -6,8 +6,8 @@ import * as _$class_variance_authority_types0 from "class-variance-authority/typ
 
 //#region src/button.d.ts
 declare const buttonVariants: (props?: ({
-  variant?: "default" | "destructive" | "link" | "success" | "secondary" | "outline" | "ghost" | null | undefined;
-  size?: "default" | "xs" | "sm" | "icon-xs" | "icon-sm" | "icon" | "lg" | "xl" | "icon-lg" | null | undefined;
+  variant?: "default" | "success" | "destructive" | "secondary" | "outline" | "ghost" | "link" | null | undefined;
+  size?: "default" | "xs" | "sm" | "lg" | "xl" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
 } & _$class_variance_authority_types0.ClassProp) | undefined) => string;
 type ButtonProps = React.ComponentProps<typeof Button$1> & VariantProps<typeof buttonVariants>;
 declare function Button({

package/dist/button.js

@@ -5,7 +5,7 @@ import { jsx } from "react/jsx-runtime";
 import { Button as Button$1 } from "@base-ui/react/button";
 import { cva } from "class-variance-authority";
 //#region src/button.tsx
-const buttonVariants = cva("cursor-clickable focus-visible:border-focus focus-visible:ring-focus/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap motion-color disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none", {
+const buttonVariants = cva("cursor-clickable focus-visible:border-focus focus-visible:ring-focus/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap motion-color disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-hidden group/button select-none", {
 	variants: {
 		variant: {
 			default: "bg-primary text-white hover:bg-primary/80",

package/dist/checkbox.js

@@ -8,7 +8,7 @@ import { Checkbox as Checkbox$1 } from "@base-ui/react/checkbox";
 function Checkbox({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Checkbox$1.Root, {
 		"data-slot": "checkbox",
-		className: cn("cursor-clickable border-edge dark:bg-edge/30 data-checked:bg-primary data-indeterminate:bg-primary data-checked:text-white data-indeterminate:text-white dark:data-checked:bg-primary dark:data-indeterminate:bg-primary data-checked:border-primary data-indeterminate:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-focus focus-visible:ring-focus/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border transition-colors outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3", className),
+		className: cn("cursor-clickable border-edge dark:bg-edge/30 data-checked:bg-primary data-indeterminate:bg-primary data-checked:text-white data-indeterminate:text-white dark:data-checked:bg-primary dark:data-indeterminate:bg-primary data-checked:border-primary data-indeterminate:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-focus focus-visible:ring-focus/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border transition-colors outline-hidden group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3", className),
 		...props,
 		children: /* @__PURE__ */ jsxs(Checkbox$1.Indicator, {
 			"data-slot": "checkbox-indicator",

package/dist/combobox.js

@@ -119,7 +119,7 @@ function ComboboxItem({ className, children, ...props }) {
 function ComboboxGroup({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Combobox$1.Group, {
 		"data-slot": "combobox-group",
-		className: cn(className),
+		className,
 		...props
 	});
 }
@@ -177,7 +177,7 @@ function ComboboxChip({ className, children, showRemove = true, ...props }) {
 function ComboboxChipsInput({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Combobox$1.Input, {
 		"data-slot": "combobox-chip-input",
-		className: cn("min-w-16 flex-1 outline-none", className),
+		className: cn("min-w-16 flex-1 outline-hidden", className),
 		...props
 	});
 }

package/dist/context-menu.js

@@ -28,14 +28,14 @@ function ContextMenuTrigger({ className, ...props }) {
 function ContextMenuContent({ className, align = "start", alignOffset = 4, side = "right", sideOffset = 0, restoreFocusOnClose, finalFocus, ...props }) {
 	return /* @__PURE__ */ jsx(ContextMenu$1.Portal, { children: /* @__PURE__ */ jsx(ContextMenu$1.Positioner, {
 		"data-slot": "context-menu-positioner",
-		className: "isolate z-50 outline-none",
+		className: "isolate z-50 outline-hidden",
 		align,
 		alignOffset,
 		side,
 		sideOffset,
 		children: /* @__PURE__ */ jsx(ContextMenu$1.Popup, {
 			"data-slot": "context-menu-content",
-			className: cn("motion-pop-md ring-contrast/10 bg-elevated text-contrast z-50 max-h-(--available-height) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md p-1 shadow-md ring-1 outline-none", className),
+			className: cn("motion-pop-md ring-contrast/10 bg-elevated text-contrast z-50 max-h-(--available-height) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md p-1 shadow-md ring-1 outline-hidden", className),
 			finalFocus: resolveFinalFocus(restoreFocusOnClose, finalFocus),
 			...props
 		})

package/dist/dialog.js

@@ -41,7 +41,7 @@ function DialogOverlay({ className, ...props }) {
 function DialogContent({ className, children, showCloseButton = true, ...props }) {
 	return /* @__PURE__ */ jsxs(DialogPortal, { children: [/* @__PURE__ */ jsx(DialogOverlay, {}), /* @__PURE__ */ jsxs(Dialog$1.Popup, {
 		"data-slot": "dialog-content",
-		className: cn("motion-scale-lg bg-foundation ring-contrast/10 fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-lg p-4 text-sm ring-1 outline-none sm:max-w-sm", className),
+		className: cn("motion-scale-lg bg-foundation ring-contrast/10 fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-lg p-4 text-sm ring-1 outline-hidden sm:max-w-sm", className),
 		...props,
 		children: [children, showCloseButton && /* @__PURE__ */ jsxs(Dialog$1.Close, {
 			"data-slot": "dialog-close",

package/dist/drawer.js

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

package/dist/input-group.js

@@ -11,7 +11,7 @@ function InputGroup({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "input-group",
 		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/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 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-none 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("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/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 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),
 		...props
 	});
 }
@@ -40,7 +40,7 @@ function InputGroupAddon({ className, align = "inline-start", ...props }) {
 const inputGroupButtonVariants = cva("gap-2 text-sm shadow-none flex items-center", {
 	variants: { size: {
 		xs: "h-6 gap-1 rounded-sm px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
-		sm: "",
+		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"
 	} },

package/dist/input-otp.js

@@ -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-none 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/20 dark:group-has-aria-invalid/input-otp:data-active:ring-destructive/40", className),
+		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/20 dark:group-has-aria-invalid/input-otp:data-active:ring-destructive/40", className),
 		...props,
 		children: [char, hasFakeCaret && /* @__PURE__ */ jsx("div", {
 			className: "pointer-events-none absolute inset-0 flex items-center justify-center",

package/dist/input.js

@@ -7,7 +7,7 @@ function Input({ className, type, ...props }) {
 	return /* @__PURE__ */ jsx(Input$1, {
 		type,
 		"data-slot": "input",
-		className: cn("dark:bg-edge/30 border-edge focus-visible:border-focus focus-visible:ring-focus/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-edge/50 dark:disabled:bg-edge/80 file:text-contrast placeholder:text-soft h-8 w-full min-w-0 rounded-md border bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-3 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 md:text-sm", className),
+		className: cn("dark:bg-edge/30 border-edge focus-visible:border-focus focus-visible:ring-focus/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-edge/50 dark:disabled:bg-edge/80 file:text-contrast placeholder:text-soft h-8 w-full min-w-0 rounded-md border bg-transparent px-2.5 py-1 text-base transition-colors outline-hidden file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-3 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 md:text-sm", className),
 		...props
 	});
 }

package/dist/item.d.ts

@@ -11,7 +11,7 @@ declare const itemVariants: (props?: ({
   size?: "default" | "xs" | "sm" | null | undefined;
 } & _$class_variance_authority_types0.ClassProp) | undefined) => string;
 declare const itemMediaVariants: (props?: ({
-  variant?: "default" | "icon" | "image" | null | undefined;
+  variant?: "default" | "image" | "icon" | null | undefined;
 } & _$class_variance_authority_types0.ClassProp) | undefined) => string;
 type ItemGroupProps = React.ComponentProps<"div">;
 type ItemSeparatorProps = React.ComponentProps<typeof Separator>;

package/dist/item.js

@@ -7,7 +7,7 @@ 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-none motion-color focus-visible:ring-3", {
+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", {
 	variants: {
 		variant: {
 			default: "border-transparent",

package/dist/kbd.d.ts

@@ -1,3 +1,4 @@
+import * as React from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/kbd.d.ts

package/dist/kbd.js

@@ -1,4 +1,5 @@
 import { cn } from "./lib/utils.js";
+import "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/kbd.tsx
 function Kbd({ className, ...props }) {

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

@@ -1,12 +1,7 @@
-import * as _$react from "react";
+import * as React from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/lib/internal-icons.d.ts
-/**
- * Internal-only SVG icons used by wave-ui components.
- *
- * NOT a public entry point — imported by components via relative paths.
- */
 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;
@@ -19,8 +14,7 @@ declare function EllipsisIcon(props: IconProps): _$react_jsx_runtime0.JSX.Elemen
 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;
-/** `forwardRef` because `Spinner` exposes this as `React.ComponentProps<"svg">`. */
-declare const LoaderIcon: _$react.ForwardRefExoticComponent<Omit<IconProps, "ref"> & _$react.RefAttributes<SVGSVGElement>>;
+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;

package/dist/lib/internal-icons.js

@@ -1,11 +1,6 @@
-import { forwardRef } from "react";
+import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/lib/internal-icons.tsx
-/**
-* Internal-only SVG icons used by wave-ui components.
-*
-* NOT a public entry point — imported by components via relative paths.
-*/
 const SVG_BASE = {
 	xmlns: "http://www.w3.org/2000/svg",
 	width: 24,
@@ -134,11 +129,9 @@ function SidebarPanelIcon(props) {
 		}), /* @__PURE__ */ jsx("path", { d: "M9 3v18" })]
 	});
 }
-/** `forwardRef` because `Spinner` exposes this as `React.ComponentProps<"svg">`. */
-const LoaderIcon = forwardRef(function LoaderIcon(props, ref) {
+function LoaderIcon(props) {
 	return /* @__PURE__ */ jsxs("svg", {
 		...SVG_BASE,
-		ref,
 		...props,
 		children: [
 			/* @__PURE__ */ jsx("path", { d: "M12 2v4" }),
@@ -151,7 +144,7 @@ const LoaderIcon = forwardRef(function LoaderIcon(props, ref) {
 			/* @__PURE__ */ jsx("path", { d: "m4.9 4.9 2.9 2.9" })
 		]
 	});
-});
+}
 function AlertTriangleIcon(props) {
 	return /* @__PURE__ */ jsxs("svg", {
 		...SVG_BASE,

package/dist/menu.js

@@ -27,14 +27,14 @@ function MenuTrigger(props) {
 function MenuContent({ align = "start", alignOffset = 0, side = "bottom", sideOffset = 4, className, restoreFocusOnClose, finalFocus, ...props }) {
 	return /* @__PURE__ */ jsx(MenuPortal, { children: /* @__PURE__ */ jsx(Menu$1.Positioner, {
 		"data-slot": "menu-positioner",
-		className: "isolate z-50 outline-none",
+		className: "isolate z-50 outline-hidden",
 		align,
 		alignOffset,
 		side,
 		sideOffset,
 		children: /* @__PURE__ */ jsx(Menu$1.Popup, {
 			"data-slot": "menu-content",
-			className: cn("motion-pop-md ring-contrast/10 bg-elevated text-contrast z-50 max-h-(--available-height) max-w-(--available-width) w-auto min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md p-1 shadow-md ring-1 outline-none data-closed:overflow-hidden", className),
+			className: cn("motion-pop-md ring-contrast/10 bg-elevated text-contrast z-50 max-h-(--available-height) max-w-(--available-width) w-auto min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md p-1 shadow-md ring-1 outline-hidden data-closed:overflow-hidden", className),
 			finalFocus: resolveFinalFocus(restoreFocusOnClose, finalFocus),
 			...props
 		})

package/dist/radio.js

@@ -7,7 +7,7 @@ import { Radio as Radio$1 } from "@base-ui/react/radio";
 function Radio({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Radio$1.Root, {
 		"data-slot": "radio",
-		className: cn("cursor-clickable border-edge dark:bg-edge/30 data-checked:bg-primary data-checked:text-white data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive focus-visible:border-focus focus-visible:ring-focus/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 dark:aria-invalid:border-destructive/50 group/radio peer relative flex aspect-square size-4 shrink-0 rounded-full border outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3", className),
+		className: cn("cursor-clickable border-edge dark:bg-edge/30 data-checked:bg-primary data-checked:text-white data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive focus-visible:border-focus focus-visible:ring-focus/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 dark:aria-invalid:border-destructive/50 group/radio peer relative flex aspect-square size-4 shrink-0 rounded-full border outline-hidden after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3", className),
 		...props,
 		children: /* @__PURE__ */ jsx(RadioIndicator, {})
 	});

package/dist/scroll-area.js

@@ -12,7 +12,7 @@ function ScrollArea({ className, children, ...props }) {
 		children: [
 			/* @__PURE__ */ jsx(ScrollArea$1.Viewport, {
 				"data-slot": "scroll-area-viewport",
-				className: "focus-visible:ring-focus/50 size-full rounded-[inherit] motion-color outline-none focus-visible:ring-3 focus-visible:outline-1",
+				className: "focus-visible:ring-focus/50 size-full rounded-[inherit] motion-color outline-hidden focus-visible:ring-3 focus-visible:outline-1",
 				children
 			}),
 			/* @__PURE__ */ jsx(ScrollBar, {}),

package/dist/select.js

@@ -49,7 +49,7 @@ function SelectTrigger({ className, size = "default", children, ...props }) {
 	return /* @__PURE__ */ jsxs(Select$1.Trigger, {
 		"data-slot": "select-trigger",
 		"data-size": size,
-		className: cn("border-edge data-placeholder:text-soft dark:bg-edge/30 dark:hover:bg-edge/50 focus-visible:border-focus focus-visible:ring-focus/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 flex w-fit items-center justify-between gap-1.5 rounded-md border bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap motion-color outline-none select-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-sm *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+		className: cn("border-edge data-placeholder:text-soft dark:bg-edge/30 dark:hover:bg-edge/50 focus-visible:border-focus focus-visible:ring-focus/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 flex w-fit items-center justify-between gap-1.5 rounded-md border bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap motion-color outline-hidden select-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-sm *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
 		...props,
 		children: [children, /* @__PURE__ */ jsx(Select$1.Icon, {
 			"data-slot": "select-icon",

package/dist/sidebar.js

@@ -184,7 +184,7 @@ function SidebarTrigger({ className, onClick, ...props }) {
 		"aria-expanded": open,
 		variant: "ghost",
 		size: "icon-sm",
-		className: cn(className),
+		className,
 		onClick: (event) => {
 			onClick?.(event);
 			toggleSidebar();

package/dist/skeleton.d.ts

@@ -1,3 +1,4 @@
+import * as React from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/skeleton.d.ts

package/dist/skeleton.js

@@ -1,4 +1,5 @@
 import { cn } from "./lib/utils.js";
+import "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/skeleton.tsx
 function Skeleton({ className, ...props }) {

package/dist/spinner.d.ts

@@ -1,3 +1,4 @@
+import * as React from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/spinner.d.ts

package/dist/spinner.js

@@ -1,5 +1,6 @@
 import { cn } from "./lib/utils.js";
 import { LoaderIcon } from "./lib/internal-icons.js";
+import "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/spinner.tsx
 function Spinner({ className, ...props }) {

package/dist/styles.css

@@ -17,8 +17,10 @@
  * file's location in node_modules/@waveso/ui/dist/. */
 @source "./";
 
-/* Tailwind v4 `dark:` variant — applied when any ancestor has `.dark`. */
-@custom-variant dark (&:is(.dark *));
+/* Tailwind v4 `dark:` variant — applies to the `.dark` element itself and any
+ * descendant. `:where()` keeps utilities at their normal (zero-added) specificity
+ * so the cascade is decided by source order, like every other Tailwind utility. */
+@custom-variant dark (&:where(.dark, .dark *));
 
 /* ---------------------------------------------------------------------------
  * Light theme (default)
@@ -164,9 +166,11 @@
   --info: var(--wave-500); /* the one blue — Wave Blue (= --primary / --focus) */
 
   /* Presence */
-  --presence-online: oklch(0.710 0.185 155); /* = success colour */
-  --presence-away: oklch(0.830 0.156 93); /* = warning colour */
-  --presence-busy: oklch(0.620 0.200 25); /* = destructive colour */
+  /* Presence dots reuse the status colours — aliased, not duplicated, so they
+   * stay in sync (and follow a consumer's `--success`/etc. override). */
+  --presence-online: var(--success);
+  --presence-away: var(--warning);
+  --presence-busy: var(--destructive);
   --presence-invisible: var(--foundation); /* invisible = the page itself; pair with a border so the dot reads as a hollow ring */
 
   /* Radius */
@@ -253,10 +257,10 @@
   --info: var(--wave-400); /* brighter Wave Blue for legible text-info on dark surfaces */
 
   /* Presence */
-  --presence-online: oklch(0.735 0.185 155); /* brighter on dark, like status */
-  --presence-away: oklch(0.850 0.156 93);
-  --presence-busy: oklch(0.630 0.200 25);
-  --presence-invisible: var(--foundation); /* re-declared so it re-resolves to the dark foundation */
+  --presence-online: var(--success);
+  --presence-away: var(--warning);
+  --presence-busy: var(--destructive);
+  --presence-invisible: var(--foundation); /* re-resolves to the dark foundation */
 }
 
 /* ---------------------------------------------------------------------------

package/dist/switch.js

@@ -5,7 +5,7 @@ import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import { Switch as Switch$1 } from "@base-ui/react/switch";
 //#region src/switch.tsx
-const switchVariants = cva("cursor-clickable data-checked:bg-primary data-unchecked:bg-edge focus-visible:border-focus focus-visible:ring-focus/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 dark:data-unchecked:bg-edge/80 peer relative inline-flex shrink-0 items-center rounded-full border border-transparent motion-color outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 aria-invalid:ring-3 data-disabled:cursor-not-allowed data-disabled:opacity-50", {
+const switchVariants = cva("cursor-clickable data-checked:bg-primary data-unchecked:bg-edge focus-visible:border-focus focus-visible:ring-focus/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 dark:data-unchecked:bg-edge/80 peer relative inline-flex shrink-0 items-center rounded-full border border-transparent motion-color outline-hidden after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 aria-invalid:ring-3 data-disabled:cursor-not-allowed data-disabled:opacity-50", {
 	variants: { size: {
 		default: "h-[18.4px] w-[32px]",
 		sm: "h-[14px] w-[24px]"

package/dist/tabs.js

@@ -38,7 +38,7 @@ function TabsTrigger({ className, ...props }) {
 function TabsContent({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Tabs$1.Panel, {
 		"data-slot": "tabs-content",
-		className: cn("flex-1 text-sm outline-none", className),
+		className: cn("flex-1 text-sm outline-hidden", className),
 		...props
 	});
 }

package/dist/textarea.js

@@ -10,7 +10,7 @@ function Textarea({ className, onChange, onValueChange, ...props }) {
 	}
 	return /* @__PURE__ */ jsx("textarea", {
 		"data-slot": "textarea",
-		className: cn("border-edge dark:bg-edge/30 focus-visible:border-focus focus-visible:ring-focus/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 resize-none disabled:bg-edge/50 disabled:cursor-not-allowed dark:disabled:bg-edge/80 placeholder:text-soft flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-2.5 py-2 text-base transition-colors outline-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 md:text-sm", className),
+		className: cn("border-edge dark:bg-edge/30 focus-visible:border-focus focus-visible:ring-focus/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 resize-none disabled:bg-edge/50 disabled:cursor-not-allowed dark:disabled:bg-edge/80 placeholder:text-soft flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-2.5 py-2 text-base transition-colors outline-hidden focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 md:text-sm", className),
 		onChange: handleChange,
 		...props
 	});

package/dist/toast.d.ts

@@ -5,7 +5,7 @@ import * as _$class_variance_authority_types0 from "class-variance-authority/typ
 import * as _$_base_ui_react0 from "@base-ui/react";
 
 //#region src/toast.d.ts
-declare const toastRootClass = "bg-elevated text-contrast ring-contrast/10 rounded-md p-4 text-sm shadow-md ring-1 outline-none select-none";
+declare const toastRootClass = "bg-elevated text-contrast ring-contrast/10 rounded-md p-4 text-sm shadow-md ring-1 outline-hidden select-none";
 declare const toastIconVariants: (props?: ({
   type?: "success" | "warning" | "loading" | "info" | "error" | null | undefined;
 } & _$class_variance_authority_types0.ClassProp) | undefined) => string;

package/dist/toast.js

@@ -6,7 +6,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import { Toast as Toast$1 } from "@base-ui/react/toast";
 //#region src/toast.tsx
-const toastRootClass = "bg-elevated text-contrast ring-contrast/10 rounded-md p-4 text-sm shadow-md ring-1 outline-none select-none";
+const toastRootClass = "bg-elevated text-contrast ring-contrast/10 rounded-md p-4 text-sm shadow-md ring-1 outline-hidden select-none";
 const toastIconVariants = cva("mt-0.5 size-4 shrink-0", { variants: { type: {
 	loading: "text-muted animate-spin",
 	success: "text-success",
@@ -14,7 +14,7 @@ const toastIconVariants = cva("mt-0.5 size-4 shrink-0", { variants: { type: {
 	warning: "text-warning",
 	error: "text-destructive"
 } } });
-const toastViewportVariants = cva("fixed z-[100] flex w-full outline-none sm:max-w-sm", {
+const toastViewportVariants = cva("fixed z-[100] flex w-full outline-hidden sm:max-w-sm", {
 	variants: { position: {
 		"top-left": "top-4 left-4",
 		"top-center": "top-4 right-0 left-0 mx-auto",
@@ -113,14 +113,14 @@ function ToastDescription({ className, ...props }) {
 function ToastAction({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Toast$1.Action, {
 		"data-slot": "toast-action",
-		className: cn("hover:bg-secondary inline-flex h-7 items-center rounded-md border border-line px-2.5 text-xs font-medium transition-colors outline-none focus-visible:border-focus focus-visible:ring-focus/50 focus-visible:ring-3", className),
+		className: cn("hover:bg-secondary inline-flex h-7 items-center rounded-md border border-line px-2.5 text-xs font-medium transition-colors outline-hidden focus-visible:border-focus focus-visible:ring-focus/50 focus-visible:ring-3", className),
 		...props
 	});
 }
 function ToastClose({ className, children, ...props }) {
 	return /* @__PURE__ */ jsx(Toast$1.Close, {
 		"data-slot": "toast-close",
-		className: cn("text-muted hover:text-contrast shrink-0 rounded-md p-0.5 transition-colors outline-none focus-visible:ring-focus/50 focus-visible:ring-3", className),
+		className: cn("text-muted hover:text-contrast shrink-0 rounded-md p-0.5 transition-colors outline-hidden focus-visible:ring-focus/50 focus-visible:ring-3", className),
 		...props,
 		children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(CloseIcon, { className: "size-4" }), /* @__PURE__ */ jsx("span", {
 			className: "sr-only",

package/dist/toggle.js

@@ -5,7 +5,7 @@ import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import { Toggle as Toggle$1 } from "@base-ui/react/toggle";
 //#region src/toggle.tsx
-const toggleVariants = cva("cursor-clickable hover:text-contrast focus-visible:border-focus focus-visible:ring-focus/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-pressed:bg-secondary gap-1 rounded-md text-sm font-medium motion-color [&_svg:not([class*='size-'])]:size-4 group/toggle hover:bg-secondary inline-flex items-center justify-center whitespace-nowrap outline-none focus-visible:ring-3 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0", {
+const toggleVariants = cva("cursor-clickable hover:text-contrast focus-visible:border-focus focus-visible:ring-focus/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-pressed:bg-secondary gap-1 rounded-md text-sm font-medium motion-color [&_svg:not([class*='size-'])]:size-4 group/toggle hover:bg-secondary inline-flex items-center justify-center whitespace-nowrap outline-hidden focus-visible:ring-3 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0", {
 	variants: {
 		variant: {
 			default: "bg-transparent",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@waveso/ui",
-  "version": "0.8.0",
+  "version": "0.8.1",
   "description": "Wave UI component library built on Base UI and Tailwind CSS",
   "type": "module",
   "sideEffects": [