Table

import { defineConfig, getSchema, type VariantProps } from 'cva';
import { twMerge } from 'tailwind-merge';

export const { cva, cx: cn } = defineConfig({
  hooks: {
    onComplete: (className: string) => twMerge(className),
  },
});

export type { VariantProps };
export { getSchema };

'use client';

import type * as React from 'react';

import { cn } from '@/lib/utils';

/**
 * Groups all parts of the table.
 * Renders a `<div>` element.
 *
 * Documentation: [Caprice UI Table](https://caprice-ui.com/docs/components/table)
 */
export namespace Root {
  export type Props = React.ComponentProps<'table'>;
}

export function Root({ className, ...props }: Root.Props) {
  return (
    <div className="relative w-full overflow-x-auto" data-slot="table-container">
      <table
        className={cn('w-full caption-bottom text-sm', className)}
        data-slot="table"
        {...props}
      />
    </div>
  );
}

/**
 * A container for the table header.
 * Renders a `<thead>` element.
 *
 * Documentation: [Caprice UI Table](https://caprice-ui.com/docs/components/table)
 */
export namespace Header {
  export type Props = React.ComponentProps<'thead'>;
}

export function Header({ className, ...props }: Header.Props) {
  return <thead className={cn('[&_tr]:border-b', className)} data-slot="table-header" {...props} />;
}

/**
 * A container for the table body.
 * Renders a `<tbody>` element.
 *
 * Documentation: [Caprice UI Table](https://caprice-ui.com/docs/components/table)
 */
export namespace Body {
  export type Props = React.ComponentProps<'tbody'>;
}

export function Body({ className, ...props }: Body.Props) {
  return (
    <tbody
      className={cn('[&_tr:last-child]:border-0', className)}
      data-slot="table-body"
      {...props}
    />
  );
}

/**
 * A container for the table footer.
 * Renders a `<tfoot>` element.
 *
 * Documentation: [Caprice UI Table](https://caprice-ui.com/docs/components/table)
 */
export namespace Footer {
  export type Props = React.ComponentProps<'tfoot'>;
}

export function Footer({ className, ...props }: Footer.Props) {
  return (
    <tfoot
      className={cn('border-t bg-muted/50 font-medium [&>tr]:last:border-b-0', className)}
      data-slot="table-footer"
      {...props}
    />
  );
}

/**
 * A row in the table.
 * Renders a `<tr>` element.
 *
 * Documentation: [Caprice UI Table](https://caprice-ui.com/docs/components/table)
 */
export namespace Row {
  export type Props = React.ComponentProps<'tr'>;
}

export function Row({ className, ...props }: Row.Props) {
  return (
    <tr
      className={cn(
        'border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted',
        className
      )}
      data-slot="table-row"
      {...props}
    />
  );
}

/**
 * A cell in the table header.
 * Renders a `<th>` element.
 *
 * Documentation: [Caprice UI Table](https://caprice-ui.com/docs/components/table)
 */
export namespace Head {
  export type Props = React.ComponentProps<'th'>;
}

export function Head({ className, ...props }: Head.Props) {
  return (
    <th
      className={cn(
        'h-10 whitespace-nowrap px-2 text-left align-middle font-medium text-foreground [&:has([role=checkbox])]:pr-0 *:[[role=checkbox]]:translate-y-[2px]',
        className
      )}
      data-slot="table-head"
      {...props}
    />
  );
}

/**
 * A cell in the table body.
 * Renders a `<td>` element.
 *
 * Documentation: [Caprice UI Table](https://caprice-ui.com/docs/components/table)
 */
export namespace Cell {
  export type Props = React.ComponentProps<'td'>;
}

export function Cell({ className, ...props }: Cell.Props) {
  return (
    <td
      className={cn(
        'whitespace-nowrap p-2 align-middle [&:has([role=checkbox])]:pr-0 *:[[role=checkbox]]:translate-y-[2px]',
        className
      )}
      data-slot="table-cell"
      {...props}
    />
  );
}

/**
 * A caption for the table.
 * Renders a `<caption>` element.
 *
 * Documentation: [Caprice UI Table](https://caprice-ui.com/docs/components/table)
 */
export namespace Caption {
  export type Props = React.ComponentProps<'caption'>;
}

export function Caption({ className, ...props }: Caption.Props) {
  return (
    <caption
      className={cn('mt-4 text-muted-foreground text-sm', className)}
      data-slot="table-caption"
      {...props}
    />
  );
}