@konstructio/ui 0.1.2-alpha.111 → 0.1.2-alpha.112

package/dist/Toast-CRPLONv9.js

@@ -0,0 +1,77 @@
+"use client";
+import { t as O } from "./utils-DnIJruo0.js";
+import { useIsHydrated as b } from "./hooks/useIsHydrated/useIsHydrated.js";
+import { a as D, c as L, i as w, o as C, t as P } from "./react-C685EsYG.js";
+import { t as k } from "./AnimatePresence-BsUYG9bm.js";
+import { TOAST_TRANSITION as B } from "./components/Toast/constants/index.js";
+import { useStackExpansion as G } from "./components/Toast/hooks/useStackExpansion/useStackExpansion.js";
+import { useToastHeights as j } from "./components/Toast/hooks/useToastHeights/useToastHeights.js";
+import { useToastSource as z } from "./components/Toast/hooks/useToastSource/useToastSource.js";
+import { ToastCard as F } from "./components/Toast/components/ToastCard/ToastCard.js";
+import { computeStackLayout as K } from "./components/Toast/utils/compute-stack-layout/compute-stack-layout.js";
+import { useEffect as U, useState as V } from "react";
+import { createPortal as X } from "react-dom";
+import { jsx as s } from "react/jsx-runtime";
+function Y() {
+  !D.current && w();
+  const [t] = V(C.current);
+  return process.env.NODE_ENV !== "production" && L(t !== !0, "You have Reduced Motion enabled on your device. Animations may not appear as expected.", "reduced-motion-disabled"), t;
+}
+var q = ({ autoWidth: t = !1, className: p, closeLabel: l = "Close toast", container: h, duration: a, hoverBehavior: g = "resume", isPortal: S = !0, label: T = "Notifications", limit: c, maxVisible: d = 3, theme: v, toasts: n, onDismiss: M }) => {
+  const m = Y(), E = b(), { heights: y, setHeight: A, removeHeight: H } = j(), { expanded: R, regionHandlers: N } = G(), o = z({
+    toasts: n,
+    onDismiss: M
+  });
+  U(() => {
+    n || o.configure({
+      duration: a,
+      limit: c
+    });
+  }, [
+    n,
+    o.configure,
+    a,
+    c
+  ]);
+  const e = o.toasts.slice().reverse(), u = R && e.length > 0, { offsets: _, frontHeight: x, regionHeight: I } = K({
+    toasts: e,
+    heights: y,
+    expanded: u,
+    maxVisible: d
+  }), f = /* @__PURE__ */ s("section", {
+    "aria-label": T,
+    "data-theme": v,
+    className: O("fixed right-6 bottom-6 z-100 w-97.5 max-w-[calc(100vw-3rem)]", p),
+    style: { pointerEvents: e.length > 0 ? void 0 : "none" },
+    ...N,
+    children: /* @__PURE__ */ s(P.ol, {
+      className: "relative m-0 list-none p-0",
+      animate: { height: I },
+      transition: m ? { duration: 0 } : B,
+      children: /* @__PURE__ */ s(k, { children: e.map((i, r) => /* @__PURE__ */ s(F, {
+        autoWidth: t,
+        closeLabel: l,
+        expanded: u,
+        frontHeight: x,
+        index: r,
+        offset: _[r] ?? 0,
+        reducedMotion: !!m,
+        restartOnLeave: g === "restart",
+        resumeDelay: (e.length - 1 - r) * 300,
+        toast: i,
+        total: e.length,
+        visible: r < d,
+        onDismiss: () => {
+          o.dismiss(i.id);
+        },
+        onExited: H,
+        onHeightChange: A
+      }, i.id)) })
+    })
+  });
+  return S ? E ? X(f, h ?? document.body) : null : f;
+};
+q.displayName = "KonstructToast";
+export {
+  q as t
+};

package/dist/components/Toast/Toast.js

@@ -1,5 +1,5 @@
 "use client";
-import { t as o } from "../../Toast-frCWQhFC.js";
+import { t as o } from "../../Toast-CRPLONv9.js";
 export {
   o as Toast
 };

package/dist/components/Toast/components/ToastCard/ToastCard.js

@@ -1,21 +1,21 @@
 import { t as r } from "../../../../utils-DnIJruo0.js";
-import { t as z } from "../../../../x-C8O1IsaM.js";
-import { n as L, t as h } from "../../../../react-C685EsYG.js";
+import { t as L } from "../../../../x-C8O1IsaM.js";
+import { n as P, t as h } from "../../../../react-C685EsYG.js";
 import { Typography as A } from "../../../Typography/Typography.js";
-import { COLLAPSED_SCALE_STEP as P, DEFAULT_TOAST_DURATION as D, TOAST_ENTER_TRANSITION as j, TOAST_EXIT_TRANSITION as B, TOAST_ICONS as F, TOAST_TRANSITION as U } from "../../constants/index.js";
-import { useToastTimer as X } from "../../hooks/useToastTimer/useToastTimer.js";
-import { toastCloseButtonVariants as k, toastDescriptionVariants as K, toastFrameVariants as q, toastIconVariants as G, toastTitleVariants as J, toastVariants as M } from "../../Toast.variants.js";
-import { useEffect as Q, useRef as W } from "react";
+import { COLLAPSED_SCALE_STEP as D, DEFAULT_TOAST_DURATION as j, TOAST_ENTER_TRANSITION as B, TOAST_EXIT_TRANSITION as F, TOAST_ICONS as U, TOAST_TRANSITION as X } from "../../constants/index.js";
+import { useToastTimer as k } from "../../hooks/useToastTimer/useToastTimer.js";
+import { toastCloseButtonVariants as K, toastDescriptionVariants as q, toastFrameVariants as G, toastIconVariants as J, toastTitleVariants as M, toastVariants as Q } from "../../Toast.variants.js";
+import { useEffect as W, useRef as Y } from "react";
 import { jsx as t, jsxs as o } from "react/jsx-runtime";
-var Y = ({ closeLabel: I, expanded: i, frontHeight: l, index: n, offset: O, reducedMotion: S, restartOnLeave: b, resumeDelay: v, toast: x, total: _, visible: m, onDismiss: p, onExited: E, onHeightChange: d }) => {
-  const T = W(null), [C] = L(), { description: s, duration: R = D, id: c, showCloseButton: w = !0, title: V, type: a = "info" } = x;
-  X({
+var Z = ({ autoWidth: x, closeLabel: I, expanded: i, frontHeight: l, index: n, offset: O, reducedMotion: S, restartOnLeave: v, resumeDelay: b, toast: _, total: w, visible: m, onDismiss: p, onExited: E, onHeightChange: d }) => {
+  const T = Y(null), [C] = P(), { description: s, duration: R = j, id: c, showCloseButton: V = !0, title: g, type: a = "info" } = _;
+  k({
     duration: R,
     paused: i,
-    restart: b,
-    resumeDelay: v,
+    restart: v,
+    resumeDelay: b,
     onExpire: p
-  }), Q(() => {
+  }), W(() => {
     const e = T.current;
     if (!e) return;
     const N = () => {
@@ -27,14 +27,14 @@ var Y = ({ closeLabel: I, expanded: i, frontHeight: l, index: n, offset: O, redu
       y.disconnect();
     };
   }, [c, d]);
-  const g = F[a], u = !i && n !== 0 && l !== 0, f = S ? { duration: 0 } : {
-    ...U,
-    x: j,
-    opacity: B
+  const z = U[a], u = !i && n !== 0 && l !== 0, f = S ? { duration: 0 } : {
+    ...X,
+    x: B,
+    opacity: F
   };
   return /* @__PURE__ */ t(h.li, {
-    className: r("absolute right-0 bottom-0 max-w-full origin-bottom will-change-transform", q({ type: a })),
-    style: { zIndex: C ? _ - n : 0 },
+    className: r("absolute right-0 bottom-0 origin-bottom will-change-transform", x ? "w-max max-w-[calc(100vw-3rem)]" : "max-w-full", G({ type: a })),
+    style: { zIndex: C ? w - n : 0 },
     initial: {
       x: "110%",
       opacity: 1,
@@ -45,7 +45,7 @@ var Y = ({ closeLabel: I, expanded: i, frontHeight: l, index: n, offset: O, redu
       x: 0,
       opacity: m ? 1 : 0,
       y: -O,
-      scale: i ? 1 : 1 - n * P,
+      scale: i ? 1 : 1 - n * D,
       height: u ? l : "auto"
     },
     exit: { opacity: 0 },
@@ -59,24 +59,24 @@ var Y = ({ closeLabel: I, expanded: i, frontHeight: l, index: n, offset: O, redu
       role: "status",
       "aria-live": "polite",
       "aria-atomic": "true",
-      className: M(),
+      className: Q(),
       children: [/* @__PURE__ */ o("div", {
         className: "flex items-center gap-8",
         children: [/* @__PURE__ */ o("div", {
           className: "flex min-w-0 flex-1 items-center gap-2",
-          children: [/* @__PURE__ */ t(g, {
+          children: [/* @__PURE__ */ t(z, {
             size: s ? 20 : 24,
-            className: r(G({ type: a }))
+            className: r(J({ type: a }))
           }), /* @__PURE__ */ t(A, {
             variant: s ? "body2" : "body1",
-            className: r("min-w-0", J({ type: a })),
-            children: V
+            className: r("min-w-0", M({ type: a })),
+            children: g
           })]
-        }), w ? /* @__PURE__ */ o("button", {
+        }), V ? /* @__PURE__ */ o("button", {
           type: "button",
-          className: r(k({ type: a })),
+          className: r(K({ type: a })),
           onClick: p,
-          children: [/* @__PURE__ */ t(z, {
+          children: [/* @__PURE__ */ t(L, {
             className: "size-5",
             "aria-hidden": !0
           }), /* @__PURE__ */ t("span", {
@@ -90,14 +90,14 @@ var Y = ({ closeLabel: I, expanded: i, frontHeight: l, index: n, offset: O, redu
         transition: f,
         children: /* @__PURE__ */ t(A, {
           variant: "body2",
-          className: r(K({ type: a })),
+          className: r(q({ type: a })),
           children: s
         })
       }) : null]
     })
   });
 };
-Y.displayName = "KonstructToastCard";
+Z.displayName = "KonstructToastCard";
 export {
-  Y as ToastCard
+  Z as ToastCard
 };

package/dist/components/index.js

@@ -9,7 +9,7 @@ import { AlertDialog as g } from "./AlertDialog/AlertDialog.js";
 import { Autocomplete as S } from "./Autocomplete/Autocomplete.js";
 import { t as C } from "../Loading-u8hXrFJR.js";
 import { Badge as A } from "./Badge/Badge.js";
-import { t as v } from "../Toast-frCWQhFC.js";
+import { t as v } from "../Toast-CRPLONv9.js";
 import { Typography as L } from "./Typography/Typography.js";
 import { ButtonGroup as E } from "./ButtonGroup/ButtonGroup.js";
 import { Card as F } from "./Card/Card.js";

package/dist/index.js

@@ -14,7 +14,7 @@ import { useToggle as L } from "./hooks/useToggle.js";
 import { Autocomplete as h } from "./components/Autocomplete/Autocomplete.js";
 import { t as F } from "./Loading-u8hXrFJR.js";
 import { Badge as P } from "./components/Badge/Badge.js";
-import { t as M } from "./Toast-frCWQhFC.js";
+import { t as M } from "./Toast-CRPLONv9.js";
 import { Typography as _ } from "./components/Typography/Typography.js";
 import { ButtonGroup as k } from "./components/ButtonGroup/ButtonGroup.js";
 import { Card as U } from "./components/Card/Card.js";

package/dist/lib/components/Toast/Toast.types.d.ts

@@ -30,6 +30,11 @@ export type ToastHeights = Record<string, number>;
  * ```
  */
 export type Props = {
+    /**
+     * Size each toast to its content, growing leftwards up to the viewport
+     * width, instead of the region's fixed width (default: false)
+     */
+    autoWidth?: boolean;
     /** Additional CSS classes for the fixed region */
     className?: string;
     /** Accessible name of every close button (default: 'Close toast') */

package/dist/lib/components/Toast/components/ToastCard/ToastCard.types.d.ts

@@ -1,5 +1,6 @@
 import { ToastItem } from '../../Toast.types';
 export type Props = {
+    autoWidth: boolean;
     closeLabel: string;
     expanded: boolean;
     frontHeight: number;

package/dist/package.json

@@ -2,7 +2,7 @@
   "name": "@konstructio/ui",
   "description": "A set of reusable and customizable React components built for konstruct.io",
   "private": false,
-  "version": "0.1.2-alpha.110",
+  "version": "0.1.2-alpha.111",
   "type": "module",
   "license": "MIT",
   "main": "dist/index.js",

package/package.json

@@ -2,7 +2,7 @@
   "name": "@konstructio/ui",
   "description": "A set of reusable and customizable React components built for konstruct.io",
   "private": false,
-  "version": "0.1.2-alpha.111",
+  "version": "0.1.2-alpha.112",
   "type": "module",
   "license": "MIT",
   "main": "dist/index.js",

package/dist/Toast-frCWQhFC.js

@@ -1,76 +0,0 @@
-"use client";
-import { t as I } from "./utils-DnIJruo0.js";
-import { useIsHydrated as O } from "./hooks/useIsHydrated/useIsHydrated.js";
-import { a as b, c as D, i as L, o as w, t as C } from "./react-C685EsYG.js";
-import { t as P } from "./AnimatePresence-BsUYG9bm.js";
-import { TOAST_TRANSITION as k } from "./components/Toast/constants/index.js";
-import { useStackExpansion as B } from "./components/Toast/hooks/useStackExpansion/useStackExpansion.js";
-import { useToastHeights as G } from "./components/Toast/hooks/useToastHeights/useToastHeights.js";
-import { useToastSource as j } from "./components/Toast/hooks/useToastSource/useToastSource.js";
-import { ToastCard as z } from "./components/Toast/components/ToastCard/ToastCard.js";
-import { computeStackLayout as F } from "./components/Toast/utils/compute-stack-layout/compute-stack-layout.js";
-import { useEffect as K, useState as U } from "react";
-import { createPortal as V } from "react-dom";
-import { jsx as n } from "react/jsx-runtime";
-function X() {
-  !b.current && L();
-  const [t] = U(w.current);
-  return process.env.NODE_ENV !== "production" && D(t !== !0, "You have Reduced Motion enabled on your device. Animations may not appear as expected.", "reduced-motion-disabled"), t;
-}
-var Y = ({ className: t, closeLabel: p = "Close toast", container: l, duration: a, hoverBehavior: h = "resume", isPortal: g = !0, label: S = "Notifications", limit: c, maxVisible: d = 3, theme: T, toasts: s, onDismiss: v }) => {
-  const m = X(), M = O(), { heights: E, setHeight: y, removeHeight: A } = G(), { expanded: H, regionHandlers: R } = B(), o = j({
-    toasts: s,
-    onDismiss: v
-  });
-  K(() => {
-    s || o.configure({
-      duration: a,
-      limit: c
-    });
-  }, [
-    s,
-    o.configure,
-    a,
-    c
-  ]);
-  const e = o.toasts.slice().reverse(), u = H && e.length > 0, { offsets: N, frontHeight: _, regionHeight: x } = F({
-    toasts: e,
-    heights: E,
-    expanded: u,
-    maxVisible: d
-  }), f = /* @__PURE__ */ n("section", {
-    "aria-label": S,
-    "data-theme": T,
-    className: I("fixed right-6 bottom-6 z-100 w-97.5 max-w-[calc(100vw-3rem)]", t),
-    style: { pointerEvents: e.length > 0 ? void 0 : "none" },
-    ...R,
-    children: /* @__PURE__ */ n(C.ol, {
-      className: "relative m-0 list-none p-0",
-      animate: { height: x },
-      transition: m ? { duration: 0 } : k,
-      children: /* @__PURE__ */ n(P, { children: e.map((i, r) => /* @__PURE__ */ n(z, {
-        closeLabel: p,
-        expanded: u,
-        frontHeight: _,
-        index: r,
-        offset: N[r] ?? 0,
-        reducedMotion: !!m,
-        restartOnLeave: h === "restart",
-        resumeDelay: (e.length - 1 - r) * 300,
-        toast: i,
-        total: e.length,
-        visible: r < d,
-        onDismiss: () => {
-          o.dismiss(i.id);
-        },
-        onExited: A,
-        onHeightChange: y
-      }, i.id)) })
-    })
-  });
-  return g ? M ? V(f, l ?? document.body) : null : f;
-};
-Y.displayName = "KonstructToast";
-export {
-  Y as t
-};