@bysages/solid 0.2.2 → 0.3.0

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

@@ -0,0 +1,153 @@
+import { Button } from "../button/index.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$();
+}
+function stopGlyph() {
+	return _tmpl$2();
+}
+/** The prompt vessel: the shared field textarea — self-growing on the
+* machine's autoresize — with the submit seal riding its last line.
+* Around the body, the slot props answer the composer's anatomy:
+* `header` for attachments riding above, `leading` for the tools at
+* the text's left, `trailing` for the seal itself, `footer` for the
+* tools beneath, and `footerEnd` for the controls that close the
+* footer row — the seal falls there by default, so a model picker
+* dropped in rides the send's shoulder. An empty slot renders no part,
+* so the bare vessel stays one quiet line. Controlled — bind `value`
+* 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) {
+	injectComponentStyle("ai");
+	const [own, rest] = splitProps(props, [
+		"value",
+		"onValueChange",
+		"onSubmit",
+		"onStop",
+		"placeholder",
+		"disabled",
+		"busy",
+		"header",
+		"leading",
+		"trailing",
+		"footer",
+		"footerEnd"
+	]);
+	const send = () => {
+		const value = (own.value ?? "").trim();
+		if (!value || own.disabled || own.busy) return;
+		own.onSubmit?.(value);
+		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;
+	})() : null;
+	const seal = () => own.busy ? createComponent(Button, {
+		variant: "solid",
+		size: "sm",
+		square: true,
+		type: "button",
+		"aria-label": "Stop",
+		get disabled() {
+			return own.disabled;
+		},
+		onClick: () => own.onStop?.(),
+		get children() {
+			return stopGlyph();
+		}
+	}) : createComponent(Button, {
+		variant: "solid",
+		size: "sm",
+		square: true,
+		type: "submit",
+		"aria-label": "Send",
+		get disabled() {
+			return own.disabled || !(own.value ?? "").trim();
+		},
+		get children() {
+			return arrowUpGlyph();
+		}
+	});
+	const trailing = () => own.footer != null ? own.trailing : own.trailing ?? seal();
+	var _el$4 = _tmpl$5();
+	var _el$5 = _el$4.firstChild;
+	var _el$6 = _el$5.firstChild;
+	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, {
+		"data-scope": "ai",
+		"data-part": "prompt",
+		onSubmit: (event) => {
+			event.preventDefault();
+			send();
+		}
+	}], true);
+	insert(_el$4, () => {
+		return row("prompt-header", own.header);
+	}, _el$5);
+	insert(_el$5, () => {
+		return row("prompt-leading", own.leading);
+	}, _el$6);
+	insert(_el$5, createComponent(Field.Root, { get children() {
+		return createComponent(Field.Textarea, {
+			autoresize: true,
+			rows: 1,
+			get value() {
+				return own.value ?? "";
+			},
+			get placeholder() {
+				return own.placeholder ?? "Send a message";
+			},
+			get disabled() {
+				return own.disabled;
+			},
+			onInput: (event) => own.onValueChange?.(event.currentTarget.value),
+			onKeyDown: (event) => {
+				if (event.key === "Enter" && !event.shiftKey) {
+					event.preventDefault();
+					send();
+				}
+			}
+		});
+	} }), _el$7);
+	insert(_el$5, () => {
+		return row("prompt-trailing", trailing());
+	}, _el$8);
+	insert(_el$4, createComponent(Show, {
+		get when() {
+			return own.footer != null;
+		},
+		get children() {
+			var _el$9 = _tmpl$4();
+			var _el$10 = _el$9.firstChild;
+			var _el$11 = _el$10.firstChild;
+			var _el$12 = _el$11.nextSibling;
+			insert(_el$9, () => {
+				return own.footer;
+			}, _el$10);
+			insert(_el$10, () => {
+				return own.footerEnd;
+			}, _el$11);
+			insert(_el$10, seal, _el$12);
+			return _el$9;
+		}
+	}), _el$13);
+	return _el$4;
+}
+//#endregion
+export { PromptInput as AiPromptInput, PromptInput };

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

@@ -0,0 +1,13 @@
+import { JSX } from "solid-js";
+//#region src/components/ai-reasoning/index.d.ts
+export interface ReasoningProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  /** The trigger's words — the fold arrives open under them. */
+  label?: string;
+  /** The fold arrives open when set — rides the shared collapsible. */
+  defaultOpen?: boolean;
+}
+/** 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;
+//#endregion
+export { Reasoning as AiReasoning };

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

@@ -0,0 +1,38 @@
+import { t as chevron } from "../../chevron-D5RzcayK.mjs";
+import { Collapsible } from "../collapsible/index.mjs";
+import { injectComponentStyle } from "@bysages/core";
+import { createComponent, insert, mergeProps, template } from "@solidjs/web";
+import { splitProps } from "solid-js";
+//#region src/components/ai-reasoning/index.tsx
+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) {
+	injectComponentStyle("ai");
+	const [own, rest] = splitProps(props, ["label", "children"]);
+	return createComponent(Collapsible.Root, mergeProps(rest, {
+		"data-ai": "reasoning",
+		get children() {
+			return [createComponent(Collapsible.Trigger, { get children() {
+				return [(() => {
+					var _el$ = _tmpl$();
+					insert(_el$, () => {
+						return own.label ?? "Thinking";
+					});
+					return _el$;
+				})(), createComponent(Collapsible.Indicator, { get children() {
+					return chevron();
+				} })];
+			} }), createComponent(Collapsible.Content, { get children() {
+				var _el$2 = _tmpl$2();
+				insert(_el$2, () => {
+					return own.children;
+				});
+				return _el$2;
+			} })];
+		}
+	}));
+}
+//#endregion
+export { Reasoning as AiReasoning, Reasoning };

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

@@ -0,0 +1,20 @@
+import { JSX } from "solid-js";
+//#region src/components/ai-response/index.d.ts
+export interface ResponseProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  /** The markdown text to set on the paper — streamed in freely; raw
+   * HTML and executable links stay inert. */
+  content: string;
+  /** Optional code-highlighting function re-inking fenced blocks; the
+   * component stays agnostic about which engine provides it. */
+  highlighter?: (code: string, lang?: string) => string;
+  /** The copy stamp's accessible name before the copy lands. */
+  copyLabel?: string;
+  /** The copy stamp's accessible name once the text has landed. */
+  copiedLabel?: string;
+}
+/** 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;
+//#endregion
+export { Response as AiResponse };

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

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

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

@@ -0,0 +1,13 @@
+import { JSX } from "solid-js";
+//#region src/components/ai-source/index.d.ts
+export interface SourceProps extends JSX.HTMLAttributes<HTMLAnchorElement> {
+  /** Where the ink came from — also the link text when no children are
+   * given; opens in a new tab, referrer-free. */
+  href: string;
+}
+/** One place the ink came from; href and the rest ride the anchor. */
+export declare function Source(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;
+//#endregion
+export { Source as AiSource, Sources as AiSources };

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

@@ -0,0 +1,36 @@
+import { injectComponentStyle } from "@bysages/core";
+import { claimElement, insert, spread, template } from "@solidjs/web";
+import { splitProps } from "solid-js";
+//#region src/components/ai-source/index.tsx
+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) {
+	injectComponentStyle("ai");
+	const [own, rest] = splitProps(props, ["href", "children"]);
+	var _el$ = _tmpl$();
+	var _el$2 = _el$.firstChild;
+	claimElement(_el$2);
+	spread(_el$2, [rest, {
+		get href() {
+			return own.href;
+		},
+		target: "_blank",
+		rel: "noreferrer"
+	}], true);
+	insert(_el$2, () => {
+		return own.children ?? own.href;
+	});
+	return _el$;
+}
+/** The reading list under a response: where this ink came from. */
+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

@@ -0,0 +1,13 @@
+import { JSX } from "solid-js";
+//#region src/components/ai-suggestion/index.d.ts
+export interface SuggestionProps extends Omit<JSX.HTMLAttributes<HTMLButtonElement>, "onSelect"> {
+  /** The next stroke this seal proposes — also its label; handed
+   * back whole on `onSelect`. */
+  prompt: string;
+  onSelect?: (prompt: string) => void;
+}
+/** 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;
+//#endregion
+export { Suggestion as AiSuggestion };

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

@@ -0,0 +1,22 @@
+import { Button } from "../button/index.mjs";
+import { injectComponentStyle } from "@bysages/core";
+import { createComponent, mergeProps } from "@solidjs/web";
+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) {
+	injectComponentStyle("ai");
+	const [own, rest] = splitProps(props, ["prompt", "onSelect"]);
+	return createComponent(Button, mergeProps({
+		variant: "outline",
+		size: "sm"
+	}, rest, {
+		onClick: () => own.onSelect?.(own.prompt),
+		get children() {
+			return own.prompt;
+		}
+	}));
+}
+//#endregion
+export { Suggestion as AiSuggestion, Suggestion };

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

@@ -0,0 +1,23 @@
+import { JSX } from "solid-js";
+//#region src/components/ai-tool/index.d.ts
+export type ToolStatus = "pending" | "running" | "completed" | "error";
+export interface ToolProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  /** The name the tool was reached by — shown raw on the trigger
+   * unless friendlier `label` words are given. */
+  name: string;
+  /** Friendlier trigger words than the raw tool name. */
+  label?: JSX.Element;
+  /** The state the call reached — pending, running, completed, or
+   * error; stamped on the fold and whispered in the status chip. */
+  status?: ToolStatus;
+  /** The fold arrives open when set — rides the shared collapsible. */
+  defaultOpen?: boolean;
+  input?: string;
+  output?: string;
+}
+/** 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;
+//#endregion
+export { Tool as AiTool };

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

@@ -0,0 +1,90 @@
+import { t as chevron } from "../../chevron-D5RzcayK.mjs";
+import { Collapsible } from "../collapsible/index.mjs";
+import { injectComponentStyle } from "@bysages/core";
+import { createComponent, insert, mergeProps, template } from "@solidjs/web";
+import { Show, splitProps } from "solid-js";
+//#region src/components/ai-tool/index.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<span>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<span data-scope=ai data-part=tool-status>`);
+var _tmpl$3 = /* @__PURE__ */ template(`<span data-scope=ai data-part=tool-label>Input`);
+var _tmpl$4 = /* @__PURE__ */ template(`<pre>`);
+var _tmpl$5 = /* @__PURE__ */ template(`<span data-scope=ai data-part=tool-label>Output`);
+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) {
+	injectComponentStyle("ai");
+	const [own, rest] = splitProps(props, [
+		"name",
+		"label",
+		"status",
+		"input",
+		"output"
+	]);
+	return createComponent(Collapsible.Root, mergeProps(rest, { "data-ai": "tool" }, () => {
+		return own.status ? { "data-status": own.status } : {};
+	}, { get children() {
+		return [createComponent(Collapsible.Trigger, { get children() {
+			return [
+				(() => {
+					var _el$ = _tmpl$();
+					insert(_el$, () => {
+						return own.label ?? own.name;
+					});
+					return _el$;
+				})(),
+				createComponent(Show, {
+					get when() {
+						return own.status;
+					},
+					get children() {
+						var _el$2 = _tmpl$2();
+						insert(_el$2, () => {
+							return own.status.charAt(0).toUpperCase() + own.status.slice(1);
+						});
+						return _el$2;
+					}
+				}),
+				createComponent(Collapsible.Indicator, { get children() {
+					return chevron();
+				} })
+			];
+		} }), createComponent(Collapsible.Content, { get children() {
+			var _el$3 = _tmpl$6();
+			var _el$6 = _el$3.firstChild;
+			var _el$9 = _el$6.nextSibling;
+			insert(_el$3, createComponent(Show, {
+				get when() {
+					return own.input !== void 0;
+				},
+				get children() {
+					return [_tmpl$3(), (() => {
+						var _el$5 = _tmpl$4();
+						insert(_el$5, () => {
+							return own.input;
+						});
+						return _el$5;
+					})()];
+				}
+			}), _el$6);
+			insert(_el$3, createComponent(Show, {
+				get when() {
+					return own.output !== void 0;
+				},
+				get children() {
+					return [_tmpl$5(), (() => {
+						var _el$8 = _tmpl$4();
+						insert(_el$8, () => {
+							return own.output;
+						});
+						return _el$8;
+					})()];
+				}
+			}), _el$9);
+			return _el$3;
+		} })];
+	} }));
+}
+//#endregion
+export { Tool as AiTool, Tool };

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

@@ -0,0 +1,22 @@
+import { JSX } from "solid-js";
+//#region src/components/alert/index.d.ts
+export type AlertStatus = "ink" | "info" | "success" | "warning" | "danger";
+/** A notice drawn on the page: a wash of the status pigment, one heavier
+ * hairline on the leading edge, the serif for its title. Root, Icon,
+ * Body, Title, Description — the icon reads the status from the Root. */
+export interface AlertProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  status?: AlertStatus;
+}
+declare function AlertRoot(props: AlertProps): JSX.Element;
+declare function Icon(): JSX.Element;
+declare function Body(props: JSX.HTMLAttributes<HTMLDivElement>): JSX.Element;
+declare function Title(props: JSX.HTMLAttributes<HTMLParagraphElement>): JSX.Element;
+declare function Description(props: JSX.HTMLAttributes<HTMLParagraphElement>): JSX.Element;
+export declare const Alert: typeof AlertRoot & {
+  Root: typeof AlertRoot;
+  Icon: typeof Icon;
+  Body: typeof Body;
+  Title: typeof Title;
+  Description: typeof Description;
+};
+//#endregion

package/dist/components/alert/index.mjs

@@ -0,0 +1,87 @@
+import { injectComponentStyle } from "@bysages/core";
+import { createComponent, effect, insert, setAttribute, 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>`);
+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$);
+	});
+	return _el$;
+}
+function AlertRoot(props) {
+	const [own, rest] = splitProps(props, ["status"]);
+	const status = () => own.status ?? "ink";
+	return createComponent(StatusContext.Provider, {
+		value: status,
+		get children() {
+			var _el$3 = _tmpl$2();
+			spread(_el$3, [rest, {
+				get role() {
+					return status() === "ink" || status() === "info" ? "status" : "alert";
+				},
+				"data-scope": "alert",
+				"data-part": "root",
+				get "data-status"() {
+					return status();
+				}
+			}], false);
+			return _el$3;
+		}
+	});
+}
+function Icon() {
+	const status = useContext(StatusContext);
+	var _el$4 = _tmpl$3();
+	insert(_el$4, () => {
+		return glyph(status());
+	});
+	return _el$4;
+}
+function Body(props) {
+	var _el$5 = _tmpl$2();
+	spread(_el$5, [props, {
+		"data-scope": "alert",
+		"data-part": "body"
+	}], false);
+	return _el$5;
+}
+function Title(props) {
+	var _el$6 = _tmpl$4();
+	spread(_el$6, [props, {
+		"data-scope": "alert",
+		"data-part": "title"
+	}], false);
+	return _el$6;
+}
+function Description(props) {
+	var _el$7 = _tmpl$4();
+	spread(_el$7, [props, {
+		"data-scope": "alert",
+		"data-part": "description"
+	}], false);
+	return _el$7;
+}
+const Alert = Object.assign(AlertRoot, {
+	Root: AlertRoot,
+	Icon,
+	Body,
+	Title,
+	Description
+});
+injectComponentStyle("alert");
+//#endregion
+export { Alert };

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

@@ -0,0 +1,15 @@
+import { AngleSlider as AngleSlider$1, AngleSliderRootProps } from "@ark-ui/solid/angle-slider";
+//#region src/components/angle-slider/index.d.ts
+/** Ark's AngleSlider, dressed in the paper-and-ink system: a flat paper dial
+ * the thumb sweeps as a pigment needle over hairline degree ticks. The API
+ * is Ark's own — Root, Label, ValueText, Control, Thumb, MarkerGroup,
+ * Marker, HiddenInput. */
+type AngleSliderOwnProps = {
+  /** One rung of the dial ladder — the diameter the needle sweeps. */
+  size?: "sm" | "md" | "lg";
+};
+declare function AngleSliderRoot(props: AngleSliderRootProps & AngleSliderOwnProps): import("solid-js").JSX.Element;
+export declare const AngleSlider: Omit<typeof AngleSlider$1, "Root"> & {
+  Root: typeof AngleSliderRoot;
+};
+//#endregion

package/dist/components/angle-slider/index.mjs

@@ -0,0 +1,18 @@
+import { injectComponentStyle } from "@bysages/core";
+import { createComponent, mergeProps } from "@solidjs/web";
+import { splitProps } from "solid-js";
+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 AngleSlider = {
+	...AngleSlider$1,
+	Root: AngleSliderRoot
+};
+injectComponentStyle("angle-slider");
+//#endregion
+export { AngleSlider };

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

@@ -0,0 +1,10 @@
+import { JSX } from "solid-js";
+//#region src/components/aspect-ratio/index.d.ts
+/** A frame that keeps its shape: the box holds the given ratio whatever
+ * the width it is dealt, and the child fills the frame it is given. */
+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;
+//#endregion

package/dist/components/aspect-ratio/index.mjs

@@ -0,0 +1,23 @@
+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) {
+	injectComponentStyle("aspect-ratio");
+	const [own, rest] = splitProps(props, ["ratio"]);
+	var _el$ = _tmpl$();
+	spread(_el$, [rest, {
+		get style() {
+			return {
+				...rest.style,
+				"--bs-aspect-ratio": own.ratio ?? "1 / 1"
+			};
+		},
+		"data-scope": "aspect-ratio",
+		"data-part": "root"
+	}], false);
+	return _el$;
+}
+//#endregion
+export { AspectRatio };

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

@@ -0,0 +1,21 @@
+//#region src/components/autocomplete/index.d.ts
+export interface AutoCompleteProps {
+  value?: string;
+  items?: string[];
+  placeholder?: string;
+  /** One rung of the control-height ladder for the field row. */
+  size?: "sm" | "md" | "lg";
+  /** Field text to match against; defaults to the item itself. */
+  filter?: (item: string, input: string) => boolean;
+  onValueChange?: (value: string) => void;
+}
+/**
+ * Free text with suggestions: the reader types anything, the list
+ * narrows to help, and both a pick and a custom value end up in the
+ * same `value`. A preset of the combobox machinery — same parts,
+ * same styling, one job. `items` seeds the suggestion list once;
+ * matching is a case-insensitive substring unless `filter` says
+ * otherwise.
+ */
+export declare function AutoComplete(props: AutoCompleteProps): import("solid-js").JSX.Element;
+//#endregion