@bzync/rui 0.0.3

package/dist/components/link.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../cn-BdjraxxU.cjs");let t=require("react/jsx-runtime");var n={default:`text-accent-400 hover:text-accent-300`,muted:`text-slate-500 hover:text-slate-700 dark:hover:text-slate-200`,underline:`text-slate-700 dark:text-slate-200 underline underline-offset-2 decoration-black/25 dark:decoration-white/25 hover:decoration-black/50 dark:hover:decoration-white/50`};function r({children:r,className:i,external:a,icon:o,variant:s=`default`,externalRel:c,...l}){return(0,t.jsxs)(`a`,{target:a?`_blank`:void 0,rel:a?c??`noopener noreferrer`:void 0,referrerPolicy:a?`strict-origin-when-cross-origin`:void 0,className:e.t(`inline-flex items-center gap-1 transition-colors cursor-pointer`,n[s],i),...l,children:[r,o&&(0,t.jsx)(`span`,{className:`shrink-0`,"aria-hidden":`true`,children:o}),a&&!o&&(0,t.jsxs)(`svg`,{"aria-hidden":`true`,width:`11`,height:`11`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,strokeWidth:`2`,strokeLinecap:`round`,strokeLinejoin:`round`,children:[(0,t.jsx)(`path`,{d:`M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6`}),(0,t.jsx)(`polyline`,{points:`15 3 21 3 21 9`}),(0,t.jsx)(`line`,{x1:`10`,y1:`14`,x2:`21`,y2:`3`})]})]})}exports.Link=r;

package/dist/components/link.d.ts

@@ -0,0 +1,9 @@
+import { AnchorHTMLAttributes, ReactNode } from 'react';
+export interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+    external?: boolean;
+    icon?: ReactNode;
+    variant?: "default" | "muted" | "underline";
+    /** Override rel when external; defaults to "noopener noreferrer" */
+    externalRel?: string;
+}
+export declare function Link({ children, className, external, icon, variant, externalRel, ...props }: LinkProps): import("react").JSX.Element;

package/dist/components/link.js

@@ -0,0 +1,48 @@
+import { t as e } from "../cn-DpgY2leY.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/components/link.tsx
+var r = {
+	default: "text-accent-400 hover:text-accent-300",
+	muted: "text-slate-500 hover:text-slate-700 dark:hover:text-slate-200",
+	underline: "text-slate-700 dark:text-slate-200 underline underline-offset-2 decoration-black/25 dark:decoration-white/25 hover:decoration-black/50 dark:hover:decoration-white/50"
+};
+function i({ children: i, className: a, external: o, icon: s, variant: c = "default", externalRel: l, ...u }) {
+	return /* @__PURE__ */ n("a", {
+		target: o ? "_blank" : void 0,
+		rel: o ? l ?? "noopener noreferrer" : void 0,
+		referrerPolicy: o ? "strict-origin-when-cross-origin" : void 0,
+		className: e("inline-flex items-center gap-1 transition-colors cursor-pointer", r[c], a),
+		...u,
+		children: [
+			i,
+			s && /* @__PURE__ */ t("span", {
+				className: "shrink-0",
+				"aria-hidden": "true",
+				children: s
+			}),
+			o && !s && /* @__PURE__ */ n("svg", {
+				"aria-hidden": "true",
+				width: "11",
+				height: "11",
+				viewBox: "0 0 24 24",
+				fill: "none",
+				stroke: "currentColor",
+				strokeWidth: "2",
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				children: [
+					/* @__PURE__ */ t("path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" }),
+					/* @__PURE__ */ t("polyline", { points: "15 3 21 3 21 9" }),
+					/* @__PURE__ */ t("line", {
+						x1: "10",
+						y1: "14",
+						x2: "21",
+						y2: "3"
+					})
+				]
+			})
+		]
+	});
+}
+//#endregion
+export { i as Link };

package/dist/components/list.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../cn-BdjraxxU.cjs");let t=require("react/jsx-runtime");function n({divided:n=!0,className:r,children:i,...a}){return(0,t.jsx)(`ul`,{className:e.t(n&&`divide-y divide-black/8 dark:divide-white/8`,r),...a,children:i})}function r({icon:n,trailing:r,description:i,href:a,active:o,className:s,children:c,onClick:l,...u}){let d=(0,t.jsxs)(`div`,{className:e.t(`flex items-center gap-3 px-3 py-2.5 transition-colors rounded-lg`,(!!a||!!l)&&`cursor-pointer hover:bg-black/4 dark:hover:bg-white/4`,o&&`bg-accent-500/8 text-accent-400`),children:[n&&(0,t.jsx)(`span`,{className:`shrink-0 text-slate-500 dark:text-slate-400`,children:n}),(0,t.jsxs)(`div`,{className:`flex-1 min-w-0`,children:[(0,t.jsx)(`p`,{className:e.t(`text-sm font-medium truncate`,o?`text-accent-400`:`text-slate-700 dark:text-slate-200`),children:c}),i&&(0,t.jsx)(`p`,{className:`text-xs text-slate-500 mt-0.5 truncate`,children:i})]}),r&&(0,t.jsx)(`span`,{className:`shrink-0 text-slate-500`,children:r})]});return(0,t.jsx)(`li`,{className:e.t(s),onClick:l,...u,children:a?(0,t.jsx)(`a`,{href:a,children:d}):d})}exports.List=n,exports.ListItem=r;

package/dist/components/list.d.ts

@@ -0,0 +1,13 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export interface ListProps extends HTMLAttributes<HTMLUListElement> {
+    divided?: boolean;
+}
+export declare function List({ divided, className, children, ...props }: ListProps): import("react").JSX.Element;
+export interface ListItemProps extends HTMLAttributes<HTMLLIElement> {
+    icon?: ReactNode;
+    trailing?: ReactNode;
+    description?: string;
+    href?: string;
+    active?: boolean;
+}
+export declare function ListItem({ icon, trailing, description, href, active, className, children, onClick, ...props }: ListItemProps): import("react").JSX.Element;

package/dist/components/list.js

@@ -0,0 +1,46 @@
+import { t as e } from "../cn-DpgY2leY.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/components/list.tsx
+function r({ divided: n = !0, className: r, children: i, ...a }) {
+	return /* @__PURE__ */ t("ul", {
+		className: e(n && "divide-y divide-black/8 dark:divide-white/8", r),
+		...a,
+		children: i
+	});
+}
+function i({ icon: r, trailing: i, description: a, href: o, active: s, className: c, children: l, onClick: u, ...d }) {
+	let f = /* @__PURE__ */ n("div", {
+		className: e("flex items-center gap-3 px-3 py-2.5 transition-colors rounded-lg", (!!o || !!u) && "cursor-pointer hover:bg-black/4 dark:hover:bg-white/4", s && "bg-accent-500/8 text-accent-400"),
+		children: [
+			r && /* @__PURE__ */ t("span", {
+				className: "shrink-0 text-slate-500 dark:text-slate-400",
+				children: r
+			}),
+			/* @__PURE__ */ n("div", {
+				className: "flex-1 min-w-0",
+				children: [/* @__PURE__ */ t("p", {
+					className: e("text-sm font-medium truncate", s ? "text-accent-400" : "text-slate-700 dark:text-slate-200"),
+					children: l
+				}), a && /* @__PURE__ */ t("p", {
+					className: "text-xs text-slate-500 mt-0.5 truncate",
+					children: a
+				})]
+			}),
+			i && /* @__PURE__ */ t("span", {
+				className: "shrink-0 text-slate-500",
+				children: i
+			})
+		]
+	});
+	return /* @__PURE__ */ t("li", {
+		className: e(c),
+		onClick: u,
+		...d,
+		children: o ? /* @__PURE__ */ t("a", {
+			href: o,
+			children: f
+		}) : f
+	});
+}
+//#endregion
+export { r as List, i as ListItem };

package/dist/components/modal.cjs

@@ -0,0 +1 @@
+"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../cn-BdjraxxU.cjs"),t=require("../component-styles-TkZ7v6Ef.cjs"),n=require("../use-event-callback-Du9_9eAi.cjs"),r=require("../focus-DmG6Ge7X.cjs");let i=require("framer-motion"),a=require("react"),o=require("react/jsx-runtime");var s={sm:`max-w-[380px]`,md:`max-w-[480px]`,lg:`max-w-[560px]`,xl:`max-w-[640px]`,"2xl":`max-w-[720px]`,"7xl":`max-w-3xl`,full:`max-w-[calc(100vw-2rem)]`};function c({open:c,onClose:l,children:u,className:d,overlayClassName:f,panelClassName:p,size:m=`md`,title:h,description:g,icon:_,showCloseButton:v=!0,closeAriaLabel:y=`Close dialog`,scrollable:b=!1,unstyled:x=!1,ariaLabel:S=`Dialog`,closeOnEscape:C=!0,closeOnOverlayClick:w=!0}){let T=(0,a.useRef)(null),E=(0,a.useRef)(null),D=(0,a.useRef)(c),O=(0,a.useId)(),k=(0,a.useId)(),A=n.t(l);return c&&!D.current&&typeof document<`u`&&document.activeElement instanceof HTMLElement&&(E.current=document.activeElement),D.current=c,(0,a.useEffect)(()=>{if(c)return;let e=e=>{e.target instanceof HTMLElement&&(E.current=e.target)};return!E.current&&document.activeElement instanceof HTMLElement&&(E.current=document.activeElement),document.addEventListener(`focusin`,e),()=>document.removeEventListener(`focusin`,e)},[c]),(0,a.useEffect)(()=>{if(!c)return;!E.current&&document.activeElement instanceof HTMLElement&&(E.current=document.activeElement);let e=document.body.style.overflow,t=e=>{if(e.key===`Escape`&&C){e.preventDefault(),A();return}if(e.key!==`Tab`||!T.current)return;let t=r.t(T.current);if(t.length===0){e.preventDefault(),T.current.focus();return}let n=t[0],i=t[t.length-1];e.shiftKey&&document.activeElement===n?(e.preventDefault(),i.focus()):!e.shiftKey&&document.activeElement===i&&(e.preventDefault(),n.focus())};document.addEventListener(`keydown`,t),document.body.style.overflow=`hidden`;let n=()=>{(T.current?.querySelector(`[data-autofocus]`)??T.current?.querySelector(`[data-modal-content] a[href],[data-modal-content] button:not([disabled]),[data-modal-content] input:not([disabled]),[data-modal-content] select:not([disabled]),[data-modal-content] textarea:not([disabled]),[data-modal-content] [tabindex]:not([tabindex="-1"])`)??T.current?.querySelector(`a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])`)??T.current)?.focus()};n();let i=window.setTimeout(n,0);return()=>{window.clearTimeout(i),document.removeEventListener(`keydown`,t),document.body.style.overflow=e}},[C,c,A]),(0,a.useEffect)(()=>{if(c||!E.current)return;let e=E.current,t=window.setTimeout(()=>e.focus(),240);return()=>window.clearTimeout(t)},[c]),x?c?(0,o.jsx)(`div`,{ref:T,role:`dialog`,"aria-modal":`true`,className:e.t(d,p),children:u}):null:(0,o.jsx)(i.AnimatePresence,{onExitComplete:()=>{let e=E.current;E.current=null,window.setTimeout(()=>e?.focus(),0)},children:c&&(0,o.jsxs)(`div`,{className:`fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-6`,children:[(0,o.jsx)(i.motion.div,{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{duration:.2},className:e.t(`absolute inset-0 bg-overlay`,f),onClick:w?A:void 0}),(0,o.jsxs)(i.motion.div,{ref:T,initial:{opacity:0,scale:.98,y:10},animate:{opacity:1,scale:1,y:0},exit:{opacity:0,scale:.98,y:10},transition:{duration:.22,ease:[.16,1,.3,1]},role:`dialog`,"aria-modal":`true`,"aria-labelledby":h?O:void 0,"aria-describedby":g?k:void 0,"aria-label":h?void 0:S,tabIndex:-1,className:e.t(`relative w-full overflow-hidden flex flex-col`,`rounded-[var(--radius-xl)] border border-border bg-surface-raised shadow-overlay`,`max-h-[min(90dvh,720px)]`,s[m],p,d),children:[h&&(0,o.jsxs)(`div`,{className:`flex items-start justify-between gap-4 border-b border-border px-5 pb-3 pt-4 sm:px-6 shrink-0`,children:[(0,o.jsxs)(`div`,{className:`flex gap-3.5 min-w-0 flex-1`,children:[_&&(0,o.jsx)(`div`,{className:`mt-0.5 shrink-0 text-muted-foreground [&_svg]:size-5`,"aria-hidden":`true`,children:_}),(0,o.jsxs)(`div`,{className:`min-w-0 flex-1 pt-0.5`,children:[(0,o.jsx)(`h2`,{id:O,className:`text-base font-semibold leading-6 text-foreground`,children:h}),g&&(0,o.jsx)(`p`,{id:k,className:`mt-1 text-sm leading-5 text-muted-foreground`,children:g})]})]}),v&&(0,o.jsx)(`button`,{type:`button`,"data-modal-close":!0,"aria-label":y,onClick:A,className:t.c,children:(0,o.jsx)(`svg`,{width:`14`,height:`14`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,strokeWidth:`2`,strokeLinecap:`round`,strokeLinejoin:`round`,children:(0,o.jsx)(`path`,{d:`M18 6 6 18M6 6l12 12`})})})]}),!h&&v&&(0,o.jsx)(`button`,{type:`button`,"data-modal-close":!0,"aria-label":y,onClick:A,className:e.t(`absolute right-4 top-4 z-10`,t.c),children:(0,o.jsx)(`svg`,{width:`14`,height:`14`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,strokeWidth:`2`,strokeLinecap:`round`,strokeLinejoin:`round`,children:(0,o.jsx)(`path`,{d:`M18 6 6 18M6 6l12 12`})})}),(0,o.jsx)(`div`,{"data-modal-content":!0,className:e.t(`px-5 py-4 sm:px-6 flex-1`,b?`overflow-y-auto overscroll-contain`:`overflow-y-auto`),children:u})]})]})})}function l({className:t,children:n,...r}){return(0,o.jsx)(`div`,{className:e.t(`px-5 pt-4 pb-3 sm:px-6 border-b border-border shrink-0`,t),...r,children:n})}function u({as:t=`h2`,className:n,children:r,...i}){return(0,o.jsx)(t,{className:e.t(`text-base font-semibold leading-6 text-foreground`,n),...i,children:r})}function d({className:t,children:n,...r}){return(0,o.jsx)(`p`,{className:e.t(`mt-1 text-sm leading-5 text-muted-foreground`,t),...r,children:n})}function f({className:t,scrollable:n=!1,children:r,...i}){return(0,o.jsx)(`div`,{"data-modal-content":!0,className:e.t(`px-5 py-4 sm:px-6`,n&&`overflow-y-auto flex-1 overscroll-contain`,t),...i,children:r})}function p({className:t,children:n,...r}){return(0,o.jsx)(`div`,{className:e.t(`flex flex-wrap items-center justify-end gap-2 border-t border-border px-5 pb-4 pt-3 sm:px-6 max-sm:flex-col-reverse max-sm:items-stretch`,t),...r,children:n})}exports.Modal=c,exports.ModalBody=f,exports.ModalDescription=d,exports.ModalFooter=p,exports.ModalHeader=l,exports.ModalTitle=u;

package/dist/components/modal.d.ts

@@ -0,0 +1,31 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export interface ModalProps {
+    open: boolean;
+    onClose: () => void;
+    children: ReactNode;
+    className?: string;
+    overlayClassName?: string;
+    panelClassName?: string;
+    size?: "sm" | "md" | "lg" | "xl" | "2xl" | "7xl" | "full";
+    title?: string;
+    description?: string;
+    icon?: ReactNode;
+    showCloseButton?: boolean;
+    closeAriaLabel?: string;
+    scrollable?: boolean;
+    unstyled?: boolean;
+    ariaLabel?: string;
+    closeOnEscape?: boolean;
+    closeOnOverlayClick?: boolean;
+}
+export declare function Modal({ open, onClose, children, className, overlayClassName, panelClassName, size, title, description, icon, showCloseButton, closeAriaLabel, scrollable, unstyled, ariaLabel, closeOnEscape, closeOnOverlayClick, }: ModalProps): import("react").JSX.Element | null;
+export declare function ModalHeader({ className, children, ...props }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
+export declare function ModalTitle({ as: Tag, className, children, ...props }: HTMLAttributes<HTMLHeadingElement> & {
+    as?: "h1" | "h2" | "h3" | "div";
+}): import("react").JSX.Element;
+export declare function ModalDescription({ className, children, ...props }: HTMLAttributes<HTMLParagraphElement>): import("react").JSX.Element;
+export interface ModalBodyProps extends HTMLAttributes<HTMLDivElement> {
+    scrollable?: boolean;
+}
+export declare function ModalBody({ className, scrollable, children, ...props }: ModalBodyProps): import("react").JSX.Element;
+export declare function ModalFooter({ className, children, ...props }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;

package/dist/components/modal.js

@@ -0,0 +1,219 @@
+"use client";
+import { t as e } from "../cn-DpgY2leY.js";
+import { c as t } from "../component-styles-Ce56hn9T.js";
+import { t as n } from "../use-event-callback-DGkfO_uu.js";
+import { t as r } from "../focus-Dk1YWVPN.js";
+import { AnimatePresence as i, motion as a } from "framer-motion";
+import { useEffect as o, useId as s, useRef as c } from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+//#region src/components/modal.tsx
+var d = {
+	sm: "max-w-[380px]",
+	md: "max-w-[480px]",
+	lg: "max-w-[560px]",
+	xl: "max-w-[640px]",
+	"2xl": "max-w-[720px]",
+	"7xl": "max-w-3xl",
+	full: "max-w-[calc(100vw-2rem)]"
+};
+function f({ open: f, onClose: p, children: m, className: h, overlayClassName: g, panelClassName: _, size: v = "md", title: y, description: b, icon: x, showCloseButton: S = !0, closeAriaLabel: C = "Close dialog", scrollable: w = !1, unstyled: T = !1, ariaLabel: E = "Dialog", closeOnEscape: D = !0, closeOnOverlayClick: O = !0 }) {
+	let k = c(null), A = c(null), j = c(f), M = s(), N = s(), P = n(p);
+	return f && !j.current && typeof document < "u" && document.activeElement instanceof HTMLElement && (A.current = document.activeElement), j.current = f, o(() => {
+		if (f) return;
+		let e = (e) => {
+			e.target instanceof HTMLElement && (A.current = e.target);
+		};
+		return !A.current && document.activeElement instanceof HTMLElement && (A.current = document.activeElement), document.addEventListener("focusin", e), () => document.removeEventListener("focusin", e);
+	}, [f]), o(() => {
+		if (!f) return;
+		!A.current && document.activeElement instanceof HTMLElement && (A.current = document.activeElement);
+		let e = document.body.style.overflow, t = (e) => {
+			if (e.key === "Escape" && D) {
+				e.preventDefault(), P();
+				return;
+			}
+			if (e.key !== "Tab" || !k.current) return;
+			let t = r(k.current);
+			if (t.length === 0) {
+				e.preventDefault(), k.current.focus();
+				return;
+			}
+			let n = t[0], i = t[t.length - 1];
+			e.shiftKey && document.activeElement === n ? (e.preventDefault(), i.focus()) : !e.shiftKey && document.activeElement === i && (e.preventDefault(), n.focus());
+		};
+		document.addEventListener("keydown", t), document.body.style.overflow = "hidden";
+		let n = () => {
+			(k.current?.querySelector("[data-autofocus]") ?? k.current?.querySelector("[data-modal-content] a[href],[data-modal-content] button:not([disabled]),[data-modal-content] input:not([disabled]),[data-modal-content] select:not([disabled]),[data-modal-content] textarea:not([disabled]),[data-modal-content] [tabindex]:not([tabindex=\"-1\"])") ?? k.current?.querySelector("a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex=\"-1\"])") ?? k.current)?.focus();
+		};
+		n();
+		let i = window.setTimeout(n, 0);
+		return () => {
+			window.clearTimeout(i), document.removeEventListener("keydown", t), document.body.style.overflow = e;
+		};
+	}, [
+		D,
+		f,
+		P
+	]), o(() => {
+		if (f || !A.current) return;
+		let e = A.current, t = window.setTimeout(() => e.focus(), 240);
+		return () => window.clearTimeout(t);
+	}, [f]), T ? f ? /* @__PURE__ */ l("div", {
+		ref: k,
+		role: "dialog",
+		"aria-modal": "true",
+		className: e(h, _),
+		children: m
+	}) : null : /* @__PURE__ */ l(i, {
+		onExitComplete: () => {
+			let e = A.current;
+			A.current = null, window.setTimeout(() => e?.focus(), 0);
+		},
+		children: f && /* @__PURE__ */ u("div", {
+			className: "fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-6",
+			children: [/* @__PURE__ */ l(a.div, {
+				initial: { opacity: 0 },
+				animate: { opacity: 1 },
+				exit: { opacity: 0 },
+				transition: { duration: .2 },
+				className: e("absolute inset-0 bg-overlay", g),
+				onClick: O ? P : void 0
+			}), /* @__PURE__ */ u(a.div, {
+				ref: k,
+				initial: {
+					opacity: 0,
+					scale: .98,
+					y: 10
+				},
+				animate: {
+					opacity: 1,
+					scale: 1,
+					y: 0
+				},
+				exit: {
+					opacity: 0,
+					scale: .98,
+					y: 10
+				},
+				transition: {
+					duration: .22,
+					ease: [
+						.16,
+						1,
+						.3,
+						1
+					]
+				},
+				role: "dialog",
+				"aria-modal": "true",
+				"aria-labelledby": y ? M : void 0,
+				"aria-describedby": b ? N : void 0,
+				"aria-label": y ? void 0 : E,
+				tabIndex: -1,
+				className: e("relative w-full overflow-hidden flex flex-col", "rounded-[var(--radius-xl)] border border-border bg-surface-raised shadow-overlay", "max-h-[min(90dvh,720px)]", d[v], _, h),
+				children: [
+					y && /* @__PURE__ */ u("div", {
+						className: "flex items-start justify-between gap-4 border-b border-border px-5 pb-3 pt-4 sm:px-6 shrink-0",
+						children: [/* @__PURE__ */ u("div", {
+							className: "flex gap-3.5 min-w-0 flex-1",
+							children: [x && /* @__PURE__ */ l("div", {
+								className: "mt-0.5 shrink-0 text-muted-foreground [&_svg]:size-5",
+								"aria-hidden": "true",
+								children: x
+							}), /* @__PURE__ */ u("div", {
+								className: "min-w-0 flex-1 pt-0.5",
+								children: [/* @__PURE__ */ l("h2", {
+									id: M,
+									className: "text-base font-semibold leading-6 text-foreground",
+									children: y
+								}), b && /* @__PURE__ */ l("p", {
+									id: N,
+									className: "mt-1 text-sm leading-5 text-muted-foreground",
+									children: b
+								})]
+							})]
+						}), S && /* @__PURE__ */ l("button", {
+							type: "button",
+							"data-modal-close": !0,
+							"aria-label": C,
+							onClick: P,
+							className: t,
+							children: /* @__PURE__ */ l("svg", {
+								width: "14",
+								height: "14",
+								viewBox: "0 0 24 24",
+								fill: "none",
+								stroke: "currentColor",
+								strokeWidth: "2",
+								strokeLinecap: "round",
+								strokeLinejoin: "round",
+								children: /* @__PURE__ */ l("path", { d: "M18 6 6 18M6 6l12 12" })
+							})
+						})]
+					}),
+					!y && S && /* @__PURE__ */ l("button", {
+						type: "button",
+						"data-modal-close": !0,
+						"aria-label": C,
+						onClick: P,
+						className: e("absolute right-4 top-4 z-10", t),
+						children: /* @__PURE__ */ l("svg", {
+							width: "14",
+							height: "14",
+							viewBox: "0 0 24 24",
+							fill: "none",
+							stroke: "currentColor",
+							strokeWidth: "2",
+							strokeLinecap: "round",
+							strokeLinejoin: "round",
+							children: /* @__PURE__ */ l("path", { d: "M18 6 6 18M6 6l12 12" })
+						})
+					}),
+					/* @__PURE__ */ l("div", {
+						"data-modal-content": !0,
+						className: e("px-5 py-4 sm:px-6 flex-1", w ? "overflow-y-auto overscroll-contain" : "overflow-y-auto"),
+						children: m
+					})
+				]
+			})]
+		})
+	});
+}
+function p({ className: t, children: n, ...r }) {
+	return /* @__PURE__ */ l("div", {
+		className: e("px-5 pt-4 pb-3 sm:px-6 border-b border-border shrink-0", t),
+		...r,
+		children: n
+	});
+}
+function m({ as: t = "h2", className: n, children: r, ...i }) {
+	return /* @__PURE__ */ l(t, {
+		className: e("text-base font-semibold leading-6 text-foreground", n),
+		...i,
+		children: r
+	});
+}
+function h({ className: t, children: n, ...r }) {
+	return /* @__PURE__ */ l("p", {
+		className: e("mt-1 text-sm leading-5 text-muted-foreground", t),
+		...r,
+		children: n
+	});
+}
+function g({ className: t, scrollable: n = !1, children: r, ...i }) {
+	return /* @__PURE__ */ l("div", {
+		"data-modal-content": !0,
+		className: e("px-5 py-4 sm:px-6", n && "overflow-y-auto flex-1 overscroll-contain", t),
+		...i,
+		children: r
+	});
+}
+function _({ className: t, children: n, ...r }) {
+	return /* @__PURE__ */ l("div", {
+		className: e("flex flex-wrap items-center justify-end gap-2 border-t border-border px-5 pb-4 pt-3 sm:px-6 max-sm:flex-col-reverse max-sm:items-stretch", t),
+		...r,
+		children: n
+	});
+}
+//#endregion
+export { f as Modal, g as ModalBody, h as ModalDescription, _ as ModalFooter, p as ModalHeader, m as ModalTitle };

package/dist/components/navigation.cjs

@@ -0,0 +1 @@
+"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../cn-BdjraxxU.cjs"),t=require("../component-styles-TkZ7v6Ef.cjs");let n=require("react/jsx-runtime");function r({id:r,label:i,href:a,icon:o,badge:s,disabled:c,active:l,compact:u,onSelect:d,className:f}){let p=(0,n.jsxs)(n.Fragment,{children:[o&&(0,n.jsx)(`span`,{className:`shrink-0`,"aria-hidden":`true`,children:o}),(0,n.jsx)(`span`,{className:e.t(`truncate`,u&&`text-[11px]`),children:i}),s&&(0,n.jsx)(`span`,{className:`ml-auto shrink-0`,children:s})]}),m=e.t(`group relative inline-flex items-center justify-center gap-2 rounded-[var(--radius-md)] font-medium transition-colors`,t.s,u?`min-h-11 flex-col px-2 py-1.5`:`h-9 px-3 text-sm`,l?`bg-accent-50 text-accent-700 dark:bg-accent-500/12 dark:text-accent-300`:`text-muted-foreground hover:bg-muted hover:text-foreground`,c&&`pointer-events-none opacity-40`,f);return a?(0,n.jsx)(`a`,{href:a,className:m,"aria-current":l?`page`:void 0,"aria-disabled":c||void 0,onClick:e=>{d&&(e.preventDefault(),d(r))},children:p}):(0,n.jsx)(`button`,{type:`button`,className:m,"aria-current":l?`page`:void 0,disabled:c,onClick:()=>d?.(r),children:p})}function i({items:t,activeId:i,onSelect:a,ariaLabel:o=`Primary navigation`,className:s,children:c,...l}){return(0,n.jsxs)(`nav`,{"aria-label":o,className:e.t(`flex min-h-14 items-center gap-1 border border-border bg-surface px-3`,s),...l,children:[c,(0,n.jsx)(`div`,{className:`ml-auto flex items-center gap-1 overflow-x-auto`,children:t.map(e=>(0,n.jsx)(r,{...e,active:i===e.id,onSelect:a},e.id))})]})}function a({className:t,children:r,...i}){return(0,n.jsx)(`header`,{className:e.t(`flex min-h-14 items-center gap-3 border-b border-border bg-bg/95 px-4 backdrop-blur-sm`,t),...i,children:r})}function o({as:t=`h2`,className:r,children:i,...a}){return(0,n.jsx)(t,{className:e.t(`min-w-0 flex-1 truncate text-sm font-semibold text-foreground`,r),...a,children:i})}function s({items:t,activeId:i,onSelect:a,ariaLabel:o=`Sidebar navigation`,header:s,footer:c,className:l,...u}){return(0,n.jsxs)(`aside`,{className:e.t(`flex w-60 flex-col border border-border bg-surface`,l),...u,children:[s&&(0,n.jsx)(`div`,{className:`border-b border-border p-4`,children:s}),(0,n.jsx)(`nav`,{"aria-label":o,className:`flex flex-1 flex-col gap-1 p-2`,children:t.map(e=>(0,n.jsx)(r,{...e,active:i===e.id,onSelect:a,className:`w-full justify-start`},e.id))}),c&&(0,n.jsx)(`div`,{className:`border-t border-border p-3`,children:c})]})}function c({items:t,activeId:i,onSelect:a,ariaLabel:o=`Mobile navigation`,className:s,...c}){return(0,n.jsx)(`nav`,{"aria-label":o,className:e.t(`grid min-h-16 border border-border bg-surface/95 px-1 pb-safe-bottom shadow-floating backdrop-blur-sm`,s),style:{gridTemplateColumns:`repeat(${t.length}, minmax(0, 1fr))`},...c,children:t.map(e=>(0,n.jsx)(r,{...e,compact:!0,active:i===e.id,onSelect:a,className:`rounded-none`},e.id))})}function l({label:r,className:i,children:a,type:o=`button`,...s}){return(0,n.jsx)(`button`,{type:o,"aria-label":r,className:e.t(t.c,`size-9`,i),...s,children:a})}function u({mark:r,className:i,children:a,...o}){return(0,n.jsxs)(`a`,{className:e.t(`inline-flex shrink-0 items-center gap-2 text-sm font-semibold text-foreground`,t.s,i),...o,children:[r,a]})}exports.BottomBar=c,exports.BrandLink=u,exports.IconButton=l,exports.Navbar=i,exports.NavigationLink=r,exports.Sidebar=s,exports.Topbar=a,exports.TopbarTitle=o;

package/dist/components/navigation.d.ts

@@ -0,0 +1,42 @@
+import { AnchorHTMLAttributes, ButtonHTMLAttributes, HTMLAttributes, ReactNode } from 'react';
+export interface NavigationItem {
+    id: string;
+    label: string;
+    href?: string;
+    icon?: ReactNode;
+    badge?: ReactNode;
+    disabled?: boolean;
+}
+interface NavigationItemProps extends NavigationItem {
+    active?: boolean;
+    compact?: boolean;
+    onSelect?: (id: string) => void;
+    className?: string;
+}
+export declare function NavigationLink({ id, label, href, icon, badge, disabled, active, compact, onSelect, className, }: NavigationItemProps): import("react").JSX.Element;
+export interface NavigationListProps extends Omit<HTMLAttributes<HTMLElement>, "onSelect"> {
+    items: NavigationItem[];
+    activeId?: string;
+    onSelect?: (id: string) => void;
+    ariaLabel?: string;
+}
+export declare function Navbar({ items, activeId, onSelect, ariaLabel, className, children, ...props }: NavigationListProps): import("react").JSX.Element;
+export declare function Topbar({ className, children, ...props }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
+export declare function TopbarTitle({ as: Tag, className, children, ...props }: HTMLAttributes<HTMLHeadingElement> & {
+    as?: "h1" | "h2" | "h3" | "div" | "p";
+}): import("react").JSX.Element;
+export interface SidebarProps extends NavigationListProps {
+    header?: ReactNode;
+    footer?: ReactNode;
+}
+export declare function Sidebar({ items, activeId, onSelect, ariaLabel, header, footer, className, ...props }: SidebarProps): import("react").JSX.Element;
+export declare function BottomBar({ items, activeId, onSelect, ariaLabel, className, ...props }: NavigationListProps): import("react").JSX.Element;
+export interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    label: string;
+}
+export declare function IconButton({ label, className, children, type, ...props }: IconButtonProps): import("react").JSX.Element;
+export interface BrandLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+    mark?: ReactNode;
+}
+export declare function BrandLink({ mark, className, children, ...props }: BrandLinkProps): import("react").JSX.Element;
+export {};

package/dist/components/navigation.js

@@ -0,0 +1,127 @@
+"use client";
+import { t as e } from "../cn-DpgY2leY.js";
+import { c as t, s as n } from "../component-styles-Ce56hn9T.js";
+import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/components/navigation.tsx
+function o({ id: t, label: o, href: s, icon: c, badge: l, disabled: u, active: d, compact: f, onSelect: p, className: m }) {
+	let h = /* @__PURE__ */ a(r, { children: [
+		c && /* @__PURE__ */ i("span", {
+			className: "shrink-0",
+			"aria-hidden": "true",
+			children: c
+		}),
+		/* @__PURE__ */ i("span", {
+			className: e("truncate", f && "text-[11px]"),
+			children: o
+		}),
+		l && /* @__PURE__ */ i("span", {
+			className: "ml-auto shrink-0",
+			children: l
+		})
+	] }), g = e("group relative inline-flex items-center justify-center gap-2 rounded-[var(--radius-md)] font-medium transition-colors", n, f ? "min-h-11 flex-col px-2 py-1.5" : "h-9 px-3 text-sm", d ? "bg-accent-50 text-accent-700 dark:bg-accent-500/12 dark:text-accent-300" : "text-muted-foreground hover:bg-muted hover:text-foreground", u && "pointer-events-none opacity-40", m);
+	return s ? /* @__PURE__ */ i("a", {
+		href: s,
+		className: g,
+		"aria-current": d ? "page" : void 0,
+		"aria-disabled": u || void 0,
+		onClick: (e) => {
+			p && (e.preventDefault(), p(t));
+		},
+		children: h
+	}) : /* @__PURE__ */ i("button", {
+		type: "button",
+		className: g,
+		"aria-current": d ? "page" : void 0,
+		disabled: u,
+		onClick: () => p?.(t),
+		children: h
+	});
+}
+function s({ items: t, activeId: n, onSelect: r, ariaLabel: s = "Primary navigation", className: c, children: l, ...u }) {
+	return /* @__PURE__ */ a("nav", {
+		"aria-label": s,
+		className: e("flex min-h-14 items-center gap-1 border border-border bg-surface px-3", c),
+		...u,
+		children: [l, /* @__PURE__ */ i("div", {
+			className: "ml-auto flex items-center gap-1 overflow-x-auto",
+			children: t.map((e) => /* @__PURE__ */ i(o, {
+				...e,
+				active: n === e.id,
+				onSelect: r
+			}, e.id))
+		})]
+	});
+}
+function c({ className: t, children: n, ...r }) {
+	return /* @__PURE__ */ i("header", {
+		className: e("flex min-h-14 items-center gap-3 border-b border-border bg-bg/95 px-4 backdrop-blur-sm", t),
+		...r,
+		children: n
+	});
+}
+function l({ as: t = "h2", className: n, children: r, ...a }) {
+	return /* @__PURE__ */ i(t, {
+		className: e("min-w-0 flex-1 truncate text-sm font-semibold text-foreground", n),
+		...a,
+		children: r
+	});
+}
+function u({ items: t, activeId: n, onSelect: r, ariaLabel: s = "Sidebar navigation", header: c, footer: l, className: u, ...d }) {
+	return /* @__PURE__ */ a("aside", {
+		className: e("flex w-60 flex-col border border-border bg-surface", u),
+		...d,
+		children: [
+			c && /* @__PURE__ */ i("div", {
+				className: "border-b border-border p-4",
+				children: c
+			}),
+			/* @__PURE__ */ i("nav", {
+				"aria-label": s,
+				className: "flex flex-1 flex-col gap-1 p-2",
+				children: t.map((e) => /* @__PURE__ */ i(o, {
+					...e,
+					active: n === e.id,
+					onSelect: r,
+					className: "w-full justify-start"
+				}, e.id))
+			}),
+			l && /* @__PURE__ */ i("div", {
+				className: "border-t border-border p-3",
+				children: l
+			})
+		]
+	});
+}
+function d({ items: t, activeId: n, onSelect: r, ariaLabel: a = "Mobile navigation", className: s, ...c }) {
+	return /* @__PURE__ */ i("nav", {
+		"aria-label": a,
+		className: e("grid min-h-16 border border-border bg-surface/95 px-1 pb-safe-bottom shadow-floating backdrop-blur-sm", s),
+		style: { gridTemplateColumns: `repeat(${t.length}, minmax(0, 1fr))` },
+		...c,
+		children: t.map((e) => /* @__PURE__ */ i(o, {
+			...e,
+			compact: !0,
+			active: n === e.id,
+			onSelect: r,
+			className: "rounded-none"
+		}, e.id))
+	});
+}
+function f({ label: n, className: r, children: a, type: o = "button", ...s }) {
+	return /* @__PURE__ */ i("button", {
+		type: o,
+		"aria-label": n,
+		className: e(t, "size-9", r),
+		...s,
+		children: a
+	});
+}
+function p({ mark: t, className: r, children: i, ...o }) {
+	return /* @__PURE__ */ a("a", {
+		className: e("inline-flex shrink-0 items-center gap-2 text-sm font-semibold text-foreground", n, r),
+		...o,
+		children: [t, i]
+	});
+}
+//#endregion
+export { d as BottomBar, p as BrandLink, f as IconButton, s as Navbar, o as NavigationLink, u as Sidebar, c as Topbar, l as TopbarTitle };

package/dist/components/number-input.cjs

@@ -0,0 +1 @@
+"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../cn-BdjraxxU.cjs"),t=require("../component-styles-TkZ7v6Ef.cjs");let n=require("react"),r=require("react/jsx-runtime");var i={sm:{wrap:`h-7 text-xs`,btn:`w-6`,input:`w-16`},md:{wrap:`h-9 text-sm`,btn:`w-8`,input:`w-20`},lg:{wrap:`h-11 text-sm`,btn:`w-9`,input:`w-24`}},a=(0,n.forwardRef)(({className:a,label:o,hint:s,error:c,size:l=`md`,min:u=-1/0,max:d=1/0,step:f=1,value:p,defaultValue:m=0,onChange:h,disabled:g,id:_,autoComplete:v=`on`,fullWidth:y=!1,formatDisplay:b,onFocus:x,onBlur:S,onKeyDown:C,required:w,...T},E)=>{let D=(0,n.useId)(),O=_??D,k=`${O}-message`,[A,j]=(0,n.useState)(m),M=p??A,N=i[l],P=f.toString().includes(`.`)?f.toString().split(`.`)[1].length:0,F=e=>P>0?Math.round(e*10**P)/10**P:Math.round(e),I=e=>Math.min(d,Math.max(u,e));function L(e){let t=I(F(e));p===void 0&&j(t),h?.(t),z(String(t))}(0,n.useEffect)(()=>{p!==void 0&&j(p)},[p]);let[R,z]=(0,n.useState)(()=>String(M)),B=(0,n.useRef)(!1);(0,n.useEffect)(()=>{B.current||z(String(M))},[M]);function V(e){z(e)}function H(e){B.current=!1;let t=Number(R);L(Number.isNaN(t)?M:t),S?.(e)}function U(e){C?.(e),!e.defaultPrevented&&e.key===`Enter`&&e.currentTarget.blur()}return(0,r.jsxs)(`div`,{className:e.t(t.o,!y&&`w-auto`,a),children:[o&&(0,r.jsxs)(`label`,{htmlFor:O,className:`text-sm font-medium leading-5 text-foreground`,children:[o,w&&(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(`span`,{"aria-hidden":`true`,className:`ml-1 text-destructive`,children:`*`}),(0,r.jsx)(`span`,{className:`sr-only`,children:` (required)`})]})]}),(0,r.jsxs)(`div`,{className:e.t(`inline-flex items-center overflow-hidden rounded-[var(--radius-md)]`,t.t,N.wrap,y&&`flex w-full`,c&&`border-destructive/60 hover:border-destructive/70 focus-within:border-destructive focus-within:ring-destructive/20`,g&&`opacity-50`),children:[(0,r.jsx)(`button`,{type:`button`,"aria-label":o?`Decrease ${o}`:`Decrease value`,tabIndex:-1,disabled:g||M<=u,onClick:()=>L(M-f),className:e.t(`flex items-center justify-center shrink-0 border-r border-border`,`text-muted-foreground hover:bg-muted hover:text-foreground`,`disabled:opacity-40 disabled:cursor-not-allowed transition-colors`,N.btn),children:(0,r.jsx)(`svg`,{width:`10`,height:`10`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,strokeWidth:`3`,strokeLinecap:`round`,children:(0,r.jsx)(`path`,{d:`M5 12h14`})})}),(0,r.jsx)(`input`,{ref:E,type:`number`,id:O,required:w,"aria-invalid":c?!0:void 0,"aria-describedby":c||s?k:void 0,"aria-valuetext":b?.(M),autoComplete:v,min:Number.isFinite(u)?u:void 0,max:Number.isFinite(d)?d:void 0,step:f,value:R,disabled:g,onFocus:e=>{B.current=!0,x?.(e)},onChange:e=>V(e.target.value),onBlur:H,onKeyDown:U,className:e.t(`flex-1 text-center bg-transparent text-foreground outline-none tabular-nums`,`[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none`,`disabled:cursor-not-allowed`,y?`min-w-0`:N.input),...T}),(0,r.jsx)(`button`,{type:`button`,"aria-label":o?`Increase ${o}`:`Increase value`,tabIndex:-1,disabled:g||M>=d,onClick:()=>L(M+f),className:e.t(`flex items-center justify-center shrink-0 border-l border-border`,`text-muted-foreground hover:bg-muted hover:text-foreground`,`disabled:opacity-40 disabled:cursor-not-allowed transition-colors`,N.btn),children:(0,r.jsx)(`svg`,{width:`10`,height:`10`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,strokeWidth:`3`,strokeLinecap:`round`,children:(0,r.jsx)(`path`,{d:`M12 5v14M5 12h14`})})})]}),c&&(0,r.jsx)(`p`,{id:k,"aria-live":`polite`,className:`text-xs leading-5 text-destructive`,children:c}),s&&!c&&(0,r.jsx)(`p`,{id:k,className:`text-xs leading-5 text-muted-foreground`,children:s})]})});a.displayName=`NumberInput`,exports.NumberInput=a;

package/dist/components/number-input.d.ts

@@ -0,0 +1,16 @@
+import { InputHTMLAttributes } from 'react';
+export interface NumberInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "size" | "onChange"> {
+    label?: string;
+    hint?: string;
+    error?: string;
+    size?: "sm" | "md" | "lg";
+    min?: number;
+    max?: number;
+    step?: number;
+    value?: number;
+    defaultValue?: number;
+    onChange?: (value: number) => void;
+    formatDisplay?: (v: number) => string;
+    fullWidth?: boolean;
+}
+export declare const NumberInput: import('react').ForwardRefExoticComponent<NumberInputProps & import('react').RefAttributes<HTMLInputElement>>;