@wakastellar/ui 4.0.0 → 4.0.1

package/dist/components/waka-sla-tracker/index.es.js

@@ -0,0 +1,471 @@
+"use client";
+"use client";
+import { cn as e } from "../../utils/cn.es.js";
+import * as t from "react";
+import { AlertCircle as n, AlertTriangle as r, CheckCircle2 as i, Clock as a, Minus as o, TrendingDown as s, TrendingUp as c, XCircle as l } from "lucide-react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+//#region src/components/waka-sla-tracker/index.tsx
+var f = {
+	day: "24h",
+	week: "7d",
+	month: "30d",
+	quarter: "90d",
+	year: "365d"
+}, p = {
+	day: 1440,
+	week: 10080,
+	month: 720 * 60,
+	quarter: 2160 * 60,
+	year: 365 * 24 * 60
+}, m = {
+	sm: {
+		container: "p-3",
+		uptimeText: "text-2xl",
+		targetText: "text-xs",
+		labelText: "text-xs",
+		valueText: "text-sm",
+		iconSize: "h-3 w-3",
+		ringSize: 64,
+		ringStroke: 5,
+		gap: "gap-2",
+		metricGap: "gap-3"
+	},
+	md: {
+		container: "p-4",
+		uptimeText: "text-4xl",
+		targetText: "text-sm",
+		labelText: "text-sm",
+		valueText: "text-base",
+		iconSize: "h-4 w-4",
+		ringSize: 96,
+		ringStroke: 6,
+		gap: "gap-3",
+		metricGap: "gap-4"
+	},
+	lg: {
+		container: "p-6",
+		uptimeText: "text-5xl",
+		targetText: "text-base",
+		labelText: "text-base",
+		valueText: "text-lg",
+		iconSize: "h-5 w-5",
+		ringSize: 128,
+		ringStroke: 8,
+		gap: "gap-4",
+		metricGap: "gap-6"
+	}
+};
+function h(e, t) {
+	if (e < t) return "breached";
+	let n = Math.round((e - t) * 1e4) / 1e4;
+	return n < .01 ? "critical" : n < .05 ? "warning" : "healthy";
+}
+function g(e) {
+	switch (e) {
+		case "healthy": return {
+			text: "text-green-600",
+			bg: "bg-green-100 dark:bg-green-900/30",
+			ring: "#22c55e",
+			hex: "#22c55e"
+		};
+		case "warning": return {
+			text: "text-yellow-600",
+			bg: "bg-yellow-100 dark:bg-yellow-900/30",
+			ring: "#eab308",
+			hex: "#eab308"
+		};
+		case "critical": return {
+			text: "text-orange-600",
+			bg: "bg-orange-100 dark:bg-orange-900/30",
+			ring: "#f97316",
+			hex: "#f97316"
+		};
+		case "breached": return {
+			text: "text-red-600",
+			bg: "bg-red-100 dark:bg-red-900/30",
+			ring: "#ef4444",
+			hex: "#ef4444"
+		};
+	}
+}
+function _(e) {
+	switch (e) {
+		case "healthy": return i;
+		case "warning": return n;
+		case "critical": return r;
+		case "breached": return l;
+	}
+}
+function v(e) {
+	return e.toFixed(e >= 99.99 ? 3 : 2);
+}
+function y(e) {
+	return e < 60 ? `${Math.round(e)}m` : e < 1440 ? `${(e / 60).toFixed(1)}h` : `${(e / 1440).toFixed(1)}d`;
+}
+function b(e, t) {
+	return (100 - e) / 100 * t;
+}
+function x({ value: t, max: n, size: r, strokeWidth: i, color: a, bgColor: o = "currentColor", className: s }) {
+	let c = (r - i) / 2, l = 2 * Math.PI * c, f = l - Math.min(100, Math.max(0, t / n * 100)) / 100 * l;
+	return /* @__PURE__ */ d("svg", {
+		width: r,
+		height: r,
+		viewBox: `0 0 ${r} ${r}`,
+		className: e("transform -rotate-90", s),
+		children: [/* @__PURE__ */ u("circle", {
+			cx: r / 2,
+			cy: r / 2,
+			r: c,
+			fill: "none",
+			stroke: o,
+			strokeWidth: i,
+			className: "opacity-20"
+		}), /* @__PURE__ */ u("circle", {
+			cx: r / 2,
+			cy: r / 2,
+			r: c,
+			fill: "none",
+			stroke: a,
+			strokeWidth: i,
+			strokeLinecap: "round",
+			strokeDasharray: l,
+			strokeDashoffset: f,
+			className: "transition-all duration-700 ease-out"
+		})]
+	});
+}
+function S({ trend: t, size: n }) {
+	let r = m[n], i = t === "up" ? c : t === "down" ? s : o;
+	return /* @__PURE__ */ d("div", {
+		className: e("flex items-center", r.gap, t === "up" && "text-green-600", t === "down" && "text-red-600", t === "stable" && "text-muted-foreground"),
+		children: [/* @__PURE__ */ u(i, { className: r.iconSize }), /* @__PURE__ */ u("span", {
+			className: r.labelText,
+			children: t === "up" ? "Improving" : t === "down" ? "Declining" : "Stable"
+		})]
+	});
+}
+function C({ period: t, onPeriodChange: n, size: r }) {
+	let i = m[r];
+	return /* @__PURE__ */ u("div", {
+		className: e("flex rounded-lg bg-muted p-1", i.gap),
+		children: [
+			"day",
+			"week",
+			"month",
+			"quarter",
+			"year"
+		].map((r) => /* @__PURE__ */ u("button", {
+			type: "button",
+			onClick: () => n?.(r),
+			className: e("px-2 py-1 rounded-md transition-colors font-medium", i.labelText, r === t ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"),
+			children: f[r]
+		}, r))
+	});
+}
+function w({ budget: t, size: n, status: r }) {
+	let i = m[n], a = g(r), o = Math.min(100, t.used / t.total * 100), s = 100 - o, c = t.used >= t.total;
+	return /* @__PURE__ */ d("div", {
+		className: "w-full",
+		children: [
+			/* @__PURE__ */ d("div", {
+				className: e("flex items-center justify-between mb-1.5", i.labelText),
+				children: [/* @__PURE__ */ u("span", {
+					className: "text-muted-foreground",
+					children: "Error Budget"
+				}), /* @__PURE__ */ d("span", {
+					className: e("font-medium tabular-nums", c ? "text-red-600" : a.text),
+					children: [s.toFixed(1), "% remaining"]
+				})]
+			}),
+			/* @__PURE__ */ d("div", {
+				className: "relative h-2 w-full rounded-full bg-muted overflow-hidden",
+				children: [/* @__PURE__ */ u("div", {
+					className: e("absolute inset-y-0 left-0 rounded-full transition-all duration-500", c ? "bg-red-500" : "bg-current", a.text),
+					style: { width: `${o}%` }
+				}), /* @__PURE__ */ u("div", {
+					className: "absolute inset-y-0 w-0.5 bg-yellow-500 opacity-50",
+					style: { left: "80%" }
+				})]
+			}),
+			/* @__PURE__ */ d("div", {
+				className: e("flex items-center justify-between mt-1", i.labelText),
+				children: [/* @__PURE__ */ d("span", {
+					className: "text-muted-foreground tabular-nums",
+					children: [y(t.used), " used"]
+				}), /* @__PURE__ */ d("span", {
+					className: "text-muted-foreground tabular-nums",
+					children: [y(t.total), " total"]
+				})]
+			})
+		]
+	});
+}
+function T({ status: t, uptime: n, target: r, size: i }) {
+	let a = m[i], o = g(t);
+	if (t === "healthy") return null;
+	let s = {
+		warning: "Approaching SLA threshold",
+		critical: "Critical: SLA breach imminent",
+		breached: `SLA breached by ${(r - n).toFixed(2)}%`
+	}, c = _(t);
+	return /* @__PURE__ */ d("div", {
+		className: e("flex items-center rounded-lg px-3 py-2", a.gap, o.bg),
+		children: [/* @__PURE__ */ u(c, { className: e(a.iconSize, o.text) }), /* @__PURE__ */ u("span", {
+			className: e(a.labelText, "font-medium", o.text),
+			children: s[t]
+		})]
+	});
+}
+function E({ label: t, value: n, icon: r, size: i, className: a }) {
+	let o = m[i];
+	return /* @__PURE__ */ d("div", {
+		className: e("flex flex-col", a),
+		children: [/* @__PURE__ */ u("span", {
+			className: e("text-muted-foreground", o.labelText),
+			children: t
+		}), /* @__PURE__ */ d("div", {
+			className: e("flex items-center font-semibold tabular-nums", o.gap, o.valueText),
+			children: [r, n]
+		})]
+	});
+}
+function D({ uptime: t, target: n, period: r, downtimeMinutes: i, incidentCount: o, errorBudget: s, trend: c, onPeriodChange: l, variant: f = "detailed", size: D = "md", className: O }) {
+	let k = m[D], A = h(t, n), j = g(A), M = _(A), N = p[r], P = b(n, N), F = i ?? (100 - t) / 100 * N, I = s ?? {
+		used: F,
+		total: P
+	};
+	return f === "compact" ? /* @__PURE__ */ d("div", {
+		className: e("inline-flex items-center rounded-lg border bg-card", k.gap, k.container, O),
+		children: [
+			/* @__PURE__ */ u(M, { className: e(k.iconSize, j.text) }),
+			/* @__PURE__ */ d("span", {
+				className: e("font-bold tabular-nums", k.uptimeText, j.text),
+				children: [v(t), "%"]
+			}),
+			/* @__PURE__ */ d("span", {
+				className: e("text-muted-foreground", k.labelText),
+				children: [
+					"/ ",
+					n,
+					"%"
+				]
+			}),
+			c && /* @__PURE__ */ u(S, {
+				trend: c,
+				size: D
+			})
+		]
+	}) : f === "card" ? /* @__PURE__ */ d("div", {
+		className: e("rounded-lg border bg-card shadow-sm", k.container, O),
+		children: [
+			/* @__PURE__ */ d("div", {
+				className: e("flex items-start justify-between", k.gap),
+				children: [/* @__PURE__ */ d("div", {
+					className: "flex-1",
+					children: [
+						/* @__PURE__ */ d("div", {
+							className: e("flex items-center", k.gap),
+							children: [/* @__PURE__ */ u(M, { className: e(k.iconSize, j.text) }), /* @__PURE__ */ u("span", {
+								className: e("text-muted-foreground font-medium", k.labelText),
+								children: "SLA Status"
+							})]
+						}),
+						/* @__PURE__ */ d("div", {
+							className: "mt-2",
+							children: [/* @__PURE__ */ d("span", {
+								className: e("font-bold tabular-nums", k.uptimeText, j.text),
+								children: [v(t), "%"]
+							}), /* @__PURE__ */ d("span", {
+								className: e("text-muted-foreground ml-2", k.targetText),
+								children: [
+									"Target: ",
+									n,
+									"%"
+								]
+							})]
+						}),
+						c && /* @__PURE__ */ u("div", {
+							className: "mt-2",
+							children: /* @__PURE__ */ u(S, {
+								trend: c,
+								size: D
+							})
+						})
+					]
+				}), /* @__PURE__ */ u("div", {
+					className: "flex flex-col items-end gap-2",
+					children: /* @__PURE__ */ u(C, {
+						period: r,
+						onPeriodChange: l,
+						size: D
+					})
+				})]
+			}),
+			/* @__PURE__ */ d("div", {
+				className: e("flex items-center mt-4 pt-4 border-t", k.metricGap),
+				children: [
+					o !== void 0 && /* @__PURE__ */ u(E, {
+						label: "Incidents",
+						value: o,
+						size: D
+					}),
+					i !== void 0 && /* @__PURE__ */ u(E, {
+						label: "Downtime",
+						value: y(i),
+						icon: /* @__PURE__ */ u(a, { className: k.iconSize }),
+						size: D
+					}),
+					/* @__PURE__ */ u(E, {
+						label: "Budget Used",
+						value: `${(I.used / I.total * 100).toFixed(1)}%`,
+						size: D
+					})
+				]
+			}),
+			A !== "healthy" && /* @__PURE__ */ u("div", {
+				className: "mt-4",
+				children: /* @__PURE__ */ u(T, {
+					status: A,
+					uptime: t,
+					target: n,
+					size: D
+				})
+			})
+		]
+	}) : /* @__PURE__ */ d("div", {
+		className: e("rounded-lg border bg-card shadow-sm", k.container, O),
+		children: [
+			/* @__PURE__ */ d("div", {
+				className: e("flex items-center justify-between", k.gap),
+				children: [/* @__PURE__ */ d("div", {
+					className: e("flex items-center", k.gap),
+					children: [/* @__PURE__ */ u(M, { className: e(k.iconSize, j.text) }), /* @__PURE__ */ u("span", {
+						className: e("font-medium", k.labelText),
+						children: "SLA Tracker"
+					})]
+				}), /* @__PURE__ */ u(C, {
+					period: r,
+					onPeriodChange: l,
+					size: D
+				})]
+			}),
+			A !== "healthy" && /* @__PURE__ */ u("div", {
+				className: "mt-3",
+				children: /* @__PURE__ */ u(T, {
+					status: A,
+					uptime: t,
+					target: n,
+					size: D
+				})
+			}),
+			/* @__PURE__ */ d("div", {
+				className: e("flex items-center mt-4", k.metricGap),
+				children: [/* @__PURE__ */ d("div", {
+					className: "relative flex-shrink-0",
+					children: [/* @__PURE__ */ u(x, {
+						value: t,
+						max: 100,
+						size: k.ringSize,
+						strokeWidth: k.ringStroke,
+						color: j.ring
+					}), /* @__PURE__ */ d("div", {
+						className: "absolute inset-0 flex flex-col items-center justify-center",
+						children: [/* @__PURE__ */ u("span", {
+							className: e("font-bold tabular-nums leading-none", D === "sm" ? "text-lg" : D === "md" ? "text-2xl" : "text-3xl", j.text),
+							children: v(t)
+						}), /* @__PURE__ */ u("span", {
+							className: e("text-muted-foreground", k.labelText),
+							children: "%"
+						})]
+					})]
+				}), /* @__PURE__ */ d("div", {
+					className: e("flex-1 grid grid-cols-2 gap-y-3", k.metricGap),
+					children: [
+						/* @__PURE__ */ u(E, {
+							label: "Target",
+							value: `${n}%`,
+							size: D
+						}),
+						o !== void 0 && /* @__PURE__ */ u(E, {
+							label: "Incidents",
+							value: o,
+							size: D
+						}),
+						i !== void 0 && /* @__PURE__ */ u(E, {
+							label: "Downtime",
+							value: y(i),
+							icon: /* @__PURE__ */ u(a, { className: k.iconSize }),
+							size: D
+						}),
+						c && /* @__PURE__ */ d("div", {
+							className: "flex flex-col",
+							children: [/* @__PURE__ */ u("span", {
+								className: e("text-muted-foreground", k.labelText),
+								children: "Trend"
+							}), /* @__PURE__ */ u(S, {
+								trend: c,
+								size: D
+							})]
+						})
+					]
+				})]
+			}),
+			/* @__PURE__ */ u("div", {
+				className: "mt-4 pt-4 border-t",
+				children: /* @__PURE__ */ u(w, {
+					budget: I,
+					size: D,
+					status: A
+				})
+			})
+		]
+	});
+}
+function O({ initialUptime: e = 100, target: n, initialPeriod: r = "month", onStatusChange: i, onBreach: a }) {
+	let [o, s] = t.useState(e), [c, l] = t.useState(r), [u, d] = t.useState(0), [f, m] = t.useState(0), [g, _] = t.useState([e]), v = t.useRef(null), y = h(o, n), x = p[c], S = {
+		used: u,
+		total: b(n, x)
+	}, C = t.useMemo(() => {
+		if (g.length < 2) return "stable";
+		let e = g.slice(-5), t = e.reduce((e, t) => e + t, 0) / e.length, n = g.slice(-10, -5);
+		if (n.length === 0) return "stable";
+		let r = n.reduce((e, t) => e + t, 0) / n.length;
+		return t > r + .01 ? "up" : t < r - .01 ? "down" : "stable";
+	}, [g]);
+	t.useEffect(() => {
+		v.current !== null && v.current !== y && (i?.(y), y === "breached" && a?.(o, n)), v.current = y;
+	}, [
+		y,
+		o,
+		n,
+		i,
+		a
+	]);
+	let w = t.useCallback((e) => {
+		m((e) => e + 1), d((t) => t + e);
+		let t = Math.max(0, (x - (u + e)) / x * 100);
+		s(t), _((e) => [...e.slice(-19), t]);
+	}, [x, u]), T = t.useCallback(() => {
+		s(100), d(0), m(0), _([100]);
+	}, []);
+	return {
+		uptime: o,
+		target: n,
+		period: c,
+		status: y,
+		trend: C,
+		downtimeMinutes: u,
+		incidentCount: f,
+		errorBudget: S,
+		setPeriod: l,
+		setUptime: t.useCallback((e) => {
+			let t = Math.max(0, Math.min(100, e));
+			s(t), _((e) => [...e.slice(-19), t]);
+		}, []),
+		recordIncident: w,
+		reset: T
+	};
+}
+D.displayName = "WakaSLATracker";
+//#endregion
+export { D as default, O as useSLATracker };

package/dist/components/waka-slider-range/index.cjs.js

@@ -0,0 +1 @@
+"use client";"use client";const e=require(`../../_virtual/_rolldown/runtime.cjs.js`),t=require(`../../utils/cn.cjs.js`);let n=require(`react`);n=e.__toESM(n);let r=require(`react/jsx-runtime`);function i(e,t,n){return Math.min(Math.max(e,t),n)}function a(e,t,n){let r=Math.round((e-n)/t)*t+n,i=String(t).split(`.`)[1]?.length||0;return Number(r.toFixed(i))}function o(e,t,n){return(e-t)/(n-t)*100}function s(e,t,n){return e/100*(n-t)+t}function c(e,t,n){switch(t){case`currency`:return new Intl.NumberFormat(`en-US`,{style:`currency`,currency:n,minimumFractionDigits:0,maximumFractionDigits:0}).format(e);case`percentage`:return`${e}%`;default:return String(e)}}function l(e={}){let{initialValue:t=[0,100],min:r=0,max:o=100,step:s=1,minDistance:c=0}=e,[l,u]=n.useState(()=>{let[e,n]=t;return[i(a(e,s,r),r,o),i(a(n,s,r),r,o)]}),d=n.useCallback(e=>{let[t,n]=e,l=i(a(t,s,r),r,o-c);u([l,i(a(n,s,r),l+c,o)])},[r,o,s,c]);return{value:l,setValue:d,setMin:n.useCallback(e=>{d([e,l[1]])},[d,l]),setMax:n.useCallback(e=>{d([l[0],e])},[d,l]),reset:n.useCallback(()=>{let[e,n]=t;u([i(a(e,s,r),r,o),i(a(n,s,r),r,o)])},[t,r,o,s]),min:r,max:o,step:s}}function u({value:e,position:n,visible:i,size:a}){return(0,r.jsxs)(`div`,{className:t.cn(`absolute bottom-full mb-2 -translate-x-1/2 rounded-md bg-popover border border-border shadow-md transition-opacity duration-150`,{sm:`text-xs px-1.5 py-0.5`,md:`text-sm px-2 py-1`,lg:`text-base px-2.5 py-1.5`}[a],i?`opacity-100`:`opacity-0 pointer-events-none`),style:{left:`${n}%`},children:[(0,r.jsx)(`span`,{className:`text-popover-foreground font-medium whitespace-nowrap`,children:e}),(0,r.jsxs)(`div`,{className:`absolute top-full left-1/2 -translate-x-1/2 -mt-px`,children:[(0,r.jsx)(`div`,{className:`border-4 border-transparent border-t-border`}),(0,r.jsx)(`div`,{className:`absolute -top-px left-1/2 -translate-x-1/2 border-4 border-transparent border-t-popover`})]})]})}function d({data:e,height:n,minPercent:i,maxPercent:a,variant:o}){let s=Math.max(...e,1);100/e.length;let c={default:`bg-muted-foreground/30`,primary:`bg-primary/20`,success:`bg-emerald-500/20`,warning:`bg-amber-500/20`,danger:`bg-red-500/20`},l={default:`bg-muted-foreground/60`,primary:`bg-primary/50`,success:`bg-emerald-500/50`,warning:`bg-amber-500/50`,danger:`bg-red-500/50`};return(0,r.jsx)(`div`,{className:`absolute bottom-full left-0 right-0 flex items-end gap-px mb-1`,style:{height:n},children:e.map((n,u)=>{let d=n/s*100,f=u/e.length*100;return(0,r.jsx)(`div`,{className:t.cn(`flex-1 rounded-t-sm transition-colors duration-150`,f>=i&&f<=a?l[o]:c[o]),style:{height:`${d}%`,minHeight:n>0?`2px`:`0px`}},u)})})}function f({min:e=0,max:l=100,step:f=1,value:p,defaultValue:ee=[e,l],onChange:m,onChangeStart:h,onChangeEnd:g,format:_=`none`,currencyCode:v=`USD`,formatValue:y,showLabels:b=!1,labelPosition:x=`above`,showTooltip:te=!0,showTicks:S=!1,tickValues:C,tickCount:w=5,histogram:T,histogramHeight:E=40,disabled:D=!1,size:O=`md`,variant:k=`default`,className:ne,minAriaLabel:re=`Minimum value`,maxAriaLabel:ie=`Maximum value`,minDistance:A=0}){let[ae,oe]=n.useState(()=>{let[t,n]=ee;return[i(a(t,f,e),e,l),i(a(n,f,e),e,l)]}),j=p!==void 0,M=j?p:ae,[N,P]=n.useState(null),[F,I]=n.useState(null),L=n.useRef(null),R=n.useRef(null),z=n.useRef(null),B=n.useCallback(e=>y?y(e):c(e,_,v),[y,_,v]),V=o(M[0],e,l),H=o(M[1],e,l),U=n.useCallback(t=>{let[n,r]=t,o=i(a(n,f,e),e,l-A),s=[o,i(a(r,f,e),o+A,l)];j||oe(s),m?.(s)},[j,m,e,l,f,A]),W=n.useCallback((t,n)=>{if(!L.current||D)return;let r=L.current.getBoundingClientRect(),o=a(s(i((t-r.left)/r.width*100,0,100),e,l),f,e);if(n===`min`){let e=M[1]-A;U([Math.min(o,e),M[1]])}else{let e=M[0]+A;U([M[0],Math.max(o,e)])}},[D,e,l,f,M,A,U]),G=n.useCallback(e=>t=>{D||(t.preventDefault(),P(e),h?.(M))},[D,h,M]),K=n.useCallback(e=>{N&&W(e.clientX,N)},[N,W]),q=n.useCallback(()=>{N&&(g?.(M),P(null))},[N,g,M]),J=n.useCallback(e=>t=>{D||(P(e),h?.(M))},[D,h,M]),Y=n.useCallback(e=>{N&&e.touches[0]&&W(e.touches[0].clientX,N)},[N,W]),X=n.useCallback(()=>{N&&(g?.(M),P(null))},[N,g,M]),se=n.useCallback(t=>{if(D||!L.current||R.current&&R.current.contains(t.target)||z.current&&z.current.contains(t.target))return;let n=L.current.getBoundingClientRect(),r=a(s(i((t.clientX-n.left)/n.width*100,0,100),e,l),f,e);Math.abs(r-M[0])<=Math.abs(r-M[1])?U([r,M[1]]):U([M[0],r])},[D,e,l,f,M,U]),Z=n.useCallback(t=>n=>{if(D)return;let r=t===`min`?M[0]:M[1],i=f*10;switch(n.key){case`ArrowRight`:case`ArrowUp`:n.preventDefault(),r+=n.shiftKey?i:f;break;case`ArrowLeft`:case`ArrowDown`:n.preventDefault(),r-=n.shiftKey?i:f;break;case`Home`:n.preventDefault(),r=t===`min`?e:M[0]+A;break;case`End`:n.preventDefault(),r=t===`max`?l:M[1]-A;break;case`PageUp`:n.preventDefault(),r+=i;break;case`PageDown`:n.preventDefault(),r-=i;break;default:return}U(t===`min`?[r,M[1]]:[M[0],r])},[D,e,l,f,M,A,U]);n.useEffect(()=>{if(N)return document.addEventListener(`mousemove`,K),document.addEventListener(`mouseup`,q),document.addEventListener(`touchmove`,Y),document.addEventListener(`touchend`,X),()=>{document.removeEventListener(`mousemove`,K),document.removeEventListener(`mouseup`,q),document.removeEventListener(`touchmove`,Y),document.removeEventListener(`touchend`,X)}},[N,K,q,Y,X]);let ce={sm:`h-1`,md:`h-2`,lg:`h-3`},Q={sm:`h-4 w-4`,md:`h-5 w-5`,lg:`h-6 w-6`},le={default:`bg-primary`,primary:`bg-primary`,success:`bg-emerald-500`,warning:`bg-amber-500`,danger:`bg-red-500`},$={default:`border-primary`,primary:`border-primary`,success:`border-emerald-500`,warning:`border-amber-500`,danger:`border-red-500`},ue=n.useMemo(()=>{if(!S)return[];if(C)return C;let t=(l-e)/(w-1);return Array.from({length:w},(n,r)=>e+t*r)},[S,C,w,e,l]);return(0,r.jsxs)(`div`,{className:t.cn(`relative w-full select-none`,D&&`opacity-50 cursor-not-allowed`,ne),children:[b&&x===`above`&&(0,r.jsxs)(`div`,{className:`flex justify-between mb-2 text-sm text-muted-foreground`,children:[(0,r.jsx)(`span`,{children:B(M[0])}),(0,r.jsx)(`span`,{children:B(M[1])})]}),(0,r.jsxs)(`div`,{className:t.cn(`relative`,T&&`pt-[${E}px]`),children:[T&&T.length>0&&(0,r.jsx)(d,{data:T,height:E,minPercent:V,maxPercent:H,variant:k}),(0,r.jsxs)(`div`,{ref:L,className:t.cn(`relative w-full rounded-full bg-secondary cursor-pointer`,ce[O]),onClick:se,children:[(0,r.jsx)(`div`,{className:t.cn(`absolute h-full rounded-full transition-all`,le[k]),style:{left:`${V}%`,width:`${H-V}%`}}),(0,r.jsx)(`div`,{ref:R,role:`slider`,tabIndex:D?-1:0,"aria-label":re,"aria-valuemin":e,"aria-valuemax":M[1]-A,"aria-valuenow":M[0],"aria-valuetext":B(M[0]),"aria-disabled":D,className:t.cn(`absolute top-1/2 -translate-y-1/2 -translate-x-1/2 rounded-full`,`bg-background border-2 shadow-md transition-transform`,`focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2`,`hover:scale-110 active:scale-105`,Q[O],$[k],N===`min`&&`scale-110 ring-2 ring-ring ring-offset-2`,!D&&`cursor-grab active:cursor-grabbing`),style:{left:`${V}%`},onMouseDown:G(`min`),onTouchStart:J(`min`),onKeyDown:Z(`min`),onMouseEnter:()=>I(`min`),onMouseLeave:()=>I(null),onFocus:()=>I(`min`),onBlur:()=>I(null),children:b&&x===`handles`&&(0,r.jsx)(`span`,{className:`absolute -bottom-6 left-1/2 -translate-x-1/2 text-xs font-medium text-muted-foreground whitespace-nowrap`,children:B(M[0])})}),(0,r.jsx)(`div`,{ref:z,role:`slider`,tabIndex:D?-1:0,"aria-label":ie,"aria-valuemin":M[0]+A,"aria-valuemax":l,"aria-valuenow":M[1],"aria-valuetext":B(M[1]),"aria-disabled":D,className:t.cn(`absolute top-1/2 -translate-y-1/2 -translate-x-1/2 rounded-full`,`bg-background border-2 shadow-md transition-transform`,`focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2`,`hover:scale-110 active:scale-105`,Q[O],$[k],N===`max`&&`scale-110 ring-2 ring-ring ring-offset-2`,!D&&`cursor-grab active:cursor-grabbing`),style:{left:`${H}%`},onMouseDown:G(`max`),onTouchStart:J(`max`),onKeyDown:Z(`max`),onMouseEnter:()=>I(`max`),onMouseLeave:()=>I(null),onFocus:()=>I(`max`),onBlur:()=>I(null),children:b&&x===`handles`&&(0,r.jsx)(`span`,{className:`absolute -bottom-6 left-1/2 -translate-x-1/2 text-xs font-medium text-muted-foreground whitespace-nowrap`,children:B(M[1])})}),te&&(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(u,{value:B(M[0]),position:V,visible:N===`min`||F===`min`,size:O}),(0,r.jsx)(u,{value:B(M[1]),position:H,visible:N===`max`||F===`max`,size:O})]})]}),S&&ue.length>0&&(0,r.jsx)(`div`,{className:`relative mt-2`,children:ue.map(n=>{let i=o(n,e,l),a=n>=M[0]&&n<=M[1];return(0,r.jsxs)(`div`,{className:`absolute -translate-x-1/2`,style:{left:`${i}%`},children:[(0,r.jsx)(`div`,{className:t.cn(`w-0.5 h-2 rounded-full transition-colors`,a?le[k]:`bg-muted-foreground/40`)}),(0,r.jsx)(`span`,{className:`absolute top-3 left-1/2 -translate-x-1/2 text-xs text-muted-foreground`,children:B(n)})]},n)})})]}),b&&x===`handles`&&(0,r.jsx)(`div`,{className:`h-6`}),S&&(0,r.jsx)(`div`,{className:`h-6`})]})}exports.default=f,exports.useSliderRange=l;