@gxp-dev/mod-ui 2.0.12 → 2.0.14

package/dist/chunks/TabListCard-DTtWVg57.js

@@ -0,0 +1,103 @@
+import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
+import { a as t, i as n, o as r, r as i } from "./tabs-6wUJf_yA.js";
+import { t as a } from "./CardRenderer-N4R08uDO.js";
+import { Fragment as o, computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createTextVNode as f, createVNode as p, defineComponent as m, mergeModels as h, normalizeClass as g, openBlock as _, ref as v, renderList as y, toDisplayString as b, unref as x, useModel as S, watch as C, withCtx as w } from "vue";
+//#region src/components/compositions/cards/TabListCard.vue?vue&type=script&setup=true&lang.ts
+var T = {
+	key: 0,
+	class: "mb-3 flex flex-col gap-0.5"
+}, E = {
+	key: 0,
+	class: "text-base font-semibold"
+}, D = {
+	key: 1,
+	class: "text-sm text-muted-foreground"
+}, O = { class: "flex-1" }, k = {
+	key: 2,
+	class: "text-sm text-muted-foreground italic",
+	"data-testid": "tab-list-empty"
+}, A = /* @__PURE__ */ m({
+	__name: "TabListCard",
+	props: /* @__PURE__ */ h({
+		title: {},
+		subtitle: {},
+		showCard: { type: Boolean },
+		tabs: { default: () => [] },
+		item: { default: () => ({}) },
+		defaultTab: {},
+		style: { default: "default" },
+		navOnTop: {
+			type: Boolean,
+			default: !1
+		},
+		hideNav: {
+			type: Boolean,
+			default: !1
+		}
+	}, {
+		modelValue: {},
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(e) {
+		let m = e, h = S(e, "modelValue"), A = s(() => m.tabs ?? []), j = s(() => A.value.map((e) => e.id));
+		function M(e) {
+			return e.title ? e.title : e.id;
+		}
+		let N = v(h.value ?? m.defaultTab ?? j.value[0] ?? "");
+		C(() => h.value, (e) => {
+			e !== void 0 && e !== N.value && (N.value = e);
+		}), C(() => j.value, (e) => {
+			e.includes(N.value) || (N.value = e[0] ?? "", h.value !== N.value && (h.value = N.value));
+		});
+		function P(e) {
+			let t = String(e);
+			N.value = t, h.value = t;
+		}
+		let F = s(() => m.style === "horizontal" || m.navOnTop === !0), I = s(() => ["gxp-tab-list", F.value ? "flex flex-col gap-3" : "flex flex-row gap-3"]);
+		return (s, m) => (_(), u(o, null, [e.title || e.subtitle ? (_(), u("header", T, [e.title ? (_(), u("h3", E, b(e.title), 1)) : l("", !0), e.subtitle ? (_(), u("p", D, b(e.subtitle), 1)) : l("", !0)])) : l("", !0), A.value.length > 0 ? (_(), c(x(r), {
+			key: 1,
+			"model-value": N.value,
+			"default-value": e.defaultTab ?? j.value[0],
+			class: g(I.value),
+			orientation: F.value ? "horizontal" : "vertical",
+			"onUpdate:modelValue": P
+		}, {
+			default: w(() => [e.hideNav ? l("", !0) : (_(), c(x(n), {
+				key: 0,
+				class: g(["inline-flex items-center rounded-md bg-muted p-1", F.value ? "flex-row" : "flex-col h-auto"])
+			}, {
+				default: w(() => [(_(!0), u(o, null, y(A.value, (e) => (_(), c(x(i), {
+					key: e.id,
+					value: e.id,
+					"data-tab-id": e.id,
+					class: "rounded-sm px-3 py-1.5 text-sm font-medium data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm"
+				}, {
+					default: w(() => [f(b(M(e)), 1)]),
+					_: 2
+				}, 1032, ["value", "data-tab-id"]))), 128))]),
+				_: 1
+			}, 8, ["class"])), d("div", O, [(_(!0), u(o, null, y(A.value, (n) => (_(), c(x(t), {
+				key: n.id,
+				value: n.id,
+				"data-tab-panel-id": n.id
+			}, {
+				default: w(() => [p(a, {
+					card: n,
+					item: e.item
+				}, null, 8, ["card", "item"])]),
+				_: 2
+			}, 1032, ["value", "data-tab-panel-id"]))), 128))])]),
+			_: 1
+		}, 8, [
+			"model-value",
+			"default-value",
+			"class",
+			"orientation"
+		])) : (_(), u("p", k, " No tabs to display. "))], 64));
+	}
+}), j = /* @__PURE__ */ e({ default: () => M }), M = A;
+//#endregion
+export { j as n, M as t };
+
+//# sourceMappingURL=TabListCard-DTtWVg57.js.map

package/dist/chunks/TabListCard-DTtWVg57.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabListCard-DTtWVg57.js","names":[],"sources":["../../src/components/compositions/cards/TabListCard.vue","../../src/components/compositions/cards/TabListCard.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven `tab-list` composition — renders the shadcn-vue Tabs\n * primitive where each panel is a nested DisplayCard rendered via\n * `CardRenderer`. Each tab is a fully-resolved DisplayCard (not an ID\n * lookup).\n *\n * Self-contained — directly mountable in any Vue app:\n *\n *   <TabListCard\n *     v-model=\"activeTab\"\n *     :tabs=\"[generalCard, advancedCard]\"\n *     :item=\"dataModel\"\n *   />\n *\n * The tab label comes from the child card's `title`, falling back to\n * the card's `id`. The first child is the default active tab.\n */\nimport { computed, ref, watch } from \"vue\"\nimport type { DisplayCard } from \"@/definitions/cards\"\nimport type { TabListCardStyle } from \"@/definitions/cards/TabListCard\"\nimport CardRenderer from \"@/engine/CardRenderer.vue\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/components/ui/tabs\"\n\nexport interface TabListCardProps {\n  title?: string\n  subtitle?: string\n  showCard?: boolean\n  /** Resolved tab cards (NOT IDs). */\n  tabs?: DisplayCard[]\n  /** Page-level data model passed through to child renderers. */\n  item?: Record<string, unknown>\n  /** Initial active tab id. Falls back to the first tab. */\n  defaultTab?: string\n  /** Vertical or horizontal nav layout. */\n  style?: TabListCardStyle\n  /** Force the nav bar to render above the panel content. */\n  navOnTop?: boolean\n  /** Hide the nav bar entirely (used when an external nav controls the tabs). */\n  hideNav?: boolean\n}\n\nconst props = withDefaults(defineProps<TabListCardProps>(), {\n  tabs: () => [],\n  item: () => ({}),\n  style: \"default\",\n  navOnTop: false,\n  hideNav: false,\n})\n\nconst activeTab = defineModel<string>(\"modelValue\")\n\nconst tabList = computed<DisplayCard[]>(() => props.tabs ?? [])\n\nconst tabIds = computed<string[]>(() => tabList.value.map((t) => t.id))\n\nfunction labelFor(card: DisplayCard): string {\n  if (card.title) {\n    return card.title\n  }\n  return card.id\n}\n\nconst internalActive = ref<string>(\n  activeTab.value ?? props.defaultTab ?? tabIds.value[0] ?? \"\",\n)\n\nwatch(\n  () => activeTab.value,\n  (next) => {\n    if (next !== undefined && next !== internalActive.value) {\n      internalActive.value = next\n    }\n  },\n)\n\nwatch(\n  () => tabIds.value,\n  (next) => {\n    if (!next.includes(internalActive.value)) {\n      internalActive.value = next[0] ?? \"\"\n      if (activeTab.value !== internalActive.value) {\n        activeTab.value = internalActive.value\n      }\n    }\n  },\n)\n\nfunction onTabChange(value: string | number): void {\n  const id = String(value)\n  internalActive.value = id\n  activeTab.value = id\n}\n\nconst navOnTopComputed = computed<boolean>(\n  () => props.style === \"horizontal\" || props.navOnTop === true,\n)\n\nconst wrapperClass = computed(() => [\n  \"gxp-tab-list\",\n  navOnTopComputed.value ? \"flex flex-col gap-3\" : \"flex flex-row gap-3\",\n])\n</script>\n\n<template>\n  <header v-if=\"title || subtitle\" class=\"mb-3 flex flex-col gap-0.5\">\n    <h3 v-if=\"title\" class=\"text-base font-semibold\">{{ title }}</h3>\n    <p v-if=\"subtitle\" class=\"text-sm text-muted-foreground\">\n      {{ subtitle }}\n    </p>\n  </header>\n  <Tabs\n    v-if=\"tabList.length > 0\"\n    :model-value=\"internalActive\"\n    :default-value=\"defaultTab ?? tabIds[0]\"\n    :class=\"wrapperClass\"\n    :orientation=\"navOnTopComputed ? 'horizontal' : 'vertical'\"\n    @update:model-value=\"onTabChange\"\n  >\n    <TabsList\n      v-if=\"!hideNav\"\n      :class=\"[\n        'inline-flex items-center rounded-md bg-muted p-1',\n        navOnTopComputed ? 'flex-row' : 'flex-col h-auto',\n      ]\"\n    >\n      <TabsTrigger\n        v-for=\"tab in tabList\"\n        :key=\"tab.id\"\n        :value=\"tab.id\"\n        :data-tab-id=\"tab.id\"\n        class=\"rounded-sm px-3 py-1.5 text-sm font-medium data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm\"\n      >\n        {{ labelFor(tab) }}\n      </TabsTrigger>\n    </TabsList>\n    <div class=\"flex-1\">\n      <TabsContent\n        v-for=\"tab in tabList\"\n        :key=\"tab.id\"\n        :value=\"tab.id\"\n        :data-tab-panel-id=\"tab.id\"\n      >\n        <CardRenderer :card=\"tab\" :item=\"item\" />\n      </TabsContent>\n    </div>\n  </Tabs>\n  <p\n    v-else\n    class=\"text-sm text-muted-foreground italic\"\n    data-testid=\"tab-list-empty\"\n  >\n    No tabs to display.\n  </p>\n</template>\n","<script setup lang=\"ts\">\n/**\n * Props-driven `tab-list` composition — renders the shadcn-vue Tabs\n * primitive where each panel is a nested DisplayCard rendered via\n * `CardRenderer`. Each tab is a fully-resolved DisplayCard (not an ID\n * lookup).\n *\n * Self-contained — directly mountable in any Vue app:\n *\n *   <TabListCard\n *     v-model=\"activeTab\"\n *     :tabs=\"[generalCard, advancedCard]\"\n *     :item=\"dataModel\"\n *   />\n *\n * The tab label comes from the child card's `title`, falling back to\n * the card's `id`. The first child is the default active tab.\n */\nimport { computed, ref, watch } from \"vue\"\nimport type { DisplayCard } from \"@/definitions/cards\"\nimport type { TabListCardStyle } from \"@/definitions/cards/TabListCard\"\nimport CardRenderer from \"@/engine/CardRenderer.vue\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/components/ui/tabs\"\n\nexport interface TabListCardProps {\n  title?: string\n  subtitle?: string\n  showCard?: boolean\n  /** Resolved tab cards (NOT IDs). */\n  tabs?: DisplayCard[]\n  /** Page-level data model passed through to child renderers. */\n  item?: Record<string, unknown>\n  /** Initial active tab id. Falls back to the first tab. */\n  defaultTab?: string\n  /** Vertical or horizontal nav layout. */\n  style?: TabListCardStyle\n  /** Force the nav bar to render above the panel content. */\n  navOnTop?: boolean\n  /** Hide the nav bar entirely (used when an external nav controls the tabs). */\n  hideNav?: boolean\n}\n\nconst props = withDefaults(defineProps<TabListCardProps>(), {\n  tabs: () => [],\n  item: () => ({}),\n  style: \"default\",\n  navOnTop: false,\n  hideNav: false,\n})\n\nconst activeTab = defineModel<string>(\"modelValue\")\n\nconst tabList = computed<DisplayCard[]>(() => props.tabs ?? [])\n\nconst tabIds = computed<string[]>(() => tabList.value.map((t) => t.id))\n\nfunction labelFor(card: DisplayCard): string {\n  if (card.title) {\n    return card.title\n  }\n  return card.id\n}\n\nconst internalActive = ref<string>(\n  activeTab.value ?? props.defaultTab ?? tabIds.value[0] ?? \"\",\n)\n\nwatch(\n  () => activeTab.value,\n  (next) => {\n    if (next !== undefined && next !== internalActive.value) {\n      internalActive.value = next\n    }\n  },\n)\n\nwatch(\n  () => tabIds.value,\n  (next) => {\n    if (!next.includes(internalActive.value)) {\n      internalActive.value = next[0] ?? \"\"\n      if (activeTab.value !== internalActive.value) {\n        activeTab.value = internalActive.value\n      }\n    }\n  },\n)\n\nfunction onTabChange(value: string | number): void {\n  const id = String(value)\n  internalActive.value = id\n  activeTab.value = id\n}\n\nconst navOnTopComputed = computed<boolean>(\n  () => props.style === \"horizontal\" || props.navOnTop === true,\n)\n\nconst wrapperClass = computed(() => [\n  \"gxp-tab-list\",\n  navOnTopComputed.value ? \"flex flex-col gap-3\" : \"flex flex-row gap-3\",\n])\n</script>\n\n<template>\n  <header v-if=\"title || subtitle\" class=\"mb-3 flex flex-col gap-0.5\">\n    <h3 v-if=\"title\" class=\"text-base font-semibold\">{{ title }}</h3>\n    <p v-if=\"subtitle\" class=\"text-sm text-muted-foreground\">\n      {{ subtitle }}\n    </p>\n  </header>\n  <Tabs\n    v-if=\"tabList.length > 0\"\n    :model-value=\"internalActive\"\n    :default-value=\"defaultTab ?? tabIds[0]\"\n    :class=\"wrapperClass\"\n    :orientation=\"navOnTopComputed ? 'horizontal' : 'vertical'\"\n    @update:model-value=\"onTabChange\"\n  >\n    <TabsList\n      v-if=\"!hideNav\"\n      :class=\"[\n        'inline-flex items-center rounded-md bg-muted p-1',\n        navOnTopComputed ? 'flex-row' : 'flex-col h-auto',\n      ]\"\n    >\n      <TabsTrigger\n        v-for=\"tab in tabList\"\n        :key=\"tab.id\"\n        :value=\"tab.id\"\n        :data-tab-id=\"tab.id\"\n        class=\"rounded-sm px-3 py-1.5 text-sm font-medium data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm\"\n      >\n        {{ labelFor(tab) }}\n      </TabsTrigger>\n    </TabsList>\n    <div class=\"flex-1\">\n      <TabsContent\n        v-for=\"tab in tabList\"\n        :key=\"tab.id\"\n        :value=\"tab.id\"\n        :data-tab-panel-id=\"tab.id\"\n      >\n        <CardRenderer :card=\"tab\" :item=\"item\" />\n      </TabsContent>\n    </div>\n  </Tabs>\n  <p\n    v-else\n    class=\"text-sm text-muted-foreground italic\"\n    data-testid=\"tab-list-empty\"\n  >\n    No tabs to display.\n  </p>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+CA,IAAM,IAAQ,GAQR,IAAY,EAAmB,GAAC,YAAY,GAE5C,IAAU,QAA8B,EAAM,QAAQ,CAAC,CAAC,GAExD,IAAS,QAAyB,EAAQ,MAAM,KAAK,MAAM,EAAE,EAAE,CAAC;EAEtE,SAAS,EAAS,GAA2B;GAI3C,OAHI,EAAK,QACA,EAAK,QAEP,EAAK;EACd;EAEA,IAAM,IAAiB,EACrB,EAAU,SAAS,EAAM,cAAc,EAAO,MAAM,MAAM,EAC5D;EAWA,AATA,QACQ,EAAU,QACf,MAAS;GACR,AAAI,MAAS,KAAA,KAAa,MAAS,EAAe,UAChD,EAAe,QAAQ;EAE3B,CACF,GAEA,QACQ,EAAO,QACZ,MAAS;GACR,AAAK,EAAK,SAAS,EAAe,KAAK,MACrC,EAAe,QAAQ,EAAK,MAAM,IAC9B,EAAU,UAAU,EAAe,UACrC,EAAU,QAAQ,EAAe;EAGvC,CACF;EAEA,SAAS,EAAY,GAA8B;GACjD,IAAM,IAAK,OAAO,CAAK;GAEvB,AADA,EAAe,QAAQ,GACvB,EAAU,QAAQ;EACpB;EAEA,IAAM,IAAmB,QACjB,EAAM,UAAU,gBAAgB,EAAM,aAAa,EAC3D,GAEM,IAAe,QAAe,CAClC,gBACA,EAAiB,QAAQ,wBAAwB,qBACnD,CAAC;qCAIe,EAAA,SAAS,EAAA,YAAA,EAAA,GAAvB,EAKS,UALT,GAKS,CAJG,EAAA,SAAA,EAAA,GAAV,EAAiE,MAAjE,GAAiE,EAAb,EAAA,KAAK,GAAA,CAAA,KAAA,EAAA,IAAA,EAAA,GAChD,EAAA,YAAA,EAAA,GAAT,EAEI,KAFJ,GAEI,EADC,EAAA,QAAQ,GAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,CAAA,KAAA,EAAA,IAAA,EAAA,GAIP,EAAA,MAAQ,SAAM,KAAA,EAAA,GADtB,EAmCO,EAAA,CAAA,GAAA;;GAjCJ,eAAa,EAAA;GACb,iBAAe,EAAA,cAAc,EAAA,MAAM;GACnC,OAAK,EAAE,EAAA,KAAY;GACnB,aAAa,EAAA,QAAgB,eAAA;GAC7B,uBAAoB;;oBAkBV,CAfF,EAAA,uBAAA,EAAA,GADT,EAgBW,EAAA,CAAA,GAAA;;IAdR,OAAK,EAAA,CAAA,oDAAwE,EAAA,QAAgB,aAAA,iBAAA,CAAA;;qBAMtE,EAAA,EAAA,EAAA,GADxB,EAQc,GAAA,MAAA,EAPE,EAAA,QAAP,YADT,EAQc,EAAA,CAAA,GAAA;KANX,KAAK,EAAI;KACT,OAAO,EAAI;KACX,eAAa,EAAI;KAClB,OAAM;;sBAEa,CAAA,EAAA,EAAhB,EAAS,CAAG,CAAA,GAAA,CAAA,CAAA,CAAA;;;;sBAGnB,EASM,OATN,GASM,EAAA,EAAA,EAAA,GARJ,EAOc,GAAA,MAAA,EANE,EAAA,QAAP,YADT,EAOc,EAAA,CAAA,GAAA;IALX,KAAK,EAAI;IACT,OAAO,EAAI;IACX,qBAAmB,EAAI;;qBAEiB,CAAzC,EAAyC,GAAA;KAA1B,MAAM;KAAM,MAAM,EAAA;;;;;;;;;;cAIvC,EAMI,KANJ,GAIC,uBAED,EAAA,GAAA,EAAA"}

package/dist/chunks/TelInput-C14K40Ew.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/TelInput.vue?vue&type=script&setup=true&lang.ts
+var m = /* @__PURE__ */ a({
+	__name: "TelInput",
+	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: "tel",
+				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=TelInput-C14K40Ew.js.map

package/dist/chunks/TelInput-C14K40Ew.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TelInput-C14K40Ew.js","names":[],"sources":["../../src/components/compositions/elements/input/TelInput.vue","../../src/components/compositions/elements/input/TelInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven telephone input composition. Composes the shadcn `Input`\n * primitive (with `type=\"tel\"`) and `FieldFrame` chrome.\n *\n * Self-contained — usable directly in any Vue app:\n *\n *   <TelInput v-model=\"phone\" label=\"Phone\" />\n */\nimport { onMounted, useTemplateRef } from \"vue\"\nimport { Input } from \"@/components/ui/input\"\nimport { FieldFrame } from \"@/components/ui/field-frame\"\n\nexport interface TelInputProps {\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<TelInputProps>(), {\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=\"tel\"\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 telephone input composition. Composes the shadcn `Input`\n * primitive (with `type=\"tel\"`) and `FieldFrame` chrome.\n *\n * Self-contained — usable directly in any Vue app:\n *\n *   <TelInput v-model=\"phone\" label=\"Phone\" />\n */\nimport { onMounted, useTemplateRef } from \"vue\"\nimport { Input } from \"@/components/ui/input\"\nimport { FieldFrame } from \"@/components/ui/field-frame\"\n\nexport interface TelInputProps {\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<TelInputProps>(), {\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=\"tel\"\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/TextInput-BzL0CCd5.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/TextInput.vue?vue&type=script&setup=true&lang.ts
+var m = /* @__PURE__ */ a({
+	__name: "TextInput",
+	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: "text",
+				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, 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=TextInput-BzL0CCd5.js.map

package/dist/chunks/TextInput-BzL0CCd5.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextInput-BzL0CCd5.js","names":[],"sources":["../../src/components/compositions/elements/input/TextInput.vue","../../src/components/compositions/elements/input/TextInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven text input composition. Composes the shadcn `Input`\n * primitive with `FieldFrame` chrome (label + helpText + errors).\n *\n * Self-contained — usable directly in any Vue app:\n *\n *   <TextInput v-model=\"firstName\" label=\"First name\" required />\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 TextInputProps {\n  modelValue?: string | 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  maxlength?: number\n  minlength?: number\n  helpText?: string\n  errors?: string[]\n  autoFocus?: boolean\n}\n\nconst props = withDefaults(defineProps<TextInputProps>(), {\n  errors: () => [],\n})\n\nconst model = defineModel<string | number | null>(\"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=\"text\"\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 ?? '')\"\n    />\n  </FieldFrame>\n</template>\n","<script setup lang=\"ts\">\n/**\n * Props-driven text input composition. Composes the shadcn `Input`\n * primitive with `FieldFrame` chrome (label + helpText + errors).\n *\n * Self-contained — usable directly in any Vue app:\n *\n *   <TextInput v-model=\"firstName\" label=\"First name\" required />\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 TextInputProps {\n  modelValue?: string | 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  maxlength?: number\n  minlength?: number\n  helpText?: string\n  errors?: string[]\n  autoFocus?: boolean\n}\n\nconst props = withDefaults(defineProps<TextInputProps>(), {\n  errors: () => [],\n})\n\nconst model = defineModel<string | number | null>(\"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=\"text\"\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 ?? '')\"\n    />\n  </FieldFrame>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiCA,IAAM,IAAQ,GAIR,IAAQ,EAAmC,GAAC,YAAY,GAExD,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"}

package/dist/chunks/TextareaInput-BY8BMgJ9.js

@@ -0,0 +1,85 @@
+import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
+import { t } from "./textarea-lgNOfYRH.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/TextareaInput.vue?vue&type=script&setup=true&lang.ts
+var m = /* @__PURE__ */ a({
+	__name: "TextareaInput",
+	props: /* @__PURE__ */ o({
+		modelValue: {},
+		id: {},
+		name: {},
+		label: {},
+		hideLabel: { type: Boolean },
+		placeholder: {},
+		required: { type: Boolean },
+		readonly: { type: Boolean },
+		disabled: { type: Boolean },
+		maxlength: {},
+		minlength: {},
+		rows: { default: 3 },
+		helpText: {},
+		errors: { default: () => [] },
+		autoFocus: { type: Boolean }
+	}, {
+		modelValue: {},
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(e) {
+		let a = e, o = d(e, "modelValue"), m = f("textareaRef");
+		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: "textareaRef",
+				ref: m,
+				"model-value": o.value ?? void 0,
+				id: e.id,
+				name: e.name ?? void 0,
+				placeholder: e.placeholder ?? "",
+				readonly: e.readonly,
+				disabled: e.disabled,
+				required: e.required,
+				maxlength: e.maxlength,
+				minlength: e.minlength,
+				rows: e.rows,
+				"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, 8, [
+				"model-value",
+				"id",
+				"name",
+				"placeholder",
+				"readonly",
+				"disabled",
+				"required",
+				"maxlength",
+				"minlength",
+				"rows",
+				"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=TextareaInput-BY8BMgJ9.js.map

package/dist/chunks/TextareaInput-BY8BMgJ9.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextareaInput-BY8BMgJ9.js","names":[],"sources":["../../src/components/compositions/elements/input/TextareaInput.vue","../../src/components/compositions/elements/input/TextareaInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven textarea input composition. Composes the shadcn\n * `Textarea` primitive and `FieldFrame` chrome.\n *\n * Self-contained — usable directly in any Vue app:\n *\n *   <TextareaInput v-model=\"bio\" label=\"Bio\" :rows=\"5\" />\n */\nimport { onMounted, useTemplateRef } from \"vue\"\nimport { Textarea } from \"@/components/ui/textarea\"\nimport { FieldFrame } from \"@/components/ui/field-frame\"\n\nexport interface TextareaInputProps {\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  rows?: number\n  helpText?: string\n  errors?: string[]\n  autoFocus?: boolean\n}\n\nconst props = withDefaults(defineProps<TextareaInputProps>(), {\n  rows: 3,\n  errors: () => [],\n})\n\nconst model = defineModel<string>(\"modelValue\")\n\nconst textareaRef = useTemplateRef<HTMLTextAreaElement>(\"textareaRef\")\n\nonMounted(() => {\n  if (props.autoFocus) {\n    textareaRef.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    <Textarea\n      ref=\"textareaRef\"\n      :model-value=\"model ?? undefined\"\n      :id=\"id\"\n      :name=\"name ?? undefined\"\n      :placeholder=\"placeholder ?? ''\"\n      :readonly=\"readonly\"\n      :disabled=\"disabled\"\n      :required=\"required\"\n      :maxlength=\"maxlength\"\n      :minlength=\"minlength\"\n      :rows=\"rows\"\n      :data-element-name=\"name ?? undefined\"\n      :class=\"errors.length ? 'border-destructive ring-destructive' : ''\"\n      @update:model-value=\"(v: string | undefined) => (model = v ?? '')\"\n    />\n  </FieldFrame>\n</template>\n","<script setup lang=\"ts\">\n/**\n * Props-driven textarea input composition. Composes the shadcn\n * `Textarea` primitive and `FieldFrame` chrome.\n *\n * Self-contained — usable directly in any Vue app:\n *\n *   <TextareaInput v-model=\"bio\" label=\"Bio\" :rows=\"5\" />\n */\nimport { onMounted, useTemplateRef } from \"vue\"\nimport { Textarea } from \"@/components/ui/textarea\"\nimport { FieldFrame } from \"@/components/ui/field-frame\"\n\nexport interface TextareaInputProps {\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  rows?: number\n  helpText?: string\n  errors?: string[]\n  autoFocus?: boolean\n}\n\nconst props = withDefaults(defineProps<TextareaInputProps>(), {\n  rows: 3,\n  errors: () => [],\n})\n\nconst model = defineModel<string>(\"modelValue\")\n\nconst textareaRef = useTemplateRef<HTMLTextAreaElement>(\"textareaRef\")\n\nonMounted(() => {\n  if (props.autoFocus) {\n    textareaRef.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    <Textarea\n      ref=\"textareaRef\"\n      :model-value=\"model ?? undefined\"\n      :id=\"id\"\n      :name=\"name ?? undefined\"\n      :placeholder=\"placeholder ?? ''\"\n      :readonly=\"readonly\"\n      :disabled=\"disabled\"\n      :required=\"required\"\n      :maxlength=\"maxlength\"\n      :minlength=\"minlength\"\n      :rows=\"rows\"\n      :data-element-name=\"name ?? undefined\"\n      :class=\"errors.length ? 'border-destructive ring-destructive' : ''\"\n      @update:model-value=\"(v: string | undefined) => (model = v ?? '')\"\n    />\n  </FieldFrame>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+BA,IAAM,IAAQ,GAKR,IAAQ,EAAmB,GAAC,YAAY,GAExC,IAAc,EAAoC,aAAa;SAErE,QAAgB;GACd,AAAI,EAAM,aACR,EAAY,OAAO,MAAM;EAE7B,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;IACd,aAAa,EAAA,eAAW;IACxB,UAAU,EAAA;IACV,UAAU,EAAA;IACV,UAAU,EAAA;IACV,WAAW,EAAA;IACX,WAAW,EAAA;IACX,MAAM,EAAA;IACN,qBAAmB,EAAA,QAAQ,KAAA;IAC3B,OAAK,EAAE,EAAA,OAAO,SAAM,wCAAA,EAAA;IACpB,uBAAkB,AAAA,EAAA,QAAG,MAA2B,EAAA,QAAQ,KAAC"}

package/dist/chunks/TimePicker-C_71cBmo.js

@@ -0,0 +1,125 @@
+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 { computed as r, createBlock as i, createElementVNode as a, createVNode as o, defineComponent as s, mergeModels as c, openBlock as l, ref as u, unref as d, useModel as f, watchEffect as p, withCtx as m } from "vue";
+import { Clock as h } from "@lucide/vue";
+//#region src/components/compositions/elements/picker/TimePicker.vue?vue&type=script&setup=true&lang.ts
+var g = ["data-element-name"], _ = /* @__PURE__ */ s({
+	__name: "TimePicker",
+	props: /* @__PURE__ */ c({
+		modelValue: {},
+		id: {},
+		name: {},
+		label: {},
+		hideLabel: { type: Boolean },
+		required: { type: Boolean },
+		readonly: { type: Boolean },
+		disabled: { type: Boolean },
+		helpText: {},
+		errors: { default: () => [] },
+		minuteStep: {}
+	}, {
+		modelValue: {},
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(e) {
+		let s = e, c = f(e, "modelValue"), _ = u(""), v = u("");
+		p(() => {
+			let e = c.value;
+			if (!e) {
+				_.value = "", v.value = "";
+				return;
+			}
+			let [t, n] = e.split(":");
+			_.value = t ?? "", v.value = (n ?? "").slice(0, 2);
+		});
+		function y(e) {
+			return Math.max(0, parseInt(e, 10) || 0).toString().padStart(2, "0");
+		}
+		function b() {
+			if (_.value === "" && v.value === "") {
+				c.value = "";
+				return;
+			}
+			c.value = `${y(_.value || "0")}:${y(v.value || "0")}`;
+		}
+		function x(e) {
+			_.value = Math.min(23, Math.max(0, parseInt(String(e ?? ""), 10) || 0)).toString(), b();
+		}
+		function S(e) {
+			v.value = Math.min(59, Math.max(0, parseInt(String(e ?? ""), 10) || 0)).toString(), b();
+		}
+		let C = r(() => {
+			let e = s.minuteStep;
+			return typeof e == "number" && e > 0 ? e : 1;
+		});
+		return (r, s) => (l(), i(d(n), {
+			label: e.label,
+			required: e.required,
+			"hide-label": e.hideLabel,
+			for: e.id,
+			"help-text": e.helpText,
+			errors: e.errors
+		}, {
+			default: m(() => [a("div", {
+				class: "flex items-center gap-2",
+				"data-element-name": e.name ?? void 0
+			}, [
+				o(d(h), { class: "size-4 text-muted-foreground" }),
+				o(d(t), {
+					type: "number",
+					min: "0",
+					max: "23",
+					step: "1",
+					"model-value": _.value,
+					class: "w-20",
+					disabled: e.disabled,
+					readonly: e.readonly,
+					required: e.required,
+					placeholder: "HH",
+					"data-testid": "time-hour",
+					"onUpdate:modelValue": x
+				}, null, 8, [
+					"model-value",
+					"disabled",
+					"readonly",
+					"required"
+				]),
+				s[0] ||= a("span", { class: "text-muted-foreground" }, ":", -1),
+				o(d(t), {
+					type: "number",
+					min: "0",
+					max: "59",
+					step: C.value,
+					"model-value": v.value,
+					class: "w-20",
+					disabled: e.disabled,
+					readonly: e.readonly,
+					required: e.required,
+					placeholder: "MM",
+					"data-testid": "time-minute",
+					"onUpdate:modelValue": S
+				}, null, 8, [
+					"step",
+					"model-value",
+					"disabled",
+					"readonly",
+					"required"
+				])
+			], 8, g)]),
+			_: 1
+		}, 8, [
+			"label",
+			"required",
+			"hide-label",
+			"for",
+			"help-text",
+			"errors"
+		]));
+	}
+}), v = /* @__PURE__ */ e({ default: () => y }), y = _;
+//#endregion
+export { v as n, y as t };
+
+//# sourceMappingURL=TimePicker-C_71cBmo.js.map

package/dist/chunks/TimePicker-C_71cBmo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimePicker-C_71cBmo.js","names":[],"sources":["../../src/components/compositions/elements/picker/TimePicker.vue","../../src/components/compositions/elements/picker/TimePicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven time picker composition. Two numeric inputs (hours /\n * minutes) with a leading clock icon. Round-trips an `HH:mm` string.\n * `minuteStep` is applied to the minute input's `step` attribute.\n *\n *   <TimePicker v-model=\"opensAt\" label=\"Opens at\" />\n */\nimport { computed, ref, watchEffect } from \"vue\"\nimport { Clock } from \"@lucide/vue\"\nimport { Input } from \"@/components/ui/input\"\nimport { FieldFrame } from \"@/components/ui/field-frame\"\n\nexport interface TimePickerProps {\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  minuteStep?: number\n}\n\nconst props = withDefaults(defineProps<TimePickerProps>(), {\n  errors: () => [],\n})\n\nconst model = defineModel<string | null>(\"modelValue\")\n\nconst hour = ref<string>(\"\")\nconst minute = ref<string>(\"\")\n\nwatchEffect(() => {\n  const value = model.value\n  if (!value) {\n    hour.value = \"\"\n    minute.value = \"\"\n    return\n  }\n  const [hh, mm] = value.split(\":\")\n  hour.value = hh ?? \"\"\n  minute.value = (mm ?? \"\").slice(0, 2)\n})\n\nfunction pad(value: string): string {\n  const n = Math.max(0, parseInt(value, 10) || 0)\n  return n.toString().padStart(2, \"0\")\n}\n\nfunction emitCombined(): void {\n  if (hour.value === \"\" && minute.value === \"\") {\n    model.value = \"\"\n    return\n  }\n  model.value = `${pad(hour.value || \"0\")}:${pad(minute.value || \"0\")}`\n}\n\nfunction onHourInput(value: string | number | undefined): void {\n  const next = String(value ?? \"\")\n  const numeric = Math.min(23, Math.max(0, parseInt(next, 10) || 0))\n  hour.value = numeric.toString()\n  emitCombined()\n}\n\nfunction onMinuteInput(value: string | number | undefined): void {\n  const next = String(value ?? \"\")\n  const numeric = Math.min(59, Math.max(0, parseInt(next, 10) || 0))\n  minute.value = numeric.toString()\n  emitCombined()\n}\n\nconst step = computed<number>(() => {\n  const raw = props.minuteStep\n  return typeof raw === \"number\" && raw > 0 ? raw : 1\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\n      class=\"flex items-center gap-2\"\n      :data-element-name=\"name ?? undefined\"\n    >\n      <Clock class=\"size-4 text-muted-foreground\" />\n      <Input\n        type=\"number\"\n        min=\"0\"\n        max=\"23\"\n        step=\"1\"\n        :model-value=\"hour\"\n        class=\"w-20\"\n        :disabled=\"disabled\"\n        :readonly=\"readonly\"\n        :required=\"required\"\n        placeholder=\"HH\"\n        data-testid=\"time-hour\"\n        @update:model-value=\"onHourInput\"\n      />\n      <span class=\"text-muted-foreground\">:</span>\n      <Input\n        type=\"number\"\n        min=\"0\"\n        max=\"59\"\n        :step=\"step\"\n        :model-value=\"minute\"\n        class=\"w-20\"\n        :disabled=\"disabled\"\n        :readonly=\"readonly\"\n        :required=\"required\"\n        placeholder=\"MM\"\n        data-testid=\"time-minute\"\n        @update:model-value=\"onMinuteInput\"\n      />\n    </div>\n  </FieldFrame>\n</template>\n","<script setup lang=\"ts\">\n/**\n * Props-driven time picker composition. Two numeric inputs (hours /\n * minutes) with a leading clock icon. Round-trips an `HH:mm` string.\n * `minuteStep` is applied to the minute input's `step` attribute.\n *\n *   <TimePicker v-model=\"opensAt\" label=\"Opens at\" />\n */\nimport { computed, ref, watchEffect } from \"vue\"\nimport { Clock } from \"@lucide/vue\"\nimport { Input } from \"@/components/ui/input\"\nimport { FieldFrame } from \"@/components/ui/field-frame\"\n\nexport interface TimePickerProps {\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  minuteStep?: number\n}\n\nconst props = withDefaults(defineProps<TimePickerProps>(), {\n  errors: () => [],\n})\n\nconst model = defineModel<string | null>(\"modelValue\")\n\nconst hour = ref<string>(\"\")\nconst minute = ref<string>(\"\")\n\nwatchEffect(() => {\n  const value = model.value\n  if (!value) {\n    hour.value = \"\"\n    minute.value = \"\"\n    return\n  }\n  const [hh, mm] = value.split(\":\")\n  hour.value = hh ?? \"\"\n  minute.value = (mm ?? \"\").slice(0, 2)\n})\n\nfunction pad(value: string): string {\n  const n = Math.max(0, parseInt(value, 10) || 0)\n  return n.toString().padStart(2, \"0\")\n}\n\nfunction emitCombined(): void {\n  if (hour.value === \"\" && minute.value === \"\") {\n    model.value = \"\"\n    return\n  }\n  model.value = `${pad(hour.value || \"0\")}:${pad(minute.value || \"0\")}`\n}\n\nfunction onHourInput(value: string | number | undefined): void {\n  const next = String(value ?? \"\")\n  const numeric = Math.min(23, Math.max(0, parseInt(next, 10) || 0))\n  hour.value = numeric.toString()\n  emitCombined()\n}\n\nfunction onMinuteInput(value: string | number | undefined): void {\n  const next = String(value ?? \"\")\n  const numeric = Math.min(59, Math.max(0, parseInt(next, 10) || 0))\n  minute.value = numeric.toString()\n  emitCombined()\n}\n\nconst step = computed<number>(() => {\n  const raw = props.minuteStep\n  return typeof raw === \"number\" && raw > 0 ? raw : 1\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\n      class=\"flex items-center gap-2\"\n      :data-element-name=\"name ?? undefined\"\n    >\n      <Clock class=\"size-4 text-muted-foreground\" />\n      <Input\n        type=\"number\"\n        min=\"0\"\n        max=\"23\"\n        step=\"1\"\n        :model-value=\"hour\"\n        class=\"w-20\"\n        :disabled=\"disabled\"\n        :readonly=\"readonly\"\n        :required=\"required\"\n        placeholder=\"HH\"\n        data-testid=\"time-hour\"\n        @update:model-value=\"onHourInput\"\n      />\n      <span class=\"text-muted-foreground\">:</span>\n      <Input\n        type=\"number\"\n        min=\"0\"\n        max=\"59\"\n        :step=\"step\"\n        :model-value=\"minute\"\n        class=\"w-20\"\n        :disabled=\"disabled\"\n        :readonly=\"readonly\"\n        :required=\"required\"\n        placeholder=\"MM\"\n        data-testid=\"time-minute\"\n        @update:model-value=\"onMinuteInput\"\n      />\n    </div>\n  </FieldFrame>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;EA2BA,IAAM,IAAQ,GAIR,IAAQ,EAA0B,GAAC,YAAY,GAE/C,IAAO,EAAY,EAAE,GACrB,IAAS,EAAY,EAAE;EAE7B,QAAkB;GAChB,IAAM,IAAQ,EAAM;GACpB,IAAI,CAAC,GAAO;IAEV,AADA,EAAK,QAAQ,IACb,EAAO,QAAQ;IACf;GACF;GACA,IAAM,CAAC,GAAI,KAAM,EAAM,MAAM,GAAG;GAEhC,AADA,EAAK,QAAQ,KAAM,IACnB,EAAO,SAAS,KAAM,IAAI,MAAM,GAAG,CAAC;EACtC,CAAC;EAED,SAAS,EAAI,GAAuB;GAElC,OADU,KAAK,IAAI,GAAG,SAAS,GAAO,EAAE,KAAK,CACtC,EAAE,SAAS,EAAE,SAAS,GAAG,GAAG;EACrC;EAEA,SAAS,IAAqB;GAC5B,IAAI,EAAK,UAAU,MAAM,EAAO,UAAU,IAAI;IAC5C,EAAM,QAAQ;IACd;GACF;GACA,EAAM,QAAQ,GAAG,EAAI,EAAK,SAAS,GAAG,EAAE,GAAG,EAAI,EAAO,SAAS,GAAG;EACpE;EAEA,SAAS,EAAY,GAA0C;GAI7D,AADA,EAAK,QADW,KAAK,IAAI,IAAI,KAAK,IAAI,GAAG,SAD5B,OAAO,KAAS,EACqB,GAAM,EAAE,KAAK,CAAC,CACnD,EAAQ,SAAS,GAC9B,EAAa;EACf;EAEA,SAAS,EAAc,GAA0C;GAI/D,AADA,EAAO,QADS,KAAK,IAAI,IAAI,KAAK,IAAI,GAAG,SAD5B,OAAO,KAAS,EACqB,GAAM,EAAE,KAAK,CAAC,CACjD,EAAQ,SAAS,GAChC,EAAa;EACf;EAEA,IAAM,IAAO,QAAuB;GAClC,IAAM,IAAM,EAAM;GAClB,OAAO,OAAO,KAAQ,YAAY,IAAM,IAAI,IAAM;EACpD,CAAC;yBAIC,EA2Ca,EAAA,CAAA,GAAA;GA1CV,OAAO,EAAA;GACP,UAAU,EAAA;GACV,cAAY,EAAA;GACZ,KAAK,EAAA;GACL,aAAW,EAAA;GACX,QAAQ,EAAA;;oBAoCH,CAlCN,EAkCM,OAAA;IAjCJ,OAAM;IACL,qBAAmB,EAAA,QAAQ,KAAA;;IAE5B,EAA8C,EAAA,CAAA,GAAA,EAAvC,OAAM,+BAA8B,CAAA;IAC3C,EAaE,EAAA,CAAA,GAAA;KAZA,MAAK;KACL,KAAI;KACJ,KAAI;KACJ,MAAK;KACJ,eAAa,EAAA;KACd,OAAM;KACL,UAAU,EAAA;KACV,UAAU,EAAA;KACV,UAAU,EAAA;KACX,aAAY;KACZ,eAAY;KACX,uBAAoB;;;;;;;aAEvB,EAA4C,QAAA,EAAtC,OAAM,wBAAuB,GAAC,KAAC,EAAA;IACrC,EAaE,EAAA,CAAA,GAAA;KAZA,MAAK;KACL,KAAI;KACJ,KAAI;KACH,MAAM,EAAA;KACN,eAAa,EAAA;KACd,OAAM;KACL,UAAU,EAAA;KACV,UAAU,EAAA;KACV,UAAU,EAAA;KACX,aAAY;KACZ,eAAY;KACX,uBAAoB"}