@veracity/vui 5.2.2 → 5.3.0-alpha.399291.2606221048

package/dist/toast/ToastItem.js

@@ -0,0 +1,176 @@
+import styled from "../core/styled.js";
+import Icon from "../icon/icon.js";
+import { DismissButton } from "../dismissButton/DismissButton.js";
+import Spinner from "../spinner/spinner.js";
+import { intentStyle } from "./theme.js";
+import { memo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/toast/ToastItem.tsx
+const intentIcon = {
+	info: "uiInfoCircle",
+	success: "uiCheckCircle",
+	warning: "uiExclamationTriangle",
+	error: "uiExclamationCircle"
+};
+const ToastRoot = styled.div`
+  ${`
+  
+  --vui-toast-text-size: var(--vui-caption-md-font-size, 16px);
+  --vui-toast-text-weight: var(--vui-caption-md-font-weight, 400);
+  --vui-toast-text-line-height: var(--vui-caption-md-line-height, 1.5);
+  font-size: var(--vui-toast-text-size);
+  font-weight: var(--vui-toast-text-weight);
+  line-height: var(--vui-toast-text-line-height);
+
+  
+  --vui-toast-title-weight: var(--vui-caption-md-font-weight-bold, 600);
+  font-weight: var(--vui-toast-title-weight);
+
+  
+  --vui-toast-gap-row: 16px;
+  --vui-toast-gap-text: 4px;
+  --vui-toast-gap-action-bar: 8px;
+  --vui-toast-padding-row: 8px 16px;
+  --vui-toast-padding-icon: 8px 0;
+  --vui-toast-padding-action-bar: 8px 16px;
+
+  
+  --vui-toast-min-height: 56px;
+  --vui-toast-min-width: 320px;
+  --vui-toast-width-default: 480px;
+  --vui-toast-width-wide: 560px;
+  --vui-toast-icon-size: 24px;
+  --vui-toast-text-clamp: 2;
+
+  
+  --vui-toast-shadow:
+    0px 0px 1px 0px rgba(0, 0, 0, 0.05),
+    0px 10px 20px 0px rgba(0, 0, 0, 0.15);
+
+  
+  --vui-toast-animation-duration: 0.2s;
+  --vui-toast-animation-timing: ease-in-out;
+
+`}
+  animation: vui-fadeDown var(--vui-toast-animation-duration) var(--vui-toast-animation-timing);
+  box-shadow: var(--vui-toast-shadow);
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  min-height: var(--vui-toast-min-height);
+  min-width: var(--vui-toast-min-width);
+  width: ${({ $size }) => $size === "wide" ? "var(--vui-toast-width-wide)" : "var(--vui-toast-width-default)"};
+  ${({ $status }) => intentStyle[$status]}
+`;
+const Row = styled.div`
+  align-items: stretch;
+  display: flex;
+  flex-direction: row;
+  gap: var(--vui-toast-gap-row);
+  padding: var(--vui-toast-padding-row);
+`;
+const IconWrap = styled.div`
+  align-self: ${({ $inline }) => $inline ? "center" : "flex-start"};
+  color: var(--vui-toast-intent-color);
+  display: flex;
+  flex-shrink: 0;
+  padding: var(--vui-toast-padding-icon);
+`;
+const TextArea = styled.div`
+  display: ${({ $inline }) => $inline ? "block" : "flex"};
+  flex: 1;
+  flex-direction: column;
+  font-size: var(--vui-toast-text-size);
+  font-weight: var(--vui-toast-text-weight);
+  gap: var(--vui-toast-gap-text);
+  line-height: var(--vui-toast-text-line-height);
+  min-width: 0;
+  padding: var(--vui-toast-padding-icon);
+`;
+const Title = styled.p`
+  color: var(--vui-toast-intent-color);
+  display: ${({ $inline }) => $inline ? "inline" : "block"};
+  font-weight: var(--vui-toast-title-weight);
+  margin: 0;
+`;
+const Description = styled.p`
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(--vui-toast-text-clamp);
+  color: var(--vui-toast-intent-color);
+  display: ${({ $inline }) => $inline ? "inline" : "-webkit-box"};
+  margin: 0;
+  overflow: hidden;
+`;
+const DismissWrap = styled.div`
+  --vui-dismiss-fg: var(--vui-toast-intent-color);
+  align-items: flex-start;
+  align-self: ${({ $inline }) => $inline ? "center" : "flex-start"};
+  display: flex;
+  flex-shrink: 0;
+`;
+const ActionBar = styled.div`
+  align-items: center;
+  background-color: var(--vui-background-default, white);
+  box-sizing: border-box;
+  display: flex;
+  gap: var(--vui-toast-gap-action-bar);
+  justify-content: flex-end;
+  padding: var(--vui-toast-padding-action-bar);
+  width: 100%;
+`;
+const ToastItemInner = ({ action, icon, onClose, showDismissButton = true, size = "default", status = "info", text, textLayout = "stacked", title }) => {
+	const isInline = textLayout === "inline";
+	return /* @__PURE__ */ jsxs(ToastRoot, {
+		role: "status",
+		"aria-live": "polite",
+		$status: status,
+		$size: size,
+		children: [/* @__PURE__ */ jsxs(Row, { children: [
+			/* @__PURE__ */ jsx(IconWrap, {
+				$inline: isInline,
+				children: icon !== void 0 && icon !== "" ? typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, {
+					name: icon,
+					h: 24,
+					w: 24
+				}) : icon : status === "loading" ? /* @__PURE__ */ jsx(Spinner, {
+					size: 24,
+					p: 0
+				}) : /* @__PURE__ */ jsx(Icon, {
+					name: intentIcon[status],
+					h: 24,
+					w: 24
+				})
+			}),
+			/* @__PURE__ */ jsxs(TextArea, {
+				$inline: isInline,
+				children: [
+					!!title && /* @__PURE__ */ jsx(Title, {
+						$inline: isInline,
+						children: title
+					}),
+					isInline && !!title && !!text && " ",
+					!!text && /* @__PURE__ */ jsx(Description, {
+						$inline: isInline,
+						children: text
+					})
+				]
+			}),
+			showDismissButton && onClose && /* @__PURE__ */ jsx(DismissWrap, {
+				$inline: isInline,
+				children: /* @__PURE__ */ jsx(DismissButton, {
+					size: "md",
+					onClick: onClose,
+					"aria-label": "Close"
+				})
+			})
+		] }), !!action && /* @__PURE__ */ jsx(ActionBar, { children: action })]
+	});
+};
+const ToastItem = memo(ToastItemInner);
+ToastItem.displayName = "ToastItem";
+
+//#endregion
+export { ToastItem };
+globalThis.__vuiVersion__ = "5.3.0"
+//# sourceMappingURL=ToastItem.js.map

package/dist/toast/ToastItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToastItem.js","names":[],"sources":["../../src/toast/ToastItem.tsx"],"sourcesContent":["import { memo } from 'react'\n\nimport type { ToastRenderProps, ToastIntent, ToastSize, ToastStatus } from './toast.types'\n\nimport { styled } from '../core'\nimport { DismissButton } from '../dismissButton'\nimport { Icon } from '../icon'\nimport { Spinner } from '../spinner'\nimport { intentStyle } from './theme'\n\nconst intentIcon: Record<ToastIntent, string> = {\n  info: 'uiInfoCircle',\n  success: 'uiCheckCircle',\n  warning: 'uiExclamationTriangle',\n  error: 'uiExclamationCircle',\n}\n\n// Typography tokens (caption/md with global token fallback)\nconst toastTypography = `\n  --vui-toast-text-size: var(--vui-caption-md-font-size, 16px);\n  --vui-toast-text-weight: var(--vui-caption-md-font-weight, 400);\n  --vui-toast-text-line-height: var(--vui-caption-md-line-height, 1.5);\n  font-size: var(--vui-toast-text-size);\n  font-weight: var(--vui-toast-text-weight);\n  line-height: var(--vui-toast-text-line-height);\n`\n\n// Title typography (bold override)\nconst toastTitleTypography = `\n  --vui-toast-title-weight: var(--vui-caption-md-font-weight-bold, 600);\n  font-weight: var(--vui-toast-title-weight);\n`\n\n// Spacing tokens\nconst toastSpacing = `\n  --vui-toast-gap-row: 16px;\n  --vui-toast-gap-text: 4px;\n  --vui-toast-gap-action-bar: 8px;\n  --vui-toast-padding-row: 8px 16px;\n  --vui-toast-padding-icon: 8px 0;\n  --vui-toast-padding-action-bar: 8px 16px;\n`\n\n// Sizing tokens\nconst toastSizing = `\n  --vui-toast-min-height: 56px;\n  --vui-toast-min-width: 320px;\n  --vui-toast-width-default: 480px;\n  --vui-toast-width-wide: 560px;\n  --vui-toast-icon-size: 24px;\n  --vui-toast-text-clamp: 2;\n`\n\n// Shadow tokens\nconst toastShadow = `\n  --vui-toast-shadow:\n    0px 0px 1px 0px rgba(0, 0, 0, 0.05),\n    0px 10px 20px 0px rgba(0, 0, 0, 0.15);\n`\n\n// Animation tokens\nconst toastAnimation = `\n  --vui-toast-animation-duration: 0.2s;\n  --vui-toast-animation-timing: ease-in-out;\n`\n\n// All tokens combined — declared once on ToastRoot, cascade to all children\nconst toastTokens = `\n  ${toastTypography}\n  ${toastTitleTypography}\n  ${toastSpacing}\n  ${toastSizing}\n  ${toastShadow}\n  ${toastAnimation}\n`\n\nconst ToastRoot = styled.div<{ $status: ToastStatus; $size: ToastSize }>`\n  ${toastTokens}\n  animation: vui-fadeDown var(--vui-toast-animation-duration) var(--vui-toast-animation-timing);\n  box-shadow: var(--vui-toast-shadow);\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  min-height: var(--vui-toast-min-height);\n  min-width: var(--vui-toast-min-width);\n  width: ${({ $size }) => ($size === 'wide' ? 'var(--vui-toast-width-wide)' : 'var(--vui-toast-width-default)')};\n  ${({ $status }) => intentStyle[$status]}\n`\n\nconst Row = styled.div`\n  align-items: stretch;\n  display: flex;\n  flex-direction: row;\n  gap: var(--vui-toast-gap-row);\n  padding: var(--vui-toast-padding-row);\n`\n\nconst IconWrap = styled.div<{ $inline?: boolean }>`\n  align-self: ${({ $inline }) => ($inline ? 'center' : 'flex-start')};\n  color: var(--vui-toast-intent-color);\n  display: flex;\n  flex-shrink: 0;\n  padding: var(--vui-toast-padding-icon);\n`\nconst TextArea = styled.div<{ $inline?: boolean }>`\n  display: ${({ $inline }) => ($inline ? 'block' : 'flex')};\n  flex: 1;\n  flex-direction: column;\n  font-size: var(--vui-toast-text-size);\n  font-weight: var(--vui-toast-text-weight);\n  gap: var(--vui-toast-gap-text);\n  line-height: var(--vui-toast-text-line-height);\n  min-width: 0;\n  padding: var(--vui-toast-padding-icon);\n`\n\nconst Title = styled.p<{ $inline?: boolean }>`\n  color: var(--vui-toast-intent-color);\n  display: ${({ $inline }) => ($inline ? 'inline' : 'block')};\n  font-weight: var(--vui-toast-title-weight);\n  margin: 0;\n`\n\nconst Description = styled.p<{ $inline?: boolean }>`\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: var(--vui-toast-text-clamp);\n  color: var(--vui-toast-intent-color);\n  display: ${({ $inline }) => ($inline ? 'inline' : '-webkit-box')};\n  margin: 0;\n  overflow: hidden;\n`\n\nconst DismissWrap = styled.div<{ $inline?: boolean }>`\n  --vui-dismiss-fg: var(--vui-toast-intent-color);\n  align-items: flex-start;\n  align-self: ${({ $inline }) => ($inline ? 'center' : 'flex-start')};\n  display: flex;\n  flex-shrink: 0;\n`\n\nconst ActionBar = styled.div`\n  align-items: center;\n  background-color: var(--vui-background-default, white);\n  box-sizing: border-box;\n  display: flex;\n  gap: var(--vui-toast-gap-action-bar);\n  justify-content: flex-end;\n  padding: var(--vui-toast-padding-action-bar);\n  width: 100%;\n`\n\nexport interface ToastItemProps extends ToastRenderProps {\n  onClose?: () => void\n}\n\nconst ToastItemInner = ({\n  action,\n  icon,\n  onClose,\n  showDismissButton = true,\n  size = 'default',\n  status = 'info',\n  text,\n  textLayout = 'stacked',\n  title,\n}: ToastItemProps) => {\n  const isInline = textLayout === 'inline'\n  const resolvedIcon =\n    icon !== undefined && icon !== '' ? (\n      typeof icon === 'string' ? (\n        <Icon name={icon as any} h={24} w={24} />\n      ) : (\n        icon\n      )\n    ) : status === 'loading' ? (\n      <Spinner size={24} p={0} />\n    ) : (\n      <Icon name={intentIcon[status] as any} h={24} w={24} />\n    )\n\n  return (\n    <ToastRoot role=\"status\" aria-live=\"polite\" $status={status} $size={size}>\n      <Row>\n        <IconWrap $inline={isInline}>{resolvedIcon}</IconWrap>\n        <TextArea $inline={isInline}>\n          {!!title && <Title $inline={isInline}>{title}</Title>}\n          {isInline && !!title && !!text && ' '}\n          {!!text && <Description $inline={isInline}>{text}</Description>}\n        </TextArea>\n        {showDismissButton && onClose && (\n          <DismissWrap $inline={isInline}>\n            <DismissButton size=\"md\" onClick={onClose} aria-label=\"Close\" />\n          </DismissWrap>\n        )}\n      </Row>\n      {!!action && <ActionBar>{action}</ActionBar>}\n    </ToastRoot>\n  )\n}\n\nexport const ToastItem = memo(ToastItemInner)\nToastItem.displayName = 'ToastItem'\n"],"mappings":";;;;;;;;;AAUA,MAAM,aAA0C;CAC9C,MAAM;CACN,SAAS;CACT,SAAS;CACT,OAAO;AACT;AA6DA,MAAM,YAAY,OAAO,GAA+C;IACpE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAAY;;;;;;;;YAQJ,EAAE,YAAa,UAAU,SAAS,gCAAgC,iCAAkC;KAC3G,EAAE,cAAc,YAAY,SAAS;;AAG1C,MAAM,MAAM,OAAO,GAAG;;;;;;;AAQtB,MAAM,WAAW,OAAO,GAA0B;iBACjC,EAAE,cAAe,UAAU,WAAW,aAAc;;;;;;AAMrE,MAAM,WAAW,OAAO,GAA0B;cACpC,EAAE,cAAe,UAAU,UAAU,OAAQ;;;;;;;;;;AAW3D,MAAM,QAAQ,OAAO,CAAwB;;cAE/B,EAAE,cAAe,UAAU,WAAW,QAAS;;;;AAK7D,MAAM,cAAc,OAAO,CAAwB;;;;cAIrC,EAAE,cAAe,UAAU,WAAW,cAAe;;;;AAKnE,MAAM,cAAc,OAAO,GAA0B;;;iBAGpC,EAAE,cAAe,UAAU,WAAW,aAAc;;;;AAKrE,MAAM,YAAY,OAAO,GAAG;;;;;;;;;;AAe5B,MAAM,kBAAkB,EACtB,QACA,MACA,SACA,oBAAoB,MACpB,OAAO,WACP,SAAS,QACT,MACA,aAAa,WACb,YACoB;CACpB,MAAM,WAAW,eAAe;CAchC,OACE,qBAAC,WAAD;EAAW,MAAK;EAAS,aAAU;EAAS,SAAS;EAAQ,OAAO;YAApE,CACE,qBAAC,KAAD;GACE,oBAAC,UAAD;IAAU,SAAS;cAfvB,SAAS,UAAa,SAAS,KAC7B,OAAO,SAAS,WACd,oBAAC,MAAD;KAAM,MAAM;KAAa,GAAG;KAAI,GAAG;IAAK,KAExC,OAEA,WAAW,YACb,oBAAC,SAAD;KAAS,MAAM;KAAI,GAAG;IAAI,KAE1B,oBAAC,MAAD;KAAM,MAAM,WAAW;KAAgB,GAAG;KAAI,GAAG;IAAK;GAMC;GACrD,qBAAC,UAAD;IAAU,SAAS;cAAnB;KACG,CAAC,CAAC,SAAS,oBAAC,OAAD;MAAO,SAAS;gBAAW;KAAa;KACnD,YAAY,CAAC,CAAC,SAAS,CAAC,CAAC,QAAQ;KACjC,CAAC,CAAC,QAAQ,oBAAC,aAAD;MAAa,SAAS;gBAAW;KAAkB;IACtD;;GACT,qBAAqB,WACpB,oBAAC,aAAD;IAAa,SAAS;cACpB,oBAAC,eAAD;KAAe,MAAK;KAAK,SAAS;KAAS,cAAW;IAAS;GACpD;EAEZ,MACJ,CAAC,CAAC,UAAU,oBAAC,WAAD,YAAY,OAAkB,EAClC;;AAEf;AAEA,MAAa,YAAY,KAAK,cAAc;AAC5C,UAAU,cAAc"}

package/dist/toast/Toaster.d.ts

@@ -0,0 +1,9 @@
+import { ToastItem, ToastItemProps } from "./ToastItem.js";
+
+//#region src/toast/Toaster.d.ts
+declare const toasterWidth = 480;
+declare const _default: import("react").MemoExoticComponent<() => import("react").JSX.Element>;
+//#endregion
+export { _default, toasterWidth };
+
+//# sourceMappingURL=Toaster.d.ts.map

package/dist/toast/Toaster.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toaster.d.ts","names":[],"sources":["../../src/toast/Toaster.tsx"],"mappings":";;;cAYa,YAAA;AAAA,cAAkB,QAAA"}

package/dist/toast/{toast.js → Toaster.js}

@@ -2,35 +2,33 @@ import zIndices_default from "../theme/foundations/zIndices.js";
 import { v } from "../core/styled.js";
 import { useVuiContext } from "../core/vuiProvider/context.js";
 import Box from "../box/box.js";
+import { ToastItem } from "./ToastItem.js";
 import { memo } from "react";
 import { jsx } from "react/jsx-runtime";
 
-//#region src/toast/toast.tsx
-const toasterWidth = 420;
+//#region src/toast/Toaster.tsx
+const toasterWidth = 480;
 const Toaster = () => {
 	const { toasts } = useVuiContext();
-	const padding = {
-		md: "16px",
-		sm: "4px",
-		xs: "2px"
-	};
 	const right = {
 		md: "1rem",
-		sm: 0,
-		xs: 0
+		sm: "0.5rem",
+		xs: "0.5rem"
 	};
 	const width = {
-		md: 420,
-		sm: 420,
+		md: 560,
+		sm: 560,
 		xs: "100%"
 	};
 	return /* @__PURE__ */ jsx(Box, {
 		bottom: toasts?.list?.length ? "1rem" : "-2rem",
 		className: "vui-toaster",
-		display: "block",
+		alignItems: "flex-end",
+		display: "flex",
+		flexDirection: "column",
+		gap: "8px",
 		maxW: width,
 		minW: width,
-		p: padding,
 		position: "fixed",
 		right,
 		zIndex: zIndices_default.toast,
@@ -40,9 +38,9 @@ const Toaster = () => {
 		}, toast.id))
 	});
 };
-var toast_default = memo(Toaster);
+var Toaster_default = memo(Toaster);
 
 //#endregion
-export { toast_default as default };
-globalThis.__vuiVersion__ = "5.2.2"
-//# sourceMappingURL=toast.js.map
+export { Toaster_default as default, toasterWidth };
+globalThis.__vuiVersion__ = "5.3.0"
+//# sourceMappingURL=Toaster.js.map

package/dist/toast/Toaster.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toaster.js","names":["zIndices"],"sources":["../../src/toast/Toaster.tsx"],"sourcesContent":["import { memo } from 'react'\n\nimport type { ToastListItem } from './toast.types'\n\nimport { Box } from '../box'\nimport { v } from '../core/styled'\nimport { useVuiContext } from '../core/vuiProvider/context'\nimport zIndices from '../theme/foundations/zIndices'\n\nexport { ToastItem } from './ToastItem'\nexport type { ToastItemProps } from './ToastItem'\n\nexport const toasterWidth = 480\n\nconst Toaster = () => {\n  const { toasts } = useVuiContext()\n\n  const right = { md: '1rem', sm: '0.5rem', xs: '0.5rem' }\n  const width = { md: 560, sm: 560, xs: '100%' }\n  const bottom = toasts?.list?.length ? '1rem' : '-2rem'\n\n  return (\n    <Box\n      bottom={bottom}\n      className=\"vui-toaster\"\n      alignItems=\"flex-end\"\n      display=\"flex\"\n      flexDirection=\"column\"\n      gap=\"8px\"\n      maxW={width}\n      minW={width}\n      position=\"fixed\"\n      right={right}\n      zIndex={zIndices.toast}\n    >\n      {toasts?.list?.map?.((toast: ToastListItem) => (\n        <v.div id={`toast_${toast.id}`} key={toast.id}>\n          {toast.component}\n        </v.div>\n      ))}\n    </Box>\n  )\n}\n\nexport default memo(Toaster)\n"],"mappings":";;;;;;;;;AAYA,MAAa,eAAe;AAE5B,MAAM,gBAAgB;CACpB,MAAM,EAAE,WAAW,cAAc;CAEjC,MAAM,QAAQ;EAAE,IAAI;EAAQ,IAAI;EAAU,IAAI;CAAS;CACvD,MAAM,QAAQ;EAAE,IAAI;EAAK,IAAI;EAAK,IAAI;CAAO;CAG7C,OACE,oBAAC,KAAD;EACE,QAJW,QAAQ,MAAM,SAAS,SAAS;EAK3C,WAAU;EACV,YAAW;EACX,SAAQ;EACR,eAAc;EACd,KAAI;EACJ,MAAM;EACN,MAAM;EACN,UAAS;EACF;EACP,QAAQA,iBAAS;YAEhB,QAAQ,MAAM,OAAO,UACpB,oBAAC,EAAE,KAAH;GAAO,IAAI,SAAS,MAAM;aACvB,MAAM;EACF,GAF8B,MAAM,EAEpC,CACR;CACE;AAET;AAEA,sBAAe,KAAK,OAAO"}

package/dist/toast/index.d.ts

@@ -1,4 +1,5 @@
 import { ToastListItem } from "../core/types.js";
-import { _default } from "./toast.js";
-import { ToastDuration, ToastOptions, ToastSetup } from "./toast.types.js";
-import { defaultDuration, fastToastDuration, slowToastDuration, useToast } from "./useToast.js";
+import { ToastDuration, ToastIntent, ToastOptions, ToastRenderProps, ToastSize, ToastStatus, ToastTextLayout } from "./toast.types.js";
+import { ToastItem, ToastItemProps } from "./ToastItem.js";
+import { _default, toasterWidth } from "./Toaster.js";
+import { defaultDuration, fastToastDuration, mediumToastDuration, slowToastDuration, useToast } from "./useToast.js";

package/dist/toast/theme.js

@@ -0,0 +1,29 @@
+//#region src/toast/theme.ts
+/** Token references per semantic intent. `loading` shares info tokens. */
+const intentTokens = {
+	info: {
+		solid: "var(--vui-feedback-info-solid)",
+		subtle: "var(--vui-feedback-info-subtle)"
+	},
+	success: {
+		solid: "var(--vui-feedback-success-solid)",
+		subtle: "var(--vui-feedback-success-subtle)"
+	},
+	warning: {
+		solid: "var(--vui-feedback-warning-solid)",
+		subtle: "var(--vui-feedback-warning-subtle)"
+	},
+	error: {
+		solid: "var(--vui-feedback-danger-solid)",
+		subtle: "var(--vui-feedback-danger-subtle)"
+	},
+	get loading() {
+		return intentTokens.info;
+	}
+};
+const intentStyle = Object.fromEntries(Object.entries(intentTokens).map(([intent, t]) => [intent, `--vui-toast-intent-color: ${t.solid}; background-color: ${t.subtle}; border: 1px solid ${t.solid};`]));
+
+//#endregion
+export { intentStyle };
+globalThis.__vuiVersion__ = "5.3.0"
+//# sourceMappingURL=theme.js.map

package/dist/toast/theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.js","names":[],"sources":["../../src/toast/theme.ts"],"sourcesContent":["import type { ToastStatus } from './toast.types'\n\ninterface IntentTokens {\n  solid: string // border + intent color\n  subtle: string // background\n}\n\n/** Token references per semantic intent. `loading` shares info tokens. */\nconst intentTokens: Record<ToastStatus, IntentTokens> = {\n  info: {\n    solid: 'var(--vui-feedback-info-solid)',\n    subtle: 'var(--vui-feedback-info-subtle)',\n  },\n  success: {\n    solid: 'var(--vui-feedback-success-solid)',\n    subtle: 'var(--vui-feedback-success-subtle)',\n  },\n  warning: {\n    solid: 'var(--vui-feedback-warning-solid)',\n    subtle: 'var(--vui-feedback-warning-subtle)',\n  },\n  error: {\n    solid: 'var(--vui-feedback-danger-solid)',\n    subtle: 'var(--vui-feedback-danger-subtle)',\n  },\n  get loading() {\n    return intentTokens.info\n  },\n}\n\nexport const intentStyle = Object.fromEntries(\n  Object.entries(intentTokens).map(([intent, t]) => [\n    intent,\n    `--vui-toast-intent-color: ${t.solid}; background-color: ${t.subtle}; border: 1px solid ${t.solid};`,\n  ]),\n) as Record<ToastStatus, string>\n"],"mappings":";;AAQA,MAAM,eAAkD;CACtD,MAAM;EACJ,OAAO;EACP,QAAQ;CACV;CACA,SAAS;EACP,OAAO;EACP,QAAQ;CACV;CACA,SAAS;EACP,OAAO;EACP,QAAQ;CACV;CACA,OAAO;EACL,OAAO;EACP,QAAQ;CACV;CACA,IAAI,UAAU;EACZ,OAAO,aAAa;CACtB;AACF;AAEA,MAAa,cAAc,OAAO,YAChC,OAAO,QAAQ,YAAY,CAAC,CAAC,KAAK,CAAC,QAAQ,OAAO,CAChD,QACA,6BAA6B,EAAE,MAAM,sBAAsB,EAAE,OAAO,sBAAsB,EAAE,MAAM,EACpG,CAAC,CACH"}

package/dist/toast/toast.types.d.ts

@@ -1,19 +1,30 @@
 import { ToastListItem } from "../core/types.js";
-import { NotificationProps } from "../notification/notification.types.js";
+import { IconProp } from "../icon/icon.types.js";
+import { JSX, ReactNode } from "react";
 
 //#region src/toast/toast.types.d.ts
-type ToastDuration = 'fast' | 'slow' | 'sticky';
-interface ToastSetup {
-  options: ToastOptions;
-  componentList: ToastListItem[];
+type ToastDuration = 'fast' | 'medium' | 'slow' | 'sticky';
+type ToastSize = 'default' | 'wide';
+type ToastIntent = 'error' | 'info' | 'success' | 'warning';
+type ToastStatus = ToastIntent | 'loading';
+type ToastTextLayout = 'stacked' | 'inline';
+interface ToastRenderProps {
+  action?: ReactNode;
+  icon?: IconProp | JSX.Element | '';
+  showDismissButton?: boolean;
+  size?: ToastSize;
+  status?: ToastStatus;
+  text?: ReactNode;
+  textLayout?: ToastTextLayout;
+  title?: ReactNode;
 }
-interface ToastOptions extends NotificationProps {
+interface ToastOptions extends ToastRenderProps {
   id?: string;
   duration?: ToastDuration;
   /** @deprecated According to new UX requirements all toasts should be dismissible */
   dismissible?: boolean;
 }
 //#endregion
-export { ToastDuration, ToastOptions, ToastSetup };
+export { ToastDuration, ToastIntent, ToastOptions, ToastRenderProps, ToastSize, ToastStatus, ToastTextLayout };
 
 //# sourceMappingURL=toast.types.d.ts.map

package/dist/toast/toast.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toast.types.d.ts","names":[],"sources":["../../src/toast/toast.types.ts"],"mappings":";;;;KAMY,aAAA;AAAA,UAEK,UAAA;EACf,OAAA,EAAS,YAAA;EACT,aAAA,EAAe,aAAa;AAAA;AAAA,UAGb,YAAA,SAAqB,iBAAiB;EACrD,EAAA;EACA,QAAA,GAAW,aAAA;;EAEX,WAAA;AAAA"}
+{"version":3,"file":"toast.types.d.ts","names":[],"sources":["../../src/toast/toast.types.ts"],"mappings":";;;;;KAQY,aAAA;AAAA,KAEA,SAAA;AAAA,KAEA,WAAA;AAAA,KAEA,WAAA,GAAc,WAAW;AAAA,KAEzB,eAAA;AAAA,UAEK,gBAAA;EACf,MAAA,GAAS,SAAA;EACT,IAAA,GAAO,QAAA,GAAW,GAAA,CAAI,OAAA;EACtB,iBAAA;EACA,IAAA,GAAO,SAAA;EACP,MAAA,GAAS,WAAA;EACT,IAAA,GAAO,SAAA;EACP,UAAA,GAAa,eAAA;EACb,KAAA,GAAQ,SAAA;AAAA;AAAA,UAGO,YAAA,SAAqB,gBAAgB;EACpD,EAAA;EACA,QAAA,GAAW,aAAA;EAjBU;EAmBrB,WAAA;AAAA"}

package/dist/toast/useToast.d.ts

@@ -4,17 +4,18 @@ import { ReactNode } from "react";
 //#region src/toast/useToast.d.ts
 declare const defaultDuration = "fast";
 declare const fastToastDuration = 4000;
+declare const mediumToastDuration = 6000;
 declare const slowToastDuration = 8000;
 declare const useToast: () => {
   showToast: (options?: ToastOptions) => void;
   hideToast: (id: string) => void;
-  showInfo: (text: ReactNode, duration?: ToastDuration) => void;
-  showSuccess: (text: ReactNode, duration?: ToastDuration) => void;
-  showWarning: (text: ReactNode, duration?: ToastDuration) => void;
-  showError: (text: ReactNode, duration?: ToastDuration) => void;
-  showLoading: (text: ReactNode, duration?: ToastDuration) => void;
+  showInfo: (text: ReactNode, duration?: ToastDuration, options?: Omit<ToastOptions, "text" | "status" | "duration">) => void;
+  showSuccess: (text: ReactNode, duration?: ToastDuration, options?: Omit<ToastOptions, "text" | "status" | "duration">) => void;
+  showWarning: (text: ReactNode, duration?: ToastDuration, options?: Omit<ToastOptions, "text" | "status" | "duration">) => void;
+  showError: (text: ReactNode, duration?: ToastDuration, options?: Omit<ToastOptions, "text" | "status" | "duration">) => void;
+  showLoading: (text: ReactNode, duration?: ToastDuration, options?: Omit<ToastOptions, "text" | "status" | "duration">) => void;
 };
 //#endregion
-export { defaultDuration, fastToastDuration, slowToastDuration, useToast };
+export { defaultDuration, fastToastDuration, mediumToastDuration, slowToastDuration, useToast };
 
 //# sourceMappingURL=useToast.d.ts.map

package/dist/toast/useToast.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useToast.d.ts","names":[],"sources":["../../src/toast/useToast.tsx"],"mappings":";;;;cAQa,eAAA;AAAA,cACA,iBAAA;AAAA,cACA,iBAAA;AAAA,cAWA,QAAA;wBAG8B,YAAA;;mBAqChC,SAAA,EAAS,QAAA,GAAY,aAAA;sBAKrB,SAAA,EAAS,QAAA,GAAY,aAAA;sBAKrB,SAAA,EAAS,QAAA,GAAY,aAAA;oBAKrB,SAAA,EAAS,QAAA,GAAY,aAAA;sBAKrB,SAAA,EAAS,QAAA,GAAY,aAAA;AAAA"}
+{"version":3,"file":"useToast.d.ts","names":[],"sources":["../../src/toast/useToast.tsx"],"mappings":";;;;cAUa,eAAA;AAAA,cACA,iBAAA;AAAA,cACA,mBAAA;AAAA,cACA,iBAAA;AAAA,cAiBA,QAAA;wBAaE,YAAA;;mBAmDH,SAAA,EAAS,QAAA,GACL,aAAA,EAAa,OAAA,GACb,IAAA,CAAK,YAAA;sBAOT,SAAA,EAAS,QAAA,GACL,aAAA,EAAa,OAAA,GACb,IAAA,CAAK,YAAA;sBAOT,SAAA,EAAS,QAAA,GACL,aAAA,EAAa,OAAA,GACb,IAAA,CAAK,YAAA;oBAMV,SAAA,EAAS,QAAA,GAAY,aAAA,EAAa,OAAA,GAAqB,IAAA,CAAK,YAAA;sBAO3D,SAAA,EAAS,QAAA,GACL,aAAA,EAAa,OAAA,GACb,IAAA,CAAK,YAAA;AAAA"}

package/dist/toast/useToast.js

@@ -1,79 +1,99 @@
 import { uid } from "../utils/uid.js";
 import { useVuiContext } from "../core/vuiProvider/context.js";
-import Notification from "../notification/notification.js";
-import { useCallback } from "react";
+import { ToastItem } from "./ToastItem.js";
+import { useCallback, useEffect, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/toast/useToast.tsx
 const defaultDuration = "fast";
 const fastToastDuration = 4e3;
+const mediumToastDuration = 6e3;
 const slowToastDuration = 8e3;
-const setup = {
-	options: { duration: defaultDuration },
-	componentList: []
+const getDurationTime = (duration) => {
+	switch (duration) {
+		case "fast": return fastToastDuration;
+		case "medium": return mediumToastDuration;
+		case "slow": return slowToastDuration;
+		default: throw new Error(`[VUI] useToast: unhandled duration "${duration}"`);
+	}
 };
-const getDurationTime = (duration) => duration === "fast" ? fastToastDuration : slowToastDuration;
 const useToast = () => {
 	const { addToast, removeToast } = useVuiContext();
+	const timeoutMapRef = useRef(/* @__PURE__ */ new Map());
+	useEffect(() => {
+		const timeouts = timeoutMapRef.current;
+		return () => {
+			timeouts.forEach(clearTimeout);
+			timeouts.clear();
+		};
+	}, []);
 	const showToast = useCallback((options) => {
+		if (options?.dismissible !== void 0) console.warn("[VUI] Toast: `dismissible` is deprecated. Use `showDismissButton` to control dismiss button visibility.");
 		const id = options?.id ? options.id : uid("toast");
-		const { duration = setup.options.duration, status = "info", action, icon, text, title } = options || {};
+		const showDismissButton = options?.showDismissButton ?? options?.dismissible ?? true;
+		const { duration = defaultDuration, status = "info", action, icon, size, text, textLayout, title } = options || {};
+		const handleClose = () => {
+			const timeoutId = timeoutMapRef.current.get(id);
+			if (timeoutId !== void 0) clearTimeout(timeoutId);
+			timeoutMapRef.current.delete(id);
+			removeToast(id);
+		};
 		addToast({
 			id,
-			component: /* @__PURE__ */ jsx(Notification, {
+			component: /* @__PURE__ */ jsx(ToastItem, {
 				action,
-				animation: "fadeDown",
-				elevation: 3,
 				icon,
-				mt: {
-					md: 1,
-					sm: "4px",
-					xs: "4px"
-				},
-				onClose: () => removeToast(id),
+				showDismissButton,
+				size,
 				status,
 				text,
+				textLayout,
 				title,
-				align: "center",
-				role: "status",
-				ariaLive: "polite",
-				w: 1
+				onClose: handleClose
 			})
 		});
-		if (duration && duration !== "sticky") window.setTimeout(() => removeToast(id), getDurationTime(duration));
-	}, []);
+		if (duration && duration !== "sticky") timeoutMapRef.current.set(id, setTimeout(() => {
+			timeoutMapRef.current.delete(id);
+			removeToast(id);
+		}, getDurationTime(duration)));
+	}, [addToast, removeToast]);
 	return {
 		showToast,
 		hideToast: removeToast,
-		showInfo: useCallback((text, duration = defaultDuration) => showToast({
+		showInfo: useCallback((text, duration = defaultDuration, options) => showToast({
 			text,
 			status: "info",
-			duration
+			duration,
+			...options
 		}), [showToast]),
-		showSuccess: useCallback((text, duration = defaultDuration) => showToast({
+		showSuccess: useCallback((text, duration = defaultDuration, options) => showToast({
 			text,
 			status: "success",
-			duration
+			duration,
+			...options
 		}), [showToast]),
-		showWarning: useCallback((text, duration = defaultDuration) => showToast({
+		showWarning: useCallback((text, duration = "medium", options) => showToast({
 			text,
 			status: "warning",
-			duration
+			duration,
+			...options
 		}), [showToast]),
-		showError: useCallback((text, duration = defaultDuration) => showToast({
+		showError: useCallback((text, duration = "slow", options) => showToast({
 			text,
 			status: "error",
-			duration
+			duration,
+			...options
 		}), [showToast]),
-		showLoading: useCallback((text, duration = defaultDuration) => showToast({
+		showLoading: useCallback((text, duration = "sticky", options) => showToast({
 			text,
 			status: "loading",
-			duration
+			duration,
+			...options
 		}), [showToast])
 	};
 };
 
 //#endregion
-export { defaultDuration, fastToastDuration, slowToastDuration, useToast };
-globalThis.__vuiVersion__ = "5.2.2"
+export { defaultDuration, fastToastDuration, mediumToastDuration, slowToastDuration, useToast };
+globalThis.__vuiVersion__ = "5.3.0"
 //# sourceMappingURL=useToast.js.map

package/dist/toast/useToast.js.map

@@ -1 +1 @@
-{"version":3,"file":"useToast.js","names":[],"sources":["../../src/toast/useToast.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\nimport { useCallback } from 'react'\n\nimport { useVuiContext } from '../core/vuiProvider/context'\nimport { Notification } from '../notification'\nimport { uid } from '../utils'\nimport type { ToastDuration, ToastOptions, ToastSetup } from './toast.types'\n\nexport const defaultDuration = 'fast'\nexport const fastToastDuration = 4000\nexport const slowToastDuration = 8000\n\nconst setup: ToastSetup = {\n  options: {\n    duration: defaultDuration,\n  },\n  componentList: [],\n}\n\nconst getDurationTime = (duration: ToastDuration) => (duration === 'fast' ? fastToastDuration : slowToastDuration)\n\nexport const useToast = () => {\n  const { addToast, removeToast } = useVuiContext()\n\n  const showToast = useCallback((options?: ToastOptions): void => {\n    const id = options?.id ? options.id : uid('toast')\n    const { duration = setup.options.duration, status = 'info', action, icon, text, title } = options || {}\n\n    const toast = {\n      id,\n      component: (\n        <Notification\n          action={action}\n          animation=\"fadeDown\"\n          elevation={3}\n          icon={icon}\n          mt={{ md: 1, sm: '4px', xs: '4px' }}\n          onClose={() => removeToast(id)}\n          status={status}\n          text={text}\n          title={title}\n          align=\"center\"\n          // Q7: Toasts pin role=status / aria-live=polite regardless of intent to preserve\n          // current SR behavior (the auto-mapping in Notification would otherwise upgrade\n          // warning/danger intents to role=alert / assertive). Full toast migration is a\n          // follow-up; this override keeps the existing user-perceived behavior intact.\n          role=\"status\"\n          ariaLive=\"polite\"\n          w={1}\n        />\n      ),\n    }\n\n    addToast(toast)\n\n    if (duration && duration !== 'sticky') {\n      window.setTimeout(() => removeToast(id), getDurationTime(duration))\n    }\n  }, [])\n\n  const showInfo = useCallback(\n    (text: ReactNode, duration: ToastDuration = defaultDuration) => showToast({ text, status: 'info', duration }),\n    [showToast],\n  )\n\n  const showSuccess = useCallback(\n    (text: ReactNode, duration: ToastDuration = defaultDuration) => showToast({ text, status: 'success', duration }),\n    [showToast],\n  )\n\n  const showWarning = useCallback(\n    (text: ReactNode, duration: ToastDuration = defaultDuration) => showToast({ text, status: 'warning', duration }),\n    [showToast],\n  )\n\n  const showError = useCallback(\n    (text: ReactNode, duration: ToastDuration = defaultDuration) => showToast({ text, status: 'error', duration }),\n    [showToast],\n  )\n\n  const showLoading = useCallback(\n    (text: ReactNode, duration: ToastDuration = defaultDuration) => showToast({ text, status: 'loading', duration }),\n    [showToast],\n  )\n\n  return {\n    showToast,\n    hideToast: removeToast,\n    showInfo,\n    showSuccess,\n    showWarning,\n    showError,\n    showLoading,\n  }\n}\n"],"mappings":";;;;;;;AAQA,MAAa,kBAAkB;AAC/B,MAAa,oBAAoB;AACjC,MAAa,oBAAoB;AAEjC,MAAM,QAAoB;CACxB,SAAS,EACP,UAAU,gBACZ;CACA,eAAe,CAAC;AAClB;AAEA,MAAM,mBAAmB,aAA6B,aAAa,SAAS,oBAAoB;AAEhG,MAAa,iBAAiB;CAC5B,MAAM,EAAE,UAAU,gBAAgB,cAAc;CAEhD,MAAM,YAAY,aAAa,YAAiC;EAC9D,MAAM,KAAK,SAAS,KAAK,QAAQ,KAAK,IAAI,OAAO;EACjD,MAAM,EAAE,WAAW,MAAM,QAAQ,UAAU,SAAS,QAAQ,QAAQ,MAAM,MAAM,UAAU,WAAW,CAAC;EA2BtG,SAAS;GAxBP;GACA,WACE,oBAAC,cAAD;IACU;IACR,WAAU;IACV,WAAW;IACL;IACN,IAAI;KAAE,IAAI;KAAG,IAAI;KAAO,IAAI;IAAM;IAClC,eAAe,YAAY,EAAE;IACrB;IACF;IACC;IACP,OAAM;IAKN,MAAK;IACL,UAAS;IACT,GAAG;GACJ;EAIQ,CAAC;EAEd,IAAI,YAAY,aAAa,UAC3B,OAAO,iBAAiB,YAAY,EAAE,GAAG,gBAAgB,QAAQ,CAAC;CAEtE,GAAG,CAAC,CAAC;CA2BL,OAAO;EACL;EACA,WAAW;EACX,UA5Be,aACd,MAAiB,WAA0B,oBAAoB,UAAU;GAAE;GAAM,QAAQ;GAAQ;EAAS,CAAC,GAC5G,CAAC,SAAS,CA0BH;EACP,aAxBkB,aACjB,MAAiB,WAA0B,oBAAoB,UAAU;GAAE;GAAM,QAAQ;GAAW;EAAS,CAAC,GAC/G,CAAC,SAAS,CAsBA;EACV,aApBkB,aACjB,MAAiB,WAA0B,oBAAoB,UAAU;GAAE;GAAM,QAAQ;GAAW;EAAS,CAAC,GAC/G,CAAC,SAAS,CAkBA;EACV,WAhBgB,aACf,MAAiB,WAA0B,oBAAoB,UAAU;GAAE;GAAM,QAAQ;GAAS;EAAS,CAAC,GAC7G,CAAC,SAAS,CAcF;EACR,aAZkB,aACjB,MAAiB,WAA0B,oBAAoB,UAAU;GAAE;GAAM,QAAQ;GAAW;EAAS,CAAC,GAC/G,CAAC,SAAS,CAUA;CACZ;AACF"}
+{"version":3,"file":"useToast.js","names":["_exhaustive"],"sources":["../../src/toast/useToast.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\n\nimport { useCallback, useEffect, useRef } from 'react'\n\nimport type { ToastDuration, ToastOptions } from './toast.types'\n\nimport { useVuiContext } from '../core/vuiProvider/context'\nimport { uid } from '../utils'\nimport { ToastItem } from './Toaster'\n\nexport const defaultDuration = 'fast'\nexport const fastToastDuration = 4000\nexport const mediumToastDuration = 6000\nexport const slowToastDuration = 8000\n\nconst getDurationTime = (duration: Exclude<ToastDuration, 'sticky'>): number => {\n  switch (duration) {\n    case 'fast':\n      return fastToastDuration\n    case 'medium':\n      return mediumToastDuration\n    case 'slow':\n      return slowToastDuration\n    default: {\n      const _exhaustive: never = duration\n      throw new Error(`[VUI] useToast: unhandled duration \"${_exhaustive}\"`)\n    }\n  }\n}\n\nexport const useToast = () => {\n  const { addToast, removeToast } = useVuiContext()\n  const timeoutMapRef = useRef<Map<string, ReturnType<typeof setTimeout>>>(new Map())\n\n  useEffect(() => {\n    const timeouts = timeoutMapRef.current\n    return () => {\n      timeouts.forEach(clearTimeout)\n      timeouts.clear()\n    }\n  }, [])\n\n  const showToast = useCallback(\n    (options?: ToastOptions): void => {\n      if (process.env.NODE_ENV !== 'production' && options?.dismissible !== undefined) {\n        console.warn(\n          '[VUI] Toast: `dismissible` is deprecated. Use `showDismissButton` to control dismiss button visibility.',\n        )\n      }\n      const id = options?.id ? options.id : uid('toast')\n      const showDismissButton = options?.showDismissButton ?? options?.dismissible ?? true\n      const { duration = defaultDuration, status = 'info', action, icon, size, text, textLayout, title } = options || {}\n\n      const handleClose = () => {\n        const timeoutId = timeoutMapRef.current.get(id)\n        if (timeoutId !== undefined) clearTimeout(timeoutId)\n        timeoutMapRef.current.delete(id)\n        removeToast(id)\n      }\n\n      const toast = {\n        id,\n        component: (\n          <ToastItem\n            action={action}\n            icon={icon}\n            showDismissButton={showDismissButton}\n            size={size}\n            status={status}\n            text={text}\n            textLayout={textLayout}\n            title={title}\n            onClose={handleClose}\n          />\n        ),\n      }\n\n      addToast(toast)\n\n      if (duration && duration !== 'sticky') {\n        timeoutMapRef.current.set(\n          id,\n          setTimeout(() => {\n            timeoutMapRef.current.delete(id)\n            removeToast(id)\n          }, getDurationTime(duration)),\n        )\n      }\n    },\n    [addToast, removeToast],\n  )\n\n  const showInfo = useCallback(\n    (\n      text: ReactNode,\n      duration: ToastDuration = defaultDuration,\n      options?: Omit<ToastOptions, 'text' | 'status' | 'duration'>,\n    ) => showToast({ text, status: 'info', duration, ...options }),\n    [showToast],\n  )\n\n  const showSuccess = useCallback(\n    (\n      text: ReactNode,\n      duration: ToastDuration = defaultDuration,\n      options?: Omit<ToastOptions, 'text' | 'status' | 'duration'>,\n    ) => showToast({ text, status: 'success', duration, ...options }),\n    [showToast],\n  )\n\n  const showWarning = useCallback(\n    (\n      text: ReactNode,\n      duration: ToastDuration = 'medium',\n      options?: Omit<ToastOptions, 'text' | 'status' | 'duration'>,\n    ) => showToast({ text, status: 'warning', duration, ...options }),\n    [showToast],\n  )\n\n  const showError = useCallback(\n    (text: ReactNode, duration: ToastDuration = 'slow', options?: Omit<ToastOptions, 'text' | 'status' | 'duration'>) =>\n      showToast({ text, status: 'error', duration, ...options }),\n    [showToast],\n  )\n\n  const showLoading = useCallback(\n    (\n      text: ReactNode,\n      duration: ToastDuration = 'sticky',\n      options?: Omit<ToastOptions, 'text' | 'status' | 'duration'>,\n    ) => showToast({ text, status: 'loading', duration, ...options }),\n    [showToast],\n  )\n\n  return {\n    showToast,\n    hideToast: removeToast,\n    showInfo,\n    showSuccess,\n    showWarning,\n    showError,\n    showLoading,\n  }\n}\n"],"mappings":";;;;;;;AAUA,MAAa,kBAAkB;AAC/B,MAAa,oBAAoB;AACjC,MAAa,sBAAsB;AACnC,MAAa,oBAAoB;AAEjC,MAAM,mBAAmB,aAAuD;CAC9E,QAAQ,UAAR;EACE,KAAK,QACH,OAAO;EACT,KAAK,UACH,OAAO;EACT,KAAK,QACH,OAAO;EACT,SAEE,MAAM,IAAI,MAAM,uCAAuCA,SAAY,EAAE;CAEzE;AACF;AAEA,MAAa,iBAAiB;CAC5B,MAAM,EAAE,UAAU,gBAAgB,cAAc;CAChD,MAAM,gBAAgB,uBAAmD,IAAI,IAAI,CAAC;CAElF,gBAAgB;EACd,MAAM,WAAW,cAAc;EAC/B,aAAa;GACX,SAAS,QAAQ,YAAY;GAC7B,SAAS,MAAM;EACjB;CACF,GAAG,CAAC,CAAC;CAEL,MAAM,YAAY,aACf,YAAiC;EAChC,IAA6C,SAAS,gBAAgB,QACpE,QAAQ,KACN,yGACF;EAEF,MAAM,KAAK,SAAS,KAAK,QAAQ,KAAK,IAAI,OAAO;EACjD,MAAM,oBAAoB,SAAS,qBAAqB,SAAS,eAAe;EAChF,MAAM,EAAE,WAAW,iBAAiB,SAAS,QAAQ,QAAQ,MAAM,MAAM,MAAM,YAAY,UAAU,WAAW,CAAC;EAEjH,MAAM,oBAAoB;GACxB,MAAM,YAAY,cAAc,QAAQ,IAAI,EAAE;GAC9C,IAAI,cAAc,QAAW,aAAa,SAAS;GACnD,cAAc,QAAQ,OAAO,EAAE;GAC/B,YAAY,EAAE;EAChB;EAmBA,SAAS;GAhBP;GACA,WACE,oBAAC,WAAD;IACU;IACF;IACa;IACb;IACE;IACF;IACM;IACL;IACP,SAAS;GACV;EAIQ,CAAC;EAEd,IAAI,YAAY,aAAa,UAC3B,cAAc,QAAQ,IACpB,IACA,iBAAiB;GACf,cAAc,QAAQ,OAAO,EAAE;GAC/B,YAAY,EAAE;EAChB,GAAG,gBAAgB,QAAQ,CAAC,CAC9B;CAEJ,GACA,CAAC,UAAU,WAAW,CACxB;CA4CA,OAAO;EACL;EACA,WAAW;EACX,UA7Ce,aAEb,MACA,WAA0B,iBAC1B,YACG,UAAU;GAAE;GAAM,QAAQ;GAAQ;GAAU,GAAG;EAAQ,CAAC,GAC7D,CAAC,SAAS,CAuCH;EACP,aArCkB,aAEhB,MACA,WAA0B,iBAC1B,YACG,UAAU;GAAE;GAAM,QAAQ;GAAW;GAAU,GAAG;EAAQ,CAAC,GAChE,CAAC,SAAS,CA+BA;EACV,aA7BkB,aAEhB,MACA,WAA0B,UAC1B,YACG,UAAU;GAAE;GAAM,QAAQ;GAAW;GAAU,GAAG;EAAQ,CAAC,GAChE,CAAC,SAAS,CAuBA;EACV,WArBgB,aACf,MAAiB,WAA0B,QAAQ,YAClD,UAAU;GAAE;GAAM,QAAQ;GAAS;GAAU,GAAG;EAAQ,CAAC,GAC3D,CAAC,SAAS,CAkBF;EACR,aAhBkB,aAEhB,MACA,WAA0B,UAC1B,YACG,UAAU;GAAE;GAAM,QAAQ;GAAW;GAAU,GAAG;EAAQ,CAAC,GAChE,CAAC,SAAS,CAUA;CACZ;AACF"}

package/dist/tooltip/consts.js

@@ -6,5 +6,5 @@ const bg = {
 
 //#endregion
 export { bg };
-globalThis.__vuiVersion__ = "5.2.2"
+globalThis.__vuiVersion__ = "5.3.0"
 //# sourceMappingURL=consts.js.map

package/dist/tooltip/tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.d.ts","names":[],"sources":["../../src/tooltip/tooltip.tsx"],"mappings":";;;;;AAsCA;;;;cAAa,OAAA;EAAA,QAAkB,YAAY,mBAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"tooltip.d.ts","names":[],"sources":["../../src/tooltip/tooltip.tsx"],"mappings":";;;;;AAuCA;;;;cAAa,OAAA;EAAA,QAAkB,YAAY,mBAAA,GAAA,CAAA,OAAA"}

package/dist/tooltip/tooltip.js

@@ -105,5 +105,5 @@ Tooltip.displayName = "Tooltip";
 
 //#endregion
 export { Tooltip as default };
-globalThis.__vuiVersion__ = "5.2.2"
+globalThis.__vuiVersion__ = "5.3.0"
 //# sourceMappingURL=tooltip.js.map

package/dist/tooltip/tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.js","names":["zIndices"],"sources":["../../src/tooltip/tooltip.tsx"],"sourcesContent":["import {\n  arrow,\n  autoUpdate,\n  flip,\n  FloatingArrow,\n  FloatingPortal,\n  offset,\n  shift,\n  useFloating,\n  useHover,\n  useInteractions,\n  useRole,\n  useTransitionStyles,\n} from '@floating-ui/react'\nimport { cloneElement, isValidElement, useMemo, useRef, useState } from 'react'\n\nimport { useTh, useUp, v } from '../core'\nimport { Link } from '../link'\nimport { zIndices } from '../theme'\nimport { isString } from '../utils'\nimport { bg } from './consts'\nimport type { TooltipProps } from './tooltip.types'\nimport { TooltipContent } from './tooltipContent'\n\nconst stripHtmlTags = (html: string): string => {\n  const withoutTags = html.replace(/<[^>]*>/g, '')\n  // Decode HTML entities\n  const textarea = document.createElement('textarea')\n  textarea.innerHTML = withoutTags\n  return textarea.value\n}\n\n/**\n * A simple text popup hint.\n *\n * Displayed on mouse enter, and is hidden on mouse leave.\n *\n * */\nexport const Tooltip = (props: TooltipProps) => {\n  const {\n    children,\n    fontSize = '16px',\n    linkText,\n    linkProps,\n    minWidth,\n    maxWidth = '400px',\n    text = '',\n    placement = 'top',\n    disabled = false,\n    visible = false,\n    offset: offsetProp = [0, 0],\n    whiteSpace = 'pre-wrap',\n    wordBreak = 'break-word',\n  } = props\n\n  const isDesktop = useUp('md')\n  const [isOpen, setIsOpen] = useState(visible)\n  const arrowRef = useRef(null)\n\n  const middleware = useMemo(\n    () => [\n      offset({ mainAxis: offsetProp[1] + 6, crossAxis: offsetProp[0] }), // +6 for arrow\n      flip(),\n      shift(),\n      // eslint-disable-next-line react-hooks/refs\n      arrow({ element: arrowRef }),\n    ],\n\n    [offsetProp[0], offsetProp[1]],\n  )\n\n  const { refs, floatingStyles, context } = useFloating({\n    open: visible || isOpen,\n    onOpenChange: setIsOpen,\n    placement,\n    middleware,\n    whileElementsMounted: autoUpdate,\n  })\n  // Opacity-only transition - no position movement\n  const { isMounted, styles: transitionStyles } = useTransitionStyles(context, {\n    duration: 150,\n    initial: { opacity: 0 },\n    open: { opacity: 1 },\n    close: { opacity: 0 },\n  })\n  const hover = useHover(context, { move: false })\n  const role = useRole(context, { role: 'tooltip' })\n  const { getReferenceProps, getFloatingProps } = useInteractions([hover, role])\n\n  const darkBlue18 = useTh(`colors.${bg.regular}`)\n  const sandstone55 = useTh(`colors.${bg.disabled}`)\n  const arrowColor = disabled ? sandstone55 : darkBlue18\n\n  const strippedText = useMemo(() => (isString(text) ? stripHtmlTags(text) : ''), [text])\n  const zIndex = zIndices.tooltip\n\n  const content = isString(text) ? (\n    <TooltipContent\n      disabled={disabled}\n      fontSize={fontSize}\n      maxWidth={maxWidth}\n      minWidth={minWidth}\n      whiteSpace={whiteSpace}\n      wordBreak={wordBreak}\n    >\n      <v.div>\n        {strippedText}\n        {!!linkText && (\n          <>\n            &nbsp;\n            <Link variant=\"white\" {...linkProps}>\n              {linkText}\n            </Link>\n          </>\n        )}\n      </v.div>\n    </TooltipContent>\n  ) : (\n    <TooltipContent disabled={disabled} fontSize={fontSize} maxWidth={maxWidth} minWidth={minWidth}>\n      {text}\n    </TooltipContent>\n  )\n\n  // Clone the child element to add ref and props.\n  // Compose refs so any existing ref on the child is preserved alongside the floating reference ref.\n  const childRef = isValidElement(children) ? ((children as any).ref ?? (children as any).props?.ref) : null\n  const composedRef =\n    childRef != null\n      ? (el: Element | null) => {\n          refs.setReference(el)\n          if (typeof childRef === 'function') childRef(el)\n          else if (childRef && typeof childRef === 'object') (childRef as React.MutableRefObject<unknown>).current = el\n        }\n      : refs.setReference\n  const childElement = isValidElement(children)\n    ? cloneElement(children as React.ReactElement<any>, {\n        ref: composedRef,\n        ...getReferenceProps(),\n      })\n    : children\n\n  return (\n    <>\n      {childElement}\n      {isMounted && (\n        <FloatingPortal>\n          <div\n            ref={refs.setFloating}\n            style={{ ...floatingStyles, ...transitionStyles, zIndex }}\n            {...getFloatingProps()}\n          >\n            {content}\n            {isDesktop && <FloatingArrow ref={arrowRef} context={context} fill={arrowColor} width={12} height={6} />}\n          </div>\n        </FloatingPortal>\n      )}\n    </>\n  )\n}\n\nTooltip.displayName = 'Tooltip'\n\nexport default Tooltip\n"],"mappings":";;;;;;;;;;;;;AAwBA,MAAM,iBAAiB,SAAyB;CAC9C,MAAM,cAAc,KAAK,QAAQ,YAAY,EAAE;CAE/C,MAAM,WAAW,SAAS,cAAc,UAAU;CAClD,SAAS,YAAY;CACrB,OAAO,SAAS;AAClB;;;;;;;AAQA,MAAa,WAAW,UAAwB;CAC9C,MAAM,EACJ,UACA,WAAW,QACX,UACA,WACA,UACA,WAAW,SACX,OAAO,IACP,YAAY,OACZ,WAAW,OACX,UAAU,OACV,QAAQ,aAAa,CAAC,GAAG,CAAC,GAC1B,aAAa,YACb,YAAY,iBACV;CAEJ,MAAM,YAAY,MAAM,IAAI;CAC5B,MAAM,CAAC,QAAQ,aAAa,SAAS,OAAO;CAC5C,MAAM,WAAW,OAAO,IAAI;CAE5B,MAAM,aAAa,cACX;EACJ,OAAO;GAAE,UAAU,WAAW,KAAK;GAAG,WAAW,WAAW;EAAG,CAAC;EAChE,KAAK;EACL,MAAM;EAEN,MAAM,EAAE,SAAS,SAAS,CAAC;CAC7B,GAEA,CAAC,WAAW,IAAI,WAAW,EAAE,CAC/B;CAEA,MAAM,EAAE,MAAM,gBAAgB,YAAY,YAAY;EACpD,MAAM,WAAW;EACjB,cAAc;EACd;EACA;EACA,sBAAsB;CACxB,CAAC;CAED,MAAM,EAAE,WAAW,QAAQ,qBAAqB,oBAAoB,SAAS;EAC3E,UAAU;EACV,SAAS,EAAE,SAAS,EAAE;EACtB,MAAM,EAAE,SAAS,EAAE;EACnB,OAAO,EAAE,SAAS,EAAE;CACtB,CAAC;CAGD,MAAM,EAAE,mBAAmB,qBAAqB,gBAAgB,CAFlD,SAAS,SAAS,EAAE,MAAM,MAAM,CAEuB,GADxD,QAAQ,SAAS,EAAE,MAAM,UAAU,CAC2B,CAAC,CAAC;CAE7E,MAAM,aAAa,MAAM,UAAU,GAAG,SAAS;CAC/C,MAAM,cAAc,MAAM,UAAU,GAAG,UAAU;CACjD,MAAM,aAAa,WAAW,cAAc;CAE5C,MAAM,eAAe,cAAe,SAAS,IAAI,IAAI,cAAc,IAAI,IAAI,IAAK,CAAC,IAAI,CAAC;CACtF,MAAM,SAASA,iBAAS;CAExB,MAAM,UAAU,SAAS,IAAI,IAC3B,oBAAC,gBAAD;EACY;EACA;EACA;EACA;EACE;EACD;YAEX,qBAAC,EAAE,KAAH,aACG,cACA,CAAC,CAAC,YACD,8CAAE,QAEA,oBAAC,MAAD;GAAM,SAAQ;GAAQ,GAAI;aACvB;EACG,EACN,IAEC;CACO,KAEhB,oBAAC,gBAAD;EAA0B;EAAoB;EAAoB;EAAoB;YACnF;CACa;CAKlB,MAAM,WAAW,eAAe,QAAQ,IAAM,SAAiB,OAAQ,SAAiB,OAAO,MAAO;CACtG,MAAM,cACJ,YAAY,QACP,OAAuB;EACtB,KAAK,aAAa,EAAE;EACpB,IAAI,OAAO,aAAa,YAAY,SAAS,EAAE;OAC1C,IAAI,YAAY,OAAO,aAAa,UAAU,AAAC,SAA6C,UAAU;CAC7G,IACA,KAAK;CAQX,OACE,8CARmB,eAAe,QAAQ,IACxC,aAAa,UAAqC;EAChD,KAAK;EACL,GAAG,kBAAkB;CACvB,CAAC,IACD,UAKC,aACC,oBAAC,gBAAD,YACE,qBAAC,OAAD;EACE,KAAK,KAAK;EACV,OAAO;GAAE,GAAG;GAAgB,GAAG;GAAkB;EAAO;EACxD,GAAI,iBAAiB;YAHvB,CAKG,SACA,aAAa,oBAAC,eAAD;GAAe,KAAK;GAAmB;GAAS,MAAM;GAAY,OAAO;GAAI,QAAQ;EAAI,EACpG;IACS,EAElB;AAEN;AAEA,QAAQ,cAAc"}
+{"version":3,"file":"tooltip.js","names":["zIndices"],"sources":["../../src/tooltip/tooltip.tsx"],"sourcesContent":["import {\n  arrow,\n  autoUpdate,\n  flip,\n  FloatingArrow,\n  FloatingPortal,\n  offset,\n  shift,\n  useFloating,\n  useHover,\n  useInteractions,\n  useRole,\n  useTransitionStyles,\n} from '@floating-ui/react'\nimport { cloneElement, isValidElement, useMemo, useRef, useState } from 'react'\n\nimport type { TooltipProps } from './tooltip.types'\n\nimport { useTh, useUp, v } from '../core'\nimport { Link } from '../link'\nimport { zIndices } from '../theme'\nimport { isString } from '../utils'\nimport { bg } from './consts'\nimport { TooltipContent } from './tooltipContent'\n\nconst stripHtmlTags = (html: string): string => {\n  const withoutTags = html.replace(/<[^>]*>/g, '')\n  // Decode HTML entities\n  const textarea = document.createElement('textarea')\n  textarea.innerHTML = withoutTags\n  return textarea.value\n}\n\n/**\n * A simple text popup hint.\n *\n * Displayed on mouse enter, and is hidden on mouse leave.\n *\n * */\nexport const Tooltip = (props: TooltipProps) => {\n  const {\n    children,\n    fontSize = '16px',\n    linkText,\n    linkProps,\n    minWidth,\n    maxWidth = '400px',\n    text = '',\n    placement = 'top',\n    disabled = false,\n    visible = false,\n    offset: offsetProp = [0, 0],\n    whiteSpace = 'pre-wrap',\n    wordBreak = 'break-word',\n  } = props\n\n  const isDesktop = useUp('md')\n  const [isOpen, setIsOpen] = useState(visible)\n  const arrowRef = useRef(null)\n\n  const middleware = useMemo(\n    () => [\n      offset({ mainAxis: offsetProp[1] + 6, crossAxis: offsetProp[0] }), // +6 for arrow\n      flip(),\n      shift(),\n      arrow({ element: arrowRef }),\n    ],\n\n    [offsetProp[0], offsetProp[1]],\n  )\n\n  const { refs, floatingStyles, context } = useFloating({\n    open: visible || isOpen,\n    onOpenChange: setIsOpen,\n    placement,\n    middleware,\n    whileElementsMounted: autoUpdate,\n  })\n  // Opacity-only transition - no position movement\n  const { isMounted, styles: transitionStyles } = useTransitionStyles(context, {\n    duration: 150,\n    initial: { opacity: 0 },\n    open: { opacity: 1 },\n    close: { opacity: 0 },\n  })\n  const hover = useHover(context, { move: false })\n  const role = useRole(context, { role: 'tooltip' })\n  const { getReferenceProps, getFloatingProps } = useInteractions([hover, role])\n\n  const darkBlue18 = useTh(`colors.${bg.regular}`)\n  const sandstone55 = useTh(`colors.${bg.disabled}`)\n  const arrowColor = disabled ? sandstone55 : darkBlue18\n\n  const strippedText = useMemo(() => (isString(text) ? stripHtmlTags(text) : ''), [text])\n  const zIndex = zIndices.tooltip\n\n  const content = isString(text) ? (\n    <TooltipContent\n      disabled={disabled}\n      fontSize={fontSize}\n      maxWidth={maxWidth}\n      minWidth={minWidth}\n      whiteSpace={whiteSpace}\n      wordBreak={wordBreak}\n    >\n      <v.div>\n        {strippedText}\n        {!!linkText && (\n          <>\n            &nbsp;\n            <Link variant=\"white\" {...linkProps}>\n              {linkText}\n            </Link>\n          </>\n        )}\n      </v.div>\n    </TooltipContent>\n  ) : (\n    <TooltipContent disabled={disabled} fontSize={fontSize} maxWidth={maxWidth} minWidth={minWidth}>\n      {text}\n    </TooltipContent>\n  )\n\n  // Clone the child element to add ref and props.\n  // Compose refs so any existing ref on the child is preserved alongside the floating reference ref.\n  const childRef = isValidElement(children) ? ((children as any).ref ?? (children as any).props?.ref) : null\n  const composedRef =\n    childRef != null\n      ? (el: Element | null) => {\n          refs.setReference(el)\n          if (typeof childRef === 'function') childRef(el)\n          else if (childRef && typeof childRef === 'object') (childRef as React.MutableRefObject<unknown>).current = el\n        }\n      : refs.setReference\n  const childElement = isValidElement(children)\n    ? cloneElement(children as React.ReactElement<any>, {\n        ref: composedRef,\n        ...getReferenceProps(),\n      })\n    : children\n\n  return (\n    <>\n      {childElement}\n      {isMounted && (\n        <FloatingPortal>\n          <div\n            ref={refs.setFloating}\n            style={{ ...floatingStyles, ...transitionStyles, zIndex }}\n            {...getFloatingProps()}\n          >\n            {content}\n            {isDesktop && <FloatingArrow ref={arrowRef} context={context} fill={arrowColor} width={12} height={6} />}\n          </div>\n        </FloatingPortal>\n      )}\n    </>\n  )\n}\n\nTooltip.displayName = 'Tooltip'\n\nexport default Tooltip\n"],"mappings":";;;;;;;;;;;;;AAyBA,MAAM,iBAAiB,SAAyB;CAC9C,MAAM,cAAc,KAAK,QAAQ,YAAY,EAAE;CAE/C,MAAM,WAAW,SAAS,cAAc,UAAU;CAClD,SAAS,YAAY;CACrB,OAAO,SAAS;AAClB;;;;;;;AAQA,MAAa,WAAW,UAAwB;CAC9C,MAAM,EACJ,UACA,WAAW,QACX,UACA,WACA,UACA,WAAW,SACX,OAAO,IACP,YAAY,OACZ,WAAW,OACX,UAAU,OACV,QAAQ,aAAa,CAAC,GAAG,CAAC,GAC1B,aAAa,YACb,YAAY,iBACV;CAEJ,MAAM,YAAY,MAAM,IAAI;CAC5B,MAAM,CAAC,QAAQ,aAAa,SAAS,OAAO;CAC5C,MAAM,WAAW,OAAO,IAAI;CAE5B,MAAM,aAAa,cACX;EACJ,OAAO;GAAE,UAAU,WAAW,KAAK;GAAG,WAAW,WAAW;EAAG,CAAC;EAChE,KAAK;EACL,MAAM;EACN,MAAM,EAAE,SAAS,SAAS,CAAC;CAC7B,GAEA,CAAC,WAAW,IAAI,WAAW,EAAE,CAC/B;CAEA,MAAM,EAAE,MAAM,gBAAgB,YAAY,YAAY;EACpD,MAAM,WAAW;EACjB,cAAc;EACd;EACA;EACA,sBAAsB;CACxB,CAAC;CAED,MAAM,EAAE,WAAW,QAAQ,qBAAqB,oBAAoB,SAAS;EAC3E,UAAU;EACV,SAAS,EAAE,SAAS,EAAE;EACtB,MAAM,EAAE,SAAS,EAAE;EACnB,OAAO,EAAE,SAAS,EAAE;CACtB,CAAC;CAGD,MAAM,EAAE,mBAAmB,qBAAqB,gBAAgB,CAFlD,SAAS,SAAS,EAAE,MAAM,MAAM,CAEuB,GADxD,QAAQ,SAAS,EAAE,MAAM,UAAU,CAC2B,CAAC,CAAC;CAE7E,MAAM,aAAa,MAAM,UAAU,GAAG,SAAS;CAC/C,MAAM,cAAc,MAAM,UAAU,GAAG,UAAU;CACjD,MAAM,aAAa,WAAW,cAAc;CAE5C,MAAM,eAAe,cAAe,SAAS,IAAI,IAAI,cAAc,IAAI,IAAI,IAAK,CAAC,IAAI,CAAC;CACtF,MAAM,SAASA,iBAAS;CAExB,MAAM,UAAU,SAAS,IAAI,IAC3B,oBAAC,gBAAD;EACY;EACA;EACA;EACA;EACE;EACD;YAEX,qBAAC,EAAE,KAAH,aACG,cACA,CAAC,CAAC,YACD,8CAAE,QAEA,oBAAC,MAAD;GAAM,SAAQ;GAAQ,GAAI;aACvB;EACG,EACN,IAEC;CACO,KAEhB,oBAAC,gBAAD;EAA0B;EAAoB;EAAoB;EAAoB;YACnF;CACa;CAKlB,MAAM,WAAW,eAAe,QAAQ,IAAM,SAAiB,OAAQ,SAAiB,OAAO,MAAO;CACtG,MAAM,cACJ,YAAY,QACP,OAAuB;EACtB,KAAK,aAAa,EAAE;EACpB,IAAI,OAAO,aAAa,YAAY,SAAS,EAAE;OAC1C,IAAI,YAAY,OAAO,aAAa,UAAU,AAAC,SAA6C,UAAU;CAC7G,IACA,KAAK;CAQX,OACE,8CARmB,eAAe,QAAQ,IACxC,aAAa,UAAqC;EAChD,KAAK;EACL,GAAG,kBAAkB;CACvB,CAAC,IACD,UAKC,aACC,oBAAC,gBAAD,YACE,qBAAC,OAAD;EACE,KAAK,KAAK;EACV,OAAO;GAAE,GAAG;GAAgB,GAAG;GAAkB;EAAO;EACxD,GAAI,iBAAiB;YAHvB,CAKG,SACA,aAAa,oBAAC,eAAD;GAAe,KAAK;GAAmB;GAAS,MAAM;GAAY,OAAO;GAAI,QAAQ;EAAI,EACpG;IACS,EAElB;AAEN;AAEA,QAAQ,cAAc"}

package/dist/tooltip/tooltipContent.js

@@ -24,5 +24,5 @@ TooltipContent.displayName = "TooltipContent";
 
 //#endregion
 export { TooltipContent };
-globalThis.__vuiVersion__ = "5.2.2"
+globalThis.__vuiVersion__ = "5.3.0"
 //# sourceMappingURL=tooltipContent.js.map