@planetaexo/design-system 0.12.7 → 0.13.0

package/dist/index.cjs

@@ -1342,16 +1342,22 @@ function AdventureCard({ adventure }) {
       ] }),
       adventure.optionals && adventure.optionals.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-2 rounded-xl border border-border bg-muted/30 p-4 flex flex-col gap-3", children: [
         /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[10px] font-bold text-muted-foreground font-heading uppercase tracking-widest", children: "Available optionals" }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-2", children: adventure.optionals.map((opt) => /* @__PURE__ */ jsxRuntime.jsxs(
-          "label",
-          {
-            className: "flex items-center gap-3 cursor-pointer group",
-            children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-2", children: adventure.optionals.map((opt) => {
+          var _a2, _b2, _c2, _d2, _e2;
+          const checked = isChecked(opt);
+          const minQty = (_a2 = opt.minQuantity) != null ? _a2 : 1;
+          const maxQty = (_b2 = opt.maxQuantity) != null ? _b2 : 50;
+          const showStepper = checked && opt.showQuantityControl !== false && opt.quantity != null && typeof opt.onQuantityChange === "function";
+          const currentQty = (_c2 = opt.quantity) != null ? _c2 : minQty;
+          const canDec = currentQty > minQty;
+          const canInc = currentQty < maxQty;
+          return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-x-3 gap-y-1.5", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex items-center gap-3 cursor-pointer group", children: [
               /* @__PURE__ */ jsxRuntime.jsx(
                 "input",
                 {
                   type: "checkbox",
-                  checked: isChecked(opt),
+                  checked,
                   onChange: () => toggleOptional(opt),
                   className: "h-4 w-4 shrink-0 rounded border-border accent-primary cursor-pointer"
                 }
@@ -1365,10 +1371,52 @@ function AdventureCard({ adventure }) {
                   ")"
                 ] })
               ] })
-            ]
-          },
-          opt.id
-        )) })
+            ] }),
+            showStepper && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 ml-auto", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => {
+                    var _a3;
+                    return canDec && ((_a3 = opt.onQuantityChange) == null ? void 0 : _a3.call(opt, opt.id, currentQty - 1));
+                  },
+                  disabled: !canDec,
+                  "aria-label": (_d2 = opt.decreaseQuantityLabel) != null ? _d2 : "Decrease quantity",
+                  className: cn(
+                    "h-7 w-7 rounded border border-border flex items-center justify-center text-sm font-semibold",
+                    "transition-colors",
+                    canDec ? "hover:bg-muted cursor-pointer text-foreground" : "opacity-40 cursor-not-allowed text-muted-foreground"
+                  ),
+                  children: "\u2212"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-sans tabular-nums w-6 text-center text-foreground", children: currentQty }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => {
+                    var _a3;
+                    return canInc && ((_a3 = opt.onQuantityChange) == null ? void 0 : _a3.call(opt, opt.id, currentQty + 1));
+                  },
+                  disabled: !canInc,
+                  "aria-label": (_e2 = opt.increaseQuantityLabel) != null ? _e2 : "Increase quantity",
+                  className: cn(
+                    "h-7 w-7 rounded border border-border flex items-center justify-center text-sm font-semibold",
+                    "transition-colors",
+                    canInc ? "hover:bg-muted cursor-pointer text-foreground" : "opacity-40 cursor-not-allowed text-muted-foreground"
+                  ),
+                  children: "+"
+                }
+              )
+            ] }),
+            opt.scheduledAtLabel && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-1 text-xs text-muted-foreground font-sans", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CalendarIcon, { className: "w-3 h-3 text-primary shrink-0" }),
+              opt.scheduledAtLabel
+            ] })
+          ] }, opt.id);
+        }) })
       ] }),
       (adventure.description || adventure.detailsSlot) && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(Separator, { className: "my-1" }),