tembro 3.0.0 → 3.1.1

package/dist/src/components/inputs/demo.js

@@ -0,0 +1,22 @@
+import { component as e, createShowcaseDemoRegistry as t } from "../../showcase/create-demo.js";
+//#region src/components/inputs/demo.tsx
+var n = t([
+	e("password-input", "PasswordInput", "inputs", "Password field with visibility toggle and secure autocomplete defaults."),
+	e("number-input", "NumberInput", "inputs", "Numeric entry surface for counts, thresholds and dashboard filters."),
+	e("phone-input", "PhoneInput", "inputs", "Masked phone entry that preserves stable value handling in forms."),
+	e("money-input", "MoneyInput", "inputs", "Currency-focused value entry for invoices, pricing and finance screens."),
+	e("date-input", "DateInput", "inputs", "Single-date entry with normalized string value handling."),
+	e("date-range-input", "DateRangeInput", "inputs", "Range-based date entry for reporting, booking and filter flows."),
+	e("simple-select", "SimpleSelect", "inputs", "Static select member for local option sets and lightweight filter panels."),
+	e("async-select", "AsyncSelect", "inputs", "Remote select member for server search, hydration and large datasets."),
+	e("combobox", "Combobox", "inputs", "Local searchable choice input for reassignment and command-like selection."),
+	e("slider", "Slider", "inputs", "Single value range control for density, threshold, and score tuning."),
+	e("range-slider", "RangeSlider", "inputs", "Two-handle slider for min/max filtering."),
+	e("rating", "Rating", "inputs", "Compact score input for feedback and review flows."),
+	e("otp-input", "OtpInput", "inputs", "One-time code entry with fixed-length slots."),
+	e("color-input", "ColorInput", "inputs", "Theme and accent color field with native color selection."),
+	e("inline-editable", "InlineEditable", "inputs", "Inline text editing for compact dashboards and settings tables."),
+	e("tag-input", "TagInput", "inputs", "Tokenized text input for labels, skills, and quick filters.")
+]);
+//#endregion
+export { n as inputsShowcaseDemoRegistry };

package/dist/src/components/inputs/index.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./async-select.cjs"),t=require("./otp-input.cjs"),n=require("./rating.cjs"),r=require("./slider.cjs"),i=require("./tag-input.cjs"),a=require("./inline-editable.cjs"),o=require("./json-input.cjs"),s=require("./time-picker.cjs");exports.AsyncMultiSelect=e.AsyncMultiSelect,exports.AsyncSelect=e.AsyncSelect,exports.DateTimePicker=s.DateTimePicker,exports.InlineEditable=a.InlineEditable,exports.JsonInput=o.JsonInput,exports.OtpInput=t.OtpInput,exports.RangeSlider=r.RangeSlider,exports.Rating=n.Rating,exports.Slider=r.Slider,exports.TagInput=i.TagInput,exports.TimePicker=s.TimePicker,exports.TimeRangePicker=s.TimeRangePicker;

package/dist/src/components/inputs/index.js

@@ -0,0 +1,9 @@
+import { AsyncMultiSelect as e, AsyncSelect as t } from "./async-select.js";
+import { OtpInput as n } from "./otp-input.js";
+import { Rating as r } from "./rating.js";
+import { RangeSlider as i, Slider as a } from "./slider.js";
+import { TagInput as o } from "./tag-input.js";
+import { InlineEditable as s } from "./inline-editable.js";
+import { JsonInput as c } from "./json-input.js";
+import { DateTimePicker as l, TimePicker as u, TimeRangePicker as d } from "./time-picker.js";
+export { e as AsyncMultiSelect, t as AsyncSelect, l as DateTimePicker, s as InlineEditable, c as JsonInput, n as OtpInput, i as RangeSlider, r as Rating, a as Slider, o as TagInput, u as TimePicker, d as TimeRangePicker };

package/dist/src/components/inputs/inline-editable.cjs

@@ -0,0 +1 @@
+"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs"),n=require("../ui/input/index.cjs");let r=require("react");r=e.__toESM(r,1);let i=require("react/jsx-runtime");function a({value:e,onValueChange:a,placeholder:o=`Click to edit`,disabled:s,className:c,inputClassName:l,displayClassName:u,...d}){let[f,p]=r.useState(!1),[m,h]=r.useState(e),g=r.useRef(null);r.useEffect(()=>{h(e)},[e]),r.useEffect(()=>{f&&g.current?.focus()},[f]);let _=()=>{s||(a(m),p(!1))},v=()=>{h(e),p(!1)},y=e=>{e.key===`Enter`?(e.preventDefault(),_()):e.key===`Escape`&&(e.preventDefault(),v())};return f?(0,i.jsx)(`div`,{"data-slot":`inline-editable-input-mode`,className:t.cn(`flex items-center gap-1`,c),...d,children:(0,i.jsx)(n.Input,{ref:g,value:m,onChange:e=>h(e.target.value),onKeyDown:y,onBlur:_,disabled:s,placeholder:o,className:t.cn(`h-8 text-sm`,l)})}):(0,i.jsx)(`div`,{"data-slot":`inline-editable`,className:t.cn(`group flex items-center gap-1.5 rounded-md border border-transparent px-1.5 py-1 -ml-1.5 transition-colors`,!s&&`cursor-pointer hover:bg-muted/50`,c),onClick:()=>{s||p(!0)},tabIndex:s?void 0:0,onKeyDown:e=>{!s&&(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),p(!0))},...d,children:(0,i.jsx)(`span`,{className:t.cn(`truncate text-sm`,!e&&`text-muted-foreground italic`,s&&`opacity-50`,u),children:e||o})})}exports.InlineEditable=a;

package/dist/src/components/inputs/inline-editable.js

@@ -0,0 +1,53 @@
+"use client";
+import { cn as e } from "../../lib/utils.js";
+import { Input as t } from "../ui/input/index.js";
+import * as n from "react";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/components/inputs/inline-editable.tsx
+function i({ value: i, onValueChange: a, placeholder: o = "Click to edit", disabled: s, className: c, inputClassName: l, displayClassName: u, ...d }) {
+	let [f, p] = n.useState(!1), [m, h] = n.useState(i), g = n.useRef(null);
+	n.useEffect(() => {
+		h(i);
+	}, [i]), n.useEffect(() => {
+		f && g.current?.focus();
+	}, [f]);
+	let _ = () => {
+		s || (a(m), p(!1));
+	}, v = () => {
+		h(i), p(!1);
+	}, y = (e) => {
+		e.key === "Enter" ? (e.preventDefault(), _()) : e.key === "Escape" && (e.preventDefault(), v());
+	};
+	return f ? /* @__PURE__ */ r("div", {
+		"data-slot": "inline-editable-input-mode",
+		className: e("flex items-center gap-1", c),
+		...d,
+		children: /* @__PURE__ */ r(t, {
+			ref: g,
+			value: m,
+			onChange: (e) => h(e.target.value),
+			onKeyDown: y,
+			onBlur: _,
+			disabled: s,
+			placeholder: o,
+			className: e("h-8 text-sm", l)
+		})
+	}) : /* @__PURE__ */ r("div", {
+		"data-slot": "inline-editable",
+		className: e("group flex items-center gap-1.5 rounded-md border border-transparent px-1.5 py-1 -ml-1.5 transition-colors", !s && "cursor-pointer hover:bg-muted/50", c),
+		onClick: () => {
+			s || p(!0);
+		},
+		tabIndex: s ? void 0 : 0,
+		onKeyDown: (e) => {
+			!s && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), p(!0));
+		},
+		...d,
+		children: /* @__PURE__ */ r("span", {
+			className: e("truncate text-sm", !i && "text-muted-foreground italic", s && "opacity-50", u),
+			children: i || o
+		})
+	});
+}
+//#endregion
+export { i as InlineEditable };

package/dist/src/components/inputs/json-input.cjs

@@ -0,0 +1 @@
+"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("react/jsx-runtime");function i(e){if(!e.trim())return{parsed:null,valid:!0};try{return{parsed:JSON.parse(e),valid:!0}}catch{return{parsed:null,valid:!1}}}function a({value:e,defaultValue:a=``,onValueChange:o,invalidText:s=`Invalid JSON`,className:c,onChange:l,...u}){let[d,f]=n.useState(a),p=e??d,m=i(p).valid;function h(t){let n=t.target.value,r=i(n);e===void 0&&f(n),o?.(n,r.parsed,r.valid),l?.(t)}return(0,r.jsxs)(`div`,{"data-slot":`json-input`,className:`grid gap-1.5`,children:[(0,r.jsx)(`textarea`,{value:p,spellCheck:!1,"aria-invalid":m?void 0:!0,className:t.cn(`min-h-32 rounded-md border bg-background p-3 font-mono text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring`,!m&&`border-destructive`,c),onChange:h,...u}),!m&&(0,r.jsx)(`p`,{role:`alert`,className:`text-sm text-destructive`,children:s})]})}exports.JsonInput=a;

package/dist/src/components/inputs/json-input.js

@@ -0,0 +1,47 @@
+"use client";
+import { cn as e } from "../../lib/utils.js";
+import * as t from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/components/inputs/json-input.tsx
+function i(e) {
+	if (!e.trim()) return {
+		parsed: null,
+		valid: !0
+	};
+	try {
+		return {
+			parsed: JSON.parse(e),
+			valid: !0
+		};
+	} catch {
+		return {
+			parsed: null,
+			valid: !1
+		};
+	}
+}
+function a({ value: a, defaultValue: o = "", onValueChange: s, invalidText: c = "Invalid JSON", className: l, onChange: u, ...d }) {
+	let [f, p] = t.useState(o), m = a ?? f, h = i(m).valid;
+	function g(e) {
+		let t = e.target.value, n = i(t);
+		a === void 0 && p(t), s?.(t, n.parsed, n.valid), u?.(e);
+	}
+	return /* @__PURE__ */ r("div", {
+		"data-slot": "json-input",
+		className: "grid gap-1.5",
+		children: [/* @__PURE__ */ n("textarea", {
+			value: m,
+			spellCheck: !1,
+			"aria-invalid": h ? void 0 : !0,
+			className: e("min-h-32 rounded-md border bg-background p-3 font-mono text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring", !h && "border-destructive", l),
+			onChange: g,
+			...d
+		}), !h && /* @__PURE__ */ n("p", {
+			role: "alert",
+			className: "text-sm text-destructive",
+			children: c
+		})]
+	});
+}
+//#endregion
+export { a as JsonInput };

package/dist/src/components/inputs/otp-input.cjs

@@ -0,0 +1 @@
+"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("react/jsx-runtime");function i({value:e,defaultValue:i=``,onValueChange:a,length:o=6,disabled:s=!1,inputMode:c=`numeric`,pattern:l=`[0-9]*`,mask:u=!1,labels:d,className:f,...p}){let[m,h]=n.useState(i.slice(0,o)),g=(e??m).slice(0,o),_=n.useRef([]),v=t=>{let n=t.slice(0,o);e===void 0&&h(n),a?.(n)},y=(e,t)=>{let n=String(Array.isArray(g)?g.join(``):g).padEnd(o,` `).split(``);n[e]=t.slice(-1),v(n.join(``).replace(/\s+$/g,``))},b=e=>{_.current[Math.max(0,Math.min(e,o-1))]?.focus()};return(0,r.jsx)(`div`,{"data-slot":`otp-input`,role:`group`,"aria-label":d?.group??`One-time password`,className:t.cn(`flex items-center gap-2`,f),...p,children:Array.from({length:o},(e,t)=>(0,r.jsx)(`input`,{ref:e=>{_.current[t]=e},"aria-label":d?.cell?.(t)??`Digit ${t+1}`,inputMode:c,pattern:l,type:u?`password`:`text`,autoComplete:`one-time-code`,maxLength:1,disabled:s,value:g[t]??``,className:`flex size-10 rounded-md border bg-background text-center text-sm font-medium outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50`,onChange:e=>{let n=e.currentTarget.value;y(t,n),n&&b(t+1)},onKeyDown:e=>{e.key===`Backspace`&&!g[t]&&(e.preventDefault(),b(t-1),y(t-1,``)),e.key===`ArrowLeft`&&b(t-1),e.key===`ArrowRight`&&b(t+1)},onPaste:e=>{e.preventDefault();let t=e.clipboardData.getData(`text`).trim();v(t),b(Math.min(t.length,o-1))}},t))})}exports.OtpInput=i;

package/dist/src/components/inputs/otp-input.js

@@ -0,0 +1,51 @@
+"use client";
+import { cn as e } from "../../lib/utils.js";
+import * as t from "react";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/inputs/otp-input.tsx
+function r({ value: r, defaultValue: i = "", onValueChange: a, length: o = 6, disabled: s = !1, inputMode: c = "numeric", pattern: l = "[0-9]*", mask: u = !1, labels: d, className: f, ...p }) {
+	let [m, h] = t.useState(i.slice(0, o)), g = (r ?? m).slice(0, o), _ = t.useRef([]), v = (e) => {
+		let t = e.slice(0, o);
+		r === void 0 && h(t), a?.(t);
+	}, y = (e, t) => {
+		let n = String(Array.isArray(g) ? g.join("") : g).padEnd(o, " ").split("");
+		n[e] = t.slice(-1), v(n.join("").replace(/\s+$/g, ""));
+	}, b = (e) => {
+		_.current[Math.max(0, Math.min(e, o - 1))]?.focus();
+	};
+	return /* @__PURE__ */ n("div", {
+		"data-slot": "otp-input",
+		role: "group",
+		"aria-label": d?.group ?? "One-time password",
+		className: e("flex items-center gap-2", f),
+		...p,
+		children: Array.from({ length: o }, (e, t) => /* @__PURE__ */ n("input", {
+			ref: (e) => {
+				_.current[t] = e;
+			},
+			"aria-label": d?.cell?.(t) ?? `Digit ${t + 1}`,
+			inputMode: c,
+			pattern: l,
+			type: u ? "password" : "text",
+			autoComplete: "one-time-code",
+			maxLength: 1,
+			disabled: s,
+			value: g[t] ?? "",
+			className: "flex size-10 rounded-md border bg-background text-center text-sm font-medium outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+			onChange: (e) => {
+				let n = e.currentTarget.value;
+				y(t, n), n && b(t + 1);
+			},
+			onKeyDown: (e) => {
+				e.key === "Backspace" && !g[t] && (e.preventDefault(), b(t - 1), y(t - 1, "")), e.key === "ArrowLeft" && b(t - 1), e.key === "ArrowRight" && b(t + 1);
+			},
+			onPaste: (e) => {
+				e.preventDefault();
+				let t = e.clipboardData.getData("text").trim();
+				v(t), b(Math.min(t.length, o - 1));
+			}
+		}, t))
+	});
+}
+//#endregion
+export { r as OtpInput };

package/dist/src/components/inputs/public.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./async-select.cjs"),t=require("./otp-input.cjs"),n=require("./rating.cjs"),r=require("./slider.cjs"),i=require("./tag-input.cjs"),a=require("./inline-editable.cjs"),o=require("./json-input.cjs"),s=require("./time-picker.cjs");exports.AsyncMultiSelect=e.AsyncMultiSelect,exports.AsyncSelect=e.AsyncSelect,exports.DateTimePicker=s.DateTimePicker,exports.InlineEditable=a.InlineEditable,exports.JsonInput=o.JsonInput,exports.OtpInput=t.OtpInput,exports.RangeSlider=r.RangeSlider,exports.Rating=n.Rating,exports.Slider=r.Slider,exports.TagInput=i.TagInput,exports.TimePicker=s.TimePicker,exports.TimeRangePicker=s.TimeRangePicker;

package/dist/src/components/inputs/public.js

@@ -0,0 +1,9 @@
+import { AsyncMultiSelect as e, AsyncSelect as t } from "./async-select.js";
+import { OtpInput as n } from "./otp-input.js";
+import { Rating as r } from "./rating.js";
+import { RangeSlider as i, Slider as a } from "./slider.js";
+import { TagInput as o } from "./tag-input.js";
+import { InlineEditable as s } from "./inline-editable.js";
+import { JsonInput as c } from "./json-input.js";
+import { DateTimePicker as l, TimePicker as u, TimeRangePicker as d } from "./time-picker.js";
+export { e as AsyncMultiSelect, t as AsyncSelect, l as DateTimePicker, s as InlineEditable, c as JsonInput, n as OtpInput, i as RangeSlider, r as Rating, a as Slider, o as TagInput, u as TimePicker, d as TimeRangePicker };

package/dist/src/components/inputs/rating.cjs

@@ -0,0 +1 @@
+"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("lucide-react"),i=require("react/jsx-runtime");function a({value:e,defaultValue:a=0,onValueChange:o,count:s=5,allowClear:c=!0,disabled:l=!1,readOnly:u=!1,labels:d,icon:f,className:p,...m}){let[h,g]=n.useState(a),[_,v]=n.useState(null),y=e??h,b=_??y,x=!l&&!u,S=t=>{if(!x)return;let n=c&&t===y?0:t;e===void 0&&g(n),o?.(n)},C=(e,t)=>{x&&(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),S(t))};return(0,i.jsxs)(`div`,{"data-slot":`rating`,role:`radiogroup`,"aria-disabled":l||void 0,className:t.cn(`inline-flex min-h-11 items-center gap-1.5 rounded-full border border-[color:var(--aui-surface-border)] bg-[color:color-mix(in_srgb,var(--aui-control-bg)_82%,white_18%)] px-2 py-1.5 shadow-sm dark:bg-[color:color-mix(in_srgb,var(--aui-control-bg)_90%,black_10%)]`,p),onMouseLeave:()=>v(null),...m,children:[Array.from({length:s},(e,n)=>{let a=n+1,o=a<=b;return(0,i.jsx)(`button`,{type:`button`,role:`radio`,"aria-checked":a===y,"aria-label":d?.rate?.(a)??`Rate ${a}`,disabled:l,tabIndex:u?-1:0,className:t.cn(`inline-flex size-8 items-center justify-center rounded-full text-[color:var(--aui-text-muted)] outline-none transition duration-150 focus-visible:ring-2 focus-visible:ring-[color:var(--aui-brand-strong)] focus-visible:ring-offset-2 focus-visible:ring-offset-[color:var(--aui-page-bg)] disabled:pointer-events-none disabled:opacity-50`,x&&`hover:bg-[color:var(--aui-control-bg)] hover:text-[color:var(--aui-brand-strong)]`,o&&`bg-[color:color-mix(in_srgb,var(--aui-brand-strong)_16%,transparent)] text-[color:var(--aui-brand-strong)]`),onMouseEnter:()=>x&&v(a),onClick:()=>S(a),onKeyDown:e=>C(e,a),children:f??(0,i.jsx)(r.StarIcon,{className:t.cn(`size-4.5`,o&&`fill-current`)})},a)}),c&&y>0&&x&&(0,i.jsx)(`button`,{type:`button`,className:`ml-1 inline-flex h-8 items-center rounded-full border border-[color:var(--aui-surface-border)] px-3 text-xs font-semibold text-muted-foreground transition hover:bg-[color:var(--aui-control-bg)] hover:text-foreground`,onClick:()=>S(0),children:d?.clear??`Clear`})]})}exports.Rating=a;

package/dist/src/components/inputs/rating.js

@@ -0,0 +1,46 @@
+"use client";
+import { cn as e } from "../../lib/utils.js";
+import * as t from "react";
+import { StarIcon as n } from "lucide-react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/inputs/rating.tsx
+function a({ value: a, defaultValue: o = 0, onValueChange: s, count: c = 5, allowClear: l = !0, disabled: u = !1, readOnly: d = !1, labels: f, icon: p, className: m, ...h }) {
+	let [g, _] = t.useState(o), [v, y] = t.useState(null), b = a ?? g, x = v ?? b, S = !u && !d, C = (e) => {
+		if (!S) return;
+		let t = l && e === b ? 0 : e;
+		a === void 0 && _(t), s?.(t);
+	}, w = (e, t) => {
+		S && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), C(t));
+	};
+	return /* @__PURE__ */ i("div", {
+		"data-slot": "rating",
+		role: "radiogroup",
+		"aria-disabled": u || void 0,
+		className: e("inline-flex min-h-11 items-center gap-1.5 rounded-full border border-[color:var(--aui-surface-border)] bg-[color:color-mix(in_srgb,var(--aui-control-bg)_82%,white_18%)] px-2 py-1.5 shadow-sm dark:bg-[color:color-mix(in_srgb,var(--aui-control-bg)_90%,black_10%)]", m),
+		onMouseLeave: () => y(null),
+		...h,
+		children: [Array.from({ length: c }, (t, i) => {
+			let a = i + 1, o = a <= x;
+			return /* @__PURE__ */ r("button", {
+				type: "button",
+				role: "radio",
+				"aria-checked": a === b,
+				"aria-label": f?.rate?.(a) ?? `Rate ${a}`,
+				disabled: u,
+				tabIndex: d ? -1 : 0,
+				className: e("inline-flex size-8 items-center justify-center rounded-full text-[color:var(--aui-text-muted)] outline-none transition duration-150 focus-visible:ring-2 focus-visible:ring-[color:var(--aui-brand-strong)] focus-visible:ring-offset-2 focus-visible:ring-offset-[color:var(--aui-page-bg)] disabled:pointer-events-none disabled:opacity-50", S && "hover:bg-[color:var(--aui-control-bg)] hover:text-[color:var(--aui-brand-strong)]", o && "bg-[color:color-mix(in_srgb,var(--aui-brand-strong)_16%,transparent)] text-[color:var(--aui-brand-strong)]"),
+				onMouseEnter: () => S && y(a),
+				onClick: () => C(a),
+				onKeyDown: (e) => w(e, a),
+				children: p ?? /* @__PURE__ */ r(n, { className: e("size-4.5", o && "fill-current") })
+			}, a);
+		}), l && b > 0 && S && /* @__PURE__ */ r("button", {
+			type: "button",
+			className: "ml-1 inline-flex h-8 items-center rounded-full border border-[color:var(--aui-surface-border)] px-3 text-xs font-semibold text-muted-foreground transition hover:bg-[color:var(--aui-control-bg)] hover:text-foreground",
+			onClick: () => C(0),
+			children: f?.clear ?? "Clear"
+		})]
+	});
+}
+//#endregion
+export { a as Rating };

package/dist/src/components/inputs/slider.cjs

@@ -0,0 +1 @@
+"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("react/jsx-runtime");function i(e,t,n){return Math.min(Math.max(e,t),n)}function a(e,t,n){return n<=t?0:(e-t)/(n-t)*100}function o(e,t,n){let r=a(i(e,t,n),t,n);return{background:`linear-gradient(90deg, var(--aui-brand-strong) 0%, var(--aui-brand-strong) ${r}%, var(--aui-control-bg) ${r}%, var(--aui-control-bg) 100%)`}}function s({value:e,defaultValue:i=0,onValueChange:a,min:s=0,max:c=100,step:l=1,label:u,description:d,showValue:f=!1,formatValue:p,className:m,disabled:h,...g}){let[_,v]=n.useState(i),y=e??_,b=p?.(y)??y,x=t=>{e===void 0&&v(t),a?.(t)};return(0,r.jsxs)(`div`,{"data-slot":`slider`,className:t.cn(`grid gap-3`,m),children:[(u||d||f)&&(0,r.jsxs)(`div`,{className:`flex items-start justify-between gap-3`,children:[(0,r.jsxs)(`div`,{className:`grid gap-1`,children:[u&&(0,r.jsx)(`label`,{className:`text-sm font-semibold tracking-tight text-foreground`,children:u}),d&&(0,r.jsx)(`div`,{className:`text-xs leading-5 text-muted-foreground`,children:d})]}),f&&(0,r.jsx)(`div`,{className:`inline-flex min-h-8 items-center rounded-full border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-control-bg)] px-3 text-sm font-semibold text-foreground shadow-sm`,children:b})]}),(0,r.jsx)(`input`,{"data-slot":`slider-input`,type:`range`,value:y,min:s,max:c,step:l,disabled:h,style:o(y,s,c),className:`h-3 w-full cursor-pointer appearance-none rounded-full border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-control-bg)] shadow-[inset_0_1px_2px_rgba(15,23,42,0.08)] outline-none transition hover:brightness-[1.02] disabled:cursor-not-allowed disabled:opacity-50 [&::-moz-range-thumb]:size-5 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-[3px] [&::-moz-range-thumb]:border-[color:var(--aui-page-bg)] [&::-moz-range-thumb]:bg-[color:var(--aui-brand-strong)] [&::-moz-range-thumb]:shadow-[0_8px_24px_rgba(16,185,129,0.24)] [&::-moz-range-thumb]:transition [&::-moz-range-track]:h-3 [&::-moz-range-track]:rounded-full [&::-webkit-slider-runnable-track]:h-3 [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-thumb]:mt-[-5px] [&::-webkit-slider-thumb]:size-5 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-[3px] [&::-webkit-slider-thumb]:border-[color:var(--aui-page-bg)] [&::-webkit-slider-thumb]:bg-[color:var(--aui-brand-strong)] [&::-webkit-slider-thumb]:shadow-[0_8px_24px_rgba(16,185,129,0.24)]`,onChange:e=>x(e.currentTarget.valueAsNumber),...g})]})}function c(e,t,n){let r=a(i(e[0],t,n),t,n),o=a(i(e[1],t,n),t,n);return{left:`${r}%`,width:`${Math.max(o-r,0)}%`}}function l({value:e,defaultValue:i=[0,100],onValueChange:a,min:o=0,max:s=100,step:l=1,label:u,description:d,showValue:f=!1,formatValue:p,className:m,disabled:h,...g}){let[_,v]=n.useState(i),y=e??_,b=p?.(y)??`${y[0]} - ${y[1]}`,x=(t,n)=>{let r=t===0?[Math.min(n,y[1]),y[1]]:[y[0],Math.max(n,y[0])];e===void 0&&v(r),a?.(r)};return(0,r.jsxs)(`div`,{"data-slot":`range-slider`,className:t.cn(`grid gap-3`,m),children:[(u||d||f)&&(0,r.jsxs)(`div`,{className:`flex items-start justify-between gap-3`,children:[(0,r.jsxs)(`div`,{className:`grid gap-1`,children:[u&&(0,r.jsx)(`label`,{className:`text-sm font-semibold tracking-tight text-foreground`,children:u}),d&&(0,r.jsx)(`div`,{className:`text-xs leading-5 text-muted-foreground`,children:d})]}),f&&(0,r.jsx)(`div`,{className:`inline-flex min-h-8 items-center rounded-full border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-control-bg)] px-3 text-sm font-semibold text-foreground shadow-sm`,children:b})]}),(0,r.jsxs)(`div`,{className:`grid gap-3 rounded-2xl border border-[color:var(--aui-surface-border)] bg-[color:color-mix(in_srgb,var(--aui-control-bg)_82%,white_18%)] px-4 py-4 shadow-[inset_0_1px_0_rgba(255,255,255,0.3)] dark:bg-[color:color-mix(in_srgb,var(--aui-control-bg)_90%,black_10%)]`,children:[(0,r.jsxs)(`div`,{className:`relative h-6`,children:[(0,r.jsx)(`div`,{className:`absolute top-1/2 h-3 w-full -translate-y-1/2 rounded-full border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-control-bg)] shadow-[inset_0_1px_2px_rgba(15,23,42,0.08)]`}),(0,r.jsx)(`div`,{className:`absolute top-1/2 h-3 -translate-y-1/2 rounded-full bg-[color:var(--aui-brand-strong)] shadow-[0_8px_24px_rgba(16,185,129,0.18)]`,style:c(y,o,s)})]}),(0,r.jsxs)(`div`,{className:`relative -mt-8 h-6`,children:[(0,r.jsx)(`input`,{type:`range`,value:y[0],min:o,max:s,step:l,disabled:h,className:`pointer-events-none absolute inset-0 h-6 w-full cursor-pointer appearance-none bg-transparent outline-none disabled:cursor-not-allowed disabled:opacity-50 [&::-moz-range-thumb]:pointer-events-auto [&::-moz-range-thumb]:size-5 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-[3px] [&::-moz-range-thumb]:border-[color:var(--aui-page-bg)] [&::-moz-range-thumb]:bg-[color:var(--aui-brand-strong)] [&::-moz-range-thumb]:shadow-[0_8px_24px_rgba(16,185,129,0.24)] [&::-moz-range-track]:h-3 [&::-moz-range-track]:rounded-full [&::-moz-range-track]:bg-transparent [&::-webkit-slider-runnable-track]:h-3 [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-transparent [&::-webkit-slider-thumb]:pointer-events-auto [&::-webkit-slider-thumb]:mt-[-5px] [&::-webkit-slider-thumb]:size-5 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-[3px] [&::-webkit-slider-thumb]:border-[color:var(--aui-page-bg)] [&::-webkit-slider-thumb]:bg-[color:var(--aui-brand-strong)] [&::-webkit-slider-thumb]:shadow-[0_8px_24px_rgba(16,185,129,0.24)]`,onChange:e=>x(0,e.currentTarget.valueAsNumber),...g}),(0,r.jsx)(`input`,{type:`range`,value:y[1],min:o,max:s,step:l,disabled:h,className:`pointer-events-none absolute inset-0 h-6 w-full cursor-pointer appearance-none bg-transparent outline-none disabled:cursor-not-allowed disabled:opacity-50 [&::-moz-range-thumb]:pointer-events-auto [&::-moz-range-thumb]:size-5 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-[3px] [&::-moz-range-thumb]:border-[color:var(--aui-page-bg)] [&::-moz-range-thumb]:bg-[color:var(--aui-brand-strong)] [&::-moz-range-thumb]:shadow-[0_8px_24px_rgba(16,185,129,0.24)] [&::-moz-range-track]:h-3 [&::-moz-range-track]:rounded-full [&::-moz-range-track]:bg-transparent [&::-webkit-slider-runnable-track]:h-3 [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-transparent [&::-webkit-slider-thumb]:pointer-events-auto [&::-webkit-slider-thumb]:mt-[-5px] [&::-webkit-slider-thumb]:size-5 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-[3px] [&::-webkit-slider-thumb]:border-[color:var(--aui-page-bg)] [&::-webkit-slider-thumb]:bg-[color:var(--aui-brand-strong)] [&::-webkit-slider-thumb]:shadow-[0_8px_24px_rgba(16,185,129,0.24)]`,onChange:e=>x(1,e.currentTarget.valueAsNumber),...g})]})]})]})}exports.RangeSlider=l,exports.Slider=s;

package/dist/src/components/inputs/slider.js

@@ -0,0 +1,119 @@
+"use client";
+import { cn as e } from "../../lib/utils.js";
+import * as t from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/components/inputs/slider.tsx
+function i(e, t, n) {
+	return Math.min(Math.max(e, t), n);
+}
+function a(e, t, n) {
+	return n <= t ? 0 : (e - t) / (n - t) * 100;
+}
+function o(e, t, n) {
+	let r = a(i(e, t, n), t, n);
+	return { background: `linear-gradient(90deg, var(--aui-brand-strong) 0%, var(--aui-brand-strong) ${r}%, var(--aui-control-bg) ${r}%, var(--aui-control-bg) 100%)` };
+}
+function s({ value: i, defaultValue: a = 0, onValueChange: s, min: c = 0, max: l = 100, step: u = 1, label: d, description: f, showValue: p = !1, formatValue: m, className: h, disabled: g, ..._ }) {
+	let [v, y] = t.useState(a), b = i ?? v, x = m?.(b) ?? b, S = (e) => {
+		i === void 0 && y(e), s?.(e);
+	};
+	return /* @__PURE__ */ r("div", {
+		"data-slot": "slider",
+		className: e("grid gap-3", h),
+		children: [(d || f || p) && /* @__PURE__ */ r("div", {
+			className: "flex items-start justify-between gap-3",
+			children: [/* @__PURE__ */ r("div", {
+				className: "grid gap-1",
+				children: [d && /* @__PURE__ */ n("label", {
+					className: "text-sm font-semibold tracking-tight text-foreground",
+					children: d
+				}), f && /* @__PURE__ */ n("div", {
+					className: "text-xs leading-5 text-muted-foreground",
+					children: f
+				})]
+			}), p && /* @__PURE__ */ n("div", {
+				className: "inline-flex min-h-8 items-center rounded-full border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-control-bg)] px-3 text-sm font-semibold text-foreground shadow-sm",
+				children: x
+			})]
+		}), /* @__PURE__ */ n("input", {
+			"data-slot": "slider-input",
+			type: "range",
+			value: b,
+			min: c,
+			max: l,
+			step: u,
+			disabled: g,
+			style: o(b, c, l),
+			className: "h-3 w-full cursor-pointer appearance-none rounded-full border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-control-bg)] shadow-[inset_0_1px_2px_rgba(15,23,42,0.08)] outline-none transition hover:brightness-[1.02] disabled:cursor-not-allowed disabled:opacity-50 [&::-moz-range-thumb]:size-5 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-[3px] [&::-moz-range-thumb]:border-[color:var(--aui-page-bg)] [&::-moz-range-thumb]:bg-[color:var(--aui-brand-strong)] [&::-moz-range-thumb]:shadow-[0_8px_24px_rgba(16,185,129,0.24)] [&::-moz-range-thumb]:transition [&::-moz-range-track]:h-3 [&::-moz-range-track]:rounded-full [&::-webkit-slider-runnable-track]:h-3 [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-thumb]:mt-[-5px] [&::-webkit-slider-thumb]:size-5 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-[3px] [&::-webkit-slider-thumb]:border-[color:var(--aui-page-bg)] [&::-webkit-slider-thumb]:bg-[color:var(--aui-brand-strong)] [&::-webkit-slider-thumb]:shadow-[0_8px_24px_rgba(16,185,129,0.24)]",
+			onChange: (e) => S(e.currentTarget.valueAsNumber),
+			..._
+		})]
+	});
+}
+function c(e, t, n) {
+	let r = a(i(e[0], t, n), t, n), o = a(i(e[1], t, n), t, n);
+	return {
+		left: `${r}%`,
+		width: `${Math.max(o - r, 0)}%`
+	};
+}
+function l({ value: i, defaultValue: a = [0, 100], onValueChange: o, min: s = 0, max: l = 100, step: u = 1, label: d, description: f, showValue: p = !1, formatValue: m, className: h, disabled: g, ..._ }) {
+	let [v, y] = t.useState(a), b = i ?? v, x = m?.(b) ?? `${b[0]} - ${b[1]}`, S = (e, t) => {
+		let n = e === 0 ? [Math.min(t, b[1]), b[1]] : [b[0], Math.max(t, b[0])];
+		i === void 0 && y(n), o?.(n);
+	};
+	return /* @__PURE__ */ r("div", {
+		"data-slot": "range-slider",
+		className: e("grid gap-3", h),
+		children: [(d || f || p) && /* @__PURE__ */ r("div", {
+			className: "flex items-start justify-between gap-3",
+			children: [/* @__PURE__ */ r("div", {
+				className: "grid gap-1",
+				children: [d && /* @__PURE__ */ n("label", {
+					className: "text-sm font-semibold tracking-tight text-foreground",
+					children: d
+				}), f && /* @__PURE__ */ n("div", {
+					className: "text-xs leading-5 text-muted-foreground",
+					children: f
+				})]
+			}), p && /* @__PURE__ */ n("div", {
+				className: "inline-flex min-h-8 items-center rounded-full border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-control-bg)] px-3 text-sm font-semibold text-foreground shadow-sm",
+				children: x
+			})]
+		}), /* @__PURE__ */ r("div", {
+			className: "grid gap-3 rounded-2xl border border-[color:var(--aui-surface-border)] bg-[color:color-mix(in_srgb,var(--aui-control-bg)_82%,white_18%)] px-4 py-4 shadow-[inset_0_1px_0_rgba(255,255,255,0.3)] dark:bg-[color:color-mix(in_srgb,var(--aui-control-bg)_90%,black_10%)]",
+			children: [/* @__PURE__ */ r("div", {
+				className: "relative h-6",
+				children: [/* @__PURE__ */ n("div", { className: "absolute top-1/2 h-3 w-full -translate-y-1/2 rounded-full border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-control-bg)] shadow-[inset_0_1px_2px_rgba(15,23,42,0.08)]" }), /* @__PURE__ */ n("div", {
+					className: "absolute top-1/2 h-3 -translate-y-1/2 rounded-full bg-[color:var(--aui-brand-strong)] shadow-[0_8px_24px_rgba(16,185,129,0.18)]",
+					style: c(b, s, l)
+				})]
+			}), /* @__PURE__ */ r("div", {
+				className: "relative -mt-8 h-6",
+				children: [/* @__PURE__ */ n("input", {
+					type: "range",
+					value: b[0],
+					min: s,
+					max: l,
+					step: u,
+					disabled: g,
+					className: "pointer-events-none absolute inset-0 h-6 w-full cursor-pointer appearance-none bg-transparent outline-none disabled:cursor-not-allowed disabled:opacity-50 [&::-moz-range-thumb]:pointer-events-auto [&::-moz-range-thumb]:size-5 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-[3px] [&::-moz-range-thumb]:border-[color:var(--aui-page-bg)] [&::-moz-range-thumb]:bg-[color:var(--aui-brand-strong)] [&::-moz-range-thumb]:shadow-[0_8px_24px_rgba(16,185,129,0.24)] [&::-moz-range-track]:h-3 [&::-moz-range-track]:rounded-full [&::-moz-range-track]:bg-transparent [&::-webkit-slider-runnable-track]:h-3 [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-transparent [&::-webkit-slider-thumb]:pointer-events-auto [&::-webkit-slider-thumb]:mt-[-5px] [&::-webkit-slider-thumb]:size-5 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-[3px] [&::-webkit-slider-thumb]:border-[color:var(--aui-page-bg)] [&::-webkit-slider-thumb]:bg-[color:var(--aui-brand-strong)] [&::-webkit-slider-thumb]:shadow-[0_8px_24px_rgba(16,185,129,0.24)]",
+					onChange: (e) => S(0, e.currentTarget.valueAsNumber),
+					..._
+				}), /* @__PURE__ */ n("input", {
+					type: "range",
+					value: b[1],
+					min: s,
+					max: l,
+					step: u,
+					disabled: g,
+					className: "pointer-events-none absolute inset-0 h-6 w-full cursor-pointer appearance-none bg-transparent outline-none disabled:cursor-not-allowed disabled:opacity-50 [&::-moz-range-thumb]:pointer-events-auto [&::-moz-range-thumb]:size-5 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-[3px] [&::-moz-range-thumb]:border-[color:var(--aui-page-bg)] [&::-moz-range-thumb]:bg-[color:var(--aui-brand-strong)] [&::-moz-range-thumb]:shadow-[0_8px_24px_rgba(16,185,129,0.24)] [&::-moz-range-track]:h-3 [&::-moz-range-track]:rounded-full [&::-moz-range-track]:bg-transparent [&::-webkit-slider-runnable-track]:h-3 [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-transparent [&::-webkit-slider-thumb]:pointer-events-auto [&::-webkit-slider-thumb]:mt-[-5px] [&::-webkit-slider-thumb]:size-5 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-[3px] [&::-webkit-slider-thumb]:border-[color:var(--aui-page-bg)] [&::-webkit-slider-thumb]:bg-[color:var(--aui-brand-strong)] [&::-webkit-slider-thumb]:shadow-[0_8px_24px_rgba(16,185,129,0.24)]",
+					onChange: (e) => S(1, e.currentTarget.valueAsNumber),
+					..._
+				})]
+			})]
+		})]
+	});
+}
+//#endregion
+export { l as RangeSlider, s as Slider };

package/dist/src/components/inputs/tag-input.cjs

@@ -0,0 +1 @@
+"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs"),n=require("../ui/input/index.cjs"),r=require("../ui/badge/index.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("lucide-react"),o=require("react/jsx-runtime");function s({value:e,defaultValue:s=[],onValueChange:c,placeholder:l=`Add tag...`,disabled:u=!1,readOnly:d=!1,maxTags:f,allowDuplicates:p=!1,separators:m=[`,`,`Enter`],normalizeTag:h=e=>e.trim(),className:g,..._}){let v=e!==void 0,[y,b]=i.useState(s),[x,S]=i.useState(``),C=v?e:y,w=f!==void 0&&C.length>=f,T=i.useCallback(e=>{v||b(e),c?.(e)},[v,c]),E=i.useCallback(e=>{let t=h(e);t&&(f!==void 0&&C.length>=f||!p&&C.includes(t)||(T([...C,t]),S(``)))},[p,f,h,T,C]),D=i.useCallback(e=>{T(C.filter(t=>t!==e))},[T,C]);return(0,o.jsx)(`div`,{"data-slot":`tag-input`,className:t.cn(`grid gap-2`,g),..._,children:(0,o.jsxs)(`div`,{className:t.cn(`flex min-h-12 flex-wrap items-center gap-2 rounded-2xl border border-[color:var(--aui-surface-border)] bg-[color:color-mix(in_srgb,var(--aui-control-bg)_78%,white_22%)] px-3 py-2.5 shadow-sm transition focus-within:border-[color:var(--aui-brand-strong)] focus-within:ring-4 focus-within:ring-[color:color-mix(in_srgb,var(--aui-brand-strong)_14%,transparent)] dark:bg-[color:color-mix(in_srgb,var(--aui-control-bg)_90%,black_10%)]`,u&&`opacity-60`,d&&`bg-muted/30`),children:[C.map(e=>(0,o.jsxs)(r.Badge,{variant:`secondary`,className:`h-8 gap-1 rounded-full border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-page-bg)] px-3 pr-1 text-[13px] font-medium shadow-sm`,children:[e,!d&&!u&&(0,o.jsx)(`button`,{type:`button`,className:`inline-flex size-5 items-center justify-center rounded-full text-muted-foreground transition hover:bg-[color:var(--aui-control-bg)] hover:text-foreground`,onClick:n=>{t.stopInteractivePropagation(n),D(e)},onMouseDown:t.stopInteractivePropagation,onDoubleClick:t.stopInteractivePropagation,children:(0,o.jsx)(a.XIcon,{className:`size-3`})})]},e)),!d&&(0,o.jsx)(n.Input,{value:x,disabled:u||w,placeholder:l,className:`h-8 min-w-32 flex-1 border-0 bg-transparent px-1 text-sm shadow-none placeholder:text-[color:var(--aui-text-muted)] focus-visible:ring-0`,onChange:e=>S(e.target.value),onBlur:()=>E(x),onKeyDown:e=>{m.includes(e.key)&&(e.preventDefault(),E(x)),e.key===`Backspace`&&!x&&C.length&&D(C[C.length-1])}}),f!==void 0&&(0,o.jsxs)(`span`,{className:`ml-auto text-xs font-medium text-muted-foreground`,children:[C.length,`/`,f]})]})})}exports.TagInput=s;

package/dist/src/components/inputs/tag-input.js

@@ -0,0 +1,69 @@
+"use client";
+import { cn as e, stopInteractivePropagation as t } from "../../lib/utils.js";
+import { Input as n } from "../ui/input/index.js";
+import { Badge as r } from "../ui/badge/index.js";
+import * as i from "react";
+import { XIcon as a } from "lucide-react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/components/inputs/tag-input.tsx
+function c({ value: c, defaultValue: l = [], onValueChange: u, placeholder: d = "Add tag...", disabled: f = !1, readOnly: p = !1, maxTags: m, allowDuplicates: h = !1, separators: g = [",", "Enter"], normalizeTag: _ = (e) => e.trim(), className: v, ...y }) {
+	let b = c !== void 0, [x, S] = i.useState(l), [C, w] = i.useState(""), T = b ? c : x, E = m !== void 0 && T.length >= m, D = i.useCallback((e) => {
+		b || S(e), u?.(e);
+	}, [b, u]), O = i.useCallback((e) => {
+		let t = _(e);
+		t && (m !== void 0 && T.length >= m || !h && T.includes(t) || (D([...T, t]), w("")));
+	}, [
+		h,
+		m,
+		_,
+		D,
+		T
+	]), k = i.useCallback((e) => {
+		D(T.filter((t) => t !== e));
+	}, [D, T]);
+	return /* @__PURE__ */ o("div", {
+		"data-slot": "tag-input",
+		className: e("grid gap-2", v),
+		...y,
+		children: /* @__PURE__ */ s("div", {
+			className: e("flex min-h-12 flex-wrap items-center gap-2 rounded-2xl border border-[color:var(--aui-surface-border)] bg-[color:color-mix(in_srgb,var(--aui-control-bg)_78%,white_22%)] px-3 py-2.5 shadow-sm transition focus-within:border-[color:var(--aui-brand-strong)] focus-within:ring-4 focus-within:ring-[color:color-mix(in_srgb,var(--aui-brand-strong)_14%,transparent)] dark:bg-[color:color-mix(in_srgb,var(--aui-control-bg)_90%,black_10%)]", f && "opacity-60", p && "bg-muted/30"),
+			children: [
+				T.map((e) => /* @__PURE__ */ s(r, {
+					variant: "secondary",
+					className: "h-8 gap-1 rounded-full border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-page-bg)] px-3 pr-1 text-[13px] font-medium shadow-sm",
+					children: [e, !p && !f && /* @__PURE__ */ o("button", {
+						type: "button",
+						className: "inline-flex size-5 items-center justify-center rounded-full text-muted-foreground transition hover:bg-[color:var(--aui-control-bg)] hover:text-foreground",
+						onClick: (n) => {
+							t(n), k(e);
+						},
+						onMouseDown: t,
+						onDoubleClick: t,
+						children: /* @__PURE__ */ o(a, { className: "size-3" })
+					})]
+				}, e)),
+				!p && /* @__PURE__ */ o(n, {
+					value: C,
+					disabled: f || E,
+					placeholder: d,
+					className: "h-8 min-w-32 flex-1 border-0 bg-transparent px-1 text-sm shadow-none placeholder:text-[color:var(--aui-text-muted)] focus-visible:ring-0",
+					onChange: (e) => w(e.target.value),
+					onBlur: () => O(C),
+					onKeyDown: (e) => {
+						g.includes(e.key) && (e.preventDefault(), O(C)), e.key === "Backspace" && !C && T.length && k(T[T.length - 1]);
+					}
+				}),
+				m !== void 0 && /* @__PURE__ */ s("span", {
+					className: "ml-auto text-xs font-medium text-muted-foreground",
+					children: [
+						T.length,
+						"/",
+						m
+					]
+				})
+			]
+		})
+	});
+}
+//#endregion
+export { c as TagInput };

package/dist/src/components/inputs/time-picker.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("react/jsx-runtime");function i({label:e,className:n,children:i}){return(0,r.jsxs)(`label`,{className:t.cn(`grid gap-1.5 text-sm`,n),children:[e&&(0,r.jsx)(`span`,{className:`font-medium`,children:e}),i]})}function a({label:e,className:n,...a}){return(0,r.jsx)(i,{label:e,children:(0,r.jsx)(`input`,{type:`time`,className:t.cn(`h-10 rounded-md border bg-background px-3 text-sm outline-none ring-offset-background focus-visible:ring-2 focus-visible:ring-ring`,n),...a})})}function o({label:e,className:n,...a}){return(0,r.jsx)(i,{label:e,children:(0,r.jsx)(`input`,{type:`datetime-local`,className:t.cn(`h-10 rounded-md border bg-background px-3 text-sm outline-none ring-offset-background focus-visible:ring-2 focus-visible:ring-ring`,n),...a})})}function s({from:e,to:n,onFromChange:i,onToChange:o,disabled:s,className:c,...l}){return(0,r.jsxs)(`div`,{"data-slot":`time-range-picker`,className:t.cn(`grid gap-2 sm:grid-cols-2`,c),...l,children:[(0,r.jsx)(a,{value:e,disabled:s,onChange:e=>i?.(e.target.value)}),(0,r.jsx)(a,{value:n,disabled:s,onChange:e=>o?.(e.target.value)})]})}exports.DateTimePicker=o,exports.TimePicker=a,exports.TimeRangePicker=s;

package/dist/src/components/inputs/time-picker.js

@@ -0,0 +1,51 @@
+import { cn as e } from "../../lib/utils.js";
+import "react";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/components/inputs/time-picker.tsx
+function r({ label: r, className: i, children: a }) {
+	return /* @__PURE__ */ n("label", {
+		className: e("grid gap-1.5 text-sm", i),
+		children: [r && /* @__PURE__ */ t("span", {
+			className: "font-medium",
+			children: r
+		}), a]
+	});
+}
+function i({ label: n, className: i, ...a }) {
+	return /* @__PURE__ */ t(r, {
+		label: n,
+		children: /* @__PURE__ */ t("input", {
+			type: "time",
+			className: e("h-10 rounded-md border bg-background px-3 text-sm outline-none ring-offset-background focus-visible:ring-2 focus-visible:ring-ring", i),
+			...a
+		})
+	});
+}
+function a({ label: n, className: i, ...a }) {
+	return /* @__PURE__ */ t(r, {
+		label: n,
+		children: /* @__PURE__ */ t("input", {
+			type: "datetime-local",
+			className: e("h-10 rounded-md border bg-background px-3 text-sm outline-none ring-offset-background focus-visible:ring-2 focus-visible:ring-ring", i),
+			...a
+		})
+	});
+}
+function o({ from: r, to: a, onFromChange: o, onToChange: s, disabled: c, className: l, ...u }) {
+	return /* @__PURE__ */ n("div", {
+		"data-slot": "time-range-picker",
+		className: e("grid gap-2 sm:grid-cols-2", l),
+		...u,
+		children: [/* @__PURE__ */ t(i, {
+			value: r,
+			disabled: c,
+			onChange: (e) => o?.(e.target.value)
+		}), /* @__PURE__ */ t(i, {
+			value: a,
+			disabled: c,
+			onChange: (e) => s?.(e.target.value)
+		})]
+	});
+}
+//#endregion
+export { a as DateTimePicker, i as TimePicker, o as TimeRangePicker };

package/dist/src/components/layout/app-header.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("react/jsx-runtime");function i({className:e,left:n,center:i,right:a,sticky:o=!0,heightClassName:s=`h-14`,children:c,...l}){return(0,r.jsx)(`header`,{"data-slot":`app-header`,"data-sticky":o||void 0,className:t.cn(`z-30 flex shrink-0 items-center gap-3 border-b bg-background/95 px-4 backdrop-blur supports-[backdrop-filter]:bg-background/80`,o&&`sticky top-0`,s,e),...l,children:c??(0,r.jsxs)(r.Fragment,{children:[n&&(0,r.jsx)(`div`,{className:`flex min-w-0 flex-1 items-center gap-2`,children:n}),i&&(0,r.jsx)(`div`,{className:`hidden min-w-0 flex-1 items-center justify-center md:flex`,children:i}),a&&(0,r.jsx)(`div`,{className:`ml-auto flex shrink-0 items-center gap-2`,children:a})]})})}exports.AppHeader=i;

package/dist/src/components/layout/app-header.js

@@ -0,0 +1,28 @@
+import { cn as e } from "../../lib/utils.js";
+import "react";
+import { Fragment as t, jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/components/layout/app-header.tsx
+function i({ className: i, left: a, center: o, right: s, sticky: c = !0, heightClassName: l = "h-14", children: u, ...d }) {
+	return /* @__PURE__ */ n("header", {
+		"data-slot": "app-header",
+		"data-sticky": c || void 0,
+		className: e("z-30 flex shrink-0 items-center gap-3 border-b bg-background/95 px-4 backdrop-blur supports-[backdrop-filter]:bg-background/80", c && "sticky top-0", l, i),
+		...d,
+		children: u ?? /* @__PURE__ */ r(t, { children: [
+			a && /* @__PURE__ */ n("div", {
+				className: "flex min-w-0 flex-1 items-center gap-2",
+				children: a
+			}),
+			o && /* @__PURE__ */ n("div", {
+				className: "hidden min-w-0 flex-1 items-center justify-center md:flex",
+				children: o
+			}),
+			s && /* @__PURE__ */ n("div", {
+				className: "ml-auto flex shrink-0 items-center gap-2",
+				children: s
+			})
+		] })
+	});
+}
+//#endregion
+export { i as AppHeader };

package/dist/src/components/layout/app-sidebar.cjs

@@ -0,0 +1 @@
+"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs"),n=require("../ui/tooltip/index.cjs"),r=require("../../hooks/use-is-mobile.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("lucide-react"),o=require("react/jsx-runtime");var s=1024,c=`18rem`,l=`4.75rem`,u=`min(88vw, 22rem)`;function d({active:e,disabled:n}){return t.cn(`border border-transparent bg-transparent text-[color:color-mix(in_oklch,var(--sidebar-foreground),transparent_18%)] hover:border-[color:var(--aui-sidebar-item-active-border)] hover:bg-[color:var(--aui-sidebar-item-hover-bg)] hover:text-[color:var(--sidebar-foreground)] focus-visible:border-[color:var(--sidebar-ring)] focus-visible:bg-[color:var(--aui-sidebar-item-hover-bg)] focus-visible:text-[color:var(--sidebar-foreground)] focus-visible:shadow-[0_0_0_3px_color-mix(in_oklch,var(--sidebar-ring),transparent_82%)]`,e&&`border-[color:var(--aui-sidebar-item-active-border)] bg-[color:var(--aui-sidebar-item-active-bg)] text-[color:var(--aui-sidebar-item-active-fg)] shadow-[inset_0_1px_0_rgba(255,255,255,0.08),0_10px_24px_color-mix(in_oklch,var(--sidebar-primary),transparent_88%)]`,n&&`hover:border-transparent hover:bg-transparent hover:text-[color:color-mix(in_oklch,var(--sidebar-foreground),transparent_18%)]`)}function f(e){return e.items?.some(e=>!e.hidden)??!1}function p(e){return e.active?!0:e.items?.some(e=>p(e))??!1}function m(e,t){e.onSelect?.(),t?.(e)}function h({item:e,collapsed:r,depth:i,onItemSelect:a,renderLink:s}){let c={"aria-current":e.current??(e.active?`page`:void 0),"aria-disabled":e.disabled||void 0,"data-slot":`app-sidebar-item`,"data-active":e.active||void 0,"data-disabled":e.disabled||void 0,"data-depth":String(i),className:t.cn(`flex min-h-9 items-center gap-2 rounded-lg border border-transparent px-2.5 text-sm font-medium outline-none transition-[background-color,border-color,color,box-shadow] data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50`,d({active:e.active,disabled:e.disabled}),r&&`justify-center px-2`)},l=(0,o.jsxs)(o.Fragment,{children:[e.icon&&(0,o.jsx)(`span`,{className:`shrink-0`,children:e.icon}),!r&&(0,o.jsx)(`span`,{className:`min-w-0 flex-1 truncate`,children:e.label}),!r&&e.badge&&(0,o.jsx)(`span`,{className:`shrink-0`,children:e.badge})]}),u=t=>r?(0,o.jsx)(n.Tooltip,{content:e.tooltip??e.label,side:`right`,children:(0,o.jsx)(`span`,{className:`block`,children:t})}):t;return e.href?.startsWith(`/`)?u(s?(0,o.jsx)(o.Fragment,{children:s({item:e,href:e.href,...c,onClick:t=>{if(e.disabled){t.preventDefault();return}m(e,a)},children:l})}):(0,o.jsx)(`a`,{href:e.href,...c,onClick:t=>{if(e.disabled){t.preventDefault();return}m(e,a)},children:l})):e.href?u((0,o.jsx)(`button`,{type:`button`,...c,className:t.cn(c.className,`w-full`),onClick:()=>{if(e.disabled)return;let t=e.href;if(t){if(m(e,a),t.startsWith(`http`)){window.open(t,`_blank`,`noopener,noreferrer`);return}window.location.assign(t)}},children:l})):u((0,o.jsx)(`button`,{type:`button`,disabled:e.disabled,...c,onClick:()=>{e.disabled||m(e,a)},children:l}))}function g({items:e,collapsed:r,depth:s,onItemSelect:c,renderLink:l}){return e.map(e=>{if(e.hidden)return null;let u=f(e),m=p(e),_=!r&&s===0&&e.sectionLabel;if(!u)return(0,o.jsxs)(i.Fragment,{children:[_?(0,o.jsx)(`div`,{"data-slot":`app-sidebar-group-label`,className:`px-2.5 pb-1 pt-3 text-[11px] font-semibold uppercase tracking-[0.14em] text-muted-foreground first:pt-0`,children:e.sectionLabel}):null,(0,o.jsx)(h,{item:e,collapsed:r,depth:s,onItemSelect:c,renderLink:l})]},e.key);let v=e.defaultExpanded??m;return(0,o.jsxs)(`div`,{"data-slot":`app-sidebar-group`,"data-depth":s,children:[_&&(0,o.jsx)(`div`,{"data-slot":`app-sidebar-group-label`,className:`px-2.5 pb-1 pt-3 text-[11px] font-semibold uppercase tracking-[0.14em] text-muted-foreground first:pt-0`,children:e.sectionLabel}),(0,o.jsxs)(`details`,{"data-slot":`app-sidebar-group-details`,open:v,className:`group/app-sidebar-details`,children:[(0,o.jsxs)(`summary`,{"data-slot":`app-sidebar-group-trigger`,className:t.cn(`flex min-h-9 list-none items-center gap-2 rounded-lg border border-transparent text-sm font-medium outline-none transition-[background-color,border-color,color,box-shadow]`,d({active:m}),r?`justify-center px-2`:`px-2.5`),children:[e.icon?r?(0,o.jsx)(n.Tooltip,{content:e.tooltip??e.label,side:`right`,children:(0,o.jsx)(`span`,{className:`shrink-0`,children:e.icon})}):(0,o.jsx)(`span`,{className:`shrink-0`,children:e.icon}):null,!r&&(0,o.jsx)(`span`,{className:`min-w-0 flex-1 truncate`,children:e.label}),!r&&e.badge&&(0,o.jsx)(`span`,{className:`shrink-0`,children:e.badge}),!r&&(0,o.jsx)(a.ChevronRightIcon,{"data-slot":`app-sidebar-group-chevron`,className:`ml-auto size-3.5 shrink-0 text-muted-foreground transition-transform group-open/app-sidebar-details:rotate-90`})]}),(0,o.jsx)(`div`,{"data-slot":`app-sidebar-group-content`,className:t.cn(`mt-1 space-y-1`,!r&&`pl-3`),children:(0,o.jsx)(g,{items:e.items??[],collapsed:r,depth:s+1,onItemSelect:c,renderLink:l})})]})]},e.key)})}function _({item:e,collapsed:r,onItemSelect:i}){let a=(0,o.jsxs)(`button`,{type:`button`,"data-slot":`app-sidebar-action`,"data-active":e.active||void 0,"data-disabled":e.disabled||void 0,className:t.cn(`flex min-h-9 items-center gap-2 rounded-lg border border-transparent px-2.5 text-sm font-medium outline-none transition-[background-color,border-color,color,box-shadow] data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50`,d({active:e.active,disabled:e.disabled}),r&&`justify-center px-2`),disabled:e.disabled,onClick:()=>{e.disabled||m(e,i)},children:[e.icon?(0,o.jsx)(`span`,{className:`shrink-0`,children:e.icon}):null,r?null:(0,o.jsx)(`span`,{className:`min-w-0 flex-1 truncate`,children:e.label}),!r&&e.badge?(0,o.jsx)(`span`,{className:`shrink-0`,children:e.badge}):null]});return r?(0,o.jsx)(n.Tooltip,{content:e.tooltip??e.label,side:`right`,children:(0,o.jsx)(`span`,{className:`block`,children:a})}):a}function v({account:e,collapsed:r,onAfterSelect:i}){let a=(0,o.jsxs)(`button`,{type:`button`,"data-slot":`app-sidebar-account`,className:t.cn(`flex w-full items-center gap-3 rounded-[min(var(--radius-xl),16px)] border border-transparent text-left transition-[background-color,border-color,color,box-shadow]`,d({}),r?`justify-center px-2 py-2.5`:`px-3 py-2.5`),onClick:()=>{if(e.onSelect?.(),i?.(),e.href){if(e.href.startsWith(`http`)){window.open(e.href,`_blank`,`noopener,noreferrer`);return}window.location.assign(e.href)}},children:[e.avatar?(0,o.jsx)(`span`,{"data-slot":`app-sidebar-account-avatar`,className:`inline-flex size-9 shrink-0 items-center justify-center overflow-hidden rounded-full border border-border/65 bg-muted/45 text-sm font-semibold`,children:e.avatar}):null,r?null:(0,o.jsxs)(`span`,{className:`min-w-0 flex-1`,children:[(0,o.jsx)(`span`,{"data-slot":`app-sidebar-account-label`,className:`block truncate text-sm font-semibold text-foreground`,children:e.label}),e.description?(0,o.jsx)(`span`,{"data-slot":`app-sidebar-account-description`,className:`block truncate text-xs text-muted-foreground`,children:e.description}):null]})]});return r?(0,o.jsx)(n.Tooltip,{content:e.tooltip??e.label,side:`right`,children:(0,o.jsx)(`span`,{className:`block`,children:a})}):a}function y({className:e,style:r,header:s,footer:u,items:d=[],collapsed:f=!1,width:p=c,collapsedWidth:m=l,collapsedRail:h,railItems:y=[],footerAccount:b,secondaryActions:x=[],footerSecondary:S,footerClassName:C,tooltipOnCollapsed:w,onItemSelect:T,renderItem:E,renderLink:D,children:O,mobile:k,mobileTitle:A,mobileDescription:j,onRequestClose:M,closeOnSelect:N=!0,...P}){let F=d.filter(e=>!e.hidden),I=y.filter(e=>!e.hidden),L=x.filter(e=>!e.hidden),R=i.useCallback(e=>{T?.(e),k&&N&&M?.()},[N,k,T,M]),z=k&&(A||j||M);return(0,o.jsxs)(`aside`,{"data-slot":`app-sidebar`,"data-collapsed":f||void 0,"data-mobile":k||void 0,className:t.cn(`flex h-full min-h-0 flex-col overflow-hidden`,e),style:{width:f?m:p,minWidth:f?m:p,...r},...P,children:[(s||z)&&(0,o.jsx)(`div`,{"data-slot":`app-sidebar-header`,className:`shrink-0 border-b p-3`,children:(0,o.jsxs)(`div`,{className:`flex items-start gap-3`,children:[(0,o.jsxs)(`div`,{className:`min-w-0 flex-1`,children:[s??null,z?(0,o.jsxs)(`div`,{className:t.cn(s&&`mt-3`),children:[A?(0,o.jsx)(`p`,{className:`text-sm font-semibold text-foreground`,children:A}):null,j?(0,o.jsx)(`p`,{className:`mt-1 text-xs leading-5 text-muted-foreground`,children:j}):null]}):null]}),k&&M?(0,o.jsx)(`button`,{type:`button`,"aria-label":`Close navigation`,"data-slot":`app-sidebar-mobile-close`,className:`inline-flex size-9 shrink-0 items-center justify-center rounded-xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] text-[color:var(--aui-page-foreground)] transition hover:bg-[color:var(--aui-control-bg)]`,onClick:M,children:(0,o.jsx)(a.XIcon,{className:`size-4`})}):null]})}),(0,o.jsxs)(`nav`,{"data-slot":`app-sidebar-nav`,className:`min-h-0 flex-1 space-y-1 overflow-y-auto overscroll-contain p-2`,children:[O??F.map(e=>{if(!E)return null;let t=E(e,{collapsed:f});return!f||!w?(0,o.jsx)(i.Fragment,{children:t},e.key):(0,o.jsx)(n.Tooltip,{content:e.tooltip??e.label,side:`right`,children:(0,o.jsx)(`span`,{className:`block`,children:t})},e.key)}),!O&&!E&&(0,o.jsx)(g,{items:F,collapsed:f,depth:0,onItemSelect:R,renderLink:D})]}),(b||S||u||L.length>0||f&&(h||I.length>0))&&(0,o.jsxs)(`div`,{"data-slot":`app-sidebar-footer`,className:t.cn(`shrink-0 border-t p-3`,C),children:[f?(0,o.jsxs)(o.Fragment,{children:[I.length>0?(0,o.jsx)(`div`,{"data-slot":`app-sidebar-rail-actions`,className:`grid gap-2`,children:I.map(e=>(0,o.jsx)(_,{item:e,collapsed:!0,onItemSelect:R},e.key))}):null,h?(0,o.jsx)(`div`,{"data-slot":`app-sidebar-rail`,children:h}):null]}):null,!f&&b?(0,o.jsx)(`div`,{"data-slot":`app-sidebar-account-wrap`,className:`mb-3`,children:(0,o.jsx)(v,{account:b,collapsed:!1,onAfterSelect:()=>{k&&N&&M?.()}})}):null,!f&&L.length>0?(0,o.jsx)(`div`,{"data-slot":`app-sidebar-secondary-actions`,className:`mb-3 grid gap-2`,children:L.map(e=>(0,o.jsx)(_,{item:e,collapsed:!1,onItemSelect:R},e.key))}):null,!f&&S?(0,o.jsx)(`div`,{"data-slot":`app-sidebar-footer-secondary`,className:`mb-3`,children:S}):null,f&&b?(0,o.jsx)(`div`,{"data-slot":`app-sidebar-account-wrap`,children:(0,o.jsx)(v,{account:b,collapsed:!0,onAfterSelect:()=>{k&&N&&M?.()}})}):null,!f&&u]})]})}function b({className:e,header:n,footer:d,items:f=[],collapsed:p=!1,width:m=c,collapsedWidth:h=l,mobileWidth:g=u,collapsedRail:_,railItems:v=[],footerAccount:b,secondaryActions:x=[],footerSecondary:S,tooltipOnCollapsed:C=!0,responsive:w=!0,mobileBreakpoint:T=s,mobileOpen:E,defaultMobileOpen:D=!1,onMobileOpenChange:O,mobileTitle:k,mobileDescription:A,mobileToggleLabel:j=`Open navigation`,mobileToggleIcon:M,showMobileToggle:N=!0,closeOnSelect:P=!0,mobileToggleClassName:F,mobilePanelClassName:I,mobileOverlayClassName:L,renderMobileToggle:R,onItemSelect:z,renderItem:B,renderLink:V,children:H,...U}){let W=r.useIsMobile(T),G=w&&W,[K,q]=i.useState(D),J=E??K,Y=i.useCallback(e=>{E??q(e),O?.(e)},[E,O]);i.useEffect(()=>{!G&&J&&Y(!1)},[G,J,Y]),i.useEffect(()=>{if(!G||!J)return;let e=document.body.style.overflow;document.body.style.overflow=`hidden`;let t=e=>{e.key===`Escape`&&Y(!1)};return window.addEventListener(`keydown`,t),()=>{document.body.style.overflow=e,window.removeEventListener(`keydown`,t)}},[G,J,Y]);let X={className:e,header:n,footer:d,items:f,collapsed:p,width:m,collapsedWidth:h,collapsedRail:_,railItems:v,footerAccount:b,secondaryActions:x,footerSecondary:S,tooltipOnCollapsed:C,closeOnSelect:P,onItemSelect:z,renderItem:B,renderLink:V,children:H,...U};if(!w||!G)return(0,o.jsx)(y,{...X});let Z=(0,o.jsxs)(`button`,{type:`button`,"aria-label":J?`Close navigation`:j,"data-slot":`app-sidebar-mobile-trigger`,"data-state":J?`open`:`closed`,className:t.cn(`inline-flex min-h-10 items-center gap-2 rounded-xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] px-3 text-sm font-medium text-[color:var(--aui-page-foreground)] shadow-sm transition hover:bg-[color:var(--aui-page-bg-alt)]`,F),onClick:()=>Y(!J),children:[(0,o.jsx)(`span`,{className:`inline-flex size-8 items-center justify-center rounded-lg bg-[color:var(--aui-page-bg-alt)]`,children:M??(0,o.jsx)(a.MenuIcon,{className:`size-4`})}),(0,o.jsx)(`span`,{children:J?`Close navigation`:j})]});return(0,o.jsxs)(o.Fragment,{children:[N?R?R({open:J,setOpen:Y}):Z:null,(0,o.jsxs)(`div`,{"data-slot":`app-sidebar-mobile-root`,className:`relative z-40`,children:[(0,o.jsx)(`button`,{type:`button`,"aria-label":`Dismiss navigation`,"data-slot":`app-sidebar-mobile-overlay`,"data-state":J?`open`:`closed`,className:t.cn(`fixed inset-0 z-40 bg-black/45 transition-opacity duration-200`,J?`opacity-100`:`pointer-events-none opacity-0`,L),onClick:()=>Y(!1)}),(0,o.jsx)(y,{...X,mobile:!0,collapsed:!1,mobileTitle:k,mobileDescription:A,onRequestClose:()=>Y(!1),"data-state":J?`open`:`closed`,role:`dialog`,"aria-modal":`true`,"aria-label":typeof k==`string`?k:`Navigation`,className:t.cn(`fixed inset-y-0 left-0 z-50 max-w-[22rem] border-r border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] shadow-2xl transition-transform duration-200 ease-out`,J?`translate-x-0`:`-translate-x-full`,I,e),style:{width:g,minWidth:g}})]})]})}exports.Sidebar=b;