@pixpilot/formily-shadcn 0.10.0 → 0.11.1

package/dist/components/form-item/connected-form-item.js

@@ -0,0 +1,44 @@
+import { BaseFormItem } from "./base-form-item.js";
+import { connect, mapProps } from "@formily/react";
+import { isVoidField } from "@formily/core";
+
+//#region src/components/form-item/connected-form-item.tsx
+/**
+* FormItem component connected to Formily field state.
+* Automatically maps field validation state to component props.
+*/
+const FormItem = connect(BaseFormItem, mapProps((props, field) => {
+	if (isVoidField(field)) return {
+		label: field.title ?? props.label,
+		description: props.description ?? field.description,
+		asterisk: props.asterisk
+	};
+	const takeFeedbackStatus = () => {
+		if (field.validating) return void 0;
+		if (field.selfErrors?.length) return "error";
+		if (field.selfWarnings?.length) return "warning";
+		if (field.selfSuccesses?.length) return "success";
+	};
+	const takeFeedbackText = () => {
+		if (field.validating) return void 0;
+		if (props.feedbackText != null) return props.feedbackText;
+		if (field.selfErrors?.length) return field.selfErrors.join(", ");
+		if (field.selfWarnings?.length) return field.selfWarnings.join(", ");
+		if (field.selfSuccesses?.length) return field.selfSuccesses.join(", ");
+	};
+	const takeAsterisk = () => {
+		if (field.required && field.pattern !== "readPretty") return true;
+		if ("asterisk" in props) return Boolean(props.asterisk);
+		return false;
+	};
+	return {
+		label: props.label ?? field.title,
+		description: props.description ?? field.description,
+		feedbackStatus: takeFeedbackStatus(),
+		feedbackText: takeFeedbackText(),
+		asterisk: takeAsterisk()
+	};
+}));
+
+//#endregion
+export { FormItem };

package/dist/components/form-item/form-item-description-popover.cjs

@@ -0,0 +1,42 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let lucide_react = require("lucide-react");
+lucide_react = require_rolldown_runtime.__toESM(lucide_react);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
+let __pixpilot_shadcn = require("@pixpilot/shadcn");
+__pixpilot_shadcn = require_rolldown_runtime.__toESM(__pixpilot_shadcn);
+
+//#region src/components/form-item/form-item-description-popover.tsx
+function FormItemDescriptionPopover({ description, className }) {
+	const [open, setOpen] = react.default.useState(false);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.Popover, {
+		open,
+		onOpenChange: setOpen,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.PopoverTrigger, {
+			asChild: true,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "button",
+				"aria-label": "Show description",
+				className: (0, __pixpilot_shadcn.cn)("text-muted-foreground inline-flex items-center justify-center rounded-sm hover:text-foreground transition-colors", className),
+				onMouseEnter: () => setOpen(true),
+				onMouseLeave: () => setOpen(false),
+				onClick: () => setOpen((prev) => !prev),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.HelpCircleIcon, { className: "h-4 w-4" })
+			})
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.PopoverContent, {
+			side: "top",
+			className: "w-80 bg-card border border-border",
+			onMouseEnter: () => setOpen(true),
+			onMouseLeave: () => setOpen(false),
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "text-sm leading-relaxed text-foreground",
+				children: description
+			})
+		})]
+	});
+}
+
+//#endregion
+exports.FormItemDescriptionPopover = FormItemDescriptionPopover;

package/dist/components/form-item/form-item-description-popover.js

@@ -0,0 +1,37 @@
+import React from "react";
+import { HelpCircleIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Popover, PopoverContent, PopoverTrigger, cn } from "@pixpilot/shadcn";
+
+//#region src/components/form-item/form-item-description-popover.tsx
+function FormItemDescriptionPopover({ description, className }) {
+	const [open, setOpen] = React.useState(false);
+	return /* @__PURE__ */ jsxs(Popover, {
+		open,
+		onOpenChange: setOpen,
+		children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+			asChild: true,
+			children: /* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-label": "Show description",
+				className: cn("text-muted-foreground inline-flex items-center justify-center rounded-sm hover:text-foreground transition-colors", className),
+				onMouseEnter: () => setOpen(true),
+				onMouseLeave: () => setOpen(false),
+				onClick: () => setOpen((prev) => !prev),
+				children: /* @__PURE__ */ jsx(HelpCircleIcon, { className: "h-4 w-4" })
+			})
+		}), /* @__PURE__ */ jsx(PopoverContent, {
+			side: "top",
+			className: "w-80 bg-card border border-border",
+			onMouseEnter: () => setOpen(true),
+			onMouseLeave: () => setOpen(false),
+			children: /* @__PURE__ */ jsx("div", {
+				className: "text-sm leading-relaxed text-foreground",
+				children: description
+			})
+		})]
+	});
+}
+
+//#endregion
+export { FormItemDescriptionPopover };

package/dist/components/form-item/form-item-label.cjs

@@ -0,0 +1,29 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_form_item_description_popover = require('./form-item-description-popover.cjs');
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
+let __pixpilot_shadcn = require("@pixpilot/shadcn");
+__pixpilot_shadcn = require_rolldown_runtime.__toESM(__pixpilot_shadcn);
+
+//#region src/components/form-item/form-item-label.tsx
+function FormItemLabel({ id, label, asterisk, error, shrink, labelClassName, description, descriptionInPopover }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+		htmlFor: id,
+		"data-slot": "form-label",
+		"data-error": Boolean(error),
+		className: (0, __pixpilot_shadcn.cn)("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70", error && "text-destructive", shrink && "shrink-0", labelClassName),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+			className: "inline-flex items-center gap-1",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: label }), descriptionInPopover && description != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_form_item_description_popover.FormItemDescriptionPopover, { description })]
+		}), asterisk && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "text-destructive ml-1",
+			"aria-label": "required",
+			children: "*"
+		})]
+	});
+}
+
+//#endregion
+exports.FormItemLabel = FormItemLabel;

package/dist/components/form-item/form-item-label.js

@@ -0,0 +1,25 @@
+import { FormItemDescriptionPopover } from "./form-item-description-popover.js";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "@pixpilot/shadcn";
+
+//#region src/components/form-item/form-item-label.tsx
+function FormItemLabel({ id, label, asterisk, error, shrink, labelClassName, description, descriptionInPopover }) {
+	return /* @__PURE__ */ jsxs("label", {
+		htmlFor: id,
+		"data-slot": "form-label",
+		"data-error": Boolean(error),
+		className: cn("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70", error && "text-destructive", shrink && "shrink-0", labelClassName),
+		children: [/* @__PURE__ */ jsxs("span", {
+			className: "inline-flex items-center gap-1",
+			children: [/* @__PURE__ */ jsx("span", { children: label }), descriptionInPopover && description != null && /* @__PURE__ */ jsx(FormItemDescriptionPopover, { description })]
+		}), asterisk && /* @__PURE__ */ jsx("span", {
+			className: "text-destructive ml-1",
+			"aria-label": "required",
+			children: "*"
+		})]
+	});
+}
+
+//#endregion
+export { FormItemLabel };

package/dist/components/form-item/form-item-types.d.cts

@@ -0,0 +1,23 @@
+import { DescriptionPlacement } from "../../types/form-item.cjs";
+import { SyncReactNode } from "../../types/react.cjs";
+import React from "react";
+
+//#region src/components/form-item/form-item-types.d.ts
+type LabelPlacement = 'top' | 'bottom' | 'start' | 'end';
+interface FormItemProps extends React.ComponentProps<'div'> {
+  label?: SyncReactNode;
+  description?: SyncReactNode;
+  /**
+   * Controls where `description` is rendered relative to the input.
+   * - `top`: above the input
+   * - `bottom`: below the input
+   * - `popover`: show a help icon before the label and render the description in a hover popover
+   */
+  descriptionPlacement?: DescriptionPlacement;
+  asterisk?: boolean;
+  feedbackStatus?: 'error' | 'warning' | 'success';
+  feedbackText?: SyncReactNode;
+  labelPlacement?: LabelPlacement;
+}
+//#endregion
+export { FormItemProps, LabelPlacement };

package/dist/components/form-item/form-item-types.d.ts

@@ -0,0 +1,23 @@
+import { DescriptionPlacement } from "../../types/form-item.js";
+import { SyncReactNode } from "../../types/react.js";
+import React from "react";
+
+//#region src/components/form-item/form-item-types.d.ts
+type LabelPlacement = 'top' | 'bottom' | 'start' | 'end';
+interface FormItemProps extends React.ComponentProps<'div'> {
+  label?: SyncReactNode;
+  description?: SyncReactNode;
+  /**
+   * Controls where `description` is rendered relative to the input.
+   * - `top`: above the input
+   * - `bottom`: below the input
+   * - `popover`: show a help icon before the label and render the description in a hover popover
+   */
+  descriptionPlacement?: DescriptionPlacement;
+  asterisk?: boolean;
+  feedbackStatus?: 'error' | 'warning' | 'success';
+  feedbackText?: SyncReactNode;
+  labelPlacement?: LabelPlacement;
+}
+//#endregion
+export { FormItemProps, LabelPlacement };

package/dist/components/form-item/form-item.cjs

@@ -0,0 +1,2 @@
+const require_base_form_item = require('./base-form-item.cjs');
+const require_connected_form_item = require('./connected-form-item.cjs');

package/dist/components/form-item/form-item.d.cts

@@ -0,0 +1,4 @@
+import { DescriptionPlacement } from "../../types/form-item.cjs";
+import { FormItemProps, LabelPlacement } from "./form-item-types.cjs";
+import "./base-form-item.cjs";
+import { FormItem } from "./connected-form-item.cjs";

package/dist/components/form-item/form-item.d.ts

@@ -0,0 +1,4 @@
+import { DescriptionPlacement } from "../../types/form-item.js";
+import { FormItemProps, LabelPlacement } from "./form-item-types.js";
+import "./base-form-item.js";
+import { FormItem } from "./connected-form-item.js";

package/dist/components/form-item/form-item.js

@@ -0,0 +1,2 @@
+import { BaseFormItem } from "./base-form-item.js";
+import { FormItem } from "./connected-form-item.js";

package/dist/components/form-item/index.cjs

@@ -0,0 +1,3 @@
+const require_base_form_item = require('./base-form-item.cjs');
+const require_connected_form_item = require('./connected-form-item.cjs');
+require('./form-item.cjs');

package/dist/components/form-item/index.d.cts

@@ -0,0 +1,4 @@
+import { DescriptionPlacement } from "../../types/form-item.cjs";
+import { FormItemProps, LabelPlacement } from "./form-item-types.cjs";
+import { FormItem } from "./connected-form-item.cjs";
+import "./form-item.cjs";

package/dist/components/form-item/index.d.ts

@@ -0,0 +1,4 @@
+import { DescriptionPlacement } from "../../types/form-item.js";
+import { FormItemProps, LabelPlacement } from "./form-item-types.js";
+import { FormItem } from "./connected-form-item.js";
+import "./form-item.js";

package/dist/components/form-item/index.js

@@ -0,0 +1,3 @@
+import { BaseFormItem } from "./base-form-item.js";
+import { FormItem } from "./connected-form-item.js";
+import "./form-item.js";

package/dist/components/form-item/spacing-config.cjs

@@ -0,0 +1,24 @@
+
+//#region src/components/form-item/spacing-config.ts
+const FEEDBACK = "mt-1";
+const LABE_DEFAULT = "mb-2";
+function getSpacingConfig(descriptionPlacement, hasDescription) {
+	if (descriptionPlacement === "top" && hasDescription) return {
+		label: "mb-1",
+		description: "mb-1.5",
+		feedback: FEEDBACK
+	};
+	if (descriptionPlacement === "bottom" && hasDescription) return {
+		label: LABE_DEFAULT,
+		description: "mt-1",
+		feedback: FEEDBACK
+	};
+	return {
+		label: LABE_DEFAULT,
+		description: "",
+		feedback: FEEDBACK
+	};
+}
+
+//#endregion
+exports.getSpacingConfig = getSpacingConfig;

package/dist/components/form-item/spacing-config.js

@@ -0,0 +1,23 @@
+//#region src/components/form-item/spacing-config.ts
+const FEEDBACK = "mt-1";
+const LABE_DEFAULT = "mb-2";
+function getSpacingConfig(descriptionPlacement, hasDescription) {
+	if (descriptionPlacement === "top" && hasDescription) return {
+		label: "mb-1",
+		description: "mb-1.5",
+		feedback: FEEDBACK
+	};
+	if (descriptionPlacement === "bottom" && hasDescription) return {
+		label: LABE_DEFAULT,
+		description: "mt-1",
+		feedback: FEEDBACK
+	};
+	return {
+		label: LABE_DEFAULT,
+		description: "",
+		feedback: FEEDBACK
+	};
+}
+
+//#endregion
+export { getSpacingConfig };

package/dist/components/form-items-container.cjs

@@ -12,7 +12,8 @@ __pixpilot_shadcn = require_rolldown_runtime.__toESM(__pixpilot_shadcn);
 //#region src/components/form-items-container.tsx
 const FormItemContainer = (props) => {
 	const { as: Component = "div", className,...rest } = props;
-	const { density } = require_use_form_context.useFormContext();
+	const { layout } = require_use_form_context.useFormContext();
+	const { density } = layout || {};
 	const spaceClass = require_resolve_responsive_space.resolveResponsiveSpaceClass({ density });
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, {
 		...rest,

package/dist/components/form-items-container.js

@@ -8,7 +8,8 @@ import { cn } from "@pixpilot/shadcn";
 //#region src/components/form-items-container.tsx
 const FormItemContainer = (props) => {
 	const { as: Component = "div", className,...rest } = props;
-	const { density } = useFormContext();
+	const { layout } = useFormContext();
+	const { density } = layout || {};
 	const spaceClass = resolveResponsiveSpaceClass({ density });
 	return /* @__PURE__ */ jsx(Component, {
 		...rest,

package/dist/components/form.cjs

@@ -15,7 +15,7 @@ __pixpilot_shadcn = require_rolldown_runtime.__toESM(__pixpilot_shadcn);
 /**
 * Form component - wraps FormProvider and provides form context
 */
-function Form({ form, className, style, children, onSubmit, onAutoSubmit, itemProps, objectContainerProps, density, settings }) {
+function Form({ form, className, style, children, onSubmit, onAutoSubmit, layout, settings }) {
 	const handleSubmit = (e) => {
 		e.preventDefault();
 		form.submit((values) => {
@@ -26,22 +26,15 @@ function Form({ form, className, style, children, onSubmit, onAutoSubmit, itemPr
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_context.Provider, {
 		value: react.default.useMemo(() => {
 			return {
-				itemProps,
-				objectContainerProps,
-				density,
+				layout,
 				settings
 			};
-		}, [
-			itemProps,
-			objectContainerProps,
-			density,
-			settings
-		]),
+		}, [layout, settings]),
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__formily_react.FormProvider, {
 			form,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_form_items_container.FormItemContainer, {
 				as: "form",
-				className: (0, __pixpilot_shadcn.cn)("space-y-6", className),
+				className: (0, __pixpilot_shadcn.cn)(className),
 				style,
 				onSubmit: handleSubmit,
 				children

package/dist/components/form.d.cts

@@ -23,9 +23,7 @@ declare function Form$1({
   children,
   onSubmit,
   onAutoSubmit,
-  itemProps,
-  objectContainerProps,
-  density,
+  layout,
   settings
 }: IFormProps): react_jsx_runtime0.JSX.Element;
 //#endregion

package/dist/components/form.d.ts

@@ -23,9 +23,7 @@ declare function Form$1({
   children,
   onSubmit,
   onAutoSubmit,
-  itemProps,
-  objectContainerProps,
-  density,
+  layout,
   settings
 }: IFormProps): react_jsx_runtime0.JSX.Element;
 //#endregion

package/dist/components/form.js

@@ -10,7 +10,7 @@ import { cn } from "@pixpilot/shadcn";
 /**
 * Form component - wraps FormProvider and provides form context
 */
-function Form({ form, className, style, children, onSubmit, onAutoSubmit, itemProps, objectContainerProps, density, settings }) {
+function Form({ form, className, style, children, onSubmit, onAutoSubmit, layout, settings }) {
 	const handleSubmit = (e) => {
 		e.preventDefault();
 		form.submit((values) => {
@@ -21,22 +21,15 @@ function Form({ form, className, style, children, onSubmit, onAutoSubmit, itemPr
 	return /* @__PURE__ */ jsx(Provider, {
 		value: React.useMemo(() => {
 			return {
-				itemProps,
-				objectContainerProps,
-				density,
+				layout,
 				settings
 			};
-		}, [
-			itemProps,
-			objectContainerProps,
-			density,
-			settings
-		]),
+		}, [layout, settings]),
 		children: /* @__PURE__ */ jsx(FormProvider, {
 			form,
 			children: /* @__PURE__ */ jsx(FormItemContainer, {
 				as: "form",
-				className: cn("space-y-6", className),
+				className: cn(className),
 				style,
 				onSubmit: handleSubmit,
 				children

package/dist/components/icon-picker.d.ts

@@ -1,4 +1,4 @@
-import * as react4 from "react";
+import * as react3 from "react";
 import { IconPickerProps, IconProviderProps } from "@pixpilot/shadcn-ui";
 
 //#region src/components/icon-picker.d.ts
@@ -8,8 +8,8 @@ import { IconPickerProps, IconProviderProps } from "@pixpilot/shadcn-ui";
  * Automatically connects to Formily field state
  * Supports both static and async icon providers
  */
-declare const IconPicker$1: react4.ForwardRefExoticComponent<Partial<Omit<IconPickerProps, "providers"> & {
+declare const IconPicker$1: react3.ForwardRefExoticComponent<Partial<Omit<IconPickerProps, "providers"> & {
   providers?: IconProviderProps[];
-}> & react4.RefAttributes<unknown>>;
+}> & react3.RefAttributes<unknown>>;
 //#endregion
 export { IconPicker$1 as IconPicker };

package/dist/components/input.d.cts

@@ -1,4 +1,4 @@
-import * as react10 from "react";
+import * as react6 from "react";
 
 //#region src/components/input.d.ts
 
@@ -6,6 +6,6 @@ import * as react10 from "react";
  * Formily-connected Input component
  * Automatically connects shadcn Input to Formily field state
  */
-declare const Input: react10.ForwardRefExoticComponent<Omit<Partial<react10.ClassAttributes<HTMLInputElement> & react10.InputHTMLAttributes<HTMLInputElement>>, "ref"> & react10.RefAttributes<unknown>>;
+declare const Input: react6.ForwardRefExoticComponent<Omit<Partial<react6.ClassAttributes<HTMLInputElement> & react6.InputHTMLAttributes<HTMLInputElement>>, "ref"> & react6.RefAttributes<unknown>>;
 //#endregion
 export { Input };

package/dist/components/input.d.ts

@@ -1,4 +1,4 @@
-import * as react10 from "react";
+import * as react8 from "react";
 
 //#region src/components/input.d.ts
 
@@ -6,6 +6,6 @@ import * as react10 from "react";
  * Formily-connected Input component
  * Automatically connects shadcn Input to Formily field state
  */
-declare const Input: react10.ForwardRefExoticComponent<Omit<Partial<react10.ClassAttributes<HTMLInputElement> & react10.InputHTMLAttributes<HTMLInputElement>>, "ref"> & react10.RefAttributes<unknown>>;
+declare const Input: react8.ForwardRefExoticComponent<Omit<Partial<react8.ClassAttributes<HTMLInputElement> & react8.InputHTMLAttributes<HTMLInputElement>>, "ref"> & react8.RefAttributes<unknown>>;
 //#endregion
 export { Input };

package/dist/components/json-schema-form-renderer/index.cjs

@@ -0,0 +1,4 @@
+const require_json_schema_form_renderer = require('./json-schema-form-renderer.cjs');
+const require_json_schema_form = require('./json-schema-form.cjs');
+const require_json_schema_form_basic = require('./json-schema-form-basic.cjs');
+const require_json_schema_form_extended = require('./json-schema-form-extended.cjs');

package/dist/components/json-schema-form-renderer/index.d.cts

@@ -0,0 +1,5 @@
+import { JsonSchemaFormComponent, JsonSchemaFormComponents, JsonSchemaFormProps, JsonSchemaFormRendererProps } from "./types.cjs";
+import { JsonSchemaForm } from "./json-schema-form.cjs";
+import { JsonSchemaFormBasic } from "./json-schema-form-basic.cjs";
+import { JsonSchemaFormExtended } from "./json-schema-form-extended.cjs";
+import { JsonSchemaFormRenderer } from "./json-schema-form-renderer.cjs";

package/dist/components/json-schema-form-renderer/index.d.ts

@@ -0,0 +1,5 @@
+import { JsonSchemaFormComponent, JsonSchemaFormComponents, JsonSchemaFormProps, JsonSchemaFormRendererProps } from "./types.js";
+import { JsonSchemaForm } from "./json-schema-form.js";
+import { JsonSchemaFormBasic } from "./json-schema-form-basic.js";
+import { JsonSchemaFormExtended } from "./json-schema-form-extended.js";
+import { JsonSchemaFormRenderer } from "./json-schema-form-renderer.js";

package/dist/components/json-schema-form-renderer/index.js

@@ -0,0 +1,4 @@
+import { JsonSchemaFormRenderer } from "./json-schema-form-renderer.js";
+import { JsonSchemaForm } from "./json-schema-form.js";
+import { JsonSchemaFormBasic } from "./json-schema-form-basic.js";
+import { JsonSchemaFormExtended } from "./json-schema-form-extended.js";

package/dist/components/json-schema-form-renderer/json-schema-form-basic.cjs

@@ -0,0 +1,35 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_schema_field_basics = require('../schema-field/schema-field-basics.cjs');
+const require_json_schema_form_renderer = require('./json-schema-form-renderer.cjs');
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
+
+//#region src/components/json-schema-form-renderer/json-schema-form-basic.tsx
+/**
+* JsonSchemaFormBasic is the basic version that provides only the essential components
+* from the basicComponentRegistry (Input, Checkbox, Select, etc.).
+*
+* User-provided components are merged with basics, with user components taking precedence.
+*/
+const JsonSchemaFormBasic = (props) => {
+	const { components,...rest } = props;
+	const mergedComponents = react.default.useMemo(() => {
+		return {
+			fields: {
+				...require_schema_field_basics.basicComponentRegistry,
+				...components?.fields || {}
+			},
+			decorators: components?.decorators
+		};
+	}, [components?.decorators, components?.fields]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_json_schema_form_renderer.JsonSchemaFormRenderer, {
+		...rest,
+		components: mergedComponents
+	});
+};
+JsonSchemaFormBasic.displayName = "JsonSchemaFormBasic";
+
+//#endregion
+exports.JsonSchemaFormBasic = JsonSchemaFormBasic;

package/dist/components/json-schema-form-renderer/json-schema-form-basic.d.cts

@@ -0,0 +1,14 @@
+import { JsonSchemaFormProps } from "./types.cjs";
+import React from "react";
+
+//#region src/components/json-schema-form-renderer/json-schema-form-basic.d.ts
+
+/**
+ * JsonSchemaFormBasic is the basic version that provides only the essential components
+ * from the basicComponentRegistry (Input, Checkbox, Select, etc.).
+ *
+ * User-provided components are merged with basics, with user components taking precedence.
+ */
+declare const JsonSchemaFormBasic: React.FC<JsonSchemaFormProps>;
+//#endregion
+export { JsonSchemaFormBasic };

package/dist/components/json-schema-form-renderer/json-schema-form-basic.d.ts

@@ -0,0 +1,14 @@
+import { JsonSchemaFormProps } from "./types.js";
+import React from "react";
+
+//#region src/components/json-schema-form-renderer/json-schema-form-basic.d.ts
+
+/**
+ * JsonSchemaFormBasic is the basic version that provides only the essential components
+ * from the basicComponentRegistry (Input, Checkbox, Select, etc.).
+ *
+ * User-provided components are merged with basics, with user components taking precedence.
+ */
+declare const JsonSchemaFormBasic: React.FC<JsonSchemaFormProps>;
+//#endregion
+export { JsonSchemaFormBasic };

package/dist/components/json-schema-form-renderer/json-schema-form-basic.js

@@ -0,0 +1,32 @@
+import { basicComponentRegistry } from "../schema-field/schema-field-basics.js";
+import { JsonSchemaFormRenderer } from "./json-schema-form-renderer.js";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/json-schema-form-renderer/json-schema-form-basic.tsx
+/**
+* JsonSchemaFormBasic is the basic version that provides only the essential components
+* from the basicComponentRegistry (Input, Checkbox, Select, etc.).
+*
+* User-provided components are merged with basics, with user components taking precedence.
+*/
+const JsonSchemaFormBasic = (props) => {
+	const { components,...rest } = props;
+	const mergedComponents = React.useMemo(() => {
+		return {
+			fields: {
+				...basicComponentRegistry,
+				...components?.fields || {}
+			},
+			decorators: components?.decorators
+		};
+	}, [components?.decorators, components?.fields]);
+	return /* @__PURE__ */ jsx(JsonSchemaFormRenderer, {
+		...rest,
+		components: mergedComponents
+	});
+};
+JsonSchemaFormBasic.displayName = "JsonSchemaFormBasic";
+
+//#endregion
+export { JsonSchemaFormBasic };