welcome-ui/dist/Table.mjs

Customizable design system with react • styled-components • styled-system and ariakit.

"use client";
import { j as o } from "./jsx-runtime-Bqq1Hxg9.mjs";
import { forwardRef as c } from "./System.mjs";
import t, { css as i, th as l } from "@xstyled/styled-components";
const h = t.divBox(
  ({ indent: d }) => i`
    overflow: hidden;
    width: 100%;

    ${d && i`
      ${s}, ${r} {
        &:first-child {
          padding-left: xl;
        }

        &:last-child {
          padding-right: xl;
        }
      }
    `}
  `
), p = t.div`
  width: 100%;
  overflow-x: auto;
`, b = t.tableBox`
  border: 0;
  width: 100%;
  border-collapse: collapse;
`, x = t.theadBox``, f = t.tbodyBox``, g = t.trBox(
  ({ onClick: d, variant: e }) => i`
    ${l("tables.tr.default")};
    ${e && l(`tables.tr.${e}`)};
    ${d && l("tables.tr.clickable")};

    &:last-child {
      border: 0;
    }
  `
), r = t.thBox`
  ${l("tables.th")};
  padding: xl;
  vertical-align: middle;

  &:first-child {
    padding-left: 0;
  }

  &:last-child {
    padding-right: 0;
  }
`, s = t.tdBox`
  ${l("tables.td")};
  position: relative;
  vertical-align: middle;

  &:first-child {
    padding-left: 0;
  }

  &:last-child {
    padding-right: 0;
  }
`, T = c(
  ({ children: d, indent: e, ...a }, n) => /* @__PURE__ */ o.jsx(h, { indent: e, ref: n, ...a, children: /* @__PURE__ */ o.jsx(p, { children: /* @__PURE__ */ o.jsx(b, { children: d }) }) })
), j = Object.assign(T, {
  Tbody: f,
  Td: s,
  Th: r,
  Thead: x,
  Tr: g
});
export {
  j as Table,
  T as TableComponent
};