@mohasinac/appkit 4.23.0 → 4.24.0

package/dist/ui/components/QuantityStepper.d.ts

@@ -0,0 +1,38 @@
+/**
+ * QuantityStepper — the canonical −/+ quantity control.
+ *
+ * There was no primitive for this; the pattern was hand-rolled inside
+ * `CartItemRow` and the grouped-cart-line work needed three more copies, which
+ * is the Rule of Three. Every consumer now shares one set of tokens, one
+ * clamping rule and one a11y contract.
+ *
+ * Deliberately NOT built on `<input type="number">`:
+ *  - it would trip `audit-raw-form-input` (Rule #9), and
+ *  - a free-text numeric field needs its own parse/clamp/validation story on
+ *    every call site. Two buttons cannot produce an out-of-range value.
+ * If typed entry is ever genuinely wanted, it belongs in a `<Form>` with a
+ * `<FieldInput type="number">`, not here.
+ *
+ * `min` is the meaningful variant between the two line kinds:
+ *  - `min={1}` — a normal quantity; you remove the line to get rid of it.
+ *  - `min={0}` — a member inside a group line, where 0 legitimately means
+ *    "drop this member from my selection".
+ */
+import React from "react";
+export interface QuantityStepperProps {
+    value: number;
+    onChange: (next: number) => void;
+    /** Lowest reachable value. See the note above on 0 vs 1. Default 1. */
+    min?: number;
+    /** Highest reachable value — pass the stock ceiling. Omit for unbounded. */
+    max?: number;
+    disabled?: boolean;
+    /** Dims and blocks interaction while a mutation is in flight. */
+    isBusy?: boolean;
+    size?: "sm" | "md";
+    /** Describes WHAT is being counted, e.g. `Quantity for Dragoon F`. */
+    ariaLabel?: string;
+    decrementLabel?: string;
+    incrementLabel?: string;
+}
+export declare function QuantityStepper({ value, onChange, min, max, disabled, isBusy, size, ariaLabel, decrementLabel, incrementLabel, }: QuantityStepperProps): React.JSX.Element;

package/dist/ui/components/QuantityStepper.js

@@ -0,0 +1,20 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from "./Button";
+import { Row } from "./Layout";
+import { Span } from "./Typography";
+export function QuantityStepper({ value, onChange, min = 1, max, disabled = false, isBusy = false, size = "sm", ariaLabel, decrementLabel = "Decrease quantity", incrementLabel = "Increase quantity", }) {
+    const canDecrement = !disabled && value > min;
+    const canIncrement = !disabled && (max === undefined || value < max);
+    // Clamp here rather than trusting the caller: every consumer would otherwise
+    // re-derive the same two bounds checks in its own handler.
+    const step = (delta) => {
+        const next = value + delta;
+        if (next < min)
+            return;
+        if (max !== undefined && next > max)
+            return;
+        onChange(next);
+    };
+    return (_jsxs(Row, { gap: "sm", align: "center", role: "group", "aria-label": ariaLabel, className: `appkit-qty-stepper appkit-qty-stepper--${size}${isBusy ? " appkit-qty-stepper--busy" : ""}`, children: [_jsx(Button, { type: "button", variant: "outline", size: "sm", rounded: "full", onClick: () => step(-1), disabled: !canDecrement, "aria-label": decrementLabel, className: "appkit-qty-stepper__btn", children: "\u2212" }), _jsx(Span, { "aria-live": "polite", className: "appkit-qty-stepper__value", children: value }), _jsx(Button, { type: "button", variant: "outline", size: "sm", rounded: "full", onClick: () => step(1), disabled: !canIncrement, "aria-label": incrementLabel, className: "appkit-qty-stepper__btn", children: "+" })] }));
+}

package/dist/ui/components/QuantityStepper.style.css

@@ -0,0 +1,56 @@
+/* QuantityStepper — the −/+ quantity control.
+ *
+ * All tokens live here rather than on the call site's className. The one
+ * hand-rolled copy this replaced carried `border-neutral-200` (a raw palette
+ * class, not a semantic token) plus an arbitrary `text-[length:...]`, and
+ * copying it to three new call sites would have multiplied that by four. */
+
+.appkit-qty-stepper {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--appkit-space-2);
+}
+
+.appkit-qty-stepper__value {
+  display: inline-block;
+  text-align: center;
+  font-variant-numeric: tabular-nums;
+  color: var(--appkit-color-text);
+}
+
+/* Fixed min-width so the row doesn't reflow as the number crosses 9 -> 10. */
+.appkit-qty-stepper--sm .appkit-qty-stepper__value {
+  min-width: 1.5rem;
+  font-size: var(--appkit-text-sm);
+}
+.appkit-qty-stepper--md .appkit-qty-stepper__value {
+  min-width: 2rem;
+  font-size: var(--appkit-text-base);
+}
+
+.appkit-qty-stepper__btn {
+  justify-content: center;
+  border: 1px solid var(--appkit-color-border);
+  line-height: 1;
+}
+
+.appkit-qty-stepper--sm .appkit-qty-stepper__btn {
+  height: 1.75rem;
+  width: 1.75rem;
+  font-size: var(--appkit-text-sm);
+}
+.appkit-qty-stepper--md .appkit-qty-stepper__btn {
+  height: 2.25rem;
+  width: 2.25rem;
+  font-size: var(--appkit-text-base);
+}
+
+.appkit-qty-stepper__btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.appkit-qty-stepper--busy {
+  opacity: 0.6;
+  pointer-events: none;
+}

package/dist/ui/components/index.style.css

@@ -45,6 +45,7 @@
 @import "./Card.style.css";
 @import "./Avatar.style.css";
 @import "./Toggle.style.css";
+@import "./QuantityStepper.style.css";
 @import "./Checkbox.style.css";
 @import "./EmptyState.style.css";
 @import "./SkipToMain.style.css";

package/dist/ui/index.d.ts

@@ -89,6 +89,8 @@ export type { RadioGroupProps, RadioOption, RadioItemProps } from "./components/
 export { RadioGroup, RadioItem } from "./components/Radio";
 export type { ToggleProps } from "./components/Toggle";
 export { Toggle } from "./components/Toggle";
+export type { QuantityStepperProps } from "./components/QuantityStepper";
+export { QuantityStepper } from "./components/QuantityStepper";
 export type { ToastVariant, ToastPosition, ToastProviderProps, } from "./components/Toast";
 export { ToastProvider, useToast } from "./components/Toast";
 export type { StarRatingProps } from "./components/StarRating";

package/dist/ui/index.js

@@ -47,6 +47,7 @@ export { Slider } from "./components/Slider";
 export { Checkbox } from "./components/Checkbox";
 export { RadioGroup, RadioItem } from "./components/Radio";
 export { Toggle } from "./components/Toggle";
+export { QuantityStepper } from "./components/QuantityStepper";
 export { ToastProvider, useToast } from "./components/Toast";
 export { StarRating } from "./components/StarRating";
 export { Breadcrumb } from "./components/Breadcrumb";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mohasinac/appkit",
-  "version": "4.23.0",
+  "version": "4.24.0",
   "license": "MIT",
   "publishConfig": {
     "access": "public"