@playbooks/ui/dist/tables.es.js

An interface library for Playbooks.

import { jsx, jsxs } from "react/jsx-runtime";
import { c as computeTailwind, T as Table$1, w as THead, x as TR, y as TH, z as TBody, E as TD } from "./index.es-7ZX4yv7W.js";
import { i as isObject } from "./helpers-ExDExR4u.js";
import { BtnWrapper } from "./buttons.es.js";
import { useUI } from "./context.es.js";
import { Div } from "./html.es.js";
import { FarIcon } from "./icons.es.js";
const Table = ({ name = "Table", tailwind, className, children, ...props }) => {
  const context = useUI();
  const base = context?.theme?.table();
  const classes = computeTailwind({ ...base, ...props, ...tailwind, className });
  return /* @__PURE__ */ jsx(Table$1, { name, className: classes, children });
};
const TableHeader = ({
  name = "TableHeader",
  tailwind,
  className,
  children,
  ...props
}) => {
  const context = useUI();
  const base = context?.theme?.tableHeader();
  const classes = computeTailwind({ ...base, ...props, ...tailwind, className });
  return /* @__PURE__ */ jsx(THead, { name, className: classes, children });
};
const TableHeaderRow = ({
  name = "TableHeaderRow",
  tailwind,
  className,
  children,
  ...props
}) => {
  const context = useUI();
  const base = context?.theme?.tableHeaderRow();
  const classes = computeTailwind({ ...base, ...props, ...tailwind, className });
  return /* @__PURE__ */ jsx(TR, { className: classes, children });
};
const TableHead = ({
  name = "TableHead",
  alt = "sort table",
  value,
  params,
  setParams,
  tailwind,
  className,
  children,
  ...props
}) => {
  const context = useUI();
  const base = context?.theme?.tableHead();
  const classes = computeTailwind({ ...base, ...props, ...tailwind, className });
  const direction = value === params?.sortProp && params?.sortValue === "asc" ? "desc" : "asc";
  return /* @__PURE__ */ jsx(TH, { name, className: classes, children: isObject(params) ? /* @__PURE__ */ jsxs(
    BtnWrapper,
    {
      alt,
      onClick: () => setParams({ ...params, sortProp: value, sortValue: direction }),
      className: "inherit",
      children: [
        children,
        value === params?.sortProp && params?.sortValue === "asc" && /* @__PURE__ */ jsx(FarIcon, { icon: "sort-up", className: "text-xs ml-2" }),
        value === params?.sortProp && params?.sortValue === "desc" && /* @__PURE__ */ jsx(FarIcon, { icon: "sort-down", className: "text-xs ml-2" }),
        value !== params?.sortProp && /* @__PURE__ */ jsx(FarIcon, { icon: "sort", className: "text-xs ml-2" })
      ]
    }
  ) : /* @__PURE__ */ jsx(Div, { children }) });
};
const TableBody = ({ name = "TableBody", tailwind, className, children, ...props }) => {
  const context = useUI();
  const base = context?.theme?.tableBody();
  const classes = computeTailwind({ ...base, ...props, ...tailwind, className });
  return /* @__PURE__ */ jsx(TBody, { name, className: classes, children });
};
const TableRow = ({ name = "TableRow", tailwind, className, children, ...props }) => {
  const context = useUI();
  const base = context?.theme?.tableRow();
  const classes = computeTailwind({ ...base, ...props, ...tailwind, className });
  return /* @__PURE__ */ jsx(TR, { name, className: classes, children });
};
const TableData = ({
  name = "TableData",
  title = false,
  value,
  tailwind,
  className,
  children,
  ...props
}) => {
  const context = useUI();
  const base = context?.theme?.tableData({ title });
  const classes = computeTailwind({ ...base, ...props, ...tailwind, className });
  return /* @__PURE__ */ jsx(TD, { name, className: classes, children: value ? value : children });
};
export {
  Table,
  TableBody,
  TableData,
  TableHead,
  TableHeader,
  TableHeaderRow,
  TableRow
};