@stampui/blocks 1.0.0

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

@@ -0,0 +1,173 @@
+"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/date-picker.tsx

@@ -0,0 +1,73 @@
+"use client"
+
+import * as React from "react"
+import * as RadixPopover from "@radix-ui/react-popover"
+import { CalendarDays } from "lucide-react"
+import { cx } from "@/lib/cx"
+import { Calendar, type CalendarProps } from "@/components/core/calendar"
+
+function formatDate(date: Date): string {
+  return date.toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" })
+}
+
+export interface DatePickerProps extends Omit<CalendarProps, "className" | "disabled"> {
+  placeholder?: string
+  disabled?: CalendarProps["disabled"] | boolean
+  className?: string
+}
+
+export function DatePicker({
+  selected,
+  onSelect,
+  placeholder = "Pick a date...",
+  disabled,
+  fromDate,
+  toDate,
+  className,
+}: DatePickerProps) {
+  const [open, setOpen] = React.useState(false)
+  const isDisabledTrigger = typeof disabled === "boolean" ? disabled : false
+  const disabledFn = typeof disabled === "function" ? disabled : undefined
+
+  function handleSelect(date: Date) {
+    onSelect?.(date)
+    setOpen(false)
+  }
+
+  return (
+    <RadixPopover.Root open={open} onOpenChange={setOpen}>
+      <RadixPopover.Trigger asChild>
+        <button
+          type="button"
+          disabled={isDisabledTrigger}
+          className={cx(
+            "flex h-9 w-full items-center justify-start 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
+          )}
+        >
+          <CalendarDays className="h-4 w-4 shrink-0 text-muted-foreground" />
+          <span>{selected ? formatDate(selected) : placeholder}</span>
+        </button>
+      </RadixPopover.Trigger>
+      <RadixPopover.Portal>
+        <RadixPopover.Content
+          align="start"
+          sideOffset={4}
+          className="z-50 w-72 rounded-xl border border-border bg-card shadow-lg outline-none animate-in fade-in-0 zoom-in-95"
+        >
+          <Calendar
+            selected={selected}
+            onSelect={handleSelect}
+            disabled={disabledFn}
+            fromDate={fromDate}
+            toDate={toDate}
+          />
+        </RadixPopover.Content>
+      </RadixPopover.Portal>
+    </RadixPopover.Root>
+  )
+}

package/src/components/core/dialog.tsx

@@ -0,0 +1,83 @@
+"use client"
+
+import * as React from "react"
+import * as RadixDialog from "@radix-ui/react-dialog"
+import { X } from "lucide-react"
+import { cx } from "@/lib/cx"
+
+export const Dialog = RadixDialog.Root
+export const DialogTrigger = RadixDialog.Trigger
+export const DialogPortal = RadixDialog.Portal
+export const DialogClose = RadixDialog.Close
+
+export const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof RadixDialog.Overlay>,
+  React.ComponentPropsWithoutRef<typeof RadixDialog.Overlay>
+>(({ className, ...props }, ref) => (
+  <RadixDialog.Overlay
+    ref={ref}
+    className={cx(
+      "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",
+      className
+    )}
+    {...props}
+  />
+))
+DialogOverlay.displayName = "DialogOverlay"
+
+export const DialogContent = React.forwardRef<
+  React.ElementRef<typeof RadixDialog.Content>,
+  React.ComponentPropsWithoutRef<typeof RadixDialog.Content> & { hideClose?: boolean }
+>(({ className, children, hideClose, ...props }, ref) => (
+  <RadixDialog.Portal>
+    <DialogOverlay />
+    <RadixDialog.Content
+      ref={ref}
+      className={cx(
+        "fixed left-1/2 top-1/2 z-50 w-full max-w-lg -translate-x-1/2 -translate-y-1/2",
+        "rounded-2xl border border-border bg-card p-6 shadow-xl outline-none",
+        "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
+        "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%]",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      {!hideClose && (
+        <RadixDialog.Close className="absolute right-4 top-4 rounded-md p-1 text-muted-foreground transition-colors hover:bg-surface-2 hover:text-foreground outline-none focus-visible:ring-1 focus-visible:ring-border-strong focus-visible:ring-offset-1 focus-visible:ring-offset-background">
+          <X className="h-4 w-4" />
+          <span className="sr-only">Close</span>
+        </RadixDialog.Close>
+      )}
+    </RadixDialog.Content>
+  </RadixDialog.Portal>
+))
+DialogContent.displayName = "DialogContent"
+
+export const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cx("flex flex-col gap-1.5 mb-4", className)} {...props} />
+)
+DialogHeader.displayName = "DialogHeader"
+
+export const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cx("flex items-center justify-end gap-2 mt-6", className)} {...props} />
+)
+DialogFooter.displayName = "DialogFooter"
+
+export const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof RadixDialog.Title>,
+  React.ComponentPropsWithoutRef<typeof RadixDialog.Title>
+>(({ className, ...props }, ref) => (
+  <RadixDialog.Title ref={ref} className={cx("text-base font-semibold leading-tight text-foreground", className)} {...props} />
+))
+DialogTitle.displayName = "DialogTitle"
+
+export const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof RadixDialog.Description>,
+  React.ComponentPropsWithoutRef<typeof RadixDialog.Description>
+>(({ className, ...props }, ref) => (
+  <RadixDialog.Description ref={ref} className={cx("text-sm text-muted-foreground leading-relaxed", className)} {...props} />
+))
+DialogDescription.displayName = "DialogDescription"

package/src/components/core/drawer.tsx

@@ -0,0 +1,87 @@
+"use client"
+
+import * as React from "react"
+import * as RadixDialog from "@radix-ui/react-dialog"
+import { X } from "lucide-react"
+import { cx } from "@/lib/cx"
+
+export const Drawer = RadixDialog.Root
+export const DrawerTrigger = RadixDialog.Trigger
+export const DrawerClose = RadixDialog.Close
+export const DrawerPortal = RadixDialog.Portal
+
+export const DrawerOverlay = React.forwardRef<
+  React.ElementRef<typeof RadixDialog.Overlay>,
+  React.ComponentPropsWithoutRef<typeof RadixDialog.Overlay>
+>(({ className, ...props }, ref) => (
+  <RadixDialog.Overlay
+    ref={ref}
+    className={cx(
+      "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",
+      className
+    )}
+    {...props}
+  />
+))
+DrawerOverlay.displayName = "DrawerOverlay"
+
+export const DrawerContent = React.forwardRef<
+  React.ElementRef<typeof RadixDialog.Content>,
+  React.ComponentPropsWithoutRef<typeof RadixDialog.Content>
+>(({ className, children, ...props }, ref) => (
+  <RadixDialog.Portal>
+    <DrawerOverlay />
+    <RadixDialog.Content
+      ref={ref}
+      className={cx(
+        "fixed inset-x-0 bottom-0 z-50 flex flex-col rounded-t-2xl border-t border-border bg-card pb-safe shadow-xl outline-none",
+        "max-h-[85svh]",
+        "data-[state=open]:animate-in data-[state=open]:slide-in-from-bottom data-[state=open]:duration-300",
+        "data-[state=closed]:animate-out data-[state=closed]:slide-out-to-bottom data-[state=closed]:duration-300",
+        className
+      )}
+      {...props}
+    >
+      <div className="mx-auto mt-3 mb-2 h-1.5 w-10 shrink-0 rounded-full bg-border" />
+      {children}
+      <RadixDialog.Close className="absolute right-4 top-4 rounded-md p-1 text-muted-foreground transition-colors hover:bg-surface-2 hover:text-foreground outline-none focus-visible:ring-1 focus-visible:ring-border-strong focus-visible:ring-offset-1 focus-visible:ring-offset-background">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </RadixDialog.Close>
+    </RadixDialog.Content>
+  </RadixDialog.Portal>
+))
+DrawerContent.displayName = "DrawerContent"
+
+export const DrawerHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cx("flex flex-col gap-1.5 px-6 pb-3", className)} {...props} />
+)
+DrawerHeader.displayName = "DrawerHeader"
+
+export const DrawerFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cx("flex flex-col gap-2 px-6 pt-0 pb-6 mt-auto", className)} {...props} />
+)
+DrawerFooter.displayName = "DrawerFooter"
+
+export const DrawerTitle = React.forwardRef<
+  React.ElementRef<typeof RadixDialog.Title>,
+  React.ComponentPropsWithoutRef<typeof RadixDialog.Title>
+>(({ className, ...props }, ref) => (
+  <RadixDialog.Title ref={ref} className={cx("text-base font-semibold leading-tight text-foreground", className)} {...props} />
+))
+DrawerTitle.displayName = "DrawerTitle"
+
+export const DrawerDescription = React.forwardRef<
+  React.ElementRef<typeof RadixDialog.Description>,
+  React.ComponentPropsWithoutRef<typeof RadixDialog.Description>
+>(({ className, ...props }, ref) => (
+  <RadixDialog.Description ref={ref} className={cx("text-sm text-muted-foreground leading-relaxed", className)} {...props} />
+))
+DrawerDescription.displayName = "DrawerDescription"
+
+export const DrawerBody = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cx("flex-1 overflow-y-auto px-6 py-2", className)} {...props} />
+)
+DrawerBody.displayName = "DrawerBody"

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

@@ -0,0 +1,147 @@
+"use client"
+
+import * as React from "react"
+import * as RadixDropdown from "@radix-ui/react-dropdown-menu"
+import { Check, ChevronRight, Circle } from "lucide-react"
+import { cx } from "@/lib/cx"
+
+export const DropdownMenu = RadixDropdown.Root
+export const DropdownMenuTrigger = RadixDropdown.Trigger
+export const DropdownMenuGroup = RadixDropdown.Group
+export const DropdownMenuPortal = RadixDropdown.Portal
+export const DropdownMenuSub = RadixDropdown.Sub
+export const DropdownMenuRadioGroup = RadixDropdown.RadioGroup
+
+export const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof RadixDropdown.Content>,
+  React.ComponentPropsWithoutRef<typeof RadixDropdown.Content>
+>(({ className, sideOffset = 6, ...props }, ref) => (
+  <RadixDropdown.Portal>
+    <RadixDropdown.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      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",
+        "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}
+    />
+  </RadixDropdown.Portal>
+))
+DropdownMenuContent.displayName = "DropdownMenuContent"
+
+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 DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof RadixDropdown.Item>,
+  React.ComponentPropsWithoutRef<typeof RadixDropdown.Item> & { inset?: boolean }
+>(({ className, inset, ...props }, ref) => (
+  <RadixDropdown.Item
+    ref={ref}
+    className={cx(itemBase, inset && "pl-8", className)}
+    {...props}
+  />
+))
+DropdownMenuItem.displayName = "DropdownMenuItem"
+
+export const DropdownMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof RadixDropdown.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof RadixDropdown.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <RadixDropdown.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">
+      <RadixDropdown.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </RadixDropdown.ItemIndicator>
+    </span>
+    {children}
+  </RadixDropdown.CheckboxItem>
+))
+DropdownMenuCheckboxItem.displayName = "DropdownMenuCheckboxItem"
+
+export const DropdownMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof RadixDropdown.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof RadixDropdown.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <RadixDropdown.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">
+      <RadixDropdown.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </RadixDropdown.ItemIndicator>
+    </span>
+    {children}
+  </RadixDropdown.RadioItem>
+))
+DropdownMenuRadioItem.displayName = "DropdownMenuRadioItem"
+
+export const DropdownMenuLabel = React.forwardRef<
+  React.ElementRef<typeof RadixDropdown.Label>,
+  React.ComponentPropsWithoutRef<typeof RadixDropdown.Label> & { inset?: boolean }
+>(({ className, inset, ...props }, ref) => (
+  <RadixDropdown.Label
+    ref={ref}
+    className={cx("px-2.5 py-1.5 text-xs font-medium text-muted-foreground", inset && "pl-8", className)}
+    {...props}
+  />
+))
+DropdownMenuLabel.displayName = "DropdownMenuLabel"
+
+export const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof RadixDropdown.Separator>,
+  React.ComponentPropsWithoutRef<typeof RadixDropdown.Separator>
+>(({ className, ...props }, ref) => (
+  <RadixDropdown.Separator ref={ref} className={cx("-mx-1.5 my-1.5 h-px bg-border", className)} {...props} />
+))
+DropdownMenuSeparator.displayName = "DropdownMenuSeparator"
+
+export const DropdownMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => (
+  <span className={cx("ml-auto text-xs tracking-widest text-muted-foreground", className)} {...props} />
+)
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
+
+export const DropdownMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof RadixDropdown.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof RadixDropdown.SubTrigger> & { inset?: boolean }
+>(({ className, inset, children, ...props }, ref) => (
+  <RadixDropdown.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" />
+  </RadixDropdown.SubTrigger>
+))
+DropdownMenuSubTrigger.displayName = "DropdownMenuSubTrigger"
+
+export const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof RadixDropdown.SubContent>,
+  React.ComponentPropsWithoutRef<typeof RadixDropdown.SubContent>
+>(({ className, ...props }, ref) => (
+  <RadixDropdown.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}
+  />
+))
+DropdownMenuSubContent.displayName = "DropdownMenuSubContent"

package/src/components/core/empty.tsx

@@ -0,0 +1,34 @@
+import * as React from "react"
+import { cx } from "@/lib/cx"
+
+export interface EmptyProps extends React.HTMLAttributes<HTMLDivElement> {
+  icon?: React.ReactNode
+  title: string
+  description?: string
+  action?: React.ReactNode
+}
+
+export function Empty({ icon, title, description, action, className, ...props }: EmptyProps) {
+  return (
+    <div
+      className={cx(
+        "flex flex-col items-center justify-center gap-3 px-6 py-12 text-center",
+        className
+      )}
+      {...props}
+    >
+      {icon && (
+        <div className="flex h-12 w-12 items-center justify-center rounded-xl border border-border bg-surface-2 text-muted-foreground">
+          {icon}
+        </div>
+      )}
+      <div className="space-y-1 max-w-xs">
+        <p className="text-sm font-medium text-foreground">{title}</p>
+        {description && (
+          <p className="text-sm text-muted-foreground leading-relaxed">{description}</p>
+        )}
+      </div>
+      {action && <div className="mt-1">{action}</div>}
+    </div>
+  )
+}

package/src/components/core/field.tsx

@@ -0,0 +1,39 @@
+import * as React from "react"
+import * as RadixLabel from "@radix-ui/react-label"
+import { cx } from "@/lib/cx"
+
+export const Field = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cx("flex flex-col gap-1.5", className)} {...props} />
+  )
+)
+Field.displayName = "Field"
+
+export const FieldLabel = React.forwardRef<
+  React.ElementRef<typeof RadixLabel.Root>,
+  React.ComponentPropsWithoutRef<typeof RadixLabel.Root> & { required?: boolean }
+>(({ className, children, required, ...props }, ref) => (
+  <RadixLabel.Root
+    ref={ref}
+    className={cx("text-sm font-medium leading-none text-foreground peer-disabled:cursor-not-allowed peer-disabled:opacity-70", className)}
+    {...props}
+  >
+    {children}
+    {required && <span className="ml-1 text-muted-foreground">*</span>}
+  </RadixLabel.Root>
+))
+FieldLabel.displayName = "FieldLabel"
+
+export const FieldHint = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, ...props }, ref) => (
+    <p ref={ref} className={cx("text-xs text-muted-foreground", className)} {...props} />
+  )
+)
+FieldHint.displayName = "FieldHint"
+
+export const FieldError = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, ...props }, ref) => (
+    <p ref={ref} className={cx("text-xs text-danger font-medium", className)} {...props} />
+  )
+)
+FieldError.displayName = "FieldError"