dgz-ui
Version:
Custom ui library using React.js, Shadcn/ui, TailwindCSS, Typescript
205 lines (201 loc) • 6.67 kB
JavaScript
import { j as o } from "./jsx-runtime-DS1N_tNq.js";
import * as s from "react";
import { c as G } from "./index-ljY4mZHt.js";
import { u } from "./index-DLcqcWxM.js";
import { c as A, R as H, P as W, T as k, O as V, W as Y, a as q, b as B, D as J, C as D } from "./index-C4qYhCZt.js";
import { c as K } from "./index-DljuG5oz.js";
import { a as Q } from "./index-Dq2jN6bR.js";
import { b as v } from "./button-CdZDBhmr.js";
import { c as n } from "./utils-B6fNqzRf.js";
var N = "AlertDialog", [U, be] = G(N, [
A
]), i = A(), y = (e) => {
const { __scopeAlertDialog: a, ...t } = e, r = i(a);
return /* @__PURE__ */ o.jsx(H, { ...r, ...t, modal: !0 });
};
y.displayName = N;
var X = "AlertDialogTrigger", x = s.forwardRef(
(e, a) => {
const { __scopeAlertDialog: t, ...r } = e, l = i(t);
return /* @__PURE__ */ o.jsx(k, { ...l, ...r, ref: a });
}
);
x.displayName = X;
var Z = "AlertDialogPortal", R = (e) => {
const { __scopeAlertDialog: a, ...t } = e, r = i(a);
return /* @__PURE__ */ o.jsx(W, { ...r, ...t });
};
R.displayName = Z;
var ee = "AlertDialogOverlay", j = s.forwardRef(
(e, a) => {
const { __scopeAlertDialog: t, ...r } = e, l = i(t);
return /* @__PURE__ */ o.jsx(V, { ...l, ...r, ref: a });
}
);
j.displayName = ee;
var c = "AlertDialogContent", [ae, te] = U(c), oe = Q("AlertDialogContent"), _ = s.forwardRef(
(e, a) => {
const { __scopeAlertDialog: t, children: r, ...l } = e, g = i(t), p = s.useRef(null), L = u(a, p), m = s.useRef(null);
return /* @__PURE__ */ o.jsx(
Y,
{
contentName: c,
titleName: b,
docsSlug: "alert-dialog",
children: /* @__PURE__ */ o.jsx(ae, { scope: t, cancelRef: m, children: /* @__PURE__ */ o.jsxs(
q,
{
role: "alertdialog",
...g,
...l,
ref: L,
onOpenAutoFocus: K(l.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.jsx(oe, { children: r }),
/* @__PURE__ */ o.jsx(se, { contentRef: p })
]
}
) })
}
);
}
);
_.displayName = c;
var b = "AlertDialogTitle", h = s.forwardRef(
(e, a) => {
const { __scopeAlertDialog: t, ...r } = e, l = i(t);
return /* @__PURE__ */ o.jsx(B, { ...l, ...r, ref: a });
}
);
h.displayName = b;
var C = "AlertDialogDescription", w = s.forwardRef((e, a) => {
const { __scopeAlertDialog: t, ...r } = e, l = i(t);
return /* @__PURE__ */ o.jsx(J, { ...l, ...r, ref: a });
});
w.displayName = C;
var re = "AlertDialogAction", E = s.forwardRef(
(e, a) => {
const { __scopeAlertDialog: t, ...r } = e, l = i(t);
return /* @__PURE__ */ o.jsx(D, { ...l, ...r, ref: a });
}
);
E.displayName = re;
var P = "AlertDialogCancel", S = s.forwardRef(
(e, a) => {
const { __scopeAlertDialog: t, ...r } = e, { cancelRef: l } = te(P, t), g = i(t), p = u(a, l);
return /* @__PURE__ */ o.jsx(D, { ...g, ...r, ref: p });
}
);
S.displayName = P;
var se = ({ contentRef: e }) => {
const a = `\`${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 \`${C}\` 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 s.useEffect(() => {
var r;
document.getElementById(
(r = e.current) == null ? void 0 : r.getAttribute("aria-describedby")
) || console.warn(a);
}, [a, e]), null;
}, le = y, ie = x, ne = R, T = j, O = _, $ = E, M = S, I = h, F = w;
const he = le, Ce = ie, ce = ne, z = s.forwardRef(({ className: e, ...a }, t) => /* @__PURE__ */ o.jsx(
T,
{
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",
e
),
...a,
ref: t
}
));
z.displayName = T.displayName;
const de = s.forwardRef(({ className: e, ...a }, t) => /* @__PURE__ */ o.jsxs(ce, { children: [
/* @__PURE__ */ o.jsx(z, {}),
/* @__PURE__ */ o.jsx(
O,
{
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",
e
),
...a
}
)
] }));
de.displayName = O.displayName;
const pe = ({
className: e,
...a
}) => /* @__PURE__ */ o.jsx(
"div",
{
className: n(
"flex flex-col space-y-2 text-center sm:text-left",
e
),
...a
}
);
pe.displayName = "AlertDialogHeader";
const ge = ({
className: e,
...a
}) => /* @__PURE__ */ o.jsx("div", { className: n("flex gap-2 sm:justify-end", e), ...a });
ge.displayName = "AlertDialogFooter";
const me = s.forwardRef(({ className: e, ...a }, t) => /* @__PURE__ */ o.jsx(
I,
{
ref: t,
className: n("text-lg font-semibold", e),
...a
}
));
me.displayName = I.displayName;
const fe = s.forwardRef(({ className: e, ...a }, t) => /* @__PURE__ */ o.jsx(
F,
{
ref: t,
className: n("text-muted-foreground text-sm", e),
...a
}
));
fe.displayName = F.displayName;
const ue = s.forwardRef(({ className: e, ...a }, t) => /* @__PURE__ */ o.jsx(
$,
{
ref: t,
className: n(v(), e),
...a
}
));
ue.displayName = $.displayName;
const Ae = s.forwardRef(({ className: e, ...a }, t) => /* @__PURE__ */ o.jsx(
M,
{
ref: t,
className: n(v({ variant: "tertiary" }), e),
...a
}
));
Ae.displayName = M.displayName;
export {
he as A,
ce as a,
z as b,
Ce as c,
de as d,
pe as e,
ge as f,
me as g,
fe as h,
ue as i,
Ae as j
};