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

package/NexusLayout/NexusLayout.d.ts

@@ -0,0 +1,97 @@
+import React, { ReactNode } from "react";
+import { NexusLayoutActionBadge, NexusLayoutActions, NexusLayoutLinkAction, NexusLayoutMenuAction } from "./NexusLayoutActions";
+import { NexusLayoutMultipageContainer, NexusLayoutMultipageContent, NexusLayoutMultipageHeader, NexusLayoutMultipageSidebar, NexusLayoutMultipageTitle } from "./NexusLayoutMultipage";
+import { NexusLayoutMultipageSidebarNav, NexusLayoutMultipageSidebarNavLink, NexusLayoutMultipageSidebarNavSection } from "./NexusLayoutMultipageSidebarNav";
+import { NexusLayoutNav, NexusLayoutNavLink } from "./NexusLayoutNav";
+export type NexusLayoutProps = {
+    /** Layout children. */
+    children: ReactNode;
+    /**
+     * Background decoration for layout.
+     *
+     * @default 01
+     */
+    backgroundDecoration?: "01";
+};
+export type NexusLayoutHeaderProps = {
+    /** Header children. */
+    children: ReactNode;
+};
+export type NexusLayoutLogoProps = {
+    /**
+     * Custom logo for layout. Defaults to EasyPost logo.
+     */
+    children?: ReactNode;
+};
+export type NexusLayoutContentProps = {
+    /** Content children. */
+    children: ReactNode;
+};
+/**
+ * `NexusLayout` defines the header, main content, and multi-page content areas of a Nexus product page.
+ *
+ * @example
+ * ```tsx
+ * <NexusLayout>
+ *   <NexusLayout.Header>
+ *     <NexusLayout.Logo />
+ *     <NexusLayout.Nav selectedKey="/1">
+ *       <NexusLayout.NavLink key="/1" href="/1" iconSymbol={Icon}>
+ *         Order Fulfillment
+ *       </NexusLayout.NavLink>
+ *       <NexusLayout.NavLink key="/2" href="/2" iconSymbol={Icon}>
+ *         Post Delivery
+ *       </NexusLayout.NavLink>
+ *     </NexusLayout.Nav>
+ *     <NexusLayout.Actions>
+ *       <NexusLayout.MenuAction
+ *         accessibilityLabel="Label"
+ *         iconSymbol={Icon}
+ *         renderBadge={() => <Badge />}
+ *       >
+ *         <Menu.Overlay onAction={() => {}}>
+ *           <Menu.Item>Action 1</Menu.Item>
+ *           <Menu.Item>Action 2</Menu.Item>
+ *         </Menu.Overlay>
+ *       </NexusLayout.MenuAction>
+ *       <NexusLayout.MenuAction accessibilityLabel="Label" iconSymbol={Icon}>
+ *         <Menu.Overlay onAction={() => {}}>
+ *           <Menu.Item>Action 1</Menu.Item>
+ *           <Menu.Item>Action 2</Menu.Item>
+ *         </Menu.Overlay>
+ *       </NexusLayout.MenuAction>
+ *     </NexusLayout.Actions>
+ *   </NexusLayout.Header>
+ *   <NexusLayout.Content>
+ *     <div>Content</div>
+ *   </NexusLayout.Content>
+ * </NexusLayout>
+ * ```
+ */
+export declare function NexusLayout(props: NexusLayoutProps): React.JSX.Element;
+export declare namespace NexusLayout {
+    var Header: typeof NexusLayoutHeader;
+    var Logo: typeof NexusLayoutLogo;
+    var Nav: typeof NexusLayoutNav;
+    var NavLink: typeof NexusLayoutNavLink;
+    var Actions: typeof NexusLayoutActions;
+    var ActionBadge: typeof NexusLayoutActionBadge;
+    var MenuAction: typeof NexusLayoutMenuAction;
+    var LinkAction: typeof NexusLayoutLinkAction;
+    var Content: typeof NexusLayoutContent;
+    var MultipageContainer: typeof NexusLayoutMultipageContainer;
+    var MultipageSidebar: typeof NexusLayoutMultipageSidebar;
+    var MultipageContent: typeof NexusLayoutMultipageContent;
+    var MultipageHeader: typeof NexusLayoutMultipageHeader;
+    var MultipageTitle: typeof NexusLayoutMultipageTitle;
+    var MultipageSidebarNav: typeof NexusLayoutMultipageSidebarNav;
+    var MultipageSidebarNavSection: typeof NexusLayoutMultipageSidebarNavSection;
+    var MultipageSidebarNavLink: typeof NexusLayoutMultipageSidebarNavLink;
+    var useNexusLayoutNav: () => import("./NexusLayoutNav").NexusLayoutNavContextType;
+    var useNexusLayoutMultipageSidebarNav: () => import("./NexusLayoutMultipageSidebarNav").SidebarNavContextType;
+}
+declare function NexusLayoutHeader(props: NexusLayoutHeaderProps): React.JSX.Element;
+declare function NexusLayoutLogo(props: NexusLayoutLogoProps): React.JSX.Element;
+declare function NexusLayoutContent(props: NexusLayoutContentProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=NexusLayout.d.ts.map

package/NexusLayout/NexusLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NexusLayout.d.ts","sourceRoot":"","sources":["../../src/NexusLayout/NexusLayout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGzC,OAAO,EACL,sBAAsB,EACtB,kBAAkB,EAClB,qBAAqB,EACrB,qBAAqB,EACtB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EACL,6BAA6B,EAC7B,2BAA2B,EAC3B,0BAA0B,EAC1B,2BAA2B,EAC3B,yBAAyB,EAC1B,MAAM,wBAAwB,CAAC;AAChC,OAAO,EACL,8BAA8B,EAC9B,kCAAkC,EAClC,qCAAqC,EAEtC,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EACL,cAAc,EACd,kBAAkB,EAEnB,MAAM,kBAAkB,CAAC;AAI1B,MAAM,MAAM,gBAAgB,GAAG;IAC7B,uBAAuB;IACvB,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;OAIG;IACH,oBAAoB,CAAC,EAAE,IAAI,CAAC;CAC7B,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG;IACnC,uBAAuB;IACvB,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG;IACjC;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG;IACpC,wBAAwB;IACxB,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,qBAOlD;yBAPe,WAAW;;;;;;;;;;;;;;;;;;;;;AAS3B,iBAAS,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,qBAGvD;AAED,iBAAS,eAAe,CAAC,KAAK,EAAE,oBAAoB,qBAGnD;AAED,iBAAS,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,qBAGzD"}

package/NexusLayout/NexusLayout.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from "@storybook/react-vite";
+import { NexusLayout } from "./NexusLayout";
+type Story = StoryObj<typeof NexusLayout>;
+declare const meta: Meta<typeof NexusLayout>;
+export default meta;
+export declare const StandardContent: Story;
+export declare const MultipageContent: Story;
+//# sourceMappingURL=NexusLayout.stories.d.ts.map

package/NexusLayout/NexusLayout.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NexusLayout.stories.d.ts","sourceRoot":"","sources":["../../src/NexusLayout/NexusLayout.stories.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAMvD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAG5C,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,WAAW,CAAC,CAAC;AAE1C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,WAAW,CAUlC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,eAAe,EAAE,KAyD7B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAuG9B,CAAC"}

package/NexusLayout/NexusLayout.test.d.ts

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

package/NexusLayout/NexusLayout.test.d.ts.map

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

package/NexusLayout/NexusLayoutActions.d.ts

@@ -0,0 +1,38 @@
+import React, { ReactNode } from "react";
+import { AriaLinkOptions, PressHookProps } from "react-aria";
+import { IconSymbol } from "../types";
+export type NexusLayoutActionsProps = {
+    /** Actions children. */
+    children: ReactNode;
+};
+export type NexusLayoutActionBadgeProps = {
+    /** Badge children. */
+    children?: ReactNode;
+};
+export type NexusLayoutMenuActionProps = {
+    /** Optional custom accessibility label describing the menu action. */
+    accessibilityLabel?: string;
+    /** Icon symbol for the action. */
+    iconSymbol: IconSymbol;
+    /** Badge for the action. */
+    renderBadge?: () => ReactNode;
+    /** Render the menu overlay. */
+    children: ReactNode;
+};
+export type NexusLayoutLinkActionProps = {
+    /** Optional custom accessibility label describing the menu action. */
+    accessibilityLabel?: string;
+    /** Action link icon symbol. */
+    iconSymbol: IconSymbol;
+    /** Whether or not action link is selected. */
+    isSelected?: boolean;
+    /** Badge for the action. */
+    renderBadge?: () => ReactNode;
+} & AriaLinkOptions;
+export declare function NexusLayoutActions(props: NexusLayoutActionsProps): React.JSX.Element;
+export declare function NexusLayoutMenuAction(props: NexusLayoutMenuActionProps): React.JSX.Element;
+export declare function NexusLayoutLinkAction(props: NexusLayoutLinkActionProps): React.JSX.Element;
+export declare function NexusLayoutActionBadge(props: NexusLayoutActionBadgeProps): React.JSX.Element;
+/** TODO: Figure out how to work with UnstyledButton instead */
+export declare const PressableButton: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLButtonElement> & React.ButtonHTMLAttributes<HTMLButtonElement> & PressHookProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=NexusLayoutActions.d.ts.map

package/NexusLayout/NexusLayoutActions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NexusLayoutActions.d.ts","sourceRoot":"","sources":["../../src/NexusLayout/NexusLayoutActions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAGZ,SAAS,EAIV,MAAM,OAAO,CAAC;AACf,OAAO,EACL,eAAe,EAEf,cAAc,EAKf,MAAM,YAAY,CAAC;AAKpB,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAKtC,MAAM,MAAM,uBAAuB,GAAG;IACpC,wBAAwB;IACxB,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,2BAA2B,GAAG;IACxC,sBAAsB;IACtB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG;IACvC,sEAAsE;IACtE,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAE5B,kCAAkC;IAClC,UAAU,EAAE,UAAU,CAAC;IAEvB,4BAA4B;IAC5B,WAAW,CAAC,EAAE,MAAM,SAAS,CAAC;IAE9B,+BAA+B;IAC/B,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG;IACvC,sEAAsE;IACtE,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAE5B,+BAA+B;IAC/B,UAAU,EAAE,UAAU,CAAC;IAEvB,8CAA8C;IAC9C,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,4BAA4B;IAC5B,WAAW,CAAC,EAAE,MAAM,SAAS,CAAC;CAC/B,GAAG,eAAe,CAAC;AAEpB,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,qBAOhE;AAED,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,0BAA0B,qBAoCtE;AAED,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,0BAA0B,qBA+BtE;AAED,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,2BAA2B,qBAGxE;AAED,+DAA+D;AAC/D,eAAO,MAAM,eAAe,kMAY1B,CAAC"}

package/NexusLayout/NexusLayoutMultipage.d.ts

@@ -0,0 +1,27 @@
+import React, { ReactNode } from "react";
+export type NexusLayoutMultipageContainerProps = {
+    /** Multipage container children. */
+    children: ReactNode;
+};
+export type NexusLayoutMultipageSidebarProps = {
+    /** Multipage container sidebar children. */
+    children: ReactNode;
+};
+export type NexusLayoutMultipageContentProps = {
+    /** Multipage container content children. */
+    children: ReactNode;
+};
+export type NexusLayoutMultipageHeaderProps = {
+    /** Multipage container header children. */
+    children: ReactNode;
+};
+export type NexusLayoutMultipageTitleProps = {
+    /** Multipage container title text. */
+    children: ReactNode;
+};
+export declare function NexusLayoutMultipageContainer(props: NexusLayoutMultipageContainerProps): React.JSX.Element;
+export declare function NexusLayoutMultipageSidebar(props: NexusLayoutMultipageSidebarProps): React.JSX.Element;
+export declare function NexusLayoutMultipageContent(props: NexusLayoutMultipageContentProps): React.JSX.Element;
+export declare function NexusLayoutMultipageHeader(props: NexusLayoutMultipageHeaderProps): React.JSX.Element;
+export declare function NexusLayoutMultipageTitle(props: NexusLayoutMultipageTitleProps): React.JSX.Element;
+//# sourceMappingURL=NexusLayoutMultipage.d.ts.map

package/NexusLayout/NexusLayoutMultipage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NexusLayoutMultipage.d.ts","sourceRoot":"","sources":["../../src/NexusLayout/NexusLayoutMultipage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAOzC,MAAM,MAAM,kCAAkC,GAAG;IAC/C,oCAAoC;IACpC,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,gCAAgC,GAAG;IAC7C,4CAA4C;IAC5C,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,gCAAgC,GAAG;IAC7C,4CAA4C;IAC5C,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,+BAA+B,GAAG;IAC5C,2CAA2C;IAC3C,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,8BAA8B,GAAG;IAC3C,sCAAsC;IACtC,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,wBAAgB,6BAA6B,CAC3C,KAAK,EAAE,kCAAkC,qBAI1C;AAED,wBAAgB,2BAA2B,CACzC,KAAK,EAAE,gCAAgC,qBAQxC;AAED,wBAAgB,2BAA2B,CACzC,KAAK,EAAE,gCAAgC,qBAQxC;AAED,wBAAgB,0BAA0B,CACxC,KAAK,EAAE,+BAA+B,qBAQvC;AAED,wBAAgB,yBAAyB,CACvC,KAAK,EAAE,8BAA8B,qBAQtC"}

package/NexusLayout/NexusLayoutMultipageSidebarNav.d.ts

@@ -0,0 +1,31 @@
+import React, { ReactNode } from "react";
+import { AriaLinkOptions } from "react-aria";
+import { IconSymbol } from "../types";
+export type NexusLayoutMultipageSidebarNavProps = {
+    /** Sidebar nav title. */
+    title: ReactNode;
+    /** Selected href of sidebar nav link. */
+    selectedHref?: AriaLinkOptions["href"];
+    /** Multipage container children. */
+    children: ReactNode;
+};
+export type NexusLayoutMultipageSidebarNavSectionProps = {
+    /** Sidebar nav section title. */
+    title: ReactNode;
+    /** Sidebar nav section children. */
+    children: ReactNode;
+};
+export type NexusLayoutMultipageSidebarNavLinkProps = {
+    /** Nav link icon symbol. */
+    iconSymbol: IconSymbol;
+    /** Nav link children. */
+    children: ReactNode;
+} & AriaLinkOptions;
+export type SidebarNavContextType = {
+    selectedHref?: NexusLayoutMultipageSidebarNavProps["selectedHref"];
+};
+export declare const useNexusLayoutMultipageSidebarNav: () => SidebarNavContextType;
+export declare function NexusLayoutMultipageSidebarNav(props: NexusLayoutMultipageSidebarNavProps): React.JSX.Element;
+export declare function NexusLayoutMultipageSidebarNavSection(props: NexusLayoutMultipageSidebarNavSectionProps): React.JSX.Element;
+export declare function NexusLayoutMultipageSidebarNavLink(props: NexusLayoutMultipageSidebarNavLinkProps): React.JSX.Element;
+//# sourceMappingURL=NexusLayoutMultipageSidebarNav.d.ts.map

package/NexusLayout/NexusLayoutMultipageSidebarNav.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NexusLayoutMultipageSidebarNav.d.ts","sourceRoot":"","sources":["../../src/NexusLayout/NexusLayoutMultipageSidebarNav.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAsC,MAAM,OAAO,CAAC;AAC7E,OAAO,EACL,eAAe,EAKhB,MAAM,YAAY,CAAC;AAIpB,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAKtC,MAAM,MAAM,mCAAmC,GAAG;IAChD,yBAAyB;IACzB,KAAK,EAAE,SAAS,CAAC;IAEjB,yCAAyC;IACzC,YAAY,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IAEvC,oCAAoC;IACpC,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,0CAA0C,GAAG;IACvD,iCAAiC;IACjC,KAAK,EAAE,SAAS,CAAC;IAEjB,oCAAoC;IACpC,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,uCAAuC,GAAG;IACpD,4BAA4B;IAC5B,UAAU,EAAE,UAAU,CAAC;IAEvB,yBAAyB;IACzB,QAAQ,EAAE,SAAS,CAAC;CACrB,GAAG,eAAe,CAAC;AAEpB,MAAM,MAAM,qBAAqB,GAAG;IAClC,YAAY,CAAC,EAAE,mCAAmC,CAAC,cAAc,CAAC,CAAC;CACpE,CAAC;AAMF,eAAO,MAAM,iCAAiC,6BAQ7C,CAAC;AAEF,wBAAgB,8BAA8B,CAC5C,KAAK,EAAE,mCAAmC,qBAiB3C;AAED,wBAAgB,qCAAqC,CACnD,KAAK,EAAE,0CAA0C,qBASlD;AAED,wBAAgB,kCAAkC,CAChD,KAAK,EAAE,uCAAuC,qBA6B/C"}

package/NexusLayout/NexusLayoutNav.d.ts

@@ -0,0 +1,28 @@
+import React, { ReactNode } from "react";
+import { AriaLinkOptions } from "react-aria";
+import { IconSymbol } from "../types";
+export type NexusLayoutNavProps = {
+    /**
+     * Custom label for the primary navigation.
+     *
+     * @default Main
+     */
+    "aria-label"?: string;
+    /** Selected href of primary navigation link. */
+    selectedHref?: AriaLinkOptions["href"];
+    /** Primary navigation children. */
+    children: ReactNode;
+};
+export type NexusLayoutNavLinkProps = {
+    /** Nav link icon symbol. */
+    iconSymbol: IconSymbol;
+    /** Nav link children. */
+    children: ReactNode;
+} & AriaLinkOptions;
+export type NexusLayoutNavContextType = {
+    selectedHref?: NexusLayoutNavProps["selectedHref"];
+};
+export declare const useNexusLayoutNav: () => NexusLayoutNavContextType;
+export declare function NexusLayoutNav(props: NexusLayoutNavProps): React.JSX.Element;
+export declare function NexusLayoutNavLink(props: NexusLayoutNavLinkProps): React.JSX.Element;
+//# sourceMappingURL=NexusLayoutNav.d.ts.map

package/NexusLayout/NexusLayoutNav.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NexusLayoutNav.d.ts","sourceRoot":"","sources":["../../src/NexusLayout/NexusLayoutNav.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAA+B,MAAM,OAAO,CAAC;AACtE,OAAO,EACL,eAAe,EAKhB,MAAM,YAAY,CAAC;AAIpB,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAKtC,MAAM,MAAM,mBAAmB,GAAG;IAChC;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,gDAAgD;IAChD,YAAY,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IAEvC,mCAAmC;IACnC,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG;IACpC,4BAA4B;IAC5B,UAAU,EAAE,UAAU,CAAC;IAEvB,yBAAyB;IACzB,QAAQ,EAAE,SAAS,CAAC;CACrB,GAAG,eAAe,CAAC;AAEpB,MAAM,MAAM,yBAAyB,GAAG;IACtC,YAAY,CAAC,EAAE,mBAAmB,CAAC,cAAc,CAAC,CAAC;CACpD,CAAC;AAKF,eAAO,MAAM,iBAAiB,iCAM7B,CAAC;AAEF,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,qBAYxD;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,qBA2BhE"}

package/NexusLayout/index.d.ts

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

package/NexusLayout/index.d.ts.map

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

package/NexusLayout/index.js

@@ -0,0 +1,370 @@
+"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 jsxRuntime = require("react/jsx-runtime");
+const utilities_css = require("../utilities/css.js");
+const EasyPostLogo = require("../__chunks__/EasyPostLogo-C9-Q0lSn.js");
+const React = require("react");
+const HorizontalStack = require("../__chunks__/HorizontalStack-CWdKKY8L.js");
+const Icon = require("../__chunks__/Icon-BRlbo3RF.js");
+const Menu = require("../__chunks__/Menu-MGDv1tob.js");
+const Text = require("../__chunks__/Text-DkzMEqky.js");
+const useFocusRing = require("../__chunks__/useFocusRing-DbC9E5wC.js");
+const mergeProps = require("../__chunks__/mergeProps-DLPcevok.js");
+const useHover = require("../__chunks__/useHover-Ck1otl-j.js");
+const usePress = require("../__chunks__/usePress-B5G5CgVn.js");
+const useLink = require("../__chunks__/useLink-CChqhQkC.js");
+const VerticalStack = require("../__chunks__/VerticalStack-BHkiocKU.js");
+const button = "_button_14248_4";
+const focused$2 = "_focused_14248_25";
+const hovered$2 = "_hovered_14248_37";
+const selected$2 = "_selected_14248_41";
+const open = "_open_14248_42";
+const badgeContainer = "_badgeContainer_14248_47";
+const badge = "_badge_14248_47";
+const styles$4 = {
+  button,
+  focused: focused$2,
+  hovered: hovered$2,
+  selected: selected$2,
+  open,
+  badgeContainer,
+  badge
+};
+function NexusLayoutActions(props) {
+  const { children } = props;
+  return jsxRuntime.jsx(HorizontalStack.HorizontalStack, {
+    wrap: false,
+    gap: "0.5",
+    align: "end",
+    children
+  });
+}
+function NexusLayoutMenuAction(props) {
+  const { accessibilityLabel = "Actions", iconSymbol, children, renderBadge } = props;
+  const [isOpen, setIsOpen] = React.useState(false);
+  const handleOpenChange = React.useCallback((isOpen2) => {
+    setIsOpen(isOpen2);
+  }, []);
+  const { focusProps, isFocusVisible } = useFocusRing.$f7dceffc5ad7768b$export$4e328f61c538687f({});
+  const { hoverProps, isHovered } = useHover.$6179b936705e76d3$export$ae780daf29e6d456({});
+  const className = utilities_css.classNames(styles$4.button, isFocusVisible && styles$4.focused, isHovered && styles$4.hovered, isOpen && styles$4.open);
+  return jsxRuntime.jsxs(Menu.Menu, {
+    isOpen,
+    onOpenChange: handleOpenChange,
+    children: [jsxRuntime.jsx(Menu.Menu.Trigger, {
+      children: jsxRuntime.jsxs(PressableButton, __spreadProps(__spreadValues({
+        className
+      }, mergeProps.$3ef42575df84b30b$export$9d1611c77c2fe928(focusProps, hoverProps)), {
+        children: [jsxRuntime.jsx(Text.Text, {
+          visuallyHidden: true,
+          children: accessibilityLabel
+        }), jsxRuntime.jsx(Icon.Icon, {
+          symbol: iconSymbol
+        }), renderBadge && jsxRuntime.jsx("div", {
+          className: styles$4.badgeContainer,
+          children: renderBadge()
+        })]
+      }))
+    }), children]
+  });
+}
+function NexusLayoutLinkAction(props) {
+  const { accessibilityLabel = "Actions", iconSymbol, renderBadge, isSelected } = props;
+  const ref = React.useRef(null);
+  const { linkProps } = useLink.$298d61e98472621b$export$dcf14c9974fe2767(props, ref);
+  const { focusProps, isFocusVisible } = useFocusRing.$f7dceffc5ad7768b$export$4e328f61c538687f(props);
+  const { hoverProps, isHovered } = useHover.$6179b936705e76d3$export$ae780daf29e6d456(props);
+  const className = utilities_css.classNames(styles$4.button, isFocusVisible && styles$4.focused, isHovered && styles$4.hovered, isSelected && styles$4.selected);
+  return jsxRuntime.jsxs("a", __spreadProps(__spreadValues({
+    ref,
+    className
+  }, mergeProps.$3ef42575df84b30b$export$9d1611c77c2fe928(hoverProps, focusProps, linkProps)), {
+    "aria-current": isSelected ? "true" : void 0,
+    children: [jsxRuntime.jsx(Text.Text, {
+      visuallyHidden: true,
+      children: accessibilityLabel
+    }), jsxRuntime.jsx(Icon.Icon, {
+      symbol: iconSymbol
+    }), renderBadge && jsxRuntime.jsx("div", {
+      className: styles$4.badgeContainer,
+      children: renderBadge()
+    })]
+  }));
+}
+function NexusLayoutActionBadge(props) {
+  const { children } = props;
+  return jsxRuntime.jsx("div", {
+    className: styles$4.badge,
+    children
+  });
+}
+const PressableButton = React.forwardRef((props, ref) => {
+  const { pressProps } = usePress.$f6c31cce2adf654f$export$45712eceda6fad21(props);
+  return jsxRuntime.jsx("button", __spreadProps(__spreadValues({}, pressProps), {
+    ref,
+    className: utilities_css.classNames(pressProps.className)
+  }));
+});
+PressableButton.displayName = "PressableButton";
+const container = "_container_5x0j8_4";
+const sidebar = "_sidebar_5x0j8_11";
+const content$1 = "_content_5x0j8_18";
+const styles$3 = {
+  container,
+  sidebar,
+  content: content$1
+};
+function NexusLayoutMultipageContainer(props) {
+  const { children } = props;
+  return jsxRuntime.jsx("div", {
+    className: styles$3.container,
+    children
+  });
+}
+function NexusLayoutMultipageSidebar(props) {
+  const { children } = props;
+  return jsxRuntime.jsx("div", {
+    role: "region",
+    className: styles$3.sidebar,
+    children
+  });
+}
+function NexusLayoutMultipageContent(props) {
+  const { children } = props;
+  return jsxRuntime.jsx("div", {
+    className: styles$3.content,
+    children: jsxRuntime.jsx(VerticalStack.VerticalStack, {
+      gap: "2",
+      children
+    })
+  });
+}
+function NexusLayoutMultipageHeader(props) {
+  const { children } = props;
+  return jsxRuntime.jsx(HorizontalStack.HorizontalStack, {
+    as: "header",
+    blockAlign: "center",
+    align: "space-between",
+    children
+  });
+}
+function NexusLayoutMultipageTitle(props) {
+  const { children } = props;
+  return jsxRuntime.jsx(Text.Text, {
+    as: "h3",
+    variant: "heading5",
+    children
+  });
+}
+const link$1 = "_link_os35m_4";
+const focused$1 = "_focused_os35m_13";
+const hovered$1 = "_hovered_os35m_25";
+const selected$1 = "_selected_os35m_29";
+const styles$2 = {
+  link: link$1,
+  focused: focused$1,
+  hovered: hovered$1,
+  selected: selected$1
+};
+const SidebarNavContext = React.createContext(null);
+const useNexusLayoutMultipageSidebarNav = () => {
+  const context = React.useContext(SidebarNavContext);
+  if (!context) {
+    throw new Error("useNexusLayoutMultipageSidebarNav must be used within a NexusLayoutMultipageSidebarNav");
+  }
+  return context;
+};
+function NexusLayoutMultipageSidebarNav(props) {
+  const { selectedHref, title, children } = props;
+  const titleId = React.useId();
+  const context = React.useMemo(() => {
+    return {
+      selectedHref
+    };
+  }, [selectedHref]);
+  return jsxRuntime.jsx(SidebarNavContext.Provider, {
+    value: context,
+    children: jsxRuntime.jsxs(VerticalStack.VerticalStack, {
+      as: "nav",
+      gap: "2",
+      "aria-labelledby": titleId,
+      children: [jsxRuntime.jsx(Text.Text, {
+        as: "h2",
+        variant: "heading4",
+        id: titleId,
+        children: title
+      }), children]
+    })
+  });
+}
+function NexusLayoutMultipageSidebarNavSection(props) {
+  const { title, children } = props;
+  return jsxRuntime.jsxs(VerticalStack.VerticalStack, {
+    gap: "2",
+    inlineAlign: "start",
+    children: [jsxRuntime.jsx(Text.Text, {
+      variant: "overline",
+      children: title
+    }), children]
+  });
+}
+function NexusLayoutMultipageSidebarNavLink(props) {
+  const { href, iconSymbol, children } = props;
+  const { selectedHref } = useNexusLayoutMultipageSidebarNav();
+  const ref = React.useRef(null);
+  const { linkProps } = useLink.$298d61e98472621b$export$dcf14c9974fe2767(props, ref);
+  const { focusProps, isFocusVisible } = useFocusRing.$f7dceffc5ad7768b$export$4e328f61c538687f(props);
+  const { hoverProps, isHovered } = useHover.$6179b936705e76d3$export$ae780daf29e6d456(props);
+  const isSelected = href === selectedHref;
+  const className = utilities_css.classNames(styles$2.link, isFocusVisible && styles$2.focused, isHovered && styles$2.hovered, isSelected && styles$2.selected);
+  return jsxRuntime.jsxs("a", __spreadProps(__spreadValues({
+    ref,
+    className
+  }, mergeProps.$3ef42575df84b30b$export$9d1611c77c2fe928(hoverProps, focusProps, linkProps)), {
+    "aria-current": isSelected ? "page" : void 0,
+    children: [jsxRuntime.jsx(Icon.Icon, {
+      symbol: iconSymbol
+    }), jsxRuntime.jsx(Text.Text, {
+      variant: "body2",
+      weight: isSelected ? "semibold" : void 0,
+      children
+    })]
+  }));
+}
+const link = "_link_q3unw_4";
+const focused = "_focused_q3unw_23";
+const hovered = "_hovered_q3unw_35";
+const selected = "_selected_q3unw_39";
+const styles$1 = {
+  link,
+  focused,
+  hovered,
+  selected
+};
+const NexusLayoutNavContext = React.createContext(null);
+const useNexusLayoutNav = () => {
+  const context = React.useContext(NexusLayoutNavContext);
+  if (!context) {
+    throw new Error("useNexusLayoutNav must be used within a NexusLayoutNav");
+  }
+  return context;
+};
+function NexusLayoutNav(props) {
+  const { "aria-label": ariaLabel = "Main", selectedHref, children } = props;
+  const context = React.useMemo(() => {
+    return {
+      selectedHref
+    };
+  }, [selectedHref]);
+  return jsxRuntime.jsx(NexusLayoutNavContext.Provider, {
+    value: context,
+    children: jsxRuntime.jsx(HorizontalStack.HorizontalStack, {
+      as: "nav",
+      "aria-label": ariaLabel,
+      children
+    })
+  });
+}
+function NexusLayoutNavLink(props) {
+  const { href, iconSymbol, children } = props;
+  const { selectedHref } = useNexusLayoutNav();
+  const ref = React.useRef(null);
+  const { linkProps } = useLink.$298d61e98472621b$export$dcf14c9974fe2767(props, ref);
+  const { focusProps, isFocusVisible } = useFocusRing.$f7dceffc5ad7768b$export$4e328f61c538687f(props);
+  const { hoverProps, isHovered } = useHover.$6179b936705e76d3$export$ae780daf29e6d456(props);
+  const isSelected = href === selectedHref;
+  const className = utilities_css.classNames(styles$1.link, isFocusVisible && styles$1.focused, isHovered && styles$1.hovered, isSelected && styles$1.selected);
+  return jsxRuntime.jsxs("a", __spreadProps(__spreadValues({
+    ref,
+    className
+  }, mergeProps.$3ef42575df84b30b$export$9d1611c77c2fe928(hoverProps, focusProps, linkProps)), {
+    "aria-current": isSelected ? "page" : void 0,
+    children: [jsxRuntime.jsx(Icon.Icon, {
+      symbol: iconSymbol
+    }), jsxRuntime.jsx(Text.Text, {
+      variant: "subtitle2",
+      weight: "semibold",
+      children
+    })]
+  }));
+}
+const NexusLayout$1 = "_NexusLayout_1gn4l_4";
+const backgroundDecoration01 = "_backgroundDecoration01_1gn4l_13";
+const header = "_header_1gn4l_19";
+const logo = "_logo_1gn4l_39";
+const content = "_content_1gn4l_43";
+const styles = {
+  NexusLayout: NexusLayout$1,
+  backgroundDecoration01,
+  header,
+  logo,
+  content
+};
+function NexusLayout(props) {
+  const { backgroundDecoration = "01", children } = props;
+  const className = utilities_css.classNames(styles.NexusLayout, styles[utilities_css.variationName("backgroundDecoration", backgroundDecoration)]);
+  return jsxRuntime.jsx("div", {
+    className,
+    children
+  });
+}
+function NexusLayoutHeader(props) {
+  const { children } = props;
+  return jsxRuntime.jsx("header", {
+    className: styles.header,
+    children
+  });
+}
+function NexusLayoutLogo(props) {
+  const { children = jsxRuntime.jsx(EasyPostLogo.EasyPostLogo, {}) } = props;
+  return jsxRuntime.jsx("div", {
+    className: styles.logo,
+    children
+  });
+}
+function NexusLayoutContent(props) {
+  const { children } = props;
+  return jsxRuntime.jsx("main", {
+    className: styles.content,
+    children
+  });
+}
+NexusLayout.Header = NexusLayoutHeader;
+NexusLayout.Logo = NexusLayoutLogo;
+NexusLayout.Nav = NexusLayoutNav;
+NexusLayout.NavLink = NexusLayoutNavLink;
+NexusLayout.Actions = NexusLayoutActions;
+NexusLayout.ActionBadge = NexusLayoutActionBadge;
+NexusLayout.MenuAction = NexusLayoutMenuAction;
+NexusLayout.LinkAction = NexusLayoutLinkAction;
+NexusLayout.Content = NexusLayoutContent;
+NexusLayout.MultipageContainer = NexusLayoutMultipageContainer;
+NexusLayout.MultipageSidebar = NexusLayoutMultipageSidebar;
+NexusLayout.MultipageContent = NexusLayoutMultipageContent;
+NexusLayout.MultipageHeader = NexusLayoutMultipageHeader;
+NexusLayout.MultipageTitle = NexusLayoutMultipageTitle;
+NexusLayout.MultipageSidebarNav = NexusLayoutMultipageSidebarNav;
+NexusLayout.MultipageSidebarNavSection = NexusLayoutMultipageSidebarNavSection;
+NexusLayout.MultipageSidebarNavLink = NexusLayoutMultipageSidebarNavLink;
+NexusLayout.useNexusLayoutNav = useNexusLayoutNav;
+NexusLayout.useNexusLayoutMultipageSidebarNav = useNexusLayoutMultipageSidebarNav;
+exports.NexusLayout = NexusLayout;