@alfakit/vue 0.0.0-stage → 0.1.0

package/dist/components/fields/TextInputField.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,226 @@
+import { useT as e } from "../../context.js";
+import { cn as t } from "../../lib/utils.js";
+import { textColorClasses as n } from "../../lib/colors.js";
+import r from "../../lib/Icon.js";
+import i from "../ui/Button2.js";
+import { useField as a } from "../form/form-context.js";
+import o from "../ui/Input.js";
+import s from "../schema/FieldWrapper.js";
+import { applyMask as c } from "@alfakit/core";
+import { Fragment as l, computed as u, createBlock as d, createCommentVNode as f, createElementBlock as p, createTextVNode as m, createVNode as h, defineComponent as g, mergeProps as _, normalizeClass as v, onBeforeUnmount as y, openBlock as b, ref as x, renderList as S, toDisplayString as C, unref as w, withCtx as T } from "vue";
+import { CheckIcon as E, CopyIcon as D, EyeIcon as O, EyeOffIcon as k } from "@lucide/vue";
+//#region src/components/fields/TextInputField.vue?vue&type=script&setup=true&lang.ts
+var A = {
+	key: 0,
+	class: "text-muted-foreground bg-muted/50 flex items-center gap-1 border-e px-3 text-sm"
+}, j = {
+	key: 1,
+	class: "text-muted-foreground bg-muted/50 flex items-center gap-1 border-s px-3 text-sm"
+}, M = ["id"], N = ["value"], P = /*@__PURE__*/ g({
+	__name: "TextInputField",
+	props: { component: {} },
+	setup(g) {
+		let P = /* @__PURE__ */ new Set([
+			"email",
+			"url",
+			"tel",
+			"password",
+			"number"
+		]), F = g, { value: I, setValue: L, blur: R, error: z, id: B, disabled: V, aria: H } = a(() => F.component), U = x(!1), W = x(!1), G;
+		y(() => clearTimeout(G));
+		let K = () => {
+			let e = I.value === null || I.value === void 0 ? "" : String(I.value);
+			navigator.clipboard?.writeText(e).then(() => {
+				W.value = !0, clearTimeout(G), G = setTimeout(() => W.value = !1, F.component.copyMessageDuration ?? 1500);
+			});
+		}, q = u(() => F.component.inputType === "password" && U.value ? "text" : F.component.inputType), J = u(() => !!(F.component.prefix || F.component.suffix || F.component.prefixIcon || F.component.suffixIcon || F.component.revealable || F.component.copyable)), Y = u(() => P.has(F.component.inputType) ? "ltr" : "auto"), X = u(() => F.component.datalist ? `${B}-list` : void 0), Z = e(), Q = (e) => {
+			let t = e.target, n = c(t.value, F.component.mask);
+			n !== t.value && (t.value = n);
+		};
+		return (e, a) => (b(), d(s, {
+			field: F.component,
+			"html-for": w(B),
+			error: w(z)
+		}, {
+			default: T(() => [
+				J.value ? (b(), p("div", {
+					key: 0,
+					"data-slot": "input-group",
+					class: v(w(t)("border-input dark:bg-input/30 has-[input:focus-visible]:border-ring has-[input:focus-visible]:ring-ring/50 flex h-9 w-full items-stretch overflow-hidden rounded-md border shadow-xs has-[input:focus-visible]:ring-[3px]", w(z) && "border-destructive"))
+				}, [
+					F.component.prefix || F.component.prefixIcon ? (b(), p("span", A, [h(w(r), {
+						name: F.component.prefixIcon,
+						class: v(F.component.prefixIconColor && w(n)[F.component.prefixIconColor])
+					}, null, 8, ["name", "class"]), m(" " + C(F.component.prefix), 1)])) : f("", !0),
+					h(o, _({
+						id: w(B),
+						dir: Y.value,
+						name: F.component.name,
+						type: q.value,
+						"model-value": w(I) ?? "",
+						placeholder: F.component.placeholder,
+						disabled: w(V),
+						readonly: F.component.readOnly,
+						required: F.component.required,
+						autofocus: F.component.autofocus,
+						minlength: F.component.minLength,
+						maxlength: F.component.maxLength,
+						min: F.component.min,
+						max: F.component.max,
+						step: F.component.step,
+						autocomplete: F.component.autocomplete,
+						inputmode: F.component.inputMode,
+						autocapitalize: F.component.autocapitalize,
+						list: X.value,
+						"aria-invalid": w(H)["aria-invalid"],
+						"aria-describedby": w(H)["aria-describedby"],
+						"aria-required": w(H)["aria-required"],
+						class: "h-full border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent"
+					}, F.component.extraInputAttributes, {
+						onInput: Q,
+						"onUpdate:modelValue": a[0] ||= (e) => w(L)(e),
+						onBlur: w(R)
+					}), null, 16, [
+						"id",
+						"dir",
+						"name",
+						"type",
+						"model-value",
+						"placeholder",
+						"disabled",
+						"readonly",
+						"required",
+						"autofocus",
+						"minlength",
+						"maxlength",
+						"min",
+						"max",
+						"step",
+						"autocomplete",
+						"inputmode",
+						"autocapitalize",
+						"list",
+						"aria-invalid",
+						"aria-describedby",
+						"aria-required",
+						"onBlur"
+					]),
+					F.component.suffix || F.component.suffixIcon ? (b(), p("span", j, [m(C(F.component.suffix) + " ", 1), h(w(r), {
+						name: F.component.suffixIcon,
+						class: v(F.component.suffixIconColor && w(n)[F.component.suffixIconColor])
+					}, null, 8, ["name", "class"])])) : f("", !0),
+					F.component.revealable ? (b(), d(i, {
+						key: 2,
+						type: "button",
+						variant: "ghost",
+						size: "icon-sm",
+						class: "my-auto me-1",
+						"aria-label": U.value ? w(Z)("form.hide_password", {}, "Hide password") : w(Z)("form.show_password", {}, "Show password"),
+						onClick: a[1] ||= (e) => U.value = !U.value
+					}, {
+						default: T(() => [U.value ? (b(), d(w(r), {
+							key: 0,
+							name: "alfakit::forms.components.text-input.actions.hide-password",
+							fallback: w(k)
+						}, null, 8, ["fallback"])) : (b(), d(w(r), {
+							key: 1,
+							name: "alfakit::forms.components.text-input.actions.show-password",
+							fallback: w(O)
+						}, null, 8, ["fallback"]))]),
+						_: 1
+					}, 8, ["aria-label"])) : f("", !0),
+					F.component.copyable ? (b(), d(i, {
+						key: 3,
+						type: "button",
+						variant: "ghost",
+						size: "icon-sm",
+						class: "my-auto me-1",
+						"data-slot": "copy-button",
+						"aria-label": w(Z)("copy", {}, "Copy"),
+						onClick: K
+					}, {
+						default: T(() => [W.value ? (b(), d(w(E), { key: 0 })) : (b(), d(w(r), {
+							key: 1,
+							name: "alfakit::forms.components.text-input.actions.copy",
+							fallback: w(D)
+						}, null, 8, ["fallback"]))]),
+						_: 1
+					}, 8, ["aria-label"])) : f("", !0)
+				], 2)) : (b(), d(o, _({
+					key: 1,
+					id: w(B),
+					dir: Y.value,
+					name: F.component.name,
+					type: q.value,
+					"model-value": w(I) ?? "",
+					placeholder: F.component.placeholder,
+					disabled: w(V),
+					readonly: F.component.readOnly,
+					required: F.component.required,
+					autofocus: F.component.autofocus,
+					minlength: F.component.minLength,
+					maxlength: F.component.maxLength,
+					min: F.component.min,
+					max: F.component.max,
+					step: F.component.step,
+					autocomplete: F.component.autocomplete,
+					inputmode: F.component.inputMode,
+					autocapitalize: F.component.autocapitalize,
+					list: X.value,
+					"aria-invalid": w(H)["aria-invalid"],
+					"aria-describedby": w(H)["aria-describedby"],
+					"aria-required": w(H)["aria-required"]
+				}, F.component.extraInputAttributes, {
+					onInput: Q,
+					"onUpdate:modelValue": a[2] ||= (e) => w(L)(e),
+					onBlur: w(R)
+				}), null, 16, [
+					"id",
+					"dir",
+					"name",
+					"type",
+					"model-value",
+					"placeholder",
+					"disabled",
+					"readonly",
+					"required",
+					"autofocus",
+					"minlength",
+					"maxlength",
+					"min",
+					"max",
+					"step",
+					"autocomplete",
+					"inputmode",
+					"autocapitalize",
+					"list",
+					"aria-invalid",
+					"aria-describedby",
+					"aria-required",
+					"onBlur"
+				])),
+				F.component.copyable && W.value ? (b(), p("span", {
+					key: 2,
+					role: "status",
+					class: v(w(t)("text-xs", !F.component.copyMessage && "sr-only"))
+				}, C(F.component.copyMessage ?? w(Z)("copied", {}, "Copied")), 3)) : f("", !0),
+				F.component.datalist ? (b(), p("datalist", {
+					key: 3,
+					id: X.value
+				}, [(b(!0), p(l, null, S(F.component.datalist, (e) => (b(), p("option", {
+					key: e,
+					value: e
+				}, null, 8, N))), 128))], 8, M)) : f("", !0)
+			]),
+			_: 1
+		}, 8, [
+			"field",
+			"html-for",
+			"error"
+		]));
+	}
+});
+//#endregion
+export { P as default };
+
+//# sourceMappingURL=TextInputField.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/fields/TextInputField.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextInputField.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","FieldWrapper","_unref","_withCtx","_createElementBlock","_normalizeClass","_createVNode","Icon","_createTextVNode","_toDisplayString","_createCommentVNode","Input","_mergeProps","Button","_Fragment","_renderList","Icon_default","Button_default","Input_default","FieldWrapper_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","TextInputField_vue_vue_type_script_setup_true_lang_default","LTR_INPUT_TYPES","props","__props","useField","revealed","ref","copied","copiedTimer","copy","text","value","type","computed","hasAffixes","dir","listId","id","t","useT","onMaskInput","input","event","masked","applyMask","openBlock","createBlock","unref","error","withCtx","createElementBlock","normalizeClass","cn","createVNode","textColorClasses","createTextVNode","toDisplayString","createCommentVNode","mergeProps","disabled","aria","_cache","setValue","$event","blur","EyeOffIcon","EyeIcon","CheckIcon","CopyIcon","Fragment","renderList","option"],"sources":["../../../src/components/fields/TextInputField.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { applyMask, type TextInputSchema } from '@alfakit/core'\nimport { CheckIcon, CopyIcon, EyeIcon, EyeOffIcon } from '@lucide/vue'\nimport { computed, onBeforeUnmount, ref } from 'vue'\nimport { textColorClasses } from '../../lib/colors'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport { useField } from '../form/form-context'\nimport FieldWrapper from '../schema/FieldWrapper.vue'\nimport Button from '../ui/Button.vue'\nimport Input from '../ui/Input.vue'\nimport { useT } from '../../context'\n\nconst LTR_INPUT_TYPES = new Set(['email', 'url', 'tel', 'password', 'number'])\n\nconst props = defineProps<{ component: TextInputSchema }>()\nconst { value, setValue, blur, error, id, disabled, aria } = useField<string | number | null>(\n  () => props.component,\n)\nconst revealed = ref(false)\nconst copied = ref(false)\nlet copiedTimer: ReturnType<typeof setTimeout> | undefined\n\nonBeforeUnmount(() => clearTimeout(copiedTimer))\n\n// `copyable()`: copy the current value; the confirmation stays for `copyMessageDuration`.\nconst copy = () => {\n  const text = value.value === null || value.value === undefined ? '' : String(value.value)\n\n  void navigator.clipboard?.writeText(text).then(() => {\n    copied.value = true\n    clearTimeout(copiedTimer)\n    copiedTimer = setTimeout(\n      () => (copied.value = false),\n      props.component.copyMessageDuration ?? 1500,\n    )\n  })\n}\n\nconst type = computed(() =>\n  props.component.inputType === 'password' && revealed.value ? 'text' : props.component.inputType,\n)\nconst hasAffixes = computed(() =>\n  Boolean(\n    props.component.prefix ||\n    props.component.suffix ||\n    props.component.prefixIcon ||\n    props.component.suffixIcon ||\n    props.component.revealable ||\n    props.component.copyable,\n  ),\n)\n// Addresses, numbers and passwords are always written left to right.\nconst dir = computed(() => (LTR_INPUT_TYPES.has(props.component.inputType) ? 'ltr' : 'auto'))\nconst listId = computed(() => (props.component.datalist ? `${id}-list` : undefined))\nconst t = useT()\n\n// `mask()`: reformat what was typed before the value is emitted (the DOM is corrected too,\n// since a rejected character leaves the model value unchanged).\nconst onMaskInput = (event: Event) => {\n  const input = event.target as HTMLInputElement\n  const masked = applyMask(input.value, props.component.mask)\n\n  if (masked !== input.value) input.value = masked\n}\n</script>\n\n<template>\n  <FieldWrapper :field=\"props.component\" :html-for=\"id\" :error=\"error\">\n    <div\n      v-if=\"hasAffixes\"\n      data-slot=\"input-group\"\n      :class=\"\n        cn(\n          'border-input dark:bg-input/30 has-[input:focus-visible]:border-ring has-[input:focus-visible]:ring-ring/50 flex h-9 w-full items-stretch overflow-hidden rounded-md border shadow-xs has-[input:focus-visible]:ring-[3px]',\n          error && 'border-destructive',\n        )\n      \"\n    >\n      <span\n        v-if=\"props.component.prefix || props.component.prefixIcon\"\n        class=\"text-muted-foreground bg-muted/50 flex items-center gap-1 border-e px-3 text-sm\"\n      >\n        <Icon\n          :name=\"props.component.prefixIcon\"\n          :class=\"\n            props.component.prefixIconColor && textColorClasses[props.component.prefixIconColor]\n          \"\n        />\n        {{ props.component.prefix }}\n      </span>\n      <Input\n        :id=\"id\"\n        :dir=\"dir\"\n        :name=\"props.component.name\"\n        :type=\"type\"\n        :model-value=\"value ?? ''\"\n        :placeholder=\"props.component.placeholder\"\n        :disabled=\"disabled\"\n        :readonly=\"props.component.readOnly\"\n        :required=\"props.component.required\"\n        :autofocus=\"props.component.autofocus\"\n        :minlength=\"props.component.minLength\"\n        :maxlength=\"props.component.maxLength\"\n        :min=\"props.component.min\"\n        :max=\"props.component.max\"\n        :step=\"props.component.step\"\n        :autocomplete=\"props.component.autocomplete\"\n        :inputmode=\"props.component.inputMode\"\n        :autocapitalize=\"props.component.autocapitalize\"\n        :list=\"listId\"\n        :aria-invalid=\"aria['aria-invalid']\"\n        :aria-describedby=\"aria['aria-describedby']\"\n        :aria-required=\"aria['aria-required']\"\n        class=\"h-full border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent\"\n        v-bind=\"props.component.extraInputAttributes\"\n        @input=\"onMaskInput\"\n        @update:model-value=\"setValue($event)\"\n        @blur=\"blur\"\n      />\n      <span\n        v-if=\"props.component.suffix || props.component.suffixIcon\"\n        class=\"text-muted-foreground bg-muted/50 flex items-center gap-1 border-s px-3 text-sm\"\n      >\n        {{ props.component.suffix }}\n        <Icon\n          :name=\"props.component.suffixIcon\"\n          :class=\"\n            props.component.suffixIconColor && textColorClasses[props.component.suffixIconColor]\n          \"\n        />\n      </span>\n      <Button\n        v-if=\"props.component.revealable\"\n        type=\"button\"\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"my-auto me-1\"\n        :aria-label=\"\n          revealed\n            ? t('form.hide_password', {}, 'Hide password')\n            : t('form.show_password', {}, 'Show password')\n        \"\n        @click=\"revealed = !revealed\"\n      >\n        <Icon\n          v-if=\"revealed\"\n          name=\"alfakit::forms.components.text-input.actions.hide-password\"\n          :fallback=\"EyeOffIcon\"\n        />\n        <Icon\n          v-else\n          name=\"alfakit::forms.components.text-input.actions.show-password\"\n          :fallback=\"EyeIcon\"\n        />\n      </Button>\n      <Button\n        v-if=\"props.component.copyable\"\n        type=\"button\"\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"my-auto me-1\"\n        data-slot=\"copy-button\"\n        :aria-label=\"t('copy', {}, 'Copy')\"\n        @click=\"copy\"\n      >\n        <CheckIcon v-if=\"copied\" />\n        <Icon\n          v-else\n          name=\"alfakit::forms.components.text-input.actions.copy\"\n          :fallback=\"CopyIcon\"\n        />\n      </Button>\n    </div>\n    <Input\n      v-else\n      :id=\"id\"\n      :dir=\"dir\"\n      :name=\"props.component.name\"\n      :type=\"type\"\n      :model-value=\"value ?? ''\"\n      :placeholder=\"props.component.placeholder\"\n      :disabled=\"disabled\"\n      :readonly=\"props.component.readOnly\"\n      :required=\"props.component.required\"\n      :autofocus=\"props.component.autofocus\"\n      :minlength=\"props.component.minLength\"\n      :maxlength=\"props.component.maxLength\"\n      :min=\"props.component.min\"\n      :max=\"props.component.max\"\n      :step=\"props.component.step\"\n      :autocomplete=\"props.component.autocomplete\"\n      :inputmode=\"props.component.inputMode\"\n      :autocapitalize=\"props.component.autocapitalize\"\n      :list=\"listId\"\n      :aria-invalid=\"aria['aria-invalid']\"\n      :aria-describedby=\"aria['aria-describedby']\"\n      :aria-required=\"aria['aria-required']\"\n      v-bind=\"props.component.extraInputAttributes\"\n      @input=\"onMaskInput\"\n      @update:model-value=\"setValue($event)\"\n      @blur=\"blur\"\n    />\n    <span\n      v-if=\"props.component.copyable && copied\"\n      role=\"status\"\n      :class=\"cn('text-xs', !props.component.copyMessage && 'sr-only')\"\n    >\n      {{ props.component.copyMessage ?? t('copied', {}, 'Copied') }}\n    </span>\n    <datalist v-if=\"props.component.datalist\" :id=\"listId\">\n      <option v-for=\"option in props.component.datalist\" :key=\"option\" :value=\"option\" />\n    </datalist>\n  </FieldWrapper>\n</template>\n"],"mappings":"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"}

package/dist/components/fields/TextareaField.js

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

package/dist/components/fields/TextareaField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextareaField.js","names":["_sfc_main","TextareaField_vue_vue_type_script_setup_true_lang_default","TextareaField_default"],"sources":["../../../src/components/fields/TextareaField.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { TextareaSchema } from '@alfakit/core'\nimport { useField } from '../form/form-context'\nimport FieldWrapper from '../schema/FieldWrapper.vue'\nimport Textarea from '../ui/Textarea.vue'\n\nconst props = defineProps<{ component: TextareaSchema }>()\nconst { value, setValue, blur, error, id, disabled, aria } = useField<string | null>(\n  () => props.component,\n)\n</script>\n\n<template>\n  <FieldWrapper :field=\"props.component\" :html-for=\"id\" :error=\"error\">\n    <Textarea\n      :id=\"id\"\n      dir=\"auto\"\n      :name=\"props.component.name\"\n      :model-value=\"value ?? ''\"\n      :placeholder=\"props.component.placeholder\"\n      :disabled=\"disabled\"\n      :readonly=\"props.component.readOnly\"\n      :required=\"props.component.required\"\n      :autofocus=\"props.component.autofocus\"\n      :rows=\"props.component.rows\"\n      :cols=\"props.component.cols\"\n      :minlength=\"props.component.minLength\"\n      :maxlength=\"props.component.maxLength\"\n      :aria-invalid=\"aria['aria-invalid']\"\n      :aria-describedby=\"aria['aria-describedby']\"\n      :aria-required=\"aria['aria-required']\"\n      :class=\"props.component.autosize ? 'field-sizing-content' : undefined\"\n      v-bind=\"props.component.extraInputAttributes\"\n      @update:model-value=\"setValue($event)\"\n      @blur=\"blur\"\n    />\n  </FieldWrapper>\n</template>\n"],"mappings":""}

package/dist/components/fields/TextareaField.vue.d.ts

@@ -0,0 +1,7 @@
+import type { TextareaSchema } from '@alfakit/core';
+type __VLS_Props = {
+    component: TextareaSchema;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;
+//# sourceMappingURL=TextareaField.vue.d.ts.map

package/dist/components/fields/TextareaField.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextareaField.vue.d.ts","sourceRoot":"","sources":["../../../src/components/fields/TextareaField.vue"],"names":[],"mappings":"AAwCA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAKnD,KAAK,WAAW,GAAG;IAAE,SAAS,EAAE,cAAc,CAAA;CAAE,CAAC;;AAiHjD,wBAMG"}

package/dist/components/fields/TextareaField.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,67 @@
+import { useField as e } from "../form/form-context.js";
+import t from "../schema/FieldWrapper.js";
+import n from "../ui/Textarea.js";
+import { createBlock as r, createVNode as i, defineComponent as a, mergeProps as o, openBlock as s, unref as c, withCtx as l } from "vue";
+//#region src/components/fields/TextareaField.vue?vue&type=script&setup=true&lang.ts
+var u = /*@__PURE__*/ a({
+	__name: "TextareaField",
+	props: { component: {} },
+	setup(a) {
+		let u = a, { value: d, setValue: f, blur: p, error: m, id: h, disabled: g, aria: _ } = e(() => u.component);
+		return (e, a) => (s(), r(t, {
+			field: u.component,
+			"html-for": c(h),
+			error: c(m)
+		}, {
+			default: l(() => [i(n, o({
+				id: c(h),
+				dir: "auto",
+				name: u.component.name,
+				"model-value": c(d) ?? "",
+				placeholder: u.component.placeholder,
+				disabled: c(g),
+				readonly: u.component.readOnly,
+				required: u.component.required,
+				autofocus: u.component.autofocus,
+				rows: u.component.rows,
+				cols: u.component.cols,
+				minlength: u.component.minLength,
+				maxlength: u.component.maxLength,
+				"aria-invalid": c(_)["aria-invalid"],
+				"aria-describedby": c(_)["aria-describedby"],
+				"aria-required": c(_)["aria-required"],
+				class: u.component.autosize ? "field-sizing-content" : void 0
+			}, u.component.extraInputAttributes, {
+				"onUpdate:modelValue": a[0] ||= (e) => c(f)(e),
+				onBlur: c(p)
+			}), null, 16, [
+				"id",
+				"name",
+				"model-value",
+				"placeholder",
+				"disabled",
+				"readonly",
+				"required",
+				"autofocus",
+				"rows",
+				"cols",
+				"minlength",
+				"maxlength",
+				"aria-invalid",
+				"aria-describedby",
+				"aria-required",
+				"class",
+				"onBlur"
+			])]),
+			_: 1
+		}, 8, [
+			"field",
+			"html-for",
+			"error"
+		]));
+	}
+});
+//#endregion
+export { u as default };
+
+//# sourceMappingURL=TextareaField.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/fields/TextareaField.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextareaField.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","FieldWrapper","_unref","_withCtx","_createVNode","Textarea","_mergeProps","FieldWrapper_default","Textarea_default","TextareaField_vue_vue_type_script_setup_true_lang_default","props","__props","useField","openBlock","createBlock","unref","id","error","withCtx","createVNode","mergeProps","value","disabled","aria","_cache","setValue","$event","blur"],"sources":["../../../src/components/fields/TextareaField.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { TextareaSchema } from '@alfakit/core'\nimport { useField } from '../form/form-context'\nimport FieldWrapper from '../schema/FieldWrapper.vue'\nimport Textarea from '../ui/Textarea.vue'\n\nconst props = defineProps<{ component: TextareaSchema }>()\nconst { value, setValue, blur, error, id, disabled, aria } = useField<string | null>(\n  () => props.component,\n)\n</script>\n\n<template>\n  <FieldWrapper :field=\"props.component\" :html-for=\"id\" :error=\"error\">\n    <Textarea\n      :id=\"id\"\n      dir=\"auto\"\n      :name=\"props.component.name\"\n      :model-value=\"value ?? ''\"\n      :placeholder=\"props.component.placeholder\"\n      :disabled=\"disabled\"\n      :readonly=\"props.component.readOnly\"\n      :required=\"props.component.required\"\n      :autofocus=\"props.component.autofocus\"\n      :rows=\"props.component.rows\"\n      :cols=\"props.component.cols\"\n      :minlength=\"props.component.minLength\"\n      :maxlength=\"props.component.maxLength\"\n      :aria-invalid=\"aria['aria-invalid']\"\n      :aria-describedby=\"aria['aria-describedby']\"\n      :aria-required=\"aria['aria-required']\"\n      :class=\"props.component.autosize ? 'field-sizing-content' : undefined\"\n      v-bind=\"props.component.extraInputAttributes\"\n      @update:model-value=\"setValue($event)\"\n      @blur=\"blur\"\n    />\n  </FieldWrapper>\n</template>\n"],"mappings":";;;;;;;;;EAMA,IAAMW,IAAQC,GACR,EAAE,UAAO,aAAU,SAAM,UAAO,OAAI,aAAU,YAASC,QACrDF,EAAM,SACd;oBAIEX,EAAA,GAAAC,EAuBeC,GAAA;GAvBA,OAAOS,EAAM;GAAY,YAAUR,EAAAc,CAAA;GAAK,OAAOd,EAAAe,CAAA;;GAC5D,SAAAd,QAqBE,CArBFC,EAqBEC,GArBFC,EAqBE;IApBC,IAAIJ,EAAAc,CAAA;IACL,KAAI;IACH,MAAMN,EAAM,UAAU;IACtB,eAAaR,EAAAmB,CAAA,KAAK;IAClB,aAAaX,EAAM,UAAU;IAC7B,UAAUR,EAAAoB,CAAA;IACV,UAAUZ,EAAM,UAAU;IAC1B,UAAUA,EAAM,UAAU;IAC1B,WAAWA,EAAM,UAAU;IAC3B,MAAMA,EAAM,UAAU;IACtB,MAAMA,EAAM,UAAU;IACtB,WAAWA,EAAM,UAAU;IAC3B,WAAWA,EAAM,UAAU;IAC3B,gBAAcR,EAAAqB,CAAA,CAAI,CAAA;IAClB,oBAAkBrB,EAAAqB,CAAA,CAAI,CAAA;IACtB,iBAAerB,EAAAqB,CAAA,CAAI,CAAA;IACnB,OAAOb,EAAM,UAAU,WAAQ,yBAA4B,KAAA;GACpD,GAAAA,EAAM,UAAU,sBAAoB;IAC3C,uBAAkB,AAAAc,EAAA,QAAA,MAAEtB,EAAAuB,CAAA,CAAQ,CAACC,CAAM;IACnC,QAAMxB,EAAAyB,CAAA"}

package/dist/components/fields/ToggleButtonsField.js

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

package/dist/components/fields/ToggleButtonsField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleButtonsField.js","names":["_sfc_main","ToggleButtonsField_vue_vue_type_script_setup_true_lang_default","ToggleButtonsField_default"],"sources":["../../../src/components/fields/ToggleButtonsField.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ToggleButtonsSchema } from '@alfakit/core'\nimport {\n  fieldIds,\n  gridColumnsClasses,\n  isOptionGroup,\n  toggleButtonsNext,\n  toggleButtonsSelected,\n} from '@alfakit/core'\nimport { computed } from 'vue'\nimport { solidButtonColorClasses } from '../../lib/colors'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport { useField } from '../form/form-context'\nimport FieldWrapper from '../schema/FieldWrapper.vue'\nimport TooltipProvider from '../ui/TooltipProvider.vue'\nimport OptionTooltip from './OptionTooltip.vue'\n\n/**\n * Buttons acting as a radio group (or, when `multiple`, a set of toggles). Each button\n * reports its state with `aria-pressed`; the selected one takes the option's colour.\n */\nconst props = defineProps<{ component: ToggleButtonsSchema }>()\nconst { value, setValue, error, id, disabled, readOnly, aria } = useField<unknown>(\n  () => props.component,\n)\nconst multiple = computed(() => Boolean(props.component.multiple))\nconst selected = computed(() => toggleButtonsSelected(value.value, multiple.value))\nconst locked = computed(() => disabled.value || readOnly.value)\nconst options = computed(() =>\n  props.component.options.flatMap((option) => (isOptionGroup(option) ? option.options : [option])),\n)\n\n/** `gridDirection('column')`: buttons flow down each column. Spelled out for Tailwind. */\nconst COLUMN_FLOW_CLASSES: Record<number, string> = {\n  2: 'md:columns-2',\n  3: 'md:columns-3',\n  4: 'md:columns-4',\n  5: 'md:columns-5',\n  6: 'md:columns-6',\n}\n// `columns()`: a grid of full-width buttons (inline and grouped layouts stay a row).\nconst grid = computed(\n  () =>\n    !props.component.inline && !props.component.grouped && (props.component.gridColumns ?? 0) > 1,\n)\nconst columnFlow = computed(() => grid.value && props.component.gridDirection === 'column')\n\n/** `size()`: height, padding and text of the buttons (medium is the default). */\nconst SIZE_CLASSES: Record<string, string> = {\n  xs: 'h-7 px-2 text-xs',\n  sm: 'h-8 px-2.5 text-sm',\n  md: 'h-9 px-3 text-sm',\n  lg: 'h-10 px-4 text-base',\n  xl: 'h-11 px-5 text-base',\n}\nconst fullWidth = computed(() => Boolean(props.component.fullWidth))\n// Any other `size()` string is a CSS class for the buttons.\nconst sizeClasses = computed(\n  () => SIZE_CLASSES[props.component.size ?? 'md'] ?? cn(SIZE_CLASSES.md, props.component.size),\n)\n</script>\n\n<template>\n  <FieldWrapper :field=\"props.component\" :html-for=\"id\" :error=\"error\">\n    <TooltipProvider>\n      <div\n        :id=\"id\"\n        role=\"group\"\n        data-slot=\"toggle-buttons\"\n        :aria-labelledby=\"props.component.label ? fieldIds(id).label : undefined\"\n        :aria-describedby=\"aria['aria-describedby']\"\n        :data-grid-direction=\"grid ? (props.component.gridDirection ?? 'row') : undefined\"\n        :class=\"\n          cn(\n            grid\n              ? columnFlow\n                ? cn(\n                    'gap-x-2 *:mb-2 *:w-full',\n                    COLUMN_FLOW_CLASSES[props.component.gridColumns ?? 1],\n                  )\n                : cn(\n                    'grid gap-2',\n                    gridColumnsClasses({ default: 1, md: props.component.gridColumns ?? 1 }),\n                  )\n              : 'flex gap-2',\n            !grid &&\n              (props.component.inline\n                ? 'flex-row flex-wrap'\n                : cn('flex-col', fullWidth ? 'items-stretch' : 'items-start')),\n            props.component.grouped &&\n              cn('gap-0 rounded-md shadow-xs', fullWidth ? 'w-full' : 'w-fit'),\n            fullWidth && 'w-full',\n          )\n        \"\n      >\n        <OptionTooltip\n          v-for=\"option in options\"\n          :key=\"option.value\"\n          :text=\"props.component.tooltips?.[option.value]\"\n        >\n          <button\n            type=\"button\"\n            :aria-pressed=\"selected.includes(option.value)\"\n            :aria-label=\"props.component.iconsOnly ? option.label : undefined\"\n            :title=\"props.component.iconsOnly ? option.label : undefined\"\n            :disabled=\"locked || option.disabled\"\n            :data-state=\"selected.includes(option.value) ? 'on' : 'off'\"\n            :class=\"\n              cn(\n                'focus-visible:border-ring focus-visible:ring-ring/50 inline-flex items-center justify-center gap-1.5 rounded-md border font-medium whitespace-nowrap transition-colors outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50',\n                sizeClasses,\n                fullWidth && props.component.inline && 'flex-1',\n                selected.includes(option.value)\n                  ? cn('border-transparent', solidButtonColorClasses[option.color ?? 'primary'])\n                  : 'bg-background hover:bg-accent hover:text-accent-foreground',\n                props.component.grouped &&\n                  'rounded-none shadow-none not-first:-ms-px first:rounded-s-md last:rounded-e-md focus-visible:z-10',\n                readOnly && 'disabled:opacity-100',\n              )\n            \"\n            @click=\"setValue(toggleButtonsNext(value, option.value, multiple))\"\n          >\n            <Icon v-if=\"option.icon\" :name=\"option.icon\" class=\"size-4\" />\n            <span v-if=\"!props.component.iconsOnly\">{{ option.label }}</span>\n          </button>\n        </OptionTooltip>\n      </div>\n    </TooltipProvider>\n  </FieldWrapper>\n</template>\n"],"mappings":""}

package/dist/components/fields/ToggleButtonsField.vue.d.ts

@@ -0,0 +1,11 @@
+import type { ToggleButtonsSchema } from '@alfakit/core';
+/**
+ * Buttons acting as a radio group (or, when `multiple`, a set of toggles). Each button
+ * reports its state with `aria-pressed`; the selected one takes the option's colour.
+ */
+type __VLS_Props = {
+    component: ToggleButtonsSchema;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;
+//# sourceMappingURL=ToggleButtonsField.vue.d.ts.map

package/dist/components/fields/ToggleButtonsField.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleButtonsField.vue.d.ts","sourceRoot":"","sources":["../../../src/components/fields/ToggleButtonsField.vue"],"names":[],"mappings":"AAqIA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAA;AAiBxD;;;GAGG;AACH,KAAK,WAAW,GAAG;IAAE,SAAS,EAAE,mBAAmB,CAAA;CAAE,CAAC;;AA0MtD,wBAMG"}

package/dist/components/fields/ToggleButtonsField.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,90 @@
+import { cn as e } from "../../lib/utils.js";
+import { solidButtonColorClasses as t } from "../../lib/colors.js";
+import n from "../../lib/Icon.js";
+import { useField as r } from "../form/form-context.js";
+import i from "../schema/FieldWrapper.js";
+import a from "../ui/TooltipProvider.js";
+import o from "./OptionTooltip.js";
+import { fieldIds as s, gridColumnsClasses as c, isOptionGroup as l, toggleButtonsNext as u, toggleButtonsSelected as d } from "@alfakit/core";
+import { Fragment as f, computed as p, createBlock as m, createCommentVNode as h, createElementBlock as g, createElementVNode as _, createVNode as v, defineComponent as y, normalizeClass as b, openBlock as x, renderList as S, toDisplayString as C, unref as w, withCtx as T } from "vue";
+//#region src/components/fields/ToggleButtonsField.vue?vue&type=script&setup=true&lang.ts
+var E = [
+	"id",
+	"aria-labelledby",
+	"aria-describedby",
+	"data-grid-direction"
+], D = [
+	"aria-pressed",
+	"aria-label",
+	"title",
+	"disabled",
+	"data-state",
+	"onClick"
+], O = { key: 1 }, k = /*@__PURE__*/ y({
+	__name: "ToggleButtonsField",
+	props: { component: {} },
+	setup(y) {
+		let k = y, { value: A, setValue: j, error: M, id: N, disabled: P, readOnly: F, aria: I } = r(() => k.component), L = p(() => !!k.component.multiple), R = p(() => d(A.value, L.value)), z = p(() => P.value || F.value), B = p(() => k.component.options.flatMap((e) => l(e) ? e.options : [e])), V = {
+			2: "md:columns-2",
+			3: "md:columns-3",
+			4: "md:columns-4",
+			5: "md:columns-5",
+			6: "md:columns-6"
+		}, H = p(() => !k.component.inline && !k.component.grouped && (k.component.gridColumns ?? 0) > 1), U = p(() => H.value && k.component.gridDirection === "column"), W = {
+			xs: "h-7 px-2 text-xs",
+			sm: "h-8 px-2.5 text-sm",
+			md: "h-9 px-3 text-sm",
+			lg: "h-10 px-4 text-base",
+			xl: "h-11 px-5 text-base"
+		}, G = p(() => !!k.component.fullWidth), K = p(() => W[k.component.size ?? "md"] ?? e(W.md, k.component.size));
+		return (r, l) => (x(), m(i, {
+			field: k.component,
+			"html-for": w(N),
+			error: w(M)
+		}, {
+			default: T(() => [v(a, null, {
+				default: T(() => [_("div", {
+					id: w(N),
+					role: "group",
+					"data-slot": "toggle-buttons",
+					"aria-labelledby": k.component.label ? w(s)(w(N)).label : void 0,
+					"aria-describedby": w(I)["aria-describedby"],
+					"data-grid-direction": H.value ? k.component.gridDirection ?? "row" : void 0,
+					class: b(w(e)(H.value ? U.value ? w(e)("gap-x-2 *:mb-2 *:w-full", V[k.component.gridColumns ?? 1]) : w(e)("grid gap-2", w(c)({
+						default: 1,
+						md: k.component.gridColumns ?? 1
+					})) : "flex gap-2", !H.value && (k.component.inline ? "flex-row flex-wrap" : w(e)("flex-col", G.value ? "items-stretch" : "items-start")), k.component.grouped && w(e)("gap-0 rounded-md shadow-xs", G.value ? "w-full" : "w-fit"), G.value && "w-full"))
+				}, [(x(!0), g(f, null, S(B.value, (r) => (x(), m(o, {
+					key: r.value,
+					text: k.component.tooltips?.[r.value]
+				}, {
+					default: T(() => [_("button", {
+						type: "button",
+						"aria-pressed": R.value.includes(r.value),
+						"aria-label": k.component.iconsOnly ? r.label : void 0,
+						title: k.component.iconsOnly ? r.label : void 0,
+						disabled: z.value || r.disabled,
+						"data-state": R.value.includes(r.value) ? "on" : "off",
+						class: b(w(e)("focus-visible:border-ring focus-visible:ring-ring/50 inline-flex items-center justify-center gap-1.5 rounded-md border font-medium whitespace-nowrap transition-colors outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50", K.value, G.value && k.component.inline && "flex-1", R.value.includes(r.value) ? w(e)("border-transparent", w(t)[r.color ?? "primary"]) : "bg-background hover:bg-accent hover:text-accent-foreground", k.component.grouped && "rounded-none shadow-none not-first:-ms-px first:rounded-s-md last:rounded-e-md focus-visible:z-10", w(F) && "disabled:opacity-100")),
+						onClick: (e) => w(j)(w(u)(w(A), r.value, L.value))
+					}, [r.icon ? (x(), m(w(n), {
+						key: 0,
+						name: r.icon,
+						class: "size-4"
+					}, null, 8, ["name"])) : h("", !0), k.component.iconsOnly ? h("", !0) : (x(), g("span", O, C(r.label), 1))], 10, D)]),
+					_: 2
+				}, 1032, ["text"]))), 128))], 10, E)]),
+				_: 1
+			})]),
+			_: 1
+		}, 8, [
+			"field",
+			"html-for",
+			"error"
+		]));
+	}
+});
+//#endregion
+export { k as default };
+
+//# sourceMappingURL=ToggleButtonsField.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/fields/ToggleButtonsField.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleButtonsField.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","FieldWrapper","_unref","_withCtx","_createVNode","TooltipProvider","_createElementVNode","_normalizeClass","_createElementBlock","_Fragment","_renderList","OptionTooltip","Icon","_createCommentVNode","_toDisplayString","Icon_default","FieldWrapper_default","TooltipProvider_default","OptionTooltip_default","_hoisted_1","_hoisted_2","_hoisted_3","ToggleButtonsField_vue_vue_type_script_setup_true_lang_default","props","__props","useField","multiple","computed","selected","toggleButtonsSelected","value","locked","disabled","readOnly","options","isOptionGroup","option","COLUMN_FLOW_CLASSES","grid","columnFlow","SIZE_CLASSES","fullWidth","sizeClasses","cn","openBlock","createBlock","unref","id","error","withCtx","createVNode","createElementVNode","fieldIds","aria","normalizeClass","gridColumnsClasses","createElementBlock","Fragment","renderList","solidButtonColorClasses","setValue","toggleButtonsNext","createCommentVNode","toDisplayString"],"sources":["../../../src/components/fields/ToggleButtonsField.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ToggleButtonsSchema } from '@alfakit/core'\nimport {\n  fieldIds,\n  gridColumnsClasses,\n  isOptionGroup,\n  toggleButtonsNext,\n  toggleButtonsSelected,\n} from '@alfakit/core'\nimport { computed } from 'vue'\nimport { solidButtonColorClasses } from '../../lib/colors'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport { useField } from '../form/form-context'\nimport FieldWrapper from '../schema/FieldWrapper.vue'\nimport TooltipProvider from '../ui/TooltipProvider.vue'\nimport OptionTooltip from './OptionTooltip.vue'\n\n/**\n * Buttons acting as a radio group (or, when `multiple`, a set of toggles). Each button\n * reports its state with `aria-pressed`; the selected one takes the option's colour.\n */\nconst props = defineProps<{ component: ToggleButtonsSchema }>()\nconst { value, setValue, error, id, disabled, readOnly, aria } = useField<unknown>(\n  () => props.component,\n)\nconst multiple = computed(() => Boolean(props.component.multiple))\nconst selected = computed(() => toggleButtonsSelected(value.value, multiple.value))\nconst locked = computed(() => disabled.value || readOnly.value)\nconst options = computed(() =>\n  props.component.options.flatMap((option) => (isOptionGroup(option) ? option.options : [option])),\n)\n\n/** `gridDirection('column')`: buttons flow down each column. Spelled out for Tailwind. */\nconst COLUMN_FLOW_CLASSES: Record<number, string> = {\n  2: 'md:columns-2',\n  3: 'md:columns-3',\n  4: 'md:columns-4',\n  5: 'md:columns-5',\n  6: 'md:columns-6',\n}\n// `columns()`: a grid of full-width buttons (inline and grouped layouts stay a row).\nconst grid = computed(\n  () =>\n    !props.component.inline && !props.component.grouped && (props.component.gridColumns ?? 0) > 1,\n)\nconst columnFlow = computed(() => grid.value && props.component.gridDirection === 'column')\n\n/** `size()`: height, padding and text of the buttons (medium is the default). */\nconst SIZE_CLASSES: Record<string, string> = {\n  xs: 'h-7 px-2 text-xs',\n  sm: 'h-8 px-2.5 text-sm',\n  md: 'h-9 px-3 text-sm',\n  lg: 'h-10 px-4 text-base',\n  xl: 'h-11 px-5 text-base',\n}\nconst fullWidth = computed(() => Boolean(props.component.fullWidth))\n// Any other `size()` string is a CSS class for the buttons.\nconst sizeClasses = computed(\n  () => SIZE_CLASSES[props.component.size ?? 'md'] ?? cn(SIZE_CLASSES.md, props.component.size),\n)\n</script>\n\n<template>\n  <FieldWrapper :field=\"props.component\" :html-for=\"id\" :error=\"error\">\n    <TooltipProvider>\n      <div\n        :id=\"id\"\n        role=\"group\"\n        data-slot=\"toggle-buttons\"\n        :aria-labelledby=\"props.component.label ? fieldIds(id).label : undefined\"\n        :aria-describedby=\"aria['aria-describedby']\"\n        :data-grid-direction=\"grid ? (props.component.gridDirection ?? 'row') : undefined\"\n        :class=\"\n          cn(\n            grid\n              ? columnFlow\n                ? cn(\n                    'gap-x-2 *:mb-2 *:w-full',\n                    COLUMN_FLOW_CLASSES[props.component.gridColumns ?? 1],\n                  )\n                : cn(\n                    'grid gap-2',\n                    gridColumnsClasses({ default: 1, md: props.component.gridColumns ?? 1 }),\n                  )\n              : 'flex gap-2',\n            !grid &&\n              (props.component.inline\n                ? 'flex-row flex-wrap'\n                : cn('flex-col', fullWidth ? 'items-stretch' : 'items-start')),\n            props.component.grouped &&\n              cn('gap-0 rounded-md shadow-xs', fullWidth ? 'w-full' : 'w-fit'),\n            fullWidth && 'w-full',\n          )\n        \"\n      >\n        <OptionTooltip\n          v-for=\"option in options\"\n          :key=\"option.value\"\n          :text=\"props.component.tooltips?.[option.value]\"\n        >\n          <button\n            type=\"button\"\n            :aria-pressed=\"selected.includes(option.value)\"\n            :aria-label=\"props.component.iconsOnly ? option.label : undefined\"\n            :title=\"props.component.iconsOnly ? option.label : undefined\"\n            :disabled=\"locked || option.disabled\"\n            :data-state=\"selected.includes(option.value) ? 'on' : 'off'\"\n            :class=\"\n              cn(\n                'focus-visible:border-ring focus-visible:ring-ring/50 inline-flex items-center justify-center gap-1.5 rounded-md border font-medium whitespace-nowrap transition-colors outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50',\n                sizeClasses,\n                fullWidth && props.component.inline && 'flex-1',\n                selected.includes(option.value)\n                  ? cn('border-transparent', solidButtonColorClasses[option.color ?? 'primary'])\n                  : 'bg-background hover:bg-accent hover:text-accent-foreground',\n                props.component.grouped &&\n                  'rounded-none shadow-none not-first:-ms-px first:rounded-s-md last:rounded-e-md focus-visible:z-10',\n                readOnly && 'disabled:opacity-100',\n              )\n            \"\n            @click=\"setValue(toggleButtonsNext(value, option.value, multiple))\"\n          >\n            <Icon v-if=\"option.icon\" :name=\"option.icon\" class=\"size-4\" />\n            <span v-if=\"!props.component.iconsOnly\">{{ option.label }}</span>\n          </button>\n        </OptionTooltip>\n      </div>\n    </TooltipProvider>\n  </FieldWrapper>\n</template>\n"],"mappings":"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"}

package/dist/components/fields/ToggleField.js

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

package/dist/components/fields/ToggleField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleField.js","names":["_sfc_main","ToggleField_vue_vue_type_script_setup_true_lang_default","ToggleField_default"],"sources":["../../../src/components/fields/ToggleField.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ToggleSchema } from '@alfakit/core'\nimport { computed } from 'vue'\nimport {\n  colorClass,\n  switchOffColorClasses,\n  switchOnColorClasses,\n  textColorClasses,\n} from '../../lib/colors'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport { useField } from '../form/form-context'\nimport FieldWrapper from '../schema/FieldWrapper.vue'\nimport Switch from '../ui/Switch.vue'\n\nconst props = defineProps<{ component: ToggleSchema }>()\nconst { value, setValue, error, id, disabled, readOnly, aria } = useField<boolean | null>(\n  () => props.component,\n)\nconst on = computed(() => Boolean(value.value))\nconst icon = computed(() => (on.value ? props.component.onIcon : props.component.offIcon))\n</script>\n\n<template>\n  <FieldWrapper\n    :field=\"props.component\"\n    :html-for=\"id\"\n    :error=\"error\"\n    :inline=\"props.component.inline\"\n  >\n    <div class=\"flex items-center gap-2\">\n      <Switch\n        :id=\"id\"\n        :name=\"props.component.name\"\n        :model-value=\"on\"\n        :disabled=\"disabled || readOnly\"\n        :aria-readonly=\"readOnly || undefined\"\n        :aria-invalid=\"aria['aria-invalid']\"\n        :aria-describedby=\"aria['aria-describedby']\"\n        :aria-required=\"aria['aria-required']\"\n        :class=\"\n          cn(\n            props.component.onColor && colorClass(switchOnColorClasses, props.component.onColor),\n            props.component.offColor && colorClass(switchOffColorClasses, props.component.offColor),\n          )\n        \"\n        @update:model-value=\"setValue($event)\"\n      />\n      <Icon\n        v-if=\"icon\"\n        :name=\"icon\"\n        :class=\"\n          colorClass(\n            textColorClasses,\n            on ? props.component.onColor : props.component.offColor,\n            'gray',\n          )\n        \"\n      />\n    </div>\n  </FieldWrapper>\n</template>\n"],"mappings":""}

package/dist/components/fields/ToggleField.vue.d.ts

@@ -0,0 +1,7 @@
+import type { ToggleSchema } from '@alfakit/core';
+type __VLS_Props = {
+    component: ToggleSchema;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;
+//# sourceMappingURL=ToggleField.vue.d.ts.map

package/dist/components/fields/ToggleField.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleField.vue.d.ts","sourceRoot":"","sources":["../../../src/components/fields/ToggleField.vue"],"names":[],"mappings":"AAgEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;AAcjD,KAAK,WAAW,GAAG;IAAE,SAAS,EAAE,YAAY,CAAA;CAAE,CAAC;;AA+I/C,wBAMG"}

package/dist/components/fields/ToggleField.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,58 @@
+import { cn as e } from "../../lib/utils.js";
+import { colorClass as t, switchOffColorClasses as n, switchOnColorClasses as r, textColorClasses as i } from "../../lib/colors.js";
+import a from "../../lib/Icon.js";
+import { useField as o } from "../form/form-context.js";
+import s from "../ui/Switch.js";
+import c from "../schema/FieldWrapper.js";
+import { computed as l, createBlock as u, createCommentVNode as d, createElementVNode as f, createVNode as p, defineComponent as m, normalizeClass as h, openBlock as g, unref as _, withCtx as v } from "vue";
+//#region src/components/fields/ToggleField.vue?vue&type=script&setup=true&lang.ts
+var y = { class: "flex items-center gap-2" }, b = /*@__PURE__*/ m({
+	__name: "ToggleField",
+	props: { component: {} },
+	setup(m) {
+		let b = m, { value: x, setValue: S, error: C, id: w, disabled: T, readOnly: E, aria: D } = o(() => b.component), O = l(() => !!x.value), k = l(() => O.value ? b.component.onIcon : b.component.offIcon);
+		return (o, l) => (g(), u(c, {
+			field: b.component,
+			"html-for": _(w),
+			error: _(C),
+			inline: b.component.inline
+		}, {
+			default: v(() => [f("div", y, [p(s, {
+				id: _(w),
+				name: b.component.name,
+				"model-value": O.value,
+				disabled: _(T) || _(E),
+				"aria-readonly": _(E) || void 0,
+				"aria-invalid": _(D)["aria-invalid"],
+				"aria-describedby": _(D)["aria-describedby"],
+				"aria-required": _(D)["aria-required"],
+				class: h(_(e)(b.component.onColor && _(t)(_(r), b.component.onColor), b.component.offColor && _(t)(_(n), b.component.offColor))),
+				"onUpdate:modelValue": l[0] ||= (e) => _(S)(e)
+			}, null, 8, [
+				"id",
+				"name",
+				"model-value",
+				"disabled",
+				"aria-readonly",
+				"aria-invalid",
+				"aria-describedby",
+				"aria-required",
+				"class"
+			]), k.value ? (g(), u(_(a), {
+				key: 0,
+				name: k.value,
+				class: h(_(t)(_(i), O.value ? b.component.onColor : b.component.offColor, "gray"))
+			}, null, 8, ["name", "class"])) : d("", !0)])]),
+			_: 1
+		}, 8, [
+			"field",
+			"html-for",
+			"error",
+			"inline"
+		]));
+	}
+});
+//#endregion
+export { b as default };
+
+//# sourceMappingURL=ToggleField.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/fields/ToggleField.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleField.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","FieldWrapper","_unref","_withCtx","_createElementVNode","_createVNode","Switch","_normalizeClass","Icon","_createCommentVNode","Icon_default","Switch_default","FieldWrapper_default","_hoisted_1","ToggleField_vue_vue_type_script_setup_true_lang_default","props","__props","useField","on","computed","value","icon","openBlock","createBlock","unref","id","error","withCtx","createElementVNode","createVNode","disabled","readOnly","aria","normalizeClass","cn","colorClass","switchOnColorClasses","switchOffColorClasses","_cache","setValue","$event","textColorClasses","createCommentVNode"],"sources":["../../../src/components/fields/ToggleField.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ToggleSchema } from '@alfakit/core'\nimport { computed } from 'vue'\nimport {\n  colorClass,\n  switchOffColorClasses,\n  switchOnColorClasses,\n  textColorClasses,\n} from '../../lib/colors'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport { useField } from '../form/form-context'\nimport FieldWrapper from '../schema/FieldWrapper.vue'\nimport Switch from '../ui/Switch.vue'\n\nconst props = defineProps<{ component: ToggleSchema }>()\nconst { value, setValue, error, id, disabled, readOnly, aria } = useField<boolean | null>(\n  () => props.component,\n)\nconst on = computed(() => Boolean(value.value))\nconst icon = computed(() => (on.value ? props.component.onIcon : props.component.offIcon))\n</script>\n\n<template>\n  <FieldWrapper\n    :field=\"props.component\"\n    :html-for=\"id\"\n    :error=\"error\"\n    :inline=\"props.component.inline\"\n  >\n    <div class=\"flex items-center gap-2\">\n      <Switch\n        :id=\"id\"\n        :name=\"props.component.name\"\n        :model-value=\"on\"\n        :disabled=\"disabled || readOnly\"\n        :aria-readonly=\"readOnly || undefined\"\n        :aria-invalid=\"aria['aria-invalid']\"\n        :aria-describedby=\"aria['aria-describedby']\"\n        :aria-required=\"aria['aria-required']\"\n        :class=\"\n          cn(\n            props.component.onColor && colorClass(switchOnColorClasses, props.component.onColor),\n            props.component.offColor && colorClass(switchOffColorClasses, props.component.offColor),\n          )\n        \"\n        @update:model-value=\"setValue($event)\"\n      />\n      <Icon\n        v-if=\"icon\"\n        :name=\"icon\"\n        :class=\"\n          colorClass(\n            textColorClasses,\n            on ? props.component.onColor : props.component.offColor,\n            'gray',\n          )\n        \"\n      />\n    </div>\n  </FieldWrapper>\n</template>\n"],"mappings":";;;;;;;;;;;;EAeA,IAAMgB,IAAQC,GACR,EAAE,UAAO,aAAU,UAAO,OAAI,aAAU,aAAU,YAASC,QACzDF,EAAM,SACd,GACMG,IAAKC,QAAe,EAAQC,EAAM,KAAM,GACxCC,IAAOF,QAAgBD,EAAG,QAAQH,EAAM,UAAU,SAASA,EAAM,UAAU,OAAQ;oBAIvFhB,EAAA,GAAAC,EAoCeC,GAAA;GAnCZ,OAAOc,EAAM;GACb,YAAUb,EAAAuB,CAAA;GACV,OAAOvB,EAAAwB,CAAA;GACP,QAAQX,EAAM,UAAU;;GAEzB,SAAAZ,QA6BM,CA7BNC,EA6BM,OA7BNS,GA6BM,CA5BJR,EAgBEC,GAAA;IAfC,IAAIJ,EAAAuB,CAAA;IACJ,MAAMV,EAAM,UAAU;IACtB,eAAaG,EAAA;IACb,UAAUhB,EAAA4B,CAAA,KAAY5B,EAAA6B,CAAA;IACtB,iBAAe7B,EAAA6B,CAAA,KAAY,KAAA;IAC3B,gBAAc7B,EAAA8B,CAAA,CAAI,CAAA;IAClB,oBAAkB9B,EAAA8B,CAAA,CAAI,CAAA;IACtB,iBAAe9B,EAAA8B,CAAA,CAAI,CAAA;IACnB,OAAKzB,EAAaL,EAAAgC,CAAA,CAAE,CAAcnB,EAAM,UAAU,WAAWb,EAAAiC,CAAA,CAAU,CAACjC,EAAAkC,CAAA,GAAsBrB,EAAM,UAAU,OAAO,GAAeA,EAAM,UAAU,YAAYb,EAAAiC,CAAA,CAAU,CAACjC,EAAAmC,CAAA,GAAuBtB,EAAM,UAAU,QAAQ,CAAA,CAAA;IAM1N,uBAAkB,AAAAuB,EAAA,QAAA,MAAEpC,EAAAqC,CAAA,CAAQ,CAACC,CAAM;;;;;;;;;;;GAG9B,CAAA,GAAAnB,EAAA,SADRtB,EAAA,GAAAC,EAUEE,EAAAM,CAAA,GAAA;;IARC,MAAMa,EAAA;IACN,OAAKd,EAAaL,EAAAiC,CAAA,CAAU,CAAcjC,EAAAuC,CAAA,GAA8BvB,EAAA,QAAKH,EAAM,UAAU,UAAUA,EAAM,UAAU,UAAA,MAAA,CAAA"}

package/dist/components/fields/code-editor-lazy.d.ts

@@ -0,0 +1,3 @@
+/** The code editor; its code loads the first time one is shown in the browser. */
+export declare const CodeEditorField: import("vue").Component;
+//# sourceMappingURL=code-editor-lazy.d.ts.map