@destyler/dynamic 0.0.7-beta.7 → 0.1.0

package/dist/index.cjs

@@ -1,1032 +0,0 @@
-'use strict';
-
-const anatomy$1 = require('@zag-js/anatomy');
-const domEvent = require('@zag-js/dom-event');
-const domQuery = require('@zag-js/dom-query');
-const formUtils = require('@zag-js/form-utils');
-const autoResize = require('@zag-js/auto-resize');
-const core = require('@zag-js/core');
-const interactOutside = require('@zag-js/interact-outside');
-const liveRegion = require('@zag-js/live-region');
-const utils = require('@zag-js/utils');
-const types = require('@zag-js/types');
-
-const anatomy = anatomy$1.createAnatomy("dynamic").parts(
-  "root",
-  "label",
-  "control",
-  "input",
-  "clearTrigger",
-  "item",
-  "itemPreview",
-  "itemInput",
-  "itemText",
-  "itemDeleteTrigger"
-);
-const parts = anatomy.build();
-
-const dom = domQuery.createScope({
-  getRootId: (ctx) => ctx.ids?.root ?? `dynamic:${ctx.id}`,
-  getInputId: (ctx) => ctx.ids?.input ?? `dynamic:${ctx.id}:input`,
-  getClearTriggerId: (ctx) => ctx.ids?.clearBtn ?? `dynamic:${ctx.id}:clear-btn`,
-  getHiddenInputId: (ctx) => ctx.ids?.hiddenInput ?? `dynamic:${ctx.id}:hidden-input`,
-  getLabelId: (ctx) => ctx.ids?.label ?? `dynamic:${ctx.id}:label`,
-  getControlId: (ctx) => ctx.ids?.control ?? `dynamic:${ctx.id}:control`,
-  getItemId: (ctx, opt) => ctx.ids?.item?.(opt) ?? `dynamic:${ctx.id}:tag:${opt.value}:${opt.index}`,
-  getItemDeleteTriggerId: (ctx, opt) => ctx.ids?.itemDeleteTrigger?.(opt) ?? `${dom.getItemId(ctx, opt)}:delete-btn`,
-  getItemInputId: (ctx, opt) => ctx.ids?.itemInput?.(opt) ?? `${dom.getItemId(ctx, opt)}:input`,
-  getEditInputId: (ctx) => `${ctx.editedTagId}:input`,
-  getTagInputEl: (ctx, opt) => dom.getById(ctx, dom.getItemInputId(ctx, opt)),
-  getRootEl: (ctx) => dom.getById(ctx, dom.getRootId(ctx)),
-  getInputEl: (ctx) => dom.getById(ctx, dom.getInputId(ctx)),
-  getHiddenInputEl: (ctx) => dom.getById(ctx, dom.getHiddenInputId(ctx)),
-  getEditInputEl: (ctx) => dom.getById(ctx, dom.getEditInputId(ctx)),
-  getTagElements: (ctx) => domQuery.queryAll(dom.getRootEl(ctx), `[data-part=item-preview]:not([data-disabled])`),
-  getFirstEl: (ctx) => dom.getTagElements(ctx)[0],
-  getLastEl: (ctx) => dom.getTagElements(ctx)[dom.getTagElements(ctx).length - 1],
-  getPrevEl: (ctx, id) => domQuery.prevById(dom.getTagElements(ctx), id, false),
-  getNextEl: (ctx, id) => domQuery.nextById(dom.getTagElements(ctx), id, false),
-  getTagElAtIndex: (ctx, index) => dom.getTagElements(ctx)[index],
-  getIndexOfId: (ctx, id) => domQuery.indexOfId(dom.getTagElements(ctx), id),
-  isInputFocused: (ctx) => dom.getDoc(ctx).activeElement === dom.getInputEl(ctx),
-  getHighlightedTagValue: (ctx) => {
-    if (!ctx.highlightedTagId)
-      return null;
-    const tagEl = dom.getById(ctx, ctx.highlightedTagId);
-    return tagEl?.dataset.value ?? null;
-  },
-  setHoverIntent: (el) => {
-    const tagEl = el.closest("[data-part=item-preview]");
-    if (!tagEl)
-      return;
-    tagEl.dataset.deleteIntent = "";
-  },
-  clearHoverIntent: (el) => {
-    const tagEl = el.closest("[data-part=item-preview]");
-    if (!tagEl)
-      return;
-    delete tagEl.dataset.deleteIntent;
-  },
-  dispatchInputEvent(ctx) {
-    const inputEl = dom.getHiddenInputEl(ctx);
-    if (!inputEl)
-      return;
-    formUtils.dispatchInputValueEvent(inputEl, { value: ctx.valueAsString });
-  }
-});
-
-function connect(state, send, normalize) {
-  const interactive = state.context.isInteractive;
-  const disabled = state.context.disabled;
-  const readOnly = state.context.readOnly;
-  const invalid = state.context.invalid || state.context.isOverflowing;
-  const translations = state.context.translations;
-  const focused = state.hasTag("focused");
-  const editingTag = state.matches("editing:tag");
-  const empty = state.context.count === 0;
-  function getItemState(options) {
-    const id = dom.getItemId(state.context, options);
-    return {
-      id,
-      editing: editingTag && state.context.editedTagId === id,
-      highlighted: id === state.context.highlightedTagId,
-      disabled: Boolean(options.disabled || disabled)
-    };
-  }
-  return {
-    empty,
-    inputValue: state.context.trimmedInputValue,
-    value: state.context.value,
-    valueAsString: state.context.valueAsString,
-    count: state.context.count,
-    atMax: state.context.isAtMax,
-    setValue(value) {
-      send({ type: "SET_VALUE", value });
-    },
-    clearValue(id) {
-      if (id) {
-        send({ type: "CLEAR_TAG", id });
-      } else {
-        send("CLEAR_VALUE");
-      }
-    },
-    addValue(value) {
-      send({ type: "ADD_TAG", value });
-    },
-    setValueAtIndex(index, value) {
-      send({ type: "SET_VALUE_AT_INDEX", index, value });
-    },
-    setInputValue(value) {
-      send({ type: "SET_INPUT_VALUE", value });
-    },
-    clearInputValue() {
-      send({ type: "SET_INPUT_VALUE", value: "" });
-    },
-    focus() {
-      dom.getInputEl(state.context)?.focus();
-    },
-    getItemState,
-    getRootProps() {
-      return normalize.element({
-        "dir": state.context.dir,
-        ...parts.root.attrs,
-        "data-invalid": domQuery.dataAttr(invalid),
-        "data-readonly": domQuery.dataAttr(readOnly),
-        "data-disabled": domQuery.dataAttr(disabled),
-        "data-focus": domQuery.dataAttr(focused),
-        "data-empty": domQuery.dataAttr(empty),
-        "id": dom.getRootId(state.context),
-        onPointerDown() {
-          if (!interactive)
-            return;
-          send("POINTER_DOWN");
-        }
-      });
-    },
-    getLabelProps() {
-      return normalize.label({
-        ...parts.label.attrs,
-        "data-disabled": domQuery.dataAttr(disabled),
-        "data-invalid": domQuery.dataAttr(invalid),
-        "data-readonly": domQuery.dataAttr(readOnly),
-        "id": dom.getLabelId(state.context),
-        "dir": state.context.dir,
-        "htmlFor": dom.getInputId(state.context)
-      });
-    },
-    getControlProps() {
-      return normalize.element({
-        "id": dom.getControlId(state.context),
-        ...parts.control.attrs,
-        "dir": state.context.dir,
-        "tabIndex": readOnly ? 0 : void 0,
-        "data-disabled": domQuery.dataAttr(disabled),
-        "data-readonly": domQuery.dataAttr(readOnly),
-        "data-invalid": domQuery.dataAttr(invalid),
-        "data-focus": domQuery.dataAttr(focused)
-      });
-    },
-    getInputProps() {
-      return normalize.input({
-        ...parts.input.attrs,
-        "dir": state.context.dir,
-        "data-invalid": domQuery.dataAttr(invalid),
-        "aria-invalid": domQuery.ariaAttr(invalid),
-        "data-readonly": domQuery.dataAttr(readOnly),
-        "maxLength": state.context.maxLength,
-        "id": dom.getInputId(state.context),
-        "defaultValue": state.context.inputValue,
-        "autoComplete": "off",
-        "autoCorrect": "off",
-        "autoCapitalize": "none",
-        "disabled": disabled || readOnly,
-        onChange(event) {
-          const evt = domEvent.getNativeEvent(event);
-          const value = event.currentTarget.value;
-          if (evt.inputType === "insertFromPaste") {
-            send({ type: "PASTE", value });
-            return;
-          }
-          if (endsWith(value, state.context.delimiter)) {
-            send("DELIMITER_KEY");
-            return;
-          }
-          send({ type: "TYPE", value, key: evt.inputType });
-        },
-        onFocus() {
-          send("FOCUS");
-        },
-        onKeyDown(event) {
-          if (event.defaultPrevented)
-            return;
-          if (domQuery.isComposingEvent(event))
-            return;
-          const target = event.currentTarget;
-          const isCombobox = target.getAttribute("role") === "combobox";
-          const isExpanded = target.ariaExpanded === "true";
-          const keyMap = {
-            ArrowDown() {
-              send("ARROW_DOWN");
-            },
-            ArrowLeft() {
-              if (isCombobox && isExpanded)
-                return;
-              send("ARROW_LEFT");
-            },
-            ArrowRight(event2) {
-              if (state.context.highlightedTagId) {
-                event2.preventDefault();
-              }
-              if (isCombobox && isExpanded)
-                return;
-              send("ARROW_RIGHT");
-            },
-            Escape(event2) {
-              event2.preventDefault();
-              send("ESCAPE");
-            },
-            Backspace() {
-              send("BACKSPACE");
-            },
-            Delete() {
-              send("DELETE");
-            },
-            Enter(event2) {
-              if (isCombobox && isExpanded)
-                return;
-              send("ENTER");
-              event2.preventDefault();
-            }
-          };
-          const key = domEvent.getEventKey(event, state.context);
-          const exec = keyMap[key];
-          if (exec) {
-            exec(event);
-          }
-        }
-      });
-    },
-    getHiddenInputProps() {
-      return normalize.input({
-        type: "text",
-        hidden: true,
-        name: state.context.name,
-        form: state.context.form,
-        disabled,
-        readOnly,
-        required: state.context.required,
-        id: dom.getHiddenInputId(state.context),
-        defaultValue: state.context.valueAsString
-      });
-    },
-    getItemProps(props) {
-      return normalize.element({
-        ...parts.item.attrs,
-        "dir": state.context.dir,
-        "data-value": props.value,
-        "data-disabled": domQuery.dataAttr(disabled)
-      });
-    },
-    getItemPreviewProps(props) {
-      const itemState = getItemState(props);
-      return normalize.element({
-        ...parts.itemPreview.attrs,
-        "id": itemState.id,
-        "dir": state.context.dir,
-        "hidden": itemState.editing,
-        "data-value": props.value,
-        "data-disabled": domQuery.dataAttr(disabled),
-        "data-highlighted": domQuery.dataAttr(itemState.highlighted),
-        onPointerDown(event) {
-          if (!interactive || itemState.disabled)
-            return;
-          event.preventDefault();
-          send({ type: "POINTER_DOWN_TAG", id: itemState.id });
-        },
-        onDoubleClick() {
-          if (!interactive || itemState.disabled)
-            return;
-          send({ type: "DOUBLE_CLICK_TAG", id: itemState.id });
-        }
-      });
-    },
-    getItemTextProps(props) {
-      const itemState = getItemState(props);
-      return normalize.element({
-        ...parts.itemText.attrs,
-        "dir": state.context.dir,
-        "data-disabled": domQuery.dataAttr(disabled),
-        "data-highlighted": domQuery.dataAttr(itemState.highlighted)
-      });
-    },
-    getItemInputProps(props) {
-      const itemState = getItemState(props);
-      return normalize.input({
-        ...parts.itemInput.attrs,
-        "dir": state.context.dir,
-        "aria-label": translations.tagEdited(props.value),
-        "aria-hidden": true,
-        "disabled": disabled,
-        "id": dom.getItemInputId(state.context, props),
-        "tabIndex": -1,
-        "hidden": !itemState.editing,
-        "defaultValue": itemState.editing ? state.context.editedTagValue : "",
-        onChange(event) {
-          send({ type: "TAG_INPUT_TYPE", value: event.currentTarget.value });
-        },
-        onBlur(event) {
-          send({ type: "TAG_INPUT_BLUR", target: event.relatedTarget, id: itemState.id });
-        },
-        onKeyDown(event) {
-          if (event.defaultPrevented)
-            return;
-          if (domQuery.isComposingEvent(event))
-            return;
-          const keyMap = {
-            Enter() {
-              send("TAG_INPUT_ENTER");
-            },
-            Escape() {
-              send("TAG_INPUT_ESCAPE");
-            }
-          };
-          const exec = keyMap[event.key];
-          if (exec) {
-            event.preventDefault();
-            exec(event);
-          }
-        }
-      });
-    },
-    getItemDeleteTriggerProps(props) {
-      const id = dom.getItemId(state.context, props);
-      return normalize.button({
-        ...parts.itemDeleteTrigger.attrs,
-        "dir": state.context.dir,
-        "id": dom.getItemDeleteTriggerId(state.context, props),
-        "type": "button",
-        "disabled": disabled,
-        "aria-label": translations.deleteTagTriggerLabel(props.value),
-        "tabIndex": -1,
-        onPointerDown(event) {
-          if (!interactive) {
-            event.preventDefault();
-          }
-        },
-        onPointerMove(event) {
-          if (!interactive)
-            return;
-          dom.setHoverIntent(event.currentTarget);
-        },
-        onPointerLeave(event) {
-          if (!interactive)
-            return;
-          dom.clearHoverIntent(event.currentTarget);
-        },
-        onClick() {
-          if (!interactive)
-            return;
-          send({ type: "CLICK_DELETE_TAG", id });
-        }
-      });
-    },
-    getClearTriggerProps() {
-      return normalize.button({
-        ...parts.clearTrigger.attrs,
-        "dir": state.context.dir,
-        "id": dom.getClearTriggerId(state.context),
-        "type": "button",
-        "data-readonly": domQuery.dataAttr(readOnly),
-        "disabled": disabled,
-        "aria-label": translations.clearTriggerLabel,
-        "hidden": empty,
-        onClick() {
-          if (!interactive)
-            return;
-          send("CLEAR_VALUE");
-        }
-      });
-    }
-  };
-}
-function endsWith(str, del) {
-  if (!del)
-    return false;
-  if (typeof del === "string")
-    return str.endsWith(del);
-  return new RegExp(`${del.source}$`).test(str);
-}
-
-const { and, not, or } = core.guards;
-const invoke = {
-  change: (ctx) => {
-    ctx.onValueChange?.({ value: Array.from(ctx.value) });
-    dom.dispatchInputEvent(ctx);
-  },
-  highlightChange: (ctx) => {
-    const highlightedValue = dom.getHighlightedTagValue(ctx);
-    ctx.onHighlightChange?.({ highlightedValue });
-  },
-  valueChange: (ctx) => {
-    ctx.onInputValueChange?.({ inputValue: ctx.inputValue });
-  }
-};
-const set = {
-  value: (ctx, value) => {
-    if (utils.isEqual(ctx.value, value))
-      return;
-    ctx.value = value;
-    invoke.change(ctx);
-  },
-  valueAtIndex: (ctx, index, value) => {
-    if (utils.isEqual(ctx.value[index], value))
-      return;
-    ctx.value[index] = value;
-    invoke.change(ctx);
-  },
-  highlightedId: (ctx, id) => {
-    if (utils.isEqual(ctx.highlightedTagId, id))
-      return;
-    ctx.highlightedTagId = id;
-    invoke.highlightChange(ctx);
-  },
-  inputValue: (ctx, value) => {
-    if (utils.isEqual(ctx.inputValue, value))
-      return;
-    ctx.inputValue = value;
-    invoke.valueChange(ctx);
-  }
-};
-function machine(userContext) {
-  const ctx = utils.compact(userContext);
-  return core.createMachine(
-    {
-      id: "dynamic",
-      initial: ctx.autoFocus ? "focused:input" : "idle",
-      context: {
-        inputValue: "",
-        editedTagValue: "",
-        editedTagId: null,
-        highlightedTagId: null,
-        value: [],
-        dir: "ltr",
-        max: Infinity,
-        blurBehavior: void 0,
-        addOnPaste: false,
-        editable: true,
-        validate: () => true,
-        delimiter: ",",
-        disabled: false,
-        readOnly: false,
-        ...ctx,
-        liveRegion: null,
-        log: { current: null, prev: null },
-        fieldsetDisabled: false,
-        translations: {
-          clearTriggerLabel: "Clear all tags",
-          deleteTagTriggerLabel: (value) => `Delete tag ${value}`,
-          tagAdded: (value) => `Added tag ${value}`,
-          tagsPasted: (values) => `Pasted ${values.length} tags`,
-          tagEdited: (value) => `Editing tag ${value}. Press enter to save or escape to cancel.`,
-          tagUpdated: (value) => `Tag update to ${value}`,
-          tagDeleted: (value) => `Tag ${value} deleted`,
-          tagSelected: (value) => `Tag ${value} selected. Press enter to edit, delete or backspace to remove.`,
-          ...ctx.translations
-        }
-      },
-      computed: {
-        count: (ctx2) => ctx2.value.length,
-        valueAsString: (ctx2) => JSON.stringify(ctx2.value),
-        trimmedInputValue: (ctx2) => ctx2.inputValue.trim(),
-        isDisabled: (ctx2) => !!ctx2.disabled || ctx2.fieldsetDisabled,
-        isInteractive: (ctx2) => !(ctx2.readOnly || ctx2.isDisabled),
-        isAtMax: (ctx2) => ctx2.count === ctx2.max,
-        isOverflowing: (ctx2) => ctx2.count > ctx2.max
-      },
-      watch: {
-        highlightedTagId: "logHighlightedTag",
-        isOverflowing: "invokeOnInvalid",
-        log: "announceLog",
-        inputValue: "syncInputValue",
-        editedTagValue: "syncEditedTagInputValue"
-      },
-      activities: ["trackLiveRegion", "trackFormControlState"],
-      exit: ["clearLog"],
-      on: {
-        DOUBLE_CLICK_TAG: {
-          internal: true,
-          guard: "isTagEditable",
-          target: "editing:tag",
-          actions: ["setEditedId", "initializeEditedTagValue"]
-        },
-        POINTER_DOWN_TAG: {
-          internal: true,
-          target: "navigating:tag",
-          actions: ["highlightTag", "focusInput"]
-        },
-        CLICK_DELETE_TAG: {
-          target: "focused:input",
-          actions: ["deleteTag"]
-        },
-        SET_INPUT_VALUE: {
-          actions: ["setInputValue"]
-        },
-        SET_VALUE: {
-          actions: ["setValue"]
-        },
-        CLEAR_TAG: {
-          actions: ["deleteTag"]
-        },
-        SET_VALUE_AT_INDEX: {
-          actions: ["setValueAtIndex"]
-        },
-        CLEAR_VALUE: {
-          actions: ["clearTags", "clearInputValue", "focusInput"]
-        },
-        ADD_TAG: {
-          actions: ["addTag"]
-        },
-        INSERT_TAG: {
-          // (!isAtMax || allowOverflow) && !inputValueIsEmpty
-          guard: and(or(not("isAtMax"), "allowOverflow"), not("isInputValueEmpty")),
-          actions: ["addTag", "clearInputValue"]
-        },
-        EXTERNAL_BLUR: [
-          { guard: "addOnBlur", actions: "raiseInsertTagEvent" },
-          { guard: "clearOnBlur", actions: "clearInputValue" }
-        ]
-      },
-      states: {
-        "idle": {
-          on: {
-            FOCUS: "focused:input",
-            POINTER_DOWN: {
-              guard: not("hasHighlightedTag"),
-              target: "focused:input"
-            }
-          }
-        },
-        "focused:input": {
-          tags: ["focused"],
-          entry: ["focusInput", "clearHighlightedId"],
-          activities: ["trackInteractOutside"],
-          on: {
-            TYPE: {
-              actions: "setInputValue"
-            },
-            BLUR: [
-              {
-                guard: "addOnBlur",
-                target: "idle",
-                actions: "raiseInsertTagEvent"
-              },
-              {
-                guard: "clearOnBlur",
-                target: "idle",
-                actions: "clearInputValue"
-              },
-              { target: "idle" }
-            ],
-            ENTER: {
-              actions: ["raiseInsertTagEvent"]
-            },
-            DELIMITER_KEY: {
-              actions: ["raiseInsertTagEvent"]
-            },
-            ARROW_LEFT: {
-              guard: and("hasTags", "isInputCaretAtStart"),
-              target: "navigating:tag",
-              actions: "highlightLastTag"
-            },
-            BACKSPACE: {
-              target: "navigating:tag",
-              guard: and("hasTags", "isInputCaretAtStart"),
-              actions: "highlightLastTag"
-            },
-            DELETE: {
-              guard: "hasHighlightedTag",
-              actions: ["deleteHighlightedTag", "highlightTagAtIndex"]
-            },
-            PASTE: [
-              {
-                guard: "addOnPaste",
-                actions: ["setInputValue", "addTagFromPaste"]
-              },
-              {
-                actions: "setInputValue"
-              }
-            ]
-          }
-        },
-        "navigating:tag": {
-          tags: ["focused"],
-          activities: ["trackInteractOutside"],
-          on: {
-            ARROW_RIGHT: [
-              {
-                guard: and("hasTags", "isInputCaretAtStart", not("isLastTagHighlighted")),
-                actions: "highlightNextTag"
-              },
-              { target: "focused:input" }
-            ],
-            ARROW_LEFT: {
-              actions: "highlightPrevTag"
-            },
-            BLUR: {
-              target: "idle",
-              actions: "clearHighlightedId"
-            },
-            ENTER: {
-              guard: and("isTagEditable", "hasHighlightedTag"),
-              target: "editing:tag",
-              actions: ["setEditedId", "initializeEditedTagValue", "focusEditedTagInput"]
-            },
-            ARROW_DOWN: "focused:input",
-            ESCAPE: "focused:input",
-            TYPE: {
-              target: "focused:input",
-              actions: "setInputValue"
-            },
-            BACKSPACE: [
-              {
-                guard: "isFirstTagHighlighted",
-                actions: ["deleteHighlightedTag", "highlightFirstTag"]
-              },
-              {
-                guard: "hasHighlightedTag",
-                actions: ["deleteHighlightedTag", "highlightPrevTag"]
-              },
-              {
-                actions: ["highlightLastTag"]
-              }
-            ],
-            DELETE: {
-              target: "focused:input",
-              actions: ["deleteHighlightedTag", "highlightTagAtIndex"]
-            },
-            PASTE: [
-              {
-                guard: "addOnPaste",
-                target: "focused:input",
-                actions: ["setInputValue", "addTagFromPaste"]
-              },
-              {
-                target: "focused:input",
-                actions: "setInputValue"
-              }
-            ]
-          }
-        },
-        "editing:tag": {
-          tags: ["editing", "focused"],
-          entry: "focusEditedTagInput",
-          activities: ["autoResize"],
-          on: {
-            TAG_INPUT_TYPE: {
-              actions: "setEditedTagValue"
-            },
-            TAG_INPUT_ESCAPE: {
-              target: "navigating:tag",
-              actions: ["clearEditedTagValue", "focusInput", "clearEditedId", "highlightTagAtIndex"]
-            },
-            TAG_INPUT_BLUR: [
-              {
-                guard: "isInputRelatedTarget",
-                target: "navigating:tag",
-                actions: ["clearEditedTagValue", "clearHighlightedId", "clearEditedId"]
-              },
-              {
-                target: "idle",
-                actions: ["clearEditedTagValue", "clearHighlightedId", "clearEditedId", "raiseExternalBlurEvent"]
-              }
-            ],
-            TAG_INPUT_ENTER: [
-              {
-                guard: "isEditedTagEmpty",
-                target: "navigating:tag",
-                actions: ["deleteHighlightedTag", "focusInput", "clearEditedId", "highlightTagAtIndex"]
-              },
-              {
-                target: "navigating:tag",
-                actions: ["submitEditedTagValue", "focusInput", "clearEditedId", "highlightTagAtIndex"]
-              }
-            ]
-          }
-        }
-      }
-    },
-    {
-      guards: {
-        isInputRelatedTarget: (ctx2, evt) => evt.relatedTarget === dom.getInputEl(ctx2),
-        isAtMax: (ctx2) => ctx2.isAtMax,
-        hasHighlightedTag: (ctx2) => ctx2.highlightedTagId !== null,
-        isFirstTagHighlighted: (ctx2) => {
-          const firstItemId = dom.getItemId(ctx2, { value: ctx2.value[0], index: 0 });
-          return firstItemId === ctx2.highlightedTagId;
-        },
-        isEditedTagEmpty: (ctx2) => ctx2.editedTagValue.trim() === "",
-        isLastTagHighlighted: (ctx2) => {
-          const lastIndex = ctx2.value.length - 1;
-          const lastItemId = dom.getItemId(ctx2, { value: ctx2.value[lastIndex], index: lastIndex });
-          return lastItemId === ctx2.highlightedTagId;
-        },
-        isInputValueEmpty: (ctx2) => ctx2.trimmedInputValue.length === 0,
-        hasTags: (ctx2) => ctx2.value.length > 0,
-        allowOverflow: (ctx2) => !!ctx2.allowOverflow,
-        autoFocus: (ctx2) => !!ctx2.autoFocus,
-        addOnBlur: (ctx2) => ctx2.blurBehavior === "add",
-        clearOnBlur: (ctx2) => ctx2.blurBehavior === "clear",
-        addOnPaste: (ctx2) => !!ctx2.addOnPaste,
-        isTagEditable: (ctx2) => !!ctx2.editable,
-        isInputCaretAtStart(ctx2) {
-          const input = dom.getInputEl(ctx2);
-          if (!input)
-            return false;
-          try {
-            return input.selectionStart === 0 && input.selectionEnd === 0;
-          } catch {
-            return input.value === "";
-          }
-        }
-      },
-      activities: {
-        trackInteractOutside(ctx2, _evt, { send }) {
-          return interactOutside.trackInteractOutside(dom.getInputEl(ctx2), {
-            exclude(target) {
-              return domQuery.contains(dom.getRootEl(ctx2), target);
-            },
-            onFocusOutside: ctx2.onFocusOutside,
-            onPointerDownOutside: ctx2.onPointerDownOutside,
-            onInteractOutside(event) {
-              ctx2.onInteractOutside?.(event);
-              if (event.defaultPrevented)
-                return;
-              send({ type: "BLUR", src: "interact-outside" });
-            }
-          });
-        },
-        trackFormControlState(ctx2, _evt, { send, initialContext }) {
-          return formUtils.trackFormControl(dom.getHiddenInputEl(ctx2), {
-            onFieldsetDisabledChange(disabled) {
-              ctx2.fieldsetDisabled = disabled;
-            },
-            onFormReset() {
-              send({ type: "SET_VALUE", value: initialContext.value, src: "form-reset" });
-            }
-          });
-        },
-        autoResize(ctx2) {
-          if (!ctx2.editedTagValue || ctx2.idx == null || !ctx2.editable)
-            return;
-          const input = dom.getTagInputEl(ctx2, { value: ctx2.editedTagValue, index: ctx2.idx });
-          return autoResize.autoResizeInput(input);
-        },
-        trackLiveRegion(ctx2) {
-          ctx2.liveRegion = liveRegion.createLiveRegion({
-            level: "assertive",
-            document: dom.getDoc(ctx2)
-          });
-          return () => ctx2.liveRegion?.destroy();
-        }
-      },
-      actions: {
-        raiseInsertTagEvent(_, __, { self }) {
-          self.send("INSERT_TAG");
-        },
-        raiseExternalBlurEvent(_, evt, { self }) {
-          self.send({ type: "EXTERNAL_BLUR", id: evt.id });
-        },
-        dispatchChangeEvent(ctx2) {
-          dom.dispatchInputEvent(ctx2);
-        },
-        highlightNextTag(ctx2) {
-          if (ctx2.highlightedTagId == null)
-            return;
-          const next = dom.getNextEl(ctx2, ctx2.highlightedTagId);
-          set.highlightedId(ctx2, next?.id ?? null);
-        },
-        highlightFirstTag(ctx2) {
-          domQuery.raf(() => {
-            const first = dom.getFirstEl(ctx2);
-            set.highlightedId(ctx2, first?.id ?? null);
-          });
-        },
-        highlightLastTag(ctx2) {
-          const last = dom.getLastEl(ctx2);
-          set.highlightedId(ctx2, last?.id ?? null);
-        },
-        highlightPrevTag(ctx2) {
-          if (ctx2.highlightedTagId == null)
-            return;
-          const prev = dom.getPrevEl(ctx2, ctx2.highlightedTagId);
-          set.highlightedId(ctx2, prev?.id ?? null);
-        },
-        highlightTag(ctx2, evt) {
-          set.highlightedId(ctx2, evt.id);
-        },
-        highlightTagAtIndex(ctx2) {
-          domQuery.raf(() => {
-            if (ctx2.idx == null)
-              return;
-            const tagEl = dom.getTagElAtIndex(ctx2, ctx2.idx);
-            if (tagEl == null)
-              return;
-            set.highlightedId(ctx2, tagEl.id);
-            ctx2.idx = void 0;
-          });
-        },
-        deleteTag(ctx2, evt) {
-          const index = dom.getIndexOfId(ctx2, evt.id);
-          const value = ctx2.value[index];
-          ctx2.log.prev = ctx2.log.current;
-          ctx2.log.current = { type: "delete", value };
-          set.value(ctx2, utils.removeAt(ctx2.value, index));
-        },
-        deleteHighlightedTag(ctx2) {
-          if (ctx2.highlightedTagId == null)
-            return;
-          const index = dom.getIndexOfId(ctx2, ctx2.highlightedTagId);
-          ctx2.idx = index;
-          const value = ctx2.value[index];
-          ctx2.log.prev = ctx2.log.current;
-          ctx2.log.current = { type: "delete", value };
-          set.value(ctx2, utils.removeAt(ctx2.value, index));
-        },
-        setEditedId(ctx2, evt) {
-          ctx2.editedTagId = evt.id ?? ctx2.highlightedTagId;
-          ctx2.idx = dom.getIndexOfId(ctx2, ctx2.editedTagId);
-        },
-        clearEditedId(ctx2) {
-          ctx2.editedTagId = null;
-        },
-        clearEditedTagValue(ctx2) {
-          ctx2.editedTagValue = "";
-        },
-        setEditedTagValue(ctx2, evt) {
-          ctx2.editedTagValue = evt.value;
-        },
-        submitEditedTagValue(ctx2) {
-          if (!ctx2.editedTagId)
-            return;
-          const index = dom.getIndexOfId(ctx2, ctx2.editedTagId);
-          set.valueAtIndex(ctx2, index, ctx2.editedTagValue ?? "");
-          ctx2.log.prev = ctx2.log.current;
-          ctx2.log.current = { type: "update", value: ctx2.editedTagValue };
-        },
-        setValueAtIndex(ctx2, evt) {
-          if (evt.value) {
-            ctx2.value[evt.index] = evt.value;
-            ctx2.log.prev = ctx2.log.current;
-            ctx2.log.current = { type: "update", value: evt.value };
-          } else {
-            utils.warn("You need to provide a value for the tag");
-          }
-        },
-        initializeEditedTagValue(ctx2) {
-          if (!ctx2.editedTagId)
-            return;
-          const index = dom.getIndexOfId(ctx2, ctx2.editedTagId);
-          ctx2.editedTagValue = ctx2.value[index];
-        },
-        focusEditedTagInput(ctx2) {
-          domQuery.raf(() => {
-            dom.getEditInputEl(ctx2)?.select();
-          });
-        },
-        setInputValue(ctx2, evt) {
-          set.inputValue(ctx2, evt.value);
-        },
-        clearHighlightedId(ctx2) {
-          ctx2.highlightedTagId = null;
-        },
-        focusInput(ctx2) {
-          domQuery.raf(() => {
-            dom.getInputEl(ctx2)?.focus();
-          });
-        },
-        clearInputValue(ctx2) {
-          domQuery.raf(() => {
-            set.inputValue(ctx2, "");
-          });
-        },
-        syncInputValue(ctx2) {
-          const inputEl = dom.getInputEl(ctx2);
-          dom.setValue(inputEl, ctx2.inputValue);
-        },
-        syncEditedTagInputValue(ctx2, evt) {
-          const id = ctx2.editedTagId || ctx2.highlightedTagId || evt.id;
-          if (id == null)
-            return;
-          const editTagInputEl = dom.getById(ctx2, `${id}:input`);
-          dom.setValue(editTagInputEl, ctx2.editedTagValue);
-        },
-        addTag(ctx2, evt) {
-          const value = evt.value ?? ctx2.trimmedInputValue;
-          const guard = ctx2.validate?.({ inputValue: value, value: Array.from(ctx2.value) });
-          if (guard) {
-            const nextValue = utils.uniq(ctx2.value.concat(value));
-            set.value(ctx2, nextValue);
-            ctx2.log.prev = ctx2.log.current;
-            ctx2.log.current = { type: "add", value };
-          } else {
-            ctx2.onValueInvalid?.({ reason: "invalidTag" });
-          }
-        },
-        addTagFromPaste(ctx2) {
-          domQuery.raf(() => {
-            const value = ctx2.trimmedInputValue;
-            const guard = ctx2.validate?.({ inputValue: value, value: Array.from(ctx2.value) });
-            if (guard) {
-              const trimmedValue = ctx2.delimiter ? value.split(ctx2.delimiter).map((v) => v.trim()) : [value];
-              const nextValue = utils.uniq(ctx2.value.concat(...trimmedValue));
-              set.value(ctx2, nextValue);
-              ctx2.log.prev = ctx2.log.current;
-              ctx2.log.current = { type: "paste", values: trimmedValue };
-            } else {
-              ctx2.onValueInvalid?.({ reason: "invalidTag" });
-            }
-            set.inputValue(ctx2, "");
-          });
-        },
-        clearTags(ctx2) {
-          set.value(ctx2, []);
-          ctx2.log.prev = ctx2.log.current;
-          ctx2.log.current = { type: "clear" };
-        },
-        setValue(ctx2, evt) {
-          set.value(ctx2, evt.value);
-        },
-        invokeOnInvalid(ctx2) {
-          if (ctx2.isOverflowing) {
-            ctx2.onValueInvalid?.({ reason: "rangeOverflow" });
-          }
-        },
-        clearLog(ctx2) {
-          ctx2.log = { prev: null, current: null };
-        },
-        logHighlightedTag(ctx2) {
-          if (ctx2.highlightedTagId == null)
-            return;
-          const index = dom.getIndexOfId(ctx2, ctx2.highlightedTagId);
-          ctx2.log.prev = ctx2.log.current;
-          ctx2.log.current = { type: "select", value: ctx2.value[index] };
-        },
-        // queue logs with screen reader and get it announced
-        announceLog(ctx2) {
-          if (!ctx2.log.current || ctx2.liveRegion == null)
-            return;
-          const region = ctx2.liveRegion;
-          const { current, prev } = ctx2.log;
-          let msg;
-          switch (current.type) {
-            case "add":
-              msg = ctx2.translations.tagAdded(current.value);
-              break;
-            case "delete":
-              msg = ctx2.translations.tagDeleted(current.value);
-              break;
-            case "update":
-              msg = ctx2.translations.tagUpdated(current.value);
-              break;
-            case "paste":
-              msg = ctx2.translations.tagsPasted(current.values);
-              break;
-            case "select":
-              msg = ctx2.translations.tagSelected(current.value);
-              if (prev?.type === "delete") {
-                msg = `${ctx2.translations.tagDeleted(prev.value)}. ${msg}`;
-              } else if (prev?.type === "update") {
-                msg = `${ctx2.translations.tagUpdated(prev.value)}. ${msg}`;
-              }
-              break;
-          }
-          if (msg)
-            region.announce(msg);
-        }
-      }
-    }
-  );
-}
-
-const props = types.createProps()([
-  "addOnPaste",
-  "allowOverflow",
-  "autoFocus",
-  "blurBehavior",
-  "delimiter",
-  "dir",
-  "disabled",
-  "editable",
-  "form",
-  "getRootNode",
-  "id",
-  "ids",
-  "inputValue",
-  "invalid",
-  "max",
-  "maxLength",
-  "name",
-  "onFocusOutside",
-  "onHighlightChange",
-  "onInputValueChange",
-  "onInteractOutside",
-  "onPointerDownOutside",
-  "onValueChange",
-  "onValueInvalid",
-  "required",
-  "readOnly",
-  "translations",
-  "validate",
-  "value"
-]);
-const splitProps = utils.createSplitProps(props);
-const itemProps = types.createProps()(["index", "disabled", "value"]);
-const splitItemProps = utils.createSplitProps(itemProps);
-
-exports.anatomy = anatomy;
-exports.connect = connect;
-exports.itemProps = itemProps;
-exports.machine = machine;
-exports.props = props;
-exports.splitItemProps = splitItemProps;
-exports.splitProps = splitProps;