@usefragments/ui 1.6.0 → 2.0.0

package/dist/components/ThinkingIndicator/index.cjs

@@ -92,7 +92,7 @@ function ThinkingSteps({ children, className, ...htmlProps }) {
   const classes = [ThinkingIndicator_module.default.steps, className].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxRuntime.jsx("div", { ...htmlProps, className: classes, children });
 }
-function ThinkingStep({ label, status = "pending", className, ...htmlProps }) {
+function ThinkingStep({ label, status = "idle", className, ...htmlProps }) {
   const classes = [
     ThinkingIndicator_module.default.step,
     ThinkingIndicator_module.default[`step${status.charAt(0).toUpperCase() + status.slice(1)}`],
@@ -102,18 +102,18 @@ function ThinkingStep({ label, status = "pending", className, ...htmlProps }) {
     /* @__PURE__ */ jsxRuntime.jsxs("span", { className: ThinkingIndicator_module.default.stepIndicator, children: [
       status === "complete" && /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, {}),
       status === "error" && /* @__PURE__ */ jsxRuntime.jsx(ErrorIcon, {}),
-      status === "active" && /* @__PURE__ */ jsxRuntime.jsx(
+      (status === "pending" || status === "streaming") && /* @__PURE__ */ jsxRuntime.jsx(
         index.Loading,
         {
           size: "sm",
-          variant: "spinner",
+          kind: "spinner",
           color: "current",
           label: "",
           role: "presentation",
           "aria-hidden": "true"
         }
       ),
-      status === "pending" && /* @__PURE__ */ jsxRuntime.jsx("span", { className: ThinkingIndicator_module.default.stepDot })
+      status === "idle" && /* @__PURE__ */ jsxRuntime.jsx("span", { className: ThinkingIndicator_module.default.stepDot })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: ThinkingIndicator_module.default.stepLabel, children: label })
   ] });
@@ -121,7 +121,7 @@ function ThinkingStep({ label, status = "pending", className, ...htmlProps }) {
 function ThinkingIndicatorRoot({
   active = true,
   label = "Thinking...",
-  variant = "dots",
+  kind = "dots",
   showElapsed = false,
   steps,
   className,
@@ -130,18 +130,17 @@ function ThinkingIndicatorRoot({
   const elapsedTime = useElapsedTime(active && showElapsed);
   const contextValue = {
     active,
-    variant
+    kind
   };
   if (!active) return null;
   const classes = [ThinkingIndicator_module.default.thinkingIndicator, className].filter(Boolean).join(" ");
-  const loadingVariant = variant === "dots" ? "dots" : variant === "pulse" ? "pulse" : "spinner";
   return /* @__PURE__ */ jsxRuntime.jsx(ThinkingIndicatorContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { ...htmlProps, className: classes, role: "status", "aria-label": label, "aria-live": "polite", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ThinkingIndicator_module.default.main, children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         index.Loading,
         {
           size: "sm",
-          variant: loadingVariant,
+          kind,
           color: "muted",
           label: "",
           role: "presentation",

package/dist/components/ThinkingIndicator/index.d.ts

@@ -1,6 +1,7 @@
 import * as React from "react";
-export type ThinkingVariant = "dots" | "pulse" | "spinner";
-export type StepStatus = "pending" | "active" | "complete" | "error";
+export type ThinkingKind = "dots" | "pulse" | "spinner";
+/** Shared lifecycle axis: `idle` waits, `pending`/`streaming` are in flight. */
+export type StepStatus = "idle" | "pending" | "streaming" | "complete" | "error";
 export interface ThinkingStep {
     id: string;
     label: string;
@@ -12,7 +13,7 @@ export interface ThinkingIndicatorProps extends React.HTMLAttributes<HTMLDivElem
     /** Status text */
     label?: string;
     /** Animation style */
-    variant?: ThinkingVariant;
+    kind?: ThinkingKind;
     /** Show elapsed time */
     showElapsed?: boolean;
     /** Multi-step progress */
@@ -29,12 +30,12 @@ export interface ThinkingStepProps extends React.HTMLAttributes<HTMLDivElement>
 }
 interface ThinkingIndicatorContextValue {
     active: boolean;
-    variant: ThinkingVariant;
+    kind: ThinkingKind;
 }
 declare function useThinkingIndicatorContext(): ThinkingIndicatorContextValue;
 declare function ThinkingSteps({ children, className, ...htmlProps }: ThinkingStepsProps): import("react/jsx-runtime").JSX.Element;
 declare function ThinkingStep({ label, status, className, ...htmlProps }: ThinkingStepProps): import("react/jsx-runtime").JSX.Element;
-declare function ThinkingIndicatorRoot({ active, label, variant, showElapsed, steps, className, ...htmlProps }: ThinkingIndicatorProps): import("react/jsx-runtime").JSX.Element | null;
+declare function ThinkingIndicatorRoot({ active, label, kind, showElapsed, steps, className, ...htmlProps }: ThinkingIndicatorProps): import("react/jsx-runtime").JSX.Element | null;
 export declare const ThinkingIndicator: typeof ThinkingIndicatorRoot & {
     Steps: typeof ThinkingSteps;
     Step: typeof ThinkingStep;

package/dist/components/ThinkingIndicator/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ThinkingIndicator/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC;AAC3D,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,QAAQ,GAAG,UAAU,GAAG,OAAO,CAAC;AAErE,MAAM,WAAW,YAAY;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,UAAU,CAAC;CACrB;AAED,MAAM,WAAW,sBAAuB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAClF,iCAAiC;IACjC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,kBAAkB;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sBAAsB;IACtB,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,wBAAwB;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,0BAA0B;IAC1B,KAAK,CAAC,EAAE,YAAY,EAAE,CAAC;CACxB;AAED,MAAM,WAAW,kBAAmB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC9E,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,MAAM,WAAW,iBAAkB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC7E,iBAAiB;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,kBAAkB;IAClB,MAAM,CAAC,EAAE,UAAU,CAAC;CACrB;AAMD,UAAU,6BAA6B;IACrC,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,eAAe,CAAC;CAC1B;AAID,iBAAS,2BAA2B,kCAQnC;AA6ED,iBAAS,aAAa,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,EAAE,kBAAkB,2CAQ/E;AAED,iBAAS,YAAY,CAAC,EAAE,KAAK,EAAE,MAAkB,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,EAAE,iBAAiB,2CA6B9F;AAMD,iBAAS,qBAAqB,CAAC,EAC7B,MAAa,EACb,KAAqB,EACrB,OAAgB,EAChB,WAAmB,EACnB,KAAK,EACL,SAAS,EACT,GAAG,SAAS,EACb,EAAE,sBAAsB,kDAyCxB;AAMD,eAAO,MAAM,iBAAiB;;;CAG5B,CAAC;AAEH,OAAO,EAAE,qBAAqB,EAAE,aAAa,EAAE,YAAY,EAAE,CAAC;AAE9D,OAAO,EAAE,2BAA2B,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ThinkingIndicator/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC;AACxD,gFAAgF;AAChF,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,OAAO,CAAC;AAEjF,MAAM,WAAW,YAAY;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,UAAU,CAAC;CACrB;AAED,MAAM,WAAW,sBAAuB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAClF,iCAAiC;IACjC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,kBAAkB;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sBAAsB;IACtB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,wBAAwB;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,0BAA0B;IAC1B,KAAK,CAAC,EAAE,YAAY,EAAE,CAAC;CACxB;AAED,MAAM,WAAW,kBAAmB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC9E,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,MAAM,WAAW,iBAAkB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC7E,iBAAiB;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,kBAAkB;IAClB,MAAM,CAAC,EAAE,UAAU,CAAC;CACrB;AAMD,UAAU,6BAA6B;IACrC,MAAM,EAAE,OAAO,CAAC;IAChB,IAAI,EAAE,YAAY,CAAC;CACpB;AAID,iBAAS,2BAA2B,kCAQnC;AA6ED,iBAAS,aAAa,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,EAAE,kBAAkB,2CAQ/E;AAED,iBAAS,YAAY,CAAC,EAAE,KAAK,EAAE,MAAe,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,EAAE,iBAAiB,2CA6B3F;AAMD,iBAAS,qBAAqB,CAAC,EAC7B,MAAa,EACb,KAAqB,EACrB,IAAa,EACb,WAAmB,EACnB,KAAK,EACL,SAAS,EACT,GAAG,SAAS,EACb,EAAE,sBAAsB,kDAsCxB;AAMD,eAAO,MAAM,iBAAiB;;;CAG5B,CAAC;AAEH,OAAO,EAAE,qBAAqB,EAAE,aAAa,EAAE,YAAY,EAAE,CAAC;AAE9D,OAAO,EAAE,2BAA2B,EAAE,CAAC"}

package/dist/components/ThinkingIndicator/index.js

@@ -73,7 +73,7 @@ function ThinkingSteps({ children, className, ...htmlProps }) {
   const classes = [styles.steps, className].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsx("div", { ...htmlProps, className: classes, children });
 }
-function ThinkingStep({ label, status = "pending", className, ...htmlProps }) {
+function ThinkingStep({ label, status = "idle", className, ...htmlProps }) {
   const classes = [
     styles.step,
     styles[`step${status.charAt(0).toUpperCase() + status.slice(1)}`],
@@ -83,18 +83,18 @@ function ThinkingStep({ label, status = "pending", className, ...htmlProps }) {
     /* @__PURE__ */ jsxs("span", { className: styles.stepIndicator, children: [
       status === "complete" && /* @__PURE__ */ jsx(CheckIcon, {}),
       status === "error" && /* @__PURE__ */ jsx(ErrorIcon, {}),
-      status === "active" && /* @__PURE__ */ jsx(
+      (status === "pending" || status === "streaming") && /* @__PURE__ */ jsx(
         Loading,
         {
           size: "sm",
-          variant: "spinner",
+          kind: "spinner",
           color: "current",
           label: "",
           role: "presentation",
           "aria-hidden": "true"
         }
       ),
-      status === "pending" && /* @__PURE__ */ jsx("span", { className: styles.stepDot })
+      status === "idle" && /* @__PURE__ */ jsx("span", { className: styles.stepDot })
     ] }),
     /* @__PURE__ */ jsx("span", { className: styles.stepLabel, children: label })
   ] });
@@ -102,7 +102,7 @@ function ThinkingStep({ label, status = "pending", className, ...htmlProps }) {
 function ThinkingIndicatorRoot({
   active = true,
   label = "Thinking...",
-  variant = "dots",
+  kind = "dots",
   showElapsed = false,
   steps,
   className,
@@ -111,18 +111,17 @@ function ThinkingIndicatorRoot({
   const elapsedTime = useElapsedTime(active && showElapsed);
   const contextValue = {
     active,
-    variant
+    kind
   };
   if (!active) return null;
   const classes = [styles.thinkingIndicator, className].filter(Boolean).join(" ");
-  const loadingVariant = variant === "dots" ? "dots" : variant === "pulse" ? "pulse" : "spinner";
   return /* @__PURE__ */ jsx(ThinkingIndicatorContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs("div", { ...htmlProps, className: classes, role: "status", "aria-label": label, "aria-live": "polite", children: [
     /* @__PURE__ */ jsxs("div", { className: styles.main, children: [
       /* @__PURE__ */ jsx(
         Loading,
         {
           size: "sm",
-          variant: loadingVariant,
+          kind,
           color: "muted",
           label: "",
           role: "presentation",

package/dist/components/Toast/Toast.module.scss.cjs

@@ -1,24 +1,24 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const container = "_container_1qytp_1";
-const topleft = "_topleft_1qytp_14";
-const topcenter = "_topcenter_1qytp_19";
-const topright = "_topright_1qytp_25";
-const bottomleft = "_bottomleft_1qytp_30";
-const bottomcenter = "_bottomcenter_1qytp_36";
-const bottomright = "_bottomright_1qytp_43";
-const toast = "_toast_1qytp_49";
-const toastEnter = "_toastEnter_1qytp_1";
-const description = "_description_1qytp_66";
-const icon = "_icon_1qytp_80";
-const success = "_success_1qytp_84";
-const title = "_title_1qytp_88";
-const error = "_error_1qytp_94";
-const warning = "_warning_1qytp_104";
-const info = "_info_1qytp_114";
-const content = "_content_1qytp_145";
-const action = "_action_1qytp_170";
-const close = "_close_1qytp_234";
+const container = "_container_vtzde_1";
+const topleft = "_topleft_vtzde_14";
+const topcenter = "_topcenter_vtzde_19";
+const topright = "_topright_vtzde_25";
+const bottomleft = "_bottomleft_vtzde_30";
+const bottomcenter = "_bottomcenter_vtzde_36";
+const bottomright = "_bottomright_vtzde_43";
+const toast = "_toast_vtzde_49";
+const toastEnter = "_toastEnter_vtzde_1";
+const description = "_description_vtzde_79";
+const toneSuccess = "_toneSuccess_vtzde_93";
+const toneDanger = "_toneDanger_vtzde_100";
+const toneWarning = "_toneWarning_vtzde_107";
+const toneInfo = "_toneInfo_vtzde_114";
+const icon = "_icon_vtzde_121";
+const content = "_content_vtzde_136";
+const title = "_title_vtzde_143";
+const action = "_action_vtzde_162";
+const close = "_close_vtzde_163";
 const styles = {
   container,
   topleft,
@@ -30,14 +30,13 @@ const styles = {
   toast,
   toastEnter,
   description,
-  "default": "_default_1qytp_80",
+  toneSuccess,
+  toneDanger,
+  toneWarning,
+  toneInfo,
   icon,
-  success,
-  title,
-  error,
-  warning,
-  info,
   content,
+  title,
   action,
   close
 };
@@ -50,14 +49,14 @@ exports.container = container;
 exports.content = content;
 exports.default = styles;
 exports.description = description;
-exports.error = error;
 exports.icon = icon;
-exports.info = info;
-exports.success = success;
 exports.title = title;
 exports.toast = toast;
 exports.toastEnter = toastEnter;
+exports.toneDanger = toneDanger;
+exports.toneInfo = toneInfo;
+exports.toneSuccess = toneSuccess;
+exports.toneWarning = toneWarning;
 exports.topcenter = topcenter;
 exports.topleft = topleft;
 exports.topright = topright;
-exports.warning = warning;

package/dist/components/Toast/Toast.module.scss.js

@@ -1,22 +1,22 @@
-const container = "_container_1qytp_1";
-const topleft = "_topleft_1qytp_14";
-const topcenter = "_topcenter_1qytp_19";
-const topright = "_topright_1qytp_25";
-const bottomleft = "_bottomleft_1qytp_30";
-const bottomcenter = "_bottomcenter_1qytp_36";
-const bottomright = "_bottomright_1qytp_43";
-const toast = "_toast_1qytp_49";
-const toastEnter = "_toastEnter_1qytp_1";
-const description = "_description_1qytp_66";
-const icon = "_icon_1qytp_80";
-const success = "_success_1qytp_84";
-const title = "_title_1qytp_88";
-const error = "_error_1qytp_94";
-const warning = "_warning_1qytp_104";
-const info = "_info_1qytp_114";
-const content = "_content_1qytp_145";
-const action = "_action_1qytp_170";
-const close = "_close_1qytp_234";
+const container = "_container_vtzde_1";
+const topleft = "_topleft_vtzde_14";
+const topcenter = "_topcenter_vtzde_19";
+const topright = "_topright_vtzde_25";
+const bottomleft = "_bottomleft_vtzde_30";
+const bottomcenter = "_bottomcenter_vtzde_36";
+const bottomright = "_bottomright_vtzde_43";
+const toast = "_toast_vtzde_49";
+const toastEnter = "_toastEnter_vtzde_1";
+const description = "_description_vtzde_79";
+const toneSuccess = "_toneSuccess_vtzde_93";
+const toneDanger = "_toneDanger_vtzde_100";
+const toneWarning = "_toneWarning_vtzde_107";
+const toneInfo = "_toneInfo_vtzde_114";
+const icon = "_icon_vtzde_121";
+const content = "_content_vtzde_136";
+const title = "_title_vtzde_143";
+const action = "_action_vtzde_162";
+const close = "_close_vtzde_163";
 const styles = {
   container,
   topleft,
@@ -28,14 +28,13 @@ const styles = {
   toast,
   toastEnter,
   description,
-  "default": "_default_1qytp_80",
+  toneSuccess,
+  toneDanger,
+  toneWarning,
+  toneInfo,
   icon,
-  success,
-  title,
-  error,
-  warning,
-  info,
   content,
+  title,
   action,
   close
 };
@@ -49,15 +48,15 @@ export {
   content,
   styles as default,
   description,
-  error,
   icon,
-  info,
-  success,
   title,
   toast,
   toastEnter,
+  toneDanger,
+  toneInfo,
+  toneSuccess,
+  toneWarning,
   topcenter,
   topleft,
-  topright,
-  warning
+  topright
 };

package/dist/components/Toast/index.cjs

@@ -3,6 +3,8 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
+const index = require("../Button/index.cjs");
+const index$1 = require("../IconButton/index.cjs");
 const Toast_module = require("./Toast.module.scss.cjs");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
@@ -30,19 +32,19 @@ function useToast() {
   const toast = React__namespace.useCallback((options) => {
     return context.addToast(options);
   }, [context]);
-  const makeVariantHelper = React__namespace.useCallback(
-    (variant) => (titleOrOptions, description) => {
+  const makeToneHelper = React__namespace.useCallback(
+    (tone) => (titleOrOptions, description) => {
       if (typeof titleOrOptions === "string") {
-        return context.addToast({ title: titleOrOptions, description, variant });
+        return context.addToast({ title: titleOrOptions, description, tone });
       }
-      return context.addToast({ ...titleOrOptions, variant });
+      return context.addToast({ ...titleOrOptions, tone });
     },
     [context]
   );
-  const success = React__namespace.useMemo(() => makeVariantHelper("success"), [makeVariantHelper]);
-  const error = React__namespace.useMemo(() => makeVariantHelper("error"), [makeVariantHelper]);
-  const warning = React__namespace.useMemo(() => makeVariantHelper("warning"), [makeVariantHelper]);
-  const info = React__namespace.useMemo(() => makeVariantHelper("info"), [makeVariantHelper]);
+  const success = React__namespace.useMemo(() => makeToneHelper("success"), [makeToneHelper]);
+  const error = React__namespace.useMemo(() => makeToneHelper("danger"), [makeToneHelper]);
+  const warning = React__namespace.useMemo(() => makeToneHelper("warning"), [makeToneHelper]);
+  const info = React__namespace.useMemo(() => makeToneHelper("info"), [makeToneHelper]);
   return {
     toast,
     success,
@@ -86,18 +88,25 @@ function CloseIcon() {
     /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
   ] });
 }
-const variantIcons = {
-  default: null,
+const toneIcons = {
+  neutral: null,
   success: SuccessIcon,
-  error: ErrorIcon,
+  danger: ErrorIcon,
   warning: WarningIcon,
   info: InfoIcon
 };
+const TONE_CLASS = {
+  neutral: void 0,
+  success: Toast_module.default.toneSuccess,
+  danger: Toast_module.default.toneDanger,
+  warning: Toast_module.default.toneWarning,
+  info: Toast_module.default.toneInfo
+};
 function ToastItem({
   id,
   title,
   description,
-  variant = "default",
+  tone = "neutral",
   action,
   onDismiss,
   onPause,
@@ -105,17 +114,13 @@ function ToastItem({
   className,
   ...htmlProps
 }) {
-  const Icon = variantIcons[variant];
+  const Icon = toneIcons[tone];
   const uniqueId = React__namespace.useId();
   const toastRef = React__namespace.useRef(null);
   const titleId = title ? `toast-title-${id || uniqueId}` : void 0;
   const descId = description ? `toast-desc-${id || uniqueId}` : void 0;
-  const liveRole = variant === "error" || variant === "warning" ? "alert" : "status";
-  const toastClasses = [
-    Toast_module.default.toast,
-    Toast_module.default[variant],
-    className
-  ].filter(Boolean).join(" ");
+  const liveRole = tone === "danger" || tone === "warning" ? "alert" : "status";
+  const toastClasses = [Toast_module.default.toast, TONE_CLASS[tone], className].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -150,19 +155,12 @@ function ToastItem({
           title && /* @__PURE__ */ jsxRuntime.jsx("div", { id: titleId, className: Toast_module.default.title, children: title }),
           description && /* @__PURE__ */ jsxRuntime.jsx("div", { id: descId, className: Toast_module.default.description, children: description })
         ] }),
-        action && /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            type: "button",
-            className: Toast_module.default.action,
-            onClick: action.onClick,
-            children: action.label
-          }
-        ),
+        action && /* @__PURE__ */ jsxRuntime.jsx(index.Button, { variant: "link", size: "sm", className: Toast_module.default.action, onClick: action.onClick, children: action.label }),
         onDismiss && /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
+          index$1.IconButton,
           {
-            type: "button",
+            variant: "ghost",
+            size: "sm",
             className: Toast_module.default.close,
             onClick: onDismiss,
             "aria-label": "Dismiss notification",

package/dist/components/Toast/index.d.ts

@@ -1,11 +1,12 @@
-import * as React from 'react';
-export type ToastVariant = 'default' | 'success' | 'error' | 'warning' | 'info';
+import * as React from "react";
+export type ToastTone = "neutral" | "success" | "danger" | "warning" | "info";
 export type ToastPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
 export interface ToastData {
     id: string;
     title?: string;
     description?: string;
-    variant?: ToastVariant;
+    /** Colour. `neutral` is the plain notification; the semantic tones paint the shared status ramp. */
+    tone?: ToastTone;
     duration?: number;
     action?: {
         label: string;
@@ -32,14 +33,14 @@ export interface ToastProviderProps {
 }
 export declare function useToast(): {
     toast: (options: ToastInput) => string;
-    success: (titleOrOptions: string | Omit<ToastInput, "variant">, description?: string) => string;
-    error: (titleOrOptions: string | Omit<ToastInput, "variant">, description?: string) => string;
-    warning: (titleOrOptions: string | Omit<ToastInput, "variant">, description?: string) => string;
-    info: (titleOrOptions: string | Omit<ToastInput, "variant">, description?: string) => string;
+    success: (titleOrOptions: string | Omit<ToastInput, "tone">, description?: string) => string;
+    error: (titleOrOptions: string | Omit<ToastInput, "tone">, description?: string) => string;
+    warning: (titleOrOptions: string | Omit<ToastInput, "tone">, description?: string) => string;
+    info: (titleOrOptions: string | Omit<ToastInput, "tone">, description?: string) => string;
     dismiss: (id: string) => void;
     dismissAll: () => void;
 };
-declare function ToastItem({ id, title, description, variant, action, onDismiss, onPause, onResume, className, ...htmlProps }: ToastProps & {
+declare function ToastItem({ id, title, description, tone, action, onDismiss, onPause, onResume, className, ...htmlProps }: ToastProps & {
     id?: string;
     onPause?: () => void;
     onResume?: () => void;

package/dist/components/Toast/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Toast/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;AAChF,MAAM,MAAM,aAAa,GACrB,UAAU,GACV,YAAY,GACZ,WAAW,GACX,aAAa,GACb,eAAe,GACf,cAAc,CAAC;AAEnB,MAAM,WAAW,SAAS;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE;QACP,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,MAAM,IAAI,CAAC;KACrB,CAAC;CACH;AAED,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC;IACvD,sFAAsF;IACtF,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IAC5G,8CAA8C;IAC9C,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,MAAM,WAAW,kBAAkB;IACjC,sCAAsC;IACtC,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,mDAAmD;IACnD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,uCAAuC;IACvC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,eAAe;IACf,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAmBD,wBAAgB,QAAQ;qBAMoB,UAAU;8BAM/B,MAAM,GAAG,IAAI,CAAC,UAAU,EAAE,SAAS,CAAC,gBAAgB,MAAM;4BAA1D,MAAM,GAAG,IAAI,CAAC,UAAU,EAAE,SAAS,CAAC,gBAAgB,MAAM;8BAA1D,MAAM,GAAG,IAAI,CAAC,UAAU,EAAE,SAAS,CAAC,gBAAgB,MAAM;2BAA1D,MAAM,GAAG,IAAI,CAAC,UAAU,EAAE,SAAS,CAAC,gBAAgB,MAAM;kBAtB7D,MAAM,KAAK,IAAI;sBACd,IAAI;EA4CxB;AAkED,iBAAS,SAAS,CAAC,EACjB,EAAE,EACF,KAAK,EACL,WAAW,EACX,OAAmB,EACnB,MAAM,EACN,SAAS,EACT,OAAO,EACP,QAAQ,EACR,SAAS,EACT,GAAG,SAAS,EACb,EAAE,UAAU,GAAG;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB,2CAsEA;AA6CD,wBAAgB,aAAa,CAAC,EAC5B,QAAyB,EACzB,QAAe,EACf,GAAO,EACP,QAAQ,GACT,EAAE,kBAAkB,2CA8HpB;AAMD,eAAO,MAAM,KAAK;;CAEhB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Toast/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,CAAC;AAC9E,MAAM,MAAM,aAAa,GACrB,UAAU,GACV,YAAY,GACZ,WAAW,GACX,aAAa,GACb,eAAe,GACf,cAAc,CAAC;AAEnB,MAAM,WAAW,SAAS;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oGAAoG;IACpG,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE;QACP,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,MAAM,IAAI,CAAC;KACrB,CAAC;CACH;AAED,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC;IACvD,sFAAsF;IACtF,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IAC5G,8CAA8C;IAC9C,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,MAAM,WAAW,kBAAkB;IACjC,sCAAsC;IACtC,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,mDAAmD;IACnD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,uCAAuC;IACvC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,eAAe;IACf,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAmBD,wBAAgB,QAAQ;qBAMoB,UAAU;8BAM/B,MAAM,GAAG,IAAI,CAAC,UAAU,EAAE,MAAM,CAAC,gBAAgB,MAAM;4BAAvD,MAAM,GAAG,IAAI,CAAC,UAAU,EAAE,MAAM,CAAC,gBAAgB,MAAM;8BAAvD,MAAM,GAAG,IAAI,CAAC,UAAU,EAAE,MAAM,CAAC,gBAAgB,MAAM;2BAAvD,MAAM,GAAG,IAAI,CAAC,UAAU,EAAE,MAAM,CAAC,gBAAgB,MAAM;kBAtB1D,MAAM,KAAK,IAAI;sBACd,IAAI;EA6CxB;AA0ED,iBAAS,SAAS,CAAC,EACjB,EAAE,EACF,KAAK,EACL,WAAW,EACX,IAAgB,EAChB,MAAM,EACN,SAAS,EACT,OAAO,EACP,QAAQ,EACR,SAAS,EACT,GAAG,SAAS,EACb,EAAE,UAAU,GAAG;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB,2CA+DA;AA6CD,wBAAgB,aAAa,CAAC,EAC5B,QAAyB,EACzB,QAAe,EACf,GAAO,EACP,QAAQ,GACT,EAAE,kBAAkB,2CA8HpB;AAMD,eAAO,MAAM,KAAK;;CAEhB,CAAC"}

package/dist/components/Toast/index.js

@@ -1,6 +1,8 @@
 "use client";
 import { jsxs, jsx } from "react/jsx-runtime";
 import * as React from "react";
+import { Button } from "../Button/index.js";
+import { IconButton } from "../IconButton/index.js";
 import styles from "./Toast.module.scss.js";
 const ToastContext = React.createContext(null);
 function useToast() {
@@ -11,19 +13,19 @@ function useToast() {
   const toast = React.useCallback((options) => {
     return context.addToast(options);
   }, [context]);
-  const makeVariantHelper = React.useCallback(
-    (variant) => (titleOrOptions, description) => {
+  const makeToneHelper = React.useCallback(
+    (tone) => (titleOrOptions, description) => {
       if (typeof titleOrOptions === "string") {
-        return context.addToast({ title: titleOrOptions, description, variant });
+        return context.addToast({ title: titleOrOptions, description, tone });
       }
-      return context.addToast({ ...titleOrOptions, variant });
+      return context.addToast({ ...titleOrOptions, tone });
     },
     [context]
   );
-  const success = React.useMemo(() => makeVariantHelper("success"), [makeVariantHelper]);
-  const error = React.useMemo(() => makeVariantHelper("error"), [makeVariantHelper]);
-  const warning = React.useMemo(() => makeVariantHelper("warning"), [makeVariantHelper]);
-  const info = React.useMemo(() => makeVariantHelper("info"), [makeVariantHelper]);
+  const success = React.useMemo(() => makeToneHelper("success"), [makeToneHelper]);
+  const error = React.useMemo(() => makeToneHelper("danger"), [makeToneHelper]);
+  const warning = React.useMemo(() => makeToneHelper("warning"), [makeToneHelper]);
+  const info = React.useMemo(() => makeToneHelper("info"), [makeToneHelper]);
   return {
     toast,
     success,
@@ -67,18 +69,25 @@ function CloseIcon() {
     /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
   ] });
 }
-const variantIcons = {
-  default: null,
+const toneIcons = {
+  neutral: null,
   success: SuccessIcon,
-  error: ErrorIcon,
+  danger: ErrorIcon,
   warning: WarningIcon,
   info: InfoIcon
 };
+const TONE_CLASS = {
+  neutral: void 0,
+  success: styles.toneSuccess,
+  danger: styles.toneDanger,
+  warning: styles.toneWarning,
+  info: styles.toneInfo
+};
 function ToastItem({
   id,
   title,
   description,
-  variant = "default",
+  tone = "neutral",
   action,
   onDismiss,
   onPause,
@@ -86,17 +95,13 @@ function ToastItem({
   className,
   ...htmlProps
 }) {
-  const Icon = variantIcons[variant];
+  const Icon = toneIcons[tone];
   const uniqueId = React.useId();
   const toastRef = React.useRef(null);
   const titleId = title ? `toast-title-${id || uniqueId}` : void 0;
   const descId = description ? `toast-desc-${id || uniqueId}` : void 0;
-  const liveRole = variant === "error" || variant === "warning" ? "alert" : "status";
-  const toastClasses = [
-    styles.toast,
-    styles[variant],
-    className
-  ].filter(Boolean).join(" ");
+  const liveRole = tone === "danger" || tone === "warning" ? "alert" : "status";
+  const toastClasses = [styles.toast, TONE_CLASS[tone], className].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -131,19 +136,12 @@ function ToastItem({
           title && /* @__PURE__ */ jsx("div", { id: titleId, className: styles.title, children: title }),
           description && /* @__PURE__ */ jsx("div", { id: descId, className: styles.description, children: description })
         ] }),
-        action && /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            className: styles.action,
-            onClick: action.onClick,
-            children: action.label
-          }
-        ),
+        action && /* @__PURE__ */ jsx(Button, { variant: "link", size: "sm", className: styles.action, onClick: action.onClick, children: action.label }),
         onDismiss && /* @__PURE__ */ jsx(
-          "button",
+          IconButton,
           {
-            type: "button",
+            variant: "ghost",
+            size: "sm",
             className: styles.close,
             onClick: onDismiss,
             "aria-label": "Dismiss notification",