@bysages/react 0.3.0 → 0.4.0

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

@@ -1,8 +1,33 @@
 import { Field as Field$1 } from "@ark-ui/react/field";
 //#region src/components/field/index.d.ts
-/** 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. */
-export declare const Field: typeof Field$1;
+interface FieldFacadeProps {
+  value?: string | number;
+  defaultValue?: string | number;
+  label?: string;
+  description?: string;
+  placeholder?: string;
+  disabled?: boolean;
+  invalid?: boolean;
+  required?: boolean;
+  onValueChange?: (value: string) => void;
+}
+/** The one-tag path for a simple text field; textarea, select, and
+ * custom controls keep the anatomy. */
+declare function FieldFacade({ value, defaultValue, label, description, placeholder, disabled, invalid, required, onValueChange }: FieldFacadeProps): import("react").JSX.Element;
+export declare const Field: typeof FieldFacade & {
+  Root: typeof Field$1.Root;
+  Context: (props: Field$1.ContextProps) => import("react").ReactNode;
+  ErrorText: import("react").ForwardRefExoticComponent<Field$1.ErrorTextProps & import("react").RefAttributes<HTMLSpanElement>>;
+  HelperText: import("react").ForwardRefExoticComponent<Field$1.HelperTextProps & import("react").RefAttributes<HTMLSpanElement>>;
+  Input: import("react").ForwardRefExoticComponent<Field$1.InputProps & import("react").RefAttributes<HTMLInputElement>>;
+  Item: {
+    (props: Field$1.ItemProps): import("react").JSX.Element;
+    displayName: string;
+  };
+  Label: import("react").ForwardRefExoticComponent<Field$1.LabelProps & import("react").RefAttributes<HTMLLabelElement>>;
+  RequiredIndicator: import("react").ForwardRefExoticComponent<Field$1.RequiredIndicatorProps & import("react").RefAttributes<HTMLSpanElement>>;
+  RootProvider: import("react").ForwardRefExoticComponent<Field$1.RootProviderProps & import("react").RefAttributes<HTMLDivElement>>;
+  Select: import("react").ForwardRefExoticComponent<Field$1.SelectProps & import("react").RefAttributes<HTMLSelectElement>>;
+  Textarea: import("react").ForwardRefExoticComponent<Field$1.TextareaProps & import("react").RefAttributes<HTMLTextAreaElement>>;
+};
 //#endregion

package/dist/components/field/index.mjs

@@ -1,11 +1,44 @@
+import { t as useElementId } from "../../id-C37UYLwJ.mjs";
 import { injectComponentStyle } from "@bysages/core";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Field as Field$1 } from "@ark-ui/react/field";
 //#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 —
+/** Field, dressed in the paper-and-ink system: a tracked label, a
+* border-and-halo control, and quiet help text. The parts —
 * Root, Label, Input, Textarea, Select, HelperText, ErrorText,
 * RequiredIndicator. */
-const Field = Field$1;
+function FieldRoot(props) {
+	const id = useElementId("field", props);
+	return /* @__PURE__ */ jsx(Field$1.Root, {
+		...props,
+		id
+	});
+}
+/** The one-tag path for a simple text field; textarea, select, and
+* custom controls keep the anatomy. */
+function FieldFacade({ value, defaultValue, label, description, placeholder, disabled = false, invalid = false, required = false, onValueChange }) {
+	return /* @__PURE__ */ jsxs(FieldRoot, {
+		disabled,
+		invalid,
+		required,
+		children: [
+			label ? /* @__PURE__ */ jsx(Field$1.Label, { children: label }) : null,
+			/* @__PURE__ */ jsx(Field$1.Input, {
+				placeholder,
+				defaultValue,
+				...value === void 0 ? {} : {
+					value,
+					onChange: (event) => onValueChange?.(event.target.value)
+				}
+			}),
+			description ? /* @__PURE__ */ jsx(Field$1.HelperText, { children: description }) : null
+		]
+	});
+}
+const Field = Object.assign(FieldFacade, {
+	...Field$1,
+	Root: FieldRoot
+});
 injectComponentStyle("field");
 //#endregion
 export { Field };

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

@@ -1,7 +1,22 @@
+import { ReactNode } from "react";
 import { Fieldset as Fieldset$1 } from "@ark-ui/react/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. */
-export declare const Fieldset: typeof Fieldset$1;
+interface FieldsetFacadeProps {
+  label?: string;
+  description?: string;
+  disabled?: boolean;
+  invalid?: boolean;
+  children?: ReactNode;
+}
+/** The one-tag path: one label and optional description around the
+ * caller controls; compound or bespoke groups keep the anatomy. */
+declare function FieldsetFacade({ label, description, disabled, invalid, children }: FieldsetFacadeProps): import("react").JSX.Element;
+export declare const Fieldset: typeof FieldsetFacade & {
+  Root: typeof Fieldset$1.Root;
+  Context: (props: Fieldset$1.ContextProps) => ReactNode;
+  ErrorText: import("react").ForwardRefExoticComponent<Fieldset$1.ErrorTextProps & import("react").RefAttributes<HTMLSpanElement>>;
+  HelperText: import("react").ForwardRefExoticComponent<Fieldset$1.HelperTextProps & import("react").RefAttributes<HTMLSpanElement>>;
+  Legend: import("react").ForwardRefExoticComponent<Fieldset$1.LegendProps & import("react").RefAttributes<HTMLLegendElement>>;
+  RootProvider: import("react").ForwardRefExoticComponent<Fieldset$1.RootProviderProps & import("react").RefAttributes<HTMLFieldSetElement>>;
+};
 //#endregion

package/dist/components/fieldset/index.mjs

@@ -1,10 +1,35 @@
+import { t as useElementId } from "../../id-C37UYLwJ.mjs";
 import { injectComponentStyle } from "@bysages/core";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Fieldset as Fieldset$1 } from "@ark-ui/react/fieldset";
 //#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,
+/** Fieldset, dressed in the paper-and-ink system: a song-serif
+* legend heading a column of fields. The parts — Root, Legend,
 * HelperText, ErrorText. */
-const Fieldset = Fieldset$1;
+function FieldsetRoot(props) {
+	const id = useElementId("fieldset", props);
+	return /* @__PURE__ */ jsx(Fieldset$1.Root, {
+		...props,
+		id
+	});
+}
+/** The one-tag path: one label and optional description around the
+* caller controls; compound or bespoke groups keep the anatomy. */
+function FieldsetFacade({ label, description, disabled = false, invalid = false, children }) {
+	return /* @__PURE__ */ jsxs(FieldsetRoot, {
+		disabled,
+		invalid,
+		children: [
+			label ? /* @__PURE__ */ jsx(Fieldset$1.Legend, { children: label }) : null,
+			children,
+			description ? /* @__PURE__ */ jsx(Fieldset$1.HelperText, { children: description }) : null
+		]
+	});
+}
+const Fieldset = Object.assign(FieldsetFacade, {
+	...Fieldset$1,
+	Root: FieldsetRoot
+});
 injectComponentStyle("fieldset");
 //#endregion
 export { Fieldset };

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

@@ -1,18 +1,45 @@
-import { ComponentProps } from "react";
+import { ComponentProps, ReactNode } from "react";
 import { FileUpload as FileUpload$1 } from "@ark-ui/react/file-upload";
 //#region src/components/file-upload/index.d.ts
 type FileUploadRootProps = ComponentProps<typeof FileUpload$1.Root> & {
   /** One rung of the control-height ladder for the trigger. */
   size?: "sm" | "md" | "lg";
 };
-declare function FileUploadRoot({ size, ...rest }: FileUploadRootProps): import("react").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,
- * Dropzone, HiddenInput, ItemGroup, Item, ItemName, ItemSizeText,
- * ItemPreview, ItemPreviewImage, ItemDeleteTrigger, ClearTrigger,
- * Context. */
-export declare const FileUpload: Omit<typeof FileUpload$1, "Root"> & {
+declare function FileUploadRoot(props: FileUploadRootProps): import("react").JSX.Element;
+/** The inner trigger repeats the click binding the dropzone already
+ * owns, and no flavor of taming a nested button survives the audit —
+ * assistive tech can still land on it. So the visual cue is a plain
+ * span wearing the trigger props; the dropzone stays the one real
+ * control, keyboard included. */
+declare function FileUploadTrigger(props: ComponentProps<typeof FileUpload$1.Trigger>): import("react").JSX.Element;
+interface FileUploadFacadeProps {
+  label?: string;
+  placeholder?: string;
+  disabled?: boolean;
+  invalid?: boolean;
+  required?: boolean;
+  maxFiles?: number;
+  size?: "sm" | "md" | "lg";
+  children?: ReactNode;
+}
+/** The one-tag path: a labelled dropzone and its accepted slips; MIME
+ * rules, directories, and controlled files stay on the anatomy. */
+declare function FileUploadFacade({ label, placeholder, disabled, invalid, required, maxFiles, size }: FileUploadFacadeProps): import("react").JSX.Element;
+export declare const FileUpload: typeof FileUploadFacade & {
   Root: typeof FileUploadRoot;
+  Trigger: typeof FileUploadTrigger;
+  ClearTrigger: import("react").ForwardRefExoticComponent<FileUpload$1.ClearTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+  Context: (props: FileUpload$1.ContextProps) => ReactNode;
+  Dropzone: import("react").ForwardRefExoticComponent<FileUpload$1.DropzoneProps & import("react").RefAttributes<HTMLDivElement>>;
+  HiddenInput: import("react").ForwardRefExoticComponent<FileUpload$1.HiddenInputProps & import("react").RefAttributes<HTMLInputElement>>;
+  Item: import("react").ForwardRefExoticComponent<FileUpload$1.ItemProps & import("react").RefAttributes<HTMLLIElement>>;
+  ItemDeleteTrigger: import("react").ForwardRefExoticComponent<FileUpload$1.ItemDeleteTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+  ItemGroup: import("react").ForwardRefExoticComponent<FileUpload$1.ItemGroupProps & import("react").RefAttributes<HTMLUListElement>>;
+  ItemName: import("react").ForwardRefExoticComponent<FileUpload$1.ItemNameProps & import("react").RefAttributes<HTMLDivElement>>;
+  ItemPreview: import("react").ForwardRefExoticComponent<FileUpload$1.ItemPreviewProps & import("react").RefAttributes<HTMLImageElement>>;
+  ItemPreviewImage: import("react").ForwardRefExoticComponent<FileUpload$1.ItemPreviewImageProps & import("react").RefAttributes<HTMLImageElement>>;
+  ItemSizeText: import("react").ForwardRefExoticComponent<FileUpload$1.ItemSizeTextProps & import("react").RefAttributes<HTMLDivElement>>;
+  Label: import("react").ForwardRefExoticComponent<FileUpload$1.LabelProps & import("react").RefAttributes<HTMLLabelElement>>;
+  RootProvider: import("react").ForwardRefExoticComponent<FileUpload$1.RootProviderProps & import("react").RefAttributes<HTMLDivElement>>;
 };
 //#endregion

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

@@ -1,23 +1,78 @@
+import { t as iconNode } from "../../icon-BALgGtNK.mjs";
+import { t as useElementId } from "../../id-C37UYLwJ.mjs";
 import { injectComponentStyle } from "@bysages/core";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { FileUpload as FileUpload$1 } from "@ark-ui/react/file-upload";
 //#region src/components/file-upload/index.tsx
-function FileUploadRoot({ size = "md", ...rest }) {
+function FileUploadRoot(props) {
+	const id = useElementId("file-upload", props);
+	const { size = "md", ...rest } = props;
 	return /* @__PURE__ */ jsx(FileUpload$1.Root, {
 		...rest,
+		id,
 		"data-size": size
 	});
 }
-/** 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,
-* Dropzone, HiddenInput, ItemGroup, Item, ItemName, ItemSizeText,
-* ItemPreview, ItemPreviewImage, ItemDeleteTrigger, ClearTrigger,
-* Context. */
-const FileUpload = {
+/** The inner trigger repeats the click binding the dropzone already
+* owns, and no flavor of taming a nested button survives the audit —
+* assistive tech can still land on it. So the visual cue is a plain
+* span wearing the trigger props; the dropzone stays the one real
+* control, keyboard included. */
+function FileUploadTrigger(props) {
+	const { children, ...rest } = props;
+	return /* @__PURE__ */ jsx(FileUpload$1.Trigger, {
+		asChild: true,
+		...rest,
+		children: /* @__PURE__ */ jsx("span", {
+			"data-scope": "file-upload",
+			"data-part": "trigger",
+			"aria-hidden": "true",
+			children
+		})
+	});
+}
+const fileIcon = iconNode("file", {
+	width: 16,
+	height: 16
+});
+const uploadIcon = iconNode("upload", {
+	width: 28,
+	height: 28
+});
+const closeIcon = iconNode("x", {
+	width: 14,
+	height: 14
+});
+/** The one-tag path: a labelled dropzone and its accepted slips; MIME
+* rules, directories, and controlled files stay on the anatomy. */
+function FileUploadFacade({ label, placeholder, disabled = false, invalid = false, required = false, maxFiles, size = "md" }) {
+	return /* @__PURE__ */ jsxs(FileUploadRoot, {
+		size,
+		disabled,
+		invalid,
+		required,
+		maxFiles,
+		children: [
+			label ? /* @__PURE__ */ jsx(FileUpload$1.Label, { children: label }) : null,
+			/* @__PURE__ */ jsx(FileUpload$1.Dropzone, { children: /* @__PURE__ */ jsxs(FileUploadTrigger, { children: [uploadIcon, placeholder ?? "Choose files"] }) }),
+			/* @__PURE__ */ jsx(FileUpload$1.ItemGroup, { children: /* @__PURE__ */ jsx(FileUpload$1.Context, { children: (api) => api.acceptedFiles.map((file) => /* @__PURE__ */ jsxs(FileUpload$1.Item, {
+				file,
+				children: [
+					/* @__PURE__ */ jsx(FileUpload$1.ItemPreview, { children: fileIcon }),
+					/* @__PURE__ */ jsx(FileUpload$1.ItemName, {}),
+					/* @__PURE__ */ jsx(FileUpload$1.ItemSizeText, {}),
+					/* @__PURE__ */ jsx(FileUpload$1.ItemDeleteTrigger, { children: closeIcon })
+				]
+			}, file.name)) }) }),
+			/* @__PURE__ */ jsx(FileUpload$1.HiddenInput, {})
+		]
+	});
+}
+const FileUpload = Object.assign(FileUploadFacade, {
 	...FileUpload$1,
-	Root: FileUploadRoot
-};
+	Root: FileUploadRoot,
+	Trigger: FileUploadTrigger
+});
 injectComponentStyle("file-upload");
 //#endregion
 export { FileUpload };

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

@@ -1,3 +1,4 @@
+import { n as useComponentMessages } from "../../messages-1jJWtaYU.mjs";
 import { Button } from "../button/index.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -46,12 +47,13 @@ const STEP_DOWN = {
 };
 function Trigger({ label, children }) {
 	const context = useContext(FLOAT_BUTTON_CONTEXT);
+	const messages = useComponentMessages();
 	return /* @__PURE__ */ jsx(Button, {
 		variant: "solid",
 		square: true,
 		size: context?.size ?? "lg",
 		onClick: () => context?.toggle(),
-		"aria-label": label || "Actions",
+		"aria-label": label || messages.floatButton.actions,
 		"aria-expanded": context ? context.open : false,
 		children
 	});

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

@@ -1,9 +1,21 @@
+import { ReactNode } from "react";
 import { FloatingPanel as FloatingPanel$1 } from "@ark-ui/react/floating-panel";
 //#region src/components/floating-panel/index.d.ts
-/** 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,
- * Title, Control, DragTrigger, StageTrigger, CloseTrigger, ResizeTrigger,
- * Body. */
-export declare const FloatingPanel: typeof FloatingPanel$1;
+export interface FloatingPanelFacadeProps {
+  open?: boolean;
+  defaultOpen?: boolean;
+  trigger?: string;
+  content?: string;
+  label: string;
+  description?: string;
+  disabled?: boolean;
+  children?: ReactNode;
+  onOpenChange?: (open: boolean) => void;
+}
+declare function FloatingPanelFacade({ open, defaultOpen, trigger, content, label, description, disabled, children, onOpenChange }: FloatingPanelFacadeProps): import("react").JSX.Element;
+declare namespace FloatingPanelFacade {
+  var displayName: string;
+}
+type FloatingPanelParts = typeof FloatingPanel$1;
+export declare const FloatingPanel: typeof FloatingPanelFacade & FloatingPanelParts;
 //#endregion

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

@@ -1,4 +1,7 @@
+import { t as iconNode } from "../../icon-BALgGtNK.mjs";
+import { t as useElementId } from "../../id-C37UYLwJ.mjs";
 import { injectComponentStyle } from "@bysages/core";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { FloatingPanel as FloatingPanel$1 } from "@ark-ui/react/floating-panel";
 //#region src/components/floating-panel/index.tsx
 /** Ark's FloatingPanel, dressed in the paper-and-ink system: the shared
@@ -6,7 +9,58 @@ import { FloatingPanel as FloatingPanel$1 } from "@ark-ui/react/floating-panel";
 * handle. The API is Ark's own — Root, Trigger, Positioner, Content, Header,
 * Title, Control, DragTrigger, StageTrigger, CloseTrigger, ResizeTrigger,
 * Body. */
-const FloatingPanel = FloatingPanel$1;
+function FloatingPanelRoot(props) {
+	const id = useElementId("floating-panel", props);
+	return /* @__PURE__ */ jsx(FloatingPanel$1.Root, {
+		...props,
+		id
+	});
+}
+const resizeAxes = [
+	"n",
+	"e",
+	"s",
+	"w",
+	"ne",
+	"se",
+	"sw",
+	"nw"
+];
+function FloatingPanelFacade({ open, defaultOpen, trigger, content, label, description, disabled = false, children, onOpenChange }) {
+	return /* @__PURE__ */ jsxs(FloatingPanelRoot, {
+		disabled,
+		...open === void 0 ? {} : { open },
+		...defaultOpen === void 0 ? {} : { defaultOpen },
+		onOpenChange: (details) => onOpenChange?.(details.open),
+		children: [/* @__PURE__ */ jsx(FloatingPanel$1.Trigger, { children: trigger ?? label }), /* @__PURE__ */ jsx(FloatingPanel$1.Positioner, { children: /* @__PURE__ */ jsxs(FloatingPanel$1.Content, { children: [
+			/* @__PURE__ */ jsx(FloatingPanel$1.DragTrigger, { children: /* @__PURE__ */ jsxs(FloatingPanel$1.Header, { children: [/* @__PURE__ */ jsx(FloatingPanel$1.Title, { children: label }), /* @__PURE__ */ jsxs(FloatingPanel$1.Control, { children: [
+				/* @__PURE__ */ jsx(FloatingPanel$1.StageTrigger, {
+					stage: "minimized",
+					children: iconNode("minus")
+				}),
+				/* @__PURE__ */ jsx(FloatingPanel$1.StageTrigger, {
+					stage: "maximized",
+					children: iconNode("maximize-2")
+				}),
+				/* @__PURE__ */ jsx(FloatingPanel$1.CloseTrigger, {
+					"aria-label": "Close",
+					children: iconNode("x")
+				})
+			] })] }) }),
+			/* @__PURE__ */ jsxs(FloatingPanel$1.Body, { children: [
+				description ? /* @__PURE__ */ jsx("p", { children: description }) : null,
+				content ? /* @__PURE__ */ jsx("p", { children: content }) : null,
+				children
+			] }),
+			resizeAxes.map((axis) => /* @__PURE__ */ jsx(FloatingPanel$1.ResizeTrigger, { axis }, axis))
+		] }) })]
+	});
+}
+FloatingPanelFacade.displayName = "SFloatingPanel";
+const FloatingPanel = Object.assign(FloatingPanelFacade, {
+	...FloatingPanel$1,
+	Root: FloatingPanelRoot
+});
 injectComponentStyle("floating-panel");
 //#endregion
 export { FloatingPanel };

package/dist/components/focus-trap/index.d.mts

@@ -1,2 +1,7 @@
-import { FocusTrap, FocusTrapBaseProps, FocusTrapProps } from "@ark-ui/react/focus-trap";
-export { FocusTrap, type FocusTrapBaseProps, type FocusTrapProps };
+import { FocusTrapBaseProps, FocusTrapProps } from "@ark-ui/react/focus-trap";
+//#region src/components/focus-trap/index.d.ts
+export declare const FocusTrap: import("react").ForwardRefExoticComponent<import("@ark-ui/react/focus-trap").FocusTrapProps & import("react").RefAttributes<HTMLDivElement>> & {
+  Root: import("react").ForwardRefExoticComponent<import("@ark-ui/react/focus-trap").FocusTrapProps & import("react").RefAttributes<HTMLDivElement>>;
+};
+//#endregion
+export type { FocusTrapBaseProps, FocusTrapProps };

package/dist/components/focus-trap/index.mjs

@@ -1,2 +1,6 @@
-import { FocusTrap } from "@ark-ui/react/focus-trap";
+import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
+import { FocusTrap as FocusTrap$1 } from "@ark-ui/react/focus-trap";
+//#region src/components/focus-trap/index.tsx
+const FocusTrap = withSelfRoot(FocusTrap$1);
+//#endregion
 export { FocusTrap };

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

@@ -1,2 +1,2 @@
-import { a as useField, c as FieldApi, i as FormProps, n as FormField, o as useForm, r as FormFieldProps, s as FormApi, t as Form } from "../../index-uPyYiWaL.mjs";
+import { a as useField, c as FieldApi, i as FormProps, n as FormField, o as useForm, r as FormFieldProps, s as FormApi, t as Form } from "../../index-PsgGWW3m.mjs";
 export { type FieldApi, Form, type FormApi, FormField, FormFieldProps, FormProps, useField, useForm };

package/dist/components/form/index.mjs

@@ -1,3 +1,4 @@
+import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { createContext, useContext } from "react";
@@ -13,7 +14,7 @@ function errorText(error) {
 	if (typeof error === "object" && "message" in error) return String(error.message);
 	return "";
 }
-function Form({ form, children, ...rest }) {
+function FormImpl({ form, children, ...rest }) {
 	injectComponentStyle("form");
 	injectComponentStyle("field");
 	return /* @__PURE__ */ jsx(FormContext.Provider, {
@@ -31,7 +32,8 @@ function Form({ form, children, ...rest }) {
 		})
 	});
 }
-function FormField({ form: formProp, name, label, hint, required = false, invalid = false, disabled = false, children, ...rest }) {
+const Form = withSelfRoot(FormImpl);
+function FormFieldImpl({ form: formProp, name, label, hint, required = false, invalid = false, disabled = false, children, ...rest }) {
 	const injected = useContext(FormContext);
 	const form = formProp ?? injected;
 	const { className: klass, style, ...fieldOptions } = rest;
@@ -63,5 +65,6 @@ function FormField({ form: formProp, name, label, hint, required = false, invali
 		children: assemble
 	});
 }
+const FormField = withSelfRoot(FormFieldImpl);
 //#endregion
 export { Form, FormField, useField, useForm };

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

@@ -1,10 +1,6 @@
+import { FrameProps } from "@ark-ui/react/frame";
 //#region src/components/frame/index.d.ts
-/** Ark's Frame, dressed in the paper-and-ink system: a sandboxed
- * iframe whose body teleports the children and whose `head` prop
- * carries extra <head> nodes — styles the child renders must travel
- * through that prop. The frame measures its content and grows to
- * fit; the vessel's border and paper belong to the consumer, since
- * an iframe carries no anatomy attributes for the core stylesheet
- * to hook. The API is Ark's own. */
-export declare const Frame: import("react").ForwardRefExoticComponent<import("@ark-ui/react/frame").FrameProps & import("react").RefAttributes<HTMLIFrameElement>>;
+export declare const Frame: import("react").ForwardRefExoticComponent<FrameProps & import("react").RefAttributes<HTMLIFrameElement>> & {
+  Root: import("react").ForwardRefExoticComponent<FrameProps & import("react").RefAttributes<HTMLIFrameElement>>;
+};
 //#endregion

package/dist/components/frame/index.mjs

@@ -1,3 +1,7 @@
+import { t as useElementId } from "../../id-C37UYLwJ.mjs";
+import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
 import { Frame as Frame$1 } from "@ark-ui/react/frame";
 //#region src/components/frame/index.tsx
 /** Ark's Frame, dressed in the paper-and-ink system: a sandboxed
@@ -7,6 +11,14 @@ import { Frame as Frame$1 } from "@ark-ui/react/frame";
 * fit; the vessel's border and paper belong to the consumer, since
 * an iframe carries no anatomy attributes for the core stylesheet
 * to hook. The API is Ark's own. */
-const Frame = Frame$1;
+const FrameRoot = forwardRef(function FrameRoot(props, ref) {
+	const id = useElementId("frame", props);
+	return /* @__PURE__ */ jsx(Frame$1, {
+		ref,
+		...props,
+		id
+	});
+});
+const Frame = withSelfRoot(FrameRoot);
 //#endregion
 export { Frame };

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

@@ -9,5 +9,8 @@ export interface GridProps extends HTMLAttributes<HTMLDivElement> {
    * and the container decides how many fit. */
   minChildWidth?: string;
 }
-export declare function Grid({ columns, gap, minChildWidth, ...rest }: GridProps): import("react").JSX.Element;
+declare function GridImpl({ columns, gap, minChildWidth, ...rest }: GridProps): import("react").JSX.Element;
+export declare const Grid: typeof GridImpl & {
+  Root: typeof GridImpl;
+};
 //#endregion

package/dist/components/grid/index.mjs

@@ -1,3 +1,4 @@
+import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/grid/index.tsx
@@ -11,7 +12,7 @@ const gapVars = {
 	lg: "var(--bs-gap-lg)",
 	xl: "var(--bs-gap-xl)"
 };
-function Grid({ columns = 12, gap = "md", minChildWidth, ...rest }) {
+function GridImpl({ columns = 12, gap = "md", minChildWidth, ...rest }) {
 	injectComponentStyle("grid");
 	const style = {
 		...rest.style,
@@ -27,5 +28,6 @@ function Grid({ columns = 12, gap = "md", minChildWidth, ...rest }) {
 		"data-autofill": minChildWidth != null ? "" : void 0
 	});
 }
+const Grid = withSelfRoot(GridImpl);
 //#endregion
 export { Grid };

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

@@ -1,7 +1,5 @@
 //#region src/components/highlight/index.d.ts
-/** Ark's Highlight, dressed in the paper-and-ink system: query hits are
- * strokes of pigment on the page — a quiet tint of the accent behind the
- * ink, never neon. The component renders bare <mark> elements, so the
- * document-wide mark default carries the look. The API is Ark's own. */
-export declare const Highlight: (props: import("@ark-ui/react/highlight").HighlightProps) => import("react").JSX.Element;
+export declare const Highlight: ((props: import("@ark-ui/react/highlight").HighlightProps) => import("react").JSX.Element) & {
+  Root: (props: import("@ark-ui/react/highlight").HighlightProps) => import("react").JSX.Element;
+};
 //#endregion

package/dist/components/highlight/index.mjs

@@ -1,11 +1,16 @@
+import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
 import { injectComponentStyle } from "@bysages/core";
+import { jsx } from "react/jsx-runtime";
 import { Highlight as Highlight$1 } from "@ark-ui/react/highlight";
 //#region src/components/highlight/index.tsx
 /** Ark's Highlight, dressed in the paper-and-ink system: query hits are
 * strokes of pigment on the page — a quiet tint of the accent behind the
 * ink, never neon. The component renders bare <mark> elements, so the
 * document-wide mark default carries the look. The API is Ark's own. */
-const Highlight = Highlight$1;
+function HighlightRoot(props) {
+	return /* @__PURE__ */ jsx(Highlight$1, { ...props });
+}
+const Highlight = withSelfRoot(HighlightRoot);
 injectComponentStyle("highlight");
 //#endregion
 export { Highlight };

package/dist/components/hover-card/index.d.mts

@@ -1,7 +1,23 @@
+import { ReactNode } from "react";
 import { HoverCard as HoverCard$1 } from "@ark-ui/react/hover-card";
 //#region src/components/hover-card/index.d.ts
-/** Ark's HoverCard, dressed in the paper-and-ink system: a preview card
- * that dissolves in over a quiet inline link, never stealing focus. The
- * API is Ark's own — Root, Trigger, Positioner, Content, Arrow, ArrowTip. */
-export declare const HoverCard: typeof HoverCard$1;
+type HoverCardPlacement = "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end";
+export interface HoverCardFacadeProps {
+  open?: boolean;
+  defaultOpen?: boolean;
+  trigger: string;
+  content?: string;
+  label: string;
+  description?: string;
+  disabled?: boolean;
+  placement?: HoverCardPlacement;
+  children?: ReactNode;
+  onOpenChange?: (open: boolean) => void;
+}
+declare function HoverCardFacade({ open, defaultOpen, trigger, content, label, description, disabled, placement, children, onOpenChange }: HoverCardFacadeProps): import("react").JSX.Element;
+declare namespace HoverCardFacade {
+  var displayName: string;
+}
+type HoverCardParts = typeof HoverCard$1;
+export declare const HoverCard: typeof HoverCardFacade & HoverCardParts;
 //#endregion