@dust-tt/sparkle 0.2.278 → 0.2.279

package/dist/esm/components/Notification.d.ts

@@ -1,4 +1,9 @@
 import React from "react";
+export type NotificationType = {
+    title?: string;
+    description?: string;
+    type: "success" | "error";
+};
 export interface NotificationProps {
     className?: string;
     description?: string;
@@ -7,4 +12,10 @@ export interface NotificationProps {
     onClick?: () => void;
 }
 export declare function Notification({ description, title, variant, onClick, className, }: NotificationProps): React.JSX.Element;
+export declare namespace Notification {
+    var Area: ({ children }: {
+        children: React.ReactNode;
+    }) => React.JSX.Element;
+}
+export declare const useSendNotification: () => (n: NotificationType) => void;
 //# sourceMappingURL=Notification.d.ts.map

package/dist/esm/components/Notification.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Notification.d.ts","sourceRoot":"","sources":["../../../src/components/Notification.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,MAAM,WAAW,iBAAiB;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,SAAS,GAAG,OAAO,CAAC;IAC7B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,wBAAgB,YAAY,CAAC,EAC3B,WAAW,EACX,KAAK,EACL,OAAO,EACP,OAAO,EACP,SAAc,GACf,EAAE,iBAAiB,qBAiDnB"}
+{"version":3,"file":"Notification.d.ts","sourceRoot":"","sources":["../../../src/components/Notification.tsx"],"names":[],"mappings":"AACA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAWzC,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,EAAE,SAAS,GAAG,OAAO,CAAC;CAC3B,CAAC;AAKF,MAAM,WAAW,iBAAiB;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,SAAS,GAAG,OAAO,CAAC;IAC7B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,wBAAgB,YAAY,CAAC,EAC3B,WAAW,EACX,KAAK,EACL,OAAO,EACP,OAAO,EACP,SAAc,GACf,EAAE,iBAAiB,qBAiDnB;yBAvDe,YAAY;;;;;AAoJ5B,eAAO,MAAM,mBAAmB,YA/JqB,gBAAgB,KAAK,IA+JK,CAAC"}

package/dist/esm/components/Notification.js

@@ -1,8 +1,13 @@
-import React from "react";
+import { __assign, __read, __spreadArray } from "tslib";
+import { Transition } from "@headlessui/react";
+import React, { useEffect } from "react";
+import { createPortal } from "react-dom";
 import { IconButton } from "../components/IconButton";
 import { CheckCircleIcon, XCircleIcon, XMarkIcon } from "../icons";
 import { classNames } from "../lib/utils";
 import { Icon } from "./Icon";
+var NOTIFICATION_DELAY = 5000;
+var NotificationsContext = React.createContext(function (n) { return n; });
 export function Notification(_a) {
     var description = _a.description, title = _a.title, variant = _a.variant, onClick = _a.onClick, _b = _a.className, className = _b === void 0 ? "" : _b;
     return (React.createElement("div", { className: classNames("s-pointer-events-auto s-flex s-max-w-[400px] s-flex-row s-items-center s-gap-2 s-rounded-xl s-border s-border-structure-100 s-bg-structure-0 s-p-4 s-shadow-xl", className) },
@@ -15,4 +20,44 @@ export function Notification(_a) {
                 React.createElement(IconButton, { icon: XMarkIcon, size: "sm", variant: "ghost", onClick: onClick })),
             description && (React.createElement("div", { className: "s-line-clamp-3 s-pr-2 s-text-sm s-font-normal s-text-element-700" }, description)))));
 }
+function NotificationWithTransition(_a) {
+    var title = _a.title, description = _a.description, type = _a.type;
+    var _b = __read(React.useState(true), 2), showNotification = _b[0], setShowNotification = _b[1];
+    useEffect(function () {
+        setTimeout(function () {
+            setShowNotification(false);
+        }, NOTIFICATION_DELAY);
+    }, []);
+    return (React.createElement(Transition, { show: showNotification, appear: true, enter: "s-transition s-ease-in-out s-duration-300 s-transform", enterFrom: "s-translate-y-16 s-opacity-0", enterTo: "s-translate-y-0 s-opacity-100", leave: "s-transition s-ease-in-out s-duration-300 s-transform", leaveFrom: "s-translate-y-0 s-opacity-100", leaveTo: "s-translate-y-16 s-opacity-0" },
+        React.createElement(Notification, { variant: type, description: description, title: title, onClick: function () { return setShowNotification(false); } })));
+}
+function NotificationsList(_a) {
+    var notifications = _a.notifications;
+    return (React.createElement("div", { className: "s-pointer-events-none s-fixed s-bottom-0 s-right-0 s-z-60 s-w-96" },
+        React.createElement("div", { className: "s-flex s-flex-col s-items-center s-justify-center s-gap-4 s-p-4" }, notifications.map(function (n) {
+            return (React.createElement(NotificationWithTransition, { key: n.id, title: n.title, description: n.description, type: n.type }));
+        }))));
+}
+Notification.Area = function (_a) {
+    var children = _a.children;
+    var _b = __read(React.useState([]), 2), notifications = _b[0], setNotifications = _b[1];
+    function sendNotification(n) {
+        var id = Math.random().toString();
+        setNotifications(function (notifications) { return __spreadArray(__spreadArray([], __read(notifications), false), [__assign(__assign({}, n), { id: id })], false); });
+        /* After a delay allowing for the notification exit animation, remove the
+        notification from the list */
+        setTimeout(function () {
+            setNotifications(function (notifications) {
+                return notifications.filter(function (n) { return n.id !== id; });
+            });
+        }, NOTIFICATION_DELAY + 1000);
+    }
+    return (React.createElement(NotificationsContext.Provider, { value: sendNotification },
+        children,
+        /** Notifications are created at DOM root via a Portal. This is to avoid
+         * them being made inert by headlessUI modals */
+        typeof window === "object" ? (createPortal(React.createElement(NotificationsList, { notifications: notifications }), document.body)) : (React.createElement(NotificationsList, { notifications: notifications })) // SSR (otherwise hydration issues)
+    ));
+};
+export var useSendNotification = function () { return React.useContext(NotificationsContext); };
 //# sourceMappingURL=Notification.js.map

package/dist/esm/components/Notification.js.map

@@ -1 +1 @@
-{"version":3,"file":"Notification.js","sourceRoot":"","sources":["../../../src/components/Notification.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAC;AAC5D,OAAO,EAAE,eAAe,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AACzE,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAEhD,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAU9B,MAAM,UAAU,YAAY,CAAC,EAMT;QALlB,WAAW,iBAAA,EACX,KAAK,WAAA,EACL,OAAO,aAAA,EACP,OAAO,aAAA,EACP,iBAAc,EAAd,SAAS,mBAAG,EAAE,KAAA;IAEd,OAAO,CACL,6BACE,SAAS,EAAE,UAAU,CACnB,gKAAgK,EAChK,SAAS,CACV;QAEA,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,CACvB,oBAAC,IAAI,IACH,IAAI,EAAC,IAAI,EACT,MAAM,EAAE,eAAe,EACvB,SAAS,EAAC,6BAA6B,GACvC,CACH,CAAC,CAAC,CAAC,CACF,oBAAC,IAAI,IACH,IAAI,EAAC,IAAI,EACT,MAAM,EAAE,WAAW,EACnB,SAAS,EAAC,6BAA6B,GACvC,CACH;QAED,6BAAK,SAAS,EAAC,mBAAmB;YAChC,6BAAK,SAAS,EAAC,kCAAkC;gBAC/C,6BACE,SAAS,EAAE,UAAU,CACnB,iDAAiD,EACjD,OAAO,KAAK,SAAS;wBACnB,CAAC,CAAC,oBAAoB;wBACtB,CAAC,CAAC,oBAAoB,CACzB,IAEA,KAAK,IAAI,OAAO,CACb;gBACN,oBAAC,UAAU,IACT,IAAI,EAAE,SAAS,EACf,IAAI,EAAC,IAAI,EACT,OAAO,EAAC,OAAO,EACf,OAAO,EAAE,OAAO,GAChB,CACE;YACL,WAAW,IAAI,CACd,6BAAK,SAAS,EAAC,kEAAkE,IAC9E,WAAW,CACR,CACP,CACG,CACF,CACP,CAAC;AACJ,CAAC"}
+{"version":3,"file":"Notification.js","sourceRoot":"","sources":["../../../src/components/Notification.tsx"],"names":[],"mappings":"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"}

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

@@ -42,7 +42,8 @@ export { Markdown } from "./Markdown";
 export { Modal } from "./Modal";
 export { NavigationList, NavigationListItem, NavigationListLabel, } from "./NavigationList";
 export { NewDropdownMenu, NewDropdownMenuCheckboxItem, NewDropdownMenuContent, NewDropdownMenuGroup, NewDropdownMenuItem, NewDropdownMenuLabel, NewDropdownMenuPortal, NewDropdownMenuRadioGroup, NewDropdownMenuRadioItem, NewDropdownMenuSeparator, NewDropdownMenuShortcut, NewDropdownMenuSub, NewDropdownMenuSubContent, NewDropdownMenuSubTrigger, NewDropdownMenuTrigger, } from "./NewDropdown";
-export { Notification } from "./Notification";
+export type { NotificationType } from "./Notification";
+export { Notification, useSendNotification } from "./Notification";
 export { Page } from "./Page";
 export { PaginatedCitationsGrid } from "./PaginatedCitationsGrid";
 export { Pagination } from "./Pagination";

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"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"}

package/dist/esm/components/index.js

@@ -38,7 +38,7 @@ export { Markdown } from "./Markdown";
 export { Modal } from "./Modal";
 export { NavigationList, NavigationListItem, NavigationListLabel, } from "./NavigationList";
 export { NewDropdownMenu, NewDropdownMenuCheckboxItem, NewDropdownMenuContent, NewDropdownMenuGroup, NewDropdownMenuItem, NewDropdownMenuLabel, NewDropdownMenuPortal, NewDropdownMenuRadioGroup, NewDropdownMenuRadioItem, NewDropdownMenuSeparator, NewDropdownMenuShortcut, NewDropdownMenuSub, NewDropdownMenuSubContent, NewDropdownMenuSubTrigger, NewDropdownMenuTrigger, } from "./NewDropdown";
-export { Notification } from "./Notification";
+export { Notification, useSendNotification } from "./Notification";
 export { Page } from "./Page";
 export { PaginatedCitationsGrid } from "./PaginatedCitationsGrid";
 export { Pagination } from "./Pagination";

package/dist/esm/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,OAAO,EACL,QAAQ,EACR,gBAAgB,EAChB,8BAA8B,GAC/B,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AACrE,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAE5D,OAAO,EAAE,0BAA0B,EAAE,MAAM,8BAA8B,CAAC;AAC1E,OAAO,EAAE,0BAA0B,EAAE,MAAM,8BAA8B,CAAC;AAC1E,OAAO,EAAE,yBAAyB,EAAE,MAAM,6BAA6B,CAAC;AACxE,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC/D,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC3D,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAC3C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EACL,cAAc,EACd,kBAAkB,EAClB,mBAAmB,GACpB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EACL,eAAe,EACf,2BAA2B,EAC3B,sBAAsB,EACtB,oBAAoB,EACpB,mBAAmB,EACnB,oBAAoB,EACpB,qBAAqB,EACrB,yBAAyB,EACzB,wBAAwB,EACxB,wBAAwB,EACxB,uBAAuB,EACvB,kBAAkB,EAClB,yBAAyB,EACzB,yBAAyB,EACzB,sBAAsB,GACvB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EACL,OAAO,EACP,cAAc,EACd,WAAW,EACX,cAAc,GACf,MAAM,WAAW,CAAC;AACnB,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAC5E,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5B,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EACL,OAAO,EACP,cAAc,EACd,eAAe,EACf,WAAW,EACX,cAAc,GACf,MAAM,WAAW,CAAC;AACnB,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,4BAA4B,EAAE,MAAM,gCAAgC,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"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"}

package/dist/esm/stories/Notification.stories.d.ts

@@ -1,9 +1,8 @@
+import type { Meta } from "@storybook/react";
 import React from "react";
 import { Notification } from "../index_with_tw_base";
-declare const meta: {
-    title: string;
-    component: typeof Notification;
-};
+declare const meta: Meta<typeof Notification>;
 export default meta;
 export declare const NotificationExample: () => React.JSX.Element;
+export declare const NotificationAreaExample: () => React.JSX.Element;
 //# sourceMappingURL=Notification.stories.d.ts.map

package/dist/esm/stories/Notification.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Notification.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/Notification.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAErD,QAAA,MAAM,IAAI;;;CAG2B,CAAC;AAEtC,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,mBAAmB,yBAyB/B,CAAC"}
+{"version":3,"file":"Notification.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/Notification.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAU,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAE7D,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,YAAY,CAUC,CAAC;AAEtC,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,mBAAmB,yBAyB/B,CAAC;AAEF,eAAO,MAAM,uBAAuB,yBAcnC,CAAC"}

package/dist/esm/stories/Notification.stories.js

@@ -1,8 +1,13 @@
 import React from "react";
-import { Notification } from "../index_with_tw_base";
+import { useSendNotification } from "../components/Notification";
+import { Button, Notification } from "../index_with_tw_base";
 var meta = {
     title: "Modules/Notification",
     component: Notification,
+    decorators: [
+        function (Story) { return (React.createElement(Notification.Area, null,
+            React.createElement(Story, null))); },
+    ],
 };
 export default meta;
 export var NotificationExample = function () {
@@ -14,4 +19,14 @@ export var NotificationExample = function () {
                 React.createElement(Notification, { title: "Failure", variant: "error" })),
             React.createElement(Notification, { title: "Failure with a very long title clamped on one line.", description: 'Got: {"error":{"type":"invalid_request_error","message":"Invalid request body: Expecting string at name but instead got: undefined"}}', variant: "error" }))));
 };
+export var NotificationAreaExample = function () {
+    var sendNotification = useSendNotification();
+    return (React.createElement(Button, { onClick: function () {
+            return sendNotification({
+                title: "Success",
+                description: "it works",
+                type: "success",
+            });
+        }, label: "click" }));
+};
 //# sourceMappingURL=Notification.stories.js.map

package/dist/esm/stories/Notification.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Notification.stories.js","sourceRoot":"","sources":["../../../src/stories/Notification.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAErD,IAAM,IAAI,GAAG;IACX,KAAK,EAAE,sBAAsB;IAC7B,SAAS,EAAE,YAAY;CACY,CAAC;AAEtC,eAAe,IAAI,CAAC;AAEpB,MAAM,CAAC,IAAM,mBAAmB,GAAG;IACjC,OAAO,CACL;QACE,6BAAK,SAAS,EAAC,gBAAgB;YAC7B,oBAAC,YAAY,IACX,KAAK,EAAC,SAAS,EACf,WAAW,EAAC,gCAAgC,EAC5C,OAAO,EAAC,SAAS,GACjB;YACF,oBAAC,YAAY,IACX,KAAK,EAAC,SAAS,EACf,WAAW,EAAC,gCAAgC,EAC5C,OAAO,EAAC,OAAO,GACf;YACF;gBACE,oBAAC,YAAY,IAAC,KAAK,EAAC,SAAS,EAAC,OAAO,EAAC,OAAO,GAAG,CAC5C;YACN,oBAAC,YAAY,IACX,KAAK,EAAC,qDAAqD,EAC3D,WAAW,EAAC,uIAAuI,EACnJ,OAAO,EAAC,OAAO,GACf,CACE,CACL,CACJ,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"Notification.stories.js","sourceRoot":"","sources":["../../../src/stories/Notification.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,mBAAmB,EAAE,MAAM,kCAAkC,CAAC;AAEvE,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAE7D,IAAM,IAAI,GAA8B;IACtC,KAAK,EAAE,sBAAsB;IAC7B,SAAS,EAAE,YAAY;IACvB,UAAU,EAAE;QACV,UAAC,KAAK,IAAK,OAAA,CACT,oBAAC,YAAY,CAAC,IAAI;YAChB,oBAAC,KAAK,OAAG,CACS,CACrB,EAJU,CAIV;KACF;CACkC,CAAC;AAEtC,eAAe,IAAI,CAAC;AAEpB,MAAM,CAAC,IAAM,mBAAmB,GAAG;IACjC,OAAO,CACL;QACE,6BAAK,SAAS,EAAC,gBAAgB;YAC7B,oBAAC,YAAY,IACX,KAAK,EAAC,SAAS,EACf,WAAW,EAAC,gCAAgC,EAC5C,OAAO,EAAC,SAAS,GACjB;YACF,oBAAC,YAAY,IACX,KAAK,EAAC,SAAS,EACf,WAAW,EAAC,gCAAgC,EAC5C,OAAO,EAAC,OAAO,GACf;YACF;gBACE,oBAAC,YAAY,IAAC,KAAK,EAAC,SAAS,EAAC,OAAO,EAAC,OAAO,GAAG,CAC5C;YACN,oBAAC,YAAY,IACX,KAAK,EAAC,qDAAqD,EAC3D,WAAW,EAAC,uIAAuI,EACnJ,OAAO,EAAC,OAAO,GACf,CACE,CACL,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,uBAAuB,GAAG;IACrC,IAAM,gBAAgB,GAAG,mBAAmB,EAAE,CAAC;IAC/C,OAAO,CACL,oBAAC,MAAM,IACL,OAAO,EAAE;YACP,OAAA,gBAAgB,CAAC;gBACf,KAAK,EAAE,SAAS;gBAChB,WAAW,EAAE,UAAU;gBACvB,IAAI,EAAE,SAAS;aAChB,CAAC;QAJF,CAIE,EAEJ,KAAK,EAAC,OAAO,GACb,CACH,CAAC;AACJ,CAAC,CAAC"}

package/dist/sparkle.css

@@ -789,6 +789,10 @@ select {
   z-index: 50;
 }
 
+.s-z-60 {
+  z-index: 60;
+}
+
 .s-col-span-2 {
   grid-column: span 2 / span 2;
 }
@@ -1421,6 +1425,11 @@ select {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.s-translate-y-16 {
+  --tw-translate-y: 4rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .s-translate-y-4 {
   --tw-translate-y: 1rem;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -4408,6 +4417,10 @@ select {
   transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
 }
 
+.s-ease-in-out {
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
 .s-ease-out {
   transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
 }
@@ -4477,6 +4490,10 @@ select {
   animation-timing-function: cubic-bezier(0.4, 0, 1, 1);
 }
 
+.s-ease-in-out {
+  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
 .s-ease-out {
   animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.2.278",
+  "version": "0.2.279",
   "scripts": {
     "build": "rm -rf dist && npm run tailwind && npm run build:esm && npm run build:cjs",
     "tailwind": "tailwindcss -i ./src/styles/tailwind.css -o dist/sparkle.css",
@@ -45,7 +45,8 @@
     "@storybook/testing-library": "^0.2.2",
     "@svgr/cli": "^8.0.1",
     "@tailwindcss/forms": "^0.5.3",
-    "@types/react": "^18.0.28",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
     "@types/uuid": "^9.0.6",
     "@typescript-eslint/eslint-plugin": "^7.9.0",
     "@typescript-eslint/parser": "^7.9.0",
@@ -77,7 +78,8 @@
     "uuid": "^9.0.1"
   },
   "peerDependencies": {
-    "react": "^18.2.0"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "description": "Sparkle is Dust's Design System",
   "repository": {

package/src/components/Notification.tsx

@@ -1,4 +1,6 @@
-import React from "react";
+import { Transition } from "@headlessui/react";
+import React, { useEffect } from "react";
+import { createPortal } from "react-dom";
 
 import { IconButton } from "@sparkle/components/IconButton";
 import { CheckCircleIcon, XCircleIcon, XMarkIcon } from "@sparkle/icons";
@@ -6,6 +8,17 @@ import { classNames } from "@sparkle/lib/utils";
 
 import { Icon } from "./Icon";
 
+const NOTIFICATION_DELAY = 5000;
+
+export type NotificationType = {
+  title?: string;
+  description?: string;
+  type: "success" | "error";
+};
+
+const NotificationsContext = React.createContext<(n: NotificationType) => void>(
+  (n) => n
+);
 export interface NotificationProps {
   className?: string;
   description?: string;
@@ -70,3 +83,96 @@ export function Notification({
     </div>
   );
 }
+
+function NotificationWithTransition({
+  title,
+  description,
+  type,
+}: NotificationType) {
+  const [showNotification, setShowNotification] = React.useState(true);
+  useEffect(() => {
+    setTimeout(() => {
+      setShowNotification(false);
+    }, NOTIFICATION_DELAY);
+  }, []);
+  return (
+    <Transition
+      show={showNotification}
+      appear={true}
+      enter="s-transition s-ease-in-out s-duration-300 s-transform"
+      enterFrom="s-translate-y-16 s-opacity-0"
+      enterTo="s-translate-y-0 s-opacity-100"
+      leave="s-transition s-ease-in-out s-duration-300 s-transform"
+      leaveFrom="s-translate-y-0 s-opacity-100"
+      leaveTo="s-translate-y-16 s-opacity-0"
+    >
+      <Notification
+        variant={type}
+        description={description}
+        title={title}
+        onClick={() => setShowNotification(false)}
+      />
+    </Transition>
+  );
+}
+
+function NotificationsList({
+  notifications,
+}: {
+  notifications: (NotificationType & { id: string })[];
+}) {
+  return (
+    <div className="s-pointer-events-none s-fixed s-bottom-0 s-right-0 s-z-60 s-w-96">
+      <div className="s-flex s-flex-col s-items-center s-justify-center s-gap-4 s-p-4">
+        {notifications.map((n) => {
+          return (
+            <NotificationWithTransition
+              key={n.id}
+              title={n.title}
+              description={n.description}
+              type={n.type}
+            />
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+Notification.Area = ({ children }: { children: React.ReactNode }) => {
+  const [notifications, setNotifications] = React.useState<
+    (NotificationType & { id: string })[]
+  >([]);
+
+  function sendNotification(n: NotificationType) {
+    const id = Math.random().toString();
+    setNotifications((notifications) => [...notifications, { ...n, id }]);
+    /* After a delay allowing for the notification exit animation, remove the
+    notification from the list */
+    setTimeout(() => {
+      setNotifications((notifications) =>
+        notifications.filter((n) => n.id !== id)
+      );
+    }, NOTIFICATION_DELAY + 1000);
+  }
+
+  return (
+    <NotificationsContext.Provider value={sendNotification}>
+      {children}
+      {
+        /** Notifications are created at DOM root via a Portal. This is to avoid
+         * them being made inert by headlessUI modals */
+        typeof window === "object" ? (
+          createPortal(
+            <NotificationsList notifications={notifications} />,
+            document.body
+          )
+        ) : (
+          <NotificationsList notifications={notifications} />
+        ) // SSR (otherwise hydration issues)
+      }
+    </NotificationsContext.Provider>
+  );
+};
+
+export const useSendNotification = () => React.useContext(NotificationsContext);

package/src/components/index.ts

@@ -66,7 +66,8 @@ export {
   NewDropdownMenuSubTrigger,
   NewDropdownMenuTrigger,
 } from "./NewDropdown";
-export { Notification } from "./Notification";
+export type { NotificationType } from "./Notification";
+export { Notification, useSendNotification } from "./Notification";
 export { Page } from "./Page";
 export { PaginatedCitationsGrid } from "./PaginatedCitationsGrid";
 export { Pagination } from "./Pagination";

package/src/stories/Notification.stories.tsx

@@ -1,11 +1,20 @@
 import type { Meta } from "@storybook/react";
 import React from "react";
 
-import { Notification } from "../index_with_tw_base";
+import { useSendNotification } from "@sparkle/components/Notification";
 
-const meta = {
+import { Button, Notification } from "../index_with_tw_base";
+
+const meta: Meta<typeof Notification> = {
   title: "Modules/Notification",
   component: Notification,
+  decorators: [
+    (Story) => (
+      <Notification.Area>
+        <Story />
+      </Notification.Area>
+    ),
+  ],
 } satisfies Meta<typeof Notification>;
 
 export default meta;
@@ -36,3 +45,19 @@ export const NotificationExample = () => {
     </>
   );
 };
+
+export const NotificationAreaExample = () => {
+  const sendNotification = useSendNotification();
+  return (
+    <Button
+      onClick={() =>
+        sendNotification({
+          title: "Success",
+          description: "it works",
+          type: "success",
+        })
+      }
+      label="click"
+    />
+  );
+};