@acronis-platform/ui-react 4.0.0 → 4.1.0

package/dist/components/ui/timer/timer.js

@@ -1,47 +1,24 @@
-import { jsxs as d, jsx as e } from "react/jsx-runtime";
-import * as m from "react";
-import { cn as i } from "../../../lib/utils.js";
-import { ButtonGroup as c } from "../button-group/button-group.js";
-const u = m.forwardRef(
-  ({ className: t, value: o, children: r, actionsLabel: n = "Timer actions", ...a }, l) => /* @__PURE__ */ d(
-    "div",
-    {
-      ref: l,
-      className: i(
-        // `overflow-hidden` clips the trailing action's hover fill and inset
-        // focus ring to the container's radius — the same reason ButtonGroup
-        // needs it, one level up.
-        "inline-flex h-[var(--ui-timer-container-height)] w-fit items-center overflow-hidden",
-        "rounded-[var(--ui-timer-container-radius)] bg-[var(--ui-timer-container-color)]",
-        "border-[length:var(--ui-timer-container-border-width)] border-[color:var(--ui-timer-container-border-color)] [border-style:var(--ui-timer-container-border-style)]",
-        t
-      ),
-      ...a,
-      children: [
-        /* @__PURE__ */ e(
-          "div",
-          {
-            role: "timer",
-            className: i(
-              "ui-timer-value-text-style flex h-full shrink-0 items-center whitespace-nowrap",
-              "px-[var(--ui-timer-content-box-padding-x)] text-[var(--ui-timer-value-color)]",
-              "[font-variant-numeric:var(--ui-timer-value-font-variant-numeric)]",
-              // The divider is the readout's own inline-end border, as in Figma,
-              // and is derived from the DOM rather than a prop: with no actions the
-              // readout is the last child and the border is dropped. `border-e-*`
-              // (not `border-r-*`) so it flips under `dir="rtl"`.
-              "border-e-[length:var(--ui-timer-content-box-divider-width)] border-[color:var(--ui-timer-content-box-divider-color)] [border-inline-end-style:var(--ui-timer-content-box-divider-style)] last:border-e-0"
-            ),
-            children: o
-          }
-        ),
-        r ? /* @__PURE__ */ e(c, { variant: "inlined", "aria-label": n, children: r }) : null
-      ]
-    }
-  )
-);
-u.displayName = "Timer";
-export {
-  u as Timer
-};
-//# sourceMappingURL=timer.js.map
+import { cn as e } from "../../../lib/utils.js";
+import { ButtonGroup as t } from "../button-group/button-group.js";
+import * as n from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/ui/timer/timer.tsx
+var a = n.forwardRef(({ className: n, value: a, children: o, actionsLabel: s = "Timer actions", ...c }, l) => /* @__PURE__ */ i("div", {
+	ref: l,
+	className: e("inline-flex h-[var(--ui-timer-container-height)] w-fit items-center overflow-hidden", "rounded-[var(--ui-timer-container-radius)] bg-[var(--ui-timer-container-color)]", "border-[length:var(--ui-timer-container-border-width)] border-[color:var(--ui-timer-container-border-color)] [border-style:var(--ui-timer-container-border-style)]", n),
+	...c,
+	children: [/* @__PURE__ */ r("div", {
+		role: "timer",
+		className: e("ui-timer-value-text-style flex h-full shrink-0 items-center whitespace-nowrap", "px-[var(--ui-timer-content-box-padding-x)] text-[var(--ui-timer-value-color)]", "[font-variant-numeric:var(--ui-timer-value-font-variant-numeric)]", "border-e-[length:var(--ui-timer-content-box-divider-width)] border-[color:var(--ui-timer-content-box-divider-color)] [border-inline-end-style:var(--ui-timer-content-box-divider-style)] last:border-e-0"),
+		children: a
+	}), o ? /* @__PURE__ */ r(t, {
+		variant: "inlined",
+		"aria-label": s,
+		children: o
+	}) : null]
+}));
+a.displayName = "Timer";
+//#endregion
+export { a as Timer };
+
+//# sourceMappingURL=timer.js.map

package/dist/components/ui/timer/timer.js.map

@@ -1 +1 @@
-{"version":3,"file":"timer.js","sources":["../../../../src/components/ui/timer/timer.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { ButtonGroup } from '@/components/ui/button-group';\nimport { cn } from '@/lib/utils';\n\n// Mirrors the Figma \"Timer\" component (node 7987:25477): a bordered 32px pill\n// holding an elapsed-time readout, hairline-separated from a cluster of\n// icon-only actions.\n//\n// Figma models exactly two properties on it — `value` (TEXT) and the nested\n// ButtonGroup's `ListItem` slot — so that is the whole API: a required `value`\n// and variadic `children`. There is no variant axis and no design-defined\n// state, so no `cva` here.\n//\n// The action cluster is a real `ButtonGroup` with `variant=\"inlined\"` (the\n// design instantiates it exactly that way) because the Timer container already\n// draws the border and radius an `outlined` group would duplicate. Composing it\n// rather than re-implementing the item box keeps the separators, the roving\n// tabindex, and the hover/active/focus fills in one place — which is also why\n// the actions are plain `ButtonGroupItem` children rather than a Timer-specific\n// alias of it.\n//\n// The Timer does NOT tick: it renders whatever it is given. Formatting and the\n// interval belong to the consumer, who owns the clock the actions operate on.\n\nexport interface TimerProps\n  extends Omit<React.ComponentPropsWithoutRef<'div'>, 'children'> {\n  /**\n   * The formatted time to display, e.g. `\"12:01:45\"`. Rendered with tabular\n   * figures so the readout doesn't jitter as the digits change. The component\n   * neither ticks nor formats — pass an already-formatted value.\n   */\n  value: React.ReactNode;\n  /**\n   * The actions, as `ButtonGroupItem` elements in visual order. Omit them for a\n   * read-only readout — with no actions the divider is dropped too.\n   */\n  children?: React.ReactNode;\n  /**\n   * Accessible name for the action cluster's toolbar. Localize it; the default\n   * is English.\n   */\n  actionsLabel?: string;\n}\n\n/**\n * An elapsed-time readout paired with a cluster of icon-only actions.\n *\n * The readout is a `role=\"timer\"` live region — implicitly `aria-live=\"off\"`,\n * so it is not announced on every tick. Each action needs its own accessible\n * name; the cluster as a whole is named by `actionsLabel`.\n */\nconst Timer = React.forwardRef<HTMLDivElement, TimerProps>(\n  (\n    { className, value, children, actionsLabel = 'Timer actions', ...props },\n    ref\n  ) => (\n    <div\n      ref={ref}\n      className={cn(\n        // `overflow-hidden` clips the trailing action's hover fill and inset\n        // focus ring to the container's radius — the same reason ButtonGroup\n        // needs it, one level up.\n        'inline-flex h-[var(--ui-timer-container-height)] w-fit items-center overflow-hidden',\n        'rounded-[var(--ui-timer-container-radius)] bg-[var(--ui-timer-container-color)]',\n        'border-[length:var(--ui-timer-container-border-width)] border-[color:var(--ui-timer-container-border-color)] [border-style:var(--ui-timer-container-border-style)]',\n        className\n      )}\n      {...props}\n    >\n      <div\n        role=\"timer\"\n        className={cn(\n          'ui-timer-value-text-style flex h-full shrink-0 items-center whitespace-nowrap',\n          'px-[var(--ui-timer-content-box-padding-x)] text-[var(--ui-timer-value-color)]',\n          '[font-variant-numeric:var(--ui-timer-value-font-variant-numeric)]',\n          // The divider is the readout's own inline-end border, as in Figma,\n          // and is derived from the DOM rather than a prop: with no actions the\n          // readout is the last child and the border is dropped. `border-e-*`\n          // (not `border-r-*`) so it flips under `dir=\"rtl\"`.\n          'border-e-[length:var(--ui-timer-content-box-divider-width)] border-[color:var(--ui-timer-content-box-divider-color)] [border-inline-end-style:var(--ui-timer-content-box-divider-style)] last:border-e-0'\n        )}\n      >\n        {value}\n      </div>\n      {children ? (\n        <ButtonGroup variant=\"inlined\" aria-label={actionsLabel}>\n          {children}\n        </ButtonGroup>\n      ) : null}\n    </div>\n  )\n);\nTimer.displayName = 'Timer';\n\nexport { Timer };\n"],"names":["Timer","React","className","value","children","actionsLabel","props","ref","jsxs","cn","jsx","ButtonGroup"],"mappings":";;;;AAoDA,MAAMA,IAAQC,EAAM;AAAA,EAClB,CACE,EAAE,WAAAC,GAAW,OAAAC,GAAO,UAAAC,GAAU,cAAAC,IAAe,iBAAiB,GAAGC,KACjEC,MAEA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,WAAWE;AAAA;AAAA;AAAA;AAAA,QAIT;AAAA,QACA;AAAA,QACA;AAAA,QACAP;AAAA,MAAA;AAAA,MAED,GAAGI;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAI;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,WAAWD;AAAA,cACT;AAAA,cACA;AAAA,cACA;AAAA;AAAA;AAAA;AAAA;AAAA,cAKA;AAAA,YAAA;AAAA,YAGD,UAAAN;AAAA,UAAA;AAAA,QAAA;AAAA,QAEFC,sBACEO,GAAA,EAAY,SAAQ,WAAU,cAAYN,GACxC,UAAAD,GACH,IACE;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGV;AACAJ,EAAM,cAAc;"}
+{"version":3,"file":"timer.js","names":[],"sources":["../../../../src/components/ui/timer/timer.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { ButtonGroup } from '@/components/ui/button-group';\nimport { cn } from '@/lib/utils';\n\n// Mirrors the Figma \"Timer\" component (node 7987:25477): a bordered 32px pill\n// holding an elapsed-time readout, hairline-separated from a cluster of\n// icon-only actions.\n//\n// Figma models exactly two properties on it — `value` (TEXT) and the nested\n// ButtonGroup's `ListItem` slot — so that is the whole API: a required `value`\n// and variadic `children`. There is no variant axis and no design-defined\n// state, so no `cva` here.\n//\n// The action cluster is a real `ButtonGroup` with `variant=\"inlined\"` (the\n// design instantiates it exactly that way) because the Timer container already\n// draws the border and radius an `outlined` group would duplicate. Composing it\n// rather than re-implementing the item box keeps the separators, the roving\n// tabindex, and the hover/active/focus fills in one place — which is also why\n// the actions are plain `ButtonGroupItem` children rather than a Timer-specific\n// alias of it.\n//\n// The Timer does NOT tick: it renders whatever it is given. Formatting and the\n// interval belong to the consumer, who owns the clock the actions operate on.\n\nexport interface TimerProps\n  extends Omit<React.ComponentPropsWithoutRef<'div'>, 'children'> {\n  /**\n   * The formatted time to display, e.g. `\"12:01:45\"`. Rendered with tabular\n   * figures so the readout doesn't jitter as the digits change. The component\n   * neither ticks nor formats — pass an already-formatted value.\n   */\n  value: React.ReactNode;\n  /**\n   * The actions, as `ButtonGroupItem` elements in visual order. Omit them for a\n   * read-only readout — with no actions the divider is dropped too.\n   */\n  children?: React.ReactNode;\n  /**\n   * Accessible name for the action cluster's toolbar. Localize it; the default\n   * is English.\n   */\n  actionsLabel?: string;\n}\n\n/**\n * An elapsed-time readout paired with a cluster of icon-only actions.\n *\n * The readout is a `role=\"timer\"` live region — implicitly `aria-live=\"off\"`,\n * so it is not announced on every tick. Each action needs its own accessible\n * name; the cluster as a whole is named by `actionsLabel`.\n */\nconst Timer = React.forwardRef<HTMLDivElement, TimerProps>(\n  (\n    { className, value, children, actionsLabel = 'Timer actions', ...props },\n    ref\n  ) => (\n    <div\n      ref={ref}\n      className={cn(\n        // `overflow-hidden` clips the trailing action's hover fill and inset\n        // focus ring to the container's radius — the same reason ButtonGroup\n        // needs it, one level up.\n        'inline-flex h-[var(--ui-timer-container-height)] w-fit items-center overflow-hidden',\n        'rounded-[var(--ui-timer-container-radius)] bg-[var(--ui-timer-container-color)]',\n        'border-[length:var(--ui-timer-container-border-width)] border-[color:var(--ui-timer-container-border-color)] [border-style:var(--ui-timer-container-border-style)]',\n        className\n      )}\n      {...props}\n    >\n      <div\n        role=\"timer\"\n        className={cn(\n          'ui-timer-value-text-style flex h-full shrink-0 items-center whitespace-nowrap',\n          'px-[var(--ui-timer-content-box-padding-x)] text-[var(--ui-timer-value-color)]',\n          '[font-variant-numeric:var(--ui-timer-value-font-variant-numeric)]',\n          // The divider is the readout's own inline-end border, as in Figma,\n          // and is derived from the DOM rather than a prop: with no actions the\n          // readout is the last child and the border is dropped. `border-e-*`\n          // (not `border-r-*`) so it flips under `dir=\"rtl\"`.\n          'border-e-[length:var(--ui-timer-content-box-divider-width)] border-[color:var(--ui-timer-content-box-divider-color)] [border-inline-end-style:var(--ui-timer-content-box-divider-style)] last:border-e-0'\n        )}\n      >\n        {value}\n      </div>\n      {children ? (\n        <ButtonGroup variant=\"inlined\" aria-label={actionsLabel}>\n          {children}\n        </ButtonGroup>\n      ) : null}\n    </div>\n  )\n);\nTimer.displayName = 'Timer';\n\nexport { Timer };\n"],"mappings":";;;;;AAoDA,IAAM,IAAQ,EAAM,YAEhB,EAAE,cAAW,UAAO,aAAU,kBAAe,iBAAiB,GAAG,KACjE,MAEA,kBAAC,OAAD;CACO;CACL,WAAW,EAIT,uFACA,mFACA,sKACA,CACF;CACA,GAAI;CAXN,UAAA,CAaE,kBAAC,OAAD;EACE,MAAK;EACL,WAAW,EACT,iFACA,iFACA,qEAKA,0MACF;EAEC,UAAA;CACE,CAAA,GACJ,IACC,kBAAC,GAAD;EAAa,SAAQ;EAAU,cAAY;EACxC;CACU,CAAA,IACX,IACD;AAET,CAAA,CAAA;AACA,EAAM,cAAc"}

package/dist/components/ui/toast/toast.js

@@ -1,192 +1,137 @@
-import { jsx as o, jsxs as u } from "react/jsx-runtime";
-import { Toast as r } from "@base-ui/react/toast";
-import { cva as v } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
-import { TimesIcon as m } from "@acronis-platform/icons-react/stroke-mono";
-import { DiamondWarningRedIcon as x, CircleWarningOrangeIcon as w, TriangleWarningYellowIcon as y, CircleCheckGreenIcon as h, CircleInfoBlueIcon as C } from "@acronis-platform/icons-react/stroke-multi";
-import { cn as N } from "../../../lib/utils.js";
-import { usePortalContainer as T } from "../../../lib/portal-container.js";
-import { Spinner as I } from "../spinner/spinner.js";
-import { Button as k } from "../button/button.js";
-import { ButtonIcon as z } from "../button-icon/button-icon.js";
-const _ = v(
-  "relative flex w-full items-start overflow-clip [overflow-clip-margin:border-box] border-solid gap-[var(--ui-toast-global-container-gap)] px-[var(--ui-toast-global-container-padding-x)] py-[var(--ui-toast-global-container-padding-y)] rounded-[var(--ui-toast-global-container-border-radius)] border-[length:var(--ui-toast-global-container-border-width)] bg-[var(--ui-toast-global-container-background)] shadow-[var(--ui-toast-global-container-shadow)] before:absolute before:content-[''] before:-inset-y-px before:start-[-1px] before:w-[var(--ui-toast-global-container-status-width)]",
-  {
-    variants: {
-      variant: {
-        info: "border-[color:var(--ui-toast-info-border-color)] before:bg-[var(--ui-toast-info-left-line)]",
-        success: "border-[color:var(--ui-toast-success-border-color)] before:bg-[var(--ui-toast-success-left-line)]",
-        warning: "border-[color:var(--ui-toast-warning-border-color)] before:bg-[var(--ui-toast-warning-left-line)]",
-        critical: "border-[color:var(--ui-toast-critical-border-color)] before:bg-[var(--ui-toast-critical-left-line)]",
-        danger: "border-[color:var(--ui-toast-danger-border-color)] before:bg-[var(--ui-toast-danger-left-line)]"
-      }
-    },
-    defaultVariants: {
-      variant: "info"
-    }
-  }
-), B = {
-  info: C,
-  success: h,
-  warning: y,
-  critical: w,
-  danger: x
-}, P = {
-  info: "info",
-  success: "success",
-  warning: "warning",
-  critical: "critical",
-  danger: "danger",
-  error: "danger",
-  loading: "info"
-}, d = r.createToastManager();
-function s(t, a, n = {}) {
-  const { actions: i, dismissable: l, ...e } = n;
-  return d.add({
-    title: t,
-    type: a,
-    data: { actions: i, dismissable: l },
-    ...e
-  });
+"use client";
+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 { ButtonIcon as r } from "../button-icon/button-icon.js";
+import { Button as i } from "../button/button.js";
+import { Spinner as a } from "../spinner/spinner.js";
+import "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { TimesIcon as c } from "@acronis-platform/icons-react/stroke-mono";
+import { CircleCheckGreenIcon as l, CircleInfoBlueIcon as u, CircleWarningOrangeIcon as d, DiamondWarningRedIcon as f, TriangleWarningYellowIcon as p } from "@acronis-platform/icons-react/stroke-multi";
+import { Toast as m } from "@base-ui/react/toast";
+//#region src/components/ui/toast/toast.tsx
+var h = n("relative flex w-full items-start overflow-clip [overflow-clip-margin:border-box] border-solid gap-[var(--ui-toast-global-container-gap)] px-[var(--ui-toast-global-container-padding-x)] py-[var(--ui-toast-global-container-padding-y)] rounded-[var(--ui-toast-global-container-border-radius)] border-[length:var(--ui-toast-global-container-border-width)] bg-[var(--ui-toast-global-container-background)] shadow-[var(--ui-toast-global-container-shadow)] before:absolute before:content-[''] before:-inset-y-px before:start-[-1px] before:w-[var(--ui-toast-global-container-status-width)]", {
+	variants: { variant: {
+		info: "border-[color:var(--ui-toast-info-border-color)] before:bg-[var(--ui-toast-info-left-line)]",
+		success: "border-[color:var(--ui-toast-success-border-color)] before:bg-[var(--ui-toast-success-left-line)]",
+		warning: "border-[color:var(--ui-toast-warning-border-color)] before:bg-[var(--ui-toast-warning-left-line)]",
+		critical: "border-[color:var(--ui-toast-critical-border-color)] before:bg-[var(--ui-toast-critical-left-line)]",
+		danger: "border-[color:var(--ui-toast-danger-border-color)] before:bg-[var(--ui-toast-danger-left-line)]"
+	} },
+	defaultVariants: { variant: "info" }
+}), g = {
+	info: u,
+	success: l,
+	warning: p,
+	critical: d,
+	danger: f
+}, _ = {
+	info: "info",
+	success: "success",
+	warning: "warning",
+	critical: "critical",
+	danger: "danger",
+	error: "danger",
+	loading: "info"
+}, v = m.createToastManager();
+function y(e, t, n = {}) {
+	let { actions: r, dismissable: i, ...a } = n;
+	return v.add({
+		title: e,
+		type: t,
+		data: {
+			actions: r,
+			dismissable: i
+		},
+		...a
+	});
 }
-const G = Object.assign(
-  (t, a) => s(t, void 0, a),
-  {
-    info: (t, a) => s(t, "info", a),
-    success: (t, a) => s(t, "success", a),
-    warning: (t, a) => s(t, "warning", a),
-    critical: (t, a) => s(t, "critical", a),
-    danger: (t, a) => s(t, "danger", a),
-    loading: (t, a) => s(t, "loading", { timeout: 0, ...a }),
-    dismiss: (t) => d.close(t),
-    promise: d.promise
-  }
-);
-function S({ closeAriaLabel: t }) {
-  const { toasts: a } = r.useToastManager();
-  return a.map((n) => {
-    var b, p;
-    const i = P[n.type ?? ""] ?? "info", l = B[i], e = (b = n.data) == null ? void 0 : b.actions, c = ((p = n.data) == null ? void 0 : p.dismissable) ?? !0;
-    return /* @__PURE__ */ u(
-      r.Root,
-      {
-        toast: n,
-        "data-slot": "toast",
-        "data-variant": i,
-        swipeDirection: c ? void 0 : [],
-        className: N(
-          _({ variant: i }),
-          "transition-all data-[ending-style]:opacity-0 data-[starting-style]:opacity-0",
-          // The stack sits on the inline-end edge, so a toast slides in from the
-          // right in LTR and from the left in RTL.
-          "data-[ending-style]:translate-x-4 data-[starting-style]:translate-x-4",
-          "rtl:data-[ending-style]:-translate-x-4 rtl:data-[starting-style]:-translate-x-4"
-        ),
-        children: [
-          /* @__PURE__ */ o(
-            "div",
-            {
-              "data-slot": "toast-icon",
-              className: "flex shrink-0 items-start px-[var(--ui-toast-global-icon-padding-x)] py-[var(--ui-toast-global-icon-padding-y)] [&_svg]:size-[var(--ui-toast-global-icon-size)] [&_svg]:shrink-0",
-              children: n.type === "loading" ? /* @__PURE__ */ o(
-                I,
-                {
-                  size: "sm",
-                  className: "size-[var(--ui-toast-global-icon-size)]"
-                }
-              ) : /* @__PURE__ */ o(l, { size: 16 })
-            }
-          ),
-          /* @__PURE__ */ u(
-            "div",
-            {
-              "data-slot": "toast-content",
-              className: "flex min-w-0 flex-1 flex-col items-start gap-[var(--ui-toast-global-content-gap)] px-[var(--ui-toast-global-content-padding-x)] py-[var(--ui-toast-global-content-padding-y)]",
-              children: [
-                /* @__PURE__ */ u(
-                  "div",
-                  {
-                    "data-slot": "toast-text",
-                    className: "flex w-full shrink-0 flex-col items-start gap-[var(--ui-toast-global-content-text-container-gap)] px-[var(--ui-toast-global-content-text-container-padding-x)] py-[var(--ui-toast-global-content-text-container-padding-y)] [word-break:break-word]",
-                    children: [
-                      /* @__PURE__ */ o(
-                        r.Title,
-                        {
-                          "data-slot": "toast-title",
-                          render: /* @__PURE__ */ o("h5", {}),
-                          className: "ui-toast-global-content-text-container-title-text-style mb-0 w-full text-[var(--ui-toast-global-content-text-container-title-color)]"
-                        }
-                      ),
-                      n.description ? /* @__PURE__ */ o(
-                        r.Description,
-                        {
-                          "data-slot": "toast-description",
-                          className: "ui-toast-global-content-text-container-description-text-style line-clamp-3 w-full text-[var(--ui-toast-global-content-text-container-description-color)]"
-                        }
-                      ) : null
-                    ]
-                  }
-                ),
-                e != null && e.length ? /* @__PURE__ */ o(
-                  "div",
-                  {
-                    "data-slot": "toast-actions",
-                    className: "flex w-full shrink-0 flex-wrap content-start items-start gap-x-[var(--ui-toast-global-content-actions-container-gap-x)] gap-y-[var(--ui-toast-global-content-actions-container-gap-y)] px-[var(--ui-toast-global-content-actions-container-padding-x)] py-[var(--ui-toast-global-content-actions-container-padding-y)]",
-                    children: e.map((g, f) => /* @__PURE__ */ o(
-                      k,
-                      {
-                        variant: g.variant ?? (f === 0 ? "secondary" : "ghost"),
-                        onClick: g.onClick,
-                        children: g.label
-                      },
-                      f
-                    ))
-                  }
-                ) : null
-              ]
-            }
-          ),
-          c ? /* @__PURE__ */ o(
-            r.Close,
-            {
-              "aria-label": t,
-              "data-slot": "toast-close",
-              render: /* @__PURE__ */ o(z, { variant: "ghost", children: /* @__PURE__ */ o(m, {}) })
-            }
-          ) : null
-        ]
-      },
-      n.id
-    );
-  });
+var b = Object.assign((e, t) => y(e, void 0, t), {
+	info: (e, t) => y(e, "info", t),
+	success: (e, t) => y(e, "success", t),
+	warning: (e, t) => y(e, "warning", t),
+	critical: (e, t) => y(e, "critical", t),
+	danger: (e, t) => y(e, "danger", t),
+	loading: (e, t) => y(e, "loading", {
+		timeout: 0,
+		...t
+	}),
+	dismiss: (e) => v.close(e),
+	promise: v.promise
+});
+function x({ closeAriaLabel: t }) {
+	let { toasts: n } = m.useToastManager();
+	return n.map((n) => {
+		let l = _[n.type ?? ""] ?? "info", u = g[l], d = n.data?.actions, f = n.data?.dismissable ?? !0;
+		return /* @__PURE__ */ s(m.Root, {
+			toast: n,
+			"data-slot": "toast",
+			"data-variant": l,
+			swipeDirection: f ? void 0 : [],
+			className: e(h({ variant: l }), "transition-all data-[ending-style]:opacity-0 data-[starting-style]:opacity-0", "data-[ending-style]:translate-x-4 data-[starting-style]:translate-x-4", "rtl:data-[ending-style]:-translate-x-4 rtl:data-[starting-style]:-translate-x-4"),
+			children: [
+				/* @__PURE__ */ o("div", {
+					"data-slot": "toast-icon",
+					className: "flex shrink-0 items-start px-[var(--ui-toast-global-icon-padding-x)] py-[var(--ui-toast-global-icon-padding-y)] [&_svg]:size-[var(--ui-toast-global-icon-size)] [&_svg]:shrink-0",
+					children: n.type === "loading" ? /* @__PURE__ */ o(a, {
+						size: "sm",
+						className: "size-[var(--ui-toast-global-icon-size)]"
+					}) : /* @__PURE__ */ o(u, { size: 16 })
+				}),
+				/* @__PURE__ */ s("div", {
+					"data-slot": "toast-content",
+					className: "flex min-w-0 flex-1 flex-col items-start gap-[var(--ui-toast-global-content-gap)] px-[var(--ui-toast-global-content-padding-x)] py-[var(--ui-toast-global-content-padding-y)]",
+					children: [/* @__PURE__ */ s("div", {
+						"data-slot": "toast-text",
+						className: "flex w-full shrink-0 flex-col items-start gap-[var(--ui-toast-global-content-text-container-gap)] px-[var(--ui-toast-global-content-text-container-padding-x)] py-[var(--ui-toast-global-content-text-container-padding-y)] [word-break:break-word]",
+						children: [/* @__PURE__ */ o(m.Title, {
+							"data-slot": "toast-title",
+							render: /* @__PURE__ */ o("h5", {}),
+							className: "ui-toast-global-content-text-container-title-text-style mb-0 w-full text-[var(--ui-toast-global-content-text-container-title-color)]"
+						}), n.description ? /* @__PURE__ */ o(m.Description, {
+							"data-slot": "toast-description",
+							className: "ui-toast-global-content-text-container-description-text-style line-clamp-3 w-full text-[var(--ui-toast-global-content-text-container-description-color)]"
+						}) : null]
+					}), d?.length ? /* @__PURE__ */ o("div", {
+						"data-slot": "toast-actions",
+						className: "flex w-full shrink-0 flex-wrap content-start items-start gap-x-[var(--ui-toast-global-content-actions-container-gap-x)] gap-y-[var(--ui-toast-global-content-actions-container-gap-y)] px-[var(--ui-toast-global-content-actions-container-padding-x)] py-[var(--ui-toast-global-content-actions-container-padding-y)]",
+						children: d.map((e, t) => /* @__PURE__ */ o(i, {
+							variant: e.variant ?? (t === 0 ? "secondary" : "ghost"),
+							onClick: e.onClick,
+							children: e.label
+						}, t))
+					}) : null]
+				}),
+				f ? /* @__PURE__ */ o(m.Close, {
+					"aria-label": t,
+					"data-slot": "toast-close",
+					render: /* @__PURE__ */ o(r, {
+						variant: "ghost",
+						children: /* @__PURE__ */ o(c, {})
+					})
+				}) : null
+			]
+		}, n.id);
+	});
 }
-function L({
-  timeout: t,
-  limit: a,
-  label: n = "Notifications",
-  closeAriaLabel: i = "Close",
-  portalContainer: l
-}) {
-  const e = T(), c = l ?? e;
-  return /* @__PURE__ */ o(
-    r.Provider,
-    {
-      toastManager: d,
-      timeout: t,
-      limit: a,
-      children: /* @__PURE__ */ o(r.Portal, { container: c, children: /* @__PURE__ */ o(
-        r.Viewport,
-        {
-          "aria-label": n,
-          className: "fixed bottom-4 end-4 z-[100] flex w-[var(--ui-toast-global-container-width-min)] max-w-[calc(100vw-2rem)] flex-col gap-3 outline-none",
-          children: /* @__PURE__ */ o(S, { closeAriaLabel: i })
-        }
-      ) })
-    }
-  );
+function S({ timeout: e, limit: n, label: r = "Notifications", closeAriaLabel: i = "Close", portalContainer: a }) {
+	let s = t(), c = a ?? s;
+	return /* @__PURE__ */ o(m.Provider, {
+		toastManager: v,
+		timeout: e,
+		limit: n,
+		children: /* @__PURE__ */ o(m.Portal, {
+			container: c,
+			children: /* @__PURE__ */ o(m.Viewport, {
+				"aria-label": r,
+				className: "fixed bottom-4 end-4 z-[100] flex w-[var(--ui-toast-global-container-width-min)] max-w-[calc(100vw-2rem)] flex-col gap-3 outline-none",
+				children: /* @__PURE__ */ o(x, { closeAriaLabel: i })
+			})
+		})
+	});
 }
-export {
-  L as Toaster,
-  G as toast,
-  _ as toastVariants
-};
-//# sourceMappingURL=toast.js.map
+//#endregion
+export { S as Toaster, b as toast, h as toastVariants };
+
+//# sourceMappingURL=toast.js.map

package/dist/components/ui/toast/toast.js.map

@@ -1 +1 @@
-{"version":3,"file":"toast.js","sources":["../../../../src/components/ui/toast/toast.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Toast as ToastPrimitive } from '@base-ui/react/toast';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { TimesIcon } from '@acronis-platform/icons-react/stroke-mono';\nimport {\n  CircleCheckGreenIcon,\n  CircleInfoBlueIcon,\n  CircleWarningOrangeIcon,\n  DiamondWarningRedIcon,\n  TriangleWarningYellowIcon,\n  type IconProps,\n} from '@acronis-platform/icons-react/stroke-multi';\n\nimport { cn } from '@/lib/utils';\nimport { usePortalContainer } from '@/lib/portal-container';\nimport { Button } from '../button';\nimport { ButtonIcon } from '../button-icon';\nimport { Spinner } from '../spinner';\n\n// Mirrors the Figma \"Toast\" component set (node 7421:126262), which is the Alert\n// banner plus a drop shadow: a *neutral* surface — not a status tint — with the\n// severity carried by a 1px border in the status color and a 6px status line down\n// the leading edge. Geometry, colors, and spacing all come from the dedicated\n// `--ui-toast-*` tier (imported in `src/styles/index.css`).\n//\n// The delivery mechanism is unchanged from the Sonner-compatible port: a single\n// `<Toaster />` at the app root plus the imperative `toast(...)` API, built on the\n// Base UI toast manager (no Sonner dependency). Only the rendered surface and the\n// variant vocabulary changed.\n//\n// The Figma's `hasDescription` / `hasActions` / `dismissable` booleans map onto\n// per-toast options rather than props, since there is no per-toast component to\n// take them: omitting `description` or `actions` drops those parts, and\n// `dismissable: false` drops the close control. `dismissable` also has to switch\n// off Base UI's swipe-to-dismiss, which is on by default — see the `Root` below.\n//\n// The status line is a `::before` pseudo-element rather than a DOM node: it is\n// never optional and never a slot, so a real element would only add markup for\n// consumers to get wrong. It is bled 1px outwards on three sides so it paints\n// *over* the border it sits on (matching the Figma, where the line covers the\n// leading border), and the root's clip rounds its square corners to the\n// container radius. `start-` keeps it on the leading edge under `dir=\"rtl\"`.\n//\n// `overflow-clip-margin: border-box` is load-bearing, not decoration. `overflow:\n// clip` alone clips at the *padding* box, which is exactly where the bleed has to\n// reach — and an absolutely positioned pseudo-element's containing block is that\n// same padding box — so the outward 1px gets shaved off and the line renders 5px\n// wide starting *inside* the border. Since the border and the line are different\n// tokens, that reads as two adjacent stripes rather than one 6px line. Moving the\n// clip edge out to the border box lets the bleed survive while still rounding the\n// corners.\n//\n// Typography comes from the Toast tier's own emitted classes rather than\n// hand-written utilities: one for the title (Inter Regular 18 / 24 — the same\n// treatment Alert's title uses) and one for the description (Inter Regular\n// 14 / 24). The title previously borrowed the semantic\n// `ui-typography-headings-lead` because the tier emitted no title class; it does\n// now, and the two resolve identically today. Only the *colors* are separate\n// token references.\n//\n// One deliberate deviation from the Figma: `container/widthMin` (384px) is applied\n// to the viewport, not to the card. A fixed-position stack with a 384px\n// `min-width` overflows a narrow phone viewport (min-width always beats\n// max-width), so the viewport owns the width and clamps it with `max-w`, and the\n// card just fills it.\nconst toastVariants = cva(\n  'relative flex w-full items-start overflow-clip [overflow-clip-margin:border-box] border-solid ' +\n    'gap-[var(--ui-toast-global-container-gap)] ' +\n    'px-[var(--ui-toast-global-container-padding-x)] py-[var(--ui-toast-global-container-padding-y)] ' +\n    'rounded-[var(--ui-toast-global-container-border-radius)] ' +\n    'border-[length:var(--ui-toast-global-container-border-width)] ' +\n    'bg-[var(--ui-toast-global-container-background)] ' +\n    'shadow-[var(--ui-toast-global-container-shadow)] ' +\n    \"before:absolute before:content-[''] before:-inset-y-px before:start-[-1px] \" +\n    'before:w-[var(--ui-toast-global-container-status-width)]',\n  {\n    variants: {\n      variant: {\n        info: 'border-[color:var(--ui-toast-info-border-color)] before:bg-[var(--ui-toast-info-left-line)]',\n        success:\n          'border-[color:var(--ui-toast-success-border-color)] before:bg-[var(--ui-toast-success-left-line)]',\n        warning:\n          'border-[color:var(--ui-toast-warning-border-color)] before:bg-[var(--ui-toast-warning-left-line)]',\n        critical:\n          'border-[color:var(--ui-toast-critical-border-color)] before:bg-[var(--ui-toast-critical-left-line)]',\n        danger:\n          'border-[color:var(--ui-toast-danger-border-color)] before:bg-[var(--ui-toast-danger-left-line)]',\n      },\n    },\n    defaultVariants: {\n      variant: 'info',\n    },\n  }\n);\n\nexport type ToastVariant = NonNullable<\n  VariantProps<typeof toastVariants>['variant']\n>;\n\n/**\n * A toast's kind. The five severities match the Figma variants; `loading` has no\n * Figma variant — it is the spinner state `toast.promise` needs.\n */\nexport type ToastType = ToastVariant | 'loading';\n\n// The Figma binds exactly one icon to each variant, and they are multicolor\n// (`stroke-multi`) glyphs that carry their own fills — so nothing here tints them.\nconst STATUS_ICON: Record<ToastVariant, React.ComponentType<IconProps>> = {\n  info: CircleInfoBlueIcon,\n  success: CircleCheckGreenIcon,\n  warning: TriangleWarningYellowIcon,\n  critical: CircleWarningOrangeIcon,\n  danger: DiamondWarningRedIcon,\n};\n\n// Base UI's `promise` helper hardcodes `type: 'loading' | 'success' | 'error'`\n// *after* spreading the caller's options, so `'error'` reaches us even though the\n// public API only offers `toast.danger` — it has to resolve to the danger chrome.\n// `loading` has no Figma variant, so its spinner borrows info's border and status\n// line. Anything else (including a bare `toast(...)`) falls back to info, the\n// Figma's default variant.\nconst VARIANT_BY_TYPE: Record<string, ToastVariant> = {\n  info: 'info',\n  success: 'success',\n  warning: 'warning',\n  critical: 'critical',\n  danger: 'danger',\n  error: 'danger',\n  loading: 'info',\n};\n\nexport interface ToastAction {\n  /** The button's label. */\n  label: React.ReactNode;\n  /** Invoked on click. The toast is not dismissed automatically. */\n  onClick?: () => void;\n  /**\n   * Button style. Defaults to `secondary` for the first action and `ghost` for\n   * the rest, matching the Figma's button pairing.\n   */\n  variant?: 'secondary' | 'ghost';\n}\n\n/** Custom per-toast payload carried through the Base UI manager. */\ninterface ToastData {\n  actions?: ToastAction[];\n  dismissable?: boolean;\n}\n\n// A module-level manager so `toast(...)` works outside React (like Sonner's\n// `toast`). `<Toaster />` subscribes this manager to its provider.\n//\n// Module-level means it is a *per-package-instance* singleton, which matters in a\n// micro-frontend host. Two copies of this package — an MFE bundling its own, or\n// module federation without `singleton: true` — get two independent managers, and\n// then `toast(...)` called through one copy is invisible to the `<Toaster />`\n// rendered by the other: the toast is queued and simply never appears. Two\n// `<Toaster />`s also both pin to `bottom-4 end-4`, so they overlap in the same\n// corner, and `timeout` / `limit` are per-region props that drift independently.\n//\n// So: share one ui-react instance across MFEs and mount exactly one `<Toaster />`\n// for the page (typically in the shell). See apps/docs `shadow-dom.mdx` for the\n// MFE integration contract, and use `PortalContainerProvider` when the single\n// region has to render inside a shadow root.\nconst toastManager = ToastPrimitive.createToastManager<ToastData>();\n\nexport interface ToastOptions {\n  /** Secondary line under the title; clamped to three lines. */\n  description?: React.ReactNode;\n  /** Auto-dismiss delay in ms; `0` keeps the toast until dismissed. */\n  timeout?: number;\n  /** Action buttons rendered in a wrapping row under the text. */\n  actions?: ToastAction[];\n  /**\n   * Whether the toast shows its dismiss control and can be swiped away.\n   * Defaults to `true`. A non-dismissable toast with `timeout: 0` can only be\n   * removed with `toast.dismiss(id)`.\n   */\n  dismissable?: boolean;\n  /** Stable id — re-adding with the same id updates the toast in place. */\n  id?: string;\n}\n\nfunction add(title: React.ReactNode, type?: ToastType, options: ToastOptions = {}) {\n  const { actions, dismissable, ...rest } = options;\n  return toastManager.add({\n    title,\n    type,\n    data: { actions, dismissable },\n    ...rest,\n  });\n}\n\n/**\n * Imperative toast API. `toast(title, options)` shows an info toast;\n * `toast.info` / `success` / `warning` / `critical` / `danger` set the severity\n * and `toast.loading` shows a persistent spinner. `toast.dismiss(id?)` closes one\n * (or all) and `toast.promise` ties a toast to a promise's lifecycle.\n */\nconst toast = Object.assign(\n  (title: React.ReactNode, options?: ToastOptions) => add(title, undefined, options),\n  {\n    info: (title: React.ReactNode, options?: ToastOptions) =>\n      add(title, 'info', options),\n    success: (title: React.ReactNode, options?: ToastOptions) =>\n      add(title, 'success', options),\n    warning: (title: React.ReactNode, options?: ToastOptions) =>\n      add(title, 'warning', options),\n    critical: (title: React.ReactNode, options?: ToastOptions) =>\n      add(title, 'critical', options),\n    danger: (title: React.ReactNode, options?: ToastOptions) =>\n      add(title, 'danger', options),\n    loading: (title: React.ReactNode, options?: ToastOptions) =>\n      add(title, 'loading', { timeout: 0, ...options }),\n    dismiss: (id?: string) => toastManager.close(id),\n    promise: toastManager.promise,\n  }\n);\n\nfunction ToastList({ closeAriaLabel }: { closeAriaLabel: string }) {\n  const { toasts } = ToastPrimitive.useToastManager<ToastData>();\n  return toasts.map((item) => {\n    const variant = VARIANT_BY_TYPE[item.type ?? ''] ?? 'info';\n    const StatusIcon = STATUS_ICON[variant];\n    const actions = item.data?.actions;\n    const dismissable = item.data?.dismissable ?? true;\n    return (\n      <ToastPrimitive.Root\n        key={item.id}\n        toast={item}\n        data-slot=\"toast\"\n        data-variant={variant}\n        // Base UI enables swipe-to-dismiss by default (`['down', 'right']`), so\n        // a non-dismissable toast has to opt out of it too — otherwise hiding\n        // the close button would only hide the *control*, not the capability.\n        swipeDirection={dismissable ? undefined : []}\n        className={cn(\n          toastVariants({ variant }),\n          'transition-all data-[ending-style]:opacity-0 data-[starting-style]:opacity-0',\n          // The stack sits on the inline-end edge, so a toast slides in from the\n          // right in LTR and from the left in RTL.\n          'data-[ending-style]:translate-x-4 data-[starting-style]:translate-x-4',\n          'rtl:data-[ending-style]:-translate-x-4 rtl:data-[starting-style]:-translate-x-4'\n        )}\n      >\n        {/* The icon box's padding (4/8) is what optically aligns the 16px glyph\n            with the first line of the title: glyph centre 8 + 8 = 16, title\n            centre (the text block's 4px padding) 4 + 12 = 16. */}\n        <div\n          data-slot=\"toast-icon\"\n          className=\"flex shrink-0 items-start px-[var(--ui-toast-global-icon-padding-x)] py-[var(--ui-toast-global-icon-padding-y)] [&_svg]:size-[var(--ui-toast-global-icon-size)] [&_svg]:shrink-0\"\n        >\n          {item.type === 'loading' ? (\n            <Spinner\n              size=\"sm\"\n              className=\"size-[var(--ui-toast-global-icon-size)]\"\n            />\n          ) : (\n            <StatusIcon size={16} />\n          )}\n        </div>\n        <div\n          data-slot=\"toast-content\"\n          className=\"flex min-w-0 flex-1 flex-col items-start gap-[var(--ui-toast-global-content-gap)] px-[var(--ui-toast-global-content-padding-x)] py-[var(--ui-toast-global-content-padding-y)]\"\n        >\n          <div\n            data-slot=\"toast-text\"\n            className=\"flex w-full shrink-0 flex-col items-start gap-[var(--ui-toast-global-content-text-container-gap)] px-[var(--ui-toast-global-content-text-container-padding-x)] py-[var(--ui-toast-global-content-text-container-padding-y)] [word-break:break-word]\"\n          >\n            <ToastPrimitive.Title\n              data-slot=\"toast-title\"\n              // `h5` overrides Base UI's `h2` default to match Alert — a toast\n              // is not a page-level heading.\n              render={<h5 />}\n              className=\"ui-toast-global-content-text-container-title-text-style mb-0 w-full text-[var(--ui-toast-global-content-text-container-title-color)]\"\n            />\n            {item.description ? (\n              <ToastPrimitive.Description\n                data-slot=\"toast-description\"\n                className=\"ui-toast-global-content-text-container-description-text-style line-clamp-3 w-full text-[var(--ui-toast-global-content-text-container-description-color)]\"\n              />\n            ) : null}\n          </div>\n          {actions?.length ? (\n            <div\n              data-slot=\"toast-actions\"\n              className=\"flex w-full shrink-0 flex-wrap content-start items-start gap-x-[var(--ui-toast-global-content-actions-container-gap-x)] gap-y-[var(--ui-toast-global-content-actions-container-gap-y)] px-[var(--ui-toast-global-content-actions-container-padding-x)] py-[var(--ui-toast-global-content-actions-container-padding-y)]\"\n            >\n              {actions.map((action, index) => (\n                <Button\n                  key={index}\n                  variant={action.variant ?? (index === 0 ? 'secondary' : 'ghost')}\n                  onClick={action.onClick}\n                >\n                  {action.label}\n                </Button>\n              ))}\n            </div>\n          ) : null}\n        </div>\n        {dismissable ? (\n          <ToastPrimitive.Close\n            aria-label={closeAriaLabel}\n            data-slot=\"toast-close\"\n            render={\n              <ButtonIcon variant=\"ghost\">\n                <TimesIcon />\n              </ButtonIcon>\n            }\n          />\n        ) : null}\n      </ToastPrimitive.Root>\n    );\n  });\n}\n\nexport interface ToasterProps {\n  /** Default auto-dismiss delay in ms for toasts that don't set one. */\n  timeout?: number;\n  /** Max toasts shown at once; the oldest is dropped past the limit. */\n  limit?: number;\n  /** Accessible name for the toast region. */\n  label?: string;\n  /** Accessible name for each toast's dismiss control. */\n  closeAriaLabel?: string;\n  /**\n   * Portal container for the toast stack. Pass a shadow-root mount for\n   * isolated-style previews (the docs demos do this via `useShadowMount`).\n   */\n  portalContainer?: ToastPrimitive.Portal.Props['container'];\n}\n\n/**\n * The toast region. Render once near the app root; it portals a bottom-end stack\n * and renders every queued toast. Trigger toasts with the `toast` API.\n */\nfunction Toaster({\n  timeout,\n  limit,\n  label = 'Notifications',\n  closeAriaLabel = 'Close',\n  portalContainer,\n}: ToasterProps) {\n  const ctxContainer = usePortalContainer();\n  const resolvedContainer = portalContainer ?? ctxContainer;\n\n  return (\n    <ToastPrimitive.Provider\n      toastManager={toastManager}\n      timeout={timeout}\n      limit={limit}\n    >\n      <ToastPrimitive.Portal container={resolvedContainer}>\n        <ToastPrimitive.Viewport\n          aria-label={label}\n          className=\"fixed bottom-4 end-4 z-[100] flex w-[var(--ui-toast-global-container-width-min)] max-w-[calc(100vw-2rem)] flex-col gap-3 outline-none\"\n        >\n          <ToastList closeAriaLabel={closeAriaLabel} />\n        </ToastPrimitive.Viewport>\n      </ToastPrimitive.Portal>\n    </ToastPrimitive.Provider>\n  );\n}\n\nexport { toast, Toaster, toastVariants };\n"],"names":["toastVariants","cva","STATUS_ICON","CircleInfoBlueIcon","CircleCheckGreenIcon","TriangleWarningYellowIcon","CircleWarningOrangeIcon","DiamondWarningRedIcon","VARIANT_BY_TYPE","toastManager","ToastPrimitive","add","title","type","options","actions","dismissable","rest","toast","id","ToastList","closeAriaLabel","toasts","item","variant","StatusIcon","_a","_b","jsxs","cn","jsx","Spinner","action","index","Button","ButtonIcon","TimesIcon","Toaster","timeout","limit","label","portalContainer","ctxContainer","usePortalContainer","resolvedContainer"],"mappings":"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"}
+{"version":3,"file":"toast.js","names":[],"sources":["../../../../src/components/ui/toast/toast.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Toast as ToastPrimitive } from '@base-ui/react/toast';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { TimesIcon } from '@acronis-platform/icons-react/stroke-mono';\nimport {\n  CircleCheckGreenIcon,\n  CircleInfoBlueIcon,\n  CircleWarningOrangeIcon,\n  DiamondWarningRedIcon,\n  TriangleWarningYellowIcon,\n  type IconProps,\n} from '@acronis-platform/icons-react/stroke-multi';\n\nimport { cn } from '@/lib/utils';\nimport { usePortalContainer } from '@/lib/portal-container';\nimport { Button } from '../button';\nimport { ButtonIcon } from '../button-icon';\nimport { Spinner } from '../spinner';\n\n// Mirrors the Figma \"Toast\" component set (node 7421:126262), which is the Alert\n// banner plus a drop shadow: a *neutral* surface — not a status tint — with the\n// severity carried by a 1px border in the status color and a 6px status line down\n// the leading edge. Geometry, colors, and spacing all come from the dedicated\n// `--ui-toast-*` tier (imported in `src/styles/index.css`).\n//\n// The delivery mechanism is unchanged from the Sonner-compatible port: a single\n// `<Toaster />` at the app root plus the imperative `toast(...)` API, built on the\n// Base UI toast manager (no Sonner dependency). Only the rendered surface and the\n// variant vocabulary changed.\n//\n// The Figma's `hasDescription` / `hasActions` / `dismissable` booleans map onto\n// per-toast options rather than props, since there is no per-toast component to\n// take them: omitting `description` or `actions` drops those parts, and\n// `dismissable: false` drops the close control. `dismissable` also has to switch\n// off Base UI's swipe-to-dismiss, which is on by default — see the `Root` below.\n//\n// The status line is a `::before` pseudo-element rather than a DOM node: it is\n// never optional and never a slot, so a real element would only add markup for\n// consumers to get wrong. It is bled 1px outwards on three sides so it paints\n// *over* the border it sits on (matching the Figma, where the line covers the\n// leading border), and the root's clip rounds its square corners to the\n// container radius. `start-` keeps it on the leading edge under `dir=\"rtl\"`.\n//\n// `overflow-clip-margin: border-box` is load-bearing, not decoration. `overflow:\n// clip` alone clips at the *padding* box, which is exactly where the bleed has to\n// reach — and an absolutely positioned pseudo-element's containing block is that\n// same padding box — so the outward 1px gets shaved off and the line renders 5px\n// wide starting *inside* the border. Since the border and the line are different\n// tokens, that reads as two adjacent stripes rather than one 6px line. Moving the\n// clip edge out to the border box lets the bleed survive while still rounding the\n// corners.\n//\n// Typography comes from the Toast tier's own emitted classes rather than\n// hand-written utilities: one for the title (Inter Regular 18 / 24 — the same\n// treatment Alert's title uses) and one for the description (Inter Regular\n// 14 / 24). The title previously borrowed the semantic\n// `ui-typography-headings-lead` because the tier emitted no title class; it does\n// now, and the two resolve identically today. Only the *colors* are separate\n// token references.\n//\n// One deliberate deviation from the Figma: `container/widthMin` (384px) is applied\n// to the viewport, not to the card. A fixed-position stack with a 384px\n// `min-width` overflows a narrow phone viewport (min-width always beats\n// max-width), so the viewport owns the width and clamps it with `max-w`, and the\n// card just fills it.\nconst toastVariants = cva(\n  'relative flex w-full items-start overflow-clip [overflow-clip-margin:border-box] border-solid ' +\n    'gap-[var(--ui-toast-global-container-gap)] ' +\n    'px-[var(--ui-toast-global-container-padding-x)] py-[var(--ui-toast-global-container-padding-y)] ' +\n    'rounded-[var(--ui-toast-global-container-border-radius)] ' +\n    'border-[length:var(--ui-toast-global-container-border-width)] ' +\n    'bg-[var(--ui-toast-global-container-background)] ' +\n    'shadow-[var(--ui-toast-global-container-shadow)] ' +\n    \"before:absolute before:content-[''] before:-inset-y-px before:start-[-1px] \" +\n    'before:w-[var(--ui-toast-global-container-status-width)]',\n  {\n    variants: {\n      variant: {\n        info: 'border-[color:var(--ui-toast-info-border-color)] before:bg-[var(--ui-toast-info-left-line)]',\n        success:\n          'border-[color:var(--ui-toast-success-border-color)] before:bg-[var(--ui-toast-success-left-line)]',\n        warning:\n          'border-[color:var(--ui-toast-warning-border-color)] before:bg-[var(--ui-toast-warning-left-line)]',\n        critical:\n          'border-[color:var(--ui-toast-critical-border-color)] before:bg-[var(--ui-toast-critical-left-line)]',\n        danger:\n          'border-[color:var(--ui-toast-danger-border-color)] before:bg-[var(--ui-toast-danger-left-line)]',\n      },\n    },\n    defaultVariants: {\n      variant: 'info',\n    },\n  }\n);\n\nexport type ToastVariant = NonNullable<\n  VariantProps<typeof toastVariants>['variant']\n>;\n\n/**\n * A toast's kind. The five severities match the Figma variants; `loading` has no\n * Figma variant — it is the spinner state `toast.promise` needs.\n */\nexport type ToastType = ToastVariant | 'loading';\n\n// The Figma binds exactly one icon to each variant, and they are multicolor\n// (`stroke-multi`) glyphs that carry their own fills — so nothing here tints them.\nconst STATUS_ICON: Record<ToastVariant, React.ComponentType<IconProps>> = {\n  info: CircleInfoBlueIcon,\n  success: CircleCheckGreenIcon,\n  warning: TriangleWarningYellowIcon,\n  critical: CircleWarningOrangeIcon,\n  danger: DiamondWarningRedIcon,\n};\n\n// Base UI's `promise` helper hardcodes `type: 'loading' | 'success' | 'error'`\n// *after* spreading the caller's options, so `'error'` reaches us even though the\n// public API only offers `toast.danger` — it has to resolve to the danger chrome.\n// `loading` has no Figma variant, so its spinner borrows info's border and status\n// line. Anything else (including a bare `toast(...)`) falls back to info, the\n// Figma's default variant.\nconst VARIANT_BY_TYPE: Record<string, ToastVariant> = {\n  info: 'info',\n  success: 'success',\n  warning: 'warning',\n  critical: 'critical',\n  danger: 'danger',\n  error: 'danger',\n  loading: 'info',\n};\n\nexport interface ToastAction {\n  /** The button's label. */\n  label: React.ReactNode;\n  /** Invoked on click. The toast is not dismissed automatically. */\n  onClick?: () => void;\n  /**\n   * Button style. Defaults to `secondary` for the first action and `ghost` for\n   * the rest, matching the Figma's button pairing.\n   */\n  variant?: 'secondary' | 'ghost';\n}\n\n/** Custom per-toast payload carried through the Base UI manager. */\ninterface ToastData {\n  actions?: ToastAction[];\n  dismissable?: boolean;\n}\n\n// A module-level manager so `toast(...)` works outside React (like Sonner's\n// `toast`). `<Toaster />` subscribes this manager to its provider.\n//\n// Module-level means it is a *per-package-instance* singleton, which matters in a\n// micro-frontend host. Two copies of this package — an MFE bundling its own, or\n// module federation without `singleton: true` — get two independent managers, and\n// then `toast(...)` called through one copy is invisible to the `<Toaster />`\n// rendered by the other: the toast is queued and simply never appears. Two\n// `<Toaster />`s also both pin to `bottom-4 end-4`, so they overlap in the same\n// corner, and `timeout` / `limit` are per-region props that drift independently.\n//\n// So: share one ui-react instance across MFEs and mount exactly one `<Toaster />`\n// for the page (typically in the shell). See apps/docs `shadow-dom.mdx` for the\n// MFE integration contract, and use `PortalContainerProvider` when the single\n// region has to render inside a shadow root.\nconst toastManager = ToastPrimitive.createToastManager<ToastData>();\n\nexport interface ToastOptions {\n  /** Secondary line under the title; clamped to three lines. */\n  description?: React.ReactNode;\n  /** Auto-dismiss delay in ms; `0` keeps the toast until dismissed. */\n  timeout?: number;\n  /** Action buttons rendered in a wrapping row under the text. */\n  actions?: ToastAction[];\n  /**\n   * Whether the toast shows its dismiss control and can be swiped away.\n   * Defaults to `true`. A non-dismissable toast with `timeout: 0` can only be\n   * removed with `toast.dismiss(id)`.\n   */\n  dismissable?: boolean;\n  /** Stable id — re-adding with the same id updates the toast in place. */\n  id?: string;\n}\n\nfunction add(title: React.ReactNode, type?: ToastType, options: ToastOptions = {}) {\n  const { actions, dismissable, ...rest } = options;\n  return toastManager.add({\n    title,\n    type,\n    data: { actions, dismissable },\n    ...rest,\n  });\n}\n\n/**\n * Imperative toast API. `toast(title, options)` shows an info toast;\n * `toast.info` / `success` / `warning` / `critical` / `danger` set the severity\n * and `toast.loading` shows a persistent spinner. `toast.dismiss(id?)` closes one\n * (or all) and `toast.promise` ties a toast to a promise's lifecycle.\n */\nconst toast = Object.assign(\n  (title: React.ReactNode, options?: ToastOptions) => add(title, undefined, options),\n  {\n    info: (title: React.ReactNode, options?: ToastOptions) =>\n      add(title, 'info', options),\n    success: (title: React.ReactNode, options?: ToastOptions) =>\n      add(title, 'success', options),\n    warning: (title: React.ReactNode, options?: ToastOptions) =>\n      add(title, 'warning', options),\n    critical: (title: React.ReactNode, options?: ToastOptions) =>\n      add(title, 'critical', options),\n    danger: (title: React.ReactNode, options?: ToastOptions) =>\n      add(title, 'danger', options),\n    loading: (title: React.ReactNode, options?: ToastOptions) =>\n      add(title, 'loading', { timeout: 0, ...options }),\n    dismiss: (id?: string) => toastManager.close(id),\n    promise: toastManager.promise,\n  }\n);\n\nfunction ToastList({ closeAriaLabel }: { closeAriaLabel: string }) {\n  const { toasts } = ToastPrimitive.useToastManager<ToastData>();\n  return toasts.map((item) => {\n    const variant = VARIANT_BY_TYPE[item.type ?? ''] ?? 'info';\n    const StatusIcon = STATUS_ICON[variant];\n    const actions = item.data?.actions;\n    const dismissable = item.data?.dismissable ?? true;\n    return (\n      <ToastPrimitive.Root\n        key={item.id}\n        toast={item}\n        data-slot=\"toast\"\n        data-variant={variant}\n        // Base UI enables swipe-to-dismiss by default (`['down', 'right']`), so\n        // a non-dismissable toast has to opt out of it too — otherwise hiding\n        // the close button would only hide the *control*, not the capability.\n        swipeDirection={dismissable ? undefined : []}\n        className={cn(\n          toastVariants({ variant }),\n          'transition-all data-[ending-style]:opacity-0 data-[starting-style]:opacity-0',\n          // The stack sits on the inline-end edge, so a toast slides in from the\n          // right in LTR and from the left in RTL.\n          'data-[ending-style]:translate-x-4 data-[starting-style]:translate-x-4',\n          'rtl:data-[ending-style]:-translate-x-4 rtl:data-[starting-style]:-translate-x-4'\n        )}\n      >\n        {/* The icon box's padding (4/8) is what optically aligns the 16px glyph\n            with the first line of the title: glyph centre 8 + 8 = 16, title\n            centre (the text block's 4px padding) 4 + 12 = 16. */}\n        <div\n          data-slot=\"toast-icon\"\n          className=\"flex shrink-0 items-start px-[var(--ui-toast-global-icon-padding-x)] py-[var(--ui-toast-global-icon-padding-y)] [&_svg]:size-[var(--ui-toast-global-icon-size)] [&_svg]:shrink-0\"\n        >\n          {item.type === 'loading' ? (\n            <Spinner\n              size=\"sm\"\n              className=\"size-[var(--ui-toast-global-icon-size)]\"\n            />\n          ) : (\n            <StatusIcon size={16} />\n          )}\n        </div>\n        <div\n          data-slot=\"toast-content\"\n          className=\"flex min-w-0 flex-1 flex-col items-start gap-[var(--ui-toast-global-content-gap)] px-[var(--ui-toast-global-content-padding-x)] py-[var(--ui-toast-global-content-padding-y)]\"\n        >\n          <div\n            data-slot=\"toast-text\"\n            className=\"flex w-full shrink-0 flex-col items-start gap-[var(--ui-toast-global-content-text-container-gap)] px-[var(--ui-toast-global-content-text-container-padding-x)] py-[var(--ui-toast-global-content-text-container-padding-y)] [word-break:break-word]\"\n          >\n            <ToastPrimitive.Title\n              data-slot=\"toast-title\"\n              // `h5` overrides Base UI's `h2` default to match Alert — a toast\n              // is not a page-level heading.\n              render={<h5 />}\n              className=\"ui-toast-global-content-text-container-title-text-style mb-0 w-full text-[var(--ui-toast-global-content-text-container-title-color)]\"\n            />\n            {item.description ? (\n              <ToastPrimitive.Description\n                data-slot=\"toast-description\"\n                className=\"ui-toast-global-content-text-container-description-text-style line-clamp-3 w-full text-[var(--ui-toast-global-content-text-container-description-color)]\"\n              />\n            ) : null}\n          </div>\n          {actions?.length ? (\n            <div\n              data-slot=\"toast-actions\"\n              className=\"flex w-full shrink-0 flex-wrap content-start items-start gap-x-[var(--ui-toast-global-content-actions-container-gap-x)] gap-y-[var(--ui-toast-global-content-actions-container-gap-y)] px-[var(--ui-toast-global-content-actions-container-padding-x)] py-[var(--ui-toast-global-content-actions-container-padding-y)]\"\n            >\n              {actions.map((action, index) => (\n                <Button\n                  key={index}\n                  variant={action.variant ?? (index === 0 ? 'secondary' : 'ghost')}\n                  onClick={action.onClick}\n                >\n                  {action.label}\n                </Button>\n              ))}\n            </div>\n          ) : null}\n        </div>\n        {dismissable ? (\n          <ToastPrimitive.Close\n            aria-label={closeAriaLabel}\n            data-slot=\"toast-close\"\n            render={\n              <ButtonIcon variant=\"ghost\">\n                <TimesIcon />\n              </ButtonIcon>\n            }\n          />\n        ) : null}\n      </ToastPrimitive.Root>\n    );\n  });\n}\n\nexport interface ToasterProps {\n  /** Default auto-dismiss delay in ms for toasts that don't set one. */\n  timeout?: number;\n  /** Max toasts shown at once; the oldest is dropped past the limit. */\n  limit?: number;\n  /** Accessible name for the toast region. */\n  label?: string;\n  /** Accessible name for each toast's dismiss control. */\n  closeAriaLabel?: string;\n  /**\n   * Portal container for the toast stack. Pass a shadow-root mount for\n   * isolated-style previews (the docs demos do this via `useShadowMount`).\n   */\n  portalContainer?: ToastPrimitive.Portal.Props['container'];\n}\n\n/**\n * The toast region. Render once near the app root; it portals a bottom-end stack\n * and renders every queued toast. Trigger toasts with the `toast` API.\n */\nfunction Toaster({\n  timeout,\n  limit,\n  label = 'Notifications',\n  closeAriaLabel = 'Close',\n  portalContainer,\n}: ToasterProps) {\n  const ctxContainer = usePortalContainer();\n  const resolvedContainer = portalContainer ?? ctxContainer;\n\n  return (\n    <ToastPrimitive.Provider\n      toastManager={toastManager}\n      timeout={timeout}\n      limit={limit}\n    >\n      <ToastPrimitive.Portal container={resolvedContainer}>\n        <ToastPrimitive.Viewport\n          aria-label={label}\n          className=\"fixed bottom-4 end-4 z-[100] flex w-[var(--ui-toast-global-container-width-min)] max-w-[calc(100vw-2rem)] flex-col gap-3 outline-none\"\n        >\n          <ToastList closeAriaLabel={closeAriaLabel} />\n        </ToastPrimitive.Viewport>\n      </ToastPrimitive.Portal>\n    </ToastPrimitive.Provider>\n  );\n}\n\nexport { toast, Toaster, toastVariants };\n"],"mappings":";;;;;;;;;;;;;AAmEA,IAAM,IAAgB,EACpB,ykBASA;CACE,UAAU,EACR,SAAS;EACP,MAAM;EACN,SACE;EACF,SACE;EACF,UACE;EACF,QACE;CACJ,EACF;CACA,iBAAiB,EACf,SAAS,OACX;AACF,CACF,GAcM,IAAoE;CACxE,MAAM;CACN,SAAS;CACT,SAAS;CACT,UAAU;CACV,QAAQ;AACV,GAQM,IAAgD;CACpD,MAAM;CACN,SAAS;CACT,SAAS;CACT,UAAU;CACV,QAAQ;CACR,OAAO;CACP,SAAS;AACX,GAmCM,IAAe,EAAe,mBAA8B;AAmBlE,SAAS,EAAI,GAAwB,GAAkB,IAAwB,CAAC,GAAG;CACjF,IAAM,EAAE,YAAS,gBAAa,GAAG,MAAS;CAC1C,OAAO,EAAa,IAAI;EACtB;EACA;EACA,MAAM;GAAE;GAAS;EAAY;EAC7B,GAAG;CACL,CAAC;AACH;AAQA,IAAM,IAAQ,OAAO,QAClB,GAAwB,MAA2B,EAAI,GAAO,KAAA,GAAW,CAAO,GACjF;CACE,OAAO,GAAwB,MAC7B,EAAI,GAAO,QAAQ,CAAO;CAC5B,UAAU,GAAwB,MAChC,EAAI,GAAO,WAAW,CAAO;CAC/B,UAAU,GAAwB,MAChC,EAAI,GAAO,WAAW,CAAO;CAC/B,WAAW,GAAwB,MACjC,EAAI,GAAO,YAAY,CAAO;CAChC,SAAS,GAAwB,MAC/B,EAAI,GAAO,UAAU,CAAO;CAC9B,UAAU,GAAwB,MAChC,EAAI,GAAO,WAAW;EAAE,SAAS;EAAG,GAAG;CAAQ,CAAC;CAClD,UAAU,MAAgB,EAAa,MAAM,CAAE;CAC/C,SAAS,EAAa;AACxB,CACF;AAEA,SAAS,EAAU,EAAE,qBAA8C;CACjE,IAAM,EAAE,cAAW,EAAe,gBAA2B;CAC7D,OAAO,EAAO,KAAK,MAAS;EAC1B,IAAM,IAAU,EAAgB,EAAK,QAAQ,OAAO,QAC9C,IAAa,EAAY,IACzB,IAAU,EAAK,MAAM,SACrB,IAAc,EAAK,MAAM,eAAe;EAC9C,OACE,kBAAC,EAAe,MAAhB;GAEE,OAAO;GACP,aAAU;GACV,gBAAc;GAId,gBAAgB,IAAc,KAAA,IAAY,CAAC;GAC3C,WAAW,EACT,EAAc,EAAE,WAAQ,CAAC,GACzB,gFAGA,yEACA,iFACF;GAhBF,UAAA;IAqBE,kBAAC,OAAD;KACE,aAAU;KACV,WAAU;KAET,UAAA,EAAK,SAAS,YACb,kBAAC,GAAD;MACE,MAAK;MACL,WAAU;KACX,CAAA,IAED,kBAAC,GAAD,EAAY,MAAM,GAAK,CAAA;IAEtB,CAAA;IACL,kBAAC,OAAD;KACE,aAAU;KACV,WAAU;KAFZ,UAAA,CAIE,kBAAC,OAAD;MACE,aAAU;MACV,WAAU;MAFZ,UAAA,CAIE,kBAAC,EAAe,OAAhB;OACE,aAAU;OAGV,QAAQ,kBAAC,MAAD,CAAK,CAAA;OACb,WAAU;MACX,CAAA,GACA,EAAK,cACJ,kBAAC,EAAe,aAAhB;OACE,aAAU;OACV,WAAU;MACX,CAAA,IACC,IACD;KACJ,CAAA,GAAA,GAAS,SACR,kBAAC,OAAD;MACE,aAAU;MACV,WAAU;MAET,UAAA,EAAQ,KAAK,GAAQ,MACpB,kBAAC,GAAD;OAEE,SAAS,EAAO,YAAY,MAAU,IAAI,cAAc;OACxD,SAAS,EAAO;OAEf,UAAA,EAAO;MACF,GALD,CAKC,CACT;KACE,CAAA,IACH,IACD;;IACJ,IACC,kBAAC,EAAe,OAAhB;KACE,cAAY;KACZ,aAAU;KACV,QACE,kBAAC,GAAD;MAAY,SAAQ;MAClB,UAAA,kBAAC,GAAD,CAAY,CAAA;KACF,CAAA;IAEf,CAAA,IACC;GACe;EAnFd,GAAA,EAAK,EAmFS;CAEzB,CAAC;AACH;AAsBA,SAAS,EAAQ,EACf,YACA,UACA,WAAQ,iBACR,oBAAiB,SACjB,sBACe;CACf,IAAM,IAAe,EAAmB,GAClC,IAAoB,KAAmB;CAE7C,OACE,kBAAC,EAAe,UAAhB;EACgB;EACL;EACF;EAEP,UAAA,kBAAC,EAAe,QAAhB;GAAuB,WAAW;GAChC,UAAA,kBAAC,EAAe,UAAhB;IACE,cAAY;IACZ,WAAU;IAEV,UAAA,kBAAC,GAAD,EAA2B,kBAAiB,CAAA;GACrB,CAAA;EACJ,CAAA;CACA,CAAA;AAE7B"}