Honest UI density

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

import * as React from "react"
import { Ellipsis as EllipsisIcon } from "honestui/icons"

import { Button } from "@/components/ui/honest-density-utils/registry-default-ui-button"
import { DensityScope, type Density } from "@/components/ui/honest-density"
import { Input } from "@/components/ui/honest-density-utils/registry-default-ui-input"
import {
  Menu,
  MenuItem,
  MenuPopup,
  MenuTrigger,
} from "@/components/ui/honest-density-utils/registry-default-ui-menu"
import {
  Select,
  SelectItem,
  SelectPopup,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/honest-density-utils/registry-default-ui-select"
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/honest-density-utils/registry-default-ui-table"

const densities: Density[] = ["compact", "default", "comfortable"]

const statuses = [
  { label: "All statuses", value: "all" },
  { label: "Paid", value: "Paid" },
  { label: "Overdue", value: "Overdue" },
]

// Sample data for the demo.
const invoices = [
  { id: "INV-1042", customer: "Northwind Traders", status: "Paid", amount: "$1,280.00" },
  { id: "INV-1043", customer: "Contoso Ltd", status: "Overdue", amount: "$640.50" },
  { id: "INV-1044", customer: "Fabrikam Inc", status: "Paid", amount: "$2,115.75" },
]

  function DensityDemo() {
  const [density, setDensity] = React.useState<Density>("compact")
  const [status, setStatus] = React.useState("all")
  const visibleInvoices = invoices.filter(
    (invoice) => status === "all" || invoice.status === status,
  )

  return (
    <div className="grid w-full min-w-0 max-w-3xl gap-[var(--hui-space-7)]">
      <section
        aria-labelledby="density-demo-invoices"
        className="grid min-w-0 gap-[var(--hui-space-3)]"
      >
        <div className="flex flex-wrap items-center justify-between gap-[var(--hui-space-3)]">
          <p
            id="density-demo-invoices"
            className="[font-size:var(--hui-font-size-regular)] [font-weight:var(--hui-font-weight-medium)]"
          >
            Invoices
          </p>
          <div
            role="group"
            aria-label="Invoice table density"
            className="flex flex-wrap gap-[var(--hui-space-2)]"
          >
            {densities.map((value) => (
              <Button
                key={value}
                variant={density === value ? "secondary" : "ghost"}
                size="sm"
                aria-pressed={density === value}
                onClick={() => setDensity(value)}
              >
                {value[0].toUpperCase() + value.slice(1)}
              </Button>
            ))}
          </div>
        </div>

        <DensityScope
          density={density}
          data-testid="density-demo-table-scope"
          className="grid min-w-0 gap-[var(--hui-density-gap)]"
        >
          <div className="flex flex-wrap items-center gap-[var(--hui-density-gap)]">
            <Select items={statuses} value={status} onValueChange={(value) => setStatus(value ?? "all")}>
              <SelectTrigger aria-label="Filter by status" className="w-40">
                <SelectValue />
              </SelectTrigger>
              <SelectPopup>
                {statuses.map(({ label, value }) => (
                  <SelectItem key={value} value={value}>
                    {label}
                  </SelectItem>
                ))}
              </SelectPopup>
            </Select>
            <Button variant="secondary">Export</Button>
          </div>

          <Table>
            <TableHeader>
              <TableRow>
                <TableHead scope="col">Invoice</TableHead>
                <TableHead scope="col">Customer</TableHead>
                <TableHead scope="col">Status</TableHead>
                <TableHead scope="col" className="text-right">Amount</TableHead>
                <TableHead scope="col">
                  <span className="sr-only">Actions</span>
                </TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {visibleInvoices.map((invoice) => (
                <TableRow key={invoice.id}>
                  <TableCell>{invoice.id}</TableCell>
                  <TableCell>{invoice.customer}</TableCell>
                  <TableCell>{invoice.status}</TableCell>
                  <TableCell className="text-right">{invoice.amount}</TableCell>
                  <TableCell className="w-px">
                    <Menu>
                      <MenuTrigger
                        render={<Button variant="ghost" size="icon" />}
                        aria-label={`Actions for ${invoice.id}`}
                      >
                        <EllipsisIcon />
                      </MenuTrigger>
                      <MenuPopup align="end">
                        <MenuItem>View invoice</MenuItem>
                        <MenuItem>Download PDF</MenuItem>
                        <MenuItem>Send reminder</MenuItem>
                      </MenuPopup>
                    </Menu>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </DensityScope>
      </section>

      <DensityScope density="comfortable" data-testid="density-demo-form-scope">
        <form
          aria-labelledby="density-demo-reminder"
          className="grid max-w-sm gap-[var(--hui-density-gap)]"
          onSubmit={(event) => event.preventDefault()}
        >
          <p
            id="density-demo-reminder"
            className="[font-size:var(--hui-font-size-regular)] [font-weight:var(--hui-font-weight-medium)]"
          >
            Reminder settings
          </p>
          <label
            htmlFor="density-demo-reply-to"
            className="[font-size:var(--hui-font-size-small)] [line-height:var(--hui-line-height-small)]"
          >
            Reply-to email
          </label>
          <Input id="density-demo-reply-to" type="email" autoComplete="email" />
          <Button type="submit">Save settings</Button>
        </form>
      </DensityScope>
    </div>
  )
}

function SourceSpecimen(){return <DensityDemo/>}
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>}