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

package/Modal/index.mjs

@@ -29,68 +29,21 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
-import React__default, { useRef, useEffect, createContext, useContext, useMemo, cloneElement, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import React__default, { createContext, useState, useMemo, useContext, cloneElement, useRef } from "react";
 import { classNames, variationName } from "../utilities/css.mjs";
 import { useScrollbar } from "../utilities/useScrollbar.mjs";
-import { Button } from "../Button/index.mjs";
-import { C as Close } from "../__chunks__/Close-25146223.mjs";
-import { HorizontalStack } from "../HorizontalStack/index.mjs";
-import { Icon } from "../Icon/index.mjs";
-import { Text } from "../Text/index.mjs";
-import { VerticalStack } from "../VerticalStack/index.mjs";
-import { b as $337b884510726a0d$export$14c98a7594375490, c as $8ac8429251c45e4b$export$dbc0f175b25fb0fb, d as $337b884510726a0d$export$c6fdb837b070b4ff, a as $fc909762b330b746$export$61c6a8c84e605fb6, $ as $628037886ba31236$export$f9d5c8beee7d008d } from "../__chunks__/import-7a45b8e7.mjs";
-import { $ as $bdb11010cef70236$export$b4cc09c592e8fdb8, d as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../__chunks__/import-1f82f104.mjs";
-import { i as $6a99195332edec8b$export$80f3e147d781571c } from "../__chunks__/import-3306af6d.mjs";
-import "../__chunks__/overlayscrollbars-react.es-7f332a3b.mjs";
-import "../__chunks__/index-307aca2b.mjs";
-import "../__chunks__/omit-f17deb8f.mjs";
-import "react-dom";
-import "../__chunks__/import-6a831ca1.mjs";
-import "../__chunks__/real-module-bf5db268.mjs";
-function $40df3f8667284809$export$d55e7ee900f34e93(props, ref) {
-  let { role = "dialog" } = props;
-  let titleId = $bdb11010cef70236$export$b4cc09c592e8fdb8();
-  titleId = props["aria-label"] ? void 0 : titleId;
-  let isRefocusing = useRef(false);
-  useEffect(() => {
-    if (ref.current && !ref.current.contains(document.activeElement)) {
-      $6a99195332edec8b$export$80f3e147d781571c(ref.current);
-      let timeout = setTimeout(() => {
-        if (document.activeElement === ref.current) {
-          isRefocusing.current = true;
-          ref.current.blur();
-          $6a99195332edec8b$export$80f3e147d781571c(ref.current);
-          isRefocusing.current = false;
-        }
-      }, 500);
-      return () => {
-        clearTimeout(timeout);
-      };
-    }
-  }, [
-    ref
-  ]);
-  $337b884510726a0d$export$14c98a7594375490();
-  return {
-    dialogProps: __spreadProps(__spreadValues({}, $65484d02dcb7eb3e$export$457c3d6518dd4c6f(props, {
-      labelable: true
-    })), {
-      role,
-      tabIndex: -1,
-      "aria-labelledby": props["aria-labelledby"] || titleId,
-      // Prevent blur events from reaching useOverlay, which may cause
-      // popovers to close. Since focus is contained within the dialog,
-      // we don't want this to occur due to the above useEffect.
-      onBlur: (e) => {
-        if (isRefocusing.current)
-          e.stopPropagation();
-      }
-    }),
-    titleProps: {
-      id: titleId
-    }
-  };
-}
+import { B as Button } from "../__chunks__/Button-JL1YQxJ5.mjs";
+import { C as Close } from "../__chunks__/Close-Cq6Q6MN6.mjs";
+import { H as HorizontalStack } from "../__chunks__/HorizontalStack-CJavrBHm.mjs";
+import { I as Icon } from "../__chunks__/Icon-BIpaQJ_I.mjs";
+import { T as Text } from "../__chunks__/Text-D6oT5WJQ.mjs";
+import { V as VerticalStack } from "../__chunks__/VerticalStack-DoMqBfYD.mjs";
+import { $ as $8ac8429251c45e4b$export$dbc0f175b25fb0fb } from "../__chunks__/useModalOverlay-BmYXH7rq.mjs";
+import { d as $337b884510726a0d$export$c6fdb837b070b4ff, a as $fc909762b330b746$export$61c6a8c84e605fb6 } from "../__chunks__/Overlay-Dkjxuk6V.mjs";
+import { $ as $628037886ba31236$export$f9d5c8beee7d008d } from "../__chunks__/useOverlayTrigger-CIVwezu3.mjs";
+import { u as useIntersectionDetection } from "../__chunks__/useIntersectionDetection-BvUmtDgl.mjs";
+import { $ as $40df3f8667284809$export$d55e7ee900f34e93 } from "../__chunks__/useDialog-nKMoC_Cs.mjs";
 const ModalContext = createContext(null);
 const useModalContext = () => {
   const modalContext = useContext(ModalContext);
@@ -111,22 +64,42 @@ const useModalTrigger = () => {
   const modalTriggerContext = useModalTriggerContext();
   return modalTriggerContext.state;
 };
-const underlayBg = "_underlayBg_10qt7_5";
-const underlayBox = "_underlayBox_10qt7_28";
-const underlayEdge = "_underlayEdge_10qt7_36";
-const Modal$1 = "_Modal_10qt7_42";
-const header = "_header_10qt7_60";
-const stuck = "_stuck_10qt7_66";
-const body = "_body_10qt7_70";
-const content = "_content_10qt7_77";
-const footer = "_footer_10qt7_94";
-const closeBtn = "_closeBtn_10qt7_111";
-const iconAtEnd = "_iconAtEnd_10qt7_125";
-const sizeSm = "_sizeSm_10qt7_131";
-const sizeMd = "_sizeMd_10qt7_135";
-const sizeLg = "_sizeLg_10qt7_139";
+function ModalTriggerProvider({ state, isDismissable, children }) {
+  const [hasOpenNestedModal, setHasOpenNestedModal] = useState(false);
+  const context = useMemo(() => {
+    return {
+      hasOpenNestedModal,
+      setHasOpenNestedModal,
+      state,
+      isDismissable
+    };
+  }, [hasOpenNestedModal, state, isDismissable]);
+  return jsx(ModalTriggerContext.Provider, {
+    value: context,
+    children
+  });
+}
+const underlayBg = "_underlayBg_1xo4s_4";
+const underlayBgHidden = "_underlayBgHidden_1xo4s_27";
+const underlayBox = "_underlayBox_1xo4s_31";
+const underlayEdge = "_underlayEdge_1xo4s_39";
+const Modal$1 = "_Modal_1xo4s_45";
+const header = "_header_1xo4s_63";
+const stuck = "_stuck_1xo4s_69";
+const body = "_body_1xo4s_73";
+const content = "_content_1xo4s_80";
+const footer = "_footer_1xo4s_97";
+const footerSlot = "_footerSlot_1xo4s_105";
+const footerActions = "_footerActions_1xo4s_110";
+const closeBtn = "_closeBtn_1xo4s_122";
+const iconAtEnd = "_iconAtEnd_1xo4s_136";
+const sizeSm = "_sizeSm_1xo4s_142";
+const sizeMd = "_sizeMd_1xo4s_146";
+const sizeLg = "_sizeLg_1xo4s_150";
+const sizeXl = "_sizeXl_1xo4s_154";
 const styles = {
   underlayBg,
+  underlayBgHidden,
   underlayBox,
   underlayEdge,
   Modal: Modal$1,
@@ -135,82 +108,110 @@ const styles = {
   body,
   content,
   footer,
+  footerSlot,
+  footerActions,
   closeBtn,
   iconAtEnd,
   sizeSm,
   sizeMd,
-  sizeLg
+  sizeLg,
+  sizeXl
 };
 function ModalBody(props) {
   const { children } = props;
   const modalContext = useModalContext();
   useScrollbar(modalContext.bodyRef, "ezui-os-theme-modal");
-  return React__default.createElement("div", {
+  return jsx("div", {
     className: styles.body,
-    ref: modalContext.bodyRef
-  }, React__default.createElement("div", {
-    className: styles.content
-  }, React__default.createElement("div", {
-    "data-intercept": "header",
-    ref: modalContext.headerInterceptorRef
-  }), children, React__default.createElement("div", {
-    "data-intercept": "footer",
-    ref: modalContext.footerInterceptorRef
-  })));
+    ref: modalContext.bodyRef,
+    children: jsxs("div", {
+      className: styles.content,
+      children: [jsx("div", {
+        "data-intercept": "header",
+        ref: modalContext.headerInterceptorRef
+      }), children, jsx("div", {
+        "data-intercept": "footer",
+        ref: modalContext.footerInterceptorRef
+      })]
+    })
+  });
 }
 function ModalFooter(props) {
-  const { primaryAction, secondaryAction } = props;
+  var _a;
   const modalContext = useModalContext();
-  const className = classNames(styles.footer, modalContext.isFooterStuck && styles.stuck);
-  return React__default.createElement("div", {
-    className
-  }, secondaryAction && React__default.createElement(Button, {
-    onPress: secondaryAction.onAction,
-    color: "neutral",
-    isDisabled: secondaryAction.isDisabled
-  }, secondaryAction.content), React__default.createElement(Button, {
-    onPress: primaryAction.onAction,
-    isDisabled: primaryAction.isDisabled
-  }, primaryAction.content));
+  const className = classNames(styles.footer, "children" in props ? styles.footerSlot : styles.footerActions, modalContext.isFooterStuck && styles.stuck);
+  if ("children" in props) {
+    return jsx("div", {
+      className,
+      children: props.children
+    });
+  }
+  const { primaryAction, secondaryAction } = props;
+  return jsxs("div", {
+    className,
+    children: [secondaryAction && jsx(Button, {
+      onPress: secondaryAction.onAction,
+      color: (_a = secondaryAction.color) != null ? _a : "neutral",
+      isDisabled: secondaryAction.isDisabled,
+      children: secondaryAction.content
+    }), jsx(Button, {
+      onPress: primaryAction.onAction,
+      color: primaryAction.color,
+      isDisabled: primaryAction.isDisabled,
+      children: primaryAction.content
+    })]
+  });
 }
 function ModalHeader(props) {
   const { as = "h2", children, subtitle, iconAtStart, iconAtEnd: iconAtEnd2 } = props;
   const modalContext = useModalContext();
   const modalTriggerContext = useModalTriggerContext();
   const className = classNames(styles.header, modalContext.isHeaderStuck && styles.stuck);
-  return React__default.createElement("div", {
-    className
-  }, React__default.createElement(VerticalStack, {
-    gap: "1.5"
-  }, React__default.createElement(HorizontalStack, {
-    align: "space-between",
-    blockAlign: "center",
-    wrap: false
-  }, React__default.createElement(HorizontalStack, {
-    gap: "2",
-    wrap: false
-  }, iconAtStart && React__default.createElement("span", null, React__default.createElement(Icon, __spreadProps(__spreadValues({}, iconAtStart), {
-    size: "lg"
-  }))), React__default.createElement(Text, __spreadValues({
-    as,
-    variant: "heading4",
-    truncate: true
-  }, modalContext.titleProps), children)), iconAtEnd2 ? React__default.createElement("span", {
-    className: styles.iconAtEnd,
-    "data-size": iconAtEnd2.size
-  }, React__default.createElement(Icon, __spreadValues({}, iconAtEnd2))) : modalTriggerContext.isDismissable ? React__default.createElement("button", {
-    className: styles.closeBtn,
-    onClick: () => {
-      modalTriggerContext.state.close();
-    }
-  }, React__default.createElement(Text, {
-    visuallyHidden: true
-  }, "Close modal"), React__default.createElement(Icon, {
-    symbol: Close,
-    size: "sm"
-  })) : null), subtitle && React__default.createElement(Text, {
-    variant: "subtitle1"
-  }, subtitle)));
+  return jsx("div", {
+    className,
+    children: jsxs(VerticalStack, {
+      gap: "1.5",
+      children: [jsxs(HorizontalStack, {
+        align: "space-between",
+        blockAlign: "center",
+        wrap: false,
+        children: [jsxs(HorizontalStack, {
+          gap: "2",
+          wrap: false,
+          children: [iconAtStart && jsx("span", {
+            children: jsx(Icon, __spreadProps(__spreadValues({}, iconAtStart), {
+              size: "lg"
+            }))
+          }), jsx(Text, __spreadProps(__spreadValues({
+            as,
+            variant: "heading4",
+            truncate: true
+          }, modalContext.titleProps), {
+            children
+          }))]
+        }), iconAtEnd2 ? jsx("span", {
+          className: styles.iconAtEnd,
+          "data-size": iconAtEnd2.size,
+          children: jsx(Icon, __spreadValues({}, iconAtEnd2))
+        }) : modalTriggerContext.isDismissable ? jsxs("button", {
+          className: styles.closeBtn,
+          onClick: () => {
+            modalTriggerContext.state.close();
+          },
+          children: [jsx(Text, {
+            visuallyHidden: true,
+            children: "Close modal"
+          }), jsx(Icon, {
+            symbol: Close,
+            size: "sm"
+          })]
+        }) : null]
+      }), subtitle && jsx(Text, {
+        variant: "subtitle1",
+        children: subtitle
+      })]
+    })
+  });
 }
 function ModalUnderlay(props) {
   const _a = props, { state, children } = _a, overlayProps = __objRest(_a, ["state", "children"]);
@@ -220,16 +221,23 @@ function ModalUnderlay(props) {
     isDismissable,
     isKeyboardDismissDisabled: !isDismissable
   }), state, ref);
-  return React__default.createElement($337b884510726a0d$export$c6fdb837b070b4ff, null, React__default.createElement("div", __spreadValues({
-    className: styles.underlayBg
-  }, underlayProps), React__default.createElement("div", __spreadProps(__spreadValues({}, modalProps), {
-    ref,
-    className: styles.underlayBox
-  }), React__default.createElement("div", {
-    className: styles.underlayEdge
-  }), children, React__default.createElement("div", {
-    className: styles.underlayEdge
-  }))));
+  const { hasOpenNestedModal } = useModalTriggerContext();
+  const className = classNames(styles.underlayBg, hasOpenNestedModal && styles.underlayBgHidden);
+  return jsx($337b884510726a0d$export$c6fdb837b070b4ff, {
+    children: jsx("div", __spreadProps(__spreadValues({
+      className
+    }, underlayProps), {
+      children: jsxs("div", __spreadProps(__spreadValues({}, modalProps), {
+        ref,
+        className: styles.underlayBox,
+        children: [jsx("div", {
+          className: styles.underlayEdge
+        }), children, jsx("div", {
+          className: styles.underlayEdge
+        })]
+      }))
+    }))
+  });
 }
 function ModalTrigger(props) {
   const _a = props, { children, isDismissable = true } = _a, inTriggerProps = __objRest(_a, ["children", "isDismissable"]);
@@ -241,45 +249,34 @@ function ModalTrigger(props) {
     throw new Error("children must be exactly one trigger element and one modal element");
   }
   const [trigger, modal] = children;
-  const context = useMemo(() => {
-    return {
+  return jsxs(ModalTriggerProvider, {
+    state,
+    isDismissable,
+    children: [cloneElement(trigger, triggerProps), state.isOpen && jsx(ModalUnderlay, __spreadProps(__spreadValues({}, props), {
       state,
-      isDismissable
-    };
-  }, [isDismissable, state]);
-  return React__default.createElement(ModalTriggerContext.Provider, {
-    value: context
-  }, cloneElement(trigger, triggerProps), state.isOpen && React__default.createElement(ModalUnderlay, __spreadProps(__spreadValues({}, props), {
-    state
-  }), cloneElement(typeof modal === "function" ? modal(state.close) : modal, overlayProps)));
-}
-function useIntersectionDetection(targetRef, scrollRef) {
-  const [isStuck, setIsStuck] = useState(false);
-  useEffect(() => {
-    if (!targetRef.current || !scrollRef.current) {
-      return;
-    }
-    const observer = new IntersectionObserver(([entry]) => {
-      setIsStuck(!entry.isIntersecting);
-    }, {
-      root: scrollRef.current
-    });
-    observer.observe(targetRef.current);
-    return () => {
-      observer.disconnect();
-    };
-  }, [targetRef, scrollRef]);
-  return isStuck;
+      children: cloneElement(typeof modal === "function" ? modal(state.close) : modal, overlayProps)
+    }))]
+  });
 }
 function ModalContainer(props) {
   const { children, isDismissable = true, onDismiss = () => {
   } } = props;
-  const existingModalTriggerContext = useContext(ModalTriggerContext);
-  if (existingModalTriggerContext) {
-    throw new Error("Modal.Container must be used outside of a Modal.Trigger");
+  const childArray = React__default.Children.toArray(children);
+  if (childArray.length > 1) {
+    throw new Error("Only a single child can be passed to ModalContainer.");
+  }
+  const [lastChild, setLastChild] = useState(null);
+  let child = null;
+  if (Array.isArray(children)) {
+    child = children.find(React__default.isValidElement);
+  } else if (React__default.isValidElement(children)) {
+    child = children;
+  }
+  if (child && child !== lastChild) {
+    setLastChild(child);
   }
   const state = $fc909762b330b746$export$61c6a8c84e605fb6({
-    isOpen: Boolean(children),
+    isOpen: Boolean(child),
     onOpenChange: (isOpen) => {
       if (!isOpen) {
         onDismiss();
@@ -289,18 +286,15 @@ function ModalContainer(props) {
   const { overlayProps } = $628037886ba31236$export$f9d5c8beee7d008d({
     type: "dialog"
   }, state);
-  const context = useMemo(() => {
-    return {
-      state,
-      isDismissable
-    };
-  }, [state, isDismissable]);
-  return React__default.createElement(ModalTriggerContext.Provider, {
-    value: context
-  }, state.isOpen && React__default.createElement(ModalUnderlay, {
+  return jsx(ModalTriggerProvider, {
     state,
-    isDismissable
-  }, children ? typeof children === "function" ? children(state.close) : cloneElement(children, overlayProps) : null));
+    isDismissable,
+    children: state.isOpen && jsx(ModalUnderlay, {
+      state,
+      isDismissable,
+      children: lastChild ? cloneElement(lastChild, overlayProps) : null
+    })
+  });
 }
 function Modal(props) {
   const { children, size = "lg" } = props;
@@ -325,12 +319,14 @@ function Modal(props) {
     };
   }, [dialogProps, isFooterStuck, isHeaderStuck, titleProps]);
   const className = classNames(styles.Modal, styles[variationName("size", size)]);
-  return React__default.createElement(ModalContext.Provider, {
-    value: context
-  }, React__default.createElement("div", __spreadProps(__spreadValues({}, dialogProps), {
-    className,
-    ref: dialogRef
-  }), children));
+  return jsx(ModalContext.Provider, {
+    value: context,
+    children: jsx("div", __spreadProps(__spreadValues({}, dialogProps), {
+      className,
+      ref: dialogRef,
+      children
+    }))
+  });
 }
 Modal.Trigger = ModalTrigger;
 Modal.Header = ModalHeader;

package/Modal/useIntersectionDetection.d.ts

@@ -6,5 +6,5 @@ import { RefObject } from "react";
  * @param scrollRef The scroll root to check against
  * @returns when element is intersecting
  */
-export declare function useIntersectionDetection(targetRef: RefObject<HTMLDivElement>, scrollRef: RefObject<HTMLDivElement>): boolean;
+export declare function useIntersectionDetection(targetRef: RefObject<HTMLDivElement | null>, scrollRef: RefObject<HTMLDivElement | null>): boolean;
 //# sourceMappingURL=useIntersectionDetection.d.ts.map

package/Modal/useIntersectionDetection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useIntersectionDetection.d.ts","sourceRoot":"","sources":["../../src/Modal/useIntersectionDetection.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAuB,MAAM,OAAO,CAAC;AAEvD;;;;;;GAMG;AACH,wBAAgB,wBAAwB,CACtC,SAAS,EAAE,SAAS,CAAC,cAAc,CAAC,EACpC,SAAS,EAAE,SAAS,CAAC,cAAc,CAAC,WAwBrC"}
+{"version":3,"file":"useIntersectionDetection.d.ts","sourceRoot":"","sources":["../../src/Modal/useIntersectionDetection.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAuB,MAAM,OAAO,CAAC;AAEvD;;;;;;GAMG;AACH,wBAAgB,wBAAwB,CACtC,SAAS,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,EAC3C,SAAS,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,WAwB5C"}

package/MultiSelect/MultiSelect.d.ts

@@ -0,0 +1,133 @@
+import React from "react";
+import { Key, useFilter } from "react-aria";
+import { ComboBoxProps } from "react-aria-components";
+import { AsyncListData, useAsyncList, useListData } from "react-stately";
+import { MenuOverlayProps } from "../Menu/MenuOverlay";
+import { PillProps, PillBackground } from "../PillGroup";
+import { MultiSelectDropdownOption, MultiSelectDropdownOptionText } from "./MultiSelectDropdown";
+export type Item = {
+    key: Key;
+} & PillProps;
+export type MultiSelectProps<T extends object> = {
+    /**
+     * The children to render inside the multi-select component. This can either be a direct
+     * React node or a function that takes an item from the provided collection and returns a React node.
+     */
+    children: React.ReactNode | ((item: T) => React.ReactNode);
+    /**
+     * A list of keys representing disabled items in the dropdown. These items will be
+     * non-selectable in the multi-select input.
+     */
+    disabledKeys?: ComboBoxProps<T>["disabledKeys"];
+    /**
+     * The list of items to display in the dropdown. These items are typically passed down
+     * from a ComboBox component and represent the available options for selection.
+     */
+    dropdownItems: ComboBoxProps<T>["items"];
+    /**
+     * The current input value in the multi-select input field. This is used to filter or search
+     * for items within the dropdown list.
+     */
+    inputValue: ComboBoxProps<T>["inputValue"];
+    /**
+     * A boolean flag that indicates whether the dropdown is in a loading state.
+     * When true, the dropdown will display a loading spinner or indicator.
+     */
+    isLoading?: AsyncListData<T>["isLoading"];
+    /**
+     * The maximum number of items to show before the dropdown becomes scrollable.
+     * This value is passed down from the MenuOverlay component and controls the
+     * appearance of the dropdown when there are too many items to display.
+     */
+    maxItemsUntilScroll?: MenuOverlayProps<T>["maxItemsUntilScroll"];
+    /**
+     * Handler that is triggered whenever the input value changes. It is typically used to
+     * filter or update the available dropdown items based on the input.
+     */
+    onInputChange: ComboBoxProps<T>["onInputChange"];
+    /**
+     * A callback handler that is invoked when the selection changes. It receives the updated
+     * list of selected items and is typically used to manage state or trigger other side effects.
+     */
+    onSelectionChange: (items: T[]) => void;
+    /**
+     * Placeholder text that appears when no items are selected in the multi-select input.
+     */
+    placeholder?: string;
+    /**
+     * Function that renders a "pill" or tag-like element for each selected item in the multi-select.
+     * This is useful for custom rendering of selected items.
+     */
+    renderPill: (item: T) => React.ReactNode;
+    /**
+     * The currently selected items in the collection. This is a controlled value that reflects
+     * the currently selected items.
+     */
+    selectedItems: T[];
+    /**
+     * The background of individual pills. Maps to token theme colors.
+     */
+    pillBackground?: PillBackground;
+    /**
+     * Whether or not individual pills have a border.
+     *
+     * @default false
+     */
+    isPillBorderless?: boolean;
+};
+/**
+ * An input and dropdown that allows users to select multiple options from a list.
+ *
+ * @privateRemarks
+ * Some inspiration from
+ * https://github.com/irsyadadl/justd/blob/2.x/components/ui/multiple-select.tsx
+ * Note that there are some limitations to this component until React Aria
+ * builds a dedicated component:
+ * https://github.com/adobe/react-spectrum/issues/2140
+ *
+ * @example
+ * _Sync list:_
+ * ```tsx
+ * const [selectedItems, setSelectedItems] = React.useState<Item[]>([]);
+ * const { contains } = useFilter({ sensitivity: "base" });
+ * const filter = useCallback(
+ *   (item: Item, filterText: string) => contains(item.label, filterText),
+ *   [contains],
+ * );
+ * const list = useListData<Item>({
+ *   initialSelectedKeys: [],
+ *   initialItems: [{ key: 1, label: "Apple" }, { key: 2, label: "Banana" }],
+ *   filter,
+ * });
+ *
+ * <MultiSelect
+ *   isLoading={list.isLoading}
+ *   dropdownItems={list.items}
+ *   inputValue={list.filterText}
+ *   onInputChange={list.setFilterText}
+ *   disabledKeys={selectedItems.map((item) => item.key)}
+ *   selectedItems={selectedItems}
+ *   onSelectionChange={setSelectedItems}
+ *   placeholder="Select a fruit"
+ *   maxItemsUntilScroll={10}
+ *   renderPill={(item) => (
+ *     <MultiSelect.Pill label={item.label} />
+ *   )}
+ * >
+ *   {(item) => (
+ *     <MultiSelect.Option textValue={item.label}>
+ *       <MultiSelect.OptionText>{item.label}</MultiSelect.OptionText>
+ *     </MultiSelect.Option>
+ *   )}
+ * </MultiSelect>
+ * ```
+ */
+export declare function MultiSelect<T extends Item>(props: MultiSelectProps<T>): React.JSX.Element;
+export declare namespace MultiSelect {
+    var Pill: (props: PillProps) => React.JSX.Element;
+    var Option: typeof MultiSelectDropdownOption;
+    var OptionText: typeof MultiSelectDropdownOptionText;
+}
+export { useAsyncList, useFilter, useListData };
+export type { Key };
+//# sourceMappingURL=MultiSelect.d.ts.map

package/MultiSelect/MultiSelect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiSelect.d.ts","sourceRoot":"","sources":["../../src/MultiSelect/MultiSelect.tsx"],"names":[],"mappings":"AACA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAC/D,OAAO,EAAE,GAAG,EAAE,SAAS,EAAkB,MAAM,YAAY,CAAC;AAC5D,OAAO,EAAoB,aAAa,EAAS,MAAM,uBAAuB,CAAC;AAC/E,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAEzE,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAEvD,OAAO,EAAa,SAAS,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AACpE,OAAO,EAEL,yBAAyB,EACzB,6BAA6B,EAC9B,MAAM,uBAAuB,CAAC;AAM/B,MAAM,MAAM,IAAI,GAAG;IAAE,GAAG,EAAE,GAAG,CAAA;CAAE,GAAG,SAAS,CAAC;AAE5C,MAAM,MAAM,gBAAgB,CAAC,CAAC,SAAS,MAAM,IAAI;IAC/C;;;OAGG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;IAE3D;;;OAGG;IACH,YAAY,CAAC,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC;IAEhD;;;OAGG;IACH,aAAa,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;IAEzC;;;OAGG;IACH,UAAU,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC;IAE3C;;;OAGG;IACH,SAAS,CAAC,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC;IAE1C;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,gBAAgB,CAAC,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC;IAEjE;;;OAGG;IACH,aAAa,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC;IAEjD;;;OAGG;IACH,iBAAiB,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC;IAExC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IAEzC;;;OAGG;IACH,aAAa,EAAE,CAAC,EAAE,CAAC;IAEnB;;OAEG;IACH,cAAc,CAAC,EAAE,cAAc,CAAC;IAEhC;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CG;AACH,wBAAgB,WAAW,CAAC,CAAC,SAAS,IAAI,EAAE,KAAK,EAAE,gBAAgB,CAAC,CAAC,CAAC,qBAuJrE;yBAvJe,WAAW;;;;;AAwK3B,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;AAChD,YAAY,EAAE,GAAG,EAAE,CAAC"}

package/MultiSelect/MultiSelect.stories.d.ts

@@ -0,0 +1,13 @@
+import { Meta, StoryObj } from "@storybook/react-vite";
+import { MultiSelect } from "./MultiSelect";
+type Story = StoryObj<typeof MultiSelect>;
+declare const meta: Meta<typeof MultiSelect>;
+export default meta;
+export declare const StandardDropdown: Story;
+export declare const AsyncDropdown: Story;
+export declare const WithIcons: Story;
+export declare const DisabledKeys: Story;
+export declare const MaxItemsUntilScroll: Story;
+export declare const PillBackground: Story;
+export declare const PillBorder: Story;
+//# sourceMappingURL=MultiSelect.stories.d.ts.map

package/MultiSelect/MultiSelect.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiSelect.stories.d.ts","sourceRoot":"","sources":["../../src/MultiSelect/MultiSelect.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAUvD,OAAO,EAEL,WAAW,EAIZ,MAAM,eAAe,CAAC;AAyBvB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,WAAW,CAAC,CAAC;AAE1C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,WAAW,CAelC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,gBAAgB,EAAE,KAoC9B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAqC3B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KA2CvB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAwC1B,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KAwCjC,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KA2C5B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAyCxB,CAAC"}

package/MultiSelect/MultiSelect.test.d.ts

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

package/MultiSelect/MultiSelect.test.d.ts.map

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

package/MultiSelect/MultiSelectDropdown.d.ts

@@ -0,0 +1,22 @@
+import React, { RefObject } from "react";
+import { ListBoxItemProps } from "react-aria-components";
+import { AsyncListData } from "react-stately";
+import { MenuOverlayProps } from "../Menu/MenuOverlay";
+import { TextProps } from "../Text";
+import { Item } from "./MultiSelect";
+type MultiSelectDropdownProps<T extends object> = {
+    children: React.ReactNode | ((item: T) => React.ReactNode);
+    isLoading?: AsyncListData<T>["isLoading"];
+    maxItemsUntilScroll?: MenuOverlayProps<T>["maxItemsUntilScroll"];
+    menuRef: RefObject<HTMLDivElement | null>;
+    triggerRef: RefObject<HTMLDivElement | null>;
+    width: number;
+};
+type MultiSelectDropdownOptionProps = {
+    children: React.ReactNode;
+} & ListBoxItemProps;
+export declare function MultiSelectDropdown<T extends Item>(props: MultiSelectDropdownProps<T>): React.JSX.Element;
+export declare function MultiSelectDropdownOption(props: MultiSelectDropdownOptionProps): React.JSX.Element;
+export declare function MultiSelectDropdownOptionText(props: TextProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=MultiSelectDropdown.d.ts.map