@stampui/blocks 1.0.0

package/src/components/core/file-upload.tsx

@@ -0,0 +1,143 @@
+"use client"
+
+import * as React from "react"
+import { Upload, X, FileText, Image, Film, Music } from "lucide-react"
+import { cx } from "@/lib/cx"
+
+export interface FileUploadFile {
+  file: File
+  id: string
+  preview?: string
+}
+
+export interface FileUploadProps {
+  accept?: string
+  multiple?: boolean
+  maxSize?: number
+  disabled?: boolean
+  files?: FileUploadFile[]
+  onFilesChange?: (files: FileUploadFile[]) => void
+  className?: string
+  label?: string
+  hint?: string
+}
+
+function getFileIcon(type: string) {
+  if (type.startsWith("image/")) return <Image className="h-4 w-4" />
+  if (type.startsWith("video/")) return <Film className="h-4 w-4" />
+  if (type.startsWith("audio/")) return <Music className="h-4 w-4" />
+  return <FileText className="h-4 w-4" />
+}
+
+function formatBytes(bytes: number) {
+  if (bytes < 1024) return `${bytes} B`
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
+  return `${(bytes / 1024 / 1024).toFixed(1)} MB`
+}
+
+export function FileUpload({
+  accept,
+  multiple = false,
+  maxSize,
+  disabled,
+  files = [],
+  onFilesChange,
+  className,
+  label = "Click to upload or drag and drop",
+  hint,
+}: FileUploadProps) {
+  const inputRef = React.useRef<HTMLInputElement>(null)
+  const [dragging, setDragging] = React.useState(false)
+
+  function addFiles(incoming: FileList | File[]) {
+    const arr = Array.from(incoming)
+    const valid = arr.filter((f) => !maxSize || f.size <= maxSize)
+    const newFiles: FileUploadFile[] = valid.map((f) => ({
+      file: f,
+      id: `${f.name}-${f.size}-${Date.now()}`,
+      preview: f.type.startsWith("image/") ? URL.createObjectURL(f) : undefined,
+    }))
+    onFilesChange?.(multiple ? [...files, ...newFiles] : newFiles)
+  }
+
+  function remove(id: string) {
+    onFilesChange?.(files.filter((f) => f.id !== id))
+  }
+
+  function onDragOver(e: React.DragEvent) {
+    e.preventDefault()
+    if (!disabled) setDragging(true)
+  }
+
+  function onDrop(e: React.DragEvent) {
+    e.preventDefault()
+    setDragging(false)
+    if (!disabled && e.dataTransfer.files.length) addFiles(e.dataTransfer.files)
+  }
+
+  return (
+    <div className={cx("space-y-3", className)}>
+      <div
+        onClick={() => !disabled && inputRef.current?.click()}
+        onDragOver={onDragOver}
+        onDragLeave={() => setDragging(false)}
+        onDrop={onDrop}
+        className={cx(
+          "relative flex cursor-pointer flex-col items-center justify-center gap-2 rounded-xl border-2 border-dashed px-6 py-8 text-center transition-colors",
+          dragging
+            ? "border-ring bg-surface-2"
+            : "border-border hover:border-border-strong hover:bg-surface-2",
+          disabled && "cursor-not-allowed opacity-50"
+        )}
+      >
+        <div className="flex h-10 w-10 items-center justify-center rounded-xl border border-border bg-surface">
+          <Upload className="h-5 w-5 text-muted-foreground" />
+        </div>
+        <div className="space-y-1">
+          <p className="text-sm font-medium text-foreground">{label}</p>
+          {hint && <p className="text-xs text-muted-foreground">{hint}</p>}
+          {maxSize && (
+            <p className="text-xs text-muted-foreground">Max {formatBytes(maxSize)}</p>
+          )}
+        </div>
+        <input
+          ref={inputRef}
+          type="file"
+          accept={accept}
+          multiple={multiple}
+          disabled={disabled}
+          className="sr-only"
+          onChange={(e) => e.target.files && addFiles(e.target.files)}
+        />
+      </div>
+
+      {files.length > 0 && (
+        <ul className="space-y-2">
+          {files.map(({ file, id, preview }) => (
+            <li key={id} className="flex items-center gap-3 rounded-lg border border-border bg-surface-2 px-3 py-2.5">
+              {preview ? (
+                // eslint-disable-next-line @next/next/no-img-element
+                <img src={preview} alt={file.name} className="h-8 w-8 rounded-md object-cover shrink-0 border border-border" />
+              ) : (
+                <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-md border border-border bg-surface text-muted-foreground">
+                  {getFileIcon(file.type)}
+                </div>
+              )}
+              <div className="min-w-0 flex-1">
+                <p className="truncate text-sm font-medium text-foreground">{file.name}</p>
+                <p className="text-xs text-muted-foreground">{formatBytes(file.size)}</p>
+              </div>
+              <button
+                type="button"
+                onClick={() => remove(id)}
+                className="shrink-0 rounded-md p-1 text-muted-foreground hover:bg-surface-3 hover:text-foreground transition-colors"
+              >
+                <X className="h-3.5 w-3.5" />
+              </button>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  )
+}

package/src/components/core/hover-card.tsx

@@ -0,0 +1,31 @@
+"use client"
+
+import * as React from "react"
+import * as RadixHoverCard from "@radix-ui/react-hover-card"
+import { cx } from "@/lib/cx"
+
+export const HoverCard = RadixHoverCard.Root
+export const HoverCardTrigger = RadixHoverCard.Trigger
+
+export const HoverCardContent = React.forwardRef<
+  React.ElementRef<typeof RadixHoverCard.Content>,
+  React.ComponentPropsWithoutRef<typeof RadixHoverCard.Content>
+>(({ className, align = "center", sideOffset = 8, ...props }, ref) => (
+  <RadixHoverCard.Portal>
+    <RadixHoverCard.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cx(
+        "z-50 w-72 rounded-xl border border-border bg-card p-4 shadow-lg outline-none",
+        "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",
+        "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2",
+        "data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </RadixHoverCard.Portal>
+))
+HoverCardContent.displayName = "HoverCardContent"

package/src/components/core/inline-edit.tsx

@@ -0,0 +1,104 @@
+"use client"
+
+import * as React from "react"
+import { Check, X, Pencil } from "lucide-react"
+import { cx } from "@/lib/cx"
+
+export interface InlineEditProps {
+  value: string
+  onSave?: (value: string) => void
+  placeholder?: string
+  className?: string
+  inputClassName?: string
+  as?: "p" | "h1" | "h2" | "h3" | "span"
+}
+
+export function InlineEdit({
+  value: initialValue,
+  onSave,
+  placeholder = "Click to edit…",
+  className,
+  inputClassName,
+  as: Tag = "p",
+}: InlineEditProps) {
+  const [editing, setEditing] = React.useState(false)
+  const [draft, setDraft] = React.useState(initialValue)
+  const [value, setValue] = React.useState(initialValue)
+  const inputRef = React.useRef<HTMLInputElement>(null)
+
+  const startEdit = () => {
+    setDraft(value)
+    setEditing(true)
+    setTimeout(() => inputRef.current?.select(), 0)
+  }
+
+  const save = () => {
+    const trimmed = draft.trim()
+    if (trimmed) {
+      setValue(trimmed)
+      onSave?.(trimmed)
+    }
+    setEditing(false)
+  }
+
+  const cancel = () => {
+    setDraft(value)
+    setEditing(false)
+  }
+
+  const onKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter") save()
+    if (e.key === "Escape") cancel()
+  }
+
+  if (editing) {
+    return (
+      <div className="flex items-center gap-1.5">
+        <input
+          ref={inputRef}
+          value={draft}
+          onChange={(e) => setDraft(e.target.value)}
+          onKeyDown={onKeyDown}
+          onBlur={save}
+          className={cx(
+            "flex-1 rounded-md border border-border-strong bg-surface-2 px-2 py-1 text-sm text-foreground outline-none focus:border-border-strong",
+            inputClassName
+          )}
+          autoFocus
+        />
+        <button
+          type="button"
+          onMouseDown={(e) => { e.preventDefault(); save() }}
+          className="inline-flex h-6 w-6 items-center justify-center rounded-md text-muted-foreground hover:text-foreground hover:bg-surface-2 transition-colors"
+          aria-label="Save"
+        >
+          <Check className="h-3.5 w-3.5" />
+        </button>
+        <button
+          type="button"
+          onMouseDown={(e) => { e.preventDefault(); cancel() }}
+          className="inline-flex h-6 w-6 items-center justify-center rounded-md text-muted-foreground hover:text-foreground hover:bg-surface-2 transition-colors"
+          aria-label="Cancel"
+        >
+          <X className="h-3.5 w-3.5" />
+        </button>
+      </div>
+    )
+  }
+
+  return (
+    <div
+      className={cx("group flex items-center gap-1.5 cursor-pointer", className)}
+      onClick={startEdit}
+      role="button"
+      tabIndex={0}
+      onKeyDown={(e) => e.key === "Enter" && startEdit()}
+      aria-label="Click to edit"
+    >
+      <Tag className={cx(!value && "text-muted-foreground/50 italic")}>
+        {value || placeholder}
+      </Tag>
+      <Pencil className="h-3 w-3 text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity shrink-0" />
+    </div>
+  )
+}

package/src/components/core/input-group.tsx

@@ -0,0 +1,47 @@
+import * as React from "react"
+import { cx } from "@/lib/cx"
+
+interface InputGroupProps {
+  left?: React.ReactNode
+  right?: React.ReactNode
+  children: React.ReactNode
+  className?: string
+}
+
+export function InputGroup({ left, right, children, className }: InputGroupProps) {
+  return (
+    <div
+      className={cx(
+        "flex items-center w-full rounded-lg border border-border bg-input",
+        "focus-within:border-border-strong focus-within:bg-surface-3",
+        "transition-all",
+        className,
+      )}
+    >
+      {left && (
+        <div className="flex shrink-0 items-center border-r border-border px-3 py-2 text-sm text-muted-foreground select-none">
+          {left}
+        </div>
+      )}
+      <div className="flex-1 min-w-0 [&>input]:border-0 [&>input]:bg-transparent [&>input]:focus:bg-transparent [&>input]:focus:border-0 [&>input]:rounded-none [&>input]:shadow-none">
+        {children}
+      </div>
+      {right && (
+        <div className="flex shrink-0 items-center border-l border-border px-3 py-2 text-sm text-muted-foreground select-none">
+          {right}
+        </div>
+      )}
+    </div>
+  )
+}
+
+interface InputAddonProps extends React.HTMLAttributes<HTMLSpanElement> {}
+
+export function InputAddon({ className, ...props }: InputAddonProps) {
+  return (
+    <span
+      className={cx("text-sm text-muted-foreground font-mono", className)}
+      {...props}
+    />
+  )
+}

package/src/components/core/input-otp.tsx

@@ -0,0 +1,108 @@
+"use client"
+
+import * as React from "react"
+import { cx } from "@/lib/cx"
+
+export interface InputOTPProps {
+  length?: number
+  value?: string
+  onChange?: (value: string) => void
+  disabled?: boolean
+  className?: string
+  inputClassName?: string
+  type?: "text" | "password" | "number"
+  pattern?: "numeric" | "alphanumeric" | "any"
+}
+
+export function InputOTP({
+  length = 6,
+  value = "",
+  onChange,
+  disabled,
+  className,
+  inputClassName,
+  pattern = "numeric",
+}: InputOTPProps) {
+  const inputs = React.useRef<(HTMLInputElement | null)[]>([])
+
+  const chars = Array.from({ length }, (_, i) => value[i] ?? "")
+
+  function isAllowed(char: string) {
+    if (pattern === "numeric") return /^\d$/.test(char)
+    if (pattern === "alphanumeric") return /^[a-zA-Z0-9]$/.test(char)
+    return char.length === 1
+  }
+
+  function handleKeyDown(i: number, e: React.KeyboardEvent<HTMLInputElement>) {
+    if (e.key === "Backspace") {
+      e.preventDefault()
+      if (chars[i]) {
+        const next = [...chars]
+        next[i] = ""
+        onChange?.(next.join(""))
+      } else if (i > 0) {
+        inputs.current[i - 1]?.focus()
+        const next = [...chars]
+        next[i - 1] = ""
+        onChange?.(next.join(""))
+      }
+    } else if (e.key === "ArrowLeft" && i > 0) {
+      e.preventDefault()
+      inputs.current[i - 1]?.focus()
+    } else if (e.key === "ArrowRight" && i < length - 1) {
+      e.preventDefault()
+      inputs.current[i + 1]?.focus()
+    }
+  }
+
+  function handleInput(i: number, e: React.FormEvent<HTMLInputElement>) {
+    const val = e.currentTarget.value.slice(-1)
+    if (!val) return
+    if (!isAllowed(val)) return
+    const next = [...chars]
+    next[i] = val
+    onChange?.(next.join(""))
+    if (i < length - 1) inputs.current[i + 1]?.focus()
+  }
+
+  function handlePaste(e: React.ClipboardEvent) {
+    e.preventDefault()
+    const pasted = e.clipboardData.getData("text").slice(0, length)
+    const allowed = [...pasted].filter(isAllowed)
+    const next = Array.from({ length }, (_, i) => allowed[i] ?? "")
+    onChange?.(next.join(""))
+    const lastFilled = Math.min(allowed.length, length - 1)
+    inputs.current[lastFilled]?.focus()
+  }
+
+  return (
+    <div className={cx("flex items-center gap-2", className)} onPaste={handlePaste}>
+      {chars.map((char, i) => (
+        <React.Fragment key={i}>
+          {i === length / 2 && length % 2 === 0 && length > 4 && (
+            <span className="text-muted-foreground">–</span>
+          )}
+          <input
+            ref={(el) => { inputs.current[i] = el }}
+            type="text"
+            inputMode={pattern === "numeric" ? "numeric" : "text"}
+            maxLength={1}
+            value={char}
+            disabled={disabled}
+            onKeyDown={(e) => handleKeyDown(i, e)}
+            onInput={(e) => handleInput(i, e)}
+            onChange={() => {}}
+            className={cx(
+              "h-10 w-10 rounded-lg border border-border bg-surface-2 text-center text-sm font-medium outline-none transition-colors caret-transparent",
+              "hover:border-border-strong",
+              "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",
+              char && "border-border-strong",
+              inputClassName
+            )}
+          />
+        </React.Fragment>
+      ))}
+    </div>
+  )
+}

package/src/components/core/input.tsx

@@ -0,0 +1,37 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cx } from "@/lib/cx"
+
+const inputStyles = cva(
+  "flex w-full rounded-lg text-sm transition-all outline-none focus:outline-none disabled:cursor-not-allowed disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        surface: "bg-input border border-border px-3 py-2 text-foreground placeholder:text-muted-foreground focus:border-border-strong focus:bg-surface-3",
+        command: "bg-transparent border-0 px-4 py-3 text-foreground placeholder:text-muted-foreground/60 shadow-none focus:outline-none rounded-none",
+        minimal: "bg-transparent border-b border-border px-0 py-2 text-foreground placeholder:text-muted-foreground/50 rounded-none focus:outline-none focus:border-border-strong",
+      },
+    },
+    defaultVariants: {
+      variant: "surface",
+    },
+  }
+)
+
+export interface InputProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>,
+    VariantProps<typeof inputStyles> {}
+
+export const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, variant, type = "text", ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cx(inputStyles({ variant }), className)}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Input.displayName = "Input"

package/src/components/core/kbd.tsx

@@ -0,0 +1,47 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cx } from "@/lib/cx"
+
+const kbdStyles = cva(
+  [
+    "inline-flex items-center justify-center",
+    "font-mono font-medium select-none",
+    "rounded border border-border bg-surface-2",
+    "text-muted-foreground",
+    "shadow-[0_1px_0_1px_theme(colors.border)]",
+  ],
+  {
+    variants: {
+      size: {
+        sm: "h-5 min-w-5 px-1 text-[10px]",
+        md: "h-6 min-w-6 px-1.5 text-xs",
+        lg: "h-7 min-w-7 px-2 text-sm",
+      },
+    },
+    defaultVariants: { size: "md" },
+  }
+)
+
+export interface KbdProps
+  extends React.HTMLAttributes<HTMLElement>,
+    VariantProps<typeof kbdStyles> {}
+
+export function Kbd({ className, size, ...props }: KbdProps) {
+  return <kbd className={cx(kbdStyles({ size }), className)} {...props} />
+}
+
+interface KeyComboProps {
+  keys: string[]
+  size?: VariantProps<typeof kbdStyles>["size"]
+  className?: string
+}
+
+export function KeyCombo({ keys, size, className }: KeyComboProps) {
+  return (
+    <span className={cx("inline-flex items-center gap-1", className)}>
+      {keys.map((key, i) => (
+        <Kbd key={i} size={size}>{key}</Kbd>
+      ))}
+    </span>
+  )
+}

package/src/components/core/label.tsx

@@ -0,0 +1,28 @@
+import * as React from "react"
+import { cx } from "@/lib/cx"
+
+export interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
+  required?: boolean
+}
+
+export const Label = React.forwardRef<HTMLLabelElement, LabelProps>(
+  ({ className, required, children, ...props }, ref) => {
+    return (
+      <label
+        ref={ref}
+        className={cx(
+          "text-sm font-medium leading-none text-foreground",
+          "peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        {required && (
+          <span className="ml-1 text-red-400 select-none" aria-hidden="true">*</span>
+        )}
+      </label>
+    )
+  },
+)
+Label.displayName = "Label"

package/src/components/core/marquee.tsx

@@ -0,0 +1,61 @@
+import * as React from "react"
+import { cx } from "@/lib/cx"
+
+export interface MarqueeProps {
+  children: React.ReactNode
+  speed?: number
+  gap?: number
+  direction?: "left" | "right"
+  pauseOnHover?: boolean
+  className?: string
+}
+
+export function Marquee({
+  children,
+  speed = 40,
+  gap = 16,
+  direction = "left",
+  pauseOnHover = true,
+  className,
+}: MarqueeProps) {
+  const duration = `${speed}s`
+  const animation = direction === "left" ? "marquee-left" : "marquee-right"
+
+  return (
+    <div
+      className={cx("overflow-hidden [--marquee-gap:var(--gap)] flex w-full", className)}
+      style={{ "--gap": `${gap}px` } as React.CSSProperties}
+    >
+      <style>{`
+        @keyframes marquee-left {
+          from { transform: translateX(0); }
+          to { transform: translateX(calc(-50% - var(--gap) / 2)); }
+        }
+        @keyframes marquee-right {
+          from { transform: translateX(calc(-50% - var(--gap) / 2)); }
+          to { transform: translateX(0); }
+        }
+      `}</style>
+      <div
+        className={cx(
+          "flex min-w-full shrink-0 items-center",
+          pauseOnHover && "hover:[animation-play-state:paused]"
+        )}
+        style={{
+          gap: `${gap}px`,
+          animationName: animation,
+          animationDuration: duration,
+          animationTimingFunction: "linear",
+          animationIterationCount: "infinite",
+        }}
+      >
+        <div className="flex shrink-0 items-center" style={{ gap: `${gap}px` }}>
+          {children}
+        </div>
+        <div className="flex shrink-0 items-center" style={{ gap: `${gap}px` }} aria-hidden>
+          {children}
+        </div>
+      </div>
+    </div>
+  )
+}