@acronis-platform/ui-react 3.0.0 → 4.1.0

package/dist/components/ui/dialog/dialog.js

@@ -1,313 +1,232 @@
-import { jsx as o, jsxs as c, Fragment as D } from "react/jsx-runtime";
-import * as n from "react";
-import { Dialog as i } from "@base-ui/react/dialog";
-import { TimesIcon as $ } from "@acronis-platform/icons-react/stroke-mono";
-import { cva as E } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
-import { cn as l } from "../../../lib/utils.js";
-import { usePortalContainer as H } from "../../../lib/portal-container.js";
-import { DialogFooterDefault as _ } from "../dialog-footer-default/dialog-footer-default.js";
-import { Loading as U } from "../loading/loading.js";
-import { InputText as Y } from "../input-text/input-text.js";
-import { Button as y } from "../button/button.js";
-const q = E(
-  "fixed left-1/2 top-1/2 z-50 flex max-h-[calc(100dvh-96px)] w-full min-w-[var(--ui-dialog-container-width-min)] -translate-x-1/2 -translate-y-1/2 flex-col overflow-hidden rounded-[var(--ui-dialog-container-border-radius)] bg-[var(--ui-dialog-container-color)] text-foreground shadow-lg duration-200 data-[open]:animate-in data-[open]:fade-in-0 data-[open]:zoom-in-95 data-[closed]:animate-out data-[closed]:fade-out-0 data-[closed]:zoom-out-95",
-  {
-    variants: {
-      size: {
-        sm: "max-w-[min(var(--ui-dialog-container-size-sm),calc(100dvw-96px))]",
-        large: "max-w-[min(832px,calc(100dvw-96px))]"
-      }
-    },
-    defaultVariants: {
-      size: "sm"
-    }
-  }
-), J = i.Root;
-i.Trigger;
-i.Portal;
-const x = i.Close, w = n.forwardRef(({ className: e, ...a }, r) => /* @__PURE__ */ o(
-  i.Backdrop,
-  {
-    ref: r,
-    className: l(
-      "fixed inset-0 z-50 bg-[var(--ui-background-backdrop-screen)] duration-200 data-[open]:animate-in data-[open]:fade-in-0 data-[closed]:animate-out data-[closed]:fade-out-0",
-      e
-    ),
-    ...a
-  }
-));
-w.displayName = "DialogOverlay";
-const C = n.forwardRef(
-  ({
-    className: e,
-    children: a,
-    size: r,
-    portal: d = !0,
-    portalContainer: s,
-    keepMounted: p,
-    ...g
-  }, m) => {
-    const b = H(), f = s ?? b, u = /* @__PURE__ */ c(D, { children: [
-      /* @__PURE__ */ o(w, {}),
-      /* @__PURE__ */ o(
-        i.Popup,
-        {
-          ref: m,
-          className: l(q({ size: r }), e),
-          ...g,
-          children: a
-        }
-      )
-    ] });
-    return d ? /* @__PURE__ */ o(i.Portal, { container: f, keepMounted: p, children: u }) : u;
-  }
-);
-C.displayName = "DialogContent";
-const K = n.forwardRef(({ className: e, ...a }, r) => /* @__PURE__ */ o(
-  "div",
-  {
-    ref: r,
-    className: l(
-      "flex h-16 items-center gap-4 border-b border-border bg-background px-5 py-4",
-      e
-    ),
-    ...a
-  }
-));
-K.displayName = "DialogHeaderRoot";
-const M = n.forwardRef(({ className: e, ...a }, r) => /* @__PURE__ */ o(
-  "div",
-  {
-    ref: r,
-    className: l(
-      "flex h-16 items-center justify-end gap-4 border-t border-border bg-background px-6 py-4",
-      e
-    ),
-    ...a
-  }
-));
-M.displayName = "DialogFooterRoot";
-const Q = n.forwardRef(({ className: e, ...a }, r) => /* @__PURE__ */ o("div", { ref: r, className: l("flex-1 overflow-auto p-6", e), ...a }));
-Q.displayName = "DialogBodyRoot";
-const v = n.forwardRef(({ className: e, ...a }, r) => /* @__PURE__ */ o(
-  i.Title,
-  {
-    ref: r,
-    className: l(
-      "flex-1 text-2xl font-normal leading-8 text-foreground",
-      e
-    ),
-    ...a
-  }
-));
-v.displayName = "DialogTitle";
-const W = n.forwardRef(({ className: e, ...a }, r) => /* @__PURE__ */ o(
-  i.Description,
-  {
-    ref: r,
-    className: l("text-sm text-muted-foreground", e),
-    ...a
-  }
-));
-W.displayName = "DialogDescription";
-const N = n.forwardRef(({ className: e, closeLabel: a = "Close", ...r }, d) => /* @__PURE__ */ c(
-  i.Close,
-  {
-    ref: d,
-    className: l(
-      "cursor-pointer rounded p-1 text-[var(--ui-button-icon-global-icon-color-idle)] transition-colors hover:bg-[var(--ui-button-icon-global-container-color-hover)] hover:text-[var(--ui-button-icon-global-icon-color-hover)] active:bg-[var(--ui-button-icon-global-container-color-active)] active:text-[var(--ui-button-icon-global-icon-color-active)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-primary)] disabled:pointer-events-none disabled:cursor-default disabled:text-[var(--ui-button-icon-global-icon-color-disabled)]",
-      e
-    ),
-    ...r,
-    children: [
-      /* @__PURE__ */ o($, { size: 24 }),
-      /* @__PURE__ */ o("span", { className: "sr-only", children: a })
-    ]
-  }
-));
-N.displayName = "DialogCloseButton";
-function X({ title: e, closeLabel: a }) {
-  return /* @__PURE__ */ c("div", { className: "flex h-[var(--ui-dialog-header-height)] shrink-0 items-center gap-[var(--ui-dialog-header-gap)] border-b-[length:var(--ui-dialog-header-border-width)] border-[var(--ui-dialog-header-border-color)] bg-[var(--ui-dialog-header-color)] px-[var(--ui-dialog-header-padding-x)]", children: [
-    /* @__PURE__ */ o(v, { children: e }),
-    /* @__PURE__ */ o(N, { closeLabel: a })
-  ] });
+import { cn as e } from "../../../lib/utils.js";
+import { usePortalContainer as t } from "../../../lib/portal-container.js";
+import { cva as n } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
+import { Button as r } from "../button/button.js";
+import { DialogFooterDefault as i } from "../dialog-footer-default/dialog-footer-default.js";
+import { InputText as a } from "../input-text/input-text.js";
+import { Loading as o } from "../loading/loading.js";
+import * as s from "react";
+import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
+import { TimesIcon as d } from "@acronis-platform/icons-react/stroke-mono";
+import { Dialog as f } from "@base-ui/react/dialog";
+//#region src/components/ui/dialog/dialog.tsx
+var p = n("fixed left-1/2 top-1/2 z-50 flex max-h-[calc(100dvh-96px)] w-full min-w-[var(--ui-dialog-container-width-min)] -translate-x-1/2 -translate-y-1/2 flex-col overflow-hidden rounded-[var(--ui-dialog-container-border-radius)] bg-[var(--ui-dialog-container-color)] text-foreground shadow-lg duration-200 data-[open]:animate-in data-[open]:fade-in-0 data-[open]:zoom-in-95 data-[closed]:animate-out data-[closed]:fade-out-0 data-[closed]:zoom-out-95", {
+	variants: { size: {
+		sm: "max-w-[min(var(--ui-dialog-container-size-sm),calc(100dvw-96px))]",
+		large: "max-w-[min(832px,calc(100dvw-96px))]"
+	} },
+	defaultVariants: { size: "sm" }
+}), m = f.Root;
+f.Trigger, f.Portal;
+var h = f.Close, g = s.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ l(f.Backdrop, {
+	ref: r,
+	className: e("fixed inset-0 z-50 bg-[var(--ui-background-backdrop-screen)] duration-200 data-[open]:animate-in data-[open]:fade-in-0 data-[closed]:animate-out data-[closed]:fade-out-0", t),
+	...n
+}));
+g.displayName = "DialogOverlay";
+var _ = s.forwardRef(({ className: n, children: r, size: i, portal: a = !0, portalContainer: o, keepMounted: s, ...d }, m) => {
+	let h = t(), _ = o ?? h, v = /* @__PURE__ */ u(c, { children: [/* @__PURE__ */ l(g, {}), /* @__PURE__ */ l(f.Popup, {
+		ref: m,
+		className: e(p({ size: i }), n),
+		...d,
+		children: r
+	})] });
+	return a ? /* @__PURE__ */ l(f.Portal, {
+		container: _,
+		keepMounted: s,
+		children: v
+	}) : v;
+});
+_.displayName = "DialogContent";
+var v = s.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ l("div", {
+	ref: r,
+	className: e("flex h-16 items-center gap-4 border-b border-border bg-background px-5 py-4", t),
+	...n
+}));
+v.displayName = "DialogHeaderRoot";
+var y = s.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ l("div", {
+	ref: r,
+	className: e("flex h-16 items-center justify-end gap-4 border-t border-border bg-background px-6 py-4", t),
+	...n
+}));
+y.displayName = "DialogFooterRoot";
+var b = s.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ l("div", {
+	ref: r,
+	className: e("flex-1 overflow-auto p-6", t),
+	...n
+}));
+b.displayName = "DialogBodyRoot";
+var x = s.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ l(f.Title, {
+	ref: r,
+	className: e("flex-1 text-2xl font-normal leading-8 text-foreground", t),
+	...n
+}));
+x.displayName = "DialogTitle";
+var S = s.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ l(f.Description, {
+	ref: r,
+	className: e("text-sm text-muted-foreground", t),
+	...n
+}));
+S.displayName = "DialogDescription";
+var C = s.forwardRef(({ className: t, closeLabel: n = "Close", ...r }, i) => /* @__PURE__ */ u(f.Close, {
+	ref: i,
+	className: e("cursor-pointer rounded p-1 text-[var(--ui-button-icon-global-icon-color-idle)] transition-colors hover:bg-[var(--ui-button-icon-global-container-color-hover)] hover:text-[var(--ui-button-icon-global-icon-color-hover)] active:bg-[var(--ui-button-icon-global-container-color-active)] active:text-[var(--ui-button-icon-global-icon-color-active)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-primary)] disabled:pointer-events-none disabled:cursor-default disabled:text-[var(--ui-button-icon-global-icon-color-disabled)]", t),
+	...r,
+	children: [/* @__PURE__ */ l(d, { size: 24 }), /* @__PURE__ */ l("span", {
+		className: "sr-only",
+		children: n
+	})]
+}));
+C.displayName = "DialogCloseButton";
+function w({ title: e, closeLabel: t }) {
+	return /* @__PURE__ */ u("div", {
+		className: "flex h-[var(--ui-dialog-header-height)] shrink-0 items-center gap-[var(--ui-dialog-header-gap)] border-b-[length:var(--ui-dialog-header-border-width)] border-[var(--ui-dialog-header-border-color)] bg-[var(--ui-dialog-header-color)] px-[var(--ui-dialog-header-padding-x)]",
+		children: [/* @__PURE__ */ l(x, { children: e }), /* @__PURE__ */ l(C, { closeLabel: t })]
+	});
 }
-function Z({ children: e, inert: a }) {
-  return /* @__PURE__ */ o(
-    "div",
-    {
-      inert: a,
-      className: "flex min-h-[var(--ui-dialog-body-height-min)] flex-col justify-center-safe gap-[var(--ui-dialog-body-gap)] overflow-y-auto px-4 py-[var(--ui-dialog-body-padding-y)]",
-      children: typeof e == "string" ? /* @__PURE__ */ o("p", { className: "text-sm leading-6 text-foreground", children: e }) : e
-    }
-  );
+function T({ children: e, inert: t }) {
+	return /* @__PURE__ */ l("div", {
+		inert: t,
+		className: "flex min-h-[var(--ui-dialog-body-height-min)] flex-col justify-center-safe gap-[var(--ui-dialog-body-gap)] overflow-y-auto px-4 py-[var(--ui-dialog-body-padding-y)]",
+		children: typeof e == "string" ? /* @__PURE__ */ l("p", {
+			className: "text-sm leading-6 text-foreground",
+			children: e
+		}) : e
+	});
 }
-function ee({
-  secondaryLabel: e,
-  primaryLabel: a,
-  primaryVariant: r,
-  primaryCloses: d,
-  onPrimaryAction: s
-}) {
-  return /* @__PURE__ */ c(D, { children: [
-    e && /* @__PURE__ */ o(x, { render: /* @__PURE__ */ o(y, { variant: "secondary", children: e }) }),
-    d ? /* @__PURE__ */ o(
-      x,
-      {
-        onClick: s,
-        render: /* @__PURE__ */ o(y, { variant: r, children: a })
-      }
-    ) : /* @__PURE__ */ o(y, { variant: r, onClick: s, children: a })
-  ] });
+function E({ secondaryLabel: e, primaryLabel: t, primaryVariant: n, primaryCloses: i, onPrimaryAction: a }) {
+	return /* @__PURE__ */ u(c, { children: [e && /* @__PURE__ */ l(h, { render: /* @__PURE__ */ l(r, {
+		variant: "secondary",
+		children: e
+	}) }), i ? /* @__PURE__ */ l(h, {
+		onClick: a,
+		render: /* @__PURE__ */ l(r, {
+			variant: n,
+			children: t
+		})
+	}) : /* @__PURE__ */ l(r, {
+		variant: n,
+		onClick: a,
+		children: t
+	})] });
 }
-const ae = {
-  default: {
-    title: "Dialog title",
-    body: "Drop any content into this slot.",
-    secondaryLabel: "Cancel",
-    primaryLabel: "Label",
-    primaryVariant: "default"
-  },
-  rename: {
-    title: (e = "object name") => `Rename ${e}`,
-    // `objectName` prefills the field with the real current name; the field's
-    // accessible name (`objectNameLabel`) is separate — it's the label, not the value.
-    body: (e = "Current name", a = "Object name") => /* @__PURE__ */ o(Y, { "aria-label": a, defaultValue: e }),
-    secondaryLabel: "Cancel",
-    primaryLabel: "Rename",
-    primaryVariant: "default"
-  },
-  "save changes": {
-    title: "Save changes",
-    body: "You have unsaved changes. Do you want to save them before leaving?",
-    secondaryLabel: "Go back",
-    primaryLabel: "Save",
-    primaryVariant: "default"
-  },
-  "reset password": {
-    title: "Reset password",
-    body: "Further instructions will be sent to your email address.",
-    secondaryLabel: "Cancel",
-    primaryLabel: "Reset",
-    primaryVariant: "default"
-  },
-  "discard changes": {
-    title: "Discard changes",
-    body: (e = "Object name") => /* @__PURE__ */ c("p", { className: "text-sm leading-6 text-foreground", children: [
-      "Are you sure you want to discard the unsaved changes to",
-      " ",
-      /* @__PURE__ */ o("strong", { className: "font-semibold", children: e }),
-      "?"
-    ] }),
-    secondaryLabel: "Go back",
-    primaryLabel: "Confirm",
-    primaryVariant: "destructive"
-  },
-  accept: {
-    title: (e = "object name") => `Accept ${e}`,
-    body: "Click Accept to confirm that you have read, understood, and agree to the terms and conditions below.",
-    secondaryLabel: "Cancel",
-    primaryLabel: "Accept",
-    primaryVariant: "default"
-  },
-  "read-only": {
-    title: "License agreement",
-    body: "This is a read-only dialog used to view legal documents such as the License Agreement, EULA updates, Terms of Service, and other legal documents.",
-    primaryLabel: "Done",
-    primaryVariant: "default",
-    primaryCloses: !0
-  },
-  // No Figma preset — a legacy, free-form escape hatch (see the `footer` prop
-  // and the `Large` story). This fallback title/body/footer only renders if
-  // the caller supplies neither `footer` nor `title`/`children` — every real
-  // `wide` call site overrides them.
-  wide: {
-    title: "Dialog title",
-    body: "Drop any content into this slot.",
-    secondaryLabel: "Cancel",
-    primaryLabel: "Confirm",
-    primaryVariant: "default"
-  }
-}, oe = n.forwardRef(
-  ({
-    variant: e = "default",
-    hasLoading: a = !1,
-    loadingLabel: r,
-    hasHeader: d = !0,
-    hasFooter: s = !0,
-    children: p,
-    title: g,
-    objectName: m,
-    objectNameLabel: b,
-    secondaryLabel: f,
-    primaryLabel: u,
-    onPrimaryAction: L,
-    footer: R,
-    closeLabel: T,
-    size: V,
-    portal: k,
-    portalContainer: z,
-    keepMounted: A,
-    className: B,
-    ...j
-  }, S) => {
-    const t = ae[e], F = typeof t.title == "function" ? t.title(m) : t.title, O = typeof t.body == "function" ? t.body(m, b) : t.body, I = p ?? O, h = g ?? F, G = f ?? t.secondaryLabel, P = u ?? t.primaryLabel;
-    return /* @__PURE__ */ o(J, { ...j, children: /* @__PURE__ */ c(
-      C,
-      {
-        ref: S,
-        size: V ?? (e === "wide" ? "large" : "sm"),
-        portal: k,
-        portalContainer: z,
-        keepMounted: A,
-        className: B,
-        "aria-busy": a || void 0,
-        children: [
-          d ? /* @__PURE__ */ o(X, { title: h, closeLabel: T }) : (
-            // Header hidden, but the dialog still needs an accessible name.
-            /* @__PURE__ */ o(v, { className: "sr-only", children: h })
-          ),
-          /* @__PURE__ */ o(Z, { inert: a, children: I }),
-          s && /* @__PURE__ */ o(_, { inert: a, children: R ?? /* @__PURE__ */ o(
-            ee,
-            {
-              secondaryLabel: G,
-              primaryLabel: P,
-              primaryVariant: t.primaryVariant,
-              primaryCloses: t.primaryCloses,
-              onPrimaryAction: L
-            }
-          ) }),
-          a && /* @__PURE__ */ o(
-            U,
-            {
-              variant: "onSurfaceSecondary",
-              hasLabel: !1,
-              label: r,
-              className: l(
-                "absolute inset-x-0 bottom-0 rounded-none",
-                d ? "top-[var(--ui-dialog-header-height)]" : "top-0"
-              )
-            }
-          )
-        ]
-      }
-    ) });
-  }
-);
-oe.displayName = "Dialog";
-export {
-  oe as Dialog,
-  Q as DialogBodyRoot,
-  x as DialogClose,
-  N as DialogCloseButton,
-  C as DialogContent,
-  W as DialogDescription,
-  M as DialogFooterRoot,
-  K as DialogHeaderRoot,
-  w as DialogOverlay,
-  J as DialogRoot,
-  v as DialogTitle,
-  q as dialogContentVariants
-};
-//# sourceMappingURL=dialog.js.map
+var D = {
+	default: {
+		title: "Dialog title",
+		body: "Drop any content into this slot.",
+		secondaryLabel: "Cancel",
+		primaryLabel: "Label",
+		primaryVariant: "default"
+	},
+	rename: {
+		title: (e = "object name") => `Rename ${e}`,
+		body: (e = "Current name", t = "Object name") => /* @__PURE__ */ l(a, {
+			"aria-label": t,
+			defaultValue: e
+		}),
+		secondaryLabel: "Cancel",
+		primaryLabel: "Rename",
+		primaryVariant: "default"
+	},
+	"save changes": {
+		title: "Save changes",
+		body: "You have unsaved changes. Do you want to save them before leaving?",
+		secondaryLabel: "Go back",
+		primaryLabel: "Save",
+		primaryVariant: "default"
+	},
+	"reset password": {
+		title: "Reset password",
+		body: "Further instructions will be sent to your email address.",
+		secondaryLabel: "Cancel",
+		primaryLabel: "Reset",
+		primaryVariant: "default"
+	},
+	"discard changes": {
+		title: "Discard changes",
+		body: (e = "Object name") => /* @__PURE__ */ u("p", {
+			className: "text-sm leading-6 text-foreground",
+			children: [
+				"Are you sure you want to discard the unsaved changes to",
+				" ",
+				/* @__PURE__ */ l("strong", {
+					className: "font-semibold",
+					children: e
+				}),
+				"?"
+			]
+		}),
+		secondaryLabel: "Go back",
+		primaryLabel: "Confirm",
+		primaryVariant: "destructive"
+	},
+	accept: {
+		title: (e = "object name") => `Accept ${e}`,
+		body: "Click Accept to confirm that you have read, understood, and agree to the terms and conditions below.",
+		secondaryLabel: "Cancel",
+		primaryLabel: "Accept",
+		primaryVariant: "default"
+	},
+	"read-only": {
+		title: "License agreement",
+		body: "This is a read-only dialog used to view legal documents such as the License Agreement, EULA updates, Terms of Service, and other legal documents.",
+		primaryLabel: "Done",
+		primaryVariant: "default",
+		primaryCloses: !0
+	},
+	wide: {
+		title: "Dialog title",
+		body: "Drop any content into this slot.",
+		secondaryLabel: "Cancel",
+		primaryLabel: "Confirm",
+		primaryVariant: "default"
+	}
+}, O = s.forwardRef(({ variant: t = "default", hasLoading: n = !1, loadingLabel: r, hasHeader: a = !0, hasFooter: s = !0, children: c, title: d, objectName: f, objectNameLabel: p, secondaryLabel: h, primaryLabel: g, onPrimaryAction: v, footer: y, closeLabel: b, size: S, portal: C, portalContainer: O, keepMounted: k, className: A, ...j }, M) => {
+	let N = D[t], P = typeof N.title == "function" ? N.title(f) : N.title, F = typeof N.body == "function" ? N.body(f, p) : N.body, I = c ?? F, L = d ?? P, R = h ?? N.secondaryLabel, z = g ?? N.primaryLabel, B = S ?? (t === "wide" ? "large" : "sm");
+	return /* @__PURE__ */ l(m, {
+		...j,
+		children: /* @__PURE__ */ u(_, {
+			ref: M,
+			size: B,
+			portal: C,
+			portalContainer: O,
+			keepMounted: k,
+			className: A,
+			"aria-busy": n || void 0,
+			children: [
+				a ? /* @__PURE__ */ l(w, {
+					title: L,
+					closeLabel: b
+				}) : /* @__PURE__ */ l(x, {
+					className: "sr-only",
+					children: L
+				}),
+				/* @__PURE__ */ l(T, {
+					inert: n,
+					children: I
+				}),
+				s && /* @__PURE__ */ l(i, {
+					inert: n,
+					children: y ?? /* @__PURE__ */ l(E, {
+						secondaryLabel: R,
+						primaryLabel: z,
+						primaryVariant: N.primaryVariant,
+						primaryCloses: N.primaryCloses,
+						onPrimaryAction: v
+					})
+				}),
+				n && /* @__PURE__ */ l(o, {
+					variant: "onSurfaceSecondary",
+					hasLabel: !1,
+					label: r,
+					className: e("absolute inset-x-0 bottom-0 rounded-none", a ? "top-[var(--ui-dialog-header-height)]" : "top-0")
+				})
+			]
+		})
+	});
+});
+O.displayName = "Dialog";
+//#endregion
+export { O as Dialog, b as DialogBodyRoot, h as DialogClose, C as DialogCloseButton, _ as DialogContent, S as DialogDescription, y as DialogFooterRoot, v as DialogHeaderRoot, g as DialogOverlay, m as DialogRoot, x as DialogTitle, p as dialogContentVariants };
+
+//# sourceMappingURL=dialog.js.map