@bysages/solid 0.3.0 → 0.4.0

package/dist/components/ai-prompt-input/index.mjs

@@ -1,19 +1,24 @@
+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 { Field } from "../field/index.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { claimElement, createComponent, insert, setAttribute, spread, template } from "@solidjs/web";
 import { Show, splitProps } from "solid-js";
 //#region src/components/ai-prompt-input/index.tsx
-var _tmpl$ = /* @__PURE__ */ template(`<svg viewBox="0 0 16 16"width=14 height=14 aria-hidden=true fill=none stroke=currentColor stroke-width=1.5 stroke-linecap=square><path d="M8 13V3M3.5 7.5 8 3l4.5 4.5">`);
-var _tmpl$2 = /* @__PURE__ */ template(`<svg viewBox="0 0 16 16"width=14 height=14 aria-hidden=true><rect x=4.5 y=4.5 width=7 height=7 fill=currentColor>`);
-var _tmpl$3 = /* @__PURE__ */ template(`<div data-scope=ai>`);
-var _tmpl$4 = /* @__PURE__ */ template(`<div data-scope=ai data-part=prompt-footer><div data-scope=ai data-part=prompt-end><!><!>`);
-var _tmpl$5 = /* @__PURE__ */ template(`<form><div data-scope=ai data-part=prompt-main><!><!><!></div><!>`);
-function arrowUpGlyph() {
-	return _tmpl$();
+var _tmpl$ = /* @__PURE__ */ template(`<svg viewBox="0 0 16 16"width=14 height=14 aria-hidden=true><rect x=4.5 y=4.5 width=7 height=7 fill=currentColor>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<div data-scope=ai>`);
+var _tmpl$3 = /* @__PURE__ */ template(`<div data-scope=ai data-part=prompt-footer><div data-scope=ai data-part=prompt-end><!><!>`);
+var _tmpl$4 = /* @__PURE__ */ template(`<form><div data-scope=ai data-part=prompt-main><!><!><!></div><!>`);
+function arrowUpIcon() {
+	return iconNode("arrow-up", {
+		width: "14",
+		height: "14"
+	});
 }
-function stopGlyph() {
-	return _tmpl$2();
+function stopIcon() {
+	return _tmpl$();
 }
 /** The prompt vessel: the shared field textarea — self-growing on the
 * machine's autoresize — with the submit seal riding its last line.
@@ -27,7 +32,7 @@ function stopGlyph() {
 * and take the text on `onSubmit`. Enter sends; Shift+Enter breaks the
 * line. While `busy` the seal becomes a stop seal and Enter holds its
 * breath. */
-function PromptInput(props) {
+const PromptInput = withSelfRoot(function PromptInput(props) {
 	injectComponentStyle("ai");
 	const [own, rest] = splitProps(props, [
 		"value",
@@ -43,6 +48,7 @@ function PromptInput(props) {
 		"footer",
 		"footerEnd"
 	]);
+	const messages = useComponentMessages();
 	const send = () => {
 		const value = (own.value ?? "").trim();
 		if (!value || own.disabled || own.busy) return;
@@ -50,46 +56,50 @@ function PromptInput(props) {
 		own.onValueChange?.("");
 	};
 	const row = (part, content) => content != null ? (() => {
-		var _el$3 = _tmpl$3();
-		setAttribute(_el$3, "data-part", part);
-		insert(_el$3, content);
-		return _el$3;
+		var _el$2 = _tmpl$2();
+		setAttribute(_el$2, "data-part", part);
+		insert(_el$2, content);
+		return _el$2;
 	})() : null;
 	const seal = () => own.busy ? createComponent(Button, {
 		variant: "solid",
 		size: "sm",
 		square: true,
 		type: "button",
-		"aria-label": "Stop",
+		get "aria-label"() {
+			return messages().ai.stop;
+		},
 		get disabled() {
 			return own.disabled;
 		},
 		onClick: () => own.onStop?.(),
 		get children() {
-			return stopGlyph();
+			return stopIcon();
 		}
 	}) : createComponent(Button, {
 		variant: "solid",
 		size: "sm",
 		square: true,
 		type: "submit",
-		"aria-label": "Send",
+		get "aria-label"() {
+			return messages().ai.send;
+		},
 		get disabled() {
 			return own.disabled || !(own.value ?? "").trim();
 		},
 		get children() {
-			return arrowUpGlyph();
+			return arrowUpIcon();
 		}
 	});
 	const trailing = () => own.footer != null ? own.trailing : own.trailing ?? seal();
-	var _el$4 = _tmpl$5();
+	var _el$3 = _tmpl$4();
+	var _el$4 = _el$3.firstChild;
 	var _el$5 = _el$4.firstChild;
-	var _el$6 = _el$5.firstChild;
+	var _el$6 = _el$5.nextSibling;
 	var _el$7 = _el$6.nextSibling;
-	var _el$8 = _el$7.nextSibling;
-	var _el$13 = _el$5.nextSibling;
-	claimElement(_el$4);
-	spread(_el$4, [rest, {
+	var _el$12 = _el$4.nextSibling;
+	claimElement(_el$3);
+	spread(_el$3, [rest, {
 		"data-scope": "ai",
 		"data-part": "prompt",
 		onSubmit: (event) => {
@@ -97,13 +107,13 @@ function PromptInput(props) {
 			send();
 		}
 	}], true);
-	insert(_el$4, () => {
+	insert(_el$3, () => {
 		return row("prompt-header", own.header);
-	}, _el$5);
-	insert(_el$5, () => {
+	}, _el$4);
+	insert(_el$4, () => {
 		return row("prompt-leading", own.leading);
-	}, _el$6);
-	insert(_el$5, createComponent(Field.Root, { get children() {
+	}, _el$5);
+	insert(_el$4, createComponent(Field.Root, { get children() {
 		return createComponent(Field.Textarea, {
 			autoresize: true,
 			rows: 1,
@@ -111,7 +121,10 @@ function PromptInput(props) {
 				return own.value ?? "";
 			},
 			get placeholder() {
-				return own.placeholder ?? "Send a message";
+				return own.placeholder ?? messages().ai.send;
+			},
+			get "aria-label"() {
+				return messages().ai.conversation;
 			},
 			get disabled() {
 				return own.disabled;
@@ -124,30 +137,30 @@ function PromptInput(props) {
 				}
 			}
 		});
-	} }), _el$7);
-	insert(_el$5, () => {
+	} }), _el$6);
+	insert(_el$4, () => {
 		return row("prompt-trailing", trailing());
-	}, _el$8);
-	insert(_el$4, createComponent(Show, {
+	}, _el$7);
+	insert(_el$3, createComponent(Show, {
 		get when() {
 			return own.footer != null;
 		},
 		get children() {
-			var _el$9 = _tmpl$4();
+			var _el$8 = _tmpl$3();
+			var _el$9 = _el$8.firstChild;
 			var _el$10 = _el$9.firstChild;
-			var _el$11 = _el$10.firstChild;
-			var _el$12 = _el$11.nextSibling;
-			insert(_el$9, () => {
+			var _el$11 = _el$10.nextSibling;
+			insert(_el$8, () => {
 				return own.footer;
-			}, _el$10);
-			insert(_el$10, () => {
+			}, _el$9);
+			insert(_el$9, () => {
 				return own.footerEnd;
-			}, _el$11);
-			insert(_el$10, seal, _el$12);
-			return _el$9;
+			}, _el$10);
+			insert(_el$9, seal, _el$11);
+			return _el$8;
 		}
-	}), _el$13);
-	return _el$4;
-}
+	}), _el$12);
+	return _el$3;
+});
 //#endregion
 export { PromptInput as AiPromptInput, PromptInput };

package/dist/components/ai-reasoning/index.d.mts

@@ -8,6 +8,8 @@ export interface ReasoningProps extends JSX.HTMLAttributes<HTMLDivElement> {
 }
 /** The model's thought, folded by the shared collapsible in its quiet
  * register: bare ink for a trigger, the thought on one hairline. */
-export declare function Reasoning(props: ReasoningProps): JSX.Element;
+export declare const Reasoning: ((props: ReasoningProps) => JSX.Element) & {
+  Root: (props: ReasoningProps) => JSX.Element;
+};
 //#endregion
 export { Reasoning as AiReasoning };

package/dist/components/ai-reasoning/index.mjs

@@ -1,4 +1,5 @@
-import { t as chevron } from "../../chevron-D5RzcayK.mjs";
+import { n as withSelfRoot } from "../../family-Cmd8HEyK.mjs";
+import { t as chevron } from "../../chevron-BHQrYKPM.mjs";
 import { Collapsible } from "../collapsible/index.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { createComponent, insert, mergeProps, template } from "@solidjs/web";
@@ -8,7 +9,7 @@ var _tmpl$ = /* @__PURE__ */ template(`<span>`);
 var _tmpl$2 = /* @__PURE__ */ template(`<div data-scope=ai data-part=reasoning-content>`);
 /** The model's thought, folded by the shared collapsible in its quiet
 * register: bare ink for a trigger, the thought on one hairline. */
-function Reasoning(props) {
+const Reasoning = withSelfRoot(function Reasoning(props) {
 	injectComponentStyle("ai");
 	const [own, rest] = splitProps(props, ["label", "children"]);
 	return createComponent(Collapsible.Root, mergeProps(rest, {
@@ -33,6 +34,6 @@ function Reasoning(props) {
 			} })];
 		}
 	}));
-}
+});
 //#endregion
 export { Reasoning as AiReasoning, Reasoning };

package/dist/components/ai-response/index.d.mts

@@ -15,6 +15,8 @@ export interface ResponseProps extends JSX.HTMLAttributes<HTMLDivElement> {
 /** Markdown set on the paper. Rendering goes through
  * `@tanstack/markdown`, whose defaults leave raw HTML and executable
  * links inert — streaming-safe by construction. */
-export declare function Response(props: ResponseProps): JSX.Element;
+export declare const Response: ((props: ResponseProps) => JSX.Element) & {
+  Root: (props: ResponseProps) => JSX.Element;
+};
 //#endregion
 export { Response as AiResponse };

package/dist/components/ai-response/index.mjs

@@ -1,2 +1,2 @@
-import { t as Response } from "../../ai-response-ClGGptX3.mjs";
+import { t as Response } from "../../ai-response-D2uINBIi.mjs";
 export { Response as AiResponse, Response };

package/dist/components/ai-source/index.d.mts

@@ -6,8 +6,12 @@ export interface SourceProps extends JSX.HTMLAttributes<HTMLAnchorElement> {
   href: string;
 }
 /** One place the ink came from; href and the rest ride the anchor. */
-export declare function Source(props: SourceProps): JSX.Element;
+export declare const Source: ((props: SourceProps) => JSX.Element) & {
+  Root: (props: SourceProps) => JSX.Element;
+};
 /** The reading list under a response: where this ink came from. */
-export declare function Sources(props: JSX.HTMLAttributes<HTMLOListElement>): JSX.Element;
+export declare const Sources: ((props: JSX.HTMLAttributes<HTMLOListElement>) => JSX.Element) & {
+  Root: (props: JSX.HTMLAttributes<HTMLOListElement>) => JSX.Element;
+};
 //#endregion
 export { Source as AiSource, Sources as AiSources };

package/dist/components/ai-source/index.mjs

@@ -1,3 +1,4 @@
+import { n as withSelfRoot } from "../../family-Cmd8HEyK.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { claimElement, insert, spread, template } from "@solidjs/web";
 import { splitProps } from "solid-js";
@@ -5,7 +6,7 @@ import { splitProps } from "solid-js";
 var _tmpl$ = /* @__PURE__ */ template(`<li data-scope=ai data-part=source><a>`);
 var _tmpl$2 = /* @__PURE__ */ template(`<ol>`);
 /** One place the ink came from; href and the rest ride the anchor. */
-function Source(props) {
+const Source = withSelfRoot(function Source(props) {
 	injectComponentStyle("ai");
 	const [own, rest] = splitProps(props, ["href", "children"]);
 	var _el$ = _tmpl$();
@@ -22,15 +23,15 @@ function Source(props) {
 		return own.children ?? own.href;
 	});
 	return _el$;
-}
+});
 /** The reading list under a response: where this ink came from. */
-function Sources(props) {
+const Sources = withSelfRoot(function Sources(props) {
 	var _el$3 = _tmpl$2();
 	spread(_el$3, [props, {
 		"data-scope": "ai",
 		"data-part": "sources"
 	}], false);
 	return _el$3;
-}
+});
 //#endregion
 export { Source as AiSource, Source, Sources as AiSources, Sources };

package/dist/components/ai-suggestion/index.d.mts

@@ -8,6 +8,8 @@ export interface SuggestionProps extends Omit<JSX.HTMLAttributes<HTMLButtonEleme
 }
 /** A seal-cut button proposing the next stroke; selection hands back
  * the prompt. The shared Button in its outline register. */
-export declare function Suggestion(props: SuggestionProps): JSX.Element;
+export declare const Suggestion: ((props: SuggestionProps) => JSX.Element) & {
+  Root: (props: SuggestionProps) => JSX.Element;
+};
 //#endregion
 export { Suggestion as AiSuggestion };

package/dist/components/ai-suggestion/index.mjs

@@ -1,3 +1,4 @@
+import { n as withSelfRoot } from "../../family-Cmd8HEyK.mjs";
 import { Button } from "../button/index.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { createComponent, mergeProps } from "@solidjs/web";
@@ -5,7 +6,7 @@ import { splitProps } from "solid-js";
 //#region src/components/ai-suggestion/index.tsx
 /** A seal-cut button proposing the next stroke; selection hands back
 * the prompt. The shared Button in its outline register. */
-function Suggestion(props) {
+const Suggestion = withSelfRoot(function Suggestion(props) {
 	injectComponentStyle("ai");
 	const [own, rest] = splitProps(props, ["prompt", "onSelect"]);
 	return createComponent(Button, mergeProps({
@@ -17,6 +18,6 @@ function Suggestion(props) {
 			return own.prompt;
 		}
 	}));
-}
+});
 //#endregion
 export { Suggestion as AiSuggestion, Suggestion };

package/dist/components/ai-tool/index.d.mts

@@ -18,6 +18,8 @@ export interface ToolProps extends JSX.HTMLAttributes<HTMLDivElement> {
 /** A tool call: the shared collapsible as the vessel — the name it was
  * reached by and the state it reached in on the trigger, its input and
  * output folded inside. */
-export declare function Tool(props: ToolProps): JSX.Element;
+export declare const Tool: ((props: ToolProps) => JSX.Element) & {
+  Root: (props: ToolProps) => JSX.Element;
+};
 //#endregion
 export { Tool as AiTool };

package/dist/components/ai-tool/index.mjs

@@ -1,4 +1,5 @@
-import { t as chevron } from "../../chevron-D5RzcayK.mjs";
+import { n as withSelfRoot } from "../../family-Cmd8HEyK.mjs";
+import { t as chevron } from "../../chevron-BHQrYKPM.mjs";
 import { Collapsible } from "../collapsible/index.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { createComponent, insert, mergeProps, template } from "@solidjs/web";
@@ -13,7 +14,7 @@ var _tmpl$6 = /* @__PURE__ */ template(`<div data-scope=ai data-part=tool-body><
 /** A tool call: the shared collapsible as the vessel — the name it was
 * reached by and the state it reached in on the trigger, its input and
 * output folded inside. */
-function Tool(props) {
+const Tool = withSelfRoot(function Tool(props) {
 	injectComponentStyle("ai");
 	const [own, rest] = splitProps(props, [
 		"name",
@@ -85,6 +86,6 @@ function Tool(props) {
 			return _el$3;
 		} })];
 	} }));
-}
+});
 //#endregion
 export { Tool as AiTool, Tool };

package/dist/components/alert/index.mjs

@@ -1,26 +1,23 @@
+import { r as iconNode } from "../../icon-DTqmJCd5.mjs";
 import { injectComponentStyle } from "@bysages/core";
-import { createComponent, effect, insert, setAttribute, spread, template } from "@solidjs/web";
+import { createComponent, insert, spread, template } from "@solidjs/web";
 import { createContext, splitProps, useContext } from "solid-js";
 //#region src/components/alert/index.tsx
-var _tmpl$ = /* @__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>`);
-var _tmpl$2 = /* @__PURE__ */ template(`<div>`);
-var _tmpl$3 = /* @__PURE__ */ template(`<span data-scope=alert data-part=icon>`);
-var _tmpl$4 = /* @__PURE__ */ template(`<p>`);
+var _tmpl$ = /* @__PURE__ */ template(`<div>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<span data-scope=alert data-part=icon>`);
+var _tmpl$3 = /* @__PURE__ */ template(`<p>`);
 const StatusContext = createContext(() => "ink");
-function glyph(status) {
-	const paths = {
-		info: "M12 8v5m0 3v.01M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18Z",
-		success: "m4 12.5 5 5L20 6.5",
-		warning: "M12 4 2.5 20h19L12 4Zm0 6v4m0 3v.01",
-		danger: "M6 6l12 12M18 6 6 18",
-		ink: "M12 8v5m0 3v.01M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18Z"
-	};
-	var _el$ = _tmpl$();
-	var _el$2 = _el$.firstChild;
-	effect(() => paths[status], (_v$) => {
-		setAttribute(_el$2, "d", _v$);
+function statusIcon(status) {
+	return iconNode({
+		ink: "info",
+		info: "info",
+		success: "circle-check",
+		warning: "triangle-alert",
+		danger: "circle-x"
+	}[status], {
+		width: "16",
+		height: "16"
 	});
-	return _el$;
 }
 function AlertRoot(props) {
 	const [own, rest] = splitProps(props, ["status"]);
@@ -28,8 +25,8 @@ function AlertRoot(props) {
 	return createComponent(StatusContext.Provider, {
 		value: status,
 		get children() {
-			var _el$3 = _tmpl$2();
-			spread(_el$3, [rest, {
+			var _el$ = _tmpl$();
+			spread(_el$, [rest, {
 				get role() {
 					return status() === "ink" || status() === "info" ? "status" : "alert";
 				},
@@ -39,41 +36,41 @@ function AlertRoot(props) {
 					return status();
 				}
 			}], false);
-			return _el$3;
+			return _el$;
 		}
 	});
 }
 function Icon() {
 	const status = useContext(StatusContext);
-	var _el$4 = _tmpl$3();
-	insert(_el$4, () => {
-		return glyph(status());
+	var _el$2 = _tmpl$2();
+	insert(_el$2, () => {
+		return statusIcon(status());
 	});
-	return _el$4;
+	return _el$2;
 }
 function Body(props) {
-	var _el$5 = _tmpl$2();
-	spread(_el$5, [props, {
+	var _el$3 = _tmpl$();
+	spread(_el$3, [props, {
 		"data-scope": "alert",
 		"data-part": "body"
 	}], false);
-	return _el$5;
+	return _el$3;
 }
 function Title(props) {
-	var _el$6 = _tmpl$4();
-	spread(_el$6, [props, {
+	var _el$4 = _tmpl$3();
+	spread(_el$4, [props, {
 		"data-scope": "alert",
 		"data-part": "title"
 	}], false);
-	return _el$6;
+	return _el$4;
 }
 function Description(props) {
-	var _el$7 = _tmpl$4();
-	spread(_el$7, [props, {
+	var _el$5 = _tmpl$3();
+	spread(_el$5, [props, {
 		"data-scope": "alert",
 		"data-part": "description"
 	}], false);
-	return _el$7;
+	return _el$5;
 }
 const Alert = Object.assign(AlertRoot, {
 	Root: AlertRoot,

package/dist/components/angle-slider/index.d.mts

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

package/dist/components/angle-slider/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 { AngleSlider as AngleSlider$1 } from "@ark-ui/solid/angle-slider";
 //#region src/components/angle-slider/index.tsx
 function AngleSliderRoot(props) {
 	const [own, rest] = splitProps(props, ["size"]);
-	return createComponent(AngleSlider$1.Root, mergeProps(rest, { get "data-size"() {
-		return own.size ?? "md";
-	} }));
+	const id = useElementId("angle-slider", () => rest.id);
+	return createComponent(AngleSlider$1.Root, mergeProps(rest, {
+		get id() {
+			return id();
+		},
+		get "data-size"() {
+			return own.size ?? "md";
+		}
+	}));
 }
-const AngleSlider = {
+const AngleSlider = defineFamily(AngleSliderRoot, {
 	...AngleSlider$1,
 	Root: AngleSliderRoot
-};
+});
 injectComponentStyle("angle-slider");
 //#endregion
 export { AngleSlider };

package/dist/components/aspect-ratio/index.d.mts

@@ -6,5 +6,7 @@ export interface AspectRatioProps extends JSX.HTMLAttributes<HTMLDivElement> {
   /** A CSS `aspect-ratio` value — "16 / 9", "4 / 3", "1 / 1". */
   ratio?: string;
 }
-export declare function AspectRatio(props: AspectRatioProps): JSX.Element;
+export declare const AspectRatio: ((props: AspectRatioProps) => JSX.Element) & {
+  Root: (props: AspectRatioProps) => JSX.Element;
+};
 //#endregion

package/dist/components/aspect-ratio/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/aspect-ratio/index.tsx
 var _tmpl$ = /* @__PURE__ */ template(`<div>`);
-function AspectRatio(props) {
+const AspectRatio = withSelfRoot(function AspectRatio(props) {
 	injectComponentStyle("aspect-ratio");
 	const [own, rest] = splitProps(props, ["ratio"]);
 	var _el$ = _tmpl$();
@@ -18,6 +19,6 @@ function AspectRatio(props) {
 		"data-part": "root"
 	}], false);
 	return _el$;
-}
+});
 //#endregion
 export { AspectRatio };

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

@@ -1,5 +1,7 @@
+import { Combobox } from "../combobox/index.mjs";
 //#region src/components/autocomplete/index.d.ts
 export interface AutoCompleteProps {
+  id?: string;
   value?: string;
   items?: string[];
   placeholder?: string;
@@ -17,5 +19,6 @@ export interface AutoCompleteProps {
  * matching is a case-insensitive substring unless `filter` says
  * otherwise.
  */
-export declare function AutoComplete(props: AutoCompleteProps): import("solid-js").JSX.Element;
+declare function AutoCompleteImpl(props: AutoCompleteProps): import("solid-js").JSX.Element;
+export declare const AutoComplete: typeof AutoCompleteImpl & typeof Combobox;
 //#endregion

package/dist/components/autocomplete/index.mjs

@@ -1,3 +1,7 @@
+import { t as defineFamily } from "../../family-Cmd8HEyK.mjs";
+import { t as useElementId } from "../../id-2ygNzPHF.mjs";
+import { n as useComponentMessages } from "../../use-component-messages-C4SCVYjD.mjs";
+import { Combobox as Combobox$1 } from "../combobox/index.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { createComponent, mergeProps } from "@solidjs/web";
 import { For, splitProps } from "solid-js";
@@ -13,9 +17,11 @@ import { Portal } from "solid-js/web";
 * matching is a case-insensitive substring unless `filter` says
 * otherwise.
 */
-function AutoComplete(props) {
+function AutoCompleteImpl(props) {
+	const messages = useComponentMessages();
 	injectComponentStyle("combobox");
 	const [own, rest] = splitProps(props, [
+		"id",
 		"value",
 		"items",
 		"placeholder",
@@ -23,11 +29,15 @@ function AutoComplete(props) {
 		"filter",
 		"onValueChange"
 	]);
+	const id = useElementId("autocomplete", () => props.id);
 	const { collection, filter } = useListCollection({
 		initialItems: own.items ?? [],
 		filter: (item, input) => own.filter ? own.filter(item, input) : item.toLowerCase().includes(input.toLowerCase())
 	});
 	return createComponent(Combobox.Root, mergeProps(rest, {
+		get id() {
+			return id();
+		},
 		get collection() {
 			return collection();
 		},
@@ -55,7 +65,9 @@ function AutoComplete(props) {
 			} }), createComponent(Portal, { get children() {
 				return createComponent(Combobox.Positioner, { get children() {
 					return createComponent(Combobox.Content, { get children() {
-						return [createComponent(Combobox.Empty, { children: "No matches" }), createComponent(For, {
+						return [createComponent(Combobox.Empty, { get children() {
+							return messages().command.noMatches;
+						} }), createComponent(For, {
 							get each() {
 								return collection().items;
 							},
@@ -72,5 +84,6 @@ function AutoComplete(props) {
 		}
 	}));
 }
+const AutoComplete = defineFamily(AutoCompleteImpl, Combobox$1);
 //#endregion
 export { AutoComplete };

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

@@ -17,7 +17,7 @@ export interface AvatarProps extends ComponentProps<typeof Avatar$1.Root> {
   shape?: "circle" | "square";
 }
 declare function AvatarRoot(props: AvatarProps): import("solid-js").JSX.Element;
-export declare const Avatar: typeof Avatar$1 & {
+export declare const Avatar: typeof AvatarRoot & Omit<typeof Avatar$1, "Root"> & {
   Root: typeof AvatarRoot;
 };
 //#endregion

package/dist/components/avatar/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,7 +7,11 @@ import { Avatar as Avatar$1 } from "@ark-ui/solid/avatar";
 //#region src/components/avatar/index.tsx
 function AvatarRoot(props) {
 	const [own, rest] = splitProps(props, ["size", "shape"]);
+	const id = useElementId("avatar", () => rest.id);
 	return createComponent(Avatar$1.Root, mergeProps(rest, {
+		get id() {
+			return id();
+		},
 		get "data-size"() {
 			return own.size;
 		},
@@ -14,7 +20,10 @@ function AvatarRoot(props) {
 		}
 	}));
 }
-const Avatar = Object.assign({}, Avatar$1, { Root: AvatarRoot });
+const Avatar = defineFamily(AvatarRoot, {
+	...Avatar$1,
+	Root: AvatarRoot
+});
 injectComponentStyle("avatar");
 //#endregion
 export { Avatar };