@bysages/solid 0.2.3 → 0.3.1

package/dist/components/icon/index.mjs

@@ -1,53 +1,54 @@
 import { injectComponentStyle } from "@bysages/core";
-import { effect, insert, mergeProps, setAttribute, spread, template } from "solid-js/web";
+import { effect, insert, setAttribute, spread, template } from "@solidjs/web";
 import { splitProps } from "solid-js";
-import { getIcon } from "@bysages/icons";
+import { getIcon } from "@bysages/core/icons";
 //#region src/components/icon/index.tsx
-var _tmpl$ = /*#__PURE__*/ template(`<span>`);
-var _tmpl$2 = /*#__PURE__*/ template(`<svg fill=currentColor aria-hidden=true>`);
+var _tmpl$ = /* @__PURE__ */ template(`<span>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<svg fill=currentColor aria-hidden=true>`);
 function Icon(props) {
 	injectComponentStyle("icon");
 	const [own, rest] = splitProps(props, [
 		"size",
 		"label",
+		"glyph",
 		"name",
 		"children"
 	]);
-	const glyph = own.name && own.children == null ? getIcon(own.name) : void 0;
-	if (own.name && own.children == null && !glyph) console.error(`[icons] unknown icon name "${own.name}" — extend packages/icons/icons.config.json and rerun the generator`);
-	return (() => {
-		var _el$ = _tmpl$();
-		spread(_el$, mergeProps(rest, {
-			get role() {
-				return own.label != null ? "img" : void 0;
-			},
-			get ["aria-label"]() {
-				return own.label;
-			},
-			get ["aria-hidden"]() {
-				return own.label != null ? void 0 : "true";
-			},
-			"data-scope": "icon",
-			"data-part": "root",
-			get ["data-size"]() {
-				return own.size ?? "inherit";
-			}
-		}), false, true);
-		insert(_el$, () => own.children ?? (glyph ? (() => {
+	const resolved = own.glyph ?? (own.name && own.children == null ? getIcon(own.name) : void 0);
+	if (own.name && own.children == null && own.glyph == null && !resolved) console.error(`[icons] unknown icon name "${own.name}" — not in the wrappers' whitelist; import the glyph from @bysages/icons and pass it as glyph`);
+	var _el$ = _tmpl$();
+	spread(_el$, [rest, {
+		get role() {
+			return own.label != null ? "img" : void 0;
+		},
+		get "aria-label"() {
+			return own.label;
+		},
+		get "aria-hidden"() {
+			return own.label != null ? void 0 : "true";
+		},
+		"data-scope": "icon",
+		"data-part": "root",
+		get "data-size"() {
+			return own.size ?? "inherit";
+		}
+	}], true);
+	insert(_el$, () => {
+		return own.children ?? (resolved ? (() => {
 			var _el$2 = _tmpl$2();
-			effect((_p$) => {
-				var _v$ = `0 0 ${glyph.width ?? 24} ${glyph.height ?? 24}`, _v$2 = glyph.body;
-				_v$ !== _p$.e && setAttribute(_el$2, "viewBox", _p$.e = _v$);
-				_v$2 !== _p$.t && (_el$2.innerHTML = _p$.t = _v$2);
-				return _p$;
-			}, {
-				e: void 0,
-				t: void 0
+			effect(() => {
+				return {
+					e: `0 0 ${resolved.width ?? 24} ${resolved.height ?? 24}`,
+					t: resolved.body
+				};
+			}, ({ e, t }, _p$) => {
+				e !== _p$?.e && setAttribute(_el$2, "viewBox", e);
+				t !== _p$?.t && (_el$2.innerHTML = t);
 			});
 			return _el$2;
-		})() : null));
-		return _el$;
-	})();
+		})() : null);
+	});
+	return _el$;
 }
 //#endregion
 export { Icon };

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

@@ -8,6 +8,10 @@ import { JSX } from "solid-js";
 export interface ImageProps extends JSX.HTMLAttributes<HTMLElement> {
   src: string;
   alt?: string;
+  /** Intrinsic dimensions for the image element, reserving the layout
+   * box before bytes arrive. */
+  width?: number | string;
+  height?: number | string;
   fit?: "cover" | "contain" | "fill" | "none";
   loading?: "lazy" | "eager";
   /** What a broken source leaves instead of the picture. */

package/dist/components/image/index.mjs

@@ -1,12 +1,12 @@
 import { injectComponentStyle } from "@bysages/core";
-import { createComponent, effect, insert, mergeProps, setAttribute, spread, template } from "solid-js/web";
+import { createComponent, effect, insert, setAttribute, spread, template } from "@solidjs/web";
 import { Show, createEffect, createSignal, on, splitProps } from "solid-js";
 //#region src/components/image/index.tsx
-var _tmpl$ = /*#__PURE__*/ template(`<svg><rect x=3 y=4 width=18 height=16 rx=1.5></svg>`, false, true, false);
-var _tmpl$2 = /*#__PURE__*/ template(`<svg><circle cx=9 cy=10 r=1.5></svg>`, false, true, false);
-var _tmpl$3 = /*#__PURE__*/ template(`<svg><path d="m5.5 17.5 4.5-5 3 3.5 2.5-3 3 4.5"></svg>`, false, true, false);
-var _tmpl$4 = /*#__PURE__*/ template(`<div data-scope=image data-part=fallback>`);
-var _tmpl$5 = /*#__PURE__*/ template(`<figure><img data-scope=image data-part=img decoding=async>`, true, false, false);
+var _tmpl$ = /* @__PURE__ */ template(`<svg><rect x=3 y=4 width=18 height=16 rx=1.5></svg>`, 2);
+var _tmpl$2 = /* @__PURE__ */ template(`<svg><circle cx=9 cy=10 r=1.5></svg>`, 2);
+var _tmpl$3 = /* @__PURE__ */ template(`<svg><path d="m5.5 17.5 4.5-5 3 3.5 2.5-3 3 4.5"></svg>`, 2);
+var _tmpl$4 = /* @__PURE__ */ template(`<div data-scope=image data-part=fallback>`);
+var _tmpl$5 = /* @__PURE__ */ template(`<figure><img data-scope=image data-part=img decoding=async>`, 1);
 /** The mark for a source that never arrived: a quiet mountain-and-sun,
 * drawn in the stylesheet's stroke and hidden from the reader. */
 function placeholderGlyph() {
@@ -21,49 +21,56 @@ function Image(props) {
 	const [own, rest] = splitProps(props, [
 		"src",
 		"alt",
+		"width",
+		"height",
 		"fit",
 		"loading",
 		"fallback"
 	]);
 	const [state, setState] = createSignal("loading");
 	createEffect(on(() => own.src, () => setState("loading")));
-	return (() => {
-		var _el$4 = _tmpl$5(), _el$5 = _el$4.firstChild;
-		spread(_el$4, mergeProps(rest, {
-			"data-scope": "image",
-			"data-part": "root",
-			get ["data-state"]() {
-				return state();
-			},
-			get ["data-fit"]() {
-				return own.fit ?? "cover";
-			}
-		}), false, true);
-		_el$5.addEventListener("error", () => setState("error"));
-		_el$5.addEventListener("load", () => setState("loaded"));
-		insert(_el$4, createComponent(Show, {
-			get when() {
-				return state() === "error";
-			},
-			get children() {
-				var _el$6 = _tmpl$4();
-				insert(_el$6, () => own.fallback ?? placeholderGlyph());
-				return _el$6;
-			}
-		}), null);
-		effect((_p$) => {
-			var _v$ = own.src, _v$2 = own.alt ?? "", _v$3 = own.loading ?? "lazy";
-			_v$ !== _p$.e && setAttribute(_el$5, "src", _p$.e = _v$);
-			_v$2 !== _p$.t && setAttribute(_el$5, "alt", _p$.t = _v$2);
-			_v$3 !== _p$.a && setAttribute(_el$5, "loading", _p$.a = _v$3);
-			return _p$;
-		}, {
-			e: void 0,
-			t: void 0,
-			a: void 0
-		});
-		return _el$4;
-	})();
+	var _el$4 = _tmpl$5();
+	var _el$5 = _el$4.firstChild;
+	spread(_el$4, [rest, {
+		"data-scope": "image",
+		"data-part": "root",
+		get "data-state"() {
+			return state();
+		},
+		get "data-fit"() {
+			return own.fit ?? "cover";
+		}
+	}], true);
+	_el$5.addEventListener("error", () => setState("error"));
+	_el$5.addEventListener("load", () => setState("loaded"));
+	insert(_el$4, createComponent(Show, {
+		get when() {
+			return state() === "error";
+		},
+		get children() {
+			var _el$6 = _tmpl$4();
+			insert(_el$6, () => {
+				return own.fallback ?? placeholderGlyph();
+			});
+			return _el$6;
+		}
+	}), null);
+	effect(() => {
+		return {
+			e: own.src,
+			t: own.alt ?? "",
+			a: own.width,
+			o: own.height,
+			i: own.loading ?? "lazy"
+		};
+	}, ({ e, t, a, o, i }, _p$) => {
+		e !== _p$?.e && setAttribute(_el$5, "src", e);
+		t !== _p$?.t && setAttribute(_el$5, "alt", t);
+		a !== _p$?.a && setAttribute(_el$5, "width", a);
+		o !== _p$?.o && setAttribute(_el$5, "height", o);
+		i !== _p$?.i && setAttribute(_el$5, "loading", i);
+	});
+	return _el$4;
 }
 //#endregion
 export { Image };

package/dist/components/image-viewer/index.d.mts

@@ -10,6 +10,10 @@ import { JSX } from "solid-js";
 export interface ImageViewerProps {
   src: string;
   alt?: string;
+  /** Intrinsic dimensions for the image element, reserving the layout
+   * box before bytes arrive. */
+  width?: number | string;
+  height?: number | string;
   open?: boolean;
   zoomable?: boolean;
   /** The openness changed — from the scrim, Escape or the toolbar. */

package/dist/components/image-viewer/index.mjs

@@ -1,21 +1,23 @@
 import { Button } from "../button/index.mjs";
+import { n as useComponentMessages } from "../../use-component-messages-C4SCVYjD.mjs";
 import { ButtonGroup } from "../button-group/index.mjs";
 import { injectComponentStyle } from "@bysages/core";
-import { Portal, createComponent, effect, insert, memo, setAttribute, setStyleProperty, template } from "solid-js/web";
+import { createComponent, effect, insert, memo, setAttribute, setStyleProperty, template } from "@solidjs/web";
 import { Show, createEffect, createSignal, splitProps } from "solid-js";
+import { Portal } from "solid-js/web";
 import { Dialog } from "@ark-ui/solid/dialog";
 //#region src/components/image-viewer/index.tsx
-var _tmpl$ = /*#__PURE__*/ template(`<svg><circle cx=11 cy=11 r=7></svg>`, false, true, false);
-var _tmpl$2 = /*#__PURE__*/ template(`<svg><path d="m16.2 16.2 4.8 4.8"></svg>`, false, true, false);
-var _tmpl$3 = /*#__PURE__*/ template(`<svg><path d="M8 11h6"></svg>`, false, true, false);
-var _tmpl$4 = /*#__PURE__*/ template(`<svg><path d="M11 8v6"></svg>`, false, true, false);
-var _tmpl$5 = /*#__PURE__*/ template(`<svg><path d="M20.49 12A8.5 8.5 0 1 1 18 6.06"></svg>`, false, true, false);
-var _tmpl$6 = /*#__PURE__*/ template(`<svg><path d="M20.5 3.5v4h-4"></svg>`, false, true, false);
-var _tmpl$7 = /*#__PURE__*/ template(`<svg><path d="m6 6 12 12"></svg>`, false, true, false);
-var _tmpl$8 = /*#__PURE__*/ template(`<svg><path d="M18 6 6 18"></svg>`, false, true, false);
-var _tmpl$9 = /*#__PURE__*/ template(`<svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=1.5 stroke-linecap=round stroke-linejoin=round aria-hidden=true>`);
-var _tmpl$0 = /*#__PURE__*/ template(`<img data-scope=image-viewer data-part=viewport>`);
-var _tmpl$1 = /*#__PURE__*/ template(`<div data-scope=image-viewer data-part=toolbar>`);
+var _tmpl$ = /* @__PURE__ */ template(`<svg><circle cx=11 cy=11 r=7></svg>`, 2);
+var _tmpl$2 = /* @__PURE__ */ template(`<svg><path d="m16.2 16.2 4.8 4.8"></svg>`, 2);
+var _tmpl$3 = /* @__PURE__ */ template(`<svg><path d="M8 11h6"></svg>`, 2);
+var _tmpl$4 = /* @__PURE__ */ template(`<svg><path d="M11 8v6"></svg>`, 2);
+var _tmpl$5 = /* @__PURE__ */ template(`<svg><path d="M20.49 12A8.5 8.5 0 1 1 18 6.06"></svg>`, 2);
+var _tmpl$6 = /* @__PURE__ */ template(`<svg><path d="M20.5 3.5v4h-4"></svg>`, 2);
+var _tmpl$7 = /* @__PURE__ */ template(`<svg><path d="m6 6 12 12"></svg>`, 2);
+var _tmpl$8 = /* @__PURE__ */ template(`<svg><path d="M18 6 6 18"></svg>`, 2);
+var _tmpl$9 = /* @__PURE__ */ template(`<svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=1.5 stroke-linecap=round stroke-linejoin=round aria-hidden=true>`);
+var _tmpl$10 = /* @__PURE__ */ template(`<img data-scope=image-viewer data-part=viewport>`);
+var _tmpl$11 = /* @__PURE__ */ template(`<div data-scope=image-viewer data-part=toolbar>`);
 const MIN_SCALE = .5;
 const MAX_SCALE = 3;
 const SCALE_STEP = .25;
@@ -40,10 +42,13 @@ function ImageViewer(props) {
 	const [own] = splitProps(props, [
 		"src",
 		"alt",
+		"width",
+		"height",
 		"open",
 		"zoomable",
 		"onOpenChange"
 	]);
+	const messages = useComponentMessages();
 	const [localOpen, setLocalOpen] = createSignal(false);
 	const [scale, setScale] = createSignal(1);
 	const [rotation, setRotation] = createSignal(0);
@@ -72,9 +77,9 @@ function ImageViewer(props) {
 			"aria-label": label,
 			onClick,
 			get children() {
-				var _el$10 = _tmpl$9();
-				insert(_el$10, glyph);
-				return _el$10;
+				var _el$12 = _tmpl$9();
+				insert(_el$12, glyph);
+				return _el$12;
 			}
 		});
 	}
@@ -87,12 +92,12 @@ function ImageViewer(props) {
 		unmountOnExit: true,
 		get children() {
 			return createComponent(Portal, { get children() {
-				return [createComponent(Dialog.Backdrop, { "class": "bs-image-viewer-backdrop" }), createComponent(Dialog.Positioner, {
-					"class": "bs-image-viewer-positioner",
+				return [createComponent(Dialog.Backdrop, { class: "bs-image-viewer-backdrop" }), createComponent(Dialog.Positioner, {
+					class: "bs-image-viewer-positioner",
 					get children() {
 						return createComponent(Dialog.Content, {
-							"class": "bs-image-viewer-content",
-							get ["aria-label"]() {
+							class: "bs-image-viewer-content",
+							get "aria-label"() {
 								return own.alt || "Image preview";
 							},
 							onClick: (event) => {
@@ -100,36 +105,48 @@ function ImageViewer(props) {
 							},
 							get children() {
 								return [(() => {
-									var _el$11 = _tmpl$0();
-									effect((_p$) => {
-										var _v$ = own.src, _v$2 = own.alt ?? "", _v$3 = `scale(${scale()}) rotate(${rotation()}deg)`;
-										_v$ !== _p$.e && setAttribute(_el$11, "src", _p$.e = _v$);
-										_v$2 !== _p$.t && setAttribute(_el$11, "alt", _p$.t = _v$2);
-										_v$3 !== _p$.a && setStyleProperty(_el$11, "transform", _p$.a = _v$3);
-										return _p$;
-									}, {
-										e: void 0,
-										t: void 0,
-										a: void 0
+									var _el$13 = _tmpl$10();
+									effect(() => {
+										return {
+											e: own.src,
+											t: own.alt ?? "",
+											a: own.width,
+											o: own.height,
+											i: `scale(${scale()}) rotate(${rotation()}deg)`
+										};
+									}, ({ e, t, a, o, i }, _p$) => {
+										e !== _p$?.e && setAttribute(_el$13, "src", e);
+										t !== _p$?.t && setAttribute(_el$13, "alt", t);
+										a !== _p$?.a && setAttribute(_el$13, "width", a);
+										o !== _p$?.o && setAttribute(_el$13, "height", o);
+										i !== _p$?.i && setStyleProperty(_el$13, "transform", i);
 									});
-									return _el$11;
+									return _el$13;
 								})(), (() => {
-									var _el$12 = _tmpl$1();
-									insert(_el$12, createComponent(ButtonGroup, { get children() {
+									var _el$14 = _tmpl$11();
+									insert(_el$14, createComponent(ButtonGroup, { get children() {
 										return [
 											createComponent(Show, {
 												get when() {
 													return own.zoomable ?? true;
 												},
 												get children() {
-													return [memo(() => toolButton("Zoom in", TOOL_GLYPHS.zoomIn, () => zoom(SCALE_STEP))), memo(() => toolButton("Zoom out", TOOL_GLYPHS.zoomOut, () => zoom(-.25)))];
+													return [memo(() => {
+														return toolButton(messages().imageViewer.zoomIn, TOOL_GLYPHS.zoomIn, () => zoom(SCALE_STEP));
+													}), memo(() => {
+														return toolButton(messages().imageViewer.zoomOut, TOOL_GLYPHS.zoomOut, () => zoom(-.25));
+													})];
 												}
 											}),
-											memo(() => toolButton("Rotate 90 degrees", TOOL_GLYPHS.rotate, rotate)),
-											memo(() => toolButton("Close", TOOL_GLYPHS.close, () => setOpen(false)))
+											memo(() => {
+												return toolButton(messages().imageViewer.rotate, TOOL_GLYPHS.rotate, rotate);
+											}),
+											memo(() => {
+												return toolButton(messages().imageViewer.close, TOOL_GLYPHS.close, () => setOpen(false));
+											})
 										];
 									} }));
-									return _el$12;
+									return _el$14;
 								})()];
 							}
 						});

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

@@ -5,6 +5,9 @@ export interface InputProps extends JSX.InputHTMLAttributes<HTMLInputElement> {
   onValueChange?: (value: string) => void;
   size?: "sm" | "md" | "lg";
   invalid?: boolean;
+  /** Entry mask - `9` digit, `a` letter, `*` either, anything else is
+   * literal. e.g. `"999-99-9999"`, `"(999) 999-9999"`. */
+  mask?: string;
 }
 /** The bare text input: the field recipe — border, surface, focus halo —
  * on a native control. Standing alone it styles itself from the `invalid`

package/dist/components/input/index.mjs

@@ -1,42 +1,2 @@
-import { injectComponentStyle } from "@bysages/core";
-import { mergeProps, spread, template } from "solid-js/web";
-import { mergeProps as mergeProps$1, splitProps } from "solid-js";
-import { useFieldContext } from "@ark-ui/solid/field";
-//#region src/components/input/index.tsx
-var _tmpl$ = /*#__PURE__*/ template(`<input>`);
-/** The bare text input: the field recipe — border, surface, focus halo —
-* on a native control. Standing alone it styles itself from the `invalid`
-* prop; inside a `Field.Root` it consumes the field context, picking up
-* the label id, the described-by wiring and the invalid state for free,
-* which is also the seam the Form validation layer will drive. Disabled
-* rides the native attribute. */
-function Input(props) {
-	injectComponentStyle("input");
-	const field = useFieldContext();
-	const [own, rest] = splitProps(props, [
-		"value",
-		"size",
-		"invalid",
-		"onValueChange"
-	]);
-	return (() => {
-		var _el$ = _tmpl$();
-		spread(_el$, mergeProps(() => mergeProps$1(() => field?.().getInputProps() ?? {}, rest, {
-			get value() {
-				return own.value;
-			},
-			"data-scope": "input",
-			"data-part": "root",
-			get "data-size"() {
-				return own.size ?? "md";
-			},
-			get "data-invalid"() {
-				return own.invalid || field?.().getInputProps()["data-invalid"] != null ? "" : void 0;
-			},
-			onInput: (event) => own.onValueChange?.(event.currentTarget.value)
-		})), false, false);
-		return _el$;
-	})();
-}
-//#endregion
+import { t as Input } from "../../input-DoFQ7RXh.mjs";
 export { Input };

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

@@ -1,7 +1,7 @@
 import { injectComponentStyle } from "@bysages/core";
-import { mergeProps, spread, template } from "solid-js/web";
+import { spread, template } from "@solidjs/web";
 //#region src/components/input-group/index.tsx
-var _tmpl$ = /*#__PURE__*/ template(`<div>`);
+var _tmpl$ = /* @__PURE__ */ template(`<div>`);
 /**
 * Merged controls: attachments and the entry fused into one seal. The
 * Root draws the single hairline and carries the group's focus halo;
@@ -12,24 +12,20 @@ var _tmpl$ = /*#__PURE__*/ template(`<div>`);
 * adds no visuals of its own.
 */
 function InputGroupRoot(props) {
-	return (() => {
-		var _el$ = _tmpl$();
-		spread(_el$, mergeProps(props, {
-			"data-scope": "input-group",
-			"data-part": "root"
-		}), false, false);
-		return _el$;
-	})();
+	var _el$ = _tmpl$();
+	spread(_el$, [props, {
+		"data-scope": "input-group",
+		"data-part": "root"
+	}], false);
+	return _el$;
 }
 function InputGroupAddon(props) {
-	return (() => {
-		var _el$2 = _tmpl$();
-		spread(_el$2, mergeProps(props, {
-			"data-scope": "input-group",
-			"data-part": "addon"
-		}), false, false);
-		return _el$2;
-	})();
+	var _el$2 = _tmpl$();
+	spread(_el$2, [props, {
+		"data-scope": "input-group",
+		"data-part": "addon"
+	}], false);
+	return _el$2;
 }
 const InputGroup = Object.assign(InputGroupRoot, {
 	Root: InputGroupRoot,

package/dist/components/json-tree-view/index.d.mts

@@ -1,7 +1,10 @@
-import { JsonTreeView as JsonTreeView$1 } from "@ark-ui/solid/json-tree-view";
+import { JsonTreeView as JsonTreeView$1, JsonTreeViewTreeProps } from "@ark-ui/solid/json-tree-view";
 //#region src/components/json-tree-view/index.d.ts
 /** Ark's JsonTreeView, dressed in the paper-and-ink system: the tree-view
  * recipes re-scoped, with value nodes reading as tabular data. The API is
  * Ark's own — Root, Tree, plus createJsonTreeCollection. */
-export declare const JsonTreeView: typeof JsonTreeView$1;
+declare function JsonTreeViewTree(props: JsonTreeViewTreeProps): import("solid-js").JSX.Element;
+export declare const JsonTreeView: Omit<typeof JsonTreeView$1, "Tree"> & {
+  Tree: typeof JsonTreeViewTree;
+};
 //#endregion

package/dist/components/json-tree-view/index.mjs

@@ -1,10 +1,33 @@
 import { injectComponentStyle } from "@bysages/core";
+import { createComponent, effect, mergeProps, setAttribute, template } from "@solidjs/web";
 import { JsonTreeView as JsonTreeView$1 } from "@ark-ui/solid/json-tree-view";
-//#region src/components/json-tree-view/index.ts
+import { chevron_right } from "@bysages/icons";
+//#region src/components/json-tree-view/index.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<svg aria-hidden=true>`);
 /** Ark's JsonTreeView, dressed in the paper-and-ink system: the tree-view
 * recipes re-scoped, with value nodes reading as tabular data. The API is
 * Ark's own — Root, Tree, plus createJsonTreeCollection. */
-const JsonTreeView = JsonTreeView$1;
+function JsonTreeViewTree(props) {
+	return createComponent(JsonTreeView$1.Tree, mergeProps(props, { get arrow() {
+		return props.arrow ?? (() => {
+			var _el$ = _tmpl$();
+			effect(() => {
+				return {
+					e: `0 0 ${chevron_right.width} ${chevron_right.height}`,
+					t: chevron_right.body
+				};
+			}, ({ e, t }, _p$) => {
+				e !== _p$?.e && setAttribute(_el$, "viewBox", e);
+				t !== _p$?.t && (_el$.innerHTML = t);
+			});
+			return _el$;
+		})();
+	} }));
+}
+const JsonTreeView = {
+	...JsonTreeView$1,
+	Tree: JsonTreeViewTree
+};
 injectComponentStyle("json-tree-view");
 //#endregion
 export { JsonTreeView };

package/dist/components/kbd/index.mjs

@@ -1,17 +1,15 @@
 import { injectComponentStyle } from "@bysages/core";
-import { mergeProps, spread, template } from "solid-js/web";
+import { spread, template } from "@solidjs/web";
 //#region src/components/kbd/index.tsx
-var _tmpl$ = /*#__PURE__*/ template(`<kbd>`);
+var _tmpl$ = /* @__PURE__ */ template(`<kbd>`);
 function Kbd(props) {
 	injectComponentStyle("kbd");
-	return (() => {
-		var _el$ = _tmpl$();
-		spread(_el$, mergeProps(props, {
-			"data-scope": "kbd",
-			"data-part": "root"
-		}), false, false);
-		return _el$;
-	})();
+	var _el$ = _tmpl$();
+	spread(_el$, [props, {
+		"data-scope": "kbd",
+		"data-part": "root"
+	}], false);
+	return _el$;
 }
 //#endregion
 export { Kbd };