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

package/esm/Pagination/Pagination/Pagination.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+export declare type PaginationLocale = {
+    goToPage?(page: number): string;
+    goToNextPage?: string;
+    goToPreviousPage?: string;
+};
+export interface PaginationProps {
+    nbPages: number;
+    currentPage: number;
+    maxButtons?: number;
+    onChange: (page: number) => void;
+    locale?: PaginationLocale;
+}
+/**
+ * Use pagination to help our users to move through an ordered collection of items.
+ *
+ * ## Best practices
+ * - Don't use on list with less than 20 items
+ * - Place the pagination at the bottom of the split item
+ */
+export declare const Pagination: ({ currentPage, nbPages, onChange, maxButtons: maxButtonsParam, locale: propsLocale, }: PaginationProps) => JSX.Element;
+export default Pagination;

package/esm/Pagination/Pagination/Pagination.js

@@ -0,0 +1,114 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject;
+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) { _defineProperty(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; }
+import { ArrowLeft, ArrowRight } from "react-feather";
+import Button, { ButtonGroup } from "../../Button";
+import { useLocale } from "../../Satellite";
+import stl from "../../styles/helpers/satellitePrefixer";
+import range from "../../utils/range";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var DEFAULT_PAGINATION_LOCALE = {
+  goToPage: function goToPage(index) {
+    return "Go to page ".concat(index);
+  },
+  goToPreviousPage: "Go to previous page",
+  goToNextPage: "Go to next page"
+};
+var DEFAULT_MAX_BUTTONS = 10;
+var Ellipsis = function Ellipsis() {
+  return /*#__PURE__*/_jsx(Button, {
+    className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["pointer-events-none"]))),
+    tabIndex: -1,
+    "aria-disabled": true,
+    children: "\u2026"
+  });
+};
+var Group = function Group(_ref) {
+  var group = _ref.group,
+    currentPage = _ref.currentPage,
+    onChange = _ref.onChange,
+    goToPage = _ref.goToPage;
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: group.map(function (index) {
+      return /*#__PURE__*/_jsx(Button, {
+        "aria-label": goToPage(index),
+        variant: index === currentPage ? "primary" : "neutral",
+        onClick: function onClick() {
+          return onChange(index);
+        },
+        children: index
+      }, index);
+    })
+  });
+};
+
+/**
+ * Use pagination to help our users to move through an ordered collection of items.
+ *
+ * ## Best practices
+ * - Don't use on list with less than 20 items
+ * - Place the pagination at the bottom of the split item
+ */
+export var Pagination = function Pagination(_ref2) {
+  var currentPage = _ref2.currentPage,
+    nbPages = _ref2.nbPages,
+    onChange = _ref2.onChange,
+    _ref2$maxButtons = _ref2.maxButtons,
+    maxButtonsParam = _ref2$maxButtons === void 0 ? DEFAULT_MAX_BUTTONS : _ref2$maxButtons,
+    propsLocale = _ref2.locale;
+  var contextLocale = useLocale("pagination");
+  var locale = _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_PAGINATION_LOCALE), contextLocale), propsLocale);
+  var padding = Math.floor((Math.min(nbPages, maxButtonsParam) - 1) / 2);
+  var maxButtons = 2 * padding + 1;
+  var currentPageGroupStart = Math.max(1, Math.min(currentPage - padding, nbPages - maxButtons));
+  var currentPageGroupEnd = Math.min(currentPageGroupStart + maxButtons, nbPages);
+  var groups = [[], range(currentPageGroupStart, currentPageGroupEnd + 1), []];
+  if (currentPageGroupStart > 1) {
+    groups[0].push(1);
+  }
+  if (currentPageGroupEnd < nbPages) {
+    groups[2].push(nbPages);
+  }
+  return /*#__PURE__*/_jsxs(ButtonGroup, {
+    as: "nav",
+    children: [/*#__PURE__*/_jsx(Button, {
+      "aria-label": locale.goToPreviousPage,
+      disabled: currentPage === 1,
+      onClick: function onClick() {
+        return onChange(currentPage - 1);
+      },
+      children: /*#__PURE__*/_jsx(ArrowLeft, {
+        size: "1em"
+      })
+    }), /*#__PURE__*/_jsx(Group, {
+      currentPage: currentPage,
+      onChange: onChange,
+      group: groups[0],
+      goToPage: locale.goToPage
+    }), groups[0].length !== 0 && groups[1][0] - groups[0][0] > 1 && /*#__PURE__*/_jsx(Ellipsis, {}), /*#__PURE__*/_jsx(Group, {
+      currentPage: currentPage,
+      onChange: onChange,
+      group: groups[1],
+      goToPage: locale.goToPage
+    }), groups[2].length !== 0 && groups[2][0] - groups[1][groups[1].length - 1] > 1 && /*#__PURE__*/_jsx(Ellipsis, {}), /*#__PURE__*/_jsx(Group, {
+      currentPage: currentPage,
+      onChange: onChange,
+      group: groups[2],
+      goToPage: locale.goToPage
+    }), /*#__PURE__*/_jsx(Button, {
+      "aria-label": locale.goToNextPage,
+      disabled: currentPage === nbPages,
+      onClick: function onClick() {
+        return onChange(currentPage + 1);
+      },
+      children: /*#__PURE__*/_jsx(ArrowRight, {
+        size: "1em"
+      })
+    })]
+  });
+};
+export default Pagination;

package/esm/Pagination/Pagination/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Pagination";
+export { default } from "./Pagination";

package/esm/Pagination/Pagination/index.js

@@ -0,0 +1,2 @@
+export * from "./Pagination";
+export { default } from "./Pagination";

package/esm/Pagination/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./Pagination";
+export * from "./DotPagination";
+export * from "./CompactPagination";
+export { default } from "./Pagination";

package/esm/Pagination/index.js

@@ -0,0 +1,4 @@
+export * from "./Pagination";
+export * from "./DotPagination";
+export * from "./CompactPagination";
+export { default } from "./Pagination";

package/esm/ProgressBar/ProgressBar.d.ts

@@ -0,0 +1,13 @@
+import type { HTMLAttributes } from "react";
+export interface ProgressBarProps extends HTMLAttributes<HTMLDivElement> {
+    barClassName?: string;
+    value: number;
+}
+/**
+ * Progress bars visually represent the completion of a task or operation.
+ *
+ * - Progress bars show an indication of how much of the task has been completed and how much is still left.
+ * - You should indicate either a percentage or other numeric values (such as - 234/4092 queries processed)
+ */
+export declare const ProgressBar: ({ value, className, barClassName, ...props }: ProgressBarProps) => JSX.Element;
+export default ProgressBar;

package/esm/ProgressBar/ProgressBar.js

@@ -0,0 +1,37 @@
+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 = ["value", "className", "barClassName"];
+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) { _defineProperty(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; }
+import cx from "clsx";
+import stl from "../styles/helpers/satellitePrefixer";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Progress bars visually represent the completion of a task or operation.
+ *
+ * - Progress bars show an indication of how much of the task has been completed and how much is still left.
+ * - You should indicate either a percentage or other numeric values (such as - 234/4092 queries processed)
+ */
+export var ProgressBar = function ProgressBar(_ref) {
+  var value = _ref.value,
+    className = _ref.className,
+    barClassName = _ref.barClassName,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({}, props), {}, {
+    className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["progress-bar"]))), className),
+    role: "progressbar",
+    "aria-valuenow": value,
+    "aria-valuemin": 0,
+    "aria-valuemax": 100,
+    children: /*#__PURE__*/_jsx("div", {
+      className: cx(stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["progress-bar-progress"]))), barClassName),
+      style: {
+        width: "".concat(value, "%"),
+        transition: "all 150ms ease-in-out"
+      }
+    })
+  }));
+};
+export default ProgressBar;

package/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").Config> | undefined;
+};

package/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/esm/ProgressBar/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./ProgressBar";
+export { default } from "./ProgressBar";

package/esm/ProgressBar/index.js

@@ -0,0 +1,2 @@
+export * from "./ProgressBar";
+export { default } from "./ProgressBar";

package/esm/ProgressSpinner/ProgressSpinner.d.ts

@@ -0,0 +1,9 @@
+import type { SVGAttributes } from "react";
+export declare type ProgressSpinnerAlign = "left" | "center" | "right";
+export interface ProgressSpinnerProps extends SVGAttributes<SVGSVGElement> {
+    size?: number;
+    thickness?: number;
+    align?: ProgressSpinnerAlign;
+}
+export declare const ProgressSpinner: ({ className, size, thickness, align, ...svgProps }: ProgressSpinnerProps) => JSX.Element;
+export default ProgressSpinner;

package/esm/ProgressSpinner/ProgressSpinner.js

@@ -0,0 +1,46 @@
+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(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) { _defineProperty(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; }
+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"])))
+};
+
+// Took heavy inspiration from https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/CircularProgress/CircularProgress.js
+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__*/_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
+    })]
+  }));
+};
+export default ProgressSpinner;

package/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").Config> | undefined;
+};

package/esm/ProgressSpinner/ProgressSpinner.tailwind.js

@@ -0,0 +1,35 @@
+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",
+      animation: "stl-spinner 1.4s linear infinite"
+    },
+    "@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/esm/ProgressSpinner/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./ProgressSpinner";
+export { default } from "./ProgressSpinner";

package/esm/ProgressSpinner/index.js

@@ -0,0 +1,2 @@
+export * from "./ProgressSpinner";
+export { default } from "./ProgressSpinner";

package/esm/RadioGroup/RadioButton.d.ts

@@ -0,0 +1,4 @@
+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>, "required" | "name" | "value" | "disabled" | "autoFocus" | "checked" | "defaultChecked" | "onChange"> & import("react").RefAttributes<HTMLInputElement>>;
+export default RadioButton;

package/esm/RadioGroup/RadioButton.js

@@ -0,0 +1,22 @@
+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(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) { _defineProperty(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; }
+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";
+export default RadioButton;

package/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").Config> | undefined;
+};

package/esm/RadioGroup/RadioButton.tailwind.js

@@ -0,0 +1,59 @@
+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%"
+        },
+        "&: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/esm/RadioGroup/RadioGroup.d.ts

@@ -0,0 +1,40 @@
+import type { FunctionComponent, ReactNode } from "react";
+export interface RadioGroupProps {
+    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;
+}
+export declare const RadioGroupItem: FunctionComponent<RadioGroupItemProps>;
+/**
+ * Use radio buttons when users have to make a single selection from a list of options.
+ *
+ * - Use radio buttons when a user has to choose from at least 2 options.
+ * - Whenever possible, provide a default, preselected option.
+ * - Choices provided in the list of options should be mutually exclusive so that a user doesn't struggle between two values. Provide a clear distinction.
+ * - Radio groups are always stacked vertically.
+ * - List options in a radio group in a logical order, for example:
+ *   - Most likely to least likely to be selected.
+ *   - Simplest to most complex operation.
+ *   - Least to most risk.
+ *   - etc.
+ * - If you need to have an unselected state, just add a radio button with a *None* option.
+ * - Sometimes, you might want to include an *Other* option (Usually followed by a text input if a user needs to provide a specific answer)
+ */
+export declare const RadioGroup: {
+    ({ className, name, value, disabled, textPosition, children, onChange }: RadioGroupProps): JSX.Element;
+    Item: FunctionComponent<RadioGroupItemProps>;
+};
+export default RadioGroup;

package/esm/RadioGroup/RadioGroup.js

@@ -0,0 +1,97 @@
+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
+    })]
+  });
+};
+
+/**
+ * Use radio buttons when users have to make a single selection from a list of options.
+ *
+ * - Use radio buttons when a user has to choose from at least 2 options.
+ * - Whenever possible, provide a default, preselected option.
+ * - Choices provided in the list of options should be mutually exclusive so that a user doesn't struggle between two values. Provide a clear distinction.
+ * - Radio groups are always stacked vertically.
+ * - List options in a radio group in a logical order, for example:
+ *   - Most likely to least likely to be selected.
+ *   - Simplest to most complex operation.
+ *   - Least to most risk.
+ *   - etc.
+ * - If you need to have an unselected state, just add a radio button with a *None* option.
+ * - Sometimes, you might want to include an *Other* option (Usually followed by a text input if a user needs to provide a specific answer)
+ */
+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;
+export default RadioGroup;

package/esm/RadioGroup/RadiogroupContext.d.ts

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

package/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/esm/RadioGroup/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./RadioGroup";
+export * from "./RadioButton";
+export * from "./RadiogroupContext";
+export { default } from "./RadioGroup";

package/esm/RadioGroup/index.js

@@ -0,0 +1,4 @@
+export * from "./RadioGroup";
+export * from "./RadioButton";
+export * from "./RadiogroupContext";
+export { default } from "./RadioGroup";