@gxp-dev/mod-ui 2.0.8 → 2.0.12

package/dist/components/compositions/elements/action/ButtonAction.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,137 @@
+import e from "../../../ui/button/Button.js";
+import "../../../ui/button/index.js";
+import t from "../../../ui/dialog/Dialog.js";
+import n from "../../../ui/dialog/DialogContent.js";
+import r from "../../../ui/dialog/DialogDescription.js";
+import i from "../../../ui/dialog/DialogFooter.js";
+import a from "../../../ui/dialog/DialogHeader.js";
+import o from "../../../ui/dialog/DialogTitle.js";
+import "../../../ui/dialog/index.js";
+import { Fragment as s, computed as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createTextVNode as f, createVNode as p, defineComponent as m, normalizeClass as h, openBlock as g, ref as _, resolveDynamicComponent as v, toDisplayString as y, unref as b, withCtx as x } from "vue";
+import * as S from "@lucide/vue";
+//#region src/components/compositions/elements/action/ButtonAction.vue?vue&type=script&setup=true&lang.ts
+var C = { key: 1 }, w = /* @__PURE__ */ m({
+	__name: "ButtonAction",
+	props: {
+		label: {},
+		variant: { default: "default" },
+		size: { default: "md" },
+		icon: {},
+		href: {},
+		target: { default: "_self" },
+		emit: {},
+		confirm: { type: Boolean },
+		confirmMessage: {},
+		disabled: { type: Boolean },
+		block: { type: Boolean },
+		name: {},
+		id: {}
+	},
+	emits: ["click", "action"],
+	setup(m, { emit: w }) {
+		let T = m, E = w, D = {
+			sm: "sm",
+			md: "default",
+			lg: "lg"
+		}, O = c(() => D[T.size] ?? "default"), k = S;
+		function A(e) {
+			if (e) return k[e.split(/[-_\s]/).filter(Boolean).map((e) => e.charAt(0).toUpperCase() + e.slice(1)).join("")] ?? k[e];
+		}
+		let j = c(() => A(T.icon)), M = _(!1);
+		function N() {
+			if (T.href) {
+				T.target === "_blank" ? window.open(T.href, "_blank") : window.location.assign(T.href);
+				return;
+			}
+			T.emit && E("action", { name: T.emit });
+		}
+		function P(e) {
+			if (E("click", e), T.confirm) {
+				e.preventDefault(), M.value = !0;
+				return;
+			}
+			if (!T.href && T.emit) {
+				e.preventDefault(), N();
+				return;
+			}
+			!T.href && !T.emit && e.preventDefault();
+		}
+		function F() {
+			M.value = !1, N();
+		}
+		function I() {
+			M.value = !1;
+		}
+		let L = c(() => T.href && !T.confirm ? "a" : "button");
+		return (c, _) => (g(), d(s, null, [p(b(e), {
+			id: m.id,
+			as: L.value,
+			variant: m.variant,
+			size: O.value,
+			disabled: m.disabled,
+			class: h(m.block ? "w-full" : ""),
+			"data-action-name": E ?? m.label,
+			"data-element-name": m.name ?? void 0,
+			href: L.value === "a" ? m.href : void 0,
+			target: L.value === "a" ? m.target : void 0,
+			onClick: P
+		}, {
+			default: x(() => [j.value ? (g(), l(v(j.value), {
+				key: 0,
+				class: "h-4 w-4"
+			})) : u("", !0), m.label ? (g(), d("span", C, y(m.label), 1)) : u("", !0)]),
+			_: 1
+		}, 8, [
+			"id",
+			"as",
+			"variant",
+			"size",
+			"disabled",
+			"class",
+			"data-action-name",
+			"data-element-name",
+			"href",
+			"target"
+		]), m.confirm ? (g(), l(b(t), {
+			key: 0,
+			open: M.value,
+			"onUpdate:open": _[0] ||= (e) => M.value = e
+		}, {
+			default: x(() => [p(b(n), null, {
+				default: x(() => [p(b(a), null, {
+					default: x(() => [p(b(o), null, {
+						default: x(() => [..._[1] ||= [f("Confirm action", -1)]]),
+						_: 1
+					}), p(b(r), null, {
+						default: x(() => [f(y(m.confirmMessage ?? "Are you sure you want to continue?"), 1)]),
+						_: 1
+					})]),
+					_: 1
+				}), p(b(i), null, {
+					default: x(() => [p(b(e), {
+						variant: "outline",
+						type: "button",
+						onClick: I
+					}, {
+						default: x(() => [..._[2] ||= [f(" Cancel ", -1)]]),
+						_: 1
+					}), p(b(e), {
+						variant: "default",
+						type: "button",
+						onClick: F
+					}, {
+						default: x(() => [..._[3] ||= [f(" Confirm ", -1)]]),
+						_: 1
+					})]),
+					_: 1
+				})]),
+				_: 1
+			})]),
+			_: 1
+		}, 8, ["open"])) : u("", !0)], 64));
+	}
+});
+//#endregion
+export { w as default };
+
+//# sourceMappingURL=ButtonAction.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/compositions/elements/action/ButtonAction.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonAction.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../src/components/compositions/elements/action/ButtonAction.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven button composition. Composes the shadcn `Button`\n * primitive with click / href / emit / confirm behaviour.\n *\n * Self-contained — usable directly in any Vue app:\n *\n *   <ButtonAction label=\"Save\" variant=\"default\" @click=\"save\" />\n *   <ButtonAction label=\"Docs\" href=\"https://example.com\" target=\"_blank\" />\n *   <ButtonAction label=\"Delete\" variant=\"destructive\" confirm @action=\"onDelete\" />\n *\n * Action elements do NOT use FieldFrame — they're not form inputs and\n * don't need label/help/error chrome.\n */\nimport { computed, ref } from \"vue\"\nimport * as LucideIcons from \"@lucide/vue\"\nimport type { FunctionalComponent } from \"vue\"\n\ntype LucideIcon = FunctionalComponent\n\nimport { Button, type ButtonVariants } from \"@/components/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n} from \"@/components/ui/dialog\"\n\nexport type ButtonActionVariant =\n  | \"default\"\n  | \"secondary\"\n  | \"destructive\"\n  | \"outline\"\n  | \"ghost\"\n  | \"link\"\n  | \"success\"\n  | \"warning\"\n  | \"info\"\n\nexport type ButtonActionSize = \"sm\" | \"md\" | \"lg\"\n\nexport interface ButtonActionProps {\n  label?: string\n  variant?: ButtonActionVariant\n  size?: ButtonActionSize\n  /** Lucide icon name rendered before the label. */\n  icon?: string\n  /** Navigation target — renders as an anchor when set and confirm is false. */\n  href?: string\n  target?: \"_self\" | \"_blank\" | \"_parent\" | \"_top\"\n  /** Custom event name emitted via `action` when clicked. */\n  emit?: string\n  /** Show a confirmation dialog before firing. */\n  confirm?: boolean\n  /** Confirmation message displayed in the dialog. */\n  confirmMessage?: string\n  disabled?: boolean\n  /** Render full width. */\n  block?: boolean\n  /** HTML name attribute. */\n  name?: string\n  /** HTML id attribute. */\n  id?: string\n}\n\nconst props = withDefaults(defineProps<ButtonActionProps>(), {\n  variant: \"default\",\n  size: \"md\",\n  target: \"_self\",\n})\n\nconst emit = defineEmits<{\n  (e: \"click\", event: MouseEvent): void\n  (e: \"action\", payload: { name: string }): void\n}>()\n\nconst sizeMap: Record<ButtonActionSize, ButtonVariants[\"size\"]> = {\n  sm: \"sm\",\n  md: \"default\",\n  lg: \"lg\",\n}\n\nconst mappedSize = computed<ButtonVariants[\"size\"]>(\n  () => sizeMap[props.size] ?? \"default\",\n)\n\nconst iconLibrary = LucideIcons as unknown as Record<string, LucideIcon>\nfunction resolveIcon(name: string | undefined): LucideIcon | undefined {\n  if (!name) {\n    return undefined\n  }\n  const pascal = name\n    .split(/[-_\\s]/)\n    .filter(Boolean)\n    .map((s) => s.charAt(0).toUpperCase() + s.slice(1))\n    .join(\"\")\n  return iconLibrary[pascal] ?? iconLibrary[name]\n}\nconst icon = computed(() => resolveIcon(props.icon))\n\nconst confirmOpen = ref(false)\n\nfunction performAction(): void {\n  if (props.href) {\n    if (props.target === \"_blank\") {\n      window.open(props.href, \"_blank\")\n    } else {\n      window.location.assign(props.href)\n    }\n    return\n  }\n  if (props.emit) {\n    emit(\"action\", { name: props.emit })\n  }\n}\n\nfunction onClick(event: MouseEvent): void {\n  emit(\"click\", event)\n  if (props.confirm) {\n    event.preventDefault()\n    confirmOpen.value = true\n    return\n  }\n  if (!props.href && props.emit) {\n    event.preventDefault()\n    performAction()\n    return\n  }\n  if (!props.href && !props.emit) {\n    event.preventDefault()\n  }\n}\n\nfunction confirmYes(): void {\n  confirmOpen.value = false\n  performAction()\n}\n\nfunction confirmNo(): void {\n  confirmOpen.value = false\n}\n\nconst renderAs = computed<\"a\" | \"button\">(() =>\n  props.href && !props.confirm ? \"a\" : \"button\",\n)\n</script>\n\n<template>\n  <Button\n    :id=\"id\"\n    :as=\"renderAs\"\n    :variant=\"variant\"\n    :size=\"mappedSize\"\n    :disabled=\"disabled\"\n    :class=\"block ? 'w-full' : ''\"\n    :data-action-name=\"emit ?? label\"\n    :data-element-name=\"name ?? undefined\"\n    :href=\"renderAs === 'a' ? href : undefined\"\n    :target=\"renderAs === 'a' ? target : undefined\"\n    @click=\"onClick\"\n  >\n    <component :is=\"icon\" v-if=\"icon\" class=\"h-4 w-4\" />\n    <span v-if=\"label\">{{ label }}</span>\n  </Button>\n\n  <Dialog v-if=\"confirm\" v-model:open=\"confirmOpen\">\n    <DialogContent>\n      <DialogHeader>\n        <DialogTitle>Confirm action</DialogTitle>\n        <DialogDescription>\n          {{ confirmMessage ?? \"Are you sure you want to continue?\" }}\n        </DialogDescription>\n      </DialogHeader>\n      <DialogFooter>\n        <Button variant=\"outline\" type=\"button\" @click=\"confirmNo\">\n          Cancel\n        </Button>\n        <Button variant=\"default\" type=\"button\" @click=\"confirmYes\">\n          Confirm\n        </Button>\n      </DialogFooter>\n    </DialogContent>\n  </Dialog>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmEA,IAAM,IAAQ,GAMR,IAAO,GAKP,IAA4D;GAChE,IAAI;GACJ,IAAI;GACJ,IAAI;EACN,GAEM,IAAa,QACX,EAAQ,EAAM,SAAS,SAC/B,GAEM,IAAc;EACpB,SAAS,EAAY,GAAkD;GAChE,OAQL,OAAO,EALQ,EACZ,MAAM,QAAQ,EACd,OAAO,OAAO,EACd,KAAK,MAAM,EAAE,OAAO,CAAC,EAAE,YAAY,IAAI,EAAE,MAAM,CAAC,CAAC,EACjD,KAAK,EACW,MAAW,EAAY;EAC5C;EACA,IAAM,IAAO,QAAe,EAAY,EAAM,IAAI,CAAC,GAE7C,IAAc,EAAI,EAAK;EAE7B,SAAS,IAAsB;GAC7B,IAAI,EAAM,MAAM;IACd,AAAI,EAAM,WAAW,WACnB,OAAO,KAAK,EAAM,MAAM,QAAQ,IAEhC,OAAO,SAAS,OAAO,EAAM,IAAI;IAEnC;GACF;GACA,AAAI,EAAM,QACR,EAAK,UAAU,EAAE,MAAM,EAAM,KAAK,CAAC;EAEvC;EAEA,SAAS,EAAQ,GAAyB;GAExC,IADA,EAAK,SAAS,CAAK,GACf,EAAM,SAAS;IAEjB,AADA,EAAM,eAAe,GACrB,EAAY,QAAQ;IACpB;GACF;GACA,IAAI,CAAC,EAAM,QAAQ,EAAM,MAAM;IAE7B,AADA,EAAM,eAAe,GACrB,EAAc;IACd;GACF;GACA,AAAI,CAAC,EAAM,QAAQ,CAAC,EAAM,QACxB,EAAM,eAAe;EAEzB;EAEA,SAAS,IAAmB;GAE1B,AADA,EAAY,QAAQ,IACpB,EAAc;EAChB;EAEA,SAAS,IAAkB;GACzB,EAAY,QAAQ;EACtB;EAEA,IAAM,IAAW,QACf,EAAM,QAAQ,CAAC,EAAM,UAAU,MAAM,QACvC;qCAIE,EAeS,EAAA,CAAA,GAAA;GAdN,IAAI,EAAA;GACJ,IAAI,EAAA;GACJ,SAAS,EAAA;GACT,MAAM,EAAA;GACN,UAAU,EAAA;GACV,OAAK,EAAE,EAAA,QAAK,WAAA,EAAA;GACZ,oBAAkB,KAAQ,EAAA;GAC1B,qBAAmB,EAAA,QAAQ,KAAA;GAC3B,MAAM,EAAA,UAAQ,MAAW,EAAA,OAAO,KAAA;GAChC,QAAQ,EAAA,UAAQ,MAAW,EAAA,SAAS,KAAA;GAC7B;;oBAE4C,CAAxB,EAAA,SAAA,EAAA,GAA5B,EAAoD,EAApC,EAAA,KAAI,GAAA;;IAAc,OAAM;oBAC5B,EAAA,SAAA,EAAA,GAAZ,EAAqC,QAAA,GAAA,EAAf,EAAA,KAAK,GAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,CAAA;;;;;;;;;;;;;MAGf,EAAA,WAAA,EAAA,GAAd,EAiBS,EAAA,CAAA,GAAA;;GAjBsB,MAAM,EAAA;sCAAW,QAAA;;oBAgB9B,CAfhB,EAegB,EAAA,CAAA,GAAA,MAAA;qBATC,CALf,EAKe,EAAA,CAAA,GAAA,MAAA;sBAJ4B,CAAzC,EAAyC,EAAA,CAAA,GAAA,MAAA;uBAAd,CAAA,GAAA,AAAA,EAAA,OAAA,CAAA,EAAd,kBAAc,EAAA,CAAA,CAAA,CAAA;;SAC3B,EAEoB,EAAA,CAAA,GAAA,MAAA;uBAD0C,CAAA,EAAA,EAAzD,EAAA,kBAAc,oCAAA,GAAA,CAAA,CAAA,CAAA;;;;QAGrB,EAOe,EAAA,CAAA,GAAA,MAAA;sBAJJ,CAFT,EAES,EAAA,CAAA,GAAA;MAFD,SAAQ;MAAU,MAAK;MAAU,SAAO;;uBAEhD,CAAA,GAAA,AAAA,EAAA,OAAA,CAAA,EAF2D,YAE3D,EAAA,CAAA,CAAA,CAAA;;SACA,EAES,EAAA,CAAA,GAAA;MAFD,SAAQ;MAAU,MAAK;MAAU,SAAO;;uBAEhD,CAAA,GAAA,AAAA,EAAA,OAAA,CAAA,EAF4D,aAE5D,EAAA,CAAA,CAAA,CAAA"}

package/dist/components/compositions/elements/action/ButtonGroupAction.js

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

package/dist/components/compositions/elements/action/ButtonGroupAction.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonGroupAction.js","names":[],"sources":["../../../../../src/components/compositions/elements/action/ButtonGroupAction.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven button-group composition. Renders an array of child\n * actions as a row of Buttons, each capable of emitting a click or\n * navigating to its href.\n *\n *   <ButtonGroupAction\n *     :items=\"[\n *       { label: 'Edit', emit: 'edit' },\n *       { label: 'Delete', variant: 'destructive', emit: 'delete' },\n *     ]\"\n *     @action=\"onAction\"\n *   />\n */\nimport { computed } from \"vue\"\nimport * as LucideIcons from \"@lucide/vue\"\nimport type { FunctionalComponent } from \"vue\"\n\ntype LucideIcon = FunctionalComponent\n\nimport { Button, type ButtonVariants } from \"@/components/ui/button\"\nimport type {\n  ButtonActionSize,\n  ButtonActionVariant,\n} from \"./ButtonAction.vue\"\n\nexport interface ButtonGroupItem {\n  id?: string\n  label: string\n  /** Lucide icon name rendered before the label. */\n  icon?: string\n  /** Navigation target — renders as an anchor when set. */\n  href?: string\n  target?: \"_self\" | \"_blank\" | \"_parent\" | \"_top\"\n  /** Visual variant; falls back to the group's variant prop. */\n  variant?: ButtonActionVariant\n  /** Custom event name emitted via `action` when clicked. */\n  emit?: string\n  disabled?: boolean\n}\n\nexport interface ButtonGroupActionProps {\n  items?: ButtonGroupItem[]\n  /** Default variant applied to items that don't specify one. */\n  variant?: ButtonActionVariant\n  size?: ButtonActionSize\n  /** Render the group stretched (each child becomes flex-1). */\n  block?: boolean\n  /** Group HTML id. */\n  id?: string\n  /** Group name (used as `data-element-name`). */\n  name?: string\n}\n\nconst props = withDefaults(defineProps<ButtonGroupActionProps>(), {\n  items: () => [],\n  variant: \"default\",\n  size: \"md\",\n})\n\nconst emit = defineEmits<{\n  (\n    e: \"action\",\n    payload: { name: string; item: ButtonGroupItem },\n  ): void\n  (e: \"click\", event: MouseEvent, item: ButtonGroupItem): void\n}>()\n\nconst sizeMap: Record<ButtonActionSize, ButtonVariants[\"size\"]> = {\n  sm: \"sm\",\n  md: \"default\",\n  lg: \"lg\",\n}\n\nconst mappedSize = computed<ButtonVariants[\"size\"]>(\n  () => sizeMap[props.size] ?? \"default\",\n)\n\nconst iconLibrary = LucideIcons as unknown as Record<string, LucideIcon>\nfunction resolveIcon(name: string | undefined): LucideIcon | undefined {\n  if (!name) {\n    return undefined\n  }\n  const pascal = name\n    .split(/[-_\\s]/)\n    .filter(Boolean)\n    .map((s) => s.charAt(0).toUpperCase() + s.slice(1))\n    .join(\"\")\n  return iconLibrary[pascal] ?? iconLibrary[name]\n}\n\nfunction variantFor(item: ButtonGroupItem): ButtonActionVariant {\n  return item.variant ?? props.variant\n}\n\nfunction onClick(child: ButtonGroupItem, event: MouseEvent): void {\n  emit(\"click\", event, child)\n  if (child.href) {\n    return\n  }\n  event.preventDefault()\n  if (child.emit) {\n    emit(\"action\", { name: child.emit, item: child })\n  }\n}\n</script>\n\n<template>\n  <div\n    :id=\"id\"\n    class=\"inline-flex flex-wrap items-center gap-2\"\n    role=\"group\"\n    :data-element-name=\"name ?? undefined\"\n  >\n    <Button\n      v-for=\"(child, idx) in items\"\n      :key=\"child.id ?? `${child.label}-${idx}`\"\n      :as=\"child.href ? 'a' : 'button'\"\n      :href=\"child.href\"\n      :target=\"child.href ? child.target : undefined\"\n      :variant=\"variantFor(child)\"\n      :size=\"mappedSize\"\n      :disabled=\"child.disabled\"\n      :class=\"block ? 'flex-1' : ''\"\n      :data-item-emit=\"child.emit\"\n      @click=\"(e: MouseEvent) => onClick(child, e)\"\n    >\n      <component :is=\"resolveIcon(child.icon)\" v-if=\"resolveIcon(child.icon)\" class=\"h-4 w-4\" />\n      <span>{{ child.label }}</span>\n    </Button>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/compositions/elements/action/ButtonGroupAction.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,73 @@
+import e from "../../../ui/button/Button.js";
+import "../../../ui/button/index.js";
+import { Fragment as t, computed as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, defineComponent as s, normalizeClass as c, openBlock as l, renderList as u, resolveDynamicComponent as d, toDisplayString as f, unref as p, withCtx as m } from "vue";
+import * as h from "@lucide/vue";
+//#region src/components/compositions/elements/action/ButtonGroupAction.vue?vue&type=script&setup=true&lang.ts
+var g = ["id", "data-element-name"], _ = /* @__PURE__ */ s({
+	__name: "ButtonGroupAction",
+	props: {
+		items: { default: () => [] },
+		variant: { default: "default" },
+		size: { default: "md" },
+		block: { type: Boolean },
+		id: {},
+		name: {}
+	},
+	emits: ["action", "click"],
+	setup(s, { emit: _ }) {
+		let v = s, y = _, b = {
+			sm: "sm",
+			md: "default",
+			lg: "lg"
+		}, x = n(() => b[v.size] ?? "default"), S = h;
+		function C(e) {
+			if (e) return S[e.split(/[-_\s]/).filter(Boolean).map((e) => e.charAt(0).toUpperCase() + e.slice(1)).join("")] ?? S[e];
+		}
+		function w(e) {
+			return e.variant ?? v.variant;
+		}
+		function T(e, t) {
+			y("click", t, e), !e.href && (t.preventDefault(), e.emit && y("action", {
+				name: e.emit,
+				item: e
+			}));
+		}
+		return (n, h) => (l(), a("div", {
+			id: s.id,
+			class: "inline-flex flex-wrap items-center gap-2",
+			role: "group",
+			"data-element-name": s.name ?? void 0
+		}, [(l(!0), a(t, null, u(s.items, (t, n) => (l(), r(p(e), {
+			key: t.id ?? `${t.label}-${n}`,
+			as: t.href ? "a" : "button",
+			href: t.href,
+			target: t.href ? t.target : void 0,
+			variant: w(t),
+			size: x.value,
+			disabled: t.disabled,
+			class: c(s.block ? "flex-1" : ""),
+			"data-item-emit": t.emit,
+			onClick: (e) => T(t, e)
+		}, {
+			default: m(() => [C(t.icon) ? (l(), r(d(C(t.icon)), {
+				key: 0,
+				class: "h-4 w-4"
+			})) : i("", !0), o("span", null, f(t.label), 1)]),
+			_: 2
+		}, 1032, [
+			"as",
+			"href",
+			"target",
+			"variant",
+			"size",
+			"disabled",
+			"class",
+			"data-item-emit",
+			"onClick"
+		]))), 128))], 8, g));
+	}
+});
+//#endregion
+export { _ as default };
+
+//# sourceMappingURL=ButtonGroupAction.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/compositions/elements/action/ButtonGroupAction.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonGroupAction.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../src/components/compositions/elements/action/ButtonGroupAction.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven button-group composition. Renders an array of child\n * actions as a row of Buttons, each capable of emitting a click or\n * navigating to its href.\n *\n *   <ButtonGroupAction\n *     :items=\"[\n *       { label: 'Edit', emit: 'edit' },\n *       { label: 'Delete', variant: 'destructive', emit: 'delete' },\n *     ]\"\n *     @action=\"onAction\"\n *   />\n */\nimport { computed } from \"vue\"\nimport * as LucideIcons from \"@lucide/vue\"\nimport type { FunctionalComponent } from \"vue\"\n\ntype LucideIcon = FunctionalComponent\n\nimport { Button, type ButtonVariants } from \"@/components/ui/button\"\nimport type {\n  ButtonActionSize,\n  ButtonActionVariant,\n} from \"./ButtonAction.vue\"\n\nexport interface ButtonGroupItem {\n  id?: string\n  label: string\n  /** Lucide icon name rendered before the label. */\n  icon?: string\n  /** Navigation target — renders as an anchor when set. */\n  href?: string\n  target?: \"_self\" | \"_blank\" | \"_parent\" | \"_top\"\n  /** Visual variant; falls back to the group's variant prop. */\n  variant?: ButtonActionVariant\n  /** Custom event name emitted via `action` when clicked. */\n  emit?: string\n  disabled?: boolean\n}\n\nexport interface ButtonGroupActionProps {\n  items?: ButtonGroupItem[]\n  /** Default variant applied to items that don't specify one. */\n  variant?: ButtonActionVariant\n  size?: ButtonActionSize\n  /** Render the group stretched (each child becomes flex-1). */\n  block?: boolean\n  /** Group HTML id. */\n  id?: string\n  /** Group name (used as `data-element-name`). */\n  name?: string\n}\n\nconst props = withDefaults(defineProps<ButtonGroupActionProps>(), {\n  items: () => [],\n  variant: \"default\",\n  size: \"md\",\n})\n\nconst emit = defineEmits<{\n  (\n    e: \"action\",\n    payload: { name: string; item: ButtonGroupItem },\n  ): void\n  (e: \"click\", event: MouseEvent, item: ButtonGroupItem): void\n}>()\n\nconst sizeMap: Record<ButtonActionSize, ButtonVariants[\"size\"]> = {\n  sm: \"sm\",\n  md: \"default\",\n  lg: \"lg\",\n}\n\nconst mappedSize = computed<ButtonVariants[\"size\"]>(\n  () => sizeMap[props.size] ?? \"default\",\n)\n\nconst iconLibrary = LucideIcons as unknown as Record<string, LucideIcon>\nfunction resolveIcon(name: string | undefined): LucideIcon | undefined {\n  if (!name) {\n    return undefined\n  }\n  const pascal = name\n    .split(/[-_\\s]/)\n    .filter(Boolean)\n    .map((s) => s.charAt(0).toUpperCase() + s.slice(1))\n    .join(\"\")\n  return iconLibrary[pascal] ?? iconLibrary[name]\n}\n\nfunction variantFor(item: ButtonGroupItem): ButtonActionVariant {\n  return item.variant ?? props.variant\n}\n\nfunction onClick(child: ButtonGroupItem, event: MouseEvent): void {\n  emit(\"click\", event, child)\n  if (child.href) {\n    return\n  }\n  event.preventDefault()\n  if (child.emit) {\n    emit(\"action\", { name: child.emit, item: child })\n  }\n}\n</script>\n\n<template>\n  <div\n    :id=\"id\"\n    class=\"inline-flex flex-wrap items-center gap-2\"\n    role=\"group\"\n    :data-element-name=\"name ?? undefined\"\n  >\n    <Button\n      v-for=\"(child, idx) in items\"\n      :key=\"child.id ?? `${child.label}-${idx}`\"\n      :as=\"child.href ? 'a' : 'button'\"\n      :href=\"child.href\"\n      :target=\"child.href ? child.target : undefined\"\n      :variant=\"variantFor(child)\"\n      :size=\"mappedSize\"\n      :disabled=\"child.disabled\"\n      :class=\"block ? 'flex-1' : ''\"\n      :data-item-emit=\"child.emit\"\n      @click=\"(e: MouseEvent) => onClick(child, e)\"\n    >\n      <component :is=\"resolveIcon(child.icon)\" v-if=\"resolveIcon(child.icon)\" class=\"h-4 w-4\" />\n      <span>{{ child.label }}</span>\n    </Button>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;EAsDA,IAAM,IAAQ,GAMR,IAAO,GAQP,IAA4D;GAChE,IAAI;GACJ,IAAI;GACJ,IAAI;EACN,GAEM,IAAa,QACX,EAAQ,EAAM,SAAS,SAC/B,GAEM,IAAc;EACpB,SAAS,EAAY,GAAkD;GAChE,OAQL,OAAO,EALQ,EACZ,MAAM,QAAQ,EACd,OAAO,OAAO,EACd,KAAK,MAAM,EAAE,OAAO,CAAC,EAAE,YAAY,IAAI,EAAE,MAAM,CAAC,CAAC,EACjD,KAAK,EACW,MAAW,EAAY;EAC5C;EAEA,SAAS,EAAW,GAA4C;GAC9D,OAAO,EAAK,WAAW,EAAM;EAC/B;EAEA,SAAS,EAAQ,GAAwB,GAAyB;GAChE,EAAK,SAAS,GAAO,CAAK,GACtB,GAAM,SAGV,EAAM,eAAe,GACjB,EAAM,QACR,EAAK,UAAU;IAAE,MAAM,EAAM;IAAM,MAAM;GAAM,CAAC;EAEpD;yBAIE,EAsBM,OAAA;GArBH,IAAI,EAAA;GACL,OAAM;GACN,MAAK;GACJ,qBAAmB,EAAA,QAAQ,KAAA;cAE5B,EAeS,GAAA,MAAA,EAdgB,EAAA,QAAf,GAAO,YADjB,EAeS,EAAA,CAAA,GAAA;GAbN,KAAK,EAAM,MAAE,GAAO,EAAM,MAAK,GAAI;GACnC,IAAI,EAAM,OAAI,MAAA;GACd,MAAM,EAAM;GACZ,QAAQ,EAAM,OAAO,EAAM,SAAS,KAAA;GACpC,SAAS,EAAW,CAAK;GACzB,MAAM,EAAA;GACN,UAAU,EAAM;GAChB,OAAK,EAAE,EAAA,QAAK,WAAA,EAAA;GACZ,kBAAgB,EAAM;GACtB,UAAQ,MAAkB,EAAQ,GAAO,CAAC;;oBAgBxC,CAd4C,EAAY,EAAM,IAAI,KAAA,EAAA,GAArE,EAA0F,EAA1E,EAAY,EAAM,IAAI,CAAA,GAAA;;IAAkC,OAAM;oBAC9E,EAA8B,QAAA,MAAA,EAArB,EAAM,KAAK,GAAA,CAAA,CAAA,CAAA"}

package/dist/components/compositions/elements/action/LinkAction.js

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

package/dist/components/compositions/elements/action/LinkAction.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LinkAction.js","names":[],"sources":["../../../../../src/components/compositions/elements/action/LinkAction.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven link composition. Renders a text link using the Button\n * primitive with variant=\"link\". Supports the same href / emit / confirm\n * behaviour as ButtonAction.\n *\n *   <LinkAction label=\"Open docs\" href=\"https://example.com\" target=\"_blank\" />\n *   <LinkAction label=\"Refresh\" emit=\"refresh\" @action=\"onAction\" />\n */\nimport { computed } from \"vue\"\nimport * as LucideIcons from \"@lucide/vue\"\nimport type { FunctionalComponent } from \"vue\"\n\ntype LucideIcon = FunctionalComponent\n\nimport { Button } from \"@/components/ui/button\"\n\nexport interface LinkActionProps {\n  label?: string\n  /** Lucide icon name rendered before the label. */\n  icon?: string\n  /** Navigation target. */\n  href?: string\n  target?: \"_self\" | \"_blank\" | \"_parent\" | \"_top\"\n  /** Custom event name emitted via `action` when clicked. */\n  emit?: string\n  disabled?: boolean\n  /** HTML id attribute. */\n  id?: string\n  /** HTML name (used as `data-element-name`). */\n  name?: string\n}\n\nconst props = withDefaults(defineProps<LinkActionProps>(), {\n  target: \"_self\",\n})\n\nconst emit = defineEmits<{\n  (e: \"click\", event: MouseEvent): void\n  (e: \"action\", payload: { name: string }): void\n}>()\n\nconst iconLibrary = LucideIcons as unknown as Record<string, LucideIcon>\nfunction resolveIcon(name: string | undefined): LucideIcon | undefined {\n  if (!name) {\n    return undefined\n  }\n  const pascal = name\n    .split(/[-_\\s]/)\n    .filter(Boolean)\n    .map((s) => s.charAt(0).toUpperCase() + s.slice(1))\n    .join(\"\")\n  return iconLibrary[pascal] ?? iconLibrary[name]\n}\nconst icon = computed(() => resolveIcon(props.icon))\n\nconst renderAs = computed<\"a\" | \"button\">(() =>\n  props.href ? \"a\" : \"button\",\n)\n\nfunction onClick(event: MouseEvent): void {\n  emit(\"click\", event)\n  if (props.href) {\n    return\n  }\n  event.preventDefault()\n  if (props.emit) {\n    emit(\"action\", { name: props.emit })\n  }\n}\n</script>\n\n<template>\n  <Button\n    :id=\"id\"\n    :as=\"renderAs\"\n    variant=\"link\"\n    size=\"sm\"\n    :disabled=\"disabled\"\n    :href=\"renderAs === 'a' ? href : undefined\"\n    :target=\"renderAs === 'a' ? target : undefined\"\n    :data-action-name=\"emit ?? label\"\n    :data-element-name=\"name ?? undefined\"\n    @click=\"onClick\"\n  >\n    <component :is=\"icon\" v-if=\"icon\" class=\"h-4 w-4\" />\n    <span v-if=\"label\">{{ label }}</span>\n  </Button>\n</template>\n"],"mappings":""}

package/dist/components/compositions/elements/action/LinkAction.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,59 @@
+import e from "../../../ui/button/Button.js";
+import "../../../ui/button/index.js";
+import { computed as t, createBlock as n, createCommentVNode as r, createElementBlock as i, defineComponent as a, openBlock as o, resolveDynamicComponent as s, toDisplayString as c, unref as l, withCtx as u } from "vue";
+import * as d from "@lucide/vue";
+//#region src/components/compositions/elements/action/LinkAction.vue?vue&type=script&setup=true&lang.ts
+var f = { key: 1 }, p = /* @__PURE__ */ a({
+	__name: "LinkAction",
+	props: {
+		label: {},
+		icon: {},
+		href: {},
+		target: { default: "_self" },
+		emit: {},
+		disabled: { type: Boolean },
+		id: {},
+		name: {}
+	},
+	emits: ["click", "action"],
+	setup(a, { emit: p }) {
+		let m = a, h = p, g = d;
+		function _(e) {
+			if (e) return g[e.split(/[-_\s]/).filter(Boolean).map((e) => e.charAt(0).toUpperCase() + e.slice(1)).join("")] ?? g[e];
+		}
+		let v = t(() => _(m.icon)), y = t(() => m.href ? "a" : "button");
+		function b(e) {
+			h("click", e), !m.href && (e.preventDefault(), m.emit && h("action", { name: m.emit }));
+		}
+		return (t, d) => (o(), n(l(e), {
+			id: a.id,
+			as: y.value,
+			variant: "link",
+			size: "sm",
+			disabled: a.disabled,
+			href: y.value === "a" ? a.href : void 0,
+			target: y.value === "a" ? a.target : void 0,
+			"data-action-name": h ?? a.label,
+			"data-element-name": a.name ?? void 0,
+			onClick: b
+		}, {
+			default: u(() => [v.value ? (o(), n(s(v.value), {
+				key: 0,
+				class: "h-4 w-4"
+			})) : r("", !0), a.label ? (o(), i("span", f, c(a.label), 1)) : r("", !0)]),
+			_: 1
+		}, 8, [
+			"id",
+			"as",
+			"disabled",
+			"href",
+			"target",
+			"data-action-name",
+			"data-element-name"
+		]));
+	}
+});
+//#endregion
+export { p as default };
+
+//# sourceMappingURL=LinkAction.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/compositions/elements/action/LinkAction.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LinkAction.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../src/components/compositions/elements/action/LinkAction.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven link composition. Renders a text link using the Button\n * primitive with variant=\"link\". Supports the same href / emit / confirm\n * behaviour as ButtonAction.\n *\n *   <LinkAction label=\"Open docs\" href=\"https://example.com\" target=\"_blank\" />\n *   <LinkAction label=\"Refresh\" emit=\"refresh\" @action=\"onAction\" />\n */\nimport { computed } from \"vue\"\nimport * as LucideIcons from \"@lucide/vue\"\nimport type { FunctionalComponent } from \"vue\"\n\ntype LucideIcon = FunctionalComponent\n\nimport { Button } from \"@/components/ui/button\"\n\nexport interface LinkActionProps {\n  label?: string\n  /** Lucide icon name rendered before the label. */\n  icon?: string\n  /** Navigation target. */\n  href?: string\n  target?: \"_self\" | \"_blank\" | \"_parent\" | \"_top\"\n  /** Custom event name emitted via `action` when clicked. */\n  emit?: string\n  disabled?: boolean\n  /** HTML id attribute. */\n  id?: string\n  /** HTML name (used as `data-element-name`). */\n  name?: string\n}\n\nconst props = withDefaults(defineProps<LinkActionProps>(), {\n  target: \"_self\",\n})\n\nconst emit = defineEmits<{\n  (e: \"click\", event: MouseEvent): void\n  (e: \"action\", payload: { name: string }): void\n}>()\n\nconst iconLibrary = LucideIcons as unknown as Record<string, LucideIcon>\nfunction resolveIcon(name: string | undefined): LucideIcon | undefined {\n  if (!name) {\n    return undefined\n  }\n  const pascal = name\n    .split(/[-_\\s]/)\n    .filter(Boolean)\n    .map((s) => s.charAt(0).toUpperCase() + s.slice(1))\n    .join(\"\")\n  return iconLibrary[pascal] ?? iconLibrary[name]\n}\nconst icon = computed(() => resolveIcon(props.icon))\n\nconst renderAs = computed<\"a\" | \"button\">(() =>\n  props.href ? \"a\" : \"button\",\n)\n\nfunction onClick(event: MouseEvent): void {\n  emit(\"click\", event)\n  if (props.href) {\n    return\n  }\n  event.preventDefault()\n  if (props.emit) {\n    emit(\"action\", { name: props.emit })\n  }\n}\n</script>\n\n<template>\n  <Button\n    :id=\"id\"\n    :as=\"renderAs\"\n    variant=\"link\"\n    size=\"sm\"\n    :disabled=\"disabled\"\n    :href=\"renderAs === 'a' ? href : undefined\"\n    :target=\"renderAs === 'a' ? target : undefined\"\n    :data-action-name=\"emit ?? label\"\n    :data-element-name=\"name ?? undefined\"\n    @click=\"onClick\"\n  >\n    <component :is=\"icon\" v-if=\"icon\" class=\"h-4 w-4\" />\n    <span v-if=\"label\">{{ label }}</span>\n  </Button>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;EAiCA,IAAM,IAAQ,GAIR,IAAO,GAKP,IAAc;EACpB,SAAS,EAAY,GAAkD;GAChE,OAQL,OAAO,EALQ,EACZ,MAAM,QAAQ,EACd,OAAO,OAAO,EACd,KAAK,MAAM,EAAE,OAAO,CAAC,EAAE,YAAY,IAAI,EAAE,MAAM,CAAC,CAAC,EACjD,KAAK,EACW,MAAW,EAAY;EAC5C;EACA,IAAM,IAAO,QAAe,EAAY,EAAM,IAAI,CAAC,GAE7C,IAAW,QACf,EAAM,OAAO,MAAM,QACrB;EAEA,SAAS,EAAQ,GAAyB;GACxC,EAAK,SAAS,CAAK,GACf,GAAM,SAGV,EAAM,eAAe,GACjB,EAAM,QACR,EAAK,UAAU,EAAE,MAAM,EAAM,KAAK,CAAC;EAEvC;yBAIE,EAcS,EAAA,CAAA,GAAA;GAbN,IAAI,EAAA;GACJ,IAAI,EAAA;GACL,SAAQ;GACR,MAAK;GACJ,UAAU,EAAA;GACV,MAAM,EAAA,UAAQ,MAAW,EAAA,OAAO,KAAA;GAChC,QAAQ,EAAA,UAAQ,MAAW,EAAA,SAAS,KAAA;GACpC,oBAAkB,KAAQ,EAAA;GAC1B,qBAAmB,EAAA,QAAQ,KAAA;GACpB;;oBAE4C,CAAxB,EAAA,SAAA,EAAA,GAA5B,EAAoD,EAApC,EAAA,KAAI,GAAA;;IAAc,OAAM;oBAC5B,EAAA,SAAA,EAAA,GAAZ,EAAqC,QAAA,GAAA,EAAf,EAAA,KAAK,GAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,CAAA"}

package/dist/components/compositions/elements/boolean/CheckboxBoolean.js

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

package/dist/components/compositions/elements/boolean/CheckboxBoolean.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxBoolean.js","names":[],"sources":["../../../../../src/components/compositions/elements/boolean/CheckboxBoolean.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven checkbox composition. Wraps the shadcn-vue Checkbox\n * primitive with `FieldFrame` chrome (label + helpText + errors).\n *\n *   <CheckboxBoolean v-model=\"agreed\" label=\"I agree\" required />\n */\nimport { Checkbox } from \"@/components/ui/checkbox\"\nimport { Label } from \"@/components/ui/label\"\nimport { FieldFrame } from \"@/components/ui/field-frame\"\n\nexport interface CheckboxBooleanProps {\n  modelValue?: boolean\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}\n\nwithDefaults(defineProps<CheckboxBooleanProps>(), {\n  errors: () => [],\n})\n\nconst model = defineModel<boolean>(\"modelValue\", { default: false })\n\nfunction onUpdate(checked: boolean | \"indeterminate\"): void {\n  model.value = checked === true\n}\n</script>\n\n<template>\n  <FieldFrame\n    :hide-label=\"true\"\n    :for=\"id\"\n    :help-text=\"helpText\"\n    :errors=\"errors\"\n  >\n    <div class=\"flex items-start gap-2\">\n      <Checkbox\n        :id=\"id\"\n        :name=\"name\"\n        :disabled=\"disabled || readonly\"\n        :required=\"required\"\n        :model-value=\"model\"\n        :data-element-name=\"name ?? undefined\"\n        @update:model-value=\"onUpdate\"\n      />\n      <Label\n        v-if=\"!hideLabel && label\"\n        :for=\"id\"\n        :required=\"required\"\n        class=\"cursor-pointer leading-tight\"\n        data-testid=\"field-frame-label\"\n      >\n        {{ label }}\n      </Label>\n      <span\n        v-else-if=\"label\"\n        class=\"sr-only\"\n        data-testid=\"field-frame-label-sr\"\n      >\n        {{ label }}\n      </span>\n    </div>\n  </FieldFrame>\n</template>\n"],"mappings":""}

package/dist/components/compositions/elements/boolean/CheckboxBoolean.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,81 @@
+import e from "../../../ui/checkbox/Checkbox.js";
+import "../../../ui/checkbox/index.js";
+import t from "../../../ui/label/Label.js";
+import "../../../ui/label/index.js";
+import n from "../../../ui/field-frame/FieldFrame.js";
+import "../../../ui/field-frame/index.js";
+import { createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createTextVNode as s, createVNode as c, defineComponent as l, mergeModels as u, openBlock as d, toDisplayString as f, unref as p, useModel as m, withCtx as h } from "vue";
+//#region src/components/compositions/elements/boolean/CheckboxBoolean.vue?vue&type=script&setup=true&lang.ts
+var g = { class: "flex items-start gap-2" }, _ = {
+	key: 1,
+	class: "sr-only",
+	"data-testid": "field-frame-label-sr"
+}, v = /* @__PURE__ */ l({
+	__name: "CheckboxBoolean",
+	props: /* @__PURE__ */ u({
+		modelValue: { type: Boolean },
+		id: {},
+		name: {},
+		label: {},
+		hideLabel: { type: Boolean },
+		required: { type: Boolean },
+		readonly: { type: Boolean },
+		disabled: { type: Boolean },
+		helpText: {},
+		errors: { default: () => [] }
+	}, {
+		modelValue: {
+			type: Boolean,
+			default: !1
+		},
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(l) {
+		let u = m(l, "modelValue");
+		function v(e) {
+			u.value = e === !0;
+		}
+		return (m, y) => (d(), r(p(n), {
+			"hide-label": !0,
+			for: l.id,
+			"help-text": l.helpText,
+			errors: l.errors
+		}, {
+			default: h(() => [o("div", g, [c(p(e), {
+				id: l.id,
+				name: l.name,
+				disabled: l.disabled || l.readonly,
+				required: l.required,
+				"model-value": u.value,
+				"data-element-name": l.name ?? void 0,
+				"onUpdate:modelValue": v
+			}, null, 8, [
+				"id",
+				"name",
+				"disabled",
+				"required",
+				"model-value",
+				"data-element-name"
+			]), !l.hideLabel && l.label ? (d(), r(p(t), {
+				key: 0,
+				for: l.id,
+				required: l.required,
+				class: "cursor-pointer leading-tight",
+				"data-testid": "field-frame-label"
+			}, {
+				default: h(() => [s(f(l.label), 1)]),
+				_: 1
+			}, 8, ["for", "required"])) : l.label ? (d(), a("span", _, f(l.label), 1)) : i("", !0)])]),
+			_: 1
+		}, 8, [
+			"for",
+			"help-text",
+			"errors"
+		]));
+	}
+});
+//#endregion
+export { v as default };
+
+//# sourceMappingURL=CheckboxBoolean.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/compositions/elements/boolean/CheckboxBoolean.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxBoolean.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../src/components/compositions/elements/boolean/CheckboxBoolean.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven checkbox composition. Wraps the shadcn-vue Checkbox\n * primitive with `FieldFrame` chrome (label + helpText + errors).\n *\n *   <CheckboxBoolean v-model=\"agreed\" label=\"I agree\" required />\n */\nimport { Checkbox } from \"@/components/ui/checkbox\"\nimport { Label } from \"@/components/ui/label\"\nimport { FieldFrame } from \"@/components/ui/field-frame\"\n\nexport interface CheckboxBooleanProps {\n  modelValue?: boolean\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}\n\nwithDefaults(defineProps<CheckboxBooleanProps>(), {\n  errors: () => [],\n})\n\nconst model = defineModel<boolean>(\"modelValue\", { default: false })\n\nfunction onUpdate(checked: boolean | \"indeterminate\"): void {\n  model.value = checked === true\n}\n</script>\n\n<template>\n  <FieldFrame\n    :hide-label=\"true\"\n    :for=\"id\"\n    :help-text=\"helpText\"\n    :errors=\"errors\"\n  >\n    <div class=\"flex items-start gap-2\">\n      <Checkbox\n        :id=\"id\"\n        :name=\"name\"\n        :disabled=\"disabled || readonly\"\n        :required=\"required\"\n        :model-value=\"model\"\n        :data-element-name=\"name ?? undefined\"\n        @update:model-value=\"onUpdate\"\n      />\n      <Label\n        v-if=\"!hideLabel && label\"\n        :for=\"id\"\n        :required=\"required\"\n        class=\"cursor-pointer leading-tight\"\n        data-testid=\"field-frame-label\"\n      >\n        {{ label }}\n      </Label>\n      <span\n        v-else-if=\"label\"\n        class=\"sr-only\"\n        data-testid=\"field-frame-label-sr\"\n      >\n        {{ label }}\n      </span>\n    </div>\n  </FieldFrame>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4BA,IAAM,IAAQ,EAAoB,GAAC,YAAgC;EAEnE,SAAS,EAAS,GAA0C;GAC1D,EAAM,QAAQ,MAAY;EAC5B;yBAIE,EAiCa,EAAA,CAAA,GAAA;GAhCV,cAAY;GACZ,KAAK,EAAA;GACL,aAAW,EAAA;GACX,QAAQ,EAAA;;oBA4BH,CA1BN,EA0BM,OA1BN,GA0BM,CAzBJ,EAQE,EAAA,CAAA,GAAA;IAPC,IAAI,EAAA;IACJ,MAAM,EAAA;IACN,UAAU,EAAA,YAAY,EAAA;IACtB,UAAU,EAAA;IACV,eAAa,EAAA;IACb,qBAAmB,EAAA,QAAQ,KAAA;IAC3B,uBAAoB;;;;;;;;QAGd,EAAA,aAAa,EAAA,SAAA,EAAA,GADtB,EAQQ,EAAA,CAAA,GAAA;;IANL,KAAK,EAAA;IACL,UAAU,EAAA;IACX,OAAM;IACN,eAAY;;qBAED,CAAA,EAAA,EAAR,EAAA,KAAK,GAAA,CAAA,CAAA,CAAA;;iCAGG,EAAA,SAAA,EAAA,GADb,EAMO,QANP,GAMO,EADF,EAAA,KAAK,GAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,CAAA,CAAA,CAAA"}

package/dist/components/compositions/elements/boolean/IconToggleBoolean.js

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

package/dist/components/compositions/elements/boolean/IconToggleBoolean.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconToggleBoolean.js","names":[],"sources":["../../../../../src/components/compositions/elements/boolean/IconToggleBoolean.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven icon-toggle composition. Renders a Toggle primitive that\n * shows `trueIcon` when pressed and `falseIcon` when not. Icons are\n * looked up from `@lucide/vue` by name; missing icons fall back to\n * `ToggleRight` / `ToggleLeft`.\n *\n *   <IconToggleBoolean\n *     v-model=\"darkMode\"\n *     label=\"Dark mode\"\n *     true-icon=\"moon\"\n *     false-icon=\"sun\"\n *   />\n */\nimport { computed } from \"vue\"\nimport { ToggleLeft, ToggleRight } from \"@lucide/vue\"\nimport * as LucideIcons from \"@lucide/vue\"\nimport type { FunctionalComponent } from \"vue\"\n\ntype LucideIcon = FunctionalComponent\n\nimport { Toggle } from \"@/components/ui/toggle\"\nimport { FieldFrame } from \"@/components/ui/field-frame\"\n\nexport interface IconToggleBooleanProps {\n  modelValue?: boolean\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  /** Lucide icon shown when value is true. */\n  trueIcon?: string\n  /** Lucide icon shown when value is false. */\n  falseIcon?: string\n}\n\nconst props = withDefaults(defineProps<IconToggleBooleanProps>(), {\n  errors: () => [],\n})\n\nconst model = defineModel<boolean>(\"modelValue\", { default: false })\n\nconst iconLibrary = LucideIcons as unknown as Record<string, LucideIcon>\n\nfunction resolveIcon(name: string | undefined, fallback: LucideIcon): LucideIcon {\n  if (!name) {\n    return fallback\n  }\n  const pascal = name\n    .split(/[-_\\s]/)\n    .filter(Boolean)\n    .map((s) => s.charAt(0).toUpperCase() + s.slice(1))\n    .join(\"\")\n  return iconLibrary[pascal] ?? iconLibrary[name] ?? fallback\n}\n\nconst trueIconComponent = computed(() =>\n  resolveIcon(props.trueIcon, ToggleRight),\n)\nconst falseIconComponent = computed(() =>\n  resolveIcon(props.falseIcon, ToggleLeft),\n)\n\nconst activeIcon = computed(() =>\n  model.value ? trueIconComponent.value : falseIconComponent.value,\n)\n\nfunction onUpdate(pressed: boolean): void {\n  model.value = pressed\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    <Toggle\n      :id=\"id\"\n      :name=\"name\"\n      :disabled=\"disabled || readonly\"\n      :required=\"required\"\n      :pressed=\"model\"\n      variant=\"outline\"\n      :data-element-name=\"name ?? undefined\"\n      :aria-label=\"label\"\n      @update:pressed=\"onUpdate\"\n    >\n      <component :is=\"activeIcon\" class=\"h-4 w-4\" />\n    </Toggle>\n  </FieldFrame>\n</template>\n"],"mappings":""}

package/dist/components/compositions/elements/boolean/IconToggleBoolean.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,85 @@
+import e from "../../../ui/toggle/Toggle.js";
+import "../../../ui/toggle/index.js";
+import t from "../../../ui/field-frame/FieldFrame.js";
+import "../../../ui/field-frame/index.js";
+import { computed as n, createBlock as r, createVNode as i, defineComponent as a, mergeModels as o, openBlock as s, resolveDynamicComponent as c, unref as l, useModel as u, withCtx as d } from "vue";
+import * as f from "@lucide/vue";
+import { ToggleLeft as p, ToggleRight as m } from "@lucide/vue";
+//#region src/components/compositions/elements/boolean/IconToggleBoolean.vue?vue&type=script&setup=true&lang.ts
+var h = /* @__PURE__ */ a({
+	__name: "IconToggleBoolean",
+	props: /* @__PURE__ */ o({
+		modelValue: { type: Boolean },
+		id: {},
+		name: {},
+		label: {},
+		hideLabel: { type: Boolean },
+		required: { type: Boolean },
+		readonly: { type: Boolean },
+		disabled: { type: Boolean },
+		helpText: {},
+		errors: { default: () => [] },
+		trueIcon: {},
+		falseIcon: {}
+	}, {
+		modelValue: {
+			type: Boolean,
+			default: !1
+		},
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(a) {
+		let o = a, h = u(a, "modelValue"), g = f;
+		function _(e, t) {
+			return e ? g[e.split(/[-_\s]/).filter(Boolean).map((e) => e.charAt(0).toUpperCase() + e.slice(1)).join("")] ?? g[e] ?? t : t;
+		}
+		let v = n(() => _(o.trueIcon, m)), y = n(() => _(o.falseIcon, p)), b = n(() => h.value ? v.value : y.value);
+		function x(e) {
+			h.value = e;
+		}
+		return (n, o) => (s(), r(l(t), {
+			label: a.label,
+			required: a.required,
+			"hide-label": a.hideLabel,
+			for: a.id,
+			"help-text": a.helpText,
+			errors: a.errors
+		}, {
+			default: d(() => [i(l(e), {
+				id: a.id,
+				name: a.name,
+				disabled: a.disabled || a.readonly,
+				required: a.required,
+				pressed: h.value,
+				variant: "outline",
+				"data-element-name": a.name ?? void 0,
+				"aria-label": a.label,
+				"onUpdate:pressed": x
+			}, {
+				default: d(() => [(s(), r(c(b.value), { class: "h-4 w-4" }))]),
+				_: 1
+			}, 8, [
+				"id",
+				"name",
+				"disabled",
+				"required",
+				"pressed",
+				"data-element-name",
+				"aria-label"
+			])]),
+			_: 1
+		}, 8, [
+			"label",
+			"required",
+			"hide-label",
+			"for",
+			"help-text",
+			"errors"
+		]));
+	}
+});
+//#endregion
+export { h as default };
+
+//# sourceMappingURL=IconToggleBoolean.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/compositions/elements/boolean/IconToggleBoolean.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconToggleBoolean.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../src/components/compositions/elements/boolean/IconToggleBoolean.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven icon-toggle composition. Renders a Toggle primitive that\n * shows `trueIcon` when pressed and `falseIcon` when not. Icons are\n * looked up from `@lucide/vue` by name; missing icons fall back to\n * `ToggleRight` / `ToggleLeft`.\n *\n *   <IconToggleBoolean\n *     v-model=\"darkMode\"\n *     label=\"Dark mode\"\n *     true-icon=\"moon\"\n *     false-icon=\"sun\"\n *   />\n */\nimport { computed } from \"vue\"\nimport { ToggleLeft, ToggleRight } from \"@lucide/vue\"\nimport * as LucideIcons from \"@lucide/vue\"\nimport type { FunctionalComponent } from \"vue\"\n\ntype LucideIcon = FunctionalComponent\n\nimport { Toggle } from \"@/components/ui/toggle\"\nimport { FieldFrame } from \"@/components/ui/field-frame\"\n\nexport interface IconToggleBooleanProps {\n  modelValue?: boolean\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  /** Lucide icon shown when value is true. */\n  trueIcon?: string\n  /** Lucide icon shown when value is false. */\n  falseIcon?: string\n}\n\nconst props = withDefaults(defineProps<IconToggleBooleanProps>(), {\n  errors: () => [],\n})\n\nconst model = defineModel<boolean>(\"modelValue\", { default: false })\n\nconst iconLibrary = LucideIcons as unknown as Record<string, LucideIcon>\n\nfunction resolveIcon(name: string | undefined, fallback: LucideIcon): LucideIcon {\n  if (!name) {\n    return fallback\n  }\n  const pascal = name\n    .split(/[-_\\s]/)\n    .filter(Boolean)\n    .map((s) => s.charAt(0).toUpperCase() + s.slice(1))\n    .join(\"\")\n  return iconLibrary[pascal] ?? iconLibrary[name] ?? fallback\n}\n\nconst trueIconComponent = computed(() =>\n  resolveIcon(props.trueIcon, ToggleRight),\n)\nconst falseIconComponent = computed(() =>\n  resolveIcon(props.falseIcon, ToggleLeft),\n)\n\nconst activeIcon = computed(() =>\n  model.value ? trueIconComponent.value : falseIconComponent.value,\n)\n\nfunction onUpdate(pressed: boolean): void {\n  model.value = pressed\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    <Toggle\n      :id=\"id\"\n      :name=\"name\"\n      :disabled=\"disabled || readonly\"\n      :required=\"required\"\n      :pressed=\"model\"\n      variant=\"outline\"\n      :data-element-name=\"name ?? undefined\"\n      :aria-label=\"label\"\n      @update:pressed=\"onUpdate\"\n    >\n      <component :is=\"activeIcon\" class=\"h-4 w-4\" />\n    </Toggle>\n  </FieldFrame>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAyCA,IAAM,IAAQ,GAIR,IAAQ,EAAoB,GAAC,YAAgC,GAE7D,IAAc;EAEpB,SAAS,EAAY,GAA0B,GAAkC;GAS/E,OARK,IAQE,EALQ,EACZ,MAAM,QAAQ,EACd,OAAO,OAAO,EACd,KAAK,MAAM,EAAE,OAAO,CAAC,EAAE,YAAY,IAAI,EAAE,MAAM,CAAC,CAAC,EACjD,KAAK,EACW,MAAW,EAAY,MAAS,IAP1C;EAQX;EAEA,IAAM,IAAoB,QACxB,EAAY,EAAM,UAAU,CAAW,CACzC,GACM,IAAqB,QACzB,EAAY,EAAM,WAAW,CAAU,CACzC,GAEM,IAAa,QACjB,EAAM,QAAQ,EAAkB,QAAQ,EAAmB,KAC7D;EAEA,SAAS,EAAS,GAAwB;GACxC,EAAM,QAAQ;EAChB;yBAIE,EAqBa,EAAA,CAAA,GAAA;GApBV,OAAO,EAAA;GACP,UAAU,EAAA;GACV,cAAY,EAAA;GACZ,KAAK,EAAA;GACL,aAAW,EAAA;GACX,QAAQ,EAAA;;oBAcA,CAZT,EAYS,EAAA,CAAA,GAAA;IAXN,IAAI,EAAA;IACJ,MAAM,EAAA;IACN,UAAU,EAAA,YAAY,EAAA;IACtB,UAAU,EAAA;IACV,SAAS,EAAA;IACV,SAAQ;IACP,qBAAmB,EAAA,QAAQ,KAAA;IAC3B,cAAY,EAAA;IACZ,oBAAgB;;qBAE6B,EAAA,EAAA,GAA9C,EAA8C,EAA9B,EAAA,KAAU,GAAA,EAAE,OAAM,UAAS,CAAA,EAAA,CAAA"}

package/dist/components/compositions/elements/boolean/RadioBoolean.js

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

package/dist/components/compositions/elements/boolean/RadioBoolean.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioBoolean.js","names":[],"sources":["../../../../../src/components/compositions/elements/boolean/RadioBoolean.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven radio composition for boolean values. Renders a\n * RadioGroup with two items: \"true\" and \"false\". Labels default to\n * \"Yes\" / \"No\" but can be customised via `trueLabel` / `falseLabel`.\n *\n *   <RadioBoolean v-model=\"agreed\" label=\"Agree?\" />\n *   <RadioBoolean\n *     v-model=\"agreed\"\n *     label=\"Agree?\"\n *     true-label=\"Of course\"\n *     false-label=\"Never\"\n *     inline\n *   />\n */\nimport { computed } from \"vue\"\nimport { RadioGroup, RadioGroupItem } from \"@/components/ui/radio-group\"\nimport { Label } from \"@/components/ui/label\"\nimport { FieldFrame } from \"@/components/ui/field-frame\"\n\nexport interface RadioBooleanProps {\n  modelValue?: boolean\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  /** Label for the \"true\" option. Defaults to \"Yes\". */\n  trueLabel?: string\n  /** Label for the \"false\" option. Defaults to \"No\". */\n  falseLabel?: string\n  /** Render both choices on the same row. */\n  inline?: boolean\n}\n\nconst props = withDefaults(defineProps<RadioBooleanProps>(), {\n  errors: () => [],\n  trueLabel: \"Yes\",\n  falseLabel: \"No\",\n})\n\nconst model = defineModel<boolean>(\"modelValue\", { default: false })\n\nconst stringValue = computed<string>(() => (model.value ? \"true\" : \"false\"))\n\nconst trueId = computed(() => `${props.id ?? \"radio-bool\"}-true`)\nconst falseId = computed(() => `${props.id ?? \"radio-bool\"}-false`)\n\nfunction onUpdate(next: unknown): void {\n  const v = Array.isArray(next) ? next[0] : next\n  model.value = v === \"true\"\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    <RadioGroup\n      :model-value=\"stringValue\"\n      :name=\"name\"\n      :disabled=\"disabled || readonly\"\n      :required=\"required\"\n      :data-element-name=\"name ?? undefined\"\n      :class=\"inline ? 'flex flex-row gap-4' : 'grid gap-2'\"\n      @update:model-value=\"onUpdate\"\n    >\n      <div class=\"flex items-center gap-2\">\n        <RadioGroupItem :id=\"trueId\" value=\"true\" />\n        <Label :for=\"trueId\" class=\"cursor-pointer\">{{ trueLabel }}</Label>\n      </div>\n      <div class=\"flex items-center gap-2\">\n        <RadioGroupItem :id=\"falseId\" value=\"false\" />\n        <Label :for=\"falseId\" class=\"cursor-pointer\">{{ falseLabel }}</Label>\n      </div>\n    </RadioGroup>\n  </FieldFrame>\n</template>\n"],"mappings":""}