@spark-ui/components 13.1.4 → 13.2.0

package/dist/dropdown/index.mjs

@@ -1,374 +1,225 @@
-import {
-  Popover
-} from "../chunk-GPJMLIHC.mjs";
-import "../chunk-DCXWGQVZ.mjs";
-import {
-  Icon
-} from "../chunk-UMUMFMFB.mjs";
-import "../chunk-2YM6GKWW.mjs";
-import "../chunk-GAK4SC2F.mjs";
-import {
-  VisuallyHidden
-} from "../chunk-KEGAAGJW.mjs";
-import "../chunk-6QCEPQ3U.mjs";
-
-// src/dropdown/DropdownContext.tsx
-import { useFormFieldControl } from "@spark-ui/components/form-field";
-import {
-  createContext,
-  Fragment,
-  useContext,
-  useEffect,
-  useId,
-  useState
-} from "react";
-
-// src/dropdown/useDropdown.ts
-import { useMultipleSelection, useSelect } from "downshift";
-var useDropdown = ({
-  itemsMap,
-  defaultValue,
-  value,
-  onValueChange,
-  open,
-  onOpenChange,
-  defaultOpen,
-  multiple,
-  id,
-  labelId
+import { jsx as s, jsxs as k, Fragment as De } from "react/jsx-runtime";
+import { useFormFieldControl as be } from "@spark-ui/components/form-field";
+import { Children as $, isValidElement as O, createContext as L, useState as D, useId as b, useEffect as M, Fragment as ae, useContext as F, useRef as Ne, useLayoutEffect as Pe } from "react";
+import { Popover as P } from "../popover/index.mjs";
+import { useMultipleSelection as Ce, useSelect as x } from "downshift";
+import { cx as w, cva as ie } from "class-variance-authority";
+import { useMergeRefs as G } from "@spark-ui/hooks/use-merge-refs";
+import { Check as Te } from "@spark-ui/icons/Check";
+import { I as R } from "../Icon-Ck-dhfLd.mjs";
+import { ArrowHorizontalDown as Se } from "@spark-ui/icons/ArrowHorizontalDown";
+import { V as Ee } from "../VisuallyHidden-KH1biLx-.mjs";
+const ke = ({
+  itemsMap: e,
+  defaultValue: o,
+  value: t,
+  onValueChange: n,
+  open: i,
+  onOpenChange: l,
+  defaultOpen: d,
+  multiple: a,
+  id: u,
+  labelId: f
 }) => {
-  const items = [...itemsMap.values()];
-  const downshiftMultipleSelection = useMultipleSelection({
-    selectedItems: value != null && multiple ? items.filter(
-      (item) => multiple ? value.includes(item.value) : value === item.value
+  const c = [...e.values()], p = Ce({
+    selectedItems: t != null && a ? c.filter(
+      (r) => a ? t.includes(r.value) : t === r.value
     ) : void 0,
-    initialSelectedItems: defaultValue != null && multiple ? items.filter(
-      (item) => multiple ? defaultValue.includes(item.value) : defaultValue === item.value
+    initialSelectedItems: o != null && a ? c.filter(
+      (r) => a ? o.includes(r.value) : o === r.value
     ) : void 0,
-    onSelectedItemsChange: ({ selectedItems }) => {
-      if (selectedItems != null && multiple) {
-        onValueChange?.(selectedItems.map((item) => item.value));
-      }
+    onSelectedItemsChange: ({ selectedItems: r }) => {
+      r != null && a && n?.(r.map((m) => m.value));
     }
   });
-  const stateReducer = (state, { changes, type }) => {
-    if (!multiple) return changes;
-    const { selectedItems, removeSelectedItem, addSelectedItem } = downshiftMultipleSelection;
-    switch (type) {
-      case useSelect.stateChangeTypes.ToggleButtonKeyDownEnter:
-      case useSelect.stateChangeTypes.ToggleButtonKeyDownSpaceButton:
-      case useSelect.stateChangeTypes.ItemClick:
-        if (changes.selectedItem != null) {
-          const isAlreadySelected = selectedItems.some(
-            (selectedItem) => selectedItem.value === changes.selectedItem?.value
-          );
-          if (isAlreadySelected) removeSelectedItem(changes.selectedItem);
-          else addSelectedItem(changes.selectedItem);
+  return {
+    ...x({
+      items: c,
+      isItemDisabled: (r) => r.disabled,
+      itemToString: (r) => r ? r.text : "",
+      // a11y attributes
+      id: u,
+      labelId: f,
+      // Controlled open state
+      isOpen: i,
+      // undefined must be passed for stateful behaviour (uncontrolled)
+      onIsOpenChange: ({ isOpen: r }) => {
+        r != null && l?.(r);
+      },
+      initialIsOpen: d ?? !1,
+      stateReducer: (r, { changes: m, type: v }) => {
+        if (!a) return m;
+        const { selectedItems: g, removeSelectedItem: C, addSelectedItem: T } = p;
+        switch (v) {
+          case x.stateChangeTypes.ToggleButtonKeyDownEnter:
+          case x.stateChangeTypes.ToggleButtonKeyDownSpaceButton:
+          case x.stateChangeTypes.ItemClick:
+            return m.selectedItem != null && (g.some(
+              (S) => S.value === m.selectedItem?.value
+            ) ? C(m.selectedItem) : T(m.selectedItem)), {
+              ...m,
+              isOpen: !0,
+              // keep the menu open after selection.
+              highlightedIndex: r.highlightedIndex
+              // preserve highlighted index position
+            };
+          default:
+            return m;
         }
-        return {
-          ...changes,
-          isOpen: true,
-          // keep the menu open after selection.
-          highlightedIndex: state.highlightedIndex
-          // preserve highlighted index position
-        };
-      default:
-        return changes;
-    }
-  };
-  const downshift = useSelect({
-    items,
-    isItemDisabled: (item) => item.disabled,
-    itemToString: (item) => item ? item.text : "",
-    // a11y attributes
-    id,
-    labelId,
-    // Controlled open state
-    isOpen: open,
-    // undefined must be passed for stateful behaviour (uncontrolled)
-    onIsOpenChange: ({ isOpen }) => {
-      if (isOpen != null) onOpenChange?.(isOpen);
-    },
-    initialIsOpen: defaultOpen ?? false,
-    stateReducer,
-    // Controlled mode (single selection)
-    selectedItem: value != null && !multiple ? itemsMap.get(value) || null : void 0,
-    initialSelectedItem: (defaultValue != null || value != null) && !multiple ? itemsMap.get(defaultValue) || null : void 0,
-    onSelectedItemChange: ({ selectedItem }) => {
-      if (selectedItem?.value != null && !multiple) {
-        onValueChange?.(selectedItem?.value);
-      }
-    },
-    /**
-     * 1. Downshift default behaviour is to scroll into view the highlighted item when the dropdown opens. This behaviour is not stable and scrolls the dropdown to the bottom of the screen.
-     */
-    scrollIntoView: (node) => {
-      if (node) {
-        node.scrollIntoView({ block: "nearest" });
+      },
+      // Controlled mode (single selection)
+      selectedItem: t != null && !a ? e.get(t) || null : void 0,
+      initialSelectedItem: (o != null || t != null) && !a ? e.get(o) || null : void 0,
+      onSelectedItemChange: ({ selectedItem: r }) => {
+        r?.value != null && !a && n?.(r?.value);
+      },
+      /**
+       * 1. Downshift default behaviour is to scroll into view the highlighted item when the dropdown opens. This behaviour is not stable and scrolls the dropdown to the bottom of the screen.
+       */
+      scrollIntoView: (r) => {
+        r && r.scrollIntoView({ block: "nearest" });
       }
-      return void 0;
-    }
-  });
-  return {
-    ...downshift,
-    ...downshiftMultipleSelection,
+    }),
+    ...p,
     /** There is a Downshift bug in React 19, it duplicates some selectedItems */
-    selectedItems: [...new Set(downshiftMultipleSelection.selectedItems)]
+    selectedItems: [...new Set(p.selectedItems)]
   };
 };
-
-// src/dropdown/utils.ts
-import { isValidElement, Children } from "react";
-function getIndexByKey(map, targetKey) {
-  let index = 0;
-  for (const [key] of map.entries()) {
-    if (key === targetKey) {
-      return index;
-    }
-    index++;
+function $e(e, o) {
+  let t = 0;
+  for (const [n] of e.entries()) {
+    if (n === o)
+      return t;
+    t++;
   }
   return -1;
 }
-var getKeyAtIndex = (map, index) => {
-  let i = 0;
-  for (const key of map.keys()) {
-    if (i === index) return key;
-    i++;
+const Oe = (e, o) => {
+  let t = 0;
+  for (const n of e.keys()) {
+    if (t === o) return n;
+    t++;
   }
-  return void 0;
-};
-var getElementByIndex = (map, index) => {
-  const key = getKeyAtIndex(map, index);
-  return key !== void 0 ? map.get(key) : void 0;
-};
-var getElementDisplayName = (element) => {
-  return element ? element.type.displayName : "";
-};
-var getOrderedItems = (children, result = []) => {
-  Children.forEach(children, (child) => {
-    if (!isValidElement(child)) return;
-    if (getElementDisplayName(child) === "Dropdown.Item") {
-      const childProps = child.props;
-      result.push({
-        value: childProps.value,
-        disabled: !!childProps.disabled,
-        text: getItemText(childProps.children)
+}, Le = (e, o) => {
+  const t = Oe(e, o);
+  return t !== void 0 ? e.get(t) : void 0;
+}, z = (e) => e ? e.type.displayName : "", de = (e, o = []) => ($.forEach(e, (t) => {
+  if (O(t)) {
+    if (z(t) === "Dropdown.Item") {
+      const n = t.props;
+      o.push({
+        value: n.value,
+        disabled: !!n.disabled,
+        text: A(n.children)
       });
     }
-    if (child.props.children) {
-      getOrderedItems(child.props.children, result);
-    }
-  });
-  return result;
-};
-var getItemText = (children, itemText = "") => {
-  if (typeof children === "string") {
-    return children;
+    t.props.children && de(t.props.children, o);
   }
-  Children.forEach(children, (child) => {
-    if (!isValidElement(child)) return;
-    if (getElementDisplayName(child) === "Dropdown.ItemText") {
-      itemText = child.props.children;
-    }
-    if (child.props.children) {
-      getItemText(child.props.children, itemText);
-    }
-  });
-  return itemText;
-};
-var getItemsFromChildren = (children) => {
-  const newMap = /* @__PURE__ */ new Map();
-  getOrderedItems(children).forEach((itemData) => {
-    newMap.set(itemData.value, itemData);
-  });
-  return newMap;
-};
-var hasChildComponent = (children, displayName) => {
-  return Children.toArray(children).some((child) => {
-    if (!isValidElement(child)) return false;
-    if (getElementDisplayName(child) === displayName) {
-      return true;
-    } else if (child.props.children) {
-      return hasChildComponent(child.props.children, displayName);
-    }
-    return false;
-  });
-};
-
-// src/dropdown/DropdownContext.tsx
-import { jsx } from "react/jsx-runtime";
-var DropdownContext = createContext(null);
-var ID_PREFIX = ":dropdown";
-var DropdownProvider = ({
-  children,
-  defaultValue,
-  value,
-  onValueChange,
-  open,
-  onOpenChange,
-  defaultOpen,
-  multiple = false,
-  disabled: disabledProp = false,
-  readOnly: readOnlyProp = false,
-  state: stateProp
+}), o), A = (e, o = "") => typeof e == "string" ? e : ($.forEach(e, (t) => {
+  O(t) && (z(t) === "Dropdown.ItemText" && (o = t.props.children), t.props.children && A(t.props.children, o));
+}), o), se = (e) => {
+  const o = /* @__PURE__ */ new Map();
+  return de(e).forEach((t) => {
+    o.set(t.value, t);
+  }), o;
+}, le = (e, o) => $.toArray(e).some((t) => O(t) ? z(t) === o ? !0 : t.props.children ? le(t.props.children, o) : !1 : !1), ce = L(null), N = ":dropdown", Me = ({
+  children: e,
+  defaultValue: o,
+  value: t,
+  onValueChange: n,
+  open: i,
+  onOpenChange: l,
+  defaultOpen: d,
+  multiple: a = !1,
+  disabled: u = !1,
+  readOnly: f = !1,
+  state: c
 }) => {
-  const [itemsMap, setItemsMap] = useState(getItemsFromChildren(children));
-  const [hasPopover, setHasPopover] = useState(
-    hasChildComponent(children, "Dropdown.Popover")
-  );
-  const [lastInteractionType, setLastInteractionType] = useState("mouse");
-  const field = useFormFieldControl();
-  const state = field.state || stateProp;
-  const internalFieldLabelID = `${ID_PREFIX}-label-${useId()}`;
-  const internalFieldID = `${ID_PREFIX}-input-${useId()}`;
-  const id = field.id || internalFieldID;
-  const labelId = field.labelId || internalFieldLabelID;
-  const disabled = field.disabled ?? disabledProp;
-  const readOnly = field.readOnly ?? readOnlyProp;
-  const dropdownState = useDropdown({
-    itemsMap,
-    defaultValue,
-    value,
-    onValueChange,
-    open,
-    onOpenChange,
-    defaultOpen,
-    multiple,
-    id,
-    labelId
+  const [p, I] = D(se(e)), [h, r] = D(
+    le(e, "Dropdown.Popover")
+  ), [m, v] = D("mouse"), g = be(), C = g.state || c, T = `${N}-label-${b()}`, Z = `${N}-input-${b()}`, S = g.id || Z, we = g.labelId || T, ge = g.disabled ?? u, Ie = g.readOnly ?? f, ee = ke({
+    itemsMap: p,
+    defaultValue: o,
+    value: t,
+    onValueChange: n,
+    open: i,
+    onOpenChange: l,
+    defaultOpen: d,
+    multiple: a,
+    id: S,
+    labelId: we
   });
-  useEffect(() => {
-    const newMap = getItemsFromChildren(children);
-    const previousItems = [...itemsMap.values()];
-    const newItems = [...newMap.values()];
-    const hasItemsChanges = previousItems.length !== newItems.length || previousItems.some((item, index) => {
-      const hasUpdatedValue = item.value !== newItems[index]?.value;
-      const hasUpdatedText = item.text !== newItems[index]?.text;
-      return hasUpdatedValue || hasUpdatedText;
-    });
-    if (hasItemsChanges) {
-      setItemsMap(newMap);
-    }
-  }, [children]);
-  const [WrapperComponent, wrapperProps] = hasPopover ? [Popover, { open: true }] : [Fragment, {}];
-  return /* @__PURE__ */ jsx(
-    DropdownContext.Provider,
+  M(() => {
+    const te = se(e), oe = [...p.values()], E = [...te.values()];
+    (oe.length !== E.length || oe.some((ne, re) => {
+      const ve = ne.value !== E[re]?.value, xe = ne.text !== E[re]?.text;
+      return ve || xe;
+    })) && I(te);
+  }, [e]);
+  const [he, ye] = h ? [P, { open: !0 }] : [ae, {}];
+  return /* @__PURE__ */ s(
+    ce.Provider,
     {
       value: {
-        multiple,
-        disabled,
-        readOnly,
-        ...dropdownState,
-        itemsMap,
-        highlightedItem: getElementByIndex(itemsMap, dropdownState.highlightedIndex),
-        hasPopover,
-        setHasPopover,
-        state,
-        lastInteractionType,
-        setLastInteractionType
+        multiple: a,
+        disabled: ge,
+        readOnly: Ie,
+        ...ee,
+        itemsMap: p,
+        highlightedItem: Le(p, ee.highlightedIndex),
+        hasPopover: h,
+        setHasPopover: r,
+        state: C,
+        lastInteractionType: m,
+        setLastInteractionType: v
       },
-      children: /* @__PURE__ */ jsx(WrapperComponent, { ...wrapperProps, children })
+      children: /* @__PURE__ */ s(he, { ...ye, children: e })
     }
   );
-};
-var useDropdownContext = () => {
-  const context = useContext(DropdownContext);
-  if (!context) {
+}, y = () => {
+  const e = F(ce);
+  if (!e)
     throw Error("useDropdownContext must be used within a Dropdown provider");
-  }
-  return context;
-};
-
-// src/dropdown/Dropdown.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
-var Dropdown = ({ children, ...props }) => {
-  return /* @__PURE__ */ jsx2(DropdownProvider, { ...props, children });
-};
-Dropdown.displayName = "Dropdown";
-
-// src/dropdown/DropdownDivider.tsx
-import { cx } from "class-variance-authority";
-import { jsx as jsx3 } from "react/jsx-runtime";
-var Divider = ({ className, ref: forwardedRef }) => {
-  return /* @__PURE__ */ jsx3("div", { ref: forwardedRef, className: cx("my-md border-b-sm border-outline", className) });
-};
-Divider.displayName = "Dropdown.Divider";
-
-// src/dropdown/DropdownGroup.tsx
-import { cx as cx2 } from "class-variance-authority";
-
-// src/dropdown/DropdownItemsGroupContext.tsx
-import { createContext as createContext2, useContext as useContext2, useId as useId2 } from "react";
-import { jsx as jsx4 } from "react/jsx-runtime";
-var DropdownGroupContext = createContext2(null);
-var DropdownGroupProvider = ({ children }) => {
-  const labelId = `${ID_PREFIX}-group-label-${useId2()}`;
-  return /* @__PURE__ */ jsx4(DropdownGroupContext.Provider, { value: { labelId }, children });
-};
-var useDropdownGroupContext = () => {
-  const context = useContext2(DropdownGroupContext);
-  if (!context) {
+  return e;
+}, pe = ({ children: e, ...o }) => /* @__PURE__ */ s(Me, { ...o, children: e });
+pe.displayName = "Dropdown";
+const B = ({ className: e, ref: o }) => /* @__PURE__ */ s("div", { ref: o, className: w("my-md border-b-sm border-outline", e) });
+B.displayName = "Dropdown.Divider";
+const ue = L(null), Fe = ({ children: e }) => {
+  const o = `${N}-group-label-${b()}`;
+  return /* @__PURE__ */ s(ue.Provider, { value: { labelId: o }, children: e });
+}, me = () => {
+  const e = F(ue);
+  if (!e)
     throw Error("useDropdownGroupContext must be used within a DropdownGroup provider");
-  }
-  return context;
+  return e;
+}, H = ({ children: e, ref: o, ...t }) => /* @__PURE__ */ s(Fe, { children: /* @__PURE__ */ s(Ge, { ref: o, ...t, children: e }) }), Ge = ({ children: e, className: o, ref: t }) => {
+  const { labelId: n } = me();
+  return /* @__PURE__ */ s("div", { ref: t, role: "group", "aria-labelledby": n, className: w(o), children: e });
 };
-
-// src/dropdown/DropdownGroup.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
-var Group = ({ children, ref: forwardedRef, ...props }) => {
-  return /* @__PURE__ */ jsx5(DropdownGroupProvider, { children: /* @__PURE__ */ jsx5(GroupContent, { ref: forwardedRef, ...props, children }) });
-};
-var GroupContent = ({ children, className, ref: forwardedRef }) => {
-  const { labelId } = useDropdownGroupContext();
-  return /* @__PURE__ */ jsx5("div", { ref: forwardedRef, role: "group", "aria-labelledby": labelId, className: cx2(className), children });
-};
-Group.displayName = "Dropdown.Group";
-
-// src/dropdown/DropdownItem.tsx
-import { useMergeRefs } from "@spark-ui/hooks/use-merge-refs";
-import { cva, cx as cx3 } from "class-variance-authority";
-
-// src/dropdown/DropdownItemContext.tsx
-import {
-  createContext as createContext3,
-  useContext as useContext3,
-  useState as useState2
-} from "react";
-import { jsx as jsx6 } from "react/jsx-runtime";
-var DropdownItemContext = createContext3(null);
-var DropdownItemProvider = ({
-  value,
-  disabled = false,
-  children
+H.displayName = "Dropdown.Group";
+const fe = L(null), Re = ({
+  value: e,
+  disabled: o = !1,
+  children: t
 }) => {
-  const { multiple, itemsMap, selectedItem, selectedItems } = useDropdownContext();
-  const [textId, setTextId] = useState2(void 0);
-  const index = getIndexByKey(itemsMap, value);
-  const itemData = { disabled, value, text: getItemText(children) };
-  const isSelected = multiple ? selectedItems.some((selectedItem2) => selectedItem2.value === value) : selectedItem?.value === value;
-  return /* @__PURE__ */ jsx6(
-    DropdownItemContext.Provider,
+  const { multiple: n, itemsMap: i, selectedItem: l, selectedItems: d } = y(), [a, u] = D(void 0), f = $e(i, e), c = { disabled: o, value: e, text: A(t) }, p = n ? d.some((I) => I.value === e) : l?.value === e;
+  return /* @__PURE__ */ s(
+    fe.Provider,
     {
-      value: { textId, setTextId, isSelected, itemData, index, disabled },
-      children
+      value: { textId: a, setTextId: u, isSelected: p, itemData: c, index: f, disabled: o },
+      children: t
     }
   );
-};
-var useDropdownItemContext = () => {
-  const context = useContext3(DropdownItemContext);
-  if (!context) {
+}, V = () => {
+  const e = F(fe);
+  if (!e)
     throw Error("useDropdownItemContext must be used within a DropdownItem provider");
-  }
-  return context;
-};
-
-// src/dropdown/DropdownItem.tsx
-import { jsx as jsx7 } from "react/jsx-runtime";
-var Item = ({ children, ref: forwardedRef, ...props }) => {
-  const { value, disabled } = props;
-  return /* @__PURE__ */ jsx7(DropdownItemProvider, { value, disabled, children: /* @__PURE__ */ jsx7(ItemContent, { ref: forwardedRef, ...props, children }) });
-};
-var styles = cva("px-lg py-md text-body-1", {
+  return e;
+}, j = ({ children: e, ref: o, ...t }) => {
+  const { value: n, disabled: i } = t;
+  return /* @__PURE__ */ s(Re, { value: n, disabled: i, children: /* @__PURE__ */ s(Ae, { ref: o, ...t, children: e }) });
+}, ze = ie("px-lg py-md text-body-1", {
   variants: {
     selected: {
       true: "font-bold"
@@ -387,208 +238,142 @@ var styles = cva("px-lg py-md text-body-1", {
   },
   compoundVariants: [
     {
-      highlighted: true,
+      highlighted: !0,
       interactionType: "mouse",
       class: "bg-surface-hovered"
     },
     {
-      highlighted: true,
+      highlighted: !0,
       interactionType: "keyboard",
       class: "u-outline"
     }
   ]
-});
-var ItemContent = ({
-  className,
-  disabled = false,
-  value,
-  children,
-  ref: forwardedRef
+}), Ae = ({
+  className: e,
+  disabled: o = !1,
+  value: t,
+  children: n,
+  ref: i
 }) => {
-  const { getItemProps, highlightedItem, lastInteractionType } = useDropdownContext();
-  const { textId, index, itemData, isSelected } = useDropdownItemContext();
-  const isHighlighted = highlightedItem?.value === value;
-  const { ref: downshiftRef, ...downshiftItemProps } = getItemProps({ item: itemData, index });
-  const ref = useMergeRefs(forwardedRef, downshiftRef);
-  return /* @__PURE__ */ jsx7(
+  const { getItemProps: l, highlightedItem: d, lastInteractionType: a } = y(), { textId: u, index: f, itemData: c, isSelected: p } = V(), I = d?.value === t, { ref: h, ...r } = l({ item: c, index: f }), m = G(i, h);
+  return /* @__PURE__ */ s(
     "li",
     {
-      ref,
-      className: cx3(
-        styles({
-          selected: isSelected,
-          disabled,
-          highlighted: isHighlighted,
-          interactionType: lastInteractionType,
-          className
+      ref: m,
+      className: w(
+        ze({
+          selected: p,
+          disabled: o,
+          highlighted: I,
+          interactionType: a,
+          className: e
         })
       ),
-      ...downshiftItemProps,
-      "aria-selected": isSelected,
-      "aria-labelledby": textId,
-      children
+      ...r,
+      "aria-selected": p,
+      "aria-labelledby": u,
+      children: n
     },
-    value
+    t
   );
 };
-Item.displayName = "Dropdown.Item";
-
-// src/dropdown/DropdownItemIndicator.tsx
-import { Check } from "@spark-ui/icons/Check";
-import { cx as cx4 } from "class-variance-authority";
-import { jsx as jsx8 } from "react/jsx-runtime";
-var ItemIndicator = ({
-  className,
-  children,
-  label,
-  ref: forwardedRef
+j.displayName = "Dropdown.Item";
+const K = ({
+  className: e,
+  children: o,
+  label: t,
+  ref: n
 }) => {
-  const { disabled, isSelected } = useDropdownItemContext();
-  const childElement = children || /* @__PURE__ */ jsx8(Icon, { size: "sm", children: /* @__PURE__ */ jsx8(Check, { "aria-label": label }) });
-  return /* @__PURE__ */ jsx8(
+  const { disabled: i, isSelected: l } = V(), d = o || /* @__PURE__ */ s(R, { size: "sm", children: /* @__PURE__ */ s(Te, { "aria-label": t }) });
+  return /* @__PURE__ */ s(
     "span",
     {
-      ref: forwardedRef,
-      className: cx4("min-h-sz-16 min-w-sz-16 flex", disabled && "opacity-dim-3", className),
-      children: isSelected && childElement
+      ref: n,
+      className: w("min-h-sz-16 min-w-sz-16 flex", i && "opacity-dim-3", e),
+      children: l && d
     }
   );
 };
-ItemIndicator.displayName = "Dropdown.ItemIndicator";
-
-// src/dropdown/DropdownItems.tsx
-import { useMergeRefs as useMergeRefs2 } from "@spark-ui/hooks/use-merge-refs";
-import { cx as cx5 } from "class-variance-authority";
-import { useLayoutEffect, useRef } from "react";
-import { jsx as jsx9 } from "react/jsx-runtime";
-var Items = ({ children, className, ref: forwardedRef, ...props }) => {
-  const { isOpen, getMenuProps, hasPopover, setLastInteractionType } = useDropdownContext();
-  const { ref: downshiftRef, ...downshiftMenuProps } = getMenuProps({
+K.displayName = "Dropdown.ItemIndicator";
+const U = ({ children: e, className: o, ref: t, ...n }) => {
+  const { isOpen: i, getMenuProps: l, hasPopover: d, setLastInteractionType: a } = y(), { ref: u, ...f } = l({
     onMouseMove: () => {
-      setLastInteractionType("mouse");
-    }
-  });
-  const innerRef = useRef(null);
-  const ref = useMergeRefs2(forwardedRef, downshiftRef, innerRef);
-  useLayoutEffect(() => {
-    if (!hasPopover) return;
-    if (!innerRef.current) return;
-    if (innerRef.current.parentElement) {
-      innerRef.current.parentElement.style.pointerEvents = isOpen ? "" : "none";
-      innerRef.current.style.pointerEvents = isOpen ? "" : "none";
+      a("mouse");
     }
-  }, [isOpen, hasPopover]);
-  return /* @__PURE__ */ jsx9(
+  }), c = Ne(null), p = G(t, u, c);
+  return Pe(() => {
+    d && c.current && c.current.parentElement && (c.current.parentElement.style.pointerEvents = i ? "" : "none", c.current.style.pointerEvents = i ? "" : "none");
+  }, [i, d]), /* @__PURE__ */ s(
     "ul",
     {
-      ref,
-      className: cx5(
-        className,
+      ref: p,
+      className: w(
+        o,
         "flex flex-col",
-        isOpen ? "pointer-events-auto! block" : "pointer-events-none invisible absolute opacity-0",
-        hasPopover && "p-lg"
+        i ? "pointer-events-auto! block" : "pointer-events-none invisible absolute opacity-0",
+        d && "p-lg"
       ),
-      ...props,
-      ...downshiftMenuProps,
+      ...n,
+      ...f,
       "data-spark-component": "dropdown-items",
-      children
+      children: e
     }
   );
 };
-Items.displayName = "Dropdown.Items";
-
-// src/dropdown/DropdownItemText.tsx
-import { cx as cx6 } from "class-variance-authority";
-import { useEffect as useEffect2, useId as useId3 } from "react";
-import { jsx as jsx10 } from "react/jsx-runtime";
-var ItemText = ({ children, ref: forwardedRef }) => {
-  const id = `${ID_PREFIX}-item-text-${useId3()}`;
-  const { setTextId } = useDropdownItemContext();
-  useEffect2(() => {
-    setTextId(id);
-    return () => setTextId(void 0);
-  });
-  return /* @__PURE__ */ jsx10("span", { id, className: cx6("inline"), ref: forwardedRef, children });
+U.displayName = "Dropdown.Items";
+const W = ({ children: e, ref: o }) => {
+  const t = `${N}-item-text-${b()}`, { setTextId: n } = V();
+  return M(() => (n(t), () => n(void 0))), /* @__PURE__ */ s("span", { id: t, className: w("inline"), ref: o, children: e });
 };
-ItemText.displayName = "Dropdown.ItemText";
-
-// src/dropdown/DropdownLabel.tsx
-import { cx as cx7 } from "class-variance-authority";
-import { jsx as jsx11 } from "react/jsx-runtime";
-var Label = ({ children, className, ref: forwardedRef }) => {
-  const { labelId } = useDropdownGroupContext();
-  return /* @__PURE__ */ jsx11(
+W.displayName = "Dropdown.ItemText";
+const X = ({ children: e, className: o, ref: t }) => {
+  const { labelId: n } = me();
+  return /* @__PURE__ */ s(
     "div",
     {
-      ref: forwardedRef,
-      id: labelId,
-      className: cx7("px-md py-sm text-body-2 text-neutral italic", className),
-      children
+      ref: t,
+      id: n,
+      className: w("px-md py-sm text-body-2 text-neutral italic", o),
+      children: e
     }
   );
 };
-Label.displayName = "Dropdown.Label";
-
-// src/dropdown/DropdownLeadingIcon.tsx
-import { jsx as jsx12 } from "react/jsx-runtime";
-var LeadingIcon = ({ children }) => {
-  return /* @__PURE__ */ jsx12(Icon, { size: "sm", className: "shrink-0", children });
-};
-LeadingIcon.displayName = "Dropdown.LeadingIcon";
-
-// src/dropdown/DropdownPopover.tsx
-import { cx as cx8 } from "class-variance-authority";
-import { useEffect as useEffect3 } from "react";
-import { jsx as jsx13 } from "react/jsx-runtime";
-var Popover2 = ({
-  children,
-  matchTriggerWidth = true,
-  sideOffset = 4,
-  className,
-  elevation = "dropdown",
-  ref: forwardedRef,
-  ...props
+X.displayName = "Dropdown.Label";
+const _ = ({ children: e }) => /* @__PURE__ */ s(R, { size: "sm", className: "shrink-0", children: e });
+_.displayName = "Dropdown.LeadingIcon";
+const q = ({
+  children: e,
+  matchTriggerWidth: o = !0,
+  sideOffset: t = 4,
+  className: n,
+  elevation: i = "dropdown",
+  ref: l,
+  ...d
 }) => {
-  const ctx = useDropdownContext();
-  useEffect3(() => {
-    ctx.setHasPopover(true);
-    return () => ctx.setHasPopover(false);
-  }, []);
-  return /* @__PURE__ */ jsx13(
-    Popover.Content,
+  const a = y();
+  return M(() => (a.setHasPopover(!0), () => a.setHasPopover(!1)), []), /* @__PURE__ */ s(
+    P.Content,
     {
-      ref: forwardedRef,
-      inset: true,
-      asChild: true,
-      matchTriggerWidth,
-      elevation,
-      className: cx8("relative", className),
-      sideOffset,
-      onOpenAutoFocus: (e) => {
-        e.preventDefault();
+      ref: l,
+      inset: !0,
+      asChild: !0,
+      matchTriggerWidth: o,
+      elevation: i,
+      className: w("relative", n),
+      sideOffset: t,
+      onOpenAutoFocus: (u) => {
+        u.preventDefault();
       },
-      ...props,
+      ...d,
       "data-spark-component": "dropdown-popover",
-      children
+      children: e
     }
   );
 };
-Popover2.displayName = "Dropdown.Popover";
-
-// src/dropdown/DropdownPortal.tsx
-import { jsx as jsx14 } from "react/jsx-runtime";
-var Portal = ({ children, ...rest }) => /* @__PURE__ */ jsx14(Popover.Portal, { ...rest, children });
-Portal.displayName = "Dropdown.Portal";
-
-// src/dropdown/DropdownTrigger.tsx
-import { useMergeRefs as useMergeRefs3 } from "@spark-ui/hooks/use-merge-refs";
-import { ArrowHorizontalDown } from "@spark-ui/icons/ArrowHorizontalDown";
-import { cx as cx9 } from "class-variance-authority";
-import { Fragment as Fragment2 } from "react";
-
-// src/dropdown/DropdownTrigger.styles.tsx
-import { cva as cva2 } from "class-variance-authority";
-var styles2 = cva2(
+q.displayName = "Dropdown.Popover";
+const J = ({ children: e, ...o }) => /* @__PURE__ */ s(P.Portal, { ...o, children: e });
+J.displayName = "Dropdown.Portal";
+const Be = ie(
   [
     "flex w-full items-center justify-between",
     "min-h-sz-44 rounded-lg bg-surface text-on-surface px-lg",
@@ -613,62 +398,54 @@ var styles2 = cva2(
     },
     compoundVariants: [
       {
-        disabled: false,
+        disabled: !1,
         state: void 0,
         class: "default:hover:ring-outline-high"
       }
     ]
   }
-);
-
-// src/dropdown/DropdownTrigger.tsx
-import { Fragment as Fragment3, jsx as jsx15, jsxs } from "react/jsx-runtime";
-var Trigger = ({
-  "aria-label": ariaLabel,
-  children,
-  className,
-  ref: forwardedRef
+), Q = ({
+  "aria-label": e,
+  children: o,
+  className: t,
+  ref: n
 }) => {
   const {
-    getToggleButtonProps,
-    getDropdownProps,
-    getLabelProps,
-    hasPopover,
-    disabled,
-    readOnly,
-    state,
-    setLastInteractionType
-  } = useDropdownContext();
-  const [WrapperComponent, wrapperProps] = hasPopover ? [Popover.Trigger, { asChild: true }] : [Fragment2, {}];
-  const { ref: downshiftRef, ...downshiftTriggerProps } = getToggleButtonProps({
-    ...getDropdownProps(),
+    getToggleButtonProps: i,
+    getDropdownProps: l,
+    getLabelProps: d,
+    hasPopover: a,
+    disabled: u,
+    readOnly: f,
+    state: c,
+    setLastInteractionType: p
+  } = y(), [I, h] = a ? [P.Trigger, { asChild: !0 }] : [ae, {}], { ref: r, ...m } = i({
+    ...l(),
     onKeyDown: () => {
-      setLastInteractionType("keyboard");
+      p("keyboard");
     }
-  });
-  const isExpanded = downshiftTriggerProps["aria-expanded"];
-  const ref = useMergeRefs3(forwardedRef, downshiftRef);
-  return /* @__PURE__ */ jsxs(Fragment3, { children: [
-    ariaLabel && /* @__PURE__ */ jsx15(VisuallyHidden, { children: /* @__PURE__ */ jsx15("label", { ...getLabelProps(), children: ariaLabel }) }),
-    /* @__PURE__ */ jsx15(WrapperComponent, { ...wrapperProps, children: /* @__PURE__ */ jsxs(
+  }), v = m["aria-expanded"], g = G(n, r);
+  return /* @__PURE__ */ k(De, { children: [
+    e && /* @__PURE__ */ s(Ee, { children: /* @__PURE__ */ s("label", { ...d(), children: e }) }),
+    /* @__PURE__ */ s(I, { ...h, children: /* @__PURE__ */ k(
       "button",
       {
         type: "button",
-        ref,
-        disabled: disabled || readOnly,
-        className: styles2({ className, state, disabled, readOnly }),
-        ...downshiftTriggerProps,
+        ref: g,
+        disabled: u || f,
+        className: Be({ className: t, state: c, disabled: u, readOnly: f }),
+        ...m,
         "data-spark-component": "dropdown-trigger",
         children: [
-          /* @__PURE__ */ jsx15("span", { className: "gap-md flex items-center justify-start", children }),
-          /* @__PURE__ */ jsx15(
-            Icon,
+          /* @__PURE__ */ s("span", { className: "gap-md flex items-center justify-start", children: o }),
+          /* @__PURE__ */ s(
+            R,
             {
-              className: cx9("ml-md shrink-0 rotate-0 transition duration-100 ease-in", {
-                "rotate-180": isExpanded
+              className: w("ml-md shrink-0 rotate-0 transition duration-100 ease-in", {
+                "rotate-180": v
               }),
               size: "sm",
-              children: /* @__PURE__ */ jsx15(ArrowHorizontalDown, {})
+              children: /* @__PURE__ */ s(Se, {})
             }
           )
         ]
@@ -676,63 +453,54 @@ var Trigger = ({
     ) })
   ] });
 };
-Trigger.displayName = "Dropdown.Trigger";
-
-// src/dropdown/DropdownValue.tsx
-import { cx as cx10 } from "class-variance-authority";
-import { jsx as jsx16, jsxs as jsxs2 } from "react/jsx-runtime";
-var Value = ({ children, className, placeholder, ref: forwardedRef }) => {
-  const { selectedItem, multiple, selectedItems } = useDropdownContext();
-  const hasSelectedItems = !!(multiple ? selectedItems.length : selectedItem);
-  const text = multiple ? selectedItems[0]?.text : selectedItem?.text;
-  const suffix = selectedItems.length > 1 ? `, +${selectedItems.length - 1}` : "";
-  return /* @__PURE__ */ jsxs2("span", { ref: forwardedRef, className: cx10("flex shrink items-center text-left", className), children: [
-    /* @__PURE__ */ jsx16(
+Q.displayName = "Dropdown.Trigger";
+const Y = ({ children: e, className: o, placeholder: t, ref: n }) => {
+  const { selectedItem: i, multiple: l, selectedItems: d } = y(), a = !!(l ? d.length : i), u = l ? d[0]?.text : i?.text, f = d.length > 1 ? `, +${d.length - 1}` : "";
+  return /* @__PURE__ */ k("span", { ref: n, className: w("flex shrink items-center text-left", o), children: [
+    /* @__PURE__ */ s(
       "span",
       {
-        className: cx10(
+        className: w(
           "line-clamp-1 flex-1 overflow-hidden break-all text-ellipsis",
-          !hasSelectedItems && "text-on-surface/dim-1"
+          !a && "text-on-surface/dim-1"
         ),
-        children: !hasSelectedItems ? placeholder : children || text
+        children: a ? e || u : t
       }
     ),
-    suffix && /* @__PURE__ */ jsx16("span", { children: suffix })
+    f && /* @__PURE__ */ s("span", { children: f })
   ] });
 };
-Value.displayName = "Dropdown.Value";
-
-// src/dropdown/index.ts
-var Dropdown2 = Object.assign(Dropdown, {
-  Group,
-  Item,
-  Items,
-  ItemText,
-  ItemIndicator,
-  Label,
-  Popover: Popover2,
-  Divider,
-  Trigger,
-  Value,
-  LeadingIcon,
-  Portal
+Y.displayName = "Dropdown.Value";
+const He = Object.assign(pe, {
+  Group: H,
+  Item: j,
+  Items: U,
+  ItemText: W,
+  ItemIndicator: K,
+  Label: X,
+  Popover: q,
+  Divider: B,
+  Trigger: Q,
+  Value: Y,
+  LeadingIcon: _,
+  Portal: J
 });
-Dropdown2.displayName = "Dropdown";
-Group.displayName = "Dropdown.Group";
-Items.displayName = "Dropdown.Items";
-Item.displayName = "Dropdown.Item";
-ItemText.displayName = "Dropdown.ItemText";
-ItemIndicator.displayName = "Dropdown.ItemIndicator";
-Label.displayName = "Dropdown.Label";
-Popover2.displayName = "Dropdown.Popover";
-Divider.displayName = "Dropdown.Divider";
-Trigger.displayName = "Dropdown.Trigger";
-Value.displayName = "Dropdown.Value";
-LeadingIcon.displayName = "Dropdown.LeadingIcon";
-Portal.displayName = "Dropdown.Portal";
+He.displayName = "Dropdown";
+H.displayName = "Dropdown.Group";
+U.displayName = "Dropdown.Items";
+j.displayName = "Dropdown.Item";
+W.displayName = "Dropdown.ItemText";
+K.displayName = "Dropdown.ItemIndicator";
+X.displayName = "Dropdown.Label";
+q.displayName = "Dropdown.Popover";
+B.displayName = "Dropdown.Divider";
+Q.displayName = "Dropdown.Trigger";
+Y.displayName = "Dropdown.Value";
+_.displayName = "Dropdown.LeadingIcon";
+J.displayName = "Dropdown.Portal";
 export {
-  Dropdown2 as Dropdown,
-  DropdownProvider,
-  useDropdownContext
+  He as Dropdown,
+  Me as DropdownProvider,
+  y as useDropdownContext
 };
-//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map