@easypost/easy-ui 1.0.0-alpha.12 → 1.0.0-alpha.121

package/__chunks__/RadioGroup-BfKaJnSo.mjs

@@ -0,0 +1,375 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { jsx, jsxs } from "react/jsx-runtime";
+import { T as Text } from "./Text-D6oT5WJQ.mjs";
+import React__default, { useMemo, useState, useContext } from "react";
+import { H as HorizontalStack } from "./HorizontalStack-CJavrBHm.mjs";
+import { S as SelectorErrorTooltip } from "./SelectorErrorTooltip-rO2-k3Gl.mjs";
+import { classNames } from "../utilities/css.mjs";
+import { $ as $3ef42575df84b30b$export$9d1611c77c2fe928, c as $bdb11010cef70236$export$f680877a34711e37 } from "./mergeProps-COnPag8r.mjs";
+import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "./filterDOMProps-eGTqWSTd.mjs";
+import { $ as $99facab73266f662$export$5add1d006293d136 } from "./useFormReset-DjC42YuS.mjs";
+import { $ as $f6c31cce2adf654f$export$45712eceda6fad21 } from "./usePress-Cw67P1FM.mjs";
+import { $ as $f645667febf57a63$export$4c014de7c8940b4c } from "./useFocusable-BDOoYzWB.mjs";
+import { $ as $e5be200c675c3b3a$export$fc1a364ae1f3ff10, a as $e93e671b31057976$export$b8473d3665f3a75a } from "./useFormValidation-Bdyc51B-.mjs";
+import { $ as $f7dceffc5ad7768b$export$4e328f61c538687f } from "./useFocusRing-BWKhJSvH.mjs";
+import { $ as $6179b936705e76d3$export$ae780daf29e6d456 } from "./useHover-FWU5y5-k.mjs";
+import { $ as $458b0a5536c1a7cf$export$40bfa8c7b0832715 } from "./useControlledState-BPR3PrW4.mjs";
+import { z as $431fbd86ca7dc216$export$f21a1ffae260145a } from "./useFocusVisible-DDvp2PwR.mjs";
+import { $ as $9bf71ea28793e738$export$2d6ec8fc375ceafa } from "./FocusScope-B_FktBGw.mjs";
+import { $ as $9ab94262bd0047c7$export$420e68273165f4ec } from "./useFocusWithin-DcYF2gZd.mjs";
+import { $ as $2baaea4c71418dea$export$294aa081a6c6f55d } from "./useField-C5BKHYDX.mjs";
+import { $ as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "./context-5UR8ToA1.mjs";
+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 [initialValue] = useState(selectedValue);
+  let [lastFocusedValue, setLastFocusedValue] = useState(null);
+  let validation = $e5be200c675c3b3a$export$fc1a364ae1f3ff10(__spreadProps(__spreadValues({}, props), {
+    value: selectedValue
+  }));
+  let setSelectedValue = (value) => {
+    if (!props.isReadOnly && !props.isDisabled) {
+      setSelected(value);
+      validation.commitValidation();
+    }
+  };
+  let isInvalid = validation.displayValidation.isInvalid;
+  var _props_defaultValue1;
+  return __spreadProps(__spreadValues({}, validation), {
+    name,
+    selectedValue,
+    defaultSelectedValue: props.value !== void 0 ? initialValue : (_props_defaultValue1 = props.defaultValue) !== null && _props_defaultValue1 !== void 0 ? _props_defaultValue1 : null,
+    setSelectedValue,
+    lastFocusedValue,
+    setLastFocusedValue,
+    isDisabled: props.isDisabled || false,
+    isReadOnly: props.isReadOnly || false,
+    isRequired: props.isRequired || false,
+    validationState: props.validationState || (isInvalid ? "invalid" : null),
+    isInvalid
+  });
+}
+const $884aeceb3d67f00f$export$37b65e5b5444d35c = /* @__PURE__ */ new WeakMap();
+function $0d5c49892c1215da$export$37b0961d2f4751e2(props, state, ref) {
+  let { value, children, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, onPressStart, onPressEnd, onPressChange, onPress, onPressUp, onClick } = props;
+  const isDisabled = props.isDisabled || state.isDisabled;
+  let hasChildren = children != null;
+  let hasAriaLabel = ariaLabel != null || ariaLabelledby != null;
+  if (!hasChildren && !hasAriaLabel && process.env.NODE_ENV !== "production") 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({
+    onPressStart,
+    onPressEnd,
+    onPressChange,
+    onPress,
+    onPressUp,
+    onClick,
+    isDisabled
+  });
+  let { pressProps: labelProps, isPressed: isLabelPressed } = $f6c31cce2adf654f$export$45712eceda6fad21({
+    onPressStart,
+    onPressEnd,
+    onPressChange,
+    onPressUp,
+    onClick,
+    isDisabled,
+    onPress(e) {
+      var _ref_current;
+      onPress === null || onPress === void 0 ? void 0 : onPress(e);
+      state.setSelectedValue(value);
+      (_ref_current = ref.current) === null || _ref_current === void 0 ? void 0 : _ref_current.focus();
+    }
+  });
+  let { focusableProps } = $f645667febf57a63$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, form, descriptionId, errorMessageId, validationBehavior } = $884aeceb3d67f00f$export$37b65e5b5444d35c.get(state);
+  $99facab73266f662$export$5add1d006293d136(ref, state.defaultSelectedValue, state.setSelectedValue);
+  $e93e671b31057976$export$b8473d3665f3a75a({
+    validationBehavior
+  }, state, ref);
+  return {
+    labelProps: $3ef42575df84b30b$export$9d1611c77c2fe928(labelProps, useMemo(() => ({
+      onClick: (e) => e.preventDefault(),
+      // Prevent label from being focused when mouse down on it.
+      // Note, this does not prevent the input from being focused in the `click` event.
+      onMouseDown: (e) => e.preventDefault()
+    }), [])),
+    inputProps: $3ef42575df84b30b$export$9d1611c77c2fe928(domProps, __spreadProps(__spreadValues({}, interactions), {
+      type: "radio",
+      name,
+      form,
+      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, form, 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(__spreadProps(__spreadValues({}, 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,
+      accept: (node) => node instanceof $431fbd86ca7dc216$export$f21a1ffae260145a(node).HTMLInputElement && node.type === "radio"
+    });
+    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,
+    form,
+    descriptionId: descriptionProps.id,
+    errorMessageId: errorMessageProps.id,
+    validationBehavior
+  });
+  return {
+    radioGroupProps: $3ef42575df84b30b$export$9d1611c77c2fe928(domProps, __spreadValues(__spreadValues({
+      // 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
+  };
+}
+const RadioGroupContext = React__default.createContext(null);
+const useRadioGroupContext = () => {
+  const radioGroupContext = useContext(RadioGroupContext);
+  if (!radioGroupContext) {
+    throw new Error("Must be within a RadioGroup");
+  }
+  return radioGroupContext;
+};
+const RadioGroupItem$1 = "_RadioGroupItem_hxtze_4";
+const label = "_label_hxtze_10";
+const radioOuter = "_radioOuter_hxtze_33";
+const radioInner = "_radioInner_hxtze_34";
+const focusVisible = "_focusVisible_hxtze_48";
+const selected = "_selected_hxtze_67";
+const invalid = "_invalid_hxtze_71";
+const disabled = "_disabled_hxtze_75";
+const hovered = "_hovered_hxtze_87";
+const styles$1 = {
+  RadioGroupItem: RadioGroupItem$1,
+  label,
+  radioOuter,
+  radioInner,
+  focusVisible,
+  selected,
+  invalid,
+  disabled,
+  hovered
+};
+function RadioGroupItem(props) {
+  const { children, errorText, validationState } = props;
+  const ref = React__default.useRef(null);
+  const state = useRadioGroupContext();
+  const { inputProps, isSelected, isDisabled } = $0d5c49892c1215da$export$37b0961d2f4751e2(props, state, ref);
+  const { isFocusVisible, focusProps } = $f7dceffc5ad7768b$export$4e328f61c538687f();
+  const { isHovered, hoverProps } = $6179b936705e76d3$export$ae780daf29e6d456(props);
+  const className = classNames(styles$1.RadioGroupItem, isSelected && styles$1.selected, isDisabled && styles$1.disabled, isFocusVisible && styles$1.focusVisible, isHovered && styles$1.hovered, validationState === "invalid" && styles$1.invalid);
+  const textColor = isDisabled ? "neutral.300" : validationState === "invalid" ? "negative.600" : "primary.800";
+  return jsx("div", {
+    className,
+    children: jsxs(HorizontalStack, {
+      gap: "1",
+      blockAlign: "center",
+      children: [jsx("label", {
+        className: styles$1.label,
+        children: jsxs(HorizontalStack, __spreadProps(__spreadValues({
+          blockAlign: "start",
+          gap: "1",
+          wrap: false
+        }, hoverProps), {
+          children: [jsx("input", __spreadProps(__spreadValues(__spreadValues({
+            "aria-invalid": validationState === "invalid"
+          }, inputProps), focusProps), {
+            className: styles$1.input,
+            ref
+          })), jsx("span", {
+            className: styles$1.radioOuter,
+            children: jsx("span", {
+              className: styles$1.radioInner
+            })
+          }), jsx(Text, {
+            variant: "body1",
+            color: textColor,
+            children
+          })]
+        }))
+      }), validationState === "invalid" && errorText && jsx(SelectorErrorTooltip, {
+        content: errorText
+      })]
+    })
+  });
+}
+const RadioGroup$1 = "_RadioGroup_rhiwx_4";
+const list = "_list_rhiwx_13";
+const styles = {
+  RadioGroup: RadioGroup$1,
+  list
+};
+function RadioGroupContainer(props) {
+  const { children, label: label2 } = props;
+  const castProps = props;
+  const state = $a54cdc5c1942b639$export$bca9d026f8e704eb(castProps);
+  const { radioGroupProps, labelProps } = $430f30ed08ec25fa$export$62b9571f283ff5c2(castProps, state);
+  return jsxs("fieldset", __spreadProps(__spreadValues({
+    className: styles.RadioGroup
+  }, radioGroupProps), {
+    children: [label2 && jsx("div", {
+      children: jsx(Text, __spreadProps(__spreadValues({
+        as: "legend",
+        variant: "subtitle1",
+        color: "gray.bold"
+      }, labelProps), {
+        children: label2
+      }))
+    }), jsx(RadioGroupContext.Provider, {
+      value: state,
+      children
+    })]
+  }));
+}
+function RadioGroup(props) {
+  const _a = props, { children } = _a, containerProps = __objRest(_a, ["children"]);
+  return jsx(RadioGroupContainer, __spreadProps(__spreadValues({}, containerProps), {
+    children: jsx("div", {
+      className: styles.list,
+      children
+    })
+  }));
+}
+RadioGroup.Container = RadioGroupContainer;
+RadioGroup.Item = RadioGroupItem;
+export {
+  RadioGroup as R,
+  useRadioGroupContext as u
+};