@algolia/satellite 1.1.0 → 1.1.2

package/dist/cjs/Navigation/Pagination/DotPagination/DotPagination.js

@@ -0,0 +1,50 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DotPagination = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _Satellite = require("../../../Satellite");
+var _satellitePrefixer = _interopRequireDefault(require("../../../styles/helpers/satellitePrefixer"));
+var _jsxRuntime = require("react/jsx-runtime");
+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) { (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_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.
+ */
+var DotPagination = exports.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 = (0, _Satellite.useLocale)("dotPagination");
+  var locale = _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_DOT_PAGINATION_LOCALE), contextLocale), propsLocale);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
+    className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["flex"]))),
+    children: new Array(nbPages).fill(undefined).map(function (_, idx) {
+      var pageIdx = idx + 1;
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+          "aria-label": locale.goToPageText(pageIdx),
+          className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\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/cjs/Navigation/Pagination/Pagination/Pagination.js

@@ -0,0 +1,116 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Pagination = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _Actions = require("../../../Actions");
+var _Icons = require("../../../Icons");
+var _Satellite = require("../../../Satellite");
+var _satellitePrefixer = _interopRequireDefault(require("../../../styles/helpers/satellitePrefixer"));
+var _range = require("../../../utils/range");
+var _jsxRuntime = require("react/jsx-runtime");
+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 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__*/(0, _jsxRuntime.jsx)(_Actions.Button, {
+    className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["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__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: group.map(function (index) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Actions.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.
+ */
+var Pagination = exports.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 = (0, _Satellite.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 = [[], (0, _range.range)(currentPageGroupStart, currentPageGroupEnd + 1), []];
+  if (currentPageGroupStart > 1) {
+    groups[0].push(1);
+  }
+  if (currentPageGroupEnd < nbPages) {
+    groups[2].push(nbPages);
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Actions.ButtonGroup, {
+    as: "nav",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Actions.Button, {
+      "aria-label": locale.goToPreviousPage,
+      disabled: currentPage === 1,
+      onClick: function onClick() {
+        return onChange(currentPage - 1);
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icons.ArrowLeftIcon, {
+        size: "1em"
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Group, {
+      currentPage: currentPage,
+      onChange: onChange,
+      group: groups[0],
+      goToPage: locale.goToPage
+    }), groups[0].length !== 0 && groups[1][0] - groups[0][0] > 1 && /*#__PURE__*/(0, _jsxRuntime.jsx)(Ellipsis, {}), /*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsx)(Ellipsis, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(Group, {
+      currentPage: currentPage,
+      onChange: onChange,
+      group: groups[2],
+      goToPage: locale.goToPage
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Actions.Button, {
+      "aria-label": locale.goToNextPage,
+      disabled: currentPage === nbPages,
+      onClick: function onClick() {
+        return onChange(currentPage + 1);
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icons.ArrowRightIcon, {
+        size: "1em"
+      })
+    })]
+  });
+};

package/dist/cjs/Navigation/Stepper/Step.js

@@ -0,0 +1,115 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Step = void 0;
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _react = require("react");
+var _Icons = require("../../Icons");
+var _satellitePrefixer = _interopRequireDefault(require("../../styles/helpers/satellitePrefixer"));
+var _getTextFromReactNode = require("../../utils/getTextFromReactNode");
+var _uniqueId = require("../../utils/uniqueId");
+var _StepperContext = require("./StepperContext");
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["className", "index", "icon", "label", "name", "completed", "disabled"];
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29;
+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 BUTTON_SIZE_CLASSNAMES = {
+  small: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["px-2.5 py-2"]))),
+  "default": (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["px-3 py-2.5"]))),
+  large: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["p-4"])))
+};
+var CONNECTOR_SIZE_CLASSNAMES = {
+  small: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["left-5 top-7"]))),
+  "default": (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["left-6 top-7"]))),
+  large: (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["left-8 top-8"])))
+};
+var ICON_SIZE_CLASSNAMES = {
+  small: (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["w-5 h-5"]))),
+  "default": (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["w-6 h-6"]))),
+  large: (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["w-8 h-8"])))
+};
+var ICON_SIZE = {
+  small: 12,
+  "default": 14,
+  large: 16
+};
+var CheckIconInternal = function CheckIconInternal(props) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icons.CheckIcon, _objectSpread({}, props));
+};
+var Step = exports.Step = function Step(_ref) {
+  var className = _ref.className,
+    index = _ref.index,
+    CustomIcon = _ref.icon,
+    label = _ref.label,
+    name = _ref.name,
+    completed = _ref.completed,
+    disabled = _ref.disabled,
+    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  var context = (0, _StepperContext.useStepperContext)();
+  var active = context.activeStep === index;
+  var stepName = (0, _getTextFromReactNode.getTextFromReactNode)(name);
+  var buttonId = (0, _react.useMemo)(function () {
+    return (0, _uniqueId.uniqueId)("stepper-step-");
+  }, []);
+  var locale = context.locale;
+  var disabledLocale = typeof locale.disabledStep === "function" ? locale.disabledStep(stepName) : locale.disabledStep;
+  var activeLocale = typeof locale.activeStep === "function" ? locale.activeStep(stepName) : locale.activeStep;
+  var completedLocale = typeof locale.completedStep === "function" ? locale.completedStep(stepName) : locale.completedStep;
+  var incompletedLocale = typeof locale.incompletedStep === "function" ? locale.incompletedStep(stepName) : locale.incompletedStep;
+  var Icon = CustomIcon;
+  if (completed) {
+    Icon = CheckIconInternal;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", _objectSpread(_objectSpread({}, props), {}, {
+    className: (0, _clsx["default"])(className, (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["text-grey-600 group/step"])))),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
+      id: buttonId,
+      className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["relative w-full flex items-center text-left gap-2 rounded border group/button"]))), (0, _satellitePrefixer["default"])(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["-outline-offset-2 focus-visible:outline focus-visible:outline-2 focus-visible:outline-xenon-600"]))), disabled ? (0, _satellitePrefixer["default"])(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["cursor-not-allowed"]))) : (0, _satellitePrefixer["default"])(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["hover:bg-grey-100"]))), active ? (0, _satellitePrefixer["default"])(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2["default"])(["border-grey-200 bg-white"]))) : (0, _satellitePrefixer["default"])(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2["default"])(["border-transparent"]))), BUTTON_SIZE_CLASSNAMES[context.size]),
+      "aria-label": disabled ? disabledLocale : active ? activeLocale : completed ? completedLocale : incompletedLocale,
+      "aria-current": active ? "step" : undefined,
+      disabled: disabled,
+      tabIndex: index === context.activeStep ? 0 : -1,
+      "data-step-idx": index,
+      onClick: function onClick() {
+        var _context$onStepChange;
+        return (_context$onStepChange = context.onStepChange) === null || _context$onStepChange === void 0 ? void 0 : _context$onStepChange.call(context, index);
+      },
+      onKeyDown: function onKeyDown(event) {
+        switch (event.key) {
+          case "Space":
+          case "Enter":
+            {
+              var _context$onStepChange2;
+              (_context$onStepChange2 = context.onStepChange) === null || _context$onStepChange2 === void 0 || _context$onStepChange2.call(context, index);
+              break;
+            }
+        }
+      },
+      children: [context.connectors && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2["default"])(["absolute -z-10 border-l h-full group-last/step:hidden"]))), completed ? (0, _satellitePrefixer["default"])(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2["default"])(["border-green-600"]))) : (0, _satellitePrefixer["default"])(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2["default"])(["border-grey-200"]))), CONNECTOR_SIZE_CLASSNAMES[context.size])
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2["default"])(["rounded-full flex items-center justify-center shrink-0 text-sm"]))), !active && !completed && (0, _satellitePrefixer["default"])(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteral2["default"])(["bg-grey-100"]))), !active && !completed && !disabled && (0, _satellitePrefixer["default"])(_templateObject22 || (_templateObject22 = (0, _taggedTemplateLiteral2["default"])(["group-hover/button:bg-white"]))), active && !completed && (0, _satellitePrefixer["default"])(_templateObject23 || (_templateObject23 = (0, _taggedTemplateLiteral2["default"])(["bg-grey-800 text-white"]))), completed && (0, _satellitePrefixer["default"])(_templateObject24 || (_templateObject24 = (0, _taggedTemplateLiteral2["default"])(["bg-green-600 text-white"]))), ICON_SIZE_CLASSNAMES[context.size]),
+        children: Icon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
+          width: ICON_SIZE[context.size],
+          height: ICON_SIZE[context.size]
+        }) : index + 1
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: (0, _clsx["default"])(disabled && (0, _satellitePrefixer["default"])(_templateObject25 || (_templateObject25 = (0, _taggedTemplateLiteral2["default"])(["text-grey-300"])))),
+        children: [!!label && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: (0, _satellitePrefixer["default"])(_templateObject26 || (_templateObject26 = (0, _taggedTemplateLiteral2["default"])(["text-sm line-clamp-1"]))),
+          children: label
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject27 || (_templateObject27 = (0, _taggedTemplateLiteral2["default"])(["text-base line-clamp-2"]))), (completed || active) && (0, _satellitePrefixer["default"])(_templateObject28 || (_templateObject28 = (0, _taggedTemplateLiteral2["default"])(["text-grey-900"]))), context.size === "small" && (0, _satellitePrefixer["default"])(_templateObject29 || (_templateObject29 = (0, _taggedTemplateLiteral2["default"])(["text-sm"])))),
+          children: name
+        })]
+      })]
+    })
+  }));
+};

package/dist/cjs/Navigation/Stepper/Stepper.js

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

package/dist/cjs/Navigation/Stepper/types.d.ts

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

package/dist/cjs/Navigation/Tabs/ContentTabs/ContentTabs.d.ts

@@ -0,0 +1,3 @@
+import type { VFC } from "react";
+import type { ContentTabsProps } from "../types";
+export declare const ContentTabs: VFC<ContentTabsProps>;

package/dist/cjs/Navigation/Tabs/ContentTabs/ContentTabs.js

@@ -0,0 +1,59 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ContentTabs = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _reactTabs = require("@radix-ui/react-tabs");
+var _clsx = _interopRequireDefault(require("clsx"));
+var _Indicators = require("../../../Indicators");
+var _satellitePrefixer = _interopRequireDefault(require("../../../styles/helpers/satellitePrefixer"));
+var _utils = require("../utils");
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var ContentTabs = exports.ContentTabs = function ContentTabs(_ref) {
+  var className = _ref.className,
+    tabs = _ref.tabs,
+    tabIndex = _ref.tabIndex,
+    _ref$defaultIndex = _ref.defaultIndex,
+    defaultIndex = _ref$defaultIndex === void 0 ? 0 : _ref$defaultIndex,
+    onChange = _ref.onChange;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactTabs.Tabs, {
+    value: typeof tabIndex !== "undefined" ? String(tabIndex) : undefined,
+    defaultValue: typeof defaultIndex !== "undefined" ? String(defaultIndex) : undefined,
+    onValueChange: function onValueChange(value) {
+      return onChange === null || onChange === void 0 ? void 0 : onChange(Number(value));
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactTabs.TabsList, {
+      className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["tabs-tabbar border-b border-grey-200 flex overflow-x-auto whitespace-nowrap space-x-6"]))), className),
+      children: tabs.map(function (_ref2, index) {
+        var _ref2$variant = _ref2.variant,
+          variant = _ref2$variant === void 0 ? "accent" : _ref2$variant,
+          className = _ref2.className,
+          disabled = _ref2.disabled,
+          label = _ref2.label,
+          value = _ref2.value;
+        return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactTabs.TabsTrigger, {
+          value: String(index),
+          disabled: disabled,
+          className: (0, _clsx["default"])(_utils.ACTIVE_UNDERLINE_VARIANT_CLASSNAMES[variant], (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["tab pb-3 text-base leading-sm"]))), className),
+          children: [label, !!value && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Indicators.Badge, {
+            size: "small",
+            variant: variant,
+            className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["ml-2"]))),
+            children: value
+          })]
+        }, index);
+      })
+    }), tabs.map(function (_ref3, index) {
+      var content = _ref3.content;
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactTabs.TabsContent, {
+        value: String(index),
+        className: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["focus:outline-none"]))),
+        children: content
+      }, index);
+    })]
+  });
+};

package/dist/cjs/Navigation/Tabs/LinkTabs/LinkTabs.d.ts

@@ -0,0 +1,9 @@
+import type { VFC } from "react";
+import type { LinkTabsProps, UrlMatcher } from "../types";
+export declare const defaultUrlMatcher: UrlMatcher;
+/**
+ * The `LinkTabs` component is an easy way to organize content by grouping similar information on the same page. Use it to help users navigate between related views within the same context, especially when the number of views may be more than 3.
+ *
+ * See the [Tabs documentation page](https://satellite.algolia.com/components/navigation/tabs) for more information.
+ */
+export declare const LinkTabs: VFC<LinkTabsProps>;

package/dist/cjs/Navigation/Tabs/LinkTabs/LinkTabs.js

@@ -0,0 +1,51 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultUrlMatcher = exports.LinkTabs = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _useLocation = _interopRequireDefault(require("react-use/lib/useLocation"));
+var _satellitePrefixer = _interopRequireDefault(require("../../../styles/helpers/satellitePrefixer"));
+var _matchLocation = require("../../../utils/matchLocation");
+var _LinkTab = require("../components/LinkTab");
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject;
+var defaultUrlMatcher = exports.defaultUrlMatcher = function defaultUrlMatcher(tab, location) {
+  return (0, _matchLocation.matchLocation)(tab.to, {
+    pathname: location.pathname || ""
+  });
+};
+
+/**
+ * The `LinkTabs` component is an easy way to organize content by grouping similar information on the same page. Use it to help users navigate between related views within the same context, especially when the number of views may be more than 3.
+ *
+ * See the [Tabs documentation page](https://satellite.algolia.com/components/navigation/tabs) for more information.
+ */
+var LinkTabs = exports.LinkTabs = function LinkTabs(_ref) {
+  var className = _ref.className,
+    tabs = _ref.tabs,
+    onTabClick = _ref.onTabClick,
+    _ref$urlMatcher = _ref.urlMatcher,
+    urlMatcher = _ref$urlMatcher === void 0 ? defaultUrlMatcher : _ref$urlMatcher;
+  var location = (0, _useLocation["default"])();
+  var tabIndex = tabs.findIndex(function (tab) {
+    return urlMatcher(tab, location);
+  });
+  tabIndex = tabIndex === -1 ? 0 : tabIndex;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("nav", {
+    role: "tablist",
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["tabs-tabbar border-b border-grey-200 flex overflow-x-auto whitespace-nowrap space-x-6"]))), className),
+    children: tabs.map(function (tab, index) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_LinkTab.LinkTab, {
+        tab: tab,
+        selected: index === tabIndex,
+        onClick: function onClick(evt) {
+          return onTabClick === null || onTabClick === void 0 ? void 0 : onTabClick(evt, tab);
+        }
+      }, tab.to);
+    })
+  });
+};