@rinzai/zen 0.8.6 → 0.10.0

package/dist/theme.css

@@ -224,6 +224,25 @@
  * surface's own `!` background (a Dialog's) is: an unlayered !important rule
  * loses to a layered one.
  */
+/*
+ * On touch screens, a small control's hit area grows to at least 44px (centred on
+ * it), while it looks the same. For controls that aren't positioned themselves.
+ */
+@utility touch-target {
+    @media (pointer: coarse) {
+        position: relative;
+        &::after {
+            content: '';
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            translate: -50% -50%;
+            width: max(100%, 44px);
+            height: max(100%, 44px);
+        }
+    }
+}
+
 @utility glass-blur {
     @apply backdrop-blur-[18px] backdrop-saturate-140;
     /*
@@ -383,6 +402,53 @@ html[data-zen-graphics='lite'] .zen__table-container[data-under-bottom] .zen__st
     --sh-comment: oklch(var(--muted-foreground));
 }
 
+/*
+ * Code wider than its block fades out at the edge it carries on past. The mask is
+ * only in the keyframes: code that fits has no scroll timeline, so no mask at all.
+ */
+@property --zen-code-l {
+    syntax: '<length>';
+    inherits: false;
+    initial-value: 0px;
+}
+@property --zen-code-r {
+    syntax: '<length>';
+    inherits: false;
+    initial-value: 0px;
+}
+@keyframes zen-code-fade {
+    0% {
+        --zen-code-l: 0px;
+        --zen-code-r: 2rem;
+    }
+    5% {
+        --zen-code-l: 2rem;
+    }
+    95% {
+        --zen-code-r: 2rem;
+    }
+    100% {
+        --zen-code-l: 2rem;
+        --zen-code-r: 0px;
+    }
+    0%,
+    100% {
+        mask-image: linear-gradient(
+            to right,
+            transparent,
+            #000 var(--zen-code-l),
+            #000 calc(100% - var(--zen-code-r)),
+            transparent
+        );
+    }
+}
+@supports (animation-timeline: scroll()) {
+    .zen__code-block pre {
+        animation: zen-code-fade linear both;
+        animation-timeline: scroll(self inline);
+    }
+}
+
 /* ───────────────────────── Backdrop: contours / dots + light ───────────────────────── */
 
 .zen-backdrop {
@@ -891,16 +957,23 @@ html.zen-theme-closing::view-transition-old(zen-theme-area) {
  * otherwise be repainted when the animation ends, its icons snapping a pixel
  * away from the text.
  */
-.zen__popover,
+.zen__popover {
+    will-change: opacity;
+}
 .zen__dialog {
     will-change: scale;
 }
+/* The gap animates, not scale (which reads as resizing), so a popup flipped above slides the right way. */
 .zen__popover {
+    margin-block: calc(var(--zen-anchor-offset, 4) * 1px);
     transition:
         opacity 150ms,
-        scale 150ms,
-        overlay 150ms allow-discrete,
-        display 150ms allow-discrete;
+        margin-block 180ms var(--ease-out-soft),
+        overlay 180ms allow-discrete,
+        display 180ms allow-discrete;
+}
+.zen__popover:not(:popover-open) {
+    margin-block: calc((var(--zen-anchor-offset, 4) - 6) * 1px);
 }
 .zen__dialog {
     /*
@@ -922,7 +995,9 @@ html.zen-theme-closing::view-transition-old(zen-theme-area) {
         overlay 150ms allow-discrete,
         display 150ms allow-discrete;
 }
-.zen__popover:not(:popover-open),
+.zen__popover:not(:popover-open) {
+    opacity: 0;
+}
 .zen__dialog:not([open]) {
     opacity: 0;
     scale: 0.95;
@@ -930,6 +1005,13 @@ html.zen-theme-closing::view-transition-old(zen-theme-area) {
 .zen__dialog:not([open])::backdrop {
     opacity: 0;
 }
+/* A dialog opened from a button grows out of it, and shrinks back into it (useModal sets the origin). */
+.zen__dialog[data-zen-from] {
+    transition-duration: 280ms;
+}
+.zen__dialog[data-zen-from]:not([open]) {
+    scale: 0.4;
+}
 /* Sheets slide from their edge instead of scaling up. */
 .zen__dialog[data-side] {
     transition:
@@ -953,8 +1035,23 @@ html.zen-theme-closing::view-transition-old(zen-theme-area) {
 .zen__dialog[data-side='left']:not([open]) {
     translate: -100% 0;
 }
+/* A sheet being swiped back to its edge (useSheetSwipe): it follows the finger, and the scrim fades with it. */
+.zen__dialog[data-side][open] {
+    translate: var(--zen-swipe, 0 0);
+}
+.zen__dialog[data-side][open]::backdrop {
+    opacity: calc(1 - var(--zen-swipe-progress, 0));
+}
+.zen__dialog[data-swiping],
+.zen__dialog[data-swiping]::backdrop {
+    transition: none;
+    user-select: none;
+}
 @starting-style {
-    .zen__popover:popover-open,
+    .zen__popover:popover-open {
+        opacity: 0;
+        margin-block: calc((var(--zen-anchor-offset, 4) - 6) * 1px);
+    }
     .zen__dialog[open] {
         opacity: 0;
         scale: 0.95;
@@ -962,9 +1059,15 @@ html.zen-theme-closing::view-transition-old(zen-theme-area) {
     .zen__dialog[open]::backdrop {
         opacity: 0;
     }
+    .zen__dialog[data-zen-from][open] {
+        scale: 0.4;
+    }
     .zen__dialog[data-side][open] {
         scale: none;
     }
+    .zen__dialog[data-side][open]::backdrop {
+        opacity: 0;
+    }
     .zen__dialog[data-side='bottom'][open] {
         translate: 0 100%;
     }
@@ -1062,6 +1165,47 @@ html.zen-theme-closing::view-transition-old(zen-theme-area) {
 .rise > *:nth-child(n + 5) {
     animation-delay: 200ms;
 }
+/* A list's rows (a .rise-list's children, e.g. a TableBody's) enter the same way, in quicker steps, as they first show. */
+.rise-list > * {
+    animation: zen-rise 0.45s var(--ease-out-soft) backwards;
+}
+.rise-list > *:nth-child(2) {
+    animation-delay: 35ms;
+}
+.rise-list > *:nth-child(3) {
+    animation-delay: 70ms;
+}
+.rise-list > *:nth-child(4) {
+    animation-delay: 105ms;
+}
+.rise-list > *:nth-child(5) {
+    animation-delay: 140ms;
+}
+.rise-list > *:nth-child(6) {
+    animation-delay: 175ms;
+}
+.rise-list > *:nth-child(7) {
+    animation-delay: 210ms;
+}
+.rise-list > *:nth-child(8) {
+    animation-delay: 245ms;
+}
+.rise-list > *:nth-child(9) {
+    animation-delay: 280ms;
+}
+.rise-list > *:nth-child(10) {
+    animation-delay: 315ms;
+}
+.rise-list > *:nth-child(11) {
+    animation-delay: 350ms;
+}
+.rise-list > *:nth-child(12) {
+    animation-delay: 385ms;
+}
+/* Past the first screenful, rows (often added later, e.g. by LoadMore) just appear. */
+.rise-list > *:nth-child(n + 13) {
+    animation: none;
+}
 
 /*
  * Loading placeholders: a soft light sweeping across. The light is a layer
@@ -1096,6 +1240,135 @@ html.zen-theme-closing::view-transition-old(zen-theme-area) {
     }
 }
 
+/*
+ * Morphs: a card opening into its page. Give the pair the view-transition class
+ * zen-morph (React: <ViewTransition name=… share="zen-morph">). The box moves and
+ * resizes; what's in it keeps its size, clipped to the box, so text never stretches.
+ */
+::view-transition-group(*.zen-morph) {
+    animation-duration: 0.42s;
+    animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+::view-transition-image-pair(*.zen-morph) {
+    overflow: clip;
+    border-radius: var(--radius-xl);
+}
+::view-transition-old(*.zen-morph),
+::view-transition-new(*.zen-morph) {
+    height: 100%;
+    object-fit: none;
+    object-position: top left;
+}
+
+/* Pages: the old one fades out as the new one rises in (PageTransition). */
+::view-transition-group(zen-page) {
+    animation-duration: 0.34s;
+    animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+::view-transition-old(zen-page) {
+    animation: zen-page-out 0.16s ease-in both;
+}
+::view-transition-new(zen-page) {
+    animation: zen-page-in 0.34s cubic-bezier(0.2, 0.8, 0.2, 1) 0.06s both;
+}
+@keyframes zen-page-out {
+    to {
+        opacity: 0;
+        translate: 0 -6px;
+    }
+}
+@keyframes zen-page-in {
+    from {
+        opacity: 0;
+        translate: 0 12px;
+    }
+}
+@media (prefers-reduced-motion: reduce) {
+    ::view-transition-group(zen-page),
+    ::view-transition-old(zen-page),
+    ::view-transition-new(zen-page) {
+        animation: none;
+    }
+}
+html.reduce-motion::view-transition-group(zen-page),
+html.reduce-motion::view-transition-old(zen-page),
+html.reduce-motion::view-transition-new(zen-page) {
+    animation: none;
+}
+
+/* The selection bar rises into view when the first row is selected. */
+.zen__selection-bar {
+    animation: zen-bar-in 0.3s var(--ease-out-soft) both;
+}
+@keyframes zen-bar-in {
+    from {
+        opacity: 0;
+        translate: 0 16px;
+    }
+}
+
+/* Content arriving where its placeholder was. */
+.zen__reveal {
+    animation: zen-reveal 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both;
+}
+@keyframes zen-reveal {
+    from {
+        opacity: 0;
+        translate: 0 4px;
+    }
+}
+
+/* A progress ring reaching its goal: a ring of glow goes out from the arc as it closes. */
+.zen__ring-burst {
+    animation: zen-ring-burst 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.5s both;
+    box-shadow: 0 0 18px oklch(var(--glow) / calc(0.6 * var(--glow-k)));
+}
+@keyframes zen-ring-burst {
+    from {
+        opacity: 0.9;
+        scale: 1;
+    }
+    to {
+        opacity: 0;
+        scale: 1.45;
+    }
+}
+
+/* A value just changed by an edit. */
+.zen__editable-cell[data-changed] {
+    animation: zen-cell-changed 1s cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+@keyframes zen-cell-changed {
+    from {
+        background-color: oklch(var(--primary) / 0.22);
+        box-shadow: 0 0 14px oklch(var(--glow) / calc(0.45 * var(--glow-k)));
+    }
+}
+
+/* A swiped row moves aside for the actions behind it, and settles when let go. */
+.zen__swipe-row {
+    translate: calc(-1 * var(--zen-row-swipe, 0px)) 0;
+    transition: translate 0.3s var(--ease-out-soft);
+}
+.zen__swipe-row:dir(rtl) {
+    translate: var(--zen-row-swipe, 0px) 0;
+}
+.zen__swipe-actions {
+    transition: width 0.3s var(--ease-out-soft);
+}
+.zen__swipe-row[data-swiping],
+.zen__swipe-row[data-swiping] > .zen__swipe-actions {
+    transition: none;
+}
+
+/* While an item is dragged, the others glide out of its way (not when the list is reordered after). */
+.zen__sortable[data-sorting] > .zen__sortable-item:not([data-dragging]) {
+    transition:
+        translate 0.2s var(--ease-out-soft),
+        box-shadow 0.2s,
+        scale 0.2s;
+}
+
 /* Time left before a toast goes away. */
 .zen__toast-timer {
     animation: zen-toast-timer linear forwards;
@@ -1116,6 +1389,40 @@ html.zen-theme-closing::view-transition-old(zen-theme-area) {
     }
 }
 
+/* A tag added to a TagInput pops in. */
+.zen__tag {
+    animation: zen-pop 0.3s var(--ease-out-soft) backwards;
+}
+
+@keyframes zen-fade-in {
+    from {
+        opacity: 0;
+    }
+}
+@keyframes zen-chip-in {
+    from {
+        opacity: 0;
+        scale: 0.92;
+        translate: 0 3px;
+    }
+}
+.zen__filter-chip {
+    animation: zen-chip-in 0.28s var(--ease-out-soft) backwards;
+}
+.zen__filter-clear {
+    animation: zen-fade-in 0.2s ease-out backwards;
+}
+
+/* CodeInput's caret, in the box typing goes into. */
+.zen__code-caret {
+    animation: zen-caret 1s steps(1) infinite;
+}
+@keyframes zen-caret {
+    50% {
+        opacity: 0;
+    }
+}
+
 /* Charts: lines draw themselves in, bars grow from the baseline, fills and donut segments fade up. */
 .zen__chart-draw {
     stroke-dasharray: 1;
@@ -1150,6 +1457,29 @@ html.zen-theme-closing::view-transition-old(zen-theme-area) {
         opacity: 0;
     }
 }
+/* Held at their start until the chart is first on screen, so they're seen. */
+/*
+ * A sparkline is revealed from the left instead: its stroke doesn't scale with the
+ * stretched drawing (non-scaling-stroke), and Chrome then measures a dash in screen
+ * pixels, not along the path, breaking the line up. Its points only go rightwards,
+ * so the reveal draws it just the same.
+ */
+.zen__sparkline-draw,
+.zen__chart-sweep {
+    animation: zen-sparkline-draw 0.9s cubic-bezier(0.3, 0.7, 0.2, 1) both;
+}
+@keyframes zen-sparkline-draw {
+    from {
+        clip-path: inset(0 100% 0 0);
+    }
+    to {
+        clip-path: inset(0);
+    }
+}
+[data-zen-unseen] :is(.zen__chart-draw, .zen__sparkline-draw, .zen__chart-sweep, .zen__chart-grow, .zen__chart-fade),
+[data-zen-unseen]:is(.zen__chart-draw, .zen__sparkline-draw, .zen__chart-sweep, .zen__chart-grow, .zen__chart-fade) {
+    animation-play-state: paused;
+}
 
 /*
  * Reduced motion: the OS setting, or opt in with html.reduce-motion. It reaches
@@ -1162,7 +1492,8 @@ html.zen-theme-closing::view-transition-old(zen-theme-area) {
     [class*='zen__'],
     [class*='zen__']::before,
     [class*='zen__']::backdrop,
-    .rise > * {
+    .rise > *,
+    .rise-list > * {
         animation-duration: 0.01ms !important;
         animation-iteration-count: 1 !important;
         transition-duration: 0.01ms !important;
@@ -1173,7 +1504,8 @@ html.reduce-motion .zen-backdrop *::before,
 html.reduce-motion [class*='zen__'],
 html.reduce-motion [class*='zen__']::before,
 html.reduce-motion [class*='zen__']::backdrop,
-html.reduce-motion .rise > * {
+html.reduce-motion .rise > *,
+html.reduce-motion .rise-list > * {
     animation-duration: 0.01ms !important;
     animation-iteration-count: 1 !important;
     transition-duration: 0.01ms !important;

package/dist/timeline/index.d.ts

@@ -0,0 +1,18 @@
+import { ComponentProps, ReactNode } from 'react';
+/** Events in order, each on a dot joined by a line: an activity feed, a history. */
+export default function Timeline({ className, ...rest }: ComponentProps<'ol'>): import('react').JSX.Element;
+/**
+ * One event: its title, when (`time`), and anything more as children. `icon`
+ * replaces the dot; `active` lights it in the accent, e.g. what's happening now.
+ */
+export declare function TimelineItem({ title, time, icon, active, className, children, ...rest }: TimelineItemProps): import('react').JSX.Element;
+export interface TimelineItemProps extends Omit<ComponentProps<'li'>, 'title'> {
+    title: ReactNode;
+    /** When it happened, e.g. a <time> or "2 hours ago". */
+    time?: ReactNode;
+    /** An icon in place of the dot. */
+    icon?: ReactNode;
+    /** Lit in the accent: the current or latest event. */
+    active?: boolean;
+}
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/timeline/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElD,oFAAoF;AACpF,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,cAAc,CAAC,IAAI,CAAC,+BAE5E;AAED;;;GAGG;AACH,wBAAgB,YAAY,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,iBAAiB,+BA8B1G;AAED,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,OAAO,CAAC;IAC1E,KAAK,EAAE,SAAS,CAAC;IACjB,wDAAwD;IACxD,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,mCAAmC;IACnC,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,sDAAsD;IACtD,MAAM,CAAC,EAAE,OAAO,CAAC;CACpB"}

package/dist/timeline/index.js

@@ -0,0 +1,45 @@
+"use client";
+import { cx as e } from "../utils/cx.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region packages/timeline/index.tsx
+function r({ className: n, ...r }) {
+	return /* @__PURE__ */ t("ol", {
+		className: e("zen__timeline flex flex-col", n),
+		...r
+	});
+}
+function i({ title: r, time: i, icon: a, active: o, className: s, children: c, ...l }) {
+	return /* @__PURE__ */ n("li", {
+		className: e("group/timeline relative flex gap-3 pb-6 last:pb-0", s),
+		...l,
+		children: [
+			/* @__PURE__ */ t("span", {
+				"aria-hidden": !0,
+				className: "bg-tint/10 absolute top-7 bottom-1 left-[11px] w-px group-last/timeline:hidden"
+			}),
+			/* @__PURE__ */ t("span", {
+				"aria-hidden": !0,
+				className: e("relative mt-0.5 grid size-6 shrink-0 place-items-center rounded-full [&_svg]:size-3.5", a ? "bg-tint/[0.06] text-muted-foreground shadow-[inset_0_0_0_1px_oklch(var(--tint)/0.1)]" : "after:bg-tint/30 after:size-2 after:rounded-full", o && "bg-primary/15 text-primary shadow-[inset_0_0_0_1px_oklch(var(--primary)/0.35),0_0_16px_-2px_oklch(var(--glow)/calc(0.7*var(--glow-k)))] after:bg-primary"),
+				children: a
+			}),
+			/* @__PURE__ */ n("div", {
+				className: "flex min-w-0 flex-1 flex-col gap-1",
+				children: [/* @__PURE__ */ n("div", {
+					className: "flex flex-wrap items-baseline justify-between gap-x-3",
+					children: [/* @__PURE__ */ t("span", {
+						className: "text-foreground text-sm font-medium",
+						children: r
+					}), i && /* @__PURE__ */ t("span", {
+						className: "text-muted-foreground text-xs tabular-nums",
+						children: i
+					})]
+				}), c && /* @__PURE__ */ t("div", {
+					className: "text-muted-foreground text-sm leading-6",
+					children: c
+				})]
+			})
+		]
+	});
+}
+//#endregion
+export { i as TimelineItem, r as default };

package/dist/toast/index.js

@@ -4,13 +4,13 @@ import { useGraphicsMode as t } from "../utils/graphics.js";
 import { AlertIcon as n, CheckIcon as r, InfoIcon as i } from "../utils/status-icons.js";
 import a from "../icons/micro/x-mark.js";
 import { createContext as o, useCallback as s, useContext as c, useEffect as l, useRef as u, useState as d } from "react";
-import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
-import { createPortal as h } from "react-dom";
+import { createPortal as f } from "react-dom";
+import { Fragment as p, jsx as m, jsxs as h } from "react/jsx-runtime";
 //#region packages/toast/index.tsx
 var g = 5e3, _ = 3, v = 300, y = 14, b = .05, x = 10, S = 60, C = .45, w = o(null), T = o(null);
 function E({ children: n, offset: r, viewportClassName: i }) {
 	t();
-	let [a, o] = d([]), c = u(0), f = u(/* @__PURE__ */ new Map()), S = u(/* @__PURE__ */ new Set()), [C, E] = d([]), [D, k] = d(!1);
+	let [a, o] = d([]), c = u(0), p = u(/* @__PURE__ */ new Map()), S = u(/* @__PURE__ */ new Set()), [C, E] = d([]), [D, k] = d(!1);
 	l(() => k(!0), []);
 	let A = s((e) => (E((t) => [...t, e]), () => E((t) => t.filter((t) => t !== e))), []), M = C.at(-1) ?? (D ? document.body : null), [N, P] = d({}), F = s((e, t) => P((n) => n[e] === t ? n : {
 		...n,
@@ -32,7 +32,7 @@ function E({ children: n, offset: r, viewportClassName: i }) {
 			o((t) => {
 				let n = t.filter((t) => t.id !== e);
 				return n.length || L(!1), n;
-			}), P(({ [e]: t, ...n }) => n), f.current.delete(e), S.current.delete(e);
+			}), P(({ [e]: t, ...n }) => n), p.current.delete(e), S.current.delete(e);
 		}, v);
 	}, []), U = s((e, { description: t, tone: n = "info", action: r, timeout: i } = {}) => {
 		let a = c.current++, s = {
@@ -55,12 +55,12 @@ function E({ children: n, offset: r, viewportClassName: i }) {
 			height: !G && n > 0 ? q : void 0
 		};
 	};
-	return /* @__PURE__ */ m(w.Provider, {
+	return /* @__PURE__ */ h(w.Provider, {
 		value: U,
-		children: [/* @__PURE__ */ p(T.Provider, {
+		children: [/* @__PURE__ */ m(T.Provider, {
 			value: A,
 			children: n
-		}), M && h(/* @__PURE__ */ p("section", {
+		}), M && f(/* @__PURE__ */ m("section", {
 			ref: V,
 			popover: "manual",
 			tabIndex: -1,
@@ -77,14 +77,14 @@ function E({ children: n, offset: r, viewportClassName: i }) {
 				height: Y,
 				...r && { "--zen-toast-offset": r }
 			},
-			children: a.map((e, t) => /* @__PURE__ */ p(j, {
+			children: a.map((e, t) => /* @__PURE__ */ m(j, {
 				toast: e,
 				layout: X(e),
 				z: t + 1,
 				paused: G,
 				onDismiss: H,
 				onHeight: F,
-				clocks: f.current,
+				clocks: p.current,
 				entered: S.current
 			}, e.id))
 		}), M)]
@@ -134,11 +134,11 @@ var A = {
 		glow: "shadow-[var(--toast-shadow)]"
 	}
 };
-function j({ toast: t, layout: n, z: r, paused: i, onDismiss: o, onHeight: s, clocks: c, entered: h }) {
-	let g = A[t.tone] ?? A.info, _ = g.icon, v = u(null), y = u(null), [b] = d(() => !h.has(t.id));
+function j({ toast: t, layout: n, z: r, paused: i, onDismiss: o, onHeight: s, clocks: c, entered: f }) {
+	let g = A[t.tone] ?? A.info, _ = g.icon, v = u(null), y = u(null), [b] = d(() => !f.has(t.id));
 	l(() => {
-		v.current?.isConnected && h.add(t.id);
-	}, [h, t.id]);
+		v.current?.isConnected && f.add(t.id);
+	}, [f, t.id]);
 	let [x, w] = d(!1);
 	l(() => {
 		if (!b) return;
@@ -186,7 +186,7 @@ function j({ toast: t, layout: n, z: r, paused: i, onDismiss: o, onHeight: s, cl
 		let n = D.current;
 		n && (D.current = null, delete e.currentTarget.dataset.swiping, n.dx > S || n.dx > 0 && n.speed > C ? o(t.id, "swipe") : e.currentTarget.style.setProperty("--zen-swipe", "0px"));
 	};
-	return /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ m("div", {
+	return /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ h("div", {
 		ref: v,
 		role: t.tone === "error" ? "alert" : "status",
 		"aria-live": "off",
@@ -203,27 +203,27 @@ function j({ toast: t, layout: n, z: r, paused: i, onDismiss: o, onHeight: s, cl
 			height: n.height,
 			transform: `translateX(var(--zen-swipe, 0px)) translateY(${n.y}px) scale(${n.scale})`
 		},
-		children: [/* @__PURE__ */ m("div", {
+		children: [/* @__PURE__ */ h("div", {
 			ref: y,
 			className: "flex items-start gap-3 p-3.5 pr-10 transition-opacity duration-300 group-data-behind:opacity-0",
 			children: [
-				/* @__PURE__ */ p("span", {
+				/* @__PURE__ */ m("span", {
 					className: e("mt-0.5 grid size-8 shrink-0 place-items-center rounded-full", g.badge),
 					"aria-hidden": !0,
-					children: /* @__PURE__ */ p(_, { className: "size-4" })
+					children: /* @__PURE__ */ m(_, { className: "size-4" })
 				}),
-				/* @__PURE__ */ m("div", {
+				/* @__PURE__ */ h("div", {
 					className: "flex min-w-0 flex-1 flex-col gap-0.5 pt-0.5",
 					children: [
-						/* @__PURE__ */ p("div", {
+						/* @__PURE__ */ m("div", {
 							className: "text-sm font-semibold",
 							children: t.title
 						}),
-						t.description && /* @__PURE__ */ p("div", {
+						t.description && /* @__PURE__ */ m("div", {
 							className: "text-muted-foreground text-sm leading-5",
 							children: t.description
 						}),
-						t.action && /* @__PURE__ */ p("button", {
+						t.action && /* @__PURE__ */ m("button", {
 							type: "button",
 							onClick: () => {
 								t.action?.onClick(), o(t.id);
@@ -233,15 +233,15 @@ function j({ toast: t, layout: n, z: r, paused: i, onDismiss: o, onHeight: s, cl
 						})
 					]
 				}),
-				/* @__PURE__ */ p("button", {
+				/* @__PURE__ */ m("button", {
 					type: "button",
 					"aria-label": "Dismiss",
 					onClick: () => o(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 cursor-pointer place-items-center rounded-lg outline-hidden transition-colors focus-visible:ring-2",
-					children: /* @__PURE__ */ p(a, { className: "size-3.5" })
+					children: /* @__PURE__ */ m(a, { className: "size-3.5" })
 				})
 			]
-		}), t.timeout > 0 && /* @__PURE__ */ p("span", {
+		}), t.timeout > 0 && /* @__PURE__ */ m("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", g.bar),
 			style: {
@@ -250,7 +250,7 @@ function j({ toast: t, layout: n, z: r, paused: i, onDismiss: o, onHeight: s, cl
 				animationPlayState: i ? "paused" : void 0
 			}
 		})]
-	}), /* @__PURE__ */ p("span", {
+	}), /* @__PURE__ */ m("span", {
 		className: "sr-only",
 		"aria-live": t.tone === "error" ? "assertive" : "polite",
 		"aria-atomic": "true",

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,+BAwChD"}
+{"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,+BAyChD"}

package/dist/toggle/index.js

@@ -4,7 +4,7 @@ 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", {
+	return /* @__PURE__ */ n("span", {
 		className: e("zen__toggle bg-tint/[0.06] relative inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border border-[color:oklch(var(--tint)/var(--zen-control-edge))] 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)/calc(0.8*var(--glow-k)))]", "has-disabled:cursor-not-allowed has-disabled:opacity-50", i),
 		children: [/* @__PURE__ */ t("input", {
 			type: "checkbox",

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/tree/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/tree/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAa,cAAc,EAAY,MAAM,YAAY,CAAC;AAGjE,OAAO,EACH,cAAc,EACd,aAAa,EACb,UAAU,EACV,aAAa,EACb,SAAS,EAKZ,MAAM,OAAO,CAAC;AAEf,iCAAiC;AACjC,MAAM,WAAW,WAAW,CAAC,CAAC;IAC1B,IAAI,EAAE,CAAC,CAAC;IACR,GAAG,EAAE,MAAM,CAAC;IACZ,4BAA4B;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,WAAW,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,OAAO,CAAC;IAClB,+EAA+E;IAC/E,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;GASG;AACH,wBAAgB,OAAO,CAAC,CAAC,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,eAAsB,EAAE,SAAc,EAAE,EAAE,cAAc,CAAC,CAAC,CAAC;;kBA+D3F,MAAM;sBAvDU,MAAM;kBAuJzB,MAAM;oBACJ,MAAM;IACtB,yCAAyC;;IAEzC,wBAAwB;;IAExB,kCAAkC;;;;oBAzCf,WAAW,CAAC,CAAC,CAAC;;;;;;;;qBAQpB,UAAU,CAAC,WAAW,CAAC;uBAGrB,aAAa,CAAC,WAAW,CAAC;;eAOK,aAAa;4BACvC;YAAE,aAAa,EAAE,MAAM,CAAA;SAAE;;uBAMvB,WAAW,CAAC,CAAC,CAAC;;;;;;EAsB3C;AAED,MAAM,MAAM,IAAI,CAAC,CAAC,IAAI,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC;AAEpD,+FAA+F;AAC/F,wBAAgB,OAAO,CAAC,CAAC,EAAE,EAAE,GAAG,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,YAAY,CAAC,CAAC,CAAC,+BAkBvG;AAED,qGAAqG;AACrG,wBAAgB,QAAQ,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,cAAc,+BAQjF;AAED,6GAA6G;AAC7G,wBAAgB,SAAS,CAAC,CAAC,EAAE,EAAE,GAAG,EAAE,IAAI,EAAE,MAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,cAAc,CAAC,CAAC,CAAC,+BAU9F;AAED,4FAA4F;AAC5F,wBAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,eAAe,+BAqBrF;AAED,MAAM,WAAW,cAAc,CAAC,CAAC;IAC7B,KAAK,EAAE,SAAS,CAAC,EAAE,CAAC;IACpB,MAAM,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IAC5B,2DAA2D;IAC3D,WAAW,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,SAAS,CAAC,EAAE,GAAG,SAAS,CAAC;IACnD,+BAA+B;IAC/B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,YAAY,CAAC,CAAC,CAAE,SAAQ,cAAc,CAAC,IAAI,CAAC;IACzD,GAAG,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC;IACpB,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC;CACjB;AAED,MAAM,WAAW,cAAc,CAAC,CAAC;IAC7B,GAAG,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC;IACpB,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC;IACd,+BAA+B;IAC/B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,UAAU,CAAC;IAC/E,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,MAAM,IAAI,CAAC;CACxB"}