parthenon-ui 1.0.0

package/src/components/color-picker.tsx

@@ -0,0 +1,270 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "@workspace/ui/lib/utils"
+
+interface ColorPickerProps {
+  value: string
+  onChange: (hex: string) => void
+  className?: string
+}
+
+function hexToHsl(hex: string): { h: number; s: number; l: number } {
+  hex = hex.replace("#", "")
+  const r = parseInt(hex.substring(0, 2), 16) / 255
+  const g = parseInt(hex.substring(2, 4), 16) / 255
+  const b = parseInt(hex.substring(4, 6), 16) / 255
+  const max = Math.max(r, g, b)
+  const min = Math.min(r, g, b)
+  const l = (max + min) / 2
+  if (max === min) return { h: 0, s: 0, l: Math.round(l * 100) }
+  const d = max - min
+  const s = l > 0.5 ? d / (2 - max - min) : d / (max + min)
+  let h = 0
+  if (max === r) h = ((g - b) / d + (g < b ? 6 : 0)) / 6
+  else if (max === g) h = ((b - r) / d + 2) / 6
+  else h = ((r - g) / d + 4) / 6
+  return { h: Math.round(h * 360), s: Math.round(s * 100), l: Math.round(l * 100) }
+}
+
+function hslToHex(h: number, s: number, l: number): string {
+  s /= 100; l /= 100
+  const c = (1 - Math.abs(2 * l - 1)) * s
+  const x = c * (1 - Math.abs(((h / 60) % 2) - 1))
+  const m = l - c / 2
+  let r = 0, g = 0, b = 0
+  if (h < 60) { r = c; g = x }
+  else if (h < 120) { r = x; g = c }
+  else if (h < 180) { g = c; b = x }
+  else if (h < 240) { g = x; b = c }
+  else if (h < 300) { r = x; b = c }
+  else { r = c; b = x }
+  const toHex = (v: number) => Math.round((v + m) * 255).toString(16).padStart(2, "0")
+  return `#${toHex(r)}${toHex(g)}${toHex(b)}`
+}
+
+function ColorPicker({ value, onChange, className }: ColorPickerProps) {
+  const [isOpen, setIsOpen] = React.useState(false)
+  const [inputValue, setInputValue] = React.useState(value)
+  const [hue, setHue] = React.useState(0)
+  const [sat, setSat] = React.useState(100)
+  const [lit, setLit] = React.useState(50)
+  const [isDraggingCanvas, setIsDraggingCanvas] = React.useState(false)
+  const [isDraggingHue, setIsDraggingHue] = React.useState(false)
+  const containerRef = React.useRef<HTMLDivElement>(null)
+  const canvasRef = React.useRef<HTMLCanvasElement>(null)
+  const hueRef = React.useRef<HTMLDivElement>(null)
+
+  React.useEffect(() => {
+    setInputValue(value)
+    if (value && /^#[0-9a-fA-F]{6}$/.test(value)) {
+      const hsl = hexToHsl(value)
+      setHue(hsl.h)
+      setSat(hsl.s)
+      setLit(hsl.l)
+    }
+  }, [value])
+
+  // Draw canvas: saturation (x) × lightness (y)
+  React.useEffect(() => {
+    const canvas = canvasRef.current
+    if (!canvas) return
+    const ctx = canvas.getContext("2d")
+    if (!ctx) return
+    const w = canvas.width
+    const h = canvas.height
+    const hueColor = hslToHex(hue, 100, 50)
+    // Horizontal: white to hue (saturation)
+    const gradH = ctx.createLinearGradient(0, 0, w, 0)
+    gradH.addColorStop(0, "#ffffff")
+    gradH.addColorStop(1, hueColor)
+    ctx.fillStyle = gradH
+    ctx.fillRect(0, 0, w, h)
+    // Vertical: transparent to black (lightness)
+    const gradV = ctx.createLinearGradient(0, 0, 0, h)
+    gradV.addColorStop(0, "rgba(0,0,0,0)")
+    gradV.addColorStop(1, "#000000")
+    ctx.fillStyle = gradV
+    ctx.fillRect(0, 0, w, h)
+  }, [hue])
+
+  React.useEffect(() => {
+    if (!isOpen) return
+    const handler = (e: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
+        setIsOpen(false)
+      }
+    }
+    document.addEventListener("mousedown", handler)
+    return () => document.removeEventListener("mousedown", handler)
+  }, [isOpen])
+
+  // Canvas controls both saturation (x) and lightness (y)
+  const updateCanvas = React.useCallback((clientX: number, clientY: number) => {
+    const canvas = canvasRef.current
+    if (!canvas) return
+    const rect = canvas.getBoundingClientRect()
+    const x = Math.max(0, Math.min(clientX - rect.left, rect.width))
+    const y = Math.max(0, Math.min(clientY - rect.top, rect.height))
+    const newSat = Math.round((x / rect.width) * 100)
+    const newLit = Math.round((1 - y / rect.height) * 100)
+    setSat(newSat)
+    setLit(newLit)
+    const hex = hslToHex(hue, newSat, newLit)
+    setInputValue(hex)
+    onChange(hex)
+  }, [hue, onChange])
+
+  const updateHue = React.useCallback((clientX: number) => {
+    const el = hueRef.current
+    if (!el) return
+    const rect = el.getBoundingClientRect()
+    const x = Math.max(0, Math.min(clientX - rect.left, rect.width))
+    const newHue = Math.round((x / rect.width) * 360)
+    setHue(newHue)
+    const hex = hslToHex(newHue, sat, lit)
+    setInputValue(hex)
+    onChange(hex)
+  }, [sat, lit, onChange])
+
+  React.useEffect(() => {
+    if (!isDraggingCanvas && !isDraggingHue) return
+    const handleMove = (e: MouseEvent) => {
+      if (isDraggingCanvas) updateCanvas(e.clientX, e.clientY)
+      if (isDraggingHue) updateHue(e.clientX)
+    }
+    const handleUp = () => {
+      setIsDraggingCanvas(false)
+      setIsDraggingHue(false)
+    }
+    document.addEventListener("mousemove", handleMove)
+    document.addEventListener("mouseup", handleUp)
+    return () => {
+      document.removeEventListener("mousemove", handleMove)
+      document.removeEventListener("mouseup", handleUp)
+    }
+  }, [isDraggingCanvas, isDraggingHue, updateCanvas, updateHue])
+
+  const handleCanvasDown = (e: React.MouseEvent<HTMLCanvasElement>) => {
+    setIsDraggingCanvas(true)
+    updateCanvas(e.clientX, e.clientY)
+  }
+  const handleHueDown = (e: React.MouseEvent<HTMLDivElement>) => {
+    setIsDraggingHue(true)
+    updateHue(e.clientX)
+  }
+
+  const handleHexInput = (v: string) => {
+    setInputValue(v)
+    if (/^#[0-9a-fA-F]{6}$/.test(v)) onChange(v)
+  }
+
+  const handleClear = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    onChange("")
+    setInputValue("")
+  }
+
+  const currentColor = value || "#808080"
+
+  return (
+    <div ref={containerRef} className={cn("relative", className)}>
+      <button
+        type="button"
+        onClick={() => setIsOpen(!isOpen)}
+        className="flex items-center gap-3 rounded-xl border border-border/50 px-3 py-2 hover:bg-muted/50 transition-colors"
+      >
+        <div
+          className="size-10 rounded-xl border-2 shadow-[inset_0_1px_0_0_rgba(255,255,255,0.15),0_2px_4px_rgba(0,0,0,0.15)]"
+          style={{ backgroundColor: currentColor, borderColor: currentColor }}
+        />
+        <div className="flex flex-col items-start">
+          <span className="text-xs font-medium text-foreground">{value ? "Custom" : "Default"}</span>
+          <span className="text-[11px] font-mono text-muted-foreground">{value || "—"}</span>
+        </div>
+        {value && (
+          <span
+            role="button"
+            tabIndex={0}
+            onClick={handleClear}
+            onKeyDown={(e) => e.key === "Enter" && handleClear(e)}
+            className="ml-2 text-muted-foreground/50 hover:text-muted-foreground text-xs cursor-pointer"
+          >
+            ×
+          </span>
+        )}
+      </button>
+
+      {isOpen && (
+        <div className="absolute top-full left-0 mt-2 z-50 w-72 rounded-2xl border border-border bg-popover p-4 shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1),inset_0_-2px_0_0_rgba(0,0,0,0.1),0_0_0_1px_rgba(0,0,0,0.05),0_2px_0_0_rgba(0,0,0,0.08),0_4px_0_0_rgba(0,0,0,0.06),0_6px_0_0_rgba(0,0,0,0.04),0_8px_0_0_rgba(0,0,0,0.02),0_12px_24px_-4px_rgba(0,0,0,0.15)]">
+          {/* Current color preview */}
+          <div className="flex items-center gap-3 mb-3">
+            <div
+              className="size-12 rounded-xl border-2 shadow-[inset_0_1px_0_0_rgba(255,255,255,0.15),0_2px_4px_rgba(0,0,0,0.15)]"
+              style={{ backgroundColor: currentColor, borderColor: currentColor }}
+            />
+            <div>
+              <p className="text-xs font-medium text-foreground">Current color</p>
+              <p className="text-[11px] font-mono text-muted-foreground">{value || "Default (theme)"}</p>
+            </div>
+          </div>
+
+          {/* Canvas with pointer */}
+          <div className="relative h-[160px] rounded-xl border border-border overflow-hidden cursor-crosshair select-none">
+            <canvas
+              ref={canvasRef}
+              width={248}
+              height={160}
+              className="absolute inset-0 w-full h-full"
+              onMouseDown={handleCanvasDown}
+            />
+            {/* 3D pointer */}
+            <div
+              className="absolute w-4 h-4 -translate-x-1/2 -translate-y-1/2 pointer-events-none rounded-full"
+              style={{
+                left: `${sat}%`,
+                top: `${(1 - lit / 100) * 100}%`,
+                boxShadow: "0 1px 3px rgba(0,0,0,0.4), 0 0 0 1.5px rgba(255,255,255,0.9), inset 0 1px 0 rgba(255,255,255,0.5)",
+              }}
+            />
+          </div>
+
+          {/* Hue slider */}
+          <div className="mt-3">
+            <p className="text-[10px] font-medium text-muted-foreground mb-1.5">Hue</p>
+            <div
+              ref={hueRef}
+              className="relative h-5 rounded-full cursor-pointer border border-border select-none"
+              style={{
+                background: "linear-gradient(to right, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000)",
+              }}
+              onMouseDown={handleHueDown}
+            >
+              <div
+                className="absolute top-1/2 -translate-y-1/2 -translate-x-1/2 size-5 rounded-full border-2 border-white shadow-[0_0_0_1px_rgba(0,0,0,0.2),0_1px_3px_rgba(0,0,0,0.3)] pointer-events-none"
+                style={{ left: `${(hue / 360) * 100}%`, backgroundColor: hslToHex(hue, 100, 50) }}
+              />
+            </div>
+          </div>
+
+          {/* Hex input */}
+          <div className="mt-3 flex items-center gap-2">
+            <div
+              className="size-10 rounded-xl border-2 shadow-[inset_0_1px_0_0_rgba(255,255,255,0.15),0_2px_4px_rgba(0,0,0,0.15)]"
+              style={{ backgroundColor: currentColor, borderColor: currentColor }}
+            />
+            <input
+              type="text"
+              value={inputValue}
+              onChange={(e) => handleHexInput(e.target.value)}
+              placeholder="#000000"
+              className="flex-1 text-xs font-mono bg-muted/50 border border-border rounded-lg px-2.5 py-2 focus:outline-none focus:ring-1 focus:ring-ring"
+            />
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export { ColorPicker }

package/src/components/command.tsx

@@ -0,0 +1,195 @@
+import * as React from "react"
+import { Command as CommandPrimitive } from "cmdk"
+
+import { cn } from "@workspace/ui/lib/utils"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@workspace/ui/components/dialog"
+import {
+  InputGroup,
+  InputGroupAddon,
+} from "@workspace/ui/components/input-group"
+import { HugeiconsIcon } from "@hugeicons/react"
+import { SearchIcon, Tick02Icon } from "@hugeicons/core-free-icons"
+
+function Command({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive>) {
+  return (
+    <CommandPrimitive
+      data-slot="command"
+      className={cn(
+        "flex size-full flex-col overflow-hidden rounded-4xl bg-popover p-1 text-popover-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandDialog({
+  title = "Command Palette",
+  description = "Search for a command to run...",
+  children,
+  className,
+  showCloseButton = false,
+  ...props
+}: Omit<React.ComponentProps<typeof Dialog>, "children"> & {
+  title?: string
+  description?: string
+  className?: string
+  showCloseButton?: boolean
+  children: React.ReactNode
+}) {
+  return (
+    <Dialog {...props}>
+      <DialogHeader className="sr-only">
+        <DialogTitle>{title}</DialogTitle>
+        <DialogDescription>{description}</DialogDescription>
+      </DialogHeader>
+      <DialogContent
+        className={cn(
+          "top-1/3 translate-y-0 overflow-hidden rounded-4xl! p-0",
+          className
+        )}
+        showCloseButton={showCloseButton}
+      >
+        {children}
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+function CommandInput({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Input>) {
+  return (
+    <div data-slot="command-input-wrapper" className="p-1 pb-0">
+      <InputGroup className="h-9 bg-input/30">
+        <CommandPrimitive.Input
+          data-slot="command-input"
+          className={cn(
+            "w-full text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
+            className
+          )}
+          {...props}
+        />
+        <InputGroupAddon>
+          <HugeiconsIcon icon={SearchIcon} strokeWidth={2} className="size-4 shrink-0 opacity-50" />
+        </InputGroupAddon>
+      </InputGroup>
+    </div>
+  )
+}
+
+function CommandList({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.List>) {
+  return (
+    <CommandPrimitive.List
+      data-slot="command-list"
+      className={cn(
+        "no-scrollbar max-h-72 scroll-py-1 overflow-x-hidden overflow-y-auto outline-none",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandEmpty({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
+  return (
+    <CommandPrimitive.Empty
+      data-slot="command-empty"
+      className={cn("py-6 text-center text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function CommandGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Group>) {
+  return (
+    <CommandPrimitive.Group
+      data-slot="command-group"
+      className={cn(
+        "overflow-hidden p-1 text-foreground **:[[cmdk-group-heading]]:px-3 **:[[cmdk-group-heading]]:py-2 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
+  return (
+    <CommandPrimitive.Separator
+      data-slot="command-separator"
+      className={cn("my-1 h-px bg-border/50", className)}
+      {...props}
+    />
+  )
+}
+
+function CommandItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Item>) {
+  return (
+    <CommandPrimitive.Item
+      data-slot="command-item"
+      className={cn(
+        "group/command-item relative flex cursor-default items-center gap-2 rounded-lg px-3 py-2 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-2xl data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-selected:bg-muted data-selected:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-selected:*:[svg]:text-foreground",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <HugeiconsIcon icon={Tick02Icon} strokeWidth={2} className="ms-auto opacity-0 group-has-data-[slot=command-shortcut]/command-item:hidden group-data-[checked=true]/command-item:opacity-100" />
+    </CommandPrimitive.Item>
+  )
+}
+
+function CommandShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="command-shortcut"
+      className={cn(
+        "ms-auto text-xs tracking-widest text-muted-foreground group-data-selected/command-item:text-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+}