@arc-ui/components 11.7.0 → 11.9.0

package/dist/_shared/cjs/extends-bb8ffacd.js

@@ -0,0 +1,21 @@
+'use strict';
+
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
+exports._extends = _extends;

package/dist/_shared/cjs/index-27b53d49.js

@@ -0,0 +1,174 @@
+'use strict';
+
+var React = require('react');
+var index = require('./index-952918c9.js');
+var _extends = require('./extends-bb8ffacd.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+/* -------------------------------------------------------------------------------------------------
+ * Slot
+ * -----------------------------------------------------------------------------------------------*/ const $5e63c961fc1ce211$export$8c6ed5c666ac1360 = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
+    const { children: children , ...slotProps } = props;
+    const childrenArray = React.Children.toArray(children);
+    const slottable = childrenArray.find($5e63c961fc1ce211$var$isSlottable);
+    if (slottable) {
+        // the new element to render is the one passed as a child of `Slottable`
+        const newElement = slottable.props.children;
+        const newChildren = childrenArray.map((child)=>{
+            if (child === slottable) {
+                // because the new element will be the one rendered, we are only interested
+                // in grabbing its children (`newElement.props.children`)
+                if (React.Children.count(newElement) > 1) return React.Children.only(null);
+                return /*#__PURE__*/ React.isValidElement(newElement) ? newElement.props.children : null;
+            } else return child;
+        });
+        return /*#__PURE__*/ React.createElement($5e63c961fc1ce211$var$SlotClone, _extends._extends({}, slotProps, {
+            ref: forwardedRef
+        }), /*#__PURE__*/ React.isValidElement(newElement) ? /*#__PURE__*/ React.cloneElement(newElement, undefined, newChildren) : null);
+    }
+    return /*#__PURE__*/ React.createElement($5e63c961fc1ce211$var$SlotClone, _extends._extends({}, slotProps, {
+        ref: forwardedRef
+    }), children);
+});
+$5e63c961fc1ce211$export$8c6ed5c666ac1360.displayName = 'Slot';
+/* -------------------------------------------------------------------------------------------------
+ * SlotClone
+ * -----------------------------------------------------------------------------------------------*/ const $5e63c961fc1ce211$var$SlotClone = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
+    const { children: children , ...slotProps } = props;
+    if (/*#__PURE__*/ React.isValidElement(children)) return /*#__PURE__*/ React.cloneElement(children, {
+        ...$5e63c961fc1ce211$var$mergeProps(slotProps, children.props),
+        ref: forwardedRef ? index.$6ed0406888f73fc4$export$43e446d32b3d21af(forwardedRef, children.ref) : children.ref
+    });
+    return React.Children.count(children) > 1 ? React.Children.only(null) : null;
+});
+$5e63c961fc1ce211$var$SlotClone.displayName = 'SlotClone';
+/* -------------------------------------------------------------------------------------------------
+ * Slottable
+ * -----------------------------------------------------------------------------------------------*/ const $5e63c961fc1ce211$export$d9f1ccf0bdb05d45 = ({ children: children  })=>{
+    return /*#__PURE__*/ React.createElement(React.Fragment, null, children);
+};
+/* ---------------------------------------------------------------------------------------------- */ function $5e63c961fc1ce211$var$isSlottable(child) {
+    return /*#__PURE__*/ React.isValidElement(child) && child.type === $5e63c961fc1ce211$export$d9f1ccf0bdb05d45;
+}
+function $5e63c961fc1ce211$var$mergeProps(slotProps, childProps) {
+    // all child props should override
+    const overrideProps = {
+        ...childProps
+    };
+    for(const propName in childProps){
+        const slotPropValue = slotProps[propName];
+        const childPropValue = childProps[propName];
+        const isHandler = /^on[A-Z]/.test(propName);
+        if (isHandler) {
+            // if the handler exists on both, we compose them
+            if (slotPropValue && childPropValue) overrideProps[propName] = (...args)=>{
+                childPropValue(...args);
+                slotPropValue(...args);
+            };
+            else if (slotPropValue) overrideProps[propName] = slotPropValue;
+        } else if (propName === 'style') overrideProps[propName] = {
+            ...slotPropValue,
+            ...childPropValue
+        };
+        else if (propName === 'className') overrideProps[propName] = [
+            slotPropValue,
+            childPropValue
+        ].filter(Boolean).join(' ');
+    }
+    return {
+        ...slotProps,
+        ...overrideProps
+    };
+}
+
+// We have resorted to returning slots directly rather than exposing primitives that can then
+// be slotted like `<CollectionItem as={Slot}>…</CollectionItem>`.
+// This is because we encountered issues with generic types that cannot be statically analysed
+// due to creating them dynamically via createCollection.
+function $e02a7d9cb1dc128c$export$c74125a8e3af6bb2(name) {
+    /* -----------------------------------------------------------------------------------------------
+   * CollectionProvider
+   * ---------------------------------------------------------------------------------------------*/ const PROVIDER_NAME = name + 'CollectionProvider';
+    const [createCollectionContext, createCollectionScope] = index.$c512c27ab02ef895$export$50c7b4e9d9f19c1(PROVIDER_NAME);
+    const [CollectionProviderImpl, useCollectionContext] = createCollectionContext(PROVIDER_NAME, {
+        collectionRef: {
+            current: null
+        },
+        itemMap: new Map()
+    });
+    const CollectionProvider = (props)=>{
+        const { scope: scope , children: children  } = props;
+        const ref = React__default["default"].useRef(null);
+        const itemMap = React__default["default"].useRef(new Map()).current;
+        return /*#__PURE__*/ React__default["default"].createElement(CollectionProviderImpl, {
+            scope: scope,
+            itemMap: itemMap,
+            collectionRef: ref
+        }, children);
+    };
+    /* -----------------------------------------------------------------------------------------------
+   * CollectionSlot
+   * ---------------------------------------------------------------------------------------------*/ const COLLECTION_SLOT_NAME = name + 'CollectionSlot';
+    const CollectionSlot = /*#__PURE__*/ React__default["default"].forwardRef((props, forwardedRef)=>{
+        const { scope: scope , children: children  } = props;
+        const context = useCollectionContext(COLLECTION_SLOT_NAME, scope);
+        const composedRefs = index.$6ed0406888f73fc4$export$c7b2cbe3552a0d05(forwardedRef, context.collectionRef);
+        return /*#__PURE__*/ React__default["default"].createElement($5e63c961fc1ce211$export$8c6ed5c666ac1360, {
+            ref: composedRefs
+        }, children);
+    });
+    /* -----------------------------------------------------------------------------------------------
+   * CollectionItem
+   * ---------------------------------------------------------------------------------------------*/ const ITEM_SLOT_NAME = name + 'CollectionItemSlot';
+    const ITEM_DATA_ATTR = 'data-radix-collection-item';
+    const CollectionItemSlot = /*#__PURE__*/ React__default["default"].forwardRef((props, forwardedRef)=>{
+        const { scope: scope , children: children , ...itemData } = props;
+        const ref = React__default["default"].useRef(null);
+        const composedRefs = index.$6ed0406888f73fc4$export$c7b2cbe3552a0d05(forwardedRef, ref);
+        const context = useCollectionContext(ITEM_SLOT_NAME, scope);
+        React__default["default"].useEffect(()=>{
+            context.itemMap.set(ref, {
+                ref: ref,
+                ...itemData
+            });
+            return ()=>void context.itemMap.delete(ref)
+            ;
+        });
+        return /*#__PURE__*/ React__default["default"].createElement($5e63c961fc1ce211$export$8c6ed5c666ac1360, {
+            [ITEM_DATA_ATTR]: '',
+            ref: composedRefs
+        }, children);
+    });
+    /* -----------------------------------------------------------------------------------------------
+   * useCollection
+   * ---------------------------------------------------------------------------------------------*/ function useCollection(scope) {
+        const context = useCollectionContext(name + 'CollectionConsumer', scope);
+        const getItems = React__default["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
+        },
+        useCollection,
+        createCollectionScope
+    ];
+}
+
+exports.$e02a7d9cb1dc128c$export$c74125a8e3af6bb2 = $e02a7d9cb1dc128c$export$c74125a8e3af6bb2;

package/dist/_shared/cjs/index-699086a7.d.ts

@@ -1,2 +1,2 @@
-export { Item } from "./SiteHeader.rehydrator-ccbebde6";
+export { Item } from "./SiteHeader.rehydrator-acc9d8c4";
 export {};

package/dist/_shared/cjs/index-74488a9f.d.ts

@@ -1,2 +1,2 @@
 export { SubNavItem } from "./SubNavItem-a84d1bf4";
-export { default as SubNavItemRehydrator } from "./SiteHeader.rehydrator-ccbebde6";
+export { default as SubNavItemRehydrator } from "./SiteHeader.rehydrator-acc9d8c4";

package/dist/_shared/cjs/{index.module-9b87a34d.js → index-952918c9.js}

@@ -1,26 +1,9 @@
 'use strict';
 
 var React = require('react');
+var _extends = require('./extends-bb8ffacd.js');
 var $7SXl2$reactdom = require('react-dom');
 
-function _extends() {
-  _extends = Object.assign || function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-
-    return target;
-  };
-
-  return _extends.apply(this, arguments);
-}
-
 function $e42e1063c40fb3ef$export$b9ecd428b558ff10(originalEventHandler, ourEventHandler, { checkForDefaultPrevented: checkForDefaultPrevented = true  } = {}) {
     return function handleEvent(event) {
         originalEventHandler === null || originalEventHandler === void 0 || originalEventHandler(event);
@@ -148,14 +131,6 @@ function $e42e1063c40fb3ef$export$b9ecd428b558ff10(originalEventHandler, ourEven
     return createScope1;
 }
 
-/**
- * On the server, React emits a warning when calling `useLayoutEffect`.
- * This is because neither `useLayoutEffect` nor `useEffect` run on the server.
- * We use this safe version which suppresses the warning by replacing it with a noop on the server.
- *
- * See: https://reactjs.org/docs/hooks-reference.html#uselayouteffect
- */ const $9f79659886946c16$export$e5c5a5f917a5871c = Boolean(globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) ? React.useLayoutEffect : ()=>{};
-
 /**
  * A custom hook that converts a callback to a ref to avoid triggering re-renders when passed as a
  * prop or avoid re-executing effects when passed as a dependency
@@ -231,11 +206,11 @@ function $71cd76cc60e0454e$var$useUncontrolledState({ defaultProp: defaultProp ,
                 return /*#__PURE__*/ React.isValidElement(newElement) ? newElement.props.children : null;
             } else return child;
         });
-        return /*#__PURE__*/ React.createElement($5e63c961fc1ce211$var$SlotClone, _extends({}, slotProps, {
+        return /*#__PURE__*/ React.createElement($5e63c961fc1ce211$var$SlotClone, _extends._extends({}, slotProps, {
             ref: forwardedRef
         }), /*#__PURE__*/ React.isValidElement(newElement) ? /*#__PURE__*/ React.cloneElement(newElement, undefined, newChildren) : null);
     }
-    return /*#__PURE__*/ React.createElement($5e63c961fc1ce211$var$SlotClone, _extends({}, slotProps, {
+    return /*#__PURE__*/ React.createElement($5e63c961fc1ce211$var$SlotClone, _extends._extends({}, slotProps, {
         ref: forwardedRef
     }), children);
 });
@@ -246,7 +221,7 @@ $5e63c961fc1ce211$export$8c6ed5c666ac1360.displayName = 'Slot';
     const { children: children , ...slotProps } = props;
     if (/*#__PURE__*/ React.isValidElement(children)) return /*#__PURE__*/ React.cloneElement(children, {
         ...$5e63c961fc1ce211$var$mergeProps(slotProps, children.props),
-        ref: $6ed0406888f73fc4$export$43e446d32b3d21af(forwardedRef, children.ref)
+        ref: forwardedRef ? $6ed0406888f73fc4$export$43e446d32b3d21af(forwardedRef, children.ref) : children.ref
     });
     return React.Children.count(children) > 1 ? React.Children.only(null) : null;
 });
@@ -294,9 +269,11 @@ const $8927f6f2acc4f386$var$NODES = [
     'a',
     'button',
     'div',
+    'form',
     'h2',
     'h3',
     'img',
+    'input',
     'label',
     'li',
     'nav',
@@ -317,7 +294,7 @@ const $8927f6f2acc4f386$var$NODES = [
         React.useEffect(()=>{
             window[Symbol.for('radix-ui')] = true;
         }, []);
-        return /*#__PURE__*/ React.createElement(Comp, _extends({}, primitiveProps, {
+        return /*#__PURE__*/ React.createElement(Comp, _extends._extends({}, primitiveProps, {
             ref: forwardedRef
         }));
     });
@@ -369,13 +346,144 @@ const $8927f6f2acc4f386$var$NODES = [
     );
 }
 
-exports.$5e63c961fc1ce211$export$8c6ed5c666ac1360 = $5e63c961fc1ce211$export$8c6ed5c666ac1360;
+/**
+ * On the server, React emits a warning when calling `useLayoutEffect`.
+ * This is because neither `useLayoutEffect` nor `useEffect` run on the server.
+ * We use this safe version which suppresses the warning by replacing it with a noop on the server.
+ *
+ * See: https://reactjs.org/docs/hooks-reference.html#uselayouteffect
+ */ const $9f79659886946c16$export$e5c5a5f917a5871c = Boolean(globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) ? React.useLayoutEffect : ()=>{};
+
+function $fe963b355347cc68$export$3e6543de14f8614f(initialState, machine) {
+    return React.useReducer((state, event)=>{
+        const nextState = machine[state][event];
+        return nextState !== null && nextState !== void 0 ? nextState : state;
+    }, initialState);
+}
+
+
+const $921a889cee6df7e8$export$99c2b779aa4e8b8b = (props)=>{
+    const { present: present , children: children  } = props;
+    const presence = $921a889cee6df7e8$var$usePresence(present);
+    const child = typeof children === 'function' ? children({
+        present: presence.isPresent
+    }) : React.Children.only(children);
+    const ref = $6ed0406888f73fc4$export$c7b2cbe3552a0d05(presence.ref, child.ref);
+    const forceMount = typeof children === 'function';
+    return forceMount || presence.isPresent ? /*#__PURE__*/ React.cloneElement(child, {
+        ref: ref
+    }) : null;
+};
+$921a889cee6df7e8$export$99c2b779aa4e8b8b.displayName = 'Presence';
+/* -------------------------------------------------------------------------------------------------
+ * usePresence
+ * -----------------------------------------------------------------------------------------------*/ function $921a889cee6df7e8$var$usePresence(present) {
+    const [node1, setNode] = React.useState();
+    const stylesRef = React.useRef({});
+    const prevPresentRef = React.useRef(present);
+    const prevAnimationNameRef = React.useRef('none');
+    const initialState = present ? 'mounted' : 'unmounted';
+    const [state, send] = $fe963b355347cc68$export$3e6543de14f8614f(initialState, {
+        mounted: {
+            UNMOUNT: 'unmounted',
+            ANIMATION_OUT: 'unmountSuspended'
+        },
+        unmountSuspended: {
+            MOUNT: 'mounted',
+            ANIMATION_END: 'unmounted'
+        },
+        unmounted: {
+            MOUNT: 'mounted'
+        }
+    });
+    React.useEffect(()=>{
+        const currentAnimationName = $921a889cee6df7e8$var$getAnimationName(stylesRef.current);
+        prevAnimationNameRef.current = state === 'mounted' ? currentAnimationName : 'none';
+    }, [
+        state
+    ]);
+    $9f79659886946c16$export$e5c5a5f917a5871c(()=>{
+        const styles = stylesRef.current;
+        const wasPresent = prevPresentRef.current;
+        const hasPresentChanged = wasPresent !== present;
+        if (hasPresentChanged) {
+            const prevAnimationName = prevAnimationNameRef.current;
+            const currentAnimationName = $921a889cee6df7e8$var$getAnimationName(styles);
+            if (present) send('MOUNT');
+            else if (currentAnimationName === 'none' || (styles === null || styles === void 0 ? void 0 : styles.display) === 'none') // If there is no exit animation or the element is hidden, animations won't run
+            // so we unmount instantly
+            send('UNMOUNT');
+            else {
+                /**
+         * When `present` changes to `false`, we check changes to animation-name to
+         * determine whether an animation has started. We chose this approach (reading
+         * computed styles) because there is no `animationrun` event and `animationstart`
+         * fires after `animation-delay` has expired which would be too late.
+         */ const isAnimating = prevAnimationName !== currentAnimationName;
+                if (wasPresent && isAnimating) send('ANIMATION_OUT');
+                else send('UNMOUNT');
+            }
+            prevPresentRef.current = present;
+        }
+    }, [
+        present,
+        send
+    ]);
+    $9f79659886946c16$export$e5c5a5f917a5871c(()=>{
+        if (node1) {
+            /**
+       * Triggering an ANIMATION_OUT during an ANIMATION_IN will fire an `animationcancel`
+       * event for ANIMATION_IN after we have entered `unmountSuspended` state. So, we
+       * make sure we only trigger ANIMATION_END for the currently active animation.
+       */ const handleAnimationEnd = (event)=>{
+                const currentAnimationName = $921a889cee6df7e8$var$getAnimationName(stylesRef.current);
+                const isCurrentAnimation = currentAnimationName.includes(event.animationName);
+                if (event.target === node1 && isCurrentAnimation) // With React 18 concurrency this update is applied
+                // a frame after the animation ends, creating a flash of visible content.
+                // By manually flushing we ensure they sync within a frame, removing the flash.
+                $7SXl2$reactdom.flushSync(()=>send('ANIMATION_END')
+                );
+            };
+            const handleAnimationStart = (event)=>{
+                if (event.target === node1) // if animation occurred, store its name as the previous animation.
+                prevAnimationNameRef.current = $921a889cee6df7e8$var$getAnimationName(stylesRef.current);
+            };
+            node1.addEventListener('animationstart', handleAnimationStart);
+            node1.addEventListener('animationcancel', handleAnimationEnd);
+            node1.addEventListener('animationend', handleAnimationEnd);
+            return ()=>{
+                node1.removeEventListener('animationstart', handleAnimationStart);
+                node1.removeEventListener('animationcancel', handleAnimationEnd);
+                node1.removeEventListener('animationend', handleAnimationEnd);
+            };
+        } else // Transition to the unmounted state if the node is removed prematurely.
+        // We avoid doing so during cleanup as the node may change but still exist.
+        send('ANIMATION_END');
+    }, [
+        node1,
+        send
+    ]);
+    return {
+        isPresent: [
+            'mounted',
+            'unmountSuspended'
+        ].includes(state),
+        ref: React.useCallback((node)=>{
+            if (node) stylesRef.current = getComputedStyle(node);
+            setNode(node);
+        }, [])
+    };
+}
+/* -----------------------------------------------------------------------------------------------*/ function $921a889cee6df7e8$var$getAnimationName(styles) {
+    return (styles === null || styles === void 0 ? void 0 : styles.animationName) || 'none';
+}
+
+exports.$6ed0406888f73fc4$export$43e446d32b3d21af = $6ed0406888f73fc4$export$43e446d32b3d21af;
 exports.$6ed0406888f73fc4$export$c7b2cbe3552a0d05 = $6ed0406888f73fc4$export$c7b2cbe3552a0d05;
 exports.$71cd76cc60e0454e$export$6f32135080cb4c3 = $71cd76cc60e0454e$export$6f32135080cb4c3;
 exports.$8927f6f2acc4f386$export$250ffa63cdc0d034 = $8927f6f2acc4f386$export$250ffa63cdc0d034;
 exports.$8927f6f2acc4f386$export$6d1a0317bde7de7f = $8927f6f2acc4f386$export$6d1a0317bde7de7f;
-exports.$9f79659886946c16$export$e5c5a5f917a5871c = $9f79659886946c16$export$e5c5a5f917a5871c;
+exports.$921a889cee6df7e8$export$99c2b779aa4e8b8b = $921a889cee6df7e8$export$99c2b779aa4e8b8b;
 exports.$b1b2314f5f9a1d84$export$25bec8c6f54ee79a = $b1b2314f5f9a1d84$export$25bec8c6f54ee79a;
 exports.$c512c27ab02ef895$export$50c7b4e9d9f19c1 = $c512c27ab02ef895$export$50c7b4e9d9f19c1;
 exports.$e42e1063c40fb3ef$export$b9ecd428b558ff10 = $e42e1063c40fb3ef$export$b9ecd428b558ff10;
-exports._extends = _extends;