@crossed/ui/lib/module/display/Table.js

A universal & performant styling library for React Native, Next.js & React

import { jsx, jsxs } from "react/jsx-runtime";
import { Text } from "../typography/Text";
import { createStyles } from "@crossed/styled";
const useTable = createStyles((t) => ({
  table: {
    base: {
      width: "100%",
      borderCollapse: "collapse",
      borderWidth: 0,
      tableLayout: "fixed"
    }
  },
  thead: {
    base: {
      borderTopWidth: 0,
      borderLeftWidth: 0,
      borderRightWidth: 0,
      borderBottomWidth: 1,
      borderStyle: "solid"
      // borderColor: t.colors.neutral.bright,
      // backgroundColor: t.colors.neutral.low,
    }
  },
  tbody: { base: {} },
  tr: {
    base: {
      borderTopWidth: 1,
      borderLeftWidth: 0,
      borderRightWidth: 0,
      borderBottomWidth: 0,
      borderStyle: "solid"
      // borderColor: t.colors.neutral[500],
    }
  },
  td: {
    base: {
      paddingLeft: t.space.xl,
      paddingRight: t.space.xl,
      paddingTop: t.space.xl,
      paddingBottom: t.space.xl
    }
  },
  th: {
    base: {
      textAlign: "left",
      paddingLeft: t.space.xl,
      paddingRight: t.space.xl,
      paddingTop: t.space.xl,
      paddingBottom: t.space.xl
    }
  }
}));
const Table = (props) => {
  return /* @__PURE__ */ jsx("table", { ...props, ...useTable.table.className() });
};
const THead = (props) => {
  return /* @__PURE__ */ jsx("thead", { ...props, ...useTable.thead.className() });
};
const TBody = ({
  children,
  ...props
}) => {
  const newChild = Array.isArray(children) && children.length > 0 || children ? children : /* @__PURE__ */ jsxs(Tr, { children: [
    /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Text, { color: "warning", children: "-" }) }),
    /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Text, { color: "warning", children: "-" }) }),
    /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Text, { color: "warning", children: "-" }) })
  ] });
  return /* @__PURE__ */ jsx("tbody", { ...props, ...useTable.tbody.className(), children: newChild });
};
const Tr = (props) => {
  return /* @__PURE__ */ jsx("tr", { ...props, ...useTable.tr.className() });
};
Tr.id = "Table.Tr";
const Td = (props) => {
  return /* @__PURE__ */ jsx("td", { ...props, ...useTable.td.className() });
};
const Th = (props) => {
  return /* @__PURE__ */ jsx("th", { ...props, ...useTable.th.className() });
};
export {
  TBody,
  THead,
  Table,
  Td,
  Th,
  Tr
};
//# sourceMappingURL=Table.js.map