welcome-ui/dist/Popover.js

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

"use client";
import './Popover.css';
import { jsx as r, jsxs as w } from "react/jsx-runtime";
import { forwardRef as i } from "react";
import { c as a } from "./index-B6iGEm-i.js";
import { Button as N } from "./Button.js";
import { Icon as k } from "./Icon.js";
import { b as q } from "./Q5W46E73-5xQblshY.js";
import { P as C, b as H } from "./RFRKSHIZ-C_FLl4qI.js";
import { f as p } from "./forwardRefWithAs-8eP3ZN15.js";
import { e as x, f as y, g as T, h as $, P as A } from "./ECBEZ4YM-o09xUuV6.js";
const S = "_root_kqbt9_2", j = "_title_kqbt9_15", B = "_content_kqbt9_27", L = "_arrow_kqbt9_41", l = {
  root: S,
  title: j,
  "with-close-button": "_with-close-button_kqbt9_24",
  "content-wrapper": "_content-wrapper_kqbt9_27",
  content: B,
  "close-button": "_close-button_kqbt9_34",
  arrow: L,
  "arrow-item": "_arrow-item_kqbt9_44",
  "placement-top": "_placement-top_kqbt9_49",
  "placement-right": "_placement-right_kqbt9_52",
  "placement-left": "_placement-left_kqbt9_55",
  "placement-bottom": "_placement-bottom_kqbt9_58"
}, R = a(l), m = i(
  ({ className: t, ...e }, o) => /* @__PURE__ */ r("div", { className: R("content", t), ref: o, ...e })
);
m.displayName = "Popover.Content";
const u = a(l), b = ({ store: t }) => {
  const e = q(t, "currentPlacement"), [o] = e.split("-");
  return /* @__PURE__ */ r(C, { className: u("arrow"), store: t, children: /* @__PURE__ */ w(
    "svg",
    {
      className: u("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" })
      ]
    }
  ) });
};
b.displayName = "Popover.Arrow";
const d = a(l), v = ({ children: t, className: e, onClose: o, store: n }) => {
  const s = () => {
    o && o(), n == null || n.hide();
  }, { withCloseButton: c } = n;
  return /* @__PURE__ */ w("div", { className: d("content-wrapper", e), children: [
    /* @__PURE__ */ r(b, { store: n }),
    t,
    c ? /* @__PURE__ */ r(N, { className: d("close-button"), onClick: s, size: "sm", variant: "secondary", children: /* @__PURE__ */ r(k, { name: "times" }) }) : null
  ] });
};
v.displayName = "Popover.ContentWrapper";
const z = a(l), _ = i(
  ({ className: t, ...e }, o) => /* @__PURE__ */ r("h6", { className: z("title", t), ref: o, ...e })
);
_.displayName = "Popover.Title";
const P = p(
  ({ as: t, className: e, store: o, ...n }, s) => /* @__PURE__ */ r(
    H,
    {
      className: e,
      ref: s,
      render: t ? (c) => /* @__PURE__ */ r(t, { ...c }) : void 0,
      store: o,
      ...n
    }
  )
);
P.displayName = "Popover.Trigger";
const f = p(
  ({ as: t, className: e, store: o, ...n }, s) => /* @__PURE__ */ r(
    x,
    {
      className: e,
      ref: s,
      render: t ? (c) => /* @__PURE__ */ r(t, { ...c }) : void 0,
      store: o,
      ...n
    }
  )
);
f.displayName = "Popover.HoverTrigger";
const W = a(l), h = p(
  ({ children: t, onClose: e, store: o, ...n }, s) => {
    const { withCloseButton: c } = o;
    return /* @__PURE__ */ r(
      y,
      {
        className: W("root", c && "with-close-button"),
        store: o,
        ...n,
        ref: s,
        children: /* @__PURE__ */ r(v, { onClose: e, store: o, children: t })
      }
    );
  }
);
h.displayName = "PopoverHover";
const Q = Object.assign(h, {
  Content: m,
  Title: _,
  Trigger: f
}), U = ({
  withCloseButton: t = !1,
  ...e
} = {}) => ({
  ...T({
    ...e
  }),
  withCloseButton: t
}), V = ({
  hideTimeout: t = 300,
  showTimeout: e = 500,
  withCloseButton: o = !1,
  ...n
} = {}) => ({
  ...$({
    hideTimeout: t,
    showTimeout: e,
    ...n
  }),
  withCloseButton: o
}), M = a(l), g = i(
  ({ children: t, onClose: e, store: o, ...n }, s) => {
    const { withCloseButton: c } = o;
    return /* @__PURE__ */ r(
      A,
      {
        className: M("root", c && "with-close-button"),
        ref: s,
        store: o,
        ...n,
        children: /* @__PURE__ */ r(v, { onClose: e, store: o, children: t })
      }
    );
  }
);
g.displayName = "Popover";
const X = Object.assign(g, {
  Content: m,
  Title: _,
  Trigger: P
});
export {
  X as Popover,
  Q as PopoverHover,
  l as popoverClasses,
  U as usePopover,
  V as usePopoverHover
};