@pixpilot/formily-shadcn 0.9.1 → 0.11.0

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

@@ -0,0 +1,23 @@
+import { Form } from "../form.js";
+import { ISchema } from "@formily/react";
+
+//#region src/components/json-schema-form-renderer/types.d.ts
+interface JsonSchemaFormComponent {
+  component: React.ComponentType<any>;
+  decorator?: string;
+}
+interface JsonSchemaFormComponents {
+  fields?: Record<string, JsonSchemaFormComponent>;
+  decorators?: Record<string, React.ComponentType<any>>;
+}
+interface JsonSchemaFormRendererProps extends Omit<React.ComponentProps<typeof Form>, 'form'> {
+  schema: ISchema;
+  children?: React.ReactNode;
+  values?: Record<string, any>;
+  components: Partial<JsonSchemaFormComponents>;
+}
+interface JsonSchemaFormProps extends Omit<JsonSchemaFormRendererProps, 'components'> {
+  components?: JsonSchemaFormComponents;
+}
+//#endregion
+export { JsonSchemaFormComponent, JsonSchemaFormComponents, JsonSchemaFormProps, JsonSchemaFormRendererProps };

package/dist/components/number-input.d.cts

@@ -1,9 +1,9 @@
-import * as react10 from "react";
+import * as react6 from "react";
 
 //#region src/components/number-input.d.ts
 /**
  * Formily-connected Number Input component
  */
-declare const NumberInput: react10.ForwardRefExoticComponent<Omit<Partial<react10.ClassAttributes<HTMLInputElement> & react10.InputHTMLAttributes<HTMLInputElement>>, "ref"> & react10.RefAttributes<unknown>>;
+declare const NumberInput: react6.ForwardRefExoticComponent<Omit<Partial<react6.ClassAttributes<HTMLInputElement> & react6.InputHTMLAttributes<HTMLInputElement>>, "ref"> & react6.RefAttributes<unknown>>;
 //#endregion
 export { NumberInput };

package/dist/components/number-input.d.ts

@@ -1,9 +1,9 @@
-import * as react14 from "react";
+import * as react10 from "react";
 
 //#region src/components/number-input.d.ts
 /**
  * Formily-connected Number Input component
  */
-declare const NumberInput: react14.ForwardRefExoticComponent<Omit<Partial<react14.ClassAttributes<HTMLInputElement> & react14.InputHTMLAttributes<HTMLInputElement>>, "ref"> & react14.RefAttributes<unknown>>;
+declare const NumberInput: react10.ForwardRefExoticComponent<Omit<Partial<react10.ClassAttributes<HTMLInputElement> & react10.InputHTMLAttributes<HTMLInputElement>>, "ref"> & react10.RefAttributes<unknown>>;
 //#endregion
 export { NumberInput };

package/dist/components/object-container.cjs

@@ -11,21 +11,54 @@ let __pixpilot_shadcn = require("@pixpilot/shadcn");
 __pixpilot_shadcn = require_rolldown_runtime.__toESM(__pixpilot_shadcn);
 
 //#region src/components/object-container.tsx
+/**
+* Header gap spacing configuration
+* Uses smaller gaps since headers have less content
+*/
+const headerConfig = {
+	fixed: {
+		sm: "gap-1.5 text-lg",
+		md: "gap-2 text-xl",
+		lg: "gap-2.5 text-2xl"
+	},
+	responsive: "gap-1.5 text-lg md:gap-2 md:text-xl lg:gap-2.5 lg:text-2xl"
+};
+/**
+* Card padding spacing configuration
+* Controls vertical padding of the Card component
+*/
+const cardPaddingConfig = {
+	fixed: {
+		sm: "py-5",
+		md: "py-6",
+		lg: "py-7"
+	},
+	responsive: "py-5 md:py-6 lg:py-7"
+};
 const ObjectContainer = ({ className, children, label, description,...rest }) => {
 	const effectiveLabel = require_use_label.useLabel(label);
 	const desc = require_use_description.useDescription(description);
-	const { objectContainerProps, density, responsive } = require_use_form_context.useFormContext();
-	const gapClass = require_resolve_responsive_space.resolveResponsiveGapClass({
-		density,
-		responsive
-	});
-	const { className: itemsContainerClassName } = objectContainerProps || {};
+	const { layout } = require_use_form_context.useFormContext();
+	const { objectContainer, density } = layout || {};
+	const gapClass = require_resolve_responsive_space.resolveResponsiveGapClass({ density });
+	const headerGapClass = require_resolve_responsive_space.resolveSpacingClass(density, headerConfig);
+	const cardPaddingClass = require_resolve_responsive_space.resolveSpacingClass(density, cardPaddingConfig);
+	const { classes } = objectContainer || {};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.Card, {
 		...rest,
-		className: (0, __pixpilot_shadcn.cn)("bg-transparent", gapClass, className),
-		children: [(effectiveLabel != null || desc != null) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.CardHeader, { children: [effectiveLabel != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.CardTitle, { children: effectiveLabel }), desc != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.CardDescription, { children: desc })] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_form_items_container.FormItemContainer, {
+		className: (0, __pixpilot_shadcn.cn)("bg-transparent", gapClass, cardPaddingClass, className, classes?.card),
+		children: [(effectiveLabel != null || desc != null) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.CardHeader, {
+			className: (0, __pixpilot_shadcn.cn)(headerGapClass, classes?.header),
+			children: [effectiveLabel != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.CardTitle, {
+				className: classes?.title,
+				children: effectiveLabel
+			}), desc != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.CardDescription, {
+				className: classes?.description,
+				children: desc
+			})]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_form_items_container.FormItemContainer, {
 			as: __pixpilot_shadcn.CardContent,
-			className: itemsContainerClassName,
+			className: classes?.content,
 			children
 		})]
 	});

package/dist/components/object-container.js

@@ -1,4 +1,4 @@
-import { resolveResponsiveGapClass } from "../utils/resolve-responsive-space.js";
+import { resolveResponsiveGapClass, resolveSpacingClass } from "../utils/resolve-responsive-space.js";
 import { useDescription } from "../hooks/use-description.js";
 import { useFormContext } from "../hooks/use-form-context.js";
 import { useLabel } from "../hooks/use-label.js";
@@ -8,21 +8,54 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle, cn } from "@pixpilot/shadcn";
 
 //#region src/components/object-container.tsx
+/**
+* Header gap spacing configuration
+* Uses smaller gaps since headers have less content
+*/
+const headerConfig = {
+	fixed: {
+		sm: "gap-1.5 text-lg",
+		md: "gap-2 text-xl",
+		lg: "gap-2.5 text-2xl"
+	},
+	responsive: "gap-1.5 text-lg md:gap-2 md:text-xl lg:gap-2.5 lg:text-2xl"
+};
+/**
+* Card padding spacing configuration
+* Controls vertical padding of the Card component
+*/
+const cardPaddingConfig = {
+	fixed: {
+		sm: "py-5",
+		md: "py-6",
+		lg: "py-7"
+	},
+	responsive: "py-5 md:py-6 lg:py-7"
+};
 const ObjectContainer = ({ className, children, label, description,...rest }) => {
 	const effectiveLabel = useLabel(label);
 	const desc = useDescription(description);
-	const { objectContainerProps, density, responsive } = useFormContext();
-	const gapClass = resolveResponsiveGapClass({
-		density,
-		responsive
-	});
-	const { className: itemsContainerClassName } = objectContainerProps || {};
+	const { layout } = useFormContext();
+	const { objectContainer, density } = layout || {};
+	const gapClass = resolveResponsiveGapClass({ density });
+	const headerGapClass = resolveSpacingClass(density, headerConfig);
+	const cardPaddingClass = resolveSpacingClass(density, cardPaddingConfig);
+	const { classes } = objectContainer || {};
 	return /* @__PURE__ */ jsxs(Card, {
 		...rest,
-		className: cn("bg-transparent", gapClass, className),
-		children: [(effectiveLabel != null || desc != null) && /* @__PURE__ */ jsxs(CardHeader, { children: [effectiveLabel != null && /* @__PURE__ */ jsx(CardTitle, { children: effectiveLabel }), desc != null && /* @__PURE__ */ jsx(CardDescription, { children: desc })] }), /* @__PURE__ */ jsx(FormItemContainer, {
+		className: cn("bg-transparent", gapClass, cardPaddingClass, className, classes?.card),
+		children: [(effectiveLabel != null || desc != null) && /* @__PURE__ */ jsxs(CardHeader, {
+			className: cn(headerGapClass, classes?.header),
+			children: [effectiveLabel != null && /* @__PURE__ */ jsx(CardTitle, {
+				className: classes?.title,
+				children: effectiveLabel
+			}), desc != null && /* @__PURE__ */ jsx(CardDescription, {
+				className: classes?.description,
+				children: desc
+			})]
+		}), /* @__PURE__ */ jsx(FormItemContainer, {
 			as: CardContent,
-			className: itemsContainerClassName,
+			className: classes?.content,
 			children
 		})]
 	});

package/dist/components/radio.d.cts

@@ -1,5 +1,5 @@
 import { FC } from "react";
-import * as react_jsx_runtime2 from "react/jsx-runtime";
+import * as react_jsx_runtime3 from "react/jsx-runtime";
 import { RadioGroup } from "@pixpilot/shadcn";
 
 //#region src/components/radio.d.ts
@@ -15,7 +15,7 @@ type RadioProps = {
 /**
  * Radio component with options rendering
  */
-declare function Radio(props: RadioProps): react_jsx_runtime2.JSX.Element;
+declare function Radio(props: RadioProps): react_jsx_runtime3.JSX.Element;
 declare namespace Radio {
   var displayName: string;
 }

package/dist/components/radio.d.ts

@@ -1,5 +1,5 @@
 import { FC } from "react";
-import * as react_jsx_runtime3 from "react/jsx-runtime";
+import * as react_jsx_runtime2 from "react/jsx-runtime";
 import { RadioGroup } from "@pixpilot/shadcn";
 
 //#region src/components/radio.d.ts
@@ -15,7 +15,7 @@ type RadioProps = {
 /**
  * Radio component with options rendering
  */
-declare function Radio(props: RadioProps): react_jsx_runtime3.JSX.Element;
+declare function Radio(props: RadioProps): react_jsx_runtime2.JSX.Element;
 declare namespace Radio {
   var displayName: string;
 }

package/dist/components/rich-text-editor.cjs

@@ -11,7 +11,7 @@ react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
 //#region src/components/rich-text-editor.tsx
 const RichTextEditorBase = (props) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn_ui.RichTextEditor, {
-		...require_use_form_context.useFormContext()?.config?.richTextEditor,
+		...require_use_form_context.useFormContext()?.settings?.richTextEditor,
 		...props,
 		children: "RichTextEditor"
 	});

package/dist/components/rich-text-editor.js

@@ -7,7 +7,7 @@ import { jsx } from "react/jsx-runtime";
 //#region src/components/rich-text-editor.tsx
 const RichTextEditorBase = (props) => {
 	return /* @__PURE__ */ jsx(RichTextEditor, {
-		...useFormContext()?.config?.richTextEditor,
+		...useFormContext()?.settings?.richTextEditor,
 		...props,
 		children: "RichTextEditor"
 	});

package/dist/components/row.d.cts

@@ -1,5 +1,5 @@
 import React from "react";
-import * as react_jsx_runtime3 from "react/jsx-runtime";
+import * as react_jsx_runtime2 from "react/jsx-runtime";
 
 //#region src/components/row.d.ts
 interface IRowProps {
@@ -36,6 +36,6 @@ interface IRowProps {
 declare function Row({
   className,
   children
-}: IRowProps): react_jsx_runtime3.JSX.Element;
+}: IRowProps): react_jsx_runtime2.JSX.Element;
 //#endregion
 export { Row };

package/dist/components/row.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import * as react_jsx_runtime1 from "react/jsx-runtime";
+import * as react_jsx_runtime3 from "react/jsx-runtime";
 
 //#region src/components/row.d.ts
 interface IRowProps {
@@ -36,6 +36,6 @@ interface IRowProps {
 declare function Row({
   className,
   children
-}: IRowProps): react_jsx_runtime1.JSX.Element;
+}: IRowProps): react_jsx_runtime3.JSX.Element;
 //#endregion
 export { Row };

package/dist/components/schema-field/index.d.cts

@@ -1,3 +1,3 @@
-import { SchemaField, schemaFieldComponents } from "./schema-field.cjs";
-import { SchemaFieldBasicComponents, SchemaFieldBasics } from "./schema-field-basics.cjs";
-import { SchemaFieldExtended, schemaFieldExtendedComponents } from "./schema-field-extended.cjs";
+import { SchemaField, defaultComponentRegistry, defaultComponents } from "./schema-field.cjs";
+import { SchemaFieldBasics, basicComponentRegistry, basicComponents } from "./schema-field-basics.cjs";
+import { SchemaFieldExtended, extendedComponentRegistry, extendedComponents } from "./schema-field-extended.cjs";

package/dist/components/schema-field/index.d.ts

@@ -1,3 +1,3 @@
-import { SchemaField, schemaFieldComponents } from "./schema-field.js";
-import { SchemaFieldBasicComponents, SchemaFieldBasics } from "./schema-field-basics.js";
-import { SchemaFieldExtended, schemaFieldExtendedComponents } from "./schema-field-extended.js";
+import { SchemaField, defaultComponentRegistry, defaultComponents } from "./schema-field.js";
+import { SchemaFieldBasics, basicComponentRegistry, basicComponents } from "./schema-field-basics.js";
+import { SchemaFieldExtended, extendedComponentRegistry, extendedComponents } from "./schema-field-extended.js";

package/dist/components/schema-field/index.js

@@ -1,3 +1,3 @@
-import { SchemaFieldBasicComponents, SchemaFieldBasics } from "./schema-field-basics.js";
-import { SchemaField, schemaFieldComponents } from "./schema-field.js";
-import { SchemaFieldExtended, schemaFieldExtendedComponents } from "./schema-field-extended.js";
+import { SchemaFieldBasics, basicComponentRegistry, basicComponents } from "./schema-field-basics.js";
+import { SchemaField, defaultComponentRegistry, defaultComponents } from "./schema-field.js";
+import { SchemaFieldExtended, extendedComponentRegistry, extendedComponents } from "./schema-field-extended.js";

package/dist/components/schema-field/schema-field-basics.cjs

@@ -7,8 +7,10 @@ const require_checkbox = require('../checkbox.cjs');
 const require_column = require('../column.cjs');
 const require_date_picker = require('../date-picker.cjs');
 const require_form_grid = require('../form-grid.cjs');
-const require_form_item = require('../form-item.cjs');
+const require_connected_form_item = require('../form-item/connected-form-item.cjs');
+require('../form-item/index.cjs');
 const require_input = require('../input.cjs');
+const require_extract_components = require('../../utils/extract-components.cjs');
 const require_array_dialog = require('../array-dialog/array-dialog.cjs');
 require('../array-dialog/index.cjs');
 const require_array_popover = require('../array-popover/array-popover.cjs');
@@ -26,29 +28,70 @@ let __formily_react = require("@formily/react");
 __formily_react = require_rolldown_runtime.__toESM(__formily_react);
 
 //#region src/components/schema-field/schema-field-basics.tsx
-const SchemaFieldBasicComponents = {
-	FormItem: require_form_item.FormItem,
-	Hidden: require_hidden.Hidden,
-	Input: require_input.Input,
-	Textarea: require_textarea.Textarea,
-	NumberInput: require_number_input.NumberInput,
-	Checkbox: require_checkbox.Checkbox,
-	Radio: require_radio.ConnectedRadio,
-	Select: require_select.Select,
-	Switch: require_switch.Switch,
-	DatePicker: require_date_picker.DatePicker,
-	Row: require_row.Row,
-	Column: require_column.Column,
-	FormGrid: require_form_grid.FormGrid,
-	Separator: require_separator.Separator,
-	ArrayCards: require_array_cards.ArrayCards,
-	ArrayDialog: require_array_dialog.ArrayDialog,
-	ArrayCollapse: require_array_collapse.ArrayCollapse,
-	ArrayPopover: require_array_popover.ArrayPopover,
-	ObjectContainer: require_object_container.ObjectContainer
+const basicComponentRegistry = {
+	FormItem: { component: require_connected_form_item.FormItem },
+	Hidden: { component: require_hidden.Hidden },
+	Input: {
+		component: require_input.Input,
+		decorator: "FormItem"
+	},
+	Textarea: {
+		component: require_textarea.Textarea,
+		decorator: "FormItem"
+	},
+	NumberInput: {
+		component: require_number_input.NumberInput,
+		decorator: "FormItem"
+	},
+	Checkbox: {
+		component: require_checkbox.Checkbox,
+		decorator: "FormItem"
+	},
+	Radio: {
+		component: require_radio.ConnectedRadio,
+		decorator: "FormItem"
+	},
+	Select: {
+		component: require_select.Select,
+		decorator: "FormItem"
+	},
+	Switch: {
+		component: require_switch.Switch,
+		decorator: "FormItem"
+	},
+	DatePicker: {
+		component: require_date_picker.DatePicker,
+		decorator: "FormItem"
+	},
+	Row: { component: require_row.Row },
+	Column: { component: require_column.Column },
+	FormGrid: { component: require_form_grid.FormGrid },
+	Separator: { component: require_separator.Separator },
+	ArrayCards: {
+		component: require_array_cards.ArrayCards,
+		decorator: "FormItem"
+	},
+	ArrayDialog: {
+		component: require_array_dialog.ArrayDialog,
+		decorator: "FormItem"
+	},
+	ArrayCollapse: {
+		component: require_array_collapse.ArrayCollapse,
+		decorator: "FormItem"
+	},
+	ArrayPopover: {
+		component: require_array_popover.ArrayPopover,
+		decorator: "FormItem"
+	},
+	ObjectContainer: {
+		component: require_object_container.ObjectContainer,
+		decorator: "FormItem"
+	}
 };
-const SchemaFieldBasics = (0, __formily_react.createSchemaField)({ components: SchemaFieldBasicComponents });
+const basicComponents = require_extract_components.extractComponents(basicComponentRegistry);
+const SchemaFieldBasics = (0, __formily_react.createSchemaField)({ components: basicComponents });
 
 //#endregion
-exports.SchemaFieldBasicComponents = SchemaFieldBasicComponents;
-exports.SchemaFieldBasics = SchemaFieldBasics;
+exports.SchemaFieldBasics = SchemaFieldBasics;
+exports.basicComponentRegistry = basicComponentRegistry;
+exports.basicComponents = basicComponents;