@wakastellar/ui 4.0.0 → 4.0.1

package/dist/components/waka-pricing-table/index.es.js

@@ -0,0 +1,445 @@
+"use client";
+"use client";
+import { cn as e } from "../../utils/cn.es.js";
+import * as t from "react";
+import { Check as n, Sparkles as r, X as i, Zap as a } from "lucide-react";
+import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/components/waka-pricing-table/index.tsx
+function l(e, t = "$") {
+	if (e === null) return "";
+	let n = e / 100;
+	return n === 0 ? "Free" : Number.isInteger(n) ? `${t}${n}` : `${t}${n.toFixed(2)}`;
+}
+function u({ value: t, onChange: n, annualDiscount: r, className: i }) {
+	return /* @__PURE__ */ c("div", {
+		className: e("flex items-center justify-center gap-3", i),
+		children: [
+			/* @__PURE__ */ s("button", {
+				type: "button",
+				onClick: () => n("monthly"),
+				className: e("text-sm font-medium transition-colors duration-200", t === "monthly" ? "text-foreground" : "text-muted-foreground hover:text-foreground"),
+				children: "Monthly"
+			}),
+			/* @__PURE__ */ s("button", {
+				type: "button",
+				onClick: () => n(t === "monthly" ? "annual" : "monthly"),
+				className: "relative h-6 w-11 rounded-full bg-muted transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+				role: "switch",
+				"aria-checked": t === "annual",
+				children: /* @__PURE__ */ s("span", { className: e("absolute top-0.5 left-0.5 h-5 w-5 rounded-full bg-primary shadow-sm transition-transform duration-200 ease-out", t === "annual" && "translate-x-5") })
+			}),
+			/* @__PURE__ */ c("button", {
+				type: "button",
+				onClick: () => n("annual"),
+				className: e("flex items-center gap-1.5 text-sm font-medium transition-colors duration-200", t === "annual" ? "text-foreground" : "text-muted-foreground hover:text-foreground"),
+				children: ["Annual", r && r > 0 && /* @__PURE__ */ c("span", {
+					className: "inline-flex items-center rounded-full bg-primary/10 px-2 py-0.5 text-xs font-semibold text-primary",
+					children: [
+						"Save ",
+						r,
+						"%"
+					]
+				})]
+			})
+		]
+	});
+}
+function d({ tier: t, billingPeriod: n, animating: r }) {
+	let i = n === "monthly" ? t.monthlyPrice : t.annualPrice;
+	if (i === null) return /* @__PURE__ */ c("div", {
+		className: "flex flex-col items-start",
+		children: [/* @__PURE__ */ s("span", {
+			className: "text-3xl font-bold text-foreground",
+			children: t.customPriceLabel || "Custom"
+		}), /* @__PURE__ */ s("span", {
+			className: "text-sm text-muted-foreground",
+			children: "Contact for pricing"
+		})]
+	});
+	let a = l(i, t.currency), o = n === "monthly" ? "/month" : "/year";
+	return /* @__PURE__ */ c("div", {
+		className: "flex items-baseline gap-1",
+		children: [/* @__PURE__ */ s("span", {
+			className: e("text-4xl font-bold text-foreground transition-all duration-300", r && "animate-price-change"),
+			children: a
+		}), i > 0 && /* @__PURE__ */ s("span", {
+			className: "text-sm text-muted-foreground",
+			children: o
+		})]
+	});
+}
+function f({ included: e, value: t }) {
+	return t ? /* @__PURE__ */ s("span", {
+		className: "text-sm font-medium text-foreground",
+		children: t
+	}) : e ? /* @__PURE__ */ s(n, { className: "h-5 w-5 text-primary" }) : /* @__PURE__ */ s(i, { className: "h-5 w-5 text-muted-foreground/50" });
+}
+function p({ tier: t, billingPeriod: n, onCtaClick: i, animatingPrice: a }) {
+	let o = {
+		default: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+		primary: "bg-primary text-primary-foreground hover:bg-primary/90",
+		outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground"
+	}, l = t.ctaVariant || (t.highlighted ? "primary" : "default");
+	return /* @__PURE__ */ c("div", {
+		className: e("relative flex flex-col rounded-xl border bg-card p-6 transition-all duration-300", t.highlighted && ["border-primary shadow-lg shadow-primary/10", "ring-1 ring-primary/20"], t.disabled && "opacity-50 pointer-events-none"),
+		children: [
+			t.highlighted && t.highlightLabel && /* @__PURE__ */ s("div", {
+				className: "absolute -top-3 left-1/2 -translate-x-1/2",
+				children: /* @__PURE__ */ c("span", {
+					className: "inline-flex items-center gap-1 rounded-full bg-primary px-3 py-1 text-xs font-semibold text-primary-foreground shadow-sm",
+					children: [/* @__PURE__ */ s(r, { className: "h-3 w-3" }), t.highlightLabel]
+				})
+			}),
+			/* @__PURE__ */ c("div", {
+				className: "mb-4",
+				children: [/* @__PURE__ */ s("h3", {
+					className: "text-xl font-semibold text-foreground",
+					children: t.name
+				}), t.description && /* @__PURE__ */ s("p", {
+					className: "mt-1 text-sm text-muted-foreground",
+					children: t.description
+				})]
+			}),
+			/* @__PURE__ */ s("div", {
+				className: "mb-6",
+				children: /* @__PURE__ */ s(d, {
+					tier: t,
+					billingPeriod: n,
+					animating: a
+				})
+			}),
+			/* @__PURE__ */ s("button", {
+				type: "button",
+				onClick: () => i?.(t),
+				className: e("mb-6 w-full rounded-lg px-4 py-2.5 text-sm font-semibold transition-colors duration-200", o[l]),
+				children: t.ctaText || "Get Started"
+			}),
+			/* @__PURE__ */ c("div", {
+				className: "flex-1",
+				children: [/* @__PURE__ */ s("p", {
+					className: "mb-3 text-xs font-medium uppercase tracking-wider text-muted-foreground",
+					children: "What's included"
+				}), /* @__PURE__ */ s("ul", {
+					className: "space-y-3",
+					children: t.features.map((t) => /* @__PURE__ */ c("li", {
+						className: "flex items-center gap-3",
+						children: [/* @__PURE__ */ s(f, {
+							included: t.included,
+							value: t.value
+						}), /* @__PURE__ */ s("span", {
+							className: e("text-sm", t.included ? "text-foreground" : "text-muted-foreground line-through"),
+							children: t.name
+						})]
+					}, t.name))
+				})]
+			})
+		]
+	});
+}
+function m({ tiers: t, features: n, billingPeriod: r, onCtaClick: o, animatingPrice: l }) {
+	let u = {
+		default: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+		primary: "bg-primary text-primary-foreground hover:bg-primary/90",
+		outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground"
+	};
+	return /* @__PURE__ */ s("div", {
+		className: "overflow-x-auto",
+		children: /* @__PURE__ */ c("table", {
+			className: "w-full border-collapse",
+			children: [/* @__PURE__ */ c("thead", { children: [
+				/* @__PURE__ */ c("tr", { children: [/* @__PURE__ */ s("th", {
+					className: "sticky left-0 z-10 bg-background p-4 text-left",
+					children: /* @__PURE__ */ s("span", {
+						className: "sr-only",
+						children: "Features"
+					})
+				}), t.map((t) => /* @__PURE__ */ s("th", {
+					className: e("min-w-[200px] p-4 text-center", t.highlighted && "bg-primary/5"),
+					children: /* @__PURE__ */ c("div", {
+						className: "flex flex-col items-center gap-2",
+						children: [
+							t.highlighted && t.highlightLabel && /* @__PURE__ */ c("span", {
+								className: "inline-flex items-center gap-1 rounded-full bg-primary px-2.5 py-0.5 text-xs font-semibold text-primary-foreground",
+								children: [/* @__PURE__ */ s(a, { className: "h-3 w-3" }), t.highlightLabel]
+							}),
+							/* @__PURE__ */ s("span", {
+								className: "text-lg font-semibold text-foreground",
+								children: t.name
+							}),
+							t.description && /* @__PURE__ */ s("span", {
+								className: "text-xs text-muted-foreground",
+								children: t.description
+							})
+						]
+					})
+				}, t.id))] }),
+				/* @__PURE__ */ c("tr", {
+					className: "border-b",
+					children: [/* @__PURE__ */ s("td", {
+						className: "sticky left-0 z-10 bg-background p-4",
+						children: /* @__PURE__ */ s("span", {
+							className: "text-sm font-medium text-muted-foreground",
+							children: "Price"
+						})
+					}), t.map((t) => /* @__PURE__ */ s("td", {
+						className: e("p-4 text-center", t.highlighted && "bg-primary/5"),
+						children: /* @__PURE__ */ s(d, {
+							tier: t,
+							billingPeriod: r,
+							animating: l
+						})
+					}, t.id))]
+				}),
+				/* @__PURE__ */ c("tr", {
+					className: "border-b",
+					children: [/* @__PURE__ */ s("td", { className: "sticky left-0 z-10 bg-background p-4" }), t.map((t) => {
+						let n = t.ctaVariant || (t.highlighted ? "primary" : "default");
+						return /* @__PURE__ */ s("td", {
+							className: e("p-4 text-center", t.highlighted && "bg-primary/5"),
+							children: /* @__PURE__ */ s("button", {
+								type: "button",
+								onClick: () => o?.(t),
+								disabled: t.disabled,
+								className: e("w-full max-w-[160px] rounded-lg px-4 py-2 text-sm font-semibold transition-colors duration-200", u[n], t.disabled && "opacity-50 cursor-not-allowed"),
+								children: t.ctaText || "Get Started"
+							})
+						}, t.id);
+					})]
+				})
+			] }), /* @__PURE__ */ s("tbody", { children: n.map((n, r) => /* @__PURE__ */ c("tr", {
+				className: e("border-b transition-colors hover:bg-muted/50", r % 2 == 0 && "bg-muted/20"),
+				children: [/* @__PURE__ */ c("td", {
+					className: "sticky left-0 z-10 bg-inherit p-4",
+					children: [/* @__PURE__ */ s("span", {
+						className: "text-sm font-medium text-foreground",
+						children: n.name
+					}), n.tooltip && /* @__PURE__ */ s("p", {
+						className: "mt-0.5 text-xs text-muted-foreground",
+						children: n.tooltip
+					})]
+				}), t.map((t) => {
+					let r = t.features.find((e) => e.name === n.name);
+					return /* @__PURE__ */ s("td", {
+						className: e("p-4 text-center", t.highlighted && "bg-primary/5"),
+						children: r ? /* @__PURE__ */ s("div", {
+							className: "flex justify-center",
+							children: /* @__PURE__ */ s(f, {
+								included: r.included,
+								value: r.value
+							})
+						}) : /* @__PURE__ */ s(i, { className: "mx-auto h-5 w-5 text-muted-foreground/50" })
+					}, t.id);
+				})]
+			}, n.name)) })]
+		})
+	});
+}
+function h({ tiers: n, features: r, billingPeriod: i, onBillingPeriodChange: a, onCtaClick: l, annualDiscount: d = 20, showBillingToggle: f = !0, variant: h = "auto", className: g }) {
+	let [_, v] = t.useState("monthly"), [y, b] = t.useState(!1), x = i ?? _, S = (e) => {
+		b(!0), setTimeout(() => b(!1), 300), a ? a(e) : v(e);
+	}, C = h === "table" || h === "auto" && r && r.length > 0, w = t.useMemo(() => {
+		if (r) return r;
+		let e = /* @__PURE__ */ new Set();
+		return n.forEach((t) => {
+			t.features.forEach((t) => e.add(t.name));
+		}), Array.from(e).map((e) => ({ name: e }));
+	}, [r, n]);
+	return /* @__PURE__ */ c("div", {
+		className: e("w-full", g),
+		children: [
+			/* @__PURE__ */ s("style", { children: "\n        @keyframes priceChange {\n          0% {\n            opacity: 0;\n            transform: translateY(-10px);\n          }\n          100% {\n            opacity: 1;\n            transform: translateY(0);\n          }\n        }\n        .animate-price-change {\n          animation: priceChange 0.3s ease-out;\n        }\n      " }),
+			f && /* @__PURE__ */ s(u, {
+				value: x,
+				onChange: S,
+				annualDiscount: d,
+				className: "mb-8"
+			}),
+			C ? /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ s("div", {
+				className: "hidden lg:block rounded-xl border bg-card overflow-hidden",
+				children: /* @__PURE__ */ s(m, {
+					tiers: n,
+					features: w,
+					billingPeriod: x,
+					onCtaClick: l,
+					animatingPrice: y
+				})
+			}), /* @__PURE__ */ s("div", {
+				className: "grid grid-cols-1 gap-6 lg:hidden md:grid-cols-2",
+				children: n.map((e) => /* @__PURE__ */ s(p, {
+					tier: e,
+					billingPeriod: x,
+					onCtaClick: l,
+					animatingPrice: y
+				}, e.id))
+			})] }) : /* @__PURE__ */ s("div", {
+				className: e("grid gap-6", n.length === 1 && "grid-cols-1 max-w-md mx-auto", n.length === 2 && "grid-cols-1 md:grid-cols-2 max-w-3xl mx-auto", n.length === 3 && "grid-cols-1 md:grid-cols-2 lg:grid-cols-3", n.length >= 4 && "grid-cols-1 md:grid-cols-2 lg:grid-cols-4"),
+				children: n.map((e) => /* @__PURE__ */ s(p, {
+					tier: e,
+					billingPeriod: x,
+					onCtaClick: l,
+					animatingPrice: y
+				}, e.id))
+			})
+		]
+	});
+}
+function g(e = {}) {
+	let { initialBillingPeriod: n = "monthly" } = e, [r, i] = t.useState(n), [a, o] = t.useState(null);
+	return {
+		billingPeriod: r,
+		selectedTier: a,
+		onBillingPeriodChange: t.useCallback((e) => {
+			i(e);
+		}, []),
+		onCtaClick: t.useCallback((e) => {
+			o(e);
+		}, []),
+		calculateSavings: t.useCallback((e) => e.monthlyPrice === null || e.annualPrice === null ? 0 : e.monthlyPrice * 12 - e.annualPrice, []),
+		getEffectiveMonthlyPrice: t.useCallback((e) => r === "monthly" ? e.monthlyPrice : e.annualPrice === null ? null : Math.round(e.annualPrice / 12), [r])
+	};
+}
+var _ = [
+	{
+		id: "free",
+		name: "Free",
+		description: "For individuals getting started",
+		monthlyPrice: 0,
+		annualPrice: 0,
+		ctaText: "Start Free",
+		ctaVariant: "outline",
+		features: [
+			{
+				name: "Up to 3 projects",
+				included: !0
+			},
+			{
+				name: "Basic analytics",
+				included: !0
+			},
+			{
+				name: "Community support",
+				included: !0
+			},
+			{
+				name: "API access",
+				included: !1
+			},
+			{
+				name: "Custom domains",
+				included: !1
+			},
+			{
+				name: "Team collaboration",
+				included: !1
+			}
+		]
+	},
+	{
+		id: "pro",
+		name: "Pro",
+		description: "For professionals and small teams",
+		monthlyPrice: 2900,
+		annualPrice: 29e3,
+		highlighted: !0,
+		highlightLabel: "Most Popular",
+		ctaText: "Start Pro Trial",
+		ctaVariant: "primary",
+		features: [
+			{
+				name: "Up to 3 projects",
+				included: !0,
+				value: "Unlimited"
+			},
+			{
+				name: "Basic analytics",
+				included: !0,
+				value: "Advanced"
+			},
+			{
+				name: "Community support",
+				included: !0,
+				value: "Priority"
+			},
+			{
+				name: "API access",
+				included: !0
+			},
+			{
+				name: "Custom domains",
+				included: !0
+			},
+			{
+				name: "Team collaboration",
+				included: !0,
+				value: "5 members"
+			}
+		]
+	},
+	{
+		id: "enterprise",
+		name: "Enterprise",
+		description: "For large organizations",
+		monthlyPrice: null,
+		annualPrice: null,
+		customPriceLabel: "Custom",
+		ctaText: "Contact Sales",
+		ctaVariant: "default",
+		features: [
+			{
+				name: "Up to 3 projects",
+				included: !0,
+				value: "Unlimited"
+			},
+			{
+				name: "Basic analytics",
+				included: !0,
+				value: "Custom"
+			},
+			{
+				name: "Community support",
+				included: !0,
+				value: "Dedicated"
+			},
+			{
+				name: "API access",
+				included: !0
+			},
+			{
+				name: "Custom domains",
+				included: !0
+			},
+			{
+				name: "Team collaboration",
+				included: !0,
+				value: "Unlimited"
+			}
+		]
+	}
+], v = [
+	{
+		name: "Up to 3 projects",
+		tooltip: "Number of active projects"
+	},
+	{
+		name: "Basic analytics",
+		tooltip: "Usage and performance metrics"
+	},
+	{
+		name: "Community support",
+		tooltip: "Access to community forums"
+	},
+	{
+		name: "API access",
+		tooltip: "Programmatic access to your data"
+	},
+	{
+		name: "Custom domains",
+		tooltip: "Use your own domain name"
+	},
+	{
+		name: "Team collaboration",
+		tooltip: "Invite team members"
+	}
+];
+//#endregion
+export { h as default, v as defaultFeatures, _ as defaultTiers, g as usePricingTable };

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

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