@gxp-dev/mod-ui 2.0.12 → 2.0.14

package/dist/chunks/TimezonePicker-5XokaK-n.js

@@ -0,0 +1,113 @@
+import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
+import { c as t, i as n, l as r, n as i, o as a, r as o, s } from "./combobox-BrYBRIqW.js";
+import { t as c } from "./field-frame-n5oLDNBT.js";
+import { Fragment as l, computed as u, createBlock as d, createElementBlock as f, createTextVNode as p, createVNode as m, defineComponent as h, mergeModels as g, openBlock as _, ref as v, renderList as y, toDisplayString as b, unref as x, useModel as S, withCtx as C } from "vue";
+import { Globe as w } from "@lucide/vue";
+//#region src/components/compositions/elements/picker/TimezonePicker.vue?vue&type=script&setup=true&lang.ts
+var T = /* @__PURE__ */ h({
+	__name: "TimezonePicker",
+	props: /* @__PURE__ */ g({
+		modelValue: {},
+		id: {},
+		name: {},
+		label: {},
+		hideLabel: { type: Boolean },
+		placeholder: {},
+		required: { type: Boolean },
+		readonly: { type: Boolean },
+		disabled: { type: Boolean },
+		helpText: {},
+		errors: { default: () => [] }
+	}, {
+		modelValue: {},
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(e) {
+		let h = S(e, "modelValue"), g = v(""), T = u(() => {
+			let e = Intl;
+			if (typeof e.supportedValuesOf == "function") try {
+				return e.supportedValuesOf("timeZone");
+			} catch {
+				return [];
+			}
+			return [
+				"UTC",
+				"America/New_York",
+				"America/Chicago",
+				"America/Denver",
+				"America/Los_Angeles",
+				"Europe/London",
+				"Europe/Paris",
+				"Europe/Berlin",
+				"Asia/Tokyo",
+				"Asia/Shanghai",
+				"Australia/Sydney"
+			];
+		}), E = u(() => {
+			let e = g.value.trim().toLowerCase();
+			return e ? T.value.filter((t) => t.toLowerCase().includes(e)).slice(0, 200) : T.value.slice(0, 200);
+		});
+		function D(e) {
+			h.value = typeof e == "string" ? e : "";
+		}
+		return (u, v) => (_(), d(x(c), {
+			label: e.label,
+			required: e.required,
+			"hide-label": e.hideLabel,
+			for: e.id,
+			"help-text": e.helpText,
+			errors: e.errors
+		}, {
+			default: C(() => [m(x(r), {
+				"model-value": h.value ?? "",
+				disabled: e.disabled,
+				"onUpdate:modelValue": D
+			}, {
+				default: C(() => [m(x(t), {
+					"data-element-name": e.name ?? void 0,
+					"data-readonly": e.readonly || void 0
+				}, {
+					default: C(() => [m(x(w), { class: "mr-2 size-4 shrink-0 opacity-50" }), m(x(n), {
+						modelValue: g.value,
+						"onUpdate:modelValue": v[0] ||= (e) => g.value = e,
+						placeholder: e.placeholder ?? "Select a timezone…",
+						readonly: e.readonly,
+						required: e.required
+					}, null, 8, [
+						"modelValue",
+						"placeholder",
+						"readonly",
+						"required"
+					])]),
+					_: 1
+				}, 8, ["data-element-name", "data-readonly"]), m(x(s), null, {
+					default: C(() => [m(x(a), null, {
+						default: C(() => [...v[1] ||= [p("No timezones match.", -1)]]),
+						_: 1
+					}), (_(!0), f(l, null, y(E.value, (e) => (_(), d(x(o), {
+						key: e,
+						value: e
+					}, {
+						default: C(() => [m(x(i)), p(" " + b(e), 1)]),
+						_: 2
+					}, 1032, ["value"]))), 128))]),
+					_: 1
+				})]),
+				_: 1
+			}, 8, ["model-value", "disabled"])]),
+			_: 1
+		}, 8, [
+			"label",
+			"required",
+			"hide-label",
+			"for",
+			"help-text",
+			"errors"
+		]));
+	}
+}), E = /* @__PURE__ */ e({ default: () => D }), D = T;
+//#endregion
+export { E as n, D as t };
+
+//# sourceMappingURL=TimezonePicker-5XokaK-n.js.map

package/dist/chunks/TimezonePicker-5XokaK-n.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimezonePicker-5XokaK-n.js","names":[],"sources":["../../src/components/compositions/elements/picker/TimezonePicker.vue","../../src/components/compositions/elements/picker/TimezonePicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven timezone picker composition. Searchable combobox over\n * every IANA timezone reported by the runtime (`Intl.supportedValuesOf`).\n * Falls back to a curated list when `Intl.supportedValuesOf` is missing\n * (older jsdom).\n *\n *   <TimezonePicker v-model=\"tz\" label=\"Timezone\" />\n */\nimport { computed, ref } from \"vue\"\nimport { Globe } from \"@lucide/vue\"\nimport {\n  Combobox,\n  ComboboxAnchor,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxItemIndicator,\n} from \"@/components/ui/combobox\"\nimport { FieldFrame } from \"@/components/ui/field-frame\"\n\nexport interface TimezonePickerProps {\n  modelValue?: string | 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  helpText?: string\n  errors?: string[]\n}\n\nwithDefaults(defineProps<TimezonePickerProps>(), {\n  errors: () => [],\n})\n\nconst model = defineModel<string | null>(\"modelValue\")\n\nconst query = ref<string>(\"\")\n\nconst timezones = computed<string[]>(() => {\n  const intl = Intl as unknown as {\n    supportedValuesOf?: (key: string) => string[]\n  }\n  if (typeof intl.supportedValuesOf === \"function\") {\n    try {\n      return intl.supportedValuesOf(\"timeZone\")\n    } catch {\n      return []\n    }\n  }\n  return [\n    \"UTC\",\n    \"America/New_York\",\n    \"America/Chicago\",\n    \"America/Denver\",\n    \"America/Los_Angeles\",\n    \"Europe/London\",\n    \"Europe/Paris\",\n    \"Europe/Berlin\",\n    \"Asia/Tokyo\",\n    \"Asia/Shanghai\",\n    \"Australia/Sydney\",\n  ]\n})\n\nconst filtered = computed<string[]>(() => {\n  const q = query.value.trim().toLowerCase()\n  if (!q) {\n    return timezones.value.slice(0, 200)\n  }\n  return timezones.value\n    .filter((tz) => tz.toLowerCase().includes(q))\n    .slice(0, 200)\n})\n\nfunction onSelect(value: unknown): void {\n  const next = typeof value === \"string\" ? value : \"\"\n  model.value = next\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    <Combobox\n      :model-value=\"model ?? ''\"\n      :disabled=\"disabled\"\n      @update:model-value=\"onSelect\"\n    >\n      <ComboboxAnchor\n        :data-element-name=\"name ?? undefined\"\n        :data-readonly=\"readonly || undefined\"\n      >\n        <Globe class=\"mr-2 size-4 shrink-0 opacity-50\" />\n        <ComboboxInput\n          v-model=\"query\"\n          :placeholder=\"placeholder ?? 'Select a timezone…'\"\n          :readonly=\"readonly\"\n          :required=\"required\"\n        />\n      </ComboboxAnchor>\n      <ComboboxContent>\n        <ComboboxEmpty>No timezones match.</ComboboxEmpty>\n        <ComboboxItem v-for=\"tz in filtered\" :key=\"tz\" :value=\"tz\">\n          <ComboboxItemIndicator />\n          {{ tz }}\n        </ComboboxItem>\n      </ComboboxContent>\n    </Combobox>\n  </FieldFrame>\n</template>\n","<script setup lang=\"ts\">\n/**\n * Props-driven timezone picker composition. Searchable combobox over\n * every IANA timezone reported by the runtime (`Intl.supportedValuesOf`).\n * Falls back to a curated list when `Intl.supportedValuesOf` is missing\n * (older jsdom).\n *\n *   <TimezonePicker v-model=\"tz\" label=\"Timezone\" />\n */\nimport { computed, ref } from \"vue\"\nimport { Globe } from \"@lucide/vue\"\nimport {\n  Combobox,\n  ComboboxAnchor,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxItemIndicator,\n} from \"@/components/ui/combobox\"\nimport { FieldFrame } from \"@/components/ui/field-frame\"\n\nexport interface TimezonePickerProps {\n  modelValue?: string | 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  helpText?: string\n  errors?: string[]\n}\n\nwithDefaults(defineProps<TimezonePickerProps>(), {\n  errors: () => [],\n})\n\nconst model = defineModel<string | null>(\"modelValue\")\n\nconst query = ref<string>(\"\")\n\nconst timezones = computed<string[]>(() => {\n  const intl = Intl as unknown as {\n    supportedValuesOf?: (key: string) => string[]\n  }\n  if (typeof intl.supportedValuesOf === \"function\") {\n    try {\n      return intl.supportedValuesOf(\"timeZone\")\n    } catch {\n      return []\n    }\n  }\n  return [\n    \"UTC\",\n    \"America/New_York\",\n    \"America/Chicago\",\n    \"America/Denver\",\n    \"America/Los_Angeles\",\n    \"Europe/London\",\n    \"Europe/Paris\",\n    \"Europe/Berlin\",\n    \"Asia/Tokyo\",\n    \"Asia/Shanghai\",\n    \"Australia/Sydney\",\n  ]\n})\n\nconst filtered = computed<string[]>(() => {\n  const q = query.value.trim().toLowerCase()\n  if (!q) {\n    return timezones.value.slice(0, 200)\n  }\n  return timezones.value\n    .filter((tz) => tz.toLowerCase().includes(q))\n    .slice(0, 200)\n})\n\nfunction onSelect(value: unknown): void {\n  const next = typeof value === \"string\" ? value : \"\"\n  model.value = next\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    <Combobox\n      :model-value=\"model ?? ''\"\n      :disabled=\"disabled\"\n      @update:model-value=\"onSelect\"\n    >\n      <ComboboxAnchor\n        :data-element-name=\"name ?? undefined\"\n        :data-readonly=\"readonly || undefined\"\n      >\n        <Globe class=\"mr-2 size-4 shrink-0 opacity-50\" />\n        <ComboboxInput\n          v-model=\"query\"\n          :placeholder=\"placeholder ?? 'Select a timezone…'\"\n          :readonly=\"readonly\"\n          :required=\"required\"\n        />\n      </ComboboxAnchor>\n      <ComboboxContent>\n        <ComboboxEmpty>No timezones match.</ComboboxEmpty>\n        <ComboboxItem v-for=\"tz in filtered\" :key=\"tz\" :value=\"tz\">\n          <ComboboxItemIndicator />\n          {{ tz }}\n        </ComboboxItem>\n      </ComboboxContent>\n    </Combobox>\n  </FieldFrame>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;EAwCA,IAAM,IAAQ,EAA0B,GAAC,YAAY,GAE/C,IAAQ,EAAY,EAAE,GAEtB,IAAY,QAAyB;GACzC,IAAM,IAAO;GAGb,IAAI,OAAO,EAAK,qBAAsB,YACpC,IAAI;IACF,OAAO,EAAK,kBAAkB,UAAU;GAC1C,QAAQ;IACN,OAAO,CAAC;GACV;GAEF,OAAO;IACL;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;GACF;EACF,CAAC,GAEK,IAAW,QAAyB;GACxC,IAAM,IAAI,EAAM,MAAM,KAAK,EAAE,YAAY;GAIzC,OAHK,IAGE,EAAU,MACd,QAAQ,MAAO,EAAG,YAAY,EAAE,SAAS,CAAC,CAAC,EAC3C,MAAM,GAAG,GAAG,IAJN,EAAU,MAAM,MAAM,GAAG,GAAG;EAKvC,CAAC;EAED,SAAS,EAAS,GAAsB;GAEtC,EAAM,QADO,OAAO,KAAU,WAAW,IAAQ;EAEnD;yBAIE,EAiCa,EAAA,CAAA,GAAA;GAhCV,OAAO,EAAA;GACP,UAAU,EAAA;GACV,cAAY,EAAA;GACZ,KAAK,EAAA;GACL,aAAW,EAAA;GACX,QAAQ,EAAA;;oBA0BE,CAxBX,EAwBW,EAAA,CAAA,GAAA;IAvBR,eAAa,EAAA,SAAK;IAClB,UAAU,EAAA;IACV,uBAAoB;;qBAaJ,CAXjB,EAWiB,EAAA,CAAA,GAAA;KAVd,qBAAmB,EAAA,QAAQ,KAAA;KAC3B,iBAAe,EAAA,YAAY,KAAA;;sBAEqB,CAAjD,EAAiD,EAAA,CAAA,GAAA,EAA1C,OAAM,kCAAiC,CAAA,GAC9C,EAKE,EAAA,CAAA,GAAA;kBAJS,EAAA;+CAAK,QAAA;MACb,aAAa,EAAA,eAAW;MACxB,UAAU,EAAA;MACV,UAAU,EAAA;;;;;;;;mDAGf,EAMkB,EAAA,CAAA,GAAA,MAAA;sBALkC,CAAlD,EAAkD,EAAA,CAAA,GAAA,MAAA;uBAAhB,CAAA,GAAA,AAAA,EAAA,OAAA,CAAA,EAAnB,uBAAmB,EAAA,CAAA,CAAA,CAAA;;iBAClC,EAGe,GAAA,MAAA,EAHY,EAAA,QAAN,YAArB,EAGe,EAAA,CAAA,GAAA;MAHuB,KAAK;MAAK,OAAO;;uBAC5B,CAAzB,EAAyB,EAAA,CAAA,CAAA,GAAA,EAAA,MACzB,EAAG,CAAE,GAAA,CAAA,CAAA,CAAA"}

package/dist/chunks/TypeDisplay-D8R6boEc.js

@@ -0,0 +1,77 @@
+import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
+import { computed as t, createBlock as n, defineComponent as r, h as i, openBlock as a } from "vue";
+//#region src/components/compositions/elements/display/TypeDisplay.vue?vue&type=script&setup=true&lang.ts
+var o = /* @__PURE__ */ r({
+	__name: "TypeDisplay",
+	props: {
+		value: {},
+		contentType: { default: "paragraph" },
+		classList: {}
+	},
+	setup(e) {
+		let r = e, o = t(() => r.value === void 0 || r.value === null ? "" : String(r.value)), s = t(() => {
+			let e = r.classList;
+			return e ? Array.isArray(e) ? e.join(" ") : e : "";
+		}), c = {
+			"heading-1": {
+				tag: "h1",
+				classes: "text-4xl font-bold tracking-tight"
+			},
+			"heading-2": {
+				tag: "h2",
+				classes: "text-3xl font-semibold tracking-tight"
+			},
+			"heading-3": {
+				tag: "h3",
+				classes: "text-2xl font-semibold"
+			},
+			"heading-4": {
+				tag: "h4",
+				classes: "text-xl font-semibold"
+			},
+			"heading-5": {
+				tag: "h5",
+				classes: "text-lg font-semibold"
+			},
+			"heading-6": {
+				tag: "h6",
+				classes: "text-base font-semibold"
+			},
+			paragraph: {
+				tag: "p",
+				classes: "leading-7"
+			},
+			lead: {
+				tag: "p",
+				classes: "text-lg text-muted-foreground"
+			},
+			small: {
+				tag: "small",
+				classes: "text-xs"
+			},
+			caption: {
+				tag: "span",
+				classes: "text-xs text-muted-foreground"
+			},
+			code: {
+				tag: "code",
+				classes: "font-mono bg-muted px-1 rounded text-sm"
+			},
+			quote: {
+				tag: "blockquote",
+				classes: "border-l-4 pl-4 italic text-muted-foreground"
+			}
+		}, l = t(() => c[r.contentType] ?? c.paragraph), u = { render() {
+			return i(l.value.tag, {
+				class: [l.value.classes, s.value].filter(Boolean).join(" "),
+				"data-testid": "type-display",
+				"data-content-type": r.contentType
+			}, o.value);
+		} };
+		return (e, t) => (a(), n(u));
+	}
+}), s = /* @__PURE__ */ e({ default: () => c }), c = o;
+//#endregion
+export { s as n, c as t };
+
+//# sourceMappingURL=TypeDisplay-D8R6boEc.js.map

package/dist/chunks/TypeDisplay-D8R6boEc.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TypeDisplay-D8R6boEc.js","names":[],"sources":["../../src/components/compositions/elements/display/TypeDisplay.vue","../../src/components/compositions/elements/display/TypeDisplay.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven typography display.\n *\n * The `contentType` sub-style selects the semantic tag and Tailwind\n * classes (heading-1 .. heading-6, paragraph, lead, small, caption,\n * code, quote).\n *\n *   <TypeDisplay value=\"Hello, world\" content-type=\"heading-1\" />\n */\nimport { computed, h, type Component } from \"vue\"\nimport type { DisplayContentType } from \"@/definitions/elements/DisplayElement\"\n\nexport interface TypeDisplayProps {\n  value?: string | number | null\n  contentType?: DisplayContentType\n  classList?: string[] | string\n}\n\nconst props = withDefaults(defineProps<TypeDisplayProps>(), {\n  contentType: \"paragraph\",\n})\n\nconst content = computed<string>(() => {\n  if (props.value === undefined || props.value === null) {\n    return \"\"\n  }\n  return String(props.value)\n})\n\nconst rootClass = computed<string>(() => {\n  const cl = props.classList\n  if (!cl) {\n    return \"\"\n  }\n  return Array.isArray(cl) ? cl.join(\" \") : cl\n})\n\ninterface VariantSpec {\n  tag: string\n  classes: string\n}\n\nconst VARIANTS: Record<DisplayContentType, VariantSpec> = {\n  \"heading-1\": { tag: \"h1\", classes: \"text-4xl font-bold tracking-tight\" },\n  \"heading-2\": { tag: \"h2\", classes: \"text-3xl font-semibold tracking-tight\" },\n  \"heading-3\": { tag: \"h3\", classes: \"text-2xl font-semibold\" },\n  \"heading-4\": { tag: \"h4\", classes: \"text-xl font-semibold\" },\n  \"heading-5\": { tag: \"h5\", classes: \"text-lg font-semibold\" },\n  \"heading-6\": { tag: \"h6\", classes: \"text-base font-semibold\" },\n  paragraph: { tag: \"p\", classes: \"leading-7\" },\n  lead: { tag: \"p\", classes: \"text-lg text-muted-foreground\" },\n  small: { tag: \"small\", classes: \"text-xs\" },\n  caption: { tag: \"span\", classes: \"text-xs text-muted-foreground\" },\n  code: { tag: \"code\", classes: \"font-mono bg-muted px-1 rounded text-sm\" },\n  quote: { tag: \"blockquote\", classes: \"border-l-4 pl-4 italic text-muted-foreground\" },\n}\n\nconst variant = computed<VariantSpec>(() => {\n  return VARIANTS[props.contentType] ?? VARIANTS.paragraph\n})\n\nconst Rendered: Component = {\n  render() {\n    return h(\n      variant.value.tag,\n      {\n        class: [variant.value.classes, rootClass.value].filter(Boolean).join(\" \"),\n        \"data-testid\": \"type-display\",\n        \"data-content-type\": props.contentType,\n      },\n      content.value,\n    )\n  },\n}\n</script>\n\n<template>\n  <Rendered />\n</template>\n","<script setup lang=\"ts\">\n/**\n * Props-driven typography display.\n *\n * The `contentType` sub-style selects the semantic tag and Tailwind\n * classes (heading-1 .. heading-6, paragraph, lead, small, caption,\n * code, quote).\n *\n *   <TypeDisplay value=\"Hello, world\" content-type=\"heading-1\" />\n */\nimport { computed, h, type Component } from \"vue\"\nimport type { DisplayContentType } from \"@/definitions/elements/DisplayElement\"\n\nexport interface TypeDisplayProps {\n  value?: string | number | null\n  contentType?: DisplayContentType\n  classList?: string[] | string\n}\n\nconst props = withDefaults(defineProps<TypeDisplayProps>(), {\n  contentType: \"paragraph\",\n})\n\nconst content = computed<string>(() => {\n  if (props.value === undefined || props.value === null) {\n    return \"\"\n  }\n  return String(props.value)\n})\n\nconst rootClass = computed<string>(() => {\n  const cl = props.classList\n  if (!cl) {\n    return \"\"\n  }\n  return Array.isArray(cl) ? cl.join(\" \") : cl\n})\n\ninterface VariantSpec {\n  tag: string\n  classes: string\n}\n\nconst VARIANTS: Record<DisplayContentType, VariantSpec> = {\n  \"heading-1\": { tag: \"h1\", classes: \"text-4xl font-bold tracking-tight\" },\n  \"heading-2\": { tag: \"h2\", classes: \"text-3xl font-semibold tracking-tight\" },\n  \"heading-3\": { tag: \"h3\", classes: \"text-2xl font-semibold\" },\n  \"heading-4\": { tag: \"h4\", classes: \"text-xl font-semibold\" },\n  \"heading-5\": { tag: \"h5\", classes: \"text-lg font-semibold\" },\n  \"heading-6\": { tag: \"h6\", classes: \"text-base font-semibold\" },\n  paragraph: { tag: \"p\", classes: \"leading-7\" },\n  lead: { tag: \"p\", classes: \"text-lg text-muted-foreground\" },\n  small: { tag: \"small\", classes: \"text-xs\" },\n  caption: { tag: \"span\", classes: \"text-xs text-muted-foreground\" },\n  code: { tag: \"code\", classes: \"font-mono bg-muted px-1 rounded text-sm\" },\n  quote: { tag: \"blockquote\", classes: \"border-l-4 pl-4 italic text-muted-foreground\" },\n}\n\nconst variant = computed<VariantSpec>(() => {\n  return VARIANTS[props.contentType] ?? VARIANTS.paragraph\n})\n\nconst Rendered: Component = {\n  render() {\n    return h(\n      variant.value.tag,\n      {\n        class: [variant.value.classes, rootClass.value].filter(Boolean).join(\" \"),\n        \"data-testid\": \"type-display\",\n        \"data-content-type\": props.contentType,\n      },\n      content.value,\n    )\n  },\n}\n</script>\n\n<template>\n  <Rendered />\n</template>\n"],"mappings":";;;;;;;;;;;EAmBA,IAAM,IAAQ,GAIR,IAAU,QACV,EAAM,UAAU,KAAA,KAAa,EAAM,UAAU,OACxC,KAEF,OAAO,EAAM,KAAK,CAC1B,GAEK,IAAY,QAAuB;GACvC,IAAM,IAAK,EAAM;GAIjB,OAHK,IAGE,MAAM,QAAQ,CAAE,IAAI,EAAG,KAAK,GAAG,IAAI,IAFjC;EAGX,CAAC,GAOK,IAAoD;GACxD,aAAa;IAAE,KAAK;IAAM,SAAS;GAAoC;GACvE,aAAa;IAAE,KAAK;IAAM,SAAS;GAAwC;GAC3E,aAAa;IAAE,KAAK;IAAM,SAAS;GAAyB;GAC5D,aAAa;IAAE,KAAK;IAAM,SAAS;GAAwB;GAC3D,aAAa;IAAE,KAAK;IAAM,SAAS;GAAwB;GAC3D,aAAa;IAAE,KAAK;IAAM,SAAS;GAA0B;GAC7D,WAAW;IAAE,KAAK;IAAK,SAAS;GAAY;GAC5C,MAAM;IAAE,KAAK;IAAK,SAAS;GAAgC;GAC3D,OAAO;IAAE,KAAK;IAAS,SAAS;GAAU;GAC1C,SAAS;IAAE,KAAK;IAAQ,SAAS;GAAgC;GACjE,MAAM;IAAE,KAAK;IAAQ,SAAS;GAA0C;GACxE,OAAO;IAAE,KAAK;IAAc,SAAS;GAA+C;EACtF,GAEM,IAAU,QACP,EAAS,EAAM,gBAAgB,EAAS,SAChD,GAEK,IAAsB,EAC1B,SAAS;GACP,OAAO,EACL,EAAQ,MAAM,KACd;IACE,OAAO,CAAC,EAAQ,MAAM,SAAS,EAAU,KAAK,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;IACxE,eAAe;IACf,qBAAqB,EAAM;GAC7B,GACA,EAAQ,KACV;EACF,EACF;yBAIE,EAAY,CAAA"}

package/dist/chunks/UploadFile-CB5QsfE3.js

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

package/dist/chunks/UploadFile-CB5QsfE3.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UploadFile-CB5QsfE3.js","names":[],"sources":["../../src/components/compositions/elements/file/UploadFile.vue","../../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","<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/chunks/UrlInput-BFGNlZTC.js

@@ -0,0 +1,83 @@
+import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
+import { t } from "./input-tw5ZQGKQ.js";
+import { t as n } from "./field-frame-n5oLDNBT.js";
+import { createBlock as r, createVNode as i, defineComponent as a, mergeModels as o, normalizeClass as s, onMounted as c, openBlock as l, unref as u, useModel as d, useTemplateRef as f, withCtx as p } from "vue";
+//#region src/components/compositions/elements/input/UrlInput.vue?vue&type=script&setup=true&lang.ts
+var m = /* @__PURE__ */ a({
+	__name: "UrlInput",
+	props: /* @__PURE__ */ o({
+		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(e) {
+		let a = e, o = d(e, "modelValue"), m = f("inputRef");
+		return c(() => {
+			a.autoFocus && m.value?.focus();
+		}), (a, c) => (l(), r(u(n), {
+			label: e.label,
+			required: e.required,
+			"hide-label": e.hideLabel,
+			for: e.id,
+			"help-text": e.helpText,
+			errors: e.errors
+		}, {
+			default: p(() => [i(u(t), {
+				ref_key: "inputRef",
+				ref: m,
+				"model-value": o.value ?? void 0,
+				id: e.id,
+				name: e.name ?? void 0,
+				type: "url",
+				placeholder: e.placeholder ?? "",
+				readonly: e.readonly,
+				disabled: e.disabled,
+				required: e.required,
+				maxlength: e.maxlength,
+				minlength: e.minlength,
+				"data-element-name": e.name ?? void 0,
+				class: s(e.errors.length ? "border-destructive ring-destructive" : ""),
+				"onUpdate:modelValue": c[0] ||= (e) => o.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"
+		]));
+	}
+}), h = /* @__PURE__ */ e({ default: () => g }), g = m;
+//#endregion
+export { h as n, g as t };
+
+//# sourceMappingURL=UrlInput-BFGNlZTC.js.map

package/dist/chunks/UrlInput-BFGNlZTC.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UrlInput-BFGNlZTC.js","names":[],"sources":["../../src/components/compositions/elements/input/UrlInput.vue","../../src/components/compositions/elements/input/UrlInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven URL input composition. Composes the shadcn `Input`\n * primitive (with `type=\"url\"`) and `FieldFrame` chrome.\n *\n * Self-contained — usable directly in any Vue app:\n *\n *   <UrlInput v-model=\"website\" label=\"Website\" />\n */\nimport { onMounted, useTemplateRef } from \"vue\"\nimport { Input } from \"@/components/ui/input\"\nimport { FieldFrame } from \"@/components/ui/field-frame\"\n\nexport interface UrlInputProps {\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<UrlInputProps>(), {\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=\"url\"\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","<script setup lang=\"ts\">\n/**\n * Props-driven URL input composition. Composes the shadcn `Input`\n * primitive (with `type=\"url\"`) and `FieldFrame` chrome.\n *\n * Self-contained — usable directly in any Vue app:\n *\n *   <UrlInput v-model=\"website\" label=\"Website\" />\n */\nimport { onMounted, useTemplateRef } from \"vue\"\nimport { Input } from \"@/components/ui/input\"\nimport { FieldFrame } from \"@/components/ui/field-frame\"\n\nexport interface UrlInputProps {\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<UrlInputProps>(), {\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=\"url\"\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/chunks/VideoPlayerDisplay-DKnCfE05.js

@@ -0,0 +1,41 @@
+import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
+import { computed as t, createCommentVNode as n, createElementBlock as r, defineComponent as i, normalizeClass as a, openBlock as o } from "vue";
+//#region src/components/compositions/elements/display/VideoPlayerDisplay.vue?vue&type=script&setup=true&lang.ts
+var s = [
+	"src",
+	"autoplay",
+	"loop",
+	"muted"
+], c = /* @__PURE__ */ i({
+	__name: "VideoPlayerDisplay",
+	props: {
+		src: {},
+		autoplay: { type: Boolean },
+		loop: { type: Boolean },
+		muted: { type: Boolean },
+		classList: {}
+	},
+	setup(e) {
+		let i = e, c = t(() => {
+			let e = i.classList;
+			return e ? Array.isArray(e) ? e.join(" ") : e : "";
+		});
+		return (t, i) => (o(), r("div", {
+			class: a(["w-full", c.value]),
+			"data-testid": "video-display"
+		}, [e.src ? (o(), r("video", {
+			key: 0,
+			controls: "",
+			src: e.src,
+			autoplay: e.autoplay || void 0,
+			loop: e.loop || void 0,
+			muted: e.muted || void 0,
+			class: "h-auto w-full rounded border",
+			preload: "metadata"
+		}, null, 8, s)) : n("", !0)], 2));
+	}
+}), l = /* @__PURE__ */ e({ default: () => u }), u = c;
+//#endregion
+export { l as n, u as t };
+
+//# sourceMappingURL=VideoPlayerDisplay-DKnCfE05.js.map

package/dist/chunks/VideoPlayerDisplay-DKnCfE05.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VideoPlayerDisplay-DKnCfE05.js","names":[],"sources":["../../src/components/compositions/elements/display/VideoPlayerDisplay.vue","../../src/components/compositions/elements/display/VideoPlayerDisplay.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven video display.\n *\n * Renders a native HTML5 `<video controls>` player. Pass `autoplay`,\n * `loop`, and `muted` to enable the corresponding behaviours.\n */\nimport { computed } from \"vue\"\n\nexport interface VideoPlayerDisplayProps {\n  src?: string\n  autoplay?: boolean\n  loop?: boolean\n  muted?: boolean\n  classList?: string[] | string\n}\n\nconst props = defineProps<VideoPlayerDisplayProps>()\n\nconst rootClass = computed<string>(() => {\n  const cl = props.classList\n  if (!cl) {\n    return \"\"\n  }\n  return Array.isArray(cl) ? cl.join(\" \") : cl\n})\n</script>\n\n<template>\n  <div\n    class=\"w-full\"\n    :class=\"rootClass\"\n    data-testid=\"video-display\"\n  >\n    <video\n      v-if=\"src\"\n      controls\n      :src=\"src\"\n      :autoplay=\"autoplay || undefined\"\n      :loop=\"loop || undefined\"\n      :muted=\"muted || undefined\"\n      class=\"h-auto w-full rounded border\"\n      preload=\"metadata\"\n    />\n  </div>\n</template>\n","<script setup lang=\"ts\">\n/**\n * Props-driven video display.\n *\n * Renders a native HTML5 `<video controls>` player. Pass `autoplay`,\n * `loop`, and `muted` to enable the corresponding behaviours.\n */\nimport { computed } from \"vue\"\n\nexport interface VideoPlayerDisplayProps {\n  src?: string\n  autoplay?: boolean\n  loop?: boolean\n  muted?: boolean\n  classList?: string[] | string\n}\n\nconst props = defineProps<VideoPlayerDisplayProps>()\n\nconst rootClass = computed<string>(() => {\n  const cl = props.classList\n  if (!cl) {\n    return \"\"\n  }\n  return Array.isArray(cl) ? cl.join(\" \") : cl\n})\n</script>\n\n<template>\n  <div\n    class=\"w-full\"\n    :class=\"rootClass\"\n    data-testid=\"video-display\"\n  >\n    <video\n      v-if=\"src\"\n      controls\n      :src=\"src\"\n      :autoplay=\"autoplay || undefined\"\n      :loop=\"loop || undefined\"\n      :muted=\"muted || undefined\"\n      class=\"h-auto w-full rounded border\"\n      preload=\"metadata\"\n    />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;EAiBA,IAAM,IAAQ,GAER,IAAY,QAAuB;GACvC,IAAM,IAAK,EAAM;GAIjB,OAHK,IAGE,MAAM,QAAQ,CAAE,IAAI,EAAG,KAAK,GAAG,IAAI,IAFjC;EAGX,CAAC;yBAIC,EAeM,OAAA;GAdJ,OAAK,EAAA,CAAC,UACE,EAAA,KAAS,CAAA;GACjB,eAAY;MAGJ,EAAA,OAAA,EAAA,GADR,EASE,SAAA;;GAPA,UAAA;GACC,KAAK,EAAA;GACL,UAAU,EAAA,YAAY,KAAA;GACtB,MAAM,EAAA,QAAQ,KAAA;GACd,OAAO,EAAA,SAAS,KAAA;GACjB,OAAM;GACN,SAAQ"}

package/dist/chunks/_plugin-vue_export-helper-B3ysoDQm.js

@@ -0,0 +1,8 @@
+//#region \0plugin-vue:export-helper
+var e = (e, t) => {
+	let n = e.__vccOpts || e;
+	for (let [e, r] of t) n[e] = r;
+	return n;
+};
+//#endregion
+export { e as t };

package/dist/chunks/alert-BaV_rA2M.js

@@ -0,0 +1,64 @@
+import { n as e } from "./utils-DAErOi9O.js";
+import { createElementBlock as t, defineComponent as n, normalizeClass as r, openBlock as i, renderSlot as a, unref as o } from "vue";
+import { cva as s } from "class-variance-authority";
+//#endregion
+//#region src/components/ui/alert/Alert.vue
+var c = /* @__PURE__ */ n({
+	__name: "Alert",
+	props: {
+		variant: {},
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] }
+	},
+	setup(n) {
+		let s = n;
+		return (c, l) => (i(), t("div", {
+			role: "alert",
+			class: r(o(e)(o(d)({ variant: n.variant }), s.class))
+		}, [a(c.$slots, "default")], 2));
+	}
+}), l = /* @__PURE__ */ n({
+	__name: "AlertDescription",
+	props: { class: { type: [
+		Boolean,
+		null,
+		String,
+		Object,
+		Array
+	] } },
+	setup(n) {
+		let s = n;
+		return (n, c) => (i(), t("div", { class: r(o(e)("text-sm [&_p]:leading-relaxed", s.class)) }, [a(n.$slots, "default")], 2));
+	}
+}), u = /* @__PURE__ */ n({
+	__name: "AlertTitle",
+	props: { class: { type: [
+		Boolean,
+		null,
+		String,
+		Object,
+		Array
+	] } },
+	setup(n) {
+		let s = n;
+		return (n, c) => (i(), t("h5", { class: r(o(e)("mb-1 font-medium leading-none tracking-tight", s.class)) }, [a(n.$slots, "default")], 2));
+	}
+}), d = s("relative w-full rounded-lg border p-4 [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:size-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px]", {
+	variants: { variant: {
+		default: "bg-background text-foreground [&>svg]:text-foreground",
+		destructive: "border-destructive/50 bg-destructive/10 text-destructive dark:border-destructive [&>svg]:text-destructive",
+		success: "border-success/50 bg-success/10 text-success dark:border-success [&>svg]:text-success",
+		warning: "border-warning/50 bg-warning/10 text-warning dark:border-warning [&>svg]:text-warning",
+		info: "border-info/50 bg-info/10 text-info dark:border-info [&>svg]:text-info"
+	} },
+	defaultVariants: { variant: "default" }
+});
+//#endregion
+export { c as i, u as n, l as r, d as t };
+
+//# sourceMappingURL=alert-BaV_rA2M.js.map

package/dist/chunks/alert-BaV_rA2M.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert-BaV_rA2M.js","names":[],"sources":["../../src/components/ui/alert/Alert.vue","../../src/components/ui/alert/Alert.vue","../../src/components/ui/alert/AlertDescription.vue","../../src/components/ui/alert/AlertDescription.vue","../../src/components/ui/alert/AlertTitle.vue","../../src/components/ui/alert/AlertTitle.vue","../../src/components/ui/alert/index.ts"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { HTMLAttributes } from \"vue\"\nimport type { AlertVariants } from \".\"\nimport { cn } from \"@/lib/utils\"\nimport { alertVariants } from \".\"\n\nexport interface AlertProps {\n  variant?: AlertVariants[\"variant\"]\n  class?: HTMLAttributes[\"class\"]\n}\n\nconst props = defineProps<AlertProps>()\n</script>\n\n<template>\n  <div role=\"alert\" :class=\"cn(alertVariants({ variant }), props.class)\">\n    <slot />\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport type { HTMLAttributes } from \"vue\"\nimport type { AlertVariants } from \".\"\nimport { cn } from \"@/lib/utils\"\nimport { alertVariants } from \".\"\n\nexport interface AlertProps {\n  variant?: AlertVariants[\"variant\"]\n  class?: HTMLAttributes[\"class\"]\n}\n\nconst props = defineProps<AlertProps>()\n</script>\n\n<template>\n  <div role=\"alert\" :class=\"cn(alertVariants({ variant }), props.class)\">\n    <slot />\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport type { HTMLAttributes } from \"vue\"\nimport { cn } from \"@/lib/utils\"\n\nexport interface AlertDescriptionProps {\n  class?: HTMLAttributes[\"class\"]\n}\n\nconst props = defineProps<AlertDescriptionProps>()\n</script>\n\n<template>\n  <div :class=\"cn('text-sm [&_p]:leading-relaxed', props.class)\">\n    <slot />\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport type { HTMLAttributes } from \"vue\"\nimport { cn } from \"@/lib/utils\"\n\nexport interface AlertDescriptionProps {\n  class?: HTMLAttributes[\"class\"]\n}\n\nconst props = defineProps<AlertDescriptionProps>()\n</script>\n\n<template>\n  <div :class=\"cn('text-sm [&_p]:leading-relaxed', props.class)\">\n    <slot />\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport type { HTMLAttributes } from \"vue\"\nimport { cn } from \"@/lib/utils\"\n\nexport interface AlertTitleProps {\n  class?: HTMLAttributes[\"class\"]\n}\n\nconst props = defineProps<AlertTitleProps>()\n</script>\n\n<template>\n  <h5 :class=\"cn('mb-1 font-medium leading-none tracking-tight', props.class)\">\n    <slot />\n  </h5>\n</template>\n","<script setup lang=\"ts\">\nimport type { HTMLAttributes } from \"vue\"\nimport { cn } from \"@/lib/utils\"\n\nexport interface AlertTitleProps {\n  class?: HTMLAttributes[\"class\"]\n}\n\nconst props = defineProps<AlertTitleProps>()\n</script>\n\n<template>\n  <h5 :class=\"cn('mb-1 font-medium leading-none tracking-tight', props.class)\">\n    <slot />\n  </h5>\n</template>\n","import type { VariantProps } from \"class-variance-authority\"\nimport { cva } from \"class-variance-authority\"\n\nexport { default as Alert } from \"./Alert.vue\"\nexport { default as AlertDescription } from \"./AlertDescription.vue\"\nexport { default as AlertTitle } from \"./AlertTitle.vue\"\n\nexport const alertVariants = cva(\n  \"relative w-full rounded-lg border p-4 [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:size-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px]\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-background text-foreground [&>svg]:text-foreground\",\n        destructive:\n          \"border-destructive/50 bg-destructive/10 text-destructive dark:border-destructive [&>svg]:text-destructive\",\n        success:\n          \"border-success/50 bg-success/10 text-success dark:border-success [&>svg]:text-success\",\n        warning:\n          \"border-warning/50 bg-warning/10 text-warning dark:border-warning [&>svg]:text-warning\",\n        info:\n          \"border-info/50 bg-info/10 text-info dark:border-info [&>svg]:text-info\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  },\n)\n\nexport type AlertVariants = VariantProps<typeof alertVariants>\n"],"mappings":";;;;;;;;;;;;;;;;;;EAWA,IAAM,IAAQ;yBAIZ,EAEM,OAAA;GAFD,MAAK;GAAS,OAAK,EAAE,EAAA,CAAA,EAAG,EAAA,CAAA,EAAa,EAAA,SAAG,EAAA,QAAO,CAAA,GAAK,EAAM,KAAK,CAAA;MAClE,EAAQ,EAAA,QAAA,SAAA,CAAA,GAAA,CAAA;;;;;;;;;;;;EERZ,IAAM,IAAQ;yBAIZ,EAEM,OAAA,EAFA,OAAK,EAAE,EAAA,CAAA,EAAE,iCAAkC,EAAM,KAAK,CAAA,EAAA,GAAA,CAC1D,EAAQ,EAAA,QAAA,SAAA,CAAA,GAAA,CAAA;;;;;;;;;;;;EELZ,IAAM,IAAQ;yBAIZ,EAEK,MAAA,EAFA,OAAK,EAAE,EAAA,CAAA,EAAE,gDAAiD,EAAM,KAAK,CAAA,EAAA,GAAA,CACxE,EAAQ,EAAA,QAAA,SAAA,CAAA,GAAA,CAAA;;IENC,IAAgB,EAC3B,oJACA;CACE,UAAU,EACR,SAAS;EACP,SAAS;EACT,aACE;EACF,SACE;EACF,SACE;EACF,MACE;CACJ,EACF;CACA,iBAAiB,EACf,SAAS,UACX;AACF,CACF"}