@passui/react 0.1.47 → 0.2.0

package/dist/wake-slider.js

@@ -0,0 +1,174 @@
+import { useMediaQuery } from "./use-media-query.js";
+import { cx } from "./lib/cx.js";
+import { clampRange } from "./lib/range-value.js";
+import { useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/wake-slider.tsx
+const H = {
+	sm: 16,
+	md: 20,
+	lg: 26
+};
+function WakeSlider({ label, value: controlledValue, defaultValue = 50, onChange, disabled = false, className, formatValue, size = "md", bars = 36, wake = 60 }) {
+	const n = Math.round(clampRange(Number.isFinite(bars) ? bars : 36, 12, 64));
+	const reduced = useMediaQuery("(prefers-reduced-motion: reduce)");
+	const [value, setValue] = useState(() => clampRange(controlledValue ?? defaultValue, 0, 100));
+	const track = useRef(null);
+	const els = useRef([]);
+	const st = useRef({
+		energy: new Float32Array(n),
+		down: false,
+		lastX: 0,
+		lastT: 0,
+		speed: 0,
+		raf: 0,
+		at: value / 100,
+		lastBar: -1
+	});
+	const knob = useRef(wake);
+	knob.current = reduced ? 0 : clampRange(wake, 0, 100);
+	useEffect(() => {
+		if (controlledValue === void 0) return;
+		const next = clampRange(controlledValue, 0, 100);
+		st.current.at = next / 100;
+		setValue(next);
+	}, [controlledValue]);
+	useEffect(() => {
+		if (!reduced) return;
+		cancelAnimationFrame(st.current.raf);
+		st.current.raf = 0;
+		st.current.energy.fill(0);
+		for (const bar of els.current) if (bar) bar.style.transform = "none";
+	}, [reduced]);
+	useEffect(() => {
+		st.current.energy = new Float32Array(n);
+	}, [n]);
+	const loop = () => {
+		const s = st.current;
+		if (s.raf) return;
+		let prev = performance.now();
+		const run = (now) => {
+			const dt = Math.min(.05, (now - prev) / 1e3);
+			prev = now;
+			let live = false;
+			const fall = Math.exp(-dt * 6.5);
+			for (let i = 0; i < s.energy.length; i++) {
+				s.energy[i] *= fall;
+				if (s.energy[i] < .002) s.energy[i] = 0;
+				else live = true;
+				const b = els.current[i];
+				if (b) b.style.transform = `scaleY(${(1 + s.energy[i] * 1.6).toFixed(3)})`;
+			}
+			s.raf = live ? requestAnimationFrame(run) : 0;
+		};
+		s.raf = requestAnimationFrame(run);
+	};
+	useEffect(() => () => cancelAnimationFrame(st.current.raf), []);
+	const to = (f, speed) => {
+		const s = st.current;
+		f = clampRange(f, 0, 1);
+		const from = s.at;
+		s.at = f;
+		const a = Math.round(from * (n - 1));
+		const b = Math.round(f * (n - 1));
+		const push = (1 - Math.exp(-speed / 900)) * (knob.current / 60);
+		const lo = Math.min(a, b);
+		const hi = Math.max(a, b);
+		for (let i = lo; i <= hi; i++) s.energy[i] = Math.max(s.energy[i], push);
+		if (b !== s.lastBar) s.lastBar = b;
+		const next = Math.round(f * 100);
+		setValue(next);
+		onChange?.(next);
+		if (!reduced && knob.current > 0) loop();
+	};
+	const frac = (clientX) => {
+		const r = (track.current ?? document.body).getBoundingClientRect();
+		const fraction = r.width ? (clientX - r.left) / r.width : 0;
+		return getComputedStyle(track.current ?? document.body).direction === "rtl" ? 1 - fraction : fraction;
+	};
+	const lit = Math.round(value / 100 * (n - 1));
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "wake-slider",
+		className: cx("passui-wake-slider not-typeset", disabled && "opacity-40", className),
+		"data-size": size,
+		children: [/* @__PURE__ */ jsx("div", {
+			ref: track,
+			className: "passui-wake-track",
+			role: "slider",
+			tabIndex: disabled ? -1 : 0,
+			"aria-label": label,
+			"aria-disabled": disabled || void 0,
+			"aria-valuetext": formatValue?.(value),
+			"aria-valuemin": 0,
+			"aria-valuemax": 100,
+			"aria-valuenow": value,
+			style: {
+				height: H[size] * 2.6,
+				"--wake-bars": n
+			},
+			onPointerDown: (e) => {
+				if (disabled || e.button !== 0) return;
+				e.currentTarget.focus();
+				const s = st.current;
+				try {
+					e.currentTarget.setPointerCapture(e.pointerId);
+				} catch {}
+				s.down = true;
+				s.lastX = e.clientX;
+				s.lastT = performance.now();
+				s.speed = 0;
+				to(frac(e.clientX), 0);
+			},
+			onPointerMove: (e) => {
+				const s = st.current;
+				if (!s.down || disabled) return;
+				const now = performance.now();
+				const dt = Math.max(.008, (now - s.lastT) / 1e3);
+				const v = Math.abs(e.clientX - s.lastX) / dt;
+				s.speed = s.speed * .5 + v * .5;
+				s.lastX = e.clientX;
+				s.lastT = now;
+				to(frac(e.clientX), s.speed);
+			},
+			onPointerUp: (e) => {
+				st.current.down = false;
+				try {
+					e.currentTarget.releasePointerCapture(e.pointerId);
+				} catch {}
+			},
+			onLostPointerCapture: () => {
+				st.current.down = false;
+			},
+			onPointerCancel: () => {
+				st.current.down = false;
+			},
+			onKeyDown: (e) => {
+				if (disabled) return;
+				const step = e.shiftKey ? 10 : 1;
+				let next = null;
+				const rtl = getComputedStyle(e.currentTarget).direction === "rtl";
+				if (e.key === "ArrowUp" || e.key === (rtl ? "ArrowLeft" : "ArrowRight")) next = value + step;
+				if (e.key === "ArrowDown" || e.key === (rtl ? "ArrowRight" : "ArrowLeft")) next = value - step;
+				if (e.key === "Home") next = 0;
+				if (e.key === "End") next = 100;
+				if (next === null) return;
+				e.preventDefault();
+				to(clampRange(next, 0, 100) / 100, 600);
+			},
+			children: Array.from({ length: n }, (_, i) => /* @__PURE__ */ jsx("span", {
+				ref: (b) => {
+					els.current[i] = b;
+				},
+				"aria-hidden": "true",
+				className: "passui-wake-bar",
+				"data-on": value > 0 && i <= lit || void 0,
+				style: { height: H[size] }
+			}, i))
+		}), /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			className: "passui-wake-value",
+			children: formatValue?.(value) ?? value
+		})]
+	});
+}
+export { WakeSlider };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@passui/react",
-	"version": "0.1.47",
+	"version": "0.2.0",
 	"description": "Passui: native React controls, design tokens, presentation and appearance.",
 	"license": "MIT",
 	"repository": {
@@ -14,270 +14,112 @@
 		"access": "public"
 	},
 	"files": [
-		"src",
+		"dist",
+		"src/styles",
 		"README.md",
 		"LICENSE",
-		"dist/types",
 		"THIRD_PARTY_NOTICES.md"
 	],
 	"type": "module",
-	"types": "./dist/types/src/index.d.ts",
+	"types": "./dist/index.d.ts",
 	"sideEffects": [
 		"**/*.css"
 	],
 	"exports": {
-		"./accordion": {
-			"types": "./dist/types/src/components/accordion/accordion.d.ts",
-			"default": "./src/components/accordion/accordion.tsx"
-		},
-		"./icons": {
-			"types": "./dist/types/src/icons/icons.d.ts",
-			"default": "./src/icons/icons.tsx"
-		},
-		"./clipboard": {
-			"types": "./dist/types/src/lib/clipboard.d.ts",
-			"default": "./src/lib/clipboard.ts"
-		},
-		"./search-field": {
-			"types": "./dist/types/src/components/search-field/search-field.d.ts",
-			"default": "./src/components/search-field/search-field.tsx"
-		},
-		"./picker": {
-			"types": "./dist/types/src/components/picker/picker.d.ts",
-			"default": "./src/components/picker/picker.tsx"
-		},
-		"./segmented-control": {
-			"types": "./dist/types/src/components/segmented-control/segmented-control.d.ts",
-			"default": "./src/components/segmented-control/segmented-control.tsx"
-		},
-		"./table": {
-			"types": "./dist/types/src/components/table/table.d.ts",
-			"default": "./src/components/table/table.tsx"
-		},
-		"./search-list": {
-			"types": "./dist/types/src/components/search-list/search-list.d.ts",
-			"default": "./src/components/search-list/search-list.tsx"
-		},
-		"./profile-image": {
-			"types": "./dist/types/src/components/profile-image/profile-image.d.ts",
-			"default": "./src/components/profile-image/profile-image.tsx"
-		},
-		"./popover": {
-			"types": "./dist/types/src/components/popover/index.d.ts",
-			"default": "./src/components/popover/index.ts"
-		},
-		"./morph": {
-			"types": "./dist/types/src/components/morph/index.d.ts",
-			"default": "./src/components/morph/index.ts"
-		},
-		"./sheet": {
-			"types": "./dist/types/src/components/sheet/sheet.d.ts",
-			"default": "./src/components/sheet/sheet.tsx"
-		},
-		"./use-dismiss": {
-			"types": "./dist/types/src/hooks/use-dismiss.d.ts",
-			"default": "./src/hooks/use-dismiss.ts"
-		},
-		"./toast": {
-			"types": "./dist/types/src/components/toast/toast-store.d.ts",
-			"default": "./src/components/toast/toast-store.ts"
-		},
-		"./toaster": {
-			"types": "./dist/types/src/components/toast/toaster.d.ts",
-			"default": "./src/components/toast/toaster.tsx"
-		},
-		"./tab-view": {
-			"types": "./dist/types/src/components/tab-view/tab-view.d.ts",
-			"default": "./src/components/tab-view/tab-view.tsx"
-		},
-		"./sidebar": {
-			"types": "./dist/types/src/components/sidebar/sidebar.d.ts",
-			"default": "./src/components/sidebar/sidebar.tsx"
-		},
-		"./icon-button": {
-			"types": "./dist/types/src/components/button/icon-button.d.ts",
-			"default": "./src/components/button/icon-button.tsx"
-		},
-		"./secure-field": {
-			"types": "./dist/types/src/components/secure-field/secure-field.d.ts",
-			"default": "./src/components/secure-field/secure-field.tsx"
-		},
-		"./text-field": {
-			"types": "./dist/types/src/components/text-field/text-field.d.ts",
-			"default": "./src/components/text-field/text-field.tsx"
-		},
-		"./text-editor": {
-			"types": "./dist/types/src/components/text-editor/text-editor.d.ts",
-			"default": "./src/components/text-editor/text-editor.tsx"
-		},
-		"./button": {
-			"types": "./dist/types/src/components/button/button.d.ts",
-			"default": "./src/components/button/button.tsx"
-		},
-		"./toggle": {
-			"types": "./dist/types/src/components/toggle/toggle.d.ts",
-			"default": "./src/components/toggle/toggle.tsx"
-		},
-		"./menu": {
-			"types": "./dist/types/src/components/menu/menu.d.ts",
-			"default": "./src/components/menu/menu.tsx"
-		},
-		"./disclosure-group": {
-			"types": "./dist/types/src/components/disclosure-group/disclosure-group.d.ts",
-			"default": "./src/components/disclosure-group/disclosure-group.tsx"
-		},
-		"./slider": {
-			"types": "./dist/types/src/components/slider/slider.d.ts",
-			"default": "./src/components/slider/slider.tsx"
-		},
-		"./stepper": {
-			"types": "./dist/types/src/components/stepper/stepper.d.ts",
-			"default": "./src/components/stepper/stepper.tsx"
-		},
-		"./progress-view": {
-			"types": "./dist/types/src/components/progress-view/progress-view.d.ts",
-			"default": "./src/components/progress-view/progress-view.tsx"
-		},
-		"./divider": {
-			"types": "./dist/types/src/components/divider/divider.d.ts",
-			"default": "./src/components/divider/divider.tsx"
-		},
-		"./cn": {
-			"types": "./dist/types/src/lib/class-names.d.ts",
-			"default": "./src/lib/class-names.ts"
-		},
-		".": {
-			"types": "./dist/types/src/index.d.ts",
-			"default": "./src/index.ts"
-		},
+		".": "./dist/index.js",
+		"./accordion": "./dist/accordion.js",
+		"./alert": "./dist/alert.js",
+		"./alert-dialog": "./dist/alert-dialog.js",
+		"./ambient": "./dist/ambient.js",
+		"./appearance": "./dist/appearance.js",
+		"./aspect-ratio": "./dist/aspect-ratio.js",
+		"./avatar": "./dist/avatar.js",
+		"./badge": "./dist/badge.js",
+		"./breadcrumb": "./dist/breadcrumb.js",
+		"./button": "./dist/button.js",
+		"./button-group": "./dist/button-group.js",
+		"./calendar": "./dist/calendar.js",
+		"./card": "./dist/card.js",
+		"./chart": "./dist/chart.js",
+		"./checkbox": "./dist/checkbox.js",
+		"./clipboard": "./dist/clipboard.js",
+		"./cn": "./dist/cn.js",
+		"./code-block": "./dist/code-block.js",
+		"./collapsible": "./dist/collapsible.js",
+		"./combobox": "./dist/combobox.js",
+		"./command": "./dist/command.js",
+		"./context-menu": "./dist/context-menu.js",
+		"./conversation": "./dist/conversation.js",
+		"./date": "./dist/date.js",
+		"./date-time-picker": "./dist/date-time-picker.js",
+		"./dialog": "./dist/dialog.js",
+		"./drawer": "./dist/drawer.js",
+		"./dropdown-menu": "./dist/dropdown-menu.js",
+		"./empty": "./dist/empty.js",
+		"./field": "./dist/field.js",
+		"./input": "./dist/input.js",
+		"./input-group": "./dist/input-group.js",
+		"./input-otp": "./dist/input-otp.js",
+		"./item": "./dist/item.js",
+		"./kbd": "./dist/kbd.js",
+		"./label": "./dist/label.js",
+		"./labeled-content": "./dist/labeled-content.js",
+		"./language": "./dist/language.js",
+		"./layout": "./dist/layout.js",
+		"./list": "./dist/list.js",
+		"./locales": "./dist/locales.js",
+		"./marker": "./dist/marker.js",
+		"./pagination": "./dist/pagination.js",
+		"./popover": "./dist/popover.js",
+		"./progress": "./dist/progress.js",
+		"./questionnaire": "./dist/questionnaire.js",
+		"./radio-group": "./dist/radio-group.js",
+		"./search-field": "./dist/search-field.js",
+		"./segmented-control": "./dist/segmented-control.js",
+		"./select": "./dist/select.js",
+		"./separator": "./dist/separator.js",
+		"./shapes": "./dist/shapes.js",
+		"./sheet": "./dist/sheet.js",
+		"./sidebar": "./dist/sidebar.js",
+		"./skeleton": "./dist/skeleton.js",
+		"./slider": "./dist/slider.js",
+		"./slosh-slider": "./dist/slosh-slider.js",
+		"./spinner": "./dist/spinner.js",
+		"./stat-tile": "./dist/stat-tile.js",
+		"./stepper": "./dist/stepper.js",
+		"./swatch-picker": "./dist/swatch-picker.js",
+		"./switch": "./dist/switch.js",
+		"./tab-bar": "./dist/tab-bar.js",
+		"./table": "./dist/table.js",
+		"./tabs": "./dist/tabs.js",
+		"./text": "./dist/text.js",
+		"./textarea": "./dist/textarea.js",
+		"./toast": "./dist/toast.js",
+		"./toggle": "./dist/toggle.js",
+		"./toggle-group": "./dist/toggle-group.js",
+		"./tokens": "./dist/tokens.js",
+		"./tooltip": "./dist/tooltip.js",
+		"./trace": "./dist/trace.js",
+		"./use-dismiss": "./dist/use-dismiss.js",
+		"./use-media-query": "./dist/use-media-query.js",
+		"./use-os": "./dist/use-os.js",
+		"./wake-slider": "./dist/wake-slider.js",
+		"./package.json": "./package.json",
 		"./base.css": "./src/styles/base.css",
 		"./utilities.css": "./src/styles/utilities.css",
 		"./theme.css": "./src/styles/theme.css",
-		"./tokens": {
-			"types": "./dist/types/src/tokens.d.ts",
-			"default": "./src/tokens.ts"
-		},
-		"./date-picker": {
-			"types": "./dist/types/src/components/date-picker/date-picker.d.ts",
-			"default": "./src/components/date-picker/date-picker.tsx"
-		},
-		"./compact-date-picker": {
-			"types": "./dist/types/src/components/compact-date-picker/compact-date-picker.d.ts",
-			"default": "./src/components/compact-date-picker/compact-date-picker.tsx"
-		},
-		"./compact-time-picker": {
-			"types": "./dist/types/src/components/compact-time-picker/compact-time-picker.d.ts",
-			"default": "./src/components/compact-time-picker/compact-time-picker.tsx"
-		},
-		"./view-controller": {
-			"types": "./dist/types/src/components/view-controller/index.d.ts",
-			"default": "./src/components/view-controller/index.ts"
-		},
-		"./content-view": {
-			"types": "./dist/types/src/components/content-view/index.d.ts",
-			"default": "./src/components/content-view/index.ts"
-		},
-		"./ambient": {
-			"types": "./dist/types/src/components/ambient/index.d.ts",
-			"default": "./src/components/ambient/index.ts"
-		},
-		"./stat-tile": {
-			"types": "./dist/types/src/components/stat-tile/index.d.ts",
-			"default": "./src/components/stat-tile/index.ts"
-		},
-		"./conversation": {
-			"types": "./dist/types/src/components/conversation/index.d.ts",
-			"default": "./src/components/conversation/index.ts"
-		},
-		"./locale-switcher": {
-			"types": "./dist/types/src/components/locale-switcher/index.d.ts",
-			"default": "./src/components/locale-switcher/index.ts"
-		},
-		"./date": {
-			"types": "./dist/types/src/lib/date.d.ts",
-			"default": "./src/lib/date.ts"
-		},
-		"./language": {
-			"types": "./dist/types/src/lib/language.d.ts",
-			"default": "./src/lib/language.ts"
-		},
-		"./shapes": {
-			"types": "./dist/types/src/lib/shapes.d.ts",
-			"default": "./src/lib/shapes.ts"
-		},
-		"./appearance": {
-			"types": "./dist/types/src/appearance/index.d.ts",
-			"default": "./src/appearance/index.ts"
-		},
-		"./use-media-query": {
-			"types": "./dist/types/src/hooks/use-media-query.d.ts",
-			"default": "./src/hooks/use-media-query.ts"
-		},
 		"./typeset.css": "./src/styles/typeset.css",
 		"./styles.css": "./src/styles/styles.css",
-		"./dialog": {
-			"types": "./dist/types/src/components/dialog/index.d.ts",
-			"default": "./src/components/dialog/index.ts"
-		},
-		"./inline-disclosure": {
-			"types": "./dist/types/src/components/inline-disclosure/inline-disclosure.d.ts",
-			"default": "./src/components/inline-disclosure/inline-disclosure.tsx"
-		},
-		"./code-block": {
-			"types": "./dist/types/src/components/code-block/code-block.d.ts",
-			"default": "./src/components/code-block/code-block.tsx"
-		},
-		"./keyboard-shortcut": {
-			"types": "./dist/types/src/components/keyboard-shortcut/keyboard-shortcut.d.ts",
-			"default": "./src/components/keyboard-shortcut/keyboard-shortcut.tsx"
-		},
-		"./content-unavailable-view": {
-			"types": "./dist/types/src/components/content-unavailable-view/content-unavailable-view.d.ts",
-			"default": "./src/components/content-unavailable-view/content-unavailable-view.tsx"
-		},
-		"./combo-box": {
-			"types": "./dist/types/src/components/combo-box/combo-box.d.ts",
-			"default": "./src/components/combo-box/combo-box.tsx"
-		},
-		"./radio-group": {
-			"types": "./dist/types/src/components/radio-group/radio-group.d.ts",
-			"default": "./src/components/radio-group/radio-group.tsx"
-		},
-		"./breadcrumb": {
-			"types": "./dist/types/src/components/breadcrumb/breadcrumb.d.ts",
-			"default": "./src/components/breadcrumb/breadcrumb.tsx"
-		},
-		"./skeleton": {
-			"types": "./dist/types/src/components/skeleton/skeleton.d.ts",
-			"default": "./src/components/skeleton/skeleton.tsx"
-		},
-		"./command": {
-			"types": "./dist/types/src/components/command/command.d.ts",
-			"default": "./src/components/command/command.tsx"
-		},
-		"./slosh-slider": {
-			"types": "./dist/types/src/components/slosh-slider/slosh-slider.d.ts",
-			"default": "./src/components/slosh-slider/slosh-slider.tsx"
-		},
-		"./wake-slider": {
-			"types": "./dist/types/src/components/wake-slider/wake-slider.d.ts",
-			"default": "./src/components/wake-slider/wake-slider.tsx"
-		},
-		"./one-time-code": {
-			"types": "./dist/types/src/components/one-time-code/one-time-code.d.ts",
-			"default": "./src/components/one-time-code/one-time-code.tsx"
-		},
-		"./aspect-ratio": {
-			"types": "./dist/types/src/components/aspect-ratio/aspect-ratio.d.ts",
-			"default": "./src/components/aspect-ratio/aspect-ratio.tsx"
-		}
+		"./globals.css": "./src/styles/globals.css"
 	},
 	"scripts": {
 		"generate": "bun run --cwd ../tokens generate",
 		"test": "vitest run",
+		"test:e2e": "playwright test",
+		"typecheck:e2e": "tsc -p e2e/tsconfig.json",
 		"typecheck": "tsc -p tsconfig.json",
 		"publish:check": "bun pm pack --dry-run",
-		"build": "bun run generate && bun ../../scripts/build-types.mjs",
+		"build": "bun run generate && tsdown",
 		"prepack": "bun run build"
 	},
 	"packageManager": "bun@1.4.2",
@@ -287,23 +129,50 @@
 		"tailwindcss": "^4.3.3"
 	},
 	"devDependencies": {
+		"@playwright/test": "1.65.0",
+		"@tailwindcss/node": "4.3.5",
+		"@tailwindcss/oxide": "4.3.5",
+		"@tailwindcss/vite": "4.3.5",
+		"@types/node": "^26.6.6",
 		"@types/react": "^19.3.0",
 		"@types/react-dom": "^19.3.0",
+		"jsdom": "^31.0.0",
 		"react": "^19.3.0",
 		"react-dom": "^19.3.0",
-		"typescript": "^7.0.2",
 		"tailwindcss": "^4.3.5",
-		"@types/node": "^26.6.6",
+		"tsdown": "0.23.7",
+		"typescript": "^7.0.2",
+		"vite": "8.3.8",
 		"vitest": "5.1.0",
-		"vite": "8.3.8"
+		"vitest-axe": "^0.1.0"
 	},
 	"dependencies": {
-		"@hugeicons/core-free-icons": "4.4.0",
-		"@hugeicons/react": "1.1.10",
-		"motion": "14.12.0",
+		"@passui/icons": "^0.1.0",
+		"@passui/tokens": "^0.1.3",
+		"@zag-js/accordion": "1.47.0",
+		"@zag-js/avatar": "1.47.0",
+		"@zag-js/checkbox": "1.47.0",
+		"@zag-js/collapsible": "1.47.0",
+		"@zag-js/combobox": "1.47.0",
+		"@zag-js/dialog": "1.47.0",
+		"@zag-js/drawer": "1.47.0",
+		"@zag-js/menu": "1.47.0",
+		"@zag-js/pagination": "1.47.0",
+		"@zag-js/pin-input": "1.47.0",
+		"@zag-js/popover": "1.47.0",
+		"@zag-js/progress": "1.47.0",
+		"@zag-js/radio-group": "1.47.0",
+		"@zag-js/react": "1.47.0",
+		"@zag-js/select": "1.47.0",
+		"@zag-js/slider": "1.47.0",
+		"@zag-js/switch": "1.47.0",
+		"@zag-js/tabs": "1.47.0",
+		"@zag-js/toast": "1.47.0",
+		"@zag-js/toggle-group": "1.47.0",
+		"@zag-js/tooltip": "1.47.0",
 		"clsx": "^2.1.1",
+		"motion": "14.12.0",
 		"tailwind-merge": "^3.7.0",
-		"tw-animate-css": "^1.4.0",
-		"@passui/tokens": "^0.1.3"
+		"tw-animate-css": "^1.4.0"
 	}
 }

package/src/styles/code-block.css

@@ -13,6 +13,10 @@
 		counter-reset: code-line;
 		tab-size: 4;
 	}
+	.passui-code-block[data-wrap] pre {
+		white-space: pre-wrap;
+		overflow-wrap: anywhere;
+	}
 	.passui-code-block .line {
 		display: inline-block;
 		min-width: 100%;

package/src/styles/globals.css

@@ -0,0 +1,5 @@
+/* The short name for `styles.css`:
+ *
+ *     @import "@passui/react/globals.css";
+ */
+@import "./styles.css";

package/src/styles/motion-controls.css

@@ -146,6 +146,15 @@
 			filter: blur(3px);
 		}
 	}
+	.passui-swatch-check {
+		animation: passui-swatch-pop 360ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
+	}
+	@keyframes passui-swatch-pop {
+		from {
+			transform: scale(0.4);
+			opacity: 0;
+		}
+	}
 	.passui-otp-capsule {
 		position: absolute;
 		inset-block: 0;
@@ -394,6 +403,7 @@
 			transition: none;
 		}
 		.passui-otp-glyph,
+		.passui-swatch-check,
 		.passui-otp-digit {
 			/* biome-ignore lint/complexity/noImportantStyles: CSS utility override */
 			animation: none !important;