@waveso/ui 0.15.1 → 0.17.0

package/dist/sidebar.js

@@ -163,14 +163,14 @@ function Sidebar({ side = "left", variant = "sidebar", collapsible = "offcanvas"
 			className: cn("relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear", "group-data-[collapsible=offcanvas]:w-0", "group-data-[side=right]:rotate-180", variant === "floating" || variant === "inset" ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)")
 		}), /* @__PURE__ */ jsx("div", {
 			"data-slot": "sidebar-container",
-			className: cn("fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex", side === "left" ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]" : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]", variant === "floating" || variant === "inset" ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) after:absolute after:inset-y-0 after:w-px after:bg-line" + (side === "left" ? " after:right-0" : " after:left-0"), className),
+			className: cn("fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex", side === "left" ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]" : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]", variant === "floating" || variant === "inset" ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) after:absolute after:inset-y-0 after:w-px after:bg-contour" + (side === "left" ? " after:right-0" : " after:left-0"), className),
 			...props,
 			children: /* @__PURE__ */ jsx(TooltipProvider, {
 				delay: 0,
 				closeDelay: 300,
 				children: /* @__PURE__ */ jsx("div", {
 					"data-slot": "sidebar-inner",
-					className: "bg-surface group-data-[variant=floating]:ring-line group-data-[variant=floating]:rounded-md group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 flex size-full flex-col",
+					className: "bg-surface group-data-[variant=floating]:ring-contour group-data-[variant=floating]:rounded-md group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 flex size-full flex-col",
 					children
 				})
 			})
@@ -204,7 +204,7 @@ function SidebarRail({ className, ...props }) {
 		tabIndex: -1,
 		onClick: toggleSidebar,
 		title: "Toggle Sidebar",
-		className: cn("hover:after:bg-line absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-[left,right,transform] duration-200 ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex", "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize", "[[data-side=left][data-closed]_&]:cursor-e-resize [[data-side=right][data-closed]_&]:cursor-w-resize", "hover:group-data-[collapsible=offcanvas]:bg-surface group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full", "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2", "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2", className),
+		className: cn("hover:after:bg-contour absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-[left,right,transform] duration-200 ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex", "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize", "[[data-side=left][data-closed]_&]:cursor-e-resize [[data-side=right][data-closed]_&]:cursor-w-resize", "hover:group-data-[collapsible=offcanvas]:bg-surface group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full", "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2", "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2", className),
 		...props
 	});
 }
@@ -239,7 +239,7 @@ function SidebarFooter({ className, ...props }) {
 function SidebarSeparator({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Separator, {
 		"data-slot": "sidebar-separator",
-		className: cn("bg-line mx-2 data-[orientation=horizontal]:w-auto", className),
+		className: cn("bg-contour mx-2 data-[orientation=horizontal]:w-auto", className),
 		...props
 	});
 }
@@ -273,7 +273,7 @@ function SidebarGroupLabel({ className, render, ...props }) {
 function SidebarGroupAction({ className, render, ...props }) {
 	return useRender({
 		defaultTagName: "button",
-		props: mergeProps({ className: cn("text-contrast ring-focus/50 hover:bg-primary hover:text-white absolute top-1.5 right-3 w-5 rounded-sm p-0 focus-visible:ring-3 [&>svg]:size-4 flex aspect-square items-center justify-center outline-hidden transition-transform [&>svg]:shrink-0 after:absolute after:-inset-2 md:after:hidden group-data-[collapsible=icon]:hidden", className) }, props),
+		props: mergeProps({ className: cn("text-contrast ring-focus/50 hover:bg-highlight absolute top-1.5 right-3 w-5 rounded-sm p-0 focus-visible:ring-3 [&>svg]:size-4 flex aspect-square items-center justify-center outline-hidden transition-transform [&>svg]:shrink-0 after:absolute after:-inset-2 md:after:hidden group-data-[collapsible=icon]:hidden", className) }, props),
 		render,
 		state: { slot: "sidebar-group-action" }
 	});
@@ -299,11 +299,11 @@ function SidebarMenuItem({ className, ...props }) {
 		...props
 	});
 }
-const sidebarMenuButtonVariants = cva("ring-focus/50 hover:bg-primary hover:text-white active:bg-primary active:text-white data-active:bg-primary data-active:text-white data-open:hover:bg-primary data-open:hover:text-white gap-2 rounded-md p-2 text-left text-sm transition-[width,height,padding] group-has-data-[slot=sidebar-menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:w-full group-data-[collapsible=icon]:aspect-square group-data-[collapsible=icon]:h-11 focus-visible:ring-3 data-active:font-medium peer/menu-button flex w-full items-center overflow-hidden outline-hidden group/menu-button disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&_svg]:shrink-0", {
+const sidebarMenuButtonVariants = cva("ring-focus/50 hover:bg-highlight active:bg-highlight data-active:bg-primary data-active:text-white gap-2 rounded-md p-2 text-left text-sm transition-[width,height,padding] group-has-data-[slot=sidebar-menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:w-full group-data-[collapsible=icon]:aspect-square group-data-[collapsible=icon]:h-11 focus-visible:ring-3 data-active:font-medium peer/menu-button flex w-full items-center overflow-hidden outline-hidden group/menu-button disabled:pointer-events-none disabled:opacity-30 aria-disabled:pointer-events-none aria-disabled:opacity-30 [&>span:last-child]:truncate [&_svg]:shrink-0", {
 	variants: {
 		variant: {
-			default: "hover:bg-primary hover:text-white",
-			outline: "bg-foundation hover:bg-primary hover:text-white ring-1 ring-line hover:ring-focus"
+			default: "",
+			outline: "bg-foundation hover:bg-highlight ring-1 ring-contour hover:ring-focus"
 		},
 		size: {
 			default: "h-11 text-sm",
@@ -344,7 +344,7 @@ function SidebarMenuButton({ render, isActive = false, variant = "default", size
 function SidebarMenuAction({ className, render, showOnHover = false, ...props }) {
 	return useRender({
 		defaultTagName: "button",
-		props: mergeProps({ className: cn("text-contrast ring-focus/50 hover:bg-primary hover:text-white peer-hover/menu-button:text-white absolute top-1/2 -translate-y-1/2 right-1 aspect-square w-5 rounded-sm p-0 focus-visible:ring-3 [&>svg]:size-4 flex items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0", showOnHover && "peer-data-active/menu-button:text-white group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-open:opacity-100 md:opacity-0", className) }, props),
+		props: mergeProps({ className: cn("text-contrast ring-focus/50 hover:bg-highlight peer-data-active/menu-button:text-white absolute top-1/2 -translate-y-1/2 right-1 aspect-square w-5 rounded-sm p-0 focus-visible:ring-3 [&>svg]:size-4 flex items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0", showOnHover && "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-open:opacity-100 md:opacity-0", className) }, props),
 		render,
 		state: { slot: "sidebar-menu-action" }
 	});
@@ -352,7 +352,7 @@ function SidebarMenuAction({ className, render, showOnHover = false, ...props })
 function SidebarMenuBadge({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "sidebar-menu-badge",
-		className: cn("text-contrast peer-hover/menu-button:text-white peer-data-active/menu-button:text-white pointer-events-none absolute right-1 top-1/2 -translate-y-1/2 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none group-data-[collapsible=icon]:hidden", className),
+		className: cn("text-contrast peer-data-active/menu-button:text-white pointer-events-none absolute right-1 top-1/2 -translate-y-1/2 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none group-data-[collapsible=icon]:hidden", className),
 		...props
 	});
 }
@@ -373,7 +373,7 @@ function SidebarMenuSkeleton({ className, showIcon = false, ...props }) {
 function SidebarMenuSub({ className, ...props }) {
 	return /* @__PURE__ */ jsx("ul", {
 		"data-slot": "sidebar-menu-sub",
-		className: cn("border-line ml-3.5 mr-0 translate-x-px gap-0.5 border-l pl-2.5 pr-0 py-0.5 group-data-[collapsible=icon]:hidden flex min-w-0 flex-col", className),
+		className: cn("border-contour ml-3.5 mr-0 translate-x-px gap-0.5 border-l pl-2.5 pr-0 py-0.5 group-data-[collapsible=icon]:hidden flex min-w-0 flex-col", className),
 		...props
 	});
 }
@@ -387,7 +387,7 @@ function SidebarMenuSubItem({ className, ...props }) {
 function SidebarMenuSubButton({ render, size = "md", isActive = false, className, ...props }) {
 	return useRender({
 		defaultTagName: "a",
-		props: mergeProps({ className: cn("text-contrast ring-focus/50 hover:bg-primary hover:text-white active:bg-primary active:text-white [&>svg]:text-white data-active:bg-primary data-active:text-white h-7 gap-2 rounded-md px-2 focus-visible:ring-3 data-[size=md]:text-sm data-[size=sm]:text-xs [&>svg]:size-4 flex min-w-0 -translate-x-px items-center overflow-hidden outline-hidden group-data-[collapsible=icon]:hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:shrink-0", className) }, props),
+		props: mergeProps({ className: cn("text-contrast ring-focus/50 hover:bg-highlight active:bg-highlight data-active:bg-primary data-active:text-white h-7 gap-2 rounded-md px-2 focus-visible:ring-3 data-[size=md]:text-sm data-[size=sm]:text-xs [&>svg]:size-4 flex min-w-0 -translate-x-px items-center overflow-hidden outline-hidden group-data-[collapsible=icon]:hidden disabled:pointer-events-none disabled:opacity-30 aria-disabled:pointer-events-none aria-disabled:opacity-30 [&>span:last-child]:truncate [&>svg]:shrink-0", className) }, props),
 		render,
 		state: {
 			slot: "sidebar-menu-sub-button",

package/dist/slider.js

@@ -23,10 +23,10 @@ function Slider({ className, controlClassName, defaultValue, value, min = 0, max
 		...props,
 		children: /* @__PURE__ */ jsxs(Slider$1.Control, {
 			"data-slot": "slider-control",
-			className: cn("relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-disabled:cursor-not-allowed data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-40 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col", controlClassName),
+			className: cn("relative flex w-full touch-none items-center select-none data-disabled:pointer-events-none data-disabled:opacity-30 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-40 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col", controlClassName),
 			children: [/* @__PURE__ */ jsx(Slider$1.Track, {
 				"data-slot": "slider-track",
-				className: "bg-secondary relative grow overflow-hidden rounded-full select-none data-[orientation=horizontal]:h-1 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1",
+				className: "bg-shade relative grow overflow-hidden rounded-full select-none data-[orientation=horizontal]:h-2 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-2",
 				children: /* @__PURE__ */ jsx(Slider$1.Indicator, {
 					"data-slot": "slider-range",
 					className: "bg-primary select-none data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
@@ -34,7 +34,7 @@ function Slider({ className, controlClassName, defaultValue, value, min = 0, max
 			}), Array.from({ length: resolvedValues.length }, (_, index) => /* @__PURE__ */ jsx(Slider$1.Thumb, {
 				"data-slot": "slider-thumb",
 				"aria-label": getThumbAriaLabel ? getThumbAriaLabel(index) : ariaLabel,
-				className: "border-focus ring-focus/50 relative block size-3 shrink-0 rounded-full border bg-white motion-color cursor-clickable select-none after:absolute after:-inset-2 hover:ring-3 focus-visible:ring-3 focus-visible:outline-hidden active:ring-3 data-disabled:pointer-events-none"
+				className: "ring-focus/50 relative block data-[orientation=horizontal]:h-4 data-[orientation=horizontal]:w-6 data-[orientation=vertical]:h-6 data-[orientation=vertical]:w-4 shrink-0 rounded-full border border-shade bg-white motion-color cursor-clickable select-none after:absolute after:-inset-2 hover:ring-3 focus-visible:ring-3 focus-visible:outline-hidden active:ring-3 data-disabled:pointer-events-none"
 			}, index))]
 		})
 	});

package/dist/spinner.d.ts

@@ -1,6 +1,13 @@
 import * as React from "react";
 //#region src/spinner.d.ts
 type SpinnerProps = React.ComponentProps<"svg">;
+/**
+ * A circle with a gap, rotating — drawn in `currentColor` so it takes the tone
+ * of whatever it sits in, and sized in `em` so it matches the text/icon beside
+ * it without a size prop at every call site. The `<svg>` itself is the
+ * accessible status (`role="status"` + `aria-label`), so pass `aria-label` to
+ * override the announced text.
+ */
 declare function Spinner({ className, ...props }: SpinnerProps): React.JSX.Element;
 //#endregion
 export { Spinner, type SpinnerProps };

package/dist/spinner.js

@@ -1,15 +1,33 @@
 import { cn } from "./lib/utils.js";
-import { LoaderIcon } from "./lib/internal-icons.js";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/spinner.tsx
+/**
+* A circle with a gap, rotating — drawn in `currentColor` so it takes the tone
+* of whatever it sits in, and sized in `em` so it matches the text/icon beside
+* it without a size prop at every call site. The `<svg>` itself is the
+* accessible status (`role="status"` + `aria-label`), so pass `aria-label` to
+* override the announced text.
+*/
 function Spinner({ className, ...props }) {
-	return /* @__PURE__ */ jsx(LoaderIcon, {
+	return /* @__PURE__ */ jsxs("svg", {
 		"data-slot": "spinner",
 		role: "status",
 		"aria-label": "Loading",
-		"aria-hidden": false,
-		className: cn("size-4 animate-spin", className),
-		...props
+		viewBox: "0 0 24 24",
+		className: cn("size-[1.15em] shrink-0 motion-spin-sm", className),
+		...props,
+		children: [/* @__PURE__ */ jsx("circle", {
+			cx: "12",
+			cy: "12",
+			r: "8",
+			strokeWidth: "3",
+			className: "fill-none stroke-current opacity-20"
+		}), /* @__PURE__ */ jsx("path", {
+			d: "M20 12a8 8 0 0 0-8-8",
+			strokeWidth: "3",
+			strokeLinecap: "round",
+			className: "fill-none stroke-current"
+		})]
 	});
 }
 //#endregion