@stampui/blocks 1.1.0 → 2.0.0

package/src/components/core/data-table.tsx

@@ -1,173 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { ChevronUp, ChevronDown, ChevronsUpDown, ChevronLeft, ChevronRight } from "lucide-react"
-import { cx } from "@/lib/cx"
-
-// ── Types ─────────────────────────────────────────────────────────────────────
-
-export type SortDirection = "asc" | "desc" | null
-
-export interface Column<T> {
-  key: string
-  header: string
-  accessor: (row: T) => React.ReactNode
-  sortable?: boolean
-  className?: string
-  headerClassName?: string
-}
-
-export interface DataTableProps<T> {
-  columns: Column<T>[]
-  data: T[]
-  rowKey?: (row: T, index: number) => string
-  pageSize?: number
-  searchable?: boolean
-  searchPlaceholder?: string
-  searchFn?: (row: T, query: string) => boolean
-  className?: string
-  emptyMessage?: string
-}
-
-// ── Component ─────────────────────────────────────────────────────────────────
-
-export function DataTable<T>({
-  columns,
-  data,
-  rowKey,
-  pageSize = 10,
-  searchable = false,
-  searchPlaceholder = "Search...",
-  searchFn,
-  className,
-  emptyMessage = "No results.",
-}: DataTableProps<T>) {
-  const [sortKey, setSortKey] = React.useState<string | null>(null)
-  const [sortDir, setSortDir] = React.useState<SortDirection>(null)
-  const [query, setQuery] = React.useState("")
-  const [page, setPage] = React.useState(0)
-
-  const filtered = React.useMemo(() => {
-    if (!query || !searchable) return data
-    return data.filter((row) =>
-      searchFn
-        ? searchFn(row, query)
-        : columns.some((col) => String(col.accessor(row)).toLowerCase().includes(query.toLowerCase()))
-    )
-  }, [data, query, searchable, searchFn, columns])
-
-  const sorted = React.useMemo(() => {
-    if (!sortKey || !sortDir) return filtered
-    const col = columns.find((c) => c.key === sortKey)
-    if (!col) return filtered
-    return [...filtered].sort((a, b) => {
-      const av = String(col.accessor(a))
-      const bv = String(col.accessor(b))
-      const cmp = av.localeCompare(bv, undefined, { numeric: true })
-      return sortDir === "asc" ? cmp : -cmp
-    })
-  }, [filtered, sortKey, sortDir, columns])
-
-  const totalPages = Math.ceil(sorted.length / pageSize)
-  const paged = sorted.slice(page * pageSize, (page + 1) * pageSize)
-
-  React.useEffect(() => { setPage(0) }, [query, sortKey, sortDir])
-
-  function toggleSort(key: string) {
-    if (sortKey !== key) { setSortKey(key); setSortDir("asc") }
-    else if (sortDir === "asc") setSortDir("desc")
-    else { setSortKey(null); setSortDir(null) }
-  }
-
-  return (
-    <div className={cx("space-y-3", className)}>
-      {searchable && (
-        <input
-          value={query}
-          onChange={(e) => setQuery(e.target.value)}
-          placeholder={searchPlaceholder}
-          className="h-9 w-full max-w-xs rounded-lg border border-border bg-surface-2 px-3 text-sm outline-none placeholder:text-muted-foreground focus-visible:border-border-strong focus-visible:ring-1 focus-visible:ring-border-strong focus-visible:ring-offset-1 focus-visible:ring-offset-background"
-        />
-      )}
-      <div className="rounded-xl border border-border overflow-hidden">
-        <div className="overflow-x-auto">
-          <table className="w-full text-sm">
-            <thead>
-              <tr className="border-b border-border bg-surface-2">
-                {columns.map((col) => (
-                  <th
-                    key={col.key}
-                    className={cx(
-                      "px-4 py-3 text-left text-xs font-medium text-muted-foreground",
-                      col.sortable && "cursor-pointer select-none hover:text-foreground transition-colors",
-                      col.headerClassName
-                    )}
-                    onClick={col.sortable ? () => toggleSort(col.key) : undefined}
-                  >
-                    <div className="flex items-center gap-1">
-                      {col.header}
-                      {col.sortable && (
-                        <span className="text-muted-foreground">
-                          {sortKey === col.key && sortDir === "asc" ? (
-                            <ChevronUp className="h-3.5 w-3.5" />
-                          ) : sortKey === col.key && sortDir === "desc" ? (
-                            <ChevronDown className="h-3.5 w-3.5" />
-                          ) : (
-                            <ChevronsUpDown className="h-3.5 w-3.5 opacity-40" />
-                          )}
-                        </span>
-                      )}
-                    </div>
-                  </th>
-                ))}
-              </tr>
-            </thead>
-            <tbody>
-              {paged.length === 0 ? (
-                <tr>
-                  <td colSpan={columns.length} className="px-4 py-10 text-center text-sm text-muted-foreground">
-                    {emptyMessage}
-                  </td>
-                </tr>
-              ) : (
-                paged.map((row, i) => (
-                  <tr key={rowKey ? rowKey(row, i) : i} className="border-b border-border last:border-0 hover:bg-surface-2 transition-colors">
-                    {columns.map((col) => (
-                      <td key={col.key} className={cx("px-4 py-3", col.className)}>
-                        {col.accessor(row)}
-                      </td>
-                    ))}
-                  </tr>
-                ))
-              )}
-            </tbody>
-          </table>
-        </div>
-      </div>
-      {totalPages > 1 && (
-        <div className="flex items-center justify-between text-xs text-muted-foreground">
-          <span>{sorted.length} row{sorted.length !== 1 ? "s" : ""}</span>
-          <div className="flex items-center gap-1">
-            <button
-              onClick={() => setPage((p) => Math.max(0, p - 1))}
-              disabled={page === 0}
-              className="flex h-7 w-7 items-center justify-center rounded-md border border-border hover:bg-surface-2 disabled:opacity-40 disabled:pointer-events-none transition-colors"
-            >
-              <ChevronLeft className="h-3.5 w-3.5" />
-            </button>
-            <span className="px-2 font-medium text-foreground">
-              {page + 1} / {totalPages}
-            </span>
-            <button
-              onClick={() => setPage((p) => Math.min(totalPages - 1, p + 1))}
-              disabled={page >= totalPages - 1}
-              className="flex h-7 w-7 items-center justify-center rounded-md border border-border hover:bg-surface-2 disabled:opacity-40 disabled:pointer-events-none transition-colors"
-            >
-              <ChevronRight className="h-3.5 w-3.5" />
-            </button>
-          </div>
-        </div>
-      )}
-    </div>
-  )
-}

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

@@ -1,143 +0,0 @@
-"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/input-otp.tsx

@@ -1,108 +0,0 @@
-"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/stepper.tsx

@@ -1,111 +0,0 @@
-import * as React from "react"
-import { Check, X } from "lucide-react"
-import { cx } from "@/lib/cx"
-
-export type StepStatus = "pending" | "active" | "completed" | "error"
-export type StepperOrientation = "horizontal" | "vertical"
-
-export interface Step {
-  title: string
-  description?: string
-  icon?: React.ReactNode
-}
-
-export interface StepperProps {
-  steps: Step[]
-  currentStep: number
-  orientation?: StepperOrientation
-  className?: string
-}
-
-function StepIcon({ status, index, icon }: { status: StepStatus; index: number; icon?: React.ReactNode }) {
-  if (status === "completed") return <Check className="h-3.5 w-3.5" />
-  if (status === "error") return <X className="h-3.5 w-3.5" />
-  if (icon && status === "active") return <span className="text-xs">{icon}</span>
-  return <span className="text-xs font-medium">{index + 1}</span>
-}
-
-export function Stepper({ steps, currentStep, orientation = "horizontal", className }: StepperProps) {
-  const isHorizontal = orientation === "horizontal"
-
-  function getStatus(index: number): StepStatus {
-    if (index < currentStep) return "completed"
-    if (index === currentStep) return "active"
-    return "pending"
-  }
-
-  if (isHorizontal) {
-    return (
-      <div className={cx("flex items-start w-full", className)}>
-        {steps.map((step, i) => {
-          const status = getStatus(i)
-          const isLast = i === steps.length - 1
-          return (
-            <React.Fragment key={i}>
-              <div className="flex flex-col items-center flex-1 min-w-0">
-                <div className={cx(
-                  "flex h-8 w-8 shrink-0 items-center justify-center rounded-full border-2 transition-colors",
-                  status === "completed" && "border-foreground bg-foreground text-background",
-                  status === "active" && "border-foreground bg-transparent text-foreground",
-                  status === "pending" && "border-border bg-transparent text-muted-foreground",
-                  status === "error" && "border-danger bg-danger/10 text-danger",
-                )}>
-                  <StepIcon status={status} index={i} icon={step.icon} />
-                </div>
-                <div className="mt-2 text-center px-1">
-                  <p className={cx("text-xs font-medium leading-tight", status === "pending" ? "text-muted-foreground" : "text-foreground")}>
-                    {step.title}
-                  </p>
-                  {step.description && (
-                    <p className="text-xs text-muted-foreground mt-0.5 leading-snug">{step.description}</p>
-                  )}
-                </div>
-              </div>
-              {!isLast && (
-                <div className={cx(
-                  "h-0.5 flex-1 mt-4 mx-2 rounded-full transition-colors",
-                  i < currentStep ? "bg-foreground" : "bg-border"
-                )} />
-              )}
-            </React.Fragment>
-          )
-        })}
-      </div>
-    )
-  }
-
-  return (
-    <div className={cx("flex flex-col", className)}>
-      {steps.map((step, i) => {
-        const status = getStatus(i)
-        const isLast = i === steps.length - 1
-        return (
-          <div key={i} className="flex gap-4">
-            <div className="flex flex-col items-center">
-              <div className={cx(
-                "flex h-8 w-8 shrink-0 items-center justify-center rounded-full border-2 transition-colors",
-                status === "completed" && "border-foreground bg-foreground text-background",
-                status === "active" && "border-foreground bg-transparent text-foreground",
-                status === "pending" && "border-border bg-transparent text-muted-foreground",
-                status === "error" && "border-danger bg-danger/10 text-danger",
-              )}>
-                <StepIcon status={status} index={i} icon={step.icon} />
-              </div>
-              {!isLast && (
-                <div className={cx("w-0.5 flex-1 my-1 rounded-full transition-colors min-h-[24px]", i < currentStep ? "bg-foreground" : "bg-border")} />
-              )}
-            </div>
-            <div className={cx("pb-6 min-w-0", isLast && "pb-0")}>
-              <p className={cx("text-sm font-medium leading-tight mt-1.5", status === "pending" ? "text-muted-foreground" : "text-foreground")}>
-                {step.title}
-              </p>
-              {step.description && (
-                <p className="text-xs text-muted-foreground mt-0.5 leading-relaxed">{step.description}</p>
-              )}
-            </div>
-          </div>
-        )
-      })}
-    </div>
-  )
-}

package/src/components/core/timeline.tsx

@@ -1,81 +0,0 @@
-import * as React from "react"
-import { cx } from "@/lib/cx"
-
-// ── Types ─────────────────────────────────────────────────────────────────────
-
-export interface TimelineItem {
-  title: string
-  description?: string
-  date?: string
-  icon?: React.ReactNode
-  dot?: "default" | "filled" | "outline" | "ring"
-  children?: React.ReactNode
-}
-
-export interface TimelineProps {
-  items: TimelineItem[]
-  className?: string
-}
-
-// ── Timeline ──────────────────────────────────────────────────────────────────
-
-export function Timeline({ items, className }: TimelineProps) {
-  return (
-    <div className={cx("relative", className)}>
-      {items.map((item, i) => {
-        const isLast = i === items.length - 1
-        return (
-          <div key={i} className="flex gap-4">
-            {/* Left column: dot + connector */}
-            <div className="flex flex-col items-center">
-              <TimelineDot dot={item.dot} icon={item.icon} />
-              {!isLast && <div className="w-px flex-1 bg-border my-1" />}
-            </div>
-            {/* Content */}
-            <div className={cx("pb-7 min-w-0 flex-1", isLast && "pb-0")}>
-              <div className="flex items-baseline justify-between gap-3 mb-0.5">
-                <p className="text-sm font-medium text-foreground leading-snug">{item.title}</p>
-                {item.date && <span className="shrink-0 text-xs text-muted-foreground">{item.date}</span>}
-              </div>
-              {item.description && (
-                <p className="text-sm text-muted-foreground leading-relaxed">{item.description}</p>
-              )}
-              {item.children && <div className="mt-2">{item.children}</div>}
-            </div>
-          </div>
-        )
-      })}
-    </div>
-  )
-}
-
-// ── Dot ───────────────────────────────────────────────────────────────────────
-
-function TimelineDot({ dot = "default", icon }: { dot?: TimelineItem["dot"]; icon?: React.ReactNode }) {
-  if (icon) {
-    return (
-      <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full border border-border bg-surface-2 text-muted-foreground">
-        {icon}
-      </div>
-    )
-  }
-  return (
-    <div className={cx(
-      "mt-1.5 h-3 w-3 shrink-0 rounded-full transition-colors",
-      dot === "default" && "bg-border-strong",
-      dot === "filled" && "bg-foreground",
-      dot === "outline" && "border-2 border-foreground bg-transparent",
-      dot === "ring" && "border-2 border-foreground bg-card ring-4 ring-surface-2",
-    )} />
-  )
-}
-
-// ── Sub-exports for composing custom content ──────────────────────────────────
-
-export function TimelineCard({ children, className }: { children: React.ReactNode; className?: string }) {
-  return (
-    <div className={cx("rounded-xl border border-border bg-surface-2 px-4 py-3 text-sm", className)}>
-      {children}
-    </div>
-  )
-}