@wakastellar/ui 4.0.0-dev.0 → 4.0.1

package/dist/blocks/checkout-flow/index.es.js

@@ -0,0 +1,640 @@
+"use client";
+"use client";
+import { cn as e } from "../../utils/cn.es.js";
+import { Badge as t } from "../../components/badge/index.es.js";
+import { Button as n } from "../../components/button/index.es.js";
+import { Card as r, CardContent as i, CardDescription as a, CardFooter as o, CardHeader as s, CardTitle as c } from "../../components/card/index.es.js";
+import { Checkbox as l } from "../../components/checkbox/index.es.js";
+import { Label as u } from "../../components/label/index.es.js";
+import { Input as d } from "../../components/input/index.es.js";
+import { RadioGroup as f, RadioGroupItem as p } from "../../components/radio-group/index.es.js";
+import { Separator as m } from "../../components/separator/index.es.js";
+import * as h from "react";
+import { Check as g, ChevronLeft as _, ChevronRight as v, CreditCard as y, Loader2 as b, Lock as x, MapPin as S, Package as C, Percent as w, Shield as ee, ShoppingBag as T, Truck as E, X as D } from "lucide-react";
+import { Fragment as O, jsx as k, jsxs as A } from "react/jsx-runtime";
+//#region src/blocks/checkout-flow/index.tsx
+function j({ steps: t, currentStep: n }) {
+	let r = t.findIndex((e) => e.id === n);
+	return /* @__PURE__ */ k("div", {
+		className: "flex items-center justify-center mb-8",
+		children: t.map((n, i) => /* @__PURE__ */ A(h.Fragment, { children: [/* @__PURE__ */ A("div", {
+			className: "flex items-center",
+			children: [/* @__PURE__ */ k("div", {
+				className: e("h-8 w-8 rounded-full flex items-center justify-center text-sm font-medium", i < r ? "bg-primary text-primary-foreground" : i === r ? "bg-primary text-primary-foreground ring-4 ring-primary/20" : "bg-muted text-muted-foreground"),
+				children: i < r ? /* @__PURE__ */ k(g, { className: "h-4 w-4" }) : i + 1
+			}), /* @__PURE__ */ k("span", {
+				className: e("ml-2 text-sm font-medium hidden sm:inline", i <= r ? "text-foreground" : "text-muted-foreground"),
+				children: n.label
+			})]
+		}), i < t.length - 1 && /* @__PURE__ */ k("div", { className: e("w-8 sm:w-16 h-0.5 mx-2", i < r ? "bg-primary" : "bg-muted") })] }, n.id))
+	});
+}
+function M({ items: e, currency: t = "$", discount: a, couponCode: o, setCouponCode: l, onApplyCoupon: u, onRemoveDiscount: f, isApplyingCoupon: p, shippingPrice: h = 0, taxRate: g = 0 }) {
+	let _ = e.reduce((e, t) => e + t.price * t.quantity, 0), v = a ? a.type === "percent" ? _ * a.amount / 100 : a.amount : 0, y = _ - v, x = y * g / 100, S = y + x + h;
+	return /* @__PURE__ */ A(r, { children: [/* @__PURE__ */ k(s, { children: /* @__PURE__ */ A(c, {
+		className: "flex items-center gap-2",
+		children: [/* @__PURE__ */ k(T, { className: "h-5 w-5" }), "Order Summary"]
+	}) }), /* @__PURE__ */ A(i, {
+		className: "space-y-4",
+		children: [
+			/* @__PURE__ */ k("div", {
+				className: "space-y-3",
+				children: e.map((e) => /* @__PURE__ */ A("div", {
+					className: "flex gap-3",
+					children: [
+						e.image && /* @__PURE__ */ k("div", {
+							className: "h-16 w-16 rounded-lg bg-muted overflow-hidden flex-shrink-0",
+							children: /* @__PURE__ */ k("img", {
+								src: e.image,
+								alt: e.name,
+								className: "h-full w-full object-cover"
+							})
+						}),
+						/* @__PURE__ */ A("div", {
+							className: "flex-1 min-w-0",
+							children: [
+								/* @__PURE__ */ k("p", {
+									className: "font-medium truncate",
+									children: e.name
+								}),
+								e.variant && /* @__PURE__ */ k("p", {
+									className: "text-sm text-muted-foreground",
+									children: e.variant
+								}),
+								/* @__PURE__ */ A("p", {
+									className: "text-sm",
+									children: ["Qty: ", e.quantity]
+								})
+							]
+						}),
+						/* @__PURE__ */ A("p", {
+							className: "font-medium",
+							children: [t, (e.price * e.quantity).toFixed(2)]
+						})
+					]
+				}, e.id))
+			}),
+			/* @__PURE__ */ k(m, {}),
+			a ? /* @__PURE__ */ A("div", {
+				className: "flex items-center justify-between p-2 rounded-lg bg-green-500/10 text-green-600",
+				children: [/* @__PURE__ */ A("div", {
+					className: "flex items-center gap-2",
+					children: [
+						/* @__PURE__ */ k(w, { className: "h-4 w-4" }),
+						/* @__PURE__ */ k("span", {
+							className: "font-medium",
+							children: a.code
+						}),
+						/* @__PURE__ */ A("span", {
+							className: "text-sm",
+							children: [
+								"(-",
+								a.type === "percent" ? `${a.amount}%` : `${t}${a.amount}`,
+								")"
+							]
+						})
+					]
+				}), /* @__PURE__ */ k(n, {
+					variant: "ghost",
+					size: "sm",
+					onClick: f,
+					children: /* @__PURE__ */ k(D, { className: "h-4 w-4" })
+				})]
+			}) : /* @__PURE__ */ A("div", {
+				className: "flex gap-2",
+				children: [/* @__PURE__ */ k(d, {
+					placeholder: "Coupon code",
+					value: o,
+					onChange: (e) => l(e.target.value),
+					className: "flex-1"
+				}), /* @__PURE__ */ k(n, {
+					variant: "outline",
+					onClick: u,
+					disabled: !o || p,
+					children: p ? /* @__PURE__ */ k(b, { className: "h-4 w-4 animate-spin" }) : "Apply"
+				})]
+			}),
+			/* @__PURE__ */ k(m, {}),
+			/* @__PURE__ */ A("div", {
+				className: "space-y-2 text-sm",
+				children: [
+					/* @__PURE__ */ A("div", {
+						className: "flex justify-between",
+						children: [/* @__PURE__ */ k("span", {
+							className: "text-muted-foreground",
+							children: "Subtotal"
+						}), /* @__PURE__ */ A("span", { children: [t, _.toFixed(2)] })]
+					}),
+					v > 0 && /* @__PURE__ */ A("div", {
+						className: "flex justify-between text-green-600",
+						children: [/* @__PURE__ */ k("span", { children: "Discount" }), /* @__PURE__ */ A("span", { children: [
+							"-",
+							t,
+							v.toFixed(2)
+						] })]
+					}),
+					h > 0 && /* @__PURE__ */ A("div", {
+						className: "flex justify-between",
+						children: [/* @__PURE__ */ k("span", {
+							className: "text-muted-foreground",
+							children: "Shipping"
+						}), /* @__PURE__ */ A("span", { children: [t, h.toFixed(2)] })]
+					}),
+					x > 0 && /* @__PURE__ */ A("div", {
+						className: "flex justify-between",
+						children: [/* @__PURE__ */ A("span", {
+							className: "text-muted-foreground",
+							children: [
+								"Tax (",
+								g,
+								"%)"
+							]
+						}), /* @__PURE__ */ A("span", { children: [t, x.toFixed(2)] })]
+					}),
+					/* @__PURE__ */ k(m, {}),
+					/* @__PURE__ */ A("div", {
+						className: "flex justify-between text-lg font-bold",
+						children: [/* @__PURE__ */ k("span", { children: "Total" }), /* @__PURE__ */ A("span", { children: [t, S.toFixed(2)] })]
+					})
+				]
+			})
+		]
+	})] });
+}
+function N({ items: g, shippingMethods: C = P, paymentMethods: w = F, onApplyCoupon: T, discount: D, onRemoveDiscount: N, onSubmitOrder: I, currency: L = "$", taxRate: R = 8.5, className: te }) {
+	let [z, B] = h.useState("cart"), [V, ne] = h.useState(""), [re, H] = h.useState(!1), [U, W] = h.useState(!1), [G, K] = h.useState({
+		firstName: "",
+		lastName: "",
+		email: "",
+		phone: "",
+		address: "",
+		apartment: "",
+		city: "",
+		state: "",
+		postalCode: "",
+		country: "US"
+	}), [q, ie] = h.useState(C[0]?.id || ""), [J, ae] = h.useState(w[0]?.id || ""), [Y, oe] = h.useState(!1), X = [
+		{
+			id: "cart",
+			label: "Cart"
+		},
+		{
+			id: "shipping",
+			label: "Shipping"
+		},
+		{
+			id: "payment",
+			label: "Payment"
+		},
+		{
+			id: "review",
+			label: "Review"
+		}
+	], Z = C.find((e) => e.id === q), se = async () => {
+		!T || !V || (H(!0), await T(V), H(!1));
+	}, ce = async () => {
+		if (I) {
+			W(!0);
+			try {
+				await I({
+					address: G,
+					shippingMethod: q,
+					paymentMethod: J,
+					saveInfo: Y
+				});
+			} finally {
+				W(!1);
+			}
+		}
+	}, Q = () => {
+		let e = X.findIndex((e) => e.id === z);
+		e < X.length - 1 && B(X[e + 1].id);
+	}, $ = () => {
+		let e = X.findIndex((e) => e.id === z);
+		e > 0 && B(X[e - 1].id);
+	};
+	return /* @__PURE__ */ A("div", {
+		className: e("max-w-6xl mx-auto", te),
+		children: [/* @__PURE__ */ k(j, {
+			steps: X,
+			currentStep: z
+		}), /* @__PURE__ */ A("div", {
+			className: "grid gap-8 lg:grid-cols-3",
+			children: [/* @__PURE__ */ A("div", {
+				className: "lg:col-span-2 space-y-6",
+				children: [
+					z === "cart" && /* @__PURE__ */ A(r, { children: [
+						/* @__PURE__ */ A(s, { children: [/* @__PURE__ */ k(c, { children: "Shopping Cart" }), /* @__PURE__ */ A(a, { children: [g.length, " items in your cart"] })] }),
+						/* @__PURE__ */ k(i, {
+							className: "space-y-4",
+							children: g.map((e) => /* @__PURE__ */ A("div", {
+								className: "flex gap-4 p-4 rounded-lg border",
+								children: [e.image && /* @__PURE__ */ k("div", {
+									className: "h-24 w-24 rounded-lg bg-muted overflow-hidden flex-shrink-0",
+									children: /* @__PURE__ */ k("img", {
+										src: e.image,
+										alt: e.name,
+										className: "h-full w-full object-cover"
+									})
+								}), /* @__PURE__ */ A("div", {
+									className: "flex-1",
+									children: [
+										/* @__PURE__ */ k("h3", {
+											className: "font-medium",
+											children: e.name
+										}),
+										e.description && /* @__PURE__ */ k("p", {
+											className: "text-sm text-muted-foreground",
+											children: e.description
+										}),
+										e.variant && /* @__PURE__ */ k(t, {
+											variant: "secondary",
+											className: "mt-1",
+											children: e.variant
+										}),
+										/* @__PURE__ */ A("div", {
+											className: "mt-2 flex items-center justify-between",
+											children: [/* @__PURE__ */ A("span", {
+												className: "text-sm",
+												children: ["Qty: ", e.quantity]
+											}), /* @__PURE__ */ A("span", {
+												className: "font-bold",
+												children: [L, (e.price * e.quantity).toFixed(2)]
+											})]
+										})
+									]
+								})]
+							}, e.id))
+						}),
+						/* @__PURE__ */ k(o, { children: /* @__PURE__ */ A(n, {
+							className: "w-full",
+							onClick: Q,
+							children: ["Continue to Shipping", /* @__PURE__ */ k(v, { className: "h-4 w-4 ml-2" })]
+						}) })
+					] }),
+					z === "shipping" && /* @__PURE__ */ A(r, { children: [
+						/* @__PURE__ */ k(s, { children: /* @__PURE__ */ A(c, {
+							className: "flex items-center gap-2",
+							children: [/* @__PURE__ */ k(S, { className: "h-5 w-5" }), "Shipping Address"]
+						}) }),
+						/* @__PURE__ */ A(i, {
+							className: "space-y-4",
+							children: [
+								/* @__PURE__ */ A("div", {
+									className: "grid gap-4 sm:grid-cols-2",
+									children: [/* @__PURE__ */ A("div", {
+										className: "space-y-2",
+										children: [/* @__PURE__ */ k(u, { children: "First Name" }), /* @__PURE__ */ k(d, {
+											value: G.firstName,
+											onChange: (e) => K({
+												...G,
+												firstName: e.target.value
+											})
+										})]
+									}), /* @__PURE__ */ A("div", {
+										className: "space-y-2",
+										children: [/* @__PURE__ */ k(u, { children: "Last Name" }), /* @__PURE__ */ k(d, {
+											value: G.lastName,
+											onChange: (e) => K({
+												...G,
+												lastName: e.target.value
+											})
+										})]
+									})]
+								}),
+								/* @__PURE__ */ A("div", {
+									className: "grid gap-4 sm:grid-cols-2",
+									children: [/* @__PURE__ */ A("div", {
+										className: "space-y-2",
+										children: [/* @__PURE__ */ k(u, { children: "Email" }), /* @__PURE__ */ k(d, {
+											type: "email",
+											value: G.email,
+											onChange: (e) => K({
+												...G,
+												email: e.target.value
+											})
+										})]
+									}), /* @__PURE__ */ A("div", {
+										className: "space-y-2",
+										children: [/* @__PURE__ */ k(u, { children: "Phone" }), /* @__PURE__ */ k(d, {
+											type: "tel",
+											value: G.phone,
+											onChange: (e) => K({
+												...G,
+												phone: e.target.value
+											})
+										})]
+									})]
+								}),
+								/* @__PURE__ */ A("div", {
+									className: "space-y-2",
+									children: [/* @__PURE__ */ k(u, { children: "Address" }), /* @__PURE__ */ k(d, {
+										value: G.address,
+										onChange: (e) => K({
+											...G,
+											address: e.target.value
+										})
+									})]
+								}),
+								/* @__PURE__ */ A("div", {
+									className: "space-y-2",
+									children: [/* @__PURE__ */ k(u, { children: "Apartment, suite, etc. (optional)" }), /* @__PURE__ */ k(d, {
+										value: G.apartment,
+										onChange: (e) => K({
+											...G,
+											apartment: e.target.value
+										})
+									})]
+								}),
+								/* @__PURE__ */ A("div", {
+									className: "grid gap-4 sm:grid-cols-3",
+									children: [
+										/* @__PURE__ */ A("div", {
+											className: "space-y-2",
+											children: [/* @__PURE__ */ k(u, { children: "City" }), /* @__PURE__ */ k(d, {
+												value: G.city,
+												onChange: (e) => K({
+													...G,
+													city: e.target.value
+												})
+											})]
+										}),
+										/* @__PURE__ */ A("div", {
+											className: "space-y-2",
+											children: [/* @__PURE__ */ k(u, { children: "State" }), /* @__PURE__ */ k(d, {
+												value: G.state,
+												onChange: (e) => K({
+													...G,
+													state: e.target.value
+												})
+											})]
+										}),
+										/* @__PURE__ */ A("div", {
+											className: "space-y-2",
+											children: [/* @__PURE__ */ k(u, { children: "Postal Code" }), /* @__PURE__ */ k(d, {
+												value: G.postalCode,
+												onChange: (e) => K({
+													...G,
+													postalCode: e.target.value
+												})
+											})]
+										})
+									]
+								}),
+								/* @__PURE__ */ k(m, { className: "my-6" }),
+								/* @__PURE__ */ A("div", { children: [/* @__PURE__ */ A("h3", {
+									className: "font-medium mb-4 flex items-center gap-2",
+									children: [/* @__PURE__ */ k(E, { className: "h-5 w-5" }), "Shipping Method"]
+								}), /* @__PURE__ */ k(f, {
+									value: q,
+									onValueChange: ie,
+									children: /* @__PURE__ */ k("div", {
+										className: "space-y-3",
+										children: C.map((t) => /* @__PURE__ */ A(u, {
+											className: e("flex items-center gap-4 p-4 rounded-lg border cursor-pointer transition-colors", q === t.id ? "border-primary bg-primary/5" : "hover:bg-muted/50"),
+											children: [
+												/* @__PURE__ */ k(p, { value: t.id }),
+												/* @__PURE__ */ A("div", {
+													className: "flex-1",
+													children: [/* @__PURE__ */ k("p", {
+														className: "font-medium",
+														children: t.name
+													}), /* @__PURE__ */ k("p", {
+														className: "text-sm text-muted-foreground",
+														children: t.description
+													})]
+												}),
+												/* @__PURE__ */ A("div", {
+													className: "text-right",
+													children: [/* @__PURE__ */ k("p", {
+														className: "font-medium",
+														children: t.price === 0 ? "Free" : `${L}${t.price.toFixed(2)}`
+													}), /* @__PURE__ */ k("p", {
+														className: "text-sm text-muted-foreground",
+														children: t.estimatedDays
+													})]
+												})
+											]
+										}, t.id))
+									})
+								})] })
+							]
+						}),
+						/* @__PURE__ */ A(o, {
+							className: "flex gap-4",
+							children: [/* @__PURE__ */ A(n, {
+								variant: "outline",
+								onClick: $,
+								children: [/* @__PURE__ */ k(_, { className: "h-4 w-4 mr-2" }), "Back"]
+							}), /* @__PURE__ */ A(n, {
+								className: "flex-1",
+								onClick: Q,
+								children: ["Continue to Payment", /* @__PURE__ */ k(v, { className: "h-4 w-4 ml-2" })]
+							})]
+						})
+					] }),
+					z === "payment" && /* @__PURE__ */ A(r, { children: [
+						/* @__PURE__ */ k(s, { children: /* @__PURE__ */ A(c, {
+							className: "flex items-center gap-2",
+							children: [/* @__PURE__ */ k(y, { className: "h-5 w-5" }), "Payment Method"]
+						}) }),
+						/* @__PURE__ */ A(i, { children: [
+							/* @__PURE__ */ k(f, {
+								value: J,
+								onValueChange: ae,
+								children: /* @__PURE__ */ k("div", {
+									className: "space-y-3",
+									children: w.map((t) => /* @__PURE__ */ A(u, {
+										className: e("flex items-center gap-4 p-4 rounded-lg border cursor-pointer transition-colors", J === t.id ? "border-primary bg-primary/5" : "hover:bg-muted/50"),
+										children: [
+											/* @__PURE__ */ k(p, { value: t.id }),
+											t.icon,
+											/* @__PURE__ */ k("span", {
+												className: "font-medium",
+												children: t.label
+											}),
+											t.last4 && /* @__PURE__ */ A("span", {
+												className: "text-muted-foreground",
+												children: ["•••• ", t.last4]
+											})
+										]
+									}, t.id))
+								})
+							}),
+							/* @__PURE__ */ A("div", {
+								className: "mt-6 flex items-center gap-2",
+								children: [/* @__PURE__ */ k(l, {
+									id: "save-info",
+									checked: Y,
+									onCheckedChange: (e) => oe(e)
+								}), /* @__PURE__ */ k(u, {
+									htmlFor: "save-info",
+									className: "text-sm",
+									children: "Save my information for faster checkout"
+								})]
+							}),
+							/* @__PURE__ */ A("div", {
+								className: "mt-6 p-4 rounded-lg bg-muted/50 flex items-center gap-3",
+								children: [/* @__PURE__ */ k(ee, { className: "h-5 w-5 text-green-500" }), /* @__PURE__ */ k("p", {
+									className: "text-sm text-muted-foreground",
+									children: "Your payment information is encrypted and secure"
+								})]
+							})
+						] }),
+						/* @__PURE__ */ A(o, {
+							className: "flex gap-4",
+							children: [/* @__PURE__ */ A(n, {
+								variant: "outline",
+								onClick: $,
+								children: [/* @__PURE__ */ k(_, { className: "h-4 w-4 mr-2" }), "Back"]
+							}), /* @__PURE__ */ A(n, {
+								className: "flex-1",
+								onClick: Q,
+								children: ["Review Order", /* @__PURE__ */ k(v, { className: "h-4 w-4 ml-2" })]
+							})]
+						})
+					] }),
+					z === "review" && /* @__PURE__ */ A(r, { children: [
+						/* @__PURE__ */ A(s, { children: [/* @__PURE__ */ k(c, { children: "Review Your Order" }), /* @__PURE__ */ k(a, { children: "Please verify all information before placing your order" })] }),
+						/* @__PURE__ */ A(i, {
+							className: "space-y-6",
+							children: [
+								/* @__PURE__ */ A("div", { children: [/* @__PURE__ */ A("h3", {
+									className: "font-medium mb-2 flex items-center gap-2",
+									children: [/* @__PURE__ */ k(S, { className: "h-4 w-4" }), "Shipping Address"]
+								}), /* @__PURE__ */ A("div", {
+									className: "p-4 rounded-lg bg-muted/50 text-sm",
+									children: [
+										/* @__PURE__ */ A("p", {
+											className: "font-medium",
+											children: [
+												G.firstName,
+												" ",
+												G.lastName
+											]
+										}),
+										/* @__PURE__ */ A("p", { children: [G.address, G.apartment && `, ${G.apartment}`] }),
+										/* @__PURE__ */ A("p", { children: [
+											G.city,
+											", ",
+											G.state,
+											" ",
+											G.postalCode
+										] }),
+										/* @__PURE__ */ k("p", { children: G.email }),
+										/* @__PURE__ */ k("p", { children: G.phone })
+									]
+								})] }),
+								/* @__PURE__ */ A("div", { children: [/* @__PURE__ */ A("h3", {
+									className: "font-medium mb-2 flex items-center gap-2",
+									children: [/* @__PURE__ */ k(E, { className: "h-4 w-4" }), "Shipping Method"]
+								}), /* @__PURE__ */ A("div", {
+									className: "p-4 rounded-lg bg-muted/50 text-sm",
+									children: [/* @__PURE__ */ k("p", {
+										className: "font-medium",
+										children: Z?.name
+									}), /* @__PURE__ */ k("p", {
+										className: "text-muted-foreground",
+										children: Z?.estimatedDays
+									})]
+								})] }),
+								/* @__PURE__ */ A("div", { children: [/* @__PURE__ */ A("h3", {
+									className: "font-medium mb-2 flex items-center gap-2",
+									children: [/* @__PURE__ */ k(y, { className: "h-4 w-4" }), "Payment Method"]
+								}), /* @__PURE__ */ k("div", {
+									className: "p-4 rounded-lg bg-muted/50 text-sm",
+									children: /* @__PURE__ */ k("p", {
+										className: "font-medium",
+										children: w.find((e) => e.id === J)?.label
+									})
+								})] })
+							]
+						}),
+						/* @__PURE__ */ A(o, {
+							className: "flex gap-4",
+							children: [/* @__PURE__ */ A(n, {
+								variant: "outline",
+								onClick: $,
+								children: [/* @__PURE__ */ k(_, { className: "h-4 w-4 mr-2" }), "Back"]
+							}), /* @__PURE__ */ k(n, {
+								className: "flex-1",
+								onClick: ce,
+								disabled: U,
+								children: U ? /* @__PURE__ */ A(O, { children: [/* @__PURE__ */ k(b, { className: "h-4 w-4 mr-2 animate-spin" }), "Processing..."] }) : /* @__PURE__ */ A(O, { children: [/* @__PURE__ */ k(x, { className: "h-4 w-4 mr-2" }), "Place Order"] })
+							})]
+						})
+					] })
+				]
+			}), /* @__PURE__ */ k("div", {
+				className: "lg:sticky lg:top-4 h-fit",
+				children: /* @__PURE__ */ k(M, {
+					items: g,
+					currency: L,
+					discount: D,
+					couponCode: V,
+					setCouponCode: ne,
+					onApplyCoupon: se,
+					onRemoveDiscount: N,
+					isApplyingCoupon: re,
+					shippingPrice: Z?.price || 0,
+					taxRate: R
+				})
+			})]
+		})]
+	});
+}
+var P = [
+	{
+		id: "standard",
+		name: "Standard Shipping",
+		description: "Delivered by postal service",
+		price: 4.99,
+		estimatedDays: "5-7 business days",
+		icon: /* @__PURE__ */ k(C, { className: "h-5 w-5" })
+	},
+	{
+		id: "express",
+		name: "Express Shipping",
+		description: "Fast delivery guaranteed",
+		price: 14.99,
+		estimatedDays: "2-3 business days",
+		icon: /* @__PURE__ */ k(E, { className: "h-5 w-5" })
+	},
+	{
+		id: "overnight",
+		name: "Overnight Shipping",
+		description: "Next day delivery",
+		price: 29.99,
+		estimatedDays: "Next business day",
+		icon: /* @__PURE__ */ k(E, { className: "h-5 w-5" })
+	}
+], F = [{
+	id: "card",
+	type: "card",
+	label: "Credit Card",
+	icon: /* @__PURE__ */ k(y, { className: "h-5 w-5" })
+}, {
+	id: "paypal",
+	type: "paypal",
+	label: "PayPal",
+	icon: /* @__PURE__ */ k("div", {
+		className: "h-5 w-5 rounded bg-blue-500 flex items-center justify-center text-white text-xs font-bold",
+		children: "P"
+	})
+}], I = [{
+	id: "1",
+	name: "Premium Wireless Headphones",
+	description: "High-quality audio with noise cancellation",
+	price: 249.99,
+	quantity: 1,
+	variant: "Matte Black"
+}, {
+	id: "2",
+	name: "USB-C Charging Cable",
+	description: "Fast charging compatible",
+	price: 19.99,
+	quantity: 2,
+	variant: "2m"
+}];
+//#endregion
+export { N as default, I as defaultCartItems, F as defaultPaymentMethods, P as defaultShippingMethods };

package/dist/blocks/cicd-builder/index.cjs.js

@@ -0,0 +1 @@
+"use client";"use client";const e=require(`../../_virtual/_rolldown/runtime.cjs.js`),t=require(`../../utils/cn.cjs.js`),n=require(`../../components/badge/index.cjs.js`),r=require(`../../components/button/index.cjs.js`),i=require(`../../components/card/index.cjs.js`),a=require(`../../components/dropdown-menu/index.cjs.js`),o=require(`../../components/input/index.cjs.js`),s=require(`../../components/select/index.cjs.js`),c=require(`../../components/scroll-area/index.cjs.js`);let l=require(`react`);l=e.__toESM(l);let u=require(`lucide-react`),d=require(`react/jsx-runtime`);var f={build:{icon:u.Box,color:`text-blue-500`,label:`Build`},test:{icon:u.TestTube,color:`text-purple-500`,label:`Test`},deploy:{icon:u.Rocket,color:`text-green-500`,label:`Deploy`},script:{icon:u.Terminal,color:`text-gray-500`,label:`Script`},docker:{icon:u.Container,color:`text-cyan-500`,label:`Docker`},notify:{icon:u.Bell,color:`text-yellow-500`,label:`Notify`},approval:{icon:u.Shield,color:`text-orange-500`,label:`Approval`},artifact:{icon:u.Upload,color:`text-indigo-500`,label:`Artifact`},cache:{icon:u.Database,color:`text-pink-500`,label:`Cache`},parallel:{icon:u.Zap,color:`text-amber-500`,label:`Parallel`}},p={pending:{color:`text-muted-foreground`,bgColor:`bg-muted`,icon:u.Clock},running:{color:`text-blue-500`,bgColor:`bg-blue-500`,icon:u.Play},success:{color:`text-green-500`,bgColor:`bg-green-500`,icon:u.CheckCircle2},failed:{color:`text-red-500`,bgColor:`bg-red-500`,icon:u.XCircle},skipped:{color:`text-gray-400`,bgColor:`bg-gray-400`,icon:u.ChevronRight},waiting:{color:`text-yellow-500`,bgColor:`bg-yellow-500`,icon:u.Clock}};function m({step:e,onUpdate:i,onDelete:c,readOnly:m}){let[h,g]=l.useState(!1),_=f[e.type],v=_.icon,y=e.status?p[e.status]:null,b=y?.icon;return(0,d.jsxs)(`div`,{className:t.cn(`border rounded-lg transition-all`,e.status===`failed`&&`border-red-500/50`,e.status===`running`&&`border-blue-500/50 bg-blue-500/5`),children:[(0,d.jsxs)(`div`,{className:`flex items-center gap-3 p-3 cursor-pointer`,onClick:()=>g(!h),children:[!m&&(0,d.jsx)(u.GripVertical,{className:`h-4 w-4 text-muted-foreground cursor-grab`}),(0,d.jsx)(`div`,{className:t.cn(`p-1.5 rounded`,`${_.color.replace(`text-`,`bg-`)}/10`),children:(0,d.jsx)(v,{className:t.cn(`h-4 w-4`,_.color)})}),(0,d.jsxs)(`div`,{className:`flex-1 min-w-0`,children:[(0,d.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,d.jsx)(`span`,{className:`font-medium`,children:e.name}),(0,d.jsx)(n.Badge,{variant:`outline`,className:`text-xs`,children:_.label})]}),e.command&&(0,d.jsx)(`code`,{className:`text-xs text-muted-foreground font-mono truncate block mt-0.5`,children:e.command})]}),b&&(0,d.jsxs)(n.Badge,{variant:`outline`,className:t.cn(`text-xs`,y?.color),children:[(0,d.jsx)(b,{className:`h-3 w-3 mr-1`}),e.status]}),!m&&(0,d.jsxs)(a.DropdownMenu,{children:[(0,d.jsx)(a.DropdownMenuTrigger,{asChild:!0,onClick:e=>e.stopPropagation(),children:(0,d.jsx)(r.Button,{variant:`ghost`,size:`sm`,className:`h-8 w-8 p-0`,children:(0,d.jsx)(u.MoreVertical,{className:`h-4 w-4`})})}),(0,d.jsxs)(a.DropdownMenuContent,{align:`end`,children:[(0,d.jsxs)(a.DropdownMenuItem,{onClick:()=>g(!0),children:[(0,d.jsx)(u.Settings,{className:`h-4 w-4 mr-2`}),`Configure`]}),(0,d.jsxs)(a.DropdownMenuItem,{children:[(0,d.jsx)(u.Copy,{className:`h-4 w-4 mr-2`}),`Duplicate`]}),(0,d.jsx)(a.DropdownMenuSeparator,{}),(0,d.jsxs)(a.DropdownMenuItem,{className:`text-destructive`,onClick:c,children:[(0,d.jsx)(u.Trash2,{className:`h-4 w-4 mr-2`}),`Delete`]})]})]}),(0,d.jsx)(u.ChevronRight,{className:t.cn(`h-4 w-4 transition-transform`,h&&`rotate-90`)})]}),h&&(0,d.jsxs)(`div`,{className:`px-3 pb-3 pt-0 space-y-3 border-t mt-2`,children:[(0,d.jsxs)(`div`,{className:`grid grid-cols-2 gap-3`,children:[(0,d.jsxs)(`div`,{children:[(0,d.jsx)(`label`,{className:`text-xs text-muted-foreground`,children:`Step Name`}),(0,d.jsx)(o.Input,{value:e.name,onChange:t=>i({...e,name:t.target.value}),className:`h-8 mt-1`,disabled:m})]}),(0,d.jsxs)(`div`,{children:[(0,d.jsx)(`label`,{className:`text-xs text-muted-foreground`,children:`Type`}),(0,d.jsxs)(s.Select,{value:e.type,onValueChange:t=>i({...e,type:t}),disabled:m,children:[(0,d.jsx)(s.SelectTrigger,{className:`h-8 mt-1`,children:(0,d.jsx)(s.SelectValue,{})}),(0,d.jsx)(s.SelectContent,{children:Object.entries(f).map(([e,n])=>(0,d.jsx)(s.SelectItem,{value:e,children:(0,d.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,d.jsx)(n.icon,{className:t.cn(`h-4 w-4`,n.color)}),n.label]})},e))})]})]})]}),(e.type===`script`||e.type===`build`||e.type===`test`)&&(0,d.jsxs)(`div`,{children:[(0,d.jsx)(`label`,{className:`text-xs text-muted-foreground`,children:`Command`}),(0,d.jsx)(o.Input,{value:e.command||``,onChange:t=>i({...e,command:t.target.value}),placeholder:`npm run build`,className:`h-8 mt-1 font-mono text-sm`,disabled:m})]}),e.type===`docker`&&(0,d.jsxs)(`div`,{children:[(0,d.jsx)(`label`,{className:`text-xs text-muted-foreground`,children:`Docker Image`}),(0,d.jsx)(o.Input,{value:e.image||``,onChange:t=>i({...e,image:t.target.value}),placeholder:`node:18-alpine`,className:`h-8 mt-1 font-mono text-sm`,disabled:m})]}),(0,d.jsxs)(`div`,{className:`grid grid-cols-2 gap-3`,children:[(0,d.jsxs)(`div`,{children:[(0,d.jsx)(`label`,{className:`text-xs text-muted-foreground`,children:`Timeout (seconds)`}),(0,d.jsx)(o.Input,{type:`number`,value:e.timeout||``,onChange:t=>i({...e,timeout:parseInt(t.target.value)||void 0}),placeholder:`300`,className:`h-8 mt-1`,disabled:m})]}),(0,d.jsxs)(`div`,{children:[(0,d.jsx)(`label`,{className:`text-xs text-muted-foreground`,children:`Retries`}),(0,d.jsx)(o.Input,{type:`number`,value:e.retries||``,onChange:t=>i({...e,retries:parseInt(t.target.value)||void 0}),placeholder:`0`,className:`h-8 mt-1`,disabled:m})]})]}),e.condition!==void 0&&(0,d.jsxs)(`div`,{children:[(0,d.jsx)(`label`,{className:`text-xs text-muted-foreground`,children:`Condition`}),(0,d.jsx)(o.Input,{value:e.condition,onChange:t=>i({...e,condition:t.target.value}),placeholder:`$CI_COMMIT_BRANCH == 'main'`,className:`h-8 mt-1 font-mono text-sm`,disabled:m})]})]})]})}function h({stage:e,onUpdate:s,onDelete:c,onAddStep:h,readOnly:g}){let[_,v]=l.useState(!1),y=e.status?p[e.status]:null,b=y?.icon,x=(t,n)=>{s({...e,steps:e.steps.map(e=>e.id===t?n:e)})},S=t=>{s({...e,steps:e.steps.filter(e=>e.id!==t)})};return(0,d.jsxs)(i.Card,{className:t.cn(e.status===`failed`&&`border-red-500/30`,e.status===`running`&&`border-blue-500/30`),children:[(0,d.jsx)(i.CardHeader,{className:`pb-2`,children:(0,d.jsxs)(`div`,{className:`flex items-center gap-3`,children:[(0,d.jsx)(`button`,{onClick:()=>v(!_),children:(0,d.jsx)(u.ChevronDown,{className:t.cn(`h-4 w-4 transition-transform`,_&&`-rotate-90`)})}),(0,d.jsx)(o.Input,{value:e.name,onChange:t=>s({...e,name:t.target.value}),className:`h-8 font-semibold border-0 p-0 focus-visible:ring-0 bg-transparent`,disabled:g}),b&&(0,d.jsxs)(n.Badge,{variant:`outline`,className:t.cn(`text-xs ml-auto`,y?.color),children:[(0,d.jsx)(b,{className:`h-3 w-3 mr-1`}),e.status]}),(0,d.jsxs)(n.Badge,{variant:`secondary`,className:`text-xs`,children:[e.steps.length,` steps`]}),!g&&(0,d.jsxs)(a.DropdownMenu,{children:[(0,d.jsx)(a.DropdownMenuTrigger,{asChild:!0,children:(0,d.jsx)(r.Button,{variant:`ghost`,size:`sm`,className:`h-8 w-8 p-0`,children:(0,d.jsx)(u.MoreVertical,{className:`h-4 w-4`})})}),(0,d.jsxs)(a.DropdownMenuContent,{align:`end`,children:[(0,d.jsxs)(a.DropdownMenuItem,{children:[(0,d.jsx)(u.Copy,{className:`h-4 w-4 mr-2`}),`Duplicate Stage`]}),(0,d.jsx)(a.DropdownMenuSeparator,{}),(0,d.jsxs)(a.DropdownMenuItem,{className:`text-destructive`,onClick:c,children:[(0,d.jsx)(u.Trash2,{className:`h-4 w-4 mr-2`}),`Delete Stage`]})]})]})]})}),!_&&(0,d.jsxs)(i.CardContent,{className:`space-y-2`,children:[e.steps.map(e=>(0,d.jsx)(m,{step:e,onUpdate:t=>x(e.id,t),onDelete:()=>S(e.id),readOnly:g},e.id)),!g&&(0,d.jsxs)(a.DropdownMenu,{children:[(0,d.jsx)(a.DropdownMenuTrigger,{asChild:!0,children:(0,d.jsxs)(r.Button,{variant:`outline`,size:`sm`,className:`w-full`,children:[(0,d.jsx)(u.Plus,{className:`h-4 w-4 mr-1`}),`Add Step`]})}),(0,d.jsx)(a.DropdownMenuContent,{className:`w-48`,children:Object.entries(f).map(([e,n])=>(0,d.jsxs)(a.DropdownMenuItem,{onClick:()=>h(e),children:[(0,d.jsx)(n.icon,{className:t.cn(`h-4 w-4 mr-2`,n.color)}),n.label]},e))})]})]})]})}function g({pipeline:e,onPipelineChange:s,onRun:p,onSave:m,onExport:g,readOnly:_=!1,className:v}){let[y,b]=l.useState(e),x=e=>{let t={...y,...e};b(t),s?.(t)},S=()=>{let e={id:`stage-${Date.now()}`,name:`Stage ${y.stages.length+1}`,steps:[]};x({stages:[...y.stages,e]})},C=(e,t)=>{x({stages:y.stages.map(n=>n.id===e?t:n)})},w=e=>{x({stages:y.stages.filter(t=>t.id!==e)})},T=(e,t)=>{let n=y.stages.find(t=>t.id===e);if(!n)return;let r={id:`step-${Date.now()}`,name:`${f[t].label} Step`,type:t};C(e,{...n,steps:[...n.steps,r]})};return(0,d.jsxs)(`div`,{className:t.cn(`flex flex-col gap-6`,v),children:[(0,d.jsxs)(i.Card,{children:[(0,d.jsx)(i.CardHeader,{className:`pb-3`,children:(0,d.jsxs)(`div`,{className:`flex items-center justify-between`,children:[(0,d.jsxs)(`div`,{className:`flex items-center gap-3`,children:[(0,d.jsx)(u.GitBranch,{className:`h-5 w-5`}),(0,d.jsxs)(`div`,{children:[(0,d.jsx)(o.Input,{value:y.name,onChange:e=>x({name:e.target.value}),className:`h-8 text-lg font-bold border-0 p-0 focus-visible:ring-0 bg-transparent`,disabled:_}),y.description&&(0,d.jsx)(`p`,{className:`text-sm text-muted-foreground`,children:y.description})]})]}),(0,d.jsxs)(`div`,{className:`flex items-center gap-2`,children:[g&&(0,d.jsxs)(a.DropdownMenu,{children:[(0,d.jsx)(a.DropdownMenuTrigger,{asChild:!0,children:(0,d.jsxs)(r.Button,{variant:`outline`,size:`sm`,children:[(0,d.jsx)(u.Download,{className:`h-4 w-4 mr-1`}),`Export`]})}),(0,d.jsxs)(a.DropdownMenuContent,{children:[(0,d.jsx)(a.DropdownMenuItem,{onClick:()=>g(`yaml`),children:`Export as YAML`}),(0,d.jsx)(a.DropdownMenuItem,{onClick:()=>g(`json`),children:`Export as JSON`})]})]}),m&&!_&&(0,d.jsx)(r.Button,{variant:`outline`,size:`sm`,onClick:m,children:`Save`}),p&&(0,d.jsxs)(r.Button,{size:`sm`,onClick:p,children:[(0,d.jsx)(u.Play,{className:`h-4 w-4 mr-1`}),`Run Pipeline`]})]})]})}),y.trigger&&(0,d.jsx)(i.CardContent,{className:`pt-0`,children:(0,d.jsxs)(`div`,{className:`flex items-center gap-2 flex-wrap`,children:[(0,d.jsx)(`span`,{className:`text-sm text-muted-foreground`,children:`Triggers:`}),y.trigger.events?.map(e=>(0,d.jsx)(n.Badge,{variant:`outline`,className:`text-xs`,children:e},e)),y.trigger.branches?.map(e=>(0,d.jsxs)(n.Badge,{variant:`secondary`,className:`text-xs`,children:[(0,d.jsx)(u.GitBranch,{className:`h-3 w-3 mr-1`}),e]},e)),y.trigger.schedule&&(0,d.jsxs)(n.Badge,{variant:`outline`,className:`text-xs`,children:[(0,d.jsx)(u.Clock,{className:`h-3 w-3 mr-1`}),y.trigger.schedule]})]})})]}),(0,d.jsx)(`div`,{className:`flex items-center gap-2 overflow-x-auto pb-2`,children:y.stages.map((e,n)=>(0,d.jsxs)(l.Fragment,{children:[(0,d.jsxs)(`div`,{className:`flex flex-col items-center gap-1`,children:[(0,d.jsx)(`div`,{className:t.cn(`w-4 h-4 rounded-full border-2`,e.status===`success`&&`bg-green-500 border-green-500`,e.status===`failed`&&`bg-red-500 border-red-500`,e.status===`running`&&`bg-blue-500 border-blue-500 animate-pulse`,!e.status&&`bg-muted border-muted-foreground`)}),(0,d.jsx)(`span`,{className:`text-xs text-muted-foreground whitespace-nowrap`,children:e.name})]}),n<y.stages.length-1&&(0,d.jsx)(u.ArrowRight,{className:`h-4 w-4 text-muted-foreground shrink-0`})]},e.id))}),(0,d.jsx)(c.ScrollArea,{className:`h-[500px]`,children:(0,d.jsxs)(`div`,{className:`space-y-4 pr-4`,children:[y.stages.map(e=>(0,d.jsx)(h,{stage:e,onUpdate:t=>C(e.id,t),onDelete:()=>w(e.id),onAddStep:t=>T(e.id,t),readOnly:_},e.id)),!_&&(0,d.jsxs)(r.Button,{variant:`outline`,className:`w-full`,onClick:S,children:[(0,d.jsx)(u.Plus,{className:`h-4 w-4 mr-1`}),`Add Stage`]})]})})]})}var _={id:`1`,name:`Production Deploy`,description:`Build, test, and deploy to production`,trigger:{branches:[`main`,`release/*`],events:[`push`,`pull_request`]},stages:[{id:`build`,name:`Build`,status:`success`,steps:[{id:`install`,name:`Install Dependencies`,type:`script`,command:`npm ci`,status:`success`},{id:`build`,name:`Build Application`,type:`build`,command:`npm run build`,status:`success`},{id:`artifact`,name:`Upload Build Artifacts`,type:`artifact`,artifacts:[`dist/**`,`build/**`],status:`success`}]},{id:`test`,name:`Test`,status:`running`,steps:[{id:`unit`,name:`Unit Tests`,type:`test`,command:`npm run test:unit`,status:`success`},{id:`integration`,name:`Integration Tests`,type:`test`,command:`npm run test:integration`,status:`running`},{id:`e2e`,name:`E2E Tests`,type:`test`,command:`npm run test:e2e`,status:`pending`}]},{id:`security`,name:`Security`,status:`pending`,steps:[{id:`sast`,name:`SAST Scan`,type:`script`,command:`npm run security:sast`},{id:`deps`,name:`Dependency Check`,type:`script`,command:`npm audit`}]},{id:`deploy`,name:`Deploy`,status:`pending`,steps:[{id:`approval`,name:`Production Approval`,type:`approval`,condition:`$CI_COMMIT_BRANCH == 'main'`},{id:`docker`,name:`Build Docker Image`,type:`docker`,image:`app:$CI_COMMIT_SHA`},{id:`deploy-prod`,name:`Deploy to Production`,type:`deploy`,command:`kubectl apply -f k8s/`},{id:`notify`,name:`Notify Team`,type:`notify`}]}],variables:{NODE_ENV:`production`,REGISTRY:`gcr.io/my-project`}};exports.CICDBuilder=g,exports.defaultPipeline=_;