@waveso/ui 0.17.0 → 0.18.0

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("@container cursor-clickable data-checked:bg-primary data-unchecked:bg-shade data-unchecked:hover:border-focus focus-visible:border-focus focus-visible:ring-focus/50 aria-invalid:ring-danger/30 aria-invalid:border-danger 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:pointer-events-none data-disabled:opacity-30", {
+const switchVariants = cva("@container cursor-clickable data-checked:bg-primary data-unchecked:bg-neutral data-unchecked:hover:border-focus focus-visible:border-focus focus-visible:ring-focus/50 aria-invalid:ring-danger/30 aria-invalid:border-danger peer relative inline-flex shrink-0 items-center rounded-full border border-transparent motion-color focus-visible:outline-hidden after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 aria-invalid:ring-3 data-disabled:pointer-events-none data-disabled:opacity-30", {
 	variants: { size: {
 		default: "h-6 w-11 p-1",
 		sm: "h-4 w-7 p-0.5"

package/dist/table.js

@@ -47,7 +47,7 @@ function Table({ className, ...props }) {
 function TableHeader({ className, ...props }) {
 	return /* @__PURE__ */ jsx("thead", {
 		"data-slot": "table-header",
-		className: cn("[&_tr]:border-b [&_tr]:border-contour", className),
+		className: cn("[&_tr]:border-b [&_tr]:border-line", className),
 		...props
 	});
 }
@@ -61,14 +61,14 @@ function TableBody({ className, ...props }) {
 function TableFooter({ className, ...props }) {
 	return /* @__PURE__ */ jsx("tfoot", {
 		"data-slot": "table-footer",
-		className: cn("bg-secondary/50 border-t border-contour font-medium [&>tr]:last:border-b-0", className),
+		className: cn("bg-secondary/50 border-t border-line font-medium [&>tr]:last:border-b-0", className),
 		...props
 	});
 }
 function TableRow({ className, ...props }) {
 	return /* @__PURE__ */ jsx("tr", {
 		"data-slot": "table-row",
-		className: cn("hover:bg-highlight data-selected:bg-primary data-selected:text-white data-selected:**:data-[slot=checkbox]:border-white data-selected:**:focus-visible:ring-white/50 border-b border-contour motion-color", className),
+		className: cn("hover:bg-highlighted data-selected:bg-primary data-selected:text-white data-selected:**:data-[slot=checkbox]:border-white border-b border-line motion-color", className),
 		...props
 	});
 }

package/dist/tabs.js

@@ -6,7 +6,7 @@ import { Tabs as Tabs$1 } from "@base-ui/react/tabs";
 //#region src/tabs.tsx
 const tabsListVariants = cva("group/tabs-list inline-flex w-fit items-center justify-center rounded-md p-1 text-muted group-data-[orientation=horizontal]/tabs:h-9 group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col data-[variant=line]:rounded-none", {
 	variants: { variant: {
-		default: "bg-shade",
+		default: "bg-neutral",
 		line: "gap-1 bg-transparent"
 	} },
 	defaultVariants: { variant: "default" }
@@ -30,14 +30,14 @@ function TabsList({ className, variant = "default", ...props }) {
 function TabsTrigger({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Tabs$1.Tab, {
 		"data-slot": "tabs-trigger",
-		className: cn("cursor-clickable text-muted hover:text-contrast relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-2 rounded-sm border border-transparent px-3 py-1 has-data-[icon=inline-end]:pe-2 has-data-[icon=inline-start]:ps-2 text-sm font-medium whitespace-nowrap motion-color outline-hidden focus-visible:border-focus focus-visible:ring-focus/50 focus-visible:ring-3 data-disabled:pointer-events-none data-disabled:opacity-30 group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start group-data-[orientation=vertical]/tabs:py-1.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", "data-active:bg-primary data-active:text-white", "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent group-data-[variant=line]/tabs-list:data-active:text-contrast", "after:bg-contrast after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-end-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100", className),
+		className: cn("cursor-clickable text-muted hover:text-contrast relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-2 rounded-sm border border-transparent px-3 py-1 has-data-[icon=inline-end]:pe-2 has-data-[icon=inline-start]:ps-2 text-sm font-medium whitespace-nowrap motion-color focus-visible:outline-hidden focus-visible:border-focus focus-visible:ring-focus/50 focus-visible:ring-3 data-disabled:pointer-events-none data-disabled:opacity-30 group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start group-data-[orientation=vertical]/tabs:py-1.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", "data-active:bg-primary data-active:text-white", "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent group-data-[variant=line]/tabs-list:data-active:text-contrast", "after:bg-contrast after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-end-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100", className),
 		...props
 	});
 }
 function TabsContent({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Tabs$1.Panel, {
 		"data-slot": "tabs-content",
-		className: cn("flex-1 text-sm outline-hidden", className),
+		className: cn("flex-1 text-sm focus-visible:outline-hidden", className),
 		...props
 	});
 }

package/dist/textarea.js

@@ -3,7 +3,7 @@ import { cn } from "./lib/utils.js";
 import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 //#region src/textarea.tsx
-const textareaVariants = cva("bg-shade hover:border-focus focus-visible:border-focus focus-visible:ring-focus/50 aria-invalid:ring-danger/30 aria-invalid:border-danger resize-y resize-handle disabled:pointer-events-none placeholder:text-soft flex field-sizing-content w-full rounded-md border border-transparent motion-color outline-hidden focus-visible:ring-3 disabled:opacity-30 aria-invalid:ring-3", {
+const textareaVariants = cva("bg-neutral hover:border-focus focus-visible:border-focus focus-visible:ring-focus/50 aria-invalid:ring-danger/30 aria-invalid:border-danger resize-y resize-handle disabled:pointer-events-none placeholder:text-subtle flex field-sizing-content w-full rounded-md border border-transparent motion-color focus-visible:outline-hidden focus-visible:ring-3 disabled:opacity-30 aria-invalid:ring-3", {
 	variants: { size: {
 		xs: "min-h-12 rounded-sm px-2 py-1 text-xs",
 		sm: "min-h-14 px-3 py-1.5 text-sm",

package/dist/toast.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { Toast as Toast$1 } from "@base-ui/react/toast";
 //#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 toastRootClass = "bg-elevated text-contrast border-edge rounded-md p-4 text-sm shadow-md border focus-visible:outline-hidden";
 declare const toastIconVariants: (props?: ({
   type?: "error" | "info" | "loading" | "success" | "warning" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/toast.js

@@ -6,7 +6,7 @@ import * as React from "react";
 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-hidden";
+const toastRootClass = "bg-elevated text-contrast border-edge rounded-md p-4 text-sm shadow-md border focus-visible:outline-hidden";
 const toastIconVariants = cva("mt-0.5 size-4 shrink-0", { variants: { type: {
 	loading: "text-muted motion-spin-sm",
 	success: "text-success",
@@ -14,7 +14,7 @@ const toastIconVariants = cva("mt-0.5 size-4 shrink-0", { variants: { type: {
 	warning: "text-warning",
 	error: "text-danger"
 } } });
-const toastViewportVariants = cva("fixed z-[100] flex w-full outline-hidden sm:max-w-sm", {
+const toastViewportVariants = cva("fixed z-[100] flex w-full focus-visible: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-highlight inline-flex h-7 items-center rounded-md border border-contour 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),
+		className: cn("hover:bg-highlighted inline-flex h-7 items-center rounded-md border border-line px-2.5 text-xs font-medium transition-colors focus-visible: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:bg-highlight hover:text-contrast shrink-0 rounded-md p-0.5 transition-colors outline-hidden focus-visible:ring-focus/50 focus-visible:ring-3", className),
+		className: cn("text-muted hover:bg-highlighted hover:text-contrast shrink-0 rounded-md p-0.5 transition-colors focus-visible: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

@@ -4,11 +4,11 @@ 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 focus-visible:border-focus focus-visible:ring-focus/50 aria-invalid:ring-danger/30 aria-invalid:border-danger rounded-md border border-transparent bg-clip-padding 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 data-disabled:pointer-events-none data-disabled:opacity-30 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-hidden group/toggle select-none active:scale-[0.97]", {
+const toggleVariants = cva("cursor-clickable focus-visible:border-focus focus-visible:ring-focus/50 aria-invalid:ring-danger/30 aria-invalid:border-danger rounded-md border border-transparent bg-clip-padding 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 data-disabled:pointer-events-none data-disabled:opacity-30 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 focus-visible:outline-hidden group/toggle select-none active:scale-[0.97]", {
 	variants: {
 		variant: {
-			default: "text-contrast hover:bg-highlight data-pressed:bg-primary data-pressed:text-white data-pressed:hover:bg-primary/80 not-supports-backdrop-filter:data-pressed:hover:bg-primary/90 data-pressed:hover:backdrop-blur-xl data-pressed:hover:backdrop-saturate-150",
-			outline: "border-shade bg-foundation hover:bg-highlight hover:text-contrast data-pressed:border-primary data-pressed:bg-primary data-pressed:text-white data-pressed:hover:bg-primary/80 not-supports-backdrop-filter:data-pressed:hover:bg-primary/90 data-pressed:hover:backdrop-blur-xl data-pressed:hover:backdrop-saturate-150"
+			default: "text-contrast hover:bg-highlighted data-pressed:bg-primary data-pressed:text-white data-pressed:hover:bg-primary/80 not-supports-backdrop-filter:data-pressed:hover:bg-primary/90 data-pressed:hover:backdrop-blur-xl data-pressed:hover:backdrop-saturate-150",
+			outline: "border-contour bg-foundation hover:bg-highlighted hover:text-contrast data-pressed:border-primary data-pressed:bg-primary data-pressed:text-white data-pressed:hover:bg-primary/80 not-supports-backdrop-filter:data-pressed:hover:bg-primary/90 data-pressed:hover:backdrop-blur-xl data-pressed:hover:backdrop-saturate-150"
 		},
 		size: {
 			default: "h-9 min-w-9 gap-1.5 px-3 text-base has-data-[icon=inline-end]:pe-2.5 has-data-[icon=inline-start]:ps-2.5",

package/package.json

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