@algolia/satellite 1.1.0 → 1.1.2

package/dist/esm/Indicators/EmptyState/types.d.ts

@@ -0,0 +1,50 @@
+import type { ReactNode } from "react";
+import type { FlexGridDirection } from "../../Layout";
+export declare type EmptyStateUsageContexts = "result" | "feature" | "page";
+export declare type EmptyStateWidths = "medium" | "large" | "xlarge";
+export interface EmptyStatePropsAll {
+    /** Descriptive title for the state */
+    title: ReactNode;
+    /** Optional description to explain why the screen is empty or define next steps */
+    description?: ReactNode;
+    /** Buttons */
+    actions?: ReactNode;
+    /** Direction overwrite for the buttons */
+    actionsDirection?: FlexGridDirection;
+    /** Add a `<Medallion />`, an `img` element or `svg` in there */
+    leadIllustration?: ReactNode;
+    /** Plop in an `img` element or `svg` here */
+    pageIllustration?: ReactNode;
+    /**
+     * UsageContext of the component
+     * @default feature
+     */
+    usageContext?: EmptyStateUsageContexts;
+    /**
+     * Define whether or not content should be centered
+     * @default false
+     */
+    centered?: boolean;
+    /**
+     * Defines how wide the EmptyState can expand
+     * @default medium
+     */
+    width?: EmptyStateWidths;
+}
+interface EmptyStatePropsUsageContextResult extends Omit<EmptyStatePropsAll, "usageContext" | "illustration"> {
+    usageContext: "result";
+    pageIllustration?: never;
+}
+interface EmptyStatePropsUsageContextFeature extends Omit<EmptyStatePropsAll, "usageContext" | "illustration"> {
+    usageContext: "feature";
+    illustration?: never;
+}
+interface EmptyStatePropsUsageContextPage extends Omit<EmptyStatePropsAll, "usageContext" | "centered"> {
+    usageContext: "page";
+    centered?: boolean;
+}
+interface EmptyStatePropsUsageContextDefault extends Omit<EmptyStatePropsUsageContextFeature, "usageContext"> {
+    usageContext?: undefined;
+}
+export declare type EmptyStateProps = EmptyStatePropsUsageContextDefault | EmptyStatePropsUsageContextResult | EmptyStatePropsUsageContextFeature | EmptyStatePropsUsageContextPage;
+export {};

package/dist/esm/Indicators/KeyboardKey/KeyboardKey.js

@@ -0,0 +1,34 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject;
+import cx from "clsx";
+import { createElement } from "react";
+import { ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, CornerDownLeftIcon } from "../../Icons";
+import stl from "../../styles/helpers/satellitePrefixer";
+import { jsx as _jsx } from "react/jsx-runtime";
+var KEY_MAPPINGS = {
+  up: ArrowUpIcon,
+  down: ArrowDownIcon,
+  left: ArrowLeftIcon,
+  right: ArrowRightIcon,
+  enter: CornerDownLeftIcon,
+  escape: "esc"
+};
+/**
+ * The `KeyboardKey` component is used to display a keyboard key.
+ *
+ * See the [Keyboard Key documentation page](https://satellite.algolia.com/components/misc/keyboard-key) for more information.
+ */
+export var KeyboardKey = function KeyboardKey(_ref) {
+  var className = _ref.className,
+    value = _ref.value;
+  var mappedValue = KEY_MAPPINGS[value];
+  var displayed = !mappedValue ? value : typeof mappedValue === "string" ? mappedValue : /*#__PURE__*/createElement(mappedValue, {
+    "aria-label": value,
+    width: "1em",
+    height: "1em"
+  });
+  return /*#__PURE__*/_jsx("kbd", {
+    className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["keyboard-key "]))), className),
+    children: displayed
+  });
+};

package/dist/esm/Indicators/ProgressBar/ProgressBar.js

@@ -0,0 +1,46 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var _excluded = ["value", "max", "className", "barClassName"];
+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 Progress from "@radix-ui/react-progress";
+import cx from "clsx";
+import { forwardRef } from "react";
+import stl from "../../styles/helpers/satellitePrefixer";
+import { clamp } from "../../utils/clamp";
+import { prefersReducedMotion } from "../../utils/prefersReducedMotion";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * The `ProgressBar` component visually indicates the completion status of a task, updating in real-time to guide users.
+ *
+ * See the [Progress Bar documentation page](https://satellite.algolia.com/components/feedback/progress-bar) for more information.
+ */
+export var ProgressBar = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var value = _ref.value,
+    _ref$max = _ref.max,
+    max = _ref$max === void 0 ? 100 : _ref$max,
+    className = _ref.className,
+    barClassName = _ref.barClassName,
+    props = _objectWithoutProperties(_ref, _excluded);
+  if (value < 0 || value > max) {
+    if (process.env.NODE_ENV !== "production") {
+      console.warn("ProgressBar: Invalid `value` of ".concat(value, ". The `value` prop must be between 0 and ").concat(max, " (`max` prop). The `value` has been clamped to the range of 0 to ").concat(max, "."));
+    }
+    value = clamp(value, 0, max);
+  }
+  return /*#__PURE__*/_jsx(Progress.Root, _objectSpread(_objectSpread({}, props), {}, {
+    ref: ref,
+    value: value,
+    max: max,
+    className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["progress-bar"]))), className),
+    children: /*#__PURE__*/_jsx(Progress.Indicator, {
+      className: cx(stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["progress-bar-progress transition-transform ease-in-out origin-left"]))), prefersReducedMotion ? stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["duration-150"]))) : stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["duration-500"]))), barClassName),
+      style: {
+        transform: "scaleX(".concat(value / max, ")")
+      }
+    })
+  }));
+});
+ProgressBar.displayName = "ProgressBar";

package/dist/esm/Indicators/ProgressBar/ProgressBar.tailwind.js

@@ -0,0 +1,25 @@
+import _rgba from "../../styles/rgba";
+import _plugin from "tailwindcss/plugin";
+// @ts-check
+var plugin = _plugin;
+var rgba = _rgba;
+var progressBarPlugin = plugin(function (_ref) {
+  var addComponents = _ref.addComponents,
+    theme = _ref.theme;
+  addComponents({
+    ".progress-bar": {
+      height: "4px",
+      width: "100%",
+      display: "block",
+      overflow: "hidden",
+      background: theme("colors.grey.100"),
+      boxShadow: "\n        inset 0px 1px 3px 0px ".concat(rgba(theme("colors.black"), 0.1), ",\n        0px 0.5px 0px 0px ").concat(rgba(theme("colors.white"), 0.05), "\n      "),
+      borderRadius: "4px"
+    },
+    ".progress-bar-progress": {
+      height: "100%",
+      background: theme("colors.accent.600")
+    }
+  });
+});
+export default progressBarPlugin;

package/dist/esm/Indicators/ProgressSpinner/ProgressSpinner.js

@@ -0,0 +1,53 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _excluded = ["className", "size", "thickness", "align"];
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+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 stl from "../../styles/helpers/satellitePrefixer";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var ALIGN_CLASSNAMES = {
+  left: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["mr-auto"]))),
+  center: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["m-auto"]))),
+  right: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["ml-auto"])))
+};
+
+/**
+ * The `ProgressSpinner` component is used for loading data or performing actions without an instant effect. Spinners reassure we're processing their actions without revealing what's going on behind-the-scenes.
+ *
+ * See the [Progress Spinner documentation page](https://satellite.algolia.com/components/feedback/progress-spinner) for more information.
+ */
+export var ProgressSpinner = function ProgressSpinner(_ref) {
+  var className = _ref.className,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 24 : _ref$size,
+    _ref$thickness = _ref.thickness,
+    thickness = _ref$thickness === void 0 ? 2 : _ref$thickness,
+    align = _ref.align,
+    svgProps = _objectWithoutProperties(_ref, _excluded);
+  return (
+    /*#__PURE__*/
+    // Took heavy inspiration from https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/CircularProgress/CircularProgress.js
+    _jsxs("svg", _objectSpread(_objectSpread({}, svgProps), {}, {
+      className: cx(stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["progress-spinner"]))), align && ALIGN_CLASSNAMES[align], className),
+      viewBox: "".concat(size / 2, " ").concat(size / 2, " ").concat(size, " ").concat(size),
+      width: size,
+      height: size,
+      role: "status",
+      "aria-busy": true,
+      "aria-live": "polite",
+      children: [/*#__PURE__*/_jsx("title", {
+        children: "Loading spinner"
+      }), /*#__PURE__*/_jsx("circle", {
+        cx: size,
+        cy: size,
+        r: (size - thickness) / 2,
+        fill: "none",
+        strokeWidth: thickness
+      })]
+    }))
+  );
+};

package/dist/esm/Indicators/ScrollIndicator/ScrollIndicator.js

@@ -0,0 +1,84 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+import cx from "clsx";
+import { createElement, useCallback, useMemo, useState } from "react";
+import useMeasure from "react-use/lib/useMeasure";
+import useScroll from "react-use/lib/useScroll";
+import stl from "../../styles/helpers/satellitePrefixer";
+import { jsx as _jsx } from "react/jsx-runtime";
+var useScrollIndicators = function useScrollIndicators() {
+  /**
+   * We don't use the actual measurements from the hook because they're not as precise
+   * (see limitations https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver)
+   *
+   * This is mostly used as a side-effect to force the component to rerender when its size changes
+   */
+  var _useMeasure = useMeasure(),
+    _useMeasure2 = _slicedToArray(_useMeasure, 1),
+    setMeasureRef = _useMeasure2[0];
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    element = _useState2[0],
+    setElement = _useState2[1];
+  var setScrollIndicatorsRef = useCallback(function (element) {
+    setElement(element);
+    // Types are wrong, a ref callback must be able to accept null
+    // @ts-ignore
+    setMeasureRef(element);
+  }, [setMeasureRef]);
+  var fakeScrollRef = useMemo(function () {
+    return {
+      current: element
+    };
+  }, [element]);
+  var _useScroll = useScroll(fakeScrollRef),
+    scrollTop = _useScroll.y;
+  var result = {
+    showTopIndicator: false,
+    showBottomIndicator: false,
+    setScrollIndicatorsRef: setScrollIndicatorsRef
+  };
+  if (element) {
+    var scrollHeight = element.scrollHeight - element.clientHeight;
+    if (scrollHeight > 0) {
+      var percent = Math.floor(scrollTop / scrollHeight * 100);
+      result.showTopIndicator = percent > 0;
+      result.showBottomIndicator = percent < 100;
+    }
+  }
+  return result;
+};
+var VARIANT_CLASSNAMES = {
+  light: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["scroll-indicator"]))),
+  dark: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["scroll-indicator scroll-indicator-dark"])))
+};
+
+/**
+ * The `ScrollIndicator` component is used to display a top and bottom color gradient depending on the scroll position.
+ *
+ * See the [Scroll Indicator documentation page](https://satellite.algolia.com/layouts/scroll-indicator) for more information.
+ */
+export var ScrollIndicator = function ScrollIndicator(_ref) {
+  var _ref$tagName = _ref.tagName,
+    tagName = _ref$tagName === void 0 ? "div" : _ref$tagName,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? "light" : _ref$variant,
+    className = _ref.className,
+    wrapperClassName = _ref.wrapperClassName,
+    style = _ref.style,
+    children = _ref.children;
+  var _useScrollIndicators = useScrollIndicators(),
+    showTopIndicator = _useScrollIndicators.showTopIndicator,
+    showBottomIndicator = _useScrollIndicators.showBottomIndicator,
+    setScrollIndicatorsRef = _useScrollIndicators.setScrollIndicatorsRef;
+  return /*#__PURE__*/_jsx("div", {
+    className: cx(VARIANT_CLASSNAMES[variant], stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n          ", "\n          ", "\n        "])), showTopIndicator && "scroll-indicator-top", showBottomIndicator && "scroll-indicator-bottom"), wrapperClassName),
+    children: /*#__PURE__*/createElement(tagName, {
+      style: style,
+      className: cx(stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["scroll-indicator-content"]))), className),
+      ref: setScrollIndicatorsRef,
+      tabIndex: 0
+    }, children)
+  });
+};

package/dist/esm/Indicators/ScrollIndicator/ScrollIndicator.tailwind.js

@@ -0,0 +1,50 @@
+import _rgba from "../../styles/rgba";
+import _plugin from "tailwindcss/plugin";
+// @ts-check
+var plugin = _plugin;
+var rgba = _rgba;
+var scrollIndicatorPlugin = plugin(function (_ref) {
+  var addComponents = _ref.addComponents,
+    theme = _ref.theme;
+  addComponents({
+    ".scroll-indicator": {
+      position: "relative",
+      overflow: "hidden",
+      "&::before, &::after": {
+        position: "absolute",
+        width: "100%",
+        height: "48px",
+        left: "0px",
+        pointerEvents: "none"
+      },
+      "&::before": {
+        top: "0px",
+        backgroundImage: "linear-gradient(0, ".concat(rgba(theme("colors.white"), 0), " 0%, ").concat(theme("colors.white"), " 100%)")
+      },
+      "&::after": {
+        bottom: "0px",
+        backgroundImage: "linear-gradient(180deg, ".concat(rgba(theme("colors.white"), 0), " 0%, ").concat(theme("colors.white"), " 100%)")
+      }
+    },
+    ".scroll-indicator-dark": {
+      "&::before": {
+        backgroundImage: "linear-gradient(0, ".concat(rgba(theme("colors.grey.900"), 0), " 0%, ").concat(theme("colors.grey.900"), " 100%)")
+      },
+      "&::after": {
+        backgroundImage: "linear-gradient(180deg, ".concat(rgba(theme("colors.grey.900"), 0), " 0%, ").concat(theme("colors.grey.900"), " 100%)")
+      }
+    },
+    ".scroll-indicator-top::before": {
+      content: '" "'
+    },
+    ".scroll-indicator-bottom::after": {
+      content: '" "'
+    },
+    ".scroll-indicator-content": {
+      display: "block",
+      height: "100%",
+      overflowY: "auto"
+    }
+  });
+});
+export default scrollIndicatorPlugin;

package/dist/esm/Indicators/Tag/Tag.d.ts

@@ -0,0 +1,30 @@
+import type { DetailedHTMLProps, HTMLAttributes, MouseEventHandler } from "react";
+import type { ColorVariant } from "../../types";
+export declare type TagVariants = ColorVariant | "pink";
+export declare type TagLocale = {
+    addButton?: string | ((title: string) => string);
+    removeButton?: string | ((title: string) => string);
+};
+export interface TagProps extends DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> {
+    /** The "pink" variant should only be used for **Algolia admin** related things. */
+    variant?: TagVariants;
+    /** Handler function called when the "add" button is clicked. */
+    onAdd?: MouseEventHandler<HTMLElement>;
+    /** The tooltip text to display when hovering over the "add" button. */
+    addTooltip?: string;
+    /** Handler function called when the "remove" button is clicked. */
+    onRemove?: MouseEventHandler<HTMLElement>;
+    /** The tooltip text to display when hovering over the "remove" button. */
+    removeTooltip?: string;
+    /**
+     * Customize the text describing the "add" and "remove" buttons.
+     * If not provided, default values will be used.
+     */
+    locale?: TagLocale;
+}
+/**
+ * The `Tag` component is an interactive and customizable text label with varied color options.
+ *
+ * See the [Tag documentation page](https://satellite.algolia.com/components/forms/tag) for more information.
+ */
+export declare const Tag: import("react").ForwardRefExoticComponent<Pick<TagProps, "slot" | "style" | "title" | "className" | "children" | "role" | "id" | "locale" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "variant" | "onAdd" | "addTooltip" | "onRemove" | "removeTooltip"> & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/esm/Indicators/Tag/Tag.js

@@ -0,0 +1,115 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _excluded = ["children", "variant", "className", "onAdd", "addTooltip", "onRemove", "removeTooltip", "locale"];
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20;
+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 { forwardRef } from "react";
+import { useIsInsideAutoComplete } from "../../Fields/AutoComplete/components/AutoCompleteContext";
+import { PlusIcon, XIcon } from "../../Icons";
+import { TooltipWrapper } from "../../Overlay";
+import { useLocale } from "../../Satellite";
+import stl from "../../styles/helpers/satellitePrefixer";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var DEFAULT_TAG_LOCALE = {
+  addButton: function addButton(title) {
+    return "Add \"".concat(title, "\"");
+  },
+  removeButton: function removeButton(title) {
+    return "Remove \"".concat(title, "\"");
+  }
+};
+var VARIANT_CLASSNAMES = {
+  accent: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["bg-accent-100 border-accent-200 text-accent-700"]))),
+  grey: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["bg-grey-100 border-grey-200 text-grey-700"]))),
+  blue: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["bg-blue-100 border-blue-200 text-blue-800"]))),
+  green: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["bg-green-100 border-green-300 text-green-900"]))),
+  orange: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["bg-orange-100 border-orange-300 text-orange-800"]))),
+  red: stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["bg-red-100 border-red-200 text-red-700"]))),
+  pink: stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["bg-pink-100 border-pink-200 text-pink-700"])))
+};
+var BUTTON_VARIANT_CLASSNAMES = {
+  accent: stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["border-accent-200 hover:bg-accent-200 focus:bg-accent-200"]))),
+  grey: stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["border-grey-200 hover:bg-grey-200 focus:bg-grey-200"]))),
+  blue: stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["border-blue-200 hover:bg-blue-200 focus:bg-blue-200"]))),
+  green: stl(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["border-green-300 hover:bg-green-300 focus:bg-green-300"]))),
+  orange: stl(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["border-orange-300 hover:bg-orange-300 focus:bg-orange-300"]))),
+  red: stl(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["border-red-200 hover:bg-red-200 focus:bg-red-200"]))),
+  pink: stl(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["border-pink-200 hover:bg-pink-200 focus:bg-pink-200"])))
+};
+
+/**
+ * The `Tag` component is an interactive and customizable text label with varied color options.
+ *
+ * See the [Tag documentation page](https://satellite.algolia.com/components/forms/tag) for more information.
+ */
+export var Tag = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? "grey" : _ref$variant,
+    className = _ref.className,
+    onAdd = _ref.onAdd,
+    addTooltip = _ref.addTooltip,
+    onRemove = _ref.onRemove,
+    removeTooltip = _ref.removeTooltip,
+    propsLocale = _ref.locale,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var title = typeof children === "string" ? children : "tag";
+  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 ? {
+    tabIndex: -1
+  } : {};
+  var addable = Boolean(onAdd);
+  var removable = Boolean(onRemove);
+  var handleAdd = function handleAdd(evt) {
+    evt.stopPropagation();
+    onAdd === null || onAdd === void 0 || onAdd(evt);
+  };
+  var handleRemove = function handleRemove(evt) {
+    evt.stopPropagation();
+    onRemove === null || onRemove === void 0 || onRemove(evt);
+  };
+  var content = /*#__PURE__*/_jsx("span", {
+    className: stl(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["truncate flex-1"]))),
+    children: children
+  });
+  return /*#__PURE__*/_jsxs("span", _objectSpread(_objectSpread({}, props), {}, {
+    className: tagClassName,
+    ref: ref,
+    children: [addable ? /*#__PURE__*/_jsx(TooltipWrapper, {
+      content: addTooltip,
+      hideDelay: 0,
+      side: "bottom",
+      children: /*#__PURE__*/_jsxs("button", _objectSpread(_objectSpread({}, tabIndexProps), {}, {
+        className: cx(stl(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["tag-add-button"]))), !removable && stl(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["-mr-2"]))), BUTTON_VARIANT_CLASSNAMES[variant]),
+        type: "button",
+        onClick: handleAdd,
+        "aria-label": typeof locale.addButton === "function" ? locale.addButton(title) : locale.addButton,
+        children: [/*#__PURE__*/_jsx(PlusIcon, {
+          size: "1em"
+        }), content]
+      }))
+    }) : content, removable && /*#__PURE__*/_jsx(TooltipWrapper, {
+      content: removeTooltip,
+      hideDelay: 0,
+      side: "bottom",
+      align: "start",
+      children: /*#__PURE__*/_jsx("button", _objectSpread(_objectSpread({}, tabIndexProps), {}, {
+        className: cx(stl(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["tag-close-button p-1"]))), !addable && stl(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["ml-2"]))), BUTTON_VARIANT_CLASSNAMES[variant]),
+        type: "button",
+        onClick: handleRemove,
+        "aria-label": typeof locale.removeButton === "function" ? locale.removeButton(title) : locale.removeButton,
+        children: /*#__PURE__*/_jsx(XIcon, {
+          size: "1em"
+        })
+      }))
+    })]
+  }));
+});
+Tag.displayName = "Tag";

package/dist/esm/Indicators/Toast/Toast.js

@@ -0,0 +1,101 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+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 { IconButton } from "../../Actions";
+import { CheckIcon, XIcon } from "../../Icons";
+import { Card } from "../../Layout";
+import { useLocale } from "../../Satellite";
+import stl from "../../styles/helpers/satellitePrefixer";
+import { isRenderedChild } from "../../utils/isRenderedChild";
+import { ProgressSpinner } from "../ProgressSpinner";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var DEFAULT_TOAST_LOCALE = {
+  dismissText: "Dismiss"
+};
+var VARIANT_CLASSNAMES = {
+  grey: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["bg-grey-500"]))),
+  accent: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["bg-accent-500"]))),
+  blue: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["bg-blue-600"]))),
+  green: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["bg-green-600"]))),
+  orange: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["bg-orange-500"]))),
+  red: stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["bg-red-500"])))
+};
+var VARIANT_SPINNER_CLASSNAMES = {
+  grey: stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["border-grey-500"]))),
+  accent: stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["border-accent-500"]))),
+  blue: stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["border-blue-600"]))),
+  green: stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["border-green-600"]))),
+  orange: stl(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["border-orange-500"]))),
+  red: stl(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["border-red-500"])))
+};
+export var Toast = function Toast(_ref) {
+  var onDismiss = _ref.onDismiss,
+    title = _ref.title,
+    _ref$icon = _ref.icon,
+    Icon = _ref$icon === void 0 ? 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 = _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(["toast shadow-z500"]))),
+    children: /*#__PURE__*/_jsxs("div", {
+      className: stl(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["p-4 flex"]))),
+      children: [loading ? /*#__PURE__*/_jsx(ProgressSpinner, {
+        "aria-hidden": true,
+        size: 24,
+        className: VARIANT_SPINNER_CLASSNAMES[variant]
+      }) : /*#__PURE__*/_jsx(Icon, {
+        "aria-hidden": true,
+        className: cx(stl(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["shrink-0 text-white rounded-full p-1"]))), VARIANT_CLASSNAMES[variant]),
+        size: 24
+      }), /*#__PURE__*/_jsxs("div", {
+        className: stl(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["flex-1 ml-4 min-w-0 break-words"]))),
+        children: [/*#__PURE__*/_jsxs("div", {
+          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: XIcon,
+              title: locale.dismissText,
+              variant: "subtle",
+              size: "small"
+            })
+          })]
+        }), isRenderedChild(children) && /*#__PURE__*/_jsx(ToastPrimitive.Description, {
+          className: stl(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["text-grey-600 mt-2"]))),
+          children: children
+        })]
+      })]
+    })
+  }));
+};