@algolia/satellite 1.0.0-v3.99 → 1.1.0

package/dist/cjs/TextArea/TextArea.js

@@ -0,0 +1,71 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TextArea = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _react = require("react");
+var _Field = require("../Field");
+var _Icons = require("../Icons");
+var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["className", "placeholder", "required"];
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+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) { (0, _defineProperty2["default"])(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; }
+var STATUS_CLASSNAMES = {
+  "default": "",
+  invalid: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["text-area-invalid"]))),
+  validated: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["text-area-validated"])))
+};
+var InvalidIcon = function InvalidIcon() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icons.XIcon, {
+    className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["mr-4 h-4 w-4 text-white bg-red-700 p-px rounded-full absolute top-2 -right-2"])))
+  });
+};
+var ValidatedIcon = function ValidatedIcon() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icons.CheckIcon, {
+    className: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["mr-4 h-4 w-4 text-white bg-accent-600 p-px rounded-full absolute top-2 -right-2"])))
+  });
+};
+
+/**
+ * The `TextArea` component is a multiline input field for extensive text, ideal for detailed feedback, descriptions, or comments.
+ *
+ * See the [Text Area documentation page](https://satellite.algolia.com/components/forms/text-area) for more information.
+ */
+var TextArea = exports.TextArea = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var _textareaProps$id;
+  var className = _ref.className,
+    placeholder = _ref.placeholder,
+    required = _ref.required,
+    textareaProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  var _useField = (0, _Field.useField)({
+      required: required
+    }),
+    state = _useField.state,
+    labelId = _useField.labelId,
+    descriptionId = _useField.descriptionId,
+    inputId = _useField.inputId;
+  var isInvalid = state.status === "invalid";
+  var StatusIcon = isInvalid ? InvalidIcon : state.status === "validated" ? ValidatedIcon : _react.Fragment;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["text-area relative"]))), STATUS_CLASSNAMES[state.status], className),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("textarea", _objectSpread(_objectSpread({
+      "aria-labelledby": labelId,
+      "aria-describedby": descriptionId
+    }, textareaProps), {}, {
+      id: (_textareaProps$id = textareaProps.id) !== null && _textareaProps$id !== void 0 ? _textareaProps$id : inputId,
+      required: required,
+      "aria-invalid": isInvalid,
+      ref: ref,
+      placeholder: placeholder
+    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(StatusIcon, {})]
+  });
+});
+TextArea.displayName = "TextArea";

package/dist/cjs/TextArea/TextArea.tailwind.d.ts

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

package/dist/cjs/TextArea/TextArea.tailwind.js

@@ -0,0 +1,79 @@
+"use strict";
+
+// @ts-check
+var plugin = require("tailwindcss/plugin");
+var disabledColor = require("../styles/disabledColor");
+var rgba = require("../styles/rgba");
+var textAreaPlugin = plugin(function (_ref) {
+  var addComponents = _ref.addComponents,
+    theme = _ref.theme;
+  addComponents({
+    ".text-area": {
+      display: "flex",
+      width: "100%",
+      backgroundColor: theme("colors.white"),
+      border: "1px solid ".concat(theme("colors.grey.500")),
+      borderRadius: theme("borderRadius.DEFAULT"),
+      boxShadow: "inset 0px 1px 4px 0px ".concat(rgba(theme("colors.grey.500"), 0.3)),
+      transition: "all 100ms ease-in-out",
+      fontSize: theme("fontSize.base"),
+      lineHeight: theme("lineHeight.base"),
+      "&::placeholder": {
+        color: theme("colors.grey.600")
+      },
+      "&:hover": {
+        borderColor: theme("colors.grey.600")
+      },
+      "&:focus": {
+        borderColor: theme("colors.accent.600"),
+        boxShadow: "0px 1px 0px 0px ".concat(theme("colors.shadow.5")),
+        outline: "none"
+      },
+      "&:has(textarea:disabled)": {
+        borderColor: disabledColor(theme("colors.grey.200")),
+        boxShadow: "none"
+      }
+    },
+    ".text-area-invalid": {
+      backgroundColor: theme("colors.red.100"),
+      borderColor: theme("colors.red.700"),
+      "&:hover": {
+        borderColor: theme("colors.red.700"),
+        backgroundColor: theme("colors.red.50")
+      },
+      "&:focus-within": {
+        outline: "1px solid ".concat(theme("colors.red.700"))
+      }
+    },
+    ".text-area-invalid textarea": {
+      paddingRight: theme("spacing.6")
+    },
+    ".text-area-validated textarea": {
+      paddingRight: theme("spacing.6")
+    },
+    textarea: {
+      flex: "1",
+      minWidth: "0px",
+      caretColor: theme("colors.grey.600"),
+      color: theme("colors.grey.900"),
+      background: "transparent",
+      padding: theme("spacing.4"),
+      "&:focus": {
+        outline: "none"
+      },
+      "&:disabled": {
+        cursor: "not-allowed",
+        color: theme("colors.grey.300"),
+        background: "linear-gradient(-180deg, ".concat(theme("colors.white"), " 0%, ").concat(theme("colors.grey.100"), " 100%)")
+      }
+    },
+    ".text-area-invalid:not(.text-area:disabled)": {
+      backgroundColor: theme("colors.red.100"),
+      borderColor: theme("colors.red.700"),
+      "&:hover": {
+        borderColor: theme("colors.red.800")
+      }
+    }
+  });
+});
+module.exports = textAreaPlugin;

package/dist/cjs/TextArea/index.d.ts

@@ -0,0 +1 @@
+export * from "./TextArea";

package/dist/cjs/TextArea/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _TextArea = require("./TextArea");
+Object.keys(_TextArea).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _TextArea[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _TextArea[key];
+    }
+  });
+});

package/dist/cjs/TextWrap/TextWrap.d.ts

@@ -0,0 +1,12 @@
+import type { VFC } from "react";
+export interface TextWrapProps extends Omit<JSX.IntrinsicElements["span"], "children"> {
+    /** The max number of lines before the text is cut with an ellipsis */
+    maxLines?: number;
+    children: string;
+}
+/**
+ * The `TextWrap` component is used to wrap text and truncate it with an ellipsis if it overflows.
+ *
+ * See the [Text Wrap documentation page](https://satellite.algolia.com/components/misc/text-wrap) for more information.
+ */
+export declare const TextWrap: VFC<TextWrapProps>;

package/dist/cjs/TextWrap/TextWrap.js

@@ -0,0 +1,58 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TextWrap = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
+var _isCssPropertySupported = require("../utils/isCssPropertySupported");
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["children", "maxLines", "style"];
+var _templateObject;
+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) { (0, _defineProperty2["default"])(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; }
+var BASE_STYLES = (0, _isCssPropertySupported.isCssPropertySupported)("overflowWrap", "anywhere") ? {
+  whiteSpace: "normal",
+  overflowWrap: "anywhere"
+} : {
+  wordBreak: "break-all"
+};
+var SEPARATOR_ELEMENT = /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+  className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["invisible"]))),
+  "aria-hidden": "true",
+  children: "\u200B"
+});
+
+/**
+ * The `TextWrap` component is used to wrap text and truncate it with an ellipsis if it overflows.
+ *
+ * See the [Text Wrap documentation page](https://satellite.algolia.com/components/misc/text-wrap) for more information.
+ */
+var TextWrap = exports.TextWrap = function TextWrap(_ref) {
+  var text = _ref.children,
+    maxLines = _ref.maxLines,
+    style = _ref.style,
+    spanProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  var clampStyle = typeof maxLines !== "undefined" && maxLines >= 1 ? _objectSpread(_objectSpread({}, BASE_STYLES), {}, {
+    display: "-webkit-box",
+    WebkitBoxOrient: "vertical",
+    WebkitLineClamp: maxLines,
+    overflow: "hidden"
+  }) : BASE_STYLES;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", _objectSpread(_objectSpread({
+    style: _objectSpread(_objectSpread({}, clampStyle), style)
+  }, spanProps), {}, {
+    children: text.split(/([\W_]+)/).flatMap(function (part, idx) {
+      if (!part) {
+        return null;
+      }
+      return idx % 2 === 0 ? part : /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+        children: [part, SEPARATOR_ELEMENT]
+      }, "".concat(idx, "-").concat(part));
+    }).filter(Boolean)
+  }));
+};

package/dist/cjs/TextWrap/index.d.ts

@@ -0,0 +1 @@
+export * from "./TextWrap";

package/dist/cjs/TextWrap/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _TextWrap = require("./TextWrap");
+Object.keys(_TextWrap).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _TextWrap[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _TextWrap[key];
+    }
+  });
+});

package/dist/cjs/Toast/Toast.d.ts

@@ -0,0 +1,5 @@
+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"> & Omit<HTMLAttributes<HTMLElement>, "title">;
+export declare const Toast: FC<ToastProps>;

package/dist/cjs/Toast/Toast.js

@@ -0,0 +1,110 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Toast = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var ToastPrimitive = _interopRequireWildcard(require("@radix-ui/react-toast"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _Button = require("../Button");
+var _Card = require("../Card");
+var _Icons = require("../Icons");
+var _ProgressSpinner = require("../ProgressSpinner");
+var _Satellite = require("../Satellite");
+var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
+var _isRenderedChild = require("../utils/isRenderedChild");
+var _jsxRuntime = require("react/jsx-runtime");
+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 _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+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) { (0, _defineProperty2["default"])(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; }
+var DEFAULT_TOAST_LOCALE = {
+  dismissText: "Dismiss"
+};
+var VARIANT_CLASSNAMES = {
+  grey: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["bg-grey-500"]))),
+  accent: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["bg-accent-500"]))),
+  blue: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["bg-blue-600"]))),
+  green: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["bg-green-600"]))),
+  orange: (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["bg-orange-500"]))),
+  red: (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["bg-red-500"])))
+};
+var VARIANT_SPINNER_CLASSNAMES = {
+  grey: (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["border-grey-500"]))),
+  accent: (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["border-accent-500"]))),
+  blue: (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["border-blue-600"]))),
+  green: (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["border-green-600"]))),
+  orange: (0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["border-orange-500"]))),
+  red: (0, _satellitePrefixer["default"])(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["border-red-500"])))
+};
+var Toast = exports.Toast = function Toast(_ref) {
+  var onDismiss = _ref.onDismiss,
+    title = _ref.title,
+    _ref$icon = _ref.icon,
+    Icon = _ref$icon === void 0 ? _Icons.CheckIcon : _ref$icon,
+    _ref$loading = _ref.loading,
+    loading = _ref$loading === void 0 ? false : _ref$loading,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? "accent" : _ref$variant,
+    propsLocale = _ref.locale,
+    children = _ref.children,
+    rest = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  var contextLocale = (0, _Satellite.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__*/(0, _jsxRuntime.jsx)(_Card.Card, _objectSpread(_objectSpread({}, rest), {}, {
+    fullBleed: true,
+    className: (0, _satellitePrefixer["default"])(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["toast shadow-z500"]))),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: (0, _satellitePrefixer["default"])(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["p-4 flex"]))),
+      children: [loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProgressSpinner.ProgressSpinner, {
+        "aria-hidden": true,
+        size: 24,
+        className: VARIANT_SPINNER_CLASSNAMES[variant]
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
+        "aria-hidden": true,
+        className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2["default"])(["shrink-0 text-white rounded-full p-1"]))), VARIANT_CLASSNAMES[variant]),
+        size: 24
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: (0, _satellitePrefixer["default"])(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2["default"])(["flex-1 ml-4 min-w-0 break-words"]))),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: (0, _satellitePrefixer["default"])(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2["default"])(["flex justify-between"]))),
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ToastPrimitive.Title, {
+            asChild: true,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("h3", {
+              className: (0, _satellitePrefixer["default"])(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2["default"])(["overflow-hidden mt-0.5"]))),
+              children: title
+            })
+          }), onDismiss && /*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
+              icon: _Icons.XIcon,
+              title: locale.dismissText,
+              variant: "subtle",
+              size: "small"
+            })
+          })]
+        }), (0, _isRenderedChild.isRenderedChild)(children) && /*#__PURE__*/(0, _jsxRuntime.jsx)(ToastPrimitive.Description, {
+          className: (0, _satellitePrefixer["default"])(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2["default"])(["text-grey-600 mt-2"]))),
+          children: children
+        })]
+      })]
+    })
+  }));
+};

package/dist/cjs/Toast/Toast.tailwind.d.ts

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

package/dist/cjs/Toast/Toast.tailwind.js

@@ -0,0 +1,34 @@
+"use strict";
+
+// @ts-check
+var plugin = require("tailwindcss/plugin");
+var toastPlugin = plugin(function (_ref) {
+  var addComponents = _ref.addComponents;
+  var TRANSITION_TIMEOUT = 500;
+  addComponents({
+    ".toast": {
+      width: "320px"
+    }
+  });
+  addComponents({
+    ".toasts_item-enter": {
+      opacity: "0.01",
+      transform: "translate(0, 80px)"
+    },
+    ".toasts_item-enter-active": {
+      opacity: "1",
+      transform: "translate(0, 0)",
+      transition: "all ".concat(TRANSITION_TIMEOUT, "ms ease-in")
+    },
+    ".toasts_item-exit": {
+      opacity: "1",
+      transform: "translate(0, 0)"
+    },
+    ".toasts_item-exit-active": {
+      opacity: "0.01",
+      transform: "translate(0, 80px)",
+      transition: "all ".concat(TRANSITION_TIMEOUT, "ms ease-in")
+    }
+  });
+});
+module.exports = toastPlugin;

package/dist/cjs/Toast/Toasts.d.ts

@@ -0,0 +1,20 @@
+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>;

package/dist/cjs/Toast/Toasts.js

@@ -0,0 +1,101 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Toasts = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var ToastPrimitive = _interopRequireWildcard(require("@radix-ui/react-toast"));
+var _reactTransitionGroup = require("react-transition-group");
+var _Satellite = require("../Satellite");
+var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
+var _prefersReducedMotion = require("../utils/prefersReducedMotion");
+var _Toast = require("./Toast");
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var _excluded = ["content", "id", "autoDismissAfter"];
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+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) { (0, _defineProperty2["default"])(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; }
+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.
+ */
+var Toasts = exports.Toasts = function Toasts(_ref) {
+  var _ref$notifications = _ref.notifications,
+    notifications = _ref$notifications === void 0 ? [] : _ref$notifications,
+    propsLocale = _ref.locale;
+  var contextLocale = (0, _Satellite.useLocale)("toasts");
+  var locale = _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_TOASTS_LOCALE), contextLocale), propsLocale);
+  var createPortal = (0, _Satellite.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__*/(0, _jsxRuntime.jsxs)(ToastPrimitive.Provider, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactTransitionGroup.TransitionGroup, {
+      component: null,
+      children: notifications.map(function (_ref2) {
+        var content = _ref2.content,
+          id = _ref2.id,
+          autoDismissAfter = _ref2.autoDismissAfter,
+          rest = (0, _objectWithoutProperties2["default"])(_ref2, _excluded);
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactTransitionGroup.CSSTransition, {
+          classNames: !_prefersReducedMotion.prefersReducedMotion ? {
+            enter: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["toasts_item-enter"]))),
+            enterActive: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["toasts_item-enter-active"]))),
+            exit: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["toasts_item-exit"]))),
+            exitActive: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["toasts_item-exit-active"])))
+          } : {},
+          timeout: !_prefersReducedMotion.prefersReducedMotion ? TRANSITION_TIMEOUT : 0,
+          appear: true,
+          children: /*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsx)(_Toast.Toast, _objectSpread(_objectSpread({}, rest), {}, {
+              role: "status",
+              "aria-live": "polite",
+              "aria-atomic": "true",
+              children: content
+            }))
+          })
+        }, id);
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ToastPrimitive.Viewport, {
+      hotkey: ["metaKey", "F8"],
+      label: "".concat(locale.hotkeyLabel, " (CmdKey+F8/WinKey+F8)}"),
+      className: (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["z-notification bottom-0 right-0 fixed flex flex-col items-end p-4 gap-4"])))
+    })]
+  }));
+};

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

@@ -0,0 +1,3 @@
+export * from "./Toast";
+export * from "./Toasts";
+export * from "./types";

package/dist/cjs/Toast/index.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _Toast = require("./Toast");
+Object.keys(_Toast).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Toast[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Toast[key];
+    }
+  });
+});
+var _Toasts = require("./Toasts");
+Object.keys(_Toasts).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Toasts[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Toasts[key];
+    }
+  });
+});
+var _types = require("./types");
+Object.keys(_types).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _types[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _types[key];
+    }
+  });
+});

package/dist/cjs/Toast/types.d.ts

@@ -0,0 +1,34 @@
+import type { ReactNode, ReactPortal } from "react";
+import type { IconComponentType } from "../Icons";
+import type { ColorVariant } from "../types";
+export declare type Notification = {
+    /** Defines an unique ID for the `Toast`. */
+    id: string;
+    /** Defines the title for the `Toast`. Will be rendered in a heading element. */
+    title: Exclude<ReactNode, ReactPortal>;
+    /** Defines the content for the `Toast`. */
+    content?: Exclude<ReactNode, ReactPortal>;
+    /** Defines the icon for the `Toast`. */
+    icon?: IconComponentType;
+    /**
+     * Defines the color variant of the `Toast`.
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Defines the color variant of the `Toast`.
+     * @default "blue"
+     */
+    variant?: ColorVariant;
+    /** Defines if and how long before the `Toast` should be dismissed (in ms). */
+    autoDismissAfter?: number;
+    /**
+     * Defines a function called when the `Toast` dismiss button is clicked or the `autoDismissAfter` time has elapsed.
+     * Dismiss button won't be rendered if absent.
+     */
+    onDismiss?: () => void;
+    /** Define locale for the `Toast`. */
+    locale?: {
+        dismissText?: string;
+    };
+};

package/dist/cjs/Toast/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});