@acronis-platform/ui-react 0.62.0 → 1.0.0

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

@@ -0,0 +1,47 @@
+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

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

@@ -0,0 +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;"}

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

@@ -1,85 +1,192 @@
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
-import { Toast as o } from "@base-ui/react/toast";
-import { TimesIcon as d, CircleTimesIcon as m, TriangleWarningIcon as u, CircleInfoIcon as f, CircleCheckIcon as x } from "@acronis-platform/icons-react/stroke-mono";
-import { cn as g } from "../../../lib/utils.js";
-import { usePortalContainer as p } from "../../../lib/portal-container.js";
-import { Spinner as v } from "../spinner/spinner.js";
-const i = o.createToastManager();
-function a(t, e, n = {}) {
-  const { action: r, ...l } = n;
-  return i.add({
+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 h, CircleCheckGreenIcon as y, 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: y,
+  warning: h,
+  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: e, dismissable: l, ...i } = n;
+  return d.add({
     title: t,
-    type: e,
-    actionProps: r ? { children: r.label, onClick: r.onClick } : void 0,
-    ...l
+    type: a,
+    data: { actions: e, dismissable: l },
+    ...i
   });
 }
-const I = Object.assign(
-  (t, e) => a(t, void 0, e),
+const G = Object.assign(
+  (t, a) => s(t, void 0, a),
   {
-    success: (t, e) => a(t, "success", e),
-    info: (t, e) => a(t, "info", e),
-    warning: (t, e) => a(t, "warning", e),
-    error: (t, e) => a(t, "error", e),
-    loading: (t, e) => a(t, "loading", { timeout: 0, ...e }),
-    dismiss: (t) => i.close(t),
-    promise: i.promise
+    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
   }
-), N = {
-  success: /* @__PURE__ */ s(x, { className: "size-4 text-[var(--ui-text-on-status-success)]" }),
-  info: /* @__PURE__ */ s(f, { className: "size-4 text-[var(--ui-text-on-status-info)]" }),
-  warning: /* @__PURE__ */ s(u, { className: "size-4 text-[var(--ui-text-on-status-warning)]" }),
-  error: /* @__PURE__ */ s(m, { className: "size-4 text-[var(--ui-text-on-status-danger)]" }),
-  loading: /* @__PURE__ */ s(v, { size: "sm", className: "size-4" })
-};
-function b() {
-  const { toasts: t } = o.useToastManager();
-  return t.map((e) => {
-    const n = N[e.type];
-    return /* @__PURE__ */ c(
-      o.Root,
+);
+function S({ closeAriaLabel: t }) {
+  const { toasts: a } = r.useToastManager();
+  return a.map((n) => {
+    var b, p;
+    const e = P[n.type ?? ""] ?? "info", l = B[e], i = (b = n.data) == null ? void 0 : b.actions, c = ((p = n.data) == null ? void 0 : p.dismissable) ?? !0;
+    return /* @__PURE__ */ u(
+      r.Root,
       {
-        toast: e,
-        className: g(
-          "relative flex w-full items-start gap-3 rounded border border-border bg-background p-4 shadow-md",
+        toast: n,
+        "data-slot": "toast",
+        "data-variant": e,
+        swipeDirection: c ? void 0 : [],
+        className: N(
+          _({ variant: e }),
           "transition-all data-[ending-style]:opacity-0 data-[starting-style]:opacity-0",
-          "data-[starting-style]:translate-x-4 data-[ending-style]:translate-x-4"
+          // 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: [
-          n ? /* @__PURE__ */ s("span", { className: "mt-0.5 shrink-0", children: n }) : null,
-          /* @__PURE__ */ c("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [
-            /* @__PURE__ */ s(o.Title, { className: "text-sm font-semibold leading-5 text-foreground" }),
-            /* @__PURE__ */ s(o.Description, { className: "text-sm leading-5 text-muted-foreground" }),
-            e.actionProps ? /* @__PURE__ */ s(o.Action, { className: "mt-1 self-start text-sm font-semibold text-secondary hover:underline" }) : null
-          ] }),
-          /* @__PURE__ */ s(
-            o.Close,
+          /* @__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-typography-headings-lead 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
+                    ]
+                  }
+                ),
+                i != null && i.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: i.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": "Close",
-              className: "shrink-0 rounded text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-focus-primary)]",
-              children: /* @__PURE__ */ s(d, { className: "size-4" })
+              "aria-label": t,
+              "data-slot": "toast-close",
+              render: /* @__PURE__ */ o(z, { variant: "ghost", children: /* @__PURE__ */ o(m, {}) })
             }
-          )
+          ) : null
         ]
       },
-      e.id
+      n.id
     );
   });
 }
-function k({ timeout: t, limit: e, portalContainer: n }) {
-  const r = p(), l = n ?? r;
-  return /* @__PURE__ */ s(
-    o.Provider,
+function L({
+  timeout: t,
+  limit: a,
+  label: n = "Notifications",
+  closeAriaLabel: e = "Close",
+  portalContainer: l
+}) {
+  const i = T(), c = l ?? i;
+  return /* @__PURE__ */ o(
+    r.Provider,
     {
-      toastManager: i,
+      toastManager: d,
       timeout: t,
-      limit: e,
-      children: /* @__PURE__ */ s(o.Portal, { container: l, children: /* @__PURE__ */ s(o.Viewport, { className: "fixed bottom-4 end-4 z-[100] flex w-[384px] max-w-[calc(100vw-2rem)] flex-col gap-3 outline-none", children: /* @__PURE__ */ s(b, {}) }) })
+      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: e })
+        }
+      ) })
     }
   );
 }
 export {
-  k as Toaster,
-  I as toast
+  L as Toaster,
+  G as toast,
+  _ 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 {\n  CircleCheckIcon,\n  CircleInfoIcon,\n  CircleTimesIcon,\n  TimesIcon,\n  TriangleWarningIcon,\n} from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\nimport { usePortalContainer } from '@/lib/portal-container';\nimport { Spinner } from '../spinner';\n\n// Ported from `@acronis-platform/shadcn-uikit`'s `sonner`\n// (packages/ui-legacy/src/components/ui/sonner.tsx), which wrapped the Sonner\n// library. Rebuilt on the Base UI toast primitive (the ui-react convention), so\n// no Sonner dependency. The contract is preserved: drop a single `<Toaster />`\n// at the app root and call the imperative `toast(...)` / `toast.success(...)`\n// API from anywhere. No `--ui-toast-*` tier yet, so this design-pending v1 is a\n// neutral surface (bg-background + border-border + shadow) with the status\n// conveyed by a colored leading icon (`--ui-text-on-status-*`); per-status\n// surface tinting is design-pending. Auto-dismiss after `timeout` (default\n// 5000ms); `loading` toasts persist until updated or dismissed.\n\n// A module-level manager so `toast(...)` works outside React (like Sonner's\n// `toast`). `<Toaster />` subscribes this manager to its provider.\nconst toastManager = ToastPrimitive.createToastManager();\n\nexport type ToastType = 'success' | 'info' | 'warning' | 'error' | 'loading';\n\nexport interface ToastOptions {\n  /** Secondary line under the title. */\n  description?: React.ReactNode;\n  /** Auto-dismiss delay in ms; `0` keeps the toast until dismissed. */\n  timeout?: number;\n  /** A single inline action button (e.g. Undo). */\n  action?: { label: React.ReactNode; onClick?: () => void };\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 { action, ...rest } = options;\n  return toastManager.add({\n    title,\n    type,\n    actionProps: action\n      ? { children: action.label, onClick: action.onClick }\n      : undefined,\n    ...rest,\n  });\n}\n\n/**\n * Imperative toast API. `toast(title, options)` shows a neutral toast;\n * `toast.success` / `info` / `warning` / `error` / `loading` set the variant.\n * `toast.dismiss(id?)` closes one (or all) and `toast.promise` ties a toast to a\n * promise's lifecycle.\n */\nconst toast = Object.assign(\n  (title: React.ReactNode, options?: ToastOptions) => add(title, undefined, options),\n  {\n    success: (title: React.ReactNode, options?: ToastOptions) =>\n      add(title, 'success', options),\n    info: (title: React.ReactNode, options?: ToastOptions) =>\n      add(title, 'info', options),\n    warning: (title: React.ReactNode, options?: ToastOptions) =>\n      add(title, 'warning', options),\n    error: (title: React.ReactNode, options?: ToastOptions) =>\n      add(title, 'error', 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\nconst ICON_BY_TYPE: Record<ToastType, React.ReactNode> = {\n  success: (\n    <CircleCheckIcon className=\"size-4 text-[var(--ui-text-on-status-success)]\" />\n  ),\n  info: (\n    <CircleInfoIcon className=\"size-4 text-[var(--ui-text-on-status-info)]\" />\n  ),\n  warning: (\n    <TriangleWarningIcon className=\"size-4 text-[var(--ui-text-on-status-warning)]\" />\n  ),\n  error: (\n    <CircleTimesIcon className=\"size-4 text-[var(--ui-text-on-status-danger)]\" />\n  ),\n  loading: <Spinner size=\"sm\" className=\"size-4\" />,\n};\n\nfunction ToastList() {\n  const { toasts } = ToastPrimitive.useToastManager();\n  return toasts.map((item) => {\n    const icon = ICON_BY_TYPE[item.type as ToastType];\n    return (\n      <ToastPrimitive.Root\n        key={item.id}\n        toast={item}\n        className={cn(\n          'relative flex w-full items-start gap-3 rounded border border-border bg-background p-4 shadow-md',\n          'transition-all data-[ending-style]:opacity-0 data-[starting-style]:opacity-0',\n          'data-[starting-style]:translate-x-4 data-[ending-style]:translate-x-4'\n        )}\n      >\n        {icon ? <span className=\"mt-0.5 shrink-0\">{icon}</span> : null}\n        <div className=\"flex min-w-0 flex-1 flex-col gap-1\">\n          <ToastPrimitive.Title className=\"text-sm font-semibold leading-5 text-foreground\" />\n          <ToastPrimitive.Description className=\"text-sm leading-5 text-muted-foreground\" />\n          {item.actionProps ? (\n            <ToastPrimitive.Action className=\"mt-1 self-start text-sm font-semibold text-secondary hover:underline\" />\n          ) : null}\n        </div>\n        <ToastPrimitive.Close\n          aria-label=\"Close\"\n          className=\"shrink-0 rounded text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-focus-primary)]\"\n        >\n          <TimesIcon className=\"size-4\" />\n        </ToastPrimitive.Close>\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  /**\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-right\n * stack and renders every queued toast. Trigger toasts with the `toast` API.\n */\nfunction Toaster({ timeout, limit, portalContainer }: 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 className=\"fixed bottom-4 end-4 z-[100] flex w-[384px] max-w-[calc(100vw-2rem)] flex-col gap-3 outline-none\">\n          <ToastList />\n        </ToastPrimitive.Viewport>\n      </ToastPrimitive.Portal>\n    </ToastPrimitive.Provider>\n  );\n}\n\nexport { toast, Toaster };\n"],"names":["toastManager","ToastPrimitive","add","title","type","options","action","rest","toast","id","ICON_BY_TYPE","jsx","CircleCheckIcon","CircleInfoIcon","TriangleWarningIcon","CircleTimesIcon","Spinner","ToastList","toasts","item","icon","jsxs","cn","TimesIcon","Toaster","timeout","limit","portalContainer","ctxContainer","usePortalContainer","resolvedContainer"],"mappings":";;;;;;AA6BA,MAAMA,IAAeC,EAAe,mBAAA;AAepC,SAASC,EAAIC,GAAwBC,GAAkBC,IAAwB,CAAA,GAAI;AACjF,QAAM,EAAE,QAAAC,GAAQ,GAAGC,EAAA,IAASF;AAC5B,SAAOL,EAAa,IAAI;AAAA,IACtB,OAAAG;AAAA,IACA,MAAAC;AAAA,IACA,aAAaE,IACT,EAAE,UAAUA,EAAO,OAAO,SAASA,EAAO,QAAA,IAC1C;AAAA,IACJ,GAAGC;AAAA,EAAA,CACJ;AACH;AAQA,MAAMC,IAAQ,OAAO;AAAA,EACnB,CAACL,GAAwBE,MAA2BH,EAAIC,GAAO,QAAWE,CAAO;AAAA,EACjF;AAAA,IACE,SAAS,CAACF,GAAwBE,MAChCH,EAAIC,GAAO,WAAWE,CAAO;AAAA,IAC/B,MAAM,CAACF,GAAwBE,MAC7BH,EAAIC,GAAO,QAAQE,CAAO;AAAA,IAC5B,SAAS,CAACF,GAAwBE,MAChCH,EAAIC,GAAO,WAAWE,CAAO;AAAA,IAC/B,OAAO,CAACF,GAAwBE,MAC9BH,EAAIC,GAAO,SAASE,CAAO;AAAA,IAC7B,SAAS,CAACF,GAAwBE,MAChCH,EAAIC,GAAO,WAAW,EAAE,SAAS,GAAG,GAAGE,EAAA,CAAS;AAAA,IAClD,SAAS,CAACI,MAAgBT,EAAa,MAAMS,CAAE;AAAA,IAC/C,SAAST,EAAa;AAAA,EAAA;AAE1B,GAEMU,IAAmD;AAAA,EACvD,SACE,gBAAAC,EAACC,GAAA,EAAgB,WAAU,iDAAA,CAAiD;AAAA,EAE9E,MACE,gBAAAD,EAACE,GAAA,EAAe,WAAU,8CAAA,CAA8C;AAAA,EAE1E,SACE,gBAAAF,EAACG,GAAA,EAAoB,WAAU,iDAAA,CAAiD;AAAA,EAElF,OACE,gBAAAH,EAACI,GAAA,EAAgB,WAAU,gDAAA,CAAgD;AAAA,EAE7E,SAAS,gBAAAJ,EAACK,GAAA,EAAQ,MAAK,MAAK,WAAU,SAAA,CAAS;AACjD;AAEA,SAASC,IAAY;AACnB,QAAM,EAAE,QAAAC,EAAA,IAAWjB,EAAe,gBAAA;AAClC,SAAOiB,EAAO,IAAI,CAACC,MAAS;AAC1B,UAAMC,IAAOV,EAAaS,EAAK,IAAiB;AAChD,WACE,gBAAAE;AAAA,MAACpB,EAAe;AAAA,MAAf;AAAA,QAEC,OAAOkB;AAAA,QACP,WAAWG;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,QAGD,UAAA;AAAA,UAAAF,IAAO,gBAAAT,EAAC,QAAA,EAAK,WAAU,mBAAmB,aAAK,IAAU;AAAA,UAC1D,gBAAAU,EAAC,OAAA,EAAI,WAAU,sCACb,UAAA;AAAA,YAAA,gBAAAV,EAACV,EAAe,OAAf,EAAqB,WAAU,kDAAA,CAAkD;AAAA,YAClF,gBAAAU,EAACV,EAAe,aAAf,EAA2B,WAAU,0CAAA,CAA0C;AAAA,YAC/EkB,EAAK,cACJ,gBAAAR,EAACV,EAAe,QAAf,EAAsB,WAAU,wEAAuE,IACtG;AAAA,UAAA,GACN;AAAA,UACA,gBAAAU;AAAA,YAACV,EAAe;AAAA,YAAf;AAAA,cACC,cAAW;AAAA,cACX,WAAU;AAAA,cAEV,UAAA,gBAAAU,EAACY,GAAA,EAAU,WAAU,SAAA,CAAS;AAAA,YAAA;AAAA,UAAA;AAAA,QAChC;AAAA,MAAA;AAAA,MArBKJ,EAAK;AAAA,IAAA;AAAA,EAwBhB,CAAC;AACH;AAkBA,SAASK,EAAQ,EAAE,SAAAC,GAAS,OAAAC,GAAO,iBAAAC,KAAiC;AAClE,QAAMC,IAAeC,EAAA,GACfC,IAAoBH,KAAmBC;AAE7C,SACE,gBAAAjB;AAAA,IAACV,EAAe;AAAA,IAAf;AAAA,MACC,cAAAD;AAAA,MACA,SAAAyB;AAAA,MACA,OAAAC;AAAA,MAEA,UAAA,gBAAAf,EAACV,EAAe,QAAf,EAAsB,WAAW6B,GAChC,UAAA,gBAAAnB,EAACV,EAAe,UAAf,EAAwB,WAAU,oGACjC,UAAA,gBAAAU,EAACM,GAAA,CAAA,CAAU,GACb,EAAA,CACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"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 generated classes rather than hand-written utilities:\n// `ui-typography-headings-lead` is the title's Figma text style (Inter Regular\n// 18 / 24 — the same treatment Alert's title uses) and the Toast tier emits its\n// own class for the description (Inter Regular 14 / 24). Only the *colors* are\n// separate 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-typography-headings-lead 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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"}

package/dist/components/ui/truncate-text/middle-truncate.js

@@ -0,0 +1,20 @@
+function u(n, c, { measure: l, ellipsis: i = "…" }) {
+  if (c <= 0) return "";
+  if (l(n) <= c) return n;
+  if (l(i) > c) return "";
+  const f = (r) => {
+    if (r <= 0) return i;
+    const t = Math.ceil(r / 2), h = r - t;
+    return h > 0 ? `${n.slice(0, t)}${i}${n.slice(n.length - h)}` : `${n.slice(0, t)}${i}`;
+  };
+  let e = 0, o = n.length;
+  for (; o - e > 1; ) {
+    const r = Math.floor((e + o) / 2);
+    l(f(r)) <= c ? e = r : o = r;
+  }
+  return f(e);
+}
+export {
+  u as middleTruncate
+};
+//# sourceMappingURL=middle-truncate.js.map

package/dist/components/ui/truncate-text/middle-truncate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"middle-truncate.js","sources":["../../../../src/components/ui/truncate-text/middle-truncate.ts"],"sourcesContent":["// The pure search behind `<TruncateText mode=\"middle\">`: given a string, a pixel budget, and a\n// way to measure a candidate's rendered width, find the longest start+end slice\n// (joined by an ellipsis) that still fits — preserving both ends of the string\n// rather than just the start, which is what a plain CSS end-ellipsis already does\n// and is useless for a URL, hash or path whose distinguishing part is at the tail.\n//\n// Binary search over \"how many non-ellipsis characters to keep\", not over the split\n// point between start/end — the split is always the same proportion (kept chars\n// divided evenly, the extra one going to the start on an odd count), so there is\n// exactly one candidate per kept-count and `measure` is called O(log n) times\n// rather than O(n). `measure` is injected rather than hard-coded to\n// `canvas.measureText` specifically so this file has no DOM dependency: the real\n// component supplies a canvas-backed measurer (see `truncate-text.tsx`), and\n// these tests supply a deterministic fake — jsdom has no layout engine, so a test\n// asserting real pixel widths would need the browser project for no benefit here,\n// the search logic does not care what \"width\" means.\n\nexport interface MiddleTruncateOptions {\n  /** Returns the rendered width of `candidate`, in the same unit as `maxWidth`. */\n  readonly measure: (candidate: string) => number;\n  /** Inserted between the kept start and end slices. Defaults to `'…'`. */\n  readonly ellipsis?: string;\n}\n\n/**\n * Returns `text` unchanged if it already fits `maxWidth`, otherwise the widest\n * start+ellipsis+end slice that does. Never returns something wider than\n * `maxWidth`, even when nothing meaningful fits — the degenerate result is the\n * bare ellipsis, or `''` if `maxWidth` cannot fit that either.\n */\nexport function middleTruncate(\n  text: string,\n  maxWidth: number,\n  { measure, ellipsis = '…' }: MiddleTruncateOptions\n): string {\n  if (maxWidth <= 0) return '';\n  if (measure(text) <= maxWidth) return text;\n\n  const ellipsisWidth = measure(ellipsis);\n  if (ellipsisWidth > maxWidth) return '';\n\n  const candidateFor = (kept: number): string => {\n    if (kept <= 0) return ellipsis;\n    const startLen = Math.ceil(kept / 2);\n    const endLen = kept - startLen;\n    return endLen > 0\n      ? `${text.slice(0, startLen)}${ellipsis}${text.slice(text.length - endLen)}`\n      : `${text.slice(0, startLen)}${ellipsis}`;\n  };\n\n  // Invariant: `low` is always a kept-count that fits (0 does, by the ellipsis\n  // check above); `high` is always one that does not (`text.length` does not, by\n  // the \"already fits\" check above). The loop halves the gap until they meet,\n  // so `low` ends on the largest fitting count.\n  let low = 0;\n  let high = text.length;\n  while (high - low > 1) {\n    const mid = Math.floor((low + high) / 2);\n    if (measure(candidateFor(mid)) <= maxWidth) {\n      low = mid;\n    } else {\n      high = mid;\n    }\n  }\n  return candidateFor(low);\n}\n"],"names":["middleTruncate","text","maxWidth","measure","ellipsis","candidateFor","kept","startLen","endLen","low","high","mid"],"mappings":"AA8BO,SAASA,EACdC,GACAC,GACA,EAAE,SAAAC,GAAS,UAAAC,IAAW,OACd;AACR,MAAIF,KAAY,EAAG,QAAO;AAC1B,MAAIC,EAAQF,CAAI,KAAKC,EAAU,QAAOD;AAGtC,MADsBE,EAAQC,CAAQ,IAClBF,EAAU,QAAO;AAErC,QAAMG,IAAe,CAACC,MAAyB;AAC7C,QAAIA,KAAQ,EAAG,QAAOF;AACtB,UAAMG,IAAW,KAAK,KAAKD,IAAO,CAAC,GAC7BE,IAASF,IAAOC;AACtB,WAAOC,IAAS,IACZ,GAAGP,EAAK,MAAM,GAAGM,CAAQ,CAAC,GAAGH,CAAQ,GAAGH,EAAK,MAAMA,EAAK,SAASO,CAAM,CAAC,KACxE,GAAGP,EAAK,MAAM,GAAGM,CAAQ,CAAC,GAAGH,CAAQ;AAAA,EAC3C;AAMA,MAAIK,IAAM,GACNC,IAAOT,EAAK;AAChB,SAAOS,IAAOD,IAAM,KAAG;AACrB,UAAME,IAAM,KAAK,OAAOF,IAAMC,KAAQ,CAAC;AACvC,IAAIP,EAAQE,EAAaM,CAAG,CAAC,KAAKT,IAChCO,IAAME,IAEND,IAAOC;AAAA,EAEX;AACA,SAAON,EAAaI,CAAG;AACzB;"}

package/dist/components/ui/truncate-text/text-width.js

@@ -0,0 +1,12 @@
+let e;
+function o() {
+  return e === void 0 && (e = document.createElement("canvas").getContext("2d")), e;
+}
+function u(n, r) {
+  const t = o();
+  return t === null ? n.length * 8 : (t.font = r, t.measureText(n).width);
+}
+export {
+  u as measureTextWidth
+};
+//# sourceMappingURL=text-width.js.map

package/dist/components/ui/truncate-text/text-width.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-width.js","sources":["../../../../src/components/ui/truncate-text/text-width.ts"],"sourcesContent":["// A single offscreen canvas, reused across every `<TruncateText mode=\"middle\">` instance and\n// every candidate it measures. `canvas.measureText` is O(1) per call — no layout,\n// no reflow — which is why `middleTruncate`'s binary search calls `measure` a\n// handful of times per resize without it being a performance concern the way a\n// DOM-clone measurement (render, read `offsetWidth`, repeat per candidate) would\n// be for a search space the size of a whole string.\nlet sharedContext: CanvasRenderingContext2D | null | undefined;\n\nfunction getSharedContext(): CanvasRenderingContext2D | null {\n  if (sharedContext === undefined) {\n    sharedContext = document.createElement('canvas').getContext('2d');\n  }\n  return sharedContext;\n}\n\n/**\n * The rendered width of `text` in `font` (a CSS `font` shorthand string, e.g. from\n * `getComputedStyle(el).font`), in CSS pixels.\n *\n * Falls back to a fixed per-character estimate when `canvas` 2D contexts are\n * unavailable (jsdom's default; the real component is exercised by the browser\n * test project instead) — a rough width is enough to keep the search from\n * throwing, and nothing in the unit project renders far enough to compare it\n * against a pixel budget.\n */\nexport function measureTextWidth(text: string, font: string): number {\n  const context = getSharedContext();\n  if (context === null) return text.length * 8;\n  context.font = font;\n  return context.measureText(text).width;\n}\n"],"names":["sharedContext","getSharedContext","measureTextWidth","text","font","context"],"mappings":"AAMA,IAAIA;AAEJ,SAASC,IAAoD;AAC3D,SAAID,MAAkB,WACpBA,IAAgB,SAAS,cAAc,QAAQ,EAAE,WAAW,IAAI,IAE3DA;AACT;AAYO,SAASE,EAAiBC,GAAcC,GAAsB;AACnE,QAAMC,IAAUJ,EAAA;AAChB,SAAII,MAAY,OAAaF,EAAK,SAAS,KAC3CE,EAAQ,OAAOD,GACRC,EAAQ,YAAYF,CAAI,EAAE;AACnC;"}

package/dist/components/ui/truncate-text/truncate-text.js

@@ -0,0 +1,152 @@
+import { jsx as l, jsxs as k } from "react/jsx-runtime";
+import * as n from "react";
+import { cn as x } from "../../../lib/utils.js";
+import { middleTruncate as C } from "./middle-truncate.js";
+import { measureTextWidth as E } from "./text-width.js";
+import { Tooltip as W, TooltipTrigger as g, TooltipContent as S } from "../tooltip/tooltip.js";
+const R = n.forwardRef(
+  function({ children: e, mode: f = "end", className: s, side: a = "top", lines: o = 1, defaultOpen: c, portalContainer: r }, u) {
+    return f === "middle" ? /* @__PURE__ */ l(
+      z,
+      {
+        ref: u,
+        text: e,
+        side: a,
+        portalContainer: r,
+        className: s
+      }
+    ) : /* @__PURE__ */ l(
+      O,
+      {
+        ref: u,
+        text: e,
+        side: a,
+        lines: o,
+        defaultOpen: c,
+        portalContainer: r,
+        className: s
+      }
+    );
+  }
+), O = n.forwardRef(
+  function({ text: e, side: f, lines: s, defaultOpen: a, portalContainer: o, className: c }, r) {
+    const u = n.useRef(null), [d, v] = n.useState(!1), m = n.useCallback(
+      (t) => {
+        u.current = t, typeof r == "function" ? r(t) : r && (r.current = t);
+      },
+      [r]
+    );
+    n.useLayoutEffect(() => {
+      const t = u.current;
+      if (!t) return;
+      const p = () => v(
+        s > 1 ? t.scrollHeight > t.clientHeight + 1 : t.scrollWidth > t.clientWidth + 1
+      );
+      p();
+      const b = new ResizeObserver(p);
+      return b.observe(t), () => b.disconnect();
+    }, [e, s, d]);
+    const T = s > 1, h = T ? {
+      display: "-webkit-box",
+      WebkitLineClamp: s,
+      WebkitBoxOrient: "vertical",
+      overflow: "hidden"
+    } : void 0, i = /* @__PURE__ */ l(
+      "span",
+      {
+        ref: m,
+        className: x("block", T ? "overflow-hidden" : "truncate", c),
+        style: h,
+        children: e
+      }
+    );
+    return d ? /* @__PURE__ */ k(W, { defaultOpen: a, children: [
+      /* @__PURE__ */ l(g, { render: i }),
+      /* @__PURE__ */ l(S, { side: f, portalContainer: o, children: e })
+    ] }) : i;
+  }
+), z = n.forwardRef(
+  function({ text: e, side: f, portalContainer: s, className: a }, o) {
+    const [c, r] = n.useState(null), [u, d] = n.useState(e), [v, m] = n.useState(!1), T = n.useCallback(
+      (i) => {
+        r(i), typeof o == "function" ? o(i) : o && (o.current = i);
+      },
+      [o]
+    );
+    n.useLayoutEffect(() => {
+      if (m(!1), c === null || typeof ResizeObserver > "u") {
+        d(e);
+        return;
+      }
+      const i = () => {
+        const p = c.clientWidth;
+        if (p === 0) return;
+        const b = getComputedStyle(c).font;
+        d(
+          C(e, p, {
+            measure: (w) => E(w, b)
+          })
+        ), m(!0);
+      };
+      i();
+      const t = new ResizeObserver(i);
+      return t.observe(c), () => t.disconnect();
+    }, [c, e]);
+    const h = /* @__PURE__ */ l(
+      "span",
+      {
+        ref: T,
+        className: x(
+          // `flex-1` (`flex: 1 1 0%`) only takes effect when the parent this
+          // renders into happens to itself be a flex container — inert
+          // otherwise, so it's safe alongside `block`. It's not decorative:
+          // without it, a `display: block` element with no explicit width
+          // only *auto-fills a plain block parent* — the browser's default
+          // "fill available width" rule for `width: auto` is specific to
+          // block layout. Nested inside a flex parent (a caller's own cell
+          // wrapping this next to an icon button, say), the same element
+          // becomes a flex item instead, where `flex-basis: auto` means
+          // "size to your own content" — and this component's own content
+          // is whatever it truncated itself to *last* time. Once shrunk, it
+          // would then measure its own shrunken self forever, growing back
+          // only if some ancestor's width changed enough to force a reflow
+          // for an unrelated reason — not when the column actually had more
+          // room to give it all along.
+          "block min-w-0 flex-1",
+          // Nowrap + clip only once `measured` — *before* that, this is the
+          // string's first-ever render, and if it already clips and refuses to
+          // wrap, it dictates its own column's width to `table-layout: auto`
+          // before `ResizeObserver` ever gets a turn: nowrap makes an unbroken
+          // string's min-content the string's *entire* rendered width, so the
+          // browser hands the column exactly that much room — measuring
+          // `clientWidth` after the fact just reads back the width this same
+          // element inflated the column to, not the width some other column
+          // needed and this one gave up.
+          //
+          // Left at the browser's own default on the unmeasured pass rather than
+          // forced to `overflow-wrap: anywhere` — tried that first, and it
+          // overcorrects: telling `auto`-layout this column's min-content is a
+          // single character makes it treat the column as free to take almost
+          // nothing, starving it in favor of siblings with a normal (space- and
+          // punctuation-driven) min-content. The browser's own line-breaking
+          // already finds break opportunities in a URL — after `/`, around `?`,
+          // `=`, `_` — without being told everything is breakable, which is
+          // exactly the multi-line wrap this component exists to replace: worse
+          // than what `nowrap` would give it, but a real, usable column width to
+          // hand to the first `ResizeObserver` measurement, not a starved one.
+          v && "overflow-hidden whitespace-nowrap",
+          a
+        ),
+        children: u
+      }
+    );
+    return u === e ? h : /* @__PURE__ */ k(W, { children: [
+      /* @__PURE__ */ l(g, { render: h }),
+      /* @__PURE__ */ l(S, { side: f, portalContainer: s, children: e })
+    ] });
+  }
+);
+export {
+  R as TruncateText
+};
+//# sourceMappingURL=truncate-text.js.map