@wakastellar/ui 4.0.0 → 4.0.1

package/dist/components/waka-segmented-control/index.es.js

@@ -0,0 +1,96 @@
+"use client";
+"use client";
+import { cn as e } from "../../utils/cn.es.js";
+import * as t from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/components/waka-segmented-control/index.tsx
+function i({ options: i, value: a, onChange: o, size: s = "md", variant: c = "default", fullWidth: l = !1, disabled: u = !1, name: d, className: f }) {
+	let [p, m] = t.useState({}), h = t.useRef(null), g = t.useRef(/* @__PURE__ */ new Map()), _ = {
+		sm: "h-7 text-xs px-2",
+		md: "h-9 text-sm px-3",
+		lg: "h-11 text-base px-4"
+	}, v = {
+		sm: "p-0.5",
+		md: "p-1",
+		lg: "p-1"
+	}, y = {
+		sm: "h-3 w-3",
+		md: "h-4 w-4",
+		lg: "h-5 w-5"
+	};
+	t.useEffect(() => {
+		if (a === void 0) return;
+		let e = g.current.get(a), t = h.current;
+		if (e && t) {
+			let n = t.getBoundingClientRect(), r = e.getBoundingClientRect();
+			m({
+				left: r.left - n.left,
+				width: r.width,
+				height: r.height
+			});
+		}
+	}, [a, i]);
+	let b = (e) => {
+		u || o?.(e);
+	}, x = (e) => (t) => {
+		t ? g.current.set(e, t) : g.current.delete(e);
+	};
+	return /* @__PURE__ */ r("div", {
+		ref: h,
+		role: "radiogroup",
+		className: e("relative inline-flex items-center bg-muted rounded-lg", v[s], l && "w-full", u && "opacity-50", f),
+		children: [
+			a !== void 0 && c === "default" && /* @__PURE__ */ n("div", {
+				className: "absolute bg-background rounded-md shadow-sm transition-all duration-200 ease-out",
+				style: p
+			}),
+			i.map((t) => {
+				let i = t.value === a, o = u || t.disabled;
+				return /* @__PURE__ */ r("button", {
+					ref: x(t.value),
+					type: "button",
+					role: "radio",
+					"aria-checked": i,
+					disabled: o,
+					onClick: () => b(t.value),
+					className: e("relative z-10 inline-flex items-center justify-center gap-1.5 font-medium transition-colors rounded-md", _[s], l && "flex-1", c === "default" && [i ? "text-foreground" : "text-muted-foreground hover:text-foreground"], c === "pills" && [i ? "bg-primary text-primary-foreground" : "text-muted-foreground hover:text-foreground hover:bg-background/50"], o && "cursor-not-allowed opacity-50"),
+					children: [t.icon && /* @__PURE__ */ n("span", {
+						className: y[s],
+						children: t.icon
+					}), t.label]
+				}, String(t.value));
+			}),
+			d && /* @__PURE__ */ n("input", {
+				type: "hidden",
+				name: d,
+				value: String(a ?? "")
+			})
+		]
+	});
+}
+function a(e, n) {
+	let [r, i] = t.useState(n ?? e[0]?.value);
+	return {
+		value: r,
+		onChange: i,
+		selectNext: () => {
+			let t = e[(e.findIndex((e) => e.value === r) + 1) % e.length];
+			t.disabled || i(t.value);
+		},
+		selectPrevious: () => {
+			let t = e.findIndex((e) => e.value === r), n = e[t === 0 ? e.length - 1 : t - 1];
+			n.disabled || i(n.value);
+		},
+		selectFirst: () => {
+			let t = e.find((e) => !e.disabled);
+			t && i(t.value);
+		},
+		selectLast: () => {
+			let t = [...e].reverse().find((e) => !e.disabled);
+			t && i(t.value);
+		},
+		options: e
+	};
+}
+//#endregion
+export { i as default, a as useSegmentedControl };

package/dist/components/waka-server-rack/index.cjs.js

@@ -0,0 +1,11 @@
+"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`);var i={online:{led:`hsl(var(--success))`,glow:`hsl(var(--success) / 0.6)`,bg:`hsl(var(--success) / 0.1)`},warning:{led:`hsl(var(--warning))`,glow:`hsl(var(--warning) / 0.6)`,bg:`hsl(var(--warning) / 0.1)`},offline:{led:`hsl(var(--destructive))`,glow:`hsl(var(--destructive) / 0.6)`,bg:`hsl(var(--destructive) / 0.1)`},maintenance:{led:`hsl(var(--info))`,glow:`hsl(var(--info) / 0.6)`,bg:`hsl(var(--info) / 0.1)`}},a=24;function o({value:e,label:n,color:i,animated:a}){let o=()=>e>=90?`hsl(var(--destructive))`:e>=70?`hsl(var(--warning))`:i;return(0,r.jsxs)(`div`,{className:`flex items-center gap-1.5`,children:[(0,r.jsx)(`span`,{className:`text-[8px] font-medium text-zinc-400 w-6`,children:n}),(0,r.jsx)(`div`,{className:`relative h-1.5 flex-1 rounded-full bg-zinc-800/80 overflow-hidden`,children:(0,r.jsx)(`div`,{className:t.cn(`absolute inset-y-0 left-0 rounded-full`,a&&`transition-all duration-500 ease-out`),style:{width:`${e}%`,backgroundColor:o(),boxShadow:`0 0 6px ${o()}40`}})}),(0,r.jsxs)(`span`,{className:`text-[8px] font-mono text-zinc-500 w-7 text-right`,children:[e,`%`]})]})}function s({status:e,animated:n}){let a=i[e];return(0,r.jsxs)(`div`,{className:`relative flex items-center justify-center`,children:[(0,r.jsx)(`div`,{className:t.cn(`absolute w-4 h-4 rounded-full blur-sm`,n&&e!==`offline`&&`animate-pulse`),style:{backgroundColor:a.glow}}),(0,r.jsx)(`div`,{className:`relative w-2.5 h-2.5 rounded-full border border-zinc-600`,style:{backgroundColor:a.led,boxShadow:`0 0 8px ${a.glow}, inset 0 -1px 2px rgba(0,0,0,0.3), inset 0 1px 1px rgba(255,255,255,0.2)`}})]})}function c({server:e,isSelected:c,showMetrics:l,animated:u,onClick:d}){let[f,p]=n.useState(!1),m=i[e.status],h=e.height*a;return(0,r.jsxs)(`div`,{className:t.cn(`group relative cursor-pointer select-none`,u&&`transition-all duration-200`),style:{height:h},onClick:d,onMouseEnter:()=>p(!0),onMouseLeave:()=>p(!1),children:[(0,r.jsxs)(`div`,{className:t.cn(`absolute inset-0 rounded-sm`,u&&`transition-all duration-200`),style:{background:c?`linear-gradient(180deg, #3f3f46 0%, #27272a 50%, #18181b 100%)`:`linear-gradient(180deg, #2a2a2e 0%, #1f1f23 50%, #18181b 100%)`,boxShadow:c?`inset 0 1px 0 rgba(255,255,255,0.1),
+               inset 0 -1px 0 rgba(0,0,0,0.5),
+               0 0 20px ${m.glow},
+               0 4px 12px rgba(0,0,0,0.4)`:`inset 0 1px 0 rgba(255,255,255,0.05),
+               inset 0 -1px 0 rgba(0,0,0,0.5),
+               0 2px 4px rgba(0,0,0,0.2)`,transform:f?`translateZ(4px) scale(1.01)`:`translateZ(0)`,border:c?`1px solid ${m.led}40`:`1px solid rgba(63,63,70,0.5)`},children:[(0,r.jsx)(`div`,{className:`absolute top-0 left-1 right-1 h-px`,style:{background:`linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent)`}}),(0,r.jsxs)(`div`,{className:`absolute inset-1 flex items-center gap-2 px-2`,children:[(0,r.jsx)(`div`,{className:`flex flex-col justify-center gap-0.5 w-8 h-full py-1`,children:Array.from({length:Math.min(e.height*3,6)}).map((e,t)=>(0,r.jsx)(`div`,{className:`h-0.5 rounded-full`,style:{background:`linear-gradient(90deg, #0a0a0a 0%, #1a1a1a 50%, #0a0a0a 100%)`}},t))}),(0,r.jsx)(s,{status:e.status,animated:u}),(0,r.jsxs)(`div`,{className:`flex-1 min-w-0 flex flex-col justify-center gap-0.5`,children:[(0,r.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,r.jsx)(`span`,{className:`text-[10px] font-semibold text-zinc-200 truncate`,children:e.name}),(0,r.jsx)(`span`,{className:`text-[8px] font-mono text-zinc-500 uppercase`,children:e.status})]}),l&&e.height>=2&&(0,r.jsxs)(`div`,{className:`flex flex-col gap-0.5 mt-0.5`,children:[(0,r.jsx)(o,{value:e.cpu,label:`CPU`,color:`hsl(var(--chart-1))`,animated:u}),(0,r.jsx)(o,{value:e.ram,label:`RAM`,color:`hsl(var(--chart-3))`,animated:u}),e.height>=3&&(0,r.jsx)(o,{value:e.disk,label:`DSK`,color:`hsl(var(--info))`,animated:u})]}),l&&e.height===1&&(0,r.jsxs)(`div`,{className:`flex items-center gap-2 text-[7px] font-mono text-zinc-500`,children:[(0,r.jsxs)(`span`,{children:[`CPU:`,e.cpu,`%`]}),(0,r.jsxs)(`span`,{children:[`RAM:`,e.ram,`%`]}),(0,r.jsxs)(`span`,{children:[`DSK:`,e.disk,`%`]})]})]}),(0,r.jsxs)(`div`,{className:`flex items-center gap-0.5`,children:[e.network&&(0,r.jsxs)(`div`,{className:`flex flex-col items-end mr-2 text-[7px] font-mono text-zinc-500`,children:[(0,r.jsxs)(`span`,{className:`text-success`,children:[`▲`,` `,e.network.out]}),(0,r.jsxs)(`span`,{className:`text-info`,children:[`▼`,` `,e.network.in]})]}),Array.from({length:Math.min(e.height*2,4)}).map((e,n)=>(0,r.jsx)(`div`,{className:t.cn(`w-2 h-3 rounded-sm`,u&&`transition-colors duration-300`),style:{background:`linear-gradient(180deg, #1a1a1a, #0a0a0a)`,border:`1px solid #2a2a2a`,boxShadow:`inset 0 1px 2px rgba(0,0,0,0.5)`}},n))]})]}),(0,r.jsx)(`div`,{className:`absolute bottom-0 left-0 right-0 h-px`,style:{background:`rgba(0,0,0,0.8)`}})]}),f&&(0,r.jsxs)(`div`,{className:t.cn(`absolute left-full top-0 ml-4 z-50 p-3 rounded-lg shadow-2xl`,`bg-zinc-900/95 backdrop-blur-sm border border-zinc-700`,u&&`animate-in fade-in-0 slide-in-from-left-2 duration-200`),style:{minWidth:200},children:[(0,r.jsxs)(`div`,{className:`flex items-center gap-2 mb-2`,children:[(0,r.jsx)(s,{status:e.status,animated:!1}),(0,r.jsx)(`span`,{className:`font-semibold text-zinc-100`,children:e.name})]}),(0,r.jsxs)(`div`,{className:`space-y-1.5 text-xs`,children:[(0,r.jsxs)(`div`,{className:`flex justify-between text-zinc-400`,children:[(0,r.jsx)(`span`,{children:`Status`}),(0,r.jsx)(`span`,{className:`font-medium capitalize`,style:{color:m.led},children:e.status})]}),(0,r.jsxs)(`div`,{className:`flex justify-between text-zinc-400`,children:[(0,r.jsx)(`span`,{children:`Unit`}),(0,r.jsxs)(`span`,{className:`font-mono`,children:[`U`,e.unit,e.height>1?`-U${e.unit+e.height-1}`:``]})]}),(0,r.jsxs)(`div`,{className:`flex justify-between text-zinc-400`,children:[(0,r.jsx)(`span`,{children:`Size`}),(0,r.jsxs)(`span`,{className:`font-mono`,children:[e.height,`U`]})]}),(0,r.jsx)(`div`,{className:`border-t border-zinc-700 my-2`}),(0,r.jsx)(o,{value:e.cpu,label:`CPU`,color:`hsl(var(--chart-1))`}),(0,r.jsx)(o,{value:e.ram,label:`RAM`,color:`hsl(var(--chart-3))`}),(0,r.jsx)(o,{value:e.disk,label:`DSK`,color:`hsl(var(--info))`}),e.network&&(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(`div`,{className:`border-t border-zinc-700 my-2`}),(0,r.jsxs)(`div`,{className:`flex justify-between text-zinc-400`,children:[(0,r.jsx)(`span`,{children:`Network In`}),(0,r.jsxs)(`span`,{className:`font-mono text-info`,children:[e.network.in,` Mbps`]})]}),(0,r.jsxs)(`div`,{className:`flex justify-between text-zinc-400`,children:[(0,r.jsx)(`span`,{children:`Network Out`}),(0,r.jsxs)(`span`,{className:`font-mono text-success`,children:[e.network.out,` Mbps`]})]})]})]})]})]})}function l({unitNumber:e}){return(0,r.jsx)(`div`,{className:`relative`,style:{height:a},children:(0,r.jsx)(`div`,{className:`absolute inset-0 rounded-sm`,style:{background:`linear-gradient(180deg, rgba(24,24,27,0.5) 0%, rgba(9,9,11,0.5) 100%)`,border:`1px dashed rgba(63,63,70,0.3)`},children:(0,r.jsx)(`div`,{className:`absolute inset-0 flex items-center justify-center`,children:(0,r.jsxs)(`span`,{className:`text-[8px] font-mono text-zinc-700`,children:[`U`,e,` - EMPTY`]})})})})}function u({servers:e,totalUnits:i=42,onServerClick:o,selectedServer:s,showMetrics:u=!0,animated:d=!0,className:f}){let p=n.useMemo(()=>{let t=new Map;return e.forEach(e=>{for(let n=0;n<e.height;n++)t.set(e.unit+n,e)}),t},[e]),m=n.useMemo(()=>{let e=[],t=new Set;for(let n=i;n>=1;n--){let r=p.get(n);r&&!t.has(r.id)?n===r.unit+r.height-1&&(e.push({type:`server`,server:r,unit:r.unit}),t.add(r.id)):r||e.push({type:`empty`,unit:n})}return e},[p,i]),h=i*a;return(0,r.jsxs)(`div`,{className:t.cn(`relative select-none`,f),style:{perspective:`1200px`,perspectiveOrigin:`center center`},children:[(0,r.jsxs)(`div`,{className:`relative`,style:{transform:`rotateX(2deg) rotateY(-2deg)`,transformStyle:`preserve-3d`},children:[(0,r.jsx)(`div`,{className:`absolute -left-6 top-0 w-5 rounded-l-md`,style:{height:h+40,background:`linear-gradient(90deg, #1a1a1a 0%, #2a2a2a 40%, #1f1f1f 100%)`,boxShadow:`inset -2px 0 4px rgba(0,0,0,0.5), -4px 0 8px rgba(0,0,0,0.3)`,transform:`translateZ(-10px)`},children:Array.from({length:Math.ceil(i/3)}).map((e,t)=>(0,r.jsx)(`div`,{className:`absolute left-1/2 -translate-x-1/2 w-2 h-2 rounded-full`,style:{top:20+a*3*t,background:`radial-gradient(circle, #0a0a0a 0%, #1a1a1a 100%)`,boxShadow:`inset 0 1px 2px rgba(0,0,0,0.8)`}},t))}),(0,r.jsx)(`div`,{className:`absolute -right-6 top-0 w-5 rounded-r-md`,style:{height:h+40,background:`linear-gradient(90deg, #1f1f1f 0%, #2a2a2a 60%, #1a1a1a 100%)`,boxShadow:`inset 2px 0 4px rgba(0,0,0,0.5), 4px 0 8px rgba(0,0,0,0.3)`,transform:`translateZ(-10px)`},children:Array.from({length:Math.ceil(i/3)}).map((e,t)=>(0,r.jsx)(`div`,{className:`absolute left-1/2 -translate-x-1/2 w-2 h-2 rounded-full`,style:{top:20+a*3*t,background:`radial-gradient(circle, #0a0a0a 0%, #1a1a1a 100%)`,boxShadow:`inset 0 1px 2px rgba(0,0,0,0.8)`}},t))}),(0,r.jsx)(`div`,{className:`absolute -left-14 top-5 flex flex-col-reverse`,style:{height:h},children:Array.from({length:i}).map((e,n)=>{let i=n+1,o=p.has(i);return(0,r.jsx)(`div`,{className:`flex items-center justify-end pr-1`,style:{height:a},children:(0,r.jsxs)(`span`,{className:t.cn(`text-[9px] font-mono`,o?`text-zinc-400`:`text-zinc-600`),children:[`U`,i.toString().padStart(2,`0`)]})},i)})}),(0,r.jsxs)(`div`,{className:`relative rounded-md overflow-hidden`,style:{padding:`20px 4px`,background:`linear-gradient(180deg, #141417 0%, #0c0c0e 50%, #0a0a0c 100%)`,boxShadow:`
+              inset 0 2px 4px rgba(255,255,255,0.02),
+              inset 0 -2px 4px rgba(0,0,0,0.5),
+              0 8px 32px rgba(0,0,0,0.5),
+              0 2px 8px rgba(0,0,0,0.3)
+            `,border:`1px solid #2a2a2e`},children:[(0,r.jsx)(`div`,{className:`absolute top-0 left-0 right-0 h-4`,style:{background:`linear-gradient(180deg, #2a2a2a 0%, #1a1a1a 100%)`,borderBottom:`1px solid #0a0a0a`},children:(0,r.jsx)(`div`,{className:`absolute inset-x-4 top-1.5 h-1 rounded-full bg-zinc-800`})}),(0,r.jsx)(`div`,{className:`absolute bottom-0 left-0 right-0 h-4`,style:{background:`linear-gradient(180deg, #1a1a1a 0%, #2a2a2a 100%)`,borderTop:`1px solid #3a3a3a`},children:(0,r.jsx)(`div`,{className:`absolute inset-x-4 bottom-1.5 h-1 rounded-full bg-zinc-800`})}),(0,r.jsx)(`div`,{className:`relative flex flex-col gap-0.5`,style:{minWidth:300},children:m.map((e,t)=>e.type===`server`&&e.server?(0,r.jsx)(c,{server:e.server,isSelected:s===e.server.id,showMetrics:u,animated:d,onClick:()=>o?.(e.server.id)},e.server.id):(0,r.jsx)(l,{unitNumber:e.unit},`empty-${e.unit}`))})]}),(0,r.jsx)(`div`,{className:`absolute -bottom-2 left-4 right-4 h-4 rounded-b-xl`,style:{background:`linear-gradient(180deg, rgba(0,0,0,0.4) 0%, transparent 100%)`,filter:`blur(4px)`,transform:`translateZ(-20px) rotateX(60deg)`}})]}),(0,r.jsx)(`div`,{className:`absolute inset-0 pointer-events-none rounded-lg`,style:{background:`radial-gradient(ellipse at center, ${e.some(e=>e.status===`offline`)?`hsl(var(--destructive) / 0.05)`:e.some(e=>e.status===`warning`)?`hsl(var(--warning) / 0.05)`:`hsl(var(--success) / 0.03)`} 0%, transparent 70%)`,filter:`blur(20px)`}})]})}function d({className:e}){let[i,a]=n.useState(null),o=[{id:`srv-001`,name:`Web Server 01`,unit:40,height:2,status:`online`,cpu:45,ram:62,disk:34,network:{in:850,out:420}},{id:`srv-002`,name:`Database Primary`,unit:37,height:3,status:`online`,cpu:78,ram:85,disk:67,network:{in:1200,out:980}},{id:`srv-003`,name:`Cache Server`,unit:35,height:2,status:`warning`,cpu:92,ram:88,disk:45,network:{in:2100,out:1850}},{id:`srv-004`,name:`API Gateway`,unit:33,height:1,status:`online`,cpu:34,ram:41,disk:22,network:{in:3500,out:3200}},{id:`srv-005`,name:`Worker Node 01`,unit:31,height:2,status:`online`,cpu:56,ram:67,disk:41},{id:`srv-006`,name:`Worker Node 02`,unit:29,height:2,status:`offline`,cpu:0,ram:0,disk:41},{id:`srv-007`,name:`Storage Array`,unit:25,height:4,status:`online`,cpu:12,ram:24,disk:89,network:{in:500,out:4500}},{id:`srv-008`,name:`Backup Server`,unit:22,height:3,status:`maintenance`,cpu:5,ram:15,disk:72}];return(0,r.jsxs)(`div`,{className:t.cn(`p-8 bg-zinc-950 rounded-2xl`,e),children:[(0,r.jsxs)(`div`,{className:`mb-6`,children:[(0,r.jsx)(`h3`,{className:`text-lg font-semibold text-zinc-100`,children:`Data Center Rack A-01`}),(0,r.jsxs)(`p`,{className:`text-sm text-zinc-500`,children:[o.filter(e=>e.status===`online`).length,` online,`,` `,o.filter(e=>e.status===`warning`).length,` warning,`,` `,o.filter(e=>e.status===`offline`).length,` offline`]})]}),(0,r.jsx)(u,{servers:o,totalUnits:42,selectedServer:i||void 0,onServerClick:e=>a(t=>t===e?null:e),showMetrics:!0,animated:!0})]})}exports.WakaServerRack=u,exports.WakaServerRackDemo=d;