@wakastellar/ui 4.0.0 → 4.1.1

package/dist/components/waka-signature-pad/index.es.js

@@ -0,0 +1,376 @@
+"use client";
+"use client";
+import { cn as e } from "../../utils/cn.es.js";
+import * as t from "react";
+import { Check as n, Download as r, Pen as i, Trash2 as a, Undo as o } from "lucide-react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/components/waka-signature-pad/index.tsx
+function l(e = {}) {
+	let { penColor: n = "#000000", penSize: r = 2, onChange: i } = e, a = t.useRef(null), [o, s] = t.useState([]), [c, l] = t.useState(null), [u, d] = t.useState(!1), [f, p] = t.useState(n), [m, h] = t.useState(r), g = o.length === 0 && !c;
+	t.useEffect(() => {
+		i?.(g);
+	}, [g, i]);
+	let _ = t.useCallback((e, t) => {
+		if (t.points.length < 2) return;
+		e.beginPath(), e.strokeStyle = t.color, e.lineWidth = t.size, e.lineCap = "round", e.lineJoin = "round";
+		let n = t.points;
+		e.moveTo(n[0].x, n[0].y);
+		for (let t = 1; t < n.length - 1; t++) {
+			let r = (n[t].x + n[t + 1].x) / 2, i = (n[t].y + n[t + 1].y) / 2;
+			e.quadraticCurveTo(n[t].x, n[t].y, r, i);
+		}
+		if (n.length > 1) {
+			let t = n[n.length - 1];
+			e.lineTo(t.x, t.y);
+		}
+		e.stroke();
+	}, []);
+	t.useCallback((e) => {
+		let t = a.current;
+		if (!t) return;
+		let n = t.getContext("2d");
+		n && (n.clearRect(0, 0, t.width, t.height), e && (n.fillStyle = e, n.fillRect(0, 0, t.width, t.height)), o.forEach((e) => _(n, e)), c && _(n, c));
+	}, [
+		o,
+		c,
+		_
+	]);
+	let v = t.useCallback((e) => {
+		d(!0), l({
+			points: [e],
+			color: f,
+			size: m
+		});
+	}, [f, m]), y = t.useCallback((e) => {
+		!u || !c || l((t) => t ? {
+			...t,
+			points: [...t.points, e]
+		} : null);
+	}, [u, c]), b = t.useCallback(() => {
+		c && c.points.length > 1 && s((e) => [...e, c]), l(null), d(!1);
+	}, [c]);
+	return {
+		canvasRef: a,
+		strokes: o,
+		currentStroke: c,
+		isDrawing: u,
+		isEmpty: g,
+		penColor: f,
+		penSize: m,
+		setPenColor: p,
+		setPenSize: h,
+		clear: t.useCallback(() => {
+			s([]), l(null), d(!1);
+		}, []),
+		undo: t.useCallback(() => {
+			s((e) => e.slice(0, -1));
+		}, []),
+		toDataURL: t.useCallback((e = "png", t) => {
+			let n = a.current;
+			if (!n) return "";
+			if (t) {
+				let r = document.createElement("canvas");
+				r.width = n.width, r.height = n.height;
+				let i = r.getContext("2d");
+				return i ? (i.fillStyle = t, i.fillRect(0, 0, r.width, r.height), i.drawImage(n, 0, 0), r.toDataURL(`image/${e}`)) : "";
+			}
+			return n.toDataURL(`image/${e}`);
+		}, []),
+		toSVG: t.useCallback((e) => {
+			let t = a.current;
+			if (!t) return "";
+			let n = `<svg xmlns="http://www.w3.org/2000/svg" width="${t.width}" height="${t.height}" aria-hidden="true" focusable="false">`;
+			return e && (n += `<rect width="100%" height="100%" fill="${e}"/>`), o.forEach((e) => {
+				if (e.points.length < 2) return;
+				let t = `M ${e.points[0].x} ${e.points[0].y}`;
+				for (let n = 1; n < e.points.length - 1; n++) {
+					let r = (e.points[n].x + e.points[n + 1].x) / 2, i = (e.points[n].y + e.points[n + 1].y) / 2;
+					t += ` Q ${e.points[n].x} ${e.points[n].y} ${r} ${i}`;
+				}
+				if (e.points.length > 1) {
+					let n = e.points[e.points.length - 1];
+					t += ` L ${n.x} ${n.y}`;
+				}
+				n += `<path d="${t}" stroke="${e.color}" stroke-width="${e.size}" fill="none" stroke-linecap="round" stroke-linejoin="round"/>`;
+			}), n += "</svg>", `data:image/svg+xml;base64,${btoa(n)}`;
+		}, [o]),
+		fromDataURL: t.useCallback((e) => {
+			let t = a.current;
+			if (!t) return;
+			let n = t.getContext("2d");
+			if (!n) return;
+			let r = new Image();
+			r.onload = () => {
+				n.clearRect(0, 0, t.width, t.height), n.drawImage(r, 0, 0), s([{
+					points: [{
+						x: 0,
+						y: 0
+					}, {
+						x: 1,
+						y: 1
+					}],
+					color: "#000",
+					size: 1
+				}]);
+			}, r.src = e;
+		}, []),
+		fromStrokes: t.useCallback((e) => {
+			s(e);
+		}, []),
+		startDrawing: v,
+		draw: y,
+		stopDrawing: b
+	};
+}
+var u = [
+	"#000000",
+	"#1e40af",
+	"#dc2626",
+	"#16a34a",
+	"#9333ea"
+], d = [
+	1,
+	2,
+	3,
+	5,
+	8
+], f = t.forwardRef(({ width: f = 400, height: p = 200, aspectRatio: m, penColor: h = "#000000", penSize: g = 2, backgroundColor: _ = "transparent", showGuideLine: v = !0, guideLineColor: y = "#d1d5db", placeholder: b = "Sign here", placeholderColor: x = "#9ca3af", readOnly: S = !1, initialValue: C, onChange: w, onSave: T, showToolbar: E = !0, penColors: D = u, penSizes: O = d, className: ee, canvasClassName: te, toolbarClassName: ne, disabled: k = !1 }, A) => {
+	let j = t.useRef(null), [M, N] = t.useState({
+		width: f,
+		height: p
+	}), P = l({
+		penColor: h,
+		penSize: g,
+		onChange: w
+	}), { canvasRef: F, strokes: I, currentStroke: L, isEmpty: R, penColor: z, penSize: B, setPenColor: re, setPenSize: ie, clear: ae, undo: oe, toDataURL: V, toSVG: H, fromDataURL: U, fromStrokes: W, startDrawing: G, draw: K, stopDrawing: q } = P;
+	t.useImperativeHandle(A, () => P, [P]), t.useEffect(() => {
+		if (m && j.current) {
+			let e = j.current.clientWidth || f;
+			N({
+				width: e,
+				height: e / m
+			});
+		} else N({
+			width: f,
+			height: p
+		});
+	}, [
+		m,
+		f,
+		p
+	]), t.useEffect(() => {
+		C && (typeof C == "string" ? U(C) : W(C));
+	}, [
+		C,
+		U,
+		W
+	]), t.useEffect(() => {
+		let e = F.current;
+		if (!e) return;
+		let t = e.getContext("2d");
+		if (t && (t.clearRect(0, 0, e.width, e.height), _ !== "transparent" && (t.fillStyle = _, t.fillRect(0, 0, e.width, e.height)), I.forEach((e) => {
+			if (e.points.length < 2) return;
+			t.beginPath(), t.strokeStyle = e.color, t.lineWidth = e.size, t.lineCap = "round", t.lineJoin = "round";
+			let n = e.points;
+			t.moveTo(n[0].x, n[0].y);
+			for (let e = 1; e < n.length - 1; e++) {
+				let r = (n[e].x + n[e + 1].x) / 2, i = (n[e].y + n[e + 1].y) / 2;
+				t.quadraticCurveTo(n[e].x, n[e].y, r, i);
+			}
+			if (n.length > 1) {
+				let e = n[n.length - 1];
+				t.lineTo(e.x, e.y);
+			}
+			t.stroke();
+		}), L && L.points.length >= 2)) {
+			t.beginPath(), t.strokeStyle = L.color, t.lineWidth = L.size, t.lineCap = "round", t.lineJoin = "round";
+			let e = L.points;
+			t.moveTo(e[0].x, e[0].y);
+			for (let n = 1; n < e.length - 1; n++) {
+				let r = (e[n].x + e[n + 1].x) / 2, i = (e[n].y + e[n + 1].y) / 2;
+				t.quadraticCurveTo(e[n].x, e[n].y, r, i);
+			}
+			if (e.length > 1) {
+				let n = e[e.length - 1];
+				t.lineTo(n.x, n.y);
+			}
+			t.stroke();
+		}
+	}, [
+		I,
+		L,
+		_,
+		F
+	]);
+	let J = t.useCallback((e) => {
+		let t = F.current;
+		if (!t) return null;
+		let n = t.getBoundingClientRect(), r = t.width / n.width, i = t.height / n.height;
+		if ("touches" in e) {
+			let t = e.touches[0];
+			if (!t) return null;
+			let a = t;
+			return {
+				x: (t.clientX - n.left) * r,
+				y: (t.clientY - n.top) * i,
+				pressure: a.force ?? .5
+			};
+		}
+		return {
+			x: (e.clientX - n.left) * r,
+			y: (e.clientY - n.top) * i,
+			pressure: .5
+		};
+	}, [F]), Y = t.useCallback((e) => {
+		if (S || k) return;
+		e.preventDefault();
+		let t = J(e);
+		t && G(t);
+	}, [
+		S,
+		k,
+		J,
+		G
+	]), X = t.useCallback((e) => {
+		if (S || k) return;
+		e.preventDefault();
+		let t = J(e);
+		t && K(t);
+	}, [
+		S,
+		k,
+		J,
+		K
+	]), Z = t.useCallback(() => {
+		S || k || q();
+	}, [
+		S,
+		k,
+		q
+	]), Q = t.useCallback((e) => {
+		let t = e === "svg" ? H(_) : V(e, _ === "transparent" ? void 0 : _);
+		T?.(t, e);
+	}, [
+		V,
+		H,
+		_,
+		T
+	]), $ = S || k;
+	return /* @__PURE__ */ c("div", {
+		ref: j,
+		className: e("flex flex-col gap-2", ee),
+		children: [/* @__PURE__ */ c("div", {
+			className: e("relative rounded-lg border bg-background overflow-hidden", $ && "opacity-50 cursor-not-allowed", te),
+			style: {
+				width: M.width,
+				height: M.height
+			},
+			children: [
+				v && /* @__PURE__ */ s("div", {
+					className: "absolute left-4 right-4 pointer-events-none",
+					style: {
+						bottom: "20%",
+						borderBottom: `1px dashed ${y}`
+					}
+				}),
+				R && b && /* @__PURE__ */ s("div", {
+					className: "absolute inset-0 flex items-center justify-center pointer-events-none",
+					style: { color: x },
+					children: /* @__PURE__ */ s("span", {
+						className: "text-sm",
+						children: b
+					})
+				}),
+				/* @__PURE__ */ s("canvas", {
+					ref: F,
+					width: M.width,
+					height: M.height,
+					className: e("touch-none", !$ && "cursor-crosshair"),
+					style: {
+						width: M.width,
+						height: M.height
+					},
+					onMouseDown: Y,
+					onMouseMove: X,
+					onMouseUp: Z,
+					onMouseLeave: Z,
+					onTouchStart: Y,
+					onTouchMove: X,
+					onTouchEnd: Z
+				})
+			]
+		}), E && !S && /* @__PURE__ */ c("div", {
+			className: e("flex items-center justify-between gap-2 flex-wrap", ne),
+			children: [/* @__PURE__ */ c("div", {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ c("div", {
+					className: "flex items-center gap-1",
+					children: [/* @__PURE__ */ s(i, { className: "h-4 w-4 text-muted-foreground" }), D.map((t) => /* @__PURE__ */ s("button", {
+						type: "button",
+						disabled: k,
+						className: e("w-6 h-6 rounded-full border-2 transition-transform hover:scale-110", z === t ? "border-primary ring-2 ring-primary/30" : "border-transparent"),
+						style: { backgroundColor: t },
+						onClick: () => re(t),
+						title: `Color: ${t}`
+					}, t))]
+				}), /* @__PURE__ */ s("div", {
+					className: "flex items-center gap-1 ml-2",
+					children: O.map((t) => /* @__PURE__ */ s("button", {
+						type: "button",
+						disabled: k,
+						className: e("w-7 h-7 rounded flex items-center justify-center border transition-colors", B === t ? "border-primary bg-primary/10" : "border-border hover:bg-muted"),
+						onClick: () => ie(t),
+						title: `Size: ${t}px`,
+						children: /* @__PURE__ */ s("div", {
+							className: "rounded-full bg-current",
+							style: {
+								width: Math.min(t * 2, 16),
+								height: Math.min(t * 2, 16)
+							}
+						})
+					}, t))
+				})]
+			}), /* @__PURE__ */ c("div", {
+				className: "flex items-center gap-1",
+				children: [
+					/* @__PURE__ */ s("button", {
+						type: "button",
+						disabled: k || I.length === 0,
+						className: e("p-2 rounded hover:bg-muted transition-colors", "disabled:opacity-50 disabled:cursor-not-allowed"),
+						onClick: oe,
+						title: "Undo last stroke",
+						children: /* @__PURE__ */ s(o, { className: "h-4 w-4" })
+					}),
+					/* @__PURE__ */ s("button", {
+						type: "button",
+						disabled: k || R,
+						className: e("p-2 rounded hover:bg-muted transition-colors text-destructive", "disabled:opacity-50 disabled:cursor-not-allowed"),
+						onClick: ae,
+						title: "Clear signature",
+						children: /* @__PURE__ */ s(a, { className: "h-4 w-4" })
+					}),
+					/* @__PURE__ */ s("div", { className: "w-px h-6 bg-border mx-1" }),
+					/* @__PURE__ */ s("button", {
+						type: "button",
+						disabled: k || R,
+						className: e("p-2 rounded hover:bg-muted transition-colors", "disabled:opacity-50 disabled:cursor-not-allowed"),
+						onClick: () => Q("png"),
+						title: "Save as PNG",
+						children: /* @__PURE__ */ s(r, { className: "h-4 w-4" })
+					}),
+					T && /* @__PURE__ */ s("button", {
+						type: "button",
+						disabled: k || R,
+						className: e("p-2 rounded hover:bg-muted transition-colors text-primary", "disabled:opacity-50 disabled:cursor-not-allowed"),
+						onClick: () => Q("png"),
+						title: "Confirm signature",
+						children: /* @__PURE__ */ s(n, { className: "h-4 w-4" })
+					})
+				]
+			})]
+		})]
+	});
+});
+f.displayName = "WakaSignaturePad";
+//#endregion
+export { f as WakaSignaturePad, f as default, l as useSignaturePad };

package/dist/components/waka-skeleton-wave/index.cjs.js

@@ -0,0 +1,15 @@
+"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("class-variance-authority"),i=require("react/jsx-runtime");var a=(0,r.cva)(`relative overflow-hidden`,{variants:{rounded:{none:`rounded-none`,sm:`rounded-sm`,md:`rounded-md`,lg:`rounded-lg`,xl:`rounded-xl`,full:`rounded-full`}},defaultVariants:{rounded:`md`}}),o={text:{width:`100%`,height:16,rounded:`sm`},avatar:{width:40,height:40,rounded:`full`},card:{width:`100%`,height:200,rounded:`lg`},list:{width:`100%`,height:60,rounded:`md`},thumbnail:{width:80,height:80,rounded:`md`},button:{width:120,height:40,rounded:`md`}};function s({baseColor:e,highlightColor:t,speed:n,animated:r}){return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(`div`,{className:`absolute inset-0`,style:{backgroundColor:e}}),r&&(0,i.jsx)(`div`,{className:`absolute inset-0`,style:{background:`linear-gradient(
+              90deg,
+              transparent 0%,
+              ${t} 50%,
+              transparent 100%
+            )`,animation:`waka-skeleton-wave ${n}s ease-in-out infinite`}})]})}var c=n.forwardRef(({className:e,preset:r,width:c,height:u,speed:d=1.5,baseColor:f=`hsl(var(--muted))`,highlightColor:p=`hsl(var(--muted-foreground) / 0.1)`,animated:m=!0,rounded:h,lines:g=1,lineGap:_=8,randomWidths:v=!0,style:y,...b},x)=>{let S=r?o[r]:null,C=c??S?.width??`100%`,w=u??S?.height??16,T=h??S?.rounded??`md`,E=n.useMemo(()=>!v||r!==`text`?Array(g).fill(`100%`):Array.from({length:g},(e,t)=>t===g-1?`${50+Math.random()*30}%`:`${85+Math.random()*15}%`),[g,v,r]);return r===`text`&&g>1?(0,i.jsxs)(`div`,{ref:x,className:t.cn(`flex flex-col`,e),style:{gap:_,...y},...b,children:[Array.from({length:g},(e,n)=>(0,i.jsx)(`div`,{className:t.cn(a({rounded:T})),style:{width:E[n],height:w},children:(0,i.jsx)(s,{baseColor:f,highlightColor:p,speed:d,animated:m})},n)),(0,i.jsx)(l,{speed:d})]}):(0,i.jsxs)(`div`,{ref:x,className:t.cn(a({rounded:T,className:e})),style:{width:typeof C==`number`?`${C}px`:C,height:typeof w==`number`?`${w}px`:w,...y},...b,children:[(0,i.jsx)(s,{baseColor:f,highlightColor:p,speed:d,animated:m}),(0,i.jsx)(l,{speed:d})]})});c.displayName=`WakaSkeletonWave`;function l({speed:e}){return(0,i.jsx)(`style`,{dangerouslySetInnerHTML:{__html:`
+          @keyframes waka-skeleton-wave {
+            0% {
+              transform: translateX(-100%);
+            }
+            100% {
+              transform: translateX(100%);
+            }
+          }
+        `}})}var u=n.forwardRef(({lines:e=3,...t},n)=>(0,i.jsx)(c,{ref:n,preset:`text`,lines:e,...t}));u.displayName=`WakaSkeletonText`;var d={sm:32,md:40,lg:56,xl:80},f=n.forwardRef(({size:e=`md`,...t},n)=>(0,i.jsx)(c,{ref:n,preset:`avatar`,width:d[e],height:d[e],...t}));f.displayName=`WakaSkeletonAvatar`;var p=n.forwardRef(({showHeader:e=!0,showImage:n=!0,contentLines:r=3,className:a,baseColor:o,highlightColor:s,speed:d,animated:p,...m},h)=>{let g={baseColor:o,highlightColor:s,speed:d,animated:p};return(0,i.jsxs)(`div`,{ref:h,className:t.cn(`flex flex-col gap-4 p-4 rounded-lg border`,a),...m,children:[e&&(0,i.jsxs)(`div`,{className:`flex items-center gap-3`,children:[(0,i.jsx)(f,{size:`md`,...g}),(0,i.jsxs)(`div`,{className:`flex-1 flex flex-col gap-2`,children:[(0,i.jsx)(c,{width:`60%`,height:14,...g}),(0,i.jsx)(c,{width:`40%`,height:12,...g})]})]}),n&&(0,i.jsx)(c,{width:`100%`,height:160,rounded:`lg`,...g}),r>0&&(0,i.jsx)(u,{lines:r,...g}),(0,i.jsx)(l,{speed:d??1.5})]})});p.displayName=`WakaSkeletonCard`;var m=n.forwardRef(({items:e=5,gap:n=12,showAvatar:r=!0,showAction:a=!1,className:o,baseColor:s,highlightColor:u,speed:d,animated:p,...m},h)=>{let g={baseColor:s,highlightColor:u,speed:d,animated:p};return(0,i.jsxs)(`div`,{ref:h,className:t.cn(`flex flex-col`,o),style:{gap:n},...m,children:[Array.from({length:e},(e,t)=>(0,i.jsxs)(`div`,{className:`flex items-center gap-3 p-2`,children:[r&&(0,i.jsx)(f,{size:`md`,...g}),(0,i.jsxs)(`div`,{className:`flex-1 flex flex-col gap-2`,children:[(0,i.jsx)(c,{width:`70%`,height:14,...g}),(0,i.jsx)(c,{width:`50%`,height:12,...g})]}),a&&(0,i.jsx)(c,{width:80,height:32,rounded:`md`,...g})]},t)),(0,i.jsx)(l,{speed:d??1.5})]})});m.displayName=`WakaSkeletonList`;var h=n.forwardRef(({items:e=6,columns:n=3,gap:r=16,aspectRatio:a=1,className:o,baseColor:s,highlightColor:u,speed:d=1.5,animated:f=!0,style:p,...m},h)=>{let g={baseColor:s,highlightColor:u,speed:d,animated:f};return(0,i.jsxs)(`div`,{ref:h,className:t.cn(`grid`,o),style:{gridTemplateColumns:`repeat(${n}, 1fr)`,gap:r,...p},...m,children:[Array.from({length:e},(e,t)=>(0,i.jsx)(`div`,{style:{aspectRatio:a},children:(0,i.jsx)(c,{width:`100%`,height:`100%`,rounded:`lg`,...g})},t)),(0,i.jsx)(l,{speed:d})]})});h.displayName=`WakaSkeletonGrid`,exports.WakaSkeletonAvatar=f,exports.WakaSkeletonCard=p,exports.WakaSkeletonGrid=h,exports.WakaSkeletonList=m,exports.WakaSkeletonText=u,exports.WakaSkeletonWave=c;

package/dist/components/waka-skeleton-wave/index.d.ts

@@ -23,9 +23,9 @@ export interface WakaSkeletonWaveProps extends React.HTMLAttributes<HTMLDivEleme
     /** Random line widths for text preset */
     randomWidths?: boolean;
 }
-declare const skeletonVariants: (props?: {
-    rounded?: "sm" | "md" | "lg" | "xl" | "none" | "full";
-} & import("class-variance-authority/types").ClassProp) => string;
+declare const skeletonVariants: (props?: ({
+    rounded?: "sm" | "md" | "lg" | "xl" | "none" | "full" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const WakaSkeletonWave: React.ForwardRefExoticComponent<WakaSkeletonWaveProps & React.RefAttributes<HTMLDivElement>>;
 export interface WakaSkeletonTextProps extends Omit<WakaSkeletonWaveProps, "preset"> {
     /** Number of text lines */

package/dist/components/waka-skeleton-wave/index.es.js

@@ -0,0 +1,254 @@
+"use client";
+"use client";
+import { cn as e } from "../../utils/cn.es.js";
+import * as t from "react";
+import { cva as n } from "class-variance-authority";
+import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/components/waka-skeleton-wave/index.tsx
+var o = n("relative overflow-hidden", {
+	variants: { rounded: {
+		none: "rounded-none",
+		sm: "rounded-sm",
+		md: "rounded-md",
+		lg: "rounded-lg",
+		xl: "rounded-xl",
+		full: "rounded-full"
+	} },
+	defaultVariants: { rounded: "md" }
+}), s = {
+	text: {
+		width: "100%",
+		height: 16,
+		rounded: "sm"
+	},
+	avatar: {
+		width: 40,
+		height: 40,
+		rounded: "full"
+	},
+	card: {
+		width: "100%",
+		height: 200,
+		rounded: "lg"
+	},
+	list: {
+		width: "100%",
+		height: 60,
+		rounded: "md"
+	},
+	thumbnail: {
+		width: 80,
+		height: 80,
+		rounded: "md"
+	},
+	button: {
+		width: 120,
+		height: 40,
+		rounded: "md"
+	}
+};
+function c({ baseColor: e, highlightColor: t, speed: n, animated: o }) {
+	return /* @__PURE__ */ a(r, { children: [/* @__PURE__ */ i("div", {
+		className: "absolute inset-0",
+		style: { backgroundColor: e }
+	}), o && /* @__PURE__ */ i("div", {
+		className: "absolute inset-0",
+		style: {
+			background: `linear-gradient(
+              90deg,
+              transparent 0%,
+              ${t} 50%,
+              transparent 100%
+            )`,
+			animation: `waka-skeleton-wave ${n}s ease-in-out infinite`
+		}
+	})] });
+}
+var l = t.forwardRef(({ className: n, preset: r, width: l, height: d, speed: f = 1.5, baseColor: p = "hsl(var(--muted))", highlightColor: m = "hsl(var(--muted-foreground) / 0.1)", animated: h = !0, rounded: g, lines: _ = 1, lineGap: v = 8, randomWidths: y = !0, style: b, ...x }, S) => {
+	let C = r ? s[r] : null, w = l ?? C?.width ?? "100%", T = d ?? C?.height ?? 16, E = g ?? C?.rounded ?? "md", D = t.useMemo(() => !y || r !== "text" ? Array(_).fill("100%") : Array.from({ length: _ }, (e, t) => t === _ - 1 ? `${50 + Math.random() * 30}%` : `${85 + Math.random() * 15}%`), [
+		_,
+		y,
+		r
+	]);
+	return r === "text" && _ > 1 ? /* @__PURE__ */ a("div", {
+		ref: S,
+		className: e("flex flex-col", n),
+		style: {
+			gap: v,
+			...b
+		},
+		...x,
+		children: [Array.from({ length: _ }, (t, n) => /* @__PURE__ */ i("div", {
+			className: e(o({ rounded: E })),
+			style: {
+				width: D[n],
+				height: T
+			},
+			children: /* @__PURE__ */ i(c, {
+				baseColor: p,
+				highlightColor: m,
+				speed: f,
+				animated: h
+			})
+		}, n)), /* @__PURE__ */ i(u, { speed: f })]
+	}) : /* @__PURE__ */ a("div", {
+		ref: S,
+		className: e(o({
+			rounded: E,
+			className: n
+		})),
+		style: {
+			width: typeof w == "number" ? `${w}px` : w,
+			height: typeof T == "number" ? `${T}px` : T,
+			...b
+		},
+		...x,
+		children: [/* @__PURE__ */ i(c, {
+			baseColor: p,
+			highlightColor: m,
+			speed: f,
+			animated: h
+		}), /* @__PURE__ */ i(u, { speed: f })]
+	});
+});
+l.displayName = "WakaSkeletonWave";
+function u({ speed: e }) {
+	return /* @__PURE__ */ i("style", { dangerouslySetInnerHTML: { __html: "\n          @keyframes waka-skeleton-wave {\n            0% {\n              transform: translateX(-100%);\n            }\n            100% {\n              transform: translateX(100%);\n            }\n          }\n        " } });
+}
+var d = t.forwardRef(({ lines: e = 3, ...t }, n) => /* @__PURE__ */ i(l, {
+	ref: n,
+	preset: "text",
+	lines: e,
+	...t
+}));
+d.displayName = "WakaSkeletonText";
+var f = {
+	sm: 32,
+	md: 40,
+	lg: 56,
+	xl: 80
+}, p = t.forwardRef(({ size: e = "md", ...t }, n) => /* @__PURE__ */ i(l, {
+	ref: n,
+	preset: "avatar",
+	width: f[e],
+	height: f[e],
+	...t
+}));
+p.displayName = "WakaSkeletonAvatar";
+var m = t.forwardRef(({ showHeader: t = !0, showImage: n = !0, contentLines: r = 3, className: o, baseColor: s, highlightColor: c, speed: f, animated: m, ...h }, g) => {
+	let _ = {
+		baseColor: s,
+		highlightColor: c,
+		speed: f,
+		animated: m
+	};
+	return /* @__PURE__ */ a("div", {
+		ref: g,
+		className: e("flex flex-col gap-4 p-4 rounded-lg border", o),
+		...h,
+		children: [
+			t && /* @__PURE__ */ a("div", {
+				className: "flex items-center gap-3",
+				children: [/* @__PURE__ */ i(p, {
+					size: "md",
+					..._
+				}), /* @__PURE__ */ a("div", {
+					className: "flex-1 flex flex-col gap-2",
+					children: [/* @__PURE__ */ i(l, {
+						width: "60%",
+						height: 14,
+						..._
+					}), /* @__PURE__ */ i(l, {
+						width: "40%",
+						height: 12,
+						..._
+					})]
+				})]
+			}),
+			n && /* @__PURE__ */ i(l, {
+				width: "100%",
+				height: 160,
+				rounded: "lg",
+				..._
+			}),
+			r > 0 && /* @__PURE__ */ i(d, {
+				lines: r,
+				..._
+			}),
+			/* @__PURE__ */ i(u, { speed: f ?? 1.5 })
+		]
+	});
+});
+m.displayName = "WakaSkeletonCard";
+var h = t.forwardRef(({ items: t = 5, gap: n = 12, showAvatar: r = !0, showAction: o = !1, className: s, baseColor: c, highlightColor: d, speed: f, animated: m, ...h }, g) => {
+	let _ = {
+		baseColor: c,
+		highlightColor: d,
+		speed: f,
+		animated: m
+	};
+	return /* @__PURE__ */ a("div", {
+		ref: g,
+		className: e("flex flex-col", s),
+		style: { gap: n },
+		...h,
+		children: [Array.from({ length: t }, (e, t) => /* @__PURE__ */ a("div", {
+			className: "flex items-center gap-3 p-2",
+			children: [
+				r && /* @__PURE__ */ i(p, {
+					size: "md",
+					..._
+				}),
+				/* @__PURE__ */ a("div", {
+					className: "flex-1 flex flex-col gap-2",
+					children: [/* @__PURE__ */ i(l, {
+						width: "70%",
+						height: 14,
+						..._
+					}), /* @__PURE__ */ i(l, {
+						width: "50%",
+						height: 12,
+						..._
+					})]
+				}),
+				o && /* @__PURE__ */ i(l, {
+					width: 80,
+					height: 32,
+					rounded: "md",
+					..._
+				})
+			]
+		}, t)), /* @__PURE__ */ i(u, { speed: f ?? 1.5 })]
+	});
+});
+h.displayName = "WakaSkeletonList";
+var g = t.forwardRef(({ items: t = 6, columns: n = 3, gap: r = 16, aspectRatio: o = 1, className: s, baseColor: c, highlightColor: d, speed: f = 1.5, animated: p = !0, style: m, ...h }, g) => {
+	let _ = {
+		baseColor: c,
+		highlightColor: d,
+		speed: f,
+		animated: p
+	};
+	return /* @__PURE__ */ a("div", {
+		ref: g,
+		className: e("grid", s),
+		style: {
+			gridTemplateColumns: `repeat(${n}, 1fr)`,
+			gap: r,
+			...m
+		},
+		...h,
+		children: [Array.from({ length: t }, (e, t) => /* @__PURE__ */ i("div", {
+			style: { aspectRatio: o },
+			children: /* @__PURE__ */ i(l, {
+				width: "100%",
+				height: "100%",
+				rounded: "lg",
+				..._
+			})
+		}, t)), /* @__PURE__ */ i(u, { speed: f })]
+	});
+});
+g.displayName = "WakaSkeletonGrid";
+//#endregion
+export { p as WakaSkeletonAvatar, m as WakaSkeletonCard, g as WakaSkeletonGrid, h as WakaSkeletonList, d as WakaSkeletonText, l as WakaSkeletonWave };