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

package/Provider/index.js

@@ -1,27 +1,32 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const React = require("react");
-const Theme_index = require("../Theme/index.js");
-const Notification_index = require("../Notification/index.js");
-require("../__chunks__/tokens-645c903d.js");
-require("../utilities/tokens.js");
-require("../utilities/css.js");
-require("../__chunks__/Close-e92ca701.js");
-require("../__chunks__/import-109dab60.js");
-require("../__chunks__/import-313d3d73.js");
-require("../__chunks__/real-module-c0f9f92a.js");
-require("react-dom");
-require("../Icon/index.js");
-require("../Text/index.js");
-require("../__chunks__/index-fd91868d.js");
-require("../__chunks__/omit-fca26542.js");
-const global = "";
-function Provider({ children, theme, colorScheme, notificationPlacement }) {
-  return React.createElement(Theme_index.ThemeProvider, {
-    theme,
-    colorScheme
-  }, React.createElement(Notification_index.NotificationProvider, {
-    notificationPlacement
-  }, children));
+const jsxRuntime = require("react/jsx-runtime");
+const useFocusVisible = require("../__chunks__/useFocusVisible-BNcpO5Sv.js");
+const Notification = require("../__chunks__/Notification-CFtJx7Uz.js");
+const Theme = require("../__chunks__/Theme-C2nSZUpG.js");
+function Provider({ children, theme, colorScheme, notificationPlacement, navigate, useHref }) {
+  return jsxRuntime.jsx(EasyUIRouterProvider, {
+    navigate,
+    useHref,
+    children: jsxRuntime.jsx(Theme.ThemeProvider, {
+      theme,
+      colorScheme,
+      children: jsxRuntime.jsx(Notification.NotificationProvider, {
+        notificationPlacement,
+        children
+      })
+    })
+  });
+}
+function EasyUIRouterProvider(props) {
+  const { navigate, useHref, children } = props;
+  if (navigate) {
+    return jsxRuntime.jsx(useFocusVisible.$ea8dcbcb9ea1b556$export$323e4fc2fa4753fb, {
+      navigate,
+      useHref,
+      children
+    });
+  }
+  return children;
 }
 exports.Provider = Provider;

package/Provider/index.mjs

@@ -1,26 +1,31 @@
-import React__default from "react";
-import { ThemeProvider } from "../Theme/index.mjs";
-import { NotificationProvider } from "../Notification/index.mjs";
-import "../__chunks__/tokens-57cf84c2.mjs";
-import "../utilities/tokens.mjs";
-import "../utilities/css.mjs";
-import "../__chunks__/Close-25146223.mjs";
-import "../__chunks__/import-1f82f104.mjs";
-import "../__chunks__/import-3306af6d.mjs";
-import "../__chunks__/real-module-bf5db268.mjs";
-import "react-dom";
-import "../Icon/index.mjs";
-import "../Text/index.mjs";
-import "../__chunks__/index-307aca2b.mjs";
-import "../__chunks__/omit-f17deb8f.mjs";
-const global = "";
-function Provider({ children, theme, colorScheme, notificationPlacement }) {
-  return React__default.createElement(ThemeProvider, {
-    theme,
-    colorScheme
-  }, React__default.createElement(NotificationProvider, {
-    notificationPlacement
-  }, children));
+import { jsx } from "react/jsx-runtime";
+import { o as $ea8dcbcb9ea1b556$export$323e4fc2fa4753fb } from "../__chunks__/useFocusVisible-DDvp2PwR.mjs";
+import { b as NotificationProvider } from "../__chunks__/Notification-YATlp3lK.mjs";
+import { T as ThemeProvider } from "../__chunks__/Theme-M__gFMM3.mjs";
+function Provider({ children, theme, colorScheme, notificationPlacement, navigate, useHref }) {
+  return jsx(EasyUIRouterProvider, {
+    navigate,
+    useHref,
+    children: jsx(ThemeProvider, {
+      theme,
+      colorScheme,
+      children: jsx(NotificationProvider, {
+        notificationPlacement,
+        children
+      })
+    })
+  });
+}
+function EasyUIRouterProvider(props) {
+  const { navigate, useHref, children } = props;
+  if (navigate) {
+    return jsx($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-vite";
+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,uBAAuB,CAAC;AAGvD,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"}