@passui/react 0.1.46 → 0.2.0

package/dist/calendar.js

@@ -0,0 +1,225 @@
+"use client";
+import { addDays, addMonths, firstWeekday, formatDay, monthGrid, parseDay, withinBounds } from "./lib/calendar-month.js";
+import { cx } from "./lib/cx.js";
+import { Wheel } from "./lib/wheel.js";
+import { useId, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDownIcon } from "@passui/icons/chevron-down";
+import { ChevronLeftIcon } from "@passui/icons/chevron-left";
+import { ChevronRightIcon } from "@passui/icons/chevron-right";
+// src/components/calendar.tsx
+const today = () => {
+	const now = /* @__PURE__ */ new Date();
+	return {
+		year: now.getFullYear(),
+		month: now.getMonth() + 1,
+		day: now.getDate()
+	};
+};
+/** Whole years offered by the month and year wheels around `now`, widened to the bounds. */
+function yearSpan(now, min, max) {
+	const from = parseDay(min ?? "")?.year ?? now - 100;
+	const to = parseDay(max ?? "")?.year ?? now + 50;
+	return Array.from({ length: Math.max(1, to - from + 1) }, (_, i) => from + i);
+}
+const cell = "relative mx-auto flex size-8.5 items-center justify-center rounded-full text-footnote tabular-nums outline-none transition-colors duration-(--duration-fast) focus-visible:ring-2 focus-visible:ring-accent/70 disabled:pointer-events-none disabled:opacity-30 motion-reduce:transition-none";
+/**
+* An inline month calendar for one day or a range, on the locale's own week.
+* Arrow keys move by day and week, Page Up and Page Down by month, Home and
+* End to the week's edges.
+*/
+function Calendar(props) {
+	const { label, locale, min, max, labels, className } = props;
+	const range = props.mode === "range";
+	const selected = range ? props.value.from : props.value;
+	const to = range ? props.value.to : "";
+	const start = parseDay(selected) ?? today();
+	const [focus, setFocus] = useState(start);
+	const [hover, setHover] = useState("");
+	const [jumping, setJumping] = useState(false);
+	const grid = useRef(null);
+	const headingId = useId();
+	const first = firstWeekday(locale);
+	const days = useMemo(() => monthGrid(focus.year, focus.month, first), [
+		focus.year,
+		focus.month,
+		first
+	]);
+	const monthTitle = new Intl.DateTimeFormat(locale, {
+		month: "long",
+		year: "numeric",
+		timeZone: "UTC"
+	}).format(new Date(Date.UTC(focus.year, focus.month - 1, 1)));
+	const weekdays = Array.from({ length: 7 }, (_, index) => new Intl.DateTimeFormat(locale, {
+		weekday: "short",
+		timeZone: "UTC"
+	}).format(new Date(Date.UTC(2024, 0, (first - 1 + index) % 7 + 1))));
+	const todayValue = formatDay(today());
+	const monthOptions = useMemo(() => Array.from({ length: 12 }, (_, index) => ({
+		value: index + 1,
+		label: new Intl.DateTimeFormat(locale, {
+			month: "long",
+			timeZone: "UTC"
+		}).format(new Date(Date.UTC(2024, index, 1)))
+	})), [locale]);
+	const yearOptions = useMemo(() => {
+		const years = yearSpan(today().year, min, max);
+		if (!years.includes(focus.year)) years.push(focus.year);
+		const plain = new Intl.NumberFormat(locale, { useGrouping: false });
+		return years.sort((a, b) => a - b).map((year) => ({
+			value: year,
+			label: plain.format(year)
+		}));
+	}, [
+		locale,
+		min,
+		max,
+		focus.year
+	]);
+	const field = (name) => new Intl.DisplayNames([locale], { type: "dateTimeField" }).of(name) ?? name;
+	/** Position of a day within its week, 0 for the locale's first day. */
+	const weekIndex = (day) => ((new Date(Date.UTC(day.year, day.month - 1, day.day)).getUTCDay() || 7) - first + 7) % 7;
+	const move = (next) => {
+		setFocus(next);
+		requestAnimationFrame(() => grid.current?.querySelector(`[data-day="${formatDay(next)}"]`)?.focus());
+	};
+	const pick = (value) => {
+		if (!withinBounds(value, min, max)) return;
+		if (props.mode !== "range") {
+			props.onValueChange(value);
+			return;
+		}
+		if (!(props.value.from && !props.value.to)) props.onValueChange({
+			from: value,
+			to: ""
+		});
+		else if (value < props.value.from) props.onValueChange({
+			from: value,
+			to: ""
+		});
+		else props.onValueChange({
+			from: props.value.from,
+			to: value
+		});
+	};
+	const onKeyDown = (event) => {
+		const next = (() => {
+			switch (event.key) {
+				case "ArrowLeft": return addDays(focus, -1);
+				case "ArrowRight": return addDays(focus, 1);
+				case "ArrowUp": return addDays(focus, -7);
+				case "ArrowDown": return addDays(focus, 7);
+				case "PageUp": return addMonths(focus, -1);
+				case "PageDown": return addMonths(focus, 1);
+				case "Home": return addDays(focus, -weekIndex(focus));
+				case "End": return addDays(focus, 6 - weekIndex(focus));
+				default: return null;
+			}
+		})();
+		if (!next) return;
+		event.preventDefault();
+		move(next);
+	};
+	const edge = range && props.value.from && !props.value.to ? hover : to;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "calendar",
+		className: cx("w-[17.5rem]", className),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "mb-2 flex items-center justify-between",
+				children: [
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						"aria-label": labels.previousMonth,
+						disabled: jumping,
+						onClick: () => setFocus(addMonths(focus, -1)),
+						className: "text-label-secondary hover:bg-fill/80 hover:text-label focus-visible:ring-accent/70 flex size-7.5 items-center justify-center rounded-full outline-none focus-visible:ring-2 disabled:opacity-0",
+						children: /* @__PURE__ */ jsx(ChevronLeftIcon, { size: 14 })
+					}),
+					/* @__PURE__ */ jsxs("button", {
+						type: "button",
+						id: headingId,
+						"aria-live": "polite",
+						"aria-expanded": jumping,
+						onClick: () => setJumping(!jumping),
+						className: "text-footnote text-label hover:bg-fill/80 focus-visible:ring-accent/70 flex h-7.5 items-center gap-1 rounded-full px-3 font-semibold outline-none focus-visible:ring-2",
+						children: [monthTitle, /* @__PURE__ */ jsx(ChevronDownIcon, {
+							size: 12,
+							className: cx("text-label-secondary spring-snappy transition-transform motion-reduce:transition-none", jumping && "rotate-180")
+						})]
+					}),
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						"aria-label": labels.nextMonth,
+						disabled: jumping,
+						onClick: () => setFocus(addMonths(focus, 1)),
+						className: "text-label-secondary hover:bg-fill/80 hover:text-label focus-visible:ring-accent/70 flex size-7.5 items-center justify-center rounded-full outline-none focus-visible:ring-2 disabled:opacity-0",
+						children: /* @__PURE__ */ jsx(ChevronRightIcon, { size: 14 })
+					})
+				]
+			}),
+			jumping ? /* @__PURE__ */ jsxs("div", {
+				className: "flex min-h-[15.5rem] items-center justify-center gap-2",
+				onKeyDown: (event) => {
+					if (event.key !== "Escape") return;
+					event.stopPropagation();
+					setJumping(false);
+				},
+				children: [/* @__PURE__ */ jsx(Wheel, {
+					label: field("month"),
+					options: monthOptions,
+					value: focus.month,
+					onValueChange: (month) => setFocus(addMonths(focus, month - focus.month)),
+					className: "w-32"
+				}), /* @__PURE__ */ jsx(Wheel, {
+					label: field("year"),
+					options: yearOptions,
+					value: focus.year,
+					onValueChange: (year) => setFocus(addMonths(focus, (year - focus.year) * 12)),
+					className: "w-24"
+				})]
+			}) : null,
+			/* @__PURE__ */ jsx("div", {
+				ref: grid,
+				hidden: jumping,
+				onMouseLeave: () => setHover(""),
+				children: /* @__PURE__ */ jsxs("table", {
+					"aria-labelledby": headingId,
+					"aria-label": label,
+					onKeyDown,
+					className: "w-full table-fixed border-collapse",
+					children: [/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: weekdays.map((name) => /* @__PURE__ */ jsx("th", {
+						scope: "col",
+						className: "text-caption text-label-tertiary py-1 text-center font-medium",
+						children: name
+					}, name)) }) }), /* @__PURE__ */ jsx("tbody", { children: Array.from({ length: 6 }, (_, week) => /* @__PURE__ */ jsx("tr", { children: days.slice(week * 7, week * 7 + 7).map((day) => {
+						const value = formatDay(day);
+						const isStart = value === selected;
+						const isEnd = range && value === to;
+						const inSpan = range && !!selected && !!edge && value > selected && value < edge;
+						const blocked = !withinBounds(value, min, max);
+						return /* @__PURE__ */ jsx("td", {
+							className: cx("p-0", inSpan && "bg-accent-soft/70"),
+							children: /* @__PURE__ */ jsx("button", {
+								type: "button",
+								"data-day": value,
+								"data-today": value === todayValue || void 0,
+								"aria-pressed": isStart || isEnd,
+								"data-selected": isStart || isEnd || void 0,
+								"data-outside": !day.inMonth || void 0,
+								tabIndex: day.year === focus.year && day.month === focus.month && day.day === focus.day ? 0 : -1,
+								disabled: blocked,
+								onClick: () => pick(value),
+								onFocus: () => setFocus(day),
+								onMouseEnter: () => setHover(value),
+								className: cx(cell, !day.inMonth && "text-label-tertiary", day.inMonth && "text-label", value === todayValue && "text-accent-text font-semibold", !(isStart || isEnd) && "hover:bg-fill/80", (isStart || isEnd) && "bg-accent text-on-accent font-semibold"),
+								children: day.day
+							})
+						}, value);
+					}) }, week)) })]
+				})
+			})
+		]
+	});
+}
+export { Calendar };

package/dist/card.d.ts

@@ -0,0 +1,9 @@
+import { ComponentProps } from "react";
+/** A grouped surface. Compose with the header, content and footer parts. */
+export declare function Card({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+export declare function CardHeader({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+export declare function CardTitle({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+export declare function CardDescription({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+export declare function CardAction({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+export declare function CardContent({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+export declare function CardFooter({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;

package/dist/card.js

@@ -0,0 +1,54 @@
+import { cx } from "./lib/cx.js";
+import { jsx } from "react/jsx-runtime";
+// src/components/card.tsx
+/** A grouped surface. Compose with the header, content and footer parts. */
+function Card({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "card",
+		className: cx("card-surface squircle flex flex-col gap-4 py-5 text-label [--squircle-radius:1.5rem]", className),
+		...props
+	});
+}
+function CardHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "card-header",
+		className: cx("grid auto-rows-min items-start gap-1 px-5 has-data-[slot=card-action]:grid-cols-[1fr_auto]", className),
+		...props
+	});
+}
+function CardTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "card-title",
+		className: cx("text-headline font-semibold leading-tight", className),
+		...props
+	});
+}
+function CardDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "card-description",
+		className: cx("text-footnote text-label-secondary", className),
+		...props
+	});
+}
+function CardAction({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "card-action",
+		className: cx("col-start-2 row-span-2 row-start-1 self-start", className),
+		...props
+	});
+}
+function CardContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "card-content",
+		className: cx("px-5", className),
+		...props
+	});
+}
+function CardFooter({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "card-footer",
+		className: cx("flex items-center px-5", className),
+		...props
+	});
+}
+export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };

package/dist/chart.d.ts

@@ -0,0 +1,30 @@
+import { ComponentProps } from "react";
+/** `bar` compares values, `line` follows a trend, `area` is a line with its weight filled in. */
+export type ChartType = "bar" | "line" | "area";
+export interface ChartSeries {
+  /** The key of the value in each data row. */
+  key: string;
+  /** Names the series in the tooltip and legend. */
+  label: string;
+  /** Any CSS colour. Defaults to the accent, then success, warning and danger. */
+  color?: string;
+}
+export type ChartProps = Omit<ComponentProps<"div">, "children"> & {
+  /** One row per point on the x axis. */
+  data: Array<Record<string, string | number>>;
+  /** The key holding each row's x label. */
+  xKey: string;
+  series: ChartSeries[];
+  /** Names the chart for assistive technology. */
+  label: string;
+  /** @default "line" */
+  type?: ChartType;
+  /** Formats a value for the axis and the tooltip. */
+  format?: (value: number) => string;
+};
+/**
+ * A responsive SVG chart for one or more series. Bars grow and lines draw on
+ * first paint, a tooltip follows the pointer to the nearest point, and a
+ * hidden table carries the same numbers for screen readers.
+ */
+export declare function Chart({ data, xKey, series, label, type, format, className, ...props }: ChartProps): import("react").JSX.Element;

package/dist/chart.js

@@ -0,0 +1,226 @@
+"use client";
+import { cx } from "./lib/cx.js";
+import { useId, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/chart.tsx
+const palette = [
+	"var(--color-accent)",
+	"var(--color-success)",
+	"var(--color-warning)",
+	"var(--color-danger)"
+];
+const W = 480;
+const H = 220;
+const pad = {
+	top: 12,
+	right: 12,
+	bottom: 26,
+	left: 40
+};
+/** The smallest round number above `max`, so gridlines fall on friendly values. */
+function niceMax(max) {
+	if (max <= 0) return 1;
+	const magnitude = 10 ** Math.floor(Math.log10(max));
+	return ([
+		1,
+		2,
+		2.5,
+		5,
+		10
+	].find((n) => n * magnitude >= max) ?? 10) * magnitude;
+}
+/**
+* A responsive SVG chart for one or more series. Bars grow and lines draw on
+* first paint, a tooltip follows the pointer to the nearest point, and a
+* hidden table carries the same numbers for screen readers.
+*/
+function Chart({ data, xKey, series, label, type = "line", format = (value) => value.toLocaleString(), className, ...props }) {
+	const id = useId();
+	const [hover, setHover] = useState(null);
+	const top = niceMax(Math.max(...data.flatMap((row) => series.map((s) => Number(row[s.key]) || 0))));
+	const innerW = W - pad.left - pad.right;
+	const innerH = H - pad.top - pad.bottom;
+	const band = innerW / Math.max(data.length, 1);
+	const x = (index) => type === "bar" ? pad.left + band * index + band / 2 : pad.left + (data.length === 1 ? innerW / 2 : innerW * index / (data.length - 1));
+	const y = (value) => pad.top + innerH - value / top * innerH;
+	const color = (index) => series[index]?.color ?? palette[index % palette.length];
+	const ticks = [
+		0,
+		.25,
+		.5,
+		.75,
+		1
+	].map((t) => t * top);
+	const barW = Math.min(28, band / series.length * .7);
+	const move = (event) => {
+		const rect = event.currentTarget.getBoundingClientRect();
+		const at = (event.clientX - rect.left) / rect.width * W;
+		const index = type === "bar" ? Math.floor((at - pad.left) / band) : Math.round((at - pad.left) / innerW * (data.length - 1));
+		setHover(Math.min(Math.max(index, 0), data.length - 1));
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "chart",
+		className: cx("relative flex w-full flex-col gap-2", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsxs("svg", {
+				viewBox: `0 0 ${W} ${H}`,
+				role: "img",
+				"aria-label": label,
+				className: "h-auto w-full touch-pan-y overflow-visible",
+				onPointerMove: move,
+				onPointerLeave: () => setHover(null),
+				children: [
+					/* @__PURE__ */ jsx("defs", { children: series.map((s, index) => /* @__PURE__ */ jsxs("linearGradient", {
+						id: `${id}-${s.key}`,
+						x1: "0",
+						x2: "0",
+						y1: "0",
+						y2: "1",
+						children: [/* @__PURE__ */ jsx("stop", {
+							offset: "0",
+							stopColor: color(index),
+							stopOpacity: "0.35"
+						}), /* @__PURE__ */ jsx("stop", {
+							offset: "1",
+							stopColor: color(index),
+							stopOpacity: "0"
+						})]
+					}, s.key)) }),
+					ticks.map((tick) => /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("line", {
+						x1: pad.left,
+						x2: W - pad.right,
+						y1: y(tick),
+						y2: y(tick),
+						stroke: "var(--color-separator)",
+						strokeOpacity: tick === 0 ? 1 : .5,
+						strokeDasharray: tick === 0 ? void 0 : "3 4"
+					}), /* @__PURE__ */ jsx("text", {
+						x: pad.left - 8,
+						y: y(tick),
+						textAnchor: "end",
+						dominantBaseline: "middle",
+						className: "fill-label-tertiary text-[10px]",
+						children: format(tick)
+					})] }, tick)),
+					data.map((row, index) => /* @__PURE__ */ jsx("text", {
+						x: x(index),
+						y: 212,
+						textAnchor: "middle",
+						className: "fill-label-tertiary text-[10px]",
+						children: row[xKey]
+					}, String(row[xKey]))),
+					hover !== null ? /* @__PURE__ */ jsx("line", {
+						x1: x(hover),
+						x2: x(hover),
+						y1: pad.top,
+						y2: pad.top + innerH,
+						stroke: "var(--color-label-tertiary)",
+						strokeOpacity: "0.5"
+					}) : null,
+					series.map((s, si) => {
+						const points = data.map((row, index) => [x(index), y(Number(row[s.key]) || 0)]);
+						if (type === "bar") return /* @__PURE__ */ jsx("g", { children: points.map(([px, py], index) => /* @__PURE__ */ jsx("rect", {
+							x: px - barW * series.length / 2 + si * barW,
+							y: py,
+							width: barW - 2,
+							height: pad.top + innerH - py,
+							rx: 4,
+							fill: color(si),
+							opacity: hover === null || hover === index ? 1 : .45,
+							className: "spring-smooth origin-bottom transition-opacity motion-reduce:animate-none",
+							style: {
+								transformBox: "fill-box",
+								animation: `passui-grow var(--spring-smooth-duration) var(--spring-smooth) ${index * 40}ms backwards`
+							}
+						}, index)) }, s.key);
+						const line = points.map(([px, py], index) => `${index ? "L" : "M"}${px},${py}`).join(" ");
+						const first = points[0];
+						const last = points[points.length - 1];
+						return /* @__PURE__ */ jsxs("g", { children: [
+							type === "area" && first && last ? /* @__PURE__ */ jsx("path", {
+								d: `${line} L${last[0]},${pad.top + innerH} L${first[0]},${pad.top + innerH} Z`,
+								fill: `url(#${id}-${s.key})`,
+								className: "motion-reduce:animate-none",
+								style: { animation: "passui-fade-in 700ms ease-out backwards" }
+							}) : null,
+							/* @__PURE__ */ jsx("path", {
+								d: line,
+								fill: "none",
+								stroke: color(si),
+								strokeWidth: "2.5",
+								strokeLinecap: "round",
+								strokeLinejoin: "round",
+								pathLength: 1,
+								strokeDasharray: 1,
+								className: "motion-reduce:animate-none",
+								style: { animation: "passui-draw 900ms var(--ease-standard) forwards" }
+							}),
+							hover !== null && points[hover] ? /* @__PURE__ */ jsx("circle", {
+								cx: points[hover][0],
+								cy: points[hover][1],
+								r: "4.5",
+								fill: "var(--color-background)",
+								stroke: color(si),
+								strokeWidth: "2.5"
+							}) : null
+						] }, s.key);
+					})
+				]
+			}),
+			hover !== null && data[hover] ? /* @__PURE__ */ jsxs("div", {
+				role: "presentation",
+				className: "liquid-glass-dense squircle text-caption text-label pointer-events-none absolute top-0 z-10 -translate-x-1/2 px-2.5 py-1.5 [--squircle-radius:0.75rem]",
+				style: { left: `${x(hover) / W * 100}%` },
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "text-label-secondary font-medium",
+					children: data[hover][xKey]
+				}), series.map((s, index) => /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-1.5",
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							className: "size-2 rounded-full",
+							style: { background: color(index) }
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "text-label-secondary",
+							children: s.label
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "ms-auto ps-3 font-semibold tabular-nums",
+							children: format(Number(data[hover][s.key]) || 0)
+						})
+					]
+				}, s.key))]
+			}) : null,
+			series.length > 1 ? /* @__PURE__ */ jsx("ul", {
+				className: "text-caption text-label-secondary m-0 flex list-none flex-wrap gap-x-4 gap-y-1 p-0",
+				children: series.map((s, index) => /* @__PURE__ */ jsxs("li", {
+					className: "flex items-center gap-1.5",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "size-2 rounded-full",
+						style: { background: color(index) }
+					}), s.label]
+				}, s.key))
+			}) : null,
+			/* @__PURE__ */ jsxs("table", {
+				className: "sr-only",
+				children: [
+					/* @__PURE__ */ jsx("caption", { children: label }),
+					/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [/* @__PURE__ */ jsx("th", {
+						scope: "col",
+						children: xKey
+					}), series.map((s) => /* @__PURE__ */ jsx("th", {
+						scope: "col",
+						children: s.label
+					}, s.key))] }) }),
+					/* @__PURE__ */ jsx("tbody", { children: data.map((row) => /* @__PURE__ */ jsxs("tr", { children: [/* @__PURE__ */ jsx("th", {
+						scope: "row",
+						children: row[xKey]
+					}), series.map((s) => /* @__PURE__ */ jsx("td", { children: row[s.key] }, s.key))] }, String(row[xKey]))) })
+				]
+			})
+		]
+	});
+}
+export { Chart };

package/dist/checkbox.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from "react";
+import * as checkbox from "@zag-js/checkbox";
+export interface CheckboxProps extends Omit<checkbox.Props, "id" | "ids" | "checked" | "defaultChecked" | "onCheckedChange"> {
+  checked?: boolean | "indeterminate";
+  defaultChecked?: boolean | "indeterminate";
+  onCheckedChange?: (checked: boolean | "indeterminate") => void;
+  /** The label beside the box. Optional, so a bare box can sit in a table cell. */
+  children?: ReactNode;
+  className?: string;
+  "aria-label"?: string;
+}
+/** A tick box. Renders a native hidden checkbox, so it submits with its form. */
+export declare function Checkbox({ checked, defaultChecked, onCheckedChange, children, className, "aria-label": ariaLabel, ...props }: CheckboxProps): import("react").JSX.Element;

package/dist/checkbox.js

@@ -0,0 +1,53 @@
+"use client";
+import { cx } from "./lib/cx.js";
+import { normalizeProps, useMachine } from "@zag-js/react";
+import { useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as checkbox from "@zag-js/checkbox";
+// src/components/checkbox.tsx
+/** A tick box. Renders a native hidden checkbox, so it submits with its form. */
+function Checkbox({ checked, defaultChecked, onCheckedChange, children, className, "aria-label": ariaLabel, ...props }) {
+	const id = useId();
+	const service = useMachine(checkbox.machine, {
+		id,
+		checked,
+		defaultChecked,
+		onCheckedChange: ({ checked: next }) => onCheckedChange?.(next),
+		...props
+	});
+	const api = checkbox.connect(service, normalizeProps);
+	return /* @__PURE__ */ jsxs("label", {
+		...api.getRootProps(),
+		"data-slot": "checkbox",
+		className: cx("group inline-flex cursor-pointer items-center gap-2.5 text-footnote data-disabled:cursor-not-allowed data-disabled:opacity-40", className),
+		children: [
+			/* @__PURE__ */ jsx("input", {
+				...api.getHiddenInputProps(),
+				"aria-label": ariaLabel
+			}),
+			/* @__PURE__ */ jsx("span", {
+				...api.getControlProps(),
+				"data-slot": "checkbox-control",
+				className: "bg-fill text-on-accent spring-snappy group-focus-within:ring-accent/70 data-[state=checked]:bg-accent data-[state=indeterminate]:bg-accent inline-flex size-5.5 shrink-0 items-center justify-center rounded-lg shadow-[inset_0_0_0_0.5px_var(--color-separator)] transition group-focus-within:ring-2 group-active:scale-90 motion-reduce:transition-none motion-reduce:group-active:scale-100",
+				children: /* @__PURE__ */ jsx("svg", {
+					...api.getIndicatorProps(),
+					hidden: false,
+					viewBox: "0 0 16 16",
+					fill: "none",
+					stroke: "currentColor",
+					strokeWidth: "2.25",
+					strokeLinecap: "round",
+					strokeLinejoin: "round",
+					className: "spring-bouncy size-3.5 scale-0 transition-transform group-data-[state=checked]:scale-100 group-data-[state=indeterminate]:scale-100",
+					"aria-hidden": "true",
+					children: api.indeterminate ? /* @__PURE__ */ jsx("path", { d: "M4 8h8" }) : /* @__PURE__ */ jsx("path", { d: "m3.5 8.5 3 3 6-7" })
+				})
+			}),
+			children ? /* @__PURE__ */ jsx("span", {
+				...api.getLabelProps(),
+				children
+			}) : null
+		]
+	});
+}
+export { Checkbox };

package/dist/{types/src/lib/clipboard.d.ts → clipboard.d.ts}

@@ -3,4 +3,4 @@
  * the write. Returns false when unavailable or denied, so the app can offer
  * manual copying. This helper never reads the clipboard or adds feedback.
  */
-export declare function copyText(text: string): Promise<boolean>;
+export declare function copyText(text: string): Promise<boolean>;

package/dist/clipboard.js

@@ -0,0 +1,16 @@
+// src/lib/clipboard.ts
+/**
+* Copies text after a user action. Returns true only after the browser confirms
+* the write. Returns false when unavailable or denied, so the app can offer
+* manual copying. This helper never reads the clipboard or adds feedback.
+*/
+async function copyText(text) {
+	try {
+		if (typeof navigator === "undefined" || !navigator.clipboard?.writeText) return false;
+		await navigator.clipboard.writeText(text);
+		return true;
+	} catch {
+		return false;
+	}
+}
+export { copyText };

package/dist/cn.d.ts

@@ -0,0 +1,2 @@
+import { ClassValue } from "clsx";
+export declare function cn(...inputs: ClassValue[]): string;

package/dist/cn.js

@@ -0,0 +1,10 @@
+import { textStyles } from "@passui/tokens/typography";
+import { clsx } from "clsx";
+import { extendTailwindMerge } from "tailwind-merge";
+// src/lib/class-names.ts
+const textStyleClasses = Object.keys(textStyles).map((name) => `text-${name.replace(/[A-Z]/g, (character) => `-${character.toLowerCase()}`)}`);
+const twMerge = extendTailwindMerge({ extend: { classGroups: { "font-size": textStyleClasses } } });
+function cn(...inputs) {
+	return twMerge(clsx(inputs));
+}
+export { cn };