@easypost/easy-ui 1.0.0-alpha.9 → 1.0.0-alpha.91

package/Provider/index.mjs

@@ -1,25 +1,27 @@
+import { d as $ea8dcbcb9ea1b556$export$323e4fc2fa4753fb } from "../__chunks__/usePress-tJX1Ngpm.mjs";
 import React__default from "react";
-import { ThemeProvider } from "../Theme/index.mjs";
-import { NotificationProvider } from "../Notification/index.mjs";
-import "../__chunks__/tokens-3c27019b.mjs";
-import "../utilities/tokens.mjs";
-import "../utilities/css.mjs";
-import "../__chunks__/import-19bc38ac.mjs";
-import "../__chunks__/import-3faba3a6.mjs";
-import "../__chunks__/real-module-515df21d.mjs";
-import "react-dom";
-import "../Icon/index.mjs";
-import "../Text/index.mjs";
-import "../__chunks__/index-45f05366.mjs";
-import "../__chunks__/omit-f17deb8f.mjs";
-const global = "";
-function Provider({ children, theme, colorScheme, notificationPlacement }) {
-  return React__default.createElement(ThemeProvider, {
+import { b as NotificationProvider } from "../__chunks__/Notification-_uA9Lm5j.mjs";
+import { T as ThemeProvider } from "../__chunks__/Theme-Bzhg0otp.mjs";
+function Provider({ children, theme, colorScheme, notificationPlacement, navigate, useHref }) {
+  return React__default.createElement(EasyUIRouterProvider, {
+    navigate,
+    useHref
+  }, React__default.createElement(ThemeProvider, {
     theme,
     colorScheme
   }, React__default.createElement(NotificationProvider, {
     notificationPlacement
-  }, children));
+  }, children)));
+}
+function EasyUIRouterProvider(props) {
+  const { navigate, useHref, children } = props;
+  if (navigate) {
+    return React__default.createElement($ea8dcbcb9ea1b556$export$323e4fc2fa4753fb, {
+      navigate,
+      useHref
+    }, children);
+  }
+  return children;
 }
 export {
   Provider

package/README.md

@@ -1,27 +1,76 @@
-# Easy UI React
+# Easy UI
 
-Easy UI React is a component library designed to help developers create the best experience for shippers who use EasyPost.
+[Easy UI](https://github.com/EasyPost/easy-ui) is a component library designed to help developers create the best experience for shippers who use EasyPost.
 
-## Installation
+## Getting Started
 
-Run the following command using [npm](https://www.npmjs.com/):
+1. Install Easy UI using [npm](https://www.npmjs.com/) or your project's package manager:
 
 ```bash
 npm install @easypost/easy-ui --save
 ```
 
-## Usage
+2. Include the Easy UI CSS file in your app entry point:
 
-1. EasyUI uses Poppins as its primary font. Include Poppins and its declarations in your setup. You can host it yourself or use Google Fonts. All fonts are included in `.storybook/public/fonts/poppins` for self-hosting.
+```js
+import "@easypost/easy-ui/style.css";
+```
+
+3. Render your app inside the Easy UI `Provider`:
+
+```js
+import { Provider as EasyUIProvider } from "@easypost/easy-ui/Provider";
+
+const root = ReactDOM.createRoot(document.getElementById("root"));
+root.render(
+  <EasyUIProvider>
+    <App />
+  </EasyUIProvider>,
+);
+```
+
+4. Use Easy UI components:
+
+```js
+import { VerticalStack } from "@easypost/easy-ui/VerticalStack";
+import { Button } from "@easypost/easy-ui/Button";
+
+function App() {
+  return (
+    <VerticalStack>
+      <Button>Click me!</Button>
+    </VerticalStack>
+  );
+}
+```
+
+See our [Storybook](https://main--63f50c7c86f6514d2e0ef4be.chromatic.com/) for detailed component documentation.
+
+### Fonts
+
+Easy UI uses `Poppins` font. You can host it yourself or use Google Fonts. For hosting it yourself, `Poppins` is included in `.storybook/public/fonts/poppins`.
+
+If hosting yourself, include this declaration in your stylesheets, replacing the path with wherever the fonts are located:
 
 ```css
+@font-face {
+  font-family: "Poppins";
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src:
+    url("/fonts/poppins/poppins-v20-latin-300.woff2") format("woff2"),
+    url("/fonts/poppins/poppins-v20-latin-300.woff") format("woff");
+}
+
 @font-face {
   font-family: "Poppins";
   font-style: normal;
   font-weight: 400;
   font-display: swap;
-  src: url("/fonts/poppins/poppins-v20-latin-400.woff2") format("woff2"), url("/fonts/poppins/poppins-v20-latin-400.woff")
-      format("woff");
+  src:
+    url("/fonts/poppins/poppins-v20-latin-400.woff2") format("woff2"),
+    url("/fonts/poppins/poppins-v20-latin-400.woff") format("woff");
 }
 
 @font-face {
@@ -29,8 +78,9 @@ npm install @easypost/easy-ui --save
   font-style: normal;
   font-weight: 500;
   font-display: swap;
-  src: url("/fonts/poppins/poppins-v20-latin-500.woff2") format("woff2"), url("/fonts/poppins/poppins-v20-latin-500.woff")
-      format("woff");
+  src:
+    url("/fonts/poppins/poppins-v20-latin-500.woff2") format("woff2"),
+    url("/fonts/poppins/poppins-v20-latin-500.woff") format("woff");
 }
 
 @font-face {
@@ -38,8 +88,9 @@ npm install @easypost/easy-ui --save
   font-style: normal;
   font-weight: 600;
   font-display: swap;
-  src: url("/fonts/poppins/poppins-v20-latin-600.woff2") format("woff2"), url("/fonts/poppins/poppins-v20-latin-600.woff")
-      format("woff");
+  src:
+    url("/fonts/poppins/poppins-v20-latin-600.woff2") format("woff2"),
+    url("/fonts/poppins/poppins-v20-latin-600.woff") format("woff");
 }
 
 @font-face {
@@ -47,35 +98,15 @@ npm install @easypost/easy-ui --save
   font-style: normal;
   font-weight: 700;
   font-display: swap;
-  src: url("/fonts/poppins/poppins-v20-latin-700.woff2") format("woff2"), url("/fonts/poppins/poppins-v20-latin-700.woff")
-      format("woff");
+  src:
+    url("/fonts/poppins/poppins-v20-latin-700.woff2") format("woff2"),
+    url("/fonts/poppins/poppins-v20-latin-700.woff") format("woff");
 }
 ```
 
-2.  Import the CSS directly into your project if your asset packager supports it:
-
-```js
-import "@easypost/easy-ui/style.css";
-```
-
-3.  Include the provider and any relevant components in your project:
-
-```js
-import { Provider as EasyUIProvider } from "@easypost/easy-ui/Provider";
-```
-
-4.  Tell React to render the element in the DOM:
+### Server Rendering
 
-```js
-ReactDOM.render(
-  <EasyUIProvider>
-    <div>
-      {/* More to come */}
-    </div>
-  </AppProvider>,
-  document.querySelector("#app"),
-);
-```
+When server rendering an app that uses Easy UI and React <18, your app must be wrapped with a single instance of React Aria's `SSRProvider`. If an app is using an additional version of React Aria, ensure there's only one version of `@react-aria/ssr` using NPM's `overrides` or Yarn's `resolutions` property.
 
 ## Development
 

package/RadioButtonGroup/RadioButtonGroup.d.ts

@@ -0,0 +1,103 @@
+import React, { ReactNode } from "react";
+import { Key } from "react-aria";
+import { AriaLabelingProps } from "@react-types/shared";
+import { ThemeColorAliases } from "../types";
+export type RadioButtonGroupButtonProps = {
+    /**
+     * The label for the radio button.
+     */
+    children: ReactNode;
+    /**
+     * Whether the radio button is disabled or not.
+     */
+    isDisabled?: boolean;
+    /**
+     * An identifier for the item in selectedKeys.
+     */
+    id: string;
+};
+/**
+ * Represents an button in a `<RadioButtonGroup />`.
+ */
+declare function RadioButtonGroupButton(props: RadioButtonGroupButtonProps): React.JSX.Element;
+export type RadioButtonGroupProps = AriaLabelingProps & {
+    /**
+     * Color for the selected button in the group.
+     * @default "primary.500"
+     */
+    color?: ThemeColorAliases;
+    /**
+     * Whether single or multiple selection is enabled.
+     * @default "single"
+     */
+    selectionMode?: "single" | "multiple";
+    /**
+     * Whether the collection allows empty selection.
+     */
+    disallowEmptySelection?: boolean;
+    /**
+     * The currently selected keys in the collection (controlled).
+     */
+    selectedKeys?: Iterable<Key>;
+    /**
+     * The initial selected keys in the collection (uncontrolled).
+     */
+    defaultSelectedKeys?: Iterable<Key>;
+    /**
+     * Whether all items are disabled.
+     */
+    isDisabled?: boolean;
+    /**
+     * RadioButtonGroup Buttons
+     */
+    children: ReactNode;
+    /**
+     * Handler that is called when the selection changes.
+     */
+    onSelectionChange?: (keys: Set<Key>) => void;
+};
+/**
+ * A group of connected buttons that act as a radio group.
+ *
+ * @remarks
+ * Use a radio button group to toggle between two or more
+ * values for a given attribute.
+ *
+ * @example
+ * ```tsx
+ * <RadioButtonGroup defaultSelectedKeys={["first"]}>
+ *   <RadioButtonGroup.Button id="first">First item</RadioButtonGroup.Button>
+ *   <RadioButtonGroup.Button id="second">
+ *     Second item
+ *   </RadioButtonGroup.Button>
+ * </RadioButtonGroup>
+ * ```
+ *
+ * @example
+ * _Default selected keys:_
+ * ```tsx
+ * <RadioButtonGroup defaultSelectedKeys={["first"]}>
+ *   <RadioButtonGroup.Button id="first">First item</RadioButtonGroup.Button>
+ *   <RadioButtonGroup.Button id="second">
+ *     Second item
+ *   </RadioButtonGroup.Button>
+ * </RadioButtonGroup>
+ * ```
+ *
+ * @example
+ * _Controlled value:_
+ * ```tsx
+ * <RadioButtonGroup selectedKeys={["first"]}  onSelectionChange={(value) => ()}>
+ *   <RadioButtonGroup.Button id="first">First item</RadioButtonGroup.Button>
+ *   <RadioButtonGroup.Button id="second">
+ *     Second item
+ *   </RadioButtonGroup.Button>
+ * </RadioButtonGroup>
+ * ```
+ */
+export declare function RadioButtonGroup(props: RadioButtonGroupProps): React.JSX.Element;
+export declare namespace RadioButtonGroup {
+    var Button: typeof RadioButtonGroupButton;
+}
+export {};
+//# sourceMappingURL=RadioButtonGroup.d.ts.map

package/RadioButtonGroup/RadioButtonGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioButtonGroup.d.ts","sourceRoot":"","sources":["../../src/RadioButtonGroup/RadioButtonGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,GAAG,EAAE,MAAM,YAAY,CAAC;AACjC,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAGxD,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAK7C,MAAM,MAAM,2BAA2B,GAAG;IACxC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;CACZ,CAAC;AAEF;;GAEG;AAEH,iBAAS,sBAAsB,CAAC,KAAK,EAAE,2BAA2B,qBAYjE;AAED,MAAM,MAAM,qBAAqB,GAAG,iBAAiB,GAAG;IACtD;;;OAGG;IACH,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAC1B;;;OAGG;IACH,aAAa,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;IACtC;;OAEG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC;;OAEG;IACH,YAAY,CAAC,EAAE,QAAQ,CAAC,GAAG,CAAC,CAAC;IAC7B;;OAEG;IACH,mBAAmB,CAAC,EAAE,QAAQ,CAAC,GAAG,CAAC,CAAC;IACpC;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,CAAC,GAAG,CAAC,KAAK,IAAI,CAAC;CAC9C,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AAEH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,qBA6B5D;yBA7Be,gBAAgB"}

package/RadioButtonGroup/RadioButtonGroup.stories.d.ts

@@ -0,0 +1,11 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { RadioButtonGroup } from "./RadioButtonGroup";
+type Story = StoryObj<typeof RadioButtonGroup>;
+declare const meta: Meta<typeof RadioButtonGroup>;
+export default meta;
+export declare const Default: Story;
+export declare const SelectionMode: Story;
+export declare const EnabledDisabled: Story;
+export declare const EnabledDisabledButton: Story;
+export declare const DisallowEmptySelection: Story;
+//# sourceMappingURL=RadioButtonGroup.stories.d.ts.map

package/RadioButtonGroup/RadioButtonGroup.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioButtonGroup.stories.d.ts","sourceRoot":"","sources":["../../src/RadioButtonGroup/RadioButtonGroup.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAGlD,OAAO,EAAE,gBAAgB,EAAyB,MAAM,oBAAoB,CAAC;AAE7E,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAE/C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,gBAAgB,CAcvC,CAAC;AAOF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,OAAO,EAAE,KAWrB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAc3B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAY7B,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,KAiBnC,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,KAYpC,CAAC"}

package/RadioButtonGroup/RadioButtonGroup.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=RadioButtonGroup.test.d.ts.map

package/RadioButtonGroup/RadioButtonGroup.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioButtonGroup.test.d.ts","sourceRoot":"","sources":["../../src/RadioButtonGroup/RadioButtonGroup.test.tsx"],"names":[],"mappings":""}

package/RadioButtonGroup/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./RadioButtonGroup";
+//# sourceMappingURL=index.d.ts.map

package/RadioButtonGroup/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/RadioButtonGroup/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC"}

package/RadioButtonGroup/index.js

@@ -0,0 +1,260 @@
+"use strict";
+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));
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const utils = require("../__chunks__/utils-Bjpgmx8t.js");
+const useControlledState = require("../__chunks__/useControlledState-B2XIiHlL.js");
+const useButton = require("../__chunks__/useButton-RDnDDS-w.js");
+const mergeProps = require("../__chunks__/mergeProps-d7wJkv71.js");
+const FocusScope = require("../__chunks__/FocusScope-Beno1SIx.js");
+const filterDOMProps = require("../__chunks__/filterDOMProps-D3iOHP0H.js");
+const context = require("../__chunks__/context-Dxz9OXQY.js");
+const useToggleState = require("../__chunks__/useToggleState-8QqTgvTU.js");
+const useFocusRing = require("../__chunks__/useFocusRing-Do5WdNL_.js");
+const useHover = require("../__chunks__/useHover-BK8LX0kX.js");
+const utilities_css = require("../utilities/css.js");
+const Text = require("../__chunks__/Text-BXsuDbqc.js");
+function $ad999b7f496648d1$export$8deac67f4addf270(props) {
+  let { selectionMode = "single", disallowEmptySelection, isDisabled = false } = props;
+  let [selectedKeys, setSelectedKeys] = useControlledState.$458b0a5536c1a7cf$export$40bfa8c7b0832715(React.useMemo(() => props.selectedKeys ? new Set(props.selectedKeys) : void 0, [
+    props.selectedKeys
+  ]), React.useMemo(() => props.defaultSelectedKeys ? new Set(props.defaultSelectedKeys) : /* @__PURE__ */ new Set(), [
+    props.defaultSelectedKeys
+  ]), props.onSelectionChange);
+  return {
+    selectionMode,
+    isDisabled,
+    selectedKeys,
+    setSelectedKeys,
+    toggleKey(key) {
+      let keys;
+      if (selectionMode === "multiple") {
+        keys = new Set(selectedKeys);
+        if (keys.has(key) && (!disallowEmptySelection || keys.size > 1)) keys.delete(key);
+        else keys.add(key);
+      } else keys = new Set(selectedKeys.has(key) && !disallowEmptySelection ? [] : [
+        key
+      ]);
+      setSelectedKeys(keys);
+    },
+    setSelected(key, isSelected) {
+      if (isSelected !== selectedKeys.has(key)) this.toggleKey(key);
+    }
+  };
+}
+function $55f54f7887471b58$export$51e84d46ca0bc451(props, state, ref) {
+  const { isSelected } = state;
+  const { isPressed, buttonProps } = useButton.$701a24aa0da5b062$export$ea18c227d4417cc3(__spreadProps(__spreadValues({}, props), {
+    onPress: mergeProps.$ff5963eb1fccf552$export$e08e3b67e392101e(state.toggle, props.onPress)
+  }), ref);
+  return {
+    isPressed,
+    isSelected,
+    isDisabled: props.isDisabled || false,
+    buttonProps: mergeProps.$3ef42575df84b30b$export$9d1611c77c2fe928(buttonProps, {
+      "aria-pressed": isSelected
+    })
+  };
+}
+function $2680b1829e803644$export$fa142eb1681c520(props, ref) {
+  const { "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, orientation = "horizontal" } = props;
+  let [isInToolbar, setInToolbar] = React.useState(false);
+  mergeProps.$f0a04ccd8dbdd83b$export$e5c5a5f917a5871c(() => {
+    var _ref_current_parentElement;
+    setInToolbar(!!(ref.current && ((_ref_current_parentElement = ref.current.parentElement) === null || _ref_current_parentElement === void 0 ? void 0 : _ref_current_parentElement.closest('[role="toolbar"]'))));
+  });
+  const { direction } = context.$18f2051aff69b9bf$export$43bb16f9c6d9e3f7();
+  const shouldReverse = direction === "rtl" && orientation === "horizontal";
+  let focusManager = FocusScope.$9bf71ea28793e738$export$c5251b9e124bf29(ref);
+  const onKeyDown = (e) => {
+    if (!e.currentTarget.contains(e.target)) return;
+    if (orientation === "horizontal" && e.key === "ArrowRight" || orientation === "vertical" && e.key === "ArrowDown") {
+      if (shouldReverse) focusManager.focusPrevious();
+      else focusManager.focusNext();
+    } else if (orientation === "horizontal" && e.key === "ArrowLeft" || orientation === "vertical" && e.key === "ArrowUp") {
+      if (shouldReverse) focusManager.focusNext();
+      else focusManager.focusPrevious();
+    } else if (e.key === "Tab") {
+      e.stopPropagation();
+      lastFocused.current = document.activeElement;
+      if (e.shiftKey) focusManager.focusFirst();
+      else focusManager.focusLast();
+      return;
+    } else
+      return;
+    e.stopPropagation();
+    e.preventDefault();
+  };
+  const lastFocused = React.useRef(null);
+  const onBlur = (e) => {
+    if (!e.currentTarget.contains(e.relatedTarget) && !lastFocused.current) lastFocused.current = e.target;
+  };
+  const onFocus = (e) => {
+    var _ref_current;
+    if (lastFocused.current && !e.currentTarget.contains(e.relatedTarget) && ((_ref_current = ref.current) === null || _ref_current === void 0 ? void 0 : _ref_current.contains(e.target))) {
+      var _lastFocused_current;
+      (_lastFocused_current = lastFocused.current) === null || _lastFocused_current === void 0 ? void 0 : _lastFocused_current.focus();
+      lastFocused.current = null;
+    }
+  };
+  return {
+    toolbarProps: __spreadProps(__spreadValues({}, filterDOMProps.$65484d02dcb7eb3e$export$457c3d6518dd4c6f(props, {
+      labelable: true
+    })), {
+      role: !isInToolbar ? "toolbar" : "group",
+      "aria-orientation": orientation,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabel == null ? ariaLabelledBy : void 0,
+      onKeyDownCapture: !isInToolbar ? onKeyDown : void 0,
+      onFocusCapture: !isInToolbar ? onFocus : void 0,
+      onBlurCapture: !isInToolbar ? onBlur : void 0
+    })
+  };
+}
+function $4547d1bf40011fdf$export$dd5580ae642f110f(props, state, ref) {
+  let { isDisabled } = props;
+  let { toolbarProps } = $2680b1829e803644$export$fa142eb1681c520(props, ref);
+  return {
+    groupProps: __spreadProps(__spreadValues({}, toolbarProps), {
+      role: state.selectionMode === "single" ? "radiogroup" : toolbarProps.role,
+      "aria-disabled": isDisabled
+    })
+  };
+}
+function $4547d1bf40011fdf$export$bc53712daae3d6e6(props, state, ref) {
+  let toggleState = {
+    isSelected: state.selectedKeys.has(props.id),
+    setSelected(isSelected2) {
+      state.setSelected(props.id, isSelected2);
+    },
+    toggle() {
+      state.toggleKey(props.id);
+    }
+  };
+  let { isPressed, isSelected, isDisabled, buttonProps } = $55f54f7887471b58$export$51e84d46ca0bc451(__spreadProps(__spreadValues({}, props), {
+    id: void 0,
+    isDisabled: props.isDisabled || state.isDisabled
+  }), toggleState, ref);
+  if (state.selectionMode === "single") {
+    buttonProps.role = "radio";
+    buttonProps["aria-checked"] = toggleState.isSelected;
+    delete buttonProps["aria-pressed"];
+  }
+  return {
+    isPressed,
+    isSelected,
+    isDisabled,
+    buttonProps
+  };
+}
+const $84b7d8702d4ff4a8$export$298258635ae0dd97 = /* @__PURE__ */ React.createContext({});
+const $84b7d8702d4ff4a8$export$a8a71863db173133 = /* @__PURE__ */ React.createContext(null);
+const $84b7d8702d4ff4a8$export$40258cc1d95ff477 = /* @__PURE__ */ React.forwardRef(function ToggleButtonGroup(props, ref) {
+  [props, ref] = utils.$64fa3d84918910a7$export$29f1550f4b0d4415(props, ref, $84b7d8702d4ff4a8$export$298258635ae0dd97);
+  let state = $ad999b7f496648d1$export$8deac67f4addf270(props);
+  let { groupProps } = $4547d1bf40011fdf$export$dd5580ae642f110f(props, state, ref);
+  let renderProps = utils.$64fa3d84918910a7$export$4d86445c2cf5e3(__spreadProps(__spreadValues({}, props), {
+    values: {
+      isDisabled: state.isDisabled,
+      state
+    },
+    defaultClassName: "react-aria-ToggleButtonGroup"
+  }));
+  return /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues(__spreadValues({}, groupProps), renderProps), {
+    ref,
+    slot: props.slot || void 0,
+    "data-orientation": props.orientation || "horizontal",
+    "data-disabled": props.isDisabled || void 0
+  }), /* @__PURE__ */ React.createElement($84b7d8702d4ff4a8$export$a8a71863db173133.Provider, {
+    value: state
+  }, renderProps.children));
+});
+const $efde0372d7a700fe$export$43506d75ebd2e218 = /* @__PURE__ */ React.createContext({});
+const $efde0372d7a700fe$export$d2b052e7b4be1756 = /* @__PURE__ */ React.forwardRef(function ToggleButton(props, ref) {
+  [props, ref] = utils.$64fa3d84918910a7$export$29f1550f4b0d4415(props, ref, $efde0372d7a700fe$export$43506d75ebd2e218);
+  let groupState = React.useContext($84b7d8702d4ff4a8$export$a8a71863db173133);
+  let state = useToggleState.$3017fa7ffdddec74$export$8042c6c013fd5226(groupState && props.id != null ? {
+    isSelected: groupState.selectedKeys.has(props.id),
+    onChange(isSelected2) {
+      groupState.setSelected(props.id, isSelected2);
+    }
+  } : props);
+  let { buttonProps, isPressed, isSelected, isDisabled } = groupState && props.id != null ? $4547d1bf40011fdf$export$bc53712daae3d6e6(__spreadProps(__spreadValues({}, props), {
+    id: props.id
+  }), groupState, ref) : $55f54f7887471b58$export$51e84d46ca0bc451(__spreadProps(__spreadValues({}, props), {
+    id: props.id != null ? String(props.id) : void 0
+  }), state, ref);
+  let { focusProps, isFocused, isFocusVisible } = useFocusRing.$f7dceffc5ad7768b$export$4e328f61c538687f(props);
+  let { hoverProps, isHovered } = useHover.$6179b936705e76d3$export$ae780daf29e6d456(props);
+  let renderProps = utils.$64fa3d84918910a7$export$4d86445c2cf5e3(__spreadProps(__spreadValues({}, props), {
+    id: void 0,
+    values: {
+      isHovered,
+      isPressed,
+      isFocused,
+      isSelected: state.isSelected,
+      isFocusVisible,
+      isDisabled,
+      state
+    },
+    defaultClassName: "react-aria-ToggleButton"
+  }));
+  return /* @__PURE__ */ React.createElement("button", __spreadProps(__spreadValues(__spreadValues({}, mergeProps.$3ef42575df84b30b$export$9d1611c77c2fe928(buttonProps, focusProps, hoverProps)), renderProps), {
+    ref,
+    slot: props.slot || void 0,
+    "data-focused": isFocused || void 0,
+    "data-disabled": isDisabled || void 0,
+    "data-pressed": isPressed || void 0,
+    "data-selected": isSelected || void 0,
+    "data-hovered": isHovered || void 0,
+    "data-focus-visible": isFocusVisible || void 0
+  }));
+});
+const RadioButtonGroupButton$1 = "_RadioButtonGroupButton_vjf4x_4";
+const styles = {
+  RadioButtonGroupButton: RadioButtonGroupButton$1
+};
+function RadioButtonGroupButton(props) {
+  const { children, isDisabled, id } = props;
+  return React.createElement($efde0372d7a700fe$export$d2b052e7b4be1756, {
+    className: utilities_css.classNames(styles.RadioButtonGroupButton),
+    isDisabled,
+    id
+  }, React.createElement(Text.Text, {
+    variant: "small_button"
+  }, children));
+}
+function RadioButtonGroup(props) {
+  const { color = "primary.500", children, onSelectionChange, selectedKeys, selectionMode = "single", disallowEmptySelection, defaultSelectedKeys, isDisabled } = props;
+  const style = __spreadValues({}, utilities_css.getComponentThemeToken("radio-button-group", "color", "color", color));
+  return React.createElement($84b7d8702d4ff4a8$export$40258cc1d95ff477, {
+    style,
+    className: styles.RadiobuttonGroup,
+    onSelectionChange,
+    selectedKeys,
+    selectionMode,
+    disallowEmptySelection,
+    defaultSelectedKeys,
+    isDisabled
+  }, children);
+}
+RadioButtonGroup.Button = RadioButtonGroupButton;
+exports.RadioButtonGroup = RadioButtonGroup;