react-basic-elements/dist/index.es.js

A lightweight collection of basic React layout and UI primitives with built-in style support.

import { jsx as c } from "react/jsx-runtime";
const w = {
  xs: "0.25rem",
  // 4px
  sm: "0.5rem",
  // 8px
  md: "1rem",
  // 16px
  lg: "1.5rem",
  // 24px
  xl: "2rem"
  // 32px
}, P = {
  xs: "0.75rem",
  // 12px
  sm: "0.875rem",
  // 14px
  md: "1rem",
  // 16px
  lg: "1.25rem",
  // 20px
  xl: "1.5rem"
  // 24px
}, W = {
  xs: "0.125rem",
  // 2px
  sm: "0.25rem",
  // 4px
  md: "0.375rem",
  // 6px
  lg: "0.5rem",
  // 8px
  xl: "1rem"
  // 16px
};
function p(t) {
  if (t !== void 0)
    return t in w ? w[t] : t;
}
function R(t) {
  if (t !== void 0)
    return t in P ? P[t] : t;
}
function k(t) {
  if (t !== void 0)
    return t in W ? W[t] : t;
}
function f(t) {
  const { w: r, h: o, minW: e, maxW: n, minH: m, maxH: l, m: i, mt: s, mb: d, ml: y, mr: g, mx: u, my: h, p: S, pt: $, pb: T, pl: v, pr: z, px: b, py: C, fz: H, radius: I, bg: G } = t;
  return {
    width: r,
    height: o,
    minWidth: e,
    maxWidth: n,
    minHeight: m,
    maxHeight: l,
    marginTop: p(s ?? h ?? i),
    marginBottom: p(d ?? h ?? i),
    marginLeft: p(y ?? u ?? i),
    marginRight: p(g ?? u ?? i),
    paddingTop: p($ ?? C ?? S),
    paddingBottom: p(T ?? C ?? S),
    paddingLeft: p(v ?? b ?? S),
    paddingRight: p(z ?? b ?? S),
    fontSize: R(H),
    borderRadius: k(I),
    backgroundColor: G
  };
}
function A(t) {
  return (/* @__PURE__ */ new Set([
    "w",
    "h",
    "minW",
    "maxW",
    "minH",
    "maxH",
    "m",
    "mt",
    "mb",
    "ml",
    "mr",
    "mx",
    "my",
    "p",
    "pt",
    "pb",
    "pl",
    "pr",
    "px",
    "py",
    "fz",
    "radius",
    "bg"
  ])).has(t);
}
function a(t) {
  const r = {}, o = {};
  for (const e in t)
    A(e) ? r[e] = t[e] : o[e] = t[e];
  return { commonStyles: r, restProps: o };
}
const x = ({
  direction: t = "row",
  align: r = "stretch",
  justify: o = "flex-start",
  wrap: e = "nowrap",
  gap: n,
  style: m,
  children: l,
  ...i
}) => {
  const { commonStyles: s, restProps: d } = a(i), y = f(s), g = {
    display: "flex",
    flexDirection: t,
    alignItems: r,
    justifyContent: o,
    flexWrap: e,
    gap: n,
    ...y,
    ...m
  };
  return /* @__PURE__ */ c("div", { ...d, style: g, children: l });
}, F = ({
  children: t,
  as: r = "span",
  fw: o = "normal",
  color: e = "inherit",
  align: n = "left",
  style: m,
  ...l
}) => {
  const { commonStyles: i, restProps: s } = a(l), d = f(i), y = {
    fontWeight: o,
    color: e,
    textAlign: n,
    ...d,
    ...m
  };
  return /* @__PURE__ */ c(r, { style: y, ...s, children: t });
}, j = ({ span: t = 1, grow: r = !1, offset: o = 0, style: e, children: n, ...m }) => {
  const { commonStyles: l, restProps: i } = a(m), s = f(l), d = {
    gridColumn: `span ${t} / span ${t + o}`,
    flexGrow: r ? 1 : 0,
    ...s,
    ...e
  };
  return /* @__PURE__ */ c("div", { style: d, ...i, children: n });
}, B = ({
  columns: t = 12,
  align: r = "stretch",
  gap: o = "1rem",
  justify: e = "stretch",
  style: n,
  children: m,
  ...l
}) => {
  const { commonStyles: i, restProps: s } = a(l), d = f(i), y = {
    display: "grid",
    gridTemplateColumns: `repeat(${t}, 1fr)`,
    gap: o,
    alignItems: r,
    justifyItems: e,
    ...d,
    ...n
  };
  return /* @__PURE__ */ c("div", { style: y, ...s, children: m });
};
B.Col = j;
const L = ({ style: t, children: r, flex: o, ...e }) => {
  const { commonStyles: n, restProps: m } = a(e), l = {
    ...f(n),
    flex: o,
    ...t
  };
  return /* @__PURE__ */ c("div", { style: l, ...m, children: r });
}, N = ({
  style: t,
  color: r,
  variant: o = "solid",
  orientation: e = "horizontal",
  length: n,
  ...m
}) => {
  const { commonStyles: l, restProps: i } = a(m), s = {
    border: "none",
    margin: 0,
    ...f(l),
    ...t
  };
  return e === "horizontal" ? (s.borderTop = `1px ${o} ${r}`, n && (s.width = n)) : (s.borderLeft = `1px ${o} ${r}`, s.height = n || "100%", s.display = "inline-block", s.verticalAlign = "middle"), /* @__PURE__ */ c("hr", { style: s, ...i });
}, E = ({
  direction: t = "column",
  align: r = "stretch",
  justify: o = "flex-start",
  gap: e = 8,
  ...n
}) => /* @__PURE__ */ c(x, { direction: t, align: r, justify: o, gap: e, ...n }), K = ({
  direction: t = "row",
  align: r = "center",
  justify: o = "flex-start",
  wrap: e = "wrap",
  gap: n = 8,
  ...m
}) => /* @__PURE__ */ c(x, { direction: t, align: r, justify: o, wrap: e, gap: n, ...m }), O = ({ direction: t = "row", align: r = "center", justify: o = "center", ...e }) => /* @__PURE__ */ c(x, { direction: t, align: r, justify: o, ...e }), U = ({ cols: t, gap: r = 0, style: o, children: e, ...n }) => {
  const { commonStyles: m, restProps: l } = a(n), i = f(m), s = {
    display: "grid",
    gridTemplateColumns: `repeat(${t}, 1fr)`,
    gap: r,
    ...i,
    ...o
  };
  return /* @__PURE__ */ c("div", { style: s, ...l, children: e });
};
export {
  L as Box,
  O as Center,
  N as Divider,
  x as Flex,
  B as Grid,
  K as Group,
  U as SimpleGrid,
  E as Stack,
  F as Text
};