dgz-ui
Version:
Custom ui library using React.js, Shadcn/ui, TailwindCSS, Typescript
210 lines (206 loc) • 6.82 kB
JavaScript
import { jsx as o, Fragment as H, jsxs as u } from "react/jsx-runtime";
import * as l from "react";
import { c as W, b as k } from "./index-BVqmUhu5.es.js";
import { u as A } from "./index-DLcqcWxM.es.js";
import { R as B, P as V, T as Y, c as D, C as v, W as q, a as J, D as K, O as Q, b as U } from "./index-xl-szYFX.es.js";
import { c as n } from "./utils-CnvKSirc.es.js";
import { b as N } from "./button-DTRIYqDb.es.js";
var X = Symbol("radix.slottable");
// @__NO_SIDE_EFFECTS__
function Z(a) {
const e = ({ children: t }) => /* @__PURE__ */ o(H, { children: t });
return e.displayName = `${a}.Slottable`, e.__radixId = X, e;
}
var y = "AlertDialog", [ee] = k(y, [
D
]), i = D(), _ = (a) => {
const { __scopeAlertDialog: e, ...t } = a, r = i(e);
return /* @__PURE__ */ o(B, { ...r, ...t, modal: !0 });
};
_.displayName = y;
var ae = "AlertDialogTrigger", b = l.forwardRef(
(a, e) => {
const { __scopeAlertDialog: t, ...r } = a, s = i(t);
return /* @__PURE__ */ o(Y, { ...s, ...r, ref: e });
}
);
b.displayName = ae;
var te = "AlertDialogPortal", R = (a) => {
const { __scopeAlertDialog: e, ...t } = a, r = i(e);
return /* @__PURE__ */ o(V, { ...r, ...t });
};
R.displayName = te;
var oe = "AlertDialogOverlay", h = l.forwardRef(
(a, e) => {
const { __scopeAlertDialog: t, ...r } = a, s = i(t);
return /* @__PURE__ */ o(Q, { ...s, ...r, ref: e });
}
);
h.displayName = oe;
var c = "AlertDialogContent", [re, le] = ee(c), se = /* @__PURE__ */ Z("AlertDialogContent"), x = l.forwardRef(
(a, e) => {
const { __scopeAlertDialog: t, children: r, ...s } = a, g = i(t), p = l.useRef(null), G = A(e, p), m = l.useRef(null);
return /* @__PURE__ */ o(
q,
{
contentName: c,
titleName: C,
docsSlug: "alert-dialog",
children: /* @__PURE__ */ o(re, { scope: t, cancelRef: m, children: /* @__PURE__ */ u(
J,
{
role: "alertdialog",
...g,
...s,
ref: G,
onOpenAutoFocus: W(s.onOpenAutoFocus, (d) => {
var f;
d.preventDefault(), (f = m.current) == null || f.focus({ preventScroll: !0 });
}),
onPointerDownOutside: (d) => d.preventDefault(),
onInteractOutside: (d) => d.preventDefault(),
children: [
/* @__PURE__ */ o(se, { children: r }),
/* @__PURE__ */ o(ne, { contentRef: p })
]
}
) })
}
);
}
);
x.displayName = c;
var C = "AlertDialogTitle", E = l.forwardRef(
(a, e) => {
const { __scopeAlertDialog: t, ...r } = a, s = i(t);
return /* @__PURE__ */ o(U, { ...s, ...r, ref: e });
}
);
E.displayName = C;
var S = "AlertDialogDescription", T = l.forwardRef((a, e) => {
const { __scopeAlertDialog: t, ...r } = a, s = i(t);
return /* @__PURE__ */ o(K, { ...s, ...r, ref: e });
});
T.displayName = S;
var ie = "AlertDialogAction", w = l.forwardRef(
(a, e) => {
const { __scopeAlertDialog: t, ...r } = a, s = i(t);
return /* @__PURE__ */ o(v, { ...s, ...r, ref: e });
}
);
w.displayName = ie;
var P = "AlertDialogCancel", O = l.forwardRef(
(a, e) => {
const { __scopeAlertDialog: t, ...r } = a, { cancelRef: s } = le(P, t), g = i(t), p = A(e, s);
return /* @__PURE__ */ o(v, { ...g, ...r, ref: p });
}
);
O.displayName = P;
var ne = ({ contentRef: a }) => {
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 \`${S}\` 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 l.useEffect(() => {
var r;
document.getElementById(
(r = a.current) == null ? void 0 : r.getAttribute("aria-describedby")
) || console.warn(e);
}, [e, a]), null;
}, ce = _, de = b, pe = R, $ = h, I = x, M = w, F = O, L = E, j = T;
const Ce = ce, Ee = de, ge = pe, z = l.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ o(
$,
{
className: n(
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80",
a
),
...e,
ref: t
}
));
z.displayName = $.displayName;
const me = l.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ u(ge, { children: [
/* @__PURE__ */ o(z, {}),
/* @__PURE__ */ o(
I,
{
ref: t,
className: n(
"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed top-[50%] left-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg",
a
),
...e
}
)
] }));
me.displayName = I.displayName;
const fe = ({
className: a,
...e
}) => /* @__PURE__ */ o(
"div",
{
className: n(
"flex flex-col space-y-2 text-center sm:text-left",
a
),
...e
}
);
fe.displayName = "AlertDialogHeader";
const ue = ({
className: a,
...e
}) => /* @__PURE__ */ o("div", { className: n("flex gap-2 sm:justify-end", a), ...e });
ue.displayName = "AlertDialogFooter";
const Ae = l.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ o(
L,
{
ref: t,
className: n("text-lg font-semibold", a),
...e
}
));
Ae.displayName = L.displayName;
const De = l.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ o(
j,
{
ref: t,
className: n("text-muted-foreground text-sm", a),
...e
}
));
De.displayName = j.displayName;
const ve = l.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ o(
M,
{
ref: t,
className: n(N(), a),
...e
}
));
ve.displayName = M.displayName;
const Ne = l.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ o(
F,
{
ref: t,
className: n(N({ variant: "tertiary" }), a),
...e
}
));
Ne.displayName = F.displayName;
export {
Ce as A,
ve as a,
Ne as b,
me as c,
De as d,
ue as e,
fe as f,
z as g,
ge as h,
Ae as i,
Ee as j
};
//# sourceMappingURL=alert-dialog-BrCPhmhd.es.js.map