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

package/cjs/Sidebar/SidebarLinksGroup/SidebarGroupLink.js

@@ -0,0 +1,37 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SidebarGroupLink = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _reactFeather = require("react-feather");
+var _satellitePrefixer = _interopRequireDefault(require("../../styles/helpers/satellitePrefixer"));
+var _useLinkProps = _interopRequireDefault(require("../../utils/useLinkProps"));
+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 SidebarGroupLink = function SidebarGroupLink(props) {
+  var label = props.label,
+    active = props.active,
+    id = props.id,
+    disabled = props.disabled;
+  var linkProps = (0, _useLinkProps["default"])(props);
+  var isExternalLink = linkProps.target === "_blank";
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("a", _objectSpread(_objectSpread({}, linkProps), {}, {
+    id: id,
+    className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\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__*/(0, _jsxRuntime.jsx)("span", {
+      className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["truncate"]))),
+      children: label
+    }), isExternalLink && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFeather.ExternalLink, {
+      className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["ml-1 shrink-0"]))),
+      size: "1em"
+    })]
+  }));
+};
+exports.SidebarGroupLink = SidebarGroupLink;

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

@@ -0,0 +1,23 @@
+import type { ReactNode } from "react";
+import type { IconComponentType } from "../../types";
+import type { SidebarLinksGroupLink } from "./types";
+declare type SidebarLinksGroupBaseProps = {
+    id?: string;
+    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: (props: SidebarLinksGroupProps) => JSX.Element;
+export {};

package/cjs/Sidebar/SidebarLinksGroup/SidebarLinksGroup.js

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

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

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

package/cjs/Sidebar/SidebarLinksGroup/index.js

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

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

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

package/cjs/Sidebar/SidebarLinksGroup/types.js

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

package/cjs/Sidebar/SidebarNav.d.ts

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

package/cjs/Sidebar/SidebarNav.js

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

package/cjs/Sidebar/index.d.ts

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

package/cjs/Sidebar/index.js

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

package/cjs/Sidebar/types.d.ts

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

package/cjs/Sidebar/types.js

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

package/cjs/Switch/Switch.d.ts

@@ -0,0 +1,13 @@
+import type { FunctionComponent, ReactNode } from "react";
+import type { SwitchSize } from "./types";
+export interface SwitchProps {
+    className?: string;
+    value: string;
+    disabled?: boolean;
+    onChange: (value: string) => void;
+    children: ReactNode;
+    size?: SwitchSize;
+    name?: string;
+}
+export declare const Switch: FunctionComponent<SwitchProps>;
+export default Switch;

package/cjs/Switch/Switch.js

@@ -0,0 +1,86 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Switch = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _react = require("react");
+var _styles = require("../Button/styles");
+var _RadioGroup = require("../RadioGroup");
+var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
+var _uniqueId = _interopRequireDefault(require("../utils/uniqueId"));
+var _utils = require("./utils");
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject, _templateObject2;
+var Switch = function Switch(_ref) {
+  var className = _ref.className,
+    children = _ref.children,
+    value = _ref.value,
+    onChange = _ref.onChange,
+    disabled = _ref.disabled,
+    name = _ref.name,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? "medium" : _ref$size;
+  var _useState = (0, _react.useState)(function () {
+      return (0, _uniqueId["default"])("SwitchName-");
+    }),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 1),
+    componentDefaultName = _useState2[0];
+  var radioName = name !== null && name !== void 0 ? name : componentDefaultName;
+  var containerRef = (0, _react.useRef)(null);
+  var valueIndicatorRef = (0, _react.useRef)(null);
+  var _useState3 = (0, _react.useState)(),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    valueIndicatorStyle = _useState4[0],
+    setValueIndicatorStyle = _useState4[1];
+
+  /**
+   * Positionning might be affected by different changes (changes in options order/number/label size, widget size etc),
+   * so we want to recompute things on every render. To avoid infinite loops, we check if the style
+   * actually changed before applying it.
+   */
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  (0, _react.useLayoutEffect)(function () {
+    var targetEl = document.querySelector((0, _utils.buildAnimationKeySelector)(radioName, value));
+    if (!targetEl || !valueIndicatorRef.current || !containerRef.current) {
+      return setValueIndicatorStyle(undefined);
+    }
+    var containerRect = containerRef.current.getBoundingClientRect();
+    var targetRect = targetEl.getBoundingClientRect();
+    var newValueIndicatorStyle = {
+      width: targetRect.width,
+      transform: "translateX(".concat(targetRect.x - containerRect.x, "px)"),
+      visibility: "visible",
+      transitionProperty: "width, transform",
+      transitionDuration: "200ms",
+      transitionTimingFunction: "ease-in-out"
+    };
+    if (newValueIndicatorStyle.transform !== (valueIndicatorStyle === null || valueIndicatorStyle === void 0 ? void 0 : valueIndicatorStyle.transform) || newValueIndicatorStyle.width !== (valueIndicatorStyle === null || valueIndicatorStyle === void 0 ? void 0 : valueIndicatorStyle.width)) {
+      setValueIndicatorStyle(newValueIndicatorStyle);
+    }
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioGroup.RadioGroupContext.Provider, {
+    value: {
+      value: value,
+      name: radioName,
+      onChange: onChange,
+      disabled: disabled
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      ref: containerRef,
+      className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["switch\n           relative inline-flex typo-display-body rounded bg-grey-100\n           ", "\n          "])), size === "large" ? "switch-large space-x-1" : "space-x-2px"), _styles.BUTTON_SIZE_CLASSNAMES[size], className),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        ref: valueIndicatorRef,
+        style: valueIndicatorStyle,
+        className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n            absolute top-0 left-0 z-0 min-w-4 h-full\n            btn btn-neutral\n            pointer-events-none invisible\n          "])))
+      }), children]
+    })
+  });
+};
+exports.Switch = Switch;
+var _default = Switch;
+exports["default"] = _default;

package/cjs/Switch/Switch.tailwind.d.ts

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

package/cjs/Switch/Switch.tailwind.js

@@ -0,0 +1,25 @@
+"use strict";
+
+// @ts-check
+var plugin = require("tailwindcss/plugin");
+var switchPlugin = plugin(function (_ref) {
+  var addComponents = _ref.addComponents,
+    theme = _ref.theme;
+  addComponents({
+    ".switch": {
+      // this + position relative helps create a new stack context (helps with z-index)
+      zIndex: "1",
+      boxShadow: "0 0 0 2px ".concat(theme("colors.grey.100")),
+      "&:focus-within:has(:focus-visible)": {
+        boxShadow: "\n          0 0 0 1px ".concat(theme("colors.grey.100"), ",\n          0 0 0 2px ").concat(theme("colors.accent.600"), "\n        ")
+      }
+    },
+    ".switch-large": {
+      boxShadow: "0 0 0 4px ".concat(theme("colors.grey.100")),
+      "&:focus-within:has(:focus-visible)": {
+        boxShadow: "\n          0 0 0 3px ".concat(theme("colors.grey.100"), ",\n          0 0 0 4px ").concat(theme("colors.accent.600"), "\n        ")
+      }
+    }
+  });
+});
+module.exports = switchPlugin;

package/cjs/Switch/SwitchOption.d.ts

@@ -0,0 +1,8 @@
+import type { FunctionComponent, ReactNode } from "react";
+export interface SwitchOptionProps {
+    value: string;
+    disabled?: boolean;
+    children: ReactNode;
+}
+export declare const SwitchOption: FunctionComponent<SwitchOptionProps>;
+export default SwitchOption;

package/cjs/Switch/SwitchOption.js

@@ -0,0 +1,45 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.SwitchOption = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _RadioGroup = require("../RadioGroup");
+var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
+var _OverflowTooltipWrapper = require("../Tooltip/OverflowTooltipWrapper");
+var _utils = require("./utils");
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject, _templateObject2;
+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 SwitchOption = function SwitchOption(_ref) {
+  var value = _ref.value,
+    disabled = _ref.disabled,
+    children = _ref.children;
+  var context = (0, _RadioGroup.useRadioGroupContext)();
+  var checked = context.value === value;
+  var inputDisabled = context.disabled || disabled;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", _objectSpread(_objectSpread({
+    className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n        inline-flex grow shrink justify-center items-center min-w-16 max-w-48 px-4 z-10\n        ", "\n        ", "\n      "])), inputDisabled ? "cursor-not-allowed opacity-60 rounded bg-grey-100" : "cursor-pointer", !checked && !inputDisabled && "rounded hover:bg-accent-200/20 transition-colors duration-100 ease-linear")
+  }, (0, _utils.buildAnimationProps)(context.name, value)), {}, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+      className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["w-0 h-0 opacity-0"]))),
+      type: "radio",
+      value: value,
+      name: context.name,
+      checked: checked,
+      disabled: inputDisabled,
+      onChange: function onChange(evt) {
+        return context.onChange(evt.currentTarget.value);
+      }
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_OverflowTooltipWrapper.OverflowTooltipWrapper, {
+      children: children
+    })]
+  }));
+};
+exports.SwitchOption = SwitchOption;
+var _default = SwitchOption;
+exports["default"] = _default;

package/cjs/Switch/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./Switch";
+export * from "./SwitchOption";
+export { default } from "./Switch";

package/cjs/Switch/index.js

@@ -0,0 +1,39 @@
+"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 _Switch["default"];
+  }
+});
+var _Switch = _interopRequireWildcard(require("./Switch"));
+Object.keys(_Switch).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Switch[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Switch[key];
+    }
+  });
+});
+var _SwitchOption = require("./SwitchOption");
+Object.keys(_SwitchOption).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _SwitchOption[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _SwitchOption[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/Switch/types.d.ts

@@ -0,0 +1,7 @@
+export declare type SwitchSize = "small" | "medium" | "large";
+export interface SwitchContextValue {
+    name: string;
+    value: string;
+    disabled?: boolean;
+    onChange: (value: string) => void;
+}

package/cjs/Switch/types.js

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

package/cjs/Switch/utils.d.ts

@@ -0,0 +1,6 @@
+export declare const SWITCH_ANIMATION_KEY = "data-switch-animation-key";
+export declare const buildAnimationKeyValue: (name: string, value: string) => string;
+export declare const buildAnimationKeySelector: (name: string, value: string) => string;
+export declare const buildAnimationProps: (name: string, value: string) => {
+    "data-switch-animation-key": string;
+};