@rinzai/zen 0.8.6 → 0.10.0

package/dist/range-slider/index.js

@@ -0,0 +1,44 @@
+"use client";
+import { cx as e } from "../utils/cx.js";
+import { THUMB as t } from "../slider/index.js";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region packages/range-slider/index.tsx
+function i({ value: [i, a], min: o = 0, max: s = 100, step: c = 1, onValueChange: l, onValueCommit: u, label: d, thumbLabels: f = ["Minimum", "Maximum"], valueText: p, disabled: m, className: h }) {
+	let g = (e) => s > o ? (e - o) / (s - o) * 100 : 0, _ = [{
+		value: i,
+		set: (e) => [Math.min(e, a), a]
+	}, {
+		value: a,
+		set: (e) => [i, Math.max(e, i)]
+	}];
+	return /* @__PURE__ */ r("div", {
+		role: "group",
+		"aria-label": d,
+		className: e("zen__range-slider relative h-5 w-full", m && "opacity-50", h),
+		style: { "--zen-thumb": "oklch(var(--primary))" },
+		children: [/* @__PURE__ */ n("div", {
+			"aria-hidden": !0,
+			className: "absolute inset-x-0 top-1/2 h-2.5 -translate-y-1/2 rounded-full",
+			style: { background: `linear-gradient(to right, oklch(var(--muted)) ${g(i)}%, oklch(var(--primary)) ${g(i)}% ${g(a)}%, oklch(var(--muted)) ${g(a)}%)` }
+		}), _.map((r, d) => /* @__PURE__ */ n("input", {
+			type: "range",
+			min: o,
+			max: s,
+			step: c,
+			value: r.value,
+			disabled: m,
+			"aria-label": f[d],
+			"aria-valuetext": p?.(r.value),
+			onChange: (e) => {
+				let [t, n] = r.set(Number(e.target.value));
+				l?.([t, n]);
+			},
+			onPointerUp: () => u?.([i, a]),
+			onKeyUp: () => u?.([i, a]),
+			style: { zIndex: d === 0 && i > (o + s) / 2 ? 2 : 1 },
+			className: e("pointer-events-none absolute inset-0 h-5 w-full cursor-pointer appearance-none bg-transparent outline-hidden disabled:cursor-not-allowed", "[&::-webkit-slider-runnable-track]:h-2.5 [&::-moz-range-track]:h-2.5 [&::-moz-range-track]:bg-transparent", "[&::-webkit-slider-thumb]:pointer-events-auto [&::-moz-range-thumb]:pointer-events-auto", t)
+		}, d))]
+	});
+}
+//#endregion
+export { i as default };

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

@@ -0,0 +1,22 @@
+import { DateString } from '../utils/date';
+import { Repeat } from '../utils/repeat';
+/**
+ * How often something recurs, e.g. a bill: every n days, weeks, months or
+ * years, on chosen weekdays or a day of the month. Says what it means in
+ * words, and with a `start` date, the next few dates it falls on.
+ */
+export default function RepeatPicker({ value, onChange, locale, start, weekStartsOn, label, className, }: RepeatPickerProps): import('react').JSX.Element;
+export interface RepeatPickerProps {
+    value: Repeat;
+    onChange: (value: Repeat) => void;
+    /** For weekday and date names, and the week's first day. */
+    locale: string;
+    /** When it starts: its weekday and day of the month are the defaults, and the next dates are shown. */
+    start?: DateString;
+    /** 0 for Sunday … 6. Defaults to the locale's. */
+    weekStartsOn?: number;
+    /** The group's name for screen readers (default "Repeats"). */
+    label?: string;
+    className?: string;
+}
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/repeat-picker/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,UAAU,EAAkD,MAAM,iBAAiB,CAAC;AAClG,OAAO,EAAmC,KAAK,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAKjF;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACjC,KAAK,EACL,QAAQ,EACR,MAAM,EACN,KAAK,EACL,YAAgC,EAChC,KAAiB,EACjB,SAAS,GACZ,EAAE,iBAAiB,+BA4FnB;AAED,MAAM,WAAW,iBAAiB;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,4DAA4D;IAC5D,MAAM,EAAE,MAAM,CAAC;IACf,uGAAuG;IACvG,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,kDAAkD;IAClD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,+DAA+D;IAC/D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB"}

package/dist/repeat-picker/index.js

@@ -0,0 +1,115 @@
+"use client";
+import { cx as e } from "../utils/cx.js";
+import t from "../chip/index.js";
+import n from "../input/index.js";
+import { dayOfWeek as r, formatDate as i, weekStart as a, weekdayNames as o } from "../utils/date.js";
+import s, { SelectItem as c } from "../select/index.js";
+import { describeRepeat as l, nextOccurrences as u } from "../utils/repeat.js";
+import { useState as d } from "react";
+import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
+//#region packages/repeat-picker/index.tsx
+var h = [
+	"day",
+	"week",
+	"month",
+	"year"
+];
+function g({ value: g, onChange: _, locale: v, start: y, weekStartsOn: b = a(v), label: x = "Repeats", className: S }) {
+	let [C, w] = d(String(g.every));
+	Number(C) !== g.every && C !== "" && w(String(g.every));
+	let T = o(v), E = Array.from({ length: 7 }, (e, t) => (b + t) % 7), D = g.weekdays ?? (y ? [r(y)] : []), O = g.every !== 1;
+	return /* @__PURE__ */ m("fieldset", {
+		className: e("zen__repeat-picker flex flex-col gap-3", S),
+		children: [
+			/* @__PURE__ */ p("legend", {
+				className: "sr-only",
+				children: x
+			}),
+			/* @__PURE__ */ m("div", {
+				className: "flex items-center gap-2 text-sm",
+				children: [
+					/* @__PURE__ */ p("span", {
+						className: "text-muted-foreground",
+						children: "Every"
+					}),
+					/* @__PURE__ */ p(n, {
+						"aria-label": "How many",
+						inputMode: "numeric",
+						value: C,
+						onChange: (e) => {
+							let t = e.target.value.replace(/\D/g, "").slice(0, 3);
+							w(t), Number(t) >= 1 && _({
+								...g,
+								every: Number(t)
+							});
+						},
+						onBlur: () => w(String(g.every)),
+						className: "w-16 text-center tabular-nums"
+					}),
+					/* @__PURE__ */ p(s, {
+						"aria-label": "Unit",
+						value: g.unit,
+						onChange: (e) => {
+							let t = {
+								every: g.every,
+								unit: e
+							};
+							e === "week" && y && (t.weekdays = [r(y)]), e === "month" && (t.day = y ? Number(y.slice(8)) : 1), _(t);
+						},
+						className: "w-32",
+						children: h.map((e) => /* @__PURE__ */ p(c, {
+							value: e,
+							children: O ? `${e}s` : e
+						}, e))
+					})
+				]
+			}),
+			g.unit === "week" && /* @__PURE__ */ p("div", {
+				role: "group",
+				"aria-label": "On",
+				className: "flex flex-wrap gap-1.5",
+				children: E.map((e) => {
+					let n = D.includes(e);
+					return /* @__PURE__ */ p(t, {
+						pressed: n,
+						onClick: () => {
+							n && D.length === 1 || _({
+								...g,
+								weekdays: n ? D.filter((t) => t !== e) : [...D, e]
+							});
+						},
+						children: T[e]
+					}, e);
+				})
+			}),
+			g.unit === "month" && /* @__PURE__ */ m(s, {
+				"aria-label": "On",
+				value: String(g.day ?? (y ? Number(y.slice(8)) : 1)),
+				onChange: (e) => _({
+					...g,
+					day: Number(e)
+				}),
+				className: "w-40",
+				children: [Array.from({ length: 31 }, (e, t) => /* @__PURE__ */ m(c, {
+					value: String(t + 1),
+					children: ["Day ", t + 1]
+				}, t + 1)), /* @__PURE__ */ p(c, {
+					value: "-1",
+					children: "Last day"
+				})]
+			}),
+			/* @__PURE__ */ m("p", {
+				"aria-live": "polite",
+				className: "text-muted-foreground text-sm",
+				children: [l(g, v, y), y && /* @__PURE__ */ m(f, { children: [
+					/* @__PURE__ */ p("br", {}),
+					"Next:",
+					" ",
+					u(g, y, 3).map((e) => i(e, v)).join(", ")
+				] })]
+			})
+		]
+	});
+}
+//#endregion
+export { g as default };

package/dist/skeleton/index.d.ts

@@ -1,6 +1,16 @@
-/** Shimmering placeholder in the shape of content that's on its way. Size it with className. */
-export default function Skeleton({ className }: SkeletonProps): import('react').JSX.Element;
+import { ReactElement } from 'react';
+/**
+ * Shimmering placeholder in the shape of content that's on its way. Size it with className.
+ *
+ * Give it the content as its child and `loading`: the placeholder shows while
+ * loading, then the content fades in where it was.
+ */
+export default function Skeleton({ className, loading, children }: SkeletonProps): import('react').JSX.Element;
 export interface SkeletonProps {
     className?: string;
+    /** With children: show the placeholder instead of them while true. */
+    loading?: boolean;
+    /** The content this stands in for, a single element. */
+    children?: ReactElement;
 }
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/skeleton/index.tsx"],"names":[],"mappings":"AAEA,gGAAgG;AAChG,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAAE,SAAS,EAAE,EAAE,aAAa,+BAE5D;AAED,MAAM,WAAW,aAAa;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/skeleton/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,YAAY,EAAY,MAAM,OAAO,CAAC;AAE/C;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,aAAa,+BAK/E;AAED,MAAM,WAAW,aAAa;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sEAAsE;IACtE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,wDAAwD;IACxD,QAAQ,CAAC,EAAE,YAAY,CAAC;CAC3B"}

package/dist/skeleton/index.js

@@ -1,12 +1,18 @@
 "use client";
 import { cx as e } from "../utils/cx.js";
-import { jsx as t } from "react/jsx-runtime";
+import { Slot as t } from "../utils/slot.js";
+import { useState as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
 //#region packages/skeleton/index.tsx
-function n({ className: n }) {
-	return /* @__PURE__ */ t("span", {
+function i({ className: i, loading: a, children: o }) {
+	let [s, c] = n(!!a);
+	return a && !s && c(!0), o && !a ? s ? /* @__PURE__ */ r(t, {
+		className: "zen__reveal",
+		children: o
+	}) : o : /* @__PURE__ */ r("span", {
 		"aria-hidden": !0,
-		className: e("zen__skeleton block rounded-md", n)
+		className: e("zen__skeleton block rounded-md", i)
 	});
 }
 //#endregion
-export { n as default };
+export { i as default };

package/dist/slider/index.d.ts

@@ -6,6 +6,8 @@ import { ComponentProps } from 'react';
  * gradient), and a glowing thumb.
  */
 export default function Slider({ value, min, max, step, onValueChange, onValueCommit, trackBackground, thumbColor, valueText, className, style, ...rest }: SliderProps): import('react').JSX.Element;
+/** The glowing thumb, with its focus ring: Slider's and RangeSlider's. */
+export declare const THUMB: string;
 export interface SliderProps extends Omit<ComponentProps<'input'>, 'type' | 'value' | 'min' | 'max' | 'step' | 'onChange' | 'defaultValue'> {
     value: number;
     min?: number;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/slider/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAoC,MAAM,OAAO,CAAC;AAEzE;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAC3B,KAAK,EACL,GAAO,EACP,GAAS,EACT,IAAQ,EACR,aAAa,EACb,aAAa,EACb,eAAe,EACf,UAAU,EACV,SAAS,EACT,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACV,EAAE,WAAW,+BAkDb;AAED,MAAM,WAAW,WAAY,SAAQ,IAAI,CACrC,cAAc,CAAC,OAAO,CAAC,EACvB,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,KAAK,GAAG,MAAM,GAAG,UAAU,GAAG,cAAc,CAC1E;IACG,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,mCAAmC;IACnC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,iDAAiD;IACjD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,6DAA6D;IAC7D,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,sDAAsD;IACtD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,oDAAoD;IACpD,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;CACzC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/slider/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAoC,MAAM,OAAO,CAAC;AAEzE;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAC3B,KAAK,EACL,GAAO,EACP,GAAS,EACT,IAAQ,EACR,aAAa,EACb,aAAa,EACb,eAAe,EACf,UAAU,EACV,SAAS,EACT,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACV,EAAE,WAAW,+BA6Cb;AAED,0EAA0E;AAC1E,eAAO,MAAM,KAAK,QAI+E,CAAC;AAElG,MAAM,WAAW,WAAY,SAAQ,IAAI,CACrC,cAAc,CAAC,OAAO,CAAC,EACvB,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,KAAK,GAAG,MAAM,GAAG,UAAU,GAAG,cAAc,CAC1E;IACG,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,mCAAmC;IACnC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,iDAAiD;IACjD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,6DAA6D;IAC7D,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,sDAAsD;IACtD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,oDAAoD;IACpD,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;CACzC"}

package/dist/slider/index.js

@@ -3,32 +3,33 @@ import { cx as e } from "../utils/cx.js";
 import { useEffect as t, useRef as n } from "react";
 import { jsx as r } from "react/jsx-runtime";
 //#region packages/slider/index.tsx
-function i({ value: i, min: a = 0, max: o = 100, step: s = 1, onValueChange: c, onValueCommit: l, trackBackground: u, thumbColor: d, valueText: f, className: p, style: m, ...h }) {
-	let g = n(null), _ = n(l);
-	_.current = l, t(() => {
-		let e = g.current;
+function i({ value: i, min: o = 0, max: s = 100, step: c = 1, onValueChange: l, onValueCommit: u, trackBackground: d, thumbColor: f, valueText: p, className: m, style: h, ...g }) {
+	let _ = n(null), v = n(u);
+	v.current = u, t(() => {
+		let e = _.current;
 		if (!e) return;
-		let t = () => _.current?.(Number(e.value));
+		let t = () => v.current?.(Number(e.value));
 		return e.addEventListener("change", t), () => e.removeEventListener("change", t);
 	}, []);
-	let v = o > a ? (i - a) / (o - a) * 100 : 0, y = u ?? `linear-gradient(to right, oklch(var(--primary)) ${v}%, oklch(var(--muted)) ${v}%)`;
+	let y = s > o ? (i - o) / (s - o) * 100 : 0, b = d ?? `linear-gradient(to right, oklch(var(--primary)) ${y}%, oklch(var(--muted)) ${y}%)`;
 	return /* @__PURE__ */ r("input", {
-		ref: g,
+		ref: _,
 		type: "range",
-		min: a,
-		max: o,
-		step: s,
+		min: o,
+		max: s,
+		step: c,
 		value: i,
-		"aria-valuetext": f?.(i),
-		onChange: (e) => c?.(Number(e.target.value)),
+		"aria-valuetext": p?.(i),
+		onChange: (e) => l?.(Number(e.target.value)),
 		style: {
-			...m,
-			"--zen-track": y,
-			"--zen-thumb": d ?? "oklch(var(--primary))"
+			...h,
+			"--zen-track": b,
+			"--zen-thumb": f ?? "oklch(var(--primary))"
 		},
-		className: e("zen__slider h-5 w-full cursor-pointer appearance-none bg-transparent outline-hidden disabled:cursor-not-allowed disabled:opacity-50", "[&::-webkit-slider-runnable-track]:h-2.5 [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:[background:var(--zen-track)]", "[&::-moz-range-track]:h-2.5 [&::-moz-range-track]:rounded-full [&::-moz-range-track]:[background:var(--zen-track)]", "[&::-webkit-slider-thumb]:-mt-[5px] [&::-webkit-slider-thumb]:size-5 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-white [&::-webkit-slider-thumb]:shadow-[0_0_0_1px_oklch(0_0_0/0.3),0_0_16px_oklch(var(--glow)/calc(0.8*var(--glow-k)))] [&::-webkit-slider-thumb]:[background:var(--zen-thumb)]", "[&::-moz-range-thumb]:size-5 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-white [&::-moz-range-thumb]:shadow-[0_0_0_1px_oklch(0_0_0/0.3),0_0_16px_oklch(var(--glow)/calc(0.8*var(--glow-k)))] [&::-moz-range-thumb]:[background:var(--zen-thumb)]", "focus-visible:[&::-webkit-slider-thumb]:ring-ring/40 focus-visible:[&::-webkit-slider-thumb]:ring-4", "focus-visible:[&::-moz-range-thumb]:ring-ring/40 focus-visible:[&::-moz-range-thumb]:ring-4", p),
-		...h
+		className: e("zen__slider h-5 w-full cursor-pointer appearance-none bg-transparent outline-hidden disabled:cursor-not-allowed disabled:opacity-50", "[&::-webkit-slider-runnable-track]:h-2.5 [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:[background:var(--zen-track)]", "[&::-moz-range-track]:h-2.5 [&::-moz-range-track]:rounded-full [&::-moz-range-track]:[background:var(--zen-track)]", a, m),
+		...g
 	});
 }
+var a = "[&::-webkit-slider-thumb]:-mt-[5px] [&::-webkit-slider-thumb]:size-5 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-white [&::-webkit-slider-thumb]:shadow-[0_0_0_1px_oklch(0_0_0/0.3),0_0_16px_oklch(var(--glow)/calc(0.8*var(--glow-k)))] [&::-webkit-slider-thumb]:[background:var(--zen-thumb)] [&::-moz-range-thumb]:size-5 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-white [&::-moz-range-thumb]:shadow-[0_0_0_1px_oklch(0_0_0/0.3),0_0_16px_oklch(var(--glow)/calc(0.8*var(--glow-k)))] [&::-moz-range-thumb]:[background:var(--zen-thumb)] focus-visible:[&::-webkit-slider-thumb]:ring-ring/40 focus-visible:[&::-webkit-slider-thumb]:ring-4 focus-visible:[&::-moz-range-thumb]:ring-ring/40 focus-visible:[&::-moz-range-thumb]:ring-4";
 //#endregion
-export { i as default };
+export { a as THUMB, i as default };

package/dist/sortable/index.d.ts

@@ -0,0 +1,33 @@
+import { ComponentProps } from 'react';
+/**
+ * A list put in order by dragging, e.g. budget categories: drag an item by its
+ * SortableHandle and the others make way (a phone taps lightly at each new
+ * place); it settles into place when let go.
+ * From the keyboard, Space or Enter on a handle picks the item up, the arrow
+ * keys move it, Space or Enter drops it and Escape puts it back; each step is
+ * announced. `value` is the ids in order; render a SortableItem for each.
+ */
+export declare function SortableList({ value, onChange, className, children, ...rest }: SortableListProps): import('react').JSX.Element;
+/** One item in a SortableList; give it the `id` it has in the list's value. */
+export declare function SortableItem({ id, className, ...rest }: SortableItemProps): import('react').JSX.Element;
+/**
+ * What an item is dragged by: a grip button. `label` names the item ("Rent");
+ * the button reads "Reorder Rent". It takes no scroll gestures, so dragging it
+ * never scrolls the page.
+ */
+export declare function SortableHandle({ id, label, className, children, ...rest }: SortableHandleProps): import('react').JSX.Element;
+export interface SortableListProps extends Omit<ComponentProps<'ul'>, 'onChange'> {
+    /** The items' ids, in order. */
+    value: readonly string[];
+    onChange: (value: string[]) => void;
+}
+export interface SortableItemProps extends ComponentProps<'li'> {
+    id: string;
+}
+export interface SortableHandleProps extends Omit<ComponentProps<'button'>, 'id'> {
+    /** The item's id, as in the list's value. */
+    id: string;
+    /** The item's name, e.g. "Rent". */
+    label: string;
+}
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/sortable/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EACH,cAAc,EASjB,MAAM,OAAO,CAAC;AA2Bf;;;;;;;GAOG;AACH,wBAAgB,YAAY,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,iBAAiB,+BAuJhG;AAED,+EAA+E;AAC/E,wBAAgB,YAAY,CAAC,EAAE,EAAE,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,iBAAiB,+BAazE;AAED;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,mBAAmB,+BAwB9F;AAUD,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,UAAU,CAAC;IAC7E,gCAAgC;IAChC,KAAK,EAAE,SAAS,MAAM,EAAE,CAAC;IACzB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CACvC;AAED,MAAM,WAAW,iBAAkB,SAAQ,cAAc,CAAC,IAAI,CAAC;IAC3D,EAAE,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,IAAI,CAAC;IAC7E,6CAA6C;IAC7C,EAAE,EAAE,MAAM,CAAC;IACX,oCAAoC;IACpC,KAAK,EAAE,MAAM,CAAC;CACjB"}

package/dist/sortable/index.js

@@ -0,0 +1,147 @@
+"use client";
+import { cx as e } from "../utils/cx.js";
+import { reducedMotion as t } from "../utils/motion.js";
+import { createContext as n, useContext as r, useEffect as i, useLayoutEffect as a, useRef as o, useState as s } from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region packages/sortable/index.tsx
+var u = typeof window > "u" ? i : a, d = {
+	duration: 220,
+	easing: "cubic-bezier(0.2, 0.8, 0.2, 1)"
+}, f = 48, p = n(null);
+function m(e) {
+	let t = r(p);
+	if (!t) throw Error(`<${e}> must be inside <SortableList>`);
+	return t;
+}
+var h = (e, t, n) => {
+	let r = [...e];
+	return r.splice(n, 0, ...r.splice(t, 1)), r;
+};
+function g({ value: n, onChange: r, className: i, children: a, ...m }) {
+	let g = o(null), [_, v] = s(null), [b, x] = s(""), S = o(null), C = o(null), w = () => [...g.current?.querySelectorAll(":scope > [data-sortable-id]") ?? []], T = () => new Map(w().map((e) => [e.dataset.sortableId, e.getBoundingClientRect().top])), E = (e) => {
+		S.current = T(), r(e);
+	};
+	return u(() => {
+		let e = S.current;
+		if (S.current = null, e) for (let n of w()) {
+			n.style.removeProperty("translate");
+			let r = e.get(n.dataset.sortableId), i = r === void 0 ? 0 : r - n.getBoundingClientRect().top;
+			i && !t() && n.animate?.({ translate: [`0 ${i}px`, "0 0"] }, d);
+		}
+	}, [n]), /* @__PURE__ */ l(p.Provider, {
+		value: {
+			grab: (e, r) => {
+				if (e.button !== 0 || _) return;
+				let i = w(), a = i.findIndex((e) => e.dataset.sortableId === r), o = i[a];
+				if (!o) return;
+				e.preventDefault();
+				let s = e.currentTarget;
+				s.setPointerCapture?.(e.pointerId);
+				let c = y(g.current), l = c.scrollTop, u = e.clientY, p = i.map((e) => e.getBoundingClientRect()), m = p.length > 1 ? p[1].top - p[0].bottom : 0, v = p[a].height + m, b = p.map((e) => e.top + e.height / 2), x = a, C = e.clientY, D = 0;
+				o.dataset.dragging = "", g.current.dataset.sorting = "";
+				let O = () => {
+					let e = C - u + c.scrollTop - l;
+					o.style.translate = `0 ${e}px`;
+					let t = b[a] + e, n = x;
+					for (x = a; x < i.length - 1 && t > b[x + 1];) x++;
+					for (; x > 0 && t < b[x - 1];) x--;
+					x !== n && navigator.vibrate?.(5), i.forEach((e, t) => {
+						if (t === a) return;
+						let n = a < t && t <= x ? -v : x <= t && t < a ? v : 0;
+						e.style.translate = n ? `0 ${n}px` : "";
+					});
+				}, k = () => {
+					D = 0;
+					let e = c === document.scrollingElement ? {
+						top: 0,
+						bottom: innerHeight
+					} : c.getBoundingClientRect(), t = C < e.top + f ? -(e.top + f - C) : C > e.bottom - f ? C - (e.bottom - f) : 0;
+					t && (c.scrollTop += t / 3, O(), D = requestAnimationFrame(k));
+				}, A = (t) => {
+					t.pointerId === e.pointerId && (C = t.clientY, O(), D ||= requestAnimationFrame(k));
+				}, j = (r) => {
+					if (r.pointerId === e.pointerId) {
+						if (s.removeEventListener("pointermove", A), s.removeEventListener("pointerup", j), s.removeEventListener("pointercancel", j), cancelAnimationFrame(D), delete o.dataset.dragging, delete g.current?.dataset.sorting, r.type === "pointerup" && x !== a) E(h(n, a, x));
+						else {
+							S.current = T();
+							for (let e of i) e.style.removeProperty("translate");
+							for (let e of i) {
+								let n = S.current.get(e.dataset.sortableId) - e.getBoundingClientRect().top;
+								n && !t() && e.animate?.({ translate: [`0 ${n}px`, "0 0"] }, d);
+							}
+							S.current = null;
+						}
+					}
+				};
+				s.addEventListener("pointermove", A), s.addEventListener("pointerup", j), s.addEventListener("pointercancel", j);
+			},
+			key: (e, t, r) => {
+				let i = n.indexOf(t), a = `${i + 1} of ${n.length}`;
+				if (e.key === " " || e.key === "Enter") e.preventDefault(), _ === t ? (v(null), C.current = null, x(`${r} dropped, ${a}.`)) : _ || (v(t), C.current = n, x(`${r} picked up, ${a}. Arrow keys move it, Space drops it, Escape puts it back.`));
+				else if (_ === t && (e.key === "ArrowUp" || e.key === "ArrowDown")) {
+					e.preventDefault();
+					let t = i + (e.key === "ArrowUp" ? -1 : 1);
+					if (t < 0 || t >= n.length) return;
+					E(h(n, i, t)), x(`${r}, ${t + 1} of ${n.length}.`);
+				} else if (_ === t && e.key === "Escape") {
+					e.preventDefault();
+					let i = C.current ?? n;
+					v(null), C.current = null, i !== n && E([...i]), x(`${r} put back, ${i.indexOf(t) + 1} of ${i.length}.`);
+				}
+			},
+			lifted: _
+		},
+		children: [/* @__PURE__ */ c("ul", {
+			ref: g,
+			className: e("zen__sortable relative flex flex-col", i),
+			...m,
+			children: a
+		}), /* @__PURE__ */ c("span", {
+			"aria-live": "assertive",
+			className: "sr-only",
+			children: b
+		})]
+	});
+}
+function _({ id: t, className: n, ...r }) {
+	let { lifted: i } = m("SortableItem");
+	return /* @__PURE__ */ c("li", {
+		"data-sortable-id": t,
+		"data-lifted": i === t || void 0,
+		className: e("zen__sortable-item relative transition-[box-shadow,scale] duration-200 data-dragging:z-10 data-dragging:scale-[1.02] data-dragging:shadow-[0_12px_32px_-12px_oklch(0_0_0/0.6)] data-lifted:z-10 data-lifted:shadow-[0_0_0_2px_oklch(var(--primary)/0.6)]", n),
+		...r
+	});
+}
+function v({ id: t, label: n, className: r, children: i, ...a }) {
+	let { grab: o, key: s, lifted: l } = m("SortableHandle");
+	return /* @__PURE__ */ c("button", {
+		type: "button",
+		"aria-label": `Reorder ${n}`,
+		"aria-pressed": l === t,
+		onPointerDown: (e) => o(e, t),
+		onKeyDown: (e) => s(e, t, n),
+		className: e("text-muted-foreground hover:text-foreground focus-visible:ring-ring/50 grid size-8 shrink-0 cursor-grab touch-none place-items-center rounded-md outline-hidden select-none focus-visible:ring-2 active:cursor-grabbing", r),
+		...a,
+		children: i ?? /* @__PURE__ */ c("svg", {
+			"aria-hidden": !0,
+			viewBox: "0 0 16 16",
+			fill: "currentColor",
+			className: "size-4",
+			children: [
+				4,
+				8,
+				12
+			].flatMap((e) => [5.5, 10.5].map((t) => /* @__PURE__ */ c("circle", {
+				cx: t,
+				cy: e,
+				r: "1.25"
+			}, `${t}${e}`)))
+		})
+	});
+}
+function y(e) {
+	for (let t = e.parentElement; t; t = t.parentElement) if (/auto|scroll/.test(getComputedStyle(t).overflowY) && t.scrollHeight > t.clientHeight) return t;
+	return document.scrollingElement ?? document.documentElement;
+}
+//#endregion
+export { v as SortableHandle, _ as SortableItem, g as SortableList };

package/dist/sparkline/index.d.ts

@@ -0,0 +1,15 @@
+import { ComponentProps } from 'react';
+/**
+ * A small line of how a number has moved (a balance over a month, spending by
+ * week), with no axes: for beside a figure in a Stat or a table row. It takes
+ * its size from className (e.g. h-8 w-24) and draws itself in.
+ */
+export default function Sparkline({ values, area, tone, className, ref, ...rest }: SparklineProps): import('react').JSX.Element | null;
+export interface SparklineProps extends Omit<ComponentProps<'svg'>, 'values'> {
+    values: number[];
+    /** A soft fill under the line. */
+    area?: boolean;
+    /** The accent (`primary`), red (`negative`), or grey (`muted`). */
+    tone?: 'primary' | 'negative' | 'muted';
+}
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/sparkline/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAiB,MAAM,OAAO,CAAC;AAEtD;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAAE,MAAM,EAAE,IAAW,EAAE,IAAgB,EAAE,SAAS,EAAE,GAAG,EAAE,GAAG,IAAI,EAAE,EAAE,cAAc,sCA0DnH;AAED,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,QAAQ,CAAC;IACzE,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,kCAAkC;IAClC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,mEAAmE;IACnE,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,OAAO,CAAC;CAC3C"}

package/dist/sparkline/index.js

@@ -0,0 +1,56 @@
+"use client";
+import { cx as e } from "../utils/cx.js";
+import { useSeen as t } from "../utils/useSeen.js";
+import { useId as n, useRef as r } from "react";
+import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region packages/sparkline/index.tsx
+function s({ values: s, area: c = !0, tone: l = "primary", className: u, ref: d, ...f }) {
+	let p = n(), m = r(null), h = t(m);
+	if (s.length < 2) return null;
+	let g = Math.min(...s), _ = Math.max(...s) - g || 1, v = s.map((e, t) => [t / (s.length - 1) * 100, 38 - (e - g) / _ * 36]).map(([e, t], n) => `${n ? "L" : "M"}${e.toFixed(2)},${t.toFixed(2)}`).join(""), y = l === "primary" ? "var(--color-primary)" : l === "negative" ? "var(--color-destructive)" : "var(--color-muted-foreground)", b = s[0], x = s[s.length - 1];
+	return /* @__PURE__ */ o("svg", {
+		ref: (e) => {
+			if (m.current = e, typeof d == "function") return d(e);
+			d && (d.current = e);
+		},
+		"data-zen-unseen": h ? void 0 : "",
+		role: "img",
+		"aria-label": `From ${b} to ${x}`,
+		viewBox: "0 0 100 40",
+		preserveAspectRatio: "none",
+		className: e("zen__sparkline h-8 w-24 overflow-visible", u),
+		style: { color: y },
+		...f,
+		children: [c && /* @__PURE__ */ o(i, { children: [/* @__PURE__ */ a("defs", { children: /* @__PURE__ */ o("linearGradient", {
+			id: p,
+			x1: "0",
+			y1: "0",
+			x2: "0",
+			y2: "1",
+			children: [/* @__PURE__ */ a("stop", {
+				offset: "0",
+				stopColor: "currentColor",
+				stopOpacity: "0.25"
+			}), /* @__PURE__ */ a("stop", {
+				offset: "1",
+				stopColor: "currentColor",
+				stopOpacity: "0"
+			})]
+		}) }), /* @__PURE__ */ a("path", {
+			className: "zen__chart-fade",
+			d: `${v}L100,40L0,40Z`,
+			fill: `url(#${p})`
+		})] }), /* @__PURE__ */ a("path", {
+			className: "zen__sparkline-draw",
+			d: v,
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: 2,
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			vectorEffect: "non-scaling-stroke"
+		})]
+	});
+}
+//#endregion
+export { s as default };

package/dist/stepper/index.d.ts

@@ -0,0 +1,19 @@
+import { ComponentProps, ReactNode } from 'react';
+/**
+ * The steps of a flow (sign-up, checkout, import), with where you are: steps
+ * before `value` (from 0) are done, the one at it is current. The line between
+ * them fills in as you go.
+ */
+export default function Stepper({ value, className, children, 'aria-label': label, ...rest }: StepperProps): import('react').JSX.Element;
+/** One step's label, and optionally a line under it (`description`). */
+export declare function Step({ description, className, children }: StepProps): import('react').JSX.Element;
+export interface StepperProps extends ComponentProps<'ol'> {
+    /** The current step, from 0. Steps before it are done; past the last, all are. */
+    value: number;
+}
+export interface StepProps {
+    children: ReactNode;
+    description?: ReactNode;
+    className?: string;
+}
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/stepper/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAY,cAAc,EAAkB,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5E;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,EAC5B,KAAK,EACL,SAAS,EACT,QAAQ,EACR,YAAY,EAAE,KAAkB,EAChC,GAAG,IAAI,EACV,EAAE,YAAY,+BAgDd;AAED,wEAAwE;AACxE,wBAAgB,IAAI,CAAC,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,SAAS,+BASnE;AAED,MAAM,WAAW,YAAa,SAAQ,cAAc,CAAC,IAAI,CAAC;IACtD,kFAAkF;IAClF,KAAK,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,SAAS;IACtB,QAAQ,EAAE,SAAS,CAAC;IACpB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB"}