welcome-ui/dist/Popover.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 c } from "./System.mjs";
import { Box as h } from "./Box.mjs";
import { Button as x } from "./Button.mjs";
import "./Icon.mjs";
import { C as j } from "./index-KxL21VJb.mjs";
import i, { th as p, css as l, system as u } from "@xstyled/styled-components";
import { P, a as d } from "./QYJ6MIDR-CpwIyzxN.mjs";
import { P as $, H as C, a as w, u as H, b as B } from "./BYC7LY2E-TZjhdRy3.mjs";
const T = i(P)`
  color: ${p("popovers.default.backgroundColor")};
`, b = i.svgBox(
  ({ $transform: t }) => l`
    transform: ${t};
  `
), v = i.div`
  ${p("popovers.content")};
`, m = i.h6`
  margin: 0;
  ${p("popovers.title")};
`, f = i($)(
  ({ $withCloseButton: t }) => l`
    ${p("popovers.default")};
    outline: none;
    opacity: 0;
    transition: opacity 150ms ease-in-out;
    ${u};

    /* on open popover for animation */
    &[data-enter] {
      opacity: 1;
    }

    ${t && l`
      ${m} {
        padding-right: 50;
      }
    `}
  `
);
i(d)`
  ${u};
`;
const y = i(C)`
  ${u};
`, Z = {
  bottom: "rotateZ(360deg)",
  left: "rotateZ(90deg)",
  right: "rotateZ(-90deg)",
  top: "rotateZ(180deg)"
}, A = ({ store: t }) => {
  const r = t.useState("currentPlacement"), [o] = r.split("-"), n = Z[o];
  return /* @__PURE__ */ e.jsx(T, { store: t, children: /* @__PURE__ */ e.jsxs(b, { $transform: n, h: 30, w: 30, xmlns: "http://www.w3.org/2000/svg", children: [
    /* @__PURE__ */ e.jsx("path", { d: "M7 30L15 22L23 30H7Z", fill: "currentColor", fillRule: "nonzero", id: "stroke" }),
    /* @__PURE__ */ e.jsx("path", { d: "M8 30L15 23L22 30H8Z", fill: "currentColor", fillRule: "nonzero" })
  ] }) });
}, g = ({ children: t, onClose: r, store: o }) => {
  const n = () => {
    r && r(), o == null || o.hide();
  }, { withCloseButton: s } = o;
  return /* @__PURE__ */ e.jsxs(h, { position: "relative", children: [
    /* @__PURE__ */ e.jsx(A, { store: o }),
    t,
    s ? /* @__PURE__ */ e.jsx(
      x,
      {
        flex: "0 0 auto",
        ml: "md",
        onClick: n,
        position: "absolute",
        right: 1,
        shape: "square",
        size: "xs",
        top: 1,
        variant: "secondary",
        children: /* @__PURE__ */ e.jsx(j, {})
      }
    ) : null
  ] });
}, L = c(
  ({ as: t, store: r, ...o }, n) => /* @__PURE__ */ e.jsx(
    d,
    {
      ref: n,
      render: t ? (s) => /* @__PURE__ */ e.jsx(t, { ...s }) : void 0,
      store: r,
      ...o
    }
  )
), R = c(
  ({ as: t, store: r, ...o }, n) => /* @__PURE__ */ e.jsx(y, { store: r, ...o, forwardedAs: t, ref: n })
), k = c(
  ({ children: t, onClose: r, store: o, ...n }, s) => {
    const { withCloseButton: a } = o;
    return /* @__PURE__ */ e.jsx(f, { $withCloseButton: a, ref: s, store: o, ...n, children: /* @__PURE__ */ e.jsx(g, { onClose: r, store: o, children: t }) });
  }
), J = Object.assign(k, {
  Content: v,
  Title: m,
  Trigger: L
}), z = c(
  ({ children: t, onClose: r, store: o, ...n }, s) => {
    const { withCloseButton: a } = o;
    return /* @__PURE__ */ e.jsx(
      f,
      {
        as: w,
        store: o,
        ...n,
        $withCloseButton: a,
        ref: s,
        children: /* @__PURE__ */ e.jsx(g, { onClose: r, store: o, children: t })
      }
    );
  }
), K = Object.assign(z, {
  Content: v,
  Title: m,
  Trigger: R
}), N = ({
  animated: t = 150,
  withCloseButton: r = !1,
  ...o
} = {}) => ({
  ...H({
    animated: t,
    ...o
  }),
  withCloseButton: r
}), Q = ({
  animated: t = 150,
  hideTimeout: r = 300,
  showTimeout: o = 500,
  withCloseButton: n = !1,
  ...s
} = {}) => ({
  ...B({
    animated: t,
    hideTimeout: r,
    showTimeout: o,
    ...s
  }),
  withCloseButton: n
});
export {
  J as Popover,
  K as PopoverHover,
  N as usePopover,
  Q as usePopoverHover
};