@lanaco/lnc-react-ui/dist/GridItem.js

React component library

import { jsx as u } from "react/jsx-runtime";
import { forwardRef as y } from "react";
import { P as t } from "./index-S5Cd7WrG.js";
import { n as E } from "./emotion-styled.browser.esm-CjCaF13H.js";
const b = E.div`
  display: ${(e) => e.inline ? "inline-grid" : "grid"};
  row-gap: ${(e) => e.rowGap ? e.rowGap : e.gap ? e.gap : 0};
  column-gap: ${(e) => e.columnGap ? e.columnGap : e.gap ? e.gap : 0};
  ${(e) => e.gridTemplate && `grid-template: ${e.gridTemplate};`}
  ${(e) => e.templateRows && `grid-template-rows: ${e.templateRows};`}
  ${(e) => e.templateColumns && `grid-template-columns: ${e.templateColumns};`}
  ${(e) => e.justifySelf && `justify-self: ${e.justifySelf};`} 
  ${(e) => e.alignSelf && `align-self: ${e.alignSelf};`} 
  ${(e) => e.area && `grid-area: ${e.area};`} 
  ${(e) => e.colStart && `grid-column-start: ${e.colStart};`} 
  ${(e) => (e.colEnd || e.colSpan) && `grid-column-end: span ${e.colEnd || e.colSpan};`} 
  ${(e) => e.rowStart && `grid-row-start: ${e.rowStart};`} 
  ${(e) => (e.rowEnd || e.rowSpan) && `grid-row-end: span ${e.rowEnd || e.rowSpan};`}
`, j = y((e, a) => {
  const {
    colStart: r,
    colEnd: n,
    rowStart: l,
    rowEnd: o,
    colSpan: i,
    rowSpan: m,
    justifySelf: d,
    alignSelf: c,
    area: g,
    className: S = "",
    style: f = {},
    children: $,
    ...w
  } = e;
  var s = {
    colStart: r,
    colEnd: n,
    rowStart: l,
    rowEnd: o,
    colSpan: i,
    rowSpan: m,
    justifySelf: d,
    alignSelf: c,
    area: g
  };
  return /* @__PURE__ */ u(
    b,
    {
      ref: a,
      ...s,
      className: S,
      style: f,
      ...w,
      children: $
    }
  );
});
j.propTypes = {
  /**
   * start the element at the columnStart column position
   */
  colStart: t.number,
  /**
   * end the element at the columnEnd column position
   */
  colEnd: t.number,
  /**
   * start the element at the rowStart row position
   */
  rowStart: t.number,
  /**
   * end the element at the rowStart row position
   */
  rowEnd: t.number,
  /**
   * span specific amount of columns
   */
  colSpan: t.number,
  /**
   * span specific amount of rows
   */
  rowSpan: t.number,
  justifySelf: t.oneOf(["start", "end", "center", "stretch"]),
  alignSelf: t.oneOf(["start", "end", "center", "stretch"]),
  area: t.string,
  //-------------
  style: t.object,
  className: t.string
};
export {
  j as default
};