@bzync/rui 0.0.4 → 0.0.8

package/dist/components/datepicker.js

@@ -1,11 +1,11 @@
 "use client";
-import { t as e } from "../cn-DpgY2leY.js";
-import { c as t, o as n, t as r } from "../component-styles-Bgy44fc8.js";
+import { t as e } from "../cn-BJyZJP-y.js";
+import { c as t, o as n, t as r } from "../component-styles-C2CbHEEA.js";
 import { AnimatePresence as i, motion as a } from "framer-motion";
-import { useEffect as o, useId as s, useRef as c, useState as l } from "react";
-import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { forwardRef as o, useEffect as s, useId as ee, useImperativeHandle as c, useLayoutEffect as te, 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/datepicker.tsx
-var f = [
+var ne = [
 	"Su",
 	"Mo",
 	"Tu",
@@ -13,7 +13,7 @@ var f = [
 	"Th",
 	"Fr",
 	"Sa"
-], p = [
+], m = [
 	"January",
 	"February",
 	"March",
@@ -27,65 +27,140 @@ var f = [
 	"November",
 	"December"
 ];
-function m(e) {
-	return `${p[e.getMonth()].slice(0, 3)} ${e.getDate()}, ${e.getFullYear()}`;
+function h(e) {
+	return `${m[e.getMonth()].slice(0, 3)} ${e.getDate()}, ${e.getFullYear()}`;
 }
-function h(e, t) {
+function g(e, t) {
 	return new Date(e, t + 1, 0).getDate();
 }
-function g(e, t) {
+function _(e, t) {
 	return new Date(e, t, 1).getDay();
 }
-function _(e, t) {
+function v(e, t) {
 	return e.getFullYear() === t.getFullYear() && e.getMonth() === t.getMonth() && e.getDate() === t.getDate();
 }
-function v({ value: v, onChange: y, label: b, hint: x, error: S, placeholder: C = "Select date…", disabled: w, clearable: T = !0, minDate: E, maxDate: D, className: O }) {
-	let [k, A] = l(null), j = v === void 0 ? k : v, M = /* @__PURE__ */ new Date(), [N, P] = l(!1), [F, I] = l((j ?? M).getFullYear()), [L, R] = l((j ?? M).getMonth()), z = c(null), B = s(), V = `${B}-message`;
-	function H(e) {
-		v === void 0 && A(e), y?.(e), P(!1);
+function y(e) {
+	return `${e.getFullYear()}-${String(e.getMonth() + 1).padStart(2, "0")}-${String(e.getDate()).padStart(2, "0")}`;
+}
+var b = o(({ value: o, onChange: b, label: x, hint: S, error: C, placeholder: w = "Select date…", disabled: T, clearable: E = !0, minDate: D, maxDate: O, className: k, ...re }, ie) => {
+	let [ae, A] = u(null), j = o === void 0 ? ae : o, M = /* @__PURE__ */ new Date(), [N, P] = u(!1), [F, I] = u((j ?? M).getFullYear()), [L, R] = u((j ?? M).getMonth()), [z, B] = u(j ?? M), [V, H] = u({ visibility: "hidden" }), U = l(null), W = l(null), G = l(null);
+	c(ie, () => U.current);
+	let K = ee(), q = `${K}-dialog`, J = `${K}-message`;
+	function Y(e) {
+		return !!(D && e < D || O && e > O);
+	}
+	function X(e) {
+		if (Y(e)) return;
+		let t = e.getFullYear() === F && e.getMonth() === L;
+		if (B(e), I(e.getFullYear()), R(e.getMonth()), t) {
+			G.current?.querySelector(`[data-date="${y(e)}"]`)?.focus({ preventScroll: !0 });
+			return;
+		}
+		requestAnimationFrame(() => requestAnimationFrame(() => {
+			G.current?.querySelector(`[data-date="${y(e)}"]`)?.focus({ preventScroll: !0 });
+		}));
+	}
+	function oe() {
+		return j && !Y(j) ? j : Y(M) ? D && (!O || D <= O) ? D : O ?? M : M;
+	}
+	function se() {
+		let e = oe();
+		B(e), I(e.getFullYear()), R(e.getMonth()), H({ visibility: "hidden" }), P(!0), requestAnimationFrame(() => requestAnimationFrame(() => {
+			G.current?.querySelector(`[data-date="${y(e)}"]`)?.focus({ preventScroll: !0 });
+		}));
 	}
-	function U(e) {
-		e.stopPropagation(), v === void 0 && A(null), y?.(null);
+	function Z(e = !1) {
+		P(!1), e && requestAnimationFrame(() => W.current?.focus());
 	}
-	function W() {
-		L === 0 ? (R(11), I((e) => e - 1)) : R((e) => e - 1);
+	function ce(e) {
+		o === void 0 && A(e), b?.(e), Z(!0);
 	}
-	function G() {
-		L === 11 ? (R(0), I((e) => e + 1)) : R((e) => e + 1);
+	function le() {
+		o === void 0 && A(null), b?.(null);
 	}
-	o(() => {
+	function Q(e, t) {
+		let n = new Date(e, t, 1), r = new Date(e, t + 1, 0, 23, 59, 59, 999);
+		return !(D && D > r) && !(O && O < n);
+	}
+	function $(e) {
+		let t = new Date(F, L + e, 1), n = t.getFullYear(), r = t.getMonth();
+		if (!Q(n, r)) return;
+		let i = new Date(n, r, Math.min(z.getDate(), g(n, r)));
+		D && i < D && D.getFullYear() === n && D.getMonth() === r && (i = new Date(n, r, D.getDate())), O && i > O && O.getFullYear() === n && O.getMonth() === r && (i = new Date(n, r, O.getDate())), I(n), R(r), B(i);
+	}
+	s(() => {
 		function e(e) {
-			z.current?.contains(e.target) || P(!1);
+			U.current?.contains(e.target) || Z();
 		}
 		function t(e) {
-			e.key === "Escape" && P(!1);
+			e.key === "Escape" && N && (e.preventDefault(), Z(!0));
 		}
 		return document.addEventListener("mousedown", e), document.addEventListener("keydown", t), () => {
 			document.removeEventListener("mousedown", e), document.removeEventListener("keydown", t);
 		};
-	}, []);
-	let K = h(F, L), q = g(F, L), J = [...Array(q).fill(null), ...Array.from({ length: K }, (e, t) => t + 1)];
-	return /* @__PURE__ */ d("div", {
-		ref: z,
-		className: e("relative", n, O),
+	}, [N]), te(() => {
+		if (!N) return;
+		let e = () => {
+			let e = W.current, t = G.current;
+			if (!e || !t) return;
+			let n = t.getBoundingClientRect();
+			if (window.innerWidth < 640) {
+				H({
+					insetInline: 8,
+					bottom: 8,
+					top: "auto",
+					width: "auto",
+					visibility: "visible"
+				});
+				return;
+			}
+			let r = e.getBoundingClientRect(), i = Math.min(Math.max(r.left, 16), Math.max(16, window.innerWidth - n.width - 16)), a = r.bottom + 6, o = r.top - n.height - 6, s = a + n.height <= window.innerHeight - 16 || o < 16 ? a : o;
+			H({
+				left: i,
+				top: Math.min(Math.max(s, 16), Math.max(16, window.innerHeight - n.height - 16)),
+				visibility: "visible"
+			});
+		};
+		return e(), window.addEventListener("resize", e), document.addEventListener("scroll", e, !0), () => {
+			window.removeEventListener("resize", e), document.removeEventListener("scroll", e, !0);
+		};
+	}, [N]), s(() => {
+		if (!N || window.innerWidth >= 640) return;
+		let e = document.body.style.overflow;
+		return document.body.style.overflow = "hidden", () => {
+			document.body.style.overflow = e;
+		};
+	}, [N]);
+	function ue(e, t) {
+		let n;
+		e.key === "ArrowLeft" ? n = new Date(t.getFullYear(), t.getMonth(), t.getDate() - 1) : e.key === "ArrowRight" ? n = new Date(t.getFullYear(), t.getMonth(), t.getDate() + 1) : e.key === "ArrowUp" ? n = new Date(t.getFullYear(), t.getMonth(), t.getDate() - 7) : e.key === "ArrowDown" ? n = new Date(t.getFullYear(), t.getMonth(), t.getDate() + 7) : e.key === "Home" ? n = new Date(t.getFullYear(), t.getMonth(), t.getDate() - t.getDay()) : e.key === "End" ? n = new Date(t.getFullYear(), t.getMonth(), t.getDate() + (6 - t.getDay())) : e.key === "PageUp" ? n = new Date(t.getFullYear(), t.getMonth() - 1, Math.min(t.getDate(), g(t.getFullYear(), t.getMonth() - 1))) : e.key === "PageDown" && (n = new Date(t.getFullYear(), t.getMonth() + 1, Math.min(t.getDate(), g(t.getFullYear(), t.getMonth() + 1)))), n && (e.preventDefault(), X(n));
+	}
+	let de = g(F, L), fe = _(F, L), pe = [...Array(fe).fill(null), ...Array.from({ length: de }, (e, t) => t + 1)];
+	return /* @__PURE__ */ p("div", {
+		ref: U,
+		className: e("relative", n, k),
+		...re,
 		children: [
-			b && /* @__PURE__ */ u("label", {
-				htmlFor: B,
+			x && /* @__PURE__ */ f("label", {
+				htmlFor: K,
 				className: "text-xs font-semibold leading-5 text-foreground",
-				children: b
+				children: x
 			}),
-			/* @__PURE__ */ d("button", {
-				type: "button",
-				id: B,
-				"aria-expanded": N,
-				"aria-haspopup": "dialog",
-				"aria-invalid": S ? !0 : void 0,
-				"aria-describedby": S || x ? V : void 0,
-				disabled: w,
-				onClick: () => P((e) => !e),
-				className: e("flex h-9 w-full items-center gap-2 rounded-[var(--radius-md)] px-3 text-left outline-none", r, "focus:border-accent-500 focus:ring-2 focus:ring-focus-ring/20", S && "border-destructive/60 hover:border-destructive/70 focus-within:border-destructive focus-within:ring-destructive/20", w && "opacity-50 cursor-not-allowed"),
-				children: [
-					/* @__PURE__ */ d("svg", {
+			/* @__PURE__ */ p("div", {
+				className: e("flex h-11 w-full items-center rounded-[var(--radius-md)] sm:h-9", r, C && "border-destructive/60 hover:border-destructive/70 focus-within:border-destructive focus-within:ring-destructive/25", T && "cursor-not-allowed opacity-50"),
+				children: [/* @__PURE__ */ p("button", {
+					ref: W,
+					type: "button",
+					id: K,
+					"aria-expanded": N,
+					"aria-haspopup": "dialog",
+					"aria-controls": q,
+					"aria-invalid": C ? !0 : void 0,
+					"aria-describedby": C || S ? J : void 0,
+					disabled: T,
+					onClick: () => N ? Z() : se(),
+					className: "flex h-full min-w-0 flex-1 items-center gap-2 rounded-[var(--radius-md)] px-3 text-left outline-none focus-visible:ring-[3px] focus-visible:ring-focus-ring/35",
+					children: [/* @__PURE__ */ p("svg", {
 						width: "14",
 						height: "14",
 						viewBox: "0 0 24 24",
@@ -96,7 +171,7 @@ function v({ value: v, onChange: y, label: b, hint: x, error: S, placeholder: C
 						strokeLinejoin: "round",
 						className: "text-slate-500 shrink-0",
 						children: [
-							/* @__PURE__ */ u("rect", {
+							/* @__PURE__ */ f("rect", {
 								width: "18",
 								height: "18",
 								x: "3",
@@ -104,50 +179,58 @@ function v({ value: v, onChange: y, label: b, hint: x, error: S, placeholder: C
 								rx: "2",
 								ry: "2"
 							}),
-							/* @__PURE__ */ u("line", {
+							/* @__PURE__ */ f("line", {
 								x1: "16",
 								x2: "16",
 								y1: "2",
 								y2: "6"
 							}),
-							/* @__PURE__ */ u("line", {
+							/* @__PURE__ */ f("line", {
 								x1: "8",
 								x2: "8",
 								y1: "2",
 								y2: "6"
 							}),
-							/* @__PURE__ */ u("line", {
+							/* @__PURE__ */ f("line", {
 								x1: "3",
 								x2: "21",
 								y1: "10",
 								y2: "10"
 							})
 						]
-					}),
-					/* @__PURE__ */ u("span", {
+					}), /* @__PURE__ */ f("span", {
 						className: e("flex-1 text-sm truncate", j ? "text-foreground" : "text-muted-foreground"),
-						children: j ? m(j) : C
-					}),
-					T && j && !w && /* @__PURE__ */ u("span", {
-						role: "button",
-						tabIndex: -1,
-						onClick: U,
-						className: "shrink-0 text-slate-500 hover:text-slate-700 dark:hover:text-slate-300 transition-colors",
-						children: /* @__PURE__ */ u("svg", {
-							width: "10",
-							height: "10",
-							viewBox: "0 0 24 24",
-							fill: "none",
-							stroke: "currentColor",
-							strokeWidth: "3",
-							strokeLinecap: "round",
-							strokeLinejoin: "round",
-							children: /* @__PURE__ */ u("path", { d: "M18 6 6 18M6 6l12 12" })
-						})
+						children: j ? h(j) : w
+					})]
+				}), E && j && !T && /* @__PURE__ */ f("button", {
+					type: "button",
+					"aria-label": `Clear ${x?.toLowerCase() ?? "date"}`,
+					onClick: le,
+					className: e(t, "mr-1 size-9 sm:size-7"),
+					children: /* @__PURE__ */ f("svg", {
+						"aria-hidden": "true",
+						width: "11",
+						height: "11",
+						viewBox: "0 0 24 24",
+						fill: "none",
+						stroke: "currentColor",
+						strokeWidth: "3",
+						strokeLinecap: "round",
+						strokeLinejoin: "round",
+						children: /* @__PURE__ */ f("path", { d: "M18 6 6 18M6 6l12 12" })
 					})
-				]
+				})]
 			}),
-			/* @__PURE__ */ u(i, { children: N && /* @__PURE__ */ d(a.div, {
+			/* @__PURE__ */ f(i, { children: N && /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ f(a.div, {
+				"aria-hidden": "true",
+				className: "fixed inset-0 z-40 bg-overlay sm:hidden",
+				onMouseDown: () => Z(!0),
+				initial: { opacity: 0 },
+				animate: { opacity: 1 },
+				exit: { opacity: 0 }
+			}), /* @__PURE__ */ p(a.div, {
+				ref: G,
+				id: q,
 				initial: {
 					opacity: 0,
 					y: -4,
@@ -164,20 +247,46 @@ function v({ value: v, onChange: y, label: b, hint: x, error: S, placeholder: C
 					scaleY: .97
 				},
 				transition: { duration: .13 },
-				style: { originY: 0 },
 				role: "dialog",
-				"aria-label": "Choose date",
-				className: "absolute left-0 top-full z-50 mt-1.5 w-[min(18rem,calc(100vw-2rem))] rounded-[var(--radius-lg)] border border-border bg-surface-raised p-3 shadow-floating",
+				"aria-label": x ? `Choose ${x.toLowerCase()}` : "Choose date",
+				className: "fixed z-50 w-[min(18rem,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",
+				style: {
+					...V,
+					originY: 0
+				},
 				children: [
-					/* @__PURE__ */ d("div", {
+					/* @__PURE__ */ p("div", {
+						className: "mb-2 flex items-center justify-between gap-3 sm:hidden",
+						children: [/* @__PURE__ */ f("strong", {
+							className: "text-sm text-foreground",
+							children: x ? `Choose ${x.toLowerCase()}` : "Choose date"
+						}), /* @__PURE__ */ f("button", {
+							type: "button",
+							onClick: () => Z(!0),
+							className: e(t, "size-11"),
+							"aria-label": "Close date picker",
+							children: /* @__PURE__ */ f("svg", {
+								"aria-hidden": "true",
+								width: "14",
+								height: "14",
+								viewBox: "0 0 24 24",
+								fill: "none",
+								stroke: "currentColor",
+								strokeWidth: "2",
+								children: /* @__PURE__ */ f("path", { d: "M18 6 6 18M6 6l12 12" })
+							})
+						})]
+					}),
+					/* @__PURE__ */ p("div", {
 						className: "flex items-center justify-between mb-3",
 						children: [
-							/* @__PURE__ */ u("button", {
+							/* @__PURE__ */ f("button", {
 								type: "button",
-								onClick: W,
+								onClick: () => $(-1),
+								disabled: !Q(new Date(F, L - 1, 1).getFullYear(), new Date(F, L - 1, 1).getMonth()),
 								"aria-label": "Previous month",
-								className: e(t, "size-7"),
-								children: /* @__PURE__ */ u("svg", {
+								className: e(t, "size-11 disabled:cursor-not-allowed disabled:opacity-35 sm:size-7"),
+								children: /* @__PURE__ */ f("svg", {
 									width: "14",
 									height: "14",
 									viewBox: "0 0 24 24",
@@ -186,24 +295,25 @@ function v({ value: v, onChange: y, label: b, hint: x, error: S, placeholder: C
 									strokeWidth: "2.5",
 									strokeLinecap: "round",
 									strokeLinejoin: "round",
-									children: /* @__PURE__ */ u("path", { d: "m15 18-6-6 6-6" })
+									children: /* @__PURE__ */ f("path", { d: "m15 18-6-6 6-6" })
 								})
 							}),
-							/* @__PURE__ */ d("span", {
+							/* @__PURE__ */ p("span", {
 								"aria-live": "polite",
 								className: "text-sm font-semibold text-foreground",
 								children: [
-									p[L],
+									m[L],
 									" ",
 									F
 								]
 							}),
-							/* @__PURE__ */ u("button", {
+							/* @__PURE__ */ f("button", {
 								type: "button",
-								onClick: G,
+								onClick: () => $(1),
+								disabled: !Q(new Date(F, L + 1, 1).getFullYear(), new Date(F, L + 1, 1).getMonth()),
 								"aria-label": "Next month",
-								className: e(t, "size-7"),
-								children: /* @__PURE__ */ u("svg", {
+								className: e(t, "size-11 disabled:cursor-not-allowed disabled:opacity-35 sm:size-7"),
+								children: /* @__PURE__ */ f("svg", {
 									width: "14",
 									height: "14",
 									viewBox: "0 0 24 24",
@@ -212,28 +322,32 @@ function v({ value: v, onChange: y, label: b, hint: x, error: S, placeholder: C
 									strokeWidth: "2.5",
 									strokeLinecap: "round",
 									strokeLinejoin: "round",
-									children: /* @__PURE__ */ u("path", { d: "m9 18 6-6-6-6" })
+									children: /* @__PURE__ */ f("path", { d: "m9 18 6-6-6-6" })
 								})
 							})
 						]
 					}),
-					/* @__PURE__ */ u("div", {
+					/* @__PURE__ */ f("div", {
 						className: "grid grid-cols-7 gap-0.5 mb-1",
-						children: f.map((e) => /* @__PURE__ */ u("div", {
+						children: ne.map((e) => /* @__PURE__ */ f("div", {
 							"aria-hidden": "true",
-							className: "text-center text-[10px] font-semibold text-muted-foreground py-1",
+							className: "py-1 text-center text-[10px] font-semibold text-muted-foreground",
 							children: e
 						}, e))
 					}),
-					/* @__PURE__ */ u("div", {
+					/* @__PURE__ */ f("div", {
 						className: "grid grid-cols-7 gap-0.5",
-						children: J.map((t, n) => {
-							if (!t) return /* @__PURE__ */ u("div", {}, `empty-${n}`);
-							let r = new Date(F, L, t), i = j ? _(r, j) : !1, a = _(r, M), o = E && r < E || D && r > D;
-							return /* @__PURE__ */ u("button", {
+						children: pe.map((t, n) => {
+							if (!t) return /* @__PURE__ */ f("div", {}, `empty-${n}`);
+							let r = new Date(F, L, t), i = j ? v(r, j) : !1, a = v(r, M), o = Y(r);
+							return /* @__PURE__ */ f("button", {
 								type: "button",
 								disabled: !!o,
-								onClick: () => H(r),
+								onClick: () => ce(r),
+								onFocus: () => B(r),
+								onKeyDown: (e) => ue(e, r),
+								"data-date": y(r),
+								tabIndex: v(r, z) ? 0 : -1,
 								"aria-label": r.toLocaleDateString(void 0, {
 									weekday: "long",
 									year: "numeric",
@@ -242,26 +356,41 @@ function v({ value: v, onChange: y, label: b, hint: x, error: S, placeholder: C
 								}),
 								"aria-pressed": i,
 								"aria-current": a ? "date" : void 0,
-								className: e("h-8 w-full rounded-md text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring/35", i ? "bg-primary text-primary-foreground font-medium" : a ? "border border-accent-500/40 text-accent-400 hover:bg-accent-500/10" : "text-slate-700 dark:text-slate-200 hover:bg-black/6 dark:hover:bg-white/6", o && "opacity-30 cursor-not-allowed"),
+								className: e("h-11 w-full rounded-md text-sm transition-colors focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-focus-ring/35 sm:h-8", i ? "bg-primary text-primary-foreground font-medium" : a ? "border border-accent-500/40 text-accent-400 hover:bg-accent-500/10" : "text-slate-700 dark:text-slate-200 hover:bg-black/6 dark:hover:bg-white/6", o && "opacity-30 cursor-not-allowed"),
 								children: t
 							}, t);
 						})
+					}),
+					/* @__PURE__ */ p("div", {
+						className: e("mt-3 flex items-center border-t border-border pt-3", Y(M) ? "justify-end" : "justify-between"),
+						children: [!Y(M) && /* @__PURE__ */ f("button", {
+							type: "button",
+							onClick: () => X(M),
+							className: "h-11 rounded-md px-3 text-xs font-medium text-accent-700 hover:bg-muted focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-focus-ring/35 sm:h-10 dark:text-accent-300",
+							children: "Today"
+						}), /* @__PURE__ */ f("button", {
+							type: "button",
+							onClick: () => Z(!0),
+							className: "h-11 rounded-md px-3 text-xs font-medium text-muted-foreground hover:bg-muted focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-focus-ring/35 sm:h-10",
+							children: "Cancel"
+						})]
 					})
 				]
-			}) }),
-			S && /* @__PURE__ */ u("p", {
-				id: V,
+			})] }) }),
+			C && /* @__PURE__ */ f("p", {
+				id: J,
 				"aria-live": "polite",
 				className: "text-xs leading-5 text-destructive",
-				children: S
+				children: C
 			}),
-			x && !S && /* @__PURE__ */ u("p", {
-				id: V,
+			S && !C && /* @__PURE__ */ f("p", {
+				id: J,
 				className: "text-xs leading-5 text-muted-foreground",
-				children: x
+				children: S
 			})
 		]
 	});
-}
+});
+b.displayName = "DatePicker";
 //#endregion
-export { v as DatePicker };
+export { b as DatePicker };

package/dist/components/description-list.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../cn-B6R3HKzx.cjs");let t=require("react"),n=require("react/jsx-runtime");var r={1:`grid-cols-1`,2:`grid-cols-1 sm:grid-cols-2`,3:`grid-cols-1 sm:grid-cols-2 lg:grid-cols-3`},i={compact:`gap-x-4 gap-y-3`,default:`gap-x-6 gap-y-5`,relaxed:`gap-x-8 gap-y-7`},a=(0,t.forwardRef)(({columns:t=1,density:a=`default`,className:o,...s},c)=>(0,n.jsx)(`dl`,{ref:c,className:e.t(`grid min-w-0`,r[t],i[a],o),...s}));a.displayName=`DescriptionList`;var o=(0,t.forwardRef)(({orientation:t=`stacked`,className:r,...i},a)=>(0,n.jsx)(`div`,{ref:a,className:e.t(`min-w-0`,t===`inline`?`flex flex-col gap-1 sm:flex-row sm:items-baseline sm:justify-between sm:gap-4`:`flex flex-col gap-1`,r),...i}));o.displayName=`DescriptionItem`;var s=(0,t.forwardRef)(({className:t,...r},i)=>(0,n.jsx)(`dt`,{ref:i,className:e.t(`text-xs font-medium text-muted-foreground`,t),...r}));s.displayName=`DescriptionTerm`;var c=(0,t.forwardRef)(({className:t,...r},i)=>(0,n.jsx)(`dd`,{ref:i,className:e.t(`min-w-0 break-words text-sm font-medium text-foreground`,t),...r}));c.displayName=`DescriptionDetails`,exports.DescriptionDetails=c,exports.DescriptionItem=o,exports.DescriptionList=a,exports.DescriptionTerm=s;

package/dist/components/description-list.d.ts

@@ -0,0 +1,14 @@
+import { HTMLAttributes } from 'react';
+export type DescriptionListColumns = 1 | 2 | 3;
+export type DescriptionListDensity = "compact" | "default" | "relaxed";
+export interface DescriptionListProps extends HTMLAttributes<HTMLDListElement> {
+    columns?: DescriptionListColumns;
+    density?: DescriptionListDensity;
+}
+export declare const DescriptionList: import('react').ForwardRefExoticComponent<DescriptionListProps & import('react').RefAttributes<HTMLDListElement>>;
+export interface DescriptionItemProps extends HTMLAttributes<HTMLDivElement> {
+    orientation?: "stacked" | "inline";
+}
+export declare const DescriptionItem: import('react').ForwardRefExoticComponent<DescriptionItemProps & import('react').RefAttributes<HTMLDivElement>>;
+export declare const DescriptionTerm: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & import('react').RefAttributes<HTMLElement>>;
+export declare const DescriptionDetails: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & import('react').RefAttributes<HTMLElement>>;

package/dist/components/description-list.js

@@ -0,0 +1,38 @@
+import { t as e } from "../cn-BJyZJP-y.js";
+import { forwardRef as t } from "react";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/description-list.tsx
+var r = {
+	1: "grid-cols-1",
+	2: "grid-cols-1 sm:grid-cols-2",
+	3: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3"
+}, i = {
+	compact: "gap-x-4 gap-y-3",
+	default: "gap-x-6 gap-y-5",
+	relaxed: "gap-x-8 gap-y-7"
+}, a = t(({ columns: t = 1, density: a = "default", className: o, ...s }, c) => /* @__PURE__ */ n("dl", {
+	ref: c,
+	className: e("grid min-w-0", r[t], i[a], o),
+	...s
+}));
+a.displayName = "DescriptionList";
+var o = t(({ orientation: t = "stacked", className: r, ...i }, a) => /* @__PURE__ */ n("div", {
+	ref: a,
+	className: e("min-w-0", t === "inline" ? "flex flex-col gap-1 sm:flex-row sm:items-baseline sm:justify-between sm:gap-4" : "flex flex-col gap-1", r),
+	...i
+}));
+o.displayName = "DescriptionItem";
+var s = t(({ className: t, ...r }, i) => /* @__PURE__ */ n("dt", {
+	ref: i,
+	className: e("text-xs font-medium text-muted-foreground", t),
+	...r
+}));
+s.displayName = "DescriptionTerm";
+var c = t(({ className: t, ...r }, i) => /* @__PURE__ */ n("dd", {
+	ref: i,
+	className: e("min-w-0 break-words text-sm font-medium text-foreground", t),
+	...r
+}));
+c.displayName = "DescriptionDetails";
+//#endregion
+export { c as DescriptionDetails, o as DescriptionItem, a as DescriptionList, s as DescriptionTerm };

package/dist/components/divider.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../cn-B6R3HKzx.cjs");let t=require("react"),n=require("react/jsx-runtime");var r={solid:`border-solid`,dashed:`border-dashed`,dotted:`border-dotted`},i={none:`my-0`,sm:`my-2`,md:`my-4`,lg:`my-6`},a={none:`mx-0`,sm:`mx-2`,md:`mx-4`,lg:`mx-6`},o=(0,t.forwardRef)(({orientation:t=`horizontal`,variant:o=`solid`,spacing:s=`md`,label:c,decorative:l=!0,className:u,...d},f)=>{let p=t===`vertical`,m=e.t(`min-w-0 flex-1 border-border`,r[o],p?`w-0 border-l`:`h-0 border-t`);return(0,n.jsxs)(`div`,{ref:f,role:l?`presentation`:`separator`,"aria-orientation":l?void 0:t,className:e.t(`flex shrink-0 items-center`,p?`h-full min-h-4 self-stretch flex-col`:`w-full min-w-0 flex-row`,p?a[s]:i[s],u),...d,children:[(0,n.jsx)(`span`,{"aria-hidden":`true`,className:m}),c&&(0,n.jsx)(`span`,{className:e.t(`shrink-0 text-xs font-medium text-muted-foreground`,p?`my-2 [writing-mode:vertical-rl]`:`mx-3`),children:c}),c&&(0,n.jsx)(`span`,{"aria-hidden":`true`,className:m})]})});o.displayName=`Divider`,exports.Divider=o;

package/dist/components/divider.d.ts

@@ -0,0 +1,12 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export type DividerOrientation = "horizontal" | "vertical";
+export type DividerVariant = "solid" | "dashed" | "dotted";
+export type DividerSpacing = "none" | "sm" | "md" | "lg";
+export interface DividerProps extends HTMLAttributes<HTMLDivElement> {
+    orientation?: DividerOrientation;
+    variant?: DividerVariant;
+    spacing?: DividerSpacing;
+    label?: ReactNode;
+    decorative?: boolean;
+}
+export declare const Divider: import('react').ForwardRefExoticComponent<DividerProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/divider.js

@@ -0,0 +1,45 @@
+import { t as e } from "../cn-BJyZJP-y.js";
+import { forwardRef as t } from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/components/divider.tsx
+var i = {
+	solid: "border-solid",
+	dashed: "border-dashed",
+	dotted: "border-dotted"
+}, a = {
+	none: "my-0",
+	sm: "my-2",
+	md: "my-4",
+	lg: "my-6"
+}, o = {
+	none: "mx-0",
+	sm: "mx-2",
+	md: "mx-4",
+	lg: "mx-6"
+}, s = t(({ orientation: t = "horizontal", variant: s = "solid", spacing: c = "md", label: l, decorative: u = !0, className: d, ...f }, p) => {
+	let m = t === "vertical", h = e("min-w-0 flex-1 border-border", i[s], m ? "w-0 border-l" : "h-0 border-t");
+	return /* @__PURE__ */ r("div", {
+		ref: p,
+		role: u ? "presentation" : "separator",
+		"aria-orientation": u ? void 0 : t,
+		className: e("flex shrink-0 items-center", m ? "h-full min-h-4 self-stretch flex-col" : "w-full min-w-0 flex-row", m ? o[c] : a[c], d),
+		...f,
+		children: [
+			/* @__PURE__ */ n("span", {
+				"aria-hidden": "true",
+				className: h
+			}),
+			l && /* @__PURE__ */ n("span", {
+				className: e("shrink-0 text-xs font-medium text-muted-foreground", m ? "my-2 [writing-mode:vertical-rl]" : "mx-3"),
+				children: l
+			}),
+			l && /* @__PURE__ */ n("span", {
+				"aria-hidden": "true",
+				className: h
+			})
+		]
+	});
+});
+s.displayName = "Divider";
+//#endregion
+export { s as Divider };

package/dist/components/drawer.cjs

@@ -1 +1 @@
-"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../drawer-CTeBsYrO.cjs");exports.Drawer=e.t;
+"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../cn-B6R3HKzx.cjs"),t=require("../component-styles-DY4wigiq.cjs"),n=require("../use-event-callback-Du9_9eAi.cjs"),r=require("../motion-B2shivEB.cjs"),i=require("../use-focus-trap-CPLT49gN.cjs"),a=require("../icons-Dfetr1L2.cjs");let o=require("framer-motion"),s=require("react"),c=require("react/jsx-runtime"),l=require("react-dom");function u({open:u,onClose:d,position:f=`left`,title:p,children:m,width:h=320,className:g,overlayClassName:_,panelClassName:v,headerClassName:y,titleClassName:b,closeButtonClassName:x,contentClassName:S,handleClassName:C,unstyled:w=!1,ariaLabel:T=`Drawer`,closeAriaLabel:E=`Close drawer`,closeOnEscape:D=!0,closeOnOverlayClick:O=!0}){let k=n.t(d),A=(0,s.useRef)(null),j=(0,s.useId)(),{previouslyFocusedRef:M,restoreNow:N}=i.n(u);i.t(A,{active:u,onEscape:k,closeOnEscape:D});let P=N;if(typeof document>`u`)return null;if(w&&u)return(0,l.createPortal)((0,c.jsx)(`div`,{ref:A,tabIndex:-1,role:`dialog`,"aria-modal":`true`,"aria-label":typeof p==`string`?p:T,className:e.t(g,v),children:m}),document.body);if(f===`bottom`)return(0,l.createPortal)((0,c.jsx)(o.AnimatePresence,{onExitComplete:P,children:u&&(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(o.motion.div,{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:r.n.overlay,className:e.t(`fixed inset-0 z-[100] bg-overlay`,_),onClick:O?k:void 0},`drawer-backdrop`),(0,c.jsxs)(o.motion.div,{ref:A,tabIndex:-1,initial:{y:`100%`},animate:{y:0},exit:{y:`100%`},transition:r.n.panelEnter,role:`dialog`,"aria-modal":`true`,"aria-labelledby":p?j:void 0,"aria-label":p?void 0:T,className:e.t(`fixed bottom-0 left-0 right-0 z-[101] flex max-h-[80dvh] flex-col rounded-t-[var(--radius-xl)] border-t border-border bg-surface-raised shadow-overlay`,v,g),children:[(0,c.jsx)(`div`,{className:`flex justify-center pb-1 pt-3 shrink-0`,"aria-hidden":`true`,children:(0,c.jsx)(`div`,{className:e.t(`h-1 w-9 rounded-full bg-border-strong`,C)})}),p&&(0,c.jsxs)(`div`,{className:e.t(`flex items-center justify-between border-b border-border px-5 py-3 shrink-0`,y),children:[(0,c.jsx)(`h2`,{id:j,className:e.t(`text-sm font-semibold text-foreground`,b),children:p}),(0,c.jsx)(`button`,{type:`button`,onClick:k,className:e.t(t.c,x),"aria-label":E,children:(0,c.jsx)(a.t,{size:14,"aria-hidden":`true`})})]}),(0,c.jsx)(`div`,{className:e.t(`flex-1 overflow-y-auto pb-safe-bottom`,S),children:m})]},`drawer-panel`)]})}),document.body);let F=f===`left`?`-100%`:`100%`;return(0,l.createPortal)((0,c.jsx)(o.AnimatePresence,{onExitComplete:P,children:u&&(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(o.motion.div,{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:r.n.overlay,className:e.t(`fixed inset-0 z-[100] bg-overlay`,_),onClick:O?k:void 0},`drawer-backdrop`),(0,c.jsxs)(o.motion.div,{ref:A,tabIndex:-1,initial:{x:F},animate:{x:0},exit:{x:F},transition:r.n.panelEnter,role:`dialog`,"aria-modal":`true`,"aria-labelledby":p?j:void 0,"aria-label":p?void 0:T,className:e.t(`fixed top-0 bottom-0 z-[101] flex max-w-[100vw] flex-col bg-surface-raised shadow-overlay`,f===`left`?`left-0 border-r border-border`:`right-0 border-l border-border`,v,g),style:{width:h},children:[p&&(0,c.jsxs)(`div`,{className:e.t(`flex h-14 items-center justify-between gap-3 border-b border-border px-5 shrink-0`,y),children:[(0,c.jsx)(`h2`,{id:j,className:e.t(`min-w-0 truncate text-sm font-semibold text-foreground`,b),children:p}),(0,c.jsx)(`button`,{type:`button`,onClick:k,className:e.t(t.c,x),"aria-label":E,children:(0,c.jsx)(a.t,{size:14,"aria-hidden":`true`})})]}),(0,c.jsx)(`div`,{className:e.t(`flex-1 overflow-y-auto`,S),children:m})]},`drawer-panel`)]})}),document.body)}exports.Drawer=u;

package/dist/components/drawer.d.ts

@@ -9,10 +9,15 @@ export interface DrawerProps {
     className?: string;
     overlayClassName?: string;
     panelClassName?: string;
+    headerClassName?: string;
+    titleClassName?: string;
+    closeButtonClassName?: string;
+    contentClassName?: string;
+    handleClassName?: string;
     unstyled?: boolean;
     ariaLabel?: string;
     closeAriaLabel?: string;
     closeOnEscape?: boolean;
     closeOnOverlayClick?: boolean;
 }
-export declare function Drawer({ open, onClose, position, title, children, width, className, overlayClassName, panelClassName, unstyled, ariaLabel, closeAriaLabel, closeOnEscape, closeOnOverlayClick, }: DrawerProps): import('react').ReactPortal | null;
+export declare function Drawer({ open, onClose, position, title, children, width, className, overlayClassName, panelClassName, headerClassName, titleClassName, closeButtonClassName, contentClassName, handleClassName, unstyled, ariaLabel, closeAriaLabel, closeOnEscape, closeOnOverlayClick, }: DrawerProps): import('react').ReactPortal | null;