@algolia/satellite 1.0.0-v3.99 → 1.1.0

package/dist/esm/Pagination/CompactPagination/CompactPagination.js

@@ -0,0 +1,81 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _templateObject, _templateObject2;
+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 { IconButton } from "../../Button";
+import { ArrowLeftIcon, ArrowRightIcon, ChevronsLeftIcon, ChevronsRightIcon } from "../../Icons";
+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_COMPACT_PAGINATION_LOCALE = {
+  goToFirstPage: "Go to first page",
+  goToPreviousPage: "Go to previous page",
+  goToNextPage: "Go to next page",
+  goToLastPage: "Go to last page",
+  label: function label(page, nbPages) {
+    return typeof nbPages === "number" ? "Page ".concat(page, " of ").concat(nbPages) : "Page ".concat(page, " of many");
+  }
+};
+/** @ignore */
+export var isDeterminateCompactPaginationProps = function isDeterminateCompactPaginationProps(props) {
+  return "nbPages" in props;
+};
+
+/** @ignore */
+export var isIndeterminateCompactPaginationProps = function isIndeterminateCompactPaginationProps(props) {
+  return !isDeterminateCompactPaginationProps(props);
+};
+
+/**
+ * The `CompactPagination` component is used to help our users to move through an ordered collection of items represented by a page number and arrows.
+ *
+ * See the [Compact Pagination documentation page](https://satellite.algolia.com/components/navigation/compact-pagination) for more information.
+ */
+export var CompactPagination = function CompactPagination(props) {
+  var _props$label;
+  var contextLocale = useLocale("compactPagination");
+  var locale = _objectSpread(_objectSpread({}, DEFAULT_COMPACT_PAGINATION_LOCALE), {}, {
+    contextLocale: contextLocale
+  }, props.locale);
+  var labelType = (_props$label = props.label) !== null && _props$label !== void 0 ? _props$label : isDeterminateCompactPaginationProps(props) ? "complete" : "compact";
+  var label = labelType === "none" ? null : labelType === "compact" ? "".concat(props.currentPage) : isDeterminateCompactPaginationProps(props) ? locale.label(props.currentPage, props.nbPages) : locale.label(props.currentPage);
+  var isFirstPage = props.currentPage === 1;
+  var isLastPage = isDeterminateCompactPaginationProps(props) ? props.currentPage === props.nbPages : !!props.nextDisabled;
+  return /*#__PURE__*/_jsxs("div", {
+    className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["flex items-center space-x-2"]))),
+    children: [props.showGoToFirstPage && /*#__PURE__*/_jsx(IconButton, {
+      icon: ChevronsLeftIcon,
+      title: locale.goToFirstPage,
+      onClick: function onClick() {
+        return props.onChange(1);
+      },
+      disabled: isFirstPage
+    }), /*#__PURE__*/_jsx(IconButton, {
+      icon: ArrowLeftIcon,
+      title: locale.goToPreviousPage,
+      onClick: function onClick() {
+        return props.onChange(props.currentPage - 1);
+      },
+      disabled: isFirstPage
+    }), !!label && /*#__PURE__*/_jsx("span", {
+      className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["inline-block text-center tabular-nums px-2"]))),
+      children: label
+    }), /*#__PURE__*/_jsx(IconButton, {
+      icon: ArrowRightIcon,
+      title: locale.goToNextPage,
+      onClick: function onClick() {
+        return props.onChange(props.currentPage + 1);
+      },
+      disabled: isLastPage
+    }), isDeterminateCompactPaginationProps(props) && props.showGoToLastPage && /*#__PURE__*/_jsx(IconButton, {
+      icon: ChevronsRightIcon,
+      title: locale.goToLastPage,
+      onClick: function onClick() {
+        return props.onChange(props.nbPages);
+      },
+      disabled: isLastPage
+    })]
+  });
+};

package/dist/esm/Pagination/CompactPagination/index.d.ts

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

package/dist/esm/Pagination/CompactPagination/index.js

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

package/dist/esm/Pagination/DotPagination/DotPagination.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import type { NumberUnion } from "utils/NumberUnion";
+export declare type DotPaginationLocale = {
+    goToPageText?(page: number): string;
+};
+export declare type DotPaginationProps<T extends number> = {
+    /** Currently selected page (1 based index) */
+    currentPage: NumberUnion<T>;
+    onChange: (page: NumberUnion<T>) => void;
+    nbPages: T;
+    size?: "small" | "medium";
+    locale?: DotPaginationLocale;
+};
+/**
+ * The `DotPagination` component is used to help our users to move through an ordered collection of items represented by dots.
+ *
+ * See the [Dot Pagination documentation page](https://satellite.algolia.com/components/navigation/dot-pagination) for more information.
+ */
+export declare const DotPagination: <T extends number>({ currentPage, onChange, nbPages, size, locale, }: DotPaginationProps<T>) => JSX.Element;

package/dist/esm/Pagination/DotPagination/DotPagination.js

@@ -0,0 +1,43 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _templateObject, _templateObject2;
+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 { useLocale } from "../../Satellite";
+import stl from "../../styles/helpers/satellitePrefixer";
+import { jsx as _jsx } from "react/jsx-runtime";
+var DEFAULT_DOT_PAGINATION_LOCALE = {
+  goToPageText: function goToPageText(pageIdx) {
+    return "Go to page ".concat(pageIdx);
+  }
+};
+/**
+ * The `DotPagination` component is used to help our users to move through an ordered collection of items represented by dots.
+ *
+ * See the [Dot Pagination documentation page](https://satellite.algolia.com/components/navigation/dot-pagination) for more information.
+ */
+export var DotPagination = function DotPagination(_ref) {
+  var currentPage = _ref.currentPage,
+    onChange = _ref.onChange,
+    nbPages = _ref.nbPages,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? "medium" : _ref$size,
+    propsLocale = _ref.locale;
+  var contextLocale = useLocale("dotPagination");
+  var locale = _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_DOT_PAGINATION_LOCALE), contextLocale), propsLocale);
+  return /*#__PURE__*/_jsx("ul", {
+    className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["flex"]))),
+    children: new Array(nbPages).fill(undefined).map(function (_, idx) {
+      var pageIdx = idx + 1;
+      return /*#__PURE__*/_jsx("li", {
+        children: /*#__PURE__*/_jsx("button", {
+          "aria-label": locale.goToPageText(pageIdx),
+          className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n              rounded-full mx-1 border\n              ", "\n              ", "\n            "])), currentPage === pageIdx ? "bg-accent-600 border-transparent" : "bg-grey-200 border-grey-500", size === "medium" ? "h-3 w-3" : "h-2 w-2"),
+          onClick: function onClick() {
+            return onChange(pageIdx);
+          }
+        })
+      }, idx);
+    })
+  });
+};

package/dist/esm/Pagination/DotPagination/index.d.ts

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

package/dist/esm/Pagination/DotPagination/index.js

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

package/dist/esm/Pagination/Pagination/Pagination.d.ts

@@ -0,0 +1,19 @@
+import type { VFC } from "react";
+export declare type PaginationLocale = {
+    goToPage?(page: number): string;
+    goToNextPage?: string;
+    goToPreviousPage?: string;
+};
+export interface PaginationProps {
+    nbPages: number;
+    currentPage: number;
+    maxButtons?: number;
+    onChange: (page: number) => void;
+    locale?: PaginationLocale;
+}
+/**
+ * The `Pagination` component is used to help our users to move through an ordered collection of items.
+ *
+ * See the [Pagination documentation page](https://satellite.algolia.com/components/navigation/pagination) for more information.
+ */
+export declare const Pagination: VFC<PaginationProps>;

package/dist/esm/Pagination/Pagination/Pagination.js

@@ -0,0 +1,111 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+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) { _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 { Button, ButtonGroup } from "../../Button";
+import { ArrowLeftIcon, ArrowRightIcon } from "../../Icons";
+import { useLocale } from "../../Satellite";
+import stl from "../../styles/helpers/satellitePrefixer";
+import { range } from "../../utils/range";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var DEFAULT_PAGINATION_LOCALE = {
+  goToPage: function goToPage(index) {
+    return "Go to page ".concat(index);
+  },
+  goToPreviousPage: "Go to previous page",
+  goToNextPage: "Go to next page"
+};
+var DEFAULT_MAX_BUTTONS = 10;
+var Ellipsis = function Ellipsis() {
+  return /*#__PURE__*/_jsx(Button, {
+    className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["pointer-events-none"]))),
+    tabIndex: -1,
+    "aria-disabled": true,
+    children: "\u2026"
+  });
+};
+var Group = function Group(_ref) {
+  var group = _ref.group,
+    currentPage = _ref.currentPage,
+    onChange = _ref.onChange,
+    goToPage = _ref.goToPage;
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: group.map(function (index) {
+      return /*#__PURE__*/_jsx(Button, {
+        "aria-label": goToPage(index),
+        variant: index === currentPage ? "primary" : "neutral",
+        onClick: function onClick() {
+          return onChange(index);
+        },
+        children: index
+      }, index);
+    })
+  });
+};
+
+/**
+ * The `Pagination` component is used to help our users to move through an ordered collection of items.
+ *
+ * See the [Pagination documentation page](https://satellite.algolia.com/components/navigation/pagination) for more information.
+ */
+export var Pagination = function Pagination(_ref2) {
+  var currentPage = _ref2.currentPage,
+    nbPages = _ref2.nbPages,
+    onChange = _ref2.onChange,
+    _ref2$maxButtons = _ref2.maxButtons,
+    maxButtonsParam = _ref2$maxButtons === void 0 ? DEFAULT_MAX_BUTTONS : _ref2$maxButtons,
+    propsLocale = _ref2.locale;
+  var contextLocale = useLocale("pagination");
+  var locale = _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_PAGINATION_LOCALE), contextLocale), propsLocale);
+  var padding = Math.floor((Math.min(nbPages, maxButtonsParam) - 1) / 2);
+  var maxButtons = 2 * padding + 1;
+  var currentPageGroupStart = Math.max(1, Math.min(currentPage - padding, nbPages - maxButtons));
+  var currentPageGroupEnd = Math.min(currentPageGroupStart + maxButtons, nbPages);
+  var groups = [[], range(currentPageGroupStart, currentPageGroupEnd + 1), []];
+  if (currentPageGroupStart > 1) {
+    groups[0].push(1);
+  }
+  if (currentPageGroupEnd < nbPages) {
+    groups[2].push(nbPages);
+  }
+  return /*#__PURE__*/_jsxs(ButtonGroup, {
+    as: "nav",
+    children: [/*#__PURE__*/_jsx(Button, {
+      "aria-label": locale.goToPreviousPage,
+      disabled: currentPage === 1,
+      onClick: function onClick() {
+        return onChange(currentPage - 1);
+      },
+      children: /*#__PURE__*/_jsx(ArrowLeftIcon, {
+        size: "1em"
+      })
+    }), /*#__PURE__*/_jsx(Group, {
+      currentPage: currentPage,
+      onChange: onChange,
+      group: groups[0],
+      goToPage: locale.goToPage
+    }), groups[0].length !== 0 && groups[1][0] - groups[0][0] > 1 && /*#__PURE__*/_jsx(Ellipsis, {}), /*#__PURE__*/_jsx(Group, {
+      currentPage: currentPage,
+      onChange: onChange,
+      group: groups[1],
+      goToPage: locale.goToPage
+    }), groups[2].length !== 0 && groups[2][0] - groups[1][groups[1].length - 1] > 1 && /*#__PURE__*/_jsx(Ellipsis, {}), /*#__PURE__*/_jsx(Group, {
+      currentPage: currentPage,
+      onChange: onChange,
+      group: groups[2],
+      goToPage: locale.goToPage
+    }), /*#__PURE__*/_jsx(Button, {
+      "aria-label": locale.goToNextPage,
+      disabled: currentPage === nbPages,
+      onClick: function onClick() {
+        return onChange(currentPage + 1);
+      },
+      children: /*#__PURE__*/_jsx(ArrowRightIcon, {
+        size: "1em"
+      })
+    })]
+  });
+};

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

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

package/dist/esm/Pagination/Pagination/index.js

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

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

@@ -0,0 +1,3 @@
+export * from "./Pagination";
+export * from "./DotPagination";
+export * from "./CompactPagination";

package/dist/esm/Pagination/index.js

@@ -0,0 +1,3 @@
+export * from "./Pagination";
+export * from "./DotPagination";
+export * from "./CompactPagination";

package/dist/esm/Popover/Popover.d.ts

@@ -0,0 +1,9 @@
+import type { VFC } from "react";
+import type { PopoverProps } from "./types";
+export declare const POPOVER_ARROW_TEST_ID = "arrow";
+/**
+ * The `Popover` component is an interactive contextual overlay that provides additional content or actions.
+ *
+ * See the [Popover documentation page](https://satellite.algolia.com/components/overlay/popover) for more information.
+ */
+export declare const Popover: VFC<PopoverProps>;

package/dist/esm/Popover/Popover.js

@@ -0,0 +1,134 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
+var _excluded = ["children", "title", "subtitle", "content", "footer", "open", "onDismiss", "side", "sideOffset", "align", "alignOffset", "noArrow", "avoidCollisions", "autoFocusOnOpenElement", "locale"];
+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 PopoverPrimitive from "@radix-ui/react-popover";
+import cx from "clsx";
+import { useMemo, useRef } from "react";
+import { Fragment } from "react";
+import { IconButton } from "../Button";
+import { XIcon } from "../Icons";
+import { useCreatePortal, useLocale } from "../Satellite";
+import stl from "../styles/helpers/satellitePrefixer";
+import { uniqueId } from "../utils";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var DEFAULT_POPOVER_LOCALE = {
+  dismissText: "Dismiss"
+};
+export var POPOVER_ARROW_TEST_ID = "arrow";
+
+/**
+ * The `Popover` component is an interactive contextual overlay that provides additional content or actions.
+ *
+ * See the [Popover documentation page](https://satellite.algolia.com/components/overlay/popover) for more information.
+ */
+export var Popover = function Popover(_ref) {
+  var children = _ref.children,
+    title = _ref.title,
+    subtitle = _ref.subtitle,
+    content = _ref.content,
+    footer = _ref.footer,
+    open = _ref.open,
+    onDismiss = _ref.onDismiss,
+    _ref$side = _ref.side,
+    side = _ref$side === void 0 ? "top" : _ref$side,
+    _ref$sideOffset = _ref.sideOffset,
+    sideOffset = _ref$sideOffset === void 0 ? 0 : _ref$sideOffset,
+    _ref$align = _ref.align,
+    align = _ref$align === void 0 ? "center" : _ref$align,
+    _ref$alignOffset = _ref.alignOffset,
+    alignOffset = _ref$alignOffset === void 0 ? 0 : _ref$alignOffset,
+    _ref$noArrow = _ref.noArrow,
+    noArrow = _ref$noArrow === void 0 ? false : _ref$noArrow,
+    _ref$avoidCollisions = _ref.avoidCollisions,
+    avoidCollisions = _ref$avoidCollisions === void 0 ? true : _ref$avoidCollisions,
+    autoFocusOnOpenElement = _ref.autoFocusOnOpenElement,
+    propsLocale = _ref.locale,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var contextLocale = useLocale("popover");
+  var locale = _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_POPOVER_LOCALE), contextLocale), propsLocale);
+  var titleId = useMemo(function () {
+    return uniqueId("popover-title-");
+  }, []);
+  var isControlled = typeof open !== "undefined";
+  var triggerRef = useRef(null);
+  var createPortal = useCreatePortal();
+  if (children.type === Fragment) {
+    throw new Error("Popover component doesn't accept a Fragment as a child.");
+  }
+  return /*#__PURE__*/_jsxs(PopoverPrimitive.Root, {
+    open: open,
+    onOpenChange: function onOpenChange(open) {
+      if (!open) {
+        onDismiss === null || onDismiss === void 0 || onDismiss();
+      }
+    },
+    children: [/*#__PURE__*/_jsx(PopoverPrimitive.Trigger, {
+      ref: triggerRef,
+      asChild: true,
+      children: children
+    }), createPortal( /*#__PURE__*/_jsxs(PopoverPrimitive.Content, _objectSpread(_objectSpread({}, props), {}, {
+      "aria-labelledby": titleId,
+      className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["text-grey-900 bg-white z-popover shadow-z200 min-w-48 max-w-128 rounded typo-display-body animate-slide"]))), props.className),
+      side: side,
+      sideOffset: 8 + sideOffset,
+      align: align,
+      alignOffset: alignOffset,
+      avoidCollisions: avoidCollisions,
+      onOpenAutoFocus: function onOpenAutoFocus(e) {
+        if (autoFocusOnOpenElement === false) {
+          e.preventDefault();
+        } else if (autoFocusOnOpenElement instanceof HTMLElement) {
+          e.preventDefault();
+          autoFocusOnOpenElement.focus();
+        }
+      },
+      onInteractOutside: function onInteractOutside(e) {
+        var _triggerRef$current;
+        if (isControlled && (e.target === triggerRef.current || (_triggerRef$current = triggerRef.current) !== null && _triggerRef$current !== void 0 && _triggerRef$current.contains(e.target))) {
+          e.preventDefault();
+        }
+      },
+      onEscapeKeyDown: function onEscapeKeyDown(e) {
+        if (isControlled) {
+          e.preventDefault();
+          onDismiss === null || onDismiss === void 0 || onDismiss();
+        }
+      },
+      children: [/*#__PURE__*/_jsxs("div", {
+        className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["relative p-4 flex flex-col gap-2 overflow-auto min-h-20 max-h-[calc(var(--radix-popover-content-available-height)-theme(spacing.4))]"]))),
+        children: [/*#__PURE__*/_jsx("div", {
+          id: titleId,
+          className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["font-semibold pr-8"]))),
+          children: title
+        }), !!subtitle && /*#__PURE__*/_jsx("div", {
+          className: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["display-caption typo-subdued"]))),
+          children: subtitle
+        }), /*#__PURE__*/_jsx("div", {
+          className: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["typo-display-body"]))),
+          children: content
+        }), !!footer && /*#__PURE__*/_jsx("div", {
+          className: stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["mt-2"]))),
+          children: footer
+        }), /*#__PURE__*/_jsx(PopoverPrimitive.Close, {
+          className: stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["absolute top-2 right-2"]))),
+          asChild: true,
+          children: /*#__PURE__*/_jsx(IconButton, {
+            icon: XIcon,
+            title: locale.dismissText,
+            variant: "subtle",
+            showTooltip: false
+          })
+        })]
+      }), !noArrow && /*#__PURE__*/_jsx(PopoverPrimitive.Arrow, {
+        width: 16,
+        height: 8,
+        className: stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["arrow-light"])))
+      })]
+    })))]
+  });
+};

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

@@ -0,0 +1,2 @@
+export { Popover } from "./Popover";
+export * from "./types";

package/dist/esm/Popover/index.js

@@ -0,0 +1,2 @@
+export { Popover } from "./Popover";
+export * from "./types";

package/dist/esm/Popover/types.d.ts

@@ -0,0 +1,74 @@
+import type { PopoverContentProps } from "@radix-ui/react-popover";
+import type { HTMLAttributes, ReactElement, ReactNode } from "react";
+export declare type PopoverLocale = {
+    dismissText?: string;
+};
+export interface PopoverProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    /**
+     * Defines the trigger element of the `Popover`.
+     * It should be a button element.
+     */
+    children: ReactElement;
+    /**
+     * Defines the title of the `Popover`.
+     */
+    title: ReactNode;
+    /**
+     * Defines the subtitle of the `Popover`.
+     */
+    subtitle?: ReactNode;
+    /**
+     * Defines the content of the `Popover`.
+     */
+    content: ReactNode;
+    /**
+     * Defines the footer of the `Popover`.
+     */
+    footer?: ReactNode;
+    /**
+     * Defines whether the `Popover` should be opened or not.
+     */
+    open?: boolean;
+    /**
+     * Defines the event handler called when the `Popover` is dismissed.
+     */
+    onDismiss?: () => void;
+    /**
+     * Defines the side of the trigger element where the `Popover` should be displayed.
+     * Will be reversed when collisions occur and `avoidCollisions` is enabled.
+     * @default "top"
+     */
+    side?: PopoverContentProps["side"];
+    /**
+     * Defines the offset in pixels of the `Popover` from the trigger element.
+     */
+    sideOffset?: PopoverContentProps["sideOffset"];
+    /**
+     * Defines the preferred alignment of the `Popover` against the trigger element.
+     * May change when collisions occur.
+     */
+    align?: PopoverContentProps["align"];
+    /**
+     * Defines the offset in pixels of the `Popover` along the trigger element.
+     * It only works when the `align` option is set to "start" or "end".
+     */
+    alignOffset?: PopoverContentProps["alignOffset"];
+    /**
+     * Defines whether the `Popover` arrow should be hidden.
+     */
+    noArrow?: boolean;
+    /**
+     * Defines whether the `Popover` should avoid collisions with the viewport.
+     */
+    avoidCollisions?: boolean;
+    /**
+     * The element that should receive focus once the `Popover` is opened.
+     * If `undefined` or `null` is passed, the first focusable element will be focused.
+     * If `false`, no element will be focused.
+     */
+    autoFocusOnOpenElement?: HTMLElement | null | false;
+    /**
+     * Defines the locale of the `Popover`.
+     */
+    locale?: PopoverLocale;
+}

package/dist/esm/Popover/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/ProgressBar/ProgressBar.d.ts

@@ -0,0 +1,15 @@
+import { type HTMLAttributes } from "react";
+export interface ProgressBarProps extends HTMLAttributes<HTMLDivElement> {
+    /** The current value of the progress bar. */
+    value: number;
+    /** The maximum value of the progress bar. */
+    max?: number;
+    /** The className to apply to the bar element. */
+    barClassName?: string;
+}
+/**
+ * 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 declare const ProgressBar: import("react").ForwardRefExoticComponent<ProgressBarProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/esm/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/ProgressBar/ProgressBar.tailwind.d.ts

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

package/dist/esm/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/ProgressBar/index.d.ts

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

package/dist/esm/ProgressBar/index.js

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