@waveso/ui 0.15.0 → 0.16.0

package/dist/switch.d.ts

@@ -1,18 +1,11 @@
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import * as React from "react";
 import { VariantProps } from "class-variance-authority";
 import { Switch as Switch$1 } from "@base-ui/react/switch";
-import * as _$class_variance_authority_types0 from "class-variance-authority/types";
-
 //#region src/switch.d.ts
 declare const switchVariants: (props?: ({
   size?: "default" | "sm" | null | undefined;
-} & _$class_variance_authority_types0.ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type SwitchProps = React.ComponentProps<typeof Switch$1.Root> & VariantProps<typeof switchVariants>;
-declare function Switch({
-  className,
-  size,
-  ...props
-}: SwitchProps): _$react_jsx_runtime0.JSX.Element;
+declare function Switch({ className, size, ...props }: SwitchProps): React.JSX.Element;
 //#endregion
 export { Switch, type SwitchProps, switchVariants };

package/dist/switch.js

@@ -4,17 +4,17 @@ 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/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", {
+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", {
 	variants: { size: {
-		default: "h-[18.4px] w-[32px]",
-		sm: "h-[14px] w-[24px]"
+		default: "h-6 w-11 p-1",
+		sm: "h-4 w-7 p-0.5"
 	} },
 	defaultVariants: { size: "default" }
 });
-const switchThumbVariants = cva("bg-foundation dark:data-unchecked:bg-contrast dark:data-checked:bg-white pointer-events-none block rounded-full ring-0 transition-transform data-checked:translate-x-[calc(100%-2px)] data-unchecked:translate-x-0", {
+const switchThumbVariants = cva("bg-white pointer-events-none block rounded-full ring-0 transition-transform data-checked:translate-x-[calc(100cqw_-_100%)] rtl:data-checked:-translate-x-[calc(100cqw_-_100%)] data-unchecked:translate-x-0 rtl:data-unchecked:-translate-x-0", {
 	variants: { size: {
-		default: "size-4",
-		sm: "size-3"
+		default: "h-4 w-6",
+		sm: "h-3 w-4"
 	} },
 	defaultVariants: { size: "default" }
 });

package/dist/table.d.ts

@@ -1,6 +1,4 @@
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import * as React from "react";
-
 //#region src/table.d.ts
 type TableProps = React.ComponentProps<"table">;
 type TableHeaderProps = React.ComponentProps<"thead">;
@@ -10,37 +8,19 @@ type TableRowProps = React.ComponentProps<"tr">;
 type TableHeadProps = React.ComponentProps<"th">;
 type TableCellProps = React.ComponentProps<"td">;
 type TableCaptionProps = React.ComponentProps<"caption">;
-declare function Table({
-  className,
-  ...props
-}: TableProps): _$react_jsx_runtime0.JSX.Element;
-declare function TableHeader({
-  className,
-  ...props
-}: TableHeaderProps): _$react_jsx_runtime0.JSX.Element;
-declare function TableBody({
-  className,
-  ...props
-}: TableBodyProps): _$react_jsx_runtime0.JSX.Element;
-declare function TableFooter({
-  className,
-  ...props
-}: TableFooterProps): _$react_jsx_runtime0.JSX.Element;
-declare function TableRow({
-  className,
-  ...props
-}: TableRowProps): _$react_jsx_runtime0.JSX.Element;
-declare function TableHead({
-  className,
-  ...props
-}: TableHeadProps): _$react_jsx_runtime0.JSX.Element;
-declare function TableCell({
-  className,
-  ...props
-}: TableCellProps): _$react_jsx_runtime0.JSX.Element;
-declare function TableCaption({
-  className,
-  ...props
-}: TableCaptionProps): _$react_jsx_runtime0.JSX.Element;
+/**
+ * A data table. When it's wider than its container it scrolls sideways, and
+ * only then does the container become a focusable, named region, so keyboard
+ * users can scroll it: a table that fits isn't a stray tab stop. The region
+ * takes its name from the `TableCaption`, or from the table's `aria-label`.
+ */
+declare function Table({ className, ...props }: TableProps): React.JSX.Element;
+declare function TableHeader({ className, ...props }: TableHeaderProps): React.JSX.Element;
+declare function TableBody({ className, ...props }: TableBodyProps): React.JSX.Element;
+declare function TableFooter({ className, ...props }: TableFooterProps): React.JSX.Element;
+declare function TableRow({ className, ...props }: TableRowProps): React.JSX.Element;
+declare function TableHead({ className, ...props }: TableHeadProps): React.JSX.Element;
+declare function TableCell({ className, ...props }: TableCellProps): React.JSX.Element;
+declare function TableCaption({ className, id, ...props }: TableCaptionProps): React.JSX.Element;
 //#endregion
 export { Table, TableBody, type TableBodyProps, TableCaption, type TableCaptionProps, TableCell, type TableCellProps, TableFooter, type TableFooterProps, TableHead, type TableHeadProps, TableHeader, type TableHeaderProps, type TableProps, TableRow, type TableRowProps };

package/dist/table.js

@@ -1,14 +1,43 @@
+"use client";
 import { cn } from "./lib/utils.js";
 import { jsx } from "react/jsx-runtime";
+import * as React from "react";
 //#region src/table.tsx
+/**
+* A data table. When it's wider than its container it scrolls sideways, and
+* only then does the container become a focusable, named region, so keyboard
+* users can scroll it: a table that fits isn't a stray tab stop. The region
+* takes its name from the `TableCaption`, or from the table's `aria-label`.
+*/
 function Table({ className, ...props }) {
+	const containerRef = React.useRef(null);
+	const tableRef = React.useRef(null);
+	const [isScrollable, setIsScrollable] = React.useState(false);
+	const [captionId, setCaptionId] = React.useState();
+	React.useLayoutEffect(() => {
+		const container = containerRef.current;
+		const table = tableRef.current;
+		if (!container || !table) return;
+		const measure = () => {
+			setIsScrollable(container.scrollWidth > container.clientWidth);
+			setCaptionId(table.querySelector(":scope > caption")?.id || void 0);
+		};
+		measure();
+		const observer = new ResizeObserver(measure);
+		observer.observe(container);
+		observer.observe(table);
+		return () => observer.disconnect();
+	}, []);
 	return /* @__PURE__ */ jsx("div", {
+		ref: containerRef,
 		"data-slot": "table-container",
-		role: "region",
-		"aria-label": "Table",
-		tabIndex: 0,
+		role: isScrollable ? "region" : void 0,
+		"aria-labelledby": isScrollable ? captionId : void 0,
+		"aria-label": isScrollable && !captionId ? props["aria-label"] : void 0,
+		tabIndex: isScrollable ? 0 : void 0,
 		className: "relative w-full overflow-x-auto focus-visible:outline-hidden focus-visible:ring-3 focus-visible:ring-focus/50",
 		children: /* @__PURE__ */ jsx("table", {
+			ref: tableRef,
 			"data-slot": "table",
 			className: cn("w-full caption-bottom text-sm", className),
 			...props
@@ -18,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-edge", className),
+		className: cn("[&_tr]:border-b [&_tr]:border-contour", className),
 		...props
 	});
 }
@@ -32,33 +61,35 @@ function TableBody({ className, ...props }) {
 function TableFooter({ className, ...props }) {
 	return /* @__PURE__ */ jsx("tfoot", {
 		"data-slot": "table-footer",
-		className: cn("bg-secondary/50 border-t border-edge font-medium [&>tr]:last:border-b-0", className),
+		className: cn("bg-secondary/50 border-t border-contour 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-secondary/50 aria-selected:bg-secondary border-b border-edge transition-colors", className),
+		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),
 		...props
 	});
 }
 function TableHead({ className, ...props }) {
 	return /* @__PURE__ */ jsx("th", {
 		"data-slot": "table-head",
-		className: cn("text-contrast h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0", className),
+		className: cn("text-contrast h-12 px-3 text-start align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pe-0", className),
 		...props
 	});
 }
 function TableCell({ className, ...props }) {
 	return /* @__PURE__ */ jsx("td", {
 		"data-slot": "table-cell",
-		className: cn("p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0", className),
+		className: cn("p-3 align-middle whitespace-nowrap [&:has([role=checkbox])]:pe-0", className),
 		...props
 	});
 }
-function TableCaption({ className, ...props }) {
+function TableCaption({ className, id, ...props }) {
+	const generatedId = React.useId();
 	return /* @__PURE__ */ jsx("caption", {
+		id: id ?? generatedId,
 		"data-slot": "table-caption",
 		className: cn("text-muted mt-4 text-sm", className),
 		...props

package/dist/tabs.d.ts

@@ -1,35 +1,18 @@
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import * as React from "react";
 import { VariantProps } from "class-variance-authority";
 import { Tabs as Tabs$1 } from "@base-ui/react/tabs";
-import * as _$class_variance_authority_types0 from "class-variance-authority/types";
-
 //#region src/tabs.d.ts
 declare const tabsListVariants: (props?: ({
   variant?: "default" | "line" | null | undefined;
-} & _$class_variance_authority_types0.ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type TabsProps = React.ComponentProps<typeof Tabs$1.Root>;
 type TabsListBaseProps = React.ComponentProps<typeof Tabs$1.List>;
 type TabsListProps = TabsListBaseProps & VariantProps<typeof tabsListVariants>;
 type TabsTriggerProps = React.ComponentProps<typeof Tabs$1.Tab>;
 type TabsContentProps = React.ComponentProps<typeof Tabs$1.Panel>;
-declare function Tabs({
-  className,
-  orientation,
-  ...props
-}: TabsProps): _$react_jsx_runtime0.JSX.Element;
-declare function TabsList({
-  className,
-  variant,
-  ...props
-}: TabsListProps): _$react_jsx_runtime0.JSX.Element;
-declare function TabsTrigger({
-  className,
-  ...props
-}: TabsTriggerProps): _$react_jsx_runtime0.JSX.Element;
-declare function TabsContent({
-  className,
-  ...props
-}: TabsContentProps): _$react_jsx_runtime0.JSX.Element;
+declare function Tabs({ className, orientation, ...props }: TabsProps): React.JSX.Element;
+declare function TabsList({ className, variant, ...props }: TabsListProps): React.JSX.Element;
+declare function TabsTrigger({ className, ...props }: TabsTriggerProps): React.JSX.Element;
+declare function TabsContent({ className, ...props }: TabsContentProps): React.JSX.Element;
 //#endregion
 export { Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTrigger, type TabsTriggerProps, tabsListVariants };

package/dist/tabs.js

@@ -4,9 +4,9 @@ import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 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-[3px] text-muted group-data-[orientation=horizontal]/tabs:h-8 group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col data-[variant=line]:rounded-none", {
+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-secondary",
+		default: "bg-shade",
 		line: "gap-1 bg-transparent"
 	} },
 	defaultVariants: { variant: "default" }
@@ -30,7 +30,7 @@ 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-contrast/60 hover:text-contrast dark:text-muted dark:hover:text-contrast relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-sm border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap motion-color focus-visible:border-focus focus-visible:ring-focus/50 focus-visible:outline-focus focus-visible:ring-3 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", "data-active:bg-foundation data-active:text-contrast data-active:shadow-sm dark:data-active:text-contrast dark:data-active:border-edge dark:data-active:bg-edge/30", "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:shadow-none dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent", "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:-right-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 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
 	});
 }

package/dist/textarea.d.ts

@@ -1,22 +1,13 @@
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import * as React from "react";
 import { VariantProps } from "class-variance-authority";
-import * as _$class_variance_authority_types0 from "class-variance-authority/types";
-
 //#region src/textarea.d.ts
 declare const textareaVariants: (props?: ({
-  size?: "default" | "sm" | "xs" | "lg" | null | undefined;
-} & _$class_variance_authority_types0.ClassProp) | undefined) => string;
+  size?: "default" | "lg" | "sm" | "xs" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type TextareaProps = Omit<React.ComponentProps<"textarea">, "onChange"> & {
   onChange?: React.ChangeEventHandler<HTMLTextAreaElement>;
   onValueChange?: (value: string) => void;
 } & VariantProps<typeof textareaVariants>;
-declare function Textarea({
-  className,
-  size,
-  onChange,
-  onValueChange,
-  ...props
-}: TextareaProps): _$react_jsx_runtime0.JSX.Element;
+declare function Textarea({ className, size, onChange, onValueChange, ...props }: TextareaProps): React.JSX.Element;
 //#endregion
 export { Textarea, type TextareaProps, textareaVariants };

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-edge hover:border-focus focus-visible:border-focus focus-visible:ring-focus/50 aria-invalid:ring-destructive/30 aria-invalid:border-destructive 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-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", {
 	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,17 +1,13 @@
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import * as React from "react";
 import { Toast as Toast$1 } from "@base-ui/react/toast";
-import * as _$class_variance_authority_types0 from "class-variance-authority/types";
-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;
-} & _$class_variance_authority_types0.ClassProp) | undefined) => string;
+  type?: "error" | "info" | "loading" | "success" | "warning" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare const toastViewportVariants: (props?: ({
-  position?: "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right" | null | undefined;
-} & _$class_variance_authority_types0.ClassProp) | undefined) => string;
+  position?: "bottom-center" | "bottom-left" | "bottom-right" | "top-center" | "top-left" | "top-right" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type ToastType = "loading" | "success" | "info" | "warning" | "error";
 type ToastOptions = {
   title?: string;
@@ -37,7 +33,7 @@ type ToastTitleProps = React.ComponentProps<typeof Toast$1.Title>;
 type ToastDescriptionProps = React.ComponentProps<typeof Toast$1.Description>;
 type ToastActionProps = React.ComponentProps<typeof Toast$1.Action>;
 type ToastCloseProps = React.ComponentProps<typeof Toast$1.Close>;
-declare const toastManager: _$_base_ui_react0.ToastManager<any>;
+declare const toastManager: import("@base-ui/react").ToastManager<any>;
 declare const toast: ((titleOrOptions: string | ToastOptions) => string) & {
   success: (title: string, options?: Omit<ToastOptions, "type" | "title">) => string;
   error: (title: string, options?: Omit<ToastOptions, "type" | "title">) => string;
@@ -46,36 +42,14 @@ declare const toast: ((titleOrOptions: string | ToastOptions) => string) & {
   loading: (title: string, options?: Omit<ToastOptions, "type" | "title">) => string;
   dismiss: (id: string) => void;
   update: (id: string, updates: Partial<ToastOptions>) => void;
-  promise: <Value, T extends any = any>(promiseValue: Promise<Value>, options: _$_base_ui_react0.ToastManagerPromiseOptions<Value, T>) => Promise<Value>;
+  promise: <Value, T extends any = any>(promiseValue: Promise<Value>, options: import("@base-ui/react").ToastManagerPromiseOptions<Value, T>) => Promise<Value>;
 };
-declare function ToastIcon({
-  type
-}: ToastIconProps): _$react_jsx_runtime0.JSX.Element | null;
-declare function Toast({
-  className,
-  ...props
-}: ToastProps): _$react_jsx_runtime0.JSX.Element;
-declare function ToastTitle({
-  className,
-  ...props
-}: ToastTitleProps): _$react_jsx_runtime0.JSX.Element;
-declare function ToastDescription({
-  className,
-  ...props
-}: ToastDescriptionProps): _$react_jsx_runtime0.JSX.Element;
-declare function ToastAction({
-  className,
-  ...props
-}: ToastActionProps): _$react_jsx_runtime0.JSX.Element;
-declare function ToastClose({
-  className,
-  children,
-  ...props
-}: ToastCloseProps): _$react_jsx_runtime0.JSX.Element;
-declare function Toaster({
-  position,
-  limit,
-  timeout
-}: ToasterProps): _$react_jsx_runtime0.JSX.Element | null;
+declare function ToastIcon({ type }: ToastIconProps): React.JSX.Element | null;
+declare function Toast({ className, ...props }: ToastProps): React.JSX.Element;
+declare function ToastTitle({ className, ...props }: ToastTitleProps): React.JSX.Element;
+declare function ToastDescription({ className, ...props }: ToastDescriptionProps): React.JSX.Element;
+declare function ToastAction({ className, ...props }: ToastActionProps): React.JSX.Element;
+declare function ToastClose({ className, children, ...props }: ToastCloseProps): React.JSX.Element;
+declare function Toaster({ position, limit, timeout }: ToasterProps): React.JSX.Element | null;
 //#endregion
 export { Toast, ToastAction, type ToastActionProps, ToastClose, type ToastCloseProps, ToastDescription, type ToastDescriptionProps, ToastIcon, type ToastIconProps, type ToastOptions, type ToastProps, ToastTitle, type ToastTitleProps, type ToastType, Toaster, type ToasterPosition, type ToasterProps, toast, toastIconVariants, toastManager, toastRootClass, toastViewportVariants };

package/dist/toast.js

@@ -8,11 +8,11 @@ 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 toastIconVariants = cva("mt-0.5 size-4 shrink-0", { variants: { type: {
-	loading: "text-muted animate-spin",
+	loading: "text-muted motion-spin-sm",
 	success: "text-success",
 	info: "text-info",
 	warning: "text-warning",
-	error: "text-destructive"
+	error: "text-danger"
 } } });
 const toastViewportVariants = cva("fixed z-[100] flex w-full outline-hidden sm:max-w-sm", {
 	variants: { position: {
@@ -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-hidden focus-visible:border-focus focus-visible:ring-focus/50 focus-visible:ring-3", className),
+		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),
 		...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-hidden focus-visible:ring-focus/50 focus-visible:ring-3", className),
+		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),
 		...props,
 		children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(CloseIcon, { className: "size-4" }), /* @__PURE__ */ jsx("span", {
 			className: "sr-only",

package/dist/toggle-group.d.ts

@@ -1,30 +1,14 @@
 import { toggleVariants } from "./toggle.js";
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import * as React from "react";
 import { VariantProps } from "class-variance-authority";
 import { Toggle } from "@base-ui/react/toggle";
 import { ToggleGroup as ToggleGroup$1 } from "@base-ui/react/toggle-group";
-
 //#region src/toggle-group.d.ts
 type ToggleGroupProps = ToggleGroup$1.Props & VariantProps<typeof toggleVariants> & {
   spacing?: number;
 };
 type ToggleGroupItemProps = Toggle.Props & VariantProps<typeof toggleVariants>;
-declare function ToggleGroup({
-  className,
-  variant,
-  size,
-  spacing,
-  orientation,
-  style,
-  children,
-  ...props
-}: ToggleGroupProps): _$react_jsx_runtime0.JSX.Element;
-declare function ToggleGroupItem({
-  className,
-  children,
-  variant,
-  size,
-  ...props
-}: ToggleGroupItemProps): _$react_jsx_runtime0.JSX.Element;
+declare function ToggleGroup({ className, variant, size, spacing, orientation, style, children, ...props }: ToggleGroupProps): React.JSX.Element;
+declare function ToggleGroupItem({ className, children, variant, size, ...props }: ToggleGroupItemProps): React.JSX.Element;
 //#endregion
 export { ToggleGroup, ToggleGroupItem, type ToggleGroupItemProps, type ToggleGroupProps };

package/dist/toggle-group.js

@@ -9,10 +9,21 @@ import { ToggleGroup as ToggleGroup$1 } from "@base-ui/react/toggle-group";
 const ToggleGroupContext = React.createContext({
 	size: void 0,
 	variant: void 0,
-	spacing: 0,
+	spacing: 2,
 	orientation: "horizontal"
 });
-function ToggleGroup({ className, variant, size, spacing = 0, orientation = "horizontal", style, children, ...props }) {
+function ToggleGroup({ className, variant, size, spacing = 2, orientation = "horizontal", style, children, ...props }) {
+	const contextValue = React.useMemo(() => ({
+		variant,
+		size,
+		spacing,
+		orientation
+	}), [
+		variant,
+		size,
+		spacing,
+		orientation
+	]);
 	return /* @__PURE__ */ jsx(ToggleGroup$1, {
 		orientation,
 		"data-slot": "toggle-group",
@@ -20,18 +31,13 @@ function ToggleGroup({ className, variant, size, spacing = 0, orientation = "hor
 		"data-size": size,
 		"data-spacing": spacing,
 		style: {
-			...style ?? {},
+			...style,
 			"--gap": spacing
 		},
 		className: cn("group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] rounded-md data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch data-[size=sm]:rounded-sm", className),
 		...props,
 		children: /* @__PURE__ */ jsx(ToggleGroupContext.Provider, {
-			value: {
-				variant,
-				size,
-				spacing,
-				orientation
-			},
+			value: contextValue,
 			children
 		})
 	});
@@ -43,7 +49,7 @@ function ToggleGroupItem({ className, children, variant = "default", size = "def
 		"data-variant": context.variant ?? variant,
 		"data-size": context.size ?? size,
 		"data-spacing": context.spacing,
-		className: cn("shrink-0 group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 focus:z-10 focus-visible:z-10 group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:first:rounded-l-md group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:first:rounded-t-md group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:last:rounded-r-md group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:last:rounded-b-md group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t", toggleVariants({
+		className: cn("shrink-0 group-data-[spacing=0]/toggle-group:px-2 focus:z-10 focus-visible:z-10 group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:data-[variant=outline]:not-first:rounded-l-none group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:data-[variant=outline]:not-last:rounded-r-none group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:data-[variant=outline]:not-first:rounded-t-none group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:data-[variant=outline]:not-last:rounded-b-none group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t", toggleVariants({
 			variant: context.variant ?? variant,
 			size: context.size ?? size
 		}), className),

package/dist/toggle.d.ts

@@ -1,20 +1,12 @@
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import * as React from "react";
 import { VariantProps } from "class-variance-authority";
 import { Toggle as Toggle$1 } from "@base-ui/react/toggle";
-import * as _$class_variance_authority_types0 from "class-variance-authority/types";
-
 //#region src/toggle.d.ts
 declare const toggleVariants: (props?: ({
   variant?: "default" | "outline" | null | undefined;
-  size?: "default" | "sm" | "lg" | null | undefined;
-} & _$class_variance_authority_types0.ClassProp) | undefined) => string;
+  size?: "default" | "icon" | "icon-lg" | "icon-sm" | "icon-xs" | "lg" | "sm" | "xs" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type ToggleProps = React.ComponentProps<typeof Toggle$1> & VariantProps<typeof toggleVariants>;
-declare function Toggle({
-  className,
-  variant,
-  size,
-  ...props
-}: ToggleProps): _$react_jsx_runtime0.JSX.Element;
+declare function Toggle({ className, variant, size, ...props }: ToggleProps): React.JSX.Element;
 //#endregion
 export { Toggle, type ToggleProps, toggleVariants };

package/dist/toggle.js

@@ -4,16 +4,21 @@ 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/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", {
+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]", {
 	variants: {
 		variant: {
-			default: "bg-transparent",
-			outline: "border-edge hover:bg-secondary border bg-transparent"
+			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"
 		},
 		size: {
-			default: "h-8 min-w-8 px-2",
-			sm: "h-7 min-w-7 rounded-sm px-1.5 text-[0.8rem]",
-			lg: "h-9 min-w-9 px-2.5"
+			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",
+			xs: "h-6 min-w-6 gap-1 rounded-sm px-2 text-xs has-data-[icon=inline-end]:pe-2 has-data-[icon=inline-start]:ps-2 [&_svg:not([class*='size-'])]:size-3",
+			sm: "h-8 min-w-8 gap-1 px-3 text-sm has-data-[icon=inline-end]:pe-2 has-data-[icon=inline-start]:ps-2",
+			lg: "h-11 min-w-11 gap-1.5 px-4 text-lg 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=toggle-group]:rounded-md [&_svg:not([class*='size-'])]:size-3",
+			"icon-sm": "size-8",
+			"icon-lg": "size-11"
 		}
 	},
 	defaultVariants: {

package/dist/tooltip.d.ts

@@ -1,7 +1,5 @@
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import * as React from "react";
 import { Tooltip as Tooltip$1 } from "@base-ui/react/tooltip";
-
 //#region src/tooltip.d.ts
 type TooltipProviderProps = React.ComponentProps<typeof Tooltip$1.Provider>;
 type TooltipProps = React.ComponentProps<typeof Tooltip$1.Root>;
@@ -13,39 +11,23 @@ type TooltipContentProps = React.ComponentProps<typeof Tooltip$1.Popup> & {
   alignOffset?: React.ComponentProps<typeof Tooltip$1.Positioner>["alignOffset"];
   anchor?: React.ComponentProps<typeof Tooltip$1.Positioner>["anchor"];
   positionerClassName?: string;
+  /** Render the pointer arrow. Defaults to `false`. */
+  arrow?: boolean;
 };
 /**
  * Inherits Base UI's 600ms open delay (hover-intent) — we deliberately
  * do NOT force `delay={0}`, which makes grouped tooltips fire on
  * incidental mouse-over. Pass `delay` to override per provider.
  */
-declare function TooltipProvider({
-  ...props
-}: TooltipProviderProps): _$react_jsx_runtime0.JSX.Element;
+declare function TooltipProvider({ ...props }: TooltipProviderProps): React.JSX.Element;
 /**
  * Defaults to a non-hoverable popup (`disableHoverablePopup={true}`)
  * because Wave tooltips are non-interactive labels; a hoverable popup is
  * only needed when the tooltip contains links/controls. Pass
  * `disableHoverablePopup={false}` for interactive tooltip content.
  */
-declare function Tooltip({
-  disableHoverablePopup,
-  ...props
-}: TooltipProps): _$react_jsx_runtime0.JSX.Element;
-declare function TooltipTrigger({
-  children,
-  ...props
-}: TooltipTriggerProps): _$react_jsx_runtime0.JSX.Element;
-declare function TooltipContent({
-  className,
-  positionerClassName,
-  side,
-  sideOffset,
-  align,
-  alignOffset,
-  anchor,
-  children,
-  ...props
-}: TooltipContentProps): _$react_jsx_runtime0.JSX.Element;
+declare function Tooltip({ disableHoverablePopup, ...props }: TooltipProps): React.JSX.Element;
+declare function TooltipTrigger({ children, ...props }: TooltipTriggerProps): React.JSX.Element;
+declare function TooltipContent({ className, positionerClassName, side, sideOffset, align, alignOffset, anchor, arrow, children, ...props }: TooltipContentProps): React.JSX.Element;
 //#endregion
 export { Tooltip, TooltipContent, type TooltipContentProps, type TooltipProps, TooltipProvider, type TooltipProviderProps, TooltipTrigger, type TooltipTriggerProps };