@crossed/ui/lib/module/overlay/Modal/Header.js

A universal & performant styling library for React Native, Next.js & React

import { jsx, jsxs } from "react/jsx-runtime";
import { composeStyles, createStyles, inlineStyle } from "@crossed/styled";
import { Box } from "../../layout/Box";
import { CloseButton } from "../../buttons/CloseButton";
import { useContext } from "react";
import { localContext } from "./context";
import { ModalTrigger } from "./Trigger";
const styles = createStyles(() => ({
  header: {
    media: {
      xs: { flexDirection: "column-reverse", alignItems: "flex-start" },
      md: { flexDirection: "row" }
    }
  }
}));
const ModalHeader = ({ children, style, ...props }) => {
  const { showSheet, closable } = useContext(localContext);
  const isClosable = typeof closable === "boolean" ? closable : true;
  return /* @__PURE__ */ jsxs(Box, { ...props, style: composeStyles(styles.header, style), children: [
    /* @__PURE__ */ jsx(
      Box,
      {
        style: inlineStyle(() => ({ base: { flexGrow: 1, flexShrink: 1 } })),
        children
      }
    ),
    showSheet || !isClosable ? null : /* @__PURE__ */ jsx(ModalTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
      CloseButton,
      {
        style: composeStyles(
          children ? inlineStyle(() => ({
            base: { position: "absolute", right: 0 }
          })) : inlineStyle(() => ({
            base: { alignSelf: "flex-end" }
          }))
        )
      }
    ) })
  ] });
};
ModalHeader.displayName = "Modal.Header";
export {
  ModalHeader
};
//# sourceMappingURL=Header.js.map