@ariakit/react-core 0.3.14 → 0.4.1

package/esm/__chunks/3MQJRHSX.js

@@ -0,0 +1,170 @@
+"use client";
+import {
+  useRadioContext
+} from "./ZVFJIYOE.js";
+import {
+  useCompositeItem
+} from "./C6OBNQ4F.js";
+import {
+  createElement,
+  createHook,
+  forwardRef,
+  memo
+} from "./5M6RSQEC.js";
+import {
+  useStoreState
+} from "./EKQEJRUF.js";
+import {
+  useEvent,
+  useForceUpdate,
+  useId,
+  useMergeRefs,
+  useTagName
+} from "./6O5OEQGF.js";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "./4R3V3JGP.js";
+
+// src/radio/radio.ts
+import { useEffect, useRef } from "react";
+import {
+  disabledFromProps,
+  removeUndefinedValues
+} from "@ariakit/core/utils/misc";
+var TagName = "input";
+function getIsChecked(value, storeValue) {
+  if (storeValue === void 0)
+    return;
+  if (value != null && storeValue != null) {
+    return storeValue === value;
+  }
+  return !!storeValue;
+}
+function isNativeRadio(tagName, type) {
+  return tagName === "input" && (!type || type === "radio");
+}
+var useRadio = createHook(function useRadio2(_a) {
+  var _b = _a, {
+    store,
+    name,
+    value,
+    checked
+  } = _b, props = __objRest(_b, [
+    "store",
+    "name",
+    "value",
+    "checked"
+  ]);
+  const context = useRadioContext();
+  store = store || context;
+  const id = useId(props.id);
+  const ref = useRef(null);
+  const isChecked = useStoreState(
+    store,
+    (state) => checked != null ? checked : getIsChecked(value, state == null ? void 0 : state.value)
+  );
+  useEffect(() => {
+    if (!id)
+      return;
+    if (!isChecked)
+      return;
+    const isActiveItem = (store == null ? void 0 : store.getState().activeId) === id;
+    if (isActiveItem)
+      return;
+    store == null ? void 0 : store.setActiveId(id);
+  }, [store, isChecked, id]);
+  const onChangeProp = props.onChange;
+  const tagName = useTagName(ref, TagName);
+  const nativeRadio = isNativeRadio(tagName, props.type);
+  const disabled = disabledFromProps(props);
+  const [propertyUpdated, schedulePropertyUpdate] = useForceUpdate();
+  useEffect(() => {
+    const element = ref.current;
+    if (!element)
+      return;
+    if (nativeRadio)
+      return;
+    if (isChecked !== void 0) {
+      element.checked = isChecked;
+    }
+    if (name !== void 0) {
+      element.name = name;
+    }
+    if (value !== void 0) {
+      element.value = `${value}`;
+    }
+  }, [propertyUpdated, nativeRadio, isChecked, name, value]);
+  const onChange = useEvent((event) => {
+    if (disabled) {
+      event.preventDefault();
+      event.stopPropagation();
+      return;
+    }
+    if (!nativeRadio) {
+      event.currentTarget.checked = true;
+      schedulePropertyUpdate();
+    }
+    onChangeProp == null ? void 0 : onChangeProp(event);
+    if (event.defaultPrevented)
+      return;
+    store == null ? void 0 : store.setValue(value);
+  });
+  const onClickProp = props.onClick;
+  const onClick = useEvent((event) => {
+    onClickProp == null ? void 0 : onClickProp(event);
+    if (event.defaultPrevented)
+      return;
+    if (nativeRadio)
+      return;
+    onChange(event);
+  });
+  const onFocusProp = props.onFocus;
+  const onFocus = useEvent((event) => {
+    onFocusProp == null ? void 0 : onFocusProp(event);
+    if (event.defaultPrevented)
+      return;
+    if (!nativeRadio)
+      return;
+    if (!store)
+      return;
+    const { moves, activeId } = store.getState();
+    if (!moves)
+      return;
+    if (id && activeId !== id)
+      return;
+    onChange(event);
+  });
+  props = __spreadProps(__spreadValues({
+    id,
+    role: !nativeRadio ? "radio" : void 0,
+    type: nativeRadio ? "radio" : void 0,
+    "aria-checked": isChecked
+  }, props), {
+    ref: useMergeRefs(ref, props.ref),
+    onChange,
+    onClick,
+    onFocus
+  });
+  props = useCompositeItem(__spreadValues({
+    store,
+    clickOnEnter: !nativeRadio
+  }, props));
+  return removeUndefinedValues(__spreadValues({
+    name: nativeRadio ? name : void 0,
+    value: nativeRadio ? value : void 0,
+    checked: isChecked
+  }, props));
+});
+var Radio = memo(
+  forwardRef(function Radio2(props) {
+    const htmlProps = useRadio(props);
+    return createElement(TagName, htmlProps);
+  })
+);
+
+export {
+  useRadio,
+  Radio
+};

package/esm/__chunks/{LWHPHW7Q.js → 3N4FFVWW.js}

@@ -4,15 +4,14 @@ import {
 } from "./TL67WVI6.js";
 import {
   Role
-} from "./FSFPRQFR.js";
+} from "./CBTO7DFZ.js";
 import {
   useDisclosureContent
-} from "./CLE7NTOY.js";
+} from "./RQZGFHI2.js";
 import {
   useDisclosureStore
-} from "./SFCBA2JZ.js";
+} from "./HZJ2XALY.js";
 import {
-  useMergeRefs,
   useSafeLayoutEffect
 } from "./6O5OEQGF.js";
 import {
@@ -26,7 +25,6 @@ import { jsx } from "react/jsx-runtime";
 function DialogBackdrop({
   store,
   backdrop,
-  backdropProps,
   alwaysVisible,
   hidden
 }) {
@@ -51,24 +49,21 @@ function DialogBackdrop({
       return;
     return markAncestor(backdrop2, id);
   }, [contentElement]);
-  if (hidden != null) {
-    backdropProps = __spreadProps(__spreadValues({}, backdropProps), { hidden });
-  }
-  const props = useDisclosureContent(__spreadProps(__spreadValues({
+  const props = useDisclosureContent({
+    ref,
     store: disclosure,
     role: "presentation",
     "data-backdrop": (contentElement == null ? void 0 : contentElement.id) || "",
-    alwaysVisible
-  }, backdropProps), {
-    ref: useMergeRefs(backdropProps == null ? void 0 : backdropProps.ref, ref),
-    style: __spreadValues({
+    alwaysVisible,
+    hidden: hidden != null ? hidden : void 0,
+    style: {
       position: "fixed",
       top: 0,
       right: 0,
       bottom: 0,
       left: 0
-    }, backdropProps == null ? void 0 : backdropProps.style)
-  }));
+    }
+  });
   if (!backdrop)
     return null;
   if (isValidElement(backdrop)) {

package/esm/__chunks/{MNFF5YOJ.js → 3OMHZVJD.js}

@@ -2,10 +2,10 @@
 import {
   HovercardContextProvider,
   HovercardScopedContextProvider
-} from "./TI7CMBHW.js";
+} from "./TWDHCE7Y.js";
 import {
   createStoreContext
-} from "./3ORBWXWF.js";
+} from "./5M6RSQEC.js";
 
 // src/tooltip/tooltip-context.tsx
 var ctx = createStoreContext(

package/esm/__chunks/{NKXUN25E.js → 5KB2YIDT.js}

@@ -1,15 +1,15 @@
 "use client";
 import {
   useButton
-} from "./VDNZBO4W.js";
+} from "./JJ3MV4KB.js";
 import {
   useDialogScopedContext
-} from "./G6BJYYBK.js";
+} from "./XXVAHUAO.js";
 import {
-  createComponent,
   createElement,
-  createHook
-} from "./3ORBWXWF.js";
+  createHook,
+  forwardRef
+} from "./5M6RSQEC.js";
 import {
   useEvent
 } from "./6O5OEQGF.js";
@@ -22,8 +22,9 @@ import {
 // src/dialog/dialog-dismiss.tsx
 import { useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+var TagName = "button";
 var useDialogDismiss = createHook(
-  (_a) => {
+  function useDialogDismiss2(_a) {
     var _b = _a, { store } = _b, props = __objRest(_b, ["store"]);
     const context = useDialogScopedContext();
     store = store || context;
@@ -66,13 +67,10 @@ var useDialogDismiss = createHook(
     return props;
   }
 );
-var DialogDismiss = createComponent((props) => {
+var DialogDismiss = forwardRef(function DialogDismiss2(props) {
   const htmlProps = useDialogDismiss(props);
-  return createElement("button", htmlProps);
+  return createElement(TagName, htmlProps);
 });
-if (process.env.NODE_ENV !== "production") {
-  DialogDismiss.displayName = "DialogDismiss";
-}
 
 export {
   useDialogDismiss,

package/esm/__chunks/{3ORBWXWF.js → 5M6RSQEC.js}

@@ -14,63 +14,24 @@ import {
 
 // src/utils/system.tsx
 import * as React from "react";
-import { hasOwnProperty } from "@ariakit/core/utils/misc";
 import { jsx } from "react/jsx-runtime";
-function isRenderProp(children) {
-  return typeof children === "function";
-}
 function forwardRef2(render) {
   const Role = React.forwardRef((props, ref) => render(__spreadProps(__spreadValues({}, props), { ref })));
   Role.displayName = render.displayName || render.name;
   return Role;
 }
 function memo2(Component, propsAreEqual) {
-  const Role = React.memo(Component, propsAreEqual);
-  Role.displayName = Component.displayName || Component.name;
-  return Role;
-}
-function createComponent(render) {
-  const Role = (props, ref) => render(__spreadValues({ ref }, props));
-  return React.forwardRef(Role);
-}
-function createMemoComponent(render) {
-  const Role = createComponent(render);
-  return React.memo(Role);
+  return React.memo(Component, propsAreEqual);
 }
 function createElement(Type, props) {
-  const _a = props, { as: As, wrapElement, render } = _a, rest = __objRest(_a, ["as", "wrapElement", "render"]);
-  let element;
+  const _a = props, { wrapElement, render } = _a, rest = __objRest(_a, ["wrapElement", "render"]);
   const mergedRef = useMergeRefs(props.ref, getRefProperty(render));
-  if (process.env.NODE_ENV !== "production") {
-    React.useEffect(() => {
-      if (!As)
-        return;
-      console.warn(
-        "The `as` prop is deprecated. Use the `render` prop instead.",
-        "See https://ariakit.org/guide/composition"
-      );
-    }, [As]);
-  }
-  if (As && typeof As !== "string") {
-    element = /* @__PURE__ */ jsx(As, __spreadProps(__spreadValues({}, rest), { render }));
-  } else if (React.isValidElement(render)) {
+  let element;
+  if (React.isValidElement(render)) {
     const renderProps = __spreadProps(__spreadValues({}, render.props), { ref: mergedRef });
     element = React.cloneElement(render, mergeProps(rest, renderProps));
   } else if (render) {
     element = render(rest);
-  } else if (isRenderProp(props.children)) {
-    if (process.env.NODE_ENV !== "production") {
-      React.useEffect(() => {
-        console.warn(
-          "The `children` prop as a function is deprecated. Use the `render` prop instead.",
-          "See https://ariakit.org/guide/composition"
-        );
-      }, []);
-    }
-    const _b = rest, { children } = _b, otherProps = __objRest(_b, ["children"]);
-    element = props.children(otherProps);
-  } else if (As) {
-    element = /* @__PURE__ */ jsx(As, __spreadValues({}, rest));
   } else {
     element = /* @__PURE__ */ jsx(Type, __spreadValues({}, rest));
   }
@@ -81,15 +42,9 @@ function createElement(Type, props) {
 }
 function createHook(useProps) {
   const useRole = (props = {}) => {
-    const htmlProps = useProps(props);
-    const copy = {};
-    for (const prop in htmlProps) {
-      if (hasOwnProperty(htmlProps, prop) && htmlProps[prop] !== void 0) {
-        copy[prop] = htmlProps[prop];
-      }
-    }
-    return copy;
+    return useProps(props);
   };
+  useRole.displayName = useProps.name;
   return useRole;
 }
 function createStoreContext(providers = [], scopedProviders = []) {
@@ -136,8 +91,6 @@ function createStoreContext(providers = [], scopedProviders = []) {
 export {
   forwardRef2 as forwardRef,
   memo2 as memo,
-  createComponent,
-  createMemoComponent,
   createElement,
   createHook,
   createStoreContext

package/esm/__chunks/{H3TG2CZP.js → 5SF76VVA.js}

@@ -1,15 +1,15 @@
 "use client";
 import {
   useDisclosure
-} from "./BHEJ6NUH.js";
+} from "./AFNONYRE.js";
 import {
   useDialogProviderContext
-} from "./G6BJYYBK.js";
+} from "./XXVAHUAO.js";
 import {
-  createComponent,
   createElement,
-  createHook
-} from "./3ORBWXWF.js";
+  createHook,
+  forwardRef
+} from "./5M6RSQEC.js";
 import {
   __objRest,
   __spreadValues
@@ -18,8 +18,9 @@ import {
 // src/dialog/dialog-disclosure.ts
 import { getPopupRole } from "@ariakit/core/utils/dom";
 import { invariant } from "@ariakit/core/utils/misc";
+var TagName = "button";
 var useDialogDisclosure = createHook(
-  (_a) => {
+  function useDialogDisclosure2(_a) {
     var _b = _a, { store } = _b, props = __objRest(_b, ["store"]);
     const context = useDialogProviderContext();
     store = store || context;
@@ -35,15 +36,10 @@ var useDialogDisclosure = createHook(
     return props;
   }
 );
-var DialogDisclosure = createComponent(
-  (props) => {
-    const htmlProps = useDialogDisclosure(props);
-    return createElement("button", htmlProps);
-  }
-);
-if (process.env.NODE_ENV !== "production") {
-  DialogDisclosure.displayName = "DialogDisclosure";
-}
+var DialogDisclosure = forwardRef(function DialogDisclosure2(props) {
+  const htmlProps = useDialogDisclosure(props);
+  return createElement(TagName, htmlProps);
+});
 
 export {
   useDialogDisclosure,

package/esm/__chunks/{NUNVG4IK.js → 6PC3IJNK.js}

@@ -1,23 +1,24 @@
 "use client";
 import {
   usePopoverDisclosureArrow
-} from "./JHO32H4J.js";
+} from "./HA4U57LH.js";
 import {
   useSelectContext
-} from "./5HVNGX6D.js";
+} from "./TKSBJDO3.js";
 import {
-  createComponent,
   createElement,
-  createHook
-} from "./3ORBWXWF.js";
+  createHook,
+  forwardRef
+} from "./5M6RSQEC.js";
 import {
   __objRest,
   __spreadValues
 } from "./4R3V3JGP.js";
 
 // src/select/select-arrow.ts
+var TagName = "span";
 var useSelectArrow = createHook(
-  (_a) => {
+  function useSelectArrow2(_a) {
     var _b = _a, { store } = _b, props = __objRest(_b, ["store"]);
     const context = useSelectContext();
     store = store || context;
@@ -25,13 +26,10 @@ var useSelectArrow = createHook(
     return props;
   }
 );
-var SelectArrow = createComponent((props) => {
+var SelectArrow = forwardRef(function SelectArrow2(props) {
   const htmlProps = useSelectArrow(props);
-  return createElement("span", htmlProps);
+  return createElement(TagName, htmlProps);
 });
-if (process.env.NODE_ENV !== "production") {
-  SelectArrow.displayName = "SelectArrow";
-}
 
 export {
   useSelectArrow,

package/esm/__chunks/{QWSZGSIG.js → 6YZEXKNV.js}

@@ -6,19 +6,19 @@ import {
 } from "./YMV43K4F.js";
 import {
   usePopover
-} from "./IRX7SFUJ.js";
+} from "./BYD75WXE.js";
 import {
   createDialogComponent
-} from "./NERBASET.js";
+} from "./KXSO5EFT.js";
 import {
   HovercardScopedContextProvider,
   useHovercardProviderContext
-} from "./TI7CMBHW.js";
+} from "./TWDHCE7Y.js";
 import {
-  createComponent,
   createElement,
-  createHook
-} from "./3ORBWXWF.js";
+  createHook,
+  forwardRef
+} from "./5M6RSQEC.js";
 import {
   useBooleanEvent,
   useEvent,
@@ -53,6 +53,7 @@ import {
 } from "@ariakit/core/utils/misc";
 import { sync } from "@ariakit/core/utils/store";
 import { jsx } from "react/jsx-runtime";
+var TagName = "div";
 function isMovingOnHovercard(target, card, anchor, nested) {
   if (hasFocusWithin(card))
     return true;
@@ -103,7 +104,7 @@ function useAutoFocusOnHide(_a) {
 }
 var NestedHovercardContext = createContext(null);
 var useHovercard = createHook(
-  (_a) => {
+  function useHovercard2(_a) {
     var _b = _a, {
       store,
       modal = false,
@@ -305,15 +306,12 @@ var useHovercard = createHook(
   }
 );
 var Hovercard = createDialogComponent(
-  createComponent((props) => {
+  forwardRef(function Hovercard2(props) {
     const htmlProps = useHovercard(props);
-    return createElement("div", htmlProps);
+    return createElement(TagName, htmlProps);
   }),
   useHovercardProviderContext
 );
-if (process.env.NODE_ENV !== "production") {
-  Hovercard.displayName = "Hovercard";
-}
 
 export {
   useHovercard,

package/esm/__chunks/7HFLDZTS.js

@@ -0,0 +1,51 @@
+"use client";
+import {
+  HeadingContext
+} from "./XPF5GU3Q.js";
+import {
+  createElement,
+  createHook,
+  forwardRef
+} from "./5M6RSQEC.js";
+import {
+  useMergeRefs,
+  useTagName
+} from "./6O5OEQGF.js";
+import {
+  __spreadProps,
+  __spreadValues
+} from "./4R3V3JGP.js";
+
+// src/heading/heading.tsx
+import { useContext, useMemo, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+var TagName = "h1";
+var useHeading = createHook(
+  function useHeading2(props) {
+    const ref = useRef(null);
+    const level = useContext(HeadingContext) || 1;
+    const Element = `h${level}`;
+    const tagName = useTagName(ref, Element);
+    const isNativeHeading = useMemo(
+      () => !!tagName && /^h\d$/.test(tagName),
+      [tagName]
+    );
+    props = __spreadProps(__spreadValues({
+      render: /* @__PURE__ */ jsx(Element, {}),
+      role: !isNativeHeading ? "heading" : void 0,
+      "aria-level": !isNativeHeading ? level : void 0
+    }, props), {
+      ref: useMergeRefs(ref, props.ref)
+    });
+    return props;
+  }
+);
+var Heading = forwardRef(function Heading2(props) {
+  const htmlProps = useHeading(props);
+  return createElement(TagName, htmlProps);
+});
+
+export {
+  useHeading,
+  Heading
+};

package/esm/__chunks/{UH3I23HL.js → 7YKLTEOQ.js}

@@ -1,12 +1,12 @@
 "use client";
 import {
   useCollectionContext
-} from "./4UUKJZ4V.js";
+} from "./MADQZZRL.js";
 import {
-  createComponent,
   createElement,
-  createHook
-} from "./3ORBWXWF.js";
+  createHook,
+  forwardRef
+} from "./5M6RSQEC.js";
 import {
   useId,
   useMergeRefs
@@ -19,9 +19,10 @@ import {
 
 // src/collection/collection-item.ts
 import { useEffect, useRef } from "react";
-import { identity } from "@ariakit/core/utils/misc";
+import { identity, removeUndefinedValues } from "@ariakit/core/utils/misc";
+var TagName = "div";
 var useCollectionItem = createHook(
-  (_a) => {
+  function useCollectionItem2(_a) {
     var _b = _a, {
       store,
       shouldRegisterItem = true,
@@ -52,18 +53,13 @@ var useCollectionItem = createHook(
     props = __spreadProps(__spreadValues({}, props), {
       ref: useMergeRefs(ref, props.ref)
     });
-    return props;
+    return removeUndefinedValues(props);
   }
 );
-var CollectionItem = createComponent(
-  (props) => {
-    const htmlProps = useCollectionItem(props);
-    return createElement("div", htmlProps);
-  }
-);
-if (process.env.NODE_ENV !== "production") {
-  CollectionItem.displayName = "CollectionItem";
-}
+var CollectionItem = forwardRef(function CollectionItem2(props) {
+  const htmlProps = useCollectionItem(props);
+  return createElement(TagName, htmlProps);
+});
 
 export {
   useCollectionItem,

package/esm/__chunks/A3BKKI3B.js

@@ -0,0 +1,44 @@
+"use client";
+import {
+  useSeparator
+} from "./SDQLXKEV.js";
+import {
+  useCompositeContext
+} from "./3D6OCOHF.js";
+import {
+  createElement,
+  createHook,
+  forwardRef
+} from "./5M6RSQEC.js";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "./4R3V3JGP.js";
+
+// src/composite/composite-separator.ts
+import { invariant } from "@ariakit/core/utils/misc";
+var TagName = "hr";
+var useCompositeSeparator = createHook(function useCompositeSeparator2(_a) {
+  var _b = _a, { store } = _b, props = __objRest(_b, ["store"]);
+  const context = useCompositeContext();
+  store = store || context;
+  invariant(
+    store,
+    process.env.NODE_ENV !== "production" && "CompositeSeparator must be wrapped in a Composite component."
+  );
+  const orientation = store.useState(
+    (state) => state.orientation === "horizontal" ? "vertical" : "horizontal"
+  );
+  props = useSeparator(__spreadProps(__spreadValues({}, props), { orientation }));
+  return props;
+});
+var CompositeSeparator = forwardRef(function CompositeSeparator2(props) {
+  const htmlProps = useCompositeSeparator(props);
+  return createElement(TagName, htmlProps);
+});
+
+export {
+  useCompositeSeparator,
+  CompositeSeparator
+};