@aleph-alpha/settings-kit 0.1.0 → 1.0.0

package/dist/index-BynIH0EE.js

@@ -0,0 +1,92 @@
+import { defineComponent, computed, openBlock, createElementBlock, Fragment, renderSlot, createElementVNode, normalizeStyle, unref, normalizeClass, withDirectives, mergeProps, isRef, vModelText, createVNode, mergeDefaults } from "vue";
+import { UiInput } from "@aleph-alpha/ui-library";
+import { N as useControlModel, I as useSettingsLocale, O as useName, P as useA11yAttrs, Q as skBaseControlDefaults } from "./SkLayoutPage-DGbCpQFm.js";
+const _hoisted_1 = { class: "flex items-center gap-2" };
+const _hoisted_2 = ["id", "name", "disabled", "required"];
+const _hoisted_3 = { class: "flex flex-col grow gap-2" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "SkColorControl",
+    inheritAttrs: false
+  },
+  __name: "SkColorControl",
+  props: /* @__PURE__ */ mergeDefaults({
+    modelValue: {},
+    id: {},
+    name: {},
+    placeholder: {},
+    disabled: { type: Boolean },
+    inheriting: { type: Boolean },
+    required: { type: Boolean },
+    label: {},
+    tooltip: {},
+    errors: {}
+  }, {
+    ...skBaseControlDefaults
+  }),
+  emits: ["update:modelValue", "change"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const model = useControlModel(props, emit, "#000000");
+    const { message } = useSettingsLocale();
+    const controlName = useName(props?.name ?? props?.id);
+    const a11yAttrs = useA11yAttrs([
+      "aria-label",
+      "aria-labelledby",
+      "aria-describedby",
+      "aria-invalid",
+      "aria-required",
+      "aria-errormessage"
+    ]);
+    const hexA11yAttrs = computed(() => ({
+      ...a11yAttrs.value,
+      "aria-label": a11yAttrs.value["aria-label"] ? message("color.hexValue", { label: a11yAttrs.value["aria-label"] }) : message("color.hexValueDefault"),
+      "aria-labelledby": void 0
+    }));
+    function onChange(event) {
+      emit("change", event.target.value);
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(Fragment, null, [
+        renderSlot(_ctx.$slots, "label"),
+        createElementVNode("div", _hoisted_1, [
+          createElementVNode("label", {
+            class: normalizeClass(["ui-focus-ring-within size-9 shrink-0 cursor-pointer rounded-full border border-input self-start", { "pointer-events-none opacity-50": __props.disabled }]),
+            style: normalizeStyle({ backgroundColor: unref(model) })
+          }, [
+            withDirectives(createElementVNode("input", mergeProps({
+              id: __props.id,
+              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(model) ? model.value = $event : null)
+            }, unref(a11yAttrs), {
+              type: "color",
+              name: `${unref(controlName)}-color`,
+              disabled: __props.disabled,
+              required: __props.required,
+              class: "sr-only",
+              onChange
+            }), null, 16, _hoisted_2), [
+              [vModelText, unref(model)]
+            ])
+          ], 6),
+          createElementVNode("div", _hoisted_3, [
+            createVNode(unref(UiInput), mergeProps({
+              modelValue: unref(model),
+              "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => isRef(model) ? model.value = $event : null)
+            }, hexA11yAttrs.value, {
+              class: "grow",
+              name: `${unref(controlName)}-input`,
+              placeholder: __props.placeholder,
+              disabled: __props.disabled,
+              onChange
+            }), null, 16, ["modelValue", "name", "placeholder", "disabled"]),
+            renderSlot(_ctx.$slots, "error")
+          ])
+        ])
+      ], 64);
+    };
+  }
+});
+export {
+  _sfc_main as SkColorControl
+};

package/dist/index-C-WLhRod.js

@@ -0,0 +1,100 @@
+import { defineComponent, computed, openBlock, createElementBlock, Fragment, renderSlot, createVNode, unref, withCtx, mergeProps, renderList, createBlock, createTextVNode, toDisplayString, mergeDefaults } from "vue";
+import { UiSelect, UiSelectTrigger, UiSelectValue, UiSelectContent, UiSelectItem } from "@aleph-alpha/ui-library";
+import { I as useSettingsLocale, N as useControlModel, O as useName, P as useA11yAttrs, Q as skBaseControlDefaults } from "./SkLayoutPage-DGbCpQFm.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "SkSelectControl",
+    inheritAttrs: false
+  },
+  __name: "SkSelectControl",
+  props: /* @__PURE__ */ mergeDefaults({
+    options: {},
+    modelValue: {},
+    id: {},
+    name: {},
+    placeholder: {},
+    disabled: { type: Boolean },
+    inheriting: { type: Boolean },
+    required: { type: Boolean },
+    label: {},
+    tooltip: {},
+    errors: {}
+  }, {
+    ...skBaseControlDefaults,
+    options: () => []
+  }),
+  emits: ["update:modelValue", "change"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const { resolveText } = useSettingsLocale();
+    const resolvedOptions = computed(
+      () => props.options.map((option) => ({
+        value: option.value,
+        label: resolveText(option.label),
+        disabled: option.disabled
+      }))
+    );
+    const model = useControlModel(props, emit);
+    function pick(next) {
+      const value = Array.isArray(next) ? next[0] : next;
+      model.value = value;
+      emit("change", value);
+    }
+    const controlName = useName(props?.name ?? props?.id);
+    const a11yAttrs = useA11yAttrs([
+      "aria-label",
+      "aria-labelledby",
+      "aria-describedby",
+      "aria-invalid",
+      "aria-required",
+      "aria-errormessage"
+    ]);
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(Fragment, null, [
+        renderSlot(_ctx.$slots, "label"),
+        createVNode(unref(UiSelect), {
+          "model-value": unref(model),
+          name: unref(controlName),
+          disabled: __props.disabled,
+          required: __props.required,
+          "onUpdate:modelValue": pick
+        }, {
+          default: withCtx(() => [
+            createVNode(unref(UiSelectTrigger), mergeProps({ id: __props.id }, unref(a11yAttrs), {
+              class: "w-full",
+              disabled: __props.disabled
+            }), {
+              default: withCtx(() => [
+                createVNode(unref(UiSelectValue), { placeholder: __props.placeholder }, null, 8, ["placeholder"])
+              ]),
+              _: 1
+            }, 16, ["id", "disabled"]),
+            createVNode(unref(UiSelectContent), null, {
+              default: withCtx(() => [
+                (openBlock(true), createElementBlock(Fragment, null, renderList(resolvedOptions.value, (option) => {
+                  return openBlock(), createBlock(unref(UiSelectItem), {
+                    key: option.value,
+                    value: option.value,
+                    disabled: option.disabled
+                  }, {
+                    default: withCtx(() => [
+                      createTextVNode(toDisplayString(option.label), 1)
+                    ]),
+                    _: 2
+                  }, 1032, ["value", "disabled"]);
+                }), 128))
+              ]),
+              _: 1
+            })
+          ]),
+          _: 1
+        }, 8, ["model-value", "name", "disabled", "required"]),
+        renderSlot(_ctx.$slots, "error")
+      ], 64);
+    };
+  }
+});
+export {
+  _sfc_main as SkSelectControl
+};

package/dist/index-CFMv8jSO.js

@@ -0,0 +1,4 @@
+import { M as _sfc_main } from "./SkLayoutPage-DGbCpQFm.js";
+export {
+  _sfc_main as SkCheckboxControl
+};

package/dist/index-CGYERet5.js

@@ -0,0 +1,373 @@
+import { defineAsyncComponent, defineComponent, ref, computed, watch, openBlock, createBlock, unref, withCtx, createVNode, createElementVNode, toDisplayString, normalizeStyle, createCommentVNode, nextTick, createElementBlock, Fragment, renderSlot, mergeProps, mergeDefaults } from "vue";
+import { UiDropdownMenu, UiDropdownMenuTrigger, UiInputGroupButton, UiIcon, UiDropdownMenuContent, UiListbox, UiListboxFilter, UiDropdownMenuSeparator, UiListboxContent, UiListboxVirtualizer, UiDropdownMenuItem, UiInputGroup, UiInputGroupAddon, UiInputGroupInput } from "@aleph-alpha/ui-library";
+import { U as skCountries, I as useSettingsLocale, N as useControlModel, O as useName, P as useA11yAttrs, Q as skBaseControlDefaults } from "./SkLayoutPage-DGbCpQFm.js";
+import { ChevronDownIcon, SearchIcon, CheckIcon } from "@aleph-alpha/ui-library/icons";
+function getCountryFlag(code) {
+  const country = skCountries[code];
+  if (!country) {
+    throw new Error(`No flag icon for country code "${code}"`);
+  }
+  return defineAsyncComponent(async () => {
+    const icons = await import("@aleph-alpha/ui-library/icons");
+    const icon = icons[country.flag];
+    if (!icon) {
+      throw new Error(`No flag icon for country code "${code}"`);
+    }
+    return icon;
+  });
+}
+const englishNames = new Intl.DisplayNames(["en"], { type: "region" });
+function createCountryNames(locales) {
+  let names = englishNames;
+  try {
+    names = new Intl.DisplayNames(
+      [...new Set([...locales, "en"].filter((l) => !!l))],
+      { type: "region" }
+    );
+  } catch {
+  }
+  return (code) => names.of(code) ?? code;
+}
+const dialPrefixes = Object.entries(skCountries).map(
+  ([code, country]) => ({
+    code,
+    dialCode: country.number,
+    icon: getCountryFlag(code)
+  })
+);
+const prefixByCode = new Map(
+  dialPrefixes.map((prefix) => [prefix.code, prefix])
+);
+function findPrefixByCode(code) {
+  return prefixByCode.get(code);
+}
+const germany = findPrefixByCode("DE");
+if (!germany) {
+  throw new Error("skCountries must contain the DE default prefix");
+}
+const defaultPrefix = germany;
+const prefixesByDialCodeLength = [...dialPrefixes].sort(
+  (a, b) => b.dialCode.length - a.dialCode.length
+);
+function normalizeTel(value) {
+  return value.replace(/[\s().-]/g, "");
+}
+function parseTel(value) {
+  const normalized = normalizeTel(value);
+  if (!normalized.startsWith("+")) {
+    return { national: value };
+  }
+  const prefix = prefixesByDialCodeLength.find(
+    (candidate) => normalized.startsWith(candidate.dialCode)
+  );
+  if (!prefix) {
+    return { national: value };
+  }
+  return { prefix, national: normalized.slice(prefix.dialCode.length) };
+}
+function composeTel(dialCode, national) {
+  const digits = normalizeTel(national).replace(/\D/g, "").replace(/^0+/, "");
+  return digits ? `${dialCode}${digits}` : "";
+}
+const _hoisted_1 = { class: "tabular-nums body-m-regular !font-medium text-content-on-surface-primary" };
+const _hoisted_2 = { class: "flex items-center gap-2 px-3" };
+const _hoisted_3 = { class: "flex-1 body-s-regular text-content-on-surface-primary" };
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "SkTelPrefixControl"
+  },
+  __name: "SKTelPrefixControl",
+  props: {
+    modelValue: { default: void 0 },
+    disabled: { type: Boolean, default: false }
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const open = ref(false);
+    const internalCode = ref(defaultPrefix.code);
+    const prefixCode = computed({
+      get: () => props.modelValue ?? internalCode.value,
+      set: (value) => {
+        internalCode.value = value;
+        emit("update:modelValue", value);
+      }
+    });
+    const { message, locale, fallbackLocale } = useSettingsLocale();
+    const countryName = computed(
+      () => createCountryNames([locale.value, fallbackLocale.value])
+    );
+    const selectedPrefix = computed(
+      () => findPrefixByCode(prefixCode.value) ?? defaultPrefix
+    );
+    const prefixCodes = dialPrefixes.map((prefix) => prefix.code);
+    const query = ref("");
+    const filteredCodes = computed(() => {
+      const q = query.value.trim().toLowerCase();
+      if (!q) return prefixCodes;
+      return dialPrefixes.filter(
+        (prefix) => countryName.value(prefix.code).toLowerCase().includes(q) || prefix.dialCode.includes(q)
+      ).map((prefix) => prefix.code);
+    });
+    function prefixFor(code) {
+      return findPrefixByCode(code) ?? defaultPrefix;
+    }
+    function selectPrefix(code) {
+      prefixCode.value = code;
+    }
+    const trigger = ref(null);
+    const filter = ref(null);
+    const menuStyle = ref();
+    const alignOffset = ref(0);
+    watch(open, (isOpen) => {
+      if (!isOpen) return;
+      query.value = "";
+      const triggerEl = trigger.value?.$el;
+      const groupEl = triggerEl?.closest('[data-slot="input-group"]');
+      if (!triggerEl || !groupEl) return;
+      const groupRect = groupEl.getBoundingClientRect();
+      if (groupRect.width > 0) {
+        menuStyle.value = { width: `${groupRect.width}px` };
+        alignOffset.value = groupRect.left - triggerEl.getBoundingClientRect().left;
+      }
+    });
+    function focusFilter(event) {
+      event.preventDefault();
+      void nextTick(() => {
+        filter.value?.$el?.focus();
+      });
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(UiDropdownMenu), {
+        open: open.value,
+        "onUpdate:open": _cache[2] || (_cache[2] = ($event) => open.value = $event)
+      }, {
+        default: withCtx(() => [
+          createVNode(unref(UiDropdownMenuTrigger), { "as-child": "" }, {
+            default: withCtx(() => [
+              createVNode(unref(UiInputGroupButton), {
+                ref_key: "trigger",
+                ref: trigger,
+                disabled: __props.disabled,
+                "aria-label": unref(message)("tel.countryCode", {
+                  country: countryName.value(selectedPrefix.value.code),
+                  dialCode: selectedPrefix.value.dialCode
+                })
+              }, {
+                default: withCtx(() => [
+                  createVNode(unref(UiIcon), {
+                    name: selectedPrefix.value.icon,
+                    size: 16,
+                    class: "shrink-0"
+                  }, null, 8, ["name"]),
+                  createElementVNode("span", _hoisted_1, toDisplayString(selectedPrefix.value.dialCode), 1),
+                  createVNode(unref(UiIcon), {
+                    name: unref(ChevronDownIcon),
+                    class: "shrink-0 text-content-on-surface-primary"
+                  }, null, 8, ["name"])
+                ]),
+                _: 1
+              }, 8, ["disabled", "aria-label"])
+            ]),
+            _: 1
+          }),
+          createVNode(unref(UiDropdownMenuContent), {
+            align: "start",
+            "align-offset": alignOffset.value,
+            style: normalizeStyle(menuStyle.value),
+            class: "!p-0 !shadow-md",
+            onOpenAutoFocus: focusFilter
+          }, {
+            default: withCtx(() => [
+              createVNode(unref(UiListbox), {
+                modelValue: prefixCode.value,
+                "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => prefixCode.value = $event),
+                "highlight-on-hover": ""
+              }, {
+                default: withCtx(() => [
+                  createElementVNode("div", _hoisted_2, [
+                    createVNode(unref(UiIcon), {
+                      name: unref(SearchIcon),
+                      size: 16,
+                      class: "text-content-on-surface-muted shrink-0"
+                    }, null, 8, ["name"]),
+                    createVNode(unref(UiListboxFilter), {
+                      ref_key: "filter",
+                      ref: filter,
+                      modelValue: query.value,
+                      "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => query.value = $event),
+                      placeholder: unref(message)("tel.search"),
+                      "aria-label": unref(message)("tel.searchCountry"),
+                      class: "px-0"
+                    }, null, 8, ["modelValue", "placeholder", "aria-label"])
+                  ]),
+                  createVNode(unref(UiDropdownMenuSeparator)),
+                  createVNode(unref(UiListboxContent), {
+                    "aria-label": unref(message)("tel.countryCodes")
+                  }, {
+                    default: withCtx(() => [
+                      createVNode(unref(UiListboxVirtualizer), {
+                        options: filteredCodes.value,
+                        "estimate-size": 36,
+                        "text-content": (code) => countryName.value(code)
+                      }, {
+                        default: withCtx(({ option }) => [
+                          createVNode(unref(UiDropdownMenuItem), {
+                            class: "px-3 py-2",
+                            "text-value": countryName.value(option),
+                            onSelect: ($event) => selectPrefix(option)
+                          }, {
+                            default: withCtx(() => [
+                              createVNode(unref(UiIcon), {
+                                size: "s",
+                                name: prefixFor(option).icon
+                              }, null, 8, ["name"]),
+                              createElementVNode("span", _hoisted_3, toDisplayString(countryName.value(option)) + " (" + toDisplayString(prefixFor(option).dialCode) + ")", 1),
+                              option === prefixCode.value ? (openBlock(), createBlock(unref(UiIcon), {
+                                key: 0,
+                                name: unref(CheckIcon),
+                                size: "s",
+                                class: "shrink-0"
+                              }, null, 8, ["name"])) : createCommentVNode("", true)
+                            ]),
+                            _: 2
+                          }, 1032, ["text-value", "onSelect"])
+                        ]),
+                        _: 1
+                      }, 8, ["options", "text-content"])
+                    ]),
+                    _: 1
+                  }, 8, ["aria-label"])
+                ]),
+                _: 1
+              }, 8, ["modelValue"])
+            ]),
+            _: 1
+          }, 8, ["align-offset", "style"])
+        ]),
+        _: 1
+      }, 8, ["open"]);
+    };
+  }
+});
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "SkTelControl",
+    inheritAttrs: false
+  },
+  __name: "SkTelControl",
+  props: /* @__PURE__ */ mergeDefaults({
+    modelValue: {},
+    id: {},
+    name: {},
+    placeholder: {},
+    disabled: { type: Boolean },
+    inheriting: { type: Boolean },
+    required: { type: Boolean },
+    label: {},
+    tooltip: {},
+    errors: {}
+  }, {
+    ...skBaseControlDefaults
+  }),
+  emits: ["update:modelValue", "change"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const model = useControlModel(props, emit, "");
+    const controlName = useName(props?.name ?? props?.id);
+    const a11yAttrs = useA11yAttrs([
+      "aria-label",
+      "aria-labelledby",
+      "aria-describedby",
+      "aria-invalid",
+      "aria-required",
+      "aria-errormessage"
+    ]);
+    const prefixCode = ref(defaultPrefix.code);
+    const nationalNumber = ref("");
+    const selectedDialCode = computed(
+      () => (findPrefixByCode(prefixCode.value) ?? defaultPrefix).dialCode
+    );
+    const composedTel = computed(
+      () => composeTel(selectedDialCode.value, nationalNumber.value)
+    );
+    watch(
+      () => model.value ?? "",
+      (value) => {
+        if (value === composedTel.value) return;
+        const { prefix, national } = parseTel(value);
+        if (prefix) {
+          prefixCode.value = prefix.code;
+        }
+        nationalNumber.value = national;
+      },
+      { immediate: true }
+    );
+    function handleNationalInput(value) {
+      const { prefix, national } = parseTel(value);
+      if (prefix) {
+        prefixCode.value = prefix.code;
+      }
+      nationalNumber.value = national;
+      model.value = composedTel.value;
+    }
+    function handlePrefixChange() {
+      model.value = composedTel.value;
+      emit("change", composedTel.value);
+    }
+    const nationalInput = computed({
+      get: () => nationalNumber.value,
+      set: (value) => handleNationalInput(String(value ?? ""))
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(Fragment, null, [
+        renderSlot(_ctx.$slots, "label"),
+        createVNode(unref(UiInputGroup), null, {
+          default: withCtx(() => [
+            createVNode(unref(UiInputGroupAddon), { align: "inline-start" }, {
+              default: withCtx(() => [
+                createVNode(_sfc_main$1, {
+                  modelValue: prefixCode.value,
+                  "onUpdate:modelValue": [
+                    _cache[0] || (_cache[0] = ($event) => prefixCode.value = $event),
+                    handlePrefixChange
+                  ],
+                  disabled: __props.disabled
+                }, null, 8, ["modelValue", "disabled"])
+              ]),
+              _: 1
+            }),
+            createVNode(unref(UiInputGroupInput), mergeProps({
+              id: __props.id,
+              modelValue: nationalInput.value,
+              "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => nationalInput.value = $event)
+            }, unref(a11yAttrs), {
+              type: "tel",
+              name: unref(controlName),
+              placeholder: __props.placeholder,
+              disabled: __props.disabled,
+              required: __props.required,
+              onChange: _cache[2] || (_cache[2] = ($event) => emit("change", composedTel.value))
+            }), null, 16, ["id", "modelValue", "name", "placeholder", "disabled", "required"])
+          ]),
+          _: 1
+        }),
+        renderSlot(_ctx.$slots, "error")
+      ], 64);
+    };
+  }
+});
+export {
+  _sfc_main as SkTelControl,
+  _sfc_main$1 as SkTelPrefixControl,
+  composeTel,
+  createCountryNames,
+  defaultPrefix,
+  dialPrefixes,
+  findPrefixByCode,
+  getCountryFlag,
+  normalizeTel,
+  parseTel
+};

package/dist/index-KAbhkO1J.js

@@ -0,0 +1,81 @@
+import { defineComponent, computed, openBlock, createElementBlock, Fragment, renderSlot, createElementVNode, mergeProps, unref, renderList, createBlock, withCtx, createTextVNode, toDisplayString, mergeDefaults } from "vue";
+import { UiButton } from "@aleph-alpha/ui-library";
+import { P as useA11yAttrs, I as useSettingsLocale, Q as skBaseControlDefaults } from "./SkLayoutPage-DGbCpQFm.js";
+const _hoisted_1 = ["id", "aria-label"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "SkActionsControl",
+    inheritAttrs: false
+  },
+  __name: "SkActionsControl",
+  props: /* @__PURE__ */ mergeDefaults({
+    options: {},
+    modelValue: {},
+    id: {},
+    name: {},
+    placeholder: {},
+    disabled: { type: Boolean },
+    inheriting: { type: Boolean },
+    required: { type: Boolean },
+    label: {},
+    tooltip: {},
+    errors: {}
+  }, {
+    ...skBaseControlDefaults,
+    options: () => []
+  }),
+  emits: ["action"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const a11yAttrs = useA11yAttrs([
+      "aria-label",
+      "aria-labelledby",
+      "aria-describedby",
+      "aria-errormessage"
+    ]);
+    const { resolveText } = useSettingsLocale();
+    const buttons = computed(
+      () => props.options.map((option, index) => ({
+        method: option.value,
+        label: resolveText(option.label),
+        disabled: props.disabled || option.disabled === true,
+        // The last option is the primary action; the ones before it are quiet.
+        variant: index === props.options.length - 1 ? "default" : "ghost",
+        type: index === props.options.length - 1 ? "submit" : "button"
+      }))
+    );
+    function press(method) {
+      emit("action", method);
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(Fragment, null, [
+        renderSlot(_ctx.$slots, "label"),
+        createElementVNode("div", mergeProps({
+          id: __props.id,
+          role: "group",
+          "aria-label": unref(a11yAttrs)["aria-labelledby"] ? void 0 : __props.label || void 0
+        }, unref(a11yAttrs), { class: "flex flex-wrap justify-end gap-2" }), [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(buttons.value, (button, index) => {
+            return openBlock(), createBlock(unref(UiButton), {
+              key: `${index}-${button.method}`,
+              type: button.type,
+              variant: button.variant,
+              disabled: button.disabled,
+              onClick: ($event) => press(button.method)
+            }, {
+              default: withCtx(() => [
+                createTextVNode(toDisplayString(button.label), 1)
+              ]),
+              _: 2
+            }, 1032, ["type", "variant", "disabled", "onClick"]);
+          }), 128))
+        ], 16, _hoisted_1),
+        renderSlot(_ctx.$slots, "error")
+      ], 64);
+    };
+  }
+});
+export {
+  _sfc_main as SkActionsControl
+};

package/dist/index.d.ts

@@ -1,5 +1,11 @@
 export type { SettingUnit, ToggleSettingUnit } from './types';
 export { defineSettingUnit, createToggleUnit } from './generators';
-export { SettingToggleUnit } from './components';
-export type { SettingToggleUnitProps } from './components';
+export { defaultBlocks, provideSkLayoutContext, SkField, SkGroup, SkItem, SkLayout, SkLayoutPage, skLayoutContextKey, SkPage, SkSection, } from './components';
+export type { ProvideSkLayoutContextOptions, SkLayoutActionEvent, SkLayoutBlocks, SkLayoutContext, } from './components';
+export { createStateManager, settingsFormSessionKey, useFieldInheritance, useFieldValidator, UseFileConvertor, useFileConvertor, provideSettingsLocale, useSettingField, useSettingsForm, useSettingsFormSession, useSettingsLayout, useSettingsLocale, useStateManager, } from './composables';
+export type { FieldInheritanceModel, SettingsLayoutModel, SettingsLocale, SettingsLocaleOptions, UseFieldValidatorOptions, UseFieldValidatorReturn, UseSettingFieldOptions, UseSettingsLayoutOptions, } from './composables';
+export { byOrder, checkFieldConstraints, evaluateCondition, evaluateFieldRules, evaluateRuleStates, keysOf, layoutIdSegment, layoutPageId, resolveConstraintMessage, resolveLayout, resolveLocalizedText, toNavigation, validateFieldRules, validateLayout, } from './core';
+export { createFieldInput, provideControls, resolveControlDefinition, resolveFieldControl, skControlRegistryKey, useControlRegistry, } from './core/controls';
+export type { ControlDefinition, ControlKind, ControlPropsContext, ControlRegistry, } from './core/controls';
+export type { SettingFieldHandle, SettingFieldStoreState, SettingsArea, SettingsAreaOptions, SettingsAreaStatus, StateManager, StateManagerOptions, SkFieldProps, SkFieldEmits, SkBaseControlProps, SkBaseControlEmits, SkActionControlEmits, AnySettingField, SettingField, SettingFieldType, SettingFieldValue, SettingValueByType, BuiltinSettingFieldControl, SettingFieldControl, SettingFieldConstraints, SettingFieldIssue, SettingFieldIssueSource, ReportedFieldIssue, SettingFieldOption, SettingFieldPresentation, SettingFieldModel, SettingFieldRule, SettingFieldRuleEffect, SettingFieldCondition, SettingFieldConditionLeaf, SettingFieldRuleState, SettingFieldSessionState, SettingFieldState, SettingsFormSession, SettingsFormSessionOptions, SettingsSaveResult, StandardSchemaIssue, StandardSchemaResult, StandardSchemaV1, LocalizedText, KitMessageKey, KitMessageOverrides, LayoutCategory, LayoutGridSettings, LayoutGroup, LayoutIssue, LayoutIssueCode, LayoutItem, LayoutNavigationNode, LayoutNavigationOptions, LayoutNodeKind, LayoutPage, LayoutPagePresentation, LayoutPresentation, LayoutSection, LayoutSidebarMode, ResolveLayoutOptions, ResolveLayoutSource, ResolvedCategory, ResolvedGroup, ResolvedItem, ResolvedLayout, ResolvedLayoutNode, ResolvedPage, ResolvedSection, SettingsLayout, } from './core';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,YAAY,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAG9D,OAAO,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAGnE,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AACjD,YAAY,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,YAAY,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAG9D,OAAO,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAInE,OAAO,EACL,aAAa,EACb,sBAAsB,EACtB,OAAO,EACP,OAAO,EACP,MAAM,EACN,QAAQ,EACR,YAAY,EACZ,kBAAkB,EAClB,MAAM,EACN,SAAS,GACV,MAAM,cAAc,CAAC;AACtB,YAAY,EACV,6BAA6B,EAC7B,mBAAmB,EACnB,cAAc,EACd,eAAe,GAChB,MAAM,cAAc,CAAC;AAGtB,OAAO,EACL,kBAAkB,EAClB,sBAAsB,EACtB,mBAAmB,EACnB,iBAAiB,EACjB,gBAAgB,EAChB,gBAAgB,EAChB,qBAAqB,EACrB,eAAe,EACf,eAAe,EACf,sBAAsB,EACtB,iBAAiB,EACjB,iBAAiB,EACjB,eAAe,GAChB,MAAM,eAAe,CAAC;AACvB,YAAY,EACV,qBAAqB,EACrB,mBAAmB,EACnB,cAAc,EACd,qBAAqB,EACrB,wBAAwB,EACxB,uBAAuB,EACvB,sBAAsB,EACtB,wBAAwB,GACzB,MAAM,eAAe,CAAC;AAGvB,OAAO,EACL,OAAO,EACP,qBAAqB,EACrB,iBAAiB,EACjB,kBAAkB,EAClB,kBAAkB,EAClB,MAAM,EACN,eAAe,EACf,YAAY,EACZ,wBAAwB,EACxB,aAAa,EACb,oBAAoB,EACpB,YAAY,EACZ,kBAAkB,EAClB,cAAc,GACf,MAAM,QAAQ,CAAC;AAChB,OAAO,EACL,gBAAgB,EAChB,eAAe,EACf,wBAAwB,EACxB,mBAAmB,EACnB,oBAAoB,EACpB,kBAAkB,GACnB,MAAM,iBAAiB,CAAC;AACzB,YAAY,EACV,iBAAiB,EACjB,WAAW,EACX,mBAAmB,EACnB,eAAe,GAChB,MAAM,iBAAiB,CAAC;AACzB,YAAY,EACV,kBAAkB,EAClB,sBAAsB,EACtB,YAAY,EACZ,mBAAmB,EACnB,kBAAkB,EAClB,YAAY,EACZ,mBAAmB,EACnB,YAAY,EACZ,YAAY,EACZ,kBAAkB,EAClB,kBAAkB,EAClB,oBAAoB,EACpB,eAAe,EACf,YAAY,EACZ,gBAAgB,EAChB,iBAAiB,EACjB,kBAAkB,EAClB,0BAA0B,EAC1B,mBAAmB,EACnB,uBAAuB,EACvB,iBAAiB,EACjB,uBAAuB,EACvB,kBAAkB,EAClB,kBAAkB,EAClB,wBAAwB,EACxB,iBAAiB,EACjB,gBAAgB,EAChB,sBAAsB,EACtB,qBAAqB,EACrB,yBAAyB,EACzB,qBAAqB,EACrB,wBAAwB,EACxB,iBAAiB,EACjB,mBAAmB,EACnB,0BAA0B,EAC1B,kBAAkB,EAClB,mBAAmB,EACnB,oBAAoB,EACpB,gBAAgB,EAChB,aAAa,EACb,aAAa,EACb,mBAAmB,EACnB,cAAc,EACd,kBAAkB,EAClB,WAAW,EACX,WAAW,EACX,eAAe,EACf,UAAU,EACV,oBAAoB,EACpB,uBAAuB,EACvB,cAAc,EACd,UAAU,EACV,sBAAsB,EACtB,kBAAkB,EAClB,aAAa,EACb,iBAAiB,EACjB,oBAAoB,EACpB,mBAAmB,EACnB,gBAAgB,EAChB,aAAa,EACb,YAAY,EACZ,cAAc,EACd,kBAAkB,EAClB,YAAY,EACZ,eAAe,EACf,cAAc,GACf,MAAM,QAAQ,CAAC"}