Honest UI paste-table

"use client";
import {ThemeProvider as LibraryDemoThemeProvider} from "next-themes";
"use client"

import * as React from "react"

import {
  PasteTable,
  type PasteTableColumn,
} from "@/components/ui/honest-paste-table"

import { PasteTableSampleButton } from "@/components/ui/honest-paste-table-utils/registry-default-examples-paste-table-sample-button"

const columns: PasteTableColumn[] = [
  { key: "name", label: "Name", aliases: ["Full name"], required: true },
  {
    key: "email",
    label: "Email",
    aliases: ["E-mail"],
    required: true,
    validate: (value) =>
      /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(String(value)) ? undefined : "Enter an email address, such as name@example.com",
  },
  { key: "seats", label: "Seats", type: "number" },
  { key: "startDate", label: "Start date", type: "date", dateOrder: "mdy" },
]

// Sample clipboard rows, as a spreadsheet would copy them. Three cells are wrong on purpose.
const sampleRows = [
  ["Full name", "E-mail", "Seats", "Start date"],
  ["Ana Ruiz", "ana@northwind.example", "12", "3/4/2026"],
  ["Li Wei", "li.wei@northwind", "1,250", "03/18/2026"],
  ["Sam Cole", "sam@northwind.example", "five", "2026-04-01"],
  ["Dee Park", "dee@northwind.example", "3", "4/31/2026"],
]

/** Nothing leaves the page: the readout shows the rows `onImport` received. */
  function PasteTableDemo() {
  const [imported, setImported] = React.useState<Record<string, unknown>[] | null>(null)

  return (
    <div className="flex w-full max-w-3xl min-w-0 flex-col gap-[var(--hui-space-4)]">
      <PasteTableSampleButton rows={sampleRows} />
      <PasteTable aria-label="Import contacts" columns={columns} onImport={setImported} />
      {imported && (
        <p className="m-0 text-[var(--hui-color-foreground-base-secondary)] [font-size:var(--hui-font-size-mini)] [letter-spacing:var(--hui-letter-spacing-mini)] [line-height:var(--hui-line-height-mini)]">
          Last import: {imported.map((row) => `${row.name} (${row.startDate ?? "no start date"})`).join(", ")}.
        </p>
      )}
    </div>
  )
}

function SourceSpecimen(){return <PasteTableDemo/>}
export default function LibraryRegistryPreview(){return <LibraryDemoThemeProvider attribute="data-theme" defaultTheme="dark" enableSystem={false}><div data-component-demo data-demo-theme="dark" data-theme="dark" className="dark" style={{background:"var(--background)",color:"var(--foreground)"}}><div className="relative w-full min-w-0 max-w-5xl min-h-[400px] flex items-center justify-center"><SourceSpecimen/></div></div></LibraryDemoThemeProvider>}