@konstructio/ui/dist/index-DUA6Y_AE.js

A set of reusable and customizable React components built for konstruct.io

import { jsx as i, jsxs as w } from "react/jsx-runtime";
import * as s from "react";
import { c as x, b as M } from "./index-Cva-e5M4.js";
import { u as A, a as I } from "./index-B_6_jmOO.js";
import { c as v, R as $, P as L, O as F, W as G, C as W, T as j, d as B, b as f, e as Y } from "./index-DyKo5ZJT.js";
import { Button as k } from "./components/Button/Button.js";
import { useTheme as q } from "./contexts/theme.hook.js";
var D = "AlertDialog", [H, se] = x(D, [
  v
]), l = v(), m = (e) => {
  const { __scopeAlertDialog: o, ...r } = e, t = l(o);
  return /* @__PURE__ */ i($, { ...t, ...r, modal: !0 });
};
m.displayName = D;
var V = "AlertDialogTrigger", h = s.forwardRef(
  (e, o) => {
    const { __scopeAlertDialog: r, ...t } = e, a = l(r);
    return /* @__PURE__ */ i(Y, { ...a, ...t, ref: o });
  }
);
h.displayName = V;
var z = "AlertDialogPortal", y = (e) => {
  const { __scopeAlertDialog: o, ...r } = e, t = l(o);
  return /* @__PURE__ */ i(L, { ...t, ...r });
};
y.displayName = z;
var J = "AlertDialogOverlay", _ = s.forwardRef(
  (e, o) => {
    const { __scopeAlertDialog: r, ...t } = e, a = l(r);
    return /* @__PURE__ */ i(F, { ...a, ...t, ref: o });
  }
);
_.displayName = J;
var n = "AlertDialogContent", [K, Q] = H(n), N = s.forwardRef(
  (e, o) => {
    const { __scopeAlertDialog: r, children: t, ...a } = e, d = l(r), p = s.useRef(null), O = A(o, p), g = s.useRef(null);
    return /* @__PURE__ */ i(
      G,
      {
        contentName: n,
        titleName: R,
        docsSlug: "alert-dialog",
        children: /* @__PURE__ */ i(K, { scope: r, cancelRef: g, children: /* @__PURE__ */ w(
          W,
          {
            role: "alertdialog",
            ...d,
            ...a,
            ref: O,
            onOpenAutoFocus: M(a.onOpenAutoFocus, (c) => {
              var u;
              c.preventDefault(), (u = g.current) == null || u.focus({ preventScroll: !0 });
            }),
            onPointerDownOutside: (c) => c.preventDefault(),
            onInteractOutside: (c) => c.preventDefault(),
            children: [
              /* @__PURE__ */ i(I, { children: t }),
              /* @__PURE__ */ i(X, { contentRef: p })
            ]
          }
        ) })
      }
    );
  }
);
N.displayName = n;
var R = "AlertDialogTitle", C = s.forwardRef(
  (e, o) => {
    const { __scopeAlertDialog: r, ...t } = e, a = l(r);
    return /* @__PURE__ */ i(j, { ...a, ...t, ref: o });
  }
);
C.displayName = R;
var T = "AlertDialogDescription", E = s.forwardRef((e, o) => {
  const { __scopeAlertDialog: r, ...t } = e, a = l(r);
  return /* @__PURE__ */ i(B, { ...a, ...t, ref: o });
});
E.displayName = T;
var U = "AlertDialogAction", P = s.forwardRef(
  (e, o) => {
    const { __scopeAlertDialog: r, ...t } = e, a = l(r);
    return /* @__PURE__ */ i(f, { ...a, ...t, ref: o });
  }
);
P.displayName = U;
var S = "AlertDialogCancel", b = s.forwardRef(
  (e, o) => {
    const { __scopeAlertDialog: r, ...t } = e, { cancelRef: a } = Q(S, r), d = l(r), p = A(o, a);
    return /* @__PURE__ */ i(f, { ...d, ...t, ref: p });
  }
);
b.displayName = S;
var X = ({ contentRef: e }) => {
  const o = `\`${n}\` requires a description for the component to be accessible for screen reader users.

You can add a description to the \`${n}\` by passing a \`${T}\` component as a child, which also benefits sighted users by adding visible context to the dialog.

Alternatively, you can use your own component as a description by assigning it an \`id\` and passing the same value to the \`aria-describedby\` prop in \`${n}\`. If the description is confusing or duplicative for sighted users, you can use the \`@radix-ui/react-visually-hidden\` primitive as a wrapper around your description component.

For more information, see https://radix-ui.com/primitives/docs/components/alert-dialog`;
  return s.useEffect(() => {
    var t;
    document.getElementById(
      (t = e.current) == null ? void 0 : t.getAttribute("aria-describedby")
    ) || console.warn(o);
  }, [o, e]), null;
}, le = m, Z = h, ne = y, ce = _, pe = N, de = P, ge = b, ue = C, Ae = E;
const ve = ({
  text: e,
  theme: o,
  onOpen: r
}) => {
  const { theme: t } = q();
  return /* @__PURE__ */ i(Z, { asChild: !0, children: /* @__PURE__ */ i(k, { type: "button", theme: o ?? t, onClick: r, children: e }) });
};
export {
  ve as A,
  pe as C,
  Ae as D,
  ce as O,
  ne as P,
  le as R,
  ue as T,
  ge as a,
  de as b
};