@alfakit/vue 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,21 @@
+import type { Affixes } from '@alfakit/core';
+/** Prefix/suffix text and icons around a select or date picker (with icon colours). */
+type __VLS_Props = {
+    component: Affixes;
+    error?: string;
+};
+declare var __VLS_5: {}, __VLS_11: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_5) => any;
+} & {
+    default?: (props: typeof __VLS_11) => any;
+};
+declare const __VLS_component: 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>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=SelectAffixes.vue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectAffixes.vue.d.ts","sourceRoot":"","sources":["../../../src/components/fields/SelectAffixes.vue"],"names":[],"mappings":"AA2DA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AAM5C,uFAAuF;AACvF,KAAK,WAAW,GAAG;IAAE,SAAS,EAAE,OAAO,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAyG1D,QAAA,IAAI,OAAO,IAAU,EAAE,QAAQ,IAAY,CAAE;AAC7C,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GAC5C;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,CAAC;AAwBhD,QAAA,MAAM,eAAe,kSAMnB,CAAC;wBACkB,eAAe,CAAC,OAAO,eAAe,EAAE,WAAW,CAAC;AAAzE,wBAA0E;AAQ1E,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

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

@@ -0,0 +1,40 @@
+import { cn as e } from "../../lib/utils.js";
+import { textColorClasses as t } from "../../lib/colors.js";
+import n from "../../lib/Icon.js";
+import { computed as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createTextVNode as s, createVNode as c, defineComponent as l, normalizeClass as u, openBlock as d, renderSlot as f, toDisplayString as p, unref as m } from "vue";
+//#region src/components/fields/SelectAffixes.vue?vue&type=script&setup=true&lang.ts
+var h = {
+	key: 0,
+	class: "text-muted-foreground bg-muted/50 flex items-center gap-1 border-e px-3 text-sm whitespace-nowrap"
+}, g = { class: "min-w-0 flex-1 *:h-full *:w-full *:rounded-none *:border-0 *:bg-transparent *:shadow-none *:focus-visible:ring-0 dark:*:bg-transparent" }, _ = {
+	key: 1,
+	class: "text-muted-foreground bg-muted/50 flex items-center gap-1 border-s px-3 text-sm whitespace-nowrap"
+}, v = /*@__PURE__*/ l({
+	__name: "SelectAffixes",
+	props: {
+		component: {},
+		error: {}
+	},
+	setup(l) {
+		let v = l, y = r(() => !!(v.component.prefix || v.component.prefixIcon)), b = r(() => !!(v.component.suffix || v.component.suffixIcon));
+		return (r, l) => y.value || b.value ? (d(), a("div", {
+			key: 0,
+			"data-slot": "input-group",
+			class: u(m(e)("border-input dark:bg-input/30 has-[:focus-visible]:border-ring has-[:focus-visible]:ring-ring/50 flex min-h-9 w-full items-stretch overflow-hidden rounded-md border shadow-xs has-[:focus-visible]:ring-[3px]", v.error && "border-destructive"))
+		}, [
+			y.value ? (d(), a("span", h, [c(m(n), {
+				name: v.component.prefixIcon,
+				class: u(v.component.prefixIconColor && m(t)[v.component.prefixIconColor])
+			}, null, 8, ["name", "class"]), s(" " + p(v.component.prefix), 1)])) : i("", !0),
+			o("div", g, [f(r.$slots, "default")]),
+			b.value ? (d(), a("span", _, [s(p(v.component.suffix) + " ", 1), c(m(n), {
+				name: v.component.suffixIcon,
+				class: u(v.component.suffixIconColor && m(t)[v.component.suffixIconColor])
+			}, null, 8, ["name", "class"])])) : i("", !0)
+		], 2)) : f(r.$slots, "default", {}, void 0, void 0, 1);
+	}
+});
+//#endregion
+export { v as default };
+
+//# sourceMappingURL=SelectAffixes.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectAffixes.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_normalizeClass","_unref","_createVNode","Icon","_createTextVNode","_toDisplayString","_createCommentVNode","_createElementVNode","_renderSlot","Icon_default","_hoisted_1","_hoisted_2","_hoisted_3","SelectAffixes_vue_vue_type_script_setup_true_lang_default","props","__props","hasPrefix","computed","hasSuffix","openBlock","createElementBlock","normalizeClass","unref","cn","createVNode","textColorClasses","createTextVNode","toDisplayString","createCommentVNode","createElementVNode","renderSlot","_ctx"],"sources":["../../../src/components/fields/SelectAffixes.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { Affixes } from '@alfakit/core'\nimport { computed } from 'vue'\nimport { textColorClasses } from '../../lib/colors'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\n\n/** Prefix/suffix text and icons around a select or date picker (with icon colours). */\nconst props = defineProps<{ component: Affixes; error?: string }>()\n\nconst hasPrefix = computed(() => Boolean(props.component.prefix || props.component.prefixIcon))\nconst hasSuffix = computed(() => Boolean(props.component.suffix || props.component.suffixIcon))\n</script>\n\n<template>\n  <div\n    v-if=\"hasPrefix || hasSuffix\"\n    data-slot=\"input-group\"\n    :class=\"\n      cn(\n        'border-input dark:bg-input/30 has-[:focus-visible]:border-ring has-[:focus-visible]:ring-ring/50 flex min-h-9 w-full items-stretch overflow-hidden rounded-md border shadow-xs has-[:focus-visible]:ring-[3px]',\n        props.error && 'border-destructive',\n      )\n    \"\n  >\n    <span\n      v-if=\"hasPrefix\"\n      class=\"text-muted-foreground bg-muted/50 flex items-center gap-1 border-e px-3 text-sm whitespace-nowrap\"\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    <div\n      class=\"min-w-0 flex-1 *:h-full *:w-full *:rounded-none *:border-0 *:bg-transparent *:shadow-none *:focus-visible:ring-0 dark:*:bg-transparent\"\n    >\n      <slot />\n    </div>\n    <span\n      v-if=\"hasSuffix\"\n      class=\"text-muted-foreground bg-muted/50 flex items-center gap-1 border-s px-3 text-sm whitespace-nowrap\"\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  </div>\n  <slot v-else />\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;EAQA,IAAMgB,IAAQC,GAERC,IAAYC,QAAe,GAAQH,EAAM,UAAU,UAAUA,EAAM,UAAU,WAAW,GACxFI,IAAYD,QAAe,GAAQH,EAAM,UAAU,UAAUA,EAAM,UAAU,WAAW;mBAKpFE,EAAA,SAAaE,EAAA,SADrBpB,EAAA,GAAAC,EAuCM,OAAA;;GArCJ,aAAU;GACT,OAAKC,EAASC,EAAAsB,CAAA,CAAE,CAAA,kNAAoOT,EAAM,SAAK,oBAAA,CAAA;;GAQxPE,EAAA,SADRlB,EAAA,GAAAC,EAWO,QAXPW,GAWO,CAPLR,EAKED,EAAAE,CAAA,GAAA;IAJC,MAAMW,EAAM,UAAU;IACtB,OAAKd,EAAac,EAAM,UAAU,mBAAmBb,EAAAwB,CAAA,CAAgB,CAACX,EAAM,UAAU,gBAAA;GAGvFV,GAAAA,MAAAA,GAAAA,CAAAA,QAAAA,OAAAA,CAAAA,GAAAA,EAAA,MACFC,EAAGS,EAAM,UAAU,MAAM,GAAA,CAAA,CAAA,CAAA,KAAAc,EAAA,IAAA,EAAA;GAE3BrB,EAIM,OAJNI,GAIM,CADJH,EAAQuB,EAAA,QAAA,SAAA,CAAA,CAAA;GAGFb,EAAA,SADRpB,EAAA,GAAAC,EAWO,QAXPa,GAWO,CAPFR,EAAAC,EAAAS,EAAM,UAAU,MAAM,IAAG,KAC5B,CAAA,GAAAZ,EAKED,EAAAE,CAAA,GAAA;IAJC,MAAMW,EAAM,UAAU;IACtB,OAAKd,EAAac,EAAM,UAAU,mBAAmBb,EAAAwB,CAAA,CAAgB,CAACX,EAAM,UAAU,gBAAA;;EAM7FN,GAAAA,CAAAA,KAAAA,EAAeuB,EAAA,QAAA,WAAA,CAAA,GAAA,KAAA,GAAA,KAAA,GAAA,CAAA"}

package/dist/components/fields/SelectField.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectField.js","names":["_sfc_main","SelectField_vue_vue_type_script_setup_true_lang_default","SelectField_default"],"sources":["../../../src/components/fields/SelectField.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { SelectSchema } from '@alfakit/core'\nimport { htmlLabelToText, isOptionGroup } from '@alfakit/core'\nimport { computed } from 'vue'\nimport { useT } from '../../context'\nimport { useField } from '../form/form-context'\nimport FieldWrapper from '../schema/FieldWrapper.vue'\nimport Select from '../ui/Select.vue'\nimport SelectContent from '../ui/SelectContent.vue'\nimport SelectGroup from '../ui/SelectGroup.vue'\nimport SelectItem from '../ui/SelectItem.vue'\nimport SelectLabel from '../ui/SelectLabel.vue'\nimport SelectTrigger from '../ui/SelectTrigger.vue'\nimport SelectValue from '../ui/SelectValue.vue'\nimport ComboboxSelect from './ComboboxSelect.vue'\nimport OptionLabel from './OptionLabel.vue'\nimport SelectAffixes from './SelectAffixes.vue'\n\nconst props = defineProps<{ component: SelectSchema }>()\nconst { value, setValue, blur, error, id, disabled, readOnly, aria } = useField<\n  string | number | Array<string | number> | null\n>(() => props.component)\n\nconst isNative = computed(\n  () => props.component.native && !props.component.multiple && !props.component.searchable,\n)\nconst isSimple = computed(() => !props.component.multiple && !props.component.searchable)\nconst current = computed(() =>\n  value.value === null || value.value === undefined ? '' : String(value.value),\n)\nconst hasValue = computed(\n  () => value.value !== null && value.value !== undefined && value.value !== '',\n)\nconst t = useT()\n/** Text of an option label for native `<option>`s (`allowHtml()` labels are HTML). */\nconst plainLabel = (label: string): string =>\n  props.component.allowHtml ? htmlLabelToText(label) : label\n</script>\n\n<template>\n  <FieldWrapper :field=\"props.component\" :html-for=\"id\" :error=\"error\">\n    <SelectAffixes :component=\"props.component\" :error=\"error\">\n      <select\n        v-if=\"isNative\"\n        :id=\"id\"\n        :name=\"props.component.name\"\n        :value=\"current\"\n        :disabled=\"disabled || readOnly\"\n        :required=\"props.component.required\"\n        :aria-invalid=\"aria['aria-invalid']\"\n        :aria-describedby=\"aria['aria-describedby']\"\n        :aria-required=\"aria['aria-required']\"\n        :aria-readonly=\"readOnly || undefined\"\n        class=\"border-input dark:bg-input/30 focus-visible:ring-ring/50 h-9 w-full rounded-md border bg-transparent px-3 text-sm shadow-xs outline-none focus-visible:ring-[3px]\"\n        @change=\"\n          setValue(\n            ($event.target as HTMLSelectElement).value === ''\n              ? null\n              : ($event.target as HTMLSelectElement).value,\n          )\n        \"\n        @blur=\"blur\"\n      >\n        <option v-if=\"props.component.selectablePlaceholder\" value=\"\">\n          {{ props.component.placeholder ?? '' }}\n        </option>\n        <template\n          v-for=\"option in props.component.options\"\n          :key=\"isOptionGroup(option) ? option.label : option.value\"\n        >\n          <optgroup v-if=\"isOptionGroup(option)\" :label=\"option.label\">\n            <option\n              v-for=\"item in option.options\"\n              :key=\"item.value\"\n              :value=\"item.value\"\n              :disabled=\"item.disabled\"\n            >\n              {{ plainLabel(item.label) }}\n            </option>\n          </optgroup>\n          <option v-else :value=\"option.value\" :disabled=\"option.disabled\">\n            {{ plainLabel(option.label) }}\n          </option>\n        </template>\n      </select>\n      <Select\n        v-else-if=\"isSimple\"\n        :model-value=\"current\"\n        :disabled=\"disabled || readOnly\"\n        @update:model-value=\"setValue($event === '__none__' ? null : ($event as string))\"\n      >\n        <SelectTrigger\n          :id=\"id\"\n          :aria-invalid=\"aria['aria-invalid']\"\n          :aria-describedby=\"aria['aria-describedby']\"\n          :aria-required=\"aria['aria-required']\"\n          :aria-readonly=\"readOnly || undefined\"\n          class=\"w-full\"\n        >\n          <SelectValue :placeholder=\"props.component.placeholder ?? ''\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectItem\n            v-if=\"props.component.selectablePlaceholder && hasValue\"\n            value=\"__none__\"\n            class=\"text-muted-foreground\"\n            >{{ props.component.placeholder ?? '—' }}</SelectItem\n          >\n          <template\n            v-for=\"option in props.component.options\"\n            :key=\"isOptionGroup(option) ? option.label : option.value\"\n          >\n            <SelectGroup v-if=\"isOptionGroup(option)\">\n              <SelectLabel>{{ option.label }}</SelectLabel>\n              <SelectItem\n                v-for=\"item in option.options\"\n                :key=\"item.value\"\n                :value=\"item.value\"\n                :disabled=\"item.disabled\"\n              >\n                <OptionLabel\n                  :option=\"item\"\n                  :allow-html=\"props.component.allowHtml\"\n                  :wrap=\"props.component.wrapOptionLabels !== false\"\n                />\n              </SelectItem>\n            </SelectGroup>\n            <SelectItem v-else :value=\"option.value\" :disabled=\"option.disabled\">\n              <OptionLabel\n                :option=\"option\"\n                :allow-html=\"props.component.allowHtml\"\n                :wrap=\"props.component.wrapOptionLabels !== false\"\n              />\n            </SelectItem>\n          </template>\n          <div\n            v-if=\"props.component.options.length === 0\"\n            data-slot=\"select-empty\"\n            class=\"text-muted-foreground px-2 py-1.5 text-sm\"\n          >\n            {{\n              props.component.noOptionsMessage ?? t('form.no_options', {}, 'No options available.')\n            }}\n          </div>\n        </SelectContent>\n      </Select>\n      <ComboboxSelect\n        v-else\n        :id=\"id\"\n        :component=\"props.component\"\n        :value=\"value\"\n        :set-value=\"setValue\"\n        :disabled=\"disabled\"\n        :read-only=\"readOnly\"\n        :error=\"error\"\n        :aria=\"aria\"\n      />\n    </SelectAffixes>\n  </FieldWrapper>\n</template>\n"],"mappings":""}

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

@@ -0,0 +1,7 @@
+import type { SelectSchema } from '@alfakit/core';
+type __VLS_Props = {
+    component: SelectSchema;
+};
+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=SelectField.vue.d.ts.map

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

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

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

@@ -0,0 +1,180 @@
+import { useT as e } from "../../context.js";
+import { useField as t } from "../form/form-context.js";
+import n from "../schema/FieldWrapper.js";
+import r from "./SelectAffixes.js";
+import i from "../ui/Select.js";
+import a from "../ui/SelectContent.js";
+import o from "../ui/SelectGroup.js";
+import s from "../ui/SelectItem.js";
+import c from "../ui/SelectLabel.js";
+import l from "../ui/SelectTrigger.js";
+import u from "../ui/SelectValue.js";
+import d from "./OptionLabel.js";
+import f from "./ComboboxSelect.js";
+import { htmlLabelToText as p, isOptionGroup as m } from "@alfakit/core";
+import { Fragment as h, computed as g, createBlock as _, createCommentVNode as v, createElementBlock as y, createTextVNode as b, createVNode as x, defineComponent as S, openBlock as C, renderList as w, toDisplayString as T, unref as E, withCtx as D } from "vue";
+//#region src/components/fields/SelectField.vue?vue&type=script&setup=true&lang.ts
+var O = [
+	"id",
+	"name",
+	"value",
+	"disabled",
+	"required",
+	"aria-invalid",
+	"aria-describedby",
+	"aria-required",
+	"aria-readonly"
+], k = {
+	key: 0,
+	value: ""
+}, A = ["label"], j = ["value", "disabled"], M = ["value", "disabled"], N = {
+	key: 1,
+	"data-slot": "select-empty",
+	class: "text-muted-foreground px-2 py-1.5 text-sm"
+}, P = /*@__PURE__*/ S({
+	__name: "SelectField",
+	props: { component: {} },
+	setup(S) {
+		let P = S, { value: F, setValue: I, blur: L, error: R, id: z, disabled: B, readOnly: V, aria: H } = t(() => P.component), U = g(() => P.component.native && !P.component.multiple && !P.component.searchable), W = g(() => !P.component.multiple && !P.component.searchable), G = g(() => F.value === null || F.value === void 0 ? "" : String(F.value)), K = g(() => F.value !== null && F.value !== void 0 && F.value !== ""), q = e(), J = (e) => P.component.allowHtml ? p(e) : e;
+		return (e, t) => (C(), _(n, {
+			field: P.component,
+			"html-for": E(z),
+			error: E(R)
+		}, {
+			default: D(() => [x(r, {
+				component: P.component,
+				error: E(R)
+			}, {
+				default: D(() => [U.value ? (C(), y("select", {
+					key: 0,
+					id: E(z),
+					name: P.component.name,
+					value: G.value,
+					disabled: E(B) || E(V),
+					required: P.component.required,
+					"aria-invalid": E(H)["aria-invalid"],
+					"aria-describedby": E(H)["aria-describedby"],
+					"aria-required": E(H)["aria-required"],
+					"aria-readonly": E(V) || void 0,
+					class: "border-input dark:bg-input/30 focus-visible:ring-ring/50 h-9 w-full rounded-md border bg-transparent px-3 text-sm shadow-xs outline-none focus-visible:ring-[3px]",
+					onChange: t[0] ||= (e) => E(I)(e.target.value === "" ? null : e.target.value),
+					onBlur: t[1] ||= (...e) => E(L) && E(L)(...e)
+				}, [P.component.selectablePlaceholder ? (C(), y("option", k, T(P.component.placeholder ?? ""), 1)) : v("", !0), (C(!0), y(h, null, w(P.component.options, (e) => (C(), y(h, { key: E(m)(e) ? e.label : e.value }, [E(m)(e) ? (C(), y("optgroup", {
+					key: 0,
+					label: e.label
+				}, [(C(!0), y(h, null, w(e.options, (e) => (C(), y("option", {
+					key: e.value,
+					value: e.value,
+					disabled: e.disabled
+				}, T(J(e.label)), 9, j))), 128))], 8, A)) : (C(), y("option", {
+					key: 1,
+					value: e.value,
+					disabled: e.disabled
+				}, T(J(e.label)), 9, M))], 64))), 128))], 40, O)) : W.value ? (C(), _(i, {
+					key: 1,
+					"model-value": G.value,
+					disabled: E(B) || E(V),
+					"onUpdate:modelValue": t[2] ||= (e) => E(I)(e === "__none__" ? null : e)
+				}, {
+					default: D(() => [x(l, {
+						id: E(z),
+						"aria-invalid": E(H)["aria-invalid"],
+						"aria-describedby": E(H)["aria-describedby"],
+						"aria-required": E(H)["aria-required"],
+						"aria-readonly": E(V) || void 0,
+						class: "w-full"
+					}, {
+						default: D(() => [x(u, { placeholder: P.component.placeholder ?? "" }, null, 8, ["placeholder"])]),
+						_: 1
+					}, 8, [
+						"id",
+						"aria-invalid",
+						"aria-describedby",
+						"aria-required",
+						"aria-readonly"
+					]), x(a, null, {
+						default: D(() => [
+							P.component.selectablePlaceholder && K.value ? (C(), _(s, {
+								key: 0,
+								value: "__none__",
+								class: "text-muted-foreground"
+							}, {
+								default: D(() => [b(T(P.component.placeholder ?? "—"), 1)]),
+								_: 1
+							})) : v("", !0),
+							(C(!0), y(h, null, w(P.component.options, (e) => (C(), y(h, { key: E(m)(e) ? e.label : e.value }, [E(m)(e) ? (C(), _(o, { key: 0 }, {
+								default: D(() => [x(c, null, {
+									default: D(() => [b(T(e.label), 1)]),
+									_: 2
+								}, 1024), (C(!0), y(h, null, w(e.options, (e) => (C(), _(s, {
+									key: e.value,
+									value: e.value,
+									disabled: e.disabled
+								}, {
+									default: D(() => [x(d, {
+										option: e,
+										"allow-html": P.component.allowHtml,
+										wrap: P.component.wrapOptionLabels !== !1
+									}, null, 8, [
+										"option",
+										"allow-html",
+										"wrap"
+									])]),
+									_: 2
+								}, 1032, ["value", "disabled"]))), 128))]),
+								_: 2
+							}, 1024)) : (C(), _(s, {
+								key: 1,
+								value: e.value,
+								disabled: e.disabled
+							}, {
+								default: D(() => [x(d, {
+									option: e,
+									"allow-html": P.component.allowHtml,
+									wrap: P.component.wrapOptionLabels !== !1
+								}, null, 8, [
+									"option",
+									"allow-html",
+									"wrap"
+								])]),
+								_: 2
+							}, 1032, ["value", "disabled"]))], 64))), 128)),
+							P.component.options.length === 0 ? (C(), y("div", N, T(P.component.noOptionsMessage ?? E(q)("form.no_options", {}, "No options available.")), 1)) : v("", !0)
+						]),
+						_: 1
+					})]),
+					_: 1
+				}, 8, ["model-value", "disabled"])) : (C(), _(f, {
+					key: 2,
+					id: E(z),
+					component: P.component,
+					value: E(F),
+					"set-value": E(I),
+					disabled: E(B),
+					"read-only": E(V),
+					error: E(R),
+					aria: E(H)
+				}, null, 8, [
+					"id",
+					"component",
+					"value",
+					"set-value",
+					"disabled",
+					"read-only",
+					"error",
+					"aria"
+				]))]),
+				_: 1
+			}, 8, ["component", "error"])]),
+			_: 1
+		}, 8, [
+			"field",
+			"html-for",
+			"error"
+		]));
+	}
+});
+//#endregion
+export { P as default };
+
+//# sourceMappingURL=SelectField.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectField.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","FieldWrapper","_unref","_withCtx","_createVNode","SelectAffixes","_createElementBlock","_toDisplayString","_createCommentVNode","_Fragment","_renderList","Select","SelectTrigger","SelectValue","SelectContent","SelectItem","_createTextVNode","SelectGroup","SelectLabel","OptionLabel","ComboboxSelect","FieldWrapper_default","SelectAffixes_default","Select_default","SelectContent_default","SelectGroup_default","SelectItem_default","SelectLabel_default","SelectTrigger_default","SelectValue_default","OptionLabel_default","ComboboxSelect_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","SelectField_vue_vue_type_script_setup_true_lang_default","props","__props","useField","isNative","computed","isSimple","current","value","hasValue","t","useT","plainLabel","htmlLabelToText","label","openBlock","createBlock","unref","id","error","withCtx","createVNode","createElementBlock","disabled","readOnly","aria","_cache","setValue","$event","args","blur","toDisplayString","createCommentVNode","Fragment","renderList","isOptionGroup","option","item","createTextVNode"],"sources":["../../../src/components/fields/SelectField.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { SelectSchema } from '@alfakit/core'\nimport { htmlLabelToText, isOptionGroup } from '@alfakit/core'\nimport { computed } from 'vue'\nimport { useT } from '../../context'\nimport { useField } from '../form/form-context'\nimport FieldWrapper from '../schema/FieldWrapper.vue'\nimport Select from '../ui/Select.vue'\nimport SelectContent from '../ui/SelectContent.vue'\nimport SelectGroup from '../ui/SelectGroup.vue'\nimport SelectItem from '../ui/SelectItem.vue'\nimport SelectLabel from '../ui/SelectLabel.vue'\nimport SelectTrigger from '../ui/SelectTrigger.vue'\nimport SelectValue from '../ui/SelectValue.vue'\nimport ComboboxSelect from './ComboboxSelect.vue'\nimport OptionLabel from './OptionLabel.vue'\nimport SelectAffixes from './SelectAffixes.vue'\n\nconst props = defineProps<{ component: SelectSchema }>()\nconst { value, setValue, blur, error, id, disabled, readOnly, aria } = useField<\n  string | number | Array<string | number> | null\n>(() => props.component)\n\nconst isNative = computed(\n  () => props.component.native && !props.component.multiple && !props.component.searchable,\n)\nconst isSimple = computed(() => !props.component.multiple && !props.component.searchable)\nconst current = computed(() =>\n  value.value === null || value.value === undefined ? '' : String(value.value),\n)\nconst hasValue = computed(\n  () => value.value !== null && value.value !== undefined && value.value !== '',\n)\nconst t = useT()\n/** Text of an option label for native `<option>`s (`allowHtml()` labels are HTML). */\nconst plainLabel = (label: string): string =>\n  props.component.allowHtml ? htmlLabelToText(label) : label\n</script>\n\n<template>\n  <FieldWrapper :field=\"props.component\" :html-for=\"id\" :error=\"error\">\n    <SelectAffixes :component=\"props.component\" :error=\"error\">\n      <select\n        v-if=\"isNative\"\n        :id=\"id\"\n        :name=\"props.component.name\"\n        :value=\"current\"\n        :disabled=\"disabled || readOnly\"\n        :required=\"props.component.required\"\n        :aria-invalid=\"aria['aria-invalid']\"\n        :aria-describedby=\"aria['aria-describedby']\"\n        :aria-required=\"aria['aria-required']\"\n        :aria-readonly=\"readOnly || undefined\"\n        class=\"border-input dark:bg-input/30 focus-visible:ring-ring/50 h-9 w-full rounded-md border bg-transparent px-3 text-sm shadow-xs outline-none focus-visible:ring-[3px]\"\n        @change=\"\n          setValue(\n            ($event.target as HTMLSelectElement).value === ''\n              ? null\n              : ($event.target as HTMLSelectElement).value,\n          )\n        \"\n        @blur=\"blur\"\n      >\n        <option v-if=\"props.component.selectablePlaceholder\" value=\"\">\n          {{ props.component.placeholder ?? '' }}\n        </option>\n        <template\n          v-for=\"option in props.component.options\"\n          :key=\"isOptionGroup(option) ? option.label : option.value\"\n        >\n          <optgroup v-if=\"isOptionGroup(option)\" :label=\"option.label\">\n            <option\n              v-for=\"item in option.options\"\n              :key=\"item.value\"\n              :value=\"item.value\"\n              :disabled=\"item.disabled\"\n            >\n              {{ plainLabel(item.label) }}\n            </option>\n          </optgroup>\n          <option v-else :value=\"option.value\" :disabled=\"option.disabled\">\n            {{ plainLabel(option.label) }}\n          </option>\n        </template>\n      </select>\n      <Select\n        v-else-if=\"isSimple\"\n        :model-value=\"current\"\n        :disabled=\"disabled || readOnly\"\n        @update:model-value=\"setValue($event === '__none__' ? null : ($event as string))\"\n      >\n        <SelectTrigger\n          :id=\"id\"\n          :aria-invalid=\"aria['aria-invalid']\"\n          :aria-describedby=\"aria['aria-describedby']\"\n          :aria-required=\"aria['aria-required']\"\n          :aria-readonly=\"readOnly || undefined\"\n          class=\"w-full\"\n        >\n          <SelectValue :placeholder=\"props.component.placeholder ?? ''\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectItem\n            v-if=\"props.component.selectablePlaceholder && hasValue\"\n            value=\"__none__\"\n            class=\"text-muted-foreground\"\n            >{{ props.component.placeholder ?? '—' }}</SelectItem\n          >\n          <template\n            v-for=\"option in props.component.options\"\n            :key=\"isOptionGroup(option) ? option.label : option.value\"\n          >\n            <SelectGroup v-if=\"isOptionGroup(option)\">\n              <SelectLabel>{{ option.label }}</SelectLabel>\n              <SelectItem\n                v-for=\"item in option.options\"\n                :key=\"item.value\"\n                :value=\"item.value\"\n                :disabled=\"item.disabled\"\n              >\n                <OptionLabel\n                  :option=\"item\"\n                  :allow-html=\"props.component.allowHtml\"\n                  :wrap=\"props.component.wrapOptionLabels !== false\"\n                />\n              </SelectItem>\n            </SelectGroup>\n            <SelectItem v-else :value=\"option.value\" :disabled=\"option.disabled\">\n              <OptionLabel\n                :option=\"option\"\n                :allow-html=\"props.component.allowHtml\"\n                :wrap=\"props.component.wrapOptionLabels !== false\"\n              />\n            </SelectItem>\n          </template>\n          <div\n            v-if=\"props.component.options.length === 0\"\n            data-slot=\"select-empty\"\n            class=\"text-muted-foreground px-2 py-1.5 text-sm\"\n          >\n            {{\n              props.component.noOptionsMessage ?? t('form.no_options', {}, 'No options available.')\n            }}\n          </div>\n        </SelectContent>\n      </Select>\n      <ComboboxSelect\n        v-else\n        :id=\"id\"\n        :component=\"props.component\"\n        :value=\"value\"\n        :set-value=\"setValue\"\n        :disabled=\"disabled\"\n        :read-only=\"readOnly\"\n        :error=\"error\"\n        :aria=\"aria\"\n      />\n    </SelectAffixes>\n  </FieldWrapper>\n</template>\n"],"mappings":"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"}

package/dist/components/fields/SelectReorderList.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectReorderList.js","names":["_sfc_main","SelectReorderList_vue_vue_type_script_setup_true_lang_default","SelectReorderList_default"],"sources":["../../../src/components/fields/SelectReorderList.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { moveListItem, reorderOffset } from '@alfakit/core'\nimport { GripVerticalIcon, XIcon } from '@lucide/vue'\nimport { nextTick, ref } from 'vue'\nimport { useDirection, useT } from '../../context'\nimport { cn } from '../../lib/utils'\n\n/** The chosen options of a `reorderable()` multi-select, in order. */\nconst props = defineProps<{\n  id: string\n  values: Array<string | number>\n  labelFor: (key: string) => string\n  locked: boolean\n  canRemove: boolean\n  onChange: (values: Array<string | number>) => void\n}>()\n\nconst t = useT()\nconst direction = useDirection()\nconst listRef = ref<HTMLElement | null>(null)\nconst dragIndex = ref<number | null>(null)\nconst announcement = ref('')\n\nconst move = (from: number, to: number) => {\n  if (to < 0 || to >= props.values.length) {\n    return\n  }\n\n  const label = props.labelFor(String(props.values[from]))\n  const total = props.values.length\n  props.onChange(moveListItem(props.values, from, to))\n  announcement.value = t(\n    'form.option_moved',\n    { option: label, position: to + 1, total },\n    ':option moved to position :position of :total',\n  )\n  void nextTick(() =>\n    listRef.value?.querySelectorAll<HTMLElement>('[data-select-chip]')[to]?.focus(),\n  )\n}\n\nconst onKeyDown = (event: KeyboardEvent, index: number) => {\n  const offset = reorderOffset(event, 'horizontal', direction.value)\n\n  if (props.locked || offset === null) {\n    return\n  }\n\n  event.preventDefault()\n  move(index, index + offset)\n}\n\nconst onDrop = (index: number) => {\n  if (dragIndex.value !== null && dragIndex.value !== index) move(dragIndex.value, index)\n  dragIndex.value = null\n}\n\nconst onDragOver = (event: DragEvent) => {\n  if (!props.locked) event.preventDefault()\n}\n</script>\n\n<template>\n  <template v-if=\"props.values.length > 0\">\n    <ul ref=\"listRef\" data-slot=\"select-reorder-list\" class=\"mt-2 flex flex-wrap gap-1.5\">\n      <li\n        v-for=\"(item, index) in props.values\"\n        :key=\"String(item)\"\n        data-select-chip=\"\"\n        :tabindex=\"props.locked ? undefined : 0\"\n        :aria-describedby=\"props.locked ? undefined : `${props.id}-reorder-hint`\"\n        :draggable=\"!props.locked\"\n        :class=\"\n          cn(\n            'bg-secondary text-secondary-foreground focus-visible:ring-ring/50 inline-flex items-center gap-1 rounded-md border px-1.5 py-0.5 text-xs font-medium outline-none focus-visible:ring-[3px]',\n            !props.locked && 'cursor-grab',\n            dragIndex === index && 'opacity-50',\n          )\n        \"\n        @keydown=\"onKeyDown($event, index)\"\n        @dragstart=\"dragIndex = index\"\n        @dragover=\"onDragOver\"\n        @drop=\"onDrop(index)\"\n        @dragend=\"dragIndex = null\"\n      >\n        <GripVerticalIcon\n          v-if=\"!props.locked\"\n          aria-hidden=\"true\"\n          class=\"text-muted-foreground size-3\"\n        />\n        <span>{{ props.labelFor(String(item)) }}</span>\n        <button\n          v-if=\"!props.locked && props.canRemove\"\n          type=\"button\"\n          :aria-label=\"t('form.remove_tag', { tag: props.labelFor(String(item)) }, 'Remove :tag')\"\n          class=\"hover:bg-foreground/10 rounded-sm\"\n          @click=\"props.onChange(props.values.filter((_, i) => i !== index))\"\n        >\n          <XIcon class=\"size-3\" />\n        </button>\n      </li>\n    </ul>\n    <span v-if=\"!props.locked\" :id=\"`${props.id}-reorder-hint`\" class=\"sr-only\">{{\n      t('form.reorder_options_hint', {}, 'Press Alt with an arrow key to move this option.')\n    }}</span>\n    <span aria-live=\"polite\" aria-atomic=\"true\" class=\"sr-only\">{{ announcement }}</span>\n  </template>\n</template>\n"],"mappings":""}

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

@@ -0,0 +1,12 @@
+/** The chosen options of a `reorderable()` multi-select, in order. */
+type __VLS_Props = {
+    id: string;
+    values: Array<string | number>;
+    labelFor: (key: string) => string;
+    locked: boolean;
+    canRemove: boolean;
+    onChange: (values: Array<string | number>) => void;
+};
+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=SelectReorderList.vue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectReorderList.vue.d.ts","sourceRoot":"","sources":["../../../src/components/fields/SelectReorderList.vue"],"names":[],"mappings":"AAoHA,sEAAsE;AACtE,KAAK,WAAW,GAAG;IACjB,EAAE,EAAE,MAAM,CAAA;IACV,MAAM,EAAE,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,CAAA;IAC9B,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAA;IACjC,MAAM,EAAE,OAAO,CAAA;IACf,SAAS,EAAE,OAAO,CAAA;IAClB,QAAQ,EAAE,CAAC,MAAM,EAAE,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,KAAK,IAAI,CAAA;CACnD,CAAC;;AA4LF,wBAMG"}

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

@@ -0,0 +1,90 @@
+import { useDirection as e, useT as t } from "../../context.js";
+import { cn as n } from "../../lib/utils.js";
+import { moveListItem as r, reorderOffset as i } from "@alfakit/core";
+import { Fragment as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createVNode as u, defineComponent as d, nextTick as f, normalizeClass as p, openBlock as m, ref as h, renderList as g, toDisplayString as _, unref as v } from "vue";
+import { GripVerticalIcon as y, XIcon as b } from "@lucide/vue";
+//#region src/components/fields/SelectReorderList.vue?vue&type=script&setup=true&lang.ts
+var x = [
+	"tabindex",
+	"aria-describedby",
+	"draggable",
+	"onKeydown",
+	"onDragstart",
+	"onDrop"
+], S = ["aria-label", "onClick"], C = ["id"], w = {
+	"aria-live": "polite",
+	"aria-atomic": "true",
+	class: "sr-only"
+}, T = /*@__PURE__*/ d({
+	__name: "SelectReorderList",
+	props: {
+		id: {},
+		values: {},
+		labelFor: { type: Function },
+		locked: { type: Boolean },
+		canRemove: { type: Boolean },
+		onChange: { type: Function }
+	},
+	setup(d) {
+		let T = d, E = t(), D = e(), O = h(null), k = h(null), A = h(""), j = (e, t) => {
+			if (t < 0 || t >= T.values.length) return;
+			let n = T.labelFor(String(T.values[e])), i = T.values.length;
+			T.onChange(r(T.values, e, t)), A.value = E("form.option_moved", {
+				option: n,
+				position: t + 1,
+				total: i
+			}, ":option moved to position :position of :total"), f(() => O.value?.querySelectorAll("[data-select-chip]")[t]?.focus());
+		}, M = (e, t) => {
+			let n = i(e, "horizontal", D.value);
+			T.locked || n === null || (e.preventDefault(), j(t, t + n));
+		}, N = (e) => {
+			k.value !== null && k.value !== e && j(k.value, e), k.value = null;
+		}, P = (e) => {
+			T.locked || e.preventDefault();
+		};
+		return (e, t) => T.values.length > 0 ? (m(), c(a, { key: 0 }, [
+			l("ul", {
+				ref_key: "listRef",
+				ref: O,
+				"data-slot": "select-reorder-list",
+				class: "mt-2 flex flex-wrap gap-1.5"
+			}, [(m(!0), c(a, null, g(T.values, (e, r) => (m(), c("li", {
+				key: String(e),
+				"data-select-chip": "",
+				tabindex: T.locked ? void 0 : 0,
+				"aria-describedby": T.locked ? void 0 : `${T.id}-reorder-hint`,
+				draggable: !T.locked,
+				class: p(v(n)("bg-secondary text-secondary-foreground focus-visible:ring-ring/50 inline-flex items-center gap-1 rounded-md border px-1.5 py-0.5 text-xs font-medium outline-none focus-visible:ring-[3px]", !T.locked && "cursor-grab", k.value === r && "opacity-50")),
+				onKeydown: (e) => M(e, r),
+				onDragstart: (e) => k.value = r,
+				onDragover: P,
+				onDrop: (e) => N(r),
+				onDragend: t[0] ||= (e) => k.value = null
+			}, [
+				T.locked ? s("", !0) : (m(), o(v(y), {
+					key: 0,
+					"aria-hidden": "true",
+					class: "text-muted-foreground size-3"
+				})),
+				l("span", null, _(T.labelFor(String(e))), 1),
+				!T.locked && T.canRemove ? (m(), c("button", {
+					key: 1,
+					type: "button",
+					"aria-label": v(E)("form.remove_tag", { tag: T.labelFor(String(e)) }, "Remove :tag"),
+					class: "hover:bg-foreground/10 rounded-sm",
+					onClick: (e) => T.onChange(T.values.filter((e, t) => t !== r))
+				}, [u(v(b), { class: "size-3" })], 8, S)) : s("", !0)
+			], 42, x))), 128))], 512),
+			T.locked ? s("", !0) : (m(), c("span", {
+				key: 0,
+				id: `${T.id}-reorder-hint`,
+				class: "sr-only"
+			}, _(v(E)("form.reorder_options_hint", {}, "Press Alt with an arrow key to move this option.")), 9, C)),
+			l("span", w, _(A.value), 1)
+		], 64)) : s("", !0);
+	}
+});
+//#endregion
+export { T as default };
+
+//# sourceMappingURL=SelectReorderList.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectReorderList.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_Fragment","_createElementVNode","_renderList","_normalizeClass","_unref","_createBlock","_createCommentVNode","_toDisplayString","_createVNode","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","SelectReorderList_vue_vue_type_script_setup_true_lang_default","props","__props","t","useT","direction","useDirection","listRef","ref","dragIndex","announcement","move","to","label","from","total","moveListItem","nextTick","onKeyDown","offset","reorderOffset","event","index","onDrop","onDragOver","openBlock","createElementBlock","Fragment","createElementVNode","renderList","item","normalizeClass","unref","cn","$event","_cache","createCommentVNode","createBlock","GripVerticalIcon","toDisplayString","i","createVNode","XIcon"],"sources":["../../../src/components/fields/SelectReorderList.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { moveListItem, reorderOffset } from '@alfakit/core'\nimport { GripVerticalIcon, XIcon } from '@lucide/vue'\nimport { nextTick, ref } from 'vue'\nimport { useDirection, useT } from '../../context'\nimport { cn } from '../../lib/utils'\n\n/** The chosen options of a `reorderable()` multi-select, in order. */\nconst props = defineProps<{\n  id: string\n  values: Array<string | number>\n  labelFor: (key: string) => string\n  locked: boolean\n  canRemove: boolean\n  onChange: (values: Array<string | number>) => void\n}>()\n\nconst t = useT()\nconst direction = useDirection()\nconst listRef = ref<HTMLElement | null>(null)\nconst dragIndex = ref<number | null>(null)\nconst announcement = ref('')\n\nconst move = (from: number, to: number) => {\n  if (to < 0 || to >= props.values.length) {\n    return\n  }\n\n  const label = props.labelFor(String(props.values[from]))\n  const total = props.values.length\n  props.onChange(moveListItem(props.values, from, to))\n  announcement.value = t(\n    'form.option_moved',\n    { option: label, position: to + 1, total },\n    ':option moved to position :position of :total',\n  )\n  void nextTick(() =>\n    listRef.value?.querySelectorAll<HTMLElement>('[data-select-chip]')[to]?.focus(),\n  )\n}\n\nconst onKeyDown = (event: KeyboardEvent, index: number) => {\n  const offset = reorderOffset(event, 'horizontal', direction.value)\n\n  if (props.locked || offset === null) {\n    return\n  }\n\n  event.preventDefault()\n  move(index, index + offset)\n}\n\nconst onDrop = (index: number) => {\n  if (dragIndex.value !== null && dragIndex.value !== index) move(dragIndex.value, index)\n  dragIndex.value = null\n}\n\nconst onDragOver = (event: DragEvent) => {\n  if (!props.locked) event.preventDefault()\n}\n</script>\n\n<template>\n  <template v-if=\"props.values.length > 0\">\n    <ul ref=\"listRef\" data-slot=\"select-reorder-list\" class=\"mt-2 flex flex-wrap gap-1.5\">\n      <li\n        v-for=\"(item, index) in props.values\"\n        :key=\"String(item)\"\n        data-select-chip=\"\"\n        :tabindex=\"props.locked ? undefined : 0\"\n        :aria-describedby=\"props.locked ? undefined : `${props.id}-reorder-hint`\"\n        :draggable=\"!props.locked\"\n        :class=\"\n          cn(\n            'bg-secondary text-secondary-foreground focus-visible:ring-ring/50 inline-flex items-center gap-1 rounded-md border px-1.5 py-0.5 text-xs font-medium outline-none focus-visible:ring-[3px]',\n            !props.locked && 'cursor-grab',\n            dragIndex === index && 'opacity-50',\n          )\n        \"\n        @keydown=\"onKeyDown($event, index)\"\n        @dragstart=\"dragIndex = index\"\n        @dragover=\"onDragOver\"\n        @drop=\"onDrop(index)\"\n        @dragend=\"dragIndex = null\"\n      >\n        <GripVerticalIcon\n          v-if=\"!props.locked\"\n          aria-hidden=\"true\"\n          class=\"text-muted-foreground size-3\"\n        />\n        <span>{{ props.labelFor(String(item)) }}</span>\n        <button\n          v-if=\"!props.locked && props.canRemove\"\n          type=\"button\"\n          :aria-label=\"t('form.remove_tag', { tag: props.labelFor(String(item)) }, 'Remove :tag')\"\n          class=\"hover:bg-foreground/10 rounded-sm\"\n          @click=\"props.onChange(props.values.filter((_, i) => i !== index))\"\n        >\n          <XIcon class=\"size-3\" />\n        </button>\n      </li>\n    </ul>\n    <span v-if=\"!props.locked\" :id=\"`${props.id}-reorder-hint`\" class=\"sr-only\">{{\n      t('form.reorder_options_hint', {}, 'Press Alt with an arrow key to move this option.')\n    }}</span>\n    <span aria-live=\"polite\" aria-atomic=\"true\" class=\"sr-only\">{{ announcement }}</span>\n  </template>\n</template>\n"],"mappings":"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"}

package/dist/components/fields/SliderField.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"SliderField.js","names":["_sfc_main","SliderField_vue_vue_type_script_setup_true_lang_default","SliderField_default"],"sources":["../../../src/components/fields/SliderField.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { SliderSchema } from '@alfakit/core'\nimport {\n  fieldIds,\n  sliderBehavior,\n  sliderBlocksTap,\n  sliderDirection,\n  sliderFillSections,\n  sliderFillStyle,\n  sliderFromPrimitive,\n  sliderHasTooltips,\n  sliderNextValues,\n  sliderPips,\n  sliderPrimitive,\n  sliderShowsTooltip,\n  sliderSnap,\n  sliderState,\n  sliderToPrimitive,\n  sliderValues,\n  startSliderRangeDrag,\n} from '@alfakit/core'\nimport { SliderRange, SliderRoot, SliderThumb, SliderTrack } from 'reka-ui'\nimport { computed, ref } from 'vue'\nimport { useDirection, useFormatter, useT } from '../../context'\nimport { cn } from '../../lib/utils'\nimport { useField } from '../form/form-context'\nimport FieldWrapper from '../schema/FieldWrapper.vue'\n\n/**\n * A slider with one thumb, or several for a range. Built on Reka Slider, which handles\n * pointer and keyboard input and mirrors itself in right-to-left layouts (`dir`). Values,\n * tooltips and pips are formatted with the panel's locale.\n */\nconst props = defineProps<{ component: SliderSchema }>()\nconst t = useT()\nconst panelDir = useDirection()\n// `rtl()` overrides the panel's direction.\nconst dir = computed(() => sliderDirection(props.component, panelDir.value))\nconst formatter = useFormatter()\nconst { value, setValue, blur, error, id, disabled, readOnly, aria } = useField<unknown>(\n  () => props.component,\n)\nconst values = computed(() => sliderValues(value.value, props.component))\nconst pips = computed(() => (props.component.pips ? sliderPips(props.component) : []))\nconst vertical = computed(() => Boolean(props.component.vertical))\n// `vertical(isTopToBottom: true)`: the minimum at the top.\nconst topToBottom = computed(() => vertical.value && Boolean(props.component.topToBottom))\nconst behavior = computed(() => sliderBehavior(props.component))\n// `Behavior::SmoothSteps`: no snapping while a pointer drags a thumb.\nconst smooth = ref(false)\nconst primitive = computed(() => sliderPrimitive(props.component, smooth.value))\nconst locked = computed(() => disabled.value || readOnly.value)\n\nconst change = (next: number[]) =>\n  setValue(sliderState(sliderNextValues(values.value, next, props.component), props.component))\n\nconst onModelValue = (next: number[] | undefined) => {\n  if (next) change(sliderFromPrimitive(next, props.component, !smooth.value))\n}\n\nconst onCommit = () => {\n  if (smooth.value) {\n    smooth.value = false\n    change(values.value.map((thumb) => sliderSnap(thumb, props.component)))\n  }\n\n  blur()\n}\n\n// Before the primitive sees the press: start a range drag, or swallow taps on the track.\nconst onPointerDownCapture = (event: PointerEvent) => {\n  if (locked.value) return\n\n  const target = event.target as Element\n  const track = (event.currentTarget as HTMLElement).querySelector<HTMLElement>(\n    '[data-slot=\"slider-track\"]',\n  )\n\n  if (behavior.value.has('drag') && target.closest('[data-slot=\"slider-range\"]') && track) {\n    startSliderRangeDrag(event, {\n      track,\n      values: values.value,\n      schema: props.component,\n      direction: dir.value,\n      vertical: vertical.value,\n      topToBottom: topToBottom.value,\n      onChange: (next) => setValue(sliderState(next, props.component)),\n      onEnd: () => blur(),\n    })\n\n    return\n  }\n\n  if (sliderBlocksTap(target, props.component)) {\n    event.stopPropagation()\n\n    return\n  }\n\n  if (behavior.value.has('smooth-steps') && target.closest('[role=\"slider\"]')) smooth.value = true\n}\n// `fillTrack([…])`: chosen sections are drawn here; the primitive's range stays clear.\nconst fillSections = computed(() => sliderFillSections(values.value, props.component))\nconst fill = computed(\n  () =>\n    fillSections.value === null && (props.component.fillTrack === true || values.value.length > 1),\n)\n\nconst format = (number: number) =>\n  formatter.value.number(number, {\n    maximumFractionDigits: props.component.decimalPlaces ?? 10,\n    minimumFractionDigits: props.component.decimalPlaces ?? 0,\n  })\n\nconst thumbLabel = (index: number) => {\n  if (values.value.length === 1) return undefined\n  if (values.value.length === 2) {\n    return index === 0 ? t('slider.minimum', {}, 'Minimum') : t('slider.maximum', {}, 'Maximum')\n  }\n\n  return t('slider.thumb', { number: index + 1 }, 'Value :number')\n}\n\n// Reka puts the minimum at the bottom of a vertical slider and at the inline start of a\n// horizontal one (the right in RTL).\nconst pipStyle = (percent: number) =>\n  vertical.value\n    ? topToBottom.value\n      ? { top: `${percent}%` }\n      : { bottom: `${percent}%` }\n    : dir.value === 'rtl'\n      ? { right: `${percent}%` }\n      : { left: `${percent}%` }\n</script>\n\n<template>\n  <FieldWrapper :field=\"props.component\" :html-for=\"`${id}-thumb-0`\" :error=\"error\">\n    <div\n      data-slot=\"slider\"\n      :class=\"\n        cn(\n          'px-2',\n          sliderHasTooltips(props.component) && !vertical && 'pt-7',\n          pips.length > 0 && 'pb-6',\n        )\n      \"\n      @pointerdown.capture=\"onPointerDownCapture\"\n    >\n      <SliderRoot\n        :id=\"id\"\n        :dir=\"dir\"\n        :min=\"primitive.min\"\n        :max=\"primitive.max\"\n        :step=\"primitive.step\"\n        :min-steps-between-thumbs=\"\n          props.component.minDifference && !primitive.nonLinear\n            ? Math.round(props.component.minDifference / props.component.step)\n            : 0\n        \"\n        :orientation=\"vertical ? 'vertical' : 'horizontal'\"\n        :inverted=\"topToBottom\"\n        :disabled=\"locked\"\n        :model-value=\"sliderToPrimitive(values, props.component)\"\n        :class=\"\n          cn(\n            'relative flex touch-none items-center select-none data-[disabled]:opacity-50',\n            vertical ? 'h-48 w-5 flex-col' : 'w-full',\n            readOnly && 'data-[disabled]:opacity-100',\n          )\n        \"\n        @update:model-value=\"onModelValue\"\n        @value-commit=\"onCommit\"\n      >\n        <SliderTrack\n          data-slot=\"slider-track\"\n          :class=\"\n            cn(\n              'bg-muted relative grow overflow-hidden rounded-full',\n              vertical ? 'h-full w-1.5' : 'h-1.5 w-full',\n            )\n          \"\n        >\n          <span\n            v-for=\"section in fillSections ?? []\"\n            :key=\"`${section.start}-${section.end}`\"\n            data-slot=\"slider-fill\"\n            aria-hidden=\"true\"\n            :class=\"cn('bg-primary absolute', vertical ? 'w-full' : 'h-full')\"\n            :style=\"sliderFillStyle(section, { vertical, topToBottom, direction: dir })\"\n          />\n          <SliderRange\n            data-slot=\"slider-range\"\n            :class=\"\n              cn(\n                'absolute',\n                fill ? 'bg-primary' : 'bg-transparent',\n                vertical ? 'w-full' : 'h-full',\n                behavior.has('drag') && values.length > 1 && !locked && 'cursor-grab',\n              )\n            \"\n          />\n        </SliderTrack>\n        <SliderThumb\n          v-for=\"(thumb, index) in values\"\n          :id=\"`${id}-thumb-${index}`\"\n          :key=\"index\"\n          :aria-label=\"thumbLabel(index)\"\n          :aria-labelledby=\"\n            values.length === 1 && props.component.label ? fieldIds(id).label : undefined\n          \"\n          :aria-describedby=\"aria['aria-describedby']\"\n          :aria-valuetext=\"format(thumb)\"\n          class=\"border-primary bg-background ring-ring/50 relative block size-4 shrink-0 rounded-full border shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none\"\n        >\n          <span\n            v-if=\"sliderShowsTooltip(props.component, index)\"\n            aria-hidden=\"true\"\n            :class=\"\n              cn(\n                'bg-foreground text-background pointer-events-none absolute rounded px-1.5 py-0.5 text-xs whitespace-nowrap tabular-nums',\n                vertical\n                  ? 'start-6 top-1/2 -translate-y-1/2'\n                  : 'bottom-6 left-1/2 -translate-x-1/2',\n              )\n            \"\n            >{{ format(thumb) }}</span\n          >\n        </SliderThumb>\n        <div\n          v-if=\"pips.length > 0\"\n          aria-hidden=\"true\"\n          :class=\"\n            cn('pointer-events-none absolute', vertical ? 'inset-y-0 start-6' : 'inset-x-0 top-4')\n          \"\n        >\n          <span\n            v-for=\"pip in pips\"\n            :key=\"pip.value\"\n            :style=\"pipStyle(pip.percent)\"\n            :class=\"\n              cn(\n                'absolute flex items-center gap-1',\n                vertical\n                  ? cn('flex-row', topToBottom ? '-translate-y-1/2' : 'translate-y-1/2')\n                  : 'flex-col',\n                !vertical && (dir === 'rtl' ? 'translate-x-1/2' : '-translate-x-1/2'),\n              )\n            \"\n          >\n            <span\n              :class=\"\n                cn(\n                  'bg-border block',\n                  vertical ? 'h-px' : 'w-px',\n                  pip.labelled && !pip.small\n                    ? vertical\n                      ? 'w-2'\n                      : 'h-2'\n                    : vertical\n                      ? 'w-1'\n                      : 'h-1',\n                )\n              \"\n            />\n            <span\n              v-if=\"pip.labelled\"\n              :class=\"\n                cn('text-muted-foreground tabular-nums', pip.small ? 'text-[0.625rem]' : 'text-xs')\n              \"\n              >{{ format(pip.value) }}</span\n            >\n          </span>\n        </div>\n      </SliderRoot>\n    </div>\n  </FieldWrapper>\n</template>\n"],"mappings":""}

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

@@ -0,0 +1,12 @@
+import type { SliderSchema } from '@alfakit/core';
+/**
+ * A slider with one thumb, or several for a range. Built on Reka Slider, which handles
+ * pointer and keyboard input and mirrors itself in right-to-left layouts (`dir`). Values,
+ * tooltips and pips are formatted with the panel's locale.
+ */
+type __VLS_Props = {
+    component: SliderSchema;
+};
+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=SliderField.vue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SliderField.vue.d.ts","sourceRoot":"","sources":["../../../src/components/fields/SliderField.vue"],"names":[],"mappings":"AAuRA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;AA2BjD;;;;GAIG;AACH,KAAK,WAAW,GAAG;IAAE,SAAS,EAAE,YAAY,CAAA;CAAE,CAAC;;AAyZ/C,wBAMG"}