@overmap-ai/blocks 1.0.31-tailwind-components.23 → 1.0.31-tailwind-components.25

package/dist/blocks.js

@@ -21,13 +21,13 @@ import * as RiIcons from "react-icons/ri";
 import { RiQuestionMark } from "react-icons/ri";
 import * as RadixPopover from "@radix-ui/react-popover";
 import * as RadixRadioGroup from "@radix-ui/react-radio-group";
-import * as Toggle from "@radix-ui/react-toggle";
-import { Toggle as Toggle$1 } from "@radix-ui/react-toggle";
+import * as RadixToggleGroup from "@radix-ui/react-toggle-group";
 import { DismissableLayer } from "@radix-ui/react-dismissable-layer";
 import * as RadixSwitch from "@radix-ui/react-switch";
 import * as RadixTabs from "@radix-ui/react-tabs";
 import * as RadixToast from "@radix-ui/react-toast";
 import { ToastProvider as ToastProvider$1, ToastViewport } from "@radix-ui/react-toast";
+import * as Toggle from "@radix-ui/react-toggle";
 import * as RadixTooltip from "@radix-ui/react-tooltip";
 const floating = cva(
   [
@@ -1329,7 +1329,7 @@ const Container = memo(
     return !hideLayout && /* @__PURE__ */ jsx("div", { className: cx(className, "flex grow h-full"), ref, ...rest, children });
   })
 );
-const Root$1 = memo((props) => {
+const Root2 = memo((props) => {
   const { children, small = false, hideLayout = false } = props;
   const [showLeftSlideOut, setShowLeftSlideOut] = useState(false);
   const [showRightSlideOut, setShowRightSlideOut] = useState(false);
@@ -1346,9 +1346,9 @@ const Root$1 = memo((props) => {
   );
   return /* @__PURE__ */ jsx(LayoutContext.Provider, { value: contextValue, children });
 });
-Root$1.displayName = "Layout.Root";
+Root2.displayName = "Layout.Root";
 function usePointerDownOutside(onPointerDownOutside, ownerElement = globalThis == null ? void 0 : globalThis.document.body) {
-  const handlePointerDownOutside = useCallbackRef$1(onPointerDownOutside);
+  const handlePointerDownOutside = useCallbackRef(onPointerDownOutside);
   const isPointerInsideReactTreeRef = useRef(false);
   const handleClickRef = useRef(() => {
   });
@@ -1400,7 +1400,7 @@ function handleAndDispatchCustomEvent(name, handler, detail, { discrete }) {
     target.dispatchEvent(event);
   }
 }
-function useCallbackRef$1(callback) {
+function useCallbackRef(callback) {
   const callbackRef = useRef(callback);
   useEffect(() => {
     callbackRef.current = callback;
@@ -1684,7 +1684,7 @@ const SlideOutTrigger = memo(
   })
 );
 const Layout = {
-  Root: Root$1,
+  Root: Root2,
   Container,
   SlideOutOverlay,
   LeftSlideOut,
@@ -4202,11 +4202,11 @@ function _extends() {
   return _extends.apply(this, arguments);
 }
 let serverHandoffComplete = false;
-let count$1 = 0;
+let count = 0;
 const genId = () => (
   // Ensure the id is unique with multiple independent versions of Floating UI
   // on <React 18
-  "floating-ui-" + Math.random().toString(36).slice(2, 6) + count$1++
+  "floating-ui-" + Math.random().toString(36).slice(2, 6) + count++
 );
 function useFloatingId() {
   const [id, setId] = React.useState(() => serverHandoffComplete ? genId() : void 0);
@@ -4220,8 +4220,8 @@ function useFloatingId() {
   }, []);
   return id;
 }
-const useReactId$1 = SafeReact.useId;
-const useId$1 = useReactId$1 || useFloatingId;
+const useReactId = SafeReact.useId;
+const useId = useReactId || useFloatingId;
 let devMessageSet;
 if (process.env.NODE_ENV !== "production") {
   devMessageSet = /* @__PURE__ */ new Set();
@@ -4274,7 +4274,7 @@ const useFloatingParentNodeId = () => {
 };
 const useFloatingTree = () => React.useContext(FloatingTreeContext);
 function useFloatingNodeId(customParentId) {
-  const id = useId$1();
+  const id = useId();
   const tree = useFloatingTree();
   const reactParentId = useFloatingParentNodeId();
   const parentId = reactParentId;
@@ -4863,7 +4863,7 @@ function useFloatingPortalNode(props) {
     id,
     root
   } = props;
-  const uniqueId = useId$1();
+  const uniqueId = useId();
   const portalContext = usePortalContext();
   const [portalNode, setPortalNode] = React.useState(null);
   const portalNodeRef = React.useRef(null);
@@ -5324,7 +5324,7 @@ const FloatingOverlay = /* @__PURE__ */ React.forwardRef(function FloatingOverla
     lockScroll = false,
     ...rest
   } = props;
-  const lockId = useId$1();
+  const lockId = useId();
   index(() => {
     if (!lockScroll) return;
     activeLocks.add(lockId);
@@ -5728,7 +5728,7 @@ function useFloatingRootContext(options) {
     onOpenChange: onOpenChangeProp,
     elements: elementsProp
   } = options;
-  const floatingId = useId$1();
+  const floatingId = useId();
   const dataRef = React.useRef({});
   const [events] = React.useState(() => createPubSub());
   const nested = useFloatingParentNodeId() != null;
@@ -6467,7 +6467,7 @@ function useRole(context, props) {
     role = "dialog"
   } = props;
   const ariaRole = (_componentRoleToAriaR = componentRoleToAriaRoleMap.get(role)) != null ? _componentRoleToAriaR : role;
-  const referenceId = useId$1();
+  const referenceId = useId();
   const parentId = useFloatingParentNodeId();
   const isNested = parentId != null;
   return React.useMemo(() => {
@@ -6735,7 +6735,7 @@ const MENU_OVERFLOW_PADDING = 20;
 const MENU_CONTENT_PADDING = 8;
 const MENU_MINIMUM_MAX_HEIGHT = 250;
 const DEFAULT_OFFSET = 5;
-const MenuRoot = memo((props) => {
+const MenuRoot = (props) => {
   const {
     children,
     side = "bottom",
@@ -6825,7 +6825,7 @@ const MenuRoot = memo((props) => {
       children
     }
   ) });
-});
+};
 MenuRoot.displayName = "Root";
 const MenuClickTrigger = memo(
   forwardRef((props, forwardedRef) => {
@@ -7179,7 +7179,7 @@ const computeOffsets = (side, alignment) => {
   }
   return { mainAxis: MENU_CONTENT_PADDING + 1, crossAxis: 0 };
 };
-const MenuSub = memo((props) => {
+const MenuSub = (props) => {
   const {
     children,
     disabled = false,
@@ -7279,7 +7279,7 @@ const MenuSub = memo((props) => {
       children
     }
   );
-});
+};
 MenuSub.displayName = "SubMenu";
 const TRIGGER_SELECT_KEYS = ["Enter", " "];
 const MenuItem = memo(
@@ -7394,11 +7394,11 @@ const MenuMultiSelectGroup = memo(
 );
 const SelectedIndicatorContext = createContext({});
 const useSelectedIndicatorContext = () => useContext(SelectedIndicatorContext);
-const MenuSelectedIndicator = memo((props) => {
+const MenuSelectedIndicator = forwardRef((props, ref) => {
   const { children } = props;
   const { selected } = useSelectedIndicatorContext();
   const { size: size2 } = useMenuContentContext();
-  return /* @__PURE__ */ jsx("div", { className: menuSelectedIndicator({ size: size2 }), children: selected ? children : null });
+  return /* @__PURE__ */ jsx("div", { ref, className: menuSelectedIndicator({ size: size2 }), children: selected ? children : null });
 });
 MenuSelectedIndicator.displayName = "SelectedIndicator";
 const MenuMultiSelectItem = memo(
@@ -7433,7 +7433,7 @@ const MenuMultiSelectItem = memo(
 );
 const PagesContext = createContext({});
 const usePagesContext = () => useContext(PagesContext);
-const MenuPages = memo((props) => {
+const MenuPages = (props) => {
   const { children, defaultPage, page, onPageChange } = props;
   const [activePage, setActivePage] = useControlledState({
     state: page,
@@ -7441,13 +7441,12 @@ const MenuPages = memo((props) => {
     setState: onPageChange
   });
   return /* @__PURE__ */ jsx(PagesContext.Provider, { value: { activePage, setActivePage }, children });
-});
-MenuPages.displayName = "Pages";
-const MenuPageContent = memo((props) => {
+};
+const MenuPageContent = (props) => {
   const { page, children } = props;
   const { activePage } = usePagesContext();
-  return /* @__PURE__ */ jsx(Fragment, { children: activePage === page ? children : null });
-});
+  return activePage === page ? children : null;
+};
 MenuPageContent.displayName = "PageContent";
 const MenuPageTrigger = memo(
   forwardRef((props, ref) => {
@@ -7858,624 +7857,6 @@ const RadioGroup = {
   Item: RadioGroupItem,
   Root: RadioGroupRoot
 };
-function createContextScope(scopeName, createContextScopeDeps = []) {
-  let defaultContexts = [];
-  function createContext3(rootComponentName, defaultContext) {
-    const BaseContext = React.createContext(defaultContext);
-    const index2 = defaultContexts.length;
-    defaultContexts = [...defaultContexts, defaultContext];
-    const Provider2 = (props) => {
-      var _a;
-      const { scope, children, ...context } = props;
-      const Context = ((_a = scope == null ? void 0 : scope[scopeName]) == null ? void 0 : _a[index2]) || BaseContext;
-      const value = React.useMemo(() => context, Object.values(context));
-      return /* @__PURE__ */ jsx(Context.Provider, { value, children });
-    };
-    Provider2.displayName = rootComponentName + "Provider";
-    function useContext2(consumerName, scope) {
-      var _a;
-      const Context = ((_a = scope == null ? void 0 : scope[scopeName]) == null ? void 0 : _a[index2]) || BaseContext;
-      const context = React.useContext(Context);
-      if (context) return context;
-      if (defaultContext !== void 0) return defaultContext;
-      throw new Error(`\`${consumerName}\` must be used within \`${rootComponentName}\``);
-    }
-    return [Provider2, useContext2];
-  }
-  const createScope = () => {
-    const scopeContexts = defaultContexts.map((defaultContext) => {
-      return React.createContext(defaultContext);
-    });
-    return function useScope(scope) {
-      const contexts = (scope == null ? void 0 : scope[scopeName]) || scopeContexts;
-      return React.useMemo(
-        () => ({ [`__scope${scopeName}`]: { ...scope, [scopeName]: contexts } }),
-        [scope, contexts]
-      );
-    };
-  };
-  createScope.scopeName = scopeName;
-  return [createContext3, composeContextScopes(createScope, ...createContextScopeDeps)];
-}
-function composeContextScopes(...scopes) {
-  const baseScope = scopes[0];
-  if (scopes.length === 1) return baseScope;
-  const createScope = () => {
-    const scopeHooks = scopes.map((createScope2) => ({
-      useScope: createScope2(),
-      scopeName: createScope2.scopeName
-    }));
-    return function useComposedScopes(overrideScopes) {
-      const nextScopes = scopeHooks.reduce((nextScopes2, { useScope, scopeName }) => {
-        const scopeProps = useScope(overrideScopes);
-        const currentScope = scopeProps[`__scope${scopeName}`];
-        return { ...nextScopes2, ...currentScope };
-      }, {});
-      return React.useMemo(() => ({ [`__scope${baseScope.scopeName}`]: nextScopes }), [nextScopes]);
-    };
-  };
-  createScope.scopeName = baseScope.scopeName;
-  return createScope;
-}
-var NODES = [
-  "a",
-  "button",
-  "div",
-  "form",
-  "h2",
-  "h3",
-  "img",
-  "input",
-  "label",
-  "li",
-  "nav",
-  "ol",
-  "p",
-  "span",
-  "svg",
-  "ul"
-];
-var Primitive = NODES.reduce((primitive, node) => {
-  const Node2 = React.forwardRef((props, forwardedRef) => {
-    const { asChild, ...primitiveProps } = props;
-    const Comp = asChild ? Slot : node;
-    if (typeof window !== "undefined") {
-      window[Symbol.for("radix-ui")] = true;
-    }
-    return /* @__PURE__ */ jsx(Comp, { ...primitiveProps, ref: forwardedRef });
-  });
-  Node2.displayName = `Primitive.${node}`;
-  return { ...primitive, [node]: Node2 };
-}, {});
-function composeEventHandlers(originalEventHandler, ourEventHandler, { checkForDefaultPrevented = true } = {}) {
-  return function handleEvent(event) {
-    originalEventHandler == null ? void 0 : originalEventHandler(event);
-    if (checkForDefaultPrevented === false || !event.defaultPrevented) {
-      return ourEventHandler == null ? void 0 : ourEventHandler(event);
-    }
-  };
-}
-function setRef(ref, value) {
-  if (typeof ref === "function") {
-    return ref(value);
-  } else if (ref !== null && ref !== void 0) {
-    ref.current = value;
-  }
-}
-function composeRefs(...refs) {
-  return (node) => {
-    let hasCleanup = false;
-    const cleanups = refs.map((ref) => {
-      const cleanup = setRef(ref, node);
-      if (!hasCleanup && typeof cleanup == "function") {
-        hasCleanup = true;
-      }
-      return cleanup;
-    });
-    if (hasCleanup) {
-      return () => {
-        for (let i = 0; i < cleanups.length; i++) {
-          const cleanup = cleanups[i];
-          if (typeof cleanup == "function") {
-            cleanup();
-          } else {
-            setRef(refs[i], null);
-          }
-        }
-      };
-    }
-  };
-}
-function useComposedRefs(...refs) {
-  return React.useCallback(composeRefs(...refs), refs);
-}
-function createCollection(name) {
-  const PROVIDER_NAME = name + "CollectionProvider";
-  const [createCollectionContext, createCollectionScope2] = createContextScope(PROVIDER_NAME);
-  const [CollectionProviderImpl, useCollectionContext] = createCollectionContext(
-    PROVIDER_NAME,
-    { collectionRef: { current: null }, itemMap: /* @__PURE__ */ new Map() }
-  );
-  const CollectionProvider = (props) => {
-    const { scope, children } = props;
-    const ref = React__default.useRef(null);
-    const itemMap = React__default.useRef(/* @__PURE__ */ new Map()).current;
-    return /* @__PURE__ */ jsx(CollectionProviderImpl, { scope, itemMap, collectionRef: ref, children });
-  };
-  CollectionProvider.displayName = PROVIDER_NAME;
-  const COLLECTION_SLOT_NAME = name + "CollectionSlot";
-  const CollectionSlot = React__default.forwardRef(
-    (props, forwardedRef) => {
-      const { scope, children } = props;
-      const context = useCollectionContext(COLLECTION_SLOT_NAME, scope);
-      const composedRefs = useComposedRefs(forwardedRef, context.collectionRef);
-      return /* @__PURE__ */ jsx(Slot, { ref: composedRefs, children });
-    }
-  );
-  CollectionSlot.displayName = COLLECTION_SLOT_NAME;
-  const ITEM_SLOT_NAME = name + "CollectionItemSlot";
-  const ITEM_DATA_ATTR = "data-radix-collection-item";
-  const CollectionItemSlot = React__default.forwardRef(
-    (props, forwardedRef) => {
-      const { scope, children, ...itemData } = props;
-      const ref = React__default.useRef(null);
-      const composedRefs = useComposedRefs(forwardedRef, ref);
-      const context = useCollectionContext(ITEM_SLOT_NAME, scope);
-      React__default.useEffect(() => {
-        context.itemMap.set(ref, { ref, ...itemData });
-        return () => void context.itemMap.delete(ref);
-      });
-      return /* @__PURE__ */ jsx(Slot, { ...{ [ITEM_DATA_ATTR]: "" }, ref: composedRefs, children });
-    }
-  );
-  CollectionItemSlot.displayName = ITEM_SLOT_NAME;
-  function useCollection2(scope) {
-    const context = useCollectionContext(name + "CollectionConsumer", scope);
-    const getItems = React__default.useCallback(() => {
-      const collectionNode = context.collectionRef.current;
-      if (!collectionNode) return [];
-      const orderedNodes = Array.from(collectionNode.querySelectorAll(`[${ITEM_DATA_ATTR}]`));
-      const items = Array.from(context.itemMap.values());
-      const orderedItems = items.sort(
-        (a, b) => orderedNodes.indexOf(a.ref.current) - orderedNodes.indexOf(b.ref.current)
-      );
-      return orderedItems;
-    }, [context.collectionRef, context.itemMap]);
-    return getItems;
-  }
-  return [
-    { Provider: CollectionProvider, Slot: CollectionSlot, ItemSlot: CollectionItemSlot },
-    useCollection2,
-    createCollectionScope2
-  ];
-}
-var useLayoutEffect2 = Boolean(globalThis == null ? void 0 : globalThis.document) ? React.useLayoutEffect : () => {
-};
-var useReactId = React["useId".toString()] || (() => void 0);
-var count = 0;
-function useId(deterministicId) {
-  const [id, setId] = React.useState(useReactId());
-  useLayoutEffect2(() => {
-    setId((reactId) => reactId ?? String(count++));
-  }, [deterministicId]);
-  return id ? `radix-${id}` : "";
-}
-function useCallbackRef(callback) {
-  const callbackRef = React.useRef(callback);
-  React.useEffect(() => {
-    callbackRef.current = callback;
-  });
-  return React.useMemo(() => (...args) => {
-    var _a;
-    return (_a = callbackRef.current) == null ? void 0 : _a.call(callbackRef, ...args);
-  }, []);
-}
-function useControllableState({
-  prop,
-  defaultProp,
-  onChange = () => {
-  }
-}) {
-  const [uncontrolledProp, setUncontrolledProp] = useUncontrolledState({ defaultProp, onChange });
-  const isControlled = prop !== void 0;
-  const value = isControlled ? prop : uncontrolledProp;
-  const handleChange = useCallbackRef(onChange);
-  const setValue = React.useCallback(
-    (nextValue) => {
-      if (isControlled) {
-        const setter = nextValue;
-        const value2 = typeof nextValue === "function" ? setter(prop) : nextValue;
-        if (value2 !== prop) handleChange(value2);
-      } else {
-        setUncontrolledProp(nextValue);
-      }
-    },
-    [isControlled, prop, setUncontrolledProp, handleChange]
-  );
-  return [value, setValue];
-}
-function useUncontrolledState({
-  defaultProp,
-  onChange
-}) {
-  const uncontrolledState = React.useState(defaultProp);
-  const [value] = uncontrolledState;
-  const prevValueRef = React.useRef(value);
-  const handleChange = useCallbackRef(onChange);
-  React.useEffect(() => {
-    if (prevValueRef.current !== value) {
-      handleChange(value);
-      prevValueRef.current = value;
-    }
-  }, [value, prevValueRef, handleChange]);
-  return uncontrolledState;
-}
-var DirectionContext = React.createContext(void 0);
-function useDirection(localDir) {
-  const globalDir = React.useContext(DirectionContext);
-  return localDir || globalDir || "ltr";
-}
-var ENTRY_FOCUS = "rovingFocusGroup.onEntryFocus";
-var EVENT_OPTIONS = { bubbles: false, cancelable: true };
-var GROUP_NAME = "RovingFocusGroup";
-var [Collection, useCollection, createCollectionScope] = createCollection(GROUP_NAME);
-var [createRovingFocusGroupContext, createRovingFocusGroupScope] = createContextScope(
-  GROUP_NAME,
-  [createCollectionScope]
-);
-var [RovingFocusProvider, useRovingFocusContext] = createRovingFocusGroupContext(GROUP_NAME);
-var RovingFocusGroup = React.forwardRef(
-  (props, forwardedRef) => {
-    return /* @__PURE__ */ jsx(Collection.Provider, { scope: props.__scopeRovingFocusGroup, children: /* @__PURE__ */ jsx(Collection.Slot, { scope: props.__scopeRovingFocusGroup, children: /* @__PURE__ */ jsx(RovingFocusGroupImpl, { ...props, ref: forwardedRef }) }) });
-  }
-);
-RovingFocusGroup.displayName = GROUP_NAME;
-var RovingFocusGroupImpl = React.forwardRef((props, forwardedRef) => {
-  const {
-    __scopeRovingFocusGroup,
-    orientation,
-    loop = false,
-    dir,
-    currentTabStopId: currentTabStopIdProp,
-    defaultCurrentTabStopId,
-    onCurrentTabStopIdChange,
-    onEntryFocus,
-    preventScrollOnEntryFocus = false,
-    ...groupProps
-  } = props;
-  const ref = React.useRef(null);
-  const composedRefs = useComposedRefs(forwardedRef, ref);
-  const direction = useDirection(dir);
-  const [currentTabStopId = null, setCurrentTabStopId] = useControllableState({
-    prop: currentTabStopIdProp,
-    defaultProp: defaultCurrentTabStopId,
-    onChange: onCurrentTabStopIdChange
-  });
-  const [isTabbingBackOut, setIsTabbingBackOut] = React.useState(false);
-  const handleEntryFocus = useCallbackRef(onEntryFocus);
-  const getItems = useCollection(__scopeRovingFocusGroup);
-  const isClickFocusRef = React.useRef(false);
-  const [focusableItemsCount, setFocusableItemsCount] = React.useState(0);
-  React.useEffect(() => {
-    const node = ref.current;
-    if (node) {
-      node.addEventListener(ENTRY_FOCUS, handleEntryFocus);
-      return () => node.removeEventListener(ENTRY_FOCUS, handleEntryFocus);
-    }
-  }, [handleEntryFocus]);
-  return /* @__PURE__ */ jsx(
-    RovingFocusProvider,
-    {
-      scope: __scopeRovingFocusGroup,
-      orientation,
-      dir: direction,
-      loop,
-      currentTabStopId,
-      onItemFocus: React.useCallback(
-        (tabStopId) => setCurrentTabStopId(tabStopId),
-        [setCurrentTabStopId]
-      ),
-      onItemShiftTab: React.useCallback(() => setIsTabbingBackOut(true), []),
-      onFocusableItemAdd: React.useCallback(
-        () => setFocusableItemsCount((prevCount) => prevCount + 1),
-        []
-      ),
-      onFocusableItemRemove: React.useCallback(
-        () => setFocusableItemsCount((prevCount) => prevCount - 1),
-        []
-      ),
-      children: /* @__PURE__ */ jsx(
-        Primitive.div,
-        {
-          tabIndex: isTabbingBackOut || focusableItemsCount === 0 ? -1 : 0,
-          "data-orientation": orientation,
-          ...groupProps,
-          ref: composedRefs,
-          style: { outline: "none", ...props.style },
-          onMouseDown: composeEventHandlers(props.onMouseDown, () => {
-            isClickFocusRef.current = true;
-          }),
-          onFocus: composeEventHandlers(props.onFocus, (event) => {
-            const isKeyboardFocus = !isClickFocusRef.current;
-            if (event.target === event.currentTarget && isKeyboardFocus && !isTabbingBackOut) {
-              const entryFocusEvent = new CustomEvent(ENTRY_FOCUS, EVENT_OPTIONS);
-              event.currentTarget.dispatchEvent(entryFocusEvent);
-              if (!entryFocusEvent.defaultPrevented) {
-                const items = getItems().filter((item) => item.focusable);
-                const activeItem = items.find((item) => item.active);
-                const currentItem = items.find((item) => item.id === currentTabStopId);
-                const candidateItems = [activeItem, currentItem, ...items].filter(
-                  Boolean
-                );
-                const candidateNodes = candidateItems.map((item) => item.ref.current);
-                focusFirst(candidateNodes, preventScrollOnEntryFocus);
-              }
-            }
-            isClickFocusRef.current = false;
-          }),
-          onBlur: composeEventHandlers(props.onBlur, () => setIsTabbingBackOut(false))
-        }
-      )
-    }
-  );
-});
-var ITEM_NAME$1 = "RovingFocusGroupItem";
-var RovingFocusGroupItem = React.forwardRef(
-  (props, forwardedRef) => {
-    const {
-      __scopeRovingFocusGroup,
-      focusable = true,
-      active = false,
-      tabStopId,
-      ...itemProps
-    } = props;
-    const autoId = useId();
-    const id = tabStopId || autoId;
-    const context = useRovingFocusContext(ITEM_NAME$1, __scopeRovingFocusGroup);
-    const isCurrentTabStop = context.currentTabStopId === id;
-    const getItems = useCollection(__scopeRovingFocusGroup);
-    const { onFocusableItemAdd, onFocusableItemRemove } = context;
-    React.useEffect(() => {
-      if (focusable) {
-        onFocusableItemAdd();
-        return () => onFocusableItemRemove();
-      }
-    }, [focusable, onFocusableItemAdd, onFocusableItemRemove]);
-    return /* @__PURE__ */ jsx(
-      Collection.ItemSlot,
-      {
-        scope: __scopeRovingFocusGroup,
-        id,
-        focusable,
-        active,
-        children: /* @__PURE__ */ jsx(
-          Primitive.span,
-          {
-            tabIndex: isCurrentTabStop ? 0 : -1,
-            "data-orientation": context.orientation,
-            ...itemProps,
-            ref: forwardedRef,
-            onMouseDown: composeEventHandlers(props.onMouseDown, (event) => {
-              if (!focusable) event.preventDefault();
-              else context.onItemFocus(id);
-            }),
-            onFocus: composeEventHandlers(props.onFocus, () => context.onItemFocus(id)),
-            onKeyDown: composeEventHandlers(props.onKeyDown, (event) => {
-              if (event.key === "Tab" && event.shiftKey) {
-                context.onItemShiftTab();
-                return;
-              }
-              if (event.target !== event.currentTarget) return;
-              const focusIntent = getFocusIntent(event, context.orientation, context.dir);
-              if (focusIntent !== void 0) {
-                if (event.metaKey || event.ctrlKey || event.altKey || event.shiftKey) return;
-                event.preventDefault();
-                const items = getItems().filter((item) => item.focusable);
-                let candidateNodes = items.map((item) => item.ref.current);
-                if (focusIntent === "last") candidateNodes.reverse();
-                else if (focusIntent === "prev" || focusIntent === "next") {
-                  if (focusIntent === "prev") candidateNodes.reverse();
-                  const currentIndex = candidateNodes.indexOf(event.currentTarget);
-                  candidateNodes = context.loop ? wrapArray(candidateNodes, currentIndex + 1) : candidateNodes.slice(currentIndex + 1);
-                }
-                setTimeout(() => focusFirst(candidateNodes));
-              }
-            })
-          }
-        )
-      }
-    );
-  }
-);
-RovingFocusGroupItem.displayName = ITEM_NAME$1;
-var MAP_KEY_TO_FOCUS_INTENT = {
-  ArrowLeft: "prev",
-  ArrowUp: "prev",
-  ArrowRight: "next",
-  ArrowDown: "next",
-  PageUp: "first",
-  Home: "first",
-  PageDown: "last",
-  End: "last"
-};
-function getDirectionAwareKey(key, dir) {
-  if (dir !== "rtl") return key;
-  return key === "ArrowLeft" ? "ArrowRight" : key === "ArrowRight" ? "ArrowLeft" : key;
-}
-function getFocusIntent(event, orientation, dir) {
-  const key = getDirectionAwareKey(event.key, dir);
-  if (orientation === "vertical" && ["ArrowLeft", "ArrowRight"].includes(key)) return void 0;
-  if (orientation === "horizontal" && ["ArrowUp", "ArrowDown"].includes(key)) return void 0;
-  return MAP_KEY_TO_FOCUS_INTENT[key];
-}
-function focusFirst(candidates, preventScroll = false) {
-  const PREVIOUSLY_FOCUSED_ELEMENT = document.activeElement;
-  for (const candidate of candidates) {
-    if (candidate === PREVIOUSLY_FOCUSED_ELEMENT) return;
-    candidate.focus({ preventScroll });
-    if (document.activeElement !== PREVIOUSLY_FOCUSED_ELEMENT) return;
-  }
-}
-function wrapArray(array, startIndex) {
-  return array.map((_, index2) => array[(startIndex + index2) % array.length]);
-}
-var Root2 = RovingFocusGroup;
-var Item = RovingFocusGroupItem;
-var TOGGLE_GROUP_NAME = "ToggleGroup";
-var [createToggleGroupContext, createToggleGroupScope] = createContextScope(TOGGLE_GROUP_NAME, [
-  createRovingFocusGroupScope
-]);
-var useRovingFocusGroupScope = createRovingFocusGroupScope();
-var ToggleGroup = React__default.forwardRef((props, forwardedRef) => {
-  const { type, ...toggleGroupProps } = props;
-  if (type === "single") {
-    const singleProps = toggleGroupProps;
-    return /* @__PURE__ */ jsx(ToggleGroupImplSingle, { ...singleProps, ref: forwardedRef });
-  }
-  if (type === "multiple") {
-    const multipleProps = toggleGroupProps;
-    return /* @__PURE__ */ jsx(ToggleGroupImplMultiple, { ...multipleProps, ref: forwardedRef });
-  }
-  throw new Error(`Missing prop \`type\` expected on \`${TOGGLE_GROUP_NAME}\``);
-});
-ToggleGroup.displayName = TOGGLE_GROUP_NAME;
-var [ToggleGroupValueProvider, useToggleGroupValueContext] = createToggleGroupContext(TOGGLE_GROUP_NAME);
-var ToggleGroupImplSingle = React__default.forwardRef((props, forwardedRef) => {
-  const {
-    value: valueProp,
-    defaultValue,
-    onValueChange = () => {
-    },
-    ...toggleGroupSingleProps
-  } = props;
-  const [value, setValue] = useControllableState({
-    prop: valueProp,
-    defaultProp: defaultValue,
-    onChange: onValueChange
-  });
-  return /* @__PURE__ */ jsx(
-    ToggleGroupValueProvider,
-    {
-      scope: props.__scopeToggleGroup,
-      type: "single",
-      value: value ? [value] : [],
-      onItemActivate: setValue,
-      onItemDeactivate: React__default.useCallback(() => setValue(""), [setValue]),
-      children: /* @__PURE__ */ jsx(ToggleGroupImpl, { ...toggleGroupSingleProps, ref: forwardedRef })
-    }
-  );
-});
-var ToggleGroupImplMultiple = React__default.forwardRef((props, forwardedRef) => {
-  const {
-    value: valueProp,
-    defaultValue,
-    onValueChange = () => {
-    },
-    ...toggleGroupMultipleProps
-  } = props;
-  const [value = [], setValue] = useControllableState({
-    prop: valueProp,
-    defaultProp: defaultValue,
-    onChange: onValueChange
-  });
-  const handleButtonActivate = React__default.useCallback(
-    (itemValue) => setValue((prevValue = []) => [...prevValue, itemValue]),
-    [setValue]
-  );
-  const handleButtonDeactivate = React__default.useCallback(
-    (itemValue) => setValue((prevValue = []) => prevValue.filter((value2) => value2 !== itemValue)),
-    [setValue]
-  );
-  return /* @__PURE__ */ jsx(
-    ToggleGroupValueProvider,
-    {
-      scope: props.__scopeToggleGroup,
-      type: "multiple",
-      value,
-      onItemActivate: handleButtonActivate,
-      onItemDeactivate: handleButtonDeactivate,
-      children: /* @__PURE__ */ jsx(ToggleGroupImpl, { ...toggleGroupMultipleProps, ref: forwardedRef })
-    }
-  );
-});
-ToggleGroup.displayName = TOGGLE_GROUP_NAME;
-var [ToggleGroupContext, useToggleGroupContext] = createToggleGroupContext(TOGGLE_GROUP_NAME);
-var ToggleGroupImpl = React__default.forwardRef(
-  (props, forwardedRef) => {
-    const {
-      __scopeToggleGroup,
-      disabled = false,
-      rovingFocus = true,
-      orientation,
-      dir,
-      loop = true,
-      ...toggleGroupProps
-    } = props;
-    const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeToggleGroup);
-    const direction = useDirection(dir);
-    const commonProps = { role: "group", dir: direction, ...toggleGroupProps };
-    return /* @__PURE__ */ jsx(ToggleGroupContext, { scope: __scopeToggleGroup, rovingFocus, disabled, children: rovingFocus ? /* @__PURE__ */ jsx(
-      Root2,
-      {
-        asChild: true,
-        ...rovingFocusGroupScope,
-        orientation,
-        dir: direction,
-        loop,
-        children: /* @__PURE__ */ jsx(Primitive.div, { ...commonProps, ref: forwardedRef })
-      }
-    ) : /* @__PURE__ */ jsx(Primitive.div, { ...commonProps, ref: forwardedRef }) });
-  }
-);
-var ITEM_NAME = "ToggleGroupItem";
-var ToggleGroupItem = React__default.forwardRef(
-  (props, forwardedRef) => {
-    const valueContext = useToggleGroupValueContext(ITEM_NAME, props.__scopeToggleGroup);
-    const context = useToggleGroupContext(ITEM_NAME, props.__scopeToggleGroup);
-    const rovingFocusGroupScope = useRovingFocusGroupScope(props.__scopeToggleGroup);
-    const pressed = valueContext.value.includes(props.value);
-    const disabled = context.disabled || props.disabled;
-    const commonProps = { ...props, pressed, disabled };
-    const ref = React__default.useRef(null);
-    return context.rovingFocus ? /* @__PURE__ */ jsx(
-      Item,
-      {
-        asChild: true,
-        ...rovingFocusGroupScope,
-        focusable: !disabled,
-        active: pressed,
-        ref,
-        children: /* @__PURE__ */ jsx(ToggleGroupItemImpl, { ...commonProps, ref: forwardedRef })
-      }
-    ) : /* @__PURE__ */ jsx(ToggleGroupItemImpl, { ...commonProps, ref: forwardedRef });
-  }
-);
-ToggleGroupItem.displayName = ITEM_NAME;
-var ToggleGroupItemImpl = React__default.forwardRef(
-  (props, forwardedRef) => {
-    const { __scopeToggleGroup, value, ...itemProps } = props;
-    const valueContext = useToggleGroupValueContext(ITEM_NAME, __scopeToggleGroup);
-    const singleProps = { role: "radio", "aria-checked": props.pressed, "aria-pressed": void 0 };
-    const typeProps = valueContext.type === "single" ? singleProps : void 0;
-    return /* @__PURE__ */ jsx(
-      Toggle$1,
-      {
-        ...typeProps,
-        ...itemProps,
-        ref: forwardedRef,
-        onPressedChange: (pressed) => {
-          if (pressed) {
-            valueContext.onItemActivate(value);
-          } else {
-            valueContext.onItemDeactivate(value);
-          }
-        }
-      }
-    );
-  }
-);
-var Root22 = ToggleGroup;
-var Item2 = ToggleGroupItem;
 const segmentedControlRootCva = cva(["shrink-0", "transition-colors", "flex"], {
   variants: {
     variant: {
@@ -8613,7 +7994,7 @@ const SegmentedControlItem = forwardRef((props, ref) => {
   const { className, ...rest } = props;
   const { size: size2, radius, variant, icon } = useSegmentedControl();
   return /* @__PURE__ */ jsx(
-    Item2,
+    RadixToggleGroup.Item,
     {
       ref,
       className: cx(
@@ -8639,7 +8020,7 @@ const SegmentedControlRoot = forwardRef((props, ref) => {
     ...rest
   } = props;
   return /* @__PURE__ */ jsx(
-    Root22,
+    RadixToggleGroup.Root,
     {
       ref,
       className: cx(