@algolia/satellite 1.3.1 → 1.4.0

package/dist/cjs/Actions/ToggleButton/ToggleButton.d.ts

@@ -1,27 +1,14 @@
+/// <reference types="react" />
 import type { ToggleProps } from "@radix-ui/react-toggle";
-import type { IconComponentType } from "Icons";
-import type { InputHTMLAttributes, ReactNode } from "react";
-import type { ButtonSize } from "../Button/types";
-declare type InputElementProps = InputHTMLAttributes<HTMLInputElement>;
-declare type ToggleButtonSharedProps = {
-    id?: InputElementProps["id"];
-    className?: InputElementProps["className"];
-    style?: InputElementProps["style"];
-    autoFocus?: InputElementProps["autoFocus"];
-    disabled?: InputElementProps["disabled"];
+import type { ToggleButtonBaseProps } from "./ToggleButtonBase";
+export declare type ToggleButtonProps = {
     pressed?: ToggleProps["pressed"];
     defaultPressed?: ToggleProps["defaultPressed"];
     onPressedChange?: ToggleProps["onPressedChange"];
-    size?: ButtonSize;
-};
-declare type IconOnlyToggleButtonProps = {
-    icon: IconComponentType;
-    label: string;
-};
-declare type TextToggleButtonProps = {
-    icon?: IconComponentType;
-    children: ReactNode;
-};
-export declare type ToggleButtonProps = ToggleButtonSharedProps & (IconOnlyToggleButtonProps | TextToggleButtonProps);
+} & ToggleButtonBaseProps;
+/**
+ * The `ToggleButton` component is a button that toggles between two states.
+ *
+ * See the [ToggleButton documentation page](https://satellite.algolia.com/components/actions/toggle-button) for more information.
+ */
 export declare const ToggleButton: import("react").ForwardRefExoticComponent<ToggleButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
-export {};

package/dist/cjs/Actions/ToggleButton/ToggleButton.js

@@ -7,50 +7,37 @@ Object.defineProperty(exports, "__esModule", {
 exports.ToggleButton = 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 _reactToggle = require("@radix-ui/react-toggle");
-var _clsx = _interopRequireDefault(require("clsx"));
 var _react = require("react");
-var _Overlay = require("../../Overlay");
-var _satellitePrefixer = _interopRequireDefault(require("../../styles/helpers/satellitePrefixer"));
-var _styles = require("../Button/styles");
+var _ToggleButtonBase = require("./ToggleButtonBase");
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["className", "size", "icon", "children", "label"];
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
+var _excluded = ["size", "icon", "children", "label"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var ICON_ONLY_CLASSNAMES = {
-  small: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["h-6 w-6"]))),
-  medium: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["h-8 w-8"]))),
-  large: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["h-10 w-10"])))
-};
+/**
+ * The `ToggleButton` component is a button that toggles between two states.
+ *
+ * See the [ToggleButton documentation page](https://satellite.algolia.com/components/actions/toggle-button) for more information.
+ */
 var ToggleButton = exports.ToggleButton = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
-  var isIconOnly = !props.children;
   var _label$props = _objectSpread({
       label: undefined
     }, props),
-    className = _label$props.className,
-    _label$props$size = _label$props.size,
-    size = _label$props$size === void 0 ? "medium" : _label$props$size,
-    Icon = _label$props.icon,
+    size = _label$props.size,
+    icon = _label$props.icon,
     children = _label$props.children,
     label = _label$props.label,
     rest = (0, _objectWithoutProperties2["default"])(_label$props, _excluded);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Overlay.TooltipWrapper, {
-    content: label,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactToggle.Toggle, _objectSpread(_objectSpread({
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactToggle.Toggle, _objectSpread(_objectSpread({
+    asChild: true
+  }, rest), {}, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ToggleButtonBase.ToggleButtonBase, {
       ref: ref,
-      type: "button",
-      "aria-label": label,
-      className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["inline-flex items-center justify-center gap-1 min-w-min whitespace-nowrap"]))), (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["group/toggle-button rounded focusable disabled:cursor-not-allowed"]))), (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["aria-pressed:text-accent-600 disabled:!text-grey-300"]))), (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["bg-white data-[state=off]:hover:bg-grey-100 aria-pressed:bg-accent-100 disabled:!bg-grey-50"]))), (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["border border-grey-200  aria-pressed:border-accent-600 disabled:!border-grey-200"]))), !isIconOnly && (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["px-3"]))), isIconOnly ? ICON_ONLY_CLASSNAMES[size] : _styles.BUTTON_SIZE_CLASSNAMES[size], className)
-    }, rest), {}, {
-      children: [!!Icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
-        "aria-hidden": "true",
-        className: (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["shrink-0 h-4 w-4 text-grey-600 group-aria-pressed/toggle-button:text-inherit group-disabled/toggle-button:text-inherit"])))
-      }), !!children && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        children: children
-      })]
-    }))
-  });
+      size: size,
+      icon: icon,
+      label: label,
+      children: children
+    })
+  }));
 });
 ToggleButton.displayName = "ToggleButton";

package/dist/cjs/Actions/ToggleButton/ToggleButtonBase.d.ts

@@ -0,0 +1,16 @@
+import type { ButtonHTMLAttributes, ReactNode } from "react";
+import type { IconComponentType } from "../../Icons";
+import type { ButtonSize } from "../Button/types";
+declare type IconOnlyToggleButtonBaseProps = {
+    icon: IconComponentType;
+    label: string;
+};
+declare type TextToggleButtonBaseProps = {
+    icon?: IconComponentType;
+    children: ReactNode;
+};
+export declare type ToggleButtonBaseProps = Pick<ButtonHTMLAttributes<HTMLButtonElement>, "id" | "className" | "style" | "autoFocus" | "disabled"> & {
+    size?: ButtonSize;
+} & (IconOnlyToggleButtonBaseProps | TextToggleButtonBaseProps);
+export declare const ToggleButtonBase: import("react").ForwardRefExoticComponent<ToggleButtonBaseProps & import("react").RefAttributes<HTMLButtonElement>>;
+export {};

package/dist/cjs/Actions/ToggleButton/ToggleButtonBase.js

@@ -0,0 +1,58 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ToggleButtonBase = 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 _Overlay = require("../../Overlay");
+var _satellitePrefixer = _interopRequireDefault(require("../../styles/helpers/satellitePrefixer"));
+var _styles = require("../Button/styles");
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["className", "size", "icon", "children", "label"];
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var ICON_ONLY_CLASSNAMES = {
+  small: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["h-6 w-6"]))),
+  medium: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["h-8 w-8"]))),
+  large: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["h-10 w-10"])))
+};
+var ToggleButtonBase = exports.ToggleButtonBase = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var isIconOnly = !props.children;
+  var _label$props = _objectSpread({
+      label: undefined
+    }, props),
+    className = _label$props.className,
+    _label$props$size = _label$props.size,
+    size = _label$props$size === void 0 ? "medium" : _label$props$size,
+    Icon = _label$props.icon,
+    children = _label$props.children,
+    label = _label$props.label,
+    rest = (0, _objectWithoutProperties2["default"])(_label$props, _excluded);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Overlay.TooltipWrapper, {
+    content: label,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["inline-flex"]))),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", _objectSpread(_objectSpread({
+        ref: ref,
+        type: "button",
+        "aria-label": label,
+        className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["inline-flex items-center justify-center gap-1 min-w-min whitespace-nowrap typo-display-body"]))), (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["group/toggle-button rounded focusable-visible disabled:cursor-not-allowed"]))), (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["data-[state=on]:text-accent-600 disabled:!text-grey-300"]))), (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["bg-white data-[state=off]:hover:bg-grey-100 data-[state=on]:bg-accent-100 disabled:!bg-grey-50"]))), (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["border border-grey-200 data-[state=on]:border-accent-600 disabled:!border-grey-200"]))), !isIconOnly && (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["px-3"]))), isIconOnly ? ICON_ONLY_CLASSNAMES[size] : _styles.BUTTON_SIZE_CLASSNAMES[size], className)
+      }, rest), {}, {
+        children: [!!Icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
+          "aria-hidden": "true",
+          className: (0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["shrink-0 h-4 w-4 text-grey-600 group-data-[state=on]/toggle-button:text-inherit group-disabled/toggle-button:text-inherit"])))
+        }), !!children && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          children: children
+        })]
+      }))
+    })
+  });
+});
+ToggleButtonBase.displayName = "ToggleButtonBase";

package/dist/cjs/Actions/ToggleGroup/ToggleGroup.d.ts

@@ -0,0 +1,64 @@
+import type { ToggleGroupItemProps as RadixToggleGroupItemProps, ToggleGroupMultipleProps as RadixToggleGroupMultipleProps, ToggleGroupImplProps as RadixToggleGroupSharedProps, ToggleGroupSingleProps as RadixToggleGroupSingleProps } from "@radix-ui/react-toggle-group";
+import type { FC } from "react";
+import type { ToggleButtonBaseProps } from "../ToggleButton/ToggleButtonBase";
+declare type ToggleGroupSharedProps = {
+    /** @ignore */
+    className?: string;
+    /**
+     * Defines whether the `ToggleGroup` is disabled,
+     * preventing the user from interacting with the toggle group and all its items.
+     */
+    disabled?: RadixToggleGroupSharedProps["disabled"];
+};
+declare type ToggleGroupSingleProps = {
+    /** Defines whether a single or multiple items can be pressed at a time. */
+    type: "single";
+    /**
+     * Defines the controlled value of the pressed item.
+     * Must be used in conjunction with `onValueChange`.
+     */
+    value?: RadixToggleGroupSingleProps["value"];
+    /**
+     * Defines the value of the item to show as pressed when initially rendered.
+     * Use when you do not need to control the state of the items.
+     */
+    defaultValue?: RadixToggleGroupSingleProps["defaultValue"];
+    /** Defines the event handler called when the pressed state of an item changes. */
+    onChange?: RadixToggleGroupSingleProps["onValueChange"];
+};
+declare type ToggleGroupMultipleProps = {
+    /** Defines whether a single or multiple items can be pressed at a time. */
+    type: "multiple";
+    /**
+     * Defines the controlled value of the pressed items.
+     * Must be used in conjunction with `onValueChange`.
+     */
+    value?: RadixToggleGroupMultipleProps["value"];
+    /**
+     * Defines the values of the items to show as pressed when initially rendered.
+     * Use when you do not need to control the state of the items.
+     */
+    defaultValue?: RadixToggleGroupMultipleProps["defaultValue"];
+    /** Defines the event handler called when the pressed state of an item changes. */
+    onChange?: RadixToggleGroupMultipleProps["onValueChange"];
+};
+export declare type ToggleGroupProps = ToggleGroupSharedProps & (ToggleGroupSingleProps | ToggleGroupMultipleProps);
+declare type ToggleGroupComponent = FC<ToggleGroupProps> & {
+    Item: FC<ToggleGroupItemProps>;
+};
+/**
+ * The `ToggleGroupItem` component is a toggle group item that allows users to select one or more options.
+ *
+ * See the [ToggleGroupItem documentation page](https://satellite.algolia.com/components/actions/toggle-group) for more information.
+ */
+export declare type ToggleGroupItemProps = ToggleButtonBaseProps & {
+    /** Defines a unique value for the item. */
+    value: RadixToggleGroupItemProps["value"];
+};
+/**
+ * The `ToggleGroup` component is a toggle group that allows users to select one or more options.
+ *
+ * See the [ToggleGroup documentation page](https://satellite.algolia.com/components/actions/toggle-group) for more information.
+ */
+export declare const ToggleGroup: ToggleGroupComponent;
+export {};

package/dist/cjs/Actions/ToggleGroup/ToggleGroup.js

@@ -0,0 +1,73 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ToggleGroup = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var RadixToggleGroup = _interopRequireWildcard(require("@radix-ui/react-toggle-group"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _react = require("react");
+var _satellitePrefixer = _interopRequireDefault(require("../../styles/helpers/satellitePrefixer"));
+var _ToggleButtonBase = require("../ToggleButton/ToggleButtonBase");
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject, _templateObject2;
+var _excluded = ["size", "icon", "children", "label", "className"],
+  _excluded2 = ["onChange", "className", "children"];
+/**
+ * The `ToggleGroupItem` component is a toggle group item that allows users to select one or more options.
+ *
+ * See the [ToggleGroupItem documentation page](https://satellite.algolia.com/components/actions/toggle-group) for more information.
+ */
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var ToggleGroupItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var _label$props = _objectSpread({
+      label: undefined
+    }, props),
+    size = _label$props.size,
+    icon = _label$props.icon,
+    children = _label$props.children,
+    label = _label$props.label,
+    className = _label$props.className,
+    rest = (0, _objectWithoutProperties2["default"])(_label$props, _excluded);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(RadixToggleGroup.Item, _objectSpread(_objectSpread({
+    asChild: true
+  }, rest), {}, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ToggleButtonBase.ToggleButtonBase, {
+      ref: ref,
+      size: size,
+      icon: icon,
+      label: label,
+      className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["toggle-group-item"]))), className),
+      children: children
+    })
+  }));
+});
+ToggleGroupItem.displayName = "ToggleGroupItem";
+
+/**
+ * The `ToggleGroup` component is a toggle group that allows users to select one or more options.
+ *
+ * See the [ToggleGroup documentation page](https://satellite.algolia.com/components/actions/toggle-group) for more information.
+ */
+var ToggleGroup = exports.ToggleGroup = function ToggleGroup(_ref) {
+  var onChange = _ref.onChange,
+    className = _ref.className,
+    children = _ref.children,
+    rest = (0, _objectWithoutProperties2["default"])(_ref, _excluded2);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(RadixToggleGroup.Root, _objectSpread(_objectSpread({
+    onValueChange: onChange,
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["toggle-group"]))), className)
+  }, rest), {}, {
+    children: children
+  }));
+};
+ToggleGroup.Item = ToggleGroupItem;
+ToggleGroup.displayName = "ToggleGroup";

package/dist/cjs/Actions/ToggleGroup/ToggleGroup.tailwind.d.ts

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

package/dist/cjs/Actions/ToggleGroup/ToggleGroup.tailwind.js

@@ -0,0 +1,34 @@
+"use strict";
+
+// @ts-check
+var plugin = require("tailwindcss/plugin");
+var toggleGroupPlugin = plugin(function (_ref) {
+  var addComponents = _ref.addComponents;
+  addComponents({
+    ".toggle-group": {
+      display: "flex",
+      flexWrap: "nowrap",
+      "& > :not(:first-child):not(:last-child) .toggle-group-item": {
+        borderRadius: "0px"
+      },
+      "& > :first-child .toggle-group-item": {
+        borderTopRightRadius: "0px",
+        borderBottomRightRadius: "0px"
+      },
+      "& > :not(:first-child) .toggle-group-item": {
+        marginLeft: "-1px"
+      },
+      "& > :last-child .toggle-group-item": {
+        borderTopLeftRadius: "0px",
+        borderBottomLeftRadius: "0px"
+      },
+      "& [data-state=on]": {
+        zIndex: "1"
+      },
+      "& .toggle-group-item:focus-visible": {
+        zIndex: "2"
+      }
+    }
+  });
+});
+module.exports = toggleGroupPlugin;

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

@@ -5,4 +5,5 @@ export * from "./IconButton/IconButton";
 export * from "./IconButtonLink/IconButtonLink";
 export * from "./Switch";
 export * from "./ToggleButton/ToggleButton";
+export * from "./ToggleGroup/ToggleGroup";
 export type { ButtonSize, ButtonVariant } from "./Button/types";

package/dist/cjs/Actions/index.js

@@ -79,4 +79,15 @@ Object.keys(_ToggleButton).forEach(function (key) {
       return _ToggleButton[key];
     }
   });
+});
+var _ToggleGroup = require("./ToggleGroup/ToggleGroup");
+Object.keys(_ToggleGroup).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ToggleGroup[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _ToggleGroup[key];
+    }
+  });
 });

package/dist/cjs/Indicators/Skeleton/Skeleton.d.ts

@@ -0,0 +1,12 @@
+import type { FC } from "react";
+export interface SkeletonProps {
+    className?: string;
+    circle?: boolean;
+    image?: boolean;
+}
+/**
+ * The `Skeleton` component is used to display a placeholder during loading.
+ *
+ * See the [Skeleton documentation page](https://satellite.algolia.com/layouts/skeleton) for more information.
+ */
+export declare const Skeleton: FC<SkeletonProps>;

package/dist/cjs/Indicators/Skeleton/Skeleton.js

@@ -0,0 +1,39 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Skeleton = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _Icons = require("../../Icons");
+var _satellitePrefixer = _interopRequireDefault(require("../../styles/helpers/satellitePrefixer"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject, _templateObject2;
+var _excluded = ["circle", "image", "className"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+/**
+ * The `Skeleton` component is used to display a placeholder during loading.
+ *
+ * See the [Skeleton documentation page](https://satellite.algolia.com/layouts/skeleton) for more information.
+ */
+
+var Skeleton = exports.Skeleton = function Skeleton(_ref) {
+  var _ref$circle = _ref.circle,
+    circle = _ref$circle === void 0 ? false : _ref$circle,
+    _ref$image = _ref.image,
+    image = _ref$image === void 0 ? false : _ref$image,
+    className = _ref.className,
+    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread({}, props), {}, {
+    "aria-hidden": true,
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["flex animate-pulse bg-grey-200 ", ""])), circle ? "rounded-full aspect-square max-w-fit" : "rounded"), className),
+    children: image ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icons.ImageIcon, {
+      className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["mx-auto self-center text-grey-300/50 w-[40%] h-[40%] max-w-[32px] max-h-[32px]"])))
+    }) : null
+  }));
+};

package/dist/cjs/Indicators/Skeleton/index.d.ts

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

package/dist/cjs/Indicators/Skeleton/index.js

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

package/dist/cjs/styles/tailwind.config.js

@@ -141,5 +141,5 @@ module.exports = {
       }
     }
   },
-  plugins: [require("@tailwindcss/container-queries"), require("./base.tailwind"), require("../Helpers/utilities/overlay.tailwind"), require("../Helpers/utilities/utilities.tailwind"), require("../Helpers/utilities/focusable.tailwind"), require("../Typography/Typography.tailwind"), require("../Layout/FlexGrid/FlexGrid.tailwind"), require("../Fields/AutoComplete/AutoComplete.tailwind"), require("../Actions/Button/Button.tailwind"), require("../Layout/Card/Card.tailwind"), require("../Fields/Checkbox/Checkbox.tailwind"), require("../Indicators/EmptyState/EmptyState.tailwind"), require("../Indicators/Toast/Toast.tailwind"), require("../Helpers/HelpUnderline/HelpUnderline.tailwind"), require("../Fields/Input/Input.tailwind"), require("../Helpers/InstantSearch/InstantSearch.tailwind"), require("../Indicators/KeyboardKey/KeyboardKey.tailwind"), require("../Helpers/Medallion/Medallion.tailwind"), require("../Overlay/Modal/Modal.tailwind"), require("../Indicators/ProgressBar/ProgressBar.tailwind"), require("../Indicators/ProgressSpinner/ProgressSpinner.tailwind"), require("../Fields/RadioGroup/RadioButton.tailwind"), require("../Indicators/ScrollIndicator/ScrollIndicator.tailwind"), require("../Fields/Select/Select.tailwind"), require("../Helpers/Separator/Separator.tailwind"), require("../Actions/Switch/Switch.tailwind"), require("../Navigation/Tabs/Tabs.tailwind"), require("../Layout/Tables/DataTable/DataTable.tailwind"), require("../Layout/Tables/Table/Table.tailwind"), require("../Indicators/Tag/Tag.tailwind"), require("../Fields/TextArea/TextArea.tailwind"), require("../Fields/Toggle/Toggle.tailwind"), require("../Overlay/Tooltip/Tooltip.tailwind"), require("../Helpers/UserContent/UserContent.tailwind"), require("../Fields/DatePicker/DatePicker.tailwind")]
+  plugins: [require("@tailwindcss/container-queries"), require("./base.tailwind"), require("../Helpers/utilities/overlay.tailwind"), require("../Helpers/utilities/utilities.tailwind"), require("../Helpers/utilities/focusable.tailwind"), require("../Typography/Typography.tailwind"), require("../Layout/FlexGrid/FlexGrid.tailwind"), require("../Fields/AutoComplete/AutoComplete.tailwind"), require("../Actions/Button/Button.tailwind"), require("../Actions/ToggleGroup/ToggleGroup.tailwind"), require("../Layout/Card/Card.tailwind"), require("../Fields/Checkbox/Checkbox.tailwind"), require("../Indicators/EmptyState/EmptyState.tailwind"), require("../Indicators/Toast/Toast.tailwind"), require("../Helpers/HelpUnderline/HelpUnderline.tailwind"), require("../Fields/Input/Input.tailwind"), require("../Helpers/InstantSearch/InstantSearch.tailwind"), require("../Indicators/KeyboardKey/KeyboardKey.tailwind"), require("../Helpers/Medallion/Medallion.tailwind"), require("../Overlay/Modal/Modal.tailwind"), require("../Indicators/ProgressBar/ProgressBar.tailwind"), require("../Indicators/ProgressSpinner/ProgressSpinner.tailwind"), require("../Fields/RadioGroup/RadioButton.tailwind"), require("../Indicators/ScrollIndicator/ScrollIndicator.tailwind"), require("../Fields/Select/Select.tailwind"), require("../Helpers/Separator/Separator.tailwind"), require("../Actions/Switch/Switch.tailwind"), require("../Navigation/Tabs/Tabs.tailwind"), require("../Layout/Tables/DataTable/DataTable.tailwind"), require("../Layout/Tables/Table/Table.tailwind"), require("../Indicators/Tag/Tag.tailwind"), require("../Fields/TextArea/TextArea.tailwind"), require("../Fields/Toggle/Toggle.tailwind"), require("../Overlay/Tooltip/Tooltip.tailwind"), require("../Helpers/UserContent/UserContent.tailwind"), require("../Fields/DatePicker/DatePicker.tailwind")]
 };

package/dist/esm/Actions/ToggleButton/ToggleButton.d.ts

@@ -1,27 +1,14 @@
+/// <reference types="react" />
 import type { ToggleProps } from "@radix-ui/react-toggle";
-import type { IconComponentType } from "Icons";
-import type { InputHTMLAttributes, ReactNode } from "react";
-import type { ButtonSize } from "../Button/types";
-declare type InputElementProps = InputHTMLAttributes<HTMLInputElement>;
-declare type ToggleButtonSharedProps = {
-    id?: InputElementProps["id"];
-    className?: InputElementProps["className"];
-    style?: InputElementProps["style"];
-    autoFocus?: InputElementProps["autoFocus"];
-    disabled?: InputElementProps["disabled"];
+import type { ToggleButtonBaseProps } from "./ToggleButtonBase";
+export declare type ToggleButtonProps = {
     pressed?: ToggleProps["pressed"];
     defaultPressed?: ToggleProps["defaultPressed"];
     onPressedChange?: ToggleProps["onPressedChange"];
-    size?: ButtonSize;
-};
-declare type IconOnlyToggleButtonProps = {
-    icon: IconComponentType;
-    label: string;
-};
-declare type TextToggleButtonProps = {
-    icon?: IconComponentType;
-    children: ReactNode;
-};
-export declare type ToggleButtonProps = ToggleButtonSharedProps & (IconOnlyToggleButtonProps | TextToggleButtonProps);
+} & ToggleButtonBaseProps;
+/**
+ * The `ToggleButton` component is a button that toggles between two states.
+ *
+ * See the [ToggleButton documentation page](https://satellite.algolia.com/components/actions/toggle-button) for more information.
+ */
 export declare const ToggleButton: import("react").ForwardRefExoticComponent<ToggleButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
-export {};

package/dist/esm/Actions/ToggleButton/ToggleButton.js

@@ -1,49 +1,36 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _excluded = ["className", "size", "icon", "children", "label"];
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
+var _excluded = ["size", "icon", "children", "label"];
 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 { Toggle } from "@radix-ui/react-toggle";
-import cx from "clsx";
 import { forwardRef } from "react";
-import { TooltipWrapper } from "../../Overlay";
-import stl from "../../styles/helpers/satellitePrefixer";
-import { BUTTON_SIZE_CLASSNAMES } from "../Button/styles";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-var ICON_ONLY_CLASSNAMES = {
-  small: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["h-6 w-6"]))),
-  medium: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["h-8 w-8"]))),
-  large: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["h-10 w-10"])))
-};
+import { ToggleButtonBase } from "./ToggleButtonBase";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * The `ToggleButton` component is a button that toggles between two states.
+ *
+ * See the [ToggleButton documentation page](https://satellite.algolia.com/components/actions/toggle-button) for more information.
+ */
 export var ToggleButton = /*#__PURE__*/forwardRef(function (props, ref) {
-  var isIconOnly = !props.children;
   var _label$props = _objectSpread({
       label: undefined
     }, props),
-    className = _label$props.className,
-    _label$props$size = _label$props.size,
-    size = _label$props$size === void 0 ? "medium" : _label$props$size,
-    Icon = _label$props.icon,
+    size = _label$props.size,
+    icon = _label$props.icon,
     children = _label$props.children,
     label = _label$props.label,
     rest = _objectWithoutProperties(_label$props, _excluded);
-  return /*#__PURE__*/_jsx(TooltipWrapper, {
-    content: label,
-    children: /*#__PURE__*/_jsxs(Toggle, _objectSpread(_objectSpread({
+  return /*#__PURE__*/_jsx(Toggle, _objectSpread(_objectSpread({
+    asChild: true
+  }, rest), {}, {
+    children: /*#__PURE__*/_jsx(ToggleButtonBase, {
       ref: ref,
-      type: "button",
-      "aria-label": label,
-      className: cx(stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["inline-flex items-center justify-center gap-1 min-w-min whitespace-nowrap"]))), stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["group/toggle-button rounded focusable disabled:cursor-not-allowed"]))), stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["aria-pressed:text-accent-600 disabled:!text-grey-300"]))), stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["bg-white data-[state=off]:hover:bg-grey-100 aria-pressed:bg-accent-100 disabled:!bg-grey-50"]))), stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["border border-grey-200  aria-pressed:border-accent-600 disabled:!border-grey-200"]))), !isIconOnly && stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["px-3"]))), isIconOnly ? ICON_ONLY_CLASSNAMES[size] : BUTTON_SIZE_CLASSNAMES[size], className)
-    }, rest), {}, {
-      children: [!!Icon && /*#__PURE__*/_jsx(Icon, {
-        "aria-hidden": "true",
-        className: stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["shrink-0 h-4 w-4 text-grey-600 group-aria-pressed/toggle-button:text-inherit group-disabled/toggle-button:text-inherit"])))
-      }), !!children && /*#__PURE__*/_jsx("div", {
-        children: children
-      })]
-    }))
-  });
+      size: size,
+      icon: icon,
+      label: label,
+      children: children
+    })
+  }));
 });
 ToggleButton.displayName = "ToggleButton";

package/dist/esm/Actions/ToggleButton/ToggleButtonBase.d.ts

@@ -0,0 +1,16 @@
+import type { ButtonHTMLAttributes, ReactNode } from "react";
+import type { IconComponentType } from "../../Icons";
+import type { ButtonSize } from "../Button/types";
+declare type IconOnlyToggleButtonBaseProps = {
+    icon: IconComponentType;
+    label: string;
+};
+declare type TextToggleButtonBaseProps = {
+    icon?: IconComponentType;
+    children: ReactNode;
+};
+export declare type ToggleButtonBaseProps = Pick<ButtonHTMLAttributes<HTMLButtonElement>, "id" | "className" | "style" | "autoFocus" | "disabled"> & {
+    size?: ButtonSize;
+} & (IconOnlyToggleButtonBaseProps | TextToggleButtonBaseProps);
+export declare const ToggleButtonBase: import("react").ForwardRefExoticComponent<ToggleButtonBaseProps & import("react").RefAttributes<HTMLButtonElement>>;
+export {};