@primitiv-ui/react 0.1.0 → 0.1.2

package/src/Fieldset/Fieldset.tsx

@@ -1,3 +1,5 @@
+import type { ReactElement } from "react";
+
 import { FieldsetLegendProps, FieldsetProps } from "./types";
 
 /**
@@ -27,7 +29,11 @@ import { FieldsetLegendProps, FieldsetProps } from "./types";
  * </Fieldset.Root>
  * ```
  */
-function Fieldset({ disabled, children, ...rest }: FieldsetProps) {
+export function FieldsetRoot({
+  disabled,
+  children,
+  ...rest
+}: FieldsetProps): ReactElement {
   return (
     <fieldset
       {...rest}
@@ -39,7 +45,8 @@ function Fieldset({ disabled, children, ...rest }: FieldsetProps) {
   );
 }
 
-Fieldset.displayName = "Fieldset";
+/** @internal */
+FieldsetRoot.displayName = "Fieldset";
 
 /**
  * The caption for a {@link Fieldset} — renders a native `<legend>`.
@@ -53,22 +60,25 @@ Fieldset.displayName = "Fieldset";
  * <Fieldset.Legend>Shipping address</Fieldset.Legend>
  * ```
  */
-function FieldsetLegend({ children, ...rest }: FieldsetLegendProps) {
+export function FieldsetLegend({
+  children,
+  ...rest
+}: FieldsetLegendProps): ReactElement {
   return <legend {...rest}>{children}</legend>;
 }
 
+/** @internal */
 FieldsetLegend.displayName = "FieldsetLegend";
 
-type FieldsetCompound = typeof Fieldset & {
-  Root: typeof Fieldset;
+/**
+ * The shape of the exported `Fieldset` value — callable as
+ * `Fieldset.Root` and carrying `Root` and `Legend` as static properties.
+ */
+export type FieldsetCompound = typeof FieldsetRoot & {
+  Root: typeof FieldsetRoot;
   Legend: typeof FieldsetLegend;
 };
 
-const FieldsetCompound: FieldsetCompound = Object.assign(Fieldset, {
-  Root: Fieldset,
-  Legend: FieldsetLegend,
-});
-
 /**
  * Headless, accessible **Fieldset** — a stateless compound component that
  * groups related form controls, with zero styles.
@@ -99,6 +109,12 @@ const FieldsetCompound: FieldsetCompound = Object.assign(Fieldset, {
  * </Fieldset.Root>
  * ```
  */
+const FieldsetCompound: FieldsetCompound = Object.assign(FieldsetRoot, {
+  Root: FieldsetRoot,
+  Legend: FieldsetLegend,
+});
+
+/** @internal */
 FieldsetCompound.displayName = "Fieldset";
 
 export { FieldsetCompound as Fieldset };

package/src/Fieldset/types.ts

@@ -1,5 +1,7 @@
 import { ComponentProps } from "react";
 
+/** Props for `Fieldset.Root` — the native `<fieldset>` attributes. */
 export type FieldsetProps = ComponentProps<"fieldset">;
 
+/** Props for `Fieldset.Legend` — the native `<legend>` attributes. */
 export type FieldsetLegendProps = ComponentProps<"legend">;

package/src/Input/Input.tsx

@@ -1,5 +1,7 @@
-import { useFieldProps } from "../Field/hooks";
-import { Slot } from "../Slot";
+import type { ReactElement } from "react";
+
+import { useFieldProps } from "../Field/hooks/index.ts";
+import { Slot } from "../Slot/index.ts";
 import { InputProps } from "./types";
 
 /**
@@ -101,7 +103,7 @@ export function Input({
   children,
   ref,
   ...consumer
-}: InputProps) {
+}: InputProps): ReactElement {
   const merged = useFieldProps(consumer);
 
   const rootProps = {
@@ -117,4 +119,5 @@ export function Input({
   return <input type={type} {...rootProps} />;
 }
 
+/** @internal */
 Input.displayName = "Input";

package/src/Input/__tests__/Input.field-integration.test.tsx

@@ -1,6 +1,6 @@
 import { render, screen } from "@testing-library/react";
 
-import { Field } from "../../Field";
+import { Field } from "../../Field/index.ts";
 import { Input } from "../Input";
 
 describe("Input — Field integration", () => {

package/src/Input/types.ts

@@ -1,5 +1,9 @@
 import { ComponentProps, ReactNode, Ref } from "react";
 
+/**
+ * Props for {@link Input} — all native `<input>` attributes plus the
+ * `asChild` escape hatch and a typed `ref`.
+ */
 export type InputProps = ComponentProps<"input"> & {
   asChild?: boolean;
   ref?: Ref<HTMLInputElement>;

package/src/InputGroup/InputGroup.tsx

@@ -1,4 +1,6 @@
-import { Slot } from "../Slot";
+import type { ReactElement } from "react";
+
+import { Slot } from "../Slot/index.ts";
 import { InputGroupAdornmentProps, InputGroupRootProps } from "./types";
 
 /**
@@ -34,12 +36,12 @@ import { InputGroupAdornmentProps, InputGroupRootProps } from "./types";
  * </InputGroup>
  * ```
  */
-function InputGroupRoot({
+export function InputGroupRoot({
   asChild = false,
   children,
   ref,
   ...rest
-}: InputGroupRootProps) {
+}: InputGroupRootProps): ReactElement {
   const rootProps = {
     ...rest,
     ref,
@@ -53,6 +55,7 @@ function InputGroupRoot({
   return <div {...rootProps}>{children}</div>;
 }
 
+/** @internal */
 InputGroupRoot.displayName = "InputGroupRoot";
 
 /**
@@ -89,12 +92,12 @@ InputGroupRoot.displayName = "InputGroupRoot";
  * </InputGroup.LeadingAdornment>
  * ```
  */
-function InputGroupLeadingAdornment({
+export function InputGroupLeadingAdornment({
   asChild = false,
   children,
   ref,
   ...rest
-}: InputGroupAdornmentProps) {
+}: InputGroupAdornmentProps): ReactElement {
   const adornmentProps = {
     ...rest,
     ref,
@@ -108,6 +111,7 @@ function InputGroupLeadingAdornment({
   return <span {...adornmentProps}>{children}</span>;
 }
 
+/** @internal */
 InputGroupLeadingAdornment.displayName = "InputGroupLeadingAdornment";
 
 /**
@@ -136,12 +140,12 @@ InputGroupLeadingAdornment.displayName = "InputGroupLeadingAdornment";
  * </InputGroup.TrailingAdornment>
  * ```
  */
-function InputGroupTrailingAdornment({
+export function InputGroupTrailingAdornment({
   asChild = false,
   children,
   ref,
   ...rest
-}: InputGroupAdornmentProps) {
+}: InputGroupAdornmentProps): ReactElement {
   const adornmentProps = {
     ...rest,
     ref,
@@ -155,9 +159,11 @@ function InputGroupTrailingAdornment({
   return <span {...adornmentProps}>{children}</span>;
 }
 
+/** @internal */
 InputGroupTrailingAdornment.displayName = "InputGroupTrailingAdornment";
 
-type TInputGroupCompound = typeof InputGroupRoot & {
+/** Type of the {@link InputGroup} compound: the root callable plus its attached sub-components. */
+export type TInputGroupCompound = typeof InputGroupRoot & {
   Root: typeof InputGroupRoot;
   LeadingAdornment: typeof InputGroupLeadingAdornment;
   TrailingAdornment: typeof InputGroupTrailingAdornment;
@@ -223,6 +229,7 @@ const InputGroupCompound: TInputGroupCompound = Object.assign(InputGroupRoot, {
   TrailingAdornment: InputGroupTrailingAdornment,
 });
 
+/** @internal */
 InputGroupCompound.displayName = "InputGroup";
 
 export { InputGroupCompound as InputGroup };

package/src/InputGroup/types.ts

@@ -1,11 +1,20 @@
 import { ComponentProps, ReactNode, Ref } from "react";
 
+/**
+ * Props for {@link InputGroup.Root} — all `<div>` attributes plus the
+ * `asChild` escape hatch and a typed `ref`.
+ */
 export type InputGroupRootProps = ComponentProps<"div"> & {
   asChild?: boolean;
   ref?: Ref<HTMLDivElement>;
   children?: ReactNode;
 };
 
+/**
+ * Props for {@link InputGroup.LeadingAdornment} and
+ * {@link InputGroup.TrailingAdornment} — all `<span>` attributes plus the
+ * `asChild` escape hatch and a typed `ref`.
+ */
 export type InputGroupAdornmentProps = ComponentProps<"span"> & {
   asChild?: boolean;
   ref?: Ref<HTMLSpanElement>;

package/src/MillerColumns/MillerColumns.tsx

@@ -1,7 +1,8 @@
 import { Ref } from "react";
+import type { ReactElement, ReactPortal } from "react";
 import { createPortal } from "react-dom";
 
-import { Slot } from "../Slot";
+import { Slot } from "../Slot/index.ts";
 
 import {
   MillerColumnsContext,
@@ -15,7 +16,7 @@ import {
   useMillerColumnsItemContext,
   useMillerColumnsResizeHandle,
   useMillerColumnsRoot,
-} from "./hooks";
+} from "./hooks/index.ts";
 
 import { partitionItemChildren } from "./utils";
 
@@ -53,7 +54,7 @@ export function MillerColumnsRoot({
   value,
   onValueChange,
   ...rest
-}: MillerColumnsRootProps) {
+}: MillerColumnsRootProps): ReactElement {
   const { contextValue, columnCount, registerSlotRef, stripRef } =
     useMillerColumnsRoot(value, defaultValue, onValueChange);
 
@@ -80,6 +81,7 @@ export function MillerColumnsRoot({
   );
 }
 
+/** @internal */
 MillerColumnsRoot.displayName = "MillerColumnsRoot";
 
 /**
@@ -99,7 +101,7 @@ export function MillerColumnsColumn({
   children,
   style,
   ...rest
-}: MillerColumnsColumnProps) {
+}: MillerColumnsColumnProps): ReactPortal | null {
   const { slot, depth, width, columnContextValue } = useMillerColumnsColumn();
 
   if (!slot) {
@@ -122,6 +124,7 @@ export function MillerColumnsColumn({
   );
 }
 
+/** @internal */
 MillerColumnsColumn.displayName = "MillerColumnsColumn";
 
 /**
@@ -166,7 +169,7 @@ export function MillerColumnsItem<T extends HTMLElement = HTMLDivElement>({
   ref,
   asChild = false,
   ...props
-}: MillerColumnsItemProps<T>) {
+}: MillerColumnsItemProps<T>): ReactElement {
   const { cell, column } = partitionItemChildren(children);
   const { itemProps, selected, itemContextValue } = useMillerColumnsItem(
     { ref: ref as Ref<HTMLDivElement>, ...props },
@@ -185,6 +188,7 @@ export function MillerColumnsItem<T extends HTMLElement = HTMLDivElement>({
   );
 }
 
+/** @internal */
 MillerColumnsItem.displayName = "MillerColumnsItem";
 
 /**
@@ -212,7 +216,7 @@ MillerColumnsItem.displayName = "MillerColumnsItem";
 export function MillerColumnsItemIndicator({
   children,
   ...rest
-}: MillerColumnsItemIndicatorProps) {
+}: MillerColumnsItemIndicatorProps): ReactElement | null {
   const { selected, hasChildren } = useMillerColumnsItemContext();
 
   if (!hasChildren) {
@@ -231,6 +235,7 @@ export function MillerColumnsItemIndicator({
   );
 }
 
+/** @internal */
 MillerColumnsItemIndicator.displayName = "MillerColumnsItemIndicator";
 
 /**
@@ -252,12 +257,13 @@ MillerColumnsItemIndicator.displayName = "MillerColumnsItemIndicator";
  */
 export function MillerColumnsResizeHandle(
   props: MillerColumnsResizeHandleProps,
-) {
+): ReactElement {
   const { handleProps } = useMillerColumnsResizeHandle(props);
 
   return <div {...handleProps} />;
 }
 
+/** @internal */
 MillerColumnsResizeHandle.displayName = "MillerColumnsResizeHandle";
 
 /**
@@ -291,7 +297,7 @@ MillerColumnsResizeHandle.displayName = "MillerColumnsResizeHandle";
 export function MillerColumnsPreviewPanel({
   children,
   ...rest
-}: MillerColumnsPreviewPanelProps) {
+}: MillerColumnsPreviewPanelProps): ReactElement {
   useMillerColumnsContext();
 
   return (
@@ -301,17 +307,31 @@ export function MillerColumnsPreviewPanel({
   );
 }
 
+/** @internal */
 MillerColumnsPreviewPanel.displayName = "MillerColumnsPreviewPanel";
 
+/** Type of the {@link MillerColumns} compound — the Root callable plus its sub-components. */
 type MillerColumnsCompound = typeof MillerColumnsRoot & {
+  /** The root strip, owning selection state and portal slots. */
   Root: typeof MillerColumnsRoot;
+  /** A single vertical list within the strip. */
   Column: typeof MillerColumnsColumn;
+  /** A selectable node within a column. */
   Item: typeof MillerColumnsItem;
+  /** The branch-item chevron affordance. */
   ItemIndicator: typeof MillerColumnsItemIndicator;
+  /** The drag-to-resize separator. */
   ResizeHandle: typeof MillerColumnsResizeHandle;
+  /** The trailing preview pane. */
   PreviewPanel: typeof MillerColumnsPreviewPanel;
 };
 
+/**
+ * MillerColumns — a horizontal strip of vertical lists where selecting a
+ * node reveals its children in the next column. Use as a namespace
+ * (`MillerColumns.Root`, `MillerColumns.Column`, `MillerColumns.Item`, …);
+ * the default export is also callable as the Root.
+ */
 const MillerColumnsCompound: MillerColumnsCompound = Object.assign(
   MillerColumnsRoot,
   {

package/src/MillerColumns/MillerColumnsContext.ts

@@ -1,4 +1,4 @@
-import { createStrictContext } from "../utils";
+import { createStrictContext } from "../utils/index.ts";
 
 import type {
   MillerColumnsContextValue,

package/src/MillerColumns/hooks/useMillerColumnsItem.ts

@@ -7,8 +7,8 @@ import {
   useRef,
 } from "react";
 
-import { useRovingTabindex } from "../../hooks";
-import { composeRefs } from "../../Slot";
+import { useRovingTabindex } from "../../hooks/index.ts";
+import { composeRefs } from "../../Slot/index.ts";
 
 import type {
   MillerColumnsItemContextValue,

package/src/MillerColumns/index.ts

@@ -1,3 +1,3 @@
 export * from "./MillerColumns";
 export { useMillerColumnsSelection } from "./useMillerColumnsSelection";
-export type { MillerColumnsSelection } from "./types";
+export * from "./types";

package/src/MillerColumns/types.ts

@@ -1,51 +1,80 @@
 import { ComponentProps, ReactNode, Ref } from "react";
 
-type MillerColumnsRootBaseProps = Omit<ComponentProps<"div">, "ref"> & {
+/** Props common to both controlled and uncontrolled `MillerColumns.Root` modes. */
+export type MillerColumnsRootBaseProps = Omit<ComponentProps<"div">, "ref"> & {
+  /** The columns and panels that make up the strip. */
   children: ReactNode;
 };
 
-type MillerColumnsRootUncontrolledProps = MillerColumnsRootBaseProps & {
+/**
+ * Props for `MillerColumns.Root` in uncontrolled mode — the component owns the
+ * selection path. Pass `defaultValue` to set the initial path.
+ */
+export type MillerColumnsRootUncontrolledProps = MillerColumnsRootBaseProps & {
+  /** Initial selection path when uncontrolled. */
   defaultValue?: string[];
+  /** Forbidden in uncontrolled mode. */
   value?: never;
+  /** Forbidden in uncontrolled mode. */
   onValueChange?: never;
 };
 
-type MillerColumnsRootControlledProps = MillerColumnsRootBaseProps & {
+/**
+ * Props for `MillerColumns.Root` in controlled mode — the parent owns the
+ * selection path. Pass `value` and `onValueChange` together.
+ */
+export type MillerColumnsRootControlledProps = MillerColumnsRootBaseProps & {
+  /** Forbidden in controlled mode. */
   defaultValue?: never;
+  /** The controlled selection path, root column first. */
   value: string[];
+  /** Called with the new path whenever the selection changes. */
   onValueChange: (path: string[]) => void;
 };
 
+/** Props for `MillerColumns.Root` — discriminated controlled/uncontrolled union. */
 export type MillerColumnsRootProps =
   | MillerColumnsRootUncontrolledProps
   | MillerColumnsRootControlledProps;
 
+/** Props for `MillerColumns.Column`, a single vertical list within the strip. */
 export type MillerColumnsColumnProps = ComponentProps<"div"> & {
+  /** The items (and optional resize handle) of this column. */
   children: ReactNode;
 };
 
-export type MillerColumnsItemProps<
-  T extends HTMLElement = HTMLDivElement,
-> = Omit<ComponentProps<"div">, "ref"> & {
-  value: string;
-  disabled?: boolean;
-  asChild?: boolean;
-  children: ReactNode;
-  /** Ref to the rendered element. Defaults to `HTMLDivElement`; when using
-   * `asChild`, specify the child's element type. */
-  ref?: Ref<T>;
-};
+/** Props for `MillerColumns.Item`, a single selectable node within a column. */
+export type MillerColumnsItemProps<T extends HTMLElement = HTMLDivElement> =
+  Omit<ComponentProps<"div">, "ref"> & {
+    /** Stable identifier used to match this item against the selection path. */
+    value: string;
+    /** When `true`, the item cannot be selected or focused. */
+    disabled?: boolean;
+    /** Render the child element instead of the default `<div>`. */
+    asChild?: boolean;
+    /** Cell content and, for a branch, a nested `<MillerColumns.Column>`. */
+    children: ReactNode;
+    /** Ref to the rendered element. Defaults to `HTMLDivElement`; when using
+     * `asChild`, specify the child's element type. */
+    ref?: Ref<T>;
+  };
 
+/** Props for `MillerColumns.ItemIndicator`, the branch chevron affordance. */
 export type MillerColumnsItemIndicatorProps = ComponentProps<"span"> & {
+  /** The glyph to render (defaults to none). */
   children?: ReactNode;
 };
 
+/** Props for `MillerColumns.ResizeHandle`, the drag-to-resize separator. */
 export type MillerColumnsResizeHandleProps = ComponentProps<"div">;
 
+/** Props for `MillerColumns.PreviewPanel`, the trailing preview pane. */
 export type MillerColumnsPreviewPanelProps = ComponentProps<"div"> & {
+  /** The preview content for the current selection. */
   children?: ReactNode;
 };
 
+/** The current selection, as returned by `useMillerColumnsSelection`. */
 export type MillerColumnsSelection = {
   /** The full active path — selected item ids, root column first. */
   path: string[];
@@ -53,41 +82,65 @@ export type MillerColumnsSelection = {
   selectedValue: string | undefined;
 };
 
+/** Metadata recorded for each registered item, used for column navigation. */
 export type MillerColumnsItemMeta = {
+  /** The item's stable identifier. */
   value: string;
+  /** Whether the item is disabled. */
   disabled: boolean;
 };
 
+/** A depth + value pair locating an item within the strip. */
 export type MillerColumnsItemAddress = {
+  /** The zero-based column depth. */
   depth: number;
+  /** The item's stable identifier. */
   value: string;
 };
 
+/** Value shared through the root MillerColumns context. */
 export type MillerColumnsContextValue = {
+  /** Portal slots keyed by column depth. */
   slots: Map<number, HTMLElement>;
+  /** Per-depth column widths set via the resize handle. */
   columnWidths: Map<number, number>;
+  /** Record a column's width at the given depth. */
   setColumnWidth: (depth: number, width: number) => void;
+  /** The active selection path. */
   activePath: string[];
+  /** Select the item at the given depth and value. */
   select: (depth: number, value: string) => void;
+  /** Register (or unregister, with a `null` element) an item. */
   registerItem: (
     depth: number,
     value: string,
     element: HTMLElement | null,
     disabled: boolean,
   ) => void;
+  /** Get the registered items for a column. */
   getColumnItems: (depth: number) => MillerColumnsItemMeta[];
+  /** Move focus to the given item. */
   focusItem: (depth: number, value: string) => void;
+  /** Focus the first item in a column; returns whether one was focused. */
   focusFirstInColumn: (depth: number) => boolean;
+  /** Request that focus move into the given column. */
   requestColumnFocus: (depth: number) => void;
+  /** The currently active (focused) item, if any. */
   activeItem: MillerColumnsItemAddress | null;
+  /** Set the active (focused) item. */
   setActiveItem: (item: MillerColumnsItemAddress) => void;
 };
 
+/** Value shared through a column's context. */
 export type MillerColumnsColumnContextValue = {
+  /** The column's zero-based depth. */
   depth: number;
 };
 
+/** Value shared through an item's context. */
 export type MillerColumnsItemContextValue = {
+  /** Whether this item is on the active path. */
   selected: boolean;
+  /** Whether this item has a nested child column. */
   hasChildren: boolean;
 };

package/src/MillerColumns/useMillerColumnsSelection.ts

@@ -1,4 +1,4 @@
-import { useMillerColumnsContext } from "./hooks";
+import { useMillerColumnsContext } from "./hooks/index.ts";
 
 import type { MillerColumnsSelection } from "./types";
 

package/src/Modal/Modal.tsx

@@ -1,7 +1,8 @@
 import { Ref, useEffect, useId } from "react";
+import type { ReactElement } from "react";
 
-import { Portal } from "../Portal";
-import { Slot, composeEventHandlers, composeRefs } from "../Slot";
+import { Portal } from "../Portal/index.ts";
+import { Slot, composeEventHandlers, composeRefs } from "../Slot/index.ts";
 
 import { ModalProvider } from "./ModalContext";
 import {
@@ -9,7 +10,7 @@ import {
   useModalContext,
   useModalRoot,
   useModalTrigger,
-} from "./hooks";
+} from "./hooks/index.ts";
 import {
   ModalCloseProps,
   ModalContentProps,
@@ -73,7 +74,7 @@ function ModalRoot({
   defaultOpen,
   open,
   onOpenChange,
-}: ModalRootProps) {
+}: ModalRootProps): ReactElement {
   const { contextValue } = useModalRoot(
     { defaultOpen, open, onOpenChange },
     ref,
@@ -110,7 +111,7 @@ function ModalTrigger({
   type,
   asChild = false,
   ...rest
-}: ModalTriggerProps) {
+}: ModalTriggerProps): ReactElement {
   const { getTriggerProps } = useModalTrigger(onClick, rest);
 
   if (asChild) {
@@ -141,7 +142,11 @@ ModalTrigger.displayName = "ModalTrigger";
  * </Modal.Portal>
  * ```
  */
-function ModalPortal({ children, container, forceMount }: ModalPortalProps) {
+function ModalPortal({
+  children,
+  container,
+  forceMount,
+}: ModalPortalProps): ReactElement | null {
   const { open } = useModalContext();
 
   if (!open && !forceMount) return null;
@@ -189,7 +194,7 @@ function ModalOverlay({
   asChild = false,
   forceMount,
   ...rest
-}: ModalOverlayProps) {
+}: ModalOverlayProps): ReactElement | null {
   const { open } = useModalContext();
   if (!open && !forceMount) return null;
   const overlayProps = {
@@ -252,7 +257,7 @@ function ModalContent({
   onPointerDownOutside,
   ref: externalRef,
   ...rest
-}: ModalContentProps & { ref?: Ref<HTMLDialogElement> }) {
+}: ModalContentProps & { ref?: Ref<HTMLDialogElement> }): ReactElement {
   const { ref: innerRef, open, contentId } = useModalContent();
   const { contentCallbacksRef, titleId, descriptionId } = useModalContext();
   // Keep the ref pointed at the latest callbacks so event handlers wired
@@ -297,7 +302,11 @@ ModalContent.displayName = "ModalContent";
  * </Modal.Title>
  * ```
  */
-function ModalTitle({ children, asChild = false, ...rest }: ModalTitleProps) {
+function ModalTitle({
+  children,
+  asChild = false,
+  ...rest
+}: ModalTitleProps): ReactElement {
   const { registerTitle } = useModalContext();
   const id = useId();
 
@@ -342,7 +351,7 @@ function ModalDescription({
   children,
   asChild = false,
   ...rest
-}: ModalDescriptionProps) {
+}: ModalDescriptionProps): ReactElement {
   const { registerDescription } = useModalContext();
   const id = useId();
 
@@ -386,7 +395,11 @@ ModalDescription.displayName = "ModalDescription";
  * </Modal.Close>
  * ```
  */
-function ModalClose({ onClick, asChild = false, ...rest }: ModalCloseProps) {
+function ModalClose({
+  onClick,
+  asChild = false,
+  ...rest
+}: ModalCloseProps): ReactElement {
   const { setOpen } = useModalContext();
   const closeProps = {
     ...rest,
@@ -402,6 +415,7 @@ function ModalClose({ onClick, asChild = false, ...rest }: ModalCloseProps) {
 
 ModalClose.displayName = "ModalClose";
 
+/** @internal */
 type ModalCompound = typeof ModalRoot & {
   Root: typeof ModalRoot;
   Trigger: typeof ModalTrigger;