refactor: rename InputOrGroup to AutoField

apps/docs/components/Preview/index.tsx

@@ -1,6 +1,6 @@
 import React, { CSSProperties } from "react";
 
-export { InputOrGroup } from "@/core/components/InputOrGroup";
+export { AutoField } from "@/core/components/AutoField";
 
 import { ReactNode } from "react";
 import "@/core/styles.css";

apps/docs/pages/docs/api-reference/components/field-label.mdx

@@ -3,7 +3,7 @@ title: <FieldLabel>
 ---
 
 import { ConfigPreview } from "../../../../components/Preview";
-import { FieldLabel } from "@/core/components/InputOrGroup";
+import { FieldLabel } from "@/core/components/AutoField";
 import { Globe } from "lucide-react";
 
 # \<FieldLabel\>

apps/docs/pages/docs/extending-puck/custom-fields.mdx

@@ -1,5 +1,5 @@
 import { ConfigPreview } from "@/docs/components/Preview";
-import { FieldLabel } from "@/core/components/InputOrGroup";
+import { FieldLabel } from "@/core/components/AutoField";
 
 # Custom Fields
 

packages/core/components/InputOrGroup/fields/ArrayField/index.tsx → packages/core/components/AutoField/fields/ArrayField/index.tsx

@@ -1,7 +1,7 @@
 import getClassNameFactory from "../../../../lib/get-class-name-factory";
 import styles from "./styles.module.css";
 import { List, Plus, Trash } from "lucide-react";
-import { FieldLabelInternal, InputOrGroup, type InputProps } from "../..";
+import { FieldLabelInternal, AutoField, type InputProps } from "../..";
 import { IconButton } from "../../../IconButton";
 import { reorder, replace } from "../../../../lib";
 import { Droppable } from "../../../Droppable";
@@ -263,7 +263,7 @@ export const ArrayField = ({
                                   const wildcardFieldName = `${name}[*].${fieldName}`;
 
                                   return (
-                                    <InputOrGroup
+                                    <AutoField
                                       key={subFieldName}
                                       name={subFieldName}
                                       label={subField.label || fieldName}

packages/core/components/InputOrGroup/fields/ObjectField/index.tsx → packages/core/components/AutoField/fields/ObjectField/index.tsx

@@ -1,10 +1,9 @@
 import getClassNameFactory from "../../../../lib/get-class-name-factory";
 import styles from "./styles.module.css";
 import { MoreVertical } from "lucide-react";
-import { FieldLabelInternal, InputOrGroup, type InputProps } from "../..";
+import { FieldLabelInternal, AutoField, type InputProps } from "../..";
 
 const getClassName = getClassNameFactory("ObjectField", styles);
-const getClassNameItem = getClassNameFactory("ObjectFieldItem", styles);
 
 export const ObjectField = ({
   field,
@@ -38,7 +37,7 @@ export const ObjectField = ({
             const wildcardFieldName = `${name}.${fieldName}`;
 
             return (
-              <InputOrGroup
+              <AutoField
                 key={subFieldName}
                 name={subFieldName}
                 label={subField.label || fieldName}

packages/core/components/InputOrGroup/index.tsx → packages/core/components/AutoField/index.tsx

@@ -102,7 +102,10 @@ export type InputProps<F = Field<any>> = {
   readOnlyFields?: Record<string, boolean | undefined>;
 };
 
-export const InputOrGroup = ({ onChange, ...props }: InputProps) => {
+export function AutoField<FieldType extends Field>({
+  onChange,
+  ...props
+}: InputProps<FieldType>) {
   const { overrides } = useAppContext();
 
   const { name, field, value, readOnly } = props;
@@ -178,4 +181,4 @@ export const InputOrGroup = ({ onChange, ...props }: InputProps) => {
   const Render = render[field.type] as (props: InputProps) => ReactElement;
 
   return <Render {...mergedProps}>{children}</Render>;
-};
+}

packages/core/components/ExternalInput/index.tsx

@@ -7,7 +7,7 @@ import { Modal } from "../Modal";
 import { Heading } from "../Heading";
 import { ClipLoader } from "react-spinners";
 import { Button } from "../Button";
-import { InputOrGroup } from "../InputOrGroup";
+import { AutoField } from "../AutoField";
 import { IconButton } from "../IconButton";
 
 const getClassName = getClassNameFactory("ExternalInput", styles);
@@ -195,7 +195,7 @@ export const ExternalInput = ({
                   Object.keys(filterFields).map((fieldName) => {
                     const filterField = filterFields[fieldName];
                     return (
-                      <InputOrGroup
+                      <AutoField
                         key={fieldName}
                         field={filterField}
                         name={fieldName}

packages/core/components/Puck/components/Fields/index.tsx

@@ -13,7 +13,7 @@ import {
   RootData,
   UiState,
 } from "../../../../types/Config";
-import { InputOrGroup } from "../../../InputOrGroup";
+import { AutoField } from "../../../AutoField";
 import { useAppContext } from "../../context";
 
 import styles from "./styles.module.css";
@@ -264,7 +264,7 @@ export const Fields = () => {
             const { readOnly = {} } = selectedItem;
 
             return (
-              <InputOrGroup
+              <AutoField
                 key={`${selectedItem.props.id}_${fieldName}`}
                 field={field}
                 name={fieldName}
@@ -280,7 +280,7 @@ export const Fields = () => {
             const { readOnly = {} } = data.root;
 
             return (
-              <InputOrGroup
+              <AutoField
                 key={`page_${fieldName}`}
                 field={field}
                 name={fieldName}

packages/core/index.ts

@@ -17,4 +17,4 @@ export * from "./lib/transform-props";
 export * from "./lib/resolve-all-data";
 export { usePuck } from "./lib/use-puck";
 
-export { FieldLabel } from "./components/InputOrGroup";
+export { FieldLabel } from "./components/AutoField";

packages/core/types/Overrides.ts

@@ -1,5 +1,5 @@
 import { ReactElement, ReactNode } from "react";
-import { InputProps } from "../components/InputOrGroup";
+import { InputProps } from "../components/AutoField";
 import { Field } from "./Config";
 import { ItemSelector } from "../lib/get-item";