@kolkrabbi/kol-component 0.2.0 → 0.4.0

package/src/organisms/foundry/TypefaceHero.jsx

@@ -0,0 +1,107 @@
+import Pill from '../../atoms/Pill.jsx'
+import Button from '../../atoms/Button.jsx'
+
+/* taxonomy-ok: organism — nests Pill + Button (relative imports); a full
+ * page-hero region rendering live in the specimen's own font-family. */
+
+/**
+ * TypefaceHero — the specimen hero for a typeface page: a centered stack of
+ * category pill → giant display name rendered in the typeface's OWN fontFamily
+ * → in-family description → download / view-specimen CTAs → an optional
+ * licensing caption. Data-driven from one `typeface` object; the giant name is
+ * the live font-family preview (arbitrary loaded font, inline `fontFamily`, not
+ * a fixed KOL type class — only the size stops are Tailwind).
+ *
+ * Router-decoupled: the monorepo source called `useNavigate(specimenLink)`;
+ * here the "View Specimen" CTA takes an `href` and/or `onSpecimenClick` callback
+ * so the DS never depends on a router. CTA copy + the license note are
+ * prop-driven (license default off), and `displayName` falls back to
+ * `id`/`fontFamily` when the config omits it.
+ *
+ * Text casing: displayName, category, description and CTA/license strings render
+ * verbatim as authored — no text-transform.
+ *
+ * @param {Object} props
+ * @param {Object} props.typeface - Config: { displayName?, id?, fontFamily, fontStyle?, category?, description?, specimenLink? }.
+ * @param {string} props.downloadHref - Optional href for the "Download font" CTA.
+ * @param {string} props.downloadLabel - Download CTA label (default 'Download font').
+ * @param {string} props.specimenLabel - View-specimen CTA label (default 'View Specimen').
+ * @param {Function} props.onSpecimenClick - Handler for the view-specimen CTA (receives the event).
+ * @param {string} props.licenseNote - Licensing caption; omit to hide.
+ */
+const TypefaceHero = ({
+  typeface = {},
+  downloadHref,
+  downloadLabel = 'Download font',
+  specimenLabel = 'View Specimen',
+  onSpecimenClick,
+  licenseNote,
+}) => {
+  const { displayName, id, fontFamily, fontStyle, category, description, specimenLink } = typeface
+  const name = displayName || id || fontFamily
+  const isItalic = fontStyle === 'italic'
+
+  const handleSpecimenClick = (e) => {
+    if (onSpecimenClick) {
+      e.preventDefault()
+      onSpecimenClick(e)
+    }
+  }
+
+  return (
+    <section className="py-48 md:py-72 flex flex-col justify-center text-center items-center overflow-hidden">
+      <div className="flex flex-col items-center gap-2 max-w-[1400px]">
+        {category && (
+          <div className="pb-5 flex flex-col items-center gap-2">
+            <Pill variant="subtle">{category}</Pill>
+          </div>
+        )}
+
+        <div className="pb-16 flex flex-col items-center gap-0">
+          <h1
+            className={`text-[64px] leading-[100%] md:text-[128px] font-semibold ${
+              isItalic ? 'italic' : ''
+            } text-auto transition-colors duration-300`}
+            style={{ fontFamily }}
+          >
+            {name}
+          </h1>
+
+          {description && (
+            <p
+              className={`text-xl font-semibold ${
+                isItalic ? 'italic' : ''
+              } text-auto transition-colors duration-300`}
+              style={{ fontFamily }}
+            >
+              {description}
+            </p>
+          )}
+        </div>
+
+        <div className="flex flex-col items-center gap-2">
+          <div className="flex flex-wrap items-center justify-center gap-3">
+            <Button variant="primary" href={downloadHref}>
+              {downloadLabel}
+            </Button>
+            <Button
+              variant="outline"
+              href={specimenLink}
+              onClick={onSpecimenClick ? handleSpecimenClick : undefined}
+            >
+              {specimenLabel}
+            </Button>
+          </div>
+
+          {licenseNote && (
+            <p className="kol-mono-12 text-auto pt-4 transition-colors duration-300" style={{ opacity: 0.64 }}>
+              {licenseNote}
+            </p>
+          )}
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default TypefaceHero

package/src/organisms/foundry/TypefaceStyleSection.jsx

@@ -0,0 +1,163 @@
+import { useState } from 'react'
+import SpecimenSectionHeader from '../../molecules/foundry/SpecimenSectionHeader.jsx'
+
+/* taxonomy-ok: organism — nests SpecimenSectionHeader (relative import) plus a
+ * same-file StyleCard row; owns the axis/selection state. */
+
+/**
+ * StyleCard (same-file) — one style row: the label rendered live in its own
+ * weight/width/italic on the left, the numeric value on the right, with an
+ * active/hover flip. Inlined (the monorepo's `.style-card` CSS classes aren't
+ * in the DS theme) and rebuilt Tailwind-first.
+ */
+function StyleCard({ label, weight, width, italic, isActive, onHover, onClick, fontFamily }) {
+  return (
+    <div
+      onMouseEnter={onHover}
+      onClick={onClick}
+      className={`flex items-center justify-between gap-4 px-4 py-3 rounded cursor-pointer border transition-colors duration-150 ${
+        isActive ? 'bg-surface-inverse' : 'border-transparent hover:bg-fg-08'
+      }`}
+      style={{ borderColor: isActive ? 'transparent' : undefined }}
+    >
+      <span
+        className="text-2xl md:text-3xl leading-none truncate"
+        style={{
+          fontFamily,
+          fontStyle: italic ? 'italic' : 'normal',
+          fontWeight: weight || 400,
+          fontVariationSettings: width ? `'wdth' ${width}` : undefined,
+        }}
+      >
+        {label}
+      </span>
+      <span className="kol-mono-12 shrink-0 opacity-70">{width || weight}</span>
+    </div>
+  )
+}
+
+const pickDefault = (list) => list.find((s) => s.isDefault) || list[3] || list[0]
+
+/**
+ * TypefaceStyleSection — the weight/width/italic style showcase: a sticky
+ * inverted preview panel on the left (renders `AaBbCc / 01234567 / {(!@#$?&)}`
+ * in the hovered/selected style) beside a grid of every available style on the
+ * right. Derives its behavior generically from `typeface.styles`: italic →
+ * Roman/Italic dropdown; weight+width → Weight/Width axis dropdown; single-axis
+ * / static → no dropdown.
+ *
+ * Default selection prefers a style flagged `isDefault`, falling back to index
+ * (Regular ≈ [3]) — the monorepo's magic indices assumed a fixed ordering; the
+ * flag survives reordering. All preview typography stays inline from the
+ * selected style (fontFamily / fontWeight / fontStyle / wdth variation) because
+ * arbitrary loaded fonts + variable axes can't be fixed KOL type classes.
+ *
+ * Text casing: badgeText, style labels and specimen strings render verbatim.
+ *
+ * @param {Object} props.typeface - { fontFamily, badgeText, styles:{ hasWeight, hasWidth, hasItalic, defaultStyle?, weights[], widths[] } }.
+ * @param {string[]} props.sampleLines - Preview lines (default AaBbCc / 01234567 / {(!@#$?&)}).
+ */
+const TypefaceStyleSection = ({
+  typeface = {},
+  sampleLines = ['AaBbCc', '01234567', '{(!@#$?&)}'],
+}) => {
+  const { fontFamily, badgeText, styles: styleConfig = {} } = typeface
+  const {
+    hasWeight,
+    hasWidth,
+    hasItalic,
+    defaultStyle = 'weight',
+    weights = [],
+    widths = [],
+  } = styleConfig
+
+  const showDropdown = hasItalic || (hasWeight && hasWidth)
+  const styleOptions = hasItalic
+    ? [
+        { label: 'Roman', value: 'roman' },
+        { label: 'Italic', value: 'italic' },
+      ]
+    : hasWeight && hasWidth
+      ? [
+          { label: 'Weight', value: 'weight' },
+          { label: 'Width', value: 'width' },
+        ]
+      : null
+
+  const [selectedStyleVariant, setSelectedStyleVariant] = useState(
+    hasItalic ? 'italic' : defaultStyle,
+  )
+  const isItalic = selectedStyleVariant === 'italic'
+  const activeList = showDropdown && selectedStyleVariant === 'width' ? widths : weights
+
+  const [currentStyle, setCurrentStyle] = useState(() => pickDefault(activeList) || {})
+
+  const handleStyleVariantChange = (newVariant) => {
+    setSelectedStyleVariant(newVariant)
+    if (newVariant === 'width') setCurrentStyle(pickDefault(widths) || {})
+    else setCurrentStyle(pickDefault(weights) || {})
+  }
+
+  const previewStyle = {
+    fontFamily,
+    fontWeight: currentStyle.weight || 400,
+    fontStyle: isItalic ? 'italic' : 'normal',
+    ...(currentStyle.width ? { fontVariationSettings: `'wdth' ${currentStyle.width}` } : {}),
+  }
+
+  return (
+    <section className="w-full py-12 lg:py-16">
+      <div className="max-w-[1400px] mx-auto flex flex-col gap-8">
+        <SpecimenSectionHeader
+          selectedStyle={selectedStyleVariant}
+          onStyleChange={handleStyleVariantChange}
+          styleOptions={styleOptions || undefined}
+          showDropdown={showDropdown}
+          badgeText={badgeText}
+          icon="foundation"
+          size="sm"
+        />
+
+        <div className="flex flex-row gap-4 md:gap-6 lg:gap-8 items-start w-full">
+          {/* Left: sticky inverted preview panel */}
+          <div className="w-1/2 aspect-[4/3] p-6 md:p-12 transition-colors duration-300 sticky top-24 bg-surface-inverse rounded">
+            <div
+              className="text-center transition-colors duration-300 w-full h-full flex flex-col justify-center items-center gap-2"
+              style={previewStyle}
+            >
+              {sampleLines.map((line, i) => (
+                <div key={i} className="text-3xl md:text-5xl lg:text-6xl leading-none">
+                  {line}
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* Right: styles list */}
+          <div className="w-1/2 flex flex-col gap-3">
+            {activeList.map((style, index) => (
+              <StyleCard
+                key={`${style.label}-${index}`}
+                label={style.label}
+                weight={style.weight}
+                width={style.width}
+                italic={isItalic}
+                isActive={
+                  currentStyle?.label === style.label &&
+                  (style.weight
+                    ? currentStyle?.weight === style.weight
+                    : currentStyle?.width === style.width)
+                }
+                onHover={() => setCurrentStyle(style)}
+                onClick={() => setCurrentStyle(style)}
+                fontFamily={fontFamily}
+              />
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default TypefaceStyleSection

package/src/organisms/foundry/VariableFontSection.jsx

@@ -0,0 +1,158 @@
+import { useState } from 'react'
+import Pill from '../../atoms/Pill.jsx'
+import Slider from '../../molecules/Slider.jsx'
+import SpecimenSectionHeader from '../../molecules/foundry/SpecimenSectionHeader.jsx'
+import useAxisAnimation from '../../hooks/useAxisAnimation.js'
+
+/* taxonomy-ok: organism — nests Pill, Slider, SpecimenSectionHeader (relative
+ * imports) plus a same-file PlayPauseButton; owns the axis-animation state. */
+
+/**
+ * PlayPauseButton (same-file) — CSS-shape play/pause toggle. Two bars when
+ * playing, a right-pointing triangle when paused. Pure `currentColor` shapes so
+ * it needs no icon registry and inherits the surrounding text color.
+ */
+function PlayPauseButton({ isPlaying = false, onToggle, size = 28 }) {
+  const barH = Math.round(size * 0.43)
+  const barW = Math.max(2, Math.round(size * 0.07))
+  const tri = Math.round(size * 0.21)
+  const gap = Math.max(2, Math.round(size * 0.07))
+  return (
+    <button
+      type="button"
+      onClick={onToggle}
+      aria-label={isPlaying ? 'Pause' : 'Play'}
+      aria-pressed={isPlaying}
+      className="cursor-pointer flex items-center justify-center text-auto shrink-0"
+      style={{ width: size, height: size, gap }}
+    >
+      {isPlaying ? (
+        <>
+          <span className="bg-current" style={{ width: barW, height: barH }} />
+          <span className="bg-current" style={{ width: barW, height: barH }} />
+        </>
+      ) : (
+        <span
+          className="w-0 h-0"
+          style={{
+            borderLeft: `${tri}px solid currentColor`,
+            borderTop: `${tri}px solid transparent`,
+            borderBottom: `${tri}px solid transparent`,
+            marginLeft: Math.round(size * 0.07),
+          }}
+        />
+      )}
+    </button>
+  )
+}
+
+/**
+ * VariableFontSection — the animated variable-axis playground. A big specimen
+ * word whose weight auto-oscillates between `minWeight` and `maxWeight` via
+ * `useAxisAnimation` (ping-pong rAF, reduced-motion gated), pausing the instant
+ * the user scrubs the weight slider. A SpecimenSectionHeader sits above with a
+ * Roman/Italic dropdown. "Watch the weight breathe, then grab the slider."
+ *
+ * The weight is applied as CSS `font-weight` (→ the font's wght axis), so it
+ * animates against ANY font with multiple weights — a true variable font makes
+ * the morph continuous rather than stepped. See the page's FONT-ASSET CONTRACT.
+ *
+ * Reconciliations vs the monorepo source: the crude `Date.now()`/`delta>16`
+ * throttle is replaced by the hook's `performance.now()` accumulator; the
+ * previously unguarded loop now honors `prefers-reduced-motion` (starts paused,
+ * static value); brand copy defaults ('Málrómur Aa' / 'Variable' / TGMalromur)
+ * are dropped for neutral defaults.
+ *
+ * Text casing: badgeText, text and dropdown labels render verbatim.
+ *
+ * @param {Object} props
+ * @param {string} props.fontFamily - Specimen family (default system stack).
+ * @param {string} props.badgeText - Header title (default 'Variable axis').
+ * @param {string} props.text - The big specimen word (default 'Variable').
+ * @param {number} props.minWeight - Oscillation + slider lower bound (default 300).
+ * @param {number} props.maxWeight - Oscillation + slider upper bound (default 900).
+ * @param {boolean} props.showDropdown - Show the Roman/Italic dropdown (default true).
+ */
+const VariableFontSection = ({
+  fontFamily = 'system-ui, sans-serif',
+  badgeText = 'Variable axis',
+  text = 'Variable',
+  minWeight = 300,
+  maxWeight = 900,
+  showDropdown = true,
+}) => {
+  const [isAnimating, setIsAnimating] = useState(true)
+  const [selectedStyle, setSelectedStyle] = useState(showDropdown ? 'italic' : 'roman')
+
+  const { value: weight, setValue: setWeight, reduced } = useAxisAnimation({
+    min: minWeight,
+    max: maxWeight,
+    running: isAnimating,
+    initial: 400,
+  })
+
+  const handleSliderChange = (value) => {
+    setIsAnimating(false)
+    setWeight(value)
+  }
+
+  const playing = isAnimating && !reduced
+  const fontStyle = selectedStyle === 'italic' ? 'italic' : 'normal'
+
+  return (
+    <section className="w-full py-12 lg:py-16">
+      <div className="max-w-[1400px] mx-auto flex flex-col gap-8">
+        <SpecimenSectionHeader
+          selectedStyle={selectedStyle}
+          onStyleChange={setSelectedStyle}
+          showDropdown={showDropdown}
+          badgeText={badgeText}
+          icon="foundation"
+          size="sm"
+        />
+
+        {/* VariableFontDisplay (inlined) — giant text behind, controls in front */}
+        <div className="relative w-full rounded border border-fg-16 bg-surface-primary overflow-hidden p-6 md:p-10 h-[40vh] md:h-[60vh]">
+          <p
+            className="absolute inset-0 flex items-center justify-center text-[80px] md:text-[144px] transition-colors duration-300"
+            style={{
+              fontFamily,
+              fontWeight: Math.round(weight),
+              fontStyle,
+              color: 'var(--kol-surface-on-primary)',
+            }}
+          >
+            {text}
+          </p>
+
+          <div className="relative z-10 h-full flex flex-col justify-between">
+            <div className="flex justify-between items-start">
+              <div className="flex flex-col gap-1">
+                <span className="kol-mono-10 text-fg-32">AXES:</span>
+                <span className="kol-helper-12 text-auto">WEIGHT</span>
+              </div>
+              <div className="flex gap-2">
+                <Pill variant="subtle">wght {Math.round(weight)}</Pill>
+              </div>
+            </div>
+
+            <div className="flex items-center gap-4">
+              <PlayPauseButton isPlaying={playing} onToggle={() => setIsAnimating((a) => !a)} />
+              <Slider
+                label="Weight"
+                min={minWeight}
+                max={maxWeight}
+                value={Math.round(weight)}
+                onChange={handleSliderChange}
+                variant="minimal"
+                className="w-full"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default VariableFontSection

package/src/organisms/foundry/glyphData.js

@@ -0,0 +1,30 @@
+/**
+ * Foundry glyph data — static character collections + category metadata for the
+ * type-specimen sections (GlyphMetricsGrid, FoundryCharacterSets). Ported from
+ * the monorepo `@kol/ui/data` glyphSets so the DS foundry layer carries its own
+ * default coverage instead of reaching into an app data package. Consumers can
+ * override any of it via the `uppercaseGlyphs` / `lowercaseGlyphs` / category
+ * props.
+ */
+
+export const glyphSets = {
+  uppercase: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
+  lowercase: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'],
+  numbers: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'],
+  punctuation: ['.', ',', '!', '?', ';', ':', '"', "'", '-', '—', '(', ')', '[', ']', '{', '}', '&', '@', '#', '$', '%'],
+  latin1: ['À', 'Á', 'Â', 'Ã', 'Ä', 'Å', 'Æ', 'Ç', 'È', 'É', 'Ê', 'Ë', 'Ì', 'Í', 'Î', 'Ï', 'Ð', 'Ñ', 'Ò', 'Ó', 'Ô', 'Õ', 'Ö', 'Ø'],
+  latinExtended: ['Ā', 'Ă', 'Ą', 'Ć', 'Ĉ', 'Ċ', 'Č', 'Ď', 'Đ', 'Ē', 'Ĕ', 'Ė', 'Ę', 'Ě', 'Ĝ', 'Ğ', 'Ġ', 'Ģ', 'Ĥ', 'Ħ', 'Ĩ', 'Ī', 'Ĭ', 'Į'],
+}
+
+export const glyphCategories = [
+  { key: 'uppercase', title: 'Uppercase' },
+  { key: 'lowercase', title: 'Lowercase' },
+  { key: 'numbers', title: 'Numbers' },
+  { key: 'punctuation', title: 'Punctuation & Symbols' },
+  { key: 'latin1', title: 'Latin-1 Supported' },
+  { key: 'latinExtended', title: 'Latin Extended' },
+]
+
+/** Default preview pangram — neutral English, authored in intended case. */
+export const SPECIMEN_SAMPLE_TEXT =
+  'The quick brown fox jumps over the lazy dog while five wizards vex the gnomic judge.'

package/src/organisms/foundry/index.js

@@ -0,0 +1,21 @@
+/**
+ * @kol/component foundry sub-barrel — the type-specimen layer (the DS answer to
+ * the monorepo's `@kol/ui/foundry`). Exposed as the `./foundry` package subpath
+ * so the showcase specimen set can import these without touching the root
+ * src/index.js barrel. The root barrel export lines are documented in the p9
+ * wiring notes for a central merge.
+ */
+
+// molecule (shared section header)
+export { default as SpecimenSectionHeader } from '../../molecules/foundry/SpecimenSectionHeader.jsx'
+
+// organisms (specimen sections)
+export { default as TypefaceHero } from './TypefaceHero.jsx'
+export { default as VariableFontSection } from './VariableFontSection.jsx'
+export { default as GlyphMetricsGrid } from './GlyphMetricsGrid.jsx'
+export { default as TypefaceStyleSection } from './TypefaceStyleSection.jsx'
+export { default as FontPreviewSection } from './FontPreviewSection.jsx'
+export { default as FoundryCharacterSets } from './FoundryCharacterSets.jsx'
+
+// data
+export { glyphSets, glyphCategories, SPECIMEN_SAMPLE_TEXT } from './glyphData.js'

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