@wakastellar/ui 4.0.0 → 4.0.1

package/dist/components/waka-product-card/index.es.js

@@ -0,0 +1,337 @@
+"use client";
+"use client";
+import { cn as e } from "../../utils/cn.es.js";
+import * as t from "react";
+import { Check as n, ChevronLeft as r, ChevronRight as i, Eye as a, Heart as o, ShoppingCart as s, Star as c } from "lucide-react";
+import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
+//#region src/components/waka-product-card/index.tsx
+var f = "\n@keyframes waka-heart-pulse {\n  0%, 100% { transform: scale(1); }\n  50% { transform: scale(1.3); }\n}\n\n@keyframes waka-heart-fill {\n  0% { transform: scale(0.8); opacity: 0; }\n  50% { transform: scale(1.2); }\n  100% { transform: scale(1); opacity: 1; }\n}\n\n@keyframes waka-cart-bounce {\n  0%, 100% { transform: translateY(0); }\n  25% { transform: translateY(-4px); }\n  50% { transform: translateY(0); }\n  75% { transform: translateY(-2px); }\n}\n\n@keyframes waka-badge-pop {\n  0% { transform: scale(0) rotate(-12deg); }\n  50% { transform: scale(1.1) rotate(-12deg); }\n  100% { transform: scale(1) rotate(-12deg); }\n}\n";
+function p({ images: t, currentIndex: n, onIndexChange: a, galleryMode: o, onHover: s }) {
+	return /* @__PURE__ */ d("div", {
+		className: "relative aspect-square overflow-hidden bg-muted group",
+		onMouseEnter: () => s?.(!0),
+		onMouseLeave: () => s?.(!1),
+		children: [
+			/* @__PURE__ */ u("div", {
+				className: "relative h-full w-full",
+				children: t.map((t, r) => /* @__PURE__ */ u("img", {
+					src: t.src,
+					alt: t.alt,
+					className: e("absolute inset-0 h-full w-full object-cover transition-opacity duration-300", r === n ? "opacity-100" : "opacity-0")
+				}, r))
+			}),
+			t.length > 1 && /* @__PURE__ */ d(l, { children: [/* @__PURE__ */ u("button", {
+				type: "button",
+				onClick: (e) => {
+					e.stopPropagation(), a(n === 0 ? t.length - 1 : n - 1);
+				},
+				className: "absolute left-2 top-1/2 -translate-y-1/2 h-8 w-8 rounded-full bg-background/80 backdrop-blur-sm flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity hover:bg-background shadow-md",
+				"aria-label": "Previous image",
+				children: /* @__PURE__ */ u(r, { className: "h-4 w-4" })
+			}), /* @__PURE__ */ u("button", {
+				type: "button",
+				onClick: (e) => {
+					e.stopPropagation(), a(n === t.length - 1 ? 0 : n + 1);
+				},
+				className: "absolute right-2 top-1/2 -translate-y-1/2 h-8 w-8 rounded-full bg-background/80 backdrop-blur-sm flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity hover:bg-background shadow-md",
+				"aria-label": "Next image",
+				children: /* @__PURE__ */ u(i, { className: "h-4 w-4" })
+			})] }),
+			o === "dots" && t.length > 1 && /* @__PURE__ */ u("div", {
+				className: "absolute bottom-3 left-1/2 -translate-x-1/2 flex gap-1.5",
+				children: t.map((t, r) => /* @__PURE__ */ u("button", {
+					type: "button",
+					onClick: (e) => {
+						e.stopPropagation(), a(r);
+					},
+					className: e("h-2 w-2 rounded-full transition-all", r === n ? "bg-primary w-4" : "bg-background/60 hover:bg-background/80"),
+					"aria-label": `Go to image ${r + 1}`
+				}, r))
+			}),
+			o === "thumbnails" && t.length > 1 && /* @__PURE__ */ d("div", {
+				className: "absolute bottom-2 left-2 right-2 flex gap-1.5 opacity-0 group-hover:opacity-100 transition-opacity",
+				children: [t.slice(0, 4).map((t, r) => /* @__PURE__ */ u("button", {
+					type: "button",
+					onClick: (e) => {
+						e.stopPropagation(), a(r);
+					},
+					className: e("h-10 w-10 rounded overflow-hidden border-2 transition-all", r === n ? "border-primary" : "border-transparent opacity-70 hover:opacity-100"),
+					children: /* @__PURE__ */ u("img", {
+						src: t.src,
+						alt: t.alt,
+						className: "h-full w-full object-cover"
+					})
+				}, r)), t.length > 4 && /* @__PURE__ */ d("div", {
+					className: "h-10 w-10 rounded bg-background/80 backdrop-blur-sm flex items-center justify-center text-xs font-medium",
+					children: ["+", t.length - 4]
+				})]
+			})
+		]
+	});
+}
+function m({ rating: t, reviewCount: n, size: r = "default" }) {
+	let i = Math.floor(t), a = t % 1 >= .5, o = 5 - i - !!a, s = r === "sm" ? "h-3 w-3" : "h-4 w-4";
+	return /* @__PURE__ */ d("div", {
+		className: "flex items-center gap-1",
+		children: [/* @__PURE__ */ d("div", {
+			className: "flex",
+			children: [
+				Array.from({ length: i }).map((t, n) => /* @__PURE__ */ u(c, { className: e(s, "fill-amber-400 text-amber-400") }, `full-${n}`)),
+				a && /* @__PURE__ */ d("div", {
+					className: "relative",
+					children: [/* @__PURE__ */ u(c, { className: e(s, "text-muted-foreground/30") }), /* @__PURE__ */ u("div", {
+						className: "absolute inset-0 overflow-hidden w-1/2",
+						children: /* @__PURE__ */ u(c, { className: e(s, "fill-amber-400 text-amber-400") })
+					})]
+				}),
+				Array.from({ length: o }).map((t, n) => /* @__PURE__ */ u(c, { className: e(s, "text-muted-foreground/30") }, `empty-${n}`))
+			]
+		}), n !== void 0 && /* @__PURE__ */ d("span", {
+			className: "text-xs text-muted-foreground",
+			children: [
+				"(",
+				n,
+				")"
+			]
+		})]
+	});
+}
+function h({ isWishlisted: n, onToggle: r, className: i }) {
+	let [a, s] = t.useState(!1);
+	return /* @__PURE__ */ u("button", {
+		type: "button",
+		onClick: (e) => {
+			e.stopPropagation(), s(!0), r(), setTimeout(() => s(!1), 300);
+		},
+		className: e("h-9 w-9 rounded-full bg-background/80 backdrop-blur-sm flex items-center justify-center shadow-md transition-all hover:bg-background hover:scale-110", i),
+		"aria-label": n ? "Remove from wishlist" : "Add to wishlist",
+		children: /* @__PURE__ */ u(o, {
+			className: e("h-5 w-5 transition-all", n ? "fill-red-500 text-red-500" : "text-muted-foreground hover:text-red-500"),
+			style: { animation: a ? n ? "waka-heart-fill 0.3s ease-out" : "waka-heart-pulse 0.3s ease-out" : void 0 }
+		})
+	});
+}
+function g({ variants: t, selectedId: r, onSelect: i }) {
+	return /* @__PURE__ */ u("div", {
+		className: "flex flex-wrap gap-2",
+		children: t.map((t) => /* @__PURE__ */ d("button", {
+			type: "button",
+			onClick: () => t.available !== !1 && i(t),
+			disabled: t.available === !1,
+			className: e("h-6 w-6 rounded-full border-2 transition-all relative", r === t.id ? "border-primary ring-2 ring-primary/30" : "border-border hover:border-primary/50", t.available === !1 && "opacity-40 cursor-not-allowed"),
+			style: { backgroundColor: t.color },
+			title: t.label,
+			"aria-label": `Select ${t.label}`,
+			children: [r === t.id && /* @__PURE__ */ u(n, { className: e("absolute inset-0 m-auto h-3 w-3", v(t.color) ? "text-gray-800" : "text-white") }), t.available === !1 && /* @__PURE__ */ u("div", {
+				className: "absolute inset-0 flex items-center justify-center",
+				children: /* @__PURE__ */ u("div", { className: "h-full w-px bg-muted-foreground rotate-45 absolute" })
+			})]
+		}, t.id))
+	});
+}
+function _({ variants: t, selectedId: n, onSelect: r }) {
+	return /* @__PURE__ */ u("div", {
+		className: "flex flex-wrap gap-1.5",
+		children: t.map((t) => /* @__PURE__ */ u("button", {
+			type: "button",
+			onClick: () => t.available !== !1 && r(t),
+			disabled: t.available === !1,
+			className: e("h-7 min-w-[28px] px-2 text-xs font-medium rounded border transition-all", n === t.id ? "border-primary bg-primary text-primary-foreground" : "border-border bg-background hover:border-primary/50", t.available === !1 && "opacity-40 cursor-not-allowed line-through"),
+			title: t.label,
+			children: t.value
+		}, t.id))
+	});
+}
+function v(e) {
+	let t = e.replace("#", "");
+	if (t.length === 3) {
+		let e = parseInt(t[0] + t[0], 16), n = parseInt(t[1] + t[1], 16), r = parseInt(t[2] + t[2], 16);
+		return (e * 299 + n * 587 + r * 114) / 1e3 > 155;
+	} else if (t.length === 6) {
+		let e = parseInt(t.substring(0, 2), 16), n = parseInt(t.substring(2, 4), 16), r = parseInt(t.substring(4, 6), 16);
+		return (e * 299 + n * 587 + r * 114) / 1e3 > 155;
+	}
+	return !1;
+}
+function y(e, t) {
+	return `${t}${e.toFixed(2)}`;
+}
+function b({ name: n, price: r, originalPrice: i, currency: o = "$", images: c, rating: v, reviewCount: b, discountBadge: x, customBadge: S, colorVariants: C, sizeVariants: w, inStock: T = !0, isWishlisted: E = !1, showQuickView: D = !0, galleryMode: O = "dots", onAddToCart: k, onWishlistToggle: A, onQuickView: j, onColorSelect: M, onSizeSelect: N, selectedColorId: P, selectedSizeId: F, size: I = "default", className: L, ...R }) {
+	let [z, B] = t.useState(0), [V, H] = t.useState(!1), [U, W] = t.useState(E), [G, K] = t.useState(!1);
+	t.useEffect(() => {
+		W(E);
+	}, [E]);
+	let q = () => {
+		let e = !U;
+		W(e), A?.(e);
+	}, J = () => {
+		T && (K(!0), k?.(), setTimeout(() => K(!1), 500));
+	}, Y = {
+		sm: "max-w-[240px]",
+		default: "max-w-[300px]",
+		lg: "max-w-[360px]"
+	}, X = i !== void 0 && i > r, Z = X ? Math.round((i - r) / i * 100) : 0;
+	return /* @__PURE__ */ d(l, { children: [/* @__PURE__ */ u("style", { dangerouslySetInnerHTML: { __html: f } }), /* @__PURE__ */ d("div", {
+		className: e("group relative w-full rounded-xl border bg-card overflow-hidden transition-all duration-300", "hover:shadow-lg hover:-translate-y-1", Y[I], L),
+		...R,
+		children: [/* @__PURE__ */ d("div", {
+			className: "relative",
+			children: [
+				/* @__PURE__ */ u(p, {
+					images: c,
+					currentIndex: z,
+					onIndexChange: B,
+					galleryMode: O,
+					onHover: H
+				}),
+				/* @__PURE__ */ d("div", {
+					className: "absolute top-2 left-2 flex flex-col gap-1.5",
+					children: [
+						(x || X) && /* @__PURE__ */ u("span", {
+							className: "px-2 py-0.5 text-xs font-bold bg-red-500 text-white rounded",
+							style: { animation: "waka-badge-pop 0.3s ease-out" },
+							children: x || `-${Z}%`
+						}),
+						S && /* @__PURE__ */ u("span", {
+							className: "px-2 py-0.5 text-xs font-bold bg-primary text-primary-foreground rounded",
+							style: { animation: "waka-badge-pop 0.3s ease-out 0.1s both" },
+							children: S
+						}),
+						!T && /* @__PURE__ */ u("span", {
+							className: "px-2 py-0.5 text-xs font-bold bg-muted text-muted-foreground rounded",
+							children: "Out of Stock"
+						})
+					]
+				}),
+				/* @__PURE__ */ d("div", {
+					className: "absolute top-2 right-2 flex flex-col gap-2",
+					children: [/* @__PURE__ */ u(h, {
+						isWishlisted: U,
+						onToggle: q
+					}), D && /* @__PURE__ */ u("button", {
+						type: "button",
+						onClick: (e) => {
+							e.stopPropagation(), j?.();
+						},
+						className: e("h-9 w-9 rounded-full bg-background/80 backdrop-blur-sm flex items-center justify-center shadow-md transition-all hover:bg-background", "opacity-0 group-hover:opacity-100 translate-y-2 group-hover:translate-y-0"),
+						"aria-label": "Quick view",
+						children: /* @__PURE__ */ u(a, { className: "h-5 w-5 text-muted-foreground" })
+					})]
+				}),
+				/* @__PURE__ */ u("div", {
+					className: e("absolute bottom-0 left-0 right-0 p-3 bg-gradient-to-t from-background/95 to-transparent transition-all duration-300", V && c.length > 1 && O === "thumbnails" ? "opacity-0" : "opacity-0 group-hover:opacity-100 translate-y-2 group-hover:translate-y-0"),
+					children: /* @__PURE__ */ d("button", {
+						type: "button",
+						onClick: J,
+						disabled: !T,
+						className: e("w-full h-10 rounded-lg font-medium text-sm flex items-center justify-center gap-2 transition-all", T ? "bg-primary text-primary-foreground hover:bg-primary/90" : "bg-muted text-muted-foreground cursor-not-allowed"),
+						style: { animation: G ? "waka-cart-bounce 0.5s ease-out" : void 0 },
+						children: [/* @__PURE__ */ u(s, { className: "h-4 w-4" }), T ? "Add to Cart" : "Out of Stock"]
+					})
+				})
+			]
+		}), /* @__PURE__ */ d("div", {
+			className: "p-4 space-y-3",
+			children: [
+				v !== void 0 && /* @__PURE__ */ u(m, {
+					rating: v,
+					reviewCount: b,
+					size: "sm"
+				}),
+				/* @__PURE__ */ u("h3", {
+					className: "font-medium text-sm leading-tight line-clamp-2 group-hover:text-primary transition-colors",
+					children: n
+				}),
+				/* @__PURE__ */ d("div", {
+					className: "flex items-baseline gap-2",
+					children: [/* @__PURE__ */ u("span", {
+						className: "text-lg font-bold",
+						children: y(r, o)
+					}), X && /* @__PURE__ */ u("span", {
+						className: "text-sm text-muted-foreground line-through",
+						children: y(i, o)
+					})]
+				}),
+				C && C.length > 0 && /* @__PURE__ */ d("div", {
+					className: "space-y-1.5",
+					children: [/* @__PURE__ */ u("span", {
+						className: "text-xs text-muted-foreground",
+						children: "Color"
+					}), /* @__PURE__ */ u(g, {
+						variants: C,
+						selectedId: P,
+						onSelect: (e) => M?.(e)
+					})]
+				}),
+				w && w.length > 0 && /* @__PURE__ */ d("div", {
+					className: "space-y-1.5",
+					children: [/* @__PURE__ */ u("span", {
+						className: "text-xs text-muted-foreground",
+						children: "Size"
+					}), /* @__PURE__ */ u(_, {
+						variants: w,
+						selectedId: F,
+						onSelect: (e) => N?.(e)
+					})]
+				})
+			]
+		})]
+	})] });
+}
+function x({ columns: t = 4, gap: n = "md", className: r, children: i, ...a }) {
+	return /* @__PURE__ */ u("div", {
+		className: e("grid", {
+			2: "grid-cols-1 sm:grid-cols-2",
+			3: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
+			4: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4",
+			5: "grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5"
+		}[t], {
+			sm: "gap-3",
+			md: "gap-4",
+			lg: "gap-6"
+		}[n], r),
+		...a,
+		children: i
+	});
+}
+function S({ size: t = "default", showVariants: n = !1 }) {
+	return /* @__PURE__ */ d("div", {
+		className: e("w-full rounded-xl border bg-card overflow-hidden", {
+			sm: "max-w-[240px]",
+			default: "max-w-[300px]",
+			lg: "max-w-[360px]"
+		}[t]),
+		children: [/* @__PURE__ */ u("div", { className: "aspect-square bg-muted animate-pulse" }), /* @__PURE__ */ d("div", {
+			className: "p-4 space-y-3",
+			children: [
+				/* @__PURE__ */ u("div", {
+					className: "flex gap-1",
+					children: Array.from({ length: 5 }).map((e, t) => /* @__PURE__ */ u("div", { className: "h-3 w-3 bg-muted rounded animate-pulse" }, t))
+				}),
+				/* @__PURE__ */ d("div", {
+					className: "space-y-1.5",
+					children: [/* @__PURE__ */ u("div", { className: "h-4 bg-muted rounded animate-pulse w-full" }), /* @__PURE__ */ u("div", { className: "h-4 bg-muted rounded animate-pulse w-2/3" })]
+				}),
+				/* @__PURE__ */ d("div", {
+					className: "flex gap-2",
+					children: [/* @__PURE__ */ u("div", { className: "h-6 w-16 bg-muted rounded animate-pulse" }), /* @__PURE__ */ u("div", { className: "h-4 w-12 bg-muted rounded animate-pulse" })]
+				}),
+				n && /* @__PURE__ */ d(l, { children: [/* @__PURE__ */ d("div", {
+					className: "space-y-1.5",
+					children: [/* @__PURE__ */ u("div", { className: "h-3 w-10 bg-muted rounded animate-pulse" }), /* @__PURE__ */ u("div", {
+						className: "flex gap-2",
+						children: Array.from({ length: 4 }).map((e, t) => /* @__PURE__ */ u("div", { className: "h-6 w-6 bg-muted rounded-full animate-pulse" }, t))
+					})]
+				}), /* @__PURE__ */ d("div", {
+					className: "space-y-1.5",
+					children: [/* @__PURE__ */ u("div", { className: "h-3 w-8 bg-muted rounded animate-pulse" }), /* @__PURE__ */ u("div", {
+						className: "flex gap-1.5",
+						children: Array.from({ length: 4 }).map((e, t) => /* @__PURE__ */ u("div", { className: "h-7 w-8 bg-muted rounded animate-pulse" }, t))
+					})]
+				})] })
+			]
+		})]
+	});
+}
+//#endregion
+export { b as WakaProductCard, S as WakaProductCardSkeleton, x as WakaProductGrid };

package/dist/components/waka-progress-onboarding/index.cjs.js

@@ -0,0 +1,32 @@
+"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(`lucide-react`),i=require(`react/jsx-runtime`);var a={default:{gradient:`from-primary to-primary`,fill:`bg-primary`,stepActive:`bg-primary text-primary-foreground border-primary`,stepCompleted:`bg-primary text-primary-foreground border-primary`,stepPending:`bg-muted text-muted-foreground border-muted`,text:`text-primary`},blue:{gradient:`from-blue-500 to-blue-600`,fill:`bg-blue-500`,stepActive:`bg-blue-500 text-white border-blue-500`,stepCompleted:`bg-blue-500 text-white border-blue-500`,stepPending:`bg-muted text-muted-foreground border-muted`,text:`text-blue-600`},green:{gradient:`from-green-500 to-emerald-600`,fill:`bg-green-500`,stepActive:`bg-green-500 text-white border-green-500`,stepCompleted:`bg-green-500 text-white border-green-500`,stepPending:`bg-muted text-muted-foreground border-muted`,text:`text-green-600`},purple:{gradient:`from-purple-500 to-purple-600`,fill:`bg-purple-500`,stepActive:`bg-purple-500 text-white border-purple-500`,stepCompleted:`bg-purple-500 text-white border-purple-500`,stepPending:`bg-muted text-muted-foreground border-muted`,text:`text-purple-600`},orange:{gradient:`from-orange-500 to-amber-600`,fill:`bg-orange-500`,stepActive:`bg-orange-500 text-white border-orange-500`,stepCompleted:`bg-orange-500 text-white border-orange-500`,stepPending:`bg-muted text-muted-foreground border-muted`,text:`text-orange-600`},custom:{gradient:``,fill:``,stepActive:``,stepCompleted:``,stepPending:`bg-muted text-muted-foreground border-muted`,text:``}};function o({active:e,onComplete:t}){let[r,a]=n.useState(!1);if(n.useEffect(()=>{if(e){a(!0);let e=setTimeout(()=>{a(!1),t?.()},2500);return()=>clearTimeout(e)}},[e,t]),!r)return null;let o=[`#22c55e`,`#3b82f6`,`#f59e0b`,`#ef4444`,`#a855f7`,`#06b6d4`];return(0,i.jsxs)(`div`,{className:`pointer-events-none absolute inset-0 overflow-hidden`,children:[[...Array(40)].map((e,t)=>{let n=t/40*360,r=60+Math.random()*80,a=4+Math.random()*6,s=.8+Math.random()*.4;return(0,i.jsx)(`div`,{className:`absolute left-1/2 top-1/2 animate-confetti-burst-onboarding`,style:{width:a,height:a,backgroundColor:o[Math.floor(Math.random()*o.length)],borderRadius:Math.random()>.5?`50%`:`2px`,"--angle":`${n}deg`,"--distance":`${r}px`,animationDuration:`${s}s`,animationDelay:`${Math.random()*.15}s`}},t)}),(0,i.jsx)(`style`,{children:`
+        @keyframes confetti-burst-onboarding {
+          0% {
+            transform: translate(-50%, -50%) rotate(var(--angle)) translateX(0) scale(1);
+            opacity: 1;
+          }
+          100% {
+            transform: translate(-50%, -50%) rotate(var(--angle)) translateX(var(--distance)) scale(0) rotate(360deg);
+            opacity: 0;
+          }
+        }
+        .animate-confetti-burst-onboarding {
+          animation: confetti-burst-onboarding 1s ease-out forwards;
+        }
+      `})]})}function s({step:e,index:n,currentStep:o,color:s,customColor:c,variant:l,orientation:u,clickable:d,onClick:f}){let p=a[s],m=e.completed||n<o,h=n===o,g={mini:`h-2.5 w-2.5`,full:`h-6 w-6`},_={mini:`h-1.5 w-1.5`,full:`h-3.5 w-3.5`},v=()=>s===`custom`&&c?m||h?`text-white border-2`:p.stepPending:m?p.stepCompleted:h?p.stepActive:p.stepPending,y={};return s===`custom`&&c&&(m||h)&&(y.backgroundColor=c,y.borderColor=c),(0,i.jsxs)(`button`,{type:`button`,onClick:d?f:void 0,disabled:!d,className:t.cn(`relative rounded-full flex items-center justify-center border-2 transition-all duration-300`,g[l],v(),d&&`cursor-pointer hover:scale-110`,!d&&`cursor-default`,h&&`ring-2 ring-offset-2 ring-offset-background`,h&&s!==`custom`&&`ring-${s===`default`?`primary`:s}-500/30`,h&&s===`custom`&&`ring-current/30`),style:y,"aria-label":`Step ${n+1}: ${e.label}`,"aria-current":h?`step`:void 0,children:[l===`full`&&(0,i.jsx)(i.Fragment,{children:m?(0,i.jsx)(r.Check,{className:_[l]}):h?e.icon||(0,i.jsx)(r.Circle,{className:t.cn(_[l],`fill-current`)}):(0,i.jsx)(`span`,{className:`text-xs font-medium`,children:n+1})}),h&&(0,i.jsx)(`span`,{className:`absolute inset-0 rounded-full animate-ping opacity-30`,style:s===`custom`&&c?{backgroundColor:c}:{}})]})}function c({steps:e,currentStep:c,variant:l=`full`,orientation:u=`horizontal`,showPercentage:d=!0,showStepMarkers:f=!0,animated:p=!0,color:m=`default`,customColor:h,showConfettiOnComplete:g=!0,dismissible:_=!1,onDismiss:v,onStepClick:y,clickable:b=!1,className:x}){let[S,C]=n.useState(!1),[w,T]=n.useState(!1),E=n.useRef(!1),D=a[m],O=e.length,k=e.filter((e,t)=>e.completed||t<c).length,A=Math.round(k/O*100),j=A===100;n.useEffect(()=>{j&&!E.current&&g&&C(!0),E.current=j},[j,g]);let M=()=>{T(!0),v?.()};if(w)return null;let N=p?{width:`${A}%`,transition:`width 0.5s ease-out`}:{width:`${A}%`},P=p?{height:`${A}%`,transition:`height 0.5s ease-out`}:{height:`${A}%`};return l===`mini`?(0,i.jsxs)(`div`,{className:t.cn(`relative flex items-center gap-2`,u===`vertical`&&`flex-col h-full`,x),children:[S&&(0,i.jsx)(o,{active:S,onComplete:()=>C(!1)}),(0,i.jsx)(`div`,{className:t.cn(`relative overflow-hidden rounded-full bg-muted`,u===`horizontal`?`h-1.5 flex-1`:`w-1.5 flex-1`),children:(0,i.jsx)(`div`,{className:t.cn(`absolute rounded-full bg-gradient-to-r`,u===`horizontal`?`h-full left-0 top-0`:`w-full left-0 bottom-0`,m!==`custom`&&D.gradient),style:{...u===`horizontal`?N:P,...m===`custom`&&h?{backgroundColor:h}:{}}})}),f&&(0,i.jsx)(`div`,{className:t.cn(`flex gap-1`,u===`vertical`&&`flex-col`),children:e.map((e,t)=>(0,i.jsx)(s,{step:e,index:t,currentStep:c,totalSteps:O,color:m,customColor:h,variant:`mini`,orientation:u,clickable:b,onClick:()=>y?.(t)},e.id))}),d&&(0,i.jsxs)(`span`,{className:t.cn(`text-xs font-medium tabular-nums`,m!==`custom`&&D.text),style:m===`custom`&&h?{color:h}:{},children:[A,`%`]}),_&&(0,i.jsx)(`button`,{type:`button`,onClick:M,className:`p-0.5 rounded hover:bg-muted transition-colors text-muted-foreground hover:text-foreground`,"aria-label":`Dismiss onboarding`,children:(0,i.jsx)(r.X,{className:`h-3 w-3`})})]}):(0,i.jsxs)(`div`,{className:t.cn(`relative rounded-lg border bg-card p-4`,u===`vertical`&&`max-w-xs`,x),children:[S&&(0,i.jsx)(o,{active:S,onComplete:()=>C(!1)}),(0,i.jsxs)(`div`,{className:`flex items-center justify-between mb-3`,children:[(0,i.jsx)(`div`,{className:`flex items-center gap-2`,children:d&&(0,i.jsxs)(`span`,{className:t.cn(`text-sm font-semibold tabular-nums`,m!==`custom`&&D.text),style:m===`custom`&&h?{color:h}:{},children:[A,`% complete`]})}),_&&(0,i.jsx)(`button`,{type:`button`,onClick:M,className:`p-1 rounded-md hover:bg-muted transition-colors text-muted-foreground hover:text-foreground`,"aria-label":`Dismiss onboarding`,children:(0,i.jsx)(r.X,{className:`h-4 w-4`})})]}),(0,i.jsxs)(`div`,{className:t.cn(`relative overflow-hidden rounded-full bg-muted mb-4`,u===`horizontal`?`h-2`:`w-2 h-full mx-auto`),children:[(0,i.jsx)(`div`,{className:t.cn(`absolute rounded-full`,u===`horizontal`?`h-full left-0 top-0`:`w-full left-0 bottom-0`,m!==`custom`&&t.cn(`bg-gradient-to-r`,D.gradient)),style:{...u===`horizontal`?N:P,...m===`custom`&&h?{backgroundColor:h}:{}}}),p&&A>0&&(0,i.jsx)(`div`,{className:`absolute inset-0 overflow-hidden rounded-full`,style:{width:`${A}%`},children:(0,i.jsx)(`div`,{className:`absolute inset-0 animate-shine-onboarding`})})]}),(0,i.jsx)(`div`,{className:t.cn(u===`horizontal`?`flex items-start justify-between`:`flex flex-col gap-2`),children:e.map((n,a)=>{let o=n.completed||a<c,l=a===c,d=a===e.length-1;return(0,i.jsxs)(`div`,{className:t.cn(u===`horizontal`?`flex flex-col items-center flex-1`:`flex items-start gap-3`),children:[(0,i.jsxs)(`div`,{className:t.cn(`flex items-center`,u===`horizontal`?`w-full`:`flex-col`),children:[u===`horizontal`&&a>0&&(0,i.jsx)(`div`,{className:t.cn(`flex-1 h-0.5 transition-colors duration-300`,o||l?m===`custom`?``:D.fill:`bg-muted`),style:(o||l)&&m===`custom`&&h?{backgroundColor:h}:{}}),(0,i.jsx)(s,{step:n,index:a,currentStep:c,totalSteps:O,color:m,customColor:h,variant:`full`,orientation:u,clickable:b,onClick:()=>y?.(a)}),u===`horizontal`&&!d&&(0,i.jsx)(`div`,{className:t.cn(`flex-1 h-0.5 transition-colors duration-300`,o?m===`custom`?``:D.fill:`bg-muted`),style:o&&m===`custom`&&h?{backgroundColor:h}:{}}),u===`vertical`&&!d&&(0,i.jsx)(`div`,{className:t.cn(`w-0.5 h-6 my-1 transition-colors duration-300`,o?m===`custom`?``:D.fill:`bg-muted`),style:o&&m===`custom`&&h?{backgroundColor:h}:{}})]}),(0,i.jsx)(`div`,{className:t.cn(u===`horizontal`?`text-center mt-2 max-w-[100px]`:`flex-1 pb-2`),children:(0,i.jsxs)(`button`,{type:`button`,onClick:b?()=>y?.(a):void 0,disabled:!b,className:t.cn(`text-left`,b&&`cursor-pointer hover:opacity-80`,!b&&`cursor-default`),children:[(0,i.jsxs)(`p`,{className:t.cn(`text-sm font-medium transition-colors`,l?`text-foreground`:`text-muted-foreground`,o&&`line-through opacity-60`),children:[n.label,n.optional&&(0,i.jsx)(`span`,{className:`ml-1 text-xs font-normal text-muted-foreground`,children:`(optional)`})]}),n.description&&u===`vertical`&&(0,i.jsx)(`p`,{className:`text-xs text-muted-foreground mt-0.5`,children:n.description})]})}),l&&u===`vertical`&&(0,i.jsx)(r.ChevronRight,{className:t.cn(`h-4 w-4 animate-pulse`,m!==`custom`&&D.text),style:m===`custom`&&h?{color:h}:{}})]},n.id)})}),j&&(0,i.jsx)(`div`,{className:t.cn(`mt-4 p-3 rounded-md text-center text-sm font-medium animate-fade-in-onboarding`,m!==`custom`&&`bg-${m===`default`?`primary`:m}-500/10`,m!==`custom`&&D.text),style:m===`custom`&&h?{backgroundColor:`${h}15`,color:h}:{},children:`Onboarding complete!`}),(0,i.jsx)(`style`,{children:`
+        @keyframes shine-onboarding {
+          0% { transform: translateX(-100%); opacity: 0; }
+          50% { opacity: 0.4; }
+          100% { transform: translateX(100%); opacity: 0; }
+        }
+        .animate-shine-onboarding {
+          background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
+          animation: shine-onboarding 2s ease-in-out infinite;
+        }
+        @keyframes fade-in-onboarding {
+          from { opacity: 0; transform: translateY(-4px); }
+          to { opacity: 1; transform: translateY(0); }
+        }
+        .animate-fade-in-onboarding {
+          animation: fade-in-onboarding 0.3s ease-out;
+        }
+      `})]})}function l({initialSteps:e,initialStep:t=0,onComplete:r,onStepChange:i,persistKey:a}){let o=n.useCallback(()=>{if(a&&typeof window<`u`)try{let e=localStorage.getItem(`waka-onboarding-${a}`);if(e)return JSON.parse(e)}catch{}return null},[a])(),[s,c]=n.useState(o?.steps||e),[l,u]=n.useState(o?.currentStep??t),[d,f]=n.useState(o?.isDismissed??!1),p=s.filter((e,t)=>e.completed||t<l).length,m=Math.round(p/s.length*100),h=m===100;n.useEffect(()=>{a&&typeof window<`u`&&localStorage.setItem(`waka-onboarding-${a}`,JSON.stringify({steps:s,currentStep:l,isDismissed:d}))},[s,l,d,a]);let g=n.useRef(h);n.useEffect(()=>{h&&!g.current&&r?.(),g.current=h},[h,r]);let _=n.useCallback(e=>{e>=0&&e<s.length&&(u(e),i?.(e))},[s.length,i]),v=n.useCallback(()=>{l<s.length-1&&_(l+1)},[l,s.length,_]),y=n.useCallback(()=>{l>0&&_(l-1)},[l,_]),b=n.useCallback(e=>{c(t=>t.map(t=>t.id===e?{...t,completed:!0}:t))},[]);return{currentStep:l,steps:s,isCompleted:h,isDismissed:d,percentage:m,goToStep:_,nextStep:v,prevStep:y,completeStep:b,uncompleteStep:n.useCallback(e=>{c(t=>t.map(t=>t.id===e?{...t,completed:!1}:t))},[]),completeAndNext:n.useCallback(()=>{l<s.length&&(b(s[l].id),v())},[l,s,b,v]),dismiss:n.useCallback(()=>{f(!0)},[]),reset:n.useCallback(()=>{c(e.map(e=>({...e,completed:!1}))),u(0),f(!1),a&&typeof window<`u`&&localStorage.removeItem(`waka-onboarding-${a}`)},[e,a]),setSteps:n.useCallback(e=>{c(e)},[])}}exports.default=c,exports.useProgressOnboarding=l;

package/dist/components/waka-progress-onboarding/index.d.ts

@@ -92,6 +92,6 @@ export interface UseProgressOnboardingReturn extends ProgressOnboardingState {
     /** Update steps */
     setSteps: (steps: OnboardingStep[]) => void;
 }
-export declare function WakaProgressOnboarding({ steps, currentStep, variant, orientation, showPercentage, showStepMarkers, animated, color, customColor, showConfettiOnComplete, dismissible, onDismiss, onStepClick, clickable, className, }: WakaProgressOnboardingProps): import("react/jsx-runtime").JSX.Element;
+export declare function WakaProgressOnboarding({ steps, currentStep, variant, orientation, showPercentage, showStepMarkers, animated, color, customColor, showConfettiOnComplete, dismissible, onDismiss, onStepClick, clickable, className, }: WakaProgressOnboardingProps): import("react/jsx-runtime").JSX.Element | null;
 export declare function useProgressOnboarding({ initialSteps, initialStep, onComplete, onStepChange, persistKey, }: UseProgressOnboardingOptions): UseProgressOnboardingReturn;
 export default WakaProgressOnboarding;