@geomak/ui 6.11.0 → 6.12.0

package/dist/index.cjs

@@ -2154,6 +2154,81 @@ function Calendar2({
     }) })
   ] });
 }
+var defaultFormat = (v) => `${v < 0 ? "-" : ""}$${Math.abs(v).toFixed(2)}`;
+var Stepper = ({
+  quantity,
+  max,
+  onChange
+}) => {
+  const btn = "flex h-7 w-7 items-center justify-center text-foreground-secondary hover:bg-surface-raised disabled:opacity-40 disabled:hover:bg-transparent focus:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-inset transition-colors";
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "inline-flex items-center rounded-md border border-border overflow-hidden", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", "aria-label": "Decrease quantity", disabled: quantity <= 1, onClick: () => onChange?.(quantity - 1), className: btn, children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "h-3.5 w-3.5", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", d: "M5 12h14" }) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-8 text-center text-sm tabular-nums text-foreground select-none", children: quantity }),
+    /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", "aria-label": "Increase quantity", disabled: max != null && quantity >= max, onClick: () => onChange?.(quantity + 1), className: btn, children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "h-3.5 w-3.5", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", d: "M12 5v14M5 12h14" }) }) })
+  ] });
+};
+function Cart({
+  items,
+  onQuantityChange,
+  onRemove,
+  summaryRows = [],
+  formatPrice = defaultFormat,
+  checkoutLabel = "Checkout",
+  onCheckout,
+  emptyState,
+  className = "",
+  style
+}) {
+  const subtotal = items.reduce((sum, it) => sum + it.price * it.quantity, 0);
+  const total = subtotal + summaryRows.reduce((sum, r) => sum + r.value, 0);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ["flex flex-col rounded-xl border border-border bg-surface", className].filter(Boolean).join(" "), style, children: [
+    items.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-8 text-center text-sm text-foreground-muted", children: emptyState ?? "Your cart is empty." }) : /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "divide-y divide-border", children: items.map((it) => /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "flex items-center gap-3 p-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-14 w-14 flex-shrink-0 overflow-hidden rounded-md bg-surface-raised", children: it.image && /* @__PURE__ */ jsxRuntime.jsx("img", { src: it.image, alt: "", className: "h-full w-full object-cover" }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "truncate text-sm font-medium text-foreground", children: it.name }),
+        it.meta && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "truncate text-xs text-foreground-muted mt-0.5", children: it.meta }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-1.5 flex items-center gap-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Stepper, { quantity: it.quantity, max: it.max, onChange: (q) => onQuantityChange?.(it.id, Math.max(1, q)) }),
+          onRemove && /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => onRemove(it.id),
+              className: "text-xs text-foreground-muted hover:text-status-error transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-accent rounded px-1",
+              children: "Remove"
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0 text-sm font-semibold text-foreground tabular-nums", children: formatPrice(it.price * it.quantity) })
+    ] }, it.id)) }),
+    items.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-t border-border p-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("dl", { className: "space-y-1.5", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between text-sm", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("dt", { className: "text-foreground-secondary", children: "Subtotal" }),
+          /* @__PURE__ */ jsxRuntime.jsx("dd", { className: "tabular-nums text-foreground", children: formatPrice(subtotal) })
+        ] }),
+        summaryRows.map((r, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between text-sm", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("dt", { className: r.muted ? "text-foreground-muted" : "text-foreground-secondary", children: r.label }),
+          /* @__PURE__ */ jsxRuntime.jsx("dd", { className: `tabular-nums ${r.value < 0 ? "text-status-success" : "text-foreground"}`, children: formatPrice(r.value) })
+        ] }, i)),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between border-t border-border pt-2 mt-1 text-base font-semibold", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("dt", { className: "text-foreground", children: "Total" }),
+          /* @__PURE__ */ jsxRuntime.jsx("dd", { className: "tabular-nums text-foreground", children: formatPrice(total) })
+        ] })
+      ] }),
+      onCheckout && /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: onCheckout,
+          className: "mt-4 w-full rounded-lg bg-accent px-4 py-2.5 text-sm font-semibold text-accent-fg transition-colors hover:bg-accent-hover focus:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2",
+          children: checkoutLabel
+        }
+      )
+    ] })
+  ] });
+}
 var NotificationContext = React19.createContext({
   open: () => void 0,
   close: () => void 0
@@ -5827,7 +5902,7 @@ function addMonths2(d, n) {
   c.setMonth(c.getMonth() + n);
   return c;
 }
-function defaultFormat(d) {
+function defaultFormat2(d) {
   const y = d.getFullYear().toString().padStart(4, "0");
   const m = (d.getMonth() + 1).toString().padStart(2, "0");
   const day = d.getDate().toString().padStart(2, "0");
@@ -5861,7 +5936,7 @@ function DatePicker({
   min,
   max,
   style,
-  format = defaultFormat,
+  format = defaultFormat2,
   weekStartsOn = 0,
   clearable = true,
   size = "md",
@@ -5883,7 +5958,7 @@ function DatePicker({
   }, [open, value]);
   React19.useEffect(() => {
     if (!open) return;
-    const cell = gridRef.current?.querySelector(`[data-day="${defaultFormat(focusDate)}"]`);
+    const cell = gridRef.current?.querySelector(`[data-day="${defaultFormat2(focusDate)}"]`);
     cell?.focus();
   }, [open, focusDate]);
   const weekdays = React19.useMemo(() => {
@@ -6095,8 +6170,8 @@ function DatePicker({
                           type: "button",
                           disabled: dis,
                           tabIndex: focused ? 0 : -1,
-                          "data-day": defaultFormat(date),
-                          "aria-label": defaultFormat(date),
+                          "data-day": defaultFormat2(date),
+                          "aria-label": defaultFormat2(date),
                           "aria-selected": sel || void 0,
                           onClick: () => selectDate(date),
                           className: [
@@ -6107,7 +6182,7 @@ function DatePicker({
                           ].join(" "),
                           children: date.getDate()
                         }
-                      ) }, defaultFormat(date));
+                      ) }, defaultFormat2(date));
                     }) }, ri)) })
                   ]
                 }
@@ -7881,6 +7956,7 @@ exports.CARD_BRANDS = CARD_BRANDS;
 exports.Calendar = Calendar2;
 exports.Card = Card_default;
 exports.CardCarousel = CardCarousel;
+exports.Cart = Cart;
 exports.Catalog = Catalog;
 exports.CatalogCarousel = CatalogCarousel;
 exports.CatalogGrid = CatalogGrid;