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

React component library

import { jsx as f } from "react/jsx-runtime";
import { forwardRef as m } from "react";
import { n as w } from "./emotion-styled.browser.esm-CjCaF13H.js";
import { P as r } from "./index-S5Cd7WrG.js";
const d = {
  Row: "row",
  RowReverse: "row-reverse",
  Column: "column",
  ColumnReverse: "column-reverse"
}, u = {
  NoWrap: "nowrap",
  Wrap: "wrap",
  WrapReverse: "wrap-reverse"
}, S = {
  Start: "flex-start",
  Center: "center",
  End: "flex-end",
  SpaceAround: "space-around",
  SpaceBetween: "space-between",
  SpaceEvenly: "space-evenly"
}, x = {
  Start: "flex-start",
  Center: "center",
  Stretch: "stretch",
  End: "flex-end",
  Baseline: "baseline"
}, g = w.div`
  display: flex;
  flex-direction: ${(e) => d[e.direction]};
  flex-wrap: ${(e) => u[e.wrap]};
  justify-content: ${(e) => S[e.justifyContent]};
  align-items: ${(e) => x[e.alignItems]};
  column-gap: ${(e) => e.columnGap ? e.columnGap : e.gap};
  row-gap: ${(e) => e.rowGap ? e.rowGap : e.gap};
`, v = m((e, t) => {
  const {
    className: n = "",
    children: a,
    direction: o = "Row",
    wrap: s = "NoWrap",
    justifyContent: c = "Start",
    alignItems: l = "Stretch",
    gap: p = "0",
    ...i
  } = e;
  return /* @__PURE__ */ f(
    g,
    {
      className: "lnc-flexbox-container " + (n || ""),
      ref: t,
      wrap: s,
      gap: p,
      alignItems: l,
      direction: o,
      justifyContent: c,
      ...i,
      children: a
    }
  );
});
v.propTypes = {
  rowGap: r.string,
  columnGap: r.string,
  gap: r.string,
  /**
   * Controls the direction of items in FlexBox.
   */
  direction: r.oneOf(["Row", "RowReverse", "Column", "ColumnReverse"]),
  /**
   * Determines whether the FlexBox should wrap, when there is not enough space to display all items in one line.
   */
  wrap: r.oneOf(["NoWrap", "Wrap", "WrapReverse"]),
  /**
   * Controls how the space is distributed between items along the main-axis.
   */
  justifyContent: r.oneOf([
    "Start",
    "Center",
    "End",
    "SpaceAround",
    "SpaceBetween",
    "SpaceEvenly"
  ]),
  /**
   * Controls how the space is distributed between items along the cross-axis.
   */
  alignItems: r.oneOf([
    "Start",
    "Center",
    "Stretch",
    "End",
    "Baseline"
  ])
};
export {
  v as default
};