welcome-ui/dist/Drawer.mjs

Customizable design system with react • styled-components • styled-system and ariakit.

"use client";
import { j as e } from "./jsx-runtime-Bqq1Hxg9.mjs";
import { forwardRef as d } from "./System.mjs";
import n, { th as s, css as c, useTheme as h } from "@xstyled/styled-components";
import { Box as l } from "./Box.mjs";
import { Button as v } from "./Button.mjs";
import "./Icon.mjs";
import { A as B } from "./index-6dgzrvpZ.mjs";
import { Text as g } from "./Text.mjs";
import { CloseButton as k } from "./CloseButton.mjs";
import { D as C } from "./SYRFVSLH-DPBHrVeS.mjs";
import { D as I, u as S } from "./JC64G2H7-ifBZq_RU.mjs";
import { D as T } from "./AXB53BZF-BU4qmiUA.mjs";
const O = n.divBox`
  flex: 1;
  margin: 0 auto;
  width: 100%;
`, F = n.divBox(
  ({ size: t }) => c`
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    height: 48;
    width: 48;
    border-radius: md;
    background-color: beige-20;
    transition: background-color ${s("transitions.medium")};

    ${t === "sm" && c`
      height: 32;
      width: 32;
    `}
  `
), A = d(
  ({
    children: t,
    getPersistentElements: r,
    maxWidth: o = 820,
    store: i,
    ...a
  }, m) => {
    const x = h(), u = () => Array.from(
      r ? r() : document.querySelectorAll("[data-wui-persistent]")
    ), p = (b) => {
      const $ = b.target;
      return !u().some(
        (D) => D.contains($)
      );
    };
    return /* @__PURE__ */ e.jsx(
      M,
      {
        ...a,
        autoFocusOnShow: !1,
        getPersistentElements: u,
        h: { _: "100%", md: "calc(100% - 3rem)" },
        hideOnInteractOutside: p,
        overflow: "hidden",
        placement: "bottom",
        ref: m,
        store: i,
        style: {
          borderTopLeftRadius: x.radii.xxl,
          borderTopRightRadius: x.radii.xxl
        },
        withBackdrop: !0,
        children: /* @__PURE__ */ e.jsx(l, { h: "100%", mt: { _: "xl", md: "3xl" }, overflowY: "auto", w: "100%", children: /* @__PURE__ */ e.jsx(O, { maxWidth: o, children: /* @__PURE__ */ e.jsx(l, { p: { _: "0 md xl", md: "0 xl 3xl" }, children: t }) }) })
      }
    );
  }
), E = ({
  action: t,
  icon: r,
  onBackButtonClick: o,
  subtitle: i,
  title: a
}) => /* @__PURE__ */ e.jsxs(
  l,
  {
    alignItems: { md: "center" },
    backgroundColor: "neutral-10",
    display: "flex",
    flexDirection: { _: "column", md: "row" },
    gap: "xl",
    justifyContent: "space-between",
    mb: "xl",
    pb: "md",
    position: "sticky",
    top: 0,
    zIndex: 1,
    children: [
      /* @__PURE__ */ e.jsxs(l, { alignItems: "center", display: "flex", gap: { _: "md", md: "xl" }, children: [
        !!o && /* @__PURE__ */ e.jsx(v, { onClick: o, shape: "circle", size: "lg", variant: "ghost", children: /* @__PURE__ */ e.jsx(B, {}) }),
        !!r && /* @__PURE__ */ e.jsx(P, { icon: r }),
        /* @__PURE__ */ e.jsxs(l, { display: "flex", flexDirection: "column", gap: "xxs", children: [
          /* @__PURE__ */ e.jsx(g, { pr: "xl", variant: "h3", children: a }),
          i
        ] })
      ] }),
      t ? /* @__PURE__ */ e.jsx(l, { alignItems: "center", display: "flex", flexShrink: 0, gap: "md", children: t }) : null
    ]
  }
), P = ({ icon: t, size: r = "md" }) => /* @__PURE__ */ e.jsx(F, { size: r, children: /* @__PURE__ */ e.jsx(t, { color: "neutral-90", size: r }) }), R = (t) => {
  switch (t) {
    case "bottom":
      return {
        bottom: 0,
        left: 0,
        right: 0,
        transform: "translateY(100%)"
      };
    case "left":
      return {
        bottom: 0,
        left: 0,
        top: "0 !important",
        transform: "translateX(-100%)"
      };
    case "right":
      return {
        bottom: 0,
        right: 0,
        top: "0 !important",
        transform: "translateX(100%)"
      };
    case "top":
      return {
        left: 0,
        right: 0,
        top: "0 !important",
        transform: "translateY(-100%)"
      };
  }
}, f = ["sm", "md", "lg"], _ = (t, r) => {
  switch (r) {
    case "bottom":
    case "top":
      return f.includes(t) ? s(`drawers.sizes.vertical.${t}`) : {
        height: t
      };
    case "left":
    case "right":
      return f.includes(t) ? s(`drawers.sizes.horizontal.${t}`) : {
        width: t
      };
  }
}, Y = n.divBox(
  ({ placement: t, size: r }) => c`
    ${s("cards.default")};
    ${s("drawers.default")};
    ${R(t)}
    ${_(r, t)}
    position: fixed;
    display: flex;
    flex-direction: column;
    overflow: auto;
    opacity: 0;
    transition: medium;
    max-width: 100%;

    &[data-enter] {
      opacity: 1;
      transform: translate(0, 0);
    }
  `
), w = n.divBox.withConfig({
  shouldForwardProp: (t) => !["hideOnInteractOutside"].includes(t)
})(
  ({ hideOnInteractOutside: t }) => c`
    ${s("drawers.backdrop")};
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity 150ms ease-in-out;

    ${t && c`
      cursor: pointer;
    `}

    &[data-enter] {
      opacity: 1;
    }
  `
), L = n.divBox`
  ${s("drawers.title")};
`, W = n.divBox`
  ${s("drawers.content")};
`, X = n(k)`
  ${s("drawers.closeButton")};
`, q = n.divBox`
  ${s("drawers.footer")};
`, j = ({ zIndex: t = "2", ...r }) => {
  const o = h();
  return /* @__PURE__ */ e.jsx(l, { h: "0", position: "sticky", top: 0, zIndex: t, children: /* @__PURE__ */ e.jsx(
    C,
    {
      render: /* @__PURE__ */ e.jsx(
        X,
        {
          left: `calc(100% - ${o.space.lg} - ${o.buttons.sizes.sm.height})`,
          mt: "lg",
          ...r
        }
      )
    }
  ) });
}, z = d((t, r) => /* @__PURE__ */ e.jsx(W, { flex: "1", overflowY: { md: "auto" }, ref: r, ...t })), H = d((t, r) => /* @__PURE__ */ e.jsx(
  q,
  {
    bottom: { md: "auto", xs: 0 },
    position: { md: "static", xs: "sticky" },
    ref: r,
    w: "100%",
    ...t
  }
)), Z = ({ children: t, zIndex: r = "1", ...o }) => /* @__PURE__ */ e.jsx(
  L,
  {
    alignItems: "center",
    display: "flex",
    justifyContent: "space-between",
    position: { md: "static", xs: "sticky" },
    top: { md: "auto", xs: 0 },
    w: "100%",
    zIndex: r,
    ...o,
    children: /* @__PURE__ */ e.jsx(g, { m: "0", variant: "h3", w: "100%", children: t })
  }
), J = d(
  ({
    children: t,
    hideOnInteractOutside: r = !0,
    placement: o = "right",
    size: i = "lg",
    store: a,
    withBackdrop: m = !1,
    withCloseButton: x = !0,
    ...u
  }, p) => /* @__PURE__ */ e.jsx(
    I,
    {
      backdrop: m ? /* @__PURE__ */ e.jsx(w, { hideOnInteractOutside: r }) : !1,
      hideOnInteractOutside: r,
      modal: m,
      ref: p,
      render: /* @__PURE__ */ e.jsx(Y, { placement: o, size: i }),
      store: a,
      ...u,
      children: /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
        x ? /* @__PURE__ */ e.jsx(j, {}) : null,
        t
      ] })
    }
  )
);
function lt(t = {}) {
  return S({ animated: !0, ...t });
}
const K = ({
  hideOnInteractOutside: t = !0,
  ...r
}) => /* @__PURE__ */ e.jsx(w, { hideOnInteractOutside: t, ...r }), y = d(({ as: t, store: r, ...o }, i) => /* @__PURE__ */ e.jsx(
  T,
  {
    ref: i,
    render: t ? (a) => /* @__PURE__ */ e.jsx(t, { ...a }) : void 0,
    store: r,
    ...o
  }
)), M = Object.assign(J, {
  Backdrop: K,
  Close: j,
  Content: z,
  Footer: H,
  Title: Z,
  Trigger: y
}), ct = Object.assign(A, { Header: E, Trigger: y });
export {
  ct as AssetDrawer,
  M as Drawer,
  K as DrawerBackdrop,
  y as Trigger,
  lt as useDrawer
};