@waveso/ui 0.15.1 → 0.16.0

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

@@ -8,6 +8,12 @@ type TableRowProps = React.ComponentProps<"tr">;
 type TableHeadProps = React.ComponentProps<"th">;
 type TableCellProps = React.ComponentProps<"td">;
 type TableCaptionProps = React.ComponentProps<"caption">;
+/**
+ * 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;
@@ -15,6 +21,6 @@ declare function TableFooter({ className, ...props }: TableFooterProps): React.J
 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, ...props }: TableCaptionProps): 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.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.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.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.js

@@ -9,10 +9,10 @@ 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,
@@ -49,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

@@ -4,7 +4,7 @@ import { Toggle as Toggle$1 } from "@base-ui/react/toggle";
 //#region src/toggle.d.ts
 declare const toggleVariants: (props?: ({
   variant?: "default" | "outline" | null | undefined;
-  size?: "default" | "lg" | "sm" | null | undefined;
+  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.Element;

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

@@ -11,6 +11,8 @@ 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
@@ -26,6 +28,6 @@ declare function TooltipProvider({ ...props }: TooltipProviderProps): React.JSX.
  */
 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, children, ...props }: TooltipContentProps): 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 };

package/dist/tooltip.js

@@ -1,6 +1,6 @@
 "use client";
 import { cn } from "./lib/utils.js";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Tooltip as Tooltip$1 } from "@base-ui/react/tooltip";
 //#region src/tooltip.tsx
@@ -41,20 +41,24 @@ function TooltipTrigger({ children, ...props }) {
 		children
 	});
 }
-function TooltipContent({ className, positionerClassName, side = "top", sideOffset = 4, align = "center", alignOffset = 0, anchor, children, ...props }) {
+function TooltipContent({ className, positionerClassName, side = "top", sideOffset, align = "center", alignOffset = 0, anchor, arrow = false, children, ...props }) {
+	const resolvedSideOffset = sideOffset ?? (arrow ? 12 : 8);
 	return /* @__PURE__ */ jsx(Tooltip$1.Portal, { children: /* @__PURE__ */ jsx(Tooltip$1.Positioner, {
 		"data-slot": "tooltip-positioner",
 		anchor,
 		align,
 		alignOffset,
 		side,
-		sideOffset,
+		sideOffset: resolvedSideOffset,
 		className: cn("isolate z-50", positionerClassName),
-		children: /* @__PURE__ */ jsx(Tooltip$1.Popup, {
+		children: /* @__PURE__ */ jsxs(Tooltip$1.Popup, {
 			"data-slot": "tooltip-content",
-			className: cn("motion-pop-md bg-surface-inverse text-contrast-inverse z-50 w-fit max-w-xs origin-(--transform-origin) rounded-sm px-3 py-1.5 text-xs", className),
+			className: cn("motion-pop-md bg-surface-inverse text-contrast-inverse z-50 w-fit max-w-xs rounded-sm px-3 py-1.5 text-xs", "inline-flex items-center gap-1.5 has-data-[slot=kbd]:pe-1.5 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-lg", className),
 			...props,
-			children
+			children: [children, arrow ? /* @__PURE__ */ jsx(Tooltip$1.Arrow, {
+				"data-slot": "tooltip-arrow",
+				className: "bg-surface-inverse size-2.5 rounded-[2px] translate-y-[calc(-50%-2px)] rotate-45 data-[side=bottom]:top-1 data-[side=inline-end]:-start-1 data-[side=inline-end]:translate-x-[1.5px] rtl:data-[side=inline-end]:-translate-x-[1.5px] data-[side=inline-end]:translate-y-0 data-[side=inline-start]:-end-1 data-[side=inline-start]:translate-x-[-1.5px] rtl:data-[side=inline-start]:-translate-x-[-1.5px] data-[side=inline-start]:translate-y-0 data-[side=left]:-right-1 data-[side=left]:translate-x-[-1.5px] rtl:data-[side=left]:-translate-x-[-1.5px] data-[side=left]:translate-y-0 data-[side=right]:-left-1 data-[side=right]:translate-x-[1.5px] rtl:data-[side=right]:-translate-x-[1.5px] data-[side=right]:translate-y-0 data-[side=top]:-bottom-2.5"
+			}) : null]
 		})
 	}) });
 }

package/dist/video-text.d.ts

@@ -0,0 +1,25 @@
+import * as React from "react";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/video-text.d.ts
+interface VideoTextProps extends Omit<useRender.ComponentProps<"div">, "children"> {
+  /** Video source URL. */
+  src: string;
+  /** The text the video shows through. Rendered as real, selectable text. */
+  text: string;
+  /** Image shown in the letters until the video can play. */
+  poster?: string;
+  autoPlay?: boolean;
+  muted?: boolean;
+  loop?: boolean;
+  preload?: "auto" | "metadata" | "none";
+}
+/**
+ * Text cut out of a playing video. The text is real: it wraps, aligns and
+ * takes its font from the usual classes (`text-*`, `font-*`, web fonts
+ * included), and `render` can make it a heading. Each word is measured and
+ * copied into an SVG clip path that the video is clipped to. Until that's
+ * measured, and while the video loads, the letters show in the text color.
+ */
+declare function VideoText({ src, text, poster, autoPlay, muted, loop, preload, className, render, ref, ...props }: VideoTextProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+//#endregion
+export { VideoText, type VideoTextProps };

package/dist/video-text.js

@@ -0,0 +1,147 @@
+"use client";
+import { cn } from "./lib/utils.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/video-text.tsx
+function isSameLayout(a, b) {
+	return a.length === b.length && a.every((box, index) => box.x === b[index]?.x && box.y === b[index]?.y);
+}
+/**
+* Text cut out of a playing video. The text is real: it wraps, aligns and
+* takes its font from the usual classes (`text-*`, `font-*`, web fonts
+* included), and `render` can make it a heading. Each word is measured and
+* copied into an SVG clip path that the video is clipped to. Until that's
+* measured, and while the video loads, the letters show in the text color.
+*/
+function VideoText({ src, text, poster, autoPlay = true, muted = true, loop = true, preload = "auto", className, render, ref, ...props }) {
+	const rootRef = React.useRef(null);
+	const labelRef = React.useRef(null);
+	const baselineRef = React.useRef(null);
+	const videoRef = React.useRef(null);
+	const [boxes, setBoxes] = React.useState([]);
+	const clipId = `video-text-${React.useId().replace(/[^\w-]/g, "")}`;
+	const clipPath = `url(#${clipId})`;
+	const words = React.useMemo(() => text.split(/\s+/).filter(Boolean), [text]);
+	const isMeasured = words.length > 0 && boxes.length === words.length;
+	React.useLayoutEffect(() => {
+		const root = rootRef.current;
+		const label = labelRef.current;
+		const baseline = baselineRef.current;
+		if (!root || !label || !baseline) return;
+		const measure = () => {
+			const rootRect = root.getBoundingClientRect();
+			const scale = root.offsetWidth ? rootRect.width / root.offsetWidth : 1;
+			const left = rootRect.left + root.clientLeft * scale;
+			const top = rootRect.top + root.clientTop * scale;
+			const spans = label.querySelectorAll("[data-slot=\"video-text-word\"]");
+			const first = spans[0]?.getBoundingClientRect();
+			const offset = first ? baseline.getBoundingClientRect().top - first.top : 0;
+			const next = words.map((_, index) => {
+				const rect = spans[index]?.getBoundingClientRect();
+				return rect ? {
+					x: (rect.left - left) / scale,
+					y: (rect.top + offset - top) / scale
+				} : {
+					x: 0,
+					y: 0
+				};
+			});
+			setBoxes((prev) => isSameLayout(prev, next) ? prev : next);
+		};
+		measure();
+		const observer = new ResizeObserver(measure);
+		observer.observe(root);
+		document.fonts.addEventListener("loadingdone", measure);
+		return () => {
+			observer.disconnect();
+			document.fonts.removeEventListener("loadingdone", measure);
+		};
+	}, [words]);
+	React.useEffect(() => {
+		const video = videoRef.current;
+		if (!video) return;
+		const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)");
+		const hold = () => {
+			if (reducedMotion.matches) video.pause();
+		};
+		const sync = () => {
+			if (reducedMotion.matches) video.pause();
+			else if (video.autoplay) video.play().catch(() => {});
+		};
+		hold();
+		video.addEventListener("play", hold);
+		reducedMotion.addEventListener("change", sync);
+		return () => {
+			video.removeEventListener("play", hold);
+			reducedMotion.removeEventListener("change", sync);
+		};
+	}, []);
+	const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsxs("span", {
+			ref: labelRef,
+			"data-slot": "video-text-label",
+			className: cn(isMeasured && "text-transparent"),
+			children: [/* @__PURE__ */ jsx("span", {
+				ref: baselineRef,
+				"data-slot": "video-text-baseline",
+				className: "inline-block size-0 align-baseline"
+			}), words.map((word, index) => /* @__PURE__ */ jsxs(React.Fragment, { children: [index > 0 && " ", /* @__PURE__ */ jsx("span", {
+				"data-slot": "video-text-word",
+				children: word
+			})] }, `${index}-${word}`))]
+		}),
+		/* @__PURE__ */ jsx("svg", {
+			"data-slot": "video-text-defs",
+			"aria-hidden": "true",
+			className: "absolute size-0 overflow-hidden [direction:ltr]",
+			children: /* @__PURE__ */ jsx("clipPath", {
+				id: clipId,
+				"data-slot": "video-text-clip",
+				clipPathUnits: "userSpaceOnUse",
+				children: words.map((word, index) => /* @__PURE__ */ jsx("text", {
+					"data-slot": "video-text-clip-word",
+					x: boxes[index]?.x ?? 0,
+					y: boxes[index]?.y ?? 0,
+					children: word
+				}, `${index}-${word}`))
+			})
+		}),
+		/* @__PURE__ */ jsx("span", {
+			"data-slot": "video-text-mask",
+			"aria-hidden": "true",
+			className: cn("pointer-events-none absolute inset-0 bg-current", !isMeasured && "invisible"),
+			style: {
+				clipPath,
+				WebkitClipPath: clipPath
+			},
+			children: /* @__PURE__ */ jsx("video", {
+				ref: videoRef,
+				"data-slot": "video-text-video",
+				className: "block size-full object-cover",
+				src,
+				poster,
+				autoPlay,
+				muted,
+				loop,
+				preload,
+				playsInline: true,
+				disablePictureInPicture: true,
+				disableRemotePlayback: true
+			})
+		})
+	] });
+	return useRender({
+		defaultTagName: "div",
+		ref: ref ? [rootRef, ref] : rootRef,
+		render,
+		props: mergeProps({
+			className: cn("relative font-sans font-bold", className),
+			children: content
+		}, props),
+		state: { slot: "video-text" }
+	});
+}
+//#endregion
+export { VideoText };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@waveso/ui",
-  "version": "0.15.1",
+  "version": "0.16.0",
   "description": "Wave UI component library built on Base UI and Tailwind CSS",
   "type": "module",
   "sideEffects": [
@@ -51,6 +51,7 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-hook-form": "^7.0.0",
+    "react-resizable-panels": "^4.14.0",
     "tailwind-merge": "^3.0.0",
     "tailwindcss": "^4.0.0"
   },
@@ -63,6 +64,9 @@
     },
     "react-hook-form": {
       "optional": true
+    },
+    "react-resizable-panels": {
+      "optional": true
     }
   },
   "devDependencies": {
@@ -91,6 +95,7 @@
     "react": "^19.3.0",
     "react-dom": "^19.3.0",
     "react-hook-form": "^7.89.0",
+    "react-resizable-panels": "^4.14.6",
     "storybook": "~10.6.0",
     "tailwind-merge": "^3.7.0",
     "tailwindcss": "^4.3.3",