@kolkrabbi/kol-component 0.1.0

package/src/molecules/DropdownTagFilter.jsx

@@ -0,0 +1,253 @@
+import React, { useState, useRef, useEffect } from 'react'
+
+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 }
+}
+
+/**
+ * Dropdown Tag Filter
+ * Multi-select dropdown where all items start selected
+ * Click to deselect, with "Deselect All" option
+ */
+const DropdownTagFilter = ({
+  options = [],
+  selectedValues = new Set(),
+  onChange,
+  className = '',
+  size
+}) => {
+  const [isOpen, setIsOpen] = useState(false)
+  const dropdownRef = useRef(null)
+  const [resolvedSize, setResolvedSize] = useState('md')
+
+  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])
+
+  const metrics = SIZE_MAP[resolvedSize] || SIZE_MAP.md
+
+  // Close dropdown when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        setIsOpen(false)
+      }
+    }
+
+    if (isOpen) {
+      document.addEventListener('mousedown', handleClickOutside)
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside)
+    }
+  }, [isOpen])
+
+  // Handle keyboard navigation
+  useEffect(() => {
+    const handleKeyDown = (event) => {
+      if (!isOpen) return
+      if (event.key === 'Escape') {
+        setIsOpen(false)
+      }
+    }
+
+    if (isOpen) {
+      document.addEventListener('keydown', handleKeyDown)
+    }
+
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown)
+    }
+  }, [isOpen])
+
+  const handleToggle = (value) => {
+    onChange?.(value)
+  }
+
+  const handleDeselectAll = () => {
+    onChange?.(null) // Pass null to signal "deselect all"
+  }
+
+  const selectedCount = selectedValues.size
+  const totalCount = options.length
+  const label =
+    selectedCount === 0
+      ? 'No tags'
+      : selectedCount === totalCount
+      ? 'All tags'
+      : `${selectedCount} selected`
+
+  return (
+    <div
+      ref={dropdownRef}
+      className={`relative inline-block ${className}`}
+      style={{ zIndex: isOpen ? 100 : 50 }}
+    >
+      <div
+        className="min-w-[180px]"
+        style={{
+          border: '1px solid var(--kol-border-default)',
+          borderRadius: isOpen
+            ? `${metrics.radius}px ${metrics.radius}px 0 0`
+            : `${metrics.radius}px`,
+          backgroundColor: 'var(--kol-surface-primary)',
+          color: 'var(--kol-surface-on-primary)'
+        }}
+      >
+        <button
+          type="button"
+          onClick={() => setIsOpen(!isOpen)}
+          className="w-full flex items-center justify-between transition-colors duration-200"
+          style={{
+            backgroundColor: 'transparent',
+            border: 'none',
+            padding: `${metrics.paddingY}px ${metrics.paddingX}px`,
+            fontSize: `${metrics.fontSize}px`,
+            lineHeight: '120%',
+            fontFamily: 'var(--kol-font-family-mono)'
+          }}
+          aria-haspopup="listbox"
+          aria-expanded={isOpen}
+          data-state={isOpen ? 'open' : 'closed'}
+        >
+          <span className="opacity-100">{label}</span>
+          <svg
+            className="ml-auto transition-transform duration-300"
+            style={{
+              transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)',
+              width: `${metrics.icon}px`,
+              height: `${metrics.icon}px`
+            }}
+            viewBox="0 0 12 12"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="m3 5 3 3 3-3"
+              stroke="currentColor"
+              strokeWidth="1.25"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          </svg>
+        </button>
+      </div>
+
+      {isOpen && (
+        <div
+          className="absolute w-full border border-t-0"
+          style={{
+            backgroundColor: 'var(--kol-surface-primary)',
+            color: 'var(--kol-surface-on-primary)',
+            borderColor: 'var(--kol-border-default)',
+            top: '100%',
+            left: 0,
+            marginTop: '-1px',
+            borderRadius: `0 0 ${metrics.radius}px ${metrics.radius}px`
+          }}
+          role="listbox"
+        >
+          <div style={{ padding: `0 ${metrics.paddingX}px` }}>
+            <div
+              style={{
+                height: '1px',
+                backgroundColor: 'var(--kol-border-default)'
+              }}
+            />
+          </div>
+
+          <div className="flex max-h-[300px] flex-col items-start overflow-y-auto py-2">
+            <button
+              type="button"
+              onClick={handleDeselectAll}
+              className="w-full text-left transition-opacity duration-150"
+              style={{
+                backgroundColor: 'transparent',
+                opacity: selectedCount === 0 ? 0.4 : 1,
+                padding: `8px ${metrics.paddingX}px`,
+                fontSize: `${metrics.fontSize}px`,
+                lineHeight: '120%',
+                fontFamily: 'var(--kol-font-family-mono)'
+              }}
+            >
+              Deselect all
+            </button>
+
+            {options.map((option) => {
+              const isSelected = selectedValues.has(option.value)
+              return (
+                <button
+                  key={option.value}
+                  type="button"
+                  onClick={() => handleToggle(option.value)}
+                  className="w-full text-left transition-opacity duration-150 relative"
+                  style={{
+                    backgroundColor: 'transparent',
+                    opacity: isSelected ? 1 : 0.4,
+                    padding: `8px ${metrics.paddingX}px`,
+                    fontSize: `${metrics.fontSize}px`,
+                    lineHeight: '120%',
+                    fontFamily: 'var(--kol-font-family-mono)'
+                  }}
+                  role="option"
+                  aria-selected={isSelected}
+                  onMouseEnter={(event) => {
+                    event.currentTarget.style.opacity = '1'
+                  }}
+                  onMouseLeave={(event) => {
+                    if (!isSelected) {
+                      event.currentTarget.style.opacity = '0.4'
+                    }
+                  }}
+                >
+                  {isSelected && (
+                    <span
+                      style={{
+                        position: 'absolute',
+                        left: '12px',
+                        top: '50%',
+                        transform: 'translateY(-50%)',
+                        width: '4px',
+                        height: '4px',
+                        borderRadius: '50%',
+                        backgroundColor: 'var(--kol-surface-on-primary)'
+                      }}
+                    />
+                  )}
+                  <span>{option.label}</span>
+                </button>
+              )
+            })}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default DropdownTagFilter

package/src/molecules/LabeledControl.jsx

@@ -0,0 +1,66 @@
+/**
+ * LabeledControl — generic slot for label + interactive control body.
+ *
+ * Default layout: label on top (`flex-col`). Pass `inline` for a horizontal
+ * label-left / control-right layout (label fixed-width, control flex-1).
+ *
+ * Compose with any control as children:
+ *   <LabeledControl label="Columns · 4">
+ *     <Slider ... />
+ *   </LabeledControl>
+ *   <LabeledControl inline label="Weight">
+ *     <Input ... />
+ *   </LabeledControl>
+ *
+ * Props:
+ *   label  — small label text (uppercase, kol-helper-10).
+ *   hint   — optional secondary text after the label (lower-case, less
+ *            weight). Useful for current-value displays, units, etc.
+ *   inline — bool. When true, renders horizontally with label on the left.
+ *   labelWidth — px width for the label column when `inline`. Default 48.
+ *   children — the control body.
+ *   className — additional classes on the wrapper.
+ */
+export default function LabeledControl({
+  label,
+  hint,
+  inline = false,
+  labelWidth = 48,
+  children,
+  className = '',
+}) {
+  const showLabel  = !!label
+  const labelInner = (
+    <>
+      {label}
+      {hint !== undefined && (
+        <span className="ml-2 normal-case tracking-normal text-subtle">{hint}</span>
+      )}
+    </>
+  )
+
+  if (inline) {
+    return (
+      <div className={`flex items-center gap-3 ${className}`}>
+        {showLabel && (
+          <span
+            className="kol-helper-10 uppercase tracking-widest text-meta shrink-0"
+            style={{ width: labelWidth }}
+          >
+            {labelInner}
+          </span>
+        )}
+        <div className="flex-1 min-w-0">{children}</div>
+      </div>
+    )
+  }
+
+  return (
+    <div className={`flex flex-col gap-2 ${className}`}>
+      {showLabel && (
+        <span className="kol-helper-10 uppercase tracking-widest text-meta">{labelInner}</span>
+      )}
+      {children}
+    </div>
+  )
+}

package/src/molecules/MenuItem.jsx

@@ -0,0 +1,148 @@
+import { useState } from 'react'
+import { Icon } from '@kolkrabbi/kol-loader'
+import { PopoverPanel, usePopover } from './Popover.jsx'
+
+/**
+ * MenuItem — top-level menu entry. Trigger button + popover panel.
+ *
+ *   <MenuItem label="File">
+ *     <MenuDropdownItem onClick={…}>Save</MenuDropdownItem>
+ *     <MenuDropdownItem onClick={…}>Export…</MenuDropdownItem>
+ *   </MenuItem>
+ *
+ * Built on `usePopover` (`@floating-ui/react`): portal-rendered panel
+ * (escapes overflow), auto-flip + viewport shift, click-outside / Escape
+ * dismiss, focus management. `align="end"` switches the placement to
+ * `bottom-end` for right-aligned panels (Templates menu).
+ *
+ * For value-list selection (pick one of N with active state) use the
+ * `Dropdown` molecule instead — MenuItem is for action menus / popovers
+ * that hold arbitrary children.
+ */
+export function MenuItem({
+  label,
+  children,
+  align = 'start',
+  panelClassName = '',
+  panelStyle,
+  buttonClassName = '',
+}) {
+  const [open, setOpen] = useState(false)
+  const popover = usePopover({
+    open,
+    onOpenChange: setOpen,
+    placement: align === 'end' ? 'bottom-end' : 'bottom-start',
+    offset: 4,
+    role: 'menu',
+  })
+
+  const close = () => setOpen(false)
+
+  return (
+    <>
+      <button
+        ref={popover.refs.setReference}
+        {...popover.getReferenceProps()}
+        type="button"
+        className={`kol-helper-12 px-3 h-8 inline-flex items-center gap-2 rounded text-body hover:text-emphasis transition-colors ${buttonClassName}`}
+      >
+        <span>{label}</span>
+        <Icon
+          name="chevron-down"
+          size={10}
+          style={{ transform: open ? 'rotate(180deg)' : 'rotate(0deg)', transition: 'transform 200ms' }}
+        />
+      </button>
+      <PopoverPanel
+        popover={popover}
+        panel={false}
+        focus={false}
+        className={`bg-surface-secondary rounded ${panelClassName}`}
+        style={panelStyle}
+      >
+        <div
+          onClick={(e) => {
+            /* close on item click — items inside fire their handler then bubble. */
+            if (e.target.closest('[data-menu-item]')) close()
+          }}
+        >
+          {typeof children === 'function' ? children({ close }) : children}
+        </div>
+      </PopoverPanel>
+    </>
+  )
+}
+
+/**
+ * MenuDropdownItem — action row inside a MenuItem's dropdown panel.
+ * Renders as a button so it picks up disabled, focus, and keyboard
+ * activation. The parent MenuItem closes automatically on click via a
+ * delegated handler that matches the `data-menu-item` attr.
+ *
+ * Slots:
+ *   - prefix    — leading content of arbitrary width (e.g. palette swatch
+ *                 strip). Use for visuals wider than a single icon.
+ *   - iconLeft  — leading icon, fixed 16px width column (rows align).
+ *   - children  — main label, flex-1.
+ *   - shortcut  — trailing content (text shortcut hint, ✓ marker, or icon).
+ */
+export function MenuDropdownItem({ onClick, disabled, prefix, iconLeft, shortcut, 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-body hover:text-emphasis disabled:opacity-40 disabled:cursor-not-allowed text-left"
+    >
+      {prefix && <span className="shrink-0 inline-flex items-center">{prefix}</span>}
+      {iconLeft && <span className="shrink-0 w-4 inline-flex items-center justify-center">{iconLeft}</span>}
+      <span className="flex-1 truncate">{children}</span>
+      {shortcut && <span className="kol-helper-10 text-emphasis shrink-0 inline-flex items-center">{shortcut}</span>}
+    </button>
+  )
+}
+
+export function MenuDropdownDivider() {
+  return <div className="border-t border-fg-08 my-1" />
+}
+
+/**
+ * MenuDropdownNest — accordion-style row inside a dropdown panel. Click
+ * the row to expand/collapse its children inline (below the row, in the
+ * same panel). The trailing chevron rotates 90° to indicate state.
+ *
+ * Same visual shape as MenuDropdownItem at rest. Clicking a leaf
+ * MenuDropdownItem inside an open nest still closes the entire menu via
+ * the standard data-menu-item bubble. Clicking the nest row itself only
+ * toggles its own expansion.
+ */
+export function MenuDropdownNest({ prefix, iconLeft, label, children }) {
+  const [open, setOpen] = useState(false)
+  return (
+    <>
+      <button
+        type="button"
+        onClick={() => setOpen((v) => !v)}
+        aria-expanded={open}
+        className="w-full kol-helper-12 px-3 h-8 inline-flex items-center gap-2 text-body hover:text-emphasis text-left"
+      >
+        {prefix && <span className="shrink-0 inline-flex items-center">{prefix}</span>}
+        {iconLeft && <span className="shrink-0 w-4 inline-flex items-center justify-center">{iconLeft}</span>}
+        <span className="flex-1 truncate">{label}</span>
+        <Icon
+          name="chevron-down"
+          size={10}
+          className="text-emphasis shrink-0"
+          style={{ transform: open ? 'rotate(0deg)' : 'rotate(-90deg)', transition: 'transform 200ms' }}
+        />
+      </button>
+      {open && (
+        <div className="ml-3 border-l border-fg-08">
+          {children}
+        </div>
+      )}
+    </>
+  )
+}

package/src/molecules/MenuPopover.jsx

@@ -0,0 +1,128 @@
+import { useEffect, useRef, useState } from 'react'
+
+/**
+ * MenuPopover — generic action-menu / popover primitive.
+ *
+ *   <MenuPopover label="File">
+ *     <MenuItem onClick={…}>Save</MenuItem>
+ *     <MenuItem onClick={…}>Export…</MenuItem>
+ *   </MenuPopover>
+ *
+ * Opens on click, closes on outside-click + Escape, anchors to the trigger
+ * via getBoundingClientRect + position:fixed so it escapes overflow:auto
+ * clipping. Pass `panelClassName` to size the panel (e.g. wider for
+ * Templates).
+ *
+ * For value-list selection (single value, active state) use `Dropdown`
+ * instead — this primitive is for action menus / popover panels that
+ * hold arbitrary children.
+ */
+export function MenuPopover({
+  label,
+  children,
+  align = 'start',
+  panelClassName = '',
+  panelStyle,
+  buttonClassName = '',
+}) {
+  const [open, setOpen] = useState(false)
+  const wrapRef   = useRef(null)
+  const buttonRef = useRef(null)
+  const [panelPos, setPanelPos] = useState(null)
+
+  useEffect(() => {
+    if (!open) return
+    const onDown = (e) => {
+      if (!wrapRef.current?.contains(e.target)) setOpen(false)
+    }
+    const onKey = (e) => { if (e.key === 'Escape') setOpen(false) }
+    document.addEventListener('mousedown', onDown)
+    document.addEventListener('keydown',   onKey)
+    return () => {
+      document.removeEventListener('mousedown', onDown)
+      document.removeEventListener('keydown',   onKey)
+    }
+  }, [open])
+
+  useEffect(() => {
+    if (!open) { setPanelPos(null); return }
+    const update = () => {
+      const rect = buttonRef.current?.getBoundingClientRect()
+      if (!rect) return
+      setPanelPos({ top: rect.bottom + 4, left: rect.left, right: rect.right })
+    }
+    update()
+    window.addEventListener('resize', update)
+    window.addEventListener('scroll', update, true)
+    return () => {
+      window.removeEventListener('resize', update)
+      window.removeEventListener('scroll', update, true)
+    }
+  }, [open])
+
+  const close = () => setOpen(false)
+
+  const positioned = panelPos && (
+    align === 'end'
+      ? { top: panelPos.top, right: window.innerWidth - panelPos.right }
+      : { top: panelPos.top, left: panelPos.left }
+  )
+
+  return (
+    <div ref={wrapRef} className="relative inline-block">
+      <button
+        ref={buttonRef}
+        type="button"
+        onClick={() => setOpen((v) => !v)}
+        aria-haspopup="menu"
+        aria-expanded={open}
+        className={`kol-helper-12 px-3 h-8 inline-flex items-center gap-1 rounded text-meta hover:text-emphasis transition-colors ${buttonClassName}`}
+      >
+        <span>{label}</span>
+        <svg width="10" height="10" viewBox="0 0 12 12" aria-hidden="true">
+          <path d="m3 5 3 3 3-3" stroke="currentColor" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" fill="none" />
+        </svg>
+      </button>
+      {open && positioned && (
+        <div
+          role="menu"
+          className={`fixed z-[1000] bg-surface-primary border border-fg-08 rounded shadow-lg ${panelClassName}`}
+          style={{ ...positioned, ...panelStyle }}
+          onClick={(e) => {
+            /* close on item click — items inside fire their handler then bubble. */
+            if (e.target.closest('[data-menu-item]')) close()
+          }}
+        >
+          {typeof children === 'function' ? children({ close }) : children}
+        </div>
+      )}
+    </div>
+  )
+}
+
+/**
+ * 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" />
+}