@burdenoff/microfe-store 2026.830.1 → 2026.830.2

package/dist/components/cart/CartDrawer.js

@@ -1,186 +1,190 @@
 import { formatPrice as e } from "../../utils/index.js";
-import { Minus as t, Plus as n, ShoppingCart as r, Trash2 as i, X as a } from "lucide-react";
-import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
+import { useTr as t } from "../../shared/hooks/useTr.js";
+import { Minus as n, Plus as r, ShoppingCart as i, Trash2 as a, X as o } from "lucide-react";
+import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
 //#region src/components/cart/CartDrawer.tsx
-var l = ({ isOpen: l, onClose: u, onCheckout: d, cartItems: f, itemCount: p, subtotal: m, tax: h, total: g, updateQuantity: _, removeProduct: v }) => l ? /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ s("button", {
-	type: "button",
-	"aria-label": "Close cart",
-	className: "fixed inset-0 z-40 bg-bg-overlay/50 transition-opacity",
-	onClick: u
-}), /* @__PURE__ */ s("div", {
-	className: "fixed right-0 top-0 z-50 size-full sm:max-w-md bg-bg-surface shadow-xl",
-	children: /* @__PURE__ */ c("div", {
-		className: "flex h-full flex-col",
-		children: [
-			/* @__PURE__ */ c("div", {
-				className: "flex items-center justify-between border-b border-border-seam px-4 sm:px-6 py-4",
-				children: [/* @__PURE__ */ c("div", {
-					className: "flex items-center gap-2",
-					children: [
-						/* @__PURE__ */ s(r, { className: "size-5 text-text-primary" }),
-						/* @__PURE__ */ s("h2", {
-							className: "text-lg font-semibold text-text-primary",
-							children: "Shopping Cart"
-						}),
-						p > 0 && /* @__PURE__ */ s("span", {
-							className: "rounded-full bg-bg-accent px-2 py-0.5 text-xs font-medium tabular-nums text-text-link",
-							children: p
-						})
-					]
-				}), /* @__PURE__ */ s("button", {
-					type: "button",
-					onClick: u,
-					"aria-label": "Close cart",
-					className: "cursor-pointer rounded-lg p-2 text-text-muted transition-colors hover:bg-bg-sunken hover:text-text-primary",
-					children: /* @__PURE__ */ s(a, { className: "size-5" })
-				})]
-			}),
-			/* @__PURE__ */ s("div", {
-				className: "flex-1 overflow-y-auto px-4 sm:px-6 py-4",
-				children: f.length === 0 ? /* @__PURE__ */ c("output", {
-					"aria-label": "Your cart is empty",
-					className: "flex h-full flex-col items-center justify-center text-center",
-					children: [
-						/* @__PURE__ */ s(r, {
-							className: "mb-4 size-16 text-text-muted",
-							"aria-hidden": "true"
-						}),
-						/* @__PURE__ */ s("h3", {
-							className: "mb-2 text-lg font-semibold text-text-primary",
-							children: "Your cart is empty"
-						}),
-						/* @__PURE__ */ s("p", {
-							className: "text-sm text-text-muted",
-							children: "Start shopping to add items to your cart"
-						})
-					]
-				}) : /* @__PURE__ */ s("div", {
-					className: "space-y-4",
-					children: f.map((a) => /* @__PURE__ */ c("div", {
-						className: "flex gap-4 rounded-lg border border-border-seam bg-bg-surface p-4 transition-[box-shadow,border-color] hover:border-border-strong hover:shadow-[var(--shadow-pop)]",
-						children: [/* @__PURE__ */ s("div", {
-							className: "size-20 flex-shrink-0 overflow-hidden rounded bg-bg-sunken",
-							children: a.productIcon || a.product?.icon ? /* @__PURE__ */ s("img", {
-								src: a.productIcon || a.product?.icon,
-								alt: a.productName || a.product?.name,
-								className: "size-full object-cover"
-							}) : /* @__PURE__ */ s("div", {
-								className: "flex size-full items-center justify-center",
-								children: /* @__PURE__ */ s(r, { className: "size-8 text-text-muted" })
+var u = ({ isOpen: u, onClose: d, onCheckout: f, cartItems: p, itemCount: m, subtotal: h, tax: g, total: _, updateQuantity: v, removeProduct: y }) => {
+	let b = t();
+	return u ? /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c("button", {
+		type: "button",
+		"aria-label": b("cart.closeCart", "Close cart"),
+		className: "fixed inset-0 z-40 bg-bg-overlay/50 transition-opacity",
+		onClick: d
+	}), /* @__PURE__ */ c("div", {
+		className: "fixed right-0 top-0 z-50 size-full sm:max-w-md bg-bg-surface shadow-xl",
+		children: /* @__PURE__ */ l("div", {
+			className: "flex h-full flex-col",
+			children: [
+				/* @__PURE__ */ l("div", {
+					className: "flex items-center justify-between border-b border-border-seam px-4 sm:px-6 py-4",
+					children: [/* @__PURE__ */ l("div", {
+						className: "flex items-center gap-2",
+						children: [
+							/* @__PURE__ */ c(i, { className: "size-5 text-text-primary" }),
+							/* @__PURE__ */ c("h2", {
+								className: "text-lg font-semibold text-text-primary",
+								children: b("cart.title", "Shopping Cart")
+							}),
+							m > 0 && /* @__PURE__ */ c("span", {
+								className: "rounded-full bg-bg-accent px-2 py-0.5 text-xs font-medium tabular-nums text-text-link",
+								children: m
 							})
-						}), /* @__PURE__ */ c("div", {
-							className: "flex flex-1 flex-col",
-							children: [
-								/* @__PURE__ */ s("h4", {
-									className: "mb-1 font-semibold text-text-primary",
-									children: a.productName || a.product?.name || "Product"
-								}),
-								a.variantName && /* @__PURE__ */ s("p", {
-									className: "mb-2 text-xs text-text-muted",
-									children: a.variantName
-								}),
-								/* @__PURE__ */ c("div", {
-									className: "flex items-center gap-3",
-									children: [/* @__PURE__ */ c("div", {
-										className: "flex items-center rounded border border-border-default",
-										children: [
-											/* @__PURE__ */ s("button", {
-												type: "button",
-												onClick: () => _(a.id, a.quantity - 1),
-												"aria-label": `Decrease quantity of ${a.productName || a.product?.name || "item"}`,
-												className: "cursor-pointer p-1.5 transition-colors hover:bg-bg-sunken disabled:cursor-not-allowed disabled:opacity-50",
-												disabled: a.quantity <= 1,
-												children: /* @__PURE__ */ s(t, {
-													className: "size-4",
-													"aria-hidden": "true"
-												})
-											}),
-											/* @__PURE__ */ s("span", {
-												className: "min-w-[2rem] text-center text-sm font-medium",
-												"aria-label": `Quantity: ${a.quantity}`,
-												children: a.quantity
-											}),
-											/* @__PURE__ */ s("button", {
-												type: "button",
-												onClick: () => _(a.id, a.quantity + 1),
-												"aria-label": `Increase quantity of ${a.productName || a.product?.name || "item"}`,
-												className: "cursor-pointer p-1.5 transition-colors hover:bg-bg-sunken",
-												children: /* @__PURE__ */ s(n, {
-													className: "size-4",
-													"aria-hidden": "true"
+						]
+					}), /* @__PURE__ */ c("button", {
+						type: "button",
+						onClick: d,
+						"aria-label": b("cart.closeCart", "Close cart"),
+						className: "cursor-pointer rounded-lg p-2 text-text-muted transition-colors hover:bg-bg-sunken hover:text-text-primary",
+						children: /* @__PURE__ */ c(o, { className: "size-5" })
+					})]
+				}),
+				/* @__PURE__ */ c("div", {
+					className: "flex-1 overflow-y-auto px-4 sm:px-6 py-4",
+					children: p.length === 0 ? /* @__PURE__ */ l("output", {
+						"aria-label": b("cart.empty", "Your cart is empty"),
+						className: "flex h-full flex-col items-center justify-center text-center",
+						children: [
+							/* @__PURE__ */ c(i, {
+								className: "mb-4 size-16 text-text-muted",
+								"aria-hidden": "true"
+							}),
+							/* @__PURE__ */ c("h3", {
+								className: "mb-2 text-lg font-semibold text-text-primary",
+								children: b("cart.empty", "Your cart is empty")
+							}),
+							/* @__PURE__ */ c("p", {
+								className: "text-sm text-text-muted",
+								children: b("cart.emptyHint", "Start shopping to add items to your cart")
+							})
+						]
+					}) : /* @__PURE__ */ c("div", {
+						className: "space-y-4",
+						children: p.map((t) => /* @__PURE__ */ l("div", {
+							className: "flex gap-4 rounded-lg border border-border-seam bg-bg-surface p-4 transition-[box-shadow,border-color] hover:border-border-strong hover:shadow-[var(--shadow-pop)]",
+							children: [/* @__PURE__ */ c("div", {
+								className: "size-20 flex-shrink-0 overflow-hidden rounded bg-bg-sunken",
+								children: t.productIcon || t.product?.icon ? /* @__PURE__ */ c("img", {
+									src: t.productIcon || t.product?.icon,
+									alt: t.productName || t.product?.name,
+									className: "size-full object-cover"
+								}) : /* @__PURE__ */ c("div", {
+									className: "flex size-full items-center justify-center",
+									children: /* @__PURE__ */ c(i, { className: "size-8 text-text-muted" })
+								})
+							}), /* @__PURE__ */ l("div", {
+								className: "flex flex-1 flex-col",
+								children: [
+									/* @__PURE__ */ c("h4", {
+										className: "mb-1 font-semibold text-text-primary",
+										children: t.productName || t.product?.name || b("common.product", "Product")
+									}),
+									t.variantName && /* @__PURE__ */ c("p", {
+										className: "mb-2 text-xs text-text-muted",
+										children: t.variantName
+									}),
+									/* @__PURE__ */ l("div", {
+										className: "flex items-center gap-3",
+										children: [/* @__PURE__ */ l("div", {
+											className: "flex items-center rounded border border-border-default",
+											children: [
+												/* @__PURE__ */ c("button", {
+													type: "button",
+													onClick: () => v(t.id, t.quantity - 1),
+													"aria-label": b("cart.decreaseQuantity", "Decrease quantity of {{name}}", { name: t.productName || t.product?.name || b("common.item", "item") }),
+													className: "cursor-pointer p-1.5 transition-colors hover:bg-bg-sunken disabled:cursor-not-allowed disabled:opacity-50",
+													disabled: t.quantity <= 1,
+													children: /* @__PURE__ */ c(n, {
+														className: "size-4",
+														"aria-hidden": "true"
+													})
+												}),
+												/* @__PURE__ */ c("span", {
+													className: "min-w-[2rem] text-center text-sm font-medium",
+													"aria-label": b("cart.quantity", "Quantity: {{quantity}}", { quantity: t.quantity }),
+													children: t.quantity
+												}),
+												/* @__PURE__ */ c("button", {
+													type: "button",
+													onClick: () => v(t.id, t.quantity + 1),
+													"aria-label": b("cart.increaseQuantity", "Increase quantity of {{name}}", { name: t.productName || t.product?.name || b("common.item", "item") }),
+													className: "cursor-pointer p-1.5 transition-colors hover:bg-bg-sunken",
+													children: /* @__PURE__ */ c(r, {
+														className: "size-4",
+														"aria-hidden": "true"
+													})
 												})
+											]
+										}), /* @__PURE__ */ c("button", {
+											type: "button",
+											onClick: () => y(t.id),
+											"aria-label": b("cart.removeItem", "Remove {{name}} from cart", { name: t.productName || t.product?.name || b("common.item", "item") }),
+											className: "cursor-pointer ml-auto text-status-error-text transition-colors hover:text-status-error-text-emphasis",
+											children: /* @__PURE__ */ c(a, {
+												className: "size-4",
+												"aria-hidden": "true"
 											})
-										]
-									}), /* @__PURE__ */ s("button", {
-										type: "button",
-										onClick: () => v(a.id),
-										"aria-label": `Remove ${a.productName || a.product?.name || "item"} from cart`,
-										className: "cursor-pointer ml-auto text-status-error-text transition-colors hover:text-status-error-text-emphasis",
-										children: /* @__PURE__ */ s(i, {
-											className: "size-4",
-											"aria-hidden": "true"
+										})]
+									}),
+									/* @__PURE__ */ c("div", {
+										className: "mt-2 text-right",
+										children: /* @__PURE__ */ c("span", {
+											className: "font-semibold tabular-nums text-text-primary",
+											children: e(t.subtotal)
 										})
-									})]
-								}),
-								/* @__PURE__ */ s("div", {
-									className: "mt-2 text-right",
-									children: /* @__PURE__ */ s("span", {
-										className: "font-semibold tabular-nums text-text-primary",
-										children: e(a.subtotal)
 									})
-								})
-							]
-						})]
-					}, a.id))
-				})
-			}),
-			f.length > 0 && /* @__PURE__ */ c("div", {
-				className: "border-t border-border-seam bg-accent-wash px-4 sm:px-6 py-4",
-				children: [/* @__PURE__ */ c("div", {
-					className: "space-y-2",
-					children: [
-						/* @__PURE__ */ c("div", {
-							className: "flex justify-between text-sm",
-							children: [/* @__PURE__ */ s("span", {
-								className: "text-text-muted",
-								children: "Subtotal"
-							}), /* @__PURE__ */ s("span", {
-								className: "font-medium tabular-nums text-text-primary",
-								children: e(m)
+								]
 							})]
-						}),
-						/* @__PURE__ */ c("div", {
-							className: "flex justify-between text-sm",
-							children: [/* @__PURE__ */ s("span", {
-								className: "text-text-muted",
-								children: "Tax"
-							}), /* @__PURE__ */ s("span", {
-								className: "font-medium tabular-nums text-text-primary",
-								children: e(h)
-							})]
-						}),
-						/* @__PURE__ */ c("div", {
-							className: "flex justify-between border-t border-border-seam pt-2",
-							children: [/* @__PURE__ */ s("span", {
-								className: "font-semibold text-text-primary",
-								children: "Total"
-							}), /* @__PURE__ */ s("span", {
-								className: "text-lg font-bold tabular-nums text-text-primary",
-								children: e(g)
-							})]
-						})
-					]
-				}), /* @__PURE__ */ s("button", {
-					type: "button",
-					onClick: d,
-					className: "cursor-pointer mt-4 w-full rounded-lg bg-action-primary-bg py-3 font-bold text-action-primary-text shadow-elevation-1 transition-[opacity,box-shadow] hover:opacity-90 hover:shadow-[var(--shadow-pop)]",
-					children: "Proceed to Checkout"
-				})]
-			})
-		]
-	})
-})] }) : null;
+						}, t.id))
+					})
+				}),
+				p.length > 0 && /* @__PURE__ */ l("div", {
+					className: "border-t border-border-seam bg-accent-wash px-4 sm:px-6 py-4",
+					children: [/* @__PURE__ */ l("div", {
+						className: "space-y-2",
+						children: [
+							/* @__PURE__ */ l("div", {
+								className: "flex justify-between text-sm",
+								children: [/* @__PURE__ */ c("span", {
+									className: "text-text-muted",
+									children: b("cart.subtotal", "Subtotal")
+								}), /* @__PURE__ */ c("span", {
+									className: "font-medium tabular-nums text-text-primary",
+									children: e(h)
+								})]
+							}),
+							/* @__PURE__ */ l("div", {
+								className: "flex justify-between text-sm",
+								children: [/* @__PURE__ */ c("span", {
+									className: "text-text-muted",
+									children: b("cart.tax", "Tax")
+								}), /* @__PURE__ */ c("span", {
+									className: "font-medium tabular-nums text-text-primary",
+									children: e(g)
+								})]
+							}),
+							/* @__PURE__ */ l("div", {
+								className: "flex justify-between border-t border-border-seam pt-2",
+								children: [/* @__PURE__ */ c("span", {
+									className: "font-semibold text-text-primary",
+									children: b("cart.total", "Total")
+								}), /* @__PURE__ */ c("span", {
+									className: "text-lg font-bold tabular-nums text-text-primary",
+									children: e(_)
+								})]
+							})
+						]
+					}), /* @__PURE__ */ c("button", {
+						type: "button",
+						onClick: f,
+						className: "cursor-pointer mt-4 w-full rounded-lg bg-action-primary-bg py-3 font-bold text-action-primary-text shadow-elevation-1 transition-[opacity,box-shadow] hover:opacity-90 hover:shadow-[var(--shadow-pop)]",
+						children: b("cart.checkout", "Proceed to Checkout")
+					})]
+				})
+			]
+		})
+	})] }) : null;
+};
 //#endregion
-export { l as CartDrawer };
+export { u as CartDrawer };
 
 //# sourceMappingURL=CartDrawer.js.map

package/dist/components/cart/CartDrawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"CartDrawer.js","names":[],"sources":["../../../src/components/cart/CartDrawer.tsx"],"sourcesContent":["import type { FC } from 'react';\nimport { X, ShoppingCart, Trash2, Plus, Minus } from 'lucide-react';\nimport { formatPrice } from '../../utils';\n\n/**\n * Props for CartDrawer\n */\ninterface CartDrawerProps {\n  isOpen: boolean;\n  onClose: () => void;\n  onCheckout: () => void;\n  cartItems: Array<{\n    id: string;\n    quantity: number;\n    subtotal: number;\n    productName?: string;\n    productIcon?: string;\n    variantName?: string;\n    product?: { icon?: string; name?: string };\n  }>;\n  itemCount: number;\n  subtotal: number;\n  tax: number;\n  total: number;\n  updateQuantity: (cartItemId: string, quantity: number) => Promise<void>;\n  removeProduct: (cartItemId: string) => Promise<void>;\n}\n\n/**\n * CartDrawer component\n *\n * Sliding drawer for cart management\n */\nexport const CartDrawer: FC<CartDrawerProps> = ({\n  isOpen,\n  onClose,\n  onCheckout,\n  cartItems,\n  itemCount,\n  subtotal,\n  tax,\n  total,\n  updateQuantity,\n  removeProduct,\n}) => {\n  if (!isOpen) return null;\n\n  return (\n    <>\n      {/* Backdrop */}\n      <button\n        type=\"button\"\n        aria-label=\"Close cart\"\n        className=\"fixed inset-0 z-40 bg-bg-overlay/50 transition-opacity\"\n        onClick={onClose}\n      />\n\n      {/* Drawer */}\n      <div className=\"fixed right-0 top-0 z-50 size-full sm:max-w-md bg-bg-surface shadow-xl\">\n        <div className=\"flex h-full flex-col\">\n          {/* Header */}\n          <div className=\"flex items-center justify-between border-b border-border-seam px-4 sm:px-6 py-4\">\n            <div className=\"flex items-center gap-2\">\n              <ShoppingCart className=\"size-5 text-text-primary\" />\n              <h2 className=\"text-lg font-semibold text-text-primary\">Shopping Cart</h2>\n              {itemCount > 0 && (\n                <span className=\"rounded-full bg-bg-accent px-2 py-0.5 text-xs font-medium tabular-nums text-text-link\">\n                  {itemCount}\n                </span>\n              )}\n            </div>\n            <button\n              type=\"button\"\n              onClick={onClose}\n              aria-label=\"Close cart\"\n              className=\"cursor-pointer rounded-lg p-2 text-text-muted transition-colors hover:bg-bg-sunken hover:text-text-primary\"\n            >\n              <X className=\"size-5\" />\n            </button>\n          </div>\n\n          {/* Cart Items */}\n          <div className=\"flex-1 overflow-y-auto px-4 sm:px-6 py-4\">\n            {cartItems.length === 0 ? (\n              <output\n                aria-label=\"Your cart is empty\"\n                className=\"flex h-full flex-col items-center justify-center text-center\"\n              >\n                <ShoppingCart className=\"mb-4 size-16 text-text-muted\" aria-hidden=\"true\" />\n                <h3 className=\"mb-2 text-lg font-semibold text-text-primary\">Your cart is empty</h3>\n                <p className=\"text-sm text-text-muted\">Start shopping to add items to your cart</p>\n              </output>\n            ) : (\n              <div className=\"space-y-4\">\n                {cartItems.map((item) => (\n                  <div\n                    key={item.id}\n                    className=\"flex gap-4 rounded-lg border border-border-seam bg-bg-surface p-4 transition-[box-shadow,border-color] hover:border-border-strong hover:shadow-[var(--shadow-pop)]\"\n                  >\n                    {/* Product Image */}\n                    <div className=\"size-20 flex-shrink-0 overflow-hidden rounded bg-bg-sunken\">\n                      {item.productIcon || item.product?.icon ? (\n                        <img\n                          src={item.productIcon || item.product?.icon}\n                          alt={item.productName || item.product?.name}\n                          className=\"size-full object-cover\"\n                        />\n                      ) : (\n                        <div className=\"flex size-full items-center justify-center\">\n                          <ShoppingCart className=\"size-8 text-text-muted\" />\n                        </div>\n                      )}\n                    </div>\n\n                    {/* Product Info */}\n                    <div className=\"flex flex-1 flex-col\">\n                      <h4 className=\"mb-1 font-semibold text-text-primary\">\n                        {item.productName || item.product?.name || 'Product'}\n                      </h4>\n                      {item.variantName && (\n                        <p className=\"mb-2 text-xs text-text-muted\">{item.variantName}</p>\n                      )}\n\n                      {/* Quantity Controls */}\n                      <div className=\"flex items-center gap-3\">\n                        <div className=\"flex items-center rounded border border-border-default\">\n                          <button\n                            type=\"button\"\n                            onClick={() => updateQuantity(item.id, item.quantity - 1)}\n                            aria-label={`Decrease quantity of ${item.productName || item.product?.name || 'item'}`}\n                            className=\"cursor-pointer p-1.5 transition-colors hover:bg-bg-sunken disabled:cursor-not-allowed disabled:opacity-50\"\n                            disabled={item.quantity <= 1}\n                          >\n                            <Minus className=\"size-4\" aria-hidden=\"true\" />\n                          </button>\n                          <span\n                            className=\"min-w-[2rem] text-center text-sm font-medium\"\n                            aria-label={`Quantity: ${item.quantity}`}\n                          >\n                            {item.quantity}\n                          </span>\n                          <button\n                            type=\"button\"\n                            onClick={() => updateQuantity(item.id, item.quantity + 1)}\n                            aria-label={`Increase quantity of ${item.productName || item.product?.name || 'item'}`}\n                            className=\"cursor-pointer p-1.5 transition-colors hover:bg-bg-sunken\"\n                          >\n                            <Plus className=\"size-4\" aria-hidden=\"true\" />\n                          </button>\n                        </div>\n\n                        <button\n                          type=\"button\"\n                          onClick={() => removeProduct(item.id)}\n                          aria-label={`Remove ${item.productName || item.product?.name || 'item'} from cart`}\n                          className=\"cursor-pointer ml-auto text-status-error-text transition-colors hover:text-status-error-text-emphasis\"\n                        >\n                          <Trash2 className=\"size-4\" aria-hidden=\"true\" />\n                        </button>\n                      </div>\n\n                      {/* Price */}\n                      <div className=\"mt-2 text-right\">\n                        <span className=\"font-semibold tabular-nums text-text-primary\">\n                          {formatPrice(item.subtotal)}\n                        </span>\n                      </div>\n                    </div>\n                  </div>\n                ))}\n              </div>\n            )}\n          </div>\n\n          {/* Footer with Summary */}\n          {cartItems.length > 0 && (\n            <div className=\"border-t border-border-seam bg-accent-wash px-4 sm:px-6 py-4\">\n              <div className=\"space-y-2\">\n                <div className=\"flex justify-between text-sm\">\n                  <span className=\"text-text-muted\">Subtotal</span>\n                  <span className=\"font-medium tabular-nums text-text-primary\">\n                    {formatPrice(subtotal)}\n                  </span>\n                </div>\n                <div className=\"flex justify-between text-sm\">\n                  <span className=\"text-text-muted\">Tax</span>\n                  <span className=\"font-medium tabular-nums text-text-primary\">\n                    {formatPrice(tax)}\n                  </span>\n                </div>\n                <div className=\"flex justify-between border-t border-border-seam pt-2\">\n                  <span className=\"font-semibold text-text-primary\">Total</span>\n                  <span className=\"text-lg font-bold tabular-nums text-text-primary\">\n                    {formatPrice(total)}\n                  </span>\n                </div>\n              </div>\n\n              <button\n                type=\"button\"\n                onClick={onCheckout}\n                className=\"cursor-pointer mt-4 w-full rounded-lg bg-action-primary-bg py-3 font-bold text-action-primary-text shadow-elevation-1 transition-[opacity,box-shadow] hover:opacity-90 hover:shadow-[var(--shadow-pop)]\"\n              >\n                Proceed to Checkout\n              </button>\n            </div>\n          )}\n        </div>\n      </div>\n    </>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"CartDrawer.js","names":[],"sources":["../../../src/components/cart/CartDrawer.tsx"],"sourcesContent":["import type { FC } from 'react';\nimport { X, ShoppingCart, Trash2, Plus, Minus } from 'lucide-react';\nimport { formatPrice } from '../../utils';\nimport { useTr } from '../../shared/hooks/useTr';\n\n/**\n * Props for CartDrawer\n */\ninterface CartDrawerProps {\n  isOpen: boolean;\n  onClose: () => void;\n  onCheckout: () => void;\n  cartItems: Array<{\n    id: string;\n    quantity: number;\n    subtotal: number;\n    productName?: string;\n    productIcon?: string;\n    variantName?: string;\n    product?: { icon?: string; name?: string };\n  }>;\n  itemCount: number;\n  subtotal: number;\n  tax: number;\n  total: number;\n  updateQuantity: (cartItemId: string, quantity: number) => Promise<void>;\n  removeProduct: (cartItemId: string) => Promise<void>;\n}\n\n/**\n * CartDrawer component\n *\n * Sliding drawer for cart management\n */\nexport const CartDrawer: FC<CartDrawerProps> = ({\n  isOpen,\n  onClose,\n  onCheckout,\n  cartItems,\n  itemCount,\n  subtotal,\n  tax,\n  total,\n  updateQuantity,\n  removeProduct,\n}) => {\n  const tr = useTr();\n  if (!isOpen) return null;\n\n  return (\n    <>\n      {/* Backdrop */}\n      <button\n        type=\"button\"\n        aria-label={tr('cart.closeCart', 'Close cart')}\n        className=\"fixed inset-0 z-40 bg-bg-overlay/50 transition-opacity\"\n        onClick={onClose}\n      />\n\n      {/* Drawer */}\n      <div className=\"fixed right-0 top-0 z-50 size-full sm:max-w-md bg-bg-surface shadow-xl\">\n        <div className=\"flex h-full flex-col\">\n          {/* Header */}\n          <div className=\"flex items-center justify-between border-b border-border-seam px-4 sm:px-6 py-4\">\n            <div className=\"flex items-center gap-2\">\n              <ShoppingCart className=\"size-5 text-text-primary\" />\n              <h2 className=\"text-lg font-semibold text-text-primary\">\n                {tr('cart.title', 'Shopping Cart')}\n              </h2>\n              {itemCount > 0 && (\n                <span className=\"rounded-full bg-bg-accent px-2 py-0.5 text-xs font-medium tabular-nums text-text-link\">\n                  {itemCount}\n                </span>\n              )}\n            </div>\n            <button\n              type=\"button\"\n              onClick={onClose}\n              aria-label={tr('cart.closeCart', 'Close cart')}\n              className=\"cursor-pointer rounded-lg p-2 text-text-muted transition-colors hover:bg-bg-sunken hover:text-text-primary\"\n            >\n              <X className=\"size-5\" />\n            </button>\n          </div>\n\n          {/* Cart Items */}\n          <div className=\"flex-1 overflow-y-auto px-4 sm:px-6 py-4\">\n            {cartItems.length === 0 ? (\n              <output\n                aria-label={tr('cart.empty', 'Your cart is empty')}\n                className=\"flex h-full flex-col items-center justify-center text-center\"\n              >\n                <ShoppingCart className=\"mb-4 size-16 text-text-muted\" aria-hidden=\"true\" />\n                <h3 className=\"mb-2 text-lg font-semibold text-text-primary\">\n                  {tr('cart.empty', 'Your cart is empty')}\n                </h3>\n                <p className=\"text-sm text-text-muted\">\n                  {tr('cart.emptyHint', 'Start shopping to add items to your cart')}\n                </p>\n              </output>\n            ) : (\n              <div className=\"space-y-4\">\n                {cartItems.map((item) => (\n                  <div\n                    key={item.id}\n                    className=\"flex gap-4 rounded-lg border border-border-seam bg-bg-surface p-4 transition-[box-shadow,border-color] hover:border-border-strong hover:shadow-[var(--shadow-pop)]\"\n                  >\n                    {/* Product Image */}\n                    <div className=\"size-20 flex-shrink-0 overflow-hidden rounded bg-bg-sunken\">\n                      {item.productIcon || item.product?.icon ? (\n                        <img\n                          src={item.productIcon || item.product?.icon}\n                          alt={item.productName || item.product?.name}\n                          className=\"size-full object-cover\"\n                        />\n                      ) : (\n                        <div className=\"flex size-full items-center justify-center\">\n                          <ShoppingCart className=\"size-8 text-text-muted\" />\n                        </div>\n                      )}\n                    </div>\n\n                    {/* Product Info */}\n                    <div className=\"flex flex-1 flex-col\">\n                      <h4 className=\"mb-1 font-semibold text-text-primary\">\n                        {item.productName || item.product?.name || tr('common.product', 'Product')}\n                      </h4>\n                      {item.variantName && (\n                        <p className=\"mb-2 text-xs text-text-muted\">{item.variantName}</p>\n                      )}\n\n                      {/* Quantity Controls */}\n                      <div className=\"flex items-center gap-3\">\n                        <div className=\"flex items-center rounded border border-border-default\">\n                          <button\n                            type=\"button\"\n                            onClick={() => updateQuantity(item.id, item.quantity - 1)}\n                            aria-label={tr(\n                              'cart.decreaseQuantity',\n                              'Decrease quantity of {{name}}',\n                              {\n                                name:\n                                  item.productName ||\n                                  item.product?.name ||\n                                  tr('common.item', 'item'),\n                              }\n                            )}\n                            className=\"cursor-pointer p-1.5 transition-colors hover:bg-bg-sunken disabled:cursor-not-allowed disabled:opacity-50\"\n                            disabled={item.quantity <= 1}\n                          >\n                            <Minus className=\"size-4\" aria-hidden=\"true\" />\n                          </button>\n                          <span\n                            className=\"min-w-[2rem] text-center text-sm font-medium\"\n                            aria-label={tr('cart.quantity', 'Quantity: {{quantity}}', {\n                              quantity: item.quantity,\n                            })}\n                          >\n                            {item.quantity}\n                          </span>\n                          <button\n                            type=\"button\"\n                            onClick={() => updateQuantity(item.id, item.quantity + 1)}\n                            aria-label={tr(\n                              'cart.increaseQuantity',\n                              'Increase quantity of {{name}}',\n                              {\n                                name:\n                                  item.productName ||\n                                  item.product?.name ||\n                                  tr('common.item', 'item'),\n                              }\n                            )}\n                            className=\"cursor-pointer p-1.5 transition-colors hover:bg-bg-sunken\"\n                          >\n                            <Plus className=\"size-4\" aria-hidden=\"true\" />\n                          </button>\n                        </div>\n\n                        <button\n                          type=\"button\"\n                          onClick={() => removeProduct(item.id)}\n                          aria-label={tr('cart.removeItem', 'Remove {{name}} from cart', {\n                            name:\n                              item.productName || item.product?.name || tr('common.item', 'item'),\n                          })}\n                          className=\"cursor-pointer ml-auto text-status-error-text transition-colors hover:text-status-error-text-emphasis\"\n                        >\n                          <Trash2 className=\"size-4\" aria-hidden=\"true\" />\n                        </button>\n                      </div>\n\n                      {/* Price */}\n                      <div className=\"mt-2 text-right\">\n                        <span className=\"font-semibold tabular-nums text-text-primary\">\n                          {formatPrice(item.subtotal)}\n                        </span>\n                      </div>\n                    </div>\n                  </div>\n                ))}\n              </div>\n            )}\n          </div>\n\n          {/* Footer with Summary */}\n          {cartItems.length > 0 && (\n            <div className=\"border-t border-border-seam bg-accent-wash px-4 sm:px-6 py-4\">\n              <div className=\"space-y-2\">\n                <div className=\"flex justify-between text-sm\">\n                  <span className=\"text-text-muted\">{tr('cart.subtotal', 'Subtotal')}</span>\n                  <span className=\"font-medium tabular-nums text-text-primary\">\n                    {formatPrice(subtotal)}\n                  </span>\n                </div>\n                <div className=\"flex justify-between text-sm\">\n                  <span className=\"text-text-muted\">{tr('cart.tax', 'Tax')}</span>\n                  <span className=\"font-medium tabular-nums text-text-primary\">\n                    {formatPrice(tax)}\n                  </span>\n                </div>\n                <div className=\"flex justify-between border-t border-border-seam pt-2\">\n                  <span className=\"font-semibold text-text-primary\">\n                    {tr('cart.total', 'Total')}\n                  </span>\n                  <span className=\"text-lg font-bold tabular-nums text-text-primary\">\n                    {formatPrice(total)}\n                  </span>\n                </div>\n              </div>\n\n              <button\n                type=\"button\"\n                onClick={onCheckout}\n                className=\"cursor-pointer mt-4 w-full rounded-lg bg-action-primary-bg py-3 font-bold text-action-primary-text shadow-elevation-1 transition-[opacity,box-shadow] hover:opacity-90 hover:shadow-[var(--shadow-pop)]\"\n              >\n                {tr('cart.checkout', 'Proceed to Checkout')}\n              </button>\n            </div>\n          )}\n        </div>\n      </div>\n    </>\n  );\n};\n"],"mappings":"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"}