@waveso/ui 0.15.0 → 0.16.0

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/typewriter.d.ts

@@ -1,6 +1,4 @@
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import { ReactElement } from "react";
-
 //#region src/typewriter.d.ts
 interface TextSegment {
   text: string;
@@ -63,17 +61,6 @@ interface TypewriterProps {
  * </Typewriter>
  * ```
  */
-declare function Typewriter({
-  text,
-  children,
-  speed,
-  delay,
-  cursor,
-  cursorChar,
-  onView,
-  once,
-  variant,
-  smoothDuration
-}: TypewriterProps): _$react_jsx_runtime0.JSX.Element;
+declare function Typewriter({ text, children, speed, delay, cursor, cursorChar, onView, once, variant, smoothDuration }: TypewriterProps): import("react").JSX.Element;
 //#endregion
 export { type TextSegment, Typewriter, type TypewriterProps };

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.0",
+  "version": "0.16.0",
   "description": "Wave UI component library built on Base UI and Tailwind CSS",
   "type": "module",
   "sideEffects": [
@@ -42,34 +42,16 @@
     "dist",
     "package.json"
   ],
-  "scripts": {
-    "build": "tsdown",
-    "dev": "tsdown --watch",
-    "typecheck": "tsc --noEmit",
-    "lint": "biome check",
-    "lint:fix": "biome check --write",
-    "format": "biome format --write",
-    "test": "vitest run --passWithNoTests",
-    "test:watch": "vitest",
-    "check:package": "publint && attw --pack . --ignore-rules no-resolution",
-    "clean": "rm -rf dist",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
-    "chromatic": "chromatic --exit-zero-on-changes",
-    "prepublishOnly": "npm run build",
-    "changeset": "changeset",
-    "version": "changeset version",
-    "release": "npm run build && changeset publish"
-  },
   "peerDependencies": {
     "@base-ui/react": "^1.6.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
     "input-otp": "^1.4.0",
-    "motion": "^12.0.0",
+    "motion": "^12.0.0 || ^13.0.0",
     "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"
   },
@@ -82,39 +64,63 @@
     },
     "react-hook-form": {
       "optional": true
+    },
+    "react-resizable-panels": {
+      "optional": true
     }
   },
   "devDependencies": {
-    "@arethetypeswrong/cli": "^0.18.4",
-    "@base-ui/react": "^1.6.0",
-    "@biomejs/biome": "2.5.2",
-    "@changesets/cli": "^2.27.0",
-    "@storybook/addon-a11y": "~10.4.0",
-    "@storybook/addon-docs": "~10.4.0",
-    "@storybook/react-vite": "~10.4.0",
-    "@tailwindcss/vite": "^4.2.1",
-    "@testing-library/dom": "^10.4.1",
-    "@testing-library/jest-dom": "^6.9.1",
-    "@testing-library/react": "^16.3.2",
-    "@testing-library/user-event": "^14.6.1",
-    "@types/react": "^19",
-    "@types/react-dom": "^19",
-    "chromatic": "^18.0.1",
+    "@arethetypeswrong/cli": "^0.18.5",
+    "@base-ui/react": "^1.8.0",
+    "@changesets/cli": "^3.0.3",
+    "@storybook/addon-a11y": "~10.6.0",
+    "@storybook/addon-docs": "~10.6.0",
+    "@storybook/react-vite": "~10.6.0",
+    "@tailwindcss/vite": "^4.3.3",
+    "@testing-library/dom": "^10.4.2",
+    "@testing-library/jest-dom": "^7.0.1",
+    "@testing-library/react": "^16.3.3",
+    "@testing-library/user-event": "^14.6.7",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "chromatic": "^18.9.5",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "input-otp": "^1.4.2",
-    "jsdom": "^29.1.1",
-    "motion": "^12.31.0",
-    "publint": "^0.3.21",
-    "react": "^19.2.0",
-    "react-dom": "^19.2.0",
-    "react-hook-form": "^7.66.0",
-    "storybook": "~10.4.0",
-    "tailwind-merge": "^3.4.0",
-    "tailwindcss": "^4.2.1",
-    "tsdown": "0.21.10",
-    "typescript": "^5.7.0",
-    "vite": "^7.3.1",
-    "vitest": "^4.1.7"
+    "input-otp": "^1.5.0",
+    "jsdom": "^30.1.1",
+    "motion": "^13.4.4",
+    "oxfmt": "0.71.0",
+    "oxlint": "^1.86.0",
+    "publint": "^0.3.24",
+    "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",
+    "tsdown": "0.23.0",
+    "typescript": "^7.0.2",
+    "vite": "^8.3.1",
+    "vitest": "^5.0.2"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "dev": "tsdown --watch",
+    "typecheck": "tsc --noEmit",
+    "lint": "oxlint",
+    "lint:fix": "oxlint --fix",
+    "format": "oxfmt --write '**/*.ts' '**/*.tsx'",
+    "format:check": "oxfmt --check '**/*.ts' '**/*.tsx'",
+    "test": "vitest run --passWithNoTests",
+    "test:watch": "vitest",
+    "check:package": "publint && attw --pack . --ignore-rules no-resolution",
+    "clean": "rm -rf dist",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "chromatic": "chromatic --exit-zero-on-changes",
+    "changeset": "changeset",
+    "version": "changeset version",
+    "release": "pnpm build && changeset publish"
   }
-}
+}