@bysages/solid 0.3.0 → 0.4.0

package/dist/components/data-view/index.mjs

@@ -1,7 +1,9 @@
+import { n as withSelfRoot } from "../../family-Cmd8HEyK.mjs";
+import { n as useComponentMessages } from "../../use-component-messages-C4SCVYjD.mjs";
 import { Pagination } from "../pagination/index.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { createComponent, effect, insert, memo, setAttribute, spread, template } from "@solidjs/web";
-import { For, Show, createSignal, createUniqueId, splitProps } from "solid-js";
+import { For, Show, createSignal, splitProps } from "solid-js";
 //#region src/components/data-view/index.tsx
 var _tmpl$ = /* @__PURE__ */ template(`<div data-scope=data-view data-part=pager>`);
 var _tmpl$2 = /* @__PURE__ */ template(`<div><div data-scope=data-view data-part=content></div><!>`);
@@ -10,9 +12,8 @@ var _tmpl$3 = /* @__PURE__ */ template(`<div data-scope=data-view data-part=cell
 * renderItem, the view lays the records out as a ledger or a lattice
 * and — when a page size is given — pages them with the pagination
 * family's own parts rather than a second implementation. */
-function DataView(props) {
+const DataView = withSelfRoot(function DataView(props) {
 	injectComponentStyle("data-view");
-	const uid = createUniqueId();
 	const [own, rest] = splitProps(props, [
 		"items",
 		"layout",
@@ -20,6 +21,7 @@ function DataView(props) {
 		"renderItem",
 		"header"
 	]);
+	const messages = useComponentMessages();
 	const [page, setPage] = createSignal(1);
 	const pageCount = () => own.pageSize ? Math.max(1, Math.ceil(own.items.length / own.pageSize)) : 1;
 	const visible = () => own.pageSize ? own.items.slice((page() - 1) * own.pageSize, page() * own.pageSize) : own.items;
@@ -28,8 +30,7 @@ function DataView(props) {
 	var _el$4 = _el$2.nextSibling;
 	spread(_el$, [rest, {
 		"data-scope": "data-view",
-		"data-part": "root",
-		"data-uid": uid
+		"data-part": "root"
 	}], true);
 	insert(_el$, () => {
 		return own.header;
@@ -69,7 +70,9 @@ function DataView(props) {
 				get children() {
 					return [
 						createComponent(Pagination.PrevTrigger, {
-							"aria-label": "Previous page",
+							get "aria-label"() {
+								return messages().pagination.previous;
+							},
 							children: "‹"
 						}),
 						createComponent(Pagination.Context, { children: (pagination) => createComponent(For, {
@@ -92,7 +95,9 @@ function DataView(props) {
 							})
 						}) }),
 						createComponent(Pagination.NextTrigger, {
-							"aria-label": "Next page",
+							get "aria-label"() {
+								return messages().pagination.next;
+							},
 							children: "›"
 						})
 					];
@@ -105,6 +110,6 @@ function DataView(props) {
 		setAttribute(_el$2, "data-layout", _v$);
 	});
 	return _el$;
-}
+});
 //#endregion
 export { DataView };

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

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

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

@@ -1,3 +1,5 @@
+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 "@solidjs/web";
 import { splitProps } from "solid-js";
@@ -5,14 +7,20 @@ import { DateInput as DateInput$1 } from "@ark-ui/solid/date-input";
 //#region src/components/date-input/index.tsx
 function DateInputRoot(props) {
 	const [own, rest] = splitProps(props, ["size"]);
-	return createComponent(DateInput$1.Root, mergeProps(rest, { get "data-size"() {
-		return own.size ?? "md";
-	} }));
+	const id = useElementId("date-input", () => rest.id);
+	return createComponent(DateInput$1.Root, mergeProps(rest, {
+		get id() {
+			return id();
+		},
+		get "data-size"() {
+			return own.size ?? "md";
+		}
+	}));
 }
-const DateInput = {
+const DateInput = defineFamily(DateInputRoot, {
 	...DateInput$1,
 	Root: DateInputRoot
-};
+});
 injectComponentStyle("date-input");
 //#endregion
 export { DateInput };

package/dist/components/date-picker/index.d.mts

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

package/dist/components/date-picker/index.mjs

@@ -1,3 +1,5 @@
+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 "@solidjs/web";
 import { splitProps } from "solid-js";
@@ -5,14 +7,20 @@ import { DatePicker as DatePicker$1 } from "@ark-ui/solid/date-picker";
 //#region src/components/date-picker/index.tsx
 function DatePickerRoot(props) {
 	const [own, rest] = splitProps(props, ["size"]);
-	return createComponent(DatePicker$1.Root, mergeProps(rest, { get "data-size"() {
-		return own.size ?? "md";
-	} }));
+	const id = useElementId("date-picker", () => rest.id);
+	return createComponent(DatePicker$1.Root, mergeProps(rest, {
+		get id() {
+			return id();
+		},
+		get "data-size"() {
+			return own.size ?? "md";
+		}
+	}));
 }
-const DatePicker = {
+const DatePicker = defineFamily(DatePickerRoot, {
 	...DatePicker$1,
 	Root: DatePickerRoot
-};
+});
 injectComponentStyle("date-picker");
 //#endregion
 export { DatePicker };

package/dist/components/deferred-content/index.d.mts

@@ -12,5 +12,7 @@ export interface DeferredContentProps extends JSX.HTMLAttributes<HTMLDivElement>
  * tree until the placeholder scrolls near the viewport, then mounts
  * once and stays. The placeholder is drawn by the caller, so the late
  * arrival costs no layout shift it cannot predict. */
-export declare function DeferredContent(props: DeferredContentProps): JSX.Element;
+export declare const DeferredContent: ((props: DeferredContentProps) => JSX.Element) & {
+  Root: (props: DeferredContentProps) => JSX.Element;
+};
 //#endregion

package/dist/components/deferred-content/index.mjs

@@ -1,3 +1,4 @@
+import { n as withSelfRoot } from "../../family-Cmd8HEyK.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { createComponent, insert, ref, spread, template } from "@solidjs/web";
 import { Show, createSignal, onCleanup, onMount, splitProps } from "solid-js";
@@ -7,7 +8,7 @@ var _tmpl$ = /* @__PURE__ */ template(`<div>`);
 * tree until the placeholder scrolls near the viewport, then mounts
 * once and stays. The placeholder is drawn by the caller, so the late
 * arrival costs no layout shift it cannot predict. */
-function DeferredContent(props) {
+const DeferredContent = withSelfRoot(function DeferredContent(props) {
 	injectComponentStyle("deferred-content");
 	const [own, rest] = splitProps(props, [
 		"threshold",
@@ -47,6 +48,6 @@ function DeferredContent(props) {
 		}
 	}));
 	return _el$;
-}
+});
 //#endregion
 export { DeferredContent };

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

@@ -1,5 +1,11 @@
 import { JSX } from "solid-js";
 //#region src/components/descriptions/index.d.ts
+/** Simple term/detail records for the callable facade. */
+export interface DescriptionsItemData {
+  term: string;
+  detail: string;
+  span?: number;
+}
 /**
  * A ledger laid flat: term and detail pairs in one quiet grid. The
  * horizontal layout reads as a table of two columns; the vertical one
@@ -12,6 +18,7 @@ export interface DescriptionsRootProps extends JSX.HTMLAttributes<HTMLDListEleme
   bordered?: boolean;
   /** Pairs across the grid: one ledger per column. */
   column?: number;
+  items?: DescriptionsItemData[];
 }
 declare function Root(props: DescriptionsRootProps): JSX.Element;
 declare function Item(props: JSX.HTMLAttributes<HTMLDivElement> & {

package/dist/components/descriptions/index.mjs

@@ -1,5 +1,5 @@
 import { injectComponentStyle } from "@bysages/core";
-import { createComponent, mergeProps, spread, template } from "@solidjs/web";
+import { createComponent, insert, mergeProps, spread, template } from "@solidjs/web";
 import { splitProps } from "solid-js";
 //#region src/components/descriptions/index.tsx
 var _tmpl$ = /* @__PURE__ */ template(`<dl>`);
@@ -9,6 +9,8 @@ function Root(props) {
 		"layout",
 		"bordered",
 		"column",
+		"items",
+		"children",
 		"style"
 	]);
 	var _el$ = _tmpl$();
@@ -27,7 +29,10 @@ function Root(props) {
 		get "data-bordered"() {
 			return own.bordered || void 0;
 		}
-	}], false);
+	}], true);
+	insert(_el$, () => {
+		return own.children ?? renderItems(own.items);
+	});
 	return _el$;
 }
 function part(name, tag) {
@@ -58,6 +63,20 @@ function Item(props) {
 }
 const Term = part("Term", "dt");
 const Detail = part("Detail", "dd");
+function renderItems(items) {
+	return items?.map((item) => createComponent(Item, {
+		get span() {
+			return item.span;
+		},
+		get children() {
+			return [createComponent(Term, { get children() {
+				return item.term;
+			} }), createComponent(Detail, { get children() {
+				return item.detail;
+			} })];
+		}
+	}));
+}
 const Descriptions = Object.assign(Root, {
 	Root,
 	Item,

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

@@ -1,9 +1,25 @@
+import { ComponentProps, JSX } from "solid-js";
 import { Dialog as Dialog$1, DialogOpenChangeDetails } from "@ark-ui/solid/dialog";
 //#region src/components/dialog/index.d.ts
 /** Ark's Dialog, dressed in the paper-and-ink system: the sheet dissolves
  * in on elevation, the backdrop fades, and nested overlays stack through
  * the shared z-index ladder. The API is Ark's own — Root, Trigger,
  * Backdrop, Positioner, Content, Title, Description, CloseTrigger. */
-export declare const Dialog: typeof Dialog$1;
+declare function DialogRoot(props: ComponentProps<typeof Dialog$1.Root>): JSX.Element;
+export interface DialogFacadeProps {
+  open?: boolean;
+  defaultOpen?: boolean;
+  trigger?: string;
+  content?: string;
+  label?: string;
+  description?: string;
+  disabled?: boolean;
+  children?: JSX.Element;
+  onOpenChange?: (open: boolean) => void;
+}
+declare function DialogFacade(props: DialogFacadeProps): JSX.Element;
+export declare const Dialog: typeof DialogFacade & Omit<typeof Dialog$1, "Root"> & {
+  Root: typeof DialogRoot;
+};
 //#endregion
 export type { DialogOpenChangeDetails };

package/dist/components/dialog/index.mjs

@@ -1,11 +1,93 @@
+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, insert, memo, mergeProps, template } from "@solidjs/web";
+import { Show, createComponent as createComponent$1, mergeProps as mergeProps$1 } from "solid-js";
 import { Dialog as Dialog$1 } from "@ark-ui/solid/dialog";
-//#region src/components/dialog/index.ts
+//#region src/components/dialog/index.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<p>`);
 /** Ark's Dialog, dressed in the paper-and-ink system: the sheet dissolves
 * in on elevation, the backdrop fades, and nested overlays stack through
 * the shared z-index ladder. The API is Ark's own — Root, Trigger,
 * Backdrop, Positioner, Content, Title, Description, CloseTrigger. */
-const Dialog = Dialog$1;
+function DialogRoot(props) {
+	const id = useElementId("dialog", () => props.id);
+	return createComponent$1(Dialog$1.Root, mergeProps$1(props, { get id() {
+		return id();
+	} }));
+}
+function DialogFacade(props) {
+	injectComponentStyle("dialog");
+	const title = () => props.label ?? props.trigger;
+	return createComponent(DialogRoot, 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(Dialog$1.Trigger, {
+					get disabled() {
+						return props.disabled;
+					},
+					get children() {
+						return title() ?? "Open";
+					}
+				}),
+				createComponent(Dialog$1.Backdrop, {}),
+				createComponent(Dialog$1.Positioner, { get children() {
+					return createComponent(Dialog$1.Content, { get children() {
+						return [
+							createComponent(Dialog$1.Title, { get children() {
+								return title();
+							} }),
+							createComponent(Show, {
+								get when() {
+									return props.description;
+								},
+								get children() {
+									return createComponent(Dialog$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(Dialog$1.CloseTrigger, {
+								"aria-label": "Close",
+								get children() {
+									return iconNode("x", {
+										width: 14,
+										height: 14
+									});
+								}
+							})
+						];
+					} });
+				} })
+			];
+		}
+	}));
+}
+const Dialog = defineFamily(DialogFacade, {
+	...Dialog$1,
+	Root: DialogRoot
+});
 injectComponentStyle("dialog");
 //#endregion
 export { Dialog };

package/dist/components/download-trigger/index.d.mts

@@ -1,2 +1,7 @@
-import { DownloadTrigger, DownloadTriggerBaseProps, DownloadTriggerProps, DownloadableData, UseDownloadProps, UseDownloadReturn, useDownload } from "@ark-ui/solid/download-trigger";
-export { DownloadTrigger, type DownloadTriggerBaseProps, type DownloadTriggerProps, type DownloadableData, type UseDownloadProps, type UseDownloadReturn, useDownload };
+import { DownloadTrigger as DownloadTrigger$1, DownloadTriggerBaseProps, DownloadTriggerProps, DownloadableData, UseDownloadProps, UseDownloadReturn, useDownload } from "@ark-ui/solid/download-trigger";
+//#region src/components/download-trigger/index.d.ts
+export declare const DownloadTrigger: typeof DownloadTrigger$1 & {
+  Root: typeof DownloadTrigger$1;
+};
+//#endregion
+export { type DownloadTriggerBaseProps, type DownloadTriggerProps, type DownloadableData, type UseDownloadProps, type UseDownloadReturn, useDownload };

package/dist/components/download-trigger/index.mjs

@@ -1,2 +1,9 @@
-import { DownloadTrigger, useDownload } from "@ark-ui/solid/download-trigger";
+import { n as withSelfRoot } from "../../family-Cmd8HEyK.mjs";
+import { DownloadTrigger as DownloadTrigger$1, useDownload } from "@ark-ui/solid/download-trigger";
+//#region src/components/download-trigger/index.ts
+/** Trigger a client-side download of in-memory data from a plain
+* element — the headless counterpart to a save button. Also exposed:
+* the primitive beneath the component, for custom triggers. */
+const DownloadTrigger = withSelfRoot(DownloadTrigger$1);
+//#endregion
 export { DownloadTrigger, useDownload };

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

@@ -1,3 +1,4 @@
+import { ComponentProps, JSX } from "solid-js";
 import { Drawer as Drawer$1 } from "@ark-ui/solid/drawer";
 //#region src/components/drawer/index.d.ts
 /** Ark's Drawer, dressed in the paper-and-ink system: a full-height sheet
@@ -5,5 +6,20 @@ import { Drawer as Drawer$1 } from "@ark-ui/solid/drawer";
  * under the grabber's hand. The API is Ark's own — Root, Trigger,
  * Backdrop, Positioner, Content, Grabber, GrabberIndicator, Title,
  * Description, CloseTrigger, SwipeArea. */
-export declare const Drawer: typeof Drawer$1;
+declare function DrawerRoot(props: ComponentProps<typeof Drawer$1.Root>): JSX.Element;
+export interface DrawerFacadeProps {
+  open?: boolean;
+  defaultOpen?: boolean;
+  trigger?: string;
+  content?: string;
+  label: string;
+  description?: string;
+  disabled?: boolean;
+  children?: JSX.Element;
+  onOpenChange?: (open: boolean) => void;
+}
+declare function DrawerFacade(props: DrawerFacadeProps): JSX.Element;
+export declare const Drawer: typeof DrawerFacade & Omit<typeof Drawer$1, "Root"> & {
+  Root: typeof DrawerRoot;
+};
 //#endregion

package/dist/components/drawer/index.mjs

@@ -1,12 +1,93 @@
+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, insert, memo, mergeProps, template } from "@solidjs/web";
+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,12 +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 { t as Input } from "../../input-DoFQ7RXh.mjs";
+import { n as useComponentMessages } from "../../use-component-messages-C4SCVYjD.mjs";
+import { t as Input } from "../../input-CPAJdwDb.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { createComponent, insert, memo, spread, template } from "@solidjs/web";
 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
@@ -15,7 +17,8 @@ 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, [
 		"value",
@@ -85,7 +88,9 @@ function DynamicInput(props) {
 				get disabled() {
 					return own.disabled || !canRemove();
 				},
-				"aria-label": `Remove entry ${index + 1}`,
+				get "aria-label"() {
+					return `${messages().dynamicEntry.remove} ${index + 1}`;
+				},
 				onClick: () => remove(index),
 				get children() {
 					return crossIcon();
@@ -110,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,3 +1,5 @@
+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 "@solidjs/web";
 import { splitProps } from "solid-js";
@@ -5,14 +7,20 @@ 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 { n as withSelfRoot } from "../../family-Cmd8HEyK.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { spread, template } from "@solidjs/web";
 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 };