@kolkrabbi/kol-component 0.1.0

package/src/molecules/Badge.jsx

@@ -0,0 +1,51 @@
+/**
+ * Badge — status / categorization indicator
+ *
+ * Converted from Badge.tsx (shadcn/CVA) → plain JSX with kol- CSS variables.
+ * CSS classes live in components.css under 2-LABELS → Badges.
+ */
+
+import { Icon } from '@kolkrabbi/kol-loader'
+
+const VARIANT_MAP = {
+  default: 'kol-badge-default',
+  secondary: 'kol-badge-secondary',
+  destructive: 'kol-badge-destructive',
+  outline: 'kol-badge-outline',
+  success: 'kol-badge-success',
+  warning: 'kol-badge-warning',
+  critical: 'kol-badge-critical',
+  info: 'kol-badge-info'
+}
+
+const SIZE_MAP = {
+  sm: 'kol-badge-sm',
+  md: 'kol-badge-md',
+  lg: 'kol-badge-lg'
+}
+
+const ICON_SIZES = { sm: 12, md: 14, lg: 16 }
+
+const Badge = ({
+  children,
+  variant = 'default',
+  size = 'md',
+  icon,
+  className = '',
+  ...props
+}) => {
+  const variantClass = VARIANT_MAP[variant] || VARIANT_MAP.default
+  const sizeClass = SIZE_MAP[size] || SIZE_MAP.md
+
+  return (
+    <div
+      className={`kol-badge ${variantClass} ${sizeClass} ${className}`.trim()}
+      {...props}
+    >
+      {icon && <Icon name={icon} size={ICON_SIZES[size] ?? ICON_SIZES.md} />}
+      {children}
+    </div>
+  )
+}
+
+export default Badge

package/src/molecules/ContentFilters.jsx

@@ -0,0 +1,263 @@
+import { useState, useMemo, useRef, useEffect } from 'react'
+import Tag from './Tag.jsx'
+import Divider from '../atoms/Divider.jsx'
+import { Icon } from '@kolkrabbi/kol-loader'
+import ViewToggle from './ViewToggle'
+
+/**
+ * ContentFilters — universal filter component for content grids.
+ *
+ * Reusable filter component with expandable panel, tag-based filtering,
+ * search, and view-mode toggle. Used across Shop, Collections, Specimens,
+ * Typefaces, etc.
+ *
+ * @param {Object} props
+ * @param {Array} props.items — array of items to filter
+ * @param {string} props.title — section title (e.g., "Shop", "Collections")
+ * @param {number} props.totalCount — total count before filtering
+ * @param {Array} props.filterGroups — [{label, key, values}, ...]
+ * @param {Function} props.renderItem — (filteredItems, viewMode, layout) => ReactNode
+ * @param {Array} props.viewModeOptions — optional view mode options for ViewToggle
+ * @param {string} props.defaultViewMode — default view mode (default: 'list')
+ * @param {Function} props.onFilterChange — optional callback when filters change
+ * @param {Array} props.mutuallyExclusiveFilters — filter keys that should be mutually exclusive
+ * @param {Array} props.customFilterKeys — filter keys handled by renderItem, not by ContentFilters
+ */
+const ContentFilters = ({
+  items,
+  title,
+  totalCount,
+  filterGroups = [],
+  renderItem,
+  viewModeOptions,
+  viewMode: viewModeProp,
+  onViewModeChange,
+  defaultViewMode = 'list',
+  layoutOptions,
+  defaultLayout = 'grid',
+  onFilterChange,
+  mutuallyExclusiveFilters = [],
+  customFilterKeys = [],
+  searchKeys = ['label', 'name', 'title', 'type'],
+  headerActions,
+  showCountOnlyWhenFiltering = false,
+}) => {
+  const [activeFilters, setActiveFilters] = useState(new Set())
+  const [isExpanded, setIsExpanded] = useState(false)
+  const [internalViewMode, setInternalViewMode] = useState(defaultViewMode)
+  const viewMode = viewModeProp !== undefined ? viewModeProp : internalViewMode
+  const [layout, setLayout] = useState(defaultLayout)
+  const [searchOpen, setSearchOpen] = useState(false)
+  const [searchText, setSearchText] = useState('')
+  const searchRef = useRef(null)
+
+  useEffect(() => {
+    if (searchOpen && searchRef.current) searchRef.current.focus()
+  }, [searchOpen])
+
+  const toggleFilter = (filterType, value) => {
+    const newFilters = new Set(activeFilters)
+    const filterKey = `${filterType}:${value}`
+    if (newFilters.has(filterKey)) {
+      newFilters.delete(filterKey)
+    } else {
+      if (mutuallyExclusiveFilters.includes(filterType)) {
+        Array.from(newFilters).forEach((existing) => {
+          if (existing.startsWith(`${filterType}:`)) newFilters.delete(existing)
+        })
+      }
+      newFilters.add(filterKey)
+    }
+    setActiveFilters(newFilters)
+    onFilterChange?.(newFilters, viewMode)
+  }
+
+  const clearAllFilters = () => {
+    setActiveFilters(new Set())
+    onFilterChange?.(new Set(), viewMode)
+  }
+
+  const handleViewModeChange = (mode) => {
+    if (onViewModeChange) onViewModeChange(mode)
+    else setInternalViewMode(mode)
+    onFilterChange?.(activeFilters, mode)
+  }
+
+  const filteredItems = useMemo(() => {
+    let result = items
+    if (searchText) {
+      const q = searchText.toLowerCase()
+      result = result.filter((item) =>
+        searchKeys.some((key) => {
+          const val = item[key]
+          return val && String(val).toLowerCase().includes(q)
+        }),
+      )
+    }
+    if (activeFilters.size === 0) return result
+    return result.filter((item) => {
+      let matches = true
+      activeFilters.forEach((filter) => {
+        const [filterType, value] = filter.split(':')
+        if (customFilterKeys.includes(filterType)) return
+        const itemValue = item[filterType]
+        if (Array.isArray(itemValue)) {
+          if (!itemValue.includes(value)) matches = false
+        } else if (itemValue !== value) {
+          matches = false
+        }
+      })
+      return matches
+    })
+  }, [items, activeFilters, customFilterKeys, searchText, searchKeys])
+
+  const renderFilterGroup = (group) => (
+    <div key={group.key}>
+      <h4 className="kol-helper-12 text-fg-48">{group.label}</h4>
+      <div className="flex flex-wrap gap-2 pt-3">
+        {group.values.map((value) => {
+          const filterKey = `${group.key}:${value}`
+          const isActive = activeFilters.has(filterKey)
+          return (
+            <div key={value} onClick={() => toggleFilter(group.key, value)}>
+              <Tag size="md" variant="default" hash={false} className={isActive ? 'border-fg-32' : 'border-fg-08'}>
+                {value}
+              </Tag>
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+
+  return (
+    <div className="w-full" style={{ display: 'flex', flexDirection: 'column', flex: 1 }}>
+      <div className="flex items-center justify-between mb-4">
+        <div className="flex items-center gap-6">
+          <h2 className="kol-helper-14">{title}</h2>
+          <div className="flex items-center gap-1">
+            <button
+              type="button"
+              onClick={() => setIsExpanded(!isExpanded)}
+              className="p-2 hover:bg-fg-04 rounded-sm transition-colors leading-none"
+              aria-label="Toggle filters"
+              style={{ background: 'transparent', border: 'none', cursor: 'pointer', color: 'inherit' }}
+            >
+              <Icon name="filter" size={16} />
+            </button>
+            <div
+              className="flex items-center rounded-full cursor-pointer"
+              style={{
+                height: 28,
+                width: searchOpen ? 200 : 28,
+                background: searchOpen ? 'var(--kol-opacity-hex-04, rgba(255,255,255,0.04))' : 'transparent',
+                transition: 'width 600ms cubic-bezier(0.16, 1, 0.3, 1), background 400ms cubic-bezier(0.16, 1, 0.3, 1)',
+                overflow: 'hidden',
+              }}
+              onClick={() => {
+                if (searchOpen) { setSearchOpen(false); setSearchText('') }
+                else setSearchOpen(true)
+              }}
+            >
+              <span
+                className="flex items-center justify-center flex-shrink-0"
+                style={{
+                  width: 28, height: 28,
+                  opacity: searchOpen ? 0 : 1,
+                  transition: 'opacity 300ms cubic-bezier(0.16, 1, 0.3, 1)',
+                  position: searchOpen ? 'absolute' : 'relative',
+                }}
+              >
+                <Icon name="search" size={16} />
+              </span>
+              {searchOpen && (
+                <input
+                  ref={searchRef}
+                  type="text"
+                  value={searchText}
+                  onChange={(e) => setSearchText(e.target.value)}
+                  onClick={(e) => e.stopPropagation()}
+                  placeholder=""
+                  className="bg-transparent outline-none kol-helper-12 flex-1 text-fg-80 caret-current px-4"
+                  onBlur={() => { if (!searchText) setSearchOpen(false) }}
+                  onKeyDown={(e) => { if (e.key === 'Escape') { setSearchOpen(false); setSearchText('') } }}
+                />
+              )}
+            </div>
+            {headerActions}
+          </div>
+          {activeFilters.size > 0 && (
+            <span
+              className="kol-helper-12 text-fg-48 cursor-pointer select-none group flex items-center gap-2"
+              onClick={(e) => { e.stopPropagation(); clearAllFilters() }}
+            >
+              <span className="underline">({activeFilters.size}) {activeFilters.size === 1 ? 'filter' : 'filters'} active</span>
+              <span className="hidden group-hover:inline text-fg-64">×</span>
+            </span>
+          )}
+        </div>
+
+        <div className="flex items-center gap-8">
+          {(!showCountOnlyWhenFiltering || isExpanded || searchOpen || activeFilters.size > 0) && (
+            <span className="kol-helper-14 text-fg-64">
+              {filteredItems.length} of {totalCount}
+            </span>
+          )}
+          {viewModeOptions && (
+            <div className="flex gap-6">
+              {viewModeOptions.map((opt) => (
+                <span
+                  key={opt.value}
+                  onClick={() => handleViewModeChange(opt.value)}
+                  className={`kol-helper-14 cursor-pointer select-none ${viewMode === opt.value ? 'text-fg-96' : 'text-fg-32 hover:text-fg-48'}`}
+                  style={{ textTransform: 'uppercase', letterSpacing: 1 }}
+                >
+                  {opt.label}
+                </span>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+
+      <Divider className="mb-4" />
+
+      {isExpanded && (
+        <div className="flex items-start gap-16 pb-4">
+          {filterGroups.map((group) => renderFilterGroup(group))}
+          {activeFilters.size > 0 && (
+            <button
+              type="button"
+              onClick={clearAllFilters}
+              className="kol-helper-12 transition-colors underline text-fg-48"
+              style={{ marginLeft: 'auto', background: 'transparent', border: 'none', cursor: 'pointer' }}
+            >
+              Clear all ({activeFilters.size})
+            </button>
+          )}
+        </div>
+      )}
+
+      {layoutOptions && (
+        <div className="flex items-center justify-end gap-4 mt-4">
+          {layoutOptions.map((opt) => (
+            <span
+              key={opt.value}
+              onClick={() => setLayout(opt.value)}
+              className={`kol-helper-12 cursor-pointer select-none ${layout === opt.value ? 'text-fg-96' : 'text-fg-32 hover:text-fg-48'}`}
+              style={{ textTransform: 'uppercase', letterSpacing: 1 }}
+            >
+              {opt.label}
+            </span>
+          ))}
+        </div>
+      )}
+
+      <div className="mt-8" style={{ display: 'flex', flexDirection: 'column', flex: 1 }}>
+        {renderItem(filteredItems, viewMode, layout)}
+      </div>
+    </div>
+  )
+}
+
+export default ContentFilters

package/src/molecules/Dropdown.jsx

@@ -0,0 +1,223 @@
+import { useEffect, useState } from 'react'
+import { Icon } from '@kolkrabbi/kol-loader'
+import { MenuDropdownItem } from './MenuItem.jsx'
+import { PopoverPanel, usePopover } from './Popover.jsx'
+
+const SIZE_MAP = {
+  sm: { fontSize: 12, paddingY: 4, paddingX: 12, radius: 14, panelRadius: 14, icon: 10 },
+  md: { fontSize: 12, paddingY: 6, paddingX: 16, radius: 22, panelRadius: 22, icon: 12 },
+  lg: { fontSize: 14, paddingY: 8, paddingX: 20, radius: 24, panelRadius: 24, icon: 14 }
+}
+
+const SIZE_TYPE = { sm: 'kol-mono-12', md: 'kol-mono-12', lg: 'kol-mono-14' }
+
+const Dropdown = ({
+  options = [],
+  value,
+  onChange,
+  size,
+  variant = 'default',
+  className = ''
+}) => {
+  const [isOpen, setIsOpen] = useState(false)
+  const [resolvedSize, setResolvedSize] = useState('md')
+  const [dropdownWidth, setDropdownWidth] = useState('100px')
+
+  /* Floating-ui popover. `flip: false` keeps the panel below the button
+   * — the seamless border-radius edge between button and panel assumes
+   * the panel sits below; flipping above would visually disconnect them.
+   * `matchReferenceWidth: true` pins panel min-width to the button. */
+  const popover = usePopover({
+    open: isOpen,
+    onOpenChange: setIsOpen,
+    placement: 'bottom-start',
+    offset: variant === 'minimal' ? 0 : -1,
+    flip: false,
+    matchReferenceWidth: true,
+    role: 'listbox',
+  })
+
+  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 for variants
+  useEffect(() => {
+    const updateWidth = () => {
+      if (typeof window === 'undefined') return
+
+      if (variant === 'minimal' || variant === 'subtle') {
+        // Minimal/subtle: 100px mobile, 140px tablet+
+        setDropdownWidth(window.innerWidth >= 768 ? '140px' : '100px')
+      } else if (variant === 'default') {
+        // Default: 100px mobile, 140px tablet, 180px desktop
+        if (window.innerWidth >= 1024) {
+          setDropdownWidth('180px')
+        } else if (window.innerWidth >= 768) {
+          setDropdownWidth('140px')
+        } else {
+          setDropdownWidth('100px')
+        }
+      }
+    }
+    updateWidth()
+    window.addEventListener('resize', updateWidth)
+    return () => window.removeEventListener('resize', updateWidth)
+  }, [variant])
+
+  const metrics = SIZE_MAP[resolvedSize] || SIZE_MAP.md
+
+  // Variant-specific styles
+  const variantStyles = {
+    default: {
+      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)',
+      padding: `${metrics.paddingY}px ${metrics.paddingX}px`
+    },
+    minimal: {
+      border: 'none',
+      borderRadius: '0',
+      backgroundColor: 'transparent',
+      padding: '0',
+      height: '24px',
+      display: 'flex',
+      alignItems: 'center'
+    },
+    subtle: {
+      /* 1px transparent border so total height matches Button + Input + the
+       * other shared-control atoms (which have a transparent 1px border for
+       * hover/focus consistency). Without this, subtle is 2px shorter. */
+      border: '1px solid transparent',
+      borderRadius: isOpen ? '4px 4px 0 0' : '4px',
+      backgroundColor: 'var(--kol-surface-secondary)',
+      padding: `${metrics.paddingY}px ${metrics.paddingX}px`
+    }
+  }
+
+  const styles = variantStyles[variant] || variantStyles.default
+
+  const handleSelect = (option) => {
+    onChange?.(option.value)
+    setIsOpen(false)
+  }
+
+  const currentOption = options.find((opt) => opt.value === value) || options[0]
+
+  return (
+    <div
+      className={`relative block ${className}`}
+      style={{
+        ...((variant === 'minimal' || variant === 'default' || variant === 'subtle') && dropdownWidth && !className.includes('w-full') && {
+          width: dropdownWidth,
+          minWidth: dropdownWidth
+        })
+      }}
+    >
+      <button
+        ref={popover.refs.setReference}
+        {...popover.getReferenceProps()}
+        type="button"
+        className={`w-full flex items-center justify-between transition-colors duration-200 ${SIZE_TYPE[resolvedSize]}`}
+        style={{
+          border: styles.border,
+          borderRadius: styles.borderRadius,
+          backgroundColor: styles.backgroundColor,
+          color: 'var(--kol-surface-on-primary)',
+          padding: styles.padding,
+          transition: 'background-color 0.2s, color 0.2s, border-color 0.2s',
+          ...(variant === 'minimal' && {
+            height: styles.height,
+          }),
+        }}
+        aria-haspopup="listbox"
+        aria-expanded={isOpen}
+        data-state={isOpen ? 'open' : 'closed'}
+      >
+        <span className="opacity-100">{currentOption?.label}</span>
+        <Icon
+          name="chevron-down"
+          size={metrics.icon}
+          className="ml-auto"
+          style={{
+            transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)',
+            transition: 'transform 300ms',
+          }}
+        />
+      </button>
+
+      <PopoverPanel
+        popover={popover}
+        panel={false}
+        focus={false}
+        style={{
+          backgroundColor: variant === 'minimal'
+            ? 'var(--kol-surface-primary)'
+            : styles.backgroundColor,
+          color: 'var(--kol-surface-on-primary)',
+          border: variant === 'subtle' ? 'none' : styles.border,
+          borderRadius: variant === 'minimal'
+            ? '0'
+            : (variant === 'subtle'
+                ? '0 0 4px 4px'
+                : `0 0 ${metrics.panelRadius}px ${metrics.panelRadius}px`),
+        }}
+      >
+        {variant !== 'minimal' && (
+          <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-stretch overflow-y-auto" role="listbox">
+          {options.map((option) => {
+            const isActive = option.value === currentOption?.value
+            return (
+              <MenuDropdownItem
+                key={option.value}
+                onClick={() => handleSelect(option)}
+                shortcut={isActive ? <Icon name="check" size={11} /> : undefined}
+              >
+                {option.label}
+              </MenuDropdownItem>
+            )
+          })}
+        </div>
+      </PopoverPanel>
+    </div>
+  )
+}
+
+export default Dropdown