@gxp-dev/mod-ui 2.0.8 → 2.0.12

package/dist/components/compositions/elements/picker/DatePicker.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,136 @@
+import { cn as e } from "../../../../lib/utils.js";
+import t from "../../../ui/button/Button.js";
+import "../../../ui/button/index.js";
+import n from "../../../ui/calendar/Calendar.js";
+import "../../../ui/calendar/index.js";
+import r from "../../../ui/popover/Popover.js";
+import i from "../../../ui/popover/PopoverContent.js";
+import a from "../../../ui/popover/PopoverTrigger.js";
+import "../../../ui/popover/index.js";
+import o from "../../../ui/field-frame/FieldFrame.js";
+import "../../../ui/field-frame/index.js";
+import { computed as s, createBlock as c, createElementVNode as l, createVNode as u, defineComponent as d, mergeModels as f, normalizeClass as p, openBlock as m, ref as h, toDisplayString as g, unref as _, useModel as v, withCtx as y } from "vue";
+import { Calendar as b } from "@lucide/vue";
+import { CalendarDate as x, parseDate as S } from "@internationalized/date";
+//#region src/components/compositions/elements/picker/DatePicker.vue?vue&type=script&setup=true&lang.ts
+var C = /* @__PURE__ */ d({
+	__name: "DatePicker",
+	props: /* @__PURE__ */ f({
+		modelValue: {},
+		id: {},
+		name: {},
+		label: {},
+		hideLabel: { type: Boolean },
+		placeholder: {},
+		required: { type: Boolean },
+		readonly: { type: Boolean },
+		disabled: { type: Boolean },
+		helpText: {},
+		errors: { default: () => [] },
+		minDate: {},
+		maxDate: {},
+		format: {}
+	}, {
+		modelValue: {},
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(d) {
+		let f = d, C = v(d, "modelValue"), w = h(!1), T = s(() => {
+			let e = C.value;
+			if (e) return k(e);
+		}), E = s(() => f.minDate ? k(f.minDate) : void 0), D = s(() => f.maxDate ? k(f.maxDate) : void 0), O = s(() => {
+			let e = C.value;
+			return e ? A(e, f.format) : "";
+		});
+		function k(e) {
+			try {
+				return S(e.includes("T") ? e.slice(0, 10) : e);
+			} catch {
+				return;
+			}
+		}
+		function A(e, t) {
+			let n = k(e);
+			if (!n) return e;
+			if (!t || t === "yyyy-MM-dd") return n.toString();
+			let r = new Date(n.year, n.month - 1, n.day);
+			try {
+				return new Intl.DateTimeFormat(void 0, {
+					year: "numeric",
+					month: "short",
+					day: "2-digit"
+				}).format(r);
+			} catch {
+				return n.toString();
+			}
+		}
+		function j(e) {
+			if (!e) {
+				C.value = null;
+				return;
+			}
+			C.value = (e instanceof x ? e : new x(e.year, e.month, e.day)).toString(), w.value = !1;
+		}
+		return (s, f) => (m(), c(_(o), {
+			label: d.label,
+			required: d.required,
+			"hide-label": d.hideLabel,
+			for: d.id,
+			"help-text": d.helpText,
+			errors: d.errors
+		}, {
+			default: y(() => [u(_(r), {
+				open: w.value,
+				"onUpdate:open": f[0] ||= (e) => w.value = e
+			}, {
+				default: y(() => [u(_(a), { "as-child": "" }, {
+					default: y(() => [u(_(t), {
+						type: "button",
+						variant: "outline",
+						disabled: d.disabled,
+						class: p(_(e)("w-full justify-start text-left font-normal", !C.value && "text-muted-foreground")),
+						"data-element-name": d.name ?? void 0,
+						"data-readonly": d.readonly || void 0
+					}, {
+						default: y(() => [u(_(b), { class: "mr-2 size-4" }), l("span", null, g(O.value || d.placeholder || "Pick a date"), 1)]),
+						_: 1
+					}, 8, [
+						"disabled",
+						"class",
+						"data-element-name",
+						"data-readonly"
+					])]),
+					_: 1
+				}), u(_(i), { class: "w-auto p-0" }, {
+					default: y(() => [u(_(n), {
+						"model-value": T.value,
+						"min-value": E.value,
+						"max-value": D.value,
+						placeholder: T.value ?? E.value ?? D.value,
+						"onUpdate:modelValue": j
+					}, null, 8, [
+						"model-value",
+						"min-value",
+						"max-value",
+						"placeholder"
+					])]),
+					_: 1
+				})]),
+				_: 1
+			}, 8, ["open"])]),
+			_: 1
+		}, 8, [
+			"label",
+			"required",
+			"hide-label",
+			"for",
+			"help-text",
+			"errors"
+		]));
+	}
+});
+//#endregion
+export { C as default };
+
+//# sourceMappingURL=DatePicker.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/compositions/elements/picker/DatePicker.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../src/components/compositions/elements/picker/DatePicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven date picker composition. Popover trigger Button shows the\n * formatted current date; the popover hosts the shadcn `Calendar`.\n * Values round-trip as ISO date strings (`yyyy-MM-dd` by default).\n *\n *   <DatePicker v-model=\"startsAt\" label=\"Starts at\" />\n *\n * Self-contained — no Pinia / store coupling. Composes `FieldFrame` for\n * label / helpText / errors chrome.\n */\nimport { computed, ref } from \"vue\"\nimport { Calendar as CalendarIcon } from \"@lucide/vue\"\nimport {\n  CalendarDate,\n  parseDate,\n  type DateValue,\n} from \"@internationalized/date\"\nimport { Button } from \"@/components/ui/button\"\nimport { Calendar } from \"@/components/ui/calendar\"\nimport { FieldFrame } from \"@/components/ui/field-frame\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/components/ui/popover\"\nimport { cn } from \"@/lib/utils\"\n\nexport interface DatePickerProps {\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  /** ISO date string, e.g. \"2024-06-10\" */\n  minDate?: string\n  /** ISO date string, e.g. \"2024-06-25\" */\n  maxDate?: string\n  /** Display format. Default `yyyy-MM-dd`. */\n  format?: string\n}\n\nconst props = withDefaults(defineProps<DatePickerProps>(), {\n  errors: () => [],\n})\n\nconst model = defineModel<string | null>(\"modelValue\")\n\nconst open = ref(false)\n\nconst calendarValue = computed<DateValue | undefined>(() => {\n  const iso = model.value\n  if (!iso) {\n    return undefined\n  }\n  return safeParseDate(iso)\n})\n\nconst min = computed<DateValue | undefined>(() =>\n  props.minDate ? safeParseDate(props.minDate) : undefined,\n)\n\nconst max = computed<DateValue | undefined>(() =>\n  props.maxDate ? safeParseDate(props.maxDate) : undefined,\n)\n\nconst displayValue = computed<string>(() => {\n  const iso = model.value\n  if (!iso) {\n    return \"\"\n  }\n  return formatDate(iso, props.format)\n})\n\nfunction safeParseDate(value: string): DateValue | undefined {\n  try {\n    // Accept full ISO datetime (\"2024-06-15T00:00:00Z\") or date-only.\n    const dateOnly = value.includes(\"T\") ? value.slice(0, 10) : value\n    return parseDate(dateOnly)\n  } catch {\n    return undefined\n  }\n}\n\nfunction formatDate(iso: string, format?: string): string {\n  const parsed = safeParseDate(iso)\n  if (!parsed) {\n    return iso\n  }\n  if (!format || format === \"yyyy-MM-dd\") {\n    return parsed.toString()\n  }\n  const date = new Date(parsed.year, parsed.month - 1, parsed.day)\n  try {\n    return new Intl.DateTimeFormat(undefined, {\n      year: \"numeric\",\n      month: \"short\",\n      day: \"2-digit\",\n    }).format(date)\n  } catch {\n    return parsed.toString()\n  }\n}\n\nfunction onSelect(value: DateValue | undefined): void {\n  if (!value) {\n    model.value = null\n    return\n  }\n  const calendar =\n    value instanceof CalendarDate\n      ? value\n      : new CalendarDate(value.year, value.month, value.day)\n  model.value = calendar.toString()\n  open.value = false\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    <Popover v-model:open=\"open\">\n      <PopoverTrigger as-child>\n        <Button\n          type=\"button\"\n          variant=\"outline\"\n          :disabled=\"disabled\"\n          :class=\"\n            cn(\n              'w-full justify-start text-left font-normal',\n              !model && 'text-muted-foreground',\n            )\n          \"\n          :data-element-name=\"name ?? undefined\"\n          :data-readonly=\"readonly || undefined\"\n        >\n          <CalendarIcon class=\"mr-2 size-4\" />\n          <span>{{ displayValue || placeholder || \"Pick a date\" }}</span>\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent class=\"w-auto p-0\">\n        <Calendar\n          :model-value=\"calendarValue\"\n          :min-value=\"min\"\n          :max-value=\"max\"\n          :placeholder=\"calendarValue ?? min ?? max\"\n          @update:model-value=\"onSelect\"\n        />\n      </PopoverContent>\n    </Popover>\n  </FieldFrame>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgDA,IAAM,IAAQ,GAIR,IAAQ,EAA0B,GAAC,YAAY,GAE/C,IAAO,EAAI,EAAK,GAEhB,IAAgB,QAAsC;GAC1D,IAAM,IAAM,EAAM;GACb,OAGL,OAAO,EAAc,CAAG;EAC1B,CAAC,GAEK,IAAM,QACV,EAAM,UAAU,EAAc,EAAM,OAAO,IAAI,KAAA,CACjD,GAEM,IAAM,QACV,EAAM,UAAU,EAAc,EAAM,OAAO,IAAI,KAAA,CACjD,GAEM,IAAe,QAAuB;GAC1C,IAAM,IAAM,EAAM;GAIlB,OAHK,IAGE,EAAW,GAAK,EAAM,MAAM,IAF1B;EAGX,CAAC;EAED,SAAS,EAAc,GAAsC;GAC3D,IAAI;IAGF,OAAO,EADU,EAAM,SAAS,GAAG,IAAI,EAAM,MAAM,GAAG,EAAE,IAAI,CACnC;GAC3B,QAAQ;IACN;GACF;EACF;EAEA,SAAS,EAAW,GAAa,GAAyB;GACxD,IAAM,IAAS,EAAc,CAAG;GAChC,IAAI,CAAC,GACH,OAAO;GAET,IAAI,CAAC,KAAU,MAAW,cACxB,OAAO,EAAO,SAAS;GAEzB,IAAM,IAAO,IAAI,KAAK,EAAO,MAAM,EAAO,QAAQ,GAAG,EAAO,GAAG;GAC/D,IAAI;IACF,OAAO,IAAI,KAAK,eAAe,KAAA,GAAW;KACxC,MAAM;KACN,OAAO;KACP,KAAK;IACP,CAAC,EAAE,OAAO,CAAI;GAChB,QAAQ;IACN,OAAO,EAAO,SAAS;GACzB;EACF;EAEA,SAAS,EAAS,GAAoC;GACpD,IAAI,CAAC,GAAO;IACV,EAAM,QAAQ;IACd;GACF;GAMA,AADA,EAAM,SAHJ,aAAiB,IACb,IACA,IAAI,EAAa,EAAM,MAAM,EAAM,OAAO,EAAM,GAAG,GAClC,SAAS,GAChC,EAAK,QAAQ;EACf;yBAIE,EAqCa,EAAA,CAAA,GAAA;GApCV,OAAO,EAAA;GACP,UAAU,EAAA;GACV,cAAY,EAAA;GACZ,KAAK,EAAA;GACL,aAAW,EAAA;GACX,QAAQ,EAAA;;oBA8BC,CA5BV,EA4BU,EAAA,CAAA,GAAA;IA5BO,MAAM,EAAA;uCAAI,QAAA;;qBAkBR,CAjBjB,EAiBiB,EAAA,CAAA,GAAA,EAjBD,YAAA,GAAQ,GAAA;sBAgBb,CAfT,EAeS,EAAA,CAAA,GAAA;MAdP,MAAK;MACL,SAAQ;MACP,UAAU,EAAA;MACV,OAAK,EAAe,EAAA,CAAA,EAAA,8CAAA,CAA+E,EAAA,SAAK,uBAAA,CAAA;MAMxG,qBAAmB,EAAA,QAAQ,KAAA;MAC3B,iBAAe,EAAA,YAAY,KAAA;;uBAEQ,CAApC,EAAoC,EAAA,CAAA,GAAA,EAAtB,OAAM,cAAa,CAAA,GACjC,EAA+D,QAAA,MAAA,EAAtD,EAAA,SAAgB,EAAA,eAAW,aAAA,GAAA,CAAA,CAAA,CAAA;;;;;;;;;QAGxC,EAQiB,EAAA,CAAA,GAAA,EARD,OAAM,aAAY,GAAA;sBAO9B,CANF,EAME,EAAA,CAAA,GAAA;MALC,eAAa,EAAA;MACb,aAAW,EAAA;MACX,aAAW,EAAA;MACX,aAAa,EAAA,SAAiB,EAAA,SAAO,EAAA;MACrC,uBAAoB"}

package/dist/components/compositions/elements/picker/DateTimePicker.js

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

package/dist/components/compositions/elements/picker/DateTimePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateTimePicker.js","names":[],"sources":["../../../../../src/components/compositions/elements/picker/DateTimePicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven date+time picker composition. DatePicker-style Popover\n * (Calendar) plus two numeric inputs for hour/minute. Round-trips ISO\n * 8601 (e.g. `2024-06-15T13:30:00`). When only the date half is set the\n * value falls back to a date-only ISO string.\n *\n *   <DateTimePicker v-model=\"when\" label=\"Starts at\" />\n */\nimport { computed, ref, watchEffect } from \"vue\"\nimport { Calendar as CalendarIcon, Clock } from \"@lucide/vue\"\nimport {\n  CalendarDate,\n  parseDate,\n  type DateValue,\n} from \"@internationalized/date\"\nimport { Button } from \"@/components/ui/button\"\nimport { Calendar } from \"@/components/ui/calendar\"\nimport { Input } from \"@/components/ui/input\"\nimport { FieldFrame } from \"@/components/ui/field-frame\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/components/ui/popover\"\nimport { cn } from \"@/lib/utils\"\n\nexport interface DateTimePickerProps {\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<DateTimePickerProps>(), {\n  errors: () => [],\n})\n\nconst model = defineModel<string | null>(\"modelValue\")\n\nconst datePart = ref<string>(\"\")\nconst hourPart = ref<string>(\"\")\nconst minutePart = ref<string>(\"\")\n\nwatchEffect(() => {\n  const iso = model.value\n  if (!iso) {\n    datePart.value = \"\"\n    hourPart.value = \"\"\n    minutePart.value = \"\"\n    return\n  }\n  const [d, t] = iso.split(\"T\")\n  datePart.value = d ?? \"\"\n  if (t) {\n    const [hh, mm] = t.split(\":\")\n    hourPart.value = hh ?? \"\"\n    minutePart.value = (mm ?? \"\").slice(0, 2)\n  } else {\n    hourPart.value = \"\"\n    minutePart.value = \"\"\n  }\n})\n\nconst open = ref(false)\n\nconst calendarValue = computed<DateValue | undefined>(() => {\n  if (!datePart.value) {\n    return undefined\n  }\n  try {\n    return parseDate(datePart.value)\n  } catch {\n    return undefined\n  }\n})\n\nfunction emitCombined(): void {\n  if (!datePart.value) {\n    model.value = null\n    return\n  }\n  if (hourPart.value === \"\" && minutePart.value === \"\") {\n    model.value = datePart.value\n    return\n  }\n  const hh = padTwo(hourPart.value || \"0\")\n  const mm = padTwo(minutePart.value || \"0\")\n  model.value = `${datePart.value}T${hh}:${mm}:00`\n}\n\nfunction padTwo(value: string): string {\n  const n = Math.max(0, parseInt(value, 10) || 0)\n  return n.toString().padStart(2, \"0\")\n}\n\nfunction onDateSelected(value: DateValue | undefined): void {\n  if (!value) {\n    datePart.value = \"\"\n    emitCombined()\n    return\n  }\n  const calendar =\n    value instanceof CalendarDate\n      ? value\n      : new CalendarDate(value.year, value.month, value.day)\n  datePart.value = calendar.toString()\n  emitCombined()\n  open.value = false\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  hourPart.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  minutePart.value = numeric.toString()\n  emitCombined()\n}\n\nconst displayValue = computed<string>(() => {\n  if (!datePart.value) {\n    return \"\"\n  }\n  if (hourPart.value === \"\" && minutePart.value === \"\") {\n    return datePart.value\n  }\n  return `${datePart.value} ${padTwo(hourPart.value || \"0\")}:${padTwo(minutePart.value || \"0\")}`\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    <Popover v-model:open=\"open\">\n      <PopoverTrigger as-child>\n        <Button\n          type=\"button\"\n          variant=\"outline\"\n          :disabled=\"disabled\"\n          :class=\"\n            cn(\n              'w-full justify-start text-left font-normal',\n              !displayValue && 'text-muted-foreground',\n            )\n          \"\n          :data-element-name=\"name ?? undefined\"\n          :data-readonly=\"readonly || undefined\"\n        >\n          <CalendarIcon class=\"mr-2 size-4\" />\n          <span>{{ displayValue || placeholder || \"Pick a date & time\" }}</span>\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent class=\"w-auto p-0\">\n        <Calendar\n          :model-value=\"calendarValue\"\n          :placeholder=\"calendarValue\"\n          @update:model-value=\"onDateSelected\"\n        />\n        <div class=\"flex items-center gap-2 border-t p-3\">\n          <Clock class=\"size-4 text-muted-foreground\" />\n          <Input\n            type=\"number\"\n            min=\"0\"\n            max=\"23\"\n            :model-value=\"hourPart\"\n            class=\"w-16\"\n            :disabled=\"disabled\"\n            placeholder=\"HH\"\n            data-testid=\"datetime-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            :model-value=\"minutePart\"\n            class=\"w-16\"\n            :disabled=\"disabled\"\n            placeholder=\"MM\"\n            data-testid=\"datetime-minute\"\n            @update:model-value=\"onMinuteInput\"\n          />\n        </div>\n      </PopoverContent>\n    </Popover>\n  </FieldFrame>\n</template>\n"],"mappings":""}

package/dist/components/compositions/elements/picker/DateTimePicker.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,166 @@
+import { cn as e } from "../../../../lib/utils.js";
+import t from "../../../ui/button/Button.js";
+import "../../../ui/button/index.js";
+import n from "../../../ui/calendar/Calendar.js";
+import "../../../ui/calendar/index.js";
+import r from "../../../ui/input/Input.js";
+import "../../../ui/input/index.js";
+import i from "../../../ui/popover/Popover.js";
+import a from "../../../ui/popover/PopoverContent.js";
+import o from "../../../ui/popover/PopoverTrigger.js";
+import "../../../ui/popover/index.js";
+import s from "../../../ui/field-frame/FieldFrame.js";
+import "../../../ui/field-frame/index.js";
+import { computed as c, createBlock as l, createElementVNode as u, createVNode as d, defineComponent as f, mergeModels as p, normalizeClass as m, openBlock as h, ref as g, toDisplayString as _, unref as v, useModel as y, watchEffect as b, withCtx as x } from "vue";
+import { Calendar as S, Clock as C } from "@lucide/vue";
+import { CalendarDate as w, parseDate as T } from "@internationalized/date";
+//#region src/components/compositions/elements/picker/DateTimePicker.vue?vue&type=script&setup=true&lang.ts
+var E = { class: "flex items-center gap-2 border-t p-3" }, D = /* @__PURE__ */ f({
+	__name: "DateTimePicker",
+	props: /* @__PURE__ */ p({
+		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(f) {
+		let p = y(f, "modelValue"), D = g(""), O = g(""), k = g("");
+		b(() => {
+			let e = p.value;
+			if (!e) {
+				D.value = "", O.value = "", k.value = "";
+				return;
+			}
+			let [t, n] = e.split("T");
+			if (D.value = t ?? "", n) {
+				let [e, t] = n.split(":");
+				O.value = e ?? "", k.value = (t ?? "").slice(0, 2);
+			} else O.value = "", k.value = "";
+		});
+		let A = g(!1), j = c(() => {
+			if (D.value) try {
+				return T(D.value);
+			} catch {
+				return;
+			}
+		});
+		function M() {
+			if (!D.value) {
+				p.value = null;
+				return;
+			}
+			if (O.value === "" && k.value === "") {
+				p.value = D.value;
+				return;
+			}
+			let e = N(O.value || "0"), t = N(k.value || "0");
+			p.value = `${D.value}T${e}:${t}:00`;
+		}
+		function N(e) {
+			return Math.max(0, parseInt(e, 10) || 0).toString().padStart(2, "0");
+		}
+		function P(e) {
+			if (!e) {
+				D.value = "", M();
+				return;
+			}
+			D.value = (e instanceof w ? e : new w(e.year, e.month, e.day)).toString(), M(), A.value = !1;
+		}
+		function F(e) {
+			O.value = Math.min(23, Math.max(0, parseInt(String(e ?? ""), 10) || 0)).toString(), M();
+		}
+		function I(e) {
+			k.value = Math.min(59, Math.max(0, parseInt(String(e ?? ""), 10) || 0)).toString(), M();
+		}
+		let L = c(() => D.value ? O.value === "" && k.value === "" ? D.value : `${D.value} ${N(O.value || "0")}:${N(k.value || "0")}` : "");
+		return (c, p) => (h(), l(v(s), {
+			label: f.label,
+			required: f.required,
+			"hide-label": f.hideLabel,
+			for: f.id,
+			"help-text": f.helpText,
+			errors: f.errors
+		}, {
+			default: x(() => [d(v(i), {
+				open: A.value,
+				"onUpdate:open": p[0] ||= (e) => A.value = e
+			}, {
+				default: x(() => [d(v(o), { "as-child": "" }, {
+					default: x(() => [d(v(t), {
+						type: "button",
+						variant: "outline",
+						disabled: f.disabled,
+						class: m(v(e)("w-full justify-start text-left font-normal", !L.value && "text-muted-foreground")),
+						"data-element-name": f.name ?? void 0,
+						"data-readonly": f.readonly || void 0
+					}, {
+						default: x(() => [d(v(S), { class: "mr-2 size-4" }), u("span", null, _(L.value || f.placeholder || "Pick a date & time"), 1)]),
+						_: 1
+					}, 8, [
+						"disabled",
+						"class",
+						"data-element-name",
+						"data-readonly"
+					])]),
+					_: 1
+				}), d(v(a), { class: "w-auto p-0" }, {
+					default: x(() => [d(v(n), {
+						"model-value": j.value,
+						placeholder: j.value,
+						"onUpdate:modelValue": P
+					}, null, 8, ["model-value", "placeholder"]), u("div", E, [
+						d(v(C), { class: "size-4 text-muted-foreground" }),
+						d(v(r), {
+							type: "number",
+							min: "0",
+							max: "23",
+							"model-value": O.value,
+							class: "w-16",
+							disabled: f.disabled,
+							placeholder: "HH",
+							"data-testid": "datetime-hour",
+							"onUpdate:modelValue": F
+						}, null, 8, ["model-value", "disabled"]),
+						p[1] ||= u("span", { class: "text-muted-foreground" }, ":", -1),
+						d(v(r), {
+							type: "number",
+							min: "0",
+							max: "59",
+							"model-value": k.value,
+							class: "w-16",
+							disabled: f.disabled,
+							placeholder: "MM",
+							"data-testid": "datetime-minute",
+							"onUpdate:modelValue": I
+						}, null, 8, ["model-value", "disabled"])
+					])]),
+					_: 1
+				})]),
+				_: 1
+			}, 8, ["open"])]),
+			_: 1
+		}, 8, [
+			"label",
+			"required",
+			"hide-label",
+			"for",
+			"help-text",
+			"errors"
+		]));
+	}
+});
+//#endregion
+export { D as default };
+
+//# sourceMappingURL=DateTimePicker.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/compositions/elements/picker/DateTimePicker.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateTimePicker.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../src/components/compositions/elements/picker/DateTimePicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven date+time picker composition. DatePicker-style Popover\n * (Calendar) plus two numeric inputs for hour/minute. Round-trips ISO\n * 8601 (e.g. `2024-06-15T13:30:00`). When only the date half is set the\n * value falls back to a date-only ISO string.\n *\n *   <DateTimePicker v-model=\"when\" label=\"Starts at\" />\n */\nimport { computed, ref, watchEffect } from \"vue\"\nimport { Calendar as CalendarIcon, Clock } from \"@lucide/vue\"\nimport {\n  CalendarDate,\n  parseDate,\n  type DateValue,\n} from \"@internationalized/date\"\nimport { Button } from \"@/components/ui/button\"\nimport { Calendar } from \"@/components/ui/calendar\"\nimport { Input } from \"@/components/ui/input\"\nimport { FieldFrame } from \"@/components/ui/field-frame\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/components/ui/popover\"\nimport { cn } from \"@/lib/utils\"\n\nexport interface DateTimePickerProps {\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<DateTimePickerProps>(), {\n  errors: () => [],\n})\n\nconst model = defineModel<string | null>(\"modelValue\")\n\nconst datePart = ref<string>(\"\")\nconst hourPart = ref<string>(\"\")\nconst minutePart = ref<string>(\"\")\n\nwatchEffect(() => {\n  const iso = model.value\n  if (!iso) {\n    datePart.value = \"\"\n    hourPart.value = \"\"\n    minutePart.value = \"\"\n    return\n  }\n  const [d, t] = iso.split(\"T\")\n  datePart.value = d ?? \"\"\n  if (t) {\n    const [hh, mm] = t.split(\":\")\n    hourPart.value = hh ?? \"\"\n    minutePart.value = (mm ?? \"\").slice(0, 2)\n  } else {\n    hourPart.value = \"\"\n    minutePart.value = \"\"\n  }\n})\n\nconst open = ref(false)\n\nconst calendarValue = computed<DateValue | undefined>(() => {\n  if (!datePart.value) {\n    return undefined\n  }\n  try {\n    return parseDate(datePart.value)\n  } catch {\n    return undefined\n  }\n})\n\nfunction emitCombined(): void {\n  if (!datePart.value) {\n    model.value = null\n    return\n  }\n  if (hourPart.value === \"\" && minutePart.value === \"\") {\n    model.value = datePart.value\n    return\n  }\n  const hh = padTwo(hourPart.value || \"0\")\n  const mm = padTwo(minutePart.value || \"0\")\n  model.value = `${datePart.value}T${hh}:${mm}:00`\n}\n\nfunction padTwo(value: string): string {\n  const n = Math.max(0, parseInt(value, 10) || 0)\n  return n.toString().padStart(2, \"0\")\n}\n\nfunction onDateSelected(value: DateValue | undefined): void {\n  if (!value) {\n    datePart.value = \"\"\n    emitCombined()\n    return\n  }\n  const calendar =\n    value instanceof CalendarDate\n      ? value\n      : new CalendarDate(value.year, value.month, value.day)\n  datePart.value = calendar.toString()\n  emitCombined()\n  open.value = false\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  hourPart.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  minutePart.value = numeric.toString()\n  emitCombined()\n}\n\nconst displayValue = computed<string>(() => {\n  if (!datePart.value) {\n    return \"\"\n  }\n  if (hourPart.value === \"\" && minutePart.value === \"\") {\n    return datePart.value\n  }\n  return `${datePart.value} ${padTwo(hourPart.value || \"0\")}:${padTwo(minutePart.value || \"0\")}`\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    <Popover v-model:open=\"open\">\n      <PopoverTrigger as-child>\n        <Button\n          type=\"button\"\n          variant=\"outline\"\n          :disabled=\"disabled\"\n          :class=\"\n            cn(\n              'w-full justify-start text-left font-normal',\n              !displayValue && 'text-muted-foreground',\n            )\n          \"\n          :data-element-name=\"name ?? undefined\"\n          :data-readonly=\"readonly || undefined\"\n        >\n          <CalendarIcon class=\"mr-2 size-4\" />\n          <span>{{ displayValue || placeholder || \"Pick a date & time\" }}</span>\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent class=\"w-auto p-0\">\n        <Calendar\n          :model-value=\"calendarValue\"\n          :placeholder=\"calendarValue\"\n          @update:model-value=\"onDateSelected\"\n        />\n        <div class=\"flex items-center gap-2 border-t p-3\">\n          <Clock class=\"size-4 text-muted-foreground\" />\n          <Input\n            type=\"number\"\n            min=\"0\"\n            max=\"23\"\n            :model-value=\"hourPart\"\n            class=\"w-16\"\n            :disabled=\"disabled\"\n            placeholder=\"HH\"\n            data-testid=\"datetime-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            :model-value=\"minutePart\"\n            class=\"w-16\"\n            :disabled=\"disabled\"\n            placeholder=\"MM\"\n            data-testid=\"datetime-minute\"\n            @update:model-value=\"onMinuteInput\"\n          />\n        </div>\n      </PopoverContent>\n    </Popover>\n  </FieldFrame>\n</template>\n"],"mappings":"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"}

package/dist/components/compositions/elements/picker/IconPicker.js

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

package/dist/components/compositions/elements/picker/IconPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconPicker.js","names":[],"sources":["../../../../../src/components/compositions/elements/picker/IconPicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven icon picker composition. Searchable combobox over a\n * curated subset of lucide icon names. The selected value is the icon's\n * PascalCase name (e.g. `\"Calendar\"`); the currently-selected icon is\n * rendered as a live preview alongside the combobox input.\n *\n *   <IconPicker v-model=\"icon\" label=\"Icon\" />\n */\nimport { computed, h, ref } from \"vue\"\nimport * as LucideIcons from \"@lucide/vue\"\nimport type { Component } from \"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 IconPickerProps {\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<IconPickerProps>(), {\n  errors: () => [],\n})\n\nconst model = defineModel<string | null>(\"modelValue\")\n\nconst query = ref<string>(\"\")\n\n/**\n * A small curated subset of lucide icon names. We don't enumerate the\n * whole 1.4k+ set because we render the preview component eagerly and\n * Storybook bundles every story.\n */\nconst ICON_NAMES = [\n  \"Activity\",\n  \"AlertCircle\",\n  \"Archive\",\n  \"Bell\",\n  \"Bookmark\",\n  \"Briefcase\",\n  \"Calendar\",\n  \"Camera\",\n  \"Check\",\n  \"ChevronRight\",\n  \"Clock\",\n  \"Cloud\",\n  \"Code\",\n  \"Copy\",\n  \"Database\",\n  \"Download\",\n  \"Edit\",\n  \"Eye\",\n  \"Facebook\",\n  \"File\",\n  \"FileText\",\n  \"Filter\",\n  \"Flag\",\n  \"Folder\",\n  \"Gift\",\n  \"Globe\",\n  \"Heart\",\n  \"Home\",\n  \"Image\",\n  \"Inbox\",\n  \"Info\",\n  \"Layers\",\n  \"Link\",\n  \"Lock\",\n  \"LogIn\",\n  \"LogOut\",\n  \"Mail\",\n  \"MapPin\",\n  \"Menu\",\n  \"MessageSquare\",\n  \"Mic\",\n  \"Monitor\",\n  \"Moon\",\n  \"Music\",\n  \"Paperclip\",\n  \"Pause\",\n  \"Phone\",\n  \"PieChart\",\n  \"Play\",\n  \"Plus\",\n  \"Power\",\n  \"Printer\",\n  \"RefreshCw\",\n  \"Save\",\n  \"Search\",\n  \"Send\",\n  \"Settings\",\n  \"Share\",\n  \"ShieldCheck\",\n  \"ShoppingCart\",\n  \"Star\",\n  \"Sun\",\n  \"Tag\",\n  \"Trash\",\n  \"Twitter\",\n  \"Upload\",\n  \"User\",\n  \"Video\",\n  \"Wifi\",\n  \"Wrench\",\n  \"X\",\n  \"Zap\",\n] as const\n\nconst filtered = computed<readonly string[]>(() => {\n  const q = query.value.trim().toLowerCase()\n  if (!q) {\n    return ICON_NAMES\n  }\n  return ICON_NAMES.filter((name) => name.toLowerCase().includes(q))\n})\n\nfunction resolveIcon(name: string): Component | undefined {\n  if (!name) {\n    return undefined\n  }\n  const registry = LucideIcons as unknown as Record<\n    string,\n    Component | undefined\n  >\n  return registry[name]\n}\n\nconst previewIcon = computed<Component | undefined>(() =>\n  resolveIcon(model.value ?? \"\"),\n)\n\nfunction renderIcon(name: string) {\n  const icon = resolveIcon(name)\n  return icon ? h(icon, { class: \"size-4\" }) : null\n}\n\nfunction onSelect(value: unknown): void {\n  model.value = typeof value === \"string\" ? value : \"\"\n}\n</script>\n\n<template>\n  <FieldFrame\n    :label=\"label\"\n    :required=\"required\"\n    :hide-label=\"hideLabel\"\n    :for=\"id\"\n    :help-text=\"helpText\"\n    :errors=\"errors\"\n  >\n    <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        <component\n          :is=\"previewIcon\"\n          v-if=\"previewIcon\"\n          class=\"mr-2 size-4 shrink-0\"\n          data-testid=\"icon-preview\"\n        />\n        <ComboboxInput\n          v-model=\"query\"\n          :placeholder=\"placeholder ?? 'Search icons…'\"\n          :readonly=\"readonly\"\n          :required=\"required\"\n        />\n      </ComboboxAnchor>\n      <ComboboxContent>\n        <ComboboxEmpty>No icons match.</ComboboxEmpty>\n        <ComboboxItem v-for=\"iconName in filtered\" :key=\"iconName\" :value=\"iconName\">\n          <ComboboxItemIndicator />\n          <component :is=\"renderIcon(iconName)\" />\n          <span class=\"ml-2\">{{ iconName }}</span>\n        </ComboboxItem>\n      </ComboboxContent>\n    </Combobox>\n  </FieldFrame>\n</template>\n"],"mappings":""}

package/dist/components/compositions/elements/picker/IconPicker.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,116 @@
+import e from "../../../ui/combobox/Combobox.js";
+import t from "../../../ui/combobox/ComboboxAnchor.js";
+import n from "../../../ui/combobox/ComboboxContent.js";
+import r from "../../../ui/combobox/ComboboxEmpty.js";
+import i from "../../../ui/combobox/ComboboxInput.js";
+import a from "../../../ui/combobox/ComboboxItem.js";
+import o from "../../../ui/combobox/ComboboxItemIndicator.js";
+import "../../../ui/combobox/index.js";
+import s from "../../../ui/field-frame/FieldFrame.js";
+import "../../../ui/field-frame/index.js";
+import { Fragment as c, computed as l, createBlock as u, createCommentVNode as d, createElementBlock as f, createElementVNode as p, createTextVNode as m, createVNode as h, defineComponent as g, h as _, mergeModels as v, openBlock as y, ref as b, renderList as x, resolveDynamicComponent as S, toDisplayString as C, unref as w, useModel as T, withCtx as E } from "vue";
+import * as D from "@lucide/vue";
+//#region src/components/compositions/elements/picker/IconPicker.vue?vue&type=script&setup=true&lang.ts
+var O = { class: "ml-2" }, k = /* @__PURE__ */ g({
+	__name: "IconPicker",
+	props: /* @__PURE__ */ v({
+		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(g) {
+		let v = T(g, "modelValue"), k = b(""), A = /* @__PURE__ */ "Activity.AlertCircle.Archive.Bell.Bookmark.Briefcase.Calendar.Camera.Check.ChevronRight.Clock.Cloud.Code.Copy.Database.Download.Edit.Eye.Facebook.File.FileText.Filter.Flag.Folder.Gift.Globe.Heart.Home.Image.Inbox.Info.Layers.Link.Lock.LogIn.LogOut.Mail.MapPin.Menu.MessageSquare.Mic.Monitor.Moon.Music.Paperclip.Pause.Phone.PieChart.Play.Plus.Power.Printer.RefreshCw.Save.Search.Send.Settings.Share.ShieldCheck.ShoppingCart.Star.Sun.Tag.Trash.Twitter.Upload.User.Video.Wifi.Wrench.X.Zap".split("."), j = l(() => {
+			let e = k.value.trim().toLowerCase();
+			return e ? A.filter((t) => t.toLowerCase().includes(e)) : A;
+		});
+		function M(e) {
+			if (e) return D[e];
+		}
+		let N = l(() => M(v.value ?? ""));
+		function P(e) {
+			let t = M(e);
+			return t ? _(t, { class: "size-4" }) : null;
+		}
+		function F(e) {
+			v.value = typeof e == "string" ? e : "";
+		}
+		return (l, _) => (y(), u(w(s), {
+			label: g.label,
+			required: g.required,
+			"hide-label": g.hideLabel,
+			for: g.id,
+			"help-text": g.helpText,
+			errors: g.errors
+		}, {
+			default: E(() => [h(w(e), {
+				"model-value": v.value ?? "",
+				disabled: g.disabled,
+				"onUpdate:modelValue": F
+			}, {
+				default: E(() => [h(w(t), {
+					"data-element-name": g.name ?? void 0,
+					"data-readonly": g.readonly || void 0
+				}, {
+					default: E(() => [N.value ? (y(), u(S(N.value), {
+						key: 0,
+						class: "mr-2 size-4 shrink-0",
+						"data-testid": "icon-preview"
+					})) : d("", !0), h(w(i), {
+						modelValue: k.value,
+						"onUpdate:modelValue": _[0] ||= (e) => k.value = e,
+						placeholder: g.placeholder ?? "Search icons…",
+						readonly: g.readonly,
+						required: g.required
+					}, null, 8, [
+						"modelValue",
+						"placeholder",
+						"readonly",
+						"required"
+					])]),
+					_: 1
+				}, 8, ["data-element-name", "data-readonly"]), h(w(n), null, {
+					default: E(() => [h(w(r), null, {
+						default: E(() => [..._[1] ||= [m("No icons match.", -1)]]),
+						_: 1
+					}), (y(!0), f(c, null, x(j.value, (e) => (y(), u(w(a), {
+						key: e,
+						value: e
+					}, {
+						default: E(() => [
+							h(w(o)),
+							(y(), u(S(P(e)))),
+							p("span", O, C(e), 1)
+						]),
+						_: 2
+					}, 1032, ["value"]))), 128))]),
+					_: 1
+				})]),
+				_: 1
+			}, 8, ["model-value", "disabled"])]),
+			_: 1
+		}, 8, [
+			"label",
+			"required",
+			"hide-label",
+			"for",
+			"help-text",
+			"errors"
+		]));
+	}
+});
+//#endregion
+export { k as default };
+
+//# sourceMappingURL=IconPicker.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/compositions/elements/picker/IconPicker.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconPicker.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../src/components/compositions/elements/picker/IconPicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven icon picker composition. Searchable combobox over a\n * curated subset of lucide icon names. The selected value is the icon's\n * PascalCase name (e.g. `\"Calendar\"`); the currently-selected icon is\n * rendered as a live preview alongside the combobox input.\n *\n *   <IconPicker v-model=\"icon\" label=\"Icon\" />\n */\nimport { computed, h, ref } from \"vue\"\nimport * as LucideIcons from \"@lucide/vue\"\nimport type { Component } from \"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 IconPickerProps {\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<IconPickerProps>(), {\n  errors: () => [],\n})\n\nconst model = defineModel<string | null>(\"modelValue\")\n\nconst query = ref<string>(\"\")\n\n/**\n * A small curated subset of lucide icon names. We don't enumerate the\n * whole 1.4k+ set because we render the preview component eagerly and\n * Storybook bundles every story.\n */\nconst ICON_NAMES = [\n  \"Activity\",\n  \"AlertCircle\",\n  \"Archive\",\n  \"Bell\",\n  \"Bookmark\",\n  \"Briefcase\",\n  \"Calendar\",\n  \"Camera\",\n  \"Check\",\n  \"ChevronRight\",\n  \"Clock\",\n  \"Cloud\",\n  \"Code\",\n  \"Copy\",\n  \"Database\",\n  \"Download\",\n  \"Edit\",\n  \"Eye\",\n  \"Facebook\",\n  \"File\",\n  \"FileText\",\n  \"Filter\",\n  \"Flag\",\n  \"Folder\",\n  \"Gift\",\n  \"Globe\",\n  \"Heart\",\n  \"Home\",\n  \"Image\",\n  \"Inbox\",\n  \"Info\",\n  \"Layers\",\n  \"Link\",\n  \"Lock\",\n  \"LogIn\",\n  \"LogOut\",\n  \"Mail\",\n  \"MapPin\",\n  \"Menu\",\n  \"MessageSquare\",\n  \"Mic\",\n  \"Monitor\",\n  \"Moon\",\n  \"Music\",\n  \"Paperclip\",\n  \"Pause\",\n  \"Phone\",\n  \"PieChart\",\n  \"Play\",\n  \"Plus\",\n  \"Power\",\n  \"Printer\",\n  \"RefreshCw\",\n  \"Save\",\n  \"Search\",\n  \"Send\",\n  \"Settings\",\n  \"Share\",\n  \"ShieldCheck\",\n  \"ShoppingCart\",\n  \"Star\",\n  \"Sun\",\n  \"Tag\",\n  \"Trash\",\n  \"Twitter\",\n  \"Upload\",\n  \"User\",\n  \"Video\",\n  \"Wifi\",\n  \"Wrench\",\n  \"X\",\n  \"Zap\",\n] as const\n\nconst filtered = computed<readonly string[]>(() => {\n  const q = query.value.trim().toLowerCase()\n  if (!q) {\n    return ICON_NAMES\n  }\n  return ICON_NAMES.filter((name) => name.toLowerCase().includes(q))\n})\n\nfunction resolveIcon(name: string): Component | undefined {\n  if (!name) {\n    return undefined\n  }\n  const registry = LucideIcons as unknown as Record<\n    string,\n    Component | undefined\n  >\n  return registry[name]\n}\n\nconst previewIcon = computed<Component | undefined>(() =>\n  resolveIcon(model.value ?? \"\"),\n)\n\nfunction renderIcon(name: string) {\n  const icon = resolveIcon(name)\n  return icon ? h(icon, { class: \"size-4\" }) : null\n}\n\nfunction onSelect(value: unknown): void {\n  model.value = typeof value === \"string\" ? value : \"\"\n}\n</script>\n\n<template>\n  <FieldFrame\n    :label=\"label\"\n    :required=\"required\"\n    :hide-label=\"hideLabel\"\n    :for=\"id\"\n    :help-text=\"helpText\"\n    :errors=\"errors\"\n  >\n    <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        <component\n          :is=\"previewIcon\"\n          v-if=\"previewIcon\"\n          class=\"mr-2 size-4 shrink-0\"\n          data-testid=\"icon-preview\"\n        />\n        <ComboboxInput\n          v-model=\"query\"\n          :placeholder=\"placeholder ?? 'Search icons…'\"\n          :readonly=\"readonly\"\n          :required=\"required\"\n        />\n      </ComboboxAnchor>\n      <ComboboxContent>\n        <ComboboxEmpty>No icons match.</ComboboxEmpty>\n        <ComboboxItem v-for=\"iconName in filtered\" :key=\"iconName\" :value=\"iconName\">\n          <ComboboxItemIndicator />\n          <component :is=\"renderIcon(iconName)\" />\n          <span class=\"ml-2\">{{ iconName }}</span>\n        </ComboboxItem>\n      </ComboboxContent>\n    </Combobox>\n  </FieldFrame>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAyCA,IAAM,IAAQ,EAA0B,GAAC,YAAY,GAE/C,IAAQ,EAAY,EAAE,GAOtB,IAAa,kgBAyEnB,GAEM,IAAW,QAAkC;GACjD,IAAM,IAAI,EAAM,MAAM,KAAK,EAAE,YAAY;GAIzC,OAHK,IAGE,EAAW,QAAQ,MAAS,EAAK,YAAY,EAAE,SAAS,CAAC,CAAC,IAFxD;EAGX,CAAC;EAED,SAAS,EAAY,GAAqC;GACnD,OAOL,OAAO,EAAS;EAClB;EAEA,IAAM,IAAc,QAClB,EAAY,EAAM,SAAS,EAAE,CAC/B;EAEA,SAAS,EAAW,GAAc;GAChC,IAAM,IAAO,EAAY,CAAI;GAC7B,OAAO,IAAO,EAAE,GAAM,EAAE,OAAO,SAAS,CAAC,IAAI;EAC/C;EAEA,SAAS,EAAS,GAAsB;GACtC,EAAM,QAAQ,OAAO,KAAU,WAAW,IAAQ;EACpD;yBAIE,EAuCa,EAAA,CAAA,GAAA;GAtCV,OAAO,EAAA;GACP,UAAU,EAAA;GACV,cAAY,EAAA;GACZ,KAAK,EAAA;GACL,aAAW,EAAA;GACX,QAAQ,EAAA;;oBAgCE,CA9BX,EA8BW,EAAA,CAAA,GAAA;IA7BR,eAAa,EAAA,SAAK;IAClB,UAAU,EAAA;IACV,uBAAoB;;qBAkBJ,CAhBjB,EAgBiB,EAAA,CAAA,GAAA;KAfd,qBAAmB,EAAA,QAAQ,KAAA;KAC3B,iBAAe,EAAA,YAAY,KAAA;;sBAO1B,CAHM,EAAA,SAAA,EAAA,GAFR,EAKE,EAJK,EAAA,KAAW,GAAA;;MAEhB,OAAM;MACN,eAAY;sBAEd,EAKE,EAAA,CAAA,GAAA;kBAJS,EAAA;+CAAK,QAAA;MACb,aAAa,EAAA,eAAW;MACxB,UAAU,EAAA;MACV,UAAU,EAAA;;;;;;;;mDAGf,EAOkB,EAAA,CAAA,GAAA,MAAA;sBAN8B,CAA9C,EAA8C,EAAA,CAAA,GAAA,MAAA;uBAAhB,CAAA,GAAA,AAAA,EAAA,OAAA,CAAA,EAAf,mBAAe,EAAA,CAAA,CAAA,CAAA;;iBAC9B,EAIe,GAAA,MAAA,EAJkB,EAAA,QAAZ,YAArB,EAIe,EAAA,CAAA,GAAA;MAJ6B,KAAK;MAAW,OAAO;;uBACxC;OAAzB,EAAyB,EAAA,CAAA,CAAA;aACzB,EAAwC,EAAxB,EAAW,CAAQ,CAAA,CAAA;OACnC,EAAwC,QAAxC,GAAwC,EAAlB,CAAQ,GAAA,CAAA"}

package/dist/components/compositions/elements/picker/IconPickerInline.js

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

package/dist/components/compositions/elements/picker/IconPickerInline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconPickerInline.js","names":[],"sources":["../../../../../src/components/compositions/elements/picker/IconPickerInline.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven inline icon picker composition. A trigger Button +\n * Popover with a searchable grid of lucide icons.\n *\n * Self-contained — usable directly in any Vue app:\n *\n *   <IconPickerInline v-model=\"iconName\" label=\"Pick an icon\" />\n */\nimport { computed, h, ref, type Component } from \"vue\"\nimport * as LucideIcons from \"@lucide/vue\"\nimport { Search } from \"@lucide/vue\"\nimport { Button } from \"@/components/ui/button\"\nimport { Input } from \"@/components/ui/input\"\nimport { FieldFrame } from \"@/components/ui/field-frame\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/components/ui/popover\"\n\nexport interface IconPickerInlineProps {\n  modelValue?: string\n  id?: string\n  name?: string\n  label?: string\n  hideLabel?: boolean\n  required?: boolean\n  disabled?: boolean\n  helpText?: string\n  errors?: string[]\n}\n\nwithDefaults(defineProps<IconPickerInlineProps>(), {\n  errors: () => [],\n})\n\nconst model = defineModel<string>(\"modelValue\")\n\nconst query = ref<string>(\"\")\n\n/**\n * Curated subset of lucide icons. Hardcoded so we don't enumerate\n * the entire ~1400-icon set in the picker UI.\n */\nconst ICON_NAMES: readonly string[] = [\n  \"Activity\",\n  \"AlertCircle\",\n  \"Archive\",\n  \"Bell\",\n  \"Bookmark\",\n  \"Calendar\",\n  \"Camera\",\n  \"Check\",\n  \"Clock\",\n  \"Cloud\",\n  \"Code\",\n  \"Download\",\n  \"Edit\",\n  \"Eye\",\n  \"File\",\n  \"Flag\",\n  \"Folder\",\n  \"Globe\",\n  \"Heart\",\n  \"Home\",\n  \"Image\",\n  \"Info\",\n  \"Link\",\n  \"Lock\",\n  \"Mail\",\n  \"MapPin\",\n  \"MessageSquare\",\n  \"Plus\",\n  \"Search\",\n  \"Settings\",\n  \"Star\",\n  \"Tag\",\n  \"Trash\",\n  \"Upload\",\n  \"User\",\n  \"Video\",\n  \"X\",\n  \"Zap\",\n]\n\nconst filtered = computed<readonly string[]>(() => {\n  const q = query.value.trim().toLowerCase()\n  if (!q) {\n    return ICON_NAMES\n  }\n  return ICON_NAMES.filter((name) => name.toLowerCase().includes(q))\n})\n\nfunction resolveIcon(name: string): Component | undefined {\n  const registry = LucideIcons as unknown as Record<string, Component | undefined>\n  return registry[name]\n}\n\nfunction renderIcon(name: string, cls = \"size-4\") {\n  const icon = resolveIcon(name)\n  return icon ? h(icon, { class: cls }) : null\n}\n\nconst previewIcon = computed<Component | undefined>(() =>\n  resolveIcon(model.value ?? \"\"),\n)\n\nfunction onSelect(name: string): void {\n  model.value = name\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    data-testid=\"icon-picker-inline\"\n  >\n    <Popover>\n      <PopoverTrigger as-child>\n        <Button\n          type=\"button\"\n          variant=\"outline\"\n          class=\"w-fit justify-start gap-2\"\n          :disabled=\"disabled\"\n          :data-element-name=\"name ?? undefined\"\n          data-testid=\"icon-picker-inline-trigger\"\n        >\n          <component\n            :is=\"previewIcon\"\n            v-if=\"previewIcon\"\n            class=\"size-4\"\n          />\n          <span>{{ model || \"Pick an icon\" }}</span>\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent class=\"w-72 p-2\">\n        <div class=\"mb-2 flex items-center gap-2\">\n          <Search class=\"size-4 text-muted-foreground\" />\n          <Input\n            v-model=\"query\"\n            placeholder=\"Search icons…\"\n            data-testid=\"icon-picker-inline-search\"\n            class=\"h-8\"\n          />\n        </div>\n        <div\n          class=\"grid max-h-60 grid-cols-6 gap-1 overflow-auto\"\n          data-testid=\"icon-picker-inline-grid\"\n        >\n          <button\n            v-for=\"iconName in filtered\"\n            :key=\"iconName\"\n            type=\"button\"\n            class=\"flex aspect-square items-center justify-center rounded border border-transparent hover:border-border hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n            :class=\"model === iconName ? 'border-primary bg-primary/10' : ''\"\n            :aria-label=\"iconName\"\n            :title=\"iconName\"\n            :data-testid=\"`icon-picker-inline-item-${iconName}`\"\n            @click=\"onSelect(iconName)\"\n          >\n            <component :is=\"renderIcon(iconName)\" />\n          </button>\n        </div>\n        <p\n          v-if=\"!filtered.length\"\n          class=\"p-3 text-center text-sm text-muted-foreground\"\n        >\n          No icons match.\n        </p>\n      </PopoverContent>\n    </Popover>\n  </FieldFrame>\n</template>\n"],"mappings":""}