@bysages/solid 0.3.1 → 0.4.1

package/dist/components/drawer/index.mjs

@@ -1,12 +1,93 @@
-import { injectComponentStyle } from "@bysages/core";
+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 { createComponent, insert, memo, mergeProps, template } from "@solidjs/web";
+import { injectComponentStyle } from "@bysages/core/styling";
+import { Show, createComponent as createComponent$1, mergeProps as mergeProps$1 } from "solid-js";
 import { Drawer as Drawer$1 } from "@ark-ui/solid/drawer";
-//#region src/components/drawer/index.ts
+//#region src/components/drawer/index.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<p>`);
 /** Ark's Drawer, dressed in the paper-and-ink system: a full-height sheet
 * cut flush to the edge it rises from, sliding on the machine's translate
 * under the grabber's hand. The API is Ark's own — Root, Trigger,
 * Backdrop, Positioner, Content, Grabber, GrabberIndicator, Title,
 * Description, CloseTrigger, SwipeArea. */
-const Drawer = Drawer$1;
+function DrawerRoot(props) {
+	const id = useElementId("drawer", () => props.id);
+	return createComponent$1(Drawer$1.Root, mergeProps$1(props, { get id() {
+		return id();
+	} }));
+}
+function DrawerFacade(props) {
+	injectComponentStyle("drawer");
+	return createComponent(DrawerRoot, mergeProps(() => {
+		return props.open === void 0 ? {} : { open: props.open };
+	}, () => {
+		return props.defaultOpen === void 0 ? {} : { defaultOpen: props.defaultOpen };
+	}, {
+		onOpenChange: (details) => props.onOpenChange?.(details.open),
+		get children() {
+			return [
+				createComponent(Drawer$1.Trigger, {
+					get disabled() {
+						return props.disabled;
+					},
+					get children() {
+						return props.trigger ?? props.label;
+					}
+				}),
+				createComponent(Drawer$1.Backdrop, {}),
+				createComponent(Drawer$1.Positioner, { get children() {
+					return createComponent(Drawer$1.Content, { get children() {
+						return [
+							createComponent(Drawer$1.Grabber, { get children() {
+								return createComponent(Drawer$1.GrabberIndicator, {});
+							} }),
+							createComponent(Drawer$1.Title, { get children() {
+								return props.label;
+							} }),
+							createComponent(Show, {
+								get when() {
+									return props.description;
+								},
+								get children() {
+									return createComponent(Drawer$1.Description, { get children() {
+										return props.description;
+									} });
+								}
+							}),
+							createComponent(Show, {
+								get when() {
+									return props.content;
+								},
+								get children() {
+									var _el$ = _tmpl$();
+									insert(_el$, () => {
+										return props.content;
+									});
+									return _el$;
+								}
+							}),
+							memo(() => {
+								return props.children;
+							}),
+							createComponent(Drawer$1.CloseTrigger, {
+								"aria-label": "Close",
+								get children() {
+									return iconNode("x");
+								}
+							})
+						];
+					} });
+				} })
+			];
+		}
+	}));
+}
+const Drawer = defineFamily(DrawerFacade, {
+	...Drawer$1,
+	Root: DrawerRoot
+});
 injectComponentStyle("drawer");
 //#endregion
 export { Drawer };

package/dist/components/dynamic-input/index.d.mts

@@ -26,5 +26,7 @@ export interface DynamicInputProps extends JSX.HTMLAttributes<HTMLDivElement> {
  * past `max`, and the group always keeps one row: an entry list that
  * emptied itself would leave the reader no place to type.
  */
-export declare function DynamicInput(props: DynamicInputProps): JSX.Element;
+export declare const DynamicInput: ((props: DynamicInputProps) => JSX.Element) & {
+  Root: (props: DynamicInputProps) => JSX.Element;
+};
 //#endregion

package/dist/components/dynamic-input/index.mjs

@@ -1,13 +1,14 @@
+import { n as withSelfRoot } from "../../family-Cmd8HEyK.mjs";
+import { r as iconNode } from "../../icon-DTqmJCd5.mjs";
 import { Button } from "../button/index.mjs";
 import { n as useComponentMessages } from "../../use-component-messages-C4SCVYjD.mjs";
-import { t as Input } from "../../input-DoFQ7RXh.mjs";
-import { injectComponentStyle } from "@bysages/core";
+import { t as Input } from "../../input-BL3N3L8g.mjs";
 import { createComponent, insert, memo, spread, template } from "@solidjs/web";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { Index, splitProps } from "solid-js";
 //#region src/components/dynamic-input/index.tsx
 var _tmpl$ = /* @__PURE__ */ template(`<div><div data-scope=dynamic-input data-part=add>`);
 var _tmpl$2 = /* @__PURE__ */ template(`<div data-scope=dynamic-input data-part=row><!><!>`);
-var _tmpl$3 = /* @__PURE__ */ template(`<svg width=16 height=16 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=1.75 stroke-linecap=round stroke-linejoin=round aria-hidden=true><path d="M18 6 6 18M6 6l12 12">`);
 /**
 * A column of entry rows: one Input per line, each with a quiet remove
 * seal, and an add row at the tail. The list is controlled — every edit
@@ -16,7 +17,7 @@ var _tmpl$3 = /* @__PURE__ */ template(`<svg width=16 height=16 viewBox="0 0 24
 * past `max`, and the group always keeps one row: an entry list that
 * emptied itself would leave the reader no place to type.
 */
-function DynamicInput(props) {
+const DynamicInput = withSelfRoot(function DynamicInput(props) {
 	const messages = useComponentMessages();
 	injectComponentStyle("dynamic-input");
 	const [own, rest] = splitProps(props, [
@@ -114,10 +115,13 @@ function DynamicInput(props) {
 		}
 	}));
 	return _el$;
-}
-/** The one glyph a remove seal needs: a single crossing stroke. */
+});
+/** The one icon a remove seal needs: a single crossing stroke. */
 function crossIcon() {
-	return _tmpl$3();
+	return iconNode("x", {
+		width: "16",
+		height: "16"
+	});
 }
 //#endregion
 export { DynamicInput };

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

@@ -9,7 +9,7 @@ type EditableOwnProps = {
   size?: "sm" | "md" | "lg";
 };
 declare function EditableRoot(props: EditableRootProps & EditableOwnProps): import("solid-js").JSX.Element;
-export declare const Editable: Omit<typeof Editable$1, "Root"> & {
+export declare const Editable: typeof EditableRoot & Omit<typeof Editable$1, "Root"> & {
   Root: typeof EditableRoot;
 };
 //#endregion

package/dist/components/editable/index.mjs

@@ -1,18 +1,26 @@
-import { injectComponentStyle } from "@bysages/core";
+import { t as defineFamily } from "../../family-Cmd8HEyK.mjs";
+import { t as useElementId } from "../../id-2ygNzPHF.mjs";
 import { createComponent, mergeProps } from "@solidjs/web";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { splitProps } from "solid-js";
 import { Editable as Editable$1 } from "@ark-ui/solid/editable";
 //#region src/components/editable/index.tsx
 function EditableRoot(props) {
 	const [own, rest] = splitProps(props, ["size"]);
-	return createComponent(Editable$1.Root, mergeProps(rest, { get "data-size"() {
-		return own.size ?? "md";
-	} }));
+	const id = useElementId("editable", () => rest.id);
+	return createComponent(Editable$1.Root, mergeProps(rest, {
+		get id() {
+			return id();
+		},
+		get "data-size"() {
+			return own.size ?? "md";
+		}
+	}));
 }
-const Editable = {
+const Editable = defineFamily(EditableRoot, {
 	...Editable$1,
 	Root: EditableRoot
-};
+});
 injectComponentStyle("editable");
 //#endregion
 export { Editable };

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

@@ -6,5 +6,7 @@ import { JSX } from "solid-js";
 export interface EllipsisProps extends JSX.HTMLAttributes<HTMLSpanElement> {
   lines?: number;
 }
-export declare function Ellipsis(props: EllipsisProps): JSX.Element;
+export declare const Ellipsis: ((props: EllipsisProps) => JSX.Element) & {
+  Root: (props: EllipsisProps) => JSX.Element;
+};
 //#endregion

package/dist/components/ellipsis/index.mjs

@@ -1,9 +1,10 @@
-import { injectComponentStyle } from "@bysages/core";
+import { n as withSelfRoot } from "../../family-Cmd8HEyK.mjs";
 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>`);
-function Ellipsis(props) {
+const Ellipsis = withSelfRoot(function Ellipsis(props) {
 	injectComponentStyle("ellipsis");
 	const [own, rest] = splitProps(props, ["lines"]);
 	const multiline = () => (own.lines ?? 1) > 1;
@@ -22,6 +23,6 @@ function Ellipsis(props) {
 		}
 	}], false);
 	return _el$;
-}
+});
 //#endregion
 export { Ellipsis };

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

@@ -1,8 +1,12 @@
+import { ComponentProps } from "solid-js";
 import { Field as Field$1 } from "@ark-ui/solid/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;
+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"> & {
+  Root: typeof FieldRoot;
+};
 //#endregion

package/dist/components/field/index.mjs

@@ -1,11 +1,23 @@
-import { injectComponentStyle } from "@bysages/core";
+import { t as defineFamily } from "../../family-Cmd8HEyK.mjs";
+import { t as useElementId } from "../../id-2ygNzPHF.mjs";
+import { injectComponentStyle } from "@bysages/core/styling";
+import { createComponent, mergeProps } from "solid-js";
 import { Field as Field$1 } from "@ark-ui/solid/field";
 //#region src/components/field/index.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. */
-const Field = Field$1;
+function FieldRoot(props) {
+	const id = useElementId("field", () => props.id);
+	return createComponent(Field$1.Root, mergeProps(props, { get id() {
+		return id();
+	} }));
+}
+const Field = defineFamily(FieldRoot, {
+	...Field$1,
+	Root: FieldRoot
+});
 injectComponentStyle("field");
 //#endregion
 export { Field };

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

@@ -1,7 +1,11 @@
+import { ComponentProps } 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. */
-export declare const Fieldset: typeof Fieldset$1;
+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"> & {
+  Root: typeof FieldsetRoot;
+};
 //#endregion

package/dist/components/fieldset/index.mjs

@@ -1,10 +1,22 @@
-import { injectComponentStyle } from "@bysages/core";
+import { t as defineFamily } from "../../family-Cmd8HEyK.mjs";
+import { t as useElementId } from "../../id-2ygNzPHF.mjs";
+import { injectComponentStyle } from "@bysages/core/styling";
+import { createComponent, mergeProps } from "solid-js";
 import { Fieldset as Fieldset$1 } from "@ark-ui/solid/fieldset";
 //#region src/components/fieldset/index.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. */
-const Fieldset = Fieldset$1;
+function FieldsetRoot(props) {
+	const id = useElementId("fieldset", () => props.id);
+	return createComponent(Fieldset$1.Root, mergeProps(props, { get id() {
+		return id();
+	} }));
+}
+const Fieldset = defineFamily(FieldsetRoot, {
+	...Fieldset$1,
+	Root: FieldsetRoot
+});
 injectComponentStyle("fieldset");
 //#endregion
 export { Fieldset };

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

@@ -1,10 +1,5 @@
-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,
@@ -16,8 +11,7 @@ type FileUploadOwnProps = {
   size?: "sm" | "md" | "lg";
 };
 declare function FileUploadRoot(props: FileUploadRootProps & FileUploadOwnProps): import("solid-js").JSX.Element;
-export declare const FileUpload: Omit<typeof FileUpload$1, "Root" | "Trigger"> & {
+export declare const FileUpload: typeof FileUploadRoot & Omit<typeof FileUpload$1, "Root"> & {
   Root: typeof FileUploadRoot;
-  Trigger: typeof FileUploadTrigger;
 };
 //#endregion

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

@@ -1,5 +1,7 @@
-import { injectComponentStyle } from "@bysages/core";
+import { t as defineFamily } from "../../family-Cmd8HEyK.mjs";
+import { t as useElementId } from "../../id-2ygNzPHF.mjs";
 import { createComponent, mergeProps } from "@solidjs/web";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { splitProps } from "solid-js";
 import { FileUpload as FileUpload$1 } from "@ark-ui/solid/file-upload";
 //#region src/components/file-upload/index.tsx
@@ -14,15 +16,21 @@ function FileUploadTrigger(props) {
 }
 function FileUploadRoot(props) {
 	const [own, rest] = splitProps(props, ["size"]);
-	return createComponent(FileUpload$1.Root, mergeProps(rest, { get "data-size"() {
-		return own.size ?? "md";
-	} }));
+	const id = useElementId("file-upload", () => rest.id);
+	return createComponent(FileUpload$1.Root, mergeProps(rest, {
+		get id() {
+			return id();
+		},
+		get "data-size"() {
+			return own.size ?? "md";
+		}
+	}));
 }
-const FileUpload = {
+const FileUpload = defineFamily(FileUploadRoot, {
 	...FileUpload$1,
 	Root: FileUploadRoot,
 	Trigger: FileUploadTrigger
-};
+});
 injectComponentStyle("file-upload");
 //#endregion
 export { FileUpload };

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,3 +1,4 @@
+import { ComponentProps } 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
@@ -5,5 +6,8 @@ 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. */
-export declare const FloatingPanel: typeof FloatingPanel$1;
+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"> & {
+  Root: typeof FloatingPanelRoot;
+};
 //#endregion

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

@@ -1,4 +1,7 @@
-import { injectComponentStyle } from "@bysages/core";
+import { t as defineFamily } from "../../family-Cmd8HEyK.mjs";
+import { t as useElementId } from "../../id-2ygNzPHF.mjs";
+import { injectComponentStyle } from "@bysages/core/styling";
+import { createComponent, mergeProps } from "solid-js";
 import { FloatingPanel as FloatingPanel$1 } from "@ark-ui/solid/floating-panel";
 //#region src/components/floating-panel/index.ts
 /** Ark's FloatingPanel, dressed in the paper-and-ink system: the shared
@@ -6,7 +9,16 @@ 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. */
-const FloatingPanel = FloatingPanel$1;
+function FloatingPanelRoot(props) {
+	const id = useElementId("floating-panel", () => props.id);
+	return createComponent(FloatingPanel$1.Root, mergeProps(props, { get id() {
+		return id();
+	} }));
+}
+const FloatingPanel = defineFamily(FloatingPanelRoot, {
+	...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/solid/focus-trap";
-export { FocusTrap, type FocusTrapBaseProps, type FocusTrapProps };
+import { FocusTrapBaseProps, FocusTrapProps } from "@ark-ui/solid/focus-trap";
+//#region src/components/focus-trap/index.d.ts
+export declare const FocusTrap: ((props: import("@ark-ui/solid/focus-trap").FocusTrapProps) => import("solid-js").JSX.Element) & {
+  Root: (props: import("@ark-ui/solid/focus-trap").FocusTrapProps) => import("solid-js").JSX.Element;
+};
+//#endregion
+export type { FocusTrapBaseProps, FocusTrapProps };

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

@@ -1,2 +1,9 @@
-import { FocusTrap } from "@ark-ui/solid/focus-trap";
+import { n as withSelfRoot } from "../../family-Cmd8HEyK.mjs";
+import { FocusTrap as FocusTrap$1 } from "@ark-ui/solid/focus-trap";
+//#region src/components/focus-trap/index.ts
+/** Trap focus within a subtree — for containers that live outside the
+* dialog machine but still owe the keyboard a boundary. Headless, like
+* the rest of Ark's utilities. */
+const FocusTrap = withSelfRoot(FocusTrap$1);
+//#endregion
 export { FocusTrap };

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

@@ -1,2 +1,2 @@
-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-B1xiJ5ki.mjs";
+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 };

package/dist/components/form/index.mjs

@@ -1,5 +1,7 @@
-import { injectComponentStyle } from "@bysages/core";
+import { n as withSelfRoot } from "../../family-Cmd8HEyK.mjs";
+import { t as useElementId } from "../../id-2ygNzPHF.mjs";
 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";
@@ -15,7 +17,7 @@ function errorText(error) {
 	if (typeof error === "object" && "message" in error) return String(error.message);
 	return "";
 }
-function Form(props) {
+const Form = withSelfRoot(function Form(props) {
 	injectComponentStyle("form");
 	injectComponentStyle("field");
 	const [own, rest] = splitProps(props, ["form"]);
@@ -38,8 +40,8 @@ function Form(props) {
 			return _el$;
 		}
 	});
-}
-function FormField(props) {
+});
+const FormField = withSelfRoot(function FormField(props) {
 	const injected = useContext(FormContext);
 	const [own, rest] = splitProps(props, [
 		"form",
@@ -51,6 +53,7 @@ function FormField(props) {
 		"disabled",
 		"children"
 	]);
+	const id = useElementId("form-field");
 	const form = () => own.form ?? injected;
 	const assemble = (field) => {
 		const errors = () => {
@@ -63,6 +66,9 @@ function FormField(props) {
 			return own.name;
 		} }], true);
 		insert(_el$2, createComponent(Field.Root, {
+			get id() {
+				return id();
+			},
 			get invalid() {
 				return own.invalid || errors().length > 0;
 			},
@@ -120,6 +126,6 @@ function FormField(props) {
 			children: (field) => assemble(field)
 		}))
 	});
-}
+});
 //#endregion
 export { Form, FormField, createField, createField as useField, createForm, createForm as useForm };

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

@@ -1,3 +1,5 @@
+import { ComponentProps } from "solid-js";
+import { Frame as Frame$1 } from "@ark-ui/solid/frame";
 //#region src/components/frame/index.d.ts
 /** Ark's Frame, dressed in the paper-and-ink system: a sandboxed
  * iframe whose body mounts the children and whose `head` prop
@@ -6,5 +8,8 @@
  * 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: (props: import("@ark-ui/solid/frame").FrameProps) => import("solid-js").JSX.Element;
+declare function FrameRoot(props: ComponentProps<typeof Frame$1>): import("solid-js").JSX.Element;
+export declare const Frame: typeof FrameRoot & {
+  Root: typeof FrameRoot;
+};
 //#endregion

package/dist/components/frame/index.mjs

@@ -1,3 +1,6 @@
+import { n as withSelfRoot } from "../../family-Cmd8HEyK.mjs";
+import { t as useElementId } from "../../id-2ygNzPHF.mjs";
+import { createComponent, mergeProps } from "solid-js";
 import { Frame as Frame$1 } from "@ark-ui/solid/frame";
 //#region src/components/frame/index.ts
 /** Ark's Frame, dressed in the paper-and-ink system: a sandboxed
@@ -7,6 +10,12 @@ import { Frame as Frame$1 } from "@ark-ui/solid/frame";
 * 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. */
-const Frame = Frame$1;
+function FrameRoot(props) {
+	const id = useElementId("frame", () => props.id);
+	return createComponent(Frame$1, mergeProps(props, { get id() {
+		return id();
+	} }));
+}
+const Frame = withSelfRoot(FrameRoot);
 //#endregion
 export { Frame };

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

@@ -9,5 +9,7 @@ export interface GridProps extends JSX.HTMLAttributes<HTMLDivElement> {
    * and the container decides how many fit. */
   minChildWidth?: string;
 }
-export declare function Grid(props: GridProps): JSX.Element;
+export declare const Grid: ((props: GridProps) => JSX.Element) & {
+  Root: (props: GridProps) => JSX.Element;
+};
 //#endregion

package/dist/components/grid/index.mjs

@@ -1,5 +1,6 @@
-import { injectComponentStyle } from "@bysages/core";
+import { n as withSelfRoot } from "../../family-Cmd8HEyK.mjs";
 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>`);
@@ -13,7 +14,7 @@ const gapVars = {
 	lg: "var(--bs-gap-lg)",
 	xl: "var(--bs-gap-xl)"
 };
-function Grid(props) {
+const Grid = withSelfRoot(function Grid(props) {
 	injectComponentStyle("grid");
 	const [own, rest] = splitProps(props, [
 		"columns",
@@ -37,6 +38,6 @@ function Grid(props) {
 		}
 	}], false);
 	return _el$;
-}
+});
 //#endregion
 export { Grid };

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

@@ -3,5 +3,7 @@
  * 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/solid/highlight").HighlightProps) => import("solid-js").JSX.Element;
+export declare const Highlight: ((props: import("@ark-ui/solid/highlight").HighlightProps) => import("solid-js").JSX.Element) & {
+  Root: (props: import("@ark-ui/solid/highlight").HighlightProps) => import("solid-js").JSX.Element;
+};
 //#endregion

package/dist/components/highlight/index.mjs

@@ -1,11 +1,12 @@
-import { injectComponentStyle } from "@bysages/core";
+import { n as withSelfRoot } from "../../family-Cmd8HEyK.mjs";
+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
 * 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;
+const Highlight = withSelfRoot(Highlight$1);
 injectComponentStyle("highlight");
 //#endregion
 export { Highlight };

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

@@ -1,7 +1,25 @@
+import { ComponentProps, JSX } from "solid-js";
 import { HoverCard as HoverCard$1 } from "@ark-ui/solid/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;
+declare function HoverCardRoot(props: ComponentProps<typeof HoverCard$1.Root>): JSX.Element;
+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 | Element;
+  content?: string;
+  label: string;
+  description?: string;
+  disabled?: boolean;
+  placement?: HoverCardPlacement;
+  children?: JSX.Element;
+  onOpenChange?: (open: boolean) => void;
+}
+declare function HoverCardFacade(props: HoverCardFacadeProps): JSX.Element;
+export declare const HoverCard: typeof HoverCardFacade & Omit<typeof HoverCard$1, "Root"> & {
+  Root: typeof HoverCardRoot;
+};
 //#endregion