@planetaexo/design-system 0.12.7 → 0.13.0

package/dist/index.d.cts

@@ -30,6 +30,26 @@ interface OfferOptionalItem {
     checked?: boolean;
     /** Controlled: chamado ao marcar/desmarcar. Ignorado se `checked` não for passado. */
     onCheckedChange?: (id: string, checked: boolean) => void;
+    /** Quantidade atual (controlled). Quando ausente, o stepper não aparece. */
+    quantity?: number;
+    /** Chamado ao alterar a quantidade via stepper. Necessário para que o stepper apareça. */
+    onQuantityChange?: (id: string, next: number) => void;
+    /**
+     * Esconde explicitamente o stepper mesmo quando `quantity`/`onQuantityChange` estão presentes
+     * (ex.: opcional com billingType=VALOR_TOTAL onde a quantidade não impacta o preço).
+     * Default: `true` (stepper aparece quando `checked && quantity != null`).
+     */
+    showQuantityControl?: boolean;
+    /** Quantidade mínima permitida no stepper. Default: 1. */
+    minQuantity?: number;
+    /** Quantidade máxima permitida no stepper. Default: 50. */
+    maxQuantity?: number;
+    /** Texto pré-formatado da data agendada para exibição read-only (ex.: "10/05/2026"). */
+    scheduledAtLabel?: string;
+    /** aria-label para o botão de decrementar quantidade. Default: "Decrease quantity". */
+    decreaseQuantityLabel?: string;
+    /** aria-label para o botão de incrementar quantidade. Default: "Increase quantity". */
+    increaseQuantityLabel?: string;
 }
 interface OfferAdventureItem {
     id: string;

package/dist/index.d.ts

@@ -30,6 +30,26 @@ interface OfferOptionalItem {
     checked?: boolean;
     /** Controlled: chamado ao marcar/desmarcar. Ignorado se `checked` não for passado. */
     onCheckedChange?: (id: string, checked: boolean) => void;
+    /** Quantidade atual (controlled). Quando ausente, o stepper não aparece. */
+    quantity?: number;
+    /** Chamado ao alterar a quantidade via stepper. Necessário para que o stepper apareça. */
+    onQuantityChange?: (id: string, next: number) => void;
+    /**
+     * Esconde explicitamente o stepper mesmo quando `quantity`/`onQuantityChange` estão presentes
+     * (ex.: opcional com billingType=VALOR_TOTAL onde a quantidade não impacta o preço).
+     * Default: `true` (stepper aparece quando `checked && quantity != null`).
+     */
+    showQuantityControl?: boolean;
+    /** Quantidade mínima permitida no stepper. Default: 1. */
+    minQuantity?: number;
+    /** Quantidade máxima permitida no stepper. Default: 50. */
+    maxQuantity?: number;
+    /** Texto pré-formatado da data agendada para exibição read-only (ex.: "10/05/2026"). */
+    scheduledAtLabel?: string;
+    /** aria-label para o botão de decrementar quantidade. Default: "Decrease quantity". */
+    decreaseQuantityLabel?: string;
+    /** aria-label para o botão de incrementar quantidade. Default: "Increase quantity". */
+    increaseQuantityLabel?: string;
 }
 interface OfferAdventureItem {
     id: string;

package/dist/index.js

@@ -1321,16 +1321,22 @@ function AdventureCard({ adventure }) {
       ] }),
       adventure.optionals && adventure.optionals.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mt-2 rounded-xl border border-border bg-muted/30 p-4 flex flex-col gap-3", children: [
         /* @__PURE__ */ jsx("p", { className: "text-[10px] font-bold text-muted-foreground font-heading uppercase tracking-widest", children: "Available optionals" }),
-        /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: adventure.optionals.map((opt) => /* @__PURE__ */ jsxs(
-          "label",
-          {
-            className: "flex items-center gap-3 cursor-pointer group",
-            children: [
+        /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex flex-wrap items-center gap-x-3 gap-y-1.5", children: [
+            /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-3 cursor-pointer group", children: [
               /* @__PURE__ */ 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"
                 }
@@ -1344,10 +1350,52 @@ function AdventureCard({ adventure }) {
                   ")"
                 ] })
               ] })
-            ]
-          },
-          opt.id
-        )) })
+            ] }),
+            showStepper && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 ml-auto", children: [
+              /* @__PURE__ */ 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__ */ jsx("span", { className: "text-sm font-sans tabular-nums w-6 text-center text-foreground", children: currentQty }),
+              /* @__PURE__ */ 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__ */ jsxs("span", { className: "inline-flex items-center gap-1 text-xs text-muted-foreground font-sans", children: [
+              /* @__PURE__ */ jsx(CalendarIcon, { className: "w-3 h-3 text-primary shrink-0" }),
+              opt.scheduledAtLabel
+            ] })
+          ] }, opt.id);
+        }) })
       ] }),
       (adventure.description || adventure.detailsSlot) && /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(Separator, { className: "my-1" }),