@algolia/satellite 1.3.1 → 1.4.1

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

@@ -0,0 +1,51 @@
+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, _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) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import cx from "clsx";
+import { 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"])))
+};
+export var ToggleButtonBase = /*#__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,
+    children = _label$props.children,
+    label = _label$props.label,
+    rest = _objectWithoutProperties(_label$props, _excluded);
+  return /*#__PURE__*/_jsx(TooltipWrapper, {
+    content: label,
+    children: /*#__PURE__*/_jsx("div", {
+      className: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["inline-flex"]))),
+      children: /*#__PURE__*/_jsxs("button", _objectSpread(_objectSpread({
+        ref: ref,
+        type: "button",
+        "aria-label": label,
+        className: cx(stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["inline-flex items-center justify-center gap-1 min-w-min whitespace-nowrap typo-display-body"]))), stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["group/toggle-button rounded focusable-visible disabled:cursor-not-allowed"]))), stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["data-[state=on]:text-accent-600 disabled:!text-grey-300"]))), stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["bg-white data-[state=off]:hover:bg-grey-100 data-[state=on]:bg-accent-100 disabled:!bg-grey-50"]))), stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["border border-grey-200 data-[state=on]:border-accent-600 disabled:!border-grey-200"]))), !isIconOnly && stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["px-3"]))), isIconOnly ? ICON_ONLY_CLASSNAMES[size] : BUTTON_SIZE_CLASSNAMES[size], className)
+      }, rest), {}, {
+        children: [!!Icon && /*#__PURE__*/_jsx(Icon, {
+          "aria-hidden": "true",
+          className: stl(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["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__*/_jsx("div", {
+          children: children
+        })]
+      }))
+    })
+  });
+});
+ToggleButtonBase.displayName = "ToggleButtonBase";

package/dist/esm/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/esm/Actions/ToggleGroup/ToggleGroup.js

@@ -0,0 +1,64 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _templateObject, _templateObject2;
+var _excluded = ["size", "icon", "children", "label", "className"],
+  _excluded2 = ["onChange", "className", "children"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import * as RadixToggleGroup from "@radix-ui/react-toggle-group";
+import cx from "clsx";
+import { forwardRef } from "react";
+import stl from "../../styles/helpers/satellitePrefixer";
+import { ToggleButtonBase } from "../ToggleButton/ToggleButtonBase";
+
+/**
+ * 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.
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+var ToggleGroupItem = /*#__PURE__*/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 = _objectWithoutProperties(_label$props, _excluded);
+  return /*#__PURE__*/_jsx(RadixToggleGroup.Item, _objectSpread(_objectSpread({
+    asChild: true
+  }, rest), {}, {
+    children: /*#__PURE__*/_jsx(ToggleButtonBase, {
+      ref: ref,
+      size: size,
+      icon: icon,
+      label: label,
+      className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["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.
+ */
+export var ToggleGroup = function ToggleGroup(_ref) {
+  var onChange = _ref.onChange,
+    className = _ref.className,
+    children = _ref.children,
+    rest = _objectWithoutProperties(_ref, _excluded2);
+  return /*#__PURE__*/_jsx(RadixToggleGroup.Root, _objectSpread(_objectSpread({
+    onValueChange: onChange,
+    className: cx(stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["toggle-group"]))), className)
+  }, rest), {}, {
+    children: children
+  }));
+};
+ToggleGroup.Item = ToggleGroupItem;
+ToggleGroup.displayName = "ToggleGroup";

package/dist/esm/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/esm/Actions/ToggleGroup/ToggleGroup.tailwind.js

@@ -0,0 +1,33 @@
+import _plugin from "tailwindcss/plugin";
+// @ts-check
+var plugin = _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"
+      }
+    }
+  });
+});
+export default toggleGroupPlugin;

package/dist/esm/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/esm/Actions/index.js

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

package/dist/esm/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/esm/Indicators/Skeleton/Skeleton.js

@@ -0,0 +1,32 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+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) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import cx from "clsx";
+import { ImageIcon } from "../../Icons";
+import stl from "../../styles/helpers/satellitePrefixer";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * 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 var 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 = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({}, props), {}, {
+    "aria-hidden": true,
+    className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["flex animate-pulse bg-grey-200 ", ""])), circle ? "rounded-full aspect-square max-w-fit" : "rounded"), className),
+    children: image ? /*#__PURE__*/_jsx(ImageIcon, {
+      className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["mx-auto self-center text-grey-300/50 w-[40%] h-[40%] max-w-[32px] max-h-[32px]"])))
+    }) : null
+  }));
+};

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

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

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

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

package/dist/esm/Overlay/Dropdown/components/DropdownRadioItem.js

@@ -26,7 +26,7 @@ var _DropdownRadioItem = function _DropdownRadioItem(props) {
         className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["flex-1 truncate mr-4"]))),
         children: children
       }), /*#__PURE__*/_jsx(RadioButton, _objectSpread({
-        className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["mt-2px mr-2px"])))
+        className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["mt-2px mr-1"])))
       }, radioProps))]
     })
   });

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

@@ -142,5 +142,5 @@ export default {
       }
     }
   },
-  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")]
 };