{
  "name": "table",
  "dependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "table.tsx",
      "content": "\"use client\";\r\n\r\nimport { css, themeVars as theme } from \"@yugnex/core\";\r\nimport type { HTMLAttributes, ReactNode, TdHTMLAttributes, ThHTMLAttributes } from \"react\";\r\n\r\nconst wrapClass = css({\r\n  width: \"100%\",\r\n  overflowX: \"auto\",\r\n  borderRadius: theme.radius.md,\r\n  border: `1px solid ${theme.color.border}`,\r\n});\r\n\r\nconst tableClass = css({\r\n  width: \"100%\",\r\n  borderCollapse: \"collapse\",\r\n  fontFamily: theme.fontFamily.sans,\r\n  fontSize: theme.fontSize.sm,\r\n});\r\n\r\nconst theadClass = css({\r\n  backgroundColor: theme.color.muted,\r\n});\r\n\r\nconst thClass = css({\r\n  padding: `${theme.space[2.5]} ${theme.space[3]}`,\r\n  textAlign: \"left\",\r\n  fontWeight: theme.fontWeight.semibold,\r\n  fontSize: theme.fontSize.xs,\r\n  letterSpacing: theme.letterSpacing.wide,\r\n  textTransform: \"uppercase\",\r\n  color: theme.color.mutedForeground,\r\n  whiteSpace: \"nowrap\",\r\n  borderBottom: `1px solid ${theme.color.border}`,\r\n});\r\n\r\nconst sortButtonClass = css({\r\n  display: \"inline-flex\",\r\n  alignItems: \"center\",\r\n  gap: theme.space[1],\r\n  border: \"none\",\r\n  background: \"transparent\",\r\n  padding: 0,\r\n  font: \"inherit\",\r\n  letterSpacing: \"inherit\",\r\n  textTransform: \"inherit\",\r\n  color: \"inherit\",\r\n  cursor: \"pointer\",\r\n  \"&:hover\": { color: theme.color.foreground },\r\n  \"&:focus-visible\": { outline: `2px solid ${theme.color.ring}`, outlineOffset: \"2px\" },\r\n});\r\n\r\nconst sortIconClass = css({\r\n  opacity: 0.4,\r\n  '[data-sorted=\"true\"] &': { opacity: 1 },\r\n});\r\n\r\nconst trClass = css({\r\n  transitionProperty: \"background-color\",\r\n  transitionDuration: theme.duration.fast,\r\n  \"&:not(:last-child) > td\": { borderBottom: `1px solid ${theme.color.border}` },\r\n  '&[data-hoverable=\"true\"]:hover': { backgroundColor: theme.color.muted },\r\n});\r\n\r\nconst tdClass = css({\r\n  padding: `${theme.space[2.5]} ${theme.space[3]}`,\r\n  color: theme.color.foreground,\r\n  verticalAlign: \"middle\",\r\n});\r\n\r\nconst captionClass = css({\r\n  captionSide: \"bottom\",\r\n  padding: theme.space[3],\r\n  fontSize: theme.fontSize.xs,\r\n  color: theme.color.mutedForeground,\r\n  textAlign: \"left\",\r\n});\r\n\r\nconst emptyClass = css({\r\n  padding: theme.space[10],\r\n  textAlign: \"center\",\r\n  color: theme.color.mutedForeground,\r\n  fontSize: theme.fontSize.sm,\r\n});\r\n\r\nexport function Table({ className, children, ...props }: HTMLAttributes<HTMLTableElement>) {\r\n  return (\r\n    <div className={wrapClass}>\r\n      <table className={className ? `${tableClass} ${className}` : tableClass} {...props}>\r\n        {children}\r\n      </table>\r\n    </div>\r\n  );\r\n}\r\n\r\nexport function TableHead({ className, ...props }: HTMLAttributes<HTMLTableSectionElement>) {\r\n  return <thead className={className ? `${theadClass} ${className}` : theadClass} {...props} />;\r\n}\r\n\r\nexport function TableBody(props: HTMLAttributes<HTMLTableSectionElement>) {\r\n  return <tbody {...props} />;\r\n}\r\n\r\nexport interface TableRowProps extends HTMLAttributes<HTMLTableRowElement> {\r\n  hoverable?: boolean;\r\n}\r\n\r\nexport function TableRow({ hoverable = true, className, ...props }: TableRowProps) {\r\n  return (\r\n    <tr data-hoverable={hoverable} className={className ? `${trClass} ${className}` : trClass} {...props} />\r\n  );\r\n}\r\n\r\nexport type SortDirection = \"asc\" | \"desc\" | null;\r\n\r\nexport interface TableHeaderCellProps extends ThHTMLAttributes<HTMLTableCellElement> {\r\n  /** Makes the header a sort control. */\r\n  sortable?: boolean;\r\n  /** Current direction for this column; null when sorted by a different column. */\r\n  sortDirection?: SortDirection;\r\n  onSort?: () => void;\r\n}\r\n\r\n/** A header cell. When `sortable`, renders a button and sets `aria-sort` for assistive tech. */\r\nexport function TableHeaderCell({\r\n  sortable,\r\n  sortDirection = null,\r\n  onSort,\r\n  className,\r\n  children,\r\n  ...props\r\n}: TableHeaderCellProps) {\r\n  const ariaSort = sortDirection === \"asc\" ? \"ascending\" : sortDirection === \"desc\" ? \"descending\" : \"none\";\r\n\r\n  return (\r\n    <th\r\n      scope=\"col\"\r\n      aria-sort={sortable ? ariaSort : undefined}\r\n      className={className ? `${thClass} ${className}` : thClass}\r\n      {...props}\r\n    >\r\n      {sortable ? (\r\n        <button type=\"button\" className={sortButtonClass} onClick={onSort} data-sorted={sortDirection !== null}>\r\n          {children}\r\n          <svg className={sortIconClass} width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" aria-hidden=\"true\">\r\n            {sortDirection === \"asc\" ? (\r\n              <path d=\"M6 3L9 7H3L6 3Z\" fill=\"currentColor\" />\r\n            ) : sortDirection === \"desc\" ? (\r\n              <path d=\"M6 9L3 5H9L6 9Z\" fill=\"currentColor\" />\r\n            ) : (\r\n              <>\r\n                <path d=\"M6 2.5L8.5 5.5H3.5L6 2.5Z\" fill=\"currentColor\" />\r\n                <path d=\"M6 9.5L3.5 6.5H8.5L6 9.5Z\" fill=\"currentColor\" />\r\n              </>\r\n            )}\r\n          </svg>\r\n        </button>\r\n      ) : (\r\n        children\r\n      )}\r\n    </th>\r\n  );\r\n}\r\n\r\nexport function TableCell({ className, ...props }: TdHTMLAttributes<HTMLTableCellElement>) {\r\n  return <td className={className ? `${tdClass} ${className}` : tdClass} {...props} />;\r\n}\r\n\r\nexport function TableCaption({ className, ...props }: HTMLAttributes<HTMLTableCaptionElement>) {\r\n  return <caption className={className ? `${captionClass} ${className}` : captionClass} {...props} />;\r\n}\r\n\r\n/** Full-width placeholder row for when a table has no data. */\r\nexport function TableEmpty({ colSpan, children }: { colSpan: number; children?: ReactNode }) {\r\n  return (\r\n    <tr>\r\n      <td colSpan={colSpan} className={emptyClass}>\r\n        {children ?? \"No results.\"}\r\n      </td>\r\n    </tr>\r\n  );\r\n}\r\n",
      "type": "registry:component"
    }
  ]
}