@algolia/satellite 1.0.0-v3.99 → 1.1.0

package/dist/esm/Separator/Separator.tailwind.js

@@ -0,0 +1,53 @@
+import _plugin from "tailwindcss/plugin";
+// @ts-check
+var plugin = _plugin;
+var separatorPlugin = plugin(function (_ref) {
+  var addComponents = _ref.addComponents,
+    theme = _ref.theme;
+  var margin = theme("spacing.4");
+  addComponents({
+    ".separator": {
+      backgroundColor: theme("colors.grey.200"),
+      "&.interactive:hover": {
+        backgroundColor: theme("colors.xenon.600")
+      },
+      "&.interactive:focus": {
+        backgroundColor: theme("colors.xenon.600"),
+        outline: "solid 1px ".concat(theme("colors.xenon.600"))
+      },
+      '&[data-orientation="horizontal"]': {
+        height: "1px",
+        width: "100%",
+        margin: "".concat(margin, " 0"),
+        "&.interactive": {
+          position: "relative",
+          "&::after": {
+            position: "absolute",
+            right: "0px",
+            left: "0px",
+            top: "-10px",
+            height: "20px",
+            content: '" "'
+          }
+        }
+      },
+      '&[data-orientation="vertical"]': {
+        height: "100%",
+        width: "1px",
+        margin: "0 ".concat(margin),
+        "&.interactive": {
+          position: "relative",
+          "&::after": {
+            position: "absolute",
+            width: "20px",
+            left: "-10px",
+            top: "0px",
+            bottom: "0px",
+            content: '" "'
+          }
+        }
+      }
+    }
+  });
+});
+export default separatorPlugin;

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

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

package/dist/esm/Separator/index.js

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

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

@@ -0,0 +1,41 @@
+import type { ReactNode, VFC } from "react";
+import type { SidebarLocale, SidebarLocation, SidebarVariant } from "./types";
+export interface SidebarProps {
+    id?: string;
+    /** @ignore */
+    className?: string;
+    label?: string;
+    locale?: SidebarLocale;
+    collapsed?: boolean;
+    /**
+     * As the name of the variants imply,
+     * - `primary` should be used for your first level of navigation
+     * - `secondary` should be used for your second level of navigation
+     */
+    variant?: SidebarVariant;
+    /**
+     * Used to determine whether a link should be highlighted as "active"
+     * Ideally only one link should be shown as active at any given time.
+     *
+     * @example <caption>with a location of /foo/bar</caption>
+     * isLinkActive('/foo', location) // returns true
+     *
+     * @example <caption>with a location of /bar</caption>
+     * isLinkActive('/foo', location) // returns false
+     *
+     * */
+    isLinkActive?: (href: string, location: SidebarLocation) => boolean;
+    /**
+     * location is used in conjunction with `isLinkActive` to display active links properly.
+     * It is injected from outside so that it can work with different router libraries and
+     * re-render when necessary.
+     */
+    location: SidebarLocation;
+    children?: ReactNode;
+}
+/**
+ * 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 declare const Sidebar: VFC<SidebarProps>;

package/dist/esm/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 { useLocale } from "../Satellite";
+import { ScrollIndicator } from "../ScrollIndicator";
+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/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/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 stl from "../styles/helpers/satellitePrefixer";
+import { TooltipWrapper } from "../Tooltip";
+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/Sidebar/SidebarContext.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import type { SidebarVariant } from "./types";
+export declare type SidebarContextType = {
+    variant: SidebarVariant;
+    collapsed: boolean;
+    isLinkActive: (href: string) => boolean;
+};
+export declare const SidebarContext: import("react").Context<SidebarContextType | null>;
+export declare const useSidebarContext: () => SidebarContextType;

package/dist/esm/Sidebar/SidebarContext.js

@@ -0,0 +1,9 @@
+import { createContext, useContext } from "react";
+export var SidebarContext = /*#__PURE__*/createContext(null);
+export var useSidebarContext = function useSidebarContext() {
+  var context = useContext(SidebarContext);
+  if (!context) {
+    throw new Error("useSidebarContext used outside of Sidebar");
+  }
+  return context;
+};

package/dist/esm/Sidebar/SidebarHeader.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode, VFC } from "react";
+export declare type SidebarHeaderProps = {
+    /** @ignore */
+    className?: string;
+    children?: ReactNode;
+};
+export declare const SidebarHeader: VFC<SidebarHeaderProps>;

package/dist/esm/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/Sidebar/SidebarHeading.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode, VFC } from "react";
+export declare type SidebarHeadingProps = {
+    id?: string;
+    /** @ignore */
+    className?: string;
+    children: ReactNode;
+};
+export declare const SidebarHeading: VFC<SidebarHeadingProps>;

package/dist/esm/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/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/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"
+      })]
+    })]
+  }));
+};

package/dist/esm/Sidebar/SidebarLinksGroup/ActiveLinkIndicator.d.ts

@@ -0,0 +1,9 @@
+import type { VFC } from "react";
+declare type ActiveLinkIndicatorProps = {
+    /** @ignore */
+    className?: string;
+    activeIndex?: number;
+    linksCount: number;
+};
+export declare const ActiveLinkIndicator: VFC<ActiveLinkIndicatorProps>;
+export {};

package/dist/esm/Sidebar/SidebarLinksGroup/ActiveLinkIndicator.js

@@ -0,0 +1,30 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3;
+import cx from "clsx";
+import stl from "../../styles/helpers/satellitePrefixer";
+import { jsx as _jsx } from "react/jsx-runtime";
+var LINK_HEIGHT_PX = 24;
+var LINKS_SPACING_PX = 8;
+export var ActiveLinkIndicator = function ActiveLinkIndicator(_ref) {
+  var className = _ref.className,
+    activeIndex = _ref.activeIndex,
+    linksCount = _ref.linksCount;
+  var showIndicator = typeof activeIndex === "number" && activeIndex >= 0;
+  return /*#__PURE__*/_jsx("div", {
+    className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["w-4 flex justify-center"]))), className),
+    style: {
+      height: linksCount * LINK_HEIGHT_PX + (linksCount - 1) * LINKS_SPACING_PX
+    },
+    "aria-hidden": true,
+    children: /*#__PURE__*/_jsx("div", {
+      className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["w-px h-full bg-grey-200"]))),
+      children: /*#__PURE__*/_jsx("div", {
+        className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n            w-px bg-accent-500\n            motion-safe:transition-transform motion-safe:duration-100 ease-in-out\n            ", "\n          "])), showIndicator ? "visible" : "hidden"),
+        style: {
+          height: LINK_HEIGHT_PX,
+          transform: typeof activeIndex === "number" ? "translateY(".concat(activeIndex * (LINK_HEIGHT_PX + LINKS_SPACING_PX), "px)") : undefined
+        }
+      })
+    })
+  });
+};

package/dist/esm/Sidebar/SidebarLinksGroup/SidebarGroupLink.d.ts

@@ -0,0 +1,7 @@
+import type { VFC } from "react";
+import type { SidebarLinksGroupLink } from "./types";
+declare type LinkProps = SidebarLinksGroupLink & {
+    active: boolean;
+};
+export declare const SidebarGroupLink: VFC<LinkProps>;
+export {};

package/dist/esm/Sidebar/SidebarLinksGroup/SidebarGroupLink.js

@@ -0,0 +1,30 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+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 { ExternalLinkIcon } from "../../Icons";
+import stl from "../../styles/helpers/satellitePrefixer";
+import { useLinkProps } from "../../utils/useLinkProps";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export var SidebarGroupLink = function SidebarGroupLink(props) {
+  var label = props.label,
+    active = props.active,
+    id = props.id,
+    disabled = props.disabled;
+  var linkProps = useLinkProps(props);
+  var isExternalLink = linkProps.target === "_blank";
+  return /*#__PURE__*/_jsxs("a", _objectSpread(_objectSpread({}, linkProps), {}, {
+    id: id,
+    className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        inline-flex w-full items-center hover:no-underline focus:outline-none leading-md\n        ", "\n        ", ""])), disabled ? "cursor-not-allowed" : "cursor-pointer", disabled ? "text-grey-300" : active ? "font-semibold text-accent-600" : "typo-subdued hover:text-accent-600 focus:text-accent-600"),
+    "aria-current": active,
+    children: [/*#__PURE__*/_jsx("span", {
+      className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["truncate"]))),
+      children: label
+    }), isExternalLink && /*#__PURE__*/_jsx(ExternalLinkIcon, {
+      className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["ml-1 shrink-0"]))),
+      size: "1em"
+    })]
+  }));
+};

package/dist/esm/Sidebar/SidebarLinksGroup/SidebarLinksGroup.d.ts

@@ -0,0 +1,24 @@
+import type { ReactNode, VFC } from "react";
+import { type IconComponentType } from "../../Icons";
+import type { SidebarLinksGroupLink } from "./types";
+declare type SidebarLinksGroupBaseProps = {
+    id?: string;
+    /** @ignore */
+    className?: string;
+    links: SidebarLinksGroupLink[];
+};
+export declare type StaticSidebarLinksGroupProps = SidebarLinksGroupBaseProps & {
+    title?: never;
+    icon?: never;
+    initialIsOpen?: never;
+    onGroupToggle?: never;
+};
+export declare type CollapsibleSidebarLinksGroupProps = SidebarLinksGroupBaseProps & {
+    title: ReactNode;
+    icon: IconComponentType;
+    initialIsOpen?: boolean;
+    onGroupToggle?: (open: boolean) => void;
+};
+export declare type SidebarLinksGroupProps = StaticSidebarLinksGroupProps | CollapsibleSidebarLinksGroupProps;
+export declare const SidebarLinksGroup: VFC<SidebarLinksGroupProps>;
+export {};

package/dist/esm/Sidebar/SidebarLinksGroup/SidebarLinksGroup.js

@@ -0,0 +1,91 @@
+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, _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) { _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 uniqueId from "lodash/uniqueId";
+import { useEffect, useMemo, useState } from "react";
+import usePrevious from "react-use/lib/usePrevious";
+import { ChevronRightIcon } from "../../Icons";
+import stl from "../../styles/helpers/satellitePrefixer";
+import { useSidebarContext } from "../SidebarContext";
+import { ActiveLinkIndicator } from "./ActiveLinkIndicator";
+import { SidebarGroupLink } from "./SidebarGroupLink";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var isCollapsibleSidebarLinksGroupProps = function isCollapsibleSidebarLinksGroupProps(props) {
+  return "title" in props && "icon" in props;
+};
+export var SidebarLinksGroup = function SidebarLinksGroup(props) {
+  var _useSidebarContext = useSidebarContext(),
+    isLinkActive = _useSidebarContext.isLinkActive;
+  var id = props.id,
+    className = props.className,
+    links = props.links;
+  var contentId = useMemo(function () {
+    return uniqueId("links-group-");
+  }, []);
+  var activeLinkIndex = links.findIndex(function (link) {
+    return !link.disabled && isLinkActive(link.href);
+  });
+  var previousActiveLinkIndex = usePrevious(activeLinkIndex);
+  var hasMatchingLink = activeLinkIndex >= 0;
+  var _useState = useState(!isCollapsibleSidebarLinksGroupProps(props) || hasMatchingLink || props.initialIsOpen !== false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
+  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]);
+  useEffect(function () {
+    if (!isOpen && activeLinkIndex >= 0 && typeof previousActiveLinkIndex === "number" && activeLinkIndex !== previousActiveLinkIndex) {
+      setIsOpen(true);
+    }
+  }, [activeLinkIndex, previousActiveLinkIndex, isOpen]);
+  return /*#__PURE__*/_jsxs("div", {
+    id: id,
+    className: className,
+    children: [isCollapsibleSidebarLinksGroupProps(props) && /*#__PURE__*/_jsxs("button", {
+      className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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__*/_jsx(props.icon, {
+        className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["shrink-0 text-grey-500 mr-3"]))),
+        width: "1rem",
+        height: "1rem"
+      }), /*#__PURE__*/_jsx("span", {
+        className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["truncate display-subheading uppercase text-grey-800 group-focus:text-accent-500 group-hover:text-accent-500 mr-2"]))),
+        children: props.title
+      }), /*#__PURE__*/_jsx(ChevronRightIcon, {
+        className: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["shrink-0 text-grey-500 motion-safe:transition-all motion-safe:duration-150 ease-in-out ", ""])), isOpen && "rotate-90"),
+        size: "1rem"
+      })]
+    }), /*#__PURE__*/_jsxs("div", {
+      id: contentId,
+      className: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["flex ", ""])), !isOpen && "hidden"),
+      children: [/*#__PURE__*/_jsx(ActiveLinkIndicator, {
+        className: stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["shrink-0 mr-3"]))),
+        activeIndex: activeLinkIndex,
+        linksCount: links.length
+      }), /*#__PURE__*/_jsx("ul", {
+        className: stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["flex-1 space-y-2 overflow-hidden"]))),
+        children: links.map(function (link, idx) {
+          return /*#__PURE__*/_jsx("li", {
+            className: stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["overflow-hidden"]))),
+            children: /*#__PURE__*/_jsx(SidebarGroupLink, _objectSpread(_objectSpread({}, link), {}, {
+              active: activeLinkIndex === idx
+            }))
+          }, "".concat(idx, "-").concat(link.href));
+        })
+      })]
+    })]
+  });
+};

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

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

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

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

package/dist/esm/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/esm/Sidebar/SidebarLinksGroup/types.js

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

package/dist/esm/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>;