@kolkrabbi/kol-component 0.160.0 → 0.161.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.160.0",
+  "version": "0.161.0",
   "description": "KOL design-system components — atoms through organisms, emitting canonical kol-* classes. Pairs with @kolkrabbi/kol-theme for styling.",
   "license": "MIT",
   "type": "module",

package/src/molecules/Stepper.jsx

@@ -12,6 +12,15 @@
  *   at both ends, and `onChange` reports the option in the same event shape
  *   as the number path — `{ target: { value: option } }`.
  *
+ *   layout="inline" — `‹ value ›` on ONE line (StepperInlineVariant, kol-monitor
+ *   2026-09-02; the rack's Selector shape, the other half of its collapse onto
+ *   this): the chevrons flank the value as left/right hit targets, the value is
+ *   centred in a 3ch floor so the row does not jitter as it steps, and there is
+ *   NO `.kol-control` field chrome — it is inline text on the panel. Value
+ *   `text-fg-64`, chevrons `text-fg-40`, type from the size ladder; casing is the
+ *   caller's. Works for `options` and for the number range alike. Default
+ *   `stacked` is the field with the chevron stack, exactly as before.
+ *
  * Loaded from `00-kol/chevron-{up,down}.svg` via the Icon registry — first
  * stroke icons in the kol curated set. For a plain number input without
  * bump affordance, use `<Input type="number" />`.
@@ -28,6 +37,7 @@ export default function Stepper({
   max,
   step = 1,
   options,
+  layout = 'stacked',
   size = 'sm',
   className = '',
   style = {},
@@ -63,6 +73,23 @@ export default function Stepper({
     onChange?.(e)
   }
 
+  /* INLINE — ‹ value › with no field: the chevrons are the hit targets, the
+   * value is text on the panel. `min-w-[3ch]` holds the width across steps. */
+  if (layout === 'inline') {
+    const chev = CHEVRON_SIZE[size]
+    return (
+      <div className={`inline-flex items-center justify-center gap-0.5 select-none ${SIZE_TYPE[size]} ${className}`.trim()} style={style}>
+        <button type="button" onClick={handleDecrement} className="inline-flex items-center justify-center px-0.5 text-fg-40 hover:text-emphasis transition-colors" aria-label="Previous">
+          <Icon name="chevron-left" size={chev} />
+        </button>
+        <span className="min-w-[3ch] text-center text-fg-64" {...props}>{value ?? ''}</span>
+        <button type="button" onClick={handleIncrement} className="inline-flex items-center justify-center px-0.5 text-fg-40 hover:text-emphasis transition-colors" aria-label="Next">
+          <Icon name="chevron-right" size={chev} />
+        </button>
+      </div>
+    )
+  }
+
   const shellCls = [
     'kol-control',
     'kol-control--filled',