@crisp-ui-kit/crisp 0.10.1 → 0.11.0

package/dist/cjs/components/quantitypicker/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./quantitypicker"), exports);
+__exportStar(require("./quantitypicker.recipe"), exports);

package/dist/cjs/components/quantitypicker/quantitypicker.js

@@ -0,0 +1,62 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.QuantityPicker = QuantityPicker;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_quantity_picker_1 = require("@seed-design/react-quantity-picker");
+const lucide_react_1 = require("lucide-react");
+const spinner_1 = require("../spinner");
+const quantitypicker_recipe_1 = require("./quantitypicker.recipe");
+/** seed's icon box per size, read from their stylesheet. */
+const ICON = { small: 16, medium: 18, large: 22 };
+/**
+ * The value, as a grid with a hidden copy of the LARGEST value stacked
+ * underneath it. Without that the control gets wider at 10 and wider again at
+ * 100, and a row of them stops lining up. `max` is the right placeholder
+ * because it is the widest the value can ever be, and it is run through
+ * `getValueText` so a formatted value reserves the width of its formatting.
+ */
+function Value() {
+    // `QuantityPickerValueDisplay` renders the value as its own children and its
+    // props type OMITS `children`, so the two-cell grid cannot go through it.
+    // Taking `valueDisplayProps` directly keeps every attribute the engine puts
+    // there — aria-live, aria-atomic, the data-state flags — and keeps the
+    // rendered text the engine's own rather than a second derivation of it.
+    const { max, getValueText, valueDisplayProps } = (0, react_quantity_picker_1.useQuantityPickerContext)();
+    const { children: valueText, ...displayProps } = valueDisplayProps;
+    return ((0, jsx_runtime_1.jsxs)("span", { ...displayProps, className: "quantitypicker-value", children: [(0, jsx_runtime_1.jsx)("span", { className: "quantitypicker-placeholder", "aria-hidden": "true", children: getValueText(String(max), max) }), (0, jsx_runtime_1.jsx)("span", { className: "quantitypicker-text", children: valueText })] }));
+}
+function DecrementIcon({ size }) {
+    const { isRemoveButton, decrementLoading } = (0, react_quantity_picker_1.useQuantityPickerContext)();
+    if (decrementLoading)
+        return (0, jsx_runtime_1.jsx)(spinner_1.Spinner, { size: ICON[size] });
+    const Icon = isRemoveButton ? lucide_react_1.Trash2 : lucide_react_1.Minus;
+    return (0, jsx_runtime_1.jsx)(Icon, { size: ICON[size], strokeWidth: 2 });
+}
+function IncrementIcon({ size }) {
+    const { incrementLoading } = (0, react_quantity_picker_1.useQuantityPickerContext)();
+    if (incrementLoading)
+        return (0, jsx_runtime_1.jsx)(spinner_1.Spinner, { size: ICON[size] });
+    return (0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: ICON[size], strokeWidth: 2 });
+}
+/**
+ * A quantity stepper, driven by seed-design's headless engine so the clamping,
+ * the step arithmetic, the per-button loading state and the `removable` mode —
+ * where decrementing at the minimum becomes "remove this line" rather than a
+ * dead button — are theirs by construction.
+ *
+ * Two things are crisp's:
+ *
+ * The buttons carry accessible names. The engine labels the minus button only
+ * in remove mode, so a plain stepper would ship two buttons whose entire
+ * content is an SVG and whose accessible name is empty.
+ *
+ * `dir` is worth passing explicitly. The engine defaults it to `"ltr"` and
+ * stamps that on the root, which overrides an inherited RTL — the same trap
+ * Slider documents. Here it also decides child ORDER, since the engine
+ * reverses its visible children rather than relying on CSS.
+ */
+function QuantityPicker({ size = "medium", fill = false, className, name, decrementLabel = "Decrease quantity", incrementLabel = "Increase quantity", ...props }) {
+    return ((0, jsx_runtime_1.jsxs)(react_quantity_picker_1.QuantityPickerRoot, { ...props, className: (0, quantitypicker_recipe_1.quantitypickerRecipe)({ size, fill, className }), children: [(0, jsx_runtime_1.jsx)(react_quantity_picker_1.QuantityPickerDecrementButton, { className: "quantitypicker-button", "aria-label": decrementLabel, children: (0, jsx_runtime_1.jsx)(DecrementIcon, { size: size }) }), (0, jsx_runtime_1.jsx)("span", { className: "quantitypicker-divider" }), (0, jsx_runtime_1.jsx)(Value, {}), (0, jsx_runtime_1.jsx)("span", { className: "quantitypicker-divider" }), (0, jsx_runtime_1.jsx)(react_quantity_picker_1.QuantityPickerIncrementButton, { className: "quantitypicker-button", "aria-label": incrementLabel, children: (0, jsx_runtime_1.jsx)(IncrementIcon, { size: size }) }), name ? (0, jsx_runtime_1.jsx)(react_quantity_picker_1.QuantityPickerHiddenInput, { name: name }) : null] }));
+}
+QuantityPicker.displayName = "QuantityPicker";

package/dist/cjs/components/quantitypicker/quantitypicker.recipe.js

@@ -0,0 +1,114 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.quantitypickerRecipe = void 0;
+const core_1 = require("../../core");
+const tokens_1 = require("../../tokens");
+// seed-design's quantity-picker, shape for shape, in crisp's colours.
+//
+// Attio has no stepper — its quantity-ish fields are plain number inputs — so
+// as with Slider there is nothing of Attio's to measure and the GEOMETRY is
+// seed's own, read from `@seed-design/css/recipes/quantity-picker.css`:
+//
+//   size    root height / button square   radius   icon   text
+//   small   36px  (x9)                    8px (r2) 16px   16/22 (t5)
+//   medium  40px  (x10)                   8px (r2) 18px   16/22 (t5)
+//   large   52px  (x13)                   12px (r3) 22px  18/24 (t6)
+//
+// plus an 8px (x2) inline padding on the value, a 1x16 (x4) divider, a 1px
+// inset ring that thickens to 2px when invalid, and a 2px focus ring offset
+// 2px. 16px is crisp's `text.xl`; 18/24 has no crisp token and is written as a
+// literal, the way EmptyState's 20px title is.
+//
+// Only the COLOUR roles are re-pointed at crisp's tokens:
+//   seed bg-layer-default        -> bgSurface
+//   seed stroke-neutral-weak     -> borderDefault      (the 1px ring)
+//   seed stroke-critical-solid   -> bgDanger           (as Input/Textarea use when invalid)
+//   seed stroke-neutral-subtle   -> borderSubtle       (the divider)
+//   seed bg-transparent-pressed  -> bgRaised           (as Button's ghost hover)
+//   seed fg-neutral / fg-disabled-> fgPrimary / fgDisabled
+//
+// Two things in seed's stylesheet are deliberately NOT copied. Their pressed
+// `scale: var(--seed-feedback-scale)` resolves to 1 in the shipped CSS, so it
+// is a no-op to transliterate. And their hover is split across
+// `@media (hover: hover) and (pointer: fine)` / `@media not all and (...)`; no
+// crisp recipe contains an `@media` at all, and neither `build.mjs`'s
+// flattener nor `emit-lynx.mjs` has ever been run against one, so this uses
+// the plain `:hover` every other crisp component uses.
+//
+// The value is a GRID with a hidden placeholder stacked on the text in the
+// same cell. That is what keeps the control from resizing as the number goes
+// 9 -> 10, and it is the detail a hand-built stepper always misses.
+const config = (0, core_1.defineRecipe)({
+    name: "quantitypicker",
+    base: `
+    display: inline-flex; box-sizing: border-box; width: fit-content;
+    align-items: center; font-family: ${tokens_1.contract.font.sans};
+    background: ${tokens_1.contract.bgSurface}; box-shadow: inset 0 0 0 1px ${tokens_1.contract.borderDefault};
+
+    &[data-invalid] { box-shadow: inset 0 0 0 2px ${tokens_1.contract.bgDanger}; }
+
+    & .quantitypicker-button {
+      display: inline-flex; flex-shrink: 0; box-sizing: border-box;
+      align-items: center; justify-content: center;
+      border: none; padding: 0; cursor: pointer;
+      background: transparent; color: ${tokens_1.contract.fgPrimary};
+      transition: background-color .15s ease, outline-color .15s ease;
+      outline: 2px solid transparent; outline-offset: 2px;
+    }
+    & .quantitypicker-button:focus-visible { outline-color: ${tokens_1.contract.strokeFocusRing}; }
+    & .quantitypicker-button:not([data-disabled]):hover { background: ${tokens_1.contract.bgRaised}; }
+    & .quantitypicker-button[data-loading] { background: ${tokens_1.contract.bgRaised}; }
+    & .quantitypicker-button[data-disabled] { cursor: not-allowed; color: ${tokens_1.contract.fgDisabled}; }
+
+    & .quantitypicker-value {
+      display: grid; flex-grow: 1; flex-shrink: 0; box-sizing: border-box;
+      align-items: center; justify-content: center;
+      padding-inline: ${tokens_1.contract.space["2"]};
+      font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgPrimary};
+    }
+    & .quantitypicker-value[data-disabled] { color: ${tokens_1.contract.fgDisabled}; }
+    & .quantitypicker-placeholder {
+      grid-column: 1; grid-row: 1; visibility: hidden;
+      font-variant-numeric: tabular-nums;
+    }
+    & .quantitypicker-text {
+      grid-column: 1; grid-row: 1; text-align: center;
+      font-variant-numeric: tabular-nums;
+    }
+
+    & .quantitypicker-divider {
+      flex-shrink: 0; width: 1px; height: ${tokens_1.contract.space["4"]};
+      background: ${tokens_1.contract.borderSubtle};
+    }
+  `,
+    variants: {
+        size: {
+            small: `
+        height: 36px; border-radius: ${tokens_1.contract.radius.md};
+        & .quantitypicker-button { width: 36px; height: 36px; border-radius: ${tokens_1.contract.radius.md}; }
+        & .quantitypicker-value { font-size: ${tokens_1.contract.text.xl}; line-height: 22px; }
+      `,
+            medium: `
+        height: 40px; border-radius: ${tokens_1.contract.radius.md};
+        & .quantitypicker-button { width: 40px; height: 40px; border-radius: ${tokens_1.contract.radius.md}; }
+        & .quantitypicker-value { font-size: ${tokens_1.contract.text.xl}; line-height: 22px; }
+      `,
+            large: `
+        height: 52px; border-radius: ${tokens_1.contract.radius.xl};
+        & .quantitypicker-button { width: 52px; height: 52px; border-radius: ${tokens_1.contract.radius.xl}; }
+        & .quantitypicker-value { font-size: 18px; line-height: 24px; }
+      `,
+        },
+        /** `fill` stretches to the row it sits in; seed's `layout_fill`. */
+        fill: {
+            true: `width: auto; flex-grow: 1;`,
+            false: ``,
+        },
+    },
+    defaultVariants: { size: "medium", fill: false },
+    compoundVariants: [],
+});
+exports.quantitypickerRecipe = Object.assign((0, core_1.resolveRecipe)(config), {
+    config,
+});
+exports.default = config;

package/dist/cjs/index.js

@@ -49,6 +49,7 @@ __exportStar(require("./components/middletruncate"), exports);
 __exportStar(require("./components/multiselect"), exports);
 __exportStar(require("./components/popover"), exports);
 __exportStar(require("./components/progress"), exports);
+__exportStar(require("./components/quantitypicker"), exports);
 __exportStar(require("./components/radiogroup"), exports);
 __exportStar(require("./components/resizablepanel"), exports);
 __exportStar(require("./components/segmented"), exports);

package/dist/esm/components/quantitypicker/index.js

@@ -0,0 +1,2 @@
+export * from "./quantitypicker.js";
+export * from "./quantitypicker.recipe.js";

package/dist/esm/components/quantitypicker/quantitypicker.js

@@ -0,0 +1,59 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { QuantityPickerDecrementButton, QuantityPickerHiddenInput, QuantityPickerIncrementButton, QuantityPickerRoot, useQuantityPickerContext, } from "@seed-design/react-quantity-picker";
+import { Minus, Plus, Trash2 } from "lucide-react";
+import { Spinner } from "../spinner/index.js";
+import { quantitypickerRecipe } from "./quantitypicker.recipe.js";
+/** seed's icon box per size, read from their stylesheet. */
+const ICON = { small: 16, medium: 18, large: 22 };
+/**
+ * The value, as a grid with a hidden copy of the LARGEST value stacked
+ * underneath it. Without that the control gets wider at 10 and wider again at
+ * 100, and a row of them stops lining up. `max` is the right placeholder
+ * because it is the widest the value can ever be, and it is run through
+ * `getValueText` so a formatted value reserves the width of its formatting.
+ */
+function Value() {
+    // `QuantityPickerValueDisplay` renders the value as its own children and its
+    // props type OMITS `children`, so the two-cell grid cannot go through it.
+    // Taking `valueDisplayProps` directly keeps every attribute the engine puts
+    // there — aria-live, aria-atomic, the data-state flags — and keeps the
+    // rendered text the engine's own rather than a second derivation of it.
+    const { max, getValueText, valueDisplayProps } = useQuantityPickerContext();
+    const { children: valueText, ...displayProps } = valueDisplayProps;
+    return (_jsxs("span", { ...displayProps, className: "quantitypicker-value", children: [_jsx("span", { className: "quantitypicker-placeholder", "aria-hidden": "true", children: getValueText(String(max), max) }), _jsx("span", { className: "quantitypicker-text", children: valueText })] }));
+}
+function DecrementIcon({ size }) {
+    const { isRemoveButton, decrementLoading } = useQuantityPickerContext();
+    if (decrementLoading)
+        return _jsx(Spinner, { size: ICON[size] });
+    const Icon = isRemoveButton ? Trash2 : Minus;
+    return _jsx(Icon, { size: ICON[size], strokeWidth: 2 });
+}
+function IncrementIcon({ size }) {
+    const { incrementLoading } = useQuantityPickerContext();
+    if (incrementLoading)
+        return _jsx(Spinner, { size: ICON[size] });
+    return _jsx(Plus, { size: ICON[size], strokeWidth: 2 });
+}
+/**
+ * A quantity stepper, driven by seed-design's headless engine so the clamping,
+ * the step arithmetic, the per-button loading state and the `removable` mode —
+ * where decrementing at the minimum becomes "remove this line" rather than a
+ * dead button — are theirs by construction.
+ *
+ * Two things are crisp's:
+ *
+ * The buttons carry accessible names. The engine labels the minus button only
+ * in remove mode, so a plain stepper would ship two buttons whose entire
+ * content is an SVG and whose accessible name is empty.
+ *
+ * `dir` is worth passing explicitly. The engine defaults it to `"ltr"` and
+ * stamps that on the root, which overrides an inherited RTL — the same trap
+ * Slider documents. Here it also decides child ORDER, since the engine
+ * reverses its visible children rather than relying on CSS.
+ */
+export function QuantityPicker({ size = "medium", fill = false, className, name, decrementLabel = "Decrease quantity", incrementLabel = "Increase quantity", ...props }) {
+    return (_jsxs(QuantityPickerRoot, { ...props, className: quantitypickerRecipe({ size, fill, className }), children: [_jsx(QuantityPickerDecrementButton, { className: "quantitypicker-button", "aria-label": decrementLabel, children: _jsx(DecrementIcon, { size: size }) }), _jsx("span", { className: "quantitypicker-divider" }), _jsx(Value, {}), _jsx("span", { className: "quantitypicker-divider" }), _jsx(QuantityPickerIncrementButton, { className: "quantitypicker-button", "aria-label": incrementLabel, children: _jsx(IncrementIcon, { size: size }) }), name ? _jsx(QuantityPickerHiddenInput, { name: name }) : null] }));
+}
+QuantityPicker.displayName = "QuantityPicker";

package/dist/esm/components/quantitypicker/quantitypicker.recipe.js

@@ -0,0 +1,111 @@
+import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { contract as c } from "../../tokens/index.js";
+// seed-design's quantity-picker, shape for shape, in crisp's colours.
+//
+// Attio has no stepper — its quantity-ish fields are plain number inputs — so
+// as with Slider there is nothing of Attio's to measure and the GEOMETRY is
+// seed's own, read from `@seed-design/css/recipes/quantity-picker.css`:
+//
+//   size    root height / button square   radius   icon   text
+//   small   36px  (x9)                    8px (r2) 16px   16/22 (t5)
+//   medium  40px  (x10)                   8px (r2) 18px   16/22 (t5)
+//   large   52px  (x13)                   12px (r3) 22px  18/24 (t6)
+//
+// plus an 8px (x2) inline padding on the value, a 1x16 (x4) divider, a 1px
+// inset ring that thickens to 2px when invalid, and a 2px focus ring offset
+// 2px. 16px is crisp's `text.xl`; 18/24 has no crisp token and is written as a
+// literal, the way EmptyState's 20px title is.
+//
+// Only the COLOUR roles are re-pointed at crisp's tokens:
+//   seed bg-layer-default        -> bgSurface
+//   seed stroke-neutral-weak     -> borderDefault      (the 1px ring)
+//   seed stroke-critical-solid   -> bgDanger           (as Input/Textarea use when invalid)
+//   seed stroke-neutral-subtle   -> borderSubtle       (the divider)
+//   seed bg-transparent-pressed  -> bgRaised           (as Button's ghost hover)
+//   seed fg-neutral / fg-disabled-> fgPrimary / fgDisabled
+//
+// Two things in seed's stylesheet are deliberately NOT copied. Their pressed
+// `scale: var(--seed-feedback-scale)` resolves to 1 in the shipped CSS, so it
+// is a no-op to transliterate. And their hover is split across
+// `@media (hover: hover) and (pointer: fine)` / `@media not all and (...)`; no
+// crisp recipe contains an `@media` at all, and neither `build.mjs`'s
+// flattener nor `emit-lynx.mjs` has ever been run against one, so this uses
+// the plain `:hover` every other crisp component uses.
+//
+// The value is a GRID with a hidden placeholder stacked on the text in the
+// same cell. That is what keeps the control from resizing as the number goes
+// 9 -> 10, and it is the detail a hand-built stepper always misses.
+const config = defineRecipe({
+    name: "quantitypicker",
+    base: `
+    display: inline-flex; box-sizing: border-box; width: fit-content;
+    align-items: center; font-family: ${c.font.sans};
+    background: ${c.bgSurface}; box-shadow: inset 0 0 0 1px ${c.borderDefault};
+
+    &[data-invalid] { box-shadow: inset 0 0 0 2px ${c.bgDanger}; }
+
+    & .quantitypicker-button {
+      display: inline-flex; flex-shrink: 0; box-sizing: border-box;
+      align-items: center; justify-content: center;
+      border: none; padding: 0; cursor: pointer;
+      background: transparent; color: ${c.fgPrimary};
+      transition: background-color .15s ease, outline-color .15s ease;
+      outline: 2px solid transparent; outline-offset: 2px;
+    }
+    & .quantitypicker-button:focus-visible { outline-color: ${c.strokeFocusRing}; }
+    & .quantitypicker-button:not([data-disabled]):hover { background: ${c.bgRaised}; }
+    & .quantitypicker-button[data-loading] { background: ${c.bgRaised}; }
+    & .quantitypicker-button[data-disabled] { cursor: not-allowed; color: ${c.fgDisabled}; }
+
+    & .quantitypicker-value {
+      display: grid; flex-grow: 1; flex-shrink: 0; box-sizing: border-box;
+      align-items: center; justify-content: center;
+      padding-inline: ${c.space["2"]};
+      font-weight: ${c.weight.medium}; color: ${c.fgPrimary};
+    }
+    & .quantitypicker-value[data-disabled] { color: ${c.fgDisabled}; }
+    & .quantitypicker-placeholder {
+      grid-column: 1; grid-row: 1; visibility: hidden;
+      font-variant-numeric: tabular-nums;
+    }
+    & .quantitypicker-text {
+      grid-column: 1; grid-row: 1; text-align: center;
+      font-variant-numeric: tabular-nums;
+    }
+
+    & .quantitypicker-divider {
+      flex-shrink: 0; width: 1px; height: ${c.space["4"]};
+      background: ${c.borderSubtle};
+    }
+  `,
+    variants: {
+        size: {
+            small: `
+        height: 36px; border-radius: ${c.radius.md};
+        & .quantitypicker-button { width: 36px; height: 36px; border-radius: ${c.radius.md}; }
+        & .quantitypicker-value { font-size: ${c.text.xl}; line-height: 22px; }
+      `,
+            medium: `
+        height: 40px; border-radius: ${c.radius.md};
+        & .quantitypicker-button { width: 40px; height: 40px; border-radius: ${c.radius.md}; }
+        & .quantitypicker-value { font-size: ${c.text.xl}; line-height: 22px; }
+      `,
+            large: `
+        height: 52px; border-radius: ${c.radius.xl};
+        & .quantitypicker-button { width: 52px; height: 52px; border-radius: ${c.radius.xl}; }
+        & .quantitypicker-value { font-size: 18px; line-height: 24px; }
+      `,
+        },
+        /** `fill` stretches to the row it sits in; seed's `layout_fill`. */
+        fill: {
+            true: `width: auto; flex-grow: 1;`,
+            false: ``,
+        },
+    },
+    defaultVariants: { size: "medium", fill: false },
+    compoundVariants: [],
+});
+export const quantitypickerRecipe = Object.assign(resolveRecipe(config), {
+    config,
+});
+export default config;

package/dist/esm/index.js

@@ -33,6 +33,7 @@ export * from "./components/middletruncate/index.js";
 export * from "./components/multiselect/index.js";
 export * from "./components/popover/index.js";
 export * from "./components/progress/index.js";
+export * from "./components/quantitypicker/index.js";
 export * from "./components/radiogroup/index.js";
 export * from "./components/resizablepanel/index.js";
 export * from "./components/segmented/index.js";

package/dist/quantitypicker.css

@@ -0,0 +1,78 @@
+.quantitypicker {
+  
+    display: inline-flex; box-sizing: border-box; width: fit-content;
+    align-items: center; font-family: var(--font-sans);
+    background: var(--bg-surface); box-shadow: inset 0 0 0 1px var(--border-default);
+
+    &[data-invalid] { box-shadow: inset 0 0 0 2px var(--bg-danger); }
+
+    & .quantitypicker-button {
+      display: inline-flex; flex-shrink: 0; box-sizing: border-box;
+      align-items: center; justify-content: center;
+      border: none; padding: 0; cursor: pointer;
+      background: transparent; color: var(--fg-primary);
+      transition: background-color .15s ease, outline-color .15s ease;
+      outline: 2px solid transparent; outline-offset: 2px;
+    }
+    & .quantitypicker-button:focus-visible { outline-color: var(--stroke-focus-ring); }
+    & .quantitypicker-button:not([data-disabled]):hover { background: var(--bg-raised); }
+    & .quantitypicker-button[data-loading] { background: var(--bg-raised); }
+    & .quantitypicker-button[data-disabled] { cursor: not-allowed; color: var(--fg-disabled); }
+
+    & .quantitypicker-value {
+      display: grid; flex-grow: 1; flex-shrink: 0; box-sizing: border-box;
+      align-items: center; justify-content: center;
+      padding-inline: var(--space-2);
+      font-weight: var(--weight-medium); color: var(--fg-primary);
+    }
+    & .quantitypicker-value[data-disabled] { color: var(--fg-disabled); }
+    & .quantitypicker-placeholder {
+      grid-column: 1; grid-row: 1; visibility: hidden;
+      font-variant-numeric: tabular-nums;
+    }
+    & .quantitypicker-text {
+      grid-column: 1; grid-row: 1; text-align: center;
+      font-variant-numeric: tabular-nums;
+    }
+
+    & .quantitypicker-divider {
+      flex-shrink: 0; width: 1px; height: var(--space-4);
+      background: var(--border-subtle);
+    }
+  
+}
+.quantitypicker--size_small {
+  
+        height: 36px; border-radius: var(--radius-md);
+        & .quantitypicker-button { width: 36px; height: 36px; border-radius: var(--radius-md); }
+        & .quantitypicker-value { font-size: var(--text-xl); line-height: 22px; }
+      
+}
+.quantitypicker--size_medium {
+  
+        height: 40px; border-radius: var(--radius-md);
+        & .quantitypicker-button { width: 40px; height: 40px; border-radius: var(--radius-md); }
+        & .quantitypicker-value { font-size: var(--text-xl); line-height: 22px; }
+      
+}
+.quantitypicker--size_large {
+  
+        height: 52px; border-radius: var(--radius-xl);
+        & .quantitypicker-button { width: 52px; height: 52px; border-radius: var(--radius-xl); }
+        & .quantitypicker-value { font-size: 18px; line-height: 24px; }
+      
+}
+.quantitypicker--fill_true {
+  width: auto; flex-grow: 1;
+}
+.quantitypicker--fill_false {
+  
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .quantitypicker, .quantitypicker * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}

package/dist/quantitypicker.d.ts

@@ -0,0 +1,8 @@
+import type { RecipeFn } from "../core/types";
+
+export interface QuantitypickerVariants {
+  size?: "small" | "medium" | "large";
+  fill?: boolean;
+}
+
+export declare const quantitypickerRecipe: RecipeFn<{ size: { small: string; medium: string; large: string }; fill: { true: string; false: string } }>;

package/dist/styles.css

@@ -1175,6 +1175,85 @@
   }
 }
 
+.quantitypicker {
+  
+    display: inline-flex; box-sizing: border-box; width: fit-content;
+    align-items: center; font-family: var(--font-sans);
+    background: var(--bg-surface); box-shadow: inset 0 0 0 1px var(--border-default);
+
+    &[data-invalid] { box-shadow: inset 0 0 0 2px var(--bg-danger); }
+
+    & .quantitypicker-button {
+      display: inline-flex; flex-shrink: 0; box-sizing: border-box;
+      align-items: center; justify-content: center;
+      border: none; padding: 0; cursor: pointer;
+      background: transparent; color: var(--fg-primary);
+      transition: background-color .15s ease, outline-color .15s ease;
+      outline: 2px solid transparent; outline-offset: 2px;
+    }
+    & .quantitypicker-button:focus-visible { outline-color: var(--stroke-focus-ring); }
+    & .quantitypicker-button:not([data-disabled]):hover { background: var(--bg-raised); }
+    & .quantitypicker-button[data-loading] { background: var(--bg-raised); }
+    & .quantitypicker-button[data-disabled] { cursor: not-allowed; color: var(--fg-disabled); }
+
+    & .quantitypicker-value {
+      display: grid; flex-grow: 1; flex-shrink: 0; box-sizing: border-box;
+      align-items: center; justify-content: center;
+      padding-inline: var(--space-2);
+      font-weight: var(--weight-medium); color: var(--fg-primary);
+    }
+    & .quantitypicker-value[data-disabled] { color: var(--fg-disabled); }
+    & .quantitypicker-placeholder {
+      grid-column: 1; grid-row: 1; visibility: hidden;
+      font-variant-numeric: tabular-nums;
+    }
+    & .quantitypicker-text {
+      grid-column: 1; grid-row: 1; text-align: center;
+      font-variant-numeric: tabular-nums;
+    }
+
+    & .quantitypicker-divider {
+      flex-shrink: 0; width: 1px; height: var(--space-4);
+      background: var(--border-subtle);
+    }
+  
+}
+.quantitypicker--size_small {
+  
+        height: 36px; border-radius: var(--radius-md);
+        & .quantitypicker-button { width: 36px; height: 36px; border-radius: var(--radius-md); }
+        & .quantitypicker-value { font-size: var(--text-xl); line-height: 22px; }
+      
+}
+.quantitypicker--size_medium {
+  
+        height: 40px; border-radius: var(--radius-md);
+        & .quantitypicker-button { width: 40px; height: 40px; border-radius: var(--radius-md); }
+        & .quantitypicker-value { font-size: var(--text-xl); line-height: 22px; }
+      
+}
+.quantitypicker--size_large {
+  
+        height: 52px; border-radius: var(--radius-xl);
+        & .quantitypicker-button { width: 52px; height: 52px; border-radius: var(--radius-xl); }
+        & .quantitypicker-value { font-size: 18px; line-height: 24px; }
+      
+}
+.quantitypicker--fill_true {
+  width: auto; flex-grow: 1;
+}
+.quantitypicker--fill_false {
+  
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .quantitypicker, .quantitypicker * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
 .radiogroup {
   
     display: flex; flex-direction: column; gap: var(--space-1); font-family: var(--font-sans);

package/dist/types/components/quantitypicker/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./quantitypicker";
+export * from "./quantitypicker.recipe";

package/dist/types/components/quantitypicker/quantitypicker.d.ts

@@ -0,0 +1,43 @@
+import { type QuantityPickerRootProps } from "@seed-design/react-quantity-picker";
+/** seed's icon box per size, read from their stylesheet. */
+declare const ICON: {
+    readonly small: 16;
+    readonly medium: 18;
+    readonly large: 22;
+};
+export type QuantityPickerSize = keyof typeof ICON;
+export type QuantityPickerProps = QuantityPickerRootProps & {
+    /** 36 / 40 / 52px tall. Default `medium`. */
+    size?: QuantityPickerSize;
+    /** Stretch to the row rather than sizing to content. */
+    fill?: boolean;
+    /** Renders a hidden input under this name, so the value submits with a form. */
+    name?: string;
+    /** Accessible name for the minus button. Not used in remove mode — the
+     *  engine substitutes `removeAriaLabel` there. */
+    decrementLabel?: string;
+    /** Accessible name for the plus button. */
+    incrementLabel?: string;
+};
+/**
+ * A quantity stepper, driven by seed-design's headless engine so the clamping,
+ * the step arithmetic, the per-button loading state and the `removable` mode —
+ * where decrementing at the minimum becomes "remove this line" rather than a
+ * dead button — are theirs by construction.
+ *
+ * Two things are crisp's:
+ *
+ * The buttons carry accessible names. The engine labels the minus button only
+ * in remove mode, so a plain stepper would ship two buttons whose entire
+ * content is an SVG and whose accessible name is empty.
+ *
+ * `dir` is worth passing explicitly. The engine defaults it to `"ltr"` and
+ * stamps that on the root, which overrides an inherited RTL — the same trap
+ * Slider documents. Here it also decides child ORDER, since the engine
+ * reverses its visible children rather than relying on CSS.
+ */
+export declare function QuantityPicker({ size, fill, className, name, decrementLabel, incrementLabel, ...props }: QuantityPickerProps): import("react").JSX.Element;
+export declare namespace QuantityPicker {
+    var displayName: string;
+}
+export {};

package/dist/types/components/quantitypicker/quantitypicker.recipe.d.ts

@@ -0,0 +1,38 @@
+declare const config: import("../..").RecipeConfig<{
+    size: {
+        small: string;
+        medium: string;
+        large: string;
+    };
+    /** `fill` stretches to the row it sits in; seed's `layout_fill`. */
+    fill: {
+        true: string;
+        false: string;
+    };
+}>;
+export declare const quantitypickerRecipe: import("../..").RecipeFn<{
+    size: {
+        small: string;
+        medium: string;
+        large: string;
+    };
+    /** `fill` stretches to the row it sits in; seed's `layout_fill`. */
+    fill: {
+        true: string;
+        false: string;
+    };
+}> & {
+    config: import("../..").RecipeConfig<{
+        size: {
+            small: string;
+            medium: string;
+            large: string;
+        };
+        /** `fill` stretches to the row it sits in; seed's `layout_fill`. */
+        fill: {
+            true: string;
+            false: string;
+        };
+    }>;
+};
+export default config;

package/dist/types/index.d.ts

@@ -29,6 +29,7 @@ export * from "./components/middletruncate";
 export * from "./components/multiselect";
 export * from "./components/popover";
 export * from "./components/progress";
+export * from "./components/quantitypicker";
 export * from "./components/radiogroup";
 export * from "./components/resizablepanel";
 export * from "./components/segmented";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crisp-ui-kit/crisp",
-  "version": "0.10.1",
+  "version": "0.11.0",
   "description": "A lean React design system, measured pixel-for-pixel from Attio.",
   "license": "MIT",
   "type": "module",
@@ -187,6 +187,11 @@
       "import": "./dist/esm/components/progress/index.js",
       "require": "./dist/cjs/components/progress/index.js"
     },
+    "./quantitypicker": {
+      "types": "./dist/types/components/quantitypicker/index.d.ts",
+      "import": "./dist/esm/components/quantitypicker/index.js",
+      "require": "./dist/cjs/components/quantitypicker/index.js"
+    },
     "./radiogroup": {
       "types": "./dist/types/components/radiogroup/index.d.ts",
       "import": "./dist/esm/components/radiogroup/index.js",
@@ -412,6 +417,7 @@
     "test": "bun test",
     "spec": "bun build/spec-check.mjs",
     "lynx": "bun build/lynx-lint.mjs",
+    "lynx:emit": "bun build/emit-lynx.mjs",
     "ssr": "bun scripts/ssr-check.tsx",
     "contrast": "bun scripts/contrast-page.tsx",
     "build:esm": "tsc -p tsconfig.esm.json && bun scripts/fix-esm-extensions.mjs",
@@ -429,6 +435,7 @@
     "@seed-design/react-date-picker": "1.2.0",
     "@seed-design/react-file-upload": "1.0.1",
     "@seed-design/react-middle-truncate": "1.0.1",
+    "@seed-design/react-quantity-picker": "1.0.0",
     "@seed-design/react-slider": "2.0.1",
     "@seed-design/react-time-picker": "1.0.0",
     "@zag-js/combobox": "^1.43.3",