@teamsparta/stack-custom-modal/dist/chunk-YJGPPUJG.mjs

stack custom modal

// src/style.ts
import { css } from "@emotion/react";
import { vars } from "@teamsparta/stack-tokens";
import { getVar } from "@teamsparta/stack-utils";
import { zIndex } from "@teamsparta/stack-z-index";
var descriptionMarginVar = "--stack-modal-description-margin";
var contentMaxWidthVar = "--stack-modal-content-max-width";
var contentMaxHeightVar = "--stack-modal-content-max-height";
var contentMaxHeightDvhVar = "--stack-modal-content-max-height-dvh";
var contentHeightVar = "--stack-modal-content-height";
var contentHeightDvhVar = "--stack-modal-content-height-dvh";
var contentRadiusVar = "--stack-modal-content-radius";
var modalSizeVariants = {
  md: {
    [contentMaxWidthVar]: "460px",
    [contentMaxHeightVar]: "calc(100vh - 40px)",
    [contentMaxHeightDvhVar]: "calc(100dvh - 40px)",
    [contentHeightVar]: "auto",
    [contentHeightDvhVar]: "auto",
    [contentRadiusVar]: "16px",
    [descriptionMarginVar]: "4px 0 0 0"
  },
  lg: {
    [contentMaxWidthVar]: "640px",
    [contentMaxHeightVar]: "calc(100vh - 40px)",
    [contentMaxHeightDvhVar]: "calc(100dvh - 40px)",
    [contentHeightVar]: "auto",
    [contentHeightDvhVar]: "auto",
    [contentRadiusVar]: "16px",
    [descriptionMarginVar]: "12px 0 0 0"
  },
  xl: {
    [contentMaxWidthVar]: "1024px",
    [contentMaxHeightVar]: "100vh",
    [contentMaxHeightDvhVar]: "100dvh",
    [contentHeightVar]: "100vh",
    [contentHeightDvhVar]: "100dvh",
    [contentRadiusVar]: "0px",
    [descriptionMarginVar]: "12px 0 0 0"
  }
};
var overlayCss = css({
  backgroundColor: vars.dimm.default,
  position: "fixed",
  inset: 0,
  zIndex: zIndex.overlay
});
var contentWrapperCss = css({
  position: "fixed",
  transform: "translate(-50%, -50%)",
  top: "50%",
  left: "50%",
  zIndex: zIndex.modal,
  "&:focus": {
    outline: "none"
  }
});
var contentCss = css({
  display: "flex",
  flexDirection: "column",
  maxWidth: getVar(contentMaxWidthVar),
  width: "100vw",
  maxHeight: getVar(contentMaxHeightVar),
  height: getVar(contentHeightVar),
  backgroundColor: vars.background.modal,
  boxShadow: vars.shadow.elevation1,
  borderRadius: getVar(contentRadiusVar),
  "@supports (height: 100dvh)": {
    maxHeight: getVar(contentMaxHeightDvhVar),
    height: getVar(contentHeightDvhVar)
  }
});
var bodyCss = css({
  padding: "0 32px",
  flex: 1
});
var headerCss = css({
  position: "relative"
});
var headerHasScrollCss = css({
  padding: "32px 32px 24px 32px",
  borderBottom: `1px solid ${vars.line.nonClickable}`
});
var titleCss = css({
  wordBreak: "keep-all",
  whiteSpace: "pre-wrap"
});
var descriptionCss = css({
  wordBreak: "keep-all",
  whiteSpace: "pre-wrap",
  margin: getVar(descriptionMarginVar)
});
var footerHasScrollCss = css({
  padding: "24px 32px 32px 32px",
  borderTop: `1px solid ${vars.line.nonClickable}`
});
var captionCss = css({
  width: "100%",
  marginTop: 16,
  wordBreak: "keep-all",
  whiteSpace: "pre-wrap"
});
var scrollAreaRootCss = css({
  height: "100%",
  width: "100%",
  overflow: "hidden",
  display: "flex",
  flexDirection: "column"
});
var scrollAreaContentCss = css({
  flex: 1,
  overflow: "auto"
});
var scrollAreaScrollbarCss = css({
  width: "12px",
  display: "flex",
  userSelect: "none",
  touchAction: "none",
  paddingInline: "4px",
  transition: "background-color 160ms ease-out"
});
var scrollAreaThumbCss = css({
  flex: 1,
  backgroundColor: vars.neutral[30],
  borderRadius: "10px",
  position: "relative",
  transition: "background-color 160ms ease-out"
});
var closeButtonCss = css({
  position: "absolute",
  right: 32,
  top: 32,
  zIndex: 1,
  display: "inline-flex",
  alignItems: "center",
  justifyContent: "center",
  padding: 0,
  width: "28px",
  height: "28px",
  flexShrink: 0,
  borderRadius: "50%",
  backgroundColor: vars.fill.subtle,
  border: "none",
  cursor: "pointer"
});
var EASE_OUT_CUSTOM = [0.32, 0.72, 0, 1];
var overlayVariants = {
  initial: {
    opacity: 0
  },
  animate: {
    opacity: 1,
    transition: {
      duration: 0.3,
      ease: EASE_OUT_CUSTOM
    }
  },
  exit: {
    opacity: 0,
    transition: {
      duration: 0.3,
      ease: EASE_OUT_CUSTOM
    }
  }
};
var contentVariants = {
  initial: {
    scale: 0.9,
    opacity: 0
  },
  animate: {
    scale: 1,
    opacity: 1,
    transition: {
      duration: 0.3,
      ease: EASE_OUT_CUSTOM
    }
  },
  exit: {
    scale: 0.9,
    opacity: 0,
    transition: {
      duration: 0.3,
      ease: EASE_OUT_CUSTOM
    }
  }
};

export {
  modalSizeVariants,
  overlayCss,
  contentWrapperCss,
  contentCss,
  bodyCss,
  headerCss,
  headerHasScrollCss,
  titleCss,
  descriptionCss,
  footerHasScrollCss,
  captionCss,
  scrollAreaRootCss,
  scrollAreaContentCss,
  scrollAreaScrollbarCss,
  scrollAreaThumbCss,
  closeButtonCss,
  overlayVariants,
  contentVariants
};