@algolia/satellite 1.0.0-beta.174 → 1.0.0-beta.176

package/esm/Stepper/Stepper.d.ts

@@ -0,0 +1,42 @@
+import type { HTMLAttributes, VFC } from "react";
+import type { BaseStep } from "./types";
+export declare type StepperLocale = {
+    disabledStep?: string | ((stepName: string) => string);
+    activeStep?: string | ((stepName: string) => string);
+    incompletedStep?: string | ((stepName: string) => string);
+    completedStep?: string | ((stepName: string) => string);
+};
+export declare type StepperSizes = "small" | "default" | "large";
+export interface StepperProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    /**
+     * Defines the steps of the Stepper.
+     */
+    steps: BaseStep[];
+    /**
+     * Defines the controlled index of the active step.
+     * If omitted, the first step will be active by default
+     * and the Stepper will be uncontrolled.
+     */
+    activeStep?: number;
+    /**
+     * Defines the callback fired when a step is clicked.
+     */
+    onStepChange?: (index: number) => void;
+    /**
+     * Defines the size of the Stepper.
+     * @default "default"
+     */
+    size?: StepperSizes;
+    /**
+     * Defines whether the connectors should be displayed.
+     * @default true
+     */
+    connectors?: boolean;
+    /**
+     * Defines the text describing the steps.
+     * If not provided, default values will be used.
+     */
+    locale?: StepperLocale;
+}
+export declare const Stepper: VFC<StepperProps>;
+export default Stepper;

package/esm/Stepper/Stepper.js

@@ -0,0 +1,139 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _templateObject;
+var _excluded = ["steps", "activeStep", "onStepChange", "size", "connectors", "locale", "className"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import cx from "clsx";
+import { useRef, useState } from "react";
+import { useLocale } from "../Satellite";
+import stl from "../styles/helpers/satellitePrefixer";
+import { Step } from "./Step";
+import { StepperContext } from "./StepperContext";
+import { useStepIndices } from "./utils";
+import { jsx as _jsx } from "react/jsx-runtime";
+var DEFAULT_TAG_LOCALE = {
+  disabledStep: function disabledStep(stepName) {
+    return "".concat(stepName, " disabled");
+  },
+  activeStep: function activeStep(stepName) {
+    return "".concat(stepName, " active");
+  },
+  incompletedStep: function incompletedStep(stepName) {
+    return "".concat(stepName, " incompleted");
+  },
+  completedStep: function completedStep(stepName) {
+    return "".concat(stepName, " completed");
+  }
+};
+export var Stepper = function Stepper(_ref) {
+  var steps = _ref.steps,
+    customActiveStep = _ref.activeStep,
+    _onStepChange = _ref.onStepChange,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? "default" : _ref$size,
+    _ref$connectors = _ref.connectors,
+    connectors = _ref$connectors === void 0 ? true : _ref$connectors,
+    propsLocale = _ref.locale,
+    className = _ref.className,
+    props = _objectWithoutProperties(_ref, _excluded);
+  if (process.env.NODE_ENV !== "production") {
+    var stepsNb = steps.length;
+    if (stepsNb < 2) {
+      console.warn("The Stepper component should have at least 2 steps.");
+    }
+    if (stepsNb > 6) {
+      console.warn("The Stepper component should not have more than 6 steps.");
+    }
+  }
+  var contextLocale = useLocale("stepper");
+  var locale = _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_TAG_LOCALE), contextLocale), propsLocale);
+  var isControlled = typeof customActiveStep !== "undefined";
+  var _useState = useState(customActiveStep || 0),
+    _useState2 = _slicedToArray(_useState, 2),
+    activeStep = _useState2[0],
+    setActiveStep = _useState2[1];
+  if (isControlled && activeStep !== customActiveStep) {
+    setActiveStep(customActiveStep);
+  }
+  var containerRef = useRef(null);
+  var _useState3 = useState(customActiveStep || 0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    focusedStep = _useState4[0],
+    setFocusedStep = _useState4[1];
+  var _useStepIndices = useStepIndices(steps, focusedStep, true),
+    _useStepIndices2 = _slicedToArray(_useStepIndices, 4),
+    getPreviousFocusStep = _useStepIndices2[0],
+    getNextFocusStep = _useStepIndices2[1],
+    getFirstFocusStep = _useStepIndices2[2],
+    getLastFocusStep = _useStepIndices2[3];
+  var focusStep = function focusStep(index) {
+    var _containerRef$current;
+    if (index === -1) return;
+    (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 || (_containerRef$current = _containerRef$current.querySelector("[data-step-idx='".concat(index, "']"))) === null || _containerRef$current === void 0 || _containerRef$current.focus();
+    setFocusedStep(index);
+  };
+  return /*#__PURE__*/_jsx(StepperContext.Provider, {
+    value: {
+      activeStep: activeStep,
+      focusedStep: focusedStep,
+      size: size,
+      connectors: connectors,
+      locale: locale,
+      onStepChange: function onStepChange(index) {
+        if (!isControlled) {
+          setActiveStep(index);
+        }
+        _onStepChange === null || _onStepChange === void 0 || _onStepChange(index);
+        setFocusedStep(index);
+      }
+    },
+    children: /*#__PURE__*/_jsx("nav", _objectSpread(_objectSpread({
+      "aria-label": "progress"
+    }, props), {}, {
+      className: cx(className),
+      children: /*#__PURE__*/_jsx("ol", {
+        role: "presentation",
+        className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["flex flex-col isolate"]))),
+        ref: containerRef,
+        onFocus: function onFocus() {
+          setFocusedStep(activeStep);
+        },
+        onKeyDown: function onKeyDown(event) {
+          switch (event.key) {
+            case "ArrowLeft":
+            case "ArrowUp":
+              {
+                focusStep(getPreviousFocusStep());
+                break;
+              }
+            case "ArrowRight":
+            case "ArrowDown":
+              {
+                focusStep(getNextFocusStep());
+                break;
+              }
+            case "Home":
+              {
+                focusStep(getFirstFocusStep());
+                break;
+              }
+            case "End":
+              {
+                focusStep(getLastFocusStep());
+                break;
+              }
+          }
+        },
+        children: steps.map(function (step, index) {
+          return /*#__PURE__*/_jsx(Step, _objectSpread({
+            index: index
+          }, step), index);
+        })
+      })
+    }))
+  });
+};
+export default Stepper;

package/esm/Stepper/StepperContext.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import type { StepperLocale, StepperSizes } from "./Stepper";
+export declare type StepperContextType = {
+    activeStep: number;
+    focusedStep: number;
+    size: StepperSizes;
+    connectors: boolean;
+    locale: StepperLocale;
+    onStepChange?: (index: number) => void;
+};
+export declare const StepperContext: import("react").Context<StepperContextType | null>;
+export declare const useStepperContext: () => StepperContextType;

package/esm/Stepper/StepperContext.js

@@ -0,0 +1,9 @@
+import { createContext, useContext } from "react";
+export var StepperContext = /*#__PURE__*/createContext(null);
+export var useStepperContext = function useStepperContext() {
+  var context = useContext(StepperContext);
+  if (!context) {
+    throw new Error("useStepperContext used outside of Stepper");
+  }
+  return context;
+};

package/esm/Stepper/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./Stepper";
+export * from "./types";
+export * from "./utils";
+export { default } from "./Stepper";

package/esm/Stepper/index.js

@@ -0,0 +1,4 @@
+export * from "./Stepper";
+export * from "./types";
+export * from "./utils";
+export { default } from "./Stepper";

package/esm/Stepper/types.d.ts

@@ -0,0 +1,26 @@
+import type { ReactNode } from "react";
+import type { IconComponentType } from "../Icons";
+export declare type BaseStep = {
+    /**
+     * Defines the icon to display in the step.
+     * If omitted, the `index + 1` of the step will be displayed instead.
+     * If the step is completed, a check icon will be displayed instead.
+     */
+    icon?: IconComponentType;
+    /**
+     * Defines the label to display in the step.
+     */
+    label?: ReactNode;
+    /**
+     * Defines the name to display in the step.
+     */
+    name: ReactNode;
+    /**
+     * Defines whether the step is completed.
+     */
+    completed?: boolean;
+    /**
+     * Defines whether the step is disabled.
+     */
+    disabled?: boolean;
+};

package/esm/Stepper/utils.d.ts

@@ -0,0 +1,5 @@
+import type { BaseStep } from "./types";
+/**
+ * Returns a tuple of functions that return the previous and next step indices.
+ */
+export declare const useStepIndices: (steps: BaseStep[], activeStep: number, loop?: boolean) => [() => number, () => number, () => number, () => number, boolean, boolean];

package/esm/Stepper/utils.js

@@ -0,0 +1,61 @@
+var findPreviousStep = function findPreviousStep(steps, activeStep, loop) {
+  var stepCount = steps.length;
+  var startIndex = activeStep - 1;
+  if (loop) {
+    startIndex = (startIndex + stepCount) % stepCount;
+  }
+  for (var i = startIndex; i >= 0; i--) {
+    if (!steps[i].disabled) {
+      return i;
+    }
+  }
+  return -1;
+};
+var findNextStep = function findNextStep(steps, activeStep, loop) {
+  var stepCount = steps.length;
+  var endIndex = stepCount;
+  if (loop) {
+    endIndex = activeStep + stepCount;
+  }
+  for (var i = activeStep + 1; i < endIndex; i++) {
+    if (!steps[i % stepCount].disabled) {
+      return i % stepCount;
+    }
+  }
+  return -1;
+};
+var findFirstOrLastStep = function findFirstOrLastStep(steps, reverse) {
+  var stepCount = steps.length;
+  for (var i = reverse ? stepCount - 1 : 0; i >= 0 && i < stepCount; i += reverse ? -1 : 1) {
+    if (!steps[i].disabled) {
+      return i;
+    }
+  }
+  return -1;
+};
+var findFirstStep = function findFirstStep(steps) {
+  return findFirstOrLastStep(steps, false);
+};
+var findLastStep = function findLastStep(steps) {
+  return findFirstOrLastStep(steps, true);
+};
+
+/**
+ * Returns a tuple of functions that return the previous and next step indices.
+ */
+export var useStepIndices = function useStepIndices(steps, activeStep) {
+  var loop = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+  var getPreviousStep = function getPreviousStep() {
+    return findPreviousStep(steps, activeStep, loop);
+  };
+  var getNextStep = function getNextStep() {
+    return findNextStep(steps, activeStep, loop);
+  };
+  var getFirstStep = function getFirstStep() {
+    return findFirstStep(steps);
+  };
+  var getLastStep = function getLastStep() {
+    return findLastStep(steps);
+  };
+  return [getPreviousStep, getNextStep, getFirstStep, getLastStep, getPreviousStep() === -1, getNextStep() === -1];
+};

package/esm/Tag/Tag.js

@@ -8,7 +8,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import cx from "clsx";
 import { forwardRef } from "react";
 import { Plus, X } from "react-feather";
-import { useIsInsideAutocomplete } from "../AutoComplete";
+import { useIsInsideAutoComplete } from "../AutoComplete";
 import { useLocale } from "../Satellite";
 import stl from "../styles/helpers/satellitePrefixer";
 import { TooltipWrapper } from "../Tooltip";
@@ -61,8 +61,8 @@ export var Tag = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var contextLocale = useLocale("tag");
   var locale = _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_TAG_LOCALE), contextLocale), propsLocale);
   var tagClassName = cx(stl(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["tag"]))), VARIANT_CLASSNAMES[variant], className);
-  var isInsideAutocomplete = useIsInsideAutocomplete();
-  var tabIndexProps = isInsideAutocomplete ? {
+  var isInsideAutoComplete = useIsInsideAutoComplete();
+  var tabIndexProps = isInsideAutoComplete ? {
     tabIndex: -1
   } : {};
   var addable = Boolean(onAdd);

package/esm/Toast/Toast.d.ts

@@ -0,0 +1,6 @@
+import type { FC, HTMLAttributes } from "react";
+import type { Notification } from "./types";
+export declare type ToastLocale = Notification["locale"];
+export declare type ToastProps = Omit<Notification, "id" | "content" | "autoDismissAfter"> & HTMLAttributes<HTMLElement>;
+export declare const Toast: FC<ToastProps>;
+export default Toast;

package/esm/{Flag/Flag.js → Toast/Toast.js}

@@ -1,11 +1,12 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21;
+var _excluded = ["onDismiss", "title", "icon", "loading", "variant", "locale", "children"];
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19;
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import * as ToastPrimitive from "@radix-ui/react-toast";
 import cx from "clsx";
-import { useEffect, useRef, useState } from "react";
 import { Check, X } from "react-feather";
 import { IconButton } from "../Button";
 import { Card } from "../Card";
@@ -15,7 +16,7 @@ import stl from "../styles/helpers/satellitePrefixer";
 import isRenderedChild from "../utils/isRenderedChild";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var DEFAULT_FLAG_LOCALE = {
+var DEFAULT_TOAST_LOCALE = {
   dismissText: "Dismiss"
 };
 var VARIANT_CLASSNAMES = {
@@ -34,13 +35,7 @@ var VARIANT_SPINNER_CLASSNAMES = {
   orange: stl(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["border-orange-500"]))),
   red: stl(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["border-red-500"])))
 };
-
-/**
- * The `Toast` component is a brief notification that providing timely feedback to users before vanishing after a short duration.
- *
- * See the [Toast documentation page](https://satellite.algolia.com/components/feedback/toast) for more information.
- */
-export var Flag = function Flag(_ref) {
+export var Toast = function Toast(_ref) {
   var onDismiss = _ref.onDismiss,
     title = _ref.title,
     _ref$icon = _ref.icon,
@@ -49,68 +44,57 @@ export var Flag = function Flag(_ref) {
     loading = _ref$loading === void 0 ? false : _ref$loading,
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? "accent" : _ref$variant,
-    autoDismissAfter = _ref.autoDismissAfter,
     propsLocale = _ref.locale,
-    children = _ref.children;
-  var contextLocale = useLocale("flag");
-  var locale = _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_FLAG_LOCALE), contextLocale), propsLocale);
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    hovered = _useState2[0],
-    setHovered = _useState2[1];
-  var onDismissRef = useRef();
-  onDismissRef.current = onDismiss;
-  var hasTitle = title !== undefined;
-  useEffect(function () {
-    if (!autoDismissAfter || hovered) return;
-    var timer = setTimeout(function () {
-      var _onDismissRef$current;
-      (_onDismissRef$current = onDismissRef.current) === null || _onDismissRef$current === void 0 || _onDismissRef$current.call(onDismissRef);
-    }, autoDismissAfter);
-    return function () {
-      return clearTimeout(timer);
-    };
-  }, [autoDismissAfter, hovered]);
-  return /*#__PURE__*/_jsx(Card, {
+    children = _ref.children,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var contextLocale = useLocale("toast");
+  var locale = _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_TOAST_LOCALE), contextLocale), propsLocale);
+  if (process.env.NODE_ENV !== "production") {
+    if (typeof onDismiss === "undefined") {
+      console.warn("Toast: You should always include an `onDismiss` callback, this is crucial for users with limited abilities.");
+    }
+  }
+  return /*#__PURE__*/_jsx(Card, _objectSpread(_objectSpread({}, rest), {}, {
     fullBleed: true,
-    className: stl(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["flag shadow-z500"]))),
+    className: stl(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["toast shadow-z500"]))),
     children: /*#__PURE__*/_jsxs("div", {
       className: stl(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["p-4 flex"]))),
-      onMouseEnter: function onMouseEnter() {
-        return setHovered(true);
-      },
-      onMouseLeave: function onMouseLeave() {
-        return setHovered(false);
-      },
       children: [loading ? /*#__PURE__*/_jsx(ProgressSpinner, {
-        size: 16,
-        className: cx(stl(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["mt-1"]))), VARIANT_SPINNER_CLASSNAMES[variant])
+        size: 24,
+        className: VARIANT_SPINNER_CLASSNAMES[variant]
       }) : /*#__PURE__*/_jsx(Icon, {
-        className: cx(stl(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["shrink-0 text-white rounded-full p-2px mt-1"]))), VARIANT_CLASSNAMES[variant]),
-        size: 16
+        className: cx(stl(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["shrink-0 text-white rounded-full p-1"]))), VARIANT_CLASSNAMES[variant]),
+        size: 24
       }), /*#__PURE__*/_jsxs("div", {
-        className: stl(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["flex-1 ml-4 min-w-0 break-words"]))),
+        className: stl(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["flex-1 ml-4 min-w-0 break-words"]))),
         children: [/*#__PURE__*/_jsxs("div", {
-          className: stl(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["flex justify-between"]))),
-          children: [hasTitle ? /*#__PURE__*/_jsx("h3", {
-            className: stl(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["overflow-hidden"]))),
-            children: title
-          }) : /*#__PURE__*/_jsx("div", {
-            className: stl(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["min-w-0"]))),
-            children: children
-          }), onDismiss && /*#__PURE__*/_jsx(IconButton, {
-            icon: X,
-            title: locale.dismissText,
-            variant: "subtle",
-            size: "small",
-            onClick: onDismiss
+          className: stl(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["flex justify-between"]))),
+          children: [/*#__PURE__*/_jsx(ToastPrimitive.Title, {
+            asChild: true,
+            children: /*#__PURE__*/_jsx("h3", {
+              className: stl(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["overflow-hidden mt-0.5"]))),
+              children: title
+            })
+          }), onDismiss && /*#__PURE__*/_jsx(ToastPrimitive.Close, {
+            asChild: true,
+            onClick: function onClick(e) {
+              // Prevent the default Radix handler so that `onDismiss` is not called twice in the `Toasts` component.
+              e.preventDefault();
+              onDismiss === null || onDismiss === void 0 || onDismiss();
+            },
+            children: /*#__PURE__*/_jsx(IconButton, {
+              icon: X,
+              title: locale.dismissText,
+              variant: "subtle",
+              size: "small"
+            })
           })]
-        }), hasTitle && isRenderedChild(children) && /*#__PURE__*/_jsx("div", {
-          className: stl(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["text-grey-600 mt-2"]))),
+        }), isRenderedChild(children) && /*#__PURE__*/_jsx(ToastPrimitive.Description, {
+          className: stl(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["text-grey-600 mt-2"]))),
           children: children
         })]
       })]
     })
-  });
+  }));
 };
-export default Flag;
+export default Toast;

package/esm/{Flag/Flag.tailwind.d.ts → Toast/Toast.tailwind.d.ts}

@@ -1,5 +1,5 @@
-export = flagPlugin;
-declare const flagPlugin: {
+export = toastPlugin;
+declare const toastPlugin: {
     handler: import("tailwindcss/types/config").PluginCreator;
     config?: Partial<import("tailwindcss/types/config").Config> | undefined;
 };

package/esm/{Flag/Flag.tailwind.js → Toast/Toast.tailwind.js}

@@ -1,33 +1,33 @@
 import _plugin from "tailwindcss/plugin";
 // @ts-check
 var plugin = _plugin;
-var flagPlugin = plugin(function (_ref) {
+var toastPlugin = plugin(function (_ref) {
   var addComponents = _ref.addComponents;
   var TRANSITION_TIMEOUT = 500;
   addComponents({
-    ".flag": {
+    ".toast": {
       width: "320px"
     }
   });
   addComponents({
-    ".flags_item-enter": {
+    ".toasts_item-enter": {
       opacity: "0.01",
       transform: "translate(0, 80px)"
     },
-    ".flags_item-enter-active": {
+    ".toasts_item-enter-active": {
       opacity: "1",
       transform: "translate(0, 0)",
       transition: "all ".concat(TRANSITION_TIMEOUT, "ms ease-in")
     },
-    ".flags_item-exit": {
+    ".toasts_item-exit": {
       opacity: "1",
       transform: "translate(0, 0)"
     },
-    ".flags_item-exit-active": {
+    ".toasts_item-exit-active": {
       opacity: "0.01",
       transform: "translate(0, 80px)",
       transition: "all ".concat(TRANSITION_TIMEOUT, "ms ease-in")
     }
   });
 });
-export default flagPlugin;
+export default toastPlugin;

package/esm/Toast/Toasts.d.ts

@@ -0,0 +1,21 @@
+import type { VFC } from "react";
+import type { Notification } from "./types";
+export declare type ToastsLocale = {
+    hotkeyLabel?: string;
+};
+export interface ToastsProps {
+    /**
+     * Define the array of notifications.
+     * @example [{ id: "test", title: "Test", content: "Example" }]
+     */
+    notifications: Notification[];
+    /** Define the `Toasts` locale. */
+    locale?: ToastsLocale;
+}
+/**
+ * Toasts are brief notifications that providing timely feedback to users before vanishing after a short duration.
+ *
+ * See the [Toast documentation page](https://satellite.algolia.com/components/feedback/toast) for more information.
+ */
+export declare const Toasts: VFC<ToastsProps>;
+export default Toasts;

package/esm/Toast/Toasts.js

@@ -0,0 +1,93 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var _excluded = ["content", "id", "autoDismissAfter"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import * as ToastPrimitive from "@radix-ui/react-toast";
+import { CSSTransition, TransitionGroup } from "react-transition-group";
+import { useCreatePortal, useLocale } from "../Satellite";
+import stl from "../styles/helpers/satellitePrefixer";
+import { prefersReducedMotion } from "../utils/prefersReducedMotion";
+import Toast from "./Toast";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var DEFAULT_TOASTS_LOCALE = {
+  hotkeyLabel: "Notifications"
+};
+var TRANSITION_TIMEOUT = 500;
+
+/**
+ * Toasts are brief notifications that providing timely feedback to users before vanishing after a short duration.
+ *
+ * See the [Toast documentation page](https://satellite.algolia.com/components/feedback/toast) for more information.
+ */
+export var Toasts = function Toasts(_ref) {
+  var _ref$notifications = _ref.notifications,
+    notifications = _ref$notifications === void 0 ? [] : _ref$notifications,
+    propsLocale = _ref.locale;
+  var contextLocale = useLocale("toasts");
+  var locale = _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_TOASTS_LOCALE), contextLocale), propsLocale);
+  var createPortal = useCreatePortal();
+  if (process.env.NODE_ENV !== "production") {
+    if (notifications.length > 3) {
+      console.warn("Toasts: You should not display more than 3 toasts simultaneously.");
+    }
+    if (notifications.find(function (n) {
+      return n.autoDismissAfter && n.autoDismissAfter < 2000;
+    })) {
+      console.warn("Toasts: You should not set `autoDismissAfter` to less than 2000 ms, even for brief messages.");
+    }
+  }
+  return createPortal( /*#__PURE__*/_jsxs(ToastPrimitive.Provider, {
+    children: [/*#__PURE__*/_jsx(TransitionGroup, {
+      component: null,
+      children: notifications.map(function (_ref2) {
+        var content = _ref2.content,
+          id = _ref2.id,
+          autoDismissAfter = _ref2.autoDismissAfter,
+          rest = _objectWithoutProperties(_ref2, _excluded);
+        return /*#__PURE__*/_jsx(CSSTransition, {
+          classNames: !prefersReducedMotion ? {
+            enter: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["toasts_item-enter"]))),
+            enterActive: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["toasts_item-enter-active"]))),
+            exit: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["toasts_item-exit"]))),
+            exitActive: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["toasts_item-exit-active"])))
+          } : {},
+          timeout: !prefersReducedMotion ? TRANSITION_TIMEOUT : 0,
+          appear: true,
+          children: /*#__PURE__*/_jsx(ToastPrimitive.Root, {
+            open: true,
+            onOpenChange: function onOpenChange(open) {
+              var _rest$onDismiss;
+              if (!open) (_rest$onDismiss = rest.onDismiss) === null || _rest$onDismiss === void 0 || _rest$onDismiss.call(rest);
+            },
+            onSwipeEnd: function onSwipeEnd(e) {
+              return e.preventDefault();
+            } // Prevent swipe gesture
+            ,
+            duration: autoDismissAfter || Infinity,
+            // Accessibility issue from Radix: `role="status"` is not allowed on a `li` element, as a workaround,
+            // we use it on the child.
+            // See https://github.com/radix-ui/primitives/issues/1750
+            role: "listitem",
+            "aria-live": undefined,
+            "aria-atomic": undefined,
+            children: /*#__PURE__*/_jsx(Toast, _objectSpread(_objectSpread({}, rest), {}, {
+              role: "status",
+              "aria-live": "polite",
+              "aria-atomic": "true",
+              children: content
+            }))
+          })
+        }, id);
+      })
+    }), /*#__PURE__*/_jsx(ToastPrimitive.Viewport, {
+      hotkey: ["metaKey", "F8"],
+      label: "".concat(locale.hotkeyLabel, " (CmdKey+F8/WinKey+F8)}"),
+      className: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["z-notification bottom-0 right-0 fixed flex flex-col items-end p-4 gap-4"])))
+    })]
+  }));
+};
+export default Toasts;