@bysages/solid 0.4.0 → 0.4.2

package/dist/components/editable/index.mjs

@@ -1,8 +1,9 @@
 import { t as defineFamily } from "../../family-Cmd8HEyK.mjs";
+import { r as iconNode } from "../../icon-DTqmJCd5.mjs";
 import { t as useElementId } from "../../id-2ygNzPHF.mjs";
-import { injectComponentStyle } from "@bysages/core";
 import { createComponent, mergeProps } from "@solidjs/web";
-import { splitProps } from "solid-js";
+import { injectComponentStyle } from "@bysages/core/styling";
+import { Show, splitProps } from "solid-js";
 import { Editable as Editable$1 } from "@ark-ui/solid/editable";
 //#region src/components/editable/index.tsx
 function EditableRoot(props) {
@@ -17,7 +18,84 @@ function EditableRoot(props) {
 		}
 	}));
 }
-const Editable = defineFamily(EditableRoot, {
+/** The one-tag path: a named value with the house edit controls. Modes,
+* custom triggers, and alternate editors stay on the anatomy. */
+function EditableFacade(props) {
+	injectComponentStyle("editable");
+	return createComponent(EditableRoot, mergeProps({
+		get size() {
+			return props.size ?? "md";
+		},
+		get disabled() {
+			return props.disabled;
+		},
+		get invalid() {
+			return props.invalid;
+		},
+		get required() {
+			return props.required;
+		},
+		get placeholder() {
+			return props.placeholder;
+		},
+		get defaultValue() {
+			return props.defaultValue;
+		}
+	}, () => {
+		return props.value === void 0 ? {} : { value: props.value };
+	}, {
+		onValueChange: (details) => props.onValueChange?.(details.value),
+		get children() {
+			return [
+				createComponent(Show, {
+					get when() {
+						return props.label;
+					},
+					get children() {
+						return createComponent(Editable$1.Label, { get children() {
+							return props.label;
+						} });
+					}
+				}),
+				createComponent(Editable$1.Area, { get children() {
+					return [createComponent(Editable$1.Preview, {}), createComponent(Editable$1.Input, {})];
+				} }),
+				createComponent(Editable$1.Control, { get children() {
+					return [
+						createComponent(Editable$1.EditTrigger, {
+							"aria-label": "Edit",
+							get children() {
+								return iconNode("pencil", {
+									width: 14,
+									height: 14
+								});
+							}
+						}),
+						createComponent(Editable$1.SubmitTrigger, {
+							"aria-label": "Submit",
+							get children() {
+								return iconNode("check", {
+									width: 14,
+									height: 14
+								});
+							}
+						}),
+						createComponent(Editable$1.CancelTrigger, {
+							"aria-label": "Cancel",
+							get children() {
+								return iconNode("x", {
+									width: 14,
+									height: 14
+								});
+							}
+						})
+					];
+				} })
+			];
+		}
+	}));
+}
+const Editable = defineFamily(EditableFacade, {
 	...Editable$1,
 	Root: EditableRoot
 });

package/dist/components/ellipsis/index.mjs

@@ -1,6 +1,6 @@
 import { n as withSelfRoot } from "../../family-Cmd8HEyK.mjs";
-import { injectComponentStyle } from "@bysages/core";
 import { spread, template } from "@solidjs/web";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { splitProps } from "solid-js";
 //#region src/components/ellipsis/index.tsx
 var _tmpl$ = /* @__PURE__ */ template(`<span>`);

package/dist/components/empty/index.mjs

@@ -1,5 +1,5 @@
-import { injectComponentStyle } from "@bysages/core";
 import { createComponent, mergeProps } from "@solidjs/web";
+import { injectComponentStyle } from "@bysages/core/styling";
 //#region src/components/empty/index.tsx
 /** An empty state: the page holds its breath. Root centers the column,
 * Visual carries the mark, Title and Description carry the ink, Actions

package/dist/components/field/index.d.mts

@@ -6,7 +6,22 @@ import { Field as Field$1 } from "@ark-ui/solid/field";
  * Root, Label, Input, Textarea, Select, HelperText, ErrorText,
  * RequiredIndicator. */
 declare function FieldRoot(props: ComponentProps<typeof Field$1.Root>): import("solid-js").JSX.Element;
-export declare const Field: typeof FieldRoot & Omit<typeof Field$1, "Root"> & {
+/** The one-tag path for a simple text field; textarea, select, and
+ * custom controls keep the anatomy. */
+export interface FieldFacadeProps {
+  value?: string | number;
+  defaultValue?: string | number;
+  label?: string;
+  description?: string;
+  placeholder?: string;
+  disabled?: boolean;
+  invalid?: boolean;
+  required?: boolean;
+  onValueChange?: (value: string) => void;
+}
+declare function FieldFacade(props: FieldFacadeProps): import("solid-js").JSX.Element;
+type FieldParts = Omit<typeof Field$1, "Root"> & {
   Root: typeof FieldRoot;
 };
+export declare const Field: typeof FieldFacade & FieldParts;
 //#endregion

package/dist/components/field/index.mjs

@@ -1,20 +1,68 @@
 import { t as defineFamily } from "../../family-Cmd8HEyK.mjs";
 import { t as useElementId } from "../../id-2ygNzPHF.mjs";
-import { injectComponentStyle } from "@bysages/core";
-import { createComponent, mergeProps } from "solid-js";
+import { createComponent } from "@solidjs/web";
+import { injectComponentStyle } from "@bysages/core/styling";
+import { Show, createComponent as createComponent$1, mergeProps as mergeProps$1 } from "solid-js";
 import { Field as Field$1 } from "@ark-ui/solid/field";
-//#region src/components/field/index.ts
+//#region src/components/field/index.tsx
 /** Ark's Field, dressed in the paper-and-ink system: a tracked label, a
 * border-and-halo control, and quiet help text. The API is Ark's own —
 * Root, Label, Input, Textarea, Select, HelperText, ErrorText,
 * RequiredIndicator. */
 function FieldRoot(props) {
 	const id = useElementId("field", () => props.id);
-	return createComponent(Field$1.Root, mergeProps(props, { get id() {
+	return createComponent$1(Field$1.Root, mergeProps$1(props, { get id() {
 		return id();
 	} }));
 }
-const Field = defineFamily(FieldRoot, {
+function FieldFacade(props) {
+	injectComponentStyle("field");
+	return createComponent(FieldRoot, {
+		get disabled() {
+			return props.disabled;
+		},
+		get invalid() {
+			return props.invalid;
+		},
+		get required() {
+			return props.required;
+		},
+		get children() {
+			return [
+				createComponent(Show, {
+					get when() {
+						return props.label;
+					},
+					get children() {
+						return createComponent(Field$1.Label, { get children() {
+							return props.label;
+						} });
+					}
+				}),
+				createComponent(Field$1.Input, {
+					get placeholder() {
+						return props.placeholder;
+					},
+					get value() {
+						return props.value ?? props.defaultValue;
+					},
+					onInput: (event) => props.onValueChange?.(event.currentTarget.value)
+				}),
+				createComponent(Show, {
+					get when() {
+						return props.description;
+					},
+					get children() {
+						return createComponent(Field$1.HelperText, { get children() {
+							return props.description;
+						} });
+					}
+				})
+			];
+		}
+	});
+}
+const Field = defineFamily(FieldFacade, {
 	...Field$1,
 	Root: FieldRoot
 });

package/dist/components/fieldset/index.d.mts

@@ -1,11 +1,23 @@
-import { ComponentProps } from "solid-js";
+import { ComponentProps, JSX } from "solid-js";
 import { Fieldset as Fieldset$1 } from "@ark-ui/solid/fieldset";
 //#region src/components/fieldset/index.d.ts
 /** Ark's Fieldset, dressed in the paper-and-ink system: a song-serif
  * legend heading a column of fields. The API is Ark's own — Root, Legend,
  * HelperText, ErrorText. */
-declare function FieldsetRoot(props: ComponentProps<typeof Fieldset$1.Root>): import("solid-js").JSX.Element;
-export declare const Fieldset: typeof FieldsetRoot & Omit<typeof Fieldset$1, "Root"> & {
+declare function FieldsetRoot(props: ComponentProps<typeof Fieldset$1.Root>): JSX.Element;
+/** The one-tag path: one label and optional description around the
+ * caller's controls; compound or bespoke groups keep the anatomy. */
+export interface FieldsetFacadeProps {
+  label?: string;
+  description?: string;
+  disabled?: boolean;
+  invalid?: boolean;
+  required?: boolean;
+  children?: JSX.Element;
+}
+declare function FieldsetFacade(props: FieldsetFacadeProps): JSX.Element;
+type FieldsetParts = Omit<typeof Fieldset$1, "Root"> & {
   Root: typeof FieldsetRoot;
 };
+export declare const Fieldset: typeof FieldsetFacade & FieldsetParts;
 //#endregion

package/dist/components/fieldset/index.mjs

@@ -1,19 +1,61 @@
 import { t as defineFamily } from "../../family-Cmd8HEyK.mjs";
 import { t as useElementId } from "../../id-2ygNzPHF.mjs";
-import { injectComponentStyle } from "@bysages/core";
-import { createComponent, mergeProps } from "solid-js";
+import { createComponent, memo } from "@solidjs/web";
+import { injectComponentStyle } from "@bysages/core/styling";
+import { Show, createComponent as createComponent$1, mergeProps as mergeProps$1 } from "solid-js";
 import { Fieldset as Fieldset$1 } from "@ark-ui/solid/fieldset";
-//#region src/components/fieldset/index.ts
+//#region src/components/fieldset/index.tsx
 /** Ark's Fieldset, dressed in the paper-and-ink system: a song-serif
 * legend heading a column of fields. The API is Ark's own — Root, Legend,
 * HelperText, ErrorText. */
 function FieldsetRoot(props) {
 	const id = useElementId("fieldset", () => props.id);
-	return createComponent(Fieldset$1.Root, mergeProps(props, { get id() {
+	return createComponent$1(Fieldset$1.Root, mergeProps$1(props, { get id() {
 		return id();
 	} }));
 }
-const Fieldset = defineFamily(FieldsetRoot, {
+function FieldsetFacade(props) {
+	injectComponentStyle("fieldset");
+	return createComponent(FieldsetRoot, {
+		get disabled() {
+			return props.disabled;
+		},
+		get invalid() {
+			return props.invalid;
+		},
+		get "data-required"() {
+			return props.required || void 0;
+		},
+		get children() {
+			return [
+				createComponent(Show, {
+					get when() {
+						return props.label;
+					},
+					get children() {
+						return createComponent(Fieldset$1.Legend, { get children() {
+							return props.label;
+						} });
+					}
+				}),
+				memo(() => {
+					return props.children;
+				}),
+				createComponent(Show, {
+					get when() {
+						return props.description;
+					},
+					get children() {
+						return createComponent(Fieldset$1.HelperText, { get children() {
+							return props.description;
+						} });
+					}
+				})
+			];
+		}
+	});
+}
+const Fieldset = defineFamily(FieldsetFacade, {
 	...Fieldset$1,
 	Root: FieldsetRoot
 });

package/dist/components/file-upload/index.d.mts

@@ -1,5 +1,10 @@
+import { ComponentProps } from "solid-js";
 import { FileUpload as FileUpload$1, FileUploadRootProps } from "@ark-ui/solid/file-upload";
 //#region src/components/file-upload/index.d.ts
+/** The inner trigger repeats the click binding the dropzone already
+ * owns: keyboard users enter through the dropzone, so the button
+ * leaves the tab order and the semantic tree entirely. */
+declare function FileUploadTrigger(props: ComponentProps<typeof FileUpload$1.Trigger>): import("solid-js").JSX.Element;
 /** Ark's FileUpload, dressed in the paper-and-ink system: a dashed
  * dropzone that floods with subtle light on drag-over, and accepted files
  * as loose hairline slips. The API is Ark's own — Root, Label, Trigger,
@@ -11,7 +16,22 @@ type FileUploadOwnProps = {
   size?: "sm" | "md" | "lg";
 };
 declare function FileUploadRoot(props: FileUploadRootProps & FileUploadOwnProps): import("solid-js").JSX.Element;
-export declare const FileUpload: typeof FileUploadRoot & Omit<typeof FileUpload$1, "Root"> & {
+/** The one-tag path: a labelled dropzone and its accepted slips; MIME
+ * rules, directories, and controlled files stay on the anatomy. */
+export interface FileUploadFacadeProps {
+  label?: string;
+  placeholder?: string;
+  disabled?: boolean;
+  invalid?: boolean;
+  required?: boolean;
+  maxFiles?: number;
+  /** One rung of the control-height ladder for the trigger. */
+  size?: "sm" | "md" | "lg";
+}
+declare function FileUploadFacade(props: FileUploadFacadeProps): import("solid-js").JSX.Element;
+type FileUploadParts = Omit<typeof FileUpload$1, "Root" | "Trigger"> & {
   Root: typeof FileUploadRoot;
+  Trigger: typeof FileUploadTrigger;
 };
+export declare const FileUpload: typeof FileUploadFacade & FileUploadParts;
 //#endregion

package/dist/components/file-upload/index.mjs

@@ -1,8 +1,9 @@
 import { t as defineFamily } from "../../family-Cmd8HEyK.mjs";
+import { r as iconNode } from "../../icon-DTqmJCd5.mjs";
 import { t as useElementId } from "../../id-2ygNzPHF.mjs";
-import { injectComponentStyle } from "@bysages/core";
 import { createComponent, mergeProps } from "@solidjs/web";
-import { splitProps } from "solid-js";
+import { injectComponentStyle } from "@bysages/core/styling";
+import { For, Show, splitProps } from "solid-js";
 import { FileUpload as FileUpload$1 } from "@ark-ui/solid/file-upload";
 //#region src/components/file-upload/index.tsx
 /** The inner trigger repeats the click binding the dropzone already
@@ -26,7 +27,69 @@ function FileUploadRoot(props) {
 		}
 	}));
 }
-const FileUpload = defineFamily(FileUploadRoot, {
+function FileUploadFacade(props) {
+	injectComponentStyle("file-upload");
+	return createComponent(FileUploadRoot, {
+		get size() {
+			return props.size ?? "md";
+		},
+		get disabled() {
+			return props.disabled;
+		},
+		get invalid() {
+			return props.invalid;
+		},
+		get required() {
+			return props.required;
+		},
+		get maxFiles() {
+			return props.maxFiles;
+		},
+		get children() {
+			return [
+				createComponent(Show, {
+					get when() {
+						return props.label;
+					},
+					get children() {
+						return createComponent(FileUpload$1.Label, { get children() {
+							return props.label;
+						} });
+					}
+				}),
+				createComponent(FileUpload$1.Dropzone, { get children() {
+					return createComponent(FileUploadTrigger, { get children() {
+						return props.placeholder ?? "Choose files";
+					} });
+				} }),
+				createComponent(FileUpload$1.ItemGroup, { get children() {
+					return createComponent(FileUpload$1.Context, { children: (context) => createComponent(For, {
+						get each() {
+							return context().acceptedFiles;
+						},
+						children: (file) => createComponent(FileUpload$1.Item, {
+							file,
+							get children() {
+								return [
+									createComponent(FileUpload$1.ItemPreview, { get children() {
+										return iconNode("file");
+									} }),
+									createComponent(FileUpload$1.ItemName, {}),
+									createComponent(FileUpload$1.ItemSizeText, {}),
+									createComponent(FileUpload$1.ItemDeleteTrigger, { get children() {
+										return iconNode("x");
+									} })
+								];
+							}
+						})
+					}) });
+				} }),
+				createComponent(FileUpload$1.HiddenInput, {})
+			];
+		}
+	});
+}
+const FileUpload = defineFamily(FileUploadFacade, {
 	...FileUpload$1,
 	Root: FileUploadRoot,
 	Trigger: FileUploadTrigger

package/dist/components/float-button/index.mjs

@@ -1,7 +1,7 @@
 import { Button } from "../button/index.mjs";
 import { n as useComponentMessages } from "../../use-component-messages-C4SCVYjD.mjs";
-import { injectComponentStyle } from "@bysages/core";
 import { createComponent, insert, mergeProps, spread, template } from "@solidjs/web";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { createContext, createSignal, splitProps, useContext } from "solid-js";
 //#region src/components/float-button/index.tsx
 var _tmpl$ = /* @__PURE__ */ template(`<div>`);

package/dist/components/floating-panel/index.d.mts

@@ -1,4 +1,4 @@
-import { ComponentProps } from "solid-js";
+import { ComponentProps, JSX } from "solid-js";
 import { FloatingPanel as FloatingPanel$1 } from "@ark-ui/solid/floating-panel";
 //#region src/components/floating-panel/index.d.ts
 /** Ark's FloatingPanel, dressed in the paper-and-ink system: the shared
@@ -6,8 +6,20 @@ import { FloatingPanel as FloatingPanel$1 } from "@ark-ui/solid/floating-panel";
  * handle. The API is Ark's own — Root, Trigger, Positioner, Content, Header,
  * Title, Control, DragTrigger, StageTrigger, CloseTrigger, ResizeTrigger,
  * Body. */
-declare function FloatingPanelRoot(props: ComponentProps<typeof FloatingPanel$1.Root>): import("solid-js").JSX.Element;
-export declare const FloatingPanel: typeof FloatingPanelRoot & Omit<typeof FloatingPanel$1, "Root"> & {
+declare function FloatingPanelRoot(props: ComponentProps<typeof FloatingPanel$1.Root>): JSX.Element;
+export interface FloatingPanelFacadeProps {
+  open?: boolean;
+  defaultOpen?: boolean;
+  trigger?: string;
+  content?: string;
+  label: string;
+  description?: string;
+  disabled?: boolean;
+  children?: JSX.Element;
+  onOpenChange?: (open: boolean) => void;
+}
+declare function FloatingPanelFacade(props: FloatingPanelFacadeProps): JSX.Element;
+export declare const FloatingPanel: typeof FloatingPanelFacade & Omit<typeof FloatingPanel$1, "Root"> & {
   Root: typeof FloatingPanelRoot;
 };
 //#endregion

package/dist/components/floating-panel/index.mjs

@@ -1,9 +1,12 @@
 import { t as defineFamily } from "../../family-Cmd8HEyK.mjs";
+import { r as iconNode } from "../../icon-DTqmJCd5.mjs";
 import { t as useElementId } from "../../id-2ygNzPHF.mjs";
-import { injectComponentStyle } from "@bysages/core";
-import { createComponent, mergeProps } from "solid-js";
+import { createComponent, insert, memo, mergeProps, template } from "@solidjs/web";
+import { injectComponentStyle } from "@bysages/core/styling";
+import { For, Show, createComponent as createComponent$1, mergeProps as mergeProps$1 } from "solid-js";
 import { FloatingPanel as FloatingPanel$1 } from "@ark-ui/solid/floating-panel";
-//#region src/components/floating-panel/index.ts
+//#region src/components/floating-panel/index.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<p>`);
 /** Ark's FloatingPanel, dressed in the paper-and-ink system: the shared
 * popup vessel let loose — a draggable, resizable sheet whose header is the
 * handle. The API is Ark's own — Root, Trigger, Positioner, Content, Header,
@@ -11,11 +14,116 @@ import { FloatingPanel as FloatingPanel$1 } from "@ark-ui/solid/floating-panel";
 * Body. */
 function FloatingPanelRoot(props) {
 	const id = useElementId("floating-panel", () => props.id);
-	return createComponent(FloatingPanel$1.Root, mergeProps(props, { get id() {
+	return createComponent$1(FloatingPanel$1.Root, mergeProps$1(props, { get id() {
 		return id();
 	} }));
 }
-const FloatingPanel = defineFamily(FloatingPanelRoot, {
+const resizeAxes = [
+	"n",
+	"e",
+	"s",
+	"w",
+	"ne",
+	"se",
+	"sw",
+	"nw"
+];
+function FloatingPanelFacade(props) {
+	injectComponentStyle("floating-panel");
+	return createComponent(FloatingPanelRoot, mergeProps(() => {
+		return props.open === void 0 ? {} : { open: props.open };
+	}, () => {
+		return props.defaultOpen === void 0 ? {} : { defaultOpen: props.defaultOpen };
+	}, {
+		get disabled() {
+			return props.disabled;
+		},
+		onOpenChange: (details) => props.onOpenChange?.(details.open),
+		get children() {
+			return [createComponent(FloatingPanel$1.Trigger, { get children() {
+				return props.trigger ?? props.label;
+			} }), createComponent(FloatingPanel$1.Positioner, { get children() {
+				return createComponent(FloatingPanel$1.Content, { get children() {
+					return [
+						createComponent(FloatingPanel$1.DragTrigger, { get children() {
+							return createComponent(FloatingPanel$1.Header, { get children() {
+								return [createComponent(FloatingPanel$1.Title, { get children() {
+									return props.label;
+								} }), createComponent(FloatingPanel$1.Control, { get children() {
+									return [
+										createComponent(FloatingPanel$1.StageTrigger, {
+											stage: "minimized",
+											get children() {
+												return iconNode("minus");
+											}
+										}),
+										createComponent(FloatingPanel$1.StageTrigger, {
+											stage: "maximized",
+											get children() {
+												return iconNode("maximize-2");
+											}
+										}),
+										createComponent(FloatingPanel$1.StageTrigger, {
+											stage: "default",
+											"aria-label": "Restore",
+											get children() {
+												return iconNode("minimize-2");
+											}
+										}),
+										createComponent(FloatingPanel$1.CloseTrigger, {
+											"aria-label": "Close",
+											get children() {
+												return iconNode("x");
+											}
+										})
+									];
+								} })];
+							} });
+						} }),
+						createComponent(FloatingPanel$1.Body, { get children() {
+							return [
+								createComponent(Show, {
+									get when() {
+										return props.description;
+									},
+									get children() {
+										var _el$ = _tmpl$();
+										insert(_el$, () => {
+											return props.description;
+										});
+										return _el$;
+									}
+								}),
+								createComponent(Show, {
+									get when() {
+										return props.content;
+									},
+									get children() {
+										var _el$2 = _tmpl$();
+										insert(_el$2, () => {
+											return props.content;
+										});
+										return _el$2;
+									}
+								}),
+								memo(() => {
+									return props.children;
+								})
+							];
+						} }),
+						createComponent(For, {
+							get each() {
+								return [...resizeAxes];
+							},
+							children: (axis) => createComponent(FloatingPanel$1.ResizeTrigger, { axis })
+						})
+					];
+				} });
+			} })];
+		}
+	}));
+}
+const FloatingPanel = defineFamily(FloatingPanelFacade, {
 	...FloatingPanel$1,
 	Root: FloatingPanelRoot
 });

package/dist/components/form/index.d.mts

@@ -1,2 +1,44 @@
-import { a as SolidFormApi, c as FormApi, i as FormProps, l as FieldApi, n as FormField, o as createField, r as FormFieldProps, s as createForm, t as Form } from "../../index-B1-quIrl.mjs";
-export { type FieldApi, Form, type FormApi, FormField, FormFieldProps, FormProps, type SolidFormApi, createField, createField as useField, createForm, createForm as useForm };
+import { Component, JSX } from "solid-js";
+import { FieldApi, FormApi, SolidFormApi, createField, createForm } from "@tanstack/solid-form";
+//#region src/components/form/index.d.ts
+/** The seam this family passes the engine through — the members the
+ * components drive, with the engine's field-name generics opened to
+ * `any`. The engine ships no "any form" alias: its loosest, `FormLikeAPI`,
+ * still pins names to `string`, which a concrete form's literal names
+ * cannot satisfy. */
+interface AnyFormApi {
+  handleSubmit(): Promise<unknown>;
+  setFieldMeta(field: any, updater: (prev: any) => any): void;
+  Field: Component<any>;
+}
+/** The form element itself: native submit interception handing the event
+ * to the engine, one grid, one spacing voice. */
+export interface FormProps extends JSX.FormHTMLAttributes<HTMLFormElement> {
+  form: AnyFormApi;
+}
+export declare const Form: ((props: FormProps) => JSX.Element) & {
+  Root: (props: FormProps) => JSX.Element;
+};
+/**
+ * The named slot in the grid: label, control, hint — and the engine's
+ * errors for this name, shown through the same parts the standalone
+ * Field family styles. The children receive the live engine field — in
+ * Solid an accessor to the FieldApi — so every capability the engine
+ * has is right there where the control is wired. Without a Form above
+ * it degrades to a plain labelled field.
+ */
+export interface FormFieldProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> {
+  form?: AnyFormApi;
+  name: string;
+  label?: string;
+  hint?: string;
+  required?: boolean;
+  invalid?: boolean;
+  disabled?: boolean;
+  children?: JSX.Element | ((field: any) => JSX.Element);
+}
+export declare const FormField: ((props: FormFieldProps) => JSX.Element) & {
+  Root: (props: FormFieldProps) => JSX.Element;
+};
+//#endregion
+export { type FieldApi, type FormApi, type SolidFormApi, createField, createField as useField, createForm, createForm as useForm };

package/dist/components/form/index.mjs

@@ -1,7 +1,7 @@
 import { n as withSelfRoot } from "../../family-Cmd8HEyK.mjs";
 import { t as useElementId } from "../../id-2ygNzPHF.mjs";
-import { injectComponentStyle } from "@bysages/core";
 import { claimElement, createComponent, insert, memo, mergeProps, spread, template } from "@solidjs/web";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { Show, createContext, splitProps, useContext } from "solid-js";
 import { Field } from "@ark-ui/solid/field";
 import { createField, createForm } from "@tanstack/solid-form";

package/dist/components/grid/index.mjs

@@ -1,6 +1,6 @@
 import { n as withSelfRoot } from "../../family-Cmd8HEyK.mjs";
-import { injectComponentStyle } from "@bysages/core";
 import { spread, template } from "@solidjs/web";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { splitProps } from "solid-js";
 //#region src/components/grid/index.tsx
 var _tmpl$ = /* @__PURE__ */ template(`<div>`);

package/dist/components/highlight/index.mjs

@@ -1,5 +1,5 @@
 import { n as withSelfRoot } from "../../family-Cmd8HEyK.mjs";
-import { injectComponentStyle } from "@bysages/core";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { Highlight as Highlight$1 } from "@ark-ui/solid/highlight";
 //#region src/components/highlight/index.ts
 /** Ark's Highlight, dressed in the paper-and-ink system: query hits are