tembro 6.1.0 → 6.1.1

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

@@ -19,101 +19,118 @@ function c(e, t, n) {
 	let r = o(e);
 	return n ? `${r}${Math.round(Math.min(100, Math.max(0, t)) / 100 * 255).toString(16).padStart(2, "0")}` : r;
 }
-function l({ value: a, defaultValue: l = "#2563eb", onValueChange: u, swatches: d = [
+function l(e) {
+	let t = o(e);
+	return { background: `linear-gradient(90deg, ${t}00 0%, ${t}ff 100%)` };
+}
+function u({ value: a, defaultValue: u = "#2563eb", onValueChange: d, swatches: f = [
 	"#0f172a",
 	"#2563eb",
 	"#059669",
 	"#d97706",
 	"#dc2626",
 	"#7c3aed"
-], showAlpha: f = !1, disabled: p = !1, label: m, labels: h, className: g, ..._ }) {
-	let [v, y] = t.useState(() => c(l, s(l), f)), b = c(a ?? v, s(a ?? v), f), [x, S] = t.useState(b);
-	t.useEffect(() => S(b), [b]);
-	let C = (e) => {
-		let t = c(e, s(e), f);
-		a === void 0 && y(t), u?.(t);
-	}, w = () => {
-		if (!i.test(x.trim())) {
-			S(b);
+], showAlpha: p = !1, disabled: m = !1, label: h, labels: g, className: _, ...v }) {
+	let [y, b] = t.useState(() => c(u, s(u), p)), x = c(a ?? y, s(a ?? y), p), [S, C] = t.useState(x);
+	t.useEffect(() => C(x), [x]);
+	let w = (e) => {
+		let t = c(e, s(e), p);
+		a === void 0 && b(t), d?.(t);
+	}, T = () => {
+		if (!i.test(S.trim())) {
+			C(x);
 			return;
 		}
-		C(x);
+		w(S);
 	};
 	return /* @__PURE__ */ r("div", {
 		"data-slot": "color-picker",
-		className: e("grid gap-3", g),
-		..._,
+		className: e("grid gap-3", _),
+		...v,
 		children: [
-			m ? /* @__PURE__ */ n("div", {
+			h ? /* @__PURE__ */ n("div", {
 				className: "text-sm font-medium text-foreground",
-				children: m
+				children: h
 			}) : null,
 			/* @__PURE__ */ r("div", {
 				className: "flex min-w-0 items-center gap-2",
 				children: [/* @__PURE__ */ r("label", {
 					className: "relative size-10 shrink-0 overflow-hidden rounded-md border bg-background shadow-sm focus-within:ring-2 focus-within:ring-ring",
-					children: [/* @__PURE__ */ n("span", {
-						className: "sr-only",
-						children: h?.color ?? "Choose color"
-					}), /* @__PURE__ */ n("input", {
-						type: "color",
-						"aria-label": h?.color ?? "Choose color",
-						value: o(b),
-						disabled: p,
-						className: "absolute -inset-2 size-14 cursor-pointer border-0 bg-transparent p-0 disabled:cursor-not-allowed",
-						onChange: (e) => C(c(e.target.value, s(b), f))
-					})]
+					children: [
+						/* @__PURE__ */ n("span", {
+							"aria-hidden": "true",
+							className: "absolute inset-0 bg-[linear-gradient(45deg,#e2e8f0_25%,transparent_25%),linear-gradient(-45deg,#e2e8f0_25%,transparent_25%),linear-gradient(45deg,transparent_75%,#e2e8f0_75%),linear-gradient(-45deg,transparent_75%,#e2e8f0_75%)] bg-[length:10px_10px] bg-[position:0_0,0_5px,5px_-5px,-5px_0]"
+						}),
+						/* @__PURE__ */ n("span", {
+							"aria-hidden": "true",
+							className: "absolute inset-0",
+							style: { backgroundColor: x }
+						}),
+						/* @__PURE__ */ n("span", {
+							className: "sr-only",
+							children: g?.color ?? "Choose color"
+						}),
+						/* @__PURE__ */ n("input", {
+							type: "color",
+							"aria-label": g?.color ?? "Choose color",
+							value: o(x),
+							disabled: m,
+							className: "absolute -inset-2 size-14 cursor-pointer border-0 bg-transparent p-0 disabled:cursor-not-allowed",
+							onChange: (e) => w(c(e.target.value, s(x), p))
+						})
+					]
 				}), /* @__PURE__ */ n("input", {
-					"aria-label": h?.hex ?? "Hex color",
-					value: x,
-					disabled: p,
+					"aria-label": g?.hex ?? "Hex color",
+					value: S,
+					disabled: m,
 					spellCheck: !1,
 					className: "h-10 min-w-0 flex-1 rounded-md border bg-background px-3 font-mono text-sm uppercase outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
-					onChange: (e) => S(e.target.value),
-					onBlur: w,
+					onChange: (e) => C(e.target.value),
+					onBlur: T,
 					onKeyDown: (e) => {
-						e.key === "Enter" && (e.preventDefault(), w()), e.key === "Escape" && S(b);
+						e.key === "Enter" && (e.preventDefault(), T()), e.key === "Escape" && C(x);
 					}
 				})]
 			}),
-			f ? /* @__PURE__ */ r("label", {
+			p ? /* @__PURE__ */ r("label", {
 				className: "grid grid-cols-[1fr_auto] items-center gap-3 text-xs text-muted-foreground",
 				children: [
 					/* @__PURE__ */ n("span", {
 						className: "sr-only",
-						children: h?.alpha ?? "Opacity"
+						children: g?.alpha ?? "Opacity"
 					}),
 					/* @__PURE__ */ n("input", {
 						type: "range",
 						min: "0",
 						max: "100",
-						value: s(b),
-						disabled: p,
-						"aria-label": h?.alpha ?? "Opacity",
-						className: "w-full accent-foreground disabled:cursor-not-allowed",
-						onChange: (e) => C(c(b, Number(e.target.value), !0))
+						value: s(x),
+						disabled: m,
+						"aria-label": g?.alpha ?? "Opacity",
+						style: l(x),
+						className: "h-2 w-full cursor-pointer appearance-none rounded-full border border-border/70 outline-none focus-visible:ring-4 focus-visible:ring-ring/20 disabled:cursor-not-allowed [&::-webkit-slider-thumb]:size-4 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-background [&::-webkit-slider-thumb]:bg-foreground [&::-webkit-slider-thumb]:shadow-sm",
+						onChange: (e) => w(c(x, Number(e.target.value), !0))
 					}),
 					/* @__PURE__ */ r("span", {
 						className: "w-10 text-right tabular-nums",
-						children: [s(b), "%"]
+						children: [s(x), "%"]
 					})
 				]
 			}) : null,
-			d.length > 0 ? /* @__PURE__ */ n("div", {
+			f.length > 0 ? /* @__PURE__ */ n("div", {
 				role: "list",
 				"aria-label": "Color swatches",
 				className: "flex flex-wrap gap-2",
-				children: d.map((e) => {
-					let t = c(e, s(b), f), r = o(t) === o(b);
+				children: f.map((e) => {
+					let t = c(e, s(x), p), r = o(t) === o(x);
 					return /* @__PURE__ */ n("button", {
 						type: "button",
 						role: "listitem",
 						"aria-label": `Use ${e}`,
 						"aria-pressed": r,
-						disabled: p,
+						disabled: m,
 						className: "size-7 rounded-md border border-black/10 shadow-sm outline-none ring-offset-2 focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
 						style: { backgroundColor: o(t) },
-						onClick: () => C(t)
+						onClick: () => w(t)
 					}, e);
 				})
 			}) : null
@@ -121,4 +138,4 @@ function l({ value: a, defaultValue: l = "#2563eb", onValueChange: u, swatches:
 	});
 }
 //#endregion
-export { l as ColorPicker, s as getAlphaPercent, a as normalizeHexColor, c as withAlpha };
+export { u as ColorPicker, s as getAlphaPercent, a as normalizeHexColor, c as withAlpha };

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

@@ -1 +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;
+"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] focus-visible:ring-4 focus-visible:ring-[color:color-mix(in_oklch,var(--aui-brand-strong),transparent_78%)] 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)] [&::-webkit-slider-thumb]:transition-transform hover:[&::-webkit-slider-thumb]:scale-105`,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 focus-visible:ring-4 focus-visible:ring-[color:color-mix(in_oklch,var(--aui-brand-strong),transparent_78%)] 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)] [&::-webkit-slider-thumb]:transition-transform hover:[&::-webkit-slider-thumb]:scale-105`,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 focus-visible:ring-4 focus-visible:ring-[color:color-mix(in_oklch,var(--aui-brand-strong),transparent_78%)] 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)] [&::-webkit-slider-thumb]:transition-transform hover:[&::-webkit-slider-thumb]:scale-105`,onChange:e=>x(1,e.currentTarget.valueAsNumber),...g})]})]})]})}exports.RangeSlider=l,exports.Slider=s;

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

@@ -44,7 +44,7 @@ function s({ value: i, defaultValue: a = 0, onValueChange: s, min: c = 0, 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)]",
+			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] focus-visible:ring-4 focus-visible:ring-[color:color-mix(in_oklch,var(--aui-brand-strong),transparent_78%)] 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)] [&::-webkit-slider-thumb]:transition-transform hover:[&::-webkit-slider-thumb]:scale-105",
 			onChange: (e) => S(e.currentTarget.valueAsNumber),
 			..._
 		})]
@@ -97,7 +97,7 @@ function l({ value: i, defaultValue: a = [0, 100], onValueChange: o, min: s = 0,
 					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)]",
+					className: "pointer-events-none absolute inset-0 h-6 w-full cursor-pointer appearance-none bg-transparent outline-none focus-visible:ring-4 focus-visible:ring-[color:color-mix(in_oklch,var(--aui-brand-strong),transparent_78%)] 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)] [&::-webkit-slider-thumb]:transition-transform hover:[&::-webkit-slider-thumb]:scale-105",
 					onChange: (e) => S(0, e.currentTarget.valueAsNumber),
 					..._
 				}), /* @__PURE__ */ n("input", {
@@ -107,7 +107,7 @@ function l({ value: i, defaultValue: a = [0, 100], onValueChange: o, min: s = 0,
 					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)]",
+					className: "pointer-events-none absolute inset-0 h-6 w-full cursor-pointer appearance-none bg-transparent outline-none focus-visible:ring-4 focus-visible:ring-[color:color-mix(in_oklch,var(--aui-brand-strong),transparent_78%)] 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)] [&::-webkit-slider-thumb]:transition-transform hover:[&::-webkit-slider-thumb]:scale-105",
 					onChange: (e) => S(1, e.currentTarget.valueAsNumber),
 					..._
 				})]

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

@@ -1 +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/badge/index.cjs"),r=require("../ui/input/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)(n.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:`grid size-5 shrink-0 place-items-center rounded-full p-0 leading-none text-muted-foreground transition hover:bg-[color:var(--aui-control-bg)] hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40`,"aria-label":`Remove ${e}`,onClick:n=>{t.stopInteractivePropagation(n),D(e)},onMouseDown:t.stopInteractivePropagation,onDoubleClick:t.stopInteractivePropagation,children:(0,o.jsx)(a.XIcon,{className:`size-3`,strokeWidth:2})})]},e)),!d&&(0,o.jsx)(r.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;
+"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs"),n=require("../ui/badge/index.cjs"),r=require("../ui/input/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)(n.Badge,{variant:`secondary`,className:`h-8 gap-1.5 rounded-full border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-page-bg)] px-3 pr-1.5 text-[13px] font-medium leading-none shadow-sm`,children:[(0,o.jsx)(`span`,{className:`leading-none`,children:e}),!d&&!u&&(0,o.jsx)(`button`,{type:`button`,className:`inline-flex size-5 shrink-0 items-center justify-center rounded-full p-0 leading-none text-muted-foreground transition hover:bg-[color:var(--aui-control-bg)] hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40`,"aria-label":`Remove ${e}`,onClick:n=>{t.stopInteractivePropagation(n),D(e)},onMouseDown:t.stopInteractivePropagation,onDoubleClick:t.stopInteractivePropagation,children:(0,o.jsx)(a.XIcon,{className:`size-3`,strokeWidth:2.25})})]},e)),!d&&(0,o.jsx)(r.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

@@ -30,10 +30,13 @@ function c({ value: c, defaultValue: l = [], onValueChange: u, placeholder: d =
 			children: [
 				T.map((e) => /* @__PURE__ */ s(n, {
 					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", {
+					className: "h-8 gap-1.5 rounded-full border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-page-bg)] px-3 pr-1.5 text-[13px] font-medium leading-none shadow-sm",
+					children: [/* @__PURE__ */ o("span", {
+						className: "leading-none",
+						children: e
+					}), !p && !f && /* @__PURE__ */ o("button", {
 						type: "button",
-						className: "grid size-5 shrink-0 place-items-center rounded-full p-0 leading-none text-muted-foreground transition hover:bg-[color:var(--aui-control-bg)] hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40",
+						className: "inline-flex size-5 shrink-0 items-center justify-center rounded-full p-0 leading-none text-muted-foreground transition hover:bg-[color:var(--aui-control-bg)] hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40",
 						"aria-label": `Remove ${e}`,
 						onClick: (n) => {
 							t(n), k(e);
@@ -42,7 +45,7 @@ function c({ value: c, defaultValue: l = [], onValueChange: u, placeholder: d =
 						onDoubleClick: t,
 						children: /* @__PURE__ */ o(a, {
 							className: "size-3",
-							strokeWidth: 2
+							strokeWidth: 2.25
 						})
 					})]
 				}, e)),

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

@@ -1 +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;
+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({label:e,className:n,children:r}){return(0,i.jsxs)(`label`,{className:t.cn(`grid gap-1.5 text-sm`,n),children:[e&&(0,i.jsx)(`span`,{className:`font-medium`,children:e}),r]})}function o(e,t,n){e.preventDefault(),e.stopPropagation(),t?.({target:{value:``},currentTarget:{value:``}}),n?.()}function s({label:e,className:n,clearable:s=!1,onClear:c,value:l,defaultValue:u,disabled:d,onChange:f,...p}){let m=l===void 0?u!==void 0&&String(u).length>0:String(l).length>0;return(0,i.jsx)(a,{label:e,children:(0,i.jsxs)(`span`,{className:`relative grid`,children:[(0,i.jsx)(r.ClockIcon,{className:`pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground`}),(0,i.jsx)(`input`,{type:`time`,value:l,defaultValue:u,disabled:d,onChange:f,className:t.cn(`h-11 rounded-[var(--aui-control-radius,var(--radius-md))] border border-input/82 bg-background px-10 text-sm tabular-nums outline-none transition-[border-color,box-shadow] hover:border-ring/30 focus-visible:border-ring focus-visible:ring-4 focus-visible:ring-ring/16 disabled:cursor-not-allowed disabled:bg-muted disabled:text-muted-foreground`,n),...p}),s&&m&&!d?(0,i.jsx)(`button`,{type:`button`,"aria-label":`Clear time`,className:`absolute right-2 top-1/2 grid size-7 -translate-y-1/2 place-items-center rounded-md text-muted-foreground hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring`,onClick:e=>o(e,f,c),children:(0,i.jsx)(r.XIcon,{className:`size-3.5`})}):null]})})}function c({label:e,className:n,clearable:s=!1,onClear:c,value:l,defaultValue:u,disabled:d,onChange:f,...p}){let m=l===void 0?u!==void 0&&String(u).length>0:String(l).length>0;return(0,i.jsx)(a,{label:e,children:(0,i.jsxs)(`span`,{className:`relative grid`,children:[(0,i.jsx)(r.CalendarClockIcon,{className:`pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground`}),(0,i.jsx)(`input`,{type:`datetime-local`,value:l,defaultValue:u,disabled:d,onChange:f,className:t.cn(`h-11 rounded-[var(--aui-control-radius,var(--radius-md))] border border-input/82 bg-background px-10 text-sm tabular-nums outline-none transition-[border-color,box-shadow] hover:border-ring/30 focus-visible:border-ring focus-visible:ring-4 focus-visible:ring-ring/16 disabled:cursor-not-allowed disabled:bg-muted disabled:text-muted-foreground`,n),...p}),s&&m&&!d?(0,i.jsx)(`button`,{type:`button`,"aria-label":`Clear date and time`,className:`absolute right-2 top-1/2 grid size-7 -translate-y-1/2 place-items-center rounded-md text-muted-foreground hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring`,onClick:e=>o(e,f,c),children:(0,i.jsx)(r.XIcon,{className:`size-3.5`})}):null]})})}function l({from:e,to:n,onFromChange:r,onToChange:a,disabled:o,labels:c,className:l,...u}){return(0,i.jsxs)(`div`,{"data-slot":`time-range-picker`,className:t.cn(`grid gap-2 sm:grid-cols-[1fr_auto_1fr] sm:items-end`,l),...u,children:[(0,i.jsx)(s,{label:c?.from,value:e,clearable:!0,disabled:o,onChange:e=>r?.(e.target.value),onClear:()=>r?.(``)}),(0,i.jsx)(`span`,{className:`hidden h-11 items-center text-sm text-muted-foreground sm:inline-flex`,children:`to`}),(0,i.jsx)(s,{label:c?.to,value:n,clearable:!0,disabled:o,onChange:e=>a?.(e.target.value),onClear:()=>a?.(``)})]})}exports.DateTimePicker=c,exports.TimePicker=s,exports.TimeRangePicker=l;

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

@@ -1,51 +1,107 @@
 import { cn as e } from "../../lib/utils.js";
 import "react";
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { CalendarClockIcon as t, ClockIcon as n, XIcon as r } from "lucide-react";
+import { jsx as i, jsxs as a } 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", {
+function o({ label: t, className: n, children: r }) {
+	return /* @__PURE__ */ a("label", {
+		className: e("grid gap-1.5 text-sm", n),
+		children: [t && /* @__PURE__ */ i("span", {
 			className: "font-medium",
-			children: r
-		}), a]
+			children: t
+		}), r]
 	});
 }
-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 s(e, t, n) {
+	e.preventDefault(), e.stopPropagation(), t?.({
+		target: { value: "" },
+		currentTarget: { value: "" }
+	}), n?.();
+}
+function c({ label: t, className: c, clearable: l = !1, onClear: u, value: d, defaultValue: f, disabled: p, onChange: m, ...h }) {
+	let g = d === void 0 ? f !== void 0 && String(f).length > 0 : String(d).length > 0;
+	return /* @__PURE__ */ i(o, {
+		label: t,
+		children: /* @__PURE__ */ a("span", {
+			className: "relative grid",
+			children: [
+				/* @__PURE__ */ i(n, { className: "pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" }),
+				/* @__PURE__ */ i("input", {
+					type: "time",
+					value: d,
+					defaultValue: f,
+					disabled: p,
+					onChange: m,
+					className: e("h-11 rounded-[var(--aui-control-radius,var(--radius-md))] border border-input/82 bg-background px-10 text-sm tabular-nums outline-none transition-[border-color,box-shadow] hover:border-ring/30 focus-visible:border-ring focus-visible:ring-4 focus-visible:ring-ring/16 disabled:cursor-not-allowed disabled:bg-muted disabled:text-muted-foreground", c),
+					...h
+				}),
+				l && g && !p ? /* @__PURE__ */ i("button", {
+					type: "button",
+					"aria-label": "Clear time",
+					className: "absolute right-2 top-1/2 grid size-7 -translate-y-1/2 place-items-center rounded-md text-muted-foreground hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+					onClick: (e) => s(e, m, u),
+					children: /* @__PURE__ */ i(r, { className: "size-3.5" })
+				}) : null
+			]
 		})
 	});
 }
-function a({ label: n, className: i, ...a }) {
-	return /* @__PURE__ */ t(r, {
+function l({ label: n, className: c, clearable: l = !1, onClear: u, value: d, defaultValue: f, disabled: p, onChange: m, ...h }) {
+	let g = d === void 0 ? f !== void 0 && String(f).length > 0 : String(d).length > 0;
+	return /* @__PURE__ */ i(o, {
 		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
+		children: /* @__PURE__ */ a("span", {
+			className: "relative grid",
+			children: [
+				/* @__PURE__ */ i(t, { className: "pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" }),
+				/* @__PURE__ */ i("input", {
+					type: "datetime-local",
+					value: d,
+					defaultValue: f,
+					disabled: p,
+					onChange: m,
+					className: e("h-11 rounded-[var(--aui-control-radius,var(--radius-md))] border border-input/82 bg-background px-10 text-sm tabular-nums outline-none transition-[border-color,box-shadow] hover:border-ring/30 focus-visible:border-ring focus-visible:ring-4 focus-visible:ring-ring/16 disabled:cursor-not-allowed disabled:bg-muted disabled:text-muted-foreground", c),
+					...h
+				}),
+				l && g && !p ? /* @__PURE__ */ i("button", {
+					type: "button",
+					"aria-label": "Clear date and time",
+					className: "absolute right-2 top-1/2 grid size-7 -translate-y-1/2 place-items-center rounded-md text-muted-foreground hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+					onClick: (e) => s(e, m, u),
+					children: /* @__PURE__ */ i(r, { className: "size-3.5" })
+				}) : null
+			]
 		})
 	});
 }
-function o({ from: r, to: a, onFromChange: o, onToChange: s, disabled: c, className: l, ...u }) {
-	return /* @__PURE__ */ n("div", {
+function u({ from: t, to: n, onFromChange: r, onToChange: o, disabled: s, labels: l, className: u, ...d }) {
+	return /* @__PURE__ */ a("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)
-		})]
+		className: e("grid gap-2 sm:grid-cols-[1fr_auto_1fr] sm:items-end", u),
+		...d,
+		children: [
+			/* @__PURE__ */ i(c, {
+				label: l?.from,
+				value: t,
+				clearable: !0,
+				disabled: s,
+				onChange: (e) => r?.(e.target.value),
+				onClear: () => r?.("")
+			}),
+			/* @__PURE__ */ i("span", {
+				className: "hidden h-11 items-center text-sm text-muted-foreground sm:inline-flex",
+				children: "to"
+			}),
+			/* @__PURE__ */ i(c, {
+				label: l?.to,
+				value: n,
+				clearable: !0,
+				disabled: s,
+				onChange: (e) => o?.(e.target.value),
+				onClear: () => o?.("")
+			})
+		]
 	});
 }
 //#endregion
-export { a as DateTimePicker, i as TimePicker, o as TimeRangePicker };
+export { l as DateTimePicker, c as TimePicker, u as TimeRangePicker };

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

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./calendar-scheduler.cjs"),t=require("./dual-list-picker.cjs"),n=require("./file-manager.cjs"),r=require("./image-cropper.cjs"),i=require("./resizable-panel.cjs"),a=require("./rich-text-editor.cjs");exports.CalendarScheduler=e.CalendarScheduler,exports.DualListPicker=t.DualListPicker,exports.EditorToolbar=a.EditorToolbar,exports.FileManager=n.FileManager,exports.ImageCropper=r.ImageCropper,exports.ResizableHandle=i.ResizableHandle,exports.ResizablePanel=i.ResizablePanel,exports.ResizablePanelGroup=i.ResizablePanelGroup,exports.RichTextEditor=a.RichTextEditor,exports.createCroppedImageBlob=r.createCroppedImageBlob;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./calendar-scheduler.cjs"),t=require("./dual-list-picker.cjs"),n=require("./file-manager.cjs"),r=require("./resizable-panel.cjs"),i=require("./rich-text-editor.cjs"),a=require("./map.cjs"),o=require("./media-player.cjs"),s=require("./spreadsheet.cjs");exports.CalendarScheduler=e.CalendarScheduler,exports.DualListPicker=t.DualListPicker,exports.EditorToolbar=i.EditorToolbar,exports.FileManager=n.FileManager,exports.MapView=a.MapView,exports.MediaPlayer=o.MediaPlayer,exports.ResizableHandle=r.ResizableHandle,exports.ResizablePanel=r.ResizablePanel,exports.ResizablePanelGroup=r.ResizablePanelGroup,exports.RichTextEditor=i.RichTextEditor,exports.Spreadsheet=s.Spreadsheet;

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

@@ -1,7 +1,9 @@
 import { CalendarScheduler as e } from "./calendar-scheduler.js";
 import { DualListPicker as t } from "./dual-list-picker.js";
 import { FileManager as n } from "./file-manager.js";
-import { ImageCropper as r, createCroppedImageBlob as i } from "./image-cropper.js";
-import { ResizableHandle as a, ResizablePanel as o, ResizablePanelGroup as s } from "./resizable-panel.js";
-import { EditorToolbar as c, RichTextEditor as l } from "./rich-text-editor.js";
-export { e as CalendarScheduler, t as DualListPicker, c as EditorToolbar, n as FileManager, r as ImageCropper, a as ResizableHandle, o as ResizablePanel, s as ResizablePanelGroup, l as RichTextEditor, i as createCroppedImageBlob };
+import { ResizableHandle as r, ResizablePanel as i, ResizablePanelGroup as a } from "./resizable-panel.js";
+import { EditorToolbar as o, RichTextEditor as s } from "./rich-text-editor.js";
+import { MapView as c } from "./map.js";
+import { MediaPlayer as l } from "./media-player.js";
+import { Spreadsheet as u } from "./spreadsheet.js";
+export { e as CalendarScheduler, t as DualListPicker, o as EditorToolbar, n as FileManager, c as MapView, l as MediaPlayer, r as ResizableHandle, i as ResizablePanel, a as ResizablePanelGroup, s as RichTextEditor, u as Spreadsheet };

package/dist/src/components/modern/map.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/button/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(e){return Math.max(1,Math.min(19,e))}function c(e){return Number.isFinite(e)?e:0}function l(e,t,n){let r=c(n?.latitude??e.latitude),i=c(n?.longitude??e.longitude),a=.012*(20-s(t));return`https://www.openstreetmap.org/export/embed.html?bbox=${[i-a,r-a,i+a,r+a].map(e=>e.toFixed(6)).join(`%2C`)}&layer=mapnik&marker=${r.toFixed(6)}%2C${i.toFixed(6)}`}function u(e,t,n){let r=c(n?.latitude??e.latitude),i=c(n?.longitude??e.longitude);return`https://www.openstreetmap.org/?mlat=${r.toFixed(6)}&mlon=${i.toFixed(6)}#map=${s(t)}/${r.toFixed(6)}/${i.toFixed(6)}`}function d({center:e={latitude:41.311081,longitude:69.240562},zoom:c=13,markers:d=[],title:f=`Map`,description:p,height:m=420,showMarkerList:h=!0,showControls:g=!0,iframeTitle:_=`Interactive map`,mapUrl:v,onMarkerSelect:y,selectedMarkerKey:b,defaultSelectedMarkerKey:x,className:S,...C}){let[w,T]=i.useState(s(c)),[E,D]=i.useState(x??d[0]?.key),O=b??E,k=d.find(e=>e.key===O),A=v??l(e,w,k),j=u(e,w,k);i.useEffect(()=>{T(s(c))},[c]);let M=e=>{b===void 0&&D(e.key),y?.(e)};return(0,o.jsxs)(`section`,{"data-slot":`map-view`,className:t.cn(`grid min-w-0 gap-3 rounded-lg border bg-card p-3 shadow-sm`,S),...C,children:[(0,o.jsxs)(`div`,{className:`flex flex-wrap items-start justify-between gap-3`,children:[(0,o.jsxs)(`div`,{className:`min-w-0`,children:[f?(0,o.jsx)(`h3`,{className:`text-base font-semibold tracking-tight`,children:f}):null,p?(0,o.jsx)(`p`,{className:`mt-1 text-sm text-muted-foreground`,children:p}):null]}),g?(0,o.jsxs)(`div`,{className:`flex items-center gap-1`,children:[(0,o.jsx)(n.Button,{type:`button`,size:`icon-sm`,variant:`outline`,iconOnly:!0,"aria-label":`Zoom out`,onClick:()=>T(e=>s(e-1)),children:(0,o.jsx)(a.MinusIcon,{})}),(0,o.jsxs)(r.Badge,{variant:`outline`,tone:`muted`,children:[w,`x`]}),(0,o.jsx)(n.Button,{type:`button`,size:`icon-sm`,variant:`outline`,iconOnly:!0,"aria-label":`Zoom in`,onClick:()=>T(e=>s(e+1)),children:(0,o.jsx)(a.PlusIcon,{})}),(0,o.jsx)(n.Button,{type:`button`,size:`icon-sm`,variant:`outline`,iconOnly:!0,"aria-label":`Open in OpenStreetMap`,onClick:()=>window.open(j,`_blank`,`noopener,noreferrer`),children:(0,o.jsx)(a.ExternalLinkIcon,{})})]}):null]}),(0,o.jsxs)(`div`,{className:t.cn(`grid gap-3`,h&&d.length?`lg:grid-cols-[minmax(0,1fr)_18rem]`:``),children:[(0,o.jsxs)(`div`,{className:`relative overflow-hidden rounded-lg border bg-muted`,style:{height:m},children:[(0,o.jsx)(`iframe`,{title:_,src:A,className:`absolute inset-0 size-full border-0`,loading:`lazy`,referrerPolicy:`no-referrer-when-downgrade`}),k?(0,o.jsxs)(`div`,{className:`absolute left-3 top-3 max-w-[calc(100%-1.5rem)] rounded-lg border bg-background/95 p-3 text-sm shadow-lg backdrop-blur`,children:[(0,o.jsxs)(`div`,{className:`flex items-center gap-2 font-medium`,children:[(0,o.jsx)(a.LocateFixedIcon,{className:`size-4 text-primary`}),k.label]}),k.description?(0,o.jsx)(`p`,{className:`mt-1 text-xs text-muted-foreground`,children:k.description}):null]}):null]}),h&&d.length?(0,o.jsx)(`div`,{"data-slot":`map-marker-list`,className:`grid content-start gap-2`,children:d.map(e=>{let t=e.key===O;return(0,o.jsxs)(`button`,{type:`button`,"aria-pressed":t,className:`grid gap-1 rounded-lg border bg-background p-3 text-left text-sm outline-none transition hover:bg-muted/50 focus-visible:ring-2 focus-visible:ring-ring aria-pressed:border-primary aria-pressed:bg-primary/5`,onClick:()=>M(e),children:[(0,o.jsxs)(`span`,{className:`flex items-center justify-between gap-2`,children:[(0,o.jsxs)(`span`,{className:`flex min-w-0 items-center gap-2 font-medium`,children:[(0,o.jsx)(a.MapPinIcon,{className:`size-4 shrink-0 text-primary`}),(0,o.jsx)(`span`,{className:`truncate`,children:e.label})]}),(0,o.jsx)(r.Badge,{size:`sm`,tone:e.tone??`muted`,showDot:!0,children:t?`selected`:`marker`})]}),e.description?(0,o.jsx)(`span`,{className:`text-xs text-muted-foreground`,children:e.description}):null,(0,o.jsxs)(`span`,{className:`text-[11px] text-muted-foreground`,children:[e.latitude.toFixed(4),`, `,e.longitude.toFixed(4)]})]},e.key)})}):null]})]})}exports.MapView=d;