@bysages/solid 0.2.3 → 0.3.1

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

@@ -1,12 +1,13 @@
 import { Button } from "../button/index.mjs";
-import { Input } from "../input/index.mjs";
+import { n as useComponentMessages } from "../../use-component-messages-C4SCVYjD.mjs";
+import { t as Input } from "../../input-DoFQ7RXh.mjs";
 import { injectComponentStyle } from "@bysages/core";
-import { createComponent, insert, memo, mergeProps, spread, template } from "solid-js/web";
+import { createComponent, insert, memo, spread, template } from "@solidjs/web";
 import { Index, splitProps } from "solid-js";
 //#region src/components/dynamic-input/index.tsx
-var _tmpl$ = /*#__PURE__*/ template(`<div><div data-scope=dynamic-input data-part=add>`);
-var _tmpl$2 = /*#__PURE__*/ template(`<div data-scope=dynamic-input data-part=row>`);
-var _tmpl$3 = /*#__PURE__*/ template(`<svg width=16 height=16 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=1.75 stroke-linecap=round stroke-linejoin=round aria-hidden=true><path d="M18 6 6 18M6 6l12 12">`);
+var _tmpl$ = /* @__PURE__ */ template(`<div><div data-scope=dynamic-input data-part=add>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<div data-scope=dynamic-input data-part=row><!><!>`);
+var _tmpl$3 = /* @__PURE__ */ template(`<svg width=16 height=16 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=1.75 stroke-linecap=round stroke-linejoin=round aria-hidden=true><path d="M18 6 6 18M6 6l12 12">`);
 /**
 * A column of entry rows: one Input per line, each with a quiet remove
 * seal, and an add row at the tail. The list is controlled — every edit
@@ -16,6 +17,7 @@ var _tmpl$3 = /*#__PURE__*/ template(`<svg width=16 height=16 viewBox="0 0 24 24
 * emptied itself would leave the reader no place to type.
 */
 function DynamicInput(props) {
+	const messages = useComponentMessages();
 	injectComponentStyle("dynamic-input");
 	const [own, rest] = splitProps(props, [
 		"value",
@@ -44,69 +46,74 @@ function DynamicInput(props) {
 	};
 	const canRemove = () => values().length > Math.max(own.min ?? 0, 1);
 	const canAdd = () => own.max === void 0 || values().length < own.max;
-	return (() => {
-		var _el$ = _tmpl$(), _el$2 = _el$.firstChild;
-		spread(_el$, mergeProps(rest, {
-			"data-scope": "dynamic-input",
-			"data-part": "root"
-		}), false, true);
-		insert(_el$, createComponent(Index, {
-			get each() {
-				return values();
-			},
-			children: (value, index) => (() => {
-				var _el$3 = _tmpl$2();
-				insert(_el$3, createComponent(Input, {
-					get value() {
-						return value();
-					},
-					get placeholder() {
-						return own.placeholder;
-					},
-					get disabled() {
-						return own.disabled;
-					},
-					get invalid() {
-						return own.invalid;
-					},
-					get size() {
-						return own.size ?? "md";
-					},
-					onValueChange: (next) => update(index, next)
-				}), null);
-				insert(_el$3, createComponent(Button, {
-					variant: "ghost",
-					get size() {
-						return own.size ?? "md";
-					},
-					square: true,
-					get disabled() {
-						return own.disabled || !canRemove();
-					},
-					"aria-label": `Remove entry ${index + 1}`,
-					onClick: () => remove(index),
-					get children() {
-						return crossIcon();
-					}
-				}), null);
-				return _el$3;
-			})()
-		}), _el$2);
-		insert(_el$2, createComponent(Button, {
-			variant: "ghost",
-			get size() {
-				return own.size ?? "md";
-			},
-			get disabled() {
-				return own.disabled || !canAdd();
-			},
-			onClick: () => add(),
-			get children() {
-				return ["+", memo(() => own.addLabel ?? "Add entry")];
-			}
-		}));
-		return _el$;
-	})();
+	var _el$ = _tmpl$();
+	var _el$2 = _el$.firstChild;
+	spread(_el$, [rest, {
+		"data-scope": "dynamic-input",
+		"data-part": "root"
+	}], true);
+	insert(_el$, createComponent(Index, {
+		get each() {
+			return values();
+		},
+		children: (value, index) => (() => {
+			var _el$3 = _tmpl$2();
+			var _el$4 = _el$3.firstChild;
+			var _el$5 = _el$4.nextSibling;
+			insert(_el$3, createComponent(Input, {
+				get value() {
+					return value();
+				},
+				get placeholder() {
+					return own.placeholder;
+				},
+				get disabled() {
+					return own.disabled;
+				},
+				get invalid() {
+					return own.invalid;
+				},
+				get size() {
+					return own.size ?? "md";
+				},
+				onValueChange: (next) => update(index, next)
+			}), _el$4);
+			insert(_el$3, createComponent(Button, {
+				variant: "ghost",
+				get size() {
+					return own.size ?? "md";
+				},
+				square: true,
+				get disabled() {
+					return own.disabled || !canRemove();
+				},
+				get "aria-label"() {
+					return `${messages().dynamicEntry.remove} ${index + 1}`;
+				},
+				onClick: () => remove(index),
+				get children() {
+					return crossIcon();
+				}
+			}), _el$5);
+			return _el$3;
+		})()
+	}), _el$2);
+	insert(_el$2, createComponent(Button, {
+		variant: "ghost",
+		get size() {
+			return own.size ?? "md";
+		},
+		get disabled() {
+			return own.disabled || !canAdd();
+		},
+		onClick: () => add(),
+		get children() {
+			return ["+", memo(() => {
+				return own.addLabel ?? "Add entry";
+			})];
+		}
+	}));
+	return _el$;
 }
 /** The one glyph a remove seal needs: a single crossing stroke. */
 function crossIcon() {

package/dist/components/editable/index.mjs

@@ -1,11 +1,11 @@
 import { injectComponentStyle } from "@bysages/core";
-import { createComponent, mergeProps } from "solid-js/web";
+import { createComponent, mergeProps } from "@solidjs/web";
 import { splitProps } from "solid-js";
 import { Editable as Editable$1 } from "@ark-ui/solid/editable";
 //#region src/components/editable/index.tsx
 function EditableRoot(props) {
 	const [own, rest] = splitProps(props, ["size"]);
-	return createComponent(Editable$1.Root, mergeProps(rest, { get ["data-size"]() {
+	return createComponent(Editable$1.Root, mergeProps(rest, { get "data-size"() {
 		return own.size ?? "md";
 	} }));
 }

package/dist/components/ellipsis/index.mjs

@@ -1,29 +1,27 @@
 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/ellipsis/index.tsx
-var _tmpl$ = /*#__PURE__*/ template(`<span>`);
+var _tmpl$ = /* @__PURE__ */ template(`<span>`);
 function Ellipsis(props) {
 	injectComponentStyle("ellipsis");
 	const [own, rest] = splitProps(props, ["lines"]);
 	const multiline = () => (own.lines ?? 1) > 1;
-	return (() => {
-		var _el$ = _tmpl$();
-		spread(_el$, mergeProps(rest, {
-			get style() {
-				return {
-					...rest.style,
-					...multiline() ? { "--bs-ellipsis-lines": String(own.lines) } : {}
-				};
-			},
-			"data-scope": "ellipsis",
-			"data-part": "root",
-			get ["data-multiline"]() {
-				return multiline() ? "" : void 0;
-			}
-		}), false, false);
-		return _el$;
-	})();
+	var _el$ = _tmpl$();
+	spread(_el$, [rest, {
+		get style() {
+			return {
+				...rest.style,
+				...multiline() ? { "--bs-ellipsis-lines": String(own.lines) } : {}
+			};
+		},
+		"data-scope": "ellipsis",
+		"data-part": "root",
+		get "data-multiline"() {
+			return multiline() ? "" : void 0;
+		}
+	}], false);
+	return _el$;
 }
 //#endregion
 export { Ellipsis };

package/dist/components/empty/index.mjs

@@ -1,5 +1,5 @@
 import { injectComponentStyle } from "@bysages/core";
-import { createComponent, mergeProps } from "solid-js/web";
+import { createComponent, mergeProps } from "@solidjs/web";
 //#region src/components/empty/index.tsx
 /** An empty state: the page holds its breath. Root centers the column,
 * Visual carries the mark, Title and Description carry the ink, Actions
@@ -8,7 +8,7 @@ function part(name, tag) {
 	return ((props) => {
 		return createComponent(tag, mergeProps(props, {
 			"data-scope": "empty",
-			get ["data-part"]() {
+			get "data-part"() {
 				return name.toLowerCase();
 			}
 		}));

package/dist/components/file-upload/index.d.mts

@@ -1,5 +1,10 @@
+import { ComponentProps } from "solid-js";
 import { FileUpload as FileUpload$1, FileUploadRootProps } from "@ark-ui/solid/file-upload";
 //#region src/components/file-upload/index.d.ts
+/** The inner trigger repeats the click binding the dropzone already
+ * owns: keyboard users enter through the dropzone, so the button
+ * leaves the tab order and the semantic tree entirely. */
+declare function FileUploadTrigger(props: ComponentProps<typeof FileUpload$1.Trigger>): import("solid-js").JSX.Element;
 /** Ark's FileUpload, dressed in the paper-and-ink system: a dashed
  * dropzone that floods with subtle light on drag-over, and accepted files
  * as loose hairline slips. The API is Ark's own — Root, Label, Trigger,
@@ -11,7 +16,8 @@ type FileUploadOwnProps = {
   size?: "sm" | "md" | "lg";
 };
 declare function FileUploadRoot(props: FileUploadRootProps & FileUploadOwnProps): import("solid-js").JSX.Element;
-export declare const FileUpload: Omit<typeof FileUpload$1, "Root"> & {
+export declare const FileUpload: Omit<typeof FileUpload$1, "Root" | "Trigger"> & {
   Root: typeof FileUploadRoot;
+  Trigger: typeof FileUploadTrigger;
 };
 //#endregion

package/dist/components/file-upload/index.mjs

@@ -1,17 +1,27 @@
 import { injectComponentStyle } from "@bysages/core";
-import { createComponent, mergeProps } from "solid-js/web";
+import { createComponent, mergeProps } from "@solidjs/web";
 import { splitProps } from "solid-js";
 import { FileUpload as FileUpload$1 } from "@ark-ui/solid/file-upload";
 //#region src/components/file-upload/index.tsx
+/** The inner trigger repeats the click binding the dropzone already
+* owns: keyboard users enter through the dropzone, so the button
+* leaves the tab order and the semantic tree entirely. */
+function FileUploadTrigger(props) {
+	return createComponent(FileUpload$1.Trigger, mergeProps(props, {
+		tabindex: -1,
+		"aria-hidden": "true"
+	}));
+}
 function FileUploadRoot(props) {
 	const [own, rest] = splitProps(props, ["size"]);
-	return createComponent(FileUpload$1.Root, mergeProps(rest, { get ["data-size"]() {
+	return createComponent(FileUpload$1.Root, mergeProps(rest, { get "data-size"() {
 		return own.size ?? "md";
 	} }));
 }
 const FileUpload = {
 	...FileUpload$1,
-	Root: FileUploadRoot
+	Root: FileUploadRoot,
+	Trigger: FileUploadTrigger
 };
 injectComponentStyle("file-upload");
 //#endregion

package/dist/components/float-button/index.mjs

@@ -1,10 +1,11 @@
 import { Button } from "../button/index.mjs";
+import { n as useComponentMessages } from "../../use-component-messages-C4SCVYjD.mjs";
 import { injectComponentStyle } from "@bysages/core";
-import { createComponent, insert, mergeProps, spread, template } from "solid-js/web";
+import { createComponent, insert, mergeProps, spread, template } from "@solidjs/web";
 import { createContext, createSignal, splitProps, useContext } from "solid-js";
 //#region src/components/float-button/index.tsx
-var _tmpl$ = /*#__PURE__*/ template(`<div>`);
-var _tmpl$2 = /*#__PURE__*/ template(`<div><span data-scope=float-button data-part=item-label aria-hidden=true>`);
+var _tmpl$ = /* @__PURE__ */ template(`<div>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<div><span data-scope=float-button data-part=item-label aria-hidden=true>`);
 /** Solid context for {@link FloatButtonContext}, exported so a custom
 * part can read the group's state with `useContext`. */
 const FloatButtonContextKey = createContext();
@@ -40,16 +41,16 @@ function FloatButtonRoot(props) {
 		value: context,
 		get children() {
 			var _el$ = _tmpl$();
-			spread(_el$, mergeProps(rest, {
+			spread(_el$, [rest, {
 				"data-scope": "float-button",
 				"data-part": "root",
-				get ["data-placement"]() {
+				get "data-placement"() {
 					return own.placement ?? "bottom-end";
 				},
-				get ["data-state"]() {
+				get "data-state"() {
 					return open() ? "open" : "closed";
 				}
-			}), false, false);
+			}], false);
 			return _el$;
 		}
 	});
@@ -62,6 +63,7 @@ const STEP_DOWN = {
 function FloatButtonTrigger(props) {
 	const [own, rest] = splitProps(props, ["label", "children"]);
 	const context = useContext(FloatButtonContextKey);
+	const messages = useComponentMessages();
 	return createComponent(Button, mergeProps(rest, {
 		variant: "solid",
 		square: true,
@@ -69,10 +71,10 @@ function FloatButtonTrigger(props) {
 			return context?.size() ?? "lg";
 		},
 		onClick: () => context?.toggle(),
-		get ["aria-label"]() {
-			return own.label || "Actions";
+		get "aria-label"() {
+			return own.label || messages().floatButton.actions;
 		},
-		get ["aria-expanded"]() {
+		get "aria-expanded"() {
 			return context?.open() ?? false;
 		},
 		get children() {
@@ -88,35 +90,36 @@ function FloatButtonItem(props) {
 		"children"
 	]);
 	const context = useContext(FloatButtonContextKey);
-	return (() => {
-		var _el$2 = _tmpl$2(), _el$3 = _el$2.firstChild;
-		spread(_el$2, mergeProps(rest, {
-			"data-scope": "float-button",
-			"data-part": "item"
-		}), false, true);
-		insert(_el$2, createComponent(Button, {
-			variant: "outline",
-			square: true,
-			get size() {
-				return context ? STEP_DOWN[context.size()] : "md";
-			},
-			get disabled() {
-				return own.disabled;
-			},
-			get ["aria-label"]() {
-				return own.label;
-			},
-			onClick: (event) => {
-				own.onClick?.(event);
-				context?.close();
-			},
-			get children() {
-				return own.children;
-			}
-		}), _el$3);
-		insert(_el$3, () => own.label);
-		return _el$2;
-	})();
+	var _el$2 = _tmpl$2();
+	var _el$3 = _el$2.firstChild;
+	spread(_el$2, [rest, {
+		"data-scope": "float-button",
+		"data-part": "item"
+	}], true);
+	insert(_el$2, createComponent(Button, {
+		variant: "outline",
+		square: true,
+		get size() {
+			return context ? STEP_DOWN[context.size()] : "md";
+		},
+		get disabled() {
+			return own.disabled;
+		},
+		get "aria-label"() {
+			return own.label;
+		},
+		onClick: (event) => {
+			own.onClick?.(event);
+			context?.close();
+		},
+		get children() {
+			return own.children;
+		}
+	}), _el$3);
+	insert(_el$3, () => {
+		return own.label;
+	});
+	return _el$2;
 }
 const FloatButton = Object.assign(FloatButtonRoot, {
 	Root: FloatButtonRoot,

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

@@ -1,2 +1,2 @@
 import { a as SolidFormApi, c as FormApi, i as FormProps, l as FieldApi, n as FormField, o as createField, r as FormFieldProps, s as createForm, t as Form } from "../../index-B1xiJ5ki.mjs";
-export { type FieldApi, Form, type FormApi, FormField, FormFieldProps, FormProps, type SolidFormApi, createField, createForm };
+export { type FieldApi, Form, type FormApi, FormField, FormFieldProps, FormProps, type SolidFormApi, createField, createField as useField, createForm, createForm as useForm };

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;