@kolkrabbi/kol-component 0.1.0

package/src/molecules/QuantityStepper.jsx

@@ -0,0 +1,149 @@
+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

package/src/molecules/Section.jsx

@@ -0,0 +1,16 @@
+/**
+ * Section — labeled control group for inspector/editor panels.
+ *
+ * A small-caps label above a vertical content stack. Used across the editor
+ * inspector panels (palette / pattern / type modes): `<Section label="Aspect">…</Section>`.
+ */
+export default function Section({ label, children, className = '' }) {
+  return (
+    <div className={`flex flex-col gap-2 ${className}`}>
+      {label && (
+        <p className="kol-helper-10 uppercase tracking-widest text-meta">{label}</p>
+      )}
+      {children}
+    </div>
+  )
+}

package/src/molecules/SectionLabel.jsx

@@ -0,0 +1,59 @@
+import { Icon } from '@kolkrabbi/kol-loader'
+
+export default function SectionLabel({
+  text,
+  size = 'md',
+  className = ''
+}) {
+  // Size variants: sm (16px), md (20px), lg (32px)
+  const sizeConfig = {
+    sm: {
+      height: 'h-4',
+      iconSize: 16,
+      textClass: 'kol-label-compact-md'
+    },
+    md: {
+      height: 'h-5',
+      iconSize: 24,
+      textClass: 'kol-label-compact-lg'
+    },
+    lg: {
+      height: 'h-8',
+      iconSize: 40,
+      textClass: 'kol-heading-md'
+    }
+  }
+
+  const config = sizeConfig[size] || sizeConfig.md
+
+  return (
+    <div className={`section-label-wrapper flex flex-row items-center gap-1 overflow-visible ${config.height} ${className}`}>
+      <p className={`${config.textClass} text-auto`}>{text}</p>
+      <span
+        className="icon-swap-container"
+        style={{
+          position: 'relative',
+          display: 'inline-flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          width: `${config.iconSize}px`,
+          height: `${config.iconSize}px`,
+          overflow: 'hidden'
+        }}
+      >
+        <Icon
+          name="arrow-downright"
+          size={config.iconSize}
+          className="icon-default"
+          style={{ position: 'absolute' }}
+        />
+        <Icon
+          name="arrow-downright"
+          size={config.iconSize}
+          className="icon-hover"
+          style={{ position: 'absolute' }}
+        />
+      </span>
+    </div>
+  )
+}

package/src/molecules/SegmentedToggle.jsx

@@ -0,0 +1,56 @@
+/**
+ * SegmentedToggle — N-way segmented control. Joined buttons sharing one
+ * outer stroke; thin dividers between cells; no gap. Active cell uses
+ * bg-fg-04 + text-emphasis, inactive is text-meta with hover lifting.
+ *
+ *   <SegmentedToggle
+ *     value={current}
+ *     onChange={setCurrent}
+ *     options={[{ value, label }]}
+ *   />
+ *
+ * Companion to `ViewToggle`:
+ *   - ViewToggle (text)   — bare segmented buttons separated by gap; no shared shell.
+ *   - ViewToggle (icon)   — inset-well row of square icon buttons.
+ *   - SegmentedToggle     — flat segmented strip with shared border + dividers.
+ *
+ * Labels accept any node — pass strings or inline SVG previews. Optional
+ * `ariaLabel` per option for non-text labels.
+ *
+ * Props:
+ *   value     — current option value
+ *   onChange  — handler (newValue) => void
+ *   options   — [{ value, label, ariaLabel? }]
+ *   size      — 'md' (default, 26px) | 'sm' (16px). `sm` is for icon/preview-
+ *               only options (e.g. line-style previews) where text labels
+ *               aren't used; the cells still center their contents but the
+ *               outer height is tighter.
+ *   className — additional classes on the outer shell
+ */
+export default function SegmentedToggle({ value, onChange, options = [], size = 'md', className = '' }) {
+  const wrapHeight = size === 'sm' ? 'h-4' : 'h-[26px]'   /* 16 vs 26 */
+  const cellType   = size === 'sm' ? '' : 'kol-mono-12'
+  return (
+    <div className={`flex ${wrapHeight} border border-fg-04 rounded overflow-hidden ${className}`}>
+      {options.map((opt, i) => {
+        const isActive = opt.value === value
+        return (
+          <button
+            key={opt.value}
+            type="button"
+            onClick={() => onChange?.(opt.value)}
+            aria-pressed={isActive}
+            aria-label={opt.ariaLabel}
+            className={[
+              `flex-1 ${cellType} inline-flex items-center justify-center cursor-pointer`,
+              isActive ? 'bg-surface-secondary text-emphasis' : 'text-meta hover:text-emphasis',
+              i > 0 ? 'border-l border-fg-04' : '',
+            ].filter(Boolean).join(' ')}
+          >
+            {opt.label}
+          </button>
+        )
+      })}
+    </div>
+  )
+}

package/src/molecules/Tag.jsx

@@ -0,0 +1,79 @@
+import { Icon } from '@kolkrabbi/kol-loader'
+
+const ICON_SIZES = { sm: 10, md: 12, lg: 14 }
+
+/**
+ * Tag — canonical (merged web rich + brand compat).
+ *
+ * Web's rich API: variant (default/naked/inverse/solid), size, color, solid,
+ * active, icon, onRemove, onClick. Plus:
+ *  - `hash` (default true) — prepend `#` (web's tag style). Pass hash={false}
+ *    for plain labels (brand usage).
+ *  - `text` — content fallback when no children (brand SwatchControls passes text=).
+ */
+export default function Tag({
+  children,
+  text,
+  variant = 'default',
+  size = 'md',
+  color,
+  solid = false,
+  active = false,
+  hash = true,
+  icon,
+  onRemove,
+  onClick,
+  className = ''
+}) {
+  const isInteractive = !!(onClick || onRemove)
+  const Element = isInteractive ? 'button' : 'span'
+  const iconSize = ICON_SIZES[size] || 12
+  const content = children ?? text
+
+  let baseClass
+  if (variant === 'naked') {
+    baseClass = color ? `tag-naked tag--${color}` : 'tag-naked'
+  } else if (color) {
+    baseClass = `tag tag--${color}`
+  } else {
+    baseClass = variant === 'inverse' ? 'tag-control-inverse' : 'tag-control'
+  }
+
+  const isSolid = solid || variant === 'solid'
+  const activeClass = active ? (color ? 'tag--active' : 'is-active') : ''
+
+  const classes = [
+    baseClass,
+    `tag-${size}`,
+    isSolid && variant !== 'naked' ? 'tag--solid' : '',
+    activeClass,
+    isInteractive ? 'cursor-pointer' : '',
+    className
+  ].filter(Boolean).join(' ')
+
+  const handleRemove = (e) => {
+    e.stopPropagation()
+    onRemove?.(e)
+  }
+
+  return (
+    <Element
+      type={isInteractive ? 'button' : undefined}
+      className={classes}
+      onClick={onClick}
+    >
+      {icon && <Icon name={icon} size={iconSize} />}
+      <span>{hash ? '#' : ''}{content}</span>
+      {onRemove && (
+        <span
+          role="button"
+          tabIndex={-1}
+          className="tag-dismiss"
+          onClick={handleRemove}
+        >
+          <Icon name="cross" size={iconSize} />
+        </span>
+      )}
+    </Element>
+  )
+}

package/src/molecules/ToggleBracket.jsx

@@ -0,0 +1,45 @@
+/**
+ * ToggleBracket — text-pair toggle showing `Label [STATE]`.
+ *
+ *   variant="default" — Filled shell (bg-surface-secondary). When ON,
+ *                       overrides to accent-yellow with navy ink.
+ *   variant="plain"   — Bare text rows, no chrome. For inline contexts
+ *                       (sidenav child rows, dense panels).
+ */
+const ToggleBracket = ({
+  label,
+  value = false,
+  onToggle,
+  onChange,
+  offLabel = 'OFF',
+  onLabel = 'ON',
+  variant = 'default',
+  className = '',
+  ...props
+}) => {
+  const handleClick = () => {
+    if (onToggle) onToggle(!value)
+    if (onChange) onChange(!value)
+  }
+
+  const isPlain = variant === 'plain'
+
+  const cls = isPlain
+    ? `inline-flex items-center gap-3 kol-mono-12 uppercase text-meta hover:text-emphasis transition-colors bg-transparent border-0 p-0 cursor-pointer ${className}`
+    : `kol-control kol-control--filled kol-control-md kol-mono-12 uppercase justify-between gap-3 ${value ? 'toggle-bracket--active' : ''} ${className}`
+
+  return (
+    <button
+      type="button"
+      className={cls.trim()}
+      onClick={handleClick}
+      aria-pressed={value}
+      {...props}
+    >
+      <span>{label}</span>
+      <span>[{value ? onLabel : offLabel}]</span>
+    </button>
+  )
+}
+
+export default ToggleBracket

package/src/molecules/ViewToggle.jsx

@@ -0,0 +1,101 @@
+import { Icon } from '@kolkrabbi/kol-loader'
+
+/**
+ * ViewToggle — control for switching between view modes.
+ *
+ *   variant="text"   — segmented bare buttons; active uses kol-control--filled,
+ *                      inactive is bare text-meta with text-emphasis on hover.
+ *   variant="icon"   — bordered chip-row container holding square icon
+ *                      buttons. Active uses bg-fg-absolute-24.
+ *   variant="single" — single button binary toggle. Click flips between the
+ *                      two `options` values. The button shows the *current*
+ *                      option's label; active = on (kol-control--filled),
+ *                      inactive = off (bare text). Use for compact on/off
+ *                      where a segmented two-button toggle is overkill.
+ *
+ * Built on the .kol-control shell. Default options use grid-06 / list-01
+ * icons; consumers can pass `options` to override. For `variant="single"`,
+ * the FIRST option in `options` is the "off" value; the SECOND is "on".
+ */
+const ViewToggle = ({
+  viewMode,
+  onViewChange,
+  variant = 'text',
+  options = [
+    { value: 'grid', label: 'Grid view', icon: 'grid-06' },
+    { value: 'list', label: 'List view', icon: 'list-01' }
+  ],
+  className = ''
+}) => {
+  const isIconVariant   = variant === 'icon'
+  const isSingleVariant = variant === 'single'
+
+  if (isSingleVariant) {
+    const [offOpt, onOpt] = options
+    const isOn = viewMode === onOpt.value
+    const next = isOn ? offOpt.value : onOpt.value
+    const cls  = isOn
+      ? `kol-control kol-control--filled kol-control-sm kol-mono-12 ${className}`
+      : `kol-control kol-control-sm kol-mono-12 text-meta hover:text-emphasis ${className}`
+    /* Both labels stack in a single grid cell so the button width is fixed
+     * to the longer label — flipping state never reflows the row. */
+    return (
+      <button
+        type="button"
+        onClick={() => onViewChange(next)}
+        className={cls}
+        aria-pressed={isOn}
+        title={isOn ? onOpt.label : offOpt.label}
+      >
+        <span className="grid">
+          <span className={`col-start-1 row-start-1 ${isOn ? '' : 'invisible'}`}>{onOpt.label}</span>
+          <span className={`col-start-1 row-start-1 ${isOn ? 'invisible' : ''}`}>{offOpt.label}</span>
+        </span>
+      </button>
+    )
+  }
+
+  const containerClasses = isIconVariant
+    ? `inline-flex items-center gap-1 p-1 bg-surface-secondary rounded ${className}`
+    : `flex gap-2 ${className}`
+
+  const buttonClasses = (isActive) => {
+    if (isIconVariant) {
+      // Inset "well" pattern — container is bg-fg-04 (slight lift from page),
+      // active button uses bg-fg-absolute-24 (theme-invariant black, always
+      // darkens regardless of theme) so it reads as recessed/pressed.
+      return `inline-flex items-center justify-center p-1.5 rounded transition-colors text-emphasis cursor-pointer ${
+        isActive ? 'bg-fg-absolute-24' : 'hover:bg-fg-absolute-08'
+      }`
+    }
+    /* Active = filled chip. Inactive = bare-text on the shell base — no
+     * border-reveal hover. (Earlier ghost variant revealed an outline on
+     * hover; that's deliberately gone.) */
+    return isActive
+      ? 'kol-control kol-control--filled kol-control-sm kol-mono-12'
+      : 'kol-control kol-control-sm kol-mono-12 text-meta hover:text-emphasis'
+  }
+
+  return (
+    <div className={containerClasses}>
+      {options.map((option) => (
+        <button
+          key={option.value}
+          onClick={() => onViewChange(option.value)}
+          className={buttonClasses(viewMode === option.value)}
+          aria-label={option.label}
+          aria-pressed={viewMode === option.value}
+          title={option.label}
+        >
+          {isIconVariant && option.icon ? (
+            <Icon name={option.icon} size={14} />
+          ) : (
+            option.label
+          )}
+        </button>
+      ))}
+    </div>
+  )
+}
+
+export default ViewToggle

package/src/organisms/Table.jsx

@@ -0,0 +1,46 @@
+/**
+ * Table — data table.
+ * Styles: src/styles/kol-components-organisms.css.
+ *
+ * Variants:
+ *   default — bordered, column dividers, header bg
+ *   simple  — borderless, flush, no column dividers
+ */
+const Table = ({ caption, columns, rows, variant = 'default', className = '' }) => {
+  const variantClass = variant === 'simple' ? 'kol-table--simple' : ''
+  const wrapperClass = ['kol-table-wrapper', variantClass, className].filter(Boolean).join(' ')
+  return (
+  <div className={wrapperClass}>
+    <table className="kol-table">
+      {caption ? <caption className="sr-only">{caption}</caption> : null}
+      <thead className="kol-table-thead">
+        <tr>
+          {columns.map((column) => (
+            <th
+              key={column.accessor}
+              scope="col"
+              className={column.headerClassName ?? 'kol-table-cell-title'}
+              style={column.style}
+            >
+              {column.header}
+            </th>
+          ))}
+        </tr>
+      </thead>
+      <tbody>
+        {rows.map((row, rowIndex) => (
+          <tr key={row.id ?? row.token ?? rowIndex} className="kol-table-row">
+            {columns.map((column) => (
+              <td key={column.accessor} className={(typeof column.className === 'function' ? column.className(row) : column.className) ?? 'kol-table-cell-text'} style={column.style}>
+                {column.render ? column.render(row) : row[column.accessor] ?? '—'}
+              </td>
+            ))}
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  </div>
+  )
+}
+
+export default Table

package/src/primitives/Accordion.jsx

@@ -0,0 +1,45 @@
+/**
+ * Accordion — collapsible panel group.
+ *
+ * Composition-based: <Accordion> wraps <AccordionPanel> children. Each panel
+ * owns its open/closed state independently (additive — multiple can be open).
+ * For single-open behavior, manage state from the parent and pass controlled
+ * `open` + `onToggle` props to each panel.
+ */
+import { useState } from 'react'
+
+export function Accordion({ children, className = '' }) {
+  return <div className={`kol-accordion mt-2 mb-6 ${className}`.trim()}>{children}</div>
+}
+
+export function AccordionPanel({
+  title,
+  meta,
+  defaultOpen = false,
+  open: controlledOpen,
+  onToggle,
+  children,
+}) {
+  const [internalOpen, setInternalOpen] = useState(defaultOpen)
+  const isControlled = controlledOpen !== undefined
+  const open = isControlled ? controlledOpen : internalOpen
+  const toggle = () => {
+    if (isControlled) onToggle?.(!open)
+    else setInternalOpen(!open)
+  }
+  return (
+    <div className={`kol-accordion-panel border-t border-[var(--kol-fg-08)] last:border-b${open ? ' is-open' : ''}`}>
+      <button
+        type="button"
+        className="kol-accordion-trigger flex items-center gap-4 w-full py-4 bg-transparent border-0 cursor-pointer text-left font-mono text-emphasis transition-colors duration-[120ms] hover:text-fg-88"
+        onClick={toggle}
+        aria-expanded={open}
+      >
+        <span className="kol-accordion-title kol-helper-12 uppercase tracking-widest">{title}</span>
+        {meta && <span className="kol-accordion-meta kol-helper-12 uppercase tracking-widest text-fg-48 ml-auto mr-3">{meta}</span>}
+        <span className="kol-accordion-chevron font-mono text-[18px] text-fg-48 min-w-3 transition-colors duration-[120ms] ml-auto" aria-hidden="true">{open ? '−' : '+'}</span>
+      </button>
+      {open && <div className="kol-accordion-body pt-2 pb-6">{children}</div>}
+    </div>
+  )
+}

package/src/primitives/AssetPlaceholder.jsx

@@ -0,0 +1,28 @@
+/**
+ * AssetPlaceholder — deliberate "missing asset" frame.
+ *
+ * Used by Image + Graphic as fallback when the resource can't be found.
+ * Renders an outlined tile with the asset's category/name so missing assets
+ * are visibly flagged rather than showing the browser's broken-image icon.
+ */
+
+export default function AssetPlaceholder({
+  category,
+  name,
+  aspectRatio = '16 / 9',
+  note = 'missing',
+  className = '',
+}) {
+  const label = [category, name].filter(Boolean).join(' · ')
+  return (
+    <div
+      className={`kol-asset-placeholder flex flex-col items-center justify-center gap-[6px] w-full p-6 border border-dashed border-[var(--kol-fg-24)] rounded-[4px] bg-[var(--kol-fg-02)] text-fg-48 font-mono text-center box-border ${className}`.trim()}
+      style={{ aspectRatio }}
+      role="img"
+      aria-label={`${label || 'asset'} — ${note}`}
+    >
+      <span className="kol-asset-placeholder-note text-[12px] uppercase [letter-spacing:0.12em] text-fg-48">{note}</span>
+      {label && <span className="kol-asset-placeholder-label text-[12px] text-fg-40 [letter-spacing:0.04em]">{label}</span>}
+    </div>
+  )
+}

package/src/primitives/Carousel.jsx

@@ -0,0 +1,50 @@
+import { Children, useCallback, useEffect, useState } from 'react'
+import useEmblaCarousel from 'embla-carousel-react'
+
+export default function Carousel({ children, options = { align: 'start', loop: false, dragFree: true, containScroll: 'trimSnaps' }, className = '' }) {
+  const [emblaRef, emblaApi] = useEmblaCarousel(options)
+  const [canPrev, setCanPrev] = useState(false)
+  const [canNext, setCanNext] = useState(false)
+
+  const onSelect = useCallback((api) => {
+    setCanPrev(api.canScrollPrev())
+    setCanNext(api.canScrollNext())
+  }, [])
+
+  useEffect(() => {
+    if (!emblaApi) return
+    onSelect(emblaApi)
+    emblaApi.on('select', onSelect)
+    emblaApi.on('reInit', onSelect)
+  }, [emblaApi, onSelect])
+
+  const slides = Children.toArray(children)
+
+  return (
+    <div className={`kol-embla ${className}`.trim()}>
+      <div className="kol-embla-viewport" ref={emblaRef}>
+        <div className="kol-embla-container">
+          {slides.map((child, i) => (
+            <div key={i} className="kol-embla-slide">{child}</div>
+          ))}
+        </div>
+      </div>
+      <div className="kol-embla-controls">
+        <button
+          type="button"
+          className="kol-embla-btn border border-fg-16 hover:border-fg-32 text-auto"
+          aria-label="Previous"
+          onClick={() => emblaApi?.scrollPrev()}
+          disabled={!canPrev}
+        >‹</button>
+        <button
+          type="button"
+          className="kol-embla-btn border border-fg-16 hover:border-fg-32 text-auto"
+          aria-label="Next"
+          onClick={() => emblaApi?.scrollNext()}
+          disabled={!canNext}
+        >›</button>
+      </div>
+    </div>
+  )
+}