@medusajs/ui 2.4.3 → 3.0.0-next-20240425093236

package/README.md

@@ -36,7 +36,7 @@
 ### Installation
 
 ```sh
-yarn add @medusajs/medusa-ui
+yarn add @medusajs/ui
 ```
 
 ### Usage

package/dist/cjs/components/toast/toast.d.ts

@@ -1,24 +1,16 @@
-import * as Primitives from "@radix-ui/react-toast";
 import * as React from "react";
-declare const ToastProvider: React.FC<Primitives.ToastProviderProps>;
-declare const ToastViewport: React.ForwardRefExoticComponent<Omit<Primitives.ToastViewportProps & React.RefAttributes<HTMLOListElement>, "ref"> & React.RefAttributes<HTMLOListElement>>;
-interface ActionProps {
-    label: string;
-    altText: string;
-    onClick: () => void | Promise<void>;
-}
-interface ToastProps extends React.ComponentPropsWithoutRef<typeof Primitives.Root> {
-    variant?: "info" | "success" | "warning" | "error" | "loading";
-    title?: string;
+import type { ToastAction, ToastVariant } from "../../types";
+interface ToastComponentProps {
+    id: string | number;
+    variant?: ToastVariant;
+    title: string;
     description?: string;
-    action?: ActionProps;
-    disableDismiss?: boolean;
+    action?: ToastAction;
+    onDismiss?: (id?: string | number) => void;
+    dismissLabel?: string;
 }
 /**
- * This component is based on the [Radix UI Toast](https://www.radix-ui.com/primitives/docs/components/toast) primitives.
- *
- * @excludeExternal
+ * This component is based on the [Sonner](https://sonner.emilkowal.ski/toast) toast library.
  */
-declare const Toast: React.ForwardRefExoticComponent<ToastProps & React.RefAttributes<HTMLLIElement>>;
-type ToastActionElement = ActionProps;
-export { Toast, ToastProvider, ToastViewport, type ToastActionElement, type ToastProps, };
+export declare const Toast: ({ id, variant, title, description, action, onDismiss, dismissLabel, }: ToastComponentProps) => React.JSX.Element;
+export {};

package/dist/cjs/components/toast/toast.js

@@ -1,88 +1,95 @@
 "use strict";
-"use client";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ToastViewport = exports.ToastProvider = exports.Toast = void 0;
+exports.Toast = void 0;
 const tslib_1 = require("tslib");
 const icons_1 = require("@medusajs/icons");
-const Primitives = tslib_1.__importStar(require("@radix-ui/react-toast"));
 const React = tslib_1.__importStar(require("react"));
 const clx_1 = require("../../utils/clx");
-const ToastProvider = Primitives.Provider;
-exports.ToastProvider = ToastProvider;
-ToastProvider.displayName = "ToastProvider";
-const ToastViewport = React.forwardRef(({ className, ...props }, ref) => (React.createElement(Primitives.Viewport, { ref: ref, className: (0, clx_1.clx)("fixed right-0 top-0 z-[9999] w-full p-6 md:max-w-[484px]", className), ...props })));
-exports.ToastViewport = ToastViewport;
-ToastViewport.displayName = "Toast.Viewport";
 /**
- * This component is based on the [Radix UI Toast](https://www.radix-ui.com/primitives/docs/components/toast) primitives.
- *
- * @excludeExternal
+ * This component is based on the [Sonner](https://sonner.emilkowal.ski/toast) toast library.
  */
-const Toast = React.forwardRef(({ className, 
+const Toast = ({ 
 /**
- * The toast's style.
+ * Optional ID of the toast.
  */
-variant, 
+id, 
 /**
- * The toast's title.
+ * @ignore
+ *
+ * @privateRemarks
+ * As the Toast component is created using
+ * the `toast` utility functions, the variant is inferred
+ * from the utility function.
+ */
+variant = "info", 
+/**
+ * @ignore
+ *
+ * @privateRemarks
+ * The `toast` utility functions accept this as a parameter.
  */
 title, 
 /**
- * The toast's content.
+ * The toast's text.
  */
 description, 
 /**
- * The actions to show in the toast as buttons.
+ * The toast's action buttons.
  */
 action, 
 /**
- * Whether to hide the Close button.
+ * @ignore
+ *
+ * @privateRemarks
+ * The `toast` utility functions don't allow
+ * passing this prop.
+ */
+onDismiss, 
+/**
+ * The label of the dismiss button, if available.
  */
-disableDismiss = false, ...props }, ref) => {
-    let Icon = undefined;
+dismissLabel = "Close", }) => {
+    const hasActionables = !!action || onDismiss;
+    let icon = undefined;
     switch (variant) {
         case "success":
-            Icon = React.createElement(icons_1.CheckCircleSolid, { className: "text-ui-tag-green-icon" });
+            icon = React.createElement(icons_1.CheckCircleSolid, { className: "text-ui-tag-green-icon" });
             break;
         case "warning":
-            Icon = React.createElement(icons_1.ExclamationCircleSolid, { className: "text-ui-tag-orange-icon" });
+            icon = React.createElement(icons_1.ExclamationCircleSolid, { className: "text-ui-tag-orange-icon" });
             break;
         case "error":
-            Icon = React.createElement(icons_1.XCircleSolid, { className: "text-ui-tag-red-icon" });
+            icon = React.createElement(icons_1.XCircleSolid, { className: "text-ui-tag-red-icon" });
             break;
         case "loading":
-            Icon = React.createElement(icons_1.Spinner, { className: "text-ui-tag-blue-icon animate-spin" });
+            icon = React.createElement(icons_1.Spinner, { className: "text-ui-tag-blue-icon animate-spin" });
+            break;
+        case "info":
+            icon = React.createElement(icons_1.InformationCircleSolid, { className: "text-ui-fg-base" });
             break;
         default:
-            Icon = React.createElement(icons_1.InformationCircleSolid, { className: "text-ui-fg-base" });
             break;
     }
-    if (action && !action.altText) {
-        // eslint-disable-next-line turbo/no-undeclared-env-vars
-        if (process.env.NODE_ENV === "development") {
-            console.warn("Omitting `altText` from the action is not recommended. Please provide a description for screen readers.");
-        }
-    }
-    return (React.createElement(Primitives.Root, { ref: ref, className: (0, clx_1.clx)("bg-ui-bg-base border-ui-border-base flex h-fit min-h-[74px] w-full overflow-hidden rounded-md border shadow-[0_4px_12px_rgba(0,0,0,0.05)] md:max-w-[440px]", "data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none", className), ...props },
-        React.createElement("div", { className: "border-ui-border-base flex flex-1 items-start space-x-3 border-r p-4" },
-            React.createElement("span", { "aria-hidden": true }, Icon),
-            React.createElement("div", null,
-                title && (React.createElement(Primitives.Title, { className: "text-ui-fg-base txt-compact-small-plus" }, title)),
-                description && (React.createElement(Primitives.Description, { className: "text-ui-fg-subtle txt-compact-medium" }, description)))),
-        React.createElement("div", { className: "flex flex-col" },
-            action && (React.createElement(React.Fragment, null,
-                React.createElement(Primitives.Action, { altText: action.altText, className: (0, clx_1.clx)("txt-compact-small-plus text-ui-fg-base bg-ui-bg-base hover:bg-ui-bg-base-hover active:bg-ui-bg-base-pressed flex flex-1 items-center justify-center px-6 transition-colors", {
-                        "text-ui-fg-error": variant === "error",
-                    }), onClick: (e) => {
-                        e.preventDefault();
-                        action.onClick();
-                    }, type: "button" }, action.label),
-                React.createElement("div", { className: "bg-ui-border-base h-px w-full" }))),
-            !disableDismiss && (React.createElement(Primitives.Close, { className: (0, clx_1.clx)("txt-compact-small-plus text-ui-fg-subtle bg-ui-bg-base hover:bg-ui-bg-base-hover active:bg-ui-bg-base-pressed flex flex-1 items-center justify-center px-6 transition-colors", {
-                    "h-1/2": action,
-                    "h-full": !action,
-                }), "aria-label": "Close" }, "Close")))));
-});
+    return (React.createElement("div", { className: "shadow-elevation-flyout bg-ui-bg-base flex w-fit min-w-[360px] max-w-[440px] overflow-hidden rounded-lg" },
+        React.createElement("div", { className: (0, clx_1.clx)("grid flex-1 items-start gap-3 py-3 pl-3", {
+                "border-r pr-3": hasActionables,
+                "pr-6": !hasActionables,
+                "grid-cols-[20px_1fr]": !!icon,
+                "grid-cols-1": !icon,
+            }) },
+            !!icon && (React.createElement("span", { className: "flex size-5 items-center justify-center", "aria-hidden": true }, icon)),
+            React.createElement("div", { className: "flex flex-col" },
+                React.createElement("span", { className: "txt-compact-small-plus text-ui-fg-base" }, title),
+                React.createElement("span", { className: "txt-small text-ui-fg-subtle text-pretty" }, description))),
+        hasActionables && (React.createElement("div", { className: (0, clx_1.clx)("grid grid-cols-1", {
+                "grid-rows-2": !!action && onDismiss,
+                "grid-rows-1": !action || !onDismiss,
+            }) },
+            !!action && (React.createElement("button", { type: "button", className: (0, clx_1.clx)("txt-compact-small-plus text-ui-fg-base bg-ui-bg-base hover:bg-ui-bg-base-hover active:bg-ui-bg-base-pressed flex items-center justify-center px-4 transition-colors", {
+                    "border-ui-border-base border-b": onDismiss,
+                    "text-ui-fg-error": action.variant === "destructive",
+                }), onClick: action.onClick }, action.label)),
+            onDismiss && (React.createElement("button", { type: "button", onClick: () => onDismiss(id), className: (0, clx_1.clx)("txt-compact-small-plus text-ui-fg-subtle bg-ui-bg-base hover:bg-ui-bg-base-hover active:bg-ui-bg-base-pressed flex items-center justify-center px-4 transition-colors") }, dismissLabel))))));
+};
 exports.Toast = Toast;
-Toast.displayName = "Toast";
 //# sourceMappingURL=toast.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"toast.js","sourceRoot":"","sources":["../../../../src/components/toast/toast.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\"\n\nimport {\n  CheckCircleSolid,\n  ExclamationCircleSolid,\n  InformationCircleSolid,\n  Spinner,\n  XCircleSolid,\n} from \"@medusajs/icons\"\nimport * as Primitives from \"@radix-ui/react-toast\"\nimport * as React from \"react\"\n\nimport { clx } from \"@/utils/clx\"\n\nconst ToastProvider = Primitives.Provider\nToastProvider.displayName = \"ToastProvider\"\n\nconst ToastViewport = React.forwardRef<\n  React.ElementRef<typeof Primitives.Viewport>,\n  React.ComponentPropsWithoutRef<typeof Primitives.Viewport>\n>(({ className, ...props }, ref) => (\n  <Primitives.Viewport\n    ref={ref}\n    className={clx(\n      \"fixed right-0 top-0 z-[9999] w-full p-6 md:max-w-[484px]\",\n      className\n    )}\n    {...props}\n  />\n))\nToastViewport.displayName = \"Toast.Viewport\"\n\ninterface ActionProps {\n  label: string\n  altText: string\n  onClick: () => void | Promise<void>\n}\n\ninterface ToastProps\n  extends React.ComponentPropsWithoutRef<typeof Primitives.Root> {\n  variant?: \"info\" | \"success\" | \"warning\" | \"error\" | \"loading\"\n  title?: string\n  description?: string\n  action?: ActionProps\n  disableDismiss?: boolean\n}\n\n/**\n * This component is based on the [Radix UI Toast](https://www.radix-ui.com/primitives/docs/components/toast) primitives.\n * \n * @excludeExternal\n */\nconst Toast = React.forwardRef<\n  React.ElementRef<typeof Primitives.Root>,\n  ToastProps\n>(\n  (\n    {\n      className,\n      /**\n       * The toast's style.\n       */\n      variant,\n      /**\n       * The toast's title.\n       */\n      title,\n      /**\n       * The toast's content.\n       */\n      description,\n      /**\n       * The actions to show in the toast as buttons.\n       */\n      action,\n      /**\n       * Whether to hide the Close button.\n       */\n      disableDismiss = false,\n      ...props\n    }: ToastProps,\n    ref\n  ) => {\n    let Icon = undefined\n\n    switch (variant) {\n      case \"success\":\n        Icon = <CheckCircleSolid className=\"text-ui-tag-green-icon\" />\n        break\n      case \"warning\":\n        Icon = <ExclamationCircleSolid className=\"text-ui-tag-orange-icon\" />\n        break\n      case \"error\":\n        Icon = <XCircleSolid className=\"text-ui-tag-red-icon\" />\n        break\n      case \"loading\":\n        Icon = <Spinner className=\"text-ui-tag-blue-icon animate-spin\" />\n        break\n      default:\n        Icon = <InformationCircleSolid className=\"text-ui-fg-base\" />\n        break\n    }\n\n    if (action && !action.altText) {\n      // eslint-disable-next-line turbo/no-undeclared-env-vars\n      if (process.env.NODE_ENV === \"development\") {\n        console.warn(\n          \"Omitting `altText` from the action is not recommended. Please provide a description for screen readers.\"\n        )\n      }\n    }\n\n    return (\n      <Primitives.Root\n        ref={ref}\n        className={clx(\n          \"bg-ui-bg-base border-ui-border-base flex h-fit min-h-[74px] w-full overflow-hidden rounded-md border shadow-[0_4px_12px_rgba(0,0,0,0.05)] md:max-w-[440px]\",\n          \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none\",\n          className\n        )}\n        {...props}\n      >\n        <div className=\"border-ui-border-base flex flex-1 items-start space-x-3 border-r p-4\">\n          <span aria-hidden>{Icon}</span>\n          <div>\n            {title && (\n              <Primitives.Title className=\"text-ui-fg-base txt-compact-small-plus\">\n                {title}\n              </Primitives.Title>\n            )}\n            {description && (\n              <Primitives.Description className=\"text-ui-fg-subtle txt-compact-medium\">\n                {description}\n              </Primitives.Description>\n            )}\n          </div>\n        </div>\n        <div className=\"flex flex-col\">\n          {action && (\n            <>\n              <Primitives.Action\n                altText={action.altText}\n                className={clx(\n                  \"txt-compact-small-plus text-ui-fg-base bg-ui-bg-base hover:bg-ui-bg-base-hover active:bg-ui-bg-base-pressed flex flex-1 items-center justify-center px-6 transition-colors\",\n                  {\n                    \"text-ui-fg-error\": variant === \"error\",\n                  }\n                )}\n                onClick={(e) => {\n                  e.preventDefault()\n                  action.onClick()\n                }}\n                type=\"button\"\n              >\n                {action.label}\n              </Primitives.Action>\n              <div className=\"bg-ui-border-base h-px w-full\" />\n            </>\n          )}\n          {!disableDismiss && (\n            <Primitives.Close\n              className={clx(\n                \"txt-compact-small-plus text-ui-fg-subtle bg-ui-bg-base hover:bg-ui-bg-base-hover active:bg-ui-bg-base-pressed flex flex-1 items-center justify-center px-6 transition-colors\",\n                {\n                  \"h-1/2\": action,\n                  \"h-full\": !action,\n                }\n              )}\n              aria-label=\"Close\"\n            >\n              Close\n            </Primitives.Close>\n          )}\n        </div>\n      </Primitives.Root>\n    )\n  }\n)\nToast.displayName = \"Toast\"\n\ntype ToastActionElement = ActionProps\n\nexport {\n  Toast,\n  ToastProvider,\n  ToastViewport,\n  type ToastActionElement,\n  type ToastProps,\n}\n"]}
+{"version":3,"file":"toast.js","sourceRoot":"","sources":["../../../../src/components/toast/toast.tsx"],"names":[],"mappings":";;;;AAAA,2CAAyH;AACzH,qDAA8B;AAG9B,qCAAiC;AAYjC;;GAEG;AACI,MAAM,KAAK,GAAG,CAAC;AACpB;;GAEG;AACH,EAAE;AACF;;;;;;;GAOG;AACH,OAAO,GAAG,MAAM;AAChB;;;;;GAKG;AACH,KAAK;AACL;;GAEG;AACH,WAAW;AACX;;GAEG;AACH,MAAM;AACN;;;;;;GAMG;AACH,SAAS;AACT;;GAEG;AACH,YAAY,GAAG,OAAO,GACF,EAAE,EAAE;IACxB,MAAM,cAAc,GAAG,CAAC,CAAC,MAAM,IAAI,SAAS,CAAA;IAC5C,IAAI,IAAI,GAAG,SAAS,CAAA;IAEpB,QAAQ,OAAO,EAAE;QACf,KAAK,SAAS;YACZ,IAAI,GAAG,oBAAC,wBAAgB,IAAC,SAAS,EAAC,wBAAwB,GAAG,CAAA;YAC9D,MAAK;QACP,KAAK,SAAS;YACZ,IAAI,GAAG,oBAAC,8BAAsB,IAAC,SAAS,EAAC,yBAAyB,GAAG,CAAA;YACrE,MAAK;QACP,KAAK,OAAO;YACV,IAAI,GAAG,oBAAC,oBAAY,IAAC,SAAS,EAAC,sBAAsB,GAAG,CAAA;YACxD,MAAK;QACP,KAAK,SAAS;YACZ,IAAI,GAAG,oBAAC,eAAO,IAAC,SAAS,EAAC,oCAAoC,GAAG,CAAA;YACjE,MAAK;QACP,KAAK,MAAM;YACT,IAAI,GAAG,oBAAC,8BAAsB,IAAC,SAAS,EAAC,iBAAiB,GAAG,CAAA;YAC7D,MAAK;QACP;YACE,MAAK;KACR;IAED,OAAO,CACL,6BAAK,SAAS,EAAC,yGAAyG;QACtH,6BACE,SAAS,EAAE,IAAA,SAAG,EAAC,yCAAyC,EAAE;gBACxD,eAAe,EAAE,cAAc;gBAC/B,MAAM,EAAE,CAAC,cAAc;gBACvB,sBAAsB,EAAE,CAAC,CAAC,IAAI;gBAC9B,aAAa,EAAE,CAAC,IAAI;aACrB,CAAC;YAED,CAAC,CAAC,IAAI,IAAI,CACT,8BAAM,SAAS,EAAC,yCAAyC,yBACtD,IAAI,CACA,CACR;YACD,6BAAK,SAAS,EAAC,eAAe;gBAC5B,8BAAM,SAAS,EAAC,wCAAwC,IACrD,KAAK,CACD;gBACP,8BAAM,SAAS,EAAC,yCAAyC,IACtD,WAAW,CACP,CACH,CACF;QACL,cAAc,IAAI,CACjB,6BACE,SAAS,EAAE,IAAA,SAAG,EAAC,kBAAkB,EAAE;gBACjC,aAAa,EAAE,CAAC,CAAC,MAAM,IAAI,SAAS;gBACpC,aAAa,EAAE,CAAC,MAAM,IAAI,CAAC,SAAS;aACrC,CAAC;YAED,CAAC,CAAC,MAAM,IAAI,CACX,gCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,IAAA,SAAG,EACZ,qKAAqK,EACrK;oBACE,gCAAgC,EAAE,SAAS;oBAC3C,kBAAkB,EAAE,MAAM,CAAC,OAAO,KAAK,aAAa;iBACrD,CACF,EACD,OAAO,EAAE,MAAM,CAAC,OAAO,IAEtB,MAAM,CAAC,KAAK,CACN,CACV;YACA,SAAS,IAAI,CACZ,gCACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,EAAE,CAAC,EAC5B,SAAS,EAAE,IAAA,SAAG,EACZ,uKAAuK,CACxK,IAEA,YAAY,CACN,CACV,CACG,CACP,CACG,CACP,CAAA;AACH,CAAC,CAAA;AA9HY,QAAA,KAAK,SA8HjB","sourcesContent":["import { CheckCircleSolid, ExclamationCircleSolid, InformationCircleSolid, Spinner, XCircleSolid } from \"@medusajs/icons\"\nimport * as React from \"react\"\n\nimport type { ToastAction, ToastVariant } from \"@/types\"\nimport { clx } from \"@/utils/clx\"\n\ninterface ToastComponentProps {\n  id: string | number\n  variant?: ToastVariant\n  title: string\n  description?: string\n  action?: ToastAction\n  onDismiss?: (id?: string | number) => void\n  dismissLabel?: string\n}\n\n/**\n * This component is based on the [Sonner](https://sonner.emilkowal.ski/toast) toast library.\n */\nexport const Toast = ({\n  /**\n   * Optional ID of the toast.\n   */\n  id,\n  /**\n   * @ignore\n   * \n   * @privateRemarks\n   * As the Toast component is created using\n   * the `toast` utility functions, the variant is inferred\n   * from the utility function.\n   */\n  variant = \"info\",\n  /**\n   * @ignore\n   * \n   * @privateRemarks\n   * The `toast` utility functions accept this as a parameter.\n   */\n  title,\n  /**\n   * The toast's text.\n   */\n  description,\n  /**\n   * The toast's action buttons.\n   */\n  action,\n  /**\n   * @ignore\n   * \n   * @privateRemarks\n   * The `toast` utility functions don't allow\n   * passing this prop.\n   */\n  onDismiss,\n  /**\n   * The label of the dismiss button, if available.\n   */\n  dismissLabel = \"Close\",\n}: ToastComponentProps) => {\n  const hasActionables = !!action || onDismiss\n  let icon = undefined\n\n  switch (variant) {\n    case \"success\":\n      icon = <CheckCircleSolid className=\"text-ui-tag-green-icon\" />\n      break\n    case \"warning\":\n      icon = <ExclamationCircleSolid className=\"text-ui-tag-orange-icon\" />\n      break\n    case \"error\":\n      icon = <XCircleSolid className=\"text-ui-tag-red-icon\" />\n      break\n    case \"loading\":\n      icon = <Spinner className=\"text-ui-tag-blue-icon animate-spin\" />\n      break\n    case \"info\":\n      icon = <InformationCircleSolid className=\"text-ui-fg-base\" />\n      break\n    default:\n      break\n  }\n\n  return (\n    <div className=\"shadow-elevation-flyout bg-ui-bg-base flex w-fit min-w-[360px] max-w-[440px] overflow-hidden rounded-lg\">\n      <div\n        className={clx(\"grid flex-1 items-start gap-3 py-3 pl-3\", {\n          \"border-r pr-3\": hasActionables,\n          \"pr-6\": !hasActionables,\n          \"grid-cols-[20px_1fr]\": !!icon,\n          \"grid-cols-1\": !icon,\n        })}\n      >\n        {!!icon && (\n          <span className=\"flex size-5 items-center justify-center\" aria-hidden>\n            {icon}\n          </span>\n        )}\n        <div className=\"flex flex-col\">\n          <span className=\"txt-compact-small-plus text-ui-fg-base\">\n            {title}\n          </span>\n          <span className=\"txt-small text-ui-fg-subtle text-pretty\">\n            {description}\n          </span>\n        </div>\n      </div>\n      {hasActionables && (\n        <div\n          className={clx(\"grid grid-cols-1\", {\n            \"grid-rows-2\": !!action && onDismiss,\n            \"grid-rows-1\": !action || !onDismiss,\n          })}\n        >\n          {!!action && (\n            <button\n              type=\"button\"\n              className={clx(\n                \"txt-compact-small-plus text-ui-fg-base bg-ui-bg-base hover:bg-ui-bg-base-hover active:bg-ui-bg-base-pressed flex items-center justify-center px-4 transition-colors\",\n                {\n                  \"border-ui-border-base border-b\": onDismiss,\n                  \"text-ui-fg-error\": action.variant === \"destructive\",\n                }\n              )}\n              onClick={action.onClick}\n            >\n              {action.label}\n            </button>\n          )}\n          {onDismiss && (\n            <button\n              type=\"button\"\n              onClick={() => onDismiss(id)}\n              className={clx(\n                \"txt-compact-small-plus text-ui-fg-subtle bg-ui-bg-base hover:bg-ui-bg-base-hover active:bg-ui-bg-base-pressed flex items-center justify-center px-4 transition-colors\"\n              )}\n            >\n              {dismissLabel}\n            </button>\n          )}\n        </div>\n      )}\n    </div>\n  )\n}"]}

package/dist/cjs/components/toaster/toaster.d.ts

@@ -1,3 +1,9 @@
 import * as React from "react";
-declare const Toaster: () => React.JSX.Element;
+import { Toaster as Primitive } from "sonner";
+interface ToasterProps extends Omit<React.ComponentPropsWithoutRef<typeof Primitive>, "richColors" | "closeButton" | "icons" | "theme" | "invert" | "loadingIcon" | "cn" | "toastOptions"> {
+}
+/**
+ * This component is based on the [Toaster component of the Sonner library](https://sonner.emilkowal.ski/toaster).
+ */
+declare const Toaster: ({ position, gap, offset, duration, ...props }: ToasterProps) => React.JSX.Element;
 export { Toaster };

package/dist/cjs/components/toaster/toaster.js

@@ -4,15 +4,34 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Toaster = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const toast_1 = require("../toast");
-const use_toast_1 = require("../../hooks/use-toast");
-const Toaster = () => {
-    const { toasts } = (0, use_toast_1.useToast)();
-    return (React.createElement(toast_1.ToastProvider, { swipeDirection: "right" },
-        toasts.map(({ id, ...props }) => {
-            return React.createElement(toast_1.Toast, { key: id, ...props });
-        }),
-        React.createElement(toast_1.ToastViewport, null)));
+const sonner_1 = require("sonner");
+const clx_1 = require("../../utils/clx");
+/**
+ * This component is based on the [Toaster component of the Sonner library](https://sonner.emilkowal.ski/toaster).
+ */
+const Toaster = ({ 
+/**
+ * The position of the created toasts.
+ */
+position = "bottom-right", 
+/**
+ * The gap between the toast components.
+ */
+gap = 12, 
+/**
+ * The space from the edges of the screen.
+ */
+offset = 24, 
+/**
+ * The time in milliseconds that a toast is shown before it's
+ * automatically dismissed.
+ *
+ * @defaultValue 4000
+ */
+duration, ...props }) => {
+    return (React.createElement(sonner_1.Toaster, { position: position, gap: gap, offset: offset, cn: clx_1.clx, toastOptions: {
+            duration,
+        }, ...props }));
 };
 exports.Toaster = Toaster;
 //# sourceMappingURL=toaster.js.map

package/dist/cjs/components/toaster/toaster.js.map

@@ -1 +1 @@
-{"version":3,"file":"toaster.js","sourceRoot":"","sources":["../../../../src/components/toaster/toaster.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAA;;;;AAEZ,qDAA8B;AAE9B,8CAAwE;AACxE,iDAA4C;AAE5C,MAAM,OAAO,GAAG,GAAG,EAAE;IACnB,MAAM,EAAE,MAAM,EAAE,GAAG,IAAA,oBAAQ,GAAE,CAAA;IAE7B,OAAO,CACL,oBAAC,qBAAa,IAAC,cAAc,EAAC,OAAO;QAClC,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;YAC/B,OAAO,oBAAC,aAAK,IAAC,GAAG,EAAE,EAAE,KAAM,KAAK,GAAI,CAAA;QACtC,CAAC,CAAC;QACF,oBAAC,qBAAa,OAAG,CACH,CACjB,CAAA;AACH,CAAC,CAAA;AAEQ,0BAAO","sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\n\nimport { Toast, ToastProvider, ToastViewport } from \"@/components/toast\"\nimport { useToast } from \"@/hooks/use-toast\"\n\nconst Toaster = () => {\n  const { toasts } = useToast()\n\n  return (\n    <ToastProvider swipeDirection=\"right\">\n      {toasts.map(({ id, ...props }) => {\n        return <Toast key={id} {...props} />\n      })}\n      <ToastViewport />\n    </ToastProvider>\n  )\n}\n\nexport { Toaster }\n"]}
+{"version":3,"file":"toaster.js","sourceRoot":"","sources":["../../../../src/components/toaster/toaster.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAA;;;;AAEZ,qDAA8B;AAC9B,mCAA6C;AAE7C,qCAAiC;AAejC;;GAEG;AACH,MAAM,OAAO,GAAG,CAAC;AACf;;GAEG;AACH,QAAQ,GAAG,cAAc;AACzB;;GAEG;AACH,GAAG,GAAG,EAAE;AACR;;GAEG;AACH,MAAM,GAAG,EAAE;AACX;;;;;GAKG;AACH,QAAQ,EACR,GAAG,KAAK,EACK,EAAE,EAAE;IACjB,OAAO,CACL,oBAAC,gBAAS,IACR,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,GAAG,EACR,MAAM,EAAE,MAAM,EACd,EAAE,EAAE,SAAG,EACP,YAAY,EAAE;YACZ,QAAQ;SACT,KACG,KAAK,GACT,CACH,CAAA;AACH,CAAC,CAAA;AAEQ,0BAAO","sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { Toaster as Primitive } from \"sonner\"\n\nimport { clx } from \"@/utils/clx\"\n\ninterface ToasterProps\n  extends Omit<\n    React.ComponentPropsWithoutRef<typeof Primitive>,\n    | \"richColors\"\n    | \"closeButton\"\n    | \"icons\"\n    | \"theme\"\n    | \"invert\"\n    | \"loadingIcon\"\n    | \"cn\"\n    | \"toastOptions\"\n  > {}\n\n/**\n * This component is based on the [Toaster component of the Sonner library](https://sonner.emilkowal.ski/toaster).\n */\nconst Toaster = ({\n  /**\n   * The position of the created toasts.\n   */\n  position = \"bottom-right\",\n  /**\n   * The gap between the toast components.\n   */\n  gap = 12,\n  /**\n   * The space from the edges of the screen.\n   */\n  offset = 24,\n  /**\n   * The time in milliseconds that a toast is shown before it's\n   * automatically dismissed.\n   * \n   * @defaultValue 4000\n   */\n  duration,\n  ...props\n}: ToasterProps) => {\n  return (\n    <Primitive\n      position={position}\n      gap={gap}\n      offset={offset}\n      cn={clx}\n      toastOptions={{\n        duration,\n      }}\n      {...props}\n    />\n  )\n}\n\nexport { Toaster }\n"]}

package/dist/cjs/index.d.ts

@@ -38,7 +38,7 @@ export { Toast } from "./components/toast";
 export { Toaster } from "./components/toaster";
 export { Tooltip } from "./components/tooltip";
 export { usePrompt } from "./hooks/use-prompt";
-export { useToast } from "./hooks/use-toast";
 export { useToggleState } from "./hooks/use-toggle-state";
 export { clx } from "./utils/clx";
+export { toast } from "./utils/toast";
 export * from "./types";

package/dist/cjs/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.clx = exports.useToggleState = exports.useToast = exports.usePrompt = exports.Tooltip = exports.Toaster = exports.Toast = exports.Textarea = exports.Text = exports.Tabs = exports.Table = exports.Switch = exports.StatusBadge = exports.Select = exports.RadioGroup = exports.Prompt = exports.ProgressTabs = exports.ProgressAccordion = exports.Popover = exports.Label = exports.Kbd = exports.Input = exports.IconButton = exports.IconBadge = exports.Hint = exports.Heading = exports.FocusModal = exports.DropdownMenu = exports.Drawer = exports.DatePicker = exports.CurrencyInput = exports.Copy = exports.Container = exports.CommandBar = exports.Command = exports.CodeBlock = exports.Code = exports.Checkbox = exports.Calendar = exports.Button = exports.Badge = exports.Avatar = exports.Alert = void 0;
+exports.toast = exports.clx = exports.useToggleState = exports.usePrompt = exports.Tooltip = exports.Toaster = exports.Toast = exports.Textarea = exports.Text = exports.Tabs = exports.Table = exports.Switch = exports.StatusBadge = exports.Select = exports.RadioGroup = exports.Prompt = exports.ProgressTabs = exports.ProgressAccordion = exports.Popover = exports.Label = exports.Kbd = exports.Input = exports.IconButton = exports.IconBadge = exports.Hint = exports.Heading = exports.FocusModal = exports.DropdownMenu = exports.Drawer = exports.DatePicker = exports.CurrencyInput = exports.Copy = exports.Container = exports.CommandBar = exports.Command = exports.CodeBlock = exports.Code = exports.Checkbox = exports.Calendar = exports.Button = exports.Badge = exports.Avatar = exports.Alert = void 0;
 const tslib_1 = require("tslib");
 var alert_1 = require("./components/alert");
 Object.defineProperty(exports, "Alert", { enumerable: true, get: function () { return alert_1.Alert; } });
@@ -83,13 +83,13 @@ Object.defineProperty(exports, "Tooltip", { enumerable: true, get: function () {
 // Hooks
 var use_prompt_1 = require("./hooks/use-prompt");
 Object.defineProperty(exports, "usePrompt", { enumerable: true, get: function () { return use_prompt_1.usePrompt; } });
-var use_toast_1 = require("./hooks/use-toast");
-Object.defineProperty(exports, "useToast", { enumerable: true, get: function () { return use_toast_1.useToast; } });
 var use_toggle_state_1 = require("./hooks/use-toggle-state");
 Object.defineProperty(exports, "useToggleState", { enumerable: true, get: function () { return use_toggle_state_1.useToggleState; } });
 // Utils
 var clx_1 = require("./utils/clx");
 Object.defineProperty(exports, "clx", { enumerable: true, get: function () { return clx_1.clx; } });
+var toast_2 = require("./utils/toast");
+Object.defineProperty(exports, "toast", { enumerable: true, get: function () { return toast_2.toast; } });
 // Types
 tslib_1.__exportStar(require("./types"), exports);
 //# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;;;AAAA,4CAA0C;AAAjC,8FAAA,KAAK,OAAA;AACd,8CAA4C;AAAnC,gGAAA,MAAM,OAAA;AACf,4CAA0C;AAAjC,8FAAA,KAAK,OAAA;AACd,8CAA4C;AAAnC,gGAAA,MAAM,OAAA;AACf,kDAAgD;AAAvC,oGAAA,QAAQ,OAAA;AACjB,kDAAgD;AAAvC,oGAAA,QAAQ,OAAA;AACjB,0CAAwC;AAA/B,4FAAA,IAAI,OAAA;AACb,sDAAmD;AAA1C,uGAAA,SAAS,OAAA;AAClB,gDAA8C;AAArC,kGAAA,OAAO,OAAA;AAChB,wDAAqD;AAA5C,yGAAA,UAAU,OAAA;AACnB,oDAAkD;AAAzC,sGAAA,SAAS,OAAA;AAClB,0CAAwC;AAA/B,4FAAA,IAAI,OAAA;AACb,8DAA2D;AAAlD,+GAAA,aAAa,OAAA;AACtB,wDAAqD;AAA5C,yGAAA,UAAU,OAAA;AACnB,8CAA4C;AAAnC,gGAAA,MAAM,OAAA;AACf,4DAAyD;AAAhD,6GAAA,YAAY,OAAA;AACrB,wDAAqD;AAA5C,yGAAA,UAAU,OAAA;AACnB,gDAA8C;AAArC,kGAAA,OAAO,OAAA;AAChB,0CAAwC;AAA/B,4FAAA,IAAI,OAAA;AACb,sDAAmD;AAA1C,uGAAA,SAAS,OAAA;AAClB,wDAAqD;AAA5C,yGAAA,UAAU,OAAA;AACnB,4CAA0C;AAAjC,8FAAA,KAAK,OAAA;AACd,wCAAsC;AAA7B,0FAAA,GAAG,OAAA;AACZ,4CAA0C;AAAjC,8FAAA,KAAK,OAAA;AACd,gDAA8C;AAArC,kGAAA,OAAO,OAAA;AAChB,sEAAmE;AAA1D,uHAAA,iBAAiB,OAAA;AAC1B,4DAAyD;AAAhD,6GAAA,YAAY,OAAA;AACrB,8CAA4C;AAAnC,gGAAA,MAAM,OAAA;AACf,wDAAqD;AAA5C,yGAAA,UAAU,OAAA;AACnB,8CAA4C;AAAnC,gGAAA,MAAM,OAAA;AACf,0DAAuD;AAA9C,2GAAA,WAAW,OAAA;AACpB,8CAA4C;AAAnC,gGAAA,MAAM,OAAA;AACf,4CAA0C;AAAjC,8FAAA,KAAK,OAAA;AACd,0CAAwC;AAA/B,4FAAA,IAAI,OAAA;AACb,0CAAwC;AAA/B,4FAAA,IAAI,OAAA;AACb,kDAAgD;AAAvC,oGAAA,QAAQ,OAAA;AACjB,4CAA0C;AAAjC,8FAAA,KAAK,OAAA;AACd,gDAA8C;AAArC,kGAAA,OAAO,OAAA;AAChB,gDAA8C;AAArC,kGAAA,OAAO,OAAA;AAEhB,QAAQ;AACR,iDAA8C;AAArC,uGAAA,SAAS,OAAA;AAClB,+CAA4C;AAAnC,qGAAA,QAAQ,OAAA;AACjB,6DAAyD;AAAhD,kHAAA,cAAc,OAAA;AAEvB,QAAQ;AACR,mCAAiC;AAAxB,0FAAA,GAAG,OAAA;AAEZ,QAAQ;AACR,kDAAuB","sourcesContent":["export { Alert } from \"./components/alert\"\nexport { Avatar } from \"./components/avatar\"\nexport { Badge } from \"./components/badge\"\nexport { Button } from \"./components/button\"\nexport { Calendar } from \"./components/calendar\"\nexport { Checkbox } from \"./components/checkbox\"\nexport { Code } from \"./components/code\"\nexport { CodeBlock } from \"./components/code-block\"\nexport { Command } from \"./components/command\"\nexport { CommandBar } from \"./components/command-bar\"\nexport { Container } from \"./components/container\"\nexport { Copy } from \"./components/copy\"\nexport { CurrencyInput } from \"./components/currency-input\"\nexport { DatePicker } from \"./components/date-picker\"\nexport { Drawer } from \"./components/drawer\"\nexport { DropdownMenu } from \"./components/dropdown-menu\"\nexport { FocusModal } from \"./components/focus-modal\"\nexport { Heading } from \"./components/heading\"\nexport { Hint } from \"./components/hint\"\nexport { IconBadge } from \"./components/icon-badge\"\nexport { IconButton } from \"./components/icon-button\"\nexport { Input } from \"./components/input\"\nexport { Kbd } from \"./components/kbd\"\nexport { Label } from \"./components/label\"\nexport { Popover } from \"./components/popover\"\nexport { ProgressAccordion } from \"./components/progress-accordion\"\nexport { ProgressTabs } from \"./components/progress-tabs\"\nexport { Prompt } from \"./components/prompt\"\nexport { RadioGroup } from \"./components/radio-group\"\nexport { Select } from \"./components/select\"\nexport { StatusBadge } from \"./components/status-badge\"\nexport { Switch } from \"./components/switch\"\nexport { Table } from \"./components/table\"\nexport { Tabs } from \"./components/tabs\"\nexport { Text } from \"./components/text\"\nexport { Textarea } from \"./components/textarea\"\nexport { Toast } from \"./components/toast\"\nexport { Toaster } from \"./components/toaster\"\nexport { Tooltip } from \"./components/tooltip\"\n\n// Hooks\nexport { usePrompt } from \"./hooks/use-prompt\"\nexport { useToast } from \"./hooks/use-toast\"\nexport { useToggleState } from \"./hooks/use-toggle-state\"\n\n// Utils\nexport { clx } from \"./utils/clx\"\n\n// Types\nexport * from \"./types\"\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;;;AAAA,4CAA0C;AAAjC,8FAAA,KAAK,OAAA;AACd,8CAA4C;AAAnC,gGAAA,MAAM,OAAA;AACf,4CAA0C;AAAjC,8FAAA,KAAK,OAAA;AACd,8CAA4C;AAAnC,gGAAA,MAAM,OAAA;AACf,kDAAgD;AAAvC,oGAAA,QAAQ,OAAA;AACjB,kDAAgD;AAAvC,oGAAA,QAAQ,OAAA;AACjB,0CAAwC;AAA/B,4FAAA,IAAI,OAAA;AACb,sDAAmD;AAA1C,uGAAA,SAAS,OAAA;AAClB,gDAA8C;AAArC,kGAAA,OAAO,OAAA;AAChB,wDAAqD;AAA5C,yGAAA,UAAU,OAAA;AACnB,oDAAkD;AAAzC,sGAAA,SAAS,OAAA;AAClB,0CAAwC;AAA/B,4FAAA,IAAI,OAAA;AACb,8DAA2D;AAAlD,+GAAA,aAAa,OAAA;AACtB,wDAAqD;AAA5C,yGAAA,UAAU,OAAA;AACnB,8CAA4C;AAAnC,gGAAA,MAAM,OAAA;AACf,4DAAyD;AAAhD,6GAAA,YAAY,OAAA;AACrB,wDAAqD;AAA5C,yGAAA,UAAU,OAAA;AACnB,gDAA8C;AAArC,kGAAA,OAAO,OAAA;AAChB,0CAAwC;AAA/B,4FAAA,IAAI,OAAA;AACb,sDAAmD;AAA1C,uGAAA,SAAS,OAAA;AAClB,wDAAqD;AAA5C,yGAAA,UAAU,OAAA;AACnB,4CAA0C;AAAjC,8FAAA,KAAK,OAAA;AACd,wCAAsC;AAA7B,0FAAA,GAAG,OAAA;AACZ,4CAA0C;AAAjC,8FAAA,KAAK,OAAA;AACd,gDAA8C;AAArC,kGAAA,OAAO,OAAA;AAChB,sEAAmE;AAA1D,uHAAA,iBAAiB,OAAA;AAC1B,4DAAyD;AAAhD,6GAAA,YAAY,OAAA;AACrB,8CAA4C;AAAnC,gGAAA,MAAM,OAAA;AACf,wDAAqD;AAA5C,yGAAA,UAAU,OAAA;AACnB,8CAA4C;AAAnC,gGAAA,MAAM,OAAA;AACf,0DAAuD;AAA9C,2GAAA,WAAW,OAAA;AACpB,8CAA4C;AAAnC,gGAAA,MAAM,OAAA;AACf,4CAA0C;AAAjC,8FAAA,KAAK,OAAA;AACd,0CAAwC;AAA/B,4FAAA,IAAI,OAAA;AACb,0CAAwC;AAA/B,4FAAA,IAAI,OAAA;AACb,kDAAgD;AAAvC,oGAAA,QAAQ,OAAA;AACjB,4CAA0C;AAAjC,8FAAA,KAAK,OAAA;AACd,gDAA8C;AAArC,kGAAA,OAAO,OAAA;AAChB,gDAA8C;AAArC,kGAAA,OAAO,OAAA;AAEhB,QAAQ;AACR,iDAA8C;AAArC,uGAAA,SAAS,OAAA;AAClB,6DAAyD;AAAhD,kHAAA,cAAc,OAAA;AAEvB,QAAQ;AACR,mCAAiC;AAAxB,0FAAA,GAAG,OAAA;AACZ,uCAAqC;AAA5B,8FAAA,KAAK,OAAA;AAEd,QAAQ;AACR,kDAAuB","sourcesContent":["export { Alert } from \"./components/alert\"\nexport { Avatar } from \"./components/avatar\"\nexport { Badge } from \"./components/badge\"\nexport { Button } from \"./components/button\"\nexport { Calendar } from \"./components/calendar\"\nexport { Checkbox } from \"./components/checkbox\"\nexport { Code } from \"./components/code\"\nexport { CodeBlock } from \"./components/code-block\"\nexport { Command } from \"./components/command\"\nexport { CommandBar } from \"./components/command-bar\"\nexport { Container } from \"./components/container\"\nexport { Copy } from \"./components/copy\"\nexport { CurrencyInput } from \"./components/currency-input\"\nexport { DatePicker } from \"./components/date-picker\"\nexport { Drawer } from \"./components/drawer\"\nexport { DropdownMenu } from \"./components/dropdown-menu\"\nexport { FocusModal } from \"./components/focus-modal\"\nexport { Heading } from \"./components/heading\"\nexport { Hint } from \"./components/hint\"\nexport { IconBadge } from \"./components/icon-badge\"\nexport { IconButton } from \"./components/icon-button\"\nexport { Input } from \"./components/input\"\nexport { Kbd } from \"./components/kbd\"\nexport { Label } from \"./components/label\"\nexport { Popover } from \"./components/popover\"\nexport { ProgressAccordion } from \"./components/progress-accordion\"\nexport { ProgressTabs } from \"./components/progress-tabs\"\nexport { Prompt } from \"./components/prompt\"\nexport { RadioGroup } from \"./components/radio-group\"\nexport { Select } from \"./components/select\"\nexport { StatusBadge } from \"./components/status-badge\"\nexport { Switch } from \"./components/switch\"\nexport { Table } from \"./components/table\"\nexport { Tabs } from \"./components/tabs\"\nexport { Text } from \"./components/text\"\nexport { Textarea } from \"./components/textarea\"\nexport { Toast } from \"./components/toast\"\nexport { Toaster } from \"./components/toaster\"\nexport { Tooltip } from \"./components/tooltip\"\n\n// Hooks\nexport { usePrompt } from \"./hooks/use-prompt\"\nexport { useToggleState } from \"./hooks/use-toggle-state\"\n\n// Utils\nexport { clx } from \"./utils/clx\"\nexport { toast } from \"./utils/toast\"\n\n// Types\nexport * from \"./types\"\n"]}

package/dist/cjs/types.d.ts

@@ -9,3 +9,24 @@ export type DateRange = {
      */
     to?: Date | undefined;
 };
+export type ToasterPosition = "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
+export type ToastVariant = "info" | "success" | "warning" | "error" | "loading" | "message";
+export type ToastActionVariant = "default" | "destructive";
+export type ToastAction = {
+    /**
+     * The button's text.
+     */
+    label: string;
+    /**
+     * The button's alt text.
+     */
+    altText: string;
+    /**
+     * The function to execute when the button is clicked.
+     */
+    onClick: () => void | Promise<void>;
+    /**
+     * The button's variant.
+     */
+    variant?: ToastActionVariant;
+};

package/dist/cjs/types.js

@@ -1,3 +1,4 @@
 "use strict";
+// Progress types
 Object.defineProperty(exports, "__esModule", { value: true });
 //# sourceMappingURL=types.js.map

package/dist/cjs/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"","sourcesContent":["export type ProgressStatus = \"not-started\" | \"in-progress\" | \"completed\"\n\nexport type DateRange = {\n  /**\n   * The range's start date.\n   */\n  from: Date | undefined\n  /**\n   * The range's end date.\n   */\n  to?: Date | undefined\n}\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":";AAAA,iBAAiB","sourcesContent":["// Progress types\n\nexport type ProgressStatus = \"not-started\" | \"in-progress\" | \"completed\"\n\n// Calendar types\n\nexport type DateRange = {\n  /**\n   * The range's start date.\n   */\n  from: Date | undefined\n  /**\n   * The range's end date.\n   */\n  to?: Date | undefined\n}\n\n// Toast types\n\nexport type ToasterPosition =\n  | \"top-left\"\n  | \"top-center\"\n  | \"top-right\"\n  | \"bottom-left\"\n  | \"bottom-center\"\n  | \"bottom-right\"\n\nexport type ToastVariant =\n  | \"info\"\n  | \"success\"\n  | \"warning\"\n  | \"error\"\n  | \"loading\"\n  | \"message\"\n\nexport type ToastActionVariant = \"default\" | \"destructive\"\n\nexport type ToastAction = {\n  /**\n   * The button's text.\n   */\n  label: string\n  /**\n   * The button's alt text.\n   */\n  altText: string\n  /**\n   * The function to execute when the button is clicked.\n   */\n  onClick: () => void | Promise<void>\n  /**\n   * The button's variant.\n   */\n  variant?: ToastActionVariant\n}\n"]}

package/dist/cjs/utils/toast.d.ts

@@ -0,0 +1,86 @@
+import { ToastAction, ToasterPosition } from "../types";
+interface BaseToastProps {
+    id?: string | number;
+    position?: ToasterPosition;
+    dismissable?: boolean;
+    dismissLabel?: string;
+    duration?: number;
+}
+interface ToastProps extends BaseToastProps {
+    description?: string;
+    action?: ToastAction;
+}
+declare function message(
+/**
+ * The title of the toast.
+ */
+title: string, 
+/**
+ * The props of the toast.
+ */
+props?: ToastProps): string | number;
+declare function info(
+/**
+ * The title of the toast.
+ */ title: string, 
+/**
+ * The props of the toast.
+ */
+props?: ToastProps): string | number;
+declare function error(
+/**
+ * The title of the toast.
+ */ title: string, 
+/**
+ * The props of the toast.
+ */
+props?: ToastProps): string | number;
+declare function success(
+/**
+ * The title of the toast.
+ */ title: string, 
+/**
+ * The props of the toast.
+ */
+props?: ToastProps): string | number;
+declare function warning(
+/**
+ * The title of the toast.
+ */ title: string, 
+/**
+ * The props of the toast.
+ */
+props?: ToastProps): string | number;
+declare function loading(title: string, 
+/**
+ * The props of the toast.
+ */
+props?: ToastProps): string | number;
+type PromiseStateProps = string | {
+    title: string;
+    description?: string;
+};
+interface PromiseToastProps extends BaseToastProps {
+    loading: PromiseStateProps;
+    success: PromiseStateProps;
+    error: PromiseStateProps;
+}
+declare function promise<TData>(
+/**
+ * The promise to be resolved.
+ */
+promise: Promise<TData> | (() => Promise<TData>), 
+/**
+ * The props of the toast.
+ */
+props: PromiseToastProps): Promise<string | number>;
+export declare const toast: typeof message & {
+    info: typeof info;
+    error: typeof error;
+    warning: typeof warning;
+    success: typeof success;
+    promise: typeof promise;
+    loading: typeof loading;
+    dismiss: (id?: string | number | undefined) => string | number;
+};
+export {};