@xk2800/nextjs-template 0.5.3

package/components/ui/badge.tsx

@@ -0,0 +1,46 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "../../lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive:
+          "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "span"
+
+  return (
+    <Comp
+      data-slot="badge"
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+export { Badge, badgeVariants }

package/components/ui/button.tsx

@@ -0,0 +1,64 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Slot } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot.Root : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      data-variant={variant}
+      data-size={size}
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }

package/components/ui/card.tsx

@@ -0,0 +1,92 @@
+import * as React from "react"
+
+import { cn } from "../../lib/utils"
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-6", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}

package/components/ui/checkbox.tsx

@@ -0,0 +1,32 @@
+"use client"
+
+import * as React from "react"
+import { CheckIcon } from "lucide-react"
+import { Checkbox as CheckboxPrimitive } from "radix-ui"
+
+import { cn } from "../../lib/utils"
+
+function Checkbox({
+  className,
+  ...props
+}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={cn(
+        "peer size-4 shrink-0 rounded-[4px] border border-input shadow-xs transition-shadow outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:bg-input/30 dark:aria-invalid:ring-destructive/40 dark:data-[state=checked]:bg-primary",
+        className
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        data-slot="checkbox-indicator"
+        className="grid place-content-center text-current transition-none"
+      >
+        <CheckIcon className="size-3.5" />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  )
+}
+
+export { Checkbox }

package/components/ui/data-table.tsx

@@ -0,0 +1,302 @@
+"use client"
+
+import * as React from "react"
+import { ChevronLeft, ChevronRight } from "lucide-react"
+
+import { cn } from "../../lib/utils"
+import { Button } from "./button"
+import { useDimensions } from "../../hooks/use-dimensions"
+import {
+  MIN_CELL_WIDTH,
+  STICKY_BREAKPOINT,
+  recalculateColumns,
+  type Column,
+} from "../../lib/recalculate-columns"
+import {
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "./table"
+
+export { MIN_CELL_WIDTH, STICKY_BREAKPOINT, recalculateColumns }
+export type { Column }
+
+function renderCell<TRow>(col: Column<TRow>, row: TRow): React.ReactNode {
+  if (col.renderer) return col.renderer(row)
+  const value = (row as Record<string, unknown>)[col.name]
+  return value == null ? "" : String(value)
+}
+
+/** Detail list for the columns that were auto-hidden from a given row. */
+export function ExpandedRow<TRow>({
+  row,
+  columns,
+}: {
+  row: TRow
+  columns: Column<TRow>[]
+}) {
+  return (
+    <ul data-slot="data-table-detail-list" className="grid gap-1 py-1 text-sm">
+      {columns.map((col) => (
+        <li key={col.name} className="flex gap-2">
+          <span className="text-muted-foreground min-w-24 font-medium">
+            {col.title}
+          </span>
+          <span>{renderCell(col, row)}</span>
+        </li>
+      ))}
+    </ul>
+  )
+}
+
+/**
+ * Page numbers to show: first, last, and the current page ±1, with "…" filling gaps.
+ * A gap of exactly one page shows that page instead of "…" (1 2 3 not 1 … 3).
+ */
+export function pageRange(page: number, pages: number): (number | "…")[] {
+  const out: (number | "…")[] = []
+  for (let p = 1; p <= pages; p++) {
+    const near = p === 1 || p === pages || Math.abs(p - page) <= 1
+    const bridges = (p === 2 && page === 4) || (p === pages - 1 && page === pages - 3)
+    if (near || bridges) out.push(p)
+    else if (out[out.length - 1] !== "…") out.push("…")
+  }
+  return out
+}
+
+/** Numbered pager. Renders nothing for a single page. Also used by server-paginated tables. */
+export function DataTablePagination({
+  page,
+  pages,
+  onPageChange,
+  className,
+}: {
+  page: number
+  pages: number
+  onPageChange: (page: number) => void
+  className?: string
+}) {
+  if (pages <= 1) return null
+  return (
+    <nav
+      aria-label="Pagination"
+      data-slot="data-table-pagination"
+      className={cn(
+        "mt-2 flex flex-wrap items-center justify-between gap-2 border-t pt-4",
+        className,
+      )}
+    >
+      <p className="text-muted-foreground text-sm">
+        Page {page} of {pages}
+      </p>
+      <div className="flex items-center gap-1">
+        <Button
+          variant="outline"
+          size="icon-sm"
+          onClick={() => onPageChange(page - 1)}
+          disabled={page === 1}
+          aria-label="Previous page"
+        >
+          <ChevronLeft />
+        </Button>
+        {pageRange(page, pages).map((p, i) =>
+          p === "…" ? (
+            <span key={`gap-${i}`} className="text-muted-foreground px-1 text-sm">
+              …
+            </span>
+          ) : (
+            <Button
+              key={p}
+              variant={p === page ? "default" : "ghost"}
+              size="icon-sm"
+              onClick={() => onPageChange(p)}
+              aria-label={`Page ${p}`}
+              aria-current={p === page ? "page" : undefined}
+              className="tabular-nums"
+            >
+              {p}
+            </Button>
+          ),
+        )}
+        <Button
+          variant="outline"
+          size="icon-sm"
+          onClick={() => onPageChange(page + 1)}
+          disabled={page === pages}
+          aria-label="Next page"
+        >
+          <ChevronRight />
+        </Button>
+      </div>
+    </nav>
+  )
+}
+
+export type DataTableProps<TRow> = {
+  columns: Column<TRow>[]
+  data: TRow[]
+  getRowId: (row: TRow) => string
+  /** Auto-hide overflowing columns into a per-row detail panel. Default `true`. */
+  autoCollapse?: boolean
+  /**
+   * Caller supplies its own per-row detail UI. Its presence turns column collapsing
+   * off — the table falls back to horizontal scroll instead.
+   */
+  expandRenderer?: (row: TRow) => React.ReactNode
+  minCellWidth?: number
+  stickyBreakpoint?: number
+  /** Rows per page (client-side). Default `10`; `false` renders every row (e.g. server-paginated data). */
+  pageSize?: number | false
+  className?: string
+}
+
+export function DataTable<TRow>({
+  columns,
+  data,
+  getRowId,
+  autoCollapse = true,
+  expandRenderer,
+  minCellWidth,
+  stickyBreakpoint,
+  pageSize = 10,
+  className,
+}: DataTableProps<TRow>) {
+  const { observe, width } = useDimensions()
+  const collapseEnabled = autoCollapse && !expandRenderer
+  const minCell = minCellWidth ?? MIN_CELL_WIDTH
+
+  const [colState, setColState] = React.useState<Column<TRow>[]>(() =>
+    columns.map((c) => ({ ...c, autoHide: false })),
+  )
+  const [expanded, setExpanded] = React.useState<Set<string>>(() => new Set())
+
+  // Re-seed when the column definitions change (incl. a manual visibility toggle
+  // that swaps the array). React re-runs the render immediately, no repaint.
+  const columnsRef = React.useRef(columns)
+  const hiddenSigRef = React.useRef("")
+  if (columnsRef.current !== columns) {
+    columnsRef.current = columns
+    hiddenSigRef.current = ""
+    setColState(columns.map((c) => ({ ...c, autoHide: false })))
+  }
+
+  // Recompute the fitting set on every measured-width change. Only commit when the
+  // auto-hidden set actually changed, so ResizeObserver can't drive a render loop.
+  React.useEffect(() => {
+    if (!collapseEnabled) return
+    const next = recalculateColumns(columns, width, {
+      minCellWidth,
+      stickyBreakpoint,
+    })
+    const sig = next.columns
+      .filter((c) => c.autoHide)
+      .map((c) => c.name)
+      .join("|")
+    if (sig !== hiddenSigRef.current) {
+      hiddenSigRef.current = sig
+      setColState(next.columns)
+    }
+  }, [width, columns, collapseEnabled, minCellWidth, stickyBreakpoint])
+
+  const visible = collapseEnabled
+    ? colState.filter((c) => !c.autoHide)
+    : colState
+  const hidden = collapseEnabled ? colState.filter((c) => c.autoHide) : []
+  const isCollapsed = hidden.length > 0
+
+  const [page, setPage] = React.useState(1)
+  const pages = pageSize ? Math.max(1, Math.ceil(data.length / pageSize)) : 1
+  const current = Math.min(page, pages) // clamp when data shrinks
+  const rows = pageSize
+    ? data.slice((current - 1) * pageSize, current * pageSize)
+    : data
+
+  const toggleRow = React.useCallback((id: string) => {
+    setExpanded((prev) => {
+      const next = new Set(prev)
+      if (next.has(id)) next.delete(id)
+      else next.add(id)
+      return next
+    })
+  }, [])
+
+  return (
+    <div className={className}>
+      <div
+        ref={observe}
+        data-slot="data-table"
+        // Always scrollable: if column 0 alone is wider than the container it scrolls instead of spilling out
+        className="relative w-full overflow-x-auto"
+      >
+        <table className="w-full caption-bottom text-sm">
+          <TableHeader>
+            <TableRow>
+              {isCollapsed && (
+                <TableHead className="w-8">
+                  <span className="sr-only">Row details</span>
+                </TableHead>
+              )}
+              {visible.map((col) => (
+                <TableHead
+                  key={col.name}
+                  style={{ minWidth: col.minWidth ?? minCell, maxWidth: col.maxWidth }}
+                >
+                  {col.title}
+                </TableHead>
+              ))}
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {rows.map((row) => {
+              const id = getRowId(row)
+              const open = expanded.has(id)
+              return (
+                <React.Fragment key={id}>
+                  <TableRow>
+                    {isCollapsed && (
+                      <TableCell className="w-8 align-top">
+                        <button
+                          type="button"
+                          onClick={() => toggleRow(id)}
+                          aria-expanded={open}
+                          aria-label={open ? "Hide row details" : "Show row details"}
+                          className="hover:bg-muted flex size-6 items-center justify-center rounded-sm"
+                        >
+                          <ChevronRight
+                            className={cn(
+                              "size-4 transition-transform",
+                              open && "rotate-90",
+                            )}
+                          />
+                        </button>
+                      </TableCell>
+                    )}
+                    {visible.map((col) => (
+                      <TableCell
+                        key={col.name}
+                        className="whitespace-normal break-words align-top"
+                        style={{ maxWidth: col.maxWidth }}
+                      >
+                        {renderCell(col, row)}
+                      </TableCell>
+                    ))}
+                  </TableRow>
+                  {isCollapsed && open && (
+                    <TableRow data-slot="data-table-expanded-row">
+                      <TableCell colSpan={visible.length + 1} className="bg-muted/50">
+                        <ExpandedRow row={row} columns={hidden} />
+                      </TableCell>
+                    </TableRow>
+                  )}
+                </React.Fragment>
+              )
+            })}
+          </TableBody>
+        </table>
+      </div>
+      <DataTablePagination page={current} pages={pages} onPageChange={setPage} />
+    </div>
+  )
+}

package/components/ui/dialog.tsx

@@ -0,0 +1,143 @@
+"use client"
+
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { XIcon } from "lucide-react"
+
+import { cn } from "../../lib/utils"
+
+function Dialog({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+}
+
+function DialogTrigger({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+function DialogPortal({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+function DialogClose({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <DialogPortal data-slot="dialog-portal">
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close
+            data-slot="dialog-close"
+            className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+          >
+            <XIcon />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn("text-lg leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}