@algolia/satellite 1.0.0-v3.99 → 1.0.0

package/dist/cjs/Sidebar/SidebarLinksGroup/SidebarLinksGroup.js

@@ -0,0 +1,97 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SidebarLinksGroup = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _uniqueId = _interopRequireDefault(require("lodash/uniqueId"));
+var _react = require("react");
+var _usePrevious = _interopRequireDefault(require("react-use/lib/usePrevious"));
+var _Icons = require("../../Icons");
+var _satellitePrefixer = _interopRequireDefault(require("../../styles/helpers/satellitePrefixer"));
+var _SidebarContext = require("../SidebarContext");
+var _ActiveLinkIndicator = require("./ActiveLinkIndicator");
+var _SidebarGroupLink = require("./SidebarGroupLink");
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
+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 isCollapsibleSidebarLinksGroupProps = function isCollapsibleSidebarLinksGroupProps(props) {
+  return "title" in props && "icon" in props;
+};
+var SidebarLinksGroup = exports.SidebarLinksGroup = function SidebarLinksGroup(props) {
+  var _useSidebarContext = (0, _SidebarContext.useSidebarContext)(),
+    isLinkActive = _useSidebarContext.isLinkActive;
+  var id = props.id,
+    className = props.className,
+    links = props.links;
+  var contentId = (0, _react.useMemo)(function () {
+    return (0, _uniqueId["default"])("links-group-");
+  }, []);
+  var activeLinkIndex = links.findIndex(function (link) {
+    return !link.disabled && isLinkActive(link.href);
+  });
+  var previousActiveLinkIndex = (0, _usePrevious["default"])(activeLinkIndex);
+  var hasMatchingLink = activeLinkIndex >= 0;
+  var _useState = (0, _react.useState)(!isCollapsibleSidebarLinksGroupProps(props) || hasMatchingLink || props.initialIsOpen !== false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
+  (0, _react.useEffect)(function () {
+    if (isCollapsibleSidebarLinksGroupProps(props)) {
+      var _props$onGroupToggle;
+      (_props$onGroupToggle = props.onGroupToggle) === null || _props$onGroupToggle === void 0 || _props$onGroupToggle.call(props, isOpen);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isOpen]);
+  (0, _react.useEffect)(function () {
+    if (!isOpen && activeLinkIndex >= 0 && typeof previousActiveLinkIndex === "number" && activeLinkIndex !== previousActiveLinkIndex) {
+      setIsOpen(true);
+    }
+  }, [activeLinkIndex, previousActiveLinkIndex, isOpen]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    id: id,
+    className: className,
+    children: [isCollapsibleSidebarLinksGroupProps(props) && /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
+      className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n          flex w-full text-left items-center mb-4 overflow-hidden focus:outline-none group cursor-pointer"]))),
+      onClick: function onClick() {
+        return setIsOpen(!isOpen);
+      },
+      "aria-expanded": isOpen,
+      "aria-controls": contentId,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(props.icon, {
+        className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["shrink-0 text-grey-500 mr-3"]))),
+        width: "1rem",
+        height: "1rem"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["truncate display-subheading uppercase text-grey-800 group-focus:text-accent-500 group-hover:text-accent-500 mr-2"]))),
+        children: props.title
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icons.ChevronRightIcon, {
+        className: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["shrink-0 text-grey-500 motion-safe:transition-all motion-safe:duration-150 ease-in-out ", ""])), isOpen && "rotate-90"),
+        size: "1rem"
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      id: contentId,
+      className: (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["flex ", ""])), !isOpen && "hidden"),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ActiveLinkIndicator.ActiveLinkIndicator, {
+        className: (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["shrink-0 mr-3"]))),
+        activeIndex: activeLinkIndex,
+        linksCount: links.length
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
+        className: (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["flex-1 space-y-2 overflow-hidden"]))),
+        children: links.map(function (link, idx) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+            className: (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["overflow-hidden"]))),
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SidebarGroupLink.SidebarGroupLink, _objectSpread(_objectSpread({}, link), {}, {
+              active: activeLinkIndex === idx
+            }))
+          }, "".concat(idx, "-").concat(link.href));
+        })
+      })]
+    })]
+  });
+};

package/dist/cjs/Sidebar/SidebarLinksGroup/index.d.ts

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

package/dist/cjs/Sidebar/SidebarLinksGroup/index.js

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

package/dist/cjs/Sidebar/SidebarLinksGroup/types.d.ts

@@ -0,0 +1,10 @@
+import type { MouseEventHandler, ReactNode } from "react";
+export declare type SidebarLinksGroupLink = {
+    id?: string;
+    href: string;
+    target?: string;
+    rel?: string;
+    onClick?: MouseEventHandler<HTMLAnchorElement>;
+    disabled?: boolean;
+    label: ReactNode;
+};

package/dist/cjs/Sidebar/SidebarLinksGroup/types.js

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

package/dist/cjs/Sidebar/SidebarNav.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode, VFC } from "react";
+export declare type SidebarNavSpacing = "small" | "large";
+export declare type SidebarNavProps = {
+    id?: string;
+    /** @ignore */
+    className?: string;
+    spacing?: SidebarNavSpacing;
+    label: string;
+    children: ReactNode;
+};
+export declare const SidebarNav: VFC<SidebarNavProps>;

package/dist/cjs/Sidebar/SidebarNav.js

@@ -0,0 +1,36 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SidebarNav = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = require("react");
+var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
+var _SidebarContext = require("./SidebarContext");
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject;
+var SidebarNav = exports.SidebarNav = function SidebarNav(_ref) {
+  var id = _ref.id,
+    className = _ref.className,
+    spacingProp = _ref.spacing,
+    label = _ref.label,
+    children = _ref.children;
+  var _useSidebarContext = (0, _SidebarContext.useSidebarContext)(),
+    variant = _useSidebarContext.variant;
+  var spacing = typeof spacingProp === "string" ? spacingProp : variant === "primary" ? "small" : "large";
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("nav", {
+    id: id,
+    className: className,
+    "aria-label": label,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
+      className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["", ""])), spacing === "small" ? "space-y-2" : "px-3 space-y-8"),
+      children: _react.Children.map(children, function (child, index) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+          children: child
+        }, index);
+      })
+    })
+  });
+};

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

@@ -0,0 +1,9 @@
+export * from "./Sidebar";
+export * from "./SidebarButtonLink";
+export * from "./SidebarHeader";
+export * from "./SidebarHeading";
+export * from "./SidebarLink";
+export * from "./SidebarLinksGroup";
+export * from "./SidebarNav";
+export * from "./types";
+export { useSidebarContext } from "./SidebarContext";

package/dist/cjs/Sidebar/index.js

@@ -0,0 +1,111 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  useSidebarContext: true
+};
+Object.defineProperty(exports, "useSidebarContext", {
+  enumerable: true,
+  get: function get() {
+    return _SidebarContext.useSidebarContext;
+  }
+});
+var _Sidebar = require("./Sidebar");
+Object.keys(_Sidebar).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Sidebar[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Sidebar[key];
+    }
+  });
+});
+var _SidebarButtonLink = require("./SidebarButtonLink");
+Object.keys(_SidebarButtonLink).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _SidebarButtonLink[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _SidebarButtonLink[key];
+    }
+  });
+});
+var _SidebarHeader = require("./SidebarHeader");
+Object.keys(_SidebarHeader).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _SidebarHeader[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _SidebarHeader[key];
+    }
+  });
+});
+var _SidebarHeading = require("./SidebarHeading");
+Object.keys(_SidebarHeading).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _SidebarHeading[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _SidebarHeading[key];
+    }
+  });
+});
+var _SidebarLink = require("./SidebarLink");
+Object.keys(_SidebarLink).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _SidebarLink[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _SidebarLink[key];
+    }
+  });
+});
+var _SidebarLinksGroup = require("./SidebarLinksGroup");
+Object.keys(_SidebarLinksGroup).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _SidebarLinksGroup[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _SidebarLinksGroup[key];
+    }
+  });
+});
+var _SidebarNav = require("./SidebarNav");
+Object.keys(_SidebarNav).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _SidebarNav[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _SidebarNav[key];
+    }
+  });
+});
+var _types = require("./types");
+Object.keys(_types).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _types[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _types[key];
+    }
+  });
+});
+var _SidebarContext = require("./SidebarContext");

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

@@ -0,0 +1,6 @@
+export declare type SidebarVariant = "primary" | "secondary";
+export declare type SidebarLocation = Pick<Location, "pathname" | "hash" | "search">;
+export declare type SidebarLocale = {
+    primarySidebarLabel?: string;
+    secondarySidebarLabel?: string;
+};

package/dist/cjs/Sidebar/types.js

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

package/dist/cjs/Stepper/Step.d.ts

@@ -0,0 +1,6 @@
+import { type HTMLAttributes, type VFC } from "react";
+import type { BaseStep } from "./types";
+export declare type StepProps = BaseStep & HTMLAttributes<HTMLLIElement> & {
+    index: number;
+};
+export declare const Step: VFC<StepProps>;

package/dist/cjs/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 transition-colors 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 transition-colors"]))), !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/Stepper/Stepper.d.ts

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

package/dist/cjs/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/Stepper/StepperContext.d.ts

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