@kolkrabbi/kol-component 0.3.0 → 0.4.1

package/README.md

@@ -15,7 +15,7 @@ Requires a **Vite + Tailwind v4** app and the theme CSS imported (see the theme
 
 ```jsx
 import { Button, Tag, Badge, Slider, Dropdown, Table } from '@kolkrabbi/kol-component'
-import { Icon } from '@kolkrabbi/kol-loader'
+import { Icon } from '@kolkrabbi/kol-icons'
 
 <Button variant="primary" iconLeft="plus">New</Button>
 <Badge variant="success">Active</Badge>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.3.0",
+  "version": "0.4.1",
   "description": "KOL design-system components — atoms through organisms, emitting canonical kol-* classes. Pairs with @kolkrabbi/kol-theme for styling.",
   "license": "MIT",
   "type": "module",
@@ -24,7 +24,7 @@
   "dependencies": {
     "@floating-ui/react": "^0.27.19",
     "embla-carousel-react": "^8.6.0",
-    "@kolkrabbi/kol-loader": "0.3.0"
+    "@kolkrabbi/kol-icons": "0.4.0"
   },
   "peerDependencies": {
     "react": "^18.3.0 || ^19.0.0",

package/src/atoms/Badge.jsx

@@ -5,7 +5,7 @@
  * CSS classes live in components.css under 2-LABELS → Badges.
  */
 
-import { Icon } from '@kolkrabbi/kol-loader'
+import { Icon } from '@kolkrabbi/kol-icons'
 
 const VARIANT_MAP = {
   default: 'kol-badge-default',

package/src/atoms/Button.jsx

@@ -1,5 +1,5 @@
 import { isValidElement } from 'react'
-import { Icon } from '@kolkrabbi/kol-loader'
+import { Icon } from '@kolkrabbi/kol-icons'
 
 /**
  * Button — canonical KOL button. Emits kol-btn* classes (CSS in @kol/theme).

package/src/atoms/Input.jsx

@@ -1,4 +1,4 @@
-import { Icon } from '@kolkrabbi/kol-loader'
+import { Icon } from '@kolkrabbi/kol-icons'
 
 /**
  * Input — single-input atom built on the .kol-control shell.

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/atoms/SearchInput.jsx

@@ -1,4 +1,4 @@
-import { Icon } from '@kolkrabbi/kol-loader'
+import { Icon } from '@kolkrabbi/kol-icons'
 
 /**
  * SearchInput — controlled search field on the .kol-control shell. The

package/src/atoms/SectionLabel.jsx

@@ -1,4 +1,4 @@
-import { Icon } from '@kolkrabbi/kol-loader'
+import { Icon } from '@kolkrabbi/kol-icons'
 
 export default function SectionLabel({
   text,

package/src/atoms/Stepper.jsx

@@ -8,7 +8,7 @@
  * stroke icons in the kol curated set. For a plain number input without
  * bump affordance, use `<Input type="number" />`.
  */
-import { Icon } from '@kolkrabbi/kol-loader'
+import { Icon } from '@kolkrabbi/kol-icons'
 
 const SIZE_TYPE    = { sm: 'kol-mono-12', md: 'kol-mono-14', lg: 'kol-mono-16' }
 const CHEVRON_SIZE = { sm: 8,             md: 10,            lg: 12 }

package/src/atoms/Tag.jsx

@@ -1,4 +1,4 @@
-import { Icon } from '@kolkrabbi/kol-loader'
+import { Icon } from '@kolkrabbi/kol-icons'
 
 const ICON_SIZES = { sm: 10, md: 12, lg: 14 }
 

package/src/atoms/Textarea.jsx

@@ -1,4 +1,4 @@
-import { Icon } from '@kolkrabbi/kol-loader'
+import { Icon } from '@kolkrabbi/kol-icons'
 
 /**
  * Textarea — multi-line text atom built on the .kol-control shell with the

package/src/atoms/ViewToggle.jsx

@@ -1,4 +1,4 @@
-import { Icon } from '@kolkrabbi/kol-loader'
+import { Icon } from '@kolkrabbi/kol-icons'
 
 /**
  * ViewToggle — control for switching between view modes.

package/src/graphics/Graphic.jsx

@@ -6,7 +6,7 @@
  *
  * The raw SVG strings (~4.8 MB) live in ./graphicData.js behind a single
  * dynamic import — their chunk streams in parallel with boot instead of
- * bloating the consumer's entry chunk (same pattern as kol-loader's Icon).
+ * bloating the consumer's entry chunk (same pattern as kol-icons's Icon).
  * Until the chunk lands, renders a sized empty box (no layout shift); a
  * genuinely missing asset renders an AssetPlaceholder so it's visible rather
  * than silently empty.

package/src/graphics/graphicData.js

@@ -4,7 +4,7 @@
  * ~4.8 MB of illustration SVGs (some wrap embedded raster images) eager-inline
  * here, but this module is only reached via the dynamic `import()` in
  * Graphic.jsx — the bundler splits it into its own async chunk instead of
- * folding it into the consumer's entry chunk. Same pattern as kol-loader's
+ * folding it into the consumer's entry chunk. Same pattern as kol-icons's
  * iconData.js (kol-labs-single 2026-06-19 entry-chunk fix).
  */
 const svgModules = import.meta.glob('./svg/**/*.svg', { eager: true, query: '?raw', import: 'default' })

package/src/index.js

@@ -7,7 +7,7 @@
  *
  * Placement follows the taxonomy rules in
  * docs/documentation/02-components/02-placement.md:
- *   atom     — nests no KOL component (kol-loader Icon/Graphic are
+ *   atom     — nests no KOL component (kol-icons Icon/Graphic are
  *              infrastructure, they don't count)
  *   molecule — nests at least one KOL component
  *   organism — a self-contained composed UI region
@@ -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'
@@ -125,7 +124,7 @@ export { default as SpectrumGrid } from './organisms/SpectrumGrid.jsx'
 export { default as Table } from './organisms/Table.jsx'
 
 // loaders (re-export — infrastructure, documented on /docs/loaders)
-export { Icon } from '@kolkrabbi/kol-loader'
+export { Icon } from '@kolkrabbi/kol-icons'
 
 // graphics (SVG illustration loader — globs its own ./graphics/svg/**)
 export { default as Graphic, GRAPHICS } from './graphics/Graphic.jsx'

package/src/molecules/CardFeatureItem.jsx

@@ -1,6 +1,6 @@
-import { Icon } from '@kolkrabbi/kol-loader'
+import { Icon } from '@kolkrabbi/kol-icons'
 
-/* taxonomy-ok: nests only kol-loader's Icon (a package import the
+/* taxonomy-ok: nests only kol-icons's Icon (a package import the
  * relative-import check can't see). */
 
 /**

package/src/molecules/ColorInputRow.jsx

@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { Icon } from '@kolkrabbi/kol-loader'
+import { Icon } from '@kolkrabbi/kol-icons'
 import ColorSwatch from './ColorSwatch'
 import Input from '../atoms/Input'
 import LabeledControl from '../atoms/LabeledControl'

package/src/molecules/Dropdown.jsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react'
-import { Icon } from '@kolkrabbi/kol-loader'
+import { Icon } from '@kolkrabbi/kol-icons'
 import { MenuDropdownItem } from './MenuItem.jsx'
 import { PopoverPanel, usePopover } from '../atoms/Popover.jsx'
 

package/src/molecules/MediaCard.jsx

@@ -1,6 +1,6 @@
-import { Icon } from '@kolkrabbi/kol-loader'
+import { Icon } from '@kolkrabbi/kol-icons'
 
-/* taxonomy-ok: nests kol-loader's Icon (a package import the relative-import
+/* taxonomy-ok: nests kol-icons's Icon (a package import the relative-import
  * check can't see) plus the same-file SelectIndicator. */
 
 /**

package/src/molecules/MenuItem.jsx

@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { Icon } from '@kolkrabbi/kol-loader'
+import { Icon } from '@kolkrabbi/kol-icons'
 import { PopoverPanel, usePopover } from '../atoms/Popover.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/molecules/ShapeDropdown.jsx

@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { Icon } from '@kolkrabbi/kol-loader'
+import { Icon } from '@kolkrabbi/kol-icons'
 import Button from '../atoms/Button.jsx'
 import { PopoverPanel, usePopover } from '../atoms/Popover.jsx'
 import { MenuDropdownItem } from './MenuItem.jsx'

package/src/molecules/ShellDrawer.jsx

@@ -1,9 +1,9 @@
 import { useEffect, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
-import { Icon } from '@kolkrabbi/kol-loader'
+import { Icon } from '@kolkrabbi/kol-icons'
 import usePrefersReducedMotion from '../hooks/usePrefersReducedMotion.js'
 
-/* taxonomy-ok: nests kol-loader's Icon (a package import the relative-import
+/* taxonomy-ok: nests kol-icons's Icon (a package import the relative-import
  * check can't see). */
 
 const FOCUSABLE =

package/src/molecules/SwatchControls.jsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react'
-import { Icon } from '@kolkrabbi/kol-loader'
+import { Icon } from '@kolkrabbi/kol-icons'
 import ColorSwatch from './ColorSwatch.jsx'
 
 /* taxonomy-ok: the default composed control nests the same-file SwatchStack

package/src/molecules/TabsRow.jsx

@@ -1,7 +1,7 @@
 import { useRef } from 'react'
-import { Icon } from '@kolkrabbi/kol-loader'
+import { Icon } from '@kolkrabbi/kol-icons'
 
-/* taxonomy-ok: nests kol-loader's Icon */
+/* taxonomy-ok: nests kol-icons's Icon */
 
 /**
  * TabsRow — labeled underline tab strip: text tabs where the active tab gets

package/src/molecules/foundry/SpecimenSectionHeader.jsx

@@ -1,8 +1,8 @@
-import { Icon } from '@kolkrabbi/kol-loader'
+import { Icon } from '@kolkrabbi/kol-icons'
 import Dropdown from '../Dropdown.jsx'
 import Divider from '../../atoms/Divider.jsx'
 
-/* taxonomy-ok: nests DS Dropdown + Divider (relative imports) plus kol-loader's
+/* taxonomy-ok: nests DS Dropdown + Divider (relative imports) plus kol-icons's
  * Icon (a package import the relative-import check can't see). */
 
 /**

package/src/organisms/ContentFilters.jsx

@@ -1,7 +1,7 @@
 import { useState, useMemo, useRef, useEffect } from 'react'
 import Tag from '../atoms/Tag.jsx'
 import Divider from '../atoms/Divider.jsx'
-import { Icon } from '@kolkrabbi/kol-loader'
+import { Icon } from '@kolkrabbi/kol-icons'
 import ViewToggle from '../atoms/ViewToggle'
 
 /**

package/src/organisms/MediaViewer.jsx

@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from 'react'
-import { Icon } from '@kolkrabbi/kol-loader'
+import { Icon } from '@kolkrabbi/kol-icons'
 import FullscreenOverlay from '../atoms/FullscreenOverlay.jsx'
 
 /**

package/src/organisms/WorkViewToggle.jsx

@@ -1,8 +1,8 @@
 import { useEffect, useRef, useState } from 'react'
-import { Icon } from '@kolkrabbi/kol-loader'
+import { Icon } from '@kolkrabbi/kol-icons'
 
 /* taxonomy-ok: composites a segmented toggle + an inline search into one
- * space-trading control (organism); nests kol-loader's Icon (infrastructure). */
+ * space-trading control (organism); nests kol-icons's Icon (infrastructure). */
 
 const CUBIC_EASE = 'cubic-bezier(0.16, 1, 0.3, 1)'
 /* The pill uses a springier overshoot ease, distinct from CUBIC_EASE. */

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