alinea/dist/ui/Stack.js

Headless git-based CMS

import "../chunks/chunk-NZLE2WMY.js";

// src/ui/Stack.tsx
import {
  forwardRef,
  useMemo
} from "react";
import { px } from "./util/Units.js";
import { jsx } from "react/jsx-runtime";
function stack(props) {
  const direction = props.direction || "column";
  const styles = {
    display: "flex",
    minWidth: 0,
    flexDirection: direction,
    alignItems: props.center ? "center" : props.align || "unset",
    justifyContent: props.justify || "unset",
    gap: px(props.gap || 0)
  };
  if (props.wrap) styles.flexWrap = "wrap";
  if (props.full) styles[direction === "row" ? "width" : "height"] = "100%";
  return styles;
}
var VStack = forwardRef(
  function VStack2(props, ref) {
    const {
      children,
      as: tag = "div",
      gap,
      align,
      direction,
      justify,
      center,
      wrap,
      full,
      ...rest
    } = props;
    const key = `${gap}-${align}-${direction}-${justify}-${center}-${wrap}-${full}`;
    const Tag = tag;
    const style = useMemo(() => {
      return stack(props);
    }, [key]);
    const inner = /* @__PURE__ */ jsx(Tag, { ...rest, style: { ...style, ...props.style }, ref, children });
    if (!wrap) return inner;
    return /* @__PURE__ */ jsx("div", { children: inner });
  }
);
var HStack = forwardRef(function HStack2(props, ref) {
  return /* @__PURE__ */ jsx(VStack, { direction: "row", ...props, ref });
});
var Stack;
((Stack2) => {
  function Left(props) {
    return /* @__PURE__ */ jsx("div", { ...props, style: { ...props.style, marginRight: "auto" } });
  }
  Stack2.Left = Left;
  function Center(props) {
    return /* @__PURE__ */ jsx(
      "div",
      {
        ...props,
        style: { ...props.style, marginRight: "auto", marginLeft: "auto" }
      }
    );
  }
  Stack2.Center = Center;
  function Right(props) {
    return /* @__PURE__ */ jsx("div", { ...props, style: { ...props.style, marginLeft: "auto" } });
  }
  Stack2.Right = Right;
  function Bottom(props) {
    return /* @__PURE__ */ jsx("div", { ...props, style: { ...props.style, marginTop: "auto" } });
  }
  Stack2.Bottom = Bottom;
})(Stack || (Stack = {}));
export {
  HStack,
  Stack,
  VStack
};