52:Tbd86,
"use client"

import { cva } from "class-variance-authority"
import { useMemo } from "react"

import { cn } from "@/lib/cn"

import type * as React from "react"

import "../styles/ui/table.css"

import { Inbox } from "lucide-react"

type TableProps = {
  variant?: "default" | "card"
  caption?: "bottom" | "top"
  mobileFriendly?: boolean
  hoverable?: boolean
  stripped?: boolean
}

const tableStyle = cva("table-wrapper", {
  variants: {
    variant: {
      default: "table--default",
      card: "table--card",
    },
    mobileFriendly: {
      true: "table__mobile_friendly",
    },
    hoverable: {
      true: "table__hoverable",
    },
    stripped: {
      true: "table__stripped",
    },
    caption: {
      bottom: "caption-bottom",
      top: "caption-top",
    },
  },
})

function Table({
  children,
  className,
  variant = "default",
  caption = "bottom",
  hoverable = false,
  stripped = false,
  mobileFriendly = true,
  ...props
}: React.ComponentProps<"div"> & TableProps) {
  const style = useMemo(
    () => tableStyle({ variant, caption, mobileFriendly, hoverable, stripped }),
    [variant, caption, mobileFriendly, hoverable, stripped],
  )

  return (
    <div data-slot="table" className={cn(style, className)} {...props}>
      {children}
    </div>
  )
}

function TableContent({ className, ...props }: React.ComponentProps<"table">) {
  return (
    <table
      data-slot="table"
      className={cn("table-content", className)}
      {...props}
    />
  )
}

function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
  return (
    <thead
      data-slot="table-header"
      className={cn("table-header", className)}
      {...props}
    />
  )
}

function TableEmpty({
  className,
  colSpan = 1,
  children,
  emptyText,
}: {
  className?: string
  colSpan?: number
  children?: React.ReactNode
  emptyText?: string
}) {
  return (
    <tr className={className}>
      <td colSpan={colSpan} className="bg-transparent!">
        {children || (
          <div className="flex min-h-36 w-full flex-col items-center justify-center gap-3 text-center text-muted-foreground">
            <Inbox className="size-6" />
            <span className="text-sm">{emptyText ?? "No results found"}</span>
          </div>
        )}
      </td>
    </tr>
  )
}

function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
  return (
    <tbody
      data-slot="table-body"
      className={cn("table-body", className)}
      {...props}
    />
  )
}

function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
  return (
    <tfoot
      data-slot="table-footer"
      className={cn("table-footer", className)}
      {...props}
    />
  )
}

function TableRow({
  className,
  disabled,
  selected,
  onSelect,
  onClick,
  ...props
}: React.ComponentProps<"tr"> & {
  onSelect?: () => void
  disabled?: boolean
  selected?: boolean
}) {
  return (
    <tr
      data-slot="table-row"
      data-selected={selected}
      aria-disabled={disabled}
      data-disabled={disabled}
      className={cn("table-row", className)}
      onClick={(e) => {
        if (!disabled) {
          onSelect?.()
        }
        onClick?.(e)
      }}
      {...props}
    />
  )
}

function TableHead({ className, ...props }: React.ComponentProps<"th">) {
  return (
    <th
      data-slot="table-head"
      className={cn("table-head text-left", className)}
      {...props}
    />
  )
}

function TableCell({ className, ...props }: React.ComponentProps<"td">) {
  return (
    <td
      data-slot="table-cell"
      className={cn("table-cell text-left", className)}
      {...props}
    />
  )
}

function TableCaption({
  className,
  ...props
}: React.ComponentProps<"caption">) {
  return (
    <caption
      data-slot="table-caption"
      className={cn("mt-4 mb-4 text-sm text-muted-foreground", className)}
      {...props}
    />
  )
}

function TableActions({ children, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="table-actions"
      className={cn("flex items-center px-4 py-2.5")}
      {...props}
    >
      {children}
    </div>
  )
}

export {
  Table,
  TableActions,
  TableBody,
  TableCaption,
  TableCell,
  TableContent,
  TableEmpty,
  TableFooter,
  TableHead,
  TableHeader,
  TableRow,
}
51:["$","div",null,{"dangerouslySetInnerHTML":{"__html":"$52"}}]
A list of your recent invoices.
Invoice	Status	Method	Amount
INV002	Pending	PayPal	$150.00
INV003	Unpaid	Bank Transfer	$350.00
INV004	Unpaid	Bank Transfer	$30.00
INV005	Paid	PayPal	$550.00
Total			$2,500.00
Table

Installation
