@bysages/solid 0.2.3 → 0.3.0

package/dist/components/form/index.mjs

@@ -1,11 +1,11 @@
 import { injectComponentStyle } from "@bysages/core";
-import { createComponent, insert, memo, mergeProps, spread, template } from "solid-js/web";
+import { claimElement, createComponent, insert, memo, mergeProps, spread, template } from "@solidjs/web";
 import { Show, createContext, splitProps, useContext } from "solid-js";
 import { Field } from "@ark-ui/solid/field";
 import { createField, createForm } from "@tanstack/solid-form";
 //#region src/components/form/index.tsx
-var _tmpl$ = /*#__PURE__*/ template(`<form>`);
-var _tmpl$2 = /*#__PURE__*/ template(`<div>`);
+var _tmpl$ = /* @__PURE__ */ template(`<form>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<div>`);
 const FormContext = createContext(null);
 /** A validator's complaint is a string or a Standard Schema issue; both
 * reduce to the sentence the field shows. */
@@ -25,15 +25,16 @@ function Form(props) {
 		},
 		get children() {
 			var _el$ = _tmpl$();
-			spread(_el$, mergeProps(rest, {
+			claimElement(_el$);
+			spread(_el$, [rest, {
 				"data-scope": "form",
 				"data-part": "root",
-				"novalidate": true,
-				"onSubmit": (event) => {
+				novalidate: true,
+				onSubmit: (event) => {
 					event.preventDefault();
 					own.form.handleSubmit();
 				}
-			}), false, false);
+			}], false);
 			return _el$;
 		}
 	});
@@ -57,38 +58,52 @@ function FormField(props) {
 			const meta = field().state.meta;
 			return (meta.isTouched ? meta.errors ?? [] : [meta.errorMap?.onSubmit].flat().filter(Boolean)).map(errorText).filter(Boolean);
 		};
-		return (() => {
-			var _el$2 = _tmpl$2();
-			spread(_el$2, mergeProps(rest, { get ["data-form-field"]() {
-				return own.name;
-			} }), false, true);
-			insert(_el$2, createComponent(Field.Root, {
-				get invalid() {
-					return own.invalid || errors().length > 0;
-				},
-				get required() {
-					return own.required;
-				},
-				get disabled() {
-					return own.disabled;
-				},
-				get children() {
-					return [
-						memo(() => memo(() => !!own.label)() ? createComponent(Field.Label, { get children() {
+		var _el$2 = _tmpl$2();
+		spread(_el$2, [rest, { get "data-form-field"() {
+			return own.name;
+		} }], true);
+		insert(_el$2, createComponent(Field.Root, {
+			get invalid() {
+				return own.invalid || errors().length > 0;
+			},
+			get required() {
+				return own.required;
+			},
+			get disabled() {
+				return own.disabled;
+			},
+			get children() {
+				return [
+					memo(() => {
+						return memo(() => {
+							return !!own.label;
+						})() ? createComponent(Field.Label, { get children() {
 							return own.label;
-						} }) : null),
-						memo(() => memo(() => typeof own.children === "function")() ? own.children(field) : own.children),
-						memo(() => memo(() => !!(own.hint && errors().length === 0))() ? createComponent(Field.HelperText, { get children() {
+						} }) : null;
+					}),
+					memo(() => {
+						return memo(() => {
+							return typeof own.children === "function";
+						})() ? own.children(field) : own.children;
+					}),
+					memo(() => {
+						return memo(() => {
+							return !!(own.hint && errors().length === 0);
+						})() ? createComponent(Field.HelperText, { get children() {
 							return own.hint;
-						} }) : null),
-						memo(() => memo(() => errors().length > 0)() ? createComponent(Field.ErrorText, { get children() {
+						} }) : null;
+					}),
+					memo(() => {
+						return memo(() => {
+							return errors().length > 0;
+						})() ? createComponent(Field.ErrorText, { get children() {
 							return errors()[0];
-						} }) : null)
-					];
-				}
-			}));
-			return _el$2;
-		})();
+						} }) : null;
+					})
+				];
+			}
+		}));
+		return _el$2;
 	};
 	return createComponent(Show, {
 		get when() {
@@ -107,4 +122,4 @@ function FormField(props) {
 	});
 }
 //#endregion
-export { Form, FormField, createField, createForm };
+export { Form, FormField, createField, createField as useField, createForm, createForm as useForm };

package/dist/components/grid/index.mjs

@@ -1,8 +1,8 @@
 import { injectComponentStyle } from "@bysages/core";
-import { mergeProps, spread, template } from "solid-js/web";
+import { spread, template } from "@solidjs/web";
 import { splitProps } from "solid-js";
 //#region src/components/grid/index.tsx
-var _tmpl$ = /*#__PURE__*/ template(`<div>`);
+var _tmpl$ = /* @__PURE__ */ template(`<div>`);
 /** The same named steps of the space ramp the stack uses — one
 * vocabulary of distance across the layout primitives. */
 const gapVars = {
@@ -20,25 +20,23 @@ function Grid(props) {
 		"gap",
 		"minChildWidth"
 	]);
-	return (() => {
-		var _el$ = _tmpl$();
-		spread(_el$, mergeProps(rest, {
-			get style() {
-				return {
-					...rest.style,
-					"--bs-grid-columns": String(own.columns ?? 12),
-					"--bs-grid-gap": gapVars[own.gap ?? "md"] ?? gapVars.md,
-					...own.minChildWidth != null ? { "--bs-grid-min-child-width": own.minChildWidth } : {}
-				};
-			},
-			"data-scope": "grid",
-			"data-part": "root",
-			get ["data-autofill"]() {
-				return own.minChildWidth != null ? "" : void 0;
-			}
-		}), false, false);
-		return _el$;
-	})();
+	var _el$ = _tmpl$();
+	spread(_el$, [rest, {
+		get style() {
+			return {
+				...rest.style,
+				"--bs-grid-columns": String(own.columns ?? 12),
+				"--bs-grid-gap": gapVars[own.gap ?? "md"] ?? gapVars.md,
+				...own.minChildWidth != null ? { "--bs-grid-min-child-width": own.minChildWidth } : {}
+			};
+		},
+		"data-scope": "grid",
+		"data-part": "root",
+		get "data-autofill"() {
+			return own.minChildWidth != null ? "" : void 0;
+		}
+	}], false);
+	return _el$;
 }
 //#endregion
 export { Grid };

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

@@ -1,9 +1,11 @@
 import { JSX } from "solid-js";
+import { IconifyIcon } from "@bysages/core/icons";
 //#region src/components/icon/index.d.ts
 /** The inkwell: a standard box that keeps any inline svg at its optical
  * measure and in the text's own ink — the icon carries no pigment and no
- * size of its own. Bring a glyph through `name` from the registry, or
- * bring your own; the well renders either. */
+ * size of its own. Bring a glyph through `glyph` (a direct registry
+ * import), through `name` from the whitelisted registry, or bring your
+ * own; the well renders either. */
 export interface IconProps extends JSX.HTMLAttributes<HTMLSpanElement> {
   /** Size steps follow the surrounding font size; `inherit` is the
    * default — one em of the text the icon sits in. */
@@ -11,8 +13,11 @@ export interface IconProps extends JSX.HTMLAttributes<HTMLSpanElement> {
   /** The accessible name. Without it the icon is presentation-only and
    * hidden from the accessibility tree. */
   label?: string;
-  /** A glyph from the registry. Ignored when children are given — an
-   * explicit glyph always wins over the registry. */
+  /** A glyph from the registry, imported directly. Ignored when children
+   * are given — an explicit glyph always wins. */
+  glyph?: IconifyIcon;
+  /** A registry name — only the whitelisted set the wrappers draw
+   * themselves. Ignored when `glyph` or children are given. */
   name?: string;
 }
 export declare function Icon(props: IconProps): JSX.Element;

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.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() {
@@ -27,43 +27,44 @@ function Image(props) {
 	]);
 	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.loading ?? "lazy"
+		};
+	}, ({ e, t, a }, _p$) => {
+		e !== _p$?.e && setAttribute(_el$5, "src", e);
+		t !== _p$?.t && setAttribute(_el$5, "alt", t);
+		a !== _p$?.a && setAttribute(_el$5, "loading", a);
+	});
+	return _el$4;
 }
 //#endregion
 export { Image };

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

@@ -1,21 +1,22 @@
 import { Button } from "../button/index.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;
@@ -72,9 +73,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 +88,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 +101,44 @@ 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: `scale(${scale()}) rotate(${rotation()}deg)`
+										};
+									}, ({ e, t, a }, _p$) => {
+										e !== _p$?.e && setAttribute(_el$13, "src", e);
+										t !== _p$?.t && setAttribute(_el$13, "alt", t);
+										a !== _p$?.a && setStyleProperty(_el$13, "transform", a);
 									});
-									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("Zoom in", TOOL_GLYPHS.zoomIn, () => zoom(SCALE_STEP));
+													}), memo(() => {
+														return toolButton("Zoom out", 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("Rotate 90 degrees", TOOL_GLYPHS.rotate, rotate);
+											}),
+											memo(() => {
+												return toolButton("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,