@annondeveloper/ui-kit 0.1.0 → 0.2.0

package/dist/{select-nnBJUO8U.d.ts → select-B2wXqqSM.d.ts}

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
 
 interface SelectOption {
     value: string;
@@ -21,6 +21,6 @@ interface SelectProps {
  * @description A themed select dropdown built on Radix UI Select.
  * Supports dark/light mode via CSS custom property tokens.
  */
-declare function Select({ value, onValueChange, options, placeholder, className, disabled, }: SelectProps): react_jsx_runtime.JSX.Element;
+declare function Select({ value, onValueChange, options, placeholder, className, disabled, }: SelectProps): React.JSX.Element;
 
 export { type SelectOption as S, Select as a, type SelectProps as b };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@annondeveloper/ui-kit",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "type": "module",
   "description": "A React component library with dark/light theming, built on Radix UI, Tailwind CSS v4, and Framer Motion.",
   "main": "dist/index.js",

package/src/components/animated-counter.tsx

@@ -1,5 +1,6 @@
 'use client'
 
+import type React from 'react'
 import { useEffect, useRef, useState } from 'react'
 import { useReducedMotion } from 'framer-motion'
 import { cn } from '../utils'
@@ -27,7 +28,7 @@ export function AnimatedCounter({
   duration = 400,
   className,
   format,
-}: AnimatedCounterProps) {
+}: AnimatedCounterProps): React.JSX.Element {
   const reduced = useReducedMotion()
   const prevRef = useRef(value)
   const rafRef = useRef<number | null>(null)

package/src/components/avatar.tsx

@@ -1,5 +1,6 @@
 'use client'
 
+import type React from 'react'
 import { useState } from 'react'
 import { cn } from '../utils'
 
@@ -55,7 +56,7 @@ export function Avatar({
   size = 'md',
   status,
   className,
-}: AvatarProps) {
+}: AvatarProps): React.JSX.Element {
   const [imgError, setImgError] = useState(false)
   const s = sizeClasses[size]
   const initials = fallback ?? deriveInitials(alt)

package/src/components/badge.tsx

@@ -1,5 +1,6 @@
 'use client'
 
+import type React from 'react'
 import { cn } from '../utils'
 import type { LucideIcon } from 'lucide-react'
 
@@ -40,7 +41,7 @@ export interface BadgeProps {
  */
 export function Badge({
   children, color = 'gray', icon: Icon, size = 'sm', className,
-}: BadgeProps) {
+}: BadgeProps): React.JSX.Element {
   return (
     <span className={cn(
       'inline-flex items-center gap-1 rounded-full font-medium whitespace-nowrap',
@@ -82,7 +83,7 @@ export interface BadgeVariantConfig<T extends string> {
  * // Usage: <SeverityBadge value="critical" />
  * ```
  */
-export function createBadgeVariant<T extends string>(config: BadgeVariantConfig<T>) {
+export function createBadgeVariant<T extends string>(config: BadgeVariantConfig<T>): (props: { value: T; className?: string }) => React.JSX.Element {
   const { colorMap, labelMap, defaultColor = 'gray', defaultSize = 'xs' } = config
 
   return function VariantBadge({ value, className }: { value: T; className?: string }) {

package/src/components/button.tsx

@@ -1,5 +1,6 @@
 'use client'
 
+import type React from 'react'
 import { forwardRef, type ButtonHTMLAttributes } from 'react'
 import { Loader2 } from 'lucide-react'
 import { cn } from '../utils'
@@ -40,8 +41,8 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  * @description A themed button with variant, size, and loading support.
  * Uses CSS custom property tokens for dark/light mode compatibility.
  */
-const Button = forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ variant = 'primary', size = 'md', loading, disabled, className, children, ...props }, ref) => (
+const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>> = forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ variant = 'primary', size = 'md', loading, disabled, className, children, ...props }, ref): React.JSX.Element => (
     <button
       ref={ref}
       disabled={disabled || loading}

package/src/components/card.tsx

@@ -1,5 +1,6 @@
 'use client'
 
+import type React from 'react'
 import { forwardRef, type HTMLAttributes, type ReactNode } from 'react'
 import { cn } from '../utils'
 
@@ -37,8 +38,8 @@ export interface CardProps extends HTMLAttributes<HTMLDivElement> {
  * Use with CardHeader, CardTitle, CardDescription, CardContent, and CardFooter
  * subcomponents for semantic structure.
  */
-const Card = forwardRef<HTMLDivElement, CardProps>(
-  ({ variant = 'default', padding = 'md', className, children, ...props }, ref) => (
+const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>> = forwardRef<HTMLDivElement, CardProps>(
+  ({ variant = 'default', padding = 'md', className, children, ...props }, ref): React.JSX.Element => (
     <div
       ref={ref}
       className={cn('rounded-2xl', variantClasses[variant], paddingClasses[padding], className)}
@@ -57,8 +58,8 @@ export interface CardSubProps extends HTMLAttributes<HTMLDivElement> {
 }
 
 /** Header section of a Card (flex row for title + actions). */
-const CardHeader = forwardRef<HTMLDivElement, CardSubProps>(
-  ({ className, children, ...props }, ref) => (
+const CardHeader: React.ForwardRefExoticComponent<CardSubProps & React.RefAttributes<HTMLDivElement>> = forwardRef<HTMLDivElement, CardSubProps>(
+  ({ className, children, ...props }, ref): React.JSX.Element => (
     <div
       ref={ref}
       className={cn('flex items-start justify-between gap-4', className)}
@@ -71,8 +72,8 @@ const CardHeader = forwardRef<HTMLDivElement, CardSubProps>(
 CardHeader.displayName = 'CardHeader'
 
 /** Title within a CardHeader. */
-const CardTitle = forwardRef<HTMLHeadingElement, HTMLAttributes<HTMLHeadingElement> & { children: ReactNode }>(
-  ({ className, children, ...props }, ref) => (
+const CardTitle: React.ForwardRefExoticComponent<HTMLAttributes<HTMLHeadingElement> & { children: ReactNode } & React.RefAttributes<HTMLHeadingElement>> = forwardRef<HTMLHeadingElement, HTMLAttributes<HTMLHeadingElement> & { children: ReactNode }>(
+  ({ className, children, ...props }, ref): React.JSX.Element => (
     <h3
       ref={ref}
       className={cn('text-base font-semibold text-[hsl(var(--text-primary))]', className)}
@@ -85,8 +86,8 @@ const CardTitle = forwardRef<HTMLHeadingElement, HTMLAttributes<HTMLHeadingEleme
 CardTitle.displayName = 'CardTitle'
 
 /** Description text within a CardHeader. */
-const CardDescription = forwardRef<HTMLParagraphElement, HTMLAttributes<HTMLParagraphElement> & { children: ReactNode }>(
-  ({ className, children, ...props }, ref) => (
+const CardDescription: React.ForwardRefExoticComponent<HTMLAttributes<HTMLParagraphElement> & { children: ReactNode } & React.RefAttributes<HTMLParagraphElement>> = forwardRef<HTMLParagraphElement, HTMLAttributes<HTMLParagraphElement> & { children: ReactNode }>(
+  ({ className, children, ...props }, ref): React.JSX.Element => (
     <p
       ref={ref}
       className={cn('text-sm text-[hsl(var(--text-secondary))]', className)}
@@ -99,8 +100,8 @@ const CardDescription = forwardRef<HTMLParagraphElement, HTMLAttributes<HTMLPara
 CardDescription.displayName = 'CardDescription'
 
 /** Main content area of a Card. */
-const CardContent = forwardRef<HTMLDivElement, CardSubProps>(
-  ({ className, children, ...props }, ref) => (
+const CardContent: React.ForwardRefExoticComponent<CardSubProps & React.RefAttributes<HTMLDivElement>> = forwardRef<HTMLDivElement, CardSubProps>(
+  ({ className, children, ...props }, ref): React.JSX.Element => (
     <div ref={ref} className={cn('mt-4', className)} {...props}>
       {children}
     </div>
@@ -109,8 +110,8 @@ const CardContent = forwardRef<HTMLDivElement, CardSubProps>(
 CardContent.displayName = 'CardContent'
 
 /** Footer section of a Card (typically for actions). */
-const CardFooter = forwardRef<HTMLDivElement, CardSubProps>(
-  ({ className, children, ...props }, ref) => (
+const CardFooter: React.ForwardRefExoticComponent<CardSubProps & React.RefAttributes<HTMLDivElement>> = forwardRef<HTMLDivElement, CardSubProps>(
+  ({ className, children, ...props }, ref): React.JSX.Element => (
     <div
       ref={ref}
       className={cn(

package/src/components/checkbox.tsx

@@ -1,5 +1,6 @@
 'use client'
 
+import type React from 'react'
 import { forwardRef, type InputHTMLAttributes } from 'react'
 import { Check, Minus } from 'lucide-react'
 import { cn } from '../utils'
@@ -15,8 +16,8 @@ export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement
  * @description A themed checkbox with indeterminate state support.
  * Uses CSS custom property tokens for dark/light mode compatibility.
  */
-const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
-  ({ indeterminate, checked, size = 'md', className, ...props }, ref) => {
+const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>> = forwardRef<HTMLInputElement, CheckboxProps>(
+  ({ indeterminate, checked, size = 'md', className, ...props }, ref): React.JSX.Element => {
     const isChecked = checked || indeterminate
     const sizeClass = size === 'sm' ? 'h-3.5 w-3.5' : 'h-4 w-4'
     const iconSize = size === 'sm' ? 'h-2.5 w-2.5' : 'h-3 w-3'

package/src/components/color-input.tsx

@@ -0,0 +1,414 @@
+'use client'
+
+import type React from 'react'
+import { useState, useEffect, useCallback, useRef, useMemo } from 'react'
+import { motion, AnimatePresence, useReducedMotion } from 'framer-motion'
+import { Copy, Check, Pipette } from 'lucide-react'
+import { cn } from '../utils'
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+/** Props for the ColorInput component. */
+export interface ColorInputProps {
+  /** Current color value as hex string (e.g. "#ff0000"). */
+  value: string
+  /** Called when the color changes. */
+  onChange: (color: string) => void
+  /** Optional label. */
+  label?: string
+  /** Preset color swatches. */
+  presets?: string[]
+  /** Show alpha/opacity slider. */
+  showAlpha?: boolean
+  /** Display format for the text input. Default "hex". */
+  format?: 'hex' | 'rgb' | 'hsl'
+  /** Additional class name. */
+  className?: string
+}
+
+// ---------------------------------------------------------------------------
+// Color conversion helpers
+// ---------------------------------------------------------------------------
+
+function hexToRgb(hex: string): { r: number; g: number; b: number } {
+  const clean = hex.replace('#', '')
+  const full = clean.length === 3
+    ? clean.split('').map(c => c + c).join('')
+    : clean
+  const num = parseInt(full, 16)
+  return { r: (num >> 16) & 255, g: (num >> 8) & 255, b: num & 255 }
+}
+
+function rgbToHex(r: number, g: number, b: number): string {
+  return '#' + [r, g, b].map(c => Math.round(c).toString(16).padStart(2, '0')).join('')
+}
+
+function rgbToHsl(r: number, g: number, b: number): { h: number; s: number; l: number } {
+  const rn = r / 255, gn = g / 255, bn = b / 255
+  const max = Math.max(rn, gn, bn), min = Math.min(rn, gn, bn)
+  const l = (max + min) / 2
+  if (max === min) return { h: 0, s: 0, l }
+  const d = max - min
+  const s = l > 0.5 ? d / (2 - max - min) : d / (max + min)
+  let h = 0
+  if (max === rn) h = ((gn - bn) / d + (gn < bn ? 6 : 0)) / 6
+  else if (max === gn) h = ((bn - rn) / d + 2) / 6
+  else h = ((rn - gn) / d + 4) / 6
+  return { h, s, l }
+}
+
+function hslToRgb(h: number, s: number, l: number): { r: number; g: number; b: number } {
+  if (s === 0) {
+    const v = Math.round(l * 255)
+    return { r: v, g: v, b: v }
+  }
+  const hue2rgb = (p: number, q: number, t: number) => {
+    const tt = t < 0 ? t + 1 : t > 1 ? t - 1 : t
+    if (tt < 1 / 6) return p + (q - p) * 6 * tt
+    if (tt < 1 / 2) return q
+    if (tt < 2 / 3) return p + (q - p) * (2 / 3 - tt) * 6
+    return p
+  }
+  const q = l < 0.5 ? l * (1 + s) : l + s - l * s
+  const p = 2 * l - q
+  return {
+    r: Math.round(hue2rgb(p, q, h + 1 / 3) * 255),
+    g: Math.round(hue2rgb(p, q, h) * 255),
+    b: Math.round(hue2rgb(p, q, h - 1 / 3) * 255),
+  }
+}
+
+function formatColor(hex: string, fmt: 'hex' | 'rgb' | 'hsl'): string {
+  if (fmt === 'hex') return hex
+  const { r, g, b } = hexToRgb(hex)
+  if (fmt === 'rgb') return `rgb(${r}, ${g}, ${b})`
+  const { h, s, l } = rgbToHsl(r, g, b)
+  return `hsl(${Math.round(h * 360)}, ${Math.round(s * 100)}%, ${Math.round(l * 100)}%)`
+}
+
+const RECENT_COLORS_KEY = 'ui-kit-recent-colors'
+const MAX_RECENT = 8
+
+// ---------------------------------------------------------------------------
+// ColorInput
+// ---------------------------------------------------------------------------
+
+/**
+ * @description A compact color picker input with swatch preview, expandable picker panel
+ * featuring hue/saturation area, lightness slider, optional alpha slider, preset swatches,
+ * format switching (hex/rgb/hsl), clipboard copy, and recent color history.
+ */
+export function ColorInput({
+  value,
+  onChange,
+  label,
+  presets,
+  showAlpha = false,
+  format = 'hex',
+  className,
+}: ColorInputProps): React.JSX.Element {
+  const prefersReducedMotion = useReducedMotion()
+  const [open, setOpen] = useState(false)
+  const [copied, setCopied] = useState(false)
+  const [textInput, setTextInput] = useState('')
+  const [alpha, setAlpha] = useState(1)
+  const panelRef = useRef<HTMLDivElement>(null)
+  const satAreaRef = useRef<HTMLDivElement>(null)
+
+  // Recent colors
+  const [recentColors, setRecentColors] = useState<string[]>(() => {
+    if (typeof window === 'undefined') return []
+    try {
+      return JSON.parse(localStorage.getItem(RECENT_COLORS_KEY) ?? '[]') as string[]
+    } catch { return [] }
+  })
+
+  const addRecent = useCallback((color: string) => {
+    setRecentColors(prev => {
+      const updated = [color, ...prev.filter(c => c !== color)].slice(0, MAX_RECENT)
+      try { localStorage.setItem(RECENT_COLORS_KEY, JSON.stringify(updated)) } catch { /* noop */ }
+      return updated
+    })
+  }, [])
+
+  // HSL from current value
+  const { r, g, b } = useMemo(() => hexToRgb(value), [value])
+  const hsl = useMemo(() => rgbToHsl(r, g, b), [r, g, b])
+
+  // Sync text input
+  useEffect(() => {
+    setTextInput(formatColor(value, format))
+  }, [value, format])
+
+  // Close on click outside
+  useEffect(() => {
+    if (!open) return
+    const handler = (e: MouseEvent) => {
+      if (panelRef.current && !panelRef.current.contains(e.target as Node)) {
+        setOpen(false)
+        addRecent(value)
+      }
+    }
+    document.addEventListener('mousedown', handler)
+    return () => document.removeEventListener('mousedown', handler)
+  }, [open, value, addRecent])
+
+  // Saturation/brightness area interaction
+  const handleSatAreaPointer = useCallback(
+    (e: React.PointerEvent | PointerEvent) => {
+      if (!satAreaRef.current) return
+      const rect = satAreaRef.current.getBoundingClientRect()
+      const x = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width))
+      const y = Math.max(0, Math.min(1, (e.clientY - rect.top) / rect.height))
+      // x = saturation, y = 1-lightness (top=light, bottom=dark)
+      const s = x
+      const l = 1 - y
+      const adjustedL = 0.05 + l * 0.9 // Keep within visible range
+      const rgb = hslToRgb(hsl.h, s, adjustedL)
+      onChange(rgbToHex(rgb.r, rgb.g, rgb.b))
+    },
+    [hsl.h, onChange],
+  )
+
+  const handleSatAreaDown = useCallback(
+    (e: React.PointerEvent) => {
+      e.preventDefault()
+      handleSatAreaPointer(e)
+      const move = (ev: PointerEvent) => handleSatAreaPointer(ev)
+      const up = () => {
+        document.removeEventListener('pointermove', move)
+        document.removeEventListener('pointerup', up)
+      }
+      document.addEventListener('pointermove', move)
+      document.addEventListener('pointerup', up)
+    },
+    [handleSatAreaPointer],
+  )
+
+  // Hue slider
+  const handleHueChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const h = Number(e.target.value) / 360
+      const rgb = hslToRgb(h, hsl.s || 0.5, hsl.l || 0.5)
+      onChange(rgbToHex(rgb.r, rgb.g, rgb.b))
+    },
+    [hsl.s, hsl.l, onChange],
+  )
+
+  // Text input commit
+  const handleTextCommit = useCallback(() => {
+    const v = textInput.trim()
+    // Try hex
+    if (/^#?[0-9a-f]{3,6}$/i.test(v)) {
+      const hex = v.startsWith('#') ? v : '#' + v
+      onChange(hex)
+      return
+    }
+    // Try rgb()
+    const rgbMatch = v.match(/rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)/)
+    if (rgbMatch) {
+      onChange(rgbToHex(Number(rgbMatch[1]), Number(rgbMatch[2]), Number(rgbMatch[3])))
+      return
+    }
+    // Try hsl()
+    const hslMatch = v.match(/hsl\(\s*(\d+)\s*,\s*(\d+)%?\s*,\s*(\d+)%?\s*\)/)
+    if (hslMatch) {
+      const rgb = hslToRgb(Number(hslMatch[1]) / 360, Number(hslMatch[2]) / 100, Number(hslMatch[3]) / 100)
+      onChange(rgbToHex(rgb.r, rgb.g, rgb.b))
+      return
+    }
+    // Revert
+    setTextInput(formatColor(value, format))
+  }, [textInput, value, format, onChange])
+
+  const handleCopy = useCallback(async () => {
+    try {
+      await navigator.clipboard.writeText(formatColor(value, format))
+      setCopied(true)
+      setTimeout(() => setCopied(false), 1500)
+    } catch { /* noop */ }
+  }, [value, format])
+
+  // Position for sat/brightness marker
+  const markerX = hsl.s * 100
+  const markerY = (1 - (hsl.l - 0.05) / 0.9) * 100
+
+  return (
+    <div ref={panelRef} className={cn('relative inline-block', className)}>
+      {/* Label */}
+      {label && (
+        <label className="block text-xs font-medium text-[hsl(var(--text-secondary))] mb-1.5">
+          {label}
+        </label>
+      )}
+
+      {/* Compact input */}
+      <button
+        onClick={() => setOpen(o => !o)}
+        className={cn(
+          'inline-flex items-center gap-2 rounded-lg border border-[hsl(var(--border-subtle))]',
+          'bg-[hsl(var(--bg-surface))] px-3 py-2 text-sm',
+          'hover:border-[hsl(var(--border-default))] transition-colors',
+          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--brand-primary))]',
+        )}
+      >
+        <span
+          className="h-5 w-5 rounded-md border border-[hsl(var(--border-subtle))]"
+          style={{ backgroundColor: value }}
+        />
+        <span className="font-mono text-xs text-[hsl(var(--text-primary))]">
+          {formatColor(value, format)}
+        </span>
+      </button>
+
+      {/* Expanded picker panel */}
+      <AnimatePresence>
+        {open && (
+          <motion.div
+            initial={prefersReducedMotion ? undefined : { opacity: 0, scale: 0.96, y: -4 }}
+            animate={prefersReducedMotion ? undefined : { opacity: 1, scale: 1, y: 0 }}
+            exit={prefersReducedMotion ? undefined : { opacity: 0, scale: 0.96, y: -4 }}
+            transition={prefersReducedMotion ? { duration: 0 } : { duration: 0.15 }}
+            className={cn(
+              'absolute z-50 mt-2 w-64 rounded-xl overflow-hidden',
+              'border border-[hsl(var(--border-default))]',
+              'bg-[hsl(var(--bg-elevated))] shadow-xl',
+              'p-3',
+            )}
+          >
+            {/* Saturation/Brightness area */}
+            <div
+              ref={satAreaRef}
+              onPointerDown={handleSatAreaDown}
+              className="relative h-36 w-full rounded-lg cursor-crosshair overflow-hidden mb-3"
+              style={{
+                background: `linear-gradient(to top, #000, transparent),
+                             linear-gradient(to right, #fff, hsl(${Math.round(hsl.h * 360)}, 100%, 50%))`,
+              }}
+            >
+              {/* Marker */}
+              <div
+                className="absolute w-4 h-4 rounded-full border-2 border-white shadow-md -translate-x-1/2 -translate-y-1/2 pointer-events-none"
+                style={{
+                  left: `${markerX}%`,
+                  top: `${Math.max(0, Math.min(100, markerY))}%`,
+                  backgroundColor: value,
+                }}
+              />
+            </div>
+
+            {/* Hue slider */}
+            <div className="mb-3">
+              <input
+                type="range"
+                min={0}
+                max={360}
+                value={Math.round(hsl.h * 360)}
+                onChange={handleHueChange}
+                className="w-full h-3 rounded-full appearance-none cursor-pointer"
+                style={{
+                  background: 'linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00)',
+                }}
+              />
+            </div>
+
+            {/* Alpha slider */}
+            {showAlpha && (
+              <div className="mb-3">
+                <input
+                  type="range"
+                  min={0}
+                  max={100}
+                  value={Math.round(alpha * 100)}
+                  onChange={e => setAlpha(Number(e.target.value) / 100)}
+                  className="w-full h-3 rounded-full appearance-none cursor-pointer"
+                  style={{
+                    background: `linear-gradient(to right, transparent, ${value})`,
+                  }}
+                />
+              </div>
+            )}
+
+            {/* Text input + copy */}
+            <div className="flex items-center gap-2 mb-3">
+              <input
+                type="text"
+                value={textInput}
+                onChange={e => setTextInput(e.target.value)}
+                onBlur={handleTextCommit}
+                onKeyDown={e => { if (e.key === 'Enter') handleTextCommit() }}
+                className={cn(
+                  'flex-1 rounded-md border border-[hsl(var(--border-subtle))]',
+                  'bg-[hsl(var(--bg-surface))] px-2 py-1 text-xs font-mono',
+                  'text-[hsl(var(--text-primary))] outline-none',
+                  'focus:border-[hsl(var(--brand-primary))] transition-colors',
+                )}
+              />
+              <button
+                onClick={handleCopy}
+                className={cn(
+                  'p-1.5 rounded-md transition-colors',
+                  'text-[hsl(var(--text-tertiary))] hover:text-[hsl(var(--text-primary))]',
+                  'hover:bg-[hsl(var(--bg-surface))]',
+                )}
+                title="Copy color"
+              >
+                {copied ? <Check className="h-3.5 w-3.5 text-[hsl(var(--status-ok))]" /> : <Copy className="h-3.5 w-3.5" />}
+              </button>
+            </div>
+
+            {/* Presets */}
+            {presets && presets.length > 0 && (
+              <div className="mb-2">
+                <span className="text-[10px] font-semibold uppercase tracking-wider text-[hsl(var(--text-tertiary))] mb-1.5 block">
+                  Presets
+                </span>
+                <div className="flex flex-wrap gap-1.5">
+                  {presets.map(color => (
+                    <button
+                      key={color}
+                      onClick={() => { onChange(color); addRecent(color) }}
+                      className={cn(
+                        'h-6 w-6 rounded-md border transition-all',
+                        value === color
+                          ? 'border-[hsl(var(--brand-primary))] ring-2 ring-[hsl(var(--brand-primary)/0.3)] scale-110'
+                          : 'border-[hsl(var(--border-subtle))] hover:scale-110',
+                      )}
+                      style={{ backgroundColor: color }}
+                      title={color}
+                    />
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {/* Recent colors */}
+            {recentColors.length > 0 && (
+              <div>
+                <span className="text-[10px] font-semibold uppercase tracking-wider text-[hsl(var(--text-tertiary))] mb-1.5 block">
+                  Recent
+                </span>
+                <div className="flex flex-wrap gap-1.5">
+                  {recentColors.map(color => (
+                    <button
+                      key={color}
+                      onClick={() => onChange(color)}
+                      className={cn(
+                        'h-6 w-6 rounded-md border border-[hsl(var(--border-subtle))]',
+                        'hover:scale-110 transition-transform',
+                      )}
+                      style={{ backgroundColor: color }}
+                      title={color}
+                    />
+                  ))}
+                </div>
+              </div>
+            )}
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  )
+}