@kolkrabbi/kol-component 0.3.0 → 0.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.3.0",
+  "version": "0.4.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/atoms/QuantityInput.jsx

@@ -1,9 +1,31 @@
 import { useEffect, useState } from 'react'
 
+/**
+ * QuantityInput — a compact integer quantity picker with two control layouts.
+ *
+ *   controls="chevron" (default) — value with a stacked up/down chevron pair
+ *                                  on the right, inside a full-width field.
+ *   controls="split"             — a − value + pill (minus and plus flank the
+ *                                  value). The former `QuantityStepper`.
+ *
+ * Display-only value (not a text-editable input) — for an editable number
+ * field with bump chevrons use `Stepper`. Size auto-adapts to the viewport
+ * (sm < 768 ≤ md < 1024 ≤ lg) unless `size` pins it. Controlled: `value` +
+ * `(next) => onChange`, clamped to [min, max].
+ *
+ * @param {number}   value     current quantity (default 1)
+ * @param {Function} onChange  (next) => void
+ * @param {number}   min       lower bound (default 1)
+ * @param {number}   max       upper bound (default 99)
+ * @param {string}   controls  'chevron' (default) | 'split'
+ * @param {string}   size      'sm' | 'md' | 'lg' — pins the responsive size
+ * @param {string}   className extra classes on the root
+ */
+
 const SIZE_MAP = {
   sm: { fontSize: 11, paddingY: 12, paddingX: 24, radius: 20, icon: 10 },
   md: { fontSize: 12, paddingY: 14, paddingX: 24, radius: 22, icon: 12 },
-  lg: { fontSize: 14, paddingY: 16, paddingX: 24, radius: 24, icon: 14 }
+  lg: { fontSize: 14, paddingY: 16, paddingX: 24, radius: 24, icon: 14 },
 }
 
 const QuantityInput = ({
@@ -11,33 +33,21 @@ const QuantityInput = ({
   onChange,
   min = 1,
   max = 99,
+  controls = 'chevron',
   size,
-  className = ''
+  className = '',
 }) => {
   const [resolvedSize, setResolvedSize] = useState('md')
   const [componentWidth, setComponentWidth] = useState('180px')
 
   useEffect(() => {
     const determineSize = () => {
-      if (size) {
-        setResolvedSize(size)
-        return
-      }
-
-      if (typeof window === 'undefined') {
-        setResolvedSize('md')
-        return
-      }
-
-      if (window.innerWidth >= 1024) {
-        setResolvedSize('lg')
-      } else if (window.innerWidth >= 768) {
-        setResolvedSize('md')
-      } else {
-        setResolvedSize('sm')
-      }
+      if (size) { setResolvedSize(size); return }
+      if (typeof window === 'undefined') { setResolvedSize('md'); return }
+      if (window.innerWidth >= 1024) setResolvedSize('lg')
+      else if (window.innerWidth >= 768) setResolvedSize('md')
+      else setResolvedSize('sm')
     }
-
     determineSize()
     window.addEventListener('resize', determineSize)
     return () => window.removeEventListener('resize', determineSize)
@@ -46,14 +56,9 @@ const QuantityInput = ({
   useEffect(() => {
     const updateWidth = () => {
       if (typeof window === 'undefined') return
-
-      if (window.innerWidth >= 1024) {
-        setComponentWidth('180px')
-      } else if (window.innerWidth >= 768) {
-        setComponentWidth('140px')
-      } else {
-        setComponentWidth('100px')
-      }
+      if (window.innerWidth >= 1024) setComponentWidth('180px')
+      else if (window.innerWidth >= 768) setComponentWidth('140px')
+      else setComponentWidth('100px')
     }
     updateWidth()
     window.addEventListener('resize', updateWidth)
@@ -61,108 +66,65 @@ const QuantityInput = ({
   }, [])
 
   const metrics = SIZE_MAP[resolvedSize] || SIZE_MAP.md
+  const increment = () => { if (value < max) onChange?.(value + 1) }
+  const decrement = () => { if (value > min) onChange?.(value - 1) }
 
-  const increment = () => {
-    if (value < max) onChange?.(value + 1)
-  }
-
-  const decrement = () => {
-    if (value > min) onChange?.(value - 1)
+  /* controls="split" — the − value + pill (formerly QuantityStepper). */
+  if (controls === 'split') {
+    const btn = (disabled) => ({
+      padding: `${metrics.paddingY}px 12px`,
+      display: 'flex', alignItems: 'center', justifyContent: 'center',
+      backgroundColor: 'transparent', border: 'none',
+      color: 'var(--kol-surface-on-primary)',
+      cursor: disabled ? 'not-allowed' : 'pointer',
+      opacity: disabled ? 0.3 : 1,
+      transition: 'opacity 0.15s',
+      fontFamily: 'var(--kol-font-family-mono)',
+      fontSize: `${metrics.fontSize}px`, lineHeight: '120%',
+    })
+    return (
+      <div
+        className={`flex items-center justify-center ${className}`}
+        style={{
+          width: componentWidth, minWidth: componentWidth,
+          border: '1px solid var(--kol-border-default)',
+          borderRadius: `${metrics.radius}px`,
+          backgroundColor: 'var(--kol-surface-primary)',
+        }}
+      >
+        <button type="button" onClick={decrement} disabled={value <= min} style={btn(value <= min)} aria-label="Decrease quantity">−</button>
+        <span style={{ minWidth: '24px', textAlign: 'center', color: 'var(--kol-surface-on-primary)', fontFamily: 'var(--kol-font-family-mono)', fontSize: `${metrics.fontSize}px`, lineHeight: '120%' }}>{value}</span>
+        <button type="button" onClick={increment} disabled={value >= max} style={btn(value >= max)} aria-label="Increase quantity">+</button>
+      </div>
+    )
   }
 
+  /* controls="chevron" (default) — value + stacked chevron pair on the right. */
   return (
-    <div
-      className={`relative block ${className}`}
-    >
-      {/* Border wrapper - EXPLICIT 42.5px height */}
+    <div className={`relative block ${className}`}>
       <div
         className="w-full flex items-center"
         style={{
-          position: 'relative',
-          height: '42.5px',
+          position: 'relative', height: '42.5px',
           border: '1px solid var(--kol-border-default)',
           borderRadius: `${metrics.radius}px`,
           backgroundColor: 'var(--kol-surface-primary)',
           color: 'var(--kol-surface-on-primary)',
-          paddingLeft: `${metrics.paddingX}px`,
-          paddingRight: `${metrics.paddingX}px`,
-          fontSize: `${metrics.fontSize}px`,
-          lineHeight: '120%',
-          fontFamily: 'var(--kol-font-family-mono)',
-          boxSizing: 'border-box'
+          paddingLeft: `${metrics.paddingX}px`, paddingRight: `${metrics.paddingX}px`,
+          fontSize: `${metrics.fontSize}px`, lineHeight: '120%',
+          fontFamily: 'var(--kol-font-family-mono)', boxSizing: 'border-box',
         }}
       >
         <span>{value}</span>
-
-        {/* Chevrons - absolute, OUTSIDE the padded content */}
-        <div
-          style={{
-            position: 'absolute',
-            right: `${metrics.paddingX}px`,
-            top: '50%',
-            transform: 'translateY(-50%)',
-            display: 'flex',
-            flexDirection: 'column'
-          }}
-        >
-          <button
-            type="button"
-            onClick={increment}
-            disabled={value >= max}
-            style={{
-              backgroundColor: 'transparent',
-              border: 'none',
-              padding: '0',
-              cursor: value >= max ? 'not-allowed' : 'pointer',
-              opacity: value >= max ? 0.3 : 1,
-              lineHeight: 0,
-              display: 'block'
-            }}
-            aria-label="Increase quantity"
-          >
-            <svg
-              width={metrics.icon}
-              height={metrics.icon}
-              viewBox="0 0 12 12"
-              fill="none"
-            >
-              <path
-                d="m3 7 3-3 3 3"
-                stroke="currentColor"
-                strokeWidth="1.25"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-              />
+        <div style={{ position: 'absolute', right: `${metrics.paddingX}px`, top: '50%', transform: 'translateY(-50%)', display: 'flex', flexDirection: 'column' }}>
+          <button type="button" onClick={increment} disabled={value >= max} style={{ backgroundColor: 'transparent', border: 'none', padding: '0', cursor: value >= max ? 'not-allowed' : 'pointer', opacity: value >= max ? 0.3 : 1, lineHeight: 0, display: 'block' }} aria-label="Increase quantity">
+            <svg width={metrics.icon} height={metrics.icon} viewBox="0 0 12 12" fill="none">
+              <path d="m3 7 3-3 3 3" stroke="currentColor" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" />
             </svg>
           </button>
-          <button
-            type="button"
-            onClick={decrement}
-            disabled={value <= min}
-            style={{
-              backgroundColor: 'transparent',
-              border: 'none',
-              padding: '0',
-              cursor: value <= min ? 'not-allowed' : 'pointer',
-              opacity: value <= min ? 0.3 : 1,
-              lineHeight: 0,
-              display: 'block'
-            }}
-            aria-label="Decrease quantity"
-          >
-            <svg
-              width={metrics.icon}
-              height={metrics.icon}
-              viewBox="0 0 12 12"
-              fill="none"
-            >
-              <path
-                d="m3 5 3 3 3-3"
-                stroke="currentColor"
-                strokeWidth="1.25"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-              />
+          <button type="button" onClick={decrement} disabled={value <= min} style={{ backgroundColor: 'transparent', border: 'none', padding: '0', cursor: value <= min ? 'not-allowed' : 'pointer', opacity: value <= min ? 0.3 : 1, lineHeight: 0, display: 'block' }} aria-label="Decrease quantity">
+            <svg width={metrics.icon} height={metrics.icon} viewBox="0 0 12 12" fill="none">
+              <path d="m3 5 3 3 3-3" stroke="currentColor" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" />
             </svg>
           </button>
         </div>

package/src/index.js

@@ -41,7 +41,6 @@ export { usePopover, PopoverPanel, Tooltip } from './atoms/Popover.jsx'
 export { default as PriceDisplay } from './atoms/PriceDisplay.jsx'
 export { default as ProsePreview } from './atoms/ProsePreview.jsx'
 export { default as QuantityInput } from './atoms/QuantityInput.jsx'
-export { default as QuantityStepper } from './atoms/QuantityStepper.jsx'
 export { default as RotaryDial } from './atoms/RotaryDial.jsx'
 export { default as SearchInput } from './atoms/SearchInput.jsx'
 export { default as Section } from './atoms/Section.jsx'

package/src/molecules/MenuPopover.jsx

@@ -10,34 +10,11 @@ import { MenuItem as MenuTrigger } from './MenuItem.jsx'
  * fixed positioning, MenuItem on floating-ui (portal, auto-flip, focus
  * management). One implementation now: MenuItem. This alias keeps existing
  * call-sites working; migrate imports to MenuItem. Removal in the next major.
+ *
+ * Compose the rows with the exported `MenuDropdownItem` / `MenuDropdownDivider`
+ * / `MenuDropdownNest` from MenuItem.jsx — this file no longer ships its own
+ * duplicate row/divider components (they were dead: never barrel-exported).
  */
 export function MenuPopover(props) {
   return <MenuTrigger {...props} />
 }
-
-/**
- * MenuItem — action row inside a MenuPopover. Renders as a button so it
- * picks up disabled state, focus, and keyboard activation. The popover
- * closes automatically when an item is clicked (via the wrapper's
- * delegate click — the data-menu-item attr marks rows for that match).
- */
-export function MenuItem({ onClick, disabled, shortcut, iconLeft, children }) {
-  return (
-    <button
-      type="button"
-      data-menu-item
-      onClick={onClick}
-      disabled={disabled}
-      role="menuitem"
-      className="w-full kol-helper-12 px-3 h-8 inline-flex items-center gap-2 text-meta hover:text-emphasis hover:bg-fg-08 disabled:opacity-40 disabled:cursor-not-allowed text-left"
-    >
-      {iconLeft && <span className="shrink-0 w-4 inline-flex items-center justify-center text-meta">{iconLeft}</span>}
-      <span className="flex-1">{children}</span>
-      {shortcut && <span className="kol-helper-10 text-subtle shrink-0">{shortcut}</span>}
-    </button>
-  )
-}
-
-export function MenuDivider() {
-  return <div className="border-t border-fg-08 my-1" />
-}

package/src/atoms/QuantityStepper.jsx

@@ -1,149 +0,0 @@
-import { useEffect, useState } from 'react'
-
-// Match Dropdown SIZE_MAP for consistent height
-const SIZE_MAP = {
-  sm: { fontSize: 11, paddingY: 12, paddingX: 24, radius: 20 },
-  md: { fontSize: 12, paddingY: 14, paddingX: 24, radius: 22 },
-  lg: { fontSize: 14, paddingY: 16, paddingX: 24, radius: 24 }
-}
-
-const QuantityStepper = ({
-  value = 1,
-  onChange,
-  min = 1,
-  max = 10,
-  size,
-  className = ''
-}) => {
-  const [resolvedSize, setResolvedSize] = useState('md')
-  const [componentWidth, setComponentWidth] = useState('180px')
-
-  // Responsive size
-  useEffect(() => {
-    const determineSize = () => {
-      if (size) {
-        setResolvedSize(size)
-        return
-      }
-
-      if (typeof window === 'undefined') {
-        setResolvedSize('md')
-        return
-      }
-
-      if (window.innerWidth >= 1024) {
-        setResolvedSize('lg')
-      } else if (window.innerWidth >= 768) {
-        setResolvedSize('md')
-      } else {
-        setResolvedSize('sm')
-      }
-    }
-
-    determineSize()
-    window.addEventListener('resize', determineSize)
-    return () => window.removeEventListener('resize', determineSize)
-  }, [size])
-
-  // Width management - match Dropdown
-  useEffect(() => {
-    const updateWidth = () => {
-      if (typeof window === 'undefined') return
-
-      if (window.innerWidth >= 1024) {
-        setComponentWidth('180px')
-      } else if (window.innerWidth >= 768) {
-        setComponentWidth('140px')
-      } else {
-        setComponentWidth('100px')
-      }
-    }
-    updateWidth()
-    window.addEventListener('resize', updateWidth)
-    return () => window.removeEventListener('resize', updateWidth)
-  }, [])
-
-  const metrics = SIZE_MAP[resolvedSize] || SIZE_MAP.md
-
-  const decrement = () => {
-    if (value > min) onChange?.(value - 1)
-  }
-
-  const increment = () => {
-    if (value < max) onChange?.(value + 1)
-  }
-
-  const buttonStyle = {
-    padding: `${metrics.paddingY}px 12px`,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: 'transparent',
-    border: 'none',
-    color: 'var(--kol-surface-on-primary)',
-    cursor: 'pointer',
-    transition: 'opacity 0.15s',
-    fontFamily: 'var(--kol-font-family-mono)',
-    fontSize: `${metrics.fontSize}px`,
-    lineHeight: '120%'
-  }
-
-  const disabledStyle = {
-    opacity: 0.3,
-    cursor: 'not-allowed'
-  }
-
-  return (
-    <div
-      className={`flex items-center justify-center ${className}`}
-      style={{
-        width: componentWidth,
-        minWidth: componentWidth,
-        border: '1px solid var(--kol-border-default)',
-        borderRadius: `${metrics.radius}px`,
-        backgroundColor: 'var(--kol-surface-primary)'
-      }}
-    >
-      <button
-        type="button"
-        onClick={decrement}
-        disabled={value <= min}
-        style={{
-          ...buttonStyle,
-          ...(value <= min ? disabledStyle : {})
-        }}
-        aria-label="Decrease quantity"
-      >
-        −
-      </button>
-
-      <span
-        style={{
-          minWidth: '24px',
-          textAlign: 'center',
-          color: 'var(--kol-surface-on-primary)',
-          fontFamily: 'var(--kol-font-family-mono)',
-          fontSize: `${metrics.fontSize}px`,
-          lineHeight: '120%'
-        }}
-      >
-        {value}
-      </span>
-
-      <button
-        type="button"
-        onClick={increment}
-        disabled={value >= max}
-        style={{
-          ...buttonStyle,
-          ...(value >= max ? disabledStyle : {})
-        }}
-        aria-label="Increase quantity"
-      >
-        +
-      </button>
-    </div>
-  )
-}
-
-export default QuantityStepper