@kolkrabbi/kol-component 0.124.0 → 0.125.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.124.0",
+  "version": "0.125.0",
   "description": "KOL design-system components — atoms through organisms, emitting canonical kol-* classes. Pairs with @kolkrabbi/kol-theme for styling.",
   "license": "MIT",
   "type": "module",

package/src/molecules/Dropdown.jsx

@@ -61,6 +61,19 @@ const Dropdown = ({
    * Both write variables on the panel that `.kol-dd-list` reads. */
   maxRows = 10,
   rowHeight,
+  /* `onOptionHover(value | null)` (DropdownOptionHoverPreview, kol-mirror
+   * 2026-08-28): the pointer entering a row reports its value, leaving reports
+   * `null` — so a picker over a VISUAL setting can preview the hovered option
+   * live and revert on leave. mirror's blend-mode picker applies the hovered
+   * mode to the composite: you scrub 16 modes against the actual image instead
+   * of committing to each one to look at it. The same case is every picker over
+   * easing curves, palettes, filters, fonts — the DS owns the panel, only the
+   * consumer knows what to preview, so this reports and nothing else.
+   *
+   * `null` fires ON CLOSE too, and that half is load-bearing: a panel dismissed
+   * while a row is hovered would otherwise leave the consumer previewing
+   * forever. It never fires while closed — a closed dropdown has no rows. */
+  onOptionHover,
   defaultOpen = false,
   className = ''
 }) => {
@@ -96,6 +109,21 @@ const Dropdown = ({
     setIsOpen(false)
   }
 
+  /* the hover report, and the close that ends it. `hovered` is a ref, not
+   * state — the preview is the consumer's business and re-rendering the panel
+   * on every row crossed would be a render per pointermove for nothing. */
+  const hovered = useRef(null)
+  const reportHover = (v) => {
+    if (hovered.current === v) return
+    hovered.current = v
+    onOptionHover?.(v)
+  }
+  useEffect(() => {
+    if (isOpen || hovered.current == null) return
+    hovered.current = null
+    onOptionHover?.(null)
+  }, [isOpen]) // eslint-disable-line react-hooks/exhaustive-deps
+
   const currentOption = options.find((opt) => opt.value === value) || options[0]
 
   /* A clamped list (Popover caps the panel to the viewport) can open with the
@@ -174,6 +202,8 @@ const Dropdown = ({
                  * brighten. The check mark is what marks the current value. */
                 hover={false}
                 height={rowHeight}
+                onPointerEnter={onOptionHover ? () => reportHover(option.value) : undefined}
+                onPointerLeave={onOptionHover ? () => reportHover(null) : undefined}
                 onClick={() => handleSelect(option)}
                 shortcut={isActive ? <Icon name="check" size={11} /> : undefined}
               >

package/src/molecules/MenuItem.jsx

@@ -99,12 +99,14 @@ export function MenuItem({
  *   - children  — main label, flex-1.
  *   - shortcut  — trailing content (text shortcut hint, ✓ marker, or icon).
  */
-export function MenuDropdownItem({ onClick, disabled, prefix, iconLeft, shortcut, hover = true, height, children }) {
+export function MenuDropdownItem({ onClick, onPointerEnter, onPointerLeave, disabled, prefix, iconLeft, shortcut, hover = true, height, children }) {
   return (
     <button
       type="button"
       data-menu-item
       onClick={onClick}
+      onPointerEnter={onPointerEnter}
+      onPointerLeave={onPointerLeave}
       disabled={disabled}
       role="menuitem"
       style={height != null ? { height } : undefined}