@konstructio/ui/dist/AlertDialogTrigger-C2GlLI2j.js

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

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

You can add a description to the \`${c}\` by passing a \`${h}\` 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 \`${c}\`. 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 i.useEffect(() => {
    document.getElementById(r.current?.getAttribute("aria-describedby")) || console.warn(e);
  }, [e, r]), null;
}, de = m, oe = D, ge = _, ue = y, Ae = N, fe = C, ve = b, me = S, De = E, _e = Y(({ "data-theme": r, className: e, text: o, variant: a, onOpen: t, onClick: p }, n) => /* @__PURE__ */ l(oe, {
  asChild: !0,
  children: /* @__PURE__ */ l(W, {
    ref: n,
    type: "button",
    variant: a,
    "data-theme": r,
    className: O(e),
    onClick: () => {
      t(), p?.();
    },
    children: o
  })
}));
export {
  De as a,
  de as c,
  Ae as i,
  me as l,
  fe as n,
  ue as o,
  ve as r,
  ge as s,
  _e as t
};