@waveso/ui 0.10.1 → 0.13.0

package/README.md

@@ -59,9 +59,15 @@ This is the right shape for a system centered on an emphasis ladder: clean and m
 
 The three themes are a homage to the **pre-digital writing desk** — the _surface_, the _pen_, the _pencil_ — and each maps to its color: cream ***Paper***, blue-black ***Ink***, gray ***Graphite***.
 
-**Graphite** is the default **neutral pencil-gray** theme, built on a low-saturation dark-neutral family with a subtle blue bias. That bias keeps the light steps from going flat — a tiny cool cast instead of pure gray.
+Wave **follows your operating system by default** — a light OS gets **Paper**, a dark OS gets **Graphite** (the neutral pencil-gray theme, a low-saturation dark-neutral with a subtle blue bias so its steps never go flat). **Ink**, the deep-navy _night_ theme, is opt-in.
 
-**Paper** and **Ink** are an elegant classic pair, each with a purpose: Paper is tuned for daytime and bright spaces; Ink for night and dark spaces. In every theme the _structure_ (text and borders) stays a cool-biased neutral, while the _surface_ carries the identity.
+| Theme | Role | Select with |
+| --- | --- | --- |
+| **Paper** | Light | light OS · `<html class="paper">` |
+| **Graphite** | Dark | dark OS · `<html class="graphite">` |
+| **Ink** | Night (premium) | `<html class="ink">` |
+
+A pinned class always beats the OS — put `.paper`, `.graphite`, or `.ink` on your `<html>` (or any subtree) from your app's own theme toggle. In every theme the _structure_ (text and borders) stays a cool-biased neutral, while the _surface_ carries the identity.
 
 ## Taxonomy
 
@@ -144,7 +150,7 @@ Import Tailwind, then the Wave UI preset, in your CSS entry point:
 @import "@waveso/ui/styles.css";
 ```
 
-The preset provides every CSS variable (colors, radii, motion, shadows) with light and dark support. Override any variable in your own `:root` / `.dark` blocks to customize the theme.
+The preset provides every CSS variable (colors, radii, motion, shadows) with light and dark support. Override any variable in your own `:root` or a theme block (`.graphite`, `.ink`, …) to customize the theme.
 
 ## Usage
 

package/dist/autocomplete.js

@@ -12,7 +12,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-hidden 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/30 aria-invalid:border-destructive 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
 	});
 }

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" | "link" | "outline" | "success" | "warning" | "destructive" | "secondary" | "ghost" | null | undefined;
+  variant?: "default" | "outline" | "link" | "success" | "destructive" | "warning" | "secondary" | "ghost" | null | undefined;
 } & _$class_variance_authority_types0.ClassProp) | undefined) => string;
 type BadgeProps = useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants>;
 declare function Badge({

package/dist/badge.js

@@ -4,16 +4,16 @@ import { cva } from "class-variance-authority";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
 //#region src/badge.tsx
-const badgeVariants = cva("h-5 gap-1 rounded-full border border-transparent px-2 py-0.5 text-xs font-medium motion-color has-data-[icon=inline-start]:pl-1.5 has-data-[icon=inline-end]:pr-1.5 [&>svg:not([class*='size-'])]:size-3 inline-flex items-center justify-center w-fit whitespace-nowrap shrink-0 [&>svg]:pointer-events-none focus-visible:border-focus focus-visible:ring-focus/50 focus-visible:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive overflow-hidden group/badge", {
+const badgeVariants = cva("h-5 gap-1 rounded-full border border-transparent px-2 py-0.5 text-xs font-medium motion-color has-data-[icon=inline-start]:ps-1.5 has-data-[icon=inline-end]:pe-1.5 [&_svg:not([class*='size-'])]:size-3 inline-flex items-center justify-center w-fit whitespace-nowrap shrink-0 [&_svg]:shrink-0 [&_svg]:pointer-events-none focus-visible:border-focus focus-visible:ring-focus/50 focus-visible:ring-3 aria-invalid:ring-destructive/30 aria-invalid:border-destructive overflow-hidden group/badge", {
 	variants: { variant: {
 		default: "bg-primary text-white [a]:hover:bg-primary/80",
-		success: "bg-success/10 [a]:hover:bg-success/20 focus-visible:ring-success/50 text-success dark:bg-success/20",
-		destructive: "bg-destructive/10 text-destructive [a]:hover:bg-destructive/20 focus-visible:ring-destructive/50 dark:bg-destructive/20",
-		warning: "bg-warning/10 text-warning [a]:hover:bg-warning/20 focus-visible:ring-warning/50 dark:bg-warning/20",
+		success: "bg-success text-contrast dark:text-foundation [a]:hover:bg-success/80",
+		destructive: "bg-destructive text-white [a]:hover:bg-destructive/80 [a]:focus-visible:ring-destructive/50",
+		warning: "bg-warning text-contrast dark:text-foundation [a]:hover:bg-warning/80",
 		secondary: "bg-secondary text-contrast [a]:hover:bg-secondary/80",
-		outline: "border-line text-contrast [a]:hover:bg-secondary [a]:hover:text-muted",
-		ghost: "hover:bg-secondary hover:text-muted dark:hover:bg-secondary/50",
-		link: "text-primary underline-offset-4 hover:underline"
+		outline: "border-edge bg-foundation [a]:hover:bg-secondary/80 [a]:hover:text-contrast dark:bg-edge/30",
+		ghost: "text-muted [a]:hover:bg-secondary/80",
+		link: "text-primary [a]:underline-offset-4 [a]:hover:underline"
 	} },
 	defaultVariants: { variant: "default" }
 });

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" | "link" | "outline" | "success" | "destructive" | "secondary" | "ghost" | null | undefined;
-  size?: "default" | "sm" | "lg" | "icon" | "xs" | "xl" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
+  variant?: "default" | "outline" | "link" | "destructive" | "secondary" | "ghost" | null | undefined;
+  size?: "default" | "sm" | "xs" | "icon" | "lg" | "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

@@ -4,27 +4,25 @@ 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-hidden group/button select-none", {
+const buttonVariants = cva("cursor-clickable focus-visible:border-focus focus-visible:ring-focus/50 aria-invalid:ring-destructive/30 aria-invalid:border-destructive 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 active:not-aria-[haspopup]:scale-[0.97]", {
 	variants: {
 		variant: {
 			default: "bg-primary text-white hover:bg-primary/80",
-			outline: "border-line bg-foundation hover:bg-secondary hover:text-contrast dark:bg-edge/30 dark:border-edge dark:hover:bg-edge/50 aria-expanded:bg-secondary aria-expanded:text-contrast",
+			outline: "border-edge bg-foundation hover:bg-secondary/80 hover:text-contrast dark:bg-edge/30 aria-expanded:bg-secondary aria-expanded:text-contrast",
 			secondary: "bg-secondary text-contrast hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-contrast",
-			ghost: "hover:bg-secondary/80 hover:text-contrast aria-expanded:bg-secondary aria-expanded:text-contrast",
-			success: "bg-success/10 hover:bg-success/20 focus-visible:ring-success/20 dark:focus-visible:ring-success/40 dark:bg-success/20 text-success focus-visible:border-success/40 dark:hover:bg-success/30",
-			destructive: "bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30",
+			ghost: "text-contrast hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-contrast",
+			destructive: "bg-destructive text-white hover:bg-destructive/80 focus-visible:ring-destructive/50",
 			link: "text-primary underline-offset-4 hover:underline"
 		},
 		size: {
-			default: "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
-			xs: "h-6 gap-1 rounded-sm px-2 text-xs in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
-			sm: "h-7 gap-1 rounded-sm px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
-			lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",
-			xl: "h-10 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",
-			icon: "size-8",
+			default: "h-9 gap-1.5 px-3 has-data-[icon=inline-end]:pe-2.5 has-data-[icon=inline-start]:ps-2.5",
+			xs: "h-6 gap-1 rounded-sm px-2.5 text-xs in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pe-2 has-data-[icon=inline-start]:ps-2 [&_svg:not([class*='size-'])]:size-3",
+			sm: "h-8 gap-1 px-3 has-data-[icon=inline-end]:pe-2 has-data-[icon=inline-start]:ps-2",
+			lg: "h-10 gap-1.5 px-4 has-data-[icon=inline-end]:pe-3 has-data-[icon=inline-start]:ps-3",
+			icon: "size-9",
 			"icon-xs": "size-6 rounded-sm in-data-[slot=button-group]:rounded-md [&_svg:not([class*='size-'])]:size-3",
-			"icon-sm": "size-7 rounded-sm in-data-[slot=button-group]:rounded-md",
-			"icon-lg": "size-9"
+			"icon-sm": "size-8",
+			"icon-lg": "size-10"
 		}
 	},
 	defaultVariants: {

package/dist/checkbox.js

@@ -7,7 +7,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-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),
+		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 focus-visible:border-focus focus-visible:ring-focus/50 aria-invalid:ring-destructive/30 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

@@ -153,7 +153,7 @@ function ComboboxSeparator({ className, ...props }) {
 function ComboboxChips({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Combobox$1.Chips, {
 		"data-slot": "combobox-chips",
-		className: cn("dark:bg-edge/30 border-edge focus-within:border-focus focus-within:ring-focus/50 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive dark:has-aria-invalid:border-destructive/50 flex min-h-8 flex-wrap items-center gap-1 rounded-md border bg-transparent bg-clip-padding px-2.5 py-1 text-sm transition-colors focus-within:ring-3 has-aria-invalid:ring-3 has-data-[slot=combobox-chip]:px-1", className),
+		className: cn("dark:bg-edge/30 border-edge focus-within:border-focus focus-within:ring-focus/50 has-aria-invalid:ring-destructive/30 has-aria-invalid:border-destructive flex min-h-8 flex-wrap items-center gap-1 rounded-md border bg-transparent bg-clip-padding px-2.5 py-1 text-sm transition-colors focus-within:ring-3 has-aria-invalid:ring-3 has-data-[slot=combobox-chip]:px-1", className),
 		...props
 	});
 }
@@ -165,7 +165,7 @@ function ComboboxChip({ className, children, showRemove = true, ...props }) {
 		children: [children, showRemove ? /* @__PURE__ */ jsx(Combobox$1.ChipRemove, {
 			render: /* @__PURE__ */ jsx(Button, {
 				variant: "ghost",
-				size: "icon-xs"
+				size: "icon-sm"
 			}),
 			className: "-ml-1 opacity-50 hover:opacity-100",
 			"data-slot": "combobox-chip-remove",

package/dist/input-group.js

@@ -10,7 +10,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-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("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),
 		...props
 	});
 }

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-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),
+		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),
 		...props,
 		children: [char, hasFakeCaret && /* @__PURE__ */ jsx("div", {
 			className: "pointer-events-none absolute inset-0 flex items-center justify-center",

package/dist/input.js

@@ -6,7 +6,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-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),
+		className: cn("dark:bg-edge/30 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 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" | "sm" | "xs" | null | undefined;
 } & _$class_variance_authority_types0.ClassProp) | undefined) => string;
 declare const itemMediaVariants: (props?: ({
-  variant?: "default" | "image" | "icon" | null | undefined;
+  variant?: "default" | "icon" | "image" | null | undefined;
 } & _$class_variance_authority_types0.ClassProp) | undefined) => string;
 type ItemGroupProps = React.ComponentProps<"div">;
 type ItemSeparatorProps = React.ComponentProps<typeof Separator>;

package/dist/radio.js

@@ -6,7 +6,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-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),
+		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/30 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/select.js

@@ -48,7 +48,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-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),
+		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/30 aria-invalid:border-destructive 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/styles.css

@@ -7,7 +7,7 @@
  *   @import '@waveso/ui/styles.css';
  *
  * This brings the `dark` variant, every theme token (override in your own
- * :root / .dark), motion tokens + recipes, the few self-hosted keyframe
+ * :root or a theme class), motion tokens + recipes, the few self-hosted keyframe
  * utilities the components need, and the `@source` rule. No other
  * library-related imports needed — zero runtime dependencies.
  */
@@ -17,13 +17,51 @@
  * file's location in node_modules/@waveso/ui/dist/. */
 @source "./";
 
-/* 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 *));
+/* Tailwind v4 `dark:` variant — fires on the DARK themes (`.graphite`, `.ink`)
+ * AND on the OS-dark default when no theme is pinned. `.paper` (light) always
+ * opts out. `:where()` keeps utilities at zero-added specificity so source order
+ * decides the cascade, like every Tailwind utility. A future dark theme gets
+ * added to both lists below. */
+@custom-variant dark {
+  &:where(.graphite, .graphite *, .ink, .ink *) {
+    @slot;
+  }
+  @media (prefers-color-scheme: dark) {
+    &:where(
+      :root:not(.paper):not(.graphite):not(.ink),
+      :root:not(.paper):not(.graphite):not(.ink) *
+    ) {
+      @slot;
+    }
+  }
+}
+
+/* ---------------------------------------------------------------------------
+ * Squircle corners — progressive enhancement. `corner-shape` renders every
+ * `border-radius` as a continuous superellipse (iOS-style) instead of a plain
+ * circular arc: softer, friendlier. It composes with `border-radius` and
+ * respects borders / rings / shadows, and degrades to normal rounding where
+ * unsupported (Chrome 2025+ today; Safari/Firefox pending). Pills and circles
+ * opt back out — a squircled circle reads as an app icon, not an avatar. */
+@layer base {
+  *,
+  ::before,
+  ::after {
+    corner-shape: squircle;
+  }
+  [class*="rounded-full"] {
+    corner-shape: round;
+  }
+}
 
 /* ---------------------------------------------------------------------------
- * Light theme (default)
+ * Themes — named by identity: Paper (light) · Graphite (dark) · Ink (dark)
+ *
+ * Follows the OS by default: no class → Paper on a light system, Graphite on a
+ * dark one (`@media prefers-color-scheme`). Pin one by name — `.paper`,
+ * `.graphite`, `.ink` — and it always beats the OS. A theme class sits on the
+ * same <html> as `:root`, so every var() alias below (inverse, presence)
+ * re-resolves to the active theme.
  * ------------------------------------------------------------------------- */
 
 :root {
@@ -47,11 +85,50 @@
   --wave-900: oklch(0.284 0.088 255); /* #042954 */
   --wave-950: oklch(0.226 0.060 255); /* #061C37 */
 
-  /* ── Neutral theme palettes (primitives) ─────────────────────────────────
-   * Three complete neutral ramps, one per theme. The theme class on <html>
-   * wires the ACTIVE one into the `--ui-*` alias (step 2); the semantic layer
-   * reads `--ui-*`, never these directly. `--wave-*` (brand) is shared by all
-   * three. Default theme = Graphite.
+  /* Status ramps — shared across every theme (mode-stable, like Wave).
+   * 500 = the locked status colour; the semantic layer picks a swatch per
+   * light/dark (base + hover) so components never carry a `dark:` for it. */
+  --success-50:  oklch(0.975 0.014 155); /* #F0FAF3 */
+  --success-100: oklch(0.951 0.034 155); /* #DEF6E5 */
+  --success-200: oklch(0.911 0.068 155); /* #BFF0CE */
+  --success-300: oklch(0.857 0.113 155); /* #91E6B0 */
+  --success-400: oklch(0.797 0.165 155); /* #4FDB8D */
+  --success-500: oklch(0.710 0.185 155); /* #00C26B */
+  --success-600: oklch(0.620 0.176 155); /* #00A354 */
+  --success-700: oklch(0.504 0.151 155); /* #007C3B */
+  --success-800: oklch(0.388 0.119 155); /* #005626 */
+  --success-900: oklch(0.287 0.088 155); /* #003615 */
+  --success-950: oklch(0.200 0.060 155); /* #001D09 */
+
+  --warning-50:  oklch(0.975 0.012 93); /* #F9F7EE */
+  --warning-100: oklch(0.962 0.029 93); /* #F9F2DD */
+  --warning-200: oklch(0.940 0.058 93); /* #F8EBC0 */
+  --warning-300: oklch(0.911 0.095 93); /* #F7E198 */
+  --warning-400: oklch(0.878 0.139 93); /* #F6D460 */
+  --warning-500: oklch(0.830 0.156 93); /* #EAC434 */
+  --warning-600: oklch(0.719 0.148 93); /* #C4A100 */
+  --warning-700: oklch(0.576 0.127 93); /* #937600 */
+  --warning-800: oklch(0.432 0.100 93); /* #634E00 */
+  --warning-900: oklch(0.308 0.075 93); /* #3D2E00 */
+  --warning-950: oklch(0.200 0.051 93); /* #1E1500 */
+
+  --destructive-50:  oklch(0.975 0.015 25); /* #FFF3F2 */
+  --destructive-100: oklch(0.943 0.037 25); /* #FFE3E0 */
+  --destructive-200: oklch(0.890 0.074 25); /* #FFC8C2 */
+  --destructive-300: oklch(0.817 0.122 25); /* #FFA39B */
+  --destructive-400: oklch(0.736 0.178 25); /* #FF756E */
+  --destructive-500: oklch(0.620 0.200 25); /* #E64343 */
+  --destructive-600: oklch(0.546 0.190 25); /* #C72D32 */
+  --destructive-700: oklch(0.451 0.163 25); /* #9C1C21 */
+  --destructive-800: oklch(0.355 0.128 25); /* #701115 */
+  --destructive-900: oklch(0.272 0.096 25); /* #4C0A0C */
+  --destructive-950: oklch(0.200 0.065 25); /* #2D0606 */
+
+  /* ── Neutral ramps (primitives) ───────────────────────────────────────────
+   * Three complete neutral ramps. Each theme's semantic block below references
+   * exactly one of them directly: Paper → light, Graphite → default dark, Ink →
+   * night. `--wave-*` (brand) is shared by all three. Never used by components
+   * directly — only through the semantic tokens (`--foundation`, `--contrast`…).
    * ──────────────────────────────────────────────────────────────────────── */
 
   /* Graphite — neutral grey (default) */
@@ -95,79 +172,32 @@
   --paper-900: oklch(0.224 0.008 118); /* #1B1C18 */
   --paper-950: oklch(0.156 0.008 119); /* #0C0D09 */
 
-  /* Active neutral alias — the theme class on <html> repoints these to one of
-   * the ramps above (step 3). Default (no theme class) = Graphite. The semantic
-   * layer below reads ONLY `--ui-*`; components never touch a ramp directly. */
-  --ui-50:  var(--graphite-50);
-  --ui-100: var(--graphite-100);
-  --ui-200: var(--graphite-200);
-  --ui-300: var(--graphite-300);
-  --ui-400: var(--graphite-400);
-  --ui-500: var(--graphite-500);
-  --ui-600: var(--graphite-600);
-  --ui-700: var(--graphite-700);
-  --ui-800: var(--graphite-800);
-  --ui-900: var(--graphite-900);
-  --ui-950: var(--graphite-950);
-
   /* ========================================================================
-   * Semantic tokens — light (default). The spec's `.light` block lives in
-   * `:root` so consumers get the light theme without needing a `.light` class.
+   * Theme-independent tokens — identical in Paper / Graphite / Ink. The
+   * per-theme semantic tokens (surfaces, text, borders, secondary, shadow,
+   * status) live in the theme blocks below; the aliases here (`inverse`,
+   * `presence`) read those, so they re-resolve to whatever theme is on <html>.
    * ====================================================================== */
 
-  /* Backgrounds = elevation */
-  --foundation: var(--ui-200);
-  --surface: var(--ui-100);
-  --elevated: var(--ui-50);
-
-  /* Contrast = emphasis — highest-contrast text → muted → soft. */
-  --contrast: var(--ui-950);
-  --muted: var(--ui-600);
-  --soft: var(--ui-500);
-
-  /* Inverse — an inverted neutral pair (e.g. the dark tooltip). Aliases, so
-   * they auto-flip with `.dark` (var() re-resolves at the use site). */
+  /* Inverse — an inverted neutral pair (e.g. the dark tooltip). Aliases of the
+   * active theme's own `--contrast` / `--foundation`. */
   --surface-inverse: var(--contrast);
   --contrast-inverse: var(--foundation);
 
-  /* Brand — `primary` wired to the Wave ramp; `secondary` is the neutral fill
-   * (secondary/ghost buttons, hovers, selected) at ui-300; `accent` is the
-   * bright signal (Wave Blue 300, the strand now-glow). No per-fill on-color
-   * tokens: text on the saturated fills is
-   * `text-white`, text on the neutral `secondary` is `text-contrast`. */
+  /* Brand — `primary` = the Wave ramp; `accent` = the bright signal (Wave Blue
+   * 300, the strand now-glow). `secondary` (the neutral fill) is per-theme, so
+   * it lives in the theme blocks. Text on the saturated fills is `text-white`. */
   --primary: var(--wave-500);
-  --secondary: var(--ui-300);
   --accent: var(--wave-300); /* the bright signal — the strand's "now" cursor glow */
 
-  /* Borders = structure — mixed from the ACTIVE palette so they auto-match
-   * every theme: a hairline of the darkest neutral in light mode. */
-  --line: color-mix(in srgb, var(--ui-950) 7%, transparent);
-  --edge: color-mix(in srgb, var(--ui-950) 14%, transparent);
-  --solid: var(--ui-300);
-
   /* Rings = brand themed */
   --focus: var(--primary);
 
   /* Scrim — the dim behind modal overlays (dialog / drawer / alert backdrop). */
   --scrim: oklch(0 0 0 / 0.1);
 
-  /* Shadow — two dials for the layered `shadow-*` scale: `--shadow-color` (oklch
-   * components `L C H` — a deep cool-tinted near-black, never pure black which
-   * reads heavy) and `--shadow-strength` (per-layer alpha / intensity). Both
-   * resolve per :root/.dark, so retinting OR dimming every shadow is one token.
-   * For a colored surface set a named tint, e.g. `--shadow-color-primary`. */
-  --shadow-color: 0.159 0.021 263; /* was hsl(220 45% 6%) */
-  --shadow-strength: 0.22;
-
-  /* Status */
-  --destructive: oklch(0.620 0.200 25);
-  --success: oklch(0.710 0.185 155); /* cool emerald — distinct from the warning yellow, kept ownable (off the Apple/Tailwind default) */
-  --warning: oklch(0.830 0.156 93);
-  --info: var(--wave-500); /* the one blue — Wave Blue (= --primary / --focus) */
-
-  /* Presence */
-  /* Presence dots reuse the status colours — aliased, not duplicated, so they
-   * stay in sync (and follow a consumer's `--success`/etc. override). */
+  /* 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);
@@ -218,74 +248,113 @@
   --stagger-lg: 90ms;
 }
 
+/* A squircle reads tighter than a circular arc at the same radius, so where
+ * `corner-shape` is active we bump the radius to restore the intended roundness.
+ * Scoped via @supports — browsers without squircles keep the original values.
+ * Starting value; nudge by eye in Chrome. Feeds --radius-sm/md/lg (all calc off it). */
+@supports (corner-shape: squircle) {
+  :root {
+    --radius: 1rem;
+  }
+}
+
 /* ---------------------------------------------------------------------------
- * Dark theme
+ * Paper — the LIGHT theme, and the default. The single source for Paper's
+ * per-theme tokens, shared by `:root` (the default) and `.paper` (explicit —
+ * what a theme toggle sets, or to override an inherited dark theme in a nested
+ * scope).
  * ------------------------------------------------------------------------- */
+:root,
+.paper {
+  --foundation: var(--paper-200);
+  --surface: var(--paper-100);
+  --elevated: var(--paper-50);
+  --contrast: var(--paper-950);
+  --muted: var(--paper-600);
+  --soft: var(--paper-500);
+  --secondary: var(--paper-300);
+  --line: color-mix(in srgb, var(--paper-950) 7%, transparent);
+  --edge: color-mix(in srgb, var(--paper-950) 14%, transparent);
+  --solid: var(--paper-300);
+  --shadow-color: 0.159 0.021 263;
+  --shadow-strength: 0.22;
+  --destructive: oklch(0.620 0.200 25);
+  --success: oklch(0.710 0.185 155);
+  --warning: oklch(0.830 0.156 93);
+  --info: var(--wave-500);
+}
 
-.dark {
-  /* Backgrounds = elevation */
-  --foundation: var(--ui-950);
-  --surface: var(--ui-900);
-  --elevated: var(--ui-800);
-
-  /* Contrast = emphasis */
-  --contrast: var(--ui-100);
-  --muted: var(--ui-400);
-  --soft: var(--ui-600);
-
-  /* Brand — only `secondary` differs from light; mirrored to ui-700 so the
-   * neutral fill stands out against the dark surfaces. primary / accent /
-   * inverse / focus auto-flip or stay constant via the `:root` definitions. */
-  --secondary: var(--ui-700);
-
-  /* Borders = structure — a hairline of the lightest neutral (auto-matches theme). */
-  --line: color-mix(in srgb, var(--ui-50) 5%, transparent);
-  --edge: color-mix(in srgb, var(--ui-50) 13%, transparent);
-  --solid: var(--ui-700);
-
-  /* Shadow — darker tint, lower strength: a near-black shadow on a dark
-   * surface reads heavier than on white, so dim it. */
-  --shadow-color: 0.125 0.011 259; /* was hsl(220 40% 3%) */
-  --shadow-strength: 0.18;
+/* ---------------------------------------------------------------------------
+ * Graphite — the DARK theme (neutral). Two ways in: the OS-dark default (the
+ * `@media` block, active only when no theme is pinned) and an explicit
+ * `.graphite` (what a theme toggle sets). Same tokens both ways — a media query
+ * can't be folded into a plain class selector, so they're stated once each.
+ * Status brightens and the shadow dims for the dark surface; any pinned theme
+ * beats the OS.
+ * ------------------------------------------------------------------------- */
+@media (prefers-color-scheme: dark) {
+  :root:not(.paper):not(.graphite):not(.ink) {
+    --foundation: var(--graphite-950);
+    --surface: var(--graphite-900);
+    --elevated: var(--graphite-800);
+    --contrast: var(--graphite-100);
+    --muted: var(--graphite-400);
+    --soft: var(--graphite-600);
+    --secondary: var(--graphite-700);
+    --line: color-mix(in srgb, var(--graphite-50) 5%, transparent);
+    --edge: color-mix(in srgb, var(--graphite-50) 13%, transparent);
+    --solid: var(--graphite-700);
+    --shadow-color: 0.125 0.011 259;
+    --shadow-strength: 0.18;
+    --destructive: oklch(0.630 0.200 25);
+    --success: oklch(0.735 0.185 155);
+    --warning: oklch(0.850 0.156 93);
+    --info: var(--wave-400);
+  }
+}
 
-  /* Status */
-  /* Slightly BRIGHTER than the :root (light) values.
-   * Never darker, or the colour recedes on dark surfaces (the old reversal bug). */
+.graphite {
+  --foundation: var(--graphite-950);
+  --surface: var(--graphite-900);
+  --elevated: var(--graphite-800);
+  --contrast: var(--graphite-100);
+  --muted: var(--graphite-400);
+  --soft: var(--graphite-600);
+  --secondary: var(--graphite-700);
+  --line: color-mix(in srgb, var(--graphite-50) 5%, transparent);
+  --edge: color-mix(in srgb, var(--graphite-50) 13%, transparent);
+  --solid: var(--graphite-700);
+  --shadow-color: 0.125 0.011 259;
+  --shadow-strength: 0.18;
   --destructive: oklch(0.630 0.200 25);
-  --success: oklch(0.735 0.185 155); /* green A, hue-aware lift (+.025) brighter than light */
+  --success: oklch(0.735 0.185 155);
   --warning: oklch(0.850 0.156 93);
-  --info: var(--wave-400); /* brighter Wave Blue for legible text-info on dark surfaces */
-
-  /* Presence */
-  --presence-online: var(--success);
-  --presence-away: var(--warning);
-  --presence-busy: var(--destructive);
-  --presence-invisible: var(--foundation); /* re-resolves to the dark foundation */
+  --info: var(--wave-400);
 }
 
 /* ---------------------------------------------------------------------------
- * Theme presets — each repoints the `--ui-*` alias to one neutral ramp. Put a
- * class on a root element: `<html class="theme-paper">`. Graphite is also the bare
- * `:root` default, so `theme-graphite` is optional/explicit. Light vs dark is the
- * separate `.dark` axis — they compose (e.g. `class="theme-paper dark"`).
+ * Ink — the premium night theme. Opt-in only: `<html class="ink">`.
+ * A complete, self-contained dark theme (deep navy), separate from the Graphite
+ * default dark. It's dark, so it drives the `dark:` variant too. primary /
+ * accent / focus / inverse / presence stay constant or re-resolve via `:root`.
  * ------------------------------------------------------------------------- */
-.theme-graphite {
-  --ui-50: var(--graphite-50);   --ui-100: var(--graphite-100); --ui-200: var(--graphite-200);
-  --ui-300: var(--graphite-300); --ui-400: var(--graphite-400); --ui-500: var(--graphite-500);
-  --ui-600: var(--graphite-600); --ui-700: var(--graphite-700); --ui-800: var(--graphite-800);
-  --ui-900: var(--graphite-900); --ui-950: var(--graphite-950);
-}
-.theme-ink {
-  --ui-50: var(--ink-50);   --ui-100: var(--ink-100); --ui-200: var(--ink-200);
-  --ui-300: var(--ink-300); --ui-400: var(--ink-400); --ui-500: var(--ink-500);
-  --ui-600: var(--ink-600); --ui-700: var(--ink-700); --ui-800: var(--ink-800);
-  --ui-900: var(--ink-900); --ui-950: var(--ink-950);
-}
-.theme-paper {
-  --ui-50: var(--paper-50);   --ui-100: var(--paper-100); --ui-200: var(--paper-200);
-  --ui-300: var(--paper-300); --ui-400: var(--paper-400); --ui-500: var(--paper-500);
-  --ui-600: var(--paper-600); --ui-700: var(--paper-700); --ui-800: var(--paper-800);
-  --ui-900: var(--paper-900); --ui-950: var(--paper-950);
+.ink {
+  --foundation: var(--ink-950);
+  --surface: var(--ink-900);
+  --elevated: var(--ink-800);
+  --contrast: var(--ink-100);
+  --muted: var(--ink-400);
+  --soft: var(--ink-600);
+  --secondary: var(--ink-700);
+  --line: color-mix(in srgb, var(--ink-50) 5%, transparent);
+  --edge: color-mix(in srgb, var(--ink-50) 13%, transparent);
+  --solid: var(--ink-700);
+  --shadow-color: 0.125 0.011 259;
+  --shadow-strength: 0.18;
+  --destructive: oklch(0.630 0.200 25);
+  --success: oklch(0.735 0.185 155);
+  --warning: oklch(0.850 0.156 93);
+  --info: var(--wave-400);
 }
 
 /* ---------------------------------------------------------------------------
@@ -350,7 +419,7 @@
 }
 
 /* Shadow scale — layered, tinted by `--shadow-color` and dimmed by
- * `--shadow-strength` (both resolve per :root/.dark, so retinting or dimming
+ * `--shadow-strength` (both resolve per theme, so retinting or dimming
  * every shadow is one token). Tiers differ by layer count + spread, not alpha.
  * Overrides Tailwind's shadow-sm/md/lg. */
 @theme {

package/dist/switch.js

@@ -4,7 +4,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-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", {
+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/30 aria-invalid:border-destructive 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/textarea.js

@@ -9,7 +9,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-hidden 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/30 aria-invalid:border-destructive 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

@@ -7,7 +7,7 @@ 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-hidden";
 declare const toastIconVariants: (props?: ({
-  type?: "loading" | "success" | "info" | "warning" | "error" | null | undefined;
+  type?: "success" | "warning" | "loading" | "info" | "error" | null | undefined;
 } & _$class_variance_authority_types0.ClassProp) | undefined) => string;
 declare const toastViewportVariants: (props?: ({
   position?: "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right" | null | undefined;

package/dist/toggle.js

@@ -4,7 +4,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-hidden 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/30 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.10.1",
+  "version": "0.13.0",
   "description": "Wave UI component library built on Base UI and Tailwind CSS",
   "type": "module",
   "sideEffects": [