@rinzai/zen 0.5.0 → 0.6.0

package/dist/textarea/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/textarea/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,KAAK,EAAE,aAAa,+BAcpD;AAED,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC,UAAU,CAAC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/textarea/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,KAAK,EAAE,aAAa,+BAgBpD;AAED,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC,UAAU,CAAC,CAAC"}

package/dist/textarea/index.js

@@ -0,0 +1,16 @@
+"use client";
+import { cx as e } from "../utils/cx.js";
+import { FIELD as t } from "../utils/styles.js";
+import { useFieldProps as n } from "../field/index.js";
+import { jsx as r } from "react/jsx-runtime";
+//#region packages/textarea/index.tsx
+function i(i) {
+	let { className: a, ...o } = i, s = n(o);
+	return /* @__PURE__ */ r("textarea", {
+		className: e(t.replace("h-10", ""), "h-32 w-full resize-y py-2", "read-only:text-foreground read-only:cursor-default read-only:border-none! read-only:bg-transparent read-only:shadow-none! read-only:outline-hidden!", a),
+		...o,
+		...s
+	});
+}
+//#endregion
+export { i as default };

package/dist/theme-toggle/index.js

@@ -0,0 +1,43 @@
+"use client";
+import { cx as e } from "../utils/cx.js";
+import { useEffect as t, useState as n } from "react";
+import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region packages/theme-toggle/index.tsx
+var o = (e = "theme") => `try{var t=localStorage.getItem(${JSON.stringify(e)}),r=document.documentElement;if(t==='light'||t==='dark'){r.classList.remove('light','dark');r.classList.add(t)}}catch(e){}`;
+function s({ storageKey: e = "theme" }) {
+	return /* @__PURE__ */ i("script", { dangerouslySetInnerHTML: { __html: o(e) } });
+}
+function c({ storageKey: o = "theme", className: s }) {
+	let [c, l] = n("dark");
+	t(() => l(document.documentElement.classList.contains("light") ? "light" : "dark"), []);
+	let u = c === "dark" ? "light" : "dark";
+	return /* @__PURE__ */ i("button", {
+		type: "button",
+		"aria-label": `Switch to ${u} theme`,
+		onClick: () => {
+			let e = document.documentElement;
+			e.classList.remove("dark", "light"), e.classList.add(u);
+			try {
+				localStorage.setItem(o, u);
+			} catch {}
+			l(u);
+		},
+		className: e("zen__theme-toggle text-muted-foreground hover:bg-tint/[0.06] hover:text-foreground focus-visible:ring-ring/50 grid size-9 place-items-center rounded-lg outline-hidden focus-visible:ring-2", s),
+		children: /* @__PURE__ */ i("svg", {
+			viewBox: "0 0 16 16",
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: "1.5",
+			strokeLinecap: "round",
+			className: "size-4",
+			"aria-hidden": !0,
+			children: c === "dark" ? /* @__PURE__ */ i("path", { d: "M13.5 9.5A5.5 5.5 0 0 1 6.5 2.5a5.5 5.5 0 1 0 7 7Z" }) : /* @__PURE__ */ a(r, { children: [/* @__PURE__ */ i("circle", {
+				cx: "8",
+				cy: "8",
+				r: "3"
+			}), /* @__PURE__ */ i("path", { d: "M8 1v1.5M8 13.5V15M1 8h1.5M13.5 8H15M3.05 3.05l1.06 1.06M11.89 11.89l1.06 1.06M3.05 12.95l1.06-1.06M11.89 4.11l1.06-1.06" })] })
+		})
+	});
+}
+//#endregion
+export { s as ThemeScript, c as default, o as themeScript };

package/dist/theme.css

@@ -10,6 +10,22 @@
 @custom-variant dark (&:is(.dark *, [data-theme='dark'] *));
 @custom-variant light (&:is(.light *, [data-theme='light'] *));
 
+/*
+ * A trigger stays hovered while its popup is open (Zen's popups set
+ * data-popup-open on it): moving the pointer into a menu doesn't drop the
+ * trigger's hover look, or shift a popup anchored to a trigger that scales on hover.
+ */
+@custom-variant hover {
+    @media (hover: hover) {
+        &:hover {
+            @slot;
+        }
+    }
+    &[data-popup-open] {
+        @slot;
+    }
+}
+
 /*
  * inline: utilities use oklch(var(--primary)) directly rather than through
  * --color-primary, so tokens set on any element (applyTheme's target, a .light
@@ -122,28 +138,71 @@
         --gx: inherit;
         --gy: inherit;
         position: absolute;
-        /* Inside the box (over its 1px border), so it never causes overflow or scrollbars. */
+        /* Inside the box (along its border), so it never causes overflow or scrollbars. */
         inset: 0;
         border-radius: inherit;
-        padding: 1px;
+        /*
+         * A ring as wide as the element's own border on each side: a bar with
+         * only a bottom border (Header) lights only that line.
+         */
+        border-width: inherit;
+        border-style: solid;
+        border-color: transparent;
         background: radial-gradient(
             360px circle at var(--gx, -999px) var(--gy, -999px),
             oklch(var(--glow) / calc(0.7 * var(--glow-strength))),
             oklch(var(--glow-2) / calc(0.2 * var(--glow-strength))) 40%,
             transparent 65%
         );
+        background-origin: border-box;
         -webkit-mask:
-            linear-gradient(#000 0 0) content-box,
+            linear-gradient(#000 0 0) padding-box,
             linear-gradient(#000 0 0);
         -webkit-mask-composite: xor;
         mask:
-            linear-gradient(#000 0 0) content-box exclude,
+            linear-gradient(#000 0 0) padding-box exclude,
             linear-gradient(#000 0 0);
         pointer-events: none;
         z-index: 1;
     }
 }
 
+/*
+ * The same pointer light, painted into the element's own border instead of a
+ * ::before layer, for fields: <input> and <textarea> can't have pseudo-elements.
+ * The border colour (--glow-border-color) is painted as a layer beneath the
+ * light, as glow-edge's light sits above a card's border; a real border would
+ * be drawn over the light and wash it out. The trailing `none` layer keeps the
+ * background colour clipped as before. Browsers without border-area keep a
+ * plain border. In the components layer, so a border colour utility (focus,
+ * an error state) still wins, drawn over it all.
+ */
+@property --glow-border-color {
+    syntax: '<color>';
+    inherits: false;
+    initial-value: transparent;
+}
+@layer components {
+    .glow-border {
+        border-color: var(--glow-border-color);
+    }
+    @supports (background-clip: border-area) {
+        .glow-border {
+            border-color: transparent;
+            background-image:
+                radial-gradient(
+                    360px circle at var(--gx, -999px) var(--gy, -999px),
+                    oklch(var(--glow) / calc(0.7 * var(--glow-strength))),
+                    oklch(var(--glow-2) / calc(0.2 * var(--glow-strength))) 40%,
+                    transparent 65%
+                ),
+                linear-gradient(var(--glow-border-color) 0 0), none;
+            background-origin: border-box;
+            background-clip: border-area, border-area, border-box;
+        }
+    }
+}
+
 /*
  * Built from Tailwind's backdrop utilities, which emit the standard and -webkit-
  * properties correctly. Phones: a live blur over scrolling content is the main
@@ -172,6 +231,20 @@
     }
 }
 
+/*
+ * Over the dot grid, the Header is lightly frosted so the dots stay visible
+ * behind it (a heavy blur smears them into a grey band). Only a Header after
+ * that Backdrop (the page's own backdrop comes first in <body>; a backdrop in a
+ * demo frame doesn't reach the page's header). :where keeps this below the
+ * lite-graphics and touch rules that follow.
+ */
+:where(.zen-backdrop[data-pattern='dots'] ~ *) .zen__header,
+:where(.zen-backdrop[data-pattern='dots']) ~ .zen__header {
+    background-color: oklch(var(--background) / 0.75);
+    -webkit-backdrop-filter: blur(2px);
+    backdrop-filter: blur(2px);
+}
+
 /* ───────────────────────── Lite graphics ───────────────────────── */
 
 /*
@@ -710,6 +783,13 @@ html[data-zen-graphics='lite'] .zen__table-container[data-under-bottom] .zen__st
         display 150ms allow-discrete;
 }
 .zen__dialog {
+    /*
+     * Fixed to the viewport, as the browser places modal dialogs. glow-edge sets
+     * position: relative (so its light has a box), and in the top layer relative
+     * computes to absolute: the dialog would be placed from the top of the
+     * document, off screen once the page is scrolled.
+     */
+    position: fixed;
     transition:
         opacity 200ms var(--ease-out-soft),
         scale 200ms var(--ease-out-soft),
@@ -730,6 +810,26 @@ html[data-zen-graphics='lite'] .zen__table-container[data-under-bottom] .zen__st
 .zen__dialog:not([open])::backdrop {
     opacity: 0;
 }
+/* Sheets slide from their edge instead of scaling up. */
+.zen__dialog[data-side] {
+    transition:
+        translate 320ms cubic-bezier(0.2, 0.8, 0.2, 1),
+        opacity 200ms,
+        overlay 320ms allow-discrete,
+        display 320ms allow-discrete;
+}
+.zen__dialog[data-side]:not([open]) {
+    scale: none;
+}
+.zen__dialog[data-side='bottom']:not([open]) {
+    translate: 0 100%;
+}
+.zen__dialog[data-side='right']:not([open]) {
+    translate: 100% 0;
+}
+.zen__dialog[data-side='left']:not([open]) {
+    translate: -100% 0;
+}
 @starting-style {
     .zen__popover:popover-open,
     .zen__dialog[open] {
@@ -739,6 +839,18 @@ html[data-zen-graphics='lite'] .zen__table-container[data-under-bottom] .zen__st
     .zen__dialog[open]::backdrop {
         opacity: 0;
     }
+    .zen__dialog[data-side][open] {
+        scale: none;
+    }
+    .zen__dialog[data-side='bottom'][open] {
+        translate: 0 100%;
+    }
+    .zen__dialog[data-side='right'][open] {
+        translate: 100% 0;
+    }
+    .zen__dialog[data-side='left'][open] {
+        translate: -100% 0;
+    }
 }
 /*
  * The page behind a modal dialog doesn't scroll. Hiding the overflow removes
@@ -800,7 +912,12 @@ html[data-zen-graphics='lite'] .zen__table-container[data-under-bottom] .zen__st
     transition: border-color 200ms;
 }
 
-/* Direct children of a .rise container enter one after another. */
+/*
+ * Direct children of a .rise container enter one after another. Filled backwards
+ * only: holding the end state (both/forwards) keeps a transform on the page,
+ * and Chrome then stops frosted glass inside it (e.g. sticky table parts) from
+ * blurring the sticky cells beneath. The end state is the natural style anyway.
+ */
 @keyframes zen-rise {
     from {
         opacity: 0;
@@ -808,7 +925,7 @@ html[data-zen-graphics='lite'] .zen__table-container[data-under-bottom] .zen__st
     }
 }
 .rise > * {
-    animation: zen-rise 0.5s var(--ease-out-soft) both;
+    animation: zen-rise 0.5s var(--ease-out-soft) backwards;
 }
 .rise > *:nth-child(2) {
     animation-delay: 50ms;
@@ -823,23 +940,36 @@ html[data-zen-graphics='lite'] .zen__table-container[data-under-bottom] .zen__st
     animation-delay: 200ms;
 }
 
-/* Loading placeholders: a soft light sweeping across. */
+/*
+ * Loading placeholders: a soft light sweeping across. The light is a layer
+ * three times as wide sliding through the placeholder, moved by transform so
+ * the compositor runs it: animating background-position repainted every
+ * placeholder on every frame.
+ */
 .zen__skeleton {
-    background: linear-gradient(
+    position: relative;
+    overflow: hidden;
+    isolation: isolate;
+    &::before {
+        content: '';
+        position: absolute;
+        inset: 0 auto 0 0;
+        width: 300%;
+        background: linear-gradient(
             100deg,
             oklch(var(--tint) / 0.04) 30%,
             oklch(var(--tint) / 0.09) 50%,
             oklch(var(--tint) / 0.04) 70%
-        )
-        0 0 / 300% 100%;
-    animation: zen-shimmer 1.6s ease-in-out infinite;
+        );
+        animation: zen-shimmer 1.6s ease-in-out infinite;
+    }
 }
 @keyframes zen-shimmer {
     from {
-        background-position: 100% 0;
+        transform: translateX(-66.6667%);
     }
     to {
-        background-position: 0 0;
+        transform: translateX(0);
     }
 }
 
@@ -863,6 +993,41 @@ html[data-zen-graphics='lite'] .zen__table-container[data-under-bottom] .zen__st
     }
 }
 
+/* Charts: lines draw themselves in, bars grow from the baseline, fills and donut segments fade up. */
+.zen__chart-draw {
+    stroke-dasharray: 1;
+    animation: zen-chart-draw 0.9s cubic-bezier(0.3, 0.7, 0.2, 1) both;
+}
+@keyframes zen-chart-draw {
+    from {
+        stroke-dashoffset: 1;
+    }
+    to {
+        stroke-dashoffset: 0;
+    }
+}
+.zen__chart-grow {
+    transform-box: fill-box;
+    transform-origin: bottom;
+    animation: zen-chart-grow 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both;
+}
+.zen__chart-grow[data-negative] {
+    transform-origin: top;
+}
+@keyframes zen-chart-grow {
+    from {
+        transform: scaleY(0);
+    }
+}
+.zen__chart-fade {
+    animation: zen-chart-fade 0.8s ease-out both;
+}
+@keyframes zen-chart-fade {
+    from {
+        opacity: 0;
+    }
+}
+
 /* Reduced motion: the OS setting, or opt in with html.reduce-motion. */
 @media (prefers-reduced-motion: reduce) {
     .zen-backdrop *,

package/dist/toast/index.d.ts

@@ -21,7 +21,12 @@ export interface ToastProviderProps {
     /** Classes for the column the toasts stack in (position, width…). */
     viewportClassName?: string;
 }
-/** Mount once near the root; `useToast()` works anywhere inside. */
+/**
+ * Mount once near the root; `useToast()` works anywhere inside. Toasts stack in
+ * a deck in the corner, newest in front with up to two peeking out behind; it
+ * fans out while pointed at or focused, and the countdowns wait meanwhile.
+ * Swipe a toast right to dismiss it.
+ */
 export default function ToastProvider({ children, offset, viewportClassName }: ToastProviderProps): import('react').JSX.Element;
 /**
  * Makes an element (a modal dialog, while it's open) the place toasts render, so

package/dist/toast/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/toast/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAGH,SAAS,EACT,SAAS,EAMZ,MAAM,OAAO,CAAC;AAKf,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,CAAC;AAErD,MAAM,WAAW,YAAY;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,sCAAsC;IACtC,MAAM,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC;IAChD,oEAAoE;IACpE,OAAO,CAAC,EAAE,MAAM,CAAC;CACpB;AAmBD,MAAM,WAAW,kBAAkB;IAC/B,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,qEAAqE;IACrE,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC9B;AAED,oEAAoE;AACpE,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,iBAAiB,EAAE,EAAE,kBAAkB,+BAiFhG;AAED;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,GAAG,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EAAE,MAAM,EAAE,OAAO,QAO/E;AAYD,+EAA+E;AAC/E,wBAAgB,QAAQ,YA7HoB,MAAM,YAAY,YAAY,KAAK,MAAM,CAiIpF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/toast/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAIH,SAAS,EACT,SAAS,EAMZ,MAAM,OAAO,CAAC;AAKf,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,CAAC;AAErD,MAAM,WAAW,YAAY;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,sCAAsC;IACtC,MAAM,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC;IAChD,oEAAoE;IACpE,OAAO,CAAC,EAAE,MAAM,CAAC;CACpB;AA4BD,MAAM,WAAW,kBAAkB;IAC/B,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,qEAAqE;IACrE,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC9B;AAED;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,iBAAiB,EAAE,EAAE,kBAAkB,+BA4IhG;AAED;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,GAAG,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EAAE,MAAM,EAAE,OAAO,QAO/E;AAYD,+EAA+E;AAC/E,wBAAgB,QAAQ,YA7LoB,MAAM,YAAY,YAAY,KAAK,MAAM,CAiMpF"}

package/dist/toast/index.js

@@ -0,0 +1,248 @@
+"use client";
+import { cx as e } from "../utils/cx.js";
+import { useGraphicsMode as t } from "../utils/graphics.js";
+import { AlertIcon as n, CheckIcon as r, InfoIcon as i } from "../utils/status-icons.js";
+import { createContext as a, useCallback as o, useContext as s, useEffect as c, useRef as l, useState as u } from "react";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+import { createPortal as p } from "react-dom";
+//#region packages/toast/index.tsx
+var m = 5e3, h = 3, g = 300, _ = 14, v = .05, y = 10, b = 60, x = .45, S = a(null), C = a(null);
+function w({ children: n, offset: r, viewportClassName: i }) {
+	t();
+	let [a, s] = u([]), b = l(0), x = l(/* @__PURE__ */ new Map()), w = l(/* @__PURE__ */ new Set()), [T, D] = u([]), [O, A] = u(!1);
+	c(() => A(!0), []);
+	let j = o((e) => (D((t) => [...t, e]), () => D((t) => t.filter((t) => t !== e))), []), M = T.at(-1) ?? (O ? document.body : null), [N, P] = u({}), F = o((e, t) => P((n) => n[e] === t ? n : {
+		...n,
+		[e]: t
+	}), []), [I, L] = u(!1), [R, z] = u(!1), B = o((e, t = "fade") => {
+		s((n) => n.map((n) => n.id === e ? {
+			...n,
+			leaving: t
+		} : n)), setTimeout(() => {
+			s((t) => {
+				let n = t.filter((t) => t.id !== e);
+				return n.length || L(!1), n;
+			}), P(({ [e]: t, ...n }) => n), x.current.delete(e), w.current.delete(e);
+		}, g);
+	}, []), V = o((e, { description: t, tone: n = "info", action: r, timeout: i } = {}) => {
+		let a = b.current++, o = {
+			id: a,
+			title: e,
+			description: t,
+			tone: n,
+			action: r,
+			timeout: i ?? (r ? 1e4 : m)
+		};
+		return s((e) => [...e, o]), a;
+	}, []), H = a.filter((e) => !e.leaving), U = (I || R) && H.length > 0, W = H.at(-1), G = W ? N[W.id] : void 0, K = H.slice(-3), q = U ? K.reduce((e, t) => e + (N[t.id] ?? 0), 0) + y * (K.length - 1) : (G ?? 0) + _ * (K.length - 1), J = (e) => {
+		let t = H.filter((t) => t.id > e.id), n = t.length;
+		return {
+			index: n,
+			front: n === 0,
+			hidden: n >= h,
+			y: U ? -(t.reduce((e, t) => e + (N[t.id] ?? 0), 0) + y * n) : -14 * Math.min(n, 2),
+			scale: U ? 1 : 1 - v * Math.min(n, 2),
+			height: !U && n > 0 ? G : void 0
+		};
+	};
+	return /* @__PURE__ */ f(S.Provider, {
+		value: V,
+		children: [/* @__PURE__ */ d(C.Provider, {
+			value: j,
+			children: n
+		}), M && p(/* @__PURE__ */ d("section", {
+			ref: E,
+			popover: "manual",
+			"aria-label": "Notifications",
+			"data-expanded": U || void 0,
+			onMouseEnter: () => L(!0),
+			onMouseLeave: () => L(!1),
+			onFocus: () => z(!0),
+			onBlur: (e) => {
+				e.currentTarget.contains(e.relatedTarget) || z(!1);
+			},
+			className: e("zen__toast-viewport fixed top-auto right-4 bottom-[calc(var(--zen-toast-offset,1rem)+env(safe-area-inset-bottom))] left-auto z-50 m-0 w-[calc(100vw-2rem)] overflow-visible border-0 bg-transparent p-0 text-inherit md:bottom-5 md:w-[24rem]", "transition-[height] duration-300 ease-[cubic-bezier(0.2,0.8,0.2,1)]", i),
+			style: {
+				height: q,
+				...r && { "--zen-toast-offset": r }
+			},
+			children: a.map((e, t) => /* @__PURE__ */ d(k, {
+				toast: e,
+				layout: J(e),
+				z: t + 1,
+				paused: U,
+				onDismiss: B,
+				onHeight: F,
+				clocks: x.current,
+				entered: w.current
+			}, e.id))
+		}), M)]
+	});
+}
+function T(e, t) {
+	let n = s(C);
+	c(() => {
+		let r = e.current;
+		if (n && t && r) return n(r);
+	}, [
+		n,
+		t,
+		e
+	]);
+}
+function E(e) {
+	if (e?.showPopover) try {
+		e.showPopover();
+	} catch {}
+}
+function D() {
+	let e = s(S);
+	if (!e) throw Error("useToast() needs a <ToastProvider> above it");
+	return e;
+}
+var O = {
+	success: {
+		icon: r,
+		ring: "border-primary/30",
+		badge: "bg-primary/15 text-primary",
+		bar: "bg-primary",
+		glow: "shadow-[0_18px_50px_-18px_oklch(var(--glow)/0.55)]"
+	},
+	error: {
+		icon: n,
+		ring: "border-destructive/40",
+		badge: "bg-destructive/15 text-destructive",
+		bar: "bg-destructive",
+		glow: "shadow-[0_18px_50px_-18px_oklch(var(--destructive)/0.55)]"
+	},
+	info: {
+		icon: i,
+		ring: "border-tint/10",
+		badge: "bg-tint/[0.08] text-foreground",
+		bar: "bg-muted-foreground",
+		glow: "shadow-[var(--toast-shadow)]"
+	}
+};
+function k({ toast: t, layout: n, z: r, paused: i, onDismiss: a, onHeight: o, clocks: s, entered: p }) {
+	let m = O[t.tone] ?? O.info, h = m.icon, g = l(null), _ = l(null), [v] = u(() => !p.has(t.id));
+	c(() => {
+		g.current?.isConnected && p.add(t.id);
+	}, [p, t.id]), s.has(t.id) || s.set(t.id, {
+		spent: 0,
+		since: null
+	});
+	let y = s.get(t.id), [S] = u(() => y.spent + (y.since === null ? 0 : Date.now() - y.since));
+	c(() => {
+		let e = _.current;
+		if (!e) return;
+		let n = () => o(t.id, e.offsetHeight);
+		n();
+		let r = new ResizeObserver(n);
+		return r.observe(e), () => r.disconnect();
+	}, [o, t.id]), c(() => {
+		if (!t.timeout || i || t.leaving) return;
+		y.since = Date.now();
+		let e = setTimeout(() => a(t.id), Math.max(0, t.timeout - y.spent));
+		return () => {
+			clearTimeout(e), y.since !== null && (y.spent += Date.now() - y.since), y.since = null;
+		};
+	}, [
+		i,
+		t.id,
+		t.timeout,
+		t.leaving,
+		a,
+		y
+	]);
+	let C = l(null), w = (e) => {
+		t.leaving || e.button !== 0 || e.target.closest("button") || (C.current = {
+			x: e.clientX,
+			dx: 0,
+			t: e.timeStamp,
+			speed: 0
+		}, e.currentTarget.setPointerCapture(e.pointerId), e.currentTarget.dataset.swiping = "");
+	}, T = (e) => {
+		if (!C.current) return;
+		let t = C.current, n = e.clientX - t.x;
+		t.speed = (n - t.dx) / Math.max(1, e.timeStamp - t.t), t.dx = n, t.t = e.timeStamp, e.currentTarget.style.setProperty("--zen-swipe", `${n > 0 ? n : n / 6}px`);
+	}, E = (e) => {
+		let n = C.current;
+		n && (C.current = null, delete e.currentTarget.dataset.swiping, n.dx > b || n.dx > 0 && n.speed > x ? a(t.id, "swipe") : e.currentTarget.style.setProperty("--zen-swipe", "0px"));
+	};
+	return /* @__PURE__ */ f("div", {
+		ref: g,
+		role: t.tone === "error" ? "alert" : "status",
+		"aria-atomic": "true",
+		"data-front": n.front || void 0,
+		"data-behind": !n.front && n.height !== void 0 || void 0,
+		inert: n.hidden || !!t.leaving,
+		onPointerDown: w,
+		onPointerMove: T,
+		onPointerUp: E,
+		onPointerCancel: E,
+		className: e("zen__toast group glass glass-blur glow-edge text-card-foreground absolute! inset-x-0 bottom-0 origin-bottom touch-pan-y overflow-hidden rounded-2xl border select-none", "transition-[transform,translate,opacity,height] duration-400 ease-[cubic-bezier(0.2,0.8,0.2,1)] data-swiping:transition-none", v && "starting:translate-y-full starting:opacity-0", n.hidden && "opacity-0", t.leaving === "fade" && "translate-y-[35%] opacity-0", t.leaving === "swipe" && "translate-x-full opacity-0", m.ring, m.glow),
+		style: {
+			zIndex: r,
+			height: n.height,
+			transform: `translateX(var(--zen-swipe, 0px)) translateY(${n.y}px) scale(${n.scale})`
+		},
+		children: [/* @__PURE__ */ f("div", {
+			ref: _,
+			className: "flex items-start gap-3 p-3.5 pr-10 transition-opacity duration-300 group-data-behind:opacity-0",
+			children: [
+				/* @__PURE__ */ d("span", {
+					className: e("mt-0.5 grid size-8 shrink-0 place-items-center rounded-full", m.badge),
+					"aria-hidden": !0,
+					children: /* @__PURE__ */ d(h, { className: "size-4" })
+				}),
+				/* @__PURE__ */ f("div", {
+					className: "flex min-w-0 flex-1 flex-col gap-0.5 pt-0.5",
+					children: [
+						/* @__PURE__ */ d("div", {
+							className: "text-sm font-semibold",
+							children: t.title
+						}),
+						t.description && /* @__PURE__ */ d("div", {
+							className: "text-muted-foreground text-sm leading-5",
+							children: t.description
+						}),
+						t.action && /* @__PURE__ */ d("button", {
+							type: "button",
+							onClick: () => {
+								t.action?.onClick(), a(t.id);
+							},
+							className: "border-tint/10 bg-tint/[0.06] hover:bg-tint/[0.12] focus-visible:ring-ring/50 mt-2 self-start rounded-lg border px-3 py-1 text-xs font-medium outline-hidden transition-colors focus-visible:ring-2",
+							children: t.action.label
+						})
+					]
+				}),
+				/* @__PURE__ */ d("button", {
+					type: "button",
+					"aria-label": "Dismiss",
+					onClick: () => a(t.id),
+					className: "text-muted-foreground hover:bg-tint/[0.07] hover:text-foreground focus-visible:ring-ring/50 absolute top-2.5 right-2.5 grid size-7 place-items-center rounded-lg outline-hidden transition-colors focus-visible:ring-2",
+					children: /* @__PURE__ */ d("svg", {
+						viewBox: "0 0 16 16",
+						fill: "none",
+						stroke: "currentColor",
+						strokeWidth: "1.8",
+						strokeLinecap: "round",
+						className: "size-3.5",
+						"aria-hidden": !0,
+						children: /* @__PURE__ */ d("path", { d: "m4 4 8 8M12 4l-8 8" })
+					})
+				})
+			]
+		}), t.timeout > 0 && /* @__PURE__ */ d("span", {
+			"aria-hidden": !0,
+			className: e("zen__toast-timer absolute bottom-0 left-0 h-0.5 w-full origin-left opacity-60 transition-opacity group-data-behind:opacity-0", m.bar),
+			style: {
+				animationDuration: `${t.timeout}ms`,
+				animationDelay: `${-S}ms`,
+				animationPlayState: i ? "paused" : void 0
+			}
+		})]
+	});
+}
+//#endregion
+export { w as default, D as useToast, T as useToastHost };

package/dist/toggle/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/toggle/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;IACnF,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CACzC;AAED;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,KAAK,EAAE,WAAW,+BAsChD"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/toggle/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;IACnF,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CACzC;AAED;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,KAAK,EAAE,WAAW,+BAwChD"}

package/dist/toggle/index.js

@@ -0,0 +1,26 @@
+"use client";
+import { cx as e } from "../utils/cx.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region packages/toggle/index.tsx
+function r(r) {
+	let { className: i, onChange: a, onKeyDown: o, disabled: s, ...c } = r;
+	return /* @__PURE__ */ n("label", {
+		className: e("zen__toggle border-tint/10 bg-tint/[0.06] relative inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border p-0.5", "has-focus-visible:ring-glow/50 transition-[background-color,box-shadow,border-color] duration-300 has-focus-visible:ring-2", "has-checked:border-glow/60 has-checked:bg-glow/40 has-checked:shadow-[0_0_18px_-2px_oklch(var(--glow)/0.8)]", "has-disabled:cursor-not-allowed has-disabled:opacity-50", i),
+		children: [/* @__PURE__ */ t("input", {
+			type: "checkbox",
+			role: "switch",
+			className: "peer absolute inset-0 z-10 m-0 size-full cursor-pointer appearance-none rounded-full opacity-0 disabled:cursor-not-allowed",
+			disabled: s,
+			onChange: (e) => a?.(e.target.checked),
+			onKeyDown: (e) => {
+				o?.(e), e.key === "Enter" && !e.defaultPrevented && (e.preventDefault(), e.currentTarget.click());
+			},
+			...c
+		}), /* @__PURE__ */ t("span", {
+			"aria-hidden": !0,
+			className: e("size-[1.125rem] rounded-full bg-white/70 shadow-md", "transition-[translate,background-color] duration-300 ease-[cubic-bezier(0.2,0.8,0.2,1)]", "peer-checked:translate-x-5 peer-checked:bg-white")
+		})]
+	});
+}
+//#endregion
+export { r as default };

package/dist/tooltip/index.d.ts

@@ -0,0 +1,25 @@
+import { ComponentProps, ReactNode } from 'react';
+/**
+ * A short hint shown while the pointer is over its trigger or the trigger has
+ * keyboard focus; Escape hides it. The trigger is described by it for screen
+ * readers. Put a TooltipTrigger and a TooltipContent inside. For anything to
+ * click or fill in, use Popover.
+ */
+export default function Tooltip({ children }: {
+    children?: ReactNode;
+}): import('react').JSX.Element;
+/** What the tooltip describes: a button by default. With `asChild`, your own focusable element instead. */
+export declare function TooltipTrigger({ asChild, style, onPointerEnter, onPointerLeave, onFocus, onBlur, onKeyDown, children, ...rest }: TooltipTriggerProps): import('react').JSX.Element;
+/** The hint: glass, below the trigger (above it if there's no room), centred on it by default. */
+export declare function TooltipContent({ align, offset, className, style, onPointerEnter, onPointerLeave, children, ...rest }: TooltipContentProps): import('react').JSX.Element;
+export interface TooltipTriggerProps extends ComponentProps<'button'> {
+    /** Put the trigger's props on your own focusable element instead of rendering a button. */
+    asChild?: boolean;
+}
+export interface TooltipContentProps extends ComponentProps<'div'> {
+    /** Centred on the trigger (default), or lined up with its start or end edge. */
+    align?: 'start' | 'end' | 'center';
+    /** Gap from the trigger, in px. */
+    offset?: number;
+}
+//# sourceMappingURL=index.d.ts.map