welcome-ui/dist/Popover.js

Customizable design system with react, typescript, tailwindcss and ariakit.

"use client";
import { jsx as r, jsxs as _ } from "react/jsx-runtime";
import { forwardRef as i } from "react";
import { c as l } from "./index-PAaZGbyz.js";
import { Button as w } from "./Button.js";
import "./Icon-BisRi8B3.js";
import { C as f } from "./index-BJLXLdM3.js";
import { u as P } from "./RTNCFSKZ-P4icqVD0.js";
import { P as g, f as C, g as b, h as x, i as H, j as N } from "./GVVKDT6A-BnYN-H7C.js";
import { f as p } from "./forwardRefWithAs-8eP3ZN15.js";
import { P as $ } from "./4I4MLMKD-DgPx2VDC.js";
const j = "_root_1ldto_2", S = "_title_1ldto_15", T = "_content_1ldto_27", B = "_arrow_1ldto_41", a = {
  root: j,
  title: S,
  "with-close-button": "_with-close-button_1ldto_24",
  "content-wrapper": "_content-wrapper_1ldto_27",
  content: T,
  "close-button": "_close-button_1ldto_34",
  arrow: B,
  "arrow-item": "_arrow-item_1ldto_44",
  "placement-top": "_placement-top_1ldto_49",
  "placement-right": "_placement-right_1ldto_52",
  "placement-left": "_placement-left_1ldto_55",
  "placement-bottom": "_placement-bottom_1ldto_58"
}, L = l(a), d = i(
  ({ className: t, ...e }, o) => /* @__PURE__ */ r("div", { className: L("content", t), ref: o, ...e })
), m = l(a), R = ({ store: t }) => {
  const e = P(t, "currentPlacement"), [o] = e.split("-");
  return /* @__PURE__ */ r(g, { className: m("arrow"), store: t, children: /* @__PURE__ */ _(
    "svg",
    {
      className: m("arrow-item", o && `placement-${o}`),
      xmlns: "http://www.w3.org/2000/svg",
      children: [
        /* @__PURE__ */ r("path", { d: "M7 30L15 22L23 30H7Z", fill: "currentColor", fillRule: "nonzero", id: "stroke" }),
        /* @__PURE__ */ r("path", { d: "M8 30L15 23L22 30H8Z", fill: "currentColor", fillRule: "nonzero" })
      ]
    }
  ) });
}, u = l(a), v = ({ children: t, className: e, onClose: o, store: n }) => {
  const s = () => {
    o && o(), n == null || n.hide();
  }, { withCloseButton: c } = n;
  return /* @__PURE__ */ _("div", { className: u("content-wrapper", e), children: [
    /* @__PURE__ */ r(R, { store: n }),
    t,
    c ? /* @__PURE__ */ r(
      w,
      {
        className: u("close-button"),
        onClick: s,
        shape: "square",
        size: "xs",
        variant: "secondary",
        children: /* @__PURE__ */ r(f, {})
      }
    ) : null
  ] });
}, z = l(a), h = i(
  ({ className: t, ...e }, o) => /* @__PURE__ */ r("h6", { className: z("title", t), ref: o, ...e })
), k = p(
  ({ as: t, className: e, store: o, ...n }, s) => /* @__PURE__ */ r(
    $,
    {
      className: e,
      ref: s,
      render: t ? (c) => /* @__PURE__ */ r(t, { ...c }) : void 0,
      store: o,
      ...n
    }
  )
), y = p(
  ({ as: t, className: e, store: o, ...n }, s) => /* @__PURE__ */ r(
    C,
    {
      className: e,
      ref: s,
      render: t ? (c) => /* @__PURE__ */ r(t, { ...c }) : void 0,
      store: o,
      ...n
    }
  )
), A = l(a), M = p(
  ({ children: t, onClose: e, store: o, ...n }, s) => {
    const { withCloseButton: c } = o;
    return /* @__PURE__ */ r(
      b,
      {
        className: A("root", c && "with-close-button"),
        store: o,
        ...n,
        ref: s,
        children: /* @__PURE__ */ r(v, { onClose: e, store: o, children: t })
      }
    );
  }
), U = Object.assign(M, {
  Content: d,
  Title: h,
  Trigger: y
}), V = ({
  withCloseButton: t = !1,
  ...e
} = {}) => ({
  ...x({
    ...e
  }),
  withCloseButton: t
}), X = ({
  hideTimeout: t = 300,
  showTimeout: e = 500,
  withCloseButton: o = !1,
  ...n
} = {}) => ({
  ...H({
    hideTimeout: t,
    showTimeout: e,
    ...n
  }),
  withCloseButton: o
}), O = l(a), W = i(
  ({ children: t, onClose: e, store: o, ...n }, s) => {
    const { withCloseButton: c } = o;
    return /* @__PURE__ */ r(
      N,
      {
        className: O("root", c && "with-close-button"),
        ref: s,
        store: o,
        ...n,
        children: /* @__PURE__ */ r(v, { onClose: e, store: o, children: t })
      }
    );
  }
), Y = Object.assign(W, {
  Content: d,
  Title: h,
  Trigger: k
});
export {
  Y as Popover,
  U as PopoverHover,
  V as usePopover,
  X as usePopoverHover
};