@gxp-dev/mod-ui 2.0.10 → 2.0.12

package/dist/components/compositions/elements/file/UploadFile.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,137 @@
+import e from "../../../ui/button/Button.js";
+import "../../../ui/button/index.js";
+import t from "../../../ui/card/Card.js";
+import n from "../../../ui/card/CardContent.js";
+import "../../../ui/card/index.js";
+import r from "../../../ui/field-frame/FieldFrame.js";
+import "../../../ui/field-frame/index.js";
+import { Fragment as i, computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createVNode as u, defineComponent as d, mergeModels as f, openBlock as p, ref as m, renderList as h, toDisplayString as g, unref as _, useModel as v, watch as y, withCtx as b } from "vue";
+import { Upload as x, X as S } from "@lucide/vue";
+//#region src/components/compositions/elements/file/UploadFile.vue?vue&type=script&setup=true&lang.ts
+var C = ["data-element-name"], w = [
+	"accept",
+	"multiple",
+	"disabled",
+	"required",
+	"name"
+], T = {
+	key: 0,
+	class: "flex flex-col gap-2"
+}, E = { class: "flex flex-col" }, D = { class: "text-sm font-medium" }, O = { class: "text-xs text-muted-foreground" }, k = /* @__PURE__ */ d({
+	__name: "UploadFile",
+	props: /* @__PURE__ */ f({
+		modelValue: {},
+		id: {},
+		name: {},
+		label: {},
+		hideLabel: { type: Boolean },
+		placeholder: {},
+		accept: {},
+		acceptedFileTypes: { default: () => [] },
+		multiple: { type: Boolean },
+		maxFileSize: {},
+		required: { type: Boolean },
+		readonly: { type: Boolean },
+		disabled: { type: Boolean },
+		helpText: {},
+		errors: { default: () => [] }
+	}, {
+		modelValue: {},
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(d) {
+		let f = d, k = v(d, "modelValue"), A = m(null), j = m([]);
+		y(() => k.value, (e) => {
+			e instanceof File ? j.value = [e] : Array.isArray(e) && e.every((e) => e instanceof File) ? j.value = e : j.value = [];
+		}, { immediate: !0 });
+		let M = a(() => {
+			if (f.accept) return f.accept;
+			let e = f.acceptedFileTypes;
+			return Array.isArray(e) && e.length ? e.join(",") : "";
+		}), N = a(() => f.maxFileSize);
+		function P() {
+			A.value?.click();
+		}
+		function F() {
+			f.multiple ? k.value = j.value.slice() : k.value = j.value[0] ?? null;
+		}
+		function I(e) {
+			let t = e.target, n = t.files ? Array.from(t.files) : [];
+			if (n.length) {
+				if (N.value && n.find((e) => e.size > N.value)) {
+					F();
+					return;
+				}
+				f.multiple ? j.value = [...j.value, ...n] : j.value = [n[0]], F(), t.value = "";
+			}
+		}
+		function L(e) {
+			j.value.splice(e, 1), F();
+		}
+		function R(e) {
+			return e < 1024 ? `${e} B` : e < 1024 * 1024 ? `${(e / 1024).toFixed(1)} KB` : `${(e / (1024 * 1024)).toFixed(2)} MB`;
+		}
+		return (a, f) => (p(), o(_(r), {
+			label: d.label,
+			required: d.required,
+			"hide-label": d.hideLabel,
+			"help-text": d.helpText,
+			errors: d.errors
+		}, {
+			default: b(() => [l("div", { "data-element-name": d.name ?? void 0 }, [u(_(e), {
+				type: "button",
+				variant: "outline",
+				disabled: d.disabled || d.readonly,
+				"data-testid": "upload-trigger",
+				onClick: P
+			}, {
+				default: b(() => [u(_(x), { class: "mr-2 size-4" }), l("span", null, g(d.placeholder ?? (d.multiple ? "Add files" : "Choose file")), 1)]),
+				_: 1
+			}, 8, ["disabled"]), l("input", {
+				ref_key: "fileInput",
+				ref: A,
+				type: "file",
+				class: "sr-only",
+				accept: M.value || void 0,
+				multiple: d.multiple,
+				disabled: d.disabled || d.readonly,
+				required: d.required,
+				name: d.name ?? void 0,
+				"data-testid": "upload-input",
+				onChange: I
+			}, null, 40, w)], 8, C), j.value.length ? (p(), c("div", T, [(p(!0), c(i, null, h(j.value, (r, i) => (p(), o(_(t), {
+				key: `${r.name}-${i}`,
+				class: "border"
+			}, {
+				default: b(() => [u(_(n), { class: "flex items-center justify-between gap-3 py-3" }, {
+					default: b(() => [l("div", E, [l("span", D, g(r.name), 1), l("span", O, g(R(r.size)), 1)]), u(_(e), {
+						type: "button",
+						variant: "ghost",
+						size: "icon-sm",
+						"aria-label": "Remove file",
+						disabled: d.disabled || d.readonly,
+						"data-testid": "upload-remove",
+						onClick: (e) => L(i)
+					}, {
+						default: b(() => [u(_(S), { class: "size-4" })]),
+						_: 1
+					}, 8, ["disabled", "onClick"])]),
+					_: 2
+				}, 1024)]),
+				_: 2
+			}, 1024))), 128))])) : s("", !0)]),
+			_: 1
+		}, 8, [
+			"label",
+			"required",
+			"hide-label",
+			"help-text",
+			"errors"
+		]));
+	}
+});
+//#endregion
+export { k as default };
+
+//# sourceMappingURL=UploadFile.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/compositions/elements/file/UploadFile.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UploadFile.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../src/components/compositions/elements/file/UploadFile.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven file-upload composition.\n *\n * Visible Button triggers a hidden `<input type=\"file\">`. Selected files\n * render as info chips with name, formatted size and a Remove control.\n * Emits a `File` (single) or `File[]` (multiple).\n *\n *   <UploadFile v-model=\"avatar\" label=\"Avatar\" accept=\"image/*\" />\n */\nimport { computed, ref, watch } from \"vue\"\nimport { Upload, X } from \"@lucide/vue\"\nimport { Button } from \"@/components/ui/button\"\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport { FieldFrame } from \"@/components/ui/field-frame\"\n\nexport interface UploadFileProps {\n  modelValue?: File | File[] | null\n  id?: string\n  name?: string\n  label?: string\n  hideLabel?: boolean\n  placeholder?: string\n  accept?: string\n  acceptedFileTypes?: string[]\n  multiple?: boolean\n  maxFileSize?: number\n  required?: boolean\n  readonly?: boolean\n  disabled?: boolean\n  helpText?: string\n  errors?: string[]\n}\n\nconst props = withDefaults(defineProps<UploadFileProps>(), {\n  errors: () => [],\n  acceptedFileTypes: () => [],\n})\n\nconst model = defineModel<File | File[] | null>(\"modelValue\")\n\nconst fileInput = ref<HTMLInputElement | null>(null)\nconst files = ref<File[]>([])\n\nwatch(\n  () => model.value,\n  (next) => {\n    if (next instanceof File) {\n      files.value = [next]\n    } else if (Array.isArray(next) && next.every((f) => f instanceof File)) {\n      files.value = next as File[]\n    } else {\n      files.value = []\n    }\n  },\n  { immediate: true },\n)\n\nconst accept = computed<string>(() => {\n  if (props.accept) {\n    return props.accept\n  }\n  const list = props.acceptedFileTypes\n  return Array.isArray(list) && list.length ? list.join(\",\") : \"\"\n})\n\nconst maxBytes = computed<number | undefined>(() => props.maxFileSize)\n\nfunction openPicker(): void {\n  fileInput.value?.click()\n}\n\nfunction emitFiles(): void {\n  if (props.multiple) {\n    model.value = files.value.slice()\n  } else {\n    model.value = files.value[0] ?? null\n  }\n}\n\nfunction onChange(event: Event): void {\n  const target = event.target as HTMLInputElement\n  const incoming = target.files ? Array.from(target.files) : []\n  if (!incoming.length) {\n    return\n  }\n  const tooLarge = maxBytes.value\n    ? incoming.find((f) => f.size > (maxBytes.value as number))\n    : undefined\n  if (tooLarge) {\n    emitFiles()\n    return\n  }\n  if (props.multiple) {\n    files.value = [...files.value, ...incoming]\n  } else {\n    files.value = [incoming[0]!]\n  }\n  emitFiles()\n  target.value = \"\"\n}\n\nfunction removeFile(index: number): void {\n  files.value.splice(index, 1)\n  emitFiles()\n}\n\nfunction formatBytes(bytes: number): string {\n  if (bytes < 1024) {\n    return `${bytes} B`\n  }\n  if (bytes < 1024 * 1024) {\n    return `${(bytes / 1024).toFixed(1)} KB`\n  }\n  return `${(bytes / (1024 * 1024)).toFixed(2)} MB`\n}\n</script>\n\n<template>\n  <FieldFrame\n    :label=\"label\"\n    :required=\"required\"\n    :hide-label=\"hideLabel\"\n    :help-text=\"helpText\"\n    :errors=\"errors\"\n  >\n    <div :data-element-name=\"name ?? undefined\">\n      <Button\n        type=\"button\"\n        variant=\"outline\"\n        :disabled=\"disabled || readonly\"\n        data-testid=\"upload-trigger\"\n        @click=\"openPicker\"\n      >\n        <Upload class=\"mr-2 size-4\" />\n        <span>{{ placeholder ?? (multiple ? \"Add files\" : \"Choose file\") }}</span>\n      </Button>\n      <input\n        ref=\"fileInput\"\n        type=\"file\"\n        class=\"sr-only\"\n        :accept=\"accept || undefined\"\n        :multiple=\"multiple\"\n        :disabled=\"disabled || readonly\"\n        :required=\"required\"\n        :name=\"name ?? undefined\"\n        data-testid=\"upload-input\"\n        @change=\"onChange\"\n      >\n    </div>\n\n    <div\n      v-if=\"files.length\"\n      class=\"flex flex-col gap-2\"\n    >\n      <Card\n        v-for=\"(file, i) in files\"\n        :key=\"`${file.name}-${i}`\"\n        class=\"border\"\n      >\n        <CardContent class=\"flex items-center justify-between gap-3 py-3\">\n          <div class=\"flex flex-col\">\n            <span class=\"text-sm font-medium\">{{ file.name }}</span>\n            <span class=\"text-xs text-muted-foreground\">{{ formatBytes(file.size) }}</span>\n          </div>\n          <Button\n            type=\"button\"\n            variant=\"ghost\"\n            size=\"icon-sm\"\n            aria-label=\"Remove file\"\n            :disabled=\"disabled || readonly\"\n            data-testid=\"upload-remove\"\n            @click=\"removeFile(i)\"\n          >\n            <X class=\"size-4\" />\n          </Button>\n        </CardContent>\n      </Card>\n    </div>\n  </FieldFrame>\n</template>\n"],"mappings":"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"}

package/dist/components/compositions/elements/input/BarcodeScannerInput.js

@@ -0,0 +1,7 @@
+import e from "./BarcodeScannerInput.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/compositions/elements/input/BarcodeScannerInput.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=BarcodeScannerInput.js.map

package/dist/components/compositions/elements/input/BarcodeScannerInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BarcodeScannerInput.js","names":[],"sources":["../../../../../src/components/compositions/elements/input/BarcodeScannerInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven barcode scanner input.\n *\n * Wraps `@ericblade/quagga2` to provide a live camera-driven barcode\n * scanner. Renders the last decoded value in a read-only Input plus a\n * \"Scan\" button that toggles a `<video>` viewport.\n *\n * The quagga library and the `getUserMedia` API are lazy-imported when\n * scanning starts so the component is safe to render in environments\n * without a camera (e.g. jsdom).\n *\n *   <BarcodeScannerInput v-model=\"ticket\" label=\"Scan ticket\" />\n */\nimport { computed, onBeforeUnmount, ref, useTemplateRef } from \"vue\"\nimport { Camera, Loader2, StopCircle } from \"@lucide/vue\"\nimport { Input } from \"@/components/ui/input\"\nimport { Button } from \"@/components/ui/button\"\nimport { FieldFrame } from \"@/components/ui/field-frame\"\n\nexport interface BarcodeScannerInputProps {\n  modelValue?: string | null\n  id?: string\n  name?: string\n  label?: string\n  hideLabel?: boolean\n  required?: boolean\n  readonly?: boolean\n  disabled?: boolean\n  helpText?: string\n  errors?: string[]\n  /** Quagga barcode reader symbologies to recognise. */\n  scanFormats?: ReadonlyArray<string>\n  /** Start scanning automatically when the component mounts. */\n  autoStart?: boolean\n  /** Preferred camera facing mode. */\n  facingMode?: \"environment\" | \"user\"\n}\n\nconst props = withDefaults(defineProps<BarcodeScannerInputProps>(), {\n  errors: () => [],\n  scanFormats: () => [\n    \"code_128_reader\",\n    \"ean_reader\",\n    \"ean_8_reader\",\n    \"code_39_reader\",\n    \"upc_reader\",\n  ],\n  autoStart: false,\n  facingMode: \"environment\",\n})\n\nconst model = defineModel<string | null>(\"modelValue\")\n\n/** Loose Quagga handle — type-definitions ship with the library but we\n *  keep the references local rather than pulling its full type graph. */\ntype QuaggaResult = { codeResult?: { code?: string | null } }\ntype QuaggaHandle = {\n  init: (config: Record<string, unknown>) => Promise<void>\n  start: () => void\n  stop: () => Promise<void> | void\n  onDetected: (cb: (result: QuaggaResult) => void) => void\n  offDetected: (cb: (result: QuaggaResult) => void) => void\n}\n\nconst videoContainerRef = useTemplateRef<HTMLDivElement>(\"videoContainerRef\")\nconst scanning = ref<boolean>(false)\nconst starting = ref<boolean>(false)\nconst scanError = ref<string>(\"\")\n\nlet quagga: QuaggaHandle | null = null\nlet mediaStream: MediaStream | null = null\nlet detectedHandler: ((result: QuaggaResult) => void) | null = null\n\nconst buttonLabel = computed<string>(() => {\n  if (starting.value) {\n    return \"Starting…\"\n  }\n  return scanning.value ? \"Stop scanning\" : \"Scan\"\n})\n\nconst allErrors = computed<string[]>(() => {\n  if (scanError.value) {\n    return [...props.errors, scanError.value]\n  }\n  return props.errors\n})\n\nfunction releaseStream(): void {\n  if (mediaStream) {\n    for (const track of mediaStream.getTracks()) {\n      try {\n        track.stop()\n      } catch {\n        /* ignore */\n      }\n    }\n    mediaStream = null\n  }\n}\n\nasync function stop(): Promise<void> {\n  if (quagga) {\n    try {\n      if (detectedHandler) {\n        quagga.offDetected(detectedHandler)\n      }\n      await quagga.stop()\n    } catch {\n      /* ignore */\n    }\n  }\n  detectedHandler = null\n  quagga = null\n  releaseStream()\n  scanning.value = false\n  starting.value = false\n}\n\nasync function start(): Promise<void> {\n  if (scanning.value || starting.value) {\n    return\n  }\n  scanError.value = \"\"\n  starting.value = true\n\n  try {\n    const nav = typeof navigator !== \"undefined\" ? navigator : undefined\n    if (!nav?.mediaDevices?.getUserMedia) {\n      throw new Error(\"Camera access is not available in this environment.\")\n    }\n\n    mediaStream = await nav.mediaDevices.getUserMedia({\n      video: { facingMode: props.facingMode },\n      audio: false,\n    })\n\n    const mod = await import(\"@ericblade/quagga2\")\n    quagga = (mod as unknown as { default: QuaggaHandle }).default\n\n    const target = videoContainerRef.value\n    if (!target) {\n      throw new Error(\"Scanner viewport is not mounted.\")\n    }\n\n    await quagga.init({\n      inputStream: {\n        type: \"LiveStream\",\n        target,\n        constraints: {\n          facingMode: props.facingMode,\n        },\n      },\n      decoder: {\n        readers: [...props.scanFormats],\n      },\n      locate: true,\n    })\n\n    detectedHandler = (result: QuaggaResult): void => {\n      const code = result?.codeResult?.code\n      if (typeof code === \"string\" && code.length > 0) {\n        model.value = code\n        void stop()\n      }\n    }\n    quagga.onDetected(detectedHandler)\n\n    quagga.start()\n    scanning.value = true\n  } catch (e) {\n    scanError.value = e instanceof Error ? e.message : \"Failed to start scanner.\"\n    await stop()\n  } finally {\n    starting.value = false\n  }\n}\n\nasync function toggleScan(): Promise<void> {\n  if (scanning.value) {\n    await stop()\n  } else {\n    await start()\n  }\n}\n\n/**\n * Test hook — lets tests simulate a successful Quagga detection\n * without spinning up a real camera. Not part of the public contract;\n * exposed only via `wrapper.vm` in unit tests.\n */\nfunction __handleDetectedForTest(code: string): void {\n  if (code) {\n    model.value = code\n  }\n}\n\ndefineExpose({ __handleDetectedForTest, start, stop })\n\nif (props.autoStart) {\n  void start()\n}\n\nonBeforeUnmount(() => {\n  void stop()\n})\n</script>\n\n<template>\n  <FieldFrame\n    :label=\"label\"\n    :required=\"required\"\n    :hide-label=\"hideLabel\"\n    :for=\"id\"\n    :help-text=\"helpText\"\n    :errors=\"allErrors\"\n  >\n    <div class=\"flex flex-col gap-2\" :data-element-name=\"name ?? undefined\">\n      <div class=\"flex items-center gap-2\">\n        <Input\n          :id=\"id\"\n          :model-value=\"model ?? undefined\"\n          :name=\"name ?? undefined\"\n          type=\"text\"\n          readonly\n          :disabled=\"disabled\"\n          :required=\"required\"\n          placeholder=\"No code scanned yet\"\n          :data-element-name=\"name ?? undefined\"\n          :class=\"errors.length ? 'border-destructive ring-destructive' : ''\"\n        />\n        <Button\n          type=\"button\"\n          :variant=\"scanning ? 'destructive' : 'default'\"\n          :disabled=\"disabled || readonly || starting\"\n          data-testid=\"barcode-scan-toggle\"\n          @click=\"toggleScan\"\n        >\n          <Loader2 v-if=\"starting\" class=\"size-4 animate-spin\" />\n          <StopCircle v-else-if=\"scanning\" class=\"size-4\" />\n          <Camera v-else class=\"size-4\" />\n          <span>{{ buttonLabel }}</span>\n        </Button>\n      </div>\n      <div\n        v-show=\"scanning || starting\"\n        ref=\"videoContainerRef\"\n        data-testid=\"barcode-scan-viewport\"\n        class=\"relative h-64 w-full overflow-hidden rounded-md border border-input bg-muted\"\n      />\n    </div>\n  </FieldFrame>\n</template>\n"],"mappings":""}

package/dist/components/compositions/elements/input/BarcodeScannerInput.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,167 @@
+import e from "../../../ui/button/Button.js";
+import "../../../ui/button/index.js";
+import t from "../../../ui/input/Input.js";
+import "../../../ui/input/index.js";
+import n from "../../../ui/field-frame/FieldFrame.js";
+import "../../../ui/field-frame/index.js";
+import { computed as r, createBlock as i, createElementVNode as a, createVNode as o, defineComponent as s, mergeModels as c, normalizeClass as l, onBeforeUnmount as u, openBlock as d, ref as f, toDisplayString as p, unref as m, useModel as h, useTemplateRef as g, vShow as _, withCtx as v, withDirectives as y } from "vue";
+import { Camera as b, Loader2 as x, StopCircle as S } from "@lucide/vue";
+//#region src/components/compositions/elements/input/BarcodeScannerInput.vue?vue&type=script&setup=true&lang.ts
+var C = ["data-element-name"], w = { class: "flex items-center gap-2" }, T = /* @__PURE__ */ s({
+	__name: "BarcodeScannerInput",
+	props: /* @__PURE__ */ c({
+		modelValue: {},
+		id: {},
+		name: {},
+		label: {},
+		hideLabel: { type: Boolean },
+		required: { type: Boolean },
+		readonly: { type: Boolean },
+		disabled: { type: Boolean },
+		helpText: {},
+		errors: { default: () => [] },
+		scanFormats: { default: () => [
+			"code_128_reader",
+			"ean_reader",
+			"ean_8_reader",
+			"code_39_reader",
+			"upc_reader"
+		] },
+		autoStart: {
+			type: Boolean,
+			default: !1
+		},
+		facingMode: { default: "environment" }
+	}, {
+		modelValue: {},
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(s, { expose: c }) {
+		let T = s, E = h(s, "modelValue"), D = g("videoContainerRef"), O = f(!1), k = f(!1), A = f(""), j = null, M = null, N = null, P = r(() => k.value ? "Starting…" : O.value ? "Stop scanning" : "Scan"), F = r(() => A.value ? [...T.errors, A.value] : T.errors);
+		function I() {
+			if (M) {
+				for (let e of M.getTracks()) try {
+					e.stop();
+				} catch {}
+				M = null;
+			}
+		}
+		async function L() {
+			if (j) try {
+				N && j.offDetected(N), await j.stop();
+			} catch {}
+			N = null, j = null, I(), O.value = !1, k.value = !1;
+		}
+		async function R() {
+			if (!(O.value || k.value)) {
+				A.value = "", k.value = !0;
+				try {
+					let e = typeof navigator < "u" ? navigator : void 0;
+					if (!e?.mediaDevices?.getUserMedia) throw Error("Camera access is not available in this environment.");
+					M = await e.mediaDevices.getUserMedia({
+						video: { facingMode: T.facingMode },
+						audio: !1
+					}), j = (await import("@ericblade/quagga2")).default;
+					let t = D.value;
+					if (!t) throw Error("Scanner viewport is not mounted.");
+					await j.init({
+						inputStream: {
+							type: "LiveStream",
+							target: t,
+							constraints: { facingMode: T.facingMode }
+						},
+						decoder: { readers: [...T.scanFormats] },
+						locate: !0
+					}), N = (e) => {
+						let t = e?.codeResult?.code;
+						typeof t == "string" && t.length > 0 && (E.value = t, L());
+					}, j.onDetected(N), j.start(), O.value = !0;
+				} catch (e) {
+					A.value = e instanceof Error ? e.message : "Failed to start scanner.", await L();
+				} finally {
+					k.value = !1;
+				}
+			}
+		}
+		async function z() {
+			O.value ? await L() : await R();
+		}
+		function B(e) {
+			e && (E.value = e);
+		}
+		return c({
+			__handleDetectedForTest: B,
+			start: R,
+			stop: L
+		}), T.autoStart && R(), u(() => {
+			L();
+		}), (r, c) => (d(), i(m(n), {
+			label: s.label,
+			required: s.required,
+			"hide-label": s.hideLabel,
+			for: s.id,
+			"help-text": s.helpText,
+			errors: F.value
+		}, {
+			default: v(() => [a("div", {
+				class: "flex flex-col gap-2",
+				"data-element-name": s.name ?? void 0
+			}, [a("div", w, [o(m(t), {
+				id: s.id,
+				"model-value": E.value ?? void 0,
+				name: s.name ?? void 0,
+				type: "text",
+				readonly: "",
+				disabled: s.disabled,
+				required: s.required,
+				placeholder: "No code scanned yet",
+				"data-element-name": s.name ?? void 0,
+				class: l(s.errors.length ? "border-destructive ring-destructive" : "")
+			}, null, 8, [
+				"id",
+				"model-value",
+				"name",
+				"disabled",
+				"required",
+				"data-element-name",
+				"class"
+			]), o(m(e), {
+				type: "button",
+				variant: O.value ? "destructive" : "default",
+				disabled: s.disabled || s.readonly || k.value,
+				"data-testid": "barcode-scan-toggle",
+				onClick: z
+			}, {
+				default: v(() => [k.value ? (d(), i(m(x), {
+					key: 0,
+					class: "size-4 animate-spin"
+				})) : O.value ? (d(), i(m(S), {
+					key: 1,
+					class: "size-4"
+				})) : (d(), i(m(b), {
+					key: 2,
+					class: "size-4"
+				})), a("span", null, p(P.value), 1)]),
+				_: 1
+			}, 8, ["variant", "disabled"])]), y(a("div", {
+				ref_key: "videoContainerRef",
+				ref: D,
+				"data-testid": "barcode-scan-viewport",
+				class: "relative h-64 w-full overflow-hidden rounded-md border border-input bg-muted"
+			}, null, 512), [[_, O.value || k.value]])], 8, C)]),
+			_: 1
+		}, 8, [
+			"label",
+			"required",
+			"hide-label",
+			"for",
+			"help-text",
+			"errors"
+		]));
+	}
+});
+//#endregion
+export { T as default };
+
+//# sourceMappingURL=BarcodeScannerInput.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/compositions/elements/input/BarcodeScannerInput.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BarcodeScannerInput.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../src/components/compositions/elements/input/BarcodeScannerInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven barcode scanner input.\n *\n * Wraps `@ericblade/quagga2` to provide a live camera-driven barcode\n * scanner. Renders the last decoded value in a read-only Input plus a\n * \"Scan\" button that toggles a `<video>` viewport.\n *\n * The quagga library and the `getUserMedia` API are lazy-imported when\n * scanning starts so the component is safe to render in environments\n * without a camera (e.g. jsdom).\n *\n *   <BarcodeScannerInput v-model=\"ticket\" label=\"Scan ticket\" />\n */\nimport { computed, onBeforeUnmount, ref, useTemplateRef } from \"vue\"\nimport { Camera, Loader2, StopCircle } from \"@lucide/vue\"\nimport { Input } from \"@/components/ui/input\"\nimport { Button } from \"@/components/ui/button\"\nimport { FieldFrame } from \"@/components/ui/field-frame\"\n\nexport interface BarcodeScannerInputProps {\n  modelValue?: string | null\n  id?: string\n  name?: string\n  label?: string\n  hideLabel?: boolean\n  required?: boolean\n  readonly?: boolean\n  disabled?: boolean\n  helpText?: string\n  errors?: string[]\n  /** Quagga barcode reader symbologies to recognise. */\n  scanFormats?: ReadonlyArray<string>\n  /** Start scanning automatically when the component mounts. */\n  autoStart?: boolean\n  /** Preferred camera facing mode. */\n  facingMode?: \"environment\" | \"user\"\n}\n\nconst props = withDefaults(defineProps<BarcodeScannerInputProps>(), {\n  errors: () => [],\n  scanFormats: () => [\n    \"code_128_reader\",\n    \"ean_reader\",\n    \"ean_8_reader\",\n    \"code_39_reader\",\n    \"upc_reader\",\n  ],\n  autoStart: false,\n  facingMode: \"environment\",\n})\n\nconst model = defineModel<string | null>(\"modelValue\")\n\n/** Loose Quagga handle — type-definitions ship with the library but we\n *  keep the references local rather than pulling its full type graph. */\ntype QuaggaResult = { codeResult?: { code?: string | null } }\ntype QuaggaHandle = {\n  init: (config: Record<string, unknown>) => Promise<void>\n  start: () => void\n  stop: () => Promise<void> | void\n  onDetected: (cb: (result: QuaggaResult) => void) => void\n  offDetected: (cb: (result: QuaggaResult) => void) => void\n}\n\nconst videoContainerRef = useTemplateRef<HTMLDivElement>(\"videoContainerRef\")\nconst scanning = ref<boolean>(false)\nconst starting = ref<boolean>(false)\nconst scanError = ref<string>(\"\")\n\nlet quagga: QuaggaHandle | null = null\nlet mediaStream: MediaStream | null = null\nlet detectedHandler: ((result: QuaggaResult) => void) | null = null\n\nconst buttonLabel = computed<string>(() => {\n  if (starting.value) {\n    return \"Starting…\"\n  }\n  return scanning.value ? \"Stop scanning\" : \"Scan\"\n})\n\nconst allErrors = computed<string[]>(() => {\n  if (scanError.value) {\n    return [...props.errors, scanError.value]\n  }\n  return props.errors\n})\n\nfunction releaseStream(): void {\n  if (mediaStream) {\n    for (const track of mediaStream.getTracks()) {\n      try {\n        track.stop()\n      } catch {\n        /* ignore */\n      }\n    }\n    mediaStream = null\n  }\n}\n\nasync function stop(): Promise<void> {\n  if (quagga) {\n    try {\n      if (detectedHandler) {\n        quagga.offDetected(detectedHandler)\n      }\n      await quagga.stop()\n    } catch {\n      /* ignore */\n    }\n  }\n  detectedHandler = null\n  quagga = null\n  releaseStream()\n  scanning.value = false\n  starting.value = false\n}\n\nasync function start(): Promise<void> {\n  if (scanning.value || starting.value) {\n    return\n  }\n  scanError.value = \"\"\n  starting.value = true\n\n  try {\n    const nav = typeof navigator !== \"undefined\" ? navigator : undefined\n    if (!nav?.mediaDevices?.getUserMedia) {\n      throw new Error(\"Camera access is not available in this environment.\")\n    }\n\n    mediaStream = await nav.mediaDevices.getUserMedia({\n      video: { facingMode: props.facingMode },\n      audio: false,\n    })\n\n    const mod = await import(\"@ericblade/quagga2\")\n    quagga = (mod as unknown as { default: QuaggaHandle }).default\n\n    const target = videoContainerRef.value\n    if (!target) {\n      throw new Error(\"Scanner viewport is not mounted.\")\n    }\n\n    await quagga.init({\n      inputStream: {\n        type: \"LiveStream\",\n        target,\n        constraints: {\n          facingMode: props.facingMode,\n        },\n      },\n      decoder: {\n        readers: [...props.scanFormats],\n      },\n      locate: true,\n    })\n\n    detectedHandler = (result: QuaggaResult): void => {\n      const code = result?.codeResult?.code\n      if (typeof code === \"string\" && code.length > 0) {\n        model.value = code\n        void stop()\n      }\n    }\n    quagga.onDetected(detectedHandler)\n\n    quagga.start()\n    scanning.value = true\n  } catch (e) {\n    scanError.value = e instanceof Error ? e.message : \"Failed to start scanner.\"\n    await stop()\n  } finally {\n    starting.value = false\n  }\n}\n\nasync function toggleScan(): Promise<void> {\n  if (scanning.value) {\n    await stop()\n  } else {\n    await start()\n  }\n}\n\n/**\n * Test hook — lets tests simulate a successful Quagga detection\n * without spinning up a real camera. Not part of the public contract;\n * exposed only via `wrapper.vm` in unit tests.\n */\nfunction __handleDetectedForTest(code: string): void {\n  if (code) {\n    model.value = code\n  }\n}\n\ndefineExpose({ __handleDetectedForTest, start, stop })\n\nif (props.autoStart) {\n  void start()\n}\n\nonBeforeUnmount(() => {\n  void stop()\n})\n</script>\n\n<template>\n  <FieldFrame\n    :label=\"label\"\n    :required=\"required\"\n    :hide-label=\"hideLabel\"\n    :for=\"id\"\n    :help-text=\"helpText\"\n    :errors=\"allErrors\"\n  >\n    <div class=\"flex flex-col gap-2\" :data-element-name=\"name ?? undefined\">\n      <div class=\"flex items-center gap-2\">\n        <Input\n          :id=\"id\"\n          :model-value=\"model ?? undefined\"\n          :name=\"name ?? undefined\"\n          type=\"text\"\n          readonly\n          :disabled=\"disabled\"\n          :required=\"required\"\n          placeholder=\"No code scanned yet\"\n          :data-element-name=\"name ?? undefined\"\n          :class=\"errors.length ? 'border-destructive ring-destructive' : ''\"\n        />\n        <Button\n          type=\"button\"\n          :variant=\"scanning ? 'destructive' : 'default'\"\n          :disabled=\"disabled || readonly || starting\"\n          data-testid=\"barcode-scan-toggle\"\n          @click=\"toggleScan\"\n        >\n          <Loader2 v-if=\"starting\" class=\"size-4 animate-spin\" />\n          <StopCircle v-else-if=\"scanning\" class=\"size-4\" />\n          <Camera v-else class=\"size-4\" />\n          <span>{{ buttonLabel }}</span>\n        </Button>\n      </div>\n      <div\n        v-show=\"scanning || starting\"\n        ref=\"videoContainerRef\"\n        data-testid=\"barcode-scan-viewport\"\n        class=\"relative h-64 w-full overflow-hidden rounded-md border border-input bg-muted\"\n      />\n    </div>\n  </FieldFrame>\n</template>\n"],"mappings":"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"}

package/dist/components/compositions/elements/input/EmailInput.js

@@ -0,0 +1,7 @@
+import e from "./EmailInput.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/compositions/elements/input/EmailInput.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=EmailInput.js.map

package/dist/components/compositions/elements/input/EmailInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmailInput.js","names":[],"sources":["../../../../../src/components/compositions/elements/input/EmailInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven email input composition. Composes the shadcn `Input`\n * primitive (with `type=\"email\"`) and `FieldFrame` chrome.\n *\n * Self-contained — usable directly in any Vue app:\n *\n *   <EmailInput v-model=\"email\" label=\"Email address\" required />\n */\nimport { onMounted, useTemplateRef } from \"vue\"\nimport { Input } from \"@/components/ui/input\"\nimport { FieldFrame } from \"@/components/ui/field-frame\"\n\nexport interface EmailInputProps {\n  modelValue?: string\n  id?: string\n  name?: string\n  label?: string\n  hideLabel?: boolean\n  placeholder?: string\n  required?: boolean\n  readonly?: boolean\n  disabled?: boolean\n  maxlength?: number\n  minlength?: number\n  helpText?: string\n  errors?: string[]\n  autoFocus?: boolean\n}\n\nconst props = withDefaults(defineProps<EmailInputProps>(), {\n  errors: () => [],\n})\n\nconst model = defineModel<string>(\"modelValue\")\n\nconst inputRef = useTemplateRef<HTMLInputElement>(\"inputRef\")\n\nonMounted(() => {\n  if (props.autoFocus) {\n    inputRef.value?.focus()\n  }\n})\n</script>\n\n<template>\n  <FieldFrame\n    :label=\"label\"\n    :required=\"required\"\n    :hide-label=\"hideLabel\"\n    :for=\"id\"\n    :help-text=\"helpText\"\n    :errors=\"errors\"\n  >\n    <Input\n      ref=\"inputRef\"\n      :model-value=\"model ?? undefined\"\n      :id=\"id\"\n      :name=\"name ?? undefined\"\n      type=\"email\"\n      :placeholder=\"placeholder ?? ''\"\n      :readonly=\"readonly\"\n      :disabled=\"disabled\"\n      :required=\"required\"\n      :maxlength=\"maxlength\"\n      :minlength=\"minlength\"\n      :data-element-name=\"name ?? undefined\"\n      :class=\"errors.length ? 'border-destructive ring-destructive' : ''\"\n      @update:model-value=\"(v: string | number | undefined) => (model = v == null ? '' : String(v))\"\n    />\n  </FieldFrame>\n</template>\n"],"mappings":""}

package/dist/components/compositions/elements/input/EmailInput.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,84 @@
+import e from "../../../ui/input/Input.js";
+import "../../../ui/input/index.js";
+import t from "../../../ui/field-frame/FieldFrame.js";
+import "../../../ui/field-frame/index.js";
+import { createBlock as n, createVNode as r, defineComponent as i, mergeModels as a, normalizeClass as o, onMounted as s, openBlock as c, unref as l, useModel as u, useTemplateRef as d, withCtx as f } from "vue";
+//#region src/components/compositions/elements/input/EmailInput.vue?vue&type=script&setup=true&lang.ts
+var p = /* @__PURE__ */ i({
+	__name: "EmailInput",
+	props: /* @__PURE__ */ a({
+		modelValue: {},
+		id: {},
+		name: {},
+		label: {},
+		hideLabel: { type: Boolean },
+		placeholder: {},
+		required: { type: Boolean },
+		readonly: { type: Boolean },
+		disabled: { type: Boolean },
+		maxlength: {},
+		minlength: {},
+		helpText: {},
+		errors: { default: () => [] },
+		autoFocus: { type: Boolean }
+	}, {
+		modelValue: {},
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(i) {
+		let a = i, p = u(i, "modelValue"), m = d("inputRef");
+		return s(() => {
+			a.autoFocus && m.value?.focus();
+		}), (a, s) => (c(), n(l(t), {
+			label: i.label,
+			required: i.required,
+			"hide-label": i.hideLabel,
+			for: i.id,
+			"help-text": i.helpText,
+			errors: i.errors
+		}, {
+			default: f(() => [r(l(e), {
+				ref_key: "inputRef",
+				ref: m,
+				"model-value": p.value ?? void 0,
+				id: i.id,
+				name: i.name ?? void 0,
+				type: "email",
+				placeholder: i.placeholder ?? "",
+				readonly: i.readonly,
+				disabled: i.disabled,
+				required: i.required,
+				maxlength: i.maxlength,
+				minlength: i.minlength,
+				"data-element-name": i.name ?? void 0,
+				class: o(i.errors.length ? "border-destructive ring-destructive" : ""),
+				"onUpdate:modelValue": s[0] ||= (e) => p.value = e == null ? "" : String(e)
+			}, null, 8, [
+				"model-value",
+				"id",
+				"name",
+				"placeholder",
+				"readonly",
+				"disabled",
+				"required",
+				"maxlength",
+				"minlength",
+				"data-element-name",
+				"class"
+			])]),
+			_: 1
+		}, 8, [
+			"label",
+			"required",
+			"hide-label",
+			"for",
+			"help-text",
+			"errors"
+		]));
+	}
+});
+//#endregion
+export { p as default };
+
+//# sourceMappingURL=EmailInput.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/compositions/elements/input/EmailInput.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmailInput.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../src/components/compositions/elements/input/EmailInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven email input composition. Composes the shadcn `Input`\n * primitive (with `type=\"email\"`) and `FieldFrame` chrome.\n *\n * Self-contained — usable directly in any Vue app:\n *\n *   <EmailInput v-model=\"email\" label=\"Email address\" required />\n */\nimport { onMounted, useTemplateRef } from \"vue\"\nimport { Input } from \"@/components/ui/input\"\nimport { FieldFrame } from \"@/components/ui/field-frame\"\n\nexport interface EmailInputProps {\n  modelValue?: string\n  id?: string\n  name?: string\n  label?: string\n  hideLabel?: boolean\n  placeholder?: string\n  required?: boolean\n  readonly?: boolean\n  disabled?: boolean\n  maxlength?: number\n  minlength?: number\n  helpText?: string\n  errors?: string[]\n  autoFocus?: boolean\n}\n\nconst props = withDefaults(defineProps<EmailInputProps>(), {\n  errors: () => [],\n})\n\nconst model = defineModel<string>(\"modelValue\")\n\nconst inputRef = useTemplateRef<HTMLInputElement>(\"inputRef\")\n\nonMounted(() => {\n  if (props.autoFocus) {\n    inputRef.value?.focus()\n  }\n})\n</script>\n\n<template>\n  <FieldFrame\n    :label=\"label\"\n    :required=\"required\"\n    :hide-label=\"hideLabel\"\n    :for=\"id\"\n    :help-text=\"helpText\"\n    :errors=\"errors\"\n  >\n    <Input\n      ref=\"inputRef\"\n      :model-value=\"model ?? undefined\"\n      :id=\"id\"\n      :name=\"name ?? undefined\"\n      type=\"email\"\n      :placeholder=\"placeholder ?? ''\"\n      :readonly=\"readonly\"\n      :disabled=\"disabled\"\n      :required=\"required\"\n      :maxlength=\"maxlength\"\n      :minlength=\"minlength\"\n      :data-element-name=\"name ?? undefined\"\n      :class=\"errors.length ? 'border-destructive ring-destructive' : ''\"\n      @update:model-value=\"(v: string | number | undefined) => (model = v == null ? '' : String(v))\"\n    />\n  </FieldFrame>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8BA,IAAM,IAAQ,GAIR,IAAQ,EAAmB,GAAC,YAAY,GAExC,IAAW,EAAiC,UAAU;SAE5D,QAAgB;GACd,AAAI,EAAM,aACR,EAAS,OAAO,MAAM;EAE1B,CAAC,mBAIC,EAwBa,EAAA,CAAA,GAAA;GAvBV,OAAO,EAAA;GACP,UAAU,EAAA;GACV,cAAY,EAAA;GACZ,KAAK,EAAA;GACL,aAAW,EAAA;GACX,QAAQ,EAAA;;oBAiBP,CAfF,EAeE,EAAA,CAAA,GAAA;aAdI;IAAJ,KAAI;IACH,eAAa,EAAA,SAAS,KAAA;IACtB,IAAI,EAAA;IACJ,MAAM,EAAA,QAAQ,KAAA;IACf,MAAK;IACJ,aAAa,EAAA,eAAW;IACxB,UAAU,EAAA;IACV,UAAU,EAAA;IACV,UAAU,EAAA;IACV,WAAW,EAAA;IACX,WAAW,EAAA;IACX,qBAAmB,EAAA,QAAQ,KAAA;IAC3B,OAAK,EAAE,EAAA,OAAO,SAAM,wCAAA,EAAA;IACpB,uBAAkB,AAAA,EAAA,QAAG,MAAoC,EAAA,QAAQ,KAAC,OAAA,KAAgB,OAAO,CAAC"}

package/dist/components/compositions/elements/input/NumberInput.js

@@ -0,0 +1,7 @@
+import e from "./NumberInput.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/compositions/elements/input/NumberInput.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=NumberInput.js.map

package/dist/components/compositions/elements/input/NumberInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumberInput.js","names":[],"sources":["../../../../../src/components/compositions/elements/input/NumberInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven number input composition. Composes the shadcn `Input`\n * primitive (with `type=\"number\"`) and `FieldFrame` chrome.\n *\n * Self-contained — usable directly in any Vue app:\n *\n *   <NumberInput v-model=\"age\" label=\"Age\" :min=\"0\" :max=\"120\" />\n *\n * The JSON-driven engine renders this via `ElementRenderer`, which\n * binds `modelValue` / `errors` to the form-data store automatically.\n */\nimport { onMounted, useTemplateRef } from \"vue\"\nimport { Input } from \"@/components/ui/input\"\nimport { FieldFrame } from \"@/components/ui/field-frame\"\n\nexport interface NumberInputProps {\n  modelValue?: number | null\n  id?: string\n  name?: string\n  label?: string\n  hideLabel?: boolean\n  placeholder?: string\n  required?: boolean\n  readonly?: boolean\n  disabled?: boolean\n  min?: number\n  max?: number\n  step?: number\n  helpText?: string\n  errors?: string[]\n  autoFocus?: boolean\n}\n\nconst props = withDefaults(defineProps<NumberInputProps>(), {\n  errors: () => [],\n})\n\nconst model = defineModel<number | null>(\"modelValue\")\n\nconst inputRef = useTemplateRef<HTMLInputElement>(\"inputRef\")\n\nonMounted(() => {\n  if (props.autoFocus) {\n    inputRef.value?.focus()\n  }\n})\n\nfunction onUpdate(raw: string | number | undefined): void {\n  if (raw === undefined || raw === \"\" || raw === null) {\n    model.value = null\n    return\n  }\n  const num = typeof raw === \"number\" ? raw : Number(raw)\n  model.value = Number.isFinite(num) ? num : null\n}\n</script>\n\n<template>\n  <FieldFrame\n    :label=\"label\"\n    :required=\"required\"\n    :hide-label=\"hideLabel\"\n    :for=\"id\"\n    :help-text=\"helpText\"\n    :errors=\"errors\"\n  >\n    <Input\n      ref=\"inputRef\"\n      :model-value=\"model ?? undefined\"\n      :id=\"id\"\n      :name=\"name ?? undefined\"\n      type=\"number\"\n      :placeholder=\"placeholder ?? ''\"\n      :readonly=\"readonly\"\n      :disabled=\"disabled\"\n      :required=\"required\"\n      :min=\"min\"\n      :max=\"max\"\n      :step=\"step\"\n      :data-element-name=\"name ?? undefined\"\n      :class=\"errors.length ? 'border-destructive ring-destructive' : ''\"\n      @update:model-value=\"onUpdate\"\n    />\n  </FieldFrame>\n</template>\n"],"mappings":""}

package/dist/components/compositions/elements/input/NumberInput.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,96 @@
+import e from "../../../ui/input/Input.js";
+import "../../../ui/input/index.js";
+import t from "../../../ui/field-frame/FieldFrame.js";
+import "../../../ui/field-frame/index.js";
+import { createBlock as n, createVNode as r, defineComponent as i, mergeModels as a, normalizeClass as o, onMounted as s, openBlock as c, unref as l, useModel as u, useTemplateRef as d, withCtx as f } from "vue";
+//#region src/components/compositions/elements/input/NumberInput.vue?vue&type=script&setup=true&lang.ts
+var p = /* @__PURE__ */ i({
+	__name: "NumberInput",
+	props: /* @__PURE__ */ a({
+		modelValue: {},
+		id: {},
+		name: {},
+		label: {},
+		hideLabel: { type: Boolean },
+		placeholder: {},
+		required: { type: Boolean },
+		readonly: { type: Boolean },
+		disabled: { type: Boolean },
+		min: {},
+		max: {},
+		step: {},
+		helpText: {},
+		errors: { default: () => [] },
+		autoFocus: { type: Boolean }
+	}, {
+		modelValue: {},
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(i) {
+		let a = i, p = u(i, "modelValue"), m = d("inputRef");
+		s(() => {
+			a.autoFocus && m.value?.focus();
+		});
+		function h(e) {
+			if (e === void 0 || e === "" || e === null) {
+				p.value = null;
+				return;
+			}
+			let t = typeof e == "number" ? e : Number(e);
+			p.value = Number.isFinite(t) ? t : null;
+		}
+		return (a, s) => (c(), n(l(t), {
+			label: i.label,
+			required: i.required,
+			"hide-label": i.hideLabel,
+			for: i.id,
+			"help-text": i.helpText,
+			errors: i.errors
+		}, {
+			default: f(() => [r(l(e), {
+				ref_key: "inputRef",
+				ref: m,
+				"model-value": p.value ?? void 0,
+				id: i.id,
+				name: i.name ?? void 0,
+				type: "number",
+				placeholder: i.placeholder ?? "",
+				readonly: i.readonly,
+				disabled: i.disabled,
+				required: i.required,
+				min: i.min,
+				max: i.max,
+				step: i.step,
+				"data-element-name": i.name ?? void 0,
+				class: o(i.errors.length ? "border-destructive ring-destructive" : ""),
+				"onUpdate:modelValue": h
+			}, null, 8, [
+				"model-value",
+				"id",
+				"name",
+				"placeholder",
+				"readonly",
+				"disabled",
+				"required",
+				"min",
+				"max",
+				"step",
+				"data-element-name",
+				"class"
+			])]),
+			_: 1
+		}, 8, [
+			"label",
+			"required",
+			"hide-label",
+			"for",
+			"help-text",
+			"errors"
+		]));
+	}
+});
+//#endregion
+export { p as default };
+
+//# sourceMappingURL=NumberInput.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/compositions/elements/input/NumberInput.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumberInput.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../src/components/compositions/elements/input/NumberInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven number input composition. Composes the shadcn `Input`\n * primitive (with `type=\"number\"`) and `FieldFrame` chrome.\n *\n * Self-contained — usable directly in any Vue app:\n *\n *   <NumberInput v-model=\"age\" label=\"Age\" :min=\"0\" :max=\"120\" />\n *\n * The JSON-driven engine renders this via `ElementRenderer`, which\n * binds `modelValue` / `errors` to the form-data store automatically.\n */\nimport { onMounted, useTemplateRef } from \"vue\"\nimport { Input } from \"@/components/ui/input\"\nimport { FieldFrame } from \"@/components/ui/field-frame\"\n\nexport interface NumberInputProps {\n  modelValue?: number | null\n  id?: string\n  name?: string\n  label?: string\n  hideLabel?: boolean\n  placeholder?: string\n  required?: boolean\n  readonly?: boolean\n  disabled?: boolean\n  min?: number\n  max?: number\n  step?: number\n  helpText?: string\n  errors?: string[]\n  autoFocus?: boolean\n}\n\nconst props = withDefaults(defineProps<NumberInputProps>(), {\n  errors: () => [],\n})\n\nconst model = defineModel<number | null>(\"modelValue\")\n\nconst inputRef = useTemplateRef<HTMLInputElement>(\"inputRef\")\n\nonMounted(() => {\n  if (props.autoFocus) {\n    inputRef.value?.focus()\n  }\n})\n\nfunction onUpdate(raw: string | number | undefined): void {\n  if (raw === undefined || raw === \"\" || raw === null) {\n    model.value = null\n    return\n  }\n  const num = typeof raw === \"number\" ? raw : Number(raw)\n  model.value = Number.isFinite(num) ? num : null\n}\n</script>\n\n<template>\n  <FieldFrame\n    :label=\"label\"\n    :required=\"required\"\n    :hide-label=\"hideLabel\"\n    :for=\"id\"\n    :help-text=\"helpText\"\n    :errors=\"errors\"\n  >\n    <Input\n      ref=\"inputRef\"\n      :model-value=\"model ?? undefined\"\n      :id=\"id\"\n      :name=\"name ?? undefined\"\n      type=\"number\"\n      :placeholder=\"placeholder ?? ''\"\n      :readonly=\"readonly\"\n      :disabled=\"disabled\"\n      :required=\"required\"\n      :min=\"min\"\n      :max=\"max\"\n      :step=\"step\"\n      :data-element-name=\"name ?? undefined\"\n      :class=\"errors.length ? 'border-destructive ring-destructive' : ''\"\n      @update:model-value=\"onUpdate\"\n    />\n  </FieldFrame>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkCA,IAAM,IAAQ,GAIR,IAAQ,EAA0B,GAAC,YAAY,GAE/C,IAAW,EAAiC,UAAU;EAE5D,QAAgB;GACd,AAAI,EAAM,aACR,EAAS,OAAO,MAAM;EAE1B,CAAC;EAED,SAAS,EAAS,GAAwC;GACxD,IAAI,MAAQ,KAAA,KAAa,MAAQ,MAAM,MAAQ,MAAM;IACnD,EAAM,QAAQ;IACd;GACF;GACA,IAAM,IAAM,OAAO,KAAQ,WAAW,IAAM,OAAO,CAAG;GACtD,EAAM,QAAQ,OAAO,SAAS,CAAG,IAAI,IAAM;EAC7C;yBAIE,EAyBa,EAAA,CAAA,GAAA;GAxBV,OAAO,EAAA;GACP,UAAU,EAAA;GACV,cAAY,EAAA;GACZ,KAAK,EAAA;GACL,aAAW,EAAA;GACX,QAAQ,EAAA;;oBAkBP,CAhBF,EAgBE,EAAA,CAAA,GAAA;aAfI;IAAJ,KAAI;IACH,eAAa,EAAA,SAAS,KAAA;IACtB,IAAI,EAAA;IACJ,MAAM,EAAA,QAAQ,KAAA;IACf,MAAK;IACJ,aAAa,EAAA,eAAW;IACxB,UAAU,EAAA;IACV,UAAU,EAAA;IACV,UAAU,EAAA;IACV,KAAK,EAAA;IACL,KAAK,EAAA;IACL,MAAM,EAAA;IACN,qBAAmB,EAAA,QAAQ,KAAA;IAC3B,OAAK,EAAE,EAAA,OAAO,SAAM,wCAAA,EAAA;IACpB,uBAAoB"}

package/dist/components/compositions/elements/input/PasswordInput.js

@@ -0,0 +1,7 @@
+import e from "./PasswordInput.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/compositions/elements/input/PasswordInput.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=PasswordInput.js.map

package/dist/components/compositions/elements/input/PasswordInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PasswordInput.js","names":[],"sources":["../../../../../src/components/compositions/elements/input/PasswordInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven password input composition. Composes the shadcn `Input`\n * primitive (with `type=\"password\"`) and `FieldFrame` chrome. When\n * `togglePasswordVisibility` is set, renders an Eye/EyeOff toggle\n * button.\n *\n * Self-contained — usable directly in any Vue app:\n *\n *   <PasswordInput v-model=\"pw\" label=\"Password\" required toggle-password-visibility />\n */\nimport { computed, onMounted, ref, useTemplateRef } from \"vue\"\nimport { Eye, EyeOff } from \"@lucide/vue\"\nimport { Input } from \"@/components/ui/input\"\nimport { Button } from \"@/components/ui/button\"\nimport { FieldFrame } from \"@/components/ui/field-frame\"\n\nexport interface PasswordInputProps {\n  modelValue?: string\n  id?: string\n  name?: string\n  label?: string\n  hideLabel?: boolean\n  placeholder?: string\n  required?: boolean\n  readonly?: boolean\n  disabled?: boolean\n  maxlength?: number\n  minlength?: number\n  helpText?: string\n  errors?: string[]\n  autoFocus?: boolean\n  togglePasswordVisibility?: boolean\n}\n\nconst props = withDefaults(defineProps<PasswordInputProps>(), {\n  errors: () => [],\n})\n\nconst model = defineModel<string>(\"modelValue\")\n\nconst inputRef = useTemplateRef<HTMLInputElement>(\"inputRef\")\n\nconst visible = ref(false)\nconst inputType = computed<\"password\" | \"text\">(() =>\n  visible.value ? \"text\" : \"password\",\n)\n\nonMounted(() => {\n  if (props.autoFocus) {\n    inputRef.value?.focus()\n  }\n})\n\nfunction toggleVisibility(): void {\n  visible.value = !visible.value\n}\n</script>\n\n<template>\n  <FieldFrame\n    :label=\"label\"\n    :required=\"required\"\n    :hide-label=\"hideLabel\"\n    :for=\"id\"\n    :help-text=\"helpText\"\n    :errors=\"errors\"\n  >\n    <div class=\"relative\">\n      <Input\n        ref=\"inputRef\"\n        :model-value=\"model ?? undefined\"\n        :id=\"id\"\n        :name=\"name ?? undefined\"\n        :type=\"inputType\"\n        :placeholder=\"placeholder ?? ''\"\n        :readonly=\"readonly\"\n        :disabled=\"disabled\"\n        :required=\"required\"\n        :maxlength=\"maxlength\"\n        :minlength=\"minlength\"\n        :data-element-name=\"name ?? undefined\"\n        :class=\"[\n          errors.length ? 'border-destructive ring-destructive' : '',\n          togglePasswordVisibility ? 'pr-10' : '',\n        ]\"\n        @update:model-value=\"(v: string | number | undefined) => (model = v == null ? '' : String(v))\"\n      />\n      <Button\n        v-if=\"togglePasswordVisibility\"\n        type=\"button\"\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"absolute right-1 top-1/2 -translate-y-1/2\"\n        :aria-label=\"visible ? 'Hide password' : 'Show password'\"\n        data-testid=\"password-toggle\"\n        @click=\"toggleVisibility\"\n      >\n        <EyeOff v-if=\"visible\" class=\"h-4 w-4\" />\n        <Eye v-else class=\"h-4 w-4\" />\n      </Button>\n    </div>\n  </FieldFrame>\n</template>\n"],"mappings":""}