@indielayer/ui 2.0.0 → 2.1.0

package/lib/components/upload/Upload.vue_vue_type_script_setup_true_lang.js

@@ -2,109 +2,140 @@ import { useTheme as e } from "../../composables/useTheme.js";
 import { optionalBooleanProp as t } from "../../common/props.js";
 import { useCommon as n } from "../../composables/useCommon.js";
 import r from "../icon/Icon.js";
-import { closeIcon as i, fileIcon as a, uploadIcon as o } from "../../common/icons.js";
-import { useInteractive as s } from "../../composables/useInteractive.js";
-import { useInputtable as c } from "../../composables/useInputtable.js";
-import l from "../inputFooter/InputFooter.js";
-import { useDropZone as u } from "../../node_modules/.pnpm/@vueuse_core@11.1.0_vue@3.5.34_typescript@5.2.2_/node_modules/@vueuse/core/index.js";
-import ee from "../label/Label.js";
-import te from "../progress/Progress.js";
-import { Fragment as d, computed as f, createBlock as p, createCommentVNode as m, createElementBlock as h, createElementVNode as g, createVNode as _, defineComponent as v, mergeProps as y, normalizeClass as b, normalizeStyle as x, onBeforeUnmount as S, openBlock as C, ref as w, renderList as T, renderSlot as E, toDisplayString as D, toHandlers as ne, unref as O, watch as re, withCtx as ie } from "vue";
+import { closeIcon as i, fileIcon as ee, uploadIcon as te } from "../../common/icons.js";
+import { useInteractive as a } from "../../composables/useInteractive.js";
+import { useInputtable as o } from "../../composables/useInputtable.js";
+import s from "../inputFooter/InputFooter.js";
+import { useDropZone as ne } from "../../node_modules/.pnpm/@vueuse_core@11.1.0_vue@3.5.34_typescript@5.2.2_/node_modules/@vueuse/core/index.js";
+import re from "../label/Label.js";
+import c from "../progress/Progress.js";
+import { isFileAccepted as l } from "./fileAccept.js";
+import { Fragment as u, computed as d, createBlock as f, createCommentVNode as p, createElementBlock as m, createElementVNode as h, createVNode as g, defineComponent as _, mergeProps as v, normalizeClass as y, normalizeStyle as b, onBeforeUnmount as x, openBlock as S, ref as C, renderList as ie, renderSlot as w, toDisplayString as T, toHandlers as ae, unref as E, watch as oe, withCtx as se } from "vue";
 //#region src/components/upload/Upload.vue?vue&type=script&setup=true&lang.ts
-var ae = [
+var ce = [
 	"id",
 	"disabled",
 	"name",
 	"accept",
 	"multiple",
 	"readonly"
-], oe = { class: "text-secondary-500 dark:text-secondary-400" }, se = { class: "flex items-center" }, k = ["src"], A = { class: "truncate flex-1 pr-2" }, j = { class: "font-medium truncate" }, M = { class: "text-xs text-secondary-500" }, N = ["onClick"], P = /* @__PURE__ */ v({
-	name: "XUpload",
-	validators: {
-		...n.validators(),
-		variant: ["box"]
+], le = { class: "text-secondary-500 dark:text-secondary-400" }, D = { class: "flex items-center" }, O = ["src"], k = { class: "truncate flex-1 pr-2" }, A = { class: "font-medium truncate" }, j = { class: "text-xs text-secondary-500" }, M = ["onClick"], N = {
+	...n.validators(),
+	variant: ["box"]
+}, P = {
+	...a.props(),
+	...o.props(),
+	placeholder: {
+		type: String,
+		description: "Text shown in the default drop zone."
+	},
+	accept: {
+		type: String,
+		description: "Accepted file types (native `accept` attribute)."
+	},
+	multiple: t("Allows selecting more than one file."),
+	maxFiles: {
+		type: [Number, String],
+		description: "Maximum number of files allowed."
+	},
+	maxFileSize: {
+		type: [Number, String],
+		description: "Maximum file size in bytes."
+	},
+	variant: {
+		type: String,
+		default: "box",
+		description: "Visual variant of the upload control."
 	},
-	props: {
-		...s.props(),
-		...c.props(),
-		placeholder: String,
-		accept: String,
-		multiple: t(),
-		maxFiles: [Number, String],
-		maxFileSize: [Number, String],
-		variant: {
-			type: String,
-			default: "box"
+	action: {
+		type: String,
+		description: "URL to upload files to; enables remote upload mode when set."
+	},
+	headers: {
+		type: Object,
+		description: "Additional HTTP headers sent with the upload request."
+	},
+	method: {
+		type: String,
+		default: "POST",
+		description: "HTTP method used when uploading to `action`."
+	},
+	withCredentials: t("Sends cookies/credentials with the upload request."),
+	fileFormDataName: {
+		type: String,
+		default: "file",
+		description: "FormData field name for each uploaded file."
+	}
+}, F = /* @__PURE__ */ _({
+	name: "XUpload",
+	validators: N,
+	docs: {
+		slots: {
+			box: "Custom drop zone UI (`is-over` when dragging files).",
+			files: "Custom file list (`files` upload state array).",
+			removeIcon: "Icon for the remove-file control."
 		},
-		action: String,
-		headers: Object,
-		method: {
-			type: String,
-			default: "POST"
+		emits: {
+			...o.emitDocs(),
+			upload: "Emitted when a file finishes uploading (remote mode).",
+			remove: "Emitted when a file is removed from the list."
 		},
-		withCredentials: t(),
-		fileFormDataName: {
-			type: String,
-			default: "file"
-		}
+		methods: { ...o.methodDocs() }
 	},
+	props: P,
 	emits: [
-		...c.emits(),
+		...o.emits(),
 		"upload",
 		"remove"
 	],
-	setup(t, { expose: n, emit: v }) {
-		let P = t, F = v, I = w(null), L = f(() => !!P.action), R = w([]);
-		re(R, (e) => {
-			F("update:modelValue", e);
+	setup(t, { expose: n, emit: _ }) {
+		let N = t, P = _, F = C(null), I = d(() => !!N.action), L = C([]);
+		oe(L, (e) => {
+			P("update:modelValue", e);
 		}, {
 			deep: !0,
 			immediate: !0
 		});
-		let { focus: z, blur: B } = s(I);
-		function V(e) {
+		let { focus: R, blur: z } = a(F);
+		function B(e) {
 			if (!e) return !1;
-			if (!P.multiple && e.length > 1 || P.maxFiles && e.length > Number(P.maxFiles)) return Y.value = "Too many files", !1;
-			if (P.maxFileSize) {
-				for (let t = 0; t < e.length; t++) if (e[t].size > Number(P.maxFileSize)) return Y.value = "File size is too large", !1;
+			if (!N.multiple && e.length > 1 || N.maxFiles && e.length > Number(N.maxFiles)) return Y.value = "Too many files", !1;
+			if (N.maxFileSize) {
+				for (let t = 0; t < e.length; t++) if (e[t].size > Number(N.maxFileSize)) return Y.value = "File size is too large", !1;
 			}
-			if (P.accept) {
-				let t = P.accept.split(",").map((e) => e.trim());
-				for (let n = 0; n < e.length; n++) {
-					let r = e[n];
-					if (!t.some((e) => r.type === e || r.name.endsWith(e))) return Y.value = "Invalid file type", !1;
-				}
+			if (N.accept) {
+				for (let t = 0; t < e.length; t++) if (!l(e[t], N.accept)) return Y.value = "Invalid file type", !1;
 			}
 			return !0;
 		}
-		function H(e) {
+		function V(e) {
 			let t = e.target.files;
-			V(t) && F("change", e);
+			B(t) && P("change", e);
 		}
-		function U(e) {
+		function H(e) {
 			let t = e.target.files;
-			V(t) && (K(t), P.validateOnInput && !Z.value && Q(R.value), F("input", e));
+			B(t) && (K(t), N.validateOnInput && !Z.value && Q(L.value), P("input", e));
 		}
-		let W = w(null);
-		function ce(e) {
-			V(e) && K(e);
+		let U = C(null);
+		function W(e) {
+			B(e) && K(e);
 		}
-		let { isOverDropZone: G } = u(W, {
-			onDrop: ce,
-			multiple: P.multiple,
+		let { isOverDropZone: G } = ne(U, {
+			onDrop: W,
+			multiple: N.multiple,
 			preventDefaultForUnhandled: !1
 		});
 		function K(e) {
-			R.value = e ? Array.from(e).map((e) => ({
+			L.value = e ? Array.from(e).map((e) => ({
 				file: e,
-				completed: !L.value,
-				progress: L.value ? 0 : 100,
+				completed: !I.value,
+				progress: I.value ? 0 : 100,
 				error: ""
-			})) : [], L.value && pe();
+			})) : [], I.value && me();
 		}
-		function le(e) {
-			let t = R.value.findIndex((t) => t.file === e);
-			t !== -1 && (F("remove", R.value[t]), R.value.splice(t, 1));
+		function ue(e) {
+			let t = L.value.findIndex((t) => t.file === e);
+			t !== -1 && (P("remove", L.value[t]), L.value.splice(t, 1));
 		}
 		function q(e) {
 			return e.type.startsWith("image") || [
@@ -117,23 +148,23 @@ var ae = [
 			].some((t) => e.name.endsWith(t));
 		}
 		let J = [];
-		function ue(e) {
+		function de(e) {
 			let t = URL.createObjectURL(e);
 			return J.push(t), t;
 		}
-		S(() => {
+		x(() => {
 			J.forEach((e) => URL.revokeObjectURL(e));
 		});
-		function de(e) {
+		function fe(e) {
 			return e < 1024 ? `${e} B` : e < 1024 * 1024 ? `${(e / 1024).toFixed(2)} KB` : e < 1024 * 1024 * 1024 ? `${(e / 1024 / 1024).toFixed(2)} MB` : `${(e / 1024 / 1024 / 1024).toFixed(2)} GB`;
 		}
-		async function fe(e) {
+		async function pe(e) {
 			return new Promise((t, n) => {
-				if (!P.action) n(/* @__PURE__ */ Error("No action provided"));
+				if (!N.action) n(/* @__PURE__ */ Error("No action provided"));
 				else {
 					let r = new XMLHttpRequest(), i = new FormData();
-					i.append(P.fileFormDataName, e.file), r.open(P.method, P.action, !0), P.headers && typeof P.headers == "object" && Object.keys(P.headers).forEach((e) => {
-						r.setRequestHeader(e, P.headers[e]);
+					i.append(N.fileFormDataName, e.file), r.open(N.method, N.action, !0), N.headers && typeof N.headers == "object" && Object.keys(N.headers).forEach((e) => {
+						r.setRequestHeader(e, N.headers[e]);
 					}), r.upload.addEventListener("progress", (t) => {
 						t.lengthComputable && (e.progress = t.loaded / t.total * 100);
 					}), r.addEventListener("load", () => {
@@ -155,63 +186,63 @@ var ae = [
 				}
 			});
 		}
-		async function pe() {
-			if (!P.action && !R.value) return;
+		async function me() {
+			if (!N.action && !L.value) return;
 			let e = [];
-			for (let t = 0; t < R.value.length; t++) e.push(fe(R.value[t]));
-			await Promise.all(e), Q(R.value);
+			for (let t = 0; t < L.value.length; t++) e.push(pe(L.value[t]));
+			await Promise.all(e), Q(L.value);
 		}
-		function me() {
-			Y.value = "", Z.value = !0, R.value = [], I.value && (I.value.value = "");
+		function he() {
+			Y.value = "", Z.value = !0, L.value = [], F.value && (F.value.value = "");
 		}
-		let { errorInternal: Y, hideFooterInternal: he, isInsideForm: ge, isInsideInputGroup: X, inputListeners: _e, isFirstValidation: Z, validate: Q, setError: ve } = c(P, {
-			focus: z,
-			emit: F
-		}), { styles: ye, classes: $, className: be } = e("Upload", {}, P);
+		let { errorInternal: Y, hideFooterInternal: ge, isInsideForm: X, isInsideInputGroup: _e, inputListeners: ve, isFirstValidation: Z, validate: Q, setError: ye } = o(N, {
+			focus: R,
+			emit: P
+		}), { styles: be, classes: $, className: xe } = e("Upload", {}, N);
 		return n({
-			focus: z,
-			blur: B,
-			reset: me,
+			focus: R,
+			blur: z,
+			reset: he,
 			validate: Q,
-			setError: ve
-		}), (e, t) => (C(), h("div", { class: b([O(be), O($).wrapper]) }, [_(ee, {
-			style: x(O(ye)),
+			setError: ye
+		}), (e, t) => (S(), m("div", { class: y([E(xe), E($).wrapper]) }, [g(re, {
+			style: b(E(be)),
 			disabled: e.disabled,
 			required: e.required,
-			"is-inside-form": O(ge),
-			"is-inside-input-group": O(X),
+			"is-inside-form": E(X),
+			"is-inside-input-group": E(_e),
 			label: e.label,
 			tooltip: e.tooltip
 		}, {
-			default: ie(() => [
-				g("input", y({
+			default: se(() => [
+				h("input", v({
 					id: e.id,
 					ref_key: "elRef",
-					ref: I,
+					ref: F,
 					type: "file",
-					class: ["sr-only", O($).input],
+					class: ["sr-only", E($).input],
 					disabled: e.disabled,
 					name: e.name,
 					accept: e.accept,
 					multiple: e.multiple,
 					readonly: e.readonly
-				}, ne({
-					...O(_e),
-					input: U,
-					change: H
-				}, !0)), null, 16, ae),
-				E(e.$slots, "box", { isOver: O(G) }, () => [g("div", {
+				}, ae({
+					...E(ve),
+					input: H,
+					change: V
+				}, !0)), null, 16, ce),
+				w(e.$slots, "box", { isOver: E(G) }, () => [h("div", {
 					ref_key: "dropZoneRef",
-					ref: W,
-					class: b(["border border-dashed rounded-md flex items-center justify-center gap-2 p-4 cursor-pointer transition-colors duration-500 hover:border-primary-500 dark:hover:border-primary-400", { "border-primary-500 dark:border-primary-400": O(G) }])
+					ref: U,
+					class: y(["border border-dashed rounded-md flex items-center justify-center gap-2 p-4 cursor-pointer transition-colors duration-500 hover:border-primary-500 dark:hover:border-primary-400", { "border-primary-500 dark:border-primary-400": E(G) }])
 				}, [
-					_(r, { icon: O(o) }, null, 8, ["icon"]),
-					g("span", oe, D(e.placeholder), 1),
-					t[0] ||= g("span", { class: "text-xs text-secondary-400 dark:text-secondary-500" }, "or drag and drop", -1)
+					g(r, { icon: E(te) }, null, 8, ["icon"]),
+					h("span", le, T(e.placeholder), 1),
+					t[0] ||= h("span", { class: "text-xs text-secondary-400 dark:text-secondary-500" }, "or drag and drop", -1)
 				], 2)]),
-				O(he) ? m("", !0) : (C(), p(l, {
+				E(ge) ? p("", !0) : (S(), f(s, {
 					key: 0,
-					error: O(Y),
+					error: E(Y),
 					helper: e.helper
 				}, null, 8, ["error", "helper"]))
 			]),
@@ -224,38 +255,38 @@ var ae = [
 			"is-inside-input-group",
 			"label",
 			"tooltip"
-		]), E(e.$slots, "files", { files: R.value }, () => [(C(!0), h(d, null, T(R.value, (t, n) => (C(), h("div", {
+		]), w(e.$slots, "files", { files: L.value }, () => [(S(!0), m(u, null, ie(L.value, (t, n) => (S(), m("div", {
 			key: n,
 			class: "border rounded-md p-2 bg-secondary-100 my-2"
 		}, [
-			g("div", se, [
-				g("div", { class: b(["rounded-md w-9 h-9 flex items-center justify-center mr-2 border", { "p-2 bg-white": !q(t.file) }]) }, [q(t.file) ? (C(), h("img", {
+			h("div", D, [
+				h("div", { class: y(["rounded-md w-9 h-9 flex items-center justify-center mr-2 border", { "p-2 bg-white": !q(t.file) }]) }, [q(t.file) ? (S(), m("img", {
 					key: 0,
-					src: ue(t.file),
+					src: de(t.file),
 					class: "w-full h-full object-cover rounded-md"
-				}, null, 8, k)) : (C(), p(r, {
+				}, null, 8, O)) : (S(), f(r, {
 					key: 1,
-					icon: O(a)
+					icon: E(ee)
 				}, null, 8, ["icon"]))], 2),
-				g("div", A, [g("div", j, D(t.file.name), 1), g("div", M, D(de(t.file.size)), 1)]),
-				g("button", {
+				h("div", k, [h("div", A, T(t.file.name), 1), h("div", j, T(fe(t.file.size)), 1)]),
+				h("button", {
 					type: "button",
 					class: "shrink-0",
-					onClick: (e) => le(t.file)
-				}, [E(e.$slots, "removeIcon", {}, () => [_(r, { icon: O(i) }, null, 8, ["icon"])])], 8, N)
+					onClick: (e) => ue(t.file)
+				}, [w(e.$slots, "removeIcon", {}, () => [g(r, { icon: E(i) }, null, 8, ["icon"])])], 8, M)
 			]),
-			L.value ? (C(), p(te, {
+			I.value ? (S(), f(c, {
 				key: 0,
 				percentage: t.progress,
 				class: "mt-1",
 				color: t.error ? "warning" : "success"
-			}, null, 8, ["percentage", "color"])) : m("", !0),
-			t.error ? (C(), p(l, {
+			}, null, 8, ["percentage", "color"])) : p("", !0),
+			t.error ? (S(), f(s, {
 				key: 1,
 				error: t.error
-			}, null, 8, ["error"])) : m("", !0)
+			}, null, 8, ["error"])) : p("", !0)
 		]))), 128))])], 2));
 	}
 });
 //#endregion
-export { P as default };
+export { F as default };

package/lib/components/upload/fileAccept.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Matches a file against an HTML `accept` attribute value.
+ * Supports extensions (`.png`), MIME types (`image/png`), and wildcards (`image/*`).
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/accept
+ */
+export declare function isFileAccepted(file: File, accept: string): boolean;

package/lib/components/upload/fileAccept.js

@@ -0,0 +1,17 @@
+//#region src/components/upload/fileAccept.ts
+function e(e, t) {
+	let n = t.split(",").map((e) => e.trim()).filter(Boolean);
+	if (!n.length) return !0;
+	let r = e.name.toLowerCase(), i = e.type.toLowerCase();
+	return n.some((e) => {
+		let t = e.toLowerCase();
+		if (t.startsWith(".")) return r.endsWith(t);
+		if (t.endsWith("/*")) {
+			let e = t.slice(0, -2);
+			return i.startsWith(`${e}/`);
+		}
+		return i === t;
+	});
+}
+//#endregion
+export { e as isFileAccepted };

package/lib/composables/useColors.d.ts

@@ -26,6 +26,7 @@ export declare const useColors: {
         readonly color: {
             readonly type: StringConstructor;
             readonly default: string | undefined;
+            readonly description: "Theme or CSS color used for the control accents.";
         };
     };
 };

package/lib/composables/useColors.js

@@ -39,7 +39,8 @@ var l = {}, u = {
 };
 p.props = (e) => ({ color: {
 	type: String,
-	default: e
+	default: e,
+	description: "Theme or CSS color used for the control accents."
 } });
 //#endregion
 export { p as useColors };

package/lib/composables/useCommon.d.ts

@@ -7,6 +7,7 @@ export declare const useCommon: {
             readonly type: PropType<Size>;
             readonly default: "md";
             readonly validator: (value: string) => boolean;
+            readonly description: "Control size. One of xs, sm, md, lg, xl.";
         };
     };
     validators(): {

package/lib/composables/useCommon.js

@@ -9,7 +9,8 @@ var e = () => {}, t = Object.freeze({ size: [
 e.props = () => ({ size: {
 	type: String,
 	default: "md",
-	validator: (e) => t.size.includes(e)
+	validator: (e) => t.size.includes(e),
+	description: "Control size. One of xs, sm, md, lg, xl."
 } }), e.validators = () => ({ ...t });
 //#endregion
 export { e as useCommon };

package/lib/composables/useFocusTrap.js

@@ -37,7 +37,7 @@ function a() {
 		}));
 	}
 	function h(e) {
-		document.removeEventListener("keydown", p), o?.disconnect(), o = null, e?.returnFocus && l && l.focus(), u = null, a.value = [], s = null, c = null, l = null;
+		typeof document < "u" && document.removeEventListener("keydown", p), o?.disconnect(), o = null, e?.returnFocus && l && l.focus(), u = null, a.value = [], s = null, c = null, l = null;
 	}
 	return t(() => {
 		h({ returnFocus: !0 });

package/lib/composables/useInputtable.d.ts

@@ -58,28 +58,63 @@ export declare const useInputtable: {
         getError: () => any;
     };
     emits(withListeners?: boolean): string[];
+    emitDocs(withListeners?: boolean): Record<string, string>;
+    methodDocs(): Record<string, string>;
     props(): {
         readonly modelValue: {
             readonly type: PropType<string | number | boolean | object | any[] | undefined>;
             readonly default: undefined;
+            readonly description: "Bound value (v-model).";
+        };
+        readonly id: {
+            readonly type: StringConstructor;
+            readonly description: "Native id attribute for the input element.";
+        };
+        readonly name: {
+            readonly type: StringConstructor;
+            readonly description: "Native name attribute for form submission.";
+        };
+        readonly readonly: {
+            readonly type: BooleanConstructor;
+            readonly description: "Makes the field read-only without disabling it.";
+        };
+        readonly required: {
+            readonly type: BooleanConstructor;
+            readonly description: "Marks the field as required for validation.";
         };
-        readonly id: StringConstructor;
-        readonly name: StringConstructor;
-        readonly readonly: BooleanConstructor;
-        readonly required: BooleanConstructor;
         readonly validateOnInput: {
             readonly type: BooleanConstructor;
             readonly default: true;
+            readonly description: "Runs validation on each input event when true.";
+        };
+        readonly label: {
+            readonly type: StringConstructor;
+            readonly description: "Visible label text for the field.";
+        };
+        readonly helper: {
+            readonly type: StringConstructor;
+            readonly description: "Helper text shown below the field.";
+        };
+        readonly error: {
+            readonly type: StringConstructor;
+            readonly description: "External error message; overrides rule errors when set.";
+        };
+        readonly hideFooter: {
+            readonly type: BooleanConstructor;
+            readonly description: "Hides the footer area (helper / error).";
         };
-        readonly label: StringConstructor;
-        readonly helper: StringConstructor;
-        readonly error: StringConstructor;
-        readonly hideFooter: BooleanConstructor;
         readonly rules: {
             readonly type: ArrayConstructor;
             readonly default: () => never[];
+            readonly description: "Validation rule functions or rule descriptors.";
+        };
+        readonly tooltip: {
+            readonly type: StringConstructor;
+            readonly description: "Optional tooltip text next to the label.";
+        };
+        readonly skipFormRegistry: {
+            readonly type: BooleanConstructor;
+            readonly description: "Skips registering this field with a parent x-form.";
         };
-        readonly tooltip: StringConstructor;
-        readonly skipFormRegistry: BooleanConstructor;
     };
 };

package/lib/composables/useInputtable.js

@@ -103,7 +103,16 @@ l.emits = (e = !0) => e ? [
 	"focus",
 	"input",
 	"change"
-] : ["update:modelValue"], l.props = () => ({
+] : ["update:modelValue"], l.emitDocs = (e = !0) => {
+	let t = { "update:modelValue": "Emitted when the bound value changes (v-model)." };
+	return e && (t.blur = "Emitted when the field loses focus.", t.focus = "Emitted when the field receives focus.", t.input = "Emitted on native input events.", t.change = "Emitted when the value is committed (change)."), t;
+}, l.methodDocs = () => ({
+	focus: "Focus the underlying control.",
+	blur: "Remove focus from the underlying control.",
+	reset: "Reset the field value and validation state.",
+	validate: "Run validation rules and return whether the field is valid.",
+	setError: "Set an external error message on the field."
+}), l.props = () => ({
 	modelValue: {
 		type: [
 			String,
@@ -112,26 +121,59 @@ l.emits = (e = !0) => e ? [
 			Object,
 			Array
 		],
-		default: void 0
+		default: void 0,
+		description: "Bound value (v-model)."
+	},
+	id: {
+		type: String,
+		description: "Native id attribute for the input element."
+	},
+	name: {
+		type: String,
+		description: "Native name attribute for form submission."
+	},
+	readonly: {
+		type: Boolean,
+		description: "Makes the field read-only without disabling it."
+	},
+	required: {
+		type: Boolean,
+		description: "Marks the field as required for validation."
 	},
-	id: String,
-	name: String,
-	readonly: Boolean,
-	required: Boolean,
 	validateOnInput: {
 		type: Boolean,
-		default: !0
+		default: !0,
+		description: "Runs validation on each input event when true."
+	},
+	label: {
+		type: String,
+		description: "Visible label text for the field."
+	},
+	helper: {
+		type: String,
+		description: "Helper text shown below the field."
+	},
+	error: {
+		type: String,
+		description: "External error message; overrides rule errors when set."
+	},
+	hideFooter: {
+		type: Boolean,
+		description: "Hides the footer area (helper / error)."
 	},
-	label: String,
-	helper: String,
-	error: String,
-	hideFooter: Boolean,
 	rules: {
 		type: Array,
-		default: () => []
+		default: () => [],
+		description: "Validation rule functions or rule descriptors."
+	},
+	tooltip: {
+		type: String,
+		description: "Optional tooltip text next to the label."
 	},
-	tooltip: String,
-	skipFormRegistry: Boolean
+	skipFormRegistry: {
+		type: Boolean,
+		description: "Skips registering this field with a parent x-form."
+	}
 });
 //#endregion
 export { l as useInputtable };

package/lib/composables/useInteractive.d.ts

@@ -12,12 +12,22 @@ export declare const useInteractive: {
         blur: () => void | undefined;
     };
     props(): {
-        readonly disabled: BooleanConstructor;
-        readonly loading: BooleanConstructor;
-        readonly loadingLabel: StringConstructor;
+        readonly disabled: {
+            readonly type: BooleanConstructor;
+            readonly description: "Disables interaction and applies disabled styling.";
+        };
+        readonly loading: {
+            readonly type: BooleanConstructor;
+            readonly description: "Shows a loading indicator and blocks interaction.";
+        };
+        readonly loadingLabel: {
+            readonly type: StringConstructor;
+            readonly description: "Accessible label announced while loading.";
+        };
         readonly loadingStatus: {
             readonly type: PropType<LoaderStatus>;
             readonly default: "active";
+            readonly description: "Loader visual status (for example active or indeterminate).";
         };
     };
 };