@etherealui/react 0.0.0-stage → 0.0.3

package/src/primitives/checkbox.tsx

@@ -0,0 +1,26 @@
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { Check } from "lucide-react"
+import { cn } from "../utils/cn"
+
+export const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      "peer h-4 w-4 shrink-0 rounded border border-zinc-300 bg-white transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/30 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-blue-600 data-[state=checked]:border-blue-600 data-[state=checked]:text-white dark:border-zinc-700 dark:bg-zinc-900 dark:data-[state=checked]:bg-blue-600 cursor-pointer",
+      className
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator
+      className={cn("flex items-center justify-center text-current")}
+    >
+      <Check className="h-3 w-3 stroke-[2.5]" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+))
+Checkbox.displayName = CheckboxPrimitive.Root.displayName
+

package/src/primitives/chip.tsx

@@ -0,0 +1,37 @@
+import * as React from "react"
+import { X } from "lucide-react"
+import { cn } from "../utils/cn"
+
+export interface ChipProps extends React.HTMLAttributes<HTMLSpanElement> {
+  onRemove?: () => void
+  active?: boolean
+}
+
+export const Chip = React.forwardRef<HTMLSpanElement, ChipProps>(
+  ({ className, children, onRemove, active = false, ...props }, ref) => (
+    <span
+      ref={ref}
+      className={cn(
+        "inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs font-medium transition-colors",
+        active
+          ? "border-blue-200 bg-blue-50 text-blue-700 dark:border-blue-500/30 dark:bg-blue-500/15 dark:text-blue-300"
+          : "border-zinc-200 bg-white text-zinc-700 hover:bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-300 dark:hover:bg-zinc-800",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      {onRemove && (
+        <button
+          type="button"
+          onClick={onRemove}
+          className="rounded-full p-0.5 text-zinc-400 hover:bg-zinc-200/60 hover:text-zinc-700 dark:hover:bg-zinc-700 dark:hover:text-zinc-200 cursor-pointer"
+        >
+          <X className="h-3 w-3" />
+        </button>
+      )}
+    </span>
+  )
+)
+Chip.displayName = "Chip"
+

package/src/primitives/close-button.tsx

@@ -0,0 +1,29 @@
+import * as React from "react"
+import { X } from "lucide-react"
+import { cn } from "../utils/cn"
+
+export interface CloseButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  size?: "sm" | "default"
+}
+
+export const CloseButton = React.forwardRef<
+  HTMLButtonElement,
+  CloseButtonProps
+>(({ className, size = "default", ...props }, ref) => (
+  <button
+    ref={ref}
+    type="button"
+    aria-label="Close"
+    className={cn(
+      "inline-flex items-center justify-center rounded-lg text-zinc-400 transition-colors hover:bg-zinc-100 hover:text-zinc-700 dark:hover:bg-zinc-800 dark:hover:text-zinc-200 cursor-pointer",
+      size === "sm" ? "h-6 w-6" : "h-8 w-8",
+      className
+    )}
+    {...props}
+  >
+    <X className={size === "sm" ? "h-3.5 w-3.5" : "h-4 w-4"} />
+  </button>
+))
+CloseButton.displayName = "CloseButton"
+

package/src/primitives/color-picker.tsx

@@ -0,0 +1,62 @@
+import * as React from "react"
+import { cn } from "../utils/cn"
+
+export interface ColorPickerProps {
+  className?: string
+  defaultColor?: string
+}
+
+export const ColorPicker: React.FC<ColorPickerProps> = ({
+  className,
+  defaultColor = "#2563eb",
+}) => {
+  const swatches = [
+    "#2563eb",
+    "#0ea5e9",
+    "#10b981",
+    "#f59e0b",
+    "#f43f5e",
+    "#8b5cf6",
+    "#18181b",
+  ]
+  const [color, setColor] = React.useState(defaultColor)
+
+  return (
+    <div
+      className={cn(
+        "inline-flex flex-col gap-3 rounded-2xl border border-zinc-200 bg-white p-4 dark:border-zinc-800 dark:bg-zinc-900",
+        className
+      )}
+    >
+      <div className="flex items-center gap-2.5">
+        <span
+          className="h-6 w-6 rounded-lg border border-black/10 shrink-0"
+          style={{ backgroundColor: color }}
+        />
+        <input
+          type="text"
+          value={color}
+          onChange={(e) => setColor(e.target.value)}
+          className="w-28 rounded-lg border border-zinc-200 bg-zinc-50 px-2.5 py-1 font-mono text-xs text-zinc-800 focus:outline-none dark:border-zinc-800 dark:bg-zinc-800 dark:text-zinc-200"
+        />
+      </div>
+      <div className="flex items-center gap-1.5">
+        {swatches.map((sw) => (
+          <button
+            key={sw}
+            type="button"
+            onClick={() => setColor(sw)}
+            style={{ backgroundColor: sw }}
+            className={cn(
+              "h-6 w-6 rounded-full transition-transform cursor-pointer",
+              color === sw &&
+                "scale-110 ring-2 ring-offset-2 ring-blue-500 dark:ring-offset-zinc-900"
+            )}
+          />
+        ))}
+      </div>
+    </div>
+  )
+}
+ColorPicker.displayName = "ColorPicker"
+

package/src/primitives/combobox.tsx

@@ -0,0 +1,123 @@
+import * as React from "react"
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+import { Check, Search, ChevronsUpDown } from "lucide-react"
+import { cn } from "../utils/cn"
+
+export interface ComboboxOption {
+  value: string
+  label: string
+  badge?: string
+}
+
+export interface ComboboxProps {
+  options: ComboboxOption[]
+  value: string
+  onValueChange: (value: string) => void
+  placeholder?: string
+  searchPlaceholder?: string
+  className?: string
+}
+
+export const Combobox: React.FC<ComboboxProps> = ({
+  options,
+  value,
+  onValueChange,
+  placeholder = "Select option...",
+  searchPlaceholder = "Search...",
+  className,
+}) => {
+  const [open, setOpen] = React.useState(false)
+  const [query, setQuery] = React.useState("")
+
+  const selected = options.find((o) => o.value === value)
+  const filtered = React.useMemo(() => {
+    if (!query.trim()) return options
+    return options.filter((o) =>
+      o.label.toLowerCase().includes(query.toLowerCase())
+    )
+  }, [options, query])
+
+  return (
+    <PopoverPrimitive.Root open={open} onOpenChange={setOpen}>
+      <PopoverPrimitive.Trigger asChild>
+        <button
+          type="button"
+          className={cn(
+            "flex h-9 w-full items-center justify-between gap-2 rounded-lg border border-zinc-200 bg-white px-3 py-2 text-xs text-zinc-900 transition-colors hover:bg-zinc-50 focus:outline-none focus:ring-2 focus:ring-blue-500/20 dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-100 dark:hover:bg-zinc-800/60 cursor-pointer",
+            className
+          )}
+        >
+          <span className={cn("truncate", !selected && "text-zinc-400")}>
+            {selected ? selected.label : placeholder}
+          </span>
+          <ChevronsUpDown className="h-3.5 w-3.5 text-zinc-400 shrink-0" />
+        </button>
+      </PopoverPrimitive.Trigger>
+      <PopoverPrimitive.Portal>
+        <PopoverPrimitive.Content
+          align="start"
+          sideOffset={6}
+          className="z-50 w-64 rounded-xl border border-zinc-200 bg-white p-1.5 text-zinc-900 shadow-lg focus:outline-none dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-100"
+        >
+          <div className="flex items-center gap-2 border-b border-zinc-200 px-2.5 py-1.5 dark:border-zinc-800">
+            <Search className="h-3.5 w-3.5 text-zinc-400" />
+            <input
+              type="text"
+              value={query}
+              onChange={(e) => setQuery(e.target.value)}
+              placeholder={searchPlaceholder}
+              className="w-full bg-transparent text-xs text-zinc-900 placeholder:text-zinc-400 focus:outline-none dark:text-zinc-100"
+            />
+          </div>
+          <div className="mt-1 max-h-52 overflow-y-auto space-y-0.5">
+            {filtered.length === 0 ? (
+              <div className="py-4 text-center text-xs text-zinc-400">
+                No matching items found.
+              </div>
+            ) : (
+              filtered.map((opt) => {
+                const isSelected = opt.value === value
+                return (
+                  <button
+                    key={opt.value}
+                    type="button"
+                    onClick={() => {
+                      onValueChange(opt.value)
+                      setOpen(false)
+                      setQuery("")
+                    }}
+                    className={cn(
+                      "flex w-full items-center justify-between rounded-lg px-2.5 py-1.5 text-xs transition-colors cursor-pointer",
+                      isSelected
+                        ? "bg-blue-50 text-blue-700 dark:bg-blue-500/15 dark:text-blue-300"
+                        : "text-zinc-700 hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-zinc-800"
+                    )}
+                  >
+                    <span className="flex items-center gap-2">
+                      <Check
+                        className={cn(
+                          "h-3.5 w-3.5",
+                          isSelected
+                            ? "opacity-100 text-blue-600 dark:text-blue-400"
+                            : "opacity-0"
+                        )}
+                      />
+                      {opt.label}
+                    </span>
+                    {opt.badge && (
+                      <span className="rounded bg-zinc-100 px-1.5 py-0.5 font-mono text-[10px] text-zinc-500 dark:bg-zinc-800 dark:text-zinc-400">
+                        {opt.badge}
+                      </span>
+                    )}
+                  </button>
+                )
+              })
+            )}
+          </div>
+        </PopoverPrimitive.Content>
+      </PopoverPrimitive.Portal>
+    </PopoverPrimitive.Root>
+  )
+}
+Combobox.displayName = "Combobox"
+

package/src/primitives/command-palette.tsx

@@ -0,0 +1,216 @@
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { Search, CornerDownLeft, FileText, Settings, Users, Terminal, BarChart3 } from "lucide-react"
+import { cn } from "../utils/cn"
+
+export interface CommandItem {
+  id: string
+  label: string
+  category: string
+  shortcut?: string
+  icon?: React.ReactNode
+  onSelect?: () => void
+}
+
+export interface CommandPaletteProps {
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+  items?: CommandItem[]
+  placeholder?: string
+  enableGlobalShortcut?: boolean
+}
+
+const defaultCommandItems: CommandItem[] = [
+  {
+    id: "overview",
+    label: "Go to Analytics Overview",
+    category: "Navigation",
+    shortcut: "G A",
+    icon: <BarChart3 className="h-4 w-4 text-blue-600 dark:text-blue-400" />,
+  },
+  {
+    id: "customers",
+    label: "Search Customer Directory",
+    category: "Navigation",
+    shortcut: "G C",
+    icon: <Users className="h-4 w-4 text-zinc-500" />,
+  },
+  {
+    id: "docs-cli",
+    label: "Copy CLI Installation Command",
+    category: "Developer",
+    shortcut: "⌘ C",
+    icon: <Terminal className="h-4 w-4 text-zinc-500" />,
+  },
+  {
+    id: "invoices",
+    label: "Export Monthly Invoice PDF",
+    category: "Billing",
+    shortcut: "⌘ E",
+    icon: <FileText className="h-4 w-4 text-zinc-500" />,
+  },
+  {
+    id: "settings",
+    label: "Open Workspace Preferences",
+    category: "Settings",
+    shortcut: "⌘ ,",
+    icon: <Settings className="h-4 w-4 text-zinc-500" />,
+  },
+]
+
+export const CommandPalette: React.FC<CommandPaletteProps> = ({
+  open: controlledOpen,
+  onOpenChange,
+  items = defaultCommandItems,
+  placeholder = "Type a command or search...",
+  enableGlobalShortcut = true,
+}) => {
+  const [internalOpen, setInternalOpen] = React.useState(false)
+  const [query, setQuery] = React.useState("")
+  const [activeIndex, setActiveIndex] = React.useState(0)
+
+  const isOpen = controlledOpen !== undefined ? controlledOpen : internalOpen
+  const setOpen = onOpenChange || setInternalOpen
+
+  React.useEffect(() => {
+    if (!enableGlobalShortcut) return
+    const onKeyDown = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") {
+        e.preventDefault()
+        setOpen(!isOpen)
+      }
+    }
+    window.addEventListener("keydown", onKeyDown)
+    return () => window.removeEventListener("keydown", onKeyDown)
+  }, [enableGlobalShortcut, isOpen, setOpen])
+
+  const filtered = React.useMemo(() => {
+    if (!query.trim()) return items
+    const q = query.toLowerCase()
+    return items.filter(
+      (i) =>
+        i.label.toLowerCase().includes(q) ||
+        i.category.toLowerCase().includes(q)
+    )
+  }, [items, query])
+
+  const grouped = React.useMemo(() => {
+    const map = new Map<string, CommandItem[]>()
+    for (const item of filtered) {
+      const list = map.get(item.category) || []
+      list.push(item)
+      map.set(item.category, list)
+    }
+    return Array.from(map.entries())
+  }, [filtered])
+
+  React.useEffect(() => {
+    setActiveIndex(0)
+  }, [query])
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "ArrowDown") {
+      e.preventDefault()
+      setActiveIndex((prev) => (filtered.length ? (prev + 1) % filtered.length : 0))
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault()
+      setActiveIndex((prev) =>
+        filtered.length ? (prev - 1 + filtered.length) % filtered.length : 0
+      )
+    } else if (e.key === "Enter" && filtered[activeIndex]) {
+      e.preventDefault()
+      filtered[activeIndex].onSelect?.()
+      setOpen(false)
+    }
+  }
+
+  let flatCursor = -1
+
+  return (
+    <DialogPrimitive.Root open={isOpen} onOpenChange={setOpen}>
+      <DialogPrimitive.Portal>
+        <DialogPrimitive.Overlay className="fixed inset-0 z-50 bg-black/50 backdrop-blur-xs" />
+        <DialogPrimitive.Content
+          onKeyDown={handleKeyDown}
+          className="fixed left-1/2 top-[18%] z-50 w-full max-w-xl -translate-x-1/2 overflow-hidden rounded-2xl border border-zinc-200 bg-white text-zinc-900 shadow-2xl focus:outline-none dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-100"
+        >
+          <DialogPrimitive.Title className="sr-only">
+            Command Palette
+          </DialogPrimitive.Title>
+          <div className="flex items-center gap-3 border-b border-zinc-200 px-4 py-3 dark:border-zinc-800">
+            <Search className="h-4 w-4 text-zinc-400 shrink-0" />
+            <input
+              type="text"
+              autoFocus
+              value={query}
+              onChange={(e) => setQuery(e.target.value)}
+              placeholder={placeholder}
+              className="w-full bg-transparent text-sm text-zinc-900 placeholder:text-zinc-400 focus:outline-none dark:text-zinc-100"
+            />
+            <kbd className="rounded border border-zinc-200 bg-zinc-100 px-1.5 py-0.5 font-mono text-[10px] text-zinc-500 dark:border-zinc-800 dark:bg-zinc-800 dark:text-zinc-400">
+              ESC
+            </kbd>
+          </div>
+
+          <div className="max-h-80 overflow-y-auto p-2 space-y-3">
+            {grouped.length === 0 ? (
+              <div className="py-10 text-center text-xs text-zinc-400">
+                No matching results for &ldquo;{query}&rdquo;
+              </div>
+            ) : (
+              grouped.map(([category, groupItems]) => (
+                <div key={category} className="space-y-1">
+                  <div className="px-2.5 py-1 text-[10px] font-semibold uppercase tracking-wider text-zinc-400">
+                    {category}
+                  </div>
+                  {groupItems.map((item) => {
+                    flatCursor += 1
+                    const idx = flatCursor
+                    const isActive = idx === activeIndex
+                    return (
+                      <button
+                        key={item.id}
+                        type="button"
+                        onMouseEnter={() => setActiveIndex(idx)}
+                        onClick={() => {
+                          item.onSelect?.()
+                          setOpen(false)
+                        }}
+                        className={cn(
+                          "flex w-full items-center justify-between rounded-xl px-3 py-2 text-xs transition-colors cursor-pointer",
+                          isActive
+                            ? "bg-zinc-100 text-zinc-900 dark:bg-zinc-800 dark:text-white"
+                            : "text-zinc-600 hover:bg-zinc-50 dark:text-zinc-300 dark:hover:bg-zinc-800/50"
+                        )}
+                      >
+                        <span className="flex items-center gap-2.5">
+                          {item.icon}
+                          <span className="font-medium">{item.label}</span>
+                        </span>
+                        {item.shortcut && (
+                          <kbd className="rounded border border-zinc-200 bg-white px-1.5 py-0.5 font-mono text-[10px] text-zinc-500 dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-400">
+                            {item.shortcut}
+                          </kbd>
+                        )}
+                      </button>
+                    )
+                  })}
+                </div>
+              ))
+            )}
+          </div>
+
+          <div className="flex items-center justify-between border-t border-zinc-200 bg-zinc-50 px-4 py-2 text-[11px] text-zinc-500 dark:border-zinc-800 dark:bg-zinc-950/50 dark:text-zinc-400">
+            <div className="flex items-center gap-3">
+              <span className="flex items-center gap-1">
+                <CornerDownLeft className="h-3 w-3" /> Select
+              </span>
+              <span>↑↓ Navigate</span>
+            </div>
+            <span className="font-mono text-[10px]">Quick Search</span>
+          </div>
+        </DialogPrimitive.Content>
+      </DialogPrimitive.Portal>
+    </DialogPrimitive.Root>
+  )
+}

package/src/primitives/context-menu.tsx

@@ -0,0 +1,84 @@
+import * as React from "react"
+import { cn } from "../utils/cn"
+
+export interface ContextMenuAction {
+  label: string
+  shortcut?: string
+  icon?: React.ReactNode
+  destructive?: boolean
+  onClick?: () => void
+}
+
+export interface ContextMenuBoxProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  actions: ContextMenuAction[]
+}
+
+export const ContextMenuBox: React.FC<ContextMenuBoxProps> = ({
+  actions,
+  children,
+  className,
+  ...props
+}) => {
+  const [coords, setCoords] = React.useState<{ x: number; y: number } | null>(
+    null
+  )
+
+  React.useEffect(() => {
+    const close = () => setCoords(null)
+    window.addEventListener("click", close)
+    return () => window.removeEventListener("click", close)
+  }, [])
+
+  return (
+    <div
+      onContextMenu={(e) => {
+        e.preventDefault()
+        const rect = e.currentTarget.getBoundingClientRect()
+        setCoords({
+          x: Math.min(e.clientX - rect.left, rect.width - 180),
+          y: Math.min(e.clientY - rect.top, rect.height - 140),
+        })
+      }}
+      className={cn("relative select-none", className)}
+      {...props}
+    >
+      {children}
+      {coords && (
+        <div
+          style={{ left: coords.x, top: coords.y }}
+          className="absolute z-40 min-w-[180px] rounded-xl border border-zinc-200 bg-white p-1 text-zinc-900 shadow-xl dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-100"
+        >
+          {actions.map((act, idx) => (
+            <button
+              key={idx}
+              type="button"
+              onClick={() => {
+                act.onClick?.()
+                setCoords(null)
+              }}
+              className={cn(
+                "flex w-full items-center justify-between rounded-lg px-2.5 py-1.5 text-xs transition-colors cursor-pointer",
+                act.destructive
+                  ? "text-rose-600 hover:bg-rose-50 dark:text-rose-400 dark:hover:bg-rose-500/15"
+                  : "text-zinc-700 hover:bg-zinc-100 dark:text-zinc-200 dark:hover:bg-zinc-800"
+              )}
+            >
+              <span className="flex items-center gap-2">
+                {act.icon}
+                {act.label}
+              </span>
+              {act.shortcut && (
+                <span className="font-mono text-[10px] text-zinc-400">
+                  {act.shortcut}
+                </span>
+              )}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+ContextMenuBox.displayName = "ContextMenuBox"
+

package/src/primitives/date-calendar.tsx

@@ -0,0 +1,76 @@
+import * as React from "react"
+import { ChevronLeft, ChevronRight } from "lucide-react"
+import { cn } from "../utils/cn"
+
+export interface DateCalendarProps {
+  className?: string
+  defaultSelectedDay?: number
+}
+
+export const DateCalendar: React.FC<DateCalendarProps> = ({
+  className,
+  defaultSelectedDay = 14,
+}) => {
+  const [selectedDay, setSelectedDay] = React.useState(defaultSelectedDay)
+  const days = Array.from({ length: 30 }, (_, i) => i + 1)
+
+  return (
+    <div
+      className={cn(
+        "w-64 rounded-2xl border border-zinc-200 bg-white p-4 shadow-2xs dark:border-zinc-800 dark:bg-zinc-900",
+        className
+      )}
+    >
+      <div className="mb-3 flex items-center justify-between">
+        <span className="text-xs font-semibold text-zinc-900 dark:text-zinc-100">
+          November 2026
+        </span>
+        <div className="flex items-center gap-1">
+          <button
+            type="button"
+            className="rounded-md p-1 text-zinc-400 hover:bg-zinc-100 dark:hover:bg-zinc-800 cursor-pointer"
+          >
+            <ChevronLeft className="h-3.5 w-3.5" />
+          </button>
+          <button
+            type="button"
+            className="rounded-md p-1 text-zinc-400 hover:bg-zinc-100 dark:hover:bg-zinc-800 cursor-pointer"
+          >
+            <ChevronRight className="h-3.5 w-3.5" />
+          </button>
+        </div>
+      </div>
+      <div className="grid grid-cols-7 gap-1 text-center text-[10px] font-medium text-zinc-400 mb-1.5">
+        <span>Su</span>
+        <span>Mo</span>
+        <span>Tu</span>
+        <span>We</span>
+        <span>Th</span>
+        <span>Fr</span>
+        <span>Sa</span>
+      </div>
+      <div className="grid grid-cols-7 gap-1">
+        {days.map((d) => {
+          const active = d === selectedDay
+          return (
+            <button
+              key={d}
+              type="button"
+              onClick={() => setSelectedDay(d)}
+              className={cn(
+                "flex h-7 w-7 items-center justify-center rounded-lg text-xs transition-colors cursor-pointer",
+                active
+                  ? "bg-blue-600 font-semibold text-white"
+                  : "text-zinc-700 hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-zinc-800"
+              )}
+            >
+              {d}
+            </button>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
+DateCalendar.displayName = "DateCalendar"
+