@eightshift/ui-components 5.0.0 → 5.0.2

package/dist/components/notice/notice.js

@@ -0,0 +1,123 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { c as clsx } from "../../lite-DVmmD_-j.js";
+import { icons } from "../../icons/icons.js";
+/**
+ * A simple notice component.
+ *
+ * @component
+ * @param {Object} props - Component props.
+ * @param {JSX.Element} [props.icon] - Icon to display within the notice.
+ * @param {string} [props.label] - The label of the notice.
+ * @param {string} [props.subtitle] - The subtitle of the notice.
+ * @param {string} [props.className] - Classes to pass to the notice.
+ * @param {NoticeType} [props.type='default'] - The type of the notice.
+ * @param {boolean} [props.alignIconToTitle=false] - If `true`, the icon will be aligned to the first row of title, instead of vertically centered.
+ * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
+ *
+ * @returns {JSX.Element} The Notice component.
+ *
+ * @typedef {'info' | 'success' | 'warning' | 'error' | 'placeholder' | 'default'} NoticeType
+ *
+ * @example
+ * <Notice label='This is a notice' />
+ *
+ * @preserve
+ */
+const Notice = (props) => {
+  const { icon, label, subtitle, className, type = "default", alignIconToTitle = false, hidden } = props;
+  if (hidden) {
+    return null;
+  }
+  const styles = {
+    info: {
+      icon: icons.infoCircle,
+      className: "es:border-blue-400 es:shadow-blue-500/15 es:bg-blue-100/5",
+      iconColor: "es:text-blue-400",
+      textColor: "es:text-blue-900",
+      subtitleColor: "es:text-blue-950/60"
+    },
+    success: {
+      icon: icons.checkSquare,
+      className: "es:border-green-500 es:shadow-green-500/15 es:bg-green-100/5",
+      iconColor: "es:text-green-500",
+      textColor: "es:text-green-900",
+      subtitleColor: "es:text-green-950/60"
+    },
+    warning: {
+      icon: icons.warning,
+      className: "es:border-amber-500 es:shadow-amber-500/15 es:bg-amber-100/5",
+      iconColor: "es:text-amber-500",
+      textColor: "es:text-amber-900",
+      subtitleColor: "es:text-amber-950/60"
+    },
+    error: {
+      icon: icons.errorCircle,
+      className: "es:border-red-400 es:shadow-red-500/15 es:bg-red-100/5",
+      iconColor: "es:text-red-400",
+      textColor: "es:text-red-900",
+      subtitleColor: "es:text-red-950/60"
+    },
+    placeholder: {
+      icon: icons.componentGeneric,
+      className: "es:border-secondary-400 es:shadow-secondary-300/25 es:border-dashed es:bg-secondary-200/5",
+      iconColor: "es:text-secondary-400",
+      textColor: "es:text-secondary-900",
+      subtitleColor: "es:text-secondary-500"
+    },
+    default: {
+      className: "es:border-secondary-300 es:shadow-secondary-300/25 es:bg-secondary-200/5",
+      iconColor: "es:text-secondary-400",
+      textColor: "es:text-secondary-900",
+      subtitleColor: "es:text-secondary-500"
+    }
+  };
+  return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: clsx(
+        "es:grid es:grid-cols-[auto_1fr] es:grid-rows-[auto_auto] es:rounded-md es:border es:bg-linear-to-tr es:shadow-sm",
+        styles[type].className,
+        icon || styles[type].icon ? "es:gap-x-1.5 es:p-1.5" : "es:px-2 es:py-1.5",
+        className
+      ),
+      children: [
+        (icon || styles[type].icon) && /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: clsx(
+              "es:col-span-1 es:col-start-1 es:row-span-2 es:row-start-1 es:shrink-0 es:icon:size-7",
+              alignIconToTitle ? "es:self-baseline" : "es:self-center",
+              styles[type].iconColor
+            ),
+            children: icon ?? styles[type].icon
+          }
+        ),
+        label && /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: clsx(
+              "es:col-span-2 es:col-start-2 es:text-balance es:text-sm es:leading-tight",
+              subtitle ? "es:self-end" : "es:row-span-2 es:self-center",
+              styles[type].textColor
+            ),
+            children: label
+          }
+        ),
+        subtitle && /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: clsx(
+              "es:col-span-2 es:col-start-2 es:text-balance es:text-xs es:leading-tight",
+              styles[type].subtitleColor,
+              label ? "es:self-start" : "es:row-span-2 es:self-center"
+            ),
+            children: subtitle
+          }
+        )
+      ]
+    }
+  ) });
+};
+export {
+  Notice
+};

package/dist/components/number-picker/number-picker.js

@@ -0,0 +1,292 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import React__default, { forwardRef, createContext, useRef, useState, cloneElement } from "react";
+import { _ as __ } from "../../default-i18n-CT_oS1Fy.js";
+import { a as $a049562f99e7db0e$export$f9c6924e160136d1, $ as $a049562f99e7db0e$export$eb2fcfdbd7ba97d4 } from "../../Group-DDPhPPTQ.js";
+import { a as $3985021b0ad6602f$export$37fb8590cf2c088c, $ as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "../../Input-BmDS8Juy.js";
+import { a as $01b77f81d0f07f68$export$75b6ee27786ba447, $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-JS_ob-kh.js";
+import { a as $d2b4bc8c273e7be6$export$24d547caef80ccd1 } from "../../Button-BpwTmkAe.js";
+import { a as $64fa3d84918910a7$export$29f1550f4b0d4415, $ as $64fa3d84918910a7$export$fabf2dc03a41866e, g as $64fa3d84918910a7$export$9d4c57ee4c6ffdd8, h as $64fa3d84918910a7$export$ef03459518577ad4, b as $64fa3d84918910a7$export$4d86445c2cf5e3, i as $64fa3d84918910a7$export$2881499e37b75b9a } from "../../utils-CZt7LCbO.js";
+import { $ as $ee014567cb39d3f0$export$ff05c3ac10437e03 } from "../../FieldError-DHrSdE_Q.js";
+import { $ as $d3e0e05bdfcf66bd$export$c24727297075ec6a } from "../../Form-Cq3fu75_.js";
+import { a as $514c0188e459b4c0$export$9afb8bc826b033ea } from "../../Text-BuJgePCv.js";
+import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-EDDcM64A.js";
+import { $ as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "../../context-BbYZoHvX.js";
+import { $ as $de67e98908f0c6ee$export$7f629e9dc1ecf37c, a as $81397a9303501bda$export$23f548e970bdf099 } from "../../useNumberField-CU1_u8ze.js";
+import { Button } from "../button/button.js";
+import { icons } from "../../icons/icons.js";
+import { c as clsx } from "../../lite-DVmmD_-j.js";
+import { BaseControl } from "../base-control/base-control.js";
+const $b91743d66a0ed188$export$b414a48cf5dcbc11 = /* @__PURE__ */ createContext(null);
+const $b91743d66a0ed188$export$6cc906c6cff9bec5 = /* @__PURE__ */ createContext(null);
+const $b91743d66a0ed188$export$63c5fa0b2fdccd2e = /* @__PURE__ */ forwardRef(function NumberField(props, ref) {
+  [props, ref] = $64fa3d84918910a7$export$29f1550f4b0d4415(props, ref, $b91743d66a0ed188$export$b414a48cf5dcbc11);
+  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 { locale } = $18f2051aff69b9bf$export$43bb16f9c6d9e3f7();
+  let state = $de67e98908f0c6ee$export$7f629e9dc1ecf37c({
+    ...props,
+    locale,
+    validationBehavior
+  });
+  let inputRef = useRef(null);
+  let [labelRef, label] = $64fa3d84918910a7$export$9d4c57ee4c6ffdd8(!props["aria-label"] && !props["aria-labelledby"]);
+  let { labelProps, groupProps, inputProps, incrementButtonProps, decrementButtonProps, descriptionProps, errorMessageProps, ...validation } = $81397a9303501bda$export$23f548e970bdf099({
+    ...$64fa3d84918910a7$export$ef03459518577ad4(props),
+    label,
+    validationBehavior
+  }, state, inputRef);
+  let renderProps = $64fa3d84918910a7$export$4d86445c2cf5e3({
+    ...props,
+    values: {
+      state,
+      isDisabled: props.isDisabled || false,
+      isInvalid: validation.isInvalid || false,
+      isRequired: props.isRequired || false
+    },
+    defaultClassName: "react-aria-NumberField"
+  });
+  let DOMProps = $65484d02dcb7eb3e$export$457c3d6518dd4c6f(props);
+  delete DOMProps.id;
+  return /* @__PURE__ */ React__default.createElement($64fa3d84918910a7$export$2881499e37b75b9a, {
+    values: [
+      [
+        $b91743d66a0ed188$export$6cc906c6cff9bec5,
+        state
+      ],
+      [
+        $a049562f99e7db0e$export$f9c6924e160136d1,
+        groupProps
+      ],
+      [
+        $3985021b0ad6602f$export$37fb8590cf2c088c,
+        {
+          ...inputProps,
+          ref: inputRef
+        }
+      ],
+      [
+        $01b77f81d0f07f68$export$75b6ee27786ba447,
+        {
+          ...labelProps,
+          ref: labelRef
+        }
+      ],
+      [
+        $d2b4bc8c273e7be6$export$24d547caef80ccd1,
+        {
+          slots: {
+            increment: incrementButtonProps,
+            decrement: decrementButtonProps
+          }
+        }
+      ],
+      [
+        $514c0188e459b4c0$export$9afb8bc826b033ea,
+        {
+          slots: {
+            description: descriptionProps,
+            errorMessage: errorMessageProps
+          }
+        }
+      ],
+      [
+        $ee014567cb39d3f0$export$ff05c3ac10437e03,
+        validation
+      ]
+    ]
+  }, /* @__PURE__ */ React__default.createElement("div", {
+    ...DOMProps,
+    ...renderProps,
+    ref,
+    slot: props.slot || void 0,
+    "data-disabled": props.isDisabled || void 0,
+    "data-required": props.isRequired || void 0,
+    "data-invalid": validation.isInvalid || void 0
+  }), props.name && /* @__PURE__ */ React__default.createElement("input", {
+    type: "hidden",
+    name: props.name,
+    value: isNaN(state.numberValue) ? "" : state.numberValue
+  }));
+});
+/**
+ * A number picker component.
+ *
+ * @component
+ * @param {Object} props - Component props.
+ * @param {number} props.value - The current value of the number picker.
+ * @param {Function} props.onChange - Function to run when the value changes.
+ * @param {number} [props.min=0] - The minimum value of the number picker.
+ * @param {number} [props.max] - The maximum value of the number picker.
+ * @param {number} [props.step=1] - The step value of the number picker.
+ * @param {string} [props.label] - The label of the number picker.
+ * @param {JSX.Element} [props.icon] - Icon to display within the number picker.
+ * @param {string} [props.subtitle] - The subtitle of the number picker.
+ * @param {string} [props.help] - The help text shown below the number picker.
+ * @param {boolean} [props.readOnly] - If `true`, the number picker is read-only.
+ * @param {boolean} [props.disabled] - If `true`, the number picker is disabled.
+ * @param {string} [props.placeholder] - Placeholder text to display in the number picker.
+ * @param {JSX.Element} [props.prefix] - Element to display to the left of the number picker.
+ * @param {JSX.Element} [props.suffix] - Element to display to the right of the number picker.
+ * @param {number} [props.fixedWidth] - If passed, sets the width of the input field to the provided number of characters. Useful if you have e.g. value from 1 to 1000, but you don't want the input field to change size when on lower values.
+ * @param {boolean} [props.inline] - If `true`, the number picker is displayed inline.
+ * @param {boolean} [props.noScrollToChange=false] - If `true`, the number picker does not change value when scrolling.
+ * @param {NumberPickerSize} [props.size='default'] - Determines the input field size.
+ * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
+ *
+ * @returns {JSX.Element} The NumberPicker component.
+ *
+ * @typedef {'compact' | 'small' | 'default'} NumberPickerSize
+ *
+ * @example
+ * <NumberPicker
+ * 	value={value}
+ * 	onChange={setValue}
+ * />
+ *
+ * @preserve
+ */
+const NumberPicker = ({
+  value,
+  onChange,
+  min = 0,
+  max,
+  step = 1,
+  label,
+  icon,
+  subtitle,
+  help,
+  readOnly,
+  disabled,
+  placeholder,
+  prefix,
+  fixedWidth = null,
+  suffix,
+  children,
+  inline,
+  noScrollToChange = false,
+  size = "default",
+  "aria-label": ariaLabel,
+  hidden,
+  ...props
+}) => {
+  var _a, _b, _c, _d, _e;
+  const [isInputFocused, setIsInputFocused] = useState(false);
+  if (hidden) {
+    return null;
+  }
+  const sizes = {
+    compact: {
+      field: "es:min-h-5",
+      noPrefixPadding: "es:pl-1.5",
+      extraContentSeparator: "es:h-[1.875rem]"
+    },
+    small: {
+      field: "es:min-h-9",
+      noPrefixPadding: "es:pl-2",
+      extraContentSeparator: "es:h-[2.125rem]"
+    },
+    default: {
+      field: "es:min-h-10",
+      noPrefixPadding: "es:pl-2",
+      extraContentSeparator: "es:h-[2.375rem]"
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    $b91743d66a0ed188$export$63c5fa0b2fdccd2e,
+    {
+      value,
+      onChange,
+      isDisabled: disabled,
+      isReadOnly: readOnly,
+      minValue: min,
+      maxValue: max,
+      step,
+      isWheelDisabled: noScrollToChange,
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        BaseControl,
+        {
+          labelAs: $01b77f81d0f07f68$export$b04be29aa201d4f5,
+          icon,
+          label,
+          subtitle,
+          help,
+          inline,
+          className: "es:text-sm",
+          children: /* @__PURE__ */ jsxs(
+            $a049562f99e7db0e$export$eb2fcfdbd7ba97d4,
+            {
+              className: clsx(
+                "es:group es:flex es:w-fit es:items-center es:rounded-lg es:border es:border-secondary-300 es:pl-1 es:pr-0.5 es:shadow-xs es:transition",
+                "es:inset-ring es:inset-ring-secondary-100",
+                isInputFocused && "es:outline-hidden es:focus-visible:border-accent-500 es:focus-visible:ring-2 es:focus-visible:ring-accent-500/50",
+                !prefix && (((_a = sizes == null ? void 0 : sizes[size]) == null ? void 0 : _a.noPrefixPadding) ?? sizes.default.noPrefixPadding),
+                ((_b = sizes == null ? void 0 : sizes[size]) == null ? void 0 : _b.field) ?? sizes.default.field,
+                "es:disabled:shadow-none es:disabled:border-secondary-200 es:disabled:bg-secondary-50 es:disabled:text-secondary-500 es:disabled:cursor-default es:readonly:bg-secondary-50"
+              ),
+              children: [
+                prefix && /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    slot: "prefix",
+                    className: "es:col-start-1 es:row-span-2 es:mr-0.5 es:select-none es:self-center es:text-sm es:text-secondary-400",
+                    children: prefix
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  $3985021b0ad6602f$export$f5b8910cec6cf069,
+                  {
+                    onFocus: () => setIsInputFocused(true),
+                    onBlur: () => setIsInputFocused(false),
+                    className: "es:col-start-2 es:row-span-2 es:border-none! es:bg-transparent es:px-0! es:py-1! es:text-sm es:tabular-nums es:shadow-none! es:outline-hidden! es:selection:bg-accent-500/20 es:selection:text-accent-950 es:focus:shadow-none! es:any-focus:outline-hidden",
+                    placeholder,
+                    style: {
+                      width: fixedWidth ? `${fixedWidth}ch` : `calc(${min < 0 ? "0.75ch + " : ""}${(_d = (_c = max ?? 1e3) == null ? void 0 : _c.toString()) == null ? void 0 : _d.length} * 1ch)`
+                    },
+                    "aria-label": ariaLabel ?? __("Enter a number", "eightshift-ui-components")
+                  }
+                ),
+                /* @__PURE__ */ jsxs("div", { className: clsx("es:opacity-0 es:group-hover:opacity-100 es:group-focus-visible:opacity-100 es:transition-opacity", disabled && "es:invisible"), children: [
+                  /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      type: "ghost",
+                      className: "es:col-start-4 es:h-3 es:w-4 es:text-secondary-500! es:disabled:text-secondary-300! es:icon:size-[0.8rem]",
+                      slot: "increment",
+                      icon: icons.caretUpFill
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      type: "ghost",
+                      className: "es:col-start-4 es:h-3 es:w-4 es:text-secondary-500! es:disabled:text-secondary-300! es:icon:size-[0.8rem]",
+                      slot: "decrement",
+                      icon: icons.caretDownFill
+                    }
+                  )
+                ] }),
+                suffix && /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    slot: "suffix",
+                    className: "es:col-start-3 es:row-span-2 es:select-none es:self-center es:text-sm es:text-secondary-400 es:mr-0.5",
+                    children: suffix
+                  }
+                ),
+                children && /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx("div", { className: clsx("es:w-px es:bg-secondary-300", ((_e = sizes == null ? void 0 : sizes[size]) == null ? void 0 : _e.extraContentSeparator) ?? sizes.default.extraContentSeparator) }),
+                  /* @__PURE__ */ jsx("div", { className: "es:p-0.5 es:pr-0", children: Array.isArray(children) ? children.map((child) => cloneElement(child, { slot: null })) : cloneElement(children, { slot: null }) })
+                ] })
+              ]
+            }
+          )
+        }
+      )
+    }
+  );
+};
+export {
+  NumberPicker
+};

package/dist/components/option-select/option-select.js

@@ -0,0 +1,264 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment } from "react";
+import { icons } from "../../icons/icons.js";
+import { BaseControl } from "../base-control/base-control.js";
+import { ButtonGroup } from "../button/button.js";
+import { Menu, MenuSeparator, MenuItem } from "../menu/menu.js";
+import { RadioButtonGroup, RadioButton } from "../radio/radio.js";
+import { RichLabel } from "../rich-label/rich-label.js";
+import { ToggleButton } from "../toggle-button/toggle-button.js";
+import { _ as __ } from "../../default-i18n-CT_oS1Fy.js";
+/**
+ * A component that allows the user to select an option from a list of options.
+ *
+ * @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 below the label.
+ * @param {JSX.Element|JSX.Element[]} [props.actions] - Actions to show to the right of the label.
+ * @param {string} [props.help] - Help text to show below the component.
+ * @param {boolean} [props.inline] - If `true`, the component is displayed inline - icon/label/subtitle are on the left, the passed content is on the right. **Note:** not compatible with `actions`.
+ * @param {string} props.value - The currently selected value.
+ * @param {Function} props.onChange - Function to run when the selected value changes.
+ * @param {{label: string, value: any, tooltip: string|JSX.Element, icon: JSX.Element|string, ariaLabel: string, subtitle:string|JSX.Element }[]} props.options - The list of options to choose from.
+ * @param {string} [props.disabled] - If `true`, the option select component is disabled.
+ * @param {boolean} [props.vertical] - If `true`, the options are displayed vertically. Not applicable to the `menu` type.
+ * @param {OptionSelectType} [props.type='toggleButton'] - The type of the option select component.
+ * @param {string} [props.className] - Classes to pass to the main element wrapper.
+ * @param {string} [props.itemClassName] - Classes to pass to each item.
+ * @param {Object} [props.wrapperProps] - Props to pass to the wrapper.
+ * @param {Object} [props.itemProps] - Props to pass to each item.
+ * @param {boolean} [props.noTriggerLabel] - Whether the trigger label should be hidden. Applies only to the `menu` type.
+ * @param {boolean} [props.noTriggerIcon] - Whether the trigger icon should be hidden. Applies only to the `menu` type.
+ * @param {string|boolean} [props.tooltip] - If provided, overrides the default tooltip text. If there is no label, the value will still be shown within the tooltip. Applies only to the `menu` type. If `true` is set and an `aria-label` is provided, the tooltip will show the same text as the `aria-label`.
+ * @param {boolean} [props.noItemLabel] - Whether the option label should be hidden.
+ * @param {boolean} [props.noItemIcon] - Whether the option icon should be hidden.
+ * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
+ *
+ * @returns {JSX.Element} The OptionSelect component.
+ *
+ * @typedef {'toggleButtons' | 'toggleButtonsSplit' | 'radios' | 'radiosSegmented' | 'menu'} OptionSelectType
+ *
+ * @example
+ * <OptionSelect
+ * 	label='My component'
+ * 	icon={icons.myIcon}
+ * 	value={value}
+ * 	onChange={setValue}
+ * 	options={[
+ * 		{ label: 'Option 1', value: 'option1' },
+ * 		{ label: 'Option 2', value: 'option2' },
+ * 	]}
+ * />
+ *
+ * @preserve
+ */
+const OptionSelect = (props) => {
+  var _a;
+  const {
+    icon,
+    label,
+    subtitle,
+    actions,
+    help,
+    inline,
+    value,
+    onChange,
+    options,
+    disabled,
+    vertical,
+    type = "toggleButtons",
+    className,
+    itemClassName,
+    wrapperProps,
+    itemProps,
+    noTriggerLabel,
+    noTriggerIcon,
+    tooltip: rawTooltip,
+    noItemLabel,
+    noItemIcon,
+    children,
+    hidden,
+    "aria-label": ariaLabel,
+    ...rest
+  } = props;
+  if (hidden) {
+    return null;
+  }
+  let tooltip = rawTooltip;
+  if (rawTooltip === true && (ariaLabel == null ? void 0 : ariaLabel.length) > 0) {
+    tooltip = ariaLabel;
+  }
+  const currentItem = options == null ? void 0 : options.find(({ value: optionValue }) => optionValue === value);
+  const notSetLabel = /* @__PURE__ */ jsx("span", { className: "es:leading-3 es:opacity-50", children: __("Not set", "eightshift-ui-components") });
+  let radioDesign = "default";
+  if (type === "radiosSegmented") {
+    radioDesign = "segmented";
+  }
+  return /* @__PURE__ */ jsxs(
+    BaseControl,
+    {
+      icon,
+      label,
+      subtitle,
+      actions,
+      help,
+      inline,
+      className,
+      ...rest,
+      children: [
+        ["toggleButtons", "toggleButtonsSplit"].includes(type) && /* @__PURE__ */ jsx(
+          ButtonGroup,
+          {
+            vertical,
+            "aria-label": typeof label !== "undefined" ? null : ariaLabel,
+            type: type === "toggleButtonsSplit" ? "split" : "segmented",
+            ...wrapperProps,
+            children: options.map(
+              ({
+                label: optionLabel,
+                value: optionValue,
+                icon: optionIcon,
+                tooltip: optionTooltip,
+                ariaLabel: optionAriaLabel,
+                subtitle: optionSubtitle,
+                disabled: optionDisabled
+              }) => {
+                var _a2;
+                return /* @__PURE__ */ jsxs(
+                  ToggleButton,
+                  {
+                    selected: optionValue === value,
+                    onChange: () => onChange(optionValue),
+                    disabled: optionDisabled || disabled,
+                    className: itemClassName,
+                    icon: !noItemIcon && (typeof optionIcon === "string" ? (_a2 = icons) == null ? void 0 : _a2[optionIcon] : optionIcon),
+                    tooltip: optionTooltip ?? optionAriaLabel ?? (noItemLabel && optionLabel),
+                    "aria-label": optionAriaLabel ?? optionLabel ?? optionTooltip,
+                    ...itemProps,
+                    children: [
+                      !noItemLabel && !optionSubtitle && optionLabel,
+                      !noItemLabel && optionSubtitle && /* @__PURE__ */ jsx(
+                        RichLabel,
+                        {
+                          label: optionLabel,
+                          subtitle: optionSubtitle,
+                          noColor: true
+                        }
+                      )
+                    ]
+                  },
+                  optionValue
+                );
+              }
+            )
+          }
+        ),
+        (type === "radios" || type === "radiosSegmented") && /* @__PURE__ */ jsx(
+          RadioButtonGroup,
+          {
+            orientation: vertical ? "vertical" : "horizontal",
+            onChange: (v) => onChange(v),
+            design: radioDesign,
+            "aria-label": typeof label !== "undefined" ? null : ariaLabel,
+            value,
+            ...wrapperProps,
+            children: options.map(({ label: optionLabel, value: optionValue, icon: optionIcon, ariaLabel: optionAriaLabel, subtitle: optionSubtitle, disabled: optionDisabled }) => {
+              var _a2;
+              return /* @__PURE__ */ jsx(
+                RadioButton,
+                {
+                  value: optionValue,
+                  disabled: optionDisabled || disabled,
+                  className: itemClassName,
+                  subtitle: !noItemLabel && optionSubtitle,
+                  icon: !noItemIcon && (typeof optionIcon === "string" ? (_a2 = icons) == null ? void 0 : _a2[optionIcon] : optionIcon),
+                  "aria-label": optionAriaLabel ?? optionLabel,
+                  label: !noItemLabel && optionLabel,
+                  ...itemProps
+                },
+                optionValue
+              );
+            })
+          }
+        ),
+        type === "menu" && /* @__PURE__ */ jsxs(
+          Menu,
+          {
+            triggerLabel: noTriggerLabel ? null : (currentItem == null ? void 0 : currentItem.label) ?? notSetLabel,
+            triggerIcon: !noTriggerIcon && // eslint-disable-next-line no-nested-ternary
+            (currentItem ? typeof (currentItem == null ? void 0 : currentItem.icon) === "string" ? (_a = icons) == null ? void 0 : _a[currentItem == null ? void 0 : currentItem.icon] : currentItem == null ? void 0 : currentItem.icon : (noTriggerLabel || noTriggerIcon) && notSetLabel),
+            tooltip: noTriggerLabel ? /* @__PURE__ */ jsx(
+              RichLabel,
+              {
+                label: tooltip ? tooltip : (currentItem == null ? void 0 : currentItem.tooltip) ?? (currentItem == null ? void 0 : currentItem.label),
+                subtitle: tooltip && ((currentItem == null ? void 0 : currentItem.tooltip) ?? (currentItem == null ? void 0 : currentItem.label)),
+                noColor: true
+              }
+            ) : tooltip,
+            triggerProps: {
+              ...wrapperProps == null ? void 0 : wrapperProps.triggerProps,
+              "aria-label": typeof label !== "undefined" ? null : ariaLabel ?? label ?? tooltip
+            },
+            keepOpen: true,
+            "aria-label": ariaLabel ?? label ?? tooltip ?? __("Menu", "eightshift-ui-components"),
+            ...wrapperProps,
+            children: [
+              options.map(
+                ({
+                  label: optionLabel,
+                  value: optionValue,
+                  icon: optionIcon,
+                  endIcon: optionEndIcon,
+                  ariaLabel: optionAriaLabel,
+                  subtitle: optionSubtitle,
+                  separator: optionHasSeparator,
+                  sectionTitle: optionSectionTitle,
+                  shortcut: optionShortcut,
+                  disabled: optionDisabled
+                }) => {
+                  var _a2, _b;
+                  return /* @__PURE__ */ jsxs(Fragment, { children: [
+                    (optionHasSeparator === true || optionHasSeparator === "above") && /* @__PURE__ */ jsx(MenuSeparator, {}),
+                    optionSectionTitle && /* @__PURE__ */ jsx(MenuItem, { disabled: true, children: optionSectionTitle }),
+                    /* @__PURE__ */ jsxs(
+                      MenuItem,
+                      {
+                        selected: value === optionValue,
+                        disabled: optionDisabled || disabled,
+                        className: itemClassName,
+                        icon: !noItemIcon && (typeof optionIcon === "string" ? (_a2 = icons) == null ? void 0 : _a2[optionIcon] : optionIcon),
+                        endIcon: !noItemIcon && (typeof optionEndIcon === "string" ? (_b = icons) == null ? void 0 : _b[optionEndIcon] : optionEndIcon),
+                        "aria-label": optionAriaLabel ?? optionLabel,
+                        onClick: () => onChange(optionValue),
+                        shortcut: optionShortcut,
+                        ...itemProps,
+                        children: [
+                          !noItemLabel && !optionSubtitle && optionLabel,
+                          !noItemLabel && optionSubtitle && /* @__PURE__ */ jsx(
+                            RichLabel,
+                            {
+                              label: optionLabel,
+                              subtitle: optionSubtitle,
+                              noColor: true
+                            }
+                          )
+                        ]
+                      }
+                    ),
+                    optionHasSeparator === "below" && /* @__PURE__ */ jsx(MenuSeparator, {})
+                  ] }, optionValue);
+                }
+              ),
+              children
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  OptionSelect
+};