@alfakit/vue 0.0.0-stage → 0.1.1

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

@@ -0,0 +1,253 @@
+import { useChoice as e, useDirection as t, useFormatter as n, useT as r } from "../../context.js";
+import { cn as i } from "../../lib/utils.js";
+import { useStore as ee } from "../../composables/use-store.js";
+import te from "../../lib/Icon.js";
+import a from "../ui/Button2.js";
+import ne from "../ui/Spinner.js";
+import { useField as re, useFormStore as ie } from "../form/form-context.js";
+import ae from "../ui/Input.js";
+import oe from "../ui/Popover.js";
+import se from "../ui/PopoverContent.js";
+import ce from "../ui/PopoverTrigger.js";
+import le from "../schema/FieldWrapper.js";
+import { ICON_PICKER_SIZES as o } from "./icon-picker-sizes.js";
+import ue from "./IconPickerValue.js";
+import s from "../ui/Textarea.js";
+import { IconPickerSearch as de, fieldIds as fe, iconPickerPreview as pe, isCustomSvgIcon as me } from "@alfakit/core";
+import { Fragment as c, computed as l, createBlock as u, createCommentVNode as d, createElementBlock as f, createElementVNode as p, createTextVNode as m, createVNode as h, defineComponent as g, mergeProps as _, nextTick as he, normalizeClass as v, normalizeStyle as ge, onBeforeUnmount as _e, openBlock as y, ref as b, renderList as x, toDisplayString as S, unref as C, useId as ve, watch as ye, withCtx as w, withModifiers as T } from "vue";
+import { ChevronsUpDownIcon as E, XIcon as D } from "@lucide/vue";
+//#region src/components/fields/IconPickerField.vue?vue&type=script&setup=true&lang.ts
+var O = {
+	"data-slot": "icon-picker",
+	class: "flex items-center gap-2"
+}, k = ["aria-label", "value"], A = { value: "" }, j = ["value"], M = [
+	"aria-label",
+	"aria-busy",
+	"tabindex",
+	"aria-activedescendant"
+], N = [
+	"id",
+	"aria-selected",
+	"aria-label",
+	"title",
+	"data-active",
+	"onClick"
+], P = { class: "flex items-center justify-between gap-2" }, be = {
+	role: "status",
+	"aria-live": "polite",
+	class: "text-muted-foreground flex items-center gap-1 text-xs"
+}, xe = {
+	key: 2,
+	"data-slot": "icon-picker-custom",
+	class: "flex flex-col gap-2 border-t pt-2"
+}, F = /*@__PURE__*/ g({
+	__name: "IconPickerField",
+	props: { component: {} },
+	setup(g) {
+		let F = g, I = r(), Se = e(), Ce = n(), we = t(), Te = ie(), { value: L, setValue: Ee, blur: De, error: R, id: z, disabled: Oe, readOnly: B, aria: ke } = re(() => F.component), V = new de(Te, F.component.statePath), H = ee(V.store), U = b(!1), W = b(""), G = b(null), K = `${ve()}-icons`, q = l(() => o[F.component.previewSize] ?? o.md), J = l(() => Math.max(1, F.component.gridColumns)), Y = l(() => typeof L.value == "string" && L.value !== "" ? L.value : null), X = l(() => Oe.value || B.value), Z = l(() => H.value.active >= 0 ? `${K}-${H.value.active}` : void 0), Ae = l(() => pe(F.component.selected, Y.value, V.preview(Y.value)));
+		_e(() => V.destroy()), ye(() => H.value.active, async (e) => {
+			e < 0 || (await he(), G.value?.ownerDocument.getElementById(`${K}-${e}`)?.scrollIntoView?.({ block: "nearest" }));
+		});
+		function je(e) {
+			U.value = e, e && V.open();
+		}
+		function Q(e) {
+			Ee(e), U.value = !1, De();
+		}
+		function $(e) {
+			if (e.key === "Enter") {
+				let t = H.value.icons[H.value.active];
+				t && (e.preventDefault(), Q(t.value));
+				return;
+			}
+			(e.key !== "Home" && e.key !== "End" || H.value.search === "") && V.move(e.key, J.value, we.value === "rtl") !== null && e.preventDefault();
+		}
+		function Me(e) {
+			F.component.searchable || (e.preventDefault(), G.value?.focus());
+		}
+		function Ne(e) {
+			let t = e.currentTarget;
+			t.scrollTop + t.clientHeight >= t.scrollHeight - 48 && V.loadMore();
+		}
+		let Pe = l(() => {
+			let { loading: e, error: t, icons: n, total: r } = H.value;
+			return e ? I("form.icon_picker.loading", {}, "Loading icons…") : t ? I("form.icon_picker.error", {}, "The icons could not be loaded.") : n.length === 0 ? I("form.icon_picker.no_results", {}, "No icons found.") : Se("form.icon_picker.results", r, { count: Ce.value.number(r) }, ":count icon|:count icons");
+		});
+		return (e, t) => (y(), u(le, {
+			field: F.component,
+			"html-for": C(z),
+			error: C(R)
+		}, {
+			default: w(() => [p("div", O, [h(oe, {
+				open: U.value,
+				"onUpdate:open": je
+			}, {
+				default: w(() => [h(ce, { "as-child": "" }, {
+					default: w(() => [h(a, _({
+						id: C(z),
+						type: "button",
+						variant: "outline",
+						"data-slot": "icon-picker-trigger",
+						"data-input": "",
+						"aria-haspopup": "dialog",
+						"aria-expanded": U.value
+					}, {
+						...C(ke),
+						...F.component.extraInputAttributes
+					}, {
+						"aria-labelledby": `${C(fe)(C(z)).label} ${C(z)}-value`,
+						"aria-readonly": C(B) || void 0,
+						disabled: X.value,
+						class: C(i)("h-9 min-w-0 flex-1 justify-between px-3 font-normal hover:bg-transparent", C(R) && "border-destructive")
+					}), {
+						default: w(() => [h(ue, {
+							id: `${C(z)}-value`,
+							component: F.component,
+							value: Y.value,
+							preview: Ae.value
+						}, null, 8, [
+							"id",
+							"component",
+							"value",
+							"preview"
+						]), h(C(E), { class: "size-4 shrink-0 opacity-50" })]),
+						_: 1
+					}, 16, [
+						"id",
+						"aria-expanded",
+						"aria-labelledby",
+						"aria-readonly",
+						"disabled",
+						"class"
+					])]),
+					_: 1
+				}), h(se, {
+					align: "start",
+					"data-slot": "icon-picker-content",
+					class: "flex w-80 max-w-[calc(100vw-2rem)] flex-col gap-2 p-2",
+					onOpenAutoFocus: Me
+				}, {
+					default: w(() => [
+						F.component.searchable ? (y(), u(ae, {
+							key: 0,
+							type: "search",
+							role: "combobox",
+							autocomplete: "off",
+							"aria-autocomplete": "list",
+							"aria-expanded": "true",
+							"aria-controls": K,
+							"aria-activedescendant": Z.value,
+							"aria-label": C(I)("form.icon_picker.search_label", {}, "Search icons"),
+							placeholder: C(I)("form.icon_picker.search", {}, "Search icons…"),
+							"model-value": C(H).search,
+							"onUpdate:modelValue": t[0] ||= (e) => C(V).setSearch(e),
+							onKeydown: $
+						}, null, 8, [
+							"aria-activedescendant",
+							"aria-label",
+							"placeholder",
+							"model-value"
+						])) : d("", !0),
+						F.component.sets.length > 1 ? (y(), f("select", {
+							key: 1,
+							"data-slot": "icon-picker-set",
+							"aria-label": C(I)("form.icon_picker.set", {}, "Icon set"),
+							value: C(H).set ?? "",
+							class: "border-input dark:bg-input/30 h-8 w-full rounded-md border bg-transparent px-2 text-sm",
+							onChange: t[1] ||= (e) => C(V).setSet(e.target.value || null)
+						}, [p("option", A, S(C(I)("form.icon_picker.all_sets", {}, "All sets")), 1), (y(!0), f(c, null, x(F.component.sets, (e) => (y(), f("option", {
+							key: e.key,
+							value: e.key
+						}, S(e.label), 9, j))), 128))], 40, k)) : d("", !0),
+						p("div", {
+							id: K,
+							ref_key: "grid",
+							ref: G,
+							role: "listbox",
+							"data-slot": "icon-picker-grid",
+							"aria-label": F.component.label ?? C(I)("form.icon_picker.icons", {}, "Icons"),
+							"aria-busy": C(H).loading || void 0,
+							tabindex: F.component.searchable ? -1 : 0,
+							"aria-activedescendant": F.component.searchable ? void 0 : Z.value,
+							class: "grid max-h-72 gap-1 overflow-y-auto outline-none",
+							style: ge({ gridTemplateColumns: `repeat(${J.value}, minmax(0, 1fr))` }),
+							onKeydown: t[3] ||= (e) => F.component.searchable ? void 0 : $(e),
+							onScroll: Ne
+						}, [(y(!0), f(c, null, x(C(H).icons, (e, n) => (y(), f("div", {
+							id: `${K}-${n}`,
+							key: e.value,
+							role: "option",
+							"data-slot": "icon-picker-option",
+							"aria-selected": e.value === Y.value,
+							"aria-label": e.value,
+							title: e.value,
+							"data-active": n === C(H).active || void 0,
+							class: v(C(i)("hover:bg-accent hover:text-accent-foreground flex cursor-pointer items-center justify-center rounded-md", q.value.cell, n === C(H).active && "bg-accent text-accent-foreground ring-ring ring-2", e.value === Y.value && "bg-primary/10 text-primary")),
+							onMousedown: t[2] ||= T(() => {}, ["prevent"]),
+							onClick: (t) => Q(e.value)
+						}, [h(te, {
+							name: e.icon ?? e.value,
+							class: v(q.value.icon)
+						}, null, 8, ["name", "class"])], 42, N))), 128))], 44, M),
+						p("div", P, [p("p", be, [C(H).loading ? (y(), u(ne, {
+							key: 0,
+							class: "size-3"
+						})) : d("", !0), m(" " + S(Pe.value), 1)]), C(H).hasMore ? (y(), u(a, {
+							key: 0,
+							type: "button",
+							variant: "ghost",
+							size: "sm",
+							disabled: C(H).loading,
+							onClick: t[4] ||= (e) => C(V).loadMore()
+						}, {
+							default: w(() => [m(S(C(I)("form.icon_picker.load_more", {}, "Load more icons")), 1)]),
+							_: 1
+						}, 8, ["disabled"])) : d("", !0)]),
+						F.component.allowCustomSvg ? (y(), f("div", xe, [h(s, {
+							modelValue: W.value,
+							"onUpdate:modelValue": t[5] ||= (e) => W.value = e,
+							dir: "ltr",
+							rows: "3",
+							"aria-label": C(I)("form.icon_picker.custom_svg_label", {}, "Paste SVG markup"),
+							placeholder: "<svg viewBox=\"0 0 24 24\">…</svg>",
+							class: "font-mono text-xs"
+						}, null, 8, ["modelValue", "aria-label"]), h(a, {
+							type: "button",
+							variant: "secondary",
+							size: "sm",
+							disabled: !C(me)(W.value),
+							onClick: t[6] ||= () => {
+								Q(W.value.trim()), W.value = "";
+							}
+						}, {
+							default: w(() => [m(S(C(I)("form.icon_picker.use_svg", {}, "Use SVG")), 1)]),
+							_: 1
+						}, 8, ["disabled"])])) : d("", !0)
+					]),
+					_: 1
+				})]),
+				_: 1
+			}, 8, ["open"]), Y.value !== null && !X.value ? (y(), u(a, {
+				key: 0,
+				type: "button",
+				variant: "ghost",
+				size: "icon",
+				"data-slot": "icon-picker-clear",
+				"aria-label": C(I)("form.icon_picker.clear", {}, "Clear icon"),
+				onClick: t[7] ||= (e) => Q(null)
+			}, {
+				default: w(() => [h(C(D))]),
+				_: 1
+			}, 8, ["aria-label"])) : d("", !0)])]),
+			_: 1
+		}, 8, [
+			"field",
+			"html-for",
+			"error"
+		]));
+	}
+});
+//#endregion
+export { F as default };
+
+//# sourceMappingURL=IconPickerField.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"IconPickerField.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","FieldWrapper","_unref","_withCtx","_createElementVNode","_createVNode","Popover","PopoverTrigger","Button","_mergeProps","IconPickerValue","PopoverContent","Input","_createCommentVNode","_createElementBlock","_toDisplayString","_Fragment","_renderList","_normalizeStyle","_normalizeClass","_withModifiers","Icon","Spinner","_createTextVNode","Textarea","Icon_default","Button_default","Spinner_default","Input_default","Popover_default","PopoverContent_default","PopoverTrigger_default","FieldWrapper_default","IconPickerValue_default","Textarea_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","_hoisted_9","IconPickerField_vue_vue_type_script_setup_true_lang_default","props","__props","t","useT","choice","useChoice","formatter","useFormatter","direction","useDirection","form","useFormStore","useField","search","IconPickerSearch","state","useStore","open","ref","svg","grid","listId","useId","size","computed","ICON_PICKER_SIZES","columns","current","value","locked","disabled","readOnly","activeId","preview","iconPickerPreview","onBeforeUnmount","watch","active","nextTick","onOpenChange","next","pick","setValue","blur","onKeyDown","event","icon","onOpenAutoFocus","onScroll","target","status","failed","loading","icons","total","openBlock","createBlock","unref","id","error","withCtx","createElementVNode","createVNode","mergeProps","aria","fieldIds","cn","ChevronsUpDownIcon","_cache","$event","createCommentVNode","createElementBlock","toDisplayString","Fragment","renderList","set","normalizeStyle","index","normalizeClass","withModifiers","createTextVNode","isCustomSvgIcon","XIcon"],"sources":["../../../src/components/fields/IconPickerField.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  fieldIds,\n  iconPickerPreview,\n  IconPickerSearch,\n  isCustomSvgIcon,\n  type IconPickerSchema,\n} from '@alfakit/core'\nimport { ChevronsUpDownIcon, XIcon } from '@lucide/vue'\nimport { computed, nextTick, onBeforeUnmount, ref, useId, watch } from 'vue'\nimport { useChoice, useDirection, useFormatter, useT } from '../../context'\nimport { useStore } from '../../composables/use-store'\nimport Icon from '../../lib/Icon.vue'\nimport { cn } from '../../lib/utils'\nimport { useField, useFormStore } from '../form/form-context'\nimport FieldWrapper from '../schema/FieldWrapper.vue'\nimport Button from '../ui/Button.vue'\nimport Input from '../ui/Input.vue'\nimport Popover from '../ui/Popover.vue'\nimport PopoverContent from '../ui/PopoverContent.vue'\nimport PopoverTrigger from '../ui/PopoverTrigger.vue'\nimport Spinner from '../ui/Spinner.vue'\nimport Textarea from '../ui/Textarea.vue'\nimport { ICON_PICKER_SIZES } from './icon-picker-sizes'\nimport IconPickerValue from './IconPickerValue.vue'\n\n/**\n * `IconPicker::make()`: a trigger showing the selected icon and a popover with a search\n * box, a set filter and a grid of icons loaded from the server a page at a time. The grid\n * is a listbox driven from the search box (`aria-activedescendant`): arrow keys move,\n * Enter picks, Escape closes.\n */\nconst props = defineProps<{ component: IconPickerSchema }>()\nconst t = useT()\nconst choice = useChoice()\nconst formatter = useFormatter()\nconst direction = useDirection()\nconst form = useFormStore()\nconst { value, setValue, blur, error, id, disabled, readOnly, aria } = useField<string | null>(\n  () => props.component,\n)\nconst search = new IconPickerSearch(form, props.component.statePath)\nconst state = useStore(search.store)\nconst open = ref(false)\nconst svg = ref('')\nconst grid = ref<HTMLElement | null>(null)\nconst listId = `${useId()}-icons`\nconst size = computed(() => ICON_PICKER_SIZES[props.component.previewSize] ?? ICON_PICKER_SIZES.md)\nconst columns = computed(() => Math.max(1, props.component.gridColumns))\nconst current = computed(() =>\n  typeof value.value === 'string' && value.value !== '' ? value.value : null,\n)\nconst locked = computed(() => disabled.value || readOnly.value)\nconst activeId = computed(() =>\n  state.value.active >= 0 ? `${listId}-${state.value.active}` : undefined,\n)\n// Read after every pick: the previews map is filled by the search results.\nconst preview = computed(() =>\n  iconPickerPreview(props.component.selected, current.value, search.preview(current.value)),\n)\n\nonBeforeUnmount(() => search.destroy())\n\n// Keep the highlighted icon in view while the arrow keys move it.\nwatch(\n  () => state.value.active,\n  async (active) => {\n    if (active < 0) return\n\n    await nextTick()\n    grid.value?.ownerDocument\n      .getElementById(`${listId}-${active}`)\n      ?.scrollIntoView?.({ block: 'nearest' })\n  },\n)\n\nfunction onOpenChange(next: boolean) {\n  open.value = next\n\n  if (next) search.open()\n}\n\nfunction pick(next: string | null) {\n  setValue(next)\n  open.value = false\n  blur()\n}\n\nfunction onKeyDown(event: KeyboardEvent) {\n  if (event.key === 'Enter') {\n    const icon = state.value.icons[state.value.active]\n\n    if (icon) {\n      event.preventDefault()\n      pick(icon.value)\n    }\n\n    return\n  }\n\n  // Home/End stay with the text cursor while there is a search to edit.\n  if ((event.key === 'Home' || event.key === 'End') && state.value.search !== '') return\n\n  if (search.move(event.key, columns.value, direction.value === 'rtl') !== null) {\n    event.preventDefault()\n  }\n}\n\nfunction onOpenAutoFocus(event: Event) {\n  if (!props.component.searchable) {\n    event.preventDefault()\n    grid.value?.focus()\n  }\n}\n\nfunction onScroll(event: Event) {\n  const target = event.currentTarget as HTMLElement\n\n  if (target.scrollTop + target.clientHeight >= target.scrollHeight - 48) search.loadMore()\n}\n\nconst status = computed(() => {\n  const { loading, error: failed, icons, total } = state.value\n\n  if (loading) return t('form.icon_picker.loading', {}, 'Loading icons…')\n  if (failed) return t('form.icon_picker.error', {}, 'The icons could not be loaded.')\n  if (icons.length === 0) return t('form.icon_picker.no_results', {}, 'No icons found.')\n\n  return choice(\n    'form.icon_picker.results',\n    total,\n    { count: formatter.value.number(total) },\n    ':count icon|:count icons',\n  )\n})\n</script>\n\n<template>\n  <FieldWrapper :field=\"props.component\" :html-for=\"id\" :error=\"error\">\n    <div data-slot=\"icon-picker\" class=\"flex items-center gap-2\">\n      <Popover :open=\"open\" @update:open=\"onOpenChange\">\n        <PopoverTrigger as-child>\n          <Button\n            :id=\"id\"\n            type=\"button\"\n            variant=\"outline\"\n            data-slot=\"icon-picker-trigger\"\n            data-input=\"\"\n            aria-haspopup=\"dialog\"\n            :aria-expanded=\"open\"\n            v-bind=\"{ ...aria, ...props.component.extraInputAttributes }\"\n            :aria-labelledby=\"`${fieldIds(id).label} ${id}-value`\"\n            :aria-readonly=\"readOnly || undefined\"\n            :disabled=\"locked\"\n            :class=\"\n              cn(\n                'h-9 min-w-0 flex-1 justify-between px-3 font-normal hover:bg-transparent',\n                error && 'border-destructive',\n              )\n            \"\n          >\n            <IconPickerValue\n              :id=\"`${id}-value`\"\n              :component=\"props.component\"\n              :value=\"current\"\n              :preview=\"preview\"\n            />\n            <ChevronsUpDownIcon class=\"size-4 shrink-0 opacity-50\" />\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent\n          align=\"start\"\n          data-slot=\"icon-picker-content\"\n          class=\"flex w-80 max-w-[calc(100vw-2rem)] flex-col gap-2 p-2\"\n          @open-auto-focus=\"onOpenAutoFocus\"\n        >\n          <Input\n            v-if=\"props.component.searchable\"\n            type=\"search\"\n            role=\"combobox\"\n            autocomplete=\"off\"\n            aria-autocomplete=\"list\"\n            aria-expanded=\"true\"\n            :aria-controls=\"listId\"\n            :aria-activedescendant=\"activeId\"\n            :aria-label=\"t('form.icon_picker.search_label', {}, 'Search icons')\"\n            :placeholder=\"t('form.icon_picker.search', {}, 'Search icons…')\"\n            :model-value=\"state.search\"\n            @update:model-value=\"search.setSearch($event)\"\n            @keydown=\"onKeyDown\"\n          />\n          <select\n            v-if=\"props.component.sets.length > 1\"\n            data-slot=\"icon-picker-set\"\n            :aria-label=\"t('form.icon_picker.set', {}, 'Icon set')\"\n            :value=\"state.set ?? ''\"\n            class=\"border-input dark:bg-input/30 h-8 w-full rounded-md border bg-transparent px-2 text-sm\"\n            @change=\"search.setSet(($event.target as HTMLSelectElement).value || null)\"\n          >\n            <option value=\"\">{{ t('form.icon_picker.all_sets', {}, 'All sets') }}</option>\n            <option v-for=\"set in props.component.sets\" :key=\"set.key\" :value=\"set.key\">\n              {{ set.label }}\n            </option>\n          </select>\n          <div\n            :id=\"listId\"\n            ref=\"grid\"\n            role=\"listbox\"\n            data-slot=\"icon-picker-grid\"\n            :aria-label=\"props.component.label ?? t('form.icon_picker.icons', {}, 'Icons')\"\n            :aria-busy=\"state.loading || undefined\"\n            :tabindex=\"props.component.searchable ? -1 : 0\"\n            :aria-activedescendant=\"props.component.searchable ? undefined : activeId\"\n            class=\"grid max-h-72 gap-1 overflow-y-auto outline-none\"\n            :style=\"{ gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` }\"\n            @keydown=\"props.component.searchable ? undefined : onKeyDown($event)\"\n            @scroll=\"onScroll\"\n          >\n            <div\n              v-for=\"(icon, index) in state.icons\"\n              :id=\"`${listId}-${index}`\"\n              :key=\"icon.value\"\n              role=\"option\"\n              data-slot=\"icon-picker-option\"\n              :aria-selected=\"icon.value === current\"\n              :aria-label=\"icon.value\"\n              :title=\"icon.value\"\n              :data-active=\"index === state.active || undefined\"\n              :class=\"\n                cn(\n                  'hover:bg-accent hover:text-accent-foreground flex cursor-pointer items-center justify-center rounded-md',\n                  size.cell,\n                  index === state.active && 'bg-accent text-accent-foreground ring-ring ring-2',\n                  icon.value === current && 'bg-primary/10 text-primary',\n                )\n              \"\n              @mousedown.prevent\n              @click=\"pick(icon.value)\"\n            >\n              <Icon :name=\"icon.icon ?? icon.value\" :class=\"size.icon\" />\n            </div>\n          </div>\n          <div class=\"flex items-center justify-between gap-2\">\n            <p\n              role=\"status\"\n              aria-live=\"polite\"\n              class=\"text-muted-foreground flex items-center gap-1 text-xs\"\n            >\n              <Spinner v-if=\"state.loading\" class=\"size-3\" />\n              {{ status }}\n            </p>\n            <Button\n              v-if=\"state.hasMore\"\n              type=\"button\"\n              variant=\"ghost\"\n              size=\"sm\"\n              :disabled=\"state.loading\"\n              @click=\"search.loadMore()\"\n            >\n              {{ t('form.icon_picker.load_more', {}, 'Load more icons') }}\n            </Button>\n          </div>\n          <div\n            v-if=\"props.component.allowCustomSvg\"\n            data-slot=\"icon-picker-custom\"\n            class=\"flex flex-col gap-2 border-t pt-2\"\n          >\n            <Textarea\n              v-model=\"svg\"\n              dir=\"ltr\"\n              rows=\"3\"\n              :aria-label=\"t('form.icon_picker.custom_svg_label', {}, 'Paste SVG markup')\"\n              placeholder='<svg viewBox=\"0 0 24 24\">…</svg>'\n              class=\"font-mono text-xs\"\n            />\n            <Button\n              type=\"button\"\n              variant=\"secondary\"\n              size=\"sm\"\n              :disabled=\"!isCustomSvgIcon(svg)\"\n              @click=\"\n                () => {\n                  pick(svg.trim())\n                  svg = ''\n                }\n              \"\n            >\n              {{ t('form.icon_picker.use_svg', {}, 'Use SVG') }}\n            </Button>\n          </div>\n        </PopoverContent>\n      </Popover>\n      <Button\n        v-if=\"current !== null && !locked\"\n        type=\"button\"\n        variant=\"ghost\"\n        size=\"icon\"\n        data-slot=\"icon-picker-clear\"\n        :aria-label=\"t('form.icon_picker.clear', {}, 'Clear icon')\"\n        @click=\"pick(null)\"\n      >\n        <XIcon />\n      </Button>\n    </div>\n  </FieldWrapper>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgCA,IAAM8C,IAAQC,GACRC,IAAIC,EAAK,GACTC,KAASC,EAAU,GACnBC,KAAYC,EAAa,GACzBC,KAAYC,EAAa,GACzBC,KAAOC,GAAa,GACpB,EAAE,UAAO,cAAU,UAAM,UAAO,OAAI,cAAU,aAAU,aAASC,SAC/DZ,EAAM,SACd,GACMa,IAAS,IAAIC,GAAiBJ,IAAMV,EAAM,UAAU,SAAS,GAC7De,IAAQC,GAASH,EAAO,KAAK,GAC7BI,IAAOC,EAAI,EAAK,GAChBC,IAAMD,EAAI,EAAE,GACZE,IAAOF,EAAwB,IAAI,GACnCG,IAAS,GAAGC,GAAM,EAAE,SACpBC,IAAOC,QAAeC,EAAkBzB,EAAM,UAAU,gBAAgByB,EAAkB,EAAE,GAC5FC,IAAUF,QAAe,KAAK,IAAI,GAAGxB,EAAM,UAAU,WAAW,CAAC,GACjE2B,IAAUH,QACd,OAAOI,EAAM,SAAU,YAAYA,EAAM,UAAU,KAAKA,EAAM,QAAQ,IACxE,GACMC,IAASL,QAAeM,GAAS,SAASC,EAAS,KAAK,GACxDC,IAAWR,QACfT,EAAM,MAAM,UAAU,IAAI,GAAGM,EAAO,GAAGN,EAAM,MAAM,WAAW,KAAA,CAChE,GAEMkB,KAAUT,QACdU,GAAkBlC,EAAM,UAAU,UAAU2B,EAAQ,OAAOd,EAAO,QAAQc,EAAQ,KAAK,CAAC,CAC1F;EAKA,AAHAQ,SAAsBtB,EAAO,QAAQ,CAAC,GAGtCuB,SACQrB,EAAM,MAAM,QAClB,OAAO,MAAW;GAChB,AAAIsB,IAAS,MAEb,MAAMC,GAAS,GACflB,EAAK,OAAO,cACT,eAAe,GAAGC,EAAO,GAAGgB,GAAQ,CAAA,EACnC,iBAAiB,EAAE,OAAO,UAAU,CAAC;EAC3C,CACF;EAEA,SAASE,GAAa,GAAe;GAGnC,AAFA,EAAK,QAAQC,GAETA,KAAM3B,EAAO,KAAK;EACxB;EAEA,SAAS4B,EAAK,GAAqB;GAGjC,AAFAC,GAASF,CAAI,GACb,EAAK,QAAQ,IACbG,GAAK;EACP;EAEA,SAASC,EAAU,GAAsB;GACvC,IAAIC,EAAM,QAAQ,SAAS;IACzB,IAAMC,IAAO/B,EAAM,MAAM,MAAMA,EAAM,MAAM;IAE3C,AAAI+B,MACFD,EAAM,eAAe,GACrBJ,EAAKK,EAAK,KAAK;IAGjB;GACF;GAGA,CAAKD,EAAM,QAAQ,UAAUA,EAAM,QAAQ,SAAU9B,EAAM,MAAM,WAAW,OAExEF,EAAO,KAAKgC,EAAM,KAAKnB,EAAQ,OAAOlB,GAAU,UAAU,KAAK,MAAM,QACvEqC,EAAM,eAAe;EAEzB;EAEA,SAASE,GAAgB,GAAc;GACrC,AAAK/C,EAAM,UAAU,eACnB6C,EAAM,eAAe,GACrBzB,EAAK,OAAO,MAAM;EAEtB;EAEA,SAAS4B,GAAS,GAAc;GAC9B,IAAMC,IAASJ,EAAM;GAErB,AAAII,EAAO,YAAYA,EAAO,gBAAgBA,EAAO,eAAe,MAAIpC,EAAO,SAAS;EAC1F;EAEA,IAAMqC,KAAS1B,QAAe;GAC5B,IAAM,EAAE,YAAS,OAAO2B,GAAQ,UAAO,aAAUpC,EAAM;GAMvD,OAJIqC,IAAgBlD,EAAE,4BAA4B,CAAC,GAAG,gBAAgB,IAClEiD,IAAejD,EAAE,0BAA0B,CAAC,GAAG,gCAAgC,IAC/EmD,EAAM,WAAW,IAAUnD,EAAE,+BAA+B,CAAC,GAAG,iBAAiB,IAE9EE,GACL,4BACAkD,GACA,EAAE,OAAOhD,GAAU,MAAM,OAAOgD,CAAK,EAAE,GACvC,0BACF;EACF,CAAC;oBAICpG,EAAA,GAAAC,EAsKeC,IAAA;GAtKA,OAAO4C,EAAM;GAAY,YAAU3C,EAAAqG,CAAA;GAAK,OAAOrG,EAAAsG,CAAA;;GAC5D,SAAArG,QAoKM,CApKNC,EAoKM,OApKN+B,GAoKM,CAnKJ9B,EAuJUC,IAAA;IAvJA,MAAMwD,EAAA;IAAO,iBAAasB;;IAClC,SAAAjF,QA4BiB,CA5BjBE,EA4BiBE,IAAA,EA5BD,YAAA,GAAQ,GAAA;KACtB,SAAAJ,QA0BS,CA1BTE,EA0BSG,GA1BTC,EA0BS;MAzBN,IAAIP,EAAAqG,CAAA;MACL,MAAK;MACL,SAAQ;MACR,aAAU;MACV,cAAW;MACX,iBAAc;MACb,iBAAezC,EAAA;KACH,GAAA;MAAA,GAAA5D,EAAA2G,EAAA;MAAI,GAAKhE,EAAM,UAAU;KAAoB,GAAA;MACzD,mBAAe,GAAK3C,EAAA4G,EAAA,CAAQ,CAAC5G,EAAAqG,CAAA,CAAE,CAAA,CAAE,MAAK,GAAIrG,EAAAqG,CAAA,EAAE;MAC5C,iBAAerG,EAAA0E,CAAA,KAAY,KAAA;MAC3B,UAAUF,EAAA;MACV,OAAsBxE,EAAA6G,CAAA,CAAE,CAAA,4EAA8G7G,EAAAsG,CAAA,KAAK,oBAAA;;MAO5I,SAAArG,QAKE,CALFE,EAKEK,IAAA;OAJC,IAAE,GAAKR,EAAAqG,CAAA,EAAE;OACT,WAAW1D,EAAM;OACjB,OAAO2B,EAAA;OACP,SAASM,GAAA;;;;;;MAEZzE,CAAAA,GAAAA,EAAyDH,EAAA8G,CAAA,GAAA,EAArC,OAAM,6BAA4B,CAAA,CAAA,CAAA;;;;;;;;;;;IAG1D3G,CAAAA,GAAAA,EAwHiBM,IAAA;KAvHf,OAAM;KACN,aAAU;KACV,OAAM;KACY;;KAElB,SAAAR,QAcE;MAbM0C,EAAM,UAAU,cADxB9C,EAAA,GAAAC,EAcEY,IAAA;;OAZA,MAAK;OACL,MAAK;OACL,cAAa;OACb,qBAAkB;OAClB,iBAAc;OACb,iBAAesD;OACf,yBAAuBW,EAAA;OACvB,cAAY3E,EAAA6C,CAAA,CAAC,CAAA,iCAAA,CAAA,GAAA,cAAA;OACb,aAAa7C,EAAA6C,CAAA,CAAC,CAAA,2BAAA,CAAA,GAAA,eAAA;OACd,eAAa7C,EAAA0D,CAAA,CAAK,CAAC;OACnB,uBAAkB,AAAAqD,EAAA,QAAA,MAAE/G,EAAAwD,CAAA,CAAM,CAAC,UAAUwD,CAAM;OAC3C,WAASzB;;;;;;;MAGJ5C,EAAM,UAAU,KAAK,SAAM,KADnC9C,EAAA,GAAAe,EAYS,UAAA;;OAVP,aAAU;OACT,cAAYZ,EAAA6C,CAAA,CAAC,CAAA,wBAAA,CAAA,GAAA,UAAA;OACb,OAAO7C,EAAA0D,CAAA,CAAK,CAAC,OAAG;OACjB,OAAM;OACL,UAAM,AAAAqD,EAAA,QAAA,MAAE/G,EAAAwD,CAAA,CAAM,CAAC,OAAQwD,EAAO,OAA6B,SAAK,IAAA;MAEjE9G,GAAAA,CAAAA,EAA8E,UAA9EiC,GAA8EtB,EAA1Db,EAAA6C,CAAA,CAAC,CAAA,6BAAA,CAAA,GAAA,UAAA,CAAA,GAAA,CAAA,IACrBhD,EAAA,EAAA,GAAAe,EAESE,GAAA,MAAAC,EAFa4B,EAAM,UAAU,OAAvB,OAAf9C,EAAA,GAAAe,EAES,UAAA;OAFoC,KAAK0G,EAAI;OAAM,OAAOA,EAAI;MAClE,GAAAzG,EAAAyG,EAAI,KAAK,GAAA,GAAAlF,CAAA;MAGhBlC,EAqCM,OAAA;OApCH,IAAI8D;OACD,SAAA;OAAJ,KAAID;OACJ,MAAK;OACL,aAAU;OACT,cAAYpB,EAAM,UAAU,SAAS3C,EAAA6C,CAAA,CAAC,CAAA,0BAAA,CAAA,GAAA,OAAA;OACtC,aAAW7C,EAAA0D,CAAA,CAAK,CAAC,WAAW,KAAA;OAC5B,UAAUf,EAAM,UAAU,aAAU,KAAA;OACpC,yBAAuBA,EAAM,UAAU,aAAa,KAAA,IAAYgC,EAAA;OACjE,OAAM;OACL,OAAK3D,GAAA,EAAA,qBAAA,UAAmCqD,EAAA,MAAO,mBAAA,CAAA;OAC/C,WAAO,AAAA0C,EAAA,QAAA,MAAEpE,EAAM,UAAU,aAAa,KAAA,IAAY4C,EAAUyB,CAAM;OAC1D;MAETnH,GAAAA,EAAAA,EAAA,EAAA,GAAAe,EAsBME,GAAA,MAAAC,EArBoBf,EAAA0D,CAAA,CAAK,CAAC,QAAtB,GAAM,OADhB7D,EAAA,GAAAe,EAsBM,OAAA;OApBH,IAAE,GAAKoD,EAAM,GAAIwD;OACjB,KAAK/B,EAAK;OACX,MAAK;OACL,aAAU;OACT,iBAAeA,EAAK,UAAUnB,EAAA;OAC9B,cAAYmB,EAAK;OACjB,OAAOA,EAAK;OACZ,eAAa+B,MAAUxH,EAAA0D,CAAA,CAAK,CAAC,UAAU,KAAA;OACvC,OAAKzC,EAAmBjB,EAAA6G,CAAA,CAAE,CAAA,2GAAiJ3C,EAAA,MAAK,MAAwBsD,MAAUxH,EAAA0D,CAAA,CAAK,CAAC,UAAM,qDAA2E+B,EAAK,UAAUnB,EAAA,SAAO,4BAAA,CAAA;OAQ/T,aAAS,AAAAyC,EAAA,OAAA7F,QAAV,CAAA,GAAkB,CAAA,SAAA,CAAA;OACjB,UAAK,MAAEkE,EAAKK,EAAK,KAAK;MAEvBtF,GAAAA,CAAAA,EAA2DgB,IAAA;OAApD,MAAMsE,EAAK,QAAQA,EAAK;OAAQ,OAAKxE,EAAEiD,EAAA,MAAK,IAAI;;MAG3DhE,EAmBM,OAnBNqC,GAmBM,CAlBJrC,EAOI,KAPJsC,IAOI,CAFaxC,EAAA0D,CAAA,CAAK,CAAC,WAArB7D,EAAA,GAAAC,EAA+CsB,IAAA;;OAAjB,OAAM;MAAWC,CAAAA,KAAAA,EAAAA,IAAAA,EAAAA,GAAAA,EAAA,MAC/CR,EAAGgF,GAAA,KAAM,GAAA,CAAA,CAAA,CAAA,GAGH7F,EAAA0D,CAAA,CAAK,CAAC,WADd7D,EAAA,GAAAC,EASSQ,GAAA;;OAPP,MAAK;OACL,SAAQ;OACR,MAAK;OACJ,UAAUN,EAAA0D,CAAA,CAAK,CAAC;OAChB,SAAK,AAAAqD,EAAA,QAAA,MAAE/G,EAAAwD,CAAA,CAAM,CAAC,SAAQ;;OAEvB,SAAAvD,QAA4D,CAAzDoB,EAAAR,EAAAb,EAAA6C,CAAA,CAAC,CAAA,8BAAA,CAAA,GAAA,iBAAA,CAAA,GAAA,CAAA,CAAA,CAAA;;;MAIAF,EAAM,UAAU,kBADxB9C,EAAA,GAAAe,EA2BM,OA3BN6B,IA2BM,CAtBJtC,EAOEmB,GAAA;OANS,YAAAwC,EAAA;OAAA,uBAAA,AAAAiD,EAAA,QAAA,MAAA,EAAG,QAAAC;OACZ,KAAI;OACJ,MAAK;OACJ,cAAYhH,EAAA6C,CAAA,CAAC,CAAA,qCAAA,CAAA,GAAA,kBAAA;OACd,aAAY;OACZ,OAAM;MAER1C,GAAAA,MAAAA,GAAAA,CAAAA,cAAAA,YAAAA,CAAAA,GAAAA,EAaSG,GAAA;OAZP,MAAK;OACL,SAAQ;OACR,MAAK;OACJ,UAAQ,CAAGN,EAAA4H,EAAA,CAAe,CAAC9D,EAAA,KAAG;OAC9B,SAAK,AAAAiD,EAAA,aAAA;QAAgF,AAAnC3B,EAAKtB,EAAA,MAAI,KAAI,CAAA,GAAsB,EAAA,QAAG;;;OAOzF,SAAA7D,QAAkD,CAA/CoB,EAAAR,EAAAb,EAAA6C,CAAA,CAAC,CAAA,4BAAA,CAAA,GAAA,SAAA,CAAA,GAAA,CAAA,CAAA,CAAA;;;;;;;GAMJ,GAAA,GAAA,CAAA,MAAA,CAAA,GAAAyB,EAAA,UAAO,QAAA,CAAcE,EAAA,SAD7B3E,EAAA,GAAAC,EAUSQ,GAAA;;IARP,MAAK;IACL,SAAQ;IACR,MAAK;IACL,aAAU;IACT,cAAYN,EAAA6C,CAAA,CAAC,CAAA,0BAAA,CAAA,GAAA,YAAA;IACb,SAAK,AAAAkE,EAAA,QAAA,MAAE3B,EAAI,IAAA;;IAEZ,SAAAnF,QAAS,CAATE,EAASH,EAAA6H,CAAA,CAAA,CAAA,CAAA"}

package/dist/components/fields/IconPickerPlaceholder.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"IconPickerPlaceholder.js","names":["_sfc_main","IconPickerPlaceholder_vue_vue_type_script_setup_true_lang_default","IconPickerPlaceholder_default"],"sources":["../../../src/components/fields/IconPickerPlaceholder.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { fieldIds, iconPickerPreview, type IconPickerSchema } from '@alfakit/core'\nimport { ChevronsUpDownIcon } from '@lucide/vue'\nimport { computed } from 'vue'\nimport { useField } from '../form/form-context'\nimport FieldWrapper from '../schema/FieldWrapper.vue'\nimport IconPickerValue from './IconPickerValue.vue'\n\n/** What the server renders and hydration shows: the selected icon, not yet interactive. */\nconst props = defineProps<{ component: IconPickerSchema }>()\nconst { value, error, id, aria } = useField<string | null>(() => props.component)\nconst current = computed(() =>\n  typeof value.value === 'string' && value.value !== '' ? value.value : null,\n)\n</script>\n\n<template>\n  <FieldWrapper :field=\"props.component\" :html-for=\"id\" :error=\"error\">\n    <div data-slot=\"icon-picker\" class=\"flex items-center gap-2\">\n      <button\n        :id=\"id\"\n        type=\"button\"\n        disabled\n        aria-busy=\"true\"\n        data-slot=\"icon-picker-trigger\"\n        data-input=\"\"\n        v-bind=\"aria\"\n        :aria-labelledby=\"`${fieldIds(id).label} ${id}-value`\"\n        class=\"border-input dark:bg-input/30 flex h-9 w-full min-w-0 items-center justify-between gap-2 rounded-md border bg-transparent px-3 text-start text-sm shadow-xs\"\n      >\n        <IconPickerValue\n          :id=\"`${id}-value`\"\n          :component=\"props.component\"\n          :value=\"current\"\n          :preview=\"iconPickerPreview(props.component.selected, current)\"\n        />\n        <ChevronsUpDownIcon class=\"size-4 shrink-0 opacity-50\" />\n      </button>\n    </div>\n  </FieldWrapper>\n</template>\n"],"mappings":""}

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

@@ -0,0 +1,8 @@
+import { type IconPickerSchema } from '@alfakit/core';
+/** What the server renders and hydration shows: the selected icon, not yet interactive. */
+type __VLS_Props = {
+    component: IconPickerSchema;
+};
+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=IconPickerPlaceholder.vue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"IconPickerPlaceholder.vue.d.ts","sourceRoot":"","sources":["../../../src/components/fields/IconPickerPlaceholder.vue"],"names":[],"mappings":"AA2CA,OAAO,EAA+B,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAA;AAOlF,2FAA2F;AAC3F,KAAK,WAAW,GAAG;IAAE,SAAS,EAAE,gBAAgB,CAAA;CAAE,CAAC;;AAsHnD,wBAMG"}

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

@@ -0,0 +1,53 @@
+import { useField as e } from "../form/form-context.js";
+import t from "../schema/FieldWrapper.js";
+import n from "./IconPickerValue.js";
+import { fieldIds as r, iconPickerPreview as i } from "@alfakit/core";
+import { computed as a, createBlock as o, createElementVNode as s, createVNode as c, defineComponent as l, mergeProps as u, openBlock as d, unref as f, withCtx as p } from "vue";
+import { ChevronsUpDownIcon as m } from "@lucide/vue";
+//#region src/components/fields/IconPickerPlaceholder.vue?vue&type=script&setup=true&lang.ts
+var h = {
+	"data-slot": "icon-picker",
+	class: "flex items-center gap-2"
+}, g = ["id", "aria-labelledby"], _ = /*@__PURE__*/ l({
+	__name: "IconPickerPlaceholder",
+	props: { component: {} },
+	setup(l) {
+		let _ = l, { value: v, error: y, id: b, aria: x } = e(() => _.component), S = a(() => typeof v.value == "string" && v.value !== "" ? v.value : null);
+		return (e, a) => (d(), o(t, {
+			field: _.component,
+			"html-for": f(b),
+			error: f(y)
+		}, {
+			default: p(() => [s("div", h, [s("button", u({
+				id: f(b),
+				type: "button",
+				disabled: "",
+				"aria-busy": "true",
+				"data-slot": "icon-picker-trigger",
+				"data-input": ""
+			}, f(x), {
+				"aria-labelledby": `${f(r)(f(b)).label} ${f(b)}-value`,
+				class: "border-input dark:bg-input/30 flex h-9 w-full min-w-0 items-center justify-between gap-2 rounded-md border bg-transparent px-3 text-start text-sm shadow-xs"
+			}), [c(n, {
+				id: `${f(b)}-value`,
+				component: _.component,
+				value: S.value,
+				preview: f(i)(_.component.selected, S.value)
+			}, null, 8, [
+				"id",
+				"component",
+				"value",
+				"preview"
+			]), c(f(m), { class: "size-4 shrink-0 opacity-50" })], 16, g)])]),
+			_: 1
+		}, 8, [
+			"field",
+			"html-for",
+			"error"
+		]));
+	}
+});
+//#endregion
+export { _ as default };
+
+//# sourceMappingURL=IconPickerPlaceholder.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"IconPickerPlaceholder.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","FieldWrapper","_unref","_withCtx","_createElementVNode","_mergeProps","_createVNode","IconPickerValue","FieldWrapper_default","IconPickerValue_default","_hoisted_1","_hoisted_2","IconPickerPlaceholder_vue_vue_type_script_setup_true_lang_default","props","__props","useField","current","computed","value","openBlock","createBlock","unref","id","error","withCtx","createElementVNode","mergeProps","aria","fieldIds","createVNode","iconPickerPreview","ChevronsUpDownIcon"],"sources":["../../../src/components/fields/IconPickerPlaceholder.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { fieldIds, iconPickerPreview, type IconPickerSchema } from '@alfakit/core'\nimport { ChevronsUpDownIcon } from '@lucide/vue'\nimport { computed } from 'vue'\nimport { useField } from '../form/form-context'\nimport FieldWrapper from '../schema/FieldWrapper.vue'\nimport IconPickerValue from './IconPickerValue.vue'\n\n/** What the server renders and hydration shows: the selected icon, not yet interactive. */\nconst props = defineProps<{ component: IconPickerSchema }>()\nconst { value, error, id, aria } = useField<string | null>(() => props.component)\nconst current = computed(() =>\n  typeof value.value === 'string' && value.value !== '' ? value.value : null,\n)\n</script>\n\n<template>\n  <FieldWrapper :field=\"props.component\" :html-for=\"id\" :error=\"error\">\n    <div data-slot=\"icon-picker\" class=\"flex items-center gap-2\">\n      <button\n        :id=\"id\"\n        type=\"button\"\n        disabled\n        aria-busy=\"true\"\n        data-slot=\"icon-picker-trigger\"\n        data-input=\"\"\n        v-bind=\"aria\"\n        :aria-labelledby=\"`${fieldIds(id).label} ${id}-value`\"\n        class=\"border-input dark:bg-input/30 flex h-9 w-full min-w-0 items-center justify-between gap-2 rounded-md border bg-transparent px-3 text-start text-sm shadow-xs\"\n      >\n        <IconPickerValue\n          :id=\"`${id}-value`\"\n          :component=\"props.component\"\n          :value=\"current\"\n          :preview=\"iconPickerPreview(props.component.selected, current)\"\n        />\n        <ChevronsUpDownIcon class=\"size-4 shrink-0 opacity-50\" />\n      </button>\n    </div>\n  </FieldWrapper>\n</template>\n"],"mappings":";;;;;;;;;;;;;;EASA,IAAMc,IAAQC,GACR,EAAE,UAAO,UAAO,OAAI,YAASC,QAA8BF,EAAM,SAAS,GAC1EG,IAAUC,QACd,OAAOC,EAAM,SAAU,YAAYA,EAAM,UAAU,KAAKA,EAAM,QAAQ,IACxE;oBAIEnB,EAAA,GAAAC,EAsBeC,GAAA;GAtBA,OAAOY,EAAM;GAAY,YAAUX,EAAAoB,CAAA;GAAK,OAAOpB,EAAAqB,CAAA;;GAC5D,SAAApB,QAoBM,CApBNC,EAoBM,OApBNM,GAoBM,CAnBJN,EAkBS,UAlBTC,EAkBS;IAjBN,IAAIH,EAAAoB,CAAA;IACL,MAAK;IACL,UAAA;IACA,aAAU;IACV,aAAU;IACV,cAAW;GACH,GAAApB,EAAAyB,CAAA,GAAI;IACX,mBAAe,GAAKzB,EAAA0B,CAAA,CAAQ,CAAC1B,EAAAoB,CAAA,CAAE,CAAA,CAAE,MAAK,GAAIpB,EAAAoB,CAAA,EAAE;IAC7C,OAAM;GAENhB,CAAAA,GAAAA,CAAAA,EAKEC,GAAA;IAJC,IAAE,GAAKL,EAAAoB,CAAA,EAAE;IACT,WAAWT,EAAM;IACjB,OAAOG,EAAA;IACP,SAASd,EAAA4B,CAAA,CAAiB,CAACjB,EAAM,UAAU,UAAUG,EAAA,KAAO;;;;;;GAE/DV,CAAAA,GAAAA,EAAyDJ,EAAA6B,CAAA,GAAA,EAArC,OAAM,6BAA4B,CAAA,CAAA,GAAA,IAAApB,CAAA,CAAA,CAAA,CAAA,CAAA"}

package/dist/components/fields/IconPickerValue.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"IconPickerValue.js","names":["_sfc_main","IconPickerValue_vue_vue_type_script_setup_true_lang_default","IconPickerValue_default"],"sources":["../../../src/components/fields/IconPickerValue.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { isCustomSvgIcon, type IconPickerSchema } from '@alfakit/core'\nimport { computed } from 'vue'\nimport { useT } from '../../context'\nimport Icon from '../../lib/Icon.vue'\nimport { ICON_PICKER_SIZES } from './icon-picker-sizes'\n\n/** The selected icon and its name (or the placeholder), inside the picker's trigger. */\nconst props = defineProps<{\n  /** Named by the trigger's `aria-labelledby`, after the field label. */\n  id: string\n  component: IconPickerSchema\n  value: string | null\n  preview: string | null\n}>()\nconst t = useT()\nconst size = computed(() => ICON_PICKER_SIZES[props.component.previewSize] ?? ICON_PICKER_SIZES.md)\n</script>\n\n<template>\n  <span v-if=\"!props.value\" :id=\"props.id\" class=\"text-muted-foreground truncate\">{{\n    props.component.placeholder ?? t('form.icon_picker.placeholder', {}, 'Choose an icon')\n  }}</span>\n  <span v-else :id=\"props.id\" data-slot=\"icon-picker-value\" class=\"flex min-w-0 items-center gap-2\">\n    <Icon :name=\"props.preview ?? 'square-code'\" :class=\"size.icon\" />\n    <span class=\"truncate\">{{\n      isCustomSvgIcon(props.value)\n        ? t('form.icon_picker.custom_svg', {}, 'Custom SVG')\n        : props.value\n    }}</span>\n  </span>\n</template>\n"],"mappings":""}

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

@@ -0,0 +1,12 @@
+import { type IconPickerSchema } from '@alfakit/core';
+/** The selected icon and its name (or the placeholder), inside the picker's trigger. */
+type __VLS_Props = {
+    /** Named by the trigger's `aria-labelledby`, after the field label. */
+    id: string;
+    component: IconPickerSchema;
+    value: string | null;
+    preview: string | null;
+};
+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=IconPickerValue.vue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"IconPickerValue.vue.d.ts","sourceRoot":"","sources":["../../../src/components/fields/IconPickerValue.vue"],"names":[],"mappings":"AAkCA,OAAO,EAAmB,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAA;AAMtE,wFAAwF;AACxF,KAAK,WAAW,GAAG;IACjB,uEAAuE;IACvE,EAAE,EAAE,MAAM,CAAA;IACV,SAAS,EAAE,gBAAgB,CAAA;IAC3B,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB,OAAO,EAAE,MAAM,GAAG,IAAI,CAAA;CACvB,CAAC;;AA8EF,wBAMG"}

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

@@ -0,0 +1,35 @@
+import { useT as e } from "../../context.js";
+import t from "../../lib/Icon.js";
+import { ICON_PICKER_SIZES as n } from "./icon-picker-sizes.js";
+import { isCustomSvgIcon as r } from "@alfakit/core";
+import { computed as i, createElementBlock as a, createElementVNode as o, createVNode as s, defineComponent as c, normalizeClass as l, openBlock as u, toDisplayString as d, unref as f } from "vue";
+//#region src/components/fields/IconPickerValue.vue?vue&type=script&setup=true&lang.ts
+var p = ["id"], m = ["id"], h = { class: "truncate" }, g = /*@__PURE__*/ c({
+	__name: "IconPickerValue",
+	props: {
+		id: {},
+		component: {},
+		value: {},
+		preview: {}
+	},
+	setup(c) {
+		let g = c, _ = e(), v = i(() => n[g.component.previewSize] ?? n.md);
+		return (e, n) => g.value ? (u(), a("span", {
+			key: 1,
+			id: g.id,
+			"data-slot": "icon-picker-value",
+			class: "flex min-w-0 items-center gap-2"
+		}, [s(t, {
+			name: g.preview ?? "square-code",
+			class: l(v.value.icon)
+		}, null, 8, ["name", "class"]), o("span", h, d(f(r)(g.value) ? f(_)("form.icon_picker.custom_svg", {}, "Custom SVG") : g.value), 1)], 8, m)) : (u(), a("span", {
+			key: 0,
+			id: g.id,
+			class: "text-muted-foreground truncate"
+		}, d(g.component.placeholder ?? f(_)("form.icon_picker.placeholder", {}, "Choose an icon")), 9, p));
+	}
+});
+//#endregion
+export { g as default };
+
+//# sourceMappingURL=IconPickerValue.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"IconPickerValue.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_toDisplayString","_unref","_createVNode","Icon","_normalizeClass","_createElementVNode","Icon_default","_hoisted_1","_hoisted_2","_hoisted_3","IconPickerValue_vue_vue_type_script_setup_true_lang_default","props","__props","t","useT","size","computed","ICON_PICKER_SIZES","openBlock","createElementBlock","createVNode","normalizeClass","createElementVNode","toDisplayString","unref","isCustomSvgIcon"],"sources":["../../../src/components/fields/IconPickerValue.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { isCustomSvgIcon, type IconPickerSchema } from '@alfakit/core'\nimport { computed } from 'vue'\nimport { useT } from '../../context'\nimport Icon from '../../lib/Icon.vue'\nimport { ICON_PICKER_SIZES } from './icon-picker-sizes'\n\n/** The selected icon and its name (or the placeholder), inside the picker's trigger. */\nconst props = defineProps<{\n  /** Named by the trigger's `aria-labelledby`, after the field label. */\n  id: string\n  component: IconPickerSchema\n  value: string | null\n  preview: string | null\n}>()\nconst t = useT()\nconst size = computed(() => ICON_PICKER_SIZES[props.component.previewSize] ?? ICON_PICKER_SIZES.md)\n</script>\n\n<template>\n  <span v-if=\"!props.value\" :id=\"props.id\" class=\"text-muted-foreground truncate\">{{\n    props.component.placeholder ?? t('form.icon_picker.placeholder', {}, 'Choose an icon')\n  }}</span>\n  <span v-else :id=\"props.id\" data-slot=\"icon-picker-value\" class=\"flex min-w-0 items-center gap-2\">\n    <Icon :name=\"props.preview ?? 'square-code'\" :class=\"size.icon\" />\n    <span class=\"truncate\">{{\n      isCustomSvgIcon(props.value)\n        ? t('form.icon_picker.custom_svg', {}, 'Custom SVG')\n        : props.value\n    }}</span>\n  </span>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;EAQA,IAAMa,IAAQC,GAORC,IAAIC,EAAK,GACTC,IAAOC,QAAeC,EAAkBN,EAAM,UAAU,gBAAgBM,EAAkB,EAAE;mBAInFN,EAAM,SAGnBb,EAAA,GAAAC,EAOO,QAAA;;GAPO,IAAIY,EAAM;GAAI,aAAU;GAAoB,OAAM;EAC9DT,GAAAA,CAAAA,EAAkEC,GAAA;GAA3D,MAAMQ,EAAM,WAAO;GAAoB,OAAKP,EAAEW,EAAA,MAAK,IAAI;EAC9DV,GAAAA,MAAAA,GAAAA,CAAAA,QAAAA,OAAAA,CAAAA,GAAAA,EAIS,QAJTI,GAIST,EAHPC,EAAAwB,CAAA,CAAe,CAACd,EAAM,KAAK,IAAYV,EAAAY,CAAA,CAAC,CAAA,+BAAA,CAAA,GAAA,YAAA,IAA4DF,EAAM,KAAK,GAAA,CAAA,CAAA,GAAA,GAAAH,CAAA,MANnHV,EAAA,GAAAC,EAES,QAAA;;GAFkB,IAAIY,EAAM;GAAI,OAAM;EAC7C,GAAAX,EAAAW,EAAM,UAAU,eAAeV,EAAAY,CAAA,CAAC,CAAA,gCAAA,CAAA,GAAA,gBAAA,CAAA,GAAA,GAAAN,CAAA"}

package/dist/components/fields/ImageEditorDialog.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"ImageEditorDialog.js","names":["_sfc_main","ImageEditorDialog_vue_vue_type_script_setup_true_lang_default","ImageEditorDialog_default"],"sources":["../../../src/components/fields/ImageEditorDialog.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * `FileUpload::imageEditor()`: crop, zoom, rotate and flip an image before it is uploaded\n * (or to replace an uploaded one). Resolves the request with the edited file, or null\n * when cancelled.\n */\nimport type {\n  CropHandle,\n  FileUploadImageEditorSchema,\n  ImageEditorData,\n  ImageEditorDragMode,\n  ImageEditorState,\n} from '@alfakit/core'\nimport { ImageEditor, loadEditorImage } from '@alfakit/core'\nimport {\n  FlipHorizontal2Icon,\n  FlipVertical2Icon,\n  RotateCcwIcon,\n  RotateCwIcon,\n  Undo2Icon,\n  ZoomInIcon,\n  ZoomOutIcon,\n} from '@lucide/vue'\nimport { computed, onScopeDispose, ref, shallowRef, useId, watch, type Component } from 'vue'\nimport { useT } from '../../context'\nimport { cn } from '../../lib/utils'\nimport Button from '../ui/Button.vue'\nimport Dialog from '../ui/Dialog.vue'\nimport DialogContent from '../ui/DialogContent.vue'\nimport DialogDescription from '../ui/DialogDescription.vue'\nimport DialogFooter from '../ui/DialogFooter.vue'\nimport DialogHeader from '../ui/DialogHeader.vue'\nimport DialogTitle from '../ui/DialogTitle.vue'\nimport Input from '../ui/Input.vue'\nimport Spinner from '../ui/Spinner.vue'\n\nexport interface ImageEditRequest {\n  file: File\n  resolve: (file: File | null) => void\n}\n\nconst HANDLES: CropHandle[] = ['nw', 'ne', 'sw', 'se']\n\n/** The numeric inputs, in the order Filament shows them. */\nconst NUMERIC_FIELDS = [\n  ['x', 'image_editor.x', 'X'],\n  ['y', 'image_editor.y', 'Y'],\n  ['width', 'image_editor.width', 'Width'],\n  ['height', 'image_editor.height', 'Height'],\n  ['rotate', 'image_editor.rotation', 'Rotation'],\n] as const satisfies ReadonlyArray<readonly [keyof ImageEditorData, string, string]>\n\nconst SCALES = [\n  ['x', 'image_editor.scale_x', 'Scale X'],\n  ['y', 'image_editor.scale_y', 'Scale Y'],\n] as const\n\nconst props = defineProps<{\n  request: ImageEditRequest | null\n  options: FileUploadImageEditorSchema\n}>()\n\nconst t = useT()\nconst loaded = shallowRef<{ bitmap: ImageBitmap; editor: ImageEditor } | null>(null)\nconst state = shallowRef<ImageEditorState | null>(null)\nconst saving = ref(false)\nconst hintId = useId()\nconst inputsId = useId()\nconst canvas = ref<HTMLCanvasElement | null>(null)\nconst frame = ref<HTMLDivElement | null>(null)\nlet unsubscribe: (() => void) | null = null\nlet stopObserving: (() => void) | null = null\n\nconst release = () => {\n  unsubscribe?.()\n  unsubscribe = null\n  stopObserving?.()\n  stopObserving = null\n  loaded.value?.bitmap.close()\n  loaded.value = null\n  state.value = null\n}\n\nwatch(\n  () => [props.request, props.options] as const,\n  ([request, options], _previous, onCleanup) => {\n    if (!request) return\n\n    let cancelled = false\n\n    loadEditorImage(request.file)\n      .then((bitmap) => {\n        if (cancelled) return bitmap.close()\n\n        const editor = new ImageEditor({\n          width: bitmap.width,\n          height: bitmap.height,\n          aspectRatios: options.aspectRatios,\n          circle: options.circle,\n          mode: options.mode,\n          emptyFillColor: options.emptyFillColor,\n          viewportWidth: options.viewportWidth,\n          viewportHeight: options.viewportHeight,\n        })\n\n        loaded.value = { bitmap, editor }\n        state.value = editor.store.get()\n        unsubscribe = editor.store.subscribe((next) => {\n          state.value = next\n        })\n      })\n      // Undecodable: upload the file as it is.\n      .catch(() => !cancelled && request.resolve(request.file))\n\n    onCleanup(() => {\n      cancelled = true\n      release()\n    })\n  },\n  { immediate: true },\n)\n\nonScopeDispose(release)\n\n// Redraw on every change (crop, zoom, rotation, flips, container size).\nwatch(\n  () => [canvas.value, state.value] as const,\n  ([element]) => {\n    if (element && loaded.value) {\n      loaded.value.editor.drawPreview(\n        element,\n        loaded.value.bitmap,\n        globalThis.devicePixelRatio || 1,\n      )\n    }\n  },\n  { flush: 'post' },\n)\n\n// Measure the container and follow its size; zoom with the wheel and trackpad pinch.\nwatch(\n  () => [frame.value, loaded.value?.editor] as const,\n  ([element, editor]) => {\n    stopObserving?.()\n    stopObserving = null\n\n    if (!element || !editor) return\n\n    const measure = () => editor.setContainer(element.clientWidth, element.clientHeight)\n    measure()\n\n    const observer = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(measure)\n    observer?.observe(element)\n\n    const onWheel = (event: WheelEvent) => {\n      const rect = element.getBoundingClientRect()\n\n      if (editor.wheel(event, { x: event.clientX - rect.left, y: event.clientY - rect.top })) {\n        event.preventDefault()\n      }\n    }\n\n    element.addEventListener('wheel', onWheel, { passive: false })\n\n    stopObserving = () => {\n      observer?.disconnect()\n      element.removeEventListener('wheel', onWheel)\n    }\n  },\n  { flush: 'post' },\n)\n\nconst data = computed<ImageEditorData | null>(() => {\n  void state.value\n\n  return loaded.value?.editor.getData() ?? null\n})\n\n// Numeric inputs apply on change (blur, Enter, spinner); invalid values snap back.\nconst commit = (field: keyof ImageEditorData, event: Event) => {\n  const editor = loaded.value?.editor\n  const input = event.target as HTMLInputElement | null\n\n  if (!editor || !input) return\n\n  const value = input.value.trim() === '' ? Number.NaN : Number(input.value)\n  editor.setData({ [field]: value })\n  input.value = String(editor.getData()[field])\n}\n\nconst box = computed(() => {\n  void state.value\n\n  return loaded.value?.editor.cropBox() ?? { left: 0, top: 0, width: 0, height: 0 }\n})\n\nconst finish = (file: File | null) => {\n  props.request?.resolve(file)\n}\n\nconst save = async () => {\n  const request = props.request\n  const current = loaded.value\n\n  if (!request || !current) return\n\n  saving.value = true\n\n  try {\n    finish(await current.editor.export(current.bitmap, request.file))\n  } catch {\n    finish(request.file)\n  } finally {\n    saving.value = false\n  }\n}\n\nconst start = (mode: ImageEditorDragMode, event: PointerEvent) => {\n  const editor = loaded.value?.editor\n\n  if (!editor) return\n\n  event.preventDefault()\n  event.stopPropagation()\n  ;(event.currentTarget as HTMLElement | null)?.setPointerCapture?.(event.pointerId)\n  editor.startDrag(mode, event.clientX, event.clientY, undefined, event.pointerId ?? 0)\n}\n\nconst onKeydown = (event: KeyboardEvent) => {\n  if (loaded.value?.editor.handleKey(event)) event.preventDefault()\n}\n\nconst ratioLabel = (ratio: string | null) => ratio ?? t('image_editor.free', {}, 'Free')\n\nconst tools = computed<\n  Array<{ label: string; icon: Component; run: () => void; disabled?: boolean }>\n>(() => [\n  {\n    label: t('image_editor.zoom_out', {}, 'Zoom out'),\n    icon: ZoomOutIcon,\n    run: () => loaded.value?.editor.zoomOut(),\n    disabled: !(state.value && loaded.value?.editor.canZoomOut),\n  },\n  {\n    label: t('image_editor.zoom_in', {}, 'Zoom in'),\n    icon: ZoomInIcon,\n    run: () => loaded.value?.editor.zoomIn(),\n    disabled: !(state.value && loaded.value?.editor.canZoomIn),\n  },\n  {\n    label: t('image_editor.rotate_left', {}, 'Rotate left'),\n    icon: RotateCcwIcon,\n    run: () => loaded.value?.editor.rotate(-1),\n  },\n  {\n    label: t('image_editor.rotate_right', {}, 'Rotate right'),\n    icon: RotateCwIcon,\n    run: () => loaded.value?.editor.rotate(1),\n  },\n  {\n    label: t('image_editor.flip_horizontal', {}, 'Flip horizontally'),\n    icon: FlipHorizontal2Icon,\n    run: () => loaded.value?.editor.flip('x'),\n  },\n  {\n    label: t('image_editor.flip_vertical', {}, 'Flip vertically'),\n    icon: FlipVertical2Icon,\n    run: () => loaded.value?.editor.flip('y'),\n  },\n  {\n    label: t('image_editor.reset', {}, 'Reset'),\n    icon: Undo2Icon,\n    run: () => loaded.value?.editor.reset(),\n  },\n])\n</script>\n\n<template>\n  <Dialog :open=\"props.request !== null\" @update:open=\"(open) => !open && finish(null)\">\n    <DialogContent class=\"sm:max-w-3xl\" data-slot=\"image-editor\">\n      <DialogHeader>\n        <DialogTitle>{{ t('image_editor.title', {}, 'Edit image') }}</DialogTitle>\n        <DialogDescription class=\"sr-only\">\n          <span :id=\"hintId\"\n            >{{\n              t(\n                'image_editor.keyboard_hint',\n                {},\n                'Arrow keys move the crop area. Shift and arrow keys resize it.',\n              )\n            }}\n            {{ t('image_editor.zoom_hint', {}, 'Plus and minus keys zoom the image.') }}</span\n          >\n        </DialogDescription>\n      </DialogHeader>\n      <div v-if=\"loaded && state && data\" class=\"flex flex-col gap-4 md:flex-row\">\n        <div class=\"flex min-w-0 flex-1 flex-col gap-3\">\n          <!-- Image space: left is the image's left in every reading direction. -->\n          <div\n            ref=\"frame\"\n            dir=\"ltr\"\n            data-slot=\"image-editor-viewport\"\n            class=\"bg-muted/40 relative h-72 w-full cursor-grab touch-none overflow-hidden rounded-md select-none sm:h-96\"\n            @pointerdown=\"start('pan', $event)\"\n            @pointermove=\"\n              loaded.editor.dragTo($event.clientX, $event.clientY, $event.pointerId ?? 0)\n            \"\n            @pointerup=\"loaded.editor.endDrag($event.pointerId ?? 0)\"\n            @pointercancel=\"loaded.editor.endDrag($event.pointerId ?? 0)\"\n          >\n            <canvas ref=\"canvas\" class=\"pointer-events-none absolute inset-0 block size-full\" />\n            <!-- Runtime geometry: no Tailwind class can hold these values. -->\n            <div\n              role=\"group\"\n              tabindex=\"0\"\n              :aria-label=\"t('image_editor.crop_area', {}, 'Crop area')\"\n              :aria-describedby=\"hintId\"\n              data-slot=\"image-editor-crop\"\n              :class=\"\n                cn(\n                  'ring-ring/50 absolute cursor-move border-2 border-white shadow-[0_0_0_9999px_rgb(0_0_0/0.5)] outline-none focus-visible:ring-[3px]',\n                  loaded.editor.circle && 'rounded-full',\n                )\n              \"\n              :style=\"{\n                left: `${box.left}%`,\n                top: `${box.top}%`,\n                width: `${box.width}%`,\n                height: `${box.height}%`,\n              }\"\n              @pointerdown=\"start('move', $event)\"\n              @keydown=\"onKeydown\"\n            >\n              <span\n                v-for=\"handle in HANDLES\"\n                :key=\"handle\"\n                :data-handle=\"handle\"\n                aria-hidden=\"true\"\n                class=\"absolute size-3 -translate-x-1/2 -translate-y-1/2 rounded-sm border border-black/40 bg-white\"\n                :style=\"{\n                  left: handle.endsWith('w') ? '0%' : '100%',\n                  top: handle.startsWith('n') ? '0%' : '100%',\n                  cursor: handle === 'nw' || handle === 'se' ? 'nwse-resize' : 'nesw-resize',\n                }\"\n                @pointerdown=\"start(handle, $event)\"\n              />\n            </div>\n          </div>\n          <div class=\"flex flex-wrap items-center justify-between gap-2\">\n            <div\n              v-if=\"loaded.editor.aspectRatios.length > 1\"\n              role=\"group\"\n              :aria-label=\"t('image_editor.aspect_ratio', {}, 'Aspect ratio')\"\n              class=\"flex flex-wrap gap-1\"\n            >\n              <Button\n                v-for=\"ratio in loaded.editor.aspectRatios\"\n                :key=\"ratio ?? 'free'\"\n                type=\"button\"\n                size=\"sm\"\n                :variant=\"state.aspectRatio === ratio ? 'default' : 'outline'\"\n                :aria-pressed=\"String(state.aspectRatio === ratio)\"\n                @click=\"loaded.editor.setAspectRatio(ratio)\"\n              >\n                {{ ratioLabel(ratio) }}\n              </Button>\n            </div>\n            <span v-else />\n            <div class=\"flex flex-wrap gap-1\">\n              <Button\n                v-for=\"tool in tools\"\n                :key=\"tool.label\"\n                type=\"button\"\n                variant=\"outline\"\n                size=\"icon-sm\"\n                :aria-label=\"tool.label\"\n                :title=\"tool.label\"\n                :disabled=\"tool.disabled\"\n                @click=\"tool.run()\"\n              >\n                <component :is=\"tool.icon\" />\n              </Button>\n            </div>\n          </div>\n        </div>\n        <!-- Numeric inputs: beside the image from md up, under it on phones. -->\n        <div\n          role=\"group\"\n          :aria-label=\"t('image_editor.inputs', {}, 'Position and size')\"\n          data-slot=\"image-editor-inputs\"\n          class=\"grid grid-cols-2 content-start gap-x-3 gap-y-2 sm:grid-cols-4 md:w-40 md:shrink-0 md:grid-cols-1\"\n        >\n          <div\n            v-for=\"[field, key, fallback] in NUMERIC_FIELDS\"\n            :key=\"field\"\n            class=\"flex flex-col gap-1\"\n          >\n            <label :for=\"`${inputsId}-${field}`\" class=\"text-muted-foreground text-xs\">\n              {{ t(key, {}, fallback) }}\n            </label>\n            <Input\n              :id=\"`${inputsId}-${field}`\"\n              type=\"number\"\n              inputmode=\"decimal\"\n              step=\"1\"\n              :data-field=\"field\"\n              class=\"h-8 tabular-nums\"\n              :model-value=\"data[field]\"\n              @change=\"commit(field, $event)\"\n              @keydown.enter.prevent=\"commit(field, $event)\"\n            />\n          </div>\n          <div class=\"col-span-2 flex gap-1 sm:col-span-4 md:col-span-1\">\n            <Button\n              v-for=\"[axis, key, fallback] in SCALES\"\n              :key=\"axis\"\n              type=\"button\"\n              size=\"sm\"\n              :variant=\"(axis === 'x' ? state.flipX : state.flipY) ? 'default' : 'outline'\"\n              :aria-pressed=\"String(axis === 'x' ? state.flipX : state.flipY)\"\n              :data-field=\"`scale${axis.toUpperCase()}`\"\n              class=\"flex-1\"\n              @click=\"loaded.editor.flip(axis)\"\n            >\n              {{ t(key, {}, fallback) }}\n            </Button>\n          </div>\n        </div>\n      </div>\n      <div v-else class=\"flex h-48 items-center justify-center\">\n        <Spinner />\n      </div>\n      <DialogFooter>\n        <Button type=\"button\" variant=\"outline\" @click=\"finish(null)\">\n          {{ t('image_editor.cancel', {}, 'Cancel') }}\n        </Button>\n        <Button type=\"button\" :disabled=\"!loaded || saving\" @click=\"void save()\">\n          <Spinner v-if=\"saving\" />\n          {{ t('image_editor.save', {}, 'Apply') }}\n        </Button>\n      </DialogFooter>\n    </DialogContent>\n  </Dialog>\n</template>\n"],"mappings":""}

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

@@ -0,0 +1,17 @@
+/**
+ * `FileUpload::imageEditor()`: crop, zoom, rotate and flip an image before it is uploaded
+ * (or to replace an uploaded one). Resolves the request with the edited file, or null
+ * when cancelled.
+ */
+import type { FileUploadImageEditorSchema } from '@alfakit/core';
+export interface ImageEditRequest {
+    file: File;
+    resolve: (file: File | null) => void;
+}
+type __VLS_Props = {
+    request: ImageEditRequest | null;
+    options: FileUploadImageEditorSchema;
+};
+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=ImageEditorDialog.vue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ImageEditorDialog.vue.d.ts","sourceRoot":"","sources":["../../../src/components/fields/ImageEditorDialog.vue"],"names":[],"mappings":"AA8bA;;;;GAIG;AACH,OAAO,KAAK,EAEV,2BAA2B,EAI5B,MAAM,eAAe,CAAA;AAwBtB,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,IAAI,CAAA;IACV,OAAO,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAA;CACrC;AAkBD,KAAK,WAAW,GAAG;IACjB,OAAO,EAAE,gBAAgB,GAAG,IAAI,CAAA;IAChC,OAAO,EAAE,2BAA2B,CAAA;CACrC,CAAC;;AA2uBF,wBAMG"}