@algolia/satellite 1.0.0-v3.99 → 1.0.0

package/dist/esm/Popover/types.d.ts

@@ -0,0 +1,74 @@
+import type { PopoverContentProps } from "@radix-ui/react-popover";
+import type { HTMLAttributes, ReactElement, ReactNode } from "react";
+export declare type PopoverLocale = {
+    dismissText?: string;
+};
+export interface PopoverProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    /**
+     * Defines the trigger element of the `Popover`.
+     * It should be a button element.
+     */
+    children: ReactElement;
+    /**
+     * Defines the title of the `Popover`.
+     */
+    title: ReactNode;
+    /**
+     * Defines the subtitle of the `Popover`.
+     */
+    subtitle?: ReactNode;
+    /**
+     * Defines the content of the `Popover`.
+     */
+    content: ReactNode;
+    /**
+     * Defines the footer of the `Popover`.
+     */
+    footer?: ReactNode;
+    /**
+     * Defines whether the `Popover` should be opened or not.
+     */
+    open?: boolean;
+    /**
+     * Defines the event handler called when the `Popover` is dismissed.
+     */
+    onDismiss?: () => void;
+    /**
+     * Defines the side of the trigger element where the `Popover` should be displayed.
+     * Will be reversed when collisions occur and `avoidCollisions` is enabled.
+     * @default "top"
+     */
+    side?: PopoverContentProps["side"];
+    /**
+     * Defines the offset in pixels of the `Popover` from the trigger element.
+     */
+    sideOffset?: PopoverContentProps["sideOffset"];
+    /**
+     * Defines the preferred alignment of the `Popover` against the trigger element.
+     * May change when collisions occur.
+     */
+    align?: PopoverContentProps["align"];
+    /**
+     * Defines the offset in pixels of the `Popover` along the trigger element.
+     * It only works when the `align` option is set to "start" or "end".
+     */
+    alignOffset?: PopoverContentProps["alignOffset"];
+    /**
+     * Defines whether the `Popover` arrow should be hidden.
+     */
+    noArrow?: boolean;
+    /**
+     * Defines whether the `Popover` should avoid collisions with the viewport.
+     */
+    avoidCollisions?: boolean;
+    /**
+     * The element that should receive focus once the `Popover` is opened.
+     * If `undefined` or `null` is passed, the first focusable element will be focused.
+     * If `false`, no element will be focused.
+     */
+    autoFocusOnOpenElement?: HTMLElement | null | false;
+    /**
+     * Defines the locale of the `Popover`.
+     */
+    locale?: PopoverLocale;
+}

package/dist/esm/Popover/types.js

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

package/dist/esm/ProgressBar/ProgressBar.d.ts

@@ -0,0 +1,15 @@
+import { type HTMLAttributes } from "react";
+export interface ProgressBarProps extends HTMLAttributes<HTMLDivElement> {
+    /** The current value of the progress bar. */
+    value: number;
+    /** The maximum value of the progress bar. */
+    max?: number;
+    /** The className to apply to the bar element. */
+    barClassName?: string;
+}
+/**
+ * The `ProgressBar` component visually indicates the completion status of a task, updating in real-time to guide users.
+ *
+ * See the [Progress Bar documentation page](https://satellite.algolia.com/components/feedback/progress-bar) for more information.
+ */
+export declare const ProgressBar: import("react").ForwardRefExoticComponent<ProgressBarProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/esm/ProgressBar/ProgressBar.js

@@ -0,0 +1,46 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var _excluded = ["value", "max", "className", "barClassName"];
+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 Progress from "@radix-ui/react-progress";
+import cx from "clsx";
+import { forwardRef } from "react";
+import stl from "../styles/helpers/satellitePrefixer";
+import { clamp } from "../utils/clamp";
+import { prefersReducedMotion } from "../utils/prefersReducedMotion";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * The `ProgressBar` component visually indicates the completion status of a task, updating in real-time to guide users.
+ *
+ * See the [Progress Bar documentation page](https://satellite.algolia.com/components/feedback/progress-bar) for more information.
+ */
+export var ProgressBar = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var value = _ref.value,
+    _ref$max = _ref.max,
+    max = _ref$max === void 0 ? 100 : _ref$max,
+    className = _ref.className,
+    barClassName = _ref.barClassName,
+    props = _objectWithoutProperties(_ref, _excluded);
+  if (value < 0 || value > max) {
+    if (process.env.NODE_ENV !== "production") {
+      console.warn("ProgressBar: Invalid `value` of ".concat(value, ". The `value` prop must be between 0 and ").concat(max, " (`max` prop). The `value` has been clamped to the range of 0 to ").concat(max, "."));
+    }
+    value = clamp(value, 0, max);
+  }
+  return /*#__PURE__*/_jsx(Progress.Root, _objectSpread(_objectSpread({}, props), {}, {
+    ref: ref,
+    value: value,
+    max: max,
+    className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["progress-bar"]))), className),
+    children: /*#__PURE__*/_jsx(Progress.Indicator, {
+      className: cx(stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["progress-bar-progress transition-transform ease-in-out origin-left"]))), prefersReducedMotion ? stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["duration-150"]))) : stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["duration-500"]))), barClassName),
+      style: {
+        transform: "scaleX(".concat(value / max, ")")
+      }
+    })
+  }));
+});
+ProgressBar.displayName = "ProgressBar";

package/dist/esm/ProgressBar/ProgressBar.tailwind.d.ts

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

package/dist/esm/ProgressBar/ProgressBar.tailwind.js

@@ -0,0 +1,25 @@
+import _rgba from "../styles/rgba";
+import _plugin from "tailwindcss/plugin";
+// @ts-check
+var plugin = _plugin;
+var rgba = _rgba;
+var progressBarPlugin = plugin(function (_ref) {
+  var addComponents = _ref.addComponents,
+    theme = _ref.theme;
+  addComponents({
+    ".progress-bar": {
+      height: "4px",
+      width: "100%",
+      display: "block",
+      overflow: "hidden",
+      background: theme("colors.grey.100"),
+      boxShadow: "\n        inset 0px 1px 3px 0px ".concat(rgba(theme("colors.black"), 0.1), ",\n        0px 0.5px 0px 0px ").concat(rgba(theme("colors.white"), 0.05), "\n      "),
+      borderRadius: "4px"
+    },
+    ".progress-bar-progress": {
+      height: "100%",
+      background: theme("colors.accent.600")
+    }
+  });
+});
+export default progressBarPlugin;

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

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

package/dist/esm/ProgressBar/index.js

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

package/dist/esm/ProgressSpinner/ProgressSpinner.d.ts

@@ -0,0 +1,13 @@
+import type { SVGAttributes, VFC } from "react";
+export declare type ProgressSpinnerAlign = "left" | "center" | "right";
+export interface ProgressSpinnerProps extends SVGAttributes<SVGSVGElement> {
+    size?: number;
+    thickness?: number;
+    align?: ProgressSpinnerAlign;
+}
+/**
+ * The `ProgressSpinner` component is used for loading data or performing actions without an instant effect. Spinners reassure we're processing their actions without revealing what's going on behind-the-scenes.
+ *
+ * See the [Progress Spinner documentation page](https://satellite.algolia.com/components/feedback/progress-spinner) for more information.
+ */
+export declare const ProgressSpinner: VFC<ProgressSpinnerProps>;

package/dist/esm/ProgressSpinner/ProgressSpinner.js

@@ -0,0 +1,53 @@
+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", "thickness", "align"];
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import cx from "clsx";
+import stl from "../styles/helpers/satellitePrefixer";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var ALIGN_CLASSNAMES = {
+  left: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["mr-auto"]))),
+  center: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["m-auto"]))),
+  right: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["ml-auto"])))
+};
+
+/**
+ * The `ProgressSpinner` component is used for loading data or performing actions without an instant effect. Spinners reassure we're processing their actions without revealing what's going on behind-the-scenes.
+ *
+ * See the [Progress Spinner documentation page](https://satellite.algolia.com/components/feedback/progress-spinner) for more information.
+ */
+export var ProgressSpinner = function ProgressSpinner(_ref) {
+  var className = _ref.className,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 24 : _ref$size,
+    _ref$thickness = _ref.thickness,
+    thickness = _ref$thickness === void 0 ? 2 : _ref$thickness,
+    align = _ref.align,
+    svgProps = _objectWithoutProperties(_ref, _excluded);
+  return (
+    /*#__PURE__*/
+    // Took heavy inspiration from https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/CircularProgress/CircularProgress.js
+    _jsxs("svg", _objectSpread(_objectSpread({}, svgProps), {}, {
+      className: cx(stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["progress-spinner"]))), align && ALIGN_CLASSNAMES[align], className),
+      viewBox: "".concat(size / 2, " ").concat(size / 2, " ").concat(size, " ").concat(size),
+      width: size,
+      height: size,
+      role: "status",
+      "aria-busy": true,
+      "aria-live": "polite",
+      children: [/*#__PURE__*/_jsx("title", {
+        children: "Loading spinner"
+      }), /*#__PURE__*/_jsx("circle", {
+        cx: size,
+        cy: size,
+        r: (size - thickness) / 2,
+        fill: "none",
+        strokeWidth: thickness
+      })]
+    }))
+  );
+};

package/dist/esm/ProgressSpinner/ProgressSpinner.tailwind.d.ts

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

package/dist/esm/ProgressSpinner/ProgressSpinner.tailwind.js

@@ -0,0 +1,43 @@
+import _plugin from "tailwindcss/plugin";
+// @ts-check
+var plugin = _plugin;
+var progressSpinnerPlugin = plugin(function (_ref) {
+  var addComponents = _ref.addComponents,
+    theme = _ref.theme;
+  /**
+   * @param {string} color
+   */
+
+  addComponents({
+    ".progress-spinner": {
+      color: theme("colors.accent.600"),
+      stroke: "currentColor",
+      // eslint-disable-next-line @algolia/stl/prefer-stl-helper
+      animation: "stl-spinner 1.4s linear infinite"
+    },
+    "@media (prefers-reduced-motion: reduce)": {
+      ".progress-spinner": {
+        // eslint-disable-next-line @algolia/stl/prefer-stl-helper
+        animation: "stl-spinner 2.8s linear infinite"
+      }
+    },
+    // eslint-disable-next-line @algolia/stl/prefer-stl-helper
+    "@keyframes stl-spinner": {
+      "0%": {
+        transform: "rotate(0deg)",
+        strokeDasharray: "1px, 200px",
+        strokeDashoffset: "0px"
+      },
+      "50%": {
+        strokeDasharray: "100px, 200px",
+        strokeDashoffset: "-15px"
+      },
+      "100%": {
+        transform: "rotate(360deg)",
+        strokeDasharray: "100px, 200px",
+        strokeDashoffset: "-125px"
+      }
+    }
+  });
+});
+export default progressSpinnerPlugin;

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

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

package/dist/esm/ProgressSpinner/index.js

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

package/dist/esm/RadioGroup/RadioButton.d.ts

@@ -0,0 +1,3 @@
+import type { HTMLAttributes, InputHTMLAttributes } from "react";
+export declare type RadioButtonProps = HTMLAttributes<HTMLInputElement> & Pick<InputHTMLAttributes<HTMLInputElement>, "value" | "name" | "checked" | "defaultChecked" | "onChange" | "required" | "autoFocus" | "disabled">;
+export declare const RadioButton: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLInputElement> & Pick<InputHTMLAttributes<HTMLInputElement>, "value" | "defaultChecked" | "onChange" | "name" | "autoFocus" | "disabled" | "checked" | "required"> & import("react").RefAttributes<HTMLInputElement>>;

package/dist/esm/RadioGroup/RadioButton.js

@@ -0,0 +1,21 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _templateObject;
+var _excluded = ["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 { forwardRef } from "react";
+import stl from "../styles/helpers/satellitePrefixer";
+import { jsx as _jsx } from "react/jsx-runtime";
+export var RadioButton = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_jsx("input", _objectSpread(_objectSpread({}, props), {}, {
+    className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["radio-button"]))), className),
+    type: "radio",
+    ref: ref
+  }));
+});
+RadioButton.displayName = "RadioButton";

package/dist/esm/RadioGroup/RadioButton.tailwind.d.ts

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

package/dist/esm/RadioGroup/RadioButton.tailwind.js

@@ -0,0 +1,62 @@
+import _rgba from "../styles/rgba";
+import _disabledColor from "../styles/disabledColor";
+import _plugin from "tailwindcss/plugin";
+// @ts-check
+var plugin = _plugin;
+var disabledColor = _disabledColor;
+var rgba = _rgba;
+var radioButtonPlugin = plugin(function (_ref) {
+  var addComponents = _ref.addComponents,
+    theme = _ref.theme;
+  addComponents({
+    ".radio-button": {
+      position: "relative",
+      width: "16px",
+      height: "16px",
+      appearance: "none",
+      outline: "0px",
+      background: theme("colors.white"),
+      border: "1px solid ".concat(theme("colors.grey.500")),
+      borderRadius: "50%",
+      boxShadow: "inset 0 1px 4px 0 ".concat(rgba(theme("colors.grey.500"), 0.3)),
+      "&:hover": {
+        borderColor: theme("colors.grey.600")
+      },
+      "&:focus": {
+        borderColor: theme("colors.accent.600"),
+        boxShadow: "0 1px 0 0 ".concat(theme("colors.shadow.5"))
+      },
+      "&:checked": {
+        borderColor: theme("colors.accent.600"),
+        boxShadow: "0 1px 0 0 ".concat(theme("colors.shadow.5")),
+        "&::after": {
+          position: "absolute",
+          right: "4px",
+          left: "4px",
+          top: "4px",
+          bottom: "4px",
+          content: '" "',
+          background: theme("colors.accent.600"),
+          borderRadius: "50%"
+        },
+        "&:hover": {
+          borderColor: theme("colors.accent.700")
+        },
+        "&:focus": {
+          boxShadow: "\n            0 0 0 1px ".concat(theme("colors.accent.600"), ",\n            0 1px 0 0 ").concat(theme("colors.shadow.5"), "\n          ")
+        }
+      },
+      "&:disabled": {
+        backgroundImage: "linear-gradient(-180deg, ".concat(theme("colors.white"), " 0%, ").concat(theme("colors.grey.100"), " 100%)"),
+        borderColor: disabledColor(theme("colors.grey.200")),
+        boxShadow: "none",
+        cursor: "not-allowed",
+        "&:checked::after": {
+          background: disabledColor(theme("colors.grey.200")),
+          boxShadow: "none"
+        }
+      }
+    }
+  });
+});
+export default radioButtonPlugin;

package/dist/esm/RadioGroup/RadioGroup.d.ts

@@ -0,0 +1,31 @@
+import type { ReactNode, VFC } from "react";
+export interface RadioGroupProps {
+    /** @ignore */
+    className?: string;
+    name?: string;
+    value: string;
+    disabled?: boolean;
+    /**
+     * `RadioGroupItem` text position
+     * @default left
+     */
+    textPosition?: "left" | "right";
+    onChange: (newValue: string) => void;
+    children?: ReactNode;
+}
+export interface RadioGroupItemProps {
+    value: string;
+    disabled?: boolean;
+    children?: ReactNode;
+}
+declare type RadioGroupSubComponents = {
+    Item: VFC<RadioGroupItemProps>;
+};
+export declare const RadioGroupItem: VFC<RadioGroupItemProps>;
+/**
+ * The `RadioGroup` component presents mutually exclusive options, allowing users to make a single selection from a list.
+ *
+ * See the [Radio Group documentation page](https://satellite.algolia.com/components/controls/radio-group) for more information.
+ */
+export declare const RadioGroup: VFC<RadioGroupProps> & RadioGroupSubComponents;
+export {};

package/dist/esm/RadioGroup/RadioGroup.js

@@ -0,0 +1,86 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+import { useState } from "react";
+import { Card } from "../Card";
+import stl from "../styles/helpers/satellitePrefixer";
+import { uniqueId } from "../utils/uniqueId";
+import { RadioButton } from "./RadioButton";
+import { RadioGroupContext, useRadioGroupContext } from "./RadiogroupContext";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export var RadioGroupItem = function RadioGroupItem(_ref) {
+  var value = _ref.value,
+    disabled = _ref.disabled,
+    children = _ref.children;
+  var _useRadioGroupContext = useRadioGroupContext(),
+    name = _useRadioGroupContext.name,
+    contextDisabled = _useRadioGroupContext.disabled,
+    _onChange = _useRadioGroupContext.onChange,
+    contextValue = _useRadioGroupContext.value,
+    _useRadioGroupContext2 = _useRadioGroupContext.textPosition,
+    textPosition = _useRadioGroupContext2 === void 0 ? "left" : _useRadioGroupContext2;
+  var checked = value === contextValue;
+  disabled = contextDisabled || disabled;
+  return /*#__PURE__*/_jsxs("label", {
+    className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      flex items-center justify-between\n      min-h-10 px-4 py-2\n      ", "\n      ", "\n      ", ""])), disabled ? "text-grey-300" : "hover:bg-grey-100", disabled ? "cursor-not-allowed" : "cursor-pointer", textPosition === "right" && "flex-row-reverse"),
+    children: [/*#__PURE__*/_jsx("span", {
+      className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["flex-1 truncate ", ""])), textPosition === "right" ? "ml-2" : "mr-2"),
+      children: children
+    }), /*#__PURE__*/_jsx(RadioButton, {
+      className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["shrink-0 self-start mt-1"]))),
+      value: value,
+      checked: checked,
+      name: name,
+      onChange: function onChange() {
+        if (!disabled && !checked) {
+          _onChange(value);
+        }
+      },
+      disabled: disabled
+    })]
+  });
+};
+
+/**
+ * The `RadioGroup` component presents mutually exclusive options, allowing users to make a single selection from a list.
+ *
+ * See the [Radio Group documentation page](https://satellite.algolia.com/components/controls/radio-group) for more information.
+ */
+export var RadioGroup = function RadioGroup(_ref2) {
+  var className = _ref2.className,
+    name = _ref2.name,
+    value = _ref2.value,
+    disabled = _ref2.disabled,
+    textPosition = _ref2.textPosition,
+    children = _ref2.children,
+    onChange = _ref2.onChange;
+  var _useState = useState(function () {
+      return uniqueId("RadioGroupName-");
+    }),
+    _useState2 = _slicedToArray(_useState, 1),
+    componentDefaultName = _useState2[0];
+  name = name || componentDefaultName;
+  var contextValue = {
+    name: name,
+    value: value,
+    disabled: disabled,
+    onChange: onChange,
+    textPosition: textPosition
+  };
+  return /*#__PURE__*/_jsx(Card, {
+    fullBleed: true,
+    className: className,
+    children: /*#__PURE__*/_jsx(RadioGroupContext.Provider, {
+      value: contextValue,
+      children: /*#__PURE__*/_jsx("fieldset", {
+        className: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["min-w-0"]))),
+        children: /*#__PURE__*/_jsx("div", {
+          className: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["flex flex-col py-1"]))),
+          children: children
+        })
+      })
+    })
+  });
+};
+RadioGroup.Item = RadioGroupItem;

package/dist/esm/RadioGroup/RadiogroupContext.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+export interface RadioGroupContextType {
+    name: string;
+    value: string;
+    disabled?: boolean;
+    /** `RadioGroupItem` text position */
+    textPosition?: "left" | "right";
+    onChange: (newValue: string) => void;
+}
+export declare const RadioGroupContext: import("react").Context<RadioGroupContextType | null>;
+export declare const useRadioGroupContext: () => RadioGroupContextType;

package/dist/esm/RadioGroup/RadiogroupContext.js

@@ -0,0 +1,9 @@
+import { createContext, useContext } from "react";
+export var RadioGroupContext = /*#__PURE__*/createContext(null);
+export var useRadioGroupContext = function useRadioGroupContext() {
+  var contextValue = useContext(RadioGroupContext);
+  if (!contextValue) {
+    throw new Error("Invalid usage of useRadioGroupContext outside of RadioGroupContext");
+  }
+  return contextValue;
+};

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

@@ -0,0 +1,2 @@
+export * from "./RadioGroup";
+export * from "./RadioButton";

package/dist/esm/RadioGroup/index.js

@@ -0,0 +1,2 @@
+export * from "./RadioGroup";
+export * from "./RadioButton";

package/dist/esm/RangeSlider/RangeSlider.d.ts

@@ -0,0 +1,36 @@
+import type { ForwardedRef } from "react";
+declare type RangeSliderValue = number | [number, number];
+declare type WidenNumber<T> = T extends number ? number : T;
+export interface RangeSliderProps<Value extends RangeSliderValue = number> {
+    value?: WidenNumber<Value>;
+    defaultValue?: WidenNumber<Value>;
+    /** Event handler called when the value changes. */
+    onChange?: (value: WidenNumber<Value>) => void;
+    /** Event handler called when the value changes at the end of an interaction. */
+    onCommit?: (value: WidenNumber<Value>) => void;
+    id?: string;
+    name?: string;
+    /** @ignore */
+    className?: string;
+    /** @ignore */
+    "aria-label"?: string;
+    disabled?: boolean;
+    min?: number;
+    max?: number;
+    step?: number;
+    minStepsBetweenThumbs?: number;
+    track1Color?: string;
+    track2Color?: string;
+}
+declare const RangeSliderInternal: <Value extends RangeSliderValue = number>({ className, value, defaultValue, onChange, onCommit, disabled, min, max, track1Color, track2Color, ...otherProps }: RangeSliderProps<Value>, ref: ForwardedRef<HTMLSpanElement>) => JSX.Element;
+/**
+ * The `RangeSlider` component is an input field where users select one or two numeric values within a given range (minimum and maximum values).
+ *
+ * See the [Range Slider documentation page](https://satellite.algolia.com/components/controls/range-slider) for more information.
+ */
+export declare const RangeSlider: (<Value extends RangeSliderValue>(props: RangeSliderProps<Value> & {
+    ref?: ForwardedRef<HTMLSpanElement> | undefined;
+}) => ReturnType<typeof RangeSliderInternal>) & {
+    displayName?: string | undefined;
+};
+export {};