@stampui/blocks 1.0.0

package/src/components/core/combobox.tsx

@@ -0,0 +1,114 @@
+"use client"
+
+import * as React from "react"
+import * as RadixPopover from "@radix-ui/react-popover"
+import { Check, ChevronDown, Search } from "lucide-react"
+import { cx } from "@/lib/cx"
+
+export interface ComboboxOption {
+  value: string
+  label: string
+  disabled?: boolean
+}
+
+export interface ComboboxProps {
+  options: ComboboxOption[]
+  value?: string
+  onValueChange?: (value: string) => void
+  placeholder?: string
+  searchPlaceholder?: string
+  emptyText?: string
+  disabled?: boolean
+  className?: string
+}
+
+export function Combobox({
+  options,
+  value,
+  onValueChange,
+  placeholder = "Select an option...",
+  searchPlaceholder = "Search...",
+  emptyText = "No results found.",
+  disabled,
+  className,
+}: ComboboxProps) {
+  const [open, setOpen] = React.useState(false)
+  const [query, setQuery] = React.useState("")
+
+  const filtered = query
+    ? options.filter((o) => o.label.toLowerCase().includes(query.toLowerCase()))
+    : options
+
+  const selected = options.find((o) => o.value === value)
+
+  function handleSelect(optionValue: string) {
+    onValueChange?.(optionValue === value ? "" : optionValue)
+    setOpen(false)
+    setQuery("")
+  }
+
+  return (
+    <RadixPopover.Root open={open} onOpenChange={(o) => { setOpen(o); if (!o) setQuery("") }}>
+      <RadixPopover.Trigger asChild>
+        <button
+          type="button"
+          disabled={disabled}
+          aria-expanded={open}
+          className={cx(
+            "flex h-9 w-full items-center justify-between gap-2 rounded-lg border border-border bg-surface-2 px-3 py-2 text-sm outline-none",
+            "hover:border-border-strong transition-colors text-left",
+            "focus-visible:ring-1 focus-visible:ring-border-strong focus-visible:ring-offset-1 focus-visible:ring-offset-background",
+            "disabled:cursor-not-allowed disabled:opacity-50",
+            !selected && "text-muted-foreground",
+            className
+          )}
+        >
+          <span className="truncate">{selected ? selected.label : placeholder}</span>
+          <ChevronDown className={cx("h-4 w-4 shrink-0 text-muted-foreground transition-transform", open && "rotate-180")} />
+        </button>
+      </RadixPopover.Trigger>
+      <RadixPopover.Portal>
+        <RadixPopover.Content
+          align="start"
+          sideOffset={4}
+          className="z-50 w-[var(--radix-popover-trigger-width)] min-w-[12rem] rounded-xl border border-border bg-card shadow-lg outline-none animate-in fade-in-0 zoom-in-95"
+        >
+          <div className="flex items-center gap-2 border-b border-border px-3 py-2">
+            <Search className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+            <input
+              autoFocus
+              value={query}
+              onChange={(e) => setQuery(e.target.value)}
+              placeholder={searchPlaceholder}
+              className="flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground"
+            />
+          </div>
+          <div className="max-h-60 overflow-auto p-1.5">
+            {filtered.length === 0 ? (
+              <p className="px-2 py-4 text-center text-sm text-muted-foreground">{emptyText}</p>
+            ) : (
+              filtered.map((option) => (
+                <button
+                  key={option.value}
+                  type="button"
+                  disabled={option.disabled}
+                  onClick={() => handleSelect(option.value)}
+                  className={cx(
+                    "relative flex w-full cursor-default select-none items-center rounded-lg py-1.5 pl-8 pr-2.5 text-sm outline-none transition-colors",
+                    "hover:bg-surface-2 disabled:pointer-events-none disabled:opacity-50",
+                    option.value === value && "font-medium text-foreground"
+                  )}
+                >
+                  <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+                    {option.value === value && <Check className="h-4 w-4" />}
+                  </span>
+                  {option.label}
+                </button>
+              ))
+            )}
+          </div>
+        </RadixPopover.Content>
+      </RadixPopover.Portal>
+    </RadixPopover.Root>
+  )
+}

package/src/components/core/command-box.tsx

@@ -0,0 +1,22 @@
+import * as React from "react"
+import { CopyButton } from "@/components/core/copy-button"
+import { cx } from "@/lib/cx"
+
+interface CommandBoxProps extends React.HTMLAttributes<HTMLDivElement> {
+  command: string
+}
+
+export function CommandBox({ command, className, ...props }: CommandBoxProps) {
+  return (
+    <div
+      className={cx(
+        "relative flex w-full max-w-sm items-center justify-between rounded-lg border bg-muted/50 py-2 pl-4 pr-2 font-mono text-sm text-foreground",
+        className
+      )}
+      {...props}
+    >
+      <span className="truncate pr-4">$ {command}</span>
+      <CopyButton value={command} />
+    </div>
+  )
+}

package/src/components/core/command.tsx

@@ -0,0 +1,165 @@
+"use client"
+
+import * as React from "react"
+import * as RadixDialog from "@radix-ui/react-dialog"
+import { Search, X } from "lucide-react"
+import { cx } from "@/lib/cx"
+
+// ── Root ──────────────────────────────────────────────────────────────────────
+
+export interface CommandProps {
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+  children: React.ReactNode
+}
+
+export function Command({ open, onOpenChange, children }: CommandProps) {
+  return (
+    <RadixDialog.Root open={open} onOpenChange={onOpenChange}>
+      {children}
+    </RadixDialog.Root>
+  )
+}
+
+export const CommandTrigger = RadixDialog.Trigger
+
+// ── Dialog shell ──────────────────────────────────────────────────────────────
+
+export const CommandDialog = React.forwardRef<
+  React.ElementRef<typeof RadixDialog.Content>,
+  React.ComponentPropsWithoutRef<typeof RadixDialog.Content>
+>(({ className, children, ...props }, ref) => (
+  <RadixDialog.Portal>
+    <RadixDialog.Overlay className="fixed inset-0 z-50 bg-black/40 backdrop-blur-sm data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=closed]:animate-out data-[state=closed]:fade-out-0" />
+    <RadixDialog.Content
+      ref={ref}
+      className={cx(
+        "fixed left-1/2 top-[20%] z-50 w-full max-w-lg -translate-x-1/2 rounded-2xl border border-border bg-card shadow-2xl outline-none overflow-hidden",
+        "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=open]:slide-in-from-top-4",
+        "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+        className
+      )}
+      {...props}
+    >
+      <RadixDialog.Title className="sr-only">Command menu</RadixDialog.Title>
+      {children}
+    </RadixDialog.Content>
+  </RadixDialog.Portal>
+))
+CommandDialog.displayName = "CommandDialog"
+
+// ── Search input ───────────────────────────────────────────────────────────────
+
+export interface CommandInputProps {
+  placeholder?: string
+  value?: string
+  onValueChange?: (value: string) => void
+}
+
+export function CommandInput({ placeholder = "Search...", value, onValueChange }: CommandInputProps) {
+  return (
+    <div className="flex items-center gap-2 border-b border-border px-4 py-3">
+      <Search className="h-4 w-4 shrink-0 text-muted-foreground" />
+      <input
+        autoFocus
+        value={value}
+        onChange={(e) => onValueChange?.(e.target.value)}
+        placeholder={placeholder}
+        className="flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground"
+      />
+      {value && (
+        <button onClick={() => onValueChange?.("")} className="text-muted-foreground hover:text-foreground transition-colors">
+          <X className="h-3.5 w-3.5" />
+        </button>
+      )}
+    </div>
+  )
+}
+
+// ── List ───────────────────────────────────────────────────────────────────────
+
+export function CommandList({ children, className }: { children: React.ReactNode; className?: string }) {
+  return (
+    <div className={cx("max-h-72 overflow-y-auto py-2", className)}>
+      {children}
+    </div>
+  )
+}
+
+// ── Empty ─────────────────────────────────────────────────────────────────────
+
+export function CommandEmpty({ children }: { children?: React.ReactNode }) {
+  return (
+    <div className="px-4 py-8 text-center text-sm text-muted-foreground">
+      {children ?? "No results found."}
+    </div>
+  )
+}
+
+// ── Group ─────────────────────────────────────────────────────────────────────
+
+export function CommandGroup({ heading, children, className }: { heading?: string; children: React.ReactNode; className?: string }) {
+  return (
+    <div className={cx("px-2", className)}>
+      {heading && (
+        <p className="px-2 py-1.5 text-xs font-medium text-muted-foreground">{heading}</p>
+      )}
+      {children}
+    </div>
+  )
+}
+
+// ── Separator ─────────────────────────────────────────────────────────────────
+
+export function CommandSeparator({ className }: { className?: string }) {
+  return <div className={cx("my-1 h-px bg-border mx-2", className)} />
+}
+
+// ── Item ──────────────────────────────────────────────────────────────────────
+
+export interface CommandItemProps {
+  children: React.ReactNode
+  onSelect?: () => void
+  disabled?: boolean
+  className?: string
+  shortcut?: string
+}
+
+export function CommandItem({ children, onSelect, disabled, className, shortcut }: CommandItemProps) {
+  return (
+    <button
+      type="button"
+      disabled={disabled}
+      onClick={onSelect}
+      className={cx(
+        "flex w-full items-center gap-2 rounded-lg px-2 py-1.5 text-sm text-foreground outline-none transition-colors",
+        "hover:bg-surface-2 focus:bg-surface-2",
+        "disabled:pointer-events-none disabled:opacity-50",
+        className
+      )}
+    >
+      <span className="flex-1 text-left">{children}</span>
+      {shortcut && (
+        <kbd className="pointer-events-none ml-auto flex h-5 items-center gap-0.5 rounded border border-border bg-surface px-1.5 font-mono text-[10px] text-muted-foreground">
+          {shortcut}
+        </kbd>
+      )}
+    </button>
+  )
+}
+
+// ── Footer hint ───────────────────────────────────────────────────────────────
+
+export function CommandFooter({ children, className }: { children?: React.ReactNode; className?: string }) {
+  return (
+    <div className={cx("flex items-center gap-3 border-t border-border px-4 py-2.5 text-xs text-muted-foreground", className)}>
+      {children ?? (
+        <>
+          <span className="flex items-center gap-1"><kbd className="rounded border border-border px-1 font-mono">↑↓</kbd> navigate</span>
+          <span className="flex items-center gap-1"><kbd className="rounded border border-border px-1 font-mono">↵</kbd> select</span>
+          <span className="flex items-center gap-1"><kbd className="rounded border border-border px-1 font-mono">esc</kbd> close</span>
+        </>
+      )}
+    </div>
+  )
+}

package/src/components/core/confirm-action.tsx

@@ -0,0 +1,94 @@
+"use client"
+
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cx } from "@/lib/cx"
+
+const buttonStyles = cva(
+  "inline-flex items-center justify-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed",
+  {
+    variants: {
+      variant: {
+        destructive: "bg-red-500 text-white hover:bg-red-600",
+        warning: "bg-orange-400 text-white hover:bg-orange-500",
+      },
+    },
+    defaultVariants: { variant: "destructive" },
+  }
+)
+
+export interface ConfirmActionProps extends VariantProps<typeof buttonStyles> {
+  label?: string
+  confirmLabel?: string
+  onConfirm?: () => void
+  timeout?: number
+  disabled?: boolean
+  className?: string
+}
+
+export function ConfirmAction({
+  label = "Delete",
+  confirmLabel = "Are you sure?",
+  onConfirm,
+  timeout = 3000,
+  variant,
+  disabled = false,
+  className,
+}: ConfirmActionProps) {
+  const [pending, setPending] = React.useState(false)
+  const [progress, setProgress] = React.useState(100)
+  const timerRef = React.useRef<ReturnType<typeof setTimeout> | null>(null)
+  const rafRef = React.useRef<number | null>(null)
+  const startRef = React.useRef<number | null>(null)
+
+  const reset = React.useCallback(() => {
+    setPending(false)
+    setProgress(100)
+    if (timerRef.current) clearTimeout(timerRef.current)
+    if (rafRef.current) cancelAnimationFrame(rafRef.current)
+    startRef.current = null
+  }, [])
+
+  const tick = React.useCallback((ts: number) => {
+    if (!startRef.current) startRef.current = ts
+    const elapsed = ts - startRef.current
+    const remaining = Math.max(0, 1 - elapsed / timeout)
+    setProgress(remaining * 100)
+    if (remaining > 0) {
+      rafRef.current = requestAnimationFrame(tick)
+    }
+  }, [timeout])
+
+  const handleClick = () => {
+    if (!pending) {
+      setPending(true)
+      startRef.current = null
+      rafRef.current = requestAnimationFrame(tick)
+      timerRef.current = setTimeout(reset, timeout)
+    } else {
+      if (timerRef.current) clearTimeout(timerRef.current)
+      if (rafRef.current) cancelAnimationFrame(rafRef.current)
+      reset()
+      onConfirm?.()
+    }
+  }
+
+  React.useEffect(() => () => { reset() }, [reset])
+
+  return (
+    <button
+      type="button"
+      onClick={handleClick}
+      disabled={disabled}
+      className={cx(buttonStyles({ variant }), "relative overflow-hidden", className)}
+    >
+      {pending && (
+        <span
+          className="absolute left-0 top-0 h-full bg-white/20 transition-none"
+          style={{ width: `${progress}%` }}
+        />
+      )}
+      <span className="relative">{pending ? confirmLabel : label}</span>
+    </button>
+  )
+}

package/src/components/core/context-menu.tsx

@@ -0,0 +1,139 @@
+"use client"
+
+import * as React from "react"
+import * as RadixContextMenu from "@radix-ui/react-context-menu"
+import { Check, ChevronRight, Circle } from "lucide-react"
+import { cx } from "@/lib/cx"
+
+export const ContextMenu = RadixContextMenu.Root
+export const ContextMenuTrigger = RadixContextMenu.Trigger
+export const ContextMenuGroup = RadixContextMenu.Group
+export const ContextMenuPortal = RadixContextMenu.Portal
+export const ContextMenuSub = RadixContextMenu.Sub
+export const ContextMenuRadioGroup = RadixContextMenu.RadioGroup
+
+export const ContextMenuContent = React.forwardRef<
+  React.ElementRef<typeof RadixContextMenu.Content>,
+  React.ComponentPropsWithoutRef<typeof RadixContextMenu.Content>
+>(({ className, ...props }, ref) => (
+  <RadixContextMenu.Portal>
+    <RadixContextMenu.Content
+      ref={ref}
+      className={cx(
+        "z-50 min-w-[180px] overflow-hidden rounded-xl border border-border bg-card p-1.5 shadow-lg",
+        "animate-in fade-in-0 zoom-in-95",
+        className
+      )}
+      {...props}
+    />
+  </RadixContextMenu.Portal>
+))
+ContextMenuContent.displayName = "ContextMenuContent"
+
+const itemBase = cx(
+  "relative flex cursor-default select-none items-center gap-2 rounded-lg px-2.5 py-1.5 text-sm outline-none transition-colors",
+  "text-foreground focus:bg-surface-2 data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
+)
+
+export const ContextMenuItem = React.forwardRef<
+  React.ElementRef<typeof RadixContextMenu.Item>,
+  React.ComponentPropsWithoutRef<typeof RadixContextMenu.Item> & { inset?: boolean }
+>(({ className, inset, ...props }, ref) => (
+  <RadixContextMenu.Item ref={ref} className={cx(itemBase, inset && "pl-8", className)} {...props} />
+))
+ContextMenuItem.displayName = "ContextMenuItem"
+
+export const ContextMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof RadixContextMenu.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof RadixContextMenu.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <RadixContextMenu.CheckboxItem
+    ref={ref}
+    checked={checked}
+    className={cx(itemBase, "pl-8", className)}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <RadixContextMenu.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </RadixContextMenu.ItemIndicator>
+    </span>
+    {children}
+  </RadixContextMenu.CheckboxItem>
+))
+ContextMenuCheckboxItem.displayName = "ContextMenuCheckboxItem"
+
+export const ContextMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof RadixContextMenu.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof RadixContextMenu.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <RadixContextMenu.RadioItem
+    ref={ref}
+    className={cx(itemBase, "pl-8", className)}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <RadixContextMenu.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </RadixContextMenu.ItemIndicator>
+    </span>
+    {children}
+  </RadixContextMenu.RadioItem>
+))
+ContextMenuRadioItem.displayName = "ContextMenuRadioItem"
+
+export const ContextMenuLabel = React.forwardRef<
+  React.ElementRef<typeof RadixContextMenu.Label>,
+  React.ComponentPropsWithoutRef<typeof RadixContextMenu.Label> & { inset?: boolean }
+>(({ className, inset, ...props }, ref) => (
+  <RadixContextMenu.Label
+    ref={ref}
+    className={cx("px-2.5 py-1.5 text-xs font-medium text-muted-foreground", inset && "pl-8", className)}
+    {...props}
+  />
+))
+ContextMenuLabel.displayName = "ContextMenuLabel"
+
+export const ContextMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof RadixContextMenu.Separator>,
+  React.ComponentPropsWithoutRef<typeof RadixContextMenu.Separator>
+>(({ className, ...props }, ref) => (
+  <RadixContextMenu.Separator ref={ref} className={cx("-mx-1.5 my-1.5 h-px bg-border", className)} {...props} />
+))
+ContextMenuSeparator.displayName = "ContextMenuSeparator"
+
+export const ContextMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => (
+  <span className={cx("ml-auto text-xs tracking-widest text-muted-foreground", className)} {...props} />
+)
+ContextMenuShortcut.displayName = "ContextMenuShortcut"
+
+export const ContextMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof RadixContextMenu.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof RadixContextMenu.SubTrigger> & { inset?: boolean }
+>(({ className, inset, children, ...props }, ref) => (
+  <RadixContextMenu.SubTrigger
+    ref={ref}
+    className={cx(itemBase, "data-[state=open]:bg-surface-2", inset && "pl-8", className)}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto h-4 w-4" />
+  </RadixContextMenu.SubTrigger>
+))
+ContextMenuSubTrigger.displayName = "ContextMenuSubTrigger"
+
+export const ContextMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof RadixContextMenu.SubContent>,
+  React.ComponentPropsWithoutRef<typeof RadixContextMenu.SubContent>
+>(({ className, ...props }, ref) => (
+  <RadixContextMenu.SubContent
+    ref={ref}
+    className={cx(
+      "z-50 min-w-[160px] overflow-hidden rounded-xl border border-border bg-card p-1.5 shadow-lg",
+      "animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+      className
+    )}
+    {...props}
+  />
+))
+ContextMenuSubContent.displayName = "ContextMenuSubContent"

package/src/components/core/copy-button.tsx

@@ -0,0 +1,41 @@
+"use client"
+
+import * as React from "react"
+import { Check, Copy } from "lucide-react"
+import { cx } from "@/lib/cx"
+
+interface CopyButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
+  value: string
+  className?: string
+}
+
+export function CopyButton({ value, className, ...props }: CopyButtonProps) {
+  const [hasCopied, setHasCopied] = React.useState(false)
+
+  React.useEffect(() => {
+    if (!hasCopied) return
+    const t = setTimeout(() => setHasCopied(false), 2000)
+    return () => clearTimeout(t)
+  }, [hasCopied])
+
+  return (
+    <button
+      className={cx(
+        "inline-flex h-6 w-6 items-center justify-center rounded-md text-muted-foreground hover:bg-muted hover:text-foreground",
+        className
+      )}
+      onClick={() => {
+        navigator.clipboard.writeText(value)
+        setHasCopied(true)
+      }}
+      {...props}
+    >
+      <span className="sr-only">Copy</span>
+      {hasCopied ? (
+        <Check className="h-3.5 w-3.5" />
+      ) : (
+        <Copy className="h-3.5 w-3.5" />
+      )}
+    </button>
+  )
+}