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-B7I4PJ0H.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 k } from "./index-QaLwIvZS.mjs";
import { Text as g } from "./Text.mjs";
import { CloseButton as C } from "./CloseButton.mjs";
import { D as I } from "./SYRFVSLH-B6m278Vb.mjs";
import { D as O, u as S } from "./JC64G2H7-afsomHuH.mjs";
import { D as T } from "./AXB53BZF-XKOjjeWO.mjs";
const F = n.divBox`
  flex: 1;
  margin: 0 auto;
  width: 100%;
`, A = 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;
    `}
  `
), R = d(
  ({
    children: t,
    getPersistentElements: r,
    maxWidth: o = 820,
    store: i,
    ...a
  }, m) => {
    const u = h(), x = () => Array.from(
      r ? r() : document.querySelectorAll("[data-wui-persistent]")
    ), b = !!r || (($) => {
      const D = $.target;
      return !x().some(
        (B) => B.contains(D)
      );
    });
    return /* @__PURE__ */ e.jsx(
      N,
      {
        ...a,
        autoFocusOnShow: !1,
        getPersistentElements: x,
        h: { _: "100%", md: "calc(100% - 3rem)" },
        hideOnInteractOutside: b,
        overflow: "hidden",
        placement: "bottom",
        ref: m,
        store: i,
        style: {
          borderTopLeftRadius: u.radii.xxl,
          borderTopRightRadius: u.radii.xxl
        },
        withBackdrop: !0,
        children: /* @__PURE__ */ e.jsx(l, { h: "100%", mt: { _: "xl", md: "3xl" }, overflowY: "auto", w: "100%", children: /* @__PURE__ */ e.jsx(F, { maxWidth: o, children: /* @__PURE__ */ e.jsx(l, { p: { _: "0 md xl", md: "0 xl 3xl" }, children: t }) }) })
      }
    );
  }
), _ = ({
  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(k, {}) }),
        !!r && /* @__PURE__ */ e.jsx(E, { 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
    ]
  }
), E = ({ icon: t, size: r = "md" }) => /* @__PURE__ */ e.jsx(A, { size: r, children: /* @__PURE__ */ e.jsx(t, { color: "neutral-90", size: r }) }), P = (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"], Y = (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
      };
  }
}, L = n.divBox(
  ({ placement: t, size: r }) => c`
    ${s("cards.default")};
    ${s("drawers.default")};
    ${P(t)}
    ${Y(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;
    }
  `
), W = n.divBox`
  ${s("drawers.title")};
`, X = n.divBox`
  ${s("drawers.content")};
`, q = n(C)`
  ${s("drawers.closeButton")};
`, z = 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(
    I,
    {
      render: /* @__PURE__ */ e.jsx(
        q,
        {
          left: `calc(100% - ${o.space.lg} - ${o.buttons.sizes.sm.height})`,
          mt: "lg",
          ...r
        }
      )
    }
  ) });
}, H = d((t, r) => /* @__PURE__ */ e.jsx(X, { flex: "1", overflowY: { md: "auto" }, ref: r, ...t })), Z = d((t, r) => /* @__PURE__ */ e.jsx(
  z,
  {
    bottom: { md: "auto", xs: 0 },
    position: { md: "static", xs: "sticky" },
    ref: r,
    w: "100%",
    ...t
  }
)), J = ({ children: t, zIndex: r = "1", ...o }) => /* @__PURE__ */ e.jsx(
  W,
  {
    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 })
  }
), K = d(
  ({
    children: t,
    hideOnInteractOutside: r = !0,
    placement: o = "right",
    size: i = "lg",
    store: a,
    withBackdrop: m = !1,
    withCloseButton: u = !0,
    ...x
  }, p) => /* @__PURE__ */ e.jsx(
    O,
    {
      backdrop: m ? /* @__PURE__ */ e.jsx(w, { hideOnInteractOutside: r }) : !1,
      hideOnInteractOutside: r,
      modal: m,
      ref: p,
      render: /* @__PURE__ */ e.jsx(L, { placement: o, size: i }),
      store: a,
      ...x,
      children: /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
        u ? /* @__PURE__ */ e.jsx(j, {}) : null,
        t
      ] })
    }
  )
);
function ct(t = {}) {
  return S({ animated: !0, ...t });
}
const M = ({
  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
  }
)), N = Object.assign(K, {
  Backdrop: M,
  Close: j,
  Content: H,
  Footer: Z,
  Title: J,
  Trigger: y
}), dt = Object.assign(R, { Header: _, Trigger: y });
export {
  dt as AssetDrawer,
  N as Drawer,
  M as DrawerBackdrop,
  y as Trigger,
  ct as useDrawer
};