@kolkrabbi/kol-component 0.1.0

package/README.md

@@ -0,0 +1,24 @@
+# @kolkrabbi/kol-component
+
+The KOL design-system component library — atoms through organisms. Components emit canonical `kol-*` classes; their styling lives in [`@kolkrabbi/kol-theme`](https://www.npmjs.com/package/@kolkrabbi/kol-theme).
+
+## Install
+
+```sh
+npm i @kolkrabbi/kol-component @kolkrabbi/kol-theme
+# react, react-dom are peers; react-router-dom is an optional peer (some components)
+```
+
+Requires a **Vite + Tailwind v4** app and the theme CSS imported (see the theme package).
+
+## Use
+
+```jsx
+import { Button, Tag, Badge, Slider, Dropdown, Table } from '@kolkrabbi/kol-component'
+import { Icon } from '@kolkrabbi/kol-loader'
+
+<Button variant="primary" iconLeft="plus">New</Button>
+<Badge variant="success">Active</Badge>
+```
+
+Atoms (Button, Input, Slider, Toggle\*, …), molecules (Dropdown, Tag, Badge, Modal, Popover, …), primitives (Accordion, Carousel, CodeBlock, Image, …), an organism (Table), graphics, and hooks (`useReveal`, `useScrollSpy`). See the [usage reference](https://github.com/kolkrabbi/kol-design-system/tree/main/docs/usage) for real examples of each.

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@kolkrabbi/kol-component",
+  "version": "0.1.0",
+  "description": "KOL design-system components — atoms through organisms, emitting canonical kol-* classes. Pairs with @kolkrabbi/kol-theme for styling.",
+  "license": "MIT",
+  "type": "module",
+  "main": "./src/index.js",
+  "module": "./src/index.js",
+  "exports": {
+    ".": "./src/index.js"
+  },
+  "files": [
+    "src",
+    "README.md"
+  ],
+  "keywords": [
+    "kol",
+    "kolkrabbi",
+    "design-system",
+    "react",
+    "components"
+  ],
+  "dependencies": {
+    "@floating-ui/react": "^0.27.19",
+    "embla-carousel-react": "^8.6.0",
+    "@kolkrabbi/kol-loader": "0.1.0"
+  },
+  "peerDependencies": {
+    "react": "^18.3.0 || ^19.0.0",
+    "react-dom": "^18.3.0 || ^19.0.0",
+    "react-router-dom": "^6.0.0 || ^7.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react-router-dom": {
+      "optional": true
+    }
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/kolkrabbi/kol-design-system.git",
+    "directory": "packages/component"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/atoms/Avatar.jsx

@@ -0,0 +1,17 @@
+const SIZE_MAP = {
+  sm: 'w-8 h-8 text-xs',
+  md: 'w-10 h-10 text-sm',
+  lg: 'w-14 h-14 text-base',
+  xl: 'w-24 h-24 text-3xl',
+}
+
+export default function Avatar({ initial, size = 'sm', className = '' }) {
+  const sizeCls = SIZE_MAP[size] ?? SIZE_MAP.sm
+  return (
+    <span
+      className={`kol-avatar inline-flex items-center justify-center rounded-full bg-surface-secondary text-emphasis font-narrow font-semibold shrink-0 ${sizeCls} ${className}`}
+    >
+      {initial}
+    </span>
+  )
+}

package/src/atoms/Button.jsx

@@ -0,0 +1,172 @@
+import { Icon } from '@kolkrabbi/kol-loader'
+
+/**
+ * Button — canonical KOL button. Emits kol-btn* classes (CSS in @kol/theme).
+ *
+ * Supports link (href) and button (onClick / default) forms with optional
+ * icons (left / right / icon-only), per-icon hover swap, and a selected
+ * (toggle) state.
+ *
+ * @param {Object} props
+ * @param {ReactNode} props.children - Button content
+ * @param {'primary'|'secondary'|'accent'|'outline'|'ghost'|'control'} props.variant - Visual variant. `control` is an alias for `ghost` (legacy call-sites).
+ * @param {'sm'|'md'|'lg'} props.size - Button size (default: 'md')
+ * @param {string} props.iconLeft - Icon name to display on the left
+ * @param {string} props.iconRight - Icon name to display on the right
+ * @param {string} props.iconLeftHover - Icon to show on hover (left position)
+ * @param {string} props.iconRightHover - Icon to show on hover (right position)
+ * @param {string} props.iconOnly - Icon name for icon-only button
+ * @param {string} props.iconOnlyHover - Icon to show on hover (icon-only)
+ * @param {boolean} props.animateIcon - Disable default hover states to focus on icon animation
+ * @param {boolean} props.quiet - Dimmed at rest, brightens on hover; stays dimmed when disabled. For secondary icon-only chrome.
+ * @param {number} props.iconSize - Size of the icon in pixels (default: auto by size)
+ * @param {number} props.iconGap - Gap between icon and text (default: 8)
+ * @param {string} props.href - Link destination (makes it an <a>)
+ * @param {Function} props.onClick - Click handler (makes it a <button>)
+ * @param {string} props.className - Additional classes
+ * @param {Object} props.style - Inline styles
+ * @param {string} props.type - Button type attribute (default: 'button')
+ * @param {boolean} props.disabled - Disabled state
+ * @param {boolean} props.selected - Selected/active state (toggle highlight)
+ */
+const Button = ({
+  children,
+  variant = 'primary',
+  size = 'md',
+  iconLeft,
+  iconRight,
+  iconLeftHover,
+  iconRightHover,
+  iconOnly,
+  iconOnlyHover,
+  animateIcon = false,
+  quiet = false,
+  iconSize,
+  iconGap,
+  href,
+  onClick,
+  className = '',
+  style = {},
+  type = 'button',
+  disabled = false,
+  selected = false,
+  ...props
+}) => {
+  const resolvedIconSize = iconSize ?? (size === 'sm' ? 14 : size === 'lg' ? 18 : 16)
+
+  // `control` is a legacy alias for `ghost` (kept so web call-sites passing
+  // variant="control" keep working post-migration).
+  const resolvedVariant = variant === 'control' ? 'ghost' : variant
+
+  const variantClass = resolvedVariant === 'primary'
+    ? 'kol-btn-primary'
+    : resolvedVariant === 'accent'
+    ? 'kol-btn-accent'
+    : resolvedVariant === 'outline'
+    ? 'kol-btn-outline'
+    : resolvedVariant === 'ghost'
+    ? 'kol-btn-ghost'
+    : 'kol-btn-secondary'
+
+  // Add size class — pairs the padding rule with its mono type class.
+  const sizeClass = size === 'sm'
+    ? 'kol-btn-sm kol-mono-12'
+    : size === 'lg'
+    ? 'kol-btn-lg kol-mono-16'
+    : 'kol-btn-md kol-mono-14'
+
+  // Add kol-btn-animate class if animateIcon is true to disable default hover states
+  const animateClass = animateIcon ? 'kol-btn-animate' : ''
+  const quietClass    = quiet ? 'kol-btn-quiet' : ''
+  const selectedClass = selected ? 'kol-btn-selected' : ''
+
+  const combinedClass = `kol-btn ${variantClass} ${sizeClass} ${animateClass} ${quietClass} ${selectedClass} ${className}`.trim().replace(/\s+/g, ' ')
+
+  // Render icon with optional hover state
+  const renderIcon = (iconName, iconHoverName) => {
+    if (!iconName && !iconHoverName) return null
+
+    // If no hover icon, render single icon
+    if (!iconHoverName) {
+      return <Icon name={iconName} size={resolvedIconSize} />
+    }
+
+    // Render both default and hover icons with positioning
+    return (
+      <span className="kol-icon-swap-container" style={{ position: 'relative', display: 'inline-flex', width: resolvedIconSize, height: resolvedIconSize, overflow: 'hidden' }}>
+        <Icon
+          name={iconName}
+          size={resolvedIconSize}
+          className="kol-icon-default"
+          style={{ position: 'absolute' }}
+        />
+        <Icon
+          name={iconHoverName}
+          size={resolvedIconSize}
+          className="kol-icon-hover"
+          style={{ position: 'absolute' }}
+        />
+      </span>
+    )
+  }
+
+  // Render content with icons
+  const renderContent = () => {
+    // Icon-only button
+    if (iconOnly) {
+      return renderIcon(iconOnly, iconOnlyHover)
+    }
+
+    // Button with icon(s) and text
+    if (iconLeft || iconRight || iconLeftHover || iconRightHover) {
+      return (
+        <span className="flex items-center" style={{ gap: iconGap ?? 8 }}>
+          {(iconLeft || iconLeftHover) && <span style={{ marginLeft: -2 }}>{renderIcon(iconLeft, iconLeftHover)}</span>}
+          {children}
+          {(iconRight || iconRightHover) && <span style={{ marginRight: -2 }}>{renderIcon(iconRight, iconRightHover)}</span>}
+        </span>
+      )
+    }
+
+    // Text-only button
+    return children
+  }
+
+  // Merge icon-only specific styles with user-provided styles
+  const mergedStyle = iconOnly
+    ? { lineHeight: 0, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', ...style }
+    : style
+
+  // Render as button
+  if (onClick || !href) {
+    return (
+      <button
+        onClick={onClick}
+        type={type}
+        className={combinedClass}
+        style={mergedStyle}
+        disabled={disabled}
+        aria-pressed={selected ? true : undefined}
+        aria-label={iconOnly ? (props['aria-label'] || 'Button') : undefined}
+        {...props}
+      >
+        {renderContent()}
+      </button>
+    )
+  }
+
+  // Render as link
+  return (
+    <a
+      href={href}
+      className={combinedClass}
+      style={mergedStyle}
+      aria-label={iconOnly ? (props['aria-label'] || 'Link') : undefined}
+      {...props}
+    >
+      {renderContent()}
+    </a>
+  )
+}
+
+export default Button

package/src/atoms/ColorSwatch.jsx

@@ -0,0 +1,126 @@
+/**
+ * ColorSwatch — fixed-size color chip atom.
+ *
+ *   onClick provided → renders <button> with hover + selected states
+ *   onClick omitted  → renders <span aria-hidden> — non-interactive preview
+ *
+ * Pass `showTransparent` to render the TransparentX overlay (for null /
+ * unset color slots). When true, bg goes transparent regardless of `hex`.
+ *
+ * Props:
+ *   hex             — color string, e.g. '#FF6F00'. Ignored if showTransparent.
+ *   selected        — adds active border + ring (border-fg-64 ring-1).
+ *   size            — number (px) for fixed-size, 'fill' (w-full aspect-square,
+ *                     for grid cells that should stay square), or 'stretch'
+ *                     (w-full h-full, for grid cells that stretch to row height).
+ *                     Default 24.
+ *   radius          — 'sm' (4px, default) | 'tight' (2px) | 'none' | 'full' (circle).
+ *   frame           — boolean (default true). When false, no border drawn —
+ *                     used by tightly-packed grid layouts.
+ *   variant         — 'default' (border-based chrome) |
+ *                     'halo' (macOS-port double box-shadow halo). Halo
+ *                     overrides `frame` since it provides its own ring.
+ *   hoverable       — boolean (default true). When false, no hover border
+ *                     state is applied even if `onClick` is set. For static
+ *                     chips that just open a popover (e.g. inspector fill /
+ *                     stroke swatches).
+ *   showTransparent — universal "disabled / no value / unset" indicator.
+ *                     Renders white background + TransparentX diagonal
+ *                     stroke; rounded corners clip the line cleanly via
+ *                     `overflow-hidden` on the swatch root.
+ *   transparentTone — tone of the TransparentX stroke when `showTransparent`
+ *                     is true: 'warning' (default) | 'error' | 'info' |
+ *                     'success'. Maps through to `var(--ui-{tone})`.
+ *   onClick         — if provided, renders as <button>; else <span>.
+ *   title           — passes through.
+ */
+import TransparentX from './TransparentX'
+
+const SIZE_CLASSES = {
+  fill:    'w-full aspect-square',
+  stretch: 'w-full h-full',
+}
+
+const RADIUS_CLASSES = {
+  none:  'rounded-none',
+  tight: 'rounded-[2px]',
+  sm:    'rounded',
+  full:  'rounded-full',
+}
+
+const HALO_SHADOW = '0 0 0 1px #000, 0 0 0 2px #505050'
+
+export default function ColorSwatch({
+  hex,
+  selected = false,
+  size = 24,
+  radius = 'tight',
+  frame = true,
+  variant = 'default',
+  hoverable = true,
+  showTransparent = false,
+  transparentTone = 'warning',
+  onClick,
+  title,
+  className = '',
+  ...rest
+}) {
+  const interactive = typeof onClick === 'function'
+  const isNamed = typeof size === 'string'
+  const sizeCls   = isNamed ? (SIZE_CLASSES[size] ?? '') : ''
+  const sizeStyle = isNamed ? null : { width: size, height: size }
+
+  const isHalo  = variant === 'halo'
+  const radiusCls = RADIUS_CLASSES[radius] ?? RADIUS_CLASSES.sm
+
+  /* Halo provides its own ring via box-shadow → no border classes.
+   * frame=false → consumer wants a borderless chip (e.g. swatch grids
+   * that tile edge-to-edge). */
+  const showBorder = !isHalo && frame
+
+  /* Border policy:
+   *   default state (not selected) — no border, clean chip
+   *   selected                     — 2px border-fg-64 (the selection chrome)
+   *   halo variant                 — handled separately via box-shadow
+   * `frame` and `hoverable` are kept on the API but no longer drive a
+   * default-state border; they're advisory for future variants. */
+  const cls = [
+    'relative shrink-0 inline-flex overflow-hidden',
+    radiusCls,
+    !isHalo && selected ? 'border-2 border-fg-64' : '',
+    interactive ? 'cursor-pointer' : '',
+    sizeCls,
+    className,
+  ].filter(Boolean).join(' ')
+
+  const style = {
+    background: showTransparent ? '#FFFFFF' : (hex || 'transparent'),
+    ...(isHalo && { boxShadow: HALO_SHADOW }),
+    ...sizeStyle,
+  }
+
+  const inner = showTransparent ? <TransparentX tone={transparentTone} /> : null
+
+  if (interactive) {
+    return (
+      <button
+        {...rest}
+        type="button"
+        onClick={onClick}
+        title={title}
+        aria-label={rest['aria-label'] ?? hex ?? 'transparent'}
+        aria-pressed={selected}
+        className={cls}
+        style={style}
+      >
+        {inner}
+      </button>
+    )
+  }
+
+  return (
+    <span {...rest} aria-hidden="true" title={title} className={cls} style={style}>
+      {inner}
+    </span>
+  )
+}

package/src/atoms/Divider.jsx

@@ -0,0 +1,34 @@
+import React from 'react'
+
+/**
+ * Divider - Horizontal or vertical divider line
+ *
+ * Simple atom for creating separator lines
+ * Uses bg-fg-08 for consistent 8% opacity across themes by default
+ * Vertical variant includes wrapper div for proper flex behavior
+ *
+ * @param {Object} props
+ * @param {string} props.variant - 'horizontal' or 'vertical' (default: 'horizontal')
+ * @param {string} props.className - Additional classes
+ * @param {string} props.opacity - Opacity level (01, 02, 04, 08, 12, 16, 24, 32, 48, 64, 80, 88, 96) (default: '08')
+ */
+const Divider = ({ variant = 'horizontal', className = '', opacity = '08', inverse = false }) => {
+  const isVertical = variant === 'vertical'
+  const opacityClass = inverse ? `bg-fg-inverse-${opacity}` : `bg-fg-${opacity}`
+
+  if (isVertical) {
+    return (
+      <div className={`self-stretch flex justify-center items-center ${className}`.trim()}>
+        <div className={opacityClass} style={{ width: '1px', height: '100%' }} />
+      </div>
+    )
+  }
+
+  return (
+    <div className={className}>
+      <div className={`${opacityClass} h-px w-full`} />
+    </div>
+  )
+}
+
+export default Divider

package/src/atoms/Input.jsx

@@ -0,0 +1,121 @@
+import { Icon } from '@kolkrabbi/kol-loader'
+
+/**
+ * Input — single-input atom built on the .kol-control shell.
+ *
+ *   variant="filled" (default) — persistent solid bg
+ *   variant="ghost"            — borderless at rest, reveals on hover/focus
+ *   variant="outline"          — bordered, transparent bg (also: the
+ *                                forced-reveal / "is-edited" state of a
+ *                                ghost field — flip variant to outline)
+ *
+ *   size="sm" / "md" (default) / "lg" — matched padding + type class
+ *
+ * Sizing:
+ *   chars — HTML `size` attribute on the inner input. When set, the inner
+ *     <input> sizes to N characters and the shell hugs (padding + prefix +
+ *     N chars + suffix + padding). Use for known-format values (hex,
+ *     percentage, integer counts). Drops `flex-1` so the input doesn't
+ *     overflow into empty trailing space.
+ *   width — explicit shell width override (e.g. "100%", "240px"). For
+ *     stretch behavior, set the shell width and let the inner input fill.
+ *
+ * Props:
+ *   prefix / suffix — small static text (e.g. "#", "%") rendered inside
+ *     the shell at text-meta. aria-hidden — affordances, not labels.
+ *   iconLeft — name of a leading icon rendered inside the shell (e.g.
+ *     "search-16"). iconSize overrides the size-derived default.
+ *   uppercase — adds Tailwind `uppercase` to the input element only.
+ *
+ * Chrome (bg/border/padding/transition/disabled) comes from .kol-control;
+ * Input owns prefix/suffix/icon layout + the inner <input> styling.
+ */
+
+const SIZE_TYPE = { sm: 'kol-mono-12', md: 'kol-mono-14', lg: 'kol-mono-16' }
+const ICON_SIZE = { sm: 14, md: 14, lg: 18 }
+
+export default function Input({
+  type = 'text',
+  value,
+  onChange,
+  variant = 'filled',
+  size = 'md',
+  chars,
+  prefix,
+  suffix,
+  iconLeft,
+  iconSize = null,
+  placeholder,
+  disabled = false,
+  uppercase = false,
+  width,
+  className = '',
+  inputClassName = '',
+  ...inputProps
+}) {
+  const isNumber = type === 'number'
+  const fixedChars = typeof chars === 'number'
+  const resolvedIconSize = iconSize ?? ICON_SIZE[size] ?? 14
+
+  const shellCls = [
+    'kol-control',
+    `kol-control--${variant}`,
+    `kol-control-${size}`,
+    SIZE_TYPE[size],
+    'cursor-text',
+    className,
+  ].filter(Boolean).join(' ')
+
+  /* Pin inner input height to the typography token's line-height. Without
+   * this the `<input>` renders ~0.5px taller than the equivalent <button>
+   * or <label> at the same kol-mono-N — Chromium computes input height
+   * from the font's ascender+descender (font-metric), not strictly from
+   * CSS line-height. Result: kol-control-sm ends up 26.5px instead of 26.
+   * h-4 / h-[18px] / h-[22px] match the kol-mono-12 / -14 / -16 line-heights. */
+  const heightCls = size === 'sm' ? 'h-4' : size === 'md' ? 'h-[18px]' : 'h-[22px]'
+
+  const inputCls = [
+    'min-w-0 bg-transparent border-none outline-none text-auto',
+    heightCls,
+    !fixedChars && 'flex-1',
+    /* Balance the dim prefix/suffix visual weight with extra inner padding
+     * on the opposite side. Without this the bright value sits closer to
+     * the affordance than to the empty edge, reads off-balance. */
+    prefix !== undefined && 'pr-1',
+    suffix !== undefined && 'pl-1',
+    uppercase && 'uppercase',
+    isNumber && 'hide-number-spinners',
+    inputClassName,
+  ].filter(Boolean).join(' ')
+
+  return (
+    <label
+      className={shellCls}
+      style={width ? { width: typeof width === 'number' ? `${width}px` : width } : undefined}
+      aria-disabled={disabled || undefined}
+    >
+      {iconLeft && (
+        <span aria-hidden="true" className="flex items-center text-auto opacity-50 shrink-0 pr-2">
+          <Icon name={iconLeft} size={resolvedIconSize} />
+        </span>
+      )}
+      {prefix !== undefined && (
+        <span aria-hidden="true" className="text-meta pr-1 shrink-0">{prefix}</span>
+      )}
+      <input
+        type={type}
+        value={value ?? ''}
+        onChange={onChange}
+        placeholder={placeholder}
+        disabled={disabled}
+        spellCheck={false}
+        size={fixedChars ? chars : undefined}
+        className={inputCls}
+        {...inputProps}
+      />
+      {suffix !== undefined && (
+        <span aria-hidden="true" className="text-meta pl-1 shrink-0">{suffix}</span>
+      )}
+    </label>
+  )
+}

package/src/atoms/Label.jsx

@@ -0,0 +1,12 @@
+/**
+ * Label — minimal form label. Inherits typography from parent (consumer
+ * supplies `kol-helper-N` or similar via className when needed). Defaults
+ * to `text-fg-48` for the muted-control look.
+ */
+export default function Label({ children, htmlFor, className = '' }) {
+  return (
+    <label htmlFor={htmlFor} className={`text-fg-48 ${className}`}>
+      {children}
+    </label>
+  )
+}

package/src/atoms/Slider.jsx

@@ -0,0 +1,129 @@
+import { useEffect, useMemo, useState } from 'react'
+import Input from './Input.jsx'
+
+/**
+ * Slider — range slider with label and an editable value readout.
+ *
+ * Variants (track/shell styling):
+ *   default — bordered track + boxed value.
+ *   minimal — bare track + boxed value. 99% of real usage (foundry previews,
+ *             inline controls). PRESERVED from web.
+ *   subtle  — filled rounded chip; for inspector-style controls.
+ *
+ * The value readout is an editable <Input> (type a value, commit on
+ * blur / Enter, revert on Escape). Track color is exposed as the
+ * `--kol-slider-track` CSS variable on `.slider-black`; override
+ * per-instance via style={{ '--kol-slider-track': '...' }}.
+ *
+ * @param {Object} props
+ * @param {string} props.label - Slider label text
+ * @param {number} props.min - Minimum value
+ * @param {number} props.max - Maximum value
+ * @param {number} props.value - Current value
+ * @param {Function} props.onChange - Change handler
+ * @param {'default'|'minimal'|'subtle'} props.variant - Visual variant (default: 'default')
+ * @param {string} props.className - Additional wrapper classes
+ * @param {number} props.displayWidth - Width of the value readout, in characters (default: 6)
+ * @param {string} props.fontSize - Font size for label/value (e.g., '11px')
+ * @param {number} props.step - Slider step increment (default: 1)
+ * @param {Function} props.formatValue - Optional formatter for displayed value
+ */
+const Slider = ({
+  label,
+  min = 0,
+  max = 100,
+  value = 0,
+  onChange,
+  variant = 'default',
+  className = '',
+  displayWidth = 6,
+  fontSize,
+  step = 1,
+  formatValue
+}) => {
+  const handleChange = (e) => {
+    if (onChange) {
+      onChange(Number(e.target.value))
+    }
+  }
+
+  const variantClass = variant === 'minimal'
+    ? 'control-slider-minimal'
+    : variant === 'subtle'
+    ? 'control-slider-subtle'
+    : 'control-slider'
+
+  const decimals = useMemo(() => {
+    if (formatValue) return null
+    if (!Number.isFinite(step)) return 0
+    if (step >= 1) return 0
+    const decimalPart = step.toString().split('.')[1]
+    return decimalPart ? decimalPart.length : 2
+  }, [formatValue, step])
+
+  const displayValue = useMemo(() => {
+    if (formatValue) return String(formatValue(value))
+    if (decimals && decimals > 0) {
+      return Number(value).toFixed(decimals)
+    }
+    return String(Math.round(value))
+  }, [decimals, formatValue, value])
+
+  /* Editable readout — local string state lets the user type intermediate
+   * values (e.g. "-" while entering a negative) without clamping mid-keystroke.
+   * Commits on blur / Enter; reverts to current value on Escape. */
+  const [draft, setDraft]     = useState(displayValue)
+  const [editing, setEditing] = useState(false)
+  useEffect(() => { if (!editing) setDraft(displayValue) }, [displayValue, editing])
+
+  const commit = () => {
+    setEditing(false)
+    const parsed = Number(draft)
+    if (!Number.isFinite(parsed) || onChange == null) {
+      setDraft(displayValue)
+      return
+    }
+    const clamped = Math.max(min, Math.min(max, parsed))
+    onChange(clamped)
+    setDraft(String(clamped))
+  }
+
+  const onKeyDown = (e) => {
+    if (e.key === 'Enter')  { e.currentTarget.blur() }
+    if (e.key === 'Escape') { setDraft(displayValue); setEditing(false); e.currentTarget.blur() }
+  }
+
+  return (
+    <div className={`${variantClass} gap-3 shadow-none ${className}`}>
+      {label && (
+        <label className="kol-helper-12 whitespace-nowrap shrink-0 w-fit" style={fontSize ? { fontSize } : undefined}>
+          {label}
+        </label>
+      )}
+      <input
+        type="range"
+        min={min}
+        max={max}
+        step={step}
+        value={value}
+        onChange={handleChange}
+        className="slider-black flex-1 w-full cursor-pointer"
+      />
+      <Input
+        type="text"
+        inputMode="decimal"
+        variant="filled"
+        size="sm"
+        chars={displayWidth}
+        value={draft}
+        onFocus={(e) => { setEditing(true); e.target.select() }}
+        onChange={(e) => setDraft(e.target.value)}
+        onBlur={commit}
+        onKeyDown={onKeyDown}
+        inputClassName="text-center"
+      />
+    </div>
+  )
+}
+
+export default Slider