@rinzai/zen 0.5.0 → 0.6.0

package/dist/combobox/index.js

@@ -0,0 +1,262 @@
+"use client";
+import { cx as e } from "../utils/cx.js";
+import { useAnchoredPopup as t } from "../utils/useAnchoredPopup.js";
+import n from "../badge/index.js";
+import r from "../button/index.js";
+import { POPUP as i, TRIGGER as a } from "../utils/styles.js";
+import o from "../collapse/index.js";
+import { CheckIcon as s } from "../utils/status-icons.js";
+import { useField as c } from "../field/index.js";
+import l from "../icons/search.js";
+import u from "../icons/x-mark.js";
+import { InputGroupAddon as d, InputGroupInput as f } from "../input-group/index.js";
+import { FieldChevron as p } from "../utils/field-chevron.js";
+import { useVirtualList as m } from "../utils/useVirtualList.js";
+import { createContext as h, useContext as g, useEffect as _, useMemo as v, useRef as y, useState as b } from "react";
+import { Fragment as x, jsx as S, jsxs as C } from "react/jsx-runtime";
+//#region packages/combobox/index.tsx
+var w = h(null), T = () => {
+	let e = g(w);
+	if (!e) throw Error("Combobox parts must be inside a Combobox");
+	return e;
+};
+function E(e) {
+	let { items: n, itemKey: r = (e) => e.key, itemText: i = (e) => e.text, filter: a = (e, t) => i(e).toLowerCase().includes(t.toLowerCase()), selectedItems: o = [], children: s } = e, c = e.multiple === !0, l = c ? e.value : e.value === null ? [] : [e.value], [u, d] = b(""), [f, p] = b(null), m = y(null), h = y(null), g = y(null), _ = y(35), x = v(() => u ? n.filter((e) => a(e, u)) : n, [
+		n,
+		u,
+		a
+	]), C = t({
+		offset: 5,
+		onOpenChange: (e) => {
+			e || (p(null), d(""), C.popupRef.current?.contains(document.activeElement) && h.current?.focus());
+		}
+	}), T = {
+		multiple: c,
+		keyOf: r,
+		textOf: i,
+		items: n,
+		selectedItems: o,
+		matches: x,
+		chosen: l,
+		toggle: (t) => {
+			if (e.multiple === !0) {
+				let n = e.value.includes(t);
+				e.onValueChange(n ? e.value.filter((e) => e !== t) : [...e.value, t]);
+			} else e.onValueChange(t), C.setOpen(!1);
+		},
+		query: u,
+		setQuery: d,
+		active: f,
+		setActive: p,
+		create: m,
+		popup: C,
+		triggerRef: h,
+		listRef: g,
+		optionId: (e) => `${C.id}-option-${e}`,
+		itemHeight: _
+	};
+	return /* @__PURE__ */ S(w.Provider, {
+		value: T,
+		children: s
+	});
+}
+function D({ placeholder: t = "Select an Item", disabled: n, className: r, style: i, children: o, ...s }) {
+	let l = T(), { popup: u } = l, d = c(), f = y(!1), m = () => !n && u.setOpen(!0);
+	return /* @__PURE__ */ C("div", {
+		id: d?.id,
+		"aria-labelledby": s["aria-label"] ? void 0 : d?.labelId,
+		"aria-invalid": d?.["aria-invalid"],
+		...s,
+		"aria-describedby": e(d?.["aria-describedby"], s["aria-describedby"]).trim() || void 0,
+		ref: l.triggerRef,
+		role: "combobox",
+		tabIndex: n ? -1 : 0,
+		"aria-haspopup": "listbox",
+		"aria-expanded": u.open,
+		"aria-controls": u.id,
+		"aria-disabled": n || void 0,
+		"data-popup-open": u.triggerProps["data-popup-open"],
+		style: {
+			...u.triggerProps.style,
+			...i
+		},
+		onPointerDown: (e) => {
+			s.onPointerDown?.(e), f.current = u.open;
+		},
+		onClick: (e) => {
+			s.onClick?.(e), e.preventDefault(), f.current ? u.setOpen(!1) : m(), f.current = !1;
+		},
+		onKeyDown: (e) => {
+			s.onKeyDown?.(e), [
+				"Enter",
+				" ",
+				"ArrowDown"
+			].includes(e.key) && (e.preventDefault(), m());
+		},
+		className: e(a, "w-56 shrink-0", n ? "cursor-not-allowed opacity-50" : "cursor-pointer", u.open && "border-glow/60 [--glow-border-color:transparent] shadow-[0_0_0_3px_oklch(var(--glow)/0.16),0_0_24px_-6px_oklch(var(--glow)/0.6)]", r),
+		children: [/* @__PURE__ */ S("div", {
+			className: e("flex min-w-0 flex-1 items-center gap-1 overflow-hidden text-sm", n ? "text-muted-foreground" : "text-foreground"),
+			children: o ?? /* @__PURE__ */ S(O, { placeholder: t })
+		}), /* @__PURE__ */ S(p, { open: u.open })]
+	});
+}
+function O({ placeholder: e }) {
+	let t = T(), i = new Map([...t.selectedItems, ...t.items].map((e) => [t.keyOf(e), e])), a = t.chosen.flatMap((e) => {
+		let n = i.has(e) ? t.textOf(i.get(e)) : void 0;
+		return n ? [{
+			key: e,
+			text: n
+		}] : [];
+	});
+	return a.length ? t.multiple ? /* @__PURE__ */ S(o, {
+		items: a.map((e) => e.text),
+		data: a,
+		badgeVariant: "secondary",
+		badgeClassName: "h-6 min-w-min gap-2",
+		className: "w-full gap-1",
+		children: (e, i, a) => /* @__PURE__ */ C(n, {
+			className: "flex h-6 min-w-min gap-2 pr-1",
+			variant: "secondary",
+			children: [e, /* @__PURE__ */ S(r, {
+				"aria-label": `Remove ${e}`,
+				onClick: (e) => {
+					e.stopPropagation(), a && t.toggle(a.key);
+				},
+				variant: "icon",
+				size: "icon",
+				className: "group relative -top-px size-4 rounded-sm p-0.5",
+				children: /* @__PURE__ */ S(u, { className: "size-3 transition duration-300 group-hover:rotate-90" })
+			})]
+		}, a?.key ?? i)
+	}) : /* @__PURE__ */ S(x, { children: a[0].text }) : /* @__PURE__ */ S("span", {
+		className: t.multiple ? "text-muted-foreground" : void 0,
+		children: e
+	});
+}
+function k({ className: t, children: n }) {
+	let { popup: r } = T();
+	return /* @__PURE__ */ S("div", {
+		...r.popupProps,
+		className: e("zen__popover", i, "w-[anchor-size(width)] min-w-0 overflow-visible p-0", t),
+		children: /* @__PURE__ */ S("div", {
+			className: "divide-tint/10 flex w-full flex-col divide-y overflow-hidden rounded-xl",
+			children: n
+		})
+	});
+}
+function A({ placeholder: e = "Search", "aria-label": t = "Search options" }) {
+	let n = T(), r = y(null);
+	_(() => {
+		n.popup.open && r.current?.focus();
+	}, [n.popup.open]);
+	let i = n.matches.map(n.keyOf);
+	return /* @__PURE__ */ C("div", {
+		className: "flex h-10 grow items-center gap-2 px-3",
+		children: [/* @__PURE__ */ S(d, { children: /* @__PURE__ */ S(l, {}) }), /* @__PURE__ */ S(f, {
+			ref: r,
+			placeholder: e,
+			"aria-label": t,
+			"aria-controls": `${n.popup.id}-list`,
+			"aria-activedescendant": n.active === null ? void 0 : n.optionId(n.active),
+			value: n.query,
+			onChange: (e) => {
+				n.setQuery(e.target.value), n.setActive(null);
+			},
+			onKeyDown: (e) => {
+				let t = n.active === null ? -1 : i.indexOf(n.active), r = (t) => {
+					if (e.preventDefault(), !i.length) return;
+					let r = i[(t + i.length) % i.length];
+					n.setActive(r), j(n.listRef.current, i.indexOf(r), n.itemHeight.current);
+				};
+				e.key === "ArrowDown" ? r(t + 1) : e.key === "ArrowUp" ? r(t === -1 ? i.length - 1 : t - 1) : e.key === "Enter" && (e.preventDefault(), n.active === null ? !i.length && n.query && n.create.current && (n.create.current(n.query), n.setQuery("")) : n.toggle(n.active));
+			}
+		})]
+	});
+}
+var j = (e, t, n) => {
+	if (!e || t < 0) return;
+	let r = t * n;
+	r < e.scrollTop ? e.scrollTop = r : r + n > e.scrollTop + e.clientHeight && (e.scrollTop = r + n - e.clientHeight);
+}, M = h(null);
+function N({ renderItem: e, itemHeight: t = 35, children: n }) {
+	let r = T();
+	r.itemHeight.current = t;
+	let i = m({
+		count: r.matches.length,
+		itemHeight: t,
+		scrollRef: r.listRef
+	});
+	return _(() => {
+		r.listRef.current && (r.listRef.current.scrollTop = 0);
+	}, [r.query, r.listRef]), /* @__PURE__ */ C("ul", {
+		id: `${r.popup.id}-list`,
+		role: "listbox",
+		"aria-multiselectable": r.multiple || void 0,
+		className: "max-h-72 grow overflow-y-auto py-1 focus:ring-0 focus:outline-hidden",
+		ref: r.listRef,
+		children: [/* @__PURE__ */ S("div", {
+			style: {
+				height: `${i.totalSize}px`,
+				width: "100%",
+				position: "relative"
+			},
+			children: i.items.map((t) => {
+				let n = r.matches[t.index];
+				return /* @__PURE__ */ S(M.Provider, {
+					value: {
+						start: t.start,
+						size: t.size
+					},
+					children: e ? e(n) : /* @__PURE__ */ S(P, { item: n })
+				}, r.keyOf(n));
+			})
+		}), n]
+	});
+}
+function P({ item: t, className: n, children: r }) {
+	let i = T(), a = g(M), o = i.keyOf(t), c = i.chosen.includes(o);
+	return /* @__PURE__ */ C("li", {
+		id: i.optionId(o),
+		role: "option",
+		"aria-selected": c,
+		"data-highlighted": i.active === o || void 0,
+		style: a ? {
+			height: `${a.size}px`,
+			transform: `translateY(${a.start}px)`
+		} : void 0,
+		onMouseMove: () => i.active !== o && i.setActive(o),
+		onClick: () => i.toggle(o),
+		className: e("hover:bg-muted data-highlighted:bg-muted grid w-full cursor-pointer grid-cols-[1rem_1fr] items-center gap-2 px-3 py-2 text-sm outline-hidden select-none", a && "absolute top-0 left-0", n),
+		children: [/* @__PURE__ */ S("span", {
+			className: "text-primary col-start-1",
+			"aria-hidden": !0,
+			children: c && /* @__PURE__ */ S(s, {})
+		}), /* @__PURE__ */ S("span", {
+			className: "col-start-2 truncate",
+			children: r ?? i.textOf(t)
+		})]
+	});
+}
+function F({ children: e = "No results found" }) {
+	let t = T();
+	return !t.query || t.matches.length ? null : /* @__PURE__ */ S("li", {
+		className: "text-muted-foreground cursor-not-allowed px-3 py-2 text-sm",
+		children: e
+	});
+}
+function I({ onCreate: e, children: t = (e) => `Add ${e}` }) {
+	let n = T(), { create: r } = n;
+	return _(() => (r.current = e, () => {
+		r.current = null;
+	}), [r, e]), !n.query || n.matches.length ? null : /* @__PURE__ */ S("li", {
+		role: "option",
+		"aria-selected": !1,
+		className: "hover:bg-muted cursor-pointer px-3 py-2 text-sm select-none",
+		onClick: () => {
+			e(n.query), n.setQuery("");
+		},
+		children: t(n.query)
+	});
+}
+//#endregion
+export { I as ComboboxCreate, F as ComboboxEmpty, P as ComboboxItem, N as ComboboxList, k as ComboboxPopup, A as ComboboxSearch, D as ComboboxTrigger, E as default };

package/dist/confirm-dialog/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/confirm-dialog/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,2GAA2G;AAC3G,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EAClC,IAAI,EACJ,YAAY,EACZ,KAAK,EACL,WAAW,EACX,YAAY,EACZ,WAAsB,EACtB,WAAmB,EACnB,SAAS,GACZ,EAAE,kBAAkB,+BA0BpB;AAED,MAAM,WAAW,kBAAkB;IAC/B,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,KAAK,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,EAAE,MAAM,IAAI,CAAC;CACzB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/confirm-dialog/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,2GAA2G;AAC3G,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EAClC,IAAI,EACJ,YAAY,EACZ,KAAK,EACL,WAAW,EACX,YAAY,EACZ,WAAsB,EACtB,WAAmB,EACnB,SAAS,GACZ,EAAE,kBAAkB,+BAoBpB;AAED,MAAM,WAAW,kBAAkB;IAC/B,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,KAAK,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,EAAE,MAAM,IAAI,CAAC;CACzB"}

package/dist/confirm-dialog/index.js

@@ -0,0 +1,25 @@
+"use client";
+import e, { DialogClose as t, DialogFooter as n } from "../dialog/index.js";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region packages/confirm-dialog/index.tsx
+function a({ open: a, onOpenChange: o, title: s, description: c, confirmLabel: l, cancelLabel: u = "Cancel", destructive: d = !1, onConfirm: f }) {
+	return /* @__PURE__ */ r(e, {
+		role: "alertdialog",
+		open: a,
+		onOpenChange: o,
+		title: s,
+		description: c,
+		className: "w-[26rem]",
+		children: /* @__PURE__ */ i(n, { children: [/* @__PURE__ */ r(t, {
+			variant: "outline",
+			autoFocus: !0,
+			children: u
+		}), /* @__PURE__ */ r(t, {
+			variant: d ? "destructive" : "default",
+			onClick: f,
+			children: l
+		})] })
+	});
+}
+//#endregion
+export { a as default };

package/dist/date-picker/index.d.ts

@@ -0,0 +1,48 @@
+import { DateRange, DateString } from '../utils/date';
+import { ComponentProps } from 'react';
+/**
+ * Date field: shows the date ("Sep 30, 2026" for the locale) and opens a
+ * Calendar to pick one, focused on the chosen date so the keyboard works at
+ * once. Dates are "YYYY-MM-DD" strings. With `onClear`, the popup also offers
+ * `clearLabel` to empty it.
+ */
+export default function DatePicker({ value, onChange, locale, min, max, isDisabled, weekStartsOn, placeholder, onClear, clearLabel, ...rest }: DatePickerProps): import('react').JSX.Element;
+/**
+ * Date range field: pick a start and then an end in a Calendar (the days
+ * between are previewed while pointing); it closes once the range is complete.
+ * Shows the range the locale's way, e.g. "Sep 3 – 10, 2026".
+ */
+export declare function DateRangePicker({ value, onChange, locale, min, max, isDisabled, weekStartsOn, months, placeholder, onClear, clearLabel, ...rest }: DateRangePickerProps): import('react').JSX.Element;
+interface PickerProps extends Omit<ComponentProps<'button'>, 'value' | 'onChange' | 'defaultValue'> {
+    /** Decides the date format, month and weekday names, and the first day of the week, e.g. "en-IN". */
+    locale: string;
+    /** Earliest date that can be picked ("YYYY-MM-DD"). */
+    min?: DateString;
+    /** Latest date that can be picked. */
+    max?: DateString;
+    /** Dates that can't be picked, e.g. weekends or booked days. */
+    isDisabled?: (date: DateString) => boolean;
+    /** 0 for Sunday … 6 for Saturday. Defaults to the locale's. */
+    weekStartsOn?: number;
+    /** Classes for the trigger (e.g. a width, instead of the default full width). */
+    className?: string;
+    placeholder?: string;
+    /** Offers a clear option in the popup (shown when a value is set). */
+    onClear?: () => void;
+    clearLabel?: string;
+}
+/** Also takes the trigger button's props (aria-*, data-*, onBlur…), so Field can wire it up. */
+export interface DatePickerProps extends PickerProps {
+    /** "YYYY-MM-DD", or null for none. */
+    value: DateString | null;
+    onChange: (date: DateString) => void;
+}
+export interface DateRangePickerProps extends PickerProps {
+    /** The range; `end` is null while only the start is picked. */
+    value: DateRange | null;
+    onChange: (range: DateRange) => void;
+    /** Months shown side by side (2 suits wide screens). */
+    months?: number;
+}
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/date-picker/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/date-picker/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,UAAU,EAA+B,MAAM,iBAAiB,CAAC;AAG/F,OAAO,EAAE,cAAc,EAAa,MAAM,OAAO,CAAC;AAElD;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EAC/B,KAAK,EACL,QAAQ,EACR,MAAM,EACN,GAAG,EACH,GAAG,EACH,UAAU,EACV,YAAY,EACZ,WAA2B,EAC3B,OAAO,EACP,UAAoB,EACpB,GAAG,IAAI,EACV,EAAE,eAAe,+BAsBjB;AAED;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,EAC5B,KAAK,EACL,QAAQ,EACR,MAAM,EACN,GAAG,EACH,GAAG,EACH,UAAU,EACV,YAAY,EACZ,MAAU,EACV,WAA0B,EAC1B,OAAO,EACP,UAAoB,EACpB,GAAG,IAAI,EACV,EAAE,oBAAoB,+BA4BtB;AA8ED,UAAU,WAAY,SAAQ,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,cAAc,CAAC;IAC/F,qGAAqG;IACrG,MAAM,EAAE,MAAM,CAAC;IACf,uDAAuD;IACvD,GAAG,CAAC,EAAE,UAAU,CAAC;IACjB,sCAAsC;IACtC,GAAG,CAAC,EAAE,UAAU,CAAC;IACjB,gEAAgE;IAChE,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,OAAO,CAAC;IAC3C,+DAA+D;IAC/D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iFAAiF;IACjF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sEAAsE;IACtE,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,gGAAgG;AAChG,MAAM,WAAW,eAAgB,SAAQ,WAAW;IAChD,sCAAsC;IACtC,KAAK,EAAE,UAAU,GAAG,IAAI,CAAC;IACzB,QAAQ,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,IAAI,CAAC;CACxC;AAED,MAAM,WAAW,oBAAqB,SAAQ,WAAW;IACrD,+DAA+D;IAC/D,KAAK,EAAE,SAAS,GAAG,IAAI,CAAC;IACxB,QAAQ,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IACrC,wDAAwD;IACxD,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB"}

package/dist/date-picker/index.js

@@ -0,0 +1,112 @@
+"use client";
+import { cx as e } from "../utils/cx.js";
+import { useAnchoredPopup as t } from "../utils/useAnchoredPopup.js";
+import { POPUP as n, TRIGGER as r } from "../utils/styles.js";
+import { useFieldProps as i } from "../field/index.js";
+import { formatDate as a, formatDateRange as o } from "../utils/date.js";
+import s from "../calendar/index.js";
+import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
+//#region packages/date-picker/index.tsx
+function d({ value: e, onChange: t, locale: n, min: r, max: i, isDisabled: o, weekStartsOn: c, placeholder: u = "Pick a date", onClear: d, clearLabel: f = "Clear", ...m }) {
+	return /* @__PURE__ */ l(p, {
+		...m,
+		shown: e ? a(e, n) : null,
+		placeholder: u,
+		label: "Choose date",
+		onClear: e ? d : void 0,
+		clearLabel: f,
+		calendar: (a) => /* @__PURE__ */ l(s, {
+			autoFocus: !0,
+			value: e,
+			onChange: (e) => {
+				t(e), a();
+			},
+			locale: n,
+			min: r,
+			max: i,
+			isDisabled: o,
+			weekStartsOn: c
+		})
+	});
+}
+function f({ value: e, onChange: t, locale: n, min: r, max: i, isDisabled: c, weekStartsOn: u, months: d = 1, placeholder: f = "Pick dates", onClear: m, clearLabel: h = "Clear", ...g }) {
+	let _ = e ? e.end ? o(e.start, e.end, n) : `${a(e.start, n)} – …` : null;
+	return /* @__PURE__ */ l(p, {
+		...g,
+		shown: _,
+		placeholder: f,
+		label: "Choose dates",
+		onClear: e ? m : void 0,
+		clearLabel: h,
+		calendar: (a) => /* @__PURE__ */ l(s, {
+			autoFocus: !0,
+			mode: "range",
+			value: e,
+			onChange: (e) => {
+				t(e), e.end && a();
+			},
+			locale: n,
+			min: r,
+			max: i,
+			isDisabled: c,
+			weekStartsOn: u,
+			months: d
+		})
+	});
+}
+function p({ shown: a, placeholder: o, label: s, calendar: d, onClear: f, clearLabel: p, id: h, className: g, disabled: _ = !1, style: v, ...y }) {
+	let b = t(), x = i({
+		...y,
+		id: h
+	}), S = () => b.setOpen(!1);
+	return /* @__PURE__ */ u(c, { children: [/* @__PURE__ */ u("button", {
+		type: "button",
+		...y,
+		...x,
+		id: h,
+		disabled: _,
+		...b.triggerProps,
+		style: {
+			...b.triggerProps.style,
+			...v
+		},
+		className: e("zen__date-picker group", r, "w-full", b.open && "border-glow/60 [--glow-border-color:transparent] shadow-[0_0_0_3px_oklch(var(--glow)/0.16),0_0_24px_-6px_oklch(var(--glow)/0.6)]", g),
+		children: [/* @__PURE__ */ l("span", {
+			className: e("truncate", !a && "text-muted-foreground"),
+			children: a ?? o
+		}), /* @__PURE__ */ l(m, {})]
+	}), /* @__PURE__ */ u("div", {
+		...b.popupProps,
+		role: "dialog",
+		"aria-label": s,
+		className: e("zen__popover", n, "p-3"),
+		children: [b.open && d(S), f && /* @__PURE__ */ l("button", {
+			type: "button",
+			onClick: () => {
+				f(), S();
+			},
+			className: "border-tint/[0.06] text-muted-foreground hover:text-foreground focus-visible:ring-ring/40 mt-2 w-full rounded-lg border-t px-2 pt-2.5 pb-1.5 text-sm outline-hidden focus-visible:ring-2",
+			children: p
+		})]
+	})] });
+}
+function m() {
+	return /* @__PURE__ */ u("svg", {
+		viewBox: "0 0 16 16",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "1.5",
+		strokeLinecap: "round",
+		"aria-hidden": !0,
+		className: "text-muted-foreground group-data-popup-open:text-foreground size-4 shrink-0 transition-colors",
+		children: [/* @__PURE__ */ l("rect", {
+			x: "2.5",
+			y: "3.5",
+			width: "11",
+			height: "10",
+			rx: "2"
+		}), /* @__PURE__ */ l("path", { d: "M2.5 6.5h11M5.5 2v3M10.5 2v3" })]
+	});
+}
+//#endregion
+export { f as DateRangePicker, d as default };

package/dist/dialog/index.d.ts

@@ -1,10 +1,20 @@
+import { ButtonProps } from '../button';
 import { ComponentProps, ReactNode, RefObject } from 'react';
 /**
  * Modal dialog on the native <dialog> element: focus is trapped and restored,
  * the page behind is inert, and Escape closes it. `dismissible={false}` is for
- * flows the user must finish (no Escape or outside-click close).
+ * flows the user must finish (no Escape or outside-click close). With `side`,
+ * it's a sheet that slides in from that edge: a bottom sheet on phones, a side
+ * panel for filters or details.
  */
-export default function Dialog({ open, onOpenChange, title, description, children, dismissible, initialFocus, size, className, role, }: DialogProps): import('react').JSX.Element;
+export default function Dialog({ open, onOpenChange, title, description, children, dismissible, initialFocus, size, side, className, role, }: DialogProps): import('react').JSX.Element;
+/** The row of actions at the end of a dialog, right-aligned. */
+export declare function DialogFooter({ className, ...rest }: ComponentProps<'div'>): import('react').JSX.Element;
+/**
+ * A button that closes its dialog (after its own onClick, unless that calls
+ * preventDefault). Takes every Button prop: variant, size, asChild…
+ */
+export declare function DialogClose({ onClick, ...rest }: ButtonProps): import('react').JSX.Element;
 export interface DialogProps {
     open: boolean;
     onOpenChange?: (open: boolean) => void;
@@ -16,6 +26,8 @@ export interface DialogProps {
     initialFocus?: RefObject<HTMLElement | null>;
     /** "lg" for dialogs holding a whole tool rather than a short form. */
     size?: 'md' | 'lg';
+    /** Slide in from this edge as a sheet, instead of appearing in the middle. */
+    side?: 'bottom' | 'left' | 'right';
     className?: string;
     role?: ComponentProps<'dialog'>['role'];
 }

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/dialog/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,SAAS,EAA4B,MAAM,OAAO,CAAC;AAEvF;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAC3B,IAAI,EACJ,YAAY,EACZ,KAAK,EACL,WAAW,EACX,QAAQ,EACR,WAAkB,EAClB,YAAY,EACZ,IAAW,EACX,SAAS,EACT,IAAI,GACP,EAAE,WAAW,+BA4Db;AAED,MAAM,WAAW,WAAW;IACxB,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,KAAK,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,iFAAiF;IACjF,YAAY,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC7C,sEAAsE;IACtE,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,cAAc,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,CAAC;CAC3C"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/dialog/index.tsx"],"names":[],"mappings":"AACA,OAAe,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAGlD,OAAO,EACH,cAAc,EAGd,SAAS,EACT,SAAS,EAKZ,MAAM,OAAO,CAAC;AAKf;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAC3B,IAAI,EACJ,YAAY,EACZ,KAAK,EACL,WAAW,EACX,QAAQ,EACR,WAAkB,EAClB,YAAY,EACZ,IAAW,EACX,IAAI,EACJ,SAAS,EACT,IAAI,GACP,EAAE,WAAW,+BAwEb;AAED,gEAAgE;AAChE,wBAAgB,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,cAAc,CAAC,KAAK,CAAC,+BAEzE;AAED;;;GAGG;AACH,wBAAgB,WAAW,CAAC,EAAE,OAAO,EAAE,GAAG,IAAI,EAAE,EAAE,WAAW,+BAW5D;AAED,MAAM,WAAW,WAAW;IACxB,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,KAAK,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,iFAAiF;IACjF,YAAY,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC7C,sEAAsE;IACtE,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,8EAA8E;IAC9E,IAAI,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,cAAc,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,CAAC;CAC3C"}

package/dist/dialog/index.js

@@ -0,0 +1,77 @@
+"use client";
+import { cx as e } from "../utils/cx.js";
+import { useGraphicsMode as t } from "../utils/graphics.js";
+import n from "../button/index.js";
+import { useToastHost as r } from "../toast/index.js";
+import { createContext as i, useContext as a, useEffect as o, useId as s, useRef as c } from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+//#region packages/dialog/index.tsx
+var d = i(() => {});
+function f({ open: n, onOpenChange: i, title: a, description: f, children: p, dismissible: m = !0, initialFocus: h, size: g = "md", side: _, className: v, role: y }) {
+	t();
+	let b = c(null), x = s(), S = s();
+	return o(() => {
+		let e = b.current;
+		if (e) {
+			if (n && !e.open) {
+				let t = document.documentElement;
+				t.toggleAttribute("data-zen-scrollbar", window.innerWidth > t.clientWidth), e.showModal(), h?.current?.focus();
+			} else !n && e.open && e.close();
+		}
+	}, [n, h]), r(b, n), /* @__PURE__ */ l("dialog", {
+		ref: b,
+		role: y,
+		"aria-labelledby": x,
+		"aria-describedby": f ? S : void 0,
+		"data-side": _,
+		className: e("zen__dialog glass glass-blur glow-edge text-card-foreground bg-card/90! overflow-visible p-0", !_ && "m-auto max-h-[calc(100dvh-2rem)] max-w-[calc(100vw-2rem)] rounded-xl", !_ && (g === "lg" ? "w-[60rem]" : "w-[28rem]"), _ === "bottom" && "mx-auto mt-auto mb-0 max-h-[85dvh] w-full max-w-2xl rounded-t-2xl", (_ === "left" || _ === "right") && "my-0 h-dvh max-h-dvh w-[24rem] max-w-[calc(100vw-2.5rem)]", _ === "right" && "mr-0 ml-auto rounded-l-2xl", _ === "left" && "mr-auto ml-0 rounded-r-2xl", "backdrop:bg-black/50 backdrop:backdrop-blur-sm pointer-coarse:backdrop:backdrop-blur-none", v),
+		onCancel: (e) => {
+			e.preventDefault(), m && i?.(!1);
+		},
+		onClick: (e) => {
+			e.target === e.currentTarget && m && i?.(!1);
+		},
+		children: /* @__PURE__ */ u("div", {
+			className: e("flex flex-col gap-4 overflow-x-hidden overflow-y-auto p-6", _ ? _ === "bottom" ? "max-h-[85dvh] pt-3" : "h-full" : "max-h-[calc(100dvh-2rem)]"),
+			children: [
+				_ === "bottom" && /* @__PURE__ */ l("div", {
+					"aria-hidden": !0,
+					className: "bg-tint/20 mx-auto h-1 w-10 shrink-0 rounded-full"
+				}),
+				/* @__PURE__ */ u("div", {
+					className: "flex flex-col gap-2",
+					children: [/* @__PURE__ */ l("h2", {
+						id: x,
+						className: "text-lg font-semibold tracking-tight",
+						children: a
+					}), f && /* @__PURE__ */ l("p", {
+						id: S,
+						className: "text-muted-foreground mt-0! text-sm leading-5",
+						children: f
+					})]
+				}),
+				/* @__PURE__ */ l(d.Provider, {
+					value: () => i?.(!1),
+					children: p
+				})
+			]
+		})
+	});
+}
+function p({ className: t, ...n }) {
+	return /* @__PURE__ */ l("div", {
+		className: e("flex justify-end gap-2", t),
+		...n
+	});
+}
+function m({ onClick: e, ...t }) {
+	let r = a(d);
+	return /* @__PURE__ */ l(n, {
+		...t,
+		onClick: (t) => {
+			e?.(t), t.defaultPrevented || r();
+		}
+	});
+}
+//#endregion
+export { m as DialogClose, p as DialogFooter, f as default };

package/dist/disclosure/index.d.ts

@@ -0,0 +1,25 @@
+import { ComponentProps, ReactNode } from 'react';
+/**
+ * A section that a button shows and hides, e.g. "Past (3)" under a list. Put
+ * a DisclosureTrigger and a DisclosureContent inside (it adds no element of its
+ * own). Opens and closes on its own, or follows `open`/`onOpenChange`.
+ */
+export default function Disclosure({ open, defaultOpen, onOpenChange, children }: DisclosureProps): import('react').JSX.Element;
+/** The button: your label after a chevron that turns down as the section opens. Brightens on hover and while open. */
+export declare function DisclosureTrigger({ className, onClick, children, ...rest }: ComponentProps<'button'>): import('react').JSX.Element;
+/**
+ * What the trigger shows and hides. It grows open and folds shut (the height
+ * animates, the content fades and settles). While closed it isn't rendered at
+ * all, so what's inside costs nothing and can't be found, focused or read; it
+ * mounts as it opens and unmounts once it has folded shut. className goes on
+ * the content itself.
+ */
+export declare function DisclosureContent({ className, children, ...rest }: ComponentProps<'div'>): import('react').JSX.Element | null;
+export interface DisclosureProps {
+    /** Show or hide it from your state; leave it out to let the trigger do it. */
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    children?: ReactNode;
+}
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/disclosure/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAiB,SAAS,EAAkD,MAAM,OAAO,CAAC;AAgBjH;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EAAE,IAAI,EAAE,WAAmB,EAAE,YAAY,EAAE,QAAQ,EAAE,EAAE,eAAe,+BAWxG;AAED,sHAAsH;AACtH,wBAAgB,iBAAiB,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,cAAc,CAAC,QAAQ,CAAC,+BA0BpG;AAED;;;;;;GAMG;AACH,wBAAgB,iBAAiB,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,cAAc,CAAC,KAAK,CAAC,sCAuDxF;AAED,MAAM,WAAW,eAAe;IAC5B,8EAA8E;IAC9E,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACxB"}