@algolia/satellite 1.1.0 → 1.1.1

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

@@ -0,0 +1,92 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var _excluded = ["content", "id", "autoDismissAfter"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import * as ToastPrimitive from "@radix-ui/react-toast";
+import { CSSTransition, TransitionGroup } from "react-transition-group";
+import { useCreatePortal, useLocale } from "../../Satellite";
+import stl from "../../styles/helpers/satellitePrefixer";
+import { prefersReducedMotion } from "../../utils/prefersReducedMotion";
+import { Toast } from "./Toast";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var DEFAULT_TOASTS_LOCALE = {
+  hotkeyLabel: "Notifications"
+};
+var TRANSITION_TIMEOUT = 500;
+
+/**
+ * Toasts are brief notifications that providing timely feedback to users before vanishing after a short duration.
+ *
+ * See the [Toast documentation page](https://satellite.algolia.com/components/feedback/toast) for more information.
+ */
+export var Toasts = function Toasts(_ref) {
+  var _ref$notifications = _ref.notifications,
+    notifications = _ref$notifications === void 0 ? [] : _ref$notifications,
+    propsLocale = _ref.locale;
+  var contextLocale = useLocale("toasts");
+  var locale = _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_TOASTS_LOCALE), contextLocale), propsLocale);
+  var createPortal = useCreatePortal();
+  if (process.env.NODE_ENV !== "production") {
+    if (notifications.length > 3) {
+      console.warn("Toasts: You should not display more than 3 toasts simultaneously.");
+    }
+    if (notifications.find(function (n) {
+      return n.autoDismissAfter && n.autoDismissAfter < 2000;
+    })) {
+      console.warn("Toasts: You should not set `autoDismissAfter` to less than 2000 ms, even for brief messages.");
+    }
+  }
+  return createPortal( /*#__PURE__*/_jsxs(ToastPrimitive.Provider, {
+    children: [/*#__PURE__*/_jsx(TransitionGroup, {
+      component: null,
+      children: notifications.map(function (_ref2) {
+        var content = _ref2.content,
+          id = _ref2.id,
+          autoDismissAfter = _ref2.autoDismissAfter,
+          rest = _objectWithoutProperties(_ref2, _excluded);
+        return /*#__PURE__*/_jsx(CSSTransition, {
+          classNames: !prefersReducedMotion ? {
+            enter: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["toasts_item-enter"]))),
+            enterActive: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["toasts_item-enter-active"]))),
+            exit: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["toasts_item-exit"]))),
+            exitActive: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["toasts_item-exit-active"])))
+          } : {},
+          timeout: !prefersReducedMotion ? TRANSITION_TIMEOUT : 0,
+          appear: true,
+          children: /*#__PURE__*/_jsx(ToastPrimitive.Root, {
+            open: true,
+            onOpenChange: function onOpenChange(open) {
+              var _rest$onDismiss;
+              if (!open) (_rest$onDismiss = rest.onDismiss) === null || _rest$onDismiss === void 0 || _rest$onDismiss.call(rest);
+            },
+            onSwipeEnd: function onSwipeEnd(e) {
+              return e.preventDefault();
+            } // Prevent swipe gesture
+            ,
+            duration: autoDismissAfter || Infinity,
+            // Accessibility issue from Radix: `role="status"` is not allowed on a `li` element, as a workaround,
+            // we use it on the child.
+            // See https://github.com/radix-ui/primitives/issues/1750
+            role: "listitem",
+            "aria-live": undefined,
+            "aria-atomic": undefined,
+            children: /*#__PURE__*/_jsx(Toast, _objectSpread(_objectSpread({}, rest), {}, {
+              role: "status",
+              "aria-live": "polite",
+              "aria-atomic": "true",
+              children: content
+            }))
+          })
+        }, id);
+      })
+    }), /*#__PURE__*/_jsx(ToastPrimitive.Viewport, {
+      hotkey: ["metaKey", "F8"],
+      label: "".concat(locale.hotkeyLabel, " (CmdKey+F8/WinKey+F8)}"),
+      className: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["z-notification bottom-0 right-0 fixed flex flex-col items-end p-4 gap-4"])))
+    })]
+  }));
+};

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

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

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

@@ -0,0 +1,10 @@
+export * from "./AnnouncementBadge";
+export * from "./Badge";
+export * from "./Banners";
+export * from "./EmptyState";
+export * from "./KeyboardKey";
+export * from "./ProgressBar";
+export * from "./ProgressSpinner";
+export * from "./ScrollIndicator";
+export * from "./Tag";
+export * from "./Toast";

package/dist/esm/Indicators/index.js

@@ -0,0 +1,10 @@
+export * from "./AnnouncementBadge";
+export * from "./Badge";
+export * from "./Banners";
+export * from "./EmptyState";
+export * from "./KeyboardKey";
+export * from "./ProgressBar";
+export * from "./ProgressSpinner";
+export * from "./ScrollIndicator";
+export * from "./Tag";
+export * from "./Toast";

package/dist/esm/Layout/Card/Card.js

@@ -0,0 +1,40 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _excluded = ["className", "as", "elevation", "fullBleed"];
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import cx from "clsx";
+import { createElement, forwardRef } from "react";
+import stl from "../../styles/helpers/satellitePrefixer";
+import { CardHeader } from "./components/CardHeader";
+import { CardTitle } from "./components/CardTitle";
+var ELEVATION_CLASSNAMES = {
+  "100": stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["card-z100"]))),
+  "200": stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["card-z200"]))),
+  "300": stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["card-z300"]))),
+  "400": stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["card-z400"]))),
+  "500": stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["card-z500"])))
+};
+/**
+ * The `Card` component is a useful for containing content within a page.
+ *
+ * See the [Card documentation page](https://satellite.algolia.com/layouts/card) for more information.
+ */
+export var Card = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    _ref$as = _ref.as,
+    as = _ref$as === void 0 ? "section" : _ref$as,
+    _ref$elevation = _ref.elevation,
+    elevation = _ref$elevation === void 0 ? "100" : _ref$elevation,
+    fullBleed = _ref.fullBleed,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/createElement(as, _objectSpread(_objectSpread({}, props), {}, {
+    ref: ref,
+    className: cx(stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["card ", " display-body"])), fullBleed && "card-fullbleed"), ELEVATION_CLASSNAMES[elevation], className)
+  }));
+});
+Card.displayName = "Card";
+Card.Header = CardHeader;
+Card.Title = CardTitle;

package/dist/esm/Layout/Card/components/CardHeader.js

@@ -0,0 +1,19 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _templateObject;
+var _excluded = ["className", "children"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import cx from "clsx";
+import stl from "../../../styles/helpers/satellitePrefixer";
+import { jsx as _jsx } from "react/jsx-runtime";
+export var CardHeader = function CardHeader(_ref) {
+  var className = _ref.className,
+    children = _ref.children,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({}, props), {}, {
+    className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["flex justify-between"]))), className),
+    children: children
+  }));
+};

package/dist/esm/Layout/Card/components/CardTitle.js

@@ -0,0 +1,21 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _templateObject;
+var _excluded = ["className", "children", "as"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import cx from "clsx";
+import stl from "../../../styles/helpers/satellitePrefixer";
+import { jsx as _jsx } from "react/jsx-runtime";
+export var CardTitle = function CardTitle(_ref) {
+  var className = _ref.className,
+    children = _ref.children,
+    _ref$as = _ref.as,
+    Heading = _ref$as === void 0 ? "h2" : _ref$as,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_jsx(Heading, _objectSpread(_objectSpread({}, props), {}, {
+    className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["typo-display-heading"]))), className),
+    children: children
+  }));
+};

package/dist/esm/Layout/FlexGrid/FlexGrid.js

@@ -0,0 +1,67 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22;
+// Heavily inspired by https://github.com/Shopify/polaris-react/blob/2b34f8609e9f08c1a767abea0a235bcc17706b63/src/components/Stack/Stack.tsx#L1
+import cx from "clsx";
+import { Children, isValidElement } from "react";
+import stl from "../../styles/helpers/satellitePrefixer";
+import { isRenderedChild } from "../../utils/isRenderedChild";
+import { jsx as _jsx } from "react/jsx-runtime";
+var SPACING_CLASSNAMES = {
+  none: "",
+  sm: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["flex-grid-sm"]))),
+  md: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["flex-grid-md"]))),
+  lg: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["flex-grid-lg"]))),
+  xl: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["flex-grid-xl"])))
+};
+var DIRECTION_CLASSNAMES = {
+  row: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["flex-row"]))),
+  column: stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["flex-col"])))
+};
+var ALIGNMENT_CLASSNAMES = {
+  leading: stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["items-start"]))),
+  center: stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["items-center"]))),
+  trailing: stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["items-end"]))),
+  fill: stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["items-stretch"]))),
+  baseline: stl(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["items-baseline"])))
+};
+var DISTRIBUTION_CLASSNAMES = {
+  leading: stl(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["justify-start"]))),
+  trailing: stl(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["justify-end"]))),
+  center: stl(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["justify-center"]))),
+  equalSpacing: stl(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["justify-between"]))),
+  fill: stl(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["flex-grid-d-fill"]))),
+  fillEvenly: stl(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["flex-grid-d-fill-even"])))
+};
+
+/**
+ * The `FlexGrid` component is a wrapper component that allows you to easily create a flexbox layout.
+ *
+ * See the [Flex Grid documentation page](https://satellite.algolia.com/layouts/flex-grid) for more information.
+ */
+export var FlexGrid = function FlexGrid(_ref) {
+  var className = _ref.className,
+    _ref$direction = _ref.direction,
+    direction = _ref$direction === void 0 ? "row" : _ref$direction,
+    _ref$alignment = _ref.alignment,
+    alignment = _ref$alignment === void 0 ? "leading" : _ref$alignment,
+    _ref$distribution = _ref.distribution,
+    distribution = _ref$distribution === void 0 ? "leading" : _ref$distribution,
+    _ref$spacing = _ref.spacing,
+    spacing = _ref$spacing === void 0 ? "none" : _ref$spacing,
+    _ref$inline = _ref.inline,
+    inline = _ref$inline === void 0 ? false : _ref$inline,
+    _ref$wrap = _ref.wrap,
+    wrap = _ref$wrap === void 0 ? false : _ref$wrap,
+    children = _ref.children;
+  return /*#__PURE__*/_jsx("div", {
+    className: cx(inline && stl(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["flex-grid-inline"]))), className),
+    children: /*#__PURE__*/_jsx("div", {
+      className: cx(stl(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["flex-grid-inner"]))), inline ? stl(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["inline-flex"]))) : stl(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["flex"]))), wrap && stl(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["flex-wrap"]))), SPACING_CLASSNAMES[spacing], DIRECTION_CLASSNAMES[direction], ALIGNMENT_CLASSNAMES[alignment], DISTRIBUTION_CLASSNAMES[distribution]),
+      children: Children.map(children, function (child) {
+        return /*#__PURE__*/isValidElement(child) ? child : isRenderedChild(child) ? /*#__PURE__*/_jsx("span", {
+          children: child
+        }) : child;
+      })
+    })
+  });
+};

package/dist/esm/Layout/Insert/Insert.d.ts

@@ -0,0 +1,19 @@
+import type { ReactNode, VFC } from "react";
+import type { BadgeVariants } from "../../Indicators";
+declare type InsertContext = {
+    label: string;
+    variant?: BadgeVariants;
+};
+export interface InsertProps {
+    /** Descriptive title for the `Insert` */
+    title: ReactNode;
+    contexts?: Array<string | InsertContext>;
+    children: ReactNode;
+}
+/**
+ * The `Insert` component is used to give extra information to the user about the flow they are in or to highlight and define some terms used.
+ *
+ * See the [Insert documentation page](https://satellite.algolia.com/layouts/insert) for more information.
+ */
+export declare const Insert: VFC<InsertProps>;
+export {};

package/dist/esm/Layout/Insert/Insert.js

@@ -0,0 +1,44 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+import { Badge } from "../../Indicators";
+import stl from "../../styles/helpers/satellitePrefixer";
+import { onlyText } from "../../utils/onlyText";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The `Insert` component is used to give extra information to the user about the flow they are in or to highlight and define some terms used.
+ *
+ * See the [Insert documentation page](https://satellite.algolia.com/layouts/insert) for more information.
+ */
+export var Insert = function Insert(_ref) {
+  var title = _ref.title,
+    contexts = _ref.contexts,
+    children = _ref.children;
+  return /*#__PURE__*/_jsxs("aside", {
+    "aria-label": onlyText(title),
+    className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["inline-flex flex-col self-start p-4 bg-grey-100 rounded"]))),
+    children: [contexts ? /*#__PURE__*/_jsx("span", {
+      className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["block space-x-2 mb-4"]))),
+      children: contexts.map(function (context, idx) {
+        var _ref2 = typeof context === "string" ? {
+            label: context
+          } : context,
+          label = _ref2.label,
+          _ref2$variant = _ref2.variant,
+          variant = _ref2$variant === void 0 ? "grey" : _ref2$variant;
+        return /*#__PURE__*/_jsx(Badge, {
+          variant: variant,
+          children: label
+        }, idx);
+      })
+    }) : null, /*#__PURE__*/_jsxs("div", {
+      children: [/*#__PURE__*/_jsx("p", {
+        className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["display-heading mb-2"]))),
+        children: title
+      }), /*#__PURE__*/_jsx("span", {
+        className: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["display-body typo-subdued"]))),
+        children: children
+      })]
+    })]
+  });
+};

package/dist/esm/Layout/Sidebar/Sidebar.js

@@ -0,0 +1,60 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _templateObject, _templateObject2, _templateObject3;
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import cx from "clsx";
+import { useCallback } from "react";
+import { ScrollIndicator } from "../../Indicators";
+import { useLocale } from "../../Satellite";
+import stl from "../../styles/helpers/satellitePrefixer";
+import { matchLocation } from "../../utils/matchLocation";
+import { SidebarContext } from "./SidebarContext";
+import { jsx as _jsx } from "react/jsx-runtime";
+var DEFAULT_SIDEBAR_LOCALE = {
+  primarySidebarLabel: "Primary Navigation Sidebar",
+  secondarySidebarLabel: "Secondary Navigation Sidebar"
+};
+
+/**
+ * The `Sidebar` component is used to display a sidebar of links.
+ *
+ * See the [Sidebar documentation page](https://satellite.algolia.com/layouts/sidebar) for more information.
+ */
+export var Sidebar = function Sidebar(_ref) {
+  var id = _ref.id,
+    className = _ref.className,
+    labelProp = _ref.label,
+    localeProp = _ref.locale,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? "primary" : _ref$variant,
+    _ref$collapsed = _ref.collapsed,
+    collapsed = _ref$collapsed === void 0 ? false : _ref$collapsed,
+    _ref$isLinkActive = _ref.isLinkActive,
+    isLinkActiveProp = _ref$isLinkActive === void 0 ? matchLocation : _ref$isLinkActive,
+    location = _ref.location,
+    children = _ref.children;
+  var isLinkActive = useCallback(function (href) {
+    return isLinkActiveProp(href, location);
+  }, [isLinkActiveProp, location]);
+  var contextLocale = useLocale("sidebar");
+  var locale = _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_SIDEBAR_LOCALE), contextLocale), localeProp);
+  var label = typeof labelProp === "string" ? labelProp : variant === "primary" ? locale.primarySidebarLabel : locale.secondarySidebarLabel;
+  return /*#__PURE__*/_jsx(SidebarContext.Provider, {
+    value: {
+      collapsed: collapsed,
+      variant: variant,
+      isLinkActive: isLinkActive
+    },
+    children: /*#__PURE__*/_jsx("aside", {
+      id: id,
+      "aria-label": label,
+      className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n            display-body border-r border-grey-200/50\n            ", "\n            ", "\n          "])), collapsed ? "w-14" : "w-56", variant === "primary" ? "bg-grey-100" : "bg-white"), className),
+      children: /*#__PURE__*/_jsx(ScrollIndicator, {
+        wrapperClassName: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["h-full -mr-px"]))),
+        className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["relative px-3 pb-7 flex flex-col no-scrollbar overflow-x-hidden"]))),
+        children: children
+      })
+    })
+  });
+};

package/dist/esm/Layout/Sidebar/SidebarButtonLink.d.ts

@@ -0,0 +1,20 @@
+import type { MouseEventHandler, ReactNode, VFC } from "react";
+import type { IconComponentType } from "../../Icons";
+export declare type SidebarButtonLinkIcon = IconComponentType | {
+    active: IconComponentType;
+    inactive: IconComponentType;
+};
+export interface SidebarButtonLinkProps {
+    id?: string;
+    icon: SidebarButtonLinkIcon;
+    href: string;
+    onClick?: MouseEventHandler<HTMLAnchorElement>;
+    disabled?: boolean;
+    /**
+     * Alternative content for the tooltip.
+     * @default children
+     */
+    tooltipContent?: ReactNode;
+    children: ReactNode;
+}
+export declare const SidebarButtonLink: VFC<SidebarButtonLinkProps>;

package/dist/esm/Layout/Sidebar/SidebarButtonLink.js

@@ -0,0 +1,78 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { useState } from "react";
+import { ExternalLinkIcon } from "../../Icons";
+import { TooltipWrapper } from "../../Overlay";
+import stl from "../../styles/helpers/satellitePrefixer";
+import { useLinkProps } from "../../utils/useLinkProps";
+import { useSidebarContext } from "./SidebarContext";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var Tooltip = function Tooltip(_ref) {
+  var content = _ref.content,
+    children = _ref.children;
+  return /*#__PURE__*/_jsx(TooltipWrapper, {
+    side: "right",
+    sideOffset: 24,
+    delay: 0,
+    hideDelay: 0,
+    content: content,
+    interactive: false,
+    children: children
+  });
+};
+export var SidebarButtonLink = function SidebarButtonLink(props) {
+  var id = props.id,
+    icon = props.icon,
+    href = props.href,
+    disabled = props.disabled,
+    children = props.children;
+  var _useSidebarContext = useSidebarContext(),
+    isLinkActive = _useSidebarContext.isLinkActive,
+    collapsed = _useSidebarContext.collapsed;
+  var linkProps = useLinkProps(props);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isInteractedWith = _useState2[0],
+    setIsInteractedWith = _useState2[1];
+  var isExternalLink = linkProps.target === "_blank";
+  var isActive = !disabled && !isExternalLink && isLinkActive(href);
+  var showColors = !disabled && (isActive || isInteractedWith);
+  var Icon = "active" in icon ? showColors ? icon.active : icon.inactive : icon;
+  var tooltipContent = "tooltipContent" in props ? props.tooltipContent : children;
+  return /*#__PURE__*/_jsx(Tooltip, {
+    content: collapsed ? tooltipContent : null,
+    children: /*#__PURE__*/_jsxs("a", _objectSpread(_objectSpread({}, linkProps), {}, {
+      id: id,
+      onMouseEnter: function onMouseEnter() {
+        return setIsInteractedWith(true);
+      },
+      onFocus: function onFocus() {
+        return setIsInteractedWith(true);
+      },
+      onMouseLeave: function onMouseLeave() {
+        return setIsInteractedWith(false);
+      },
+      onBlur: function onBlur() {
+        return setIsInteractedWith(false);
+      },
+      className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n          h-8 min-w-8 w-full rounded\n          flex items-center space-x-3\n          border border-transparent\n          display-body\n          hover:no-underline focus:no-underline\n          ", "\n          ", "\n          ", "\n          ", "\n        "])), disabled ? "cursor-not-allowed opacity-70" : "focus:border-grey-500", isActive ? "shadow-z100" : !disabled && "hover:border-grey-200", isActive && "bg-gradient-to-b from-white to-grey-50", collapsed ? "pl-2" : "px-2"),
+      "aria-current": isActive,
+      children: [/*#__PURE__*/_jsx(Icon, {
+        className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["", " ml-[-3px] shrink-0"])), showColors ? "text-accent-600" : "text-grey-400"),
+        height: 20,
+        width: 20
+      }), /*#__PURE__*/_jsx("span", {
+        className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n            truncate\n            ", "\n            ", "\n            ", "\n          "])), collapsed && "sr-only", showColors ? "text-accent-600" : "typo-subdued", isActive && "font-bold"),
+        children: children
+      }), isExternalLink && !collapsed && /*#__PURE__*/_jsx(ExternalLinkIcon, {
+        className: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["", " !ml-1 shrink-0"])), showColors ? "text-accent-600" : "typo-subdued"),
+        size: "1em"
+      })]
+    }))
+  });
+};

package/dist/esm/Layout/Sidebar/SidebarHeader.js

@@ -0,0 +1,13 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject;
+import cx from "clsx";
+import stl from "../../styles/helpers/satellitePrefixer";
+import { jsx as _jsx } from "react/jsx-runtime";
+export var SidebarHeader = function SidebarHeader(_ref) {
+  var className = _ref.className,
+    children = _ref.children;
+  return /*#__PURE__*/_jsx("header", {
+    className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["h-[72px] shrink-0 border-b border-grey-200/50"]))), className),
+    children: children
+  });
+};

package/dist/esm/Layout/Sidebar/SidebarHeading.js

@@ -0,0 +1,18 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject;
+import cx from "clsx";
+import stl from "../../styles/helpers/satellitePrefixer";
+import { useSidebarContext } from "./SidebarContext";
+import { jsx as _jsx } from "react/jsx-runtime";
+export var SidebarHeading = function SidebarHeading(_ref) {
+  var id = _ref.id,
+    className = _ref.className,
+    children = _ref.children;
+  var _useSidebarContext = useSidebarContext(),
+    collapsed = _useSidebarContext.collapsed;
+  return /*#__PURE__*/_jsx("span", {
+    id: id,
+    className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n          h-8 block leading-[2rem]\n          display-subheading typo-subdued uppercase select-none truncate\n          ", "\n        "])), collapsed && "opacity-0"), className),
+    children: children
+  });
+};

package/dist/esm/Layout/Sidebar/SidebarLink.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode, VFC } from "react";
+import type { IconComponentType } from "../../Icons";
+export declare type SidebarLinkProps = {
+    icon: IconComponentType;
+    href: string;
+    disabled?: boolean;
+    children: ReactNode;
+} & Pick<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "id" | "className" | "target" | "rel" | "aria-label" | "onClick">;
+export declare const SidebarLink: VFC<SidebarLinkProps>;

package/dist/esm/Layout/Sidebar/SidebarLink.js

@@ -0,0 +1,44 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import cx from "clsx";
+import { ExternalLinkIcon } from "../../Icons";
+import stl from "../../styles/helpers/satellitePrefixer";
+import { useLinkProps } from "../../utils/useLinkProps";
+import { useSidebarContext } from "./SidebarContext";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export var SidebarLink = function SidebarLink(props) {
+  var _linkProps$href;
+  var _useSidebarContext = useSidebarContext(),
+    isLinkActive = _useSidebarContext.isLinkActive;
+  var id = props.id,
+    className = props.className,
+    disabled = props.disabled,
+    Icon = props.icon,
+    children = props.children;
+  var linkProps = useLinkProps(props);
+  var isExternalLink = linkProps.target === "_blank";
+  var isActive = !disabled && !isExternalLink && isLinkActive((_linkProps$href = linkProps.href) !== null && _linkProps$href !== void 0 ? _linkProps$href : "");
+  return /*#__PURE__*/_jsxs("a", _objectSpread(_objectSpread({}, linkProps), {}, {
+    id: id,
+    className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n          flex items-center overflow-hidden w-full\n          group hover:no-underline focus:outline-none\n          ", "\n        "])), disabled ? "cursor-not-allowed" : "cursor-pointer"), className),
+    "aria-current": isActive,
+    children: [/*#__PURE__*/_jsx(Icon, {
+      className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["shrink-0 mr-3 ", ""])), disabled ? "text-grey-300" : "text-grey-500"),
+      width: "1rem",
+      height: "1rem"
+    }), /*#__PURE__*/_jsxs("span", {
+      className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n          flex-1 inline-flex items-center overflow-hidden\n          ", ""])), disabled ? "text-grey-300" : isActive ? "font-semibold text-accent-600" : "typo-subdued group-focus:text-accent-600 group-hover:text-accent-600"),
+      children: [/*#__PURE__*/_jsx("span", {
+        className: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["truncate"]))),
+        children: children
+      }), isExternalLink && /*#__PURE__*/_jsx(ExternalLinkIcon, {
+        className: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["shrink-0 ml-1 ", ""])), disabled ? "text-grey-300" : "text-grey-500 group-focus:text-accent-600 group-hover:text-accent-600"),
+        size: "1em"
+      })]
+    })]
+  }));
+};