welcome-ui
Version:
Customizable design system with react, typescript, tailwindcss and ariakit.
148 lines (147 loc) • 4.55 kB
JavaScript
"use client";
import { u as N, a as k, P as V } from "./JMU4N4M5-DnfyqGdJ.js";
import { b as S } from "./Q5W46E73-5xQblshY.js";
import { c as h, i as $, j as W, q as y, r as R, k as O, J as H, w as M, f as p, a as P, u as T, h as _ } from "./U6HHPQDW-CzxyP5H7.js";
import { useMemo as b, useState as j } from "react";
import { jsx as c, jsxs as I } from "react/jsx-runtime";
import { u as L } from "./APVORPDK-i7Z_eBMP.js";
var v = "M23 27.8C24.1 29 26.4 30 28 30H30H0H2C3.7 30 5.9 29 7 27.8L14 20.6C14.7 19.8 15.3 19.8 16 20.6L23 27.8Z", U = "div", f = 30, i = f / 2, z = {
top: `rotate(180 ${i} ${i})`,
right: `rotate(-90 ${i} ${i})`,
bottom: `rotate(0 ${i} ${i})`,
left: `rotate(90 ${i} ${i})`
};
function B(t) {
const [e, o] = j(), r = S(t, "contentElement");
return O(() => {
if (!r) return;
const u = H(r).getComputedStyle(r);
o(u);
}, [r]), e;
}
function q(t) {
var e;
return t ? (e = t.getPropertyValue("box-shadow").match(/0px 0px 0px ([^0]+px)/)) == null ? void 0 : e[1] : void 0;
}
function F(t, e) {
if (!e) return;
const o = e.getPropertyValue(`border-${t}-color`);
if (o) return o;
const n = e.getPropertyValue("box-shadow").match(/0px 0px 0px [^,]+/);
return n && n[0].replace(/^0px 0px 0px\s+[^\s,]+/, "").trim() || void 0;
}
var J = h(
function({
store: e,
size: o = f,
borderWidth: r,
...n
}) {
const u = N();
e = e || u, $(
e,
process.env.NODE_ENV !== "production" && "PopoverArrow must be wrapped in a Popover component."
);
const a = S(
e,
(d) => d.currentPlacement.split("-")[0]
), l = W(), s = B(e), E = F(a, s) || "none", m = (s == null ? void 0 : s.getPropertyValue("background-color")) || "none", [A, g] = b(() => {
if (r != null) return [r, !1];
if (!s) return [0, !1];
const d = q(s);
if (d) return [Number.parseInt(d, 10), !0];
const w = s.getPropertyValue(`border-${a}-width`);
return w ? [Math.ceil(Number.parseFloat(w)), !1] : [0, !1];
}, [r, s, a]), D = A * 2 * (f / o), x = z[a];
return n = {
children: b(
() => /* @__PURE__ */ c("svg", { display: "block", viewBox: "0 0 30 30", children: /* @__PURE__ */ I("g", { transform: x, children: [
!g && // When using the CSS border property, set the fill color to match
// the background behind the stroke so transparent strokes match
// the appearance of borders on HTML elements.
/* @__PURE__ */ c(
"path",
{
fill: "none",
stroke: `var(--ak-layer, ${m})`,
d: v,
mask: `url(#${l})`
}
),
/* @__PURE__ */ c("path", { fill: "none", d: v, mask: `url(#${l})` }),
/* @__PURE__ */ c("path", { stroke: "none", d: v }),
/* @__PURE__ */ c("mask", { id: l, maskUnits: "userSpaceOnUse", children: /* @__PURE__ */ c(
"rect",
{
x: "-15",
y: "0",
width: "60",
height: "30",
fill: "white",
stroke: "black"
}
) })
] }) }),
[x, g, m, l]
),
"aria-hidden": !0,
...n,
ref: y(e.setArrowElement, n.ref),
style: {
position: "absolute",
fontSize: o,
width: "1em",
height: "1em",
pointerEvents: "none",
fill: `var(--ak-layer, ${m})`,
stroke: `var(--ak-layer-border, ${E})`,
strokeWidth: D,
...n.style
}
}, R(n);
}
), ne = M(
p(function(e) {
const o = J(e);
return P(U, o);
})
), Z = "div", C = h(
function({ store: e, ...o }) {
const r = k();
return e = e || r, o = {
...o,
ref: y(e == null ? void 0 : e.setAnchorElement, o.ref)
}, o;
}
);
p(function(e) {
const o = C(e);
return P(Z, o);
});
var G = "button", K = h(function({ store: e, ...o }) {
const r = k();
e = e || r, $(
e,
process.env.NODE_ENV !== "production" && "PopoverDisclosure must receive a `store` prop or be wrapped in a PopoverProvider component."
);
const n = o.onClick, u = T((a) => {
e == null || e.setAnchorElement(a.currentTarget), n == null || n(a);
});
return o = _(
o,
(a) => /* @__PURE__ */ c(V, { value: e, children: a }),
[e]
), o = {
...o,
onClick: u
}, o = C({ store: e, ...o }), o = L({ store: e, ...o }), o;
}), ae = p(function(e) {
const o = K(e);
return P(G, o);
});
export {
ne as P,
K as a,
ae as b,
J as u
};