Table

import { cn as merge } from 'cn';
import type { VariantProps } from 'cva';
import { defineConfig } from 'cva/config';
import { getSchema } from 'cva/tools';

export const { cva, cx: cn } = defineConfig({
  cx: merge,
});

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('bg-muted/50 border-t 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(
        'hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors',
        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(
        'text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&: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(
        'p-2 align-middle whitespace-nowrap [&: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('text-muted-foreground mt-4 text-sm', className)}
      data-slot="table-caption"
      {...props}
    />
  );
}