@algolia/satellite 1.0.0-beta.16 → 1.0.0-beta.160

package/cjs/ScrollIndicator/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {};
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _ScrollIndicator["default"];
+  }
+});
+var _ScrollIndicator = _interopRequireWildcard(require("./ScrollIndicator"));
+Object.keys(_ScrollIndicator).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _ScrollIndicator[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _ScrollIndicator[key];
+    }
+  });
+});
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

package/cjs/Select/Select.d.ts

@@ -0,0 +1,15 @@
+import type { SelectHTMLAttributes } from "react";
+export declare type SelectVariants = "small" | "medium" | "large";
+export interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
+    variant?: SelectVariants;
+}
+/**
+ * Select lets users choose one option from an options menu. Consider select when you have 3 or more options, to avoid cluttering the interface.
+ *
+ * ## Usability best practices
+ * - Use for selecting between 3 or more predefined options (consider radio buttons for less than 3 options)
+ * - Have a default option selected whenever possible
+ * - Use `Select` as a placeholder option only if there's no logical default option
+ */
+export declare const Select: import("react").ForwardRefExoticComponent<SelectProps & import("react").RefAttributes<HTMLSelectElement>>;
+export default Select;

package/cjs/Select/Select.js

@@ -0,0 +1,46 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Select = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _react = require("react");
+var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["variant", "className"];
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var VARIANT_CLASSNAMES = {
+  small: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["select-input-small"]))),
+  medium: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["select-input-medium"]))),
+  large: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["select-input-large"])))
+};
+
+/**
+ * Select lets users choose one option from an options menu. Consider select when you have 3 or more options, to avoid cluttering the interface.
+ *
+ * ## Usability best practices
+ * - Use for selecting between 3 or more predefined options (consider radio buttons for less than 3 options)
+ * - Have a default option selected whenever possible
+ * - Use `Select` as a placeholder option only if there's no logical default option
+ */
+var Select = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? "medium" : _ref$variant,
+    className = _ref.className,
+    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("select", _objectSpread(_objectSpread({}, props), {}, {
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["select-input display-body"]))), VARIANT_CLASSNAMES[variant], className),
+    ref: ref
+  }));
+});
+exports.Select = Select;
+Select.displayName = "Select";
+var _default = Select;
+exports["default"] = _default;

package/cjs/Select/Select.tailwind.d.ts

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

package/cjs/Select/Select.tailwind.js

@@ -0,0 +1,76 @@
+"use strict";
+
+// @ts-check
+var plugin = require("tailwindcss/plugin");
+var disabledColor = require("../styles/disabledColor");
+var _require = require("../styles/helpers/icons"),
+  selectIconBG = _require.selectIconBG;
+var selectPlugin = plugin(function (_ref) {
+  var addComponents = _ref.addComponents,
+    theme = _ref.theme;
+  addComponents({
+    // I chose .select-input to avoid name collision with tailwindcss.com/docs/user-select/
+    ".select-input": {
+      appearance: "none",
+      outline: "none",
+      cursor: "pointer",
+      position: "relative",
+      padding: "0 ".concat(theme("spacing.10"), " 0 ").concat(theme("spacing.4")),
+      width: "100%",
+      color: theme("colors.grey.900"),
+      backgroundColor: theme("colors.white"),
+      backgroundImage: "\n        ".concat(selectIconBG(theme("colors.grey.500")), ",\n        linear-gradient(-180deg, ").concat(theme("colors.white"), " 0%, ").concat(theme("colors.grey.50"), " 100%)\n      "),
+      backgroundPosition: "right ".concat(theme("spacing.4"), " center, 0 0"),
+      backgroundRepeat: "no-repeat",
+      borderRadius: theme("borderRadius.DEFAULT"),
+      border: "1px solid ".concat(theme("colors.grey.200")),
+      boxShadow: "0 1px 0 0 ".concat(theme("colors.shadow.5")),
+      "&::-moz-focus-inner, &:-moz-focusring": {
+        outline: "none",
+        color: "transparent",
+        textShadow: "0 0 0 ".concat(theme("colors.grey.900"))
+      },
+      "&:focus::-ms-value": {
+        color: theme("colors.grey.900")
+      },
+      "& > option": {
+        textShadow: "none",
+        "&:not(:checked)": {
+          color: theme("colors.grey.900")
+        },
+        "&:disabled": {
+          color: theme("colors.grey.300")
+        }
+      },
+      "&:hover": {
+        backgroundImage: "\n          ".concat(selectIconBG(theme("colors.grey.500")), ",\n          linear-gradient(-180deg, ").concat(theme("colors.grey.50"), " 0%, ").concat(theme("colors.grey.100"), " 100%)\n        "),
+        borderColor: theme("colors.grey.200")
+      },
+      "&:focus": {
+        backgroundImage: "\n          ".concat(selectIconBG(theme("colors.grey.500")), ",\n          linear-gradient(-180deg, ").concat(theme("colors.white"), " 0%, ").concat(theme("colors.grey.100"), " 100%)\n        "),
+        borderColor: theme("colors.accent.600"),
+        boxShadow: "\n          0 0 0 1px ".concat(theme("colors.accent.600"), ",\n          0 2px 0 0 ").concat(theme("colors.shadow.5"), "\n        ")
+      },
+      "&:disabled": {
+        cursor: "not-allowed",
+        color: theme("colors.grey.300"),
+        backgroundImage: "\n          ".concat(selectIconBG(theme("colors.grey.300")), ",\n          linear-gradient(-180deg, ").concat(theme("colors.white"), " 0%, ").concat(theme("colors.grey.100"), " 100%)\n        "),
+        borderColor: disabledColor(theme("colors.grey.200")),
+        boxShadow: "none"
+      }
+    },
+    ".select-input-small": {
+      height: theme("spacing.8"),
+      backgroundSize: "8px, auto"
+    },
+    ".select-input-medium": {
+      height: theme("spacing.10"),
+      backgroundSize: "10px, auto"
+    },
+    ".select-input-large": {
+      height: theme("spacing.12"),
+      backgroundSize: "12px, auto"
+    }
+  });
+});
+module.exports = selectPlugin;

package/cjs/Select/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {};
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _Select["default"];
+  }
+});
+var _Select = _interopRequireWildcard(require("./Select"));
+Object.keys(_Select).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Select[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Select[key];
+    }
+  });
+});
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

package/cjs/Sidebar/Sidebar.d.ts

@@ -0,0 +1,35 @@
+import type { FC, ReactNode } from "react";
+import type { SidebarLocale, SidebarLocation, SidebarVariant } from "./types";
+export interface SidebarProps {
+    id?: string;
+    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;
+}
+export declare const Sidebar: FC<SidebarProps>;

package/cjs/Sidebar/Sidebar.js

@@ -0,0 +1,62 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Sidebar = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _react = require("react");
+var _Satellite = require("../Satellite");
+var _ScrollIndicator = _interopRequireDefault(require("../ScrollIndicator"));
+var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
+var _matchLocation = _interopRequireDefault(require("../utils/matchLocation"));
+var _SidebarContext = require("./SidebarContext");
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject, _templateObject2, _templateObject3;
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var DEFAULT_SIDEBAR_LOCALE = {
+  primarySidebarLabel: "Primary Navigation Sidebar",
+  secondarySidebarLabel: "Secondary Navigation Sidebar"
+};
+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["default"] : _ref$isLinkActive,
+    location = _ref.location,
+    children = _ref.children;
+  var isLinkActive = (0, _react.useCallback)(function (href) {
+    return isLinkActiveProp(href, location);
+  }, [isLinkActiveProp, location]);
+  var contextLocale = (0, _Satellite.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__*/(0, _jsxRuntime.jsx)(_SidebarContext.SidebarContext.Provider, {
+    value: {
+      collapsed: collapsed,
+      variant: variant,
+      isLinkActive: isLinkActive
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("aside", {
+      id: id,
+      "aria-label": label,
+      className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\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__*/(0, _jsxRuntime.jsx)(_ScrollIndicator["default"], {
+        wrapperClassName: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["h-full -mr-px"]))),
+        className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["relative px-3 pb-7 flex flex-col no-scrollbar overflow-x-hidden"]))),
+        children: children
+      })
+    })
+  });
+};
+exports.Sidebar = Sidebar;

package/cjs/Sidebar/SidebarButtonLink.d.ts

@@ -0,0 +1,20 @@
+import type { FC, MouseEventHandler, ReactNode } from "react";
+import type { IconComponentType } from "../types";
+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: FC<SidebarButtonLinkProps>;

package/cjs/Sidebar/SidebarButtonLink.js

@@ -0,0 +1,91 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SidebarButtonLink = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = require("react");
+var _reactFeather = require("react-feather");
+var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
+var _Tooltip = require("../Tooltip");
+var _useLinkProps = _interopRequireDefault(require("../utils/useLinkProps"));
+var _SidebarContext = require("./SidebarContext");
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var Tooltip = function Tooltip(_ref) {
+  var content = _ref.content,
+    children = _ref.children;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.TooltipWrapper, {
+    placement: "right",
+    delay: 0,
+    hideDelay: 0,
+    modifiers: [{
+      name: "offset",
+      options: {
+        offset: [0, 32]
+      }
+    }],
+    content: content,
+    wrapperClassName: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["block"]))),
+    interactive: false,
+    children: children
+  });
+};
+var SidebarButtonLink = function SidebarButtonLink(props) {
+  var id = props.id,
+    icon = props.icon,
+    href = props.href,
+    disabled = props.disabled,
+    children = props.children;
+  var _useSidebarContext = (0, _SidebarContext.useSidebarContext)(),
+    isLinkActive = _useSidebarContext.isLinkActive,
+    collapsed = _useSidebarContext.collapsed;
+  var linkProps = (0, _useLinkProps["default"])(props);
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_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__*/(0, _jsxRuntime.jsx)(Tooltip, {
+    content: collapsed ? tooltipContent : null,
+    children: /*#__PURE__*/(0, _jsxRuntime.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: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\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__*/(0, _jsxRuntime.jsx)(Icon, {
+        className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["", " ml-[-3px]"])), showColors ? "text-accent-600" : "text-grey-400"),
+        height: 20,
+        width: 20
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n            ", "\n            ", "\n            ", "\n          "])), collapsed && "sr-only", showColors ? "text-accent-600" : "typo-subdued", isActive && "font-bold"),
+        children: children
+      }), isExternalLink && !collapsed && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFeather.ExternalLink, {
+        className: (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["", " !ml-1 shrink-0"])), showColors ? "text-accent-600" : "typo-subdued"),
+        size: "1em"
+      })]
+    }))
+  });
+};
+exports.SidebarButtonLink = SidebarButtonLink;

package/cjs/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/cjs/Sidebar/SidebarContext.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSidebarContext = exports.SidebarContext = void 0;
+var _react = require("react");
+var SidebarContext = /*#__PURE__*/(0, _react.createContext)(null);
+exports.SidebarContext = SidebarContext;
+var useSidebarContext = function useSidebarContext() {
+  var context = (0, _react.useContext)(SidebarContext);
+  if (!context) {
+    throw new Error("useSidebarContext used outside of Sidebar");
+  }
+  return context;
+};
+exports.useSidebarContext = useSidebarContext;

package/cjs/Sidebar/SidebarHeader.d.ts

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

package/cjs/Sidebar/SidebarHeader.js

@@ -0,0 +1,21 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SidebarHeader = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject;
+var SidebarHeader = function SidebarHeader(_ref) {
+  var className = _ref.className,
+    children = _ref.children;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("header", {
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["h-[72px] shrink-0 border-b border-grey-200/50"]))), className),
+    children: children
+  });
+};
+exports.SidebarHeader = SidebarHeader;

package/cjs/Sidebar/SidebarHeading.d.ts

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

package/cjs/Sidebar/SidebarHeading.js

@@ -0,0 +1,26 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SidebarHeading = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
+var _SidebarContext = require("./SidebarContext");
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject;
+var SidebarHeading = function SidebarHeading(_ref) {
+  var id = _ref.id,
+    className = _ref.className,
+    children = _ref.children;
+  var _useSidebarContext = (0, _SidebarContext.useSidebarContext)(),
+    collapsed = _useSidebarContext.collapsed;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+    id: id,
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n          h-8 block leading-[2rem]\n          display-subheading typo-subdued uppercase select-none\n          ", "\n        "])), collapsed && "opacity-0"), className),
+    children: children
+  });
+};
+exports.SidebarHeading = SidebarHeading;

package/cjs/Sidebar/SidebarLink.d.ts

@@ -0,0 +1,9 @@
+import type { FC, ReactNode } from "react";
+import type { IconComponentType } from "../types";
+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: FC<SidebarLinkProps>;

package/cjs/Sidebar/SidebarLink.js

@@ -0,0 +1,51 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SidebarLink = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _reactFeather = require("react-feather");
+var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
+var _useLinkProps = _interopRequireDefault(require("../utils/useLinkProps"));
+var _SidebarContext = require("./SidebarContext");
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var SidebarLink = function SidebarLink(props) {
+  var _linkProps$href;
+  var _useSidebarContext = (0, _SidebarContext.useSidebarContext)(),
+    isLinkActive = _useSidebarContext.isLinkActive;
+  var id = props.id,
+    className = props.className,
+    disabled = props.disabled,
+    Icon = props.icon,
+    children = props.children;
+  var linkProps = (0, _useLinkProps["default"])(props);
+  var isExternalLink = linkProps.target === "_blank";
+  var isActive = !disabled && !isExternalLink && isLinkActive((_linkProps$href = linkProps.href) !== null && _linkProps$href !== void 0 ? _linkProps$href : "");
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("a", _objectSpread(_objectSpread({}, linkProps), {}, {
+    id: id,
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\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__*/(0, _jsxRuntime.jsx)(Icon, {
+      className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["shrink-0 mr-3 ", ""])), disabled ? "text-grey-300" : "text-grey-500"),
+      width: "1rem",
+      height: "1rem"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+      className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\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__*/(0, _jsxRuntime.jsx)("span", {
+        className: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["truncate"]))),
+        children: children
+      }), isExternalLink && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFeather.ExternalLink, {
+        className: (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["shrink-0 ml-1 ", ""])), disabled ? "text-grey-300" : "text-grey-500 group-focus:text-accent-600 group-hover:text-accent-600"),
+        size: "1em"
+      })]
+    })]
+  }));
+};
+exports.SidebarLink = SidebarLink;

package/cjs/Sidebar/SidebarLinksGroup/ActiveLinkIndicator.d.ts

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

package/cjs/Sidebar/SidebarLinksGroup/ActiveLinkIndicator.js

@@ -0,0 +1,38 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ActiveLinkIndicator = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _satellitePrefixer = _interopRequireDefault(require("../../styles/helpers/satellitePrefixer"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject, _templateObject2, _templateObject3;
+var LINK_HEIGHT_PX = 24;
+var LINKS_SPACING_PX = 8;
+var ActiveLinkIndicator = function ActiveLinkIndicator(_ref) {
+  var className = _ref.className,
+    activeIndex = _ref.activeIndex,
+    linksCount = _ref.linksCount;
+  var showIndicator = typeof activeIndex === "number" && activeIndex >= 0;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["w-4 flex justify-center"]))), className),
+    style: {
+      height: linksCount * LINK_HEIGHT_PX + (linksCount - 1) * LINKS_SPACING_PX
+    },
+    "aria-hidden": true,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["w-px h-full bg-grey-200"]))),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n            w-px bg-accent-500\n            transition-transform 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
+        }
+      })
+    })
+  });
+};
+exports.ActiveLinkIndicator = ActiveLinkIndicator;

package/cjs/Sidebar/SidebarLinksGroup/SidebarGroupLink.d.ts

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