@eightshift/ui-components 0.0.1

package/dist/components/radio/radio.js

@@ -0,0 +1,552 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { a as $01b77f81d0f07f68$export$75b6ee27786ba447, $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-BPzS-sR7.js";
+import { d as $3ef42575df84b30b$export$9d1611c77c2fe928, e as $bdb11010cef70236$export$f680877a34711e37, a as $64fa3d84918910a7$export$29f1550f4b0d4415, $ as $64fa3d84918910a7$export$fabf2dc03a41866e, h as $64fa3d84918910a7$export$9d4c57ee4c6ffdd8, c as $64fa3d84918910a7$export$4d86445c2cf5e3, j as $64fa3d84918910a7$export$2881499e37b75b9a, l as $df56164dff5785e2$export$4338b53315abf666, m as $5dc95899b306f630$export$c9058316764c140e, i as $64fa3d84918910a7$export$ef03459518577ad4 } from "../../utils-BsiH7-5Y.js";
+import { a as $2baaea4c71418dea$export$294aa081a6c6f55d, $ as $ee014567cb39d3f0$export$ff05c3ac10437e03 } from "../../FieldError-wtMA4667.js";
+import { $ as $d3e0e05bdfcf66bd$export$c24727297075ec6a } from "../../Form-Cq3fu75_.js";
+import { a as $514c0188e459b4c0$export$9afb8bc826b033ea } from "../../Text-BM136LvS.js";
+import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-DG2RfOUr.js";
+import React__default, { useMemo, useState, forwardRef, createContext, cloneElement } from "react";
+import { a as $e93e671b31057976$export$b8473d3665f3a75a, $ as $e5be200c675c3b3a$export$fc1a364ae1f3ff10 } from "../../useFormValidationState-BAPPNXic.js";
+import { d as $9ab94262bd0047c7$export$420e68273165f4ec, e as $458b0a5536c1a7cf$export$40bfa8c7b0832715, $ as $6179b936705e76d3$export$ae780daf29e6d456 } from "../../focusSafely-C3K8zAKj.js";
+import { a as $9bf71ea28793e738$export$2d6ec8fc375ceafa } from "../../FocusScope-1u9yyfIN.js";
+import { $ as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "../../context-jMy6xdVq.js";
+import { $ as $99facab73266f662$export$5add1d006293d136 } from "../../useFormReset-Buc9YJcv.js";
+import { $ as $e6afbd83fe6ebbd2$export$4c014de7c8940b4c } from "../../useFocusable-5q1Gek1J.js";
+import { $ as $f6c31cce2adf654f$export$45712eceda6fad21 } from "../../usePress-BQgVor4T.js";
+import { $ as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../../useFocusRing-Cc-4eouh.js";
+import { $ as $5c3e21d68f1c4674$export$439d29a4e110a164 } from "../../VisuallyHidden-BYRI1Lfo.js";
+import { classnames } from "../../utilities/classnames.js";
+import { AnimatedVisibility } from "../animated-visibility/animated-visibility.js";
+import { RichLabel } from "../rich-label/rich-label.js";
+import { BaseControl } from "../base-control/base-control.js";
+const $884aeceb3d67f00f$export$37b65e5b5444d35c = /* @__PURE__ */ new WeakMap();
+function $0d5c49892c1215da$export$37b0961d2f4751e2(props, state, ref) {
+  let { value, children, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby } = props;
+  const isDisabled = props.isDisabled || state.isDisabled;
+  let hasChildren = children != null;
+  let hasAriaLabel = ariaLabel != null || ariaLabelledby != null;
+  if (!hasChildren && !hasAriaLabel)
+    console.warn("If you do not provide children, you must specify an aria-label for accessibility");
+  let checked = state.selectedValue === value;
+  let onChange = (e) => {
+    e.stopPropagation();
+    state.setSelectedValue(value);
+  };
+  let { pressProps, isPressed } = $f6c31cce2adf654f$export$45712eceda6fad21({
+    isDisabled
+  });
+  let { pressProps: labelProps, isPressed: isLabelPressed } = $f6c31cce2adf654f$export$45712eceda6fad21({
+    isDisabled,
+    onPress() {
+      state.setSelectedValue(value);
+    }
+  });
+  let { focusableProps } = $e6afbd83fe6ebbd2$export$4c014de7c8940b4c($3ef42575df84b30b$export$9d1611c77c2fe928(props, {
+    onFocus: () => state.setLastFocusedValue(value)
+  }), ref);
+  let interactions = $3ef42575df84b30b$export$9d1611c77c2fe928(pressProps, focusableProps);
+  let domProps = $65484d02dcb7eb3e$export$457c3d6518dd4c6f(props, {
+    labelable: true
+  });
+  let tabIndex = -1;
+  if (state.selectedValue != null) {
+    if (state.selectedValue === value)
+      tabIndex = 0;
+  } else if (state.lastFocusedValue === value || state.lastFocusedValue == null)
+    tabIndex = 0;
+  if (isDisabled)
+    tabIndex = void 0;
+  let { name, descriptionId, errorMessageId, validationBehavior } = $884aeceb3d67f00f$export$37b65e5b5444d35c.get(state);
+  $99facab73266f662$export$5add1d006293d136(ref, state.selectedValue, state.setSelectedValue);
+  $e93e671b31057976$export$b8473d3665f3a75a({
+    validationBehavior
+  }, state, ref);
+  return {
+    labelProps: $3ef42575df84b30b$export$9d1611c77c2fe928(labelProps, {
+      onClick: (e) => e.preventDefault()
+    }),
+    inputProps: $3ef42575df84b30b$export$9d1611c77c2fe928(domProps, {
+      ...interactions,
+      type: "radio",
+      name,
+      tabIndex,
+      disabled: isDisabled,
+      required: state.isRequired && validationBehavior === "native",
+      checked,
+      value,
+      onChange,
+      "aria-describedby": [
+        props["aria-describedby"],
+        state.isInvalid ? errorMessageId : null,
+        descriptionId
+      ].filter(Boolean).join(" ") || void 0
+    }),
+    isDisabled,
+    isSelected: checked,
+    isPressed: isPressed || isLabelPressed
+  };
+}
+function $430f30ed08ec25fa$export$62b9571f283ff5c2(props, state) {
+  let { name, isReadOnly, isRequired, isDisabled, orientation = "vertical", validationBehavior = "aria" } = props;
+  let { direction } = $18f2051aff69b9bf$export$43bb16f9c6d9e3f7();
+  let { isInvalid, validationErrors, validationDetails } = state.displayValidation;
+  let { labelProps, fieldProps, descriptionProps, errorMessageProps } = $2baaea4c71418dea$export$294aa081a6c6f55d({
+    ...props,
+    // Radio group is not an HTML input element so it
+    // shouldn't be labeled by a <label> element.
+    labelElementType: "span",
+    isInvalid: state.isInvalid,
+    errorMessage: props.errorMessage || validationErrors
+  });
+  let domProps = $65484d02dcb7eb3e$export$457c3d6518dd4c6f(props, {
+    labelable: true
+  });
+  let { focusWithinProps } = $9ab94262bd0047c7$export$420e68273165f4ec({
+    onBlurWithin(e) {
+      var _props_onBlur;
+      (_props_onBlur = props.onBlur) === null || _props_onBlur === void 0 ? void 0 : _props_onBlur.call(props, e);
+      if (!state.selectedValue)
+        state.setLastFocusedValue(null);
+    },
+    onFocusWithin: props.onFocus,
+    onFocusWithinChange: props.onFocusChange
+  });
+  let onKeyDown = (e) => {
+    let nextDir;
+    switch (e.key) {
+      case "ArrowRight":
+        if (direction === "rtl" && orientation !== "vertical")
+          nextDir = "prev";
+        else
+          nextDir = "next";
+        break;
+      case "ArrowLeft":
+        if (direction === "rtl" && orientation !== "vertical")
+          nextDir = "next";
+        else
+          nextDir = "prev";
+        break;
+      case "ArrowDown":
+        nextDir = "next";
+        break;
+      case "ArrowUp":
+        nextDir = "prev";
+        break;
+      default:
+        return;
+    }
+    e.preventDefault();
+    let walker = $9bf71ea28793e738$export$2d6ec8fc375ceafa(e.currentTarget, {
+      from: e.target
+    });
+    let nextElem;
+    if (nextDir === "next") {
+      nextElem = walker.nextNode();
+      if (!nextElem) {
+        walker.currentNode = e.currentTarget;
+        nextElem = walker.firstChild();
+      }
+    } else {
+      nextElem = walker.previousNode();
+      if (!nextElem) {
+        walker.currentNode = e.currentTarget;
+        nextElem = walker.lastChild();
+      }
+    }
+    if (nextElem) {
+      nextElem.focus();
+      state.setSelectedValue(nextElem.value);
+    }
+  };
+  let groupName = $bdb11010cef70236$export$f680877a34711e37(name);
+  $884aeceb3d67f00f$export$37b65e5b5444d35c.set(state, {
+    name: groupName,
+    descriptionId: descriptionProps.id,
+    errorMessageId: errorMessageProps.id,
+    validationBehavior
+  });
+  return {
+    radioGroupProps: $3ef42575df84b30b$export$9d1611c77c2fe928(domProps, {
+      // https://www.w3.org/TR/wai-aria-1.2/#radiogroup
+      role: "radiogroup",
+      onKeyDown,
+      "aria-invalid": state.isInvalid || void 0,
+      "aria-errormessage": props["aria-errormessage"],
+      "aria-readonly": isReadOnly || void 0,
+      "aria-required": isRequired || void 0,
+      "aria-disabled": isDisabled || void 0,
+      "aria-orientation": orientation,
+      ...fieldProps,
+      ...focusWithinProps
+    }),
+    labelProps,
+    descriptionProps,
+    errorMessageProps,
+    isInvalid,
+    validationErrors,
+    validationDetails
+  };
+}
+let $a54cdc5c1942b639$var$instance = Math.round(Math.random() * 1e10);
+let $a54cdc5c1942b639$var$i = 0;
+function $a54cdc5c1942b639$export$bca9d026f8e704eb(props) {
+  let name = useMemo(() => props.name || `radio-group-${$a54cdc5c1942b639$var$instance}-${++$a54cdc5c1942b639$var$i}`, [
+    props.name
+  ]);
+  var _props_defaultValue;
+  let [selectedValue, setSelected] = $458b0a5536c1a7cf$export$40bfa8c7b0832715(props.value, (_props_defaultValue = props.defaultValue) !== null && _props_defaultValue !== void 0 ? _props_defaultValue : null, props.onChange);
+  let [lastFocusedValue, setLastFocusedValue] = useState(null);
+  let validation = $e5be200c675c3b3a$export$fc1a364ae1f3ff10({
+    ...props,
+    value: selectedValue
+  });
+  let setSelectedValue = (value) => {
+    if (!props.isReadOnly && !props.isDisabled) {
+      setSelected(value);
+      validation.commitValidation();
+    }
+  };
+  let isInvalid = validation.displayValidation.isInvalid;
+  return {
+    ...validation,
+    name,
+    selectedValue,
+    setSelectedValue,
+    lastFocusedValue,
+    setLastFocusedValue,
+    isDisabled: props.isDisabled || false,
+    isReadOnly: props.isReadOnly || false,
+    isRequired: props.isRequired || false,
+    validationState: props.validationState || (isInvalid ? "invalid" : null),
+    isInvalid
+  };
+}
+const $b6c3ddc6086f204d$export$a79eda4ff50e30b6 = /* @__PURE__ */ createContext(null);
+const $b6c3ddc6086f204d$export$b118023277d4a5c3 = /* @__PURE__ */ createContext(null);
+const $b6c3ddc6086f204d$export$29d84393af70866c = /* @__PURE__ */ createContext(null);
+function $b6c3ddc6086f204d$var$RadioGroup(props, ref) {
+  [props, ref] = $64fa3d84918910a7$export$29f1550f4b0d4415(props, ref, $b6c3ddc6086f204d$export$a79eda4ff50e30b6);
+  let { validationBehavior: formValidationBehavior } = $64fa3d84918910a7$export$fabf2dc03a41866e($d3e0e05bdfcf66bd$export$c24727297075ec6a) || {};
+  var _props_validationBehavior, _ref;
+  let validationBehavior = (_ref = (_props_validationBehavior = props.validationBehavior) !== null && _props_validationBehavior !== void 0 ? _props_validationBehavior : formValidationBehavior) !== null && _ref !== void 0 ? _ref : "native";
+  let state = $a54cdc5c1942b639$export$bca9d026f8e704eb({
+    ...props,
+    validationBehavior
+  });
+  let [labelRef, label] = $64fa3d84918910a7$export$9d4c57ee4c6ffdd8();
+  let { radioGroupProps, labelProps, descriptionProps, errorMessageProps, ...validation } = $430f30ed08ec25fa$export$62b9571f283ff5c2({
+    ...props,
+    label,
+    validationBehavior
+  }, state);
+  let renderProps = $64fa3d84918910a7$export$4d86445c2cf5e3({
+    ...props,
+    values: {
+      orientation: props.orientation || "vertical",
+      isDisabled: state.isDisabled,
+      isReadOnly: state.isReadOnly,
+      isRequired: state.isRequired,
+      isInvalid: state.isInvalid,
+      state
+    },
+    defaultClassName: "react-aria-RadioGroup"
+  });
+  return /* @__PURE__ */ React__default.createElement("div", {
+    ...radioGroupProps,
+    ...renderProps,
+    ref,
+    slot: props.slot || void 0,
+    "data-orientation": props.orientation || "vertical",
+    "data-invalid": state.isInvalid || void 0,
+    "data-disabled": state.isDisabled || void 0,
+    "data-readonly": state.isReadOnly || void 0,
+    "data-required": state.isRequired || void 0
+  }, /* @__PURE__ */ React__default.createElement($64fa3d84918910a7$export$2881499e37b75b9a, {
+    values: [
+      [
+        $b6c3ddc6086f204d$export$29d84393af70866c,
+        state
+      ],
+      [
+        $01b77f81d0f07f68$export$75b6ee27786ba447,
+        {
+          ...labelProps,
+          ref: labelRef,
+          elementType: "span"
+        }
+      ],
+      [
+        $514c0188e459b4c0$export$9afb8bc826b033ea,
+        {
+          slots: {
+            description: descriptionProps,
+            errorMessage: errorMessageProps
+          }
+        }
+      ],
+      [
+        $ee014567cb39d3f0$export$ff05c3ac10437e03,
+        validation
+      ]
+    ]
+  }, renderProps.children));
+}
+function $b6c3ddc6086f204d$var$Radio(props, ref) {
+  let { inputRef: userProvidedInputRef = null, ...otherProps } = props;
+  [props, ref] = $64fa3d84918910a7$export$29f1550f4b0d4415(otherProps, ref, $b6c3ddc6086f204d$export$b118023277d4a5c3);
+  let state = React__default.useContext($b6c3ddc6086f204d$export$29d84393af70866c);
+  let inputRef = $df56164dff5785e2$export$4338b53315abf666($5dc95899b306f630$export$c9058316764c140e(userProvidedInputRef, props.inputRef !== void 0 ? props.inputRef : null));
+  let { labelProps, inputProps, isSelected, isDisabled, isPressed } = $0d5c49892c1215da$export$37b0961d2f4751e2({
+    ...$64fa3d84918910a7$export$ef03459518577ad4(props),
+    // ReactNode type doesn't allow function children.
+    children: typeof props.children === "function" ? true : props.children
+  }, state, inputRef);
+  let { isFocused, isFocusVisible, focusProps } = $f7dceffc5ad7768b$export$4e328f61c538687f();
+  let interactionDisabled = isDisabled || state.isReadOnly;
+  let { hoverProps, isHovered } = $6179b936705e76d3$export$ae780daf29e6d456({
+    ...props,
+    isDisabled: interactionDisabled
+  });
+  let renderProps = $64fa3d84918910a7$export$4d86445c2cf5e3({
+    ...props,
+    defaultClassName: "react-aria-Radio",
+    values: {
+      isSelected,
+      isPressed,
+      isHovered,
+      isFocused,
+      isFocusVisible,
+      isDisabled,
+      isReadOnly: state.isReadOnly,
+      isInvalid: state.isInvalid,
+      isRequired: state.isRequired
+    }
+  });
+  let DOMProps = $65484d02dcb7eb3e$export$457c3d6518dd4c6f(props);
+  delete DOMProps.id;
+  return /* @__PURE__ */ React__default.createElement("label", {
+    ...$3ef42575df84b30b$export$9d1611c77c2fe928(DOMProps, labelProps, hoverProps, renderProps),
+    ref,
+    "data-selected": isSelected || void 0,
+    "data-pressed": isPressed || void 0,
+    "data-hovered": isHovered || void 0,
+    "data-focused": isFocused || void 0,
+    "data-focus-visible": isFocusVisible || void 0,
+    "data-disabled": isDisabled || void 0,
+    "data-readonly": state.isReadOnly || void 0,
+    "data-invalid": state.isInvalid || void 0,
+    "data-required": state.isRequired || void 0
+  }, /* @__PURE__ */ React__default.createElement($5c3e21d68f1c4674$export$439d29a4e110a164, {
+    elementType: "span"
+  }, /* @__PURE__ */ React__default.createElement("input", {
+    ...$3ef42575df84b30b$export$9d1611c77c2fe928(inputProps, focusProps),
+    ref: inputRef
+  })), renderProps.children);
+}
+const $b6c3ddc6086f204d$export$a98f0dcb43a68a25 = /* @__PURE__ */ forwardRef($b6c3ddc6086f204d$var$RadioGroup);
+const $b6c3ddc6086f204d$export$d7b12c4107be0d61 = /* @__PURE__ */ forwardRef($b6c3ddc6086f204d$var$Radio);
+/**
+ * A simple radio button.
+ *
+ * @component
+ * @param {Object} props - Component props.
+ * @param {JSX.Element} [props.icon] - The checkbox icon.
+ * @param {string} [props.label] - The checkbox label.
+ * @param {string} [props.subtitle] - The checkbox subtitle.
+ * @param {boolean} [props.disabled] - Whether the checkbox is disabled.
+ * @param {string} [props.className] - Additional classes to add to the checkbox container.
+ * @param {string} [props.labelClassName] - Additional classes to add to the label container.
+ * @param {boolean} [props.alignEnd] - Whether the label should be aligned to the end.
+ *
+ * @returns {JSX.Element} The RadioButton component.
+ *
+ * @see {@link RadioButtonGroup} for usage example.
+ *
+ * @preserve
+ */
+const RadioButton = (props) => {
+  const {
+    icon,
+    label,
+    subtitle,
+    disabled,
+    className,
+    labelClassName,
+    design = "default",
+    alignEnd,
+    children,
+    ...other
+  } = props;
+  const styles = {
+    segmented: classnames(
+      "es-uic-py-1 es-uic-px-1.5 es-uic-border hover:es-uic-bg-gray-50 es-uic-transition",
+      "first:es-uic-rounded-t-lg last:es-uic-rounded-b-lg",
+      "focus-visible:es-uic-ring focus-visible:es-uic-ring-teal-500 focus-visible:es-uic-ring-opacity-50 focus-visible:es-uic-z-10"
+    ),
+    segmentedHorizontal: classnames(
+      "es-uic-py-1 es-uic-px-1.5 es-uic-border hover:es-uic-bg-gray-50 es-uic-transition es-uic-grow",
+      "first:es-uic-rounded-l-lg last:es-uic-rounded-r-lg",
+      "focus-visible:es-uic-ring focus-visible:es-uic-ring-teal-500 focus-visible:es-uic-ring-opacity-50 focus-visible:es-uic-z-10"
+    )
+  };
+  return /* @__PURE__ */ jsx(
+    $b6c3ddc6086f204d$export$d7b12c4107be0d61,
+    {
+      isDisabled: disabled,
+      className: classnames(
+        "es-uic-flex es-uic-items-center es-uic-gap-1.5 es-uic-text-sm",
+        styles[design],
+        className
+      ),
+      ...other,
+      children: ({ isSelected }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+        (icon || alignEnd) && (label || subtitle) && /* @__PURE__ */ jsx(
+          RichLabel,
+          {
+            icon,
+            label,
+            subtitle,
+            className: labelClassName,
+            fullWidth: true
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: classnames(
+              "es-uic-flex es-uic-size-5 es-uic-items-center es-uic-justify-center es-uic-rounded-full es-uic-border es-uic-text-gray-600 es-uic-shadow-sm es-uic-transition",
+              isSelected ? "es-uic-border-teal-600 es-uic-bg-teal-600 es-uic-text-white" : "es-uic-border-gray-300"
+            ),
+            children: /* @__PURE__ */ jsx(
+              AnimatedVisibility,
+              {
+                transition: "scaleFade",
+                visible: isSelected,
+                className: "[&>svg]:es-uic-size-3 [&>svg]:es-uic-stroke-2",
+                noInitial: true,
+                children: /* @__PURE__ */ jsx("div", { className: "es-uic-size-2.5 es-uic-rounded-full es-uic-bg-white es-uic-shadow-sm" })
+              }
+            )
+          }
+        ),
+        !icon && !alignEnd && (label || subtitle) && /* @__PURE__ */ jsx(
+          RichLabel,
+          {
+            label,
+            subtitle,
+            className: labelClassName
+          }
+        ),
+        !(icon || label || subtitle) && children
+      ] })
+    }
+  );
+};
+RadioButton.displayName = "RadioButton";
+/**
+ * A group of radio buttons.
+ * This component is required to control radio buttons.
+ *
+ * Each radio button should have a `value` set!
+ *
+ * @component
+ * @param {Object} props - Component props.
+ * @param {JSX.Element} [props.icon] - Icon to show before the label.
+ * @param {string} [props.label] - Label to show above the control.
+ * @param {string} [props.help] - Help text displayed below the control.
+ * @param {JSX.Element|JSX.Element[]} [props.actions] - Actions to show to the right of the label.
+ * @param {string} [props.subtitle] - Subtitle to show below the label.
+ * @param {RadioButtonGroupOrientation} [props.orientation='vertical'] - Orientation of the radio buttons.
+ * @param {RadioButtonGroupDesign} [props.design='default'] - Design of the radio buttons.
+ * @param {boolean} [props.disabled] - Whether the radio button group is disabled.
+ * @param {boolean} [props.readOnly] - Whether the radio button group is read-only.
+ * @param {string} [props.value] - Value of the currently selected radio button.
+ * @param {Function} [props.onChange] - Function to call when the value of the selected radio button changes.
+ * @param {string} [props.className] - Additional classes to add to the group container.
+ * @param {string} [props.labelClassName] - Additional classes to add to the label container.
+ *
+ * @returns {JSX.Element} The RadioButtonGroup component.
+ *
+ * @typedef {'horizontal' | 'vertical'} RadioButtonGroupOrientation
+ * @typedef {'default' | 'segmented'} RadioButtonGroupDesign
+ *
+ * @example
+ * const [value, setValue] = useState('first'); // Or "null" if you don't want anything selected by default.
+ *
+ * <RadioButtonGroup
+ * 	label='My radio buttons'
+ * 	value={value}
+ * 	onChange={setValue}
+ * >
+ * 	<RadioButton value='first' label='First option' />
+ * 	<RadioButton value='second' label='Second option' />
+ * </RadioButtonGroup>
+ *
+ * @preserve
+ */
+const RadioButtonGroup = (props) => {
+  const {
+    icon,
+    help,
+    label,
+    actions,
+    subtitle,
+    orientation = "vertical",
+    design = "default",
+    disabled,
+    readOnly,
+    value,
+    onChange,
+    children,
+    className,
+    labelClassName,
+    ...other
+  } = props;
+  let mappedChildren = children ?? [];
+  if (!Array.isArray(children)) {
+    mappedChildren = [children];
+  }
+  mappedChildren = children.map((child, index) => {
+    if (child.type.displayName !== "RadioButton") {
+      return child;
+    }
+    return cloneElement(child, {
+      design: orientation === "horizontal" ? `${design}Horizontal` : design,
+      key: child.props.value ?? index
+    });
+  });
+  return /* @__PURE__ */ jsx(
+    $b6c3ddc6086f204d$export$a98f0dcb43a68a25,
+    {
+      className: classnames("es-uic-w-full", className),
+      isDisabled: disabled,
+      isReadOnly: readOnly,
+      onChange,
+      value,
+      orientation,
+      ...other,
+      children: /* @__PURE__ */ jsx(
+        BaseControl,
+        {
+          icon,
+          label,
+          subtitle,
+          actions,
+          help,
+          labelAs: $01b77f81d0f07f68$export$b04be29aa201d4f5,
+          className: labelClassName,
+          controlContainerClassName: classnames(
+            orientation === "horizontal" && "es-uic-flex es-uic-flex-wrap !es-uic-space-y-0 es-uic-gap-2.5",
+            design === "segmented" && orientation === "vertical" && "!-es-uic-space-y-px",
+            design === "segmented" && orientation === "horizontal" && "!es-uic-gap-0 !es-uic-nowrap -es-uic-space-x-px"
+          ),
+          children: mappedChildren
+        }
+      )
+    }
+  );
+};
+export {
+  RadioButton,
+  RadioButtonGroup
+};

package/dist/components/repeater/repeater-item.js

@@ -0,0 +1,127 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { $ as $bc237834342dbd75$export$48513f6b9f8ce62d } from "../../Checkbox-BLcVbhiO.js";
+import { $ as $72e60046c03fbe42$export$54fe942636b6416d, b as $72e60046c03fbe42$export$e96fc9a8407faa6b } from "../../GridList-BZPXp3_O.js";
+import { B as Button } from "../../button-BkkdyHfJ.js";
+import { icons } from "../../icons/icons.js";
+import { classnames } from "../../utilities/classnames.js";
+import { Expandable } from "../expandable/expandable.js";
+import { _ as __ } from "../../default-i18n-BhE-OUmt.js";
+import { AnimatedVisibility } from "../animated-visibility/animated-visibility.js";
+import { useRef } from "react";
+import { useCellEditMode } from "../../hooks/use-cell-edit-mode.js";
+/**
+ * A Repeater item.
+ *
+ * @component
+ * @param {Object} props - Component props.
+ * @param {JSX.Element} [props.icon] - Icon to display in the label.
+ * @param {string} [props.label] - Label to display.
+ * @param {string} [props.subtitle] - Subtitle to display.
+ * @param {JSX.Element|JSX.Element[]} [props.actions] - Actions to display to the right of the label.
+ * @param {string} [props.textValue] - The text value of the item.
+ * @param {string} [props.className] - Classes to pass to the item.
+ *
+ * @returns {JSX.Element} The ButtonGroup component.
+ *
+ * @see {@link Repeater} for usage example.
+ *
+ * @preserve
+ */
+const RepeaterItem = (props) => {
+  const {
+    children,
+    icon,
+    label,
+    subtitle,
+    "aria-label": ariaLabel,
+    className,
+    actions,
+    textValue,
+    ...rest
+  } = props;
+  let a11yLabel = textValue;
+  if ((label == null ? void 0 : label.length) > 0) {
+    a11yLabel = label;
+  }
+  if (a11yLabel === "" || !a11yLabel) {
+    a11yLabel = __("New item", "eightshift-ui-components");
+  }
+  useRef(null);
+  const preventProps = useCellEditMode();
+  return /* @__PURE__ */ jsx($72e60046c03fbe42$export$54fe942636b6416d.Consumer, { children: ({ setCanReorder }) => {
+    return /* @__PURE__ */ jsx(
+      $72e60046c03fbe42$export$e96fc9a8407faa6b,
+      {
+        "aria-label": ariaLabel ?? a11yLabel,
+        textValue: a11yLabel,
+        className: classnames(
+          "es-uic-rounded-lg es-uic-transition",
+          "focus:es-uic-outline-none focus-visible:es-uic-ring focus-visible:es-uic-ring-teal-500 focus-visible:es-uic-ring-opacity-50"
+        ),
+        ...rest,
+        children: ({ selectionMode, allowsDragging, isDragging }) => /* @__PURE__ */ jsx(
+          Expandable,
+          {
+            disabled: selectionMode === "multiple",
+            icon: /* @__PURE__ */ jsxs(Fragment, { children: [
+              selectionMode === "multiple" && /* @__PURE__ */ jsx(Checkbox, { slot: "selection" }),
+              selectionMode === "none" && icon
+            ] }),
+            label: /* @__PURE__ */ jsx("div", { className: "es-uic-flex es-uic-items-center es-uic-gap-1", children: label }),
+            subtitle,
+            labelClassName: className,
+            className: classnames(isDragging && "es-uic-opacity-25"),
+            onOpenChange: (isOpen) => setCanReorder(!isOpen),
+            actions: /* @__PURE__ */ jsxs(Fragment, { children: [
+              selectionMode === "none" && allowsDragging && /* @__PURE__ */ jsx(
+                Button,
+                {
+                  size: "small",
+                  className: "es-uic-h-6 es-uic-w-4 !es-uic-text-gray-500 es-uic-opacity-5 focus:!es-uic-opacity-100",
+                  slot: "drag",
+                  type: "ghost",
+                  icon: icons.reorderGrabberV,
+                  tooltip: __("Re-order", "eightshift-ui-components")
+                }
+              ),
+              actions
+            ] }),
+            noFocusHandling: true,
+            ...preventProps,
+            children
+          }
+        )
+      }
+    );
+  } });
+};
+const Checkbox = (props) => {
+  return /* @__PURE__ */ jsx($bc237834342dbd75$export$48513f6b9f8ce62d, { ...props, children: ({ isIndeterminate, isSelected }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: classnames(
+          "es-uic-flex es-uic-size-5.5 es-uic-items-center es-uic-justify-center es-uic-rounded-md es-uic-border es-uic-text-gray-600 es-uic-shadow-sm es-uic-transition",
+          isSelected && "es-uic-border-teal-600 es-uic-bg-teal-600 es-uic-text-white"
+        ),
+        children: [
+          isIndeterminate && icons.solidRectFilled,
+          /* @__PURE__ */ jsx(
+            AnimatedVisibility,
+            {
+              transition: "scaleRotateFade",
+              visible: !isIndeterminate && isSelected,
+              className: "[&>svg]:es-uic-size-3 [&>svg]:es-uic-stroke-2",
+              noInitial: true,
+              children: icons.check
+            }
+          )
+        ]
+      }
+    ),
+    props.children
+  ] }) });
+};
+export {
+  RepeaterItem
+};