@bzync/rui 0.0.4 → 0.0.8

package/dist/components/time-picker.js

@@ -0,0 +1,394 @@
+"use client";
+import { t as e } from "../cn-BJyZJP-y.js";
+import { o as t, s as n, t as r } from "../component-styles-C2CbHEEA.js";
+import { forwardRef as i, useEffect as a, useId as o, useImperativeHandle as s, useLayoutEffect as c, useRef as l, useState as u } from "react";
+import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
+//#region src/components/time-picker.tsx
+var ee = {
+	sm: "h-10 px-2.5 text-xs sm:h-8",
+	md: "h-11 px-3 text-sm sm:h-9",
+	lg: "h-12 px-3.5 text-sm sm:h-10"
+}, m = (e) => String(e).padStart(2, "0");
+function h(e) {
+	if (!e) return null;
+	let t = /^(?:([01]\d|2[0-3])):([0-5]\d)(?::([0-5]\d))?$/.exec(e);
+	return t ? {
+		hour: Number(t[1]),
+		minute: Number(t[2]),
+		second: Number(t[3] ?? 0)
+	} : null;
+}
+function g(e) {
+	return e.hour * 3600 + e.minute * 60 + e.second;
+}
+function _(e, t) {
+	let n = `${m(e.hour)}:${m(e.minute)}`;
+	return t ? `${n}:${m(e.second)}` : n;
+}
+function v(e, t, n) {
+	let r = h(e);
+	if (!r) return "";
+	let i = m(r.minute), a = n ? `:${m(r.second)}` : "";
+	if (t === "24") return `${m(r.hour)}:${i}${a}`;
+	let o = r.hour >= 12 ? "PM" : "AM";
+	return `${r.hour % 12 || 12}:${i}${a} ${o}`;
+}
+function y(e) {
+	let t = /* @__PURE__ */ new Date(), n = Math.floor(59 / e) * e;
+	return {
+		hour: t.getHours(),
+		minute: Math.min(n, Math.round(t.getMinutes() / e) * e),
+		second: t.getSeconds()
+	};
+}
+function b(e, t, n) {
+	let r = Math.floor(59 / t) * t;
+	return {
+		...e,
+		minute: Math.min(r, Math.round(e.minute / t) * t),
+		second: n ? e.second : 0
+	};
+}
+function x({ label: t, id: r, name: i, options: a, value: o, onSelect: s }) {
+	let c = `${r}-label`;
+	function l(e, t) {
+		if (![
+			"ArrowUp",
+			"ArrowDown",
+			"Home",
+			"End"
+		].includes(e.key)) return;
+		e.preventDefault();
+		let n = e.key === "Home" ? 0 : e.key === "End" ? a.length - 1 : (t + (e.key === "ArrowDown" ? 1 : -1) + a.length) % a.length, r = a[n];
+		r && (s(r.value), e.currentTarget.closest("[data-time-column]")?.querySelectorAll("[role=\"option\"]")[n]?.focus());
+	}
+	return /* @__PURE__ */ p("div", {
+		className: "min-w-0",
+		children: [/* @__PURE__ */ f("p", {
+			id: c,
+			className: "mb-1.5 truncate text-center text-[10px] font-semibold uppercase tracking-wider text-muted-foreground",
+			children: t
+		}), /* @__PURE__ */ f("div", {
+			role: "listbox",
+			"aria-labelledby": c,
+			"data-time-column": i,
+			className: "max-h-52 min-w-0 overflow-y-auto overscroll-contain rounded-[var(--radius-md)] border border-border bg-surface p-1 scrollbar-thin sm:max-h-44",
+			children: a.map((t, r) => {
+				let i = t.value === o;
+				return /* @__PURE__ */ f("button", {
+					type: "button",
+					role: "option",
+					"aria-selected": i,
+					tabIndex: i ? 0 : -1,
+					onClick: () => s(t.value),
+					onKeyDown: (e) => l(e, r),
+					className: e("flex h-11 w-full items-center justify-center rounded-[var(--radius-sm)] px-1 text-sm tabular-nums transition-colors sm:h-9 sm:text-xs", n, i ? "bg-primary font-semibold text-primary-foreground" : "text-muted-foreground hover:bg-muted hover:text-foreground"),
+					children: t.label
+				}, t.value);
+			})
+		})]
+	});
+}
+var S = i(({ label: i, hint: S, error: C, value: w, defaultValue: te = "", onValueChange: ne, format: T = "12", minuteStep: E = 5, showSeconds: D = !1, min: re, max: ie, name: O, disabled: k = !1, required: A = !1, clearable: ae = !0, placeholder: oe = "Select time…", size: se = "md", side: j = "bottom", align: M = "start", triggerClassName: ce, panelClassName: le, labelClassName: ue, messageClassName: N, className: de, id: fe, onBlur: pe, onKeyDown: me, ...he }, ge) => {
+	let _e = o(), P = fe ?? _e, F = `${P}-panel`, I = `${P}-message`, L = l(null), R = l(null), z = l(null);
+	s(ge, () => R.current);
+	let B = Number.isFinite(E) ? Math.max(1, Math.min(30, Math.floor(E))) : 5, V = (e) => {
+		let t = h(e);
+		return t ? _(t, D) : "";
+	}, [ve, ye] = u(() => V(te)), H = V(w ?? ve), [U, be] = u(!1), [xe, W] = u({ visibility: "hidden" }), [G, K] = u(() => b(h(H) ?? y(B), B, D)), Se = Array.from({ length: 24 }, (e, t) => ({
+		value: t,
+		label: m(t)
+	})), Ce = Array.from({ length: 12 }, (e, t) => ({
+		value: t + 1,
+		label: m(t + 1)
+	})), we = Array.from({ length: Math.floor(59 / B) + 1 }, (e, t) => {
+		let n = t * B;
+		return {
+			value: n,
+			label: m(n)
+		};
+	}), Te = Array.from({ length: 60 }, (e, t) => ({
+		value: t,
+		label: m(t)
+	})), Ee = [{
+		value: 0,
+		label: "AM"
+	}, {
+		value: 1,
+		label: "PM"
+	}], q = h(re), J = h(ie), Y = g(G), X = q ? Y < g(q) : !1, De = J ? Y > g(J) : !1, Z = X || De, Oe = v(H, T, D);
+	function ke() {
+		k || (K(b(h(H) ?? y(B), B, D)), W({ visibility: "hidden" }), be(!0));
+	}
+	function Q(e = !1) {
+		be(!1), e && R.current?.focus();
+	}
+	function $(e) {
+		w === void 0 && ye(e), ne?.(e), Q(!0);
+	}
+	return a(() => {
+		if (!U) return;
+		let e = (e) => {
+			L.current?.contains(e.target) || Q();
+		};
+		return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+	}, [U]), c(() => {
+		if (!U) return;
+		let e = () => {
+			let e = R.current, t = z.current;
+			if (!e || !t) return;
+			if (window.innerWidth < 640) {
+				W({
+					insetInline: 8,
+					bottom: 8,
+					top: "auto",
+					width: "auto",
+					visibility: "visible"
+				});
+				return;
+			}
+			let n = e.getBoundingClientRect(), r = t.getBoundingClientRect(), i = M === "start" ? n.left : n.right - r.width, a = Math.max(16, window.innerWidth - r.width - 16), o = Math.min(Math.max(i, 16), a), s = n.bottom + 6, c = n.top - r.height - 6, l = s + r.height <= window.innerHeight - 16, u = c >= 16, d = j === "bottom" ? l || !u ? s : c : u || !l ? c : s, f = Math.max(16, window.innerHeight - r.height - 16);
+			W({
+				left: o,
+				top: Math.min(Math.max(d, 16), f),
+				visibility: "visible"
+			});
+		};
+		return e(), window.addEventListener("resize", e), document.addEventListener("scroll", e, !0), () => {
+			window.removeEventListener("resize", e), document.removeEventListener("scroll", e, !0);
+		};
+	}, [
+		M,
+		U,
+		j
+	]), a(() => {
+		if (!U || window.innerWidth >= 640) return;
+		let e = document.body.style.overflow;
+		return document.body.style.overflow = "hidden", () => {
+			document.body.style.overflow = e;
+		};
+	}, [U]), a(() => {
+		U && requestAnimationFrame(() => {
+			let e = L.current?.querySelector("[data-time-column=\"hour\"] [aria-selected=\"true\"]"), t = e?.closest("[role=\"listbox\"]");
+			e?.focus({ preventScroll: !0 }), e && t && (t.scrollTop = e.offsetTop - t.clientHeight / 2 + e.clientHeight / 2);
+		});
+	}, [U]), /* @__PURE__ */ p("div", {
+		ref: L,
+		className: e("relative", t, de),
+		onBlur: (e) => {
+			pe?.(e), e.currentTarget.contains(e.relatedTarget) || Q();
+		},
+		onKeyDown: (e) => {
+			me?.(e), !e.defaultPrevented && e.key === "Escape" && U && (e.preventDefault(), Q(!0));
+		},
+		...he,
+		children: [
+			i && /* @__PURE__ */ p("label", {
+				htmlFor: P,
+				className: e("text-xs font-semibold leading-5 text-foreground", ue),
+				children: [i, A && /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ f("span", {
+					"aria-hidden": "true",
+					className: "ml-1 text-destructive",
+					children: "*"
+				}), /* @__PURE__ */ f("span", {
+					className: "sr-only",
+					children: " (required)"
+				})] })]
+			}),
+			/* @__PURE__ */ p("button", {
+				ref: R,
+				id: P,
+				type: "button",
+				disabled: k,
+				"aria-expanded": U,
+				"aria-haspopup": "dialog",
+				"aria-controls": F,
+				"aria-invalid": C ? !0 : void 0,
+				"aria-required": A || void 0,
+				"aria-describedby": C || S ? I : void 0,
+				onClick: () => U ? Q() : ke(),
+				onKeyDown: (e) => {
+					e.key === "ArrowDown" && !U && (e.preventDefault(), ke());
+				},
+				className: e("flex w-full min-w-0 items-center gap-2 rounded-[var(--radius-md)] text-left", r, n, C && "border-destructive/60 hover:border-destructive/70 focus-within:border-destructive focus-within:ring-destructive/25", ee[se], ce),
+				children: [
+					/* @__PURE__ */ p("svg", {
+						"aria-hidden": "true",
+						width: "15",
+						height: "15",
+						viewBox: "0 0 24 24",
+						fill: "none",
+						stroke: "currentColor",
+						strokeWidth: "2",
+						strokeLinecap: "round",
+						strokeLinejoin: "round",
+						className: "shrink-0 text-muted-foreground",
+						children: [/* @__PURE__ */ f("circle", {
+							cx: "12",
+							cy: "12",
+							r: "9"
+						}), /* @__PURE__ */ f("path", { d: "M12 7v5l3 2" })]
+					}),
+					/* @__PURE__ */ f("span", {
+						className: e("min-w-0 flex-1 truncate", Oe ? "text-foreground" : "text-muted-foreground"),
+						children: Oe || oe
+					}),
+					/* @__PURE__ */ f("svg", {
+						"aria-hidden": "true",
+						width: "13",
+						height: "13",
+						viewBox: "0 0 24 24",
+						fill: "none",
+						stroke: "currentColor",
+						strokeWidth: "2.5",
+						strokeLinecap: "round",
+						strokeLinejoin: "round",
+						className: e("shrink-0 text-muted-foreground transition-transform", U && "rotate-180"),
+						children: /* @__PURE__ */ f("path", { d: "m6 9 6 6 6-6" })
+					})
+				]
+			}),
+			O && /* @__PURE__ */ f("input", {
+				type: "hidden",
+				name: O,
+				value: H,
+				disabled: k
+			}),
+			U && /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ f("div", {
+				"aria-hidden": "true",
+				className: "fixed inset-0 z-40 bg-overlay sm:hidden",
+				onMouseDown: () => Q(!0)
+			}), /* @__PURE__ */ p("div", {
+				ref: z,
+				id: F,
+				role: "dialog",
+				"aria-label": i ? `Choose ${i.toLowerCase()}` : "Choose time",
+				"data-side": j,
+				"data-align": M,
+				style: xe,
+				className: e("fixed z-50 w-[min(22rem,calc(100vw-2rem))] max-h-[calc(100dvh-1rem)] overflow-y-auto rounded-[var(--radius-lg)] border border-border bg-surface-raised p-3 shadow-floating", le),
+				children: [
+					/* @__PURE__ */ p("div", {
+						className: "mb-3 flex items-center justify-between gap-3",
+						children: [/* @__PURE__ */ p("div", {
+							className: "min-w-0",
+							children: [/* @__PURE__ */ f("p", {
+								className: "truncate text-sm font-semibold text-foreground",
+								children: "Choose time"
+							}), /* @__PURE__ */ p("p", {
+								className: "text-[11px] text-muted-foreground",
+								children: [T === "12" ? "12-hour" : "24-hour", " format"]
+							})]
+						}), /* @__PURE__ */ f("button", {
+							type: "button",
+							onClick: () => K(b(y(B), B, D)),
+							className: e("h-11 rounded-md px-3 text-xs font-medium text-accent-700 hover:bg-muted sm:h-8 sm:px-2.5 dark:text-accent-300", "focus-ring"),
+							children: "Now"
+						})]
+					}),
+					/* @__PURE__ */ f("div", {
+						"aria-live": "polite",
+						className: "mb-3 flex h-11 items-center justify-center rounded-[var(--radius-md)] bg-muted px-3 text-lg font-semibold tabular-nums text-foreground",
+						children: v(_(G, D), T, D)
+					}),
+					/* @__PURE__ */ p("div", {
+						className: e("grid gap-2", T === "12" && D ? "grid-cols-4" : D || T === "12" ? "grid-cols-3" : "grid-cols-2"),
+						children: [
+							/* @__PURE__ */ f(x, {
+								label: "Hour",
+								id: `${P}-hour`,
+								name: "hour",
+								options: T === "24" ? Se : Ce,
+								value: T === "24" ? G.hour : G.hour % 12 || 12,
+								onSelect: (e) => K((t) => ({
+									...t,
+									hour: T === "24" ? e : e % 12 + (t.hour >= 12 ? 12 : 0)
+								}))
+							}),
+							/* @__PURE__ */ f(x, {
+								id: `${P}-minute`,
+								label: "Minute",
+								name: "minute",
+								options: we,
+								value: G.minute,
+								onSelect: (e) => K((t) => ({
+									...t,
+									minute: e
+								}))
+							}),
+							D && /* @__PURE__ */ f(x, {
+								id: `${P}-second`,
+								label: "Second",
+								name: "second",
+								options: Te,
+								value: G.second,
+								onSelect: (e) => K((t) => ({
+									...t,
+									second: e
+								}))
+							}),
+							T === "12" && /* @__PURE__ */ f(x, {
+								id: `${P}-period`,
+								label: "Period",
+								name: "period",
+								options: Ee,
+								value: +(G.hour >= 12),
+								onSelect: (e) => K((t) => ({
+									...t,
+									hour: t.hour % 12 + e * 12
+								}))
+							})
+						]
+					}),
+					Z && /* @__PURE__ */ p("p", {
+						role: "status",
+						className: "mt-2 text-xs text-destructive",
+						children: [
+							"Choose a time ",
+							X ? `at or after ${v(_(q, D), T, D)}` : `at or before ${v(_(J, D), T, D)}`,
+							"."
+						]
+					}),
+					/* @__PURE__ */ p("div", {
+						className: "sticky bottom-0 -mx-3 -mb-3 mt-3 flex flex-wrap items-center justify-end gap-2 border-t border-border bg-surface-raised px-3 pb-3 pt-3",
+						children: [
+							ae && !A && H && /* @__PURE__ */ f("button", {
+								type: "button",
+								onClick: () => $(""),
+								className: e("mr-auto h-11 rounded-md px-3 text-xs font-medium text-muted-foreground hover:bg-muted hover:text-foreground sm:h-8 sm:px-2.5", "focus-ring"),
+								children: "Clear"
+							}),
+							/* @__PURE__ */ f("button", {
+								type: "button",
+								onClick: () => Q(!0),
+								className: e("h-11 rounded-md px-3 text-xs font-medium text-muted-foreground hover:bg-muted hover:text-foreground sm:h-8", "focus-ring"),
+								children: "Cancel"
+							}),
+							/* @__PURE__ */ f("button", {
+								type: "button",
+								disabled: Z,
+								onClick: () => $(_(G, D)),
+								className: e("h-11 rounded-md bg-primary px-4 text-xs font-semibold text-primary-foreground hover:bg-primary-hover disabled:cursor-not-allowed disabled:opacity-40 sm:h-8 sm:px-3", "focus-ring"),
+								children: "Apply"
+							})
+						]
+					})
+				]
+			})] }),
+			C && /* @__PURE__ */ f("p", {
+				id: I,
+				"aria-live": "polite",
+				className: e("text-xs leading-5 text-destructive", N),
+				children: C
+			}),
+			S && !C && /* @__PURE__ */ f("p", {
+				id: I,
+				className: e("text-xs leading-5 text-muted-foreground", N),
+				children: S
+			})
+		]
+	});
+});
+S.displayName = "TimePicker";
+//#endregion
+export { S as TimePicker };

package/dist/components/timeline.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../cn-BdjraxxU.cjs");let t=require("react/jsx-runtime");var n={default:`bg-slate-400 border-slate-400/30`,success:`bg-emerald-400 border-emerald-400/30`,warning:`bg-amber-400 border-amber-400/30`,error:`bg-red-400 border-red-400/30`,info:`bg-sky-400 border-sky-400/30`},r={default:`bg-slate-500/15 text-slate-400`,success:`bg-emerald-500/15 text-emerald-400`,warning:`bg-amber-500/15 text-amber-400`,error:`bg-red-500/15 text-red-400`,info:`bg-sky-500/15 text-sky-400`};function i({events:i,className:a}){return(0,t.jsx)(`div`,{className:e.t(`flex flex-col`,a),children:i.map((a,o)=>{let s=o===i.length-1,c=a.variant??`default`;return(0,t.jsxs)(`div`,{className:`flex gap-3`,children:[(0,t.jsxs)(`div`,{className:`flex flex-col items-center`,children:[a.icon?(0,t.jsx)(`div`,{className:e.t(`w-8 h-8 rounded-full flex items-center justify-center shrink-0`,r[c]),children:(0,t.jsx)(`span`,{className:`w-4 h-4 flex items-center justify-center`,children:a.icon})}):(0,t.jsx)(`div`,{className:e.t(`w-2.5 h-2.5 rounded-full shrink-0 border-2 mt-1.5`,n[c])}),!s&&(0,t.jsx)(`div`,{className:`flex-1 w-px bg-black/10 dark:bg-white/10 my-1`})]}),(0,t.jsxs)(`div`,{className:e.t(`pb-5 min-w-0`,s&&`pb-0`),children:[(0,t.jsxs)(`div`,{className:`flex items-baseline gap-2 flex-wrap`,children:[(0,t.jsx)(`p`,{className:`text-sm font-medium text-slate-700 dark:text-slate-200`,children:a.title}),a.timestamp&&(0,t.jsx)(`span`,{className:`text-xs text-slate-500`,children:a.timestamp})]}),a.description&&(0,t.jsx)(`p`,{className:`text-sm text-slate-500 mt-0.5`,children:a.description})]})]},a.id)})})}exports.Timeline=i;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../cn-B6R3HKzx.cjs");let t=require("react/jsx-runtime");var n={default:`bg-slate-400 border-slate-400/30`,success:`bg-emerald-400 border-emerald-400/30`,warning:`bg-amber-400 border-amber-400/30`,error:`bg-red-400 border-red-400/30`,info:`bg-sky-400 border-sky-400/30`},r={default:`bg-slate-500/15 text-slate-400`,success:`bg-emerald-500/15 text-emerald-400`,warning:`bg-amber-500/15 text-amber-400`,error:`bg-red-500/15 text-red-400`,info:`bg-sky-500/15 text-sky-400`};function i({events:i,className:a}){return(0,t.jsx)(`div`,{className:e.t(`flex flex-col`,a),children:i.map((a,o)=>{let s=o===i.length-1,c=a.variant??`default`;return(0,t.jsxs)(`div`,{className:`flex gap-3`,children:[(0,t.jsxs)(`div`,{className:`flex flex-col items-center`,children:[a.icon?(0,t.jsx)(`div`,{className:e.t(`w-8 h-8 rounded-full flex items-center justify-center shrink-0`,r[c]),children:(0,t.jsx)(`span`,{className:`w-4 h-4 flex items-center justify-center`,children:a.icon})}):(0,t.jsx)(`div`,{className:e.t(`w-2.5 h-2.5 rounded-full shrink-0 border-2 mt-1.5`,n[c])}),!s&&(0,t.jsx)(`div`,{className:`flex-1 w-px bg-black/10 dark:bg-white/10 my-1`})]}),(0,t.jsxs)(`div`,{className:e.t(`pb-5 min-w-0`,s&&`pb-0`),children:[(0,t.jsxs)(`div`,{className:`flex items-baseline gap-2 flex-wrap`,children:[(0,t.jsx)(`p`,{className:`text-sm font-medium text-slate-700 dark:text-slate-200`,children:a.title}),a.timestamp&&(0,t.jsx)(`span`,{className:`text-xs text-slate-500`,children:a.timestamp})]}),a.description&&(0,t.jsx)(`p`,{className:`text-sm text-slate-500 mt-0.5`,children:a.description})]})]},a.id)})})}exports.Timeline=i;

package/dist/components/timeline.js

@@ -1,4 +1,4 @@
-import { t as e } from "../cn-DpgY2leY.js";
+import { t as e } from "../cn-BJyZJP-y.js";
 import { jsx as t, jsxs as n } from "react/jsx-runtime";
 //#region src/components/timeline.tsx
 var r = {

package/dist/components/toggle.cjs

@@ -0,0 +1 @@
+"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../cn-B6R3HKzx.cjs"),t=require("../component-styles-DY4wigiq.cjs");let n=require("react"),r=require("react/jsx-runtime");var i={default:[`border border-transparent bg-transparent text-muted-foreground`,`hover:bg-muted hover:text-foreground`,`data-[state=on]:bg-accent-100 data-[state=on]:text-accent-800`,`dark:data-[state=on]:bg-accent-900/45 dark:data-[state=on]:text-accent-200`].join(` `),outline:[`border border-border bg-surface text-muted-foreground shadow-xs`,`hover:border-border-strong hover:bg-surface-muted hover:text-foreground`,`data-[state=on]:border-accent-300 data-[state=on]:bg-accent-50 data-[state=on]:text-accent-800`,`dark:data-[state=on]:border-accent-700 dark:data-[state=on]:bg-accent-900/35 dark:data-[state=on]:text-accent-200`].join(` `)},a={sm:`h-8 rounded-[var(--radius-md)] px-2.5 text-xs gap-1.5`,md:`h-9 rounded-[var(--radius-md)] px-3 text-sm gap-2`,lg:`h-10 rounded-[var(--radius-lg)] px-4 text-sm gap-2`,icon:`size-9 rounded-[var(--radius-md)] p-0`},o=[`inline-flex shrink-0 cursor-pointer select-none items-center justify-center font-medium`,`transition-[color,background-color,border-color,box-shadow] duration-150`,`disabled:pointer-events-none disabled:opacity-40`,t.s].join(` `),s=(0,n.forwardRef)(({pressed:t,defaultPressed:s=!1,onPressedChange:c,variant:l=`default`,size:u=`md`,className:d,type:f=`button`,onClick:p,...m},h)=>{let[g,_]=(0,n.useState)(s),v=t??g;return(0,r.jsx)(`button`,{ref:h,type:f,"aria-pressed":v,"data-state":v?`on`:`off`,className:e.t(o,i[l],a[u],d),onClick:e=>{if(p?.(e),e.defaultPrevented)return;let n=!v;t===void 0&&_(n),c?.(n)},...m})});s.displayName=`Toggle`;var c=(0,n.createContext)(null);function l(){let e=(0,n.useContext)(c);if(!e)throw Error(`ToggleGroupItem must be inside <ToggleGroup>`);return e}var u=(0,n.forwardRef)(({type:t=`single`,value:i,defaultValue:a,onValueChange:o,orientation:s=`horizontal`,variant:l=`default`,size:u=`md`,disabled:d=!1,loop:f=!0,className:p,children:m,...h},g)=>{let[_,v]=(0,n.useState)(()=>a??(t===`multiple`?[]:``)),y=i??_,b=o;function x(e){return t===`multiple`?Array.isArray(y)&&y.includes(e):y===e}function S(e){let n=t===`multiple`?(()=>{let t=Array.isArray(y)?y:[];return t.includes(e)?t.filter(t=>t!==e):[...t,e]})():y===e?``:e;i===void 0&&v(n),b?.(n)}return(0,r.jsx)(c.Provider,{value:{disabled:d,isPressed:x,loop:f,orientation:s,select:S,size:u,variant:l},children:(0,r.jsx)(`div`,{ref:g,role:`group`,"data-rui-toggle-group":``,"data-orientation":s,className:e.t(`inline-flex w-fit rounded-[var(--radius-lg)]`,s===`horizontal`?`max-w-full flex-row items-center gap-1 overflow-x-auto overscroll-x-contain p-0.5 scrollbar-none [&>*]:shrink-0`:`max-w-full flex-col items-stretch gap-1`,p),...h,children:m})})});u.displayName=`ToggleGroup`;var d=(0,n.forwardRef)(({value:t,variant:n,size:s,className:c,disabled:u,type:d=`button`,onClick:f,onKeyDown:p,...m},h)=>{let g=l(),_=g.isPressed(t),v=g.disabled||u;function y(e){if(p?.(e),e.defaultPrevented)return;let t=g.orientation===`horizontal`?`ArrowLeft`:`ArrowUp`,n=g.orientation===`horizontal`?`ArrowRight`:`ArrowDown`;if(e.key!==t&&e.key!==n&&e.key!==`Home`&&e.key!==`End`)return;let r=e.currentTarget.closest(`[data-rui-toggle-group]`),i=Array.from(r?.querySelectorAll(`[data-rui-toggle-item]:not(:disabled)`)??[]).filter(e=>e.closest(`[data-rui-toggle-group]`)===r),a=i.indexOf(e.currentTarget);if(a<0||i.length===0)return;e.preventDefault();let o=e.key===`Home`?0:e.key===`End`?i.length-1:a+(e.key===n?1:-1);o=g.loop?(o+i.length)%i.length:Math.max(0,Math.min(i.length-1,o)),i[o]?.focus()}return(0,r.jsx)(`button`,{ref:h,type:d,"aria-pressed":_,"data-rui-toggle-item":``,"data-state":_?`on`:`off`,disabled:v,className:e.t(o,i[n??g.variant],a[s??g.size],c),onClick:e=>{f?.(e),e.defaultPrevented||g.select(t)},onKeyDown:y,...m})});d.displayName=`ToggleGroupItem`,exports.Toggle=s,exports.ToggleGroup=u,exports.ToggleGroupItem=d,exports.toggleSizes=a,exports.toggleVariants=i;

package/dist/components/toggle.d.ts

@@ -0,0 +1,42 @@
+import { ButtonHTMLAttributes, HTMLAttributes, ReactNode } from 'react';
+export type ToggleVariant = "default" | "outline";
+export type ToggleSize = "sm" | "md" | "lg" | "icon";
+export declare const toggleVariants: Record<ToggleVariant, string>;
+export declare const toggleSizes: Record<ToggleSize, string>;
+export interface ToggleProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    pressed?: boolean;
+    defaultPressed?: boolean;
+    onPressedChange?: (pressed: boolean) => void;
+    variant?: ToggleVariant;
+    size?: ToggleSize;
+}
+export declare const Toggle: import('react').ForwardRefExoticComponent<ToggleProps & import('react').RefAttributes<HTMLButtonElement>>;
+interface ToggleGroupBaseProps extends Omit<HTMLAttributes<HTMLDivElement>, "defaultValue"> {
+    orientation?: "horizontal" | "vertical";
+    variant?: ToggleVariant;
+    size?: ToggleSize;
+    disabled?: boolean;
+    loop?: boolean;
+    children: ReactNode;
+}
+export interface ToggleGroupSingleProps extends ToggleGroupBaseProps {
+    type?: "single";
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+}
+export interface ToggleGroupMultipleProps extends ToggleGroupBaseProps {
+    type: "multiple";
+    value?: string[];
+    defaultValue?: string[];
+    onValueChange?: (value: string[]) => void;
+}
+export type ToggleGroupProps = ToggleGroupSingleProps | ToggleGroupMultipleProps;
+export declare const ToggleGroup: import('react').ForwardRefExoticComponent<ToggleGroupProps & import('react').RefAttributes<HTMLDivElement>>;
+export interface ToggleGroupItemProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "value"> {
+    value: string;
+    variant?: ToggleVariant;
+    size?: ToggleSize;
+}
+export declare const ToggleGroupItem: import('react').ForwardRefExoticComponent<ToggleGroupItemProps & import('react').RefAttributes<HTMLButtonElement>>;
+export {};

package/dist/components/toggle.js

@@ -0,0 +1,116 @@
+"use client";
+import { t as e } from "../cn-BJyZJP-y.js";
+import { s as t } from "../component-styles-C2CbHEEA.js";
+import { createContext as n, forwardRef as r, useContext as i, useState as a } from "react";
+import { jsx as o } from "react/jsx-runtime";
+//#region src/components/toggle.tsx
+var s = {
+	default: [
+		"border border-transparent bg-transparent text-muted-foreground",
+		"hover:bg-muted hover:text-foreground",
+		"data-[state=on]:bg-accent-100 data-[state=on]:text-accent-800",
+		"dark:data-[state=on]:bg-accent-900/45 dark:data-[state=on]:text-accent-200"
+	].join(" "),
+	outline: [
+		"border border-border bg-surface text-muted-foreground shadow-xs",
+		"hover:border-border-strong hover:bg-surface-muted hover:text-foreground",
+		"data-[state=on]:border-accent-300 data-[state=on]:bg-accent-50 data-[state=on]:text-accent-800",
+		"dark:data-[state=on]:border-accent-700 dark:data-[state=on]:bg-accent-900/35 dark:data-[state=on]:text-accent-200"
+	].join(" ")
+}, c = {
+	sm: "h-8 rounded-[var(--radius-md)] px-2.5 text-xs gap-1.5",
+	md: "h-9 rounded-[var(--radius-md)] px-3 text-sm gap-2",
+	lg: "h-10 rounded-[var(--radius-lg)] px-4 text-sm gap-2",
+	icon: "size-9 rounded-[var(--radius-md)] p-0"
+}, l = [
+	"inline-flex shrink-0 cursor-pointer select-none items-center justify-center font-medium",
+	"transition-[color,background-color,border-color,box-shadow] duration-150",
+	"disabled:pointer-events-none disabled:opacity-40",
+	t
+].join(" "), u = r(({ pressed: t, defaultPressed: n = !1, onPressedChange: r, variant: i = "default", size: u = "md", className: d, type: f = "button", onClick: p, ...m }, h) => {
+	let [g, _] = a(n), v = t ?? g;
+	return /* @__PURE__ */ o("button", {
+		ref: h,
+		type: f,
+		"aria-pressed": v,
+		"data-state": v ? "on" : "off",
+		className: e(l, s[i], c[u], d),
+		onClick: (e) => {
+			if (p?.(e), e.defaultPrevented) return;
+			let n = !v;
+			t === void 0 && _(n), r?.(n);
+		},
+		...m
+	});
+});
+u.displayName = "Toggle";
+var d = n(null);
+function f() {
+	let e = i(d);
+	if (!e) throw Error("ToggleGroupItem must be inside <ToggleGroup>");
+	return e;
+}
+var p = r(({ type: t = "single", value: n, defaultValue: r, onValueChange: i, orientation: s = "horizontal", variant: c = "default", size: l = "md", disabled: u = !1, loop: f = !0, className: p, children: m, ...h }, g) => {
+	let [_, v] = a(() => r ?? (t === "multiple" ? [] : "")), y = n ?? _, b = i;
+	function x(e) {
+		return t === "multiple" ? Array.isArray(y) && y.includes(e) : y === e;
+	}
+	function S(e) {
+		let r = t === "multiple" ? (() => {
+			let t = Array.isArray(y) ? y : [];
+			return t.includes(e) ? t.filter((t) => t !== e) : [...t, e];
+		})() : y === e ? "" : e;
+		n === void 0 && v(r), b?.(r);
+	}
+	return /* @__PURE__ */ o(d.Provider, {
+		value: {
+			disabled: u,
+			isPressed: x,
+			loop: f,
+			orientation: s,
+			select: S,
+			size: l,
+			variant: c
+		},
+		children: /* @__PURE__ */ o("div", {
+			ref: g,
+			role: "group",
+			"data-rui-toggle-group": "",
+			"data-orientation": s,
+			className: e("inline-flex w-fit rounded-[var(--radius-lg)]", s === "horizontal" ? "max-w-full flex-row items-center gap-1 overflow-x-auto overscroll-x-contain p-0.5 scrollbar-none [&>*]:shrink-0" : "max-w-full flex-col items-stretch gap-1", p),
+			...h,
+			children: m
+		})
+	});
+});
+p.displayName = "ToggleGroup";
+var m = r(({ value: t, variant: n, size: r, className: i, disabled: a, type: u = "button", onClick: d, onKeyDown: p, ...m }, h) => {
+	let g = f(), _ = g.isPressed(t), v = g.disabled || a;
+	function y(e) {
+		if (p?.(e), e.defaultPrevented) return;
+		let t = g.orientation === "horizontal" ? "ArrowLeft" : "ArrowUp", n = g.orientation === "horizontal" ? "ArrowRight" : "ArrowDown";
+		if (e.key !== t && e.key !== n && e.key !== "Home" && e.key !== "End") return;
+		let r = e.currentTarget.closest("[data-rui-toggle-group]"), i = Array.from(r?.querySelectorAll("[data-rui-toggle-item]:not(:disabled)") ?? []).filter((e) => e.closest("[data-rui-toggle-group]") === r), a = i.indexOf(e.currentTarget);
+		if (a < 0 || i.length === 0) return;
+		e.preventDefault();
+		let o = e.key === "Home" ? 0 : e.key === "End" ? i.length - 1 : a + (e.key === n ? 1 : -1);
+		o = g.loop ? (o + i.length) % i.length : Math.max(0, Math.min(i.length - 1, o)), i[o]?.focus();
+	}
+	return /* @__PURE__ */ o("button", {
+		ref: h,
+		type: u,
+		"aria-pressed": _,
+		"data-rui-toggle-item": "",
+		"data-state": _ ? "on" : "off",
+		disabled: v,
+		className: e(l, s[n ?? g.variant], c[r ?? g.size], i),
+		onClick: (e) => {
+			d?.(e), e.defaultPrevented || g.select(t);
+		},
+		onKeyDown: y,
+		...m
+	});
+});
+m.displayName = "ToggleGroupItem";
+//#endregion
+export { u as Toggle, p as ToggleGroup, m as ToggleGroupItem, c as toggleSizes, s as toggleVariants };

package/dist/components/tooltip.cjs

@@ -1 +1 @@
-"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../cn-BdjraxxU.cjs");let t=require("framer-motion"),n=require("react"),r=require("react/jsx-runtime");var i={top:{container:`bottom-full left-1/2 -translate-x-1/2 mb-2`,initial:{y:4}},bottom:{container:`top-full left-1/2 -translate-x-1/2 mt-2`,initial:{y:-4}},left:{container:`right-full top-1/2 -translate-y-1/2 mr-2`,initial:{x:4}},right:{container:`left-full top-1/2 -translate-y-1/2 ml-2`,initial:{x:-4}}};function a({content:a,children:o,position:s=`top`,delayMs:c=0,className:l}){let[u,d]=(0,n.useState)(!1),f=(0,n.useRef)(null),p=(0,n.useId)(),{container:m,initial:h}=i[s];function g(){c>0?f.current=setTimeout(()=>d(!0),c):d(!0)}function _(){f.current&&clearTimeout(f.current),d(!1)}(0,n.useEffect)(()=>()=>{f.current&&clearTimeout(f.current)},[]);let v=(0,n.isValidElement)(o)?(0,n.cloneElement)(o,{"aria-describedby":u?p:void 0,onMouseEnter:e=>{o.props.onMouseEnter?.(e),e.defaultPrevented||g()},onMouseLeave:e=>{o.props.onMouseLeave?.(e),_()},onFocus:e=>{o.props.onFocus?.(e),e.defaultPrevented||g()},onBlur:e=>{o.props.onBlur?.(e),_()}}):(0,r.jsx)(`span`,{tabIndex:0,"aria-describedby":u?p:void 0,onMouseEnter:g,onMouseLeave:_,onFocus:g,onBlur:_,children:o});return(0,r.jsxs)(`div`,{className:`relative inline-flex`,children:[v,(0,r.jsx)(t.AnimatePresence,{children:u&&(0,r.jsx)(t.motion.div,{id:p,role:`tooltip`,initial:{opacity:0,...h},animate:{opacity:1,y:0,x:0},exit:{opacity:0,...h},transition:{duration:.12},className:e.t(`absolute z-50 pointer-events-none`,`max-w-[min(20rem,calc(100vw-2rem))] rounded-md px-2.5 py-1.5 text-xs font-medium leading-4`,`border border-slate-700 bg-slate-900 text-slate-50 shadow-floating dark:border-border-strong dark:bg-surface-raised dark:text-foreground`,m,l),children:a})})]})}exports.Tooltip=a;
+"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../cn-B6R3HKzx.cjs"),t=require("../motion-B2shivEB.cjs");let n=require("framer-motion"),r=require("react"),i=require("react/jsx-runtime");var a={top:{container:`bottom-full left-1/2 -translate-x-1/2 mb-2`,initial:{y:4}},bottom:{container:`top-full left-1/2 -translate-x-1/2 mt-2`,initial:{y:-4}},left:{container:`right-full top-1/2 -translate-y-1/2 mr-2`,initial:{x:4}},right:{container:`left-full top-1/2 -translate-y-1/2 ml-2`,initial:{x:-4}}};function o({content:o,children:s,position:c=`top`,delayMs:l=0,className:u,wrapperClassName:d}){let[f,p]=(0,r.useState)(!1),m=(0,r.useRef)(null),h=(0,r.useId)(),{container:g,initial:_}=a[c];function v(){l>0?m.current=setTimeout(()=>p(!0),l):p(!0)}function y(){m.current&&clearTimeout(m.current),p(!1)}(0,r.useEffect)(()=>()=>{m.current&&clearTimeout(m.current)},[]);let b=(0,r.isValidElement)(s)?(0,r.cloneElement)(s,{"aria-describedby":f?h:void 0,onMouseEnter:e=>{s.props.onMouseEnter?.(e),e.defaultPrevented||v()},onMouseLeave:e=>{s.props.onMouseLeave?.(e),y()},onFocus:e=>{s.props.onFocus?.(e),e.defaultPrevented||v()},onBlur:e=>{s.props.onBlur?.(e),y()}}):(0,i.jsx)(`span`,{tabIndex:0,"aria-describedby":f?h:void 0,onMouseEnter:v,onMouseLeave:y,onFocus:v,onBlur:y,children:s});return(0,i.jsxs)(`div`,{className:e.t(`relative inline-flex`,d),children:[b,(0,i.jsx)(n.AnimatePresence,{children:f&&(0,i.jsx)(n.motion.div,{id:h,role:`tooltip`,initial:{opacity:0,..._},animate:{opacity:1,y:0,x:0},exit:{opacity:0,..._},transition:t.n.fade,className:e.t(`absolute z-50 pointer-events-none`,`max-w-[min(20rem,calc(100vw-2rem))] rounded-md px-2.5 py-1.5 text-xs font-medium leading-4`,`border border-slate-700 bg-slate-900 text-slate-50 shadow-floating dark:border-border-strong dark:bg-surface-raised dark:text-foreground`,g,u),children:o})})]})}exports.Tooltip=o;

package/dist/components/tooltip.d.ts

@@ -6,6 +6,7 @@ export interface TooltipProps {
     position?: Position;
     delayMs?: number;
     className?: string;
+    wrapperClassName?: string;
 }
-export declare function Tooltip({ content, children, position, delayMs, className, }: TooltipProps): import("react").JSX.Element;
+export declare function Tooltip({ content, children, position, delayMs, className, wrapperClassName, }: TooltipProps): import("react").JSX.Element;
 export {};